@acorex/components 20.2.0-next.1 → 20.2.0-next.10

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.
Files changed (151) hide show
  1. package/action-sheet/index.d.ts +56 -0
  2. package/alert/index.d.ts +1 -1
  3. package/autocomplete/index.d.ts +1 -0
  4. package/avatar/index.d.ts +11 -4
  5. package/breadcrumbs/index.d.ts +15 -1
  6. package/calendar/index.d.ts +23 -9
  7. package/check-box/index.d.ts +1 -1
  8. package/circular-progress/index.d.ts +23 -18
  9. package/collapse/index.d.ts +6 -3
  10. package/color-box/index.d.ts +1 -0
  11. package/color-palette/index.d.ts +1 -1
  12. package/comment/index.d.ts +3 -3
  13. package/conversation/index.d.ts +1 -0
  14. package/cron-job/index.d.ts +5 -4
  15. package/data-pager/index.d.ts +10 -5
  16. package/datetime-box/index.d.ts +2 -0
  17. package/datetime-input/index.d.ts +1 -0
  18. package/datetime-picker/index.d.ts +8 -0
  19. package/dropdown/index.d.ts +41 -0
  20. package/fesm2022/acorex-components-action-sheet.mjs +56 -0
  21. package/fesm2022/acorex-components-action-sheet.mjs.map +1 -1
  22. package/fesm2022/acorex-components-alert.mjs +1 -1
  23. package/fesm2022/acorex-components-alert.mjs.map +1 -1
  24. package/fesm2022/acorex-components-autocomplete.mjs +9 -3
  25. package/fesm2022/acorex-components-autocomplete.mjs.map +1 -1
  26. package/fesm2022/acorex-components-avatar.mjs +11 -4
  27. package/fesm2022/acorex-components-avatar.mjs.map +1 -1
  28. package/fesm2022/acorex-components-breadcrumbs.mjs +15 -1
  29. package/fesm2022/acorex-components-breadcrumbs.mjs.map +1 -1
  30. package/fesm2022/acorex-components-calendar.mjs +89 -30
  31. package/fesm2022/acorex-components-calendar.mjs.map +1 -1
  32. package/fesm2022/acorex-components-check-box.mjs +2 -2
  33. package/fesm2022/acorex-components-check-box.mjs.map +1 -1
  34. package/fesm2022/acorex-components-circular-progress.mjs +23 -18
  35. package/fesm2022/acorex-components-circular-progress.mjs.map +1 -1
  36. package/fesm2022/acorex-components-collapse.mjs +6 -3
  37. package/fesm2022/acorex-components-collapse.mjs.map +1 -1
  38. package/fesm2022/acorex-components-color-box.mjs +9 -3
  39. package/fesm2022/acorex-components-color-box.mjs.map +1 -1
  40. package/fesm2022/acorex-components-color-palette.mjs +3 -3
  41. package/fesm2022/acorex-components-color-palette.mjs.map +1 -1
  42. package/fesm2022/acorex-components-comment.mjs +5 -5
  43. package/fesm2022/acorex-components-comment.mjs.map +1 -1
  44. package/fesm2022/acorex-components-conversation.mjs +10 -4
  45. package/fesm2022/acorex-components-conversation.mjs.map +1 -1
  46. package/fesm2022/acorex-components-cron-job.mjs +15 -9
  47. package/fesm2022/acorex-components-cron-job.mjs.map +1 -1
  48. package/fesm2022/acorex-components-data-pager.mjs +10 -5
  49. package/fesm2022/acorex-components-data-pager.mjs.map +1 -1
  50. package/fesm2022/acorex-components-data-table.mjs +3 -3
  51. package/fesm2022/acorex-components-data-table.mjs.map +1 -1
  52. package/fesm2022/acorex-components-datetime-box.mjs +23 -4
  53. package/fesm2022/acorex-components-datetime-box.mjs.map +1 -1
  54. package/fesm2022/acorex-components-datetime-input.mjs +8 -2
  55. package/fesm2022/acorex-components-datetime-input.mjs.map +1 -1
  56. package/fesm2022/acorex-components-datetime-picker.mjs +82 -8
  57. package/fesm2022/acorex-components-datetime-picker.mjs.map +1 -1
  58. package/fesm2022/acorex-components-dropdown.mjs +44 -0
  59. package/fesm2022/acorex-components-dropdown.mjs.map +1 -1
  60. package/fesm2022/acorex-components-image-editor.mjs +12 -6
  61. package/fesm2022/acorex-components-image-editor.mjs.map +1 -1
  62. package/fesm2022/acorex-components-json-viewer.mjs +2 -2
  63. package/fesm2022/acorex-components-json-viewer.mjs.map +1 -1
  64. package/fesm2022/acorex-components-kanban.mjs +9 -5
  65. package/fesm2022/acorex-components-kanban.mjs.map +1 -1
  66. package/fesm2022/acorex-components-kbd.mjs +6 -0
  67. package/fesm2022/acorex-components-kbd.mjs.map +1 -1
  68. package/fesm2022/acorex-components-list.mjs +24 -8
  69. package/fesm2022/acorex-components-list.mjs.map +1 -1
  70. package/fesm2022/acorex-components-loading-dialog.mjs +29 -11
  71. package/fesm2022/acorex-components-loading-dialog.mjs.map +1 -1
  72. package/fesm2022/acorex-components-loading.mjs +58 -0
  73. package/fesm2022/acorex-components-loading.mjs.map +1 -1
  74. package/fesm2022/acorex-components-map.mjs +64 -16
  75. package/fesm2022/acorex-components-map.mjs.map +1 -1
  76. package/fesm2022/acorex-components-number-box-2.mjs +11 -5
  77. package/fesm2022/acorex-components-number-box-2.mjs.map +1 -1
  78. package/fesm2022/acorex-components-number-box.mjs +10 -4
  79. package/fesm2022/acorex-components-number-box.mjs.map +1 -1
  80. package/fesm2022/acorex-components-paint.mjs +8 -2
  81. package/fesm2022/acorex-components-paint.mjs.map +1 -1
  82. package/fesm2022/acorex-components-password-box.mjs +10 -4
  83. package/fesm2022/acorex-components-password-box.mjs.map +1 -1
  84. package/fesm2022/acorex-components-phone-box.mjs +9 -3
  85. package/fesm2022/acorex-components-phone-box.mjs.map +1 -1
  86. package/fesm2022/acorex-components-picker.mjs +14 -4
  87. package/fesm2022/acorex-components-picker.mjs.map +1 -1
  88. package/fesm2022/acorex-components-popover.mjs +31 -7
  89. package/fesm2022/acorex-components-popover.mjs.map +1 -1
  90. package/fesm2022/acorex-components-popup.mjs +2 -2
  91. package/fesm2022/acorex-components-popup.mjs.map +1 -1
  92. package/fesm2022/acorex-components-query-builder.mjs +1 -1
  93. package/fesm2022/acorex-components-query-builder.mjs.map +1 -1
  94. package/fesm2022/acorex-components-radio.mjs +2 -2
  95. package/fesm2022/acorex-components-radio.mjs.map +1 -1
  96. package/fesm2022/acorex-components-rate-picker.mjs.map +1 -1
  97. package/fesm2022/acorex-components-rest-api-generator.mjs +1 -1
  98. package/fesm2022/acorex-components-rest-api-generator.mjs.map +1 -1
  99. package/fesm2022/acorex-components-rrule.mjs +1 -1
  100. package/fesm2022/acorex-components-rrule.mjs.map +1 -1
  101. package/fesm2022/acorex-components-scheduler.mjs +48 -22
  102. package/fesm2022/acorex-components-scheduler.mjs.map +1 -1
  103. package/fesm2022/acorex-components-search-box.mjs +7 -1
  104. package/fesm2022/acorex-components-search-box.mjs.map +1 -1
  105. package/fesm2022/acorex-components-select-box.mjs +60 -22
  106. package/fesm2022/acorex-components-select-box.mjs.map +1 -1
  107. package/fesm2022/acorex-components-side-menu.mjs +1 -1
  108. package/fesm2022/acorex-components-side-menu.mjs.map +1 -1
  109. package/fesm2022/acorex-components-tabs.mjs +7 -5
  110. package/fesm2022/acorex-components-tabs.mjs.map +1 -1
  111. package/fesm2022/acorex-components-tag-box.mjs +11 -5
  112. package/fesm2022/acorex-components-tag-box.mjs.map +1 -1
  113. package/fesm2022/acorex-components-text-area.mjs +10 -4
  114. package/fesm2022/acorex-components-text-area.mjs.map +1 -1
  115. package/fesm2022/acorex-components-text-box.mjs +10 -4
  116. package/fesm2022/acorex-components-text-box.mjs.map +1 -1
  117. package/fesm2022/acorex-components-time-duration.mjs +35 -59
  118. package/fesm2022/acorex-components-time-duration.mjs.map +1 -1
  119. package/fesm2022/acorex-components-tooltip.mjs +3 -3
  120. package/fesm2022/acorex-components-tooltip.mjs.map +1 -1
  121. package/fesm2022/acorex-components-tree-view.mjs +2 -2
  122. package/fesm2022/acorex-components-tree-view.mjs.map +1 -1
  123. package/fesm2022/acorex-components-wysiwyg.mjs +11 -5
  124. package/fesm2022/acorex-components-wysiwyg.mjs.map +1 -1
  125. package/image-editor/index.d.ts +1 -0
  126. package/json-viewer/index.d.ts +3 -3
  127. package/kanban/index.d.ts +7 -3
  128. package/kbd/index.d.ts +6 -0
  129. package/list/index.d.ts +15 -2
  130. package/loading/index.d.ts +58 -1
  131. package/loading-dialog/index.d.ts +29 -11
  132. package/map/index.d.ts +27 -6
  133. package/number-box/index.d.ts +1 -0
  134. package/number-box-2/index.d.ts +1 -0
  135. package/package.json +9 -6
  136. package/paint/index.d.ts +1 -0
  137. package/password-box/index.d.ts +1 -0
  138. package/phone-box/index.d.ts +1 -0
  139. package/picker/index.d.ts +10 -8
  140. package/popover/index.d.ts +11 -3
  141. package/radio/index.d.ts +1 -1
  142. package/rate-picker/index.d.ts +1 -1
  143. package/scheduler/index.d.ts +5 -1
  144. package/search-box/index.d.ts +1 -0
  145. package/select-box/index.d.ts +23 -8
  146. package/tag-box/index.d.ts +1 -0
  147. package/text-area/index.d.ts +1 -0
  148. package/text-box/index.d.ts +1 -0
  149. package/time-duration/index.d.ts +3 -1
  150. package/tooltip/index.d.ts +2 -2
  151. package/wysiwyg/index.d.ts +1 -0
@@ -11,7 +11,7 @@ import { AXTranslatorPipe, AXTranslationService } from '@acorex/core/translation
11
11
  import { AXUnsubscriber, AXHtmlUtil } from '@acorex/core/utils';
12
12
  import { NgClass, AsyncPipe, isPlatformBrowser } from '@angular/common';
13
13
  import * as i0 from '@angular/core';
14
- import { inject, Injectable, DOCUMENT, input, signal, computed, output, HostBinding, ViewEncapsulation, ChangeDetectionStrategy, Component, PLATFORM_ID, viewChild, linkedSignal, model, effect, untracked, NgModule } from '@angular/core';
14
+ import { inject, signal, Injectable, DOCUMENT, input, computed, output, HostBinding, ViewEncapsulation, ChangeDetectionStrategy, Component, PLATFORM_ID, viewChild, linkedSignal, model, effect, untracked, NgModule } from '@angular/core';
15
15
  import * as i1 from '@angular/forms';
16
16
  import { FormsModule } from '@angular/forms';
17
17
  import { AXDragDirective, AXDropZoneDirective } from '@acorex/cdk/drag-drop';
@@ -27,6 +27,7 @@ class AXSchedulerService {
27
27
  this.BLOCK_DURATION_MINUTES = 30;
28
28
  this.MILLISECONDS_PER_MINUTE = 60 * 1000;
29
29
  this.MILLISECONDS_PER_DAY = this.HOURS_PER_DAY * this.MINUTES_PER_HOUR * this.MILLISECONDS_PER_MINUTE;
30
+ this.internalHoliday = signal([], ...(ngDevMode ? [{ debugName: "internalHoliday" }] : []));
30
31
  }
