@acorex/components 21.0.2-next.5 → 21.0.2-next.50
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/conversation2/README.md +5 -8
- package/fesm2022/acorex-components-accordion.mjs +29 -29
- package/fesm2022/acorex-components-accordion.mjs.map +1 -1
- package/fesm2022/acorex-components-action-sheet.mjs +30 -30
- package/fesm2022/acorex-components-action-sheet.mjs.map +1 -1
- package/fesm2022/acorex-components-alert.mjs +16 -16
- package/fesm2022/acorex-components-alert.mjs.map +1 -1
- package/fesm2022/acorex-components-aspect-ratio.mjs +5 -5
- package/fesm2022/acorex-components-aspect-ratio.mjs.map +1 -1
- package/fesm2022/acorex-components-audio-wave.mjs +11 -11
- package/fesm2022/acorex-components-audio-wave.mjs.map +1 -1
- package/fesm2022/acorex-components-autocomplete.mjs +14 -14
- package/fesm2022/acorex-components-autocomplete.mjs.map +1 -1
- package/fesm2022/acorex-components-avatar.mjs +17 -16
- package/fesm2022/acorex-components-avatar.mjs.map +1 -1
- package/fesm2022/acorex-components-badge.mjs +9 -9
- package/fesm2022/acorex-components-badge.mjs.map +1 -1
- package/fesm2022/acorex-components-bottom-navigation.mjs +14 -14
- package/fesm2022/acorex-components-bottom-navigation.mjs.map +1 -1
- package/fesm2022/acorex-components-breadcrumbs.mjs +13 -13
- package/fesm2022/acorex-components-breadcrumbs.mjs.map +1 -1
- package/fesm2022/acorex-components-button-group.mjs +40 -20
- package/fesm2022/acorex-components-button-group.mjs.map +1 -1
- package/fesm2022/acorex-components-button.mjs +35 -36
- package/fesm2022/acorex-components-button.mjs.map +1 -1
- package/fesm2022/acorex-components-calendar.mjs +256 -54
- package/fesm2022/acorex-components-calendar.mjs.map +1 -1
- package/fesm2022/acorex-components-check-box.mjs +10 -10
- package/fesm2022/acorex-components-check-box.mjs.map +1 -1
- package/fesm2022/acorex-components-chips.mjs +9 -9
- package/fesm2022/acorex-components-chips.mjs.map +1 -1
- package/fesm2022/acorex-components-circular-progress.mjs +13 -13
- package/fesm2022/acorex-components-circular-progress.mjs.map +1 -1
- package/fesm2022/acorex-components-code-editor.mjs +27 -27
- package/fesm2022/acorex-components-code-editor.mjs.map +1 -1
- package/fesm2022/acorex-components-color-box.mjs +14 -14
- package/fesm2022/acorex-components-color-box.mjs.map +1 -1
- package/fesm2022/acorex-components-color-palette.mjs +84 -43
- package/fesm2022/acorex-components-color-palette.mjs.map +1 -1
- package/fesm2022/acorex-components-command.mjs +19 -19
- package/fesm2022/acorex-components-command.mjs.map +1 -1
- package/fesm2022/acorex-components-comment.mjs +35 -35
- package/fesm2022/acorex-components-comment.mjs.map +1 -1
- package/fesm2022/acorex-components-conversation.mjs +105 -105
- package/fesm2022/acorex-components-conversation.mjs.map +1 -1
- package/fesm2022/acorex-components-conversation2.mjs +11165 -8111
- package/fesm2022/acorex-components-conversation2.mjs.map +1 -1
- package/fesm2022/acorex-components-cron-job.mjs +51 -51
- package/fesm2022/acorex-components-cron-job.mjs.map +1 -1
- package/fesm2022/acorex-components-data-list.mjs +31 -31
- package/fesm2022/acorex-components-data-list.mjs.map +1 -1
- package/fesm2022/acorex-components-data-pager.mjs +93 -104
- package/fesm2022/acorex-components-data-pager.mjs.map +1 -1
- package/fesm2022/acorex-components-data-table.mjs +69 -57
- package/fesm2022/acorex-components-data-table.mjs.map +1 -1
- package/fesm2022/acorex-components-datetime-box.mjs +174 -39
- package/fesm2022/acorex-components-datetime-box.mjs.map +1 -1
- package/fesm2022/acorex-components-datetime-input.mjs +30 -38
- package/fesm2022/acorex-components-datetime-input.mjs.map +1 -1
- package/fesm2022/acorex-components-datetime-picker.mjs +62 -55
- package/fesm2022/acorex-components-datetime-picker.mjs.map +1 -1
- package/fesm2022/acorex-components-decorators.mjs +39 -39
- package/fesm2022/acorex-components-decorators.mjs.map +1 -1
- package/fesm2022/acorex-components-dialog.mjs +19 -26
- package/fesm2022/acorex-components-dialog.mjs.map +1 -1
- package/fesm2022/acorex-components-drawer.mjs +23 -23
- package/fesm2022/acorex-components-drawer.mjs.map +1 -1
- package/fesm2022/acorex-components-dropdown-button.mjs +9 -9
- package/fesm2022/acorex-components-dropdown.mjs +19 -19
- package/fesm2022/acorex-components-dropdown.mjs.map +1 -1
- package/fesm2022/acorex-components-editor.mjs +12 -12
- package/fesm2022/acorex-components-editor.mjs.map +1 -1
- package/fesm2022/acorex-components-fab.mjs +15 -15
- package/fesm2022/acorex-components-fab.mjs.map +1 -1
- package/fesm2022/acorex-components-flow-chart.mjs +74 -58
- package/fesm2022/acorex-components-flow-chart.mjs.map +1 -1
- package/fesm2022/acorex-components-form.mjs +30 -30
- package/fesm2022/acorex-components-form.mjs.map +1 -1
- package/fesm2022/acorex-components-grid-layout-builder.mjs +15 -15
- package/fesm2022/acorex-components-grid-layout-builder.mjs.map +1 -1
- package/fesm2022/acorex-components-image-editor.mjs +87 -87
- package/fesm2022/acorex-components-image-editor.mjs.map +1 -1
- package/fesm2022/acorex-components-image.mjs +11 -11
- package/fesm2022/acorex-components-image.mjs.map +1 -1
- package/fesm2022/acorex-components-json-viewer.mjs +12 -12
- package/fesm2022/acorex-components-json-viewer.mjs.map +1 -1
- package/fesm2022/acorex-components-kanban.mjs +23 -23
- package/fesm2022/acorex-components-kanban.mjs.map +1 -1
- package/fesm2022/acorex-components-kbd.mjs +15 -15
- package/fesm2022/acorex-components-kbd.mjs.map +1 -1
- package/fesm2022/acorex-components-label.mjs +9 -9
- package/fesm2022/acorex-components-list.mjs +15 -15
- package/fesm2022/acorex-components-list.mjs.map +1 -1
- package/fesm2022/acorex-components-loading-dialog.mjs +19 -19
- package/fesm2022/acorex-components-loading-dialog.mjs.map +1 -1
- package/fesm2022/acorex-components-loading.mjs +21 -21
- package/fesm2022/acorex-components-loading.mjs.map +1 -1
- package/fesm2022/acorex-components-map.mjs +46 -46
- package/fesm2022/acorex-components-map.mjs.map +1 -1
- package/fesm2022/acorex-components-media-viewer.mjs +82 -82
- package/fesm2022/acorex-components-media-viewer.mjs.map +1 -1
- package/fesm2022/acorex-components-menu.mjs +353 -197
- package/fesm2022/acorex-components-menu.mjs.map +1 -1
- package/fesm2022/{acorex-components-modal-acorex-components-modal-CcXuJ4IW.mjs → acorex-components-modal-acorex-components-modal-JpPBSiVh.mjs} +28 -28
- package/fesm2022/{acorex-components-modal-acorex-components-modal-CcXuJ4IW.mjs.map → acorex-components-modal-acorex-components-modal-JpPBSiVh.mjs.map} +1 -1
- package/fesm2022/{acorex-components-modal-modal-content.component-DTZu2zbU.mjs → acorex-components-modal-modal-content.component-DKweXQfl.mjs} +39 -39
- package/fesm2022/acorex-components-modal-modal-content.component-DKweXQfl.mjs.map +1 -0
- package/fesm2022/acorex-components-modal.mjs +1 -1
- package/fesm2022/acorex-components-navbar.mjs +8 -8
- package/fesm2022/acorex-components-notification.mjs +28 -28
- package/fesm2022/acorex-components-notification.mjs.map +1 -1
- package/fesm2022/acorex-components-number-box.mjs +61 -23
- package/fesm2022/acorex-components-number-box.mjs.map +1 -1
- package/fesm2022/acorex-components-otp.mjs +45 -21
- package/fesm2022/acorex-components-otp.mjs.map +1 -1
- package/fesm2022/acorex-components-page.mjs +10 -10
- package/fesm2022/acorex-components-paint.mjs +53 -53
- package/fesm2022/acorex-components-paint.mjs.map +1 -1
- package/fesm2022/acorex-components-password-box.mjs +28 -28
- package/fesm2022/acorex-components-password-box.mjs.map +1 -1
- package/fesm2022/acorex-components-pdf-reader.mjs +9 -9
- package/fesm2022/acorex-components-pdf-reader.mjs.map +1 -1
- package/fesm2022/acorex-components-phone-box.mjs +19 -19
- package/fesm2022/acorex-components-phone-box.mjs.map +1 -1
- package/fesm2022/acorex-components-picker.mjs +31 -31
- package/fesm2022/acorex-components-picker.mjs.map +1 -1
- package/fesm2022/acorex-components-popover.mjs +11 -11
- package/fesm2022/acorex-components-popover.mjs.map +1 -1
- package/fesm2022/acorex-components-popup.mjs +48 -24
- package/fesm2022/acorex-components-popup.mjs.map +1 -1
- package/fesm2022/acorex-components-progress-bar.mjs +8 -8
- package/fesm2022/acorex-components-qrcode.mjs +37 -20
- package/fesm2022/acorex-components-qrcode.mjs.map +1 -1
- package/fesm2022/acorex-components-query-builder.mjs +15 -14
- package/fesm2022/acorex-components-query-builder.mjs.map +1 -1
- package/fesm2022/acorex-components-radio.mjs +9 -9
- package/fesm2022/acorex-components-rail-navigation.mjs +28 -28
- package/fesm2022/acorex-components-rail-navigation.mjs.map +1 -1
- package/fesm2022/acorex-components-range-slider.mjs +34 -34
- package/fesm2022/acorex-components-range-slider.mjs.map +1 -1
- package/fesm2022/acorex-components-rate-picker.mjs +17 -17
- package/fesm2022/acorex-components-rate-picker.mjs.map +1 -1
- package/fesm2022/acorex-components-rest-api-generator.mjs +33 -33
- package/fesm2022/acorex-components-rest-api-generator.mjs.map +1 -1
- package/fesm2022/acorex-components-result.mjs +8 -8
- package/fesm2022/acorex-components-routing-progress.mjs +8 -8
- package/fesm2022/acorex-components-routing-progress.mjs.map +1 -1
- package/fesm2022/acorex-components-rrule.mjs +36 -36
- package/fesm2022/acorex-components-rrule.mjs.map +1 -1
- package/fesm2022/acorex-components-scheduler-picker.mjs +118 -118
- package/fesm2022/acorex-components-scheduler-picker.mjs.map +1 -1
- package/fesm2022/acorex-components-scheduler.mjs +398 -326
- package/fesm2022/acorex-components-scheduler.mjs.map +1 -1
- package/fesm2022/acorex-components-search-box.mjs +9 -9
- package/fesm2022/acorex-components-search-box.mjs.map +1 -1
- package/fesm2022/acorex-components-select-box.mjs +22 -22
- package/fesm2022/acorex-components-select-box.mjs.map +1 -1
- package/fesm2022/acorex-components-selection-list-2.mjs +12 -12
- package/fesm2022/acorex-components-selection-list-2.mjs.map +1 -1
- package/fesm2022/acorex-components-selection-list.mjs +11 -11
- package/fesm2022/acorex-components-selection-list.mjs.map +1 -1
- package/fesm2022/acorex-components-side-menu.mjs +455 -97
- package/fesm2022/acorex-components-side-menu.mjs.map +1 -1
- package/fesm2022/acorex-components-skeleton.mjs +8 -8
- package/fesm2022/acorex-components-skeleton.mjs.map +1 -1
- package/fesm2022/acorex-components-slider.mjs +7 -7
- package/fesm2022/acorex-components-sliding-item.mjs +25 -25
- package/fesm2022/acorex-components-sliding-item.mjs.map +1 -1
- package/fesm2022/acorex-components-step-wizard.mjs +40 -39
- package/fesm2022/acorex-components-step-wizard.mjs.map +1 -1
- package/fesm2022/acorex-components-switch.mjs +12 -12
- package/fesm2022/acorex-components-switch.mjs.map +1 -1
- package/fesm2022/acorex-components-tabs.mjs +20 -20
- package/fesm2022/acorex-components-tabs.mjs.map +1 -1
- package/fesm2022/acorex-components-tag-box.mjs +19 -19
- package/fesm2022/acorex-components-tag-box.mjs.map +1 -1
- package/fesm2022/acorex-components-tag.mjs +8 -8
- package/fesm2022/acorex-components-tag.mjs.map +1 -1
- package/fesm2022/acorex-components-text-area.mjs +9 -9
- package/fesm2022/acorex-components-text-area.mjs.map +1 -1
- package/fesm2022/acorex-components-text-box.mjs +12 -12
- package/fesm2022/acorex-components-text-box.mjs.map +1 -1
- package/fesm2022/acorex-components-time-duration.mjs +28 -30
- package/fesm2022/acorex-components-time-duration.mjs.map +1 -1
- package/fesm2022/acorex-components-time-line.mjs +19 -19
- package/fesm2022/acorex-components-time-line.mjs.map +1 -1
- package/fesm2022/acorex-components-toast.mjs +26 -26
- package/fesm2022/acorex-components-toast.mjs.map +1 -1
- package/fesm2022/acorex-components-toolbar.mjs +13 -13
- package/fesm2022/acorex-components-toolbar.mjs.map +1 -1
- package/fesm2022/acorex-components-tooltip.mjs +27 -18
- package/fesm2022/acorex-components-tooltip.mjs.map +1 -1
- package/fesm2022/acorex-components-tree-view.mjs +326 -67
- package/fesm2022/acorex-components-tree-view.mjs.map +1 -1
- package/fesm2022/acorex-components-uploader.mjs +17 -17
- package/fesm2022/acorex-components-uploader.mjs.map +1 -1
- package/fesm2022/acorex-components-video-player.mjs +8 -8
- package/fesm2022/acorex-components-video-player.mjs.map +1 -1
- package/fesm2022/acorex-components-wysiwyg.mjs +60 -53
- package/fesm2022/acorex-components-wysiwyg.mjs.map +1 -1
- package/package.json +5 -4
- package/types/acorex-components-button-group.d.ts +9 -3
- package/types/acorex-components-button.d.ts +2 -8
- package/types/acorex-components-calendar.d.ts +138 -27
- package/types/acorex-components-color-palette.d.ts +2 -0
- package/types/acorex-components-conversation2.d.ts +1296 -1256
- package/types/acorex-components-data-pager.d.ts +6 -25
- package/types/acorex-components-data-table.d.ts +12 -2
- package/types/acorex-components-datetime-box.d.ts +79 -8
- package/types/acorex-components-datetime-input.d.ts +2 -2
- package/types/acorex-components-datetime-picker.d.ts +15 -5
- package/types/acorex-components-flow-chart.d.ts +4 -0
- package/types/acorex-components-menu.d.ts +101 -36
- package/types/acorex-components-number-box.d.ts +9 -0
- package/types/acorex-components-otp.d.ts +18 -1
- package/types/acorex-components-popup.d.ts +11 -1
- package/types/acorex-components-qrcode.d.ts +1 -0
- package/types/acorex-components-query-builder.d.ts +1 -1
- package/types/acorex-components-scheduler.d.ts +23 -2
- package/types/acorex-components-side-menu.d.ts +96 -34
- package/types/acorex-components-step-wizard.d.ts +2 -1
- package/types/acorex-components-tree-view.d.ts +43 -2
- package/types/acorex-components-wysiwyg.d.ts +6 -1
- package/fesm2022/acorex-components-modal-modal-content.component-DTZu2zbU.mjs.map +0 -1
|
@@ -6,16 +6,16 @@ import { AXDecoratorIconComponent, AXDecoratorGenericComponent } from '@acorex/c
|
|
|
6
6
|
import { AXPopoverComponent } from '@acorex/components/popover';
|
|
7
7
|
import { AXSelectBoxComponent } from '@acorex/components/select-box';
|
|
8
8
|
import { AXCalendarService } from '@acorex/core/date-time';
|
|
9
|
+
import { AXEventService, AXSystemEvents } from '@acorex/core/events';
|
|
9
10
|
import { AXFormatService, AXFormatPipe } from '@acorex/core/format';
|
|
10
11
|
import { AXLocaleService } from '@acorex/core/locale';
|
|
11
|
-
import {
|
|
12
|
-
import { AXTranslatorPipe, AXTranslationService } from '@acorex/core/translation';
|
|
12
|
+
import { AXTranslatorPipe, resolveMultiLanguageString, AXTranslationService } from '@acorex/core/translation';
|
|
13
13
|
import { AXUnsubscriber } from '@acorex/core/utils';
|
|
14
14
|
import * as i0 from '@angular/core';
|
|
15
15
|
import { inject, signal, Injectable, DOCUMENT, input, computed, output, ViewEncapsulation, ChangeDetectionStrategy, Component, DestroyRef, viewChild, linkedSignal, model, effect, untracked, NgModule } from '@angular/core';
|
|
16
|
-
import { map } from 'rxjs';
|
|
17
16
|
import * as i1 from '@angular/forms';
|
|
18
17
|
import { FormsModule } from '@angular/forms';
|
|
18
|
+
import { filter } from 'rxjs';
|
|
19
19
|
import { isEqual, orderBy } from 'lodash-es';
|
|
20
20
|
import { AXDragDirective, AXDropZoneDirective } from '@acorex/cdk/drag-drop';
|
|
21
21
|
import { AXTooltipDirective } from '@acorex/components/tooltip';
|
|
@@ -25,13 +25,14 @@ class AXSchedulerService {
|
|
|
25
25
|
constructor() {
|
|
26
26
|
this.formatService = inject(AXFormatService);
|
|
27
27
|
this.calendarService = inject(AXCalendarService);
|
|
28
|
+
this.localeService = inject(AXLocaleService);
|
|
28
29
|
this.HOURS_PER_DAY = 24;
|
|
29
30
|
this.MINUTES_PER_HOUR = 60;
|
|
30
31
|
this.BLOCK_DURATION_MINUTES = 30;
|
|
31
32
|
this.MILLISECONDS_PER_MINUTE = 60 * 1000;
|
|
32
33
|
this.MILLISECONDS_PER_DAY = this.HOURS_PER_DAY * this.MINUTES_PER_HOUR * this.MILLISECONDS_PER_MINUTE;
|
|
33
|
-
this.internalWeekend = signal([], ...(ngDevMode ? [{ debugName: "internalWeekend" }] : []));
|
|
34
|
-
this.internalHoliday = signal([], ...(ngDevMode ? [{ debugName: "internalHoliday" }] : []));
|
|
34
|
+
this.internalWeekend = signal([], ...(ngDevMode ? [{ debugName: "internalWeekend" }] : /* istanbul ignore next */ []));
|
|
35
|
+
this.internalHoliday = signal([], ...(ngDevMode ? [{ debugName: "internalHoliday" }] : /* istanbul ignore next */ []));
|
|
35
36
|
}
|
|
36
37
|
/**
|
|
37
38
|
* Checks if two appointments overlap in time.
|
|
@@ -322,6 +323,24 @@ class AXSchedulerService {
|
|
|
322
323
|
return 1;
|
|
323
324
|
}
|
|
324
325
|
}
|
|
326
|
+
/**
|
|
327
|
+
* Resolves the 0-based week-start index (0 = Sunday … 6 = Saturday) from locale or an override.
|
|
328
|
+
*/
|
|
329
|
+
resolveWeekStartsOn(firstDayOfWeek) {
|
|
330
|
+
if (firstDayOfWeek) {
|
|
331
|
+
return this.getDayOfWeekNumber(firstDayOfWeek) - 1;
|
|
332
|
+
}
|
|
333
|
+
return this.localeService.activeProfile().calendar.week.startsOn;
|
|
334
|
+
}
|
|
335
|
+
/**
|
|
336
|
+
* Aligns a date to the start of its week using locale week layout and calendar weekday indexing.
|
|
337
|
+
*/
|
|
338
|
+
alignToWeekStart(date, options) {
|
|
339
|
+
const startsOn = this.resolveWeekStartsOn(options?.firstDayOfWeek);
|
|
340
|
+
const dayIndex = date.weekdayIndex;
|
|
341
|
+
const daysToSubtract = (dayIndex - startsOn + 7) % 7;
|
|
342
|
+
return date.startOf('day').add('day', -daysToSubtract);
|
|
343
|
+
}
|
|
325
344
|
/**
|
|
326
345
|
* Gets slot data for a given start date and view.
|
|
327
346
|
*
|
|
@@ -562,9 +581,9 @@ class AXSchedulerService {
|
|
|
562
581
|
const internalWeekend = this.internalWeekend();
|
|
563
582
|
const globalWeekend = this.calendarService.resolveCalendar(calendar).weekend;
|
|
564
583
|
if (internalWeekend.length === 0) {
|
|
565
|
-
return globalWeekend.includes(date.
|
|
584
|
+
return globalWeekend.includes(date.weekdayIndex);
|
|
566
585
|
}
|
|
567
|
-
return this.internalWeekend().includes(date.
|
|
586
|
+
return this.internalWeekend().includes(date.weekdayIndex);
|
|
568
587
|
}
|
|
569
588
|
/**
|
|
570
589
|
* Filters appointments by resources and unassigned appointments.
|
|
@@ -809,10 +828,10 @@ class AXSchedulerService {
|
|
|
809
828
|
resourceId: dropResult.resourceId,
|
|
810
829
|
};
|
|
811
830
|
}
|
|
812
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
813
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.
|
|
831
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXSchedulerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
832
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXSchedulerService, providedIn: 'root' }); }
|
|
814
833
|
}
|
|
815
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
834
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXSchedulerService, decorators: [{
|
|
816
835
|
type: Injectable,
|
|
817
836
|
args: [{
|
|
818
837
|
providedIn: 'root',
|
|
@@ -826,17 +845,17 @@ class AXSchedulerAgendaViewComponent extends NXComponent {
|
|
|
826
845
|
this.scheduler = inject(AXSchedulerComponent);
|
|
827
846
|
this.calendarService = inject(AXCalendarService);
|
|
828
847
|
this.schedulerService = inject(AXSchedulerService);
|
|
829
|
-
this.daysCount = input(7, ...(ngDevMode ? [{ debugName: "daysCount" }] : []));
|
|
830
|
-
this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
|
|
831
|
-
this.draggable = input(true, ...(ngDevMode ? [{ debugName: "draggable" }] : []));
|
|
832
|
-
this.hasActions = input(false, ...(ngDevMode ? [{ debugName: "hasActions" }] : []));
|
|
833
|
-
this.dragStartDelay = input(0, ...(ngDevMode ? [{ debugName: "dragStartDelay" }] : []));
|
|
834
|
-
this.calendar = input(...(ngDevMode ? [undefined, { debugName: "calendar" }] : []));
|
|
835
|
-
this.date = input.required(...(ngDevMode ? [{ debugName: "date" }] : []));
|
|
836
|
-
this.appointments = input([], ...(ngDevMode ? [{ debugName: "appointments" }] : []));
|
|
837
|
-
this.tooltipTemplate = input(...(ngDevMode ? [undefined, { debugName: "tooltipTemplate" }] : []));
|
|
838
|
-
this.selectedAppointmentId = input(null, ...(ngDevMode ? [{ debugName: "selectedAppointmentId" }] : []));
|
|
839
|
-
this.dragStartSlotId = signal(null, ...(ngDevMode ? [{ debugName: "dragStartSlotId" }] : []));
|
|
848
|
+
this.daysCount = input(7, ...(ngDevMode ? [{ debugName: "daysCount" }] : /* istanbul ignore next */ []));
|
|
849
|
+
this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
850
|
+
this.draggable = input(true, ...(ngDevMode ? [{ debugName: "draggable" }] : /* istanbul ignore next */ []));
|
|
851
|
+
this.hasActions = input(false, ...(ngDevMode ? [{ debugName: "hasActions" }] : /* istanbul ignore next */ []));
|
|
852
|
+
this.dragStartDelay = input(0, ...(ngDevMode ? [{ debugName: "dragStartDelay" }] : /* istanbul ignore next */ []));
|
|
853
|
+
this.calendar = input(...(ngDevMode ? [undefined, { debugName: "calendar" }] : /* istanbul ignore next */ []));
|
|
854
|
+
this.date = input.required(...(ngDevMode ? [{ debugName: "date" }] : /* istanbul ignore next */ []));
|
|
855
|
+
this.appointments = input([], ...(ngDevMode ? [{ debugName: "appointments" }] : /* istanbul ignore next */ []));
|
|
856
|
+
this.tooltipTemplate = input(...(ngDevMode ? [undefined, { debugName: "tooltipTemplate" }] : /* istanbul ignore next */ []));
|
|
857
|
+
this.selectedAppointmentId = input(null, ...(ngDevMode ? [{ debugName: "selectedAppointmentId" }] : /* istanbul ignore next */ []));
|
|
858
|
+
this.dragStartSlotId = signal(null, ...(ngDevMode ? [{ debugName: "dragStartSlotId" }] : /* istanbul ignore next */ []));
|
|
840
859
|
this.agendaDaysLayout = computed(() => {
|
|
841
860
|
const allOriginalAppointments = this.appointments();
|
|
842
861
|
const agendaStartDate = this.date();
|
|
@@ -866,7 +885,7 @@ class AXSchedulerAgendaViewComponent extends NXComponent {
|
|
|
866
885
|
});
|
|
867
886
|
}
|
|
868
887
|
return result;
|
|
869
|
-
}, ...(ngDevMode ? [{ debugName: "agendaDaysLayout" }] : []));
|
|
888
|
+
}, ...(ngDevMode ? [{ debugName: "agendaDaysLayout" }] : /* istanbul ignore next */ []));
|
|
870
889
|
// Internal outputs to be caught by parent AXSchedulerComponent
|
|
871
890
|
this.slotClickedInternal = output();
|
|
872
891
|
this.slotDblClickedInternal = output();
|
|
@@ -981,10 +1000,10 @@ class AXSchedulerAgendaViewComponent extends NXComponent {
|
|
|
981
1000
|
getMultiDayEndDate(segment) {
|
|
982
1001
|
return segment.originalEndDate;
|
|
983
1002
|
}
|
|
984
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
985
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", 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 }, hasActions: { classPropertyName: "hasActions", publicName: "hasActions", isSignal: true, isRequired: false, transformFunction: null }, dragStartDelay: { classPropertyName: "dragStartDelay", publicName: "dragStartDelay", 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 }, tooltipTemplate: { classPropertyName: "tooltipTemplate", publicName: "tooltipTemplate", isSignal: true, isRequired: false, transformFunction: null }, selectedAppointmentId: { classPropertyName: "selectedAppointmentId", publicName: "selectedAppointmentId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { slotClickedInternal: "slotClickedInternal", slotDblClickedInternal: "slotDblClickedInternal", slotRightClickedInternal: "slotRightClickedInternal", appointmentClickedInternal: "appointmentClickedInternal", appointmentDblClickedInternal: "appointmentDblClickedInternal", appointmentRightClickedInternal: "appointmentRightClickedInternal", onActionClickInternal: "onActionClickInternal", onAppointmentDropInternal: "onAppointmentDropInternal" }, host: { properties: { "class.ax-state-readonly": "readonly()" } }, 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-scheduler-agenda-view-container {{\n dayData.holiday.state !== 'none' ? (dayData.holiday.holiday?.cssClass ?? 'ax-state-holiday') : ''\n }}\"\n (click)=\"handleSlotEvent($event, dayData.date)\"\n (dblclick)=\"handleSlotEvent($event, dayData.date)\"\n (contextmenu)=\"handleSlotEvent($event, dayData.date)\"\n [attr.data-slot-id]=\"dayData.date.format('YYYYMMDD')\"\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 [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || segment.readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, segment)\"\n (dblclick)=\"handleAppointmentEvent($event, segment)\"\n (contextmenu)=\"handleAppointmentEvent($event, segment)\"\n [title]=\"\n tooltipTemplate()\n ? ''\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 class=\"ax-scheduler-agenda-appointment\"\n [class.all-day-segment]=\"segment.allDay\"\n [class.ax-state-active]=\"isActive(segment.id)\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n [axTooltipContext]=\"segment\"\n >\n <div class=\"ax-scheduler-agenda-appointment-time\">\n <div\n class=\"ax-scheduler-agenda-appointment-time-inner {{\n segment.cssClass ?? 'ax-scheduler-' + (segment.priority ?? 'primary') + '-priority'\n }}\"\n ></div>\n @if (segment.allDay) {\n @if (isMultiDayAppointment(segment)) {\n <span class=\"ax-scheduler-agenda-multiday-info\">\n <span class=\"ax-scheduler-agenda-multiday-badge\">\n {{\n getMultiDayStartDate(segment)\n | format: 'date' : { format: 'D MMM', calendar: calendar() }\n | async\n }}\n -\n {{\n getMultiDayEndDate(segment) | format: 'date' : { format: 'D MMM', calendar: calendar() } | async\n }}\n </span>\n </span>\n } @else {\n <span>{{ '@acorex:dateTime.duration.all-day' | translate | async }}</span>\n }\n } @else {\n @if (isMultiDayAppointment(segment)) {\n <span class=\"ax-scheduler-agenda-multiday-info\">\n <span class=\"ax-scheduler-agenda-multiday-badge\">\n {{\n getMultiDayStartDate(segment)\n | format: 'date' : { format: 'D MMM', calendar: calendar() }\n | async\n }}\n -\n {{\n getMultiDayEndDate(segment) | format: 'date' : { format: 'D MMM', calendar: calendar() } | async\n }}\n </span>\n <span>\n {{\n segment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n -\n {{ segment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n </span>\n </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 }\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 <!-- @if (segment.description) {\n <ax-subtitle>{{ segment.description }}</ax-subtitle>\n } -->\n @if (hasActions()) {\n <ax-icon\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n (click)=\"handleActionClick($event, segment)\"\n >\n </ax-icon>\n }\n </div>\n }\n @if (dayData.appointments.length === 0) {\n <div class=\"ax-scheduler-agenda-no-appointments\">\n {{ '@acorex:common.general.no-record' | translate | async }}\n </div>\n }\n </div>\n </div>\n }\n</div>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-font-weight:initial}}}@layer components{ax-scheduler-agenda-view .ax-scheduler-agenda-container{flex-direction:column;height:100%;display:flex}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container{gap:calc(var(--spacing,.25rem) * 4);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding-inline:calc(var(--spacing,.25rem) * 4);padding-block:calc(var(--spacing,.25rem) * 1);display:flex;position:relative}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container:last-child{border-bottom-style:var(--tw-border-style);border-bottom-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))}@supports (color:color-mix(in lab,red,red)){ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-state-today{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 5%,transparent)}}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{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,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{--tw-font-weight:var(--font-weight-bold,700);font-weight:var(--font-weight-bold,700)}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-state-holiday{color:rgba(var(--ax-sys-color-danger-600))}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{top:calc(var(--spacing,.25rem) * 4);height:calc(var(--spacing,.25rem) * 14);max-width:calc(var(--spacing,.25rem) * 24);min-width:calc(var(--spacing,.25rem) * 24);justify-content:center;align-items:flex-start;gap:calc(var(--spacing,.25rem) * 1);flex-direction:column;display:flex;position:sticky}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{--tw-font-weight:var(--font-weight-light,300);max-width:100%;font-weight:var(--font-weight-light,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-size:var(--text-lg,1.125rem);line-height:var(--tw-leading,var(--text-lg--line-height,calc(1.75 / 1.125)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container{justify-content:center;align-items:center;gap:calc(var(--spacing,.25rem) * 1);flex-direction:column;width:calc(100% - 7rem);display:flex}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment{justify-content:space-between;gap:calc(var(--spacing,.25rem) * 2);border-radius:calc(var(--ax-sys-border-radius) / 2);width:100%;padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:calc(var(--spacing,.25rem) * 1);text-align:center;flex-direction:row;display:flex;overflow:hidden}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{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment .ax-scheduler-agenda-appointment-time{min-width:calc(var(--spacing,.25rem) * 2);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));opacity:.9;flex-shrink:0}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment .ax-scheduler-agenda-appointment-title{width:100%}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment .ax-scheduler-action-icon{cursor:pointer;width:auto}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-no-appointments{text-align:center;color:rgba(var(--ax-sys-color-on-surface))}@supports (color:color-mix(in lab,red,red)){ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-no-appointments{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 60%,transparent)}}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-no-appointments{font-style:italic}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-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}@media(hover:hover){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))}}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["axDrag", "dragData", "dragDisabled", "dragTransition", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragClonedTemplate", "dragCursor", "dragBoundary", "dragTransitionDuration"], outputs: ["dragPositionChanged"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "directive", type: AXDropZoneDirective, selector: "[axDropZone]", inputs: ["dropZoneGroup"], outputs: ["onElementDrop", "onElementHover"], exportAs: ["axDropZone"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXFormatPipe, name: "format" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1003
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXSchedulerAgendaViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1004
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXSchedulerAgendaViewComponent, isStandalone: true, selector: "ax-scheduler-agenda-view", inputs: { daysCount: { classPropertyName: "daysCount", publicName: "daysCount", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, hasActions: { classPropertyName: "hasActions", publicName: "hasActions", isSignal: true, isRequired: false, transformFunction: null }, dragStartDelay: { classPropertyName: "dragStartDelay", publicName: "dragStartDelay", 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 }, tooltipTemplate: { classPropertyName: "tooltipTemplate", publicName: "tooltipTemplate", isSignal: true, isRequired: false, transformFunction: null }, selectedAppointmentId: { classPropertyName: "selectedAppointmentId", publicName: "selectedAppointmentId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { slotClickedInternal: "slotClickedInternal", slotDblClickedInternal: "slotDblClickedInternal", slotRightClickedInternal: "slotRightClickedInternal", appointmentClickedInternal: "appointmentClickedInternal", appointmentDblClickedInternal: "appointmentDblClickedInternal", appointmentRightClickedInternal: "appointmentRightClickedInternal", onActionClickInternal: "onActionClickInternal", onAppointmentDropInternal: "onAppointmentDropInternal" }, host: { properties: { "class.ax-state-readonly": "readonly()" } }, 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-scheduler-agenda-view-container {{\n dayData.holiday.state !== 'none' ? (dayData.holiday.holiday?.cssClass ?? 'ax-state-holiday') : ''\n }}\"\n [style.--ax-scheduler-holiday-color]=\"dayData.holiday.holiday?.color ?? null\"\n (click)=\"handleSlotEvent($event, dayData.date)\"\n (dblclick)=\"handleSlotEvent($event, dayData.date)\"\n (contextmenu)=\"handleSlotEvent($event, dayData.date)\"\n [attr.data-slot-id]=\"dayData.date.format('YYYYMMDD')\"\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?.description ?? dayData.holiday?.holiday?.title ?? '') | translate | async\"\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 | translate | async }} )\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 [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || segment.readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, segment)\"\n (dblclick)=\"handleAppointmentEvent($event, segment)\"\n (contextmenu)=\"handleAppointmentEvent($event, segment)\"\n [title]=\"\n tooltipTemplate()\n ? ''\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 class=\"ax-scheduler-agenda-appointment\"\n [class.all-day-segment]=\"segment.allDay\"\n [class.ax-state-active]=\"isActive(segment.id)\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n [axTooltipContext]=\"segment\"\n >\n <div class=\"ax-scheduler-agenda-appointment-time\">\n <div\n class=\"ax-scheduler-agenda-appointment-time-inner {{\n segment.cssClass ?? 'ax-scheduler-' + (segment.priority ?? 'primary') + '-priority'\n }}\"\n ></div>\n @if (segment.allDay) {\n @if (isMultiDayAppointment(segment)) {\n <span class=\"ax-scheduler-agenda-multiday-info\">\n <span class=\"ax-scheduler-agenda-multiday-badge\">\n {{\n getMultiDayStartDate(segment)\n | format: 'date' : { format: 'D MMM', calendar: calendar() }\n | async\n }}\n -\n {{\n getMultiDayEndDate(segment) | format: 'date' : { format: 'D MMM', calendar: calendar() } | async\n }}\n </span>\n </span>\n } @else {\n <span>{{ '@acorex:dateTime.duration.all-day' | translate | async }}</span>\n }\n } @else {\n @if (isMultiDayAppointment(segment)) {\n <span class=\"ax-scheduler-agenda-multiday-info\">\n <span class=\"ax-scheduler-agenda-multiday-badge\">\n {{\n getMultiDayStartDate(segment)\n | format: 'date' : { format: 'D MMM', calendar: calendar() }\n | async\n }}\n -\n {{\n getMultiDayEndDate(segment) | format: 'date' : { format: 'D MMM', calendar: calendar() } | async\n }}\n </span>\n <span>\n {{\n segment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n -\n {{ segment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n </span>\n </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 }\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 <!-- @if (segment.description) {\n <ax-subtitle>{{ segment.description }}</ax-subtitle>\n } -->\n @if (hasActions()) {\n <ax-icon\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n (click)=\"handleActionClick($event, segment)\"\n >\n </ax-icon>\n }\n </div>\n }\n @if (dayData.appointments.length === 0) {\n <div class=\"ax-scheduler-agenda-no-appointments\">\n {{ '@acorex:common.general.no-record' | translate | async }}\n </div>\n }\n </div>\n </div>\n }\n</div>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight:initial;--tw-leading:initial}}}@layer components{ax-scheduler-agenda-view .ax-scheduler-agenda-container{flex-direction:column;height:100%;display:flex}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container{gap:calc(var(--spacing,.25rem) * 4);padding-inline:calc(var(--spacing,.25rem) * 4);padding-block:var(--spacing,.25rem);border-block-end:1px solid rgba(var(--ax-sys-color-border-surface));display:flex;position:relative}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))}@supports (color:color-mix(in lab,red,red)){ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-state-today{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 5%,transparent)}}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{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,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{--tw-font-weight:var(--font-weight-bold,700);font-weight:var(--font-weight-bold,700)}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-state-holiday .ax-scheduler-agenda-header-date-day{color:var(--ax-scheduler-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-scheduler-agenda-header-date-day.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{top:calc(var(--spacing,.25rem) * 4);height:calc(var(--spacing,.25rem) * 14);max-width:calc(var(--spacing,.25rem) * 24);min-width:calc(var(--spacing,.25rem) * 24);justify-content:center;align-items:flex-start;gap:var(--spacing,.25rem);flex-direction:column;display:flex;position:sticky}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{--tw-font-weight:var(--font-weight-light,300);max-width:100%;font-weight:var(--font-weight-light,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-size:var(--text-xl,1.25rem);line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75 / 1.25)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container{justify-content:center;align-items:center;gap:var(--spacing,.25rem);width:100%;color:unset;flex-direction:column;display:flex}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment{justify-content:space-between;align-items:center;gap:calc(var(--spacing,.25rem) * 2);border-radius:calc(var(--ax-sys-border-radius) / 2);width:100%;padding-inline:calc(var(--spacing,.25rem) * 4);padding-block:var(--spacing,.25rem);flex-direction:row;display:flex;overflow:hidden}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment:hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg,var(--ax-sys-color-primary-surface), .15))}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment .ax-scheduler-agenda-appointment-time-inner{width:calc(var(--spacing,.25rem) * 3);height:calc(var(--spacing,.25rem) * 3)}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{align-items:center;gap:calc(var(--spacing,.25rem) * 4);--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);display:flex}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment .ax-scheduler-agenda-appointment-time{align-items:center;gap:calc(var(--spacing,.25rem) * 4);opacity:.9;flex-shrink:0;min-width:10rem;font-size:.9em;display:flex}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment .ax-scheduler-agenda-appointment-time .ax-scheduler-agenda-multiday-info{align-items:center;gap:calc(var(--spacing,.25rem) * 2);display:flex}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment .ax-scheduler-agenda-appointment-time .ax-scheduler-agenda-multiday-badge{justify-content:center;align-items:center;gap:var(--spacing,.25rem);border-radius:var(--radius-md,.375rem);padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:var(--spacing,.25rem);--tw-leading:1.2;--tw-font-weight:var(--font-weight-medium,500);font-size:.8rem;line-height:1.2;font-weight:var(--font-weight-medium,500);white-space:nowrap;background-color:rgba(var(--ax-sys-color-primary-surface),.12);color:rgba(var(--ax-sys-color-primary-surface));display:inline-flex}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment .ax-scheduler-agenda-appointment-title{--tw-font-weight:var(--font-weight-medium,500);width:100%;font-weight:var(--font-weight-medium,500)}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment .ax-scheduler-action-icon{cursor:pointer;width:auto}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-no-appointments{text-align:center;color:rgba(var(--ax-sys-color-on-surface))}@supports (color:color-mix(in lab,red,red)){ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-no-appointments{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 60%,transparent)}}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-no-appointments{font-style:italic}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-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-leading{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["axDrag", "dragData", "dragDisabled", "dragTransition", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragClonedTemplate", "dragCursor", "dragBoundary", "dragTransitionDuration"], outputs: ["dragPositionChanged"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "directive", type: AXDropZoneDirective, selector: "[axDropZone]", inputs: ["dropZoneGroup"], outputs: ["onElementDrop", "onElementHover"], exportAs: ["axDropZone"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXFormatPipe, name: "format" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
986
1005
|
}
|
|
987
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
1006
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXSchedulerAgendaViewComponent, decorators: [{
|
|
988
1007
|
type: Component,
|
|
989
1008
|
args: [{ selector: 'ax-scheduler-agenda-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
990
1009
|
'[class.ax-state-readonly]': 'readonly()',
|
|
@@ -997,7 +1016,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
|
|
|
997
1016
|
AXDropZoneDirective,
|
|
998
1017
|
AXDecoratorIconComponent,
|
|
999
1018
|
AXDecoratorGenericComponent,
|
|
1000
|
-
], 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-scheduler-agenda-view-container {{\n dayData.holiday.state !== 'none' ? (dayData.holiday.holiday?.cssClass ?? 'ax-state-holiday') : ''\n }}\"\n (click)=\"handleSlotEvent($event, dayData.date)\"\n (dblclick)=\"handleSlotEvent($event, dayData.date)\"\n (contextmenu)=\"handleSlotEvent($event, dayData.date)\"\n [attr.data-slot-id]=\"dayData.date.format('YYYYMMDD')\"\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 [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || segment.readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, segment)\"\n (dblclick)=\"handleAppointmentEvent($event, segment)\"\n (contextmenu)=\"handleAppointmentEvent($event, segment)\"\n [title]=\"\n tooltipTemplate()\n ? ''\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 class=\"ax-scheduler-agenda-appointment\"\n [class.all-day-segment]=\"segment.allDay\"\n [class.ax-state-active]=\"isActive(segment.id)\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n [axTooltipContext]=\"segment\"\n >\n <div class=\"ax-scheduler-agenda-appointment-time\">\n <div\n class=\"ax-scheduler-agenda-appointment-time-inner {{\n segment.cssClass ?? 'ax-scheduler-' + (segment.priority ?? 'primary') + '-priority'\n }}\"\n ></div>\n @if (segment.allDay) {\n @if (isMultiDayAppointment(segment)) {\n <span class=\"ax-scheduler-agenda-multiday-info\">\n <span class=\"ax-scheduler-agenda-multiday-badge\">\n {{\n getMultiDayStartDate(segment)\n | format: 'date' : { format: 'D MMM', calendar: calendar() }\n | async\n }}\n -\n {{\n getMultiDayEndDate(segment) | format: 'date' : { format: 'D MMM', calendar: calendar() } | async\n }}\n </span>\n </span>\n } @else {\n <span>{{ '@acorex:dateTime.duration.all-day' | translate | async }}</span>\n }\n } @else {\n @if (isMultiDayAppointment(segment)) {\n <span class=\"ax-scheduler-agenda-multiday-info\">\n <span class=\"ax-scheduler-agenda-multiday-badge\">\n {{\n getMultiDayStartDate(segment)\n | format: 'date' : { format: 'D MMM', calendar: calendar() }\n | async\n }}\n -\n {{\n getMultiDayEndDate(segment) | format: 'date' : { format: 'D MMM', calendar: calendar() } | async\n }}\n </span>\n <span>\n {{\n segment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n -\n {{ segment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n </span>\n </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 }\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 <!-- @if (segment.description) {\n <ax-subtitle>{{ segment.description }}</ax-subtitle>\n } -->\n @if (hasActions()) {\n <ax-icon\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n (click)=\"handleActionClick($event, segment)\"\n >\n </ax-icon>\n }\n </div>\n }\n @if (dayData.appointments.length === 0) {\n <div class=\"ax-scheduler-agenda-no-appointments\">\n {{ '@acorex:common.general.no-record' | translate | async }}\n </div>\n }\n </div>\n </div>\n }\n</div>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-font-weight:initial}}}@layer components{ax-scheduler-agenda-view .ax-scheduler-agenda-container{flex-direction:column;height:100%;display:flex}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container{gap:calc(var(--spacing,.25rem) * 4);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding-inline:calc(var(--spacing,.25rem) * 4);padding-block:calc(var(--spacing,.25rem) * 1);display:flex;position:relative}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container:last-child{border-bottom-style:var(--tw-border-style);border-bottom-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))}@supports (color:color-mix(in lab,red,red)){ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-state-today{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 5%,transparent)}}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{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,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{--tw-font-weight:var(--font-weight-bold,700);font-weight:var(--font-weight-bold,700)}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-state-holiday{color:rgba(var(--ax-sys-color-danger-600))}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{top:calc(var(--spacing,.25rem) * 4);height:calc(var(--spacing,.25rem) * 14);max-width:calc(var(--spacing,.25rem) * 24);min-width:calc(var(--spacing,.25rem) * 24);justify-content:center;align-items:flex-start;gap:calc(var(--spacing,.25rem) * 1);flex-direction:column;display:flex;position:sticky}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{--tw-font-weight:var(--font-weight-light,300);max-width:100%;font-weight:var(--font-weight-light,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-size:var(--text-lg,1.125rem);line-height:var(--tw-leading,var(--text-lg--line-height,calc(1.75 / 1.125)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container{justify-content:center;align-items:center;gap:calc(var(--spacing,.25rem) * 1);flex-direction:column;width:calc(100% - 7rem);display:flex}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment{justify-content:space-between;gap:calc(var(--spacing,.25rem) * 2);border-radius:calc(var(--ax-sys-border-radius) / 2);width:100%;padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:calc(var(--spacing,.25rem) * 1);text-align:center;flex-direction:row;display:flex;overflow:hidden}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{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment .ax-scheduler-agenda-appointment-time{min-width:calc(var(--spacing,.25rem) * 2);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));opacity:.9;flex-shrink:0}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment .ax-scheduler-agenda-appointment-title{width:100%}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment .ax-scheduler-action-icon{cursor:pointer;width:auto}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-no-appointments{text-align:center;color:rgba(var(--ax-sys-color-on-surface))}@supports (color:color-mix(in lab,red,red)){ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-no-appointments{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 60%,transparent)}}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-no-appointments{font-style:italic}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-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}@media(hover:hover){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))}}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"] }]
|
|
1019
|
+
], 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-scheduler-agenda-view-container {{\n dayData.holiday.state !== 'none' ? (dayData.holiday.holiday?.cssClass ?? 'ax-state-holiday') : ''\n }}\"\n [style.--ax-scheduler-holiday-color]=\"dayData.holiday.holiday?.color ?? null\"\n (click)=\"handleSlotEvent($event, dayData.date)\"\n (dblclick)=\"handleSlotEvent($event, dayData.date)\"\n (contextmenu)=\"handleSlotEvent($event, dayData.date)\"\n [attr.data-slot-id]=\"dayData.date.format('YYYYMMDD')\"\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?.description ?? dayData.holiday?.holiday?.title ?? '') | translate | async\"\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 | translate | async }} )\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 [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || segment.readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, segment)\"\n (dblclick)=\"handleAppointmentEvent($event, segment)\"\n (contextmenu)=\"handleAppointmentEvent($event, segment)\"\n [title]=\"\n tooltipTemplate()\n ? ''\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 class=\"ax-scheduler-agenda-appointment\"\n [class.all-day-segment]=\"segment.allDay\"\n [class.ax-state-active]=\"isActive(segment.id)\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n [axTooltipContext]=\"segment\"\n >\n <div class=\"ax-scheduler-agenda-appointment-time\">\n <div\n class=\"ax-scheduler-agenda-appointment-time-inner {{\n segment.cssClass ?? 'ax-scheduler-' + (segment.priority ?? 'primary') + '-priority'\n }}\"\n ></div>\n @if (segment.allDay) {\n @if (isMultiDayAppointment(segment)) {\n <span class=\"ax-scheduler-agenda-multiday-info\">\n <span class=\"ax-scheduler-agenda-multiday-badge\">\n {{\n getMultiDayStartDate(segment)\n | format: 'date' : { format: 'D MMM', calendar: calendar() }\n | async\n }}\n -\n {{\n getMultiDayEndDate(segment) | format: 'date' : { format: 'D MMM', calendar: calendar() } | async\n }}\n </span>\n </span>\n } @else {\n <span>{{ '@acorex:dateTime.duration.all-day' | translate | async }}</span>\n }\n } @else {\n @if (isMultiDayAppointment(segment)) {\n <span class=\"ax-scheduler-agenda-multiday-info\">\n <span class=\"ax-scheduler-agenda-multiday-badge\">\n {{\n getMultiDayStartDate(segment)\n | format: 'date' : { format: 'D MMM', calendar: calendar() }\n | async\n }}\n -\n {{\n getMultiDayEndDate(segment) | format: 'date' : { format: 'D MMM', calendar: calendar() } | async\n }}\n </span>\n <span>\n {{\n segment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n -\n {{ segment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n </span>\n </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 }\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 <!-- @if (segment.description) {\n <ax-subtitle>{{ segment.description }}</ax-subtitle>\n } -->\n @if (hasActions()) {\n <ax-icon\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n (click)=\"handleActionClick($event, segment)\"\n >\n </ax-icon>\n }\n </div>\n }\n @if (dayData.appointments.length === 0) {\n <div class=\"ax-scheduler-agenda-no-appointments\">\n {{ '@acorex:common.general.no-record' | translate | async }}\n </div>\n }\n </div>\n </div>\n }\n</div>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight:initial;--tw-leading:initial}}}@layer components{ax-scheduler-agenda-view .ax-scheduler-agenda-container{flex-direction:column;height:100%;display:flex}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container{gap:calc(var(--spacing,.25rem) * 4);padding-inline:calc(var(--spacing,.25rem) * 4);padding-block:var(--spacing,.25rem);border-block-end:1px solid rgba(var(--ax-sys-color-border-surface));display:flex;position:relative}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))}@supports (color:color-mix(in lab,red,red)){ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-state-today{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 5%,transparent)}}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{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,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{--tw-font-weight:var(--font-weight-bold,700);font-weight:var(--font-weight-bold,700)}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-state-holiday .ax-scheduler-agenda-header-date-day{color:var(--ax-scheduler-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-scheduler-agenda-header-date-day.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{top:calc(var(--spacing,.25rem) * 4);height:calc(var(--spacing,.25rem) * 14);max-width:calc(var(--spacing,.25rem) * 24);min-width:calc(var(--spacing,.25rem) * 24);justify-content:center;align-items:flex-start;gap:var(--spacing,.25rem);flex-direction:column;display:flex;position:sticky}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{--tw-font-weight:var(--font-weight-light,300);max-width:100%;font-weight:var(--font-weight-light,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-size:var(--text-xl,1.25rem);line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75 / 1.25)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container{justify-content:center;align-items:center;gap:var(--spacing,.25rem);width:100%;color:unset;flex-direction:column;display:flex}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment{justify-content:space-between;align-items:center;gap:calc(var(--spacing,.25rem) * 2);border-radius:calc(var(--ax-sys-border-radius) / 2);width:100%;padding-inline:calc(var(--spacing,.25rem) * 4);padding-block:var(--spacing,.25rem);flex-direction:row;display:flex;overflow:hidden}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment:hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg,var(--ax-sys-color-primary-surface), .15))}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment .ax-scheduler-agenda-appointment-time-inner{width:calc(var(--spacing,.25rem) * 3);height:calc(var(--spacing,.25rem) * 3)}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{align-items:center;gap:calc(var(--spacing,.25rem) * 4);--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);display:flex}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment .ax-scheduler-agenda-appointment-time{align-items:center;gap:calc(var(--spacing,.25rem) * 4);opacity:.9;flex-shrink:0;min-width:10rem;font-size:.9em;display:flex}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment .ax-scheduler-agenda-appointment-time .ax-scheduler-agenda-multiday-info{align-items:center;gap:calc(var(--spacing,.25rem) * 2);display:flex}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment .ax-scheduler-agenda-appointment-time .ax-scheduler-agenda-multiday-badge{justify-content:center;align-items:center;gap:var(--spacing,.25rem);border-radius:var(--radius-md,.375rem);padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:var(--spacing,.25rem);--tw-leading:1.2;--tw-font-weight:var(--font-weight-medium,500);font-size:.8rem;line-height:1.2;font-weight:var(--font-weight-medium,500);white-space:nowrap;background-color:rgba(var(--ax-sys-color-primary-surface),.12);color:rgba(var(--ax-sys-color-primary-surface));display:inline-flex}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment .ax-scheduler-agenda-appointment-title{--tw-font-weight:var(--font-weight-medium,500);width:100%;font-weight:var(--font-weight-medium,500)}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment .ax-scheduler-action-icon{cursor:pointer;width:auto}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-no-appointments{text-align:center;color:rgba(var(--ax-sys-color-on-surface))}@supports (color:color-mix(in lab,red,red)){ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-no-appointments{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 60%,transparent)}}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-no-appointments{font-style:italic}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-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-leading{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */\n"] }]
|
|
1001
1020
|
}], propDecorators: { daysCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "daysCount", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], hasActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasActions", required: false }] }], dragStartDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragStartDelay", required: false }] }], calendar: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendar", required: false }] }], date: [{ type: i0.Input, args: [{ isSignal: true, alias: "date", required: true }] }], appointments: [{ type: i0.Input, args: [{ isSignal: true, alias: "appointments", required: false }] }], tooltipTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipTemplate", required: false }] }], selectedAppointmentId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedAppointmentId", required: false }] }], slotClickedInternal: [{ type: i0.Output, args: ["slotClickedInternal"] }], slotDblClickedInternal: [{ type: i0.Output, args: ["slotDblClickedInternal"] }], slotRightClickedInternal: [{ type: i0.Output, args: ["slotRightClickedInternal"] }], appointmentClickedInternal: [{ type: i0.Output, args: ["appointmentClickedInternal"] }], appointmentDblClickedInternal: [{ type: i0.Output, args: ["appointmentDblClickedInternal"] }], appointmentRightClickedInternal: [{ type: i0.Output, args: ["appointmentRightClickedInternal"] }], onActionClickInternal: [{ type: i0.Output, args: ["onActionClickInternal"] }], onAppointmentDropInternal: [{ type: i0.Output, args: ["onAppointmentDropInternal"] }] } });
|
|
1002
1021
|
|
|
1003
1022
|
class AXSchedulerDayViewComponent extends NXComponent {
|
|
@@ -1009,23 +1028,23 @@ class AXSchedulerDayViewComponent extends NXComponent {
|
|
|
1009
1028
|
this.calendarService = inject(AXCalendarService);
|
|
1010
1029
|
this.schedulerService = inject(AXSchedulerService);
|
|
1011
1030
|
this.GAP_PX = 1;
|
|
1012
|
-
this.rtl = input(false, ...(ngDevMode ? [{ debugName: "rtl" }] : []));
|
|
1013
|
-
this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
|
|
1014
|
-
this.draggable = input(true, ...(ngDevMode ? [{ debugName: "draggable" }] : []));
|
|
1015
|
-
this.hasActions = input(false, ...(ngDevMode ? [{ debugName: "hasActions" }] : []));
|
|
1016
|
-
this.dragStartDelay = input(0, ...(ngDevMode ? [{ debugName: "dragStartDelay" }] : []));
|
|
1017
|
-
this.calendar = input(...(ngDevMode ? [undefined, { debugName: "calendar" }] : []));
|
|
1018
|
-
this.date = input.required(...(ngDevMode ? [{ debugName: "date" }] : []));
|
|
1019
|
-
this.endDayHour = input.required(...(ngDevMode ? [{ debugName: "endDayHour" }] : []));
|
|
1020
|
-
this.startDayHour = input.required(...(ngDevMode ? [{ debugName: "startDayHour" }] : []));
|
|
1021
|
-
this.showCurrentTimeIndicator = input(true, ...(ngDevMode ? [{ debugName: "showCurrentTimeIndicator" }] : []));
|
|
1022
|
-
this.scrollToCurrentTimeIndicator = input(false, ...(ngDevMode ? [{ debugName: "scrollToCurrentTimeIndicator" }] : []));
|
|
1023
|
-
this.appointments = input([], ...(ngDevMode ? [{ debugName: "appointments" }] : []));
|
|
1024
|
-
this.tooltipTemplate = input(...(ngDevMode ? [undefined, { debugName: "tooltipTemplate" }] : []));
|
|
1025
|
-
this.selectedAppointmentId = input(null, ...(ngDevMode ? [{ debugName: "selectedAppointmentId" }] : []));
|
|
1031
|
+
this.rtl = input(false, ...(ngDevMode ? [{ debugName: "rtl" }] : /* istanbul ignore next */ []));
|
|
1032
|
+
this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
1033
|
+
this.draggable = input(true, ...(ngDevMode ? [{ debugName: "draggable" }] : /* istanbul ignore next */ []));
|
|
1034
|
+
this.hasActions = input(false, ...(ngDevMode ? [{ debugName: "hasActions" }] : /* istanbul ignore next */ []));
|
|
1035
|
+
this.dragStartDelay = input(0, ...(ngDevMode ? [{ debugName: "dragStartDelay" }] : /* istanbul ignore next */ []));
|
|
1036
|
+
this.calendar = input(...(ngDevMode ? [undefined, { debugName: "calendar" }] : /* istanbul ignore next */ []));
|
|
1037
|
+
this.date = input.required(...(ngDevMode ? [{ debugName: "date" }] : /* istanbul ignore next */ []));
|
|
1038
|
+
this.endDayHour = input.required(...(ngDevMode ? [{ debugName: "endDayHour" }] : /* istanbul ignore next */ []));
|
|
1039
|
+
this.startDayHour = input.required(...(ngDevMode ? [{ debugName: "startDayHour" }] : /* istanbul ignore next */ []));
|
|
1040
|
+
this.showCurrentTimeIndicator = input(true, ...(ngDevMode ? [{ debugName: "showCurrentTimeIndicator" }] : /* istanbul ignore next */ []));
|
|
1041
|
+
this.scrollToCurrentTimeIndicator = input(false, ...(ngDevMode ? [{ debugName: "scrollToCurrentTimeIndicator" }] : /* istanbul ignore next */ []));
|
|
1042
|
+
this.appointments = input([], ...(ngDevMode ? [{ debugName: "appointments" }] : /* istanbul ignore next */ []));
|
|
1043
|
+
this.tooltipTemplate = input(...(ngDevMode ? [undefined, { debugName: "tooltipTemplate" }] : /* istanbul ignore next */ []));
|
|
1044
|
+
this.selectedAppointmentId = input(null, ...(ngDevMode ? [{ debugName: "selectedAppointmentId" }] : /* istanbul ignore next */ []));
|
|
1026
1045
|
// ViewChild for current time line element
|
|
1027
|
-
this.currentTimeLineElement = viewChild('currentTimeLine', ...(ngDevMode ? [{ debugName: "currentTimeLineElement" }] : []));
|
|
1028
|
-
this.dragStartSlotId = signal(null, ...(ngDevMode ? [{ debugName: "dragStartSlotId" }] : []));
|
|
1046
|
+
this.currentTimeLineElement = viewChild('currentTimeLine', ...(ngDevMode ? [{ debugName: "currentTimeLineElement" }] : /* istanbul ignore next */ []));
|
|
1047
|
+
this.dragStartSlotId = signal(null, ...(ngDevMode ? [{ debugName: "dragStartSlotId" }] : /* istanbul ignore next */ []));
|
|
1029
1048
|
this.processedAppointmentsForLayout = computed(() => {
|
|
1030
1049
|
const viewDate = this.date();
|
|
1031
1050
|
const startH = this.startDayHour();
|
|
@@ -1042,14 +1061,14 @@ class AXSchedulerDayViewComponent extends NXComponent {
|
|
|
1042
1061
|
}
|
|
1043
1062
|
}
|
|
1044
1063
|
return segmentsForThisDay;
|
|
1045
|
-
}, ...(ngDevMode ? [{ debugName: "processedAppointmentsForLayout" }] : []));
|
|
1064
|
+
}, ...(ngDevMode ? [{ debugName: "processedAppointmentsForLayout" }] : /* istanbul ignore next */ []));
|
|
1046
1065
|
this.allDayAppointments = computed(() => {
|
|
1047
1066
|
// Use segments from processedAppointmentsForLayout to get continuation flags
|
|
1048
1067
|
return this.processedAppointmentsForLayout()?.filter((e) => e && e.allDay) ?? [];
|
|
1049
|
-
}, ...(ngDevMode ? [{ debugName: "allDayAppointments" }] : []));
|
|
1068
|
+
}, ...(ngDevMode ? [{ debugName: "allDayAppointments" }] : /* istanbul ignore next */ []));
|
|
1050
1069
|
this.singleDayAppointments = computed(() => {
|
|
1051
1070
|
return this.processedAppointmentsForLayout()?.filter((e) => e && !e.allDay) ?? [];
|
|
1052
|
-
}, ...(ngDevMode ? [{ debugName: "singleDayAppointments" }] : []));
|
|
1071
|
+
}, ...(ngDevMode ? [{ debugName: "singleDayAppointments" }] : /* istanbul ignore next */ []));
|
|
1053
1072
|
this.slotClickedInternal = output();
|
|
1054
1073
|
this.slotDblClickedInternal = output();
|
|
1055
1074
|
this.slotRightClickedInternal = output();
|
|
@@ -1081,7 +1100,7 @@ class AXSchedulerDayViewComponent extends NXComponent {
|
|
|
1081
1100
|
hours.push(time);
|
|
1082
1101
|
}
|
|
1083
1102
|
return hours;
|
|
1084
|
-
}, ...(ngDevMode ? [{ debugName: "hoursArray" }] : []));
|
|
1103
|
+
}, ...(ngDevMode ? [{ debugName: "hoursArray" }] : /* istanbul ignore next */ []));
|
|
1085
1104
|
this.appointmentLayouts = computed(() => {
|
|
1086
1105
|
const layouts = new Map();
|
|
1087
1106
|
const appointmentsToLayout = this.singleDayAppointments();
|
|
@@ -1132,7 +1151,7 @@ class AXSchedulerDayViewComponent extends NXComponent {
|
|
|
1132
1151
|
});
|
|
1133
1152
|
}
|
|
1134
1153
|
return layouts;
|
|
1135
|
-
}, ...(ngDevMode ? [{ debugName: "appointmentLayouts" }] : []));
|
|
1154
|
+
}, ...(ngDevMode ? [{ debugName: "appointmentLayouts" }] : /* istanbul ignore next */ []));
|
|
1136
1155
|
}
|
|
1137
1156
|
isActive(appointmentId) {
|
|
1138
1157
|
return this.selectedAppointmentId() === appointmentId;
|
|
@@ -1363,10 +1382,10 @@ class AXSchedulerDayViewComponent extends NXComponent {
|
|
|
1363
1382
|
.find((el) => el instanceof HTMLElement && el.dataset['slotId'] !== undefined);
|
|
1364
1383
|
this.dragStartSlotId.set(dropListElement ? dropListElement.dataset['slotId'] : null);
|
|
1365
1384
|
}
|
|
1366
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
1367
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AXSchedulerDayViewComponent, isStandalone: true, selector: "ax-scheduler-day-view", inputs: { rtl: { classPropertyName: "rtl", publicName: "rtl", 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 }, hasActions: { classPropertyName: "hasActions", publicName: "hasActions", isSignal: true, isRequired: false, transformFunction: null }, dragStartDelay: { classPropertyName: "dragStartDelay", publicName: "dragStartDelay", 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 }, endDayHour: { classPropertyName: "endDayHour", publicName: "endDayHour", isSignal: true, isRequired: true, transformFunction: null }, startDayHour: { classPropertyName: "startDayHour", publicName: "startDayHour", isSignal: true, isRequired: true, transformFunction: null }, showCurrentTimeIndicator: { classPropertyName: "showCurrentTimeIndicator", publicName: "showCurrentTimeIndicator", isSignal: true, isRequired: false, transformFunction: null }, scrollToCurrentTimeIndicator: { classPropertyName: "scrollToCurrentTimeIndicator", publicName: "scrollToCurrentTimeIndicator", isSignal: true, isRequired: false, transformFunction: null }, appointments: { classPropertyName: "appointments", publicName: "appointments", isSignal: true, isRequired: false, transformFunction: null }, tooltipTemplate: { classPropertyName: "tooltipTemplate", publicName: "tooltipTemplate", isSignal: true, isRequired: false, transformFunction: null }, selectedAppointmentId: { classPropertyName: "selectedAppointmentId", publicName: "selectedAppointmentId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { slotClickedInternal: "slotClickedInternal", slotDblClickedInternal: "slotDblClickedInternal", slotRightClickedInternal: "slotRightClickedInternal", appointmentClickedInternal: "appointmentClickedInternal", appointmentDblClickedInternal: "appointmentDblClickedInternal", appointmentRightClickedInternal: "appointmentRightClickedInternal", onActionClickInternal: "onActionClickInternal", onAppointmentDropInternal: "onAppointmentDropInternal" }, host: { properties: { "class.ax-state-readonly": "readonly()" } }, providers: [{ provide: AXComponent, useExisting: AXSchedulerDayViewComponent }], viewQueries: [{ propertyName: "currentTimeLineElement", first: true, predicate: ["currentTimeLine"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-scheduler-day-header\">\n <div class=\"ax-scheduler-day-header-table\" aria-hidden=\"true\">\n <div>\n {{ '@acorex:dateTime.duration.all-day' | translate | async }}\n </div>\n </div>\n <div\n axDropZone\n #zone=\"axDropZone\"\n (onElementDrop)=\"handleAllDayDrop($event)\"\n [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n (click)=\"handleAllDaySlotEvent($event)\"\n (dblclick)=\"handleAllDaySlotEvent($event)\"\n (contextmenu)=\"handleAllDaySlotEvent($event)\"\n class=\"ax-scheduler-day-header-table-container\"\n [attr.data-slot-id]=\"date().format('YYYYMMDD') + '-allday'\"\n >\n <div class=\"ax-scheduler-day-header-appointment-container\">\n @if (allDayAppointments().length) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || allDayAppointments()[0].readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n [dragData]=\"allDayAppointments()[0]\"\n (click)=\"handleAppointmentEvent($event, allDayAppointments()[0])\"\n (dblclick)=\"handleAppointmentEvent($event, allDayAppointments()[0])\"\n (contextmenu)=\"handleAppointmentEvent($event, allDayAppointments()[0])\"\n [title]=\"tooltipTemplate() ? '' : allDayAppointments()[0].title\"\n class=\"ax-scheduler-header-day-appointment\"\n [class.ax-continuation-from-previous]=\"allDayAppointments()[0].isContinuationFromPreviousDay\"\n [class.ax-continuation-to-next]=\"allDayAppointments()[0].isContinuationToNextDay\"\n [class.ax-state-active]=\"isActive(allDayAppointments()[0].id)\"\n [class]=\"\n allDayAppointments()[0].cssClass ??\n 'ax-scheduler-' + (allDayAppointments()[0].priority ?? 'primary') + '-priority'\n \"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltipContext]=\"allDayAppointments()[0]\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ allDayAppointments()[0].title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, allDayAppointments()[0])\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </ax-title>\n <ax-subtitle>\n {{ allDayAppointments()[0].startDate | format: 'date' : { calendar: calendar() } | async }}\n -\n {{ allDayAppointments()[0].endDate | format: 'date' : { calendar: calendar() } | async }}\n </ax-subtitle>\n </div>\n }\n @if (allDayAppointments().length > 1) {\n <div\n #moreAppointments\n class=\"ax-scheduler-day-header-more-tag\"\n [class]=\"\n allDayAppointments()[1].cssClass ??\n 'ax-scheduler-' + (allDayAppointments()[1].priority ?? 'primary') + '-priority'\n \"\n >\n {{\n '@acorex:common.general.more-items'\n | translate: { params: { number: allDayAppointments().length - 1 } }\n | async\n }}\n </div>\n <ax-popover [target]=\"moreAppointments\">\n <div class=\"ax-scheduler-popover\" [class.ax-state-readonly]=\"readonly()\" axDropZone>\n @for (appointment of allDayAppointments(); track appointment.id; let first = $first) {\n @if (!first) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"appointment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || appointment.readonly || readonly()\"\n (click)=\"handleAppointmentEvent($event, appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n [title]=\"tooltipTemplate() ? '' : appointment.title\"\n class=\"ax-scheduler-popover-appointment\"\n [class.ax-continuation-from-previous]=\"appointment.isContinuationFromPreviousDay\"\n [class.ax-continuation-to-next]=\"appointment.isContinuationToNextDay\"\n [class.ax-state-active]=\"isActive(appointment.id)\"\n [class]=\"appointment.cssClass ?? 'ax-scheduler-' + (appointment.priority ?? 'primary') + '-priority'\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltipContext]=\"appointment\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <ax-title>\n @if (appointment.isContinuationFromPreviousDay) {\n <span class=\"ax-continuation-arrow\">{{ rtl() ? '\u2192 ' : '\u2190 ' }}</span>\n }\n <span class=\"ax-scheduler-truncate\">{{ appointment.title }}</span>\n @if (appointment.isContinuationToNextDay) {\n <span class=\"ax-continuation-arrow\">{{ rtl() ? ' \u2190' : ' \u2192' }}</span>\n }\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </ax-title>\n <ax-subtitle>\n {{ appointment.originalStartDate | format: 'date' : { calendar: calendar() } | async }}\n -\n {{ appointment.originalEndDate | format: 'date' : { calendar: calendar() } | async }}\n </ax-subtitle>\n </div>\n }\n }\n </div>\n </ax-popover>\n }\n </div>\n </div>\n</div>\n\n<div class=\"ax-scheduler-day-time-container\">\n <table class=\"ax-scheduler-day-time\" aria-hidden=\"true\" [border]=\"1\">\n @for (time of hoursArray(); track time.date.getTime()) {\n <div>\n {{ time | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n </div>\n }\n </table>\n <div class=\"ax-scheduler-day-table-container\">\n <!-- Current Time Line Indicator -->\n @if (showCurrentTimeIndicator() && getCurrentTimePositionWithOffset() !== null) {\n <div\n #currentTimeLine\n class=\"ax-scheduler-current-time-line\"\n [style.inset-block-start]=\"getCurrentTimePositionWithOffset()\"\n ></div>\n }\n <div class=\"ax-scheduler-day-appointment-container\">\n @for (appointment of singleDayAppointments(); track appointment.id) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"appointment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || appointment.readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n [title]=\"tooltipTemplate() ? '' : appointment.title\"\n class=\"ax-scheduler-day-appointment\"\n [class.ax-continuation-from-previous]=\"appointment.isContinuationFromPreviousDay\"\n [class.ax-continuation-to-next]=\"appointment.isContinuationToNextDay\"\n [class.ax-state-active]=\"isActive(appointment.id)\"\n [style.width]=\"getAppointmentWidth(appointment.id)\"\n [style.height]=\"getAppointmentHeight(appointment.id)\"\n [style.inset-block-start]=\"getAppointmentTop(appointment.id)\"\n [style.inset-inline-start]=\"getAppointmentLeft(appointment.id)\"\n [class]=\"appointment.cssClass ?? 'ax-scheduler-' + (appointment.priority ?? 'primary') + '-priority'\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltipContext]=\"appointment\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </ax-title>\n <ax-subtitle>\n {{ appointment.originalStartDate | format: 'time' : { calendar: calendar() } | async }} -\n {{ appointment.originalEndDate | format: 'time' : { calendar: calendar() } | async }}\n </ax-subtitle>\n </div>\n }\n </div>\n <div aria-hidden=\"true\" class=\"ax-scheduler-day-slot\">\n @for (time of hoursArray(); track time.date.getTime()) {\n <div\n axDropZone\n #zone=\"axDropZone\"\n (onElementDrop)=\"handleSingleDayDrop($event, time)\"\n [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n (click)=\"handleSingleSlotEvent($event, time)\"\n (dblclick)=\"handleSingleSlotEvent($event, time)\"\n (contextmenu)=\"handleSingleSlotEvent($event, time)\"\n [attr.data-slot-id]=\"time.format('YYYYMMDD-HHmm')\"\n ></div>\n <div\n axDropZone\n #zone2=\"axDropZone\"\n [class.ax-scheduler-slot-hovered]=\"zone2.isHovered()\"\n (onElementDrop)=\"handleSingleDayDrop($event, time.add('minute', 30))\"\n (click)=\"handleSingleSlotEvent($event, time.add('minute', 30))\"\n (dblclick)=\"handleSingleSlotEvent($event, time.add('minute', 30))\"\n (contextmenu)=\"handleSingleSlotEvent($event, time.add('minute', 30))\"\n [attr.data-slot-id]=\"time.add('minute', 30).format('YYYYMMDD-HHmm')\"\n ></div>\n }\n </div>\n </div>\n</div>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid}}}@layer components{ax-scheduler-day-view{min-width:var(--ax-comp-scheduler-width);background-color:inherit;display:block;position:relative}ax-scheduler-day-view .ax-scheduler-day-header{top:calc(var(--spacing,.25rem) * 0);z-index:10;border-style:var(--tw-border-style);border-width:1px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:var(--ax-comp-scheduler-all-day-bg,inherit);width:100%;display:flex;position:sticky}ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table{z-index:10;background-color:inherit;position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 0)}ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table div{height:var(--ax-comp-scheduler-basic-view-blocks-height);width:var(--ax-comp-scheduler-basic-view-blocks-width);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));justify-content:center;align-items:center;display:flex}ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table-container{width:100%;display:flex}ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table-container .ax-scheduler-day-header-appointment-container{gap:calc(var(--spacing,.25rem) * 4);width:calc(100% - 2.5rem);display:flex}ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table-container .ax-scheduler-day-header-appointment-container .ax-scheduler-header-day-appointment{border-radius:calc(var(--ax-sys-border-radius) / 2);width:100%;padding-inline:calc(var(--spacing,.25rem) * 2);flex-direction:column;justify-content:center;display:flex;overflow:hidden}ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table-container .ax-scheduler-day-header-appointment-container .ax-scheduler-day-header-more-tag{cursor:pointer;border-radius:var(--ax-sys-border-radius);padding-inline:calc(var(--spacing,.25rem) * 2);text-wrap:nowrap;flex-direction:column;justify-content:center;display:flex}ax-scheduler-day-view .ax-scheduler-day-time-container{background-color:inherit;width:100%;display:flex}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-time{z-index:15;background-color:var(--ax-comp-scheduler-all-day-bg,inherit);position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 0)}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-time div{height:calc(var(--ax-comp-scheduler-basic-view-blocks-height) * 2);width:var(--ax-comp-scheduler-basic-view-blocks-width);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));text-align:center;display:block;position:relative}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container{width:100%;position:relative}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container .ax-scheduler-day-appointment-container{top:calc(var(--spacing,.25rem) * 0);width:calc(100% - 2.5rem);position:absolute}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container .ax-scheduler-day-appointment-container .ax-scheduler-day-appointment{border-radius:calc(var(--ax-sys-border-radius) / 2);width:100%;padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:calc(var(--spacing,.25rem) * 1);flex-direction:column;display:flex;position:absolute;inset-inline-start:calc(var(--spacing,.25rem) * 0);overflow:hidden}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container .ax-scheduler-day-slot{width:100%}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container .ax-scheduler-day-slot div{height:var(--ax-comp-scheduler-basic-view-blocks-height);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding-inline:calc(var(--spacing,.25rem) * 2);display:block}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container .ax-scheduler-day-slot div:first-child{border-top-style:var(--tw-border-style);border-top-width:0}ax-scheduler-day-view:not(.ax-state-readonly) .ax-scheduler-header-day-appointment,ax-scheduler-day-view:not(.ax-state-readonly) .ax-scheduler-day-appointment{cursor:pointer}ax-scheduler-day-view:not(.ax-state-readonly) .ax-scheduler-day-header-table-container,ax-scheduler-day-view:not(.ax-state-readonly) .ax-scheduler-day-slot>div{cursor:pointer;transition-property:background-color;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}@media(hover:hover){:is(ax-scheduler-day-view:not(.ax-state-readonly) .ax-scheduler-day-header-table-container,ax-scheduler-day-view:not(.ax-state-readonly) .ax-scheduler-day-slot>div):hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg,var(--ax-sys-color-primary-surface),.1))}}ax-scheduler-day-view ax-title{justify-content:space-between;display:flex}ax-scheduler-day-view ax-title .ax-scheduler-action-icon{cursor:pointer;width:auto}ax-scheduler-day-view .ax-scheduler-current-time-line{inset-inline:calc(var(--spacing,.25rem) * 0);height:calc(var(--spacing,.25rem) * .5)}ax-scheduler-day-view .ax-scheduler-current-time-line:before{inset-inline-start:-6px;top:-5px}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["axDrag", "dragData", "dragDisabled", "dragTransition", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragClonedTemplate", "dragCursor", "dragBoundary", "dragTransitionDuration"], outputs: ["dragPositionChanged"] }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "directive", type: AXDropZoneDirective, selector: "[axDropZone]", inputs: ["dropZoneGroup"], outputs: ["onElementDrop", "onElementHover"], exportAs: ["axDropZone"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXFormatPipe, name: "format" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1385
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXSchedulerDayViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1386
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXSchedulerDayViewComponent, isStandalone: true, selector: "ax-scheduler-day-view", inputs: { rtl: { classPropertyName: "rtl", publicName: "rtl", 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 }, hasActions: { classPropertyName: "hasActions", publicName: "hasActions", isSignal: true, isRequired: false, transformFunction: null }, dragStartDelay: { classPropertyName: "dragStartDelay", publicName: "dragStartDelay", 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 }, endDayHour: { classPropertyName: "endDayHour", publicName: "endDayHour", isSignal: true, isRequired: true, transformFunction: null }, startDayHour: { classPropertyName: "startDayHour", publicName: "startDayHour", isSignal: true, isRequired: true, transformFunction: null }, showCurrentTimeIndicator: { classPropertyName: "showCurrentTimeIndicator", publicName: "showCurrentTimeIndicator", isSignal: true, isRequired: false, transformFunction: null }, scrollToCurrentTimeIndicator: { classPropertyName: "scrollToCurrentTimeIndicator", publicName: "scrollToCurrentTimeIndicator", isSignal: true, isRequired: false, transformFunction: null }, appointments: { classPropertyName: "appointments", publicName: "appointments", isSignal: true, isRequired: false, transformFunction: null }, tooltipTemplate: { classPropertyName: "tooltipTemplate", publicName: "tooltipTemplate", isSignal: true, isRequired: false, transformFunction: null }, selectedAppointmentId: { classPropertyName: "selectedAppointmentId", publicName: "selectedAppointmentId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { slotClickedInternal: "slotClickedInternal", slotDblClickedInternal: "slotDblClickedInternal", slotRightClickedInternal: "slotRightClickedInternal", appointmentClickedInternal: "appointmentClickedInternal", appointmentDblClickedInternal: "appointmentDblClickedInternal", appointmentRightClickedInternal: "appointmentRightClickedInternal", onActionClickInternal: "onActionClickInternal", onAppointmentDropInternal: "onAppointmentDropInternal" }, host: { properties: { "class.ax-state-readonly": "readonly()" } }, providers: [{ provide: AXComponent, useExisting: AXSchedulerDayViewComponent }], viewQueries: [{ propertyName: "currentTimeLineElement", first: true, predicate: ["currentTimeLine"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-scheduler-day-header\">\n <div class=\"ax-scheduler-day-header-table\" aria-hidden=\"true\">\n <div>\n {{ '@acorex:dateTime.duration.all-day' | translate | async }}\n </div>\n </div>\n <div\n axDropZone\n #zone=\"axDropZone\"\n (onElementDrop)=\"handleAllDayDrop($event)\"\n [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n (click)=\"handleAllDaySlotEvent($event)\"\n (dblclick)=\"handleAllDaySlotEvent($event)\"\n (contextmenu)=\"handleAllDaySlotEvent($event)\"\n class=\"ax-scheduler-day-header-table-container\"\n [attr.data-slot-id]=\"date().format('YYYYMMDD') + '-allday'\"\n >\n <div class=\"ax-scheduler-day-header-appointment-container\">\n @if (allDayAppointments().length) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || allDayAppointments()[0].readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n [dragData]=\"allDayAppointments()[0]\"\n (click)=\"handleAppointmentEvent($event, allDayAppointments()[0])\"\n (dblclick)=\"handleAppointmentEvent($event, allDayAppointments()[0])\"\n (contextmenu)=\"handleAppointmentEvent($event, allDayAppointments()[0])\"\n [title]=\"tooltipTemplate() ? '' : allDayAppointments()[0].title\"\n class=\"ax-scheduler-header-day-appointment\"\n [class.ax-continuation-from-previous]=\"allDayAppointments()[0].isContinuationFromPreviousDay\"\n [class.ax-continuation-to-next]=\"allDayAppointments()[0].isContinuationToNextDay\"\n [class.ax-state-active]=\"isActive(allDayAppointments()[0].id)\"\n [class]=\"\n allDayAppointments()[0].cssClass ??\n 'ax-scheduler-' + (allDayAppointments()[0].priority ?? 'primary') + '-priority'\n \"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltipContext]=\"allDayAppointments()[0]\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ allDayAppointments()[0].title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, allDayAppointments()[0])\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </ax-title>\n <ax-subtitle>\n {{ allDayAppointments()[0].startDate | format: 'date' : { calendar: calendar() } | async }}\n -\n {{ allDayAppointments()[0].endDate | format: 'date' : { calendar: calendar() } | async }}\n </ax-subtitle>\n </div>\n }\n @if (allDayAppointments().length > 1) {\n <div\n #moreAppointments\n class=\"ax-scheduler-day-header-more-tag\"\n [class]=\"\n allDayAppointments()[1].cssClass ??\n 'ax-scheduler-' + (allDayAppointments()[1].priority ?? 'primary') + '-priority'\n \"\n >\n {{\n '@acorex:common.general.more-items'\n | translate: { params: { number: allDayAppointments().length - 1 } }\n | async\n }}\n </div>\n <ax-popover [target]=\"moreAppointments\">\n <div class=\"ax-scheduler-popover\" [class.ax-state-readonly]=\"readonly()\" axDropZone>\n @for (appointment of allDayAppointments(); track appointment.id; let first = $first) {\n @if (!first) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"appointment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || appointment.readonly || readonly()\"\n (click)=\"handleAppointmentEvent($event, appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n [title]=\"tooltipTemplate() ? '' : appointment.title\"\n class=\"ax-scheduler-popover-appointment\"\n [class.ax-continuation-from-previous]=\"appointment.isContinuationFromPreviousDay\"\n [class.ax-continuation-to-next]=\"appointment.isContinuationToNextDay\"\n [class.ax-state-active]=\"isActive(appointment.id)\"\n [class]=\"appointment.cssClass ?? 'ax-scheduler-' + (appointment.priority ?? 'primary') + '-priority'\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltipContext]=\"appointment\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <ax-title>\n @if (appointment.isContinuationFromPreviousDay) {\n <span class=\"ax-continuation-arrow\">{{ rtl() ? '\u2192 ' : '\u2190 ' }}</span>\n }\n <span class=\"ax-scheduler-truncate\">{{ appointment.title }}</span>\n @if (appointment.isContinuationToNextDay) {\n <span class=\"ax-continuation-arrow\">{{ rtl() ? ' \u2190' : ' \u2192' }}</span>\n }\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </ax-title>\n <ax-subtitle>\n {{ appointment.originalStartDate | format: 'date' : { calendar: calendar() } | async }}\n -\n {{ appointment.originalEndDate | format: 'date' : { calendar: calendar() } | async }}\n </ax-subtitle>\n </div>\n }\n }\n </div>\n </ax-popover>\n }\n </div>\n </div>\n</div>\n\n<div class=\"ax-scheduler-day-time-container\">\n <table class=\"ax-scheduler-day-time\" aria-hidden=\"true\" [border]=\"1\">\n @for (time of hoursArray(); track time.date.getTime()) {\n <div>\n {{ time | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n </div>\n }\n </table>\n <div class=\"ax-scheduler-day-table-container\">\n <!-- Current Time Line Indicator -->\n @if (showCurrentTimeIndicator() && getCurrentTimePositionWithOffset() !== null) {\n <div\n #currentTimeLine\n class=\"ax-scheduler-current-time-line\"\n [style.inset-block-start]=\"getCurrentTimePositionWithOffset()\"\n ></div>\n }\n <div class=\"ax-scheduler-day-appointment-container\">\n @for (appointment of singleDayAppointments(); track appointment.id) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"appointment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || appointment.readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n [title]=\"tooltipTemplate() ? '' : appointment.title\"\n class=\"ax-scheduler-day-appointment\"\n [class.ax-continuation-from-previous]=\"appointment.isContinuationFromPreviousDay\"\n [class.ax-continuation-to-next]=\"appointment.isContinuationToNextDay\"\n [class.ax-state-active]=\"isActive(appointment.id)\"\n [style.width]=\"getAppointmentWidth(appointment.id)\"\n [style.height]=\"getAppointmentHeight(appointment.id)\"\n [style.inset-block-start]=\"getAppointmentTop(appointment.id)\"\n [style.inset-inline-start]=\"getAppointmentLeft(appointment.id)\"\n [class]=\"appointment.cssClass ?? 'ax-scheduler-' + (appointment.priority ?? 'primary') + '-priority'\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltipContext]=\"appointment\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </ax-title>\n <ax-subtitle>\n {{ appointment.originalStartDate | format: 'time' : { calendar: calendar() } | async }} -\n {{ appointment.originalEndDate | format: 'time' : { calendar: calendar() } | async }}\n </ax-subtitle>\n </div>\n }\n </div>\n <div aria-hidden=\"true\" class=\"ax-scheduler-day-slot\">\n @for (time of hoursArray(); track time.date.getTime()) {\n <div\n axDropZone\n #zone=\"axDropZone\"\n (onElementDrop)=\"handleSingleDayDrop($event, time)\"\n [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n (click)=\"handleSingleSlotEvent($event, time)\"\n (dblclick)=\"handleSingleSlotEvent($event, time)\"\n (contextmenu)=\"handleSingleSlotEvent($event, time)\"\n [attr.data-slot-id]=\"time.format('YYYYMMDD-HHmm')\"\n ></div>\n <div\n axDropZone\n #zone2=\"axDropZone\"\n [class.ax-scheduler-slot-hovered]=\"zone2.isHovered()\"\n (onElementDrop)=\"handleSingleDayDrop($event, time.add('minute', 30))\"\n (click)=\"handleSingleSlotEvent($event, time.add('minute', 30))\"\n (dblclick)=\"handleSingleSlotEvent($event, time.add('minute', 30))\"\n (contextmenu)=\"handleSingleSlotEvent($event, time.add('minute', 30))\"\n [attr.data-slot-id]=\"time.add('minute', 30).format('YYYYMMDD-HHmm')\"\n ></div>\n }\n </div>\n </div>\n</div>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid}}}@layer components{ax-scheduler-day-view{min-width:var(--ax-comp-scheduler-width);background-color:inherit;display:block;position:relative}ax-scheduler-day-view .ax-scheduler-day-header{z-index:10;border-style:var(--tw-border-style);border-width:1px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:var(--ax-comp-scheduler-all-day-bg,inherit);width:100%;display:flex;position:sticky;top:0}ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table{z-index:10;background-color:inherit;position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 0)}ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table div{height:var(--ax-comp-scheduler-basic-view-blocks-height);width:var(--ax-comp-scheduler-basic-view-blocks-width);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));justify-content:center;align-items:center;display:flex}ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table-container{width:100%;display:flex}ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table-container .ax-scheduler-day-header-appointment-container{gap:calc(var(--spacing,.25rem) * 4);width:calc(100% - 2.5rem);display:flex}ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table-container .ax-scheduler-day-header-appointment-container .ax-scheduler-header-day-appointment{border-radius:calc(var(--ax-sys-border-radius) / 2);width:100%;padding-inline:calc(var(--spacing,.25rem) * 2);flex-direction:column;justify-content:center;display:flex;overflow:hidden}ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table-container .ax-scheduler-day-header-appointment-container .ax-scheduler-day-header-more-tag{cursor:pointer;border-radius:var(--ax-sys-border-radius);padding-inline:calc(var(--spacing,.25rem) * 2);text-wrap:nowrap;flex-direction:column;justify-content:center;display:flex}ax-scheduler-day-view .ax-scheduler-day-time-container{background-color:inherit;width:100%;display:flex}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-time{z-index:15;background-color:var(--ax-comp-scheduler-all-day-bg,inherit);position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 0)}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-time div{height:calc(var(--ax-comp-scheduler-basic-view-blocks-height) * 2);width:var(--ax-comp-scheduler-basic-view-blocks-width);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));text-align:center;display:block;position:relative}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container{width:100%;position:relative}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container .ax-scheduler-day-appointment-container{width:calc(100% - 2.5rem);position:absolute;top:0}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container .ax-scheduler-day-appointment-container .ax-scheduler-day-appointment{border-radius:calc(var(--ax-sys-border-radius) / 2);width:100%;padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:var(--spacing,.25rem);flex-direction:column;display:flex;position:absolute;inset-inline-start:calc(var(--spacing,.25rem) * 0);overflow:hidden}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container .ax-scheduler-day-slot{width:100%}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container .ax-scheduler-day-slot div{height:var(--ax-comp-scheduler-basic-view-blocks-height);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding-inline:calc(var(--spacing,.25rem) * 2);display:block}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container .ax-scheduler-day-slot div:first-child{border-top-style:var(--tw-border-style);border-top-width:0}ax-scheduler-day-view:not(.ax-state-readonly) .ax-scheduler-header-day-appointment,ax-scheduler-day-view:not(.ax-state-readonly) .ax-scheduler-day-appointment{cursor:pointer}ax-scheduler-day-view:not(.ax-state-readonly) .ax-scheduler-day-header-table-container,ax-scheduler-day-view:not(.ax-state-readonly) .ax-scheduler-day-slot>div{cursor:pointer;transition-property:background-color;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}:is(ax-scheduler-day-view:not(.ax-state-readonly) .ax-scheduler-day-header-table-container,ax-scheduler-day-view:not(.ax-state-readonly) .ax-scheduler-day-slot>div):hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg,var(--ax-sys-color-primary-surface),.1))}ax-scheduler-day-view ax-title{justify-content:space-between;display:flex}ax-scheduler-day-view ax-title .ax-scheduler-action-icon{cursor:pointer;width:auto}ax-scheduler-day-view .ax-scheduler-current-time-line{height:calc(var(--spacing,.25rem) * .5);inset-inline:0}ax-scheduler-day-view .ax-scheduler-current-time-line:before{inset-inline-start:-6px;top:-5px}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["axDrag", "dragData", "dragDisabled", "dragTransition", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragClonedTemplate", "dragCursor", "dragBoundary", "dragTransitionDuration"], outputs: ["dragPositionChanged"] }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "directive", type: AXDropZoneDirective, selector: "[axDropZone]", inputs: ["dropZoneGroup"], outputs: ["onElementDrop", "onElementHover"], exportAs: ["axDropZone"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXFormatPipe, name: "format" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1368
1387
|
}
|
|
1369
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
1388
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXSchedulerDayViewComponent, decorators: [{
|
|
1370
1389
|
type: Component,
|
|
1371
1390
|
args: [{ selector: 'ax-scheduler-day-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
1372
1391
|
'[class.ax-state-readonly]': 'readonly()',
|
|
@@ -1380,7 +1399,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
|
|
|
1380
1399
|
AXDropZoneDirective,
|
|
1381
1400
|
AXDecoratorIconComponent,
|
|
1382
1401
|
AXDecoratorGenericComponent,
|
|
1383
|
-
], providers: [{ provide: AXComponent, useExisting: AXSchedulerDayViewComponent }], template: "<div class=\"ax-scheduler-day-header\">\n <div class=\"ax-scheduler-day-header-table\" aria-hidden=\"true\">\n <div>\n {{ '@acorex:dateTime.duration.all-day' | translate | async }}\n </div>\n </div>\n <div\n axDropZone\n #zone=\"axDropZone\"\n (onElementDrop)=\"handleAllDayDrop($event)\"\n [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n (click)=\"handleAllDaySlotEvent($event)\"\n (dblclick)=\"handleAllDaySlotEvent($event)\"\n (contextmenu)=\"handleAllDaySlotEvent($event)\"\n class=\"ax-scheduler-day-header-table-container\"\n [attr.data-slot-id]=\"date().format('YYYYMMDD') + '-allday'\"\n >\n <div class=\"ax-scheduler-day-header-appointment-container\">\n @if (allDayAppointments().length) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || allDayAppointments()[0].readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n [dragData]=\"allDayAppointments()[0]\"\n (click)=\"handleAppointmentEvent($event, allDayAppointments()[0])\"\n (dblclick)=\"handleAppointmentEvent($event, allDayAppointments()[0])\"\n (contextmenu)=\"handleAppointmentEvent($event, allDayAppointments()[0])\"\n [title]=\"tooltipTemplate() ? '' : allDayAppointments()[0].title\"\n class=\"ax-scheduler-header-day-appointment\"\n [class.ax-continuation-from-previous]=\"allDayAppointments()[0].isContinuationFromPreviousDay\"\n [class.ax-continuation-to-next]=\"allDayAppointments()[0].isContinuationToNextDay\"\n [class.ax-state-active]=\"isActive(allDayAppointments()[0].id)\"\n [class]=\"\n allDayAppointments()[0].cssClass ??\n 'ax-scheduler-' + (allDayAppointments()[0].priority ?? 'primary') + '-priority'\n \"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltipContext]=\"allDayAppointments()[0]\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ allDayAppointments()[0].title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, allDayAppointments()[0])\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </ax-title>\n <ax-subtitle>\n {{ allDayAppointments()[0].startDate | format: 'date' : { calendar: calendar() } | async }}\n -\n {{ allDayAppointments()[0].endDate | format: 'date' : { calendar: calendar() } | async }}\n </ax-subtitle>\n </div>\n }\n @if (allDayAppointments().length > 1) {\n <div\n #moreAppointments\n class=\"ax-scheduler-day-header-more-tag\"\n [class]=\"\n allDayAppointments()[1].cssClass ??\n 'ax-scheduler-' + (allDayAppointments()[1].priority ?? 'primary') + '-priority'\n \"\n >\n {{\n '@acorex:common.general.more-items'\n | translate: { params: { number: allDayAppointments().length - 1 } }\n | async\n }}\n </div>\n <ax-popover [target]=\"moreAppointments\">\n <div class=\"ax-scheduler-popover\" [class.ax-state-readonly]=\"readonly()\" axDropZone>\n @for (appointment of allDayAppointments(); track appointment.id; let first = $first) {\n @if (!first) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"appointment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || appointment.readonly || readonly()\"\n (click)=\"handleAppointmentEvent($event, appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n [title]=\"tooltipTemplate() ? '' : appointment.title\"\n class=\"ax-scheduler-popover-appointment\"\n [class.ax-continuation-from-previous]=\"appointment.isContinuationFromPreviousDay\"\n [class.ax-continuation-to-next]=\"appointment.isContinuationToNextDay\"\n [class.ax-state-active]=\"isActive(appointment.id)\"\n [class]=\"appointment.cssClass ?? 'ax-scheduler-' + (appointment.priority ?? 'primary') + '-priority'\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltipContext]=\"appointment\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <ax-title>\n @if (appointment.isContinuationFromPreviousDay) {\n <span class=\"ax-continuation-arrow\">{{ rtl() ? '\u2192 ' : '\u2190 ' }}</span>\n }\n <span class=\"ax-scheduler-truncate\">{{ appointment.title }}</span>\n @if (appointment.isContinuationToNextDay) {\n <span class=\"ax-continuation-arrow\">{{ rtl() ? ' \u2190' : ' \u2192' }}</span>\n }\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </ax-title>\n <ax-subtitle>\n {{ appointment.originalStartDate | format: 'date' : { calendar: calendar() } | async }}\n -\n {{ appointment.originalEndDate | format: 'date' : { calendar: calendar() } | async }}\n </ax-subtitle>\n </div>\n }\n }\n </div>\n </ax-popover>\n }\n </div>\n </div>\n</div>\n\n<div class=\"ax-scheduler-day-time-container\">\n <table class=\"ax-scheduler-day-time\" aria-hidden=\"true\" [border]=\"1\">\n @for (time of hoursArray(); track time.date.getTime()) {\n <div>\n {{ time | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n </div>\n }\n </table>\n <div class=\"ax-scheduler-day-table-container\">\n <!-- Current Time Line Indicator -->\n @if (showCurrentTimeIndicator() && getCurrentTimePositionWithOffset() !== null) {\n <div\n #currentTimeLine\n class=\"ax-scheduler-current-time-line\"\n [style.inset-block-start]=\"getCurrentTimePositionWithOffset()\"\n ></div>\n }\n <div class=\"ax-scheduler-day-appointment-container\">\n @for (appointment of singleDayAppointments(); track appointment.id) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"appointment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || appointment.readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n [title]=\"tooltipTemplate() ? '' : appointment.title\"\n class=\"ax-scheduler-day-appointment\"\n [class.ax-continuation-from-previous]=\"appointment.isContinuationFromPreviousDay\"\n [class.ax-continuation-to-next]=\"appointment.isContinuationToNextDay\"\n [class.ax-state-active]=\"isActive(appointment.id)\"\n [style.width]=\"getAppointmentWidth(appointment.id)\"\n [style.height]=\"getAppointmentHeight(appointment.id)\"\n [style.inset-block-start]=\"getAppointmentTop(appointment.id)\"\n [style.inset-inline-start]=\"getAppointmentLeft(appointment.id)\"\n [class]=\"appointment.cssClass ?? 'ax-scheduler-' + (appointment.priority ?? 'primary') + '-priority'\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltipContext]=\"appointment\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </ax-title>\n <ax-subtitle>\n {{ appointment.originalStartDate | format: 'time' : { calendar: calendar() } | async }} -\n {{ appointment.originalEndDate | format: 'time' : { calendar: calendar() } | async }}\n </ax-subtitle>\n </div>\n }\n </div>\n <div aria-hidden=\"true\" class=\"ax-scheduler-day-slot\">\n @for (time of hoursArray(); track time.date.getTime()) {\n <div\n axDropZone\n #zone=\"axDropZone\"\n (onElementDrop)=\"handleSingleDayDrop($event, time)\"\n [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n (click)=\"handleSingleSlotEvent($event, time)\"\n (dblclick)=\"handleSingleSlotEvent($event, time)\"\n (contextmenu)=\"handleSingleSlotEvent($event, time)\"\n [attr.data-slot-id]=\"time.format('YYYYMMDD-HHmm')\"\n ></div>\n <div\n axDropZone\n #zone2=\"axDropZone\"\n [class.ax-scheduler-slot-hovered]=\"zone2.isHovered()\"\n (onElementDrop)=\"handleSingleDayDrop($event, time.add('minute', 30))\"\n (click)=\"handleSingleSlotEvent($event, time.add('minute', 30))\"\n (dblclick)=\"handleSingleSlotEvent($event, time.add('minute', 30))\"\n (contextmenu)=\"handleSingleSlotEvent($event, time.add('minute', 30))\"\n [attr.data-slot-id]=\"time.add('minute', 30).format('YYYYMMDD-HHmm')\"\n ></div>\n }\n </div>\n </div>\n</div>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid}}}@layer components{ax-scheduler-day-view{min-width:var(--ax-comp-scheduler-width);background-color:inherit;display:block;position:relative}ax-scheduler-day-view .ax-scheduler-day-header{top:calc(var(--spacing,.25rem) * 0);z-index:10;border-style:var(--tw-border-style);border-width:1px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:var(--ax-comp-scheduler-all-day-bg,inherit);width:100%;display:flex;position:sticky}ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table{z-index:10;background-color:inherit;position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 0)}ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table div{height:var(--ax-comp-scheduler-basic-view-blocks-height);width:var(--ax-comp-scheduler-basic-view-blocks-width);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));justify-content:center;align-items:center;display:flex}ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table-container{width:100%;display:flex}ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table-container .ax-scheduler-day-header-appointment-container{gap:calc(var(--spacing,.25rem) * 4);width:calc(100% - 2.5rem);display:flex}ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table-container .ax-scheduler-day-header-appointment-container .ax-scheduler-header-day-appointment{border-radius:calc(var(--ax-sys-border-radius) / 2);width:100%;padding-inline:calc(var(--spacing,.25rem) * 2);flex-direction:column;justify-content:center;display:flex;overflow:hidden}ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table-container .ax-scheduler-day-header-appointment-container .ax-scheduler-day-header-more-tag{cursor:pointer;border-radius:var(--ax-sys-border-radius);padding-inline:calc(var(--spacing,.25rem) * 2);text-wrap:nowrap;flex-direction:column;justify-content:center;display:flex}ax-scheduler-day-view .ax-scheduler-day-time-container{background-color:inherit;width:100%;display:flex}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-time{z-index:15;background-color:var(--ax-comp-scheduler-all-day-bg,inherit);position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 0)}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-time div{height:calc(var(--ax-comp-scheduler-basic-view-blocks-height) * 2);width:var(--ax-comp-scheduler-basic-view-blocks-width);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));text-align:center;display:block;position:relative}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container{width:100%;position:relative}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container .ax-scheduler-day-appointment-container{top:calc(var(--spacing,.25rem) * 0);width:calc(100% - 2.5rem);position:absolute}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container .ax-scheduler-day-appointment-container .ax-scheduler-day-appointment{border-radius:calc(var(--ax-sys-border-radius) / 2);width:100%;padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:calc(var(--spacing,.25rem) * 1);flex-direction:column;display:flex;position:absolute;inset-inline-start:calc(var(--spacing,.25rem) * 0);overflow:hidden}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container .ax-scheduler-day-slot{width:100%}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container .ax-scheduler-day-slot div{height:var(--ax-comp-scheduler-basic-view-blocks-height);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding-inline:calc(var(--spacing,.25rem) * 2);display:block}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container .ax-scheduler-day-slot div:first-child{border-top-style:var(--tw-border-style);border-top-width:0}ax-scheduler-day-view:not(.ax-state-readonly) .ax-scheduler-header-day-appointment,ax-scheduler-day-view:not(.ax-state-readonly) .ax-scheduler-day-appointment{cursor:pointer}ax-scheduler-day-view:not(.ax-state-readonly) .ax-scheduler-day-header-table-container,ax-scheduler-day-view:not(.ax-state-readonly) .ax-scheduler-day-slot>div{cursor:pointer;transition-property:background-color;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}@media(hover:hover){:is(ax-scheduler-day-view:not(.ax-state-readonly) .ax-scheduler-day-header-table-container,ax-scheduler-day-view:not(.ax-state-readonly) .ax-scheduler-day-slot>div):hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg,var(--ax-sys-color-primary-surface),.1))}}ax-scheduler-day-view ax-title{justify-content:space-between;display:flex}ax-scheduler-day-view ax-title .ax-scheduler-action-icon{cursor:pointer;width:auto}ax-scheduler-day-view .ax-scheduler-current-time-line{inset-inline:calc(var(--spacing,.25rem) * 0);height:calc(var(--spacing,.25rem) * .5)}ax-scheduler-day-view .ax-scheduler-current-time-line:before{inset-inline-start:-6px;top:-5px}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"] }]
|
|
1402
|
+
], providers: [{ provide: AXComponent, useExisting: AXSchedulerDayViewComponent }], template: "<div class=\"ax-scheduler-day-header\">\n <div class=\"ax-scheduler-day-header-table\" aria-hidden=\"true\">\n <div>\n {{ '@acorex:dateTime.duration.all-day' | translate | async }}\n </div>\n </div>\n <div\n axDropZone\n #zone=\"axDropZone\"\n (onElementDrop)=\"handleAllDayDrop($event)\"\n [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n (click)=\"handleAllDaySlotEvent($event)\"\n (dblclick)=\"handleAllDaySlotEvent($event)\"\n (contextmenu)=\"handleAllDaySlotEvent($event)\"\n class=\"ax-scheduler-day-header-table-container\"\n [attr.data-slot-id]=\"date().format('YYYYMMDD') + '-allday'\"\n >\n <div class=\"ax-scheduler-day-header-appointment-container\">\n @if (allDayAppointments().length) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || allDayAppointments()[0].readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n [dragData]=\"allDayAppointments()[0]\"\n (click)=\"handleAppointmentEvent($event, allDayAppointments()[0])\"\n (dblclick)=\"handleAppointmentEvent($event, allDayAppointments()[0])\"\n (contextmenu)=\"handleAppointmentEvent($event, allDayAppointments()[0])\"\n [title]=\"tooltipTemplate() ? '' : allDayAppointments()[0].title\"\n class=\"ax-scheduler-header-day-appointment\"\n [class.ax-continuation-from-previous]=\"allDayAppointments()[0].isContinuationFromPreviousDay\"\n [class.ax-continuation-to-next]=\"allDayAppointments()[0].isContinuationToNextDay\"\n [class.ax-state-active]=\"isActive(allDayAppointments()[0].id)\"\n [class]=\"\n allDayAppointments()[0].cssClass ??\n 'ax-scheduler-' + (allDayAppointments()[0].priority ?? 'primary') + '-priority'\n \"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltipContext]=\"allDayAppointments()[0]\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ allDayAppointments()[0].title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, allDayAppointments()[0])\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </ax-title>\n <ax-subtitle>\n {{ allDayAppointments()[0].startDate | format: 'date' : { calendar: calendar() } | async }}\n -\n {{ allDayAppointments()[0].endDate | format: 'date' : { calendar: calendar() } | async }}\n </ax-subtitle>\n </div>\n }\n @if (allDayAppointments().length > 1) {\n <div\n #moreAppointments\n class=\"ax-scheduler-day-header-more-tag\"\n [class]=\"\n allDayAppointments()[1].cssClass ??\n 'ax-scheduler-' + (allDayAppointments()[1].priority ?? 'primary') + '-priority'\n \"\n >\n {{\n '@acorex:common.general.more-items'\n | translate: { params: { number: allDayAppointments().length - 1 } }\n | async\n }}\n </div>\n <ax-popover [target]=\"moreAppointments\">\n <div class=\"ax-scheduler-popover\" [class.ax-state-readonly]=\"readonly()\" axDropZone>\n @for (appointment of allDayAppointments(); track appointment.id; let first = $first) {\n @if (!first) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"appointment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || appointment.readonly || readonly()\"\n (click)=\"handleAppointmentEvent($event, appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n [title]=\"tooltipTemplate() ? '' : appointment.title\"\n class=\"ax-scheduler-popover-appointment\"\n [class.ax-continuation-from-previous]=\"appointment.isContinuationFromPreviousDay\"\n [class.ax-continuation-to-next]=\"appointment.isContinuationToNextDay\"\n [class.ax-state-active]=\"isActive(appointment.id)\"\n [class]=\"appointment.cssClass ?? 'ax-scheduler-' + (appointment.priority ?? 'primary') + '-priority'\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltipContext]=\"appointment\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <ax-title>\n @if (appointment.isContinuationFromPreviousDay) {\n <span class=\"ax-continuation-arrow\">{{ rtl() ? '\u2192 ' : '\u2190 ' }}</span>\n }\n <span class=\"ax-scheduler-truncate\">{{ appointment.title }}</span>\n @if (appointment.isContinuationToNextDay) {\n <span class=\"ax-continuation-arrow\">{{ rtl() ? ' \u2190' : ' \u2192' }}</span>\n }\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </ax-title>\n <ax-subtitle>\n {{ appointment.originalStartDate | format: 'date' : { calendar: calendar() } | async }}\n -\n {{ appointment.originalEndDate | format: 'date' : { calendar: calendar() } | async }}\n </ax-subtitle>\n </div>\n }\n }\n </div>\n </ax-popover>\n }\n </div>\n </div>\n</div>\n\n<div class=\"ax-scheduler-day-time-container\">\n <table class=\"ax-scheduler-day-time\" aria-hidden=\"true\" [border]=\"1\">\n @for (time of hoursArray(); track time.date.getTime()) {\n <div>\n {{ time | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n </div>\n }\n </table>\n <div class=\"ax-scheduler-day-table-container\">\n <!-- Current Time Line Indicator -->\n @if (showCurrentTimeIndicator() && getCurrentTimePositionWithOffset() !== null) {\n <div\n #currentTimeLine\n class=\"ax-scheduler-current-time-line\"\n [style.inset-block-start]=\"getCurrentTimePositionWithOffset()\"\n ></div>\n }\n <div class=\"ax-scheduler-day-appointment-container\">\n @for (appointment of singleDayAppointments(); track appointment.id) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"appointment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || appointment.readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n [title]=\"tooltipTemplate() ? '' : appointment.title\"\n class=\"ax-scheduler-day-appointment\"\n [class.ax-continuation-from-previous]=\"appointment.isContinuationFromPreviousDay\"\n [class.ax-continuation-to-next]=\"appointment.isContinuationToNextDay\"\n [class.ax-state-active]=\"isActive(appointment.id)\"\n [style.width]=\"getAppointmentWidth(appointment.id)\"\n [style.height]=\"getAppointmentHeight(appointment.id)\"\n [style.inset-block-start]=\"getAppointmentTop(appointment.id)\"\n [style.inset-inline-start]=\"getAppointmentLeft(appointment.id)\"\n [class]=\"appointment.cssClass ?? 'ax-scheduler-' + (appointment.priority ?? 'primary') + '-priority'\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltipContext]=\"appointment\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </ax-title>\n <ax-subtitle>\n {{ appointment.originalStartDate | format: 'time' : { calendar: calendar() } | async }} -\n {{ appointment.originalEndDate | format: 'time' : { calendar: calendar() } | async }}\n </ax-subtitle>\n </div>\n }\n </div>\n <div aria-hidden=\"true\" class=\"ax-scheduler-day-slot\">\n @for (time of hoursArray(); track time.date.getTime()) {\n <div\n axDropZone\n #zone=\"axDropZone\"\n (onElementDrop)=\"handleSingleDayDrop($event, time)\"\n [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n (click)=\"handleSingleSlotEvent($event, time)\"\n (dblclick)=\"handleSingleSlotEvent($event, time)\"\n (contextmenu)=\"handleSingleSlotEvent($event, time)\"\n [attr.data-slot-id]=\"time.format('YYYYMMDD-HHmm')\"\n ></div>\n <div\n axDropZone\n #zone2=\"axDropZone\"\n [class.ax-scheduler-slot-hovered]=\"zone2.isHovered()\"\n (onElementDrop)=\"handleSingleDayDrop($event, time.add('minute', 30))\"\n (click)=\"handleSingleSlotEvent($event, time.add('minute', 30))\"\n (dblclick)=\"handleSingleSlotEvent($event, time.add('minute', 30))\"\n (contextmenu)=\"handleSingleSlotEvent($event, time.add('minute', 30))\"\n [attr.data-slot-id]=\"time.add('minute', 30).format('YYYYMMDD-HHmm')\"\n ></div>\n }\n </div>\n </div>\n</div>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid}}}@layer components{ax-scheduler-day-view{min-width:var(--ax-comp-scheduler-width);background-color:inherit;display:block;position:relative}ax-scheduler-day-view .ax-scheduler-day-header{z-index:10;border-style:var(--tw-border-style);border-width:1px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:var(--ax-comp-scheduler-all-day-bg,inherit);width:100%;display:flex;position:sticky;top:0}ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table{z-index:10;background-color:inherit;position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 0)}ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table div{height:var(--ax-comp-scheduler-basic-view-blocks-height);width:var(--ax-comp-scheduler-basic-view-blocks-width);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));justify-content:center;align-items:center;display:flex}ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table-container{width:100%;display:flex}ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table-container .ax-scheduler-day-header-appointment-container{gap:calc(var(--spacing,.25rem) * 4);width:calc(100% - 2.5rem);display:flex}ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table-container .ax-scheduler-day-header-appointment-container .ax-scheduler-header-day-appointment{border-radius:calc(var(--ax-sys-border-radius) / 2);width:100%;padding-inline:calc(var(--spacing,.25rem) * 2);flex-direction:column;justify-content:center;display:flex;overflow:hidden}ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table-container .ax-scheduler-day-header-appointment-container .ax-scheduler-day-header-more-tag{cursor:pointer;border-radius:var(--ax-sys-border-radius);padding-inline:calc(var(--spacing,.25rem) * 2);text-wrap:nowrap;flex-direction:column;justify-content:center;display:flex}ax-scheduler-day-view .ax-scheduler-day-time-container{background-color:inherit;width:100%;display:flex}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-time{z-index:15;background-color:var(--ax-comp-scheduler-all-day-bg,inherit);position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 0)}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-time div{height:calc(var(--ax-comp-scheduler-basic-view-blocks-height) * 2);width:var(--ax-comp-scheduler-basic-view-blocks-width);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));text-align:center;display:block;position:relative}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container{width:100%;position:relative}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container .ax-scheduler-day-appointment-container{width:calc(100% - 2.5rem);position:absolute;top:0}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container .ax-scheduler-day-appointment-container .ax-scheduler-day-appointment{border-radius:calc(var(--ax-sys-border-radius) / 2);width:100%;padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:var(--spacing,.25rem);flex-direction:column;display:flex;position:absolute;inset-inline-start:calc(var(--spacing,.25rem) * 0);overflow:hidden}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container .ax-scheduler-day-slot{width:100%}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container .ax-scheduler-day-slot div{height:var(--ax-comp-scheduler-basic-view-blocks-height);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding-inline:calc(var(--spacing,.25rem) * 2);display:block}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container .ax-scheduler-day-slot div:first-child{border-top-style:var(--tw-border-style);border-top-width:0}ax-scheduler-day-view:not(.ax-state-readonly) .ax-scheduler-header-day-appointment,ax-scheduler-day-view:not(.ax-state-readonly) .ax-scheduler-day-appointment{cursor:pointer}ax-scheduler-day-view:not(.ax-state-readonly) .ax-scheduler-day-header-table-container,ax-scheduler-day-view:not(.ax-state-readonly) .ax-scheduler-day-slot>div{cursor:pointer;transition-property:background-color;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}:is(ax-scheduler-day-view:not(.ax-state-readonly) .ax-scheduler-day-header-table-container,ax-scheduler-day-view:not(.ax-state-readonly) .ax-scheduler-day-slot>div):hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg,var(--ax-sys-color-primary-surface),.1))}ax-scheduler-day-view ax-title{justify-content:space-between;display:flex}ax-scheduler-day-view ax-title .ax-scheduler-action-icon{cursor:pointer;width:auto}ax-scheduler-day-view .ax-scheduler-current-time-line{height:calc(var(--spacing,.25rem) * .5);inset-inline:0}ax-scheduler-day-view .ax-scheduler-current-time-line:before{inset-inline-start:-6px;top:-5px}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */\n"] }]
|
|
1384
1403
|
}], propDecorators: { rtl: [{ type: i0.Input, args: [{ isSignal: true, alias: "rtl", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], hasActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasActions", required: false }] }], dragStartDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragStartDelay", required: false }] }], calendar: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendar", required: false }] }], date: [{ type: i0.Input, args: [{ isSignal: true, alias: "date", required: true }] }], endDayHour: [{ type: i0.Input, args: [{ isSignal: true, alias: "endDayHour", required: true }] }], startDayHour: [{ type: i0.Input, args: [{ isSignal: true, alias: "startDayHour", required: true }] }], showCurrentTimeIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCurrentTimeIndicator", required: false }] }], scrollToCurrentTimeIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollToCurrentTimeIndicator", required: false }] }], appointments: [{ type: i0.Input, args: [{ isSignal: true, alias: "appointments", required: false }] }], tooltipTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipTemplate", required: false }] }], selectedAppointmentId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedAppointmentId", required: false }] }], currentTimeLineElement: [{ type: i0.ViewChild, args: ['currentTimeLine', { isSignal: true }] }], slotClickedInternal: [{ type: i0.Output, args: ["slotClickedInternal"] }], slotDblClickedInternal: [{ type: i0.Output, args: ["slotDblClickedInternal"] }], slotRightClickedInternal: [{ type: i0.Output, args: ["slotRightClickedInternal"] }], appointmentClickedInternal: [{ type: i0.Output, args: ["appointmentClickedInternal"] }], appointmentDblClickedInternal: [{ type: i0.Output, args: ["appointmentDblClickedInternal"] }], appointmentRightClickedInternal: [{ type: i0.Output, args: ["appointmentRightClickedInternal"] }], onActionClickInternal: [{ type: i0.Output, args: ["onActionClickInternal"] }], onAppointmentDropInternal: [{ type: i0.Output, args: ["onAppointmentDropInternal"] }] } });
|
|
1385
1404
|
|
|
1386
1405
|
class AXSchedulerMonthViewComponent extends NXComponent {
|
|
@@ -1389,22 +1408,23 @@ class AXSchedulerMonthViewComponent extends NXComponent {
|
|
|
1389
1408
|
this.document = inject(DOCUMENT);
|
|
1390
1409
|
this.scheduler = inject(AXSchedulerComponent);
|
|
1391
1410
|
this.calendarService = inject(AXCalendarService);
|
|
1411
|
+
this.localeService = inject(AXLocaleService);
|
|
1392
1412
|
this.schedulerService = inject(AXSchedulerService);
|
|
1393
1413
|
// --- Inputs ---
|
|
1394
|
-
this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
|
|
1395
|
-
this.draggable = input(true, ...(ngDevMode ? [{ debugName: "draggable" }] : []));
|
|
1396
|
-
this.hasActions = input(false, ...(ngDevMode ? [{ debugName: "hasActions" }] : []));
|
|
1397
|
-
this.dragStartDelay = input(0, ...(ngDevMode ? [{ debugName: "dragStartDelay" }] : []));
|
|
1398
|
-
this.calendar = input(...(ngDevMode ? [undefined, { debugName: "calendar" }] : []));
|
|
1399
|
-
this.date = input.required(...(ngDevMode ? [{ debugName: "date" }] : []));
|
|
1400
|
-
this.appointments = input([], ...(ngDevMode ? [{ debugName: "appointments" }] : []));
|
|
1401
|
-
this.firstDayOfWeek = input(
|
|
1402
|
-
this.selectedAppointmentId = input(null, ...(ngDevMode ? [{ debugName: "selectedAppointmentId" }] : []));
|
|
1403
|
-
this.tooltipTemplate = input(...(ngDevMode ? [undefined, { debugName: "tooltipTemplate" }] : []));
|
|
1414
|
+
this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
1415
|
+
this.draggable = input(true, ...(ngDevMode ? [{ debugName: "draggable" }] : /* istanbul ignore next */ []));
|
|
1416
|
+
this.hasActions = input(false, ...(ngDevMode ? [{ debugName: "hasActions" }] : /* istanbul ignore next */ []));
|
|
1417
|
+
this.dragStartDelay = input(0, ...(ngDevMode ? [{ debugName: "dragStartDelay" }] : /* istanbul ignore next */ []));
|
|
1418
|
+
this.calendar = input(...(ngDevMode ? [undefined, { debugName: "calendar" }] : /* istanbul ignore next */ []));
|
|
1419
|
+
this.date = input.required(...(ngDevMode ? [{ debugName: "date" }] : /* istanbul ignore next */ []));
|
|
1420
|
+
this.appointments = input([], ...(ngDevMode ? [{ debugName: "appointments" }] : /* istanbul ignore next */ []));
|
|
1421
|
+
this.firstDayOfWeek = input(...(ngDevMode ? [undefined, { debugName: "firstDayOfWeek" }] : /* istanbul ignore next */ []));
|
|
1422
|
+
this.selectedAppointmentId = input(null, ...(ngDevMode ? [{ debugName: "selectedAppointmentId" }] : /* istanbul ignore next */ []));
|
|
1423
|
+
this.tooltipTemplate = input(...(ngDevMode ? [undefined, { debugName: "tooltipTemplate" }] : /* istanbul ignore next */ []));
|
|
1404
1424
|
// --- Constants ---
|
|
1405
1425
|
this.DAYS_IN_WEEK = 7;
|
|
1406
1426
|
this.MAX_VISIBLE_APPOINTMENTS_PER_DAY = 2;
|
|
1407
|
-
this.dragStartSlotId = signal(null, ...(ngDevMode ? [{ debugName: "dragStartSlotId" }] : []));
|
|
1427
|
+
this.dragStartSlotId = signal(null, ...(ngDevMode ? [{ debugName: "dragStartSlotId" }] : /* istanbul ignore next */ []));
|
|
1408
1428
|
// Internal outputs to be caught by parent AXSchedulerComponent
|
|
1409
1429
|
this.slotClickedInternal = output();
|
|
1410
1430
|
this.slotDblClickedInternal = output();
|
|
@@ -1432,34 +1452,28 @@ class AXSchedulerMonthViewComponent extends NXComponent {
|
|
|
1432
1452
|
this.monthStartDate = computed(() => {
|
|
1433
1453
|
const d = this.date();
|
|
1434
1454
|
return d ? d.startOf('month') : null;
|
|
1435
|
-
}, ...(ngDevMode ? [{ debugName: "monthStartDate" }] : []));
|
|
1455
|
+
}, ...(ngDevMode ? [{ debugName: "monthStartDate" }] : /* istanbul ignore next */ []));
|
|
1436
1456
|
// Generate the list of weekday names based on the firstDayOfWeek
|
|
1437
1457
|
this.daysArray = computed(() => {
|
|
1438
|
-
const
|
|
1439
|
-
const
|
|
1440
|
-
|
|
1441
|
-
|
|
1442
|
-
|
|
1443
|
-
|
|
1444
|
-
const daysToSubtract = (currentDayOfWeek - desiredFirstDayNumber + 7) % 7;
|
|
1445
|
-
let headerStartDate = currentDate.add('day', -daysToSubtract);
|
|
1446
|
-
for (let i = 0; i < 7; i++) {
|
|
1447
|
-
dayNames.push(headerStartDate);
|
|
1448
|
-
headerStartDate = headerStartDate.add('day', 1);
|
|
1449
|
-
}
|
|
1450
|
-
return dayNames;
|
|
1451
|
-
}, ...(ngDevMode ? [{ debugName: "daysArray" }] : []));
|
|
1458
|
+
const currentDate = this.date();
|
|
1459
|
+
const headerStartDate = this.schedulerService.alignToWeekStart(currentDate, {
|
|
1460
|
+
firstDayOfWeek: this.firstDayOfWeek(),
|
|
1461
|
+
});
|
|
1462
|
+
return Array.from({ length: 7 }, (_, index) => headerStartDate.add('day', index));
|
|
1463
|
+
}, ...(ngDevMode ? [{ debugName: "daysArray" }] : /* istanbul ignore next */ []));
|
|
1452
1464
|
// --- Calendar Grid Calculation ---
|
|
1453
1465
|
this.calendarDaysInfo = computed(() => {
|
|
1454
1466
|
const monthStart = this.monthStartDate();
|
|
1455
1467
|
if (!monthStart)
|
|
1456
1468
|
return { days: [], weeksNeeded: 0 };
|
|
1469
|
+
const locale = this.localeService.activeProfile().localeInfo.code;
|
|
1457
1470
|
const firstDayOfMonth = monthStart;
|
|
1458
1471
|
const lastDayOfMonth = monthStart.endOf('month');
|
|
1459
|
-
const
|
|
1460
|
-
|
|
1461
|
-
|
|
1462
|
-
const
|
|
1472
|
+
const firstDayOfGrid = this.schedulerService.alignToWeekStart(firstDayOfMonth, {
|
|
1473
|
+
firstDayOfWeek: this.firstDayOfWeek(),
|
|
1474
|
+
});
|
|
1475
|
+
const leadingDays = Math.round((firstDayOfMonth.startOf('day').date.getTime() - firstDayOfGrid.startOf('day').date.getTime()) /
|
|
1476
|
+
this.schedulerService.MILLISECONDS_PER_DAY);
|
|
1463
1477
|
// Determine how many total days to show to fill out the weeks
|
|
1464
1478
|
// A common approach is 6 weeks to ensure consistency, but your dynamic weeksNeeded is fine too.
|
|
1465
1479
|
// Let's stick to your dynamic `weeksNeeded` and `totalDaysToGenerate`
|
|
@@ -1474,14 +1488,18 @@ class AXSchedulerMonthViewComponent extends NXComponent {
|
|
|
1474
1488
|
for (let i = 0; i < totalDaysToGenerate; i++) {
|
|
1475
1489
|
const isHoliday = this.schedulerService.isHoliday(currentDay) || this.schedulerService.isWeekend(currentDay, this.calendar());
|
|
1476
1490
|
let holidayTitle = null;
|
|
1491
|
+
let holidayDescription = null;
|
|
1477
1492
|
let holidayCssClass = null;
|
|
1493
|
+
let holidayColor = null;
|
|
1478
1494
|
if (isHoliday) {
|
|
1479
1495
|
const globalHoliday = this.calendarService.holidays.find((d) => currentDay.equal(d.date, 'day'));
|
|
1480
1496
|
const internalHoliday = this.schedulerService.internalHoliday().find((d) => currentDay.equal(d.date, 'day'));
|
|
1481
1497
|
const holiday = globalHoliday || internalHoliday;
|
|
1482
1498
|
if (holiday) {
|
|
1483
|
-
holidayTitle = holiday.title;
|
|
1499
|
+
holidayTitle = resolveMultiLanguageString(holiday.title, locale) || null;
|
|
1500
|
+
holidayDescription = resolveMultiLanguageString(holiday.description ?? holiday.title, locale) || null;
|
|
1484
1501
|
holidayCssClass = holiday.cssClass;
|
|
1502
|
+
holidayColor = holiday.color ?? null;
|
|
1485
1503
|
}
|
|
1486
1504
|
}
|
|
1487
1505
|
days.push({
|
|
@@ -1490,12 +1508,14 @@ class AXSchedulerMonthViewComponent extends NXComponent {
|
|
|
1490
1508
|
isToday: currentDay.equal(today, 'day'),
|
|
1491
1509
|
isHoliday,
|
|
1492
1510
|
holidayTitle,
|
|
1511
|
+
holidayDescription,
|
|
1493
1512
|
holidayCssClass,
|
|
1513
|
+
holidayColor,
|
|
1494
1514
|
});
|
|
1495
1515
|
currentDay = currentDay.add('day', 1);
|
|
1496
1516
|
}
|
|
1497
1517
|
return { days: days, weeksNeeded: actualWeeksToShow };
|
|
1498
|
-
}, ...(ngDevMode ? [{ debugName: "calendarDaysInfo" }] : []));
|
|
1518
|
+
}, ...(ngDevMode ? [{ debugName: "calendarDaysInfo" }] : /* istanbul ignore next */ []));
|
|
1499
1519
|
// Calculate spanning appointments with their grid positions
|
|
1500
1520
|
this.spanningAppointments = computed(() => {
|
|
1501
1521
|
const { days } = this.calendarDaysInfo();
|
|
@@ -1593,12 +1613,12 @@ class AXSchedulerMonthViewComponent extends NXComponent {
|
|
|
1593
1613
|
});
|
|
1594
1614
|
}
|
|
1595
1615
|
return spanningResult;
|
|
1596
|
-
}, ...(ngDevMode ? [{ debugName: "spanningAppointments" }] : []));
|
|
1616
|
+
}, ...(ngDevMode ? [{ debugName: "spanningAppointments" }] : /* istanbul ignore next */ []));
|
|
1597
1617
|
// Get the set of multi-day appointment IDs for exclusion from per-day rendering
|
|
1598
1618
|
this.multiDayAppointmentIds = computed(() => {
|
|
1599
1619
|
const spanning = this.spanningAppointments();
|
|
1600
1620
|
return new Set(spanning.map((s) => s.appointment.id));
|
|
1601
|
-
}, ...(ngDevMode ? [{ debugName: "multiDayAppointmentIds" }] : []));
|
|
1621
|
+
}, ...(ngDevMode ? [{ debugName: "multiDayAppointmentIds" }] : /* istanbul ignore next */ []));
|
|
1602
1622
|
// --- Day Cell Layout Calculation ---
|
|
1603
1623
|
this.dayCellLayouts = computed(() => {
|
|
1604
1624
|
const { days: initialDaysInfo } = this.calendarDaysInfo();
|
|
@@ -1649,7 +1669,7 @@ class AXSchedulerMonthViewComponent extends NXComponent {
|
|
|
1649
1669
|
gridIndex,
|
|
1650
1670
|
};
|
|
1651
1671
|
});
|
|
1652
|
-
}, ...(ngDevMode ? [{ debugName: "dayCellLayouts" }] : []));
|
|
1672
|
+
}, ...(ngDevMode ? [{ debugName: "dayCellLayouts" }] : /* istanbul ignore next */ []));
|
|
1653
1673
|
// --- Dynamic Grid Rows ---
|
|
1654
1674
|
this.gridTemplateRowsStyle = computed(() => {
|
|
1655
1675
|
const { weeksNeeded } = this.calendarDaysInfo();
|
|
@@ -1657,7 +1677,7 @@ class AXSchedulerMonthViewComponent extends NXComponent {
|
|
|
1657
1677
|
return `repeat(6, minmax(0, 1fr))`; // Fallback, ensures grid is at least somewhat sensible
|
|
1658
1678
|
}
|
|
1659
1679
|
return `repeat(${weeksNeeded}, minmax(0, 1fr))`; // Use 1fr for equal distribution
|
|
1660
|
-
}, ...(ngDevMode ? [{ debugName: "gridTemplateRowsStyle" }] : []));
|
|
1680
|
+
}, ...(ngDevMode ? [{ debugName: "gridTemplateRowsStyle" }] : /* istanbul ignore next */ []));
|
|
1661
1681
|
// Group spanning appointments by their week row for proper rendering
|
|
1662
1682
|
this.spanningAppointmentsByWeekRow = computed(() => {
|
|
1663
1683
|
const spanning = this.spanningAppointments();
|
|
@@ -1699,12 +1719,12 @@ class AXSchedulerMonthViewComponent extends NXComponent {
|
|
|
1699
1719
|
}
|
|
1700
1720
|
}
|
|
1701
1721
|
return result;
|
|
1702
|
-
}, ...(ngDevMode ? [{ debugName: "spanningAppointmentsByWeekRow" }] : []));
|
|
1722
|
+
}, ...(ngDevMode ? [{ debugName: "spanningAppointmentsByWeekRow" }] : /* istanbul ignore next */ []));
|
|
1703
1723
|
// Get the number of week rows in the current month view
|
|
1704
1724
|
this.weekRowsArray = computed(() => {
|
|
1705
1725
|
const { weeksNeeded } = this.calendarDaysInfo();
|
|
1706
1726
|
return Array.from({ length: weeksNeeded }, (_, i) => i);
|
|
1707
|
-
}, ...(ngDevMode ? [{ debugName: "weekRowsArray" }] : []));
|
|
1727
|
+
}, ...(ngDevMode ? [{ debugName: "weekRowsArray" }] : /* istanbul ignore next */ []));
|
|
1708
1728
|
// Calculate the maximum row index (number of stacked spanning appointments - 1) for each week row
|
|
1709
1729
|
this.maxSpanningRowsPerWeek = computed(() => {
|
|
1710
1730
|
const byWeekRow = this.spanningAppointmentsByWeekRow();
|
|
@@ -1719,7 +1739,7 @@ class AXSchedulerMonthViewComponent extends NXComponent {
|
|
|
1719
1739
|
result.set(weekRowIndex, maxRowIndex + 1); // +1 to get count from 0-based index
|
|
1720
1740
|
}
|
|
1721
1741
|
return result;
|
|
1722
|
-
}, ...(ngDevMode ? [{ debugName: "maxSpanningRowsPerWeek" }] : []));
|
|
1742
|
+
}, ...(ngDevMode ? [{ debugName: "maxSpanningRowsPerWeek" }] : /* istanbul ignore next */ []));
|
|
1723
1743
|
}
|
|
1724
1744
|
isActive(appointmentId) {
|
|
1725
1745
|
return this.selectedAppointmentId() === appointmentId;
|
|
@@ -1802,10 +1822,10 @@ class AXSchedulerMonthViewComponent extends NXComponent {
|
|
|
1802
1822
|
const weekRowIndex = Math.floor(gridIndex / this.DAYS_IN_WEEK);
|
|
1803
1823
|
return this.maxSpanningRowsPerWeek().get(weekRowIndex) ?? 0;
|
|
1804
1824
|
}
|
|
1805
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
1806
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", 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 }, hasActions: { classPropertyName: "hasActions", publicName: "hasActions", isSignal: true, isRequired: false, transformFunction: null }, dragStartDelay: { classPropertyName: "dragStartDelay", publicName: "dragStartDelay", isSignal: true, isRequired: false, transformFunction: null }, calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: true, transformFunction: null }, appointments: { classPropertyName: "appointments", publicName: "appointments", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, selectedAppointmentId: { classPropertyName: "selectedAppointmentId", publicName: "selectedAppointmentId", isSignal: true, isRequired: false, transformFunction: null }, tooltipTemplate: { classPropertyName: "tooltipTemplate", publicName: "tooltipTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { slotClickedInternal: "slotClickedInternal", slotDblClickedInternal: "slotDblClickedInternal", slotRightClickedInternal: "slotRightClickedInternal", appointmentClickedInternal: "appointmentClickedInternal", appointmentDblClickedInternal: "appointmentDblClickedInternal", appointmentRightClickedInternal: "appointmentRightClickedInternal", onActionClickInternal: "onActionClickInternal", onAppointmentDropInternal: "onAppointmentDropInternal" }, host: { properties: { "class.ax-state-readonly": "readonly()" } }, 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 Wrapper -->\n <div class=\"ax-scheduler-month-grid-wrapper\">\n <!-- Spanning Appointments Layer -->\n <div class=\"ax-scheduler-month-spanning-layer\" [style.gridTemplateRows]=\"gridTemplateRowsStyle()\">\n @for (weekRowIndex of weekRowsArray(); track weekRowIndex) {\n <div class=\"ax-scheduler-month-spanning-week-row\">\n @for (\n spanning of getSpanningAppointmentsForWeekRow(weekRowIndex);\n track spanning.appointment.id + spanning.gridStartIndex\n ) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"spanning.appointment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || spanning.appointment.readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, spanning.appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, spanning.appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, spanning.appointment)\"\n [title]=\"\n tooltipTemplate()\n ? ''\n : spanning.appointment.title +\n ' (' +\n (spanning.appointment.startDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ' - ' +\n (spanning.appointment.endDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ')'\n \"\n class=\"ax-scheduler-month-spanning-appointment\"\n [class.ax-spanning-start-clipped]=\"spanning.isStartClipped\"\n [class.ax-spanning-end-clipped]=\"spanning.isEndClipped\"\n [class.ax-state-active]=\"isActive(spanning.appointment.id)\"\n [class]=\"\n spanning.appointment.cssClass ??\n 'ax-scheduler-' + (spanning.appointment.priority ?? 'primary') + '-priority'\n \"\n [style.grid-column]=\"(spanning.gridStartIndex % 7) + 1 + ' / span ' + spanning.spanCount\"\n [style.grid-row]=\"spanning.rowIndex + 1\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n [axTooltipContext]=\"spanning.appointment\"\n >\n <span class=\"ax-spanning-appointment-title\">\n <span class=\"ax-scheduler-truncate\">{{ spanning.appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, spanning.appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </span>\n </div>\n }\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 dayCell.isHoliday ? (dayCell.holidayCssClass ?? 'ax-state-holiday') : ''\n }}\"\n [class.ax-state-today]=\"dayCell.isToday\"\n [class.ax-other-month]=\"!dayCell.isCurrentMonth\"\n [attr.data-slot-id]=\"dayCell.date.format('YYYYMMDD')\"\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\n class=\"ax-scheduler-month-day-appointments\"\n [style.--spanning-rows-count]=\"getSpanningRowsCountForDayCell(dayCell.gridIndex)\"\n >\n <!-- Visible Single-day Appointment Segments -->\n @for (segment of dayCell.visibleAppointments; track segment.id + segment.originalStartDate) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"segment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || segment.readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, segment)\"\n (dblclick)=\"handleAppointmentEvent($event, segment)\"\n (contextmenu)=\"handleAppointmentEvent($event, segment)\"\n [title]=\"\n tooltipTemplate()\n ? ''\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.all-day-segment]=\"segment.allDay\"\n class=\"ax-scheduler-month-appointment-chip\"\n [class.ax-state-active]=\"isActive(segment.id)\"\n [class]=\"segment.cssClass ?? 'ax-scheduler-' + (segment.priority ?? 'primary') + '-priority'\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n [axTooltipContext]=\"segment\"\n >\n <span class=\"ax-appointment-chip-title\">\n <span class=\"ax-scheduler-truncate\">{{ segment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, segment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </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 +{{\n '@acorex:common.general.more-items' | translate: { params: { number: dayCell.overflowCount } } | async\n }}\n </div>\n <ax-popover [target]=\"moreAppointments\" placement=\"bottom-start\" trigger=\"click\">\n <div\n axDropZone\n [class.ax-state-readonly]=\"readonly()\"\n class=\"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 [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\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 tooltipTemplate()\n ? ''\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 [class.ax-state-active]=\"isActive(segment.id)\"\n [class]=\"segment.cssClass ?? 'ax-scheduler-' + (segment.priority ?? 'primary') + '-priority'\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n [axTooltipContext]=\"segment\"\n >\n <span class=\"ax-appointment-chip-title\">\n <span class=\"ax-scheduler-truncate\">{{ segment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, segment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </span>\n @if (!segment.allDay) {\n <span>\n {{\n segment.originalStartDate\n | format: 'time' : { format: 'HH:mm', calendar: calendar() }\n | 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</div>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-font-weight:initial}}}@layer components{ax-scheduler-month-view{height:100%;min-width:var(--ax-comp-scheduler-width);background-color:inherit;display:block}ax-scheduler-month-view .ax-scheduler-month-container{background-color:inherit;flex-direction:column;height:100%;display:flex}ax-scheduler-month-view .ax-scheduler-month-container .ax-scheduler-month-grid-wrapper{height:100%}ax-scheduler-month-view .ax-scheduler-month-weekdays{top:calc(var(--spacing,.25rem) * 0);z-index:10;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:var(--ax-comp-scheduler-all-day-bg,inherit);width:100%;padding-inline:calc(var(--spacing,.25rem) * 0);padding-block:calc(var(--spacing,.25rem) * 2);text-align:center;flex-shrink:0;grid-template-columns:repeat(7,minmax(0,1fr));display:grid;position:sticky}ax-scheduler-month-view .ax-scheduler-month-weekdays .ax-scheduler-month-weekday{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-scheduler-month-view .ax-scheduler-month-grid{border-inline-start-style:var(--tw-border-style);border-inline-start-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));flex-grow:1;grid-template-columns:repeat(7,minmax(0,1fr));grid-auto-rows:minmax(5rem,auto);width:100%;height:100%;display:grid}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell{border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding:calc(var(--spacing,.25rem) * 1);position:relative;overflow:hidden}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))}@supports (color:color-mix(in lab,red,red)){ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-other-month{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-border-lightest-surface)) 20%,transparent)}}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))}@supports (color:color-mix(in lab,red,red)){ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-other-month .ax-scheduler-month-day-number{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 50%,transparent)}}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))}@supports (color:color-mix(in lab,red,red)){ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-state-today{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 5%,transparent)}}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-state-today .ax-scheduler-month-day-number{--tw-font-weight:var(--font-weight-bold,700);font-weight:var(--font-weight-bold,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))}@supports (color:color-mix(in lab,red,red)){ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-state-today.ax-other-month{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 2.5%,transparent)}}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))}@supports (color:color-mix(in lab,red,red)){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:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 50%,transparent)}}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-state-holiday .ax-scheduler-month-day-number{--tw-font-weight:var(--font-weight-bold,700);font-weight:var(--font-weight-bold,700);color:rgba(var(--ax-sys-color-danger-600))}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-600))}@supports (color:color-mix(in lab,red,red)){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:color-mix(in oklab,rgba(var(--ax-sys-color-danger-600)) 50%,transparent)}}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-header{margin-bottom:calc(var(--spacing,.25rem) * 1);text-align:center}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:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));display:inline-block}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments{gap:calc(var(--spacing,.25rem) * .5);flex-direction:column;display:flex;overflow:hidden}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments .ax-scheduler-month-appointment-chip{text-overflow:ellipsis;white-space:nowrap;border-radius:var(--radius-sm,.25rem);padding-inline:calc(var(--spacing,.25rem) * 1);padding-block:calc(var(--spacing,.25rem) * .5);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));overflow:hidden}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments .ax-scheduler-month-overflow-badge{margin-top:calc(var(--spacing,.25rem) * .5);cursor:pointer;padding-inline:calc(var(--spacing,.25rem) * 0);padding-block:calc(var(--spacing,.25rem) * .5);text-align:start;font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)))}@media(hover:hover){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-line: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-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}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)}ax-scheduler-month-view .ax-appointment-chip-title{justify-content:space-between;display:flex}ax-scheduler-month-view .ax-appointment-chip-title .ax-scheduler-action-icon{cursor:pointer;width:auto}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["axDrag", "dragData", "dragDisabled", "dragTransition", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragClonedTemplate", "dragCursor", "dragBoundary", "dragTransitionDuration"], outputs: ["dragPositionChanged"] }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "directive", type: AXDropZoneDirective, selector: "[axDropZone]", inputs: ["dropZoneGroup"], outputs: ["onElementDrop", "onElementHover"], exportAs: ["axDropZone"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXFormatPipe, name: "format" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1825
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXSchedulerMonthViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1826
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXSchedulerMonthViewComponent, isStandalone: true, selector: "ax-scheduler-month-view", inputs: { readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, hasActions: { classPropertyName: "hasActions", publicName: "hasActions", isSignal: true, isRequired: false, transformFunction: null }, dragStartDelay: { classPropertyName: "dragStartDelay", publicName: "dragStartDelay", isSignal: true, isRequired: false, transformFunction: null }, calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: true, transformFunction: null }, appointments: { classPropertyName: "appointments", publicName: "appointments", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, selectedAppointmentId: { classPropertyName: "selectedAppointmentId", publicName: "selectedAppointmentId", isSignal: true, isRequired: false, transformFunction: null }, tooltipTemplate: { classPropertyName: "tooltipTemplate", publicName: "tooltipTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { slotClickedInternal: "slotClickedInternal", slotDblClickedInternal: "slotDblClickedInternal", slotRightClickedInternal: "slotRightClickedInternal", appointmentClickedInternal: "appointmentClickedInternal", appointmentDblClickedInternal: "appointmentDblClickedInternal", appointmentRightClickedInternal: "appointmentRightClickedInternal", onActionClickInternal: "onActionClickInternal", onAppointmentDropInternal: "onAppointmentDropInternal" }, host: { properties: { "class.ax-state-readonly": "readonly()" } }, 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 Wrapper -->\n <div class=\"ax-scheduler-month-grid-wrapper\">\n <!-- Spanning Appointments Layer -->\n <div class=\"ax-scheduler-month-spanning-layer\" [style.gridTemplateRows]=\"gridTemplateRowsStyle()\">\n @for (weekRowIndex of weekRowsArray(); track weekRowIndex) {\n <div class=\"ax-scheduler-month-spanning-week-row\">\n @for (\n spanning of getSpanningAppointmentsForWeekRow(weekRowIndex);\n track spanning.appointment.id + spanning.gridStartIndex\n ) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"spanning.appointment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || spanning.appointment.readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, spanning.appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, spanning.appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, spanning.appointment)\"\n [title]=\"\n tooltipTemplate()\n ? ''\n : spanning.appointment.title +\n ' (' +\n (spanning.appointment.startDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ' - ' +\n (spanning.appointment.endDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ')'\n \"\n class=\"ax-scheduler-month-spanning-appointment\"\n [class.ax-spanning-start-clipped]=\"spanning.isStartClipped\"\n [class.ax-spanning-end-clipped]=\"spanning.isEndClipped\"\n [class.ax-state-active]=\"isActive(spanning.appointment.id)\"\n [class]=\"\n spanning.appointment.cssClass ??\n 'ax-scheduler-' + (spanning.appointment.priority ?? 'primary') + '-priority'\n \"\n [style.grid-column]=\"(spanning.gridStartIndex % 7) + 1 + ' / span ' + spanning.spanCount\"\n [style.grid-row]=\"spanning.rowIndex + 1\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n [axTooltipContext]=\"spanning.appointment\"\n >\n <span class=\"ax-spanning-appointment-title\">\n <span class=\"ax-scheduler-truncate\">{{ spanning.appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, spanning.appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </span>\n </div>\n }\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 dayCell.isHoliday ? (dayCell.holidayCssClass ?? 'ax-state-holiday') : ''\n }}\"\n [style.--ax-scheduler-holiday-color]=\"dayCell.holidayColor ?? null\"\n [class.ax-state-today]=\"dayCell.isToday\"\n [class.ax-other-month]=\"!dayCell.isCurrentMonth\"\n [attr.data-slot-id]=\"dayCell.date.format('YYYYMMDD')\"\n >\n <div class=\"ax-scheduler-month-day-header\">\n <span class=\"ax-scheduler-month-day-number ax-scheduler-truncate\" [axTooltip]=\"dayCell.holidayDescription ?? ''\">\n {{ dayCell.date.dayOfMonth }}\n\n @if (dayCell.holidayTitle) {\n ( {{ dayCell.holidayTitle }} )\n }\n </span>\n </div>\n <div\n class=\"ax-scheduler-month-day-appointments\"\n [style.--spanning-rows-count]=\"getSpanningRowsCountForDayCell(dayCell.gridIndex)\"\n >\n <!-- Visible Single-day Appointment Segments -->\n @for (segment of dayCell.visibleAppointments; track segment.id + segment.originalStartDate) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"segment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || segment.readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, segment)\"\n (dblclick)=\"handleAppointmentEvent($event, segment)\"\n (contextmenu)=\"handleAppointmentEvent($event, segment)\"\n [title]=\"\n tooltipTemplate()\n ? ''\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.all-day-segment]=\"segment.allDay\"\n class=\"ax-scheduler-month-appointment-chip\"\n [class.ax-state-active]=\"isActive(segment.id)\"\n [class]=\"segment.cssClass ?? 'ax-scheduler-' + (segment.priority ?? 'primary') + '-priority'\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n [axTooltipContext]=\"segment\"\n >\n <span class=\"ax-appointment-chip-title\">\n <span class=\"ax-scheduler-truncate\">{{ segment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, segment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </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 +{{\n '@acorex:common.general.more-items' | translate: { params: { number: dayCell.overflowCount } } | async\n }}\n </div>\n <ax-popover [target]=\"moreAppointments\" placement=\"bottom-start\" trigger=\"click\">\n <div\n axDropZone\n [class.ax-state-readonly]=\"readonly()\"\n class=\"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 [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\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 tooltipTemplate()\n ? ''\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 [class.ax-state-active]=\"isActive(segment.id)\"\n [class]=\"segment.cssClass ?? 'ax-scheduler-' + (segment.priority ?? 'primary') + '-priority'\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n [axTooltipContext]=\"segment\"\n >\n <span class=\"ax-appointment-chip-title\">\n <span class=\"ax-scheduler-truncate\">{{ segment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, segment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </span>\n @if (!segment.allDay) {\n <span>\n {{\n segment.originalStartDate\n | format: 'time' : { format: 'HH:mm', calendar: calendar() }\n | 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</div>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-font-weight:initial}}}@layer components{ax-scheduler-month-view{--ax-scheduler-month-spanning-row-height:1.25rem;--ax-scheduler-month-spanning-row-gap:.25rem;height:100%;min-width:var(--ax-comp-scheduler-width);background-color:inherit;display:block}ax-scheduler-month-view .ax-scheduler-month-container{background-color:inherit;flex-direction:column;height:100%;display:flex}ax-scheduler-month-view .ax-scheduler-month-weekdays{z-index:10;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:var(--ax-comp-scheduler-all-day-bg,inherit);width:100%;padding-inline:0;padding-block:calc(var(--spacing,.25rem) * 2);text-align:center;flex-shrink:0;grid-template-columns:repeat(7,minmax(0,1fr));display:grid;position:sticky;top:0}ax-scheduler-month-view .ax-scheduler-month-weekdays .ax-scheduler-month-weekday{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-scheduler-month-view .ax-scheduler-month-grid-wrapper{flex-grow:1;display:grid;position:relative}ax-scheduler-month-view .ax-scheduler-month-spanning-layer{pointer-events:none;z-index:5;border-inline-start:1px solid #0000;grid-template-columns:1fr;grid-auto-rows:minmax(5rem,auto);width:100%;display:grid;position:absolute;top:0;right:0;bottom:0;left:0}ax-scheduler-month-view .ax-scheduler-month-spanning-layer .ax-scheduler-month-spanning-week-row{padding-top:calc(var(--spacing,.25rem) * 6);align-content:flex-start;row-gap:var(--ax-scheduler-month-spanning-row-gap);grid-auto-rows:var(--ax-scheduler-month-spanning-row-height);grid-template-columns:repeat(7,minmax(0,1fr));display:grid;position:relative}ax-scheduler-month-view .ax-scheduler-month-spanning-layer .ax-scheduler-month-spanning-week-row .ax-scheduler-month-spanning-appointment{z-index:6;cursor:pointer;text-overflow:ellipsis;border-radius:var(--radius-sm,.25rem);padding-inline:var(--spacing,.25rem);padding-block:calc(var(--spacing,.25rem) * .5);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));white-space:nowrap;pointer-events:auto;margin-inline:.125rem;overflow:hidden}ax-scheduler-month-view .ax-scheduler-month-spanning-layer .ax-scheduler-month-spanning-week-row .ax-scheduler-month-spanning-appointment .ax-spanning-appointment-title{height:100%;padding-inline:calc(var(--spacing,.25rem) * 2);justify-content:space-between;align-items:center;display:flex}ax-scheduler-month-view .ax-scheduler-month-spanning-layer .ax-scheduler-month-spanning-week-row .ax-scheduler-month-spanning-appointment .ax-spanning-appointment-title .ax-scheduler-truncate{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}ax-scheduler-month-view .ax-scheduler-month-spanning-layer .ax-scheduler-month-spanning-week-row .ax-scheduler-month-spanning-appointment .ax-spanning-appointment-title .ax-scheduler-action-icon{cursor:pointer;width:auto;flex-shrink:0;margin-inline-start:var(--spacing,.25rem)}ax-scheduler-month-view .ax-scheduler-month-spanning-layer .ax-scheduler-month-spanning-week-row .ax-scheduler-month-spanning-appointment.ax-spanning-start-clipped{border-start-start-radius:0;border-end-start-radius:0;margin-inline-start:0;position:relative}ax-scheduler-month-view .ax-scheduler-month-spanning-layer .ax-scheduler-month-spanning-week-row .ax-scheduler-month-spanning-appointment.ax-spanning-start-clipped:before{content:\"\\2190 \";top:calc(var(--spacing,.25rem) * .5);opacity:.7;font-size:.65rem;position:absolute;inset-inline-start:0}ax-scheduler-month-view .ax-scheduler-month-spanning-layer .ax-scheduler-month-spanning-week-row .ax-scheduler-month-spanning-appointment.ax-spanning-end-clipped{border-start-end-radius:0;border-end-end-radius:0;margin-inline-end:0;position:relative}ax-scheduler-month-view .ax-scheduler-month-spanning-layer .ax-scheduler-month-spanning-week-row .ax-scheduler-month-spanning-appointment.ax-spanning-end-clipped:after{content:\" \\2192\";top:calc(var(--spacing,.25rem) * .5);opacity:.7;font-size:.65rem;position:absolute;inset-inline-end:0}ax-scheduler-month-view .ax-scheduler-month-grid{z-index:1;border-inline-start-style:var(--tw-border-style);border-inline-start-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));grid-template-columns:repeat(7,minmax(0,1fr));grid-auto-rows:minmax(5rem,auto);width:100%;display:grid;position:relative}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell{border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding:var(--spacing,.25rem);position:relative;overflow:hidden}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))}@supports (color:color-mix(in lab,red,red)){ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-other-month{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-border-lightest-surface)) 20%,transparent)}}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))}@supports (color:color-mix(in lab,red,red)){ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-other-month .ax-scheduler-month-day-number{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 50%,transparent)}}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))}@supports (color:color-mix(in lab,red,red)){ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-state-today{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 5%,transparent)}}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-state-today .ax-scheduler-month-day-number{--tw-font-weight:var(--font-weight-bold,700);font-weight:var(--font-weight-bold,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))}@supports (color:color-mix(in lab,red,red)){ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-state-today.ax-other-month{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 2.5%,transparent)}}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))}@supports (color:color-mix(in lab,red,red)){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:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 50%,transparent)}}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-state-holiday .ax-scheduler-month-day-number{color:var(--ax-scheduler-holiday-color,rgba(var(--ax-sys-color-danger-surface)));--tw-font-weight:var(--font-weight-bold,700);font-weight:var(--font-weight-bold,700)}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:var(--ax-scheduler-holiday-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{margin-bottom:var(--spacing,.25rem);text-align:center}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:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));display:inline-block}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments{gap:calc(var(--spacing,.25rem) * .5);padding-top:max(0rem,calc(var(--spanning-rows-count,0) * (var(--ax-scheduler-month-spanning-row-height) + var(--ax-scheduler-month-spanning-row-gap)) - var(--ax-scheduler-month-spanning-row-gap)));flex-direction:column;display:flex;overflow:hidden}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments .ax-scheduler-month-appointment-chip{text-overflow:ellipsis;white-space:nowrap;border-radius:var(--radius-sm,.25rem);padding-inline:var(--spacing,.25rem);padding-block:calc(var(--spacing,.25rem) * .5);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));overflow:hidden}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments .ax-scheduler-month-overflow-badge{margin-top:calc(var(--spacing,.25rem) * .5);cursor:pointer;padding-inline:0;padding-block:calc(var(--spacing,.25rem) * .5);text-align:start;font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)))}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-line:underline}ax-scheduler-month-view:not(.ax-state-readonly) .ax-scheduler-month-appointment-chip,ax-scheduler-month-view:not(.ax-state-readonly) .ax-scheduler-month-spanning-appointment{cursor:pointer}ax-scheduler-month-view:not(.ax-state-readonly) .ax-scheduler-month-day-cell{cursor:pointer;transition-property:background-color;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));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)}ax-scheduler-month-view .ax-appointment-chip-title{justify-content:space-between;display:flex}ax-scheduler-month-view .ax-appointment-chip-title .ax-scheduler-action-icon{cursor:pointer;width:auto}ax-scheduler.ax-rtl ax-scheduler-month-view .ax-scheduler-month-spanning-appointment.ax-spanning-start-clipped:before{content:\"\\2192 \"}ax-scheduler.ax-rtl ax-scheduler-month-view .ax-scheduler-month-spanning-appointment.ax-spanning-end-clipped:after{content:\" \\2190\"}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["axDrag", "dragData", "dragDisabled", "dragTransition", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragClonedTemplate", "dragCursor", "dragBoundary", "dragTransitionDuration"], outputs: ["dragPositionChanged"] }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "directive", type: AXDropZoneDirective, selector: "[axDropZone]", inputs: ["dropZoneGroup"], outputs: ["onElementDrop", "onElementHover"], exportAs: ["axDropZone"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXFormatPipe, name: "format" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1807
1827
|
}
|
|
1808
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
1828
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXSchedulerMonthViewComponent, decorators: [{
|
|
1809
1829
|
type: Component,
|
|
1810
1830
|
args: [{ selector: 'ax-scheduler-month-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
1811
1831
|
'[class.ax-state-readonly]': 'readonly()',
|
|
@@ -1818,7 +1838,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
|
|
|
1818
1838
|
AXTooltipDirective,
|
|
1819
1839
|
AXDropZoneDirective,
|
|
1820
1840
|
AXDecoratorIconComponent,
|
|
1821
|
-
], 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 Wrapper -->\n <div class=\"ax-scheduler-month-grid-wrapper\">\n <!-- Spanning Appointments Layer -->\n <div class=\"ax-scheduler-month-spanning-layer\" [style.gridTemplateRows]=\"gridTemplateRowsStyle()\">\n @for (weekRowIndex of weekRowsArray(); track weekRowIndex) {\n <div class=\"ax-scheduler-month-spanning-week-row\">\n @for (\n spanning of getSpanningAppointmentsForWeekRow(weekRowIndex);\n track spanning.appointment.id + spanning.gridStartIndex\n ) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"spanning.appointment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || spanning.appointment.readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, spanning.appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, spanning.appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, spanning.appointment)\"\n [title]=\"\n tooltipTemplate()\n ? ''\n : spanning.appointment.title +\n ' (' +\n (spanning.appointment.startDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ' - ' +\n (spanning.appointment.endDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ')'\n \"\n class=\"ax-scheduler-month-spanning-appointment\"\n [class.ax-spanning-start-clipped]=\"spanning.isStartClipped\"\n [class.ax-spanning-end-clipped]=\"spanning.isEndClipped\"\n [class.ax-state-active]=\"isActive(spanning.appointment.id)\"\n [class]=\"\n spanning.appointment.cssClass ??\n 'ax-scheduler-' + (spanning.appointment.priority ?? 'primary') + '-priority'\n \"\n [style.grid-column]=\"(spanning.gridStartIndex % 7) + 1 + ' / span ' + spanning.spanCount\"\n [style.grid-row]=\"spanning.rowIndex + 1\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n [axTooltipContext]=\"spanning.appointment\"\n >\n <span class=\"ax-spanning-appointment-title\">\n <span class=\"ax-scheduler-truncate\">{{ spanning.appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, spanning.appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </span>\n </div>\n }\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 dayCell.isHoliday ? (dayCell.holidayCssClass ?? 'ax-state-holiday') : ''\n }}\"\n [class.ax-state-today]=\"dayCell.isToday\"\n [class.ax-other-month]=\"!dayCell.isCurrentMonth\"\n [attr.data-slot-id]=\"dayCell.date.format('YYYYMMDD')\"\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\n class=\"ax-scheduler-month-day-appointments\"\n [style.--spanning-rows-count]=\"getSpanningRowsCountForDayCell(dayCell.gridIndex)\"\n >\n <!-- Visible Single-day Appointment Segments -->\n @for (segment of dayCell.visibleAppointments; track segment.id + segment.originalStartDate) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"segment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || segment.readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, segment)\"\n (dblclick)=\"handleAppointmentEvent($event, segment)\"\n (contextmenu)=\"handleAppointmentEvent($event, segment)\"\n [title]=\"\n tooltipTemplate()\n ? ''\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.all-day-segment]=\"segment.allDay\"\n class=\"ax-scheduler-month-appointment-chip\"\n [class.ax-state-active]=\"isActive(segment.id)\"\n [class]=\"segment.cssClass ?? 'ax-scheduler-' + (segment.priority ?? 'primary') + '-priority'\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n [axTooltipContext]=\"segment\"\n >\n <span class=\"ax-appointment-chip-title\">\n <span class=\"ax-scheduler-truncate\">{{ segment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, segment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </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 +{{\n '@acorex:common.general.more-items' | translate: { params: { number: dayCell.overflowCount } } | async\n }}\n </div>\n <ax-popover [target]=\"moreAppointments\" placement=\"bottom-start\" trigger=\"click\">\n <div\n axDropZone\n [class.ax-state-readonly]=\"readonly()\"\n class=\"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 [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\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 tooltipTemplate()\n ? ''\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 [class.ax-state-active]=\"isActive(segment.id)\"\n [class]=\"segment.cssClass ?? 'ax-scheduler-' + (segment.priority ?? 'primary') + '-priority'\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n [axTooltipContext]=\"segment\"\n >\n <span class=\"ax-appointment-chip-title\">\n <span class=\"ax-scheduler-truncate\">{{ segment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, segment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </span>\n @if (!segment.allDay) {\n <span>\n {{\n segment.originalStartDate\n | format: 'time' : { format: 'HH:mm', calendar: calendar() }\n | 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</div>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-font-weight:initial}}}@layer components{ax-scheduler-month-view{height:100%;min-width:var(--ax-comp-scheduler-width);background-color:inherit;display:block}ax-scheduler-month-view .ax-scheduler-month-container{background-color:inherit;flex-direction:column;height:100%;display:flex}ax-scheduler-month-view .ax-scheduler-month-container .ax-scheduler-month-grid-wrapper{height:100%}ax-scheduler-month-view .ax-scheduler-month-weekdays{top:calc(var(--spacing,.25rem) * 0);z-index:10;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:var(--ax-comp-scheduler-all-day-bg,inherit);width:100%;padding-inline:calc(var(--spacing,.25rem) * 0);padding-block:calc(var(--spacing,.25rem) * 2);text-align:center;flex-shrink:0;grid-template-columns:repeat(7,minmax(0,1fr));display:grid;position:sticky}ax-scheduler-month-view .ax-scheduler-month-weekdays .ax-scheduler-month-weekday{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-scheduler-month-view .ax-scheduler-month-grid{border-inline-start-style:var(--tw-border-style);border-inline-start-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));flex-grow:1;grid-template-columns:repeat(7,minmax(0,1fr));grid-auto-rows:minmax(5rem,auto);width:100%;height:100%;display:grid}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell{border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding:calc(var(--spacing,.25rem) * 1);position:relative;overflow:hidden}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))}@supports (color:color-mix(in lab,red,red)){ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-other-month{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-border-lightest-surface)) 20%,transparent)}}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))}@supports (color:color-mix(in lab,red,red)){ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-other-month .ax-scheduler-month-day-number{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 50%,transparent)}}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))}@supports (color:color-mix(in lab,red,red)){ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-state-today{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 5%,transparent)}}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-state-today .ax-scheduler-month-day-number{--tw-font-weight:var(--font-weight-bold,700);font-weight:var(--font-weight-bold,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))}@supports (color:color-mix(in lab,red,red)){ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-state-today.ax-other-month{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 2.5%,transparent)}}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))}@supports (color:color-mix(in lab,red,red)){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:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 50%,transparent)}}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-state-holiday .ax-scheduler-month-day-number{--tw-font-weight:var(--font-weight-bold,700);font-weight:var(--font-weight-bold,700);color:rgba(var(--ax-sys-color-danger-600))}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-600))}@supports (color:color-mix(in lab,red,red)){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:color-mix(in oklab,rgba(var(--ax-sys-color-danger-600)) 50%,transparent)}}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-header{margin-bottom:calc(var(--spacing,.25rem) * 1);text-align:center}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:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));display:inline-block}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments{gap:calc(var(--spacing,.25rem) * .5);flex-direction:column;display:flex;overflow:hidden}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments .ax-scheduler-month-appointment-chip{text-overflow:ellipsis;white-space:nowrap;border-radius:var(--radius-sm,.25rem);padding-inline:calc(var(--spacing,.25rem) * 1);padding-block:calc(var(--spacing,.25rem) * .5);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));overflow:hidden}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments .ax-scheduler-month-overflow-badge{margin-top:calc(var(--spacing,.25rem) * .5);cursor:pointer;padding-inline:calc(var(--spacing,.25rem) * 0);padding-block:calc(var(--spacing,.25rem) * .5);text-align:start;font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)))}@media(hover:hover){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-line: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-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}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)}ax-scheduler-month-view .ax-appointment-chip-title{justify-content:space-between;display:flex}ax-scheduler-month-view .ax-appointment-chip-title .ax-scheduler-action-icon{cursor:pointer;width:auto}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"] }]
|
|
1841
|
+
], 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 Wrapper -->\n <div class=\"ax-scheduler-month-grid-wrapper\">\n <!-- Spanning Appointments Layer -->\n <div class=\"ax-scheduler-month-spanning-layer\" [style.gridTemplateRows]=\"gridTemplateRowsStyle()\">\n @for (weekRowIndex of weekRowsArray(); track weekRowIndex) {\n <div class=\"ax-scheduler-month-spanning-week-row\">\n @for (\n spanning of getSpanningAppointmentsForWeekRow(weekRowIndex);\n track spanning.appointment.id + spanning.gridStartIndex\n ) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"spanning.appointment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || spanning.appointment.readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, spanning.appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, spanning.appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, spanning.appointment)\"\n [title]=\"\n tooltipTemplate()\n ? ''\n : spanning.appointment.title +\n ' (' +\n (spanning.appointment.startDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ' - ' +\n (spanning.appointment.endDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ')'\n \"\n class=\"ax-scheduler-month-spanning-appointment\"\n [class.ax-spanning-start-clipped]=\"spanning.isStartClipped\"\n [class.ax-spanning-end-clipped]=\"spanning.isEndClipped\"\n [class.ax-state-active]=\"isActive(spanning.appointment.id)\"\n [class]=\"\n spanning.appointment.cssClass ??\n 'ax-scheduler-' + (spanning.appointment.priority ?? 'primary') + '-priority'\n \"\n [style.grid-column]=\"(spanning.gridStartIndex % 7) + 1 + ' / span ' + spanning.spanCount\"\n [style.grid-row]=\"spanning.rowIndex + 1\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n [axTooltipContext]=\"spanning.appointment\"\n >\n <span class=\"ax-spanning-appointment-title\">\n <span class=\"ax-scheduler-truncate\">{{ spanning.appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, spanning.appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </span>\n </div>\n }\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 dayCell.isHoliday ? (dayCell.holidayCssClass ?? 'ax-state-holiday') : ''\n }}\"\n [style.--ax-scheduler-holiday-color]=\"dayCell.holidayColor ?? null\"\n [class.ax-state-today]=\"dayCell.isToday\"\n [class.ax-other-month]=\"!dayCell.isCurrentMonth\"\n [attr.data-slot-id]=\"dayCell.date.format('YYYYMMDD')\"\n >\n <div class=\"ax-scheduler-month-day-header\">\n <span class=\"ax-scheduler-month-day-number ax-scheduler-truncate\" [axTooltip]=\"dayCell.holidayDescription ?? ''\">\n {{ dayCell.date.dayOfMonth }}\n\n @if (dayCell.holidayTitle) {\n ( {{ dayCell.holidayTitle }} )\n }\n </span>\n </div>\n <div\n class=\"ax-scheduler-month-day-appointments\"\n [style.--spanning-rows-count]=\"getSpanningRowsCountForDayCell(dayCell.gridIndex)\"\n >\n <!-- Visible Single-day Appointment Segments -->\n @for (segment of dayCell.visibleAppointments; track segment.id + segment.originalStartDate) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"segment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || segment.readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, segment)\"\n (dblclick)=\"handleAppointmentEvent($event, segment)\"\n (contextmenu)=\"handleAppointmentEvent($event, segment)\"\n [title]=\"\n tooltipTemplate()\n ? ''\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.all-day-segment]=\"segment.allDay\"\n class=\"ax-scheduler-month-appointment-chip\"\n [class.ax-state-active]=\"isActive(segment.id)\"\n [class]=\"segment.cssClass ?? 'ax-scheduler-' + (segment.priority ?? 'primary') + '-priority'\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n [axTooltipContext]=\"segment\"\n >\n <span class=\"ax-appointment-chip-title\">\n <span class=\"ax-scheduler-truncate\">{{ segment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, segment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </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 +{{\n '@acorex:common.general.more-items' | translate: { params: { number: dayCell.overflowCount } } | async\n }}\n </div>\n <ax-popover [target]=\"moreAppointments\" placement=\"bottom-start\" trigger=\"click\">\n <div\n axDropZone\n [class.ax-state-readonly]=\"readonly()\"\n class=\"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 [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\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 tooltipTemplate()\n ? ''\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 [class.ax-state-active]=\"isActive(segment.id)\"\n [class]=\"segment.cssClass ?? 'ax-scheduler-' + (segment.priority ?? 'primary') + '-priority'\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n [axTooltipContext]=\"segment\"\n >\n <span class=\"ax-appointment-chip-title\">\n <span class=\"ax-scheduler-truncate\">{{ segment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, segment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </span>\n @if (!segment.allDay) {\n <span>\n {{\n segment.originalStartDate\n | format: 'time' : { format: 'HH:mm', calendar: calendar() }\n | 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</div>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-font-weight:initial}}}@layer components{ax-scheduler-month-view{--ax-scheduler-month-spanning-row-height:1.25rem;--ax-scheduler-month-spanning-row-gap:.25rem;height:100%;min-width:var(--ax-comp-scheduler-width);background-color:inherit;display:block}ax-scheduler-month-view .ax-scheduler-month-container{background-color:inherit;flex-direction:column;height:100%;display:flex}ax-scheduler-month-view .ax-scheduler-month-weekdays{z-index:10;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:var(--ax-comp-scheduler-all-day-bg,inherit);width:100%;padding-inline:0;padding-block:calc(var(--spacing,.25rem) * 2);text-align:center;flex-shrink:0;grid-template-columns:repeat(7,minmax(0,1fr));display:grid;position:sticky;top:0}ax-scheduler-month-view .ax-scheduler-month-weekdays .ax-scheduler-month-weekday{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-scheduler-month-view .ax-scheduler-month-grid-wrapper{flex-grow:1;display:grid;position:relative}ax-scheduler-month-view .ax-scheduler-month-spanning-layer{pointer-events:none;z-index:5;border-inline-start:1px solid #0000;grid-template-columns:1fr;grid-auto-rows:minmax(5rem,auto);width:100%;display:grid;position:absolute;top:0;right:0;bottom:0;left:0}ax-scheduler-month-view .ax-scheduler-month-spanning-layer .ax-scheduler-month-spanning-week-row{padding-top:calc(var(--spacing,.25rem) * 6);align-content:flex-start;row-gap:var(--ax-scheduler-month-spanning-row-gap);grid-auto-rows:var(--ax-scheduler-month-spanning-row-height);grid-template-columns:repeat(7,minmax(0,1fr));display:grid;position:relative}ax-scheduler-month-view .ax-scheduler-month-spanning-layer .ax-scheduler-month-spanning-week-row .ax-scheduler-month-spanning-appointment{z-index:6;cursor:pointer;text-overflow:ellipsis;border-radius:var(--radius-sm,.25rem);padding-inline:var(--spacing,.25rem);padding-block:calc(var(--spacing,.25rem) * .5);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));white-space:nowrap;pointer-events:auto;margin-inline:.125rem;overflow:hidden}ax-scheduler-month-view .ax-scheduler-month-spanning-layer .ax-scheduler-month-spanning-week-row .ax-scheduler-month-spanning-appointment .ax-spanning-appointment-title{height:100%;padding-inline:calc(var(--spacing,.25rem) * 2);justify-content:space-between;align-items:center;display:flex}ax-scheduler-month-view .ax-scheduler-month-spanning-layer .ax-scheduler-month-spanning-week-row .ax-scheduler-month-spanning-appointment .ax-spanning-appointment-title .ax-scheduler-truncate{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}ax-scheduler-month-view .ax-scheduler-month-spanning-layer .ax-scheduler-month-spanning-week-row .ax-scheduler-month-spanning-appointment .ax-spanning-appointment-title .ax-scheduler-action-icon{cursor:pointer;width:auto;flex-shrink:0;margin-inline-start:var(--spacing,.25rem)}ax-scheduler-month-view .ax-scheduler-month-spanning-layer .ax-scheduler-month-spanning-week-row .ax-scheduler-month-spanning-appointment.ax-spanning-start-clipped{border-start-start-radius:0;border-end-start-radius:0;margin-inline-start:0;position:relative}ax-scheduler-month-view .ax-scheduler-month-spanning-layer .ax-scheduler-month-spanning-week-row .ax-scheduler-month-spanning-appointment.ax-spanning-start-clipped:before{content:\"\\2190 \";top:calc(var(--spacing,.25rem) * .5);opacity:.7;font-size:.65rem;position:absolute;inset-inline-start:0}ax-scheduler-month-view .ax-scheduler-month-spanning-layer .ax-scheduler-month-spanning-week-row .ax-scheduler-month-spanning-appointment.ax-spanning-end-clipped{border-start-end-radius:0;border-end-end-radius:0;margin-inline-end:0;position:relative}ax-scheduler-month-view .ax-scheduler-month-spanning-layer .ax-scheduler-month-spanning-week-row .ax-scheduler-month-spanning-appointment.ax-spanning-end-clipped:after{content:\" \\2192\";top:calc(var(--spacing,.25rem) * .5);opacity:.7;font-size:.65rem;position:absolute;inset-inline-end:0}ax-scheduler-month-view .ax-scheduler-month-grid{z-index:1;border-inline-start-style:var(--tw-border-style);border-inline-start-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));grid-template-columns:repeat(7,minmax(0,1fr));grid-auto-rows:minmax(5rem,auto);width:100%;display:grid;position:relative}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell{border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding:var(--spacing,.25rem);position:relative;overflow:hidden}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))}@supports (color:color-mix(in lab,red,red)){ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-other-month{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-border-lightest-surface)) 20%,transparent)}}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))}@supports (color:color-mix(in lab,red,red)){ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-other-month .ax-scheduler-month-day-number{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 50%,transparent)}}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))}@supports (color:color-mix(in lab,red,red)){ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-state-today{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 5%,transparent)}}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-state-today .ax-scheduler-month-day-number{--tw-font-weight:var(--font-weight-bold,700);font-weight:var(--font-weight-bold,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))}@supports (color:color-mix(in lab,red,red)){ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-state-today.ax-other-month{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 2.5%,transparent)}}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))}@supports (color:color-mix(in lab,red,red)){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:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 50%,transparent)}}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-state-holiday .ax-scheduler-month-day-number{color:var(--ax-scheduler-holiday-color,rgba(var(--ax-sys-color-danger-surface)));--tw-font-weight:var(--font-weight-bold,700);font-weight:var(--font-weight-bold,700)}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:var(--ax-scheduler-holiday-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{margin-bottom:var(--spacing,.25rem);text-align:center}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:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));display:inline-block}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments{gap:calc(var(--spacing,.25rem) * .5);padding-top:max(0rem,calc(var(--spanning-rows-count,0) * (var(--ax-scheduler-month-spanning-row-height) + var(--ax-scheduler-month-spanning-row-gap)) - var(--ax-scheduler-month-spanning-row-gap)));flex-direction:column;display:flex;overflow:hidden}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments .ax-scheduler-month-appointment-chip{text-overflow:ellipsis;white-space:nowrap;border-radius:var(--radius-sm,.25rem);padding-inline:var(--spacing,.25rem);padding-block:calc(var(--spacing,.25rem) * .5);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));overflow:hidden}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments .ax-scheduler-month-overflow-badge{margin-top:calc(var(--spacing,.25rem) * .5);cursor:pointer;padding-inline:0;padding-block:calc(var(--spacing,.25rem) * .5);text-align:start;font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)))}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-line:underline}ax-scheduler-month-view:not(.ax-state-readonly) .ax-scheduler-month-appointment-chip,ax-scheduler-month-view:not(.ax-state-readonly) .ax-scheduler-month-spanning-appointment{cursor:pointer}ax-scheduler-month-view:not(.ax-state-readonly) .ax-scheduler-month-day-cell{cursor:pointer;transition-property:background-color;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));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)}ax-scheduler-month-view .ax-appointment-chip-title{justify-content:space-between;display:flex}ax-scheduler-month-view .ax-appointment-chip-title .ax-scheduler-action-icon{cursor:pointer;width:auto}ax-scheduler.ax-rtl ax-scheduler-month-view .ax-scheduler-month-spanning-appointment.ax-spanning-start-clipped:before{content:\"\\2192 \"}ax-scheduler.ax-rtl ax-scheduler-month-view .ax-scheduler-month-spanning-appointment.ax-spanning-end-clipped:after{content:\" \\2190\"}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */\n"] }]
|
|
1822
1842
|
}], propDecorators: { readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], hasActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasActions", required: false }] }], dragStartDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragStartDelay", required: false }] }], calendar: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendar", required: false }] }], date: [{ type: i0.Input, args: [{ isSignal: true, alias: "date", required: true }] }], appointments: [{ type: i0.Input, args: [{ isSignal: true, alias: "appointments", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], selectedAppointmentId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedAppointmentId", required: false }] }], tooltipTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipTemplate", required: false }] }], slotClickedInternal: [{ type: i0.Output, args: ["slotClickedInternal"] }], slotDblClickedInternal: [{ type: i0.Output, args: ["slotDblClickedInternal"] }], slotRightClickedInternal: [{ type: i0.Output, args: ["slotRightClickedInternal"] }], appointmentClickedInternal: [{ type: i0.Output, args: ["appointmentClickedInternal"] }], appointmentDblClickedInternal: [{ type: i0.Output, args: ["appointmentDblClickedInternal"] }], appointmentRightClickedInternal: [{ type: i0.Output, args: ["appointmentRightClickedInternal"] }], onActionClickInternal: [{ type: i0.Output, args: ["onActionClickInternal"] }], onAppointmentDropInternal: [{ type: i0.Output, args: ["onAppointmentDropInternal"] }] } });
|
|
1823
1843
|
|
|
1824
1844
|
class AXSchedulerTimelineDayViewComponent extends NXComponent {
|
|
@@ -1830,26 +1850,26 @@ class AXSchedulerTimelineDayViewComponent extends NXComponent {
|
|
|
1830
1850
|
this.calendarService = inject(AXCalendarService);
|
|
1831
1851
|
this.schedulerService = inject(AXSchedulerService);
|
|
1832
1852
|
this.GAP_PX = 1;
|
|
1833
|
-
this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
|
|
1834
|
-
this.draggable = input(true, ...(ngDevMode ? [{ debugName: "draggable" }] : []));
|
|
1835
|
-
this.hasActions = input(false, ...(ngDevMode ? [{ debugName: "hasActions" }] : []));
|
|
1836
|
-
this.dragStartDelay = input(0, ...(ngDevMode ? [{ debugName: "dragStartDelay" }] : []));
|
|
1837
|
-
this.calendar = input(...(ngDevMode ? [undefined, { debugName: "calendar" }] : []));
|
|
1838
|
-
this.showResourceHeaders = input(true, ...(ngDevMode ? [{ debugName: "showResourceHeaders" }] : []));
|
|
1839
|
-
this.date = input.required(...(ngDevMode ? [{ debugName: "date" }] : []));
|
|
1840
|
-
this.endDayHour = input.required(...(ngDevMode ? [{ debugName: "endDayHour" }] : []));
|
|
1841
|
-
this.selectedAppointmentId = input(null, ...(ngDevMode ? [{ debugName: "selectedAppointmentId" }] : []));
|
|
1842
|
-
this.startDayHour = input.required(...(ngDevMode ? [{ debugName: "startDayHour" }] : []));
|
|
1843
|
-
this.showUnassignedAppointments = input(true, ...(ngDevMode ? [{ debugName: "showUnassignedAppointments" }] : []));
|
|
1844
|
-
this.resources = input([], ...(ngDevMode ? [{ debugName: "resources" }] : []));
|
|
1845
|
-
this.showCurrentTimeIndicator = input(true, ...(ngDevMode ? [{ debugName: "showCurrentTimeIndicator" }] : []));
|
|
1846
|
-
this.scrollToCurrentTimeIndicator = input(false, ...(ngDevMode ? [{ debugName: "scrollToCurrentTimeIndicator" }] : []));
|
|
1847
|
-
this.resourceTemplate = input(...(ngDevMode ? [undefined, { debugName: "resourceTemplate" }] : []));
|
|
1848
|
-
this.appointments = input([], ...(ngDevMode ? [{ debugName: "appointments" }] : []));
|
|
1849
|
-
this.tooltipTemplate = input(...(ngDevMode ? [undefined, { debugName: "tooltipTemplate" }] : []));
|
|
1850
|
-
this.dragStartSlotId = signal(null, ...(ngDevMode ? [{ debugName: "dragStartSlotId" }] : []));
|
|
1851
|
-
this.dragStartSlotResourceId = signal(null, ...(ngDevMode ? [{ debugName: "dragStartSlotResourceId" }] : []));
|
|
1852
|
-
this.currentTimeLineElement = viewChild('currentTimeLine', ...(ngDevMode ? [{ debugName: "currentTimeLineElement" }] : []));
|
|
1853
|
+
this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
1854
|
+
this.draggable = input(true, ...(ngDevMode ? [{ debugName: "draggable" }] : /* istanbul ignore next */ []));
|
|
1855
|
+
this.hasActions = input(false, ...(ngDevMode ? [{ debugName: "hasActions" }] : /* istanbul ignore next */ []));
|
|
1856
|
+
this.dragStartDelay = input(0, ...(ngDevMode ? [{ debugName: "dragStartDelay" }] : /* istanbul ignore next */ []));
|
|
1857
|
+
this.calendar = input(...(ngDevMode ? [undefined, { debugName: "calendar" }] : /* istanbul ignore next */ []));
|
|
1858
|
+
this.showResourceHeaders = input(true, ...(ngDevMode ? [{ debugName: "showResourceHeaders" }] : /* istanbul ignore next */ []));
|
|
1859
|
+
this.date = input.required(...(ngDevMode ? [{ debugName: "date" }] : /* istanbul ignore next */ []));
|
|
1860
|
+
this.endDayHour = input.required(...(ngDevMode ? [{ debugName: "endDayHour" }] : /* istanbul ignore next */ []));
|
|
1861
|
+
this.selectedAppointmentId = input(null, ...(ngDevMode ? [{ debugName: "selectedAppointmentId" }] : /* istanbul ignore next */ []));
|
|
1862
|
+
this.startDayHour = input.required(...(ngDevMode ? [{ debugName: "startDayHour" }] : /* istanbul ignore next */ []));
|
|
1863
|
+
this.showUnassignedAppointments = input(true, ...(ngDevMode ? [{ debugName: "showUnassignedAppointments" }] : /* istanbul ignore next */ []));
|
|
1864
|
+
this.resources = input([], ...(ngDevMode ? [{ debugName: "resources" }] : /* istanbul ignore next */ []));
|
|
1865
|
+
this.showCurrentTimeIndicator = input(true, ...(ngDevMode ? [{ debugName: "showCurrentTimeIndicator" }] : /* istanbul ignore next */ []));
|
|
1866
|
+
this.scrollToCurrentTimeIndicator = input(false, ...(ngDevMode ? [{ debugName: "scrollToCurrentTimeIndicator" }] : /* istanbul ignore next */ []));
|
|
1867
|
+
this.resourceTemplate = input(...(ngDevMode ? [undefined, { debugName: "resourceTemplate" }] : /* istanbul ignore next */ []));
|
|
1868
|
+
this.appointments = input([], ...(ngDevMode ? [{ debugName: "appointments" }] : /* istanbul ignore next */ []));
|
|
1869
|
+
this.tooltipTemplate = input(...(ngDevMode ? [undefined, { debugName: "tooltipTemplate" }] : /* istanbul ignore next */ []));
|
|
1870
|
+
this.dragStartSlotId = signal(null, ...(ngDevMode ? [{ debugName: "dragStartSlotId" }] : /* istanbul ignore next */ []));
|
|
1871
|
+
this.dragStartSlotResourceId = signal(null, ...(ngDevMode ? [{ debugName: "dragStartSlotResourceId" }] : /* istanbul ignore next */ []));
|
|
1872
|
+
this.currentTimeLineElement = viewChild('currentTimeLine', ...(ngDevMode ? [{ debugName: "currentTimeLineElement" }] : /* istanbul ignore next */ []));
|
|
1853
1873
|
/**
|
|
1854
1874
|
* Gets appointments grouped by resources for timeline view.
|
|
1855
1875
|
*/
|
|
@@ -1858,7 +1878,7 @@ class AXSchedulerTimelineDayViewComponent extends NXComponent {
|
|
|
1858
1878
|
const resources = this.resources();
|
|
1859
1879
|
const showUnassigned = this.showUnassignedAppointments();
|
|
1860
1880
|
return this.schedulerService.filterAppointmentsByResources(allAppointments, resources, showUnassigned);
|
|
1861
|
-
}, ...(ngDevMode ? [{ debugName: "appointmentsByResource" }] : []));
|
|
1881
|
+
}, ...(ngDevMode ? [{ debugName: "appointmentsByResource" }] : /* istanbul ignore next */ []));
|
|
1862
1882
|
/**
|
|
1863
1883
|
* Gets all resource IDs including unassigned if applicable.
|
|
1864
1884
|
*/
|
|
@@ -1866,7 +1886,7 @@ class AXSchedulerTimelineDayViewComponent extends NXComponent {
|
|
|
1866
1886
|
const resources = this.resources();
|
|
1867
1887
|
const showUnassigned = this.showUnassignedAppointments();
|
|
1868
1888
|
return this.schedulerService.getAllResourceIds(resources, showUnassigned);
|
|
1869
|
-
}, ...(ngDevMode ? [{ debugName: "resourceIds" }] : []));
|
|
1889
|
+
}, ...(ngDevMode ? [{ debugName: "resourceIds" }] : /* istanbul ignore next */ []));
|
|
1870
1890
|
/**
|
|
1871
1891
|
* Processes original appointments to get segments relevant to this specific day and its viewable hours.
|
|
1872
1892
|
* Filters out original all-day events.
|
|
@@ -1910,7 +1930,7 @@ class AXSchedulerTimelineDayViewComponent extends NXComponent {
|
|
|
1910
1930
|
}
|
|
1911
1931
|
}
|
|
1912
1932
|
return segmentsOnThisDay;
|
|
1913
|
-
}, ...(ngDevMode ? [{ debugName: "processedSegmentsForLayout" }] : []));
|
|
1933
|
+
}, ...(ngDevMode ? [{ debugName: "processedSegmentsForLayout" }] : /* istanbul ignore next */ []));
|
|
1914
1934
|
// Internal outputs to be caught by parent AXSchedulerComponent
|
|
1915
1935
|
this.slotClickedInternal = output();
|
|
1916
1936
|
this.slotDblClickedInternal = output();
|
|
@@ -1944,7 +1964,7 @@ class AXSchedulerTimelineDayViewComponent extends NXComponent {
|
|
|
1944
1964
|
hours.push(time);
|
|
1945
1965
|
}
|
|
1946
1966
|
return hours;
|
|
1947
|
-
}, ...(ngDevMode ? [{ debugName: "hoursArray" }] : []));
|
|
1967
|
+
}, ...(ngDevMode ? [{ debugName: "hoursArray" }] : /* istanbul ignore next */ []));
|
|
1948
1968
|
// --- Appointment Layout Calculation ---
|
|
1949
1969
|
this.appointmentLayouts = computed(() => {
|
|
1950
1970
|
const finalLayouts = [];
|
|
@@ -1995,7 +2015,7 @@ class AXSchedulerTimelineDayViewComponent extends NXComponent {
|
|
|
1995
2015
|
});
|
|
1996
2016
|
}
|
|
1997
2017
|
return finalLayouts;
|
|
1998
|
-
}, ...(ngDevMode ? [{ debugName: "appointmentLayouts" }] : []));
|
|
2018
|
+
}, ...(ngDevMode ? [{ debugName: "appointmentLayouts" }] : /* istanbul ignore next */ []));
|
|
1999
2019
|
}
|
|
2000
2020
|
isActive(appointmentId) {
|
|
2001
2021
|
return this.selectedAppointmentId() === appointmentId;
|
|
@@ -2275,10 +2295,10 @@ class AXSchedulerTimelineDayViewComponent extends NXComponent {
|
|
|
2275
2295
|
this.dragStartSlotId.set(dropListElement ? dropListElement.dataset['slotId'] : null);
|
|
2276
2296
|
this.dragStartSlotResourceId.set(dropListElement ? dropListElement.dataset['resourceId'] : null);
|
|
2277
2297
|
}
|
|
2278
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
2279
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AXSchedulerTimelineDayViewComponent, isStandalone: true, selector: "ax-scheduler-timeline-day-view", inputs: { readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, hasActions: { classPropertyName: "hasActions", publicName: "hasActions", isSignal: true, isRequired: false, transformFunction: null }, dragStartDelay: { classPropertyName: "dragStartDelay", publicName: "dragStartDelay", isSignal: true, isRequired: false, transformFunction: null }, calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, showResourceHeaders: { classPropertyName: "showResourceHeaders", publicName: "showResourceHeaders", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: true, transformFunction: null }, endDayHour: { classPropertyName: "endDayHour", publicName: "endDayHour", isSignal: true, isRequired: true, transformFunction: null }, selectedAppointmentId: { classPropertyName: "selectedAppointmentId", publicName: "selectedAppointmentId", isSignal: true, isRequired: false, transformFunction: null }, startDayHour: { classPropertyName: "startDayHour", publicName: "startDayHour", isSignal: true, isRequired: true, transformFunction: null }, showUnassignedAppointments: { classPropertyName: "showUnassignedAppointments", publicName: "showUnassignedAppointments", isSignal: true, isRequired: false, transformFunction: null }, resources: { classPropertyName: "resources", publicName: "resources", isSignal: true, isRequired: false, transformFunction: null }, showCurrentTimeIndicator: { classPropertyName: "showCurrentTimeIndicator", publicName: "showCurrentTimeIndicator", isSignal: true, isRequired: false, transformFunction: null }, scrollToCurrentTimeIndicator: { classPropertyName: "scrollToCurrentTimeIndicator", publicName: "scrollToCurrentTimeIndicator", isSignal: true, isRequired: false, transformFunction: null }, resourceTemplate: { classPropertyName: "resourceTemplate", publicName: "resourceTemplate", isSignal: true, isRequired: false, transformFunction: null }, appointments: { classPropertyName: "appointments", publicName: "appointments", isSignal: true, isRequired: false, transformFunction: null }, tooltipTemplate: { classPropertyName: "tooltipTemplate", publicName: "tooltipTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { slotClickedInternal: "slotClickedInternal", slotDblClickedInternal: "slotDblClickedInternal", slotRightClickedInternal: "slotRightClickedInternal", appointmentClickedInternal: "appointmentClickedInternal", appointmentDblClickedInternal: "appointmentDblClickedInternal", appointmentRightClickedInternal: "appointmentRightClickedInternal", onActionClickInternal: "onActionClickInternal", onAppointmentDropInternal: "onAppointmentDropInternal" }, host: { properties: { "class.ax-state-readonly": "readonly()" } }, providers: [{ provide: AXComponent, useExisting: AXSchedulerTimelineDayViewComponent }], viewQueries: [{ propertyName: "currentTimeLineElement", first: true, predicate: ["currentTimeLine"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (resources().length === 0 || !showResourceHeaders()) {\n <!-- Original layout when no resources -->\n <div class=\"ax-scheduler-timeline-header\">\n @for (hour of hoursArray(); track hour.date.getTime()) {\n <div class=\"ax-scheduler-timeline-header-hours\">\n <span>{{ hour | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}</span>\n </div>\n }\n </div>\n\n <div class=\"ax-scheduler-timeline-content\">\n <!-- Current Time Line Indicator -->\n @if (showCurrentTimeIndicator() && getCurrentTimePositionWithOffset() !== null) {\n <div\n class=\"ax-scheduler-current-time-line\"\n [style.inset-inline-start]=\"getCurrentTimePositionWithOffset()\"\n #currentTimeLine\n ></div>\n }\n <div class=\"ax-scheduler-timeline-appointment-container\">\n @for (\n layout of resources().length === 0 ? appointmentLayouts() : getAppointmentLayoutsForResource(resourceIds()[0]);\n track layout.appointment.id\n ) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || layout.appointment.readonly || readonly()\"\n [dragData]=\"layout.appointment\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, layout.appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, layout.appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, layout.appointment)\"\n [title]=\"tooltipTemplate() ? '' : layout.appointment.title\"\n [style.width]=\"layout.layoutWidth\"\n [style.height]=\"layout.layoutHeight\"\n class=\"ax-scheduler-timeline-appointment {{\n layout.appointment.cssClass ?? 'ax-scheduler-' + (layout.appointment.priority ?? 'primary') + '-priority'\n }}\"\n [class.ax-state-active]=\"isActive(layout.appointment.id)\"\n [style.insetBlockStart]=\"layout.layoutTop\"\n [style.insetInlineStart]=\"layout.layoutLeft\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltipContext]=\"layout.appointment\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ layout.appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, layout.appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </ax-title>\n <ax-subtitle>\n {{\n layout.appointment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n -\n {{\n layout.appointment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n </ax-subtitle>\n </div>\n }\n </div>\n <div class=\"ax-scheduler-timeline-slot-row\" aria-hidden=\"true\">\n @for (time of hoursArray(); track time.date.getTime()) {\n <div\n axDropZone\n #zone=\"axDropZone\"\n (onElementDrop)=\"handleDrop($event, time)\"\n [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n class=\"ax-scheduler-timeline-slot-cell\"\n (click)=\"handleSlotEvent($event, time)\"\n (dblclick)=\"handleSlotEvent($event, time)\"\n (contextmenu)=\"handleSlotEvent($event, time)\"\n [attr.data-slot-id]=\"time.format('YYYYMMDD-HHmm')\"\n ></div>\n }\n </div>\n </div>\n} @else {\n <!-- Resource-based layout -->\n <div class=\"ax-scheduler-timeline-resource-container\">\n <!-- Single sticky time header for all resources (only show if not used in multi-day) -->\n @if (showResourceHeaders()) {\n <div class=\"ax-scheduler-timeline-header ax-scheduler-timeline-header-sticky\">\n <div class=\"ax-scheduler-timeline-resource-header-placeholder\"><span>Resources</span></div>\n @for (hour of hoursArray(); track hour.date.getTime()) {\n <div class=\"ax-scheduler-timeline-header-hours\">\n <span>{{ hour | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}</span>\n </div>\n }\n </div>\n }\n\n <!-- Resource rows -->\n <div class=\"ax-scheduler-timeline-resource-rows\">\n <!-- Current Time Line Indicator -->\n @if (showCurrentTimeIndicator() && getCurrentTimePositionWithOffset() !== null) {\n <div\n #currentTimeLine\n class=\"ax-scheduler-current-time-line\"\n [style.inset-inline-start]=\"getCurrentTimePositionWithOffset()\"\n ></div>\n }\n\n @for (resourceId of resourceIds(); track resourceId) {\n <div class=\"ax-scheduler-timeline-resource-row\" [style.height]=\"getResourceRowHeight(resourceId)\">\n @if (showResourceHeaders()) {\n <!-- Sticky Resource Header -->\n <div class=\"ax-scheduler-timeline-resource-header ax-scheduler-timeline-resource-header-sticky\">\n @if (resourceTemplate() && typeof resourceTemplate() !== 'string') {\n <ng-container\n [ngTemplateOutlet]=\"$any(resourceTemplate())\"\n [ngTemplateOutletContext]=\"{\n $implicit: getResourceContext(resourceId),\n resource: getResourceContext(resourceId),\n resourceId: resourceId,\n }\"\n ></ng-container>\n } @else {\n <span class=\"ax-scheduler-timeline-resource-title\">{{ getResourceTitle(resourceId) }}</span>\n }\n </div>\n }\n\n <!-- Resource Content -->\n <div class=\"ax-scheduler-timeline-resource-content\">\n <div class=\"ax-scheduler-timeline-appointment-container\">\n @for (layout of getAppointmentLayoutsForResource(resourceId); track layout.appointment.id) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || layout.appointment.readonly || readonly()\"\n [dragData]=\"layout.appointment\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, layout.appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, layout.appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, layout.appointment)\"\n [title]=\"tooltipTemplate() ? '' : layout.appointment.title\"\n [style.width]=\"layout.layoutWidth\"\n [style.height]=\"layout.layoutHeight\"\n class=\"ax-scheduler-timeline-appointment {{\n layout.appointment.cssClass ??\n 'ax-scheduler-' + (layout.appointment.priority ?? 'primary') + '-priority'\n }}\"\n [class.ax-state-active]=\"isActive(layout.appointment.id)\"\n [style.insetBlockStart]=\"layout.layoutTop\"\n [style.insetInlineStart]=\"layout.layoutLeft\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltipContext]=\"layout.appointment\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ layout.appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, layout.appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </ax-title>\n <ax-subtitle>\n {{\n layout.appointment.originalStartDate\n | format: 'time' : { format: 'HH:mm', calendar: calendar() }\n | async\n }}\n -\n {{\n layout.appointment.originalEndDate\n | format: 'time' : { format: 'HH:mm', calendar: calendar() }\n | async\n }}\n </ax-subtitle>\n </div>\n }\n </div>\n <div class=\"ax-scheduler-timeline-slot-row\" aria-hidden=\"true\">\n @for (time of hoursArray(); track time.date.getTime()) {\n <div\n axDropZone\n #zone=\"axDropZone\"\n (onElementDrop)=\"handleDrop($event, time, resourceId)\"\n [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n class=\"ax-scheduler-timeline-slot-cell\"\n (click)=\"handleSlotEvent($event, time)\"\n (dblclick)=\"handleSlotEvent($event, time)\"\n (contextmenu)=\"handleSlotEvent($event, time)\"\n [attr.data-slot-id]=\"time.format('YYYYMMDD-HHmm')\"\n [attr.data-resource-id]=\"resourceId\"\n ></div>\n }\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n}\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-font-weight:initial;--tw-content:\"\"}}}@layer components{ax-scheduler-timeline-day-view{background-color:inherit;flex-direction:column;height:100%;display:inline-flex;position:relative}ax-scheduler-timeline-day-view .ax-scheduler-timeline-resource-container{background-color:inherit;flex-direction:column;height:auto;min-height:100%;display:flex;position:relative;overflow:visible}ax-scheduler-timeline-day-view .ax-scheduler-timeline-resource-container .ax-scheduler-timeline-header-sticky{top:calc(var(--spacing,.25rem) * 0);z-index:10;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;display:flex;position:sticky}ax-scheduler-timeline-day-view .ax-scheduler-timeline-resource-container .ax-scheduler-timeline-header-sticky .ax-scheduler-timeline-resource-header-placeholder{z-index:15;width:var(--ax-comp-scheduler-resource-header-width,8rem);min-width:var(--ax-comp-scheduler-resource-header-width,8rem);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;justify-content:center;align-items:center;display:flex;position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 0)}ax-scheduler-timeline-day-view .ax-scheduler-timeline-resource-container .ax-scheduler-timeline-resource-rows{background-color:inherit;flex:1;position:relative;overflow:visible}ax-scheduler-timeline-day-view .ax-scheduler-timeline-resource-container .ax-scheduler-timeline-resource-row{min-height:calc(var(--spacing,.25rem) * 0);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;width:max-content;display:flex}ax-scheduler-timeline-day-view .ax-scheduler-timeline-resource-container .ax-scheduler-timeline-resource-row .ax-scheduler-timeline-resource-header{width:var(--ax-comp-scheduler-resource-header-width,8rem);min-width:var(--ax-comp-scheduler-resource-header-width,8rem);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;padding:calc(var(--spacing,.25rem) * 2);justify-content:center;align-items:center;display:flex}ax-scheduler-timeline-day-view .ax-scheduler-timeline-resource-container .ax-scheduler-timeline-resource-row .ax-scheduler-timeline-resource-header.ax-scheduler-timeline-resource-header-sticky{z-index:15;background-color:inherit;position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 0)}ax-scheduler-timeline-day-view .ax-scheduler-timeline-resource-container .ax-scheduler-timeline-resource-row .ax-scheduler-timeline-resource-header .ax-scheduler-timeline-resource-title{text-align:center;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);overflow-wrap:break-word}ax-scheduler-timeline-day-view .ax-scheduler-timeline-resource-container .ax-scheduler-timeline-resource-row .ax-scheduler-timeline-resource-content{min-width:calc(var(--spacing,.25rem) * 0);flex-direction:column;flex:1;display:flex;position:relative}ax-scheduler-timeline-day-view .ax-scheduler-timeline-resource-container .ax-scheduler-timeline-resource-row .ax-scheduler-timeline-resource-content .ax-scheduler-timeline-appointment-container{top:calc(var(--spacing,.25rem) * 0);width:100%;height:100%;position:absolute}ax-scheduler-timeline-day-view .ax-scheduler-timeline-resource-container .ax-scheduler-timeline-resource-row .ax-scheduler-timeline-resource-content .ax-scheduler-timeline-appointment-container .ax-scheduler-timeline-appointment{border-radius:calc(var(--ax-sys-border-radius) / 2);width:100%;padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:calc(var(--spacing,.25rem) * 1);flex-direction:column;display:flex;position:absolute;inset-inline-start:calc(var(--spacing,.25rem) * 0);overflow:hidden}ax-scheduler-timeline-day-view .ax-scheduler-timeline-resource-container .ax-scheduler-timeline-resource-row .ax-scheduler-timeline-resource-content .ax-scheduler-timeline-slot-row{height:100%;display:flex;position:relative}ax-scheduler-timeline-day-view .ax-scheduler-timeline-resource-container .ax-scheduler-timeline-resource-row .ax-scheduler-timeline-resource-content .ax-scheduler-timeline-slot-row .ax-scheduler-timeline-slot-cell{width:var(--ax-comp-scheduler-timeline-view-blocks-width);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));position:relative}ax-scheduler-timeline-day-view .ax-scheduler-timeline-resource-container .ax-scheduler-timeline-resource-row .ax-scheduler-timeline-resource-content .ax-scheduler-timeline-slot-row .ax-scheduler-timeline-slot-cell:after{inset-inline-end:calc(var(--spacing,.25rem) * 0);top:calc(var(--spacing,.25rem) * 0);content:var(--tw-content);background-color:rgba(var(--ax-sys-color-border-lightest-surface));width:1px;height:100%;position:absolute}@supports (color:color-mix(in lab,red,red)){ax-scheduler-timeline-day-view .ax-scheduler-timeline-resource-container .ax-scheduler-timeline-resource-row .ax-scheduler-timeline-resource-content .ax-scheduler-timeline-slot-row .ax-scheduler-timeline-slot-cell:after{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-border-lightest-surface)) 30%,transparent)}}ax-scheduler-timeline-day-view .ax-scheduler-timeline-resource-container .ax-scheduler-timeline-resource-row .ax-scheduler-timeline-resource-content .ax-scheduler-timeline-slot-row .ax-scheduler-timeline-slot-cell:after{--tw-content:\"\";content:var(--tw-content)}ax-scheduler-timeline-day-view .ax-scheduler-timeline-header{top:calc(var(--spacing,.25rem) * 0);z-index:2;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:var(--ax-comp-scheduler-all-day-bg,inherit);width:100%;display:flex;position:sticky}ax-scheduler-timeline-day-view .ax-scheduler-timeline-header .ax-scheduler-timeline-header-hours{width:var(--ax-comp-scheduler-timeline-view-blocks-width);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:calc(var(--spacing,.25rem) * 1);position:relative}ax-scheduler-timeline-day-view .ax-scheduler-timeline-header .ax-scheduler-timeline-header-hours span{position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 2)}ax-scheduler-timeline-day-view .ax-scheduler-timeline-content{height:100%;position:relative}ax-scheduler-timeline-day-view .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container{top:calc(var(--spacing,.25rem) * 0);width:100%;height:100%;position:absolute}ax-scheduler-timeline-day-view .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-timeline-appointment{border-radius:calc(var(--ax-sys-border-radius) / 2);width:100%;padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:calc(var(--spacing,.25rem) * 1);flex-direction:column;display:flex;position:absolute;inset-inline-start:calc(var(--spacing,.25rem) * 0);overflow:hidden}ax-scheduler-timeline-day-view .ax-scheduler-timeline-content .ax-scheduler-timeline-slot-row{height:100%;display:flex}ax-scheduler-timeline-day-view .ax-scheduler-timeline-content .ax-scheduler-timeline-slot-row .ax-scheduler-timeline-slot-cell{width:var(--ax-comp-scheduler-timeline-view-blocks-width);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-timeline-day-view:not(.ax-state-readonly) .ax-scheduler-timeline-appointment{z-index:1;cursor:pointer}ax-scheduler-timeline-day-view:not(.ax-state-readonly) .ax-scheduler-timeline-slot-cell{z-index:0;cursor:pointer;transition-property:background-color;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}@media(hover:hover){ax-scheduler-timeline-day-view:not(.ax-state-readonly) .ax-scheduler-timeline-slot-cell:hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg,var(--ax-sys-color-primary-surface),.1))}}ax-scheduler-timeline-day-view ax-title{justify-content:space-between;display:flex}ax-scheduler-timeline-day-view ax-title .ax-scheduler-action-icon{cursor:pointer;width:auto}ax-scheduler-timeline-day-view .ax-scheduler-current-time-line{top:calc(var(--spacing,.25rem) * 0);bottom:calc(var(--spacing,.25rem) * 0);width:calc(var(--spacing,.25rem) * .5)}ax-scheduler-timeline-day-view .ax-scheduler-current-time-line:before{content:var(--tw-content);inset-inline-start:-5px;top:calc(var(--spacing,.25rem) * -1.5)}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-content{syntax:\"*\";inherits:false;initial-value:\"\"}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["axDrag", "dragData", "dragDisabled", "dragTransition", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragClonedTemplate", "dragCursor", "dragBoundary", "dragTransitionDuration"], outputs: ["dragPositionChanged"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "directive", type: AXDropZoneDirective, selector: "[axDropZone]", inputs: ["dropZoneGroup"], outputs: ["onElementDrop", "onElementHover"], exportAs: ["axDropZone"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXFormatPipe, name: "format" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
2298
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXSchedulerTimelineDayViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
2299
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXSchedulerTimelineDayViewComponent, isStandalone: true, selector: "ax-scheduler-timeline-day-view", inputs: { readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, hasActions: { classPropertyName: "hasActions", publicName: "hasActions", isSignal: true, isRequired: false, transformFunction: null }, dragStartDelay: { classPropertyName: "dragStartDelay", publicName: "dragStartDelay", isSignal: true, isRequired: false, transformFunction: null }, calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, showResourceHeaders: { classPropertyName: "showResourceHeaders", publicName: "showResourceHeaders", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: true, transformFunction: null }, endDayHour: { classPropertyName: "endDayHour", publicName: "endDayHour", isSignal: true, isRequired: true, transformFunction: null }, selectedAppointmentId: { classPropertyName: "selectedAppointmentId", publicName: "selectedAppointmentId", isSignal: true, isRequired: false, transformFunction: null }, startDayHour: { classPropertyName: "startDayHour", publicName: "startDayHour", isSignal: true, isRequired: true, transformFunction: null }, showUnassignedAppointments: { classPropertyName: "showUnassignedAppointments", publicName: "showUnassignedAppointments", isSignal: true, isRequired: false, transformFunction: null }, resources: { classPropertyName: "resources", publicName: "resources", isSignal: true, isRequired: false, transformFunction: null }, showCurrentTimeIndicator: { classPropertyName: "showCurrentTimeIndicator", publicName: "showCurrentTimeIndicator", isSignal: true, isRequired: false, transformFunction: null }, scrollToCurrentTimeIndicator: { classPropertyName: "scrollToCurrentTimeIndicator", publicName: "scrollToCurrentTimeIndicator", isSignal: true, isRequired: false, transformFunction: null }, resourceTemplate: { classPropertyName: "resourceTemplate", publicName: "resourceTemplate", isSignal: true, isRequired: false, transformFunction: null }, appointments: { classPropertyName: "appointments", publicName: "appointments", isSignal: true, isRequired: false, transformFunction: null }, tooltipTemplate: { classPropertyName: "tooltipTemplate", publicName: "tooltipTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { slotClickedInternal: "slotClickedInternal", slotDblClickedInternal: "slotDblClickedInternal", slotRightClickedInternal: "slotRightClickedInternal", appointmentClickedInternal: "appointmentClickedInternal", appointmentDblClickedInternal: "appointmentDblClickedInternal", appointmentRightClickedInternal: "appointmentRightClickedInternal", onActionClickInternal: "onActionClickInternal", onAppointmentDropInternal: "onAppointmentDropInternal" }, host: { properties: { "class.ax-state-readonly": "readonly()" } }, providers: [{ provide: AXComponent, useExisting: AXSchedulerTimelineDayViewComponent }], viewQueries: [{ propertyName: "currentTimeLineElement", first: true, predicate: ["currentTimeLine"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (resources().length === 0 || !showResourceHeaders()) {\n <!-- Original layout when no resources -->\n <div class=\"ax-scheduler-timeline-header\">\n @for (hour of hoursArray(); track hour.date.getTime()) {\n <div class=\"ax-scheduler-timeline-header-hours\">\n <span>{{ hour | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}</span>\n </div>\n }\n </div>\n\n <div class=\"ax-scheduler-timeline-content\">\n <!-- Current Time Line Indicator -->\n @if (showCurrentTimeIndicator() && getCurrentTimePositionWithOffset() !== null) {\n <div\n class=\"ax-scheduler-current-time-line\"\n [style.inset-inline-start]=\"getCurrentTimePositionWithOffset()\"\n #currentTimeLine\n ></div>\n }\n <div class=\"ax-scheduler-timeline-appointment-container\">\n @for (\n layout of resources().length === 0 ? appointmentLayouts() : getAppointmentLayoutsForResource(resourceIds()[0]);\n track layout.appointment.id\n ) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || layout.appointment.readonly || readonly()\"\n [dragData]=\"layout.appointment\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, layout.appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, layout.appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, layout.appointment)\"\n [title]=\"tooltipTemplate() ? '' : layout.appointment.title\"\n [style.width]=\"layout.layoutWidth\"\n [style.height]=\"layout.layoutHeight\"\n class=\"ax-scheduler-timeline-appointment {{\n layout.appointment.cssClass ?? 'ax-scheduler-' + (layout.appointment.priority ?? 'primary') + '-priority'\n }}\"\n [class.ax-state-active]=\"isActive(layout.appointment.id)\"\n [style.insetBlockStart]=\"layout.layoutTop\"\n [style.insetInlineStart]=\"layout.layoutLeft\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltipContext]=\"layout.appointment\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ layout.appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, layout.appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </ax-title>\n <ax-subtitle>\n {{\n layout.appointment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n -\n {{\n layout.appointment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n </ax-subtitle>\n </div>\n }\n </div>\n <div class=\"ax-scheduler-timeline-slot-row\" aria-hidden=\"true\">\n @for (time of hoursArray(); track time.date.getTime()) {\n <div\n axDropZone\n #zone=\"axDropZone\"\n (onElementDrop)=\"handleDrop($event, time)\"\n [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n class=\"ax-scheduler-timeline-slot-cell\"\n (click)=\"handleSlotEvent($event, time)\"\n (dblclick)=\"handleSlotEvent($event, time)\"\n (contextmenu)=\"handleSlotEvent($event, time)\"\n [attr.data-slot-id]=\"time.format('YYYYMMDD-HHmm')\"\n ></div>\n }\n </div>\n </div>\n} @else {\n <!-- Resource-based layout -->\n <div class=\"ax-scheduler-timeline-resource-container\">\n <!-- Single sticky time header for all resources (only show if not used in multi-day) -->\n @if (showResourceHeaders()) {\n <div class=\"ax-scheduler-timeline-header ax-scheduler-timeline-header-sticky\">\n <div class=\"ax-scheduler-timeline-resource-header-placeholder\"><span>Resources</span></div>\n @for (hour of hoursArray(); track hour.date.getTime()) {\n <div class=\"ax-scheduler-timeline-header-hours\">\n <span>{{ hour | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}</span>\n </div>\n }\n </div>\n }\n\n <!-- Resource rows -->\n <div class=\"ax-scheduler-timeline-resource-rows\">\n <!-- Current Time Line Indicator -->\n @if (showCurrentTimeIndicator() && getCurrentTimePositionWithOffset() !== null) {\n <div\n #currentTimeLine\n class=\"ax-scheduler-current-time-line\"\n [style.inset-inline-start]=\"getCurrentTimePositionWithOffset()\"\n ></div>\n }\n\n @for (resourceId of resourceIds(); track resourceId) {\n <div class=\"ax-scheduler-timeline-resource-row\" [style.height]=\"getResourceRowHeight(resourceId)\">\n @if (showResourceHeaders()) {\n <!-- Sticky Resource Header -->\n <div class=\"ax-scheduler-timeline-resource-header ax-scheduler-timeline-resource-header-sticky\">\n @if (resourceTemplate() && typeof resourceTemplate() !== 'string') {\n <ng-container\n [ngTemplateOutlet]=\"$any(resourceTemplate())\"\n [ngTemplateOutletContext]=\"{\n $implicit: getResourceContext(resourceId),\n resource: getResourceContext(resourceId),\n resourceId: resourceId,\n }\"\n ></ng-container>\n } @else {\n <span class=\"ax-scheduler-timeline-resource-title\">{{ getResourceTitle(resourceId) }}</span>\n }\n </div>\n }\n\n <!-- Resource Content -->\n <div class=\"ax-scheduler-timeline-resource-content\">\n <div class=\"ax-scheduler-timeline-appointment-container\">\n @for (layout of getAppointmentLayoutsForResource(resourceId); track layout.appointment.id) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || layout.appointment.readonly || readonly()\"\n [dragData]=\"layout.appointment\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, layout.appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, layout.appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, layout.appointment)\"\n [title]=\"tooltipTemplate() ? '' : layout.appointment.title\"\n [style.width]=\"layout.layoutWidth\"\n [style.height]=\"layout.layoutHeight\"\n class=\"ax-scheduler-timeline-appointment {{\n layout.appointment.cssClass ??\n 'ax-scheduler-' + (layout.appointment.priority ?? 'primary') + '-priority'\n }}\"\n [class.ax-state-active]=\"isActive(layout.appointment.id)\"\n [style.insetBlockStart]=\"layout.layoutTop\"\n [style.insetInlineStart]=\"layout.layoutLeft\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltipContext]=\"layout.appointment\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ layout.appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, layout.appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </ax-title>\n <ax-subtitle>\n {{\n layout.appointment.originalStartDate\n | format: 'time' : { format: 'HH:mm', calendar: calendar() }\n | async\n }}\n -\n {{\n layout.appointment.originalEndDate\n | format: 'time' : { format: 'HH:mm', calendar: calendar() }\n | async\n }}\n </ax-subtitle>\n </div>\n }\n </div>\n <div class=\"ax-scheduler-timeline-slot-row\" aria-hidden=\"true\">\n @for (time of hoursArray(); track time.date.getTime()) {\n <div\n axDropZone\n #zone=\"axDropZone\"\n (onElementDrop)=\"handleDrop($event, time, resourceId)\"\n [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n class=\"ax-scheduler-timeline-slot-cell\"\n (click)=\"handleSlotEvent($event, time)\"\n (dblclick)=\"handleSlotEvent($event, time)\"\n (contextmenu)=\"handleSlotEvent($event, time)\"\n [attr.data-slot-id]=\"time.format('YYYYMMDD-HHmm')\"\n [attr.data-resource-id]=\"resourceId\"\n ></div>\n }\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n}\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-font-weight:initial;--tw-content:\"\"}}}@layer components{ax-scheduler-timeline-day-view{background-color:inherit;flex-direction:column;height:100%;display:inline-flex;position:relative}ax-scheduler-timeline-day-view .ax-scheduler-timeline-resource-container{background-color:inherit;flex-direction:column;height:auto;min-height:100%;display:flex;position:relative;overflow:visible}ax-scheduler-timeline-day-view .ax-scheduler-timeline-resource-container .ax-scheduler-timeline-header-sticky{z-index:10;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;display:flex;position:sticky;top:0}ax-scheduler-timeline-day-view .ax-scheduler-timeline-resource-container .ax-scheduler-timeline-header-sticky .ax-scheduler-timeline-resource-header-placeholder{z-index:15;width:var(--ax-comp-scheduler-resource-header-width,8rem);min-width:var(--ax-comp-scheduler-resource-header-width,8rem);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;justify-content:center;align-items:center;display:flex;position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 0)}ax-scheduler-timeline-day-view .ax-scheduler-timeline-resource-container .ax-scheduler-timeline-resource-rows{background-color:inherit;flex:1;position:relative;overflow:visible}ax-scheduler-timeline-day-view .ax-scheduler-timeline-resource-container .ax-scheduler-timeline-resource-row{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;width:max-content;min-height:0;display:flex}ax-scheduler-timeline-day-view .ax-scheduler-timeline-resource-container .ax-scheduler-timeline-resource-row .ax-scheduler-timeline-resource-header{width:var(--ax-comp-scheduler-resource-header-width,8rem);min-width:var(--ax-comp-scheduler-resource-header-width,8rem);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;padding:calc(var(--spacing,.25rem) * 2);justify-content:center;align-items:center;display:flex}ax-scheduler-timeline-day-view .ax-scheduler-timeline-resource-container .ax-scheduler-timeline-resource-row .ax-scheduler-timeline-resource-header.ax-scheduler-timeline-resource-header-sticky{z-index:15;background-color:inherit;position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 0)}ax-scheduler-timeline-day-view .ax-scheduler-timeline-resource-container .ax-scheduler-timeline-resource-row .ax-scheduler-timeline-resource-header .ax-scheduler-timeline-resource-title{text-align:center;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);overflow-wrap:break-word}ax-scheduler-timeline-day-view .ax-scheduler-timeline-resource-container .ax-scheduler-timeline-resource-row .ax-scheduler-timeline-resource-content{flex-direction:column;flex:1;min-width:0;display:flex;position:relative}ax-scheduler-timeline-day-view .ax-scheduler-timeline-resource-container .ax-scheduler-timeline-resource-row .ax-scheduler-timeline-resource-content .ax-scheduler-timeline-appointment-container{width:100%;height:100%;position:absolute;top:0}ax-scheduler-timeline-day-view .ax-scheduler-timeline-resource-container .ax-scheduler-timeline-resource-row .ax-scheduler-timeline-resource-content .ax-scheduler-timeline-appointment-container .ax-scheduler-timeline-appointment{border-radius:calc(var(--ax-sys-border-radius) / 2);width:100%;padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:var(--spacing,.25rem);flex-direction:column;display:flex;position:absolute;inset-inline-start:calc(var(--spacing,.25rem) * 0);overflow:hidden}ax-scheduler-timeline-day-view .ax-scheduler-timeline-resource-container .ax-scheduler-timeline-resource-row .ax-scheduler-timeline-resource-content .ax-scheduler-timeline-slot-row{height:100%;display:flex;position:relative}ax-scheduler-timeline-day-view .ax-scheduler-timeline-resource-container .ax-scheduler-timeline-resource-row .ax-scheduler-timeline-resource-content .ax-scheduler-timeline-slot-row .ax-scheduler-timeline-slot-cell{width:var(--ax-comp-scheduler-timeline-view-blocks-width);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));position:relative}ax-scheduler-timeline-day-view .ax-scheduler-timeline-resource-container .ax-scheduler-timeline-resource-row .ax-scheduler-timeline-resource-content .ax-scheduler-timeline-slot-row .ax-scheduler-timeline-slot-cell:after{inset-inline-end:calc(var(--spacing,.25rem) * 0);content:var(--tw-content);background-color:rgba(var(--ax-sys-color-border-lightest-surface));width:1px;height:100%;position:absolute;top:0}@supports (color:color-mix(in lab,red,red)){ax-scheduler-timeline-day-view .ax-scheduler-timeline-resource-container .ax-scheduler-timeline-resource-row .ax-scheduler-timeline-resource-content .ax-scheduler-timeline-slot-row .ax-scheduler-timeline-slot-cell:after{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-border-lightest-surface)) 30%,transparent)}}ax-scheduler-timeline-day-view .ax-scheduler-timeline-resource-container .ax-scheduler-timeline-resource-row .ax-scheduler-timeline-resource-content .ax-scheduler-timeline-slot-row .ax-scheduler-timeline-slot-cell:after{--tw-content:\"\";content:var(--tw-content)}ax-scheduler-timeline-day-view .ax-scheduler-timeline-header{z-index:2;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:var(--ax-comp-scheduler-all-day-bg,inherit);width:100%;display:flex;position:sticky;top:0}ax-scheduler-timeline-day-view .ax-scheduler-timeline-header .ax-scheduler-timeline-header-hours{width:var(--ax-comp-scheduler-timeline-view-blocks-width);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:var(--spacing,.25rem);position:relative}ax-scheduler-timeline-day-view .ax-scheduler-timeline-header .ax-scheduler-timeline-header-hours span{position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 2)}ax-scheduler-timeline-day-view .ax-scheduler-timeline-content{height:100%;position:relative}ax-scheduler-timeline-day-view .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container{width:100%;height:100%;position:absolute;top:0}ax-scheduler-timeline-day-view .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-timeline-appointment{border-radius:calc(var(--ax-sys-border-radius) / 2);width:100%;padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:var(--spacing,.25rem);flex-direction:column;display:flex;position:absolute;inset-inline-start:calc(var(--spacing,.25rem) * 0);overflow:hidden}ax-scheduler-timeline-day-view .ax-scheduler-timeline-content .ax-scheduler-timeline-slot-row{height:100%;display:flex}ax-scheduler-timeline-day-view .ax-scheduler-timeline-content .ax-scheduler-timeline-slot-row .ax-scheduler-timeline-slot-cell{width:var(--ax-comp-scheduler-timeline-view-blocks-width);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-timeline-day-view:not(.ax-state-readonly) .ax-scheduler-timeline-appointment{z-index:1;cursor:pointer}ax-scheduler-timeline-day-view:not(.ax-state-readonly) .ax-scheduler-timeline-slot-cell{z-index:0;cursor:pointer;transition-property:background-color;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}ax-scheduler-timeline-day-view:not(.ax-state-readonly) .ax-scheduler-timeline-slot-cell:hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg,var(--ax-sys-color-primary-surface),.1))}ax-scheduler-timeline-day-view ax-title{justify-content:space-between;display:flex}ax-scheduler-timeline-day-view ax-title .ax-scheduler-action-icon{cursor:pointer;width:auto}ax-scheduler-timeline-day-view .ax-scheduler-current-time-line{width:calc(var(--spacing,.25rem) * .5);top:0;bottom:0}ax-scheduler-timeline-day-view .ax-scheduler-current-time-line:before{content:var(--tw-content);inset-inline-start:-5px;top:calc(var(--spacing,.25rem) * -1.5)}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-content{syntax:\"*\";inherits:false;initial-value:\"\"}\n/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["axDrag", "dragData", "dragDisabled", "dragTransition", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragClonedTemplate", "dragCursor", "dragBoundary", "dragTransitionDuration"], outputs: ["dragPositionChanged"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "directive", type: AXDropZoneDirective, selector: "[axDropZone]", inputs: ["dropZoneGroup"], outputs: ["onElementDrop", "onElementHover"], exportAs: ["axDropZone"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXFormatPipe, name: "format" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
2280
2300
|
}
|
|
2281
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
2301
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXSchedulerTimelineDayViewComponent, decorators: [{
|
|
2282
2302
|
type: Component,
|
|
2283
2303
|
args: [{ selector: 'ax-scheduler-timeline-day-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
2284
2304
|
'[class.ax-state-readonly]': 'readonly()',
|
|
@@ -2291,7 +2311,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
|
|
|
2291
2311
|
AXDropZoneDirective,
|
|
2292
2312
|
AXDecoratorIconComponent,
|
|
2293
2313
|
AXDecoratorGenericComponent,
|
|
2294
|
-
], providers: [{ provide: AXComponent, useExisting: AXSchedulerTimelineDayViewComponent }], template: "@if (resources().length === 0 || !showResourceHeaders()) {\n <!-- Original layout when no resources -->\n <div class=\"ax-scheduler-timeline-header\">\n @for (hour of hoursArray(); track hour.date.getTime()) {\n <div class=\"ax-scheduler-timeline-header-hours\">\n <span>{{ hour | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}</span>\n </div>\n }\n </div>\n\n <div class=\"ax-scheduler-timeline-content\">\n <!-- Current Time Line Indicator -->\n @if (showCurrentTimeIndicator() && getCurrentTimePositionWithOffset() !== null) {\n <div\n class=\"ax-scheduler-current-time-line\"\n [style.inset-inline-start]=\"getCurrentTimePositionWithOffset()\"\n #currentTimeLine\n ></div>\n }\n <div class=\"ax-scheduler-timeline-appointment-container\">\n @for (\n layout of resources().length === 0 ? appointmentLayouts() : getAppointmentLayoutsForResource(resourceIds()[0]);\n track layout.appointment.id\n ) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || layout.appointment.readonly || readonly()\"\n [dragData]=\"layout.appointment\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, layout.appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, layout.appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, layout.appointment)\"\n [title]=\"tooltipTemplate() ? '' : layout.appointment.title\"\n [style.width]=\"layout.layoutWidth\"\n [style.height]=\"layout.layoutHeight\"\n class=\"ax-scheduler-timeline-appointment {{\n layout.appointment.cssClass ?? 'ax-scheduler-' + (layout.appointment.priority ?? 'primary') + '-priority'\n }}\"\n [class.ax-state-active]=\"isActive(layout.appointment.id)\"\n [style.insetBlockStart]=\"layout.layoutTop\"\n [style.insetInlineStart]=\"layout.layoutLeft\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltipContext]=\"layout.appointment\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ layout.appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, layout.appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </ax-title>\n <ax-subtitle>\n {{\n layout.appointment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n -\n {{\n layout.appointment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n </ax-subtitle>\n </div>\n }\n </div>\n <div class=\"ax-scheduler-timeline-slot-row\" aria-hidden=\"true\">\n @for (time of hoursArray(); track time.date.getTime()) {\n <div\n axDropZone\n #zone=\"axDropZone\"\n (onElementDrop)=\"handleDrop($event, time)\"\n [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n class=\"ax-scheduler-timeline-slot-cell\"\n (click)=\"handleSlotEvent($event, time)\"\n (dblclick)=\"handleSlotEvent($event, time)\"\n (contextmenu)=\"handleSlotEvent($event, time)\"\n [attr.data-slot-id]=\"time.format('YYYYMMDD-HHmm')\"\n ></div>\n }\n </div>\n </div>\n} @else {\n <!-- Resource-based layout -->\n <div class=\"ax-scheduler-timeline-resource-container\">\n <!-- Single sticky time header for all resources (only show if not used in multi-day) -->\n @if (showResourceHeaders()) {\n <div class=\"ax-scheduler-timeline-header ax-scheduler-timeline-header-sticky\">\n <div class=\"ax-scheduler-timeline-resource-header-placeholder\"><span>Resources</span></div>\n @for (hour of hoursArray(); track hour.date.getTime()) {\n <div class=\"ax-scheduler-timeline-header-hours\">\n <span>{{ hour | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}</span>\n </div>\n }\n </div>\n }\n\n <!-- Resource rows -->\n <div class=\"ax-scheduler-timeline-resource-rows\">\n <!-- Current Time Line Indicator -->\n @if (showCurrentTimeIndicator() && getCurrentTimePositionWithOffset() !== null) {\n <div\n #currentTimeLine\n class=\"ax-scheduler-current-time-line\"\n [style.inset-inline-start]=\"getCurrentTimePositionWithOffset()\"\n ></div>\n }\n\n @for (resourceId of resourceIds(); track resourceId) {\n <div class=\"ax-scheduler-timeline-resource-row\" [style.height]=\"getResourceRowHeight(resourceId)\">\n @if (showResourceHeaders()) {\n <!-- Sticky Resource Header -->\n <div class=\"ax-scheduler-timeline-resource-header ax-scheduler-timeline-resource-header-sticky\">\n @if (resourceTemplate() && typeof resourceTemplate() !== 'string') {\n <ng-container\n [ngTemplateOutlet]=\"$any(resourceTemplate())\"\n [ngTemplateOutletContext]=\"{\n $implicit: getResourceContext(resourceId),\n resource: getResourceContext(resourceId),\n resourceId: resourceId,\n }\"\n ></ng-container>\n } @else {\n <span class=\"ax-scheduler-timeline-resource-title\">{{ getResourceTitle(resourceId) }}</span>\n }\n </div>\n }\n\n <!-- Resource Content -->\n <div class=\"ax-scheduler-timeline-resource-content\">\n <div class=\"ax-scheduler-timeline-appointment-container\">\n @for (layout of getAppointmentLayoutsForResource(resourceId); track layout.appointment.id) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || layout.appointment.readonly || readonly()\"\n [dragData]=\"layout.appointment\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, layout.appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, layout.appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, layout.appointment)\"\n [title]=\"tooltipTemplate() ? '' : layout.appointment.title\"\n [style.width]=\"layout.layoutWidth\"\n [style.height]=\"layout.layoutHeight\"\n class=\"ax-scheduler-timeline-appointment {{\n layout.appointment.cssClass ??\n 'ax-scheduler-' + (layout.appointment.priority ?? 'primary') + '-priority'\n }}\"\n [class.ax-state-active]=\"isActive(layout.appointment.id)\"\n [style.insetBlockStart]=\"layout.layoutTop\"\n [style.insetInlineStart]=\"layout.layoutLeft\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltipContext]=\"layout.appointment\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ layout.appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, layout.appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </ax-title>\n <ax-subtitle>\n {{\n layout.appointment.originalStartDate\n | format: 'time' : { format: 'HH:mm', calendar: calendar() }\n | async\n }}\n -\n {{\n layout.appointment.originalEndDate\n | format: 'time' : { format: 'HH:mm', calendar: calendar() }\n | async\n }}\n </ax-subtitle>\n </div>\n }\n </div>\n <div class=\"ax-scheduler-timeline-slot-row\" aria-hidden=\"true\">\n @for (time of hoursArray(); track time.date.getTime()) {\n <div\n axDropZone\n #zone=\"axDropZone\"\n (onElementDrop)=\"handleDrop($event, time, resourceId)\"\n [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n class=\"ax-scheduler-timeline-slot-cell\"\n (click)=\"handleSlotEvent($event, time)\"\n (dblclick)=\"handleSlotEvent($event, time)\"\n (contextmenu)=\"handleSlotEvent($event, time)\"\n [attr.data-slot-id]=\"time.format('YYYYMMDD-HHmm')\"\n [attr.data-resource-id]=\"resourceId\"\n ></div>\n }\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n}\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-font-weight:initial;--tw-content:\"\"}}}@layer components{ax-scheduler-timeline-day-view{background-color:inherit;flex-direction:column;height:100%;display:inline-flex;position:relative}ax-scheduler-timeline-day-view .ax-scheduler-timeline-resource-container{background-color:inherit;flex-direction:column;height:auto;min-height:100%;display:flex;position:relative;overflow:visible}ax-scheduler-timeline-day-view .ax-scheduler-timeline-resource-container .ax-scheduler-timeline-header-sticky{top:calc(var(--spacing,.25rem) * 0);z-index:10;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;display:flex;position:sticky}ax-scheduler-timeline-day-view .ax-scheduler-timeline-resource-container .ax-scheduler-timeline-header-sticky .ax-scheduler-timeline-resource-header-placeholder{z-index:15;width:var(--ax-comp-scheduler-resource-header-width,8rem);min-width:var(--ax-comp-scheduler-resource-header-width,8rem);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;justify-content:center;align-items:center;display:flex;position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 0)}ax-scheduler-timeline-day-view .ax-scheduler-timeline-resource-container .ax-scheduler-timeline-resource-rows{background-color:inherit;flex:1;position:relative;overflow:visible}ax-scheduler-timeline-day-view .ax-scheduler-timeline-resource-container .ax-scheduler-timeline-resource-row{min-height:calc(var(--spacing,.25rem) * 0);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;width:max-content;display:flex}ax-scheduler-timeline-day-view .ax-scheduler-timeline-resource-container .ax-scheduler-timeline-resource-row .ax-scheduler-timeline-resource-header{width:var(--ax-comp-scheduler-resource-header-width,8rem);min-width:var(--ax-comp-scheduler-resource-header-width,8rem);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;padding:calc(var(--spacing,.25rem) * 2);justify-content:center;align-items:center;display:flex}ax-scheduler-timeline-day-view .ax-scheduler-timeline-resource-container .ax-scheduler-timeline-resource-row .ax-scheduler-timeline-resource-header.ax-scheduler-timeline-resource-header-sticky{z-index:15;background-color:inherit;position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 0)}ax-scheduler-timeline-day-view .ax-scheduler-timeline-resource-container .ax-scheduler-timeline-resource-row .ax-scheduler-timeline-resource-header .ax-scheduler-timeline-resource-title{text-align:center;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);overflow-wrap:break-word}ax-scheduler-timeline-day-view .ax-scheduler-timeline-resource-container .ax-scheduler-timeline-resource-row .ax-scheduler-timeline-resource-content{min-width:calc(var(--spacing,.25rem) * 0);flex-direction:column;flex:1;display:flex;position:relative}ax-scheduler-timeline-day-view .ax-scheduler-timeline-resource-container .ax-scheduler-timeline-resource-row .ax-scheduler-timeline-resource-content .ax-scheduler-timeline-appointment-container{top:calc(var(--spacing,.25rem) * 0);width:100%;height:100%;position:absolute}ax-scheduler-timeline-day-view .ax-scheduler-timeline-resource-container .ax-scheduler-timeline-resource-row .ax-scheduler-timeline-resource-content .ax-scheduler-timeline-appointment-container .ax-scheduler-timeline-appointment{border-radius:calc(var(--ax-sys-border-radius) / 2);width:100%;padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:calc(var(--spacing,.25rem) * 1);flex-direction:column;display:flex;position:absolute;inset-inline-start:calc(var(--spacing,.25rem) * 0);overflow:hidden}ax-scheduler-timeline-day-view .ax-scheduler-timeline-resource-container .ax-scheduler-timeline-resource-row .ax-scheduler-timeline-resource-content .ax-scheduler-timeline-slot-row{height:100%;display:flex;position:relative}ax-scheduler-timeline-day-view .ax-scheduler-timeline-resource-container .ax-scheduler-timeline-resource-row .ax-scheduler-timeline-resource-content .ax-scheduler-timeline-slot-row .ax-scheduler-timeline-slot-cell{width:var(--ax-comp-scheduler-timeline-view-blocks-width);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));position:relative}ax-scheduler-timeline-day-view .ax-scheduler-timeline-resource-container .ax-scheduler-timeline-resource-row .ax-scheduler-timeline-resource-content .ax-scheduler-timeline-slot-row .ax-scheduler-timeline-slot-cell:after{inset-inline-end:calc(var(--spacing,.25rem) * 0);top:calc(var(--spacing,.25rem) * 0);content:var(--tw-content);background-color:rgba(var(--ax-sys-color-border-lightest-surface));width:1px;height:100%;position:absolute}@supports (color:color-mix(in lab,red,red)){ax-scheduler-timeline-day-view .ax-scheduler-timeline-resource-container .ax-scheduler-timeline-resource-row .ax-scheduler-timeline-resource-content .ax-scheduler-timeline-slot-row .ax-scheduler-timeline-slot-cell:after{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-border-lightest-surface)) 30%,transparent)}}ax-scheduler-timeline-day-view .ax-scheduler-timeline-resource-container .ax-scheduler-timeline-resource-row .ax-scheduler-timeline-resource-content .ax-scheduler-timeline-slot-row .ax-scheduler-timeline-slot-cell:after{--tw-content:\"\";content:var(--tw-content)}ax-scheduler-timeline-day-view .ax-scheduler-timeline-header{top:calc(var(--spacing,.25rem) * 0);z-index:2;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:var(--ax-comp-scheduler-all-day-bg,inherit);width:100%;display:flex;position:sticky}ax-scheduler-timeline-day-view .ax-scheduler-timeline-header .ax-scheduler-timeline-header-hours{width:var(--ax-comp-scheduler-timeline-view-blocks-width);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:calc(var(--spacing,.25rem) * 1);position:relative}ax-scheduler-timeline-day-view .ax-scheduler-timeline-header .ax-scheduler-timeline-header-hours span{position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 2)}ax-scheduler-timeline-day-view .ax-scheduler-timeline-content{height:100%;position:relative}ax-scheduler-timeline-day-view .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container{top:calc(var(--spacing,.25rem) * 0);width:100%;height:100%;position:absolute}ax-scheduler-timeline-day-view .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-timeline-appointment{border-radius:calc(var(--ax-sys-border-radius) / 2);width:100%;padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:calc(var(--spacing,.25rem) * 1);flex-direction:column;display:flex;position:absolute;inset-inline-start:calc(var(--spacing,.25rem) * 0);overflow:hidden}ax-scheduler-timeline-day-view .ax-scheduler-timeline-content .ax-scheduler-timeline-slot-row{height:100%;display:flex}ax-scheduler-timeline-day-view .ax-scheduler-timeline-content .ax-scheduler-timeline-slot-row .ax-scheduler-timeline-slot-cell{width:var(--ax-comp-scheduler-timeline-view-blocks-width);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-timeline-day-view:not(.ax-state-readonly) .ax-scheduler-timeline-appointment{z-index:1;cursor:pointer}ax-scheduler-timeline-day-view:not(.ax-state-readonly) .ax-scheduler-timeline-slot-cell{z-index:0;cursor:pointer;transition-property:background-color;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}@media(hover:hover){ax-scheduler-timeline-day-view:not(.ax-state-readonly) .ax-scheduler-timeline-slot-cell:hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg,var(--ax-sys-color-primary-surface),.1))}}ax-scheduler-timeline-day-view ax-title{justify-content:space-between;display:flex}ax-scheduler-timeline-day-view ax-title .ax-scheduler-action-icon{cursor:pointer;width:auto}ax-scheduler-timeline-day-view .ax-scheduler-current-time-line{top:calc(var(--spacing,.25rem) * 0);bottom:calc(var(--spacing,.25rem) * 0);width:calc(var(--spacing,.25rem) * .5)}ax-scheduler-timeline-day-view .ax-scheduler-current-time-line:before{content:var(--tw-content);inset-inline-start:-5px;top:calc(var(--spacing,.25rem) * -1.5)}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-content{syntax:\"*\";inherits:false;initial-value:\"\"}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"] }]
|
|
2314
|
+
], providers: [{ provide: AXComponent, useExisting: AXSchedulerTimelineDayViewComponent }], template: "@if (resources().length === 0 || !showResourceHeaders()) {\n <!-- Original layout when no resources -->\n <div class=\"ax-scheduler-timeline-header\">\n @for (hour of hoursArray(); track hour.date.getTime()) {\n <div class=\"ax-scheduler-timeline-header-hours\">\n <span>{{ hour | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}</span>\n </div>\n }\n </div>\n\n <div class=\"ax-scheduler-timeline-content\">\n <!-- Current Time Line Indicator -->\n @if (showCurrentTimeIndicator() && getCurrentTimePositionWithOffset() !== null) {\n <div\n class=\"ax-scheduler-current-time-line\"\n [style.inset-inline-start]=\"getCurrentTimePositionWithOffset()\"\n #currentTimeLine\n ></div>\n }\n <div class=\"ax-scheduler-timeline-appointment-container\">\n @for (\n layout of resources().length === 0 ? appointmentLayouts() : getAppointmentLayoutsForResource(resourceIds()[0]);\n track layout.appointment.id\n ) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || layout.appointment.readonly || readonly()\"\n [dragData]=\"layout.appointment\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, layout.appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, layout.appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, layout.appointment)\"\n [title]=\"tooltipTemplate() ? '' : layout.appointment.title\"\n [style.width]=\"layout.layoutWidth\"\n [style.height]=\"layout.layoutHeight\"\n class=\"ax-scheduler-timeline-appointment {{\n layout.appointment.cssClass ?? 'ax-scheduler-' + (layout.appointment.priority ?? 'primary') + '-priority'\n }}\"\n [class.ax-state-active]=\"isActive(layout.appointment.id)\"\n [style.insetBlockStart]=\"layout.layoutTop\"\n [style.insetInlineStart]=\"layout.layoutLeft\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltipContext]=\"layout.appointment\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ layout.appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, layout.appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </ax-title>\n <ax-subtitle>\n {{\n layout.appointment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n -\n {{\n layout.appointment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n </ax-subtitle>\n </div>\n }\n </div>\n <div class=\"ax-scheduler-timeline-slot-row\" aria-hidden=\"true\">\n @for (time of hoursArray(); track time.date.getTime()) {\n <div\n axDropZone\n #zone=\"axDropZone\"\n (onElementDrop)=\"handleDrop($event, time)\"\n [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n class=\"ax-scheduler-timeline-slot-cell\"\n (click)=\"handleSlotEvent($event, time)\"\n (dblclick)=\"handleSlotEvent($event, time)\"\n (contextmenu)=\"handleSlotEvent($event, time)\"\n [attr.data-slot-id]=\"time.format('YYYYMMDD-HHmm')\"\n ></div>\n }\n </div>\n </div>\n} @else {\n <!-- Resource-based layout -->\n <div class=\"ax-scheduler-timeline-resource-container\">\n <!-- Single sticky time header for all resources (only show if not used in multi-day) -->\n @if (showResourceHeaders()) {\n <div class=\"ax-scheduler-timeline-header ax-scheduler-timeline-header-sticky\">\n <div class=\"ax-scheduler-timeline-resource-header-placeholder\"><span>Resources</span></div>\n @for (hour of hoursArray(); track hour.date.getTime()) {\n <div class=\"ax-scheduler-timeline-header-hours\">\n <span>{{ hour | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}</span>\n </div>\n }\n </div>\n }\n\n <!-- Resource rows -->\n <div class=\"ax-scheduler-timeline-resource-rows\">\n <!-- Current Time Line Indicator -->\n @if (showCurrentTimeIndicator() && getCurrentTimePositionWithOffset() !== null) {\n <div\n #currentTimeLine\n class=\"ax-scheduler-current-time-line\"\n [style.inset-inline-start]=\"getCurrentTimePositionWithOffset()\"\n ></div>\n }\n\n @for (resourceId of resourceIds(); track resourceId) {\n <div class=\"ax-scheduler-timeline-resource-row\" [style.height]=\"getResourceRowHeight(resourceId)\">\n @if (showResourceHeaders()) {\n <!-- Sticky Resource Header -->\n <div class=\"ax-scheduler-timeline-resource-header ax-scheduler-timeline-resource-header-sticky\">\n @if (resourceTemplate() && typeof resourceTemplate() !== 'string') {\n <ng-container\n [ngTemplateOutlet]=\"$any(resourceTemplate())\"\n [ngTemplateOutletContext]=\"{\n $implicit: getResourceContext(resourceId),\n resource: getResourceContext(resourceId),\n resourceId: resourceId,\n }\"\n ></ng-container>\n } @else {\n <span class=\"ax-scheduler-timeline-resource-title\">{{ getResourceTitle(resourceId) }}</span>\n }\n </div>\n }\n\n <!-- Resource Content -->\n <div class=\"ax-scheduler-timeline-resource-content\">\n <div class=\"ax-scheduler-timeline-appointment-container\">\n @for (layout of getAppointmentLayoutsForResource(resourceId); track layout.appointment.id) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || layout.appointment.readonly || readonly()\"\n [dragData]=\"layout.appointment\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, layout.appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, layout.appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, layout.appointment)\"\n [title]=\"tooltipTemplate() ? '' : layout.appointment.title\"\n [style.width]=\"layout.layoutWidth\"\n [style.height]=\"layout.layoutHeight\"\n class=\"ax-scheduler-timeline-appointment {{\n layout.appointment.cssClass ??\n 'ax-scheduler-' + (layout.appointment.priority ?? 'primary') + '-priority'\n }}\"\n [class.ax-state-active]=\"isActive(layout.appointment.id)\"\n [style.insetBlockStart]=\"layout.layoutTop\"\n [style.insetInlineStart]=\"layout.layoutLeft\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltipContext]=\"layout.appointment\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ layout.appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, layout.appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </ax-title>\n <ax-subtitle>\n {{\n layout.appointment.originalStartDate\n | format: 'time' : { format: 'HH:mm', calendar: calendar() }\n | async\n }}\n -\n {{\n layout.appointment.originalEndDate\n | format: 'time' : { format: 'HH:mm', calendar: calendar() }\n | async\n }}\n </ax-subtitle>\n </div>\n }\n </div>\n <div class=\"ax-scheduler-timeline-slot-row\" aria-hidden=\"true\">\n @for (time of hoursArray(); track time.date.getTime()) {\n <div\n axDropZone\n #zone=\"axDropZone\"\n (onElementDrop)=\"handleDrop($event, time, resourceId)\"\n [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n class=\"ax-scheduler-timeline-slot-cell\"\n (click)=\"handleSlotEvent($event, time)\"\n (dblclick)=\"handleSlotEvent($event, time)\"\n (contextmenu)=\"handleSlotEvent($event, time)\"\n [attr.data-slot-id]=\"time.format('YYYYMMDD-HHmm')\"\n [attr.data-resource-id]=\"resourceId\"\n ></div>\n }\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n}\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-font-weight:initial;--tw-content:\"\"}}}@layer components{ax-scheduler-timeline-day-view{background-color:inherit;flex-direction:column;height:100%;display:inline-flex;position:relative}ax-scheduler-timeline-day-view .ax-scheduler-timeline-resource-container{background-color:inherit;flex-direction:column;height:auto;min-height:100%;display:flex;position:relative;overflow:visible}ax-scheduler-timeline-day-view .ax-scheduler-timeline-resource-container .ax-scheduler-timeline-header-sticky{z-index:10;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;display:flex;position:sticky;top:0}ax-scheduler-timeline-day-view .ax-scheduler-timeline-resource-container .ax-scheduler-timeline-header-sticky .ax-scheduler-timeline-resource-header-placeholder{z-index:15;width:var(--ax-comp-scheduler-resource-header-width,8rem);min-width:var(--ax-comp-scheduler-resource-header-width,8rem);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;justify-content:center;align-items:center;display:flex;position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 0)}ax-scheduler-timeline-day-view .ax-scheduler-timeline-resource-container .ax-scheduler-timeline-resource-rows{background-color:inherit;flex:1;position:relative;overflow:visible}ax-scheduler-timeline-day-view .ax-scheduler-timeline-resource-container .ax-scheduler-timeline-resource-row{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;width:max-content;min-height:0;display:flex}ax-scheduler-timeline-day-view .ax-scheduler-timeline-resource-container .ax-scheduler-timeline-resource-row .ax-scheduler-timeline-resource-header{width:var(--ax-comp-scheduler-resource-header-width,8rem);min-width:var(--ax-comp-scheduler-resource-header-width,8rem);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;padding:calc(var(--spacing,.25rem) * 2);justify-content:center;align-items:center;display:flex}ax-scheduler-timeline-day-view .ax-scheduler-timeline-resource-container .ax-scheduler-timeline-resource-row .ax-scheduler-timeline-resource-header.ax-scheduler-timeline-resource-header-sticky{z-index:15;background-color:inherit;position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 0)}ax-scheduler-timeline-day-view .ax-scheduler-timeline-resource-container .ax-scheduler-timeline-resource-row .ax-scheduler-timeline-resource-header .ax-scheduler-timeline-resource-title{text-align:center;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);overflow-wrap:break-word}ax-scheduler-timeline-day-view .ax-scheduler-timeline-resource-container .ax-scheduler-timeline-resource-row .ax-scheduler-timeline-resource-content{flex-direction:column;flex:1;min-width:0;display:flex;position:relative}ax-scheduler-timeline-day-view .ax-scheduler-timeline-resource-container .ax-scheduler-timeline-resource-row .ax-scheduler-timeline-resource-content .ax-scheduler-timeline-appointment-container{width:100%;height:100%;position:absolute;top:0}ax-scheduler-timeline-day-view .ax-scheduler-timeline-resource-container .ax-scheduler-timeline-resource-row .ax-scheduler-timeline-resource-content .ax-scheduler-timeline-appointment-container .ax-scheduler-timeline-appointment{border-radius:calc(var(--ax-sys-border-radius) / 2);width:100%;padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:var(--spacing,.25rem);flex-direction:column;display:flex;position:absolute;inset-inline-start:calc(var(--spacing,.25rem) * 0);overflow:hidden}ax-scheduler-timeline-day-view .ax-scheduler-timeline-resource-container .ax-scheduler-timeline-resource-row .ax-scheduler-timeline-resource-content .ax-scheduler-timeline-slot-row{height:100%;display:flex;position:relative}ax-scheduler-timeline-day-view .ax-scheduler-timeline-resource-container .ax-scheduler-timeline-resource-row .ax-scheduler-timeline-resource-content .ax-scheduler-timeline-slot-row .ax-scheduler-timeline-slot-cell{width:var(--ax-comp-scheduler-timeline-view-blocks-width);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));position:relative}ax-scheduler-timeline-day-view .ax-scheduler-timeline-resource-container .ax-scheduler-timeline-resource-row .ax-scheduler-timeline-resource-content .ax-scheduler-timeline-slot-row .ax-scheduler-timeline-slot-cell:after{inset-inline-end:calc(var(--spacing,.25rem) * 0);content:var(--tw-content);background-color:rgba(var(--ax-sys-color-border-lightest-surface));width:1px;height:100%;position:absolute;top:0}@supports (color:color-mix(in lab,red,red)){ax-scheduler-timeline-day-view .ax-scheduler-timeline-resource-container .ax-scheduler-timeline-resource-row .ax-scheduler-timeline-resource-content .ax-scheduler-timeline-slot-row .ax-scheduler-timeline-slot-cell:after{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-border-lightest-surface)) 30%,transparent)}}ax-scheduler-timeline-day-view .ax-scheduler-timeline-resource-container .ax-scheduler-timeline-resource-row .ax-scheduler-timeline-resource-content .ax-scheduler-timeline-slot-row .ax-scheduler-timeline-slot-cell:after{--tw-content:\"\";content:var(--tw-content)}ax-scheduler-timeline-day-view .ax-scheduler-timeline-header{z-index:2;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:var(--ax-comp-scheduler-all-day-bg,inherit);width:100%;display:flex;position:sticky;top:0}ax-scheduler-timeline-day-view .ax-scheduler-timeline-header .ax-scheduler-timeline-header-hours{width:var(--ax-comp-scheduler-timeline-view-blocks-width);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:var(--spacing,.25rem);position:relative}ax-scheduler-timeline-day-view .ax-scheduler-timeline-header .ax-scheduler-timeline-header-hours span{position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 2)}ax-scheduler-timeline-day-view .ax-scheduler-timeline-content{height:100%;position:relative}ax-scheduler-timeline-day-view .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container{width:100%;height:100%;position:absolute;top:0}ax-scheduler-timeline-day-view .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-timeline-appointment{border-radius:calc(var(--ax-sys-border-radius) / 2);width:100%;padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:var(--spacing,.25rem);flex-direction:column;display:flex;position:absolute;inset-inline-start:calc(var(--spacing,.25rem) * 0);overflow:hidden}ax-scheduler-timeline-day-view .ax-scheduler-timeline-content .ax-scheduler-timeline-slot-row{height:100%;display:flex}ax-scheduler-timeline-day-view .ax-scheduler-timeline-content .ax-scheduler-timeline-slot-row .ax-scheduler-timeline-slot-cell{width:var(--ax-comp-scheduler-timeline-view-blocks-width);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-timeline-day-view:not(.ax-state-readonly) .ax-scheduler-timeline-appointment{z-index:1;cursor:pointer}ax-scheduler-timeline-day-view:not(.ax-state-readonly) .ax-scheduler-timeline-slot-cell{z-index:0;cursor:pointer;transition-property:background-color;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}ax-scheduler-timeline-day-view:not(.ax-state-readonly) .ax-scheduler-timeline-slot-cell:hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg,var(--ax-sys-color-primary-surface),.1))}ax-scheduler-timeline-day-view ax-title{justify-content:space-between;display:flex}ax-scheduler-timeline-day-view ax-title .ax-scheduler-action-icon{cursor:pointer;width:auto}ax-scheduler-timeline-day-view .ax-scheduler-current-time-line{width:calc(var(--spacing,.25rem) * .5);top:0;bottom:0}ax-scheduler-timeline-day-view .ax-scheduler-current-time-line:before{content:var(--tw-content);inset-inline-start:-5px;top:calc(var(--spacing,.25rem) * -1.5)}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-content{syntax:\"*\";inherits:false;initial-value:\"\"}\n/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */\n"] }]
|
|
2295
2315
|
}], propDecorators: { readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], hasActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasActions", required: false }] }], dragStartDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragStartDelay", required: false }] }], calendar: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendar", required: false }] }], showResourceHeaders: [{ type: i0.Input, args: [{ isSignal: true, alias: "showResourceHeaders", required: false }] }], date: [{ type: i0.Input, args: [{ isSignal: true, alias: "date", required: true }] }], endDayHour: [{ type: i0.Input, args: [{ isSignal: true, alias: "endDayHour", required: true }] }], selectedAppointmentId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedAppointmentId", required: false }] }], startDayHour: [{ type: i0.Input, args: [{ isSignal: true, alias: "startDayHour", required: true }] }], showUnassignedAppointments: [{ type: i0.Input, args: [{ isSignal: true, alias: "showUnassignedAppointments", required: false }] }], resources: [{ type: i0.Input, args: [{ isSignal: true, alias: "resources", required: false }] }], showCurrentTimeIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCurrentTimeIndicator", required: false }] }], scrollToCurrentTimeIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollToCurrentTimeIndicator", required: false }] }], resourceTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "resourceTemplate", required: false }] }], appointments: [{ type: i0.Input, args: [{ isSignal: true, alias: "appointments", required: false }] }], tooltipTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipTemplate", required: false }] }], currentTimeLineElement: [{ type: i0.ViewChild, args: ['currentTimeLine', { isSignal: true }] }], slotClickedInternal: [{ type: i0.Output, args: ["slotClickedInternal"] }], slotDblClickedInternal: [{ type: i0.Output, args: ["slotDblClickedInternal"] }], slotRightClickedInternal: [{ type: i0.Output, args: ["slotRightClickedInternal"] }], appointmentClickedInternal: [{ type: i0.Output, args: ["appointmentClickedInternal"] }], appointmentDblClickedInternal: [{ type: i0.Output, args: ["appointmentDblClickedInternal"] }], appointmentRightClickedInternal: [{ type: i0.Output, args: ["appointmentRightClickedInternal"] }], onActionClickInternal: [{ type: i0.Output, args: ["onActionClickInternal"] }], onAppointmentDropInternal: [{ type: i0.Output, args: ["onAppointmentDropInternal"] }] } });
|
|
2296
2316
|
|
|
2297
2317
|
class AXSchedulerTimelineMonthViewComponent extends NXComponent {
|
|
@@ -2393,37 +2413,37 @@ class AXSchedulerTimelineMonthViewComponent extends NXComponent {
|
|
|
2393
2413
|
});
|
|
2394
2414
|
}
|
|
2395
2415
|
return spanningResult;
|
|
2396
|
-
}, ...(ngDevMode ? [{ debugName: "spanningAppointments" }] : []));
|
|
2416
|
+
}, ...(ngDevMode ? [{ debugName: "spanningAppointments" }] : /* istanbul ignore next */ []));
|
|
2397
2417
|
// Get the set of multi-day appointment IDs for exclusion from per-day rendering
|
|
2398
2418
|
this.multiDayAppointmentIds = computed(() => {
|
|
2399
2419
|
const spanning = this.spanningAppointments();
|
|
2400
2420
|
return new Set(spanning.map((s) => s.appointment.id));
|
|
2401
|
-
}, ...(ngDevMode ? [{ debugName: "multiDayAppointmentIds" }] : []));
|
|
2421
|
+
}, ...(ngDevMode ? [{ debugName: "multiDayAppointmentIds" }] : /* istanbul ignore next */ []));
|
|
2402
2422
|
// Calculate max spanning rows for the non-resource view
|
|
2403
2423
|
this.maxSpanningRows = computed(() => {
|
|
2404
2424
|
const spanning = this.spanningAppointments();
|
|
2405
2425
|
if (spanning.length === 0)
|
|
2406
2426
|
return 0;
|
|
2407
2427
|
return Math.max(...spanning.map((s) => s.rowIndex)) + 1;
|
|
2408
|
-
}, ...(ngDevMode ? [{ debugName: "maxSpanningRows" }] : []));
|
|
2409
|
-
this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
|
|
2410
|
-
this.draggable = input(true, ...(ngDevMode ? [{ debugName: "draggable" }] : []));
|
|
2411
|
-
this.hasActions = input(false, ...(ngDevMode ? [{ debugName: "hasActions" }] : []));
|
|
2412
|
-
this.dragStartDelay = input(0, ...(ngDevMode ? [{ debugName: "dragStartDelay" }] : []));
|
|
2413
|
-
this.calendar = input(...(ngDevMode ? [undefined, { debugName: "calendar" }] : []));
|
|
2414
|
-
this.showResourceHeaders = input(true, ...(ngDevMode ? [{ debugName: "showResourceHeaders" }] : []));
|
|
2415
|
-
this.date = input.required(...(ngDevMode ? [{ debugName: "date" }] : []));
|
|
2416
|
-
this.showUnassignedAppointments = input(true, ...(ngDevMode ? [{ debugName: "showUnassignedAppointments" }] : []));
|
|
2417
|
-
this.selectedAppointmentId = input(null, ...(ngDevMode ? [{ debugName: "selectedAppointmentId" }] : []));
|
|
2418
|
-
this.resources = input([], ...(ngDevMode ? [{ debugName: "resources" }] : []));
|
|
2419
|
-
this.showCurrentTimeIndicator = input(true, ...(ngDevMode ? [{ debugName: "showCurrentTimeIndicator" }] : []));
|
|
2420
|
-
this.scrollToCurrentTimeIndicator = input(false, ...(ngDevMode ? [{ debugName: "scrollToCurrentTimeIndicator" }] : []));
|
|
2421
|
-
this.resourceTemplate = input(...(ngDevMode ? [undefined, { debugName: "resourceTemplate" }] : []));
|
|
2422
|
-
this.appointments = input([], ...(ngDevMode ? [{ debugName: "appointments" }] : []));
|
|
2423
|
-
this.tooltipTemplate = input(...(ngDevMode ? [undefined, { debugName: "tooltipTemplate" }] : []));
|
|
2424
|
-
this.dragStartSlotId = signal(null, ...(ngDevMode ? [{ debugName: "dragStartSlotId" }] : []));
|
|
2425
|
-
this.dragStartSlotResourceId = signal(null, ...(ngDevMode ? [{ debugName: "dragStartSlotResourceId" }] : []));
|
|
2426
|
-
this.currentTimeLineElement = viewChild('currentTimeLine', ...(ngDevMode ? [{ debugName: "currentTimeLineElement" }] : []));
|
|
2428
|
+
}, ...(ngDevMode ? [{ debugName: "maxSpanningRows" }] : /* istanbul ignore next */ []));
|
|
2429
|
+
this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
2430
|
+
this.draggable = input(true, ...(ngDevMode ? [{ debugName: "draggable" }] : /* istanbul ignore next */ []));
|
|
2431
|
+
this.hasActions = input(false, ...(ngDevMode ? [{ debugName: "hasActions" }] : /* istanbul ignore next */ []));
|
|
2432
|
+
this.dragStartDelay = input(0, ...(ngDevMode ? [{ debugName: "dragStartDelay" }] : /* istanbul ignore next */ []));
|
|
2433
|
+
this.calendar = input(...(ngDevMode ? [undefined, { debugName: "calendar" }] : /* istanbul ignore next */ []));
|
|
2434
|
+
this.showResourceHeaders = input(true, ...(ngDevMode ? [{ debugName: "showResourceHeaders" }] : /* istanbul ignore next */ []));
|
|
2435
|
+
this.date = input.required(...(ngDevMode ? [{ debugName: "date" }] : /* istanbul ignore next */ []));
|
|
2436
|
+
this.showUnassignedAppointments = input(true, ...(ngDevMode ? [{ debugName: "showUnassignedAppointments" }] : /* istanbul ignore next */ []));
|
|
2437
|
+
this.selectedAppointmentId = input(null, ...(ngDevMode ? [{ debugName: "selectedAppointmentId" }] : /* istanbul ignore next */ []));
|
|
2438
|
+
this.resources = input([], ...(ngDevMode ? [{ debugName: "resources" }] : /* istanbul ignore next */ []));
|
|
2439
|
+
this.showCurrentTimeIndicator = input(true, ...(ngDevMode ? [{ debugName: "showCurrentTimeIndicator" }] : /* istanbul ignore next */ []));
|
|
2440
|
+
this.scrollToCurrentTimeIndicator = input(false, ...(ngDevMode ? [{ debugName: "scrollToCurrentTimeIndicator" }] : /* istanbul ignore next */ []));
|
|
2441
|
+
this.resourceTemplate = input(...(ngDevMode ? [undefined, { debugName: "resourceTemplate" }] : /* istanbul ignore next */ []));
|
|
2442
|
+
this.appointments = input([], ...(ngDevMode ? [{ debugName: "appointments" }] : /* istanbul ignore next */ []));
|
|
2443
|
+
this.tooltipTemplate = input(...(ngDevMode ? [undefined, { debugName: "tooltipTemplate" }] : /* istanbul ignore next */ []));
|
|
2444
|
+
this.dragStartSlotId = signal(null, ...(ngDevMode ? [{ debugName: "dragStartSlotId" }] : /* istanbul ignore next */ []));
|
|
2445
|
+
this.dragStartSlotResourceId = signal(null, ...(ngDevMode ? [{ debugName: "dragStartSlotResourceId" }] : /* istanbul ignore next */ []));
|
|
2446
|
+
this.currentTimeLineElement = viewChild('currentTimeLine', ...(ngDevMode ? [{ debugName: "currentTimeLineElement" }] : /* istanbul ignore next */ []));
|
|
2427
2447
|
this.processedDayData = computed(() => {
|
|
2428
2448
|
const allOriginalAppointments = this.appointments();
|
|
2429
2449
|
const monthStartDate = this.date().startOf('month');
|
|
@@ -2501,7 +2521,7 @@ class AXSchedulerTimelineMonthViewComponent extends NXComponent {
|
|
|
2501
2521
|
});
|
|
2502
2522
|
}
|
|
2503
2523
|
return result;
|
|
2504
|
-
}, ...(ngDevMode ? [{ debugName: "processedDayData" }] : []));
|
|
2524
|
+
}, ...(ngDevMode ? [{ debugName: "processedDayData" }] : /* istanbul ignore next */ []));
|
|
2505
2525
|
// Internal outputs to be caught by parent AXSchedulerComponent
|
|
2506
2526
|
this.slotClickedInternal = output();
|
|
2507
2527
|
this.slotDblClickedInternal = output();
|
|
@@ -2532,7 +2552,7 @@ class AXSchedulerTimelineMonthViewComponent extends NXComponent {
|
|
|
2532
2552
|
const resources = this.resources();
|
|
2533
2553
|
const showUnassigned = this.showUnassignedAppointments();
|
|
2534
2554
|
return this.schedulerService.filterAppointmentsByResources(allAppointments, resources, showUnassigned);
|
|
2535
|
-
}, ...(ngDevMode ? [{ debugName: "appointmentsByResource" }] : []));
|
|
2555
|
+
}, ...(ngDevMode ? [{ debugName: "appointmentsByResource" }] : /* istanbul ignore next */ []));
|
|
2536
2556
|
/**
|
|
2537
2557
|
* Gets all resource IDs including unassigned if applicable.
|
|
2538
2558
|
*/
|
|
@@ -2540,7 +2560,7 @@ class AXSchedulerTimelineMonthViewComponent extends NXComponent {
|
|
|
2540
2560
|
const resources = this.resources();
|
|
2541
2561
|
const showUnassigned = this.showUnassignedAppointments();
|
|
2542
2562
|
return this.schedulerService.getAllResourceIds(resources, showUnassigned);
|
|
2543
|
-
}, ...(ngDevMode ? [{ debugName: "resourceIds" }] : []));
|
|
2563
|
+
}, ...(ngDevMode ? [{ debugName: "resourceIds" }] : /* istanbul ignore next */ []));
|
|
2544
2564
|
}
|
|
2545
2565
|
// --- Multi-day Appointment Detection ---
|
|
2546
2566
|
isMultiDayAppointment(appointment) {
|
|
@@ -2799,10 +2819,10 @@ class AXSchedulerTimelineMonthViewComponent extends NXComponent {
|
|
|
2799
2819
|
// Check if current time is on the same day as this day column
|
|
2800
2820
|
return now.isSame(dayDate, 'day');
|
|
2801
2821
|
}
|
|
2802
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
2803
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", 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 }, hasActions: { classPropertyName: "hasActions", publicName: "hasActions", isSignal: true, isRequired: false, transformFunction: null }, dragStartDelay: { classPropertyName: "dragStartDelay", publicName: "dragStartDelay", isSignal: true, isRequired: false, transformFunction: null }, calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, showResourceHeaders: { classPropertyName: "showResourceHeaders", publicName: "showResourceHeaders", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: true, transformFunction: null }, showUnassignedAppointments: { classPropertyName: "showUnassignedAppointments", publicName: "showUnassignedAppointments", isSignal: true, isRequired: false, transformFunction: null }, selectedAppointmentId: { classPropertyName: "selectedAppointmentId", publicName: "selectedAppointmentId", isSignal: true, isRequired: false, transformFunction: null }, resources: { classPropertyName: "resources", publicName: "resources", isSignal: true, isRequired: false, transformFunction: null }, showCurrentTimeIndicator: { classPropertyName: "showCurrentTimeIndicator", publicName: "showCurrentTimeIndicator", isSignal: true, isRequired: false, transformFunction: null }, scrollToCurrentTimeIndicator: { classPropertyName: "scrollToCurrentTimeIndicator", publicName: "scrollToCurrentTimeIndicator", isSignal: true, isRequired: false, transformFunction: null }, resourceTemplate: { classPropertyName: "resourceTemplate", publicName: "resourceTemplate", isSignal: true, isRequired: false, transformFunction: null }, appointments: { classPropertyName: "appointments", publicName: "appointments", isSignal: true, isRequired: false, transformFunction: null }, tooltipTemplate: { classPropertyName: "tooltipTemplate", publicName: "tooltipTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { slotClickedInternal: "slotClickedInternal", slotDblClickedInternal: "slotDblClickedInternal", slotRightClickedInternal: "slotRightClickedInternal", appointmentClickedInternal: "appointmentClickedInternal", appointmentDblClickedInternal: "appointmentDblClickedInternal", appointmentRightClickedInternal: "appointmentRightClickedInternal", onActionClickInternal: "onActionClickInternal", onAppointmentDropInternal: "onAppointmentDropInternal" }, host: { properties: { "class.ax-state-readonly": "readonly()" } }, providers: [{ provide: AXComponent, useExisting: AXSchedulerTimelineMonthViewComponent }], viewQueries: [{ propertyName: "currentTimeLineElement", first: true, predicate: ["currentTimeLine"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (resources().length === 0 || !showResourceHeaders()) {\n <!-- Original layout when no resources -->\n <div class=\"ax-scheduler-timeline-month-wrapper\">\n <!-- Spanning appointments layer -->\n @if (spanningAppointments().length > 0) {\n <div class=\"ax-scheduler-timeline-month-spanning-layer\" [style.--timeline-days-count]=\"processedDayData().length\">\n @for (spanning of spanningAppointments(); track spanning.appointment.id) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"spanning.appointment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || spanning.appointment.readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, spanning.appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, spanning.appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, spanning.appointment)\"\n [title]=\"\n tooltipTemplate()\n ? ''\n : spanning.appointment.title +\n ' (' +\n (spanning.appointment.startDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ' - ' +\n (spanning.appointment.endDate | format: 'date' : { format: 'MMM d', calendar: calendar() } | async) +\n ')'\n \"\n class=\"ax-scheduler-timeline-spanning-appointment {{\n spanning.appointment.cssClass ??\n 'ax-scheduler-' + (spanning.appointment.priority ?? 'primary') + '-priority'\n }}\"\n [class.ax-spanning-start-clipped]=\"spanning.isStartClipped\"\n [class.ax-spanning-end-clipped]=\"spanning.isEndClipped\"\n [class.ax-state-active]=\"isActive(spanning.appointment.id)\"\n [style.grid-column]=\"spanning.startDayIndex + 1 + ' / span ' + spanning.spanCount\"\n [style.grid-row]=\"spanning.rowIndex + 1\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n [axTooltipContext]=\"spanning.appointment\"\n >\n <span class=\"ax-spanning-appointment-title\">\n <span class=\"ax-scheduler-truncate\">{{ spanning.appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, spanning.appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n ></ax-icon>\n }\n </span>\n </div>\n }\n </div>\n }\n\n <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-state-today]=\"isToday(dayData.date)\"\n class=\"ax-scheduler-month-header-date-day {{\n dayData.holiday.state !== 'none' ? (dayData.holiday.holiday?.cssClass ?? 'ax-state-holiday') : ''\n }}\"\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 [attr.data-slot-id]=\"dayData.date.format('YYYYMMDD')\"\n [style.--spanning-rows-count]=\"maxSpanningRows()\"\n >\n <!-- Current Time Line Indicator -->\n @if (\n showCurrentTimeIndicator() &&\n shouldShowCurrentTimeForDay(dayData.date) &&\n getCurrentTimePosition() !== null\n ) {\n <div\n class=\"ax-scheduler-current-time-line\"\n [style.inset-inline-start.%]=\"getCurrentTimePosition()\"\n #currentTimeLine\n ></div>\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 [dragData]=\"segment\"\n [dragCursor]=\"'grab'\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || segment.readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, segment)\"\n (dblclick)=\"handleAppointmentEvent($event, segment)\"\n (contextmenu)=\"handleAppointmentEvent($event, segment)\"\n [title]=\"\n tooltipTemplate()\n ? ''\n : segment.title +\n ' (' +\n (segment.originalStartDate | format: 'time' : { calendar: calendar() } | async) +\n ' - ' +\n (segment.originalEndDate | format: 'time' : { calendar: calendar() } | async) +\n ')'\n \"\n class=\"ax-scheduler-timeline-appointment {{\n segment.cssClass ?? 'ax-scheduler-' + (segment.priority ?? 'primary') + '-priority'\n }}\"\n [class.ax-state-active]=\"isActive(segment.id)\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n [axTooltipContext]=\"segment\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ segment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, segment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </ax-title>\n <ax-subtitle>\n {{ segment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n -\n {{ segment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n </ax-subtitle>\n </div>\n }\n @if (dayData.moreCount > 0) {\n <div #moreAppointments class=\"ax-scheduler-month-overflow-badge\" (click)=\"$event.stopPropagation()\">\n +{{\n '@acorex:common.general.more-items' | translate: { params: { number: dayData.moreCount } } | async\n }}\n </div>\n <ax-popover [target]=\"moreAppointments\" placement=\"bottom-start\" trigger=\"click\">\n <div\n axDropZone\n [class.ax-state-readonly]=\"readonly()\"\n class=\"ax-scheduler-popover ax-scheduler-month-popover-appointment\"\n >\n @for (\n segment of dayData.hiddenAppointments;\n track segment.id + segment.originalStartDate.getTime()\n ) {\n <div\n axDrag\n [dragData]=\"segment\"\n [dragCursor]=\"'grab'\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\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 tooltipTemplate()\n ? ''\n : segment.title +\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 segment.cssClass ?? 'ax-scheduler-' + (segment.priority ?? 'primary') + '-priority'\n }}\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n [axTooltipContext]=\"segment\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ segment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, segment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </ax-title>\n <ax-subtitle>\n {{\n segment.originalStartDate\n | format: 'time' : { format: 'HH:mm', calendar: calendar() }\n | async\n }}\n -\n {{\n segment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n </ax-subtitle>\n </div>\n }\n </div>\n </ax-popover>\n }\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n} @else {\n <!-- Resource-based layout with sticky resources -->\n <div class=\"ax-scheduler-timeline-month-resource-container\">\n <!-- Sticky header with resource placeholder and day headers -->\n @if (showResourceHeaders()) {\n <div class=\"ax-scheduler-timeline-month-header-sticky\">\n <div class=\"ax-scheduler-timeline-month-resource-header-placeholder\"><span>Resources</span></div>\n @for (dayData of processedDayData(); track dayData.date.date.getTime()) {\n <div class=\"ax-scheduler-timeline-month-day-header\">\n <div\n [class.ax-state-today]=\"isToday(dayData.date)\"\n class=\"ax-scheduler-month-header-date-day {{\n dayData.holiday?.state !== 'none' ? (dayData.holiday?.holiday?.cssClass ?? 'ax-state-holiday') : ''\n }}\"\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 }\n\n <!-- Resource rows with sticky resource headers -->\n <div class=\"ax-scheduler-timeline-month-resource-rows\">\n <!-- Current Time Line Indicator -->\n @if (showCurrentTimeIndicator() && getCurrentTimePosition() !== null) {\n <div\n class=\"ax-scheduler-current-time-line\"\n [style.inset-inline-start.%]=\"getCurrentTimePosition()\"\n #currentTimeLine\n ></div>\n }\n\n @for (resourceId of resourceIds(); track resourceId) {\n <div\n class=\"ax-scheduler-timeline-month-resource-row\"\n [style.--resource-spanning-rows-count]=\"getMaxSpanningRowsForResource(resourceId)\"\n >\n @if (showResourceHeaders()) {\n <!-- Sticky Resource Header -->\n <div class=\"ax-scheduler-timeline-month-resource-header ax-scheduler-timeline-month-resource-header-sticky\">\n @if (resourceTemplate() && typeof resourceTemplate() !== 'string') {\n <ng-container\n [ngTemplateOutlet]=\"$any(resourceTemplate())\"\n [ngTemplateOutletContext]=\"{\n $implicit: getResourceContext(resourceId),\n resource: getResourceContext(resourceId),\n resourceId: resourceId,\n }\"\n ></ng-container>\n } @else {\n <span class=\"ax-scheduler-timeline-month-resource-title\">{{ getResourceTitle(resourceId) }}</span>\n }\n </div>\n }\n\n <!-- Resource Content -->\n <div class=\"ax-scheduler-timeline-month-resource-content\">\n <!-- Spanning appointments layer for this resource -->\n @if (getSpanningAppointmentsForResource(resourceId).length > 0) {\n <div\n class=\"ax-scheduler-timeline-resource-spanning-layer\"\n [style.--timeline-days-count]=\"processedDayData().length\"\n >\n @for (spanning of getSpanningAppointmentsForResource(resourceId); track spanning.appointment.id) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"spanning.appointment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || spanning.appointment.readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, spanning.appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, spanning.appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, spanning.appointment)\"\n [title]=\"\n tooltipTemplate()\n ? ''\n : spanning.appointment.title +\n ' (' +\n (spanning.appointment.startDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ' - ' +\n (spanning.appointment.endDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ')'\n \"\n class=\"ax-scheduler-timeline-spanning-appointment {{\n spanning.appointment.cssClass ??\n 'ax-scheduler-' + (spanning.appointment.priority ?? 'primary') + '-priority'\n }}\"\n [class.ax-spanning-start-clipped]=\"spanning.isStartClipped\"\n [class.ax-spanning-end-clipped]=\"spanning.isEndClipped\"\n [class.ax-state-active]=\"isActive(spanning.appointment.id)\"\n [style.grid-column]=\"spanning.startDayIndex + 1 + ' / span ' + spanning.spanCount\"\n [style.grid-row]=\"spanning.rowIndex + 1\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n [axTooltipContext]=\"spanning.appointment\"\n >\n <span class=\"ax-spanning-appointment-title\">\n <span class=\"ax-scheduler-truncate\">{{ spanning.appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, spanning.appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n ></ax-icon>\n }\n </span>\n </div>\n }\n </div>\n }\n\n @for (dayData of processedDayData(); track dayData.date.date.getTime()) {\n <div\n axDropZone\n #zone=\"axDropZone\"\n (onElementDrop)=\"handleDrop($event, dayData.date, resourceId)\"\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 [attr.data-slot-id]=\"dayData.date.format('YYYYMMDD')\"\n [attr.data-resource-id]=\"resourceId\"\n [style.--spanning-rows-count]=\"getMaxSpanningRowsForResource(resourceId)\"\n >\n <div class=\"ax-scheduler-timeline-appointment-container\">\n @for (\n segment of getAppointmentsForResourceAndDay(resourceId, dayData).visible;\n track segment.id + segment.originalStartDate.getTime()\n ) {\n <div\n axDrag\n [dragData]=\"segment\"\n [dragCursor]=\"'grab'\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || segment.readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, segment)\"\n (dblclick)=\"handleAppointmentEvent($event, segment)\"\n (contextmenu)=\"handleAppointmentEvent($event, segment)\"\n [title]=\"\n tooltipTemplate()\n ? ''\n : segment.allDay\n ? segment.title +\n ' (' +\n (segment.originalStartDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ' - ' +\n (segment.originalEndDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ')'\n : segment.title +\n ' (' +\n (segment.originalStartDate | format: 'time' : { calendar: calendar() } | async) +\n ' - ' +\n (segment.originalEndDate | format: 'time' : { calendar: calendar() } | async) +\n ')'\n \"\n class=\"ax-scheduler-timeline-appointment {{\n segment.cssClass ?? 'ax-scheduler-' + (segment.priority ?? 'primary') + '-priority'\n }}\"\n [class.all-day-segment]=\"segment.allDay\"\n [class.ax-state-active]=\"isActive(segment.id)\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n [axTooltipContext]=\"segment\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ segment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, segment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </ax-title>\n <ax-subtitle>\n @if (segment.allDay) {\n {{\n segment.originalStartDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async\n }}\n @if (segment.originalStartDate.getTime() !== segment.originalEndDate.getTime()) {\n -\n {{\n segment.originalEndDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async\n }}\n }\n } @else {\n {{\n segment.originalStartDate\n | format: 'time' : { format: 'HH:mm', calendar: calendar() }\n | async\n }}\n -\n {{\n segment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n }\n </ax-subtitle>\n </div>\n }\n @if (getAppointmentsForResourceAndDay(resourceId, dayData).moreCount > 0) {\n <div #moreAppointments class=\"ax-scheduler-month-overflow-badge\" (click)=\"$event.stopPropagation()\">\n +{{\n '@acorex:common.general.more-items'\n | translate\n : { params: { number: getAppointmentsForResourceAndDay(resourceId, dayData).moreCount } }\n | async\n }}\n </div>\n <ax-popover [target]=\"moreAppointments\" placement=\"bottom-start\" trigger=\"click\">\n <div\n axDropZone\n [class.ax-state-readonly]=\"readonly()\"\n class=\"ax-scheduler-popover ax-scheduler-month-popover-appointment\"\n >\n @for (\n segment of getAppointmentsForResourceAndDay(resourceId, dayData).hidden;\n track segment.id + segment.originalStartDate.getTime()\n ) {\n <div\n axDrag\n [dragData]=\"segment\"\n [dragCursor]=\"'grab'\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\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 tooltipTemplate()\n ? ''\n : segment.allDay\n ? segment.title +\n ' (' +\n (segment.originalStartDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ' - ' +\n (segment.originalEndDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ')'\n : segment.title +\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 segment.cssClass ?? 'ax-scheduler-' + (segment.priority ?? 'primary') + '-priority'\n }}\"\n [class.all-day-segment]=\"segment.allDay\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n [axTooltipContext]=\"segment\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ segment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, segment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </ax-title>\n <ax-subtitle>\n @if (segment.allDay) {\n {{\n segment.originalStartDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async\n }}\n @if (segment.originalStartDate.getTime() !== segment.originalEndDate.getTime()) {\n -\n {{\n segment.originalEndDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async\n }}\n }\n } @else {\n {{\n segment.originalStartDate\n | format: 'time' : { format: 'HH:mm', calendar: calendar() }\n | async\n }}\n -\n {{\n segment.originalEndDate\n | format: 'time' : { format: 'HH:mm', calendar: calendar() }\n | async\n }}\n }\n </ax-subtitle>\n </div>\n }\n </div>\n </ax-popover>\n }\n </div>\n </div>\n }\n </div>\n </div>\n }\n </div>\n </div>\n}\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-font-weight:initial;--tw-leading:initial;--tw-content:\"\"}}}@layer components{ax-scheduler-timeline-month-view{background-color:inherit;flex-direction:column;height:100%;display:inline-flex;position:relative}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{background-color:var(--ax-comp-scheduler-all-day-bg,inherit);width:100%;display:flex}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day{height:calc(var(--spacing,.25rem) * 16);width:var(--ax-comp-scheduler-timeline-month-view-blocks-width,calc(var(--ax-comp-scheduler-timeline-view-blocks-width) / 2));justify-content:center;align-items:flex-start;gap:calc(var(--spacing,.25rem) * 1);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding-inline:calc(var(--spacing,.25rem) * 4);padding-block:calc(var(--spacing,.25rem) * 1);flex-direction:column;display:flex;position:relative}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day.ax-state-today{background-color:rgba(var(--ax-sys-color-primary-surface))}@supports (color:color-mix(in lab,red,red)){ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day.ax-state-today{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 5%,transparent)}}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))}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{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,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{--tw-font-weight:var(--font-weight-bold,700);font-weight:var(--font-weight-bold,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-600))}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{--tw-leading:calc(var(--spacing,.25rem) * 4);max-width:100%;line-height:calc(var(--spacing,.25rem) * 4);--tw-font-weight:var(--font-weight-light,300);font-weight:var(--font-weight-light,300);position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 4)}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{font-size:var(--text-xl,1.25rem);line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75 / 1.25)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 4)}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content{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-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:calc(var(--spacing,.25rem) * 1);position:relative}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container{flex-direction:column;gap:1px;display:flex}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-timeline-appointment{border-radius:calc(var(--ax-sys-border-radius) / 2);width:100%;padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:calc(var(--spacing,.25rem) * 1);flex-direction:column;display:flex;overflow:hidden}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-month-overflow-badge{margin-top:calc(var(--spacing,.25rem) * .5);cursor:pointer;padding-inline:calc(var(--spacing,.25rem) * 0);padding-block:calc(var(--spacing,.25rem) * .5);text-align:start;font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)))}@media(hover:hover){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-line:underline}}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container{background-color:inherit;flex-direction:column;height:100%;display:flex;position:relative}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-header-sticky{top:calc(var(--spacing,.25rem) * 0);z-index:10;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;display:flex;position:sticky}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-header-sticky .ax-scheduler-timeline-month-resource-header-placeholder{z-index:15;width:var(--ax-comp-scheduler-resource-header-width,8rem);min-width:var(--ax-comp-scheduler-resource-header-width,8rem);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;padding:calc(var(--spacing,.25rem) * 2);text-align:center;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);justify-content:center;display:flex;position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 0)}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-header-sticky .ax-scheduler-timeline-month-day-header{background-color:inherit;flex:1;display:flex}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-header-sticky .ax-scheduler-timeline-month-day-header .ax-scheduler-month-header-date-day{height:calc(var(--spacing,.25rem) * 16);width:var(--ax-comp-scheduler-timeline-month-view-blocks-width,calc(var(--ax-comp-scheduler-timeline-view-blocks-width) / 2));min-width:var(--ax-comp-scheduler-timeline-month-view-blocks-width,calc(var(--ax-comp-scheduler-timeline-view-blocks-width) / 2));justify-content:center;gap:calc(var(--spacing,.25rem) * 1);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding-inline:calc(var(--spacing,.25rem) * 4);padding-block:calc(var(--spacing,.25rem) * 1);text-align:start;flex-direction:column;display:flex;position:relative}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-header-sticky .ax-scheduler-timeline-month-day-header .ax-scheduler-month-header-date-day.ax-state-today{background-color:rgba(var(--ax-sys-color-primary-surface))}@supports (color:color-mix(in lab,red,red)){ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-header-sticky .ax-scheduler-timeline-month-day-header .ax-scheduler-month-header-date-day.ax-state-today{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 5%,transparent)}}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-header-sticky .ax-scheduler-timeline-month-day-header .ax-scheduler-month-header-date-day.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-header-sticky .ax-scheduler-timeline-month-day-header .ax-scheduler-month-header-date-day.ax-state-today .ax-scheduler-month-header-date-day-char{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-header-sticky .ax-scheduler-timeline-month-day-header .ax-scheduler-month-header-date-day.ax-state-today .ax-scheduler-month-header-date-day-num{--tw-font-weight:var(--font-weight-bold,700);font-weight:var(--font-weight-bold,700)}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-header-sticky .ax-scheduler-timeline-month-day-header .ax-scheduler-month-header-date-day.ax-state-holiday{color:rgba(var(--ax-sys-color-danger-600))}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-header-sticky .ax-scheduler-timeline-month-day-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-resource-container .ax-scheduler-timeline-month-header-sticky .ax-scheduler-timeline-month-day-header .ax-scheduler-month-header-date-day .ax-scheduler-month-header-date-day-char{--tw-leading:calc(var(--spacing,.25rem) * 4);max-width:100%;line-height:calc(var(--spacing,.25rem) * 4);--tw-font-weight:var(--font-weight-light,300);font-weight:var(--font-weight-light,300);position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 4)}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-header-sticky .ax-scheduler-timeline-month-day-header .ax-scheduler-month-header-date-day .ax-scheduler-month-header-date-day-num{font-size:var(--text-xl,1.25rem);line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75 / 1.25)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 4)}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-resource-rows{background-color:inherit;flex:1;position:relative;overflow:visible}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-resource-rows .ax-scheduler-timeline-month-resource-row{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;width:max-content;min-height:3.313rem;display:flex}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-resource-rows .ax-scheduler-timeline-month-resource-row .ax-scheduler-timeline-month-resource-header{width:var(--ax-comp-scheduler-resource-header-width,8rem);min-width:var(--ax-comp-scheduler-resource-header-width,8rem);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;padding:calc(var(--spacing,.25rem) * 2);justify-content:center;align-items:center;display:flex}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-resource-rows .ax-scheduler-timeline-month-resource-row .ax-scheduler-timeline-month-resource-header.ax-scheduler-timeline-month-resource-header-sticky{z-index:15;background-color:inherit;position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 0)}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-resource-rows .ax-scheduler-timeline-month-resource-row .ax-scheduler-timeline-month-resource-header .ax-scheduler-timeline-month-resource-title{text-align:center;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);overflow-wrap:break-word}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-resource-rows .ax-scheduler-timeline-month-resource-row .ax-scheduler-timeline-month-resource-content{background-color:inherit;flex:1;display:flex}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-resource-rows .ax-scheduler-timeline-month-resource-row .ax-scheduler-timeline-month-resource-content .ax-scheduler-timeline-content{width:var(--ax-comp-scheduler-timeline-month-view-blocks-width,calc(var(--ax-comp-scheduler-timeline-view-blocks-width) / 2));min-width:var(--ax-comp-scheduler-timeline-month-view-blocks-width,calc(var(--ax-comp-scheduler-timeline-view-blocks-width) / 2));border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;flex:1;display:flex;position:relative}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-resource-rows .ax-scheduler-timeline-month-resource-row .ax-scheduler-timeline-month-resource-content .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container{gap:var(--ax-comp-scheduler-timeline-month-gap-height,.125rem);width:100%;height:100%;padding-inline:calc(var(--spacing,.25rem) * 1);padding-block:calc(var(--spacing,.25rem) * .5);flex-direction:column;display:flex;overflow:hidden}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-resource-rows .ax-scheduler-timeline-month-resource-row .ax-scheduler-timeline-month-resource-content .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-timeline-appointment{height:var(--ax-comp-scheduler-timeline-month-appointment-height,3rem);border-radius:calc(var(--ax-sys-border-radius) / 2);width:100%;padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:calc(var(--spacing,.25rem) * 1);flex-direction:column;flex-shrink:0;display:flex;overflow:hidden}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-resource-rows .ax-scheduler-timeline-month-resource-row .ax-scheduler-timeline-month-resource-content .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-month-overflow-badge{height:var(--ax-comp-scheduler-timeline-month-more-link-height,.5rem);cursor:pointer;padding-inline:calc(var(--spacing,.25rem) * 0);padding-block:calc(var(--spacing,.25rem) * .5);text-align:start;font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));flex-shrink:0}@media(hover:hover){ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-resource-rows .ax-scheduler-timeline-month-resource-row .ax-scheduler-timeline-month-resource-content .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-month-overflow-badge:hover{text-decoration-line: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-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}@media(hover:hover){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))}}ax-scheduler-timeline-month-view ax-title{justify-content:space-between;display:flex}ax-scheduler-timeline-month-view ax-title .ax-scheduler-action-icon{cursor:pointer;width:auto}ax-scheduler-timeline-month-view .ax-scheduler-current-time-line{top:calc(var(--spacing,.25rem) * 0);bottom:calc(var(--spacing,.25rem) * 0);width:calc(var(--spacing,.25rem) * .5)}ax-scheduler-timeline-month-view .ax-scheduler-current-time-line:before{content:var(--tw-content);inset-inline-start:-5px;top:calc(var(--spacing,.25rem) * -1.5)}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-leading{syntax:\"*\";inherits:false}@property --tw-content{syntax:\"*\";inherits:false;initial-value:\"\"}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["axDrag", "dragData", "dragDisabled", "dragTransition", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragClonedTemplate", "dragCursor", "dragBoundary", "dragTransitionDuration"], outputs: ["dragPositionChanged"] }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "directive", type: AXDropZoneDirective, selector: "[axDropZone]", inputs: ["dropZoneGroup"], outputs: ["onElementDrop", "onElementHover"], exportAs: ["axDropZone"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXFormatPipe, name: "format" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
2822
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXSchedulerTimelineMonthViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
2823
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXSchedulerTimelineMonthViewComponent, isStandalone: true, selector: "ax-scheduler-timeline-month-view", inputs: { readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, hasActions: { classPropertyName: "hasActions", publicName: "hasActions", isSignal: true, isRequired: false, transformFunction: null }, dragStartDelay: { classPropertyName: "dragStartDelay", publicName: "dragStartDelay", isSignal: true, isRequired: false, transformFunction: null }, calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, showResourceHeaders: { classPropertyName: "showResourceHeaders", publicName: "showResourceHeaders", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: true, transformFunction: null }, showUnassignedAppointments: { classPropertyName: "showUnassignedAppointments", publicName: "showUnassignedAppointments", isSignal: true, isRequired: false, transformFunction: null }, selectedAppointmentId: { classPropertyName: "selectedAppointmentId", publicName: "selectedAppointmentId", isSignal: true, isRequired: false, transformFunction: null }, resources: { classPropertyName: "resources", publicName: "resources", isSignal: true, isRequired: false, transformFunction: null }, showCurrentTimeIndicator: { classPropertyName: "showCurrentTimeIndicator", publicName: "showCurrentTimeIndicator", isSignal: true, isRequired: false, transformFunction: null }, scrollToCurrentTimeIndicator: { classPropertyName: "scrollToCurrentTimeIndicator", publicName: "scrollToCurrentTimeIndicator", isSignal: true, isRequired: false, transformFunction: null }, resourceTemplate: { classPropertyName: "resourceTemplate", publicName: "resourceTemplate", isSignal: true, isRequired: false, transformFunction: null }, appointments: { classPropertyName: "appointments", publicName: "appointments", isSignal: true, isRequired: false, transformFunction: null }, tooltipTemplate: { classPropertyName: "tooltipTemplate", publicName: "tooltipTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { slotClickedInternal: "slotClickedInternal", slotDblClickedInternal: "slotDblClickedInternal", slotRightClickedInternal: "slotRightClickedInternal", appointmentClickedInternal: "appointmentClickedInternal", appointmentDblClickedInternal: "appointmentDblClickedInternal", appointmentRightClickedInternal: "appointmentRightClickedInternal", onActionClickInternal: "onActionClickInternal", onAppointmentDropInternal: "onAppointmentDropInternal" }, host: { properties: { "class.ax-state-readonly": "readonly()" } }, providers: [{ provide: AXComponent, useExisting: AXSchedulerTimelineMonthViewComponent }], viewQueries: [{ propertyName: "currentTimeLineElement", first: true, predicate: ["currentTimeLine"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (resources().length === 0 || !showResourceHeaders()) {\n <!-- Original layout when no resources -->\n <div class=\"ax-scheduler-timeline-month-wrapper\">\n <!-- Spanning appointments layer -->\n @if (spanningAppointments().length > 0) {\n <div class=\"ax-scheduler-timeline-month-spanning-layer\" [style.--timeline-days-count]=\"processedDayData().length\">\n @for (spanning of spanningAppointments(); track spanning.appointment.id) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"spanning.appointment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || spanning.appointment.readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, spanning.appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, spanning.appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, spanning.appointment)\"\n [title]=\"\n tooltipTemplate()\n ? ''\n : spanning.appointment.title +\n ' (' +\n (spanning.appointment.startDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ' - ' +\n (spanning.appointment.endDate | format: 'date' : { format: 'MMM d', calendar: calendar() } | async) +\n ')'\n \"\n class=\"ax-scheduler-timeline-spanning-appointment {{\n spanning.appointment.cssClass ??\n 'ax-scheduler-' + (spanning.appointment.priority ?? 'primary') + '-priority'\n }}\"\n [class.ax-spanning-start-clipped]=\"spanning.isStartClipped\"\n [class.ax-spanning-end-clipped]=\"spanning.isEndClipped\"\n [class.ax-state-active]=\"isActive(spanning.appointment.id)\"\n [style.grid-column]=\"spanning.startDayIndex + 1 + ' / span ' + spanning.spanCount\"\n [style.grid-row]=\"spanning.rowIndex + 1\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n [axTooltipContext]=\"spanning.appointment\"\n >\n <span class=\"ax-spanning-appointment-title\">\n <span class=\"ax-scheduler-truncate\">{{ spanning.appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, spanning.appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n ></ax-icon>\n }\n </span>\n </div>\n }\n </div>\n }\n\n <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-state-today]=\"isToday(dayData.date)\"\n class=\"ax-scheduler-month-header-date-day {{\n dayData.holiday.state !== 'none' ? (dayData.holiday.holiday?.cssClass ?? 'ax-state-holiday') : ''\n }}\"\n [style.--ax-scheduler-holiday-color]=\"dayData.holiday.holiday?.color ?? null\"\n >\n <span\n class=\"ax-scheduler-month-header-date-day-char ax-scheduler-truncate\"\n [axTooltip]=\"(dayData.holiday.holiday?.description ?? dayData.holiday.holiday?.title ?? '') | translate | async\"\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 | translate | async }} )\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 [attr.data-slot-id]=\"dayData.date.format('YYYYMMDD')\"\n [style.--spanning-rows-count]=\"maxSpanningRows()\"\n >\n <!-- Current Time Line Indicator -->\n @if (\n showCurrentTimeIndicator() &&\n shouldShowCurrentTimeForDay(dayData.date) &&\n getCurrentTimePosition() !== null\n ) {\n <div\n class=\"ax-scheduler-current-time-line\"\n [style.inset-inline-start.%]=\"getCurrentTimePosition()\"\n #currentTimeLine\n ></div>\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 [dragData]=\"segment\"\n [dragCursor]=\"'grab'\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || segment.readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, segment)\"\n (dblclick)=\"handleAppointmentEvent($event, segment)\"\n (contextmenu)=\"handleAppointmentEvent($event, segment)\"\n [title]=\"\n tooltipTemplate()\n ? ''\n : segment.title +\n ' (' +\n (segment.originalStartDate | format: 'time' : { calendar: calendar() } | async) +\n ' - ' +\n (segment.originalEndDate | format: 'time' : { calendar: calendar() } | async) +\n ')'\n \"\n class=\"ax-scheduler-timeline-appointment {{\n segment.cssClass ?? 'ax-scheduler-' + (segment.priority ?? 'primary') + '-priority'\n }}\"\n [class.ax-state-active]=\"isActive(segment.id)\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n [axTooltipContext]=\"segment\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ segment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, segment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </ax-title>\n <ax-subtitle>\n {{ segment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n -\n {{ segment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n </ax-subtitle>\n </div>\n }\n @if (dayData.moreCount > 0) {\n <div #moreAppointments class=\"ax-scheduler-month-overflow-badge\" (click)=\"$event.stopPropagation()\">\n +{{\n '@acorex:common.general.more-items' | translate: { params: { number: dayData.moreCount } } | async\n }}\n </div>\n <ax-popover [target]=\"moreAppointments\" placement=\"bottom-start\" trigger=\"click\">\n <div\n axDropZone\n [class.ax-state-readonly]=\"readonly()\"\n class=\"ax-scheduler-popover ax-scheduler-month-popover-appointment\"\n >\n @for (\n segment of dayData.hiddenAppointments;\n track segment.id + segment.originalStartDate.getTime()\n ) {\n <div\n axDrag\n [dragData]=\"segment\"\n [dragCursor]=\"'grab'\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\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 tooltipTemplate()\n ? ''\n : segment.title +\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 segment.cssClass ?? 'ax-scheduler-' + (segment.priority ?? 'primary') + '-priority'\n }}\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n [axTooltipContext]=\"segment\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ segment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, segment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </ax-title>\n <ax-subtitle>\n {{\n segment.originalStartDate\n | format: 'time' : { format: 'HH:mm', calendar: calendar() }\n | async\n }}\n -\n {{\n segment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n </ax-subtitle>\n </div>\n }\n </div>\n </ax-popover>\n }\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n} @else {\n <!-- Resource-based layout with sticky resources -->\n <div class=\"ax-scheduler-timeline-month-resource-container\">\n <!-- Sticky header with resource placeholder and day headers -->\n @if (showResourceHeaders()) {\n <div class=\"ax-scheduler-timeline-month-header-sticky\">\n <div class=\"ax-scheduler-timeline-month-resource-header-placeholder\"><span>Resources</span></div>\n @for (dayData of processedDayData(); track dayData.date.date.getTime()) {\n <div class=\"ax-scheduler-timeline-month-day-header\">\n <div\n [class.ax-state-today]=\"isToday(dayData.date)\"\n class=\"ax-scheduler-month-header-date-day {{\n dayData.holiday?.state !== 'none' ? (dayData.holiday?.holiday?.cssClass ?? 'ax-state-holiday') : ''\n }}\"\n [style.--ax-scheduler-holiday-color]=\"dayData.holiday?.holiday?.color ?? null\"\n >\n <span\n class=\"ax-scheduler-month-header-date-day-char ax-scheduler-truncate\"\n [axTooltip]=\"(dayData.holiday?.holiday?.description ?? dayData.holiday?.holiday?.title ?? '') | translate | async\"\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 | translate | async }} )\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 }\n\n <!-- Resource rows with sticky resource headers -->\n <div class=\"ax-scheduler-timeline-month-resource-rows\">\n <!-- Current Time Line Indicator -->\n @if (showCurrentTimeIndicator() && getCurrentTimePosition() !== null) {\n <div\n class=\"ax-scheduler-current-time-line\"\n [style.inset-inline-start.%]=\"getCurrentTimePosition()\"\n #currentTimeLine\n ></div>\n }\n\n @for (resourceId of resourceIds(); track resourceId) {\n <div\n class=\"ax-scheduler-timeline-month-resource-row\"\n [style.--resource-spanning-rows-count]=\"getMaxSpanningRowsForResource(resourceId)\"\n >\n @if (showResourceHeaders()) {\n <!-- Sticky Resource Header -->\n <div class=\"ax-scheduler-timeline-month-resource-header ax-scheduler-timeline-month-resource-header-sticky\">\n @if (resourceTemplate() && typeof resourceTemplate() !== 'string') {\n <ng-container\n [ngTemplateOutlet]=\"$any(resourceTemplate())\"\n [ngTemplateOutletContext]=\"{\n $implicit: getResourceContext(resourceId),\n resource: getResourceContext(resourceId),\n resourceId: resourceId,\n }\"\n ></ng-container>\n } @else {\n <span class=\"ax-scheduler-timeline-month-resource-title\">{{ getResourceTitle(resourceId) }}</span>\n }\n </div>\n }\n\n <!-- Resource Content -->\n <div class=\"ax-scheduler-timeline-month-resource-content\">\n <!-- Spanning appointments layer for this resource -->\n @if (getSpanningAppointmentsForResource(resourceId).length > 0) {\n <div\n class=\"ax-scheduler-timeline-resource-spanning-layer\"\n [style.--timeline-days-count]=\"processedDayData().length\"\n >\n @for (spanning of getSpanningAppointmentsForResource(resourceId); track spanning.appointment.id) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"spanning.appointment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || spanning.appointment.readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, spanning.appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, spanning.appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, spanning.appointment)\"\n [title]=\"\n tooltipTemplate()\n ? ''\n : spanning.appointment.title +\n ' (' +\n (spanning.appointment.startDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ' - ' +\n (spanning.appointment.endDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ')'\n \"\n class=\"ax-scheduler-timeline-spanning-appointment {{\n spanning.appointment.cssClass ??\n 'ax-scheduler-' + (spanning.appointment.priority ?? 'primary') + '-priority'\n }}\"\n [class.ax-spanning-start-clipped]=\"spanning.isStartClipped\"\n [class.ax-spanning-end-clipped]=\"spanning.isEndClipped\"\n [class.ax-state-active]=\"isActive(spanning.appointment.id)\"\n [style.grid-column]=\"spanning.startDayIndex + 1 + ' / span ' + spanning.spanCount\"\n [style.grid-row]=\"spanning.rowIndex + 1\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n [axTooltipContext]=\"spanning.appointment\"\n >\n <span class=\"ax-spanning-appointment-title\">\n <span class=\"ax-scheduler-truncate\">{{ spanning.appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, spanning.appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n ></ax-icon>\n }\n </span>\n </div>\n }\n </div>\n }\n\n @for (dayData of processedDayData(); track dayData.date.date.getTime()) {\n <div\n axDropZone\n #zone=\"axDropZone\"\n (onElementDrop)=\"handleDrop($event, dayData.date, resourceId)\"\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 [attr.data-slot-id]=\"dayData.date.format('YYYYMMDD')\"\n [attr.data-resource-id]=\"resourceId\"\n [style.--spanning-rows-count]=\"getMaxSpanningRowsForResource(resourceId)\"\n >\n <div class=\"ax-scheduler-timeline-appointment-container\">\n @for (\n segment of getAppointmentsForResourceAndDay(resourceId, dayData).visible;\n track segment.id + segment.originalStartDate.getTime()\n ) {\n <div\n axDrag\n [dragData]=\"segment\"\n [dragCursor]=\"'grab'\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || segment.readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, segment)\"\n (dblclick)=\"handleAppointmentEvent($event, segment)\"\n (contextmenu)=\"handleAppointmentEvent($event, segment)\"\n [title]=\"\n tooltipTemplate()\n ? ''\n : segment.allDay\n ? segment.title +\n ' (' +\n (segment.originalStartDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ' - ' +\n (segment.originalEndDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ')'\n : segment.title +\n ' (' +\n (segment.originalStartDate | format: 'time' : { calendar: calendar() } | async) +\n ' - ' +\n (segment.originalEndDate | format: 'time' : { calendar: calendar() } | async) +\n ')'\n \"\n class=\"ax-scheduler-timeline-appointment {{\n segment.cssClass ?? 'ax-scheduler-' + (segment.priority ?? 'primary') + '-priority'\n }}\"\n [class.all-day-segment]=\"segment.allDay\"\n [class.ax-state-active]=\"isActive(segment.id)\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n [axTooltipContext]=\"segment\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ segment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, segment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </ax-title>\n <ax-subtitle>\n @if (segment.allDay) {\n {{\n segment.originalStartDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async\n }}\n @if (segment.originalStartDate.getTime() !== segment.originalEndDate.getTime()) {\n -\n {{\n segment.originalEndDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async\n }}\n }\n } @else {\n {{\n segment.originalStartDate\n | format: 'time' : { format: 'HH:mm', calendar: calendar() }\n | async\n }}\n -\n {{\n segment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n }\n </ax-subtitle>\n </div>\n }\n @if (getAppointmentsForResourceAndDay(resourceId, dayData).moreCount > 0) {\n <div #moreAppointments class=\"ax-scheduler-month-overflow-badge\" (click)=\"$event.stopPropagation()\">\n +{{\n '@acorex:common.general.more-items'\n | translate\n : { params: { number: getAppointmentsForResourceAndDay(resourceId, dayData).moreCount } }\n | async\n }}\n </div>\n <ax-popover [target]=\"moreAppointments\" placement=\"bottom-start\" trigger=\"click\">\n <div\n axDropZone\n [class.ax-state-readonly]=\"readonly()\"\n class=\"ax-scheduler-popover ax-scheduler-month-popover-appointment\"\n >\n @for (\n segment of getAppointmentsForResourceAndDay(resourceId, dayData).hidden;\n track segment.id + segment.originalStartDate.getTime()\n ) {\n <div\n axDrag\n [dragData]=\"segment\"\n [dragCursor]=\"'grab'\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\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 tooltipTemplate()\n ? ''\n : segment.allDay\n ? segment.title +\n ' (' +\n (segment.originalStartDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ' - ' +\n (segment.originalEndDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ')'\n : segment.title +\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 segment.cssClass ?? 'ax-scheduler-' + (segment.priority ?? 'primary') + '-priority'\n }}\"\n [class.all-day-segment]=\"segment.allDay\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n [axTooltipContext]=\"segment\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ segment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, segment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </ax-title>\n <ax-subtitle>\n @if (segment.allDay) {\n {{\n segment.originalStartDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async\n }}\n @if (segment.originalStartDate.getTime() !== segment.originalEndDate.getTime()) {\n -\n {{\n segment.originalEndDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async\n }}\n }\n } @else {\n {{\n segment.originalStartDate\n | format: 'time' : { format: 'HH:mm', calendar: calendar() }\n | async\n }}\n -\n {{\n segment.originalEndDate\n | format: 'time' : { format: 'HH:mm', calendar: calendar() }\n | async\n }}\n }\n </ax-subtitle>\n </div>\n }\n </div>\n </ax-popover>\n }\n </div>\n </div>\n }\n </div>\n </div>\n }\n </div>\n </div>\n}\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-font-weight:initial;--tw-leading:initial;--tw-content:\"\"}}}@layer components{ax-scheduler-timeline-month-view{--ax-scheduler-timeline-spanning-row-height:1.5rem;--ax-scheduler-timeline-spanning-gap:.125rem;background-color:inherit;flex-direction:column;height:100%;display:inline-flex;position:relative}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-wrapper{flex-direction:column;height:100%;display:flex;position:relative}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-spanning-layer{pointer-events:none;inset-inline-start:calc(var(--spacing,.25rem) * 0);inset-inline-end:calc(var(--spacing,.25rem) * 0);top:calc(var(--spacing,.25rem) * 16);z-index:5;padding-inline:calc(var(--spacing,.25rem) * .5);padding-block:var(--spacing,.25rem);align-content:flex-start;row-gap:var(--ax-scheduler-timeline-spanning-gap);grid-auto-rows:var(--ax-scheduler-timeline-spanning-row-height);grid-template-columns:repeat(var(--timeline-days-count,31),var(--ax-comp-scheduler-timeline-month-view-blocks-width,calc(var(--ax-comp-scheduler-timeline-view-blocks-width) / 2)));display:grid;position:absolute}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-spanning-layer .ax-scheduler-timeline-spanning-appointment{z-index:6;cursor:pointer;text-overflow:ellipsis;border-radius:var(--radius-sm,.25rem);padding-inline:var(--spacing,.25rem);padding-block:calc(var(--spacing,.25rem) * .5);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));white-space:nowrap;pointer-events:auto;align-items:center;margin-inline:.125rem;display:flex;overflow:hidden}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-spanning-layer .ax-scheduler-timeline-spanning-appointment .ax-spanning-appointment-title{width:100%;height:100%;padding-inline:calc(var(--spacing,.25rem) * 2);justify-content:space-between;align-items:center;display:flex}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-spanning-layer .ax-scheduler-timeline-spanning-appointment .ax-spanning-appointment-title .ax-scheduler-truncate{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-spanning-layer .ax-scheduler-timeline-spanning-appointment .ax-spanning-appointment-title .ax-scheduler-action-icon{cursor:pointer;width:auto;flex-shrink:0;margin-inline-start:var(--spacing,.25rem)}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-spanning-layer .ax-scheduler-timeline-spanning-appointment.ax-spanning-start-clipped{border-start-start-radius:0;border-end-start-radius:0;margin-inline-start:0;position:relative}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-spanning-layer .ax-scheduler-timeline-spanning-appointment.ax-spanning-start-clipped:before{content:\"\\2190 \";top:calc(var(--spacing,.25rem) * .5);opacity:.7;font-size:.65rem;position:absolute;inset-inline-start:0}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-spanning-layer .ax-scheduler-timeline-spanning-appointment.ax-spanning-end-clipped{border-start-end-radius:0;border-end-end-radius:0;margin-inline-end:0;position:relative}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-spanning-layer .ax-scheduler-timeline-spanning-appointment.ax-spanning-end-clipped:after{content:\" \\2192\";top:calc(var(--spacing,.25rem) * .5);opacity:.7;font-size:.65rem;position:absolute;inset-inline-end:0}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{background-color:var(--ax-comp-scheduler-all-day-bg,inherit);width:100%;display:flex}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day{height:calc(var(--spacing,.25rem) * 16);width:var(--ax-comp-scheduler-timeline-month-view-blocks-width,calc(var(--ax-comp-scheduler-timeline-view-blocks-width) / 2));justify-content:center;align-items:flex-start;gap:var(--spacing,.25rem);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding-inline:calc(var(--spacing,.25rem) * 4);padding-block:var(--spacing,.25rem);flex-direction:column;display:flex;position:relative}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day.ax-state-today{background-color:rgba(var(--ax-sys-color-primary-surface))}@supports (color:color-mix(in lab,red,red)){ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day.ax-state-today{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 5%,transparent)}}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))}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{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,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{--tw-font-weight:var(--font-weight-bold,700);font-weight:var(--font-weight-bold,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:var(--ax-scheduler-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{--tw-leading:calc(var(--spacing,.25rem) * 4);max-width:100%;line-height:calc(var(--spacing,.25rem) * 4);--tw-font-weight:var(--font-weight-light,300);font-weight:var(--font-weight-light,300);position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 4)}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{font-size:var(--text-xl,1.25rem);line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75 / 1.25)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 4)}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content{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-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding:var(--spacing,.25rem);padding-top:calc(var(--spanning-rows-count,0) * (var(--ax-scheduler-timeline-spanning-row-height) + var(--ax-scheduler-timeline-spanning-gap)) + .25rem);position:relative}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container{gap:var(--ax-comp-scheduler-timeline-month-gap-height,.125rem);flex-direction:column;display:flex}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-timeline-appointment{min-height:calc(var(--spacing,.25rem) * 10);border-radius:calc(var(--ax-sys-border-radius) / 2);width:100%;padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:var(--spacing,.25rem);flex-direction:column;display:flex;overflow:hidden}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-month-overflow-badge{margin-top:calc(var(--spacing,.25rem) * .5);cursor:pointer;padding-inline:0;padding-block:calc(var(--spacing,.25rem) * .5);text-align:start;font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)))}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-line:underline}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container{background-color:inherit;flex-direction:column;height:100%;display:flex;position:relative}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-header-sticky{z-index:10;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;display:flex;position:sticky;top:0}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-header-sticky .ax-scheduler-timeline-month-resource-header-placeholder{z-index:15;width:var(--ax-comp-scheduler-resource-header-width,8rem);min-width:var(--ax-comp-scheduler-resource-header-width,8rem);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;padding:calc(var(--spacing,.25rem) * 2);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);justify-content:center;align-items:center;display:flex;position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 0)}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-header-sticky .ax-scheduler-timeline-month-day-header{background-color:inherit;flex:1;display:flex}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-header-sticky .ax-scheduler-timeline-month-day-header .ax-scheduler-month-header-date-day{height:calc(var(--spacing,.25rem) * 16);width:var(--ax-comp-scheduler-timeline-month-view-blocks-width,calc(var(--ax-comp-scheduler-timeline-view-blocks-width) / 2));min-width:var(--ax-comp-scheduler-timeline-month-view-blocks-width,calc(var(--ax-comp-scheduler-timeline-view-blocks-width) / 2));justify-content:center;align-items:flex-start;gap:var(--spacing,.25rem);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding-inline:calc(var(--spacing,.25rem) * 4);padding-block:var(--spacing,.25rem);flex-direction:column;display:flex;position:relative}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-header-sticky .ax-scheduler-timeline-month-day-header .ax-scheduler-month-header-date-day.ax-state-today{background-color:rgba(var(--ax-sys-color-primary-surface))}@supports (color:color-mix(in lab,red,red)){ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-header-sticky .ax-scheduler-timeline-month-day-header .ax-scheduler-month-header-date-day.ax-state-today{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 5%,transparent)}}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-header-sticky .ax-scheduler-timeline-month-day-header .ax-scheduler-month-header-date-day.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-header-sticky .ax-scheduler-timeline-month-day-header .ax-scheduler-month-header-date-day.ax-state-today .ax-scheduler-month-header-date-day-char{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-header-sticky .ax-scheduler-timeline-month-day-header .ax-scheduler-month-header-date-day.ax-state-today .ax-scheduler-month-header-date-day-num{--tw-font-weight:var(--font-weight-bold,700);font-weight:var(--font-weight-bold,700)}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-header-sticky .ax-scheduler-timeline-month-day-header .ax-scheduler-month-header-date-day.ax-state-holiday{color:var(--ax-scheduler-holiday-color,rgba(var(--ax-sys-color-danger-surface)))}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-header-sticky .ax-scheduler-timeline-month-day-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-resource-container .ax-scheduler-timeline-month-header-sticky .ax-scheduler-timeline-month-day-header .ax-scheduler-month-header-date-day .ax-scheduler-month-header-date-day-char{--tw-leading:calc(var(--spacing,.25rem) * 4);max-width:100%;line-height:calc(var(--spacing,.25rem) * 4);--tw-font-weight:var(--font-weight-light,300);font-weight:var(--font-weight-light,300);position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 4)}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-header-sticky .ax-scheduler-timeline-month-day-header .ax-scheduler-month-header-date-day .ax-scheduler-month-header-date-day-num{font-size:var(--text-xl,1.25rem);line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75 / 1.25)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 4)}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-resource-rows{background-color:inherit;flex:1;position:relative;overflow:visible}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-resource-rows .ax-scheduler-timeline-month-resource-row{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;width:max-content;min-height:calc(var(--resource-spanning-rows-count,0) * (var(--ax-scheduler-timeline-spanning-row-height) + var(--ax-scheduler-timeline-spanning-gap)) + var(--ax-comp-scheduler-timeline-month-row-base-height,5rem));display:flex}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-resource-rows .ax-scheduler-timeline-month-resource-row .ax-scheduler-timeline-month-resource-header{width:var(--ax-comp-scheduler-resource-header-width,8rem);min-width:var(--ax-comp-scheduler-resource-header-width,8rem);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;padding:calc(var(--spacing,.25rem) * 2);justify-content:center;align-self:stretch;align-items:center;display:flex}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-resource-rows .ax-scheduler-timeline-month-resource-row .ax-scheduler-timeline-month-resource-header.ax-scheduler-timeline-month-resource-header-sticky{z-index:9;background-color:inherit;position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 0)}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-resource-rows .ax-scheduler-timeline-month-resource-row .ax-scheduler-timeline-month-resource-header .ax-scheduler-timeline-month-resource-title{text-align:center;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);overflow-wrap:break-word}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-resource-rows .ax-scheduler-timeline-month-resource-row .ax-scheduler-timeline-month-resource-content{background-color:inherit;flex:1;display:flex;position:relative}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-resource-rows .ax-scheduler-timeline-month-resource-row .ax-scheduler-timeline-month-resource-content .ax-scheduler-timeline-resource-spanning-layer{pointer-events:none;z-index:5;padding-inline:calc(var(--spacing,.25rem) * .5);padding-block:var(--spacing,.25rem);align-content:flex-start;row-gap:var(--ax-scheduler-timeline-spanning-gap);grid-auto-rows:var(--ax-scheduler-timeline-spanning-row-height);grid-template-columns:repeat(var(--timeline-days-count,31),var(--ax-comp-scheduler-timeline-month-view-blocks-width,calc(var(--ax-comp-scheduler-timeline-view-blocks-width) / 2)));inset-inline-start:calc(var(--spacing,.25rem) * 0);inset-inline-end:calc(var(--spacing,.25rem) * 0);display:grid;position:absolute;top:0}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-resource-rows .ax-scheduler-timeline-month-resource-row .ax-scheduler-timeline-month-resource-content .ax-scheduler-timeline-resource-spanning-layer .ax-scheduler-timeline-spanning-appointment{z-index:6;cursor:pointer;text-overflow:ellipsis;border-radius:var(--radius-sm,.25rem);padding-inline:var(--spacing,.25rem);padding-block:calc(var(--spacing,.25rem) * .5);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));white-space:nowrap;pointer-events:auto;align-items:center;margin-inline:.125rem;display:flex;overflow:hidden}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-resource-rows .ax-scheduler-timeline-month-resource-row .ax-scheduler-timeline-month-resource-content .ax-scheduler-timeline-resource-spanning-layer .ax-scheduler-timeline-spanning-appointment .ax-spanning-appointment-title{width:100%;height:100%;padding-inline:calc(var(--spacing,.25rem) * 2);justify-content:space-between;align-items:center;display:flex}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-resource-rows .ax-scheduler-timeline-month-resource-row .ax-scheduler-timeline-month-resource-content .ax-scheduler-timeline-resource-spanning-layer .ax-scheduler-timeline-spanning-appointment .ax-spanning-appointment-title .ax-scheduler-truncate{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-resource-rows .ax-scheduler-timeline-month-resource-row .ax-scheduler-timeline-month-resource-content .ax-scheduler-timeline-resource-spanning-layer .ax-scheduler-timeline-spanning-appointment .ax-spanning-appointment-title .ax-scheduler-action-icon{cursor:pointer;width:auto;flex-shrink:0;margin-inline-start:var(--spacing,.25rem)}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-resource-rows .ax-scheduler-timeline-month-resource-row .ax-scheduler-timeline-month-resource-content .ax-scheduler-timeline-resource-spanning-layer .ax-scheduler-timeline-spanning-appointment.ax-spanning-start-clipped{border-start-start-radius:0;border-end-start-radius:0;margin-inline-start:0;position:relative}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-resource-rows .ax-scheduler-timeline-month-resource-row .ax-scheduler-timeline-month-resource-content .ax-scheduler-timeline-resource-spanning-layer .ax-scheduler-timeline-spanning-appointment.ax-spanning-start-clipped:before{content:\"\\2190 \";top:calc(var(--spacing,.25rem) * .5);opacity:.7;font-size:.65rem;position:absolute;inset-inline-start:0}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-resource-rows .ax-scheduler-timeline-month-resource-row .ax-scheduler-timeline-month-resource-content .ax-scheduler-timeline-resource-spanning-layer .ax-scheduler-timeline-spanning-appointment.ax-spanning-end-clipped{border-start-end-radius:0;border-end-end-radius:0;margin-inline-end:0;position:relative}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-resource-rows .ax-scheduler-timeline-month-resource-row .ax-scheduler-timeline-month-resource-content .ax-scheduler-timeline-resource-spanning-layer .ax-scheduler-timeline-spanning-appointment.ax-spanning-end-clipped:after{content:\" \\2192\";top:calc(var(--spacing,.25rem) * .5);opacity:.7;font-size:.65rem;position:absolute;inset-inline-end:0}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-resource-rows .ax-scheduler-timeline-month-resource-row .ax-scheduler-timeline-month-resource-content .ax-scheduler-timeline-content{width:var(--ax-comp-scheduler-timeline-month-view-blocks-width,calc(var(--ax-comp-scheduler-timeline-view-blocks-width) / 2));min-width:var(--ax-comp-scheduler-timeline-month-view-blocks-width,calc(var(--ax-comp-scheduler-timeline-view-blocks-width) / 2));border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;padding-bottom:var(--spacing,.25rem);padding-top:calc(var(--spanning-rows-count,0) * (var(--ax-scheduler-timeline-spanning-row-height) + var(--ax-scheduler-timeline-spanning-gap)) + .25rem);flex-direction:column;display:flex;position:relative}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-resource-rows .ax-scheduler-timeline-month-resource-row .ax-scheduler-timeline-month-resource-content .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container{gap:var(--ax-comp-scheduler-timeline-month-gap-height,.125rem);width:100%;padding-inline:var(--spacing,.25rem);flex-direction:column;display:flex}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-resource-rows .ax-scheduler-timeline-month-resource-row .ax-scheduler-timeline-month-resource-content .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-timeline-appointment{min-height:calc(var(--spacing,.25rem) * 10);border-radius:calc(var(--ax-sys-border-radius) / 2);width:100%;padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:var(--spacing,.25rem);flex-direction:column;flex-shrink:0;display:flex;overflow:hidden}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-resource-rows .ax-scheduler-timeline-month-resource-row .ax-scheduler-timeline-month-resource-content .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-month-overflow-badge{margin-top:calc(var(--spacing,.25rem) * .5);cursor:pointer;padding-inline:0;padding-block:calc(var(--spacing,.25rem) * .5);text-align:start;font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));flex-shrink:0}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-resource-rows .ax-scheduler-timeline-month-resource-row .ax-scheduler-timeline-month-resource-content .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-month-overflow-badge:hover{text-decoration-line: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-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));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))}ax-scheduler-timeline-month-view ax-title{justify-content:space-between;display:flex}ax-scheduler-timeline-month-view ax-title .ax-scheduler-action-icon{cursor:pointer;width:auto}ax-scheduler-timeline-month-view .ax-scheduler-current-time-line{width:calc(var(--spacing,.25rem) * .5);top:0;bottom:0}ax-scheduler-timeline-month-view .ax-scheduler-current-time-line:before{content:var(--tw-content);inset-inline-start:-5px;top:calc(var(--spacing,.25rem) * -1.5)}ax-scheduler.ax-rtl ax-scheduler-timeline-month-view .ax-scheduler-timeline-spanning-appointment.ax-spanning-start-clipped:before{content:\"\\2192 \"}ax-scheduler.ax-rtl ax-scheduler-timeline-month-view .ax-scheduler-timeline-spanning-appointment.ax-spanning-end-clipped:after{content:\" \\2190\"}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-leading{syntax:\"*\";inherits:false}@property --tw-content{syntax:\"*\";inherits:false;initial-value:\"\"}\n/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["axDrag", "dragData", "dragDisabled", "dragTransition", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragClonedTemplate", "dragCursor", "dragBoundary", "dragTransitionDuration"], outputs: ["dragPositionChanged"] }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "directive", type: AXDropZoneDirective, selector: "[axDropZone]", inputs: ["dropZoneGroup"], outputs: ["onElementDrop", "onElementHover"], exportAs: ["axDropZone"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXFormatPipe, name: "format" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
2804
2824
|
}
|
|
2805
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
2825
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXSchedulerTimelineMonthViewComponent, decorators: [{
|
|
2806
2826
|
type: Component,
|
|
2807
2827
|
args: [{ selector: 'ax-scheduler-timeline-month-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
2808
2828
|
'[class.ax-state-readonly]': 'readonly()',
|
|
@@ -2817,9 +2837,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
|
|
|
2817
2837
|
AXDropZoneDirective,
|
|
2818
2838
|
AXDecoratorIconComponent,
|
|
2819
2839
|
AXDecoratorGenericComponent,
|
|
2820
|
-
], providers: [{ provide: AXComponent, useExisting: AXSchedulerTimelineMonthViewComponent }], template: "@if (resources().length === 0 || !showResourceHeaders()) {\n <!-- Original layout when no resources -->\n <div class=\"ax-scheduler-timeline-month-wrapper\">\n <!-- Spanning appointments layer -->\n @if (spanningAppointments().length > 0) {\n <div class=\"ax-scheduler-timeline-month-spanning-layer\" [style.--timeline-days-count]=\"processedDayData().length\">\n @for (spanning of spanningAppointments(); track spanning.appointment.id) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"spanning.appointment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || spanning.appointment.readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, spanning.appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, spanning.appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, spanning.appointment)\"\n [title]=\"\n tooltipTemplate()\n ? ''\n : spanning.appointment.title +\n ' (' +\n (spanning.appointment.startDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ' - ' +\n (spanning.appointment.endDate | format: 'date' : { format: 'MMM d', calendar: calendar() } | async) +\n ')'\n \"\n class=\"ax-scheduler-timeline-spanning-appointment {{\n spanning.appointment.cssClass ??\n 'ax-scheduler-' + (spanning.appointment.priority ?? 'primary') + '-priority'\n }}\"\n [class.ax-spanning-start-clipped]=\"spanning.isStartClipped\"\n [class.ax-spanning-end-clipped]=\"spanning.isEndClipped\"\n [class.ax-state-active]=\"isActive(spanning.appointment.id)\"\n [style.grid-column]=\"spanning.startDayIndex + 1 + ' / span ' + spanning.spanCount\"\n [style.grid-row]=\"spanning.rowIndex + 1\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n [axTooltipContext]=\"spanning.appointment\"\n >\n <span class=\"ax-spanning-appointment-title\">\n <span class=\"ax-scheduler-truncate\">{{ spanning.appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, spanning.appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n ></ax-icon>\n }\n </span>\n </div>\n }\n </div>\n }\n\n <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-state-today]=\"isToday(dayData.date)\"\n class=\"ax-scheduler-month-header-date-day {{\n dayData.holiday.state !== 'none' ? (dayData.holiday.holiday?.cssClass ?? 'ax-state-holiday') : ''\n }}\"\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 [attr.data-slot-id]=\"dayData.date.format('YYYYMMDD')\"\n [style.--spanning-rows-count]=\"maxSpanningRows()\"\n >\n <!-- Current Time Line Indicator -->\n @if (\n showCurrentTimeIndicator() &&\n shouldShowCurrentTimeForDay(dayData.date) &&\n getCurrentTimePosition() !== null\n ) {\n <div\n class=\"ax-scheduler-current-time-line\"\n [style.inset-inline-start.%]=\"getCurrentTimePosition()\"\n #currentTimeLine\n ></div>\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 [dragData]=\"segment\"\n [dragCursor]=\"'grab'\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || segment.readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, segment)\"\n (dblclick)=\"handleAppointmentEvent($event, segment)\"\n (contextmenu)=\"handleAppointmentEvent($event, segment)\"\n [title]=\"\n tooltipTemplate()\n ? ''\n : segment.title +\n ' (' +\n (segment.originalStartDate | format: 'time' : { calendar: calendar() } | async) +\n ' - ' +\n (segment.originalEndDate | format: 'time' : { calendar: calendar() } | async) +\n ')'\n \"\n class=\"ax-scheduler-timeline-appointment {{\n segment.cssClass ?? 'ax-scheduler-' + (segment.priority ?? 'primary') + '-priority'\n }}\"\n [class.ax-state-active]=\"isActive(segment.id)\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n [axTooltipContext]=\"segment\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ segment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, segment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </ax-title>\n <ax-subtitle>\n {{ segment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n -\n {{ segment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n </ax-subtitle>\n </div>\n }\n @if (dayData.moreCount > 0) {\n <div #moreAppointments class=\"ax-scheduler-month-overflow-badge\" (click)=\"$event.stopPropagation()\">\n +{{\n '@acorex:common.general.more-items' | translate: { params: { number: dayData.moreCount } } | async\n }}\n </div>\n <ax-popover [target]=\"moreAppointments\" placement=\"bottom-start\" trigger=\"click\">\n <div\n axDropZone\n [class.ax-state-readonly]=\"readonly()\"\n class=\"ax-scheduler-popover ax-scheduler-month-popover-appointment\"\n >\n @for (\n segment of dayData.hiddenAppointments;\n track segment.id + segment.originalStartDate.getTime()\n ) {\n <div\n axDrag\n [dragData]=\"segment\"\n [dragCursor]=\"'grab'\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\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 tooltipTemplate()\n ? ''\n : segment.title +\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 segment.cssClass ?? 'ax-scheduler-' + (segment.priority ?? 'primary') + '-priority'\n }}\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n [axTooltipContext]=\"segment\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ segment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, segment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </ax-title>\n <ax-subtitle>\n {{\n segment.originalStartDate\n | format: 'time' : { format: 'HH:mm', calendar: calendar() }\n | async\n }}\n -\n {{\n segment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n </ax-subtitle>\n </div>\n }\n </div>\n </ax-popover>\n }\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n} @else {\n <!-- Resource-based layout with sticky resources -->\n <div class=\"ax-scheduler-timeline-month-resource-container\">\n <!-- Sticky header with resource placeholder and day headers -->\n @if (showResourceHeaders()) {\n <div class=\"ax-scheduler-timeline-month-header-sticky\">\n <div class=\"ax-scheduler-timeline-month-resource-header-placeholder\"><span>Resources</span></div>\n @for (dayData of processedDayData(); track dayData.date.date.getTime()) {\n <div class=\"ax-scheduler-timeline-month-day-header\">\n <div\n [class.ax-state-today]=\"isToday(dayData.date)\"\n class=\"ax-scheduler-month-header-date-day {{\n dayData.holiday?.state !== 'none' ? (dayData.holiday?.holiday?.cssClass ?? 'ax-state-holiday') : ''\n }}\"\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 }\n\n <!-- Resource rows with sticky resource headers -->\n <div class=\"ax-scheduler-timeline-month-resource-rows\">\n <!-- Current Time Line Indicator -->\n @if (showCurrentTimeIndicator() && getCurrentTimePosition() !== null) {\n <div\n class=\"ax-scheduler-current-time-line\"\n [style.inset-inline-start.%]=\"getCurrentTimePosition()\"\n #currentTimeLine\n ></div>\n }\n\n @for (resourceId of resourceIds(); track resourceId) {\n <div\n class=\"ax-scheduler-timeline-month-resource-row\"\n [style.--resource-spanning-rows-count]=\"getMaxSpanningRowsForResource(resourceId)\"\n >\n @if (showResourceHeaders()) {\n <!-- Sticky Resource Header -->\n <div class=\"ax-scheduler-timeline-month-resource-header ax-scheduler-timeline-month-resource-header-sticky\">\n @if (resourceTemplate() && typeof resourceTemplate() !== 'string') {\n <ng-container\n [ngTemplateOutlet]=\"$any(resourceTemplate())\"\n [ngTemplateOutletContext]=\"{\n $implicit: getResourceContext(resourceId),\n resource: getResourceContext(resourceId),\n resourceId: resourceId,\n }\"\n ></ng-container>\n } @else {\n <span class=\"ax-scheduler-timeline-month-resource-title\">{{ getResourceTitle(resourceId) }}</span>\n }\n </div>\n }\n\n <!-- Resource Content -->\n <div class=\"ax-scheduler-timeline-month-resource-content\">\n <!-- Spanning appointments layer for this resource -->\n @if (getSpanningAppointmentsForResource(resourceId).length > 0) {\n <div\n class=\"ax-scheduler-timeline-resource-spanning-layer\"\n [style.--timeline-days-count]=\"processedDayData().length\"\n >\n @for (spanning of getSpanningAppointmentsForResource(resourceId); track spanning.appointment.id) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"spanning.appointment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || spanning.appointment.readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, spanning.appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, spanning.appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, spanning.appointment)\"\n [title]=\"\n tooltipTemplate()\n ? ''\n : spanning.appointment.title +\n ' (' +\n (spanning.appointment.startDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ' - ' +\n (spanning.appointment.endDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ')'\n \"\n class=\"ax-scheduler-timeline-spanning-appointment {{\n spanning.appointment.cssClass ??\n 'ax-scheduler-' + (spanning.appointment.priority ?? 'primary') + '-priority'\n }}\"\n [class.ax-spanning-start-clipped]=\"spanning.isStartClipped\"\n [class.ax-spanning-end-clipped]=\"spanning.isEndClipped\"\n [class.ax-state-active]=\"isActive(spanning.appointment.id)\"\n [style.grid-column]=\"spanning.startDayIndex + 1 + ' / span ' + spanning.spanCount\"\n [style.grid-row]=\"spanning.rowIndex + 1\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n [axTooltipContext]=\"spanning.appointment\"\n >\n <span class=\"ax-spanning-appointment-title\">\n <span class=\"ax-scheduler-truncate\">{{ spanning.appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, spanning.appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n ></ax-icon>\n }\n </span>\n </div>\n }\n </div>\n }\n\n @for (dayData of processedDayData(); track dayData.date.date.getTime()) {\n <div\n axDropZone\n #zone=\"axDropZone\"\n (onElementDrop)=\"handleDrop($event, dayData.date, resourceId)\"\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 [attr.data-slot-id]=\"dayData.date.format('YYYYMMDD')\"\n [attr.data-resource-id]=\"resourceId\"\n [style.--spanning-rows-count]=\"getMaxSpanningRowsForResource(resourceId)\"\n >\n <div class=\"ax-scheduler-timeline-appointment-container\">\n @for (\n segment of getAppointmentsForResourceAndDay(resourceId, dayData).visible;\n track segment.id + segment.originalStartDate.getTime()\n ) {\n <div\n axDrag\n [dragData]=\"segment\"\n [dragCursor]=\"'grab'\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || segment.readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, segment)\"\n (dblclick)=\"handleAppointmentEvent($event, segment)\"\n (contextmenu)=\"handleAppointmentEvent($event, segment)\"\n [title]=\"\n tooltipTemplate()\n ? ''\n : segment.allDay\n ? segment.title +\n ' (' +\n (segment.originalStartDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ' - ' +\n (segment.originalEndDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ')'\n : segment.title +\n ' (' +\n (segment.originalStartDate | format: 'time' : { calendar: calendar() } | async) +\n ' - ' +\n (segment.originalEndDate | format: 'time' : { calendar: calendar() } | async) +\n ')'\n \"\n class=\"ax-scheduler-timeline-appointment {{\n segment.cssClass ?? 'ax-scheduler-' + (segment.priority ?? 'primary') + '-priority'\n }}\"\n [class.all-day-segment]=\"segment.allDay\"\n [class.ax-state-active]=\"isActive(segment.id)\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n [axTooltipContext]=\"segment\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ segment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, segment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </ax-title>\n <ax-subtitle>\n @if (segment.allDay) {\n {{\n segment.originalStartDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async\n }}\n @if (segment.originalStartDate.getTime() !== segment.originalEndDate.getTime()) {\n -\n {{\n segment.originalEndDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async\n }}\n }\n } @else {\n {{\n segment.originalStartDate\n | format: 'time' : { format: 'HH:mm', calendar: calendar() }\n | async\n }}\n -\n {{\n segment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n }\n </ax-subtitle>\n </div>\n }\n @if (getAppointmentsForResourceAndDay(resourceId, dayData).moreCount > 0) {\n <div #moreAppointments class=\"ax-scheduler-month-overflow-badge\" (click)=\"$event.stopPropagation()\">\n +{{\n '@acorex:common.general.more-items'\n | translate\n : { params: { number: getAppointmentsForResourceAndDay(resourceId, dayData).moreCount } }\n | async\n }}\n </div>\n <ax-popover [target]=\"moreAppointments\" placement=\"bottom-start\" trigger=\"click\">\n <div\n axDropZone\n [class.ax-state-readonly]=\"readonly()\"\n class=\"ax-scheduler-popover ax-scheduler-month-popover-appointment\"\n >\n @for (\n segment of getAppointmentsForResourceAndDay(resourceId, dayData).hidden;\n track segment.id + segment.originalStartDate.getTime()\n ) {\n <div\n axDrag\n [dragData]=\"segment\"\n [dragCursor]=\"'grab'\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\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 tooltipTemplate()\n ? ''\n : segment.allDay\n ? segment.title +\n ' (' +\n (segment.originalStartDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ' - ' +\n (segment.originalEndDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ')'\n : segment.title +\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 segment.cssClass ?? 'ax-scheduler-' + (segment.priority ?? 'primary') + '-priority'\n }}\"\n [class.all-day-segment]=\"segment.allDay\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n [axTooltipContext]=\"segment\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ segment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, segment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </ax-title>\n <ax-subtitle>\n @if (segment.allDay) {\n {{\n segment.originalStartDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async\n }}\n @if (segment.originalStartDate.getTime() !== segment.originalEndDate.getTime()) {\n -\n {{\n segment.originalEndDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async\n }}\n }\n } @else {\n {{\n segment.originalStartDate\n | format: 'time' : { format: 'HH:mm', calendar: calendar() }\n | async\n }}\n -\n {{\n segment.originalEndDate\n | format: 'time' : { format: 'HH:mm', calendar: calendar() }\n | async\n }}\n }\n </ax-subtitle>\n </div>\n }\n </div>\n </ax-popover>\n }\n </div>\n </div>\n }\n </div>\n </div>\n }\n </div>\n </div>\n}\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-font-weight:initial;--tw-leading:initial;--tw-content:\"\"}}}@layer components{ax-scheduler-timeline-month-view{background-color:inherit;flex-direction:column;height:100%;display:inline-flex;position:relative}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{background-color:var(--ax-comp-scheduler-all-day-bg,inherit);width:100%;display:flex}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day{height:calc(var(--spacing,.25rem) * 16);width:var(--ax-comp-scheduler-timeline-month-view-blocks-width,calc(var(--ax-comp-scheduler-timeline-view-blocks-width) / 2));justify-content:center;align-items:flex-start;gap:calc(var(--spacing,.25rem) * 1);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding-inline:calc(var(--spacing,.25rem) * 4);padding-block:calc(var(--spacing,.25rem) * 1);flex-direction:column;display:flex;position:relative}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day.ax-state-today{background-color:rgba(var(--ax-sys-color-primary-surface))}@supports (color:color-mix(in lab,red,red)){ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day.ax-state-today{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 5%,transparent)}}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))}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{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,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{--tw-font-weight:var(--font-weight-bold,700);font-weight:var(--font-weight-bold,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-600))}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{--tw-leading:calc(var(--spacing,.25rem) * 4);max-width:100%;line-height:calc(var(--spacing,.25rem) * 4);--tw-font-weight:var(--font-weight-light,300);font-weight:var(--font-weight-light,300);position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 4)}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{font-size:var(--text-xl,1.25rem);line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75 / 1.25)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 4)}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content{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-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:calc(var(--spacing,.25rem) * 1);position:relative}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container{flex-direction:column;gap:1px;display:flex}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-timeline-appointment{border-radius:calc(var(--ax-sys-border-radius) / 2);width:100%;padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:calc(var(--spacing,.25rem) * 1);flex-direction:column;display:flex;overflow:hidden}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-month-overflow-badge{margin-top:calc(var(--spacing,.25rem) * .5);cursor:pointer;padding-inline:calc(var(--spacing,.25rem) * 0);padding-block:calc(var(--spacing,.25rem) * .5);text-align:start;font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)))}@media(hover:hover){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-line:underline}}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container{background-color:inherit;flex-direction:column;height:100%;display:flex;position:relative}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-header-sticky{top:calc(var(--spacing,.25rem) * 0);z-index:10;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;display:flex;position:sticky}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-header-sticky .ax-scheduler-timeline-month-resource-header-placeholder{z-index:15;width:var(--ax-comp-scheduler-resource-header-width,8rem);min-width:var(--ax-comp-scheduler-resource-header-width,8rem);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;padding:calc(var(--spacing,.25rem) * 2);text-align:center;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);justify-content:center;display:flex;position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 0)}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-header-sticky .ax-scheduler-timeline-month-day-header{background-color:inherit;flex:1;display:flex}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-header-sticky .ax-scheduler-timeline-month-day-header .ax-scheduler-month-header-date-day{height:calc(var(--spacing,.25rem) * 16);width:var(--ax-comp-scheduler-timeline-month-view-blocks-width,calc(var(--ax-comp-scheduler-timeline-view-blocks-width) / 2));min-width:var(--ax-comp-scheduler-timeline-month-view-blocks-width,calc(var(--ax-comp-scheduler-timeline-view-blocks-width) / 2));justify-content:center;gap:calc(var(--spacing,.25rem) * 1);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding-inline:calc(var(--spacing,.25rem) * 4);padding-block:calc(var(--spacing,.25rem) * 1);text-align:start;flex-direction:column;display:flex;position:relative}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-header-sticky .ax-scheduler-timeline-month-day-header .ax-scheduler-month-header-date-day.ax-state-today{background-color:rgba(var(--ax-sys-color-primary-surface))}@supports (color:color-mix(in lab,red,red)){ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-header-sticky .ax-scheduler-timeline-month-day-header .ax-scheduler-month-header-date-day.ax-state-today{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 5%,transparent)}}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-header-sticky .ax-scheduler-timeline-month-day-header .ax-scheduler-month-header-date-day.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-header-sticky .ax-scheduler-timeline-month-day-header .ax-scheduler-month-header-date-day.ax-state-today .ax-scheduler-month-header-date-day-char{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-header-sticky .ax-scheduler-timeline-month-day-header .ax-scheduler-month-header-date-day.ax-state-today .ax-scheduler-month-header-date-day-num{--tw-font-weight:var(--font-weight-bold,700);font-weight:var(--font-weight-bold,700)}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-header-sticky .ax-scheduler-timeline-month-day-header .ax-scheduler-month-header-date-day.ax-state-holiday{color:rgba(var(--ax-sys-color-danger-600))}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-header-sticky .ax-scheduler-timeline-month-day-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-resource-container .ax-scheduler-timeline-month-header-sticky .ax-scheduler-timeline-month-day-header .ax-scheduler-month-header-date-day .ax-scheduler-month-header-date-day-char{--tw-leading:calc(var(--spacing,.25rem) * 4);max-width:100%;line-height:calc(var(--spacing,.25rem) * 4);--tw-font-weight:var(--font-weight-light,300);font-weight:var(--font-weight-light,300);position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 4)}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-header-sticky .ax-scheduler-timeline-month-day-header .ax-scheduler-month-header-date-day .ax-scheduler-month-header-date-day-num{font-size:var(--text-xl,1.25rem);line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75 / 1.25)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 4)}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-resource-rows{background-color:inherit;flex:1;position:relative;overflow:visible}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-resource-rows .ax-scheduler-timeline-month-resource-row{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;width:max-content;min-height:3.313rem;display:flex}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-resource-rows .ax-scheduler-timeline-month-resource-row .ax-scheduler-timeline-month-resource-header{width:var(--ax-comp-scheduler-resource-header-width,8rem);min-width:var(--ax-comp-scheduler-resource-header-width,8rem);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;padding:calc(var(--spacing,.25rem) * 2);justify-content:center;align-items:center;display:flex}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-resource-rows .ax-scheduler-timeline-month-resource-row .ax-scheduler-timeline-month-resource-header.ax-scheduler-timeline-month-resource-header-sticky{z-index:15;background-color:inherit;position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 0)}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-resource-rows .ax-scheduler-timeline-month-resource-row .ax-scheduler-timeline-month-resource-header .ax-scheduler-timeline-month-resource-title{text-align:center;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);overflow-wrap:break-word}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-resource-rows .ax-scheduler-timeline-month-resource-row .ax-scheduler-timeline-month-resource-content{background-color:inherit;flex:1;display:flex}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-resource-rows .ax-scheduler-timeline-month-resource-row .ax-scheduler-timeline-month-resource-content .ax-scheduler-timeline-content{width:var(--ax-comp-scheduler-timeline-month-view-blocks-width,calc(var(--ax-comp-scheduler-timeline-view-blocks-width) / 2));min-width:var(--ax-comp-scheduler-timeline-month-view-blocks-width,calc(var(--ax-comp-scheduler-timeline-view-blocks-width) / 2));border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;flex:1;display:flex;position:relative}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-resource-rows .ax-scheduler-timeline-month-resource-row .ax-scheduler-timeline-month-resource-content .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container{gap:var(--ax-comp-scheduler-timeline-month-gap-height,.125rem);width:100%;height:100%;padding-inline:calc(var(--spacing,.25rem) * 1);padding-block:calc(var(--spacing,.25rem) * .5);flex-direction:column;display:flex;overflow:hidden}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-resource-rows .ax-scheduler-timeline-month-resource-row .ax-scheduler-timeline-month-resource-content .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-timeline-appointment{height:var(--ax-comp-scheduler-timeline-month-appointment-height,3rem);border-radius:calc(var(--ax-sys-border-radius) / 2);width:100%;padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:calc(var(--spacing,.25rem) * 1);flex-direction:column;flex-shrink:0;display:flex;overflow:hidden}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-resource-rows .ax-scheduler-timeline-month-resource-row .ax-scheduler-timeline-month-resource-content .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-month-overflow-badge{height:var(--ax-comp-scheduler-timeline-month-more-link-height,.5rem);cursor:pointer;padding-inline:calc(var(--spacing,.25rem) * 0);padding-block:calc(var(--spacing,.25rem) * .5);text-align:start;font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));flex-shrink:0}@media(hover:hover){ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-resource-rows .ax-scheduler-timeline-month-resource-row .ax-scheduler-timeline-month-resource-content .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-month-overflow-badge:hover{text-decoration-line: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-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}@media(hover:hover){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))}}ax-scheduler-timeline-month-view ax-title{justify-content:space-between;display:flex}ax-scheduler-timeline-month-view ax-title .ax-scheduler-action-icon{cursor:pointer;width:auto}ax-scheduler-timeline-month-view .ax-scheduler-current-time-line{top:calc(var(--spacing,.25rem) * 0);bottom:calc(var(--spacing,.25rem) * 0);width:calc(var(--spacing,.25rem) * .5)}ax-scheduler-timeline-month-view .ax-scheduler-current-time-line:before{content:var(--tw-content);inset-inline-start:-5px;top:calc(var(--spacing,.25rem) * -1.5)}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-leading{syntax:\"*\";inherits:false}@property --tw-content{syntax:\"*\";inherits:false;initial-value:\"\"}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"] }]
|
|
2840
|
+
], providers: [{ provide: AXComponent, useExisting: AXSchedulerTimelineMonthViewComponent }], template: "@if (resources().length === 0 || !showResourceHeaders()) {\n <!-- Original layout when no resources -->\n <div class=\"ax-scheduler-timeline-month-wrapper\">\n <!-- Spanning appointments layer -->\n @if (spanningAppointments().length > 0) {\n <div class=\"ax-scheduler-timeline-month-spanning-layer\" [style.--timeline-days-count]=\"processedDayData().length\">\n @for (spanning of spanningAppointments(); track spanning.appointment.id) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"spanning.appointment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || spanning.appointment.readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, spanning.appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, spanning.appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, spanning.appointment)\"\n [title]=\"\n tooltipTemplate()\n ? ''\n : spanning.appointment.title +\n ' (' +\n (spanning.appointment.startDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ' - ' +\n (spanning.appointment.endDate | format: 'date' : { format: 'MMM d', calendar: calendar() } | async) +\n ')'\n \"\n class=\"ax-scheduler-timeline-spanning-appointment {{\n spanning.appointment.cssClass ??\n 'ax-scheduler-' + (spanning.appointment.priority ?? 'primary') + '-priority'\n }}\"\n [class.ax-spanning-start-clipped]=\"spanning.isStartClipped\"\n [class.ax-spanning-end-clipped]=\"spanning.isEndClipped\"\n [class.ax-state-active]=\"isActive(spanning.appointment.id)\"\n [style.grid-column]=\"spanning.startDayIndex + 1 + ' / span ' + spanning.spanCount\"\n [style.grid-row]=\"spanning.rowIndex + 1\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n [axTooltipContext]=\"spanning.appointment\"\n >\n <span class=\"ax-spanning-appointment-title\">\n <span class=\"ax-scheduler-truncate\">{{ spanning.appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, spanning.appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n ></ax-icon>\n }\n </span>\n </div>\n }\n </div>\n }\n\n <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-state-today]=\"isToday(dayData.date)\"\n class=\"ax-scheduler-month-header-date-day {{\n dayData.holiday.state !== 'none' ? (dayData.holiday.holiday?.cssClass ?? 'ax-state-holiday') : ''\n }}\"\n [style.--ax-scheduler-holiday-color]=\"dayData.holiday.holiday?.color ?? null\"\n >\n <span\n class=\"ax-scheduler-month-header-date-day-char ax-scheduler-truncate\"\n [axTooltip]=\"(dayData.holiday.holiday?.description ?? dayData.holiday.holiday?.title ?? '') | translate | async\"\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 | translate | async }} )\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 [attr.data-slot-id]=\"dayData.date.format('YYYYMMDD')\"\n [style.--spanning-rows-count]=\"maxSpanningRows()\"\n >\n <!-- Current Time Line Indicator -->\n @if (\n showCurrentTimeIndicator() &&\n shouldShowCurrentTimeForDay(dayData.date) &&\n getCurrentTimePosition() !== null\n ) {\n <div\n class=\"ax-scheduler-current-time-line\"\n [style.inset-inline-start.%]=\"getCurrentTimePosition()\"\n #currentTimeLine\n ></div>\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 [dragData]=\"segment\"\n [dragCursor]=\"'grab'\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || segment.readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, segment)\"\n (dblclick)=\"handleAppointmentEvent($event, segment)\"\n (contextmenu)=\"handleAppointmentEvent($event, segment)\"\n [title]=\"\n tooltipTemplate()\n ? ''\n : segment.title +\n ' (' +\n (segment.originalStartDate | format: 'time' : { calendar: calendar() } | async) +\n ' - ' +\n (segment.originalEndDate | format: 'time' : { calendar: calendar() } | async) +\n ')'\n \"\n class=\"ax-scheduler-timeline-appointment {{\n segment.cssClass ?? 'ax-scheduler-' + (segment.priority ?? 'primary') + '-priority'\n }}\"\n [class.ax-state-active]=\"isActive(segment.id)\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n [axTooltipContext]=\"segment\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ segment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, segment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </ax-title>\n <ax-subtitle>\n {{ segment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n -\n {{ segment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n </ax-subtitle>\n </div>\n }\n @if (dayData.moreCount > 0) {\n <div #moreAppointments class=\"ax-scheduler-month-overflow-badge\" (click)=\"$event.stopPropagation()\">\n +{{\n '@acorex:common.general.more-items' | translate: { params: { number: dayData.moreCount } } | async\n }}\n </div>\n <ax-popover [target]=\"moreAppointments\" placement=\"bottom-start\" trigger=\"click\">\n <div\n axDropZone\n [class.ax-state-readonly]=\"readonly()\"\n class=\"ax-scheduler-popover ax-scheduler-month-popover-appointment\"\n >\n @for (\n segment of dayData.hiddenAppointments;\n track segment.id + segment.originalStartDate.getTime()\n ) {\n <div\n axDrag\n [dragData]=\"segment\"\n [dragCursor]=\"'grab'\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\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 tooltipTemplate()\n ? ''\n : segment.title +\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 segment.cssClass ?? 'ax-scheduler-' + (segment.priority ?? 'primary') + '-priority'\n }}\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n [axTooltipContext]=\"segment\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ segment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, segment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </ax-title>\n <ax-subtitle>\n {{\n segment.originalStartDate\n | format: 'time' : { format: 'HH:mm', calendar: calendar() }\n | async\n }}\n -\n {{\n segment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n </ax-subtitle>\n </div>\n }\n </div>\n </ax-popover>\n }\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n} @else {\n <!-- Resource-based layout with sticky resources -->\n <div class=\"ax-scheduler-timeline-month-resource-container\">\n <!-- Sticky header with resource placeholder and day headers -->\n @if (showResourceHeaders()) {\n <div class=\"ax-scheduler-timeline-month-header-sticky\">\n <div class=\"ax-scheduler-timeline-month-resource-header-placeholder\"><span>Resources</span></div>\n @for (dayData of processedDayData(); track dayData.date.date.getTime()) {\n <div class=\"ax-scheduler-timeline-month-day-header\">\n <div\n [class.ax-state-today]=\"isToday(dayData.date)\"\n class=\"ax-scheduler-month-header-date-day {{\n dayData.holiday?.state !== 'none' ? (dayData.holiday?.holiday?.cssClass ?? 'ax-state-holiday') : ''\n }}\"\n [style.--ax-scheduler-holiday-color]=\"dayData.holiday?.holiday?.color ?? null\"\n >\n <span\n class=\"ax-scheduler-month-header-date-day-char ax-scheduler-truncate\"\n [axTooltip]=\"(dayData.holiday?.holiday?.description ?? dayData.holiday?.holiday?.title ?? '') | translate | async\"\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 | translate | async }} )\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 }\n\n <!-- Resource rows with sticky resource headers -->\n <div class=\"ax-scheduler-timeline-month-resource-rows\">\n <!-- Current Time Line Indicator -->\n @if (showCurrentTimeIndicator() && getCurrentTimePosition() !== null) {\n <div\n class=\"ax-scheduler-current-time-line\"\n [style.inset-inline-start.%]=\"getCurrentTimePosition()\"\n #currentTimeLine\n ></div>\n }\n\n @for (resourceId of resourceIds(); track resourceId) {\n <div\n class=\"ax-scheduler-timeline-month-resource-row\"\n [style.--resource-spanning-rows-count]=\"getMaxSpanningRowsForResource(resourceId)\"\n >\n @if (showResourceHeaders()) {\n <!-- Sticky Resource Header -->\n <div class=\"ax-scheduler-timeline-month-resource-header ax-scheduler-timeline-month-resource-header-sticky\">\n @if (resourceTemplate() && typeof resourceTemplate() !== 'string') {\n <ng-container\n [ngTemplateOutlet]=\"$any(resourceTemplate())\"\n [ngTemplateOutletContext]=\"{\n $implicit: getResourceContext(resourceId),\n resource: getResourceContext(resourceId),\n resourceId: resourceId,\n }\"\n ></ng-container>\n } @else {\n <span class=\"ax-scheduler-timeline-month-resource-title\">{{ getResourceTitle(resourceId) }}</span>\n }\n </div>\n }\n\n <!-- Resource Content -->\n <div class=\"ax-scheduler-timeline-month-resource-content\">\n <!-- Spanning appointments layer for this resource -->\n @if (getSpanningAppointmentsForResource(resourceId).length > 0) {\n <div\n class=\"ax-scheduler-timeline-resource-spanning-layer\"\n [style.--timeline-days-count]=\"processedDayData().length\"\n >\n @for (spanning of getSpanningAppointmentsForResource(resourceId); track spanning.appointment.id) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"spanning.appointment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || spanning.appointment.readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, spanning.appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, spanning.appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, spanning.appointment)\"\n [title]=\"\n tooltipTemplate()\n ? ''\n : spanning.appointment.title +\n ' (' +\n (spanning.appointment.startDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ' - ' +\n (spanning.appointment.endDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ')'\n \"\n class=\"ax-scheduler-timeline-spanning-appointment {{\n spanning.appointment.cssClass ??\n 'ax-scheduler-' + (spanning.appointment.priority ?? 'primary') + '-priority'\n }}\"\n [class.ax-spanning-start-clipped]=\"spanning.isStartClipped\"\n [class.ax-spanning-end-clipped]=\"spanning.isEndClipped\"\n [class.ax-state-active]=\"isActive(spanning.appointment.id)\"\n [style.grid-column]=\"spanning.startDayIndex + 1 + ' / span ' + spanning.spanCount\"\n [style.grid-row]=\"spanning.rowIndex + 1\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n [axTooltipContext]=\"spanning.appointment\"\n >\n <span class=\"ax-spanning-appointment-title\">\n <span class=\"ax-scheduler-truncate\">{{ spanning.appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, spanning.appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n ></ax-icon>\n }\n </span>\n </div>\n }\n </div>\n }\n\n @for (dayData of processedDayData(); track dayData.date.date.getTime()) {\n <div\n axDropZone\n #zone=\"axDropZone\"\n (onElementDrop)=\"handleDrop($event, dayData.date, resourceId)\"\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 [attr.data-slot-id]=\"dayData.date.format('YYYYMMDD')\"\n [attr.data-resource-id]=\"resourceId\"\n [style.--spanning-rows-count]=\"getMaxSpanningRowsForResource(resourceId)\"\n >\n <div class=\"ax-scheduler-timeline-appointment-container\">\n @for (\n segment of getAppointmentsForResourceAndDay(resourceId, dayData).visible;\n track segment.id + segment.originalStartDate.getTime()\n ) {\n <div\n axDrag\n [dragData]=\"segment\"\n [dragCursor]=\"'grab'\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || segment.readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, segment)\"\n (dblclick)=\"handleAppointmentEvent($event, segment)\"\n (contextmenu)=\"handleAppointmentEvent($event, segment)\"\n [title]=\"\n tooltipTemplate()\n ? ''\n : segment.allDay\n ? segment.title +\n ' (' +\n (segment.originalStartDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ' - ' +\n (segment.originalEndDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ')'\n : segment.title +\n ' (' +\n (segment.originalStartDate | format: 'time' : { calendar: calendar() } | async) +\n ' - ' +\n (segment.originalEndDate | format: 'time' : { calendar: calendar() } | async) +\n ')'\n \"\n class=\"ax-scheduler-timeline-appointment {{\n segment.cssClass ?? 'ax-scheduler-' + (segment.priority ?? 'primary') + '-priority'\n }}\"\n [class.all-day-segment]=\"segment.allDay\"\n [class.ax-state-active]=\"isActive(segment.id)\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n [axTooltipContext]=\"segment\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ segment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, segment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </ax-title>\n <ax-subtitle>\n @if (segment.allDay) {\n {{\n segment.originalStartDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async\n }}\n @if (segment.originalStartDate.getTime() !== segment.originalEndDate.getTime()) {\n -\n {{\n segment.originalEndDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async\n }}\n }\n } @else {\n {{\n segment.originalStartDate\n | format: 'time' : { format: 'HH:mm', calendar: calendar() }\n | async\n }}\n -\n {{\n segment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n }\n </ax-subtitle>\n </div>\n }\n @if (getAppointmentsForResourceAndDay(resourceId, dayData).moreCount > 0) {\n <div #moreAppointments class=\"ax-scheduler-month-overflow-badge\" (click)=\"$event.stopPropagation()\">\n +{{\n '@acorex:common.general.more-items'\n | translate\n : { params: { number: getAppointmentsForResourceAndDay(resourceId, dayData).moreCount } }\n | async\n }}\n </div>\n <ax-popover [target]=\"moreAppointments\" placement=\"bottom-start\" trigger=\"click\">\n <div\n axDropZone\n [class.ax-state-readonly]=\"readonly()\"\n class=\"ax-scheduler-popover ax-scheduler-month-popover-appointment\"\n >\n @for (\n segment of getAppointmentsForResourceAndDay(resourceId, dayData).hidden;\n track segment.id + segment.originalStartDate.getTime()\n ) {\n <div\n axDrag\n [dragData]=\"segment\"\n [dragCursor]=\"'grab'\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\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 tooltipTemplate()\n ? ''\n : segment.allDay\n ? segment.title +\n ' (' +\n (segment.originalStartDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ' - ' +\n (segment.originalEndDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ')'\n : segment.title +\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 segment.cssClass ?? 'ax-scheduler-' + (segment.priority ?? 'primary') + '-priority'\n }}\"\n [class.all-day-segment]=\"segment.allDay\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n [axTooltipContext]=\"segment\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ segment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, segment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </ax-title>\n <ax-subtitle>\n @if (segment.allDay) {\n {{\n segment.originalStartDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async\n }}\n @if (segment.originalStartDate.getTime() !== segment.originalEndDate.getTime()) {\n -\n {{\n segment.originalEndDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async\n }}\n }\n } @else {\n {{\n segment.originalStartDate\n | format: 'time' : { format: 'HH:mm', calendar: calendar() }\n | async\n }}\n -\n {{\n segment.originalEndDate\n | format: 'time' : { format: 'HH:mm', calendar: calendar() }\n | async\n }}\n }\n </ax-subtitle>\n </div>\n }\n </div>\n </ax-popover>\n }\n </div>\n </div>\n }\n </div>\n </div>\n }\n </div>\n </div>\n}\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-font-weight:initial;--tw-leading:initial;--tw-content:\"\"}}}@layer components{ax-scheduler-timeline-month-view{--ax-scheduler-timeline-spanning-row-height:1.5rem;--ax-scheduler-timeline-spanning-gap:.125rem;background-color:inherit;flex-direction:column;height:100%;display:inline-flex;position:relative}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-wrapper{flex-direction:column;height:100%;display:flex;position:relative}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-spanning-layer{pointer-events:none;inset-inline-start:calc(var(--spacing,.25rem) * 0);inset-inline-end:calc(var(--spacing,.25rem) * 0);top:calc(var(--spacing,.25rem) * 16);z-index:5;padding-inline:calc(var(--spacing,.25rem) * .5);padding-block:var(--spacing,.25rem);align-content:flex-start;row-gap:var(--ax-scheduler-timeline-spanning-gap);grid-auto-rows:var(--ax-scheduler-timeline-spanning-row-height);grid-template-columns:repeat(var(--timeline-days-count,31),var(--ax-comp-scheduler-timeline-month-view-blocks-width,calc(var(--ax-comp-scheduler-timeline-view-blocks-width) / 2)));display:grid;position:absolute}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-spanning-layer .ax-scheduler-timeline-spanning-appointment{z-index:6;cursor:pointer;text-overflow:ellipsis;border-radius:var(--radius-sm,.25rem);padding-inline:var(--spacing,.25rem);padding-block:calc(var(--spacing,.25rem) * .5);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));white-space:nowrap;pointer-events:auto;align-items:center;margin-inline:.125rem;display:flex;overflow:hidden}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-spanning-layer .ax-scheduler-timeline-spanning-appointment .ax-spanning-appointment-title{width:100%;height:100%;padding-inline:calc(var(--spacing,.25rem) * 2);justify-content:space-between;align-items:center;display:flex}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-spanning-layer .ax-scheduler-timeline-spanning-appointment .ax-spanning-appointment-title .ax-scheduler-truncate{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-spanning-layer .ax-scheduler-timeline-spanning-appointment .ax-spanning-appointment-title .ax-scheduler-action-icon{cursor:pointer;width:auto;flex-shrink:0;margin-inline-start:var(--spacing,.25rem)}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-spanning-layer .ax-scheduler-timeline-spanning-appointment.ax-spanning-start-clipped{border-start-start-radius:0;border-end-start-radius:0;margin-inline-start:0;position:relative}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-spanning-layer .ax-scheduler-timeline-spanning-appointment.ax-spanning-start-clipped:before{content:\"\\2190 \";top:calc(var(--spacing,.25rem) * .5);opacity:.7;font-size:.65rem;position:absolute;inset-inline-start:0}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-spanning-layer .ax-scheduler-timeline-spanning-appointment.ax-spanning-end-clipped{border-start-end-radius:0;border-end-end-radius:0;margin-inline-end:0;position:relative}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-spanning-layer .ax-scheduler-timeline-spanning-appointment.ax-spanning-end-clipped:after{content:\" \\2192\";top:calc(var(--spacing,.25rem) * .5);opacity:.7;font-size:.65rem;position:absolute;inset-inline-end:0}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{background-color:var(--ax-comp-scheduler-all-day-bg,inherit);width:100%;display:flex}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day{height:calc(var(--spacing,.25rem) * 16);width:var(--ax-comp-scheduler-timeline-month-view-blocks-width,calc(var(--ax-comp-scheduler-timeline-view-blocks-width) / 2));justify-content:center;align-items:flex-start;gap:var(--spacing,.25rem);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding-inline:calc(var(--spacing,.25rem) * 4);padding-block:var(--spacing,.25rem);flex-direction:column;display:flex;position:relative}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day.ax-state-today{background-color:rgba(var(--ax-sys-color-primary-surface))}@supports (color:color-mix(in lab,red,red)){ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day.ax-state-today{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 5%,transparent)}}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))}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{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,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{--tw-font-weight:var(--font-weight-bold,700);font-weight:var(--font-weight-bold,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:var(--ax-scheduler-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{--tw-leading:calc(var(--spacing,.25rem) * 4);max-width:100%;line-height:calc(var(--spacing,.25rem) * 4);--tw-font-weight:var(--font-weight-light,300);font-weight:var(--font-weight-light,300);position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 4)}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{font-size:var(--text-xl,1.25rem);line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75 / 1.25)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 4)}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content{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-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding:var(--spacing,.25rem);padding-top:calc(var(--spanning-rows-count,0) * (var(--ax-scheduler-timeline-spanning-row-height) + var(--ax-scheduler-timeline-spanning-gap)) + .25rem);position:relative}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container{gap:var(--ax-comp-scheduler-timeline-month-gap-height,.125rem);flex-direction:column;display:flex}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-timeline-appointment{min-height:calc(var(--spacing,.25rem) * 10);border-radius:calc(var(--ax-sys-border-radius) / 2);width:100%;padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:var(--spacing,.25rem);flex-direction:column;display:flex;overflow:hidden}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-month-overflow-badge{margin-top:calc(var(--spacing,.25rem) * .5);cursor:pointer;padding-inline:0;padding-block:calc(var(--spacing,.25rem) * .5);text-align:start;font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)))}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-line:underline}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container{background-color:inherit;flex-direction:column;height:100%;display:flex;position:relative}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-header-sticky{z-index:10;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;display:flex;position:sticky;top:0}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-header-sticky .ax-scheduler-timeline-month-resource-header-placeholder{z-index:15;width:var(--ax-comp-scheduler-resource-header-width,8rem);min-width:var(--ax-comp-scheduler-resource-header-width,8rem);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;padding:calc(var(--spacing,.25rem) * 2);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);justify-content:center;align-items:center;display:flex;position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 0)}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-header-sticky .ax-scheduler-timeline-month-day-header{background-color:inherit;flex:1;display:flex}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-header-sticky .ax-scheduler-timeline-month-day-header .ax-scheduler-month-header-date-day{height:calc(var(--spacing,.25rem) * 16);width:var(--ax-comp-scheduler-timeline-month-view-blocks-width,calc(var(--ax-comp-scheduler-timeline-view-blocks-width) / 2));min-width:var(--ax-comp-scheduler-timeline-month-view-blocks-width,calc(var(--ax-comp-scheduler-timeline-view-blocks-width) / 2));justify-content:center;align-items:flex-start;gap:var(--spacing,.25rem);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding-inline:calc(var(--spacing,.25rem) * 4);padding-block:var(--spacing,.25rem);flex-direction:column;display:flex;position:relative}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-header-sticky .ax-scheduler-timeline-month-day-header .ax-scheduler-month-header-date-day.ax-state-today{background-color:rgba(var(--ax-sys-color-primary-surface))}@supports (color:color-mix(in lab,red,red)){ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-header-sticky .ax-scheduler-timeline-month-day-header .ax-scheduler-month-header-date-day.ax-state-today{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 5%,transparent)}}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-header-sticky .ax-scheduler-timeline-month-day-header .ax-scheduler-month-header-date-day.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-header-sticky .ax-scheduler-timeline-month-day-header .ax-scheduler-month-header-date-day.ax-state-today .ax-scheduler-month-header-date-day-char{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-header-sticky .ax-scheduler-timeline-month-day-header .ax-scheduler-month-header-date-day.ax-state-today .ax-scheduler-month-header-date-day-num{--tw-font-weight:var(--font-weight-bold,700);font-weight:var(--font-weight-bold,700)}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-header-sticky .ax-scheduler-timeline-month-day-header .ax-scheduler-month-header-date-day.ax-state-holiday{color:var(--ax-scheduler-holiday-color,rgba(var(--ax-sys-color-danger-surface)))}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-header-sticky .ax-scheduler-timeline-month-day-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-resource-container .ax-scheduler-timeline-month-header-sticky .ax-scheduler-timeline-month-day-header .ax-scheduler-month-header-date-day .ax-scheduler-month-header-date-day-char{--tw-leading:calc(var(--spacing,.25rem) * 4);max-width:100%;line-height:calc(var(--spacing,.25rem) * 4);--tw-font-weight:var(--font-weight-light,300);font-weight:var(--font-weight-light,300);position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 4)}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-header-sticky .ax-scheduler-timeline-month-day-header .ax-scheduler-month-header-date-day .ax-scheduler-month-header-date-day-num{font-size:var(--text-xl,1.25rem);line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75 / 1.25)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 4)}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-resource-rows{background-color:inherit;flex:1;position:relative;overflow:visible}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-resource-rows .ax-scheduler-timeline-month-resource-row{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;width:max-content;min-height:calc(var(--resource-spanning-rows-count,0) * (var(--ax-scheduler-timeline-spanning-row-height) + var(--ax-scheduler-timeline-spanning-gap)) + var(--ax-comp-scheduler-timeline-month-row-base-height,5rem));display:flex}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-resource-rows .ax-scheduler-timeline-month-resource-row .ax-scheduler-timeline-month-resource-header{width:var(--ax-comp-scheduler-resource-header-width,8rem);min-width:var(--ax-comp-scheduler-resource-header-width,8rem);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;padding:calc(var(--spacing,.25rem) * 2);justify-content:center;align-self:stretch;align-items:center;display:flex}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-resource-rows .ax-scheduler-timeline-month-resource-row .ax-scheduler-timeline-month-resource-header.ax-scheduler-timeline-month-resource-header-sticky{z-index:9;background-color:inherit;position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 0)}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-resource-rows .ax-scheduler-timeline-month-resource-row .ax-scheduler-timeline-month-resource-header .ax-scheduler-timeline-month-resource-title{text-align:center;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);overflow-wrap:break-word}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-resource-rows .ax-scheduler-timeline-month-resource-row .ax-scheduler-timeline-month-resource-content{background-color:inherit;flex:1;display:flex;position:relative}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-resource-rows .ax-scheduler-timeline-month-resource-row .ax-scheduler-timeline-month-resource-content .ax-scheduler-timeline-resource-spanning-layer{pointer-events:none;z-index:5;padding-inline:calc(var(--spacing,.25rem) * .5);padding-block:var(--spacing,.25rem);align-content:flex-start;row-gap:var(--ax-scheduler-timeline-spanning-gap);grid-auto-rows:var(--ax-scheduler-timeline-spanning-row-height);grid-template-columns:repeat(var(--timeline-days-count,31),var(--ax-comp-scheduler-timeline-month-view-blocks-width,calc(var(--ax-comp-scheduler-timeline-view-blocks-width) / 2)));inset-inline-start:calc(var(--spacing,.25rem) * 0);inset-inline-end:calc(var(--spacing,.25rem) * 0);display:grid;position:absolute;top:0}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-resource-rows .ax-scheduler-timeline-month-resource-row .ax-scheduler-timeline-month-resource-content .ax-scheduler-timeline-resource-spanning-layer .ax-scheduler-timeline-spanning-appointment{z-index:6;cursor:pointer;text-overflow:ellipsis;border-radius:var(--radius-sm,.25rem);padding-inline:var(--spacing,.25rem);padding-block:calc(var(--spacing,.25rem) * .5);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));white-space:nowrap;pointer-events:auto;align-items:center;margin-inline:.125rem;display:flex;overflow:hidden}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-resource-rows .ax-scheduler-timeline-month-resource-row .ax-scheduler-timeline-month-resource-content .ax-scheduler-timeline-resource-spanning-layer .ax-scheduler-timeline-spanning-appointment .ax-spanning-appointment-title{width:100%;height:100%;padding-inline:calc(var(--spacing,.25rem) * 2);justify-content:space-between;align-items:center;display:flex}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-resource-rows .ax-scheduler-timeline-month-resource-row .ax-scheduler-timeline-month-resource-content .ax-scheduler-timeline-resource-spanning-layer .ax-scheduler-timeline-spanning-appointment .ax-spanning-appointment-title .ax-scheduler-truncate{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-resource-rows .ax-scheduler-timeline-month-resource-row .ax-scheduler-timeline-month-resource-content .ax-scheduler-timeline-resource-spanning-layer .ax-scheduler-timeline-spanning-appointment .ax-spanning-appointment-title .ax-scheduler-action-icon{cursor:pointer;width:auto;flex-shrink:0;margin-inline-start:var(--spacing,.25rem)}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-resource-rows .ax-scheduler-timeline-month-resource-row .ax-scheduler-timeline-month-resource-content .ax-scheduler-timeline-resource-spanning-layer .ax-scheduler-timeline-spanning-appointment.ax-spanning-start-clipped{border-start-start-radius:0;border-end-start-radius:0;margin-inline-start:0;position:relative}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-resource-rows .ax-scheduler-timeline-month-resource-row .ax-scheduler-timeline-month-resource-content .ax-scheduler-timeline-resource-spanning-layer .ax-scheduler-timeline-spanning-appointment.ax-spanning-start-clipped:before{content:\"\\2190 \";top:calc(var(--spacing,.25rem) * .5);opacity:.7;font-size:.65rem;position:absolute;inset-inline-start:0}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-resource-rows .ax-scheduler-timeline-month-resource-row .ax-scheduler-timeline-month-resource-content .ax-scheduler-timeline-resource-spanning-layer .ax-scheduler-timeline-spanning-appointment.ax-spanning-end-clipped{border-start-end-radius:0;border-end-end-radius:0;margin-inline-end:0;position:relative}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-resource-rows .ax-scheduler-timeline-month-resource-row .ax-scheduler-timeline-month-resource-content .ax-scheduler-timeline-resource-spanning-layer .ax-scheduler-timeline-spanning-appointment.ax-spanning-end-clipped:after{content:\" \\2192\";top:calc(var(--spacing,.25rem) * .5);opacity:.7;font-size:.65rem;position:absolute;inset-inline-end:0}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-resource-rows .ax-scheduler-timeline-month-resource-row .ax-scheduler-timeline-month-resource-content .ax-scheduler-timeline-content{width:var(--ax-comp-scheduler-timeline-month-view-blocks-width,calc(var(--ax-comp-scheduler-timeline-view-blocks-width) / 2));min-width:var(--ax-comp-scheduler-timeline-month-view-blocks-width,calc(var(--ax-comp-scheduler-timeline-view-blocks-width) / 2));border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;padding-bottom:var(--spacing,.25rem);padding-top:calc(var(--spanning-rows-count,0) * (var(--ax-scheduler-timeline-spanning-row-height) + var(--ax-scheduler-timeline-spanning-gap)) + .25rem);flex-direction:column;display:flex;position:relative}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-resource-rows .ax-scheduler-timeline-month-resource-row .ax-scheduler-timeline-month-resource-content .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container{gap:var(--ax-comp-scheduler-timeline-month-gap-height,.125rem);width:100%;padding-inline:var(--spacing,.25rem);flex-direction:column;display:flex}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-resource-rows .ax-scheduler-timeline-month-resource-row .ax-scheduler-timeline-month-resource-content .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-timeline-appointment{min-height:calc(var(--spacing,.25rem) * 10);border-radius:calc(var(--ax-sys-border-radius) / 2);width:100%;padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:var(--spacing,.25rem);flex-direction:column;flex-shrink:0;display:flex;overflow:hidden}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-resource-rows .ax-scheduler-timeline-month-resource-row .ax-scheduler-timeline-month-resource-content .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-month-overflow-badge{margin-top:calc(var(--spacing,.25rem) * .5);cursor:pointer;padding-inline:0;padding-block:calc(var(--spacing,.25rem) * .5);text-align:start;font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));flex-shrink:0}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-resource-container .ax-scheduler-timeline-month-resource-rows .ax-scheduler-timeline-month-resource-row .ax-scheduler-timeline-month-resource-content .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-month-overflow-badge:hover{text-decoration-line: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-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));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))}ax-scheduler-timeline-month-view ax-title{justify-content:space-between;display:flex}ax-scheduler-timeline-month-view ax-title .ax-scheduler-action-icon{cursor:pointer;width:auto}ax-scheduler-timeline-month-view .ax-scheduler-current-time-line{width:calc(var(--spacing,.25rem) * .5);top:0;bottom:0}ax-scheduler-timeline-month-view .ax-scheduler-current-time-line:before{content:var(--tw-content);inset-inline-start:-5px;top:calc(var(--spacing,.25rem) * -1.5)}ax-scheduler.ax-rtl ax-scheduler-timeline-month-view .ax-scheduler-timeline-spanning-appointment.ax-spanning-start-clipped:before{content:\"\\2192 \"}ax-scheduler.ax-rtl ax-scheduler-timeline-month-view .ax-scheduler-timeline-spanning-appointment.ax-spanning-end-clipped:after{content:\" \\2190\"}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-leading{syntax:\"*\";inherits:false}@property --tw-content{syntax:\"*\";inherits:false;initial-value:\"\"}\n/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */\n"] }]
|
|
2821
2841
|
}], propDecorators: { readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], hasActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasActions", required: false }] }], dragStartDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragStartDelay", required: false }] }], calendar: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendar", required: false }] }], showResourceHeaders: [{ type: i0.Input, args: [{ isSignal: true, alias: "showResourceHeaders", required: false }] }], date: [{ type: i0.Input, args: [{ isSignal: true, alias: "date", required: true }] }], showUnassignedAppointments: [{ type: i0.Input, args: [{ isSignal: true, alias: "showUnassignedAppointments", required: false }] }], selectedAppointmentId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedAppointmentId", required: false }] }], resources: [{ type: i0.Input, args: [{ isSignal: true, alias: "resources", required: false }] }], showCurrentTimeIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCurrentTimeIndicator", required: false }] }], scrollToCurrentTimeIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollToCurrentTimeIndicator", required: false }] }], resourceTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "resourceTemplate", required: false }] }], appointments: [{ type: i0.Input, args: [{ isSignal: true, alias: "appointments", required: false }] }], tooltipTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipTemplate", required: false }] }], currentTimeLineElement: [{ type: i0.ViewChild, args: ['currentTimeLine', { isSignal: true }] }], slotClickedInternal: [{ type: i0.Output, args: ["slotClickedInternal"] }], slotDblClickedInternal: [{ type: i0.Output, args: ["slotDblClickedInternal"] }], slotRightClickedInternal: [{ type: i0.Output, args: ["slotRightClickedInternal"] }], appointmentClickedInternal: [{ type: i0.Output, args: ["appointmentClickedInternal"] }], appointmentDblClickedInternal: [{ type: i0.Output, args: ["appointmentDblClickedInternal"] }], appointmentRightClickedInternal: [{ type: i0.Output, args: ["appointmentRightClickedInternal"] }], onActionClickInternal: [{ type: i0.Output, args: ["onActionClickInternal"] }], onAppointmentDropInternal: [{ type: i0.Output, args: ["onAppointmentDropInternal"] }] } });
|
|
2822
2842
|
|
|
2843
|
+
// prettier-ignore
|
|
2823
2844
|
class AXSchedulerTimelineWeeklyViewComponent extends NXComponent {
|
|
2824
2845
|
constructor() {
|
|
2825
2846
|
super(...arguments);
|
|
@@ -2827,25 +2848,25 @@ class AXSchedulerTimelineWeeklyViewComponent extends NXComponent {
|
|
|
2827
2848
|
this.scheduler = inject(AXSchedulerComponent);
|
|
2828
2849
|
this.calendarService = inject(AXCalendarService);
|
|
2829
2850
|
this.schedulerService = inject(AXSchedulerService);
|
|
2830
|
-
this.daysCount = input(7, ...(ngDevMode ? [{ debugName: "daysCount" }] : []));
|
|
2831
|
-
this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
|
|
2832
|
-
this.draggable = input(true, ...(ngDevMode ? [{ debugName: "draggable" }] : []));
|
|
2833
|
-
this.hasActions = input(false, ...(ngDevMode ? [{ debugName: "hasActions" }] : []));
|
|
2834
|
-
this.dragStartDelay = input(0, ...(ngDevMode ? [{ debugName: "dragStartDelay" }] : []));
|
|
2835
|
-
this.calendar = input(...(ngDevMode ? [undefined, { debugName: "calendar" }] : []));
|
|
2836
|
-
this.showResourceHeaders = input(true, ...(ngDevMode ? [{ debugName: "showResourceHeaders" }] : []));
|
|
2837
|
-
this.date = input.required(...(ngDevMode ? [{ debugName: "date" }] : []));
|
|
2838
|
-
this.endDayHour = input.required(...(ngDevMode ? [{ debugName: "endDayHour" }] : []));
|
|
2839
|
-
this.selectedAppointmentId = input(null, ...(ngDevMode ? [{ debugName: "selectedAppointmentId" }] : []));
|
|
2840
|
-
this.showCurrentTimeIndicator = input(true, ...(ngDevMode ? [{ debugName: "showCurrentTimeIndicator" }] : []));
|
|
2841
|
-
this.scrollToCurrentTimeIndicator = input(false, ...(ngDevMode ? [{ debugName: "scrollToCurrentTimeIndicator" }] : []));
|
|
2842
|
-
this.startDayHour = input.required(...(ngDevMode ? [{ debugName: "startDayHour" }] : []));
|
|
2843
|
-
this.showUnassignedAppointments = input(true, ...(ngDevMode ? [{ debugName: "showUnassignedAppointments" }] : []));
|
|
2844
|
-
this.resources = input([], ...(ngDevMode ? [{ debugName: "resources" }] : []));
|
|
2845
|
-
this.resourceTemplate = input(...(ngDevMode ? [undefined, { debugName: "resourceTemplate" }] : []));
|
|
2846
|
-
this.appointments = input([], ...(ngDevMode ? [{ debugName: "appointments" }] : []));
|
|
2847
|
-
this.tooltipTemplate = input(...(ngDevMode ? [undefined, { debugName: "tooltipTemplate" }] : []));
|
|
2848
|
-
this.currentTimeLineElement = viewChild('currentTimeLine', ...(ngDevMode ? [{ debugName: "currentTimeLineElement" }] : []));
|
|
2851
|
+
this.daysCount = input(7, ...(ngDevMode ? [{ debugName: "daysCount" }] : /* istanbul ignore next */ []));
|
|
2852
|
+
this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
2853
|
+
this.draggable = input(true, ...(ngDevMode ? [{ debugName: "draggable" }] : /* istanbul ignore next */ []));
|
|
2854
|
+
this.hasActions = input(false, ...(ngDevMode ? [{ debugName: "hasActions" }] : /* istanbul ignore next */ []));
|
|
2855
|
+
this.dragStartDelay = input(0, ...(ngDevMode ? [{ debugName: "dragStartDelay" }] : /* istanbul ignore next */ []));
|
|
2856
|
+
this.calendar = input(...(ngDevMode ? [undefined, { debugName: "calendar" }] : /* istanbul ignore next */ []));
|
|
2857
|
+
this.showResourceHeaders = input(true, ...(ngDevMode ? [{ debugName: "showResourceHeaders" }] : /* istanbul ignore next */ []));
|
|
2858
|
+
this.date = input.required(...(ngDevMode ? [{ debugName: "date" }] : /* istanbul ignore next */ []));
|
|
2859
|
+
this.endDayHour = input.required(...(ngDevMode ? [{ debugName: "endDayHour" }] : /* istanbul ignore next */ []));
|
|
2860
|
+
this.selectedAppointmentId = input(null, ...(ngDevMode ? [{ debugName: "selectedAppointmentId" }] : /* istanbul ignore next */ []));
|
|
2861
|
+
this.showCurrentTimeIndicator = input(true, ...(ngDevMode ? [{ debugName: "showCurrentTimeIndicator" }] : /* istanbul ignore next */ []));
|
|
2862
|
+
this.scrollToCurrentTimeIndicator = input(false, ...(ngDevMode ? [{ debugName: "scrollToCurrentTimeIndicator" }] : /* istanbul ignore next */ []));
|
|
2863
|
+
this.startDayHour = input.required(...(ngDevMode ? [{ debugName: "startDayHour" }] : /* istanbul ignore next */ []));
|
|
2864
|
+
this.showUnassignedAppointments = input(true, ...(ngDevMode ? [{ debugName: "showUnassignedAppointments" }] : /* istanbul ignore next */ []));
|
|
2865
|
+
this.resources = input([], ...(ngDevMode ? [{ debugName: "resources" }] : /* istanbul ignore next */ []));
|
|
2866
|
+
this.resourceTemplate = input(...(ngDevMode ? [undefined, { debugName: "resourceTemplate" }] : /* istanbul ignore next */ []));
|
|
2867
|
+
this.appointments = input([], ...(ngDevMode ? [{ debugName: "appointments" }] : /* istanbul ignore next */ []));
|
|
2868
|
+
this.tooltipTemplate = input(...(ngDevMode ? [undefined, { debugName: "tooltipTemplate" }] : /* istanbul ignore next */ []));
|
|
2869
|
+
this.currentTimeLineElement = viewChild('currentTimeLine', ...(ngDevMode ? [{ debugName: "currentTimeLineElement" }] : /* istanbul ignore next */ []));
|
|
2849
2870
|
this.daysDataForTimelineViews = computed(() => {
|
|
2850
2871
|
const allOriginalAppointments = this.appointments();
|
|
2851
2872
|
const multiViewStartDate = this.date();
|
|
@@ -2872,7 +2893,7 @@ class AXSchedulerTimelineWeeklyViewComponent extends NXComponent {
|
|
|
2872
2893
|
});
|
|
2873
2894
|
}
|
|
2874
2895
|
return result;
|
|
2875
|
-
}, ...(ngDevMode ? [{ debugName: "daysDataForTimelineViews" }] : []));
|
|
2896
|
+
}, ...(ngDevMode ? [{ debugName: "daysDataForTimelineViews" }] : /* istanbul ignore next */ []));
|
|
2876
2897
|
/**
|
|
2877
2898
|
* Computes spanning appointments for multi-day events across the view.
|
|
2878
2899
|
*/
|
|
@@ -2977,7 +2998,7 @@ class AXSchedulerTimelineWeeklyViewComponent extends NXComponent {
|
|
|
2977
2998
|
}
|
|
2978
2999
|
}
|
|
2979
3000
|
return spanningResults;
|
|
2980
|
-
}, ...(ngDevMode ? [{ debugName: "spanningAppointments" }] : []));
|
|
3001
|
+
}, ...(ngDevMode ? [{ debugName: "spanningAppointments" }] : /* istanbul ignore next */ []));
|
|
2981
3002
|
/**
|
|
2982
3003
|
* Gets the set of multi-day appointment IDs to exclude from individual day views.
|
|
2983
3004
|
*/
|
|
@@ -2990,7 +3011,7 @@ class AXSchedulerTimelineWeeklyViewComponent extends NXComponent {
|
|
|
2990
3011
|
}
|
|
2991
3012
|
}
|
|
2992
3013
|
return ids;
|
|
2993
|
-
}, ...(ngDevMode ? [{ debugName: "multiDayAppointmentIds" }] : []));
|
|
3014
|
+
}, ...(ngDevMode ? [{ debugName: "multiDayAppointmentIds" }] : /* istanbul ignore next */ []));
|
|
2994
3015
|
/**
|
|
2995
3016
|
* Gets the maximum number of spanning rows across all appointments (for non-resource layouts).
|
|
2996
3017
|
*/
|
|
@@ -2999,7 +3020,7 @@ class AXSchedulerTimelineWeeklyViewComponent extends NXComponent {
|
|
|
2999
3020
|
if (spanning.length === 0)
|
|
3000
3021
|
return 0;
|
|
3001
3022
|
return Math.max(...spanning.map((s) => s.rowIndex)) + 1;
|
|
3002
|
-
}, ...(ngDevMode ? [{ debugName: "maxSpanningRows" }] : []));
|
|
3023
|
+
}, ...(ngDevMode ? [{ debugName: "maxSpanningRows" }] : /* istanbul ignore next */ []));
|
|
3003
3024
|
this.slotClickedInternal = output();
|
|
3004
3025
|
this.slotDblClickedInternal = output();
|
|
3005
3026
|
this.slotRightClickedInternal = output();
|
|
@@ -3016,7 +3037,7 @@ class AXSchedulerTimelineWeeklyViewComponent extends NXComponent {
|
|
|
3016
3037
|
const resources = this.resources();
|
|
3017
3038
|
const showUnassigned = this.showUnassignedAppointments();
|
|
3018
3039
|
return this.schedulerService.filterAppointmentsByResources(allAppointments, resources, showUnassigned);
|
|
3019
|
-
}, ...(ngDevMode ? [{ debugName: "appointmentsByResource" }] : []));
|
|
3040
|
+
}, ...(ngDevMode ? [{ debugName: "appointmentsByResource" }] : /* istanbul ignore next */ []));
|
|
3020
3041
|
/**
|
|
3021
3042
|
* Gets all resource IDs including unassigned if applicable.
|
|
3022
3043
|
*/
|
|
@@ -3024,7 +3045,7 @@ class AXSchedulerTimelineWeeklyViewComponent extends NXComponent {
|
|
|
3024
3045
|
const resources = this.resources();
|
|
3025
3046
|
const showUnassigned = this.showUnassignedAppointments();
|
|
3026
3047
|
return this.schedulerService.getAllResourceIds(resources, showUnassigned);
|
|
3027
|
-
}, ...(ngDevMode ? [{ debugName: "resourceIds" }] : []));
|
|
3048
|
+
}, ...(ngDevMode ? [{ debugName: "resourceIds" }] : /* istanbul ignore next */ []));
|
|
3028
3049
|
}
|
|
3029
3050
|
isActive(appointmentId) {
|
|
3030
3051
|
return this.selectedAppointmentId() === appointmentId;
|
|
@@ -3384,10 +3405,10 @@ class AXSchedulerTimelineWeeklyViewComponent extends NXComponent {
|
|
|
3384
3405
|
}
|
|
3385
3406
|
return { state: 'none' };
|
|
3386
3407
|
}
|
|
3387
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
3388
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AXSchedulerTimelineWeeklyViewComponent, isStandalone: true, selector: "ax-scheduler-timeline-weekly-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 }, hasActions: { classPropertyName: "hasActions", publicName: "hasActions", isSignal: true, isRequired: false, transformFunction: null }, dragStartDelay: { classPropertyName: "dragStartDelay", publicName: "dragStartDelay", isSignal: true, isRequired: false, transformFunction: null }, calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, showResourceHeaders: { classPropertyName: "showResourceHeaders", publicName: "showResourceHeaders", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: true, transformFunction: null }, endDayHour: { classPropertyName: "endDayHour", publicName: "endDayHour", isSignal: true, isRequired: true, transformFunction: null }, selectedAppointmentId: { classPropertyName: "selectedAppointmentId", publicName: "selectedAppointmentId", isSignal: true, isRequired: false, transformFunction: null }, showCurrentTimeIndicator: { classPropertyName: "showCurrentTimeIndicator", publicName: "showCurrentTimeIndicator", isSignal: true, isRequired: false, transformFunction: null }, scrollToCurrentTimeIndicator: { classPropertyName: "scrollToCurrentTimeIndicator", publicName: "scrollToCurrentTimeIndicator", isSignal: true, isRequired: false, transformFunction: null }, startDayHour: { classPropertyName: "startDayHour", publicName: "startDayHour", isSignal: true, isRequired: true, transformFunction: null }, showUnassignedAppointments: { classPropertyName: "showUnassignedAppointments", publicName: "showUnassignedAppointments", isSignal: true, isRequired: false, transformFunction: null }, resources: { classPropertyName: "resources", publicName: "resources", isSignal: true, isRequired: false, transformFunction: null }, resourceTemplate: { classPropertyName: "resourceTemplate", publicName: "resourceTemplate", isSignal: true, isRequired: false, transformFunction: null }, appointments: { classPropertyName: "appointments", publicName: "appointments", isSignal: true, isRequired: false, transformFunction: null }, tooltipTemplate: { classPropertyName: "tooltipTemplate", publicName: "tooltipTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { slotClickedInternal: "slotClickedInternal", slotDblClickedInternal: "slotDblClickedInternal", slotRightClickedInternal: "slotRightClickedInternal", appointmentClickedInternal: "appointmentClickedInternal", appointmentDblClickedInternal: "appointmentDblClickedInternal", appointmentRightClickedInternal: "appointmentRightClickedInternal", onActionClickInternal: "onActionClickInternal", onAppointmentDropInternal: "onAppointmentDropInternal" }, host: { properties: { "class.ax-state-readonly": "readonly()" } }, providers: [{ provide: AXComponent, useExisting: AXSchedulerTimelineWeeklyViewComponent }], viewQueries: [{ propertyName: "currentTimeLineElement", first: true, predicate: ["currentTimeLine"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (resources().length === 0 || !showResourceHeaders()) {\n <!-- Original layout when no resources -->\n <div class=\"ax-scheduler-timeline-day-view-container\" [style.--spanning-rows-count]=\"maxSpanningRows()\">\n <!-- Spanning appointments layer -->\n @if (spanningAppointments().length > 0) {\n <div\n class=\"ax-scheduler-timeline-weekly-spanning-layer\"\n [style.--timeline-days-count]=\"daysDataForTimelineViews().length\"\n >\n @for (spanning of spanningAppointments(); track spanning.appointment.id) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"spanning.appointment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || spanning.appointment.readonly || readonly()\"\n (click)=\"handleSpanningAppointmentEvent($event, spanning.appointment)\"\n (dblclick)=\"handleSpanningAppointmentEvent($event, spanning.appointment)\"\n (contextmenu)=\"handleSpanningAppointmentEvent($event, spanning.appointment)\"\n [title]=\"\n spanning.appointment.title +\n ' (' +\n (spanning.appointment.startDate | format: 'date' : { format: 'MMM d', calendar: calendar() } | async) +\n ' - ' +\n (spanning.appointment.endDate | format: 'date' : { format: 'MMM d', calendar: calendar() } | async) +\n ')'\n \"\n class=\"ax-scheduler-timeline-spanning-appointment {{\n spanning.appointment.cssClass ??\n 'ax-scheduler-' + (spanning.appointment.priority ?? 'primary') + '-priority'\n }}\"\n [class.ax-spanning-start-clipped]=\"spanning.isStartClipped\"\n [class.ax-spanning-end-clipped]=\"spanning.isEndClipped\"\n [class.ax-state-active]=\"isActive(spanning.appointment.id)\"\n [style.grid-column]=\"spanning.startDayIndex + 1 + ' / span ' + spanning.spanCount\"\n [style.grid-row]=\"spanning.rowIndex + 1\"\n >\n <span class=\"ax-spanning-appointment-title\">\n <span class=\"ax-scheduler-truncate\">{{ spanning.appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleSpanningActionClick($event, spanning.appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n ></ax-icon>\n }\n </span>\n </div>\n }\n </div>\n }\n @for (daySlot of daysDataForTimelineViews(); track daySlot.date.date.getTime()) {\n <div class=\"ax-scheduler-timeline-weekly-column\">\n <div\n [class.ax-state-today]=\"isToday(daySlot.date)\"\n class=\"ax-scheduler-week-header-date-day {{\n daySlot.holiday.state !== 'none' ? (daySlot.holiday.holiday?.cssClass ?? 'ax-state-holiday') : ''\n }}\"\n >\n <span\n class=\"ax-scheduler-week-header-date-day-char ax-scheduler-truncate\"\n [axTooltip]=\"daySlot.holiday.holiday?.title ?? ''\"\n >\n {{ daySlot.date | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n @if (daySlot.holiday.state === 'holiday' && daySlot.holiday.holiday.title) {\n ( {{ daySlot.holiday.holiday.title }} )\n }\n </span>\n <span class=\"ax-scheduler-week-header-date-day-num\">\n {{ daySlot.date | format: 'date' : { format: 'DD', calendar: calendar() } | async }}\n </span>\n </div>\n <ax-scheduler-timeline-day-view\n [date]=\"daySlot.date\"\n [readonly]=\"readonly()\"\n [draggable]=\"draggable()\"\n [resources]=\"resources()\"\n [endDayHour]=\"endDayHour()\"\n [hasActions]=\"hasActions()\"\n [showResourceHeaders]=\"true\"\n [startDayHour]=\"startDayHour()\"\n [dragStartDelay]=\"dragStartDelay()\"\n [tooltipTemplate]=\"tooltipTemplate()\"\n [showCurrentTimeIndicator]=\"showCurrentTimeIndicator()\"\n [appointments]=\"getFilteredAppointmentsForDay(daySlot.originalAppointmentsForThisDay)\"\n [showUnassignedAppointments]=\"showUnassignedAppointments()\"\n (onActionClickInternal)=\"onActionClickInternal.emit($event)\"\n (slotClickedInternal)=\"slotClickedInternal.emit($event)\"\n (slotDblClickedInternal)=\"slotDblClickedInternal.emit($event)\"\n (slotRightClickedInternal)=\"slotRightClickedInternal.emit($event)\"\n (onAppointmentDropInternal)=\"handleDrop($event, undefined)\"\n (appointmentClickedInternal)=\"appointmentClickedInternal.emit($event)\"\n (appointmentDblClickedInternal)=\"appointmentDblClickedInternal.emit($event)\"\n (appointmentRightClickedInternal)=\"appointmentRightClickedInternal.emit($event)\"\n >\n </ax-scheduler-timeline-day-view>\n </div>\n }\n </div>\n} @else {\n <!-- Resource-based layout for weekly -->\n <div\n class=\"ax-scheduler-timeline-weekly-resource-container\"\n [style.--ax-comp-scheduler-hours-count]=\"getHoursCount()\"\n >\n <!-- Top header with day names -->\n <div class=\"ax-scheduler-timeline-weekly-top-header\">\n <!-- Resource placeholder -->\n <div class=\"ax-scheduler-timeline-weekly-resource-header-placeholder\"></div>\n <!-- Day headers -->\n @for (daySlot of daysDataForTimelineViews(); track daySlot.date.date.getTime()) {\n <div class=\"ax-scheduler-timeline-weekly-day-header\">\n <div\n [class.ax-state-today]=\"isToday(daySlot.date)\"\n class=\"ax-scheduler-week-header-date-day {{\n daySlot.holiday.state !== 'none' ? (daySlot.holiday.holiday?.cssClass ?? 'ax-state-holiday') : ''\n }}\"\n >\n <span\n class=\"ax-scheduler-week-header-date-day-char ax-scheduler-truncate\"\n [axTooltip]=\"daySlot.holiday.holiday?.title ?? ''\"\n >\n {{ daySlot.date | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n @if (daySlot.holiday.state === 'holiday' && daySlot.holiday.holiday.title) {\n ( {{ daySlot.holiday.holiday.title }} )\n }\n </span>\n <span class=\"ax-scheduler-week-header-date-day-num\">\n {{ daySlot.date | format: 'date' : { format: 'DD', calendar: calendar() } | async }}\n </span>\n </div>\n </div>\n }\n </div>\n\n <!-- Time header with hours for each day -->\n <div class=\"ax-scheduler-timeline-weekly-time-header\">\n <!-- Resource placeholder -->\n <div class=\"ax-scheduler-timeline-weekly-time-header-placeholder\"><span>Resources</span></div>\n <!-- Time slots for each day -->\n @for (daySlot of daysDataForTimelineViews(); track daySlot.date.date.getTime()) {\n <div class=\"ax-scheduler-timeline-weekly-day-time-slots\">\n @for (hour of getHoursArray(); track hour.date.getTime()) {\n <div class=\"ax-scheduler-timeline-weekly-time-slot\">\n <span>{{ hour | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}</span>\n </div>\n }\n </div>\n }\n </div>\n\n <!-- Main content area -->\n <div class=\"ax-scheduler-timeline-weekly-content\">\n <!-- Resource headers column -->\n <div class=\"ax-scheduler-timeline-weekly-resource-headers\">\n <!-- Resource headers -->\n @for (resourceId of resourceIds(); track resourceId) {\n <div\n class=\"ax-scheduler-timeline-weekly-resource-header\"\n [style.height]=\"getResourceRowHeight(resourceId)\"\n [style.--resource-spanning-rows-count]=\"getMaxSpanningRowsForResource(resourceId)\"\n >\n @if (resourceTemplate() && typeof resourceTemplate() !== 'string') {\n <ng-container\n [ngTemplateOutlet]=\"$any(resourceTemplate())\"\n [ngTemplateOutletContext]=\"{\n $implicit: getResourceContext(resourceId),\n resource: getResourceContext(resourceId),\n resourceId: resourceId,\n }\"\n ></ng-container>\n } @else {\n <span class=\"ax-scheduler-timeline-resource-title\">{{ getResourceTitle(resourceId) }}</span>\n }\n </div>\n }\n </div>\n\n <!-- Days columns -->\n <div class=\"ax-scheduler-timeline-weekly-days-container\" #daysContainer>\n @for (daySlot of daysDataForTimelineViews(); track daySlot.date.date.getTime(); let dayIndex = $index) {\n <div class=\"ax-scheduler-timeline-weekly-column\">\n <!-- Current Time Line Indicator for this day -->\n @if (\n showCurrentTimeIndicator() &&\n shouldShowCurrentTimeForDay(daySlot.date) &&\n getCurrentTimePosition() !== null\n ) {\n <div\n class=\"ax-scheduler-current-time-line\"\n [style.inset-inline-start.%]=\"getCurrentTimePosition()\"\n #currentTimeLine\n ></div>\n }\n <!-- Resource rows for this day -->\n <div class=\"ax-scheduler-timeline-weekly-resource-rows\">\n @for (resourceId of resourceIds(); track resourceId) {\n <div\n class=\"ax-scheduler-timeline-weekly-resource-row\"\n [style.height]=\"getResourceRowHeight(resourceId)\"\n [style.--resource-spanning-rows-count]=\"getMaxSpanningRowsForResource(resourceId)\"\n >\n <!-- Spanning layer for this resource (only on first day column) -->\n @if (dayIndex === 0 && getSpanningAppointmentsForResource(resourceId).length > 0) {\n <div\n class=\"ax-scheduler-timeline-resource-spanning-layer\"\n [style.--timeline-days-count]=\"daysDataForTimelineViews().length\"\n >\n @for (spanning of getSpanningAppointmentsForResource(resourceId); track spanning.appointment.id) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"spanning.appointment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || spanning.appointment.readonly || readonly()\"\n (click)=\"handleSpanningAppointmentEvent($event, spanning.appointment)\"\n (dblclick)=\"handleSpanningAppointmentEvent($event, spanning.appointment)\"\n (contextmenu)=\"handleSpanningAppointmentEvent($event, spanning.appointment)\"\n [title]=\"\n spanning.appointment.title +\n ' (' +\n (spanning.appointment.startDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ' - ' +\n (spanning.appointment.endDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ')'\n \"\n class=\"ax-scheduler-timeline-spanning-appointment {{\n spanning.appointment.cssClass ??\n 'ax-scheduler-' + (spanning.appointment.priority ?? 'primary') + '-priority'\n }}\"\n [class.ax-spanning-start-clipped]=\"spanning.isStartClipped\"\n [class.ax-spanning-end-clipped]=\"spanning.isEndClipped\"\n [class.ax-state-active]=\"isActive(spanning.appointment.id)\"\n [style.grid-column]=\"spanning.startDayIndex + 1 + ' / span ' + spanning.spanCount\"\n [style.grid-row]=\"spanning.rowIndex + 1\"\n >\n <span class=\"ax-spanning-appointment-title\">\n <span class=\"ax-scheduler-truncate\">{{ spanning.appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleSpanningActionClick($event, spanning.appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n ></ax-icon>\n }\n </span>\n </div>\n }\n </div>\n }\n <ax-scheduler-timeline-day-view\n [date]=\"daySlot.date\"\n [readonly]=\"readonly()\"\n [draggable]=\"draggable()\"\n [resources]=\"\n resourceId === 'unassigned' ? [] : [{ id: resourceId, title: getResourceTitle(resourceId) }]\n \"\n [endDayHour]=\"endDayHour()\"\n [hasActions]=\"hasActions()\"\n [showResourceHeaders]=\"false\"\n [startDayHour]=\"startDayHour()\"\n [showCurrentTimeIndicator]=\"false\"\n [dragStartDelay]=\"dragStartDelay()\"\n [tooltipTemplate]=\"tooltipTemplate()\"\n [showUnassignedAppointments]=\"resourceId === 'unassigned'\"\n [appointments]=\"\n getFilteredAppointmentsForDay(\n getAppointmentsForResourceAndDay(resourceId, daySlot.originalAppointmentsForThisDay)\n )\n \"\n (onActionClickInternal)=\"onActionClickInternal.emit($event)\"\n (slotClickedInternal)=\"slotClickedInternal.emit($event)\"\n (slotDblClickedInternal)=\"slotDblClickedInternal.emit($event)\"\n (slotRightClickedInternal)=\"slotRightClickedInternal.emit($event)\"\n (onAppointmentDropInternal)=\"handleDrop($event, resourceId)\"\n (appointmentClickedInternal)=\"appointmentClickedInternal.emit($event)\"\n (appointmentDblClickedInternal)=\"appointmentDblClickedInternal.emit($event)\"\n (appointmentRightClickedInternal)=\"appointmentRightClickedInternal.emit($event)\"\n >\n </ax-scheduler-timeline-day-view>\n </div>\n }\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n}\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-font-weight:initial;--tw-content:\"\"}}}@layer components{ax-scheduler-timeline-weekly-view{background-color:inherit}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-day-view-container{background-color:inherit;flex-direction:row;height:100%;display:flex;position:relative}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day{height:calc(var(--spacing,.25rem) * 16);justify-content:center;align-items:flex-start;gap:calc(var(--spacing,.25rem) * 1);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding-inline:calc(var(--spacing,.25rem) * 4);padding-block:calc(var(--spacing,.25rem) * 1);flex-direction:column;display:flex;position:relative}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day.ax-state-today{background-color:rgba(var(--ax-sys-color-primary-surface))}@supports (color:color-mix(in lab,red,red)){ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day.ax-state-today{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 5%,transparent)}}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day.ax-state-today .ax-scheduler-week-header-date-day-char{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day.ax-state-today .ax-scheduler-week-header-date-day-num{--tw-font-weight:var(--font-weight-bold,700);font-weight:var(--font-weight-bold,700)}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day.ax-state-holiday{color:rgba(var(--ax-sys-color-danger-600))}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day.ax-state-holiday.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day .ax-scheduler-week-header-date-day-char{--tw-font-weight:var(--font-weight-light,300);max-width:100%;font-weight:var(--font-weight-light,300);position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 4)}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day .ax-scheduler-week-header-date-day-num{font-size:var(--text-xl,1.25rem);line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75 / 1.25)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 4)}ax-scheduler-timeline-weekly-view ax-scheduler-timeline-day-view{height:calc(100% - 4rem)}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container{background-color:inherit;flex-direction:column;height:100%;display:flex;overflow:auto}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-top-header{top:calc(var(--spacing,.25rem) * 0);z-index:10;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;flex-direction:row;min-width:max-content;display:flex;position:sticky}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-top-header .ax-scheduler-timeline-weekly-resource-header-placeholder{z-index:15;height:calc(var(--spacing,.25rem) * 4);width:var(--ax-comp-scheduler-resource-header-width,8rem);min-width:var(--ax-comp-scheduler-resource-header-width,8rem);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;justify-content:center;align-items:center;display:flex;position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 0)}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-top-header .ax-scheduler-timeline-weekly-day-header{width:calc(var(--ax-comp-scheduler-timeline-view-blocks-width) * var(--ax-comp-scheduler-hours-count,16));min-width:calc(var(--ax-comp-scheduler-timeline-view-blocks-width) * var(--ax-comp-scheduler-hours-count,16));border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));flex-shrink:0}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-top-header .ax-scheduler-timeline-weekly-day-header .ax-scheduler-week-header-date-day{height:calc(var(--spacing,.25rem) * 16);justify-content:center;align-items:flex-start;gap:calc(var(--spacing,.25rem) * 1);padding-inline:calc(var(--spacing,.25rem) * 4);padding-block:calc(var(--spacing,.25rem) * 1);flex-direction:column;display:flex;position:relative}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-top-header .ax-scheduler-timeline-weekly-day-header .ax-scheduler-week-header-date-day.ax-state-today{background-color:rgba(var(--ax-sys-color-primary-surface))}@supports (color:color-mix(in lab,red,red)){ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-top-header .ax-scheduler-timeline-weekly-day-header .ax-scheduler-week-header-date-day.ax-state-today{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 5%,transparent)}}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-top-header .ax-scheduler-timeline-weekly-day-header .ax-scheduler-week-header-date-day.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-top-header .ax-scheduler-timeline-weekly-day-header .ax-scheduler-week-header-date-day.ax-state-today .ax-scheduler-week-header-date-day-char{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-top-header .ax-scheduler-timeline-weekly-day-header .ax-scheduler-week-header-date-day.ax-state-today .ax-scheduler-week-header-date-day-num{--tw-font-weight:var(--font-weight-bold,700);font-weight:var(--font-weight-bold,700)}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-top-header .ax-scheduler-timeline-weekly-day-header .ax-scheduler-week-header-date-day.ax-state-holiday{color:rgba(var(--ax-sys-color-danger-600))}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-top-header .ax-scheduler-timeline-weekly-day-header .ax-scheduler-week-header-date-day.ax-state-holiday.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-top-header .ax-scheduler-timeline-weekly-day-header .ax-scheduler-week-header-date-day .ax-scheduler-week-header-date-day-char{max-width:100%;font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));--tw-font-weight:var(--font-weight-light,300);font-weight:var(--font-weight-light,300);position:sticky;inset-inline-start:calc(var(--ax-comp-scheduler-resource-header-width,8rem) + 1rem)}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-top-header .ax-scheduler-timeline-weekly-day-header .ax-scheduler-week-header-date-day .ax-scheduler-week-header-date-day-num{max-width:100%;font-size:var(--text-xl,1.25rem);line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75 / 1.25)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);position:sticky;inset-inline-start:calc(var(--ax-comp-scheduler-resource-header-width,8rem) + 1rem)}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-time-header{top:calc(var(--spacing,.25rem) * 16);z-index:10;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;flex-direction:row;min-width:max-content;display:flex;position:sticky}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-time-header .ax-scheduler-timeline-weekly-time-header-placeholder{z-index:15;height:calc(var(--spacing,.25rem) * 8);width:var(--ax-comp-scheduler-resource-header-width,8rem);min-width:var(--ax-comp-scheduler-resource-header-width,8rem);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;justify-content:center;align-items:center;display:flex;position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 0)}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-time-header .ax-scheduler-timeline-weekly-day-time-slots{height:calc(var(--spacing,.25rem) * 8);width:calc(var(--ax-comp-scheduler-timeline-view-blocks-width) * var(--ax-comp-scheduler-hours-count,16));min-width:calc(var(--ax-comp-scheduler-timeline-view-blocks-width) * var(--ax-comp-scheduler-hours-count,16));border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;flex-direction:row;flex-shrink:0;display:flex}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-time-header .ax-scheduler-timeline-weekly-day-time-slots .ax-scheduler-timeline-weekly-time-slot{width:var(--ax-comp-scheduler-timeline-view-blocks-width);min-width:var(--ax-comp-scheduler-timeline-view-blocks-width);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding-inline:calc(var(--spacing,.25rem) * 4);flex-shrink:0;align-items:center;display:flex;position:relative}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-time-header .ax-scheduler-timeline-weekly-day-time-slots .ax-scheduler-timeline-weekly-time-slot span{z-index:5;font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));--tw-font-weight:var(--font-weight-normal,400);font-weight:var(--font-weight-normal,400);position:sticky;inset-inline-start:calc(var(--ax-comp-scheduler-resource-header-width,8rem) + 1rem)}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content{min-height:calc(var(--spacing,.25rem) * 0);background-color:inherit;flex-direction:row;flex:1;width:fit-content;display:flex}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-resource-headers{z-index:15;height:fit-content;width:var(--ax-comp-scheduler-resource-header-width,8rem);min-width:var(--ax-comp-scheduler-resource-header-width,8rem);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;flex-direction:column;display:flex;position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 0)}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-resource-headers .ax-scheduler-timeline-weekly-resource-header{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding:calc(var(--spacing,.25rem) * 2);justify-content:center;align-items:center;display:flex}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-resource-headers .ax-scheduler-timeline-weekly-resource-header .ax-scheduler-timeline-resource-title{text-align:center;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);overflow-wrap:break-word}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-days-container{flex-direction:row;flex:1;min-width:max-content;display:flex}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-days-container .ax-scheduler-timeline-weekly-column{width:calc(var(--ax-comp-scheduler-timeline-view-blocks-width) * var(--ax-comp-scheduler-hours-count,16));min-width:calc(var(--ax-comp-scheduler-timeline-view-blocks-width) * var(--ax-comp-scheduler-hours-count,16));border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));flex-direction:column;flex-shrink:0;display:flex;position:relative}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-days-container .ax-scheduler-timeline-weekly-column .ax-scheduler-timeline-weekly-resource-rows{flex-direction:column;flex:1;display:flex}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-days-container .ax-scheduler-timeline-weekly-column .ax-scheduler-timeline-weekly-resource-rows .ax-scheduler-timeline-weekly-resource-row{min-height:var(--ax-comp-scheduler-basic-view-blocks-height);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-days-container .ax-scheduler-timeline-weekly-column .ax-scheduler-timeline-weekly-resource-rows .ax-scheduler-timeline-weekly-resource-row ax-scheduler-timeline-day-view{width:100%;height:100%;display:block}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-days-container .ax-scheduler-timeline-weekly-column .ax-scheduler-timeline-weekly-resource-rows .ax-scheduler-timeline-weekly-resource-row ax-scheduler-timeline-day-view .ax-scheduler-timeline-header{display:none}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-days-container .ax-scheduler-timeline-weekly-column .ax-scheduler-timeline-weekly-resource-rows .ax-scheduler-timeline-weekly-resource-row ax-scheduler-timeline-day-view .ax-scheduler-timeline-content{height:100%;position:relative}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-days-container .ax-scheduler-timeline-weekly-column .ax-scheduler-timeline-weekly-resource-rows .ax-scheduler-timeline-weekly-resource-row ax-scheduler-timeline-day-view .ax-scheduler-timeline-appointment-container{top:calc(var(--spacing,.25rem) * 0);width:100%;height:100%;position:absolute}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-days-container .ax-scheduler-timeline-weekly-column .ax-scheduler-timeline-weekly-resource-rows .ax-scheduler-timeline-weekly-resource-row ax-scheduler-timeline-day-view .ax-scheduler-timeline-appointment-container .ax-scheduler-timeline-appointment{border-radius:calc(var(--ax-sys-border-radius) / 2);width:100%;padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:calc(var(--spacing,.25rem) * 1);flex-direction:column;display:flex;position:absolute;inset-inline-start:calc(var(--spacing,.25rem) * 0);overflow:hidden}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-days-container .ax-scheduler-timeline-weekly-column .ax-scheduler-timeline-weekly-resource-rows .ax-scheduler-timeline-weekly-resource-row ax-scheduler-timeline-day-view .ax-scheduler-timeline-slot-row{width:max-content;height:100%;display:flex;position:relative}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-days-container .ax-scheduler-timeline-weekly-column .ax-scheduler-timeline-weekly-resource-rows .ax-scheduler-timeline-weekly-resource-row ax-scheduler-timeline-day-view .ax-scheduler-timeline-slot-row .ax-scheduler-timeline-slot-cell{width:var(--ax-comp-scheduler-timeline-view-blocks-width);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));flex-shrink:0;position:relative}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-days-container .ax-scheduler-timeline-weekly-column .ax-scheduler-timeline-weekly-resource-rows .ax-scheduler-timeline-weekly-resource-row ax-scheduler-timeline-day-view .ax-scheduler-timeline-slot-row .ax-scheduler-timeline-slot-cell:after{inset-inline-end:calc(var(--spacing,.25rem) * 0);top:calc(var(--spacing,.25rem) * 0);background-color:rgba(var(--ax-sys-color-border-lightest-surface));width:1px;height:100%}@supports (color:color-mix(in lab,red,red)){ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-days-container .ax-scheduler-timeline-weekly-column .ax-scheduler-timeline-weekly-resource-rows .ax-scheduler-timeline-weekly-resource-row ax-scheduler-timeline-day-view .ax-scheduler-timeline-slot-row .ax-scheduler-timeline-slot-cell:after{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-border-lightest-surface)) 30%,transparent)}}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-days-container .ax-scheduler-timeline-weekly-column .ax-scheduler-timeline-weekly-resource-rows .ax-scheduler-timeline-weekly-resource-row ax-scheduler-timeline-day-view .ax-scheduler-timeline-slot-row .ax-scheduler-timeline-slot-cell:after{--tw-content:\"\";content:var(--tw-content)}ax-scheduler-timeline-weekly-view .ax-scheduler-current-time-line{top:calc(var(--spacing,.25rem) * 0);bottom:calc(var(--spacing,.25rem) * 0);width:calc(var(--spacing,.25rem) * .5)}ax-scheduler-timeline-weekly-view .ax-scheduler-current-time-line:before{content:var(--tw-content);inset-inline-start:-5px;top:calc(var(--spacing,.25rem) * -1.5)}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-content{syntax:\"*\";inherits:false;initial-value:\"\"}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["axDrag", "dragData", "dragDisabled", "dragTransition", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragClonedTemplate", "dragCursor", "dragBoundary", "dragTransitionDuration"], outputs: ["dragPositionChanged"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXSchedulerTimelineDayViewComponent, selector: "ax-scheduler-timeline-day-view", inputs: ["readonly", "draggable", "hasActions", "dragStartDelay", "calendar", "showResourceHeaders", "date", "endDayHour", "selectedAppointmentId", "startDayHour", "showUnassignedAppointments", "resources", "showCurrentTimeIndicator", "scrollToCurrentTimeIndicator", "resourceTemplate", "appointments", "tooltipTemplate"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onActionClickInternal", "onAppointmentDropInternal"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXFormatPipe, name: "format" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
3408
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXSchedulerTimelineWeeklyViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
3409
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXSchedulerTimelineWeeklyViewComponent, isStandalone: true, selector: "ax-scheduler-timeline-weekly-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 }, hasActions: { classPropertyName: "hasActions", publicName: "hasActions", isSignal: true, isRequired: false, transformFunction: null }, dragStartDelay: { classPropertyName: "dragStartDelay", publicName: "dragStartDelay", isSignal: true, isRequired: false, transformFunction: null }, calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, showResourceHeaders: { classPropertyName: "showResourceHeaders", publicName: "showResourceHeaders", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: true, transformFunction: null }, endDayHour: { classPropertyName: "endDayHour", publicName: "endDayHour", isSignal: true, isRequired: true, transformFunction: null }, selectedAppointmentId: { classPropertyName: "selectedAppointmentId", publicName: "selectedAppointmentId", isSignal: true, isRequired: false, transformFunction: null }, showCurrentTimeIndicator: { classPropertyName: "showCurrentTimeIndicator", publicName: "showCurrentTimeIndicator", isSignal: true, isRequired: false, transformFunction: null }, scrollToCurrentTimeIndicator: { classPropertyName: "scrollToCurrentTimeIndicator", publicName: "scrollToCurrentTimeIndicator", isSignal: true, isRequired: false, transformFunction: null }, startDayHour: { classPropertyName: "startDayHour", publicName: "startDayHour", isSignal: true, isRequired: true, transformFunction: null }, showUnassignedAppointments: { classPropertyName: "showUnassignedAppointments", publicName: "showUnassignedAppointments", isSignal: true, isRequired: false, transformFunction: null }, resources: { classPropertyName: "resources", publicName: "resources", isSignal: true, isRequired: false, transformFunction: null }, resourceTemplate: { classPropertyName: "resourceTemplate", publicName: "resourceTemplate", isSignal: true, isRequired: false, transformFunction: null }, appointments: { classPropertyName: "appointments", publicName: "appointments", isSignal: true, isRequired: false, transformFunction: null }, tooltipTemplate: { classPropertyName: "tooltipTemplate", publicName: "tooltipTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { slotClickedInternal: "slotClickedInternal", slotDblClickedInternal: "slotDblClickedInternal", slotRightClickedInternal: "slotRightClickedInternal", appointmentClickedInternal: "appointmentClickedInternal", appointmentDblClickedInternal: "appointmentDblClickedInternal", appointmentRightClickedInternal: "appointmentRightClickedInternal", onActionClickInternal: "onActionClickInternal", onAppointmentDropInternal: "onAppointmentDropInternal" }, host: { properties: { "class.ax-state-readonly": "readonly()" } }, providers: [{ provide: AXComponent, useExisting: AXSchedulerTimelineWeeklyViewComponent }], viewQueries: [{ propertyName: "currentTimeLineElement", first: true, predicate: ["currentTimeLine"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (resources().length === 0 || !showResourceHeaders()) {\n <!-- Original layout when no resources -->\n <div class=\"ax-scheduler-timeline-day-view-container\" [style.--spanning-rows-count]=\"maxSpanningRows()\">\n <!-- Spanning appointments layer -->\n @if (spanningAppointments().length > 0) {\n <div\n class=\"ax-scheduler-timeline-weekly-spanning-layer\"\n [style.--timeline-days-count]=\"daysDataForTimelineViews().length\"\n >\n @for (spanning of spanningAppointments(); track spanning.appointment.id) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"spanning.appointment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || spanning.appointment.readonly || readonly()\"\n (click)=\"handleSpanningAppointmentEvent($event, spanning.appointment)\"\n (dblclick)=\"handleSpanningAppointmentEvent($event, spanning.appointment)\"\n (contextmenu)=\"handleSpanningAppointmentEvent($event, spanning.appointment)\"\n [title]=\"\n spanning.appointment.title +\n ' (' +\n (spanning.appointment.startDate | format: 'date' : { format: 'MMM d', calendar: calendar() } | async) +\n ' - ' +\n (spanning.appointment.endDate | format: 'date' : { format: 'MMM d', calendar: calendar() } | async) +\n ')'\n \"\n class=\"ax-scheduler-timeline-spanning-appointment {{\n spanning.appointment.cssClass ??\n 'ax-scheduler-' + (spanning.appointment.priority ?? 'primary') + '-priority'\n }}\"\n [class.ax-spanning-start-clipped]=\"spanning.isStartClipped\"\n [class.ax-spanning-end-clipped]=\"spanning.isEndClipped\"\n [class.ax-state-active]=\"isActive(spanning.appointment.id)\"\n [style.grid-column]=\"spanning.startDayIndex + 1 + ' / span ' + spanning.spanCount\"\n [style.grid-row]=\"spanning.rowIndex + 1\"\n >\n <span class=\"ax-spanning-appointment-title\">\n <span class=\"ax-scheduler-truncate\">{{ spanning.appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleSpanningActionClick($event, spanning.appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n ></ax-icon>\n }\n </span>\n </div>\n }\n </div>\n }\n @for (daySlot of daysDataForTimelineViews(); track daySlot.date.date.getTime()) {\n <div class=\"ax-scheduler-timeline-weekly-column\">\n <div\n [class.ax-state-today]=\"isToday(daySlot.date)\"\n class=\"ax-scheduler-week-header-date-day {{\n daySlot.holiday.state !== 'none' ? (daySlot.holiday.holiday?.cssClass ?? 'ax-state-holiday') : ''\n }}\"\n [style.--ax-scheduler-holiday-color]=\"daySlot.holiday.holiday?.color ?? null\"\n >\n <span\n class=\"ax-scheduler-week-header-date-day-char ax-scheduler-truncate\"\n [axTooltip]=\"(daySlot.holiday.holiday?.description ?? daySlot.holiday.holiday?.title ?? '') | translate | async\"\n >\n {{ daySlot.date | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n @if (daySlot.holiday.state === 'holiday' && daySlot.holiday.holiday.title) {\n ( {{ daySlot.holiday.holiday.title | translate | async }} )\n }\n </span>\n <span class=\"ax-scheduler-week-header-date-day-num\">\n {{ daySlot.date | format: 'date' : { format: 'DD', calendar: calendar() } | async }}\n </span>\n </div>\n <ax-scheduler-timeline-day-view\n [date]=\"daySlot.date\"\n [readonly]=\"readonly()\"\n [draggable]=\"draggable()\"\n [resources]=\"resources()\"\n [endDayHour]=\"endDayHour()\"\n [hasActions]=\"hasActions()\"\n [showResourceHeaders]=\"true\"\n [startDayHour]=\"startDayHour()\"\n [dragStartDelay]=\"dragStartDelay()\"\n [tooltipTemplate]=\"tooltipTemplate()\"\n [showCurrentTimeIndicator]=\"showCurrentTimeIndicator()\"\n [appointments]=\"getFilteredAppointmentsForDay(daySlot.originalAppointmentsForThisDay)\"\n [showUnassignedAppointments]=\"showUnassignedAppointments()\"\n (onActionClickInternal)=\"onActionClickInternal.emit($event)\"\n (slotClickedInternal)=\"slotClickedInternal.emit($event)\"\n (slotDblClickedInternal)=\"slotDblClickedInternal.emit($event)\"\n (slotRightClickedInternal)=\"slotRightClickedInternal.emit($event)\"\n (onAppointmentDropInternal)=\"handleDrop($event, undefined)\"\n (appointmentClickedInternal)=\"appointmentClickedInternal.emit($event)\"\n (appointmentDblClickedInternal)=\"appointmentDblClickedInternal.emit($event)\"\n (appointmentRightClickedInternal)=\"appointmentRightClickedInternal.emit($event)\"\n >\n </ax-scheduler-timeline-day-view>\n </div>\n }\n </div>\n} @else {\n <!-- Resource-based layout for weekly -->\n <div\n class=\"ax-scheduler-timeline-weekly-resource-container\"\n [style.--ax-comp-scheduler-hours-count]=\"getHoursCount()\"\n >\n <!-- Top header with day names -->\n <div class=\"ax-scheduler-timeline-weekly-top-header\">\n <!-- Resource placeholder -->\n <div class=\"ax-scheduler-timeline-weekly-resource-header-placeholder\"></div>\n <!-- Day headers -->\n @for (daySlot of daysDataForTimelineViews(); track daySlot.date.date.getTime()) {\n <div class=\"ax-scheduler-timeline-weekly-day-header\">\n <div\n [class.ax-state-today]=\"isToday(daySlot.date)\"\n class=\"ax-scheduler-week-header-date-day {{\n daySlot.holiday.state !== 'none' ? (daySlot.holiday.holiday?.cssClass ?? 'ax-state-holiday') : ''\n }}\"\n [style.--ax-scheduler-holiday-color]=\"daySlot.holiday.holiday?.color ?? null\"\n >\n <span\n class=\"ax-scheduler-week-header-date-day-char ax-scheduler-truncate\"\n [axTooltip]=\"(daySlot.holiday.holiday?.description ?? daySlot.holiday.holiday?.title ?? '') | translate | async\"\n >\n {{ daySlot.date | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n @if (daySlot.holiday.state === 'holiday' && daySlot.holiday.holiday.title) {\n ( {{ daySlot.holiday.holiday.title | translate | async }} )\n }\n </span>\n <span class=\"ax-scheduler-week-header-date-day-num\">\n {{ daySlot.date | format: 'date' : { format: 'DD', calendar: calendar() } | async }}\n </span>\n </div>\n </div>\n }\n </div>\n\n <!-- Time header with hours for each day -->\n <div class=\"ax-scheduler-timeline-weekly-time-header\">\n <!-- Resource placeholder -->\n <div class=\"ax-scheduler-timeline-weekly-time-header-placeholder\"><span>Resources</span></div>\n <!-- Time slots for each day -->\n @for (daySlot of daysDataForTimelineViews(); track daySlot.date.date.getTime()) {\n <div class=\"ax-scheduler-timeline-weekly-day-time-slots\">\n @for (hour of getHoursArray(); track hour.date.getTime()) {\n <div class=\"ax-scheduler-timeline-weekly-time-slot\">\n <span>{{ hour | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}</span>\n </div>\n }\n </div>\n }\n </div>\n\n <!-- Main content area -->\n <div class=\"ax-scheduler-timeline-weekly-content\">\n <!-- Resource headers column -->\n <div class=\"ax-scheduler-timeline-weekly-resource-headers\">\n <!-- Resource headers -->\n @for (resourceId of resourceIds(); track resourceId) {\n <div\n class=\"ax-scheduler-timeline-weekly-resource-header\"\n [style.height]=\"getResourceRowHeight(resourceId)\"\n [style.--resource-spanning-rows-count]=\"getMaxSpanningRowsForResource(resourceId)\"\n >\n @if (resourceTemplate() && typeof resourceTemplate() !== 'string') {\n <ng-container\n [ngTemplateOutlet]=\"$any(resourceTemplate())\"\n [ngTemplateOutletContext]=\"{\n $implicit: getResourceContext(resourceId),\n resource: getResourceContext(resourceId),\n resourceId: resourceId,\n }\"\n ></ng-container>\n } @else {\n <span class=\"ax-scheduler-timeline-resource-title\">{{ getResourceTitle(resourceId) }}</span>\n }\n </div>\n }\n </div>\n\n <!-- Days columns -->\n <div class=\"ax-scheduler-timeline-weekly-days-container\" #daysContainer>\n @for (daySlot of daysDataForTimelineViews(); track daySlot.date.date.getTime(); let dayIndex = $index) {\n <div class=\"ax-scheduler-timeline-weekly-column\">\n <!-- Current Time Line Indicator for this day -->\n @if (\n showCurrentTimeIndicator() &&\n shouldShowCurrentTimeForDay(daySlot.date) &&\n getCurrentTimePosition() !== null\n ) {\n <div\n class=\"ax-scheduler-current-time-line\"\n [style.inset-inline-start.%]=\"getCurrentTimePosition()\"\n #currentTimeLine\n ></div>\n }\n <!-- Resource rows for this day -->\n <div class=\"ax-scheduler-timeline-weekly-resource-rows\">\n @for (resourceId of resourceIds(); track resourceId) {\n <div\n class=\"ax-scheduler-timeline-weekly-resource-row\"\n [style.height]=\"getResourceRowHeight(resourceId)\"\n [style.--resource-spanning-rows-count]=\"getMaxSpanningRowsForResource(resourceId)\"\n >\n <!-- Spanning layer for this resource (only on first day column) -->\n @if (dayIndex === 0 && getSpanningAppointmentsForResource(resourceId).length > 0) {\n <div\n class=\"ax-scheduler-timeline-resource-spanning-layer\"\n [style.--timeline-days-count]=\"daysDataForTimelineViews().length\"\n >\n @for (spanning of getSpanningAppointmentsForResource(resourceId); track spanning.appointment.id) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"spanning.appointment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || spanning.appointment.readonly || readonly()\"\n (click)=\"handleSpanningAppointmentEvent($event, spanning.appointment)\"\n (dblclick)=\"handleSpanningAppointmentEvent($event, spanning.appointment)\"\n (contextmenu)=\"handleSpanningAppointmentEvent($event, spanning.appointment)\"\n [title]=\"\n spanning.appointment.title +\n ' (' +\n (spanning.appointment.startDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ' - ' +\n (spanning.appointment.endDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ')'\n \"\n class=\"ax-scheduler-timeline-spanning-appointment {{\n spanning.appointment.cssClass ??\n 'ax-scheduler-' + (spanning.appointment.priority ?? 'primary') + '-priority'\n }}\"\n [class.ax-spanning-start-clipped]=\"spanning.isStartClipped\"\n [class.ax-spanning-end-clipped]=\"spanning.isEndClipped\"\n [class.ax-state-active]=\"isActive(spanning.appointment.id)\"\n [style.grid-column]=\"spanning.startDayIndex + 1 + ' / span ' + spanning.spanCount\"\n [style.grid-row]=\"spanning.rowIndex + 1\"\n >\n <span class=\"ax-spanning-appointment-title\">\n <span class=\"ax-scheduler-truncate\">{{ spanning.appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleSpanningActionClick($event, spanning.appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n ></ax-icon>\n }\n </span>\n </div>\n }\n </div>\n }\n <ax-scheduler-timeline-day-view\n [date]=\"daySlot.date\"\n [readonly]=\"readonly()\"\n [draggable]=\"draggable()\"\n [resources]=\"\n resourceId === 'unassigned' ? [] : [{ id: resourceId, title: getResourceTitle(resourceId) }]\n \"\n [endDayHour]=\"endDayHour()\"\n [hasActions]=\"hasActions()\"\n [showResourceHeaders]=\"false\"\n [startDayHour]=\"startDayHour()\"\n [showCurrentTimeIndicator]=\"false\"\n [dragStartDelay]=\"dragStartDelay()\"\n [tooltipTemplate]=\"tooltipTemplate()\"\n [showUnassignedAppointments]=\"resourceId === 'unassigned'\"\n [appointments]=\"\n getFilteredAppointmentsForDay(\n getAppointmentsForResourceAndDay(resourceId, daySlot.originalAppointmentsForThisDay)\n )\n \"\n (onActionClickInternal)=\"onActionClickInternal.emit($event)\"\n (slotClickedInternal)=\"slotClickedInternal.emit($event)\"\n (slotDblClickedInternal)=\"slotDblClickedInternal.emit($event)\"\n (slotRightClickedInternal)=\"slotRightClickedInternal.emit($event)\"\n (onAppointmentDropInternal)=\"handleDrop($event, resourceId)\"\n (appointmentClickedInternal)=\"appointmentClickedInternal.emit($event)\"\n (appointmentDblClickedInternal)=\"appointmentDblClickedInternal.emit($event)\"\n (appointmentRightClickedInternal)=\"appointmentRightClickedInternal.emit($event)\"\n >\n </ax-scheduler-timeline-day-view>\n </div>\n }\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n}\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-font-weight:initial;--tw-content:\"\"}}}@layer components{ax-scheduler-timeline-weekly-view{--ax-scheduler-timeline-spanning-row-height:1.5rem;--ax-scheduler-timeline-spanning-gap:.125rem;background-color:inherit}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-day-view-container{background-color:inherit;flex-direction:row;height:100%;display:flex;position:relative}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-day-view-container .ax-scheduler-timeline-weekly-spanning-layer{pointer-events:none;inset-inline-start:calc(var(--spacing,.25rem) * 0);inset-inline-end:calc(var(--spacing,.25rem) * 0);top:calc(var(--spacing,.25rem) * 16);z-index:5;padding-inline:calc(var(--spacing,.25rem) * .5);padding-block:var(--spacing,.25rem);align-content:flex-start;row-gap:var(--ax-scheduler-timeline-spanning-gap);grid-auto-rows:var(--ax-scheduler-timeline-spanning-row-height);grid-template-columns:repeat(var(--timeline-days-count,7),calc(var(--ax-comp-scheduler-timeline-view-blocks-width) * var(--ax-comp-scheduler-hours-count,16)));display:grid;position:absolute}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-day-view-container .ax-scheduler-timeline-weekly-spanning-layer .ax-scheduler-timeline-spanning-appointment{z-index:6;cursor:pointer;text-overflow:ellipsis;border-radius:var(--radius-sm,.25rem);padding-inline:var(--spacing,.25rem);padding-block:calc(var(--spacing,.25rem) * .5);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));white-space:nowrap;pointer-events:auto;align-items:center;margin-inline:.125rem;display:flex;overflow:hidden}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-day-view-container .ax-scheduler-timeline-weekly-spanning-layer .ax-scheduler-timeline-spanning-appointment .ax-spanning-appointment-title{width:100%;height:100%;padding-inline:calc(var(--spacing,.25rem) * 2);justify-content:space-between;align-items:center;display:flex}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-day-view-container .ax-scheduler-timeline-weekly-spanning-layer .ax-scheduler-timeline-spanning-appointment .ax-spanning-appointment-title .ax-scheduler-truncate{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-day-view-container .ax-scheduler-timeline-weekly-spanning-layer .ax-scheduler-timeline-spanning-appointment .ax-spanning-appointment-title .ax-scheduler-action-icon{cursor:pointer;width:auto;flex-shrink:0;margin-inline-start:var(--spacing,.25rem)}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-day-view-container .ax-scheduler-timeline-weekly-spanning-layer .ax-scheduler-timeline-spanning-appointment.ax-spanning-start-clipped{border-start-start-radius:0;border-end-start-radius:0;margin-inline-start:0;position:relative}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-day-view-container .ax-scheduler-timeline-weekly-spanning-layer .ax-scheduler-timeline-spanning-appointment.ax-spanning-start-clipped:before{content:\"\\2190 \";top:calc(var(--spacing,.25rem) * .5);opacity:.7;font-size:.65rem;position:absolute;inset-inline-start:0}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-day-view-container .ax-scheduler-timeline-weekly-spanning-layer .ax-scheduler-timeline-spanning-appointment.ax-spanning-end-clipped{border-start-end-radius:0;border-end-end-radius:0;margin-inline-end:0;position:relative}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-day-view-container .ax-scheduler-timeline-weekly-spanning-layer .ax-scheduler-timeline-spanning-appointment.ax-spanning-end-clipped:after{content:\" \\2192\";top:calc(var(--spacing,.25rem) * .5);opacity:.7;font-size:.65rem;position:absolute;inset-inline-end:0}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day{height:calc(var(--spacing,.25rem) * 16);justify-content:center;align-items:flex-start;gap:var(--spacing,.25rem);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding-inline:calc(var(--spacing,.25rem) * 4);padding-block:var(--spacing,.25rem);flex-direction:column;display:flex;position:relative}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day.ax-state-today{background-color:rgba(var(--ax-sys-color-primary-surface))}@supports (color:color-mix(in lab,red,red)){ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day.ax-state-today{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 5%,transparent)}}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day.ax-state-today .ax-scheduler-week-header-date-day-char{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day.ax-state-today .ax-scheduler-week-header-date-day-num{--tw-font-weight:var(--font-weight-bold,700);font-weight:var(--font-weight-bold,700)}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day.ax-state-holiday{color:var(--ax-scheduler-holiday-color,rgba(var(--ax-sys-color-danger-surface)))}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day.ax-state-holiday.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day .ax-scheduler-week-header-date-day-char{--tw-font-weight:var(--font-weight-light,300);max-width:100%;font-weight:var(--font-weight-light,300);position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 4)}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day .ax-scheduler-week-header-date-day-num{font-size:var(--text-xl,1.25rem);line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75 / 1.25)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 4)}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-day-view-container ax-scheduler-timeline-day-view{height:calc(100% - 4rem - var(--spanning-rows-count,0) * (var(--ax-scheduler-timeline-spanning-row-height) + var(--ax-scheduler-timeline-spanning-gap)) - .5rem);margin-top:calc(var(--spanning-rows-count,0) * (var(--ax-scheduler-timeline-spanning-row-height) + var(--ax-scheduler-timeline-spanning-gap)) + .5rem)}ax-scheduler-timeline-weekly-view ax-scheduler-timeline-day-view{height:calc(100% - 4rem)}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container{background-color:inherit;flex-direction:column;height:100%;display:flex;overflow:auto}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-top-header{z-index:10;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;flex-direction:row;min-width:max-content;display:flex;position:sticky;top:0}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-top-header .ax-scheduler-timeline-weekly-resource-header-placeholder{z-index:15;height:calc(var(--spacing,.25rem) * 16);width:var(--ax-comp-scheduler-resource-header-width,8rem);min-width:var(--ax-comp-scheduler-resource-header-width,8rem);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;justify-content:center;align-items:center;display:flex;position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 0)}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-top-header .ax-scheduler-timeline-weekly-day-header{width:calc(var(--ax-comp-scheduler-timeline-view-blocks-width) * var(--ax-comp-scheduler-hours-count,16));min-width:calc(var(--ax-comp-scheduler-timeline-view-blocks-width) * var(--ax-comp-scheduler-hours-count,16));border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));flex-shrink:0}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-top-header .ax-scheduler-timeline-weekly-day-header .ax-scheduler-week-header-date-day{height:calc(var(--spacing,.25rem) * 16);justify-content:center;align-items:flex-start;gap:var(--spacing,.25rem);padding-inline:calc(var(--spacing,.25rem) * 4);padding-block:var(--spacing,.25rem);flex-direction:column;display:flex;position:relative}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-top-header .ax-scheduler-timeline-weekly-day-header .ax-scheduler-week-header-date-day.ax-state-today{background-color:rgba(var(--ax-sys-color-primary-surface))}@supports (color:color-mix(in lab,red,red)){ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-top-header .ax-scheduler-timeline-weekly-day-header .ax-scheduler-week-header-date-day.ax-state-today{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 5%,transparent)}}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-top-header .ax-scheduler-timeline-weekly-day-header .ax-scheduler-week-header-date-day.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-top-header .ax-scheduler-timeline-weekly-day-header .ax-scheduler-week-header-date-day.ax-state-today .ax-scheduler-week-header-date-day-char{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-top-header .ax-scheduler-timeline-weekly-day-header .ax-scheduler-week-header-date-day.ax-state-today .ax-scheduler-week-header-date-day-num{--tw-font-weight:var(--font-weight-bold,700);font-weight:var(--font-weight-bold,700)}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-top-header .ax-scheduler-timeline-weekly-day-header .ax-scheduler-week-header-date-day.ax-state-holiday{color:var(--ax-scheduler-holiday-color,rgba(var(--ax-sys-color-danger-surface)))}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-top-header .ax-scheduler-timeline-weekly-day-header .ax-scheduler-week-header-date-day.ax-state-holiday.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-top-header .ax-scheduler-timeline-weekly-day-header .ax-scheduler-week-header-date-day .ax-scheduler-week-header-date-day-char{max-width:100%;font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));--tw-font-weight:var(--font-weight-light,300);font-weight:var(--font-weight-light,300);position:sticky;inset-inline-start:calc(var(--ax-comp-scheduler-resource-header-width,8rem) + 1rem)}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-top-header .ax-scheduler-timeline-weekly-day-header .ax-scheduler-week-header-date-day .ax-scheduler-week-header-date-day-num{font-size:var(--text-xl,1.25rem);line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75 / 1.25)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);position:sticky;inset-inline-start:calc(var(--ax-comp-scheduler-resource-header-width,8rem) + 1rem)}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-time-header{top:calc(var(--spacing,.25rem) * 16);z-index:10;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;flex-direction:row;min-width:max-content;display:flex;position:sticky}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-time-header .ax-scheduler-timeline-weekly-time-header-placeholder{z-index:15;height:calc(var(--spacing,.25rem) * 8);width:var(--ax-comp-scheduler-resource-header-width,8rem);min-width:var(--ax-comp-scheduler-resource-header-width,8rem);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;justify-content:center;align-items:center;display:flex;position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 0)}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-time-header .ax-scheduler-timeline-weekly-day-time-slots{height:calc(var(--spacing,.25rem) * 8);width:calc(var(--ax-comp-scheduler-timeline-view-blocks-width) * var(--ax-comp-scheduler-hours-count,16));min-width:calc(var(--ax-comp-scheduler-timeline-view-blocks-width) * var(--ax-comp-scheduler-hours-count,16));border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;flex-direction:row;flex-shrink:0;display:flex}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-time-header .ax-scheduler-timeline-weekly-day-time-slots .ax-scheduler-timeline-weekly-time-slot{width:var(--ax-comp-scheduler-timeline-view-blocks-width);min-width:var(--ax-comp-scheduler-timeline-view-blocks-width);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding-inline:calc(var(--spacing,.25rem) * 4);flex-shrink:0;align-items:center;display:flex;position:relative}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-time-header .ax-scheduler-timeline-weekly-day-time-slots .ax-scheduler-timeline-weekly-time-slot span{z-index:5;font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));--tw-font-weight:var(--font-weight-normal,400);font-weight:var(--font-weight-normal,400);position:sticky;inset-inline-start:calc(var(--ax-comp-scheduler-resource-header-width,8rem) + 1rem)}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content{background-color:inherit;flex-direction:row;flex:1;align-items:stretch;width:fit-content;min-height:0;display:flex}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-resource-headers{z-index:15;width:var(--ax-comp-scheduler-resource-header-width,8rem);min-width:var(--ax-comp-scheduler-resource-header-width,8rem);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;flex-direction:column;display:flex;position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 0)}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-resource-headers .ax-scheduler-timeline-weekly-resource-header{box-sizing:border-box;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding:calc(var(--spacing,.25rem) * 2);justify-content:center;align-items:center;display:flex}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-resource-headers .ax-scheduler-timeline-weekly-resource-header .ax-scheduler-timeline-resource-title{text-align:center;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);overflow-wrap:break-word}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-days-container{flex-direction:row;flex:1;min-width:max-content;display:flex}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-days-container .ax-scheduler-timeline-weekly-column{width:calc(var(--ax-comp-scheduler-timeline-view-blocks-width) * var(--ax-comp-scheduler-hours-count,16));min-width:calc(var(--ax-comp-scheduler-timeline-view-blocks-width) * var(--ax-comp-scheduler-hours-count,16));border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));flex-direction:column;flex-shrink:0;display:flex;position:relative}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-days-container .ax-scheduler-timeline-weekly-column .ax-scheduler-timeline-weekly-resource-rows{flex-direction:column;flex:1;display:flex}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-days-container .ax-scheduler-timeline-weekly-column .ax-scheduler-timeline-weekly-resource-rows .ax-scheduler-timeline-weekly-resource-row{box-sizing:border-box;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));position:relative}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-days-container .ax-scheduler-timeline-weekly-column .ax-scheduler-timeline-weekly-resource-rows .ax-scheduler-timeline-weekly-resource-row .ax-scheduler-timeline-resource-spanning-layer{pointer-events:none;z-index:5;padding-inline:calc(var(--spacing,.25rem) * .5);padding-block:var(--spacing,.25rem);align-content:flex-start;row-gap:var(--ax-scheduler-timeline-spanning-gap);grid-auto-rows:var(--ax-scheduler-timeline-spanning-row-height);width:calc(var(--timeline-days-count,7) * var(--ax-comp-scheduler-timeline-view-blocks-width) * var(--ax-comp-scheduler-hours-count,16));grid-template-columns:repeat(var(--timeline-days-count,7),calc(var(--ax-comp-scheduler-timeline-view-blocks-width) * var(--ax-comp-scheduler-hours-count,16)));inset-inline-start:calc(var(--spacing,.25rem) * 0);display:grid;position:absolute;top:0}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-days-container .ax-scheduler-timeline-weekly-column .ax-scheduler-timeline-weekly-resource-rows .ax-scheduler-timeline-weekly-resource-row .ax-scheduler-timeline-resource-spanning-layer .ax-scheduler-timeline-spanning-appointment{z-index:6;cursor:pointer;text-overflow:ellipsis;border-radius:var(--radius-sm,.25rem);padding-inline:var(--spacing,.25rem);padding-block:calc(var(--spacing,.25rem) * .5);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));white-space:nowrap;pointer-events:auto;align-items:center;margin-inline:.125rem;display:flex;overflow:hidden}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-days-container .ax-scheduler-timeline-weekly-column .ax-scheduler-timeline-weekly-resource-rows .ax-scheduler-timeline-weekly-resource-row .ax-scheduler-timeline-resource-spanning-layer .ax-scheduler-timeline-spanning-appointment .ax-spanning-appointment-title{width:100%;height:100%;padding-inline:calc(var(--spacing,.25rem) * 2);justify-content:space-between;align-items:center;display:flex}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-days-container .ax-scheduler-timeline-weekly-column .ax-scheduler-timeline-weekly-resource-rows .ax-scheduler-timeline-weekly-resource-row .ax-scheduler-timeline-resource-spanning-layer .ax-scheduler-timeline-spanning-appointment .ax-spanning-appointment-title .ax-scheduler-truncate{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-days-container .ax-scheduler-timeline-weekly-column .ax-scheduler-timeline-weekly-resource-rows .ax-scheduler-timeline-weekly-resource-row .ax-scheduler-timeline-resource-spanning-layer .ax-scheduler-timeline-spanning-appointment .ax-spanning-appointment-title .ax-scheduler-action-icon{cursor:pointer;width:auto;flex-shrink:0;margin-inline-start:var(--spacing,.25rem)}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-days-container .ax-scheduler-timeline-weekly-column .ax-scheduler-timeline-weekly-resource-rows .ax-scheduler-timeline-weekly-resource-row .ax-scheduler-timeline-resource-spanning-layer .ax-scheduler-timeline-spanning-appointment.ax-spanning-start-clipped{border-start-start-radius:0;border-end-start-radius:0;margin-inline-start:0;position:relative}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-days-container .ax-scheduler-timeline-weekly-column .ax-scheduler-timeline-weekly-resource-rows .ax-scheduler-timeline-weekly-resource-row .ax-scheduler-timeline-resource-spanning-layer .ax-scheduler-timeline-spanning-appointment.ax-spanning-start-clipped:before{content:\"\\2190 \";top:calc(var(--spacing,.25rem) * .5);opacity:.7;font-size:.65rem;position:absolute;inset-inline-start:0}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-days-container .ax-scheduler-timeline-weekly-column .ax-scheduler-timeline-weekly-resource-rows .ax-scheduler-timeline-weekly-resource-row .ax-scheduler-timeline-resource-spanning-layer .ax-scheduler-timeline-spanning-appointment.ax-spanning-end-clipped{border-start-end-radius:0;border-end-end-radius:0;margin-inline-end:0;position:relative}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-days-container .ax-scheduler-timeline-weekly-column .ax-scheduler-timeline-weekly-resource-rows .ax-scheduler-timeline-weekly-resource-row .ax-scheduler-timeline-resource-spanning-layer .ax-scheduler-timeline-spanning-appointment.ax-spanning-end-clipped:after{content:\" \\2192\";top:calc(var(--spacing,.25rem) * .5);opacity:.7;font-size:.65rem;position:absolute;inset-inline-end:0}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-days-container .ax-scheduler-timeline-weekly-column .ax-scheduler-timeline-weekly-resource-rows .ax-scheduler-timeline-weekly-resource-row ax-scheduler-timeline-day-view{width:100%;height:100%;display:block}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-days-container .ax-scheduler-timeline-weekly-column .ax-scheduler-timeline-weekly-resource-rows .ax-scheduler-timeline-weekly-resource-row ax-scheduler-timeline-day-view .ax-scheduler-timeline-header{display:none}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-days-container .ax-scheduler-timeline-weekly-column .ax-scheduler-timeline-weekly-resource-rows .ax-scheduler-timeline-weekly-resource-row ax-scheduler-timeline-day-view .ax-scheduler-timeline-content{height:100%;position:relative}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-days-container .ax-scheduler-timeline-weekly-column .ax-scheduler-timeline-weekly-resource-rows .ax-scheduler-timeline-weekly-resource-row ax-scheduler-timeline-day-view .ax-scheduler-timeline-appointment-container{width:100%;top:calc(var(--resource-spanning-rows-count,0) * (var(--ax-scheduler-timeline-spanning-row-height) + var(--ax-scheduler-timeline-spanning-gap)) + .25rem);height:calc(100% - var(--resource-spanning-rows-count,0) * (var(--ax-scheduler-timeline-spanning-row-height) + var(--ax-scheduler-timeline-spanning-gap)) - .25rem);position:absolute}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-days-container .ax-scheduler-timeline-weekly-column .ax-scheduler-timeline-weekly-resource-rows .ax-scheduler-timeline-weekly-resource-row ax-scheduler-timeline-day-view .ax-scheduler-timeline-appointment-container .ax-scheduler-timeline-appointment{border-radius:calc(var(--ax-sys-border-radius) / 2);width:100%;padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:var(--spacing,.25rem);flex-direction:column;display:flex;position:absolute;inset-inline-start:calc(var(--spacing,.25rem) * 0);overflow:hidden}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-days-container .ax-scheduler-timeline-weekly-column .ax-scheduler-timeline-weekly-resource-rows .ax-scheduler-timeline-weekly-resource-row ax-scheduler-timeline-day-view .ax-scheduler-timeline-slot-row{box-sizing:border-box;width:max-content;height:100%;padding-top:calc(var(--resource-spanning-rows-count,0) * (var(--ax-scheduler-timeline-spanning-row-height) + var(--ax-scheduler-timeline-spanning-gap)) + .25rem);display:flex;position:relative}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-days-container .ax-scheduler-timeline-weekly-column .ax-scheduler-timeline-weekly-resource-rows .ax-scheduler-timeline-weekly-resource-row ax-scheduler-timeline-day-view .ax-scheduler-timeline-slot-row .ax-scheduler-timeline-slot-cell{width:var(--ax-comp-scheduler-timeline-view-blocks-width);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));flex-shrink:0;position:relative}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-days-container .ax-scheduler-timeline-weekly-column .ax-scheduler-timeline-weekly-resource-rows .ax-scheduler-timeline-weekly-resource-row ax-scheduler-timeline-day-view .ax-scheduler-timeline-slot-row .ax-scheduler-timeline-slot-cell:after{background-color:rgba(var(--ax-sys-color-border-lightest-surface));inset-inline-end:calc(var(--spacing,.25rem) * 0);width:1px;height:100%;top:0}@supports (color:color-mix(in lab,red,red)){ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-days-container .ax-scheduler-timeline-weekly-column .ax-scheduler-timeline-weekly-resource-rows .ax-scheduler-timeline-weekly-resource-row ax-scheduler-timeline-day-view .ax-scheduler-timeline-slot-row .ax-scheduler-timeline-slot-cell:after{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-border-lightest-surface)) 30%,transparent)}}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-days-container .ax-scheduler-timeline-weekly-column .ax-scheduler-timeline-weekly-resource-rows .ax-scheduler-timeline-weekly-resource-row ax-scheduler-timeline-day-view .ax-scheduler-timeline-slot-row .ax-scheduler-timeline-slot-cell:after{--tw-content:\"\";content:var(--tw-content);position:absolute}ax-scheduler-timeline-weekly-view .ax-scheduler-current-time-line{width:calc(var(--spacing,.25rem) * .5);top:0;bottom:0}ax-scheduler-timeline-weekly-view .ax-scheduler-current-time-line:before{content:var(--tw-content);inset-inline-start:-5px;top:calc(var(--spacing,.25rem) * -1.5)}ax-scheduler.ax-rtl ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-spanning-appointment.ax-spanning-start-clipped:before{content:\"\\2192 \"}ax-scheduler.ax-rtl ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-spanning-appointment.ax-spanning-end-clipped:after{content:\" \\2190\"}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-content{syntax:\"*\";inherits:false;initial-value:\"\"}\n/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["axDrag", "dragData", "dragDisabled", "dragTransition", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragClonedTemplate", "dragCursor", "dragBoundary", "dragTransitionDuration"], outputs: ["dragPositionChanged"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXSchedulerTimelineDayViewComponent, selector: "ax-scheduler-timeline-day-view", inputs: ["readonly", "draggable", "hasActions", "dragStartDelay", "calendar", "showResourceHeaders", "date", "endDayHour", "selectedAppointmentId", "startDayHour", "showUnassignedAppointments", "resources", "showCurrentTimeIndicator", "scrollToCurrentTimeIndicator", "resourceTemplate", "appointments", "tooltipTemplate"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onActionClickInternal", "onAppointmentDropInternal"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXFormatPipe, name: "format" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
3389
3410
|
}
|
|
3390
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
3411
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXSchedulerTimelineWeeklyViewComponent, decorators: [{
|
|
3391
3412
|
type: Component,
|
|
3392
3413
|
args: [{ selector: 'ax-scheduler-timeline-weekly-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
3393
3414
|
'[class.ax-state-readonly]': 'readonly()',
|
|
@@ -3395,11 +3416,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
|
|
|
3395
3416
|
AsyncPipe,
|
|
3396
3417
|
NgTemplateOutlet,
|
|
3397
3418
|
AXFormatPipe,
|
|
3419
|
+
AXTranslatorPipe,
|
|
3398
3420
|
AXDragDirective,
|
|
3399
3421
|
AXTooltipDirective,
|
|
3400
3422
|
AXDecoratorIconComponent,
|
|
3401
3423
|
AXSchedulerTimelineDayViewComponent,
|
|
3402
|
-
], providers: [{ provide: AXComponent, useExisting: AXSchedulerTimelineWeeklyViewComponent }], template: "@if (resources().length === 0 || !showResourceHeaders()) {\n <!-- Original layout when no resources -->\n <div class=\"ax-scheduler-timeline-day-view-container\" [style.--spanning-rows-count]=\"maxSpanningRows()\">\n <!-- Spanning appointments layer -->\n @if (spanningAppointments().length > 0) {\n <div\n class=\"ax-scheduler-timeline-weekly-spanning-layer\"\n [style.--timeline-days-count]=\"daysDataForTimelineViews().length\"\n >\n @for (spanning of spanningAppointments(); track spanning.appointment.id) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"spanning.appointment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || spanning.appointment.readonly || readonly()\"\n (click)=\"handleSpanningAppointmentEvent($event, spanning.appointment)\"\n (dblclick)=\"handleSpanningAppointmentEvent($event, spanning.appointment)\"\n (contextmenu)=\"handleSpanningAppointmentEvent($event, spanning.appointment)\"\n [title]=\"\n spanning.appointment.title +\n ' (' +\n (spanning.appointment.startDate | format: 'date' : { format: 'MMM d', calendar: calendar() } | async) +\n ' - ' +\n (spanning.appointment.endDate | format: 'date' : { format: 'MMM d', calendar: calendar() } | async) +\n ')'\n \"\n class=\"ax-scheduler-timeline-spanning-appointment {{\n spanning.appointment.cssClass ??\n 'ax-scheduler-' + (spanning.appointment.priority ?? 'primary') + '-priority'\n }}\"\n [class.ax-spanning-start-clipped]=\"spanning.isStartClipped\"\n [class.ax-spanning-end-clipped]=\"spanning.isEndClipped\"\n [class.ax-state-active]=\"isActive(spanning.appointment.id)\"\n [style.grid-column]=\"spanning.startDayIndex + 1 + ' / span ' + spanning.spanCount\"\n [style.grid-row]=\"spanning.rowIndex + 1\"\n >\n <span class=\"ax-spanning-appointment-title\">\n <span class=\"ax-scheduler-truncate\">{{ spanning.appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleSpanningActionClick($event, spanning.appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n ></ax-icon>\n }\n </span>\n </div>\n }\n </div>\n }\n @for (daySlot of daysDataForTimelineViews(); track daySlot.date.date.getTime()) {\n <div class=\"ax-scheduler-timeline-weekly-column\">\n <div\n [class.ax-state-today]=\"isToday(daySlot.date)\"\n class=\"ax-scheduler-week-header-date-day {{\n daySlot.holiday.state !== 'none' ? (daySlot.holiday.holiday?.cssClass ?? 'ax-state-holiday') : ''\n }}\"\n >\n <span\n class=\"ax-scheduler-week-header-date-day-char ax-scheduler-truncate\"\n [axTooltip]=\"daySlot.holiday.holiday?.title ?? ''\"\n >\n {{ daySlot.date | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n @if (daySlot.holiday.state === 'holiday' && daySlot.holiday.holiday.title) {\n ( {{ daySlot.holiday.holiday.title }} )\n }\n </span>\n <span class=\"ax-scheduler-week-header-date-day-num\">\n {{ daySlot.date | format: 'date' : { format: 'DD', calendar: calendar() } | async }}\n </span>\n </div>\n <ax-scheduler-timeline-day-view\n [date]=\"daySlot.date\"\n [readonly]=\"readonly()\"\n [draggable]=\"draggable()\"\n [resources]=\"resources()\"\n [endDayHour]=\"endDayHour()\"\n [hasActions]=\"hasActions()\"\n [showResourceHeaders]=\"true\"\n [startDayHour]=\"startDayHour()\"\n [dragStartDelay]=\"dragStartDelay()\"\n [tooltipTemplate]=\"tooltipTemplate()\"\n [showCurrentTimeIndicator]=\"showCurrentTimeIndicator()\"\n [appointments]=\"getFilteredAppointmentsForDay(daySlot.originalAppointmentsForThisDay)\"\n [showUnassignedAppointments]=\"showUnassignedAppointments()\"\n (onActionClickInternal)=\"onActionClickInternal.emit($event)\"\n (slotClickedInternal)=\"slotClickedInternal.emit($event)\"\n (slotDblClickedInternal)=\"slotDblClickedInternal.emit($event)\"\n (slotRightClickedInternal)=\"slotRightClickedInternal.emit($event)\"\n (onAppointmentDropInternal)=\"handleDrop($event, undefined)\"\n (appointmentClickedInternal)=\"appointmentClickedInternal.emit($event)\"\n (appointmentDblClickedInternal)=\"appointmentDblClickedInternal.emit($event)\"\n (appointmentRightClickedInternal)=\"appointmentRightClickedInternal.emit($event)\"\n >\n </ax-scheduler-timeline-day-view>\n </div>\n }\n </div>\n} @else {\n <!-- Resource-based layout for weekly -->\n <div\n class=\"ax-scheduler-timeline-weekly-resource-container\"\n [style.--ax-comp-scheduler-hours-count]=\"getHoursCount()\"\n >\n <!-- Top header with day names -->\n <div class=\"ax-scheduler-timeline-weekly-top-header\">\n <!-- Resource placeholder -->\n <div class=\"ax-scheduler-timeline-weekly-resource-header-placeholder\"></div>\n <!-- Day headers -->\n @for (daySlot of daysDataForTimelineViews(); track daySlot.date.date.getTime()) {\n <div class=\"ax-scheduler-timeline-weekly-day-header\">\n <div\n [class.ax-state-today]=\"isToday(daySlot.date)\"\n class=\"ax-scheduler-week-header-date-day {{\n daySlot.holiday.state !== 'none' ? (daySlot.holiday.holiday?.cssClass ?? 'ax-state-holiday') : ''\n }}\"\n >\n <span\n class=\"ax-scheduler-week-header-date-day-char ax-scheduler-truncate\"\n [axTooltip]=\"daySlot.holiday.holiday?.title ?? ''\"\n >\n {{ daySlot.date | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n @if (daySlot.holiday.state === 'holiday' && daySlot.holiday.holiday.title) {\n ( {{ daySlot.holiday.holiday.title }} )\n }\n </span>\n <span class=\"ax-scheduler-week-header-date-day-num\">\n {{ daySlot.date | format: 'date' : { format: 'DD', calendar: calendar() } | async }}\n </span>\n </div>\n </div>\n }\n </div>\n\n <!-- Time header with hours for each day -->\n <div class=\"ax-scheduler-timeline-weekly-time-header\">\n <!-- Resource placeholder -->\n <div class=\"ax-scheduler-timeline-weekly-time-header-placeholder\"><span>Resources</span></div>\n <!-- Time slots for each day -->\n @for (daySlot of daysDataForTimelineViews(); track daySlot.date.date.getTime()) {\n <div class=\"ax-scheduler-timeline-weekly-day-time-slots\">\n @for (hour of getHoursArray(); track hour.date.getTime()) {\n <div class=\"ax-scheduler-timeline-weekly-time-slot\">\n <span>{{ hour | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}</span>\n </div>\n }\n </div>\n }\n </div>\n\n <!-- Main content area -->\n <div class=\"ax-scheduler-timeline-weekly-content\">\n <!-- Resource headers column -->\n <div class=\"ax-scheduler-timeline-weekly-resource-headers\">\n <!-- Resource headers -->\n @for (resourceId of resourceIds(); track resourceId) {\n <div\n class=\"ax-scheduler-timeline-weekly-resource-header\"\n [style.height]=\"getResourceRowHeight(resourceId)\"\n [style.--resource-spanning-rows-count]=\"getMaxSpanningRowsForResource(resourceId)\"\n >\n @if (resourceTemplate() && typeof resourceTemplate() !== 'string') {\n <ng-container\n [ngTemplateOutlet]=\"$any(resourceTemplate())\"\n [ngTemplateOutletContext]=\"{\n $implicit: getResourceContext(resourceId),\n resource: getResourceContext(resourceId),\n resourceId: resourceId,\n }\"\n ></ng-container>\n } @else {\n <span class=\"ax-scheduler-timeline-resource-title\">{{ getResourceTitle(resourceId) }}</span>\n }\n </div>\n }\n </div>\n\n <!-- Days columns -->\n <div class=\"ax-scheduler-timeline-weekly-days-container\" #daysContainer>\n @for (daySlot of daysDataForTimelineViews(); track daySlot.date.date.getTime(); let dayIndex = $index) {\n <div class=\"ax-scheduler-timeline-weekly-column\">\n <!-- Current Time Line Indicator for this day -->\n @if (\n showCurrentTimeIndicator() &&\n shouldShowCurrentTimeForDay(daySlot.date) &&\n getCurrentTimePosition() !== null\n ) {\n <div\n class=\"ax-scheduler-current-time-line\"\n [style.inset-inline-start.%]=\"getCurrentTimePosition()\"\n #currentTimeLine\n ></div>\n }\n <!-- Resource rows for this day -->\n <div class=\"ax-scheduler-timeline-weekly-resource-rows\">\n @for (resourceId of resourceIds(); track resourceId) {\n <div\n class=\"ax-scheduler-timeline-weekly-resource-row\"\n [style.height]=\"getResourceRowHeight(resourceId)\"\n [style.--resource-spanning-rows-count]=\"getMaxSpanningRowsForResource(resourceId)\"\n >\n <!-- Spanning layer for this resource (only on first day column) -->\n @if (dayIndex === 0 && getSpanningAppointmentsForResource(resourceId).length > 0) {\n <div\n class=\"ax-scheduler-timeline-resource-spanning-layer\"\n [style.--timeline-days-count]=\"daysDataForTimelineViews().length\"\n >\n @for (spanning of getSpanningAppointmentsForResource(resourceId); track spanning.appointment.id) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"spanning.appointment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || spanning.appointment.readonly || readonly()\"\n (click)=\"handleSpanningAppointmentEvent($event, spanning.appointment)\"\n (dblclick)=\"handleSpanningAppointmentEvent($event, spanning.appointment)\"\n (contextmenu)=\"handleSpanningAppointmentEvent($event, spanning.appointment)\"\n [title]=\"\n spanning.appointment.title +\n ' (' +\n (spanning.appointment.startDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ' - ' +\n (spanning.appointment.endDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ')'\n \"\n class=\"ax-scheduler-timeline-spanning-appointment {{\n spanning.appointment.cssClass ??\n 'ax-scheduler-' + (spanning.appointment.priority ?? 'primary') + '-priority'\n }}\"\n [class.ax-spanning-start-clipped]=\"spanning.isStartClipped\"\n [class.ax-spanning-end-clipped]=\"spanning.isEndClipped\"\n [class.ax-state-active]=\"isActive(spanning.appointment.id)\"\n [style.grid-column]=\"spanning.startDayIndex + 1 + ' / span ' + spanning.spanCount\"\n [style.grid-row]=\"spanning.rowIndex + 1\"\n >\n <span class=\"ax-spanning-appointment-title\">\n <span class=\"ax-scheduler-truncate\">{{ spanning.appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleSpanningActionClick($event, spanning.appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n ></ax-icon>\n }\n </span>\n </div>\n }\n </div>\n }\n <ax-scheduler-timeline-day-view\n [date]=\"daySlot.date\"\n [readonly]=\"readonly()\"\n [draggable]=\"draggable()\"\n [resources]=\"\n resourceId === 'unassigned' ? [] : [{ id: resourceId, title: getResourceTitle(resourceId) }]\n \"\n [endDayHour]=\"endDayHour()\"\n [hasActions]=\"hasActions()\"\n [showResourceHeaders]=\"false\"\n [startDayHour]=\"startDayHour()\"\n [showCurrentTimeIndicator]=\"false\"\n [dragStartDelay]=\"dragStartDelay()\"\n [tooltipTemplate]=\"tooltipTemplate()\"\n [showUnassignedAppointments]=\"resourceId === 'unassigned'\"\n [appointments]=\"\n getFilteredAppointmentsForDay(\n getAppointmentsForResourceAndDay(resourceId, daySlot.originalAppointmentsForThisDay)\n )\n \"\n (onActionClickInternal)=\"onActionClickInternal.emit($event)\"\n (slotClickedInternal)=\"slotClickedInternal.emit($event)\"\n (slotDblClickedInternal)=\"slotDblClickedInternal.emit($event)\"\n (slotRightClickedInternal)=\"slotRightClickedInternal.emit($event)\"\n (onAppointmentDropInternal)=\"handleDrop($event, resourceId)\"\n (appointmentClickedInternal)=\"appointmentClickedInternal.emit($event)\"\n (appointmentDblClickedInternal)=\"appointmentDblClickedInternal.emit($event)\"\n (appointmentRightClickedInternal)=\"appointmentRightClickedInternal.emit($event)\"\n >\n </ax-scheduler-timeline-day-view>\n </div>\n }\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n}\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-font-weight:initial;--tw-content:\"\"}}}@layer components{ax-scheduler-timeline-weekly-view{background-color:inherit}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-day-view-container{background-color:inherit;flex-direction:row;height:100%;display:flex;position:relative}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day{height:calc(var(--spacing,.25rem) * 16);justify-content:center;align-items:flex-start;gap:calc(var(--spacing,.25rem) * 1);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding-inline:calc(var(--spacing,.25rem) * 4);padding-block:calc(var(--spacing,.25rem) * 1);flex-direction:column;display:flex;position:relative}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day.ax-state-today{background-color:rgba(var(--ax-sys-color-primary-surface))}@supports (color:color-mix(in lab,red,red)){ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day.ax-state-today{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 5%,transparent)}}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day.ax-state-today .ax-scheduler-week-header-date-day-char{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day.ax-state-today .ax-scheduler-week-header-date-day-num{--tw-font-weight:var(--font-weight-bold,700);font-weight:var(--font-weight-bold,700)}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day.ax-state-holiday{color:rgba(var(--ax-sys-color-danger-600))}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day.ax-state-holiday.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day .ax-scheduler-week-header-date-day-char{--tw-font-weight:var(--font-weight-light,300);max-width:100%;font-weight:var(--font-weight-light,300);position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 4)}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day .ax-scheduler-week-header-date-day-num{font-size:var(--text-xl,1.25rem);line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75 / 1.25)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 4)}ax-scheduler-timeline-weekly-view ax-scheduler-timeline-day-view{height:calc(100% - 4rem)}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container{background-color:inherit;flex-direction:column;height:100%;display:flex;overflow:auto}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-top-header{top:calc(var(--spacing,.25rem) * 0);z-index:10;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;flex-direction:row;min-width:max-content;display:flex;position:sticky}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-top-header .ax-scheduler-timeline-weekly-resource-header-placeholder{z-index:15;height:calc(var(--spacing,.25rem) * 4);width:var(--ax-comp-scheduler-resource-header-width,8rem);min-width:var(--ax-comp-scheduler-resource-header-width,8rem);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;justify-content:center;align-items:center;display:flex;position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 0)}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-top-header .ax-scheduler-timeline-weekly-day-header{width:calc(var(--ax-comp-scheduler-timeline-view-blocks-width) * var(--ax-comp-scheduler-hours-count,16));min-width:calc(var(--ax-comp-scheduler-timeline-view-blocks-width) * var(--ax-comp-scheduler-hours-count,16));border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));flex-shrink:0}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-top-header .ax-scheduler-timeline-weekly-day-header .ax-scheduler-week-header-date-day{height:calc(var(--spacing,.25rem) * 16);justify-content:center;align-items:flex-start;gap:calc(var(--spacing,.25rem) * 1);padding-inline:calc(var(--spacing,.25rem) * 4);padding-block:calc(var(--spacing,.25rem) * 1);flex-direction:column;display:flex;position:relative}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-top-header .ax-scheduler-timeline-weekly-day-header .ax-scheduler-week-header-date-day.ax-state-today{background-color:rgba(var(--ax-sys-color-primary-surface))}@supports (color:color-mix(in lab,red,red)){ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-top-header .ax-scheduler-timeline-weekly-day-header .ax-scheduler-week-header-date-day.ax-state-today{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 5%,transparent)}}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-top-header .ax-scheduler-timeline-weekly-day-header .ax-scheduler-week-header-date-day.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-top-header .ax-scheduler-timeline-weekly-day-header .ax-scheduler-week-header-date-day.ax-state-today .ax-scheduler-week-header-date-day-char{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-top-header .ax-scheduler-timeline-weekly-day-header .ax-scheduler-week-header-date-day.ax-state-today .ax-scheduler-week-header-date-day-num{--tw-font-weight:var(--font-weight-bold,700);font-weight:var(--font-weight-bold,700)}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-top-header .ax-scheduler-timeline-weekly-day-header .ax-scheduler-week-header-date-day.ax-state-holiday{color:rgba(var(--ax-sys-color-danger-600))}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-top-header .ax-scheduler-timeline-weekly-day-header .ax-scheduler-week-header-date-day.ax-state-holiday.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-top-header .ax-scheduler-timeline-weekly-day-header .ax-scheduler-week-header-date-day .ax-scheduler-week-header-date-day-char{max-width:100%;font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));--tw-font-weight:var(--font-weight-light,300);font-weight:var(--font-weight-light,300);position:sticky;inset-inline-start:calc(var(--ax-comp-scheduler-resource-header-width,8rem) + 1rem)}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-top-header .ax-scheduler-timeline-weekly-day-header .ax-scheduler-week-header-date-day .ax-scheduler-week-header-date-day-num{max-width:100%;font-size:var(--text-xl,1.25rem);line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75 / 1.25)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);position:sticky;inset-inline-start:calc(var(--ax-comp-scheduler-resource-header-width,8rem) + 1rem)}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-time-header{top:calc(var(--spacing,.25rem) * 16);z-index:10;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;flex-direction:row;min-width:max-content;display:flex;position:sticky}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-time-header .ax-scheduler-timeline-weekly-time-header-placeholder{z-index:15;height:calc(var(--spacing,.25rem) * 8);width:var(--ax-comp-scheduler-resource-header-width,8rem);min-width:var(--ax-comp-scheduler-resource-header-width,8rem);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;justify-content:center;align-items:center;display:flex;position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 0)}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-time-header .ax-scheduler-timeline-weekly-day-time-slots{height:calc(var(--spacing,.25rem) * 8);width:calc(var(--ax-comp-scheduler-timeline-view-blocks-width) * var(--ax-comp-scheduler-hours-count,16));min-width:calc(var(--ax-comp-scheduler-timeline-view-blocks-width) * var(--ax-comp-scheduler-hours-count,16));border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;flex-direction:row;flex-shrink:0;display:flex}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-time-header .ax-scheduler-timeline-weekly-day-time-slots .ax-scheduler-timeline-weekly-time-slot{width:var(--ax-comp-scheduler-timeline-view-blocks-width);min-width:var(--ax-comp-scheduler-timeline-view-blocks-width);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding-inline:calc(var(--spacing,.25rem) * 4);flex-shrink:0;align-items:center;display:flex;position:relative}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-time-header .ax-scheduler-timeline-weekly-day-time-slots .ax-scheduler-timeline-weekly-time-slot span{z-index:5;font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));--tw-font-weight:var(--font-weight-normal,400);font-weight:var(--font-weight-normal,400);position:sticky;inset-inline-start:calc(var(--ax-comp-scheduler-resource-header-width,8rem) + 1rem)}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content{min-height:calc(var(--spacing,.25rem) * 0);background-color:inherit;flex-direction:row;flex:1;width:fit-content;display:flex}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-resource-headers{z-index:15;height:fit-content;width:var(--ax-comp-scheduler-resource-header-width,8rem);min-width:var(--ax-comp-scheduler-resource-header-width,8rem);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;flex-direction:column;display:flex;position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 0)}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-resource-headers .ax-scheduler-timeline-weekly-resource-header{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding:calc(var(--spacing,.25rem) * 2);justify-content:center;align-items:center;display:flex}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-resource-headers .ax-scheduler-timeline-weekly-resource-header .ax-scheduler-timeline-resource-title{text-align:center;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);overflow-wrap:break-word}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-days-container{flex-direction:row;flex:1;min-width:max-content;display:flex}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-days-container .ax-scheduler-timeline-weekly-column{width:calc(var(--ax-comp-scheduler-timeline-view-blocks-width) * var(--ax-comp-scheduler-hours-count,16));min-width:calc(var(--ax-comp-scheduler-timeline-view-blocks-width) * var(--ax-comp-scheduler-hours-count,16));border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));flex-direction:column;flex-shrink:0;display:flex;position:relative}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-days-container .ax-scheduler-timeline-weekly-column .ax-scheduler-timeline-weekly-resource-rows{flex-direction:column;flex:1;display:flex}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-days-container .ax-scheduler-timeline-weekly-column .ax-scheduler-timeline-weekly-resource-rows .ax-scheduler-timeline-weekly-resource-row{min-height:var(--ax-comp-scheduler-basic-view-blocks-height);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-days-container .ax-scheduler-timeline-weekly-column .ax-scheduler-timeline-weekly-resource-rows .ax-scheduler-timeline-weekly-resource-row ax-scheduler-timeline-day-view{width:100%;height:100%;display:block}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-days-container .ax-scheduler-timeline-weekly-column .ax-scheduler-timeline-weekly-resource-rows .ax-scheduler-timeline-weekly-resource-row ax-scheduler-timeline-day-view .ax-scheduler-timeline-header{display:none}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-days-container .ax-scheduler-timeline-weekly-column .ax-scheduler-timeline-weekly-resource-rows .ax-scheduler-timeline-weekly-resource-row ax-scheduler-timeline-day-view .ax-scheduler-timeline-content{height:100%;position:relative}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-days-container .ax-scheduler-timeline-weekly-column .ax-scheduler-timeline-weekly-resource-rows .ax-scheduler-timeline-weekly-resource-row ax-scheduler-timeline-day-view .ax-scheduler-timeline-appointment-container{top:calc(var(--spacing,.25rem) * 0);width:100%;height:100%;position:absolute}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-days-container .ax-scheduler-timeline-weekly-column .ax-scheduler-timeline-weekly-resource-rows .ax-scheduler-timeline-weekly-resource-row ax-scheduler-timeline-day-view .ax-scheduler-timeline-appointment-container .ax-scheduler-timeline-appointment{border-radius:calc(var(--ax-sys-border-radius) / 2);width:100%;padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:calc(var(--spacing,.25rem) * 1);flex-direction:column;display:flex;position:absolute;inset-inline-start:calc(var(--spacing,.25rem) * 0);overflow:hidden}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-days-container .ax-scheduler-timeline-weekly-column .ax-scheduler-timeline-weekly-resource-rows .ax-scheduler-timeline-weekly-resource-row ax-scheduler-timeline-day-view .ax-scheduler-timeline-slot-row{width:max-content;height:100%;display:flex;position:relative}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-days-container .ax-scheduler-timeline-weekly-column .ax-scheduler-timeline-weekly-resource-rows .ax-scheduler-timeline-weekly-resource-row ax-scheduler-timeline-day-view .ax-scheduler-timeline-slot-row .ax-scheduler-timeline-slot-cell{width:var(--ax-comp-scheduler-timeline-view-blocks-width);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));flex-shrink:0;position:relative}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-days-container .ax-scheduler-timeline-weekly-column .ax-scheduler-timeline-weekly-resource-rows .ax-scheduler-timeline-weekly-resource-row ax-scheduler-timeline-day-view .ax-scheduler-timeline-slot-row .ax-scheduler-timeline-slot-cell:after{inset-inline-end:calc(var(--spacing,.25rem) * 0);top:calc(var(--spacing,.25rem) * 0);background-color:rgba(var(--ax-sys-color-border-lightest-surface));width:1px;height:100%}@supports (color:color-mix(in lab,red,red)){ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-days-container .ax-scheduler-timeline-weekly-column .ax-scheduler-timeline-weekly-resource-rows .ax-scheduler-timeline-weekly-resource-row ax-scheduler-timeline-day-view .ax-scheduler-timeline-slot-row .ax-scheduler-timeline-slot-cell:after{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-border-lightest-surface)) 30%,transparent)}}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-days-container .ax-scheduler-timeline-weekly-column .ax-scheduler-timeline-weekly-resource-rows .ax-scheduler-timeline-weekly-resource-row ax-scheduler-timeline-day-view .ax-scheduler-timeline-slot-row .ax-scheduler-timeline-slot-cell:after{--tw-content:\"\";content:var(--tw-content)}ax-scheduler-timeline-weekly-view .ax-scheduler-current-time-line{top:calc(var(--spacing,.25rem) * 0);bottom:calc(var(--spacing,.25rem) * 0);width:calc(var(--spacing,.25rem) * .5)}ax-scheduler-timeline-weekly-view .ax-scheduler-current-time-line:before{content:var(--tw-content);inset-inline-start:-5px;top:calc(var(--spacing,.25rem) * -1.5)}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-content{syntax:\"*\";inherits:false;initial-value:\"\"}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"] }]
|
|
3424
|
+
], providers: [{ provide: AXComponent, useExisting: AXSchedulerTimelineWeeklyViewComponent }], template: "@if (resources().length === 0 || !showResourceHeaders()) {\n <!-- Original layout when no resources -->\n <div class=\"ax-scheduler-timeline-day-view-container\" [style.--spanning-rows-count]=\"maxSpanningRows()\">\n <!-- Spanning appointments layer -->\n @if (spanningAppointments().length > 0) {\n <div\n class=\"ax-scheduler-timeline-weekly-spanning-layer\"\n [style.--timeline-days-count]=\"daysDataForTimelineViews().length\"\n >\n @for (spanning of spanningAppointments(); track spanning.appointment.id) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"spanning.appointment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || spanning.appointment.readonly || readonly()\"\n (click)=\"handleSpanningAppointmentEvent($event, spanning.appointment)\"\n (dblclick)=\"handleSpanningAppointmentEvent($event, spanning.appointment)\"\n (contextmenu)=\"handleSpanningAppointmentEvent($event, spanning.appointment)\"\n [title]=\"\n spanning.appointment.title +\n ' (' +\n (spanning.appointment.startDate | format: 'date' : { format: 'MMM d', calendar: calendar() } | async) +\n ' - ' +\n (spanning.appointment.endDate | format: 'date' : { format: 'MMM d', calendar: calendar() } | async) +\n ')'\n \"\n class=\"ax-scheduler-timeline-spanning-appointment {{\n spanning.appointment.cssClass ??\n 'ax-scheduler-' + (spanning.appointment.priority ?? 'primary') + '-priority'\n }}\"\n [class.ax-spanning-start-clipped]=\"spanning.isStartClipped\"\n [class.ax-spanning-end-clipped]=\"spanning.isEndClipped\"\n [class.ax-state-active]=\"isActive(spanning.appointment.id)\"\n [style.grid-column]=\"spanning.startDayIndex + 1 + ' / span ' + spanning.spanCount\"\n [style.grid-row]=\"spanning.rowIndex + 1\"\n >\n <span class=\"ax-spanning-appointment-title\">\n <span class=\"ax-scheduler-truncate\">{{ spanning.appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleSpanningActionClick($event, spanning.appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n ></ax-icon>\n }\n </span>\n </div>\n }\n </div>\n }\n @for (daySlot of daysDataForTimelineViews(); track daySlot.date.date.getTime()) {\n <div class=\"ax-scheduler-timeline-weekly-column\">\n <div\n [class.ax-state-today]=\"isToday(daySlot.date)\"\n class=\"ax-scheduler-week-header-date-day {{\n daySlot.holiday.state !== 'none' ? (daySlot.holiday.holiday?.cssClass ?? 'ax-state-holiday') : ''\n }}\"\n [style.--ax-scheduler-holiday-color]=\"daySlot.holiday.holiday?.color ?? null\"\n >\n <span\n class=\"ax-scheduler-week-header-date-day-char ax-scheduler-truncate\"\n [axTooltip]=\"(daySlot.holiday.holiday?.description ?? daySlot.holiday.holiday?.title ?? '') | translate | async\"\n >\n {{ daySlot.date | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n @if (daySlot.holiday.state === 'holiday' && daySlot.holiday.holiday.title) {\n ( {{ daySlot.holiday.holiday.title | translate | async }} )\n }\n </span>\n <span class=\"ax-scheduler-week-header-date-day-num\">\n {{ daySlot.date | format: 'date' : { format: 'DD', calendar: calendar() } | async }}\n </span>\n </div>\n <ax-scheduler-timeline-day-view\n [date]=\"daySlot.date\"\n [readonly]=\"readonly()\"\n [draggable]=\"draggable()\"\n [resources]=\"resources()\"\n [endDayHour]=\"endDayHour()\"\n [hasActions]=\"hasActions()\"\n [showResourceHeaders]=\"true\"\n [startDayHour]=\"startDayHour()\"\n [dragStartDelay]=\"dragStartDelay()\"\n [tooltipTemplate]=\"tooltipTemplate()\"\n [showCurrentTimeIndicator]=\"showCurrentTimeIndicator()\"\n [appointments]=\"getFilteredAppointmentsForDay(daySlot.originalAppointmentsForThisDay)\"\n [showUnassignedAppointments]=\"showUnassignedAppointments()\"\n (onActionClickInternal)=\"onActionClickInternal.emit($event)\"\n (slotClickedInternal)=\"slotClickedInternal.emit($event)\"\n (slotDblClickedInternal)=\"slotDblClickedInternal.emit($event)\"\n (slotRightClickedInternal)=\"slotRightClickedInternal.emit($event)\"\n (onAppointmentDropInternal)=\"handleDrop($event, undefined)\"\n (appointmentClickedInternal)=\"appointmentClickedInternal.emit($event)\"\n (appointmentDblClickedInternal)=\"appointmentDblClickedInternal.emit($event)\"\n (appointmentRightClickedInternal)=\"appointmentRightClickedInternal.emit($event)\"\n >\n </ax-scheduler-timeline-day-view>\n </div>\n }\n </div>\n} @else {\n <!-- Resource-based layout for weekly -->\n <div\n class=\"ax-scheduler-timeline-weekly-resource-container\"\n [style.--ax-comp-scheduler-hours-count]=\"getHoursCount()\"\n >\n <!-- Top header with day names -->\n <div class=\"ax-scheduler-timeline-weekly-top-header\">\n <!-- Resource placeholder -->\n <div class=\"ax-scheduler-timeline-weekly-resource-header-placeholder\"></div>\n <!-- Day headers -->\n @for (daySlot of daysDataForTimelineViews(); track daySlot.date.date.getTime()) {\n <div class=\"ax-scheduler-timeline-weekly-day-header\">\n <div\n [class.ax-state-today]=\"isToday(daySlot.date)\"\n class=\"ax-scheduler-week-header-date-day {{\n daySlot.holiday.state !== 'none' ? (daySlot.holiday.holiday?.cssClass ?? 'ax-state-holiday') : ''\n }}\"\n [style.--ax-scheduler-holiday-color]=\"daySlot.holiday.holiday?.color ?? null\"\n >\n <span\n class=\"ax-scheduler-week-header-date-day-char ax-scheduler-truncate\"\n [axTooltip]=\"(daySlot.holiday.holiday?.description ?? daySlot.holiday.holiday?.title ?? '') | translate | async\"\n >\n {{ daySlot.date | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n @if (daySlot.holiday.state === 'holiday' && daySlot.holiday.holiday.title) {\n ( {{ daySlot.holiday.holiday.title | translate | async }} )\n }\n </span>\n <span class=\"ax-scheduler-week-header-date-day-num\">\n {{ daySlot.date | format: 'date' : { format: 'DD', calendar: calendar() } | async }}\n </span>\n </div>\n </div>\n }\n </div>\n\n <!-- Time header with hours for each day -->\n <div class=\"ax-scheduler-timeline-weekly-time-header\">\n <!-- Resource placeholder -->\n <div class=\"ax-scheduler-timeline-weekly-time-header-placeholder\"><span>Resources</span></div>\n <!-- Time slots for each day -->\n @for (daySlot of daysDataForTimelineViews(); track daySlot.date.date.getTime()) {\n <div class=\"ax-scheduler-timeline-weekly-day-time-slots\">\n @for (hour of getHoursArray(); track hour.date.getTime()) {\n <div class=\"ax-scheduler-timeline-weekly-time-slot\">\n <span>{{ hour | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}</span>\n </div>\n }\n </div>\n }\n </div>\n\n <!-- Main content area -->\n <div class=\"ax-scheduler-timeline-weekly-content\">\n <!-- Resource headers column -->\n <div class=\"ax-scheduler-timeline-weekly-resource-headers\">\n <!-- Resource headers -->\n @for (resourceId of resourceIds(); track resourceId) {\n <div\n class=\"ax-scheduler-timeline-weekly-resource-header\"\n [style.height]=\"getResourceRowHeight(resourceId)\"\n [style.--resource-spanning-rows-count]=\"getMaxSpanningRowsForResource(resourceId)\"\n >\n @if (resourceTemplate() && typeof resourceTemplate() !== 'string') {\n <ng-container\n [ngTemplateOutlet]=\"$any(resourceTemplate())\"\n [ngTemplateOutletContext]=\"{\n $implicit: getResourceContext(resourceId),\n resource: getResourceContext(resourceId),\n resourceId: resourceId,\n }\"\n ></ng-container>\n } @else {\n <span class=\"ax-scheduler-timeline-resource-title\">{{ getResourceTitle(resourceId) }}</span>\n }\n </div>\n }\n </div>\n\n <!-- Days columns -->\n <div class=\"ax-scheduler-timeline-weekly-days-container\" #daysContainer>\n @for (daySlot of daysDataForTimelineViews(); track daySlot.date.date.getTime(); let dayIndex = $index) {\n <div class=\"ax-scheduler-timeline-weekly-column\">\n <!-- Current Time Line Indicator for this day -->\n @if (\n showCurrentTimeIndicator() &&\n shouldShowCurrentTimeForDay(daySlot.date) &&\n getCurrentTimePosition() !== null\n ) {\n <div\n class=\"ax-scheduler-current-time-line\"\n [style.inset-inline-start.%]=\"getCurrentTimePosition()\"\n #currentTimeLine\n ></div>\n }\n <!-- Resource rows for this day -->\n <div class=\"ax-scheduler-timeline-weekly-resource-rows\">\n @for (resourceId of resourceIds(); track resourceId) {\n <div\n class=\"ax-scheduler-timeline-weekly-resource-row\"\n [style.height]=\"getResourceRowHeight(resourceId)\"\n [style.--resource-spanning-rows-count]=\"getMaxSpanningRowsForResource(resourceId)\"\n >\n <!-- Spanning layer for this resource (only on first day column) -->\n @if (dayIndex === 0 && getSpanningAppointmentsForResource(resourceId).length > 0) {\n <div\n class=\"ax-scheduler-timeline-resource-spanning-layer\"\n [style.--timeline-days-count]=\"daysDataForTimelineViews().length\"\n >\n @for (spanning of getSpanningAppointmentsForResource(resourceId); track spanning.appointment.id) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"spanning.appointment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || spanning.appointment.readonly || readonly()\"\n (click)=\"handleSpanningAppointmentEvent($event, spanning.appointment)\"\n (dblclick)=\"handleSpanningAppointmentEvent($event, spanning.appointment)\"\n (contextmenu)=\"handleSpanningAppointmentEvent($event, spanning.appointment)\"\n [title]=\"\n spanning.appointment.title +\n ' (' +\n (spanning.appointment.startDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ' - ' +\n (spanning.appointment.endDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ')'\n \"\n class=\"ax-scheduler-timeline-spanning-appointment {{\n spanning.appointment.cssClass ??\n 'ax-scheduler-' + (spanning.appointment.priority ?? 'primary') + '-priority'\n }}\"\n [class.ax-spanning-start-clipped]=\"spanning.isStartClipped\"\n [class.ax-spanning-end-clipped]=\"spanning.isEndClipped\"\n [class.ax-state-active]=\"isActive(spanning.appointment.id)\"\n [style.grid-column]=\"spanning.startDayIndex + 1 + ' / span ' + spanning.spanCount\"\n [style.grid-row]=\"spanning.rowIndex + 1\"\n >\n <span class=\"ax-spanning-appointment-title\">\n <span class=\"ax-scheduler-truncate\">{{ spanning.appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleSpanningActionClick($event, spanning.appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n ></ax-icon>\n }\n </span>\n </div>\n }\n </div>\n }\n <ax-scheduler-timeline-day-view\n [date]=\"daySlot.date\"\n [readonly]=\"readonly()\"\n [draggable]=\"draggable()\"\n [resources]=\"\n resourceId === 'unassigned' ? [] : [{ id: resourceId, title: getResourceTitle(resourceId) }]\n \"\n [endDayHour]=\"endDayHour()\"\n [hasActions]=\"hasActions()\"\n [showResourceHeaders]=\"false\"\n [startDayHour]=\"startDayHour()\"\n [showCurrentTimeIndicator]=\"false\"\n [dragStartDelay]=\"dragStartDelay()\"\n [tooltipTemplate]=\"tooltipTemplate()\"\n [showUnassignedAppointments]=\"resourceId === 'unassigned'\"\n [appointments]=\"\n getFilteredAppointmentsForDay(\n getAppointmentsForResourceAndDay(resourceId, daySlot.originalAppointmentsForThisDay)\n )\n \"\n (onActionClickInternal)=\"onActionClickInternal.emit($event)\"\n (slotClickedInternal)=\"slotClickedInternal.emit($event)\"\n (slotDblClickedInternal)=\"slotDblClickedInternal.emit($event)\"\n (slotRightClickedInternal)=\"slotRightClickedInternal.emit($event)\"\n (onAppointmentDropInternal)=\"handleDrop($event, resourceId)\"\n (appointmentClickedInternal)=\"appointmentClickedInternal.emit($event)\"\n (appointmentDblClickedInternal)=\"appointmentDblClickedInternal.emit($event)\"\n (appointmentRightClickedInternal)=\"appointmentRightClickedInternal.emit($event)\"\n >\n </ax-scheduler-timeline-day-view>\n </div>\n }\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n}\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-font-weight:initial;--tw-content:\"\"}}}@layer components{ax-scheduler-timeline-weekly-view{--ax-scheduler-timeline-spanning-row-height:1.5rem;--ax-scheduler-timeline-spanning-gap:.125rem;background-color:inherit}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-day-view-container{background-color:inherit;flex-direction:row;height:100%;display:flex;position:relative}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-day-view-container .ax-scheduler-timeline-weekly-spanning-layer{pointer-events:none;inset-inline-start:calc(var(--spacing,.25rem) * 0);inset-inline-end:calc(var(--spacing,.25rem) * 0);top:calc(var(--spacing,.25rem) * 16);z-index:5;padding-inline:calc(var(--spacing,.25rem) * .5);padding-block:var(--spacing,.25rem);align-content:flex-start;row-gap:var(--ax-scheduler-timeline-spanning-gap);grid-auto-rows:var(--ax-scheduler-timeline-spanning-row-height);grid-template-columns:repeat(var(--timeline-days-count,7),calc(var(--ax-comp-scheduler-timeline-view-blocks-width) * var(--ax-comp-scheduler-hours-count,16)));display:grid;position:absolute}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-day-view-container .ax-scheduler-timeline-weekly-spanning-layer .ax-scheduler-timeline-spanning-appointment{z-index:6;cursor:pointer;text-overflow:ellipsis;border-radius:var(--radius-sm,.25rem);padding-inline:var(--spacing,.25rem);padding-block:calc(var(--spacing,.25rem) * .5);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));white-space:nowrap;pointer-events:auto;align-items:center;margin-inline:.125rem;display:flex;overflow:hidden}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-day-view-container .ax-scheduler-timeline-weekly-spanning-layer .ax-scheduler-timeline-spanning-appointment .ax-spanning-appointment-title{width:100%;height:100%;padding-inline:calc(var(--spacing,.25rem) * 2);justify-content:space-between;align-items:center;display:flex}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-day-view-container .ax-scheduler-timeline-weekly-spanning-layer .ax-scheduler-timeline-spanning-appointment .ax-spanning-appointment-title .ax-scheduler-truncate{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-day-view-container .ax-scheduler-timeline-weekly-spanning-layer .ax-scheduler-timeline-spanning-appointment .ax-spanning-appointment-title .ax-scheduler-action-icon{cursor:pointer;width:auto;flex-shrink:0;margin-inline-start:var(--spacing,.25rem)}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-day-view-container .ax-scheduler-timeline-weekly-spanning-layer .ax-scheduler-timeline-spanning-appointment.ax-spanning-start-clipped{border-start-start-radius:0;border-end-start-radius:0;margin-inline-start:0;position:relative}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-day-view-container .ax-scheduler-timeline-weekly-spanning-layer .ax-scheduler-timeline-spanning-appointment.ax-spanning-start-clipped:before{content:\"\\2190 \";top:calc(var(--spacing,.25rem) * .5);opacity:.7;font-size:.65rem;position:absolute;inset-inline-start:0}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-day-view-container .ax-scheduler-timeline-weekly-spanning-layer .ax-scheduler-timeline-spanning-appointment.ax-spanning-end-clipped{border-start-end-radius:0;border-end-end-radius:0;margin-inline-end:0;position:relative}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-day-view-container .ax-scheduler-timeline-weekly-spanning-layer .ax-scheduler-timeline-spanning-appointment.ax-spanning-end-clipped:after{content:\" \\2192\";top:calc(var(--spacing,.25rem) * .5);opacity:.7;font-size:.65rem;position:absolute;inset-inline-end:0}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day{height:calc(var(--spacing,.25rem) * 16);justify-content:center;align-items:flex-start;gap:var(--spacing,.25rem);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding-inline:calc(var(--spacing,.25rem) * 4);padding-block:var(--spacing,.25rem);flex-direction:column;display:flex;position:relative}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day.ax-state-today{background-color:rgba(var(--ax-sys-color-primary-surface))}@supports (color:color-mix(in lab,red,red)){ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day.ax-state-today{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 5%,transparent)}}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day.ax-state-today .ax-scheduler-week-header-date-day-char{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day.ax-state-today .ax-scheduler-week-header-date-day-num{--tw-font-weight:var(--font-weight-bold,700);font-weight:var(--font-weight-bold,700)}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day.ax-state-holiday{color:var(--ax-scheduler-holiday-color,rgba(var(--ax-sys-color-danger-surface)))}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day.ax-state-holiday.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day .ax-scheduler-week-header-date-day-char{--tw-font-weight:var(--font-weight-light,300);max-width:100%;font-weight:var(--font-weight-light,300);position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 4)}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day .ax-scheduler-week-header-date-day-num{font-size:var(--text-xl,1.25rem);line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75 / 1.25)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 4)}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-day-view-container ax-scheduler-timeline-day-view{height:calc(100% - 4rem - var(--spanning-rows-count,0) * (var(--ax-scheduler-timeline-spanning-row-height) + var(--ax-scheduler-timeline-spanning-gap)) - .5rem);margin-top:calc(var(--spanning-rows-count,0) * (var(--ax-scheduler-timeline-spanning-row-height) + var(--ax-scheduler-timeline-spanning-gap)) + .5rem)}ax-scheduler-timeline-weekly-view ax-scheduler-timeline-day-view{height:calc(100% - 4rem)}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container{background-color:inherit;flex-direction:column;height:100%;display:flex;overflow:auto}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-top-header{z-index:10;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;flex-direction:row;min-width:max-content;display:flex;position:sticky;top:0}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-top-header .ax-scheduler-timeline-weekly-resource-header-placeholder{z-index:15;height:calc(var(--spacing,.25rem) * 16);width:var(--ax-comp-scheduler-resource-header-width,8rem);min-width:var(--ax-comp-scheduler-resource-header-width,8rem);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;justify-content:center;align-items:center;display:flex;position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 0)}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-top-header .ax-scheduler-timeline-weekly-day-header{width:calc(var(--ax-comp-scheduler-timeline-view-blocks-width) * var(--ax-comp-scheduler-hours-count,16));min-width:calc(var(--ax-comp-scheduler-timeline-view-blocks-width) * var(--ax-comp-scheduler-hours-count,16));border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));flex-shrink:0}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-top-header .ax-scheduler-timeline-weekly-day-header .ax-scheduler-week-header-date-day{height:calc(var(--spacing,.25rem) * 16);justify-content:center;align-items:flex-start;gap:var(--spacing,.25rem);padding-inline:calc(var(--spacing,.25rem) * 4);padding-block:var(--spacing,.25rem);flex-direction:column;display:flex;position:relative}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-top-header .ax-scheduler-timeline-weekly-day-header .ax-scheduler-week-header-date-day.ax-state-today{background-color:rgba(var(--ax-sys-color-primary-surface))}@supports (color:color-mix(in lab,red,red)){ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-top-header .ax-scheduler-timeline-weekly-day-header .ax-scheduler-week-header-date-day.ax-state-today{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 5%,transparent)}}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-top-header .ax-scheduler-timeline-weekly-day-header .ax-scheduler-week-header-date-day.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-top-header .ax-scheduler-timeline-weekly-day-header .ax-scheduler-week-header-date-day.ax-state-today .ax-scheduler-week-header-date-day-char{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-top-header .ax-scheduler-timeline-weekly-day-header .ax-scheduler-week-header-date-day.ax-state-today .ax-scheduler-week-header-date-day-num{--tw-font-weight:var(--font-weight-bold,700);font-weight:var(--font-weight-bold,700)}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-top-header .ax-scheduler-timeline-weekly-day-header .ax-scheduler-week-header-date-day.ax-state-holiday{color:var(--ax-scheduler-holiday-color,rgba(var(--ax-sys-color-danger-surface)))}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-top-header .ax-scheduler-timeline-weekly-day-header .ax-scheduler-week-header-date-day.ax-state-holiday.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-top-header .ax-scheduler-timeline-weekly-day-header .ax-scheduler-week-header-date-day .ax-scheduler-week-header-date-day-char{max-width:100%;font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));--tw-font-weight:var(--font-weight-light,300);font-weight:var(--font-weight-light,300);position:sticky;inset-inline-start:calc(var(--ax-comp-scheduler-resource-header-width,8rem) + 1rem)}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-top-header .ax-scheduler-timeline-weekly-day-header .ax-scheduler-week-header-date-day .ax-scheduler-week-header-date-day-num{font-size:var(--text-xl,1.25rem);line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75 / 1.25)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);position:sticky;inset-inline-start:calc(var(--ax-comp-scheduler-resource-header-width,8rem) + 1rem)}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-time-header{top:calc(var(--spacing,.25rem) * 16);z-index:10;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;flex-direction:row;min-width:max-content;display:flex;position:sticky}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-time-header .ax-scheduler-timeline-weekly-time-header-placeholder{z-index:15;height:calc(var(--spacing,.25rem) * 8);width:var(--ax-comp-scheduler-resource-header-width,8rem);min-width:var(--ax-comp-scheduler-resource-header-width,8rem);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;justify-content:center;align-items:center;display:flex;position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 0)}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-time-header .ax-scheduler-timeline-weekly-day-time-slots{height:calc(var(--spacing,.25rem) * 8);width:calc(var(--ax-comp-scheduler-timeline-view-blocks-width) * var(--ax-comp-scheduler-hours-count,16));min-width:calc(var(--ax-comp-scheduler-timeline-view-blocks-width) * var(--ax-comp-scheduler-hours-count,16));border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;flex-direction:row;flex-shrink:0;display:flex}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-time-header .ax-scheduler-timeline-weekly-day-time-slots .ax-scheduler-timeline-weekly-time-slot{width:var(--ax-comp-scheduler-timeline-view-blocks-width);min-width:var(--ax-comp-scheduler-timeline-view-blocks-width);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding-inline:calc(var(--spacing,.25rem) * 4);flex-shrink:0;align-items:center;display:flex;position:relative}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-time-header .ax-scheduler-timeline-weekly-day-time-slots .ax-scheduler-timeline-weekly-time-slot span{z-index:5;font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));--tw-font-weight:var(--font-weight-normal,400);font-weight:var(--font-weight-normal,400);position:sticky;inset-inline-start:calc(var(--ax-comp-scheduler-resource-header-width,8rem) + 1rem)}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content{background-color:inherit;flex-direction:row;flex:1;align-items:stretch;width:fit-content;min-height:0;display:flex}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-resource-headers{z-index:15;width:var(--ax-comp-scheduler-resource-header-width,8rem);min-width:var(--ax-comp-scheduler-resource-header-width,8rem);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;flex-direction:column;display:flex;position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 0)}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-resource-headers .ax-scheduler-timeline-weekly-resource-header{box-sizing:border-box;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding:calc(var(--spacing,.25rem) * 2);justify-content:center;align-items:center;display:flex}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-resource-headers .ax-scheduler-timeline-weekly-resource-header .ax-scheduler-timeline-resource-title{text-align:center;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);overflow-wrap:break-word}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-days-container{flex-direction:row;flex:1;min-width:max-content;display:flex}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-days-container .ax-scheduler-timeline-weekly-column{width:calc(var(--ax-comp-scheduler-timeline-view-blocks-width) * var(--ax-comp-scheduler-hours-count,16));min-width:calc(var(--ax-comp-scheduler-timeline-view-blocks-width) * var(--ax-comp-scheduler-hours-count,16));border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));flex-direction:column;flex-shrink:0;display:flex;position:relative}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-days-container .ax-scheduler-timeline-weekly-column .ax-scheduler-timeline-weekly-resource-rows{flex-direction:column;flex:1;display:flex}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-days-container .ax-scheduler-timeline-weekly-column .ax-scheduler-timeline-weekly-resource-rows .ax-scheduler-timeline-weekly-resource-row{box-sizing:border-box;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));position:relative}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-days-container .ax-scheduler-timeline-weekly-column .ax-scheduler-timeline-weekly-resource-rows .ax-scheduler-timeline-weekly-resource-row .ax-scheduler-timeline-resource-spanning-layer{pointer-events:none;z-index:5;padding-inline:calc(var(--spacing,.25rem) * .5);padding-block:var(--spacing,.25rem);align-content:flex-start;row-gap:var(--ax-scheduler-timeline-spanning-gap);grid-auto-rows:var(--ax-scheduler-timeline-spanning-row-height);width:calc(var(--timeline-days-count,7) * var(--ax-comp-scheduler-timeline-view-blocks-width) * var(--ax-comp-scheduler-hours-count,16));grid-template-columns:repeat(var(--timeline-days-count,7),calc(var(--ax-comp-scheduler-timeline-view-blocks-width) * var(--ax-comp-scheduler-hours-count,16)));inset-inline-start:calc(var(--spacing,.25rem) * 0);display:grid;position:absolute;top:0}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-days-container .ax-scheduler-timeline-weekly-column .ax-scheduler-timeline-weekly-resource-rows .ax-scheduler-timeline-weekly-resource-row .ax-scheduler-timeline-resource-spanning-layer .ax-scheduler-timeline-spanning-appointment{z-index:6;cursor:pointer;text-overflow:ellipsis;border-radius:var(--radius-sm,.25rem);padding-inline:var(--spacing,.25rem);padding-block:calc(var(--spacing,.25rem) * .5);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));white-space:nowrap;pointer-events:auto;align-items:center;margin-inline:.125rem;display:flex;overflow:hidden}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-days-container .ax-scheduler-timeline-weekly-column .ax-scheduler-timeline-weekly-resource-rows .ax-scheduler-timeline-weekly-resource-row .ax-scheduler-timeline-resource-spanning-layer .ax-scheduler-timeline-spanning-appointment .ax-spanning-appointment-title{width:100%;height:100%;padding-inline:calc(var(--spacing,.25rem) * 2);justify-content:space-between;align-items:center;display:flex}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-days-container .ax-scheduler-timeline-weekly-column .ax-scheduler-timeline-weekly-resource-rows .ax-scheduler-timeline-weekly-resource-row .ax-scheduler-timeline-resource-spanning-layer .ax-scheduler-timeline-spanning-appointment .ax-spanning-appointment-title .ax-scheduler-truncate{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-days-container .ax-scheduler-timeline-weekly-column .ax-scheduler-timeline-weekly-resource-rows .ax-scheduler-timeline-weekly-resource-row .ax-scheduler-timeline-resource-spanning-layer .ax-scheduler-timeline-spanning-appointment .ax-spanning-appointment-title .ax-scheduler-action-icon{cursor:pointer;width:auto;flex-shrink:0;margin-inline-start:var(--spacing,.25rem)}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-days-container .ax-scheduler-timeline-weekly-column .ax-scheduler-timeline-weekly-resource-rows .ax-scheduler-timeline-weekly-resource-row .ax-scheduler-timeline-resource-spanning-layer .ax-scheduler-timeline-spanning-appointment.ax-spanning-start-clipped{border-start-start-radius:0;border-end-start-radius:0;margin-inline-start:0;position:relative}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-days-container .ax-scheduler-timeline-weekly-column .ax-scheduler-timeline-weekly-resource-rows .ax-scheduler-timeline-weekly-resource-row .ax-scheduler-timeline-resource-spanning-layer .ax-scheduler-timeline-spanning-appointment.ax-spanning-start-clipped:before{content:\"\\2190 \";top:calc(var(--spacing,.25rem) * .5);opacity:.7;font-size:.65rem;position:absolute;inset-inline-start:0}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-days-container .ax-scheduler-timeline-weekly-column .ax-scheduler-timeline-weekly-resource-rows .ax-scheduler-timeline-weekly-resource-row .ax-scheduler-timeline-resource-spanning-layer .ax-scheduler-timeline-spanning-appointment.ax-spanning-end-clipped{border-start-end-radius:0;border-end-end-radius:0;margin-inline-end:0;position:relative}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-days-container .ax-scheduler-timeline-weekly-column .ax-scheduler-timeline-weekly-resource-rows .ax-scheduler-timeline-weekly-resource-row .ax-scheduler-timeline-resource-spanning-layer .ax-scheduler-timeline-spanning-appointment.ax-spanning-end-clipped:after{content:\" \\2192\";top:calc(var(--spacing,.25rem) * .5);opacity:.7;font-size:.65rem;position:absolute;inset-inline-end:0}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-days-container .ax-scheduler-timeline-weekly-column .ax-scheduler-timeline-weekly-resource-rows .ax-scheduler-timeline-weekly-resource-row ax-scheduler-timeline-day-view{width:100%;height:100%;display:block}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-days-container .ax-scheduler-timeline-weekly-column .ax-scheduler-timeline-weekly-resource-rows .ax-scheduler-timeline-weekly-resource-row ax-scheduler-timeline-day-view .ax-scheduler-timeline-header{display:none}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-days-container .ax-scheduler-timeline-weekly-column .ax-scheduler-timeline-weekly-resource-rows .ax-scheduler-timeline-weekly-resource-row ax-scheduler-timeline-day-view .ax-scheduler-timeline-content{height:100%;position:relative}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-days-container .ax-scheduler-timeline-weekly-column .ax-scheduler-timeline-weekly-resource-rows .ax-scheduler-timeline-weekly-resource-row ax-scheduler-timeline-day-view .ax-scheduler-timeline-appointment-container{width:100%;top:calc(var(--resource-spanning-rows-count,0) * (var(--ax-scheduler-timeline-spanning-row-height) + var(--ax-scheduler-timeline-spanning-gap)) + .25rem);height:calc(100% - var(--resource-spanning-rows-count,0) * (var(--ax-scheduler-timeline-spanning-row-height) + var(--ax-scheduler-timeline-spanning-gap)) - .25rem);position:absolute}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-days-container .ax-scheduler-timeline-weekly-column .ax-scheduler-timeline-weekly-resource-rows .ax-scheduler-timeline-weekly-resource-row ax-scheduler-timeline-day-view .ax-scheduler-timeline-appointment-container .ax-scheduler-timeline-appointment{border-radius:calc(var(--ax-sys-border-radius) / 2);width:100%;padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:var(--spacing,.25rem);flex-direction:column;display:flex;position:absolute;inset-inline-start:calc(var(--spacing,.25rem) * 0);overflow:hidden}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-days-container .ax-scheduler-timeline-weekly-column .ax-scheduler-timeline-weekly-resource-rows .ax-scheduler-timeline-weekly-resource-row ax-scheduler-timeline-day-view .ax-scheduler-timeline-slot-row{box-sizing:border-box;width:max-content;height:100%;padding-top:calc(var(--resource-spanning-rows-count,0) * (var(--ax-scheduler-timeline-spanning-row-height) + var(--ax-scheduler-timeline-spanning-gap)) + .25rem);display:flex;position:relative}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-days-container .ax-scheduler-timeline-weekly-column .ax-scheduler-timeline-weekly-resource-rows .ax-scheduler-timeline-weekly-resource-row ax-scheduler-timeline-day-view .ax-scheduler-timeline-slot-row .ax-scheduler-timeline-slot-cell{width:var(--ax-comp-scheduler-timeline-view-blocks-width);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));flex-shrink:0;position:relative}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-days-container .ax-scheduler-timeline-weekly-column .ax-scheduler-timeline-weekly-resource-rows .ax-scheduler-timeline-weekly-resource-row ax-scheduler-timeline-day-view .ax-scheduler-timeline-slot-row .ax-scheduler-timeline-slot-cell:after{background-color:rgba(var(--ax-sys-color-border-lightest-surface));inset-inline-end:calc(var(--spacing,.25rem) * 0);width:1px;height:100%;top:0}@supports (color:color-mix(in lab,red,red)){ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-days-container .ax-scheduler-timeline-weekly-column .ax-scheduler-timeline-weekly-resource-rows .ax-scheduler-timeline-weekly-resource-row ax-scheduler-timeline-day-view .ax-scheduler-timeline-slot-row .ax-scheduler-timeline-slot-cell:after{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-border-lightest-surface)) 30%,transparent)}}ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-weekly-resource-container .ax-scheduler-timeline-weekly-content .ax-scheduler-timeline-weekly-days-container .ax-scheduler-timeline-weekly-column .ax-scheduler-timeline-weekly-resource-rows .ax-scheduler-timeline-weekly-resource-row ax-scheduler-timeline-day-view .ax-scheduler-timeline-slot-row .ax-scheduler-timeline-slot-cell:after{--tw-content:\"\";content:var(--tw-content);position:absolute}ax-scheduler-timeline-weekly-view .ax-scheduler-current-time-line{width:calc(var(--spacing,.25rem) * .5);top:0;bottom:0}ax-scheduler-timeline-weekly-view .ax-scheduler-current-time-line:before{content:var(--tw-content);inset-inline-start:-5px;top:calc(var(--spacing,.25rem) * -1.5)}ax-scheduler.ax-rtl ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-spanning-appointment.ax-spanning-start-clipped:before{content:\"\\2192 \"}ax-scheduler.ax-rtl ax-scheduler-timeline-weekly-view .ax-scheduler-timeline-spanning-appointment.ax-spanning-end-clipped:after{content:\" \\2190\"}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-content{syntax:\"*\";inherits:false;initial-value:\"\"}\n/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */\n"] }]
|
|
3403
3425
|
}], propDecorators: { daysCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "daysCount", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], hasActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasActions", required: false }] }], dragStartDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragStartDelay", required: false }] }], calendar: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendar", required: false }] }], showResourceHeaders: [{ type: i0.Input, args: [{ isSignal: true, alias: "showResourceHeaders", required: false }] }], date: [{ type: i0.Input, args: [{ isSignal: true, alias: "date", required: true }] }], endDayHour: [{ type: i0.Input, args: [{ isSignal: true, alias: "endDayHour", required: true }] }], selectedAppointmentId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedAppointmentId", required: false }] }], showCurrentTimeIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCurrentTimeIndicator", required: false }] }], scrollToCurrentTimeIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollToCurrentTimeIndicator", required: false }] }], startDayHour: [{ type: i0.Input, args: [{ isSignal: true, alias: "startDayHour", required: true }] }], showUnassignedAppointments: [{ type: i0.Input, args: [{ isSignal: true, alias: "showUnassignedAppointments", required: false }] }], resources: [{ type: i0.Input, args: [{ isSignal: true, alias: "resources", required: false }] }], resourceTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "resourceTemplate", required: false }] }], appointments: [{ type: i0.Input, args: [{ isSignal: true, alias: "appointments", required: false }] }], tooltipTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipTemplate", required: false }] }], currentTimeLineElement: [{ type: i0.ViewChild, args: ['currentTimeLine', { isSignal: true }] }], slotClickedInternal: [{ type: i0.Output, args: ["slotClickedInternal"] }], slotDblClickedInternal: [{ type: i0.Output, args: ["slotDblClickedInternal"] }], slotRightClickedInternal: [{ type: i0.Output, args: ["slotRightClickedInternal"] }], appointmentClickedInternal: [{ type: i0.Output, args: ["appointmentClickedInternal"] }], appointmentDblClickedInternal: [{ type: i0.Output, args: ["appointmentDblClickedInternal"] }], appointmentRightClickedInternal: [{ type: i0.Output, args: ["appointmentRightClickedInternal"] }], onActionClickInternal: [{ type: i0.Output, args: ["onActionClickInternal"] }], onAppointmentDropInternal: [{ type: i0.Output, args: ["onAppointmentDropInternal"] }] } });
|
|
3404
3426
|
|
|
3405
3427
|
class AXSchedulerTimelineYearViewComponent extends NXComponent {
|
|
@@ -3501,41 +3523,41 @@ class AXSchedulerTimelineYearViewComponent extends NXComponent {
|
|
|
3501
3523
|
});
|
|
3502
3524
|
}
|
|
3503
3525
|
return spanningResult;
|
|
3504
|
-
}, ...(ngDevMode ? [{ debugName: "spanningAppointments" }] : []));
|
|
3526
|
+
}, ...(ngDevMode ? [{ debugName: "spanningAppointments" }] : /* istanbul ignore next */ []));
|
|
3505
3527
|
// Get the set of multi-day appointment IDs for exclusion from per-day rendering
|
|
3506
3528
|
this.multiDayAppointmentIds = computed(() => {
|
|
3507
3529
|
const spanning = this.spanningAppointments();
|
|
3508
3530
|
return new Set(spanning.map((s) => s.appointment.id));
|
|
3509
|
-
}, ...(ngDevMode ? [{ debugName: "multiDayAppointmentIds" }] : []));
|
|
3531
|
+
}, ...(ngDevMode ? [{ debugName: "multiDayAppointmentIds" }] : /* istanbul ignore next */ []));
|
|
3510
3532
|
// Calculate max spanning rows for the non-resource view
|
|
3511
3533
|
this.maxSpanningRows = computed(() => {
|
|
3512
3534
|
const spanning = this.spanningAppointments();
|
|
3513
3535
|
if (spanning.length === 0)
|
|
3514
3536
|
return 0;
|
|
3515
3537
|
return Math.max(...spanning.map((s) => s.rowIndex)) + 1;
|
|
3516
|
-
}, ...(ngDevMode ? [{ debugName: "maxSpanningRows" }] : []));
|
|
3517
|
-
this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
|
|
3518
|
-
this.draggable = input(true, ...(ngDevMode ? [{ debugName: "draggable" }] : []));
|
|
3519
|
-
this.hasActions = input(false, ...(ngDevMode ? [{ debugName: "hasActions" }] : []));
|
|
3520
|
-
this.dragStartDelay = input(0, ...(ngDevMode ? [{ debugName: "dragStartDelay" }] : []));
|
|
3521
|
-
this.calendar = input(...(ngDevMode ? [undefined, { debugName: "calendar" }] : []));
|
|
3522
|
-
this.showResourceHeaders = input(true, ...(ngDevMode ? [{ debugName: "showResourceHeaders" }] : []));
|
|
3523
|
-
this.date = input.required(...(ngDevMode ? [{ debugName: "date" }] : []));
|
|
3524
|
-
this.showUnassignedAppointments = input(true, ...(ngDevMode ? [{ debugName: "showUnassignedAppointments" }] : []));
|
|
3525
|
-
this.selectedAppointmentId = input(null, ...(ngDevMode ? [{ debugName: "selectedAppointmentId" }] : []));
|
|
3526
|
-
this.resources = input([], ...(ngDevMode ? [{ debugName: "resources" }] : []));
|
|
3527
|
-
this.showCurrentTimeIndicator = input(true, ...(ngDevMode ? [{ debugName: "showCurrentTimeIndicator" }] : []));
|
|
3528
|
-
this.scrollToCurrentTimeIndicator = input(false, ...(ngDevMode ? [{ debugName: "scrollToCurrentTimeIndicator" }] : []));
|
|
3529
|
-
this.resourceTemplate = input(...(ngDevMode ? [undefined, { debugName: "resourceTemplate" }] : []));
|
|
3530
|
-
this.appointments = input([], ...(ngDevMode ? [{ debugName: "appointments" }] : []));
|
|
3531
|
-
this.tooltipTemplate = input(...(ngDevMode ? [undefined, { debugName: "tooltipTemplate" }] : []));
|
|
3532
|
-
this.dragStartSlotId = signal(null, ...(ngDevMode ? [{ debugName: "dragStartSlotId" }] : []));
|
|
3533
|
-
this.dragStartSlotResourceId = signal(null, ...(ngDevMode ? [{ debugName: "dragStartSlotResourceId" }] : []));
|
|
3534
|
-
this.currentTimeLineElement = viewChild('currentTimeLine', ...(ngDevMode ? [{ debugName: "currentTimeLineElement" }] : []));
|
|
3538
|
+
}, ...(ngDevMode ? [{ debugName: "maxSpanningRows" }] : /* istanbul ignore next */ []));
|
|
3539
|
+
this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
3540
|
+
this.draggable = input(true, ...(ngDevMode ? [{ debugName: "draggable" }] : /* istanbul ignore next */ []));
|
|
3541
|
+
this.hasActions = input(false, ...(ngDevMode ? [{ debugName: "hasActions" }] : /* istanbul ignore next */ []));
|
|
3542
|
+
this.dragStartDelay = input(0, ...(ngDevMode ? [{ debugName: "dragStartDelay" }] : /* istanbul ignore next */ []));
|
|
3543
|
+
this.calendar = input(...(ngDevMode ? [undefined, { debugName: "calendar" }] : /* istanbul ignore next */ []));
|
|
3544
|
+
this.showResourceHeaders = input(true, ...(ngDevMode ? [{ debugName: "showResourceHeaders" }] : /* istanbul ignore next */ []));
|
|
3545
|
+
this.date = input.required(...(ngDevMode ? [{ debugName: "date" }] : /* istanbul ignore next */ []));
|
|
3546
|
+
this.showUnassignedAppointments = input(true, ...(ngDevMode ? [{ debugName: "showUnassignedAppointments" }] : /* istanbul ignore next */ []));
|
|
3547
|
+
this.selectedAppointmentId = input(null, ...(ngDevMode ? [{ debugName: "selectedAppointmentId" }] : /* istanbul ignore next */ []));
|
|
3548
|
+
this.resources = input([], ...(ngDevMode ? [{ debugName: "resources" }] : /* istanbul ignore next */ []));
|
|
3549
|
+
this.showCurrentTimeIndicator = input(true, ...(ngDevMode ? [{ debugName: "showCurrentTimeIndicator" }] : /* istanbul ignore next */ []));
|
|
3550
|
+
this.scrollToCurrentTimeIndicator = input(false, ...(ngDevMode ? [{ debugName: "scrollToCurrentTimeIndicator" }] : /* istanbul ignore next */ []));
|
|
3551
|
+
this.resourceTemplate = input(...(ngDevMode ? [undefined, { debugName: "resourceTemplate" }] : /* istanbul ignore next */ []));
|
|
3552
|
+
this.appointments = input([], ...(ngDevMode ? [{ debugName: "appointments" }] : /* istanbul ignore next */ []));
|
|
3553
|
+
this.tooltipTemplate = input(...(ngDevMode ? [undefined, { debugName: "tooltipTemplate" }] : /* istanbul ignore next */ []));
|
|
3554
|
+
this.dragStartSlotId = signal(null, ...(ngDevMode ? [{ debugName: "dragStartSlotId" }] : /* istanbul ignore next */ []));
|
|
3555
|
+
this.dragStartSlotResourceId = signal(null, ...(ngDevMode ? [{ debugName: "dragStartSlotResourceId" }] : /* istanbul ignore next */ []));
|
|
3556
|
+
this.currentTimeLineElement = viewChild('currentTimeLine', ...(ngDevMode ? [{ debugName: "currentTimeLineElement" }] : /* istanbul ignore next */ []));
|
|
3535
3557
|
// Performance optimization: reduce drag start delay for year view
|
|
3536
3558
|
this.optimizedDragStartDelay = computed(() => {
|
|
3537
3559
|
return this.dragStartDelay() > 0 ? Math.min(this.dragStartDelay(), 50) : 0;
|
|
3538
|
-
}, ...(ngDevMode ? [{ debugName: "optimizedDragStartDelay" }] : []));
|
|
3560
|
+
}, ...(ngDevMode ? [{ debugName: "optimizedDragStartDelay" }] : /* istanbul ignore next */ []));
|
|
3539
3561
|
this.processedDayData = computed(() => {
|
|
3540
3562
|
const allOriginalAppointments = this.appointments();
|
|
3541
3563
|
const yearStartDate = this.date().startOf('year');
|
|
@@ -3619,13 +3641,13 @@ class AXSchedulerTimelineYearViewComponent extends NXComponent {
|
|
|
3619
3641
|
});
|
|
3620
3642
|
}
|
|
3621
3643
|
return result;
|
|
3622
|
-
}, ...(ngDevMode ? [{ debugName: "processedDayData" }] : []));
|
|
3644
|
+
}, ...(ngDevMode ? [{ debugName: "processedDayData" }] : /* istanbul ignore next */ []));
|
|
3623
3645
|
this.resourceIds = computed(() => {
|
|
3624
3646
|
const resources = this.resources();
|
|
3625
3647
|
if (resources.length === 0)
|
|
3626
3648
|
return [];
|
|
3627
3649
|
return this.schedulerService.getAllResourceIds(resources, this.showUnassignedAppointments());
|
|
3628
|
-
}, ...(ngDevMode ? [{ debugName: "resourceIds" }] : []));
|
|
3650
|
+
}, ...(ngDevMode ? [{ debugName: "resourceIds" }] : /* istanbul ignore next */ []));
|
|
3629
3651
|
// Internal outputs to be caught by parent AXSchedulerComponent
|
|
3630
3652
|
this.slotClickedInternal = output();
|
|
3631
3653
|
this.slotDblClickedInternal = output();
|
|
@@ -3832,10 +3854,10 @@ class AXSchedulerTimelineYearViewComponent extends NXComponent {
|
|
|
3832
3854
|
this.dragStartSlotId.set(dropListElement ? dropListElement.dataset['slotId'] : null);
|
|
3833
3855
|
this.dragStartSlotResourceId.set(dropListElement ? dropListElement.dataset['resourceId'] : null);
|
|
3834
3856
|
}
|
|
3835
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
3836
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AXSchedulerTimelineYearViewComponent, isStandalone: true, selector: "ax-scheduler-timeline-year-view", inputs: { readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, hasActions: { classPropertyName: "hasActions", publicName: "hasActions", isSignal: true, isRequired: false, transformFunction: null }, dragStartDelay: { classPropertyName: "dragStartDelay", publicName: "dragStartDelay", isSignal: true, isRequired: false, transformFunction: null }, calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, showResourceHeaders: { classPropertyName: "showResourceHeaders", publicName: "showResourceHeaders", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: true, transformFunction: null }, showUnassignedAppointments: { classPropertyName: "showUnassignedAppointments", publicName: "showUnassignedAppointments", isSignal: true, isRequired: false, transformFunction: null }, selectedAppointmentId: { classPropertyName: "selectedAppointmentId", publicName: "selectedAppointmentId", isSignal: true, isRequired: false, transformFunction: null }, resources: { classPropertyName: "resources", publicName: "resources", isSignal: true, isRequired: false, transformFunction: null }, showCurrentTimeIndicator: { classPropertyName: "showCurrentTimeIndicator", publicName: "showCurrentTimeIndicator", isSignal: true, isRequired: false, transformFunction: null }, scrollToCurrentTimeIndicator: { classPropertyName: "scrollToCurrentTimeIndicator", publicName: "scrollToCurrentTimeIndicator", isSignal: true, isRequired: false, transformFunction: null }, resourceTemplate: { classPropertyName: "resourceTemplate", publicName: "resourceTemplate", isSignal: true, isRequired: false, transformFunction: null }, appointments: { classPropertyName: "appointments", publicName: "appointments", isSignal: true, isRequired: false, transformFunction: null }, tooltipTemplate: { classPropertyName: "tooltipTemplate", publicName: "tooltipTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { slotClickedInternal: "slotClickedInternal", slotDblClickedInternal: "slotDblClickedInternal", slotRightClickedInternal: "slotRightClickedInternal", appointmentClickedInternal: "appointmentClickedInternal", appointmentDblClickedInternal: "appointmentDblClickedInternal", appointmentRightClickedInternal: "appointmentRightClickedInternal", onActionClickInternal: "onActionClickInternal", onAppointmentDropInternal: "onAppointmentDropInternal" }, host: { properties: { "class.ax-state-readonly": "readonly()" } }, providers: [{ provide: AXComponent, useExisting: AXSchedulerTimelineYearViewComponent }], viewQueries: [{ propertyName: "currentTimeLineElement", first: true, predicate: ["currentTimeLine"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (resources().length === 0 || !showResourceHeaders()) {\n <!-- Original layout when no resources -->\n <div class=\"ax-scheduler-timeline-year-wrapper\">\n <!-- Spanning appointments layer -->\n @if (spanningAppointments().length > 0) {\n <div class=\"ax-scheduler-timeline-year-spanning-layer\" [style.--timeline-days-count]=\"processedDayData().length\">\n @for (spanning of spanningAppointments(); track spanning.appointment.id) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"spanning.appointment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"optimizedDragStartDelay()\"\n [dragDisabled]=\"!draggable() || spanning.appointment.readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, spanning.appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, spanning.appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, spanning.appointment)\"\n [title]=\"\n tooltipTemplate()\n ? ''\n : spanning.appointment.title +\n ' (' +\n (spanning.appointment.startDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ' - ' +\n (spanning.appointment.endDate | format: 'date' : { format: 'MMM d', calendar: calendar() } | async) +\n ')'\n \"\n class=\"ax-scheduler-timeline-spanning-appointment {{\n spanning.appointment.cssClass ??\n 'ax-scheduler-' + (spanning.appointment.priority ?? 'primary') + '-priority'\n }}\"\n [class.ax-spanning-start-clipped]=\"spanning.isStartClipped\"\n [class.ax-spanning-end-clipped]=\"spanning.isEndClipped\"\n [class.ax-state-active]=\"isActive(spanning.appointment.id)\"\n [style.grid-column]=\"spanning.startDayIndex + 1 + ' / span ' + spanning.spanCount\"\n [style.grid-row]=\"spanning.rowIndex + 1\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n [axTooltipContext]=\"spanning.appointment\"\n >\n <span class=\"ax-spanning-appointment-title\">\n <span class=\"ax-scheduler-truncate\">{{ spanning.appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, spanning.appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n ></ax-icon>\n }\n </span>\n </div>\n }\n </div>\n }\n\n <div class=\"ax-scheduler-timeline-year-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-state-today]=\"isToday(dayData.date)\"\n class=\"ax-scheduler-year-header-date-day {{\n dayData.holiday.state !== 'none' ? (dayData.holiday.holiday?.cssClass ?? 'ax-state-holiday') : ''\n }}\"\n >\n <span\n class=\"ax-scheduler-year-header-date-day-char ax-scheduler-truncate\"\n [axTooltip]=\"dayData.holiday.holiday?.title ?? ''\"\n >\n {{ dayData.date | format: 'date' : { format: 'MMMM', 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-year-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 [attr.data-slot-id]=\"dayData.date.format('YYYYMMDD')\"\n [style.pointer-events]=\"draggable() ? 'auto' : 'none'\"\n [style.--spanning-rows-count]=\"maxSpanningRows()\"\n >\n <!-- Current Time Line Indicator -->\n @if (\n showCurrentTimeIndicator() &&\n shouldShowCurrentTimeForDay(dayData.date) &&\n getCurrentTimePosition() !== null\n ) {\n <div\n class=\"ax-scheduler-current-time-line\"\n [style.inset-inline-start.%]=\"getCurrentTimePosition()\"\n #currentTimeLine\n ></div>\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 [dragData]=\"segment\"\n [dragCursor]=\"'grab'\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"optimizedDragStartDelay()\"\n [dragDisabled]=\"!draggable() || segment.readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, segment)\"\n (dblclick)=\"handleAppointmentEvent($event, segment)\"\n (contextmenu)=\"handleAppointmentEvent($event, segment)\"\n [title]=\"\n tooltipTemplate()\n ? ''\n : segment.title +\n ' (' +\n (segment.originalStartDate | format: 'time' : { calendar: calendar() } | async) +\n ' - ' +\n (segment.originalEndDate | format: 'time' : { calendar: calendar() } | async) +\n ')'\n \"\n class=\"ax-scheduler-timeline-appointment {{\n segment.cssClass ?? 'ax-scheduler-' + (segment.priority ?? 'primary') + '-priority'\n }}\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n [axTooltipContext]=\"segment\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ segment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, segment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </ax-title>\n <span class=\"ax-scheduler-timeline-appointment-time\">\n {{ segment.originalStartDate | format: 'time' : { calendar: calendar() } | async }}\n @if (segment.originalStartDate.getTime() !== segment.originalEndDate.getTime()) {\n -\n {{ segment.originalEndDate | format: 'time' : { calendar: calendar() } | async }}\n }\n </span>\n </div>\n }\n\n <!-- Overflow Badge and Popover -->\n @if (dayData.moreCount > 0) {\n <div #moreAppointments class=\"ax-scheduler-year-overflow-badge\" (click)=\"$event.stopPropagation()\">\n +{{\n '@acorex:common.general.more-items' | translate: { params: { number: dayData.moreCount } } | async\n }}\n </div>\n <ax-popover [target]=\"moreAppointments\" placement=\"bottom-start\" trigger=\"click\">\n <div\n axDropZone\n [class.ax-state-readonly]=\"readonly()\"\n class=\"ax-scheduler-popover ax-scheduler-timeline-year-popover-appointment\"\n >\n @for (\n segment of dayData.hiddenAppointments;\n track segment.id + segment.originalStartDate.getTime()\n ) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"segment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"optimizedDragStartDelay()\"\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 tooltipTemplate()\n ? ''\n : segment.title +\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 segment.cssClass ?? 'ax-scheduler-' + (segment.priority ?? 'primary') + '-priority'\n }}\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n [axTooltipContext]=\"segment\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ segment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, segment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </ax-title>\n <span class=\"ax-scheduler-timeline-appointment-time\">\n {{ segment.originalStartDate | format: 'time' : { calendar: calendar() } | async }}\n @if (segment.originalStartDate.getTime() !== segment.originalEndDate.getTime()) {\n -\n {{ segment.originalEndDate | format: 'time' : { calendar: calendar() } | async }}\n }\n </span>\n </div>\n }\n </div>\n </ax-popover>\n }\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n} @else {\n <!-- Resource-based layout -->\n <div class=\"ax-scheduler-timeline-year-resource-container\">\n <div class=\"ax-scheduler-timeline-year-header-sticky\">\n <div class=\"ax-scheduler-timeline-year-resource-header-placeholder\">\n <span>Resources</span>\n </div>\n\n <div class=\"ax-scheduler-timeline-year-day-header\">\n @for (dayData of processedDayData(); track dayData.date.date.getTime()) {\n <div\n [class.ax-state-today]=\"isToday(dayData.date)\"\n class=\"ax-scheduler-year-header-date-day {{\n dayData.holiday.state !== 'none' ? (dayData.holiday.holiday?.cssClass ?? 'ax-state-holiday') : ''\n }}\"\n >\n <span\n class=\"ax-scheduler-year-header-date-day-char ax-scheduler-truncate\"\n [axTooltip]=\"dayData.holiday.holiday?.title ?? ''\"\n >\n {{ dayData.date | format: 'date' : { format: 'MMMM', 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-year-header-date-day-num\">\n {{ dayData.date | format: 'date' : { format: 'DD', calendar: calendar() } | async }}\n </span>\n </div>\n }\n </div>\n </div>\n\n <div class=\"ax-scheduler-timeline-year-resource-rows\">\n <!-- Current Time Line Indicator -->\n @if (showCurrentTimeIndicator() && getCurrentTimePosition() !== null) {\n <div\n class=\"ax-scheduler-current-time-line\"\n [style.inset-inline-start.%]=\"getCurrentTimePosition()\"\n #currentTimeLine\n ></div>\n }\n\n @for (resourceId of resourceIds(); track resourceId) {\n <div\n class=\"ax-scheduler-timeline-year-resource-row\"\n [style.--resource-spanning-rows-count]=\"getMaxSpanningRowsForResource(resourceId)\"\n >\n <div class=\"ax-scheduler-timeline-year-resource-header ax-scheduler-timeline-year-resource-header-sticky\">\n @if (resourceTemplate() && typeof resourceTemplate() !== 'string') {\n <ng-container\n [ngTemplateOutlet]=\"$any(resourceTemplate())\"\n [ngTemplateOutletContext]=\"{\n $implicit: getResourceContext(resourceId),\n resource: getResourceContext(resourceId),\n resourceId: resourceId,\n }\"\n ></ng-container>\n } @else {\n <div class=\"ax-scheduler-timeline-year-resource-title\">\n {{ getResourceTitle(resourceId) | translate | async }}\n </div>\n }\n </div>\n\n <div class=\"ax-scheduler-timeline-year-resource-content\">\n <!-- Spanning appointments layer for this resource -->\n @if (getSpanningAppointmentsForResource(resourceId).length > 0) {\n <div\n class=\"ax-scheduler-timeline-resource-spanning-layer\"\n [style.--timeline-days-count]=\"processedDayData().length\"\n >\n @for (spanning of getSpanningAppointmentsForResource(resourceId); track spanning.appointment.id) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"spanning.appointment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"optimizedDragStartDelay()\"\n [dragDisabled]=\"!draggable() || spanning.appointment.readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, spanning.appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, spanning.appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, spanning.appointment)\"\n [title]=\"\n tooltipTemplate()\n ? ''\n : spanning.appointment.title +\n ' (' +\n (spanning.appointment.startDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ' - ' +\n (spanning.appointment.endDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ')'\n \"\n class=\"ax-scheduler-timeline-spanning-appointment {{\n spanning.appointment.cssClass ??\n 'ax-scheduler-' + (spanning.appointment.priority ?? 'primary') + '-priority'\n }}\"\n [class.ax-spanning-start-clipped]=\"spanning.isStartClipped\"\n [class.ax-spanning-end-clipped]=\"spanning.isEndClipped\"\n [class.ax-state-active]=\"isActive(spanning.appointment.id)\"\n [style.grid-column]=\"spanning.startDayIndex + 1 + ' / span ' + spanning.spanCount\"\n [style.grid-row]=\"spanning.rowIndex + 1\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n [axTooltipContext]=\"spanning.appointment\"\n >\n <span class=\"ax-spanning-appointment-title\">\n <span class=\"ax-scheduler-truncate\">{{ spanning.appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, spanning.appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n ></ax-icon>\n }\n </span>\n </div>\n }\n </div>\n }\n\n @for (dayData of processedDayData(); track dayData.date.date.getTime()) {\n <div\n axDropZone\n #zone=\"axDropZone\"\n (onElementDrop)=\"handleDrop($event, dayData.date, resourceId)\"\n [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n class=\"ax-scheduler-timeline-year-slot-row\"\n (click)=\"handleSlotEvent($event, dayData.date)\"\n (dblclick)=\"handleSlotEvent($event, dayData.date)\"\n (contextmenu)=\"handleSlotEvent($event, dayData.date)\"\n [attr.data-slot-id]=\"dayData.date.format('YYYYMMDD')\"\n [attr.data-resource-id]=\"resourceId\"\n [style.pointer-events]=\"draggable() ? 'auto' : 'none'\"\n [style.--spanning-rows-count]=\"getMaxSpanningRowsForResource(resourceId)\"\n >\n <div class=\"ax-scheduler-timeline-appointment-container\">\n @for (\n segment of getAppointmentsForResourceAndDay(resourceId, dayData).visible;\n track segment.id + segment.originalStartDate.getTime()\n ) {\n <div\n axDrag\n [dragData]=\"segment\"\n [dragCursor]=\"'grab'\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"optimizedDragStartDelay()\"\n [dragDisabled]=\"!draggable() || segment.readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, segment)\"\n (dblclick)=\"handleAppointmentEvent($event, segment)\"\n (contextmenu)=\"handleAppointmentEvent($event, segment)\"\n [title]=\"\n tooltipTemplate()\n ? ''\n : segment.allDay\n ? segment.title +\n ' (' +\n (segment.originalStartDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ' - ' +\n (segment.originalEndDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ')'\n : segment.title +\n ' (' +\n (segment.originalStartDate | format: 'time' : { calendar: calendar() } | async) +\n ' - ' +\n (segment.originalEndDate | format: 'time' : { calendar: calendar() } | async) +\n ')'\n \"\n class=\"ax-scheduler-timeline-appointment {{\n segment.cssClass ?? 'ax-scheduler-' + (segment.priority ?? 'primary') + '-priority'\n }}\"\n [class.all-day-segment]=\"segment.allDay\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n [axTooltipContext]=\"segment\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ segment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, segment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </ax-title>\n <span class=\"ax-scheduler-timeline-appointment-time\">\n @if (segment.allDay) {\n {{\n segment.originalStartDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async\n }}\n @if (segment.originalStartDate.getTime() !== segment.originalEndDate.getTime()) {\n -\n {{\n segment.originalEndDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async\n }}\n }\n } @else {\n {{ segment.originalStartDate | format: 'time' : { calendar: calendar() } | async }}\n @if (segment.originalStartDate.getTime() !== segment.originalEndDate.getTime()) {\n -\n {{ segment.originalEndDate | format: 'time' : { calendar: calendar() } | async }}\n }\n }\n </span>\n </div>\n }\n\n <!-- Overflow Badge and Popover -->\n @if (getAppointmentsForResourceAndDay(resourceId, dayData).moreCount > 0) {\n <div #moreAppointments class=\"ax-scheduler-year-overflow-badge\" (click)=\"$event.stopPropagation()\">\n +{{\n '@acorex:common.general.more-items'\n | translate\n : { params: { number: getAppointmentsForResourceAndDay(resourceId, dayData).moreCount } }\n | async\n }}\n </div>\n <ax-popover [target]=\"moreAppointments\" placement=\"bottom-start\" trigger=\"click\">\n <div\n axDropZone\n [class.ax-state-readonly]=\"readonly()\"\n class=\"ax-scheduler-popover ax-scheduler-timeline-year-popover-appointment\"\n >\n @for (\n segment of getAppointmentsForResourceAndDay(resourceId, dayData).hidden;\n track segment.id + segment.originalStartDate.getTime()\n ) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"segment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"optimizedDragStartDelay()\"\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 tooltipTemplate()\n ? ''\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 class=\"ax-scheduler-popover-appointment {{\n segment.cssClass ?? 'ax-scheduler-' + (segment.priority ?? 'primary') + '-priority'\n }}\"\n [class.all-day-segment]=\"segment.allDay\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n [axTooltipContext]=\"segment\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ segment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, segment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </ax-title>\n @if (!segment.allDay) {\n <span class=\"ax-scheduler-timeline-appointment-time\">\n {{ segment.originalStartDate | format: 'time' : { calendar: calendar() } | async }}\n @if (\n !segment.allDay &&\n segment.originalStartDate.getTime() !== segment.originalEndDate.getTime()\n ) {\n -\n {{ segment.originalEndDate | format: 'time' : { 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 }\n </div>\n </div>\n}\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-border-style:solid;--tw-font-weight:initial;--tw-leading:initial;--tw-content:\"\"}}}@layer components{ax-scheduler-timeline-year-view{background-color:inherit;--ax-comp-scheduler-timeline-year-view-blocks-width:calc(var(--ax-comp-scheduler-timeline-view-blocks-width) / 2);height:100%;display:inline-flex;position:relative}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-container{--tw-translate-z:calc(var(--spacing,.25rem) * 0);height:100%;translate:var(--tw-translate-x) var(--tw-translate-y) var(--tw-translate-z);will-change:transform;display:flex}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-container .ax-scheduler-timeline-header{background-color:var(--ax-comp-scheduler-all-day-bg,inherit);width:100%;display:flex}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-container .ax-scheduler-timeline-header .ax-scheduler-year-header-date-day{height:calc(var(--spacing,.25rem) * 16);width:var(--ax-comp-scheduler-timeline-year-view-blocks-width);justify-content:center;align-items:flex-start;gap:calc(var(--spacing,.25rem) * 1);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding-inline:calc(var(--spacing,.25rem) * 4);padding-block:calc(var(--spacing,.25rem) * 1);flex-direction:column;display:flex;position:relative}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-container .ax-scheduler-timeline-header .ax-scheduler-year-header-date-day.ax-state-today{background-color:rgba(var(--ax-sys-color-primary-surface))}@supports (color:color-mix(in lab,red,red)){ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-container .ax-scheduler-timeline-header .ax-scheduler-year-header-date-day.ax-state-today{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 5%,transparent)}}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-container .ax-scheduler-timeline-header .ax-scheduler-year-header-date-day.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-container .ax-scheduler-timeline-header .ax-scheduler-year-header-date-day.ax-state-today .ax-scheduler-year-header-date-day-char{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-container .ax-scheduler-timeline-header .ax-scheduler-year-header-date-day.ax-state-today .ax-scheduler-year-header-date-day-num{--tw-font-weight:var(--font-weight-bold,700);font-weight:var(--font-weight-bold,700)}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-container .ax-scheduler-timeline-header .ax-scheduler-year-header-date-day.ax-state-holiday{color:rgba(var(--ax-sys-color-danger-600))}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-container .ax-scheduler-timeline-header .ax-scheduler-year-header-date-day.ax-state-holiday.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-container .ax-scheduler-timeline-header .ax-scheduler-year-header-date-day .ax-scheduler-year-header-date-day-char{max-width:100%;font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));--tw-leading:calc(var(--spacing,.25rem) * 3.5);line-height:calc(var(--spacing,.25rem) * 3.5);--tw-font-weight:var(--font-weight-light,300);font-weight:var(--font-weight-light,300);position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 4)}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-container .ax-scheduler-timeline-header .ax-scheduler-year-header-date-day .ax-scheduler-year-header-date-day-num{font-size:var(--text-xl,1.25rem);line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75 / 1.25)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 4)}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-container .ax-scheduler-timeline-content{height:calc(100% - 4rem);width:var(--ax-comp-scheduler-timeline-year-view-blocks-width);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding-inline:calc(var(--spacing,.25rem) * 1);padding-block:calc(var(--spacing,.25rem) * .5);position:relative}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container{flex-direction:column;gap:1px;display:flex}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-timeline-appointment{--tw-translate-z:calc(var(--spacing,.25rem) * 0);width:100%;translate:var(--tw-translate-x) var(--tw-translate-y) var(--tw-translate-z);gap:calc(var(--spacing,.25rem) * .5);border-radius:calc(var(--ax-sys-border-radius) / 2);padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:calc(var(--spacing,.25rem) * 1);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));--tw-leading:calc(var(--spacing,.25rem) * 3.5);line-height:calc(var(--spacing,.25rem) * 3.5);will-change:transform;flex-direction:column;display:flex;overflow:hidden}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-timeline-appointment ax-title{--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600)}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-year-overflow-badge{margin-top:calc(var(--spacing,.25rem) * .5);cursor:pointer;padding-inline:calc(var(--spacing,.25rem) * 0);padding-block:calc(var(--spacing,.25rem) * 1);text-align:start;font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)))}@media(hover:hover){ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-year-overflow-badge:hover{text-decoration-line:underline}}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container{--tw-translate-z:calc(var(--spacing,.25rem) * 0);height:100%;translate:var(--tw-translate-x) var(--tw-translate-y) var(--tw-translate-z);background-color:inherit;will-change:transform;flex-direction:column;display:flex;position:relative}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-header-sticky{top:calc(var(--spacing,.25rem) * 0);z-index:10;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;display:flex;position:sticky}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-header-sticky .ax-scheduler-timeline-year-resource-header-placeholder{z-index:15;width:var(--ax-comp-scheduler-resource-header-width,8rem);min-width:var(--ax-comp-scheduler-resource-header-width,8rem);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;padding:calc(var(--spacing,.25rem) * 2);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);justify-content:center;align-items:center;display:flex;position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 0)}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-header-sticky .ax-scheduler-timeline-year-day-header{background-color:inherit;flex:1;display:flex;overflow-x:auto}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-header-sticky .ax-scheduler-timeline-year-day-header .ax-scheduler-year-header-date-day{height:calc(var(--spacing,.25rem) * 16);width:var(--ax-comp-scheduler-timeline-year-view-blocks-width);min-width:var(--ax-comp-scheduler-timeline-year-view-blocks-width);justify-content:center;align-items:flex-start;gap:calc(var(--spacing,.25rem) * 1);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding-inline:calc(var(--spacing,.25rem) * 4);padding-block:calc(var(--spacing,.25rem) * 1);flex-direction:column;display:flex;position:relative}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-header-sticky .ax-scheduler-timeline-year-day-header .ax-scheduler-year-header-date-day.ax-state-today{background-color:rgba(var(--ax-sys-color-primary-surface))}@supports (color:color-mix(in lab,red,red)){ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-header-sticky .ax-scheduler-timeline-year-day-header .ax-scheduler-year-header-date-day.ax-state-today{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 5%,transparent)}}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-header-sticky .ax-scheduler-timeline-year-day-header .ax-scheduler-year-header-date-day.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-header-sticky .ax-scheduler-timeline-year-day-header .ax-scheduler-year-header-date-day.ax-state-today .ax-scheduler-year-header-date-day-char{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-header-sticky .ax-scheduler-timeline-year-day-header .ax-scheduler-year-header-date-day.ax-state-today .ax-scheduler-year-header-date-day-num{--tw-font-weight:var(--font-weight-bold,700);font-weight:var(--font-weight-bold,700)}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-header-sticky .ax-scheduler-timeline-year-day-header .ax-scheduler-year-header-date-day.ax-state-holiday{color:rgba(var(--ax-sys-color-danger-600))}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-header-sticky .ax-scheduler-timeline-year-day-header .ax-scheduler-year-header-date-day.ax-state-holiday.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-header-sticky .ax-scheduler-timeline-year-day-header .ax-scheduler-year-header-date-day .ax-scheduler-year-header-date-day-char{max-width:100%;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-leading:calc(var(--spacing,.25rem) * 3.5);line-height:calc(var(--spacing,.25rem) * 3.5);--tw-font-weight:var(--font-weight-light,300);font-weight:var(--font-weight-light,300);position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 4)}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-header-sticky .ax-scheduler-timeline-year-day-header .ax-scheduler-year-header-date-day .ax-scheduler-year-header-date-day-num{font-size:var(--text-xl,1.25rem);line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75 / 1.25)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 4)}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-resource-rows{background-color:inherit;flex:1;position:relative;overflow:visible}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-resource-rows .ax-scheduler-timeline-year-resource-row{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;width:max-content;min-height:auto;display:flex}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-resource-rows .ax-scheduler-timeline-year-resource-row .ax-scheduler-timeline-year-resource-header{min-height:2.625rem;width:var(--ax-comp-scheduler-resource-header-width,8rem);min-width:var(--ax-comp-scheduler-resource-header-width,8rem);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;padding:calc(var(--spacing,.25rem) * 2);justify-content:center;align-items:center;display:flex}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-resource-rows .ax-scheduler-timeline-year-resource-row .ax-scheduler-timeline-year-resource-header.ax-scheduler-timeline-year-resource-header-sticky{z-index:9;background-color:inherit;position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 0)}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-resource-rows .ax-scheduler-timeline-year-resource-row .ax-scheduler-timeline-year-resource-header .ax-scheduler-timeline-year-resource-title{text-align:center;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);overflow-wrap:break-word}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-resource-rows .ax-scheduler-timeline-year-resource-row .ax-scheduler-timeline-year-resource-content{background-color:inherit;flex:1;display:flex}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-resource-rows .ax-scheduler-timeline-year-resource-row .ax-scheduler-timeline-year-resource-content .ax-scheduler-timeline-year-slot-row{width:var(--ax-comp-scheduler-timeline-year-view-blocks-width);min-width:var(--ax-comp-scheduler-timeline-year-view-blocks-width);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;flex:1;display:flex;position:relative}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-resource-rows .ax-scheduler-timeline-year-resource-row .ax-scheduler-timeline-year-resource-content .ax-scheduler-timeline-year-slot-row .ax-scheduler-timeline-appointment-container{gap:var(--ax-comp-scheduler-timeline-year-gap-height,.125rem);width:100%;min-height:100%;padding-inline:calc(var(--spacing,.25rem) * 1);padding-block:calc(var(--spacing,.25rem) * .5);flex-direction:column;display:flex;overflow:visible}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-resource-rows .ax-scheduler-timeline-year-resource-row .ax-scheduler-timeline-year-resource-content .ax-scheduler-timeline-year-slot-row .ax-scheduler-timeline-appointment-container ax-popover{display:none}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-resource-rows .ax-scheduler-timeline-year-resource-row .ax-scheduler-timeline-year-resource-content .ax-scheduler-timeline-year-slot-row .ax-scheduler-timeline-appointment-container .ax-scheduler-timeline-appointment{--tw-translate-z:calc(var(--spacing,.25rem) * 0);width:100%;translate:var(--tw-translate-x) var(--tw-translate-y) var(--tw-translate-z);gap:calc(var(--spacing,.25rem) * .5);border-radius:calc(var(--ax-sys-border-radius) / 2);padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:calc(var(--spacing,.25rem) * 1);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));--tw-leading:calc(var(--spacing,.25rem) * 3.5);line-height:calc(var(--spacing,.25rem) * 3.5);will-change:transform;flex-direction:column;flex-shrink:0;display:flex;overflow:hidden}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-resource-rows .ax-scheduler-timeline-year-resource-row .ax-scheduler-timeline-year-resource-content .ax-scheduler-timeline-year-slot-row .ax-scheduler-timeline-appointment-container .ax-scheduler-timeline-appointment ax-title{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-resource-rows .ax-scheduler-timeline-year-resource-row .ax-scheduler-timeline-year-resource-content .ax-scheduler-timeline-year-slot-row .ax-scheduler-timeline-appointment-container .ax-scheduler-year-overflow-badge{margin-top:calc(var(--spacing,.25rem) * .5);cursor:pointer;padding-inline:calc(var(--spacing,.25rem) * 0);padding-block:calc(var(--spacing,.25rem) * .5);text-align:start;font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));flex-shrink:0}@media(hover:hover){ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-resource-rows .ax-scheduler-timeline-year-resource-row .ax-scheduler-timeline-year-resource-content .ax-scheduler-timeline-year-slot-row .ax-scheduler-timeline-appointment-container .ax-scheduler-year-overflow-badge:hover{text-decoration-line:underline}}ax-scheduler-timeline-year-view:not(.ax-state-readonly) .ax-scheduler-timeline-appointment{cursor:pointer}ax-scheduler-timeline-year-view:not(.ax-state-readonly) .ax-scheduler-timeline-content,ax-scheduler-timeline-year-view:not(.ax-state-readonly) .ax-scheduler-timeline-year-slot-row{cursor:pointer;transition-property:background-color;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}@media(hover:hover){:is(ax-scheduler-timeline-year-view:not(.ax-state-readonly) .ax-scheduler-timeline-content,ax-scheduler-timeline-year-view:not(.ax-state-readonly) .ax-scheduler-timeline-year-slot-row):hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg,var(--ax-sys-color-primary-surface),.1))}}ax-scheduler-timeline-year-view ax-title{justify-content:space-between;display:flex}ax-scheduler-timeline-year-view ax-title .ax-scheduler-action-icon{cursor:pointer;width:100%}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-popover-appointment{font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)))}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-popover-appointment .ax-scheduler-popover-appointment{margin-bottom:calc(var(--spacing,.25rem) * 1);border-radius:calc(var(--ax-sys-border-radius) / 2);padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:calc(var(--spacing,.25rem) * 1);flex-direction:column;display:flex;overflow:hidden}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-popover-appointment .ax-scheduler-popover-appointment:last-child{margin-bottom:calc(var(--spacing,.25rem) * 0)}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-popover-appointment .ax-scheduler-popover-appointment .ax-appointment-chip-title{margin-bottom:calc(var(--spacing,.25rem) * .5);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600)}ax-scheduler-timeline-year-view .ax-scheduler-current-time-line{top:calc(var(--spacing,.25rem) * 0);bottom:calc(var(--spacing,.25rem) * 0);width:calc(var(--spacing,.25rem) * .5)}ax-scheduler-timeline-year-view .ax-scheduler-current-time-line:before{content:var(--tw-content);inset-inline-start:-5px;top:calc(var(--spacing,.25rem) * -1.5)}}@property --tw-translate-x{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-y{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-z{syntax:\"*\";inherits:false;initial-value:0}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-leading{syntax:\"*\";inherits:false}@property --tw-content{syntax:\"*\";inherits:false;initial-value:\"\"}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["axDrag", "dragData", "dragDisabled", "dragTransition", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragClonedTemplate", "dragCursor", "dragBoundary", "dragTransitionDuration"], outputs: ["dragPositionChanged"] }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "directive", type: AXDropZoneDirective, selector: "[axDropZone]", inputs: ["dropZoneGroup"], outputs: ["onElementDrop", "onElementHover"], exportAs: ["axDropZone"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXFormatPipe, name: "format" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
3857
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXSchedulerTimelineYearViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
3858
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXSchedulerTimelineYearViewComponent, isStandalone: true, selector: "ax-scheduler-timeline-year-view", inputs: { readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, hasActions: { classPropertyName: "hasActions", publicName: "hasActions", isSignal: true, isRequired: false, transformFunction: null }, dragStartDelay: { classPropertyName: "dragStartDelay", publicName: "dragStartDelay", isSignal: true, isRequired: false, transformFunction: null }, calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, showResourceHeaders: { classPropertyName: "showResourceHeaders", publicName: "showResourceHeaders", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: true, transformFunction: null }, showUnassignedAppointments: { classPropertyName: "showUnassignedAppointments", publicName: "showUnassignedAppointments", isSignal: true, isRequired: false, transformFunction: null }, selectedAppointmentId: { classPropertyName: "selectedAppointmentId", publicName: "selectedAppointmentId", isSignal: true, isRequired: false, transformFunction: null }, resources: { classPropertyName: "resources", publicName: "resources", isSignal: true, isRequired: false, transformFunction: null }, showCurrentTimeIndicator: { classPropertyName: "showCurrentTimeIndicator", publicName: "showCurrentTimeIndicator", isSignal: true, isRequired: false, transformFunction: null }, scrollToCurrentTimeIndicator: { classPropertyName: "scrollToCurrentTimeIndicator", publicName: "scrollToCurrentTimeIndicator", isSignal: true, isRequired: false, transformFunction: null }, resourceTemplate: { classPropertyName: "resourceTemplate", publicName: "resourceTemplate", isSignal: true, isRequired: false, transformFunction: null }, appointments: { classPropertyName: "appointments", publicName: "appointments", isSignal: true, isRequired: false, transformFunction: null }, tooltipTemplate: { classPropertyName: "tooltipTemplate", publicName: "tooltipTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { slotClickedInternal: "slotClickedInternal", slotDblClickedInternal: "slotDblClickedInternal", slotRightClickedInternal: "slotRightClickedInternal", appointmentClickedInternal: "appointmentClickedInternal", appointmentDblClickedInternal: "appointmentDblClickedInternal", appointmentRightClickedInternal: "appointmentRightClickedInternal", onActionClickInternal: "onActionClickInternal", onAppointmentDropInternal: "onAppointmentDropInternal" }, host: { properties: { "class.ax-state-readonly": "readonly()" } }, providers: [{ provide: AXComponent, useExisting: AXSchedulerTimelineYearViewComponent }], viewQueries: [{ propertyName: "currentTimeLineElement", first: true, predicate: ["currentTimeLine"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (resources().length === 0 || !showResourceHeaders()) {\n <!-- Original layout when no resources -->\n <div class=\"ax-scheduler-timeline-year-wrapper\">\n <!-- Spanning appointments layer -->\n @if (spanningAppointments().length > 0) {\n <div class=\"ax-scheduler-timeline-year-spanning-layer\" [style.--timeline-days-count]=\"processedDayData().length\">\n @for (spanning of spanningAppointments(); track spanning.appointment.id) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"spanning.appointment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"optimizedDragStartDelay()\"\n [dragDisabled]=\"!draggable() || spanning.appointment.readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, spanning.appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, spanning.appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, spanning.appointment)\"\n [title]=\"\n tooltipTemplate()\n ? ''\n : spanning.appointment.title +\n ' (' +\n (spanning.appointment.startDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ' - ' +\n (spanning.appointment.endDate | format: 'date' : { format: 'MMM d', calendar: calendar() } | async) +\n ')'\n \"\n class=\"ax-scheduler-timeline-spanning-appointment {{\n spanning.appointment.cssClass ??\n 'ax-scheduler-' + (spanning.appointment.priority ?? 'primary') + '-priority'\n }}\"\n [class.ax-spanning-start-clipped]=\"spanning.isStartClipped\"\n [class.ax-spanning-end-clipped]=\"spanning.isEndClipped\"\n [class.ax-state-active]=\"isActive(spanning.appointment.id)\"\n [style.grid-column]=\"spanning.startDayIndex + 1 + ' / span ' + spanning.spanCount\"\n [style.grid-row]=\"spanning.rowIndex + 1\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n [axTooltipContext]=\"spanning.appointment\"\n >\n <span class=\"ax-spanning-appointment-title\">\n <span class=\"ax-scheduler-truncate\">{{ spanning.appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, spanning.appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n ></ax-icon>\n }\n </span>\n </div>\n }\n </div>\n }\n\n <div class=\"ax-scheduler-timeline-year-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-state-today]=\"isToday(dayData.date)\"\n class=\"ax-scheduler-year-header-date-day {{\n dayData.holiday.state !== 'none' ? (dayData.holiday.holiday?.cssClass ?? 'ax-state-holiday') : ''\n }}\"\n [style.--ax-scheduler-holiday-color]=\"dayData.holiday.holiday?.color ?? null\"\n >\n <span\n class=\"ax-scheduler-year-header-date-day-char ax-scheduler-truncate\"\n [axTooltip]=\"(dayData.holiday.holiday?.description ?? dayData.holiday.holiday?.title ?? '') | translate | async\"\n >\n {{ dayData.date | format: 'date' : { format: 'MMMM', calendar: calendar() } | async }}\n @if (dayData.holiday.state === 'holiday' && dayData.holiday.holiday.title) {\n ( {{ dayData.holiday.holiday.title | translate | async }} )\n }\n </span>\n <span class=\"ax-scheduler-year-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 [attr.data-slot-id]=\"dayData.date.format('YYYYMMDD')\"\n [style.pointer-events]=\"draggable() ? 'auto' : 'none'\"\n [style.--spanning-rows-count]=\"maxSpanningRows()\"\n >\n <!-- Current Time Line Indicator -->\n @if (\n showCurrentTimeIndicator() &&\n shouldShowCurrentTimeForDay(dayData.date) &&\n getCurrentTimePosition() !== null\n ) {\n <div\n class=\"ax-scheduler-current-time-line\"\n [style.inset-inline-start.%]=\"getCurrentTimePosition()\"\n #currentTimeLine\n ></div>\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 [dragData]=\"segment\"\n [dragCursor]=\"'grab'\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"optimizedDragStartDelay()\"\n [dragDisabled]=\"!draggable() || segment.readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, segment)\"\n (dblclick)=\"handleAppointmentEvent($event, segment)\"\n (contextmenu)=\"handleAppointmentEvent($event, segment)\"\n [title]=\"\n tooltipTemplate()\n ? ''\n : segment.title +\n ' (' +\n (segment.originalStartDate | format: 'time' : { calendar: calendar() } | async) +\n ' - ' +\n (segment.originalEndDate | format: 'time' : { calendar: calendar() } | async) +\n ')'\n \"\n class=\"ax-scheduler-timeline-appointment {{\n segment.cssClass ?? 'ax-scheduler-' + (segment.priority ?? 'primary') + '-priority'\n }}\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n [axTooltipContext]=\"segment\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ segment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, segment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </ax-title>\n <span class=\"ax-scheduler-timeline-appointment-time\">\n {{ segment.originalStartDate | format: 'time' : { calendar: calendar() } | async }}\n @if (segment.originalStartDate.getTime() !== segment.originalEndDate.getTime()) {\n -\n {{ segment.originalEndDate | format: 'time' : { calendar: calendar() } | async }}\n }\n </span>\n </div>\n }\n\n <!-- Overflow Badge and Popover -->\n @if (dayData.moreCount > 0) {\n <div #moreAppointments class=\"ax-scheduler-year-overflow-badge\" (click)=\"$event.stopPropagation()\">\n +{{\n '@acorex:common.general.more-items' | translate: { params: { number: dayData.moreCount } } | async\n }}\n </div>\n <ax-popover [target]=\"moreAppointments\" placement=\"bottom-start\" trigger=\"click\">\n <div\n axDropZone\n [class.ax-state-readonly]=\"readonly()\"\n class=\"ax-scheduler-popover ax-scheduler-timeline-year-popover-appointment\"\n >\n @for (\n segment of dayData.hiddenAppointments;\n track segment.id + segment.originalStartDate.getTime()\n ) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"segment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"optimizedDragStartDelay()\"\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 tooltipTemplate()\n ? ''\n : segment.title +\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 segment.cssClass ?? 'ax-scheduler-' + (segment.priority ?? 'primary') + '-priority'\n }}\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n [axTooltipContext]=\"segment\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ segment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, segment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </ax-title>\n <span class=\"ax-scheduler-timeline-appointment-time\">\n {{ segment.originalStartDate | format: 'time' : { calendar: calendar() } | async }}\n @if (segment.originalStartDate.getTime() !== segment.originalEndDate.getTime()) {\n -\n {{ segment.originalEndDate | format: 'time' : { calendar: calendar() } | async }}\n }\n </span>\n </div>\n }\n </div>\n </ax-popover>\n }\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n} @else {\n <!-- Resource-based layout -->\n <div class=\"ax-scheduler-timeline-year-resource-container\">\n <div class=\"ax-scheduler-timeline-year-header-sticky\">\n <div class=\"ax-scheduler-timeline-year-resource-header-placeholder\">\n <span>Resources</span>\n </div>\n\n <div class=\"ax-scheduler-timeline-year-day-header\">\n @for (dayData of processedDayData(); track dayData.date.date.getTime()) {\n <div\n [class.ax-state-today]=\"isToday(dayData.date)\"\n class=\"ax-scheduler-year-header-date-day {{\n dayData.holiday.state !== 'none' ? (dayData.holiday.holiday?.cssClass ?? 'ax-state-holiday') : ''\n }}\"\n [style.--ax-scheduler-holiday-color]=\"dayData.holiday.holiday?.color ?? null\"\n >\n <span\n class=\"ax-scheduler-year-header-date-day-char ax-scheduler-truncate\"\n [axTooltip]=\"(dayData.holiday.holiday?.description ?? dayData.holiday.holiday?.title ?? '') | translate | async\"\n >\n {{ dayData.date | format: 'date' : { format: 'MMMM', calendar: calendar() } | async }}\n @if (dayData.holiday.state === 'holiday' && dayData.holiday.holiday.title) {\n ( {{ dayData.holiday.holiday.title | translate | async }} )\n }\n </span>\n <span class=\"ax-scheduler-year-header-date-day-num\">\n {{ dayData.date | format: 'date' : { format: 'DD', calendar: calendar() } | async }}\n </span>\n </div>\n }\n </div>\n </div>\n\n <div class=\"ax-scheduler-timeline-year-resource-rows\">\n <!-- Current Time Line Indicator -->\n @if (showCurrentTimeIndicator() && getCurrentTimePosition() !== null) {\n <div\n class=\"ax-scheduler-current-time-line\"\n [style.inset-inline-start.%]=\"getCurrentTimePosition()\"\n #currentTimeLine\n ></div>\n }\n\n @for (resourceId of resourceIds(); track resourceId) {\n <div\n class=\"ax-scheduler-timeline-year-resource-row\"\n [style.--resource-spanning-rows-count]=\"getMaxSpanningRowsForResource(resourceId)\"\n >\n <div class=\"ax-scheduler-timeline-year-resource-header ax-scheduler-timeline-year-resource-header-sticky\">\n @if (resourceTemplate() && typeof resourceTemplate() !== 'string') {\n <ng-container\n [ngTemplateOutlet]=\"$any(resourceTemplate())\"\n [ngTemplateOutletContext]=\"{\n $implicit: getResourceContext(resourceId),\n resource: getResourceContext(resourceId),\n resourceId: resourceId,\n }\"\n ></ng-container>\n } @else {\n <div class=\"ax-scheduler-timeline-year-resource-title\">\n {{ getResourceTitle(resourceId) | translate | async }}\n </div>\n }\n </div>\n\n <div class=\"ax-scheduler-timeline-year-resource-content\">\n <!-- Spanning appointments layer for this resource -->\n @if (getSpanningAppointmentsForResource(resourceId).length > 0) {\n <div\n class=\"ax-scheduler-timeline-resource-spanning-layer\"\n [style.--timeline-days-count]=\"processedDayData().length\"\n >\n @for (spanning of getSpanningAppointmentsForResource(resourceId); track spanning.appointment.id) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"spanning.appointment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"optimizedDragStartDelay()\"\n [dragDisabled]=\"!draggable() || spanning.appointment.readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, spanning.appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, spanning.appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, spanning.appointment)\"\n [title]=\"\n tooltipTemplate()\n ? ''\n : spanning.appointment.title +\n ' (' +\n (spanning.appointment.startDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ' - ' +\n (spanning.appointment.endDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ')'\n \"\n class=\"ax-scheduler-timeline-spanning-appointment {{\n spanning.appointment.cssClass ??\n 'ax-scheduler-' + (spanning.appointment.priority ?? 'primary') + '-priority'\n }}\"\n [class.ax-spanning-start-clipped]=\"spanning.isStartClipped\"\n [class.ax-spanning-end-clipped]=\"spanning.isEndClipped\"\n [class.ax-state-active]=\"isActive(spanning.appointment.id)\"\n [style.grid-column]=\"spanning.startDayIndex + 1 + ' / span ' + spanning.spanCount\"\n [style.grid-row]=\"spanning.rowIndex + 1\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n [axTooltipContext]=\"spanning.appointment\"\n >\n <span class=\"ax-spanning-appointment-title\">\n <span class=\"ax-scheduler-truncate\">{{ spanning.appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, spanning.appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n ></ax-icon>\n }\n </span>\n </div>\n }\n </div>\n }\n\n @for (dayData of processedDayData(); track dayData.date.date.getTime()) {\n <div\n axDropZone\n #zone=\"axDropZone\"\n (onElementDrop)=\"handleDrop($event, dayData.date, resourceId)\"\n [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n class=\"ax-scheduler-timeline-year-slot-row\"\n (click)=\"handleSlotEvent($event, dayData.date)\"\n (dblclick)=\"handleSlotEvent($event, dayData.date)\"\n (contextmenu)=\"handleSlotEvent($event, dayData.date)\"\n [attr.data-slot-id]=\"dayData.date.format('YYYYMMDD')\"\n [attr.data-resource-id]=\"resourceId\"\n [style.pointer-events]=\"draggable() ? 'auto' : 'none'\"\n [style.--spanning-rows-count]=\"getMaxSpanningRowsForResource(resourceId)\"\n >\n <div class=\"ax-scheduler-timeline-appointment-container\">\n @for (\n segment of getAppointmentsForResourceAndDay(resourceId, dayData).visible;\n track segment.id + segment.originalStartDate.getTime()\n ) {\n <div\n axDrag\n [dragData]=\"segment\"\n [dragCursor]=\"'grab'\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"optimizedDragStartDelay()\"\n [dragDisabled]=\"!draggable() || segment.readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, segment)\"\n (dblclick)=\"handleAppointmentEvent($event, segment)\"\n (contextmenu)=\"handleAppointmentEvent($event, segment)\"\n [title]=\"\n tooltipTemplate()\n ? ''\n : segment.allDay\n ? segment.title +\n ' (' +\n (segment.originalStartDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ' - ' +\n (segment.originalEndDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ')'\n : segment.title +\n ' (' +\n (segment.originalStartDate | format: 'time' : { calendar: calendar() } | async) +\n ' - ' +\n (segment.originalEndDate | format: 'time' : { calendar: calendar() } | async) +\n ')'\n \"\n class=\"ax-scheduler-timeline-appointment {{\n segment.cssClass ?? 'ax-scheduler-' + (segment.priority ?? 'primary') + '-priority'\n }}\"\n [class.all-day-segment]=\"segment.allDay\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n [axTooltipContext]=\"segment\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ segment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, segment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </ax-title>\n <span class=\"ax-scheduler-timeline-appointment-time\">\n @if (segment.allDay) {\n {{\n segment.originalStartDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async\n }}\n @if (segment.originalStartDate.getTime() !== segment.originalEndDate.getTime()) {\n -\n {{\n segment.originalEndDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async\n }}\n }\n } @else {\n {{ segment.originalStartDate | format: 'time' : { calendar: calendar() } | async }}\n @if (segment.originalStartDate.getTime() !== segment.originalEndDate.getTime()) {\n -\n {{ segment.originalEndDate | format: 'time' : { calendar: calendar() } | async }}\n }\n }\n </span>\n </div>\n }\n\n <!-- Overflow Badge and Popover -->\n @if (getAppointmentsForResourceAndDay(resourceId, dayData).moreCount > 0) {\n <div #moreAppointments class=\"ax-scheduler-year-overflow-badge\" (click)=\"$event.stopPropagation()\">\n +{{\n '@acorex:common.general.more-items'\n | translate\n : { params: { number: getAppointmentsForResourceAndDay(resourceId, dayData).moreCount } }\n | async\n }}\n </div>\n <ax-popover [target]=\"moreAppointments\" placement=\"bottom-start\" trigger=\"click\">\n <div\n axDropZone\n [class.ax-state-readonly]=\"readonly()\"\n class=\"ax-scheduler-popover ax-scheduler-timeline-year-popover-appointment\"\n >\n @for (\n segment of getAppointmentsForResourceAndDay(resourceId, dayData).hidden;\n track segment.id + segment.originalStartDate.getTime()\n ) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"segment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"optimizedDragStartDelay()\"\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 tooltipTemplate()\n ? ''\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 class=\"ax-scheduler-popover-appointment {{\n segment.cssClass ?? 'ax-scheduler-' + (segment.priority ?? 'primary') + '-priority'\n }}\"\n [class.all-day-segment]=\"segment.allDay\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n [axTooltipContext]=\"segment\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ segment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, segment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </ax-title>\n @if (!segment.allDay) {\n <span class=\"ax-scheduler-timeline-appointment-time\">\n {{ segment.originalStartDate | format: 'time' : { calendar: calendar() } | async }}\n @if (\n !segment.allDay &&\n segment.originalStartDate.getTime() !== segment.originalEndDate.getTime()\n ) {\n -\n {{ segment.originalEndDate | format: 'time' : { 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 }\n </div>\n </div>\n}\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-border-style:solid;--tw-font-weight:initial;--tw-leading:initial;--tw-content:\"\"}}}@layer components{ax-scheduler-timeline-year-view{--ax-scheduler-timeline-spanning-row-height:1.5rem;--ax-scheduler-timeline-spanning-gap:.125rem;background-color:inherit;--ax-comp-scheduler-timeline-year-view-blocks-width:calc(var(--ax-comp-scheduler-timeline-view-blocks-width) / 2);flex-direction:column;height:100%;display:inline-flex;position:relative}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-wrapper{flex-direction:column;height:100%;display:flex;position:relative}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-spanning-layer{pointer-events:none;inset-inline-start:calc(var(--spacing,.25rem) * 0);inset-inline-end:calc(var(--spacing,.25rem) * 0);top:calc(var(--spacing,.25rem) * 16);z-index:5;padding-inline:calc(var(--spacing,.25rem) * .5);padding-block:var(--spacing,.25rem);align-content:flex-start;row-gap:var(--ax-scheduler-timeline-spanning-gap);grid-auto-rows:var(--ax-scheduler-timeline-spanning-row-height);grid-template-columns:repeat(var(--timeline-days-count,365),var(--ax-comp-scheduler-timeline-year-view-blocks-width));display:grid;position:absolute}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-spanning-layer .ax-scheduler-timeline-spanning-appointment{z-index:6;cursor:pointer;text-overflow:ellipsis;border-radius:var(--radius-sm,.25rem);padding-inline:var(--spacing,.25rem);padding-block:calc(var(--spacing,.25rem) * .5);white-space:nowrap;pointer-events:auto;align-items:center;margin-inline:.125rem;font-size:.7rem;display:flex;overflow:hidden}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-spanning-layer .ax-scheduler-timeline-spanning-appointment .ax-spanning-appointment-title{width:100%;height:100%;padding-inline:calc(var(--spacing,.25rem) * 2);justify-content:space-between;align-items:center;display:flex}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-spanning-layer .ax-scheduler-timeline-spanning-appointment .ax-spanning-appointment-title .ax-scheduler-truncate{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-spanning-layer .ax-scheduler-timeline-spanning-appointment .ax-spanning-appointment-title .ax-scheduler-action-icon{cursor:pointer;width:auto;flex-shrink:0;margin-inline-start:var(--spacing,.25rem)}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-spanning-layer .ax-scheduler-timeline-spanning-appointment.ax-spanning-start-clipped{border-start-start-radius:0;border-end-start-radius:0;margin-inline-start:0;position:relative}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-spanning-layer .ax-scheduler-timeline-spanning-appointment.ax-spanning-start-clipped:before{content:\"\\2190 \";top:calc(var(--spacing,.25rem) * .5);opacity:.7;font-size:.6rem;position:absolute;inset-inline-start:0}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-spanning-layer .ax-scheduler-timeline-spanning-appointment.ax-spanning-end-clipped{border-start-end-radius:0;border-end-end-radius:0;margin-inline-end:0;position:relative}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-spanning-layer .ax-scheduler-timeline-spanning-appointment.ax-spanning-end-clipped:after{content:\" \\2192\";top:calc(var(--spacing,.25rem) * .5);opacity:.7;font-size:.6rem;position:absolute;inset-inline-end:0}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-container{--tw-translate-z:0;height:100%;translate:var(--tw-translate-x) var(--tw-translate-y) var(--tw-translate-z);will-change:transform;display:flex}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-container .ax-scheduler-timeline-header{background-color:var(--ax-comp-scheduler-all-day-bg,inherit);width:100%;display:flex}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-container .ax-scheduler-timeline-header .ax-scheduler-year-header-date-day{height:calc(var(--spacing,.25rem) * 16);width:var(--ax-comp-scheduler-timeline-year-view-blocks-width);justify-content:center;align-items:flex-start;gap:var(--spacing,.25rem);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding-inline:calc(var(--spacing,.25rem) * 4);padding-block:var(--spacing,.25rem);flex-direction:column;display:flex;position:relative}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-container .ax-scheduler-timeline-header .ax-scheduler-year-header-date-day.ax-state-today{background-color:rgba(var(--ax-sys-color-primary-surface))}@supports (color:color-mix(in lab,red,red)){ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-container .ax-scheduler-timeline-header .ax-scheduler-year-header-date-day.ax-state-today{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 5%,transparent)}}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-container .ax-scheduler-timeline-header .ax-scheduler-year-header-date-day.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-container .ax-scheduler-timeline-header .ax-scheduler-year-header-date-day.ax-state-today .ax-scheduler-year-header-date-day-char{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-container .ax-scheduler-timeline-header .ax-scheduler-year-header-date-day.ax-state-today .ax-scheduler-year-header-date-day-num{--tw-font-weight:var(--font-weight-bold,700);font-weight:var(--font-weight-bold,700)}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-container .ax-scheduler-timeline-header .ax-scheduler-year-header-date-day.ax-state-holiday{color:var(--ax-scheduler-holiday-color,rgba(var(--ax-sys-color-danger-surface)))}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-container .ax-scheduler-timeline-header .ax-scheduler-year-header-date-day.ax-state-holiday.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-container .ax-scheduler-timeline-header .ax-scheduler-year-header-date-day .ax-scheduler-year-header-date-day-char{max-width:100%;font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));--tw-leading:calc(var(--spacing,.25rem) * 3.5);line-height:calc(var(--spacing,.25rem) * 3.5);--tw-font-weight:var(--font-weight-light,300);font-weight:var(--font-weight-light,300);position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 4)}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-container .ax-scheduler-timeline-header .ax-scheduler-year-header-date-day .ax-scheduler-year-header-date-day-num{font-size:var(--text-xl,1.25rem);line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75 / 1.25)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 4)}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-container .ax-scheduler-timeline-content{height:calc(100% - 4rem);width:var(--ax-comp-scheduler-timeline-year-view-blocks-width);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding-inline:var(--spacing,.25rem);padding-block:calc(var(--spacing,.25rem) * .5);padding-top:calc(var(--spanning-rows-count,0) * (var(--ax-scheduler-timeline-spanning-row-height) + var(--ax-scheduler-timeline-spanning-gap)) + .25rem);position:relative}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container{flex-direction:column;gap:1px;display:flex}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-timeline-appointment{--tw-translate-z:0;width:100%;translate:var(--tw-translate-x) var(--tw-translate-y) var(--tw-translate-z);gap:calc(var(--spacing,.25rem) * .5);border-radius:calc(var(--ax-sys-border-radius) / 2);padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:var(--spacing,.25rem);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));--tw-leading:calc(var(--spacing,.25rem) * 3.5);line-height:calc(var(--spacing,.25rem) * 3.5);will-change:transform;flex-direction:column;display:flex;overflow:hidden}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-timeline-appointment ax-title{--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600)}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-year-overflow-badge{margin-top:calc(var(--spacing,.25rem) * .5);cursor:pointer;padding-inline:0;padding-block:calc(var(--spacing,.25rem) * .5);text-align:start;font-size:.7rem}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-year-overflow-badge:hover{text-decoration-line:underline}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container{--tw-translate-z:0;height:100%;translate:var(--tw-translate-x) var(--tw-translate-y) var(--tw-translate-z);background-color:inherit;will-change:transform;flex-direction:column;display:flex;position:relative}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-header-sticky{z-index:10;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;display:flex;position:sticky;top:0}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-header-sticky .ax-scheduler-timeline-year-resource-header-placeholder{z-index:15;width:var(--ax-comp-scheduler-resource-header-width,8rem);min-width:var(--ax-comp-scheduler-resource-header-width,8rem);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;padding:calc(var(--spacing,.25rem) * 2);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);justify-content:center;align-items:center;display:flex;position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 0)}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-header-sticky .ax-scheduler-timeline-year-day-header{background-color:inherit;flex:1;display:flex;overflow-x:auto}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-header-sticky .ax-scheduler-timeline-year-day-header .ax-scheduler-year-header-date-day{height:calc(var(--spacing,.25rem) * 16);width:var(--ax-comp-scheduler-timeline-year-view-blocks-width);min-width:var(--ax-comp-scheduler-timeline-year-view-blocks-width);justify-content:center;align-items:flex-start;gap:var(--spacing,.25rem);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding-inline:calc(var(--spacing,.25rem) * 4);padding-block:var(--spacing,.25rem);flex-direction:column;display:flex;position:relative}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-header-sticky .ax-scheduler-timeline-year-day-header .ax-scheduler-year-header-date-day.ax-state-today{background-color:rgba(var(--ax-sys-color-primary-surface))}@supports (color:color-mix(in lab,red,red)){ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-header-sticky .ax-scheduler-timeline-year-day-header .ax-scheduler-year-header-date-day.ax-state-today{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 5%,transparent)}}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-header-sticky .ax-scheduler-timeline-year-day-header .ax-scheduler-year-header-date-day.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-header-sticky .ax-scheduler-timeline-year-day-header .ax-scheduler-year-header-date-day.ax-state-today .ax-scheduler-year-header-date-day-char{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-header-sticky .ax-scheduler-timeline-year-day-header .ax-scheduler-year-header-date-day.ax-state-today .ax-scheduler-year-header-date-day-num{--tw-font-weight:var(--font-weight-bold,700);font-weight:var(--font-weight-bold,700)}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-header-sticky .ax-scheduler-timeline-year-day-header .ax-scheduler-year-header-date-day.ax-state-holiday{color:var(--ax-scheduler-holiday-color,rgba(var(--ax-sys-color-danger-surface)))}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-header-sticky .ax-scheduler-timeline-year-day-header .ax-scheduler-year-header-date-day.ax-state-holiday.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-header-sticky .ax-scheduler-timeline-year-day-header .ax-scheduler-year-header-date-day .ax-scheduler-year-header-date-day-char{max-width:100%;font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));--tw-leading:calc(var(--spacing,.25rem) * 3.5);line-height:calc(var(--spacing,.25rem) * 3.5);--tw-font-weight:var(--font-weight-light,300);font-weight:var(--font-weight-light,300);position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 4)}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-header-sticky .ax-scheduler-timeline-year-day-header .ax-scheduler-year-header-date-day .ax-scheduler-year-header-date-day-num{font-size:var(--text-xl,1.25rem);line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75 / 1.25)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 4)}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-resource-rows{background-color:inherit;flex:1;position:relative;overflow:visible}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-resource-rows .ax-scheduler-timeline-year-resource-row{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;width:max-content;min-height:calc(var(--resource-spanning-rows-count,0) * (var(--ax-scheduler-timeline-spanning-row-height) + var(--ax-scheduler-timeline-spanning-gap)) + var(--ax-comp-scheduler-timeline-year-row-base-height,4rem));display:flex}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-resource-rows .ax-scheduler-timeline-year-resource-row .ax-scheduler-timeline-year-resource-header{width:var(--ax-comp-scheduler-resource-header-width,8rem);min-width:var(--ax-comp-scheduler-resource-header-width,8rem);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;padding:calc(var(--spacing,.25rem) * 2);justify-content:center;align-self:stretch;align-items:center;display:flex}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-resource-rows .ax-scheduler-timeline-year-resource-row .ax-scheduler-timeline-year-resource-header.ax-scheduler-timeline-year-resource-header-sticky{z-index:9;background-color:inherit;position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 0)}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-resource-rows .ax-scheduler-timeline-year-resource-row .ax-scheduler-timeline-year-resource-header .ax-scheduler-timeline-year-resource-title{text-align:center;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);overflow-wrap:break-word}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-resource-rows .ax-scheduler-timeline-year-resource-row .ax-scheduler-timeline-year-resource-content{background-color:inherit;flex:1;display:flex;position:relative}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-resource-rows .ax-scheduler-timeline-year-resource-row .ax-scheduler-timeline-year-resource-content .ax-scheduler-timeline-resource-spanning-layer{pointer-events:none;z-index:5;padding-inline:calc(var(--spacing,.25rem) * .5);padding-block:var(--spacing,.25rem);align-content:flex-start;row-gap:var(--ax-scheduler-timeline-spanning-gap);grid-auto-rows:var(--ax-scheduler-timeline-spanning-row-height);grid-template-columns:repeat(var(--timeline-days-count,365),var(--ax-comp-scheduler-timeline-year-view-blocks-width));inset-inline-start:calc(var(--spacing,.25rem) * 0);inset-inline-end:calc(var(--spacing,.25rem) * 0);display:grid;position:absolute;top:0}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-resource-rows .ax-scheduler-timeline-year-resource-row .ax-scheduler-timeline-year-resource-content .ax-scheduler-timeline-resource-spanning-layer .ax-scheduler-timeline-spanning-appointment{z-index:6;cursor:pointer;text-overflow:ellipsis;border-radius:var(--radius-sm,.25rem);padding-inline:var(--spacing,.25rem);padding-block:calc(var(--spacing,.25rem) * .5);white-space:nowrap;pointer-events:auto;align-items:center;margin-inline:.125rem;font-size:.7rem;display:flex;overflow:hidden}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-resource-rows .ax-scheduler-timeline-year-resource-row .ax-scheduler-timeline-year-resource-content .ax-scheduler-timeline-resource-spanning-layer .ax-scheduler-timeline-spanning-appointment .ax-spanning-appointment-title{width:100%;height:100%;padding-inline:calc(var(--spacing,.25rem) * 2);justify-content:space-between;align-items:center;display:flex}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-resource-rows .ax-scheduler-timeline-year-resource-row .ax-scheduler-timeline-year-resource-content .ax-scheduler-timeline-resource-spanning-layer .ax-scheduler-timeline-spanning-appointment .ax-spanning-appointment-title .ax-scheduler-truncate{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-resource-rows .ax-scheduler-timeline-year-resource-row .ax-scheduler-timeline-year-resource-content .ax-scheduler-timeline-resource-spanning-layer .ax-scheduler-timeline-spanning-appointment .ax-spanning-appointment-title .ax-scheduler-action-icon{cursor:pointer;width:auto;flex-shrink:0;margin-inline-start:var(--spacing,.25rem)}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-resource-rows .ax-scheduler-timeline-year-resource-row .ax-scheduler-timeline-year-resource-content .ax-scheduler-timeline-resource-spanning-layer .ax-scheduler-timeline-spanning-appointment.ax-spanning-start-clipped{border-start-start-radius:0;border-end-start-radius:0;margin-inline-start:0;position:relative}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-resource-rows .ax-scheduler-timeline-year-resource-row .ax-scheduler-timeline-year-resource-content .ax-scheduler-timeline-resource-spanning-layer .ax-scheduler-timeline-spanning-appointment.ax-spanning-start-clipped:before{content:\"\\2190 \";top:calc(var(--spacing,.25rem) * .5);opacity:.7;font-size:.6rem;position:absolute;inset-inline-start:0}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-resource-rows .ax-scheduler-timeline-year-resource-row .ax-scheduler-timeline-year-resource-content .ax-scheduler-timeline-resource-spanning-layer .ax-scheduler-timeline-spanning-appointment.ax-spanning-end-clipped{border-start-end-radius:0;border-end-end-radius:0;margin-inline-end:0;position:relative}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-resource-rows .ax-scheduler-timeline-year-resource-row .ax-scheduler-timeline-year-resource-content .ax-scheduler-timeline-resource-spanning-layer .ax-scheduler-timeline-spanning-appointment.ax-spanning-end-clipped:after{content:\" \\2192\";top:calc(var(--spacing,.25rem) * .5);opacity:.7;font-size:.6rem;position:absolute;inset-inline-end:0}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-resource-rows .ax-scheduler-timeline-year-resource-row .ax-scheduler-timeline-year-resource-content .ax-scheduler-timeline-year-slot-row{width:var(--ax-comp-scheduler-timeline-year-view-blocks-width);min-width:var(--ax-comp-scheduler-timeline-year-view-blocks-width);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;padding-bottom:var(--spacing,.25rem);padding-top:calc(var(--spanning-rows-count,0) * (var(--ax-scheduler-timeline-spanning-row-height) + var(--ax-scheduler-timeline-spanning-gap)) + .25rem);flex-direction:column;display:flex;position:relative}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-resource-rows .ax-scheduler-timeline-year-resource-row .ax-scheduler-timeline-year-resource-content .ax-scheduler-timeline-year-slot-row .ax-scheduler-timeline-appointment-container{gap:var(--ax-comp-scheduler-timeline-year-gap-height,.125rem);width:100%;padding-inline:var(--spacing,.25rem);flex-direction:column;display:flex}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-resource-rows .ax-scheduler-timeline-year-resource-row .ax-scheduler-timeline-year-resource-content .ax-scheduler-timeline-year-slot-row .ax-scheduler-timeline-appointment-container ax-popover{display:none}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-resource-rows .ax-scheduler-timeline-year-resource-row .ax-scheduler-timeline-year-resource-content .ax-scheduler-timeline-year-slot-row .ax-scheduler-timeline-appointment-container .ax-scheduler-timeline-appointment{min-height:calc(var(--spacing,.25rem) * 8);--tw-translate-z:0;width:100%;translate:var(--tw-translate-x) var(--tw-translate-y) var(--tw-translate-z);gap:calc(var(--spacing,.25rem) * .5);border-radius:calc(var(--ax-sys-border-radius) / 2);padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:var(--spacing,.25rem);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));--tw-leading:calc(var(--spacing,.25rem) * 3.5);line-height:calc(var(--spacing,.25rem) * 3.5);will-change:transform;flex-direction:column;flex-shrink:0;display:flex;overflow:hidden}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-resource-rows .ax-scheduler-timeline-year-resource-row .ax-scheduler-timeline-year-resource-content .ax-scheduler-timeline-year-slot-row .ax-scheduler-timeline-appointment-container .ax-scheduler-timeline-appointment ax-title{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-resource-rows .ax-scheduler-timeline-year-resource-row .ax-scheduler-timeline-year-resource-content .ax-scheduler-timeline-year-slot-row .ax-scheduler-timeline-appointment-container .ax-scheduler-year-overflow-badge{margin-top:calc(var(--spacing,.25rem) * .5);cursor:pointer;padding-inline:0;padding-block:calc(var(--spacing,.25rem) * .5);text-align:start;flex-shrink:0;font-size:.7rem}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-resource-rows .ax-scheduler-timeline-year-resource-row .ax-scheduler-timeline-year-resource-content .ax-scheduler-timeline-year-slot-row .ax-scheduler-timeline-appointment-container .ax-scheduler-year-overflow-badge:hover{text-decoration-line:underline}ax-scheduler-timeline-year-view:not(.ax-state-readonly) .ax-scheduler-timeline-appointment{cursor:pointer}ax-scheduler-timeline-year-view:not(.ax-state-readonly) .ax-scheduler-timeline-content,ax-scheduler-timeline-year-view:not(.ax-state-readonly) .ax-scheduler-timeline-year-slot-row{cursor:pointer;transition-property:background-color;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}:is(ax-scheduler-timeline-year-view:not(.ax-state-readonly) .ax-scheduler-timeline-content,ax-scheduler-timeline-year-view:not(.ax-state-readonly) .ax-scheduler-timeline-year-slot-row):hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg,var(--ax-sys-color-primary-surface),.1))}ax-scheduler-timeline-year-view ax-title{justify-content:space-between;display:flex}ax-scheduler-timeline-year-view ax-title .ax-scheduler-action-icon{cursor:pointer;width:auto}ax-scheduler-timeline-year-view .ax-scheduler-current-time-line{width:calc(var(--spacing,.25rem) * .5);top:0;bottom:0}ax-scheduler-timeline-year-view .ax-scheduler-current-time-line:before{content:var(--tw-content);inset-inline-start:-5px;top:calc(var(--spacing,.25rem) * -1.5)}ax-scheduler.ax-rtl ax-scheduler-timeline-year-view .ax-scheduler-timeline-spanning-appointment.ax-spanning-start-clipped:before{content:\"\\2192 \"}ax-scheduler.ax-rtl ax-scheduler-timeline-year-view .ax-scheduler-timeline-spanning-appointment.ax-spanning-end-clipped:after{content:\" \\2190\"}}@property --tw-translate-x{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-y{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-z{syntax:\"*\";inherits:false;initial-value:0}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-leading{syntax:\"*\";inherits:false}@property --tw-content{syntax:\"*\";inherits:false;initial-value:\"\"}\n/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["axDrag", "dragData", "dragDisabled", "dragTransition", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragClonedTemplate", "dragCursor", "dragBoundary", "dragTransitionDuration"], outputs: ["dragPositionChanged"] }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "directive", type: AXDropZoneDirective, selector: "[axDropZone]", inputs: ["dropZoneGroup"], outputs: ["onElementDrop", "onElementHover"], exportAs: ["axDropZone"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXFormatPipe, name: "format" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
3837
3859
|
}
|
|
3838
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
3860
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXSchedulerTimelineYearViewComponent, decorators: [{
|
|
3839
3861
|
type: Component,
|
|
3840
3862
|
args: [{ selector: 'ax-scheduler-timeline-year-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
3841
3863
|
'[class.ax-state-readonly]': 'readonly()',
|
|
@@ -3850,7 +3872,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
|
|
|
3850
3872
|
AXDropZoneDirective,
|
|
3851
3873
|
AXDecoratorIconComponent,
|
|
3852
3874
|
AXDecoratorGenericComponent,
|
|
3853
|
-
], providers: [{ provide: AXComponent, useExisting: AXSchedulerTimelineYearViewComponent }], template: "@if (resources().length === 0 || !showResourceHeaders()) {\n <!-- Original layout when no resources -->\n <div class=\"ax-scheduler-timeline-year-wrapper\">\n <!-- Spanning appointments layer -->\n @if (spanningAppointments().length > 0) {\n <div class=\"ax-scheduler-timeline-year-spanning-layer\" [style.--timeline-days-count]=\"processedDayData().length\">\n @for (spanning of spanningAppointments(); track spanning.appointment.id) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"spanning.appointment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"optimizedDragStartDelay()\"\n [dragDisabled]=\"!draggable() || spanning.appointment.readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, spanning.appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, spanning.appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, spanning.appointment)\"\n [title]=\"\n tooltipTemplate()\n ? ''\n : spanning.appointment.title +\n ' (' +\n (spanning.appointment.startDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ' - ' +\n (spanning.appointment.endDate | format: 'date' : { format: 'MMM d', calendar: calendar() } | async) +\n ')'\n \"\n class=\"ax-scheduler-timeline-spanning-appointment {{\n spanning.appointment.cssClass ??\n 'ax-scheduler-' + (spanning.appointment.priority ?? 'primary') + '-priority'\n }}\"\n [class.ax-spanning-start-clipped]=\"spanning.isStartClipped\"\n [class.ax-spanning-end-clipped]=\"spanning.isEndClipped\"\n [class.ax-state-active]=\"isActive(spanning.appointment.id)\"\n [style.grid-column]=\"spanning.startDayIndex + 1 + ' / span ' + spanning.spanCount\"\n [style.grid-row]=\"spanning.rowIndex + 1\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n [axTooltipContext]=\"spanning.appointment\"\n >\n <span class=\"ax-spanning-appointment-title\">\n <span class=\"ax-scheduler-truncate\">{{ spanning.appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, spanning.appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n ></ax-icon>\n }\n </span>\n </div>\n }\n </div>\n }\n\n <div class=\"ax-scheduler-timeline-year-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-state-today]=\"isToday(dayData.date)\"\n class=\"ax-scheduler-year-header-date-day {{\n dayData.holiday.state !== 'none' ? (dayData.holiday.holiday?.cssClass ?? 'ax-state-holiday') : ''\n }}\"\n >\n <span\n class=\"ax-scheduler-year-header-date-day-char ax-scheduler-truncate\"\n [axTooltip]=\"dayData.holiday.holiday?.title ?? ''\"\n >\n {{ dayData.date | format: 'date' : { format: 'MMMM', 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-year-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 [attr.data-slot-id]=\"dayData.date.format('YYYYMMDD')\"\n [style.pointer-events]=\"draggable() ? 'auto' : 'none'\"\n [style.--spanning-rows-count]=\"maxSpanningRows()\"\n >\n <!-- Current Time Line Indicator -->\n @if (\n showCurrentTimeIndicator() &&\n shouldShowCurrentTimeForDay(dayData.date) &&\n getCurrentTimePosition() !== null\n ) {\n <div\n class=\"ax-scheduler-current-time-line\"\n [style.inset-inline-start.%]=\"getCurrentTimePosition()\"\n #currentTimeLine\n ></div>\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 [dragData]=\"segment\"\n [dragCursor]=\"'grab'\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"optimizedDragStartDelay()\"\n [dragDisabled]=\"!draggable() || segment.readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, segment)\"\n (dblclick)=\"handleAppointmentEvent($event, segment)\"\n (contextmenu)=\"handleAppointmentEvent($event, segment)\"\n [title]=\"\n tooltipTemplate()\n ? ''\n : segment.title +\n ' (' +\n (segment.originalStartDate | format: 'time' : { calendar: calendar() } | async) +\n ' - ' +\n (segment.originalEndDate | format: 'time' : { calendar: calendar() } | async) +\n ')'\n \"\n class=\"ax-scheduler-timeline-appointment {{\n segment.cssClass ?? 'ax-scheduler-' + (segment.priority ?? 'primary') + '-priority'\n }}\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n [axTooltipContext]=\"segment\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ segment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, segment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </ax-title>\n <span class=\"ax-scheduler-timeline-appointment-time\">\n {{ segment.originalStartDate | format: 'time' : { calendar: calendar() } | async }}\n @if (segment.originalStartDate.getTime() !== segment.originalEndDate.getTime()) {\n -\n {{ segment.originalEndDate | format: 'time' : { calendar: calendar() } | async }}\n }\n </span>\n </div>\n }\n\n <!-- Overflow Badge and Popover -->\n @if (dayData.moreCount > 0) {\n <div #moreAppointments class=\"ax-scheduler-year-overflow-badge\" (click)=\"$event.stopPropagation()\">\n +{{\n '@acorex:common.general.more-items' | translate: { params: { number: dayData.moreCount } } | async\n }}\n </div>\n <ax-popover [target]=\"moreAppointments\" placement=\"bottom-start\" trigger=\"click\">\n <div\n axDropZone\n [class.ax-state-readonly]=\"readonly()\"\n class=\"ax-scheduler-popover ax-scheduler-timeline-year-popover-appointment\"\n >\n @for (\n segment of dayData.hiddenAppointments;\n track segment.id + segment.originalStartDate.getTime()\n ) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"segment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"optimizedDragStartDelay()\"\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 tooltipTemplate()\n ? ''\n : segment.title +\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 segment.cssClass ?? 'ax-scheduler-' + (segment.priority ?? 'primary') + '-priority'\n }}\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n [axTooltipContext]=\"segment\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ segment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, segment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </ax-title>\n <span class=\"ax-scheduler-timeline-appointment-time\">\n {{ segment.originalStartDate | format: 'time' : { calendar: calendar() } | async }}\n @if (segment.originalStartDate.getTime() !== segment.originalEndDate.getTime()) {\n -\n {{ segment.originalEndDate | format: 'time' : { calendar: calendar() } | async }}\n }\n </span>\n </div>\n }\n </div>\n </ax-popover>\n }\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n} @else {\n <!-- Resource-based layout -->\n <div class=\"ax-scheduler-timeline-year-resource-container\">\n <div class=\"ax-scheduler-timeline-year-header-sticky\">\n <div class=\"ax-scheduler-timeline-year-resource-header-placeholder\">\n <span>Resources</span>\n </div>\n\n <div class=\"ax-scheduler-timeline-year-day-header\">\n @for (dayData of processedDayData(); track dayData.date.date.getTime()) {\n <div\n [class.ax-state-today]=\"isToday(dayData.date)\"\n class=\"ax-scheduler-year-header-date-day {{\n dayData.holiday.state !== 'none' ? (dayData.holiday.holiday?.cssClass ?? 'ax-state-holiday') : ''\n }}\"\n >\n <span\n class=\"ax-scheduler-year-header-date-day-char ax-scheduler-truncate\"\n [axTooltip]=\"dayData.holiday.holiday?.title ?? ''\"\n >\n {{ dayData.date | format: 'date' : { format: 'MMMM', 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-year-header-date-day-num\">\n {{ dayData.date | format: 'date' : { format: 'DD', calendar: calendar() } | async }}\n </span>\n </div>\n }\n </div>\n </div>\n\n <div class=\"ax-scheduler-timeline-year-resource-rows\">\n <!-- Current Time Line Indicator -->\n @if (showCurrentTimeIndicator() && getCurrentTimePosition() !== null) {\n <div\n class=\"ax-scheduler-current-time-line\"\n [style.inset-inline-start.%]=\"getCurrentTimePosition()\"\n #currentTimeLine\n ></div>\n }\n\n @for (resourceId of resourceIds(); track resourceId) {\n <div\n class=\"ax-scheduler-timeline-year-resource-row\"\n [style.--resource-spanning-rows-count]=\"getMaxSpanningRowsForResource(resourceId)\"\n >\n <div class=\"ax-scheduler-timeline-year-resource-header ax-scheduler-timeline-year-resource-header-sticky\">\n @if (resourceTemplate() && typeof resourceTemplate() !== 'string') {\n <ng-container\n [ngTemplateOutlet]=\"$any(resourceTemplate())\"\n [ngTemplateOutletContext]=\"{\n $implicit: getResourceContext(resourceId),\n resource: getResourceContext(resourceId),\n resourceId: resourceId,\n }\"\n ></ng-container>\n } @else {\n <div class=\"ax-scheduler-timeline-year-resource-title\">\n {{ getResourceTitle(resourceId) | translate | async }}\n </div>\n }\n </div>\n\n <div class=\"ax-scheduler-timeline-year-resource-content\">\n <!-- Spanning appointments layer for this resource -->\n @if (getSpanningAppointmentsForResource(resourceId).length > 0) {\n <div\n class=\"ax-scheduler-timeline-resource-spanning-layer\"\n [style.--timeline-days-count]=\"processedDayData().length\"\n >\n @for (spanning of getSpanningAppointmentsForResource(resourceId); track spanning.appointment.id) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"spanning.appointment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"optimizedDragStartDelay()\"\n [dragDisabled]=\"!draggable() || spanning.appointment.readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, spanning.appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, spanning.appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, spanning.appointment)\"\n [title]=\"\n tooltipTemplate()\n ? ''\n : spanning.appointment.title +\n ' (' +\n (spanning.appointment.startDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ' - ' +\n (spanning.appointment.endDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ')'\n \"\n class=\"ax-scheduler-timeline-spanning-appointment {{\n spanning.appointment.cssClass ??\n 'ax-scheduler-' + (spanning.appointment.priority ?? 'primary') + '-priority'\n }}\"\n [class.ax-spanning-start-clipped]=\"spanning.isStartClipped\"\n [class.ax-spanning-end-clipped]=\"spanning.isEndClipped\"\n [class.ax-state-active]=\"isActive(spanning.appointment.id)\"\n [style.grid-column]=\"spanning.startDayIndex + 1 + ' / span ' + spanning.spanCount\"\n [style.grid-row]=\"spanning.rowIndex + 1\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n [axTooltipContext]=\"spanning.appointment\"\n >\n <span class=\"ax-spanning-appointment-title\">\n <span class=\"ax-scheduler-truncate\">{{ spanning.appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, spanning.appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n ></ax-icon>\n }\n </span>\n </div>\n }\n </div>\n }\n\n @for (dayData of processedDayData(); track dayData.date.date.getTime()) {\n <div\n axDropZone\n #zone=\"axDropZone\"\n (onElementDrop)=\"handleDrop($event, dayData.date, resourceId)\"\n [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n class=\"ax-scheduler-timeline-year-slot-row\"\n (click)=\"handleSlotEvent($event, dayData.date)\"\n (dblclick)=\"handleSlotEvent($event, dayData.date)\"\n (contextmenu)=\"handleSlotEvent($event, dayData.date)\"\n [attr.data-slot-id]=\"dayData.date.format('YYYYMMDD')\"\n [attr.data-resource-id]=\"resourceId\"\n [style.pointer-events]=\"draggable() ? 'auto' : 'none'\"\n [style.--spanning-rows-count]=\"getMaxSpanningRowsForResource(resourceId)\"\n >\n <div class=\"ax-scheduler-timeline-appointment-container\">\n @for (\n segment of getAppointmentsForResourceAndDay(resourceId, dayData).visible;\n track segment.id + segment.originalStartDate.getTime()\n ) {\n <div\n axDrag\n [dragData]=\"segment\"\n [dragCursor]=\"'grab'\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"optimizedDragStartDelay()\"\n [dragDisabled]=\"!draggable() || segment.readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, segment)\"\n (dblclick)=\"handleAppointmentEvent($event, segment)\"\n (contextmenu)=\"handleAppointmentEvent($event, segment)\"\n [title]=\"\n tooltipTemplate()\n ? ''\n : segment.allDay\n ? segment.title +\n ' (' +\n (segment.originalStartDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ' - ' +\n (segment.originalEndDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ')'\n : segment.title +\n ' (' +\n (segment.originalStartDate | format: 'time' : { calendar: calendar() } | async) +\n ' - ' +\n (segment.originalEndDate | format: 'time' : { calendar: calendar() } | async) +\n ')'\n \"\n class=\"ax-scheduler-timeline-appointment {{\n segment.cssClass ?? 'ax-scheduler-' + (segment.priority ?? 'primary') + '-priority'\n }}\"\n [class.all-day-segment]=\"segment.allDay\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n [axTooltipContext]=\"segment\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ segment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, segment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </ax-title>\n <span class=\"ax-scheduler-timeline-appointment-time\">\n @if (segment.allDay) {\n {{\n segment.originalStartDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async\n }}\n @if (segment.originalStartDate.getTime() !== segment.originalEndDate.getTime()) {\n -\n {{\n segment.originalEndDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async\n }}\n }\n } @else {\n {{ segment.originalStartDate | format: 'time' : { calendar: calendar() } | async }}\n @if (segment.originalStartDate.getTime() !== segment.originalEndDate.getTime()) {\n -\n {{ segment.originalEndDate | format: 'time' : { calendar: calendar() } | async }}\n }\n }\n </span>\n </div>\n }\n\n <!-- Overflow Badge and Popover -->\n @if (getAppointmentsForResourceAndDay(resourceId, dayData).moreCount > 0) {\n <div #moreAppointments class=\"ax-scheduler-year-overflow-badge\" (click)=\"$event.stopPropagation()\">\n +{{\n '@acorex:common.general.more-items'\n | translate\n : { params: { number: getAppointmentsForResourceAndDay(resourceId, dayData).moreCount } }\n | async\n }}\n </div>\n <ax-popover [target]=\"moreAppointments\" placement=\"bottom-start\" trigger=\"click\">\n <div\n axDropZone\n [class.ax-state-readonly]=\"readonly()\"\n class=\"ax-scheduler-popover ax-scheduler-timeline-year-popover-appointment\"\n >\n @for (\n segment of getAppointmentsForResourceAndDay(resourceId, dayData).hidden;\n track segment.id + segment.originalStartDate.getTime()\n ) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"segment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"optimizedDragStartDelay()\"\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 tooltipTemplate()\n ? ''\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 class=\"ax-scheduler-popover-appointment {{\n segment.cssClass ?? 'ax-scheduler-' + (segment.priority ?? 'primary') + '-priority'\n }}\"\n [class.all-day-segment]=\"segment.allDay\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n [axTooltipContext]=\"segment\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ segment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, segment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </ax-title>\n @if (!segment.allDay) {\n <span class=\"ax-scheduler-timeline-appointment-time\">\n {{ segment.originalStartDate | format: 'time' : { calendar: calendar() } | async }}\n @if (\n !segment.allDay &&\n segment.originalStartDate.getTime() !== segment.originalEndDate.getTime()\n ) {\n -\n {{ segment.originalEndDate | format: 'time' : { 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 }\n </div>\n </div>\n}\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-border-style:solid;--tw-font-weight:initial;--tw-leading:initial;--tw-content:\"\"}}}@layer components{ax-scheduler-timeline-year-view{background-color:inherit;--ax-comp-scheduler-timeline-year-view-blocks-width:calc(var(--ax-comp-scheduler-timeline-view-blocks-width) / 2);height:100%;display:inline-flex;position:relative}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-container{--tw-translate-z:calc(var(--spacing,.25rem) * 0);height:100%;translate:var(--tw-translate-x) var(--tw-translate-y) var(--tw-translate-z);will-change:transform;display:flex}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-container .ax-scheduler-timeline-header{background-color:var(--ax-comp-scheduler-all-day-bg,inherit);width:100%;display:flex}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-container .ax-scheduler-timeline-header .ax-scheduler-year-header-date-day{height:calc(var(--spacing,.25rem) * 16);width:var(--ax-comp-scheduler-timeline-year-view-blocks-width);justify-content:center;align-items:flex-start;gap:calc(var(--spacing,.25rem) * 1);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding-inline:calc(var(--spacing,.25rem) * 4);padding-block:calc(var(--spacing,.25rem) * 1);flex-direction:column;display:flex;position:relative}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-container .ax-scheduler-timeline-header .ax-scheduler-year-header-date-day.ax-state-today{background-color:rgba(var(--ax-sys-color-primary-surface))}@supports (color:color-mix(in lab,red,red)){ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-container .ax-scheduler-timeline-header .ax-scheduler-year-header-date-day.ax-state-today{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 5%,transparent)}}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-container .ax-scheduler-timeline-header .ax-scheduler-year-header-date-day.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-container .ax-scheduler-timeline-header .ax-scheduler-year-header-date-day.ax-state-today .ax-scheduler-year-header-date-day-char{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-container .ax-scheduler-timeline-header .ax-scheduler-year-header-date-day.ax-state-today .ax-scheduler-year-header-date-day-num{--tw-font-weight:var(--font-weight-bold,700);font-weight:var(--font-weight-bold,700)}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-container .ax-scheduler-timeline-header .ax-scheduler-year-header-date-day.ax-state-holiday{color:rgba(var(--ax-sys-color-danger-600))}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-container .ax-scheduler-timeline-header .ax-scheduler-year-header-date-day.ax-state-holiday.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-container .ax-scheduler-timeline-header .ax-scheduler-year-header-date-day .ax-scheduler-year-header-date-day-char{max-width:100%;font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));--tw-leading:calc(var(--spacing,.25rem) * 3.5);line-height:calc(var(--spacing,.25rem) * 3.5);--tw-font-weight:var(--font-weight-light,300);font-weight:var(--font-weight-light,300);position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 4)}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-container .ax-scheduler-timeline-header .ax-scheduler-year-header-date-day .ax-scheduler-year-header-date-day-num{font-size:var(--text-xl,1.25rem);line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75 / 1.25)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 4)}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-container .ax-scheduler-timeline-content{height:calc(100% - 4rem);width:var(--ax-comp-scheduler-timeline-year-view-blocks-width);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding-inline:calc(var(--spacing,.25rem) * 1);padding-block:calc(var(--spacing,.25rem) * .5);position:relative}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container{flex-direction:column;gap:1px;display:flex}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-timeline-appointment{--tw-translate-z:calc(var(--spacing,.25rem) * 0);width:100%;translate:var(--tw-translate-x) var(--tw-translate-y) var(--tw-translate-z);gap:calc(var(--spacing,.25rem) * .5);border-radius:calc(var(--ax-sys-border-radius) / 2);padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:calc(var(--spacing,.25rem) * 1);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));--tw-leading:calc(var(--spacing,.25rem) * 3.5);line-height:calc(var(--spacing,.25rem) * 3.5);will-change:transform;flex-direction:column;display:flex;overflow:hidden}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-timeline-appointment ax-title{--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600)}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-year-overflow-badge{margin-top:calc(var(--spacing,.25rem) * .5);cursor:pointer;padding-inline:calc(var(--spacing,.25rem) * 0);padding-block:calc(var(--spacing,.25rem) * 1);text-align:start;font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)))}@media(hover:hover){ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-year-overflow-badge:hover{text-decoration-line:underline}}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container{--tw-translate-z:calc(var(--spacing,.25rem) * 0);height:100%;translate:var(--tw-translate-x) var(--tw-translate-y) var(--tw-translate-z);background-color:inherit;will-change:transform;flex-direction:column;display:flex;position:relative}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-header-sticky{top:calc(var(--spacing,.25rem) * 0);z-index:10;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;display:flex;position:sticky}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-header-sticky .ax-scheduler-timeline-year-resource-header-placeholder{z-index:15;width:var(--ax-comp-scheduler-resource-header-width,8rem);min-width:var(--ax-comp-scheduler-resource-header-width,8rem);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;padding:calc(var(--spacing,.25rem) * 2);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);justify-content:center;align-items:center;display:flex;position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 0)}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-header-sticky .ax-scheduler-timeline-year-day-header{background-color:inherit;flex:1;display:flex;overflow-x:auto}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-header-sticky .ax-scheduler-timeline-year-day-header .ax-scheduler-year-header-date-day{height:calc(var(--spacing,.25rem) * 16);width:var(--ax-comp-scheduler-timeline-year-view-blocks-width);min-width:var(--ax-comp-scheduler-timeline-year-view-blocks-width);justify-content:center;align-items:flex-start;gap:calc(var(--spacing,.25rem) * 1);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding-inline:calc(var(--spacing,.25rem) * 4);padding-block:calc(var(--spacing,.25rem) * 1);flex-direction:column;display:flex;position:relative}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-header-sticky .ax-scheduler-timeline-year-day-header .ax-scheduler-year-header-date-day.ax-state-today{background-color:rgba(var(--ax-sys-color-primary-surface))}@supports (color:color-mix(in lab,red,red)){ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-header-sticky .ax-scheduler-timeline-year-day-header .ax-scheduler-year-header-date-day.ax-state-today{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 5%,transparent)}}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-header-sticky .ax-scheduler-timeline-year-day-header .ax-scheduler-year-header-date-day.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-header-sticky .ax-scheduler-timeline-year-day-header .ax-scheduler-year-header-date-day.ax-state-today .ax-scheduler-year-header-date-day-char{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-header-sticky .ax-scheduler-timeline-year-day-header .ax-scheduler-year-header-date-day.ax-state-today .ax-scheduler-year-header-date-day-num{--tw-font-weight:var(--font-weight-bold,700);font-weight:var(--font-weight-bold,700)}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-header-sticky .ax-scheduler-timeline-year-day-header .ax-scheduler-year-header-date-day.ax-state-holiday{color:rgba(var(--ax-sys-color-danger-600))}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-header-sticky .ax-scheduler-timeline-year-day-header .ax-scheduler-year-header-date-day.ax-state-holiday.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-header-sticky .ax-scheduler-timeline-year-day-header .ax-scheduler-year-header-date-day .ax-scheduler-year-header-date-day-char{max-width:100%;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-leading:calc(var(--spacing,.25rem) * 3.5);line-height:calc(var(--spacing,.25rem) * 3.5);--tw-font-weight:var(--font-weight-light,300);font-weight:var(--font-weight-light,300);position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 4)}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-header-sticky .ax-scheduler-timeline-year-day-header .ax-scheduler-year-header-date-day .ax-scheduler-year-header-date-day-num{font-size:var(--text-xl,1.25rem);line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75 / 1.25)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 4)}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-resource-rows{background-color:inherit;flex:1;position:relative;overflow:visible}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-resource-rows .ax-scheduler-timeline-year-resource-row{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;width:max-content;min-height:auto;display:flex}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-resource-rows .ax-scheduler-timeline-year-resource-row .ax-scheduler-timeline-year-resource-header{min-height:2.625rem;width:var(--ax-comp-scheduler-resource-header-width,8rem);min-width:var(--ax-comp-scheduler-resource-header-width,8rem);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;padding:calc(var(--spacing,.25rem) * 2);justify-content:center;align-items:center;display:flex}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-resource-rows .ax-scheduler-timeline-year-resource-row .ax-scheduler-timeline-year-resource-header.ax-scheduler-timeline-year-resource-header-sticky{z-index:9;background-color:inherit;position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 0)}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-resource-rows .ax-scheduler-timeline-year-resource-row .ax-scheduler-timeline-year-resource-header .ax-scheduler-timeline-year-resource-title{text-align:center;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);overflow-wrap:break-word}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-resource-rows .ax-scheduler-timeline-year-resource-row .ax-scheduler-timeline-year-resource-content{background-color:inherit;flex:1;display:flex}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-resource-rows .ax-scheduler-timeline-year-resource-row .ax-scheduler-timeline-year-resource-content .ax-scheduler-timeline-year-slot-row{width:var(--ax-comp-scheduler-timeline-year-view-blocks-width);min-width:var(--ax-comp-scheduler-timeline-year-view-blocks-width);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;flex:1;display:flex;position:relative}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-resource-rows .ax-scheduler-timeline-year-resource-row .ax-scheduler-timeline-year-resource-content .ax-scheduler-timeline-year-slot-row .ax-scheduler-timeline-appointment-container{gap:var(--ax-comp-scheduler-timeline-year-gap-height,.125rem);width:100%;min-height:100%;padding-inline:calc(var(--spacing,.25rem) * 1);padding-block:calc(var(--spacing,.25rem) * .5);flex-direction:column;display:flex;overflow:visible}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-resource-rows .ax-scheduler-timeline-year-resource-row .ax-scheduler-timeline-year-resource-content .ax-scheduler-timeline-year-slot-row .ax-scheduler-timeline-appointment-container ax-popover{display:none}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-resource-rows .ax-scheduler-timeline-year-resource-row .ax-scheduler-timeline-year-resource-content .ax-scheduler-timeline-year-slot-row .ax-scheduler-timeline-appointment-container .ax-scheduler-timeline-appointment{--tw-translate-z:calc(var(--spacing,.25rem) * 0);width:100%;translate:var(--tw-translate-x) var(--tw-translate-y) var(--tw-translate-z);gap:calc(var(--spacing,.25rem) * .5);border-radius:calc(var(--ax-sys-border-radius) / 2);padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:calc(var(--spacing,.25rem) * 1);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));--tw-leading:calc(var(--spacing,.25rem) * 3.5);line-height:calc(var(--spacing,.25rem) * 3.5);will-change:transform;flex-direction:column;flex-shrink:0;display:flex;overflow:hidden}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-resource-rows .ax-scheduler-timeline-year-resource-row .ax-scheduler-timeline-year-resource-content .ax-scheduler-timeline-year-slot-row .ax-scheduler-timeline-appointment-container .ax-scheduler-timeline-appointment ax-title{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-resource-rows .ax-scheduler-timeline-year-resource-row .ax-scheduler-timeline-year-resource-content .ax-scheduler-timeline-year-slot-row .ax-scheduler-timeline-appointment-container .ax-scheduler-year-overflow-badge{margin-top:calc(var(--spacing,.25rem) * .5);cursor:pointer;padding-inline:calc(var(--spacing,.25rem) * 0);padding-block:calc(var(--spacing,.25rem) * .5);text-align:start;font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));flex-shrink:0}@media(hover:hover){ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-resource-rows .ax-scheduler-timeline-year-resource-row .ax-scheduler-timeline-year-resource-content .ax-scheduler-timeline-year-slot-row .ax-scheduler-timeline-appointment-container .ax-scheduler-year-overflow-badge:hover{text-decoration-line:underline}}ax-scheduler-timeline-year-view:not(.ax-state-readonly) .ax-scheduler-timeline-appointment{cursor:pointer}ax-scheduler-timeline-year-view:not(.ax-state-readonly) .ax-scheduler-timeline-content,ax-scheduler-timeline-year-view:not(.ax-state-readonly) .ax-scheduler-timeline-year-slot-row{cursor:pointer;transition-property:background-color;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}@media(hover:hover){:is(ax-scheduler-timeline-year-view:not(.ax-state-readonly) .ax-scheduler-timeline-content,ax-scheduler-timeline-year-view:not(.ax-state-readonly) .ax-scheduler-timeline-year-slot-row):hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg,var(--ax-sys-color-primary-surface),.1))}}ax-scheduler-timeline-year-view ax-title{justify-content:space-between;display:flex}ax-scheduler-timeline-year-view ax-title .ax-scheduler-action-icon{cursor:pointer;width:100%}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-popover-appointment{font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)))}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-popover-appointment .ax-scheduler-popover-appointment{margin-bottom:calc(var(--spacing,.25rem) * 1);border-radius:calc(var(--ax-sys-border-radius) / 2);padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:calc(var(--spacing,.25rem) * 1);flex-direction:column;display:flex;overflow:hidden}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-popover-appointment .ax-scheduler-popover-appointment:last-child{margin-bottom:calc(var(--spacing,.25rem) * 0)}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-popover-appointment .ax-scheduler-popover-appointment .ax-appointment-chip-title{margin-bottom:calc(var(--spacing,.25rem) * .5);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600)}ax-scheduler-timeline-year-view .ax-scheduler-current-time-line{top:calc(var(--spacing,.25rem) * 0);bottom:calc(var(--spacing,.25rem) * 0);width:calc(var(--spacing,.25rem) * .5)}ax-scheduler-timeline-year-view .ax-scheduler-current-time-line:before{content:var(--tw-content);inset-inline-start:-5px;top:calc(var(--spacing,.25rem) * -1.5)}}@property --tw-translate-x{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-y{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-z{syntax:\"*\";inherits:false;initial-value:0}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-leading{syntax:\"*\";inherits:false}@property --tw-content{syntax:\"*\";inherits:false;initial-value:\"\"}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"] }]
|
|
3875
|
+
], providers: [{ provide: AXComponent, useExisting: AXSchedulerTimelineYearViewComponent }], template: "@if (resources().length === 0 || !showResourceHeaders()) {\n <!-- Original layout when no resources -->\n <div class=\"ax-scheduler-timeline-year-wrapper\">\n <!-- Spanning appointments layer -->\n @if (spanningAppointments().length > 0) {\n <div class=\"ax-scheduler-timeline-year-spanning-layer\" [style.--timeline-days-count]=\"processedDayData().length\">\n @for (spanning of spanningAppointments(); track spanning.appointment.id) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"spanning.appointment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"optimizedDragStartDelay()\"\n [dragDisabled]=\"!draggable() || spanning.appointment.readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, spanning.appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, spanning.appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, spanning.appointment)\"\n [title]=\"\n tooltipTemplate()\n ? ''\n : spanning.appointment.title +\n ' (' +\n (spanning.appointment.startDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ' - ' +\n (spanning.appointment.endDate | format: 'date' : { format: 'MMM d', calendar: calendar() } | async) +\n ')'\n \"\n class=\"ax-scheduler-timeline-spanning-appointment {{\n spanning.appointment.cssClass ??\n 'ax-scheduler-' + (spanning.appointment.priority ?? 'primary') + '-priority'\n }}\"\n [class.ax-spanning-start-clipped]=\"spanning.isStartClipped\"\n [class.ax-spanning-end-clipped]=\"spanning.isEndClipped\"\n [class.ax-state-active]=\"isActive(spanning.appointment.id)\"\n [style.grid-column]=\"spanning.startDayIndex + 1 + ' / span ' + spanning.spanCount\"\n [style.grid-row]=\"spanning.rowIndex + 1\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n [axTooltipContext]=\"spanning.appointment\"\n >\n <span class=\"ax-spanning-appointment-title\">\n <span class=\"ax-scheduler-truncate\">{{ spanning.appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, spanning.appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n ></ax-icon>\n }\n </span>\n </div>\n }\n </div>\n }\n\n <div class=\"ax-scheduler-timeline-year-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-state-today]=\"isToday(dayData.date)\"\n class=\"ax-scheduler-year-header-date-day {{\n dayData.holiday.state !== 'none' ? (dayData.holiday.holiday?.cssClass ?? 'ax-state-holiday') : ''\n }}\"\n [style.--ax-scheduler-holiday-color]=\"dayData.holiday.holiday?.color ?? null\"\n >\n <span\n class=\"ax-scheduler-year-header-date-day-char ax-scheduler-truncate\"\n [axTooltip]=\"(dayData.holiday.holiday?.description ?? dayData.holiday.holiday?.title ?? '') | translate | async\"\n >\n {{ dayData.date | format: 'date' : { format: 'MMMM', calendar: calendar() } | async }}\n @if (dayData.holiday.state === 'holiday' && dayData.holiday.holiday.title) {\n ( {{ dayData.holiday.holiday.title | translate | async }} )\n }\n </span>\n <span class=\"ax-scheduler-year-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 [attr.data-slot-id]=\"dayData.date.format('YYYYMMDD')\"\n [style.pointer-events]=\"draggable() ? 'auto' : 'none'\"\n [style.--spanning-rows-count]=\"maxSpanningRows()\"\n >\n <!-- Current Time Line Indicator -->\n @if (\n showCurrentTimeIndicator() &&\n shouldShowCurrentTimeForDay(dayData.date) &&\n getCurrentTimePosition() !== null\n ) {\n <div\n class=\"ax-scheduler-current-time-line\"\n [style.inset-inline-start.%]=\"getCurrentTimePosition()\"\n #currentTimeLine\n ></div>\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 [dragData]=\"segment\"\n [dragCursor]=\"'grab'\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"optimizedDragStartDelay()\"\n [dragDisabled]=\"!draggable() || segment.readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, segment)\"\n (dblclick)=\"handleAppointmentEvent($event, segment)\"\n (contextmenu)=\"handleAppointmentEvent($event, segment)\"\n [title]=\"\n tooltipTemplate()\n ? ''\n : segment.title +\n ' (' +\n (segment.originalStartDate | format: 'time' : { calendar: calendar() } | async) +\n ' - ' +\n (segment.originalEndDate | format: 'time' : { calendar: calendar() } | async) +\n ')'\n \"\n class=\"ax-scheduler-timeline-appointment {{\n segment.cssClass ?? 'ax-scheduler-' + (segment.priority ?? 'primary') + '-priority'\n }}\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n [axTooltipContext]=\"segment\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ segment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, segment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </ax-title>\n <span class=\"ax-scheduler-timeline-appointment-time\">\n {{ segment.originalStartDate | format: 'time' : { calendar: calendar() } | async }}\n @if (segment.originalStartDate.getTime() !== segment.originalEndDate.getTime()) {\n -\n {{ segment.originalEndDate | format: 'time' : { calendar: calendar() } | async }}\n }\n </span>\n </div>\n }\n\n <!-- Overflow Badge and Popover -->\n @if (dayData.moreCount > 0) {\n <div #moreAppointments class=\"ax-scheduler-year-overflow-badge\" (click)=\"$event.stopPropagation()\">\n +{{\n '@acorex:common.general.more-items' | translate: { params: { number: dayData.moreCount } } | async\n }}\n </div>\n <ax-popover [target]=\"moreAppointments\" placement=\"bottom-start\" trigger=\"click\">\n <div\n axDropZone\n [class.ax-state-readonly]=\"readonly()\"\n class=\"ax-scheduler-popover ax-scheduler-timeline-year-popover-appointment\"\n >\n @for (\n segment of dayData.hiddenAppointments;\n track segment.id + segment.originalStartDate.getTime()\n ) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"segment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"optimizedDragStartDelay()\"\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 tooltipTemplate()\n ? ''\n : segment.title +\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 segment.cssClass ?? 'ax-scheduler-' + (segment.priority ?? 'primary') + '-priority'\n }}\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n [axTooltipContext]=\"segment\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ segment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, segment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </ax-title>\n <span class=\"ax-scheduler-timeline-appointment-time\">\n {{ segment.originalStartDate | format: 'time' : { calendar: calendar() } | async }}\n @if (segment.originalStartDate.getTime() !== segment.originalEndDate.getTime()) {\n -\n {{ segment.originalEndDate | format: 'time' : { calendar: calendar() } | async }}\n }\n </span>\n </div>\n }\n </div>\n </ax-popover>\n }\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n} @else {\n <!-- Resource-based layout -->\n <div class=\"ax-scheduler-timeline-year-resource-container\">\n <div class=\"ax-scheduler-timeline-year-header-sticky\">\n <div class=\"ax-scheduler-timeline-year-resource-header-placeholder\">\n <span>Resources</span>\n </div>\n\n <div class=\"ax-scheduler-timeline-year-day-header\">\n @for (dayData of processedDayData(); track dayData.date.date.getTime()) {\n <div\n [class.ax-state-today]=\"isToday(dayData.date)\"\n class=\"ax-scheduler-year-header-date-day {{\n dayData.holiday.state !== 'none' ? (dayData.holiday.holiday?.cssClass ?? 'ax-state-holiday') : ''\n }}\"\n [style.--ax-scheduler-holiday-color]=\"dayData.holiday.holiday?.color ?? null\"\n >\n <span\n class=\"ax-scheduler-year-header-date-day-char ax-scheduler-truncate\"\n [axTooltip]=\"(dayData.holiday.holiday?.description ?? dayData.holiday.holiday?.title ?? '') | translate | async\"\n >\n {{ dayData.date | format: 'date' : { format: 'MMMM', calendar: calendar() } | async }}\n @if (dayData.holiday.state === 'holiday' && dayData.holiday.holiday.title) {\n ( {{ dayData.holiday.holiday.title | translate | async }} )\n }\n </span>\n <span class=\"ax-scheduler-year-header-date-day-num\">\n {{ dayData.date | format: 'date' : { format: 'DD', calendar: calendar() } | async }}\n </span>\n </div>\n }\n </div>\n </div>\n\n <div class=\"ax-scheduler-timeline-year-resource-rows\">\n <!-- Current Time Line Indicator -->\n @if (showCurrentTimeIndicator() && getCurrentTimePosition() !== null) {\n <div\n class=\"ax-scheduler-current-time-line\"\n [style.inset-inline-start.%]=\"getCurrentTimePosition()\"\n #currentTimeLine\n ></div>\n }\n\n @for (resourceId of resourceIds(); track resourceId) {\n <div\n class=\"ax-scheduler-timeline-year-resource-row\"\n [style.--resource-spanning-rows-count]=\"getMaxSpanningRowsForResource(resourceId)\"\n >\n <div class=\"ax-scheduler-timeline-year-resource-header ax-scheduler-timeline-year-resource-header-sticky\">\n @if (resourceTemplate() && typeof resourceTemplate() !== 'string') {\n <ng-container\n [ngTemplateOutlet]=\"$any(resourceTemplate())\"\n [ngTemplateOutletContext]=\"{\n $implicit: getResourceContext(resourceId),\n resource: getResourceContext(resourceId),\n resourceId: resourceId,\n }\"\n ></ng-container>\n } @else {\n <div class=\"ax-scheduler-timeline-year-resource-title\">\n {{ getResourceTitle(resourceId) | translate | async }}\n </div>\n }\n </div>\n\n <div class=\"ax-scheduler-timeline-year-resource-content\">\n <!-- Spanning appointments layer for this resource -->\n @if (getSpanningAppointmentsForResource(resourceId).length > 0) {\n <div\n class=\"ax-scheduler-timeline-resource-spanning-layer\"\n [style.--timeline-days-count]=\"processedDayData().length\"\n >\n @for (spanning of getSpanningAppointmentsForResource(resourceId); track spanning.appointment.id) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"spanning.appointment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"optimizedDragStartDelay()\"\n [dragDisabled]=\"!draggable() || spanning.appointment.readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, spanning.appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, spanning.appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, spanning.appointment)\"\n [title]=\"\n tooltipTemplate()\n ? ''\n : spanning.appointment.title +\n ' (' +\n (spanning.appointment.startDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ' - ' +\n (spanning.appointment.endDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ')'\n \"\n class=\"ax-scheduler-timeline-spanning-appointment {{\n spanning.appointment.cssClass ??\n 'ax-scheduler-' + (spanning.appointment.priority ?? 'primary') + '-priority'\n }}\"\n [class.ax-spanning-start-clipped]=\"spanning.isStartClipped\"\n [class.ax-spanning-end-clipped]=\"spanning.isEndClipped\"\n [class.ax-state-active]=\"isActive(spanning.appointment.id)\"\n [style.grid-column]=\"spanning.startDayIndex + 1 + ' / span ' + spanning.spanCount\"\n [style.grid-row]=\"spanning.rowIndex + 1\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n [axTooltipContext]=\"spanning.appointment\"\n >\n <span class=\"ax-spanning-appointment-title\">\n <span class=\"ax-scheduler-truncate\">{{ spanning.appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, spanning.appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n ></ax-icon>\n }\n </span>\n </div>\n }\n </div>\n }\n\n @for (dayData of processedDayData(); track dayData.date.date.getTime()) {\n <div\n axDropZone\n #zone=\"axDropZone\"\n (onElementDrop)=\"handleDrop($event, dayData.date, resourceId)\"\n [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n class=\"ax-scheduler-timeline-year-slot-row\"\n (click)=\"handleSlotEvent($event, dayData.date)\"\n (dblclick)=\"handleSlotEvent($event, dayData.date)\"\n (contextmenu)=\"handleSlotEvent($event, dayData.date)\"\n [attr.data-slot-id]=\"dayData.date.format('YYYYMMDD')\"\n [attr.data-resource-id]=\"resourceId\"\n [style.pointer-events]=\"draggable() ? 'auto' : 'none'\"\n [style.--spanning-rows-count]=\"getMaxSpanningRowsForResource(resourceId)\"\n >\n <div class=\"ax-scheduler-timeline-appointment-container\">\n @for (\n segment of getAppointmentsForResourceAndDay(resourceId, dayData).visible;\n track segment.id + segment.originalStartDate.getTime()\n ) {\n <div\n axDrag\n [dragData]=\"segment\"\n [dragCursor]=\"'grab'\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"optimizedDragStartDelay()\"\n [dragDisabled]=\"!draggable() || segment.readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, segment)\"\n (dblclick)=\"handleAppointmentEvent($event, segment)\"\n (contextmenu)=\"handleAppointmentEvent($event, segment)\"\n [title]=\"\n tooltipTemplate()\n ? ''\n : segment.allDay\n ? segment.title +\n ' (' +\n (segment.originalStartDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ' - ' +\n (segment.originalEndDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ')'\n : segment.title +\n ' (' +\n (segment.originalStartDate | format: 'time' : { calendar: calendar() } | async) +\n ' - ' +\n (segment.originalEndDate | format: 'time' : { calendar: calendar() } | async) +\n ')'\n \"\n class=\"ax-scheduler-timeline-appointment {{\n segment.cssClass ?? 'ax-scheduler-' + (segment.priority ?? 'primary') + '-priority'\n }}\"\n [class.all-day-segment]=\"segment.allDay\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n [axTooltipContext]=\"segment\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ segment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, segment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </ax-title>\n <span class=\"ax-scheduler-timeline-appointment-time\">\n @if (segment.allDay) {\n {{\n segment.originalStartDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async\n }}\n @if (segment.originalStartDate.getTime() !== segment.originalEndDate.getTime()) {\n -\n {{\n segment.originalEndDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async\n }}\n }\n } @else {\n {{ segment.originalStartDate | format: 'time' : { calendar: calendar() } | async }}\n @if (segment.originalStartDate.getTime() !== segment.originalEndDate.getTime()) {\n -\n {{ segment.originalEndDate | format: 'time' : { calendar: calendar() } | async }}\n }\n }\n </span>\n </div>\n }\n\n <!-- Overflow Badge and Popover -->\n @if (getAppointmentsForResourceAndDay(resourceId, dayData).moreCount > 0) {\n <div #moreAppointments class=\"ax-scheduler-year-overflow-badge\" (click)=\"$event.stopPropagation()\">\n +{{\n '@acorex:common.general.more-items'\n | translate\n : { params: { number: getAppointmentsForResourceAndDay(resourceId, dayData).moreCount } }\n | async\n }}\n </div>\n <ax-popover [target]=\"moreAppointments\" placement=\"bottom-start\" trigger=\"click\">\n <div\n axDropZone\n [class.ax-state-readonly]=\"readonly()\"\n class=\"ax-scheduler-popover ax-scheduler-timeline-year-popover-appointment\"\n >\n @for (\n segment of getAppointmentsForResourceAndDay(resourceId, dayData).hidden;\n track segment.id + segment.originalStartDate.getTime()\n ) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"segment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"optimizedDragStartDelay()\"\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 tooltipTemplate()\n ? ''\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 class=\"ax-scheduler-popover-appointment {{\n segment.cssClass ?? 'ax-scheduler-' + (segment.priority ?? 'primary') + '-priority'\n }}\"\n [class.all-day-segment]=\"segment.allDay\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n [axTooltipContext]=\"segment\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ segment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, segment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </ax-title>\n @if (!segment.allDay) {\n <span class=\"ax-scheduler-timeline-appointment-time\">\n {{ segment.originalStartDate | format: 'time' : { calendar: calendar() } | async }}\n @if (\n !segment.allDay &&\n segment.originalStartDate.getTime() !== segment.originalEndDate.getTime()\n ) {\n -\n {{ segment.originalEndDate | format: 'time' : { 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 }\n </div>\n </div>\n}\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-border-style:solid;--tw-font-weight:initial;--tw-leading:initial;--tw-content:\"\"}}}@layer components{ax-scheduler-timeline-year-view{--ax-scheduler-timeline-spanning-row-height:1.5rem;--ax-scheduler-timeline-spanning-gap:.125rem;background-color:inherit;--ax-comp-scheduler-timeline-year-view-blocks-width:calc(var(--ax-comp-scheduler-timeline-view-blocks-width) / 2);flex-direction:column;height:100%;display:inline-flex;position:relative}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-wrapper{flex-direction:column;height:100%;display:flex;position:relative}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-spanning-layer{pointer-events:none;inset-inline-start:calc(var(--spacing,.25rem) * 0);inset-inline-end:calc(var(--spacing,.25rem) * 0);top:calc(var(--spacing,.25rem) * 16);z-index:5;padding-inline:calc(var(--spacing,.25rem) * .5);padding-block:var(--spacing,.25rem);align-content:flex-start;row-gap:var(--ax-scheduler-timeline-spanning-gap);grid-auto-rows:var(--ax-scheduler-timeline-spanning-row-height);grid-template-columns:repeat(var(--timeline-days-count,365),var(--ax-comp-scheduler-timeline-year-view-blocks-width));display:grid;position:absolute}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-spanning-layer .ax-scheduler-timeline-spanning-appointment{z-index:6;cursor:pointer;text-overflow:ellipsis;border-radius:var(--radius-sm,.25rem);padding-inline:var(--spacing,.25rem);padding-block:calc(var(--spacing,.25rem) * .5);white-space:nowrap;pointer-events:auto;align-items:center;margin-inline:.125rem;font-size:.7rem;display:flex;overflow:hidden}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-spanning-layer .ax-scheduler-timeline-spanning-appointment .ax-spanning-appointment-title{width:100%;height:100%;padding-inline:calc(var(--spacing,.25rem) * 2);justify-content:space-between;align-items:center;display:flex}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-spanning-layer .ax-scheduler-timeline-spanning-appointment .ax-spanning-appointment-title .ax-scheduler-truncate{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-spanning-layer .ax-scheduler-timeline-spanning-appointment .ax-spanning-appointment-title .ax-scheduler-action-icon{cursor:pointer;width:auto;flex-shrink:0;margin-inline-start:var(--spacing,.25rem)}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-spanning-layer .ax-scheduler-timeline-spanning-appointment.ax-spanning-start-clipped{border-start-start-radius:0;border-end-start-radius:0;margin-inline-start:0;position:relative}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-spanning-layer .ax-scheduler-timeline-spanning-appointment.ax-spanning-start-clipped:before{content:\"\\2190 \";top:calc(var(--spacing,.25rem) * .5);opacity:.7;font-size:.6rem;position:absolute;inset-inline-start:0}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-spanning-layer .ax-scheduler-timeline-spanning-appointment.ax-spanning-end-clipped{border-start-end-radius:0;border-end-end-radius:0;margin-inline-end:0;position:relative}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-spanning-layer .ax-scheduler-timeline-spanning-appointment.ax-spanning-end-clipped:after{content:\" \\2192\";top:calc(var(--spacing,.25rem) * .5);opacity:.7;font-size:.6rem;position:absolute;inset-inline-end:0}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-container{--tw-translate-z:0;height:100%;translate:var(--tw-translate-x) var(--tw-translate-y) var(--tw-translate-z);will-change:transform;display:flex}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-container .ax-scheduler-timeline-header{background-color:var(--ax-comp-scheduler-all-day-bg,inherit);width:100%;display:flex}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-container .ax-scheduler-timeline-header .ax-scheduler-year-header-date-day{height:calc(var(--spacing,.25rem) * 16);width:var(--ax-comp-scheduler-timeline-year-view-blocks-width);justify-content:center;align-items:flex-start;gap:var(--spacing,.25rem);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding-inline:calc(var(--spacing,.25rem) * 4);padding-block:var(--spacing,.25rem);flex-direction:column;display:flex;position:relative}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-container .ax-scheduler-timeline-header .ax-scheduler-year-header-date-day.ax-state-today{background-color:rgba(var(--ax-sys-color-primary-surface))}@supports (color:color-mix(in lab,red,red)){ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-container .ax-scheduler-timeline-header .ax-scheduler-year-header-date-day.ax-state-today{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 5%,transparent)}}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-container .ax-scheduler-timeline-header .ax-scheduler-year-header-date-day.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-container .ax-scheduler-timeline-header .ax-scheduler-year-header-date-day.ax-state-today .ax-scheduler-year-header-date-day-char{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-container .ax-scheduler-timeline-header .ax-scheduler-year-header-date-day.ax-state-today .ax-scheduler-year-header-date-day-num{--tw-font-weight:var(--font-weight-bold,700);font-weight:var(--font-weight-bold,700)}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-container .ax-scheduler-timeline-header .ax-scheduler-year-header-date-day.ax-state-holiday{color:var(--ax-scheduler-holiday-color,rgba(var(--ax-sys-color-danger-surface)))}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-container .ax-scheduler-timeline-header .ax-scheduler-year-header-date-day.ax-state-holiday.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-container .ax-scheduler-timeline-header .ax-scheduler-year-header-date-day .ax-scheduler-year-header-date-day-char{max-width:100%;font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));--tw-leading:calc(var(--spacing,.25rem) * 3.5);line-height:calc(var(--spacing,.25rem) * 3.5);--tw-font-weight:var(--font-weight-light,300);font-weight:var(--font-weight-light,300);position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 4)}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-container .ax-scheduler-timeline-header .ax-scheduler-year-header-date-day .ax-scheduler-year-header-date-day-num{font-size:var(--text-xl,1.25rem);line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75 / 1.25)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 4)}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-container .ax-scheduler-timeline-content{height:calc(100% - 4rem);width:var(--ax-comp-scheduler-timeline-year-view-blocks-width);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding-inline:var(--spacing,.25rem);padding-block:calc(var(--spacing,.25rem) * .5);padding-top:calc(var(--spanning-rows-count,0) * (var(--ax-scheduler-timeline-spanning-row-height) + var(--ax-scheduler-timeline-spanning-gap)) + .25rem);position:relative}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container{flex-direction:column;gap:1px;display:flex}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-timeline-appointment{--tw-translate-z:0;width:100%;translate:var(--tw-translate-x) var(--tw-translate-y) var(--tw-translate-z);gap:calc(var(--spacing,.25rem) * .5);border-radius:calc(var(--ax-sys-border-radius) / 2);padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:var(--spacing,.25rem);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));--tw-leading:calc(var(--spacing,.25rem) * 3.5);line-height:calc(var(--spacing,.25rem) * 3.5);will-change:transform;flex-direction:column;display:flex;overflow:hidden}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-timeline-appointment ax-title{--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600)}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-year-overflow-badge{margin-top:calc(var(--spacing,.25rem) * .5);cursor:pointer;padding-inline:0;padding-block:calc(var(--spacing,.25rem) * .5);text-align:start;font-size:.7rem}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-year-overflow-badge:hover{text-decoration-line:underline}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container{--tw-translate-z:0;height:100%;translate:var(--tw-translate-x) var(--tw-translate-y) var(--tw-translate-z);background-color:inherit;will-change:transform;flex-direction:column;display:flex;position:relative}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-header-sticky{z-index:10;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;display:flex;position:sticky;top:0}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-header-sticky .ax-scheduler-timeline-year-resource-header-placeholder{z-index:15;width:var(--ax-comp-scheduler-resource-header-width,8rem);min-width:var(--ax-comp-scheduler-resource-header-width,8rem);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;padding:calc(var(--spacing,.25rem) * 2);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);justify-content:center;align-items:center;display:flex;position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 0)}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-header-sticky .ax-scheduler-timeline-year-day-header{background-color:inherit;flex:1;display:flex;overflow-x:auto}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-header-sticky .ax-scheduler-timeline-year-day-header .ax-scheduler-year-header-date-day{height:calc(var(--spacing,.25rem) * 16);width:var(--ax-comp-scheduler-timeline-year-view-blocks-width);min-width:var(--ax-comp-scheduler-timeline-year-view-blocks-width);justify-content:center;align-items:flex-start;gap:var(--spacing,.25rem);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding-inline:calc(var(--spacing,.25rem) * 4);padding-block:var(--spacing,.25rem);flex-direction:column;display:flex;position:relative}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-header-sticky .ax-scheduler-timeline-year-day-header .ax-scheduler-year-header-date-day.ax-state-today{background-color:rgba(var(--ax-sys-color-primary-surface))}@supports (color:color-mix(in lab,red,red)){ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-header-sticky .ax-scheduler-timeline-year-day-header .ax-scheduler-year-header-date-day.ax-state-today{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 5%,transparent)}}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-header-sticky .ax-scheduler-timeline-year-day-header .ax-scheduler-year-header-date-day.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-header-sticky .ax-scheduler-timeline-year-day-header .ax-scheduler-year-header-date-day.ax-state-today .ax-scheduler-year-header-date-day-char{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-header-sticky .ax-scheduler-timeline-year-day-header .ax-scheduler-year-header-date-day.ax-state-today .ax-scheduler-year-header-date-day-num{--tw-font-weight:var(--font-weight-bold,700);font-weight:var(--font-weight-bold,700)}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-header-sticky .ax-scheduler-timeline-year-day-header .ax-scheduler-year-header-date-day.ax-state-holiday{color:var(--ax-scheduler-holiday-color,rgba(var(--ax-sys-color-danger-surface)))}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-header-sticky .ax-scheduler-timeline-year-day-header .ax-scheduler-year-header-date-day.ax-state-holiday.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-header-sticky .ax-scheduler-timeline-year-day-header .ax-scheduler-year-header-date-day .ax-scheduler-year-header-date-day-char{max-width:100%;font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));--tw-leading:calc(var(--spacing,.25rem) * 3.5);line-height:calc(var(--spacing,.25rem) * 3.5);--tw-font-weight:var(--font-weight-light,300);font-weight:var(--font-weight-light,300);position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 4)}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-header-sticky .ax-scheduler-timeline-year-day-header .ax-scheduler-year-header-date-day .ax-scheduler-year-header-date-day-num{font-size:var(--text-xl,1.25rem);line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75 / 1.25)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 4)}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-resource-rows{background-color:inherit;flex:1;position:relative;overflow:visible}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-resource-rows .ax-scheduler-timeline-year-resource-row{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;width:max-content;min-height:calc(var(--resource-spanning-rows-count,0) * (var(--ax-scheduler-timeline-spanning-row-height) + var(--ax-scheduler-timeline-spanning-gap)) + var(--ax-comp-scheduler-timeline-year-row-base-height,4rem));display:flex}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-resource-rows .ax-scheduler-timeline-year-resource-row .ax-scheduler-timeline-year-resource-header{width:var(--ax-comp-scheduler-resource-header-width,8rem);min-width:var(--ax-comp-scheduler-resource-header-width,8rem);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;padding:calc(var(--spacing,.25rem) * 2);justify-content:center;align-self:stretch;align-items:center;display:flex}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-resource-rows .ax-scheduler-timeline-year-resource-row .ax-scheduler-timeline-year-resource-header.ax-scheduler-timeline-year-resource-header-sticky{z-index:9;background-color:inherit;position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 0)}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-resource-rows .ax-scheduler-timeline-year-resource-row .ax-scheduler-timeline-year-resource-header .ax-scheduler-timeline-year-resource-title{text-align:center;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);overflow-wrap:break-word}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-resource-rows .ax-scheduler-timeline-year-resource-row .ax-scheduler-timeline-year-resource-content{background-color:inherit;flex:1;display:flex;position:relative}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-resource-rows .ax-scheduler-timeline-year-resource-row .ax-scheduler-timeline-year-resource-content .ax-scheduler-timeline-resource-spanning-layer{pointer-events:none;z-index:5;padding-inline:calc(var(--spacing,.25rem) * .5);padding-block:var(--spacing,.25rem);align-content:flex-start;row-gap:var(--ax-scheduler-timeline-spanning-gap);grid-auto-rows:var(--ax-scheduler-timeline-spanning-row-height);grid-template-columns:repeat(var(--timeline-days-count,365),var(--ax-comp-scheduler-timeline-year-view-blocks-width));inset-inline-start:calc(var(--spacing,.25rem) * 0);inset-inline-end:calc(var(--spacing,.25rem) * 0);display:grid;position:absolute;top:0}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-resource-rows .ax-scheduler-timeline-year-resource-row .ax-scheduler-timeline-year-resource-content .ax-scheduler-timeline-resource-spanning-layer .ax-scheduler-timeline-spanning-appointment{z-index:6;cursor:pointer;text-overflow:ellipsis;border-radius:var(--radius-sm,.25rem);padding-inline:var(--spacing,.25rem);padding-block:calc(var(--spacing,.25rem) * .5);white-space:nowrap;pointer-events:auto;align-items:center;margin-inline:.125rem;font-size:.7rem;display:flex;overflow:hidden}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-resource-rows .ax-scheduler-timeline-year-resource-row .ax-scheduler-timeline-year-resource-content .ax-scheduler-timeline-resource-spanning-layer .ax-scheduler-timeline-spanning-appointment .ax-spanning-appointment-title{width:100%;height:100%;padding-inline:calc(var(--spacing,.25rem) * 2);justify-content:space-between;align-items:center;display:flex}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-resource-rows .ax-scheduler-timeline-year-resource-row .ax-scheduler-timeline-year-resource-content .ax-scheduler-timeline-resource-spanning-layer .ax-scheduler-timeline-spanning-appointment .ax-spanning-appointment-title .ax-scheduler-truncate{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-resource-rows .ax-scheduler-timeline-year-resource-row .ax-scheduler-timeline-year-resource-content .ax-scheduler-timeline-resource-spanning-layer .ax-scheduler-timeline-spanning-appointment .ax-spanning-appointment-title .ax-scheduler-action-icon{cursor:pointer;width:auto;flex-shrink:0;margin-inline-start:var(--spacing,.25rem)}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-resource-rows .ax-scheduler-timeline-year-resource-row .ax-scheduler-timeline-year-resource-content .ax-scheduler-timeline-resource-spanning-layer .ax-scheduler-timeline-spanning-appointment.ax-spanning-start-clipped{border-start-start-radius:0;border-end-start-radius:0;margin-inline-start:0;position:relative}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-resource-rows .ax-scheduler-timeline-year-resource-row .ax-scheduler-timeline-year-resource-content .ax-scheduler-timeline-resource-spanning-layer .ax-scheduler-timeline-spanning-appointment.ax-spanning-start-clipped:before{content:\"\\2190 \";top:calc(var(--spacing,.25rem) * .5);opacity:.7;font-size:.6rem;position:absolute;inset-inline-start:0}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-resource-rows .ax-scheduler-timeline-year-resource-row .ax-scheduler-timeline-year-resource-content .ax-scheduler-timeline-resource-spanning-layer .ax-scheduler-timeline-spanning-appointment.ax-spanning-end-clipped{border-start-end-radius:0;border-end-end-radius:0;margin-inline-end:0;position:relative}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-resource-rows .ax-scheduler-timeline-year-resource-row .ax-scheduler-timeline-year-resource-content .ax-scheduler-timeline-resource-spanning-layer .ax-scheduler-timeline-spanning-appointment.ax-spanning-end-clipped:after{content:\" \\2192\";top:calc(var(--spacing,.25rem) * .5);opacity:.7;font-size:.6rem;position:absolute;inset-inline-end:0}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-resource-rows .ax-scheduler-timeline-year-resource-row .ax-scheduler-timeline-year-resource-content .ax-scheduler-timeline-year-slot-row{width:var(--ax-comp-scheduler-timeline-year-view-blocks-width);min-width:var(--ax-comp-scheduler-timeline-year-view-blocks-width);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;padding-bottom:var(--spacing,.25rem);padding-top:calc(var(--spanning-rows-count,0) * (var(--ax-scheduler-timeline-spanning-row-height) + var(--ax-scheduler-timeline-spanning-gap)) + .25rem);flex-direction:column;display:flex;position:relative}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-resource-rows .ax-scheduler-timeline-year-resource-row .ax-scheduler-timeline-year-resource-content .ax-scheduler-timeline-year-slot-row .ax-scheduler-timeline-appointment-container{gap:var(--ax-comp-scheduler-timeline-year-gap-height,.125rem);width:100%;padding-inline:var(--spacing,.25rem);flex-direction:column;display:flex}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-resource-rows .ax-scheduler-timeline-year-resource-row .ax-scheduler-timeline-year-resource-content .ax-scheduler-timeline-year-slot-row .ax-scheduler-timeline-appointment-container ax-popover{display:none}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-resource-rows .ax-scheduler-timeline-year-resource-row .ax-scheduler-timeline-year-resource-content .ax-scheduler-timeline-year-slot-row .ax-scheduler-timeline-appointment-container .ax-scheduler-timeline-appointment{min-height:calc(var(--spacing,.25rem) * 8);--tw-translate-z:0;width:100%;translate:var(--tw-translate-x) var(--tw-translate-y) var(--tw-translate-z);gap:calc(var(--spacing,.25rem) * .5);border-radius:calc(var(--ax-sys-border-radius) / 2);padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:var(--spacing,.25rem);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));--tw-leading:calc(var(--spacing,.25rem) * 3.5);line-height:calc(var(--spacing,.25rem) * 3.5);will-change:transform;flex-direction:column;flex-shrink:0;display:flex;overflow:hidden}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-resource-rows .ax-scheduler-timeline-year-resource-row .ax-scheduler-timeline-year-resource-content .ax-scheduler-timeline-year-slot-row .ax-scheduler-timeline-appointment-container .ax-scheduler-timeline-appointment ax-title{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-resource-rows .ax-scheduler-timeline-year-resource-row .ax-scheduler-timeline-year-resource-content .ax-scheduler-timeline-year-slot-row .ax-scheduler-timeline-appointment-container .ax-scheduler-year-overflow-badge{margin-top:calc(var(--spacing,.25rem) * .5);cursor:pointer;padding-inline:0;padding-block:calc(var(--spacing,.25rem) * .5);text-align:start;flex-shrink:0;font-size:.7rem}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-resource-container .ax-scheduler-timeline-year-resource-rows .ax-scheduler-timeline-year-resource-row .ax-scheduler-timeline-year-resource-content .ax-scheduler-timeline-year-slot-row .ax-scheduler-timeline-appointment-container .ax-scheduler-year-overflow-badge:hover{text-decoration-line:underline}ax-scheduler-timeline-year-view:not(.ax-state-readonly) .ax-scheduler-timeline-appointment{cursor:pointer}ax-scheduler-timeline-year-view:not(.ax-state-readonly) .ax-scheduler-timeline-content,ax-scheduler-timeline-year-view:not(.ax-state-readonly) .ax-scheduler-timeline-year-slot-row{cursor:pointer;transition-property:background-color;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}:is(ax-scheduler-timeline-year-view:not(.ax-state-readonly) .ax-scheduler-timeline-content,ax-scheduler-timeline-year-view:not(.ax-state-readonly) .ax-scheduler-timeline-year-slot-row):hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg,var(--ax-sys-color-primary-surface),.1))}ax-scheduler-timeline-year-view ax-title{justify-content:space-between;display:flex}ax-scheduler-timeline-year-view ax-title .ax-scheduler-action-icon{cursor:pointer;width:auto}ax-scheduler-timeline-year-view .ax-scheduler-current-time-line{width:calc(var(--spacing,.25rem) * .5);top:0;bottom:0}ax-scheduler-timeline-year-view .ax-scheduler-current-time-line:before{content:var(--tw-content);inset-inline-start:-5px;top:calc(var(--spacing,.25rem) * -1.5)}ax-scheduler.ax-rtl ax-scheduler-timeline-year-view .ax-scheduler-timeline-spanning-appointment.ax-spanning-start-clipped:before{content:\"\\2192 \"}ax-scheduler.ax-rtl ax-scheduler-timeline-year-view .ax-scheduler-timeline-spanning-appointment.ax-spanning-end-clipped:after{content:\" \\2190\"}}@property --tw-translate-x{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-y{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-z{syntax:\"*\";inherits:false;initial-value:0}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-leading{syntax:\"*\";inherits:false}@property --tw-content{syntax:\"*\";inherits:false;initial-value:\"\"}\n/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */\n"] }]
|
|
3854
3876
|
}], propDecorators: { readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], hasActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasActions", required: false }] }], dragStartDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragStartDelay", required: false }] }], calendar: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendar", required: false }] }], showResourceHeaders: [{ type: i0.Input, args: [{ isSignal: true, alias: "showResourceHeaders", required: false }] }], date: [{ type: i0.Input, args: [{ isSignal: true, alias: "date", required: true }] }], showUnassignedAppointments: [{ type: i0.Input, args: [{ isSignal: true, alias: "showUnassignedAppointments", required: false }] }], selectedAppointmentId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedAppointmentId", required: false }] }], resources: [{ type: i0.Input, args: [{ isSignal: true, alias: "resources", required: false }] }], showCurrentTimeIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCurrentTimeIndicator", required: false }] }], scrollToCurrentTimeIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollToCurrentTimeIndicator", required: false }] }], resourceTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "resourceTemplate", required: false }] }], appointments: [{ type: i0.Input, args: [{ isSignal: true, alias: "appointments", required: false }] }], tooltipTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipTemplate", required: false }] }], currentTimeLineElement: [{ type: i0.ViewChild, args: ['currentTimeLine', { isSignal: true }] }], slotClickedInternal: [{ type: i0.Output, args: ["slotClickedInternal"] }], slotDblClickedInternal: [{ type: i0.Output, args: ["slotDblClickedInternal"] }], slotRightClickedInternal: [{ type: i0.Output, args: ["slotRightClickedInternal"] }], appointmentClickedInternal: [{ type: i0.Output, args: ["appointmentClickedInternal"] }], appointmentDblClickedInternal: [{ type: i0.Output, args: ["appointmentDblClickedInternal"] }], appointmentRightClickedInternal: [{ type: i0.Output, args: ["appointmentRightClickedInternal"] }], onActionClickInternal: [{ type: i0.Output, args: ["onActionClickInternal"] }], onAppointmentDropInternal: [{ type: i0.Output, args: ["onAppointmentDropInternal"] }] } });
|
|
3855
3877
|
|
|
3856
3878
|
class AXSchedulerWeekViewComponent extends NXComponent {
|
|
@@ -3862,26 +3884,26 @@ class AXSchedulerWeekViewComponent extends NXComponent {
|
|
|
3862
3884
|
this.scheduler = inject(AXSchedulerComponent);
|
|
3863
3885
|
this.calendarService = inject(AXCalendarService);
|
|
3864
3886
|
this.schedulerService = inject(AXSchedulerService);
|
|
3865
|
-
this.dragStartSlotId = signal(null, ...(ngDevMode ? [{ debugName: "dragStartSlotId" }] : []));
|
|
3887
|
+
this.dragStartSlotId = signal(null, ...(ngDevMode ? [{ debugName: "dragStartSlotId" }] : /* istanbul ignore next */ []));
|
|
3866
3888
|
// --- Constants ---
|
|
3867
3889
|
this.GAP_PX = 1;
|
|
3868
3890
|
this.BADGE_SPACE_REM = 2;
|
|
3869
3891
|
// --- Component Inputs ---
|
|
3870
|
-
this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
|
|
3871
|
-
this.draggable = input(true, ...(ngDevMode ? [{ debugName: "draggable" }] : []));
|
|
3872
|
-
this.hasActions = input(false, ...(ngDevMode ? [{ debugName: "hasActions" }] : []));
|
|
3873
|
-
this.dragStartDelay = input(0, ...(ngDevMode ? [{ debugName: "dragStartDelay" }] : []));
|
|
3874
|
-
this.calendar = input(...(ngDevMode ? [undefined, { debugName: "calendar" }] : []));
|
|
3875
|
-
this.date = input.required(...(ngDevMode ? [{ debugName: "date" }] : []));
|
|
3876
|
-
this.endDayHour = input.required(...(ngDevMode ? [{ debugName: "endDayHour" }] : []));
|
|
3877
|
-
this.startDayHour = input.required(...(ngDevMode ? [{ debugName: "startDayHour" }] : []));
|
|
3878
|
-
this.showCurrentTimeIndicator = input(true, ...(ngDevMode ? [{ debugName: "showCurrentTimeIndicator" }] : []));
|
|
3879
|
-
this.scrollToCurrentTimeIndicator = input(false, ...(ngDevMode ? [{ debugName: "scrollToCurrentTimeIndicator" }] : []));
|
|
3880
|
-
this.appointments = input([], ...(ngDevMode ? [{ debugName: "appointments" }] : []));
|
|
3881
|
-
this.tooltipTemplate = input(...(ngDevMode ? [undefined, { debugName: "tooltipTemplate" }] : []));
|
|
3882
|
-
this.selectedAppointmentId = input(null, ...(ngDevMode ? [{ debugName: "selectedAppointmentId" }] : []));
|
|
3892
|
+
this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
3893
|
+
this.draggable = input(true, ...(ngDevMode ? [{ debugName: "draggable" }] : /* istanbul ignore next */ []));
|
|
3894
|
+
this.hasActions = input(false, ...(ngDevMode ? [{ debugName: "hasActions" }] : /* istanbul ignore next */ []));
|
|
3895
|
+
this.dragStartDelay = input(0, ...(ngDevMode ? [{ debugName: "dragStartDelay" }] : /* istanbul ignore next */ []));
|
|
3896
|
+
this.calendar = input(...(ngDevMode ? [undefined, { debugName: "calendar" }] : /* istanbul ignore next */ []));
|
|
3897
|
+
this.date = input.required(...(ngDevMode ? [{ debugName: "date" }] : /* istanbul ignore next */ []));
|
|
3898
|
+
this.endDayHour = input.required(...(ngDevMode ? [{ debugName: "endDayHour" }] : /* istanbul ignore next */ []));
|
|
3899
|
+
this.startDayHour = input.required(...(ngDevMode ? [{ debugName: "startDayHour" }] : /* istanbul ignore next */ []));
|
|
3900
|
+
this.showCurrentTimeIndicator = input(true, ...(ngDevMode ? [{ debugName: "showCurrentTimeIndicator" }] : /* istanbul ignore next */ []));
|
|
3901
|
+
this.scrollToCurrentTimeIndicator = input(false, ...(ngDevMode ? [{ debugName: "scrollToCurrentTimeIndicator" }] : /* istanbul ignore next */ []));
|
|
3902
|
+
this.appointments = input([], ...(ngDevMode ? [{ debugName: "appointments" }] : /* istanbul ignore next */ []));
|
|
3903
|
+
this.tooltipTemplate = input(...(ngDevMode ? [undefined, { debugName: "tooltipTemplate" }] : /* istanbul ignore next */ []));
|
|
3904
|
+
this.selectedAppointmentId = input(null, ...(ngDevMode ? [{ debugName: "selectedAppointmentId" }] : /* istanbul ignore next */ []));
|
|
3883
3905
|
// ViewChild for current time line element
|
|
3884
|
-
this.currentTimeLineElement = viewChild('currentTimeLine', ...(ngDevMode ? [{ debugName: "currentTimeLineElement" }] : []));
|
|
3906
|
+
this.currentTimeLineElement = viewChild('currentTimeLine', ...(ngDevMode ? [{ debugName: "currentTimeLineElement" }] : /* istanbul ignore next */ []));
|
|
3885
3907
|
// --- Component Outputs (Internal, to be caught by the main scheduler) ---
|
|
3886
3908
|
this.slotClickedInternal = output();
|
|
3887
3909
|
this.slotDblClickedInternal = output();
|
|
@@ -3912,7 +3934,7 @@ class AXSchedulerWeekViewComponent extends NXComponent {
|
|
|
3912
3934
|
hours.push(time);
|
|
3913
3935
|
}
|
|
3914
3936
|
return hours;
|
|
3915
|
-
}, ...(ngDevMode ? [{ debugName: "hoursArray" }] : []));
|
|
3937
|
+
}, ...(ngDevMode ? [{ debugName: "hoursArray" }] : /* istanbul ignore next */ []));
|
|
3916
3938
|
/**
|
|
3917
3939
|
* @protected
|
|
3918
3940
|
* Generates an array of day data objects for the 7 days in the view, including holiday info.
|
|
@@ -3928,7 +3950,7 @@ class AXSchedulerWeekViewComponent extends NXComponent {
|
|
|
3928
3950
|
days.push({ date, holiday: this.isHoliday(date) });
|
|
3929
3951
|
}
|
|
3930
3952
|
return days;
|
|
3931
|
-
}, ...(ngDevMode ? [{ debugName: "daysArray" }] : []));
|
|
3953
|
+
}, ...(ngDevMode ? [{ debugName: "daysArray" }] : /* istanbul ignore next */ []));
|
|
3932
3954
|
/**
|
|
3933
3955
|
* @protected
|
|
3934
3956
|
* Calculates the total number of 30-minute blocks within the visible hours of a single day.
|
|
@@ -3937,7 +3959,7 @@ class AXSchedulerWeekViewComponent extends NXComponent {
|
|
|
3937
3959
|
const startH = this.startDayHour();
|
|
3938
3960
|
const endH = this.endDayHour();
|
|
3939
3961
|
return Math.max(0, (endH - startH) * (60 / 30));
|
|
3940
|
-
}, ...(ngDevMode ? [{ debugName: "totalBlocksPerViewDay" }] : []));
|
|
3962
|
+
}, ...(ngDevMode ? [{ debugName: "totalBlocksPerViewDay" }] : /* istanbul ignore next */ []));
|
|
3941
3963
|
// Calculate spanning appointments with their grid positions for the all-day header
|
|
3942
3964
|
this.spanningAppointments = computed(() => {
|
|
3943
3965
|
const daysInWeek = this.daysArray();
|
|
@@ -4031,19 +4053,19 @@ class AXSchedulerWeekViewComponent extends NXComponent {
|
|
|
4031
4053
|
});
|
|
4032
4054
|
}
|
|
4033
4055
|
return spanningResult;
|
|
4034
|
-
}, ...(ngDevMode ? [{ debugName: "spanningAppointments" }] : []));
|
|
4056
|
+
}, ...(ngDevMode ? [{ debugName: "spanningAppointments" }] : /* istanbul ignore next */ []));
|
|
4035
4057
|
// Get the set of multi-day/all-day appointment IDs for exclusion from regular all-day rendering
|
|
4036
4058
|
this.multiDayAppointmentIds = computed(() => {
|
|
4037
4059
|
const spanning = this.spanningAppointments();
|
|
4038
4060
|
return new Set(spanning.map((s) => s.appointment.id));
|
|
4039
|
-
}, ...(ngDevMode ? [{ debugName: "multiDayAppointmentIds" }] : []));
|
|
4061
|
+
}, ...(ngDevMode ? [{ debugName: "multiDayAppointmentIds" }] : /* istanbul ignore next */ []));
|
|
4040
4062
|
// Calculate the maximum row index to determine header height
|
|
4041
4063
|
this.maxSpanningRowIndex = computed(() => {
|
|
4042
4064
|
const spanning = this.spanningAppointments();
|
|
4043
4065
|
if (spanning.length === 0)
|
|
4044
4066
|
return -1;
|
|
4045
4067
|
return Math.max(...spanning.map((s) => s.rowIndex));
|
|
4046
|
-
}, ...(ngDevMode ? [{ debugName: "maxSpanningRowIndex" }] : []));
|
|
4068
|
+
}, ...(ngDevMode ? [{ debugName: "maxSpanningRowIndex" }] : /* istanbul ignore next */ []));
|
|
4047
4069
|
/**
|
|
4048
4070
|
* @protected
|
|
4049
4071
|
* Filters processed segments to get only single-day all-day appointments for the all-day header.
|
|
@@ -4062,7 +4084,7 @@ class AXSchedulerWeekViewComponent extends NXComponent {
|
|
|
4062
4084
|
appointments: orderBy(appointmentsForThisDay, ['originalStartDate', 'title'], ['asc', 'asc']),
|
|
4063
4085
|
};
|
|
4064
4086
|
});
|
|
4065
|
-
}, ...(ngDevMode ? [{ debugName: "allDayAppointmentsPerDay" }] : []));
|
|
4087
|
+
}, ...(ngDevMode ? [{ debugName: "allDayAppointmentsPerDay" }] : /* istanbul ignore next */ []));
|
|
4066
4088
|
// =================================================================================================
|
|
4067
4089
|
//
|
|
4068
4090
|
// GRID LAYOUT & BADGE LOGIC (THE CORE FIX)
|
|
@@ -4116,7 +4138,7 @@ class AXSchedulerWeekViewComponent extends NXComponent {
|
|
|
4116
4138
|
layoutsByDay.set(dayIndex, dayLayouts);
|
|
4117
4139
|
}
|
|
4118
4140
|
return layoutsByDay;
|
|
4119
|
-
}, ...(ngDevMode ? [{ debugName: "dayViewLayoutsByDay" }] : []));
|
|
4141
|
+
}, ...(ngDevMode ? [{ debugName: "dayViewLayoutsByDay" }] : /* istanbul ignore next */ []));
|
|
4120
4142
|
/**
|
|
4121
4143
|
* @protected
|
|
4122
4144
|
* [STEP 2] From the full layout, select ONLY appointments in the first column (`columnIndex: 0`)
|
|
@@ -4155,7 +4177,7 @@ class AXSchedulerWeekViewComponent extends NXComponent {
|
|
|
4155
4177
|
});
|
|
4156
4178
|
}
|
|
4157
4179
|
return finalLayouts;
|
|
4158
|
-
}, ...(ngDevMode ? [{ debugName: "visibleAppointmentsLayout" }] : []));
|
|
4180
|
+
}, ...(ngDevMode ? [{ debugName: "visibleAppointmentsLayout" }] : /* istanbul ignore next */ []));
|
|
4159
4181
|
/**
|
|
4160
4182
|
* @protected
|
|
4161
4183
|
* [STEP 3] Create badges for all appointments NOT in the first column (`columnIndex > 0`).
|
|
@@ -4199,7 +4221,7 @@ class AXSchedulerWeekViewComponent extends NXComponent {
|
|
|
4199
4221
|
});
|
|
4200
4222
|
});
|
|
4201
4223
|
return badgesInfo;
|
|
4202
|
-
}, ...(ngDevMode ? [{ debugName: "overflowBadgesWithData" }] : []));
|
|
4224
|
+
}, ...(ngDevMode ? [{ debugName: "overflowBadgesWithData" }] : /* istanbul ignore next */ []));
|
|
4203
4225
|
// =================================================================================================
|
|
4204
4226
|
//
|
|
4205
4227
|
// EVENT HANDLERS & UTILITY METHODS
|
|
@@ -4240,10 +4262,10 @@ class AXSchedulerWeekViewComponent extends NXComponent {
|
|
|
4240
4262
|
uniqueSegmentsMap.set(mapKey, seg);
|
|
4241
4263
|
});
|
|
4242
4264
|
return Array.from(uniqueSegmentsMap.values());
|
|
4243
|
-
}, ...(ngDevMode ? [{ debugName: "processedAppointmentsForLayout" }] : []));
|
|
4265
|
+
}, ...(ngDevMode ? [{ debugName: "processedAppointmentsForLayout" }] : /* istanbul ignore next */ []));
|
|
4244
4266
|
this.timedGridSegments = computed(() => {
|
|
4245
4267
|
return this.processedAppointmentsForLayout()?.filter((segment) => !segment.allDay) ?? [];
|
|
4246
|
-
}, ...(ngDevMode ? [{ debugName: "timedGridSegments" }] : []));
|
|
4268
|
+
}, ...(ngDevMode ? [{ debugName: "timedGridSegments" }] : /* istanbul ignore next */ []));
|
|
4247
4269
|
}
|
|
4248
4270
|
isActive(appointmentId) {
|
|
4249
4271
|
return this.selectedAppointmentId() === appointmentId;
|
|
@@ -4497,10 +4519,10 @@ class AXSchedulerWeekViewComponent extends NXComponent {
|
|
|
4497
4519
|
}
|
|
4498
4520
|
return true;
|
|
4499
4521
|
}
|
|
4500
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
4501
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AXSchedulerWeekViewComponent, isStandalone: true, selector: "ax-scheduler-week-view", inputs: { readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, hasActions: { classPropertyName: "hasActions", publicName: "hasActions", isSignal: true, isRequired: false, transformFunction: null }, dragStartDelay: { classPropertyName: "dragStartDelay", publicName: "dragStartDelay", 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 }, endDayHour: { classPropertyName: "endDayHour", publicName: "endDayHour", isSignal: true, isRequired: true, transformFunction: null }, startDayHour: { classPropertyName: "startDayHour", publicName: "startDayHour", isSignal: true, isRequired: true, transformFunction: null }, showCurrentTimeIndicator: { classPropertyName: "showCurrentTimeIndicator", publicName: "showCurrentTimeIndicator", isSignal: true, isRequired: false, transformFunction: null }, scrollToCurrentTimeIndicator: { classPropertyName: "scrollToCurrentTimeIndicator", publicName: "scrollToCurrentTimeIndicator", isSignal: true, isRequired: false, transformFunction: null }, appointments: { classPropertyName: "appointments", publicName: "appointments", isSignal: true, isRequired: false, transformFunction: null }, tooltipTemplate: { classPropertyName: "tooltipTemplate", publicName: "tooltipTemplate", isSignal: true, isRequired: false, transformFunction: null }, selectedAppointmentId: { classPropertyName: "selectedAppointmentId", publicName: "selectedAppointmentId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { slotClickedInternal: "slotClickedInternal", slotDblClickedInternal: "slotDblClickedInternal", slotRightClickedInternal: "slotRightClickedInternal", appointmentClickedInternal: "appointmentClickedInternal", appointmentDblClickedInternal: "appointmentDblClickedInternal", appointmentRightClickedInternal: "appointmentRightClickedInternal", onActionClickInternal: "onActionClickInternal", onAppointmentDropInternal: "onAppointmentDropInternal" }, host: { properties: { "class.ax-state-readonly": "readonly()" } }, providers: [{ provide: AXComponent, useExisting: AXSchedulerWeekViewComponent }], viewQueries: [{ propertyName: "currentTimeLineElement", first: true, predicate: ["currentTimeLine"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-scheduler-week-header\">\n <div class=\"ax-scheduler-week-header-days\">\n <div class=\"ax-scheduler-week-header-table\"></div>\n <div class=\"ax-scheduler-week-header-date\" aria-hidden=\"true\">\n @for (day of daysArray(); track day.date.date.getTime()) {\n <div\n [class.ax-state-today]=\"isToday(day.date)\"\n class=\"ax-scheduler-week-header-date-day {{\n day.holiday.state !== 'none' ? (day.holiday.holiday?.cssClass ?? 'ax-state-holiday') : ''\n }}\"\n >\n <span\n class=\"ax-scheduler-week-header-date-day-char ax-scheduler-truncate\"\n [axTooltip]=\"day.holiday?.holiday?.title ?? ''\"\n >\n {{ day.date | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n @if (day.holiday.state === 'holiday' && day.holiday.holiday.title) {\n ( {{ day.holiday.holiday.title }} )\n }\n </span>\n <span class=\"ax-scheduler-week-header-date-day-num\">\n {{ day.date | format: 'date' : { format: 'DD', calendar: calendar() } | async }}\n </span>\n </div>\n }\n </div>\n </div>\n <!-- All-day / Multi-day Spanning Appointments Header -->\n <div class=\"ax-scheduler-week-header-days ax-scheduler-week-allday-header\">\n <div class=\"ax-scheduler-week-header-table\">{{ '@acorex:dateTime.duration.all-day' | translate | async }}</div>\n <div class=\"ax-scheduler-week-allday-content\">\n <!-- Spanning Appointments Layer -->\n @if (spanningAppointments().length > 0) {\n <div class=\"ax-scheduler-week-spanning-layer\">\n @for (spanning of spanningAppointments(); track spanning.appointment.id) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"spanning.appointment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || spanning.appointment.readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, spanning.appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, spanning.appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, spanning.appointment)\"\n [title]=\"\n tooltipTemplate()\n ? ''\n : spanning.appointment.title +\n ' (' +\n (spanning.appointment.startDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ' - ' +\n (spanning.appointment.endDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ')'\n \"\n class=\"ax-scheduler-week-spanning-appointment\"\n [class.ax-spanning-start-clipped]=\"spanning.isStartClipped\"\n [class.ax-spanning-end-clipped]=\"spanning.isEndClipped\"\n [class.ax-state-active]=\"isActive(spanning.appointment.id)\"\n [class]=\"\n spanning.appointment.cssClass ??\n 'ax-scheduler-' + (spanning.appointment.priority ?? 'primary') + '-priority'\n \"\n [style.grid-column]=\"spanning.startDayIndex + 1 + ' / span ' + spanning.spanCount\"\n [style.--spanning-row-index]=\"spanning.rowIndex\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n [axTooltipContext]=\"spanning.appointment\"\n >\n <span class=\"ax-spanning-appointment-title\">\n <span class=\"ax-scheduler-truncate\">{{ spanning.appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, spanning.appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n ></ax-icon>\n }\n </span>\n </div>\n }\n </div>\n }\n <!-- Drop zones for each day -->\n <div class=\"ax-scheduler-week-allday-slots\">\n @for (slotData of allDayAppointmentsPerDay(); track slotData.day.date.getTime()) {\n <div\n axDropZone\n #zone2=\"axDropZone\"\n [class.ax-scheduler-slot-hovered]=\"zone2.isHovered()\"\n (onElementDrop)=\"handleAllDayDrop($event, slotData.day)\"\n class=\"ax-scheduler-all-day-slot\"\n (click)=\"handleAllDaySlotEvent($event, slotData.day)\"\n (dblclick)=\"handleAllDaySlotEvent($event, slotData.day)\"\n (contextmenu)=\"handleAllDaySlotEvent($event, slotData.day)\"\n >\n <!-- Single-day all-day appointments only -->\n @if (slotData.appointments.length > 0) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragData]=\"slotData.appointments[0]\"\n [dragDisabled]=\"!draggable() || slotData.appointments[0].readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, slotData.appointments[0])\"\n (dblclick)=\"handleAppointmentEvent($event, slotData.appointments[0])\"\n (contextmenu)=\"handleAppointmentEvent($event, slotData.appointments[0])\"\n [title]=\"tooltipTemplate() ? '' : slotData.appointments[0].title\"\n class=\"ax-scheduler-header-week-appointment\"\n [style.width]=\"slotData.appointments.length > 1 ? 'calc(100% - 2rem)' : '100%'\"\n [class.ax-state-active]=\"isActive(slotData.appointments[0].id)\"\n [class]=\"\n slotData.appointments[0].cssClass ??\n 'ax-scheduler-' + (slotData.appointments[0].priority ?? 'primary') + '-priority'\n \"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltipContext]=\"slotData.appointments[0]\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ slotData.appointments[0].title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, slotData.appointments[0])\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n ></ax-icon>\n }\n </ax-title>\n </div>\n }\n @if (slotData.appointments.length > 1) {\n <div\n #moreAppointments\n class=\"ax-scheduler-appointment-badge\"\n [style.width]=\"'1.5rem'\"\n [style.border]=\"'none'\"\n [class]=\"\n slotData.appointments[1].cssClass ??\n 'ax-scheduler-' + (slotData.appointments[1].priority ?? 'primary') + '-priority'\n \"\n >\n +{{ slotData.appointments.length - 1 }}\n </div>\n <ax-popover [target]=\"moreAppointments\">\n <div class=\"ax-scheduler-popover\" [class.ax-state-readonly]=\"readonly()\" axDropZone>\n @for (appointment of slotData.appointments; track appointment.id; let first = $first) {\n @if (!first) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"appointment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || appointment.readonly || readonly()\"\n (click)=\"handleAppointmentEvent($event, appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n [title]=\"tooltipTemplate() ? '' : appointment.title\"\n class=\"ax-scheduler-popover-appointment\"\n [class.ax-state-active]=\"isActive(appointment.id)\"\n [class]=\"\n appointment.cssClass ?? 'ax-scheduler-' + (appointment.priority ?? 'primary') + '-priority'\n \"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltipContext]=\"appointment\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n ></ax-icon>\n }\n </ax-title>\n </div>\n }\n }\n </div>\n </ax-popover>\n }\n </div>\n }\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"ax-scheduler-week-time-container\">\n <div class=\"ax-scheduler-week-time\" aria-hidden=\"true\">\n @for (time of hoursArray(); track time.date.getTime()) {\n <div>\n {{ time | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n </div>\n }\n </div>\n\n <div class=\"ax-scheduler-week-table-container\">\n <!-- Current Time Line Indicator -->\n @if (\n shouldShowCurrentTimeForToday() &&\n getCurrentTimePositionWithOffset() !== null &&\n getCurrentDayColumnPosition() !== null\n ) {\n <div\n #currentTimeLine\n class=\"ax-scheduler-current-time-line\"\n [style.inset-block-start]=\"getCurrentTimePositionWithOffset()\"\n [style.inset-inline-start]=\"getCurrentDayColumnPosition()\"\n [style.width]=\"getCurrentDayColumnWidth()\"\n ></div>\n }\n <div class=\"ax-scheduler-week-appointment-container\">\n @for (appt of visibleAppointmentsLayout(); track appt.appointment.id) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragData]=\"appt.appointment\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || appt.appointment.readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, appt.appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, appt.appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, appt.appointment)\"\n [title]=\"tooltipTemplate() ? '' : appt.appointment.title\"\n [style.width]=\"appt.layoutWidth\"\n [style.height]=\"appt.layoutHeight\"\n class=\"ax-scheduler-week-appointment\"\n [style.inset-block-start]=\"appt.layoutTop\"\n [style.inset-inline-start]=\"appt.layoutLeft\"\n [class.ax-state-active]=\"isActive(appt.appointment.id)\"\n [class]=\"\n appt.appointment.cssClass ?? 'ax-scheduler-' + (appt.appointment.priority ?? 'primary') + '-priority'\n \"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltipContext]=\"appt.appointment\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ appt.appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, appt.appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n ></ax-icon>\n }\n </ax-title>\n <ax-subtitle>\n {{\n appt.appointment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n -\n {{ appt.appointment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n </ax-subtitle>\n </div>\n }\n\n <!-- Overflow Badges with Popovers -->\n @for (badge of overflowBadgesWithData(); track badge.key) {\n <!-- Wrap badge and popover for targeting -->\n <div\n style=\"position: absolute\"\n class=\"ax-scheduler-badge-wrapper\"\n [style.inset-block-start]=\"badge.badgeTop\"\n [style.inset-inline-start]=\"badge.badgeLeft\"\n >\n <!-- The Badge itself -->\n <div\n #actionButton\n class=\"ax-scheduler-appointment-badge\"\n [class]=\"\n badge.hiddenAppointments[0].cssClass ??\n 'ax-scheduler-' + (badge.hiddenAppointments[0].priority ?? 'primary') + '-priority'\n \"\n >\n +{{ badge.count }}\n </div>\n <!-- The Popover -->\n <ax-popover [target]=\"actionButton\">\n <div class=\"ax-scheduler-popover\" axDropZone>\n @for (appointment of badge.hiddenAppointments; track appointment.id) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"appointment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || appointment.readonly || readonly()\"\n (click)=\"handleAppointmentEvent($event, appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n [title]=\"tooltipTemplate() ? '' : appointment.title\"\n class=\"ax-scheduler-popover-appointment\"\n [class.ax-state-active]=\"isActive(appointment.id)\"\n [class]=\"appointment.cssClass ?? 'ax-scheduler-' + (appointment.priority ?? 'primary') + '-priority'\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltipContext]=\"appointment\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n ></ax-icon>\n }\n </ax-title>\n <ax-subtitle>\n {{\n appointment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n -\n {{\n appointment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n </ax-subtitle>\n </div>\n }\n </div>\n </ax-popover>\n </div>\n }\n </div>\n\n <table aria-hidden=\"true\" [border]=\"1\">\n <tbody>\n @for (time of hoursArray(); track time.date.getTime()) {\n <tr>\n @for (day of daysArray(); track day.date.date.getTime()) {\n <td\n axDropZone\n #zone=\"axDropZone\"\n [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n (onElementDrop)=\"handleSingleDayDrop($event, time, day.date, 0)\"\n (click)=\"handleSingleSlotEvent($event, time, day.date, 0)\"\n (dblclick)=\"handleSingleSlotEvent($event, time, day.date, 0)\"\n (contextmenu)=\"handleSingleSlotEvent($event, time, day.date, 0)\"\n [attr.data-slot-id]=\"day.date.format('YYYYMMDD') + '-' + time.format('HHmm')\"\n ></td>\n }\n </tr>\n <tr>\n @for (day of daysArray(); track day.date.date.getTime()) {\n <td\n axDropZone\n #zone2=\"axDropZone\"\n [class.ax-scheduler-slot-hovered]=\"zone2.isHovered()\"\n (onElementDrop)=\"handleSingleDayDrop($event, time, day.date, 1)\"\n (click)=\"handleSingleSlotEvent($event, time, day.date, 1)\"\n (dblclick)=\"handleSingleSlotEvent($event, time, day.date, 1)\"\n (contextmenu)=\"handleSingleSlotEvent($event, time, day.date, 1)\"\n [attr.data-slot-id]=\"day.date.format('YYYYMMDD') + '-' + time.add('minute', 30).format('HHmm')\"\n ></td>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n</div>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-font-weight:initial;--tw-content:\"\"}}}@layer components{ax-scheduler-week-view{min-width:var(--ax-comp-scheduler-width);background-color:inherit;display:block;position:relative}ax-scheduler-week-view .ax-scheduler-appointment-badge{width:calc(var(--spacing,.25rem) * 6);height:calc(var(--spacing,.25rem) * 6);cursor:pointer;font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));border-radius:3.40282e38px;justify-content:center;align-items:center;display:flex}ax-scheduler-week-view .ax-scheduler-week-header{top:calc(var(--spacing,.25rem) * 0);z-index:10;background-color:var(--ax-comp-scheduler-all-day-bg,inherit);width:100%;position:sticky}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;display:flex}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-table{z-index:10;width:var(--ax-comp-scheduler-basic-view-blocks-width);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;text-align:center;flex-shrink:0;position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 0)}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date{width:calc(100% - var(--ax-comp-scheduler-basic-view-blocks-width));display:flex}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div{border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));text-align:center;width:100%}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day{justify-content:center;align-items:center;gap:calc(var(--spacing,.25rem) * 1);padding-inline:calc(var(--spacing,.25rem) * 2);display:grid}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day.ax-state-today{background-color:rgba(var(--ax-sys-color-primary-surface))}@supports (color:color-mix(in lab,red,red)){ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day.ax-state-today{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 5%,transparent)}}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day.ax-state-today .ax-scheduler-week-header-date-day-char{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day.ax-state-today .ax-scheduler-week-header-date-day-num{--tw-font-weight:var(--font-weight-bold,700);font-weight:var(--font-weight-bold,700)}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day.ax-state-holiday{color:rgba(var(--ax-sys-color-danger-600))}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day.ax-state-holiday.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day .ax-scheduler-week-header-date-day-char{--tw-font-weight:var(--font-weight-light,300);max-width:100%;font-weight:var(--font-weight-light,300)}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day .ax-scheduler-week-header-date-day-num{font-size:var(--text-xl,1.25rem);line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75 / 1.25)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div:last-child{border-inline-end-style:var(--tw-border-style);border-inline-end-width:0}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date .ax-scheduler-all-day-slot{gap:calc(var(--spacing,.25rem) * 1);width:14.2857%;display:flex}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date .ax-scheduler-all-day-slot .ax-scheduler-header-week-appointment{border-radius:calc(var(--ax-sys-border-radius) / 2);width:100%;padding-inline:calc(var(--spacing,.25rem) * 2);text-align:start;display:block;overflow:hidden}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date .ax-scheduler-all-day-slot ax-popover{display:none}ax-scheduler-week-view .ax-scheduler-week-time-container{background-color:inherit;width:100%;display:flex}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-time{z-index:15;background-color:var(--ax-comp-scheduler-all-day-bg,inherit);position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 0)}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-time div{height:calc(var(--ax-comp-scheduler-basic-view-blocks-height) * 2);width:var(--ax-comp-scheduler-basic-view-blocks-width);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding-inline:calc(var(--spacing,.25rem) * 2);text-align:center;display:block;position:relative}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container{width:100%;position:relative}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container .ax-scheduler-week-appointment-container{top:calc(var(--spacing,.25rem) * 0);width:100%;position:absolute}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container .ax-scheduler-week-appointment-container .ax-scheduler-week-appointment{border-radius:calc(var(--ax-sys-border-radius) / 2);padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:calc(var(--spacing,.25rem) * 1);flex-direction:column;display:flex;position:absolute;inset-inline-start:calc(var(--spacing,.25rem) * 0)}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table{width:100%}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table tr{height:var(--ax-comp-scheduler-basic-view-blocks-height);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));display:flex}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table tr:first-child{border-top-style:var(--tw-border-style);border-top-width:0}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table tr td{border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));text-align:center;width:100%}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table tr td:last-child{border-inline-end-style:var(--tw-border-style);border-inline-end-width:0}ax-scheduler-week-view:not(.ax-state-readonly) .ax-scheduler-week-appointment,ax-scheduler-week-view:not(.ax-state-readonly) .ax-scheduler-header-week-appointment{cursor:pointer}ax-scheduler-week-view:not(.ax-state-readonly) .ax-scheduler-all-day-slot,ax-scheduler-week-view:not(.ax-state-readonly) .ax-scheduler-week-table-container>table td{cursor:pointer;transition-property:background-color;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}@media(hover:hover){:is(ax-scheduler-week-view:not(.ax-state-readonly) .ax-scheduler-all-day-slot,ax-scheduler-week-view:not(.ax-state-readonly) .ax-scheduler-week-table-container>table td):hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg,var(--ax-sys-color-primary-surface),.1))}}ax-scheduler-week-view ax-title{justify-content:space-between;display:flex}ax-scheduler-week-view ax-title .ax-scheduler-action-icon{cursor:pointer;width:auto}ax-scheduler-week-view .ax-scheduler-current-time-line{height:calc(var(--spacing,.25rem) * .5)}ax-scheduler-week-view .ax-scheduler-current-time-line:before{content:var(--tw-content);inset-inline-start:-5px;top:calc(var(--spacing,.25rem) * -1.5)}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-content{syntax:\"*\";inherits:false;initial-value:\"\"}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["axDrag", "dragData", "dragDisabled", "dragTransition", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragClonedTemplate", "dragCursor", "dragBoundary", "dragTransitionDuration"], outputs: ["dragPositionChanged"] }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "directive", type: AXDropZoneDirective, selector: "[axDropZone]", inputs: ["dropZoneGroup"], outputs: ["onElementDrop", "onElementHover"], exportAs: ["axDropZone"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXFormatPipe, name: "format" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
4522
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXSchedulerWeekViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
4523
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXSchedulerWeekViewComponent, isStandalone: true, selector: "ax-scheduler-week-view", inputs: { readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, hasActions: { classPropertyName: "hasActions", publicName: "hasActions", isSignal: true, isRequired: false, transformFunction: null }, dragStartDelay: { classPropertyName: "dragStartDelay", publicName: "dragStartDelay", 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 }, endDayHour: { classPropertyName: "endDayHour", publicName: "endDayHour", isSignal: true, isRequired: true, transformFunction: null }, startDayHour: { classPropertyName: "startDayHour", publicName: "startDayHour", isSignal: true, isRequired: true, transformFunction: null }, showCurrentTimeIndicator: { classPropertyName: "showCurrentTimeIndicator", publicName: "showCurrentTimeIndicator", isSignal: true, isRequired: false, transformFunction: null }, scrollToCurrentTimeIndicator: { classPropertyName: "scrollToCurrentTimeIndicator", publicName: "scrollToCurrentTimeIndicator", isSignal: true, isRequired: false, transformFunction: null }, appointments: { classPropertyName: "appointments", publicName: "appointments", isSignal: true, isRequired: false, transformFunction: null }, tooltipTemplate: { classPropertyName: "tooltipTemplate", publicName: "tooltipTemplate", isSignal: true, isRequired: false, transformFunction: null }, selectedAppointmentId: { classPropertyName: "selectedAppointmentId", publicName: "selectedAppointmentId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { slotClickedInternal: "slotClickedInternal", slotDblClickedInternal: "slotDblClickedInternal", slotRightClickedInternal: "slotRightClickedInternal", appointmentClickedInternal: "appointmentClickedInternal", appointmentDblClickedInternal: "appointmentDblClickedInternal", appointmentRightClickedInternal: "appointmentRightClickedInternal", onActionClickInternal: "onActionClickInternal", onAppointmentDropInternal: "onAppointmentDropInternal" }, host: { properties: { "class.ax-state-readonly": "readonly()" } }, providers: [{ provide: AXComponent, useExisting: AXSchedulerWeekViewComponent }], viewQueries: [{ propertyName: "currentTimeLineElement", first: true, predicate: ["currentTimeLine"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-scheduler-week-header\">\n <div class=\"ax-scheduler-week-header-days\">\n <div class=\"ax-scheduler-week-header-table\"></div>\n <div class=\"ax-scheduler-week-header-date\" aria-hidden=\"true\">\n @for (day of daysArray(); track day.date.date.getTime()) {\n <div\n [class.ax-state-today]=\"isToday(day.date)\"\n class=\"ax-scheduler-week-header-date-day {{\n day.holiday.state !== 'none' ? (day.holiday.holiday?.cssClass ?? 'ax-state-holiday') : ''\n }}\"\n [style.--ax-scheduler-holiday-color]=\"day.holiday.holiday?.color ?? null\"\n >\n <span\n class=\"ax-scheduler-week-header-date-day-char ax-scheduler-truncate\"\n [axTooltip]=\"(day.holiday?.holiday?.description ?? day.holiday?.holiday?.title ?? '') | translate | async\"\n >\n {{ day.date | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n @if (day.holiday.state === 'holiday' && day.holiday.holiday.title) {\n ( {{ day.holiday.holiday.title | translate | async }} )\n }\n </span>\n <span class=\"ax-scheduler-week-header-date-day-num\">\n {{ day.date | format: 'date' : { format: 'DD', calendar: calendar() } | async }}\n </span>\n </div>\n }\n </div>\n </div>\n <!-- All-day / Multi-day Spanning Appointments Header -->\n <div class=\"ax-scheduler-week-header-days ax-scheduler-week-allday-header\">\n <div class=\"ax-scheduler-week-header-table\">{{ '@acorex:dateTime.duration.all-day' | translate | async }}</div>\n <div class=\"ax-scheduler-week-allday-content\">\n <!-- Spanning Appointments Layer -->\n @if (spanningAppointments().length > 0) {\n <div class=\"ax-scheduler-week-spanning-layer\">\n @for (spanning of spanningAppointments(); track spanning.appointment.id) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"spanning.appointment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || spanning.appointment.readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, spanning.appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, spanning.appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, spanning.appointment)\"\n [title]=\"\n tooltipTemplate()\n ? ''\n : spanning.appointment.title +\n ' (' +\n (spanning.appointment.startDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ' - ' +\n (spanning.appointment.endDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ')'\n \"\n class=\"ax-scheduler-week-spanning-appointment\"\n [class.ax-spanning-start-clipped]=\"spanning.isStartClipped\"\n [class.ax-spanning-end-clipped]=\"spanning.isEndClipped\"\n [class.ax-state-active]=\"isActive(spanning.appointment.id)\"\n [class]=\"\n spanning.appointment.cssClass ??\n 'ax-scheduler-' + (spanning.appointment.priority ?? 'primary') + '-priority'\n \"\n [style.grid-column]=\"spanning.startDayIndex + 1 + ' / span ' + spanning.spanCount\"\n [style.--spanning-row-index]=\"spanning.rowIndex\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n [axTooltipContext]=\"spanning.appointment\"\n >\n <span class=\"ax-spanning-appointment-title\">\n <span class=\"ax-scheduler-truncate\">{{ spanning.appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, spanning.appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n ></ax-icon>\n }\n </span>\n </div>\n }\n </div>\n }\n <!-- Drop zones for each day -->\n <div class=\"ax-scheduler-week-allday-slots\">\n @for (slotData of allDayAppointmentsPerDay(); track slotData.day.date.getTime()) {\n <div\n axDropZone\n #zone2=\"axDropZone\"\n [class.ax-scheduler-slot-hovered]=\"zone2.isHovered()\"\n (onElementDrop)=\"handleAllDayDrop($event, slotData.day)\"\n class=\"ax-scheduler-all-day-slot\"\n (click)=\"handleAllDaySlotEvent($event, slotData.day)\"\n (dblclick)=\"handleAllDaySlotEvent($event, slotData.day)\"\n (contextmenu)=\"handleAllDaySlotEvent($event, slotData.day)\"\n >\n <!-- Single-day all-day appointments only -->\n @if (slotData.appointments.length > 0) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragData]=\"slotData.appointments[0]\"\n [dragDisabled]=\"!draggable() || slotData.appointments[0].readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, slotData.appointments[0])\"\n (dblclick)=\"handleAppointmentEvent($event, slotData.appointments[0])\"\n (contextmenu)=\"handleAppointmentEvent($event, slotData.appointments[0])\"\n [title]=\"tooltipTemplate() ? '' : slotData.appointments[0].title\"\n class=\"ax-scheduler-header-week-appointment\"\n [style.width]=\"slotData.appointments.length > 1 ? 'calc(100% - 2rem)' : '100%'\"\n [class.ax-state-active]=\"isActive(slotData.appointments[0].id)\"\n [class]=\"\n slotData.appointments[0].cssClass ??\n 'ax-scheduler-' + (slotData.appointments[0].priority ?? 'primary') + '-priority'\n \"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltipContext]=\"slotData.appointments[0]\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ slotData.appointments[0].title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, slotData.appointments[0])\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n ></ax-icon>\n }\n </ax-title>\n </div>\n }\n @if (slotData.appointments.length > 1) {\n <div\n #moreAppointments\n class=\"ax-scheduler-appointment-badge\"\n [style.width]=\"'1.5rem'\"\n [style.border]=\"'none'\"\n [class]=\"\n slotData.appointments[1].cssClass ??\n 'ax-scheduler-' + (slotData.appointments[1].priority ?? 'primary') + '-priority'\n \"\n >\n +{{ slotData.appointments.length - 1 }}\n </div>\n <ax-popover [target]=\"moreAppointments\">\n <div class=\"ax-scheduler-popover\" [class.ax-state-readonly]=\"readonly()\" axDropZone>\n @for (appointment of slotData.appointments; track appointment.id; let first = $first) {\n @if (!first) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"appointment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || appointment.readonly || readonly()\"\n (click)=\"handleAppointmentEvent($event, appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n [title]=\"tooltipTemplate() ? '' : appointment.title\"\n class=\"ax-scheduler-popover-appointment\"\n [class.ax-state-active]=\"isActive(appointment.id)\"\n [class]=\"\n appointment.cssClass ?? 'ax-scheduler-' + (appointment.priority ?? 'primary') + '-priority'\n \"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltipContext]=\"appointment\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n ></ax-icon>\n }\n </ax-title>\n </div>\n }\n }\n </div>\n </ax-popover>\n }\n </div>\n }\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"ax-scheduler-week-time-container\">\n <div class=\"ax-scheduler-week-time\" aria-hidden=\"true\">\n @for (time of hoursArray(); track time.date.getTime()) {\n <div>\n {{ time | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n </div>\n }\n </div>\n\n <div class=\"ax-scheduler-week-table-container\">\n <!-- Current Time Line Indicator -->\n @if (\n shouldShowCurrentTimeForToday() &&\n getCurrentTimePositionWithOffset() !== null &&\n getCurrentDayColumnPosition() !== null\n ) {\n <div\n #currentTimeLine\n class=\"ax-scheduler-current-time-line\"\n [style.inset-block-start]=\"getCurrentTimePositionWithOffset()\"\n [style.inset-inline-start]=\"getCurrentDayColumnPosition()\"\n [style.width]=\"getCurrentDayColumnWidth()\"\n ></div>\n }\n <div class=\"ax-scheduler-week-appointment-container\">\n @for (appt of visibleAppointmentsLayout(); track appt.appointment.id) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragData]=\"appt.appointment\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || appt.appointment.readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, appt.appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, appt.appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, appt.appointment)\"\n [title]=\"tooltipTemplate() ? '' : appt.appointment.title\"\n [style.width]=\"appt.layoutWidth\"\n [style.height]=\"appt.layoutHeight\"\n class=\"ax-scheduler-week-appointment\"\n [style.inset-block-start]=\"appt.layoutTop\"\n [style.inset-inline-start]=\"appt.layoutLeft\"\n [class.ax-state-active]=\"isActive(appt.appointment.id)\"\n [class]=\"\n appt.appointment.cssClass ?? 'ax-scheduler-' + (appt.appointment.priority ?? 'primary') + '-priority'\n \"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltipContext]=\"appt.appointment\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ appt.appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, appt.appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n ></ax-icon>\n }\n </ax-title>\n <ax-subtitle>\n {{\n appt.appointment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n -\n {{ appt.appointment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n </ax-subtitle>\n </div>\n }\n\n <!-- Overflow Badges with Popovers -->\n @for (badge of overflowBadgesWithData(); track badge.key) {\n <!-- Wrap badge and popover for targeting -->\n <div\n style=\"position: absolute\"\n class=\"ax-scheduler-badge-wrapper\"\n [style.inset-block-start]=\"badge.badgeTop\"\n [style.inset-inline-start]=\"badge.badgeLeft\"\n >\n <!-- The Badge itself -->\n <div\n #actionButton\n class=\"ax-scheduler-appointment-badge\"\n [class]=\"\n badge.hiddenAppointments[0].cssClass ??\n 'ax-scheduler-' + (badge.hiddenAppointments[0].priority ?? 'primary') + '-priority'\n \"\n >\n +{{ badge.count }}\n </div>\n <!-- The Popover -->\n <ax-popover [target]=\"actionButton\">\n <div class=\"ax-scheduler-popover\" axDropZone>\n @for (appointment of badge.hiddenAppointments; track appointment.id) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"appointment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || appointment.readonly || readonly()\"\n (click)=\"handleAppointmentEvent($event, appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n [title]=\"tooltipTemplate() ? '' : appointment.title\"\n class=\"ax-scheduler-popover-appointment\"\n [class.ax-state-active]=\"isActive(appointment.id)\"\n [class]=\"appointment.cssClass ?? 'ax-scheduler-' + (appointment.priority ?? 'primary') + '-priority'\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltipContext]=\"appointment\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n ></ax-icon>\n }\n </ax-title>\n <ax-subtitle>\n {{\n appointment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n -\n {{\n appointment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n </ax-subtitle>\n </div>\n }\n </div>\n </ax-popover>\n </div>\n }\n </div>\n\n <table aria-hidden=\"true\" [border]=\"1\">\n <tbody>\n @for (time of hoursArray(); track time.date.getTime()) {\n <tr>\n @for (day of daysArray(); track day.date.date.getTime()) {\n <td\n axDropZone\n #zone=\"axDropZone\"\n [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n (onElementDrop)=\"handleSingleDayDrop($event, time, day.date, 0)\"\n (click)=\"handleSingleSlotEvent($event, time, day.date, 0)\"\n (dblclick)=\"handleSingleSlotEvent($event, time, day.date, 0)\"\n (contextmenu)=\"handleSingleSlotEvent($event, time, day.date, 0)\"\n [attr.data-slot-id]=\"day.date.format('YYYYMMDD') + '-' + time.format('HHmm')\"\n ></td>\n }\n </tr>\n <tr>\n @for (day of daysArray(); track day.date.date.getTime()) {\n <td\n axDropZone\n #zone2=\"axDropZone\"\n [class.ax-scheduler-slot-hovered]=\"zone2.isHovered()\"\n (onElementDrop)=\"handleSingleDayDrop($event, time, day.date, 1)\"\n (click)=\"handleSingleSlotEvent($event, time, day.date, 1)\"\n (dblclick)=\"handleSingleSlotEvent($event, time, day.date, 1)\"\n (contextmenu)=\"handleSingleSlotEvent($event, time, day.date, 1)\"\n [attr.data-slot-id]=\"day.date.format('YYYYMMDD') + '-' + time.add('minute', 30).format('HHmm')\"\n ></td>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n</div>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-font-weight:initial;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-content:\"\"}}}@layer components{ax-scheduler-week-view{--ax-scheduler-week-spanning-row-height:1.5rem;--ax-scheduler-week-spanning-gap:.125rem;--ax-scheduler-week-spanning-row-gap:.25rem;min-width:var(--ax-comp-scheduler-width);background-color:inherit;display:block;position:relative}ax-scheduler-week-view .ax-scheduler-appointment-badge{width:calc(var(--spacing,.25rem) * 6);height:calc(var(--spacing,.25rem) * 6);cursor:pointer;font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));border-radius:3.40282e38px;justify-content:center;align-items:center;display:flex}ax-scheduler-week-view .ax-scheduler-week-header{z-index:20;background-color:var(--ax-comp-scheduler-all-day-bg,inherit);width:100%;position:sticky;top:0}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;display:flex}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-table{z-index:10;width:var(--ax-comp-scheduler-basic-view-blocks-width);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;text-align:center;flex-shrink:0;position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 0)}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date{width:calc(100% - var(--ax-comp-scheduler-basic-view-blocks-width));display:flex}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div{border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));text-align:center;width:100%}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day{justify-content:center;align-items:center;gap:var(--spacing,.25rem);padding-inline:calc(var(--spacing,.25rem) * 2);display:grid}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day.ax-state-today{background-color:rgba(var(--ax-sys-color-primary-surface))}@supports (color:color-mix(in lab,red,red)){ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day.ax-state-today{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 5%,transparent)}}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day.ax-state-today .ax-scheduler-week-header-date-day-char{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day.ax-state-today .ax-scheduler-week-header-date-day-num{--tw-font-weight:var(--font-weight-bold,700);font-weight:var(--font-weight-bold,700)}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day.ax-state-holiday{color:var(--ax-scheduler-holiday-color,rgba(var(--ax-sys-color-danger-surface)))}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day.ax-state-holiday.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day .ax-scheduler-week-header-date-day-char{--tw-font-weight:var(--font-weight-light,300);max-width:100%;font-weight:var(--font-weight-light,300)}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day .ax-scheduler-week-header-date-day-num{font-size:var(--text-xl,1.25rem);line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75 / 1.25)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div:last-child{border-inline-end-style:var(--tw-border-style);border-inline-end-width:0}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date .ax-scheduler-all-day-slot{gap:var(--spacing,.25rem);width:14.2857%;display:flex}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date .ax-scheduler-all-day-slot .ax-scheduler-header-week-appointment{border-radius:calc(var(--ax-sys-border-radius) / 2);width:100%;padding-inline:calc(var(--spacing,.25rem) * 2);text-align:start;display:block;overflow:hidden}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date .ax-scheduler-all-day-slot ax-popover{display:none}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content{width:calc(100% - var(--ax-comp-scheduler-basic-view-blocks-width));flex-direction:column;display:flex;position:relative}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-spanning-layer{padding-block:var(--spacing,.25rem);align-content:flex-start;row-gap:var(--ax-scheduler-week-spanning-row-gap);grid-template-columns:repeat(7,1fr);display:grid;position:relative}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-spanning-layer:before{content:\"\";pointer-events:none;z-index:0;background:linear-gradient(to right,transparent calc(100% / 7 * 1 - .5px),rgba(var(--ax-sys-color-border-lightest-surface)) calc(100% / 7 * 1 - .5px),rgba(var(--ax-sys-color-border-lightest-surface)) calc(100% / 7 * 1 + .5px),transparent calc(100% / 7 * 1 + .5px),transparent calc(100% / 7 * 2 - .5px),rgba(var(--ax-sys-color-border-lightest-surface)) calc(100% / 7 * 2 - .5px),rgba(var(--ax-sys-color-border-lightest-surface)) calc(100% / 7 * 2 + .5px),transparent calc(100% / 7 * 2 + .5px),transparent calc(100% / 7 * 3 - .5px),rgba(var(--ax-sys-color-border-lightest-surface)) calc(100% / 7 * 3 - .5px),rgba(var(--ax-sys-color-border-lightest-surface)) calc(100% / 7 * 3 + .5px),transparent calc(100% / 7 * 3 + .5px),transparent calc(100% / 7 * 4 - .5px),rgba(var(--ax-sys-color-border-lightest-surface)) calc(100% / 7 * 4 - .5px),rgba(var(--ax-sys-color-border-lightest-surface)) calc(100% / 7 * 4 + .5px),transparent calc(100% / 7 * 4 + .5px),transparent calc(100% / 7 * 5 - .5px),rgba(var(--ax-sys-color-border-lightest-surface)) calc(100% / 7 * 5 - .5px),rgba(var(--ax-sys-color-border-lightest-surface)) calc(100% / 7 * 5 + .5px),transparent calc(100% / 7 * 5 + .5px),transparent calc(100% / 7 * 6 - .5px),rgba(var(--ax-sys-color-border-lightest-surface)) calc(100% / 7 * 6 - .5px),rgba(var(--ax-sys-color-border-lightest-surface)) calc(100% / 7 * 6 + .5px),transparent calc(100% / 7 * 6 + .5px));position:absolute;top:0;right:0;bottom:0;left:0}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-spanning-layer .ax-scheduler-week-spanning-appointment{z-index:1;cursor:pointer;text-overflow:ellipsis;border-radius:var(--radius-sm,.25rem);padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:calc(var(--spacing,.25rem) * .5);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));white-space:nowrap;height:var(--ax-scheduler-week-spanning-row-height);align-items:center;margin-inline:.125rem;display:flex;overflow:hidden}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-spanning-layer .ax-scheduler-week-spanning-appointment .ax-spanning-appointment-title{justify-content:space-between;align-items:center;width:100%;display:flex}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-spanning-layer .ax-scheduler-week-spanning-appointment .ax-spanning-appointment-title .ax-scheduler-truncate{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-spanning-layer .ax-scheduler-week-spanning-appointment .ax-spanning-appointment-title .ax-scheduler-action-icon{cursor:pointer;width:auto;flex-shrink:0;margin-inline-start:var(--spacing,.25rem)}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-spanning-layer .ax-scheduler-week-spanning-appointment.ax-spanning-start-clipped{border-start-start-radius:0;border-end-start-radius:0;margin-inline-start:0;padding-inline-start:1rem;position:relative}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-spanning-layer .ax-scheduler-week-spanning-appointment.ax-spanning-start-clipped:before{content:\"\\2190 \";--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);opacity:.7;top:50%;font-size:.65rem;position:absolute;inset-inline-start:.25rem}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-spanning-layer .ax-scheduler-week-spanning-appointment.ax-spanning-end-clipped{border-start-end-radius:0;border-end-end-radius:0;margin-inline-end:0;padding-inline-end:1rem;position:relative}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-spanning-layer .ax-scheduler-week-spanning-appointment.ax-spanning-end-clipped:after{content:\" \\2192\";--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);opacity:.7;top:50%;font-size:.65rem;position:absolute;inset-inline-end:.25rem}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-allday-slots{height:100%;display:flex}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-allday-slots .ax-scheduler-all-day-slot{gap:var(--spacing,.25rem);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));width:14.2857%;padding-block:var(--spacing,.25rem);display:flex}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-allday-slots .ax-scheduler-all-day-slot:last-child{border-inline-end-style:var(--tw-border-style);border-inline-end-width:0}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-allday-slots .ax-scheduler-all-day-slot .ax-scheduler-header-week-appointment{border-radius:calc(var(--ax-sys-border-radius) / 2);width:100%;padding-inline:calc(var(--spacing,.25rem) * 2);text-align:start;display:block;overflow:hidden}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-allday-slots .ax-scheduler-all-day-slot ax-popover{display:none}ax-scheduler-week-view .ax-scheduler-week-time-container{background-color:inherit;width:100%;display:flex}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-time{z-index:15;background-color:var(--ax-comp-scheduler-all-day-bg,inherit);position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 0)}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-time div{height:calc(var(--ax-comp-scheduler-basic-view-blocks-height) * 2);width:var(--ax-comp-scheduler-basic-view-blocks-width);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding-inline:calc(var(--spacing,.25rem) * 2);text-align:center;display:block;position:relative}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container{width:100%;position:relative}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container .ax-scheduler-week-appointment-container{width:100%;position:absolute;top:0}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container .ax-scheduler-week-appointment-container .ax-scheduler-week-appointment{border-radius:calc(var(--ax-sys-border-radius) / 2);padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:var(--spacing,.25rem);flex-direction:column;display:flex;position:absolute;inset-inline-start:calc(var(--spacing,.25rem) * 0)}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table{width:100%}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table tr{height:var(--ax-comp-scheduler-basic-view-blocks-height);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));display:flex}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table tr:first-child{border-top-style:var(--tw-border-style);border-top-width:0}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table tr td{border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));text-align:center;width:100%}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table tr td:last-child{border-inline-end-style:var(--tw-border-style);border-inline-end-width:0}ax-scheduler-week-view:not(.ax-state-readonly) .ax-scheduler-week-appointment,ax-scheduler-week-view:not(.ax-state-readonly) .ax-scheduler-header-week-appointment{cursor:pointer}ax-scheduler-week-view:not(.ax-state-readonly) .ax-scheduler-all-day-slot,ax-scheduler-week-view:not(.ax-state-readonly) .ax-scheduler-week-table-container>table td{cursor:pointer;transition-property:background-color;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}:is(ax-scheduler-week-view:not(.ax-state-readonly) .ax-scheduler-all-day-slot,ax-scheduler-week-view:not(.ax-state-readonly) .ax-scheduler-week-table-container>table td):hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg,var(--ax-sys-color-primary-surface),.1))}ax-scheduler-week-view ax-title{justify-content:space-between;display:flex}ax-scheduler-week-view ax-title .ax-scheduler-action-icon{cursor:pointer;width:auto}ax-scheduler-week-view .ax-scheduler-current-time-line{height:calc(var(--spacing,.25rem) * .5)}ax-scheduler-week-view .ax-scheduler-current-time-line:before{content:var(--tw-content);inset-inline-start:-6px;top:-5px}ax-scheduler.ax-rtl ax-scheduler-week-view .ax-scheduler-week-spanning-appointment.ax-spanning-start-clipped:before{content:\"\\2192 \"}ax-scheduler.ax-rtl ax-scheduler-week-view .ax-scheduler-week-spanning-appointment.ax-spanning-end-clipped:after{content:\" \\2190\"}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-translate-x{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-y{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-z{syntax:\"*\";inherits:false;initial-value:0}@property --tw-content{syntax:\"*\";inherits:false;initial-value:\"\"}\n/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["axDrag", "dragData", "dragDisabled", "dragTransition", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragClonedTemplate", "dragCursor", "dragBoundary", "dragTransitionDuration"], outputs: ["dragPositionChanged"] }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "directive", type: AXDropZoneDirective, selector: "[axDropZone]", inputs: ["dropZoneGroup"], outputs: ["onElementDrop", "onElementHover"], exportAs: ["axDropZone"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXFormatPipe, name: "format" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
4502
4524
|
}
|
|
4503
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
4525
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXSchedulerWeekViewComponent, decorators: [{
|
|
4504
4526
|
type: Component,
|
|
4505
4527
|
args: [{ selector: 'ax-scheduler-week-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
4506
4528
|
'[class.ax-state-readonly]': 'readonly()',
|
|
@@ -4514,24 +4536,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
|
|
|
4514
4536
|
AXDropZoneDirective,
|
|
4515
4537
|
AXDecoratorIconComponent,
|
|
4516
4538
|
AXDecoratorGenericComponent,
|
|
4517
|
-
], providers: [{ provide: AXComponent, useExisting: AXSchedulerWeekViewComponent }], template: "<div class=\"ax-scheduler-week-header\">\n <div class=\"ax-scheduler-week-header-days\">\n <div class=\"ax-scheduler-week-header-table\"></div>\n <div class=\"ax-scheduler-week-header-date\" aria-hidden=\"true\">\n @for (day of daysArray(); track day.date.date.getTime()) {\n <div\n [class.ax-state-today]=\"isToday(day.date)\"\n class=\"ax-scheduler-week-header-date-day {{\n day.holiday.state !== 'none' ? (day.holiday.holiday?.cssClass ?? 'ax-state-holiday') : ''\n }}\"\n >\n <span\n class=\"ax-scheduler-week-header-date-day-char ax-scheduler-truncate\"\n [axTooltip]=\"day.holiday?.holiday?.title ?? ''\"\n >\n {{ day.date | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n @if (day.holiday.state === 'holiday' && day.holiday.holiday.title) {\n ( {{ day.holiday.holiday.title }} )\n }\n </span>\n <span class=\"ax-scheduler-week-header-date-day-num\">\n {{ day.date | format: 'date' : { format: 'DD', calendar: calendar() } | async }}\n </span>\n </div>\n }\n </div>\n </div>\n <!-- All-day / Multi-day Spanning Appointments Header -->\n <div class=\"ax-scheduler-week-header-days ax-scheduler-week-allday-header\">\n <div class=\"ax-scheduler-week-header-table\">{{ '@acorex:dateTime.duration.all-day' | translate | async }}</div>\n <div class=\"ax-scheduler-week-allday-content\">\n <!-- Spanning Appointments Layer -->\n @if (spanningAppointments().length > 0) {\n <div class=\"ax-scheduler-week-spanning-layer\">\n @for (spanning of spanningAppointments(); track spanning.appointment.id) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"spanning.appointment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || spanning.appointment.readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, spanning.appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, spanning.appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, spanning.appointment)\"\n [title]=\"\n tooltipTemplate()\n ? ''\n : spanning.appointment.title +\n ' (' +\n (spanning.appointment.startDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ' - ' +\n (spanning.appointment.endDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ')'\n \"\n class=\"ax-scheduler-week-spanning-appointment\"\n [class.ax-spanning-start-clipped]=\"spanning.isStartClipped\"\n [class.ax-spanning-end-clipped]=\"spanning.isEndClipped\"\n [class.ax-state-active]=\"isActive(spanning.appointment.id)\"\n [class]=\"\n spanning.appointment.cssClass ??\n 'ax-scheduler-' + (spanning.appointment.priority ?? 'primary') + '-priority'\n \"\n [style.grid-column]=\"spanning.startDayIndex + 1 + ' / span ' + spanning.spanCount\"\n [style.--spanning-row-index]=\"spanning.rowIndex\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n [axTooltipContext]=\"spanning.appointment\"\n >\n <span class=\"ax-spanning-appointment-title\">\n <span class=\"ax-scheduler-truncate\">{{ spanning.appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, spanning.appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n ></ax-icon>\n }\n </span>\n </div>\n }\n </div>\n }\n <!-- Drop zones for each day -->\n <div class=\"ax-scheduler-week-allday-slots\">\n @for (slotData of allDayAppointmentsPerDay(); track slotData.day.date.getTime()) {\n <div\n axDropZone\n #zone2=\"axDropZone\"\n [class.ax-scheduler-slot-hovered]=\"zone2.isHovered()\"\n (onElementDrop)=\"handleAllDayDrop($event, slotData.day)\"\n class=\"ax-scheduler-all-day-slot\"\n (click)=\"handleAllDaySlotEvent($event, slotData.day)\"\n (dblclick)=\"handleAllDaySlotEvent($event, slotData.day)\"\n (contextmenu)=\"handleAllDaySlotEvent($event, slotData.day)\"\n >\n <!-- Single-day all-day appointments only -->\n @if (slotData.appointments.length > 0) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragData]=\"slotData.appointments[0]\"\n [dragDisabled]=\"!draggable() || slotData.appointments[0].readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, slotData.appointments[0])\"\n (dblclick)=\"handleAppointmentEvent($event, slotData.appointments[0])\"\n (contextmenu)=\"handleAppointmentEvent($event, slotData.appointments[0])\"\n [title]=\"tooltipTemplate() ? '' : slotData.appointments[0].title\"\n class=\"ax-scheduler-header-week-appointment\"\n [style.width]=\"slotData.appointments.length > 1 ? 'calc(100% - 2rem)' : '100%'\"\n [class.ax-state-active]=\"isActive(slotData.appointments[0].id)\"\n [class]=\"\n slotData.appointments[0].cssClass ??\n 'ax-scheduler-' + (slotData.appointments[0].priority ?? 'primary') + '-priority'\n \"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltipContext]=\"slotData.appointments[0]\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ slotData.appointments[0].title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, slotData.appointments[0])\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n ></ax-icon>\n }\n </ax-title>\n </div>\n }\n @if (slotData.appointments.length > 1) {\n <div\n #moreAppointments\n class=\"ax-scheduler-appointment-badge\"\n [style.width]=\"'1.5rem'\"\n [style.border]=\"'none'\"\n [class]=\"\n slotData.appointments[1].cssClass ??\n 'ax-scheduler-' + (slotData.appointments[1].priority ?? 'primary') + '-priority'\n \"\n >\n +{{ slotData.appointments.length - 1 }}\n </div>\n <ax-popover [target]=\"moreAppointments\">\n <div class=\"ax-scheduler-popover\" [class.ax-state-readonly]=\"readonly()\" axDropZone>\n @for (appointment of slotData.appointments; track appointment.id; let first = $first) {\n @if (!first) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"appointment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || appointment.readonly || readonly()\"\n (click)=\"handleAppointmentEvent($event, appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n [title]=\"tooltipTemplate() ? '' : appointment.title\"\n class=\"ax-scheduler-popover-appointment\"\n [class.ax-state-active]=\"isActive(appointment.id)\"\n [class]=\"\n appointment.cssClass ?? 'ax-scheduler-' + (appointment.priority ?? 'primary') + '-priority'\n \"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltipContext]=\"appointment\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n ></ax-icon>\n }\n </ax-title>\n </div>\n }\n }\n </div>\n </ax-popover>\n }\n </div>\n }\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"ax-scheduler-week-time-container\">\n <div class=\"ax-scheduler-week-time\" aria-hidden=\"true\">\n @for (time of hoursArray(); track time.date.getTime()) {\n <div>\n {{ time | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n </div>\n }\n </div>\n\n <div class=\"ax-scheduler-week-table-container\">\n <!-- Current Time Line Indicator -->\n @if (\n shouldShowCurrentTimeForToday() &&\n getCurrentTimePositionWithOffset() !== null &&\n getCurrentDayColumnPosition() !== null\n ) {\n <div\n #currentTimeLine\n class=\"ax-scheduler-current-time-line\"\n [style.inset-block-start]=\"getCurrentTimePositionWithOffset()\"\n [style.inset-inline-start]=\"getCurrentDayColumnPosition()\"\n [style.width]=\"getCurrentDayColumnWidth()\"\n ></div>\n }\n <div class=\"ax-scheduler-week-appointment-container\">\n @for (appt of visibleAppointmentsLayout(); track appt.appointment.id) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragData]=\"appt.appointment\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || appt.appointment.readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, appt.appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, appt.appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, appt.appointment)\"\n [title]=\"tooltipTemplate() ? '' : appt.appointment.title\"\n [style.width]=\"appt.layoutWidth\"\n [style.height]=\"appt.layoutHeight\"\n class=\"ax-scheduler-week-appointment\"\n [style.inset-block-start]=\"appt.layoutTop\"\n [style.inset-inline-start]=\"appt.layoutLeft\"\n [class.ax-state-active]=\"isActive(appt.appointment.id)\"\n [class]=\"\n appt.appointment.cssClass ?? 'ax-scheduler-' + (appt.appointment.priority ?? 'primary') + '-priority'\n \"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltipContext]=\"appt.appointment\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ appt.appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, appt.appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n ></ax-icon>\n }\n </ax-title>\n <ax-subtitle>\n {{\n appt.appointment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n -\n {{ appt.appointment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n </ax-subtitle>\n </div>\n }\n\n <!-- Overflow Badges with Popovers -->\n @for (badge of overflowBadgesWithData(); track badge.key) {\n <!-- Wrap badge and popover for targeting -->\n <div\n style=\"position: absolute\"\n class=\"ax-scheduler-badge-wrapper\"\n [style.inset-block-start]=\"badge.badgeTop\"\n [style.inset-inline-start]=\"badge.badgeLeft\"\n >\n <!-- The Badge itself -->\n <div\n #actionButton\n class=\"ax-scheduler-appointment-badge\"\n [class]=\"\n badge.hiddenAppointments[0].cssClass ??\n 'ax-scheduler-' + (badge.hiddenAppointments[0].priority ?? 'primary') + '-priority'\n \"\n >\n +{{ badge.count }}\n </div>\n <!-- The Popover -->\n <ax-popover [target]=\"actionButton\">\n <div class=\"ax-scheduler-popover\" axDropZone>\n @for (appointment of badge.hiddenAppointments; track appointment.id) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"appointment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || appointment.readonly || readonly()\"\n (click)=\"handleAppointmentEvent($event, appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n [title]=\"tooltipTemplate() ? '' : appointment.title\"\n class=\"ax-scheduler-popover-appointment\"\n [class.ax-state-active]=\"isActive(appointment.id)\"\n [class]=\"appointment.cssClass ?? 'ax-scheduler-' + (appointment.priority ?? 'primary') + '-priority'\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltipContext]=\"appointment\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n ></ax-icon>\n }\n </ax-title>\n <ax-subtitle>\n {{\n appointment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n -\n {{\n appointment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n </ax-subtitle>\n </div>\n }\n </div>\n </ax-popover>\n </div>\n }\n </div>\n\n <table aria-hidden=\"true\" [border]=\"1\">\n <tbody>\n @for (time of hoursArray(); track time.date.getTime()) {\n <tr>\n @for (day of daysArray(); track day.date.date.getTime()) {\n <td\n axDropZone\n #zone=\"axDropZone\"\n [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n (onElementDrop)=\"handleSingleDayDrop($event, time, day.date, 0)\"\n (click)=\"handleSingleSlotEvent($event, time, day.date, 0)\"\n (dblclick)=\"handleSingleSlotEvent($event, time, day.date, 0)\"\n (contextmenu)=\"handleSingleSlotEvent($event, time, day.date, 0)\"\n [attr.data-slot-id]=\"day.date.format('YYYYMMDD') + '-' + time.format('HHmm')\"\n ></td>\n }\n </tr>\n <tr>\n @for (day of daysArray(); track day.date.date.getTime()) {\n <td\n axDropZone\n #zone2=\"axDropZone\"\n [class.ax-scheduler-slot-hovered]=\"zone2.isHovered()\"\n (onElementDrop)=\"handleSingleDayDrop($event, time, day.date, 1)\"\n (click)=\"handleSingleSlotEvent($event, time, day.date, 1)\"\n (dblclick)=\"handleSingleSlotEvent($event, time, day.date, 1)\"\n (contextmenu)=\"handleSingleSlotEvent($event, time, day.date, 1)\"\n [attr.data-slot-id]=\"day.date.format('YYYYMMDD') + '-' + time.add('minute', 30).format('HHmm')\"\n ></td>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n</div>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-font-weight:initial;--tw-content:\"\"}}}@layer components{ax-scheduler-week-view{min-width:var(--ax-comp-scheduler-width);background-color:inherit;display:block;position:relative}ax-scheduler-week-view .ax-scheduler-appointment-badge{width:calc(var(--spacing,.25rem) * 6);height:calc(var(--spacing,.25rem) * 6);cursor:pointer;font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));border-radius:3.40282e38px;justify-content:center;align-items:center;display:flex}ax-scheduler-week-view .ax-scheduler-week-header{top:calc(var(--spacing,.25rem) * 0);z-index:10;background-color:var(--ax-comp-scheduler-all-day-bg,inherit);width:100%;position:sticky}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;display:flex}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-table{z-index:10;width:var(--ax-comp-scheduler-basic-view-blocks-width);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;text-align:center;flex-shrink:0;position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 0)}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date{width:calc(100% - var(--ax-comp-scheduler-basic-view-blocks-width));display:flex}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div{border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));text-align:center;width:100%}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day{justify-content:center;align-items:center;gap:calc(var(--spacing,.25rem) * 1);padding-inline:calc(var(--spacing,.25rem) * 2);display:grid}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day.ax-state-today{background-color:rgba(var(--ax-sys-color-primary-surface))}@supports (color:color-mix(in lab,red,red)){ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day.ax-state-today{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 5%,transparent)}}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day.ax-state-today .ax-scheduler-week-header-date-day-char{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day.ax-state-today .ax-scheduler-week-header-date-day-num{--tw-font-weight:var(--font-weight-bold,700);font-weight:var(--font-weight-bold,700)}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day.ax-state-holiday{color:rgba(var(--ax-sys-color-danger-600))}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day.ax-state-holiday.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day .ax-scheduler-week-header-date-day-char{--tw-font-weight:var(--font-weight-light,300);max-width:100%;font-weight:var(--font-weight-light,300)}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day .ax-scheduler-week-header-date-day-num{font-size:var(--text-xl,1.25rem);line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75 / 1.25)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div:last-child{border-inline-end-style:var(--tw-border-style);border-inline-end-width:0}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date .ax-scheduler-all-day-slot{gap:calc(var(--spacing,.25rem) * 1);width:14.2857%;display:flex}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date .ax-scheduler-all-day-slot .ax-scheduler-header-week-appointment{border-radius:calc(var(--ax-sys-border-radius) / 2);width:100%;padding-inline:calc(var(--spacing,.25rem) * 2);text-align:start;display:block;overflow:hidden}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date .ax-scheduler-all-day-slot ax-popover{display:none}ax-scheduler-week-view .ax-scheduler-week-time-container{background-color:inherit;width:100%;display:flex}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-time{z-index:15;background-color:var(--ax-comp-scheduler-all-day-bg,inherit);position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 0)}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-time div{height:calc(var(--ax-comp-scheduler-basic-view-blocks-height) * 2);width:var(--ax-comp-scheduler-basic-view-blocks-width);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding-inline:calc(var(--spacing,.25rem) * 2);text-align:center;display:block;position:relative}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container{width:100%;position:relative}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container .ax-scheduler-week-appointment-container{top:calc(var(--spacing,.25rem) * 0);width:100%;position:absolute}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container .ax-scheduler-week-appointment-container .ax-scheduler-week-appointment{border-radius:calc(var(--ax-sys-border-radius) / 2);padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:calc(var(--spacing,.25rem) * 1);flex-direction:column;display:flex;position:absolute;inset-inline-start:calc(var(--spacing,.25rem) * 0)}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table{width:100%}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table tr{height:var(--ax-comp-scheduler-basic-view-blocks-height);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));display:flex}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table tr:first-child{border-top-style:var(--tw-border-style);border-top-width:0}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table tr td{border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));text-align:center;width:100%}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table tr td:last-child{border-inline-end-style:var(--tw-border-style);border-inline-end-width:0}ax-scheduler-week-view:not(.ax-state-readonly) .ax-scheduler-week-appointment,ax-scheduler-week-view:not(.ax-state-readonly) .ax-scheduler-header-week-appointment{cursor:pointer}ax-scheduler-week-view:not(.ax-state-readonly) .ax-scheduler-all-day-slot,ax-scheduler-week-view:not(.ax-state-readonly) .ax-scheduler-week-table-container>table td{cursor:pointer;transition-property:background-color;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}@media(hover:hover){:is(ax-scheduler-week-view:not(.ax-state-readonly) .ax-scheduler-all-day-slot,ax-scheduler-week-view:not(.ax-state-readonly) .ax-scheduler-week-table-container>table td):hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg,var(--ax-sys-color-primary-surface),.1))}}ax-scheduler-week-view ax-title{justify-content:space-between;display:flex}ax-scheduler-week-view ax-title .ax-scheduler-action-icon{cursor:pointer;width:auto}ax-scheduler-week-view .ax-scheduler-current-time-line{height:calc(var(--spacing,.25rem) * .5)}ax-scheduler-week-view .ax-scheduler-current-time-line:before{content:var(--tw-content);inset-inline-start:-5px;top:calc(var(--spacing,.25rem) * -1.5)}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-content{syntax:\"*\";inherits:false;initial-value:\"\"}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"] }]
|
|
4539
|
+
], providers: [{ provide: AXComponent, useExisting: AXSchedulerWeekViewComponent }], template: "<div class=\"ax-scheduler-week-header\">\n <div class=\"ax-scheduler-week-header-days\">\n <div class=\"ax-scheduler-week-header-table\"></div>\n <div class=\"ax-scheduler-week-header-date\" aria-hidden=\"true\">\n @for (day of daysArray(); track day.date.date.getTime()) {\n <div\n [class.ax-state-today]=\"isToday(day.date)\"\n class=\"ax-scheduler-week-header-date-day {{\n day.holiday.state !== 'none' ? (day.holiday.holiday?.cssClass ?? 'ax-state-holiday') : ''\n }}\"\n [style.--ax-scheduler-holiday-color]=\"day.holiday.holiday?.color ?? null\"\n >\n <span\n class=\"ax-scheduler-week-header-date-day-char ax-scheduler-truncate\"\n [axTooltip]=\"(day.holiday?.holiday?.description ?? day.holiday?.holiday?.title ?? '') | translate | async\"\n >\n {{ day.date | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n @if (day.holiday.state === 'holiday' && day.holiday.holiday.title) {\n ( {{ day.holiday.holiday.title | translate | async }} )\n }\n </span>\n <span class=\"ax-scheduler-week-header-date-day-num\">\n {{ day.date | format: 'date' : { format: 'DD', calendar: calendar() } | async }}\n </span>\n </div>\n }\n </div>\n </div>\n <!-- All-day / Multi-day Spanning Appointments Header -->\n <div class=\"ax-scheduler-week-header-days ax-scheduler-week-allday-header\">\n <div class=\"ax-scheduler-week-header-table\">{{ '@acorex:dateTime.duration.all-day' | translate | async }}</div>\n <div class=\"ax-scheduler-week-allday-content\">\n <!-- Spanning Appointments Layer -->\n @if (spanningAppointments().length > 0) {\n <div class=\"ax-scheduler-week-spanning-layer\">\n @for (spanning of spanningAppointments(); track spanning.appointment.id) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"spanning.appointment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || spanning.appointment.readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, spanning.appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, spanning.appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, spanning.appointment)\"\n [title]=\"\n tooltipTemplate()\n ? ''\n : spanning.appointment.title +\n ' (' +\n (spanning.appointment.startDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ' - ' +\n (spanning.appointment.endDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ')'\n \"\n class=\"ax-scheduler-week-spanning-appointment\"\n [class.ax-spanning-start-clipped]=\"spanning.isStartClipped\"\n [class.ax-spanning-end-clipped]=\"spanning.isEndClipped\"\n [class.ax-state-active]=\"isActive(spanning.appointment.id)\"\n [class]=\"\n spanning.appointment.cssClass ??\n 'ax-scheduler-' + (spanning.appointment.priority ?? 'primary') + '-priority'\n \"\n [style.grid-column]=\"spanning.startDayIndex + 1 + ' / span ' + spanning.spanCount\"\n [style.--spanning-row-index]=\"spanning.rowIndex\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n [axTooltipContext]=\"spanning.appointment\"\n >\n <span class=\"ax-spanning-appointment-title\">\n <span class=\"ax-scheduler-truncate\">{{ spanning.appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, spanning.appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n ></ax-icon>\n }\n </span>\n </div>\n }\n </div>\n }\n <!-- Drop zones for each day -->\n <div class=\"ax-scheduler-week-allday-slots\">\n @for (slotData of allDayAppointmentsPerDay(); track slotData.day.date.getTime()) {\n <div\n axDropZone\n #zone2=\"axDropZone\"\n [class.ax-scheduler-slot-hovered]=\"zone2.isHovered()\"\n (onElementDrop)=\"handleAllDayDrop($event, slotData.day)\"\n class=\"ax-scheduler-all-day-slot\"\n (click)=\"handleAllDaySlotEvent($event, slotData.day)\"\n (dblclick)=\"handleAllDaySlotEvent($event, slotData.day)\"\n (contextmenu)=\"handleAllDaySlotEvent($event, slotData.day)\"\n >\n <!-- Single-day all-day appointments only -->\n @if (slotData.appointments.length > 0) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragData]=\"slotData.appointments[0]\"\n [dragDisabled]=\"!draggable() || slotData.appointments[0].readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, slotData.appointments[0])\"\n (dblclick)=\"handleAppointmentEvent($event, slotData.appointments[0])\"\n (contextmenu)=\"handleAppointmentEvent($event, slotData.appointments[0])\"\n [title]=\"tooltipTemplate() ? '' : slotData.appointments[0].title\"\n class=\"ax-scheduler-header-week-appointment\"\n [style.width]=\"slotData.appointments.length > 1 ? 'calc(100% - 2rem)' : '100%'\"\n [class.ax-state-active]=\"isActive(slotData.appointments[0].id)\"\n [class]=\"\n slotData.appointments[0].cssClass ??\n 'ax-scheduler-' + (slotData.appointments[0].priority ?? 'primary') + '-priority'\n \"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltipContext]=\"slotData.appointments[0]\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ slotData.appointments[0].title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, slotData.appointments[0])\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n ></ax-icon>\n }\n </ax-title>\n </div>\n }\n @if (slotData.appointments.length > 1) {\n <div\n #moreAppointments\n class=\"ax-scheduler-appointment-badge\"\n [style.width]=\"'1.5rem'\"\n [style.border]=\"'none'\"\n [class]=\"\n slotData.appointments[1].cssClass ??\n 'ax-scheduler-' + (slotData.appointments[1].priority ?? 'primary') + '-priority'\n \"\n >\n +{{ slotData.appointments.length - 1 }}\n </div>\n <ax-popover [target]=\"moreAppointments\">\n <div class=\"ax-scheduler-popover\" [class.ax-state-readonly]=\"readonly()\" axDropZone>\n @for (appointment of slotData.appointments; track appointment.id; let first = $first) {\n @if (!first) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"appointment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || appointment.readonly || readonly()\"\n (click)=\"handleAppointmentEvent($event, appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n [title]=\"tooltipTemplate() ? '' : appointment.title\"\n class=\"ax-scheduler-popover-appointment\"\n [class.ax-state-active]=\"isActive(appointment.id)\"\n [class]=\"\n appointment.cssClass ?? 'ax-scheduler-' + (appointment.priority ?? 'primary') + '-priority'\n \"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltipContext]=\"appointment\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n ></ax-icon>\n }\n </ax-title>\n </div>\n }\n }\n </div>\n </ax-popover>\n }\n </div>\n }\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"ax-scheduler-week-time-container\">\n <div class=\"ax-scheduler-week-time\" aria-hidden=\"true\">\n @for (time of hoursArray(); track time.date.getTime()) {\n <div>\n {{ time | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n </div>\n }\n </div>\n\n <div class=\"ax-scheduler-week-table-container\">\n <!-- Current Time Line Indicator -->\n @if (\n shouldShowCurrentTimeForToday() &&\n getCurrentTimePositionWithOffset() !== null &&\n getCurrentDayColumnPosition() !== null\n ) {\n <div\n #currentTimeLine\n class=\"ax-scheduler-current-time-line\"\n [style.inset-block-start]=\"getCurrentTimePositionWithOffset()\"\n [style.inset-inline-start]=\"getCurrentDayColumnPosition()\"\n [style.width]=\"getCurrentDayColumnWidth()\"\n ></div>\n }\n <div class=\"ax-scheduler-week-appointment-container\">\n @for (appt of visibleAppointmentsLayout(); track appt.appointment.id) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragData]=\"appt.appointment\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || appt.appointment.readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, appt.appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, appt.appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, appt.appointment)\"\n [title]=\"tooltipTemplate() ? '' : appt.appointment.title\"\n [style.width]=\"appt.layoutWidth\"\n [style.height]=\"appt.layoutHeight\"\n class=\"ax-scheduler-week-appointment\"\n [style.inset-block-start]=\"appt.layoutTop\"\n [style.inset-inline-start]=\"appt.layoutLeft\"\n [class.ax-state-active]=\"isActive(appt.appointment.id)\"\n [class]=\"\n appt.appointment.cssClass ?? 'ax-scheduler-' + (appt.appointment.priority ?? 'primary') + '-priority'\n \"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltipContext]=\"appt.appointment\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ appt.appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, appt.appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n ></ax-icon>\n }\n </ax-title>\n <ax-subtitle>\n {{\n appt.appointment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n -\n {{ appt.appointment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n </ax-subtitle>\n </div>\n }\n\n <!-- Overflow Badges with Popovers -->\n @for (badge of overflowBadgesWithData(); track badge.key) {\n <!-- Wrap badge and popover for targeting -->\n <div\n style=\"position: absolute\"\n class=\"ax-scheduler-badge-wrapper\"\n [style.inset-block-start]=\"badge.badgeTop\"\n [style.inset-inline-start]=\"badge.badgeLeft\"\n >\n <!-- The Badge itself -->\n <div\n #actionButton\n class=\"ax-scheduler-appointment-badge\"\n [class]=\"\n badge.hiddenAppointments[0].cssClass ??\n 'ax-scheduler-' + (badge.hiddenAppointments[0].priority ?? 'primary') + '-priority'\n \"\n >\n +{{ badge.count }}\n </div>\n <!-- The Popover -->\n <ax-popover [target]=\"actionButton\">\n <div class=\"ax-scheduler-popover\" axDropZone>\n @for (appointment of badge.hiddenAppointments; track appointment.id) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"appointment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || appointment.readonly || readonly()\"\n (click)=\"handleAppointmentEvent($event, appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n [title]=\"tooltipTemplate() ? '' : appointment.title\"\n class=\"ax-scheduler-popover-appointment\"\n [class.ax-state-active]=\"isActive(appointment.id)\"\n [class]=\"appointment.cssClass ?? 'ax-scheduler-' + (appointment.priority ?? 'primary') + '-priority'\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltipContext]=\"appointment\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n ></ax-icon>\n }\n </ax-title>\n <ax-subtitle>\n {{\n appointment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n -\n {{\n appointment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n </ax-subtitle>\n </div>\n }\n </div>\n </ax-popover>\n </div>\n }\n </div>\n\n <table aria-hidden=\"true\" [border]=\"1\">\n <tbody>\n @for (time of hoursArray(); track time.date.getTime()) {\n <tr>\n @for (day of daysArray(); track day.date.date.getTime()) {\n <td\n axDropZone\n #zone=\"axDropZone\"\n [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n (onElementDrop)=\"handleSingleDayDrop($event, time, day.date, 0)\"\n (click)=\"handleSingleSlotEvent($event, time, day.date, 0)\"\n (dblclick)=\"handleSingleSlotEvent($event, time, day.date, 0)\"\n (contextmenu)=\"handleSingleSlotEvent($event, time, day.date, 0)\"\n [attr.data-slot-id]=\"day.date.format('YYYYMMDD') + '-' + time.format('HHmm')\"\n ></td>\n }\n </tr>\n <tr>\n @for (day of daysArray(); track day.date.date.getTime()) {\n <td\n axDropZone\n #zone2=\"axDropZone\"\n [class.ax-scheduler-slot-hovered]=\"zone2.isHovered()\"\n (onElementDrop)=\"handleSingleDayDrop($event, time, day.date, 1)\"\n (click)=\"handleSingleSlotEvent($event, time, day.date, 1)\"\n (dblclick)=\"handleSingleSlotEvent($event, time, day.date, 1)\"\n (contextmenu)=\"handleSingleSlotEvent($event, time, day.date, 1)\"\n [attr.data-slot-id]=\"day.date.format('YYYYMMDD') + '-' + time.add('minute', 30).format('HHmm')\"\n ></td>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n</div>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-font-weight:initial;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-content:\"\"}}}@layer components{ax-scheduler-week-view{--ax-scheduler-week-spanning-row-height:1.5rem;--ax-scheduler-week-spanning-gap:.125rem;--ax-scheduler-week-spanning-row-gap:.25rem;min-width:var(--ax-comp-scheduler-width);background-color:inherit;display:block;position:relative}ax-scheduler-week-view .ax-scheduler-appointment-badge{width:calc(var(--spacing,.25rem) * 6);height:calc(var(--spacing,.25rem) * 6);cursor:pointer;font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));border-radius:3.40282e38px;justify-content:center;align-items:center;display:flex}ax-scheduler-week-view .ax-scheduler-week-header{z-index:20;background-color:var(--ax-comp-scheduler-all-day-bg,inherit);width:100%;position:sticky;top:0}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;display:flex}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-table{z-index:10;width:var(--ax-comp-scheduler-basic-view-blocks-width);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;text-align:center;flex-shrink:0;position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 0)}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date{width:calc(100% - var(--ax-comp-scheduler-basic-view-blocks-width));display:flex}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div{border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));text-align:center;width:100%}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day{justify-content:center;align-items:center;gap:var(--spacing,.25rem);padding-inline:calc(var(--spacing,.25rem) * 2);display:grid}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day.ax-state-today{background-color:rgba(var(--ax-sys-color-primary-surface))}@supports (color:color-mix(in lab,red,red)){ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day.ax-state-today{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 5%,transparent)}}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day.ax-state-today .ax-scheduler-week-header-date-day-char{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day.ax-state-today .ax-scheduler-week-header-date-day-num{--tw-font-weight:var(--font-weight-bold,700);font-weight:var(--font-weight-bold,700)}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day.ax-state-holiday{color:var(--ax-scheduler-holiday-color,rgba(var(--ax-sys-color-danger-surface)))}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day.ax-state-holiday.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day .ax-scheduler-week-header-date-day-char{--tw-font-weight:var(--font-weight-light,300);max-width:100%;font-weight:var(--font-weight-light,300)}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day .ax-scheduler-week-header-date-day-num{font-size:var(--text-xl,1.25rem);line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75 / 1.25)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div:last-child{border-inline-end-style:var(--tw-border-style);border-inline-end-width:0}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date .ax-scheduler-all-day-slot{gap:var(--spacing,.25rem);width:14.2857%;display:flex}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date .ax-scheduler-all-day-slot .ax-scheduler-header-week-appointment{border-radius:calc(var(--ax-sys-border-radius) / 2);width:100%;padding-inline:calc(var(--spacing,.25rem) * 2);text-align:start;display:block;overflow:hidden}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date .ax-scheduler-all-day-slot ax-popover{display:none}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content{width:calc(100% - var(--ax-comp-scheduler-basic-view-blocks-width));flex-direction:column;display:flex;position:relative}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-spanning-layer{padding-block:var(--spacing,.25rem);align-content:flex-start;row-gap:var(--ax-scheduler-week-spanning-row-gap);grid-template-columns:repeat(7,1fr);display:grid;position:relative}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-spanning-layer:before{content:\"\";pointer-events:none;z-index:0;background:linear-gradient(to right,transparent calc(100% / 7 * 1 - .5px),rgba(var(--ax-sys-color-border-lightest-surface)) calc(100% / 7 * 1 - .5px),rgba(var(--ax-sys-color-border-lightest-surface)) calc(100% / 7 * 1 + .5px),transparent calc(100% / 7 * 1 + .5px),transparent calc(100% / 7 * 2 - .5px),rgba(var(--ax-sys-color-border-lightest-surface)) calc(100% / 7 * 2 - .5px),rgba(var(--ax-sys-color-border-lightest-surface)) calc(100% / 7 * 2 + .5px),transparent calc(100% / 7 * 2 + .5px),transparent calc(100% / 7 * 3 - .5px),rgba(var(--ax-sys-color-border-lightest-surface)) calc(100% / 7 * 3 - .5px),rgba(var(--ax-sys-color-border-lightest-surface)) calc(100% / 7 * 3 + .5px),transparent calc(100% / 7 * 3 + .5px),transparent calc(100% / 7 * 4 - .5px),rgba(var(--ax-sys-color-border-lightest-surface)) calc(100% / 7 * 4 - .5px),rgba(var(--ax-sys-color-border-lightest-surface)) calc(100% / 7 * 4 + .5px),transparent calc(100% / 7 * 4 + .5px),transparent calc(100% / 7 * 5 - .5px),rgba(var(--ax-sys-color-border-lightest-surface)) calc(100% / 7 * 5 - .5px),rgba(var(--ax-sys-color-border-lightest-surface)) calc(100% / 7 * 5 + .5px),transparent calc(100% / 7 * 5 + .5px),transparent calc(100% / 7 * 6 - .5px),rgba(var(--ax-sys-color-border-lightest-surface)) calc(100% / 7 * 6 - .5px),rgba(var(--ax-sys-color-border-lightest-surface)) calc(100% / 7 * 6 + .5px),transparent calc(100% / 7 * 6 + .5px));position:absolute;top:0;right:0;bottom:0;left:0}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-spanning-layer .ax-scheduler-week-spanning-appointment{z-index:1;cursor:pointer;text-overflow:ellipsis;border-radius:var(--radius-sm,.25rem);padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:calc(var(--spacing,.25rem) * .5);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));white-space:nowrap;height:var(--ax-scheduler-week-spanning-row-height);align-items:center;margin-inline:.125rem;display:flex;overflow:hidden}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-spanning-layer .ax-scheduler-week-spanning-appointment .ax-spanning-appointment-title{justify-content:space-between;align-items:center;width:100%;display:flex}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-spanning-layer .ax-scheduler-week-spanning-appointment .ax-spanning-appointment-title .ax-scheduler-truncate{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-spanning-layer .ax-scheduler-week-spanning-appointment .ax-spanning-appointment-title .ax-scheduler-action-icon{cursor:pointer;width:auto;flex-shrink:0;margin-inline-start:var(--spacing,.25rem)}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-spanning-layer .ax-scheduler-week-spanning-appointment.ax-spanning-start-clipped{border-start-start-radius:0;border-end-start-radius:0;margin-inline-start:0;padding-inline-start:1rem;position:relative}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-spanning-layer .ax-scheduler-week-spanning-appointment.ax-spanning-start-clipped:before{content:\"\\2190 \";--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);opacity:.7;top:50%;font-size:.65rem;position:absolute;inset-inline-start:.25rem}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-spanning-layer .ax-scheduler-week-spanning-appointment.ax-spanning-end-clipped{border-start-end-radius:0;border-end-end-radius:0;margin-inline-end:0;padding-inline-end:1rem;position:relative}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-spanning-layer .ax-scheduler-week-spanning-appointment.ax-spanning-end-clipped:after{content:\" \\2192\";--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);opacity:.7;top:50%;font-size:.65rem;position:absolute;inset-inline-end:.25rem}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-allday-slots{height:100%;display:flex}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-allday-slots .ax-scheduler-all-day-slot{gap:var(--spacing,.25rem);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));width:14.2857%;padding-block:var(--spacing,.25rem);display:flex}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-allday-slots .ax-scheduler-all-day-slot:last-child{border-inline-end-style:var(--tw-border-style);border-inline-end-width:0}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-allday-slots .ax-scheduler-all-day-slot .ax-scheduler-header-week-appointment{border-radius:calc(var(--ax-sys-border-radius) / 2);width:100%;padding-inline:calc(var(--spacing,.25rem) * 2);text-align:start;display:block;overflow:hidden}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-allday-slots .ax-scheduler-all-day-slot ax-popover{display:none}ax-scheduler-week-view .ax-scheduler-week-time-container{background-color:inherit;width:100%;display:flex}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-time{z-index:15;background-color:var(--ax-comp-scheduler-all-day-bg,inherit);position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 0)}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-time div{height:calc(var(--ax-comp-scheduler-basic-view-blocks-height) * 2);width:var(--ax-comp-scheduler-basic-view-blocks-width);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding-inline:calc(var(--spacing,.25rem) * 2);text-align:center;display:block;position:relative}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container{width:100%;position:relative}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container .ax-scheduler-week-appointment-container{width:100%;position:absolute;top:0}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container .ax-scheduler-week-appointment-container .ax-scheduler-week-appointment{border-radius:calc(var(--ax-sys-border-radius) / 2);padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:var(--spacing,.25rem);flex-direction:column;display:flex;position:absolute;inset-inline-start:calc(var(--spacing,.25rem) * 0)}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table{width:100%}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table tr{height:var(--ax-comp-scheduler-basic-view-blocks-height);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));display:flex}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table tr:first-child{border-top-style:var(--tw-border-style);border-top-width:0}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table tr td{border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));text-align:center;width:100%}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table tr td:last-child{border-inline-end-style:var(--tw-border-style);border-inline-end-width:0}ax-scheduler-week-view:not(.ax-state-readonly) .ax-scheduler-week-appointment,ax-scheduler-week-view:not(.ax-state-readonly) .ax-scheduler-header-week-appointment{cursor:pointer}ax-scheduler-week-view:not(.ax-state-readonly) .ax-scheduler-all-day-slot,ax-scheduler-week-view:not(.ax-state-readonly) .ax-scheduler-week-table-container>table td{cursor:pointer;transition-property:background-color;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}:is(ax-scheduler-week-view:not(.ax-state-readonly) .ax-scheduler-all-day-slot,ax-scheduler-week-view:not(.ax-state-readonly) .ax-scheduler-week-table-container>table td):hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg,var(--ax-sys-color-primary-surface),.1))}ax-scheduler-week-view ax-title{justify-content:space-between;display:flex}ax-scheduler-week-view ax-title .ax-scheduler-action-icon{cursor:pointer;width:auto}ax-scheduler-week-view .ax-scheduler-current-time-line{height:calc(var(--spacing,.25rem) * .5)}ax-scheduler-week-view .ax-scheduler-current-time-line:before{content:var(--tw-content);inset-inline-start:-6px;top:-5px}ax-scheduler.ax-rtl ax-scheduler-week-view .ax-scheduler-week-spanning-appointment.ax-spanning-start-clipped:before{content:\"\\2192 \"}ax-scheduler.ax-rtl ax-scheduler-week-view .ax-scheduler-week-spanning-appointment.ax-spanning-end-clipped:after{content:\" \\2190\"}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-translate-x{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-y{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-z{syntax:\"*\";inherits:false;initial-value:0}@property --tw-content{syntax:\"*\";inherits:false;initial-value:\"\"}\n/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */\n"] }]
|
|
4518
4540
|
}], propDecorators: { readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], hasActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasActions", required: false }] }], dragStartDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragStartDelay", required: false }] }], calendar: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendar", required: false }] }], date: [{ type: i0.Input, args: [{ isSignal: true, alias: "date", required: true }] }], endDayHour: [{ type: i0.Input, args: [{ isSignal: true, alias: "endDayHour", required: true }] }], startDayHour: [{ type: i0.Input, args: [{ isSignal: true, alias: "startDayHour", required: true }] }], showCurrentTimeIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCurrentTimeIndicator", required: false }] }], scrollToCurrentTimeIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollToCurrentTimeIndicator", required: false }] }], appointments: [{ type: i0.Input, args: [{ isSignal: true, alias: "appointments", required: false }] }], tooltipTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipTemplate", required: false }] }], selectedAppointmentId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedAppointmentId", required: false }] }], currentTimeLineElement: [{ type: i0.ViewChild, args: ['currentTimeLine', { isSignal: true }] }], slotClickedInternal: [{ type: i0.Output, args: ["slotClickedInternal"] }], slotDblClickedInternal: [{ type: i0.Output, args: ["slotDblClickedInternal"] }], slotRightClickedInternal: [{ type: i0.Output, args: ["slotRightClickedInternal"] }], appointmentClickedInternal: [{ type: i0.Output, args: ["appointmentClickedInternal"] }], appointmentDblClickedInternal: [{ type: i0.Output, args: ["appointmentDblClickedInternal"] }], appointmentRightClickedInternal: [{ type: i0.Output, args: ["appointmentRightClickedInternal"] }], onActionClickInternal: [{ type: i0.Output, args: ["onActionClickInternal"] }], onAppointmentDropInternal: [{ type: i0.Output, args: ["onAppointmentDropInternal"] }] } });
|
|
4519
4541
|
|
|
4520
4542
|
class AXSchedulerComponent extends NXComponent {
|
|
4521
4543
|
constructor() {
|
|
4522
4544
|
super(...arguments);
|
|
4523
|
-
this.platformService = inject(AXPlatform);
|
|
4524
4545
|
this.unsubscriber = inject(AXUnsubscriber);
|
|
4525
4546
|
this.formatService = inject(AXFormatService);
|
|
4526
4547
|
this.localeService = inject(AXLocaleService);
|
|
4527
4548
|
this.calendarService = inject(AXCalendarService);
|
|
4528
4549
|
this.schedulerService = inject(AXSchedulerService);
|
|
4529
4550
|
this.translationService = inject(AXTranslationService);
|
|
4530
|
-
this.
|
|
4531
|
-
this.
|
|
4532
|
-
this.
|
|
4533
|
-
this.
|
|
4534
|
-
this.
|
|
4551
|
+
this.eventService = inject(AXEventService);
|
|
4552
|
+
this.translationRevision = signal(0, ...(ngDevMode ? [{ debugName: "translationRevision" }] : /* istanbul ignore next */ []));
|
|
4553
|
+
this.viewModeSelectbox = viewChild(AXSelectBoxComponent, ...(ngDevMode ? [{ debugName: "viewModeSelectbox" }] : /* istanbul ignore next */ []));
|
|
4554
|
+
this.calendarPopover = viewChild('calendarPopover', ...(ngDevMode ? [{ debugName: "calendarPopover" }] : /* istanbul ignore next */ []));
|
|
4555
|
+
this._calendarDayCellTemplate = viewChild('calendarDayCellTemplate', ...(ngDevMode ? [{ debugName: "_calendarDayCellTemplate" }] : /* istanbul ignore next */ []));
|
|
4556
|
+
this._calendarMonthCellTemplate = viewChild('calendarMonthCellTemplate', ...(ngDevMode ? [{ debugName: "_calendarMonthCellTemplate" }] : /* istanbul ignore next */ []));
|
|
4557
|
+
this._calendarYearCellTemplate = viewChild('calendarYearCellTemplate', ...(ngDevMode ? [{ debugName: "_calendarYearCellTemplate" }] : /* istanbul ignore next */ []));
|
|
4535
4558
|
this.displayViews = {
|
|
4536
4559
|
day: 'daily',
|
|
4537
4560
|
week: 'weekly',
|
|
@@ -4542,38 +4565,47 @@ class AXSchedulerComponent extends NXComponent {
|
|
|
4542
4565
|
'timeline-year': 'yearly-timeline',
|
|
4543
4566
|
agenda: 'agenda',
|
|
4544
4567
|
};
|
|
4545
|
-
this.calendar = input(...(ngDevMode ? [undefined, { debugName: "calendar" }] : []));
|
|
4546
|
-
this.calendarType = linkedSignal(() => this.
|
|
4547
|
-
this.startingDate = input(new Date(), ...(ngDevMode ? [{ debugName: "startingDate" }] : []));
|
|
4548
|
-
this.currentDate = linkedSignal(
|
|
4549
|
-
|
|
4568
|
+
this.calendar = input(...(ngDevMode ? [undefined, { debugName: "calendar" }] : /* istanbul ignore next */ []));
|
|
4569
|
+
this.calendarType = linkedSignal(() => this.localeService.activeProfile().calendar.system, ...(ngDevMode ? [{ debugName: "calendarType" }] : /* istanbul ignore next */ []));
|
|
4570
|
+
this.startingDate = input(new Date(), ...(ngDevMode ? [{ debugName: "startingDate" }] : /* istanbul ignore next */ []));
|
|
4571
|
+
this.currentDate = linkedSignal({ ...(ngDevMode ? { debugName: "currentDate" } : /* istanbul ignore next */ {}), source: () => ({
|
|
4572
|
+
startingDate: this.startingDate(),
|
|
4573
|
+
calendarType: this.calendarType(),
|
|
4574
|
+
}),
|
|
4575
|
+
computation: (source, previous) => {
|
|
4576
|
+
if (previous) {
|
|
4577
|
+
return this.calendarService.create(previous.value.date, source.calendarType);
|
|
4578
|
+
}
|
|
4579
|
+
return this.calendarService.create(source.startingDate, source.calendarType).startOf('day');
|
|
4580
|
+
} });
|
|
4581
|
+
this._appointments = signal([], ...(ngDevMode ? [{ debugName: "_appointments" }] : /* istanbul ignore next */ []));
|
|
4550
4582
|
this.appointments = this._appointments.asReadonly();
|
|
4551
|
-
this.rtl =
|
|
4552
|
-
this.isFullScreen = signal(false, ...(ngDevMode ? [{ debugName: "isFullScreen" }] : []));
|
|
4553
|
-
this.viewsDataSource = signal([], ...(ngDevMode ? [{ debugName: "viewsDataSource" }] : []));
|
|
4554
|
-
this.prevDate = signal(this.calendarService.create(new Date(), this.calendarType()), ...(ngDevMode ? [{ debugName: "prevDate" }] : []));
|
|
4583
|
+
this.rtl = this.localeService.isRtl;
|
|
4584
|
+
this.isFullScreen = signal(false, ...(ngDevMode ? [{ debugName: "isFullScreen" }] : /* istanbul ignore next */ []));
|
|
4585
|
+
this.viewsDataSource = signal([], ...(ngDevMode ? [{ debugName: "viewsDataSource" }] : /* istanbul ignore next */ []));
|
|
4586
|
+
this.prevDate = signal(this.calendarService.create(new Date(), this.calendarType()), ...(ngDevMode ? [{ debugName: "prevDate" }] : /* istanbul ignore next */ []));
|
|
4555
4587
|
// Track the currently selected/active appointment
|
|
4556
|
-
this.selectedAppointmentId = signal(null, ...(ngDevMode ? [{ debugName: "selectedAppointmentId" }] : []));
|
|
4557
|
-
this.endDayHour = input(24, ...(ngDevMode ? [{ debugName: "endDayHour" }] : []));
|
|
4558
|
-
this.startDayHour = input(8, ...(ngDevMode ? [{ debugName: "startDayHour" }] : []));
|
|
4559
|
-
this.hasHeader = input(true, ...(ngDevMode ? [{ debugName: "hasHeader" }] : []));
|
|
4560
|
-
this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
|
|
4561
|
-
this.draggable = input(true, ...(ngDevMode ? [{ debugName: "draggable" }] : []));
|
|
4562
|
-
this.hasActions = input(false, ...(ngDevMode ? [{ debugName: "hasActions" }] : []));
|
|
4563
|
-
this.dragStartDelay = input(0, ...(ngDevMode ? [{ debugName: "dragStartDelay" }] : []));
|
|
4564
|
-
this.weekend = input([], ...(ngDevMode ? [{ debugName: "weekend" }] : []));
|
|
4565
|
-
this.allowFullScreen = input(true, ...(ngDevMode ? [{ debugName: "allowFullScreen" }] : []));
|
|
4566
|
-
this.multiDayViewDaysCount = input(7, ...(ngDevMode ? [{ debugName: "multiDayViewDaysCount" }] : []));
|
|
4567
|
-
this.showResourceHeaders = input(true, ...(ngDevMode ? [{ debugName: "showResourceHeaders" }] : []));
|
|
4568
|
-
this.showCurrentTimeIndicator = input(true, ...(ngDevMode ? [{ debugName: "showCurrentTimeIndicator" }] : []));
|
|
4569
|
-
this.scrollToCurrentTimeIndicator = input(false, ...(ngDevMode ? [{ debugName: "scrollToCurrentTimeIndicator" }] : []));
|
|
4570
|
-
this.showUnassignedAppointments = input(true, ...(ngDevMode ? [{ debugName: "showUnassignedAppointments" }] : []));
|
|
4571
|
-
this.resources = input([], ...(ngDevMode ? [{ debugName: "resources" }] : []));
|
|
4572
|
-
this.resourceTemplate = input(...(ngDevMode ? [undefined, { debugName: "resourceTemplate" }] : []));
|
|
4573
|
-
this.firstDayOfWeek = input(
|
|
4574
|
-
this.tooltipTemplate = input(...(ngDevMode ? [undefined, { debugName: "tooltipTemplate" }] : []));
|
|
4575
|
-
this.dataSource = input([], ...(ngDevMode ? [{ debugName: "dataSource" }] : []));
|
|
4576
|
-
this.holidays = input(...(ngDevMode ? [undefined, { debugName: "holidays" }] : []));
|
|
4588
|
+
this.selectedAppointmentId = signal(null, ...(ngDevMode ? [{ debugName: "selectedAppointmentId" }] : /* istanbul ignore next */ []));
|
|
4589
|
+
this.endDayHour = input(24, ...(ngDevMode ? [{ debugName: "endDayHour" }] : /* istanbul ignore next */ []));
|
|
4590
|
+
this.startDayHour = input(8, ...(ngDevMode ? [{ debugName: "startDayHour" }] : /* istanbul ignore next */ []));
|
|
4591
|
+
this.hasHeader = input(true, ...(ngDevMode ? [{ debugName: "hasHeader" }] : /* istanbul ignore next */ []));
|
|
4592
|
+
this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
4593
|
+
this.draggable = input(true, ...(ngDevMode ? [{ debugName: "draggable" }] : /* istanbul ignore next */ []));
|
|
4594
|
+
this.hasActions = input(false, ...(ngDevMode ? [{ debugName: "hasActions" }] : /* istanbul ignore next */ []));
|
|
4595
|
+
this.dragStartDelay = input(0, ...(ngDevMode ? [{ debugName: "dragStartDelay" }] : /* istanbul ignore next */ []));
|
|
4596
|
+
this.weekend = input([], ...(ngDevMode ? [{ debugName: "weekend" }] : /* istanbul ignore next */ []));
|
|
4597
|
+
this.allowFullScreen = input(true, ...(ngDevMode ? [{ debugName: "allowFullScreen" }] : /* istanbul ignore next */ []));
|
|
4598
|
+
this.multiDayViewDaysCount = input(7, ...(ngDevMode ? [{ debugName: "multiDayViewDaysCount" }] : /* istanbul ignore next */ []));
|
|
4599
|
+
this.showResourceHeaders = input(true, ...(ngDevMode ? [{ debugName: "showResourceHeaders" }] : /* istanbul ignore next */ []));
|
|
4600
|
+
this.showCurrentTimeIndicator = input(true, ...(ngDevMode ? [{ debugName: "showCurrentTimeIndicator" }] : /* istanbul ignore next */ []));
|
|
4601
|
+
this.scrollToCurrentTimeIndicator = input(false, ...(ngDevMode ? [{ debugName: "scrollToCurrentTimeIndicator" }] : /* istanbul ignore next */ []));
|
|
4602
|
+
this.showUnassignedAppointments = input(true, ...(ngDevMode ? [{ debugName: "showUnassignedAppointments" }] : /* istanbul ignore next */ []));
|
|
4603
|
+
this.resources = input([], ...(ngDevMode ? [{ debugName: "resources" }] : /* istanbul ignore next */ []));
|
|
4604
|
+
this.resourceTemplate = input(...(ngDevMode ? [undefined, { debugName: "resourceTemplate" }] : /* istanbul ignore next */ []));
|
|
4605
|
+
this.firstDayOfWeek = input(...(ngDevMode ? [undefined, { debugName: "firstDayOfWeek" }] : /* istanbul ignore next */ []));
|
|
4606
|
+
this.tooltipTemplate = input(...(ngDevMode ? [undefined, { debugName: "tooltipTemplate" }] : /* istanbul ignore next */ []));
|
|
4607
|
+
this.dataSource = input([], ...(ngDevMode ? [{ debugName: "dataSource" }] : /* istanbul ignore next */ []));
|
|
4608
|
+
this.holidays = input(...(ngDevMode ? [undefined, { debugName: "holidays" }] : /* istanbul ignore next */ []));
|
|
4577
4609
|
this.views = input([
|
|
4578
4610
|
'day',
|
|
4579
4611
|
'week',
|
|
@@ -4583,9 +4615,9 @@ class AXSchedulerComponent extends NXComponent {
|
|
|
4583
4615
|
'timeline-month',
|
|
4584
4616
|
'timeline-year',
|
|
4585
4617
|
'agenda',
|
|
4586
|
-
], ...(ngDevMode ? [{ debugName: "views" }] : []));
|
|
4587
|
-
this.selectedView = model(this.views()[0], ...(ngDevMode ? [{ debugName: "selectedView" }] : []));
|
|
4588
|
-
this.prevView = signal(this.selectedView(), ...(ngDevMode ? [{ debugName: "prevView" }] : []));
|
|
4618
|
+
], ...(ngDevMode ? [{ debugName: "views" }] : /* istanbul ignore next */ []));
|
|
4619
|
+
this.selectedView = model(this.views()[0], ...(ngDevMode ? [{ debugName: "selectedView" }] : /* istanbul ignore next */ []));
|
|
4620
|
+
this.prevView = signal(this.selectedView(), ...(ngDevMode ? [{ debugName: "prevView" }] : /* istanbul ignore next */ []));
|
|
4589
4621
|
// --- Public Outputs ---
|
|
4590
4622
|
this.onDataLoaded = output();
|
|
4591
4623
|
this.onRangeChanged = output();
|
|
@@ -4597,6 +4629,14 @@ class AXSchedulerComponent extends NXComponent {
|
|
|
4597
4629
|
this.onAppointmentClicked = output();
|
|
4598
4630
|
this.onAppointmentDblClicked = output();
|
|
4599
4631
|
this.onAppointmentRightClick = output();
|
|
4632
|
+
/** Applies an explicit `[calendar]` override only when it differs from the active locale profile. */
|
|
4633
|
+
this.#calendarOverrideEffect = effect(() => {
|
|
4634
|
+
const override = this.calendar();
|
|
4635
|
+
const profileSystem = this.localeService.activeProfile().calendar.system;
|
|
4636
|
+
if (override != null && override !== profileSystem) {
|
|
4637
|
+
untracked(() => this.calendarType.set(override));
|
|
4638
|
+
}
|
|
4639
|
+
}, ...(ngDevMode ? [{ debugName: "#calendarOverrideEffect" }] : /* istanbul ignore next */ []));
|
|
4600
4640
|
this.#appointmentEffect = effect(() => {
|
|
4601
4641
|
const dataSource = this.dataSource();
|
|
4602
4642
|
const range = {
|
|
@@ -4622,7 +4662,7 @@ class AXSchedulerComponent extends NXComponent {
|
|
|
4622
4662
|
this._appointments.set(list);
|
|
4623
4663
|
this.onDataLoaded.emit();
|
|
4624
4664
|
}
|
|
4625
|
-
}, ...(ngDevMode ? [{ debugName: "#appointmentEffect" }] : []));
|
|
4665
|
+
}, ...(ngDevMode ? [{ debugName: "#appointmentEffect" }] : /* istanbul ignore next */ []));
|
|
4626
4666
|
this.#holidayEffect = effect(() => {
|
|
4627
4667
|
const func = this.holidays();
|
|
4628
4668
|
if (!func)
|
|
@@ -4640,12 +4680,14 @@ class AXSchedulerComponent extends NXComponent {
|
|
|
4640
4680
|
else {
|
|
4641
4681
|
this.schedulerService.internalHoliday.set(result);
|
|
4642
4682
|
}
|
|
4643
|
-
}, ...(ngDevMode ? [{ debugName: "#holidayEffect" }] : []));
|
|
4683
|
+
}, ...(ngDevMode ? [{ debugName: "#holidayEffect" }] : /* istanbul ignore next */ []));
|
|
4644
4684
|
this.#weekendEffect = effect(() => {
|
|
4645
4685
|
const weekend = this.weekend();
|
|
4646
4686
|
this.schedulerService.internalWeekend.set(weekend);
|
|
4647
|
-
}, ...(ngDevMode ? [{ debugName: "#weekendEffect" }] : []));
|
|
4687
|
+
}, ...(ngDevMode ? [{ debugName: "#weekendEffect" }] : /* istanbul ignore next */ []));
|
|
4648
4688
|
this.currentDateText = computed(() => {
|
|
4689
|
+
this.translationRevision();
|
|
4690
|
+
this.localeService.activeProfile();
|
|
4649
4691
|
switch (this.selectedView()) {
|
|
4650
4692
|
case 'day':
|
|
4651
4693
|
case 'timeline-day':
|
|
@@ -4688,7 +4730,7 @@ class AXSchedulerComponent extends NXComponent {
|
|
|
4688
4730
|
calendar: this.calendarType(),
|
|
4689
4731
|
});
|
|
4690
4732
|
}
|
|
4691
|
-
}, ...(ngDevMode ? [{ debugName: "currentDateText" }] : []));
|
|
4733
|
+
}, ...(ngDevMode ? [{ debugName: "currentDateText" }] : /* istanbul ignore next */ []));
|
|
4692
4734
|
this.calendarDepth = computed(() => {
|
|
4693
4735
|
switch (this.selectedView()) {
|
|
4694
4736
|
case 'day':
|
|
@@ -4703,7 +4745,7 @@ class AXSchedulerComponent extends NXComponent {
|
|
|
4703
4745
|
case 'timeline-year':
|
|
4704
4746
|
return 'year';
|
|
4705
4747
|
}
|
|
4706
|
-
}, ...(ngDevMode ? [{ debugName: "calendarDepth" }] : []));
|
|
4748
|
+
}, ...(ngDevMode ? [{ debugName: "calendarDepth" }] : /* istanbul ignore next */ []));
|
|
4707
4749
|
this.mappedAppointments = computed(() => {
|
|
4708
4750
|
const items = this._appointments();
|
|
4709
4751
|
return items
|
|
@@ -4723,7 +4765,7 @@ class AXSchedulerComponent extends NXComponent {
|
|
|
4723
4765
|
return item;
|
|
4724
4766
|
})
|
|
4725
4767
|
.filter((appt) => appt !== null); // Filter out nulls from invalid dates
|
|
4726
|
-
}, ...(ngDevMode ? [{ debugName: "mappedAppointments" }] : []));
|
|
4768
|
+
}, ...(ngDevMode ? [{ debugName: "mappedAppointments" }] : /* istanbul ignore next */ []));
|
|
4727
4769
|
this.range = computed(() => {
|
|
4728
4770
|
const view = this.selectedView();
|
|
4729
4771
|
const current = this.currentDate().startOf('day');
|
|
@@ -4758,16 +4800,16 @@ class AXSchedulerComponent extends NXComponent {
|
|
|
4758
4800
|
return range;
|
|
4759
4801
|
}
|
|
4760
4802
|
}
|
|
4761
|
-
}, ...(ngDevMode ? [{ debugName: "range" }] : []));
|
|
4803
|
+
}, ...(ngDevMode ? [{ debugName: "range" }] : /* istanbul ignore next */ []));
|
|
4762
4804
|
this.#rangeChangedEffect = effect(() => {
|
|
4763
4805
|
this.onRangeChanged.emit(this.range());
|
|
4764
|
-
}, ...(ngDevMode ? [{ debugName: "#rangeChangedEffect" }] : []));
|
|
4806
|
+
}, ...(ngDevMode ? [{ debugName: "#rangeChangedEffect" }] : /* istanbul ignore next */ []));
|
|
4765
4807
|
this.#viewChangedEffect = effect(() => {
|
|
4766
4808
|
const view = this.selectedView();
|
|
4767
4809
|
untracked(() => {
|
|
4768
4810
|
this.handleViewChanged(this.prevView(), view);
|
|
4769
4811
|
});
|
|
4770
|
-
}, ...(ngDevMode ? [{ debugName: "#viewChangedEffect" }] : []));
|
|
4812
|
+
}, ...(ngDevMode ? [{ debugName: "#viewChangedEffect" }] : /* istanbul ignore next */ []));
|
|
4771
4813
|
this.viewAppointments = computed(() => {
|
|
4772
4814
|
const current = this.currentDate();
|
|
4773
4815
|
const mapped = this.mappedAppointments();
|
|
@@ -4777,7 +4819,7 @@ class AXSchedulerComponent extends NXComponent {
|
|
|
4777
4819
|
return [];
|
|
4778
4820
|
return mapped.filter((appt) => this.calendarService.create(appt.startDate, this.calendarType()).compare(rangeEnd, 'second') <= 0 &&
|
|
4779
4821
|
this.calendarService.create(appt.endDate, this.calendarType()).compare(rangeStart, 'second') >= 0);
|
|
4780
|
-
}, ...(ngDevMode ? [{ debugName: "viewAppointments" }] : []));
|
|
4822
|
+
}, ...(ngDevMode ? [{ debugName: "viewAppointments" }] : /* istanbul ignore next */ []));
|
|
4781
4823
|
}
|
|
4782
4824
|
/** Expose template refs for calendar bindings (signals are not callable in template type-check) */
|
|
4783
4825
|
get calendarDayCellTemplateRef() {
|
|
@@ -4817,12 +4859,14 @@ class AXSchedulerComponent extends NXComponent {
|
|
|
4817
4859
|
}
|
|
4818
4860
|
ngOnInit() {
|
|
4819
4861
|
this.calendarService.calendarChanges$.pipe(this.unsubscriber.takeUntilDestroy).subscribe(() => {
|
|
4820
|
-
|
|
4821
|
-
|
|
4822
|
-
|
|
4823
|
-
|
|
4862
|
+
this.syncCurrentDateAfterLocaleChange();
|
|
4863
|
+
});
|
|
4864
|
+
this.localeService.profileChanged$.pipe(this.unsubscriber.takeUntilDestroy).subscribe((profile) => {
|
|
4865
|
+
this.calendarType.set(profile.calendar.system);
|
|
4866
|
+
queueMicrotask(() => this.syncCurrentDateAfterLocaleChange());
|
|
4824
4867
|
});
|
|
4825
4868
|
this.translationService.langChanges$.pipe(this.unsubscriber.takeUntilDestroy).subscribe(async () => {
|
|
4869
|
+
this.translationRevision.update((v) => v + 1);
|
|
4826
4870
|
await this.fillDataSource();
|
|
4827
4871
|
this.viewModeSelectbox()?.selectItems(this.viewsDataSource().find((c) => c.id == this.selectedView()));
|
|
4828
4872
|
const currentDate = this.calendarService.create(this.currentDate().date, this.calendarType());
|
|
@@ -4830,11 +4874,38 @@ class AXSchedulerComponent extends NXComponent {
|
|
|
4830
4874
|
this.currentDate.set(currentDate);
|
|
4831
4875
|
}
|
|
4832
4876
|
});
|
|
4833
|
-
this.
|
|
4834
|
-
.pipe(
|
|
4835
|
-
.subscribe((
|
|
4877
|
+
this.eventService.onEvent
|
|
4878
|
+
.pipe(filter((event) => event.type === AXSystemEvents.AXLanguageLoaded), this.unsubscriber.takeUntilDestroy)
|
|
4879
|
+
.subscribe(() => this.translationRevision.update((v) => v + 1));
|
|
4836
4880
|
this.fillDataSource();
|
|
4837
4881
|
}
|
|
4882
|
+
/** Applies an explicit `[calendar]` override only when it differs from the active locale profile. */
|
|
4883
|
+
#calendarOverrideEffect;
|
|
4884
|
+
/**
|
|
4885
|
+
* Picks a stable anchor inside the visible week so re-aligning after a locale
|
|
4886
|
+
* change does not drift when the previous week start was a Sunday/Monday edge.
|
|
4887
|
+
*/
|
|
4888
|
+
getWeekReanchorDate() {
|
|
4889
|
+
const current = this.calendarService.create(this.currentDate().date, this.calendarType());
|
|
4890
|
+
const today = this.calendarService.now(this.calendarType()).startOf('day');
|
|
4891
|
+
const weekEnd = current.add('day', 6);
|
|
4892
|
+
if (today.compare(current, 'day') >= 0 && today.compare(weekEnd, 'day') <= 0) {
|
|
4893
|
+
return today;
|
|
4894
|
+
}
|
|
4895
|
+
return current.add('day', 3);
|
|
4896
|
+
}
|
|
4897
|
+
syncCurrentDateAfterLocaleChange() {
|
|
4898
|
+
let currentDate = this.calendarService.create(this.currentDate().date, this.calendarType());
|
|
4899
|
+
const view = this.selectedView();
|
|
4900
|
+
if (view === 'week' || view === 'timeline-weekly') {
|
|
4901
|
+
currentDate = this.schedulerService.alignToWeekStart(this.getWeekReanchorDate(), {
|
|
4902
|
+
firstDayOfWeek: this.firstDayOfWeek(),
|
|
4903
|
+
});
|
|
4904
|
+
}
|
|
4905
|
+
if (!currentDate.equal(this.currentDate())) {
|
|
4906
|
+
this.currentDate.set(currentDate);
|
|
4907
|
+
}
|
|
4908
|
+
}
|
|
4838
4909
|
#appointmentEffect;
|
|
4839
4910
|
#holidayEffect;
|
|
4840
4911
|
#weekendEffect;
|
|
@@ -4848,11 +4919,9 @@ class AXSchedulerComponent extends NXComponent {
|
|
|
4848
4919
|
}
|
|
4849
4920
|
getGridDateRange(dateInMonth) {
|
|
4850
4921
|
const firstDayOfMonth = dateInMonth.startOf('month');
|
|
4851
|
-
const
|
|
4852
|
-
|
|
4853
|
-
|
|
4854
|
-
const gridStartDate = firstDayOfMonth.add('day', -daysFromPrevMonth);
|
|
4855
|
-
// Calculate end date based on standard 6 weeks for safety, or calculate dynamically if preferred
|
|
4922
|
+
const gridStartDate = this.schedulerService.alignToWeekStart(firstDayOfMonth, {
|
|
4923
|
+
firstDayOfWeek: this.firstDayOfWeek(),
|
|
4924
|
+
});
|
|
4856
4925
|
const gridEndDate = gridStartDate.add('day', 6 * 7 - 1);
|
|
4857
4926
|
return { gridStartDate, gridEndDate };
|
|
4858
4927
|
}
|
|
@@ -4920,20 +4989,21 @@ class AXSchedulerComponent extends NXComponent {
|
|
|
4920
4989
|
this.handleViewChanged(oldView, newView);
|
|
4921
4990
|
}
|
|
4922
4991
|
handleViewChanged(oldView, newView) {
|
|
4992
|
+
if (oldView === newView) {
|
|
4993
|
+
return;
|
|
4994
|
+
}
|
|
4923
4995
|
if (oldView === 'week') {
|
|
4924
|
-
const
|
|
4925
|
-
const
|
|
4926
|
-
this.currentDate.set(
|
|
4996
|
+
const startsOn = this.schedulerService.resolveWeekStartsOn(this.firstDayOfWeek());
|
|
4997
|
+
const offset = (this.prevDate().weekdayIndex - startsOn + 7) % 7;
|
|
4998
|
+
this.currentDate.set(this.currentDate().add('day', offset));
|
|
4927
4999
|
}
|
|
4928
5000
|
this.prevDate.set(this.currentDate());
|
|
4929
|
-
if (newView === 'week') {
|
|
4930
|
-
const
|
|
4931
|
-
|
|
4932
|
-
|
|
4933
|
-
|
|
4934
|
-
|
|
4935
|
-
const startOfWeekDate = currentDate.add('day', -daysToSubtract);
|
|
4936
|
-
this.currentDate.set(startOfWeekDate);
|
|
5001
|
+
if (newView === 'week' || newView === 'timeline-weekly') {
|
|
5002
|
+
const today = this.calendarService.now(this.calendarType()).startOf('day');
|
|
5003
|
+
this.prevDate.set(today);
|
|
5004
|
+
this.currentDate.set(this.schedulerService.alignToWeekStart(today, {
|
|
5005
|
+
firstDayOfWeek: this.firstDayOfWeek(),
|
|
5006
|
+
}));
|
|
4937
5007
|
}
|
|
4938
5008
|
this.prevView.set(newView);
|
|
4939
5009
|
}
|
|
@@ -4947,7 +5017,9 @@ class AXSchedulerComponent extends NXComponent {
|
|
|
4947
5017
|
this.currentDate.set(this.currentDate().add('day', 1));
|
|
4948
5018
|
break;
|
|
4949
5019
|
case 'week':
|
|
4950
|
-
this.currentDate.set(this.currentDate().add('week', 1)
|
|
5020
|
+
this.currentDate.set(this.schedulerService.alignToWeekStart(this.currentDate().add('week', 1), {
|
|
5021
|
+
firstDayOfWeek: this.firstDayOfWeek(),
|
|
5022
|
+
}));
|
|
4951
5023
|
break;
|
|
4952
5024
|
case 'agenda':
|
|
4953
5025
|
case 'timeline-weekly':
|
|
@@ -4972,7 +5044,9 @@ class AXSchedulerComponent extends NXComponent {
|
|
|
4972
5044
|
this.currentDate.set(this.currentDate().add('day', -1));
|
|
4973
5045
|
break;
|
|
4974
5046
|
case 'week':
|
|
4975
|
-
this.currentDate.set(this.currentDate().add('week', -1)
|
|
5047
|
+
this.currentDate.set(this.schedulerService.alignToWeekStart(this.currentDate().add('week', -1), {
|
|
5048
|
+
firstDayOfWeek: this.firstDayOfWeek(),
|
|
5049
|
+
}));
|
|
4976
5050
|
break;
|
|
4977
5051
|
case 'agenda':
|
|
4978
5052
|
case 'timeline-weekly':
|
|
@@ -4995,11 +5069,9 @@ class AXSchedulerComponent extends NXComponent {
|
|
|
4995
5069
|
calendarDateChanged(e) {
|
|
4996
5070
|
let currentDate = this.calendarService.create(e.value, this.calendarType());
|
|
4997
5071
|
if (this.selectedView() === 'week') {
|
|
4998
|
-
|
|
4999
|
-
|
|
5000
|
-
|
|
5001
|
-
const daysToSubtract = (currentDayOfWeek - desiredFirstDayNumber + 7) % 7;
|
|
5002
|
-
currentDate = currentDate.add('day', -daysToSubtract);
|
|
5072
|
+
currentDate = this.schedulerService.alignToWeekStart(currentDate, {
|
|
5073
|
+
firstDayOfWeek: this.firstDayOfWeek(),
|
|
5074
|
+
});
|
|
5003
5075
|
}
|
|
5004
5076
|
if (!currentDate.equal(this.currentDate())) {
|
|
5005
5077
|
this.currentDate.set(currentDate);
|
|
@@ -5045,10 +5117,10 @@ class AXSchedulerComponent extends NXComponent {
|
|
|
5045
5117
|
this._appointments.set(list);
|
|
5046
5118
|
this.onDataLoaded.emit();
|
|
5047
5119
|
}
|
|
5048
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
5049
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", 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 }, hasActions: { classPropertyName: "hasActions", publicName: "hasActions", isSignal: true, isRequired: false, transformFunction: null }, dragStartDelay: { classPropertyName: "dragStartDelay", publicName: "dragStartDelay", isSignal: true, isRequired: false, transformFunction: null }, weekend: { classPropertyName: "weekend", publicName: "weekend", 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 }, showResourceHeaders: { classPropertyName: "showResourceHeaders", publicName: "showResourceHeaders", isSignal: true, isRequired: false, transformFunction: null }, showCurrentTimeIndicator: { classPropertyName: "showCurrentTimeIndicator", publicName: "showCurrentTimeIndicator", isSignal: true, isRequired: false, transformFunction: null }, scrollToCurrentTimeIndicator: { classPropertyName: "scrollToCurrentTimeIndicator", publicName: "scrollToCurrentTimeIndicator", isSignal: true, isRequired: false, transformFunction: null }, showUnassignedAppointments: { classPropertyName: "showUnassignedAppointments", publicName: "showUnassignedAppointments", isSignal: true, isRequired: false, transformFunction: null }, resources: { classPropertyName: "resources", publicName: "resources", isSignal: true, isRequired: false, transformFunction: null }, resourceTemplate: { classPropertyName: "resourceTemplate", publicName: "resourceTemplate", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, tooltipTemplate: { classPropertyName: "tooltipTemplate", publicName: "tooltipTemplate", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, holidays: { classPropertyName: "holidays", publicName: "holidays", 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", onActionClick: "onActionClick", onAppointmentClicked: "onAppointmentClicked", onAppointmentDblClicked: "onAppointmentDblClicked", onAppointmentRightClick: "onAppointmentRightClick" }, host: { properties: { "class.ax-rtl": "rtl()" } }, providers: [AXUnsubscriber, { provide: AXComponent, useExisting: AXSchedulerComponent }], viewQueries: [{ propertyName: "viewModeSelectbox", first: true, predicate: AXSelectBoxComponent, descendants: true, isSignal: true }, { propertyName: "calendarPopover", first: true, predicate: ["calendarPopover"], descendants: true, isSignal: true }, { propertyName: "_calendarDayCellTemplate", first: true, predicate: ["calendarDayCellTemplate"], descendants: true, isSignal: true }, { propertyName: "_calendarMonthCellTemplate", first: true, predicate: ["calendarMonthCellTemplate"], descendants: true, isSignal: true }, { propertyName: "_calendarYearCellTemplate", first: true, predicate: ["calendarYearCellTemplate"], 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 [class.ax-icon-chevron-left]=\"!rtl()\"\n [class.ax-icon-chevron-right]=\"rtl()\"\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 [class.ax-icon-chevron-right]=\"!rtl()\"\n [class.ax-icon-chevron-left]=\"rtl()\"\n ></ax-icon>\n </ax-button>\n <ax-popover [target]=\"date\" #calendarPopover>\n <ax-calendar\n [type]=\"calendarType()\"\n [depth]=\"calendarDepth()\"\n [ngModel]=\"currentDate()\"\n [dayCellTemplate]=\"calendarDayCellTemplateRef\"\n [monthCellTemplate]=\"calendarMonthCellTemplateRef\"\n [yearCellTemplate]=\"calendarYearCellTemplateRef\"\n (onValueChanged)=\"calendarDateChanged($event)\"\n ></ax-calendar>\n </ax-popover>\n </div>\n <div class=\"ax-scheduler-actions\">\n <ax-select-box\n [dropdownWidth]=\"'200px'\"\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 class=\"fa-solid\" [class.fa-compress]=\"isFullScreen()\" [class.fa-expand]=\"!isFullScreen()\"></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 [rtl]=\"rtl()\"\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [draggable]=\"draggable()\"\n [hasActions]=\"hasActions()\"\n [calendar]=\"calendarType()\"\n [endDayHour]=\"endDayHour()\"\n [startDayHour]=\"startDayHour()\"\n [showCurrentTimeIndicator]=\"showCurrentTimeIndicator()\"\n [scrollToCurrentTimeIndicator]=\"scrollToCurrentTimeIndicator()\"\n [appointments]=\"viewAppointments()\"\n [dragStartDelay]=\"dragStartDelay()\"\n [tooltipTemplate]=\"tooltipTemplate()\"\n [selectedAppointmentId]=\"selectedAppointmentId()\"\n (onActionClickInternal)=\"onActionClick.emit($event)\"\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 [hasActions]=\"hasActions()\"\n [startDayHour]=\"startDayHour()\"\n [showCurrentTimeIndicator]=\"showCurrentTimeIndicator()\"\n [scrollToCurrentTimeIndicator]=\"scrollToCurrentTimeIndicator()\"\n [appointments]=\"viewAppointments()\"\n [dragStartDelay]=\"dragStartDelay()\"\n [tooltipTemplate]=\"tooltipTemplate()\"\n [selectedAppointmentId]=\"selectedAppointmentId()\"\n (onActionClickInternal)=\"onActionClick.emit($event)\"\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 [hasActions]=\"hasActions()\"\n [appointments]=\"viewAppointments()\"\n [firstDayOfWeek]=\"firstDayOfWeek()\"\n [dragStartDelay]=\"dragStartDelay()\"\n [tooltipTemplate]=\"tooltipTemplate()\"\n [selectedAppointmentId]=\"selectedAppointmentId()\"\n (onActionClickInternal)=\"onActionClick.emit($event)\"\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 [resources]=\"resources()\"\n [draggable]=\"draggable()\"\n [hasActions]=\"hasActions()\"\n [calendar]=\"calendarType()\"\n [endDayHour]=\"endDayHour()\"\n [startDayHour]=\"startDayHour()\"\n [appointments]=\"viewAppointments()\"\n [dragStartDelay]=\"dragStartDelay()\"\n [tooltipTemplate]=\"tooltipTemplate()\"\n [resourceTemplate]=\"resourceTemplate()\"\n [showResourceHeaders]=\"showResourceHeaders()\"\n [showCurrentTimeIndicator]=\"showCurrentTimeIndicator()\"\n [scrollToCurrentTimeIndicator]=\"scrollToCurrentTimeIndicator()\"\n [showUnassignedAppointments]=\"showUnassignedAppointments()\"\n [selectedAppointmentId]=\"selectedAppointmentId()\"\n (onActionClickInternal)=\"onActionClick.emit($event)\"\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-weekly') {\n <ax-scheduler-timeline-weekly-view\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [resources]=\"resources()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [endDayHour]=\"endDayHour()\"\n [hasActions]=\"hasActions()\"\n [startDayHour]=\"startDayHour()\"\n [appointments]=\"viewAppointments()\"\n [dragStartDelay]=\"dragStartDelay()\"\n [daysCount]=\"multiDayViewDaysCount()\"\n [tooltipTemplate]=\"tooltipTemplate()\"\n [resourceTemplate]=\"resourceTemplate()\"\n [showResourceHeaders]=\"showResourceHeaders()\"\n [showCurrentTimeIndicator]=\"showCurrentTimeIndicator()\"\n [scrollToCurrentTimeIndicator]=\"scrollToCurrentTimeIndicator()\"\n [showUnassignedAppointments]=\"showUnassignedAppointments()\"\n [selectedAppointmentId]=\"selectedAppointmentId()\"\n (onActionClickInternal)=\"onActionClick.emit($event)\"\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-weekly-view>\n }\n @case ('timeline-month') {\n <ax-scheduler-timeline-month-view\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [resources]=\"resources()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [hasActions]=\"hasActions()\"\n [appointments]=\"viewAppointments()\"\n [dragStartDelay]=\"dragStartDelay()\"\n [tooltipTemplate]=\"tooltipTemplate()\"\n [resourceTemplate]=\"resourceTemplate()\"\n [showResourceHeaders]=\"showResourceHeaders()\"\n [showCurrentTimeIndicator]=\"showCurrentTimeIndicator()\"\n [scrollToCurrentTimeIndicator]=\"scrollToCurrentTimeIndicator()\"\n [showUnassignedAppointments]=\"showUnassignedAppointments()\"\n [selectedAppointmentId]=\"selectedAppointmentId()\"\n (onActionClickInternal)=\"onActionClick.emit($event)\"\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 ('timeline-year') {\n <ax-scheduler-timeline-year-view\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [resources]=\"resources()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [hasActions]=\"hasActions()\"\n [appointments]=\"viewAppointments()\"\n [dragStartDelay]=\"dragStartDelay()\"\n [tooltipTemplate]=\"tooltipTemplate()\"\n [resourceTemplate]=\"resourceTemplate()\"\n [showResourceHeaders]=\"showResourceHeaders()\"\n [showCurrentTimeIndicator]=\"showCurrentTimeIndicator()\"\n [scrollToCurrentTimeIndicator]=\"scrollToCurrentTimeIndicator()\"\n [showUnassignedAppointments]=\"showUnassignedAppointments()\"\n [selectedAppointmentId]=\"selectedAppointmentId()\"\n (onActionClickInternal)=\"onActionClick.emit($event)\"\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-year-view>\n }\n @case ('agenda') {\n <ax-scheduler-agenda-view\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [hasActions]=\"hasActions()\"\n [appointments]=\"viewAppointments()\"\n [dragStartDelay]=\"dragStartDelay()\"\n [daysCount]=\"multiDayViewDaysCount()\"\n [tooltipTemplate]=\"tooltipTemplate()\"\n [selectedAppointmentId]=\"selectedAppointmentId()\"\n (onActionClickInternal)=\"onActionClick.emit($event)\"\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<ng-template #calendarDayCellTemplate let-data>\n @let slot = data.slot;\n <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-between ax-gap-1\">\n <span>{{ slot.text }}</span>\n @if (hasAppointmentsOnDate(slot.date?.date)) {\n <ax-badge color=\"primary\"></ax-badge>\n }\n </div>\n</ng-template>\n<ng-template #calendarMonthCellTemplate let-data>\n @let slot = data.slot;\n <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-between ax-gap-1\">\n <span>{{ slot.text }}</span>\n @if (hasAppointmentsInMonth(slot.date?.date)) {\n <ax-badge color=\"primary\"></ax-badge>\n }\n </div>\n</ng-template>\n<ng-template #calendarYearCellTemplate let-data>\n @let slot = data.slot;\n <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-between ax-gap-1\">\n <span>{{ slot.text }}</span>\n @if (hasAppointmentsInYear(slot.date?.date)) {\n <ax-badge color=\"primary\"></ax-badge>\n }\n </div>\n</ng-template>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-content:\"\"}}}@layer base{: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}}@layer components{ax-scheduler{width:100%;height:100%;display:block}ax-scheduler .ax-scheduler-primary-periority{background-color:rgba(var(--ax-sys-color-primary-surface));color:rgba(var(--ax-sys-color-on-primary-surface))}ax-scheduler .ax-scheduler-highest-periority{background-color:rgba(var(--ax-sys-color-danger-dark-surface));color:rgba(var(--ax-sys-color-on-danger-dark-surface))}ax-scheduler .ax-scheduler-high-periority{background-color:rgba(var(--ax-sys-color-danger-surface));color:rgba(var(--ax-sys-color-on-danger-surface))}ax-scheduler .ax-scheduler-medium-periority{background-color:rgba(var(--ax-sys-color-warning-surface));color:rgba(var(--ax-sys-color-on-warning-surface))}ax-scheduler .ax-scheduler-low-periority{background-color:rgba(var(--ax-sys-color-success-light-surface));color:rgba(var(--ax-sys-color-on-success-light-surface))}ax-scheduler .ax-scheduler-lowest-periority{background-color:rgba(var(--ax-sys-color-success-lightest-surface));color:rgba(var(--ax-sys-color-on-success-lightest-surface))}ax-scheduler{background-color:inherit;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));-webkit-user-select:none;user-select:none}ax-scheduler.ax-full-screen-container{top:calc(var(--spacing,.25rem) * 0);left:calc(var(--spacing,.25rem) * 0);z-index:61;width:100vw;height:100vh;position:fixed}ax-scheduler .ax-scheduler-container{border-radius:var(--ax-sys-border-radius);border-style:var(--tw-border-style);background-color:inherit;border-width:1px;flex-direction:column;height:100%;display:flex;overflow:hidden}ax-scheduler .ax-scheduler-container .ax-scheduler-header{border-bottom-style:var(--tw-border-style);padding:calc(var(--spacing,.25rem) * 4);border-bottom-width:1px;justify-content:space-between;align-items:center;display:flex;overflow:auto hidden}ax-scheduler .ax-scheduler-container .ax-scheduler-header .ax-scheduler-date{min-width:calc(var(--spacing,.25rem) * 82);justify-content:space-between;align-items:center;display:flex}ax-scheduler .ax-scheduler-container .ax-scheduler-header .ax-scheduler-date p{margin:calc(var(--spacing,.25rem) * 0);min-width:calc(var(--spacing,.25rem) * 40);text-align:center;font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height, 1.5 ));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-scheduler .ax-scheduler-container .ax-scheduler-actions{justify-content:center;align-items:center;gap:calc(var(--spacing,.25rem) * 3);display:flex}ax-scheduler .ax-scheduler-container .ax-scheduler-truncate{text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden}ax-scheduler .ax-scheduler-container ax-subtitle{font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container{background-color:inherit;height:100%;overflow:auto}.ax-overlay-pane.ax-scheduler-popover{max-height:calc(var(--spacing,.25rem) * 40);gap:calc(var(--spacing,.25rem) * 1);border-radius:var(--ax-sys-border-radius);display:grid;overflow:auto}.ax-overlay-pane.ax-scheduler-popover .ax-scheduler-primary-periority{background-color:rgba(var(--ax-sys-color-primary-surface));color:rgba(var(--ax-sys-color-on-primary-surface))}.ax-overlay-pane.ax-scheduler-popover .ax-scheduler-highest-periority{background-color:rgba(var(--ax-sys-color-danger-dark-surface));color:rgba(var(--ax-sys-color-on-danger-dark-surface))}.ax-overlay-pane.ax-scheduler-popover .ax-scheduler-high-periority{background-color:rgba(var(--ax-sys-color-danger-surface));color:rgba(var(--ax-sys-color-on-danger-surface))}.ax-overlay-pane.ax-scheduler-popover .ax-scheduler-medium-periority{background-color:rgba(var(--ax-sys-color-warning-surface));color:rgba(var(--ax-sys-color-on-warning-surface))}.ax-overlay-pane.ax-scheduler-popover .ax-scheduler-low-periority{background-color:rgba(var(--ax-sys-color-success-light-surface));color:rgba(var(--ax-sys-color-on-success-light-surface))}.ax-overlay-pane.ax-scheduler-popover .ax-scheduler-lowest-periority{background-color:rgba(var(--ax-sys-color-success-lightest-surface));color:rgba(var(--ax-sys-color-on-success-lightest-surface))}.ax-overlay-pane.ax-scheduler-popover{padding:calc(var(--spacing,.25rem) * 1);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)))}.ax-overlay-pane.ax-scheduler-popover.ax-scheduler-month-popover-appointment{font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)))}.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{border-radius:calc(var(--ax-sys-border-radius) / 2);background-color:rgba(var(--ax-sys-color-primary-surface));padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:calc(var(--spacing,.25rem) * 1);color:rgba(var(--ax-sys-color-on-primary-surface));-webkit-user-select:none;user-select:none;flex-direction:column;display:flex;overflow:hidden}.ax-overlay-pane.ax-scheduler-popover .ax-scheduler-popover-appointment ax-subtitle{font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)))}.ax-overlay-pane.ax-scheduler-popover .ax-scheduler-popover-appointment .ax-scheduler-truncate{text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden}.ax-overlay-pane.ax-scheduler-popover ax-title,.ax-overlay-pane.ax-scheduler-popover .ax-appointment-chip-title{justify-content:space-between;display:flex}:is(.ax-overlay-pane.ax-scheduler-popover ax-title,.ax-overlay-pane.ax-scheduler-popover .ax-appointment-chip-title) .ax-scheduler-action-icon{cursor:pointer;width:auto}.ax-scheduler-current-time-line{pointer-events:none;z-index:7;--tw-shadow:0 0 6px var(--tw-shadow-color,#ef4444cc);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);background-color:#ef4444;position:absolute}.ax-scheduler-current-time-line:before{width:calc(var(--spacing,.25rem) * 3);height:calc(var(--spacing,.25rem) * 3);border-style:var(--tw-border-style);border-width:2px;border-color:rgba(var(--ax-sys-color-surface));--tw-shadow:0 0 8px var(--tw-shadow-color,#ef4444e6);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-content:\"\";content:var(--tw-content);background-color:#ef4444;border-radius:3.40282e38px;position:absolute}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-content{syntax:\"*\";inherits:false;initial-value:\"\"}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\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: AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { 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: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "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", "dayCellTemplate", "monthCellTemplate", "yearCellTemplate", "cellClass", "showNavigation", "count", "id", "weekend", "weekdays"], outputs: ["onOptionChanged", "valueChange", "onValueChanged", "minValueChange", "maxValueChange", "onBlur", "onFocus", "depthChange", "typeChange", "activeViewChange", "disabledDatesChange", "holidayDatesChange", "onNavigate", "onSlotClick", "countChange"] }, { 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", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXSchedulerDayViewComponent, selector: "ax-scheduler-day-view", inputs: ["rtl", "readonly", "draggable", "hasActions", "dragStartDelay", "calendar", "date", "endDayHour", "startDayHour", "showCurrentTimeIndicator", "scrollToCurrentTimeIndicator", "appointments", "tooltipTemplate", "selectedAppointmentId"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onActionClickInternal", "onAppointmentDropInternal"] }, { kind: "component", type: AXSchedulerWeekViewComponent, selector: "ax-scheduler-week-view", inputs: ["readonly", "draggable", "hasActions", "dragStartDelay", "calendar", "date", "endDayHour", "startDayHour", "showCurrentTimeIndicator", "scrollToCurrentTimeIndicator", "appointments", "tooltipTemplate", "selectedAppointmentId"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onActionClickInternal", "onAppointmentDropInternal"] }, { kind: "component", type: AXSchedulerMonthViewComponent, selector: "ax-scheduler-month-view", inputs: ["readonly", "draggable", "hasActions", "dragStartDelay", "calendar", "date", "appointments", "firstDayOfWeek", "selectedAppointmentId", "tooltipTemplate"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onActionClickInternal", "onAppointmentDropInternal"] }, { kind: "component", type: AXSchedulerAgendaViewComponent, selector: "ax-scheduler-agenda-view", inputs: ["daysCount", "readonly", "draggable", "hasActions", "dragStartDelay", "calendar", "date", "appointments", "tooltipTemplate", "selectedAppointmentId"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onActionClickInternal", "onAppointmentDropInternal"] }, { kind: "component", type: AXSchedulerTimelineDayViewComponent, selector: "ax-scheduler-timeline-day-view", inputs: ["readonly", "draggable", "hasActions", "dragStartDelay", "calendar", "showResourceHeaders", "date", "endDayHour", "selectedAppointmentId", "startDayHour", "showUnassignedAppointments", "resources", "showCurrentTimeIndicator", "scrollToCurrentTimeIndicator", "resourceTemplate", "appointments", "tooltipTemplate"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onActionClickInternal", "onAppointmentDropInternal"] }, { kind: "component", type: AXSchedulerTimelineMonthViewComponent, selector: "ax-scheduler-timeline-month-view", inputs: ["readonly", "draggable", "hasActions", "dragStartDelay", "calendar", "showResourceHeaders", "date", "showUnassignedAppointments", "selectedAppointmentId", "resources", "showCurrentTimeIndicator", "scrollToCurrentTimeIndicator", "resourceTemplate", "appointments", "tooltipTemplate"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onActionClickInternal", "onAppointmentDropInternal"] }, { kind: "component", type: AXSchedulerTimelineWeeklyViewComponent, selector: "ax-scheduler-timeline-weekly-view", inputs: ["daysCount", "readonly", "draggable", "hasActions", "dragStartDelay", "calendar", "showResourceHeaders", "date", "endDayHour", "selectedAppointmentId", "showCurrentTimeIndicator", "scrollToCurrentTimeIndicator", "startDayHour", "showUnassignedAppointments", "resources", "resourceTemplate", "appointments", "tooltipTemplate"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onActionClickInternal", "onAppointmentDropInternal"] }, { kind: "component", type: AXSchedulerTimelineYearViewComponent, selector: "ax-scheduler-timeline-year-view", inputs: ["readonly", "draggable", "hasActions", "dragStartDelay", "calendar", "showResourceHeaders", "date", "showUnassignedAppointments", "selectedAppointmentId", "resources", "showCurrentTimeIndicator", "scrollToCurrentTimeIndicator", "resourceTemplate", "appointments", "tooltipTemplate"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onActionClickInternal", "onAppointmentDropInternal"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
5120
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXSchedulerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
5121
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXSchedulerComponent, isStandalone: true, selector: "ax-scheduler", inputs: { calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, startingDate: { classPropertyName: "startingDate", publicName: "startingDate", isSignal: true, isRequired: false, transformFunction: null }, 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 }, hasActions: { classPropertyName: "hasActions", publicName: "hasActions", isSignal: true, isRequired: false, transformFunction: null }, dragStartDelay: { classPropertyName: "dragStartDelay", publicName: "dragStartDelay", isSignal: true, isRequired: false, transformFunction: null }, weekend: { classPropertyName: "weekend", publicName: "weekend", 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 }, showResourceHeaders: { classPropertyName: "showResourceHeaders", publicName: "showResourceHeaders", isSignal: true, isRequired: false, transformFunction: null }, showCurrentTimeIndicator: { classPropertyName: "showCurrentTimeIndicator", publicName: "showCurrentTimeIndicator", isSignal: true, isRequired: false, transformFunction: null }, scrollToCurrentTimeIndicator: { classPropertyName: "scrollToCurrentTimeIndicator", publicName: "scrollToCurrentTimeIndicator", isSignal: true, isRequired: false, transformFunction: null }, showUnassignedAppointments: { classPropertyName: "showUnassignedAppointments", publicName: "showUnassignedAppointments", isSignal: true, isRequired: false, transformFunction: null }, resources: { classPropertyName: "resources", publicName: "resources", isSignal: true, isRequired: false, transformFunction: null }, resourceTemplate: { classPropertyName: "resourceTemplate", publicName: "resourceTemplate", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, tooltipTemplate: { classPropertyName: "tooltipTemplate", publicName: "tooltipTemplate", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, holidays: { classPropertyName: "holidays", publicName: "holidays", 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", onActionClick: "onActionClick", onAppointmentClicked: "onAppointmentClicked", onAppointmentDblClicked: "onAppointmentDblClicked", onAppointmentRightClick: "onAppointmentRightClick" }, host: { properties: { "class.ax-rtl": "rtl()" } }, providers: [AXUnsubscriber, { provide: AXComponent, useExisting: AXSchedulerComponent }], viewQueries: [{ propertyName: "viewModeSelectbox", first: true, predicate: AXSelectBoxComponent, descendants: true, isSignal: true }, { propertyName: "calendarPopover", first: true, predicate: ["calendarPopover"], descendants: true, isSignal: true }, { propertyName: "_calendarDayCellTemplate", first: true, predicate: ["calendarDayCellTemplate"], descendants: true, isSignal: true }, { propertyName: "_calendarMonthCellTemplate", first: true, predicate: ["calendarMonthCellTemplate"], descendants: true, isSignal: true }, { propertyName: "_calendarYearCellTemplate", first: true, predicate: ["calendarYearCellTemplate"], 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 text-xl\"\n [class.ax-icon-chevron-left]=\"!rtl()\"\n [class.ax-icon-chevron-right]=\"rtl()\"\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 text-xl\"\n [class.ax-icon-chevron-right]=\"!rtl()\"\n [class.ax-icon-chevron-left]=\"rtl()\"\n ></ax-icon>\n </ax-button>\n <ax-popover [target]=\"date\" #calendarPopover>\n <ax-calendar\n [type]=\"calendarType()\"\n [depth]=\"calendarDepth()\"\n [ngModel]=\"currentDate()\"\n [dayCellTemplate]=\"calendarDayCellTemplateRef\"\n [monthCellTemplate]=\"calendarMonthCellTemplateRef\"\n [yearCellTemplate]=\"calendarYearCellTemplateRef\"\n (onValueChanged)=\"calendarDateChanged($event)\"\n ></ax-calendar>\n </ax-popover>\n </div>\n <div class=\"ax-scheduler-actions\">\n <ax-select-box\n [dropdownWidth]=\"'200px'\"\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 class=\"fa-solid\" [class.fa-compress]=\"isFullScreen()\" [class.fa-expand]=\"!isFullScreen()\"></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 [rtl]=\"rtl()\"\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [draggable]=\"draggable()\"\n [hasActions]=\"hasActions()\"\n [calendar]=\"calendarType()\"\n [endDayHour]=\"endDayHour()\"\n [startDayHour]=\"startDayHour()\"\n [showCurrentTimeIndicator]=\"showCurrentTimeIndicator()\"\n [scrollToCurrentTimeIndicator]=\"scrollToCurrentTimeIndicator()\"\n [appointments]=\"viewAppointments()\"\n [dragStartDelay]=\"dragStartDelay()\"\n [tooltipTemplate]=\"tooltipTemplate()\"\n [selectedAppointmentId]=\"selectedAppointmentId()\"\n (onActionClickInternal)=\"onActionClick.emit($event)\"\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 [hasActions]=\"hasActions()\"\n [startDayHour]=\"startDayHour()\"\n [showCurrentTimeIndicator]=\"showCurrentTimeIndicator()\"\n [scrollToCurrentTimeIndicator]=\"scrollToCurrentTimeIndicator()\"\n [appointments]=\"viewAppointments()\"\n [dragStartDelay]=\"dragStartDelay()\"\n [tooltipTemplate]=\"tooltipTemplate()\"\n [selectedAppointmentId]=\"selectedAppointmentId()\"\n (onActionClickInternal)=\"onActionClick.emit($event)\"\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 [hasActions]=\"hasActions()\"\n [appointments]=\"viewAppointments()\"\n [firstDayOfWeek]=\"firstDayOfWeek()\"\n [dragStartDelay]=\"dragStartDelay()\"\n [tooltipTemplate]=\"tooltipTemplate()\"\n [selectedAppointmentId]=\"selectedAppointmentId()\"\n (onActionClickInternal)=\"onActionClick.emit($event)\"\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 [resources]=\"resources()\"\n [draggable]=\"draggable()\"\n [hasActions]=\"hasActions()\"\n [calendar]=\"calendarType()\"\n [endDayHour]=\"endDayHour()\"\n [startDayHour]=\"startDayHour()\"\n [appointments]=\"viewAppointments()\"\n [dragStartDelay]=\"dragStartDelay()\"\n [tooltipTemplate]=\"tooltipTemplate()\"\n [resourceTemplate]=\"resourceTemplate()\"\n [showResourceHeaders]=\"showResourceHeaders()\"\n [showCurrentTimeIndicator]=\"showCurrentTimeIndicator()\"\n [scrollToCurrentTimeIndicator]=\"scrollToCurrentTimeIndicator()\"\n [showUnassignedAppointments]=\"showUnassignedAppointments()\"\n [selectedAppointmentId]=\"selectedAppointmentId()\"\n (onActionClickInternal)=\"onActionClick.emit($event)\"\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-weekly') {\n <ax-scheduler-timeline-weekly-view\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [resources]=\"resources()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [endDayHour]=\"endDayHour()\"\n [hasActions]=\"hasActions()\"\n [startDayHour]=\"startDayHour()\"\n [appointments]=\"viewAppointments()\"\n [dragStartDelay]=\"dragStartDelay()\"\n [daysCount]=\"multiDayViewDaysCount()\"\n [tooltipTemplate]=\"tooltipTemplate()\"\n [resourceTemplate]=\"resourceTemplate()\"\n [showResourceHeaders]=\"showResourceHeaders()\"\n [showCurrentTimeIndicator]=\"showCurrentTimeIndicator()\"\n [scrollToCurrentTimeIndicator]=\"scrollToCurrentTimeIndicator()\"\n [showUnassignedAppointments]=\"showUnassignedAppointments()\"\n [selectedAppointmentId]=\"selectedAppointmentId()\"\n (onActionClickInternal)=\"onActionClick.emit($event)\"\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-weekly-view>\n }\n @case ('timeline-month') {\n <ax-scheduler-timeline-month-view\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [resources]=\"resources()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [hasActions]=\"hasActions()\"\n [appointments]=\"viewAppointments()\"\n [dragStartDelay]=\"dragStartDelay()\"\n [tooltipTemplate]=\"tooltipTemplate()\"\n [resourceTemplate]=\"resourceTemplate()\"\n [showResourceHeaders]=\"showResourceHeaders()\"\n [showCurrentTimeIndicator]=\"showCurrentTimeIndicator()\"\n [scrollToCurrentTimeIndicator]=\"scrollToCurrentTimeIndicator()\"\n [showUnassignedAppointments]=\"showUnassignedAppointments()\"\n [selectedAppointmentId]=\"selectedAppointmentId()\"\n (onActionClickInternal)=\"onActionClick.emit($event)\"\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 ('timeline-year') {\n <ax-scheduler-timeline-year-view\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [resources]=\"resources()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [hasActions]=\"hasActions()\"\n [appointments]=\"viewAppointments()\"\n [dragStartDelay]=\"dragStartDelay()\"\n [tooltipTemplate]=\"tooltipTemplate()\"\n [resourceTemplate]=\"resourceTemplate()\"\n [showResourceHeaders]=\"showResourceHeaders()\"\n [showCurrentTimeIndicator]=\"showCurrentTimeIndicator()\"\n [scrollToCurrentTimeIndicator]=\"scrollToCurrentTimeIndicator()\"\n [showUnassignedAppointments]=\"showUnassignedAppointments()\"\n [selectedAppointmentId]=\"selectedAppointmentId()\"\n (onActionClickInternal)=\"onActionClick.emit($event)\"\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-year-view>\n }\n @case ('agenda') {\n <ax-scheduler-agenda-view\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [hasActions]=\"hasActions()\"\n [appointments]=\"viewAppointments()\"\n [dragStartDelay]=\"dragStartDelay()\"\n [daysCount]=\"multiDayViewDaysCount()\"\n [tooltipTemplate]=\"tooltipTemplate()\"\n [selectedAppointmentId]=\"selectedAppointmentId()\"\n (onActionClickInternal)=\"onActionClick.emit($event)\"\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<ng-template #calendarDayCellTemplate let-data>\n @let slot = data.slot;\n <div class=\"flex flex-col items-center justify-between gap-1\">\n <span>{{ slot.text }}</span>\n @if (hasAppointmentsOnDate(slot.date?.date)) {\n <ax-badge color=\"primary\"></ax-badge>\n }\n </div>\n</ng-template>\n<ng-template #calendarMonthCellTemplate let-data>\n @let slot = data.slot;\n <div class=\"flex flex-col items-center justify-between gap-1\">\n <span>{{ slot.text }}</span>\n @if (hasAppointmentsInMonth(slot.date?.date)) {\n <ax-badge color=\"primary\"></ax-badge>\n }\n </div>\n</ng-template>\n<ng-template #calendarYearCellTemplate let-data>\n @let slot = data.slot;\n <div class=\"flex flex-col items-center justify-between gap-1\">\n <span>{{ slot.text }}</span>\n @if (hasAppointmentsInYear(slot.date?.date)) {\n <ax-badge color=\"primary\"></ax-badge>\n }\n </div>\n</ng-template>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-content:\"\"}}}@layer base{: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-comp-scheduler-primary-bg-color:var(--ax-sys-color-primary-lighter-surface);--ax-comp-scheduler-primary-text-color:var(--ax-sys-color-on-primary-lighter-surface);--ax-comp-scheduler-primary-active-border-color:var(--ax-sys-color-primary-500);--ax-comp-scheduler-highest-priority-bg-color:var(--ax-sys-color-danger-surface);--ax-comp-scheduler-highest-priority-text-color:var(--ax-sys-color-on-danger-surface);--ax-comp-scheduler-highest-priority-active-border-color:var(--ax-sys-color-danger-700);--ax-comp-scheduler-high-priority-bg-color:var(--ax-sys-color-danger-lighter-surface);--ax-comp-scheduler-high-priority-text-color:var(--ax-sys-color-on-danger-lighter-surface);--ax-comp-scheduler-high-priority-active-border-color:var(--ax-sys-color-danger-500);--ax-comp-scheduler-medium-priority-bg-color:var(--ax-sys-color-warning-lighter-surface);--ax-comp-scheduler-medium-priority-text-color:var(--ax-sys-color-on-warning-lighter-surface);--ax-comp-scheduler-medium-priority-active-border-color:var(--ax-sys-color-warning-600);--ax-comp-scheduler-low-priority-bg-color:var(--ax-sys-color-success-lighter-surface);--ax-comp-scheduler-low-priority-text-color:var(--ax-sys-color-on-success-lighter-surface);--ax-comp-scheduler-low-priority-active-border-color:var(--ax-sys-color-success-500);--ax-comp-scheduler-lowest-priority-bg-color:var(--ax-sys-color-success-lightest-surface);--ax-comp-scheduler-lowest-priority-text-color:var(--ax-sys-color-on-success-lightest-surface);--ax-comp-scheduler-lowest-priority-active-border-color:var(--ax-sys-color-success-400)}}@layer components{ax-scheduler .ax-scheduler-primary-priority{color:rgba(var(--ax-comp-scheduler-primary-text-color));background-color:rgba(var(--ax-comp-scheduler-primary-bg-color));border:2px solid #0000}ax-scheduler .ax-scheduler-primary-priority.ax-state-active{border:2px solid rgba(var(--ax-comp-scheduler-primary-active-border-color));z-index:10}ax-scheduler .ax-scheduler-highest-priority{color:rgba(var(--ax-comp-scheduler-highest-priority-text-color));background-color:rgba(var(--ax-comp-scheduler-highest-priority-bg-color));border:2px solid #0000}ax-scheduler .ax-scheduler-highest-priority.ax-state-active{border:2px solid rgba(var(--ax-comp-scheduler-highest-priority-active-border-color));z-index:10}ax-scheduler .ax-scheduler-high-priority{color:rgba(var(--ax-comp-scheduler-high-priority-text-color));background-color:rgba(var(--ax-comp-scheduler-high-priority-bg-color));border:2px solid #0000}ax-scheduler .ax-scheduler-high-priority.ax-state-active{border:2px solid rgba(var(--ax-comp-scheduler-high-priority-active-border-color));z-index:10}ax-scheduler .ax-scheduler-medium-priority{color:rgba(var(--ax-comp-scheduler-medium-priority-text-color));background-color:rgba(var(--ax-comp-scheduler-medium-priority-bg-color));border:2px solid #0000}ax-scheduler .ax-scheduler-medium-priority.ax-state-active{border:2px solid rgba(var(--ax-comp-scheduler-medium-priority-active-border-color));z-index:10}ax-scheduler .ax-scheduler-low-priority{color:rgba(var(--ax-comp-scheduler-low-priority-text-color));background-color:rgba(var(--ax-comp-scheduler-low-priority-bg-color));border:2px solid #0000}ax-scheduler .ax-scheduler-low-priority.ax-state-active{border:2px solid rgba(var(--ax-comp-scheduler-low-priority-active-border-color));z-index:10}ax-scheduler .ax-scheduler-lowest-priority{color:rgba(var(--ax-comp-scheduler-lowest-priority-text-color));background-color:rgba(var(--ax-comp-scheduler-lowest-priority-bg-color));border:2px solid #0000}ax-scheduler .ax-scheduler-lowest-priority.ax-state-active{border:2px solid rgba(var(--ax-comp-scheduler-lowest-priority-active-border-color));z-index:10}ax-scheduler{background-color:inherit;width:100%;height:100%;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));-webkit-user-select:none;user-select:none;display:block}ax-scheduler.ax-full-screen-container{z-index:61;inset-inline-start:calc(var(--spacing,.25rem) * 0);width:100vw;height:100vh;position:fixed;top:0}ax-scheduler .ax-scheduler-container{border-radius:var(--ax-sys-border-radius);border-style:var(--tw-border-style);background-color:inherit;border-width:1px;flex-direction:column;height:100%;display:flex;overflow:hidden}ax-scheduler .ax-scheduler-container .ax-scheduler-header{border-bottom-style:var(--tw-border-style);padding:calc(var(--spacing,.25rem) * 4);border-bottom-width:1px;justify-content:space-between;align-items:center;display:flex;overflow:auto hidden}ax-scheduler .ax-scheduler-container .ax-scheduler-header .ax-scheduler-date{min-width:calc(var(--spacing,.25rem) * 82);justify-content:space-between;align-items:center;display:flex}ax-scheduler .ax-scheduler-container .ax-scheduler-header .ax-scheduler-date p{min-width:calc(var(--spacing,.25rem) * 40);text-align:center;font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height, 1.5 ));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);margin:0}ax-scheduler .ax-scheduler-container .ax-scheduler-actions{justify-content:center;align-items:center;gap:calc(var(--spacing,.25rem) * 3);display:flex}ax-scheduler .ax-scheduler-container .ax-scheduler-truncate{text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden}ax-scheduler .ax-scheduler-container ax-subtitle{font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container{background-color:inherit;height:100%;overflow:auto}.ax-scheduler-popover .ax-scheduler-primary-priority{color:rgba(var(--ax-comp-scheduler-primary-text-color));background-color:rgba(var(--ax-comp-scheduler-primary-bg-color));border:2px solid #0000}.ax-scheduler-popover .ax-scheduler-primary-priority.ax-state-active{border:2px solid rgba(var(--ax-comp-scheduler-primary-active-border-color));z-index:10}.ax-scheduler-popover .ax-scheduler-highest-priority{color:rgba(var(--ax-comp-scheduler-highest-priority-text-color));background-color:rgba(var(--ax-comp-scheduler-highest-priority-bg-color));border:2px solid #0000}.ax-scheduler-popover .ax-scheduler-highest-priority.ax-state-active{border:2px solid rgba(var(--ax-comp-scheduler-highest-priority-active-border-color));z-index:10}.ax-scheduler-popover .ax-scheduler-high-priority{color:rgba(var(--ax-comp-scheduler-high-priority-text-color));background-color:rgba(var(--ax-comp-scheduler-high-priority-bg-color));border:2px solid #0000}.ax-scheduler-popover .ax-scheduler-high-priority.ax-state-active{border:2px solid rgba(var(--ax-comp-scheduler-high-priority-active-border-color));z-index:10}.ax-scheduler-popover .ax-scheduler-medium-priority{color:rgba(var(--ax-comp-scheduler-medium-priority-text-color));background-color:rgba(var(--ax-comp-scheduler-medium-priority-bg-color));border:2px solid #0000}.ax-scheduler-popover .ax-scheduler-medium-priority.ax-state-active{border:2px solid rgba(var(--ax-comp-scheduler-medium-priority-active-border-color));z-index:10}.ax-scheduler-popover .ax-scheduler-low-priority{color:rgba(var(--ax-comp-scheduler-low-priority-text-color));background-color:rgba(var(--ax-comp-scheduler-low-priority-bg-color));border:2px solid #0000}.ax-scheduler-popover .ax-scheduler-low-priority.ax-state-active{border:2px solid rgba(var(--ax-comp-scheduler-low-priority-active-border-color));z-index:10}.ax-scheduler-popover .ax-scheduler-lowest-priority{color:rgba(var(--ax-comp-scheduler-lowest-priority-text-color));background-color:rgba(var(--ax-comp-scheduler-lowest-priority-bg-color));border:2px solid #0000}.ax-scheduler-popover .ax-scheduler-lowest-priority.ax-state-active{border:2px solid rgba(var(--ax-comp-scheduler-lowest-priority-active-border-color));z-index:10}.ax-scheduler-popover{max-height:calc(var(--spacing,.25rem) * 40);gap:var(--spacing,.25rem);border-radius:var(--radius-lg,.5rem);padding:var(--spacing,.25rem);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));display:grid;overflow:auto}.ax-scheduler-popover.ax-scheduler-month-popover-appointment,.ax-scheduler-popover.ax-scheduler-timeline-year-popover-appointment{font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)))}.ax-scheduler-popover.ax-scheduler-timeline-year-popover-appointment .ax-scheduler-popover-appointment .ax-appointment-chip-title{margin-bottom:calc(var(--spacing,.25rem) * .5);--tw-font-weight:var(--font-weight-semibold,600);font-size:.8rem;font-weight:var(--font-weight-semibold,600)}.ax-scheduler-popover:not(.ax-state-readonly) .ax-scheduler-popover-appointment{cursor:pointer}.ax-scheduler-popover .ax-scheduler-popover-appointment{border-radius:calc(var(--ax-sys-border-radius) / 2);padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:var(--spacing,.25rem);-webkit-user-select:none;user-select:none;color:rgba(var(--ax-comp-scheduler-primary-text-color));background-color:rgba(var(--ax-comp-scheduler-primary-bg-color));flex-direction:column;display:flex;overflow:hidden}.ax-scheduler-popover .ax-scheduler-popover-appointment ax-subtitle{font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)))}.ax-scheduler-popover .ax-scheduler-popover-appointment .ax-scheduler-truncate{text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden}.ax-scheduler-popover ax-title,.ax-scheduler-popover .ax-appointment-chip-title{justify-content:space-between;display:flex}:is(.ax-scheduler-popover ax-title,.ax-scheduler-popover .ax-appointment-chip-title) .ax-scheduler-action-icon{cursor:pointer;width:auto}.ax-scheduler-current-time-line{pointer-events:none;z-index:7;--tw-shadow:0 0 6px var(--tw-shadow-color,#ef4444cc);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);background-color:#ef4444;position:absolute}.ax-scheduler-current-time-line:before{width:calc(var(--spacing,.25rem) * 3);height:calc(var(--spacing,.25rem) * 3);border-style:var(--tw-border-style);border-width:2px;border-color:rgba(var(--ax-sys-color-surface));--tw-shadow:0 0 8px var(--tw-shadow-color,#ef4444e6);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-content:\"\";content:var(--tw-content);background-color:#ef4444;border-radius:3.40282e38px;position:absolute}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-content{syntax:\"*\";inherits:false;initial-value:\"\"}\n/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */\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: AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { 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: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "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", "dayCellTemplate", "monthCellTemplate", "yearCellTemplate", "cellClass", "showNavigation", "count", "id", "weekend", "weekdays", "look", "yearRange", "holidays"], outputs: ["onOptionChanged", "valueChange", "onValueChanged", "minValueChange", "maxValueChange", "onBlur", "onFocus", "depthChange", "typeChange", "activeViewChange", "disabledDatesChange", "holidayDatesChange", "onNavigate", "onSlotClick", "countChange"] }, { 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", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXSchedulerDayViewComponent, selector: "ax-scheduler-day-view", inputs: ["rtl", "readonly", "draggable", "hasActions", "dragStartDelay", "calendar", "date", "endDayHour", "startDayHour", "showCurrentTimeIndicator", "scrollToCurrentTimeIndicator", "appointments", "tooltipTemplate", "selectedAppointmentId"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onActionClickInternal", "onAppointmentDropInternal"] }, { kind: "component", type: AXSchedulerWeekViewComponent, selector: "ax-scheduler-week-view", inputs: ["readonly", "draggable", "hasActions", "dragStartDelay", "calendar", "date", "endDayHour", "startDayHour", "showCurrentTimeIndicator", "scrollToCurrentTimeIndicator", "appointments", "tooltipTemplate", "selectedAppointmentId"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onActionClickInternal", "onAppointmentDropInternal"] }, { kind: "component", type: AXSchedulerMonthViewComponent, selector: "ax-scheduler-month-view", inputs: ["readonly", "draggable", "hasActions", "dragStartDelay", "calendar", "date", "appointments", "firstDayOfWeek", "selectedAppointmentId", "tooltipTemplate"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onActionClickInternal", "onAppointmentDropInternal"] }, { kind: "component", type: AXSchedulerAgendaViewComponent, selector: "ax-scheduler-agenda-view", inputs: ["daysCount", "readonly", "draggable", "hasActions", "dragStartDelay", "calendar", "date", "appointments", "tooltipTemplate", "selectedAppointmentId"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onActionClickInternal", "onAppointmentDropInternal"] }, { kind: "component", type: AXSchedulerTimelineDayViewComponent, selector: "ax-scheduler-timeline-day-view", inputs: ["readonly", "draggable", "hasActions", "dragStartDelay", "calendar", "showResourceHeaders", "date", "endDayHour", "selectedAppointmentId", "startDayHour", "showUnassignedAppointments", "resources", "showCurrentTimeIndicator", "scrollToCurrentTimeIndicator", "resourceTemplate", "appointments", "tooltipTemplate"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onActionClickInternal", "onAppointmentDropInternal"] }, { kind: "component", type: AXSchedulerTimelineMonthViewComponent, selector: "ax-scheduler-timeline-month-view", inputs: ["readonly", "draggable", "hasActions", "dragStartDelay", "calendar", "showResourceHeaders", "date", "showUnassignedAppointments", "selectedAppointmentId", "resources", "showCurrentTimeIndicator", "scrollToCurrentTimeIndicator", "resourceTemplate", "appointments", "tooltipTemplate"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onActionClickInternal", "onAppointmentDropInternal"] }, { kind: "component", type: AXSchedulerTimelineWeeklyViewComponent, selector: "ax-scheduler-timeline-weekly-view", inputs: ["daysCount", "readonly", "draggable", "hasActions", "dragStartDelay", "calendar", "showResourceHeaders", "date", "endDayHour", "selectedAppointmentId", "showCurrentTimeIndicator", "scrollToCurrentTimeIndicator", "startDayHour", "showUnassignedAppointments", "resources", "resourceTemplate", "appointments", "tooltipTemplate"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onActionClickInternal", "onAppointmentDropInternal"] }, { kind: "component", type: AXSchedulerTimelineYearViewComponent, selector: "ax-scheduler-timeline-year-view", inputs: ["readonly", "draggable", "hasActions", "dragStartDelay", "calendar", "showResourceHeaders", "date", "showUnassignedAppointments", "selectedAppointmentId", "resources", "showCurrentTimeIndicator", "scrollToCurrentTimeIndicator", "resourceTemplate", "appointments", "tooltipTemplate"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onActionClickInternal", "onAppointmentDropInternal"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
5050
5122
|
}
|
|
5051
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
5123
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXSchedulerComponent, decorators: [{
|
|
5052
5124
|
type: Component,
|
|
5053
5125
|
args: [{ selector: 'ax-scheduler', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
5054
5126
|
'[class.ax-rtl]': 'rtl()',
|
|
@@ -5068,7 +5140,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
|
|
|
5068
5140
|
AXSchedulerTimelineMonthViewComponent,
|
|
5069
5141
|
AXSchedulerTimelineWeeklyViewComponent,
|
|
5070
5142
|
AXSchedulerTimelineYearViewComponent,
|
|
5071
|
-
], providers: [AXUnsubscriber, { provide: AXComponent, useExisting: AXSchedulerComponent }], 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 [class.ax-icon-chevron-left]=\"!rtl()\"\n [class.ax-icon-chevron-right]=\"rtl()\"\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 [class.ax-icon-chevron-right]=\"!rtl()\"\n [class.ax-icon-chevron-left]=\"rtl()\"\n ></ax-icon>\n </ax-button>\n <ax-popover [target]=\"date\" #calendarPopover>\n <ax-calendar\n [type]=\"calendarType()\"\n [depth]=\"calendarDepth()\"\n [ngModel]=\"currentDate()\"\n [dayCellTemplate]=\"calendarDayCellTemplateRef\"\n [monthCellTemplate]=\"calendarMonthCellTemplateRef\"\n [yearCellTemplate]=\"calendarYearCellTemplateRef\"\n (onValueChanged)=\"calendarDateChanged($event)\"\n ></ax-calendar>\n </ax-popover>\n </div>\n <div class=\"ax-scheduler-actions\">\n <ax-select-box\n [dropdownWidth]=\"'200px'\"\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 class=\"fa-solid\" [class.fa-compress]=\"isFullScreen()\" [class.fa-expand]=\"!isFullScreen()\"></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 [rtl]=\"rtl()\"\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [draggable]=\"draggable()\"\n [hasActions]=\"hasActions()\"\n [calendar]=\"calendarType()\"\n [endDayHour]=\"endDayHour()\"\n [startDayHour]=\"startDayHour()\"\n [showCurrentTimeIndicator]=\"showCurrentTimeIndicator()\"\n [scrollToCurrentTimeIndicator]=\"scrollToCurrentTimeIndicator()\"\n [appointments]=\"viewAppointments()\"\n [dragStartDelay]=\"dragStartDelay()\"\n [tooltipTemplate]=\"tooltipTemplate()\"\n [selectedAppointmentId]=\"selectedAppointmentId()\"\n (onActionClickInternal)=\"onActionClick.emit($event)\"\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 [hasActions]=\"hasActions()\"\n [startDayHour]=\"startDayHour()\"\n [showCurrentTimeIndicator]=\"showCurrentTimeIndicator()\"\n [scrollToCurrentTimeIndicator]=\"scrollToCurrentTimeIndicator()\"\n [appointments]=\"viewAppointments()\"\n [dragStartDelay]=\"dragStartDelay()\"\n [tooltipTemplate]=\"tooltipTemplate()\"\n [selectedAppointmentId]=\"selectedAppointmentId()\"\n (onActionClickInternal)=\"onActionClick.emit($event)\"\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 [hasActions]=\"hasActions()\"\n [appointments]=\"viewAppointments()\"\n [firstDayOfWeek]=\"firstDayOfWeek()\"\n [dragStartDelay]=\"dragStartDelay()\"\n [tooltipTemplate]=\"tooltipTemplate()\"\n [selectedAppointmentId]=\"selectedAppointmentId()\"\n (onActionClickInternal)=\"onActionClick.emit($event)\"\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 [resources]=\"resources()\"\n [draggable]=\"draggable()\"\n [hasActions]=\"hasActions()\"\n [calendar]=\"calendarType()\"\n [endDayHour]=\"endDayHour()\"\n [startDayHour]=\"startDayHour()\"\n [appointments]=\"viewAppointments()\"\n [dragStartDelay]=\"dragStartDelay()\"\n [tooltipTemplate]=\"tooltipTemplate()\"\n [resourceTemplate]=\"resourceTemplate()\"\n [showResourceHeaders]=\"showResourceHeaders()\"\n [showCurrentTimeIndicator]=\"showCurrentTimeIndicator()\"\n [scrollToCurrentTimeIndicator]=\"scrollToCurrentTimeIndicator()\"\n [showUnassignedAppointments]=\"showUnassignedAppointments()\"\n [selectedAppointmentId]=\"selectedAppointmentId()\"\n (onActionClickInternal)=\"onActionClick.emit($event)\"\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-weekly') {\n <ax-scheduler-timeline-weekly-view\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [resources]=\"resources()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [endDayHour]=\"endDayHour()\"\n [hasActions]=\"hasActions()\"\n [startDayHour]=\"startDayHour()\"\n [appointments]=\"viewAppointments()\"\n [dragStartDelay]=\"dragStartDelay()\"\n [daysCount]=\"multiDayViewDaysCount()\"\n [tooltipTemplate]=\"tooltipTemplate()\"\n [resourceTemplate]=\"resourceTemplate()\"\n [showResourceHeaders]=\"showResourceHeaders()\"\n [showCurrentTimeIndicator]=\"showCurrentTimeIndicator()\"\n [scrollToCurrentTimeIndicator]=\"scrollToCurrentTimeIndicator()\"\n [showUnassignedAppointments]=\"showUnassignedAppointments()\"\n [selectedAppointmentId]=\"selectedAppointmentId()\"\n (onActionClickInternal)=\"onActionClick.emit($event)\"\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-weekly-view>\n }\n @case ('timeline-month') {\n <ax-scheduler-timeline-month-view\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [resources]=\"resources()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [hasActions]=\"hasActions()\"\n [appointments]=\"viewAppointments()\"\n [dragStartDelay]=\"dragStartDelay()\"\n [tooltipTemplate]=\"tooltipTemplate()\"\n [resourceTemplate]=\"resourceTemplate()\"\n [showResourceHeaders]=\"showResourceHeaders()\"\n [showCurrentTimeIndicator]=\"showCurrentTimeIndicator()\"\n [scrollToCurrentTimeIndicator]=\"scrollToCurrentTimeIndicator()\"\n [showUnassignedAppointments]=\"showUnassignedAppointments()\"\n [selectedAppointmentId]=\"selectedAppointmentId()\"\n (onActionClickInternal)=\"onActionClick.emit($event)\"\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 ('timeline-year') {\n <ax-scheduler-timeline-year-view\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [resources]=\"resources()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [hasActions]=\"hasActions()\"\n [appointments]=\"viewAppointments()\"\n [dragStartDelay]=\"dragStartDelay()\"\n [tooltipTemplate]=\"tooltipTemplate()\"\n [resourceTemplate]=\"resourceTemplate()\"\n [showResourceHeaders]=\"showResourceHeaders()\"\n [showCurrentTimeIndicator]=\"showCurrentTimeIndicator()\"\n [scrollToCurrentTimeIndicator]=\"scrollToCurrentTimeIndicator()\"\n [showUnassignedAppointments]=\"showUnassignedAppointments()\"\n [selectedAppointmentId]=\"selectedAppointmentId()\"\n (onActionClickInternal)=\"onActionClick.emit($event)\"\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-year-view>\n }\n @case ('agenda') {\n <ax-scheduler-agenda-view\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [hasActions]=\"hasActions()\"\n [appointments]=\"viewAppointments()\"\n [dragStartDelay]=\"dragStartDelay()\"\n [daysCount]=\"multiDayViewDaysCount()\"\n [tooltipTemplate]=\"tooltipTemplate()\"\n [selectedAppointmentId]=\"selectedAppointmentId()\"\n (onActionClickInternal)=\"onActionClick.emit($event)\"\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<ng-template #calendarDayCellTemplate let-data>\n @let slot = data.slot;\n <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-between ax-gap-1\">\n <span>{{ slot.text }}</span>\n @if (hasAppointmentsOnDate(slot.date?.date)) {\n <ax-badge color=\"primary\"></ax-badge>\n }\n </div>\n</ng-template>\n<ng-template #calendarMonthCellTemplate let-data>\n @let slot = data.slot;\n <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-between ax-gap-1\">\n <span>{{ slot.text }}</span>\n @if (hasAppointmentsInMonth(slot.date?.date)) {\n <ax-badge color=\"primary\"></ax-badge>\n }\n </div>\n</ng-template>\n<ng-template #calendarYearCellTemplate let-data>\n @let slot = data.slot;\n <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-between ax-gap-1\">\n <span>{{ slot.text }}</span>\n @if (hasAppointmentsInYear(slot.date?.date)) {\n <ax-badge color=\"primary\"></ax-badge>\n }\n </div>\n</ng-template>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-content:\"\"}}}@layer base{: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}}@layer components{ax-scheduler{width:100%;height:100%;display:block}ax-scheduler .ax-scheduler-primary-periority{background-color:rgba(var(--ax-sys-color-primary-surface));color:rgba(var(--ax-sys-color-on-primary-surface))}ax-scheduler .ax-scheduler-highest-periority{background-color:rgba(var(--ax-sys-color-danger-dark-surface));color:rgba(var(--ax-sys-color-on-danger-dark-surface))}ax-scheduler .ax-scheduler-high-periority{background-color:rgba(var(--ax-sys-color-danger-surface));color:rgba(var(--ax-sys-color-on-danger-surface))}ax-scheduler .ax-scheduler-medium-periority{background-color:rgba(var(--ax-sys-color-warning-surface));color:rgba(var(--ax-sys-color-on-warning-surface))}ax-scheduler .ax-scheduler-low-periority{background-color:rgba(var(--ax-sys-color-success-light-surface));color:rgba(var(--ax-sys-color-on-success-light-surface))}ax-scheduler .ax-scheduler-lowest-periority{background-color:rgba(var(--ax-sys-color-success-lightest-surface));color:rgba(var(--ax-sys-color-on-success-lightest-surface))}ax-scheduler{background-color:inherit;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));-webkit-user-select:none;user-select:none}ax-scheduler.ax-full-screen-container{top:calc(var(--spacing,.25rem) * 0);left:calc(var(--spacing,.25rem) * 0);z-index:61;width:100vw;height:100vh;position:fixed}ax-scheduler .ax-scheduler-container{border-radius:var(--ax-sys-border-radius);border-style:var(--tw-border-style);background-color:inherit;border-width:1px;flex-direction:column;height:100%;display:flex;overflow:hidden}ax-scheduler .ax-scheduler-container .ax-scheduler-header{border-bottom-style:var(--tw-border-style);padding:calc(var(--spacing,.25rem) * 4);border-bottom-width:1px;justify-content:space-between;align-items:center;display:flex;overflow:auto hidden}ax-scheduler .ax-scheduler-container .ax-scheduler-header .ax-scheduler-date{min-width:calc(var(--spacing,.25rem) * 82);justify-content:space-between;align-items:center;display:flex}ax-scheduler .ax-scheduler-container .ax-scheduler-header .ax-scheduler-date p{margin:calc(var(--spacing,.25rem) * 0);min-width:calc(var(--spacing,.25rem) * 40);text-align:center;font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height, 1.5 ));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-scheduler .ax-scheduler-container .ax-scheduler-actions{justify-content:center;align-items:center;gap:calc(var(--spacing,.25rem) * 3);display:flex}ax-scheduler .ax-scheduler-container .ax-scheduler-truncate{text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden}ax-scheduler .ax-scheduler-container ax-subtitle{font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container{background-color:inherit;height:100%;overflow:auto}.ax-overlay-pane.ax-scheduler-popover{max-height:calc(var(--spacing,.25rem) * 40);gap:calc(var(--spacing,.25rem) * 1);border-radius:var(--ax-sys-border-radius);display:grid;overflow:auto}.ax-overlay-pane.ax-scheduler-popover .ax-scheduler-primary-periority{background-color:rgba(var(--ax-sys-color-primary-surface));color:rgba(var(--ax-sys-color-on-primary-surface))}.ax-overlay-pane.ax-scheduler-popover .ax-scheduler-highest-periority{background-color:rgba(var(--ax-sys-color-danger-dark-surface));color:rgba(var(--ax-sys-color-on-danger-dark-surface))}.ax-overlay-pane.ax-scheduler-popover .ax-scheduler-high-periority{background-color:rgba(var(--ax-sys-color-danger-surface));color:rgba(var(--ax-sys-color-on-danger-surface))}.ax-overlay-pane.ax-scheduler-popover .ax-scheduler-medium-periority{background-color:rgba(var(--ax-sys-color-warning-surface));color:rgba(var(--ax-sys-color-on-warning-surface))}.ax-overlay-pane.ax-scheduler-popover .ax-scheduler-low-periority{background-color:rgba(var(--ax-sys-color-success-light-surface));color:rgba(var(--ax-sys-color-on-success-light-surface))}.ax-overlay-pane.ax-scheduler-popover .ax-scheduler-lowest-periority{background-color:rgba(var(--ax-sys-color-success-lightest-surface));color:rgba(var(--ax-sys-color-on-success-lightest-surface))}.ax-overlay-pane.ax-scheduler-popover{padding:calc(var(--spacing,.25rem) * 1);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)))}.ax-overlay-pane.ax-scheduler-popover.ax-scheduler-month-popover-appointment{font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)))}.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{border-radius:calc(var(--ax-sys-border-radius) / 2);background-color:rgba(var(--ax-sys-color-primary-surface));padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:calc(var(--spacing,.25rem) * 1);color:rgba(var(--ax-sys-color-on-primary-surface));-webkit-user-select:none;user-select:none;flex-direction:column;display:flex;overflow:hidden}.ax-overlay-pane.ax-scheduler-popover .ax-scheduler-popover-appointment ax-subtitle{font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)))}.ax-overlay-pane.ax-scheduler-popover .ax-scheduler-popover-appointment .ax-scheduler-truncate{text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden}.ax-overlay-pane.ax-scheduler-popover ax-title,.ax-overlay-pane.ax-scheduler-popover .ax-appointment-chip-title{justify-content:space-between;display:flex}:is(.ax-overlay-pane.ax-scheduler-popover ax-title,.ax-overlay-pane.ax-scheduler-popover .ax-appointment-chip-title) .ax-scheduler-action-icon{cursor:pointer;width:auto}.ax-scheduler-current-time-line{pointer-events:none;z-index:7;--tw-shadow:0 0 6px var(--tw-shadow-color,#ef4444cc);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);background-color:#ef4444;position:absolute}.ax-scheduler-current-time-line:before{width:calc(var(--spacing,.25rem) * 3);height:calc(var(--spacing,.25rem) * 3);border-style:var(--tw-border-style);border-width:2px;border-color:rgba(var(--ax-sys-color-surface));--tw-shadow:0 0 8px var(--tw-shadow-color,#ef4444e6);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-content:\"\";content:var(--tw-content);background-color:#ef4444;border-radius:3.40282e38px;position:absolute}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-content{syntax:\"*\";inherits:false;initial-value:\"\"}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"] }]
|
|
5143
|
+
], providers: [AXUnsubscriber, { provide: AXComponent, useExisting: AXSchedulerComponent }], 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 text-xl\"\n [class.ax-icon-chevron-left]=\"!rtl()\"\n [class.ax-icon-chevron-right]=\"rtl()\"\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 text-xl\"\n [class.ax-icon-chevron-right]=\"!rtl()\"\n [class.ax-icon-chevron-left]=\"rtl()\"\n ></ax-icon>\n </ax-button>\n <ax-popover [target]=\"date\" #calendarPopover>\n <ax-calendar\n [type]=\"calendarType()\"\n [depth]=\"calendarDepth()\"\n [ngModel]=\"currentDate()\"\n [dayCellTemplate]=\"calendarDayCellTemplateRef\"\n [monthCellTemplate]=\"calendarMonthCellTemplateRef\"\n [yearCellTemplate]=\"calendarYearCellTemplateRef\"\n (onValueChanged)=\"calendarDateChanged($event)\"\n ></ax-calendar>\n </ax-popover>\n </div>\n <div class=\"ax-scheduler-actions\">\n <ax-select-box\n [dropdownWidth]=\"'200px'\"\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 class=\"fa-solid\" [class.fa-compress]=\"isFullScreen()\" [class.fa-expand]=\"!isFullScreen()\"></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 [rtl]=\"rtl()\"\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [draggable]=\"draggable()\"\n [hasActions]=\"hasActions()\"\n [calendar]=\"calendarType()\"\n [endDayHour]=\"endDayHour()\"\n [startDayHour]=\"startDayHour()\"\n [showCurrentTimeIndicator]=\"showCurrentTimeIndicator()\"\n [scrollToCurrentTimeIndicator]=\"scrollToCurrentTimeIndicator()\"\n [appointments]=\"viewAppointments()\"\n [dragStartDelay]=\"dragStartDelay()\"\n [tooltipTemplate]=\"tooltipTemplate()\"\n [selectedAppointmentId]=\"selectedAppointmentId()\"\n (onActionClickInternal)=\"onActionClick.emit($event)\"\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 [hasActions]=\"hasActions()\"\n [startDayHour]=\"startDayHour()\"\n [showCurrentTimeIndicator]=\"showCurrentTimeIndicator()\"\n [scrollToCurrentTimeIndicator]=\"scrollToCurrentTimeIndicator()\"\n [appointments]=\"viewAppointments()\"\n [dragStartDelay]=\"dragStartDelay()\"\n [tooltipTemplate]=\"tooltipTemplate()\"\n [selectedAppointmentId]=\"selectedAppointmentId()\"\n (onActionClickInternal)=\"onActionClick.emit($event)\"\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 [hasActions]=\"hasActions()\"\n [appointments]=\"viewAppointments()\"\n [firstDayOfWeek]=\"firstDayOfWeek()\"\n [dragStartDelay]=\"dragStartDelay()\"\n [tooltipTemplate]=\"tooltipTemplate()\"\n [selectedAppointmentId]=\"selectedAppointmentId()\"\n (onActionClickInternal)=\"onActionClick.emit($event)\"\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 [resources]=\"resources()\"\n [draggable]=\"draggable()\"\n [hasActions]=\"hasActions()\"\n [calendar]=\"calendarType()\"\n [endDayHour]=\"endDayHour()\"\n [startDayHour]=\"startDayHour()\"\n [appointments]=\"viewAppointments()\"\n [dragStartDelay]=\"dragStartDelay()\"\n [tooltipTemplate]=\"tooltipTemplate()\"\n [resourceTemplate]=\"resourceTemplate()\"\n [showResourceHeaders]=\"showResourceHeaders()\"\n [showCurrentTimeIndicator]=\"showCurrentTimeIndicator()\"\n [scrollToCurrentTimeIndicator]=\"scrollToCurrentTimeIndicator()\"\n [showUnassignedAppointments]=\"showUnassignedAppointments()\"\n [selectedAppointmentId]=\"selectedAppointmentId()\"\n (onActionClickInternal)=\"onActionClick.emit($event)\"\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-weekly') {\n <ax-scheduler-timeline-weekly-view\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [resources]=\"resources()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [endDayHour]=\"endDayHour()\"\n [hasActions]=\"hasActions()\"\n [startDayHour]=\"startDayHour()\"\n [appointments]=\"viewAppointments()\"\n [dragStartDelay]=\"dragStartDelay()\"\n [daysCount]=\"multiDayViewDaysCount()\"\n [tooltipTemplate]=\"tooltipTemplate()\"\n [resourceTemplate]=\"resourceTemplate()\"\n [showResourceHeaders]=\"showResourceHeaders()\"\n [showCurrentTimeIndicator]=\"showCurrentTimeIndicator()\"\n [scrollToCurrentTimeIndicator]=\"scrollToCurrentTimeIndicator()\"\n [showUnassignedAppointments]=\"showUnassignedAppointments()\"\n [selectedAppointmentId]=\"selectedAppointmentId()\"\n (onActionClickInternal)=\"onActionClick.emit($event)\"\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-weekly-view>\n }\n @case ('timeline-month') {\n <ax-scheduler-timeline-month-view\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [resources]=\"resources()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [hasActions]=\"hasActions()\"\n [appointments]=\"viewAppointments()\"\n [dragStartDelay]=\"dragStartDelay()\"\n [tooltipTemplate]=\"tooltipTemplate()\"\n [resourceTemplate]=\"resourceTemplate()\"\n [showResourceHeaders]=\"showResourceHeaders()\"\n [showCurrentTimeIndicator]=\"showCurrentTimeIndicator()\"\n [scrollToCurrentTimeIndicator]=\"scrollToCurrentTimeIndicator()\"\n [showUnassignedAppointments]=\"showUnassignedAppointments()\"\n [selectedAppointmentId]=\"selectedAppointmentId()\"\n (onActionClickInternal)=\"onActionClick.emit($event)\"\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 ('timeline-year') {\n <ax-scheduler-timeline-year-view\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [resources]=\"resources()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [hasActions]=\"hasActions()\"\n [appointments]=\"viewAppointments()\"\n [dragStartDelay]=\"dragStartDelay()\"\n [tooltipTemplate]=\"tooltipTemplate()\"\n [resourceTemplate]=\"resourceTemplate()\"\n [showResourceHeaders]=\"showResourceHeaders()\"\n [showCurrentTimeIndicator]=\"showCurrentTimeIndicator()\"\n [scrollToCurrentTimeIndicator]=\"scrollToCurrentTimeIndicator()\"\n [showUnassignedAppointments]=\"showUnassignedAppointments()\"\n [selectedAppointmentId]=\"selectedAppointmentId()\"\n (onActionClickInternal)=\"onActionClick.emit($event)\"\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-year-view>\n }\n @case ('agenda') {\n <ax-scheduler-agenda-view\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [hasActions]=\"hasActions()\"\n [appointments]=\"viewAppointments()\"\n [dragStartDelay]=\"dragStartDelay()\"\n [daysCount]=\"multiDayViewDaysCount()\"\n [tooltipTemplate]=\"tooltipTemplate()\"\n [selectedAppointmentId]=\"selectedAppointmentId()\"\n (onActionClickInternal)=\"onActionClick.emit($event)\"\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<ng-template #calendarDayCellTemplate let-data>\n @let slot = data.slot;\n <div class=\"flex flex-col items-center justify-between gap-1\">\n <span>{{ slot.text }}</span>\n @if (hasAppointmentsOnDate(slot.date?.date)) {\n <ax-badge color=\"primary\"></ax-badge>\n }\n </div>\n</ng-template>\n<ng-template #calendarMonthCellTemplate let-data>\n @let slot = data.slot;\n <div class=\"flex flex-col items-center justify-between gap-1\">\n <span>{{ slot.text }}</span>\n @if (hasAppointmentsInMonth(slot.date?.date)) {\n <ax-badge color=\"primary\"></ax-badge>\n }\n </div>\n</ng-template>\n<ng-template #calendarYearCellTemplate let-data>\n @let slot = data.slot;\n <div class=\"flex flex-col items-center justify-between gap-1\">\n <span>{{ slot.text }}</span>\n @if (hasAppointmentsInYear(slot.date?.date)) {\n <ax-badge color=\"primary\"></ax-badge>\n }\n </div>\n</ng-template>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-content:\"\"}}}@layer base{: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-comp-scheduler-primary-bg-color:var(--ax-sys-color-primary-lighter-surface);--ax-comp-scheduler-primary-text-color:var(--ax-sys-color-on-primary-lighter-surface);--ax-comp-scheduler-primary-active-border-color:var(--ax-sys-color-primary-500);--ax-comp-scheduler-highest-priority-bg-color:var(--ax-sys-color-danger-surface);--ax-comp-scheduler-highest-priority-text-color:var(--ax-sys-color-on-danger-surface);--ax-comp-scheduler-highest-priority-active-border-color:var(--ax-sys-color-danger-700);--ax-comp-scheduler-high-priority-bg-color:var(--ax-sys-color-danger-lighter-surface);--ax-comp-scheduler-high-priority-text-color:var(--ax-sys-color-on-danger-lighter-surface);--ax-comp-scheduler-high-priority-active-border-color:var(--ax-sys-color-danger-500);--ax-comp-scheduler-medium-priority-bg-color:var(--ax-sys-color-warning-lighter-surface);--ax-comp-scheduler-medium-priority-text-color:var(--ax-sys-color-on-warning-lighter-surface);--ax-comp-scheduler-medium-priority-active-border-color:var(--ax-sys-color-warning-600);--ax-comp-scheduler-low-priority-bg-color:var(--ax-sys-color-success-lighter-surface);--ax-comp-scheduler-low-priority-text-color:var(--ax-sys-color-on-success-lighter-surface);--ax-comp-scheduler-low-priority-active-border-color:var(--ax-sys-color-success-500);--ax-comp-scheduler-lowest-priority-bg-color:var(--ax-sys-color-success-lightest-surface);--ax-comp-scheduler-lowest-priority-text-color:var(--ax-sys-color-on-success-lightest-surface);--ax-comp-scheduler-lowest-priority-active-border-color:var(--ax-sys-color-success-400)}}@layer components{ax-scheduler .ax-scheduler-primary-priority{color:rgba(var(--ax-comp-scheduler-primary-text-color));background-color:rgba(var(--ax-comp-scheduler-primary-bg-color));border:2px solid #0000}ax-scheduler .ax-scheduler-primary-priority.ax-state-active{border:2px solid rgba(var(--ax-comp-scheduler-primary-active-border-color));z-index:10}ax-scheduler .ax-scheduler-highest-priority{color:rgba(var(--ax-comp-scheduler-highest-priority-text-color));background-color:rgba(var(--ax-comp-scheduler-highest-priority-bg-color));border:2px solid #0000}ax-scheduler .ax-scheduler-highest-priority.ax-state-active{border:2px solid rgba(var(--ax-comp-scheduler-highest-priority-active-border-color));z-index:10}ax-scheduler .ax-scheduler-high-priority{color:rgba(var(--ax-comp-scheduler-high-priority-text-color));background-color:rgba(var(--ax-comp-scheduler-high-priority-bg-color));border:2px solid #0000}ax-scheduler .ax-scheduler-high-priority.ax-state-active{border:2px solid rgba(var(--ax-comp-scheduler-high-priority-active-border-color));z-index:10}ax-scheduler .ax-scheduler-medium-priority{color:rgba(var(--ax-comp-scheduler-medium-priority-text-color));background-color:rgba(var(--ax-comp-scheduler-medium-priority-bg-color));border:2px solid #0000}ax-scheduler .ax-scheduler-medium-priority.ax-state-active{border:2px solid rgba(var(--ax-comp-scheduler-medium-priority-active-border-color));z-index:10}ax-scheduler .ax-scheduler-low-priority{color:rgba(var(--ax-comp-scheduler-low-priority-text-color));background-color:rgba(var(--ax-comp-scheduler-low-priority-bg-color));border:2px solid #0000}ax-scheduler .ax-scheduler-low-priority.ax-state-active{border:2px solid rgba(var(--ax-comp-scheduler-low-priority-active-border-color));z-index:10}ax-scheduler .ax-scheduler-lowest-priority{color:rgba(var(--ax-comp-scheduler-lowest-priority-text-color));background-color:rgba(var(--ax-comp-scheduler-lowest-priority-bg-color));border:2px solid #0000}ax-scheduler .ax-scheduler-lowest-priority.ax-state-active{border:2px solid rgba(var(--ax-comp-scheduler-lowest-priority-active-border-color));z-index:10}ax-scheduler{background-color:inherit;width:100%;height:100%;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));-webkit-user-select:none;user-select:none;display:block}ax-scheduler.ax-full-screen-container{z-index:61;inset-inline-start:calc(var(--spacing,.25rem) * 0);width:100vw;height:100vh;position:fixed;top:0}ax-scheduler .ax-scheduler-container{border-radius:var(--ax-sys-border-radius);border-style:var(--tw-border-style);background-color:inherit;border-width:1px;flex-direction:column;height:100%;display:flex;overflow:hidden}ax-scheduler .ax-scheduler-container .ax-scheduler-header{border-bottom-style:var(--tw-border-style);padding:calc(var(--spacing,.25rem) * 4);border-bottom-width:1px;justify-content:space-between;align-items:center;display:flex;overflow:auto hidden}ax-scheduler .ax-scheduler-container .ax-scheduler-header .ax-scheduler-date{min-width:calc(var(--spacing,.25rem) * 82);justify-content:space-between;align-items:center;display:flex}ax-scheduler .ax-scheduler-container .ax-scheduler-header .ax-scheduler-date p{min-width:calc(var(--spacing,.25rem) * 40);text-align:center;font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height, 1.5 ));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);margin:0}ax-scheduler .ax-scheduler-container .ax-scheduler-actions{justify-content:center;align-items:center;gap:calc(var(--spacing,.25rem) * 3);display:flex}ax-scheduler .ax-scheduler-container .ax-scheduler-truncate{text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden}ax-scheduler .ax-scheduler-container ax-subtitle{font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container{background-color:inherit;height:100%;overflow:auto}.ax-scheduler-popover .ax-scheduler-primary-priority{color:rgba(var(--ax-comp-scheduler-primary-text-color));background-color:rgba(var(--ax-comp-scheduler-primary-bg-color));border:2px solid #0000}.ax-scheduler-popover .ax-scheduler-primary-priority.ax-state-active{border:2px solid rgba(var(--ax-comp-scheduler-primary-active-border-color));z-index:10}.ax-scheduler-popover .ax-scheduler-highest-priority{color:rgba(var(--ax-comp-scheduler-highest-priority-text-color));background-color:rgba(var(--ax-comp-scheduler-highest-priority-bg-color));border:2px solid #0000}.ax-scheduler-popover .ax-scheduler-highest-priority.ax-state-active{border:2px solid rgba(var(--ax-comp-scheduler-highest-priority-active-border-color));z-index:10}.ax-scheduler-popover .ax-scheduler-high-priority{color:rgba(var(--ax-comp-scheduler-high-priority-text-color));background-color:rgba(var(--ax-comp-scheduler-high-priority-bg-color));border:2px solid #0000}.ax-scheduler-popover .ax-scheduler-high-priority.ax-state-active{border:2px solid rgba(var(--ax-comp-scheduler-high-priority-active-border-color));z-index:10}.ax-scheduler-popover .ax-scheduler-medium-priority{color:rgba(var(--ax-comp-scheduler-medium-priority-text-color));background-color:rgba(var(--ax-comp-scheduler-medium-priority-bg-color));border:2px solid #0000}.ax-scheduler-popover .ax-scheduler-medium-priority.ax-state-active{border:2px solid rgba(var(--ax-comp-scheduler-medium-priority-active-border-color));z-index:10}.ax-scheduler-popover .ax-scheduler-low-priority{color:rgba(var(--ax-comp-scheduler-low-priority-text-color));background-color:rgba(var(--ax-comp-scheduler-low-priority-bg-color));border:2px solid #0000}.ax-scheduler-popover .ax-scheduler-low-priority.ax-state-active{border:2px solid rgba(var(--ax-comp-scheduler-low-priority-active-border-color));z-index:10}.ax-scheduler-popover .ax-scheduler-lowest-priority{color:rgba(var(--ax-comp-scheduler-lowest-priority-text-color));background-color:rgba(var(--ax-comp-scheduler-lowest-priority-bg-color));border:2px solid #0000}.ax-scheduler-popover .ax-scheduler-lowest-priority.ax-state-active{border:2px solid rgba(var(--ax-comp-scheduler-lowest-priority-active-border-color));z-index:10}.ax-scheduler-popover{max-height:calc(var(--spacing,.25rem) * 40);gap:var(--spacing,.25rem);border-radius:var(--radius-lg,.5rem);padding:var(--spacing,.25rem);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));display:grid;overflow:auto}.ax-scheduler-popover.ax-scheduler-month-popover-appointment,.ax-scheduler-popover.ax-scheduler-timeline-year-popover-appointment{font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)))}.ax-scheduler-popover.ax-scheduler-timeline-year-popover-appointment .ax-scheduler-popover-appointment .ax-appointment-chip-title{margin-bottom:calc(var(--spacing,.25rem) * .5);--tw-font-weight:var(--font-weight-semibold,600);font-size:.8rem;font-weight:var(--font-weight-semibold,600)}.ax-scheduler-popover:not(.ax-state-readonly) .ax-scheduler-popover-appointment{cursor:pointer}.ax-scheduler-popover .ax-scheduler-popover-appointment{border-radius:calc(var(--ax-sys-border-radius) / 2);padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:var(--spacing,.25rem);-webkit-user-select:none;user-select:none;color:rgba(var(--ax-comp-scheduler-primary-text-color));background-color:rgba(var(--ax-comp-scheduler-primary-bg-color));flex-direction:column;display:flex;overflow:hidden}.ax-scheduler-popover .ax-scheduler-popover-appointment ax-subtitle{font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)))}.ax-scheduler-popover .ax-scheduler-popover-appointment .ax-scheduler-truncate{text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden}.ax-scheduler-popover ax-title,.ax-scheduler-popover .ax-appointment-chip-title{justify-content:space-between;display:flex}:is(.ax-scheduler-popover ax-title,.ax-scheduler-popover .ax-appointment-chip-title) .ax-scheduler-action-icon{cursor:pointer;width:auto}.ax-scheduler-current-time-line{pointer-events:none;z-index:7;--tw-shadow:0 0 6px var(--tw-shadow-color,#ef4444cc);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);background-color:#ef4444;position:absolute}.ax-scheduler-current-time-line:before{width:calc(var(--spacing,.25rem) * 3);height:calc(var(--spacing,.25rem) * 3);border-style:var(--tw-border-style);border-width:2px;border-color:rgba(var(--ax-sys-color-surface));--tw-shadow:0 0 8px var(--tw-shadow-color,#ef4444e6);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-content:\"\";content:var(--tw-content);background-color:#ef4444;border-radius:3.40282e38px;position:absolute}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-content{syntax:\"*\";inherits:false;initial-value:\"\"}\n/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */\n"] }]
|
|
5072
5144
|
}], propDecorators: { viewModeSelectbox: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXSelectBoxComponent), { isSignal: true }] }], calendarPopover: [{ type: i0.ViewChild, args: ['calendarPopover', { isSignal: true }] }], _calendarDayCellTemplate: [{ type: i0.ViewChild, args: ['calendarDayCellTemplate', { isSignal: true }] }], _calendarMonthCellTemplate: [{ type: i0.ViewChild, args: ['calendarMonthCellTemplate', { isSignal: true }] }], _calendarYearCellTemplate: [{ type: i0.ViewChild, args: ['calendarYearCellTemplate', { isSignal: true }] }], calendar: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendar", required: false }] }], startingDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "startingDate", required: false }] }], endDayHour: [{ type: i0.Input, args: [{ isSignal: true, alias: "endDayHour", required: false }] }], startDayHour: [{ type: i0.Input, args: [{ isSignal: true, alias: "startDayHour", required: false }] }], hasHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasHeader", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], hasActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasActions", required: false }] }], dragStartDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragStartDelay", required: false }] }], weekend: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekend", required: false }] }], allowFullScreen: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowFullScreen", required: false }] }], multiDayViewDaysCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiDayViewDaysCount", required: false }] }], showResourceHeaders: [{ type: i0.Input, args: [{ isSignal: true, alias: "showResourceHeaders", required: false }] }], showCurrentTimeIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCurrentTimeIndicator", required: false }] }], scrollToCurrentTimeIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollToCurrentTimeIndicator", required: false }] }], showUnassignedAppointments: [{ type: i0.Input, args: [{ isSignal: true, alias: "showUnassignedAppointments", required: false }] }], resources: [{ type: i0.Input, args: [{ isSignal: true, alias: "resources", required: false }] }], resourceTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "resourceTemplate", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], tooltipTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipTemplate", required: false }] }], dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }], holidays: [{ type: i0.Input, args: [{ isSignal: true, alias: "holidays", required: false }] }], views: [{ type: i0.Input, args: [{ isSignal: true, alias: "views", required: false }] }], selectedView: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedView", required: false }] }, { type: i0.Output, args: ["selectedViewChange"] }], onDataLoaded: [{ type: i0.Output, args: ["onDataLoaded"] }], onRangeChanged: [{ type: i0.Output, args: ["onRangeChanged"] }], onSlotClicked: [{ type: i0.Output, args: ["onSlotClicked"] }], onSlotDblClicked: [{ type: i0.Output, args: ["onSlotDblClicked"] }], onSlotRightClick: [{ type: i0.Output, args: ["onSlotRightClick"] }], onAppointmentDrop: [{ type: i0.Output, args: ["onAppointmentDrop"] }], onActionClick: [{ type: i0.Output, args: ["onActionClick"] }], onAppointmentClicked: [{ type: i0.Output, args: ["onAppointmentClicked"] }], onAppointmentDblClicked: [{ type: i0.Output, args: ["onAppointmentDblClicked"] }], onAppointmentRightClick: [{ type: i0.Output, args: ["onAppointmentRightClick"] }] } });
|
|
5073
5145
|
|
|
5074
5146
|
const COMPONENT = [
|
|
@@ -5083,8 +5155,8 @@ const COMPONENT = [
|
|
|
5083
5155
|
AXSchedulerTimelineYearViewComponent,
|
|
5084
5156
|
];
|
|
5085
5157
|
class AXSchedulerModule {
|
|
5086
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
5087
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.
|
|
5158
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXSchedulerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
5159
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: AXSchedulerModule, imports: [AXSchedulerComponent,
|
|
5088
5160
|
AXSchedulerDayViewComponent,
|
|
5089
5161
|
AXSchedulerWeekViewComponent,
|
|
5090
5162
|
AXSchedulerMonthViewComponent,
|
|
@@ -5101,9 +5173,9 @@ class AXSchedulerModule {
|
|
|
5101
5173
|
AXSchedulerTimelineMonthViewComponent,
|
|
5102
5174
|
AXSchedulerTimelineWeeklyViewComponent,
|
|
5103
5175
|
AXSchedulerTimelineYearViewComponent] }); }
|
|
5104
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.
|
|
5176
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXSchedulerModule, imports: [COMPONENT] }); }
|
|
5105
5177
|
}
|
|
5106
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
5178
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXSchedulerModule, decorators: [{
|
|
5107
5179
|
type: NgModule,
|
|
5108
5180
|
args: [{
|
|
5109
5181
|
imports: [...COMPONENT],
|