@acorex/components 19.13.4 → 19.13.5

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 (212) hide show
  1. package/calendar/lib/calendar.component.d.ts +4 -0
  2. package/common/index.d.ts +1 -0
  3. package/common/lib/directives/copy-clipboard.directive.d.ts +40 -0
  4. package/common/lib/services/hotkey.service.d.ts +1 -1
  5. package/datetime-box/lib/datetime-box.component.d.ts +4 -3
  6. package/fesm2022/acorex-components-action-sheet.mjs +10 -10
  7. package/fesm2022/acorex-components-action-sheet.mjs.map +1 -1
  8. package/fesm2022/acorex-components-alert.mjs +7 -7
  9. package/fesm2022/acorex-components-alert.mjs.map +1 -1
  10. package/fesm2022/acorex-components-audio-wave.mjs +7 -7
  11. package/fesm2022/acorex-components-audio-wave.mjs.map +1 -1
  12. package/fesm2022/acorex-components-autocomplete.mjs +7 -7
  13. package/fesm2022/acorex-components-autocomplete.mjs.map +1 -1
  14. package/fesm2022/acorex-components-avatar.mjs +10 -10
  15. package/fesm2022/acorex-components-avatar.mjs.map +1 -1
  16. package/fesm2022/acorex-components-badge.mjs +7 -7
  17. package/fesm2022/acorex-components-badge.mjs.map +1 -1
  18. package/fesm2022/acorex-components-bottom-navigation.mjs +10 -10
  19. package/fesm2022/acorex-components-bottom-navigation.mjs.map +1 -1
  20. package/fesm2022/acorex-components-breadcrumbs.mjs +10 -10
  21. package/fesm2022/acorex-components-breadcrumbs.mjs.map +1 -1
  22. package/fesm2022/acorex-components-button-group.mjs +10 -10
  23. package/fesm2022/acorex-components-button-group.mjs.map +1 -1
  24. package/fesm2022/acorex-components-button.mjs +13 -13
  25. package/fesm2022/acorex-components-button.mjs.map +1 -1
  26. package/fesm2022/acorex-components-calendar.mjs +24 -14
  27. package/fesm2022/acorex-components-calendar.mjs.map +1 -1
  28. package/fesm2022/acorex-components-check-box.mjs +7 -7
  29. package/fesm2022/acorex-components-check-box.mjs.map +1 -1
  30. package/fesm2022/acorex-components-chips.mjs +7 -7
  31. package/fesm2022/acorex-components-chips.mjs.map +1 -1
  32. package/fesm2022/acorex-components-circular-progress.mjs +7 -7
  33. package/fesm2022/acorex-components-circular-progress.mjs.map +1 -1
  34. package/fesm2022/acorex-components-collapse.mjs +10 -10
  35. package/fesm2022/acorex-components-collapse.mjs.map +1 -1
  36. package/fesm2022/acorex-components-color-box.mjs +25 -10
  37. package/fesm2022/acorex-components-color-box.mjs.map +1 -1
  38. package/fesm2022/acorex-components-color-palette.mjs +25 -25
  39. package/fesm2022/acorex-components-color-palette.mjs.map +1 -1
  40. package/fesm2022/acorex-components-comment.mjs +28 -28
  41. package/fesm2022/acorex-components-comment.mjs.map +1 -1
  42. package/fesm2022/acorex-components-common.mjs +170 -99
  43. package/fesm2022/acorex-components-common.mjs.map +1 -1
  44. package/fesm2022/acorex-components-conversation.mjs +49 -49
  45. package/fesm2022/acorex-components-conversation.mjs.map +1 -1
  46. package/fesm2022/acorex-components-cron-job.mjs +46 -46
  47. package/fesm2022/acorex-components-cron-job.mjs.map +1 -1
  48. package/fesm2022/acorex-components-data-pager.mjs +31 -31
  49. package/fesm2022/acorex-components-data-pager.mjs.map +1 -1
  50. package/fesm2022/acorex-components-data-table.mjs +37 -37
  51. package/fesm2022/acorex-components-data-table.mjs.map +1 -1
  52. package/fesm2022/acorex-components-datetime-box.mjs +19 -12
  53. package/fesm2022/acorex-components-datetime-box.mjs.map +1 -1
  54. package/fesm2022/acorex-components-datetime-input.mjs +7 -7
  55. package/fesm2022/acorex-components-datetime-input.mjs.map +1 -1
  56. package/fesm2022/acorex-components-datetime-picker.mjs +7 -7
  57. package/fesm2022/acorex-components-datetime-picker.mjs.map +1 -1
  58. package/fesm2022/acorex-components-decorators.mjs +27 -27
  59. package/fesm2022/acorex-components-decorators.mjs.map +1 -1
  60. package/fesm2022/acorex-components-dialog.mjs +10 -10
  61. package/fesm2022/acorex-components-dialog.mjs.map +1 -1
  62. package/fesm2022/acorex-components-drawer.mjs +13 -13
  63. package/fesm2022/acorex-components-drawer.mjs.map +1 -1
  64. package/fesm2022/acorex-components-dropdown-button.mjs +7 -7
  65. package/fesm2022/acorex-components-dropdown-button.mjs.map +1 -1
  66. package/fesm2022/acorex-components-dropdown.mjs +13 -13
  67. package/fesm2022/acorex-components-dropdown.mjs.map +1 -1
  68. package/fesm2022/acorex-components-file-explorer.mjs +25 -25
  69. package/fesm2022/acorex-components-file-explorer.mjs.map +1 -1
  70. package/fesm2022/acorex-components-flow-chart.mjs +16 -16
  71. package/fesm2022/acorex-components-flow-chart.mjs.map +1 -1
  72. package/fesm2022/acorex-components-form.mjs +16 -16
  73. package/fesm2022/acorex-components-form.mjs.map +1 -1
  74. package/fesm2022/acorex-components-grid-layout-builder.mjs +10 -10
  75. package/fesm2022/acorex-components-grid-layout-builder.mjs.map +1 -1
  76. package/fesm2022/acorex-components-image-editor.mjs +34 -34
  77. package/fesm2022/acorex-components-image-editor.mjs.map +1 -1
  78. package/fesm2022/acorex-components-image.mjs +7 -7
  79. package/fesm2022/acorex-components-image.mjs.map +1 -1
  80. package/fesm2022/acorex-components-json-viewer.mjs +7 -7
  81. package/fesm2022/acorex-components-json-viewer.mjs.map +1 -1
  82. package/fesm2022/acorex-components-kbd.mjs +10 -10
  83. package/fesm2022/acorex-components-kbd.mjs.map +1 -1
  84. package/fesm2022/acorex-components-label.mjs +7 -7
  85. package/fesm2022/acorex-components-label.mjs.map +1 -1
  86. package/fesm2022/acorex-components-list.mjs +9 -9
  87. package/fesm2022/acorex-components-list.mjs.map +1 -1
  88. package/fesm2022/acorex-components-loading-dialog.mjs +10 -10
  89. package/fesm2022/acorex-components-loading-dialog.mjs.map +1 -1
  90. package/fesm2022/acorex-components-loading.mjs +16 -16
  91. package/fesm2022/acorex-components-loading.mjs.map +1 -1
  92. package/fesm2022/acorex-components-map.mjs +10 -10
  93. package/fesm2022/acorex-components-map.mjs.map +1 -1
  94. package/fesm2022/acorex-components-media-viewer.mjs +34 -34
  95. package/fesm2022/acorex-components-media-viewer.mjs.map +1 -1
  96. package/fesm2022/acorex-components-menu.mjs +16 -16
  97. package/fesm2022/acorex-components-menu.mjs.map +1 -1
  98. package/fesm2022/{acorex-components-modal-acorex-components-modal-B4nBGqa3.mjs → acorex-components-modal-acorex-components-modal-C83n2Gqn.mjs} +21 -21
  99. package/fesm2022/{acorex-components-modal-acorex-components-modal-B4nBGqa3.mjs.map → acorex-components-modal-acorex-components-modal-C83n2Gqn.mjs.map} +1 -1
  100. package/fesm2022/{acorex-components-modal-modal-content.component-oWerCvDI.mjs → acorex-components-modal-modal-content.component-YrM5Oi9b.mjs} +5 -5
  101. package/fesm2022/{acorex-components-modal-modal-content.component-oWerCvDI.mjs.map → acorex-components-modal-modal-content.component-YrM5Oi9b.mjs.map} +1 -1
  102. package/fesm2022/acorex-components-modal.mjs +1 -1
  103. package/fesm2022/acorex-components-navbar.mjs +7 -7
  104. package/fesm2022/acorex-components-navbar.mjs.map +1 -1
  105. package/fesm2022/acorex-components-notification.mjs +10 -10
  106. package/fesm2022/acorex-components-notification.mjs.map +1 -1
  107. package/fesm2022/acorex-components-number-box.mjs +7 -7
  108. package/fesm2022/acorex-components-number-box.mjs.map +1 -1
  109. package/fesm2022/acorex-components-otp.mjs +7 -7
  110. package/fesm2022/acorex-components-otp.mjs.map +1 -1
  111. package/fesm2022/acorex-components-page.mjs +10 -10
  112. package/fesm2022/acorex-components-page.mjs.map +1 -1
  113. package/fesm2022/acorex-components-paint.mjs +25 -25
  114. package/fesm2022/acorex-components-paint.mjs.map +1 -1
  115. package/fesm2022/acorex-components-password-box.mjs +10 -10
  116. package/fesm2022/acorex-components-password-box.mjs.map +1 -1
  117. package/fesm2022/acorex-components-pdf-reader.mjs +7 -7
  118. package/fesm2022/acorex-components-pdf-reader.mjs.map +1 -1
  119. package/fesm2022/acorex-components-phone-box.mjs +7 -7
  120. package/fesm2022/acorex-components-phone-box.mjs.map +1 -1
  121. package/fesm2022/acorex-components-picker.mjs +13 -13
  122. package/fesm2022/acorex-components-picker.mjs.map +1 -1
  123. package/fesm2022/acorex-components-popover.mjs +7 -7
  124. package/fesm2022/acorex-components-popover.mjs.map +1 -1
  125. package/fesm2022/acorex-components-popup.mjs +10 -10
  126. package/fesm2022/acorex-components-popup.mjs.map +1 -1
  127. package/fesm2022/acorex-components-progress-bar.mjs +7 -7
  128. package/fesm2022/acorex-components-progress-bar.mjs.map +1 -1
  129. package/fesm2022/acorex-components-qrcode.mjs +7 -7
  130. package/fesm2022/acorex-components-qrcode.mjs.map +1 -1
  131. package/fesm2022/acorex-components-query-builder.mjs +8 -8
  132. package/fesm2022/acorex-components-query-builder.mjs.map +1 -1
  133. package/fesm2022/acorex-components-radio.mjs +7 -7
  134. package/fesm2022/acorex-components-radio.mjs.map +1 -1
  135. package/fesm2022/acorex-components-rail-navigation.mjs +13 -13
  136. package/fesm2022/acorex-components-rail-navigation.mjs.map +1 -1
  137. package/fesm2022/acorex-components-range-slider.mjs +7 -7
  138. package/fesm2022/acorex-components-range-slider.mjs.map +1 -1
  139. package/fesm2022/acorex-components-rate-picker.mjs +7 -7
  140. package/fesm2022/acorex-components-rate-picker.mjs.map +1 -1
  141. package/fesm2022/acorex-components-rest-api-generator.mjs +22 -22
  142. package/fesm2022/acorex-components-rest-api-generator.mjs.map +1 -1
  143. package/fesm2022/acorex-components-result.mjs +7 -7
  144. package/fesm2022/acorex-components-result.mjs.map +1 -1
  145. package/fesm2022/acorex-components-routing-progress.mjs +7 -7
  146. package/fesm2022/acorex-components-routing-progress.mjs.map +1 -1
  147. package/fesm2022/acorex-components-scheduler.mjs +910 -381
  148. package/fesm2022/acorex-components-scheduler.mjs.map +1 -1
  149. package/fesm2022/acorex-components-scss.mjs +4 -4
  150. package/fesm2022/acorex-components-scss.mjs.map +1 -1
  151. package/fesm2022/acorex-components-search-box.mjs +7 -7
  152. package/fesm2022/acorex-components-search-box.mjs.map +1 -1
  153. package/fesm2022/acorex-components-select-box.mjs +24 -12
  154. package/fesm2022/acorex-components-select-box.mjs.map +1 -1
  155. package/fesm2022/acorex-components-selection-list.mjs +7 -7
  156. package/fesm2022/acorex-components-selection-list.mjs.map +1 -1
  157. package/fesm2022/acorex-components-side-menu.mjs +13 -13
  158. package/fesm2022/acorex-components-side-menu.mjs.map +1 -1
  159. package/fesm2022/acorex-components-skeleton.mjs +7 -7
  160. package/fesm2022/acorex-components-skeleton.mjs.map +1 -1
  161. package/fesm2022/acorex-components-slider.mjs +7 -7
  162. package/fesm2022/acorex-components-slider.mjs.map +1 -1
  163. package/fesm2022/acorex-components-sliding-item.mjs +13 -13
  164. package/fesm2022/acorex-components-sliding-item.mjs.map +1 -1
  165. package/fesm2022/acorex-components-step-wizard.mjs +13 -13
  166. package/fesm2022/acorex-components-step-wizard.mjs.map +1 -1
  167. package/fesm2022/acorex-components-switch.mjs +10 -10
  168. package/fesm2022/acorex-components-switch.mjs.map +1 -1
  169. package/fesm2022/acorex-components-tabs.mjs +13 -13
  170. package/fesm2022/acorex-components-tabs.mjs.map +1 -1
  171. package/fesm2022/acorex-components-tag-box.mjs +7 -7
  172. package/fesm2022/acorex-components-tag-box.mjs.map +1 -1
  173. package/fesm2022/acorex-components-tag.mjs +7 -7
  174. package/fesm2022/acorex-components-tag.mjs.map +1 -1
  175. package/fesm2022/acorex-components-text-area.mjs +7 -7
  176. package/fesm2022/acorex-components-text-area.mjs.map +1 -1
  177. package/fesm2022/acorex-components-text-box.mjs +10 -10
  178. package/fesm2022/acorex-components-text-box.mjs.map +1 -1
  179. package/fesm2022/acorex-components-time-duration.mjs +247 -0
  180. package/fesm2022/acorex-components-time-duration.mjs.map +1 -0
  181. package/fesm2022/acorex-components-time-line.mjs +10 -10
  182. package/fesm2022/acorex-components-time-line.mjs.map +1 -1
  183. package/fesm2022/acorex-components-toast.mjs +10 -10
  184. package/fesm2022/acorex-components-toast.mjs.map +1 -1
  185. package/fesm2022/acorex-components-toolbar.mjs +7 -7
  186. package/fesm2022/acorex-components-toolbar.mjs.map +1 -1
  187. package/fesm2022/acorex-components-tooltip.mjs +10 -10
  188. package/fesm2022/acorex-components-tooltip.mjs.map +1 -1
  189. package/fesm2022/acorex-components-tree-view.mjs +10 -10
  190. package/fesm2022/acorex-components-tree-view.mjs.map +1 -1
  191. package/fesm2022/acorex-components-uploader.mjs +22 -22
  192. package/fesm2022/acorex-components-uploader.mjs.map +1 -1
  193. package/fesm2022/acorex-components-video-player.mjs +7 -7
  194. package/fesm2022/acorex-components-video-player.mjs.map +1 -1
  195. package/fesm2022/acorex-components-wysiwyg.mjs +31 -31
  196. package/fesm2022/acorex-components-wysiwyg.mjs.map +1 -1
  197. package/package.json +5 -1
  198. package/scheduler/lib/scheduler.class.d.ts +13 -3
  199. package/scheduler/lib/scheduler.component.d.ts +5 -3
  200. package/scheduler/lib/scheduler.service.d.ts +13 -6
  201. package/scheduler/lib/views/agenda/scheduler-agenda-view.component.d.ts +12 -6
  202. package/scheduler/lib/views/day/scheduler-day-view.component.d.ts +9 -4
  203. package/scheduler/lib/views/month/scheduler-month-view.component.d.ts +16 -8
  204. package/scheduler/lib/views/timeline-day/scheduler-timeline-day-view.component.d.ts +12 -4
  205. package/scheduler/lib/views/timeline-month/scheduler-timeline-month-view.component.d.ts +11 -10
  206. package/scheduler/lib/views/timeline-multi-day/scheduler-timeline-multi-day-view.component.d.ts +8 -3
  207. package/scheduler/lib/views/week/scheduler-week-view.component.d.ts +24 -7
  208. package/time-duration/README.md +3 -0
  209. package/time-duration/index.d.ts +3 -0
  210. package/time-duration/lib/time-duration.component.d.ts +29 -0
  211. package/time-duration/lib/time-duration.module.d.ts +7 -0
  212. package/time-duration/lib/time-duration.type.d.ts +1 -0
@@ -16,6 +16,7 @@ import { toSignal } from '@angular/core/rxjs-interop';
16
16
  import * as i1 from '@angular/forms';
17
17
  import { FormsModule } from '@angular/forms';
18
18
  import { Observable, distinctUntilChanged, switchMap, of, map, startWith } from 'rxjs';
19
+ import { AXDragDirective, AXDropZoneDirective } from '@acorex/cdk/drag-drop';
19
20
  import { orderBy } from 'lodash-es';
20
21
 
