@acorex/components 21.0.2-next.47 → 21.0.2-next.48
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/fesm2022/acorex-components-popover.mjs +1 -1
- package/fesm2022/acorex-components-popover.mjs.map +1 -1
- package/fesm2022/acorex-components-rail-navigation.mjs +2 -2
- package/fesm2022/acorex-components-rail-navigation.mjs.map +1 -1
- package/fesm2022/acorex-components-scheduler.mjs +10 -10
- package/fesm2022/acorex-components-scheduler.mjs.map +1 -1
- package/fesm2022/acorex-components-tabs.mjs +2 -2
- package/fesm2022/acorex-components-tabs.mjs.map +1 -1
- package/fesm2022/acorex-components-toast.mjs +2 -2
- package/fesm2022/acorex-components-toast.mjs.map +1 -1
- package/package.json +3 -3
|
@@ -1383,7 +1383,7 @@ class AXSchedulerDayViewComponent extends NXComponent {
|
|
|
1383
1383
|
this.dragStartSlotId.set(dropListElement ? dropListElement.dataset['slotId'] : null);
|
|
1384
1384
|
}
|
|
1385
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))}@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{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 }); }
|
|
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 }); }
|
|
1387
1387
|
}
|
|
1388
1388
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXSchedulerDayViewComponent, decorators: [{
|
|
1389
1389
|
type: Component,
|
|
@@ -1399,7 +1399,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
1399
1399
|
AXDropZoneDirective,
|
|
1400
1400
|
AXDecoratorIconComponent,
|
|
1401
1401
|
AXDecoratorGenericComponent,
|
|
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))}@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{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"] }]
|
|
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"] }]
|
|
1403
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"] }] } });
|
|
1404
1404
|
|
|
1405
1405
|
class AXSchedulerMonthViewComponent extends NXComponent {
|
|
@@ -1823,7 +1823,7 @@ class AXSchedulerMonthViewComponent extends NXComponent {
|
|
|
1823
1823
|
return this.maxSpanningRowsPerWeek().get(weekRowIndex) ?? 0;
|
|
1824
1824
|
}
|
|
1825
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)))}@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,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 }); }
|
|
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 }); }
|
|
1827
1827
|
}
|
|
1828
1828
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXSchedulerMonthViewComponent, decorators: [{
|
|
1829
1829
|
type: Component,
|
|
@@ -1838,7 +1838,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
1838
1838
|
AXTooltipDirective,
|
|
1839
1839
|
AXDropZoneDirective,
|
|
1840
1840
|
AXDecoratorIconComponent,
|
|
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)))}@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,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"] }]
|
|
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"] }]
|
|
1842
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"] }] } });
|
|
1843
1843
|
|
|
1844
1844
|
class AXSchedulerTimelineDayViewComponent extends NXComponent {
|
|
@@ -2296,7 +2296,7 @@ class AXSchedulerTimelineDayViewComponent extends NXComponent {
|
|
|
2296
2296
|
this.dragStartSlotResourceId.set(dropListElement ? dropListElement.dataset['resourceId'] : null);
|
|
2297
2297
|
}
|
|
2298
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))}@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{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 }); }
|
|
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 }); }
|
|
2300
2300
|
}
|
|
2301
2301
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXSchedulerTimelineDayViewComponent, decorators: [{
|
|
2302
2302
|
type: Component,
|
|
@@ -2311,7 +2311,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
2311
2311
|
AXDropZoneDirective,
|
|
2312
2312
|
AXDecoratorIconComponent,
|
|
2313
2313
|
AXDecoratorGenericComponent,
|
|
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))}@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{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"] }]
|
|
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"] }]
|
|
2315
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"] }] } });
|
|
2316
2316
|
|
|
2317
2317
|
class AXSchedulerTimelineMonthViewComponent extends NXComponent {
|
|
@@ -2820,7 +2820,7 @@ class AXSchedulerTimelineMonthViewComponent extends NXComponent {
|
|
|
2820
2820
|
return now.isSame(dayDate, 'day');
|
|
2821
2821
|
}
|
|
2822
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)))}@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{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}@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));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 }); }
|
|
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 }); }
|
|
2824
2824
|
}
|
|
2825
2825
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXSchedulerTimelineMonthViewComponent, decorators: [{
|
|
2826
2826
|
type: Component,
|
|
@@ -2837,7 +2837,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
2837
2837
|
AXDropZoneDirective,
|
|
2838
2838
|
AXDecoratorIconComponent,
|
|
2839
2839
|
AXDecoratorGenericComponent,
|
|
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)))}@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{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}@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));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"] }]
|
|
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"] }]
|
|
2841
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"] }] } });
|
|
2842
2842
|
|
|
2843
2843
|
// prettier-ignore
|
|
@@ -3855,7 +3855,7 @@ class AXSchedulerTimelineYearViewComponent extends NXComponent {
|
|
|
3855
3855
|
this.dragStartSlotResourceId.set(dropListElement ? dropListElement.dataset['resourceId'] : null);
|
|
3856
3856
|
}
|
|
3857
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}@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: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}@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));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-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:var(--spacing,.25rem);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;overflow:hidden}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-popover-appointment .ax-scheduler-popover-appointment:last-child{margin-bottom: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{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 }); }
|
|
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-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:var(--spacing,.25rem);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;overflow:hidden}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-popover-appointment .ax-scheduler-popover-appointment:last-child{margin-bottom: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{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 }); }
|
|
3859
3859
|
}
|
|
3860
3860
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXSchedulerTimelineYearViewComponent, decorators: [{
|
|
3861
3861
|
type: Component,
|
|
@@ -3872,7 +3872,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
3872
3872
|
AXDropZoneDirective,
|
|
3873
3873
|
AXDecoratorIconComponent,
|
|
3874
3874
|
AXDecoratorGenericComponent,
|
|
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}@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: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}@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));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-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:var(--spacing,.25rem);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;overflow:hidden}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-popover-appointment .ax-scheduler-popover-appointment:last-child{margin-bottom: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{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"] }]
|
|
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-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:var(--spacing,.25rem);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;overflow:hidden}ax-scheduler-timeline-year-view .ax-scheduler-timeline-year-popover-appointment .ax-scheduler-popover-appointment:last-child{margin-bottom: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{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"] }]
|
|
3876
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"] }] } });
|
|
3877
3877
|
|
|
3878
3878
|
class AXSchedulerWeekViewComponent extends NXComponent {
|