@acorex/components 21.0.3-next.32 → 21.0.3-next.35
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-aspect-ratio.mjs +2 -2
- package/fesm2022/acorex-components-aspect-ratio.mjs.map +1 -1
- package/fesm2022/acorex-components-calendar.mjs +3 -2
- package/fesm2022/acorex-components-calendar.mjs.map +1 -1
- package/fesm2022/acorex-components-conversation2.mjs +16 -16
- package/fesm2022/acorex-components-conversation2.mjs.map +1 -1
- package/fesm2022/acorex-components-cron-job.mjs +12 -12
- package/fesm2022/acorex-components-cron-job.mjs.map +1 -1
- package/fesm2022/acorex-components-dialog.mjs +2 -2
- package/fesm2022/acorex-components-dialog.mjs.map +1 -1
- package/fesm2022/acorex-components-flow-chart.mjs +2 -2
- package/fesm2022/acorex-components-flow-chart.mjs.map +1 -1
- package/fesm2022/acorex-components-grid-layout-builder.mjs +2 -2
- package/fesm2022/acorex-components-grid-layout-builder.mjs.map +1 -1
- package/fesm2022/acorex-components-kbd.mjs +2 -2
- package/fesm2022/acorex-components-kbd.mjs.map +1 -1
- package/fesm2022/acorex-components-media-viewer.mjs +2 -2
- package/fesm2022/acorex-components-media-viewer.mjs.map +1 -1
- package/fesm2022/acorex-components-menu.mjs +2 -2
- package/fesm2022/acorex-components-menu.mjs.map +1 -1
- package/fesm2022/acorex-components-otp.mjs +2 -2
- package/fesm2022/acorex-components-otp.mjs.map +1 -1
- package/fesm2022/acorex-components-scheduler.mjs +4 -4
- package/fesm2022/acorex-components-scheduler.mjs.map +1 -1
- package/package.json +3 -7
- package/types/acorex-components-kbd.d.ts +2 -2
- package/conversation/README.md +0 -3
- package/fesm2022/acorex-components-conversation.mjs +0 -1403
- package/fesm2022/acorex-components-conversation.mjs.map +0 -1
- package/types/acorex-components-conversation.d.ts +0 -694
|
@@ -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(--ax-sys-spacing-base) * 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(--ax-sys-text-sm-base);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(--ax-sys-spacing-base) * 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(--ax-sys-spacing-base);padding-block:calc(var(--ax-sys-spacing-base) * .5);font-size:var(--ax-sys-text-xs-base);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(--ax-sys-spacing-base) * 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(--ax-sys-spacing-base)}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(--ax-sys-spacing-base) * .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(--ax-sys-spacing-base) * .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(--ax-sys-spacing-base);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(--ax-sys-spacing-base);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(--ax-sys-text-sm-base);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(--ax-sys-spacing-base) * .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(--ax-sys-spacing-base);padding-block:calc(var(--ax-sys-spacing-base) * .5);font-size:var(--ax-sys-text-xs-base);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(--ax-sys-spacing-base) * .5);cursor:pointer;padding-inline:0;padding-block:calc(var(--ax-sys-spacing-base) * .5);text-align:start;font-size:var(--ax-sys-text-xs-base);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.3 | 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(--ax-sys-spacing-base) * 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(--ax-sys-text-sm-base);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;inset:0}ax-scheduler-month-view .ax-scheduler-month-spanning-layer .ax-scheduler-month-spanning-week-row{padding-top:calc(var(--ax-sys-spacing-base) * 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(--ax-sys-spacing-base);padding-block:calc(var(--ax-sys-spacing-base) * .5);font-size:var(--ax-sys-text-xs-base);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(--ax-sys-spacing-base) * 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(--ax-sys-spacing-base)}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(--ax-sys-spacing-base) * .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(--ax-sys-spacing-base) * .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(--ax-sys-spacing-base);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(--ax-sys-spacing-base);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(--ax-sys-text-sm-base);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(--ax-sys-spacing-base) * .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(--ax-sys-spacing-base);padding-block:calc(var(--ax-sys-spacing-base) * .5);font-size:var(--ax-sys-text-xs-base);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(--ax-sys-spacing-base) * .5);cursor:pointer;padding-inline:0;padding-block:calc(var(--ax-sys-spacing-base) * .5);text-align:start;font-size:var(--ax-sys-text-xs-base);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.3 | 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(--ax-sys-spacing-base) * 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(--ax-sys-text-sm-base);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(--ax-sys-spacing-base) * 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(--ax-sys-spacing-base);padding-block:calc(var(--ax-sys-spacing-base) * .5);font-size:var(--ax-sys-text-xs-base);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(--ax-sys-spacing-base) * 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(--ax-sys-spacing-base)}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(--ax-sys-spacing-base) * .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(--ax-sys-spacing-base) * .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(--ax-sys-spacing-base);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(--ax-sys-spacing-base);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(--ax-sys-text-sm-base);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(--ax-sys-spacing-base) * .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(--ax-sys-spacing-base);padding-block:calc(var(--ax-sys-spacing-base) * .5);font-size:var(--ax-sys-text-xs-base);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(--ax-sys-spacing-base) * .5);cursor:pointer;padding-inline:0;padding-block:calc(var(--ax-sys-spacing-base) * .5);text-align:start;font-size:var(--ax-sys-text-xs-base);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.3 | 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(--ax-sys-spacing-base) * 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(--ax-sys-text-sm-base);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;inset:0}ax-scheduler-month-view .ax-scheduler-month-spanning-layer .ax-scheduler-month-spanning-week-row{padding-top:calc(var(--ax-sys-spacing-base) * 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(--ax-sys-spacing-base);padding-block:calc(var(--ax-sys-spacing-base) * .5);font-size:var(--ax-sys-text-xs-base);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(--ax-sys-spacing-base) * 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(--ax-sys-spacing-base)}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(--ax-sys-spacing-base) * .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(--ax-sys-spacing-base) * .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(--ax-sys-spacing-base);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(--ax-sys-spacing-base);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(--ax-sys-text-sm-base);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(--ax-sys-spacing-base) * .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(--ax-sys-spacing-base);padding-block:calc(var(--ax-sys-spacing-base) * .5);font-size:var(--ax-sys-text-xs-base);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(--ax-sys-spacing-base) * .5);cursor:pointer;padding-inline:0;padding-block:calc(var(--ax-sys-spacing-base) * .5);text-align:start;font-size:var(--ax-sys-text-xs-base);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.3 | 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 {
|
|
@@ -4520,7 +4520,7 @@ class AXSchedulerWeekViewComponent extends NXComponent {
|
|
|
4520
4520
|
return true;
|
|
4521
4521
|
}
|
|
4522
4522
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXSchedulerWeekViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
4523
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXSchedulerWeekViewComponent, isStandalone: true, selector: "ax-scheduler-week-view", inputs: { readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, hasActions: { classPropertyName: "hasActions", publicName: "hasActions", isSignal: true, isRequired: false, transformFunction: null }, dragStartDelay: { classPropertyName: "dragStartDelay", publicName: "dragStartDelay", isSignal: true, isRequired: false, transformFunction: null }, calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: true, transformFunction: null }, endDayHour: { classPropertyName: "endDayHour", publicName: "endDayHour", isSignal: true, isRequired: true, transformFunction: null }, startDayHour: { classPropertyName: "startDayHour", publicName: "startDayHour", isSignal: true, isRequired: true, transformFunction: null }, showCurrentTimeIndicator: { classPropertyName: "showCurrentTimeIndicator", publicName: "showCurrentTimeIndicator", isSignal: true, isRequired: false, transformFunction: null }, scrollToCurrentTimeIndicator: { classPropertyName: "scrollToCurrentTimeIndicator", publicName: "scrollToCurrentTimeIndicator", isSignal: true, isRequired: false, transformFunction: null }, appointments: { classPropertyName: "appointments", publicName: "appointments", isSignal: true, isRequired: false, transformFunction: null }, tooltipTemplate: { classPropertyName: "tooltipTemplate", publicName: "tooltipTemplate", isSignal: true, isRequired: false, transformFunction: null }, selectedAppointmentId: { classPropertyName: "selectedAppointmentId", publicName: "selectedAppointmentId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { slotClickedInternal: "slotClickedInternal", slotDblClickedInternal: "slotDblClickedInternal", slotRightClickedInternal: "slotRightClickedInternal", appointmentClickedInternal: "appointmentClickedInternal", appointmentDblClickedInternal: "appointmentDblClickedInternal", appointmentRightClickedInternal: "appointmentRightClickedInternal", onActionClickInternal: "onActionClickInternal", onAppointmentDropInternal: "onAppointmentDropInternal" }, host: { properties: { "class.ax-state-readonly": "readonly()" } }, providers: [{ provide: AXComponent, useExisting: AXSchedulerWeekViewComponent }], viewQueries: [{ propertyName: "currentTimeLineElement", first: true, predicate: ["currentTimeLine"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-scheduler-week-header\">\n <div class=\"ax-scheduler-week-header-days\">\n <div class=\"ax-scheduler-week-header-table\"></div>\n <div class=\"ax-scheduler-week-header-date\" aria-hidden=\"true\">\n @for (day of daysArray(); track day.date.date.getTime()) {\n <div\n [class.ax-state-today]=\"isToday(day.date)\"\n class=\"ax-scheduler-week-header-date-day {{\n day.holiday.state !== 'none' ? (day.holiday.holiday?.cssClass ?? 'ax-state-holiday') : ''\n }}\"\n [style.--ax-scheduler-holiday-color]=\"day.holiday.holiday?.color ?? null\"\n >\n <span\n class=\"ax-scheduler-week-header-date-day-char ax-scheduler-truncate\"\n [axTooltip]=\"(day.holiday?.holiday?.description ?? day.holiday?.holiday?.title ?? '') | translate | async\"\n >\n {{ day.date | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n @if (day.holiday.state === 'holiday' && day.holiday.holiday.title) {\n ( {{ day.holiday.holiday.title | translate | async }} )\n }\n </span>\n <span class=\"ax-scheduler-week-header-date-day-num\">\n {{ day.date | format: 'date' : { format: 'DD', calendar: calendar() } | async }}\n </span>\n </div>\n }\n </div>\n </div>\n <!-- All-day / Multi-day Spanning Appointments Header -->\n <div class=\"ax-scheduler-week-header-days ax-scheduler-week-allday-header\">\n <div class=\"ax-scheduler-week-header-table\">{{ '@acorex:dateTime.duration.all-day' | translate | async }}</div>\n <div class=\"ax-scheduler-week-allday-content\">\n <!-- Spanning Appointments Layer -->\n @if (spanningAppointments().length > 0) {\n <div class=\"ax-scheduler-week-spanning-layer\">\n @for (spanning of spanningAppointments(); track spanning.appointment.id) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"spanning.appointment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || spanning.appointment.readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, spanning.appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, spanning.appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, spanning.appointment)\"\n [title]=\"\n tooltipTemplate()\n ? ''\n : spanning.appointment.title +\n ' (' +\n (spanning.appointment.startDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ' - ' +\n (spanning.appointment.endDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ')'\n \"\n class=\"ax-scheduler-week-spanning-appointment\"\n [class.ax-spanning-start-clipped]=\"spanning.isStartClipped\"\n [class.ax-spanning-end-clipped]=\"spanning.isEndClipped\"\n [class.ax-state-active]=\"isActive(spanning.appointment.id)\"\n [class]=\"\n spanning.appointment.cssClass ??\n 'ax-scheduler-' + (spanning.appointment.priority ?? 'primary') + '-priority'\n \"\n [style.grid-column]=\"spanning.startDayIndex + 1 + ' / span ' + spanning.spanCount\"\n [style.--spanning-row-index]=\"spanning.rowIndex\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n [axTooltipContext]=\"spanning.appointment\"\n >\n <span class=\"ax-spanning-appointment-title\">\n <span class=\"ax-scheduler-truncate\">{{ spanning.appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, spanning.appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n ></ax-icon>\n }\n </span>\n </div>\n }\n </div>\n }\n <!-- Drop zones for each day -->\n <div class=\"ax-scheduler-week-allday-slots\">\n @for (slotData of allDayAppointmentsPerDay(); track slotData.day.date.getTime()) {\n <div\n axDropZone\n #zone2=\"axDropZone\"\n [class.ax-scheduler-slot-hovered]=\"zone2.isHovered()\"\n (onElementDrop)=\"handleAllDayDrop($event, slotData.day)\"\n class=\"ax-scheduler-all-day-slot\"\n (click)=\"handleAllDaySlotEvent($event, slotData.day)\"\n (dblclick)=\"handleAllDaySlotEvent($event, slotData.day)\"\n (contextmenu)=\"handleAllDaySlotEvent($event, slotData.day)\"\n >\n <!-- Single-day all-day appointments only -->\n @if (slotData.appointments.length > 0) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragData]=\"slotData.appointments[0]\"\n [dragDisabled]=\"!draggable() || slotData.appointments[0].readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, slotData.appointments[0])\"\n (dblclick)=\"handleAppointmentEvent($event, slotData.appointments[0])\"\n (contextmenu)=\"handleAppointmentEvent($event, slotData.appointments[0])\"\n [title]=\"tooltipTemplate() ? '' : slotData.appointments[0].title\"\n class=\"ax-scheduler-header-week-appointment\"\n [style.width]=\"slotData.appointments.length > 1 ? 'calc(100% - 2rem)' : '100%'\"\n [class.ax-state-active]=\"isActive(slotData.appointments[0].id)\"\n [class]=\"\n slotData.appointments[0].cssClass ??\n 'ax-scheduler-' + (slotData.appointments[0].priority ?? 'primary') + '-priority'\n \"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltipContext]=\"slotData.appointments[0]\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ slotData.appointments[0].title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, slotData.appointments[0])\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n ></ax-icon>\n }\n </ax-title>\n </div>\n }\n @if (slotData.appointments.length > 1) {\n <div\n #moreAppointments\n class=\"ax-scheduler-appointment-badge\"\n [style.width]=\"'1.5rem'\"\n [style.border]=\"'none'\"\n [class]=\"\n slotData.appointments[1].cssClass ??\n 'ax-scheduler-' + (slotData.appointments[1].priority ?? 'primary') + '-priority'\n \"\n >\n +{{ slotData.appointments.length - 1 }}\n </div>\n <ax-popover [target]=\"moreAppointments\">\n <div class=\"ax-scheduler-popover\" [class.ax-state-readonly]=\"readonly()\" axDropZone>\n @for (appointment of slotData.appointments; track appointment.id; let first = $first) {\n @if (!first) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"appointment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || appointment.readonly || readonly()\"\n (click)=\"handleAppointmentEvent($event, appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n [title]=\"tooltipTemplate() ? '' : appointment.title\"\n class=\"ax-scheduler-popover-appointment\"\n [class.ax-state-active]=\"isActive(appointment.id)\"\n [class]=\"\n appointment.cssClass ?? 'ax-scheduler-' + (appointment.priority ?? 'primary') + '-priority'\n \"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltipContext]=\"appointment\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n ></ax-icon>\n }\n </ax-title>\n </div>\n }\n }\n </div>\n </ax-popover>\n }\n </div>\n }\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"ax-scheduler-week-time-container\">\n <div class=\"ax-scheduler-week-time\" aria-hidden=\"true\">\n @for (time of hoursArray(); track time.date.getTime()) {\n <div>\n {{ time | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n </div>\n }\n </div>\n\n <div class=\"ax-scheduler-week-table-container\">\n <!-- Current Time Line Indicator -->\n @if (\n shouldShowCurrentTimeForToday() &&\n getCurrentTimePositionWithOffset() !== null &&\n getCurrentDayColumnPosition() !== null\n ) {\n <div\n #currentTimeLine\n class=\"ax-scheduler-current-time-line\"\n [style.inset-block-start]=\"getCurrentTimePositionWithOffset()\"\n [style.inset-inline-start]=\"getCurrentDayColumnPosition()\"\n [style.width]=\"getCurrentDayColumnWidth()\"\n ></div>\n }\n <div class=\"ax-scheduler-week-appointment-container\">\n @for (appt of visibleAppointmentsLayout(); track appt.appointment.id) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragData]=\"appt.appointment\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || appt.appointment.readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, appt.appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, appt.appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, appt.appointment)\"\n [title]=\"tooltipTemplate() ? '' : appt.appointment.title\"\n [style.width]=\"appt.layoutWidth\"\n [style.height]=\"appt.layoutHeight\"\n class=\"ax-scheduler-week-appointment\"\n [style.inset-block-start]=\"appt.layoutTop\"\n [style.inset-inline-start]=\"appt.layoutLeft\"\n [class.ax-state-active]=\"isActive(appt.appointment.id)\"\n [class]=\"\n appt.appointment.cssClass ?? 'ax-scheduler-' + (appt.appointment.priority ?? 'primary') + '-priority'\n \"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltipContext]=\"appt.appointment\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ appt.appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, appt.appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n ></ax-icon>\n }\n </ax-title>\n <ax-subtitle>\n {{\n appt.appointment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n -\n {{ appt.appointment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n </ax-subtitle>\n </div>\n }\n\n <!-- Overflow Badges with Popovers -->\n @for (badge of overflowBadgesWithData(); track badge.key) {\n <!-- Wrap badge and popover for targeting -->\n <div\n style=\"position: absolute\"\n class=\"ax-scheduler-badge-wrapper\"\n [style.inset-block-start]=\"badge.badgeTop\"\n [style.inset-inline-start]=\"badge.badgeLeft\"\n >\n <!-- The Badge itself -->\n <div\n #actionButton\n class=\"ax-scheduler-appointment-badge\"\n [class]=\"\n badge.hiddenAppointments[0].cssClass ??\n 'ax-scheduler-' + (badge.hiddenAppointments[0].priority ?? 'primary') + '-priority'\n \"\n >\n +{{ badge.count }}\n </div>\n <!-- The Popover -->\n <ax-popover [target]=\"actionButton\">\n <div class=\"ax-scheduler-popover\" axDropZone>\n @for (appointment of badge.hiddenAppointments; track appointment.id) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"appointment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || appointment.readonly || readonly()\"\n (click)=\"handleAppointmentEvent($event, appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n [title]=\"tooltipTemplate() ? '' : appointment.title\"\n class=\"ax-scheduler-popover-appointment\"\n [class.ax-state-active]=\"isActive(appointment.id)\"\n [class]=\"appointment.cssClass ?? 'ax-scheduler-' + (appointment.priority ?? 'primary') + '-priority'\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltipContext]=\"appointment\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n ></ax-icon>\n }\n </ax-title>\n <ax-subtitle>\n {{\n appointment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n -\n {{\n appointment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n </ax-subtitle>\n </div>\n }\n </div>\n </ax-popover>\n </div>\n }\n </div>\n\n <table aria-hidden=\"true\" [border]=\"1\">\n <tbody>\n @for (time of hoursArray(); track time.date.getTime()) {\n <tr>\n @for (day of daysArray(); track day.date.date.getTime()) {\n <td\n axDropZone\n #zone=\"axDropZone\"\n [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n (onElementDrop)=\"handleSingleDayDrop($event, time, day.date, 0)\"\n (click)=\"handleSingleSlotEvent($event, time, day.date, 0)\"\n (dblclick)=\"handleSingleSlotEvent($event, time, day.date, 0)\"\n (contextmenu)=\"handleSingleSlotEvent($event, time, day.date, 0)\"\n [attr.data-slot-id]=\"day.date.format('YYYYMMDD') + '-' + time.format('HHmm')\"\n ></td>\n }\n </tr>\n <tr>\n @for (day of daysArray(); track day.date.date.getTime()) {\n <td\n axDropZone\n #zone2=\"axDropZone\"\n [class.ax-scheduler-slot-hovered]=\"zone2.isHovered()\"\n (onElementDrop)=\"handleSingleDayDrop($event, time, day.date, 1)\"\n (click)=\"handleSingleSlotEvent($event, time, day.date, 1)\"\n (dblclick)=\"handleSingleSlotEvent($event, time, day.date, 1)\"\n (contextmenu)=\"handleSingleSlotEvent($event, time, day.date, 1)\"\n [attr.data-slot-id]=\"day.date.format('YYYYMMDD') + '-' + time.add('minute', 30).format('HHmm')\"\n ></td>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n</div>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-font-weight:initial;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-content:\"\"}}}@layer components{ax-scheduler-week-view{--ax-scheduler-week-spanning-row-height:1.5rem;--ax-scheduler-week-spanning-gap:.125rem;--ax-scheduler-week-spanning-row-gap:.25rem;min-width:var(--ax-comp-scheduler-width);background-color:inherit;display:block;position:relative}ax-scheduler-week-view .ax-scheduler-appointment-badge{width:calc(var(--ax-sys-spacing-base) * 6);height:calc(var(--ax-sys-spacing-base) * 6);cursor:pointer;font-size:var(--ax-sys-text-xs-base);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));border-radius:3.40282e38px;justify-content:center;align-items:center;display:flex}ax-scheduler-week-view .ax-scheduler-week-header{z-index:20;background-color:var(--ax-comp-scheduler-all-day-bg,inherit);width:100%;position:sticky;top:0}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;display:flex}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-table{z-index:10;width:var(--ax-comp-scheduler-basic-view-blocks-width);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;text-align:center;flex-shrink:0;position:sticky;inset-inline-start:calc(var(--ax-sys-spacing-base) * 0)}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date{width:calc(100% - var(--ax-comp-scheduler-basic-view-blocks-width));display:flex}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div{border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));text-align:center;width:100%}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day{justify-content:center;align-items:center;gap:var(--ax-sys-spacing-base);padding-inline:calc(var(--ax-sys-spacing-base) * 2);display:grid}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day.ax-state-today{background-color:rgba(var(--ax-sys-color-primary-surface))}@supports (color:color-mix(in lab,red,red)){ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day.ax-state-today{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 5%,transparent)}}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day.ax-state-today .ax-scheduler-week-header-date-day-char{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day.ax-state-today .ax-scheduler-week-header-date-day-num{--tw-font-weight:var(--font-weight-bold,700);font-weight:var(--font-weight-bold,700)}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day.ax-state-holiday{color:var(--ax-scheduler-holiday-color,rgba(var(--ax-sys-color-danger-surface)))}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day.ax-state-holiday.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day .ax-scheduler-week-header-date-day-char{--tw-font-weight:var(--font-weight-light,300);max-width:100%;font-weight:var(--font-weight-light,300)}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day .ax-scheduler-week-header-date-day-num{font-size:var(--ax-sys-text-xl-base);line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75 / 1.25)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div:last-child{border-inline-end-style:var(--tw-border-style);border-inline-end-width:0}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date .ax-scheduler-all-day-slot{gap:var(--ax-sys-spacing-base);width:14.2857%;display:flex}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date .ax-scheduler-all-day-slot .ax-scheduler-header-week-appointment{border-radius:calc(var(--ax-sys-border-radius) / 2);width:100%;padding-inline:calc(var(--ax-sys-spacing-base) * 2);text-align:start;display:block;overflow:hidden}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date .ax-scheduler-all-day-slot ax-popover{display:none}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content{width:calc(100% - var(--ax-comp-scheduler-basic-view-blocks-width));flex-direction:column;display:flex;position:relative}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-spanning-layer{padding-block:var(--ax-sys-spacing-base);align-content:flex-start;row-gap:var(--ax-scheduler-week-spanning-row-gap);grid-template-columns:repeat(7,1fr);display:grid;position:relative}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-spanning-layer:before{content:\"\";pointer-events:none;z-index:0;background:linear-gradient(to right,transparent calc(100% / 7 * 1 - .5px),rgba(var(--ax-sys-color-border-lightest-surface)) calc(100% / 7 * 1 - .5px),rgba(var(--ax-sys-color-border-lightest-surface)) calc(100% / 7 * 1 + .5px),transparent calc(100% / 7 * 1 + .5px),transparent calc(100% / 7 * 2 - .5px),rgba(var(--ax-sys-color-border-lightest-surface)) calc(100% / 7 * 2 - .5px),rgba(var(--ax-sys-color-border-lightest-surface)) calc(100% / 7 * 2 + .5px),transparent calc(100% / 7 * 2 + .5px),transparent calc(100% / 7 * 3 - .5px),rgba(var(--ax-sys-color-border-lightest-surface)) calc(100% / 7 * 3 - .5px),rgba(var(--ax-sys-color-border-lightest-surface)) calc(100% / 7 * 3 + .5px),transparent calc(100% / 7 * 3 + .5px),transparent calc(100% / 7 * 4 - .5px),rgba(var(--ax-sys-color-border-lightest-surface)) calc(100% / 7 * 4 - .5px),rgba(var(--ax-sys-color-border-lightest-surface)) calc(100% / 7 * 4 + .5px),transparent calc(100% / 7 * 4 + .5px),transparent calc(100% / 7 * 5 - .5px),rgba(var(--ax-sys-color-border-lightest-surface)) calc(100% / 7 * 5 - .5px),rgba(var(--ax-sys-color-border-lightest-surface)) calc(100% / 7 * 5 + .5px),transparent calc(100% / 7 * 5 + .5px),transparent calc(100% / 7 * 6 - .5px),rgba(var(--ax-sys-color-border-lightest-surface)) calc(100% / 7 * 6 - .5px),rgba(var(--ax-sys-color-border-lightest-surface)) calc(100% / 7 * 6 + .5px),transparent calc(100% / 7 * 6 + .5px));position:absolute;top:0;right:0;bottom:0;left:0}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-spanning-layer .ax-scheduler-week-spanning-appointment{z-index:1;cursor:pointer;text-overflow:ellipsis;border-radius:var(--radius-sm,.25rem);padding-inline:calc(var(--ax-sys-spacing-base) * 2);padding-block:calc(var(--ax-sys-spacing-base) * .5);font-size:var(--ax-sys-text-xs-base);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));white-space:nowrap;height:var(--ax-scheduler-week-spanning-row-height);align-items:center;margin-inline:.125rem;display:flex;overflow:hidden}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-spanning-layer .ax-scheduler-week-spanning-appointment .ax-spanning-appointment-title{justify-content:space-between;align-items:center;width:100%;display:flex}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-spanning-layer .ax-scheduler-week-spanning-appointment .ax-spanning-appointment-title .ax-scheduler-truncate{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-spanning-layer .ax-scheduler-week-spanning-appointment .ax-spanning-appointment-title .ax-scheduler-action-icon{cursor:pointer;width:auto;flex-shrink:0;margin-inline-start:var(--ax-sys-spacing-base)}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-spanning-layer .ax-scheduler-week-spanning-appointment.ax-spanning-start-clipped{border-start-start-radius:0;border-end-start-radius:0;margin-inline-start:0;padding-inline-start:1rem;position:relative}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-spanning-layer .ax-scheduler-week-spanning-appointment.ax-spanning-start-clipped:before{content:\"\\2190 \";--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);opacity:.7;top:50%;font-size:.65rem;position:absolute;inset-inline-start:.25rem}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-spanning-layer .ax-scheduler-week-spanning-appointment.ax-spanning-end-clipped{border-start-end-radius:0;border-end-end-radius:0;margin-inline-end:0;padding-inline-end:1rem;position:relative}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-spanning-layer .ax-scheduler-week-spanning-appointment.ax-spanning-end-clipped:after{content:\" \\2192\";--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);opacity:.7;top:50%;font-size:.65rem;position:absolute;inset-inline-end:.25rem}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-allday-slots{height:100%;display:flex}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-allday-slots .ax-scheduler-all-day-slot{gap:var(--ax-sys-spacing-base);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));width:14.2857%;padding-block:var(--ax-sys-spacing-base);display:flex}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-allday-slots .ax-scheduler-all-day-slot:last-child{border-inline-end-style:var(--tw-border-style);border-inline-end-width:0}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-allday-slots .ax-scheduler-all-day-slot .ax-scheduler-header-week-appointment{border-radius:calc(var(--ax-sys-border-radius) / 2);width:100%;padding-inline:calc(var(--ax-sys-spacing-base) * 2);text-align:start;display:block;overflow:hidden}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-allday-slots .ax-scheduler-all-day-slot ax-popover{display:none}ax-scheduler-week-view .ax-scheduler-week-time-container{background-color:inherit;width:100%;display:flex}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-time{z-index:15;background-color:var(--ax-comp-scheduler-all-day-bg,inherit);position:sticky;inset-inline-start:calc(var(--ax-sys-spacing-base) * 0)}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-time div{height:calc(var(--ax-comp-scheduler-basic-view-blocks-height) * 2);width:var(--ax-comp-scheduler-basic-view-blocks-width);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding-inline:calc(var(--ax-sys-spacing-base) * 2);text-align:center;display:block;position:relative}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container{width:100%;position:relative}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container .ax-scheduler-week-appointment-container{width:100%;position:absolute;top:0}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container .ax-scheduler-week-appointment-container .ax-scheduler-week-appointment{border-radius:calc(var(--ax-sys-border-radius) / 2);padding-inline:calc(var(--ax-sys-spacing-base) * 2);padding-block:var(--ax-sys-spacing-base);flex-direction:column;display:flex;position:absolute;inset-inline-start:calc(var(--ax-sys-spacing-base) * 0)}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table{width:100%}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table tr{height:var(--ax-comp-scheduler-basic-view-blocks-height);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));display:flex}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table tr:first-child{border-top-style:var(--tw-border-style);border-top-width:0}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table tr td{border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));text-align:center;width:100%}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table tr td:last-child{border-inline-end-style:var(--tw-border-style);border-inline-end-width:0}ax-scheduler-week-view:not(.ax-state-readonly) .ax-scheduler-week-appointment,ax-scheduler-week-view:not(.ax-state-readonly) .ax-scheduler-header-week-appointment{cursor:pointer}ax-scheduler-week-view:not(.ax-state-readonly) .ax-scheduler-all-day-slot,ax-scheduler-week-view:not(.ax-state-readonly) .ax-scheduler-week-table-container>table td{cursor:pointer;transition-property:background-color;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}:is(ax-scheduler-week-view:not(.ax-state-readonly) .ax-scheduler-all-day-slot,ax-scheduler-week-view:not(.ax-state-readonly) .ax-scheduler-week-table-container>table td):hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg,var(--ax-sys-color-primary-surface),.1))}ax-scheduler-week-view ax-title{justify-content:space-between;display:flex}ax-scheduler-week-view ax-title .ax-scheduler-action-icon{cursor:pointer;width:auto}ax-scheduler-week-view .ax-scheduler-current-time-line{height:calc(var(--ax-sys-spacing-base) * .5)}ax-scheduler-week-view .ax-scheduler-current-time-line:before{content:var(--tw-content);inset-inline-start:-6px;top:-5px}ax-scheduler.ax-rtl ax-scheduler-week-view .ax-scheduler-week-spanning-appointment.ax-spanning-start-clipped:before{content:\"\\2192 \"}ax-scheduler.ax-rtl ax-scheduler-week-view .ax-scheduler-week-spanning-appointment.ax-spanning-end-clipped:after{content:\" \\2190\"}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-translate-x{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-y{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-z{syntax:\"*\";inherits:false;initial-value:0}@property --tw-content{syntax:\"*\";inherits:false;initial-value:\"\"}\n/*! tailwindcss v4.3.3 | 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 }); }
|
|
4523
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXSchedulerWeekViewComponent, isStandalone: true, selector: "ax-scheduler-week-view", inputs: { readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, hasActions: { classPropertyName: "hasActions", publicName: "hasActions", isSignal: true, isRequired: false, transformFunction: null }, dragStartDelay: { classPropertyName: "dragStartDelay", publicName: "dragStartDelay", isSignal: true, isRequired: false, transformFunction: null }, calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: true, transformFunction: null }, endDayHour: { classPropertyName: "endDayHour", publicName: "endDayHour", isSignal: true, isRequired: true, transformFunction: null }, startDayHour: { classPropertyName: "startDayHour", publicName: "startDayHour", isSignal: true, isRequired: true, transformFunction: null }, showCurrentTimeIndicator: { classPropertyName: "showCurrentTimeIndicator", publicName: "showCurrentTimeIndicator", isSignal: true, isRequired: false, transformFunction: null }, scrollToCurrentTimeIndicator: { classPropertyName: "scrollToCurrentTimeIndicator", publicName: "scrollToCurrentTimeIndicator", isSignal: true, isRequired: false, transformFunction: null }, appointments: { classPropertyName: "appointments", publicName: "appointments", isSignal: true, isRequired: false, transformFunction: null }, tooltipTemplate: { classPropertyName: "tooltipTemplate", publicName: "tooltipTemplate", isSignal: true, isRequired: false, transformFunction: null }, selectedAppointmentId: { classPropertyName: "selectedAppointmentId", publicName: "selectedAppointmentId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { slotClickedInternal: "slotClickedInternal", slotDblClickedInternal: "slotDblClickedInternal", slotRightClickedInternal: "slotRightClickedInternal", appointmentClickedInternal: "appointmentClickedInternal", appointmentDblClickedInternal: "appointmentDblClickedInternal", appointmentRightClickedInternal: "appointmentRightClickedInternal", onActionClickInternal: "onActionClickInternal", onAppointmentDropInternal: "onAppointmentDropInternal" }, host: { properties: { "class.ax-state-readonly": "readonly()" } }, providers: [{ provide: AXComponent, useExisting: AXSchedulerWeekViewComponent }], viewQueries: [{ propertyName: "currentTimeLineElement", first: true, predicate: ["currentTimeLine"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-scheduler-week-header\">\n <div class=\"ax-scheduler-week-header-days\">\n <div class=\"ax-scheduler-week-header-table\"></div>\n <div class=\"ax-scheduler-week-header-date\" aria-hidden=\"true\">\n @for (day of daysArray(); track day.date.date.getTime()) {\n <div\n [class.ax-state-today]=\"isToday(day.date)\"\n class=\"ax-scheduler-week-header-date-day {{\n day.holiday.state !== 'none' ? (day.holiday.holiday?.cssClass ?? 'ax-state-holiday') : ''\n }}\"\n [style.--ax-scheduler-holiday-color]=\"day.holiday.holiday?.color ?? null\"\n >\n <span\n class=\"ax-scheduler-week-header-date-day-char ax-scheduler-truncate\"\n [axTooltip]=\"(day.holiday?.holiday?.description ?? day.holiday?.holiday?.title ?? '') | translate | async\"\n >\n {{ day.date | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n @if (day.holiday.state === 'holiday' && day.holiday.holiday.title) {\n ( {{ day.holiday.holiday.title | translate | async }} )\n }\n </span>\n <span class=\"ax-scheduler-week-header-date-day-num\">\n {{ day.date | format: 'date' : { format: 'DD', calendar: calendar() } | async }}\n </span>\n </div>\n }\n </div>\n </div>\n <!-- All-day / Multi-day Spanning Appointments Header -->\n <div class=\"ax-scheduler-week-header-days ax-scheduler-week-allday-header\">\n <div class=\"ax-scheduler-week-header-table\">{{ '@acorex:dateTime.duration.all-day' | translate | async }}</div>\n <div class=\"ax-scheduler-week-allday-content\">\n <!-- Spanning Appointments Layer -->\n @if (spanningAppointments().length > 0) {\n <div class=\"ax-scheduler-week-spanning-layer\">\n @for (spanning of spanningAppointments(); track spanning.appointment.id) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"spanning.appointment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || spanning.appointment.readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, spanning.appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, spanning.appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, spanning.appointment)\"\n [title]=\"\n tooltipTemplate()\n ? ''\n : spanning.appointment.title +\n ' (' +\n (spanning.appointment.startDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ' - ' +\n (spanning.appointment.endDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ')'\n \"\n class=\"ax-scheduler-week-spanning-appointment\"\n [class.ax-spanning-start-clipped]=\"spanning.isStartClipped\"\n [class.ax-spanning-end-clipped]=\"spanning.isEndClipped\"\n [class.ax-state-active]=\"isActive(spanning.appointment.id)\"\n [class]=\"\n spanning.appointment.cssClass ??\n 'ax-scheduler-' + (spanning.appointment.priority ?? 'primary') + '-priority'\n \"\n [style.grid-column]=\"spanning.startDayIndex + 1 + ' / span ' + spanning.spanCount\"\n [style.--spanning-row-index]=\"spanning.rowIndex\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n [axTooltipContext]=\"spanning.appointment\"\n >\n <span class=\"ax-spanning-appointment-title\">\n <span class=\"ax-scheduler-truncate\">{{ spanning.appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, spanning.appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n ></ax-icon>\n }\n </span>\n </div>\n }\n </div>\n }\n <!-- Drop zones for each day -->\n <div class=\"ax-scheduler-week-allday-slots\">\n @for (slotData of allDayAppointmentsPerDay(); track slotData.day.date.getTime()) {\n <div\n axDropZone\n #zone2=\"axDropZone\"\n [class.ax-scheduler-slot-hovered]=\"zone2.isHovered()\"\n (onElementDrop)=\"handleAllDayDrop($event, slotData.day)\"\n class=\"ax-scheduler-all-day-slot\"\n (click)=\"handleAllDaySlotEvent($event, slotData.day)\"\n (dblclick)=\"handleAllDaySlotEvent($event, slotData.day)\"\n (contextmenu)=\"handleAllDaySlotEvent($event, slotData.day)\"\n >\n <!-- Single-day all-day appointments only -->\n @if (slotData.appointments.length > 0) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragData]=\"slotData.appointments[0]\"\n [dragDisabled]=\"!draggable() || slotData.appointments[0].readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, slotData.appointments[0])\"\n (dblclick)=\"handleAppointmentEvent($event, slotData.appointments[0])\"\n (contextmenu)=\"handleAppointmentEvent($event, slotData.appointments[0])\"\n [title]=\"tooltipTemplate() ? '' : slotData.appointments[0].title\"\n class=\"ax-scheduler-header-week-appointment\"\n [style.width]=\"slotData.appointments.length > 1 ? 'calc(100% - 2rem)' : '100%'\"\n [class.ax-state-active]=\"isActive(slotData.appointments[0].id)\"\n [class]=\"\n slotData.appointments[0].cssClass ??\n 'ax-scheduler-' + (slotData.appointments[0].priority ?? 'primary') + '-priority'\n \"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltipContext]=\"slotData.appointments[0]\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ slotData.appointments[0].title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, slotData.appointments[0])\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n ></ax-icon>\n }\n </ax-title>\n </div>\n }\n @if (slotData.appointments.length > 1) {\n <div\n #moreAppointments\n class=\"ax-scheduler-appointment-badge\"\n [style.width]=\"'1.5rem'\"\n [style.border]=\"'none'\"\n [class]=\"\n slotData.appointments[1].cssClass ??\n 'ax-scheduler-' + (slotData.appointments[1].priority ?? 'primary') + '-priority'\n \"\n >\n +{{ slotData.appointments.length - 1 }}\n </div>\n <ax-popover [target]=\"moreAppointments\">\n <div class=\"ax-scheduler-popover\" [class.ax-state-readonly]=\"readonly()\" axDropZone>\n @for (appointment of slotData.appointments; track appointment.id; let first = $first) {\n @if (!first) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"appointment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || appointment.readonly || readonly()\"\n (click)=\"handleAppointmentEvent($event, appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n [title]=\"tooltipTemplate() ? '' : appointment.title\"\n class=\"ax-scheduler-popover-appointment\"\n [class.ax-state-active]=\"isActive(appointment.id)\"\n [class]=\"\n appointment.cssClass ?? 'ax-scheduler-' + (appointment.priority ?? 'primary') + '-priority'\n \"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltipContext]=\"appointment\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n ></ax-icon>\n }\n </ax-title>\n </div>\n }\n }\n </div>\n </ax-popover>\n }\n </div>\n }\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"ax-scheduler-week-time-container\">\n <div class=\"ax-scheduler-week-time\" aria-hidden=\"true\">\n @for (time of hoursArray(); track time.date.getTime()) {\n <div>\n {{ time | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n </div>\n }\n </div>\n\n <div class=\"ax-scheduler-week-table-container\">\n <!-- Current Time Line Indicator -->\n @if (\n shouldShowCurrentTimeForToday() &&\n getCurrentTimePositionWithOffset() !== null &&\n getCurrentDayColumnPosition() !== null\n ) {\n <div\n #currentTimeLine\n class=\"ax-scheduler-current-time-line\"\n [style.inset-block-start]=\"getCurrentTimePositionWithOffset()\"\n [style.inset-inline-start]=\"getCurrentDayColumnPosition()\"\n [style.width]=\"getCurrentDayColumnWidth()\"\n ></div>\n }\n <div class=\"ax-scheduler-week-appointment-container\">\n @for (appt of visibleAppointmentsLayout(); track appt.appointment.id) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragData]=\"appt.appointment\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || appt.appointment.readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, appt.appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, appt.appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, appt.appointment)\"\n [title]=\"tooltipTemplate() ? '' : appt.appointment.title\"\n [style.width]=\"appt.layoutWidth\"\n [style.height]=\"appt.layoutHeight\"\n class=\"ax-scheduler-week-appointment\"\n [style.inset-block-start]=\"appt.layoutTop\"\n [style.inset-inline-start]=\"appt.layoutLeft\"\n [class.ax-state-active]=\"isActive(appt.appointment.id)\"\n [class]=\"\n appt.appointment.cssClass ?? 'ax-scheduler-' + (appt.appointment.priority ?? 'primary') + '-priority'\n \"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltipContext]=\"appt.appointment\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ appt.appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, appt.appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n ></ax-icon>\n }\n </ax-title>\n <ax-subtitle>\n {{\n appt.appointment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n -\n {{ appt.appointment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n </ax-subtitle>\n </div>\n }\n\n <!-- Overflow Badges with Popovers -->\n @for (badge of overflowBadgesWithData(); track badge.key) {\n <!-- Wrap badge and popover for targeting -->\n <div\n style=\"position: absolute\"\n class=\"ax-scheduler-badge-wrapper\"\n [style.inset-block-start]=\"badge.badgeTop\"\n [style.inset-inline-start]=\"badge.badgeLeft\"\n >\n <!-- The Badge itself -->\n <div\n #actionButton\n class=\"ax-scheduler-appointment-badge\"\n [class]=\"\n badge.hiddenAppointments[0].cssClass ??\n 'ax-scheduler-' + (badge.hiddenAppointments[0].priority ?? 'primary') + '-priority'\n \"\n >\n +{{ badge.count }}\n </div>\n <!-- The Popover -->\n <ax-popover [target]=\"actionButton\">\n <div class=\"ax-scheduler-popover\" axDropZone>\n @for (appointment of badge.hiddenAppointments; track appointment.id) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"appointment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || appointment.readonly || readonly()\"\n (click)=\"handleAppointmentEvent($event, appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n [title]=\"tooltipTemplate() ? '' : appointment.title\"\n class=\"ax-scheduler-popover-appointment\"\n [class.ax-state-active]=\"isActive(appointment.id)\"\n [class]=\"appointment.cssClass ?? 'ax-scheduler-' + (appointment.priority ?? 'primary') + '-priority'\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltipContext]=\"appointment\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n ></ax-icon>\n }\n </ax-title>\n <ax-subtitle>\n {{\n appointment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n -\n {{\n appointment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n </ax-subtitle>\n </div>\n }\n </div>\n </ax-popover>\n </div>\n }\n </div>\n\n <table aria-hidden=\"true\" [border]=\"1\">\n <tbody>\n @for (time of hoursArray(); track time.date.getTime()) {\n <tr>\n @for (day of daysArray(); track day.date.date.getTime()) {\n <td\n axDropZone\n #zone=\"axDropZone\"\n [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n (onElementDrop)=\"handleSingleDayDrop($event, time, day.date, 0)\"\n (click)=\"handleSingleSlotEvent($event, time, day.date, 0)\"\n (dblclick)=\"handleSingleSlotEvent($event, time, day.date, 0)\"\n (contextmenu)=\"handleSingleSlotEvent($event, time, day.date, 0)\"\n [attr.data-slot-id]=\"day.date.format('YYYYMMDD') + '-' + time.format('HHmm')\"\n ></td>\n }\n </tr>\n <tr>\n @for (day of daysArray(); track day.date.date.getTime()) {\n <td\n axDropZone\n #zone2=\"axDropZone\"\n [class.ax-scheduler-slot-hovered]=\"zone2.isHovered()\"\n (onElementDrop)=\"handleSingleDayDrop($event, time, day.date, 1)\"\n (click)=\"handleSingleSlotEvent($event, time, day.date, 1)\"\n (dblclick)=\"handleSingleSlotEvent($event, time, day.date, 1)\"\n (contextmenu)=\"handleSingleSlotEvent($event, time, day.date, 1)\"\n [attr.data-slot-id]=\"day.date.format('YYYYMMDD') + '-' + time.add('minute', 30).format('HHmm')\"\n ></td>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n</div>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-font-weight:initial;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-content:\"\"}}}@layer components{ax-scheduler-week-view{--ax-scheduler-week-spanning-row-height:1.5rem;--ax-scheduler-week-spanning-gap:.125rem;--ax-scheduler-week-spanning-row-gap:.25rem;min-width:var(--ax-comp-scheduler-width);background-color:inherit;display:block;position:relative}ax-scheduler-week-view .ax-scheduler-appointment-badge{width:calc(var(--ax-sys-spacing-base) * 6);height:calc(var(--ax-sys-spacing-base) * 6);cursor:pointer;font-size:var(--ax-sys-text-xs-base);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));border-radius:3.40282e38px;justify-content:center;align-items:center;display:flex}ax-scheduler-week-view .ax-scheduler-week-header{z-index:20;background-color:var(--ax-comp-scheduler-all-day-bg,inherit);width:100%;position:sticky;top:0}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;display:flex}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-table{z-index:10;width:var(--ax-comp-scheduler-basic-view-blocks-width);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;text-align:center;flex-shrink:0;position:sticky;inset-inline-start:calc(var(--ax-sys-spacing-base) * 0)}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date{width:calc(100% - var(--ax-comp-scheduler-basic-view-blocks-width));display:flex}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div{border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));text-align:center;width:100%}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day{justify-content:center;align-items:center;gap:var(--ax-sys-spacing-base);padding-inline:calc(var(--ax-sys-spacing-base) * 2);display:grid}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day.ax-state-today{background-color:rgba(var(--ax-sys-color-primary-surface))}@supports (color:color-mix(in lab,red,red)){ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day.ax-state-today{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 5%,transparent)}}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day.ax-state-today .ax-scheduler-week-header-date-day-char{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day.ax-state-today .ax-scheduler-week-header-date-day-num{--tw-font-weight:var(--font-weight-bold,700);font-weight:var(--font-weight-bold,700)}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day.ax-state-holiday{color:var(--ax-scheduler-holiday-color,rgba(var(--ax-sys-color-danger-surface)))}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day.ax-state-holiday.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day .ax-scheduler-week-header-date-day-char{--tw-font-weight:var(--font-weight-light,300);max-width:100%;font-weight:var(--font-weight-light,300)}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day .ax-scheduler-week-header-date-day-num{font-size:var(--ax-sys-text-xl-base);line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75 / 1.25)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div:last-child{border-inline-end-style:var(--tw-border-style);border-inline-end-width:0}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date .ax-scheduler-all-day-slot{gap:var(--ax-sys-spacing-base);width:14.2857%;display:flex}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date .ax-scheduler-all-day-slot .ax-scheduler-header-week-appointment{border-radius:calc(var(--ax-sys-border-radius) / 2);width:100%;padding-inline:calc(var(--ax-sys-spacing-base) * 2);text-align:start;display:block;overflow:hidden}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date .ax-scheduler-all-day-slot ax-popover{display:none}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content{width:calc(100% - var(--ax-comp-scheduler-basic-view-blocks-width));flex-direction:column;display:flex;position:relative}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-spanning-layer{padding-block:var(--ax-sys-spacing-base);align-content:flex-start;row-gap:var(--ax-scheduler-week-spanning-row-gap);grid-template-columns:repeat(7,1fr);display:grid;position:relative}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-spanning-layer:before{content:\"\";pointer-events:none;z-index:0;background:linear-gradient(to right,transparent calc(100% / 7 * 1 - .5px),rgba(var(--ax-sys-color-border-lightest-surface)) calc(100% / 7 * 1 - .5px),rgba(var(--ax-sys-color-border-lightest-surface)) calc(100% / 7 * 1 + .5px),transparent calc(100% / 7 * 1 + .5px),transparent calc(100% / 7 * 2 - .5px),rgba(var(--ax-sys-color-border-lightest-surface)) calc(100% / 7 * 2 - .5px),rgba(var(--ax-sys-color-border-lightest-surface)) calc(100% / 7 * 2 + .5px),transparent calc(100% / 7 * 2 + .5px),transparent calc(100% / 7 * 3 - .5px),rgba(var(--ax-sys-color-border-lightest-surface)) calc(100% / 7 * 3 - .5px),rgba(var(--ax-sys-color-border-lightest-surface)) calc(100% / 7 * 3 + .5px),transparent calc(100% / 7 * 3 + .5px),transparent calc(100% / 7 * 4 - .5px),rgba(var(--ax-sys-color-border-lightest-surface)) calc(100% / 7 * 4 - .5px),rgba(var(--ax-sys-color-border-lightest-surface)) calc(100% / 7 * 4 + .5px),transparent calc(100% / 7 * 4 + .5px),transparent calc(100% / 7 * 5 - .5px),rgba(var(--ax-sys-color-border-lightest-surface)) calc(100% / 7 * 5 - .5px),rgba(var(--ax-sys-color-border-lightest-surface)) calc(100% / 7 * 5 + .5px),transparent calc(100% / 7 * 5 + .5px),transparent calc(100% / 7 * 6 - .5px),rgba(var(--ax-sys-color-border-lightest-surface)) calc(100% / 7 * 6 - .5px),rgba(var(--ax-sys-color-border-lightest-surface)) calc(100% / 7 * 6 + .5px),transparent calc(100% / 7 * 6 + .5px));position:absolute;inset:0}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-spanning-layer .ax-scheduler-week-spanning-appointment{z-index:1;cursor:pointer;text-overflow:ellipsis;border-radius:var(--radius-sm,.25rem);padding-inline:calc(var(--ax-sys-spacing-base) * 2);padding-block:calc(var(--ax-sys-spacing-base) * .5);font-size:var(--ax-sys-text-xs-base);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));white-space:nowrap;height:var(--ax-scheduler-week-spanning-row-height);align-items:center;margin-inline:.125rem;display:flex;overflow:hidden}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-spanning-layer .ax-scheduler-week-spanning-appointment .ax-spanning-appointment-title{justify-content:space-between;align-items:center;width:100%;display:flex}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-spanning-layer .ax-scheduler-week-spanning-appointment .ax-spanning-appointment-title .ax-scheduler-truncate{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-spanning-layer .ax-scheduler-week-spanning-appointment .ax-spanning-appointment-title .ax-scheduler-action-icon{cursor:pointer;width:auto;flex-shrink:0;margin-inline-start:var(--ax-sys-spacing-base)}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-spanning-layer .ax-scheduler-week-spanning-appointment.ax-spanning-start-clipped{border-start-start-radius:0;border-end-start-radius:0;margin-inline-start:0;padding-inline-start:1rem;position:relative}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-spanning-layer .ax-scheduler-week-spanning-appointment.ax-spanning-start-clipped:before{content:\"\\2190 \";--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);opacity:.7;top:50%;font-size:.65rem;position:absolute;inset-inline-start:.25rem}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-spanning-layer .ax-scheduler-week-spanning-appointment.ax-spanning-end-clipped{border-start-end-radius:0;border-end-end-radius:0;margin-inline-end:0;padding-inline-end:1rem;position:relative}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-spanning-layer .ax-scheduler-week-spanning-appointment.ax-spanning-end-clipped:after{content:\" \\2192\";--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);opacity:.7;top:50%;font-size:.65rem;position:absolute;inset-inline-end:.25rem}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-allday-slots{height:100%;display:flex}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-allday-slots .ax-scheduler-all-day-slot{gap:var(--ax-sys-spacing-base);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));width:14.2857%;padding-block:var(--ax-sys-spacing-base);display:flex}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-allday-slots .ax-scheduler-all-day-slot:last-child{border-inline-end-style:var(--tw-border-style);border-inline-end-width:0}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-allday-slots .ax-scheduler-all-day-slot .ax-scheduler-header-week-appointment{border-radius:calc(var(--ax-sys-border-radius) / 2);width:100%;padding-inline:calc(var(--ax-sys-spacing-base) * 2);text-align:start;display:block;overflow:hidden}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-allday-slots .ax-scheduler-all-day-slot ax-popover{display:none}ax-scheduler-week-view .ax-scheduler-week-time-container{background-color:inherit;width:100%;display:flex}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-time{z-index:15;background-color:var(--ax-comp-scheduler-all-day-bg,inherit);position:sticky;inset-inline-start:calc(var(--ax-sys-spacing-base) * 0)}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-time div{height:calc(var(--ax-comp-scheduler-basic-view-blocks-height) * 2);width:var(--ax-comp-scheduler-basic-view-blocks-width);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding-inline:calc(var(--ax-sys-spacing-base) * 2);text-align:center;display:block;position:relative}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container{width:100%;position:relative}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container .ax-scheduler-week-appointment-container{width:100%;position:absolute;top:0}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container .ax-scheduler-week-appointment-container .ax-scheduler-week-appointment{border-radius:calc(var(--ax-sys-border-radius) / 2);padding-inline:calc(var(--ax-sys-spacing-base) * 2);padding-block:var(--ax-sys-spacing-base);flex-direction:column;display:flex;position:absolute;inset-inline-start:calc(var(--ax-sys-spacing-base) * 0)}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table{width:100%}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table tr{height:var(--ax-comp-scheduler-basic-view-blocks-height);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));display:flex}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table tr:first-child{border-top-style:var(--tw-border-style);border-top-width:0}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table tr td{border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));text-align:center;width:100%}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table tr td:last-child{border-inline-end-style:var(--tw-border-style);border-inline-end-width:0}ax-scheduler-week-view:not(.ax-state-readonly) .ax-scheduler-week-appointment,ax-scheduler-week-view:not(.ax-state-readonly) .ax-scheduler-header-week-appointment{cursor:pointer}ax-scheduler-week-view:not(.ax-state-readonly) .ax-scheduler-all-day-slot,ax-scheduler-week-view:not(.ax-state-readonly) .ax-scheduler-week-table-container>table td{cursor:pointer;transition-property:background-color;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}:is(ax-scheduler-week-view:not(.ax-state-readonly) .ax-scheduler-all-day-slot,ax-scheduler-week-view:not(.ax-state-readonly) .ax-scheduler-week-table-container>table td):hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg,var(--ax-sys-color-primary-surface),.1))}ax-scheduler-week-view ax-title{justify-content:space-between;display:flex}ax-scheduler-week-view ax-title .ax-scheduler-action-icon{cursor:pointer;width:auto}ax-scheduler-week-view .ax-scheduler-current-time-line{height:calc(var(--ax-sys-spacing-base) * .5)}ax-scheduler-week-view .ax-scheduler-current-time-line:before{content:var(--tw-content);inset-inline-start:-6px;top:-5px}ax-scheduler.ax-rtl ax-scheduler-week-view .ax-scheduler-week-spanning-appointment.ax-spanning-start-clipped:before{content:\"\\2192 \"}ax-scheduler.ax-rtl ax-scheduler-week-view .ax-scheduler-week-spanning-appointment.ax-spanning-end-clipped:after{content:\" \\2190\"}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-translate-x{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-y{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-z{syntax:\"*\";inherits:false;initial-value:0}@property --tw-content{syntax:\"*\";inherits:false;initial-value:\"\"}\n/*! tailwindcss v4.3.3 | 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 }); }
|
|
4524
4524
|
}
|
|
4525
4525
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXSchedulerWeekViewComponent, decorators: [{
|
|
4526
4526
|
type: Component,
|
|
@@ -4536,7 +4536,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
4536
4536
|
AXDropZoneDirective,
|
|
4537
4537
|
AXDecoratorIconComponent,
|
|
4538
4538
|
AXDecoratorGenericComponent,
|
|
4539
|
-
], providers: [{ provide: AXComponent, useExisting: AXSchedulerWeekViewComponent }], template: "<div class=\"ax-scheduler-week-header\">\n <div class=\"ax-scheduler-week-header-days\">\n <div class=\"ax-scheduler-week-header-table\"></div>\n <div class=\"ax-scheduler-week-header-date\" aria-hidden=\"true\">\n @for (day of daysArray(); track day.date.date.getTime()) {\n <div\n [class.ax-state-today]=\"isToday(day.date)\"\n class=\"ax-scheduler-week-header-date-day {{\n day.holiday.state !== 'none' ? (day.holiday.holiday?.cssClass ?? 'ax-state-holiday') : ''\n }}\"\n [style.--ax-scheduler-holiday-color]=\"day.holiday.holiday?.color ?? null\"\n >\n <span\n class=\"ax-scheduler-week-header-date-day-char ax-scheduler-truncate\"\n [axTooltip]=\"(day.holiday?.holiday?.description ?? day.holiday?.holiday?.title ?? '') | translate | async\"\n >\n {{ day.date | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n @if (day.holiday.state === 'holiday' && day.holiday.holiday.title) {\n ( {{ day.holiday.holiday.title | translate | async }} )\n }\n </span>\n <span class=\"ax-scheduler-week-header-date-day-num\">\n {{ day.date | format: 'date' : { format: 'DD', calendar: calendar() } | async }}\n </span>\n </div>\n }\n </div>\n </div>\n <!-- All-day / Multi-day Spanning Appointments Header -->\n <div class=\"ax-scheduler-week-header-days ax-scheduler-week-allday-header\">\n <div class=\"ax-scheduler-week-header-table\">{{ '@acorex:dateTime.duration.all-day' | translate | async }}</div>\n <div class=\"ax-scheduler-week-allday-content\">\n <!-- Spanning Appointments Layer -->\n @if (spanningAppointments().length > 0) {\n <div class=\"ax-scheduler-week-spanning-layer\">\n @for (spanning of spanningAppointments(); track spanning.appointment.id) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"spanning.appointment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || spanning.appointment.readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, spanning.appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, spanning.appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, spanning.appointment)\"\n [title]=\"\n tooltipTemplate()\n ? ''\n : spanning.appointment.title +\n ' (' +\n (spanning.appointment.startDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ' - ' +\n (spanning.appointment.endDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ')'\n \"\n class=\"ax-scheduler-week-spanning-appointment\"\n [class.ax-spanning-start-clipped]=\"spanning.isStartClipped\"\n [class.ax-spanning-end-clipped]=\"spanning.isEndClipped\"\n [class.ax-state-active]=\"isActive(spanning.appointment.id)\"\n [class]=\"\n spanning.appointment.cssClass ??\n 'ax-scheduler-' + (spanning.appointment.priority ?? 'primary') + '-priority'\n \"\n [style.grid-column]=\"spanning.startDayIndex + 1 + ' / span ' + spanning.spanCount\"\n [style.--spanning-row-index]=\"spanning.rowIndex\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n [axTooltipContext]=\"spanning.appointment\"\n >\n <span class=\"ax-spanning-appointment-title\">\n <span class=\"ax-scheduler-truncate\">{{ spanning.appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, spanning.appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n ></ax-icon>\n }\n </span>\n </div>\n }\n </div>\n }\n <!-- Drop zones for each day -->\n <div class=\"ax-scheduler-week-allday-slots\">\n @for (slotData of allDayAppointmentsPerDay(); track slotData.day.date.getTime()) {\n <div\n axDropZone\n #zone2=\"axDropZone\"\n [class.ax-scheduler-slot-hovered]=\"zone2.isHovered()\"\n (onElementDrop)=\"handleAllDayDrop($event, slotData.day)\"\n class=\"ax-scheduler-all-day-slot\"\n (click)=\"handleAllDaySlotEvent($event, slotData.day)\"\n (dblclick)=\"handleAllDaySlotEvent($event, slotData.day)\"\n (contextmenu)=\"handleAllDaySlotEvent($event, slotData.day)\"\n >\n <!-- Single-day all-day appointments only -->\n @if (slotData.appointments.length > 0) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragData]=\"slotData.appointments[0]\"\n [dragDisabled]=\"!draggable() || slotData.appointments[0].readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, slotData.appointments[0])\"\n (dblclick)=\"handleAppointmentEvent($event, slotData.appointments[0])\"\n (contextmenu)=\"handleAppointmentEvent($event, slotData.appointments[0])\"\n [title]=\"tooltipTemplate() ? '' : slotData.appointments[0].title\"\n class=\"ax-scheduler-header-week-appointment\"\n [style.width]=\"slotData.appointments.length > 1 ? 'calc(100% - 2rem)' : '100%'\"\n [class.ax-state-active]=\"isActive(slotData.appointments[0].id)\"\n [class]=\"\n slotData.appointments[0].cssClass ??\n 'ax-scheduler-' + (slotData.appointments[0].priority ?? 'primary') + '-priority'\n \"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltipContext]=\"slotData.appointments[0]\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ slotData.appointments[0].title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, slotData.appointments[0])\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n ></ax-icon>\n }\n </ax-title>\n </div>\n }\n @if (slotData.appointments.length > 1) {\n <div\n #moreAppointments\n class=\"ax-scheduler-appointment-badge\"\n [style.width]=\"'1.5rem'\"\n [style.border]=\"'none'\"\n [class]=\"\n slotData.appointments[1].cssClass ??\n 'ax-scheduler-' + (slotData.appointments[1].priority ?? 'primary') + '-priority'\n \"\n >\n +{{ slotData.appointments.length - 1 }}\n </div>\n <ax-popover [target]=\"moreAppointments\">\n <div class=\"ax-scheduler-popover\" [class.ax-state-readonly]=\"readonly()\" axDropZone>\n @for (appointment of slotData.appointments; track appointment.id; let first = $first) {\n @if (!first) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"appointment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || appointment.readonly || readonly()\"\n (click)=\"handleAppointmentEvent($event, appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n [title]=\"tooltipTemplate() ? '' : appointment.title\"\n class=\"ax-scheduler-popover-appointment\"\n [class.ax-state-active]=\"isActive(appointment.id)\"\n [class]=\"\n appointment.cssClass ?? 'ax-scheduler-' + (appointment.priority ?? 'primary') + '-priority'\n \"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltipContext]=\"appointment\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n ></ax-icon>\n }\n </ax-title>\n </div>\n }\n }\n </div>\n </ax-popover>\n }\n </div>\n }\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"ax-scheduler-week-time-container\">\n <div class=\"ax-scheduler-week-time\" aria-hidden=\"true\">\n @for (time of hoursArray(); track time.date.getTime()) {\n <div>\n {{ time | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n </div>\n }\n </div>\n\n <div class=\"ax-scheduler-week-table-container\">\n <!-- Current Time Line Indicator -->\n @if (\n shouldShowCurrentTimeForToday() &&\n getCurrentTimePositionWithOffset() !== null &&\n getCurrentDayColumnPosition() !== null\n ) {\n <div\n #currentTimeLine\n class=\"ax-scheduler-current-time-line\"\n [style.inset-block-start]=\"getCurrentTimePositionWithOffset()\"\n [style.inset-inline-start]=\"getCurrentDayColumnPosition()\"\n [style.width]=\"getCurrentDayColumnWidth()\"\n ></div>\n }\n <div class=\"ax-scheduler-week-appointment-container\">\n @for (appt of visibleAppointmentsLayout(); track appt.appointment.id) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragData]=\"appt.appointment\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || appt.appointment.readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, appt.appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, appt.appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, appt.appointment)\"\n [title]=\"tooltipTemplate() ? '' : appt.appointment.title\"\n [style.width]=\"appt.layoutWidth\"\n [style.height]=\"appt.layoutHeight\"\n class=\"ax-scheduler-week-appointment\"\n [style.inset-block-start]=\"appt.layoutTop\"\n [style.inset-inline-start]=\"appt.layoutLeft\"\n [class.ax-state-active]=\"isActive(appt.appointment.id)\"\n [class]=\"\n appt.appointment.cssClass ?? 'ax-scheduler-' + (appt.appointment.priority ?? 'primary') + '-priority'\n \"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltipContext]=\"appt.appointment\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ appt.appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, appt.appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n ></ax-icon>\n }\n </ax-title>\n <ax-subtitle>\n {{\n appt.appointment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n -\n {{ appt.appointment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n </ax-subtitle>\n </div>\n }\n\n <!-- Overflow Badges with Popovers -->\n @for (badge of overflowBadgesWithData(); track badge.key) {\n <!-- Wrap badge and popover for targeting -->\n <div\n style=\"position: absolute\"\n class=\"ax-scheduler-badge-wrapper\"\n [style.inset-block-start]=\"badge.badgeTop\"\n [style.inset-inline-start]=\"badge.badgeLeft\"\n >\n <!-- The Badge itself -->\n <div\n #actionButton\n class=\"ax-scheduler-appointment-badge\"\n [class]=\"\n badge.hiddenAppointments[0].cssClass ??\n 'ax-scheduler-' + (badge.hiddenAppointments[0].priority ?? 'primary') + '-priority'\n \"\n >\n +{{ badge.count }}\n </div>\n <!-- The Popover -->\n <ax-popover [target]=\"actionButton\">\n <div class=\"ax-scheduler-popover\" axDropZone>\n @for (appointment of badge.hiddenAppointments; track appointment.id) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"appointment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || appointment.readonly || readonly()\"\n (click)=\"handleAppointmentEvent($event, appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n [title]=\"tooltipTemplate() ? '' : appointment.title\"\n class=\"ax-scheduler-popover-appointment\"\n [class.ax-state-active]=\"isActive(appointment.id)\"\n [class]=\"appointment.cssClass ?? 'ax-scheduler-' + (appointment.priority ?? 'primary') + '-priority'\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltipContext]=\"appointment\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n ></ax-icon>\n }\n </ax-title>\n <ax-subtitle>\n {{\n appointment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n -\n {{\n appointment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n </ax-subtitle>\n </div>\n }\n </div>\n </ax-popover>\n </div>\n }\n </div>\n\n <table aria-hidden=\"true\" [border]=\"1\">\n <tbody>\n @for (time of hoursArray(); track time.date.getTime()) {\n <tr>\n @for (day of daysArray(); track day.date.date.getTime()) {\n <td\n axDropZone\n #zone=\"axDropZone\"\n [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n (onElementDrop)=\"handleSingleDayDrop($event, time, day.date, 0)\"\n (click)=\"handleSingleSlotEvent($event, time, day.date, 0)\"\n (dblclick)=\"handleSingleSlotEvent($event, time, day.date, 0)\"\n (contextmenu)=\"handleSingleSlotEvent($event, time, day.date, 0)\"\n [attr.data-slot-id]=\"day.date.format('YYYYMMDD') + '-' + time.format('HHmm')\"\n ></td>\n }\n </tr>\n <tr>\n @for (day of daysArray(); track day.date.date.getTime()) {\n <td\n axDropZone\n #zone2=\"axDropZone\"\n [class.ax-scheduler-slot-hovered]=\"zone2.isHovered()\"\n (onElementDrop)=\"handleSingleDayDrop($event, time, day.date, 1)\"\n (click)=\"handleSingleSlotEvent($event, time, day.date, 1)\"\n (dblclick)=\"handleSingleSlotEvent($event, time, day.date, 1)\"\n (contextmenu)=\"handleSingleSlotEvent($event, time, day.date, 1)\"\n [attr.data-slot-id]=\"day.date.format('YYYYMMDD') + '-' + time.add('minute', 30).format('HHmm')\"\n ></td>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n</div>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-font-weight:initial;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-content:\"\"}}}@layer components{ax-scheduler-week-view{--ax-scheduler-week-spanning-row-height:1.5rem;--ax-scheduler-week-spanning-gap:.125rem;--ax-scheduler-week-spanning-row-gap:.25rem;min-width:var(--ax-comp-scheduler-width);background-color:inherit;display:block;position:relative}ax-scheduler-week-view .ax-scheduler-appointment-badge{width:calc(var(--ax-sys-spacing-base) * 6);height:calc(var(--ax-sys-spacing-base) * 6);cursor:pointer;font-size:var(--ax-sys-text-xs-base);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));border-radius:3.40282e38px;justify-content:center;align-items:center;display:flex}ax-scheduler-week-view .ax-scheduler-week-header{z-index:20;background-color:var(--ax-comp-scheduler-all-day-bg,inherit);width:100%;position:sticky;top:0}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;display:flex}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-table{z-index:10;width:var(--ax-comp-scheduler-basic-view-blocks-width);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;text-align:center;flex-shrink:0;position:sticky;inset-inline-start:calc(var(--ax-sys-spacing-base) * 0)}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date{width:calc(100% - var(--ax-comp-scheduler-basic-view-blocks-width));display:flex}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div{border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));text-align:center;width:100%}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day{justify-content:center;align-items:center;gap:var(--ax-sys-spacing-base);padding-inline:calc(var(--ax-sys-spacing-base) * 2);display:grid}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day.ax-state-today{background-color:rgba(var(--ax-sys-color-primary-surface))}@supports (color:color-mix(in lab,red,red)){ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day.ax-state-today{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 5%,transparent)}}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day.ax-state-today .ax-scheduler-week-header-date-day-char{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day.ax-state-today .ax-scheduler-week-header-date-day-num{--tw-font-weight:var(--font-weight-bold,700);font-weight:var(--font-weight-bold,700)}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day.ax-state-holiday{color:var(--ax-scheduler-holiday-color,rgba(var(--ax-sys-color-danger-surface)))}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day.ax-state-holiday.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day .ax-scheduler-week-header-date-day-char{--tw-font-weight:var(--font-weight-light,300);max-width:100%;font-weight:var(--font-weight-light,300)}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day .ax-scheduler-week-header-date-day-num{font-size:var(--ax-sys-text-xl-base);line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75 / 1.25)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div:last-child{border-inline-end-style:var(--tw-border-style);border-inline-end-width:0}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date .ax-scheduler-all-day-slot{gap:var(--ax-sys-spacing-base);width:14.2857%;display:flex}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date .ax-scheduler-all-day-slot .ax-scheduler-header-week-appointment{border-radius:calc(var(--ax-sys-border-radius) / 2);width:100%;padding-inline:calc(var(--ax-sys-spacing-base) * 2);text-align:start;display:block;overflow:hidden}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date .ax-scheduler-all-day-slot ax-popover{display:none}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content{width:calc(100% - var(--ax-comp-scheduler-basic-view-blocks-width));flex-direction:column;display:flex;position:relative}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-spanning-layer{padding-block:var(--ax-sys-spacing-base);align-content:flex-start;row-gap:var(--ax-scheduler-week-spanning-row-gap);grid-template-columns:repeat(7,1fr);display:grid;position:relative}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-spanning-layer:before{content:\"\";pointer-events:none;z-index:0;background:linear-gradient(to right,transparent calc(100% / 7 * 1 - .5px),rgba(var(--ax-sys-color-border-lightest-surface)) calc(100% / 7 * 1 - .5px),rgba(var(--ax-sys-color-border-lightest-surface)) calc(100% / 7 * 1 + .5px),transparent calc(100% / 7 * 1 + .5px),transparent calc(100% / 7 * 2 - .5px),rgba(var(--ax-sys-color-border-lightest-surface)) calc(100% / 7 * 2 - .5px),rgba(var(--ax-sys-color-border-lightest-surface)) calc(100% / 7 * 2 + .5px),transparent calc(100% / 7 * 2 + .5px),transparent calc(100% / 7 * 3 - .5px),rgba(var(--ax-sys-color-border-lightest-surface)) calc(100% / 7 * 3 - .5px),rgba(var(--ax-sys-color-border-lightest-surface)) calc(100% / 7 * 3 + .5px),transparent calc(100% / 7 * 3 + .5px),transparent calc(100% / 7 * 4 - .5px),rgba(var(--ax-sys-color-border-lightest-surface)) calc(100% / 7 * 4 - .5px),rgba(var(--ax-sys-color-border-lightest-surface)) calc(100% / 7 * 4 + .5px),transparent calc(100% / 7 * 4 + .5px),transparent calc(100% / 7 * 5 - .5px),rgba(var(--ax-sys-color-border-lightest-surface)) calc(100% / 7 * 5 - .5px),rgba(var(--ax-sys-color-border-lightest-surface)) calc(100% / 7 * 5 + .5px),transparent calc(100% / 7 * 5 + .5px),transparent calc(100% / 7 * 6 - .5px),rgba(var(--ax-sys-color-border-lightest-surface)) calc(100% / 7 * 6 - .5px),rgba(var(--ax-sys-color-border-lightest-surface)) calc(100% / 7 * 6 + .5px),transparent calc(100% / 7 * 6 + .5px));position:absolute;top:0;right:0;bottom:0;left:0}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-spanning-layer .ax-scheduler-week-spanning-appointment{z-index:1;cursor:pointer;text-overflow:ellipsis;border-radius:var(--radius-sm,.25rem);padding-inline:calc(var(--ax-sys-spacing-base) * 2);padding-block:calc(var(--ax-sys-spacing-base) * .5);font-size:var(--ax-sys-text-xs-base);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));white-space:nowrap;height:var(--ax-scheduler-week-spanning-row-height);align-items:center;margin-inline:.125rem;display:flex;overflow:hidden}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-spanning-layer .ax-scheduler-week-spanning-appointment .ax-spanning-appointment-title{justify-content:space-between;align-items:center;width:100%;display:flex}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-spanning-layer .ax-scheduler-week-spanning-appointment .ax-spanning-appointment-title .ax-scheduler-truncate{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-spanning-layer .ax-scheduler-week-spanning-appointment .ax-spanning-appointment-title .ax-scheduler-action-icon{cursor:pointer;width:auto;flex-shrink:0;margin-inline-start:var(--ax-sys-spacing-base)}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-spanning-layer .ax-scheduler-week-spanning-appointment.ax-spanning-start-clipped{border-start-start-radius:0;border-end-start-radius:0;margin-inline-start:0;padding-inline-start:1rem;position:relative}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-spanning-layer .ax-scheduler-week-spanning-appointment.ax-spanning-start-clipped:before{content:\"\\2190 \";--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);opacity:.7;top:50%;font-size:.65rem;position:absolute;inset-inline-start:.25rem}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-spanning-layer .ax-scheduler-week-spanning-appointment.ax-spanning-end-clipped{border-start-end-radius:0;border-end-end-radius:0;margin-inline-end:0;padding-inline-end:1rem;position:relative}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-spanning-layer .ax-scheduler-week-spanning-appointment.ax-spanning-end-clipped:after{content:\" \\2192\";--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);opacity:.7;top:50%;font-size:.65rem;position:absolute;inset-inline-end:.25rem}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-allday-slots{height:100%;display:flex}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-allday-slots .ax-scheduler-all-day-slot{gap:var(--ax-sys-spacing-base);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));width:14.2857%;padding-block:var(--ax-sys-spacing-base);display:flex}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-allday-slots .ax-scheduler-all-day-slot:last-child{border-inline-end-style:var(--tw-border-style);border-inline-end-width:0}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-allday-slots .ax-scheduler-all-day-slot .ax-scheduler-header-week-appointment{border-radius:calc(var(--ax-sys-border-radius) / 2);width:100%;padding-inline:calc(var(--ax-sys-spacing-base) * 2);text-align:start;display:block;overflow:hidden}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-allday-slots .ax-scheduler-all-day-slot ax-popover{display:none}ax-scheduler-week-view .ax-scheduler-week-time-container{background-color:inherit;width:100%;display:flex}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-time{z-index:15;background-color:var(--ax-comp-scheduler-all-day-bg,inherit);position:sticky;inset-inline-start:calc(var(--ax-sys-spacing-base) * 0)}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-time div{height:calc(var(--ax-comp-scheduler-basic-view-blocks-height) * 2);width:var(--ax-comp-scheduler-basic-view-blocks-width);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding-inline:calc(var(--ax-sys-spacing-base) * 2);text-align:center;display:block;position:relative}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container{width:100%;position:relative}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container .ax-scheduler-week-appointment-container{width:100%;position:absolute;top:0}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container .ax-scheduler-week-appointment-container .ax-scheduler-week-appointment{border-radius:calc(var(--ax-sys-border-radius) / 2);padding-inline:calc(var(--ax-sys-spacing-base) * 2);padding-block:var(--ax-sys-spacing-base);flex-direction:column;display:flex;position:absolute;inset-inline-start:calc(var(--ax-sys-spacing-base) * 0)}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table{width:100%}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table tr{height:var(--ax-comp-scheduler-basic-view-blocks-height);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));display:flex}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table tr:first-child{border-top-style:var(--tw-border-style);border-top-width:0}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table tr td{border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));text-align:center;width:100%}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table tr td:last-child{border-inline-end-style:var(--tw-border-style);border-inline-end-width:0}ax-scheduler-week-view:not(.ax-state-readonly) .ax-scheduler-week-appointment,ax-scheduler-week-view:not(.ax-state-readonly) .ax-scheduler-header-week-appointment{cursor:pointer}ax-scheduler-week-view:not(.ax-state-readonly) .ax-scheduler-all-day-slot,ax-scheduler-week-view:not(.ax-state-readonly) .ax-scheduler-week-table-container>table td{cursor:pointer;transition-property:background-color;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}:is(ax-scheduler-week-view:not(.ax-state-readonly) .ax-scheduler-all-day-slot,ax-scheduler-week-view:not(.ax-state-readonly) .ax-scheduler-week-table-container>table td):hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg,var(--ax-sys-color-primary-surface),.1))}ax-scheduler-week-view ax-title{justify-content:space-between;display:flex}ax-scheduler-week-view ax-title .ax-scheduler-action-icon{cursor:pointer;width:auto}ax-scheduler-week-view .ax-scheduler-current-time-line{height:calc(var(--ax-sys-spacing-base) * .5)}ax-scheduler-week-view .ax-scheduler-current-time-line:before{content:var(--tw-content);inset-inline-start:-6px;top:-5px}ax-scheduler.ax-rtl ax-scheduler-week-view .ax-scheduler-week-spanning-appointment.ax-spanning-start-clipped:before{content:\"\\2192 \"}ax-scheduler.ax-rtl ax-scheduler-week-view .ax-scheduler-week-spanning-appointment.ax-spanning-end-clipped:after{content:\" \\2190\"}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-translate-x{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-y{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-z{syntax:\"*\";inherits:false;initial-value:0}@property --tw-content{syntax:\"*\";inherits:false;initial-value:\"\"}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
|
|
4539
|
+
], providers: [{ provide: AXComponent, useExisting: AXSchedulerWeekViewComponent }], template: "<div class=\"ax-scheduler-week-header\">\n <div class=\"ax-scheduler-week-header-days\">\n <div class=\"ax-scheduler-week-header-table\"></div>\n <div class=\"ax-scheduler-week-header-date\" aria-hidden=\"true\">\n @for (day of daysArray(); track day.date.date.getTime()) {\n <div\n [class.ax-state-today]=\"isToday(day.date)\"\n class=\"ax-scheduler-week-header-date-day {{\n day.holiday.state !== 'none' ? (day.holiday.holiday?.cssClass ?? 'ax-state-holiday') : ''\n }}\"\n [style.--ax-scheduler-holiday-color]=\"day.holiday.holiday?.color ?? null\"\n >\n <span\n class=\"ax-scheduler-week-header-date-day-char ax-scheduler-truncate\"\n [axTooltip]=\"(day.holiday?.holiday?.description ?? day.holiday?.holiday?.title ?? '') | translate | async\"\n >\n {{ day.date | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n @if (day.holiday.state === 'holiday' && day.holiday.holiday.title) {\n ( {{ day.holiday.holiday.title | translate | async }} )\n }\n </span>\n <span class=\"ax-scheduler-week-header-date-day-num\">\n {{ day.date | format: 'date' : { format: 'DD', calendar: calendar() } | async }}\n </span>\n </div>\n }\n </div>\n </div>\n <!-- All-day / Multi-day Spanning Appointments Header -->\n <div class=\"ax-scheduler-week-header-days ax-scheduler-week-allday-header\">\n <div class=\"ax-scheduler-week-header-table\">{{ '@acorex:dateTime.duration.all-day' | translate | async }}</div>\n <div class=\"ax-scheduler-week-allday-content\">\n <!-- Spanning Appointments Layer -->\n @if (spanningAppointments().length > 0) {\n <div class=\"ax-scheduler-week-spanning-layer\">\n @for (spanning of spanningAppointments(); track spanning.appointment.id) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"spanning.appointment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || spanning.appointment.readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, spanning.appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, spanning.appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, spanning.appointment)\"\n [title]=\"\n tooltipTemplate()\n ? ''\n : spanning.appointment.title +\n ' (' +\n (spanning.appointment.startDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ' - ' +\n (spanning.appointment.endDate\n | format: 'date' : { format: 'MMM d', calendar: calendar() }\n | async) +\n ')'\n \"\n class=\"ax-scheduler-week-spanning-appointment\"\n [class.ax-spanning-start-clipped]=\"spanning.isStartClipped\"\n [class.ax-spanning-end-clipped]=\"spanning.isEndClipped\"\n [class.ax-state-active]=\"isActive(spanning.appointment.id)\"\n [class]=\"\n spanning.appointment.cssClass ??\n 'ax-scheduler-' + (spanning.appointment.priority ?? 'primary') + '-priority'\n \"\n [style.grid-column]=\"spanning.startDayIndex + 1 + ' / span ' + spanning.spanCount\"\n [style.--spanning-row-index]=\"spanning.rowIndex\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n [axTooltipContext]=\"spanning.appointment\"\n >\n <span class=\"ax-spanning-appointment-title\">\n <span class=\"ax-scheduler-truncate\">{{ spanning.appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, spanning.appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n ></ax-icon>\n }\n </span>\n </div>\n }\n </div>\n }\n <!-- Drop zones for each day -->\n <div class=\"ax-scheduler-week-allday-slots\">\n @for (slotData of allDayAppointmentsPerDay(); track slotData.day.date.getTime()) {\n <div\n axDropZone\n #zone2=\"axDropZone\"\n [class.ax-scheduler-slot-hovered]=\"zone2.isHovered()\"\n (onElementDrop)=\"handleAllDayDrop($event, slotData.day)\"\n class=\"ax-scheduler-all-day-slot\"\n (click)=\"handleAllDaySlotEvent($event, slotData.day)\"\n (dblclick)=\"handleAllDaySlotEvent($event, slotData.day)\"\n (contextmenu)=\"handleAllDaySlotEvent($event, slotData.day)\"\n >\n <!-- Single-day all-day appointments only -->\n @if (slotData.appointments.length > 0) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragData]=\"slotData.appointments[0]\"\n [dragDisabled]=\"!draggable() || slotData.appointments[0].readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, slotData.appointments[0])\"\n (dblclick)=\"handleAppointmentEvent($event, slotData.appointments[0])\"\n (contextmenu)=\"handleAppointmentEvent($event, slotData.appointments[0])\"\n [title]=\"tooltipTemplate() ? '' : slotData.appointments[0].title\"\n class=\"ax-scheduler-header-week-appointment\"\n [style.width]=\"slotData.appointments.length > 1 ? 'calc(100% - 2rem)' : '100%'\"\n [class.ax-state-active]=\"isActive(slotData.appointments[0].id)\"\n [class]=\"\n slotData.appointments[0].cssClass ??\n 'ax-scheduler-' + (slotData.appointments[0].priority ?? 'primary') + '-priority'\n \"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltipContext]=\"slotData.appointments[0]\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ slotData.appointments[0].title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, slotData.appointments[0])\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n ></ax-icon>\n }\n </ax-title>\n </div>\n }\n @if (slotData.appointments.length > 1) {\n <div\n #moreAppointments\n class=\"ax-scheduler-appointment-badge\"\n [style.width]=\"'1.5rem'\"\n [style.border]=\"'none'\"\n [class]=\"\n slotData.appointments[1].cssClass ??\n 'ax-scheduler-' + (slotData.appointments[1].priority ?? 'primary') + '-priority'\n \"\n >\n +{{ slotData.appointments.length - 1 }}\n </div>\n <ax-popover [target]=\"moreAppointments\">\n <div class=\"ax-scheduler-popover\" [class.ax-state-readonly]=\"readonly()\" axDropZone>\n @for (appointment of slotData.appointments; track appointment.id; let first = $first) {\n @if (!first) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"appointment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || appointment.readonly || readonly()\"\n (click)=\"handleAppointmentEvent($event, appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n [title]=\"tooltipTemplate() ? '' : appointment.title\"\n class=\"ax-scheduler-popover-appointment\"\n [class.ax-state-active]=\"isActive(appointment.id)\"\n [class]=\"\n appointment.cssClass ?? 'ax-scheduler-' + (appointment.priority ?? 'primary') + '-priority'\n \"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltipContext]=\"appointment\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n ></ax-icon>\n }\n </ax-title>\n </div>\n }\n }\n </div>\n </ax-popover>\n }\n </div>\n }\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"ax-scheduler-week-time-container\">\n <div class=\"ax-scheduler-week-time\" aria-hidden=\"true\">\n @for (time of hoursArray(); track time.date.getTime()) {\n <div>\n {{ time | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n </div>\n }\n </div>\n\n <div class=\"ax-scheduler-week-table-container\">\n <!-- Current Time Line Indicator -->\n @if (\n shouldShowCurrentTimeForToday() &&\n getCurrentTimePositionWithOffset() !== null &&\n getCurrentDayColumnPosition() !== null\n ) {\n <div\n #currentTimeLine\n class=\"ax-scheduler-current-time-line\"\n [style.inset-block-start]=\"getCurrentTimePositionWithOffset()\"\n [style.inset-inline-start]=\"getCurrentDayColumnPosition()\"\n [style.width]=\"getCurrentDayColumnWidth()\"\n ></div>\n }\n <div class=\"ax-scheduler-week-appointment-container\">\n @for (appt of visibleAppointmentsLayout(); track appt.appointment.id) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragData]=\"appt.appointment\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || appt.appointment.readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, appt.appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, appt.appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, appt.appointment)\"\n [title]=\"tooltipTemplate() ? '' : appt.appointment.title\"\n [style.width]=\"appt.layoutWidth\"\n [style.height]=\"appt.layoutHeight\"\n class=\"ax-scheduler-week-appointment\"\n [style.inset-block-start]=\"appt.layoutTop\"\n [style.inset-inline-start]=\"appt.layoutLeft\"\n [class.ax-state-active]=\"isActive(appt.appointment.id)\"\n [class]=\"\n appt.appointment.cssClass ?? 'ax-scheduler-' + (appt.appointment.priority ?? 'primary') + '-priority'\n \"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltipContext]=\"appt.appointment\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ appt.appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, appt.appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n ></ax-icon>\n }\n </ax-title>\n <ax-subtitle>\n {{\n appt.appointment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n -\n {{ appt.appointment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n </ax-subtitle>\n </div>\n }\n\n <!-- Overflow Badges with Popovers -->\n @for (badge of overflowBadgesWithData(); track badge.key) {\n <!-- Wrap badge and popover for targeting -->\n <div\n style=\"position: absolute\"\n class=\"ax-scheduler-badge-wrapper\"\n [style.inset-block-start]=\"badge.badgeTop\"\n [style.inset-inline-start]=\"badge.badgeLeft\"\n >\n <!-- The Badge itself -->\n <div\n #actionButton\n class=\"ax-scheduler-appointment-badge\"\n [class]=\"\n badge.hiddenAppointments[0].cssClass ??\n 'ax-scheduler-' + (badge.hiddenAppointments[0].priority ?? 'primary') + '-priority'\n \"\n >\n +{{ badge.count }}\n </div>\n <!-- The Popover -->\n <ax-popover [target]=\"actionButton\">\n <div class=\"ax-scheduler-popover\" axDropZone>\n @for (appointment of badge.hiddenAppointments; track appointment.id) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"appointment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || appointment.readonly || readonly()\"\n (click)=\"handleAppointmentEvent($event, appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n [title]=\"tooltipTemplate() ? '' : appointment.title\"\n class=\"ax-scheduler-popover-appointment\"\n [class.ax-state-active]=\"isActive(appointment.id)\"\n [class]=\"appointment.cssClass ?? 'ax-scheduler-' + (appointment.priority ?? 'primary') + '-priority'\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltipContext]=\"appointment\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n ></ax-icon>\n }\n </ax-title>\n <ax-subtitle>\n {{\n appointment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n -\n {{\n appointment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n </ax-subtitle>\n </div>\n }\n </div>\n </ax-popover>\n </div>\n }\n </div>\n\n <table aria-hidden=\"true\" [border]=\"1\">\n <tbody>\n @for (time of hoursArray(); track time.date.getTime()) {\n <tr>\n @for (day of daysArray(); track day.date.date.getTime()) {\n <td\n axDropZone\n #zone=\"axDropZone\"\n [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n (onElementDrop)=\"handleSingleDayDrop($event, time, day.date, 0)\"\n (click)=\"handleSingleSlotEvent($event, time, day.date, 0)\"\n (dblclick)=\"handleSingleSlotEvent($event, time, day.date, 0)\"\n (contextmenu)=\"handleSingleSlotEvent($event, time, day.date, 0)\"\n [attr.data-slot-id]=\"day.date.format('YYYYMMDD') + '-' + time.format('HHmm')\"\n ></td>\n }\n </tr>\n <tr>\n @for (day of daysArray(); track day.date.date.getTime()) {\n <td\n axDropZone\n #zone2=\"axDropZone\"\n [class.ax-scheduler-slot-hovered]=\"zone2.isHovered()\"\n (onElementDrop)=\"handleSingleDayDrop($event, time, day.date, 1)\"\n (click)=\"handleSingleSlotEvent($event, time, day.date, 1)\"\n (dblclick)=\"handleSingleSlotEvent($event, time, day.date, 1)\"\n (contextmenu)=\"handleSingleSlotEvent($event, time, day.date, 1)\"\n [attr.data-slot-id]=\"day.date.format('YYYYMMDD') + '-' + time.add('minute', 30).format('HHmm')\"\n ></td>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n</div>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-font-weight:initial;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-content:\"\"}}}@layer components{ax-scheduler-week-view{--ax-scheduler-week-spanning-row-height:1.5rem;--ax-scheduler-week-spanning-gap:.125rem;--ax-scheduler-week-spanning-row-gap:.25rem;min-width:var(--ax-comp-scheduler-width);background-color:inherit;display:block;position:relative}ax-scheduler-week-view .ax-scheduler-appointment-badge{width:calc(var(--ax-sys-spacing-base) * 6);height:calc(var(--ax-sys-spacing-base) * 6);cursor:pointer;font-size:var(--ax-sys-text-xs-base);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));border-radius:3.40282e38px;justify-content:center;align-items:center;display:flex}ax-scheduler-week-view .ax-scheduler-week-header{z-index:20;background-color:var(--ax-comp-scheduler-all-day-bg,inherit);width:100%;position:sticky;top:0}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;display:flex}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-table{z-index:10;width:var(--ax-comp-scheduler-basic-view-blocks-width);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:inherit;text-align:center;flex-shrink:0;position:sticky;inset-inline-start:calc(var(--ax-sys-spacing-base) * 0)}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date{width:calc(100% - var(--ax-comp-scheduler-basic-view-blocks-width));display:flex}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div{border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));text-align:center;width:100%}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day{justify-content:center;align-items:center;gap:var(--ax-sys-spacing-base);padding-inline:calc(var(--ax-sys-spacing-base) * 2);display:grid}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day.ax-state-today{background-color:rgba(var(--ax-sys-color-primary-surface))}@supports (color:color-mix(in lab,red,red)){ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day.ax-state-today{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 5%,transparent)}}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day.ax-state-today .ax-scheduler-week-header-date-day-char{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day.ax-state-today .ax-scheduler-week-header-date-day-num{--tw-font-weight:var(--font-weight-bold,700);font-weight:var(--font-weight-bold,700)}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day.ax-state-holiday{color:var(--ax-scheduler-holiday-color,rgba(var(--ax-sys-color-danger-surface)))}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day.ax-state-holiday.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day .ax-scheduler-week-header-date-day-char{--tw-font-weight:var(--font-weight-light,300);max-width:100%;font-weight:var(--font-weight-light,300)}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day .ax-scheduler-week-header-date-day-num{font-size:var(--ax-sys-text-xl-base);line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75 / 1.25)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div:last-child{border-inline-end-style:var(--tw-border-style);border-inline-end-width:0}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date .ax-scheduler-all-day-slot{gap:var(--ax-sys-spacing-base);width:14.2857%;display:flex}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date .ax-scheduler-all-day-slot .ax-scheduler-header-week-appointment{border-radius:calc(var(--ax-sys-border-radius) / 2);width:100%;padding-inline:calc(var(--ax-sys-spacing-base) * 2);text-align:start;display:block;overflow:hidden}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date .ax-scheduler-all-day-slot ax-popover{display:none}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content{width:calc(100% - var(--ax-comp-scheduler-basic-view-blocks-width));flex-direction:column;display:flex;position:relative}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-spanning-layer{padding-block:var(--ax-sys-spacing-base);align-content:flex-start;row-gap:var(--ax-scheduler-week-spanning-row-gap);grid-template-columns:repeat(7,1fr);display:grid;position:relative}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-spanning-layer:before{content:\"\";pointer-events:none;z-index:0;background:linear-gradient(to right,transparent calc(100% / 7 * 1 - .5px),rgba(var(--ax-sys-color-border-lightest-surface)) calc(100% / 7 * 1 - .5px),rgba(var(--ax-sys-color-border-lightest-surface)) calc(100% / 7 * 1 + .5px),transparent calc(100% / 7 * 1 + .5px),transparent calc(100% / 7 * 2 - .5px),rgba(var(--ax-sys-color-border-lightest-surface)) calc(100% / 7 * 2 - .5px),rgba(var(--ax-sys-color-border-lightest-surface)) calc(100% / 7 * 2 + .5px),transparent calc(100% / 7 * 2 + .5px),transparent calc(100% / 7 * 3 - .5px),rgba(var(--ax-sys-color-border-lightest-surface)) calc(100% / 7 * 3 - .5px),rgba(var(--ax-sys-color-border-lightest-surface)) calc(100% / 7 * 3 + .5px),transparent calc(100% / 7 * 3 + .5px),transparent calc(100% / 7 * 4 - .5px),rgba(var(--ax-sys-color-border-lightest-surface)) calc(100% / 7 * 4 - .5px),rgba(var(--ax-sys-color-border-lightest-surface)) calc(100% / 7 * 4 + .5px),transparent calc(100% / 7 * 4 + .5px),transparent calc(100% / 7 * 5 - .5px),rgba(var(--ax-sys-color-border-lightest-surface)) calc(100% / 7 * 5 - .5px),rgba(var(--ax-sys-color-border-lightest-surface)) calc(100% / 7 * 5 + .5px),transparent calc(100% / 7 * 5 + .5px),transparent calc(100% / 7 * 6 - .5px),rgba(var(--ax-sys-color-border-lightest-surface)) calc(100% / 7 * 6 - .5px),rgba(var(--ax-sys-color-border-lightest-surface)) calc(100% / 7 * 6 + .5px),transparent calc(100% / 7 * 6 + .5px));position:absolute;inset:0}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-spanning-layer .ax-scheduler-week-spanning-appointment{z-index:1;cursor:pointer;text-overflow:ellipsis;border-radius:var(--radius-sm,.25rem);padding-inline:calc(var(--ax-sys-spacing-base) * 2);padding-block:calc(var(--ax-sys-spacing-base) * .5);font-size:var(--ax-sys-text-xs-base);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));white-space:nowrap;height:var(--ax-scheduler-week-spanning-row-height);align-items:center;margin-inline:.125rem;display:flex;overflow:hidden}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-spanning-layer .ax-scheduler-week-spanning-appointment .ax-spanning-appointment-title{justify-content:space-between;align-items:center;width:100%;display:flex}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-spanning-layer .ax-scheduler-week-spanning-appointment .ax-spanning-appointment-title .ax-scheduler-truncate{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-spanning-layer .ax-scheduler-week-spanning-appointment .ax-spanning-appointment-title .ax-scheduler-action-icon{cursor:pointer;width:auto;flex-shrink:0;margin-inline-start:var(--ax-sys-spacing-base)}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-spanning-layer .ax-scheduler-week-spanning-appointment.ax-spanning-start-clipped{border-start-start-radius:0;border-end-start-radius:0;margin-inline-start:0;padding-inline-start:1rem;position:relative}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-spanning-layer .ax-scheduler-week-spanning-appointment.ax-spanning-start-clipped:before{content:\"\\2190 \";--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);opacity:.7;top:50%;font-size:.65rem;position:absolute;inset-inline-start:.25rem}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-spanning-layer .ax-scheduler-week-spanning-appointment.ax-spanning-end-clipped{border-start-end-radius:0;border-end-end-radius:0;margin-inline-end:0;padding-inline-end:1rem;position:relative}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-spanning-layer .ax-scheduler-week-spanning-appointment.ax-spanning-end-clipped:after{content:\" \\2192\";--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);opacity:.7;top:50%;font-size:.65rem;position:absolute;inset-inline-end:.25rem}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-allday-slots{height:100%;display:flex}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-allday-slots .ax-scheduler-all-day-slot{gap:var(--ax-sys-spacing-base);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));width:14.2857%;padding-block:var(--ax-sys-spacing-base);display:flex}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-allday-slots .ax-scheduler-all-day-slot:last-child{border-inline-end-style:var(--tw-border-style);border-inline-end-width:0}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-allday-slots .ax-scheduler-all-day-slot .ax-scheduler-header-week-appointment{border-radius:calc(var(--ax-sys-border-radius) / 2);width:100%;padding-inline:calc(var(--ax-sys-spacing-base) * 2);text-align:start;display:block;overflow:hidden}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days.ax-scheduler-week-allday-header .ax-scheduler-week-allday-content .ax-scheduler-week-allday-slots .ax-scheduler-all-day-slot ax-popover{display:none}ax-scheduler-week-view .ax-scheduler-week-time-container{background-color:inherit;width:100%;display:flex}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-time{z-index:15;background-color:var(--ax-comp-scheduler-all-day-bg,inherit);position:sticky;inset-inline-start:calc(var(--ax-sys-spacing-base) * 0)}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-time div{height:calc(var(--ax-comp-scheduler-basic-view-blocks-height) * 2);width:var(--ax-comp-scheduler-basic-view-blocks-width);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding-inline:calc(var(--ax-sys-spacing-base) * 2);text-align:center;display:block;position:relative}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container{width:100%;position:relative}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container .ax-scheduler-week-appointment-container{width:100%;position:absolute;top:0}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container .ax-scheduler-week-appointment-container .ax-scheduler-week-appointment{border-radius:calc(var(--ax-sys-border-radius) / 2);padding-inline:calc(var(--ax-sys-spacing-base) * 2);padding-block:var(--ax-sys-spacing-base);flex-direction:column;display:flex;position:absolute;inset-inline-start:calc(var(--ax-sys-spacing-base) * 0)}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table{width:100%}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table tr{height:var(--ax-comp-scheduler-basic-view-blocks-height);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));display:flex}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table tr:first-child{border-top-style:var(--tw-border-style);border-top-width:0}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table tr td{border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));text-align:center;width:100%}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table tr td:last-child{border-inline-end-style:var(--tw-border-style);border-inline-end-width:0}ax-scheduler-week-view:not(.ax-state-readonly) .ax-scheduler-week-appointment,ax-scheduler-week-view:not(.ax-state-readonly) .ax-scheduler-header-week-appointment{cursor:pointer}ax-scheduler-week-view:not(.ax-state-readonly) .ax-scheduler-all-day-slot,ax-scheduler-week-view:not(.ax-state-readonly) .ax-scheduler-week-table-container>table td{cursor:pointer;transition-property:background-color;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}:is(ax-scheduler-week-view:not(.ax-state-readonly) .ax-scheduler-all-day-slot,ax-scheduler-week-view:not(.ax-state-readonly) .ax-scheduler-week-table-container>table td):hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg,var(--ax-sys-color-primary-surface),.1))}ax-scheduler-week-view ax-title{justify-content:space-between;display:flex}ax-scheduler-week-view ax-title .ax-scheduler-action-icon{cursor:pointer;width:auto}ax-scheduler-week-view .ax-scheduler-current-time-line{height:calc(var(--ax-sys-spacing-base) * .5)}ax-scheduler-week-view .ax-scheduler-current-time-line:before{content:var(--tw-content);inset-inline-start:-6px;top:-5px}ax-scheduler.ax-rtl ax-scheduler-week-view .ax-scheduler-week-spanning-appointment.ax-spanning-start-clipped:before{content:\"\\2192 \"}ax-scheduler.ax-rtl ax-scheduler-week-view .ax-scheduler-week-spanning-appointment.ax-spanning-end-clipped:after{content:\" \\2190\"}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-translate-x{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-y{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-z{syntax:\"*\";inherits:false;initial-value:0}@property --tw-content{syntax:\"*\";inherits:false;initial-value:\"\"}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
|
|
4540
4540
|
}], propDecorators: { readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], hasActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasActions", required: false }] }], dragStartDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragStartDelay", required: false }] }], calendar: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendar", required: false }] }], date: [{ type: i0.Input, args: [{ isSignal: true, alias: "date", required: true }] }], endDayHour: [{ type: i0.Input, args: [{ isSignal: true, alias: "endDayHour", required: true }] }], startDayHour: [{ type: i0.Input, args: [{ isSignal: true, alias: "startDayHour", required: true }] }], showCurrentTimeIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCurrentTimeIndicator", required: false }] }], scrollToCurrentTimeIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollToCurrentTimeIndicator", required: false }] }], appointments: [{ type: i0.Input, args: [{ isSignal: true, alias: "appointments", required: false }] }], tooltipTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipTemplate", required: false }] }], selectedAppointmentId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedAppointmentId", required: false }] }], currentTimeLineElement: [{ type: i0.ViewChild, args: ['currentTimeLine', { isSignal: true }] }], slotClickedInternal: [{ type: i0.Output, args: ["slotClickedInternal"] }], slotDblClickedInternal: [{ type: i0.Output, args: ["slotDblClickedInternal"] }], slotRightClickedInternal: [{ type: i0.Output, args: ["slotRightClickedInternal"] }], appointmentClickedInternal: [{ type: i0.Output, args: ["appointmentClickedInternal"] }], appointmentDblClickedInternal: [{ type: i0.Output, args: ["appointmentDblClickedInternal"] }], appointmentRightClickedInternal: [{ type: i0.Output, args: ["appointmentRightClickedInternal"] }], onActionClickInternal: [{ type: i0.Output, args: ["onActionClickInternal"] }], onAppointmentDropInternal: [{ type: i0.Output, args: ["onAppointmentDropInternal"] }] } });
|
|
4541
4541
|
|
|
4542
4542
|
class AXSchedulerComponent extends NXComponent {
|