@apexara/ng-components 1.0.6-test.2 → 1.0.6-test.4

package/fesm2022/apexara-ng-components-datepicker.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Output, Input, Component, Injectable, ViewChild, signal, HostListener } from '@angular/core';
+import { EventEmitter, signal, Output, Input, Component, Injectable, ViewChild, HostListener } from '@angular/core';
 import { FormsModule, ReactiveFormsModule, TouchedChangeEvent } from '@angular/forms';
 import { filter } from 'rxjs';
 import * as i1$1 from '@apexara/ng-components/services';
@@ -49,9 +49,15 @@ class CalendarBody {
         this.dragStarted = new EventEmitter();
         /** Emits the date at the conclusion of a drag, or null if mouse was not released on a date. */
         this.dragEnded = new EventEmitter();
+        /** The number of blank cells to put at the beginning for the first row. */
+        this.firstRowOffset = signal(0, ...(ngDevMode ? [{ debugName: "firstRowOffset" }] : []));
+        /** Padding for the individual date cells. */
+        this.cellPadding = signal('', ...(ngDevMode ? [{ debugName: "cellPadding" }] : []));
         this.id = `calendar-body-${calendarBodyId++}`;
         this.startDateLabelId = `${this.id}-start-date`;
         this.endDateLabelId = `${this.id}-end-date`;
+        /** Width of an individual cell. */
+        this.cellWidth = signal('', ...(ngDevMode ? [{ debugName: "cellWidth" }] : []));
         /**
           * Used to focus the active cell after change detection has run.
         */
@@ -197,13 +203,13 @@ class CalendarBody {
         const columnChanges = changes['numCols'];
         const { rows, numCols } = this;
         if (changes['rows'] || columnChanges) {
-            this.firstRowOffset = rows && rows.length && rows[0].length ? numCols - rows[0].length : 0;
+            this.firstRowOffset.set(rows && rows.length && rows[0].length ? numCols - rows[0].length : 0);
         }
-        if (changes['cellAspectRatio'] || columnChanges || !this.cellPadding) {
-            this.cellPadding = `${(50 * this.cellAspectRatio) / numCols}%`;
+        if (changes['cellAspectRatio'] || columnChanges || !this.cellPadding()) {
+            this.cellPadding.set(`${(50 * this.cellAspectRatio) / numCols}%`);
         }
-        if (columnChanges || !this.cellWidth) {
-            this.cellWidth = `${100 / numCols}%`;
+        if (columnChanges || !this.cellWidth()) {
+            this.cellWidth.set(`${100 / numCols}%`);
         }
     }
     ngAfterViewChecked() {
@@ -250,7 +256,7 @@ class CalendarBody {
         let cellNumber = rowIndex * this.numCols + colIndex;
         // Account for the fact that the first row may not have as many cells.
         if (rowIndex) {
-            cellNumber -= this.firstRowOffset;
+            cellNumber -= this.firstRowOffset();
         }
         return cellNumber == this.activeCell;
     }
@@ -365,13 +371,13 @@ class CalendarBody {
         return document.elementFromPoint(touchLocation.clientX, touchLocation.clientY);
     }
     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 }); }
-    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"] }); }
+    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"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: CalendarBody, decorators: [{
             type: Component,
             args: [{ selector: '[calendar-body]', host: {
                         'class': 'calendar-body',
-                    }, 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"] }]
+                    }, 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"] }]
         }], ctorParameters: () => [{ type: i0.NgZone }, { type: i1.Platform }, { type: i0.ElementRef }], propDecorators: { label: [{
                 type: Input
             }], rows: [{
@@ -685,6 +691,17 @@ class ApexCalendarYearView {
         this.monthSelected = new EventEmitter();
         /** Emits when any date is activated. */
         this.activeDateChange = new EventEmitter();
+        /** Grid of calendar cells representing the months of the year. */
+        this.months = signal([], ...(ngDevMode ? [{ debugName: "months" }] : []));
+        /**
+         * The month in this year that the selected Date falls on.
+         * Null if the selected Date is in a different year.
+        */
+        this.selectedMonth = signal(null, ...(ngDevMode ? [{ debugName: "selectedMonth" }] : []));
+        /** The label for this year (e.g. "2017"). */
+        this.yearLabel = signal('', ...(ngDevMode ? [{ debugName: "yearLabel" }] : []));
+        /** The month in this year that today falls on. Null if today is in a different year. */
+        this.todayMonth = signal(null, ...(ngDevMode ? [{ debugName: "todayMonth" }] : []));
         this.dateFormats = {
             dateInput: null,
             display: {
@@ -739,12 +756,12 @@ class ApexCalendarYearView {
     /** Initializes this year view. */
     init() {
         this.setSelectedMonth(this.selected);
-        this.todayMonth = this.getMonthInCurrentYear(this.datePickerService.today());
-        this.yearLabel = this.datePickerService.getYearName(this.activeDate);
+        this.todayMonth.set(this.getMonthInCurrentYear(this.datePickerService.today()));
+        this.yearLabel.set(this.datePickerService.getYearName(this.activeDate));
         let monthNames = this.datePickerService.getMonthNames('short');
         // First row of months only contains 5 elements so we can fit the year label on the same row.
-        this.months = [[0, 1, 2, 3], [4, 5, 6, 7], [8, 9, 10, 11]]
-            .map(row => row.map(month => this.createCellForMonth(month, monthNames[month])));
+        this.months.set([[0, 1, 2, 3], [4, 5, 6, 7], [8, 9, 10, 11]]
+            .map(row => row.map(month => this.createCellForMonth(month, monthNames[month]))));
     }
     /** Handles when a new month is selected. */
     onMonthSelected(event) {
@@ -895,15 +912,14 @@ class ApexCalendarYearView {
     /** Sets the currently-selected month based on a model value. */
     setSelectedMonth(value) {
         if (value instanceof DateRange) {
-            this.selectedMonth =
-                this.getMonthInCurrentYear(value.start) || this.getMonthInCurrentYear(value.end);
+            this.selectedMonth.set(this.getMonthInCurrentYear(value.start) || this.getMonthInCurrentYear(value.end));
         }
         else {
-            this.selectedMonth = this.getMonthInCurrentYear(value);
+            this.selectedMonth.set(this.getMonthInCurrentYear(value));
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexCalendarYearView, deps: [{ token: ApexDatepickerService }], target: i0.ɵɵFactoryTarget.Component }); }
-    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 }] }); }
+    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 }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexCalendarYearView, decorators: [{
             type: Component,
@@ -911,7 +927,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
                         FormsModule,
                         CalendarBody,
                         ReactiveFormsModule,
-                    ], 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"] }]
+                    ], 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"] }]
         }], ctorParameters: () => [{ type: ApexDatepickerService }], propDecorators: { CalendarBody: [{
                 type: ViewChild,
                 args: [CalendarBody]
@@ -1021,6 +1037,22 @@ class ApexCalendarMonthView {
         this.activeDateChange = new EventEmitter();
         this.userSelection = new EventEmitter();
         this.selectedChange = new EventEmitter();
+        this.monthLabel = signal('', ...(ngDevMode ? [{ debugName: "monthLabel" }] : []));
+        /** Grid of calendar cells representing the dates of the month. */
+        this.weeks = signal([], ...(ngDevMode ? [{ debugName: "weeks" }] : []));
+        /** Start value of the currently-shown date range. */
+        this.rangeStart = signal(null, ...(ngDevMode ? [{ debugName: "rangeStart" }] : []));
+        /** End value of the currently-shown date range. */
+        this.rangeEnd = signal(null, ...(ngDevMode ? [{ debugName: "rangeEnd" }] : []));
+        /** Start of the preview range. */
+        this.previewStart = signal(null, ...(ngDevMode ? [{ debugName: "previewStart" }] : []));
+        /** End of the preview range. */
+        this.previewEnd = signal(null, ...(ngDevMode ? [{ debugName: "previewEnd" }] : []));
+        /** Whether the user is currently selecting a range of dates. */
+        this.isRange = signal(false, ...(ngDevMode ? [{ debugName: "isRange" }] : []));
+        /** The date of the month that today falls on. Null if today is in another month. */
+        this.todayDate = signal(null, ...(ngDevMode ? [{ debugName: "todayDate" }] : []));
+        this.weekdays = signal([], ...(ngDevMode ? [{ debugName: "weekdays" }] : []));
         this.uniqueIdCounter = 0;
         this._activeDate = this.datepickerService.today();
     }
@@ -1146,7 +1178,7 @@ class ApexCalendarMonthView {
                 return;
             case 'Escape':
                 // Abort the current range selection if the user presses escape mid-selection.
-                if (this.previewEnd != null && !hasModifierKey(event)) {
+                if (this.previewEnd() != null && !hasModifierKey(event)) {
                     this.clearPreview();
                     // If a drag is in progress, cancel the drag without changing the
                     // current selection.
@@ -1179,13 +1211,13 @@ class ApexCalendarMonthView {
             // events aren't fired for single date selections.
             const value = (cell ? cell.rawValue : null);
             const previewRange = this.rangeSelectionStartegy.createPreview(value, this.selected);
-            this.previewStart = this.getCellCompareValue(previewRange.start);
-            this.previewEnd = this.getCellCompareValue(previewRange.end);
+            this.previewStart.set(this.getCellCompareValue(previewRange.start));
+            this.previewEnd.set(this.getCellCompareValue(previewRange.end));
             if (this.activeDrag && value) {
                 const dragRange = this.rangeSelectionStartegy.createDrag?.(this.activeDrag.value, this.selected, value);
                 if (dragRange) {
-                    this.previewStart = this.getCellCompareValue(dragRange.start);
-                    this.previewEnd = this.getCellCompareValue(dragRange.end);
+                    this.previewStart.set(this.getCellCompareValue(dragRange.start));
+                    this.previewEnd.set(this.getCellCompareValue(dragRange.end));
                 }
             }
         }
@@ -1202,7 +1234,8 @@ class ApexCalendarMonthView {
         this.calendarBody.scheduleFocusActiveCellAfterViewChecked();
     }
     clearPreview() {
-        this.previewStart = this.previewEnd = null;
+        this.previewStart.set(null);
+        this.previewEnd.set(null);
     }
     /**
    * Gets the date in this month that the given Date falls on.
@@ -1216,11 +1249,11 @@ class ApexCalendarMonthView {
     init() {
         this.setRanges(this.selected);
         ApexDatepickerService;
-        this.todayDate = this.getCellCompareValue(this.datepickerService.today());
-        this.monthLabel = this.datepickerService.dateFormats.display.monthLabel
+        this.todayDate.set(this.getCellCompareValue(this.datepickerService.today()));
+        this.monthLabel.set(this.datepickerService.dateFormats.display.monthLabel
             ? this.datepickerService.formatDate(this.activeDate, this.datepickerService.dateFormats.display.monthLabel)
             : this.datepickerService
-                .getMonthNames('short')[this.datepickerService.getMonth(this.activeDate)].toLocaleUpperCase();
+                .getMonthNames('short')[this.datepickerService.getMonth(this.activeDate)].toLocaleUpperCase());
         let firstOfMonth = this.datepickerService.createDate(this.datepickerService.getYear(this.activeDate), this.datepickerService.getMonth(this.activeDate), 1);
         this.firstWeekOffset =
             (this.datepickerService.DAYS_PER_WEEK +
@@ -1232,13 +1265,15 @@ class ApexCalendarMonthView {
     }
     setRanges(selectedValue) {
         if (selectedValue instanceof DateRange) {
-            this.rangeStart = this.getCellCompareValue(selectedValue.start);
-            this.rangeEnd = this.getCellCompareValue(selectedValue.end);
-            this.isRange = true;
+            this.rangeStart.set(this.getCellCompareValue(selectedValue.start));
+            this.rangeEnd.set(this.getCellCompareValue(selectedValue.end));
+            this.isRange.set(true);
         }
         else if (selectedValue instanceof Date) {
-            this.rangeStart = this.rangeEnd = this.getCellCompareValue(selectedValue);
-            this.isRange = false;
+            const val = this.getCellCompareValue(selectedValue);
+            this.rangeStart.set(val);
+            this.rangeEnd.set(val);
+            this.isRange.set(false);
         }
     }
     getCellCompareValue(date) {
@@ -1260,22 +1295,23 @@ class ApexCalendarMonthView {
         let weekdays = longWeekdays.map((long, i) => {
             return { long, narrow: narrowWeekdays[i], id: this.uniqueIdCounter++ };
         });
-        this.weekdays = weekdays.slice(firstDayOfWeek).concat(weekdays.slice(0, firstDayOfWeek));
+        this.weekdays.set(weekdays.slice(firstDayOfWeek).concat(weekdays.slice(0, firstDayOfWeek)));
     }
     createWeekCells() {
         const daysInMonth = this.datepickerService.getNumDaysInMonth(this.activeDate);
         const dateNames = this.datepickerService.getDateNames();
-        this.weeks = [[]];
+        const weeks = [[]];
         for (let i = 0, cell = this.firstWeekOffset; i < daysInMonth; i++, cell++) {
             if (cell == this.datepickerService.DAYS_PER_WEEK) {
-                this.weeks.push([]);
+                weeks.push([]);
                 cell = 0;
             }
             const date = this.datepickerService.createDate(this.datepickerService.getYear(this.activeDate), this.datepickerService.getMonth(this.activeDate), i + 1);
             const enabled = this.shouldEnableDate(date);
             const ariaLabel = this.datepickerService.formatDate(date, this.datepickerService.dateFormats.display.dateA11yLabel);
-            this.weeks[this.weeks.length - 1].push(new CalendarCell(i + 1, dateNames[i], ariaLabel, enabled, this.getCellCompareValue(date), date));
+            weeks[weeks.length - 1].push(new CalendarCell(i + 1, dateNames[i], ariaLabel, enabled, this.getCellCompareValue(date), date));
         }
+        this.weeks.set(weeks);
     }
     hasSameMonthAndYear(firstDate, secondDate) {
         return !!(firstDate &&
@@ -1307,13 +1343,13 @@ class ApexCalendarMonthView {
         return this.datepickerService.createDate(this.datepickerService.getYear(this.activeDate), this.datepickerService.getMonth(this.activeDate), dayOfMonth);
     }
     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 }); }
-    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"] }] }); }
+    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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexCalendarMonthView, decorators: [{
             type: Component,
             args: [{ selector: 'apex-calendar-month-view', imports: [
                         CalendarBody,
-                    ], 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"] }]
+                    ], 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"] }]
         }], ctorParameters: () => [{ type: ApexDatepickerService }, { type: DefaultCalendarRangeStrategy }], propDecorators: { calendarBody: [{
                 type: ViewChild,
                 args: [CalendarBody]
@@ -1348,6 +1384,12 @@ class ApexCalendarMultiYearView {
         this.yearSelected = new EventEmitter();
         /** Emits when any date is activated. */
         this.activeDateChange = new EventEmitter();
+        /** Grid of calendar cells representing the currently displayed years. */
+        this._years = signal([], ...(ngDevMode ? [{ debugName: "_years" }] : []));
+        /** The year that today falls on. */
+        this._todayYear = signal(0, ...(ngDevMode ? [{ debugName: "_todayYear" }] : []));
+        /** The year of the selected date. Null if the selected date is null. */
+        this.selectedYear = signal(null, ...(ngDevMode ? [{ debugName: "selectedYear" }] : []));
         this._activeDate = this.datePickerService.today();
     }
     /** The date to display in this multi-year view (everything other than the year is ignored). */
@@ -1393,7 +1435,7 @@ class ApexCalendarMultiYearView {
         this.init();
     }
     init() {
-        this._todayYear = this.datePickerService.getYear(this.datePickerService.today());
+        this._todayYear.set(this.datePickerService.getYear(this.datePickerService.today()));
         // We want a range years such that we maximize the number of
         // enabled dates visible at once. This prevents issues where the minimum year
         // is the last item of a page OR the maximum year is the first item of a page.
@@ -1401,14 +1443,15 @@ class ApexCalendarMultiYearView {
         // *actual* first rendered year in the multi-year view.
         const activeYear = this.datePickerService.getYear(this._activeDate);
         const minYearOfPage = activeYear - this.datePickerService.getActiveOffset(this.activeDate, this.minDate, this.maxDate);
-        this._years = [];
+        const years = [];
         for (let i = 0, row = []; i < this.datePickerService.yearsPerPage; i++) {
             row.push(minYearOfPage + i);
             if (row.length == this.datePickerService.yearsPerRow) {
-                this._years.push(row.map(year => this.createCellForYear(year)));
+                years.push(row.map(year => this.createCellForYear(year)));
                 row = [];
             }
         }
+        this._years.set(years);
     }
     /** Handles when a new year is selected. */
     onYearSelected(event) {
@@ -1530,15 +1573,15 @@ class ApexCalendarMultiYearView {
     }
     /** Sets the currently-highlighted year based on a model value. */
     setSelectedYear(value) {
-        this.selectedYear = null;
+        this.selectedYear.set(null);
         if (value instanceof DateRange) {
             const displayValue = value.start || value.end;
             if (displayValue) {
-                this.selectedYear = this.datePickerService.getYear(displayValue);
+                this.selectedYear.set(this.datePickerService.getYear(displayValue));
             }
         }
         else if (value) {
-            this.selectedYear = this.datePickerService.getYear(value);
+            this.selectedYear.set(this.datePickerService.getYear(value));
         }
     }
     isSameMultiYearView(date1, date2, minDate, maxDate) {
@@ -1560,7 +1603,7 @@ class ApexCalendarMultiYearView {
         return startingYear;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexCalendarMultiYearView, deps: [{ token: ApexDatepickerService }], target: i0.ɵɵFactoryTarget.Component }); }
-    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 }] }); }
+    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 }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexCalendarMultiYearView, decorators: [{
             type: Component,
@@ -1568,7 +1611,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
                         FormsModule,
                         CalendarBody,
                         ReactiveFormsModule,
-                    ], 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"] }]
+                    ], 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"] }]
         }], ctorParameters: () => [{ type: ApexDatepickerService }], propDecorators: { activeDate: [{
                 type: Input
             }], selected: [{
@@ -1612,9 +1655,9 @@ class ApexCalendarComponent {
         this.selectedChange = new EventEmitter();
         this.userSelection = new EventEmitter();
         this.calendarClose = new EventEmitter();
-        this.isButtonHidden = true;
-        this.activeDateView = 'month';
-        this.activeDrag = null;
+        this.isButtonHidden = signal(true, ...(ngDevMode ? [{ debugName: "isButtonHidden" }] : []));
+        this.activeDateView = signal('month', ...(ngDevMode ? [{ debugName: "activeDateView" }] : []));
+        this.activeDrag = signal(null, ...(ngDevMode ? [{ debugName: "activeDrag" }] : []));
     }
     get activeDate() {
         return this._activeDate;
@@ -1648,7 +1691,7 @@ class ApexCalendarComponent {
         this._maxDate = this.datePickerService.getValidDateOrNull(this.datePickerService.deserialize(value));
     }
     calendarDateViewChange() {
-        this.activeDateView = this.activeDateView == 'month' ? 'multi-year' : 'month';
+        this.activeDateView.set(this.activeDateView() == 'month' ? 'multi-year' : 'month');
     }
     onCalendarDateViewKeydown(event) {
         if (event.code.startsWith('Arrow')) {
@@ -1660,15 +1703,15 @@ class ApexCalendarComponent {
     }
     goToPreviousView() {
         this.activeDate =
-            this.activeDateView == 'month'
+            this.activeDateView() == 'month'
                 ? this.datePickerService.addCalendarMonths(this.activeDate, -1)
-                : this.datePickerService.addCalendarYears(this.activeDate, this.activeDateView == 'year' ? -1 : -this.datePickerService.yearsPerPage);
+                : this.datePickerService.addCalendarYears(this.activeDate, this.activeDateView() == 'year' ? -1 : -this.datePickerService.yearsPerPage);
     }
     goToNextView() {
         this.activeDate =
-            this.activeDateView == 'month'
+            this.activeDateView() == 'month'
                 ? this.datePickerService.addCalendarMonths(this.activeDate, 1)
-                : this.datePickerService.addCalendarYears(this.activeDate, this.activeDateView == 'year' ? 1 : this.datePickerService.yearsPerPage);
+                : this.datePickerService.addCalendarYears(this.activeDate, this.activeDateView() == 'year' ? 1 : this.datePickerService.yearsPerPage);
     }
     onArrowKeydown(event, direction) {
         if (event.code.startsWith('Arrow')) {
@@ -1693,32 +1736,32 @@ class ApexCalendarComponent {
         return (!this.maxDate || !this.isSameView(this.activeDate, this.maxDate));
     }
     dragStarted(event) {
-        this.activeDrag = event;
+        this.activeDrag.set(event);
     }
     /**
      * Called when a drag completes. It may end in cancelation or in the selection
      * of a new range.
      */
     dragEnded(event) {
-        if (!this.activeDrag)
+        if (!this.activeDrag())
             return;
         if (event.value) {
             this.userDragDrop.emit(event);
         }
-        this.activeDrag = null;
+        this.activeDrag.set(null);
     }
     get viewButtonText() {
-        if (this.activeDateView === 'month') {
+        if (this.activeDateView() === 'month') {
             return this.getCurrentMonthAndYear(this.activeDate);
         }
-        if (this.activeDateView === 'year') {
+        if (this.activeDateView() === 'year') {
             return this.getCurrentYear(this.activeDate);
         }
         return this.formatYearRange(...this.formatMinAndMaxYearLabels());
     }
     goToDateInView(date, view) {
         this.activeDate = date;
-        this.activeDateView = view;
+        this.activeDateView.set(view);
     }
     monthSelectedInYearView(normalizedMonth) {
         this.monthSelected.emit(normalizedMonth);
@@ -1736,10 +1779,10 @@ class ApexCalendarComponent {
     }
     toggleButtonVisibility(event) {
         if (event.type === 'focusout') {
-            this.isButtonHidden = true;
+            this.isButtonHidden.set(true);
         }
         else if (event.type === 'focusin') {
-            this.isButtonHidden = false;
+            this.isButtonHidden.set(false);
         }
     }
     getCurrentMonthAndYear(date) {
@@ -1766,18 +1809,18 @@ class ApexCalendarComponent {
         return [minYearLabel, maxYearLabel];
     }
     isSameView(date1, date2) {
-        if (this.activeDateView == 'month') {
+        if (this.activeDateView() == 'month') {
             return (this.datePickerService.getYear(date1) == this.datePickerService.getYear(date2) &&
                 this.datePickerService.getMonth(date1) == this.datePickerService.getMonth(date2));
         }
-        if (this.activeDateView == 'year') {
+        if (this.activeDateView() == 'year') {
             return this.datePickerService.getYear(date1) == this.datePickerService.getYear(date2);
         }
         // Otherwise we are in 'multi-year' view.
         return this.datePickerService.isSameMultiYearView(date1, date2, this.minDate, this.maxDate);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexCalendarComponent, deps: [{ token: ApexDatepickerService }], target: i0.ɵɵFactoryTarget.Component }); }
-    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"] }] }); }
+    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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexCalendarComponent, decorators: [{
             type: Component,
@@ -1786,7 +1829,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
                         ApexCalendarYearView,
                         ApexCalendarMonthView,
                         ApexCalendarMultiYearView,
-                    ], 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"] }]
+                    ], 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"] }]
         }], ctorParameters: () => [{ type: ApexDatepickerService }], propDecorators: { activeDate: [{
                 type: Input
             }], minDate: [{