31
32
  /**
32
33
  * Checks if two appointments overlap in time.
@@ -504,7 +505,9 @@ class AXSchedulerService {
504
505
  return item;
505
506
  }
506
507
  isHoliday(date) {
507
- return this.calendarService.holidays.some((d) => date.equal(d.date, 'day'));
508
+ const globalHolidays = this.calendarService.holidays.some((d) => date.equal(d.date, 'day'));
509
+ const internalHolidays = this.internalHoliday().some((d) => date.equal(d.date, 'day'));
510
+ return globalHolidays || internalHolidays;
508
511
  }
509
512
  isWeekend(date, calendar) {
510
513
  const weekend = this.calendarService.resolveCalendar(calendar).weekend;
@@ -638,7 +641,9 @@ class AXSchedulerAgendaViewComponent extends NXComponent {
638
641
  isHoliday(date) {
639
642
  const isHoliday = this.schedulerService.isHoliday(date);
640
643
  if (isHoliday) {
641
- const holiday = this.calendarService.holidays.filter((d) => date.equal(d.date, 'day'))[0];
644
+ const globalHoliday = this.calendarService.holidays.find((d) => date.equal(d.date, 'day'));
645
+ const internalHoliday = this.schedulerService.internalHoliday().find((d) => date.equal(d.date, 'day'));
646
+ const holiday = globalHoliday || internalHoliday;
642
647
  return {
643
648
  state: 'holiday',
644
649
  holiday,
@@ -660,7 +665,7 @@ class AXSchedulerAgendaViewComponent extends NXComponent {
660
665
  return this.readonly();
661
666
  }
662
667
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXSchedulerAgendaViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
663
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: AXSchedulerAgendaViewComponent, isStandalone: true, selector: "ax-scheduler-agenda-view", inputs: { daysCount: { classPropertyName: "daysCount", publicName: "daysCount", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, hasActions: { classPropertyName: "hasActions", publicName: "hasActions", isSignal: true, isRequired: false, transformFunction: null }, dragStartDelay: { classPropertyName: "dragStartDelay", publicName: "dragStartDelay", isSignal: true, isRequired: false, transformFunction: null }, calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: true, transformFunction: null }, appointments: { classPropertyName: "appointments", publicName: "appointments", isSignal: true, isRequired: false, transformFunction: null }, tooltipTemplate: { classPropertyName: "tooltipTemplate", publicName: "tooltipTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { slotClickedInternal: "slotClickedInternal", slotDblClickedInternal: "slotDblClickedInternal", slotRightClickedInternal: "slotRightClickedInternal", appointmentClickedInternal: "appointmentClickedInternal", appointmentDblClickedInternal: "appointmentDblClickedInternal", appointmentRightClickedInternal: "appointmentRightClickedInternal", onActionClickInternal: "onActionClickInternal", onAppointmentDropInternal: "onAppointmentDropInternal" }, host: { properties: { "class.ax-state-readonly": "this.isReadonly" } }, providers: [{ provide: AXComponent, useExisting: AXSchedulerAgendaViewComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-scheduler-agenda-container\">\n @for (dayData of agendaDaysLayout(); track dayData.date.date.getTime()) {\n <div\n axDropZone\n #zone=\"axDropZone\"\n (onElementDrop)=\"handleDrop($event, dayData.date)\"\n [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n [class.ax-state-today]=\"isToday(dayData.date)\"\n [class.ax-state-holiday]=\"dayData.holiday.state !== 'none'\"\n class=\"ax-scheduler-agenda-view-container\"\n (click)=\"handleSlotEvent($event, dayData.date)\"\n (dblclick)=\"handleSlotEvent($event, dayData.date)\"\n (contextmenu)=\"handleSlotEvent($event, dayData.date)\"\n [attr.data-slot-id]=\"dayData.date.format('YYYYMMDD')\"\n >\n <div class=\"ax-scheduler-agenda-header-date-day\">\n <span\n class=\"ax-scheduler-agenda-header-date-day-char ax-scheduler-truncate\"\n [axTooltip]=\"dayData.holiday?.holiday?.title ?? ''\"\n [axTooltipPlacement]=\"'top-start'\"\n >\n {{ dayData.date | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n @if (dayData.holiday.state === 'holiday' && dayData.holiday.holiday.title) {\n ( {{ dayData.holiday.holiday.title }} )\n }\n </span>\n <span class=\"ax-scheduler-agenda-header-date-day-num\">\n {{ dayData.date | format: 'date' : { format: 'DD', calendar: calendar() } | async }}\n </span>\n </div>\n <div class=\"ax-scheduler-agenda-appointment-container\">\n @for (segment of dayData.appointments; track segment.id + segment.originalStartDate.getTime()) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"segment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || segment.readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, segment)\"\n (dblclick)=\"handleAppointmentEvent($event, segment)\"\n (contextmenu)=\"handleAppointmentEvent($event, segment)\"\n [title]=\"\n tooltipTemplate()\n ? ''\n : segment.title +\n (segment.allDay\n ? ' (All Day)'\n : ' (' +\n (segment.originalStartDate | format: 'time' : { calendar: calendar() } | async) +\n ' - ' +\n (segment.originalEndDate | format: 'time' : { calendar: calendar() } | async) +\n ')')\n \"\n class=\"ax-scheduler-agenda-appointment\"\n [class.all-day-segment]=\"segment.allDay\"\n [ngClass]=\"segment.cssClass ?? `ax-scheduler-${segment.priority ?? 'primary'}-periority`\"\n [tooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <div class=\"ax-scheduler-agenda-appointment-time\">\n @if (segment.allDay) {\n <span>{{ '@acorex:dateTime.duration.all-day' | translate | async }}</span>\n } @else {\n <span>\n {{ segment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n -\n {{ segment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n </span>\n }\n </div>\n <ax-title class=\"ax-scheduler-agenda-appointment-title ax-scheduler-truncate\">{{ segment.title }}</ax-title>\n <!-- Description could go here if needed -->\n <!-- @if (segment.description) {\n <ax-subtitle>{{ segment.description }}</ax-subtitle>\n } -->\n @if (hasActions()) {\n <ax-icon\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n (click)=\"handleActionClick($event, segment)\"\n >\n </ax-icon>\n }\n </div>\n }\n @if (dayData.appointments.length === 0) {\n <div class=\"ax-scheduler-agenda-no-appointments\">\n {{ '@acorex:common.general.no-record' | translate | async }}\n </div>\n }\n </div>\n </div>\n }\n</div>\n", styles: ["ax-scheduler-agenda-view .ax-scheduler-agenda-container{height:100%;display:flex;flex-direction:column}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container{gap:1rem;display:flex;position:relative;padding-inline:1rem;padding-block:.25rem;border-block-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container:last-child{border-block-end-width:0}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-state-today{background-color:rgba(var(--ax-sys-color-primary-surface),.05)}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-state-today .ax-scheduler-agenda-header-date-day{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-state-today .ax-scheduler-agenda-header-date-day .ax-scheduler-month-header-date-day-char{font-weight:500}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-state-today .ax-scheduler-agenda-header-date-day .ax-scheduler-month-header-date-day-num{font-weight:700}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-state-holiday{color:rgba(var(--ax-sys-color-danger-surface))}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-state-holiday.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container .ax-scheduler-agenda-header-date-day{gap:.25rem;display:flex;height:3.5rem;min-width:6rem;max-width:6rem;position:sticky;align-items:start;flex-direction:column;inset-block-start:1rem;justify-content:center}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container .ax-scheduler-agenda-header-date-day .ax-scheduler-agenda-header-date-day-char{max-width:100%;font-weight:300}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container .ax-scheduler-agenda-header-date-day .ax-scheduler-agenda-header-date-day-num{font-weight:500;font-size:1.25rem}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container{gap:.25rem;display:flex;align-items:center;flex-direction:column;justify-content:center;width:calc(100% - 7rem)}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment{gap:.5rem;width:100%;display:flex;overflow:hidden;align-items:center;flex-direction:row;padding-block:.25rem;padding-inline:.5rem;justify-content:space-between;border-radius:calc(var(--ax-sys-border-radius) / 2)}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment.all-day-segment .ax-scheduler-agenda-appointment-time{font-weight:500}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment .ax-scheduler-agenda-appointment-time{flex-shrink:0;min-width:5rem;font-size:.9em;opacity:.9}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment .ax-scheduler-agenda-appointment-title{width:100%}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment .ax-scheduler-action-icon{width:auto;cursor:pointer}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-no-appointments{text-align:center;font-style:italic;color:rgba(var(--ax-sys-color-on-surface),.6)}ax-scheduler-agenda-view:not(.ax-state-readonly) .ax-scheduler-agenda-appointment{cursor:pointer}ax-scheduler-agenda-view:not(.ax-state-readonly) .ax-scheduler-agenda-view-container{cursor:pointer;transition-property:background-color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-scheduler-agenda-view:not(.ax-state-readonly) .ax-scheduler-agenda-view-container:hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg, var(--ax-sys-color-primary-surface), .1))}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["dragData", "dragDisabled", "dragTransition", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragClonedTemplate", "dragCursor", "dragBoundary", "dragTransitionDuration"], outputs: ["dragPositionChanged"] }, { kind: "directive", type: AXDropZoneDirective, selector: "[axDropZone]", inputs: ["dropZoneGroup"], outputs: ["onElementDrop", "onElementHover"], exportAs: ["axDropZone"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["tooltipDisabled", "axTooltip", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { 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 }); }
668
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: AXSchedulerAgendaViewComponent, isStandalone: true, selector: "ax-scheduler-agenda-view", inputs: { daysCount: { classPropertyName: "daysCount", publicName: "daysCount", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, hasActions: { classPropertyName: "hasActions", publicName: "hasActions", isSignal: true, isRequired: false, transformFunction: null }, dragStartDelay: { classPropertyName: "dragStartDelay", publicName: "dragStartDelay", isSignal: true, isRequired: false, transformFunction: null }, calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: true, transformFunction: null }, appointments: { classPropertyName: "appointments", publicName: "appointments", isSignal: true, isRequired: false, transformFunction: null }, tooltipTemplate: { classPropertyName: "tooltipTemplate", publicName: "tooltipTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { slotClickedInternal: "slotClickedInternal", slotDblClickedInternal: "slotDblClickedInternal", slotRightClickedInternal: "slotRightClickedInternal", appointmentClickedInternal: "appointmentClickedInternal", appointmentDblClickedInternal: "appointmentDblClickedInternal", appointmentRightClickedInternal: "appointmentRightClickedInternal", onActionClickInternal: "onActionClickInternal", onAppointmentDropInternal: "onAppointmentDropInternal" }, host: { properties: { "class.ax-state-readonly": "this.isReadonly" } }, providers: [{ provide: AXComponent, useExisting: AXSchedulerAgendaViewComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-scheduler-agenda-container\">\n @for (dayData of agendaDaysLayout(); track dayData.date.date.getTime()) {\n <div\n axDropZone\n #zone=\"axDropZone\"\n (onElementDrop)=\"handleDrop($event, dayData.date)\"\n [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n [class.ax-state-today]=\"isToday(dayData.date)\"\n class=\"ax-scheduler-agenda-view-container {{\n dayData.holiday.state !== 'none' ? (dayData.holiday.holiday?.cssClass ?? 'ax-state-holiday') : ''\n }}\"\n (click)=\"handleSlotEvent($event, dayData.date)\"\n (dblclick)=\"handleSlotEvent($event, dayData.date)\"\n (contextmenu)=\"handleSlotEvent($event, dayData.date)\"\n [attr.data-slot-id]=\"dayData.date.format('YYYYMMDD')\"\n >\n <div class=\"ax-scheduler-agenda-header-date-day\">\n <span\n class=\"ax-scheduler-agenda-header-date-day-char ax-scheduler-truncate\"\n [axTooltip]=\"dayData.holiday?.holiday?.title ?? ''\"\n [axTooltipPlacement]=\"'top-start'\"\n >\n {{ dayData.date | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n @if (dayData.holiday.state === 'holiday' && dayData.holiday.holiday.title) {\n ( {{ dayData.holiday.holiday.title }} )\n }\n </span>\n <span class=\"ax-scheduler-agenda-header-date-day-num\">\n {{ dayData.date | format: 'date' : { format: 'DD', calendar: calendar() } | async }}\n </span>\n </div>\n <div class=\"ax-scheduler-agenda-appointment-container\">\n @for (segment of dayData.appointments; track segment.id + segment.originalStartDate.getTime()) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"segment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || segment.readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, segment)\"\n (dblclick)=\"handleAppointmentEvent($event, segment)\"\n (contextmenu)=\"handleAppointmentEvent($event, segment)\"\n [title]=\"\n tooltipTemplate()\n ? ''\n : segment.title +\n (segment.allDay\n ? ' (All Day)'\n : ' (' +\n (segment.originalStartDate | format: 'time' : { calendar: calendar() } | async) +\n ' - ' +\n (segment.originalEndDate | format: 'time' : { calendar: calendar() } | async) +\n ')')\n \"\n class=\"ax-scheduler-agenda-appointment\"\n [class.all-day-segment]=\"segment.allDay\"\n [ngClass]=\"segment.cssClass ?? `ax-scheduler-${segment.priority ?? 'primary'}-periority`\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <div class=\"ax-scheduler-agenda-appointment-time\">\n @if (segment.allDay) {\n <span>{{ '@acorex:dateTime.duration.all-day' | translate | async }}</span>\n } @else {\n <span>\n {{ segment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n -\n {{ segment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n </span>\n }\n </div>\n <ax-title class=\"ax-scheduler-agenda-appointment-title ax-scheduler-truncate\">{{ segment.title }}</ax-title>\n <!-- Description could go here if needed -->\n <!-- @if (segment.description) {\n <ax-subtitle>{{ segment.description }}</ax-subtitle>\n } -->\n @if (hasActions()) {\n <ax-icon\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n (click)=\"handleActionClick($event, segment)\"\n >\n </ax-icon>\n }\n </div>\n }\n @if (dayData.appointments.length === 0) {\n <div class=\"ax-scheduler-agenda-no-appointments\">\n {{ '@acorex:common.general.no-record' | translate | async }}\n </div>\n }\n </div>\n </div>\n }\n</div>\n", styles: ["ax-scheduler-agenda-view .ax-scheduler-agenda-container{height:100%;display:flex;flex-direction:column}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container{gap:1rem;display:flex;position:relative;padding-inline:1rem;padding-block:.25rem;border-block-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container:last-child{border-block-end-width:0}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-state-today{background-color:rgba(var(--ax-sys-color-primary-surface),.05)}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-state-today .ax-scheduler-agenda-header-date-day{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-state-today .ax-scheduler-agenda-header-date-day .ax-scheduler-month-header-date-day-char{font-weight:500}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-state-today .ax-scheduler-agenda-header-date-day .ax-scheduler-month-header-date-day-num{font-weight:700}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-state-holiday{color:rgba(var(--ax-sys-color-danger-surface))}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-state-holiday.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container .ax-scheduler-agenda-header-date-day{gap:.25rem;display:flex;height:3.5rem;min-width:6rem;max-width:6rem;position:sticky;align-items:start;flex-direction:column;inset-block-start:1rem;justify-content:center}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container .ax-scheduler-agenda-header-date-day .ax-scheduler-agenda-header-date-day-char{max-width:100%;font-weight:300}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container .ax-scheduler-agenda-header-date-day .ax-scheduler-agenda-header-date-day-num{font-weight:500;font-size:1.25rem}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container{gap:.25rem;display:flex;align-items:center;flex-direction:column;justify-content:center;width:calc(100% - 7rem)}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment{gap:.5rem;width:100%;display:flex;overflow:hidden;align-items:center;flex-direction:row;padding-block:.25rem;padding-inline:.5rem;justify-content:space-between;border-radius:calc(var(--ax-sys-border-radius) / 2)}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment.all-day-segment .ax-scheduler-agenda-appointment-time{font-weight:500}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment .ax-scheduler-agenda-appointment-time{flex-shrink:0;min-width:5rem;font-size:.9em;opacity:.9}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment .ax-scheduler-agenda-appointment-title{width:100%}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment .ax-scheduler-action-icon{width:auto;cursor:pointer}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-no-appointments{text-align:center;font-style:italic;color:rgba(var(--ax-sys-color-on-surface),.6)}ax-scheduler-agenda-view:not(.ax-state-readonly) .ax-scheduler-agenda-appointment{cursor:pointer}ax-scheduler-agenda-view:not(.ax-state-readonly) .ax-scheduler-agenda-view-container{cursor:pointer;transition-property:background-color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-scheduler-agenda-view:not(.ax-state-readonly) .ax-scheduler-agenda-view-container:hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg, var(--ax-sys-color-primary-surface), .1))}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["dragData", "dragDisabled", "dragTransition", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragClonedTemplate", "dragCursor", "dragBoundary", "dragTransitionDuration"], outputs: ["dragPositionChanged"] }, { kind: "directive", type: AXDropZoneDirective, selector: "[axDropZone]", inputs: ["dropZoneGroup"], outputs: ["onElementDrop", "onElementHover"], exportAs: ["axDropZone"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { 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 }); }
664
669
  }
665
670
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXSchedulerAgendaViewComponent, decorators: [{
666
671
  type: Component,
@@ -675,7 +680,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
675
680
  AXTooltipDirective,
676
681
  AXDecoratorIconComponent,
677
682
  AXTooltipDirective,
678
- ], providers: [{ provide: AXComponent, useExisting: AXSchedulerAgendaViewComponent }], template: "<div class=\"ax-scheduler-agenda-container\">\n @for (dayData of agendaDaysLayout(); track dayData.date.date.getTime()) {\n <div\n axDropZone\n #zone=\"axDropZone\"\n (onElementDrop)=\"handleDrop($event, dayData.date)\"\n [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n [class.ax-state-today]=\"isToday(dayData.date)\"\n [class.ax-state-holiday]=\"dayData.holiday.state !== 'none'\"\n class=\"ax-scheduler-agenda-view-container\"\n (click)=\"handleSlotEvent($event, dayData.date)\"\n (dblclick)=\"handleSlotEvent($event, dayData.date)\"\n (contextmenu)=\"handleSlotEvent($event, dayData.date)\"\n [attr.data-slot-id]=\"dayData.date.format('YYYYMMDD')\"\n >\n <div class=\"ax-scheduler-agenda-header-date-day\">\n <span\n class=\"ax-scheduler-agenda-header-date-day-char ax-scheduler-truncate\"\n [axTooltip]=\"dayData.holiday?.holiday?.title ?? ''\"\n [axTooltipPlacement]=\"'top-start'\"\n >\n {{ dayData.date | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n @if (dayData.holiday.state === 'holiday' && dayData.holiday.holiday.title) {\n ( {{ dayData.holiday.holiday.title }} )\n }\n </span>\n <span class=\"ax-scheduler-agenda-header-date-day-num\">\n {{ dayData.date | format: 'date' : { format: 'DD', calendar: calendar() } | async }}\n </span>\n </div>\n <div class=\"ax-scheduler-agenda-appointment-container\">\n @for (segment of dayData.appointments; track segment.id + segment.originalStartDate.getTime()) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"segment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || segment.readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, segment)\"\n (dblclick)=\"handleAppointmentEvent($event, segment)\"\n (contextmenu)=\"handleAppointmentEvent($event, segment)\"\n [title]=\"\n tooltipTemplate()\n ? ''\n : segment.title +\n (segment.allDay\n ? ' (All Day)'\n : ' (' +\n (segment.originalStartDate | format: 'time' : { calendar: calendar() } | async) +\n ' - ' +\n (segment.originalEndDate | format: 'time' : { calendar: calendar() } | async) +\n ')')\n \"\n class=\"ax-scheduler-agenda-appointment\"\n [class.all-day-segment]=\"segment.allDay\"\n [ngClass]=\"segment.cssClass ?? `ax-scheduler-${segment.priority ?? 'primary'}-periority`\"\n [tooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <div class=\"ax-scheduler-agenda-appointment-time\">\n @if (segment.allDay) {\n <span>{{ '@acorex:dateTime.duration.all-day' | translate | async }}</span>\n } @else {\n <span>\n {{ segment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n -\n {{ segment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n </span>\n }\n </div>\n <ax-title class=\"ax-scheduler-agenda-appointment-title ax-scheduler-truncate\">{{ segment.title }}</ax-title>\n <!-- Description could go here if needed -->\n <!-- @if (segment.description) {\n <ax-subtitle>{{ segment.description }}</ax-subtitle>\n } -->\n @if (hasActions()) {\n <ax-icon\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n (click)=\"handleActionClick($event, segment)\"\n >\n </ax-icon>\n }\n </div>\n }\n @if (dayData.appointments.length === 0) {\n <div class=\"ax-scheduler-agenda-no-appointments\">\n {{ '@acorex:common.general.no-record' | translate | async }}\n </div>\n }\n </div>\n </div>\n }\n</div>\n", styles: ["ax-scheduler-agenda-view .ax-scheduler-agenda-container{height:100%;display:flex;flex-direction:column}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container{gap:1rem;display:flex;position:relative;padding-inline:1rem;padding-block:.25rem;border-block-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container:last-child{border-block-end-width:0}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-state-today{background-color:rgba(var(--ax-sys-color-primary-surface),.05)}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-state-today .ax-scheduler-agenda-header-date-day{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-state-today .ax-scheduler-agenda-header-date-day .ax-scheduler-month-header-date-day-char{font-weight:500}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-state-today .ax-scheduler-agenda-header-date-day .ax-scheduler-month-header-date-day-num{font-weight:700}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-state-holiday{color:rgba(var(--ax-sys-color-danger-surface))}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-state-holiday.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container .ax-scheduler-agenda-header-date-day{gap:.25rem;display:flex;height:3.5rem;min-width:6rem;max-width:6rem;position:sticky;align-items:start;flex-direction:column;inset-block-start:1rem;justify-content:center}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container .ax-scheduler-agenda-header-date-day .ax-scheduler-agenda-header-date-day-char{max-width:100%;font-weight:300}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container .ax-scheduler-agenda-header-date-day .ax-scheduler-agenda-header-date-day-num{font-weight:500;font-size:1.25rem}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container{gap:.25rem;display:flex;align-items:center;flex-direction:column;justify-content:center;width:calc(100% - 7rem)}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment{gap:.5rem;width:100%;display:flex;overflow:hidden;align-items:center;flex-direction:row;padding-block:.25rem;padding-inline:.5rem;justify-content:space-between;border-radius:calc(var(--ax-sys-border-radius) / 2)}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment.all-day-segment .ax-scheduler-agenda-appointment-time{font-weight:500}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment .ax-scheduler-agenda-appointment-time{flex-shrink:0;min-width:5rem;font-size:.9em;opacity:.9}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment .ax-scheduler-agenda-appointment-title{width:100%}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment .ax-scheduler-action-icon{width:auto;cursor:pointer}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-no-appointments{text-align:center;font-style:italic;color:rgba(var(--ax-sys-color-on-surface),.6)}ax-scheduler-agenda-view:not(.ax-state-readonly) .ax-scheduler-agenda-appointment{cursor:pointer}ax-scheduler-agenda-view:not(.ax-state-readonly) .ax-scheduler-agenda-view-container{cursor:pointer;transition-property:background-color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-scheduler-agenda-view:not(.ax-state-readonly) .ax-scheduler-agenda-view-container:hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg, var(--ax-sys-color-primary-surface), .1))}\n"] }]
683
+ ], providers: [{ provide: AXComponent, useExisting: AXSchedulerAgendaViewComponent }], template: "<div class=\"ax-scheduler-agenda-container\">\n @for (dayData of agendaDaysLayout(); track dayData.date.date.getTime()) {\n <div\n axDropZone\n #zone=\"axDropZone\"\n (onElementDrop)=\"handleDrop($event, dayData.date)\"\n [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n [class.ax-state-today]=\"isToday(dayData.date)\"\n class=\"ax-scheduler-agenda-view-container {{\n dayData.holiday.state !== 'none' ? (dayData.holiday.holiday?.cssClass ?? 'ax-state-holiday') : ''\n }}\"\n (click)=\"handleSlotEvent($event, dayData.date)\"\n (dblclick)=\"handleSlotEvent($event, dayData.date)\"\n (contextmenu)=\"handleSlotEvent($event, dayData.date)\"\n [attr.data-slot-id]=\"dayData.date.format('YYYYMMDD')\"\n >\n <div class=\"ax-scheduler-agenda-header-date-day\">\n <span\n class=\"ax-scheduler-agenda-header-date-day-char ax-scheduler-truncate\"\n [axTooltip]=\"dayData.holiday?.holiday?.title ?? ''\"\n [axTooltipPlacement]=\"'top-start'\"\n >\n {{ dayData.date | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n @if (dayData.holiday.state === 'holiday' && dayData.holiday.holiday.title) {\n ( {{ dayData.holiday.holiday.title }} )\n }\n </span>\n <span class=\"ax-scheduler-agenda-header-date-day-num\">\n {{ dayData.date | format: 'date' : { format: 'DD', calendar: calendar() } | async }}\n </span>\n </div>\n <div class=\"ax-scheduler-agenda-appointment-container\">\n @for (segment of dayData.appointments; track segment.id + segment.originalStartDate.getTime()) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"segment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || segment.readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, segment)\"\n (dblclick)=\"handleAppointmentEvent($event, segment)\"\n (contextmenu)=\"handleAppointmentEvent($event, segment)\"\n [title]=\"\n tooltipTemplate()\n ? ''\n : segment.title +\n (segment.allDay\n ? ' (All Day)'\n : ' (' +\n (segment.originalStartDate | format: 'time' : { calendar: calendar() } | async) +\n ' - ' +\n (segment.originalEndDate | format: 'time' : { calendar: calendar() } | async) +\n ')')\n \"\n class=\"ax-scheduler-agenda-appointment\"\n [class.all-day-segment]=\"segment.allDay\"\n [ngClass]=\"segment.cssClass ?? `ax-scheduler-${segment.priority ?? 'primary'}-periority`\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <div class=\"ax-scheduler-agenda-appointment-time\">\n @if (segment.allDay) {\n <span>{{ '@acorex:dateTime.duration.all-day' | translate | async }}</span>\n } @else {\n <span>\n {{ segment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n -\n {{ segment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n </span>\n }\n </div>\n <ax-title class=\"ax-scheduler-agenda-appointment-title ax-scheduler-truncate\">{{ segment.title }}</ax-title>\n <!-- Description could go here if needed -->\n <!-- @if (segment.description) {\n <ax-subtitle>{{ segment.description }}</ax-subtitle>\n } -->\n @if (hasActions()) {\n <ax-icon\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n (click)=\"handleActionClick($event, segment)\"\n >\n </ax-icon>\n }\n </div>\n }\n @if (dayData.appointments.length === 0) {\n <div class=\"ax-scheduler-agenda-no-appointments\">\n {{ '@acorex:common.general.no-record' | translate | async }}\n </div>\n }\n </div>\n </div>\n }\n</div>\n", styles: ["ax-scheduler-agenda-view .ax-scheduler-agenda-container{height:100%;display:flex;flex-direction:column}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container{gap:1rem;display:flex;position:relative;padding-inline:1rem;padding-block:.25rem;border-block-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container:last-child{border-block-end-width:0}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-state-today{background-color:rgba(var(--ax-sys-color-primary-surface),.05)}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-state-today .ax-scheduler-agenda-header-date-day{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-state-today .ax-scheduler-agenda-header-date-day .ax-scheduler-month-header-date-day-char{font-weight:500}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-state-today .ax-scheduler-agenda-header-date-day .ax-scheduler-month-header-date-day-num{font-weight:700}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-state-holiday{color:rgba(var(--ax-sys-color-danger-surface))}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-state-holiday.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container .ax-scheduler-agenda-header-date-day{gap:.25rem;display:flex;height:3.5rem;min-width:6rem;max-width:6rem;position:sticky;align-items:start;flex-direction:column;inset-block-start:1rem;justify-content:center}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container .ax-scheduler-agenda-header-date-day .ax-scheduler-agenda-header-date-day-char{max-width:100%;font-weight:300}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container .ax-scheduler-agenda-header-date-day .ax-scheduler-agenda-header-date-day-num{font-weight:500;font-size:1.25rem}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container{gap:.25rem;display:flex;align-items:center;flex-direction:column;justify-content:center;width:calc(100% - 7rem)}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment{gap:.5rem;width:100%;display:flex;overflow:hidden;align-items:center;flex-direction:row;padding-block:.25rem;padding-inline:.5rem;justify-content:space-between;border-radius:calc(var(--ax-sys-border-radius) / 2)}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment.all-day-segment .ax-scheduler-agenda-appointment-time{font-weight:500}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment .ax-scheduler-agenda-appointment-time{flex-shrink:0;min-width:5rem;font-size:.9em;opacity:.9}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment .ax-scheduler-agenda-appointment-title{width:100%}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment .ax-scheduler-action-icon{width:auto;cursor:pointer}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-no-appointments{text-align:center;font-style:italic;color:rgba(var(--ax-sys-color-on-surface),.6)}ax-scheduler-agenda-view:not(.ax-state-readonly) .ax-scheduler-agenda-appointment{cursor:pointer}ax-scheduler-agenda-view:not(.ax-state-readonly) .ax-scheduler-agenda-view-container{cursor:pointer;transition-property:background-color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-scheduler-agenda-view:not(.ax-state-readonly) .ax-scheduler-agenda-view-container:hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg, var(--ax-sys-color-primary-surface), .1))}\n"] }]
679
684
  }], propDecorators: { isReadonly: [{
680
685
  type: HostBinding,
681
686
  args: ['class.ax-state-readonly']
@@ -966,7 +971,7 @@ class AXSchedulerDayViewComponent extends NXComponent {
966
971
  return this.readonly();
967
972
  }
968
973
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXSchedulerDayViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
969
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: AXSchedulerDayViewComponent, isStandalone: true, selector: "ax-scheduler-day-view", inputs: { readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, hasActions: { classPropertyName: "hasActions", publicName: "hasActions", isSignal: true, isRequired: false, transformFunction: null }, dragStartDelay: { classPropertyName: "dragStartDelay", publicName: "dragStartDelay", isSignal: true, isRequired: false, transformFunction: null }, calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, 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 }, appointments: { classPropertyName: "appointments", publicName: "appointments", isSignal: true, isRequired: false, transformFunction: null }, tooltipTemplate: { classPropertyName: "tooltipTemplate", publicName: "tooltipTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { slotClickedInternal: "slotClickedInternal", slotDblClickedInternal: "slotDblClickedInternal", slotRightClickedInternal: "slotRightClickedInternal", appointmentClickedInternal: "appointmentClickedInternal", appointmentDblClickedInternal: "appointmentDblClickedInternal", appointmentRightClickedInternal: "appointmentRightClickedInternal", onActionClickInternal: "onActionClickInternal", onAppointmentDropInternal: "onAppointmentDropInternal" }, host: { properties: { "class.ax-state-readonly": "this.isReadonly" } }, providers: [{ provide: AXComponent, useExisting: AXSchedulerDayViewComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-scheduler-day-header\">\n <div class=\"ax-scheduler-day-header-table\" aria-hidden=\"true\">\n <div>\n {{ '@acorex:dateTime.duration.all-day' | translate | async }}\n </div>\n </div>\n <div\n axDropZone\n #zone=\"axDropZone\"\n (onElementDrop)=\"handleAllDayDrop($event)\"\n [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n (click)=\"handleAllDaySlotEvent($event)\"\n (dblclick)=\"handleAllDaySlotEvent($event)\"\n (contextmenu)=\"handleAllDaySlotEvent($event)\"\n class=\"ax-scheduler-day-header-table-container\"\n [attr.data-slot-id]=\"date().format('YYYYMMDD') + '-allday'\"\n >\n <div class=\"ax-scheduler-day-header-appointment-container\">\n @if (allDayAppointments().length) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || allDayAppointments()[0].readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n [dragData]=\"allDayAppointments()[0]\"\n (click)=\"handleAppointmentEvent($event, allDayAppointments()[0])\"\n (dblclick)=\"handleAppointmentEvent($event, allDayAppointments()[0])\"\n (contextmenu)=\"handleAppointmentEvent($event, allDayAppointments()[0])\"\n [title]=\"tooltipTemplate() ? '' : allDayAppointments()[0].title\"\n class=\"ax-scheduler-header-day-appointment\"\n [ngClass]=\"\n allDayAppointments()[0].cssClass ??\n `ax-scheduler-${allDayAppointments()[0].priority ?? 'primary'}-periority`\n \"\n [tooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ allDayAppointments()[0].title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, allDayAppointments()[0])\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </ax-title>\n <ax-subtitle>\n {{ allDayAppointments()[0].startDate | format: 'date' : { calendar: calendar() } | async }}\n -\n {{ allDayAppointments()[0].endDate | format: 'date' : { calendar: calendar() } | async }}\n </ax-subtitle>\n </div>\n }\n @if (allDayAppointments().length > 1) {\n <div\n #moreAppointments\n class=\"ax-scheduler-day-header-more-tag\"\n [ngClass]=\"\n allDayAppointments()[1].cssClass ??\n `ax-scheduler-${allDayAppointments()[1].priority ?? 'primary'}-periority`\n \"\n >\n {{\n '@acorex:common.general.more-items'\n | translate: { params: { number: allDayAppointments().length - 1 } }\n | async\n }}\n </div>\n <ax-popover [target]=\"moreAppointments\">\n <div class=\"ax-overlay-pane ax-scheduler-popover\" [class.ax-state-readonly]=\"readonly()\" axDropZone>\n @for (appointment of allDayAppointments(); track appointment.id; let first = $first) {\n @if (!first) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"appointment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || appointment.readonly || readonly()\"\n (click)=\"handleAppointmentEvent($event, appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n [title]=\"tooltipTemplate() ? '' : appointment.title\"\n class=\"ax-scheduler-popover-appointment\"\n [ngClass]=\"appointment.cssClass ?? `ax-scheduler-${appointment.priority ?? 'primary'}-periority`\"\n [tooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </ax-title>\n <ax-subtitle>\n {{ appointment.startDate | format: 'date' : { calendar: calendar() } | async }}\n -\n {{ appointment.endDate | format: 'date' : { calendar: calendar() } | async }}\n </ax-subtitle>\n </div>\n }\n }\n </div>\n </ax-popover>\n }\n </div>\n </div>\n</div>\n\n<div class=\"ax-scheduler-day-time-container\">\n <table class=\"ax-scheduler-day-time\" aria-hidden=\"true\" [border]=\"1\">\n @for (time of hoursArray(); track time.date.getTime()) {\n <div>\n {{ time | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n </div>\n }\n </table>\n <div class=\"ax-scheduler-day-table-container\">\n <div class=\"ax-scheduler-day-appointment-container\">\n @for (appointment of singleDayAppointments(); track appointment.id) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"appointment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || appointment.readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n [title]=\"tooltipTemplate() ? '' : appointment.title\"\n class=\"ax-scheduler-day-appointment\"\n [style.width]=\"getAppointmentWidth(appointment.id)\"\n [style.height]=\"getAppointmentHeight(appointment.id)\"\n [style.inset-block-start]=\"getAppointmentTop(appointment.id)\"\n [style.inset-inline-start]=\"getAppointmentLeft(appointment.id)\"\n [ngClass]=\"appointment.cssClass ?? `ax-scheduler-${appointment.priority ?? 'primary'}-periority`\"\n [tooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </ax-title>\n <ax-subtitle>\n {{ appointment.originalStartDate | format: 'time' : { calendar: calendar() } | async }} -\n {{ appointment.originalEndDate | format: 'time' : { calendar: calendar() } | async }}\n </ax-subtitle>\n </div>\n }\n </div>\n <div aria-hidden=\"true\" class=\"ax-scheduler-day-slot\">\n @for (time of hoursArray(); track time.date.getTime()) {\n <div\n axDropZone\n #zone=\"axDropZone\"\n (onElementDrop)=\"handleSingleDayDrop($event, time)\"\n [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n (click)=\"handleSingleSlotEvent($event, time)\"\n (dblclick)=\"handleSingleSlotEvent($event, time)\"\n (contextmenu)=\"handleSingleSlotEvent($event, time)\"\n [attr.data-slot-id]=\"time.format('YYYYMMDD-HHmm')\"\n ></div>\n <div\n axDropZone\n #zone2=\"axDropZone\"\n [class.ax-scheduler-slot-hovered]=\"zone2.isHovered()\"\n (onElementDrop)=\"handleSingleDayDrop($event, time.add('minute', 30))\"\n (click)=\"handleSingleSlotEvent($event, time.add('minute', 30))\"\n (dblclick)=\"handleSingleSlotEvent($event, time.add('minute', 30))\"\n (contextmenu)=\"handleSingleSlotEvent($event, time.add('minute', 30))\"\n [attr.data-slot-id]=\"time.add('minute', 30).format('YYYYMMDD-HHmm')\"\n ></div>\n }\n </div>\n </div>\n</div>\n", styles: ["ax-scheduler-day-view{display:block;position:relative;background-color:inherit;min-width:var(--ax-comp-scheduler-width)}ax-scheduler-day-view .ax-scheduler-day-header{top:0;z-index:3;width:100%;display:flex;position:sticky;background-color:var(--ax-comp-scheduler-all-day-bg, inherit);border-block-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table{z-index:3;position:sticky;inset-inline-start:0;background-color:inherit}ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table div{display:flex;align-items:center;justify-content:center;width:var(--ax-comp-scheduler-basic-view-blocks-width);height:var(--ax-comp-scheduler-basic-view-blocks-height);border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table-container{width:100%;display:flex}ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table-container .ax-scheduler-day-header-appointment-container{gap:1rem;display:flex;width:calc(100% - 2.5rem)}ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table-container .ax-scheduler-day-header-appointment-container .ax-scheduler-header-day-appointment{width:100%;display:flex;overflow:hidden;flex-direction:column;padding-inline:.5rem;justify-content:center;border-radius:calc(var(--ax-sys-border-radius) / 2)}ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table-container .ax-scheduler-day-header-appointment-container .ax-scheduler-day-header-more-tag{display:flex;cursor:pointer;text-wrap:nowrap;flex-direction:column;padding-inline:.5rem;justify-content:center;border-radius:var(--ax-sys-border-radius)}ax-scheduler-day-view .ax-scheduler-day-time-container{width:100%;display:flex;background-color:inherit}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-time{z-index:2;position:sticky;inset-inline-start:0;background-color:var(--ax-comp-scheduler-all-day-bg, inherit)}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-time div{display:block;text-align:center;padding-inline:.5rem;width:var(--ax-comp-scheduler-basic-view-blocks-width);height:calc(var(--ax-comp-scheduler-basic-view-blocks-height) * 2);border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container{width:100%;position:relative}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container .ax-scheduler-day-appointment-container{top:0;position:absolute;width:calc(100% - 2.5rem)}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container .ax-scheduler-day-appointment-container .ax-scheduler-day-appointment{width:100%;display:flex;overflow:hidden;position:absolute;inset-inline-start:0;flex-direction:column;padding-block:.25rem;padding-inline:.5rem;border-radius:calc(var(--ax-sys-border-radius) / 2)}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container .ax-scheduler-day-slot{width:100%}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container .ax-scheduler-day-slot div{height:var(--ax-comp-scheduler-basic-view-blocks-height);display:block;padding-inline:.5rem;border-block-start:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container .ax-scheduler-day-slot div:first-child{border-block-start-width:0}ax-scheduler-day-view:not(.ax-state-readonly) .ax-scheduler-header-day-appointment,ax-scheduler-day-view:not(.ax-state-readonly) .ax-scheduler-day-appointment{cursor:pointer}ax-scheduler-day-view:not(.ax-state-readonly) .ax-scheduler-day-header-table-container,ax-scheduler-day-view:not(.ax-state-readonly) .ax-scheduler-day-slot>div{cursor:pointer;transition-property:background-color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-scheduler-day-view:not(.ax-state-readonly) .ax-scheduler-day-header-table-container:hover,ax-scheduler-day-view:not(.ax-state-readonly) .ax-scheduler-day-slot>div:hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg, var(--ax-sys-color-primary-surface), .1))}ax-scheduler-day-view ax-title{display:flex;justify-content:space-between}ax-scheduler-day-view ax-title .ax-scheduler-action-icon{width:auto;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["dragData", "dragDisabled", "dragTransition", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragClonedTemplate", "dragCursor", "dragBoundary", "dragTransitionDuration"], outputs: ["dragPositionChanged"] }, { kind: "directive", type: AXDropZoneDirective, selector: "[axDropZone]", inputs: ["dropZoneGroup"], outputs: ["onElementDrop", "onElementHover"], exportAs: ["axDropZone"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["tooltipDisabled", "axTooltip", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AXFormatPipe, name: "format" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
974
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: AXSchedulerDayViewComponent, isStandalone: true, selector: "ax-scheduler-day-view", inputs: { readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, hasActions: { classPropertyName: "hasActions", publicName: "hasActions", isSignal: true, isRequired: false, transformFunction: null }, dragStartDelay: { classPropertyName: "dragStartDelay", publicName: "dragStartDelay", isSignal: true, isRequired: false, transformFunction: null }, calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, 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 }, appointments: { classPropertyName: "appointments", publicName: "appointments", isSignal: true, isRequired: false, transformFunction: null }, tooltipTemplate: { classPropertyName: "tooltipTemplate", publicName: "tooltipTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { slotClickedInternal: "slotClickedInternal", slotDblClickedInternal: "slotDblClickedInternal", slotRightClickedInternal: "slotRightClickedInternal", appointmentClickedInternal: "appointmentClickedInternal", appointmentDblClickedInternal: "appointmentDblClickedInternal", appointmentRightClickedInternal: "appointmentRightClickedInternal", onActionClickInternal: "onActionClickInternal", onAppointmentDropInternal: "onAppointmentDropInternal" }, host: { properties: { "class.ax-state-readonly": "this.isReadonly" } }, providers: [{ provide: AXComponent, useExisting: AXSchedulerDayViewComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-scheduler-day-header\">\n <div class=\"ax-scheduler-day-header-table\" aria-hidden=\"true\">\n <div>\n {{ '@acorex:dateTime.duration.all-day' | translate | async }}\n </div>\n </div>\n <div\n axDropZone\n #zone=\"axDropZone\"\n (onElementDrop)=\"handleAllDayDrop($event)\"\n [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n (click)=\"handleAllDaySlotEvent($event)\"\n (dblclick)=\"handleAllDaySlotEvent($event)\"\n (contextmenu)=\"handleAllDaySlotEvent($event)\"\n class=\"ax-scheduler-day-header-table-container\"\n [attr.data-slot-id]=\"date().format('YYYYMMDD') + '-allday'\"\n >\n <div class=\"ax-scheduler-day-header-appointment-container\">\n @if (allDayAppointments().length) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || allDayAppointments()[0].readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n [dragData]=\"allDayAppointments()[0]\"\n (click)=\"handleAppointmentEvent($event, allDayAppointments()[0])\"\n (dblclick)=\"handleAppointmentEvent($event, allDayAppointments()[0])\"\n (contextmenu)=\"handleAppointmentEvent($event, allDayAppointments()[0])\"\n [title]=\"tooltipTemplate() ? '' : allDayAppointments()[0].title\"\n class=\"ax-scheduler-header-day-appointment\"\n [ngClass]=\"\n allDayAppointments()[0].cssClass ??\n `ax-scheduler-${allDayAppointments()[0].priority ?? 'primary'}-periority`\n \"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ allDayAppointments()[0].title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, allDayAppointments()[0])\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </ax-title>\n <ax-subtitle>\n {{ allDayAppointments()[0].startDate | format: 'date' : { calendar: calendar() } | async }}\n -\n {{ allDayAppointments()[0].endDate | format: 'date' : { calendar: calendar() } | async }}\n </ax-subtitle>\n </div>\n }\n @if (allDayAppointments().length > 1) {\n <div\n #moreAppointments\n class=\"ax-scheduler-day-header-more-tag\"\n [ngClass]=\"\n allDayAppointments()[1].cssClass ??\n `ax-scheduler-${allDayAppointments()[1].priority ?? 'primary'}-periority`\n \"\n >\n {{\n '@acorex:common.general.more-items'\n | translate: { params: { number: allDayAppointments().length - 1 } }\n | async\n }}\n </div>\n <ax-popover [target]=\"moreAppointments\">\n <div class=\"ax-overlay-pane ax-scheduler-popover\" [class.ax-state-readonly]=\"readonly()\" axDropZone>\n @for (appointment of allDayAppointments(); track appointment.id; let first = $first) {\n @if (!first) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"appointment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || appointment.readonly || readonly()\"\n (click)=\"handleAppointmentEvent($event, appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n [title]=\"tooltipTemplate() ? '' : appointment.title\"\n class=\"ax-scheduler-popover-appointment\"\n [ngClass]=\"appointment.cssClass ?? `ax-scheduler-${appointment.priority ?? 'primary'}-periority`\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </ax-title>\n <ax-subtitle>\n {{ appointment.startDate | format: 'date' : { calendar: calendar() } | async }}\n -\n {{ appointment.endDate | format: 'date' : { calendar: calendar() } | async }}\n </ax-subtitle>\n </div>\n }\n }\n </div>\n </ax-popover>\n }\n </div>\n </div>\n</div>\n\n<div class=\"ax-scheduler-day-time-container\">\n <table class=\"ax-scheduler-day-time\" aria-hidden=\"true\" [border]=\"1\">\n @for (time of hoursArray(); track time.date.getTime()) {\n <div>\n {{ time | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n </div>\n }\n </table>\n <div class=\"ax-scheduler-day-table-container\">\n <div class=\"ax-scheduler-day-appointment-container\">\n @for (appointment of singleDayAppointments(); track appointment.id) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"appointment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || appointment.readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n [title]=\"tooltipTemplate() ? '' : appointment.title\"\n class=\"ax-scheduler-day-appointment\"\n [style.width]=\"getAppointmentWidth(appointment.id)\"\n [style.height]=\"getAppointmentHeight(appointment.id)\"\n [style.inset-block-start]=\"getAppointmentTop(appointment.id)\"\n [style.inset-inline-start]=\"getAppointmentLeft(appointment.id)\"\n [ngClass]=\"appointment.cssClass ?? `ax-scheduler-${appointment.priority ?? 'primary'}-periority`\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </ax-title>\n <ax-subtitle>\n {{ appointment.originalStartDate | format: 'time' : { calendar: calendar() } | async }} -\n {{ appointment.originalEndDate | format: 'time' : { calendar: calendar() } | async }}\n </ax-subtitle>\n </div>\n }\n </div>\n <div aria-hidden=\"true\" class=\"ax-scheduler-day-slot\">\n @for (time of hoursArray(); track time.date.getTime()) {\n <div\n axDropZone\n #zone=\"axDropZone\"\n (onElementDrop)=\"handleSingleDayDrop($event, time)\"\n [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n (click)=\"handleSingleSlotEvent($event, time)\"\n (dblclick)=\"handleSingleSlotEvent($event, time)\"\n (contextmenu)=\"handleSingleSlotEvent($event, time)\"\n [attr.data-slot-id]=\"time.format('YYYYMMDD-HHmm')\"\n ></div>\n <div\n axDropZone\n #zone2=\"axDropZone\"\n [class.ax-scheduler-slot-hovered]=\"zone2.isHovered()\"\n (onElementDrop)=\"handleSingleDayDrop($event, time.add('minute', 30))\"\n (click)=\"handleSingleSlotEvent($event, time.add('minute', 30))\"\n (dblclick)=\"handleSingleSlotEvent($event, time.add('minute', 30))\"\n (contextmenu)=\"handleSingleSlotEvent($event, time.add('minute', 30))\"\n [attr.data-slot-id]=\"time.add('minute', 30).format('YYYYMMDD-HHmm')\"\n ></div>\n }\n </div>\n </div>\n</div>\n", styles: ["ax-scheduler-day-view{display:block;position:relative;background-color:inherit;min-width:var(--ax-comp-scheduler-width)}ax-scheduler-day-view .ax-scheduler-day-header{top:0;z-index:3;width:100%;display:flex;position:sticky;background-color:var(--ax-comp-scheduler-all-day-bg, inherit);border-block-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table{z-index:3;position:sticky;inset-inline-start:0;background-color:inherit}ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table div{display:flex;align-items:center;justify-content:center;width:var(--ax-comp-scheduler-basic-view-blocks-width);height:var(--ax-comp-scheduler-basic-view-blocks-height);border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table-container{width:100%;display:flex}ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table-container .ax-scheduler-day-header-appointment-container{gap:1rem;display:flex;width:calc(100% - 2.5rem)}ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table-container .ax-scheduler-day-header-appointment-container .ax-scheduler-header-day-appointment{width:100%;display:flex;overflow:hidden;flex-direction:column;padding-inline:.5rem;justify-content:center;border-radius:calc(var(--ax-sys-border-radius) / 2)}ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table-container .ax-scheduler-day-header-appointment-container .ax-scheduler-day-header-more-tag{display:flex;cursor:pointer;text-wrap:nowrap;flex-direction:column;padding-inline:.5rem;justify-content:center;border-radius:var(--ax-sys-border-radius)}ax-scheduler-day-view .ax-scheduler-day-time-container{width:100%;display:flex;background-color:inherit}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-time{z-index:2;position:sticky;inset-inline-start:0;background-color:var(--ax-comp-scheduler-all-day-bg, inherit)}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-time div{display:block;text-align:center;padding-inline:.5rem;width:var(--ax-comp-scheduler-basic-view-blocks-width);height:calc(var(--ax-comp-scheduler-basic-view-blocks-height) * 2);border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container{width:100%;position:relative}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container .ax-scheduler-day-appointment-container{top:0;position:absolute;width:calc(100% - 2.5rem)}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container .ax-scheduler-day-appointment-container .ax-scheduler-day-appointment{width:100%;display:flex;overflow:hidden;position:absolute;inset-inline-start:0;flex-direction:column;padding-block:.25rem;padding-inline:.5rem;border-radius:calc(var(--ax-sys-border-radius) / 2)}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container .ax-scheduler-day-slot{width:100%}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container .ax-scheduler-day-slot div{height:var(--ax-comp-scheduler-basic-view-blocks-height);display:block;padding-inline:.5rem;border-block-start:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container .ax-scheduler-day-slot div:first-child{border-block-start-width:0}ax-scheduler-day-view:not(.ax-state-readonly) .ax-scheduler-header-day-appointment,ax-scheduler-day-view:not(.ax-state-readonly) .ax-scheduler-day-appointment{cursor:pointer}ax-scheduler-day-view:not(.ax-state-readonly) .ax-scheduler-day-header-table-container,ax-scheduler-day-view:not(.ax-state-readonly) .ax-scheduler-day-slot>div{cursor:pointer;transition-property:background-color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-scheduler-day-view:not(.ax-state-readonly) .ax-scheduler-day-header-table-container:hover,ax-scheduler-day-view:not(.ax-state-readonly) .ax-scheduler-day-slot>div:hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg, var(--ax-sys-color-primary-surface), .1))}ax-scheduler-day-view ax-title{display:flex;justify-content:space-between}ax-scheduler-day-view ax-title .ax-scheduler-action-icon{width:auto;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["dragData", "dragDisabled", "dragTransition", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragClonedTemplate", "dragCursor", "dragBoundary", "dragTransitionDuration"], outputs: ["dragPositionChanged"] }, { kind: "directive", type: AXDropZoneDirective, selector: "[axDropZone]", inputs: ["dropZoneGroup"], outputs: ["onElementDrop", "onElementHover"], exportAs: ["axDropZone"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AXFormatPipe, name: "format" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
970
975
  }
971
976
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXSchedulerDayViewComponent, decorators: [{
972
977
  type: Component,
@@ -981,7 +986,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
981
986
  AXDropZoneDirective,
982
987
  AXDecoratorIconComponent,
983
988
  AXTooltipDirective,
984
- ], providers: [{ provide: AXComponent, useExisting: AXSchedulerDayViewComponent }], template: "<div class=\"ax-scheduler-day-header\">\n <div class=\"ax-scheduler-day-header-table\" aria-hidden=\"true\">\n <div>\n {{ '@acorex:dateTime.duration.all-day' | translate | async }}\n </div>\n </div>\n <div\n axDropZone\n #zone=\"axDropZone\"\n (onElementDrop)=\"handleAllDayDrop($event)\"\n [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n (click)=\"handleAllDaySlotEvent($event)\"\n (dblclick)=\"handleAllDaySlotEvent($event)\"\n (contextmenu)=\"handleAllDaySlotEvent($event)\"\n class=\"ax-scheduler-day-header-table-container\"\n [attr.data-slot-id]=\"date().format('YYYYMMDD') + '-allday'\"\n >\n <div class=\"ax-scheduler-day-header-appointment-container\">\n @if (allDayAppointments().length) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || allDayAppointments()[0].readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n [dragData]=\"allDayAppointments()[0]\"\n (click)=\"handleAppointmentEvent($event, allDayAppointments()[0])\"\n (dblclick)=\"handleAppointmentEvent($event, allDayAppointments()[0])\"\n (contextmenu)=\"handleAppointmentEvent($event, allDayAppointments()[0])\"\n [title]=\"tooltipTemplate() ? '' : allDayAppointments()[0].title\"\n class=\"ax-scheduler-header-day-appointment\"\n [ngClass]=\"\n allDayAppointments()[0].cssClass ??\n `ax-scheduler-${allDayAppointments()[0].priority ?? 'primary'}-periority`\n \"\n [tooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ allDayAppointments()[0].title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, allDayAppointments()[0])\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </ax-title>\n <ax-subtitle>\n {{ allDayAppointments()[0].startDate | format: 'date' : { calendar: calendar() } | async }}\n -\n {{ allDayAppointments()[0].endDate | format: 'date' : { calendar: calendar() } | async }}\n </ax-subtitle>\n </div>\n }\n @if (allDayAppointments().length > 1) {\n <div\n #moreAppointments\n class=\"ax-scheduler-day-header-more-tag\"\n [ngClass]=\"\n allDayAppointments()[1].cssClass ??\n `ax-scheduler-${allDayAppointments()[1].priority ?? 'primary'}-periority`\n \"\n >\n {{\n '@acorex:common.general.more-items'\n | translate: { params: { number: allDayAppointments().length - 1 } }\n | async\n }}\n </div>\n <ax-popover [target]=\"moreAppointments\">\n <div class=\"ax-overlay-pane ax-scheduler-popover\" [class.ax-state-readonly]=\"readonly()\" axDropZone>\n @for (appointment of allDayAppointments(); track appointment.id; let first = $first) {\n @if (!first) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"appointment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || appointment.readonly || readonly()\"\n (click)=\"handleAppointmentEvent($event, appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n [title]=\"tooltipTemplate() ? '' : appointment.title\"\n class=\"ax-scheduler-popover-appointment\"\n [ngClass]=\"appointment.cssClass ?? `ax-scheduler-${appointment.priority ?? 'primary'}-periority`\"\n [tooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </ax-title>\n <ax-subtitle>\n {{ appointment.startDate | format: 'date' : { calendar: calendar() } | async }}\n -\n {{ appointment.endDate | format: 'date' : { calendar: calendar() } | async }}\n </ax-subtitle>\n </div>\n }\n }\n </div>\n </ax-popover>\n }\n </div>\n </div>\n</div>\n\n<div class=\"ax-scheduler-day-time-container\">\n <table class=\"ax-scheduler-day-time\" aria-hidden=\"true\" [border]=\"1\">\n @for (time of hoursArray(); track time.date.getTime()) {\n <div>\n {{ time | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n </div>\n }\n </table>\n <div class=\"ax-scheduler-day-table-container\">\n <div class=\"ax-scheduler-day-appointment-container\">\n @for (appointment of singleDayAppointments(); track appointment.id) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"appointment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || appointment.readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n [title]=\"tooltipTemplate() ? '' : appointment.title\"\n class=\"ax-scheduler-day-appointment\"\n [style.width]=\"getAppointmentWidth(appointment.id)\"\n [style.height]=\"getAppointmentHeight(appointment.id)\"\n [style.inset-block-start]=\"getAppointmentTop(appointment.id)\"\n [style.inset-inline-start]=\"getAppointmentLeft(appointment.id)\"\n [ngClass]=\"appointment.cssClass ?? `ax-scheduler-${appointment.priority ?? 'primary'}-periority`\"\n [tooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </ax-title>\n <ax-subtitle>\n {{ appointment.originalStartDate | format: 'time' : { calendar: calendar() } | async }} -\n {{ appointment.originalEndDate | format: 'time' : { calendar: calendar() } | async }}\n </ax-subtitle>\n </div>\n }\n </div>\n <div aria-hidden=\"true\" class=\"ax-scheduler-day-slot\">\n @for (time of hoursArray(); track time.date.getTime()) {\n <div\n axDropZone\n #zone=\"axDropZone\"\n (onElementDrop)=\"handleSingleDayDrop($event, time)\"\n [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n (click)=\"handleSingleSlotEvent($event, time)\"\n (dblclick)=\"handleSingleSlotEvent($event, time)\"\n (contextmenu)=\"handleSingleSlotEvent($event, time)\"\n [attr.data-slot-id]=\"time.format('YYYYMMDD-HHmm')\"\n ></div>\n <div\n axDropZone\n #zone2=\"axDropZone\"\n [class.ax-scheduler-slot-hovered]=\"zone2.isHovered()\"\n (onElementDrop)=\"handleSingleDayDrop($event, time.add('minute', 30))\"\n (click)=\"handleSingleSlotEvent($event, time.add('minute', 30))\"\n (dblclick)=\"handleSingleSlotEvent($event, time.add('minute', 30))\"\n (contextmenu)=\"handleSingleSlotEvent($event, time.add('minute', 30))\"\n [attr.data-slot-id]=\"time.add('minute', 30).format('YYYYMMDD-HHmm')\"\n ></div>\n }\n </div>\n </div>\n</div>\n", styles: ["ax-scheduler-day-view{display:block;position:relative;background-color:inherit;min-width:var(--ax-comp-scheduler-width)}ax-scheduler-day-view .ax-scheduler-day-header{top:0;z-index:3;width:100%;display:flex;position:sticky;background-color:var(--ax-comp-scheduler-all-day-bg, inherit);border-block-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table{z-index:3;position:sticky;inset-inline-start:0;background-color:inherit}ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table div{display:flex;align-items:center;justify-content:center;width:var(--ax-comp-scheduler-basic-view-blocks-width);height:var(--ax-comp-scheduler-basic-view-blocks-height);border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table-container{width:100%;display:flex}ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table-container .ax-scheduler-day-header-appointment-container{gap:1rem;display:flex;width:calc(100% - 2.5rem)}ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table-container .ax-scheduler-day-header-appointment-container .ax-scheduler-header-day-appointment{width:100%;display:flex;overflow:hidden;flex-direction:column;padding-inline:.5rem;justify-content:center;border-radius:calc(var(--ax-sys-border-radius) / 2)}ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table-container .ax-scheduler-day-header-appointment-container .ax-scheduler-day-header-more-tag{display:flex;cursor:pointer;text-wrap:nowrap;flex-direction:column;padding-inline:.5rem;justify-content:center;border-radius:var(--ax-sys-border-radius)}ax-scheduler-day-view .ax-scheduler-day-time-container{width:100%;display:flex;background-color:inherit}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-time{z-index:2;position:sticky;inset-inline-start:0;background-color:var(--ax-comp-scheduler-all-day-bg, inherit)}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-time div{display:block;text-align:center;padding-inline:.5rem;width:var(--ax-comp-scheduler-basic-view-blocks-width);height:calc(var(--ax-comp-scheduler-basic-view-blocks-height) * 2);border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container{width:100%;position:relative}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container .ax-scheduler-day-appointment-container{top:0;position:absolute;width:calc(100% - 2.5rem)}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container .ax-scheduler-day-appointment-container .ax-scheduler-day-appointment{width:100%;display:flex;overflow:hidden;position:absolute;inset-inline-start:0;flex-direction:column;padding-block:.25rem;padding-inline:.5rem;border-radius:calc(var(--ax-sys-border-radius) / 2)}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container .ax-scheduler-day-slot{width:100%}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container .ax-scheduler-day-slot div{height:var(--ax-comp-scheduler-basic-view-blocks-height);display:block;padding-inline:.5rem;border-block-start:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container .ax-scheduler-day-slot div:first-child{border-block-start-width:0}ax-scheduler-day-view:not(.ax-state-readonly) .ax-scheduler-header-day-appointment,ax-scheduler-day-view:not(.ax-state-readonly) .ax-scheduler-day-appointment{cursor:pointer}ax-scheduler-day-view:not(.ax-state-readonly) .ax-scheduler-day-header-table-container,ax-scheduler-day-view:not(.ax-state-readonly) .ax-scheduler-day-slot>div{cursor:pointer;transition-property:background-color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-scheduler-day-view:not(.ax-state-readonly) .ax-scheduler-day-header-table-container:hover,ax-scheduler-day-view:not(.ax-state-readonly) .ax-scheduler-day-slot>div:hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg, var(--ax-sys-color-primary-surface), .1))}ax-scheduler-day-view ax-title{display:flex;justify-content:space-between}ax-scheduler-day-view ax-title .ax-scheduler-action-icon{width:auto;cursor:pointer}\n"] }]
989
+ ], providers: [{ provide: AXComponent, useExisting: AXSchedulerDayViewComponent }], template: "<div class=\"ax-scheduler-day-header\">\n <div class=\"ax-scheduler-day-header-table\" aria-hidden=\"true\">\n <div>\n {{ '@acorex:dateTime.duration.all-day' | translate | async }}\n </div>\n </div>\n <div\n axDropZone\n #zone=\"axDropZone\"\n (onElementDrop)=\"handleAllDayDrop($event)\"\n [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n (click)=\"handleAllDaySlotEvent($event)\"\n (dblclick)=\"handleAllDaySlotEvent($event)\"\n (contextmenu)=\"handleAllDaySlotEvent($event)\"\n class=\"ax-scheduler-day-header-table-container\"\n [attr.data-slot-id]=\"date().format('YYYYMMDD') + '-allday'\"\n >\n <div class=\"ax-scheduler-day-header-appointment-container\">\n @if (allDayAppointments().length) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || allDayAppointments()[0].readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n [dragData]=\"allDayAppointments()[0]\"\n (click)=\"handleAppointmentEvent($event, allDayAppointments()[0])\"\n (dblclick)=\"handleAppointmentEvent($event, allDayAppointments()[0])\"\n (contextmenu)=\"handleAppointmentEvent($event, allDayAppointments()[0])\"\n [title]=\"tooltipTemplate() ? '' : allDayAppointments()[0].title\"\n class=\"ax-scheduler-header-day-appointment\"\n [ngClass]=\"\n allDayAppointments()[0].cssClass ??\n `ax-scheduler-${allDayAppointments()[0].priority ?? 'primary'}-periority`\n \"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ allDayAppointments()[0].title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, allDayAppointments()[0])\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </ax-title>\n <ax-subtitle>\n {{ allDayAppointments()[0].startDate | format: 'date' : { calendar: calendar() } | async }}\n -\n {{ allDayAppointments()[0].endDate | format: 'date' : { calendar: calendar() } | async }}\n </ax-subtitle>\n </div>\n }\n @if (allDayAppointments().length > 1) {\n <div\n #moreAppointments\n class=\"ax-scheduler-day-header-more-tag\"\n [ngClass]=\"\n allDayAppointments()[1].cssClass ??\n `ax-scheduler-${allDayAppointments()[1].priority ?? 'primary'}-periority`\n \"\n >\n {{\n '@acorex:common.general.more-items'\n | translate: { params: { number: allDayAppointments().length - 1 } }\n | async\n }}\n </div>\n <ax-popover [target]=\"moreAppointments\">\n <div class=\"ax-overlay-pane ax-scheduler-popover\" [class.ax-state-readonly]=\"readonly()\" axDropZone>\n @for (appointment of allDayAppointments(); track appointment.id; let first = $first) {\n @if (!first) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"appointment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || appointment.readonly || readonly()\"\n (click)=\"handleAppointmentEvent($event, appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n [title]=\"tooltipTemplate() ? '' : appointment.title\"\n class=\"ax-scheduler-popover-appointment\"\n [ngClass]=\"appointment.cssClass ?? `ax-scheduler-${appointment.priority ?? 'primary'}-periority`\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </ax-title>\n <ax-subtitle>\n {{ appointment.startDate | format: 'date' : { calendar: calendar() } | async }}\n -\n {{ appointment.endDate | format: 'date' : { calendar: calendar() } | async }}\n </ax-subtitle>\n </div>\n }\n }\n </div>\n </ax-popover>\n }\n </div>\n </div>\n</div>\n\n<div class=\"ax-scheduler-day-time-container\">\n <table class=\"ax-scheduler-day-time\" aria-hidden=\"true\" [border]=\"1\">\n @for (time of hoursArray(); track time.date.getTime()) {\n <div>\n {{ time | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n </div>\n }\n </table>\n <div class=\"ax-scheduler-day-table-container\">\n <div class=\"ax-scheduler-day-appointment-container\">\n @for (appointment of singleDayAppointments(); track appointment.id) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"appointment\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || appointment.readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n [title]=\"tooltipTemplate() ? '' : appointment.title\"\n class=\"ax-scheduler-day-appointment\"\n [style.width]=\"getAppointmentWidth(appointment.id)\"\n [style.height]=\"getAppointmentHeight(appointment.id)\"\n [style.inset-block-start]=\"getAppointmentTop(appointment.id)\"\n [style.inset-inline-start]=\"getAppointmentLeft(appointment.id)\"\n [ngClass]=\"appointment.cssClass ?? `ax-scheduler-${appointment.priority ?? 'primary'}-periority`\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </ax-title>\n <ax-subtitle>\n {{ appointment.originalStartDate | format: 'time' : { calendar: calendar() } | async }} -\n {{ appointment.originalEndDate | format: 'time' : { calendar: calendar() } | async }}\n </ax-subtitle>\n </div>\n }\n </div>\n <div aria-hidden=\"true\" class=\"ax-scheduler-day-slot\">\n @for (time of hoursArray(); track time.date.getTime()) {\n <div\n axDropZone\n #zone=\"axDropZone\"\n (onElementDrop)=\"handleSingleDayDrop($event, time)\"\n [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n (click)=\"handleSingleSlotEvent($event, time)\"\n (dblclick)=\"handleSingleSlotEvent($event, time)\"\n (contextmenu)=\"handleSingleSlotEvent($event, time)\"\n [attr.data-slot-id]=\"time.format('YYYYMMDD-HHmm')\"\n ></div>\n <div\n axDropZone\n #zone2=\"axDropZone\"\n [class.ax-scheduler-slot-hovered]=\"zone2.isHovered()\"\n (onElementDrop)=\"handleSingleDayDrop($event, time.add('minute', 30))\"\n (click)=\"handleSingleSlotEvent($event, time.add('minute', 30))\"\n (dblclick)=\"handleSingleSlotEvent($event, time.add('minute', 30))\"\n (contextmenu)=\"handleSingleSlotEvent($event, time.add('minute', 30))\"\n [attr.data-slot-id]=\"time.add('minute', 30).format('YYYYMMDD-HHmm')\"\n ></div>\n }\n </div>\n </div>\n</div>\n", styles: ["ax-scheduler-day-view{display:block;position:relative;background-color:inherit;min-width:var(--ax-comp-scheduler-width)}ax-scheduler-day-view .ax-scheduler-day-header{top:0;z-index:3;width:100%;display:flex;position:sticky;background-color:var(--ax-comp-scheduler-all-day-bg, inherit);border-block-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table{z-index:3;position:sticky;inset-inline-start:0;background-color:inherit}ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table div{display:flex;align-items:center;justify-content:center;width:var(--ax-comp-scheduler-basic-view-blocks-width);height:var(--ax-comp-scheduler-basic-view-blocks-height);border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table-container{width:100%;display:flex}ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table-container .ax-scheduler-day-header-appointment-container{gap:1rem;display:flex;width:calc(100% - 2.5rem)}ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table-container .ax-scheduler-day-header-appointment-container .ax-scheduler-header-day-appointment{width:100%;display:flex;overflow:hidden;flex-direction:column;padding-inline:.5rem;justify-content:center;border-radius:calc(var(--ax-sys-border-radius) / 2)}ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table-container .ax-scheduler-day-header-appointment-container .ax-scheduler-day-header-more-tag{display:flex;cursor:pointer;text-wrap:nowrap;flex-direction:column;padding-inline:.5rem;justify-content:center;border-radius:var(--ax-sys-border-radius)}ax-scheduler-day-view .ax-scheduler-day-time-container{width:100%;display:flex;background-color:inherit}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-time{z-index:2;position:sticky;inset-inline-start:0;background-color:var(--ax-comp-scheduler-all-day-bg, inherit)}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-time div{display:block;text-align:center;padding-inline:.5rem;width:var(--ax-comp-scheduler-basic-view-blocks-width);height:calc(var(--ax-comp-scheduler-basic-view-blocks-height) * 2);border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container{width:100%;position:relative}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container .ax-scheduler-day-appointment-container{top:0;position:absolute;width:calc(100% - 2.5rem)}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container .ax-scheduler-day-appointment-container .ax-scheduler-day-appointment{width:100%;display:flex;overflow:hidden;position:absolute;inset-inline-start:0;flex-direction:column;padding-block:.25rem;padding-inline:.5rem;border-radius:calc(var(--ax-sys-border-radius) / 2)}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container .ax-scheduler-day-slot{width:100%}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container .ax-scheduler-day-slot div{height:var(--ax-comp-scheduler-basic-view-blocks-height);display:block;padding-inline:.5rem;border-block-start:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container .ax-scheduler-day-slot div:first-child{border-block-start-width:0}ax-scheduler-day-view:not(.ax-state-readonly) .ax-scheduler-header-day-appointment,ax-scheduler-day-view:not(.ax-state-readonly) .ax-scheduler-day-appointment{cursor:pointer}ax-scheduler-day-view:not(.ax-state-readonly) .ax-scheduler-day-header-table-container,ax-scheduler-day-view:not(.ax-state-readonly) .ax-scheduler-day-slot>div{cursor:pointer;transition-property:background-color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-scheduler-day-view:not(.ax-state-readonly) .ax-scheduler-day-header-table-container:hover,ax-scheduler-day-view:not(.ax-state-readonly) .ax-scheduler-day-slot>div:hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg, var(--ax-sys-color-primary-surface), .1))}ax-scheduler-day-view ax-title{display:flex;justify-content:space-between}ax-scheduler-day-view ax-title .ax-scheduler-action-icon{width:auto;cursor:pointer}\n"] }]
985
990
  }], propDecorators: { isReadonly: [{
986
991
  type: HostBinding,
987
992
  args: ['class.ax-state-readonly']
@@ -1077,10 +1082,14 @@ class AXSchedulerMonthViewComponent extends NXComponent {
1077
1082
  for (let i = 0; i < totalDaysToGenerate; i++) {
1078
1083
  const isHoliday = this.schedulerService.isHoliday(currentDay) || this.schedulerService.isWeekend(currentDay, this.calendar());
1079
1084
  let holidayTitle = null;
1085
+ let holidayCssClass = null;
1080
1086
  if (isHoliday) {
1081
- const holiday = this.calendarService.holidays.filter((d) => currentDay.equal(d.date, 'day'))[0];
1087
+ const globalHoliday = this.calendarService.holidays.find((d) => currentDay.equal(d.date, 'day'));
1088
+ const internalHoliday = this.schedulerService.internalHoliday().find((d) => currentDay.equal(d.date, 'day'));
1089
+ const holiday = globalHoliday || internalHoliday;
1082
1090
  if (holiday) {
1083
1091
  holidayTitle = holiday.title;
1092
+ holidayCssClass = holiday.cssClass;
1084
1093
  }
1085
1094
  }
1086
1095
  days.push({
@@ -1089,6 +1098,7 @@ class AXSchedulerMonthViewComponent extends NXComponent {
1089
1098
  isToday: currentDay.equal(today, 'day'),
1090
1099
  isHoliday,
1091
1100
  holidayTitle,
1101
+ holidayCssClass,
1092
1102
  });
1093
1103
  currentDay = currentDay.add('day', 1);
1094
1104
  }
@@ -1210,7 +1220,7 @@ class AXSchedulerMonthViewComponent extends NXComponent {
1210
1220
  return this.readonly();
1211
1221
  }
1212
1222
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXSchedulerMonthViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
1213
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: AXSchedulerMonthViewComponent, isStandalone: true, selector: "ax-scheduler-month-view", inputs: { readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, hasActions: { classPropertyName: "hasActions", publicName: "hasActions", isSignal: true, isRequired: false, transformFunction: null }, dragStartDelay: { classPropertyName: "dragStartDelay", publicName: "dragStartDelay", isSignal: true, isRequired: false, transformFunction: null }, calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: true, transformFunction: null }, appointments: { classPropertyName: "appointments", publicName: "appointments", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, 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": "this.isReadonly" } }, providers: [{ provide: AXComponent, useExisting: AXSchedulerMonthViewComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-scheduler-month-container\">\n <!-- Weekday Header -->\n <div class=\"ax-scheduler-month-weekdays\">\n @for (day of daysArray(); track day.date.getTime()) {\n <div class=\"ax-scheduler-month-weekday\">\n {{ day | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n </div>\n }\n </div>\n\n <!-- Calendar Grid -->\n <div class=\"ax-scheduler-month-grid\" [style.gridTemplateRows]=\"gridTemplateRowsStyle()\">\n @for (dayCell of dayCellLayouts(); track dayCell.date.date.getTime()) {\n <div\n axDropZone\n #zone=\"axDropZone\"\n (onElementDrop)=\"handleDrop($event, dayCell.date)\"\n [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n (click)=\"handleSlotEvent($event, dayCell.date)\"\n (dblclick)=\"handleSlotEvent($event, dayCell.date)\"\n (contextmenu)=\"handleSlotEvent($event, dayCell.date)\"\n class=\"ax-scheduler-month-day-cell\"\n [class.ax-state-today]=\"dayCell.isToday\"\n [class.ax-state-holiday]=\"dayCell.isHoliday\"\n [class.ax-other-month]=\"!dayCell.isCurrentMonth\"\n [attr.data-slot-id]=\"dayCell.date.format('YYYYMMDD')\"\n >\n <div class=\"ax-scheduler-month-day-header\">\n <span class=\"ax-scheduler-month-day-number ax-scheduler-truncate\" [axTooltip]=\"dayCell.holidayTitle ?? ''\">\n {{ dayCell.date.dayOfMonth }}\n\n @if (dayCell.holidayTitle) {\n ( {{ dayCell.holidayTitle }} )\n }\n </span>\n </div>\n <div class=\"ax-scheduler-month-day-appointments\">\n <!-- Visible Appointment Segments -->\n @for (segment of dayCell.visibleAppointments; track segment.id + segment.originalStartDate) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"segment\"\n [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 [ngClass]=\"segment.cssClass ?? `ax-scheduler-${segment.priority ?? 'primary'}-periority`\"\n [class.continuation-to-next]=\"segment.isContinuationToNextDay && !segment.allDay\"\n [class.continuation-from-prev]=\"segment.isContinuationFromPreviousDay && !segment.allDay\"\n [tooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\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-overlay-pane ax-scheduler-popover ax-scheduler-month-popover-appointment\"\n >\n @for (segment of dayCell.hiddenAppointments; track segment.id + segment.originalStartDate) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"segment\"\n [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 [ngClass]=\"segment.cssClass ?? `ax-scheduler-${segment.priority ?? 'primary'}-periority`\"\n [tooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\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 | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n -\n {{\n segment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n </span>\n }\n </div>\n }\n </div>\n </ax-popover>\n }\n </div>\n </div>\n }\n </div>\n</div>\n", styles: ["ax-scheduler-month-view{height:100%;display:block;background-color:inherit;min-width:var(--ax-comp-scheduler-width)}ax-scheduler-month-view .ax-scheduler-month-container{height:100%;display:flex;flex-direction:column;background-color:inherit}ax-scheduler-month-view .ax-scheduler-month-weekdays{top:0;z-index:2;width:100%;display:grid;flex-shrink:0;position:sticky;padding:.5rem 0;text-align:center;grid-template-columns:repeat(7,minmax(0,1fr));background-color:var(--ax-comp-scheduler-all-day-bg, inherit);border-bottom:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-month-view .ax-scheduler-month-weekdays .ax-scheduler-month-weekday{font-weight:500;font-size:.875rem}ax-scheduler-month-view .ax-scheduler-month-grid{width:100%;flex-grow:1;display:grid;grid-auto-rows:minmax(5rem,auto);grid-template-columns:repeat(7,minmax(0,1fr));border-left:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell{padding:.25rem;overflow:hidden;position:relative;border-right:1px solid rgba(var(--ax-sys-color-border-lightest-surface));border-bottom:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-other-month{background-color:rgba(var(--ax-sys-color-border-lightest-surface),.2)}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-other-month .ax-scheduler-month-day-number{color:rgba(var(--ax-sys-color-on-surface),.5)}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-state-today{background-color:rgba(var(--ax-sys-color-primary-surface),.05)}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-state-today .ax-scheduler-month-day-number{font-weight:700;color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-state-today.ax-other-month{background-color:rgba(var(--ax-sys-color-primary-surface),.025)}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-state-today.ax-other-month .ax-scheduler-month-day-number{color:rgba(var(--ax-sys-color-primary-surface),.5)}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-state-holiday .ax-scheduler-month-day-number{font-weight:700;color:rgba(var(--ax-sys-color-danger-surface))}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-state-holiday.ax-other-month .ax-scheduler-month-day-number{color:rgba(var(--ax-sys-color-danger-surface),.5)}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-header{text-align:center;margin-bottom:.25rem}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-header .ax-scheduler-month-day-number{max-width:100%;font-size:.875rem;display:inline-block}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments{gap:.125rem;display:flex;overflow:hidden;flex-direction:column}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments .ax-scheduler-month-appointment-chip{overflow:hidden;font-size:.75rem;white-space:nowrap;border-radius:.25rem;text-overflow:ellipsis;padding:.125rem .25rem}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments .ax-scheduler-month-overflow-badge{cursor:pointer;text-align:left;font-size:.75rem;padding:.125rem 0;margin-top:.125rem}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments .ax-scheduler-month-overflow-badge:hover{text-decoration:underline}ax-scheduler-month-view:not(.ax-state-readonly) .ax-scheduler-month-appointment-chip{cursor:pointer}ax-scheduler-month-view:not(.ax-state-readonly) .ax-scheduler-month-day-cell{cursor:pointer;transition-property:background-color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-scheduler-month-view:not(.ax-state-readonly) .ax-scheduler-month-day-cell:hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg, var(--ax-sys-color-primary-surface), .1))}ax-scheduler-month-view:not(.ax-state-readonly) .ax-scheduler-month-day-cell:hover.ax-state-holiday{background-color:rgba(var(--ax-sys-color-danger-surface),.1)}ax-scheduler-month-view .ax-appointment-chip-title{display:flex;justify-content:space-between}ax-scheduler-month-view .ax-appointment-chip-title .ax-scheduler-action-icon{width:auto;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["dragData", "dragDisabled", "dragTransition", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragClonedTemplate", "dragCursor", "dragBoundary", "dragTransitionDuration"], outputs: ["dragPositionChanged"] }, { kind: "directive", type: AXDropZoneDirective, selector: "[axDropZone]", inputs: ["dropZoneGroup"], outputs: ["onElementDrop", "onElementHover"], exportAs: ["axDropZone"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["tooltipDisabled", "axTooltip", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AXFormatPipe, name: "format" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
1223
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: AXSchedulerMonthViewComponent, isStandalone: true, selector: "ax-scheduler-month-view", inputs: { readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, hasActions: { classPropertyName: "hasActions", publicName: "hasActions", isSignal: true, isRequired: false, transformFunction: null }, dragStartDelay: { classPropertyName: "dragStartDelay", publicName: "dragStartDelay", isSignal: true, isRequired: false, transformFunction: null }, calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: true, transformFunction: null }, appointments: { classPropertyName: "appointments", publicName: "appointments", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, 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": "this.isReadonly" } }, providers: [{ provide: AXComponent, useExisting: AXSchedulerMonthViewComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-scheduler-month-container\">\n <!-- Weekday Header -->\n <div class=\"ax-scheduler-month-weekdays\">\n @for (day of daysArray(); track day.date.getTime()) {\n <div class=\"ax-scheduler-month-weekday\">\n {{ day | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n </div>\n }\n </div>\n\n <!-- Calendar Grid -->\n <div class=\"ax-scheduler-month-grid\" [style.gridTemplateRows]=\"gridTemplateRowsStyle()\">\n @for (dayCell of dayCellLayouts(); track dayCell.date.date.getTime()) {\n <div\n axDropZone\n #zone=\"axDropZone\"\n (onElementDrop)=\"handleDrop($event, dayCell.date)\"\n [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n (click)=\"handleSlotEvent($event, dayCell.date)\"\n (dblclick)=\"handleSlotEvent($event, dayCell.date)\"\n (contextmenu)=\"handleSlotEvent($event, dayCell.date)\"\n class=\"ax-scheduler-month-day-cell {{\n dayCell.isHoliday ? (dayCell.holidayCssClass ?? 'ax-state-holiday') : ''\n }}\"\n [class.ax-state-today]=\"dayCell.isToday\"\n [class.ax-other-month]=\"!dayCell.isCurrentMonth\"\n [attr.data-slot-id]=\"dayCell.date.format('YYYYMMDD')\"\n >\n <div class=\"ax-scheduler-month-day-header\">\n <span class=\"ax-scheduler-month-day-number ax-scheduler-truncate\" [axTooltip]=\"dayCell.holidayTitle ?? ''\">\n {{ dayCell.date.dayOfMonth }}\n\n @if (dayCell.holidayTitle) {\n ( {{ dayCell.holidayTitle }} )\n }\n </span>\n </div>\n <div class=\"ax-scheduler-month-day-appointments\">\n <!-- Visible Appointment Segments -->\n @for (segment of dayCell.visibleAppointments; track segment.id + segment.originalStartDate) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"segment\"\n [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 [ngClass]=\"segment.cssClass ?? `ax-scheduler-${segment.priority ?? 'primary'}-periority`\"\n [class.continuation-to-next]=\"segment.isContinuationToNextDay && !segment.allDay\"\n [class.continuation-from-prev]=\"segment.isContinuationFromPreviousDay && !segment.allDay\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\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-overlay-pane ax-scheduler-popover ax-scheduler-month-popover-appointment\"\n >\n @for (segment of dayCell.hiddenAppointments; track segment.id + segment.originalStartDate) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"segment\"\n [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 [ngClass]=\"segment.cssClass ?? `ax-scheduler-${segment.priority ?? 'primary'}-periority`\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\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 | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n -\n {{\n segment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n </span>\n }\n </div>\n }\n </div>\n </ax-popover>\n }\n </div>\n </div>\n }\n </div>\n</div>\n", styles: ["ax-scheduler-month-view{height:100%;display:block;background-color:inherit;min-width:var(--ax-comp-scheduler-width)}ax-scheduler-month-view .ax-scheduler-month-container{height:100%;display:flex;flex-direction:column;background-color:inherit}ax-scheduler-month-view .ax-scheduler-month-weekdays{top:0;z-index:2;width:100%;display:grid;flex-shrink:0;position:sticky;padding:.5rem 0;text-align:center;grid-template-columns:repeat(7,minmax(0,1fr));background-color:var(--ax-comp-scheduler-all-day-bg, inherit);border-bottom:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-month-view .ax-scheduler-month-weekdays .ax-scheduler-month-weekday{font-weight:500;font-size:.875rem}ax-scheduler-month-view .ax-scheduler-month-grid{width:100%;flex-grow:1;display:grid;grid-auto-rows:minmax(5rem,auto);grid-template-columns:repeat(7,minmax(0,1fr));border-left:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell{padding:.25rem;overflow:hidden;position:relative;border-right:1px solid rgba(var(--ax-sys-color-border-lightest-surface));border-bottom:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-other-month{background-color:rgba(var(--ax-sys-color-border-lightest-surface),.2)}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-other-month .ax-scheduler-month-day-number{color:rgba(var(--ax-sys-color-on-surface),.5)}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-state-today{background-color:rgba(var(--ax-sys-color-primary-surface),.05)}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-state-today .ax-scheduler-month-day-number{font-weight:700;color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-state-today.ax-other-month{background-color:rgba(var(--ax-sys-color-primary-surface),.025)}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-state-today.ax-other-month .ax-scheduler-month-day-number{color:rgba(var(--ax-sys-color-primary-surface),.5)}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-state-holiday .ax-scheduler-month-day-number{font-weight:700;color:rgba(var(--ax-sys-color-danger-surface))}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-state-holiday.ax-other-month .ax-scheduler-month-day-number{color:rgba(var(--ax-sys-color-danger-surface),.5)}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-header{text-align:center;margin-bottom:.25rem}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-header .ax-scheduler-month-day-number{max-width:100%;font-size:.875rem;display:inline-block}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments{gap:.125rem;display:flex;overflow:hidden;flex-direction:column}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments .ax-scheduler-month-appointment-chip{overflow:hidden;font-size:.75rem;white-space:nowrap;border-radius:.25rem;text-overflow:ellipsis;padding:.125rem .25rem}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments .ax-scheduler-month-overflow-badge{cursor:pointer;text-align:left;font-size:.75rem;padding:.125rem 0;margin-top:.125rem}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments .ax-scheduler-month-overflow-badge:hover{text-decoration:underline}ax-scheduler-month-view:not(.ax-state-readonly) .ax-scheduler-month-appointment-chip{cursor:pointer}ax-scheduler-month-view:not(.ax-state-readonly) .ax-scheduler-month-day-cell{cursor:pointer;transition-property:background-color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-scheduler-month-view:not(.ax-state-readonly) .ax-scheduler-month-day-cell:hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg, var(--ax-sys-color-primary-surface), .1))}ax-scheduler-month-view:not(.ax-state-readonly) .ax-scheduler-month-day-cell:hover.ax-state-holiday{background-color:rgba(var(--ax-sys-color-danger-surface),.1)}ax-scheduler-month-view .ax-appointment-chip-title{display:flex;justify-content:space-between}ax-scheduler-month-view .ax-appointment-chip-title .ax-scheduler-action-icon{width:auto;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["dragData", "dragDisabled", "dragTransition", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragClonedTemplate", "dragCursor", "dragBoundary", "dragTransitionDuration"], outputs: ["dragPositionChanged"] }, { kind: "directive", type: AXDropZoneDirective, selector: "[axDropZone]", inputs: ["dropZoneGroup"], outputs: ["onElementDrop", "onElementHover"], exportAs: ["axDropZone"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AXFormatPipe, name: "format" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
1214
1224
  }
1215
1225
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXSchedulerMonthViewComponent, decorators: [{
1216
1226
  type: Component,
@@ -1226,7 +1236,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
1226
1236
  AXTooltipDirective,
1227
1237
  AXDecoratorIconComponent,
1228
1238
  AXTooltipDirective,
1229
- ], providers: [{ provide: AXComponent, useExisting: AXSchedulerMonthViewComponent }], template: "<div class=\"ax-scheduler-month-container\">\n <!-- Weekday Header -->\n <div class=\"ax-scheduler-month-weekdays\">\n @for (day of daysArray(); track day.date.getTime()) {\n <div class=\"ax-scheduler-month-weekday\">\n {{ day | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n </div>\n }\n </div>\n\n <!-- Calendar Grid -->\n <div class=\"ax-scheduler-month-grid\" [style.gridTemplateRows]=\"gridTemplateRowsStyle()\">\n @for (dayCell of dayCellLayouts(); track dayCell.date.date.getTime()) {\n <div\n axDropZone\n #zone=\"axDropZone\"\n (onElementDrop)=\"handleDrop($event, dayCell.date)\"\n [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n (click)=\"handleSlotEvent($event, dayCell.date)\"\n (dblclick)=\"handleSlotEvent($event, dayCell.date)\"\n (contextmenu)=\"handleSlotEvent($event, dayCell.date)\"\n class=\"ax-scheduler-month-day-cell\"\n [class.ax-state-today]=\"dayCell.isToday\"\n [class.ax-state-holiday]=\"dayCell.isHoliday\"\n [class.ax-other-month]=\"!dayCell.isCurrentMonth\"\n [attr.data-slot-id]=\"dayCell.date.format('YYYYMMDD')\"\n >\n <div class=\"ax-scheduler-month-day-header\">\n <span class=\"ax-scheduler-month-day-number ax-scheduler-truncate\" [axTooltip]=\"dayCell.holidayTitle ?? ''\">\n {{ dayCell.date.dayOfMonth }}\n\n @if (dayCell.holidayTitle) {\n ( {{ dayCell.holidayTitle }} )\n }\n </span>\n </div>\n <div class=\"ax-scheduler-month-day-appointments\">\n <!-- Visible Appointment Segments -->\n @for (segment of dayCell.visibleAppointments; track segment.id + segment.originalStartDate) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"segment\"\n [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 [ngClass]=\"segment.cssClass ?? `ax-scheduler-${segment.priority ?? 'primary'}-periority`\"\n [class.continuation-to-next]=\"segment.isContinuationToNextDay && !segment.allDay\"\n [class.continuation-from-prev]=\"segment.isContinuationFromPreviousDay && !segment.allDay\"\n [tooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\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-overlay-pane ax-scheduler-popover ax-scheduler-month-popover-appointment\"\n >\n @for (segment of dayCell.hiddenAppointments; track segment.id + segment.originalStartDate) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"segment\"\n [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 [ngClass]=\"segment.cssClass ?? `ax-scheduler-${segment.priority ?? 'primary'}-periority`\"\n [tooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\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 | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n -\n {{\n segment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n </span>\n }\n </div>\n }\n </div>\n </ax-popover>\n }\n </div>\n </div>\n }\n </div>\n</div>\n", styles: ["ax-scheduler-month-view{height:100%;display:block;background-color:inherit;min-width:var(--ax-comp-scheduler-width)}ax-scheduler-month-view .ax-scheduler-month-container{height:100%;display:flex;flex-direction:column;background-color:inherit}ax-scheduler-month-view .ax-scheduler-month-weekdays{top:0;z-index:2;width:100%;display:grid;flex-shrink:0;position:sticky;padding:.5rem 0;text-align:center;grid-template-columns:repeat(7,minmax(0,1fr));background-color:var(--ax-comp-scheduler-all-day-bg, inherit);border-bottom:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-month-view .ax-scheduler-month-weekdays .ax-scheduler-month-weekday{font-weight:500;font-size:.875rem}ax-scheduler-month-view .ax-scheduler-month-grid{width:100%;flex-grow:1;display:grid;grid-auto-rows:minmax(5rem,auto);grid-template-columns:repeat(7,minmax(0,1fr));border-left:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell{padding:.25rem;overflow:hidden;position:relative;border-right:1px solid rgba(var(--ax-sys-color-border-lightest-surface));border-bottom:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-other-month{background-color:rgba(var(--ax-sys-color-border-lightest-surface),.2)}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-other-month .ax-scheduler-month-day-number{color:rgba(var(--ax-sys-color-on-surface),.5)}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-state-today{background-color:rgba(var(--ax-sys-color-primary-surface),.05)}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-state-today .ax-scheduler-month-day-number{font-weight:700;color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-state-today.ax-other-month{background-color:rgba(var(--ax-sys-color-primary-surface),.025)}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-state-today.ax-other-month .ax-scheduler-month-day-number{color:rgba(var(--ax-sys-color-primary-surface),.5)}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-state-holiday .ax-scheduler-month-day-number{font-weight:700;color:rgba(var(--ax-sys-color-danger-surface))}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-state-holiday.ax-other-month .ax-scheduler-month-day-number{color:rgba(var(--ax-sys-color-danger-surface),.5)}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-header{text-align:center;margin-bottom:.25rem}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-header .ax-scheduler-month-day-number{max-width:100%;font-size:.875rem;display:inline-block}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments{gap:.125rem;display:flex;overflow:hidden;flex-direction:column}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments .ax-scheduler-month-appointment-chip{overflow:hidden;font-size:.75rem;white-space:nowrap;border-radius:.25rem;text-overflow:ellipsis;padding:.125rem .25rem}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments .ax-scheduler-month-overflow-badge{cursor:pointer;text-align:left;font-size:.75rem;padding:.125rem 0;margin-top:.125rem}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments .ax-scheduler-month-overflow-badge:hover{text-decoration:underline}ax-scheduler-month-view:not(.ax-state-readonly) .ax-scheduler-month-appointment-chip{cursor:pointer}ax-scheduler-month-view:not(.ax-state-readonly) .ax-scheduler-month-day-cell{cursor:pointer;transition-property:background-color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-scheduler-month-view:not(.ax-state-readonly) .ax-scheduler-month-day-cell:hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg, var(--ax-sys-color-primary-surface), .1))}ax-scheduler-month-view:not(.ax-state-readonly) .ax-scheduler-month-day-cell:hover.ax-state-holiday{background-color:rgba(var(--ax-sys-color-danger-surface),.1)}ax-scheduler-month-view .ax-appointment-chip-title{display:flex;justify-content:space-between}ax-scheduler-month-view .ax-appointment-chip-title .ax-scheduler-action-icon{width:auto;cursor:pointer}\n"] }]
1239
+ ], providers: [{ provide: AXComponent, useExisting: AXSchedulerMonthViewComponent }], template: "<div class=\"ax-scheduler-month-container\">\n <!-- Weekday Header -->\n <div class=\"ax-scheduler-month-weekdays\">\n @for (day of daysArray(); track day.date.getTime()) {\n <div class=\"ax-scheduler-month-weekday\">\n {{ day | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n </div>\n }\n </div>\n\n <!-- Calendar Grid -->\n <div class=\"ax-scheduler-month-grid\" [style.gridTemplateRows]=\"gridTemplateRowsStyle()\">\n @for (dayCell of dayCellLayouts(); track dayCell.date.date.getTime()) {\n <div\n axDropZone\n #zone=\"axDropZone\"\n (onElementDrop)=\"handleDrop($event, dayCell.date)\"\n [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n (click)=\"handleSlotEvent($event, dayCell.date)\"\n (dblclick)=\"handleSlotEvent($event, dayCell.date)\"\n (contextmenu)=\"handleSlotEvent($event, dayCell.date)\"\n class=\"ax-scheduler-month-day-cell {{\n dayCell.isHoliday ? (dayCell.holidayCssClass ?? 'ax-state-holiday') : ''\n }}\"\n [class.ax-state-today]=\"dayCell.isToday\"\n [class.ax-other-month]=\"!dayCell.isCurrentMonth\"\n [attr.data-slot-id]=\"dayCell.date.format('YYYYMMDD')\"\n >\n <div class=\"ax-scheduler-month-day-header\">\n <span class=\"ax-scheduler-month-day-number ax-scheduler-truncate\" [axTooltip]=\"dayCell.holidayTitle ?? ''\">\n {{ dayCell.date.dayOfMonth }}\n\n @if (dayCell.holidayTitle) {\n ( {{ dayCell.holidayTitle }} )\n }\n </span>\n </div>\n <div class=\"ax-scheduler-month-day-appointments\">\n <!-- Visible Appointment Segments -->\n @for (segment of dayCell.visibleAppointments; track segment.id + segment.originalStartDate) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"segment\"\n [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 [ngClass]=\"segment.cssClass ?? `ax-scheduler-${segment.priority ?? 'primary'}-periority`\"\n [class.continuation-to-next]=\"segment.isContinuationToNextDay && !segment.allDay\"\n [class.continuation-from-prev]=\"segment.isContinuationFromPreviousDay && !segment.allDay\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\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-overlay-pane ax-scheduler-popover ax-scheduler-month-popover-appointment\"\n >\n @for (segment of dayCell.hiddenAppointments; track segment.id + segment.originalStartDate) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"segment\"\n [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 [ngClass]=\"segment.cssClass ?? `ax-scheduler-${segment.priority ?? 'primary'}-periority`\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\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 | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n -\n {{\n segment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n </span>\n }\n </div>\n }\n </div>\n </ax-popover>\n }\n </div>\n </div>\n }\n </div>\n</div>\n", styles: ["ax-scheduler-month-view{height:100%;display:block;background-color:inherit;min-width:var(--ax-comp-scheduler-width)}ax-scheduler-month-view .ax-scheduler-month-container{height:100%;display:flex;flex-direction:column;background-color:inherit}ax-scheduler-month-view .ax-scheduler-month-weekdays{top:0;z-index:2;width:100%;display:grid;flex-shrink:0;position:sticky;padding:.5rem 0;text-align:center;grid-template-columns:repeat(7,minmax(0,1fr));background-color:var(--ax-comp-scheduler-all-day-bg, inherit);border-bottom:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-month-view .ax-scheduler-month-weekdays .ax-scheduler-month-weekday{font-weight:500;font-size:.875rem}ax-scheduler-month-view .ax-scheduler-month-grid{width:100%;flex-grow:1;display:grid;grid-auto-rows:minmax(5rem,auto);grid-template-columns:repeat(7,minmax(0,1fr));border-left:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell{padding:.25rem;overflow:hidden;position:relative;border-right:1px solid rgba(var(--ax-sys-color-border-lightest-surface));border-bottom:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-other-month{background-color:rgba(var(--ax-sys-color-border-lightest-surface),.2)}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-other-month .ax-scheduler-month-day-number{color:rgba(var(--ax-sys-color-on-surface),.5)}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-state-today{background-color:rgba(var(--ax-sys-color-primary-surface),.05)}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-state-today .ax-scheduler-month-day-number{font-weight:700;color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-state-today.ax-other-month{background-color:rgba(var(--ax-sys-color-primary-surface),.025)}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-state-today.ax-other-month .ax-scheduler-month-day-number{color:rgba(var(--ax-sys-color-primary-surface),.5)}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-state-holiday .ax-scheduler-month-day-number{font-weight:700;color:rgba(var(--ax-sys-color-danger-surface))}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-state-holiday.ax-other-month .ax-scheduler-month-day-number{color:rgba(var(--ax-sys-color-danger-surface),.5)}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-header{text-align:center;margin-bottom:.25rem}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-header .ax-scheduler-month-day-number{max-width:100%;font-size:.875rem;display:inline-block}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments{gap:.125rem;display:flex;overflow:hidden;flex-direction:column}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments .ax-scheduler-month-appointment-chip{overflow:hidden;font-size:.75rem;white-space:nowrap;border-radius:.25rem;text-overflow:ellipsis;padding:.125rem .25rem}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments .ax-scheduler-month-overflow-badge{cursor:pointer;text-align:left;font-size:.75rem;padding:.125rem 0;margin-top:.125rem}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments .ax-scheduler-month-overflow-badge:hover{text-decoration:underline}ax-scheduler-month-view:not(.ax-state-readonly) .ax-scheduler-month-appointment-chip{cursor:pointer}ax-scheduler-month-view:not(.ax-state-readonly) .ax-scheduler-month-day-cell{cursor:pointer;transition-property:background-color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-scheduler-month-view:not(.ax-state-readonly) .ax-scheduler-month-day-cell:hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg, var(--ax-sys-color-primary-surface), .1))}ax-scheduler-month-view:not(.ax-state-readonly) .ax-scheduler-month-day-cell:hover.ax-state-holiday{background-color:rgba(var(--ax-sys-color-danger-surface),.1)}ax-scheduler-month-view .ax-appointment-chip-title{display:flex;justify-content:space-between}ax-scheduler-month-view .ax-appointment-chip-title .ax-scheduler-action-icon{width:auto;cursor:pointer}\n"] }]
1230
1240
  }], propDecorators: { isReadonly: [{
1231
1241
  type: HostBinding,
1232
1242
  args: ['class.ax-state-readonly']
@@ -1411,7 +1421,7 @@ class AXSchedulerTimelineDayViewComponent extends NXComponent {
1411
1421
  return this.readonly();
1412
1422
  }
1413
1423
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXSchedulerTimelineDayViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
1414
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: AXSchedulerTimelineDayViewComponent, isStandalone: true, selector: "ax-scheduler-timeline-day-view", inputs: { readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, hasActions: { classPropertyName: "hasActions", publicName: "hasActions", isSignal: true, isRequired: false, transformFunction: null }, dragStartDelay: { classPropertyName: "dragStartDelay", publicName: "dragStartDelay", isSignal: true, isRequired: false, transformFunction: null }, calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, 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 }, appointments: { classPropertyName: "appointments", publicName: "appointments", isSignal: true, isRequired: false, transformFunction: null }, tooltipTemplate: { classPropertyName: "tooltipTemplate", publicName: "tooltipTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { slotClickedInternal: "slotClickedInternal", slotDblClickedInternal: "slotDblClickedInternal", slotRightClickedInternal: "slotRightClickedInternal", appointmentClickedInternal: "appointmentClickedInternal", appointmentDblClickedInternal: "appointmentDblClickedInternal", appointmentRightClickedInternal: "appointmentRightClickedInternal", onActionClickInternal: "onActionClickInternal", onAppointmentDropInternal: "onAppointmentDropInternal" }, host: { properties: { "class.ax-state-readonly": "this.isReadonly" } }, providers: [{ provide: AXComponent, useExisting: AXSchedulerTimelineDayViewComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-scheduler-timeline-header\">\n @for (hour of hoursArray(); track hour.date.getTime()) {\n <div class=\"ax-scheduler-timeline-header-hours\">\n <span>{{ hour | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}</span>\n </div>\n }\n</div>\n\n<div class=\"ax-scheduler-timeline-content\">\n <div class=\"ax-scheduler-timeline-appointment-container\">\n @for (layout of appointmentLayouts(); track layout.appointment.id) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || layout.appointment.readonly || readonly()\"\n [dragData]=\"layout.appointment\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, layout.appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, layout.appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, layout.appointment)\"\n [title]=\"tooltipTemplate() ? '' : layout.appointment.title\"\n [style.width]=\"layout.layoutWidth\"\n [style.height]=\"layout.layoutHeight\"\n class=\"ax-scheduler-timeline-appointment\"\n [style.insetBlockStart]=\"layout.layoutTop\"\n [style.insetInlineStart]=\"layout.layoutLeft\"\n [ngClass]=\"layout.appointment.cssClass ?? `ax-scheduler-${layout.appointment.priority ?? 'primary'}-periority`\"\n [tooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ layout.appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, layout.appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </ax-title>\n <ax-subtitle>\n {{\n layout.appointment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n -\n {{ layout.appointment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n </ax-subtitle>\n </div>\n }\n </div>\n <div class=\"ax-scheduler-timeline-slot-row\" aria-hidden=\"true\">\n @for (time of hoursArray(); track time.date.getTime()) {\n <div\n axDropZone\n #zone=\"axDropZone\"\n (onElementDrop)=\"handleDrop($event, time)\"\n [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n class=\"ax-scheduler-timeline-slot-cell\"\n (click)=\"handleSlotEvent($event, time)\"\n (dblclick)=\"handleSlotEvent($event, time)\"\n (contextmenu)=\"handleSlotEvent($event, time)\"\n [attr.data-slot-id]=\"time.format('YYYYMMDD-HHmm')\"\n ></div>\n }\n </div>\n</div>\n", styles: ["ax-scheduler-timeline-day-view{height:100%;position:relative;display:inline-flex;flex-direction:column;background-color:inherit}ax-scheduler-timeline-day-view .ax-scheduler-timeline-header{top:0;z-index:2;width:100%;display:flex;position:sticky;background-color:var(--ax-comp-scheduler-all-day-bg, inherit);border-block-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-timeline-day-view .ax-scheduler-timeline-header .ax-scheduler-timeline-header-hours{position:relative;padding:.25rem .5rem;width:var(--ax-comp-scheduler-timeline-view-blocks-width);border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-timeline-day-view .ax-scheduler-timeline-header .ax-scheduler-timeline-header-hours span{position:sticky;inset-inline-start:.5rem}ax-scheduler-timeline-day-view .ax-scheduler-timeline-content{height:100%;position:relative}ax-scheduler-timeline-day-view .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container{top:0;width:100%;height:100%;position:absolute}ax-scheduler-timeline-day-view .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-timeline-appointment{width:100%;display:flex;overflow:hidden;position:absolute;inset-inline-start:0;flex-direction:column;padding-block:.25rem;padding-inline:.5rem;border-radius:calc(var(--ax-sys-border-radius) / 2)}ax-scheduler-timeline-day-view .ax-scheduler-timeline-content .ax-scheduler-timeline-slot-row{height:100%;display:flex}ax-scheduler-timeline-day-view .ax-scheduler-timeline-content .ax-scheduler-timeline-slot-row .ax-scheduler-timeline-slot-cell{width:var(--ax-comp-scheduler-timeline-view-blocks-width);border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-timeline-day-view:not(.ax-state-readonly) .ax-scheduler-timeline-appointment{z-index:1;cursor:pointer}ax-scheduler-timeline-day-view:not(.ax-state-readonly) .ax-scheduler-timeline-slot-cell{z-index:0;cursor:pointer;transition-property:background-color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-scheduler-timeline-day-view:not(.ax-state-readonly) .ax-scheduler-timeline-slot-cell:hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg, var(--ax-sys-color-primary-surface), .1))}ax-scheduler-timeline-day-view ax-title{display:flex;justify-content:space-between}ax-scheduler-timeline-day-view ax-title .ax-scheduler-action-icon{width:auto;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["dragData", "dragDisabled", "dragTransition", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragClonedTemplate", "dragCursor", "dragBoundary", "dragTransitionDuration"], outputs: ["dragPositionChanged"] }, { kind: "directive", type: AXDropZoneDirective, selector: "[axDropZone]", inputs: ["dropZoneGroup"], outputs: ["onElementDrop", "onElementHover"], exportAs: ["axDropZone"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["tooltipDisabled", "axTooltip", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "pipe", type: AXFormatPipe, name: "format" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
1424
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: AXSchedulerTimelineDayViewComponent, isStandalone: true, selector: "ax-scheduler-timeline-day-view", inputs: { readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, hasActions: { classPropertyName: "hasActions", publicName: "hasActions", isSignal: true, isRequired: false, transformFunction: null }, dragStartDelay: { classPropertyName: "dragStartDelay", publicName: "dragStartDelay", isSignal: true, isRequired: false, transformFunction: null }, calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, 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 }, appointments: { classPropertyName: "appointments", publicName: "appointments", isSignal: true, isRequired: false, transformFunction: null }, tooltipTemplate: { classPropertyName: "tooltipTemplate", publicName: "tooltipTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { slotClickedInternal: "slotClickedInternal", slotDblClickedInternal: "slotDblClickedInternal", slotRightClickedInternal: "slotRightClickedInternal", appointmentClickedInternal: "appointmentClickedInternal", appointmentDblClickedInternal: "appointmentDblClickedInternal", appointmentRightClickedInternal: "appointmentRightClickedInternal", onActionClickInternal: "onActionClickInternal", onAppointmentDropInternal: "onAppointmentDropInternal" }, host: { properties: { "class.ax-state-readonly": "this.isReadonly" } }, providers: [{ provide: AXComponent, useExisting: AXSchedulerTimelineDayViewComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-scheduler-timeline-header\">\n @for (hour of hoursArray(); track hour.date.getTime()) {\n <div class=\"ax-scheduler-timeline-header-hours\">\n <span>{{ hour | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}</span>\n </div>\n }\n</div>\n\n<div class=\"ax-scheduler-timeline-content\">\n <div class=\"ax-scheduler-timeline-appointment-container\">\n @for (layout of appointmentLayouts(); track layout.appointment.id) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || layout.appointment.readonly || readonly()\"\n [dragData]=\"layout.appointment\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, layout.appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, layout.appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, layout.appointment)\"\n [title]=\"tooltipTemplate() ? '' : layout.appointment.title\"\n [style.width]=\"layout.layoutWidth\"\n [style.height]=\"layout.layoutHeight\"\n class=\"ax-scheduler-timeline-appointment\"\n [style.insetBlockStart]=\"layout.layoutTop\"\n [style.insetInlineStart]=\"layout.layoutLeft\"\n [ngClass]=\"layout.appointment.cssClass ?? `ax-scheduler-${layout.appointment.priority ?? 'primary'}-periority`\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ layout.appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, layout.appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </ax-title>\n <ax-subtitle>\n {{\n layout.appointment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n -\n {{ layout.appointment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n </ax-subtitle>\n </div>\n }\n </div>\n <div class=\"ax-scheduler-timeline-slot-row\" aria-hidden=\"true\">\n @for (time of hoursArray(); track time.date.getTime()) {\n <div\n axDropZone\n #zone=\"axDropZone\"\n (onElementDrop)=\"handleDrop($event, time)\"\n [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n class=\"ax-scheduler-timeline-slot-cell\"\n (click)=\"handleSlotEvent($event, time)\"\n (dblclick)=\"handleSlotEvent($event, time)\"\n (contextmenu)=\"handleSlotEvent($event, time)\"\n [attr.data-slot-id]=\"time.format('YYYYMMDD-HHmm')\"\n ></div>\n }\n </div>\n</div>\n", styles: ["ax-scheduler-timeline-day-view{height:100%;position:relative;display:inline-flex;flex-direction:column;background-color:inherit}ax-scheduler-timeline-day-view .ax-scheduler-timeline-header{top:0;z-index:2;width:100%;display:flex;position:sticky;background-color:var(--ax-comp-scheduler-all-day-bg, inherit);border-block-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-timeline-day-view .ax-scheduler-timeline-header .ax-scheduler-timeline-header-hours{position:relative;padding:.25rem .5rem;width:var(--ax-comp-scheduler-timeline-view-blocks-width);border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-timeline-day-view .ax-scheduler-timeline-header .ax-scheduler-timeline-header-hours span{position:sticky;inset-inline-start:.5rem}ax-scheduler-timeline-day-view .ax-scheduler-timeline-content{height:100%;position:relative}ax-scheduler-timeline-day-view .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container{top:0;width:100%;height:100%;position:absolute}ax-scheduler-timeline-day-view .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-timeline-appointment{width:100%;display:flex;overflow:hidden;position:absolute;inset-inline-start:0;flex-direction:column;padding-block:.25rem;padding-inline:.5rem;border-radius:calc(var(--ax-sys-border-radius) / 2)}ax-scheduler-timeline-day-view .ax-scheduler-timeline-content .ax-scheduler-timeline-slot-row{height:100%;display:flex}ax-scheduler-timeline-day-view .ax-scheduler-timeline-content .ax-scheduler-timeline-slot-row .ax-scheduler-timeline-slot-cell{width:var(--ax-comp-scheduler-timeline-view-blocks-width);border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-timeline-day-view:not(.ax-state-readonly) .ax-scheduler-timeline-appointment{z-index:1;cursor:pointer}ax-scheduler-timeline-day-view:not(.ax-state-readonly) .ax-scheduler-timeline-slot-cell{z-index:0;cursor:pointer;transition-property:background-color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-scheduler-timeline-day-view:not(.ax-state-readonly) .ax-scheduler-timeline-slot-cell:hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg, var(--ax-sys-color-primary-surface), .1))}ax-scheduler-timeline-day-view ax-title{display:flex;justify-content:space-between}ax-scheduler-timeline-day-view ax-title .ax-scheduler-action-icon{width:auto;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["dragData", "dragDisabled", "dragTransition", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragClonedTemplate", "dragCursor", "dragBoundary", "dragTransitionDuration"], outputs: ["dragPositionChanged"] }, { kind: "directive", type: AXDropZoneDirective, selector: "[axDropZone]", inputs: ["dropZoneGroup"], outputs: ["onElementDrop", "onElementHover"], exportAs: ["axDropZone"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "pipe", type: AXFormatPipe, name: "format" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
1415
1425
  }
1416
1426
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXSchedulerTimelineDayViewComponent, decorators: [{
1417
1427
  type: Component,
@@ -1424,7 +1434,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
1424
1434
  AXDropZoneDirective,
1425
1435
  AXDecoratorIconComponent,
1426
1436
  AXTooltipDirective,
1427
- ], providers: [{ provide: AXComponent, useExisting: AXSchedulerTimelineDayViewComponent }], template: "<div class=\"ax-scheduler-timeline-header\">\n @for (hour of hoursArray(); track hour.date.getTime()) {\n <div class=\"ax-scheduler-timeline-header-hours\">\n <span>{{ hour | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}</span>\n </div>\n }\n</div>\n\n<div class=\"ax-scheduler-timeline-content\">\n <div class=\"ax-scheduler-timeline-appointment-container\">\n @for (layout of appointmentLayouts(); track layout.appointment.id) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || layout.appointment.readonly || readonly()\"\n [dragData]=\"layout.appointment\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, layout.appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, layout.appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, layout.appointment)\"\n [title]=\"tooltipTemplate() ? '' : layout.appointment.title\"\n [style.width]=\"layout.layoutWidth\"\n [style.height]=\"layout.layoutHeight\"\n class=\"ax-scheduler-timeline-appointment\"\n [style.insetBlockStart]=\"layout.layoutTop\"\n [style.insetInlineStart]=\"layout.layoutLeft\"\n [ngClass]=\"layout.appointment.cssClass ?? `ax-scheduler-${layout.appointment.priority ?? 'primary'}-periority`\"\n [tooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ layout.appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, layout.appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </ax-title>\n <ax-subtitle>\n {{\n layout.appointment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n -\n {{ layout.appointment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n </ax-subtitle>\n </div>\n }\n </div>\n <div class=\"ax-scheduler-timeline-slot-row\" aria-hidden=\"true\">\n @for (time of hoursArray(); track time.date.getTime()) {\n <div\n axDropZone\n #zone=\"axDropZone\"\n (onElementDrop)=\"handleDrop($event, time)\"\n [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n class=\"ax-scheduler-timeline-slot-cell\"\n (click)=\"handleSlotEvent($event, time)\"\n (dblclick)=\"handleSlotEvent($event, time)\"\n (contextmenu)=\"handleSlotEvent($event, time)\"\n [attr.data-slot-id]=\"time.format('YYYYMMDD-HHmm')\"\n ></div>\n }\n </div>\n</div>\n", styles: ["ax-scheduler-timeline-day-view{height:100%;position:relative;display:inline-flex;flex-direction:column;background-color:inherit}ax-scheduler-timeline-day-view .ax-scheduler-timeline-header{top:0;z-index:2;width:100%;display:flex;position:sticky;background-color:var(--ax-comp-scheduler-all-day-bg, inherit);border-block-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-timeline-day-view .ax-scheduler-timeline-header .ax-scheduler-timeline-header-hours{position:relative;padding:.25rem .5rem;width:var(--ax-comp-scheduler-timeline-view-blocks-width);border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-timeline-day-view .ax-scheduler-timeline-header .ax-scheduler-timeline-header-hours span{position:sticky;inset-inline-start:.5rem}ax-scheduler-timeline-day-view .ax-scheduler-timeline-content{height:100%;position:relative}ax-scheduler-timeline-day-view .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container{top:0;width:100%;height:100%;position:absolute}ax-scheduler-timeline-day-view .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-timeline-appointment{width:100%;display:flex;overflow:hidden;position:absolute;inset-inline-start:0;flex-direction:column;padding-block:.25rem;padding-inline:.5rem;border-radius:calc(var(--ax-sys-border-radius) / 2)}ax-scheduler-timeline-day-view .ax-scheduler-timeline-content .ax-scheduler-timeline-slot-row{height:100%;display:flex}ax-scheduler-timeline-day-view .ax-scheduler-timeline-content .ax-scheduler-timeline-slot-row .ax-scheduler-timeline-slot-cell{width:var(--ax-comp-scheduler-timeline-view-blocks-width);border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-timeline-day-view:not(.ax-state-readonly) .ax-scheduler-timeline-appointment{z-index:1;cursor:pointer}ax-scheduler-timeline-day-view:not(.ax-state-readonly) .ax-scheduler-timeline-slot-cell{z-index:0;cursor:pointer;transition-property:background-color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-scheduler-timeline-day-view:not(.ax-state-readonly) .ax-scheduler-timeline-slot-cell:hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg, var(--ax-sys-color-primary-surface), .1))}ax-scheduler-timeline-day-view ax-title{display:flex;justify-content:space-between}ax-scheduler-timeline-day-view ax-title .ax-scheduler-action-icon{width:auto;cursor:pointer}\n"] }]
1437
+ ], providers: [{ provide: AXComponent, useExisting: AXSchedulerTimelineDayViewComponent }], template: "<div class=\"ax-scheduler-timeline-header\">\n @for (hour of hoursArray(); track hour.date.getTime()) {\n <div class=\"ax-scheduler-timeline-header-hours\">\n <span>{{ hour | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}</span>\n </div>\n }\n</div>\n\n<div class=\"ax-scheduler-timeline-content\">\n <div class=\"ax-scheduler-timeline-appointment-container\">\n @for (layout of appointmentLayouts(); track layout.appointment.id) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || layout.appointment.readonly || readonly()\"\n [dragData]=\"layout.appointment\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, layout.appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, layout.appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, layout.appointment)\"\n [title]=\"tooltipTemplate() ? '' : layout.appointment.title\"\n [style.width]=\"layout.layoutWidth\"\n [style.height]=\"layout.layoutHeight\"\n class=\"ax-scheduler-timeline-appointment\"\n [style.insetBlockStart]=\"layout.layoutTop\"\n [style.insetInlineStart]=\"layout.layoutLeft\"\n [ngClass]=\"layout.appointment.cssClass ?? `ax-scheduler-${layout.appointment.priority ?? 'primary'}-periority`\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ layout.appointment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, layout.appointment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </ax-title>\n <ax-subtitle>\n {{\n layout.appointment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n -\n {{ layout.appointment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n </ax-subtitle>\n </div>\n }\n </div>\n <div class=\"ax-scheduler-timeline-slot-row\" aria-hidden=\"true\">\n @for (time of hoursArray(); track time.date.getTime()) {\n <div\n axDropZone\n #zone=\"axDropZone\"\n (onElementDrop)=\"handleDrop($event, time)\"\n [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n class=\"ax-scheduler-timeline-slot-cell\"\n (click)=\"handleSlotEvent($event, time)\"\n (dblclick)=\"handleSlotEvent($event, time)\"\n (contextmenu)=\"handleSlotEvent($event, time)\"\n [attr.data-slot-id]=\"time.format('YYYYMMDD-HHmm')\"\n ></div>\n }\n </div>\n</div>\n", styles: ["ax-scheduler-timeline-day-view{height:100%;position:relative;display:inline-flex;flex-direction:column;background-color:inherit}ax-scheduler-timeline-day-view .ax-scheduler-timeline-header{top:0;z-index:2;width:100%;display:flex;position:sticky;background-color:var(--ax-comp-scheduler-all-day-bg, inherit);border-block-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-timeline-day-view .ax-scheduler-timeline-header .ax-scheduler-timeline-header-hours{position:relative;padding:.25rem .5rem;width:var(--ax-comp-scheduler-timeline-view-blocks-width);border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-timeline-day-view .ax-scheduler-timeline-header .ax-scheduler-timeline-header-hours span{position:sticky;inset-inline-start:.5rem}ax-scheduler-timeline-day-view .ax-scheduler-timeline-content{height:100%;position:relative}ax-scheduler-timeline-day-view .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container{top:0;width:100%;height:100%;position:absolute}ax-scheduler-timeline-day-view .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-timeline-appointment{width:100%;display:flex;overflow:hidden;position:absolute;inset-inline-start:0;flex-direction:column;padding-block:.25rem;padding-inline:.5rem;border-radius:calc(var(--ax-sys-border-radius) / 2)}ax-scheduler-timeline-day-view .ax-scheduler-timeline-content .ax-scheduler-timeline-slot-row{height:100%;display:flex}ax-scheduler-timeline-day-view .ax-scheduler-timeline-content .ax-scheduler-timeline-slot-row .ax-scheduler-timeline-slot-cell{width:var(--ax-comp-scheduler-timeline-view-blocks-width);border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-timeline-day-view:not(.ax-state-readonly) .ax-scheduler-timeline-appointment{z-index:1;cursor:pointer}ax-scheduler-timeline-day-view:not(.ax-state-readonly) .ax-scheduler-timeline-slot-cell{z-index:0;cursor:pointer;transition-property:background-color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-scheduler-timeline-day-view:not(.ax-state-readonly) .ax-scheduler-timeline-slot-cell:hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg, var(--ax-sys-color-primary-surface), .1))}ax-scheduler-timeline-day-view ax-title{display:flex;justify-content:space-between}ax-scheduler-timeline-day-view ax-title .ax-scheduler-action-icon{width:auto;cursor:pointer}\n"] }]
1428
1438
  }], propDecorators: { isReadonly: [{
1429
1439
  type: HostBinding,
1430
1440
  args: ['class.ax-state-readonly']
@@ -1566,7 +1576,9 @@ class AXSchedulerTimelineMonthViewComponent extends NXComponent {
1566
1576
  isHoliday(date) {
1567
1577
  const isHoliday = this.schedulerService.isHoliday(date);
1568
1578
  if (isHoliday) {
1569
- const holiday = this.calendarService.holidays.filter((d) => date.equal(d.date, 'day'))[0];
1579
+ const globalHoliday = this.calendarService.holidays.find((d) => date.equal(d.date, 'day'));
1580
+ const internalHoliday = this.schedulerService.internalHoliday().find((d) => date.equal(d.date, 'day'));
1581
+ const holiday = globalHoliday || internalHoliday;
1570
1582
  return {
1571
1583
  state: 'holiday',
1572
1584
  holiday,
@@ -1588,7 +1600,7 @@ class AXSchedulerTimelineMonthViewComponent extends NXComponent {
1588
1600
  return this.readonly();
1589
1601
  }
1590
1602
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXSchedulerTimelineMonthViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
1591
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: AXSchedulerTimelineMonthViewComponent, isStandalone: true, selector: "ax-scheduler-timeline-month-view", inputs: { readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, hasActions: { classPropertyName: "hasActions", publicName: "hasActions", isSignal: true, isRequired: false, transformFunction: null }, dragStartDelay: { classPropertyName: "dragStartDelay", publicName: "dragStartDelay", isSignal: true, isRequired: false, transformFunction: null }, calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: true, transformFunction: null }, appointments: { classPropertyName: "appointments", publicName: "appointments", isSignal: true, isRequired: false, transformFunction: null }, tooltipTemplate: { classPropertyName: "tooltipTemplate", publicName: "tooltipTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { slotClickedInternal: "slotClickedInternal", slotDblClickedInternal: "slotDblClickedInternal", slotRightClickedInternal: "slotRightClickedInternal", appointmentClickedInternal: "appointmentClickedInternal", appointmentDblClickedInternal: "appointmentDblClickedInternal", appointmentRightClickedInternal: "appointmentRightClickedInternal", onActionClickInternal: "onActionClickInternal", onAppointmentDropInternal: "onAppointmentDropInternal" }, host: { properties: { "class.ax-state-readonly": "this.isReadonly" } }, providers: [{ provide: AXComponent, useExisting: AXSchedulerTimelineMonthViewComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-scheduler-timeline-month-container\">\n @for (dayData of processedDayData(); track dayData.date.date.getTime()) {\n <div>\n <div class=\"ax-scheduler-timeline-header\">\n <div\n class=\"ax-scheduler-month-header-date-day\"\n [class.ax-state-today]=\"isToday(dayData.date)\"\n [class.ax-state-holiday]=\"dayData.holiday.state !== 'none'\"\n >\n <span\n class=\"ax-scheduler-month-header-date-day-char ax-scheduler-truncate\"\n [axTooltip]=\"dayData.holiday?.holiday?.title ?? ''\"\n >\n {{ dayData.date | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n @if (dayData.holiday.state === 'holiday' && dayData.holiday.holiday.title) {\n ( {{ dayData.holiday.holiday.title }} )\n }\n </span>\n <span class=\"ax-scheduler-month-header-date-day-num\">\n {{ dayData.date | format: 'date' : { format: 'DD', calendar: calendar() } | async }}\n </span>\n </div>\n </div>\n\n <div\n axDropZone\n #zone=\"axDropZone\"\n (onElementDrop)=\"handleDrop($event, dayData.date)\"\n [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n class=\"ax-scheduler-timeline-content\"\n (click)=\"handleSlotEvent($event, dayData.date)\"\n (dblclick)=\"handleSlotEvent($event, dayData.date)\"\n (contextmenu)=\"handleSlotEvent($event, dayData.date)\"\n [attr.data-slot-id]=\"dayData.date.format('YYYYMMDD')\"\n >\n <div class=\"ax-scheduler-timeline-appointment-container\">\n @for (segment of dayData.visibleAppointments; track segment.id + segment.originalStartDate.getTime()) {\n <div\n axDrag\n [dragData]=\"segment\"\n [dragCursor]=\"'grab'\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || segment.readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, segment)\"\n (dblclick)=\"handleAppointmentEvent($event, segment)\"\n (contextmenu)=\"handleAppointmentEvent($event, segment)\"\n [title]=\"\n tooltipTemplate()\n ? ''\n : segment.allDay\n ? segment.title\n : segment.title +\n ' (' +\n (segment.originalStartDate | format: 'time' : { calendar: calendar() } | async) +\n ' - ' +\n (segment.originalEndDate | format: 'time' : { calendar: calendar() } | async) +\n ')'\n \"\n class=\"ax-scheduler-timeline-appointment\"\n [class.all-day-segment]=\"segment.allDay\"\n [ngClass]=\"segment.cssClass ?? `ax-scheduler-${segment.priority ?? 'primary'}-periority`\"\n [tooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ segment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, segment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </ax-title>\n <!-- Display segment's start/end times if not allDay for this segment -->\n @if (!segment.allDay) {\n <ax-subtitle>\n {{ segment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }} -\n {{ segment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n </ax-subtitle>\n }\n </div>\n }\n @if (dayData.moreCount > 0) {\n <div #moreAppointments class=\"ax-scheduler-month-overflow-badge\" (click)=\"$event.stopPropagation()\">\n +{{ '@acorex:common.general.more-items' | translate: { params: { number: dayData.moreCount } } | async }}\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-overlay-pane ax-scheduler-popover ax-scheduler-month-popover-appointment\"\n >\n @for (segment of dayData.hiddenAppointments; track segment.id + segment.originalStartDate.getTime()) {\n <div\n axDrag\n [dragData]=\"segment\"\n [dragCursor]=\"'grab'\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || segment.readonly || readonly()\"\n (click)=\"handleAppointmentEvent($event, segment); $event.stopPropagation()\"\n (dblclick)=\"handleAppointmentEvent($event, segment); $event.stopPropagation()\"\n (contextmenu)=\"handleAppointmentEvent($event, segment); $event.stopPropagation()\"\n [title]=\"\n tooltipTemplate()\n ? ''\n : segment.allDay\n ? segment.title\n : segment.title +\n ' (' +\n (segment.originalStartDate | format: 'time' : { calendar: calendar() } | async) +\n ' - ' +\n (segment.originalEndDate | format: 'time' : { calendar: calendar() } | async) +\n ')'\n \"\n class=\"ax-scheduler-popover-appointment\"\n [class.all-day-segment]=\"segment.allDay\"\n [ngClass]=\"segment.cssClass ?? `ax-scheduler-${segment.priority ?? 'primary'}-periority`\"\n [tooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ segment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, segment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </ax-title>\n @if (!segment.allDay) {\n <ax-subtitle>\n {{\n segment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n -\n {{\n segment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n </ax-subtitle>\n }\n </div>\n }\n </div>\n </ax-popover>\n }\n </div>\n </div>\n </div>\n }\n</div>\n", styles: ["ax-scheduler-timeline-month-view{height:100%;position:relative;display:inline-flex;flex-direction:column;background-color:inherit}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container{height:100%;display:flex}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header{width:100%;display:flex;background-color:var(--ax-comp-scheduler-all-day-bg, inherit)}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day{gap:.25rem;height:4rem;display:flex;position:relative;align-items:start;padding-inline:1rem;flex-direction:column;padding-block:.25rem;justify-content:center;width:var(--ax-comp-scheduler-timeline-month-view-blocks-width, calc(var(--ax-comp-scheduler-timeline-view-blocks-width) / 2));border-block-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface));border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface),.05)}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day.ax-state-today .ax-scheduler-month-header-date-day-char{font-weight:500}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day.ax-state-today .ax-scheduler-month-header-date-day-num{font-weight:700}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day.ax-state-holiday{color:rgba(var(--ax-sys-color-danger-surface))}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day.ax-state-holiday.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day .ax-scheduler-month-header-date-day-char{max-width:100%;position:sticky;font-weight:300;inset-inline-start:1rem}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day .ax-scheduler-month-header-date-day-num{position:sticky;font-weight:500;font-size:1.25rem;inset-inline-start:1rem}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content{padding:.125rem .25rem;position:relative;height:calc(100% - 4rem);width:var(--ax-comp-scheduler-timeline-month-view-blocks-width, calc(var(--ax-comp-scheduler-timeline-view-blocks-width) / 2));border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container{gap:1px;display:flex;flex-direction:column}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-timeline-appointment{width:100%;display:flex;overflow:hidden;flex-direction:column;padding-block:.25rem;padding-inline:.5rem;border-radius:calc(var(--ax-sys-border-radius) / 2)}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-month-overflow-badge{cursor:pointer;text-align:left;font-size:.75rem;padding:.125rem 0;margin-top:.125rem}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-month-overflow-badge:hover{text-decoration:underline}ax-scheduler-timeline-month-view:not(.ax-state-readonly) .ax-scheduler-timeline-appointment{cursor:pointer}ax-scheduler-timeline-month-view:not(.ax-state-readonly) .ax-scheduler-timeline-content{cursor:pointer;transition-property:background-color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-scheduler-timeline-month-view:not(.ax-state-readonly) .ax-scheduler-timeline-content:hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg, var(--ax-sys-color-primary-surface), .1))}ax-scheduler-timeline-month-view ax-title{display:flex;justify-content:space-between}ax-scheduler-timeline-month-view ax-title .ax-scheduler-action-icon{width:auto;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["dragData", "dragDisabled", "dragTransition", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragClonedTemplate", "dragCursor", "dragBoundary", "dragTransitionDuration"], outputs: ["dragPositionChanged"] }, { kind: "directive", type: AXDropZoneDirective, selector: "[axDropZone]", inputs: ["dropZoneGroup"], outputs: ["onElementDrop", "onElementHover"], exportAs: ["axDropZone"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["tooltipDisabled", "axTooltip", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "pipe", type: AXFormatPipe, name: "format" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
1603
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: AXSchedulerTimelineMonthViewComponent, isStandalone: true, selector: "ax-scheduler-timeline-month-view", inputs: { readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, hasActions: { classPropertyName: "hasActions", publicName: "hasActions", isSignal: true, isRequired: false, transformFunction: null }, dragStartDelay: { classPropertyName: "dragStartDelay", publicName: "dragStartDelay", isSignal: true, isRequired: false, transformFunction: null }, calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: true, transformFunction: null }, appointments: { classPropertyName: "appointments", publicName: "appointments", isSignal: true, isRequired: false, transformFunction: null }, tooltipTemplate: { classPropertyName: "tooltipTemplate", publicName: "tooltipTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { slotClickedInternal: "slotClickedInternal", slotDblClickedInternal: "slotDblClickedInternal", slotRightClickedInternal: "slotRightClickedInternal", appointmentClickedInternal: "appointmentClickedInternal", appointmentDblClickedInternal: "appointmentDblClickedInternal", appointmentRightClickedInternal: "appointmentRightClickedInternal", onActionClickInternal: "onActionClickInternal", onAppointmentDropInternal: "onAppointmentDropInternal" }, host: { properties: { "class.ax-state-readonly": "this.isReadonly" } }, providers: [{ provide: AXComponent, useExisting: AXSchedulerTimelineMonthViewComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-scheduler-timeline-month-container\">\n @for (dayData of processedDayData(); track dayData.date.date.getTime()) {\n <div>\n <div class=\"ax-scheduler-timeline-header\">\n <div\n [class.ax-state-today]=\"isToday(dayData.date)\"\n class=\"ax-scheduler-month-header-date-day {{\n dayData.holiday.state !== 'none' ? (dayData.holiday.holiday?.cssClass ?? 'ax-state-holiday') : ''\n }}\"\n >\n <span\n class=\"ax-scheduler-month-header-date-day-char ax-scheduler-truncate\"\n [axTooltip]=\"dayData.holiday.holiday?.title ?? ''\"\n >\n {{ dayData.date | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n @if (dayData.holiday.state === 'holiday' && dayData.holiday.holiday.title) {\n ( {{ dayData.holiday.holiday.title }} )\n }\n </span>\n <span class=\"ax-scheduler-month-header-date-day-num\">\n {{ dayData.date | format: 'date' : { format: 'DD', calendar: calendar() } | async }}\n </span>\n </div>\n </div>\n\n <div\n axDropZone\n #zone=\"axDropZone\"\n (onElementDrop)=\"handleDrop($event, dayData.date)\"\n [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n class=\"ax-scheduler-timeline-content\"\n (click)=\"handleSlotEvent($event, dayData.date)\"\n (dblclick)=\"handleSlotEvent($event, dayData.date)\"\n (contextmenu)=\"handleSlotEvent($event, dayData.date)\"\n [attr.data-slot-id]=\"dayData.date.format('YYYYMMDD')\"\n >\n <div class=\"ax-scheduler-timeline-appointment-container\">\n @for (segment of dayData.visibleAppointments; track segment.id + segment.originalStartDate.getTime()) {\n <div\n axDrag\n [dragData]=\"segment\"\n [dragCursor]=\"'grab'\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || segment.readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, segment)\"\n (dblclick)=\"handleAppointmentEvent($event, segment)\"\n (contextmenu)=\"handleAppointmentEvent($event, segment)\"\n [title]=\"\n tooltipTemplate()\n ? ''\n : segment.allDay\n ? segment.title\n : segment.title +\n ' (' +\n (segment.originalStartDate | format: 'time' : { calendar: calendar() } | async) +\n ' - ' +\n (segment.originalEndDate | format: 'time' : { calendar: calendar() } | async) +\n ')'\n \"\n class=\"ax-scheduler-timeline-appointment\"\n [class.all-day-segment]=\"segment.allDay\"\n [ngClass]=\"segment.cssClass ?? `ax-scheduler-${segment.priority ?? 'primary'}-periority`\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ segment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, segment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </ax-title>\n <!-- Display segment's start/end times if not allDay for this segment -->\n @if (!segment.allDay) {\n <ax-subtitle>\n {{ segment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }} -\n {{ segment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n </ax-subtitle>\n }\n </div>\n }\n @if (dayData.moreCount > 0) {\n <div #moreAppointments class=\"ax-scheduler-month-overflow-badge\" (click)=\"$event.stopPropagation()\">\n +{{ '@acorex:common.general.more-items' | translate: { params: { number: dayData.moreCount } } | async }}\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-overlay-pane ax-scheduler-popover ax-scheduler-month-popover-appointment\"\n >\n @for (segment of dayData.hiddenAppointments; track segment.id + segment.originalStartDate.getTime()) {\n <div\n axDrag\n [dragData]=\"segment\"\n [dragCursor]=\"'grab'\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || segment.readonly || readonly()\"\n (click)=\"handleAppointmentEvent($event, segment); $event.stopPropagation()\"\n (dblclick)=\"handleAppointmentEvent($event, segment); $event.stopPropagation()\"\n (contextmenu)=\"handleAppointmentEvent($event, segment); $event.stopPropagation()\"\n [title]=\"\n tooltipTemplate()\n ? ''\n : segment.allDay\n ? segment.title\n : segment.title +\n ' (' +\n (segment.originalStartDate | format: 'time' : { calendar: calendar() } | async) +\n ' - ' +\n (segment.originalEndDate | format: 'time' : { calendar: calendar() } | async) +\n ')'\n \"\n class=\"ax-scheduler-popover-appointment\"\n [class.all-day-segment]=\"segment.allDay\"\n [ngClass]=\"segment.cssClass ?? `ax-scheduler-${segment.priority ?? 'primary'}-periority`\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ segment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, segment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </ax-title>\n @if (!segment.allDay) {\n <ax-subtitle>\n {{\n segment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n -\n {{\n segment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n </ax-subtitle>\n }\n </div>\n }\n </div>\n </ax-popover>\n }\n </div>\n </div>\n </div>\n }\n</div>\n", styles: ["ax-scheduler-timeline-month-view{height:100%;position:relative;display:inline-flex;flex-direction:column;background-color:inherit}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container{height:100%;display:flex}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header{width:100%;display:flex;background-color:var(--ax-comp-scheduler-all-day-bg, inherit)}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day{gap:.25rem;height:4rem;display:flex;position:relative;align-items:start;padding-inline:1rem;flex-direction:column;padding-block:.25rem;justify-content:center;width:var(--ax-comp-scheduler-timeline-month-view-blocks-width, calc(var(--ax-comp-scheduler-timeline-view-blocks-width) / 2));border-block-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface));border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface),.05)}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day.ax-state-today .ax-scheduler-month-header-date-day-char{font-weight:500}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day.ax-state-today .ax-scheduler-month-header-date-day-num{font-weight:700}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day.ax-state-holiday{color:rgba(var(--ax-sys-color-danger-surface))}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day.ax-state-holiday.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day .ax-scheduler-month-header-date-day-char{max-width:100%;position:sticky;font-weight:300;inset-inline-start:1rem}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day .ax-scheduler-month-header-date-day-num{position:sticky;font-weight:500;font-size:1.25rem;inset-inline-start:1rem}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content{padding:.125rem .25rem;position:relative;height:calc(100% - 4rem);width:var(--ax-comp-scheduler-timeline-month-view-blocks-width, calc(var(--ax-comp-scheduler-timeline-view-blocks-width) / 2));border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container{gap:1px;display:flex;flex-direction:column}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-timeline-appointment{width:100%;display:flex;overflow:hidden;flex-direction:column;padding-block:.25rem;padding-inline:.5rem;border-radius:calc(var(--ax-sys-border-radius) / 2)}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-month-overflow-badge{cursor:pointer;text-align:left;font-size:.75rem;padding:.125rem 0;margin-top:.125rem}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-month-overflow-badge:hover{text-decoration:underline}ax-scheduler-timeline-month-view:not(.ax-state-readonly) .ax-scheduler-timeline-appointment{cursor:pointer}ax-scheduler-timeline-month-view:not(.ax-state-readonly) .ax-scheduler-timeline-content{cursor:pointer;transition-property:background-color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-scheduler-timeline-month-view:not(.ax-state-readonly) .ax-scheduler-timeline-content:hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg, var(--ax-sys-color-primary-surface), .1))}ax-scheduler-timeline-month-view ax-title{display:flex;justify-content:space-between}ax-scheduler-timeline-month-view ax-title .ax-scheduler-action-icon{width:auto;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["dragData", "dragDisabled", "dragTransition", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragClonedTemplate", "dragCursor", "dragBoundary", "dragTransitionDuration"], outputs: ["dragPositionChanged"] }, { kind: "directive", type: AXDropZoneDirective, selector: "[axDropZone]", inputs: ["dropZoneGroup"], outputs: ["onElementDrop", "onElementHover"], exportAs: ["axDropZone"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "pipe", type: AXFormatPipe, name: "format" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
1592
1604
  }
1593
1605
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXSchedulerTimelineMonthViewComponent, decorators: [{
1594
1606
  type: Component,
@@ -1603,7 +1615,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
1603
1615
  AXDropZoneDirective,
1604
1616
  AXTooltipDirective,
1605
1617
  AXDecoratorIconComponent,
1606
- ], providers: [{ provide: AXComponent, useExisting: AXSchedulerTimelineMonthViewComponent }], template: "<div class=\"ax-scheduler-timeline-month-container\">\n @for (dayData of processedDayData(); track dayData.date.date.getTime()) {\n <div>\n <div class=\"ax-scheduler-timeline-header\">\n <div\n class=\"ax-scheduler-month-header-date-day\"\n [class.ax-state-today]=\"isToday(dayData.date)\"\n [class.ax-state-holiday]=\"dayData.holiday.state !== 'none'\"\n >\n <span\n class=\"ax-scheduler-month-header-date-day-char ax-scheduler-truncate\"\n [axTooltip]=\"dayData.holiday?.holiday?.title ?? ''\"\n >\n {{ dayData.date | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n @if (dayData.holiday.state === 'holiday' && dayData.holiday.holiday.title) {\n ( {{ dayData.holiday.holiday.title }} )\n }\n </span>\n <span class=\"ax-scheduler-month-header-date-day-num\">\n {{ dayData.date | format: 'date' : { format: 'DD', calendar: calendar() } | async }}\n </span>\n </div>\n </div>\n\n <div\n axDropZone\n #zone=\"axDropZone\"\n (onElementDrop)=\"handleDrop($event, dayData.date)\"\n [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n class=\"ax-scheduler-timeline-content\"\n (click)=\"handleSlotEvent($event, dayData.date)\"\n (dblclick)=\"handleSlotEvent($event, dayData.date)\"\n (contextmenu)=\"handleSlotEvent($event, dayData.date)\"\n [attr.data-slot-id]=\"dayData.date.format('YYYYMMDD')\"\n >\n <div class=\"ax-scheduler-timeline-appointment-container\">\n @for (segment of dayData.visibleAppointments; track segment.id + segment.originalStartDate.getTime()) {\n <div\n axDrag\n [dragData]=\"segment\"\n [dragCursor]=\"'grab'\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || segment.readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, segment)\"\n (dblclick)=\"handleAppointmentEvent($event, segment)\"\n (contextmenu)=\"handleAppointmentEvent($event, segment)\"\n [title]=\"\n tooltipTemplate()\n ? ''\n : segment.allDay\n ? segment.title\n : segment.title +\n ' (' +\n (segment.originalStartDate | format: 'time' : { calendar: calendar() } | async) +\n ' - ' +\n (segment.originalEndDate | format: 'time' : { calendar: calendar() } | async) +\n ')'\n \"\n class=\"ax-scheduler-timeline-appointment\"\n [class.all-day-segment]=\"segment.allDay\"\n [ngClass]=\"segment.cssClass ?? `ax-scheduler-${segment.priority ?? 'primary'}-periority`\"\n [tooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ segment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, segment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </ax-title>\n <!-- Display segment's start/end times if not allDay for this segment -->\n @if (!segment.allDay) {\n <ax-subtitle>\n {{ segment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }} -\n {{ segment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n </ax-subtitle>\n }\n </div>\n }\n @if (dayData.moreCount > 0) {\n <div #moreAppointments class=\"ax-scheduler-month-overflow-badge\" (click)=\"$event.stopPropagation()\">\n +{{ '@acorex:common.general.more-items' | translate: { params: { number: dayData.moreCount } } | async }}\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-overlay-pane ax-scheduler-popover ax-scheduler-month-popover-appointment\"\n >\n @for (segment of dayData.hiddenAppointments; track segment.id + segment.originalStartDate.getTime()) {\n <div\n axDrag\n [dragData]=\"segment\"\n [dragCursor]=\"'grab'\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || segment.readonly || readonly()\"\n (click)=\"handleAppointmentEvent($event, segment); $event.stopPropagation()\"\n (dblclick)=\"handleAppointmentEvent($event, segment); $event.stopPropagation()\"\n (contextmenu)=\"handleAppointmentEvent($event, segment); $event.stopPropagation()\"\n [title]=\"\n tooltipTemplate()\n ? ''\n : segment.allDay\n ? segment.title\n : segment.title +\n ' (' +\n (segment.originalStartDate | format: 'time' : { calendar: calendar() } | async) +\n ' - ' +\n (segment.originalEndDate | format: 'time' : { calendar: calendar() } | async) +\n ')'\n \"\n class=\"ax-scheduler-popover-appointment\"\n [class.all-day-segment]=\"segment.allDay\"\n [ngClass]=\"segment.cssClass ?? `ax-scheduler-${segment.priority ?? 'primary'}-periority`\"\n [tooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ segment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, segment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </ax-title>\n @if (!segment.allDay) {\n <ax-subtitle>\n {{\n segment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n -\n {{\n segment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n </ax-subtitle>\n }\n </div>\n }\n </div>\n </ax-popover>\n }\n </div>\n </div>\n </div>\n }\n</div>\n", styles: ["ax-scheduler-timeline-month-view{height:100%;position:relative;display:inline-flex;flex-direction:column;background-color:inherit}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container{height:100%;display:flex}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header{width:100%;display:flex;background-color:var(--ax-comp-scheduler-all-day-bg, inherit)}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day{gap:.25rem;height:4rem;display:flex;position:relative;align-items:start;padding-inline:1rem;flex-direction:column;padding-block:.25rem;justify-content:center;width:var(--ax-comp-scheduler-timeline-month-view-blocks-width, calc(var(--ax-comp-scheduler-timeline-view-blocks-width) / 2));border-block-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface));border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface),.05)}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day.ax-state-today .ax-scheduler-month-header-date-day-char{font-weight:500}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day.ax-state-today .ax-scheduler-month-header-date-day-num{font-weight:700}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day.ax-state-holiday{color:rgba(var(--ax-sys-color-danger-surface))}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day.ax-state-holiday.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day .ax-scheduler-month-header-date-day-char{max-width:100%;position:sticky;font-weight:300;inset-inline-start:1rem}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day .ax-scheduler-month-header-date-day-num{position:sticky;font-weight:500;font-size:1.25rem;inset-inline-start:1rem}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content{padding:.125rem .25rem;position:relative;height:calc(100% - 4rem);width:var(--ax-comp-scheduler-timeline-month-view-blocks-width, calc(var(--ax-comp-scheduler-timeline-view-blocks-width) / 2));border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container{gap:1px;display:flex;flex-direction:column}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-timeline-appointment{width:100%;display:flex;overflow:hidden;flex-direction:column;padding-block:.25rem;padding-inline:.5rem;border-radius:calc(var(--ax-sys-border-radius) / 2)}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-month-overflow-badge{cursor:pointer;text-align:left;font-size:.75rem;padding:.125rem 0;margin-top:.125rem}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-month-overflow-badge:hover{text-decoration:underline}ax-scheduler-timeline-month-view:not(.ax-state-readonly) .ax-scheduler-timeline-appointment{cursor:pointer}ax-scheduler-timeline-month-view:not(.ax-state-readonly) .ax-scheduler-timeline-content{cursor:pointer;transition-property:background-color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-scheduler-timeline-month-view:not(.ax-state-readonly) .ax-scheduler-timeline-content:hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg, var(--ax-sys-color-primary-surface), .1))}ax-scheduler-timeline-month-view ax-title{display:flex;justify-content:space-between}ax-scheduler-timeline-month-view ax-title .ax-scheduler-action-icon{width:auto;cursor:pointer}\n"] }]
1618
+ ], providers: [{ provide: AXComponent, useExisting: AXSchedulerTimelineMonthViewComponent }], template: "<div class=\"ax-scheduler-timeline-month-container\">\n @for (dayData of processedDayData(); track dayData.date.date.getTime()) {\n <div>\n <div class=\"ax-scheduler-timeline-header\">\n <div\n [class.ax-state-today]=\"isToday(dayData.date)\"\n class=\"ax-scheduler-month-header-date-day {{\n dayData.holiday.state !== 'none' ? (dayData.holiday.holiday?.cssClass ?? 'ax-state-holiday') : ''\n }}\"\n >\n <span\n class=\"ax-scheduler-month-header-date-day-char ax-scheduler-truncate\"\n [axTooltip]=\"dayData.holiday.holiday?.title ?? ''\"\n >\n {{ dayData.date | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n @if (dayData.holiday.state === 'holiday' && dayData.holiday.holiday.title) {\n ( {{ dayData.holiday.holiday.title }} )\n }\n </span>\n <span class=\"ax-scheduler-month-header-date-day-num\">\n {{ dayData.date | format: 'date' : { format: 'DD', calendar: calendar() } | async }}\n </span>\n </div>\n </div>\n\n <div\n axDropZone\n #zone=\"axDropZone\"\n (onElementDrop)=\"handleDrop($event, dayData.date)\"\n [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n class=\"ax-scheduler-timeline-content\"\n (click)=\"handleSlotEvent($event, dayData.date)\"\n (dblclick)=\"handleSlotEvent($event, dayData.date)\"\n (contextmenu)=\"handleSlotEvent($event, dayData.date)\"\n [attr.data-slot-id]=\"dayData.date.format('YYYYMMDD')\"\n >\n <div class=\"ax-scheduler-timeline-appointment-container\">\n @for (segment of dayData.visibleAppointments; track segment.id + segment.originalStartDate.getTime()) {\n <div\n axDrag\n [dragData]=\"segment\"\n [dragCursor]=\"'grab'\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || segment.readonly || readonly()\"\n (pointerdown)=\"getSlotId($event)\"\n (click)=\"handleAppointmentEvent($event, segment)\"\n (dblclick)=\"handleAppointmentEvent($event, segment)\"\n (contextmenu)=\"handleAppointmentEvent($event, segment)\"\n [title]=\"\n tooltipTemplate()\n ? ''\n : segment.allDay\n ? segment.title\n : segment.title +\n ' (' +\n (segment.originalStartDate | format: 'time' : { calendar: calendar() } | async) +\n ' - ' +\n (segment.originalEndDate | format: 'time' : { calendar: calendar() } | async) +\n ')'\n \"\n class=\"ax-scheduler-timeline-appointment\"\n [class.all-day-segment]=\"segment.allDay\"\n [ngClass]=\"segment.cssClass ?? `ax-scheduler-${segment.priority ?? 'primary'}-periority`\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ segment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, segment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </ax-title>\n <!-- Display segment's start/end times if not allDay for this segment -->\n @if (!segment.allDay) {\n <ax-subtitle>\n {{ segment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }} -\n {{ segment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n </ax-subtitle>\n }\n </div>\n }\n @if (dayData.moreCount > 0) {\n <div #moreAppointments class=\"ax-scheduler-month-overflow-badge\" (click)=\"$event.stopPropagation()\">\n +{{ '@acorex:common.general.more-items' | translate: { params: { number: dayData.moreCount } } | async }}\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-overlay-pane ax-scheduler-popover ax-scheduler-month-popover-appointment\"\n >\n @for (segment of dayData.hiddenAppointments; track segment.id + segment.originalStartDate.getTime()) {\n <div\n axDrag\n [dragData]=\"segment\"\n [dragCursor]=\"'grab'\"\n [dragTransition]=\"false\"\n [dragElementClone]=\"true\"\n [dragStartDelay]=\"dragStartDelay()\"\n [dragDisabled]=\"!draggable() || segment.readonly || readonly()\"\n (click)=\"handleAppointmentEvent($event, segment); $event.stopPropagation()\"\n (dblclick)=\"handleAppointmentEvent($event, segment); $event.stopPropagation()\"\n (contextmenu)=\"handleAppointmentEvent($event, segment); $event.stopPropagation()\"\n [title]=\"\n tooltipTemplate()\n ? ''\n : segment.allDay\n ? segment.title\n : segment.title +\n ' (' +\n (segment.originalStartDate | format: 'time' : { calendar: calendar() } | async) +\n ' - ' +\n (segment.originalEndDate | format: 'time' : { calendar: calendar() } | async) +\n ')'\n \"\n class=\"ax-scheduler-popover-appointment\"\n [class.all-day-segment]=\"segment.allDay\"\n [ngClass]=\"segment.cssClass ?? `ax-scheduler-${segment.priority ?? 'primary'}-periority`\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n [axTooltip]=\"tooltipTemplate()\"\n >\n <ax-title>\n <span class=\"ax-scheduler-truncate\">{{ segment.title }}</span>\n @if (hasActions()) {\n <ax-icon\n (click)=\"handleActionClick($event, segment)\"\n class=\"ax-icon ax-icon-more-horizontal ax-scheduler-action-icon\"\n >\n </ax-icon>\n }\n </ax-title>\n @if (!segment.allDay) {\n <ax-subtitle>\n {{\n segment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n -\n {{\n segment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n </ax-subtitle>\n }\n </div>\n }\n </div>\n </ax-popover>\n }\n </div>\n </div>\n </div>\n }\n</div>\n", styles: ["ax-scheduler-timeline-month-view{height:100%;position:relative;display:inline-flex;flex-direction:column;background-color:inherit}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container{height:100%;display:flex}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header{width:100%;display:flex;background-color:var(--ax-comp-scheduler-all-day-bg, inherit)}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day{gap:.25rem;height:4rem;display:flex;position:relative;align-items:start;padding-inline:1rem;flex-direction:column;padding-block:.25rem;justify-content:center;width:var(--ax-comp-scheduler-timeline-month-view-blocks-width, calc(var(--ax-comp-scheduler-timeline-view-blocks-width) / 2));border-block-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface));border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface),.05)}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day.ax-state-today .ax-scheduler-month-header-date-day-char{font-weight:500}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day.ax-state-today .ax-scheduler-month-header-date-day-num{font-weight:700}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day.ax-state-holiday{color:rgba(var(--ax-sys-color-danger-surface))}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day.ax-state-holiday.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day .ax-scheduler-month-header-date-day-char{max-width:100%;position:sticky;font-weight:300;inset-inline-start:1rem}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day .ax-scheduler-month-header-date-day-num{position:sticky;font-weight:500;font-size:1.25rem;inset-inline-start:1rem}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content{padding:.125rem .25rem;position:relative;height:calc(100% - 4rem);width:var(--ax-comp-scheduler-timeline-month-view-blocks-width, calc(var(--ax-comp-scheduler-timeline-view-blocks-width) / 2));border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container{gap:1px;display:flex;flex-direction:column}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-timeline-appointment{width:100%;display:flex;overflow:hidden;flex-direction:column;padding-block:.25rem;padding-inline:.5rem;border-radius:calc(var(--ax-sys-border-radius) / 2)}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-month-overflow-badge{cursor:pointer;text-align:left;font-size:.75rem;padding:.125rem 0;margin-top:.125rem}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-month-overflow-badge:hover{text-decoration:underline}ax-scheduler-timeline-month-view:not(.ax-state-readonly) .ax-scheduler-timeline-appointment{cursor:pointer}ax-scheduler-timeline-month-view:not(.ax-state-readonly) .ax-scheduler-timeline-content{cursor:pointer;transition-property:background-color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-scheduler-timeline-month-view:not(.ax-state-readonly) .ax-scheduler-timeline-content:hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg, var(--ax-sys-color-primary-surface), .1))}ax-scheduler-timeline-month-view ax-title{display:flex;justify-content:space-between}ax-scheduler-timeline-month-view ax-title .ax-scheduler-action-icon{width:auto;cursor:pointer}\n"] }]
1607
1619
  }], propDecorators: { isReadonly: [{
1608
1620
  type: HostBinding,
1609
1621
  args: ['class.ax-state-readonly']
@@ -1669,7 +1681,9 @@ class AXSchedulerTimelineMultiDayViewComponent extends NXComponent {
1669
1681
  isHoliday(date) {
1670
1682
  const isHoliday = this.schedulerService.isHoliday(date);
1671
1683
  if (isHoliday) {
1672
- const holiday = this.calendarService.holidays.filter((d) => date.equal(d.date, 'day'))[0];
1684
+ const globalHoliday = this.calendarService.holidays.find((d) => date.equal(d.date, 'day'));
1685
+ const internalHoliday = this.schedulerService.internalHoliday().find((d) => date.equal(d.date, 'day'));
1686
+ const holiday = globalHoliday || internalHoliday;
1673
1687
  return {
1674
1688
  state: 'holiday',
1675
1689
  holiday,
@@ -1682,11 +1696,11 @@ class AXSchedulerTimelineMultiDayViewComponent extends NXComponent {
1682
1696
  return { state: 'none' };
1683
1697
  }
1684
1698
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXSchedulerTimelineMultiDayViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
1685
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: AXSchedulerTimelineMultiDayViewComponent, isStandalone: true, selector: "ax-scheduler-timeline-multi-day-view", inputs: { daysCount: { classPropertyName: "daysCount", publicName: "daysCount", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, hasActions: { classPropertyName: "hasActions", publicName: "hasActions", isSignal: true, isRequired: false, transformFunction: null }, dragStartDelay: { classPropertyName: "dragStartDelay", publicName: "dragStartDelay", isSignal: true, isRequired: false, transformFunction: null }, calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: true, transformFunction: null }, endDayHour: { classPropertyName: "endDayHour", publicName: "endDayHour", isSignal: true, isRequired: true, transformFunction: null }, startDayHour: { classPropertyName: "startDayHour", publicName: "startDayHour", isSignal: true, isRequired: true, transformFunction: null }, appointments: { classPropertyName: "appointments", publicName: "appointments", isSignal: true, isRequired: false, transformFunction: null }, tooltipTemplate: { classPropertyName: "tooltipTemplate", publicName: "tooltipTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { slotClickedInternal: "slotClickedInternal", slotDblClickedInternal: "slotDblClickedInternal", slotRightClickedInternal: "slotRightClickedInternal", appointmentClickedInternal: "appointmentClickedInternal", appointmentDblClickedInternal: "appointmentDblClickedInternal", appointmentRightClickedInternal: "appointmentRightClickedInternal", onActionClickInternal: "onActionClickInternal", onAppointmentDropInternal: "onAppointmentDropInternal" }, providers: [{ provide: AXComponent, useExisting: AXSchedulerTimelineMultiDayViewComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-scheduler-timeline-day-view-container\">\n @for (daySlot of daysDataForTimelineViews(); track daySlot.date.date.getTime()) {\n <div class=\"ax-scheduler-timeline-multi-day-column\">\n <div\n class=\"ax-scheduler-week-header-date-day\"\n [class.ax-state-today]=\"isToday(daySlot.date)\"\n [class.ax-state-holiday]=\"daySlot.holiday.state !== 'none'\"\n >\n <span\n class=\"ax-scheduler-week-header-date-day-char ax-scheduler-truncate\"\n [axTooltip]=\"daySlot.holiday?.holiday?.title ?? ''\"\n >\n {{ daySlot.date | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n @if (daySlot.holiday.state === 'holiday' && daySlot.holiday.holiday.title) {\n ( {{ daySlot.holiday.holiday.title }} )\n }\n </span>\n <span class=\"ax-scheduler-week-header-date-day-num\">\n {{ daySlot.date | format: 'date' : { format: 'DD', calendar: calendar() } | async }}\n </span>\n </div>\n <ax-scheduler-timeline-day-view\n [date]=\"daySlot.date\"\n [readonly]=\"readonly()\"\n [draggable]=\"draggable()\"\n [endDayHour]=\"endDayHour()\"\n [startDayHour]=\"startDayHour()\"\n [hasActions]=\"hasActions()\"\n [dragStartDelay]=\"dragStartDelay()\"\n [tooltipTemplate]=\"tooltipTemplate()\"\n [appointments]=\"daySlot.originalAppointmentsForThisDay\"\n (onActionClickInternal)=\"onActionClickInternal.emit($event)\"\n (slotClickedInternal)=\"slotClickedInternal.emit($event)\"\n (slotDblClickedInternal)=\"slotDblClickedInternal.emit($event)\"\n (slotRightClickedInternal)=\"slotRightClickedInternal.emit($event)\"\n (onAppointmentDropInternal)=\"onAppointmentDropInternal.emit($event)\"\n (appointmentClickedInternal)=\"appointmentClickedInternal.emit($event)\"\n (appointmentDblClickedInternal)=\"appointmentDblClickedInternal.emit($event)\"\n (appointmentRightClickedInternal)=\"appointmentRightClickedInternal.emit($event)\"\n >\n </ax-scheduler-timeline-day-view>\n </div>\n }\n</div>\n", styles: ["ax-scheduler-timeline-multi-day-view .ax-scheduler-timeline-day-view-container{height:100%;display:flex;flex-direction:row}ax-scheduler-timeline-multi-day-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day{gap:.25rem;height:4rem;display:flex;position:relative;align-items:start;padding-inline:1rem;flex-direction:column;padding-block:.25rem;justify-content:center;border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface));border-block-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-timeline-multi-day-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface),.05)}ax-scheduler-timeline-multi-day-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day.ax-state-today .ax-scheduler-week-header-date-day-char{font-weight:500}ax-scheduler-timeline-multi-day-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day.ax-state-today .ax-scheduler-week-header-date-day-num{font-weight:700}ax-scheduler-timeline-multi-day-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day.ax-state-holiday{color:rgba(var(--ax-sys-color-danger-surface))}ax-scheduler-timeline-multi-day-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day.ax-state-holiday.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-timeline-multi-day-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day .ax-scheduler-week-header-date-day-char{max-width:100%;position:sticky;font-weight:300;inset-inline-start:1rem}ax-scheduler-timeline-multi-day-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day .ax-scheduler-week-header-date-day-num{position:sticky;font-weight:500;font-size:1.25rem;inset-inline-start:1rem}ax-scheduler-timeline-multi-day-view ax-scheduler-timeline-day-view{height:calc(100% - 4rem)}\n"], dependencies: [{ kind: "component", type: AXSchedulerTimelineDayViewComponent, selector: "ax-scheduler-timeline-day-view", inputs: ["readonly", "draggable", "hasActions", "dragStartDelay", "calendar", "date", "endDayHour", "startDayHour", "appointments", "tooltipTemplate"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onActionClickInternal", "onAppointmentDropInternal"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["tooltipDisabled", "axTooltip", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXFormatPipe, name: "format" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
1699
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: AXSchedulerTimelineMultiDayViewComponent, isStandalone: true, selector: "ax-scheduler-timeline-multi-day-view", inputs: { daysCount: { classPropertyName: "daysCount", publicName: "daysCount", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, hasActions: { classPropertyName: "hasActions", publicName: "hasActions", isSignal: true, isRequired: false, transformFunction: null }, dragStartDelay: { classPropertyName: "dragStartDelay", publicName: "dragStartDelay", isSignal: true, isRequired: false, transformFunction: null }, calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: true, transformFunction: null }, endDayHour: { classPropertyName: "endDayHour", publicName: "endDayHour", isSignal: true, isRequired: true, transformFunction: null }, startDayHour: { classPropertyName: "startDayHour", publicName: "startDayHour", isSignal: true, isRequired: true, transformFunction: null }, appointments: { classPropertyName: "appointments", publicName: "appointments", isSignal: true, isRequired: false, transformFunction: null }, tooltipTemplate: { classPropertyName: "tooltipTemplate", publicName: "tooltipTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { slotClickedInternal: "slotClickedInternal", slotDblClickedInternal: "slotDblClickedInternal", slotRightClickedInternal: "slotRightClickedInternal", appointmentClickedInternal: "appointmentClickedInternal", appointmentDblClickedInternal: "appointmentDblClickedInternal", appointmentRightClickedInternal: "appointmentRightClickedInternal", onActionClickInternal: "onActionClickInternal", onAppointmentDropInternal: "onAppointmentDropInternal" }, providers: [{ provide: AXComponent, useExisting: AXSchedulerTimelineMultiDayViewComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-scheduler-timeline-day-view-container\">\n @for (daySlot of daysDataForTimelineViews(); track daySlot.date.date.getTime()) {\n <div class=\"ax-scheduler-timeline-multi-day-column\">\n <div\n [class.ax-state-today]=\"isToday(daySlot.date)\"\n class=\"ax-scheduler-week-header-date-day {{\n daySlot.holiday.state !== 'none' ? (daySlot.holiday.holiday?.cssClass ?? 'ax-state-holiday') : ''\n }}\"\n >\n <span\n class=\"ax-scheduler-week-header-date-day-char ax-scheduler-truncate\"\n [axTooltip]=\"daySlot.holiday.holiday?.title ?? ''\"\n >\n {{ daySlot.date | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n @if (daySlot.holiday.state === 'holiday' && daySlot.holiday.holiday.title) {\n ( {{ daySlot.holiday.holiday.title }} )\n }\n </span>\n <span class=\"ax-scheduler-week-header-date-day-num\">\n {{ daySlot.date | format: 'date' : { format: 'DD', calendar: calendar() } | async }}\n </span>\n </div>\n <ax-scheduler-timeline-day-view\n [date]=\"daySlot.date\"\n [readonly]=\"readonly()\"\n [draggable]=\"draggable()\"\n [endDayHour]=\"endDayHour()\"\n [startDayHour]=\"startDayHour()\"\n [hasActions]=\"hasActions()\"\n [dragStartDelay]=\"dragStartDelay()\"\n [tooltipTemplate]=\"tooltipTemplate()\"\n [appointments]=\"daySlot.originalAppointmentsForThisDay\"\n (onActionClickInternal)=\"onActionClickInternal.emit($event)\"\n (slotClickedInternal)=\"slotClickedInternal.emit($event)\"\n (slotDblClickedInternal)=\"slotDblClickedInternal.emit($event)\"\n (slotRightClickedInternal)=\"slotRightClickedInternal.emit($event)\"\n (onAppointmentDropInternal)=\"onAppointmentDropInternal.emit($event)\"\n (appointmentClickedInternal)=\"appointmentClickedInternal.emit($event)\"\n (appointmentDblClickedInternal)=\"appointmentDblClickedInternal.emit($event)\"\n (appointmentRightClickedInternal)=\"appointmentRightClickedInternal.emit($event)\"\n >\n </ax-scheduler-timeline-day-view>\n </div>\n }\n</div>\n", styles: ["ax-scheduler-timeline-multi-day-view .ax-scheduler-timeline-day-view-container{height:100%;display:flex;flex-direction:row}ax-scheduler-timeline-multi-day-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day{gap:.25rem;height:4rem;display:flex;position:relative;align-items:start;padding-inline:1rem;flex-direction:column;padding-block:.25rem;justify-content:center;border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface));border-block-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-timeline-multi-day-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface),.05)}ax-scheduler-timeline-multi-day-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day.ax-state-today .ax-scheduler-week-header-date-day-char{font-weight:500}ax-scheduler-timeline-multi-day-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day.ax-state-today .ax-scheduler-week-header-date-day-num{font-weight:700}ax-scheduler-timeline-multi-day-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day.ax-state-holiday{color:rgba(var(--ax-sys-color-danger-surface))}ax-scheduler-timeline-multi-day-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day.ax-state-holiday.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-timeline-multi-day-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day .ax-scheduler-week-header-date-day-char{max-width:100%;position:sticky;font-weight:300;inset-inline-start:1rem}ax-scheduler-timeline-multi-day-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day .ax-scheduler-week-header-date-day-num{position:sticky;font-weight:500;font-size:1.25rem;inset-inline-start:1rem}ax-scheduler-timeline-multi-day-view ax-scheduler-timeline-day-view{height:calc(100% - 4rem)}\n"], dependencies: [{ kind: "component", type: AXSchedulerTimelineDayViewComponent, selector: "ax-scheduler-timeline-day-view", inputs: ["readonly", "draggable", "hasActions", "dragStartDelay", "calendar", "date", "endDayHour", "startDayHour", "appointments", "tooltipTemplate"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onActionClickInternal", "onAppointmentDropInternal"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXFormatPipe, name: "format" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
1686
1700
  }
1687
1701
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXSchedulerTimelineMultiDayViewComponent, decorators: [{
1688
1702
  type: Component,
1689
- args: [{ selector: 'ax-scheduler-timeline-multi-day-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXSchedulerTimelineDayViewComponent, AsyncPipe, AXFormatPipe, AXTooltipDirective], providers: [{ provide: AXComponent, useExisting: AXSchedulerTimelineMultiDayViewComponent }], template: "<div class=\"ax-scheduler-timeline-day-view-container\">\n @for (daySlot of daysDataForTimelineViews(); track daySlot.date.date.getTime()) {\n <div class=\"ax-scheduler-timeline-multi-day-column\">\n <div\n class=\"ax-scheduler-week-header-date-day\"\n [class.ax-state-today]=\"isToday(daySlot.date)\"\n [class.ax-state-holiday]=\"daySlot.holiday.state !== 'none'\"\n >\n <span\n class=\"ax-scheduler-week-header-date-day-char ax-scheduler-truncate\"\n [axTooltip]=\"daySlot.holiday?.holiday?.title ?? ''\"\n >\n {{ daySlot.date | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n @if (daySlot.holiday.state === 'holiday' && daySlot.holiday.holiday.title) {\n ( {{ daySlot.holiday.holiday.title }} )\n }\n </span>\n <span class=\"ax-scheduler-week-header-date-day-num\">\n {{ daySlot.date | format: 'date' : { format: 'DD', calendar: calendar() } | async }}\n </span>\n </div>\n <ax-scheduler-timeline-day-view\n [date]=\"daySlot.date\"\n [readonly]=\"readonly()\"\n [draggable]=\"draggable()\"\n [endDayHour]=\"endDayHour()\"\n [startDayHour]=\"startDayHour()\"\n [hasActions]=\"hasActions()\"\n [dragStartDelay]=\"dragStartDelay()\"\n [tooltipTemplate]=\"tooltipTemplate()\"\n [appointments]=\"daySlot.originalAppointmentsForThisDay\"\n (onActionClickInternal)=\"onActionClickInternal.emit($event)\"\n (slotClickedInternal)=\"slotClickedInternal.emit($event)\"\n (slotDblClickedInternal)=\"slotDblClickedInternal.emit($event)\"\n (slotRightClickedInternal)=\"slotRightClickedInternal.emit($event)\"\n (onAppointmentDropInternal)=\"onAppointmentDropInternal.emit($event)\"\n (appointmentClickedInternal)=\"appointmentClickedInternal.emit($event)\"\n (appointmentDblClickedInternal)=\"appointmentDblClickedInternal.emit($event)\"\n (appointmentRightClickedInternal)=\"appointmentRightClickedInternal.emit($event)\"\n >\n </ax-scheduler-timeline-day-view>\n </div>\n }\n</div>\n", styles: ["ax-scheduler-timeline-multi-day-view .ax-scheduler-timeline-day-view-container{height:100%;display:flex;flex-direction:row}ax-scheduler-timeline-multi-day-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day{gap:.25rem;height:4rem;display:flex;position:relative;align-items:start;padding-inline:1rem;flex-direction:column;padding-block:.25rem;justify-content:center;border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface));border-block-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-timeline-multi-day-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface),.05)}ax-scheduler-timeline-multi-day-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day.ax-state-today .ax-scheduler-week-header-date-day-char{font-weight:500}ax-scheduler-timeline-multi-day-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day.ax-state-today .ax-scheduler-week-header-date-day-num{font-weight:700}ax-scheduler-timeline-multi-day-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day.ax-state-holiday{color:rgba(var(--ax-sys-color-danger-surface))}ax-scheduler-timeline-multi-day-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day.ax-state-holiday.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-timeline-multi-day-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day .ax-scheduler-week-header-date-day-char{max-width:100%;position:sticky;font-weight:300;inset-inline-start:1rem}ax-scheduler-timeline-multi-day-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day .ax-scheduler-week-header-date-day-num{position:sticky;font-weight:500;font-size:1.25rem;inset-inline-start:1rem}ax-scheduler-timeline-multi-day-view ax-scheduler-timeline-day-view{height:calc(100% - 4rem)}\n"] }]
1703
+ args: [{ selector: 'ax-scheduler-timeline-multi-day-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXSchedulerTimelineDayViewComponent, AsyncPipe, AXFormatPipe, AXTooltipDirective], providers: [{ provide: AXComponent, useExisting: AXSchedulerTimelineMultiDayViewComponent }], template: "<div class=\"ax-scheduler-timeline-day-view-container\">\n @for (daySlot of daysDataForTimelineViews(); track daySlot.date.date.getTime()) {\n <div class=\"ax-scheduler-timeline-multi-day-column\">\n <div\n [class.ax-state-today]=\"isToday(daySlot.date)\"\n class=\"ax-scheduler-week-header-date-day {{\n daySlot.holiday.state !== 'none' ? (daySlot.holiday.holiday?.cssClass ?? 'ax-state-holiday') : ''\n }}\"\n >\n <span\n class=\"ax-scheduler-week-header-date-day-char ax-scheduler-truncate\"\n [axTooltip]=\"daySlot.holiday.holiday?.title ?? ''\"\n >\n {{ daySlot.date | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n @if (daySlot.holiday.state === 'holiday' && daySlot.holiday.holiday.title) {\n ( {{ daySlot.holiday.holiday.title }} )\n }\n </span>\n <span class=\"ax-scheduler-week-header-date-day-num\">\n {{ daySlot.date | format: 'date' : { format: 'DD', calendar: calendar() } | async }}\n </span>\n </div>\n <ax-scheduler-timeline-day-view\n [date]=\"daySlot.date\"\n [readonly]=\"readonly()\"\n [draggable]=\"draggable()\"\n [endDayHour]=\"endDayHour()\"\n [startDayHour]=\"startDayHour()\"\n [hasActions]=\"hasActions()\"\n [dragStartDelay]=\"dragStartDelay()\"\n [tooltipTemplate]=\"tooltipTemplate()\"\n [appointments]=\"daySlot.originalAppointmentsForThisDay\"\n (onActionClickInternal)=\"onActionClickInternal.emit($event)\"\n (slotClickedInternal)=\"slotClickedInternal.emit($event)\"\n (slotDblClickedInternal)=\"slotDblClickedInternal.emit($event)\"\n (slotRightClickedInternal)=\"slotRightClickedInternal.emit($event)\"\n (onAppointmentDropInternal)=\"onAppointmentDropInternal.emit($event)\"\n (appointmentClickedInternal)=\"appointmentClickedInternal.emit($event)\"\n (appointmentDblClickedInternal)=\"appointmentDblClickedInternal.emit($event)\"\n (appointmentRightClickedInternal)=\"appointmentRightClickedInternal.emit($event)\"\n >\n </ax-scheduler-timeline-day-view>\n </div>\n }\n</div>\n", styles: ["ax-scheduler-timeline-multi-day-view .ax-scheduler-timeline-day-view-container{height:100%;display:flex;flex-direction:row}ax-scheduler-timeline-multi-day-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day{gap:.25rem;height:4rem;display:flex;position:relative;align-items:start;padding-inline:1rem;flex-direction:column;padding-block:.25rem;justify-content:center;border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface));border-block-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-timeline-multi-day-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface),.05)}ax-scheduler-timeline-multi-day-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day.ax-state-today .ax-scheduler-week-header-date-day-char{font-weight:500}ax-scheduler-timeline-multi-day-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day.ax-state-today .ax-scheduler-week-header-date-day-num{font-weight:700}ax-scheduler-timeline-multi-day-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day.ax-state-holiday{color:rgba(var(--ax-sys-color-danger-surface))}ax-scheduler-timeline-multi-day-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day.ax-state-holiday.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-timeline-multi-day-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day .ax-scheduler-week-header-date-day-char{max-width:100%;position:sticky;font-weight:300;inset-inline-start:1rem}ax-scheduler-timeline-multi-day-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day .ax-scheduler-week-header-date-day-num{position:sticky;font-weight:500;font-size:1.25rem;inset-inline-start:1rem}ax-scheduler-timeline-multi-day-view ax-scheduler-timeline-day-view{height:calc(100% - 4rem)}\n"] }]
1690
1704
  }] });
1691
1705
 
1692
1706
  class AXSchedulerWeekViewComponent extends NXComponent {
@@ -2068,7 +2082,9 @@ class AXSchedulerWeekViewComponent extends NXComponent {
2068
2082
  * @returns An object describing the day's status (holiday, weekend, or none).
2069
2083
  */
