@apexara/ng-components 1.0.6-test.1 → 1.0.6-test.3

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 (34) hide show
  1. package/fesm2022/apexara-ng-components-carousel.mjs +5 -5
  2. package/fesm2022/apexara-ng-components-carousel.mjs.map +1 -1
  3. package/fesm2022/apexara-ng-components-checkbox.mjs +19 -15
  4. package/fesm2022/apexara-ng-components-checkbox.mjs.map +1 -1
  5. package/fesm2022/apexara-ng-components-datepicker.mjs +168 -130
  6. package/fesm2022/apexara-ng-components-datepicker.mjs.map +1 -1
  7. package/fesm2022/apexara-ng-components-drawer.mjs +9 -11
  8. package/fesm2022/apexara-ng-components-drawer.mjs.map +1 -1
  9. package/fesm2022/apexara-ng-components-image.mjs +3 -5
  10. package/fesm2022/apexara-ng-components-image.mjs.map +1 -1
  11. package/fesm2022/apexara-ng-components-input.mjs +19 -19
  12. package/fesm2022/apexara-ng-components-input.mjs.map +1 -1
  13. package/fesm2022/apexara-ng-components-listbox.mjs +41 -33
  14. package/fesm2022/apexara-ng-components-listbox.mjs.map +1 -1
  15. package/fesm2022/apexara-ng-components-select.mjs +109 -82
  16. package/fesm2022/apexara-ng-components-select.mjs.map +1 -1
  17. package/fesm2022/apexara-ng-components-snackbar.mjs +5 -7
  18. package/fesm2022/apexara-ng-components-snackbar.mjs.map +1 -1
  19. package/fesm2022/apexara-ng-components-table.mjs +121 -100
  20. package/fesm2022/apexara-ng-components-table.mjs.map +1 -1
  21. package/fesm2022/apexara-ng-components-textarea.mjs +20 -17
  22. package/fesm2022/apexara-ng-components-textarea.mjs.map +1 -1
  23. package/package.json +1 -1
  24. package/types/apexara-ng-components-carousel.d.ts +1 -1
  25. package/types/apexara-ng-components-checkbox.d.ts +6 -8
  26. package/types/apexara-ng-components-datepicker.d.ts +4 -6
  27. package/types/apexara-ng-components-drawer.d.ts +3 -4
  28. package/types/apexara-ng-components-image.d.ts +2 -3
  29. package/types/apexara-ng-components-input.d.ts +6 -8
  30. package/types/apexara-ng-components-listbox.d.ts +7 -8
  31. package/types/apexara-ng-components-select.d.ts +12 -10
  32. package/types/apexara-ng-components-snackbar.d.ts +2 -2
  33. package/types/apexara-ng-components-table.d.ts +19 -18
  34. package/types/apexara-ng-components-textarea.d.ts +6 -8
package/fesm2022/apexara-ng-components-datepicker.mjs CHANGED
@@ -1,6 +1,7 @@
1
1
  import * as i0 from '@angular/core';
2
- import { EventEmitter, Output, Input, ChangeDetectionStrategy, Component, Injectable, ViewChild, HostListener } from '@angular/core';
3
- import { FormsModule, ReactiveFormsModule } from '@angular/forms';
2
+ import { EventEmitter, signal, Output, Input, Component, Injectable, ViewChild, HostListener } from '@angular/core';
3
+ import { FormsModule, ReactiveFormsModule, TouchedChangeEvent } from '@angular/forms';
4
+ import { filter } from 'rxjs';
4
5
  import * as i1$1 from '@apexara/ng-components/services';
5
6
  import { MobileOS } from '@apexara/ng-components/services';
6
7
  import { ApexButtonComponent } from '@apexara/ng-components/button';