21
22
  class AXSchedulerService {
@@ -107,11 +108,11 @@ class AXSchedulerService {
107
108
  // Clamp appointment start/end times to the view boundaries (days and hours)
108
109
  let effectiveStart = appointment.startDate.compare(viewStartDate) < 0 ? viewStartDate : appointment.startDate;
109
110
  if (effectiveStart.hour < startHour)
110
- effectiveStart = effectiveStart.set('hour', startHour).set('minute', 0);
111
+ effectiveStart = effectiveStart.set('hour', startHour).startOf('hour');
111
112
  let effectiveEnd = appointment.endDate.compare(viewEndDate) >= 0 ? viewEndDate : appointment.endDate;
112
113
  if (effectiveEnd.hour >= endHour) {
113
114
  const endDayBase = effectiveEnd.compare(viewEndDate) >= 0 ? viewEndDate.add('day', -1) : effectiveEnd;
114
- effectiveEnd = endDayBase.set('hour', endHour).set('minute', 0);
115
+ effectiveEnd = endDayBase.set('hour', endHour).startOf('hour');
115
116
  }
116
117
  // Get start block info using the specified viewTotalDays
117
118
  const startInfo = this.getBlockIdentifier(effectiveStart, viewStartDate, startHour, endHour, viewTotalDays);
@@ -155,61 +156,68 @@ class AXSchedulerService {
155
156
  /**
156
157
  * Calculates max concurrency and effective total columns for Day View appointments.
157
158
  */
158
- calculateDayViewConcurrencyInfo(singleDayAppointments, viewStartDate, // Need start date for context
159
- startHour, endHour) {
160
- const concurrencyInfo = new Map();
159
+ calculateDayViewConcurrencyInfo(singleDayAppointments, // These are segments for the current day
160
+ viewStartDate, startHour, endHour) {
161
+ const resultInfo = new Map();
161
162
  if (singleDayAppointments.length === 0)
162
- return concurrencyInfo;
163
- // Use the consolidated function for day view (viewTotalDays = 1)
164
- // It returns ActiveAppointmentsInBlock, which has dayIndex 0 for Day view
163
+ return resultInfo;
165
164
  const activeAppointmentsMap = this.calculateActiveAppointmentsInBlock(singleDayAppointments, viewStartDate, startHour, endHour, 1);
166
- const blocks = activeAppointmentsMap[0] ?? {}; // Extract blocks for the single day (dayIndex 0)
167
- // --- The rest of the logic remains the same, using the 'blocks' derived above ---
168
- // 1. Calculate maxConcurrency for each appointment based on blocks it occupies
169
- const maxConcurrencyMap = {};
170
- singleDayAppointments.forEach((appointment) => {
171
- let maxOverlap = 0;
172
- // Recalculate block range for *this specific appointment* relative to view hours
173
- const startMinutes = appointment.startDate.hour * this.MINUTES_PER_HOUR + appointment.startDate.minute;
174
- const endMinutes = appointment.endDate.hour * this.MINUTES_PER_HOUR + appointment.endDate.minute;
175
- const startBlockOffset = Math.max(0, startMinutes - startHour * this.MINUTES_PER_HOUR);
176
- const endBlockOffset = Math.min((endHour - startHour) * this.MINUTES_PER_HOUR, endMinutes - startHour * this.MINUTES_PER_HOUR);
177
- const startBlockIndex = Math.floor(startBlockOffset / this.BLOCK_DURATION_MINUTES);
178
- const endBlockIndex = Math.ceil(endBlockOffset / this.BLOCK_DURATION_MINUTES);
179
- for (let blockIdx = startBlockIndex; blockIdx < endBlockIndex; blockIdx++) {
180
- const blockData = blocks[blockIdx]; // Access block data using block index
181
- if (blockData) {
182
- // blockData now contains appointment objects, use length directly
183
- maxOverlap = Math.max(maxOverlap, blockData.length);
184
- }
185
- }
186
- // Edge case handling (use blockData.length)
187
- const startBlockData = blocks[startBlockIndex];
188
- if (startBlockData) {
189
- if (startBlockIndex === endBlockIndex - 1 || startBlockIndex >= endBlockIndex) {
190
- maxOverlap = Math.max(maxOverlap, startBlockData.length);
165
+ const blocks = activeAppointmentsMap[0] ?? {};
166
+ // 1. Calculate initial maxConcurrency for each appointment segment
167
+ const maxConcurrencyMap = new Map();
168
+ singleDayAppointments.forEach((segment) => {
169
+ let maxOverlapInSegmentBlocks = 0;
170
+ const segmentStartMinutes = segment.startDate.hour * this.MINUTES_PER_HOUR + segment.startDate.minute;
171
+ const segmentEndMinutes = segment.endDate.hour * this.MINUTES_PER_HOUR + segment.endDate.minute;
172
+ // Determine blocks this segment occupies relative to view's startHour
173
+ const viewRelativeStartMinutes = Math.max(0, segmentStartMinutes - startHour * this.MINUTES_PER_HOUR);
174
+ const viewRelativeEndMinutes = Math.min((endHour - startHour) * this.MINUTES_PER_HOUR, segmentEndMinutes - startHour * this.MINUTES_PER_HOUR);
175
+ const firstBlockIndex = Math.floor(viewRelativeStartMinutes / this.BLOCK_DURATION_MINUTES);
176
+ const lastBlockIndex = Math.floor((viewRelativeEndMinutes - 1) / this.BLOCK_DURATION_MINUTES); // -1 because end is exclusive for block counting
177
+ for (let blockIdx = firstBlockIndex; blockIdx <= lastBlockIndex; blockIdx++) {
178
+ const appointmentsInBlock = blocks[blockIdx];
179
+ if (appointmentsInBlock) {
180
+ maxOverlapInSegmentBlocks = Math.max(maxOverlapInSegmentBlocks, appointmentsInBlock.length);
191
181
  }
192
182
  }
193
- maxConcurrencyMap[appointment.key] = maxOverlap || 1;
183
+ maxConcurrencyMap.set(segment.key, maxOverlapInSegmentBlocks || 1);
194
184
  });
195
- // 2. Calculate effectiveTotalColumns by checking overlaps
196
- singleDayAppointments.forEach((appointment) => {
197
- const appointmentKey = appointment.key;
198
- let effectiveTotalColumns = maxConcurrencyMap[appointmentKey] || 1;
199
- for (const otherAppointment of singleDayAppointments) {
200
- if (appointmentKey === otherAppointment.key)
201
- continue;
202
- if (this.doAppointmentsOverlap(appointment, otherAppointment)) {
203
- const otherMaxConcurrency = maxConcurrencyMap[otherAppointment.key] || 1;
204
- effectiveTotalColumns = Math.max(effectiveTotalColumns, otherMaxConcurrency);
205
- }
206
- }
207
- concurrencyInfo.set(appointmentKey, {
208
- maxConcurrency: maxConcurrencyMap[appointmentKey] || 1, // Keep original max concurrency
209
- effectiveTotalColumns: effectiveTotalColumns,
185
+ // 2. Iteratively determine effectiveTotalColumns for groups of overlapping appointments
186
+ const initialEffectiveTotalColumns = new Map();
187
+ singleDayAppointments.forEach((segment) => {
188
+ initialEffectiveTotalColumns.set(segment.key, maxConcurrencyMap.get(segment.key) || 1);
189
+ });
190
+ let changed = true;
191
+ while (changed) {
192
+ changed = false;
193
+ singleDayAppointments.forEach((segmentA) => {
194
+ singleDayAppointments.forEach((segmentB) => {
195
+ if (segmentA.key === segmentB.key)
196
+ return;
197
+ if (this.doAppointmentsOverlap(segmentA, segmentB)) {
198
+ const etcA = initialEffectiveTotalColumns.get(segmentA.key) || 1;
199
+ const etcB = initialEffectiveTotalColumns.get(segmentB.key) || 1;
200
+ const maxETC = Math.max(etcA, etcB);
201
+ if (etcA !== maxETC) {
202
+ initialEffectiveTotalColumns.set(segmentA.key, maxETC);
203
+ changed = true;
204
+ }
205
+ if (etcB !== maxETC) {
206
+ initialEffectiveTotalColumns.set(segmentB.key, maxETC);
207
+ changed = true;
208
+ }
209
+ }
210
+ });
211
+ });
212
+ }
213
+ // Populate final result
214
+ singleDayAppointments.forEach((segment) => {
215
+ resultInfo.set(segment.key, {
216
+ maxConcurrency: maxConcurrencyMap.get(segment.key) || 1,
217
+ effectiveTotalColumns: initialEffectiveTotalColumns.get(segment.key) || 1,
210
218
  });
211
219
  });
212
- return concurrencyInfo;
220
+ return resultInfo;
213
221
  }
214
222
  /**
215
223
  * Groups appointments by the block they START in for Week View.
@@ -337,30 +345,162 @@ class AXSchedulerService {
337
345
  }
338
346
  }
339
347
  // --- Timeline Specific Helpers ---
340
- calculateTimelineLayout(appt, startHour, endHour) {
348
+ calculateTimelineLayout(
349
+ // `appt` here will be an AXSchedulerAppointmentSegmentType when called from TimelineDayView
350
+ appt, viewStartHour, // e.g., 8 for 8 AM
351
+ viewEndHour) {
341
352
  if (!appt?.startDate ||
342
353
  !appt.endDate ||
343
- typeof startHour !== 'number' ||
344
- typeof endHour !== 'number' ||
345
- startHour >= endHour) {
346
- console.warn('calculateTimelinePixelLayout: Invalid input', { appt, startHour, endHour });
354
+ typeof viewStartHour !== 'number' ||
355
+ typeof viewEndHour !== 'number' ||
356
+ viewStartHour >= viewEndHour // Basic sanity check
357
+ ) {
358
+ console.warn('calculateTimelineLayout: Invalid input', { appt, viewStartHour, viewEndHour });
359
+ return null;
360
+ }
361
+ const totalViewDurationMinutes = (viewEndHour - viewStartHour) * 60;
362
+ if (totalViewDurationMinutes <= 0)
363
+ return null; // No viewable duration
364
+ // Segment's start and end times (these are already clipped to the day by getClonedAppointmentSegmentOnDay)
365
+ const segmentStart = appt.startDate;
366
+ const segmentEnd = appt.endDate;
367
+ // --- Calculate Start Position (left) ---
368
+ // Effective start of the segment within the view's hours for THIS day
369
+ let effectiveSegmentStartMinutesInDay = segmentStart.hour * 60 + segmentStart.minute;
370
+ // Clamp to viewStartHour for calculation if segment starts before viewable hours (shouldn't happen if segmenter worked)
371
+ effectiveSegmentStartMinutesInDay = Math.max(effectiveSegmentStartMinutesInDay, viewStartHour * 60);
372
+ // Clamp to viewEndHour for calculation if segment starts after viewable hours (shouldn't happen)
373
+ effectiveSegmentStartMinutesInDay = Math.min(effectiveSegmentStartMinutesInDay, viewEndHour * 60);
374
+ const minutesFromViewStartToSegmentStart = effectiveSegmentStartMinutesInDay - viewStartHour * 60;
375
+ // If segment effectively starts before the viewable part (after clamping), it means it's not visible or starts at 0%
376
+ if (minutesFromViewStartToSegmentStart < 0 &&
377
+ Math.abs(minutesFromViewStartToSegmentStart) > 1e-6 /*epsilon for float issues*/) {
378
+ // This case should ideally be caught by the segmenter or initial overlap checks.
379
+ // If it happens, treat as starting at 0% but it might mean no visible part.
380
+ }
381
+ const leftPercentage = (Math.max(0, minutesFromViewStartToSegmentStart) / totalViewDurationMinutes) * 100;
382
+ // --- Calculate Duration and Width ---
383
+ // Effective end of the segment within the view's hours for THIS day
384
+ let effectiveSegmentEndMinutesInDay = segmentEnd.hour * 60 + segmentEnd.minute;
385
+ if (segmentEnd.hour === 0 && segmentEnd.minute === 0 && segmentEnd.date.getTime() > segmentStart.date.getTime()) {
386
+ // If segment ends exactly at midnight (00:00 of next day, meaning it filled up to 24:00 of current day)
387
+ effectiveSegmentEndMinutesInDay = 24 * 60;
388
+ }
389
+ // Clamp to viewEndHour for calculation
390
+ effectiveSegmentEndMinutesInDay = Math.min(effectiveSegmentEndMinutesInDay, viewEndHour * 60);
391
+ // Clamp to viewStartHour for calculation (if segment ends before view starts)
392
+ effectiveSegmentEndMinutesInDay = Math.max(effectiveSegmentEndMinutesInDay, viewStartHour * 60);
393
+ const segmentDurationMinutesInView = Math.max(0, effectiveSegmentEndMinutesInDay - effectiveSegmentStartMinutesInDay);
394
+ if (segmentDurationMinutesInView <= 0) {
395
+ // Segment has no visible duration within the timeline hours
396
+ return null;
397
+ }
398
+ const widthPercentage = (segmentDurationMinutesInView / totalViewDurationMinutes) * 100;
399
+ // Ensure percentages are valid
400
+ if (leftPercentage > 100 ||
401
+ leftPercentage < 0 ||
402
+ widthPercentage <= 0 ||
403
+ widthPercentage > 100 ||
404
+ leftPercentage + widthPercentage > 100.0001 /*allow for float errors*/) {
405
+ // This might indicate an issue with date clamping or logic.
406
+ // For now, if it results in an invalid layout, return null.
407
+ // console.warn("Timeline layout calculation resulted in out-of-bounds percentages:",
408
+ // {leftPercentage, widthPercentage, segmentStart, segmentEnd, viewStartHour, viewEndHour});
409
+ // A common case for (left + width > 100) is if an event ends *exactly* at viewEndHour,
410
+ // and viewEndHour itself is the boundary.
411
+ // Let's be a bit tolerant here if width is positive.
412
+ if (widthPercentage <= 0)
413
+ return null;
414
+ }
415
+ return {
416
+ left: `${Math.max(0, Math.min(100, leftPercentage))}%`,
417
+ width: `${Math.max(0, Math.min(100, widthPercentage))}%`,
418
+ };
419
+ }
420
+ /**
421
+ * Calculates the visible segment of a timed appointment on a specific day,
422
+ * constrained by the view's start and end hours.
423
+ * Returns a new appointment-like object representing the segment.
424
+ */
425
+ getClonedAppointmentSegmentOnDay(appointment, day, viewStartHour, viewEndHour, isFullDayCellContext = false) {
426
+ if (!appointment || !appointment.startDate || !appointment.endDate) {
427
+ return null;
428
+ }
429
+ const dayStartOf = day.clone().startOf('day');
430
+ if (appointment.allDay) {
431
+ if (appointment.startDate.startOf('day').equal(dayStartOf, 'day')) {
432
+ const segmentForAllDay = {
433
+ ...appointment,
434
+ startDate: dayStartOf,
435
+ endDate: dayStartOf.clone().add('day', 1).startOf('day'),
436
+ allDay: true,
437
+ originalStartDate: appointment.startDate,
438
+ originalEndDate: appointment.endDate,
439
+ isContinuationFromPreviousDay: false,
440
+ isContinuationToNextDay: appointment.endDate.startOf('day').compare(dayStartOf, 'day') > 0,
441
+ };
442
+ return segmentForAllDay;
443
+ }
444
+ else if (appointment.startDate.startOf('day').compare(dayStartOf, 'day') < 0 &&
445
+ appointment.endDate.startOf('day').compare(dayStartOf, 'day') >= 0) {
446
+ const segmentForAllDayContinuation = {
447
+ ...appointment,
448
+ startDate: dayStartOf,
449
+ endDate: dayStartOf.clone().add('day', 1).startOf('day'),
450
+ allDay: true,
451
+ originalStartDate: appointment.startDate,
452
+ originalEndDate: appointment.endDate,
453
+ isContinuationFromPreviousDay: true,
454
+ isContinuationToNextDay: appointment.endDate.startOf('day').compare(dayStartOf, 'day') > 0,
455
+ };
456
+ return segmentForAllDayContinuation;
457
+ }
458
+ else {
459
+ return null;
460
+ }
461
+ }
462
+ const dayStartBoundary = isFullDayCellContext ? dayStartOf : day.clone().set('hour', viewStartHour).startOf('hour');
463
+ const dayEndBoundary = isFullDayCellContext
464
+ ? dayStartOf.clone().add('day', 1).startOf('day')
465
+ : viewEndHour === 24 || (viewEndHour === 0 && viewStartHour === 0)
466
+ ? day.clone().add('day', 1).startOf('day')
467
+ : day.clone().set('hour', viewEndHour).startOf('hour');
468
+ if (appointment.endDate.compare(dayStartBoundary, 'second') <= 0 ||
469
+ appointment.startDate.compare(dayEndBoundary, 'second') >= 0) {
347
470
  return null;
348
471
  }
349
- const startMinutes = appt.startDate.hour * 60 + appt.startDate.minute;
350
- const startBlockOffset = startMinutes - startHour * 60;
351
- const xBlock = startBlockOffset / 60;
352
- const left = `calc(var(--ax-comp-scheduler-timeline-view-blocks-width) * ${xBlock} + 1px)`;
353
- const durationMillis = appt.endDate.date.getTime() - appt.startDate.date.getTime();
354
- const durationMinutes = Math.max(0, durationMillis / (1000 * 60));
355
- const widthBlock = durationMinutes / 60;
356
- const blockWidthExpr = `var(--ax-comp-scheduler-timeline-view-blocks-width)`;
357
- const width = `calc(${blockWidthExpr} * ${widthBlock})`;
358
- return { left, width };
359
- }
360
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXSchedulerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
361
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXSchedulerService, providedIn: 'root' }); }
472
+ const segmentStartDate = appointment.startDate.compare(dayStartBoundary, 'second') > 0 ? appointment.startDate : dayStartBoundary;
473
+ const segmentEndDate = appointment.endDate.compare(dayEndBoundary, 'second') < 0 ? appointment.endDate : dayEndBoundary;
474
+ if (segmentStartDate.compare(segmentEndDate, 'second') >= 0) {
475
+ return null;
476
+ }
477
+ const isContinuationFromPreviousDay = appointment.startDate.compare(segmentStartDate, 'second') < 0;
478
+ const isContinuationToNextDay = appointment.endDate.compare(segmentEndDate, 'second') > 0;
479
+ const duration = appointment.startDate.duration(appointment.endDate);
480
+ let segmentIsAllDay = appointment.allDay;
481
+ if (!segmentIsAllDay) {
482
+ const contextStartForComparison = dayStartBoundary;
483
+ const contextEndForComparison = dayEndBoundary;
484
+ if (segmentStartDate.compare(contextStartForComparison, 'second') <= 0 &&
485
+ segmentEndDate.compare(contextEndForComparison, 'second') >= 0) {
486
+ segmentIsAllDay = true;
487
+ }
488
+ }
489
+ return {
490
+ ...appointment,
491
+ startDate: segmentStartDate,
492
+ endDate: segmentEndDate,
493
+ allDay: appointment.allDay || duration.total.days >= 1,
494
+ originalStartDate: appointment.startDate,
495
+ originalEndDate: appointment.endDate,
496
+ isContinuationFromPreviousDay,
497
+ isContinuationToNextDay,
498
+ };
499
+ }
500
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXSchedulerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
501
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXSchedulerService, providedIn: 'root' }); }
362
502
  }
363
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXSchedulerService, decorators: [{
503
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXSchedulerService, decorators: [{
364
504
  type: Injectable,
365
505
  args: [{
366
506
  providedIn: 'root', // Provide service application-wide
@@ -376,28 +516,36 @@ class AXSchedulerAgendaViewComponent extends MXBaseComponent {
376
516
  this.readonly = input(false);
377
517
  this.draggable = input(true);
378
518
  this.calendar = input();
379
- this.endHour = input.required();
380
519
  this.date = input.required();
381
- this.startHour = input.required();
382
520
  this.appointments = input([]);
383
- this.multiDayAppointments = computed(() => {
384
- const current = this.date();
385
- const mapped = this.appointments();
386
- const daysCount = this.daysCount();
387
- return Array.from({ length: daysCount }, (_, i) => {
388
- const dayStart = current.add('day', i).add('hour', this.startHour());
389
- const dayEnd = dayStart.add('day', 1).add('hour', this.endHour() - this.startHour());
390
- const appointmentsForDay = mapped.filter((appt) => (appt.endDate.compare(dayStart, 'day') >= 0 &&
391
- appt.startDate.compare(dayEnd, 'day') < 0 &&
392
- appt.endDate.compare(dayStart, 'hour') >= 0 &&
393
- appt.startDate.compare(dayEnd, 'hour') < 0) ||
394
- (appt.endDate.compare(dayStart, 'day') >= 0 && appt.startDate.compare(dayEnd, 'day') < 0 && appt.allDay));
395
- return {
396
- appointments: appointmentsForDay,
397
- date: dayStart,
398
- };
399
- });
400
- return [];
521
+ this.agendaDaysLayout = computed(() => {
522
+ const allOriginalAppointments = this.appointments();
523
+ const agendaStartDate = this.date();
524
+ const numberOfDays = this.daysCount();
525
+ if (!agendaStartDate || !allOriginalAppointments) {
526
+ return [];
527
+ }
528
+ const result = [];
529
+ for (let i = 0; i < numberOfDays; i++) {
530
+ const currentDay = agendaStartDate.add('day', i).startOf('day');
531
+ const segmentsForThisDay = [];
532
+ for (const appt of allOriginalAppointments) {
533
+ const segment = this.schedulerService.getClonedAppointmentSegmentOnDay(appt, currentDay, 0, 24, true);
534
+ if (segment) {
535
+ segmentsForThisDay.push(segment);
536
+ }
537
+ }
538
+ const sortedSegments = orderBy(segmentsForThisDay, [
539
+ (s) => (s.allDay ? 0 : 1),
540
+ (s) => s.startDate.date.getTime(),
541
+ (s) => s.originalEndDate.date.getTime() - s.originalStartDate.date.getTime(),
542
+ ], ['asc', 'asc', 'desc']);
543
+ result.push({
544
+ date: currentDay,
545
+ appointments: sortedSegments,
546
+ });
547
+ }
548
+ return result;
401
549
  });
402
550
  // Internal outputs to be caught by parent AXSchedulerComponent
403
551
  this.slotClickedInternal = output();
@@ -406,6 +554,7 @@ class AXSchedulerAgendaViewComponent extends MXBaseComponent {
406
554
  this.appointmentClickedInternal = output();
407
555
  this.appointmentDblClickedInternal = output();
408
556
  this.appointmentRightClickedInternal = output();
557
+ this.onAppointmentDropInternal = output();
409
558
  // --- Event Handlers ---
410
559
  this.eventOutputMap = {
411
560
  slot: {
@@ -420,15 +569,48 @@ class AXSchedulerAgendaViewComponent extends MXBaseComponent {
420
569
  },
421
570
  };
422
571
  }
423
- handleAppointmentEvent(mouseEvent, appointment) {
424
- this.schedulerService.handleEvent({ event: mouseEvent, appointment }, this.eventOutputMap, 'appointment');
572
+ handleAppointmentEvent(mouseEvent, appointmentItem) {
573
+ const originalAppointment = this.getOriginalAppointmentFromItem(appointmentItem);
574
+ this.schedulerService.handleEvent({ event: mouseEvent, appointment: originalAppointment }, this.eventOutputMap, 'appointment');
425
575
  }
426
576
  handleSlotEvent(mouseEvent, date) {
427
- const slotData = this.schedulerService.getSlotData(date, 'month');
577
+ const slotData = this.schedulerService.getSlotData(date.startOf('day'), 'agenda');
428
578
  if (slotData) {
429
579
  this.schedulerService.handleEvent({ event: mouseEvent, slot: slotData }, this.eventOutputMap, 'slot');
430
580
  }
431
581
  }
582
+ handleDrop(e, date) {
583
+ const slotData = this.schedulerService.getSlotData(date.startOf('day'), 'agenda');
584
+ const droppedItem = e.dropped.dragData();
585
+ const originalAppointment = this.getOriginalAppointmentFromItem(droppedItem);
586
+ this.onAppointmentDropInternal.emit({
587
+ event: e,
588
+ slot: slotData,
589
+ appointment: originalAppointment,
590
+ });
591
+ }
592
+ getOriginalAppointmentFromItem(item) {
593
+ const segment = item;
594
+ if (segment.originalStartDate && segment.originalEndDate) {
595
+ const originalAppointmentSource = this.appointments().find((a) => a.key === segment.key);
596
+ if (originalAppointmentSource)
597
+ return originalAppointmentSource;
598
+ // Fallback
599
+ return {
600
+ key: segment.key,
601
+ title: segment.title,
602
+ description: segment.description,
603
+ textColor: segment.textColor,
604
+ backgroundColor: segment.backgroundColor,
605
+ readonly: segment.readonly,
606
+ startDate: segment.originalStartDate,
607
+ endDate: segment.originalEndDate,
608
+ allDay: segment.allDay,
609
+ singleDay: segment.originalStartDate.equal(segment.originalEndDate, 'day'),
610
+ };
611
+ }
612
+ return item;
613
+ }
432
614
  isToday(date) {
433
615
  const today = this.calendarService.create(new Date());
434
616
  return date.equal(today, 'day');
@@ -436,12 +618,19 @@ class AXSchedulerAgendaViewComponent extends MXBaseComponent {
436
618
  get isReadonly() {
437
619
  return this.readonly();
438
620
  }
439
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXSchedulerAgendaViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
440
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: AXSchedulerAgendaViewComponent, isStandalone: true, selector: "ax-scheduler-agenda-view", inputs: { daysCount: { classPropertyName: "daysCount", publicName: "daysCount", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, endHour: { classPropertyName: "endHour", publicName: "endHour", isSignal: true, isRequired: true, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: true, transformFunction: null }, startHour: { classPropertyName: "startHour", publicName: "startHour", isSignal: true, isRequired: true, transformFunction: null }, appointments: { classPropertyName: "appointments", publicName: "appointments", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { slotClickedInternal: "slotClickedInternal", slotDblClickedInternal: "slotDblClickedInternal", slotRightClickedInternal: "slotRightClickedInternal", appointmentClickedInternal: "appointmentClickedInternal", appointmentDblClickedInternal: "appointmentDblClickedInternal", appointmentRightClickedInternal: "appointmentRightClickedInternal" }, host: { properties: { "class.ax-state-readonly": "this.isReadonly" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-scheduler-agenda-container\">\n @for (appt of multiDayAppointments(); track appt.appointments) {\n <div\n [class.ax-today]=\"isToday(appt.date)\"\n class=\"ax-scheduler-agenda-view-container\"\n (click)=\"handleSlotEvent($event, appt.date)\"\n (dblclick)=\"handleSlotEvent($event, appt.date)\"\n (contextmenu)=\"handleSlotEvent($event, appt.date)\"\n >\n <div class=\"ax-scheduler-agenda-header-date-day\">\n <span class=\"ax-scheduler-agenda-header-date-day-char\">\n {{ appt.date | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n </span>\n <span class=\"ax-scheduler-agenda-header-date-day-num\">\n {{ appt.date | format: 'date' : { format: 'DD', calendar: calendar() } | async }}\n </span>\n </div>\n <div class=\"ax-scheduler-agenda-appointment-container\">\n @for (appointment of appt.appointments; track appointment.key) {\n <div\n (click)=\"handleAppointmentEvent($event, appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n [title]=\"appointment.title\"\n [class.ax-draggable]=\"draggable()\"\n [style.color]=\"appointment.textColor\"\n class=\"ax-scheduler-agenda-appointment\"\n [style.background-color]=\"appointment.backgroundColor\"\n >\n <ax-title class=\"ax-scheduler-truncate\">{{ appointment.title }}</ax-title>\n <ax-subtitle>\n {{ appointment.startDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }} -\n {{ appointment.endDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n </ax-subtitle>\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-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-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-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-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-scheduler-agenda-header-date-day{width:5.5rem;gap:.25rem;display:flex;height:2.75rem;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{font-weight:300}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container .ax-scheduler-agenda-header-date-day .ax-scheduler-agenda-header-date-day-num{font-weight:500;font-size:1.25rem}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container{width:100%;display:flex;flex-direction:column;gap:.25rem}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment{width:100%;display:flex;overflow:hidden;flex-direction:column;padding-block:.25rem;padding-inline:.5rem;color:rgba(var(--ax-sys-color-on-primary-surface));border-radius:calc(var(--ax-sys-border-radius) / 2);background-color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-agenda-view:not(.ax-state-readonly) .ax-scheduler-agenda-appointment{cursor:pointer}ax-scheduler-agenda-view:not(.ax-state-readonly) .ax-scheduler-agenda-view-container{cursor:pointer;transition-property:background-color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-scheduler-agenda-view:not(.ax-state-readonly) .ax-scheduler-agenda-view-container:hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg, var(--ax-sys-color-primary-surface), .1))}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXFormatPipe, name: "format" }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
621
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXSchedulerAgendaViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
622
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AXSchedulerAgendaViewComponent, isStandalone: true, selector: "ax-scheduler-agenda-view", inputs: { daysCount: { classPropertyName: "daysCount", publicName: "daysCount", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: true, transformFunction: null }, appointments: { classPropertyName: "appointments", publicName: "appointments", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { slotClickedInternal: "slotClickedInternal", slotDblClickedInternal: "slotDblClickedInternal", slotRightClickedInternal: "slotRightClickedInternal", appointmentClickedInternal: "appointmentClickedInternal", appointmentDblClickedInternal: "appointmentDblClickedInternal", appointmentRightClickedInternal: "appointmentRightClickedInternal", onAppointmentDropInternal: "onAppointmentDropInternal" }, host: { properties: { "class.ax-state-readonly": "this.isReadonly" } }, 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-today]=\"isToday(dayData.date)\"\n class=\"ax-scheduler-agenda-view-container\"\n (click)=\"handleSlotEvent($event, dayData.date)\"\n (dblclick)=\"handleSlotEvent($event, dayData.date)\"\n (contextmenu)=\"handleSlotEvent($event, dayData.date)\"\n >\n <div class=\"ax-scheduler-agenda-header-date-day\">\n <span class=\"ax-scheduler-agenda-header-date-day-char\">\n {{ dayData.date | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\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.key + segment.originalStartDate.date.getTime()) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"segment\"\n [dragElementClone]=\"true\"\n [dragDisabled]=\"!draggable() || segment.readonly || readonly()\"\n (click)=\"handleAppointmentEvent($event, segment)\"\n (dblclick)=\"handleAppointmentEvent($event, segment)\"\n (contextmenu)=\"handleAppointmentEvent($event, segment)\"\n [title]=\"\n segment.title +\n (segment.allDay\n ? ' (All Day)'\n : ' (' +\n (segment.originalStartDate | format: 'time' : { calendar: calendar() } | async) +\n ' - ' +\n (segment.originalEndDate | format: 'time' : { calendar: calendar() } | async) +\n ')')\n \"\n [style.color]=\"segment.textColor\"\n class=\"ax-scheduler-agenda-appointment\"\n [class.all-day-segment]=\"segment.allDay\"\n [style.background-color]=\"segment.backgroundColor\"\n >\n <div class=\"ax-scheduler-agenda-appointment-time\">\n @if (segment.allDay) {\n <span>{{ 'dateTime.duration.all-day' | translate | async }}</span>\n } @else {\n <span>\n {{ segment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n -\n {{ segment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n </span>\n }\n </div>\n <ax-title class=\"ax-scheduler-agenda-appointment-title ax-scheduler-truncate\">{{ segment.title }}</ax-title>\n <!-- Description could go here if needed -->\n <!-- <ax-subtitle *ngIf=\"segment.description\">{{ segment.description }}</ax-subtitle> -->\n </div>\n }\n @if (dayData.appointments.length === 0) {\n <div class=\"ax-scheduler-agenda-no-appointments\">\n {{ 'noRecord' | translate | async }}\n </div>\n }\n </div>\n </div>\n }\n</div>\n", styles: ["ax-scheduler-agenda-view .ax-scheduler-agenda-container{height:100%;display:flex;flex-direction:column}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container{gap:1rem;display:flex;position:relative;padding-inline:1rem;padding-block:.25rem;border-block-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container:last-child{border-block-end-width:0}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-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-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-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-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-scheduler-agenda-header-date-day{width:5.5rem;gap:.25rem;display:flex;height:2.75rem;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{font-weight:300}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container .ax-scheduler-agenda-header-date-day .ax-scheduler-agenda-header-date-day-num{font-weight:500;font-size:1.25rem}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container{width:100%;gap:.25rem;display:flex;align-items:center;flex-direction:column;justify-content:center}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment{gap:.5rem;width:100%;display:flex;overflow:hidden;align-items:center;flex-direction:row;padding-block:.25rem;padding-inline:.5rem;color:rgba(var(--ax-sys-color-on-primary-surface));border-radius:calc(var(--ax-sys-border-radius) / 2);background-color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment.all-day-segment .ax-scheduler-agenda-appointment-time{font-weight:500}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment .ax-scheduler-agenda-appointment-time{flex-shrink:0;min-width:120px;font-size:.9em;opacity:.9}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment .ax-scheduler-agenda-appointment-title{flex-grow:1}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-no-appointments{text-align:center;font-style:italic;color:rgba(var(--ax-sys-color-on-surface),.6)}ax-scheduler-agenda-view:not(.ax-state-readonly) .ax-scheduler-agenda-appointment{cursor:pointer}ax-scheduler-agenda-view:not(.ax-state-readonly) .ax-scheduler-agenda-view-container{cursor:pointer;transition-property:background-color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-scheduler-agenda-view:not(.ax-state-readonly) .ax-scheduler-agenda-view-container:hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg, var(--ax-sys-color-primary-surface), .1))}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXFormatPipe, name: "format" }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["dragData", "dragDisabled", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragCursor", "dragBoundary"], outputs: ["dragPositionChanged"] }, { kind: "directive", type: AXDropZoneDirective, selector: "[axDropZone]", inputs: ["dropZoneGroup"], outputs: ["onElementDrop", "onElementHover"], exportAs: ["axDropZone"] }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
441
623
  }
442
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXSchedulerAgendaViewComponent, decorators: [{
624
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXSchedulerAgendaViewComponent, decorators: [{
443
625
  type: Component,
444
- args: [{ selector: 'ax-scheduler-agenda-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AsyncPipe, AXFormatPipe, AXDecoratorGenericComponent], template: "<div class=\"ax-scheduler-agenda-container\">\n @for (appt of multiDayAppointments(); track appt.appointments) {\n <div\n [class.ax-today]=\"isToday(appt.date)\"\n class=\"ax-scheduler-agenda-view-container\"\n (click)=\"handleSlotEvent($event, appt.date)\"\n (dblclick)=\"handleSlotEvent($event, appt.date)\"\n (contextmenu)=\"handleSlotEvent($event, appt.date)\"\n >\n <div class=\"ax-scheduler-agenda-header-date-day\">\n <span class=\"ax-scheduler-agenda-header-date-day-char\">\n {{ appt.date | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n </span>\n <span class=\"ax-scheduler-agenda-header-date-day-num\">\n {{ appt.date | format: 'date' : { format: 'DD', calendar: calendar() } | async }}\n </span>\n </div>\n <div class=\"ax-scheduler-agenda-appointment-container\">\n @for (appointment of appt.appointments; track appointment.key) {\n <div\n (click)=\"handleAppointmentEvent($event, appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n [title]=\"appointment.title\"\n [class.ax-draggable]=\"draggable()\"\n [style.color]=\"appointment.textColor\"\n class=\"ax-scheduler-agenda-appointment\"\n [style.background-color]=\"appointment.backgroundColor\"\n >\n <ax-title class=\"ax-scheduler-truncate\">{{ appointment.title }}</ax-title>\n <ax-subtitle>\n {{ appointment.startDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }} -\n {{ appointment.endDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n </ax-subtitle>\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-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-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-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-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-scheduler-agenda-header-date-day{width:5.5rem;gap:.25rem;display:flex;height:2.75rem;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{font-weight:300}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container .ax-scheduler-agenda-header-date-day .ax-scheduler-agenda-header-date-day-num{font-weight:500;font-size:1.25rem}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container{width:100%;display:flex;flex-direction:column;gap:.25rem}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment{width:100%;display:flex;overflow:hidden;flex-direction:column;padding-block:.25rem;padding-inline:.5rem;color:rgba(var(--ax-sys-color-on-primary-surface));border-radius:calc(var(--ax-sys-border-radius) / 2);background-color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-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"] }]
626
+ args: [{ selector: 'ax-scheduler-agenda-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
627
+ AsyncPipe,
628
+ AXFormatPipe,
629
+ AXDecoratorGenericComponent,
630
+ AXDragDirective,
631
+ AXDropZoneDirective,
632
+ AXTranslatorPipe,
633
+ ], 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-today]=\"isToday(dayData.date)\"\n class=\"ax-scheduler-agenda-view-container\"\n (click)=\"handleSlotEvent($event, dayData.date)\"\n (dblclick)=\"handleSlotEvent($event, dayData.date)\"\n (contextmenu)=\"handleSlotEvent($event, dayData.date)\"\n >\n <div class=\"ax-scheduler-agenda-header-date-day\">\n <span class=\"ax-scheduler-agenda-header-date-day-char\">\n {{ dayData.date | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\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.key + segment.originalStartDate.date.getTime()) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"segment\"\n [dragElementClone]=\"true\"\n [dragDisabled]=\"!draggable() || segment.readonly || readonly()\"\n (click)=\"handleAppointmentEvent($event, segment)\"\n (dblclick)=\"handleAppointmentEvent($event, segment)\"\n (contextmenu)=\"handleAppointmentEvent($event, segment)\"\n [title]=\"\n segment.title +\n (segment.allDay\n ? ' (All Day)'\n : ' (' +\n (segment.originalStartDate | format: 'time' : { calendar: calendar() } | async) +\n ' - ' +\n (segment.originalEndDate | format: 'time' : { calendar: calendar() } | async) +\n ')')\n \"\n [style.color]=\"segment.textColor\"\n class=\"ax-scheduler-agenda-appointment\"\n [class.all-day-segment]=\"segment.allDay\"\n [style.background-color]=\"segment.backgroundColor\"\n >\n <div class=\"ax-scheduler-agenda-appointment-time\">\n @if (segment.allDay) {\n <span>{{ 'dateTime.duration.all-day' | translate | async }}</span>\n } @else {\n <span>\n {{ segment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n -\n {{ segment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n </span>\n }\n </div>\n <ax-title class=\"ax-scheduler-agenda-appointment-title ax-scheduler-truncate\">{{ segment.title }}</ax-title>\n <!-- Description could go here if needed -->\n <!-- <ax-subtitle *ngIf=\"segment.description\">{{ segment.description }}</ax-subtitle> -->\n </div>\n }\n @if (dayData.appointments.length === 0) {\n <div class=\"ax-scheduler-agenda-no-appointments\">\n {{ 'noRecord' | translate | async }}\n </div>\n }\n </div>\n </div>\n }\n</div>\n", styles: ["ax-scheduler-agenda-view .ax-scheduler-agenda-container{height:100%;display:flex;flex-direction:column}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container{gap:1rem;display:flex;position:relative;padding-inline:1rem;padding-block:.25rem;border-block-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container:last-child{border-block-end-width:0}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-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-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-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-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-scheduler-agenda-header-date-day{width:5.5rem;gap:.25rem;display:flex;height:2.75rem;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{font-weight:300}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container .ax-scheduler-agenda-header-date-day .ax-scheduler-agenda-header-date-day-num{font-weight:500;font-size:1.25rem}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container{width:100%;gap:.25rem;display:flex;align-items:center;flex-direction:column;justify-content:center}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment{gap:.5rem;width:100%;display:flex;overflow:hidden;align-items:center;flex-direction:row;padding-block:.25rem;padding-inline:.5rem;color:rgba(var(--ax-sys-color-on-primary-surface));border-radius:calc(var(--ax-sys-border-radius) / 2);background-color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment.all-day-segment .ax-scheduler-agenda-appointment-time{font-weight:500}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment .ax-scheduler-agenda-appointment-time{flex-shrink:0;min-width:120px;font-size:.9em;opacity:.9}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment .ax-scheduler-agenda-appointment-title{flex-grow:1}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-no-appointments{text-align:center;font-style:italic;color:rgba(var(--ax-sys-color-on-surface),.6)}ax-scheduler-agenda-view:not(.ax-state-readonly) .ax-scheduler-agenda-appointment{cursor:pointer}ax-scheduler-agenda-view:not(.ax-state-readonly) .ax-scheduler-agenda-view-container{cursor:pointer;transition-property:background-color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-scheduler-agenda-view:not(.ax-state-readonly) .ax-scheduler-agenda-view-container:hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg, var(--ax-sys-color-primary-surface), .1))}\n"] }]
445
634
  }], propDecorators: { isReadonly: [{
446
635
  type: HostBinding,
447
636
  args: ['class.ax-state-readonly']
@@ -459,16 +648,45 @@ class AXSchedulerDayViewComponent extends MXBaseComponent {
459
648
  this.date = input.required();
460
649
  this.startHour = input.required();
461
650
  this.appointments = input([]);
462
- this.allDayAppointments = computed(() => this.appointments()?.filter((e) => e && e.allDay) ?? []);
463
- this.singleDayAppointments = computed(() => this.appointments()?.filter((e) => e && e.singleDay && !e.allDay) ?? []);
464
- // Internal outputs to be caught by parent AXSchedulerComponent
651
+ this.processedAppointmentsForLayout = computed(() => {
652
+ const viewDate = this.date();
653
+ const startH = this.startHour();
654
+ const endH = this.endHour();
655
+ const allAppointmentsInView = this.appointments();
656
+ if (!viewDate || allAppointmentsInView.length === 0) {
657
+ return [];
658
+ }
659
+ const segmentsForThisDay = [];
660
+ for (const appt of allAppointmentsInView) {
661
+ const segment = this.schedulerService.getClonedAppointmentSegmentOnDay(appt, viewDate, startH, endH);
662
+ if (segment) {
663
+ segmentsForThisDay.push(segment);
664
+ }
665
+ }
666
+ return segmentsForThisDay;
667
+ });
668
+ this.allDayAppointments = computed(() => {
669
+ const originalAllDayAppointments = this.appointments()?.filter((e) => e && e.allDay) ?? [];
670
+ const multiDayBecomingAllDaySegments = this.processedAppointmentsForLayout()?.filter((segment) => segment && segment.allDay && !this.appointments().find((orig) => orig.key === segment.key)?.allDay) ?? [];
671
+ const combined = new Map();
672
+ originalAllDayAppointments.forEach((appt) => combined.set(appt.key, appt));
673
+ multiDayBecomingAllDaySegments.forEach((appt) => {
674
+ if (!combined.has(appt.key)) {
675
+ combined.set(appt.key, appt);
676
+ }
677
+ });
678
+ return Array.from(combined.values());
679
+ });
680
+ this.singleDayAppointments = computed(() => {
681
+ return this.processedAppointmentsForLayout()?.filter((e) => e && !e.allDay) ?? [];
682
+ });
465
683
  this.slotClickedInternal = output();
466
684
  this.slotDblClickedInternal = output();
467
685
  this.slotRightClickedInternal = output();
468
686
  this.appointmentClickedInternal = output();
469
687
  this.appointmentDblClickedInternal = output();
470
688
  this.appointmentRightClickedInternal = output();
471
- // --- Event Handlers ---
689
+ this.onAppointmentDropInternal = output();
472
690
  this.eventOutputMap = {
473
691
  slot: {
474
692
  click: this.slotClickedInternal,
@@ -485,9 +703,9 @@ class AXSchedulerDayViewComponent extends MXBaseComponent {
485
703
  let time = this.date();
486
704
  if (!time)
487
705
  return [];
488
- time = time.set('hour', this.startHour()).set('minute', 0).set('second', 0);
706
+ time = time.set('hour', this.startHour()).startOf('hour');
489
707
  const hours = [time];
490
- while (time.hour < this.endHour()) {
708
+ while (time.hour < this.endHour() - 1) {
491
709
  time = time.add('hour', 1);
492
710
  hours.push(time);
493
711
  }
@@ -495,74 +713,65 @@ class AXSchedulerDayViewComponent extends MXBaseComponent {
495
713
  });
496
714
  this.appointmentLayouts = computed(() => {
497
715
  const layouts = new Map();
498
- const sAppointments = this.singleDayAppointments();
499
- const viewDate = this.date(); // Get the start date for the view
716
+ const appointmentsToLayout = this.singleDayAppointments();
717
+ const viewDate = this.date();
500
718
  const startH = this.startHour();
501
719
  const endH = this.endHour();
502
- // Add check for viewDate
503
- if (sAppointments.length === 0 || !viewDate || typeof startH !== 'number' || typeof endH !== 'number') {
720
+ if (appointmentsToLayout.length === 0 || !viewDate || typeof startH !== 'number' || typeof endH !== 'number') {
504
721
  return layouts;
505
722
  }
506
- // Pass viewDate to the service method
507
- const concurrencyInfo = this.schedulerService.calculateDayViewConcurrencyInfo(sAppointments, viewDate, startH, endH);
508
- // Sort for greedy placement
509
- const sortedAppointments = orderBy(sAppointments, [(e) => e.startDate.date.getTime(), (e) => e.endDate.date.getTime()], ['asc', 'desc']);
510
- // --- First Pass: Assign Columns Greedily (remains in component) ---
511
- const columnEndTimes = new Map();
512
- const assignedColumns = new Map(); // Store assigned col index per appointment key
513
- for (const appointment of sortedAppointments) {
514
- let assignedColumn = -1;
515
- let colIdx = 0;
516
- while (assignedColumn < 0) {
517
- const lastAppointmentEndTimeInColumn = columnEndTimes.get(colIdx);
518
- // Use service overlap check? (Optional, simple comparison is fine here)
519
- if (!lastAppointmentEndTimeInColumn ||
520
- lastAppointmentEndTimeInColumn.compare(appointment.startDate, 'minute') <= 0) {
521
- assignedColumn = colIdx;
723
+ const concurrencyInfoMap = this.schedulerService.calculateDayViewConcurrencyInfo(appointmentsToLayout, viewDate, startH, endH);
724
+ const sortedAppointments = orderBy(appointmentsToLayout, [(e) => e.startDate.date.getTime(), (e) => e.originalEndDate.date.getTime() - e.originalStartDate.date.getTime()], ['asc', 'desc']);
725
+ const columnsData = [];
726
+ for (const appointmentSegment of sortedAppointments) {
727
+ let assignedCol = -1;
728
+ for (let c = 0;; c++) {
729
+ if (!columnsData[c]) {
730
+ columnsData[c] = { appointments: [] };
522
731
  }
523
- else {
524
- colIdx++;
732
+ let conflict = false;
733
+ for (const placedSegment of columnsData[c].appointments) {
734
+ if (appointmentSegment.startDate.compare(placedSegment.endDate, 'minute') < 0 &&
735
+ appointmentSegment.endDate.compare(placedSegment.startDate, 'minute') > 0) {
736
+ conflict = true;
737
+ break;
738
+ }
525
739
  }
526
- // Safety break
527
- if (colIdx > sAppointments.length * 2 && assignedColumn < 0) {
528
- console.warn(`DayView: Safety break assigning column 0 for appointment ${appointment.key}`);
529
- assignedColumn = 0;
740
+ if (!conflict) {
741
+ assignedCol = c;
742
+ columnsData[c].appointments.push(appointmentSegment);
743
+ break;
744
+ }
745
+ if (c > appointmentsToLayout.length) {
746
+ console.warn(`DayView: Safety break in column assignment for ${appointmentSegment.title}, assigning to new column ${c}`);
747
+ if (!columnsData[c])
748
+ columnsData[c] = { appointments: [] };
749
+ columnsData[c].appointments.push(appointmentSegment);
750
+ assignedCol = c;
530
751
  break;
531
752
  }
532
753
  }
533
- assignedColumns.set(appointment.key, assignedColumn); // Store assignment
534
- // Update end time for the assigned column
535
- const currentEndTimeInColumn = columnEndTimes.get(assignedColumn);
536
- if (!currentEndTimeInColumn || appointment.endDate.compare(currentEndTimeInColumn, 'minute') > 0) {
537
- columnEndTimes.set(assignedColumn, appointment.endDate);
538
- }
754
+ const concurrencyInfo = concurrencyInfoMap.get(appointmentSegment.key);
755
+ const effectiveCols = concurrencyInfo ? concurrencyInfo.effectiveTotalColumns : 1;
756
+ layouts.set(appointmentSegment.key, {
757
+ columnIndex: assignedCol,
758
+ effectiveTotalColumns: effectiveCols,
759
+ });
539
760
  }
540
- // --- Combine results ---
541
- sAppointments.forEach((appointment) => {
542
- const appointmentKey = appointment.key;
543
- const assignedCol = assignedColumns.get(appointmentKey);
544
- const effectiveCols = concurrencyInfo.get(appointmentKey)?.effectiveTotalColumns;
545
- // Ensure we have both pieces of info
546
- if (typeof assignedCol === 'number' && typeof effectiveCols === 'number') {
547
- layouts.set(appointmentKey, {
548
- columnIndex: assignedCol,
549
- effectiveTotalColumns: effectiveCols,
550
- });
551
- }
552
- else {
553
- console.warn(`DayView: Missing layout info for appointment ${appointmentKey}. Assigning default.`);
554
- // Provide a fallback default layout?
555
- layouts.set(appointmentKey, { columnIndex: 0, effectiveTotalColumns: 1 });
556
- }
557
- });
558
761
  return layouts;
559
762
  });
560
763
  }
561
764
  handleAppointmentEvent(mouseEvent, appointment) {
562
- this.schedulerService.handleEvent({ event: mouseEvent, appointment }, this.eventOutputMap, 'appointment');
765
+ const originalAppointment = appointment.originalStartDate
766
+ ? {
767
+ ...appointment,
768
+ startDate: appointment.originalStartDate,
769
+ endDate: appointment.originalEndDate,
770
+ }
771
+ : appointment;
772
+ this.schedulerService.handleEvent({ event: mouseEvent, appointment: originalAppointment }, this.eventOutputMap, 'appointment');
563
773
  }
564
- handleSingleSlotEvent(mouseEvent, startDate, minuteIndex) {
565
- startDate = startDate.add('minute', minuteIndex * 30);
774
+ handleSingleSlotEvent(mouseEvent, startDate) {
566
775
  const slotData = this.schedulerService.getSlotData(startDate, 'day');
567
776
  if (slotData)
568
777
  this.schedulerService.handleEvent({ event: mouseEvent, slot: slotData }, this.eventOutputMap, 'slot');
@@ -574,7 +783,40 @@ class AXSchedulerDayViewComponent extends MXBaseComponent {
574
783
  if (slotData)
575
784
  this.schedulerService.handleEvent({ event: mouseEvent, slot: slotData }, this.eventOutputMap, 'slot');
576
785
  }
577
- // --- Style Calculation Functions (depend on appointmentLayouts - no change needed) ---
786
+ handleAllDayDrop(e) {
787
+ const endDate = this.date().endOf('day');
788
+ const startDate = this.date().startOf('day');
789
+ const slotData = { startDate, endDate, view: 'day' };
790
+ const droppedAppt = e.dropped.dragData();
791
+ const originalDroppedAppt = droppedAppt.originalStartDate
792
+ ? {
793
+ ...droppedAppt,
794
+ startDate: droppedAppt.originalStartDate,
795
+ endDate: droppedAppt.originalEndDate,
796
+ }
797
+ : droppedAppt;
798
+ this.onAppointmentDropInternal.emit({
799
+ event: e,
800
+ slot: slotData,
801
+ appointment: originalDroppedAppt,
802
+ });
803
+ }
804
+ handleSingleDayDrop(e, startDate) {
805
+ const slotData = this.schedulerService.getSlotData(startDate, 'day');
806
+ const droppedAppt = e.dropped.dragData();
807
+ const originalDroppedAppt = droppedAppt.originalStartDate
808
+ ? {
809
+ ...droppedAppt,
810
+ startDate: droppedAppt.originalStartDate,
811
+ endDate: droppedAppt.originalEndDate,
812
+ }
813
+ : droppedAppt;
814
+ this.onAppointmentDropInternal.emit({
815
+ event: e,
816
+ slot: slotData,
817
+ appointment: originalDroppedAppt,
818
+ });
819
+ }
578
820
  getAppointmentLayout(key) {
579
821
  return this.appointmentLayouts().get(key);
580
822
  }
@@ -583,6 +825,10 @@ class AXSchedulerDayViewComponent extends MXBaseComponent {
583
825
  if (layout && layout.effectiveTotalColumns > 0) {
584
826
  const N = layout.effectiveTotalColumns;
585
827
  const C = layout.columnIndex;
828
+ if (C < 0) {
829
+ console.warn('Invalid columnIndex < 0 for key:', key);
830
+ return '0px';
831
+ }
586
832
  if (C === 0 || N <= 1)
587
833
  return '0px';
588
834
  const leftPercent = C * (100 / N);
@@ -595,28 +841,19 @@ class AXSchedulerDayViewComponent extends MXBaseComponent {
595
841
  const layout = this.getAppointmentLayout(key);
596
842
  if (layout && layout.effectiveTotalColumns > 0) {
597
843
  const N = layout.effectiveTotalColumns;
598
- const C = layout.columnIndex;
599
844
  if (N <= 0)
600
845
  return '0%';
601
846
  if (N === 1)
602
- return '100%';
847
+ return `calc(100% - ${this.GAP_PX}px)`;
603
848
  const widthPercent = (1 / N) * 100;
604
- const isLastColumn = C + 1 === N;
605
- if (!isLastColumn) {
606
- return `calc(${widthPercent}% - ${this.GAP_PX}px)`;
607
- }
608
- else {
609
- const cumulativeGapPx = (N - 1) * this.GAP_PX;
610
- return `calc(${widthPercent}% - ${cumulativeGapPx}px)`;
611
- }
849
+ return `calc(${widthPercent}% - ${this.GAP_PX}px)`;
612
850
  }
613
851
  return '0%';
614
852
  }
615
853
  getAppointmentTop(key) {
616
- const appointment = this.appointments().find((e) => e.key === key);
617
- const layout = this.getAppointmentLayout(key);
618
- if (appointment?.singleDay && layout) {
619
- const startMinutes = appointment.startDate.hour * 60 + appointment.startDate.minute;
854
+ const appointmentSegment = this.singleDayAppointments().find((e) => e.key === key);
855
+ if (appointmentSegment) {
856
+ const startMinutes = appointmentSegment.startDate.hour * 60 + appointmentSegment.startDate.minute;
620
857
  const startBlockOffset = startMinutes - this.startHour() * 60;
621
858
  const yBlock = startBlockOffset / 30;
622
859
  return `calc(var(--ax-comp-scheduler-basic-view-blocks-height) * ${yBlock} + 1px)`;
@@ -624,10 +861,12 @@ class AXSchedulerDayViewComponent extends MXBaseComponent {
624
861
  return '';
625
862
  }
626
863
  getAppointmentHeight(key) {
627
- const appointment = this.appointments().find((e) => e.key === key);
628
- if (appointment?.singleDay) {
629
- const durationMillis = appointment.endDate.date.getTime() - appointment.startDate.date.getTime();
864
+ const appointmentSegment = this.singleDayAppointments().find((e) => e.key === key);
865
+ if (appointmentSegment) {
866
+ const durationMillis = appointmentSegment.endDate.date.getTime() - appointmentSegment.startDate.date.getTime();
630
867
  const durationMinutes = Math.max(0, durationMillis / (1000 * 60));
868
+ if (durationMinutes <= 0)
869
+ return '0px';
631
870
  const heightBlock = durationMinutes / 30;
632
871
  const blockHeightExpr = `var(--ax-comp-scheduler-basic-view-blocks-height)`;
633
872
  return `calc(${blockHeightExpr} * ${heightBlock} - ${this.GAP_PX}px)`;
@@ -637,12 +876,20 @@ class AXSchedulerDayViewComponent extends MXBaseComponent {
637
876
  get isReadonly() {
638
877
  return this.readonly();
639
878
  }
640
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXSchedulerDayViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
641
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", 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 }, calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, endHour: { classPropertyName: "endHour", publicName: "endHour", isSignal: true, isRequired: true, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: true, transformFunction: null }, startHour: { classPropertyName: "startHour", publicName: "startHour", isSignal: true, isRequired: true, transformFunction: null }, appointments: { classPropertyName: "appointments", publicName: "appointments", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { slotClickedInternal: "slotClickedInternal", slotDblClickedInternal: "slotDblClickedInternal", slotRightClickedInternal: "slotRightClickedInternal", appointmentClickedInternal: "appointmentClickedInternal", appointmentDblClickedInternal: "appointmentDblClickedInternal", appointmentRightClickedInternal: "appointmentRightClickedInternal" }, host: { properties: { "class.ax-state-readonly": "this.isReadonly" } }, 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 {{ 'dateTime.duration.all-day' | translate | async }}\n </div>\n </div>\n <div\n class=\"ax-scheduler-day-header-table-container\"\n (click)=\"handleAllDaySlotEvent($event)\"\n (dblclick)=\"handleAllDaySlotEvent($event)\"\n (contextmenu)=\"handleAllDaySlotEvent($event)\"\n >\n <div class=\"ax-scheduler-day-header-appointment-container\">\n @if (allDayAppointments().length) {\n <div\n (click)=\"handleAppointmentEvent($event, allDayAppointments()[0])\"\n (dblclick)=\"handleAppointmentEvent($event, allDayAppointments()[0])\"\n (contextmenu)=\"handleAppointmentEvent($event, allDayAppointments()[0])\"\n [class.ax-draggable]=\"draggable()\"\n [title]=\"allDayAppointments()[0].title\"\n class=\"ax-scheduler-header-day-appointment\"\n [style.color]=\"allDayAppointments()[0].textColor\"\n [style.background-color]=\"allDayAppointments()[0].backgroundColor\"\n >\n <ax-title class=\"ax-scheduler-truncate\">{{ allDayAppointments()[0].title }}</ax-title>\n </div>\n }\n @if (allDayAppointments().length > 1) {\n <div\n #moreAppointments\n class=\"ax-scheduler-day-header-more-tag\"\n [style.color]=\"allDayAppointments()[1].textColor\"\n [style.background-color]=\"allDayAppointments()[1].backgroundColor\"\n >\n {{ 'more-items' | translate: { params: { number: allDayAppointments().length - 1 } } | async }}\n </div>\n <ax-popover [target]=\"moreAppointments\" [placement]=\"'bottom'\">\n <div class=\"ax-overlay-pane ax-scheduler-popover\" [class.ax-state-readonly]=\"readonly()\">\n @for (appointment of allDayAppointments(); track appointment.key; let first = $first) {\n @if (!first) {\n <div\n (click)=\"handleAppointmentEvent($event, appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n [title]=\"appointment.title\"\n [class.ax-draggable]=\"draggable()\"\n class=\"ax-scheduler-popover-appointment\"\n [style.color]=\"appointment.textColor\"\n [style.background-color]=\"appointment.backgroundColor\"\n >\n <ax-title class=\"ax-scheduler-truncate\">{{ appointment.title }}</ax-title>\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.key) {\n <div\n (click)=\"handleAppointmentEvent($event, appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n [title]=\"appointment.title\"\n [class.ax-draggable]=\"draggable()\"\n class=\"ax-scheduler-day-appointment\"\n [style.color]=\"appointment.textColor\"\n [style.width]=\"getAppointmentWidth(appointment.key)\"\n [style.height]=\"getAppointmentHeight(appointment.key)\"\n [style.background-color]=\"appointment.backgroundColor\"\n [style.inset-block-start]=\"getAppointmentTop(appointment.key)\"\n [style.inset-inline-start]=\"getAppointmentLeft(appointment.key)\"\n >\n <ax-title class=\"ax-scheduler-truncate\">{{ appointment.title }}</ax-title>\n <ax-subtitle>\n {{ appointment.startDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }} -\n {{ appointment.endDate | format: 'time' : { format: 'HH:mm', 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 (click)=\"handleSingleSlotEvent($event, time, 0)\"\n (dblclick)=\"handleSingleSlotEvent($event, time, 0)\"\n (contextmenu)=\"handleSingleSlotEvent($event, time, 0)\"\n ></div>\n <div\n (click)=\"handleSingleSlotEvent($event, time, 1)\"\n (dblclick)=\"handleSingleSlotEvent($event, time, 1)\"\n (contextmenu)=\"handleSingleSlotEvent($event, time, 1)\"\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: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-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table{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: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-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%;overflow:hidden;padding-inline:.5rem;color:rgba(var(--ax-sys-color-on-primary-surface));border-radius:calc(var(--ax-sys-border-radius) / 2);background-color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table-container .ax-scheduler-day-header-appointment-container .ax-scheduler-day-header-more-tag{cursor:pointer;text-wrap:nowrap;padding-inline:.5rem;border-radius:var(--ax-sys-border-radius);color:rgba(var(--ax-sys-color-on-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface))}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:1;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;color:rgba(var(--ax-sys-color-on-primary-surface));border-radius:calc(var(--ax-sys-border-radius) / 2);background-color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-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))}\n"], dependencies: [{ kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "pipe", type: AXFormatPipe, name: "format" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
879
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXSchedulerDayViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
880
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", 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 }, calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, endHour: { classPropertyName: "endHour", publicName: "endHour", isSignal: true, isRequired: true, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: true, transformFunction: null }, startHour: { classPropertyName: "startHour", publicName: "startHour", isSignal: true, isRequired: true, transformFunction: null }, appointments: { classPropertyName: "appointments", publicName: "appointments", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { slotClickedInternal: "slotClickedInternal", slotDblClickedInternal: "slotDblClickedInternal", slotRightClickedInternal: "slotRightClickedInternal", appointmentClickedInternal: "appointmentClickedInternal", appointmentDblClickedInternal: "appointmentDblClickedInternal", appointmentRightClickedInternal: "appointmentRightClickedInternal", onAppointmentDropInternal: "onAppointmentDropInternal" }, host: { properties: { "class.ax-state-readonly": "this.isReadonly" } }, 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 {{ '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 >\n <div class=\"ax-scheduler-day-header-appointment-container\">\n @if (allDayAppointments().length) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragElementClone]=\"true\"\n [dragDisabled]=\"!draggable() || allDayAppointments()[0].readonly || readonly()\"\n [dragData]=\"allDayAppointments()[0]\"\n (click)=\"handleAppointmentEvent($event, allDayAppointments()[0])\"\n (dblclick)=\"handleAppointmentEvent($event, allDayAppointments()[0])\"\n (contextmenu)=\"handleAppointmentEvent($event, allDayAppointments()[0])\"\n [title]=\"allDayAppointments()[0].title\"\n class=\"ax-scheduler-header-day-appointment\"\n [style.color]=\"allDayAppointments()[0].textColor\"\n [style.background-color]=\"allDayAppointments()[0].backgroundColor\"\n >\n <ax-title class=\"ax-scheduler-truncate\">{{ allDayAppointments()[0].title }}</ax-title>\n </div>\n }\n @if (allDayAppointments().length > 1) {\n <div\n #moreAppointments\n class=\"ax-scheduler-day-header-more-tag\"\n [style.color]=\"allDayAppointments()[1].textColor\"\n [style.background-color]=\"allDayAppointments()[1].backgroundColor\"\n >\n {{ 'more-items' | translate: { params: { number: allDayAppointments().length - 1 } } | async }}\n </div>\n <ax-popover [target]=\"moreAppointments\" [placement]=\"'bottom'\">\n <div class=\"ax-overlay-pane ax-scheduler-popover\" [class.ax-state-readonly]=\"readonly()\">\n @for (appointment of allDayAppointments(); track appointment.key; let first = $first) {\n @if (!first) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"appointment\"\n [dragElementClone]=\"true\"\n [dragDisabled]=\"!draggable() || appointment.readonly || readonly()\"\n (click)=\"handleAppointmentEvent($event, appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n [title]=\"appointment.title\"\n class=\"ax-scheduler-popover-appointment\"\n [style.color]=\"appointment.textColor\"\n [style.background-color]=\"appointment.backgroundColor\"\n >\n <ax-title class=\"ax-scheduler-truncate\">{{ appointment.title }}</ax-title>\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.key) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"appointment\"\n [dragElementClone]=\"true\"\n [dragDisabled]=\"!draggable() || appointment.readonly || readonly()\"\n (click)=\"handleAppointmentEvent($event, appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n [title]=\"appointment.title\"\n class=\"ax-scheduler-day-appointment\"\n [style.color]=\"appointment.textColor\"\n [style.width]=\"getAppointmentWidth(appointment.key)\"\n [style.height]=\"getAppointmentHeight(appointment.key)\"\n [style.background-color]=\"appointment.backgroundColor\"\n [style.inset-block-start]=\"getAppointmentTop(appointment.key)\"\n [style.inset-inline-start]=\"getAppointmentLeft(appointment.key)\"\n >\n <ax-title class=\"ax-scheduler-truncate\">{{ appointment.title }}</ax-title>\n <ax-subtitle>\n {{ appointment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }} -\n {{ appointment.originalEndDate | format: 'time' : { format: 'HH:mm', 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 ></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 ></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: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-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%;overflow:hidden;padding-inline:.5rem;color:rgba(var(--ax-sys-color-on-primary-surface));border-radius:calc(var(--ax-sys-border-radius) / 2);background-color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table-container .ax-scheduler-day-header-appointment-container .ax-scheduler-day-header-more-tag{cursor:pointer;text-wrap:nowrap;padding-inline:.5rem;border-radius:var(--ax-sys-border-radius);color:rgba(var(--ax-sys-color-on-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface))}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;color:rgba(var(--ax-sys-color-on-primary-surface));border-radius:calc(var(--ax-sys-border-radius) / 2);background-color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-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))}\n"], dependencies: [{ kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "pipe", type: AXFormatPipe, name: "format" }, { kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["dragData", "dragDisabled", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragCursor", "dragBoundary"], outputs: ["dragPositionChanged"] }, { kind: "directive", type: AXDropZoneDirective, selector: "[axDropZone]", inputs: ["dropZoneGroup"], outputs: ["onElementDrop", "onElementHover"], exportAs: ["axDropZone"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
642
881
  }
643
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXSchedulerDayViewComponent, decorators: [{
882
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXSchedulerDayViewComponent, decorators: [{
644
883
  type: Component,
645
- args: [{ selector: 'ax-scheduler-day-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXDecoratorGenericComponent, AsyncPipe, AXTranslatorPipe, AXPopoverComponent, AXFormatPipe], template: "<div class=\"ax-scheduler-day-header\">\n <div class=\"ax-scheduler-day-header-table\" aria-hidden=\"true\">\n <div>\n {{ 'dateTime.duration.all-day' | translate | async }}\n </div>\n </div>\n <div\n class=\"ax-scheduler-day-header-table-container\"\n (click)=\"handleAllDaySlotEvent($event)\"\n (dblclick)=\"handleAllDaySlotEvent($event)\"\n (contextmenu)=\"handleAllDaySlotEvent($event)\"\n >\n <div class=\"ax-scheduler-day-header-appointment-container\">\n @if (allDayAppointments().length) {\n <div\n (click)=\"handleAppointmentEvent($event, allDayAppointments()[0])\"\n (dblclick)=\"handleAppointmentEvent($event, allDayAppointments()[0])\"\n (contextmenu)=\"handleAppointmentEvent($event, allDayAppointments()[0])\"\n [class.ax-draggable]=\"draggable()\"\n [title]=\"allDayAppointments()[0].title\"\n class=\"ax-scheduler-header-day-appointment\"\n [style.color]=\"allDayAppointments()[0].textColor\"\n [style.background-color]=\"allDayAppointments()[0].backgroundColor\"\n >\n <ax-title class=\"ax-scheduler-truncate\">{{ allDayAppointments()[0].title }}</ax-title>\n </div>\n }\n @if (allDayAppointments().length > 1) {\n <div\n #moreAppointments\n class=\"ax-scheduler-day-header-more-tag\"\n [style.color]=\"allDayAppointments()[1].textColor\"\n [style.background-color]=\"allDayAppointments()[1].backgroundColor\"\n >\n {{ 'more-items' | translate: { params: { number: allDayAppointments().length - 1 } } | async }}\n </div>\n <ax-popover [target]=\"moreAppointments\" [placement]=\"'bottom'\">\n <div class=\"ax-overlay-pane ax-scheduler-popover\" [class.ax-state-readonly]=\"readonly()\">\n @for (appointment of allDayAppointments(); track appointment.key; let first = $first) {\n @if (!first) {\n <div\n (click)=\"handleAppointmentEvent($event, appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n [title]=\"appointment.title\"\n [class.ax-draggable]=\"draggable()\"\n class=\"ax-scheduler-popover-appointment\"\n [style.color]=\"appointment.textColor\"\n [style.background-color]=\"appointment.backgroundColor\"\n >\n <ax-title class=\"ax-scheduler-truncate\">{{ appointment.title }}</ax-title>\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.key) {\n <div\n (click)=\"handleAppointmentEvent($event, appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n [title]=\"appointment.title\"\n [class.ax-draggable]=\"draggable()\"\n class=\"ax-scheduler-day-appointment\"\n [style.color]=\"appointment.textColor\"\n [style.width]=\"getAppointmentWidth(appointment.key)\"\n [style.height]=\"getAppointmentHeight(appointment.key)\"\n [style.background-color]=\"appointment.backgroundColor\"\n [style.inset-block-start]=\"getAppointmentTop(appointment.key)\"\n [style.inset-inline-start]=\"getAppointmentLeft(appointment.key)\"\n >\n <ax-title class=\"ax-scheduler-truncate\">{{ appointment.title }}</ax-title>\n <ax-subtitle>\n {{ appointment.startDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }} -\n {{ appointment.endDate | format: 'time' : { format: 'HH:mm', 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 (click)=\"handleSingleSlotEvent($event, time, 0)\"\n (dblclick)=\"handleSingleSlotEvent($event, time, 0)\"\n (contextmenu)=\"handleSingleSlotEvent($event, time, 0)\"\n ></div>\n <div\n (click)=\"handleSingleSlotEvent($event, time, 1)\"\n (dblclick)=\"handleSingleSlotEvent($event, time, 1)\"\n (contextmenu)=\"handleSingleSlotEvent($event, time, 1)\"\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: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-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table{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: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-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%;overflow:hidden;padding-inline:.5rem;color:rgba(var(--ax-sys-color-on-primary-surface));border-radius:calc(var(--ax-sys-border-radius) / 2);background-color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table-container .ax-scheduler-day-header-appointment-container .ax-scheduler-day-header-more-tag{cursor:pointer;text-wrap:nowrap;padding-inline:.5rem;border-radius:var(--ax-sys-border-radius);color:rgba(var(--ax-sys-color-on-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface))}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:1;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;color:rgba(var(--ax-sys-color-on-primary-surface));border-radius:calc(var(--ax-sys-border-radius) / 2);background-color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-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))}\n"] }]
884
+ args: [{ selector: 'ax-scheduler-day-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
885
+ AXDecoratorGenericComponent,
886
+ AsyncPipe,
887
+ AXTranslatorPipe,
888
+ AXPopoverComponent,
889
+ AXFormatPipe,
890
+ AXDragDirective,
891
+ AXDropZoneDirective,
892
+ ], template: "<div class=\"ax-scheduler-day-header\">\n <div class=\"ax-scheduler-day-header-table\" aria-hidden=\"true\">\n <div>\n {{ '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 >\n <div class=\"ax-scheduler-day-header-appointment-container\">\n @if (allDayAppointments().length) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragElementClone]=\"true\"\n [dragDisabled]=\"!draggable() || allDayAppointments()[0].readonly || readonly()\"\n [dragData]=\"allDayAppointments()[0]\"\n (click)=\"handleAppointmentEvent($event, allDayAppointments()[0])\"\n (dblclick)=\"handleAppointmentEvent($event, allDayAppointments()[0])\"\n (contextmenu)=\"handleAppointmentEvent($event, allDayAppointments()[0])\"\n [title]=\"allDayAppointments()[0].title\"\n class=\"ax-scheduler-header-day-appointment\"\n [style.color]=\"allDayAppointments()[0].textColor\"\n [style.background-color]=\"allDayAppointments()[0].backgroundColor\"\n >\n <ax-title class=\"ax-scheduler-truncate\">{{ allDayAppointments()[0].title }}</ax-title>\n </div>\n }\n @if (allDayAppointments().length > 1) {\n <div\n #moreAppointments\n class=\"ax-scheduler-day-header-more-tag\"\n [style.color]=\"allDayAppointments()[1].textColor\"\n [style.background-color]=\"allDayAppointments()[1].backgroundColor\"\n >\n {{ 'more-items' | translate: { params: { number: allDayAppointments().length - 1 } } | async }}\n </div>\n <ax-popover [target]=\"moreAppointments\" [placement]=\"'bottom'\">\n <div class=\"ax-overlay-pane ax-scheduler-popover\" [class.ax-state-readonly]=\"readonly()\">\n @for (appointment of allDayAppointments(); track appointment.key; let first = $first) {\n @if (!first) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"appointment\"\n [dragElementClone]=\"true\"\n [dragDisabled]=\"!draggable() || appointment.readonly || readonly()\"\n (click)=\"handleAppointmentEvent($event, appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n [title]=\"appointment.title\"\n class=\"ax-scheduler-popover-appointment\"\n [style.color]=\"appointment.textColor\"\n [style.background-color]=\"appointment.backgroundColor\"\n >\n <ax-title class=\"ax-scheduler-truncate\">{{ appointment.title }}</ax-title>\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.key) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"appointment\"\n [dragElementClone]=\"true\"\n [dragDisabled]=\"!draggable() || appointment.readonly || readonly()\"\n (click)=\"handleAppointmentEvent($event, appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n [title]=\"appointment.title\"\n class=\"ax-scheduler-day-appointment\"\n [style.color]=\"appointment.textColor\"\n [style.width]=\"getAppointmentWidth(appointment.key)\"\n [style.height]=\"getAppointmentHeight(appointment.key)\"\n [style.background-color]=\"appointment.backgroundColor\"\n [style.inset-block-start]=\"getAppointmentTop(appointment.key)\"\n [style.inset-inline-start]=\"getAppointmentLeft(appointment.key)\"\n >\n <ax-title class=\"ax-scheduler-truncate\">{{ appointment.title }}</ax-title>\n <ax-subtitle>\n {{ appointment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }} -\n {{ appointment.originalEndDate | format: 'time' : { format: 'HH:mm', 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 ></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 ></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: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-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%;overflow:hidden;padding-inline:.5rem;color:rgba(var(--ax-sys-color-on-primary-surface));border-radius:calc(var(--ax-sys-border-radius) / 2);background-color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table-container .ax-scheduler-day-header-appointment-container .ax-scheduler-day-header-more-tag{cursor:pointer;text-wrap:nowrap;padding-inline:.5rem;border-radius:var(--ax-sys-border-radius);color:rgba(var(--ax-sys-color-on-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface))}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;color:rgba(var(--ax-sys-color-on-primary-surface));border-radius:calc(var(--ax-sys-border-radius) / 2);background-color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-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))}\n"] }]
646
893
  }], propDecorators: { isReadonly: [{
647
894
  type: HostBinding,
648
895
  args: ['class.ax-state-readonly']
@@ -658,9 +905,9 @@ class AXSchedulerMonthViewComponent extends MXBaseComponent {
658
905
  this.readonly = input(false);
659
906
  this.draggable = input(true);
660
907
  this.calendar = input();
661
- this.date = input.required(); // A date within the target month
908
+ this.date = input.required();
909
+ this.firstDayOfWeek = input('Saturday');
662
910
  this.appointments = input([]);
663
- this.firstDayOfWeek = input('Saturday'); // Match scheduler component default
664
911
  // --- Constants ---
665
912
  this.DAYS_IN_WEEK = 7;
666
913
  this.MAX_VISIBLE_APPOINTMENTS_PER_DAY = 2;
@@ -671,6 +918,7 @@ class AXSchedulerMonthViewComponent extends MXBaseComponent {
671
918
  this.appointmentClickedInternal = output();
672
919
  this.appointmentDblClickedInternal = output();
673
920
  this.appointmentRightClickedInternal = output();
921
+ this.onAppointmentDropInternal = output();
674
922
  // --- Event Handlers ---
675
923
  this.eventOutputMap = {
676
924
  slot: {
@@ -692,18 +940,17 @@ class AXSchedulerMonthViewComponent extends MXBaseComponent {
692
940
  });
693
941
  // Generate the list of weekday names based on the firstDayOfWeek
694
942
  this.daysArray = computed(() => {
695
- const firstDayNum = this.schedulerService.getDayOfWeekNumber(this.firstDayOfWeek());
696
943
  const dayNames = [];
697
- const currentDate = this.date();
944
+ const currentDate = this.date(); // Use a stable date for generating week headers
698
945
  const currentDayOfWeek = currentDate.dayOfWeek;
699
946
  const desiredFirstDayName = this.firstDayOfWeek();
700
947
  const desiredFirstDayNumber = this.schedulerService.getDayOfWeekNumber(desiredFirstDayName);
948
+ // Calculate days to subtract to get to the start of the week based on firstDayOfWeek
701
949
  const daysToSubtract = (currentDayOfWeek - desiredFirstDayNumber + 7) % 7;
702
- let date = currentDate.add('day', -daysToSubtract);
703
- date = date.add('day', firstDayNum - 1);
950
+ let headerStartDate = currentDate.add('day', -daysToSubtract);
704
951
  for (let i = 0; i < 7; i++) {
705
- dayNames.push(date);
706
- date = date.add('day', 1);
952
+ dayNames.push(headerStartDate);
953
+ headerStartDate = headerStartDate.add('day', 1);
707
954
  }
708
955
  return dayNames;
709
956
  });
@@ -711,20 +958,20 @@ class AXSchedulerMonthViewComponent extends MXBaseComponent {
711
958
  this.calendarDaysInfo = computed(() => {
712
959
  const monthStart = this.monthStartDate();
713
960
  if (!monthStart)
714
- return { days: [], weeksNeeded: 0 }; // Return object
961
+ return { days: [], weeksNeeded: 0 };
715
962
  const firstDayOfMonth = monthStart;
716
963
  const lastDayOfMonth = monthStart.endOf('month');
717
- const daysInMonth = lastDayOfMonth.dayOfMonth; // Get number of days in the month
718
964
  const firstDayGridNum = this.schedulerService.getDayOfWeekNumber(this.firstDayOfWeek());
719
965
  const firstDisplayedDayOfWeek = firstDayOfMonth.dayOfWeek;
720
966
  const leadingDays = (firstDisplayedDayOfWeek - firstDayGridNum + this.DAYS_IN_WEEK) % this.DAYS_IN_WEEK;
721
967
  const firstDayOfGrid = firstDayOfMonth.add('day', -leadingDays);
722
- // Calculate total cells needed (leading days + days in month)
723
- const totalCells = leadingDays + daysInMonth;
724
- // Calculate weeks needed (round up)
725
- const weeksNeeded = Math.ceil(totalCells / this.DAYS_IN_WEEK);
726
- // Ensure a minimum of 4 and maximum of 6 weeks for reasonable display, adjust if needed
727
- const actualWeeksToShow = Math.max(4, Math.min(weeksNeeded, 6));
968
+ // Determine how many total days to show to fill out the weeks
969
+ // A common approach is 6 weeks to ensure consistency, but your dynamic weeksNeeded is fine too.
970
+ // Let's stick to your dynamic `weeksNeeded` and `totalDaysToGenerate`
971
+ const daysInMonth = lastDayOfMonth.dayOfMonth;
972
+ const totalCellsMinimum = leadingDays + daysInMonth;
973
+ const weeksNeededDynamic = Math.ceil(totalCellsMinimum / this.DAYS_IN_WEEK);
974
+ const actualWeeksToShow = Math.max(4, Math.min(weeksNeededDynamic, 6)); // Clamp weeks
728
975
  const totalDaysToGenerate = actualWeeksToShow * this.DAYS_IN_WEEK;
729
976
  const days = [];
730
977
  const today = this.calendarService.create(new Date());
@@ -734,14 +981,9 @@ class AXSchedulerMonthViewComponent extends MXBaseComponent {
734
981
  date: currentDay,
735
982
  isCurrentMonth: currentDay.monthOfYear === monthStart.monthOfYear,
736
983
  isToday: currentDay.equal(today, 'day'),
737
- appointments: [],
738
- visibleAppointments: [],
739
- hiddenAppointments: [],
740
- overflowCount: 0,
741
984
  });
742
985
  currentDay = currentDay.add('day', 1);
743
986
  }
744
- // Return both days array and weeks needed
745
987
  return { days: days, weeksNeeded: actualWeeksToShow };
746
988
  });
747
989
  // --- Appointment Grouping ---
@@ -756,28 +998,47 @@ class AXSchedulerMonthViewComponent extends MXBaseComponent {
756
998
  });
757
999
  // --- Day Cell Layout Calculation ---
758
1000
  this.dayCellLayouts = computed(() => {
759
- // Get initial day info (date, isCurrentMonth, isToday)
760
1001
  const { days: initialDaysInfo } = this.calendarDaysInfo();
761
- // Get appointments grouped by YYYY-MM-DD string
762
- const groupedAppointments = this.appointmentsGroupedByDay();
1002
+ const allOriginalAppointments = this.appointments();
1003
+ if (initialDaysInfo.length === 0) {
1004
+ return []; // Return empty array if no days to process
1005
+ }
1006
+ if (!allOriginalAppointments || allOriginalAppointments.length === 0) {
1007
+ // If no appointments, map initialDaysInfo to the full structure with empty appointment arrays
1008
+ return initialDaysInfo.map((dayInfo) => ({
1009
+ ...dayInfo,
1010
+ appointments: [],
1011
+ visibleAppointments: [],
1012
+ hiddenAppointments: [],
1013
+ overflowCount: 0,
1014
+ }));
1015
+ }
763
1016
  return initialDaysInfo.map((dayInfo) => {
764
- const dateString = this.formatService.format(dayInfo.date, 'datetime', {
765
- format: 'YYYY-MM-DD',
766
- calendar: this.calendar(),
767
- });
768
- const appointmentsForDay = groupedAppointments.get(dateString) ?? [];
769
- // Sort appointments (all-day first, then by time)
770
- const sortedAppointments = orderBy(appointmentsForDay, [(e) => (e.allDay ? 0 : 1), (e) => e.startDate.date.getTime()], ['asc', 'asc']);
771
- // Determine visible and hidden appointments
772
- const visibleAppointments = sortedAppointments.slice(0, this.MAX_VISIBLE_APPOINTMENTS_PER_DAY);
773
- const hiddenAppointments = sortedAppointments.slice(this.MAX_VISIBLE_APPOINTMENTS_PER_DAY); // Get the actual hidden ones
774
- const overflowCount = hiddenAppointments.length; // Count is simply the length
1017
+ const dayAsStartOfDay = dayInfo.date.startOf('day');
1018
+ const segmentsForThisDay = [];
1019
+ for (const appt of allOriginalAppointments) {
1020
+ const segment = this.schedulerService.getClonedAppointmentSegmentOnDay(appt, dayAsStartOfDay, 0, // viewStartHour for month cell context (full day)
1021
+ 24, // viewEndHour for month cell context (full day)
1022
+ true);
1023
+ if (segment) {
1024
+ segmentsForThisDay.push(segment);
1025
+ }
1026
+ }
1027
+ const sortedSegments = orderBy(segmentsForThisDay, [
1028
+ (s) => (s.allDay ? 0 : 1), // Segments marked as allDay first
1029
+ (s) => s.originalStartDate.date.getTime(), // Then by original start time
1030
+ (s) => s.originalEndDate.date.getTime() - s.originalStartDate.date.getTime(), // Then by duration (longer first)
1031
+ (s) => s.title?.toLowerCase() ?? '', // Then by title
1032
+ ], ['asc', 'asc', 'desc', 'asc']);
1033
+ const visibleAppointments = sortedSegments.slice(0, this.MAX_VISIBLE_APPOINTMENTS_PER_DAY);
1034
+ const hiddenAppointments = sortedSegments.slice(this.MAX_VISIBLE_APPOINTMENTS_PER_DAY);
1035
+ const overflowCount = hiddenAppointments.length;
775
1036
  return {
776
- ...dayInfo, // Keep date, isCurrentMonth, isToday
777
- appointments: sortedAppointments, // Store all sorted appointments
778
- visibleAppointments: visibleAppointments,
779
- hiddenAppointments: hiddenAppointments, // **** STORE HIDDEN APPOINTMENTS ****
780
- overflowCount: overflowCount,
1037
+ ...dayInfo,
1038
+ appointments: sortedSegments,
1039
+ visibleAppointments,
1040
+ hiddenAppointments,
1041
+ overflowCount,
781
1042
  };
782
1043
  });
783
1044
  });
@@ -785,30 +1046,73 @@ class AXSchedulerMonthViewComponent extends MXBaseComponent {
785
1046
  this.gridTemplateRowsStyle = computed(() => {
786
1047
  const { weeksNeeded } = this.calendarDaysInfo();
787
1048
  if (!weeksNeeded || weeksNeeded <= 0) {
788
- return `repeat(6, minmax(5rem, 1fr))`; // Default fallback
1049
+ return `repeat(6, minmax(0, 1fr))`; // Fallback, ensures grid is at least somewhat sensible
789
1050
  }
790
- // Use the calculated number of weeks
791
- return `repeat(${weeksNeeded}, minmax(5rem, 1fr))`;
1051
+ return `repeat(${weeksNeeded}, minmax(0, 1fr))`; // Use 1fr for equal distribution
792
1052
  });
793
1053
  }
794
- handleAppointmentEvent(mouseEvent, appointment) {
795
- this.schedulerService.handleEvent({ event: mouseEvent, appointment }, this.eventOutputMap, 'appointment');
1054
+ handleAppointmentEvent(mouseEvent, appointmentSegmentOrOriginal) {
1055
+ const originalAppointment = this.getOriginalAppointmentFromItem(appointmentSegmentOrOriginal);
1056
+ this.schedulerService.handleEvent({ event: mouseEvent, appointment: originalAppointment }, this.eventOutputMap, 'appointment');
796
1057
  }
797
1058
  handleSlotEvent(mouseEvent, date) {
798
- const slotData = this.schedulerService.getSlotData(date, 'month');
1059
+ const slotData = this.schedulerService.getSlotData(date.startOf('day'), 'month'); // Ensure it's start of day
799
1060
  if (slotData) {
800
1061
  this.schedulerService.handleEvent({ event: mouseEvent, slot: slotData }, this.eventOutputMap, 'slot');
801
1062
  }
802
1063
  }
1064
+ handleDrop(e, date) {
1065
+ const slotData = this.schedulerService.getSlotData(date.startOf('day'), 'month');
1066
+ const droppedItem = e.dropped.dragData();
1067
+ const originalAppointment = this.getOriginalAppointmentFromItem(droppedItem);
1068
+ this.onAppointmentDropInternal.emit({
1069
+ event: e,
1070
+ slot: slotData,
1071
+ appointment: originalAppointment,
1072
+ });
1073
+ }
1074
+ getOriginalAppointmentFromItem(item) {
1075
+ const segment = item;
1076
+ // Check if it's a segment by looking for properties unique to segments or checking its prototype if necessary
1077
+ if (segment.originalStartDate && segment.originalEndDate) {
1078
+ // Find the original appointment from the input `appointments()`
1079
+ const originalAppointmentSource = this.appointments().find((a) => a.key === segment.key);
1080
+ if (originalAppointmentSource) {
1081
+ return originalAppointmentSource; // Return the full original object
1082
+ }
1083
+ // Fallback: reconstruct from segment if original not found (should ideally not happen if keys match)
1084
+ return {
1085
+ key: segment.key,
1086
+ title: segment.title,
1087
+ description: segment.description,
1088
+ textColor: segment.textColor,
1089
+ backgroundColor: segment.backgroundColor,
1090
+ readonly: segment.readonly,
1091
+ startDate: segment.originalStartDate,
1092
+ endDate: segment.originalEndDate,
1093
+ allDay: segment.allDay, // Use segment's allDay if original source is lost
1094
+ singleDay: segment.originalStartDate.equal(segment.originalEndDate, 'day'),
1095
+ };
1096
+ }
1097
+ return item; // It was already an original appointment or not identifiable as a segment
1098
+ }
803
1099
  get isReadonly() {
804
1100
  return this.readonly();
805
1101
  }
806
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXSchedulerMonthViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
807
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: AXSchedulerMonthViewComponent, isStandalone: true, selector: "ax-scheduler-month-view", inputs: { readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, 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 } }, outputs: { slotClickedInternal: "slotClickedInternal", slotDblClickedInternal: "slotDblClickedInternal", slotRightClickedInternal: "slotRightClickedInternal", appointmentClickedInternal: "appointmentClickedInternal", appointmentDblClickedInternal: "appointmentDblClickedInternal", appointmentRightClickedInternal: "appointmentRightClickedInternal" }, host: { properties: { "class.ax-state-readonly": "this.isReadonly" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-scheduler-month-container\">\n <!-- Weekday Header -->\n <div class=\"ax-scheduler-month-weekdays\">\n <!-- Use daysArray for header, assuming it provides correct names/order -->\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 - Add dynamic style -->\n <div class=\"ax-scheduler-month-grid\" [style.gridTemplateRows]=\"gridTemplateRowsStyle()\">\n <!-- Iterate over the final layout data -->\n @for (dayCell of dayCellLayouts(); track dayCell.date.date.getTime()) {\n <div\n (click)=\"handleSlotEvent($event, dayCell.date)\"\n (dblclick)=\"handleSlotEvent($event, dayCell.date)\"\n (contextmenu)=\"handleSlotEvent($event, dayCell.date)\"\n [class.ax-today]=\"dayCell.isToday\"\n class=\"ax-scheduler-month-day-cell\"\n [class.ax-other-month]=\"!dayCell.isCurrentMonth\"\n >\n <div class=\"ax-scheduler-month-day-header\">\n <span class=\"ax-scheduler-month-day-number\">{{ dayCell.date.dayOfMonth }}</span>\n </div>\n <div class=\"ax-scheduler-month-day-appointments\">\n <!-- Visible Appointment Chips -->\n @for (appointment of dayCell.visibleAppointments; track appointment.key) {\n <div\n (click)=\"handleAppointmentEvent($event, appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n [title]=\"appointment.title\"\n [class.ax-draggable]=\"draggable()\"\n [style.color]=\"appointment.textColor\"\n class=\"ax-scheduler-month-appointment-chip\"\n [style.background-color]=\"appointment.backgroundColor\"\n >\n <!-- Optionally show time for non-all-day appointments -->\n <!-- @if (!appointment.allDay) {\n <span class=\"ax-appointment-chip-time\">\n {{ appointment.startDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n </span>\n } -->\n <span class=\"ax-appointment-chip-title ax-scheduler-truncate\">{{ appointment.title }}</span>\n </div>\n }\n @if (dayCell.overflowCount > 0) {\n <div #moreAppointments class=\"ax-scheduler-month-overflow-badge\">\n +{{ 'more-items' | translate: { params: { number: dayCell.overflowCount } } | async }}\n </div>\n <ax-popover [target]=\"moreAppointments\" [placement]=\"'bottom'\">\n <div\n [class.ax-state-readonly]=\"readonly()\"\n class=\"ax-overlay-pane ax-scheduler-popover ax-scheduler-month-popover-appointment\"\n >\n @for (appointment of dayCell.hiddenAppointments; track appointment.key) {\n <div\n (click)=\"handleAppointmentEvent($event, appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n [title]=\"appointment.title\"\n [class.ax-draggable]=\"draggable()\"\n class=\"ax-scheduler-popover-appointment\"\n [style.color]=\"appointment.textColor\"\n [style.background-color]=\"appointment.backgroundColor\"\n >\n <span class=\"ax-appointment-chip-title ax-scheduler-truncate\">{{ appointment.title }}</span>\n </div>\n }\n </div>\n </ax-popover>\n }\n </div>\n </div>\n }\n </div>\n</div>\n", styles: ["ax-scheduler-month-view{height:100%;display:block;background-color:inherit;min-width:var(--ax-comp-scheduler-width)}ax-scheduler-month-view .ax-scheduler-month-container{height:100%;display:flex;flex-direction:column;background-color:inherit}ax-scheduler-month-view .ax-scheduler-month-weekdays{top:0;z-index:1;width:100%;display:grid;flex-shrink:0;position:sticky;padding:.5rem 0;text-align:center;grid-template-columns:repeat(7,minmax(0,1fr));background-color:var(--ax-comp-scheduler-all-day-bg, inherit);border-bottom:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-month-view .ax-scheduler-month-weekdays .ax-scheduler-month-weekday{font-weight:500;font-size:.875rem}ax-scheduler-month-view .ax-scheduler-month-grid{width:100%;flex-grow:1;display:grid;grid-auto-rows:minmax(5rem,auto);grid-template-columns:repeat(7,minmax(0,1fr));border-left:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell{padding:.25rem;overflow:hidden;position:relative;border-right:1px solid rgba(var(--ax-sys-color-border-lightest-surface));border-bottom:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-other-month{background-color:rgba(var(--ax-sys-color-border-lightest-surface),.2)}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-other-month .ax-scheduler-month-day-number{color:rgba(var(--ax-sys-color-on-surface),.5)}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-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-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-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{font-size:.875rem;display:inline-block}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments{gap:.125rem;display:flex;overflow:hidden;flex-direction:column}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments .ax-scheduler-month-appointment-chip{overflow:hidden;font-size:.75rem;white-space:nowrap;border-radius:.25rem;text-overflow:ellipsis;padding:.125rem .25rem;color:rgba(var(--ax-sys-color-on-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments .ax-scheduler-month-appointment-chip.ax-draggable{cursor:grab}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments .ax-scheduler-month-overflow-badge{cursor:pointer;text-align:left;font-size:.75rem;padding:.125rem 0;margin-top:.125rem;color:rgba(var(--ax-sys-color-primary-text))}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments .ax-scheduler-month-overflow-badge:hover{text-decoration:underline}ax-scheduler-month-view:not(.ax-state-readonly) .ax-scheduler-month-appointment-chip{cursor:pointer}ax-scheduler-month-view:not(.ax-state-readonly) .ax-scheduler-month-day-cell{cursor:pointer;transition-property:background-color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-scheduler-month-view:not(.ax-state-readonly) .ax-scheduler-month-day-cell:hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg, var(--ax-sys-color-primary-surface), .1))}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "pipe", type: AXFormatPipe, name: "format" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
1102
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXSchedulerMonthViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
1103
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AXSchedulerMonthViewComponent, isStandalone: true, selector: "ax-scheduler-month-view", inputs: { readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: true, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, appointments: { classPropertyName: "appointments", publicName: "appointments", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { slotClickedInternal: "slotClickedInternal", slotDblClickedInternal: "slotDblClickedInternal", slotRightClickedInternal: "slotRightClickedInternal", appointmentClickedInternal: "appointmentClickedInternal", appointmentDblClickedInternal: "appointmentDblClickedInternal", appointmentRightClickedInternal: "appointmentRightClickedInternal", onAppointmentDropInternal: "onAppointmentDropInternal" }, host: { properties: { "class.ax-state-readonly": "this.isReadonly" } }, 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-today]=\"dayCell.isToday\"\n class=\"ax-scheduler-month-day-cell\"\n [class.ax-other-month]=\"!dayCell.isCurrentMonth\"\n [attr.data-date]=\"dayCell.date | format: 'date' : { format: 'YYYY-MM-DD' }\"\n >\n <div class=\"ax-scheduler-month-day-header\">\n <span class=\"ax-scheduler-month-day-number\">{{ dayCell.date.dayOfMonth }}</span>\n </div>\n <div class=\"ax-scheduler-month-day-appointments\">\n <!-- Visible Appointment Segments -->\n @for (segment of dayCell.visibleAppointments; track segment.key + segment.originalStartDate) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"segment\"\n [dragElementClone]=\"true\"\n [dragDisabled]=\"!draggable() || segment.readonly || readonly()\"\n (click)=\"handleAppointmentEvent($event, segment)\"\n (dblclick)=\"handleAppointmentEvent($event, segment)\"\n (contextmenu)=\"handleAppointmentEvent($event, segment)\"\n [title]=\"\n segment.title +\n (segment.allDay\n ? ''\n : ' (' +\n (segment.originalStartDate | format: 'time' : { calendar: calendar() } | async) +\n ' - ' +\n (segment.originalEndDate | format: 'time' : { calendar: calendar() } | async) +\n ')')\n \"\n [style.color]=\"segment.textColor\"\n class=\"ax-scheduler-month-appointment-chip\"\n [class.all-day-segment]=\"segment.allDay\"\n [class.continuation-from-prev]=\"segment.isContinuationFromPreviousDay && !segment.allDay\"\n [class.continuation-to-next]=\"segment.isContinuationToNextDay && !segment.allDay\"\n [style.background-color]=\"segment.backgroundColor\"\n >\n <span class=\"ax-appointment-chip-title ax-scheduler-truncate\">{{ segment.title }}</span>\n @if (!segment.allDay) {\n <span>\n {{ segment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n -\n {{ segment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n </span>\n }\n </div>\n }\n <!-- Overflow Badge and Popover -->\n @if (dayCell.overflowCount > 0) {\n <div #moreAppointments class=\"ax-scheduler-month-overflow-badge\" (click)=\"$event.stopPropagation()\">\n <!-- Stop propagation to prevent slot click -->\n +{{ 'more-items' | translate: { params: { number: dayCell.overflowCount } } | async }}\n </div>\n <ax-popover [target]=\"moreAppointments\" placement=\"bottom-start\" trigger=\"click\">\n <div\n [class.ax-state-readonly]=\"readonly()\"\n class=\"ax-overlay-pane ax-scheduler-popover ax-scheduler-month-popover-appointment\"\n >\n @for (segment of dayCell.hiddenAppointments; track segment.key + segment.originalStartDate) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"segment\"\n [dragElementClone]=\"true\"\n [dragDisabled]=\"!draggable() || segment.readonly || readonly()\"\n (click)=\"handleAppointmentEvent($event, segment); $event.stopPropagation()\"\n (dblclick)=\"handleAppointmentEvent($event, segment); $event.stopPropagation()\"\n (contextmenu)=\"handleAppointmentEvent($event, segment); $event.stopPropagation()\"\n [title]=\"\n segment.title +\n (segment.allDay\n ? ''\n : ' (' +\n (segment.originalStartDate | format: 'time' : { calendar: calendar() } | async) +\n ' - ' +\n (segment.originalEndDate | format: 'time' : { calendar: calendar() } | async) +\n ')')\n \"\n class=\"ax-scheduler-popover-appointment\"\n [class.all-day-segment]=\"segment.allDay\"\n [style.color]=\"segment.textColor\"\n [style.background-color]=\"segment.backgroundColor\"\n >\n <span class=\"ax-appointment-chip-title ax-scheduler-truncate\">{{ segment.title }}</span>\n @if (!segment.allDay) {\n <span>\n {{\n segment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n -\n {{\n segment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n </span>\n }\n </div>\n }\n </div>\n </ax-popover>\n }\n </div>\n </div>\n }\n </div>\n</div>\n", styles: ["ax-scheduler-month-view{height:100%;display:block;background-color:inherit;min-width:var(--ax-comp-scheduler-width)}ax-scheduler-month-view .ax-scheduler-month-container{height:100%;display:flex;flex-direction:column;background-color:inherit}ax-scheduler-month-view .ax-scheduler-month-weekdays{top:0;z-index:1;width:100%;display:grid;flex-shrink:0;position:sticky;padding:.5rem 0;text-align:center;grid-template-columns:repeat(7,minmax(0,1fr));background-color:var(--ax-comp-scheduler-all-day-bg, inherit);border-bottom:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-month-view .ax-scheduler-month-weekdays .ax-scheduler-month-weekday{font-weight:500;font-size:.875rem}ax-scheduler-month-view .ax-scheduler-month-grid{width:100%;flex-grow:1;display:grid;grid-auto-rows:minmax(5rem,auto);grid-template-columns:repeat(7,minmax(0,1fr));border-left:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell{padding:.25rem;overflow:hidden;position:relative;border-right:1px solid rgba(var(--ax-sys-color-border-lightest-surface));border-bottom:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-other-month{background-color:rgba(var(--ax-sys-color-border-lightest-surface),.2)}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-other-month .ax-scheduler-month-day-number{color:rgba(var(--ax-sys-color-on-surface),.5)}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-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-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-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{font-size:.875rem;display:inline-block}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments{gap:.125rem;display:flex;overflow:hidden;flex-direction:column}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments .ax-scheduler-month-appointment-chip{overflow:hidden;font-size:.75rem;white-space:nowrap;border-radius:.25rem;text-overflow:ellipsis;padding:.125rem .25rem;color:rgba(var(--ax-sys-color-on-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments .ax-scheduler-month-overflow-badge{cursor:pointer;text-align:left;font-size:.75rem;padding:.125rem 0;margin-top:.125rem;color:rgba(var(--ax-sys-color-primary-text))}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments .ax-scheduler-month-overflow-badge:hover{text-decoration:underline}ax-scheduler-month-view:not(.ax-state-readonly) .ax-scheduler-month-appointment-chip{cursor:pointer}ax-scheduler-month-view:not(.ax-state-readonly) .ax-scheduler-month-day-cell{cursor:pointer;transition-property:background-color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-scheduler-month-view:not(.ax-state-readonly) .ax-scheduler-month-day-cell:hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg, var(--ax-sys-color-primary-surface), .1))}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "pipe", type: AXFormatPipe, name: "format" }, { kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["dragData", "dragDisabled", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragCursor", "dragBoundary"], outputs: ["dragPositionChanged"] }, { kind: "directive", type: AXDropZoneDirective, selector: "[axDropZone]", inputs: ["dropZoneGroup"], outputs: ["onElementDrop", "onElementHover"], exportAs: ["axDropZone"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
808
1104
  }
809
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXSchedulerMonthViewComponent, decorators: [{
1105
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXSchedulerMonthViewComponent, decorators: [{
810
1106
  type: Component,
811
- args: [{ selector: 'ax-scheduler-month-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AsyncPipe, AXTranslatorPipe, AXPopoverComponent, AXFormatPipe, AsyncPipe], template: "<div class=\"ax-scheduler-month-container\">\n <!-- Weekday Header -->\n <div class=\"ax-scheduler-month-weekdays\">\n <!-- Use daysArray for header, assuming it provides correct names/order -->\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 - Add dynamic style -->\n <div class=\"ax-scheduler-month-grid\" [style.gridTemplateRows]=\"gridTemplateRowsStyle()\">\n <!-- Iterate over the final layout data -->\n @for (dayCell of dayCellLayouts(); track dayCell.date.date.getTime()) {\n <div\n (click)=\"handleSlotEvent($event, dayCell.date)\"\n (dblclick)=\"handleSlotEvent($event, dayCell.date)\"\n (contextmenu)=\"handleSlotEvent($event, dayCell.date)\"\n [class.ax-today]=\"dayCell.isToday\"\n class=\"ax-scheduler-month-day-cell\"\n [class.ax-other-month]=\"!dayCell.isCurrentMonth\"\n >\n <div class=\"ax-scheduler-month-day-header\">\n <span class=\"ax-scheduler-month-day-number\">{{ dayCell.date.dayOfMonth }}</span>\n </div>\n <div class=\"ax-scheduler-month-day-appointments\">\n <!-- Visible Appointment Chips -->\n @for (appointment of dayCell.visibleAppointments; track appointment.key) {\n <div\n (click)=\"handleAppointmentEvent($event, appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n [title]=\"appointment.title\"\n [class.ax-draggable]=\"draggable()\"\n [style.color]=\"appointment.textColor\"\n class=\"ax-scheduler-month-appointment-chip\"\n [style.background-color]=\"appointment.backgroundColor\"\n >\n <!-- Optionally show time for non-all-day appointments -->\n <!-- @if (!appointment.allDay) {\n <span class=\"ax-appointment-chip-time\">\n {{ appointment.startDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n </span>\n } -->\n <span class=\"ax-appointment-chip-title ax-scheduler-truncate\">{{ appointment.title }}</span>\n </div>\n }\n @if (dayCell.overflowCount > 0) {\n <div #moreAppointments class=\"ax-scheduler-month-overflow-badge\">\n +{{ 'more-items' | translate: { params: { number: dayCell.overflowCount } } | async }}\n </div>\n <ax-popover [target]=\"moreAppointments\" [placement]=\"'bottom'\">\n <div\n [class.ax-state-readonly]=\"readonly()\"\n class=\"ax-overlay-pane ax-scheduler-popover ax-scheduler-month-popover-appointment\"\n >\n @for (appointment of dayCell.hiddenAppointments; track appointment.key) {\n <div\n (click)=\"handleAppointmentEvent($event, appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n [title]=\"appointment.title\"\n [class.ax-draggable]=\"draggable()\"\n class=\"ax-scheduler-popover-appointment\"\n [style.color]=\"appointment.textColor\"\n [style.background-color]=\"appointment.backgroundColor\"\n >\n <span class=\"ax-appointment-chip-title ax-scheduler-truncate\">{{ appointment.title }}</span>\n </div>\n }\n </div>\n </ax-popover>\n }\n </div>\n </div>\n }\n </div>\n</div>\n", styles: ["ax-scheduler-month-view{height:100%;display:block;background-color:inherit;min-width:var(--ax-comp-scheduler-width)}ax-scheduler-month-view .ax-scheduler-month-container{height:100%;display:flex;flex-direction:column;background-color:inherit}ax-scheduler-month-view .ax-scheduler-month-weekdays{top:0;z-index:1;width:100%;display:grid;flex-shrink:0;position:sticky;padding:.5rem 0;text-align:center;grid-template-columns:repeat(7,minmax(0,1fr));background-color:var(--ax-comp-scheduler-all-day-bg, inherit);border-bottom:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-month-view .ax-scheduler-month-weekdays .ax-scheduler-month-weekday{font-weight:500;font-size:.875rem}ax-scheduler-month-view .ax-scheduler-month-grid{width:100%;flex-grow:1;display:grid;grid-auto-rows:minmax(5rem,auto);grid-template-columns:repeat(7,minmax(0,1fr));border-left:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell{padding:.25rem;overflow:hidden;position:relative;border-right:1px solid rgba(var(--ax-sys-color-border-lightest-surface));border-bottom:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-other-month{background-color:rgba(var(--ax-sys-color-border-lightest-surface),.2)}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-other-month .ax-scheduler-month-day-number{color:rgba(var(--ax-sys-color-on-surface),.5)}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-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-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-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{font-size:.875rem;display:inline-block}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments{gap:.125rem;display:flex;overflow:hidden;flex-direction:column}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments .ax-scheduler-month-appointment-chip{overflow:hidden;font-size:.75rem;white-space:nowrap;border-radius:.25rem;text-overflow:ellipsis;padding:.125rem .25rem;color:rgba(var(--ax-sys-color-on-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments .ax-scheduler-month-appointment-chip.ax-draggable{cursor:grab}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments .ax-scheduler-month-overflow-badge{cursor:pointer;text-align:left;font-size:.75rem;padding:.125rem 0;margin-top:.125rem;color:rgba(var(--ax-sys-color-primary-text))}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments .ax-scheduler-month-overflow-badge:hover{text-decoration:underline}ax-scheduler-month-view:not(.ax-state-readonly) .ax-scheduler-month-appointment-chip{cursor:pointer}ax-scheduler-month-view:not(.ax-state-readonly) .ax-scheduler-month-day-cell{cursor:pointer;transition-property:background-color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-scheduler-month-view:not(.ax-state-readonly) .ax-scheduler-month-day-cell:hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg, var(--ax-sys-color-primary-surface), .1))}\n"] }]
1107
+ args: [{ selector: 'ax-scheduler-month-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
1108
+ AsyncPipe,
1109
+ AXTranslatorPipe,
1110
+ AXPopoverComponent,
1111
+ AXFormatPipe,
1112
+ AsyncPipe,
1113
+ AXDragDirective,
1114
+ AXDropZoneDirective,
1115
+ ], 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-today]=\"dayCell.isToday\"\n class=\"ax-scheduler-month-day-cell\"\n [class.ax-other-month]=\"!dayCell.isCurrentMonth\"\n [attr.data-date]=\"dayCell.date | format: 'date' : { format: 'YYYY-MM-DD' }\"\n >\n <div class=\"ax-scheduler-month-day-header\">\n <span class=\"ax-scheduler-month-day-number\">{{ dayCell.date.dayOfMonth }}</span>\n </div>\n <div class=\"ax-scheduler-month-day-appointments\">\n <!-- Visible Appointment Segments -->\n @for (segment of dayCell.visibleAppointments; track segment.key + segment.originalStartDate) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"segment\"\n [dragElementClone]=\"true\"\n [dragDisabled]=\"!draggable() || segment.readonly || readonly()\"\n (click)=\"handleAppointmentEvent($event, segment)\"\n (dblclick)=\"handleAppointmentEvent($event, segment)\"\n (contextmenu)=\"handleAppointmentEvent($event, segment)\"\n [title]=\"\n segment.title +\n (segment.allDay\n ? ''\n : ' (' +\n (segment.originalStartDate | format: 'time' : { calendar: calendar() } | async) +\n ' - ' +\n (segment.originalEndDate | format: 'time' : { calendar: calendar() } | async) +\n ')')\n \"\n [style.color]=\"segment.textColor\"\n class=\"ax-scheduler-month-appointment-chip\"\n [class.all-day-segment]=\"segment.allDay\"\n [class.continuation-from-prev]=\"segment.isContinuationFromPreviousDay && !segment.allDay\"\n [class.continuation-to-next]=\"segment.isContinuationToNextDay && !segment.allDay\"\n [style.background-color]=\"segment.backgroundColor\"\n >\n <span class=\"ax-appointment-chip-title ax-scheduler-truncate\">{{ segment.title }}</span>\n @if (!segment.allDay) {\n <span>\n {{ segment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n -\n {{ segment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n </span>\n }\n </div>\n }\n <!-- Overflow Badge and Popover -->\n @if (dayCell.overflowCount > 0) {\n <div #moreAppointments class=\"ax-scheduler-month-overflow-badge\" (click)=\"$event.stopPropagation()\">\n <!-- Stop propagation to prevent slot click -->\n +{{ 'more-items' | translate: { params: { number: dayCell.overflowCount } } | async }}\n </div>\n <ax-popover [target]=\"moreAppointments\" placement=\"bottom-start\" trigger=\"click\">\n <div\n [class.ax-state-readonly]=\"readonly()\"\n class=\"ax-overlay-pane ax-scheduler-popover ax-scheduler-month-popover-appointment\"\n >\n @for (segment of dayCell.hiddenAppointments; track segment.key + segment.originalStartDate) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"segment\"\n [dragElementClone]=\"true\"\n [dragDisabled]=\"!draggable() || segment.readonly || readonly()\"\n (click)=\"handleAppointmentEvent($event, segment); $event.stopPropagation()\"\n (dblclick)=\"handleAppointmentEvent($event, segment); $event.stopPropagation()\"\n (contextmenu)=\"handleAppointmentEvent($event, segment); $event.stopPropagation()\"\n [title]=\"\n segment.title +\n (segment.allDay\n ? ''\n : ' (' +\n (segment.originalStartDate | format: 'time' : { calendar: calendar() } | async) +\n ' - ' +\n (segment.originalEndDate | format: 'time' : { calendar: calendar() } | async) +\n ')')\n \"\n class=\"ax-scheduler-popover-appointment\"\n [class.all-day-segment]=\"segment.allDay\"\n [style.color]=\"segment.textColor\"\n [style.background-color]=\"segment.backgroundColor\"\n >\n <span class=\"ax-appointment-chip-title ax-scheduler-truncate\">{{ segment.title }}</span>\n @if (!segment.allDay) {\n <span>\n {{\n segment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n -\n {{\n segment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n </span>\n }\n </div>\n }\n </div>\n </ax-popover>\n }\n </div>\n </div>\n }\n </div>\n</div>\n", styles: ["ax-scheduler-month-view{height:100%;display:block;background-color:inherit;min-width:var(--ax-comp-scheduler-width)}ax-scheduler-month-view .ax-scheduler-month-container{height:100%;display:flex;flex-direction:column;background-color:inherit}ax-scheduler-month-view .ax-scheduler-month-weekdays{top:0;z-index:1;width:100%;display:grid;flex-shrink:0;position:sticky;padding:.5rem 0;text-align:center;grid-template-columns:repeat(7,minmax(0,1fr));background-color:var(--ax-comp-scheduler-all-day-bg, inherit);border-bottom:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-month-view .ax-scheduler-month-weekdays .ax-scheduler-month-weekday{font-weight:500;font-size:.875rem}ax-scheduler-month-view .ax-scheduler-month-grid{width:100%;flex-grow:1;display:grid;grid-auto-rows:minmax(5rem,auto);grid-template-columns:repeat(7,minmax(0,1fr));border-left:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell{padding:.25rem;overflow:hidden;position:relative;border-right:1px solid rgba(var(--ax-sys-color-border-lightest-surface));border-bottom:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-other-month{background-color:rgba(var(--ax-sys-color-border-lightest-surface),.2)}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-other-month .ax-scheduler-month-day-number{color:rgba(var(--ax-sys-color-on-surface),.5)}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-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-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-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{font-size:.875rem;display:inline-block}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments{gap:.125rem;display:flex;overflow:hidden;flex-direction:column}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments .ax-scheduler-month-appointment-chip{overflow:hidden;font-size:.75rem;white-space:nowrap;border-radius:.25rem;text-overflow:ellipsis;padding:.125rem .25rem;color:rgba(var(--ax-sys-color-on-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments .ax-scheduler-month-overflow-badge{cursor:pointer;text-align:left;font-size:.75rem;padding:.125rem 0;margin-top:.125rem;color:rgba(var(--ax-sys-color-primary-text))}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments .ax-scheduler-month-overflow-badge:hover{text-decoration:underline}ax-scheduler-month-view:not(.ax-state-readonly) .ax-scheduler-month-appointment-chip{cursor:pointer}ax-scheduler-month-view:not(.ax-state-readonly) .ax-scheduler-month-day-cell{cursor:pointer;transition-property:background-color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-scheduler-month-view:not(.ax-state-readonly) .ax-scheduler-month-day-cell:hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg, var(--ax-sys-color-primary-surface), .1))}\n"] }]
812
1116
  }], propDecorators: { isReadonly: [{
813
1117
  type: HostBinding,
814
1118
  args: ['class.ax-state-readonly']
@@ -826,7 +1130,30 @@ class AXSchedulerTimelineDayViewComponent extends MXBaseComponent {
826
1130
  this.date = input.required();
827
1131
  this.startHour = input.required();
828
1132
  this.appointments = input([]);
829
- this.singleDayAppointments = computed(() => this.appointments()?.filter((e) => e && e.singleDay && !e.allDay) ?? []);
1133
+ /**
1134
+ * Processes original appointments to get segments relevant to this specific day and its viewable hours.
1135
+ * Filters out original all-day events.
1136
+ */
1137
+ this.processedSegmentsForLayout = computed(() => {
1138
+ const viewDate = this.date();
1139
+ const allOriginalAppointments = this.appointments();
1140
+ const viewConfigStartHour = this.startHour();
1141
+ const viewConfigEndHour = this.endHour();
1142
+ if (!viewDate || !allOriginalAppointments || allOriginalAppointments.length === 0) {
1143
+ return [];
1144
+ }
1145
+ const segmentsOnThisDay = [];
1146
+ for (const appt of allOriginalAppointments) {
1147
+ if (appt.allDay) {
1148
+ continue;
1149
+ }
1150
+ const segment = this.schedulerService.getClonedAppointmentSegmentOnDay(appt, viewDate, viewConfigStartHour, viewConfigEndHour, false);
1151
+ if (segment) {
1152
+ segmentsOnThisDay.push(segment);
1153
+ }
1154
+ }
1155
+ return segmentsOnThisDay;
1156
+ });
830
1157
  // Internal outputs to be caught by parent AXSchedulerComponent
831
1158
  this.slotClickedInternal = output();
832
1159
  this.slotDblClickedInternal = output();
@@ -834,6 +1161,7 @@ class AXSchedulerTimelineDayViewComponent extends MXBaseComponent {
834
1161
  this.appointmentClickedInternal = output();
835
1162
  this.appointmentDblClickedInternal = output();
836
1163
  this.appointmentRightClickedInternal = output();
1164
+ this.onAppointmentDropInternal = output();
837
1165
  // --- Event Handlers ---
838
1166
  this.eventOutputMap = {
839
1167
  slot: {
@@ -851,9 +1179,9 @@ class AXSchedulerTimelineDayViewComponent extends MXBaseComponent {
851
1179
  let time = this.date();
852
1180
  if (!time)
853
1181
  return [];
854
- time = time.set('hour', this.startHour()).set('minute', 0).set('second', 0);
1182
+ time = time.set('hour', this.startHour()).startOf('hour');
855
1183
  const hours = [time];
856
- while (time.hour < this.endHour()) {
1184
+ while (time.hour < this.endHour() - 1) {
857
1185
  time = time.add('hour', 1);
858
1186
  hours.push(time);
859
1187
  }
@@ -862,86 +1190,106 @@ class AXSchedulerTimelineDayViewComponent extends MXBaseComponent {
862
1190
  // --- Appointment Layout Calculation ---
863
1191
  this.appointmentLayouts = computed(() => {
864
1192
  const finalLayouts = [];
865
- const startH = this.startHour();
866
- const endH = this.endHour();
867
- const appointmentsToLayout = this.singleDayAppointments(); // Use filtered appointments
868
- if (typeof startH !== 'number' || typeof endH !== 'number' || appointmentsToLayout.length === 0) {
1193
+ const viewConfigStartHour = this.startHour();
1194
+ const viewConfigEndHour = this.endHour();
1195
+ const appointmentsToLayout = this.processedSegmentsForLayout(); // USE SEGMENTS
1196
+ if (typeof viewConfigStartHour !== 'number' ||
1197
+ typeof viewConfigEndHour !== 'number' ||
1198
+ appointmentsToLayout.length === 0) {
869
1199
  return finalLayouts;
870
1200
  }
871
- // Sort by start time first for processing order
872
- const sortedAppointments = orderBy(appointmentsToLayout, [(a) => a.startDate.date.getTime(), (a) => a.endDate.date.getTime()], ['asc', 'desc']);
873
- const rowEndTimes = []; // Stores end minute (relative to view start) of last appt in each row
874
- for (const appointment of sortedAppointments) {
875
- // Calculate horizontal percentage position and width using the service
876
- const horiz = this.schedulerService.calculateTimelineLayout(appointment, startH, endH);
877
- // Skip if appointment is outside the viewable hour range horizontally
878
- if (!horiz)
879
- continue;
880
- // Calculate start/end minutes relative to the start of the view hours for overlap check
881
- const apptStartMinutes = Math.max(0, appointment.startDate.hour * 60 + appointment.startDate.minute - startH * 60);
882
- // Ensure duration is calculated correctly based on potentially clamped start/end within view hours
883
- const effectiveStartMinutes = Math.max(startH * 60, appointment.startDate.hour * 60 + appointment.startDate.minute);
884
- const effectiveEndMinutes = Math.min(endH * 60, appointment.endDate.hour * 60 + appointment.endDate.minute);
885
- const durationMinutes = Math.max(0, effectiveEndMinutes - effectiveStartMinutes);
886
- const apptEndMinutes = apptStartMinutes + durationMinutes; // End minute relative to startHour
887
- // Find the first available vertical row (rowIndex) for stacking
1201
+ const sortedAppointments = orderBy(appointmentsToLayout, [(seg) => seg.startDate.date.getTime(), (seg) => seg.originalEndDate.date.getTime()], ['asc', 'desc']);
1202
+ const rowEndTimes = [];
1203
+ for (const segment of sortedAppointments) {
1204
+ const horizLayout = this.schedulerService.calculateTimelineLayout(segment, // Pass the segment
1205
+ viewConfigStartHour, viewConfigEndHour);
1206
+ if (!horizLayout)
1207
+ continue; // Segment is outside the viewable hour range or invalid
1208
+ // For overlap check, use the segment's start and end times
1209
+ const segmentStartTime = segment.startDate;
1210
+ const segmentEndTime = segment.endDate;
888
1211
  let assignedRowIndex = -1;
889
1212
  for (let i = 0; i < rowEndTimes.length; i++) {
890
- // If this appointment starts AFTER OR AT the time the row becomes free
891
- // Using >= allows appointments starting exactly when another ends to potentially share a row if desired.
892
- // Using > would force a new row if they touch exactly. Let's use >= for packing.
893
- if (apptStartMinutes >= rowEndTimes[i]) {
1213
+ // If this segment starts AFTER OR AT the time the row becomes free
1214
+ if (segmentStartTime.compare(rowEndTimes[i], 'minute') >= 0) {
894
1215
  assignedRowIndex = i;
895
1216
  break;
896
1217
  }
897
1218
  }
898
- // If no available row found, add a new row
899
1219
  if (assignedRowIndex === -1) {
900
1220
  assignedRowIndex = rowEndTimes.length;
901
- rowEndTimes.push(apptEndMinutes); // Add end time for the new row
1221
+ rowEndTimes.push(segmentEndTime); // Add segment's end time for the new row
902
1222
  }
903
1223
  else {
904
- // Update the end time for the assigned row ONLY if this one ends later
905
- rowEndTimes[assignedRowIndex] = Math.max(rowEndTimes[assignedRowIndex], apptEndMinutes);
1224
+ // Update the end time for the assigned row with this segment's end time
1225
+ rowEndTimes[assignedRowIndex] = segmentEndTime;
906
1226
  }
907
- // Height is directly the CSS variable
908
- const layoutHeight = 'var(--ax-comp-scheduler-timeline-view-blocks-height)';
909
- // Calculate layout styles
910
- const layoutLeft = horiz.left;
911
- // Apply the 1px gap by subtracting it from the width
912
- const layoutWidth = `calc(${horiz.width} - ${this.GAP_PX}px)`;
913
- // Calculate top using calc() with the CSS variable and the VERTICAL gap
914
- const layoutTop = `calc(${assignedRowIndex} * (${layoutHeight} + ${this.GAP_PX}px))`;
1227
+ const layoutHeight = 'var(--ax-comp-scheduler-timeline-view-blocks-height)'; // CSS variable for height
1228
+ const layoutLeft = horizLayout.left;
1229
+ const layoutWidth = `calc(${horizLayout.width} - ${this.GAP_PX}px)`; // Apply horizontal gap if items are side-by-side within a row (not typical for this stacking)
1230
+ const layoutTop = `calc(${assignedRowIndex} * (${layoutHeight} + ${this.GAP_PX}px))`; // Vertical stacking with gap
915
1231
  finalLayouts.push({
916
- appointment: appointment, // Store original appointment data
1232
+ appointment: segment, // Store the segment data
917
1233
  layoutLeft,
918
1234
  layoutWidth,
919
1235
  layoutTop,
920
1236
  layoutHeight,
921
1237
  });
922
1238
  }
923
- // No second pass implemented here for simplicity, greedy approach used.
924
- // If vertical packing needs further optimization, a second pass could be added.
925
1239
  return finalLayouts;
926
1240
  });
927
1241
  }
928
- handleAppointmentEvent(mouseEvent, appointment) {
929
- this.schedulerService.handleEvent({ event: mouseEvent, appointment }, this.eventOutputMap, 'appointment');
1242
+ handleAppointmentEvent(mouseEvent, appointmentItem) {
1243
+ const originalAppointment = this.getOriginalAppointmentFromItem(appointmentItem);
1244
+ this.schedulerService.handleEvent({ event: mouseEvent, appointment: originalAppointment }, this.eventOutputMap, 'appointment');
930
1245
  }
931
1246
  handleSlotEvent(mouseEvent, startDate) {
932
1247
  const slotData = this.schedulerService.getSlotData(startDate, 'timelineDay');
933
1248
  if (slotData)
934
1249
  this.schedulerService.handleEvent({ event: mouseEvent, slot: slotData }, this.eventOutputMap, 'slot');
935
1250
  }
1251
+ handleDrop(e, startDate) {
1252
+ const slotData = this.schedulerService.getSlotData(startDate, 'timelineDay');
1253
+ const droppedItem = e.dropped.dragData();
1254
+ const originalAppointment = this.getOriginalAppointmentFromItem(droppedItem);
1255
+ this.onAppointmentDropInternal.emit({
1256
+ event: e,
1257
+ slot: slotData,
1258
+ appointment: originalAppointment,
1259
+ });
1260
+ }
1261
+ getOriginalAppointmentFromItem(item) {
1262
+ const segment = item;
1263
+ if (segment.originalStartDate && segment.originalEndDate) {
1264
+ const originalAppointmentSource = this.appointments().find((a) => a.key === segment.key);
1265
+ if (originalAppointmentSource) {
1266
+ return originalAppointmentSource;
1267
+ }
1268
+ // Fallback (should ideally not be needed)
1269
+ return {
1270
+ key: segment.key,
1271
+ title: segment.title,
1272
+ description: segment.description,
1273
+ textColor: segment.textColor,
1274
+ backgroundColor: segment.backgroundColor,
1275
+ readonly: segment.readonly,
1276
+ startDate: segment.originalStartDate,
1277
+ endDate: segment.originalEndDate,
1278
+ allDay: segment.allDay, // This allDay is from original appt via spread
1279
+ singleDay: segment.originalStartDate.equal(segment.originalEndDate, 'day'),
1280
+ };
1281
+ }
1282
+ return item;
1283
+ }
936
1284
  get isReadonly() {
937
1285
  return this.readonly();
938
1286
  }
939
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXSchedulerTimelineDayViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
940
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: AXSchedulerTimelineDayViewComponent, isStandalone: true, selector: "ax-scheduler-timeline-day-view", inputs: { readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, endHour: { classPropertyName: "endHour", publicName: "endHour", isSignal: true, isRequired: true, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: true, transformFunction: null }, startHour: { classPropertyName: "startHour", publicName: "startHour", isSignal: true, isRequired: true, transformFunction: null }, appointments: { classPropertyName: "appointments", publicName: "appointments", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { slotClickedInternal: "slotClickedInternal", slotDblClickedInternal: "slotDblClickedInternal", slotRightClickedInternal: "slotRightClickedInternal", appointmentClickedInternal: "appointmentClickedInternal", appointmentDblClickedInternal: "appointmentDblClickedInternal", appointmentRightClickedInternal: "appointmentRightClickedInternal" }, host: { properties: { "class.ax-state-readonly": "this.isReadonly" } }, 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.key) {\n <div\n (click)=\"handleAppointmentEvent($event, layout.appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, layout.appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, layout.appointment)\"\n [title]=\"layout.appointment.title\"\n [class.ax-draggable]=\"draggable()\"\n [style.width]=\"layout.layoutWidth\"\n [style.height]=\"layout.layoutHeight\"\n class=\"ax-scheduler-timeline-appointment\"\n [style.insetBlockStart]=\"layout.layoutTop\"\n [style.color]=\"layout.appointment.textColor\"\n [style.insetInlineStart]=\"layout.layoutLeft\"\n [style.background-color]=\"layout.appointment.backgroundColor\"\n >\n <ax-title class=\"ax-scheduler-truncate\">{{ layout.appointment.title }}</ax-title>\n <ax-subtitle>\n {{ layout.appointment.startDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }} -\n {{ layout.appointment.endDate | 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 class=\"ax-scheduler-timeline-slot-cell\"\n (click)=\"handleSlotEvent($event, time)\"\n (dblclick)=\"handleSlotEvent($event, time)\"\n (contextmenu)=\"handleSlotEvent($event, time)\"\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;color:rgba(var(--ax-sys-color-on-primary-surface));border-radius:calc(var(--ax-sys-border-radius) / 2);background-color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-timeline-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))}\n"], dependencies: [{ kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "pipe", type: AXFormatPipe, name: "format" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
1287
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXSchedulerTimelineDayViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
1288
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", 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 }, calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, endHour: { classPropertyName: "endHour", publicName: "endHour", isSignal: true, isRequired: true, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: true, transformFunction: null }, startHour: { classPropertyName: "startHour", publicName: "startHour", isSignal: true, isRequired: true, transformFunction: null }, appointments: { classPropertyName: "appointments", publicName: "appointments", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { slotClickedInternal: "slotClickedInternal", slotDblClickedInternal: "slotDblClickedInternal", slotRightClickedInternal: "slotRightClickedInternal", appointmentClickedInternal: "appointmentClickedInternal", appointmentDblClickedInternal: "appointmentDblClickedInternal", appointmentRightClickedInternal: "appointmentRightClickedInternal", onAppointmentDropInternal: "onAppointmentDropInternal" }, host: { properties: { "class.ax-state-readonly": "this.isReadonly" } }, 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.key) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragElementClone]=\"true\"\n [dragDisabled]=\"!draggable() || layout.appointment.readonly || readonly()\"\n [dragData]=\"layout.appointment\"\n (click)=\"handleAppointmentEvent($event, layout.appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, layout.appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, layout.appointment)\"\n [title]=\"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.color]=\"layout.appointment.textColor\"\n [style.insetInlineStart]=\"layout.layoutLeft\"\n [style.background-color]=\"layout.appointment.backgroundColor\"\n >\n <ax-title class=\"ax-scheduler-truncate\">{{ layout.appointment.title }}</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 ></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;color:rgba(var(--ax-sys-color-on-primary-surface));border-radius:calc(var(--ax-sys-border-radius) / 2);background-color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-timeline-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))}\n"], dependencies: [{ kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "pipe", type: AXFormatPipe, name: "format" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["dragData", "dragDisabled", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragCursor", "dragBoundary"], outputs: ["dragPositionChanged"] }, { kind: "directive", type: AXDropZoneDirective, selector: "[axDropZone]", inputs: ["dropZoneGroup"], outputs: ["onElementDrop", "onElementHover"], exportAs: ["axDropZone"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
941
1289
  }
942
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXSchedulerTimelineDayViewComponent, decorators: [{
1290
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXSchedulerTimelineDayViewComponent, decorators: [{
943
1291
  type: Component,
944
- args: [{ selector: 'ax-scheduler-timeline-day-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXDecoratorGenericComponent, AXFormatPipe, AsyncPipe], 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.key) {\n <div\n (click)=\"handleAppointmentEvent($event, layout.appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, layout.appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, layout.appointment)\"\n [title]=\"layout.appointment.title\"\n [class.ax-draggable]=\"draggable()\"\n [style.width]=\"layout.layoutWidth\"\n [style.height]=\"layout.layoutHeight\"\n class=\"ax-scheduler-timeline-appointment\"\n [style.insetBlockStart]=\"layout.layoutTop\"\n [style.color]=\"layout.appointment.textColor\"\n [style.insetInlineStart]=\"layout.layoutLeft\"\n [style.background-color]=\"layout.appointment.backgroundColor\"\n >\n <ax-title class=\"ax-scheduler-truncate\">{{ layout.appointment.title }}</ax-title>\n <ax-subtitle>\n {{ layout.appointment.startDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }} -\n {{ layout.appointment.endDate | 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 class=\"ax-scheduler-timeline-slot-cell\"\n (click)=\"handleSlotEvent($event, time)\"\n (dblclick)=\"handleSlotEvent($event, time)\"\n (contextmenu)=\"handleSlotEvent($event, time)\"\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;color:rgba(var(--ax-sys-color-on-primary-surface));border-radius:calc(var(--ax-sys-border-radius) / 2);background-color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-timeline-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))}\n"] }]
1292
+ args: [{ selector: 'ax-scheduler-timeline-day-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXDecoratorGenericComponent, AXFormatPipe, AsyncPipe, AXDragDirective, AXDropZoneDirective], 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.key) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragElementClone]=\"true\"\n [dragDisabled]=\"!draggable() || layout.appointment.readonly || readonly()\"\n [dragData]=\"layout.appointment\"\n (click)=\"handleAppointmentEvent($event, layout.appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, layout.appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, layout.appointment)\"\n [title]=\"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.color]=\"layout.appointment.textColor\"\n [style.insetInlineStart]=\"layout.layoutLeft\"\n [style.background-color]=\"layout.appointment.backgroundColor\"\n >\n <ax-title class=\"ax-scheduler-truncate\">{{ layout.appointment.title }}</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 ></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;color:rgba(var(--ax-sys-color-on-primary-surface));border-radius:calc(var(--ax-sys-border-radius) / 2);background-color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-timeline-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))}\n"] }]
945
1293
  }], propDecorators: { isReadonly: [{
946
1294
  type: HostBinding,
947
1295
  args: ['class.ax-state-readonly']
@@ -956,34 +1304,55 @@ class AXSchedulerTimelineMonthViewComponent extends MXBaseComponent {
956
1304
  this.readonly = input(false);
957
1305
  this.draggable = input(true);
958
1306
  this.calendar = input();
959
- this.endHour = input.required();
960
1307
  this.date = input.required();
961
- this.startHour = input.required();
962
1308
  this.appointments = input([]);
963
- this.singleDayAppointments = computed(() => this.appointments()?.filter((e) => e && e.singleDay && !e.allDay) ?? []);
964
- this.monthAppointments = computed(() => {
965
- const mapped = this.appointments();
966
- const current = this.date().startOf('month');
967
- const daysCount = current.endOf('month').dayOfMonth;
968
- return Array.from({ length: daysCount }, (_, i) => {
969
- const dayStart = current.add('day', i).add('hour', this.startHour());
970
- const dayEnd = dayStart.add('day', 1).add('hour', this.endHour() - this.startHour());
971
- const appointmentsForDay = mapped.filter((appt) => !appt.allDay &&
972
- appt.singleDay &&
973
- appt.endDate.compare(dayStart, 'day') >= 0 &&
974
- appt.startDate.compare(dayEnd, 'day') < 0 &&
975
- appt.endDate.compare(dayStart, 'hour') >= 0 &&
976
- appt.startDate.compare(dayEnd, 'hour') < 0);
977
- const visibleAppointments = appointmentsForDay.slice(0, this.MAX_VISIBLE_APPOINTMENTS_PER_DAY);
978
- const hiddenAppointments = appointmentsForDay.slice(this.MAX_VISIBLE_APPOINTMENTS_PER_DAY, appointmentsForDay.length);
979
- return {
980
- date: dayStart,
981
- visibleAppointments,
982
- hiddenAppointments,
1309
+ this.processedDayData = computed(() => {
1310
+ const allOriginalAppointments = this.appointments();
1311
+ const monthStartDate = this.date().startOf('month');
1312
+ const daysInMonth = monthStartDate.endOf('month').dayOfMonth;
1313
+ if (!allOriginalAppointments) {
1314
+ return Array.from({ length: daysInMonth }, (_, i) => {
1315
+ const dayDate = monthStartDate.add('day', i);
1316
+ return {
1317
+ date: dayDate,
1318
+ visibleAppointments: [],
1319
+ hiddenAppointments: [],
1320
+ moreCount: 0,
1321
+ };
1322
+ });
1323
+ }
1324
+ const result = [];
1325
+ for (let i = 0; i < daysInMonth; i++) {
1326
+ const currentDayDate = monthStartDate.add('day', i).startOf('day'); // Ensure it's start of day
1327
+ const segmentsForThisDay = [];
1328
+ for (const appt of allOriginalAppointments) {
1329
+ // For Timeline Month View, each day is a row. We want segments for the full 24h of that day.
1330
+ // The view's startHour/endHour are NOT used to clip segments here,
1331
+ // as it's not a horizontal time scale *within* the day row.
1332
+ const segment = this.schedulerService.getClonedAppointmentSegmentOnDay(appt, currentDayDate, 0, // Treat as full day: 00:00
1333
+ 24, // Treat as full day: up to 24:00 (exclusive)
1334
+ true);
1335
+ if (segment) {
1336
+ segmentsForThisDay.push(segment);
1337
+ }
1338
+ }
1339
+ // Sort segments: all-day first, then by segment start time (which is clipped to the day)
1340
+ const sortedSegments = orderBy(segmentsForThisDay, [
1341
+ (s) => (s.allDay ? 0 : 1), // Segments marked as allDay first
1342
+ (s) => s.startDate.date.getTime(), // Segment's start time on this day
1343
+ (s) => s.endDate.date.getTime() - s.startDate.date.getTime(), // Segment's duration on this day
1344
+ (s) => s.title?.toLowerCase() ?? '',
1345
+ ], ['asc', 'asc', 'desc', 'asc']);
1346
+ const visibleAppointments = sortedSegments.slice(0, this.MAX_VISIBLE_APPOINTMENTS_PER_DAY);
1347
+ const hiddenAppointments = sortedSegments.slice(this.MAX_VISIBLE_APPOINTMENTS_PER_DAY);
1348
+ result.push({
1349
+ date: currentDayDate,
1350
+ visibleAppointments: visibleAppointments,
1351
+ hiddenAppointments: hiddenAppointments,
983
1352
  moreCount: hiddenAppointments.length,
984
- };
985
- });
986
- return [];
1353
+ });
1354
+ }
1355
+ return result;
987
1356
  });
988
1357
  // Internal outputs to be caught by parent AXSchedulerComponent
989
1358
  this.slotClickedInternal = output();
@@ -992,6 +1361,7 @@ class AXSchedulerTimelineMonthViewComponent extends MXBaseComponent {
992
1361
  this.appointmentClickedInternal = output();
993
1362
  this.appointmentDblClickedInternal = output();
994
1363
  this.appointmentRightClickedInternal = output();
1364
+ this.onAppointmentDropInternal = output();
995
1365
  // --- Event Handlers ---
996
1366
  this.eventOutputMap = {
997
1367
  slot: {
@@ -1006,14 +1376,49 @@ class AXSchedulerTimelineMonthViewComponent extends MXBaseComponent {
1006
1376
  },
1007
1377
  };
1008
1378
  }
1009
- handleAppointmentEvent(mouseEvent, appointment) {
1010
- this.schedulerService.handleEvent({ event: mouseEvent, appointment }, this.eventOutputMap, 'appointment');
1379
+ // --- Event Handlers (similar to other views, using segments) ---
1380
+ getOriginalAppointmentFromItem(item) {
1381
+ const segment = item;
1382
+ if (segment.originalStartDate && segment.originalEndDate) {
1383
+ const originalAppointmentSource = this.appointments().find((a) => a.key === segment.key);
1384
+ if (originalAppointmentSource)
1385
+ return originalAppointmentSource;
1386
+ // Fallback
1387
+ return {
1388
+ key: segment.key,
1389
+ title: segment.title,
1390
+ description: segment.description,
1391
+ textColor: segment.textColor,
1392
+ backgroundColor: segment.backgroundColor,
1393
+ readonly: segment.readonly,
1394
+ startDate: segment.originalStartDate,
1395
+ endDate: segment.originalEndDate,
1396
+ allDay: segment.allDay, // This allDay is from original via spread if source lost
1397
+ singleDay: segment.originalStartDate.equal(segment.originalEndDate, 'day'),
1398
+ };
1399
+ }
1400
+ return item;
1401
+ }
1402
+ handleAppointmentEvent(mouseEvent, appointmentItem) {
1403
+ const originalAppointment = this.getOriginalAppointmentFromItem(appointmentItem);
1404
+ this.schedulerService.handleEvent({ event: mouseEvent, appointment: originalAppointment }, this.eventOutputMap, 'appointment');
1011
1405
  }
1012
1406
  handleSlotEvent(mouseEvent, date) {
1013
- const slotData = this.schedulerService.getSlotData(date, 'month');
1014
- if (slotData) {
1407
+ // date is the specific day
1408
+ const slotData = this.schedulerService.getSlotData(date.startOf('day'), 'timelineMonth');
1409
+ if (slotData)
1015
1410
  this.schedulerService.handleEvent({ event: mouseEvent, slot: slotData }, this.eventOutputMap, 'slot');
1016
- }
1411
+ }
1412
+ handleDrop(e, date) {
1413
+ // date is the specific day
1414
+ const slotData = this.schedulerService.getSlotData(date.startOf('day'), 'timelineMonth');
1415
+ const droppedItem = e.dropped.dragData();
1416
+ const originalAppointment = this.getOriginalAppointmentFromItem(droppedItem);
1417
+ this.onAppointmentDropInternal.emit({
1418
+ event: e,
1419
+ slot: slotData,
1420
+ appointment: originalAppointment,
1421
+ });
1017
1422
  }
1018
1423
  isToday(date) {
1019
1424
  const today = this.calendarService.create(new Date());
@@ -1022,12 +1427,20 @@ class AXSchedulerTimelineMonthViewComponent extends MXBaseComponent {
1022
1427
  get isReadonly() {
1023
1428
  return this.readonly();
1024
1429
  }
1025
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXSchedulerTimelineMonthViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
1026
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: AXSchedulerTimelineMonthViewComponent, isStandalone: true, selector: "ax-scheduler-timeline-month-view", inputs: { readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, endHour: { classPropertyName: "endHour", publicName: "endHour", isSignal: true, isRequired: true, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: true, transformFunction: null }, startHour: { classPropertyName: "startHour", publicName: "startHour", isSignal: true, isRequired: true, transformFunction: null }, appointments: { classPropertyName: "appointments", publicName: "appointments", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { slotClickedInternal: "slotClickedInternal", slotDblClickedInternal: "slotDblClickedInternal", slotRightClickedInternal: "slotRightClickedInternal", appointmentClickedInternal: "appointmentClickedInternal", appointmentDblClickedInternal: "appointmentDblClickedInternal", appointmentRightClickedInternal: "appointmentRightClickedInternal" }, host: { properties: { "class.ax-state-readonly": "this.isReadonly" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-scheduler-timeline-month-container\">\n @for (appt of monthAppointments(); track appt.visibleAppointments) {\n <div>\n <div class=\"ax-scheduler-timeline-header\">\n <div class=\"ax-scheduler-month-header-date-day\" [class.ax-today]=\"isToday(appt.date)\">\n <span class=\"ax-scheduler-month-header-date-day-char\">\n {{ appt.date | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n </span>\n <span class=\"ax-scheduler-month-header-date-day-num\">\n {{ appt.date | format: 'date' : { format: 'DD', calendar: calendar() } | async }}\n </span>\n </div>\n </div>\n\n <div\n class=\"ax-scheduler-timeline-content\"\n (click)=\"handleSlotEvent($event, appt.date)\"\n (dblclick)=\"handleSlotEvent($event, appt.date)\"\n (contextmenu)=\"handleSlotEvent($event, appt.date)\"\n >\n <div class=\"ax-scheduler-timeline-appointment-container\">\n @for (appointment of appt.visibleAppointments; track appointment.key) {\n <div\n (click)=\"handleAppointmentEvent($event, appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n [title]=\"appointment.title\"\n [class.ax-draggable]=\"draggable()\"\n [style.color]=\"appointment.textColor\"\n class=\"ax-scheduler-timeline-appointment\"\n [style.background-color]=\"appointment.backgroundColor\"\n >\n <ax-title class=\"ax-scheduler-truncate\">{{ appointment.title }}</ax-title>\n <ax-subtitle>\n {{ appointment.startDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }} -\n {{ appointment.endDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n </ax-subtitle>\n </div>\n }\n @if (appt.moreCount > 0) {\n <div #moreAppointments class=\"ax-scheduler-month-overflow-badge\">\n +{{ 'more-items' | translate: { params: { number: appt.moreCount } } | async }}\n </div>\n <ax-popover [target]=\"moreAppointments\" [placement]=\"'bottom'\">\n <div\n [class.ax-state-readonly]=\"readonly()\"\n class=\"ax-overlay-pane ax-scheduler-popover ax-scheduler-month-popover-appointment\"\n >\n @for (appointment of appt.hiddenAppointments; track appointment.key) {\n <div\n (click)=\"handleAppointmentEvent($event, appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n [title]=\"appointment.title\"\n [class.ax-draggable]=\"draggable()\"\n [style.color]=\"appointment.textColor\"\n class=\"ax-scheduler-popover-appointment\"\n [style.background-color]=\"appointment.backgroundColor\"\n >\n <span class=\"ax-appointment-chip-title ax-scheduler-truncate\">{{ appointment.title }}</span>\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-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-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-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-scheduler-month-header-date-day-char{position:sticky;font-weight:300;inset-inline-start:1rem}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day .ax-scheduler-month-header-date-day-num{position:sticky;font-weight:500;font-size:1.25rem;inset-inline-start:1rem}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content{padding:.125rem .25rem;position:relative;height:calc(100% - 4rem);width:var(--ax-comp-scheduler-timeline-month-view-blocks-width, calc(var(--ax-comp-scheduler-timeline-view-blocks-width) / 2));border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container{gap:1px;display:flex;flex-direction:column}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-timeline-appointment{width:100%;display:flex;overflow:hidden;flex-direction:column;padding-block:.25rem;padding-inline:.5rem;color:rgba(var(--ax-sys-color-on-primary-surface));border-radius:calc(var(--ax-sys-border-radius) / 2);background-color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-month-overflow-badge{cursor:pointer;text-align:left;font-size:.75rem;padding:.125rem 0;margin-top:.125rem;color:rgba(var(--ax-sys-color-primary-text))}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-month-overflow-badge:hover{text-decoration:underline}ax-scheduler-timeline-month-view:not(.ax-state-readonly) .ax-scheduler-timeline-appointment{cursor:pointer}ax-scheduler-timeline-month-view:not(.ax-state-readonly) .ax-scheduler-timeline-content{cursor:pointer;transition-property:background-color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-scheduler-timeline-month-view:not(.ax-state-readonly) .ax-scheduler-timeline-content:hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg, var(--ax-sys-color-primary-surface), .1))}\n"], dependencies: [{ kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "pipe", type: AXFormatPipe, name: "format" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
1430
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXSchedulerTimelineMonthViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
1431
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AXSchedulerTimelineMonthViewComponent, isStandalone: true, selector: "ax-scheduler-timeline-month-view", inputs: { readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: true, transformFunction: null }, appointments: { classPropertyName: "appointments", publicName: "appointments", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { slotClickedInternal: "slotClickedInternal", slotDblClickedInternal: "slotDblClickedInternal", slotRightClickedInternal: "slotRightClickedInternal", appointmentClickedInternal: "appointmentClickedInternal", appointmentDblClickedInternal: "appointmentDblClickedInternal", appointmentRightClickedInternal: "appointmentRightClickedInternal", onAppointmentDropInternal: "onAppointmentDropInternal" }, host: { properties: { "class.ax-state-readonly": "this.isReadonly" } }, 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 class=\"ax-scheduler-month-header-date-day\" [class.ax-today]=\"isToday(dayData.date)\">\n <span class=\"ax-scheduler-month-header-date-day-char\">\n {{ dayData.date | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n </span>\n <span class=\"ax-scheduler-month-header-date-day-num\">\n {{ dayData.date | format: 'date' : { format: 'DD', calendar: calendar() } | async }}\n </span>\n </div>\n </div>\n\n <div\n axDropZone\n #zone=\"axDropZone\"\n (onElementDrop)=\"handleDrop($event, dayData.date)\"\n [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n class=\"ax-scheduler-timeline-content\"\n (click)=\"handleSlotEvent($event, dayData.date)\"\n (dblclick)=\"handleSlotEvent($event, dayData.date)\"\n (contextmenu)=\"handleSlotEvent($event, dayData.date)\"\n >\n <div class=\"ax-scheduler-timeline-appointment-container\">\n @for (segment of dayData.visibleAppointments; track segment.key + segment.originalStartDate.date.getTime()) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"segment\"\n [dragElementClone]=\"true\"\n [dragDisabled]=\"!draggable() || segment.readonly || readonly()\"\n (click)=\"handleAppointmentEvent($event, segment)\"\n (dblclick)=\"handleAppointmentEvent($event, segment)\"\n (contextmenu)=\"handleAppointmentEvent($event, segment)\"\n [title]=\"\n segment.allDay\n ? segment.title\n : segment.title +\n ' (' +\n (segment.originalStartDate | format: 'time' : { calendar: calendar() } | async) +\n ' - ' +\n (segment.originalEndDate | format: 'time' : { calendar: calendar() } | async) +\n ')'\n \"\n [style.color]=\"segment.textColor\"\n class=\"ax-scheduler-timeline-appointment\"\n [class.all-day-segment]=\"segment.allDay\"\n [style.background-color]=\"segment.backgroundColor\"\n >\n <ax-title class=\"ax-scheduler-truncate\">{{ segment.title }}</ax-title>\n <!-- Display segment's start/end times if not allDay for this segment -->\n @if (!segment.allDay) {\n <ax-subtitle>\n {{ segment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }} -\n {{ segment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n </ax-subtitle>\n }\n </div>\n }\n @if (dayData.moreCount > 0) {\n <div #moreAppointments class=\"ax-scheduler-month-overflow-badge\" (click)=\"$event.stopPropagation()\">\n +{{ 'more-items' | translate: { params: { number: dayData.moreCount } } | async }}\n </div>\n <ax-popover [target]=\"moreAppointments\" placement=\"bottom-start\" trigger=\"click\">\n <div\n [class.ax-state-readonly]=\"readonly()\"\n class=\"ax-overlay-pane ax-scheduler-popover ax-scheduler-month-popover-appointment\"\n >\n @for (\n segment of dayData.hiddenAppointments;\n track segment.key + segment.originalStartDate.date.getTime()\n ) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"segment\"\n [dragElementClone]=\"true\"\n [dragDisabled]=\"!draggable() || segment.readonly || readonly()\"\n (click)=\"handleAppointmentEvent($event, segment); $event.stopPropagation()\"\n (dblclick)=\"handleAppointmentEvent($event, segment); $event.stopPropagation()\"\n (contextmenu)=\"handleAppointmentEvent($event, segment); $event.stopPropagation()\"\n [title]=\"\n segment.allDay\n ? segment.title\n : segment.title +\n ' (' +\n (segment.originalStartDate | format: 'time' : { calendar: calendar() } | async) +\n ' - ' +\n (segment.originalEndDate | format: 'time' : { calendar: calendar() } | async) +\n ')'\n \"\n [style.color]=\"segment.textColor\"\n class=\"ax-scheduler-popover-appointment\"\n [class.all-day-segment]=\"segment.allDay\"\n [style.background-color]=\"segment.backgroundColor\"\n >\n <span class=\"ax-appointment-chip-title ax-scheduler-truncate\">{{ segment.title }}</span>\n @if (!segment.allDay) {\n <ax-subtitle>\n {{\n segment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n -\n {{\n segment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n </ax-subtitle>\n }\n </div>\n }\n </div>\n </ax-popover>\n }\n </div>\n </div>\n </div>\n }\n</div>\n", styles: ["ax-scheduler-timeline-month-view{height:100%;position:relative;display:inline-flex;flex-direction:column;background-color:inherit}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container{height:100%;display:flex}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header{width:100%;display:flex;background-color:var(--ax-comp-scheduler-all-day-bg, inherit)}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day{gap:.25rem;height:4rem;display:flex;position:relative;align-items:start;padding-inline:1rem;flex-direction:column;padding-block:.25rem;justify-content:center;width:var(--ax-comp-scheduler-timeline-month-view-blocks-width, calc(var(--ax-comp-scheduler-timeline-view-blocks-width) / 2));border-block-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface));border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day.ax-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-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-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-scheduler-month-header-date-day-char{position:sticky;font-weight:300;inset-inline-start:1rem}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day .ax-scheduler-month-header-date-day-num{position:sticky;font-weight:500;font-size:1.25rem;inset-inline-start:1rem}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content{padding:.125rem .25rem;position:relative;height:calc(100% - 4rem);width:var(--ax-comp-scheduler-timeline-month-view-blocks-width, calc(var(--ax-comp-scheduler-timeline-view-blocks-width) / 2));border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container{gap:1px;display:flex;flex-direction:column}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-timeline-appointment{width:100%;display:flex;overflow:hidden;flex-direction:column;padding-block:.25rem;padding-inline:.5rem;color:rgba(var(--ax-sys-color-on-primary-surface));border-radius:calc(var(--ax-sys-border-radius) / 2);background-color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-month-overflow-badge{cursor:pointer;text-align:left;font-size:.75rem;padding:.125rem 0;margin-top:.125rem;color:rgba(var(--ax-sys-color-primary-text))}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-month-overflow-badge:hover{text-decoration:underline}ax-scheduler-timeline-month-view:not(.ax-state-readonly) .ax-scheduler-timeline-appointment{cursor:pointer}ax-scheduler-timeline-month-view:not(.ax-state-readonly) .ax-scheduler-timeline-content{cursor:pointer;transition-property:background-color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-scheduler-timeline-month-view:not(.ax-state-readonly) .ax-scheduler-timeline-content:hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg, var(--ax-sys-color-primary-surface), .1))}\n"], dependencies: [{ kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "pipe", type: AXFormatPipe, name: "format" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["dragData", "dragDisabled", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragCursor", "dragBoundary"], outputs: ["dragPositionChanged"] }, { kind: "directive", type: AXDropZoneDirective, selector: "[axDropZone]", inputs: ["dropZoneGroup"], outputs: ["onElementDrop", "onElementHover"], exportAs: ["axDropZone"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
1027
1432
  }
1028
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXSchedulerTimelineMonthViewComponent, decorators: [{
1433
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXSchedulerTimelineMonthViewComponent, decorators: [{
1029
1434
  type: Component,
1030
- args: [{ selector: 'ax-scheduler-timeline-month-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXDecoratorGenericComponent, AXFormatPipe, AsyncPipe, AXTranslatorPipe, AXPopoverComponent], template: "<div class=\"ax-scheduler-timeline-month-container\">\n @for (appt of monthAppointments(); track appt.visibleAppointments) {\n <div>\n <div class=\"ax-scheduler-timeline-header\">\n <div class=\"ax-scheduler-month-header-date-day\" [class.ax-today]=\"isToday(appt.date)\">\n <span class=\"ax-scheduler-month-header-date-day-char\">\n {{ appt.date | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n </span>\n <span class=\"ax-scheduler-month-header-date-day-num\">\n {{ appt.date | format: 'date' : { format: 'DD', calendar: calendar() } | async }}\n </span>\n </div>\n </div>\n\n <div\n class=\"ax-scheduler-timeline-content\"\n (click)=\"handleSlotEvent($event, appt.date)\"\n (dblclick)=\"handleSlotEvent($event, appt.date)\"\n (contextmenu)=\"handleSlotEvent($event, appt.date)\"\n >\n <div class=\"ax-scheduler-timeline-appointment-container\">\n @for (appointment of appt.visibleAppointments; track appointment.key) {\n <div\n (click)=\"handleAppointmentEvent($event, appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n [title]=\"appointment.title\"\n [class.ax-draggable]=\"draggable()\"\n [style.color]=\"appointment.textColor\"\n class=\"ax-scheduler-timeline-appointment\"\n [style.background-color]=\"appointment.backgroundColor\"\n >\n <ax-title class=\"ax-scheduler-truncate\">{{ appointment.title }}</ax-title>\n <ax-subtitle>\n {{ appointment.startDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }} -\n {{ appointment.endDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n </ax-subtitle>\n </div>\n }\n @if (appt.moreCount > 0) {\n <div #moreAppointments class=\"ax-scheduler-month-overflow-badge\">\n +{{ 'more-items' | translate: { params: { number: appt.moreCount } } | async }}\n </div>\n <ax-popover [target]=\"moreAppointments\" [placement]=\"'bottom'\">\n <div\n [class.ax-state-readonly]=\"readonly()\"\n class=\"ax-overlay-pane ax-scheduler-popover ax-scheduler-month-popover-appointment\"\n >\n @for (appointment of appt.hiddenAppointments; track appointment.key) {\n <div\n (click)=\"handleAppointmentEvent($event, appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n [title]=\"appointment.title\"\n [class.ax-draggable]=\"draggable()\"\n [style.color]=\"appointment.textColor\"\n class=\"ax-scheduler-popover-appointment\"\n [style.background-color]=\"appointment.backgroundColor\"\n >\n <span class=\"ax-appointment-chip-title ax-scheduler-truncate\">{{ appointment.title }}</span>\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-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-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-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-scheduler-month-header-date-day-char{position:sticky;font-weight:300;inset-inline-start:1rem}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day .ax-scheduler-month-header-date-day-num{position:sticky;font-weight:500;font-size:1.25rem;inset-inline-start:1rem}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content{padding:.125rem .25rem;position:relative;height:calc(100% - 4rem);width:var(--ax-comp-scheduler-timeline-month-view-blocks-width, calc(var(--ax-comp-scheduler-timeline-view-blocks-width) / 2));border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container{gap:1px;display:flex;flex-direction:column}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-timeline-appointment{width:100%;display:flex;overflow:hidden;flex-direction:column;padding-block:.25rem;padding-inline:.5rem;color:rgba(var(--ax-sys-color-on-primary-surface));border-radius:calc(var(--ax-sys-border-radius) / 2);background-color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-month-overflow-badge{cursor:pointer;text-align:left;font-size:.75rem;padding:.125rem 0;margin-top:.125rem;color:rgba(var(--ax-sys-color-primary-text))}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-month-overflow-badge:hover{text-decoration:underline}ax-scheduler-timeline-month-view:not(.ax-state-readonly) .ax-scheduler-timeline-appointment{cursor:pointer}ax-scheduler-timeline-month-view:not(.ax-state-readonly) .ax-scheduler-timeline-content{cursor:pointer;transition-property:background-color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-scheduler-timeline-month-view:not(.ax-state-readonly) .ax-scheduler-timeline-content:hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg, var(--ax-sys-color-primary-surface), .1))}\n"] }]
1435
+ args: [{ selector: 'ax-scheduler-timeline-month-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
1436
+ AXDecoratorGenericComponent,
1437
+ AXFormatPipe,
1438
+ AsyncPipe,
1439
+ AXTranslatorPipe,
1440
+ AXPopoverComponent,
1441
+ AXDragDirective,
1442
+ AXDropZoneDirective,
1443
+ ], 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 class=\"ax-scheduler-month-header-date-day\" [class.ax-today]=\"isToday(dayData.date)\">\n <span class=\"ax-scheduler-month-header-date-day-char\">\n {{ dayData.date | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n </span>\n <span class=\"ax-scheduler-month-header-date-day-num\">\n {{ dayData.date | format: 'date' : { format: 'DD', calendar: calendar() } | async }}\n </span>\n </div>\n </div>\n\n <div\n axDropZone\n #zone=\"axDropZone\"\n (onElementDrop)=\"handleDrop($event, dayData.date)\"\n [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n class=\"ax-scheduler-timeline-content\"\n (click)=\"handleSlotEvent($event, dayData.date)\"\n (dblclick)=\"handleSlotEvent($event, dayData.date)\"\n (contextmenu)=\"handleSlotEvent($event, dayData.date)\"\n >\n <div class=\"ax-scheduler-timeline-appointment-container\">\n @for (segment of dayData.visibleAppointments; track segment.key + segment.originalStartDate.date.getTime()) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"segment\"\n [dragElementClone]=\"true\"\n [dragDisabled]=\"!draggable() || segment.readonly || readonly()\"\n (click)=\"handleAppointmentEvent($event, segment)\"\n (dblclick)=\"handleAppointmentEvent($event, segment)\"\n (contextmenu)=\"handleAppointmentEvent($event, segment)\"\n [title]=\"\n segment.allDay\n ? segment.title\n : segment.title +\n ' (' +\n (segment.originalStartDate | format: 'time' : { calendar: calendar() } | async) +\n ' - ' +\n (segment.originalEndDate | format: 'time' : { calendar: calendar() } | async) +\n ')'\n \"\n [style.color]=\"segment.textColor\"\n class=\"ax-scheduler-timeline-appointment\"\n [class.all-day-segment]=\"segment.allDay\"\n [style.background-color]=\"segment.backgroundColor\"\n >\n <ax-title class=\"ax-scheduler-truncate\">{{ segment.title }}</ax-title>\n <!-- Display segment's start/end times if not allDay for this segment -->\n @if (!segment.allDay) {\n <ax-subtitle>\n {{ segment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }} -\n {{ segment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n </ax-subtitle>\n }\n </div>\n }\n @if (dayData.moreCount > 0) {\n <div #moreAppointments class=\"ax-scheduler-month-overflow-badge\" (click)=\"$event.stopPropagation()\">\n +{{ 'more-items' | translate: { params: { number: dayData.moreCount } } | async }}\n </div>\n <ax-popover [target]=\"moreAppointments\" placement=\"bottom-start\" trigger=\"click\">\n <div\n [class.ax-state-readonly]=\"readonly()\"\n class=\"ax-overlay-pane ax-scheduler-popover ax-scheduler-month-popover-appointment\"\n >\n @for (\n segment of dayData.hiddenAppointments;\n track segment.key + segment.originalStartDate.date.getTime()\n ) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"segment\"\n [dragElementClone]=\"true\"\n [dragDisabled]=\"!draggable() || segment.readonly || readonly()\"\n (click)=\"handleAppointmentEvent($event, segment); $event.stopPropagation()\"\n (dblclick)=\"handleAppointmentEvent($event, segment); $event.stopPropagation()\"\n (contextmenu)=\"handleAppointmentEvent($event, segment); $event.stopPropagation()\"\n [title]=\"\n segment.allDay\n ? segment.title\n : segment.title +\n ' (' +\n (segment.originalStartDate | format: 'time' : { calendar: calendar() } | async) +\n ' - ' +\n (segment.originalEndDate | format: 'time' : { calendar: calendar() } | async) +\n ')'\n \"\n [style.color]=\"segment.textColor\"\n class=\"ax-scheduler-popover-appointment\"\n [class.all-day-segment]=\"segment.allDay\"\n [style.background-color]=\"segment.backgroundColor\"\n >\n <span class=\"ax-appointment-chip-title ax-scheduler-truncate\">{{ segment.title }}</span>\n @if (!segment.allDay) {\n <ax-subtitle>\n {{\n segment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n -\n {{\n segment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n </ax-subtitle>\n }\n </div>\n }\n </div>\n </ax-popover>\n }\n </div>\n </div>\n </div>\n }\n</div>\n", styles: ["ax-scheduler-timeline-month-view{height:100%;position:relative;display:inline-flex;flex-direction:column;background-color:inherit}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container{height:100%;display:flex}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header{width:100%;display:flex;background-color:var(--ax-comp-scheduler-all-day-bg, inherit)}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day{gap:.25rem;height:4rem;display:flex;position:relative;align-items:start;padding-inline:1rem;flex-direction:column;padding-block:.25rem;justify-content:center;width:var(--ax-comp-scheduler-timeline-month-view-blocks-width, calc(var(--ax-comp-scheduler-timeline-view-blocks-width) / 2));border-block-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface));border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day.ax-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-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-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-scheduler-month-header-date-day-char{position:sticky;font-weight:300;inset-inline-start:1rem}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day .ax-scheduler-month-header-date-day-num{position:sticky;font-weight:500;font-size:1.25rem;inset-inline-start:1rem}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content{padding:.125rem .25rem;position:relative;height:calc(100% - 4rem);width:var(--ax-comp-scheduler-timeline-month-view-blocks-width, calc(var(--ax-comp-scheduler-timeline-view-blocks-width) / 2));border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container{gap:1px;display:flex;flex-direction:column}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-timeline-appointment{width:100%;display:flex;overflow:hidden;flex-direction:column;padding-block:.25rem;padding-inline:.5rem;color:rgba(var(--ax-sys-color-on-primary-surface));border-radius:calc(var(--ax-sys-border-radius) / 2);background-color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-month-overflow-badge{cursor:pointer;text-align:left;font-size:.75rem;padding:.125rem 0;margin-top:.125rem;color:rgba(var(--ax-sys-color-primary-text))}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-month-overflow-badge:hover{text-decoration:underline}ax-scheduler-timeline-month-view:not(.ax-state-readonly) .ax-scheduler-timeline-appointment{cursor:pointer}ax-scheduler-timeline-month-view:not(.ax-state-readonly) .ax-scheduler-timeline-content{cursor:pointer;transition-property:background-color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-scheduler-timeline-month-view:not(.ax-state-readonly) .ax-scheduler-timeline-content:hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg, var(--ax-sys-color-primary-surface), .1))}\n"] }]
1031
1444
  }], propDecorators: { isReadonly: [{
1032
1445
  type: HostBinding,
1033
1446
  args: ['class.ax-state-readonly']
@@ -1045,25 +1458,30 @@ class AXSchedulerTimelineMultiDayViewComponent extends MXBaseComponent {
1045
1458
  this.date = input.required();
1046
1459
  this.startHour = input.required();
1047
1460
  this.appointments = input([]);
1048
- this.multiDayAppointments = computed(() => {
1049
- const mapped = this.appointments();
1050
- const current = this.date();
1051
- const daysCount = this.daysCount();
1052
- return Array.from({ length: daysCount }, (_, i) => {
1053
- const dayStart = current.add('day', i).add('hour', this.startHour());
1054
- const dayEnd = dayStart.add('day', 1).add('hour', this.endHour() - this.startHour());
1055
- const appointmentsForDay = mapped.filter((appt) => !appt.allDay &&
1056
- appt.singleDay &&
1057
- appt.endDate.compare(dayStart, 'day') >= 0 &&
1058
- appt.startDate.compare(dayEnd, 'day') < 0 &&
1059
- appt.endDate.compare(dayStart, 'hour') >= 0 &&
1060
- appt.startDate.compare(dayEnd, 'hour') < 0);
1061
- return {
1062
- appointments: appointmentsForDay,
1063
- date: dayStart,
1064
- };
1065
- });
1066
- return [];
1461
+ this.daysDataForTimelineViews = computed(() => {
1462
+ const allOriginalAppointments = this.appointments();
1463
+ const multiViewStartDate = this.date();
1464
+ const numberOfDays = this.daysCount();
1465
+ if (!multiViewStartDate || !allOriginalAppointments) {
1466
+ return [];
1467
+ }
1468
+ const result = [];
1469
+ for (let i = 0; i < numberOfDays; i++) {
1470
+ const currentDayDate = multiViewStartDate.add('day', i);
1471
+ const currentDayStart = currentDayDate.startOf('day');
1472
+ const currentDayEnd = currentDayDate.endOf('day'); // Use full day for overlap check
1473
+ const appointmentsOverlappingThisDay = allOriginalAppointments.filter((appt) => {
1474
+ if (appt.allDay) {
1475
+ return false;
1476
+ }
1477
+ return appt.endDate.compare(currentDayStart, 'day') >= 0 && appt.startDate.compare(currentDayEnd, 'day') <= 0;
1478
+ });
1479
+ result.push({
1480
+ date: currentDayDate,
1481
+ originalAppointmentsForThisDay: appointmentsOverlappingThisDay,
1482
+ });
1483
+ }
1484
+ return result;
1067
1485
  });
1068
1486
  this.slotClickedInternal = output();
1069
1487
  this.slotDblClickedInternal = output();
@@ -1071,17 +1489,18 @@ class AXSchedulerTimelineMultiDayViewComponent extends MXBaseComponent {
1071
1489
  this.appointmentClickedInternal = output();
1072
1490
  this.appointmentDblClickedInternal = output();
1073
1491
  this.appointmentRightClickedInternal = output();
1492
+ this.onAppointmentDropInternal = output();
1074
1493
  }
1075
1494
  isToday(date) {
1076
1495
  const today = this.calendarService.create(new Date());
1077
1496
  return date.equal(today, 'day');
1078
1497
  }
1079
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXSchedulerTimelineMultiDayViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
1080
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", 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 }, calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, endHour: { classPropertyName: "endHour", publicName: "endHour", isSignal: true, isRequired: true, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: true, transformFunction: null }, startHour: { classPropertyName: "startHour", publicName: "startHour", isSignal: true, isRequired: true, transformFunction: null }, appointments: { classPropertyName: "appointments", publicName: "appointments", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { slotClickedInternal: "slotClickedInternal", slotDblClickedInternal: "slotDblClickedInternal", slotRightClickedInternal: "slotRightClickedInternal", appointmentClickedInternal: "appointmentClickedInternal", appointmentDblClickedInternal: "appointmentDblClickedInternal", appointmentRightClickedInternal: "appointmentRightClickedInternal" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-scheduler-timeline-day-view-container\">\n @for (appt of multiDayAppointments(); track appt.appointments) {\n <div>\n <div class=\"ax-scheduler-week-header-date-day\" [class.ax-today]=\"isToday(appt.date)\">\n <span class=\"ax-scheduler-week-header-date-day-char\">\n {{ appt.date | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n </span>\n <span class=\"ax-scheduler-week-header-date-day-num\">\n {{ appt.date | format: 'date' : { format: 'DD', calendar: calendar() } | async }}\n </span>\n </div>\n <ax-scheduler-timeline-day-view\n [date]=\"appt.date\"\n [endHour]=\"endHour()\"\n [readonly]=\"readonly()\"\n [startHour]=\"startHour()\"\n [draggable]=\"draggable()\"\n [appointments]=\"appt.appointments\"\n (slotClickedInternal)=\"slotClickedInternal.emit($event)\"\n (slotDblClickedInternal)=\"slotDblClickedInternal.emit($event)\"\n (slotRightClickedInternal)=\"slotRightClickedInternal.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-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-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-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-scheduler-week-header-date-day-char{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", "calendar", "endHour", "date", "startHour", "appointments"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXFormatPipe, name: "format" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
1498
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXSchedulerTimelineMultiDayViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
1499
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", 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 }, calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, endHour: { classPropertyName: "endHour", publicName: "endHour", isSignal: true, isRequired: true, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: true, transformFunction: null }, startHour: { classPropertyName: "startHour", publicName: "startHour", isSignal: true, isRequired: true, transformFunction: null }, appointments: { classPropertyName: "appointments", publicName: "appointments", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { slotClickedInternal: "slotClickedInternal", slotDblClickedInternal: "slotDblClickedInternal", slotRightClickedInternal: "slotRightClickedInternal", appointmentClickedInternal: "appointmentClickedInternal", appointmentDblClickedInternal: "appointmentDblClickedInternal", appointmentRightClickedInternal: "appointmentRightClickedInternal", onAppointmentDropInternal: "onAppointmentDropInternal" }, 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 class=\"ax-scheduler-week-header-date-day\" [class.ax-today]=\"isToday(daySlot.date)\">\n <span class=\"ax-scheduler-week-header-date-day-char\">\n {{ daySlot.date | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\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 [endHour]=\"endHour()\"\n [readonly]=\"readonly()\"\n [startHour]=\"startHour()\"\n [draggable]=\"draggable()\"\n [appointments]=\"daySlot.originalAppointmentsForThisDay\"\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-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-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-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-scheduler-week-header-date-day-char{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", "calendar", "endHour", "date", "startHour", "appointments"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onAppointmentDropInternal"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXFormatPipe, name: "format" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
1081
1500
  }
1082
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXSchedulerTimelineMultiDayViewComponent, decorators: [{
1501
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXSchedulerTimelineMultiDayViewComponent, decorators: [{
1083
1502
  type: Component,
1084
- args: [{ selector: 'ax-scheduler-timeline-multi-day-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXSchedulerTimelineDayViewComponent, AsyncPipe, AXFormatPipe], template: "<div class=\"ax-scheduler-timeline-day-view-container\">\n @for (appt of multiDayAppointments(); track appt.appointments) {\n <div>\n <div class=\"ax-scheduler-week-header-date-day\" [class.ax-today]=\"isToday(appt.date)\">\n <span class=\"ax-scheduler-week-header-date-day-char\">\n {{ appt.date | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n </span>\n <span class=\"ax-scheduler-week-header-date-day-num\">\n {{ appt.date | format: 'date' : { format: 'DD', calendar: calendar() } | async }}\n </span>\n </div>\n <ax-scheduler-timeline-day-view\n [date]=\"appt.date\"\n [endHour]=\"endHour()\"\n [readonly]=\"readonly()\"\n [startHour]=\"startHour()\"\n [draggable]=\"draggable()\"\n [appointments]=\"appt.appointments\"\n (slotClickedInternal)=\"slotClickedInternal.emit($event)\"\n (slotDblClickedInternal)=\"slotDblClickedInternal.emit($event)\"\n (slotRightClickedInternal)=\"slotRightClickedInternal.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-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-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-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-scheduler-week-header-date-day-char{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"] }]
1503
+ args: [{ selector: 'ax-scheduler-timeline-multi-day-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXSchedulerTimelineDayViewComponent, AsyncPipe, AXFormatPipe], 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 class=\"ax-scheduler-week-header-date-day\" [class.ax-today]=\"isToday(daySlot.date)\">\n <span class=\"ax-scheduler-week-header-date-day-char\">\n {{ daySlot.date | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\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 [endHour]=\"endHour()\"\n [readonly]=\"readonly()\"\n [startHour]=\"startHour()\"\n [draggable]=\"draggable()\"\n [appointments]=\"daySlot.originalAppointmentsForThisDay\"\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-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-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-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-scheduler-week-header-date-day-char{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"] }]
1085
1504
  }] });
1086
1505
 
1087
1506
  class AXSchedulerWeekViewComponent extends MXBaseComponent {
@@ -1097,8 +1516,57 @@ class AXSchedulerWeekViewComponent extends MXBaseComponent {
1097
1516
  this.date = input.required();
1098
1517
  this.startHour = input.required();
1099
1518
  this.appointments = input([]);
1100
- this.allDayAppointments = computed(() => this.appointments()?.filter((e) => e && e.allDay) ?? []);
1101
- this.singleDayAppointments = computed(() => this.appointments()?.filter((e) => e && e.singleDay && !e.allDay) ?? []);
1519
+ /**
1520
+ * Processes all original appointments and generates day-specific segments for the entire week.
1521
+ * Each segment represents the visible part of an appointment on a particular day.
1522
+ * The segment's 'allDay' flag indicates if it should be in the all-day slot or timed grid for that day.
1523
+ */
1524
+ this.processedAppointmentsForLayout = computed(() => {
1525
+ const viewDays = this.daysArray(); // Array of AXDateTime for each day in the week
1526
+ const allOriginalAppointments = this.appointments(); // Raw appointments from input
1527
+ const viewConfigStartHour = this.startHour(); // Configured start hour for the timed grid
1528
+ const viewConfigEndHour = this.endHour(); // Configured end hour for the timed grid
1529
+ if (!viewDays || viewDays.length === 0 || !allOriginalAppointments || allOriginalAppointments.length === 0) {
1530
+ return [];
1531
+ }
1532
+ const allSegmentsInView = [];
1533
+ for (const day of viewDays) {
1534
+ // For each day in the week
1535
+ const dayAsStartOfDay = day.startOf('day'); // Use startOf('day') for consistent cache key if AXDateTime interns
1536
+ for (const appt of allOriginalAppointments) {
1537
+ // Determine segmentation boundaries for this specific 'day':
1538
+ // - If original appt is allDay, segment across the full 0-24h of 'day'.
1539
+ // The service method will ensure segment.allDay is true.
1540
+ // - If original appt is timed, segment across viewConfigStartHour-viewConfigEndHour.
1541
+ // The service method will set segment.allDay=true if this timed segment fills that window.
1542
+ const effectiveSegmentStartHour = appt.allDay ? 0 : viewConfigStartHour;
1543
+ const effectiveSegmentEndHour = appt.allDay ? 24 : viewConfigEndHour;
1544
+ const segment = this.schedulerService.getClonedAppointmentSegmentOnDay(appt, dayAsStartOfDay, // Pass the AXDateTime object for the current day in loop
1545
+ effectiveSegmentStartHour, effectiveSegmentEndHour);
1546
+ if (segment) {
1547
+ allSegmentsInView.push(segment);
1548
+ }
1549
+ }
1550
+ }
1551
+ // Deduplicate segments. A segment is unique by its original key and its specific start/end on a day.
1552
+ // The service method already produces day-specific start/end times.
1553
+ const uniqueSegmentsMap = new Map();
1554
+ allSegmentsInView.forEach((seg) => {
1555
+ // Create a unique key for the segment based on original appt key and segment's own date range
1556
+ const mapKey = `${seg.key}-${seg.startDate.format('YYYYMMDDHHmmssSSS')}-${seg.endDate.format('YYYYMMDDHHmmssSSS')}`;
1557
+ if (!uniqueSegmentsMap.has(mapKey)) {
1558
+ uniqueSegmentsMap.set(mapKey, seg);
1559
+ }
1560
+ });
1561
+ return Array.from(uniqueSegmentsMap.values());
1562
+ });
1563
+ /**
1564
+ * Segments that are to be displayed in the timed grid area of the week view.
1565
+ * These are segments from processedAppointmentsForLayout where segment.allDay is false.
1566
+ */
1567
+ this.timedGridSegments = computed(() => {
1568
+ return this.processedAppointmentsForLayout()?.filter((segment) => !segment.allDay) ?? [];
1569
+ });
1102
1570
  // Internal outputs to be caught by parent AXSchedulerComponent
1103
1571
  this.slotClickedInternal = output();
1104
1572
  this.slotDblClickedInternal = output();
@@ -1106,6 +1574,7 @@ class AXSchedulerWeekViewComponent extends MXBaseComponent {
1106
1574
  this.appointmentClickedInternal = output();
1107
1575
  this.appointmentDblClickedInternal = output();
1108
1576
  this.appointmentRightClickedInternal = output();
1577
+ this.onAppointmentDropInternal = output();
1109
1578
  // --- Event Handlers ---
1110
1579
  this.eventOutputMap = {
1111
1580
  slot: {
@@ -1123,9 +1592,9 @@ class AXSchedulerWeekViewComponent extends MXBaseComponent {
1123
1592
  let time = this.date();
1124
1593
  if (!time)
1125
1594
  return [];
1126
- time = time.set('hour', this.startHour()).set('minute', 0).set('second', 0);
1595
+ time = time.set('hour', this.startHour()).startOf('hour');
1127
1596
  const hours = [time];
1128
- while (time.hour < this.endHour()) {
1597
+ while (time.hour < this.endHour() - 1) {
1129
1598
  time = time.add('hour', 1);
1130
1599
  hours.push(time);
1131
1600
  }
@@ -1149,20 +1618,24 @@ class AXSchedulerWeekViewComponent extends MXBaseComponent {
1149
1618
  return Math.max(0, (endH - startH) * (60 / 30));
1150
1619
  });
1151
1620
  this.appointmentsByStartBlock = computed(() => {
1152
- const viewDate = this.date();
1621
+ const viewDate = this.date(); // This should be the start date of the week
1153
1622
  const startH = this.startHour();
1154
1623
  const endH = this.endHour();
1155
1624
  if (!viewDate || typeof startH !== 'number' || typeof endH !== 'number')
1156
1625
  return {};
1157
- return this.schedulerService.calculateWeekViewAppointmentsByStartBlock(this.singleDayAppointments(), viewDate, startH, endH);
1626
+ // Pass the timedGridSegments to the service method
1627
+ return this.schedulerService.calculateWeekViewAppointmentsByStartBlock(this.timedGridSegments(), // CHANGED from singleDayAppointments
1628
+ viewDate, startH, endH);
1158
1629
  });
1159
1630
  this.activeAppointmentsInBlock = computed(() => {
1160
- const viewDate = this.date();
1631
+ const viewDate = this.date(); // Start date of the week
1161
1632
  const startH = this.startHour();
1162
1633
  const endH = this.endHour();
1163
1634
  if (!viewDate || typeof startH !== 'number' || typeof endH !== 'number')
1164
1635
  return {};
1165
- return this.schedulerService.calculateActiveAppointmentsInBlock(this.singleDayAppointments(), viewDate, startH, endH, 7);
1636
+ // Pass the timedGridSegments to the service method
1637
+ return this.schedulerService.calculateActiveAppointmentsInBlock(this.timedGridSegments(), // CHANGED from singleDayAppointments
1638
+ viewDate, startH, endH, 7);
1166
1639
  });
1167
1640
  this.visibleAppointmentsLayout = computed(() => {
1168
1641
  const layouts = [];
@@ -1286,27 +1759,29 @@ class AXSchedulerWeekViewComponent extends MXBaseComponent {
1286
1759
  }
1287
1760
  return badges;
1288
1761
  });
1762
+ /**
1763
+ * Structures all-day (or "becomes all-day") segments for rendering in the all-day slots for each day of the week.
1764
+ */
1289
1765
  this.allDayAppointmentsPerDay = computed(() => {
1290
- const days = this.daysArray();
1291
- const allDayAppointments = this.allDayAppointments(); // Use renamed type if needed
1766
+ const daysInWeek = this.daysArray(); // AXDateTime objects for each day in the week
1767
+ const allSegmentsInView = this.processedAppointmentsForLayout(); // All processed segments
1292
1768
  const result = [];
1293
- if (days.length !== 7)
1294
- return result; // Should always be 7 for week view
1295
- days.forEach((day) => {
1296
- const dayStart = day.startOf('day');
1297
- const dayEnd = day.endOf('day');
1298
- const appointmentsForThisDay = []; // Use renamed type
1299
- allDayAppointments.forEach((appointment) => {
1300
- // Check if the appointment overlaps with the current day
1301
- if (appointment.startDate.compare(dayEnd) <= 0 && appointment.endDate.compare(dayStart) >= 0) {
1302
- appointmentsForThisDay.push(appointment);
1303
- }
1304
- });
1305
- // Sort appointments for this day
1306
- appointmentsForThisDay.sort((a, b) => a.startDate.date.getTime() - b.startDate.date.getTime());
1769
+ if (!daysInWeek || daysInWeek.length === 0)
1770
+ return result;
1771
+ daysInWeek.forEach((dayDate) => {
1772
+ const currentDayStart = dayDate.startOf('day'); // For accurate day comparison
1773
+ // Filter segments that are marked as 'allDay' AND belong to the current 'dayDate'
1774
+ const allDaySegmentsForThisDay = allSegmentsInView.filter((segment) => segment.allDay && segment.startDate.startOf('day').equal(currentDayStart, 'day'));
1775
+ // Sort these segments for consistent display
1776
+ // Primarily by original start time, then by duration of original appointment, then title
1777
+ const sortedAppointmentsForThisDay = orderBy(allDaySegmentsForThisDay, [
1778
+ (s) => s.originalStartDate.date.getTime(),
1779
+ (s) => s.originalEndDate.date.getTime() - s.originalStartDate.date.getTime(),
1780
+ (s) => s.title?.toLowerCase() ?? '',
1781
+ ], ['asc', 'desc', 'asc']);
1307
1782
  result.push({
1308
- day: day, // Include the AXDateTime object for the day
1309
- appointments: appointmentsForThisDay,
1783
+ day: dayDate, // The AXDateTime for this day column
1784
+ appointments: sortedAppointmentsForThisDay, // Array of segments for the all-day slot
1310
1785
  });
1311
1786
  });
1312
1787
  return result;
@@ -1365,8 +1840,10 @@ class AXSchedulerWeekViewComponent extends MXBaseComponent {
1365
1840
  return badgesInfo;
1366
1841
  });
1367
1842
  }
1368
- handleAppointmentEvent(mouseEvent, appointment) {
1369
- this.schedulerService.handleEvent({ event: mouseEvent, appointment }, this.eventOutputMap, 'appointment');
1843
+ handleAppointmentEvent(mouseEvent, appointmentSegment) {
1844
+ // 'appointmentSegment' here is the segment that was interacted with
1845
+ const originalAppointment = this.getOriginalAppointmentFromItem(appointmentSegment);
1846
+ this.schedulerService.handleEvent({ event: mouseEvent, appointment: originalAppointment }, this.eventOutputMap, 'appointment');
1370
1847
  }
1371
1848
  handleSingleSlotEvent(mouseEvent, hour, day, minuteIndex) {
1372
1849
  const startDate = day.set('hour', hour.hour).set('minute', minuteIndex * 30);
@@ -1375,12 +1852,56 @@ class AXSchedulerWeekViewComponent extends MXBaseComponent {
1375
1852
  this.schedulerService.handleEvent({ event: mouseEvent, slot: slotData }, this.eventOutputMap, 'slot');
1376
1853
  }
1377
1854
  handleAllDaySlotEvent(mouseEvent, day) {
1378
- const startDate = day.startOf('day');
1379
1855
  const endDate = day.endOf('day');
1856
+ const startDate = day.startOf('day');
1380
1857
  const slotData = { startDate, endDate, view: 'week' };
1381
1858
  if (slotData)
1382
1859
  this.schedulerService.handleEvent({ event: mouseEvent, slot: slotData }, this.eventOutputMap, 'slot');
1383
1860
  }
1861
+ handleAllDayDrop(e, day) {
1862
+ const endDate = day.endOf('day');
1863
+ const startDate = day.startOf('day');
1864
+ const slotData = { startDate, endDate, view: 'week' };
1865
+ const droppedItem = e.dropped.dragData();
1866
+ const originalAppointment = this.getOriginalAppointmentFromItem(droppedItem);
1867
+ this.onAppointmentDropInternal.emit({
1868
+ event: e,
1869
+ slot: slotData,
1870
+ appointment: originalAppointment,
1871
+ });
1872
+ }
1873
+ handleSingleDayDrop(e, hour, day, minuteIndex) {
1874
+ const startDate = day.set('hour', hour.hour).set('minute', minuteIndex * 30);
1875
+ const slotData = this.schedulerService.getSlotData(startDate, 'week');
1876
+ const droppedItem = e.dropped.dragData();
1877
+ const originalAppointment = this.getOriginalAppointmentFromItem(droppedItem);
1878
+ this.onAppointmentDropInternal.emit({
1879
+ event: e,
1880
+ slot: slotData,
1881
+ appointment: originalAppointment,
1882
+ });
1883
+ }
1884
+ getOriginalAppointmentFromItem(item) {
1885
+ const segment = item;
1886
+ if (segment.originalStartDate) {
1887
+ // It's a segment, reconstruct the original appointment for event emission
1888
+ const originalAppointmentSource = this.appointments().find((a) => a.key === segment.key);
1889
+ return {
1890
+ key: segment.key,
1891
+ title: segment.title,
1892
+ description: segment.description,
1893
+ textColor: segment.textColor,
1894
+ backgroundColor: segment.backgroundColor,
1895
+ readonly: segment.readonly,
1896
+ // Crucially, use original dates and flags
1897
+ startDate: segment.originalStartDate,
1898
+ endDate: segment.originalEndDate,
1899
+ allDay: originalAppointmentSource?.allDay ?? segment.allDay, // Prefer original for logic
1900
+ singleDay: originalAppointmentSource?.singleDay ?? false, // Prefer original for logic
1901
+ };
1902
+ }
1903
+ return item; // It was already an original appointment
1904
+ }
1384
1905
  isToday(date) {
1385
1906
  const today = this.calendarService.create(new Date());
1386
1907
  return date.equal(today, 'day');
@@ -1388,12 +1909,20 @@ class AXSchedulerWeekViewComponent extends MXBaseComponent {
1388
1909
  get isReadonly() {
1389
1910
  return this.readonly();
1390
1911
  }
1391
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXSchedulerWeekViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
1392
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: AXSchedulerWeekViewComponent, isStandalone: true, selector: "ax-scheduler-week-view", inputs: { readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, endHour: { classPropertyName: "endHour", publicName: "endHour", isSignal: true, isRequired: true, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: true, transformFunction: null }, startHour: { classPropertyName: "startHour", publicName: "startHour", isSignal: true, isRequired: true, transformFunction: null }, appointments: { classPropertyName: "appointments", publicName: "appointments", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { slotClickedInternal: "slotClickedInternal", slotDblClickedInternal: "slotDblClickedInternal", slotRightClickedInternal: "slotRightClickedInternal", appointmentClickedInternal: "appointmentClickedInternal", appointmentDblClickedInternal: "appointmentDblClickedInternal", appointmentRightClickedInternal: "appointmentRightClickedInternal" }, host: { properties: { "class.ax-state-readonly": "this.isReadonly" } }, 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.getTime()) {\n <div class=\"ax-scheduler-week-header-date-day\" [class.ax-today]=\"isToday(day)\">\n <span class=\"ax-scheduler-week-header-date-day-char\">\n {{ day | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n </span>\n <span class=\"ax-scheduler-week-header-date-day-num\">\n {{ day | 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\">{{ '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 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 (click)=\"handleAppointmentEvent($event, slotData.appointments[0])\"\n (dblclick)=\"handleAppointmentEvent($event, slotData.appointments[0])\"\n (contextmenu)=\"handleAppointmentEvent($event, slotData.appointments[0])\"\n [title]=\"slotData.appointments[0].title\"\n class=\"ax-scheduler-header-week-appointment\"\n [style.color]=\"slotData.appointments[0].textColor\"\n [style.background-color]=\"slotData.appointments[0].backgroundColor\"\n >\n <ax-title class=\"ax-scheduler-truncate\">{{ slotData.appointments[0].title }}</ax-title>\n </div>\n }\n @if (slotData.appointments.length > 1) {\n <div #moreAppointments class=\"ax-scheduler-appointment-badge\">+{{ slotData.appointments.length - 1 }}</div>\n <ax-popover [target]=\"moreAppointments\" [placement]=\"'bottom'\">\n <div class=\"ax-overlay-pane ax-scheduler-popover\" [class.ax-state-readonly]=\"readonly()\">\n @for (appointment of slotData.appointments; track appointment.key; let first = $first) {\n @if (!first) {\n <div\n (click)=\"handleAppointmentEvent($event, appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n [title]=\"appointment.title\"\n [class.ax-draggable]=\"draggable()\"\n class=\"ax-scheduler-popover-appointment\"\n [style.color]=\"appointment.textColor\"\n [style.background-color]=\"appointment.backgroundColor\"\n >\n <ax-title class=\"ax-scheduler-truncate\">{{ appointment.title }}</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.key) {\n <div\n (click)=\"handleAppointmentEvent($event, appt.appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, appt.appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, appt.appointment)\"\n [title]=\"appt.appointment.title\"\n [class.ax-draggable]=\"draggable()\"\n [style.height]=\"appt.layoutHeight\"\n class=\"ax-scheduler-week-appointment\"\n [style.color]=\"appt.appointment.textColor\"\n [style.inset-block-start]=\"appt.layoutTop\"\n [style.inset-inline-start]=\"appt.layoutLeft\"\n [style.background-color]=\"appt.appointment.backgroundColor\"\n >\n <ax-title class=\"ax-scheduler-truncate\">{{ appt.appointment.title }}</ax-title>\n <ax-subtitle>\n {{ appt.appointment.startDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }} -\n {{ appt.appointment.endDate | 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 #actionButton class=\"ax-scheduler-appointment-badge\">+{{ badge.count }}</div>\n <!-- The Popover -->\n <ax-popover [target]=\"actionButton\" [placement]=\"'bottom'\">\n <div class=\"ax-overlay-pane ax-scheduler-popover\">\n @for (appointment of badge.hiddenAppointments; track appointment.key) {\n <div\n (click)=\"handleAppointmentEvent($event, appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n [title]=\"appointment.title\"\n [class.ax-draggable]=\"draggable()\"\n [style.color]=\"appointment.textColor\"\n class=\"ax-scheduler-popover-appointment\"\n [style.background-color]=\"appointment.backgroundColor\"\n >\n <ax-title class=\"ax-scheduler-truncate\">{{ appointment.title }}</ax-title>\n <ax-subtitle>\n {{ appointment.startDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }} -\n {{ appointment.endDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\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.getTime()) {\n <td\n (click)=\"handleSingleSlotEvent($event, time, day, 0)\"\n (dblclick)=\"handleSingleSlotEvent($event, time, day, 0)\"\n (contextmenu)=\"handleSingleSlotEvent($event, time, day, 0)\"\n ></td>\n }\n </tr>\n <tr>\n @for (day of daysArray(); track day.date.getTime()) {\n <td\n (click)=\"handleSingleSlotEvent($event, time, day, 1)\"\n (dblclick)=\"handleSingleSlotEvent($event, time, day, 1)\"\n (contextmenu)=\"handleSingleSlotEvent($event, time, day, 1)\"\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;height:1.5rem;cursor:pointer;font-size:.75rem;align-items:center;border-radius:9999px;justify-content:center;width:1.5rem!important;color:rgba(var(--ax-sys-color-on-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface))}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{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:100%;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:flex;align-items:center;flex-direction:column;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-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-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-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-scheduler-week-header-date-day-char{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:calc(100% - 2rem);color:rgba(var(--ax-sys-color-on-primary-surface));border-radius:calc(var(--ax-sys-border-radius) / 2);background-color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-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;width:calc(14.2857142857% - 2rem);color:rgba(var(--ax-sys-color-on-primary-surface));border-radius:calc(var(--ax-sys-border-radius) / 2);background-color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-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))}\n"], dependencies: [{ kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "pipe", type: AXFormatPipe, name: "format" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
1912
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXSchedulerWeekViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
1913
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", 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 }, calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, endHour: { classPropertyName: "endHour", publicName: "endHour", isSignal: true, isRequired: true, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: true, transformFunction: null }, startHour: { classPropertyName: "startHour", publicName: "startHour", isSignal: true, isRequired: true, transformFunction: null }, appointments: { classPropertyName: "appointments", publicName: "appointments", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { slotClickedInternal: "slotClickedInternal", slotDblClickedInternal: "slotDblClickedInternal", slotRightClickedInternal: "slotRightClickedInternal", appointmentClickedInternal: "appointmentClickedInternal", appointmentDblClickedInternal: "appointmentDblClickedInternal", appointmentRightClickedInternal: "appointmentRightClickedInternal", onAppointmentDropInternal: "onAppointmentDropInternal" }, host: { properties: { "class.ax-state-readonly": "this.isReadonly" } }, 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.getTime()) {\n <div class=\"ax-scheduler-week-header-date-day\" [class.ax-today]=\"isToday(day)\">\n <span class=\"ax-scheduler-week-header-date-day-char\">\n {{ day | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n </span>\n <span class=\"ax-scheduler-week-header-date-day-num\">\n {{ day | 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\">{{ '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 [dragElementClone]=\"true\"\n [dragDisabled]=\"!draggable() || slotData.appointments[0].readonly || readonly()\"\n [dragData]=\"slotData.appointments[0]\"\n (click)=\"handleAppointmentEvent($event, slotData.appointments[0])\"\n (dblclick)=\"handleAppointmentEvent($event, slotData.appointments[0])\"\n (contextmenu)=\"handleAppointmentEvent($event, slotData.appointments[0])\"\n [title]=\"slotData.appointments[0].title\"\n class=\"ax-scheduler-header-week-appointment\"\n [style.color]=\"slotData.appointments[0].textColor\"\n [style.background-color]=\"slotData.appointments[0].backgroundColor\"\n >\n <ax-title class=\"ax-scheduler-truncate\">{{ slotData.appointments[0].title }}</ax-title>\n </div>\n }\n @if (slotData.appointments.length > 1) {\n <div #moreAppointments class=\"ax-scheduler-appointment-badge\">+{{ slotData.appointments.length - 1 }}</div>\n <ax-popover [target]=\"moreAppointments\" [placement]=\"'bottom'\">\n <div class=\"ax-overlay-pane ax-scheduler-popover\" [class.ax-state-readonly]=\"readonly()\">\n @for (appointment of slotData.appointments; track appointment.key; let first = $first) {\n @if (!first) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"appointment\"\n [dragElementClone]=\"true\"\n [dragDisabled]=\"!draggable() || appointment.readonly || readonly()\"\n (click)=\"handleAppointmentEvent($event, appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n [title]=\"appointment.title\"\n class=\"ax-scheduler-popover-appointment\"\n [style.color]=\"appointment.textColor\"\n [style.background-color]=\"appointment.backgroundColor\"\n >\n <ax-title class=\"ax-scheduler-truncate\">{{ appointment.title }}</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.key) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragElementClone]=\"true\"\n [dragDisabled]=\"!draggable() || appt.appointment.readonly || readonly()\"\n [dragData]=\"appt.appointment\"\n (click)=\"handleAppointmentEvent($event, appt.appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, appt.appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, appt.appointment)\"\n [title]=\"appt.appointment.title\"\n [style.height]=\"appt.layoutHeight\"\n class=\"ax-scheduler-week-appointment\"\n [style.color]=\"appt.appointment.textColor\"\n [style.inset-block-start]=\"appt.layoutTop\"\n [style.inset-inline-start]=\"appt.layoutLeft\"\n [style.background-color]=\"appt.appointment.backgroundColor\"\n >\n <ax-title class=\"ax-scheduler-truncate\">{{ appt.appointment.title }}</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 #actionButton class=\"ax-scheduler-appointment-badge\">+{{ badge.count }}</div>\n <!-- The Popover -->\n <ax-popover [target]=\"actionButton\" [placement]=\"'bottom'\">\n <div class=\"ax-overlay-pane ax-scheduler-popover\">\n @for (appointment of badge.hiddenAppointments; track appointment.key) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"appointment\"\n [dragElementClone]=\"true\"\n [dragDisabled]=\"!draggable() || appointment.readonly || readonly()\"\n (click)=\"handleAppointmentEvent($event, appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n [title]=\"appointment.title\"\n [style.color]=\"appointment.textColor\"\n class=\"ax-scheduler-popover-appointment\"\n [style.background-color]=\"appointment.backgroundColor\"\n >\n <ax-title class=\"ax-scheduler-truncate\">{{ appointment.title }}</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.getTime()) {\n <td\n axDropZone\n #zone=\"axDropZone\"\n [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n (onElementDrop)=\"handleSingleDayDrop($event, time, day, 0)\"\n (click)=\"handleSingleSlotEvent($event, time, day, 0)\"\n (dblclick)=\"handleSingleSlotEvent($event, time, day, 0)\"\n (contextmenu)=\"handleSingleSlotEvent($event, time, day, 0)\"\n ></td>\n }\n </tr>\n <tr>\n @for (day of daysArray(); track day.date.getTime()) {\n <td\n axDropZone\n #zone2=\"axDropZone\"\n [class.ax-scheduler-slot-hovered]=\"zone2.isHovered()\"\n (onElementDrop)=\"handleSingleDayDrop($event, time, day, 1)\"\n (click)=\"handleSingleSlotEvent($event, time, day, 1)\"\n (dblclick)=\"handleSingleSlotEvent($event, time, day, 1)\"\n (contextmenu)=\"handleSingleSlotEvent($event, time, day, 1)\"\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;height:1.5rem;cursor:pointer;font-size:.75rem;align-items:center;border-radius:9999px;justify-content:center;width:1.5rem!important;color:rgba(var(--ax-sys-color-on-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface))}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{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:100%;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:flex;align-items:center;flex-direction:column;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-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-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-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-scheduler-week-header-date-day-char{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:calc(100% - 2rem);color:rgba(var(--ax-sys-color-on-primary-surface));border-radius:calc(var(--ax-sys-border-radius) / 2);background-color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-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;width:calc(14.2857142857% - 2rem);color:rgba(var(--ax-sys-color-on-primary-surface));border-radius:calc(var(--ax-sys-border-radius) / 2);background-color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-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))}\n"], dependencies: [{ kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "pipe", type: AXFormatPipe, name: "format" }, { kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["dragData", "dragDisabled", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragCursor", "dragBoundary"], outputs: ["dragPositionChanged"] }, { kind: "directive", type: AXDropZoneDirective, selector: "[axDropZone]", inputs: ["dropZoneGroup"], outputs: ["onElementDrop", "onElementHover"], exportAs: ["axDropZone"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
1393
1914
  }
1394
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXSchedulerWeekViewComponent, decorators: [{
1915
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXSchedulerWeekViewComponent, decorators: [{
1395
1916
  type: Component,
1396
- args: [{ selector: 'ax-scheduler-week-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXDecoratorGenericComponent, AsyncPipe, AXTranslatorPipe, AXPopoverComponent, AXFormatPipe], 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.getTime()) {\n <div class=\"ax-scheduler-week-header-date-day\" [class.ax-today]=\"isToday(day)\">\n <span class=\"ax-scheduler-week-header-date-day-char\">\n {{ day | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n </span>\n <span class=\"ax-scheduler-week-header-date-day-num\">\n {{ day | 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\">{{ '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 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 (click)=\"handleAppointmentEvent($event, slotData.appointments[0])\"\n (dblclick)=\"handleAppointmentEvent($event, slotData.appointments[0])\"\n (contextmenu)=\"handleAppointmentEvent($event, slotData.appointments[0])\"\n [title]=\"slotData.appointments[0].title\"\n class=\"ax-scheduler-header-week-appointment\"\n [style.color]=\"slotData.appointments[0].textColor\"\n [style.background-color]=\"slotData.appointments[0].backgroundColor\"\n >\n <ax-title class=\"ax-scheduler-truncate\">{{ slotData.appointments[0].title }}</ax-title>\n </div>\n }\n @if (slotData.appointments.length > 1) {\n <div #moreAppointments class=\"ax-scheduler-appointment-badge\">+{{ slotData.appointments.length - 1 }}</div>\n <ax-popover [target]=\"moreAppointments\" [placement]=\"'bottom'\">\n <div class=\"ax-overlay-pane ax-scheduler-popover\" [class.ax-state-readonly]=\"readonly()\">\n @for (appointment of slotData.appointments; track appointment.key; let first = $first) {\n @if (!first) {\n <div\n (click)=\"handleAppointmentEvent($event, appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n [title]=\"appointment.title\"\n [class.ax-draggable]=\"draggable()\"\n class=\"ax-scheduler-popover-appointment\"\n [style.color]=\"appointment.textColor\"\n [style.background-color]=\"appointment.backgroundColor\"\n >\n <ax-title class=\"ax-scheduler-truncate\">{{ appointment.title }}</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.key) {\n <div\n (click)=\"handleAppointmentEvent($event, appt.appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, appt.appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, appt.appointment)\"\n [title]=\"appt.appointment.title\"\n [class.ax-draggable]=\"draggable()\"\n [style.height]=\"appt.layoutHeight\"\n class=\"ax-scheduler-week-appointment\"\n [style.color]=\"appt.appointment.textColor\"\n [style.inset-block-start]=\"appt.layoutTop\"\n [style.inset-inline-start]=\"appt.layoutLeft\"\n [style.background-color]=\"appt.appointment.backgroundColor\"\n >\n <ax-title class=\"ax-scheduler-truncate\">{{ appt.appointment.title }}</ax-title>\n <ax-subtitle>\n {{ appt.appointment.startDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }} -\n {{ appt.appointment.endDate | 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 #actionButton class=\"ax-scheduler-appointment-badge\">+{{ badge.count }}</div>\n <!-- The Popover -->\n <ax-popover [target]=\"actionButton\" [placement]=\"'bottom'\">\n <div class=\"ax-overlay-pane ax-scheduler-popover\">\n @for (appointment of badge.hiddenAppointments; track appointment.key) {\n <div\n (click)=\"handleAppointmentEvent($event, appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n [title]=\"appointment.title\"\n [class.ax-draggable]=\"draggable()\"\n [style.color]=\"appointment.textColor\"\n class=\"ax-scheduler-popover-appointment\"\n [style.background-color]=\"appointment.backgroundColor\"\n >\n <ax-title class=\"ax-scheduler-truncate\">{{ appointment.title }}</ax-title>\n <ax-subtitle>\n {{ appointment.startDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }} -\n {{ appointment.endDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\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.getTime()) {\n <td\n (click)=\"handleSingleSlotEvent($event, time, day, 0)\"\n (dblclick)=\"handleSingleSlotEvent($event, time, day, 0)\"\n (contextmenu)=\"handleSingleSlotEvent($event, time, day, 0)\"\n ></td>\n }\n </tr>\n <tr>\n @for (day of daysArray(); track day.date.getTime()) {\n <td\n (click)=\"handleSingleSlotEvent($event, time, day, 1)\"\n (dblclick)=\"handleSingleSlotEvent($event, time, day, 1)\"\n (contextmenu)=\"handleSingleSlotEvent($event, time, day, 1)\"\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;height:1.5rem;cursor:pointer;font-size:.75rem;align-items:center;border-radius:9999px;justify-content:center;width:1.5rem!important;color:rgba(var(--ax-sys-color-on-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface))}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{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:100%;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:flex;align-items:center;flex-direction:column;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-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-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-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-scheduler-week-header-date-day-char{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:calc(100% - 2rem);color:rgba(var(--ax-sys-color-on-primary-surface));border-radius:calc(var(--ax-sys-border-radius) / 2);background-color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-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;width:calc(14.2857142857% - 2rem);color:rgba(var(--ax-sys-color-on-primary-surface));border-radius:calc(var(--ax-sys-border-radius) / 2);background-color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-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))}\n"] }]
1917
+ args: [{ selector: 'ax-scheduler-week-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
1918
+ AXDecoratorGenericComponent,
1919
+ AsyncPipe,
1920
+ AXTranslatorPipe,
1921
+ AXPopoverComponent,
1922
+ AXFormatPipe,
1923
+ AXDragDirective,
1924
+ AXDropZoneDirective,
1925
+ ], 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.getTime()) {\n <div class=\"ax-scheduler-week-header-date-day\" [class.ax-today]=\"isToday(day)\">\n <span class=\"ax-scheduler-week-header-date-day-char\">\n {{ day | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n </span>\n <span class=\"ax-scheduler-week-header-date-day-num\">\n {{ day | 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\">{{ '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 [dragElementClone]=\"true\"\n [dragDisabled]=\"!draggable() || slotData.appointments[0].readonly || readonly()\"\n [dragData]=\"slotData.appointments[0]\"\n (click)=\"handleAppointmentEvent($event, slotData.appointments[0])\"\n (dblclick)=\"handleAppointmentEvent($event, slotData.appointments[0])\"\n (contextmenu)=\"handleAppointmentEvent($event, slotData.appointments[0])\"\n [title]=\"slotData.appointments[0].title\"\n class=\"ax-scheduler-header-week-appointment\"\n [style.color]=\"slotData.appointments[0].textColor\"\n [style.background-color]=\"slotData.appointments[0].backgroundColor\"\n >\n <ax-title class=\"ax-scheduler-truncate\">{{ slotData.appointments[0].title }}</ax-title>\n </div>\n }\n @if (slotData.appointments.length > 1) {\n <div #moreAppointments class=\"ax-scheduler-appointment-badge\">+{{ slotData.appointments.length - 1 }}</div>\n <ax-popover [target]=\"moreAppointments\" [placement]=\"'bottom'\">\n <div class=\"ax-overlay-pane ax-scheduler-popover\" [class.ax-state-readonly]=\"readonly()\">\n @for (appointment of slotData.appointments; track appointment.key; let first = $first) {\n @if (!first) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"appointment\"\n [dragElementClone]=\"true\"\n [dragDisabled]=\"!draggable() || appointment.readonly || readonly()\"\n (click)=\"handleAppointmentEvent($event, appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n [title]=\"appointment.title\"\n class=\"ax-scheduler-popover-appointment\"\n [style.color]=\"appointment.textColor\"\n [style.background-color]=\"appointment.backgroundColor\"\n >\n <ax-title class=\"ax-scheduler-truncate\">{{ appointment.title }}</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.key) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragElementClone]=\"true\"\n [dragDisabled]=\"!draggable() || appt.appointment.readonly || readonly()\"\n [dragData]=\"appt.appointment\"\n (click)=\"handleAppointmentEvent($event, appt.appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, appt.appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, appt.appointment)\"\n [title]=\"appt.appointment.title\"\n [style.height]=\"appt.layoutHeight\"\n class=\"ax-scheduler-week-appointment\"\n [style.color]=\"appt.appointment.textColor\"\n [style.inset-block-start]=\"appt.layoutTop\"\n [style.inset-inline-start]=\"appt.layoutLeft\"\n [style.background-color]=\"appt.appointment.backgroundColor\"\n >\n <ax-title class=\"ax-scheduler-truncate\">{{ appt.appointment.title }}</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 #actionButton class=\"ax-scheduler-appointment-badge\">+{{ badge.count }}</div>\n <!-- The Popover -->\n <ax-popover [target]=\"actionButton\" [placement]=\"'bottom'\">\n <div class=\"ax-overlay-pane ax-scheduler-popover\">\n @for (appointment of badge.hiddenAppointments; track appointment.key) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"appointment\"\n [dragElementClone]=\"true\"\n [dragDisabled]=\"!draggable() || appointment.readonly || readonly()\"\n (click)=\"handleAppointmentEvent($event, appointment)\"\n (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n [title]=\"appointment.title\"\n [style.color]=\"appointment.textColor\"\n class=\"ax-scheduler-popover-appointment\"\n [style.background-color]=\"appointment.backgroundColor\"\n >\n <ax-title class=\"ax-scheduler-truncate\">{{ appointment.title }}</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.getTime()) {\n <td\n axDropZone\n #zone=\"axDropZone\"\n [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n (onElementDrop)=\"handleSingleDayDrop($event, time, day, 0)\"\n (click)=\"handleSingleSlotEvent($event, time, day, 0)\"\n (dblclick)=\"handleSingleSlotEvent($event, time, day, 0)\"\n (contextmenu)=\"handleSingleSlotEvent($event, time, day, 0)\"\n ></td>\n }\n </tr>\n <tr>\n @for (day of daysArray(); track day.date.getTime()) {\n <td\n axDropZone\n #zone2=\"axDropZone\"\n [class.ax-scheduler-slot-hovered]=\"zone2.isHovered()\"\n (onElementDrop)=\"handleSingleDayDrop($event, time, day, 1)\"\n (click)=\"handleSingleSlotEvent($event, time, day, 1)\"\n (dblclick)=\"handleSingleSlotEvent($event, time, day, 1)\"\n (contextmenu)=\"handleSingleSlotEvent($event, time, day, 1)\"\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;height:1.5rem;cursor:pointer;font-size:.75rem;align-items:center;border-radius:9999px;justify-content:center;width:1.5rem!important;color:rgba(var(--ax-sys-color-on-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface))}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{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:100%;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:flex;align-items:center;flex-direction:column;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-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-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-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-scheduler-week-header-date-day-char{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:calc(100% - 2rem);color:rgba(var(--ax-sys-color-on-primary-surface));border-radius:calc(var(--ax-sys-border-radius) / 2);background-color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-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;width:calc(14.2857142857% - 2rem);color:rgba(var(--ax-sys-color-on-primary-surface));border-radius:calc(var(--ax-sys-border-radius) / 2);background-color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-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))}\n"] }]
1397
1926
  }], propDecorators: { isReadonly: [{
1398
1927
  type: HostBinding,
1399
1928
  args: ['class.ax-state-readonly']
@@ -1422,21 +1951,17 @@ class AXSchedulerComponent extends MXBaseComponent {
1422
1951
  this.calendar = input();
1423
1952
  this.calendarType = linkedSignal(() => this.calendar() ?? this.localeService.activeProfile().calendar.system);
1424
1953
  this.startingDate = input(new Date());
1425
- this.currentDate = linkedSignal(() => this.calendarService
1426
- .create(this.startingDate(), this.calendarType())
1427
- .set('hour', 0)
1428
- .set('minute', 0)
1429
- .set('second', 0));
1430
- this.draggable = signal(false); // TODO
1954
+ this.currentDate = linkedSignal(() => this.calendarService.create(this.startingDate(), this.calendarType()).startOf('day'));
1431
1955
  this.rtl = signal(false);
1432
1956
  this.isLoading = signal(false);
1433
1957
  this.isFullScreen = signal(false);
1434
1958
  this.viewsDataSource = signal([]);
1435
1959
  this.oldDate = signal(this.calendarService.create(new Date(), this.calendarType()));
1436
- this.endHour = input(23);
1960
+ this.endHour = input(24);
1437
1961
  this.startHour = input(8);
1438
1962
  this.keyField = input('id');
1439
1963
  this.readonly = input(false);
1964
+ this.draggable = input(true);
1440
1965
  this.titleField = input('title');
1441
1966
  this.allDayField = input('allDay');
1442
1967
  this.allowFullScreen = input(true);
@@ -1463,6 +1988,7 @@ class AXSchedulerComponent extends MXBaseComponent {
1463
1988
  this.onSlotClicked = output();
1464
1989
  this.onSlotDblClicked = output();
1465
1990
  this.onSlotRightClick = output();
1991
+ this.onAppointmentDrop = output();
1466
1992
  this.onAppointmentClicked = output();
1467
1993
  this.onAppointmentDblClicked = output();
1468
1994
  this.onAppointmentRightClick = output();
@@ -1650,6 +2176,9 @@ class AXSchedulerComponent extends MXBaseComponent {
1650
2176
  handleAppointmentRightClickInternal(eventData) {
1651
2177
  this.onAppointmentRightClick.emit(eventData);
1652
2178
  }
2179
+ handleAppointmentDropInternal(eventData) {
2180
+ this.onAppointmentDrop.emit(eventData);
2181
+ }
1653
2182
  ngOnInit() {
1654
2183
  super.ngOnInit();
1655
2184
  this.calendarService.calendarChanges$.pipe(this.unsubscriber.takeUntilDestroy).subscribe(() => {
@@ -1760,10 +2289,10 @@ class AXSchedulerComponent extends MXBaseComponent {
1760
2289
  this.getHostElement().classList.remove('ax-full-screen-container');
1761
2290
  this.isFullScreen.set(!this.isFullScreen());
1762
2291
  }
1763
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXSchedulerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
1764
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: AXSchedulerComponent, isStandalone: true, selector: "ax-scheduler", inputs: { calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, startingDate: { classPropertyName: "startingDate", publicName: "startingDate", isSignal: true, isRequired: false, transformFunction: null }, endHour: { classPropertyName: "endHour", publicName: "endHour", isSignal: true, isRequired: false, transformFunction: null }, startHour: { classPropertyName: "startHour", publicName: "startHour", isSignal: true, isRequired: false, transformFunction: null }, keyField: { classPropertyName: "keyField", publicName: "keyField", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, titleField: { classPropertyName: "titleField", publicName: "titleField", isSignal: true, isRequired: false, transformFunction: null }, allDayField: { classPropertyName: "allDayField", publicName: "allDayField", isSignal: true, isRequired: false, transformFunction: null }, allowFullScreen: { classPropertyName: "allowFullScreen", publicName: "allowFullScreen", isSignal: true, isRequired: false, transformFunction: null }, endDateField: { classPropertyName: "endDateField", publicName: "endDateField", isSignal: true, isRequired: false, transformFunction: null }, multiDayViewDaysCount: { classPropertyName: "multiDayViewDaysCount", publicName: "multiDayViewDaysCount", isSignal: true, isRequired: false, transformFunction: null }, readonlyField: { classPropertyName: "readonlyField", publicName: "readonlyField", isSignal: true, isRequired: false, transformFunction: null }, startDateField: { classPropertyName: "startDateField", publicName: "startDateField", isSignal: true, isRequired: false, transformFunction: null }, textColorField: { classPropertyName: "textColorField", publicName: "textColorField", isSignal: true, isRequired: false, transformFunction: null }, descriptionField: { classPropertyName: "descriptionField", publicName: "descriptionField", isSignal: true, isRequired: false, transformFunction: null }, backgroundColorField: { classPropertyName: "backgroundColorField", publicName: "backgroundColorField", 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", onSlotClicked: "onSlotClicked", onSlotDblClicked: "onSlotDblClicked", onSlotRightClick: "onSlotRightClick", onAppointmentClicked: "onAppointmentClicked", onAppointmentDblClicked: "onAppointmentDblClicked", onAppointmentRightClick: "onAppointmentRightClick" }, providers: [AXUnsubscriber], viewQueries: [{ propertyName: "viewModeSelectbox", first: true, predicate: AXSelectBoxComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-scheduler-container\">\n <div class=\"ax-scheduler-header\">\n <div class=\"ax-scheduler-date\">\n <ax-button look=\"blank\" (onClick)=\"prevClick()\">\n <ax-icon\n class=\"ax-icon ax-text-xl\"\n [ngClass]=\"{\n 'ax-icon-chevron-left': !rtl(),\n 'ax-icon-chevron-right': rtl(),\n }\"\n ></ax-icon>\n </ax-button>\n <ax-button look=\"blank\" [text]=\"currentDateText()\" #date></ax-button>\n <ax-button look=\"blank\" (onClick)=\"nextClick()\">\n <ax-icon\n class=\"ax-icon ax-text-xl\"\n [ngClass]=\"{\n 'ax-icon-chevron-right': !rtl(),\n 'ax-icon-chevron-left': rtl(),\n }\"\n ></ax-icon>\n </ax-button>\n <ax-popover [target]=\"date\" [placement]=\"'bottom'\">\n <div class=\"ax-overlay-pane\">\n <ax-calendar\n [type]=\"calendarType()\"\n [depth]=\"calendarDepth()\"\n [ngModel]=\"currentDate()\"\n (ngModelChange)=\"calendarDateChanged($event)\"\n ></ax-calendar>\n </div>\n </ax-popover>\n </div>\n <div class=\"ax-scheduler-actions\">\n <ax-select-box\n [dropdownWidth]=\"200\"\n [ngModel]=\"selectedView()\"\n [dataSource]=\"viewsDataSource()\"\n (onValueChanged)=\"viewChanged($event)\"\n ></ax-select-box>\n\n @if (allowFullScreen()) {\n <ax-button look=\"blank\" (onClick)=\"handleFullScreen()\">\n <ax-icon>\n <i\n class=\"fa-solid fa-expand\"\n [ngClass]=\"{ 'fa-compress': isFullScreen(), 'fa-expand': !isFullScreen() }\"\n ></i>\n </ax-icon>\n </ax-button>\n }\n </div>\n </div>\n <div class=\"ax-scheduler-views-container\">\n @switch (selectedView()) {\n @case ('day') {\n <ax-scheduler-day-view\n [endHour]=\"endHour()\"\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [startHour]=\"startHour()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [appointments]=\"viewAppointments()\"\n (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n (slotRightClickedInternal)=\"handleSlotRightClickInternal($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 [endHour]=\"endHour()\"\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [startHour]=\"startHour()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [appointments]=\"viewAppointments()\"\n (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n ></ax-scheduler-week-view>\n }\n @case ('month') {\n <ax-scheduler-month-view\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [firstDayOfWeek]=\"firstDayOfWeek()\"\n [appointments]=\"viewAppointments()\"\n (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n ></ax-scheduler-month-view>\n }\n @case ('timelineDay') {\n <ax-scheduler-timeline-day-view\n [endHour]=\"endHour()\"\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [startHour]=\"startHour()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [appointments]=\"viewAppointments()\"\n (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n >\n </ax-scheduler-timeline-day-view>\n }\n @case ('timelineMultiDay') {\n <ax-scheduler-timeline-multi-day-view\n [endHour]=\"endHour()\"\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [startHour]=\"startHour()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [appointments]=\"viewAppointments()\"\n [daysCount]=\"multiDayViewDaysCount()\"\n (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n >\n </ax-scheduler-timeline-multi-day-view>\n }\n @case ('timelineMonth') {\n <ax-scheduler-timeline-month-view\n [endHour]=\"endHour()\"\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [startHour]=\"startHour()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [appointments]=\"viewAppointments()\"\n (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n (slotRightClickedInternal)=\"handleSlotRightClickInternal($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 [endHour]=\"endHour()\"\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [startHour]=\"startHour()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [appointments]=\"viewAppointments()\"\n (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n (slotRightClickedInternal)=\"handleSlotRightClickInternal($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: ["ax-scheduler{--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;width:100%;height:100%;display:block;overflow:hidden;-webkit-user-select:none;user-select:none;border-width:1px;font-size:.875rem;border-radius:.75rem;background-color:inherit}ax-scheduler.ax-full-screen-container{top:0;left:0;z-index:50;width:100vw;height:100vh;position:fixed}ax-scheduler .ax-scheduler-container{height:100%;display:flex;flex-direction:column;background-color:inherit}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-draggable{cursor:grab}ax-scheduler .ax-scheduler-container .ax-draggable:active{cursor:grabbing}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-overlay-pane.ax-scheduler-popover{gap:.25rem;display:grid;overflow:auto;padding:.25rem;max-height:10rem;font-size:.875rem;border-radius:.5rem}.ax-overlay-pane.ax-scheduler-popover.ax-scheduler-month-popover-appointment{font-size:.75rem}.ax-overlay-pane.ax-scheduler-popover:not(.ax-state-readonly) .ax-scheduler-popover-appointment{cursor:pointer}.ax-overlay-pane.ax-scheduler-popover .ax-scheduler-popover-appointment{display:flex;overflow:hidden;-webkit-user-select:none;user-select:none;flex-direction:column;padding-block:.25rem;padding-inline:.5rem;color:rgba(var(--ax-sys-color-on-primary-surface));border-radius:calc(var(--ax-sys-border-radius) / 2);background-color:rgba(var(--ax-sys-color-primary-surface))}.ax-overlay-pane.ax-scheduler-popover .ax-scheduler-popover-appointment ax-subtitle{font-size:.75rem}.ax-overlay-pane.ax-scheduler-popover .ax-scheduler-popover-appointment .ax-scheduler-truncate{display:block;overflow:hidden;text-wrap:nowrap;text-overflow:ellipsis}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXCalendarComponent, selector: "ax-calendar", inputs: ["rtl", "readonly", "value", "name", "disabled", "depth", "activeView", "minValue", "maxValue", "disabledDates", "holidayDates", "type", "cellTemplate", "cellClass", "showNavigation", "count", "id"], outputs: ["onOptionChanged", "valueChange", "onValueChanged", "minValueChange", "maxValueChange", "onBlur", "onFocus", "depthChange", "typeChange", "activeViewChange", "disabledDatesChange", "holidayDatesChange", "onNavigate", "onSlotClick", "countChange"] }, { kind: "component", type: AXSchedulerDayViewComponent, selector: "ax-scheduler-day-view", inputs: ["readonly", "draggable", "calendar", "endHour", "date", "startHour", "appointments"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal"] }, { kind: "component", type: AXSchedulerWeekViewComponent, selector: "ax-scheduler-week-view", inputs: ["readonly", "draggable", "calendar", "endHour", "date", "startHour", "appointments"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal"] }, { kind: "component", type: AXSchedulerMonthViewComponent, selector: "ax-scheduler-month-view", inputs: ["readonly", "draggable", "calendar", "date", "appointments", "firstDayOfWeek"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal"] }, { kind: "component", type: AXSchedulerTimelineDayViewComponent, selector: "ax-scheduler-timeline-day-view", inputs: ["readonly", "draggable", "calendar", "endHour", "date", "startHour", "appointments"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal"] }, { kind: "component", type: AXSchedulerTimelineMultiDayViewComponent, selector: "ax-scheduler-timeline-multi-day-view", inputs: ["daysCount", "readonly", "draggable", "calendar", "endHour", "date", "startHour", "appointments"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal"] }, { kind: "component", type: AXSchedulerTimelineMonthViewComponent, selector: "ax-scheduler-timeline-month-view", inputs: ["readonly", "draggable", "calendar", "endHour", "date", "startHour", "appointments"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal"] }, { kind: "component", type: AXSchedulerAgendaViewComponent, selector: "ax-scheduler-agenda-view", inputs: ["daysCount", "readonly", "draggable", "calendar", "endHour", "date", "startHour", "appointments"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
2292
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXSchedulerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
2293
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", 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 }, endHour: { classPropertyName: "endHour", publicName: "endHour", isSignal: true, isRequired: false, transformFunction: null }, startHour: { classPropertyName: "startHour", publicName: "startHour", isSignal: true, isRequired: false, transformFunction: null }, keyField: { classPropertyName: "keyField", publicName: "keyField", 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 }, titleField: { classPropertyName: "titleField", publicName: "titleField", isSignal: true, isRequired: false, transformFunction: null }, allDayField: { classPropertyName: "allDayField", publicName: "allDayField", isSignal: true, isRequired: false, transformFunction: null }, allowFullScreen: { classPropertyName: "allowFullScreen", publicName: "allowFullScreen", isSignal: true, isRequired: false, transformFunction: null }, endDateField: { classPropertyName: "endDateField", publicName: "endDateField", isSignal: true, isRequired: false, transformFunction: null }, multiDayViewDaysCount: { classPropertyName: "multiDayViewDaysCount", publicName: "multiDayViewDaysCount", isSignal: true, isRequired: false, transformFunction: null }, readonlyField: { classPropertyName: "readonlyField", publicName: "readonlyField", isSignal: true, isRequired: false, transformFunction: null }, startDateField: { classPropertyName: "startDateField", publicName: "startDateField", isSignal: true, isRequired: false, transformFunction: null }, textColorField: { classPropertyName: "textColorField", publicName: "textColorField", isSignal: true, isRequired: false, transformFunction: null }, descriptionField: { classPropertyName: "descriptionField", publicName: "descriptionField", isSignal: true, isRequired: false, transformFunction: null }, backgroundColorField: { classPropertyName: "backgroundColorField", publicName: "backgroundColorField", 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", onSlotClicked: "onSlotClicked", onSlotDblClicked: "onSlotDblClicked", onSlotRightClick: "onSlotRightClick", onAppointmentDrop: "onAppointmentDrop", onAppointmentClicked: "onAppointmentClicked", onAppointmentDblClicked: "onAppointmentDblClicked", onAppointmentRightClick: "onAppointmentRightClick" }, providers: [AXUnsubscriber], viewQueries: [{ propertyName: "viewModeSelectbox", first: true, predicate: AXSelectBoxComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-scheduler-container\">\n <div class=\"ax-scheduler-header\">\n <div class=\"ax-scheduler-date\">\n <ax-button look=\"blank\" (onClick)=\"prevClick()\">\n <ax-icon\n class=\"ax-icon ax-text-xl\"\n [ngClass]=\"{\n 'ax-icon-chevron-left': !rtl(),\n 'ax-icon-chevron-right': rtl(),\n }\"\n ></ax-icon>\n </ax-button>\n <ax-button look=\"blank\" [text]=\"currentDateText()\" #date></ax-button>\n <ax-button look=\"blank\" (onClick)=\"nextClick()\">\n <ax-icon\n class=\"ax-icon ax-text-xl\"\n [ngClass]=\"{\n 'ax-icon-chevron-right': !rtl(),\n 'ax-icon-chevron-left': rtl(),\n }\"\n ></ax-icon>\n </ax-button>\n <ax-popover [target]=\"date\" [placement]=\"'bottom'\">\n <div class=\"ax-overlay-pane\">\n <ax-calendar\n [type]=\"calendarType()\"\n [depth]=\"calendarDepth()\"\n [ngModel]=\"currentDate()\"\n (ngModelChange)=\"calendarDateChanged($event)\"\n ></ax-calendar>\n </div>\n </ax-popover>\n </div>\n <div class=\"ax-scheduler-actions\">\n <ax-select-box\n [dropdownWidth]=\"200\"\n [ngModel]=\"selectedView()\"\n [dataSource]=\"viewsDataSource()\"\n (onValueChanged)=\"viewChanged($event)\"\n ></ax-select-box>\n\n @if (allowFullScreen()) {\n <ax-button look=\"blank\" (onClick)=\"handleFullScreen()\">\n <ax-icon>\n <i\n class=\"fa-solid fa-expand\"\n [ngClass]=\"{ 'fa-compress': isFullScreen(), 'fa-expand': !isFullScreen() }\"\n ></i>\n </ax-icon>\n </ax-button>\n }\n </div>\n </div>\n <div class=\"ax-scheduler-views-container\">\n @switch (selectedView()) {\n @case ('day') {\n <ax-scheduler-day-view\n [endHour]=\"endHour()\"\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [startHour]=\"startHour()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [appointments]=\"viewAppointments()\"\n (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n ></ax-scheduler-day-view>\n }\n @case ('week') {\n <ax-scheduler-week-view\n [endHour]=\"endHour()\"\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [startHour]=\"startHour()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [appointments]=\"viewAppointments()\"\n (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n ></ax-scheduler-week-view>\n }\n @case ('month') {\n <ax-scheduler-month-view\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [firstDayOfWeek]=\"firstDayOfWeek()\"\n [appointments]=\"viewAppointments()\"\n (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n ></ax-scheduler-month-view>\n }\n @case ('timelineDay') {\n <ax-scheduler-timeline-day-view\n [endHour]=\"endHour()\"\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [startHour]=\"startHour()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [appointments]=\"viewAppointments()\"\n (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n >\n </ax-scheduler-timeline-day-view>\n }\n @case ('timelineMultiDay') {\n <ax-scheduler-timeline-multi-day-view\n [endHour]=\"endHour()\"\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [startHour]=\"startHour()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [appointments]=\"viewAppointments()\"\n [daysCount]=\"multiDayViewDaysCount()\"\n (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n >\n </ax-scheduler-timeline-multi-day-view>\n }\n @case ('timelineMonth') {\n <ax-scheduler-timeline-month-view\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [appointments]=\"viewAppointments()\"\n (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n >\n </ax-scheduler-timeline-month-view>\n }\n @case ('agenda') {\n <ax-scheduler-agenda-view\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [appointments]=\"viewAppointments()\"\n (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n >\n </ax-scheduler-agenda-view>\n }\n }\n </div>\n</div>\n", styles: [":root{--ax-comp-scheduler-width: 57.5rem;--ax-comp-scheduler-basic-view-blocks-height: 3rem;--ax-comp-scheduler-basic-view-blocks-width: 3.5rem;--ax-comp-scheduler-timeline-view-blocks-width: 20rem;--ax-comp-scheduler-timeline-view-blocks-height: 3rem}ax-scheduler{width:100%;height:100%;display:block;overflow:hidden;-webkit-user-select:none;user-select:none;border-width:1px;font-size:.875rem;border-radius:.75rem;background-color:inherit}ax-scheduler.ax-full-screen-container{top:0;left:0;z-index:50;width:100vw;height:100vh;position:fixed}ax-scheduler .ax-scheduler-container{height:100%;display:flex;flex-direction:column;background-color:inherit}ax-scheduler .ax-scheduler-container .ax-scheduler-header{display:flex;padding:1rem;overflow-x:auto;overflow-y:hidden;align-items:center;border-bottom-width:1px;justify-content:space-between}ax-scheduler .ax-scheduler-container .ax-scheduler-header .ax-scheduler-date{display:flex;min-width:20.5rem;align-items:center;justify-content:space-between}ax-scheduler .ax-scheduler-container .ax-scheduler-header .ax-scheduler-date p{margin:0;font-size:1rem;min-width:10rem;font-weight:500;text-align:center}ax-scheduler .ax-scheduler-container .ax-scheduler-actions{gap:.75rem;display:flex;align-items:center;justify-content:center}ax-scheduler .ax-scheduler-container .ax-scheduler-truncate{display:block;overflow:hidden;text-wrap:nowrap;text-overflow:ellipsis}ax-scheduler .ax-scheduler-container ax-subtitle{font-size:.75rem}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container{height:100%;overflow:auto;background-color:inherit}ax-scheduler .ax-scheduler-slot-hovered{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg, var(--ax-sys-color-primary-surface), .1))}.ax-overlay-pane.ax-scheduler-popover{gap:.25rem;display:grid;overflow:auto;padding:.25rem;max-height:10rem;font-size:.875rem;border-radius:.5rem}.ax-overlay-pane.ax-scheduler-popover.ax-scheduler-month-popover-appointment{font-size:.75rem}.ax-overlay-pane.ax-scheduler-popover:not(.ax-state-readonly) .ax-scheduler-popover-appointment{cursor:pointer}.ax-overlay-pane.ax-scheduler-popover .ax-scheduler-popover-appointment{display:flex;overflow:hidden;-webkit-user-select:none;user-select:none;flex-direction:column;padding-block:.25rem;padding-inline:.5rem;color:rgba(var(--ax-sys-color-on-primary-surface));border-radius:calc(var(--ax-sys-border-radius) / 2);background-color:rgba(var(--ax-sys-color-primary-surface))}.ax-overlay-pane.ax-scheduler-popover .ax-scheduler-popover-appointment ax-subtitle{font-size:.75rem}.ax-overlay-pane.ax-scheduler-popover .ax-scheduler-popover-appointment .ax-scheduler-truncate{display:block;overflow:hidden;text-wrap:nowrap;text-overflow:ellipsis}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXCalendarComponent, selector: "ax-calendar", inputs: ["rtl", "readonly", "value", "name", "disabled", "depth", "activeView", "minValue", "maxValue", "disabledDates", "holidayDates", "type", "cellTemplate", "cellClass", "showNavigation", "count", "id"], outputs: ["onOptionChanged", "valueChange", "onValueChanged", "minValueChange", "maxValueChange", "onBlur", "onFocus", "depthChange", "typeChange", "activeViewChange", "disabledDatesChange", "holidayDatesChange", "onNavigate", "onSlotClick", "countChange"] }, { kind: "component", type: AXSchedulerDayViewComponent, selector: "ax-scheduler-day-view", inputs: ["readonly", "draggable", "calendar", "endHour", "date", "startHour", "appointments"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onAppointmentDropInternal"] }, { kind: "component", type: AXSchedulerWeekViewComponent, selector: "ax-scheduler-week-view", inputs: ["readonly", "draggable", "calendar", "endHour", "date", "startHour", "appointments"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onAppointmentDropInternal"] }, { kind: "component", type: AXSchedulerMonthViewComponent, selector: "ax-scheduler-month-view", inputs: ["readonly", "draggable", "calendar", "date", "firstDayOfWeek", "appointments"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onAppointmentDropInternal"] }, { kind: "component", type: AXSchedulerTimelineDayViewComponent, selector: "ax-scheduler-timeline-day-view", inputs: ["readonly", "draggable", "calendar", "endHour", "date", "startHour", "appointments"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onAppointmentDropInternal"] }, { kind: "component", type: AXSchedulerTimelineMultiDayViewComponent, selector: "ax-scheduler-timeline-multi-day-view", inputs: ["daysCount", "readonly", "draggable", "calendar", "endHour", "date", "startHour", "appointments"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onAppointmentDropInternal"] }, { kind: "component", type: AXSchedulerTimelineMonthViewComponent, selector: "ax-scheduler-timeline-month-view", inputs: ["readonly", "draggable", "calendar", "date", "appointments"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onAppointmentDropInternal"] }, { kind: "component", type: AXSchedulerAgendaViewComponent, selector: "ax-scheduler-agenda-view", inputs: ["daysCount", "readonly", "draggable", "calendar", "date", "appointments"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onAppointmentDropInternal"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
1765
2294
  }
1766
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXSchedulerComponent, decorators: [{
2295
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXSchedulerComponent, decorators: [{
1767
2296
  type: Component,
1768
2297
  args: [{ selector: 'ax-scheduler', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
1769
2298
  FormsModule,
@@ -1780,7 +2309,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImpor
1780
2309
  AXSchedulerTimelineMultiDayViewComponent,
1781
2310
  AXSchedulerTimelineMonthViewComponent,
1782
2311
  AXSchedulerAgendaViewComponent,
1783
- ], providers: [AXUnsubscriber], template: "<div class=\"ax-scheduler-container\">\n <div class=\"ax-scheduler-header\">\n <div class=\"ax-scheduler-date\">\n <ax-button look=\"blank\" (onClick)=\"prevClick()\">\n <ax-icon\n class=\"ax-icon ax-text-xl\"\n [ngClass]=\"{\n 'ax-icon-chevron-left': !rtl(),\n 'ax-icon-chevron-right': rtl(),\n }\"\n ></ax-icon>\n </ax-button>\n <ax-button look=\"blank\" [text]=\"currentDateText()\" #date></ax-button>\n <ax-button look=\"blank\" (onClick)=\"nextClick()\">\n <ax-icon\n class=\"ax-icon ax-text-xl\"\n [ngClass]=\"{\n 'ax-icon-chevron-right': !rtl(),\n 'ax-icon-chevron-left': rtl(),\n }\"\n ></ax-icon>\n </ax-button>\n <ax-popover [target]=\"date\" [placement]=\"'bottom'\">\n <div class=\"ax-overlay-pane\">\n <ax-calendar\n [type]=\"calendarType()\"\n [depth]=\"calendarDepth()\"\n [ngModel]=\"currentDate()\"\n (ngModelChange)=\"calendarDateChanged($event)\"\n ></ax-calendar>\n </div>\n </ax-popover>\n </div>\n <div class=\"ax-scheduler-actions\">\n <ax-select-box\n [dropdownWidth]=\"200\"\n [ngModel]=\"selectedView()\"\n [dataSource]=\"viewsDataSource()\"\n (onValueChanged)=\"viewChanged($event)\"\n ></ax-select-box>\n\n @if (allowFullScreen()) {\n <ax-button look=\"blank\" (onClick)=\"handleFullScreen()\">\n <ax-icon>\n <i\n class=\"fa-solid fa-expand\"\n [ngClass]=\"{ 'fa-compress': isFullScreen(), 'fa-expand': !isFullScreen() }\"\n ></i>\n </ax-icon>\n </ax-button>\n }\n </div>\n </div>\n <div class=\"ax-scheduler-views-container\">\n @switch (selectedView()) {\n @case ('day') {\n <ax-scheduler-day-view\n [endHour]=\"endHour()\"\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [startHour]=\"startHour()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [appointments]=\"viewAppointments()\"\n (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n (slotRightClickedInternal)=\"handleSlotRightClickInternal($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 [endHour]=\"endHour()\"\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [startHour]=\"startHour()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [appointments]=\"viewAppointments()\"\n (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n ></ax-scheduler-week-view>\n }\n @case ('month') {\n <ax-scheduler-month-view\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [firstDayOfWeek]=\"firstDayOfWeek()\"\n [appointments]=\"viewAppointments()\"\n (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n ></ax-scheduler-month-view>\n }\n @case ('timelineDay') {\n <ax-scheduler-timeline-day-view\n [endHour]=\"endHour()\"\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [startHour]=\"startHour()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [appointments]=\"viewAppointments()\"\n (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n >\n </ax-scheduler-timeline-day-view>\n }\n @case ('timelineMultiDay') {\n <ax-scheduler-timeline-multi-day-view\n [endHour]=\"endHour()\"\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [startHour]=\"startHour()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [appointments]=\"viewAppointments()\"\n [daysCount]=\"multiDayViewDaysCount()\"\n (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n >\n </ax-scheduler-timeline-multi-day-view>\n }\n @case ('timelineMonth') {\n <ax-scheduler-timeline-month-view\n [endHour]=\"endHour()\"\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [startHour]=\"startHour()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [appointments]=\"viewAppointments()\"\n (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n (slotRightClickedInternal)=\"handleSlotRightClickInternal($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 [endHour]=\"endHour()\"\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [startHour]=\"startHour()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [appointments]=\"viewAppointments()\"\n (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n (slotRightClickedInternal)=\"handleSlotRightClickInternal($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: ["ax-scheduler{--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;width:100%;height:100%;display:block;overflow:hidden;-webkit-user-select:none;user-select:none;border-width:1px;font-size:.875rem;border-radius:.75rem;background-color:inherit}ax-scheduler.ax-full-screen-container{top:0;left:0;z-index:50;width:100vw;height:100vh;position:fixed}ax-scheduler .ax-scheduler-container{height:100%;display:flex;flex-direction:column;background-color:inherit}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-draggable{cursor:grab}ax-scheduler .ax-scheduler-container .ax-draggable:active{cursor:grabbing}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-overlay-pane.ax-scheduler-popover{gap:.25rem;display:grid;overflow:auto;padding:.25rem;max-height:10rem;font-size:.875rem;border-radius:.5rem}.ax-overlay-pane.ax-scheduler-popover.ax-scheduler-month-popover-appointment{font-size:.75rem}.ax-overlay-pane.ax-scheduler-popover:not(.ax-state-readonly) .ax-scheduler-popover-appointment{cursor:pointer}.ax-overlay-pane.ax-scheduler-popover .ax-scheduler-popover-appointment{display:flex;overflow:hidden;-webkit-user-select:none;user-select:none;flex-direction:column;padding-block:.25rem;padding-inline:.5rem;color:rgba(var(--ax-sys-color-on-primary-surface));border-radius:calc(var(--ax-sys-border-radius) / 2);background-color:rgba(var(--ax-sys-color-primary-surface))}.ax-overlay-pane.ax-scheduler-popover .ax-scheduler-popover-appointment ax-subtitle{font-size:.75rem}.ax-overlay-pane.ax-scheduler-popover .ax-scheduler-popover-appointment .ax-scheduler-truncate{display:block;overflow:hidden;text-wrap:nowrap;text-overflow:ellipsis}\n"] }]
2312
+ ], providers: [AXUnsubscriber], template: "<div class=\"ax-scheduler-container\">\n <div class=\"ax-scheduler-header\">\n <div class=\"ax-scheduler-date\">\n <ax-button look=\"blank\" (onClick)=\"prevClick()\">\n <ax-icon\n class=\"ax-icon ax-text-xl\"\n [ngClass]=\"{\n 'ax-icon-chevron-left': !rtl(),\n 'ax-icon-chevron-right': rtl(),\n }\"\n ></ax-icon>\n </ax-button>\n <ax-button look=\"blank\" [text]=\"currentDateText()\" #date></ax-button>\n <ax-button look=\"blank\" (onClick)=\"nextClick()\">\n <ax-icon\n class=\"ax-icon ax-text-xl\"\n [ngClass]=\"{\n 'ax-icon-chevron-right': !rtl(),\n 'ax-icon-chevron-left': rtl(),\n }\"\n ></ax-icon>\n </ax-button>\n <ax-popover [target]=\"date\" [placement]=\"'bottom'\">\n <div class=\"ax-overlay-pane\">\n <ax-calendar\n [type]=\"calendarType()\"\n [depth]=\"calendarDepth()\"\n [ngModel]=\"currentDate()\"\n (ngModelChange)=\"calendarDateChanged($event)\"\n ></ax-calendar>\n </div>\n </ax-popover>\n </div>\n <div class=\"ax-scheduler-actions\">\n <ax-select-box\n [dropdownWidth]=\"200\"\n [ngModel]=\"selectedView()\"\n [dataSource]=\"viewsDataSource()\"\n (onValueChanged)=\"viewChanged($event)\"\n ></ax-select-box>\n\n @if (allowFullScreen()) {\n <ax-button look=\"blank\" (onClick)=\"handleFullScreen()\">\n <ax-icon>\n <i\n class=\"fa-solid fa-expand\"\n [ngClass]=\"{ 'fa-compress': isFullScreen(), 'fa-expand': !isFullScreen() }\"\n ></i>\n </ax-icon>\n </ax-button>\n }\n </div>\n </div>\n <div class=\"ax-scheduler-views-container\">\n @switch (selectedView()) {\n @case ('day') {\n <ax-scheduler-day-view\n [endHour]=\"endHour()\"\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [startHour]=\"startHour()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [appointments]=\"viewAppointments()\"\n (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n ></ax-scheduler-day-view>\n }\n @case ('week') {\n <ax-scheduler-week-view\n [endHour]=\"endHour()\"\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [startHour]=\"startHour()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [appointments]=\"viewAppointments()\"\n (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n ></ax-scheduler-week-view>\n }\n @case ('month') {\n <ax-scheduler-month-view\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [firstDayOfWeek]=\"firstDayOfWeek()\"\n [appointments]=\"viewAppointments()\"\n (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n ></ax-scheduler-month-view>\n }\n @case ('timelineDay') {\n <ax-scheduler-timeline-day-view\n [endHour]=\"endHour()\"\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [startHour]=\"startHour()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [appointments]=\"viewAppointments()\"\n (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n >\n </ax-scheduler-timeline-day-view>\n }\n @case ('timelineMultiDay') {\n <ax-scheduler-timeline-multi-day-view\n [endHour]=\"endHour()\"\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [startHour]=\"startHour()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [appointments]=\"viewAppointments()\"\n [daysCount]=\"multiDayViewDaysCount()\"\n (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n >\n </ax-scheduler-timeline-multi-day-view>\n }\n @case ('timelineMonth') {\n <ax-scheduler-timeline-month-view\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [appointments]=\"viewAppointments()\"\n (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n >\n </ax-scheduler-timeline-month-view>\n }\n @case ('agenda') {\n <ax-scheduler-agenda-view\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [appointments]=\"viewAppointments()\"\n (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n >\n </ax-scheduler-agenda-view>\n }\n }\n </div>\n</div>\n", styles: [":root{--ax-comp-scheduler-width: 57.5rem;--ax-comp-scheduler-basic-view-blocks-height: 3rem;--ax-comp-scheduler-basic-view-blocks-width: 3.5rem;--ax-comp-scheduler-timeline-view-blocks-width: 20rem;--ax-comp-scheduler-timeline-view-blocks-height: 3rem}ax-scheduler{width:100%;height:100%;display:block;overflow:hidden;-webkit-user-select:none;user-select:none;border-width:1px;font-size:.875rem;border-radius:.75rem;background-color:inherit}ax-scheduler.ax-full-screen-container{top:0;left:0;z-index:50;width:100vw;height:100vh;position:fixed}ax-scheduler .ax-scheduler-container{height:100%;display:flex;flex-direction:column;background-color:inherit}ax-scheduler .ax-scheduler-container .ax-scheduler-header{display:flex;padding:1rem;overflow-x:auto;overflow-y:hidden;align-items:center;border-bottom-width:1px;justify-content:space-between}ax-scheduler .ax-scheduler-container .ax-scheduler-header .ax-scheduler-date{display:flex;min-width:20.5rem;align-items:center;justify-content:space-between}ax-scheduler .ax-scheduler-container .ax-scheduler-header .ax-scheduler-date p{margin:0;font-size:1rem;min-width:10rem;font-weight:500;text-align:center}ax-scheduler .ax-scheduler-container .ax-scheduler-actions{gap:.75rem;display:flex;align-items:center;justify-content:center}ax-scheduler .ax-scheduler-container .ax-scheduler-truncate{display:block;overflow:hidden;text-wrap:nowrap;text-overflow:ellipsis}ax-scheduler .ax-scheduler-container ax-subtitle{font-size:.75rem}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container{height:100%;overflow:auto;background-color:inherit}ax-scheduler .ax-scheduler-slot-hovered{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg, var(--ax-sys-color-primary-surface), .1))}.ax-overlay-pane.ax-scheduler-popover{gap:.25rem;display:grid;overflow:auto;padding:.25rem;max-height:10rem;font-size:.875rem;border-radius:.5rem}.ax-overlay-pane.ax-scheduler-popover.ax-scheduler-month-popover-appointment{font-size:.75rem}.ax-overlay-pane.ax-scheduler-popover:not(.ax-state-readonly) .ax-scheduler-popover-appointment{cursor:pointer}.ax-overlay-pane.ax-scheduler-popover .ax-scheduler-popover-appointment{display:flex;overflow:hidden;-webkit-user-select:none;user-select:none;flex-direction:column;padding-block:.25rem;padding-inline:.5rem;color:rgba(var(--ax-sys-color-on-primary-surface));border-radius:calc(var(--ax-sys-border-radius) / 2);background-color:rgba(var(--ax-sys-color-primary-surface))}.ax-overlay-pane.ax-scheduler-popover .ax-scheduler-popover-appointment ax-subtitle{font-size:.75rem}.ax-overlay-pane.ax-scheduler-popover .ax-scheduler-popover-appointment .ax-scheduler-truncate{display:block;overflow:hidden;text-wrap:nowrap;text-overflow:ellipsis}\n"] }]
1784
2313
  }] });
1785
2314
 
1786
2315
  const COMPONENT = [
@@ -1791,8 +2320,8 @@ const COMPONENT = [
1791
2320
  AXSchedulerTimelineDayViewComponent,
1792
2321
  ];
1793
2322
  class AXSchedulerModule {
1794
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXSchedulerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
1795
- static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.9", ngImport: i0, type: AXSchedulerModule, imports: [AXSchedulerComponent,
2323
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXSchedulerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
2324
+ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.10", ngImport: i0, type: AXSchedulerModule, imports: [AXSchedulerComponent,
1796
2325
  AXSchedulerDayViewComponent,
1797
2326
  AXSchedulerWeekViewComponent,
1798
2327
  AXSchedulerMonthViewComponent,
@@ -1801,9 +2330,9 @@ class AXSchedulerModule {
1801
2330
  AXSchedulerWeekViewComponent,
1802
2331
  AXSchedulerMonthViewComponent,
1803
2332
  AXSchedulerTimelineDayViewComponent] }); }
1804
- static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXSchedulerModule, imports: [COMPONENT] }); }
2333
+ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXSchedulerModule, imports: [COMPONENT] }); }
1805
2334
  }
1806
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXSchedulerModule, decorators: [{
2335
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXSchedulerModule, decorators: [{
1807
2336
  type: NgModule,
1808
2337
  args: [{
1809
2338
  imports: [...COMPONENT],