2070
2084
  isHoliday(date) {
2071
- const holiday = this.calendarService.holidays.find((d) => date.equal(d.date, 'day'));
2085
+ const globalHoliday = this.calendarService.holidays.find((d) => date.equal(d.date, 'day'));
2086
+ const internalHoliday = this.schedulerService.internalHoliday().find((d) => date.equal(d.date, 'day'));
2087
+ const holiday = globalHoliday || internalHoliday;
2072
2088
  if (holiday)
2073
2089
  return { state: 'holiday', holiday };
2074
2090
  if (this.schedulerService.isWeekend(date, this.calendar()))
@@ -2090,7 +2106,7 @@ class AXSchedulerWeekViewComponent extends NXComponent {
2090
2106
  return this.readonly();
2091
2107
  }
2092
2108
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXSchedulerWeekViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
2093
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: AXSchedulerWeekViewComponent, isStandalone: true, selector: "ax-scheduler-week-view", inputs: { readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, hasActions: { classPropertyName: "hasActions", publicName: "hasActions", isSignal: true, isRequired: false, transformFunction: null }, dragStartDelay: { classPropertyName: "dragStartDelay", publicName: "dragStartDelay", isSignal: true, isRequired: false, transformFunction: null }, calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: true, transformFunction: null }, endDayHour: { classPropertyName: "endDayHour", publicName: "endDayHour", isSignal: true, isRequired: true, transformFunction: null }, startDayHour: { classPropertyName: "startDayHour", publicName: "startDayHour", isSignal: true, isRequired: true, transformFunction: null }, appointments: { classPropertyName: "appointments", publicName: "appointments", isSignal: true, isRequired: false, transformFunction: null }, tooltipTemplate: { classPropertyName: "tooltipTemplate", publicName: "tooltipTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { slotClickedInternal: "slotClickedInternal", slotDblClickedInternal: "slotDblClickedInternal", slotRightClickedInternal: "slotRightClickedInternal", appointmentClickedInternal: "appointmentClickedInternal", appointmentDblClickedInternal: "appointmentDblClickedInternal", appointmentRightClickedInternal: "appointmentRightClickedInternal", onActionClickInternal: "onActionClickInternal", onAppointmentDropInternal: "onAppointmentDropInternal" }, host: { properties: { "class.ax-state-readonly": "this.isReadonly" } }, providers: [{ provide: AXComponent, useExisting: AXSchedulerWeekViewComponent }], 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 [class.ax-state-holiday]=\"day.holiday.state !== 'none'\"\n >\n <span\n class=\"ax-scheduler-week-header-date-day-char ax-scheduler-truncate\"\n [axTooltip]=\"day.holiday?.holiday?.title ?? ''\"\n >\n {{ day.date | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n @if (day.holiday.state === 'holiday' && day.holiday.holiday.title) {\n ( {{ day.holiday.holiday.title }} )\n }\n </span>\n <span class=\"ax-scheduler-week-header-date-day-num\">\n {{ day.date | format: 'date' : { format: 'DD', calendar: calendar() } | async }}\n </span>\n </div>\n }\n </div>\n </div>\n <div class=\"ax-scheduler-week-header-days\">\n <div class=\"ax-scheduler-week-header-table\">{{ '@acorex:dateTime.duration.all-day' | translate | async }}</div>\n <div aria-hidden=\"true\" class=\"ax-scheduler-week-header-date\">\n @for (slotData of allDayAppointmentsPerDay(); track slotData.day.date.getTime()) {\n <div\n 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 @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 [ngClass]=\"\n slotData.appointments[0].cssClass ??\n `ax-scheduler-${slotData.appointments[0].priority ?? 'primary'}-periority`\n \"\n [tooltipDisabled]=\"tooltipTemplate() ? false : true\"\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 [ngClass]=\"\n slotData.appointments[1].cssClass ??\n `ax-scheduler-${slotData.appointments[1].priority ?? 'primary'}-periority`\n \"\n >\n +{{ slotData.appointments.length - 1 }}\n </div>\n <ax-popover [target]=\"moreAppointments\">\n <div class=\"ax-overlay-pane 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 [ngClass]=\"appointment.cssClass ?? `ax-scheduler-${appointment.priority ?? 'primary'}-periority`\"\n [tooltipDisabled]=\"tooltipTemplate() ? false : true\"\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\n<div class=\"ax-scheduler-week-time-container\">\n <div class=\"ax-scheduler-week-time\" aria-hidden=\"true\">\n @for (time of hoursArray(); track time.date.getTime()) {\n <div>\n {{ time | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n </div>\n }\n </div>\n\n <div class=\"ax-scheduler-week-table-container\">\n <div class=\"ax-scheduler-week-appointment-container\">\n @for (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 [ngClass]=\"appt.appointment.cssClass ?? `ax-scheduler-${appt.appointment.priority ?? 'primary'}-periority`\"\n [tooltipDisabled]=\"tooltipTemplate() ? false : true\"\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 [ngClass]=\"\n badge.hiddenAppointments[0].cssClass ??\n `ax-scheduler-${badge.hiddenAppointments[0].priority ?? 'primary'}-periority`\n \"\n >\n +{{ badge.count }}\n </div>\n <!-- The Popover -->\n <ax-popover [target]=\"actionButton\">\n <div class=\"ax-overlay-pane 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 [ngClass]=\"appointment.cssClass ?? `ax-scheduler-${appointment.priority ?? 'primary'}-periority`\"\n [tooltipDisabled]=\"tooltipTemplate() ? false : true\"\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: ["ax-scheduler-week-view{display:block;position:relative;background-color:inherit;min-width:var(--ax-comp-scheduler-width)}ax-scheduler-week-view .ax-scheduler-appointment-badge{display:flex;width:1.5rem;height:1.5rem;cursor:pointer;font-size:.75rem;align-items:center;border-radius:9999px;justify-content:center}ax-scheduler-week-view .ax-scheduler-week-header{top:0;z-index:2;width:100%;position:sticky;background-color:var(--ax-comp-scheduler-all-day-bg, inherit)}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days{display:flex;background-color:inherit;border-block-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-table{z-index:2;flex-shrink:0;position:sticky;text-align:center;inset-inline-start:0;width:var(--ax-comp-scheduler-basic-view-blocks-width);background-color:inherit;border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}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{width:100%;text-align:center;border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-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{gap:.25rem;display:grid;align-items:center;padding-inline:.5rem;justify-content:center}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));background-color:rgba(var(--ax-sys-color-primary-surface),.05)}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{font-weight: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{font-weight:700}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day.ax-state-holiday{color:rgba(var(--ax-sys-color-danger-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{max-width:100%;font-weight: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-weight:500;font-size:1.25rem}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div:last-child{border-inline-end-width:0}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date .ax-scheduler-all-day-slot{gap:.25rem;display:flex;width:14.2857142857%}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date .ax-scheduler-all-day-slot .ax-scheduler-header-week-appointment{display:block;overflow:hidden;text-align:start;padding-inline:.5rem;width:100%;border-radius:calc(var(--ax-sys-border-radius) / 2)}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date .ax-scheduler-all-day-slot ax-popover{display:none}ax-scheduler-week-view .ax-scheduler-week-time-container{width:100%;display:flex;background-color:inherit}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-time{z-index:1;position:sticky;inset-inline-start:0;background-color:var(--ax-comp-scheduler-all-day-bg, inherit)}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-time div{display:block;text-align:center;padding-inline:.5rem;width:var(--ax-comp-scheduler-basic-view-blocks-width);height:calc(var(--ax-comp-scheduler-basic-view-blocks-height) * 2);border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container{width:100%;position:relative}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container .ax-scheduler-week-appointment-container{top:0;width:100%;position:absolute}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container .ax-scheduler-week-appointment-container .ax-scheduler-week-appointment{display:flex;position:absolute;inset-inline-start:0;flex-direction:column;padding-block:.25rem;padding-inline:.5rem;border-radius:calc(var(--ax-sys-border-radius) / 2)}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{display:flex;height:var(--ax-comp-scheduler-basic-view-blocks-height);border-block-start:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table tr:first-child{border-block-start-width:0}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table tr td{width:100%;text-align:center;border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table tr td:last-child{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-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-scheduler-week-view:not(.ax-state-readonly) .ax-scheduler-all-day-slot:hover,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{display:flex;justify-content:space-between}ax-scheduler-week-view ax-title .ax-scheduler-action-icon{width:auto;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["dragData", "dragDisabled", "dragTransition", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragClonedTemplate", "dragCursor", "dragBoundary", "dragTransitionDuration"], outputs: ["dragPositionChanged"] }, { kind: "directive", type: AXDropZoneDirective, selector: "[axDropZone]", inputs: ["dropZoneGroup"], outputs: ["onElementDrop", "onElementHover"], exportAs: ["axDropZone"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["tooltipDisabled", "axTooltip", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AXFormatPipe, name: "format" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
2109
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: AXSchedulerWeekViewComponent, isStandalone: true, selector: "ax-scheduler-week-view", inputs: { readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, hasActions: { classPropertyName: "hasActions", publicName: "hasActions", isSignal: true, isRequired: false, transformFunction: null }, dragStartDelay: { classPropertyName: "dragStartDelay", publicName: "dragStartDelay", isSignal: true, isRequired: false, transformFunction: null }, calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: true, transformFunction: null }, endDayHour: { classPropertyName: "endDayHour", publicName: "endDayHour", isSignal: true, isRequired: true, transformFunction: null }, startDayHour: { classPropertyName: "startDayHour", publicName: "startDayHour", isSignal: true, isRequired: true, transformFunction: null }, appointments: { classPropertyName: "appointments", publicName: "appointments", isSignal: true, isRequired: false, transformFunction: null }, tooltipTemplate: { classPropertyName: "tooltipTemplate", publicName: "tooltipTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { slotClickedInternal: "slotClickedInternal", slotDblClickedInternal: "slotDblClickedInternal", slotRightClickedInternal: "slotRightClickedInternal", appointmentClickedInternal: "appointmentClickedInternal", appointmentDblClickedInternal: "appointmentDblClickedInternal", appointmentRightClickedInternal: "appointmentRightClickedInternal", onActionClickInternal: "onActionClickInternal", onAppointmentDropInternal: "onAppointmentDropInternal" }, host: { properties: { "class.ax-state-readonly": "this.isReadonly" } }, providers: [{ provide: AXComponent, useExisting: AXSchedulerWeekViewComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-scheduler-week-header\">\n <div class=\"ax-scheduler-week-header-days\">\n <div class=\"ax-scheduler-week-header-table\"></div>\n <div class=\"ax-scheduler-week-header-date\" aria-hidden=\"true\">\n @for (day of daysArray(); track day.date.date.getTime()) {\n <div\n [class.ax-state-today]=\"isToday(day.date)\"\n class=\"ax-scheduler-week-header-date-day {{\n day.holiday.state !== 'none' ? (day.holiday.holiday?.cssClass ?? 'ax-state-holiday') : ''\n }}\"\n >\n <span\n class=\"ax-scheduler-week-header-date-day-char ax-scheduler-truncate\"\n [axTooltip]=\"day.holiday?.holiday?.title ?? ''\"\n >\n {{ day.date | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n @if (day.holiday.state === 'holiday' && day.holiday.holiday.title) {\n ( {{ day.holiday.holiday.title }} )\n }\n </span>\n <span class=\"ax-scheduler-week-header-date-day-num\">\n {{ day.date | format: 'date' : { format: 'DD', calendar: calendar() } | async }}\n </span>\n </div>\n }\n </div>\n </div>\n <div class=\"ax-scheduler-week-header-days\">\n <div class=\"ax-scheduler-week-header-table\">{{ '@acorex:dateTime.duration.all-day' | translate | async }}</div>\n <div aria-hidden=\"true\" class=\"ax-scheduler-week-header-date\">\n @for (slotData of allDayAppointmentsPerDay(); track slotData.day.date.getTime()) {\n <div\n 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 @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 [ngClass]=\"\n slotData.appointments[0].cssClass ??\n `ax-scheduler-${slotData.appointments[0].priority ?? 'primary'}-periority`\n \"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\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 [ngClass]=\"\n slotData.appointments[1].cssClass ??\n `ax-scheduler-${slotData.appointments[1].priority ?? 'primary'}-periority`\n \"\n >\n +{{ slotData.appointments.length - 1 }}\n </div>\n <ax-popover [target]=\"moreAppointments\">\n <div class=\"ax-overlay-pane 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 [ngClass]=\"appointment.cssClass ?? `ax-scheduler-${appointment.priority ?? 'primary'}-periority`\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\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\n<div class=\"ax-scheduler-week-time-container\">\n <div class=\"ax-scheduler-week-time\" aria-hidden=\"true\">\n @for (time of hoursArray(); track time.date.getTime()) {\n <div>\n {{ time | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n </div>\n }\n </div>\n\n <div class=\"ax-scheduler-week-table-container\">\n <div class=\"ax-scheduler-week-appointment-container\">\n @for (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 [ngClass]=\"appt.appointment.cssClass ?? `ax-scheduler-${appt.appointment.priority ?? 'primary'}-periority`\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\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 [ngClass]=\"\n badge.hiddenAppointments[0].cssClass ??\n `ax-scheduler-${badge.hiddenAppointments[0].priority ?? 'primary'}-periority`\n \"\n >\n +{{ badge.count }}\n </div>\n <!-- The Popover -->\n <ax-popover [target]=\"actionButton\">\n <div class=\"ax-overlay-pane 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 [ngClass]=\"appointment.cssClass ?? `ax-scheduler-${appointment.priority ?? 'primary'}-periority`\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\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: ["ax-scheduler-week-view{display:block;position:relative;background-color:inherit;min-width:var(--ax-comp-scheduler-width)}ax-scheduler-week-view .ax-scheduler-appointment-badge{display:flex;width:1.5rem;height:1.5rem;cursor:pointer;font-size:.75rem;align-items:center;border-radius:9999px;justify-content:center}ax-scheduler-week-view .ax-scheduler-week-header{top:0;z-index:2;width:100%;position:sticky;background-color:var(--ax-comp-scheduler-all-day-bg, inherit)}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days{display:flex;background-color:inherit;border-block-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-table{z-index:2;flex-shrink:0;position:sticky;text-align:center;inset-inline-start:0;width:var(--ax-comp-scheduler-basic-view-blocks-width);background-color:inherit;border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}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{width:100%;text-align:center;border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-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{gap:.25rem;display:grid;align-items:center;padding-inline:.5rem;justify-content:center}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));background-color:rgba(var(--ax-sys-color-primary-surface),.05)}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{font-weight: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{font-weight:700}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day.ax-state-holiday{color:rgba(var(--ax-sys-color-danger-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{max-width:100%;font-weight: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-weight:500;font-size:1.25rem}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div:last-child{border-inline-end-width:0}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date .ax-scheduler-all-day-slot{gap:.25rem;display:flex;width:14.2857142857%}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date .ax-scheduler-all-day-slot .ax-scheduler-header-week-appointment{display:block;overflow:hidden;text-align:start;padding-inline:.5rem;width:100%;border-radius:calc(var(--ax-sys-border-radius) / 2)}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date .ax-scheduler-all-day-slot ax-popover{display:none}ax-scheduler-week-view .ax-scheduler-week-time-container{width:100%;display:flex;background-color:inherit}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-time{z-index:1;position:sticky;inset-inline-start:0;background-color:var(--ax-comp-scheduler-all-day-bg, inherit)}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-time div{display:block;text-align:center;padding-inline:.5rem;width:var(--ax-comp-scheduler-basic-view-blocks-width);height:calc(var(--ax-comp-scheduler-basic-view-blocks-height) * 2);border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container{width:100%;position:relative}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container .ax-scheduler-week-appointment-container{top:0;width:100%;position:absolute}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container .ax-scheduler-week-appointment-container .ax-scheduler-week-appointment{display:flex;position:absolute;inset-inline-start:0;flex-direction:column;padding-block:.25rem;padding-inline:.5rem;border-radius:calc(var(--ax-sys-border-radius) / 2)}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{display:flex;height:var(--ax-comp-scheduler-basic-view-blocks-height);border-block-start:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table tr:first-child{border-block-start-width:0}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table tr td{width:100%;text-align:center;border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table tr td:last-child{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-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-scheduler-week-view:not(.ax-state-readonly) .ax-scheduler-all-day-slot:hover,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{display:flex;justify-content:space-between}ax-scheduler-week-view ax-title .ax-scheduler-action-icon{width:auto;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["dragData", "dragDisabled", "dragTransition", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragClonedTemplate", "dragCursor", "dragBoundary", "dragTransitionDuration"], outputs: ["dragPositionChanged"] }, { kind: "directive", type: AXDropZoneDirective, selector: "[axDropZone]", inputs: ["dropZoneGroup"], outputs: ["onElementDrop", "onElementHover"], exportAs: ["axDropZone"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AXFormatPipe, name: "format" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
2094
2110
  }
2095
2111
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXSchedulerWeekViewComponent, decorators: [{
2096
2112
  type: Component,
@@ -2106,7 +2122,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
2106
2122
  AXTooltipDirective,
2107
2123
  AXDecoratorIconComponent,
2108
2124
  AXTooltipDirective,
2109
- ], 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 [class.ax-state-holiday]=\"day.holiday.state !== 'none'\"\n >\n <span\n class=\"ax-scheduler-week-header-date-day-char ax-scheduler-truncate\"\n [axTooltip]=\"day.holiday?.holiday?.title ?? ''\"\n >\n {{ day.date | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n @if (day.holiday.state === 'holiday' && day.holiday.holiday.title) {\n ( {{ day.holiday.holiday.title }} )\n }\n </span>\n <span class=\"ax-scheduler-week-header-date-day-num\">\n {{ day.date | format: 'date' : { format: 'DD', calendar: calendar() } | async }}\n </span>\n </div>\n }\n </div>\n </div>\n <div class=\"ax-scheduler-week-header-days\">\n <div class=\"ax-scheduler-week-header-table\">{{ '@acorex:dateTime.duration.all-day' | translate | async }}</div>\n <div aria-hidden=\"true\" class=\"ax-scheduler-week-header-date\">\n @for (slotData of allDayAppointmentsPerDay(); track slotData.day.date.getTime()) {\n <div\n 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 @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 [ngClass]=\"\n slotData.appointments[0].cssClass ??\n `ax-scheduler-${slotData.appointments[0].priority ?? 'primary'}-periority`\n \"\n [tooltipDisabled]=\"tooltipTemplate() ? false : true\"\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 [ngClass]=\"\n slotData.appointments[1].cssClass ??\n `ax-scheduler-${slotData.appointments[1].priority ?? 'primary'}-periority`\n \"\n >\n +{{ slotData.appointments.length - 1 }}\n </div>\n <ax-popover [target]=\"moreAppointments\">\n <div class=\"ax-overlay-pane 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 [ngClass]=\"appointment.cssClass ?? `ax-scheduler-${appointment.priority ?? 'primary'}-periority`\"\n [tooltipDisabled]=\"tooltipTemplate() ? false : true\"\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\n<div class=\"ax-scheduler-week-time-container\">\n <div class=\"ax-scheduler-week-time\" aria-hidden=\"true\">\n @for (time of hoursArray(); track time.date.getTime()) {\n <div>\n {{ time | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n </div>\n }\n </div>\n\n <div class=\"ax-scheduler-week-table-container\">\n <div class=\"ax-scheduler-week-appointment-container\">\n @for (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 [ngClass]=\"appt.appointment.cssClass ?? `ax-scheduler-${appt.appointment.priority ?? 'primary'}-periority`\"\n [tooltipDisabled]=\"tooltipTemplate() ? false : true\"\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 [ngClass]=\"\n badge.hiddenAppointments[0].cssClass ??\n `ax-scheduler-${badge.hiddenAppointments[0].priority ?? 'primary'}-periority`\n \"\n >\n +{{ badge.count }}\n </div>\n <!-- The Popover -->\n <ax-popover [target]=\"actionButton\">\n <div class=\"ax-overlay-pane 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 [ngClass]=\"appointment.cssClass ?? `ax-scheduler-${appointment.priority ?? 'primary'}-periority`\"\n [tooltipDisabled]=\"tooltipTemplate() ? false : true\"\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: ["ax-scheduler-week-view{display:block;position:relative;background-color:inherit;min-width:var(--ax-comp-scheduler-width)}ax-scheduler-week-view .ax-scheduler-appointment-badge{display:flex;width:1.5rem;height:1.5rem;cursor:pointer;font-size:.75rem;align-items:center;border-radius:9999px;justify-content:center}ax-scheduler-week-view .ax-scheduler-week-header{top:0;z-index:2;width:100%;position:sticky;background-color:var(--ax-comp-scheduler-all-day-bg, inherit)}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days{display:flex;background-color:inherit;border-block-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-table{z-index:2;flex-shrink:0;position:sticky;text-align:center;inset-inline-start:0;width:var(--ax-comp-scheduler-basic-view-blocks-width);background-color:inherit;border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}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{width:100%;text-align:center;border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-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{gap:.25rem;display:grid;align-items:center;padding-inline:.5rem;justify-content:center}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));background-color:rgba(var(--ax-sys-color-primary-surface),.05)}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{font-weight: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{font-weight:700}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day.ax-state-holiday{color:rgba(var(--ax-sys-color-danger-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{max-width:100%;font-weight: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-weight:500;font-size:1.25rem}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div:last-child{border-inline-end-width:0}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date .ax-scheduler-all-day-slot{gap:.25rem;display:flex;width:14.2857142857%}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date .ax-scheduler-all-day-slot .ax-scheduler-header-week-appointment{display:block;overflow:hidden;text-align:start;padding-inline:.5rem;width:100%;border-radius:calc(var(--ax-sys-border-radius) / 2)}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date .ax-scheduler-all-day-slot ax-popover{display:none}ax-scheduler-week-view .ax-scheduler-week-time-container{width:100%;display:flex;background-color:inherit}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-time{z-index:1;position:sticky;inset-inline-start:0;background-color:var(--ax-comp-scheduler-all-day-bg, inherit)}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-time div{display:block;text-align:center;padding-inline:.5rem;width:var(--ax-comp-scheduler-basic-view-blocks-width);height:calc(var(--ax-comp-scheduler-basic-view-blocks-height) * 2);border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container{width:100%;position:relative}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container .ax-scheduler-week-appointment-container{top:0;width:100%;position:absolute}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container .ax-scheduler-week-appointment-container .ax-scheduler-week-appointment{display:flex;position:absolute;inset-inline-start:0;flex-direction:column;padding-block:.25rem;padding-inline:.5rem;border-radius:calc(var(--ax-sys-border-radius) / 2)}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{display:flex;height:var(--ax-comp-scheduler-basic-view-blocks-height);border-block-start:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table tr:first-child{border-block-start-width:0}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table tr td{width:100%;text-align:center;border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table tr td:last-child{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-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-scheduler-week-view:not(.ax-state-readonly) .ax-scheduler-all-day-slot:hover,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{display:flex;justify-content:space-between}ax-scheduler-week-view ax-title .ax-scheduler-action-icon{width:auto;cursor:pointer}\n"] }]
2125
+ ], providers: [{ provide: AXComponent, useExisting: AXSchedulerWeekViewComponent }], template: "<div class=\"ax-scheduler-week-header\">\n <div class=\"ax-scheduler-week-header-days\">\n <div class=\"ax-scheduler-week-header-table\"></div>\n <div class=\"ax-scheduler-week-header-date\" aria-hidden=\"true\">\n @for (day of daysArray(); track day.date.date.getTime()) {\n <div\n [class.ax-state-today]=\"isToday(day.date)\"\n class=\"ax-scheduler-week-header-date-day {{\n day.holiday.state !== 'none' ? (day.holiday.holiday?.cssClass ?? 'ax-state-holiday') : ''\n }}\"\n >\n <span\n class=\"ax-scheduler-week-header-date-day-char ax-scheduler-truncate\"\n [axTooltip]=\"day.holiday?.holiday?.title ?? ''\"\n >\n {{ day.date | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n @if (day.holiday.state === 'holiday' && day.holiday.holiday.title) {\n ( {{ day.holiday.holiday.title }} )\n }\n </span>\n <span class=\"ax-scheduler-week-header-date-day-num\">\n {{ day.date | format: 'date' : { format: 'DD', calendar: calendar() } | async }}\n </span>\n </div>\n }\n </div>\n </div>\n <div class=\"ax-scheduler-week-header-days\">\n <div class=\"ax-scheduler-week-header-table\">{{ '@acorex:dateTime.duration.all-day' | translate | async }}</div>\n <div aria-hidden=\"true\" class=\"ax-scheduler-week-header-date\">\n @for (slotData of allDayAppointmentsPerDay(); track slotData.day.date.getTime()) {\n <div\n 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 @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 [ngClass]=\"\n slotData.appointments[0].cssClass ??\n `ax-scheduler-${slotData.appointments[0].priority ?? 'primary'}-periority`\n \"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\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 [ngClass]=\"\n slotData.appointments[1].cssClass ??\n `ax-scheduler-${slotData.appointments[1].priority ?? 'primary'}-periority`\n \"\n >\n +{{ slotData.appointments.length - 1 }}\n </div>\n <ax-popover [target]=\"moreAppointments\">\n <div class=\"ax-overlay-pane 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 [ngClass]=\"appointment.cssClass ?? `ax-scheduler-${appointment.priority ?? 'primary'}-periority`\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\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\n<div class=\"ax-scheduler-week-time-container\">\n <div class=\"ax-scheduler-week-time\" aria-hidden=\"true\">\n @for (time of hoursArray(); track time.date.getTime()) {\n <div>\n {{ time | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n </div>\n }\n </div>\n\n <div class=\"ax-scheduler-week-table-container\">\n <div class=\"ax-scheduler-week-appointment-container\">\n @for (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 [ngClass]=\"appt.appointment.cssClass ?? `ax-scheduler-${appt.appointment.priority ?? 'primary'}-periority`\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\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 [ngClass]=\"\n badge.hiddenAppointments[0].cssClass ??\n `ax-scheduler-${badge.hiddenAppointments[0].priority ?? 'primary'}-periority`\n \"\n >\n +{{ badge.count }}\n </div>\n <!-- The Popover -->\n <ax-popover [target]=\"actionButton\">\n <div class=\"ax-overlay-pane 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 [ngClass]=\"appointment.cssClass ?? `ax-scheduler-${appointment.priority ?? 'primary'}-periority`\"\n [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\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: ["ax-scheduler-week-view{display:block;position:relative;background-color:inherit;min-width:var(--ax-comp-scheduler-width)}ax-scheduler-week-view .ax-scheduler-appointment-badge{display:flex;width:1.5rem;height:1.5rem;cursor:pointer;font-size:.75rem;align-items:center;border-radius:9999px;justify-content:center}ax-scheduler-week-view .ax-scheduler-week-header{top:0;z-index:2;width:100%;position:sticky;background-color:var(--ax-comp-scheduler-all-day-bg, inherit)}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days{display:flex;background-color:inherit;border-block-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-table{z-index:2;flex-shrink:0;position:sticky;text-align:center;inset-inline-start:0;width:var(--ax-comp-scheduler-basic-view-blocks-width);background-color:inherit;border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}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{width:100%;text-align:center;border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-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{gap:.25rem;display:grid;align-items:center;padding-inline:.5rem;justify-content:center}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));background-color:rgba(var(--ax-sys-color-primary-surface),.05)}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{font-weight: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{font-weight:700}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day.ax-state-holiday{color:rgba(var(--ax-sys-color-danger-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{max-width:100%;font-weight: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-weight:500;font-size:1.25rem}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div:last-child{border-inline-end-width:0}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date .ax-scheduler-all-day-slot{gap:.25rem;display:flex;width:14.2857142857%}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date .ax-scheduler-all-day-slot .ax-scheduler-header-week-appointment{display:block;overflow:hidden;text-align:start;padding-inline:.5rem;width:100%;border-radius:calc(var(--ax-sys-border-radius) / 2)}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date .ax-scheduler-all-day-slot ax-popover{display:none}ax-scheduler-week-view .ax-scheduler-week-time-container{width:100%;display:flex;background-color:inherit}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-time{z-index:1;position:sticky;inset-inline-start:0;background-color:var(--ax-comp-scheduler-all-day-bg, inherit)}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-time div{display:block;text-align:center;padding-inline:.5rem;width:var(--ax-comp-scheduler-basic-view-blocks-width);height:calc(var(--ax-comp-scheduler-basic-view-blocks-height) * 2);border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container{width:100%;position:relative}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container .ax-scheduler-week-appointment-container{top:0;width:100%;position:absolute}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container .ax-scheduler-week-appointment-container .ax-scheduler-week-appointment{display:flex;position:absolute;inset-inline-start:0;flex-direction:column;padding-block:.25rem;padding-inline:.5rem;border-radius:calc(var(--ax-sys-border-radius) / 2)}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{display:flex;height:var(--ax-comp-scheduler-basic-view-blocks-height);border-block-start:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table tr:first-child{border-block-start-width:0}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table tr td{width:100%;text-align:center;border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table tr td:last-child{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-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-scheduler-week-view:not(.ax-state-readonly) .ax-scheduler-all-day-slot:hover,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{display:flex;justify-content:space-between}ax-scheduler-week-view ax-title .ax-scheduler-action-icon{width:auto;cursor:pointer}\n"] }]
2110
2126
  }], propDecorators: { isReadonly: [{
2111
2127
  type: HostBinding,
2112
2128
  args: ['class.ax-state-readonly']
@@ -2154,6 +2170,7 @@ class AXSchedulerComponent extends NXComponent {
2154
2170
  this.multiDayViewDaysCount = input(7, ...(ngDevMode ? [{ debugName: "multiDayViewDaysCount" }] : []));
2155
2171
  this.tooltipTemplate = input(...(ngDevMode ? [undefined, { debugName: "tooltipTemplate" }] : []));
2156
2172
  this.dataSource = input([], ...(ngDevMode ? [{ debugName: "dataSource" }] : []));
2173
+ this.holidays = input(...(ngDevMode ? [undefined, { debugName: "holidays" }] : []));
2157
2174
  this.firstDayOfWeek = input('sunday', ...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : []));
2158
2175
  this.views = input([
2159
2176
  'day',
@@ -2193,6 +2210,14 @@ class AXSchedulerComponent extends NXComponent {
2193
2210
  }
2194
2211
  this.onDataLoaded.emit();
2195
2212
  }, ...(ngDevMode ? [{ debugName: "#appointmentEffect" }] : []));
2213
+ this.#holidayEffect = effect(async () => {
2214
+ const func = this.holidays();
2215
+ const range = {
2216
+ end: this.range().end,
2217
+ from: this.range().from,
2218
+ };
2219
+ this.schedulerService.internalHoliday.set(await func(range));
2220
+ }, ...(ngDevMode ? [{ debugName: "#holidayEffect" }] : []));
2196
2221
  this.currentDateText = computed(() => {
2197
2222
  switch (this.selectedView()) {
2198
2223
  case 'day':
@@ -2358,6 +2383,7 @@ class AXSchedulerComponent extends NXComponent {
2358
2383
  this.fillDataSource();
2359
2384
  }
2360
2385
  #appointmentEffect;
2386
+ #holidayEffect;
2361
2387
  async fillDataSource() {
2362
2388
  const result = [];
2363
2389
  for await (const c of this.views()) {
@@ -2486,7 +2512,7 @@ class AXSchedulerComponent extends NXComponent {
2486
2512
  this.onDataLoaded.emit();
2487
2513
  }
2488
2514
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXSchedulerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
2489
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: AXSchedulerComponent, isStandalone: true, selector: "ax-scheduler", inputs: { calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, startingDate: { classPropertyName: "startingDate", publicName: "startingDate", isSignal: true, isRequired: false, transformFunction: null }, endDayHour: { classPropertyName: "endDayHour", publicName: "endDayHour", isSignal: true, isRequired: false, transformFunction: null }, startDayHour: { classPropertyName: "startDayHour", publicName: "startDayHour", isSignal: true, isRequired: false, transformFunction: null }, hasHeader: { classPropertyName: "hasHeader", publicName: "hasHeader", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, hasActions: { classPropertyName: "hasActions", publicName: "hasActions", isSignal: true, isRequired: false, transformFunction: null }, dragStartDelay: { classPropertyName: "dragStartDelay", publicName: "dragStartDelay", isSignal: true, isRequired: false, transformFunction: null }, allowFullScreen: { classPropertyName: "allowFullScreen", publicName: "allowFullScreen", isSignal: true, isRequired: false, transformFunction: null }, multiDayViewDaysCount: { classPropertyName: "multiDayViewDaysCount", publicName: "multiDayViewDaysCount", isSignal: true, isRequired: false, transformFunction: null }, tooltipTemplate: { classPropertyName: "tooltipTemplate", publicName: "tooltipTemplate", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, views: { classPropertyName: "views", publicName: "views", isSignal: true, isRequired: false, transformFunction: null }, selectedView: { classPropertyName: "selectedView", publicName: "selectedView", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedView: "selectedViewChange", onDataLoaded: "onDataLoaded", onRangeChanged: "onRangeChanged", onSlotClicked: "onSlotClicked", onSlotDblClicked: "onSlotDblClicked", onSlotRightClick: "onSlotRightClick", onAppointmentDrop: "onAppointmentDrop", onActionClick: "onActionClick", onAppointmentClicked: "onAppointmentClicked", onAppointmentDblClicked: "onAppointmentDblClicked", onAppointmentRightClick: "onAppointmentRightClick" }, providers: [AXUnsubscriber, { provide: AXComponent, useExisting: AXSchedulerComponent }], viewQueries: [{ propertyName: "viewModeSelectbox", first: true, predicate: AXSelectBoxComponent, descendants: true, isSignal: true }, { propertyName: "calendarPopover", first: true, predicate: ["calendarPopover"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-scheduler-container\">\n @if (hasHeader()) {\n <div class=\"ax-scheduler-header\">\n <div class=\"ax-scheduler-date\">\n <ax-button look=\"blank\" (onClick)=\"prevClick()\">\n <ax-icon\n class=\"ax-icon ax-text-xl\"\n [ngClass]=\"{\n 'ax-icon-chevron-left': !rtl(),\n 'ax-icon-chevron-right': rtl(),\n }\"\n ></ax-icon>\n </ax-button>\n <ax-button look=\"blank\" [text]=\"currentDateText()\" #date></ax-button>\n <ax-button look=\"blank\" (onClick)=\"nextClick()\">\n <ax-icon\n class=\"ax-icon ax-text-xl\"\n [ngClass]=\"{\n 'ax-icon-chevron-right': !rtl(),\n 'ax-icon-chevron-left': rtl(),\n }\"\n ></ax-icon>\n </ax-button>\n <ax-popover [target]=\"date\" #calendarPopover>\n <div class=\"ax-overlay-pane\">\n <ax-calendar\n [type]=\"calendarType()\"\n [depth]=\"calendarDepth()\"\n [ngModel]=\"currentDate()\"\n (onValueChanged)=\"calendarDateChanged($event)\"\n ></ax-calendar>\n </div>\n </ax-popover>\n </div>\n <div class=\"ax-scheduler-actions\">\n <ax-select-box\n [dropdownWidth]=\"'200px'\"\n [ngModel]=\"selectedView()\"\n [dataSource]=\"viewsDataSource()\"\n (onValueChanged)=\"viewChanged($event)\"\n ></ax-select-box>\n\n @if (allowFullScreen()) {\n <ax-button look=\"blank\" (onClick)=\"handleFullScreen()\">\n <ax-icon>\n <i\n class=\"fa-solid fa-expand\"\n [ngClass]=\"{ 'fa-compress': isFullScreen(), 'fa-expand': !isFullScreen() }\"\n ></i>\n </ax-icon>\n </ax-button>\n }\n </div>\n </div>\n }\n <div class=\"ax-scheduler-views-container\">\n @switch (selectedView()) {\n @case ('day') {\n <ax-scheduler-day-view\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [draggable]=\"draggable()\"\n [hasActions]=\"hasActions()\"\n [calendar]=\"calendarType()\"\n [endDayHour]=\"endDayHour()\"\n [startDayHour]=\"startDayHour()\"\n [appointments]=\"viewAppointments()\"\n [dragStartDelay]=\"dragStartDelay()\"\n [tooltipTemplate]=\"tooltipTemplate()\"\n (onActionClickInternal)=\"onActionClick.emit($event)\"\n (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n ></ax-scheduler-day-view>\n }\n @case ('week') {\n <ax-scheduler-week-view\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [endDayHour]=\"endDayHour()\"\n [hasActions]=\"hasActions()\"\n [startDayHour]=\"startDayHour()\"\n [appointments]=\"viewAppointments()\"\n [dragStartDelay]=\"dragStartDelay()\"\n [tooltipTemplate]=\"tooltipTemplate()\"\n (onActionClickInternal)=\"onActionClick.emit($event)\"\n (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n ></ax-scheduler-week-view>\n }\n @case ('month') {\n <ax-scheduler-month-view\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [hasActions]=\"hasActions()\"\n [appointments]=\"viewAppointments()\"\n [firstDayOfWeek]=\"firstDayOfWeek()\"\n [dragStartDelay]=\"dragStartDelay()\"\n [tooltipTemplate]=\"tooltipTemplate()\"\n (onActionClickInternal)=\"onActionClick.emit($event)\"\n (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n ></ax-scheduler-month-view>\n }\n @case ('timeline-day') {\n <ax-scheduler-timeline-day-view\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [draggable]=\"draggable()\"\n [hasActions]=\"hasActions()\"\n [calendar]=\"calendarType()\"\n [endDayHour]=\"endDayHour()\"\n [startDayHour]=\"startDayHour()\"\n [appointments]=\"viewAppointments()\"\n [dragStartDelay]=\"dragStartDelay()\"\n [tooltipTemplate]=\"tooltipTemplate()\"\n (onActionClickInternal)=\"onActionClick.emit($event)\"\n (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n >\n </ax-scheduler-timeline-day-view>\n }\n @case ('timeline-multi-day') {\n <ax-scheduler-timeline-multi-day-view\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [endDayHour]=\"endDayHour()\"\n [hasActions]=\"hasActions()\"\n [startDayHour]=\"startDayHour()\"\n [appointments]=\"viewAppointments()\"\n [dragStartDelay]=\"dragStartDelay()\"\n [daysCount]=\"multiDayViewDaysCount()\"\n [tooltipTemplate]=\"tooltipTemplate()\"\n (onActionClickInternal)=\"onActionClick.emit($event)\"\n (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n >\n </ax-scheduler-timeline-multi-day-view>\n }\n @case ('timeline-month') {\n <ax-scheduler-timeline-month-view\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [hasActions]=\"hasActions()\"\n [appointments]=\"viewAppointments()\"\n [dragStartDelay]=\"dragStartDelay()\"\n [tooltipTemplate]=\"tooltipTemplate()\"\n (onActionClickInternal)=\"onActionClick.emit($event)\"\n (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n >\n </ax-scheduler-timeline-month-view>\n }\n @case ('agenda') {\n <ax-scheduler-agenda-view\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [hasActions]=\"hasActions()\"\n [appointments]=\"viewAppointments()\"\n [dragStartDelay]=\"dragStartDelay()\"\n [daysCount]=\"multiDayViewDaysCount()\"\n [tooltipTemplate]=\"tooltipTemplate()\"\n (onActionClickInternal)=\"onActionClick.emit($event)\"\n (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n >\n </ax-scheduler-agenda-view>\n }\n }\n </div>\n</div>\n", styles: [":root{--ax-comp-scheduler-width: 57.5rem;--ax-comp-scheduler-basic-view-blocks-height: 3rem;--ax-comp-scheduler-basic-view-blocks-width: 3.5rem;--ax-comp-scheduler-timeline-view-blocks-width: 20rem;--ax-comp-scheduler-timeline-view-blocks-height: 3rem;--ax-comp-scheduler-primary-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-scheduler-primary-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-scheduler-highest-periority-bg-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-scheduler-highest-periority-text-color: var(--ax-sys-color-on-danger-dark-surface);--ax-comp-scheduler-high-periority-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-scheduler-high-periority-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-scheduler-medium-periority-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-scheduler-medium-periority-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-scheduler-low-periority-bg-color: var(--ax-sys-color-success-light-surface);--ax-comp-scheduler-low-periority-text-color: var(--ax-sys-color-on-success-light-surface);--ax-comp-scheduler-lowest-periority-bg-color: var(--ax-sys-color-success-lightest-surface);--ax-comp-scheduler-lowest-periority-text-color: var(--ax-sys-color-on-success-lightest-surface)}ax-scheduler{width:100%;height:100%;display:block;-webkit-user-select:none;user-select:none;font-size:.875rem;background-color:inherit}ax-scheduler.ax-full-screen-container{top:0;left:0;z-index:61;width:100vw;height:100vh;position:fixed}ax-scheduler .ax-scheduler-container{height:100%;display:flex;overflow:hidden;border-width:1px;flex-direction:column;background-color:inherit;border-radius:var(--ax-sys-border-radius)}ax-scheduler .ax-scheduler-container .ax-scheduler-header{display:flex;padding:1rem;overflow-x:auto;overflow-y:hidden;align-items:center;border-bottom-width:1px;justify-content:space-between}ax-scheduler .ax-scheduler-container .ax-scheduler-header .ax-scheduler-date{display:flex;min-width:20.5rem;align-items:center;justify-content:space-between}ax-scheduler .ax-scheduler-container .ax-scheduler-header .ax-scheduler-date p{margin:0;font-size:1rem;min-width:10rem;font-weight:500;text-align:center}ax-scheduler .ax-scheduler-container .ax-scheduler-actions{gap:.75rem;display:flex;align-items:center;justify-content:center}ax-scheduler .ax-scheduler-container .ax-scheduler-truncate{display:block;overflow:hidden;text-wrap:nowrap;text-overflow:ellipsis}ax-scheduler .ax-scheduler-container ax-subtitle{font-size:.75rem}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container{height:100%;overflow:auto;background-color:inherit}ax-scheduler .ax-scheduler-primary-periority{color:rgba(var(--ax-comp-scheduler-primary-text-color));background-color:rgba(var(--ax-comp-scheduler-primary-bg-color))}ax-scheduler .ax-scheduler-highest-periority{color:rgba(var(--ax-comp-scheduler-highest-periority-text-color));background-color:rgba(var(--ax-comp-scheduler-highest-periority-bg-color))}ax-scheduler .ax-scheduler-high-periority{color:rgba(var(--ax-comp-scheduler-high-periority-text-color));background-color:rgba(var(--ax-comp-scheduler-high-periority-bg-color))}ax-scheduler .ax-scheduler-medium-periority{color:rgba(var(--ax-comp-scheduler-medium-periority-text-color));background-color:rgba(var(--ax-comp-scheduler-medium-periority-bg-color))}ax-scheduler .ax-scheduler-low-periority{color:rgba(var(--ax-comp-scheduler-low-periority-text-color));background-color:rgba(var(--ax-comp-scheduler-low-periority-bg-color))}ax-scheduler .ax-scheduler-lowest-periority{color:rgba(var(--ax-comp-scheduler-lowest-periority-text-color));background-color:rgba(var(--ax-comp-scheduler-lowest-periority-bg-color))}.ax-overlay-pane.ax-scheduler-popover{gap:.25rem;display:grid;overflow:auto;padding:.25rem;max-height:10rem;font-size:.875rem;border-radius:.5rem}.ax-overlay-pane.ax-scheduler-popover.ax-scheduler-month-popover-appointment{font-size:.75rem}.ax-overlay-pane.ax-scheduler-popover:not(.ax-state-readonly) .ax-scheduler-popover-appointment{cursor:pointer}.ax-overlay-pane.ax-scheduler-popover .ax-scheduler-popover-appointment{display:flex;overflow:hidden;-webkit-user-select:none;user-select:none;flex-direction:column;padding-block:.25rem;padding-inline:.5rem;border-radius:calc(var(--ax-sys-border-radius) / 2);color:rgba(var(--ax-comp-scheduler-primary-text-color));background-color:rgba(var(--ax-comp-scheduler-primary-bg-color))}.ax-overlay-pane.ax-scheduler-popover .ax-scheduler-popover-appointment ax-subtitle{font-size:.75rem}.ax-overlay-pane.ax-scheduler-popover .ax-scheduler-popover-appointment .ax-scheduler-truncate{display:block;overflow:hidden;text-wrap:nowrap;text-overflow:ellipsis}.ax-overlay-pane.ax-scheduler-popover ax-title,.ax-overlay-pane.ax-scheduler-popover .ax-appointment-chip-title{display:flex;justify-content:space-between}.ax-overlay-pane.ax-scheduler-popover ax-title .ax-scheduler-action-icon,.ax-overlay-pane.ax-scheduler-popover .ax-appointment-chip-title .ax-scheduler-action-icon{width:auto;cursor:pointer}.ax-overlay-pane.ax-scheduler-popover .ax-scheduler-primary-periority{color:rgba(var(--ax-comp-scheduler-primary-text-color));background-color:rgba(var(--ax-comp-scheduler-primary-bg-color))}.ax-overlay-pane.ax-scheduler-popover .ax-scheduler-highest-periority{color:rgba(var(--ax-comp-scheduler-highest-periority-text-color));background-color:rgba(var(--ax-comp-scheduler-highest-periority-bg-color))}.ax-overlay-pane.ax-scheduler-popover .ax-scheduler-high-periority{color:rgba(var(--ax-comp-scheduler-high-periority-text-color));background-color:rgba(var(--ax-comp-scheduler-high-periority-bg-color))}.ax-overlay-pane.ax-scheduler-popover .ax-scheduler-medium-periority{color:rgba(var(--ax-comp-scheduler-medium-periority-text-color));background-color:rgba(var(--ax-comp-scheduler-medium-periority-bg-color))}.ax-overlay-pane.ax-scheduler-popover .ax-scheduler-low-periority{color:rgba(var(--ax-comp-scheduler-low-periority-text-color));background-color:rgba(var(--ax-comp-scheduler-low-periority-bg-color))}.ax-overlay-pane.ax-scheduler-popover .ax-scheduler-lowest-periority{color:rgba(var(--ax-comp-scheduler-lowest-periority-text-color));background-color:rgba(var(--ax-comp-scheduler-lowest-periority-bg-color))}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXCalendarComponent, selector: "ax-calendar", inputs: ["rtl", "readonly", "value", "name", "disabled", "depth", "activeView", "minValue", "maxValue", "disabledDates", "holidayDates", "type", "cellTemplate", "cellClass", "showNavigation", "count", "id"], outputs: ["onOptionChanged", "valueChange", "onValueChanged", "minValueChange", "maxValueChange", "onBlur", "onFocus", "depthChange", "typeChange", "activeViewChange", "disabledDatesChange", "holidayDatesChange", "onNavigate", "onSlotClick", "countChange"] }, { kind: "component", type: AXSchedulerDayViewComponent, selector: "ax-scheduler-day-view", inputs: ["readonly", "draggable", "hasActions", "dragStartDelay", "calendar", "date", "endDayHour", "startDayHour", "appointments", "tooltipTemplate"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onActionClickInternal", "onAppointmentDropInternal"] }, { kind: "component", type: AXSchedulerWeekViewComponent, selector: "ax-scheduler-week-view", inputs: ["readonly", "draggable", "hasActions", "dragStartDelay", "calendar", "date", "endDayHour", "startDayHour", "appointments", "tooltipTemplate"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onActionClickInternal", "onAppointmentDropInternal"] }, { kind: "component", type: AXSchedulerMonthViewComponent, selector: "ax-scheduler-month-view", inputs: ["readonly", "draggable", "hasActions", "dragStartDelay", "calendar", "date", "appointments", "firstDayOfWeek", "tooltipTemplate"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onActionClickInternal", "onAppointmentDropInternal"] }, { kind: "component", type: AXSchedulerTimelineDayViewComponent, selector: "ax-scheduler-timeline-day-view", inputs: ["readonly", "draggable", "hasActions", "dragStartDelay", "calendar", "date", "endDayHour", "startDayHour", "appointments", "tooltipTemplate"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onActionClickInternal", "onAppointmentDropInternal"] }, { kind: "component", type: AXSchedulerTimelineMultiDayViewComponent, selector: "ax-scheduler-timeline-multi-day-view", inputs: ["daysCount", "readonly", "draggable", "hasActions", "dragStartDelay", "calendar", "date", "endDayHour", "startDayHour", "appointments", "tooltipTemplate"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onActionClickInternal", "onAppointmentDropInternal"] }, { kind: "component", type: AXSchedulerTimelineMonthViewComponent, selector: "ax-scheduler-timeline-month-view", inputs: ["readonly", "draggable", "hasActions", "dragStartDelay", "calendar", "date", "appointments", "tooltipTemplate"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onActionClickInternal", "onAppointmentDropInternal"] }, { kind: "component", type: AXSchedulerAgendaViewComponent, selector: "ax-scheduler-agenda-view", inputs: ["daysCount", "readonly", "draggable", "hasActions", "dragStartDelay", "calendar", "date", "appointments", "tooltipTemplate"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onActionClickInternal", "onAppointmentDropInternal"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
2515
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: AXSchedulerComponent, isStandalone: true, selector: "ax-scheduler", inputs: { calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, startingDate: { classPropertyName: "startingDate", publicName: "startingDate", isSignal: true, isRequired: false, transformFunction: null }, endDayHour: { classPropertyName: "endDayHour", publicName: "endDayHour", isSignal: true, isRequired: false, transformFunction: null }, startDayHour: { classPropertyName: "startDayHour", publicName: "startDayHour", isSignal: true, isRequired: false, transformFunction: null }, hasHeader: { classPropertyName: "hasHeader", publicName: "hasHeader", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, hasActions: { classPropertyName: "hasActions", publicName: "hasActions", isSignal: true, isRequired: false, transformFunction: null }, dragStartDelay: { classPropertyName: "dragStartDelay", publicName: "dragStartDelay", isSignal: true, isRequired: false, transformFunction: null }, allowFullScreen: { classPropertyName: "allowFullScreen", publicName: "allowFullScreen", isSignal: true, isRequired: false, transformFunction: null }, multiDayViewDaysCount: { classPropertyName: "multiDayViewDaysCount", publicName: "multiDayViewDaysCount", isSignal: true, isRequired: false, transformFunction: null }, tooltipTemplate: { classPropertyName: "tooltipTemplate", publicName: "tooltipTemplate", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, holidays: { classPropertyName: "holidays", publicName: "holidays", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, views: { classPropertyName: "views", publicName: "views", isSignal: true, isRequired: false, transformFunction: null }, selectedView: { classPropertyName: "selectedView", publicName: "selectedView", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedView: "selectedViewChange", onDataLoaded: "onDataLoaded", onRangeChanged: "onRangeChanged", onSlotClicked: "onSlotClicked", onSlotDblClicked: "onSlotDblClicked", onSlotRightClick: "onSlotRightClick", onAppointmentDrop: "onAppointmentDrop", onActionClick: "onActionClick", onAppointmentClicked: "onAppointmentClicked", onAppointmentDblClicked: "onAppointmentDblClicked", onAppointmentRightClick: "onAppointmentRightClick" }, providers: [AXUnsubscriber, { provide: AXComponent, useExisting: AXSchedulerComponent }], viewQueries: [{ propertyName: "viewModeSelectbox", first: true, predicate: AXSelectBoxComponent, descendants: true, isSignal: true }, { propertyName: "calendarPopover", first: true, predicate: ["calendarPopover"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-scheduler-container\">\n @if (hasHeader()) {\n <div class=\"ax-scheduler-header\">\n <div class=\"ax-scheduler-date\">\n <ax-button look=\"blank\" (onClick)=\"prevClick()\">\n <ax-icon\n class=\"ax-icon ax-text-xl\"\n [ngClass]=\"{\n 'ax-icon-chevron-left': !rtl(),\n 'ax-icon-chevron-right': rtl(),\n }\"\n ></ax-icon>\n </ax-button>\n <ax-button look=\"blank\" [text]=\"currentDateText()\" #date></ax-button>\n <ax-button look=\"blank\" (onClick)=\"nextClick()\">\n <ax-icon\n class=\"ax-icon ax-text-xl\"\n [ngClass]=\"{\n 'ax-icon-chevron-right': !rtl(),\n 'ax-icon-chevron-left': rtl(),\n }\"\n ></ax-icon>\n </ax-button>\n <ax-popover [target]=\"date\" #calendarPopover>\n <div class=\"ax-overlay-pane\">\n <ax-calendar\n [type]=\"calendarType()\"\n [depth]=\"calendarDepth()\"\n [ngModel]=\"currentDate()\"\n (onValueChanged)=\"calendarDateChanged($event)\"\n ></ax-calendar>\n </div>\n </ax-popover>\n </div>\n <div class=\"ax-scheduler-actions\">\n <ax-select-box\n [dropdownWidth]=\"'200px'\"\n [ngModel]=\"selectedView()\"\n [dataSource]=\"viewsDataSource()\"\n (onValueChanged)=\"viewChanged($event)\"\n ></ax-select-box>\n\n @if (allowFullScreen()) {\n <ax-button look=\"blank\" (onClick)=\"handleFullScreen()\">\n <ax-icon>\n <i\n class=\"fa-solid fa-expand\"\n [ngClass]=\"{ 'fa-compress': isFullScreen(), 'fa-expand': !isFullScreen() }\"\n ></i>\n </ax-icon>\n </ax-button>\n }\n </div>\n </div>\n }\n <div class=\"ax-scheduler-views-container\">\n @switch (selectedView()) {\n @case ('day') {\n <ax-scheduler-day-view\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [draggable]=\"draggable()\"\n [hasActions]=\"hasActions()\"\n [calendar]=\"calendarType()\"\n [endDayHour]=\"endDayHour()\"\n [startDayHour]=\"startDayHour()\"\n [appointments]=\"viewAppointments()\"\n [dragStartDelay]=\"dragStartDelay()\"\n [tooltipTemplate]=\"tooltipTemplate()\"\n (onActionClickInternal)=\"onActionClick.emit($event)\"\n (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n ></ax-scheduler-day-view>\n }\n @case ('week') {\n <ax-scheduler-week-view\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [endDayHour]=\"endDayHour()\"\n [hasActions]=\"hasActions()\"\n [startDayHour]=\"startDayHour()\"\n [appointments]=\"viewAppointments()\"\n [dragStartDelay]=\"dragStartDelay()\"\n [tooltipTemplate]=\"tooltipTemplate()\"\n (onActionClickInternal)=\"onActionClick.emit($event)\"\n (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n ></ax-scheduler-week-view>\n }\n @case ('month') {\n <ax-scheduler-month-view\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [hasActions]=\"hasActions()\"\n [appointments]=\"viewAppointments()\"\n [firstDayOfWeek]=\"firstDayOfWeek()\"\n [dragStartDelay]=\"dragStartDelay()\"\n [tooltipTemplate]=\"tooltipTemplate()\"\n (onActionClickInternal)=\"onActionClick.emit($event)\"\n (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n ></ax-scheduler-month-view>\n }\n @case ('timeline-day') {\n <ax-scheduler-timeline-day-view\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [draggable]=\"draggable()\"\n [hasActions]=\"hasActions()\"\n [calendar]=\"calendarType()\"\n [endDayHour]=\"endDayHour()\"\n [startDayHour]=\"startDayHour()\"\n [appointments]=\"viewAppointments()\"\n [dragStartDelay]=\"dragStartDelay()\"\n [tooltipTemplate]=\"tooltipTemplate()\"\n (onActionClickInternal)=\"onActionClick.emit($event)\"\n (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n >\n </ax-scheduler-timeline-day-view>\n }\n @case ('timeline-multi-day') {\n <ax-scheduler-timeline-multi-day-view\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [endDayHour]=\"endDayHour()\"\n [hasActions]=\"hasActions()\"\n [startDayHour]=\"startDayHour()\"\n [appointments]=\"viewAppointments()\"\n [dragStartDelay]=\"dragStartDelay()\"\n [daysCount]=\"multiDayViewDaysCount()\"\n [tooltipTemplate]=\"tooltipTemplate()\"\n (onActionClickInternal)=\"onActionClick.emit($event)\"\n (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n >\n </ax-scheduler-timeline-multi-day-view>\n }\n @case ('timeline-month') {\n <ax-scheduler-timeline-month-view\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [hasActions]=\"hasActions()\"\n [appointments]=\"viewAppointments()\"\n [dragStartDelay]=\"dragStartDelay()\"\n [tooltipTemplate]=\"tooltipTemplate()\"\n (onActionClickInternal)=\"onActionClick.emit($event)\"\n (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n >\n </ax-scheduler-timeline-month-view>\n }\n @case ('agenda') {\n <ax-scheduler-agenda-view\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [hasActions]=\"hasActions()\"\n [appointments]=\"viewAppointments()\"\n [dragStartDelay]=\"dragStartDelay()\"\n [daysCount]=\"multiDayViewDaysCount()\"\n [tooltipTemplate]=\"tooltipTemplate()\"\n (onActionClickInternal)=\"onActionClick.emit($event)\"\n (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n >\n </ax-scheduler-agenda-view>\n }\n }\n </div>\n</div>\n", styles: [":root{--ax-comp-scheduler-width: 57.5rem;--ax-comp-scheduler-basic-view-blocks-height: 3rem;--ax-comp-scheduler-basic-view-blocks-width: 3.5rem;--ax-comp-scheduler-timeline-view-blocks-width: 20rem;--ax-comp-scheduler-timeline-view-blocks-height: 3rem;--ax-comp-scheduler-primary-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-scheduler-primary-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-scheduler-highest-periority-bg-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-scheduler-highest-periority-text-color: var(--ax-sys-color-on-danger-dark-surface);--ax-comp-scheduler-high-periority-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-scheduler-high-periority-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-scheduler-medium-periority-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-scheduler-medium-periority-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-scheduler-low-periority-bg-color: var(--ax-sys-color-success-light-surface);--ax-comp-scheduler-low-periority-text-color: var(--ax-sys-color-on-success-light-surface);--ax-comp-scheduler-lowest-periority-bg-color: var(--ax-sys-color-success-lightest-surface);--ax-comp-scheduler-lowest-periority-text-color: var(--ax-sys-color-on-success-lightest-surface)}ax-scheduler{width:100%;height:100%;display:block;-webkit-user-select:none;user-select:none;font-size:.875rem;background-color:inherit}ax-scheduler.ax-full-screen-container{top:0;left:0;z-index:61;width:100vw;height:100vh;position:fixed}ax-scheduler .ax-scheduler-container{height:100%;display:flex;overflow:hidden;border-width:1px;flex-direction:column;background-color:inherit;border-radius:var(--ax-sys-border-radius)}ax-scheduler .ax-scheduler-container .ax-scheduler-header{display:flex;padding:1rem;overflow-x:auto;overflow-y:hidden;align-items:center;border-bottom-width:1px;justify-content:space-between}ax-scheduler .ax-scheduler-container .ax-scheduler-header .ax-scheduler-date{display:flex;min-width:20.5rem;align-items:center;justify-content:space-between}ax-scheduler .ax-scheduler-container .ax-scheduler-header .ax-scheduler-date p{margin:0;font-size:1rem;min-width:10rem;font-weight:500;text-align:center}ax-scheduler .ax-scheduler-container .ax-scheduler-actions{gap:.75rem;display:flex;align-items:center;justify-content:center}ax-scheduler .ax-scheduler-container .ax-scheduler-truncate{display:block;overflow:hidden;text-wrap:nowrap;text-overflow:ellipsis}ax-scheduler .ax-scheduler-container ax-subtitle{font-size:.75rem}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container{height:100%;overflow:auto;background-color:inherit}ax-scheduler .ax-scheduler-primary-periority{color:rgba(var(--ax-comp-scheduler-primary-text-color));background-color:rgba(var(--ax-comp-scheduler-primary-bg-color))}ax-scheduler .ax-scheduler-highest-periority{color:rgba(var(--ax-comp-scheduler-highest-periority-text-color));background-color:rgba(var(--ax-comp-scheduler-highest-periority-bg-color))}ax-scheduler .ax-scheduler-high-periority{color:rgba(var(--ax-comp-scheduler-high-periority-text-color));background-color:rgba(var(--ax-comp-scheduler-high-periority-bg-color))}ax-scheduler .ax-scheduler-medium-periority{color:rgba(var(--ax-comp-scheduler-medium-periority-text-color));background-color:rgba(var(--ax-comp-scheduler-medium-periority-bg-color))}ax-scheduler .ax-scheduler-low-periority{color:rgba(var(--ax-comp-scheduler-low-periority-text-color));background-color:rgba(var(--ax-comp-scheduler-low-periority-bg-color))}ax-scheduler .ax-scheduler-lowest-periority{color:rgba(var(--ax-comp-scheduler-lowest-periority-text-color));background-color:rgba(var(--ax-comp-scheduler-lowest-periority-bg-color))}.ax-overlay-pane.ax-scheduler-popover{gap:.25rem;display:grid;overflow:auto;padding:.25rem;max-height:10rem;font-size:.875rem;border-radius:.5rem}.ax-overlay-pane.ax-scheduler-popover.ax-scheduler-month-popover-appointment{font-size:.75rem}.ax-overlay-pane.ax-scheduler-popover:not(.ax-state-readonly) .ax-scheduler-popover-appointment{cursor:pointer}.ax-overlay-pane.ax-scheduler-popover .ax-scheduler-popover-appointment{display:flex;overflow:hidden;-webkit-user-select:none;user-select:none;flex-direction:column;padding-block:.25rem;padding-inline:.5rem;border-radius:calc(var(--ax-sys-border-radius) / 2);color:rgba(var(--ax-comp-scheduler-primary-text-color));background-color:rgba(var(--ax-comp-scheduler-primary-bg-color))}.ax-overlay-pane.ax-scheduler-popover .ax-scheduler-popover-appointment ax-subtitle{font-size:.75rem}.ax-overlay-pane.ax-scheduler-popover .ax-scheduler-popover-appointment .ax-scheduler-truncate{display:block;overflow:hidden;text-wrap:nowrap;text-overflow:ellipsis}.ax-overlay-pane.ax-scheduler-popover ax-title,.ax-overlay-pane.ax-scheduler-popover .ax-appointment-chip-title{display:flex;justify-content:space-between}.ax-overlay-pane.ax-scheduler-popover ax-title .ax-scheduler-action-icon,.ax-overlay-pane.ax-scheduler-popover .ax-appointment-chip-title .ax-scheduler-action-icon{width:auto;cursor:pointer}.ax-overlay-pane.ax-scheduler-popover .ax-scheduler-primary-periority{color:rgba(var(--ax-comp-scheduler-primary-text-color));background-color:rgba(var(--ax-comp-scheduler-primary-bg-color))}.ax-overlay-pane.ax-scheduler-popover .ax-scheduler-highest-periority{color:rgba(var(--ax-comp-scheduler-highest-periority-text-color));background-color:rgba(var(--ax-comp-scheduler-highest-periority-bg-color))}.ax-overlay-pane.ax-scheduler-popover .ax-scheduler-high-periority{color:rgba(var(--ax-comp-scheduler-high-periority-text-color));background-color:rgba(var(--ax-comp-scheduler-high-periority-bg-color))}.ax-overlay-pane.ax-scheduler-popover .ax-scheduler-medium-periority{color:rgba(var(--ax-comp-scheduler-medium-periority-text-color));background-color:rgba(var(--ax-comp-scheduler-medium-periority-bg-color))}.ax-overlay-pane.ax-scheduler-popover .ax-scheduler-low-periority{color:rgba(var(--ax-comp-scheduler-low-periority-text-color));background-color:rgba(var(--ax-comp-scheduler-low-periority-bg-color))}.ax-overlay-pane.ax-scheduler-popover .ax-scheduler-lowest-periority{color:rgba(var(--ax-comp-scheduler-lowest-periority-text-color));background-color:rgba(var(--ax-comp-scheduler-lowest-periority-bg-color))}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXCalendarComponent, selector: "ax-calendar", inputs: ["rtl", "readonly", "value", "name", "disabled", "depth", "activeView", "minValue", "maxValue", "disabledDates", "holidayDates", "type", "cellTemplate", "cellClass", "showNavigation", "count", "id"], outputs: ["onOptionChanged", "valueChange", "onValueChanged", "minValueChange", "maxValueChange", "onBlur", "onFocus", "depthChange", "typeChange", "activeViewChange", "disabledDatesChange", "holidayDatesChange", "onNavigate", "onSlotClick", "countChange"] }, { kind: "component", type: AXSchedulerDayViewComponent, selector: "ax-scheduler-day-view", inputs: ["readonly", "draggable", "hasActions", "dragStartDelay", "calendar", "date", "endDayHour", "startDayHour", "appointments", "tooltipTemplate"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onActionClickInternal", "onAppointmentDropInternal"] }, { kind: "component", type: AXSchedulerWeekViewComponent, selector: "ax-scheduler-week-view", inputs: ["readonly", "draggable", "hasActions", "dragStartDelay", "calendar", "date", "endDayHour", "startDayHour", "appointments", "tooltipTemplate"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onActionClickInternal", "onAppointmentDropInternal"] }, { kind: "component", type: AXSchedulerMonthViewComponent, selector: "ax-scheduler-month-view", inputs: ["readonly", "draggable", "hasActions", "dragStartDelay", "calendar", "date", "appointments", "firstDayOfWeek", "tooltipTemplate"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onActionClickInternal", "onAppointmentDropInternal"] }, { kind: "component", type: AXSchedulerTimelineDayViewComponent, selector: "ax-scheduler-timeline-day-view", inputs: ["readonly", "draggable", "hasActions", "dragStartDelay", "calendar", "date", "endDayHour", "startDayHour", "appointments", "tooltipTemplate"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onActionClickInternal", "onAppointmentDropInternal"] }, { kind: "component", type: AXSchedulerTimelineMultiDayViewComponent, selector: "ax-scheduler-timeline-multi-day-view", inputs: ["daysCount", "readonly", "draggable", "hasActions", "dragStartDelay", "calendar", "date", "endDayHour", "startDayHour", "appointments", "tooltipTemplate"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onActionClickInternal", "onAppointmentDropInternal"] }, { kind: "component", type: AXSchedulerTimelineMonthViewComponent, selector: "ax-scheduler-timeline-month-view", inputs: ["readonly", "draggable", "hasActions", "dragStartDelay", "calendar", "date", "appointments", "tooltipTemplate"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onActionClickInternal", "onAppointmentDropInternal"] }, { kind: "component", type: AXSchedulerAgendaViewComponent, selector: "ax-scheduler-agenda-view", inputs: ["daysCount", "readonly", "draggable", "hasActions", "dragStartDelay", "calendar", "date", "appointments", "tooltipTemplate"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onActionClickInternal", "onAppointmentDropInternal"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
2490
2516
  }
2491
2517
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXSchedulerComponent, decorators: [{
2492
2518
  type: Component,