@@ -48,9 +49,15 @@ class CalendarBody {
48
49
  this.dragStarted = new EventEmitter();
49
50
  /** Emits the date at the conclusion of a drag, or null if mouse was not released on a date. */
50
51
  this.dragEnded = new EventEmitter();
52
+ /** The number of blank cells to put at the beginning for the first row. */
53
+ this.firstRowOffset = signal(0, ...(ngDevMode ? [{ debugName: "firstRowOffset" }] : []));
54
+ /** Padding for the individual date cells. */
55
+ this.cellPadding = signal('', ...(ngDevMode ? [{ debugName: "cellPadding" }] : []));
51
56
  this.id = `calendar-body-${calendarBodyId++}`;
52
57
  this.startDateLabelId = `${this.id}-start-date`;
53
58
  this.endDateLabelId = `${this.id}-end-date`;
59
+ /** Width of an individual cell. */
60
+ this.cellWidth = signal('', ...(ngDevMode ? [{ debugName: "cellWidth" }] : []));
54
61
  /**
55
62
  * Used to focus the active cell after change detection has run.
56
63
  */
@@ -196,13 +203,13 @@ class CalendarBody {
196
203
  const columnChanges = changes['numCols'];
197
204
  const { rows, numCols } = this;
198
205
  if (changes['rows'] || columnChanges) {
199
- this.firstRowOffset = rows && rows.length && rows[0].length ? numCols - rows[0].length : 0;
206
+ this.firstRowOffset.set(rows && rows.length && rows[0].length ? numCols - rows[0].length : 0);
200
207
  }
201
- if (changes['cellAspectRatio'] || columnChanges || !this.cellPadding) {
202
- this.cellPadding = `${(50 * this.cellAspectRatio) / numCols}%`;
208
+ if (changes['cellAspectRatio'] || columnChanges || !this.cellPadding()) {
209
+ this.cellPadding.set(`${(50 * this.cellAspectRatio) / numCols}%`);
203
210
  }
204
- if (columnChanges || !this.cellWidth) {
205
- this.cellWidth = `${100 / numCols}%`;
211
+ if (columnChanges || !this.cellWidth()) {
212
+ this.cellWidth.set(`${100 / numCols}%`);
206
213
  }
207
214
  }
208
215
  ngAfterViewChecked() {
@@ -249,7 +256,7 @@ class CalendarBody {
249
256
  let cellNumber = rowIndex * this.numCols + colIndex;
250
257
  // Account for the fact that the first row may not have as many cells.
251
258
  if (rowIndex) {
252
- cellNumber -= this.firstRowOffset;
259
+ cellNumber -= this.firstRowOffset();
253
260
  }
254
261
  return cellNumber == this.activeCell;
255
262
  }
@@ -364,13 +371,13 @@ class CalendarBody {
364
371
  return document.elementFromPoint(touchLocation.clientX, touchLocation.clientY);
365
372
  }
366
373
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: CalendarBody, deps: [{ token: i0.NgZone }, { token: i1.Platform }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
367
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: CalendarBody, isStandalone: true, selector: "[calendar-body]", inputs: { label: "label", rows: "rows", todayValue: "todayValue", startValue: "startValue", endValue: "endValue", labelMinRequiredCells: "labelMinRequiredCells", numCols: "numCols", activeCell: "activeCell", isRange: "isRange", cellAspectRatio: "cellAspectRatio", comparisonStart: "comparisonStart", comparisonEnd: "comparisonEnd", previewStart: "previewStart", previewEnd: "previewEnd", startDateAccessibleName: "startDateAccessibleName", endDateAccessibleName: "endDateAccessibleName" }, outputs: { selectedValueChange: "selectedValueChange", previewChange: "previewChange", activeDateChange: "activeDateChange", dragStarted: "dragStarted", dragEnded: "dragEnded" }, host: { classAttribute: "calendar-body" }, usesOnChanges: true, ngImport: i0, template: "@if (firstRowOffset < labelMinRequiredCells) {\n <tr aria-hidden=\"true\">\n <td class=\"calendar-body-label\"\n [attr.colspan]=\"numCols\"\n [style.paddingTop]=\"cellPadding\"\n [style.paddingBottom]=\"cellPadding\">\n {{ label }}\n </td>\n </tr>\n}\n\n@for (row of rows; track trackRow(row); let rowIndex = $index) {\n <tr role=\"row\">\n @if (rowIndex === 0 && firstRowOffset) {\n <td\n class=\"calendar-body-label\"\n [attr.colspan]=\"firstRowOffset\"\n [style.paddingTop]=\"cellPadding\"\n [style.paddingBottom]=\"cellPadding\">\n {{ firstRowOffset >= labelMinRequiredCells ? label : ''}}\n </td>\n }\n\n @for (item of row; track item; let colIndex = $index) {\n <td\n role=\"gridcell\"\n class=\"calendar-body-cell-container\"\n [style.width]=\"cellWidth\"\n [style.paddingTop]=\"cellPadding\"\n [style.paddingBottom]=\"cellPadding\"\n [attr.data-row]=\"rowIndex\"\n [attr.data-col]=\"colIndex\"\n >\n <button\n type=\"button\"\n class=\"calendar-body-cell\"\n [tabindex]=\"isActiveCell(rowIndex, colIndex) ? 0 : -1\"\n [class.disabled]=\"!item.enabled\"\n [class.selected]=\"isSelected(item.compareValue)\"\n [class.active]=\"isActiveCell(rowIndex, colIndex)\"\n [class.today]=\"todayValue === item.compareValue\"\n [class.range-start]=\"isRangeStart(item.compareValue)\"\n [class.range-end]=\"isRangeEnd(item.compareValue)\"\n [class.in-range]=\"isCellInRange(item.compareValue)\"\n [class.in-preview]=\"isInPreview(item.compareValue)\"\n [class.preview-start]=\"isPreviewStart(item.compareValue)\"\n [class.preview-end]=\"isPreviewEnd(item.compareValue)\"\n [attr.aria-label]=\"item.ariaLabel\"\n [attr.aria-disabled]=\"!item.enabled || null\"\n [attr.aria-pressed]=\"isSelected(item.compareValue)\"\n [attr.aria-current]=\"todayValue === item.compareValue ? 'date' : null\"\n [attr.aria-describedby]=\"getDescribedby(item.compareValue)\"\n (click)=\"cellClicked(item, $event)\"\n (focus)=\"emitActiveDateChange(item, $event)\">\n <span class=\"calendar-body-cell-content focus-indicator\">\n {{ item.displayValue }}\n </span>\n\n <span class=\"calendar-body-cell-preview\" aria-hidden=\"true\"></span>\n </button>\n </td>\n }\n </tr>\n}\n\n<span [id]=\"startDateLabelId\" class=\"calendar-body-hidden-label\">{{ startDateAccessibleName }}</span>\n\n<span [id]=\"endDateLabelId\" class=\"calendar-body-hidden-label\">{{ endDateAccessibleName }}</span>\n", styles: ["tr{height:40px}.calendar-body-label{height:0;line-height:0;text-align:start}.calendar-body-cell{width:100%;height:100%;position:absolute;top:0;left:0;outline:none;text-align:center;color:var(--apex-calendar-body-cell-color, #0B1222);background:var(--apex-datepicker-calendar-body-cell-background-color, none);border:var(--apex-calendar-body-cell-border, none);margin:0}.calendar-body-hidden-label{display:none}.calendar-body-cell-container{position:relative;height:0;line-height:0}.calendar-body-cell:before,.calendar-body-cell:after,.calendar-body-cell-preview{height:100%;width:100%;display:block;position:absolute;top:0;left:0;content:\"\";box-sizing:border-box;z-index:0}.calendar-body-cell{border-radius:4px;transition:border-radius .1s ease-out}.calendar-body-cell:hover{color:var(--apex-calendar-body-cell-hover-color, white);background-color:var(--apex-calendar-body-cell-hover-background-color, #FFD2C6)}.today{border:var(--apex-calendar-body-today-cell-border, 1px solid #FFD2C6)}.in-preview,.calendar-body-cell.in-preview,.calendar-body-cell.in-range.in-preview{background-color:var(--apex-calendar-body-cell-in-preview-background-color, #FFD2C6);border-left:0px;border-right:0px;border-radius:0;border-top:var(--apex-calendar-body-cell-in-preview-border, 1px dashed #F96138);border-bottom:var(--apex-calendar-body-cell-in-preview-border, 1px dashed #F96138)}.calendar-body-cell.in-preview.preview-end{border-top-right-radius:20px;border-bottom-right-radius:20px;border-right:var(--apex-calendar-body-cell-preview-end-border, 1px dashed #F96138);background-color:var(--apex-calendar-body-cell-preview-end-background-color, #FFD2C6);color:var(--apex-calendar-body-cell-preview-end-color, #FFFFFF)}.calendar-body-cell.in-preview.preview-start{border-top-left-radius:20px;border-bottom-left-radius:20px;border-left:var(--apex-calendar-body-cell-preview-start-border, 1px dashed #F96138);background-color:var(--apex-calendar-body-cell-preview-start-background-color, #FFD2C6);color:var(--apex-calendar-body-cell-preview-start-color, #FFFFFF)}.calendar-body-cell:hover .in-preview,.calendar-body-cell:hover .in-range{border-radius:0 20px 20px 0/0px 20px 20px 0px}.active:focus{background-color:var(--apex-calendar-body-active-cell-background-color, #FFD2C6)}.calendar-body-cell.in-range{background-color:var(--apex-calendar-body-cell-in-range-background-color, #FFF2EF);border-left:0px;border-right:0px;border-radius:0;border-top:var(--apex-calendar-body-cell-in-range-border, 1px solid #F96138);border-bottom:var(--apex-calendar-body-cell-in-range-border, 1px solid #F96138)}.in-range.active{background-color:var(--apex-calendar-body-cell-in-range-active-background-color, #FFD2C6)}.in-range.range-start{border-top-left-radius:20px;border-bottom-left-radius:20px;color:var(--apex-calendar-body-cell-range-start-color, #FFFFFF);border-left:var(--apex-calendar-body-cell-range-start-border, 1px solid #F96138);background-color:var(--apex-calendar-body-cell-range-start-background-color, #F96138)}.in-range.range-end{border-top-right-radius:20px;border-bottom-right-radius:20px;color:var(--apex-calendar-body-cell-range-end-color, #FFFFFF);border-right:var(--apex-datepicker-calendar-body-cell-end-start-border, 1px solid #F96138);background-color:var(--apex-datepicker-calendar-body-cell-end-start-background-color, #F96138)}.calendar-body-cell.in-range.range-end,.calendar-body-cell.in-range.range-start{background-color:var(--apex-datepicker-calendar-body-cell-end-start-background-color, #F96138)}.active.in-range.range-end,.active.in-range.range-start{background-color:var(--apex-calendar-body-cell-active-in-range-start-end-background-color, #FFD2C6)}.calendar-body-cell.selected{color:var(--apex-calendar-body-cell-selected-color, #FFFFFF);background-color:var(--apex-calendar-body-cell-selected-background-color, #F96138)}.disabled{cursor:none;border:none;border-radius:0;pointer-events:none;background-color:var(--apex-calendar-body-cell-disabled-background-color, #E0DFDE)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
374
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: CalendarBody, isStandalone: true, selector: "[calendar-body]", inputs: { label: "label", rows: "rows", todayValue: "todayValue", startValue: "startValue", endValue: "endValue", labelMinRequiredCells: "labelMinRequiredCells", numCols: "numCols", activeCell: "activeCell", isRange: "isRange", cellAspectRatio: "cellAspectRatio", comparisonStart: "comparisonStart", comparisonEnd: "comparisonEnd", previewStart: "previewStart", previewEnd: "previewEnd", startDateAccessibleName: "startDateAccessibleName", endDateAccessibleName: "endDateAccessibleName" }, outputs: { selectedValueChange: "selectedValueChange", previewChange: "previewChange", activeDateChange: "activeDateChange", dragStarted: "dragStarted", dragEnded: "dragEnded" }, host: { classAttribute: "calendar-body" }, usesOnChanges: true, ngImport: i0, template: "@if (firstRowOffset() < labelMinRequiredCells) {\n <tr aria-hidden=\"true\">\n <td class=\"calendar-body-label\"\n [attr.colspan]=\"numCols\"\n [style.paddingTop]=\"cellPadding()\"\n [style.paddingBottom]=\"cellPadding()\">\n {{ label }}\n </td>\n </tr>\n}\n\n@for (row of rows; track trackRow(row); let rowIndex = $index) {\n <tr role=\"row\">\n @if (rowIndex === 0 && firstRowOffset()) {\n <td\n class=\"calendar-body-label\"\n [attr.colspan]=\"firstRowOffset()\"\n [style.paddingTop]=\"cellPadding()\"\n [style.paddingBottom]=\"cellPadding()\">\n {{ firstRowOffset() >= labelMinRequiredCells ? label : ''}}\n </td>\n }\n\n @for (item of row; track item; let colIndex = $index) {\n <td\n role=\"gridcell\"\n class=\"calendar-body-cell-container\"\n [style.width]=\"cellWidth()\"\n [style.paddingTop]=\"cellPadding()\"\n [style.paddingBottom]=\"cellPadding()\"\n [attr.data-row]=\"rowIndex\"\n [attr.data-col]=\"colIndex\"\n >\n <button\n type=\"button\"\n class=\"calendar-body-cell\"\n [tabindex]=\"isActiveCell(rowIndex, colIndex) ? 0 : -1\"\n [class.disabled]=\"!item.enabled\"\n [class.selected]=\"isSelected(item.compareValue)\"\n [class.active]=\"isActiveCell(rowIndex, colIndex)\"\n [class.today]=\"todayValue === item.compareValue\"\n [class.range-start]=\"isRangeStart(item.compareValue)\"\n [class.range-end]=\"isRangeEnd(item.compareValue)\"\n [class.in-range]=\"isCellInRange(item.compareValue)\"\n [class.in-preview]=\"isInPreview(item.compareValue)\"\n [class.preview-start]=\"isPreviewStart(item.compareValue)\"\n [class.preview-end]=\"isPreviewEnd(item.compareValue)\"\n [attr.aria-label]=\"item.ariaLabel\"\n [attr.aria-disabled]=\"!item.enabled || null\"\n [attr.aria-pressed]=\"isSelected(item.compareValue)\"\n [attr.aria-current]=\"todayValue === item.compareValue ? 'date' : null\"\n [attr.aria-describedby]=\"getDescribedby(item.compareValue)\"\n (click)=\"cellClicked(item, $event)\"\n (focus)=\"emitActiveDateChange(item, $event)\">\n <span class=\"calendar-body-cell-content focus-indicator\">\n {{ item.displayValue }}\n </span>\n\n <span class=\"calendar-body-cell-preview\" aria-hidden=\"true\"></span>\n </button>\n </td>\n }\n </tr>\n}\n\n<span [id]=\"startDateLabelId\" class=\"calendar-body-hidden-label\">{{ startDateAccessibleName }}</span>\n\n<span [id]=\"endDateLabelId\" class=\"calendar-body-hidden-label\">{{ endDateAccessibleName }}</span>\n", styles: ["tr{height:40px}.calendar-body-label{height:0;line-height:0;text-align:start}.calendar-body-cell{width:100%;height:100%;position:absolute;top:0;left:0;outline:none;text-align:center;color:var(--apex-calendar-body-cell-color, #0B1222);background:var(--apex-datepicker-calendar-body-cell-background-color, none);border:var(--apex-calendar-body-cell-border, none);margin:0}.calendar-body-hidden-label{display:none}.calendar-body-cell-container{position:relative;height:0;line-height:0}.calendar-body-cell:before,.calendar-body-cell:after,.calendar-body-cell-preview{height:100%;width:100%;display:block;position:absolute;top:0;left:0;content:\"\";box-sizing:border-box;z-index:0}.calendar-body-cell{border-radius:4px;transition:border-radius .1s ease-out}.calendar-body-cell:hover{color:var(--apex-calendar-body-cell-hover-color, white);background-color:var(--apex-calendar-body-cell-hover-background-color, #FFD2C6)}.today{border:var(--apex-calendar-body-today-cell-border, 1px solid #FFD2C6)}.in-preview,.calendar-body-cell.in-preview,.calendar-body-cell.in-range.in-preview{background-color:var(--apex-calendar-body-cell-in-preview-background-color, #FFD2C6);border-left:0px;border-right:0px;border-radius:0;border-top:var(--apex-calendar-body-cell-in-preview-border, 1px dashed #F96138);border-bottom:var(--apex-calendar-body-cell-in-preview-border, 1px dashed #F96138)}.calendar-body-cell.in-preview.preview-end{border-top-right-radius:20px;border-bottom-right-radius:20px;border-right:var(--apex-calendar-body-cell-preview-end-border, 1px dashed #F96138);background-color:var(--apex-calendar-body-cell-preview-end-background-color, #FFD2C6);color:var(--apex-calendar-body-cell-preview-end-color, #FFFFFF)}.calendar-body-cell.in-preview.preview-start{border-top-left-radius:20px;border-bottom-left-radius:20px;border-left:var(--apex-calendar-body-cell-preview-start-border, 1px dashed #F96138);background-color:var(--apex-calendar-body-cell-preview-start-background-color, #FFD2C6);color:var(--apex-calendar-body-cell-preview-start-color, #FFFFFF)}.calendar-body-cell:hover .in-preview,.calendar-body-cell:hover .in-range{border-radius:0 20px 20px 0/0px 20px 20px 0px}.active:focus{background-color:var(--apex-calendar-body-active-cell-background-color, #FFD2C6)}.calendar-body-cell.in-range{background-color:var(--apex-calendar-body-cell-in-range-background-color, #FFF2EF);border-left:0px;border-right:0px;border-radius:0;border-top:var(--apex-calendar-body-cell-in-range-border, 1px solid #F96138);border-bottom:var(--apex-calendar-body-cell-in-range-border, 1px solid #F96138)}.in-range.active{background-color:var(--apex-calendar-body-cell-in-range-active-background-color, #FFD2C6)}.in-range.range-start{border-top-left-radius:20px;border-bottom-left-radius:20px;color:var(--apex-calendar-body-cell-range-start-color, #FFFFFF);border-left:var(--apex-calendar-body-cell-range-start-border, 1px solid #F96138);background-color:var(--apex-calendar-body-cell-range-start-background-color, #F96138)}.in-range.range-end{border-top-right-radius:20px;border-bottom-right-radius:20px;color:var(--apex-calendar-body-cell-range-end-color, #FFFFFF);border-right:var(--apex-datepicker-calendar-body-cell-end-start-border, 1px solid #F96138);background-color:var(--apex-datepicker-calendar-body-cell-end-start-background-color, #F96138)}.calendar-body-cell.in-range.range-end,.calendar-body-cell.in-range.range-start{background-color:var(--apex-datepicker-calendar-body-cell-end-start-background-color, #F96138)}.active.in-range.range-end,.active.in-range.range-start{background-color:var(--apex-calendar-body-cell-active-in-range-start-end-background-color, #FFD2C6)}.calendar-body-cell.selected{color:var(--apex-calendar-body-cell-selected-color, #FFFFFF);background-color:var(--apex-calendar-body-cell-selected-background-color, #F96138)}.disabled{cursor:none;border:none;border-radius:0;pointer-events:none;background-color:var(--apex-calendar-body-cell-disabled-background-color, #E0DFDE)}\n"] }); }
368
375
  }
369
376
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: CalendarBody, decorators: [{
370
377
  type: Component,
371
378
  args: [{ selector: '[calendar-body]', host: {
372
379
  'class': 'calendar-body',
373
- }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (firstRowOffset < labelMinRequiredCells) {\n <tr aria-hidden=\"true\">\n <td class=\"calendar-body-label\"\n [attr.colspan]=\"numCols\"\n [style.paddingTop]=\"cellPadding\"\n [style.paddingBottom]=\"cellPadding\">\n {{ label }}\n </td>\n </tr>\n}\n\n@for (row of rows; track trackRow(row); let rowIndex = $index) {\n <tr role=\"row\">\n @if (rowIndex === 0 && firstRowOffset) {\n <td\n class=\"calendar-body-label\"\n [attr.colspan]=\"firstRowOffset\"\n [style.paddingTop]=\"cellPadding\"\n [style.paddingBottom]=\"cellPadding\">\n {{ firstRowOffset >= labelMinRequiredCells ? label : ''}}\n </td>\n }\n\n @for (item of row; track item; let colIndex = $index) {\n <td\n role=\"gridcell\"\n class=\"calendar-body-cell-container\"\n [style.width]=\"cellWidth\"\n [style.paddingTop]=\"cellPadding\"\n [style.paddingBottom]=\"cellPadding\"\n [attr.data-row]=\"rowIndex\"\n [attr.data-col]=\"colIndex\"\n >\n <button\n type=\"button\"\n class=\"calendar-body-cell\"\n [tabindex]=\"isActiveCell(rowIndex, colIndex) ? 0 : -1\"\n [class.disabled]=\"!item.enabled\"\n [class.selected]=\"isSelected(item.compareValue)\"\n [class.active]=\"isActiveCell(rowIndex, colIndex)\"\n [class.today]=\"todayValue === item.compareValue\"\n [class.range-start]=\"isRangeStart(item.compareValue)\"\n [class.range-end]=\"isRangeEnd(item.compareValue)\"\n [class.in-range]=\"isCellInRange(item.compareValue)\"\n [class.in-preview]=\"isInPreview(item.compareValue)\"\n [class.preview-start]=\"isPreviewStart(item.compareValue)\"\n [class.preview-end]=\"isPreviewEnd(item.compareValue)\"\n [attr.aria-label]=\"item.ariaLabel\"\n [attr.aria-disabled]=\"!item.enabled || null\"\n [attr.aria-pressed]=\"isSelected(item.compareValue)\"\n [attr.aria-current]=\"todayValue === item.compareValue ? 'date' : null\"\n [attr.aria-describedby]=\"getDescribedby(item.compareValue)\"\n (click)=\"cellClicked(item, $event)\"\n (focus)=\"emitActiveDateChange(item, $event)\">\n <span class=\"calendar-body-cell-content focus-indicator\">\n {{ item.displayValue }}\n </span>\n\n <span class=\"calendar-body-cell-preview\" aria-hidden=\"true\"></span>\n </button>\n </td>\n }\n </tr>\n}\n\n<span [id]=\"startDateLabelId\" class=\"calendar-body-hidden-label\">{{ startDateAccessibleName }}</span>\n\n<span [id]=\"endDateLabelId\" class=\"calendar-body-hidden-label\">{{ endDateAccessibleName }}</span>\n", styles: ["tr{height:40px}.calendar-body-label{height:0;line-height:0;text-align:start}.calendar-body-cell{width:100%;height:100%;position:absolute;top:0;left:0;outline:none;text-align:center;color:var(--apex-calendar-body-cell-color, #0B1222);background:var(--apex-datepicker-calendar-body-cell-background-color, none);border:var(--apex-calendar-body-cell-border, none);margin:0}.calendar-body-hidden-label{display:none}.calendar-body-cell-container{position:relative;height:0;line-height:0}.calendar-body-cell:before,.calendar-body-cell:after,.calendar-body-cell-preview{height:100%;width:100%;display:block;position:absolute;top:0;left:0;content:\"\";box-sizing:border-box;z-index:0}.calendar-body-cell{border-radius:4px;transition:border-radius .1s ease-out}.calendar-body-cell:hover{color:var(--apex-calendar-body-cell-hover-color, white);background-color:var(--apex-calendar-body-cell-hover-background-color, #FFD2C6)}.today{border:var(--apex-calendar-body-today-cell-border, 1px solid #FFD2C6)}.in-preview,.calendar-body-cell.in-preview,.calendar-body-cell.in-range.in-preview{background-color:var(--apex-calendar-body-cell-in-preview-background-color, #FFD2C6);border-left:0px;border-right:0px;border-radius:0;border-top:var(--apex-calendar-body-cell-in-preview-border, 1px dashed #F96138);border-bottom:var(--apex-calendar-body-cell-in-preview-border, 1px dashed #F96138)}.calendar-body-cell.in-preview.preview-end{border-top-right-radius:20px;border-bottom-right-radius:20px;border-right:var(--apex-calendar-body-cell-preview-end-border, 1px dashed #F96138);background-color:var(--apex-calendar-body-cell-preview-end-background-color, #FFD2C6);color:var(--apex-calendar-body-cell-preview-end-color, #FFFFFF)}.calendar-body-cell.in-preview.preview-start{border-top-left-radius:20px;border-bottom-left-radius:20px;border-left:var(--apex-calendar-body-cell-preview-start-border, 1px dashed #F96138);background-color:var(--apex-calendar-body-cell-preview-start-background-color, #FFD2C6);color:var(--apex-calendar-body-cell-preview-start-color, #FFFFFF)}.calendar-body-cell:hover .in-preview,.calendar-body-cell:hover .in-range{border-radius:0 20px 20px 0/0px 20px 20px 0px}.active:focus{background-color:var(--apex-calendar-body-active-cell-background-color, #FFD2C6)}.calendar-body-cell.in-range{background-color:var(--apex-calendar-body-cell-in-range-background-color, #FFF2EF);border-left:0px;border-right:0px;border-radius:0;border-top:var(--apex-calendar-body-cell-in-range-border, 1px solid #F96138);border-bottom:var(--apex-calendar-body-cell-in-range-border, 1px solid #F96138)}.in-range.active{background-color:var(--apex-calendar-body-cell-in-range-active-background-color, #FFD2C6)}.in-range.range-start{border-top-left-radius:20px;border-bottom-left-radius:20px;color:var(--apex-calendar-body-cell-range-start-color, #FFFFFF);border-left:var(--apex-calendar-body-cell-range-start-border, 1px solid #F96138);background-color:var(--apex-calendar-body-cell-range-start-background-color, #F96138)}.in-range.range-end{border-top-right-radius:20px;border-bottom-right-radius:20px;color:var(--apex-calendar-body-cell-range-end-color, #FFFFFF);border-right:var(--apex-datepicker-calendar-body-cell-end-start-border, 1px solid #F96138);background-color:var(--apex-datepicker-calendar-body-cell-end-start-background-color, #F96138)}.calendar-body-cell.in-range.range-end,.calendar-body-cell.in-range.range-start{background-color:var(--apex-datepicker-calendar-body-cell-end-start-background-color, #F96138)}.active.in-range.range-end,.active.in-range.range-start{background-color:var(--apex-calendar-body-cell-active-in-range-start-end-background-color, #FFD2C6)}.calendar-body-cell.selected{color:var(--apex-calendar-body-cell-selected-color, #FFFFFF);background-color:var(--apex-calendar-body-cell-selected-background-color, #F96138)}.disabled{cursor:none;border:none;border-radius:0;pointer-events:none;background-color:var(--apex-calendar-body-cell-disabled-background-color, #E0DFDE)}\n"] }]
380
+ }, template: "@if (firstRowOffset() < labelMinRequiredCells) {\n <tr aria-hidden=\"true\">\n <td class=\"calendar-body-label\"\n [attr.colspan]=\"numCols\"\n [style.paddingTop]=\"cellPadding()\"\n [style.paddingBottom]=\"cellPadding()\">\n {{ label }}\n </td>\n </tr>\n}\n\n@for (row of rows; track trackRow(row); let rowIndex = $index) {\n <tr role=\"row\">\n @if (rowIndex === 0 && firstRowOffset()) {\n <td\n class=\"calendar-body-label\"\n [attr.colspan]=\"firstRowOffset()\"\n [style.paddingTop]=\"cellPadding()\"\n [style.paddingBottom]=\"cellPadding()\">\n {{ firstRowOffset() >= labelMinRequiredCells ? label : ''}}\n </td>\n }\n\n @for (item of row; track item; let colIndex = $index) {\n <td\n role=\"gridcell\"\n class=\"calendar-body-cell-container\"\n [style.width]=\"cellWidth()\"\n [style.paddingTop]=\"cellPadding()\"\n [style.paddingBottom]=\"cellPadding()\"\n [attr.data-row]=\"rowIndex\"\n [attr.data-col]=\"colIndex\"\n >\n <button\n type=\"button\"\n class=\"calendar-body-cell\"\n [tabindex]=\"isActiveCell(rowIndex, colIndex) ? 0 : -1\"\n [class.disabled]=\"!item.enabled\"\n [class.selected]=\"isSelected(item.compareValue)\"\n [class.active]=\"isActiveCell(rowIndex, colIndex)\"\n [class.today]=\"todayValue === item.compareValue\"\n [class.range-start]=\"isRangeStart(item.compareValue)\"\n [class.range-end]=\"isRangeEnd(item.compareValue)\"\n [class.in-range]=\"isCellInRange(item.compareValue)\"\n [class.in-preview]=\"isInPreview(item.compareValue)\"\n [class.preview-start]=\"isPreviewStart(item.compareValue)\"\n [class.preview-end]=\"isPreviewEnd(item.compareValue)\"\n [attr.aria-label]=\"item.ariaLabel\"\n [attr.aria-disabled]=\"!item.enabled || null\"\n [attr.aria-pressed]=\"isSelected(item.compareValue)\"\n [attr.aria-current]=\"todayValue === item.compareValue ? 'date' : null\"\n [attr.aria-describedby]=\"getDescribedby(item.compareValue)\"\n (click)=\"cellClicked(item, $event)\"\n (focus)=\"emitActiveDateChange(item, $event)\">\n <span class=\"calendar-body-cell-content focus-indicator\">\n {{ item.displayValue }}\n </span>\n\n <span class=\"calendar-body-cell-preview\" aria-hidden=\"true\"></span>\n </button>\n </td>\n }\n </tr>\n}\n\n<span [id]=\"startDateLabelId\" class=\"calendar-body-hidden-label\">{{ startDateAccessibleName }}</span>\n\n<span [id]=\"endDateLabelId\" class=\"calendar-body-hidden-label\">{{ endDateAccessibleName }}</span>\n", styles: ["tr{height:40px}.calendar-body-label{height:0;line-height:0;text-align:start}.calendar-body-cell{width:100%;height:100%;position:absolute;top:0;left:0;outline:none;text-align:center;color:var(--apex-calendar-body-cell-color, #0B1222);background:var(--apex-datepicker-calendar-body-cell-background-color, none);border:var(--apex-calendar-body-cell-border, none);margin:0}.calendar-body-hidden-label{display:none}.calendar-body-cell-container{position:relative;height:0;line-height:0}.calendar-body-cell:before,.calendar-body-cell:after,.calendar-body-cell-preview{height:100%;width:100%;display:block;position:absolute;top:0;left:0;content:\"\";box-sizing:border-box;z-index:0}.calendar-body-cell{border-radius:4px;transition:border-radius .1s ease-out}.calendar-body-cell:hover{color:var(--apex-calendar-body-cell-hover-color, white);background-color:var(--apex-calendar-body-cell-hover-background-color, #FFD2C6)}.today{border:var(--apex-calendar-body-today-cell-border, 1px solid #FFD2C6)}.in-preview,.calendar-body-cell.in-preview,.calendar-body-cell.in-range.in-preview{background-color:var(--apex-calendar-body-cell-in-preview-background-color, #FFD2C6);border-left:0px;border-right:0px;border-radius:0;border-top:var(--apex-calendar-body-cell-in-preview-border, 1px dashed #F96138);border-bottom:var(--apex-calendar-body-cell-in-preview-border, 1px dashed #F96138)}.calendar-body-cell.in-preview.preview-end{border-top-right-radius:20px;border-bottom-right-radius:20px;border-right:var(--apex-calendar-body-cell-preview-end-border, 1px dashed #F96138);background-color:var(--apex-calendar-body-cell-preview-end-background-color, #FFD2C6);color:var(--apex-calendar-body-cell-preview-end-color, #FFFFFF)}.calendar-body-cell.in-preview.preview-start{border-top-left-radius:20px;border-bottom-left-radius:20px;border-left:var(--apex-calendar-body-cell-preview-start-border, 1px dashed #F96138);background-color:var(--apex-calendar-body-cell-preview-start-background-color, #FFD2C6);color:var(--apex-calendar-body-cell-preview-start-color, #FFFFFF)}.calendar-body-cell:hover .in-preview,.calendar-body-cell:hover .in-range{border-radius:0 20px 20px 0/0px 20px 20px 0px}.active:focus{background-color:var(--apex-calendar-body-active-cell-background-color, #FFD2C6)}.calendar-body-cell.in-range{background-color:var(--apex-calendar-body-cell-in-range-background-color, #FFF2EF);border-left:0px;border-right:0px;border-radius:0;border-top:var(--apex-calendar-body-cell-in-range-border, 1px solid #F96138);border-bottom:var(--apex-calendar-body-cell-in-range-border, 1px solid #F96138)}.in-range.active{background-color:var(--apex-calendar-body-cell-in-range-active-background-color, #FFD2C6)}.in-range.range-start{border-top-left-radius:20px;border-bottom-left-radius:20px;color:var(--apex-calendar-body-cell-range-start-color, #FFFFFF);border-left:var(--apex-calendar-body-cell-range-start-border, 1px solid #F96138);background-color:var(--apex-calendar-body-cell-range-start-background-color, #F96138)}.in-range.range-end{border-top-right-radius:20px;border-bottom-right-radius:20px;color:var(--apex-calendar-body-cell-range-end-color, #FFFFFF);border-right:var(--apex-datepicker-calendar-body-cell-end-start-border, 1px solid #F96138);background-color:var(--apex-datepicker-calendar-body-cell-end-start-background-color, #F96138)}.calendar-body-cell.in-range.range-end,.calendar-body-cell.in-range.range-start{background-color:var(--apex-datepicker-calendar-body-cell-end-start-background-color, #F96138)}.active.in-range.range-end,.active.in-range.range-start{background-color:var(--apex-calendar-body-cell-active-in-range-start-end-background-color, #FFD2C6)}.calendar-body-cell.selected{color:var(--apex-calendar-body-cell-selected-color, #FFFFFF);background-color:var(--apex-calendar-body-cell-selected-background-color, #F96138)}.disabled{cursor:none;border:none;border-radius:0;pointer-events:none;background-color:var(--apex-calendar-body-cell-disabled-background-color, #E0DFDE)}\n"] }]
374
381
  }], ctorParameters: () => [{ type: i0.NgZone }, { type: i1.Platform }, { type: i0.ElementRef }], propDecorators: { label: [{
375
382
  type: Input
376
383
  }], rows: [{
@@ -676,15 +683,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
676
683
  }] });
677
684
 
678
685
  class ApexCalendarYearView {
679
- constructor(datePickerService, changeDetectorRef) {
686
+ constructor(datePickerService) {
680
687
  this.datePickerService = datePickerService;
681
- this.changeDetectorRef = changeDetectorRef;
682
688
  /** Emits when a new month is selected. */
683
689
  this.selectedChange = new EventEmitter();
684
690
  /** Emits the selected month. This doesn't imply a change on the selected date */
685
691
  this.monthSelected = new EventEmitter();
686
692
  /** Emits when any date is activated. */
687
693
  this.activeDateChange = new EventEmitter();
694
+ /** Grid of calendar cells representing the months of the year. */
695
+ this.months = signal([], ...(ngDevMode ? [{ debugName: "months" }] : []));
696
+ /**
697
+ * The month in this year that the selected Date falls on.
698
+ * Null if the selected Date is in a different year.
699
+ */
700
+ this.selectedMonth = signal(null, ...(ngDevMode ? [{ debugName: "selectedMonth" }] : []));
701
+ /** The label for this year (e.g. "2017"). */
702
+ this.yearLabel = signal('', ...(ngDevMode ? [{ debugName: "yearLabel" }] : []));
703
+ /** The month in this year that today falls on. Null if today is in a different year. */
704
+ this.todayMonth = signal(null, ...(ngDevMode ? [{ debugName: "todayMonth" }] : []));
688
705
  this.dateFormats = {
689
706
  dateInput: null,
690
707
  display: {
@@ -739,13 +756,12 @@ class ApexCalendarYearView {
739
756
  /** Initializes this year view. */
740
757
  init() {
741
758
  this.setSelectedMonth(this.selected);
742
- this.todayMonth = this.getMonthInCurrentYear(this.datePickerService.today());
743
- this.yearLabel = this.datePickerService.getYearName(this.activeDate);
759
+ this.todayMonth.set(this.getMonthInCurrentYear(this.datePickerService.today()));
760
+ this.yearLabel.set(this.datePickerService.getYearName(this.activeDate));
744
761
  let monthNames = this.datePickerService.getMonthNames('short');
745
762
  // First row of months only contains 5 elements so we can fit the year label on the same row.
746
- this.months = [[0, 1, 2, 3], [4, 5, 6, 7], [8, 9, 10, 11]]
747
- .map(row => row.map(month => this.createCellForMonth(month, monthNames[month])));
748
- this.changeDetectorRef.markForCheck();
763
+ this.months.set([[0, 1, 2, 3], [4, 5, 6, 7], [8, 9, 10, 11]]
764
+ .map(row => row.map(month => this.createCellForMonth(month, monthNames[month]))));
749
765
  }
750
766
  /** Handles when a new month is selected. */
751
767
  onMonthSelected(event) {
@@ -896,24 +912,23 @@ class ApexCalendarYearView {
896
912
  /** Sets the currently-selected month based on a model value. */
897
913
  setSelectedMonth(value) {
898
914
  if (value instanceof DateRange) {
899
- this.selectedMonth =
900
- this.getMonthInCurrentYear(value.start) || this.getMonthInCurrentYear(value.end);
915
+ this.selectedMonth.set(this.getMonthInCurrentYear(value.start) || this.getMonthInCurrentYear(value.end));
901
916
  }
902
917
  else {
903
- this.selectedMonth = this.getMonthInCurrentYear(value);
918
+ this.selectedMonth.set(this.getMonthInCurrentYear(value));
904
919
  }
905
920
  }
906
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexCalendarYearView, deps: [{ token: ApexDatepickerService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
907
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: ApexCalendarYearView, isStandalone: true, selector: "apex-calendar-year-view", inputs: { activeDate: "activeDate", selected: "selected", minDate: "minDate", maxDate: "maxDate" }, outputs: { selectedChange: "selectedChange", monthSelected: "monthSelected", activeDateChange: "activeDateChange" }, viewQueries: [{ propertyName: "CalendarBody", first: true, predicate: CalendarBody, descendants: true }], ngImport: i0, template: "<table class=\"calendar-table\" role=\"grid\">\n <thead aria-hidden=\"true\" class=\"calendar-table-header\">\n <tr>\n <th class=\"calendar-table-header-divider\" colspan=\"4\"></th>\n </tr>\n </thead>\n\n <tbody calendar-body\n [label]=\"yearLabel\"\n [rows]=\"months\"\n [todayValue]=\"todayMonth!\"\n [startValue]=\"selectedMonth!\"\n [endValue]=\"selectedMonth!\"\n [labelMinRequiredCells]=\"2\"\n [numCols]=\"4\"\n [cellAspectRatio]=\"4 / 7\"\n [activeCell]=\"datePickerService.getMonth(activeDate)\"\n (selectedValueChange)=\"onMonthSelected($event)\"\n (activeDateChange)=\"updateActiveDate($event)\"\n (keyup)=\"handleCalendarBodyKeyup($event)\"\n (keydown)=\"handleCalendarBodyKeydown($event)\">\n </tbody>\n</table>\n", styles: [":host{display:block}table{width:100%;padding:6px;border-collapse:separate}.calendar-table-header-divider{border-bottom:1px solid var(--apex-calendar-year-view-table-header-border-bottom-color, #C6C6C6)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: CalendarBody, selector: "[calendar-body]", inputs: ["label", "rows", "todayValue", "startValue", "endValue", "labelMinRequiredCells", "numCols", "activeCell", "isRange", "cellAspectRatio", "comparisonStart", "comparisonEnd", "previewStart", "previewEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedValueChange", "previewChange", "activeDateChange", "dragStarted", "dragEnded"] }, { kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
921
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexCalendarYearView, deps: [{ token: ApexDatepickerService }], target: i0.ɵɵFactoryTarget.Component }); }
922
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: ApexCalendarYearView, isStandalone: true, selector: "apex-calendar-year-view", inputs: { activeDate: "activeDate", selected: "selected", minDate: "minDate", maxDate: "maxDate" }, outputs: { selectedChange: "selectedChange", monthSelected: "monthSelected", activeDateChange: "activeDateChange" }, viewQueries: [{ propertyName: "CalendarBody", first: true, predicate: CalendarBody, descendants: true }], ngImport: i0, template: "<table class=\"calendar-table\" role=\"grid\">\n <thead aria-hidden=\"true\" class=\"calendar-table-header\">\n <tr>\n <th class=\"calendar-table-header-divider\" colspan=\"4\"></th>\n </tr>\n </thead>\n\n <tbody calendar-body\n [label]=\"yearLabel()\"\n [rows]=\"months()\"\n [todayValue]=\"todayMonth()!\"\n [startValue]=\"selectedMonth()!\"\n [endValue]=\"selectedMonth()!\"\n [labelMinRequiredCells]=\"2\"\n [numCols]=\"4\"\n [cellAspectRatio]=\"4 / 7\"\n [activeCell]=\"datePickerService.getMonth(activeDate)\"\n (selectedValueChange)=\"onMonthSelected($event)\"\n (activeDateChange)=\"updateActiveDate($event)\"\n (keyup)=\"handleCalendarBodyKeyup($event)\"\n (keydown)=\"handleCalendarBodyKeydown($event)\">\n </tbody>\n</table>\n", styles: [":host{display:block}table{width:100%;padding:6px;border-collapse:separate}.calendar-table-header-divider{border-bottom:1px solid var(--apex-calendar-year-view-table-header-border-bottom-color, #C6C6C6)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: CalendarBody, selector: "[calendar-body]", inputs: ["label", "rows", "todayValue", "startValue", "endValue", "labelMinRequiredCells", "numCols", "activeCell", "isRange", "cellAspectRatio", "comparisonStart", "comparisonEnd", "previewStart", "previewEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedValueChange", "previewChange", "activeDateChange", "dragStarted", "dragEnded"] }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
908
923
  }
909
924
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexCalendarYearView, decorators: [{
910
925
  type: Component,
911
- args: [{ selector: 'apex-calendar-year-view', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
926
+ args: [{ selector: 'apex-calendar-year-view', imports: [
912
927
  FormsModule,
913
928
  CalendarBody,
914
929
  ReactiveFormsModule,
915
- ], template: "<table class=\"calendar-table\" role=\"grid\">\n <thead aria-hidden=\"true\" class=\"calendar-table-header\">\n <tr>\n <th class=\"calendar-table-header-divider\" colspan=\"4\"></th>\n </tr>\n </thead>\n\n <tbody calendar-body\n [label]=\"yearLabel\"\n [rows]=\"months\"\n [todayValue]=\"todayMonth!\"\n [startValue]=\"selectedMonth!\"\n [endValue]=\"selectedMonth!\"\n [labelMinRequiredCells]=\"2\"\n [numCols]=\"4\"\n [cellAspectRatio]=\"4 / 7\"\n [activeCell]=\"datePickerService.getMonth(activeDate)\"\n (selectedValueChange)=\"onMonthSelected($event)\"\n (activeDateChange)=\"updateActiveDate($event)\"\n (keyup)=\"handleCalendarBodyKeyup($event)\"\n (keydown)=\"handleCalendarBodyKeydown($event)\">\n </tbody>\n</table>\n", styles: [":host{display:block}table{width:100%;padding:6px;border-collapse:separate}.calendar-table-header-divider{border-bottom:1px solid var(--apex-calendar-year-view-table-header-border-bottom-color, #C6C6C6)}\n"] }]
916
- }], ctorParameters: () => [{ type: ApexDatepickerService }, { type: i0.ChangeDetectorRef }], propDecorators: { CalendarBody: [{
930
+ ], template: "<table class=\"calendar-table\" role=\"grid\">\n <thead aria-hidden=\"true\" class=\"calendar-table-header\">\n <tr>\n <th class=\"calendar-table-header-divider\" colspan=\"4\"></th>\n </tr>\n </thead>\n\n <tbody calendar-body\n [label]=\"yearLabel()\"\n [rows]=\"months()\"\n [todayValue]=\"todayMonth()!\"\n [startValue]=\"selectedMonth()!\"\n [endValue]=\"selectedMonth()!\"\n [labelMinRequiredCells]=\"2\"\n [numCols]=\"4\"\n [cellAspectRatio]=\"4 / 7\"\n [activeCell]=\"datePickerService.getMonth(activeDate)\"\n (selectedValueChange)=\"onMonthSelected($event)\"\n (activeDateChange)=\"updateActiveDate($event)\"\n (keyup)=\"handleCalendarBodyKeyup($event)\"\n (keydown)=\"handleCalendarBodyKeydown($event)\">\n </tbody>\n</table>\n", styles: [":host{display:block}table{width:100%;padding:6px;border-collapse:separate}.calendar-table-header-divider{border-bottom:1px solid var(--apex-calendar-year-view-table-header-border-bottom-color, #C6C6C6)}\n"] }]
931
+ }], ctorParameters: () => [{ type: ApexDatepickerService }], propDecorators: { CalendarBody: [{
917
932
  type: ViewChild,
918
933
  args: [CalendarBody]
919
934
  }], activeDate: [{
@@ -1013,9 +1028,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
1013
1028
  }], ctorParameters: () => [{ type: ApexDatepickerService }] });
1014
1029
 
1015
1030
  class ApexCalendarMonthView {
1016
- constructor(datepickerService, changeDetectorRef, rangeSelectionStartegy) {
1031
+ constructor(datepickerService, rangeSelectionStartegy) {
1017
1032
  this.datepickerService = datepickerService;
1018
- this.changeDetectorRef = changeDetectorRef;
1019
1033
  this.rangeSelectionStartegy = rangeSelectionStartegy;
1020
1034
  this.activeDrag = null;
1021
1035
  this.dragStarted = new EventEmitter();
@@ -1023,6 +1037,22 @@ class ApexCalendarMonthView {
1023
1037
  this.activeDateChange = new EventEmitter();
1024
1038
  this.userSelection = new EventEmitter();
1025
1039
  this.selectedChange = new EventEmitter();
1040
+ this.monthLabel = signal('', ...(ngDevMode ? [{ debugName: "monthLabel" }] : []));
1041
+ /** Grid of calendar cells representing the dates of the month. */
1042
+ this.weeks = signal([], ...(ngDevMode ? [{ debugName: "weeks" }] : []));
1043
+ /** Start value of the currently-shown date range. */
1044
+ this.rangeStart = signal(null, ...(ngDevMode ? [{ debugName: "rangeStart" }] : []));
1045
+ /** End value of the currently-shown date range. */
1046
+ this.rangeEnd = signal(null, ...(ngDevMode ? [{ debugName: "rangeEnd" }] : []));
1047
+ /** Start of the preview range. */
1048
+ this.previewStart = signal(null, ...(ngDevMode ? [{ debugName: "previewStart" }] : []));
1049
+ /** End of the preview range. */
1050
+ this.previewEnd = signal(null, ...(ngDevMode ? [{ debugName: "previewEnd" }] : []));
1051
+ /** Whether the user is currently selecting a range of dates. */
1052
+ this.isRange = signal(false, ...(ngDevMode ? [{ debugName: "isRange" }] : []));
1053
+ /** The date of the month that today falls on. Null if today is in another month. */
1054
+ this.todayDate = signal(null, ...(ngDevMode ? [{ debugName: "todayDate" }] : []));
1055
+ this.weekdays = signal([], ...(ngDevMode ? [{ debugName: "weekdays" }] : []));
1026
1056
  this.uniqueIdCounter = 0;
1027
1057
  this._activeDate = this.datepickerService.today();
1028
1058
  }
@@ -1148,7 +1178,7 @@ class ApexCalendarMonthView {
1148
1178
  return;
1149
1179
  case 'Escape':
1150
1180
  // Abort the current range selection if the user presses escape mid-selection.
1151
- if (this.previewEnd != null && !hasModifierKey(event)) {
1181
+ if (this.previewEnd() != null && !hasModifierKey(event)) {
1152
1182
  this.clearPreview();
1153
1183
  // If a drag is in progress, cancel the drag without changing the
1154
1184
  // current selection.
@@ -1181,16 +1211,15 @@ class ApexCalendarMonthView {
1181
1211
  // events aren't fired for single date selections.
1182
1212
  const value = (cell ? cell.rawValue : null);
1183
1213
  const previewRange = this.rangeSelectionStartegy.createPreview(value, this.selected);
1184
- this.previewStart = this.getCellCompareValue(previewRange.start);
1185
- this.previewEnd = this.getCellCompareValue(previewRange.end);
1214
+ this.previewStart.set(this.getCellCompareValue(previewRange.start));
1215
+ this.previewEnd.set(this.getCellCompareValue(previewRange.end));
1186
1216
  if (this.activeDrag && value) {
1187
1217
  const dragRange = this.rangeSelectionStartegy.createDrag?.(this.activeDrag.value, this.selected, value);
1188
1218
  if (dragRange) {
1189
- this.previewStart = this.getCellCompareValue(dragRange.start);
1190
- this.previewEnd = this.getCellCompareValue(dragRange.end);
1219
+ this.previewStart.set(this.getCellCompareValue(dragRange.start));
1220
+ this.previewEnd.set(this.getCellCompareValue(dragRange.end));
1191
1221
  }
1192
1222
  }
1193
- this.changeDetectorRef.markForCheck();
1194
1223
  }
1195
1224
  }
1196
1225
  handleCalendarBodyKeyup(event) {
@@ -1205,7 +1234,8 @@ class ApexCalendarMonthView {
1205
1234
  this.calendarBody.scheduleFocusActiveCellAfterViewChecked();
1206
1235
  }
1207
1236
  clearPreview() {
1208
- this.previewStart = this.previewEnd = null;
1237
+ this.previewStart.set(null);
1238
+ this.previewEnd.set(null);
1209
1239
  }
1210
1240
  /**
1211
1241
  * Gets the date in this month that the given Date falls on.
@@ -1219,11 +1249,11 @@ class ApexCalendarMonthView {
1219
1249
  init() {
1220
1250
  this.setRanges(this.selected);
1221
1251
  ApexDatepickerService;
1222
- this.todayDate = this.getCellCompareValue(this.datepickerService.today());
1223
- this.monthLabel = this.datepickerService.dateFormats.display.monthLabel
1252
+ this.todayDate.set(this.getCellCompareValue(this.datepickerService.today()));
1253
+ this.monthLabel.set(this.datepickerService.dateFormats.display.monthLabel
1224
1254
  ? this.datepickerService.formatDate(this.activeDate, this.datepickerService.dateFormats.display.monthLabel)
1225
1255
  : this.datepickerService
1226
- .getMonthNames('short')[this.datepickerService.getMonth(this.activeDate)].toLocaleUpperCase();
1256
+ .getMonthNames('short')[this.datepickerService.getMonth(this.activeDate)].toLocaleUpperCase());
1227
1257
  let firstOfMonth = this.datepickerService.createDate(this.datepickerService.getYear(this.activeDate), this.datepickerService.getMonth(this.activeDate), 1);
1228
1258
  this.firstWeekOffset =
1229
1259
  (this.datepickerService.DAYS_PER_WEEK +
@@ -1235,13 +1265,15 @@ class ApexCalendarMonthView {
1235
1265
  }
1236
1266
  setRanges(selectedValue) {
1237
1267
  if (selectedValue instanceof DateRange) {
1238
- this.rangeStart = this.getCellCompareValue(selectedValue.start);
1239
- this.rangeEnd = this.getCellCompareValue(selectedValue.end);
1240
- this.isRange = true;
1268
+ this.rangeStart.set(this.getCellCompareValue(selectedValue.start));
1269
+ this.rangeEnd.set(this.getCellCompareValue(selectedValue.end));
1270
+ this.isRange.set(true);
1241
1271
  }
1242
1272
  else if (selectedValue instanceof Date) {
1243
- this.rangeStart = this.rangeEnd = this.getCellCompareValue(selectedValue);
1244
- this.isRange = false;
1273
+ const val = this.getCellCompareValue(selectedValue);
1274
+ this.rangeStart.set(val);
1275
+ this.rangeEnd.set(val);
1276
+ this.isRange.set(false);
1245
1277
  }
1246
1278
  }
1247
1279
  getCellCompareValue(date) {
@@ -1263,22 +1295,23 @@ class ApexCalendarMonthView {
1263
1295
  let weekdays = longWeekdays.map((long, i) => {
1264
1296
  return { long, narrow: narrowWeekdays[i], id: this.uniqueIdCounter++ };
1265
1297
  });
1266
- this.weekdays = weekdays.slice(firstDayOfWeek).concat(weekdays.slice(0, firstDayOfWeek));
1298
+ this.weekdays.set(weekdays.slice(firstDayOfWeek).concat(weekdays.slice(0, firstDayOfWeek)));
1267
1299
  }
1268
1300
  createWeekCells() {
1269
1301
  const daysInMonth = this.datepickerService.getNumDaysInMonth(this.activeDate);
1270
1302
  const dateNames = this.datepickerService.getDateNames();
1271
- this.weeks = [[]];
1303
+ const weeks = [[]];
1272
1304
  for (let i = 0, cell = this.firstWeekOffset; i < daysInMonth; i++, cell++) {
1273
1305
  if (cell == this.datepickerService.DAYS_PER_WEEK) {
1274
- this.weeks.push([]);
1306
+ weeks.push([]);
1275
1307
  cell = 0;
1276
1308
  }
1277
1309
  const date = this.datepickerService.createDate(this.datepickerService.getYear(this.activeDate), this.datepickerService.getMonth(this.activeDate), i + 1);
1278
1310
  const enabled = this.shouldEnableDate(date);
1279
1311
  const ariaLabel = this.datepickerService.formatDate(date, this.datepickerService.dateFormats.display.dateA11yLabel);
1280
- this.weeks[this.weeks.length - 1].push(new CalendarCell(i + 1, dateNames[i], ariaLabel, enabled, this.getCellCompareValue(date), date));
1312
+ weeks[weeks.length - 1].push(new CalendarCell(i + 1, dateNames[i], ariaLabel, enabled, this.getCellCompareValue(date), date));
1281
1313
  }
1314
+ this.weeks.set(weeks);
1282
1315
  }
1283
1316
  hasSameMonthAndYear(firstDate, secondDate) {
1284
1317
  return !!(firstDate &&
@@ -1309,15 +1342,15 @@ class ApexCalendarMonthView {
1309
1342
  getDateFromDayOfMonth(dayOfMonth) {
1310
1343
  return this.datepickerService.createDate(this.datepickerService.getYear(this.activeDate), this.datepickerService.getMonth(this.activeDate), dayOfMonth);
1311
1344
  }
1312
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexCalendarMonthView, deps: [{ token: ApexDatepickerService }, { token: i0.ChangeDetectorRef }, { token: DefaultCalendarRangeStrategy }], target: i0.ɵɵFactoryTarget.Component }); }
1313
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ApexCalendarMonthView, isStandalone: true, selector: "apex-calendar-month-view", inputs: { activeDate: "activeDate", selected: "selected", minDate: "minDate", maxDate: "maxDate", activeDrag: "activeDrag" }, outputs: { dragStarted: "dragStarted", dragEnded: "dragEnded", activeDateChange: "activeDateChange", userSelection: "userSelection", selectedChange: "selectedChange" }, viewQueries: [{ propertyName: "calendarBody", first: true, predicate: CalendarBody, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<table class=\"calendar-table\" role=\"grid\">\n <thead class=\"calendar-table-header\">\n <tr>\n @for (day of weekdays; track day.id) {\n <th scope=\"col\">\n <span class=\"cdk-visually-hidden\">{{ day.long }}</span>\n\n <span aria-hidden=\"true\">{{ day.narrow }}</span>\n </th>\n }\n </tr>\n\n <tr aria-hidden=\"true\">\n <th class=\"calendar-table-header-divider\" colspan=\"7\"></th>\n </tr>\n </thead>\n\n <tbody calendar-body\n [label]=\"monthLabel\"\n [rows]=\"weeks\"\n [todayValue]=\"todayDate!\"\n [startValue]=\"rangeStart!\"\n [endValue]=\"rangeEnd!\"\n [previewStart]=\"previewStart\"\n [previewEnd]=\"previewEnd\"\n [isRange]=\"isRange\"\n [activeCell]=\"getActiveCell()\"\n [labelMinRequiredCells]=\"2\"\n (dragStarted)=\"dragStarted.emit($event)\"\n (dragEnded)=\"onDragEnded($event)\"\n (activeDateChange)=\"updateActiveDate($event)\"\n (selectedValueChange)=\"dateSelected($event)\"\n (previewChange)=\"previewChanged($event)\"\n (keyup)=\"handleCalendarBodyKeyup($event)\"\n (keydown)=\"handleCalendarBodyKeydown($event)\">\n </tbody>\n</table>\n", styles: ["table{width:100%;border-spacing:0px 4px;border-collapse:separate;padding:6px}th{color:var(--apex-calendar-month-view-table-header-color, #C6C6C6)}.calendar-table-header-divider{border-bottom:1px solid var(--apex-datepicker-calendar-month-view-table-header-border-bottom-color, #C6C6C6)}\n"], dependencies: [{ kind: "component", type: CalendarBody, selector: "[calendar-body]", inputs: ["label", "rows", "todayValue", "startValue", "endValue", "labelMinRequiredCells", "numCols", "activeCell", "isRange", "cellAspectRatio", "comparisonStart", "comparisonEnd", "previewStart", "previewEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedValueChange", "previewChange", "activeDateChange", "dragStarted", "dragEnded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1345
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexCalendarMonthView, deps: [{ token: ApexDatepickerService }, { token: DefaultCalendarRangeStrategy }], target: i0.ɵɵFactoryTarget.Component }); }
1346
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ApexCalendarMonthView, isStandalone: true, selector: "apex-calendar-month-view", inputs: { activeDate: "activeDate", selected: "selected", minDate: "minDate", maxDate: "maxDate", activeDrag: "activeDrag" }, outputs: { dragStarted: "dragStarted", dragEnded: "dragEnded", activeDateChange: "activeDateChange", userSelection: "userSelection", selectedChange: "selectedChange" }, viewQueries: [{ propertyName: "calendarBody", first: true, predicate: CalendarBody, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<table class=\"calendar-table\" role=\"grid\">\n <thead class=\"calendar-table-header\">\n <tr>\n @for (day of weekdays(); track day.id) {\n <th scope=\"col\">\n <span class=\"cdk-visually-hidden\">{{ day.long }}</span>\n\n <span aria-hidden=\"true\">{{ day.narrow }}</span>\n </th>\n }\n </tr>\n\n <tr aria-hidden=\"true\">\n <th class=\"calendar-table-header-divider\" colspan=\"7\"></th>\n </tr>\n </thead>\n\n <tbody calendar-body\n [label]=\"monthLabel()\"\n [rows]=\"weeks()\"\n [todayValue]=\"todayDate()!\"\n [startValue]=\"rangeStart()!\"\n [endValue]=\"rangeEnd()!\"\n [previewStart]=\"previewStart()\"\n [previewEnd]=\"previewEnd()\"\n [isRange]=\"isRange()\"\n [activeCell]=\"getActiveCell()\"\n [labelMinRequiredCells]=\"2\"\n (dragStarted)=\"dragStarted.emit($event)\"\n (dragEnded)=\"onDragEnded($event)\"\n (activeDateChange)=\"updateActiveDate($event)\"\n (selectedValueChange)=\"dateSelected($event)\"\n (previewChange)=\"previewChanged($event)\"\n (keyup)=\"handleCalendarBodyKeyup($event)\"\n (keydown)=\"handleCalendarBodyKeydown($event)\">\n </tbody>\n</table>\n", styles: ["table{width:100%;border-spacing:0px 4px;border-collapse:separate;padding:6px}th{color:var(--apex-calendar-month-view-table-header-color, #C6C6C6)}.calendar-table-header-divider{border-bottom:1px solid var(--apex-datepicker-calendar-month-view-table-header-border-bottom-color, #C6C6C6)}\n"], dependencies: [{ kind: "component", type: CalendarBody, selector: "[calendar-body]", inputs: ["label", "rows", "todayValue", "startValue", "endValue", "labelMinRequiredCells", "numCols", "activeCell", "isRange", "cellAspectRatio", "comparisonStart", "comparisonEnd", "previewStart", "previewEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedValueChange", "previewChange", "activeDateChange", "dragStarted", "dragEnded"] }] }); }
1314
1347
  }
1315
1348
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexCalendarMonthView, decorators: [{
1316
1349
  type: Component,
1317
- args: [{ selector: 'apex-calendar-month-view', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
1350
+ args: [{ selector: 'apex-calendar-month-view', imports: [
1318
1351
  CalendarBody,
1319
- ], template: "<table class=\"calendar-table\" role=\"grid\">\n <thead class=\"calendar-table-header\">\n <tr>\n @for (day of weekdays; track day.id) {\n <th scope=\"col\">\n <span class=\"cdk-visually-hidden\">{{ day.long }}</span>\n\n <span aria-hidden=\"true\">{{ day.narrow }}</span>\n </th>\n }\n </tr>\n\n <tr aria-hidden=\"true\">\n <th class=\"calendar-table-header-divider\" colspan=\"7\"></th>\n </tr>\n </thead>\n\n <tbody calendar-body\n [label]=\"monthLabel\"\n [rows]=\"weeks\"\n [todayValue]=\"todayDate!\"\n [startValue]=\"rangeStart!\"\n [endValue]=\"rangeEnd!\"\n [previewStart]=\"previewStart\"\n [previewEnd]=\"previewEnd\"\n [isRange]=\"isRange\"\n [activeCell]=\"getActiveCell()\"\n [labelMinRequiredCells]=\"2\"\n (dragStarted)=\"dragStarted.emit($event)\"\n (dragEnded)=\"onDragEnded($event)\"\n (activeDateChange)=\"updateActiveDate($event)\"\n (selectedValueChange)=\"dateSelected($event)\"\n (previewChange)=\"previewChanged($event)\"\n (keyup)=\"handleCalendarBodyKeyup($event)\"\n (keydown)=\"handleCalendarBodyKeydown($event)\">\n </tbody>\n</table>\n", styles: ["table{width:100%;border-spacing:0px 4px;border-collapse:separate;padding:6px}th{color:var(--apex-calendar-month-view-table-header-color, #C6C6C6)}.calendar-table-header-divider{border-bottom:1px solid var(--apex-datepicker-calendar-month-view-table-header-border-bottom-color, #C6C6C6)}\n"] }]
1320
- }], ctorParameters: () => [{ type: ApexDatepickerService }, { type: i0.ChangeDetectorRef }, { type: DefaultCalendarRangeStrategy }], propDecorators: { calendarBody: [{
1352
+ ], template: "<table class=\"calendar-table\" role=\"grid\">\n <thead class=\"calendar-table-header\">\n <tr>\n @for (day of weekdays(); track day.id) {\n <th scope=\"col\">\n <span class=\"cdk-visually-hidden\">{{ day.long }}</span>\n\n <span aria-hidden=\"true\">{{ day.narrow }}</span>\n </th>\n }\n </tr>\n\n <tr aria-hidden=\"true\">\n <th class=\"calendar-table-header-divider\" colspan=\"7\"></th>\n </tr>\n </thead>\n\n <tbody calendar-body\n [label]=\"monthLabel()\"\n [rows]=\"weeks()\"\n [todayValue]=\"todayDate()!\"\n [startValue]=\"rangeStart()!\"\n [endValue]=\"rangeEnd()!\"\n [previewStart]=\"previewStart()\"\n [previewEnd]=\"previewEnd()\"\n [isRange]=\"isRange()\"\n [activeCell]=\"getActiveCell()\"\n [labelMinRequiredCells]=\"2\"\n (dragStarted)=\"dragStarted.emit($event)\"\n (dragEnded)=\"onDragEnded($event)\"\n (activeDateChange)=\"updateActiveDate($event)\"\n (selectedValueChange)=\"dateSelected($event)\"\n (previewChange)=\"previewChanged($event)\"\n (keyup)=\"handleCalendarBodyKeyup($event)\"\n (keydown)=\"handleCalendarBodyKeydown($event)\">\n </tbody>\n</table>\n", styles: ["table{width:100%;border-spacing:0px 4px;border-collapse:separate;padding:6px}th{color:var(--apex-calendar-month-view-table-header-color, #C6C6C6)}.calendar-table-header-divider{border-bottom:1px solid var(--apex-datepicker-calendar-month-view-table-header-border-bottom-color, #C6C6C6)}\n"] }]
1353
+ }], ctorParameters: () => [{ type: ApexDatepickerService }, { type: DefaultCalendarRangeStrategy }], propDecorators: { calendarBody: [{
1321
1354
  type: ViewChild,
1322
1355
  args: [CalendarBody]
1323
1356
  }], activeDate: [{
@@ -1343,8 +1376,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
1343
1376
  }] } });
1344
1377
 
1345
1378
  class ApexCalendarMultiYearView {
1346
- constructor(changeDetectorRef, datePickerService) {
1347
- this.changeDetectorRef = changeDetectorRef;
1379
+ constructor(datePickerService) {
1348
1380
  this.datePickerService = datePickerService;
1349
1381
  /** Emits when a new year is selected. */
1350
1382
  this.selectedChange = new EventEmitter();
@@ -1352,6 +1384,12 @@ class ApexCalendarMultiYearView {
1352
1384
  this.yearSelected = new EventEmitter();
1353
1385
  /** Emits when any date is activated. */
1354
1386
  this.activeDateChange = new EventEmitter();
1387
+ /** Grid of calendar cells representing the currently displayed years. */
1388
+ this._years = signal([], ...(ngDevMode ? [{ debugName: "_years" }] : []));
1389
+ /** The year that today falls on. */
1390
+ this._todayYear = signal(0, ...(ngDevMode ? [{ debugName: "_todayYear" }] : []));
1391
+ /** The year of the selected date. Null if the selected date is null. */
1392
+ this.selectedYear = signal(null, ...(ngDevMode ? [{ debugName: "selectedYear" }] : []));
1355
1393
  this._activeDate = this.datePickerService.today();
1356
1394
  }
1357
1395
  /** The date to display in this multi-year view (everything other than the year is ignored). */
@@ -1397,7 +1435,7 @@ class ApexCalendarMultiYearView {
1397
1435
  this.init();
1398
1436
  }
1399
1437
  init() {
1400
- this._todayYear = this.datePickerService.getYear(this.datePickerService.today());
1438
+ this._todayYear.set(this.datePickerService.getYear(this.datePickerService.today()));
1401
1439
  // We want a range years such that we maximize the number of
1402
1440
  // enabled dates visible at once. This prevents issues where the minimum year
1403
1441
  // is the last item of a page OR the maximum year is the first item of a page.
@@ -1405,15 +1443,15 @@ class ApexCalendarMultiYearView {
1405
1443
  // *actual* first rendered year in the multi-year view.
1406
1444
  const activeYear = this.datePickerService.getYear(this._activeDate);
1407
1445
  const minYearOfPage = activeYear - this.datePickerService.getActiveOffset(this.activeDate, this.minDate, this.maxDate);
1408
- this._years = [];
1446
+ const years = [];
1409
1447
  for (let i = 0, row = []; i < this.datePickerService.yearsPerPage; i++) {
1410
1448
  row.push(minYearOfPage + i);
1411
1449
  if (row.length == this.datePickerService.yearsPerRow) {
1412
- this._years.push(row.map(year => this.createCellForYear(year)));
1450
+ years.push(row.map(year => this.createCellForYear(year)));
1413
1451
  row = [];
1414
1452
  }
1415
1453
  }
1416
- this.changeDetectorRef.markForCheck();
1454
+ this._years.set(years);
1417
1455
  }
1418
1456
  /** Handles when a new year is selected. */
1419
1457
  onYearSelected(event) {
@@ -1535,15 +1573,15 @@ class ApexCalendarMultiYearView {
1535
1573
  }
1536
1574
  /** Sets the currently-highlighted year based on a model value. */
1537
1575
  setSelectedYear(value) {
1538
- this.selectedYear = null;
1576
+ this.selectedYear.set(null);
1539
1577
  if (value instanceof DateRange) {
1540
1578
  const displayValue = value.start || value.end;
1541
1579
  if (displayValue) {
1542
- this.selectedYear = this.datePickerService.getYear(displayValue);
1580
+ this.selectedYear.set(this.datePickerService.getYear(displayValue));
1543
1581
  }
1544
1582
  }
1545
1583
  else if (value) {
1546
- this.selectedYear = this.datePickerService.getYear(value);
1584
+ this.selectedYear.set(this.datePickerService.getYear(value));
1547
1585
  }
1548
1586
  }
1549
1587
  isSameMultiYearView(date1, date2, minDate, maxDate) {
@@ -1564,17 +1602,17 @@ class ApexCalendarMultiYearView {
1564
1602
  }
1565
1603
  return startingYear;
1566
1604
  }
1567
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexCalendarMultiYearView, deps: [{ token: i0.ChangeDetectorRef }, { token: ApexDatepickerService }], target: i0.ɵɵFactoryTarget.Component }); }
1568
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: ApexCalendarMultiYearView, isStandalone: true, selector: "apex-calendar-multi-year-view", inputs: { activeDate: "activeDate", selected: "selected", minDate: "minDate", maxDate: "maxDate" }, outputs: { selectedChange: "selectedChange", yearSelected: "yearSelected", activeDateChange: "activeDateChange" }, viewQueries: [{ propertyName: "calendarBody", first: true, predicate: CalendarBody, descendants: true }], ngImport: i0, template: "<table class=\"calendar-table\" role=\"grid\">\n <thead aria-hidden=\"true\" class=\"calendar-table-header\">\n <tr>\n <th class=\"calendar-table-header-divider\" colspan=\"4\"></th>\n </tr>\n </thead>\n\n <tbody calendar-body\n [rows]=\"_years\"\n [todayValue]=\"_todayYear\"\n [startValue]=\"selectedYear!\"\n [endValue]=\"selectedYear!\"\n [numCols]=\"4\"\n [cellAspectRatio]=\"4 / 7\"\n [activeCell]=\"getActiveCell()\"\n (selectedValueChange)=\"onYearSelected($event)\"\n (activeDateChange)=\"updateActiveDate($event)\"\n (keyup)=\"handleCalendarBodyKeyup($event)\"\n (keydown)=\"handleCalendarBodyKeydown($event)\">\n </tbody>\n</table>\n", styles: [":host{display:block}table{width:100%;padding:6px;border-collapse:separate}.calendar-table-header-divider{border-bottom:1px solid var(--apex-calendar-multi-year-view-table-header-border-bottom-color, #C6C6C6)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: CalendarBody, selector: "[calendar-body]", inputs: ["label", "rows", "todayValue", "startValue", "endValue", "labelMinRequiredCells", "numCols", "activeCell", "isRange", "cellAspectRatio", "comparisonStart", "comparisonEnd", "previewStart", "previewEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedValueChange", "previewChange", "activeDateChange", "dragStarted", "dragEnded"] }, { kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1605
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexCalendarMultiYearView, deps: [{ token: ApexDatepickerService }], target: i0.ɵɵFactoryTarget.Component }); }
1606
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: ApexCalendarMultiYearView, isStandalone: true, selector: "apex-calendar-multi-year-view", inputs: { activeDate: "activeDate", selected: "selected", minDate: "minDate", maxDate: "maxDate" }, outputs: { selectedChange: "selectedChange", yearSelected: "yearSelected", activeDateChange: "activeDateChange" }, viewQueries: [{ propertyName: "calendarBody", first: true, predicate: CalendarBody, descendants: true }], ngImport: i0, template: "<table class=\"calendar-table\" role=\"grid\">\n <thead aria-hidden=\"true\" class=\"calendar-table-header\">\n <tr>\n <th class=\"calendar-table-header-divider\" colspan=\"4\"></th>\n </tr>\n </thead>\n\n <tbody calendar-body\n [rows]=\"_years()\"\n [todayValue]=\"_todayYear()\"\n [startValue]=\"selectedYear()!\"\n [endValue]=\"selectedYear()!\"\n [numCols]=\"4\"\n [cellAspectRatio]=\"4 / 7\"\n [activeCell]=\"getActiveCell()\"\n (selectedValueChange)=\"onYearSelected($event)\"\n (activeDateChange)=\"updateActiveDate($event)\"\n (keyup)=\"handleCalendarBodyKeyup($event)\"\n (keydown)=\"handleCalendarBodyKeydown($event)\">\n </tbody>\n</table>\n", styles: [":host{display:block}table{width:100%;padding:6px;border-collapse:separate}.calendar-table-header-divider{border-bottom:1px solid var(--apex-calendar-multi-year-view-table-header-border-bottom-color, #C6C6C6)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: CalendarBody, selector: "[calendar-body]", inputs: ["label", "rows", "todayValue", "startValue", "endValue", "labelMinRequiredCells", "numCols", "activeCell", "isRange", "cellAspectRatio", "comparisonStart", "comparisonEnd", "previewStart", "previewEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedValueChange", "previewChange", "activeDateChange", "dragStarted", "dragEnded"] }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
1569
1607
  }
1570
1608
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexCalendarMultiYearView, decorators: [{
1571
1609
  type: Component,
1572
- args: [{ selector: 'apex-calendar-multi-year-view', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
1610
+ args: [{ selector: 'apex-calendar-multi-year-view', imports: [
1573
1611
  FormsModule,
1574
1612
  CalendarBody,
1575
1613
  ReactiveFormsModule,
1576
- ], template: "<table class=\"calendar-table\" role=\"grid\">\n <thead aria-hidden=\"true\" class=\"calendar-table-header\">\n <tr>\n <th class=\"calendar-table-header-divider\" colspan=\"4\"></th>\n </tr>\n </thead>\n\n <tbody calendar-body\n [rows]=\"_years\"\n [todayValue]=\"_todayYear\"\n [startValue]=\"selectedYear!\"\n [endValue]=\"selectedYear!\"\n [numCols]=\"4\"\n [cellAspectRatio]=\"4 / 7\"\n [activeCell]=\"getActiveCell()\"\n (selectedValueChange)=\"onYearSelected($event)\"\n (activeDateChange)=\"updateActiveDate($event)\"\n (keyup)=\"handleCalendarBodyKeyup($event)\"\n (keydown)=\"handleCalendarBodyKeydown($event)\">\n </tbody>\n</table>\n", styles: [":host{display:block}table{width:100%;padding:6px;border-collapse:separate}.calendar-table-header-divider{border-bottom:1px solid var(--apex-calendar-multi-year-view-table-header-border-bottom-color, #C6C6C6)}\n"] }]
1577
- }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: ApexDatepickerService }], propDecorators: { activeDate: [{
1614
+ ], template: "<table class=\"calendar-table\" role=\"grid\">\n <thead aria-hidden=\"true\" class=\"calendar-table-header\">\n <tr>\n <th class=\"calendar-table-header-divider\" colspan=\"4\"></th>\n </tr>\n </thead>\n\n <tbody calendar-body\n [rows]=\"_years()\"\n [todayValue]=\"_todayYear()\"\n [startValue]=\"selectedYear()!\"\n [endValue]=\"selectedYear()!\"\n [numCols]=\"4\"\n [cellAspectRatio]=\"4 / 7\"\n [activeCell]=\"getActiveCell()\"\n (selectedValueChange)=\"onYearSelected($event)\"\n (activeDateChange)=\"updateActiveDate($event)\"\n (keyup)=\"handleCalendarBodyKeyup($event)\"\n (keydown)=\"handleCalendarBodyKeydown($event)\">\n </tbody>\n</table>\n", styles: [":host{display:block}table{width:100%;padding:6px;border-collapse:separate}.calendar-table-header-divider{border-bottom:1px solid var(--apex-calendar-multi-year-view-table-header-border-bottom-color, #C6C6C6)}\n"] }]
1615
+ }], ctorParameters: () => [{ type: ApexDatepickerService }], propDecorators: { activeDate: [{
1578
1616
  type: Input
1579
1617
  }], selected: [{
1580
1618
  type: Input
@@ -1617,9 +1655,9 @@ class ApexCalendarComponent {
1617
1655
  this.selectedChange = new EventEmitter();
1618
1656
  this.userSelection = new EventEmitter();
1619
1657
  this.calendarClose = new EventEmitter();
1620
- this.isButtonHidden = true;
1621
- this.activeDateView = 'month';
1622
- this.activeDrag = null;
1658
+ this.isButtonHidden = signal(true, ...(ngDevMode ? [{ debugName: "isButtonHidden" }] : []));
1659
+ this.activeDateView = signal('month', ...(ngDevMode ? [{ debugName: "activeDateView" }] : []));
1660
+ this.activeDrag = signal(null, ...(ngDevMode ? [{ debugName: "activeDrag" }] : []));
1623
1661
  }
1624
1662
  get activeDate() {
1625
1663
  return this._activeDate;
@@ -1653,7 +1691,7 @@ class ApexCalendarComponent {
1653
1691
  this._maxDate = this.datePickerService.getValidDateOrNull(this.datePickerService.deserialize(value));
1654
1692
  }
1655
1693
  calendarDateViewChange() {
1656
- this.activeDateView = this.activeDateView == 'month' ? 'multi-year' : 'month';
1694
+ this.activeDateView.set(this.activeDateView() == 'month' ? 'multi-year' : 'month');
1657
1695
  }
1658
1696
  onCalendarDateViewKeydown(event) {
1659
1697
  if (event.code.startsWith('Arrow')) {
@@ -1665,15 +1703,15 @@ class ApexCalendarComponent {
1665
1703
  }
1666
1704
  goToPreviousView() {
1667
1705
  this.activeDate =
1668
- this.activeDateView == 'month'
1706
+ this.activeDateView() == 'month'
1669
1707
  ? this.datePickerService.addCalendarMonths(this.activeDate, -1)
1670
- : this.datePickerService.addCalendarYears(this.activeDate, this.activeDateView == 'year' ? -1 : -this.datePickerService.yearsPerPage);
1708
+ : this.datePickerService.addCalendarYears(this.activeDate, this.activeDateView() == 'year' ? -1 : -this.datePickerService.yearsPerPage);
1671
1709
  }
1672
1710
  goToNextView() {
1673
1711
  this.activeDate =
1674
- this.activeDateView == 'month'
1712
+ this.activeDateView() == 'month'
1675
1713
  ? this.datePickerService.addCalendarMonths(this.activeDate, 1)
1676
- : this.datePickerService.addCalendarYears(this.activeDate, this.activeDateView == 'year' ? 1 : this.datePickerService.yearsPerPage);
1714
+ : this.datePickerService.addCalendarYears(this.activeDate, this.activeDateView() == 'year' ? 1 : this.datePickerService.yearsPerPage);
1677
1715
  }
1678
1716
  onArrowKeydown(event, direction) {
1679
1717
  if (event.code.startsWith('Arrow')) {
@@ -1698,32 +1736,32 @@ class ApexCalendarComponent {
1698
1736
  return (!this.maxDate || !this.isSameView(this.activeDate, this.maxDate));
1699
1737
  }
1700
1738
  dragStarted(event) {
1701
- this.activeDrag = event;
1739
+ this.activeDrag.set(event);
1702
1740
  }
1703
1741
  /**
1704
1742
  * Called when a drag completes. It may end in cancelation or in the selection
1705
1743
  * of a new range.
1706
1744
  */
1707
1745
  dragEnded(event) {
1708
- if (!this.activeDrag)
1746
+ if (!this.activeDrag())
1709
1747
  return;
1710
1748
  if (event.value) {
1711
1749
  this.userDragDrop.emit(event);
1712
1750
  }
1713
- this.activeDrag = null;
1751
+ this.activeDrag.set(null);
1714
1752
  }
1715
1753
  get viewButtonText() {
1716
- if (this.activeDateView === 'month') {
1754
+ if (this.activeDateView() === 'month') {
1717
1755
  return this.getCurrentMonthAndYear(this.activeDate);
1718
1756
  }
1719
- if (this.activeDateView === 'year') {
1757
+ if (this.activeDateView() === 'year') {
1720
1758
  return this.getCurrentYear(this.activeDate);
1721
1759
  }
1722
1760
  return this.formatYearRange(...this.formatMinAndMaxYearLabels());
1723
1761
  }
1724
1762
  goToDateInView(date, view) {
1725
1763
  this.activeDate = date;
1726
- this.activeDateView = view;
1764
+ this.activeDateView.set(view);
1727
1765
  }
1728
1766
  monthSelectedInYearView(normalizedMonth) {
1729
1767
  this.monthSelected.emit(normalizedMonth);
@@ -1741,10 +1779,10 @@ class ApexCalendarComponent {
1741
1779
  }
1742
1780
  toggleButtonVisibility(event) {
1743
1781
  if (event.type === 'focusout') {
1744
- this.isButtonHidden = true;
1782
+ this.isButtonHidden.set(true);
1745
1783
  }
1746
1784
  else if (event.type === 'focusin') {
1747
- this.isButtonHidden = false;
1785
+ this.isButtonHidden.set(false);
1748
1786
  }
1749
1787
  }
1750
1788
  getCurrentMonthAndYear(date) {
@@ -1771,18 +1809,18 @@ class ApexCalendarComponent {
1771
1809
  return [minYearLabel, maxYearLabel];
1772
1810
  }
1773
1811
  isSameView(date1, date2) {
1774
- if (this.activeDateView == 'month') {
1812
+ if (this.activeDateView() == 'month') {
1775
1813
  return (this.datePickerService.getYear(date1) == this.datePickerService.getYear(date2) &&
1776
1814
  this.datePickerService.getMonth(date1) == this.datePickerService.getMonth(date2));
1777
1815
  }
1778
- if (this.activeDateView == 'year') {
1816
+ if (this.activeDateView() == 'year') {
1779
1817
  return this.datePickerService.getYear(date1) == this.datePickerService.getYear(date2);
1780
1818
  }
1781
1819
  // Otherwise we are in 'multi-year' view.
1782
1820
  return this.datePickerService.isSameMultiYearView(date1, date2, this.minDate, this.maxDate);
1783
1821
  }
1784
1822
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexCalendarComponent, deps: [{ token: ApexDatepickerService }], target: i0.ɵɵFactoryTarget.Component }); }
1785
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ApexCalendarComponent, isStandalone: true, selector: "apex-calendar", inputs: { activeDate: "activeDate", minDate: "minDate", selected: "selected", maxDate: "maxDate", comparisonStart: "comparisonStart", comparisonEnd: "comparisonEnd", startDateAccessibleName: "startDateAccessibleName", endDateAccessibleName: "endDateAccessibleName" }, outputs: { monthSelected: "monthSelected", yearSelected: "yearSelected", activeDateChange: "activeDateChange", userDragDrop: "userDragDrop", selectedChange: "selectedChange", userSelection: "userSelection", calendarClose: "calendarClose" }, ngImport: i0, template: "<div class=\"container\">\n <div class=\"header\">\n <span \n tabindex=\"0\"\n class=\"active-date-view\"\n (click)=\"calendarDateViewChange()\"\n (keydown)=\"onCalendarDateViewKeydown($event)\">\n {{ viewButtonText }}\n </span>\n\n <div class=\"header-navigation\">\n <div class=\"chevron-wrapper\"\n tabindex=\"0\"\n [class.disabled]=\"!previousEnabled()\"\n (click)=\"goToPreviousView()\"\n (keydown)=\"onArrowKeydown($event, 'previous')\">\n <span class=\"chevron left\"></span>\n </div>\n\n <div class=\"chevron-wrapper\" \n tabindex=\"0\"\n [class.disabled]=\"!nextEnabled()\" \n (click)=\"goToNextView()\"\n (keydown)=\"onArrowKeydown($event, 'next')\">\n <span class=\"chevron right\"></span>\n </div>\n </div>\n </div>\n\n <div class=\"calendar\">\n @switch (activeDateView) {\n @case ('month') {\n <apex-calendar-month-view\n [(activeDate)]=\"activeDate\"\n [(selected)]=\"selected\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n (userSelection)=\"dateSelected($event)\"\n (dragStarted)=\"dragStarted($event)\"\n (dragEnded)=\"dragEnded($event)\"\n [activeDrag]=\"activeDrag\">\n </apex-calendar-month-view>\n }\n\n @case ('year') {\n <apex-calendar-year-view\n [(activeDate)]=\"activeDate\"\n [selected]=\"selected\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n (monthSelected)=\"monthSelectedInYearView($event)\"\n (selectedChange)=\"goToDateInView($event, 'month')\">\n </apex-calendar-year-view>\n }\n\n @case ('multi-year') {\n <apex-calendar-multi-year-view\n [(activeDate)]=\"activeDate\"\n [selected]=\"selected\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n (yearSelected)=\"yearSelectedInMultiYearView($event)\"\n (selectedChange)=\"goToDateInView($event, 'year')\">\n </apex-calendar-multi-year-view>\n }\n }\n </div>\n</div>\n\n<apex-button\n [ariaLabel]=\"'Button for closing the calendar.'\" \n (clickChange)=\"calendarClose.emit($event)\" \n (focusChange)=\"toggleButtonVisibility($event)\"\n [class.cdk-visually-hidden]=\"isButtonHidden\">\n Close Calendar\n</apex-button>\n", styles: [":host{position:relative}.header{display:flex;justify-content:space-between;align-items:center;color:var(--apex-datepicker-header-text-color, #FF7955);padding:8px 8px 0}.active-date-view{cursor:pointer;border-radius:4px;padding:2px 4px}.active-date-view:focus{outline:none;color:var(--apex-calendar-header-active-date-view-focus-color, #FFFFFF);background-color:var(--apex-calendar-header-active-date-view-focus-background-color, #FF7955)}.active-date-view:hover{border-radius:4px;color:var(--apex-calendar-header-active-date-view-hover-color, #FFFFFF);background-color:var(--apex-calendar-header-active-date-view-hover-background-color, #FF7955)}.header-navigation{display:flex}.chevron-wrapper{display:flex;border-radius:50%}.chevron-wrapper:focus{outline:none}.chevron-wrapper:hover,.chevron-wrapper:focus:not(.disabled){color:var(--apex-calendar-header-chevron-hover-focus-color, #FFFFFF);background-color:var(--apex-calendar-header-chevron-hover-focus-background-color, #FF7955)}.chevron{width:24px;height:24px;padding:8px;position:relative;cursor:pointer}.chevron:after{inset:0;position:absolute;content:\"\";margin:15.5px;border:0 solid currentColor;border-top-width:2px;border-left-width:2px}.chevron.right{transform:rotate(135deg)}.chevron-wrapper.disabled{pointer-events:none;background-color:none;color:var(--apex-calendar-header-chevron-disabled-color, #5D6068)}.chevron.left{transform:rotate(-45deg)}apex-button{position:absolute;bottom:-50px}\n"], dependencies: [{ kind: "component", type: ApexButtonComponent, selector: "apex-button", inputs: ["link", "state", "options", "ariaLabel"], outputs: ["focusChange", "clickChange"] }, { kind: "component", type: ApexCalendarYearView, selector: "apex-calendar-year-view", inputs: ["activeDate", "selected", "minDate", "maxDate"], outputs: ["selectedChange", "monthSelected", "activeDateChange"] }, { kind: "component", type: ApexCalendarMonthView, selector: "apex-calendar-month-view", inputs: ["activeDate", "selected", "minDate", "maxDate", "activeDrag"], outputs: ["dragStarted", "dragEnded", "activeDateChange", "userSelection", "selectedChange"] }, { kind: "component", type: ApexCalendarMultiYearView, selector: "apex-calendar-multi-year-view", inputs: ["activeDate", "selected", "minDate", "maxDate"], outputs: ["selectedChange", "yearSelected", "activeDateChange"] }] }); }
1823
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ApexCalendarComponent, isStandalone: true, selector: "apex-calendar", inputs: { activeDate: "activeDate", minDate: "minDate", selected: "selected", maxDate: "maxDate", comparisonStart: "comparisonStart", comparisonEnd: "comparisonEnd", startDateAccessibleName: "startDateAccessibleName", endDateAccessibleName: "endDateAccessibleName" }, outputs: { monthSelected: "monthSelected", yearSelected: "yearSelected", activeDateChange: "activeDateChange", userDragDrop: "userDragDrop", selectedChange: "selectedChange", userSelection: "userSelection", calendarClose: "calendarClose" }, ngImport: i0, template: "<div class=\"container\">\n <div class=\"header\">\n <span \n tabindex=\"0\"\n class=\"active-date-view\"\n (click)=\"calendarDateViewChange()\"\n (keydown)=\"onCalendarDateViewKeydown($event)\">\n {{ viewButtonText }}\n </span>\n\n <div class=\"header-navigation\">\n <div class=\"chevron-wrapper\"\n tabindex=\"0\"\n [class.disabled]=\"!previousEnabled()\"\n (click)=\"goToPreviousView()\"\n (keydown)=\"onArrowKeydown($event, 'previous')\">\n <span class=\"chevron left\"></span>\n </div>\n\n <div class=\"chevron-wrapper\" \n tabindex=\"0\"\n [class.disabled]=\"!nextEnabled()\" \n (click)=\"goToNextView()\"\n (keydown)=\"onArrowKeydown($event, 'next')\">\n <span class=\"chevron right\"></span>\n </div>\n </div>\n </div>\n\n <div class=\"calendar\">\n @switch (activeDateView()) {\n @case ('month') {\n <apex-calendar-month-view\n [(activeDate)]=\"activeDate\"\n [(selected)]=\"selected\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n (userSelection)=\"dateSelected($event)\"\n (dragStarted)=\"dragStarted($event)\"\n (dragEnded)=\"dragEnded($event)\"\n [activeDrag]=\"activeDrag()\">\n </apex-calendar-month-view>\n }\n\n @case ('year') {\n <apex-calendar-year-view\n [(activeDate)]=\"activeDate\"\n [selected]=\"selected\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n (monthSelected)=\"monthSelectedInYearView($event)\"\n (selectedChange)=\"goToDateInView($event, 'month')\">\n </apex-calendar-year-view>\n }\n\n @case ('multi-year') {\n <apex-calendar-multi-year-view\n [(activeDate)]=\"activeDate\"\n [selected]=\"selected\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n (yearSelected)=\"yearSelectedInMultiYearView($event)\"\n (selectedChange)=\"goToDateInView($event, 'year')\">\n </apex-calendar-multi-year-view>\n }\n }\n </div>\n</div>\n\n<apex-button\n [ariaLabel]=\"'Button for closing the calendar.'\" \n (clickChange)=\"calendarClose.emit($event)\" \n (focusChange)=\"toggleButtonVisibility($event)\"\n [class.cdk-visually-hidden]=\"isButtonHidden()\">\n Close Calendar\n</apex-button>\n", styles: [":host{position:relative}.header{display:flex;justify-content:space-between;align-items:center;color:var(--apex-datepicker-header-text-color, #FF7955);padding:8px 8px 0}.active-date-view{cursor:pointer;border-radius:4px;padding:2px 4px}.active-date-view:focus{outline:none;color:var(--apex-calendar-header-active-date-view-focus-color, #FFFFFF);background-color:var(--apex-calendar-header-active-date-view-focus-background-color, #FF7955)}.active-date-view:hover{border-radius:4px;color:var(--apex-calendar-header-active-date-view-hover-color, #FFFFFF);background-color:var(--apex-calendar-header-active-date-view-hover-background-color, #FF7955)}.header-navigation{display:flex}.chevron-wrapper{display:flex;border-radius:50%}.chevron-wrapper:focus{outline:none}.chevron-wrapper:hover,.chevron-wrapper:focus:not(.disabled){color:var(--apex-calendar-header-chevron-hover-focus-color, #FFFFFF);background-color:var(--apex-calendar-header-chevron-hover-focus-background-color, #FF7955)}.chevron{width:24px;height:24px;padding:8px;position:relative;cursor:pointer}.chevron:after{inset:0;position:absolute;content:\"\";margin:15.5px;border:0 solid currentColor;border-top-width:2px;border-left-width:2px}.chevron.right{transform:rotate(135deg)}.chevron-wrapper.disabled{pointer-events:none;background-color:none;color:var(--apex-calendar-header-chevron-disabled-color, #5D6068)}.chevron.left{transform:rotate(-45deg)}apex-button{position:absolute;bottom:-50px}\n"], dependencies: [{ kind: "component", type: ApexButtonComponent, selector: "apex-button", inputs: ["link", "state", "options", "ariaLabel"], outputs: ["focusChange", "clickChange"] }, { kind: "component", type: ApexCalendarYearView, selector: "apex-calendar-year-view", inputs: ["activeDate", "selected", "minDate", "maxDate"], outputs: ["selectedChange", "monthSelected", "activeDateChange"] }, { kind: "component", type: ApexCalendarMonthView, selector: "apex-calendar-month-view", inputs: ["activeDate", "selected", "minDate", "maxDate", "activeDrag"], outputs: ["dragStarted", "dragEnded", "activeDateChange", "userSelection", "selectedChange"] }, { kind: "component", type: ApexCalendarMultiYearView, selector: "apex-calendar-multi-year-view", inputs: ["activeDate", "selected", "minDate", "maxDate"], outputs: ["selectedChange", "yearSelected", "activeDateChange"] }] }); }
1786
1824
  }
1787
1825
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexCalendarComponent, decorators: [{
1788
1826
  type: Component,
@@ -1791,7 +1829,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
1791
1829
  ApexCalendarYearView,
1792
1830
  ApexCalendarMonthView,
1793
1831
  ApexCalendarMultiYearView,
1794
- ], template: "<div class=\"container\">\n <div class=\"header\">\n <span \n tabindex=\"0\"\n class=\"active-date-view\"\n (click)=\"calendarDateViewChange()\"\n (keydown)=\"onCalendarDateViewKeydown($event)\">\n {{ viewButtonText }}\n </span>\n\n <div class=\"header-navigation\">\n <div class=\"chevron-wrapper\"\n tabindex=\"0\"\n [class.disabled]=\"!previousEnabled()\"\n (click)=\"goToPreviousView()\"\n (keydown)=\"onArrowKeydown($event, 'previous')\">\n <span class=\"chevron left\"></span>\n </div>\n\n <div class=\"chevron-wrapper\" \n tabindex=\"0\"\n [class.disabled]=\"!nextEnabled()\" \n (click)=\"goToNextView()\"\n (keydown)=\"onArrowKeydown($event, 'next')\">\n <span class=\"chevron right\"></span>\n </div>\n </div>\n </div>\n\n <div class=\"calendar\">\n @switch (activeDateView) {\n @case ('month') {\n <apex-calendar-month-view\n [(activeDate)]=\"activeDate\"\n [(selected)]=\"selected\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n (userSelection)=\"dateSelected($event)\"\n (dragStarted)=\"dragStarted($event)\"\n (dragEnded)=\"dragEnded($event)\"\n [activeDrag]=\"activeDrag\">\n </apex-calendar-month-view>\n }\n\n @case ('year') {\n <apex-calendar-year-view\n [(activeDate)]=\"activeDate\"\n [selected]=\"selected\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n (monthSelected)=\"monthSelectedInYearView($event)\"\n (selectedChange)=\"goToDateInView($event, 'month')\">\n </apex-calendar-year-view>\n }\n\n @case ('multi-year') {\n <apex-calendar-multi-year-view\n [(activeDate)]=\"activeDate\"\n [selected]=\"selected\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n (yearSelected)=\"yearSelectedInMultiYearView($event)\"\n (selectedChange)=\"goToDateInView($event, 'year')\">\n </apex-calendar-multi-year-view>\n }\n }\n </div>\n</div>\n\n<apex-button\n [ariaLabel]=\"'Button for closing the calendar.'\" \n (clickChange)=\"calendarClose.emit($event)\" \n (focusChange)=\"toggleButtonVisibility($event)\"\n [class.cdk-visually-hidden]=\"isButtonHidden\">\n Close Calendar\n</apex-button>\n", styles: [":host{position:relative}.header{display:flex;justify-content:space-between;align-items:center;color:var(--apex-datepicker-header-text-color, #FF7955);padding:8px 8px 0}.active-date-view{cursor:pointer;border-radius:4px;padding:2px 4px}.active-date-view:focus{outline:none;color:var(--apex-calendar-header-active-date-view-focus-color, #FFFFFF);background-color:var(--apex-calendar-header-active-date-view-focus-background-color, #FF7955)}.active-date-view:hover{border-radius:4px;color:var(--apex-calendar-header-active-date-view-hover-color, #FFFFFF);background-color:var(--apex-calendar-header-active-date-view-hover-background-color, #FF7955)}.header-navigation{display:flex}.chevron-wrapper{display:flex;border-radius:50%}.chevron-wrapper:focus{outline:none}.chevron-wrapper:hover,.chevron-wrapper:focus:not(.disabled){color:var(--apex-calendar-header-chevron-hover-focus-color, #FFFFFF);background-color:var(--apex-calendar-header-chevron-hover-focus-background-color, #FF7955)}.chevron{width:24px;height:24px;padding:8px;position:relative;cursor:pointer}.chevron:after{inset:0;position:absolute;content:\"\";margin:15.5px;border:0 solid currentColor;border-top-width:2px;border-left-width:2px}.chevron.right{transform:rotate(135deg)}.chevron-wrapper.disabled{pointer-events:none;background-color:none;color:var(--apex-calendar-header-chevron-disabled-color, #5D6068)}.chevron.left{transform:rotate(-45deg)}apex-button{position:absolute;bottom:-50px}\n"] }]
1832
+ ], template: "<div class=\"container\">\n <div class=\"header\">\n <span \n tabindex=\"0\"\n class=\"active-date-view\"\n (click)=\"calendarDateViewChange()\"\n (keydown)=\"onCalendarDateViewKeydown($event)\">\n {{ viewButtonText }}\n </span>\n\n <div class=\"header-navigation\">\n <div class=\"chevron-wrapper\"\n tabindex=\"0\"\n [class.disabled]=\"!previousEnabled()\"\n (click)=\"goToPreviousView()\"\n (keydown)=\"onArrowKeydown($event, 'previous')\">\n <span class=\"chevron left\"></span>\n </div>\n\n <div class=\"chevron-wrapper\" \n tabindex=\"0\"\n [class.disabled]=\"!nextEnabled()\" \n (click)=\"goToNextView()\"\n (keydown)=\"onArrowKeydown($event, 'next')\">\n <span class=\"chevron right\"></span>\n </div>\n </div>\n </div>\n\n <div class=\"calendar\">\n @switch (activeDateView()) {\n @case ('month') {\n <apex-calendar-month-view\n [(activeDate)]=\"activeDate\"\n [(selected)]=\"selected\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n (userSelection)=\"dateSelected($event)\"\n (dragStarted)=\"dragStarted($event)\"\n (dragEnded)=\"dragEnded($event)\"\n [activeDrag]=\"activeDrag()\">\n </apex-calendar-month-view>\n }\n\n @case ('year') {\n <apex-calendar-year-view\n [(activeDate)]=\"activeDate\"\n [selected]=\"selected\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n (monthSelected)=\"monthSelectedInYearView($event)\"\n (selectedChange)=\"goToDateInView($event, 'month')\">\n </apex-calendar-year-view>\n }\n\n @case ('multi-year') {\n <apex-calendar-multi-year-view\n [(activeDate)]=\"activeDate\"\n [selected]=\"selected\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n (yearSelected)=\"yearSelectedInMultiYearView($event)\"\n (selectedChange)=\"goToDateInView($event, 'year')\">\n </apex-calendar-multi-year-view>\n }\n }\n </div>\n</div>\n\n<apex-button\n [ariaLabel]=\"'Button for closing the calendar.'\" \n (clickChange)=\"calendarClose.emit($event)\" \n (focusChange)=\"toggleButtonVisibility($event)\"\n [class.cdk-visually-hidden]=\"isButtonHidden()\">\n Close Calendar\n</apex-button>\n", styles: [":host{position:relative}.header{display:flex;justify-content:space-between;align-items:center;color:var(--apex-datepicker-header-text-color, #FF7955);padding:8px 8px 0}.active-date-view{cursor:pointer;border-radius:4px;padding:2px 4px}.active-date-view:focus{outline:none;color:var(--apex-calendar-header-active-date-view-focus-color, #FFFFFF);background-color:var(--apex-calendar-header-active-date-view-focus-background-color, #FF7955)}.active-date-view:hover{border-radius:4px;color:var(--apex-calendar-header-active-date-view-hover-color, #FFFFFF);background-color:var(--apex-calendar-header-active-date-view-hover-background-color, #FF7955)}.header-navigation{display:flex}.chevron-wrapper{display:flex;border-radius:50%}.chevron-wrapper:focus{outline:none}.chevron-wrapper:hover,.chevron-wrapper:focus:not(.disabled){color:var(--apex-calendar-header-chevron-hover-focus-color, #FFFFFF);background-color:var(--apex-calendar-header-chevron-hover-focus-background-color, #FF7955)}.chevron{width:24px;height:24px;padding:8px;position:relative;cursor:pointer}.chevron:after{inset:0;position:absolute;content:\"\";margin:15.5px;border:0 solid currentColor;border-top-width:2px;border-left-width:2px}.chevron.right{transform:rotate(135deg)}.chevron-wrapper.disabled{pointer-events:none;background-color:none;color:var(--apex-calendar-header-chevron-disabled-color, #5D6068)}.chevron.left{transform:rotate(-45deg)}apex-button{position:absolute;bottom:-50px}\n"] }]
1795
1833
  }], ctorParameters: () => [{ type: ApexDatepickerService }], propDecorators: { activeDate: [{
1796
1834
  type: Input
1797
1835
  }], minDate: [{
@@ -1838,29 +1876,31 @@ class DateRangeFormControls {
1838
1876
  }
1839
1877
  }
1840
1878
  class ApexDatepickerComponent {
1841
- constructor(ngZone, osService, elementRef, overlayService, changeDetectorRef, datepickerService, rangeSelectionStrategy) {
1879
+ constructor(ngZone, osService, elementRef, overlayService, datepickerService, rangeSelectionStrategy) {
1842
1880
  this.ngZone = ngZone;
1843
1881
  this.osService = osService;
1844
1882
  this.elementRef = elementRef;
1845
1883
  this.overlayService = overlayService;
1846
- this.changeDetectorRef = changeDetectorRef;
1847
1884
  this.datepickerService = datepickerService;
1848
1885
  this.rangeSelectionStrategy = rangeSelectionStrategy;
1886
+ this.shouldShowCalendar = signal(false, ...(ngDevMode ? [{ debugName: "shouldShowCalendar" }] : []));
1849
1887
  this.closeButtonFocused = false;
1850
- this.formErrorMessage = null;
1888
+ this.formErrorMessage = signal(null, ...(ngDevMode ? [{ debugName: "formErrorMessage" }] : []));
1889
+ this._activeDate = signal(null, ...(ngDevMode ? [{ debugName: "_activeDate" }] : []));
1890
+ this._selected = signal(null, ...(ngDevMode ? [{ debugName: "_selected" }] : []));
1851
1891
  this._minDate = this.options?.min ? this.options.min : null;
1852
1892
  this._maxDate = this.options?.max ? this.options.max : null;
1853
1893
  this.formControlSubscriptions = [];
1854
1894
  }
1855
1895
  get activeDate() {
1856
- return this._activeDate;
1896
+ return this._activeDate();
1857
1897
  }
1858
1898
  set activeDate(value) {
1859
1899
  const validDate = this.datepickerService.getValidDateOrNull(this.datepickerService.deserialize(value)) ||
1860
1900
  this.datepickerService.today();
1861
- this._activeDate = this.datepickerService.clampDate(validDate, this.minDate, this.maxDate);
1862
- this._activeDate = value;
1863
- this.shouldShowCalendar = false;
1901
+ this._activeDate.set(this.datepickerService.clampDate(validDate, this.minDate, this.maxDate));
1902
+ this._activeDate.set(value);
1903
+ this.shouldShowCalendar.set(false);
1864
1904
  }
1865
1905
  get minDate() {
1866
1906
  return this._minDate;
@@ -1875,33 +1915,32 @@ class ApexDatepickerComponent {
1875
1915
  this._maxDate = this.datepickerService.getValidDateOrNull(this.datepickerService.deserialize(value));
1876
1916
  }
1877
1917
  get selectedDate() {
1878
- return this._selected;
1918
+ return this._selected();
1879
1919
  }
1880
1920
  set selectedDate(value) {
1881
1921
  if (this.options.formControlName instanceof DateRangeFormControls) {
1882
1922
  if (value instanceof DateRange) {
1883
- this._selected = value;
1923
+ this._selected.set(value);
1884
1924
  }
1885
1925
  else {
1886
- this._selected = new DateRange(this.datepickerService.getValidDateOrNull(this.datepickerService.deserialize(value)), null);
1926
+ this._selected.set(new DateRange(this.datepickerService.getValidDateOrNull(this.datepickerService.deserialize(value)), null));
1887
1927
  }
1888
- this.options.formGroup.controls[this.options.formControlName.start].setValue(this._selected.start, { emitEvent: false });
1889
- this.options.formGroup.controls[this.options.formControlName.end].setValue(this._selected.end, { emitEvent: false });
1928
+ const selected = this._selected();
1929
+ this.options.formGroup.controls[this.options.formControlName.start].setValue(selected.start, { emitEvent: false });
1930
+ this.options.formGroup.controls[this.options.formControlName.end].setValue(selected.end, { emitEvent: false });
1890
1931
  }
1891
1932
  else {
1892
- this._selected = this.datepickerService.getValidDateOrNull(this.datepickerService.deserialize(value));
1893
- this.options.formGroup.controls[this.options.formControlName].setValue(this._selected, { emitEvent: false });
1933
+ this._selected.set(this.datepickerService.getValidDateOrNull(this.datepickerService.deserialize(value)));
1934
+ this.options.formGroup.controls[this.options.formControlName].setValue(this._selected(), { emitEvent: false });
1894
1935
  }
1895
1936
  }
1896
1937
  ngOnInit() {
1897
- this._selected =
1898
- this.options.formControlName instanceof DateRangeFormControls
1899
- ? new DateRange(this.options.formGroup.value[this.options.formControlName.start], this.options.formGroup.value[this.options.formControlName.end])
1900
- : this.options.formGroup.value[this.options.formControlName];
1938
+ this._selected.set(this.options.formControlName instanceof DateRangeFormControls
1939
+ ? new DateRange(this.options.formGroup.value[this.options.formControlName.start], this.options.formGroup.value[this.options.formControlName.end])
1940
+ : this.options.formGroup.value[this.options.formControlName]);
1901
1941
  this.maxDate = this.options.max ? this.options.max : null;
1902
1942
  this.minDate = this.options.min ? this.options.min : null;
1903
1943
  this.initDefaultErrors();
1904
- this.changeDetectorRef.detectChanges();
1905
1944
  this.ngZone.runOutsideAngular(() => {
1906
1945
  if (this.datepicker) {
1907
1946
  this.datepicker.nativeElement.addEventListener('focus', () => this.activateControl());
@@ -1921,25 +1960,21 @@ class ApexDatepickerComponent {
1921
1960
  if (this.calendar) {
1922
1961
  return;
1923
1962
  }
1924
- this.ngZone.run(() => {
1925
- this.shouldShowCalendar = true;
1926
- });
1927
- this.changeDetectorRef.markForCheck();
1963
+ this.shouldShowCalendar.set(true);
1928
1964
  setTimeout(() => {
1929
1965
  this.generateCalendarPosition(this.calendar);
1930
1966
  this.overlayService.appendToOverlay(this.calendar.nativeElement, true);
1931
- this.changeDetectorRef.detectChanges();
1932
1967
  });
1933
1968
  }
1934
1969
  onClick(event) {
1935
- if (!this.shouldShowCalendar) {
1970
+ if (!this.shouldShowCalendar()) {
1936
1971
  return;
1937
1972
  }
1938
1973
  if (this.datepicker) {
1939
1974
  const isIputClicked = this.checkPosition(event, this.elementRef.nativeElement.getBoundingClientRect());
1940
1975
  if (isIputClicked) {
1941
- this.shouldShowCalendar = isIputClicked;
1942
- if (!this.shouldShowCalendar) {
1976
+ this.shouldShowCalendar.set(isIputClicked);
1977
+ if (!this.shouldShowCalendar()) {
1943
1978
  this.overlayService.removeFromOverlay(this.calendar.nativeElement);
1944
1979
  }
1945
1980
  return;
@@ -1948,17 +1983,15 @@ class ApexDatepickerComponent {
1948
1983
  if (this.calendar) {
1949
1984
  const isCalendarClicked = this.checkPosition(event, this.calendar.nativeElement.getBoundingClientRect());
1950
1985
  if (isCalendarClicked) {
1951
- this.ngZone.run(() => {
1952
- this.shouldShowCalendar = isCalendarClicked;
1953
- });
1954
- if (!this.shouldShowCalendar) {
1986
+ this.shouldShowCalendar.set(isCalendarClicked);
1987
+ if (!this.shouldShowCalendar()) {
1955
1988
  this.overlayService.removeFromOverlay(this.calendar.nativeElement);
1956
1989
  }
1957
1990
  return;
1958
1991
  }
1959
1992
  }
1960
1993
  this.closeCalendar();
1961
- if (!this.shouldShowCalendar) {
1994
+ if (!this.shouldShowCalendar()) {
1962
1995
  this.overlayService.removeFromOverlay(this.calendar.nativeElement);
1963
1996
  }
1964
1997
  }
@@ -1979,10 +2012,6 @@ class ApexDatepickerComponent {
1979
2012
  }
1980
2013
  return 'No date selected.';
1981
2014
  }
1982
- getformErrorMessage() {
1983
- this.formErrorMessage = this.getErrorIfControlInvalid();
1984
- return this.formErrorMessage ? this.formErrorMessage : null;
1985
- }
1986
2015
  onCloseClick() {
1987
2016
  this.closeCalendar();
1988
2017
  if (this.datepicker) {
@@ -2020,7 +2049,7 @@ class ApexDatepickerComponent {
2020
2049
  }
2021
2050
  }
2022
2051
  closeCalendar() {
2023
- this.shouldShowCalendar = false;
2052
+ this.shouldShowCalendar.set(false);
2024
2053
  if (this.options.formControlName instanceof DateRangeFormControls) {
2025
2054
  this.options.formGroup.controls[this.options.formControlName.start].markAsTouched();
2026
2055
  this.options.formGroup.controls[this.options.formControlName.end].markAsTouched();
@@ -2053,12 +2082,18 @@ class ApexDatepickerComponent {
2053
2082
  if (value && this.selectedDate instanceof DateRange) {
2054
2083
  this.selectedDate = new DateRange(this.datepickerService.getValidDateOrNull(this.datepickerService.deserialize(value)), this.datepickerService.getValidDateOrNull(this.datepickerService.deserialize(this.selectedDate.end)));
2055
2084
  }
2056
- this.changeDetectorRef.detectChanges();
2057
2085
  }), endControl.valueChanges.subscribe((value) => {
2058
2086
  if (value && this.selectedDate instanceof DateRange) {
2059
2087
  this.selectedDate = new DateRange(this.datepickerService.getValidDateOrNull(this.datepickerService.deserialize(this.selectedDate.start)), this.datepickerService.getValidDateOrNull(this.datepickerService.deserialize(value)));
2060
- this.changeDetectorRef.detectChanges();
2061
2088
  }
2089
+ }), startControl.events
2090
+ .pipe(filter(event => event instanceof TouchedChangeEvent))
2091
+ .subscribe(() => {
2092
+ this.formErrorMessage.set(this.getErrorIfControlInvalid());
2093
+ }), endControl.events
2094
+ .pipe(filter(event => event instanceof TouchedChangeEvent))
2095
+ .subscribe(() => {
2096
+ this.formErrorMessage.set(this.getErrorIfControlInvalid());
2062
2097
  }));
2063
2098
  return;
2064
2099
  }
@@ -2066,7 +2101,10 @@ class ApexDatepickerComponent {
2066
2101
  const control = this.options.formGroup.controls[this.options.formControlName];
2067
2102
  this.formControlSubscriptions.push(control.valueChanges.subscribe(() => {
2068
2103
  this.selectedDate = control.value;
2069
- this.changeDetectorRef.detectChanges();
2104
+ }), control.events
2105
+ .pipe(filter(event => event instanceof TouchedChangeEvent))
2106
+ .subscribe(() => {
2107
+ this.formErrorMessage.set(this.getErrorIfControlInvalid());
2070
2108
  }));
2071
2109
  }
2072
2110
  }
@@ -2145,16 +2183,16 @@ class ApexDatepickerComponent {
2145
2183
  this.options.formGroup.controls[this.options.formControlName].addValidators(maxValidator);
2146
2184
  }
2147
2185
  }
2148
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexDatepickerComponent, deps: [{ token: i0.NgZone }, { token: i1$1.OSService }, { token: i0.ElementRef }, { token: i1$1.OverlayService }, { token: i0.ChangeDetectorRef }, { token: ApexDatepickerService }, { token: DefaultCalendarRangeStrategy }], target: i0.ɵɵFactoryTarget.Component }); }
2149
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ApexDatepickerComponent, isStandalone: true, selector: "apex-datepicker", inputs: { options: "options" }, host: { listeners: { "document:click": "onClick($event)" } }, viewQueries: [{ propertyName: "datepicker", first: true, predicate: ["datepicker"], descendants: true }, { propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true }], ngImport: i0, template: "@if (options) {\n @if (options.formControlName && options.formGroup) {\n <div class=\"label-wrapper\">\n @if (options.label !== '') {\n <label>{{ options.label }}</label>\n }\n </div>\n\n <div tabindex=\"0\" \n #datepicker \n class=\"datepicker\"\n [class.datepicker-error]=\"formErrorMessage\"\n (click)=\"this.activateControl()\">\n <span\n class=\"datepicker-value\"\n role=\"textbox\" \n aria-readonly=\"true\" \n aria-label=\"Selected date\"\n aria-live=\"polite\">\n {{ getDisplayValue() }}\n </span>\n\n <div class=\"svg-wrapper\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"#f1f1f1\" \n viewBox=\"0 0 256 256\"><path d=\"M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Zm-68-76a12,12,0,1,1-12-12A12,12,0,0,1,140,132Zm44,0a12,12,0,1,1-12-12A12,12,0,0,1,184,132ZM96,172a12,12,0,1,1-12-12A12,12,0,0,1,96,172Zm44,0a12,12,0,1,1-12-12A12,12,0,0,1,140,172Zm44,0a12,12,0,1,1-12-12A12,12,0,0,1,184,172Z\"></path>\n </svg>\n </div>\n </div>\n\n <div class=\"footer\">\n <div>{{ getformErrorMessage() }}</div>\n </div>\n\n @if (shouldShowCalendar) {\n <div #calendar class=\"calendar\">\n <apex-calendar\n [(activeDate)]=\"activeDate\"\n [(selected)]=\"selectedDate\"\n [minDate]=\"minDate\"\n [maxDate]=\"maxDate\"\n (calendarClose)=\"onCloseKeyDown($event)\"\n (userSelection)=\"handleUserSelection($event)\"\n (userDragDrop)=\"handleDragAndDropEnd($event)\">\n </apex-calendar>\n </div>\n }\n }\n}\n", styles: [":host{width:296px;display:block;touch-action:manipulation}apex-calendar{width:100%;height:358px}.header .label-wrapper{display:flex;justify-content:center;align-items:center;text-wrap:wrap}.label-wrapper label{font-size:14px;font-weight:600;margin-right:4px}.datepicker{display:flex;flex-direction:row;justify-content:space-between;align-items:center;cursor:pointer;border:var(--apex-datepicker-border, 1px solid #E9E9E9);border-radius:4px 24px 24px 4px;transition:border .3s ease}.datepicker-error{border:var(--apex-datepicker-error-border, 1px solid #F96138)}.datepicker-value{width:100%;text-align:center}.datepicker:hover,.datepicker:focus{outline:none;border-color:var(--apex-datepicker-border-hover-color, #FF7955)}.svg-wrapper{height:40px}.svg-wrapper svg{background-color:var(--apex-datepicker-svg-background-color, #FF7955);fill:var(--apex-datepicker-svg-fill-color, #FFFFFF);border-radius:50%;padding:8px}.svg-wrapper svg:hover{background-color:var(--apex-datepicker-svg-background-hover-color, #F96138)}.calendar{width:296px;display:flex;position:fixed;flex-direction:column;justify-content:center;align-items:center;pointer-events:all;border-radius:4px;background-color:var(--apex-calendar-background-color, #ffffff);box-shadow:var(--apex-calendar-box-shadow, 0px 2px 4px -1px rgba(0, 0, 0, .2), 0px 4px 5px 0px rgba(0, 0, 0, .14), 0px 1px 10px 0px rgba(0, 0, 0, .12));z-index:98;animation:fadeIn .3s}.footer{height:14px;font-size:12px;margin-top:2px;color:var(--apex-datepicker-error-color, #F96138)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}::ng-deep .cdk-visually-hidden{width:1px;height:1px;clip:rect(0 0 0 0);overflow:hidden;position:absolute;white-space:nowrap;outline:0;border:0;left:0;padding:0;margin:-1px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: ApexCalendarComponent, selector: "apex-calendar", inputs: ["activeDate", "minDate", "selected", "maxDate", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["monthSelected", "yearSelected", "activeDateChange", "userDragDrop", "selectedChange", "userSelection", "calendarClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
2186
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexDatepickerComponent, deps: [{ token: i0.NgZone }, { token: i1$1.OSService }, { token: i0.ElementRef }, { token: i1$1.OverlayService }, { token: ApexDatepickerService }, { token: DefaultCalendarRangeStrategy }], target: i0.ɵɵFactoryTarget.Component }); }
2187
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ApexDatepickerComponent, isStandalone: true, selector: "apex-datepicker", inputs: { options: "options" }, host: { listeners: { "document:click": "onClick($event)" } }, viewQueries: [{ propertyName: "datepicker", first: true, predicate: ["datepicker"], descendants: true }, { propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true }], ngImport: i0, template: "@if (options) {\n @if (options.formControlName && options.formGroup) {\n <div class=\"label-wrapper\">\n @if (options.label !== '') {\n <label>{{ options.label }}</label>\n }\n </div>\n\n <div tabindex=\"0\" \n #datepicker \n class=\"datepicker\"\n [class.datepicker-error]=\"formErrorMessage()\"\n (click)=\"this.activateControl()\">\n <span\n class=\"datepicker-value\"\n role=\"textbox\" \n aria-readonly=\"true\" \n aria-label=\"Selected date\"\n aria-live=\"polite\">\n {{ getDisplayValue() }}\n </span>\n\n <div class=\"svg-wrapper\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"#f1f1f1\" \n viewBox=\"0 0 256 256\"><path d=\"M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Zm-68-76a12,12,0,1,1-12-12A12,12,0,0,1,140,132Zm44,0a12,12,0,1,1-12-12A12,12,0,0,1,184,132ZM96,172a12,12,0,1,1-12-12A12,12,0,0,1,96,172Zm44,0a12,12,0,1,1-12-12A12,12,0,0,1,140,172Zm44,0a12,12,0,1,1-12-12A12,12,0,0,1,184,172Z\"></path>\n </svg>\n </div>\n </div>\n\n <div class=\"footer\">\n <div>{{ formErrorMessage() }}</div>\n </div>\n\n @if (shouldShowCalendar()) {\n <div #calendar class=\"calendar\">\n <apex-calendar\n [(activeDate)]=\"activeDate\"\n [(selected)]=\"selectedDate\"\n [minDate]=\"minDate\"\n [maxDate]=\"maxDate\"\n (calendarClose)=\"onCloseKeyDown($event)\"\n (userSelection)=\"handleUserSelection($event)\"\n (userDragDrop)=\"handleDragAndDropEnd($event)\">\n </apex-calendar>\n </div>\n }\n }\n}\n", styles: [":host{width:296px;display:block;touch-action:manipulation}apex-calendar{width:100%;height:358px}.header .label-wrapper{display:flex;justify-content:center;align-items:center;text-wrap:wrap}.label-wrapper label{font-size:14px;font-weight:600;margin-right:4px}.datepicker{display:flex;flex-direction:row;justify-content:space-between;align-items:center;cursor:pointer;border:var(--apex-datepicker-border, 1px solid #E9E9E9);border-radius:4px 24px 24px 4px;transition:border .3s ease}.datepicker-error{border:var(--apex-datepicker-error-border, 1px solid #F96138)}.datepicker-value{width:100%;text-align:center}.datepicker:hover,.datepicker:focus{outline:none;border-color:var(--apex-datepicker-border-hover-color, #FF7955)}.svg-wrapper{height:40px}.svg-wrapper svg{background-color:var(--apex-datepicker-svg-background-color, #FF7955);fill:var(--apex-datepicker-svg-fill-color, #FFFFFF);border-radius:50%;padding:8px}.svg-wrapper svg:hover{background-color:var(--apex-datepicker-svg-background-hover-color, #F96138)}.calendar{width:296px;display:flex;position:fixed;flex-direction:column;justify-content:center;align-items:center;pointer-events:all;border-radius:4px;background-color:var(--apex-calendar-background-color, #ffffff);box-shadow:var(--apex-calendar-box-shadow, 0px 2px 4px -1px rgba(0, 0, 0, .2), 0px 4px 5px 0px rgba(0, 0, 0, .14), 0px 1px 10px 0px rgba(0, 0, 0, .12));z-index:98;animation:fadeIn .3s}.footer{height:14px;font-size:12px;margin-top:2px;color:var(--apex-datepicker-error-color, #F96138)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}::ng-deep .cdk-visually-hidden{width:1px;height:1px;clip:rect(0 0 0 0);overflow:hidden;position:absolute;white-space:nowrap;outline:0;border:0;left:0;padding:0;margin:-1px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: ApexCalendarComponent, selector: "apex-calendar", inputs: ["activeDate", "minDate", "selected", "maxDate", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["monthSelected", "yearSelected", "activeDateChange", "userDragDrop", "selectedChange", "userSelection", "calendarClose"] }] }); }
2150
2188
  }
2151
2189
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexDatepickerComponent, decorators: [{
2152
2190
  type: Component,
2153
- args: [{ selector: 'apex-datepicker', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
2191
+ args: [{ selector: 'apex-datepicker', imports: [
2154
2192
  FormsModule,
2155
2193
  ApexCalendarComponent,
2156
- ], template: "@if (options) {\n @if (options.formControlName && options.formGroup) {\n <div class=\"label-wrapper\">\n @if (options.label !== '') {\n <label>{{ options.label }}</label>\n }\n </div>\n\n <div tabindex=\"0\" \n #datepicker \n class=\"datepicker\"\n [class.datepicker-error]=\"formErrorMessage\"\n (click)=\"this.activateControl()\">\n <span\n class=\"datepicker-value\"\n role=\"textbox\" \n aria-readonly=\"true\" \n aria-label=\"Selected date\"\n aria-live=\"polite\">\n {{ getDisplayValue() }}\n </span>\n\n <div class=\"svg-wrapper\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"#f1f1f1\" \n viewBox=\"0 0 256 256\"><path d=\"M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Zm-68-76a12,12,0,1,1-12-12A12,12,0,0,1,140,132Zm44,0a12,12,0,1,1-12-12A12,12,0,0,1,184,132ZM96,172a12,12,0,1,1-12-12A12,12,0,0,1,96,172Zm44,0a12,12,0,1,1-12-12A12,12,0,0,1,140,172Zm44,0a12,12,0,1,1-12-12A12,12,0,0,1,184,172Z\"></path>\n </svg>\n </div>\n </div>\n\n <div class=\"footer\">\n <div>{{ getformErrorMessage() }}</div>\n </div>\n\n @if (shouldShowCalendar) {\n <div #calendar class=\"calendar\">\n <apex-calendar\n [(activeDate)]=\"activeDate\"\n [(selected)]=\"selectedDate\"\n [minDate]=\"minDate\"\n [maxDate]=\"maxDate\"\n (calendarClose)=\"onCloseKeyDown($event)\"\n (userSelection)=\"handleUserSelection($event)\"\n (userDragDrop)=\"handleDragAndDropEnd($event)\">\n </apex-calendar>\n </div>\n }\n }\n}\n", styles: [":host{width:296px;display:block;touch-action:manipulation}apex-calendar{width:100%;height:358px}.header .label-wrapper{display:flex;justify-content:center;align-items:center;text-wrap:wrap}.label-wrapper label{font-size:14px;font-weight:600;margin-right:4px}.datepicker{display:flex;flex-direction:row;justify-content:space-between;align-items:center;cursor:pointer;border:var(--apex-datepicker-border, 1px solid #E9E9E9);border-radius:4px 24px 24px 4px;transition:border .3s ease}.datepicker-error{border:var(--apex-datepicker-error-border, 1px solid #F96138)}.datepicker-value{width:100%;text-align:center}.datepicker:hover,.datepicker:focus{outline:none;border-color:var(--apex-datepicker-border-hover-color, #FF7955)}.svg-wrapper{height:40px}.svg-wrapper svg{background-color:var(--apex-datepicker-svg-background-color, #FF7955);fill:var(--apex-datepicker-svg-fill-color, #FFFFFF);border-radius:50%;padding:8px}.svg-wrapper svg:hover{background-color:var(--apex-datepicker-svg-background-hover-color, #F96138)}.calendar{width:296px;display:flex;position:fixed;flex-direction:column;justify-content:center;align-items:center;pointer-events:all;border-radius:4px;background-color:var(--apex-calendar-background-color, #ffffff);box-shadow:var(--apex-calendar-box-shadow, 0px 2px 4px -1px rgba(0, 0, 0, .2), 0px 4px 5px 0px rgba(0, 0, 0, .14), 0px 1px 10px 0px rgba(0, 0, 0, .12));z-index:98;animation:fadeIn .3s}.footer{height:14px;font-size:12px;margin-top:2px;color:var(--apex-datepicker-error-color, #F96138)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}::ng-deep .cdk-visually-hidden{width:1px;height:1px;clip:rect(0 0 0 0);overflow:hidden;position:absolute;white-space:nowrap;outline:0;border:0;left:0;padding:0;margin:-1px}\n"] }]
2157
- }], ctorParameters: () => [{ type: i0.NgZone }, { type: i1$1.OSService }, { type: i0.ElementRef }, { type: i1$1.OverlayService }, { type: i0.ChangeDetectorRef }, { type: ApexDatepickerService }, { type: DefaultCalendarRangeStrategy }], propDecorators: { datepicker: [{
2194
+ ], template: "@if (options) {\n @if (options.formControlName && options.formGroup) {\n <div class=\"label-wrapper\">\n @if (options.label !== '') {\n <label>{{ options.label }}</label>\n }\n </div>\n\n <div tabindex=\"0\" \n #datepicker \n class=\"datepicker\"\n [class.datepicker-error]=\"formErrorMessage()\"\n (click)=\"this.activateControl()\">\n <span\n class=\"datepicker-value\"\n role=\"textbox\" \n aria-readonly=\"true\" \n aria-label=\"Selected date\"\n aria-live=\"polite\">\n {{ getDisplayValue() }}\n </span>\n\n <div class=\"svg-wrapper\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"#f1f1f1\" \n viewBox=\"0 0 256 256\"><path d=\"M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Zm-68-76a12,12,0,1,1-12-12A12,12,0,0,1,140,132Zm44,0a12,12,0,1,1-12-12A12,12,0,0,1,184,132ZM96,172a12,12,0,1,1-12-12A12,12,0,0,1,96,172Zm44,0a12,12,0,1,1-12-12A12,12,0,0,1,140,172Zm44,0a12,12,0,1,1-12-12A12,12,0,0,1,184,172Z\"></path>\n </svg>\n </div>\n </div>\n\n <div class=\"footer\">\n <div>{{ formErrorMessage() }}</div>\n </div>\n\n @if (shouldShowCalendar()) {\n <div #calendar class=\"calendar\">\n <apex-calendar\n [(activeDate)]=\"activeDate\"\n [(selected)]=\"selectedDate\"\n [minDate]=\"minDate\"\n [maxDate]=\"maxDate\"\n (calendarClose)=\"onCloseKeyDown($event)\"\n (userSelection)=\"handleUserSelection($event)\"\n (userDragDrop)=\"handleDragAndDropEnd($event)\">\n </apex-calendar>\n </div>\n }\n }\n}\n", styles: [":host{width:296px;display:block;touch-action:manipulation}apex-calendar{width:100%;height:358px}.header .label-wrapper{display:flex;justify-content:center;align-items:center;text-wrap:wrap}.label-wrapper label{font-size:14px;font-weight:600;margin-right:4px}.datepicker{display:flex;flex-direction:row;justify-content:space-between;align-items:center;cursor:pointer;border:var(--apex-datepicker-border, 1px solid #E9E9E9);border-radius:4px 24px 24px 4px;transition:border .3s ease}.datepicker-error{border:var(--apex-datepicker-error-border, 1px solid #F96138)}.datepicker-value{width:100%;text-align:center}.datepicker:hover,.datepicker:focus{outline:none;border-color:var(--apex-datepicker-border-hover-color, #FF7955)}.svg-wrapper{height:40px}.svg-wrapper svg{background-color:var(--apex-datepicker-svg-background-color, #FF7955);fill:var(--apex-datepicker-svg-fill-color, #FFFFFF);border-radius:50%;padding:8px}.svg-wrapper svg:hover{background-color:var(--apex-datepicker-svg-background-hover-color, #F96138)}.calendar{width:296px;display:flex;position:fixed;flex-direction:column;justify-content:center;align-items:center;pointer-events:all;border-radius:4px;background-color:var(--apex-calendar-background-color, #ffffff);box-shadow:var(--apex-calendar-box-shadow, 0px 2px 4px -1px rgba(0, 0, 0, .2), 0px 4px 5px 0px rgba(0, 0, 0, .14), 0px 1px 10px 0px rgba(0, 0, 0, .12));z-index:98;animation:fadeIn .3s}.footer{height:14px;font-size:12px;margin-top:2px;color:var(--apex-datepicker-error-color, #F96138)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}::ng-deep .cdk-visually-hidden{width:1px;height:1px;clip:rect(0 0 0 0);overflow:hidden;position:absolute;white-space:nowrap;outline:0;border:0;left:0;padding:0;margin:-1px}\n"] }]
2195
+ }], ctorParameters: () => [{ type: i0.NgZone }, { type: i1$1.OSService }, { type: i0.ElementRef }, { type: i1$1.OverlayService }, { type: ApexDatepickerService }, { type: DefaultCalendarRangeStrategy }], propDecorators: { datepicker: [{
2158
2196
  type: ViewChild,
2159
2197
  args: ['datepicker']
2160
2198
  }], calendar: [{