@apexara/ng-components 1.0.0

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

@@ -0,0 +1,2175 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Output, Input, ChangeDetectionStrategy, Component, Injectable, ViewChild, HostListener } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i1$1 from '@apexara/ng-components/services';
+import { MobileOS } from '@apexara/ng-components/services';
+import { IpiButtonComponent } from '@apexara/ng-components/button';
+import * as i1 from '@angular/cdk/platform';
+import { normalizePassiveListenerOptions } from '@angular/cdk/platform';
+import { hasModifierKey } from '@angular/cdk/keycodes';
+
+class CalendarCell {
+    constructor(value, displayValue, ariaLabel, enabled, compareValue = value, rawValue) {
+        this.value = value;
+        this.displayValue = displayValue;
+        this.ariaLabel = ariaLabel;
+        this.enabled = enabled;
+        this.compareValue = compareValue;
+        this.rawValue = rawValue;
+    }
+}
+let calendarBodyId = 1;
+class CalendarBody {
+    constructor(ngZone, platform, elementRef) {
+        this.ngZone = ngZone;
+        this.platform = platform;
+        this.elementRef = elementRef;
+        /** The number of columns in the table. */
+        this.numCols = 7;
+        /** The cell number of the active cell in the table. */
+        this.activeCell = 0;
+        /** Whether a range is being selected. */
+        this.isRange = false;
+        /**
+         * The aspect ratio (width / height) to use for the cells in the table. This aspect ratio will be
+         * maintained even as the table resizes.
+         */
+        this.cellAspectRatio = 1;
+        /** Start of the preview range. */
+        this.previewStart = null;
+        /** End of the preview range. */
+        this.previewEnd = null;
+        /** Emits when a new value is selected. */
+        this.selectedValueChange = new EventEmitter();
+        /** Emits when the preview has changed as a result of a user action. */
+        this.previewChange = new EventEmitter();
+        this.activeDateChange = new EventEmitter();
+        /** Emits the date at the possible start of a drag event. */
+        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();
+        this.id = `calendar-body-${calendarBodyId++}`;
+        this.startDateLabelId = `${this.id}-start-date`;
+        this.endDateLabelId = `${this.id}-end-date`;
+        /**
+          * Used to focus the active cell after change detection has run.
+        */
+        this.focusActiveCellAfterViewChecked = true;
+        this.didDragSinceMouseDown = false;
+        this.activeCapturingEventOptions = normalizePassiveListenerOptions({
+            passive: false,
+            capture: true,
+        });
+        this.passiveCapturingEventOptions = normalizePassiveListenerOptions({
+            passive: true,
+            capture: true,
+        });
+        this.passiveEventOptions = normalizePassiveListenerOptions({ passive: true });
+        this.trackRow = (row) => row;
+        /**
+         * Event handler for when the user enters an element
+         * inside the calendar body (e.g. by hovering in or focus).
+         */
+        this.enterHandler = (event) => {
+            if (this.skipNextFocus && event.type === 'focus') {
+                this.skipNextFocus = false;
+                return;
+            }
+            // We only need to hit the zone when we're selecting a range.
+            if (event.target && this.isRange) {
+                const cell = this.getCellFromElement(event.target);
+                if (!cell?.enabled) {
+                    return;
+                }
+                if (cell) {
+                    this.ngZone.run(() => this.previewChange.emit({ value: cell.enabled ? cell : null, event }));
+                }
+            }
+        };
+        this.touchmoveHandler = (event) => {
+            if (!this.isRange)
+                return;
+            const target = this.getActualTouchTarget(event);
+            const cell = target ? this.getCellFromElement(target) : null;
+            if (!cell?.enabled) {
+                return;
+            }
+            if (target !== event.target) {
+                this.didDragSinceMouseDown = true;
+            }
+            // If the initial target of the touch is a date cell, prevent default so
+            // that the move is not handled as a scroll.
+            if (this.getCellElement(event.target)) {
+                event.preventDefault();
+            }
+            this.ngZone.run(() => this.previewChange.emit({ value: cell?.enabled ? cell : null, event }));
+        };
+        /**
+         * Event handler for when the user's pointer leaves an element
+         * inside the calendar body (e.g. by hovering out or blurring).
+         */
+        this.leaveHandler = (event) => {
+            // We only need to hit the zone when we're selecting a range.
+            if (this.previewEnd !== null && this.isRange) {
+                if (event.type !== 'blur') {
+                    this.didDragSinceMouseDown = true;
+                }
+                const cell = this.getCellFromElement(event.target);
+                if (!cell?.enabled) {
+                    return;
+                }
+                // Only reset the preview end value when leaving cells. This looks better, because
+                // we have a gap between the cells and the rows and we don't want to remove the
+                // range just for it to show up again when the user moves a few pixels to the side.
+                if (event.target &&
+                    cell &&
+                    !(event.relatedTarget &&
+                        this.getCellFromElement(event.relatedTarget))) {
+                    this.ngZone.run(() => this.previewChange.emit({ value: null, event }));
+                }
+            }
+        };
+        /**
+         * Triggered on mousedown or touchstart on a date cell.
+         * Respsonsible for starting a drag sequence.
+         */
+        this.mousedownHandler = (event) => {
+            if (!this.isRange)
+                return;
+            this.didDragSinceMouseDown = false;
+            // Begin a drag if a cell within the current range was targeted.
+            const cell = event.target && this.getCellFromElement(event.target);
+            if (!cell || !this.isCellInRange(cell.compareValue)) {
+                return;
+            }
+            this.ngZone.run(() => {
+                this.dragStarted.emit({
+                    value: cell.rawValue,
+                    event,
+                });
+            });
+        };
+        /** Triggered on mouseup anywhere. Respsonsible for ending a drag sequence. */
+        this.mouseupHandler = (event) => {
+            if (!this.isRange)
+                return;
+            const cellElement = this.getCellElement(event.target);
+            if (!cellElement) {
+                // Mouseup happened outside of datepicker. Cancel drag.
+                this.ngZone.run(() => {
+                    this.dragEnded.emit({ value: null, event });
+                });
+                return;
+            }
+            // if (cellElement.closest('.calendar-body') !== this.elementRef.nativeElement) {
+            //   // Mouseup happened inside a different month instance.
+            //   // Allow it to handle the event.
+            //   return;
+            // }
+            this.ngZone.run(() => {
+                const cell = this.getCellFromElement(cellElement);
+                this.dragEnded.emit({ value: cell?.rawValue ?? null, event });
+            });
+        };
+        /** Triggered on touchend anywhere. Respsonsible for ending a drag sequence. */
+        this.touchendHandler = (event) => {
+            const target = this.getActualTouchTarget(event);
+            if (target) {
+                this.mouseupHandler({ target });
+            }
+        };
+        this.ngZone.runOutsideAngular(() => {
+            const element = this.elementRef.nativeElement;
+            element.addEventListener('touchmove', this.touchmoveHandler, this.activeCapturingEventOptions);
+            element.addEventListener('mouseenter', this.enterHandler, this.passiveCapturingEventOptions);
+            element.addEventListener('focus', this.enterHandler, this.passiveCapturingEventOptions);
+            element.addEventListener('mouseleave', this.leaveHandler, this.passiveCapturingEventOptions);
+            element.addEventListener('mousedown', this.mousedownHandler, this.passiveEventOptions);
+            element.addEventListener('touchstart', this.mousedownHandler, this.passiveEventOptions);
+            if (this.platform.isBrowser) {
+                window.addEventListener('mouseup', this.mouseupHandler);
+                window.addEventListener('touchend', this.touchendHandler);
+            }
+        });
+    }
+    ngOnChanges(changes) {
+        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;
+        }
+        if (changes['cellAspectRatio'] || columnChanges || !this.cellPadding) {
+            this.cellPadding = `${(50 * this.cellAspectRatio) / numCols}%`;
+        }
+        if (columnChanges || !this.cellWidth) {
+            this.cellWidth = `${100 / numCols}%`;
+        }
+    }
+    ngAfterViewChecked() {
+        if (this.focusActiveCellAfterViewChecked) {
+            this.focusActiveCell();
+            this.focusActiveCellAfterViewChecked = false;
+        }
+    }
+    ngOnDestroy() {
+        const element = this.elementRef.nativeElement;
+        element.removeEventListener('touchmove', this.touchmoveHandler, this.activeCapturingEventOptions);
+        element.removeEventListener('mouseenter', this.enterHandler, this.passiveCapturingEventOptions);
+        element.removeEventListener('focus', this.enterHandler, this.passiveCapturingEventOptions);
+        element.removeEventListener('mouseleave', this.leaveHandler, this.passiveCapturingEventOptions);
+        element.removeEventListener('mousedown', this.mousedownHandler, this.passiveEventOptions);
+        element.removeEventListener('touchstart', this.mousedownHandler, this.passiveEventOptions);
+        if (this.platform.isBrowser) {
+            window.removeEventListener('mouseup', this.mouseupHandler);
+            window.removeEventListener('touchend', this.touchendHandler);
+        }
+    }
+    /** Called when a cell is clicked. */
+    cellClicked(cell, event) {
+        // Ignore "clicks" that are actually canceled drags (eg the user dragged
+        // off and then went back to this cell to undo).
+        if (this.didDragSinceMouseDown) {
+            return;
+        }
+        if (cell.enabled) {
+            this.selectedValueChange.emit({ value: cell.value, event });
+        }
+    }
+    emitActiveDateChange(cell, event) {
+        if (cell.enabled) {
+            this.activeDateChange.emit({ value: cell.value, event });
+        }
+    }
+    /** Returns whether a cell should be marked as selected. */
+    isSelected(value) {
+        return this.startValue === value || this.endValue === value;
+    }
+    /** Returns whether a cell is active. */
+    isActiveCell(rowIndex, colIndex) {
+        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;
+        }
+        return cellNumber == this.activeCell;
+    }
+    focusActiveCell(movePreview = true) {
+        const activeCell = this.elementRef.nativeElement.querySelector('.active');
+        if (activeCell) {
+            if (!movePreview) {
+                this.skipNextFocus = true;
+            }
+            activeCell.focus();
+        }
+    }
+    /** Focuses the active cell after change detection has run and the microtask queue is empty. */
+    scheduleFocusActiveCellAfterViewChecked() {
+        this.focusActiveCellAfterViewChecked = true;
+    }
+    /** Gets whether a value is the start of the main range. */
+    isRangeStart(value) {
+        return this.isStart(value, this.startValue, this.endValue);
+    }
+    /** Gets whether a value is the end of the main range. */
+    isRangeEnd(value) {
+        return this.isEnd(value, this.startValue, this.endValue);
+    }
+    /** Gets whether a value is within the currently-selected range. */
+    isCellInRange(value) {
+        return this.isInRange(value, this.startValue, this.endValue, this.isRange);
+    }
+    /** Gets whether a value is the start of the preview range. */
+    isPreviewStart(value) {
+        return this.isStart(value, this.previewStart, this.previewEnd);
+    }
+    /** Gets whether a value is the end of the preview range. */
+    isPreviewEnd(value) {
+        return this.isEnd(value, this.previewStart, this.previewEnd);
+    }
+    /** Gets whether a value is inside the preview range. */
+    isInPreview(value) {
+        return this.isInRange(value, this.previewStart, this.previewEnd, this.isRange);
+    }
+    /** Gets ids of aria descriptions for the start and end of a date range. */
+    getDescribedby(value) {
+        if (!this.isRange) {
+            return null;
+        }
+        if (this.startValue === value && this.endValue === value) {
+            return `${this.startDateLabelId} ${this.endDateLabelId}`;
+        }
+        else if (this.startValue === value) {
+            return this.startDateLabelId;
+        }
+        else if (this.endValue === value) {
+            return this.endDateLabelId;
+        }
+        return null;
+    }
+    /** Finds the CalendarCell that corresponds to a DOM node. */
+    getCellFromElement(element) {
+        const cell = this.getCellElement(element);
+        if (cell) {
+            const row = cell.getAttribute('data-row');
+            const col = cell.getAttribute('data-col');
+            if (row && col) {
+                return this.rows[parseInt(row)][parseInt(col)];
+            }
+        }
+        return null;
+    }
+    /**
+   * Gets the date table cell element that is or contains the specified element.
+   * Or returns null if element is not part of a date cell.
+   */
+    getCellElement(element) {
+        let cell;
+        if (this.isTableCell(element)) {
+            cell = element;
+        }
+        else if (this.isTableCell(element.parentNode)) {
+            cell = element.parentNode;
+        }
+        else if (this.isTableCell(element.parentNode?.parentNode)) {
+            cell = element.parentNode.parentNode;
+        }
+        return cell?.getAttribute('data-row') != null ? cell : null;
+    }
+    /** Checks whether a node is a table cell element. */
+    isTableCell(node) {
+        return node?.nodeName === 'TD';
+    }
+    /** Checks whether a value is the start of a range. */
+    isStart(value, start, end) {
+        return end !== null && start !== end && value < end && value === start;
+    }
+    /** Checks whether a value is the end of a range. */
+    isEnd(value, start, end) {
+        return start !== null && start !== end && value >= start && value === end;
+    }
+    isInRange(value, start, end, rangeEnabled) {
+        return (rangeEnabled &&
+            start !== null &&
+            end !== null &&
+            start !== end &&
+            value >= start &&
+            value <= end);
+    }
+    /**
+     * Extracts the element that actually corresponds to a touch event's location
+     * (rather than the element that initiated the sequence of touch events).
+     */
+    getActualTouchTarget(event) {
+        const touchLocation = event.changedTouches[0];
+        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(--ipi-calendar-body-cell-color, #0B1222);background:var(--ipi-datepicker-calendar-body-cell-background-color, none);border:var(--ipi-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(--ipi-calendar-body-cell-hover-color, white);background-color:var(--ipi-calendar-body-cell-hover-background-color, #FFD2C6)}.today{border:var(--ipi-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(--ipi-calendar-body-cell-in-preview-background-color, #FFD2C6);border-left:0px;border-right:0px;border-radius:0;border-top:var(--ipi-calendar-body-cell-in-preview-border, 1px dashed #F96138);border-bottom:var(--ipi-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(--ipi-calendar-body-cell-preview-end-border, 1px dashed #F96138);background-color:var(--ipi-calendar-body-cell-preview-end-background-color, #FFD2C6);color:var(--ipi-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(--ipi-calendar-body-cell-preview-start-border, 1px dashed #F96138);background-color:var(--ipi-calendar-body-cell-preview-start-background-color, #FFD2C6);color:var(--ipi-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(--ipi-calendar-body-active-cell-background-color, #FFD2C6)}.calendar-body-cell.in-range{background-color:var(--ipi-calendar-body-cell-in-range-background-color, #FFF2EF);border-left:0px;border-right:0px;border-radius:0;border-top:var(--ipi-calendar-body-cell-in-range-border, 1px solid #F96138);border-bottom:var(--ipi-calendar-body-cell-in-range-border, 1px solid #F96138)}.in-range.active{background-color:var(--ipi-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(--ipi-calendar-body-cell-range-start-color, #FFFFFF);border-left:var(--ipi-calendar-body-cell-range-start-border, 1px solid #F96138);background-color:var(--ipi-calendar-body-cell-range-start-background-color, #F96138)}.in-range.range-end{border-top-right-radius:20px;border-bottom-right-radius:20px;color:var(--ipi-calendar-body-cell-range-end-color, #FFFFFF);border-right:var(--ipi-datepicker-calendar-body-cell-end-start-border, 1px solid #F96138);background-color:var(--ipi-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(--ipi-datepicker-calendar-body-cell-end-start-background-color, #F96138)}.active.in-range.range-end,.active.in-range.range-start{background-color:var(--ipi-calendar-body-cell-active-in-range-start-end-background-color, #FFD2C6)}.calendar-body-cell.selected{color:var(--ipi-calendar-body-cell-selected-color, #FFFFFF);background-color:var(--ipi-calendar-body-cell-selected-background-color, #F96138)}.disabled{cursor:none;border:none;border-radius:0;pointer-events:none;background-color:var(--ipi-calendar-body-cell-disabled-background-color, #E0DFDE)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+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',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (firstRowOffset < labelMinRequiredCells) {\n    <tr aria-hidden=\"true\">\n        <td class=\"calendar-body-label\"\n            [attr.colspan]=\"numCols\"\n            [style.paddingTop]=\"cellPadding\"\n            [style.paddingBottom]=\"cellPadding\">\n                {{ label }}\n        </td>\n    </tr>\n}\n\n@for (row of rows; track trackRow(row); let rowIndex = $index) {\n    <tr role=\"row\">\n        @if (rowIndex === 0 && firstRowOffset) {\n            <td\n                class=\"calendar-body-label\"\n                [attr.colspan]=\"firstRowOffset\"\n                [style.paddingTop]=\"cellPadding\"\n                [style.paddingBottom]=\"cellPadding\">\n                    {{ firstRowOffset >= labelMinRequiredCells ? label : ''}}\n            </td>\n        }\n\n        @for (item of row; track item; let colIndex = $index) {\n            <td\n                role=\"gridcell\"\n                class=\"calendar-body-cell-container\"\n                [style.width]=\"cellWidth\"\n                [style.paddingTop]=\"cellPadding\"\n                [style.paddingBottom]=\"cellPadding\"\n                [attr.data-row]=\"rowIndex\"\n                [attr.data-col]=\"colIndex\"\n            >\n                <button\n                    type=\"button\"\n                    class=\"calendar-body-cell\"\n                    [tabindex]=\"isActiveCell(rowIndex, colIndex) ? 0 : -1\"\n                    [class.disabled]=\"!item.enabled\"\n                    [class.selected]=\"isSelected(item.compareValue)\"\n                    [class.active]=\"isActiveCell(rowIndex, colIndex)\"\n                    [class.today]=\"todayValue === item.compareValue\"\n                    [class.range-start]=\"isRangeStart(item.compareValue)\"\n                    [class.range-end]=\"isRangeEnd(item.compareValue)\"\n                    [class.in-range]=\"isCellInRange(item.compareValue)\"\n                    [class.in-preview]=\"isInPreview(item.compareValue)\"\n                    [class.preview-start]=\"isPreviewStart(item.compareValue)\"\n                    [class.preview-end]=\"isPreviewEnd(item.compareValue)\"\n                    [attr.aria-label]=\"item.ariaLabel\"\n                    [attr.aria-disabled]=\"!item.enabled || null\"\n                    [attr.aria-pressed]=\"isSelected(item.compareValue)\"\n                    [attr.aria-current]=\"todayValue === item.compareValue ? 'date' : null\"\n                    [attr.aria-describedby]=\"getDescribedby(item.compareValue)\"\n                    (click)=\"cellClicked(item, $event)\"\n                    (focus)=\"emitActiveDateChange(item, $event)\">\n                        <span class=\"calendar-body-cell-content focus-indicator\">\n                                {{ item.displayValue }}\n                        </span>\n\n                        <span class=\"calendar-body-cell-preview\" aria-hidden=\"true\"></span>\n                </button>\n            </td>\n        }\n    </tr>\n}\n\n<span [id]=\"startDateLabelId\" class=\"calendar-body-hidden-label\">{{ startDateAccessibleName }}</span>\n\n<span [id]=\"endDateLabelId\" class=\"calendar-body-hidden-label\">{{ endDateAccessibleName }}</span>\n", styles: ["tr{height:40px}.calendar-body-label{height:0;line-height:0;text-align:start}.calendar-body-cell{width:100%;height:100%;position:absolute;top:0;left:0;outline:none;text-align:center;color:var(--ipi-calendar-body-cell-color, #0B1222);background:var(--ipi-datepicker-calendar-body-cell-background-color, none);border:var(--ipi-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(--ipi-calendar-body-cell-hover-color, white);background-color:var(--ipi-calendar-body-cell-hover-background-color, #FFD2C6)}.today{border:var(--ipi-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(--ipi-calendar-body-cell-in-preview-background-color, #FFD2C6);border-left:0px;border-right:0px;border-radius:0;border-top:var(--ipi-calendar-body-cell-in-preview-border, 1px dashed #F96138);border-bottom:var(--ipi-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(--ipi-calendar-body-cell-preview-end-border, 1px dashed #F96138);background-color:var(--ipi-calendar-body-cell-preview-end-background-color, #FFD2C6);color:var(--ipi-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(--ipi-calendar-body-cell-preview-start-border, 1px dashed #F96138);background-color:var(--ipi-calendar-body-cell-preview-start-background-color, #FFD2C6);color:var(--ipi-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(--ipi-calendar-body-active-cell-background-color, #FFD2C6)}.calendar-body-cell.in-range{background-color:var(--ipi-calendar-body-cell-in-range-background-color, #FFF2EF);border-left:0px;border-right:0px;border-radius:0;border-top:var(--ipi-calendar-body-cell-in-range-border, 1px solid #F96138);border-bottom:var(--ipi-calendar-body-cell-in-range-border, 1px solid #F96138)}.in-range.active{background-color:var(--ipi-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(--ipi-calendar-body-cell-range-start-color, #FFFFFF);border-left:var(--ipi-calendar-body-cell-range-start-border, 1px solid #F96138);background-color:var(--ipi-calendar-body-cell-range-start-background-color, #F96138)}.in-range.range-end{border-top-right-radius:20px;border-bottom-right-radius:20px;color:var(--ipi-calendar-body-cell-range-end-color, #FFFFFF);border-right:var(--ipi-datepicker-calendar-body-cell-end-start-border, 1px solid #F96138);background-color:var(--ipi-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(--ipi-datepicker-calendar-body-cell-end-start-background-color, #F96138)}.active.in-range.range-end,.active.in-range.range-start{background-color:var(--ipi-calendar-body-cell-active-in-range-start-end-background-color, #FFD2C6)}.calendar-body-cell.selected{color:var(--ipi-calendar-body-cell-selected-color, #FFFFFF);background-color:var(--ipi-calendar-body-cell-selected-background-color, #F96138)}.disabled{cursor:none;border:none;border-radius:0;pointer-events:none;background-color:var(--ipi-calendar-body-cell-disabled-background-color, #E0DFDE)}\n"] }]
+        }], ctorParameters: () => [{ type: i0.NgZone }, { type: i1.Platform }, { type: i0.ElementRef }], propDecorators: { label: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }], todayValue: [{
+                type: Input
+            }], startValue: [{
+                type: Input
+            }], endValue: [{
+                type: Input
+            }], labelMinRequiredCells: [{
+                type: Input
+            }], numCols: [{
+                type: Input
+            }], activeCell: [{
+                type: Input
+            }], isRange: [{
+                type: Input
+            }], cellAspectRatio: [{
+                type: Input
+            }], comparisonStart: [{
+                type: Input
+            }], comparisonEnd: [{
+                type: Input
+            }], previewStart: [{
+                type: Input
+            }], previewEnd: [{
+                type: Input
+            }], startDateAccessibleName: [{
+                type: Input
+            }], endDateAccessibleName: [{
+                type: Input
+            }], selectedValueChange: [{
+                type: Output
+            }], previewChange: [{
+                type: Output
+            }], activeDateChange: [{
+                type: Output
+            }], dragStarted: [{
+                type: Output
+            }], dragEnded: [{
+                type: Output
+            }] } });
+
+class IpiDatepickerService {
+    constructor() {
+        this.DAYS_PER_WEEK = 7;
+        this.yearsPerRow = 4;
+        this.yearsPerPage = 24;
+        this.dateLocale = 'en-US';
+        this.formatter = new Intl.DateTimeFormat(this.dateLocale, {
+            month: '2-digit',
+            day: '2-digit',
+            year: 'numeric',
+        });
+        this.dateFormats = {
+            display: {
+                dateInput: { year: 'numeric', month: 'numeric', day: 'numeric' },
+                monthLabel: { month: 'short' },
+                monthYearLabel: { year: 'numeric', month: 'short' },
+                dateA11yLabel: { year: 'numeric', month: 'long', day: 'numeric' },
+                monthYearA11yLabel: { year: 'numeric', month: 'long' },
+            },
+        };
+    }
+    today() {
+        return new Date();
+    }
+    getDate(date) {
+        return date.getDate();
+    }
+    getMonth(date) {
+        return date.getMonth();
+    }
+    getYear(date) {
+        return date.getFullYear();
+    }
+    getDayOfWeek(date) {
+        return date.getDay();
+    }
+    getDateLocale() {
+        return this.dateLocale;
+    }
+    setDateLocale(value) {
+        this.formatter = new Intl.DateTimeFormat(value, {
+            month: '2-digit',
+            day: '2-digit',
+            year: 'numeric',
+        });
+        this.dateLocale = value;
+    }
+    getMonthNames(style) {
+        const dtf = new Intl.DateTimeFormat(this.dateLocale, { month: style, timeZone: 'utc' });
+        return this.range(12, i => this.format(dtf, new Date(2017, i, 1)));
+    }
+    getFirstDayOfWeek() {
+        if (typeof Intl !== 'undefined' && Intl.Locale) {
+            const locale = new Intl.Locale(this.dateLocale);
+            // Some browsers implement a `getWeekInfo` method while others have a `weekInfo` getter.
+            // Note that this isn't supported in all browsers so we need to null check it.
+            const firstDay = (locale.getWeekInfo?.() || locale.weekInfo)?.firstDay ?? 0;
+            // `weekInfo.firstDay` is a number between 1 and 7 where, starting from Monday,
+            // whereas our representation is 0 to 6 where 0 is Sunday so we need to normalize it.
+            return firstDay === 7 ? 0 : firstDay;
+        }
+        // Default to Sunday if the browser doesn't provide the week information.
+        return 0;
+    }
+    getValidDateOrNull(obj) {
+        return this.isDateInstance(obj) && this.isValid(obj) ? obj : null;
+    }
+    getDayOfWeekNames(style) {
+        const dtf = new Intl.DateTimeFormat(this.dateLocale, { weekday: style, timeZone: 'utc' });
+        return this.range(7, i => this.format(dtf, new Date(2017, 0, i + 1)));
+    }
+    getDateNames() {
+        const dtf = new Intl.DateTimeFormat(this.dateLocale, { day: 'numeric', timeZone: 'utc' });
+        return this.range(31, i => this.format(dtf, new Date(2017, 0, i + 1)));
+    }
+    getYearName(date) {
+        const dtf = new Intl.DateTimeFormat(this.dateLocale, { year: 'numeric', timeZone: 'utc' });
+        return this.format(dtf, date);
+    }
+    getNumDaysInMonth(date) {
+        return this.getDate(this.createDateWithOverflow(this.getYear(date), this.getMonth(date) + 1, 0));
+    }
+    createDate(year, month, date) {
+        // Check for invalid month and date (except upper bound on date which we have to check after
+        // creating the Date).
+        if (month < 0 || month > 11) {
+            throw Error(`Invalid month index "${month}". Month index has to be between 0 and 11.`);
+        }
+        if (date < 1) {
+            throw Error(`Invalid date "${date}". Date has to be greater than 0.`);
+        }
+        let result = this.createDateWithOverflow(year, month, date);
+        // Check that the date wasn't above the upper bound for the month, causing the month to overflow
+        if (result.getMonth() != month) {
+            throw Error(`Invalid date "${date}" for month with index "${month}".`);
+        }
+        return result;
+    }
+    addCalendarDays(date, days) {
+        return this.createDateWithOverflow(this.getYear(date), this.getMonth(date), this.getDate(date) + days);
+    }
+    addCalendarMonths(date, months) {
+        let newDate = this.createDateWithOverflow(this.getYear(date), this.getMonth(date) + months, this.getDate(date));
+        // It's possible to wind up in the wrong month if the original month has more days than the new
+        // month. In this case we want to go to the last day of the desired month.
+        // Note: the additional + 12 % 12 ensures we end up with a positive number, since JS % doesn't
+        // guarantee this.
+        if (this.getMonth(newDate) != (((this.getMonth(date) + months) % 12) + 12) % 12) {
+            newDate = this.createDateWithOverflow(this.getYear(newDate), this.getMonth(newDate), 0);
+        }
+        return newDate;
+    }
+    addCalendarYears(date, years) {
+        return this.addCalendarMonths(date, years * 12);
+    }
+    setTime(date, hours, minutes) {
+        if (!this.isValid(date)) {
+            throw new Error("Invalid date provided");
+        }
+        if (hours < 0 || hours > 23) {
+            throw new Error("Invalid hours provided, must be between 0 and 23");
+        }
+        if (minutes < 0 || minutes > 59) {
+            throw new Error("Invalid minutes provided, must be between 0 and 59");
+        }
+        const updatedDate = new Date(date);
+        updatedDate.setHours(hours);
+        updatedDate.setMinutes(minutes);
+        return updatedDate;
+    }
+    sameDate(first, second) {
+        if (first && second) {
+            let firstValid = this.isValid(first);
+            let secondValid = this.isValid(second);
+            if (firstValid && secondValid) {
+                return !this.compareDate(first, second);
+            }
+            return firstValid == secondValid;
+        }
+        return first == second;
+    }
+    /**
+    * Compares two dates.
+    * @param first The first date to compare.
+    * @param second The second date to compare.
+    * @returns 0 if the dates are equal, a number less than 0 if the first date is earlier,
+    *     a number greater than 0 if the first date is later.
+    */
+    compareDate(first, second) {
+        return (this.getYear(first) - this.getYear(second) ||
+            this.getMonth(first) - this.getMonth(second) ||
+            this.getDate(first) - this.getDate(second));
+    }
+    deserialize(value) {
+        if (value == null || (this.isDateInstance(value) && this.isValid(value))) {
+            return value;
+        }
+        return this.invalid();
+    }
+    clampDate(date, min, max) {
+        if (min && this.compareDate(date, min) < 0) {
+            return min;
+        }
+        if (max && this.compareDate(date, max) > 0) {
+            return max;
+        }
+        return date;
+    }
+    formatDate(date, displayFormat) {
+        if (!this.isValid(date)) {
+            throw Error('DatepickerService: Cannot format invalid date.');
+        }
+        const dtf = new Intl.DateTimeFormat(this.dateLocale, { ...displayFormat, timeZone: 'utc' });
+        return this.format(dtf, date);
+    }
+    minValidator(minDate) {
+        return (control) => {
+            const controlValue = control.value;
+            const min = this.getValidDateOrNull(minDate);
+            return !min || !controlValue || this.compareDate(min, controlValue) <= 0
+                ? null
+                : { 'datepickerMin': { min, actual: controlValue } };
+        };
+    }
+    maxValidator(maxDate) {
+        return (control) => {
+            const controlValue = control.value;
+            const max = this.getValidDateOrNull(maxDate);
+            return !max || !controlValue || this.compareDate(max, controlValue) >= 0
+                ? null
+                : { 'datepickerMax': { max, actual: controlValue } };
+        };
+    }
+    /** Creates a date but allows the month and date to overflow. */
+    createDateWithOverflow(year, month, date) {
+        // Passing the year to the constructor causes year numbers <100 to be converted to 19xx.
+        // To work around this we use `setFullYear` and `setHours` instead.
+        const d = new Date();
+        d.setFullYear(year, month, date);
+        d.setHours(0, 0, 0, 0);
+        return d;
+    }
+    format(dtf, date) {
+        // Passing the year to the constructor causes year numbers <100 to be converted to 19xx.
+        // To work around this we use `setUTCFullYear` and `setUTCHours` instead.
+        const d = new Date();
+        d.setUTCFullYear(date.getFullYear(), date.getMonth(), date.getDate());
+        d.setUTCHours(date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds());
+        return dtf.format(d);
+    }
+    isDateInstance(obj) {
+        return obj instanceof Date;
+    }
+    isValid(date) {
+        return !isNaN(date.getTime());
+    }
+    invalid() {
+        return new Date(NaN);
+    }
+    getActiveOffset(activeDate, minDate, maxDate) {
+        const activeYear = this.getYear(activeDate);
+        return this.positiveModulo(activeYear - this.getStartingYear(minDate, maxDate), this.yearsPerPage);
+    }
+    getStartingYear(minDate, maxDate) {
+        let startingYear = 0;
+        if (maxDate) {
+            const maxYear = this.getYear(maxDate);
+            startingYear = maxYear - this.yearsPerPage + 1;
+        }
+        else if (minDate) {
+            startingYear = this.getYear(minDate);
+        }
+        return startingYear;
+    }
+    positiveModulo(a, b) {
+        return ((a % b) + b) % b;
+    }
+    isSameMultiYearView(date1, date2, minDate, maxDate) {
+        const year1 = this.getYear(date1);
+        const year2 = this.getYear(date2);
+        const startingYear = this.getStartingYear(minDate, maxDate);
+        return (Math.floor((year1 - startingYear) / this.yearsPerPage) === Math.floor((year2 - startingYear) / this.yearsPerPage));
+    }
+    range(length, valueFunction) {
+        const valuesArray = Array(length);
+        for (let i = 0; i < length; i++) {
+            valuesArray[i] = valueFunction(i);
+        }
+        return valuesArray;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: IpiDatepickerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: IpiDatepickerService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: IpiDatepickerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class IpiCalendarYearView {
+    constructor(datePickerService, changeDetectorRef) {
+        this.datePickerService = datePickerService;
+        this.changeDetectorRef = changeDetectorRef;
+        /** Emits when a new month is selected. */
+        this.selectedChange = new EventEmitter();
+        /** Emits the selected month. This doesn't imply a change on the selected date */
+        this.monthSelected = new EventEmitter();
+        /** Emits when any date is activated. */
+        this.activeDateChange = new EventEmitter();
+        this.dateFormats = {
+            dateInput: null,
+            display: {
+                dateInput: { year: 'numeric', month: 'numeric', day: 'numeric' },
+                monthLabel: { month: 'short' },
+                monthYearLabel: { year: 'numeric', month: 'short' },
+                dateA11yLabel: { year: 'numeric', month: 'long', day: 'numeric' },
+                monthYearA11yLabel: { year: 'numeric', month: 'long' },
+            },
+        };
+        this._activeDate = this.datePickerService.today();
+    }
+    get activeDate() {
+        return this._activeDate;
+    }
+    set activeDate(value) {
+        let oldActiveDate = this._activeDate;
+        const validDate = this.datePickerService.getValidDateOrNull(this.datePickerService.deserialize(value)) ||
+            this.datePickerService.today();
+        this._activeDate = this.datePickerService.clampDate(validDate, this.minDate, this.maxDate);
+        if (this.datePickerService.getYear(oldActiveDate) !== this.datePickerService.getYear(this._activeDate)) {
+            this.init();
+        }
+    }
+    get selected() {
+        return this._selected;
+    }
+    set selected(value) {
+        if (value instanceof DateRange) {
+            this._selected = value;
+        }
+        else {
+            this._selected = this.datePickerService.getValidDateOrNull(this.datePickerService.deserialize(value));
+        }
+        this.setSelectedMonth(value);
+    }
+    get minDate() {
+        return this._minDate;
+    }
+    set minDate(value) {
+        this._minDate = this.datePickerService.getValidDateOrNull(this.datePickerService.deserialize(value));
+    }
+    get maxDate() {
+        return this._maxDate;
+    }
+    set maxDate(value) {
+        this._maxDate = this.datePickerService.getValidDateOrNull(this.datePickerService.deserialize(value));
+    }
+    ngAfterContentInit() {
+        this.init();
+    }
+    /** Initializes this year view. */
+    init() {
+        this.setSelectedMonth(this.selected);
+        this.todayMonth = this.getMonthInCurrentYear(this.datePickerService.today());
+        this.yearLabel = 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.changeDetectorRef.markForCheck();
+    }
+    /** Handles when a new month is selected. */
+    onMonthSelected(event) {
+        const month = event.value;
+        const selectedMonth = this.datePickerService.createDate(this.datePickerService.getYear(this.activeDate), month, 1);
+        this.monthSelected.emit(selectedMonth);
+        const selectedDate = this.getDateFromMonth(month);
+        this.selectedChange.emit(selectedDate);
+    }
+    /**
+     * Takes the index of a calendar body cell wrapped in an event as argument. For the date that
+     * corresponds to the given cell, set `activeDate` to that date and fire `activeDateChange` with
+     * that date.
+     *
+     * This function is used to match each component's model of the active date with the calendar
+     * body cell that was focused. It updates its value of `activeDate` synchronously and updates the
+     * parent's value asynchronously via the `activeDateChange` event. The child component receives an
+     * updated value asynchronously via the `activeCell` Input.
+     */
+    updateActiveDate(event) {
+        const month = event.value;
+        const oldActiveDate = this._activeDate;
+        this.activeDate = this.getDateFromMonth(month);
+        if (this.datePickerService.compareDate(oldActiveDate, this.activeDate)) {
+            this.activeDateChange.emit(this.activeDate);
+        }
+    }
+    /** Handles keydown events on the calendar body when calendar is in year view. */
+    handleCalendarBodyKeydown(event) {
+        const oldActiveDate = this._activeDate;
+        switch (event.code) {
+            case 'ArrowLeft':
+                this.activeDate = this.datePickerService.addCalendarMonths(this._activeDate, -1);
+                break;
+            case 'ArrowRight':
+                this.activeDate = this.datePickerService.addCalendarMonths(this._activeDate, 1);
+                break;
+            case 'ArrowUp':
+                this.activeDate = this.datePickerService.addCalendarMonths(this._activeDate, -4);
+                break;
+            case 'ArrowDown':
+                this.activeDate = this.datePickerService.addCalendarMonths(this._activeDate, 4);
+                break;
+            case 'Home':
+                this.activeDate = this.datePickerService.addCalendarMonths(this._activeDate, -this.datePickerService.getMonth(this._activeDate));
+                break;
+            case 'End':
+                this.activeDate = this.datePickerService.addCalendarMonths(this._activeDate, 11 - this.datePickerService.getMonth(this._activeDate));
+                break;
+            case 'PageUp':
+                this.activeDate = this.datePickerService.addCalendarYears(this._activeDate, event.altKey ? -10 : -1);
+                break;
+            case 'PageDown':
+                this.activeDate = this.datePickerService.addCalendarYears(this._activeDate, event.altKey ? 10 : 1);
+                break;
+            case 'Enter':
+            case 'Space':
+                // Note that we only prevent the default action here while the selection happens in
+                // `keyup` below. We can't do the selection here, because it can cause the calendar to
+                // reopen if focus is restored immediately. We also can't call `preventDefault` on `keyup`
+                // because it's too late (see #23305).
+                this.selectionKeyPressed = true;
+                break;
+            default:
+                // Don't prevent default or focus active cell on keys that we don't explicitly handle.
+                return;
+        }
+        if (this.datePickerService.compareDate(oldActiveDate, this.activeDate)) {
+            this.activeDateChange.emit(this.activeDate);
+            this.focusActiveCellAfterViewChecked();
+        }
+        // Prevent unexpected default actions such as form submission.
+        event.preventDefault();
+    }
+    /** Handles keyup events on the calendar body when calendar is in year view. */
+    handleCalendarBodyKeyup(event) {
+        if (event.code === 'Space' || event.code === 'Enter') {
+            if (this.selectionKeyPressed) {
+                this.onMonthSelected({ value: this.datePickerService.getMonth(this._activeDate), event });
+            }
+            this.selectionKeyPressed = false;
+        }
+    }
+    /** Focuses the active cell after the microtask queue is empty. */
+    focusActiveCell() {
+        this.CalendarBody.focusActiveCell();
+    }
+    /** Schedules the matCalendarBody to focus the active cell after change detection has run */
+    focusActiveCellAfterViewChecked() {
+        this.CalendarBody.scheduleFocusActiveCellAfterViewChecked();
+    }
+    /**
+     * Gets the month in this year that the given Date falls on.
+     * Returns null if the given Date is in another year.
+     */
+    getMonthInCurrentYear(date) {
+        return date && this.datePickerService.getYear(date) == this.datePickerService.getYear(this.activeDate)
+            ? this.datePickerService.getMonth(date)
+            : null;
+    }
+    /**
+     * Takes a month and returns a new date in the same day and year as the currently active date.
+     *  The returned date will have the same month as the argument date.
+     */
+    getDateFromMonth(month) {
+        const normalizedDate = this.datePickerService.createDate(this.datePickerService.getYear(this.activeDate), month, 1);
+        const daysInMonth = this.datePickerService.getNumDaysInMonth(normalizedDate);
+        return this.datePickerService.createDate(this.datePickerService.getYear(this.activeDate), month, Math.min(this.datePickerService.getDate(this.activeDate), daysInMonth));
+    }
+    /** Creates an MatCalendarCell for the given month. */
+    createCellForMonth(month, monthName) {
+        const date = this.datePickerService.createDate(this.datePickerService.getYear(this.activeDate), month, 1);
+        const ariaLabel = this.datePickerService.formatDate(date, this.dateFormats.display.monthYearA11yLabel);
+        return new CalendarCell(month, monthName.toLocaleUpperCase(), ariaLabel, this.shouldEnableMonth(month));
+    }
+    /** Whether the given month is enabled. */
+    shouldEnableMonth(month) {
+        const activeYear = this.datePickerService.getYear(this.activeDate);
+        if (month === undefined || month === null || this.isYearAndMonthAfterMaxDate(activeYear, month) || this.isYearAndMonthBeforeMinDate(activeYear, month)) {
+            return false;
+        }
+        return true;
+    }
+    /**
+     * Tests whether the combination month/year is after this.maxDate, considering
+     * just the month and year of this.maxDate
+     */
+    isYearAndMonthAfterMaxDate(year, month) {
+        if (this.maxDate) {
+            const maxYear = this.datePickerService.getYear(this.maxDate);
+            const maxMonth = this.datePickerService.getMonth(this.maxDate);
+            return year > maxYear || (year === maxYear && month > maxMonth);
+        }
+        return false;
+    }
+    /**
+     * Tests whether the combination month/year is before this.minDate, considering
+     * just the month and year of this.minDate
+     */
+    isYearAndMonthBeforeMinDate(year, month) {
+        if (this.minDate) {
+            const minYear = this.datePickerService.getYear(this.minDate);
+            const minMonth = this.datePickerService.getMonth(this.minDate);
+            return year < minYear || (year === minYear && month < minMonth);
+        }
+        return false;
+    }
+    /** 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);
+        }
+        else {
+            this.selectedMonth = this.getMonthInCurrentYear(value);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: IpiCalendarYearView, deps: [{ token: IpiDatepickerService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: IpiCalendarYearView, isStandalone: true, selector: "ipi-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(--ipi-calendar-year-view-table-header-border-bottom-color, #C6C6C6)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: CalendarBody, selector: "[calendar-body]", inputs: ["label", "rows", "todayValue", "startValue", "endValue", "labelMinRequiredCells", "numCols", "activeCell", "isRange", "cellAspectRatio", "comparisonStart", "comparisonEnd", "previewStart", "previewEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedValueChange", "previewChange", "activeDateChange", "dragStarted", "dragEnded"] }, { kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: IpiCalendarYearView, decorators: [{
+            type: Component,
+            args: [{ selector: 'ipi-calendar-year-view', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        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(--ipi-calendar-year-view-table-header-border-bottom-color, #C6C6C6)}\n"] }]
+        }], ctorParameters: () => [{ type: IpiDatepickerService }, { type: i0.ChangeDetectorRef }], propDecorators: { CalendarBody: [{
+                type: ViewChild,
+                args: [CalendarBody]
+            }], activeDate: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], minDate: [{
+                type: Input
+            }], maxDate: [{
+                type: Input
+            }], selectedChange: [{
+                type: Output
+            }], monthSelected: [{
+                type: Output
+            }], activeDateChange: [{
+                type: Output
+            }] } });
+
+class DefaultCalendarRangeStrategy {
+    constructor(datepickerService) {
+        this.datepickerService = datepickerService;
+    }
+    selectionFinished(date, currentRange) {
+        let { start, end } = currentRange;
+        if (start == null) {
+            start = date;
+        }
+        else if (end == null && date && this.datepickerService.compareDate(date, start) >= 0) {
+            end = date;
+        }
+        else {
+            start = date;
+            end = null;
+        }
+        return new DateRange(start, end);
+    }
+    createPreview(activeDate, currentRange) {
+        let start = null;
+        let end = null;
+        if (currentRange.start && !currentRange.end && activeDate) {
+            start = currentRange.start;
+            end = activeDate;
+        }
+        return new DateRange(start, end);
+    }
+    createDrag(dragOrigin, originalRange, newDate) {
+        let start = originalRange.start;
+        let end = originalRange.end;
+        if (!start || !end) {
+            // Can't drag from an incomplete range.
+            return null;
+        }
+        const service = this.datepickerService;
+        const isRange = service.compareDate(start, end) !== 0;
+        const diffYears = service.getYear(newDate) - service.getYear(dragOrigin);
+        const diffMonths = service.getMonth(newDate) - service.getMonth(dragOrigin);
+        const diffDays = service.getDate(newDate) - service.getDate(dragOrigin);
+        if (isRange && service.sameDate(dragOrigin, originalRange.start)) {
+            start = newDate;
+            // when selecting start date of range move only start date
+            if (service.compareDate(newDate, end) > 0) {
+                // if start date becomes after end date, move whole range
+                end = service.addCalendarYears(end, diffYears);
+                end = service.addCalendarMonths(end, diffMonths);
+                end = service.addCalendarDays(end, diffDays);
+            }
+        }
+        else if (isRange && service.sameDate(dragOrigin, originalRange.end)) {
+            // when selecting end date of range move only end date
+            end = newDate;
+            if (service.compareDate(newDate, start) < 0) {
+                // if end date becomes before start date, move whole range
+                start = service.addCalendarYears(start, diffYears);
+                start = service.addCalendarMonths(start, diffMonths);
+                start = service.addCalendarDays(start, diffDays);
+            }
+        }
+        else {
+            // moving whole range if dragged from a middle date
+            start = service.addCalendarYears(start, diffYears);
+            start = service.addCalendarMonths(start, diffMonths);
+            start = service.addCalendarDays(start, diffDays);
+            end = service.addCalendarYears(end, diffYears);
+            end = service.addCalendarMonths(end, diffMonths);
+            end = service.addCalendarDays(end, diffDays);
+        }
+        return new DateRange(start, end);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: DefaultCalendarRangeStrategy, deps: [{ token: IpiDatepickerService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: DefaultCalendarRangeStrategy, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: DefaultCalendarRangeStrategy, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: IpiDatepickerService }] });
+
+class IpiCalendarMonthView {
+    constructor(datepickerService, changeDetectorRef, rangeSelectionStartegy) {
+        this.datepickerService = datepickerService;
+        this.changeDetectorRef = changeDetectorRef;
+        this.rangeSelectionStartegy = rangeSelectionStartegy;
+        this.activeDrag = null;
+        this.dragStarted = new EventEmitter();
+        this.dragEnded = new EventEmitter();
+        this.activeDateChange = new EventEmitter();
+        this.userSelection = new EventEmitter();
+        this.selectedChange = new EventEmitter();
+        this.uniqueIdCounter = 0;
+        this._activeDate = this.datepickerService.today();
+    }
+    get activeDate() {
+        return this._activeDate;
+    }
+    set activeDate(value) {
+        const oldActiveDate = this._activeDate;
+        const validDate = this.datepickerService.getValidDateOrNull(this.datepickerService.deserialize(value)) ||
+            this.datepickerService.today();
+        this._activeDate = this.datepickerService.clampDate(validDate, validDate, validDate);
+        if (!this.hasSameMonthAndYear(oldActiveDate, this._activeDate)) {
+            this.init();
+        }
+    }
+    get selected() {
+        return this._selected;
+    }
+    set selected(value) {
+        if (value instanceof DateRange) {
+            this._selected = value;
+        }
+        else {
+            this._selected = this.datepickerService.getValidDateOrNull(this.datepickerService.deserialize(value));
+        }
+        this.setRanges(this._selected);
+    }
+    get minDate() {
+        return this._minDate;
+    }
+    set minDate(value) {
+        this._minDate = this.datepickerService.getValidDateOrNull(this.datepickerService.deserialize(value));
+    }
+    get maxDate() {
+        return this._maxDate;
+    }
+    set maxDate(value) {
+        this._maxDate = this.datepickerService.getValidDateOrNull(this.datepickerService.deserialize(value));
+    }
+    ngOnChanges(changes) {
+        const comparisonChange = changes['comparisonStart'] || changes['comparisonEnd'];
+        if (comparisonChange && !comparisonChange.firstChange) {
+            this.setRanges(this.selected);
+        }
+        if (changes['activeDrag']) {
+            this.clearPreview();
+        }
+    }
+    ngAfterContentInit() {
+        this.init();
+    }
+    getActiveCell() {
+        return this.datepickerService.getDate(this.activeDate) - 1;
+    }
+    updateActiveDate(event) {
+        const month = event.value;
+        const oldActiveDate = this._activeDate;
+        this.activeDate = this.getDateFromDayOfMonth(month);
+        if (this.datepickerService.compareDate(oldActiveDate, this.activeDate)) {
+            this.activeDateChange.emit(this._activeDate);
+        }
+    }
+    /** Handles when a new date is selected. */
+    dateSelected(event) {
+        const date = event.value;
+        const selectedDate = this.getDateFromDayOfMonth(date);
+        let rangeStartDate;
+        let rangeEndDate;
+        if (this._selected instanceof DateRange) {
+            rangeStartDate = this.getDateInCurrentMonth(this._selected.start);
+            rangeEndDate = this.getDateInCurrentMonth(this._selected.end);
+        }
+        else {
+            rangeStartDate = rangeEndDate = this.getDateInCurrentMonth(this._selected);
+        }
+        if (rangeStartDate !== date || rangeEndDate !== date) {
+            this.selectedChange.emit(selectedDate);
+        }
+        this.userSelection.emit({ value: selectedDate, event: event.event });
+        this.clearPreview();
+    }
+    handleCalendarBodyKeydown(event) {
+        const oldActiveDate = this._activeDate;
+        switch (event.code) {
+            case 'ArrowLeft':
+                this.activeDate = this.datepickerService.addCalendarDays(this._activeDate, -1);
+                break;
+            case 'ArrowRight':
+                this.activeDate = this.datepickerService.addCalendarDays(this._activeDate, 1);
+                break;
+            case 'ArrowUp':
+                this.activeDate = this.datepickerService.addCalendarDays(this._activeDate, -7);
+                break;
+            case 'ArrowDown':
+                this.activeDate = this.datepickerService.addCalendarDays(this._activeDate, 7);
+                break;
+            case 'Home':
+                this.activeDate = this.datepickerService.addCalendarDays(this._activeDate, 1 - this.datepickerService.getDate(this._activeDate));
+                break;
+            case 'End':
+                this.activeDate = this.datepickerService.addCalendarDays(this._activeDate, this.datepickerService.getNumDaysInMonth(this._activeDate) -
+                    this.datepickerService.getDate(this._activeDate));
+                break;
+            case 'PageUp':
+                this.activeDate = event.altKey
+                    ? this.datepickerService.addCalendarYears(this._activeDate, -1)
+                    : this.datepickerService.addCalendarMonths(this._activeDate, -1);
+                break;
+            case 'PageDown':
+                this.activeDate = event.altKey
+                    ? this.datepickerService.addCalendarYears(this._activeDate, 1)
+                    : this.datepickerService.addCalendarMonths(this._activeDate, 1);
+                break;
+            case 'Enter':
+            case 'Space':
+                this.selectionKeyPressed = true;
+                // Prevent unexpected default actions such as form submission.
+                // Note that we only prevent the default action here while the selection happens in
+                // `keyup` below. We can't do the selection here, because it can cause the calendar to
+                // reopen if focus is restored immediately. We also can't call `preventDefault` on `keyup`
+                // because it's too late (see #23305).
+                event.preventDefault();
+                return;
+            case 'Escape':
+                // Abort the current range selection if the user presses escape mid-selection.
+                if (this.previewEnd != null && !hasModifierKey(event)) {
+                    this.clearPreview();
+                    // If a drag is in progress, cancel the drag without changing the
+                    // current selection.
+                    if (this.activeDrag) {
+                        this.dragEnded.emit({ value: null, event });
+                    }
+                    else {
+                        this.selectedChange.emit(null);
+                        this.userSelection.emit({ value: null, event });
+                    }
+                    event.preventDefault();
+                }
+                return;
+            default:
+                // Don't prevent default or focus active cell on keys that we don't explicitly handle.
+                return;
+        }
+        if (this.datepickerService.compareDate(oldActiveDate, this.activeDate)) {
+            this.activeDateChange.emit(this.activeDate);
+            this.focusActiveCellAfterViewChecked();
+        }
+        event.preventDefault();
+    }
+    previewChanged({ value: cell }) {
+        if (this.rangeSelectionStartegy) {
+            if (!this.selected) {
+                return;
+            }
+            // We can assume that this will be a range, because preview
+            // 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);
+            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.changeDetectorRef.markForCheck();
+        }
+    }
+    handleCalendarBodyKeyup(event) {
+        if (event.code === 'Space' || event.code === 'Enter') {
+            if (this.selectionKeyPressed && this.shouldEnableDate(this._activeDate)) {
+                this.dateSelected({ value: this.datepickerService.getDate(this._activeDate), event });
+            }
+            this.selectionKeyPressed = false;
+        }
+    }
+    focusActiveCellAfterViewChecked() {
+        this.calendarBody.scheduleFocusActiveCellAfterViewChecked();
+    }
+    clearPreview() {
+        this.previewStart = this.previewEnd = null;
+    }
+    /**
+   * Gets the date in this month that the given Date falls on.
+   * Returns null if the given Date is in another month.
+   */
+    getDateInCurrentMonth(date) {
+        return date && this.hasSameMonthAndYear(date, this.activeDate)
+            ? this.datepickerService.getDate(date)
+            : null;
+    }
+    init() {
+        this.setRanges(this.selected);
+        IpiDatepickerService;
+        this.todayDate = this.getCellCompareValue(this.datepickerService.today());
+        this.monthLabel = 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();
+        let firstOfMonth = this.datepickerService.createDate(this.datepickerService.getYear(this.activeDate), this.datepickerService.getMonth(this.activeDate), 1);
+        this.firstWeekOffset =
+            (this.datepickerService.DAYS_PER_WEEK +
+                this.datepickerService.getDayOfWeek(firstOfMonth) -
+                this.datepickerService.getFirstDayOfWeek()) %
+                this.datepickerService.DAYS_PER_WEEK;
+        this.initWeekdays();
+        this.createWeekCells();
+    }
+    setRanges(selectedValue) {
+        if (selectedValue instanceof DateRange) {
+            this.rangeStart = this.getCellCompareValue(selectedValue.start);
+            this.rangeEnd = this.getCellCompareValue(selectedValue.end);
+            this.isRange = true;
+        }
+        else if (selectedValue instanceof Date) {
+            this.rangeStart = this.rangeEnd = this.getCellCompareValue(selectedValue);
+            this.isRange = false;
+        }
+    }
+    getCellCompareValue(date) {
+        if (date) {
+            // We use the time since the Unix epoch to compare dates in this view, rather than the
+            // cell values, because we need to support ranges that span across multiple months/years.
+            const year = this.datepickerService.getYear(date);
+            const month = this.datepickerService.getMonth(date);
+            const day = this.datepickerService.getDate(date);
+            return new Date(year, month, day).getTime();
+        }
+        return null;
+    }
+    initWeekdays() {
+        const firstDayOfWeek = this.datepickerService.getFirstDayOfWeek();
+        const narrowWeekdays = this.datepickerService.getDayOfWeekNames('narrow');
+        const longWeekdays = this.datepickerService.getDayOfWeekNames('long');
+        // Rotate the labels for days of the week based on the configured first day of the week.
+        let weekdays = longWeekdays.map((long, i) => {
+            return { long, narrow: narrowWeekdays[i], id: this.uniqueIdCounter++ };
+        });
+        this.weekdays = weekdays.slice(firstDayOfWeek).concat(weekdays.slice(0, firstDayOfWeek));
+    }
+    createWeekCells() {
+        const daysInMonth = this.datepickerService.getNumDaysInMonth(this.activeDate);
+        const dateNames = this.datepickerService.getDateNames();
+        this.weeks = [[]];
+        for (let i = 0, cell = this.firstWeekOffset; i < daysInMonth; i++, cell++) {
+            if (cell == this.datepickerService.DAYS_PER_WEEK) {
+                this.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));
+        }
+    }
+    hasSameMonthAndYear(firstDate, secondDate) {
+        return !!(firstDate &&
+            secondDate &&
+            this.datepickerService.getMonth(firstDate) == this.datepickerService.getMonth(secondDate) &&
+            this.datepickerService.getYear(firstDate) == this.datepickerService.getYear(secondDate));
+    }
+    onDragEnded(event) {
+        if (!this.activeDrag)
+            return;
+        if (event.value) {
+            // Propagate drag effect
+            const dragDropResult = this.rangeSelectionStartegy?.createDrag?.(this.activeDrag.value, this.selected, event.value);
+            if ((!dragDropResult?.end || !this.shouldEnableDate(dragDropResult.end)) || (!dragDropResult?.start || !this.shouldEnableDate(dragDropResult.start))) {
+                return;
+            }
+            this.dragEnded.emit({ value: dragDropResult, event: event.event });
+        }
+        else {
+            this.dragEnded.emit({ value: null, event: event.event });
+        }
+    }
+    shouldEnableDate(date) {
+        return (!!date &&
+            (!this.minDate || this.datepickerService.compareDate(date, this.minDate) >= 0) &&
+            (!this.maxDate || this.datepickerService.compareDate(date, this.maxDate) <= 0));
+    }
+    getDateFromDayOfMonth(dayOfMonth) {
+        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: IpiCalendarMonthView, deps: [{ token: IpiDatepickerService }, { token: i0.ChangeDetectorRef }, { token: DefaultCalendarRangeStrategy }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: IpiCalendarMonthView, isStandalone: true, selector: "ipi-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(--ipi-calendar-month-view-table-header-color, #C6C6C6)}.calendar-table-header-divider{border-bottom:1px solid var(--ipi-datepicker-calendar-month-view-table-header-border-bottom-color, #C6C6C6)}\n"], dependencies: [{ kind: "component", type: CalendarBody, selector: "[calendar-body]", inputs: ["label", "rows", "todayValue", "startValue", "endValue", "labelMinRequiredCells", "numCols", "activeCell", "isRange", "cellAspectRatio", "comparisonStart", "comparisonEnd", "previewStart", "previewEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedValueChange", "previewChange", "activeDateChange", "dragStarted", "dragEnded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: IpiCalendarMonthView, decorators: [{
+            type: Component,
+            args: [{ selector: 'ipi-calendar-month-view', changeDetection: ChangeDetectionStrategy.OnPush, 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(--ipi-calendar-month-view-table-header-color, #C6C6C6)}.calendar-table-header-divider{border-bottom:1px solid var(--ipi-datepicker-calendar-month-view-table-header-border-bottom-color, #C6C6C6)}\n"] }]
+        }], ctorParameters: () => [{ type: IpiDatepickerService }, { type: i0.ChangeDetectorRef }, { type: DefaultCalendarRangeStrategy }], propDecorators: { calendarBody: [{
+                type: ViewChild,
+                args: [CalendarBody]
+            }], activeDate: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], minDate: [{
+                type: Input
+            }], maxDate: [{
+                type: Input
+            }], activeDrag: [{
+                type: Input
+            }], dragStarted: [{
+                type: Output
+            }], dragEnded: [{
+                type: Output
+            }], activeDateChange: [{
+                type: Output
+            }], userSelection: [{
+                type: Output
+            }], selectedChange: [{
+                type: Output
+            }] } });
+
+class IpiCalendarMultiYearView {
+    constructor(changeDetectorRef, datePickerService) {
+        this.changeDetectorRef = changeDetectorRef;
+        this.datePickerService = datePickerService;
+        /** Emits when a new year is selected. */
+        this.selectedChange = new EventEmitter();
+        /** Emits the selected year. This doesn't imply a change on the selected date */
+        this.yearSelected = new EventEmitter();
+        /** Emits when any date is activated. */
+        this.activeDateChange = new EventEmitter();
+        this._activeDate = this.datePickerService.today();
+    }
+    /** The date to display in this multi-year view (everything other than the year is ignored). */
+    get activeDate() {
+        return this._activeDate;
+    }
+    set activeDate(value) {
+        let oldActiveDate = this._activeDate;
+        const validDate = this.datePickerService.getValidDateOrNull(this.datePickerService.deserialize(value)) ||
+            this.datePickerService.today();
+        this._activeDate = this.datePickerService.clampDate(validDate, this.minDate, this.maxDate);
+        if (!this.isSameMultiYearView(oldActiveDate, this._activeDate, this.minDate, this.maxDate)) {
+            this.init();
+        }
+    }
+    get selected() {
+        return this._selected;
+    }
+    set selected(value) {
+        if (value instanceof DateRange) {
+            this._selected = value;
+        }
+        else {
+            this._selected = this.datePickerService.getValidDateOrNull(this.datePickerService.deserialize(value));
+        }
+        this.setSelectedYear(value);
+    }
+    /** The minimum selectable date. */
+    get minDate() {
+        return this._minDate;
+    }
+    set minDate(value) {
+        this._minDate = this.datePickerService.getValidDateOrNull(this.datePickerService.deserialize(value));
+    }
+    /** The maximum selectable date. */
+    get maxDate() {
+        return this._maxDate;
+    }
+    set maxDate(value) {
+        this._maxDate = this.datePickerService.getValidDateOrNull(this.datePickerService.deserialize(value));
+    }
+    ngAfterContentInit() {
+        this.init();
+    }
+    init() {
+        this._todayYear = 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.
+        // The offset from the active year to the "slot" for the starting year is the
+        // *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 = [];
+        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)));
+                row = [];
+            }
+        }
+        this.changeDetectorRef.markForCheck();
+    }
+    /** Handles when a new year is selected. */
+    onYearSelected(event) {
+        const year = event.value;
+        const selectedYear = this.datePickerService.createDate(year, 0, 1);
+        const selectedDate = this.getDateFromYear(year);
+        this.yearSelected.emit(selectedYear);
+        this.selectedChange.emit(selectedDate);
+    }
+    /**
+     * Takes the index of a calendar body cell wrapped in an event as argument. For the date that
+     * corresponds to the given cell, set `activeDate` to that date and fire `activeDateChange` with
+     * that date.
+     *
+     * This function is used to match each component's model of the active date with the calendar
+     * body cell that was focused. It updates its value of `activeDate` synchronously and updates the
+     * parent's value asynchronously via the `activeDateChange` event. The child component receives an
+     * updated value asynchronously via the `activeCell` Input.
+     */
+    updateActiveDate(event) {
+        const year = event.value;
+        const oldActiveDate = this._activeDate;
+        this.activeDate = this.getDateFromYear(year);
+        if (this.datePickerService.compareDate(oldActiveDate, this.activeDate)) {
+            this.activeDateChange.emit(this.activeDate);
+        }
+    }
+    /** Handles keydown events on the calendar body when calendar is in multi-year view. */
+    handleCalendarBodyKeydown(event) {
+        const oldActiveDate = this._activeDate;
+        switch (event.code) {
+            case 'ArrowLeft':
+                this.activeDate = this.datePickerService.addCalendarYears(this._activeDate, -1);
+                break;
+            case 'ArrowRight':
+                this.activeDate = this.datePickerService.addCalendarYears(this._activeDate, 1);
+                break;
+            case 'ArrowUp':
+                this.activeDate = this.datePickerService.addCalendarYears(this._activeDate, -this.datePickerService.yearsPerRow);
+                break;
+            case 'ArrowDown':
+                this.activeDate = this.datePickerService.addCalendarYears(this._activeDate, this.datePickerService.yearsPerRow);
+                break;
+            case 'Home':
+                this.activeDate = this.datePickerService.addCalendarYears(this._activeDate, -this.datePickerService.getActiveOffset(this.activeDate, this.minDate, this.maxDate));
+                break;
+            case 'End':
+                this.activeDate = this.datePickerService.addCalendarYears(this._activeDate, this.datePickerService.yearsPerPage -
+                    this.datePickerService.getActiveOffset(this.activeDate, this.minDate, this.maxDate) -
+                    1);
+                break;
+            case 'PageUp':
+                this.activeDate = this.datePickerService.addCalendarYears(this._activeDate, event.altKey ? -this.datePickerService.yearsPerPage * 10 : -this.datePickerService.yearsPerPage);
+                break;
+            case 'PageDown':
+                this.activeDate = this.datePickerService.addCalendarYears(this._activeDate, event.altKey ? this.datePickerService.yearsPerPage * 10 : this.datePickerService.yearsPerPage);
+                break;
+            case 'Enter':
+            case 'Space':
+                this.selectionKeyPressed = true;
+                break;
+            default:
+                // Don't prevent default or focus active cell on keys that we don't explicitly handle.
+                return;
+        }
+        if (this.datePickerService.compareDate(oldActiveDate, this.activeDate)) {
+            this.activeDateChange.emit(this.activeDate);
+        }
+        this.focusActiveCellAfterViewChecked();
+        // Prevent unexpected default actions such as form submission.
+        event.preventDefault();
+    }
+    /** Handles keyup events on the calendar body when calendar is in multi-year view. */
+    handleCalendarBodyKeyup(event) {
+        if (event.code === 'Space' || event.code === 'Enter') {
+            if (this.selectionKeyPressed) {
+                this.onYearSelected({ value: this.datePickerService.getYear(this._activeDate), event });
+            }
+            this.selectionKeyPressed = false;
+        }
+    }
+    getActiveCell() {
+        return this.datePickerService.getActiveOffset(this.activeDate, this.minDate, this.maxDate);
+    }
+    /** Focuses the active cell after the microtask queue is empty. */
+    focusActiveCell() {
+        this.calendarBody.focusActiveCell();
+    }
+    /** Focuses the active cell after change detection has run and the microtask queue is empty. */
+    focusActiveCellAfterViewChecked() {
+        this.calendarBody.scheduleFocusActiveCellAfterViewChecked();
+    }
+    /**
+     * Takes a year and returns a new date on the same day and month as the currently active date
+     *  The returned date will have the same year as the argument date.
+     */
+    getDateFromYear(year) {
+        const activeMonth = this.datePickerService.getMonth(this.activeDate);
+        const daysInMonth = this.datePickerService.getNumDaysInMonth(this.datePickerService.createDate(year, activeMonth, 1));
+        const normalizedDate = this.datePickerService.createDate(year, activeMonth, Math.min(this.datePickerService.getDate(this.activeDate), daysInMonth));
+        return normalizedDate;
+    }
+    /** Creates an CalendarCell for the given year. */
+    createCellForYear(year) {
+        const date = this.datePickerService.createDate(year, 0, 1);
+        const yearName = this.datePickerService.getYearName(date);
+        return new CalendarCell(year, yearName, yearName, this.shouldEnableYear(year));
+    }
+    /** Whether the given year is enabled. */
+    shouldEnableYear(year) {
+        // disable if the year is greater than maxDate lower than minDate
+        if (year === undefined ||
+            year === null ||
+            (this.maxDate && year > this.datePickerService.getYear(this.maxDate)) ||
+            (this.minDate && year < this.datePickerService.getYear(this.minDate))) {
+            return false;
+        }
+        return true;
+    }
+    /** Sets the currently-highlighted year based on a model value. */
+    setSelectedYear(value) {
+        this.selectedYear = null;
+        if (value instanceof DateRange) {
+            const displayValue = value.start || value.end;
+            if (displayValue) {
+                this.selectedYear = this.datePickerService.getYear(displayValue);
+            }
+        }
+        else if (value) {
+            this.selectedYear = this.datePickerService.getYear(value);
+        }
+    }
+    isSameMultiYearView(date1, date2, minDate, maxDate) {
+        const year1 = this.datePickerService.getYear(date1);
+        const year2 = this.datePickerService.getYear(date2);
+        const startingYear = this.getStartingYear(minDate, maxDate);
+        return (Math.floor((year1 - startingYear) / this.datePickerService.yearsPerPage) ===
+            Math.floor((year2 - startingYear) / this.datePickerService.yearsPerPage));
+    }
+    getStartingYear(minDate, maxDate) {
+        let startingYear = 0;
+        if (maxDate) {
+            const maxYear = this.datePickerService.getYear(maxDate);
+            startingYear = maxYear - this.datePickerService.yearsPerPage + 1;
+        }
+        else if (minDate) {
+            startingYear = this.datePickerService.getYear(minDate);
+        }
+        return startingYear;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: IpiCalendarMultiYearView, deps: [{ token: i0.ChangeDetectorRef }, { token: IpiDatepickerService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: IpiCalendarMultiYearView, isStandalone: true, selector: "ipi-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(--ipi-calendar-multi-year-view-table-header-border-bottom-color, #C6C6C6)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: CalendarBody, selector: "[calendar-body]", inputs: ["label", "rows", "todayValue", "startValue", "endValue", "labelMinRequiredCells", "numCols", "activeCell", "isRange", "cellAspectRatio", "comparisonStart", "comparisonEnd", "previewStart", "previewEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedValueChange", "previewChange", "activeDateChange", "dragStarted", "dragEnded"] }, { kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: IpiCalendarMultiYearView, decorators: [{
+            type: Component,
+            args: [{ selector: 'ipi-calendar-multi-year-view', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        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(--ipi-calendar-multi-year-view-table-header-border-bottom-color, #C6C6C6)}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: IpiDatepickerService }], propDecorators: { activeDate: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], minDate: [{
+                type: Input
+            }], maxDate: [{
+                type: Input
+            }], selectedChange: [{
+                type: Output
+            }], yearSelected: [{
+                type: Output
+            }], activeDateChange: [{
+                type: Output
+            }], calendarBody: [{
+                type: ViewChild,
+                args: [CalendarBody]
+            }] } });
+
+const months = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'Jun',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December',
+];
+class IpiCalendarComponent {
+    constructor(datePickerService) {
+        this.datePickerService = datePickerService;
+        this.monthSelected = new EventEmitter();
+        this.yearSelected = new EventEmitter();
+        this.activeDateChange = new EventEmitter();
+        this.userDragDrop = new EventEmitter();
+        this.selectedChange = new EventEmitter();
+        this.userSelection = new EventEmitter();
+        this.calendarClose = new EventEmitter();
+        this.isButtonHidden = true;
+        this.activeDateView = 'month';
+        this.activeDrag = null;
+    }
+    get activeDate() {
+        return this._activeDate;
+    }
+    set activeDate(value) {
+        const validDate = this.datePickerService.getValidDateOrNull(this.datePickerService.deserialize(value)) ||
+            this.datePickerService.today();
+        this._activeDate = this.datePickerService.clampDate(validDate, validDate, validDate);
+    }
+    get minDate() {
+        return this._minDate;
+    }
+    set minDate(value) {
+        this._minDate = this.datePickerService.getValidDateOrNull(this.datePickerService.deserialize(value));
+    }
+    get selected() {
+        return this._selected;
+    }
+    set selected(value) {
+        if (value instanceof DateRange) {
+            this._selected = value;
+        }
+        else {
+            this._selected = this.datePickerService.getValidDateOrNull(this.datePickerService.deserialize(value));
+        }
+    }
+    get maxDate() {
+        return this._maxDate;
+    }
+    set maxDate(value) {
+        this._maxDate = this.datePickerService.getValidDateOrNull(this.datePickerService.deserialize(value));
+    }
+    calendarDateViewChange() {
+        this.activeDateView = this.activeDateView == 'month' ? 'multi-year' : 'month';
+    }
+    onCalendarDateViewKeydown(event) {
+        if (event.code.startsWith('Arrow')) {
+            event.preventDefault();
+        }
+        if (event.code === 'Enter' || event.code === 'Space') {
+            this.calendarDateViewChange();
+        }
+    }
+    goToPreviousView() {
+        this.activeDate =
+            this.activeDateView == 'month'
+                ? this.datePickerService.addCalendarMonths(this.activeDate, -1)
+                : this.datePickerService.addCalendarYears(this.activeDate, this.activeDateView == 'year' ? -1 : -this.datePickerService.yearsPerPage);
+    }
+    goToNextView() {
+        this.activeDate =
+            this.activeDateView == 'month'
+                ? this.datePickerService.addCalendarMonths(this.activeDate, 1)
+                : this.datePickerService.addCalendarYears(this.activeDate, this.activeDateView == 'year' ? 1 : this.datePickerService.yearsPerPage);
+    }
+    onArrowKeydown(event, direction) {
+        if (event.code.startsWith('Arrow')) {
+            event.preventDefault();
+        }
+        if (event.code === 'Enter' || event.code === 'Space') {
+            if (direction === 'next') {
+                this.goToNextView();
+            }
+            else {
+                this.goToPreviousView();
+            }
+        }
+    }
+    previousEnabled() {
+        if (!this.minDate) {
+            return true;
+        }
+        return (!this.minDate || !this.isSameView(this.activeDate, this.minDate));
+    }
+    nextEnabled() {
+        return (!this.maxDate || !this.isSameView(this.activeDate, this.maxDate));
+    }
+    dragStarted(event) {
+        this.activeDrag = event;
+    }
+    /**
+     * Called when a drag completes. It may end in cancelation or in the selection
+     * of a new range.
+     */
+    dragEnded(event) {
+        if (!this.activeDrag)
+            return;
+        if (event.value) {
+            this.userDragDrop.emit(event);
+        }
+        this.activeDrag = null;
+    }
+    get viewButtonText() {
+        if (this.activeDateView === 'month') {
+            return this.getCurrentMonthAndYear(this.activeDate);
+        }
+        if (this.activeDateView === 'year') {
+            return this.getCurrentYear(this.activeDate);
+        }
+        return this.formatYearRange(...this.formatMinAndMaxYearLabels());
+    }
+    goToDateInView(date, view) {
+        this.activeDate = date;
+        this.activeDateView = view;
+    }
+    monthSelectedInYearView(normalizedMonth) {
+        this.monthSelected.emit(normalizedMonth);
+    }
+    yearSelectedInMultiYearView(normalizedYear) {
+        this.yearSelected.emit(normalizedYear);
+    }
+    dateSelected(event) {
+        const date = event.value;
+        if (this.selected instanceof DateRange ||
+            (date && !this.datePickerService.sameDate(date, this.selected))) {
+            this.selectedChange.emit(date);
+        }
+        this.userSelection.emit({ value: date, event });
+    }
+    toggleButtonVisibility(event) {
+        if (event.type === 'focusout') {
+            this.isButtonHidden = true;
+        }
+        else if (event.type === 'focusin') {
+            this.isButtonHidden = false;
+        }
+    }
+    getCurrentMonthAndYear(date) {
+        const month = months[date.getMonth()];
+        const year = date.getFullYear();
+        return `${month} ${year}`;
+    }
+    getCurrentYear(date) {
+        return date.getFullYear().toString();
+    }
+    formatYearRange(start, end) {
+        return `${start} \u2013 ${end}`;
+    }
+    formatMinAndMaxYearLabels() {
+        // The offset from the active year to the "slot" for the starting year is the
+        // *actual* first rendered year in the multi-year view, and the last year is
+        // just yearsPerPage - 1 away.
+        const activeYear = this.datePickerService.getYear(this.activeDate);
+        const minYearOfPage = activeYear -
+            this.datePickerService.getActiveOffset(this.activeDate, this.minDate, this.maxDate);
+        const maxYearOfPage = minYearOfPage + this.datePickerService.yearsPerPage - 1;
+        const minYearLabel = this.datePickerService.getYearName(this.datePickerService.createDate(minYearOfPage, 0, 1));
+        const maxYearLabel = this.datePickerService.getYearName(this.datePickerService.createDate(maxYearOfPage, 0, 1));
+        return [minYearLabel, maxYearLabel];
+    }
+    isSameView(date1, date2) {
+        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') {
+            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: IpiCalendarComponent, deps: [{ token: IpiDatepickerService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: IpiCalendarComponent, isStandalone: true, selector: "ipi-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                <ipi-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                </ipi-calendar-month-view>\n            }\n\n            @case ('year') {\n                <ipi-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                </ipi-calendar-year-view>\n            }\n\n            @case ('multi-year') {\n                <ipi-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                </ipi-calendar-multi-year-view>\n            }\n          }\n    </div>\n</div>\n\n<ipi-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</ipi-button>\n", styles: [":host{position:relative}.header{display:flex;justify-content:space-between;align-items:center;color:var(--ipi-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(--ipi-calendar-header-active-date-view-focus-color, #FFFFFF);background-color:var(--ipi-calendar-header-active-date-view-focus-background-color, #FF7955)}.active-date-view:hover{border-radius:4px;color:var(--ipi-calendar-header-active-date-view-hover-color, #FFFFFF);background-color:var(--ipi-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(--ipi-calendar-header-chevron-hover-focus-color, #FFFFFF);background-color:var(--ipi-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(--ipi-calendar-header-chevron-disabled-color, #5D6068)}.chevron.left{transform:rotate(-45deg)}ipi-button{position:absolute;bottom:-50px}\n"], dependencies: [{ kind: "component", type: IpiButtonComponent, selector: "ipi-button", inputs: ["link", "state", "options", "ariaLabel"], outputs: ["focusChange", "clickChange"] }, { kind: "component", type: IpiCalendarYearView, selector: "ipi-calendar-year-view", inputs: ["activeDate", "selected", "minDate", "maxDate"], outputs: ["selectedChange", "monthSelected", "activeDateChange"] }, { kind: "component", type: IpiCalendarMonthView, selector: "ipi-calendar-month-view", inputs: ["activeDate", "selected", "minDate", "maxDate", "activeDrag"], outputs: ["dragStarted", "dragEnded", "activeDateChange", "userSelection", "selectedChange"] }, { kind: "component", type: IpiCalendarMultiYearView, selector: "ipi-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: IpiCalendarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ipi-calendar', imports: [
+                        IpiButtonComponent,
+                        IpiCalendarYearView,
+                        IpiCalendarMonthView,
+                        IpiCalendarMultiYearView,
+                    ], 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                <ipi-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                </ipi-calendar-month-view>\n            }\n\n            @case ('year') {\n                <ipi-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                </ipi-calendar-year-view>\n            }\n\n            @case ('multi-year') {\n                <ipi-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                </ipi-calendar-multi-year-view>\n            }\n          }\n    </div>\n</div>\n\n<ipi-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</ipi-button>\n", styles: [":host{position:relative}.header{display:flex;justify-content:space-between;align-items:center;color:var(--ipi-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(--ipi-calendar-header-active-date-view-focus-color, #FFFFFF);background-color:var(--ipi-calendar-header-active-date-view-focus-background-color, #FF7955)}.active-date-view:hover{border-radius:4px;color:var(--ipi-calendar-header-active-date-view-hover-color, #FFFFFF);background-color:var(--ipi-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(--ipi-calendar-header-chevron-hover-focus-color, #FFFFFF);background-color:var(--ipi-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(--ipi-calendar-header-chevron-disabled-color, #5D6068)}.chevron.left{transform:rotate(-45deg)}ipi-button{position:absolute;bottom:-50px}\n"] }]
+        }], ctorParameters: () => [{ type: IpiDatepickerService }], propDecorators: { activeDate: [{
+                type: Input
+            }], minDate: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], maxDate: [{
+                type: Input
+            }], comparisonStart: [{
+                type: Input
+            }], comparisonEnd: [{
+                type: Input
+            }], startDateAccessibleName: [{
+                type: Input
+            }], endDateAccessibleName: [{
+                type: Input
+            }], monthSelected: [{
+                type: Output
+            }], yearSelected: [{
+                type: Output
+            }], activeDateChange: [{
+                type: Output
+            }], userDragDrop: [{
+                type: Output
+            }], selectedChange: [{
+                type: Output
+            }], userSelection: [{
+                type: Output
+            }], calendarClose: [{
+                type: Output
+            }] } });
+
+/** A class representing a range of dates. */
+class DateRange {
+    constructor(start, end) {
+        this.start = start;
+        this.end = end;
+    }
+}
+class DateRangeFormControls {
+    constructor(start, end) {
+        this.start = start;
+        this.end = end;
+    }
+}
+class IpiDatepickerComponent {
+    constructor(ngZone, osService, elementRef, overlayService, changeDetectorRef, datepickerService, rangeSelectionStrategy) {
+        this.ngZone = ngZone;
+        this.osService = osService;
+        this.elementRef = elementRef;
+        this.overlayService = overlayService;
+        this.changeDetectorRef = changeDetectorRef;
+        this.datepickerService = datepickerService;
+        this.rangeSelectionStrategy = rangeSelectionStrategy;
+        this.closeButtonFocused = false;
+        this.formErrorMessage = null;
+        this._minDate = this.options?.min ? this.options.min : null;
+        this._maxDate = this.options?.max ? this.options.max : null;
+        this.formControlSubscriptions = [];
+    }
+    get activeDate() {
+        return this._activeDate;
+    }
+    set activeDate(value) {
+        const validDate = this.datepickerService.getValidDateOrNull(this.datepickerService.deserialize(value)) ||
+            this.datepickerService.today();
+        this._activeDate = this.datepickerService.clampDate(validDate, this.minDate, this.maxDate);
+        this._activeDate = value;
+        this.shouldShowCalendar = false;
+    }
+    get minDate() {
+        return this._minDate;
+    }
+    set minDate(value) {
+        this._minDate = this.datepickerService.getValidDateOrNull(this.datepickerService.deserialize(value));
+    }
+    get maxDate() {
+        return this._maxDate;
+    }
+    set maxDate(value) {
+        this._maxDate = this.datepickerService.getValidDateOrNull(this.datepickerService.deserialize(value));
+    }
+    get selectedDate() {
+        return this._selected;
+    }
+    set selectedDate(value) {
+        if (this.options.formControlName instanceof DateRangeFormControls) {
+            if (value instanceof DateRange) {
+                this._selected = value;
+            }
+            else {
+                this._selected = new DateRange(this.datepickerService.getValidDateOrNull(this.datepickerService.deserialize(value)), null);
+            }
+            this.options.formGroup.controls[this.options.formControlName.start].setValue(this._selected.start, { emitEvent: false });
+            this.options.formGroup.controls[this.options.formControlName.end].setValue(this._selected.end, { emitEvent: false });
+        }
+        else {
+            this._selected = this.datepickerService.getValidDateOrNull(this.datepickerService.deserialize(value));
+            this.options.formGroup.controls[this.options.formControlName].setValue(this._selected, { emitEvent: false });
+        }
+    }
+    ngOnInit() {
+        this._selected =
+            this.options.formControlName instanceof DateRangeFormControls
+                ? new DateRange(this.options.formGroup.value[this.options.formControlName.start], this.options.formGroup.value[this.options.formControlName.end])
+                : this.options.formGroup.value[this.options.formControlName];
+        this.maxDate = this.options.max ? this.options.max : null;
+        this.minDate = this.options.min ? this.options.min : null;
+        this.initDefaultErrors();
+        this.changeDetectorRef.detectChanges();
+        this.ngZone.runOutsideAngular(() => {
+            if (this.datepicker) {
+                this.datepicker.nativeElement.addEventListener('focus', () => this.activateControl());
+            }
+        });
+    }
+    ngAfterViewInit() {
+        this.setFormSubscriptions();
+    }
+    ngOnDestroy() {
+        if (this.datepicker) {
+            this.datepicker.nativeElement.removeEventListener('focusin', () => this.activateControl());
+        }
+        this.formControlSubscriptions.forEach((subscription) => subscription.unsubscribe());
+    }
+    activateControl() {
+        if (this.calendar) {
+            return;
+        }
+        this.ngZone.run(() => {
+            this.shouldShowCalendar = true;
+        });
+        this.changeDetectorRef.markForCheck();
+        setTimeout(() => {
+            this.generateCalendarPosition(this.calendar);
+            this.overlayService.appendToOverlay(this.calendar.nativeElement, true);
+            this.changeDetectorRef.detectChanges();
+        });
+    }
+    onClick(event) {
+        if (!this.shouldShowCalendar) {
+            return;
+        }
+        if (this.datepicker) {
+            const isIputClicked = this.checkPosition(event, this.elementRef.nativeElement.getBoundingClientRect());
+            if (isIputClicked) {
+                this.shouldShowCalendar = isIputClicked;
+                if (!this.shouldShowCalendar) {
+                    this.overlayService.removeFromOverlay(this.calendar.nativeElement);
+                }
+                return;
+            }
+        }
+        if (this.calendar) {
+            const isCalendarClicked = this.checkPosition(event, this.calendar.nativeElement.getBoundingClientRect());
+            if (isCalendarClicked) {
+                this.ngZone.run(() => {
+                    this.shouldShowCalendar = isCalendarClicked;
+                });
+                if (!this.shouldShowCalendar) {
+                    this.overlayService.removeFromOverlay(this.calendar.nativeElement);
+                }
+                return;
+            }
+        }
+        this.closeCalendar();
+        if (!this.shouldShowCalendar) {
+            this.overlayService.removeFromOverlay(this.calendar.nativeElement);
+        }
+    }
+    getDisplayValue() {
+        if (!this.selectedDate) {
+            return 'No date selected.';
+        }
+        if (this.selectedDate instanceof Date) {
+            return this.datepickerService.formatter.format(this.selectedDate);
+        }
+        if (this.selectedDate instanceof DateRange) {
+            if (this.selectedDate.start && this.selectedDate.end) {
+                return `${this.datepickerService.formatter.format(this.selectedDate.start)} - ${this.datepickerService.formatter.format(this.selectedDate.end)}`;
+            }
+            if (this.selectedDate.start) {
+                return `${this.datepickerService.formatter.format(this.selectedDate.start)} - `;
+            }
+        }
+        return 'No date selected.';
+    }
+    getformErrorMessage() {
+        this.formErrorMessage = this.getErrorIfControlInvalid();
+        return this.formErrorMessage ? this.formErrorMessage : null;
+    }
+    onCloseClick() {
+        this.closeCalendar();
+        if (this.datepicker) {
+            this.datepicker.nativeElement.focus();
+        }
+    }
+    onCloseKeyDown(event) {
+        if (event.code.startsWith('Arrow') || event.code === 'Space') {
+            event.preventDefault();
+        }
+        if (event.code === 'Enter' || event.code === 'Space') {
+            this.closeCalendar();
+            if (this.datepicker) {
+                this.datepicker.nativeElement.focus();
+            }
+        }
+    }
+    handleDragAndDropEnd(event) {
+        this.selectedDate = new DateRange(event.value.start, event.value.end);
+    }
+    handleUserSelection(event) {
+        const selection = this.selectedDate;
+        const value = event.value;
+        const isRange = selection instanceof DateRange;
+        if (!value) {
+            this.selectedDate = null;
+            return;
+        }
+        if (isRange && this.rangeSelectionStrategy) {
+            const newSelection = this.rangeSelectionStrategy.selectionFinished(value, selection);
+            this.selectedDate = newSelection;
+        }
+        else if (value && (isRange || !this.datepickerService.sameDate(value, selection))) {
+            this.selectedDate = value;
+        }
+    }
+    closeCalendar() {
+        this.shouldShowCalendar = false;
+        if (this.options.formControlName instanceof DateRangeFormControls) {
+            this.options.formGroup.controls[this.options.formControlName.start].markAsTouched();
+            this.options.formGroup.controls[this.options.formControlName.end].markAsTouched();
+        }
+        else {
+            this.options.formGroup.controls[this.options.formControlName].markAsTouched();
+        }
+        this.overlayService.removeFromOverlay(this.calendar.nativeElement);
+    }
+    generateCalendarPosition(calendar) {
+        const calendarEl = calendar.nativeElement;
+        const elementRefRect = this.elementRef.nativeElement.getBoundingClientRect();
+        if (this.osService.mobileOS === MobileOS.iOS) {
+            elementRefRect.y += window.visualViewport.offsetTop;
+            elementRefRect.x += window.visualViewport.offsetLeft;
+        }
+        calendarEl.style.left = elementRefRect.x + 'px';
+        calendarEl.style.top = elementRefRect.y + elementRefRect.height + 10 + 'px';
+        if (window.innerHeight < calendarEl.getBoundingClientRect().bottom) {
+            calendarEl.style.top = 'unset';
+            calendarEl.style.left = elementRefRect.x + 'px';
+            calendarEl.style.bottom = window.innerHeight - elementRefRect.y + 10 + 'px';
+        }
+    }
+    setFormSubscriptions() {
+        if (this.options.formControlName instanceof DateRangeFormControls) {
+            const startControl = this.options.formGroup.controls[this.options.formControlName.start];
+            const endControl = this.options.formGroup.controls[this.options.formControlName.end];
+            this.formControlSubscriptions.push(startControl.valueChanges.subscribe((value) => {
+                if (value && this.selectedDate instanceof DateRange) {
+                    this.selectedDate = new DateRange(this.datepickerService.getValidDateOrNull(this.datepickerService.deserialize(value)), this.datepickerService.getValidDateOrNull(this.datepickerService.deserialize(this.selectedDate.end)));
+                }
+                this.changeDetectorRef.detectChanges();
+            }), endControl.valueChanges.subscribe((value) => {
+                if (value && this.selectedDate instanceof DateRange) {
+                    this.selectedDate = new DateRange(this.datepickerService.getValidDateOrNull(this.datepickerService.deserialize(this.selectedDate.start)), this.datepickerService.getValidDateOrNull(this.datepickerService.deserialize(value)));
+                    this.changeDetectorRef.detectChanges();
+                }
+            }));
+            return;
+        }
+        else {
+            const control = this.options.formGroup.controls[this.options.formControlName];
+            this.formControlSubscriptions.push(control.valueChanges.subscribe(() => {
+                this.selectedDate = control.value;
+                this.changeDetectorRef.detectChanges();
+            }));
+        }
+    }
+    // Unified position checker for both input and calendar
+    checkPosition(event, rect) {
+        const x = event.clientX;
+        const y = event.clientY;
+        if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) {
+            return true;
+        }
+        return false;
+    }
+    initDefaultErrors() {
+        let defaultErrors = {
+            required: 'This is a required field',
+        };
+        if (this.options.min) {
+            this.setMinValidator();
+            defaultErrors['datepickerMin'] = `Start date should be before ${this.datepickerService.formatter.format(this.minDate)}`;
+        }
+        if (this.options.max) {
+            this.setMaxValidator();
+            defaultErrors['datepickerMax'] = `End date should be before ${this.datepickerService.formatter.format(this.maxDate)}`;
+        }
+        if (!this.options.errors) {
+            this.errors = defaultErrors;
+            return;
+        }
+        this.errors = {
+            ...defaultErrors,
+            ...this.options.errors
+        };
+    }
+    getErrorIfControlInvalid() {
+        if (this.options.formControlName instanceof DateRangeFormControls) {
+            const startControl = this.options.formGroup.controls[this.options.formControlName.start];
+            const endControl = this.options.formGroup.controls[this.options.formControlName.end];
+            if (startControl.touched && startControl.invalid || endControl.touched && endControl.invalid) {
+                for (const error in this.errors) {
+                    if (this.options.formGroup.controls[this.options.formControlName.start].hasError(error)) {
+                        return this.errors[error];
+                    }
+                    if (this.options.formGroup.controls[this.options.formControlName.end].hasError(error)) {
+                        return this.errors[error];
+                    }
+                }
+            }
+        }
+        else {
+            const control = this.options.formGroup.controls[this.options.formControlName];
+            if (control.touched && control.invalid) {
+                for (const error in this.errors) {
+                    if (this.options.formGroup.controls[this.options.formControlName].hasError(error)) {
+                        return this.errors[error];
+                    }
+                }
+            }
+        }
+        return null;
+    }
+    setMinValidator() {
+        const minValidator = this.datepickerService.minValidator(this.options.min);
+        if (this.options.formControlName instanceof DateRangeFormControls) {
+            this.options.formGroup.controls[this.options.formControlName.start].addValidators(minValidator);
+        }
+        else {
+            this.options.formGroup.controls[this.options.formControlName].addValidators(minValidator);
+        }
+    }
+    setMaxValidator() {
+        const maxValidator = this.datepickerService.maxValidator(this.options.max);
+        if (this.options.formControlName instanceof DateRangeFormControls) {
+            this.options.formGroup.controls[this.options.formControlName.end].addValidators(maxValidator);
+        }
+        else {
+            this.options.formGroup.controls[this.options.formControlName].addValidators(maxValidator);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: IpiDatepickerComponent, deps: [{ token: i0.NgZone }, { token: i1$1.OSService }, { token: i0.ElementRef }, { token: i1$1.OverlayService }, { token: i0.ChangeDetectorRef }, { token: IpiDatepickerService }, { token: DefaultCalendarRangeStrategy }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: IpiDatepickerComponent, isStandalone: true, selector: "ipi-datepicker", inputs: { options: "options" }, host: { listeners: { "document:click": "onClick($event)" } }, viewQueries: [{ propertyName: "datepicker", first: true, predicate: ["datepicker"], descendants: true }, { propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true }], ngImport: i0, template: "@if (options) {\n    @if (options.formControlName && options.formGroup) {\n        <div class=\"label-wrapper\">\n            @if (options.label !== '') {\n                <label>{{ options.label }}</label>\n             }\n        </div>\n\n        <div tabindex=\"0\" \n            #datepicker \n            class=\"datepicker\"\n            [class.datepicker-error]=\"formErrorMessage\"\n            (click)=\"this.activateControl()\">\n            <span\n                class=\"datepicker-value\"\n                role=\"textbox\" \n                aria-readonly=\"true\" \n                aria-label=\"Selected date\"\n                aria-live=\"polite\">\n                    {{ getDisplayValue() }}\n            </span>\n\n            <div class=\"svg-wrapper\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"#f1f1f1\" \n                    viewBox=\"0 0 256 256\"><path d=\"M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Zm-68-76a12,12,0,1,1-12-12A12,12,0,0,1,140,132Zm44,0a12,12,0,1,1-12-12A12,12,0,0,1,184,132ZM96,172a12,12,0,1,1-12-12A12,12,0,0,1,96,172Zm44,0a12,12,0,1,1-12-12A12,12,0,0,1,140,172Zm44,0a12,12,0,1,1-12-12A12,12,0,0,1,184,172Z\"></path>\n                </svg>\n            </div>\n        </div>\n\n        <div class=\"footer\">\n                <div>{{ getformErrorMessage() }}</div>\n        </div>\n\n        @if (shouldShowCalendar) {\n            <div #calendar class=\"calendar\">\n                <ipi-calendar\n                    [(activeDate)]=\"activeDate\"\n                    [(selected)]=\"selectedDate\"\n                    [minDate]=\"minDate\"\n                    [maxDate]=\"maxDate\"\n                    (calendarClose)=\"onCloseKeyDown($event)\"\n                    (userSelection)=\"handleUserSelection($event)\"\n                    (userDragDrop)=\"handleDragAndDropEnd($event)\">\n                </ipi-calendar>\n            </div>\n        }\n    }\n}\n", styles: [":host{width:296px;display:block;touch-action:manipulation}ipi-calendar{width:100%;height:358px}.header .label-wrapper{display:flex;justify-content:center;align-items:center;text-wrap:wrap}.label-wrapper label{font-size:14px;font-weight:600;margin-right:4px}.datepicker{display:flex;flex-direction:row;justify-content:space-between;align-items:center;cursor:pointer;border:var(--ipi-datepicker-border, 1px solid #E9E9E9);border-radius:4px 24px 24px 4px;transition:border .3s ease}.datepicker-error{border:var(--ipi-datepicker-error-border, 1px solid #F96138)}.datepicker-value{width:100%;text-align:center}.datepicker:hover,.datepicker:focus{outline:none;border-color:var(--ipi-datepicker-border-hover-color, #FF7955)}.svg-wrapper{height:40px}.svg-wrapper svg{background-color:var(--ipi-datepicker-svg-background-color, #FF7955);fill:var(--ipi-datepicker-svg-fill-color, #FFFFFF);border-radius:50%;padding:8px}.svg-wrapper svg:hover{background-color:var(--ipi-datepicker-svg-background-hover-color, #F96138)}.calendar{width:296px;display:flex;position:fixed;flex-direction:column;justify-content:center;align-items:center;pointer-events:all;border-radius:4px;background-color:var(--ipi-calendar-background-color, #ffffff);box-shadow:var(--ipi-calendar-box-shadow, 0px 2px 4px -1px rgba(0, 0, 0, .2), 0px 4px 5px 0px rgba(0, 0, 0, .14), 0px 1px 10px 0px rgba(0, 0, 0, .12));z-index:98;animation:fadeIn .3s}.footer{height:14px;font-size:12px;margin-top:2px;color:var(--ipi-datepicker-error-color, #F96138)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}::ng-deep .cdk-visually-hidden{width:1px;height:1px;clip:rect(0 0 0 0);overflow:hidden;position:absolute;white-space:nowrap;outline:0;border:0;left:0;padding:0;margin:-1px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: IpiCalendarComponent, selector: "ipi-calendar", inputs: ["activeDate", "minDate", "selected", "maxDate", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["monthSelected", "yearSelected", "activeDateChange", "userDragDrop", "selectedChange", "userSelection", "calendarClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: IpiDatepickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ipi-datepicker', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        FormsModule,
+                        IpiCalendarComponent,
+                    ], template: "@if (options) {\n    @if (options.formControlName && options.formGroup) {\n        <div class=\"label-wrapper\">\n            @if (options.label !== '') {\n                <label>{{ options.label }}</label>\n             }\n        </div>\n\n        <div tabindex=\"0\" \n            #datepicker \n            class=\"datepicker\"\n            [class.datepicker-error]=\"formErrorMessage\"\n            (click)=\"this.activateControl()\">\n            <span\n                class=\"datepicker-value\"\n                role=\"textbox\" \n                aria-readonly=\"true\" \n                aria-label=\"Selected date\"\n                aria-live=\"polite\">\n                    {{ getDisplayValue() }}\n            </span>\n\n            <div class=\"svg-wrapper\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"#f1f1f1\" \n                    viewBox=\"0 0 256 256\"><path d=\"M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Zm-68-76a12,12,0,1,1-12-12A12,12,0,0,1,140,132Zm44,0a12,12,0,1,1-12-12A12,12,0,0,1,184,132ZM96,172a12,12,0,1,1-12-12A12,12,0,0,1,96,172Zm44,0a12,12,0,1,1-12-12A12,12,0,0,1,140,172Zm44,0a12,12,0,1,1-12-12A12,12,0,0,1,184,172Z\"></path>\n                </svg>\n            </div>\n        </div>\n\n        <div class=\"footer\">\n                <div>{{ getformErrorMessage() }}</div>\n        </div>\n\n        @if (shouldShowCalendar) {\n            <div #calendar class=\"calendar\">\n                <ipi-calendar\n                    [(activeDate)]=\"activeDate\"\n                    [(selected)]=\"selectedDate\"\n                    [minDate]=\"minDate\"\n                    [maxDate]=\"maxDate\"\n                    (calendarClose)=\"onCloseKeyDown($event)\"\n                    (userSelection)=\"handleUserSelection($event)\"\n                    (userDragDrop)=\"handleDragAndDropEnd($event)\">\n                </ipi-calendar>\n            </div>\n        }\n    }\n}\n", styles: [":host{width:296px;display:block;touch-action:manipulation}ipi-calendar{width:100%;height:358px}.header .label-wrapper{display:flex;justify-content:center;align-items:center;text-wrap:wrap}.label-wrapper label{font-size:14px;font-weight:600;margin-right:4px}.datepicker{display:flex;flex-direction:row;justify-content:space-between;align-items:center;cursor:pointer;border:var(--ipi-datepicker-border, 1px solid #E9E9E9);border-radius:4px 24px 24px 4px;transition:border .3s ease}.datepicker-error{border:var(--ipi-datepicker-error-border, 1px solid #F96138)}.datepicker-value{width:100%;text-align:center}.datepicker:hover,.datepicker:focus{outline:none;border-color:var(--ipi-datepicker-border-hover-color, #FF7955)}.svg-wrapper{height:40px}.svg-wrapper svg{background-color:var(--ipi-datepicker-svg-background-color, #FF7955);fill:var(--ipi-datepicker-svg-fill-color, #FFFFFF);border-radius:50%;padding:8px}.svg-wrapper svg:hover{background-color:var(--ipi-datepicker-svg-background-hover-color, #F96138)}.calendar{width:296px;display:flex;position:fixed;flex-direction:column;justify-content:center;align-items:center;pointer-events:all;border-radius:4px;background-color:var(--ipi-calendar-background-color, #ffffff);box-shadow:var(--ipi-calendar-box-shadow, 0px 2px 4px -1px rgba(0, 0, 0, .2), 0px 4px 5px 0px rgba(0, 0, 0, .14), 0px 1px 10px 0px rgba(0, 0, 0, .12));z-index:98;animation:fadeIn .3s}.footer{height:14px;font-size:12px;margin-top:2px;color:var(--ipi-datepicker-error-color, #F96138)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}::ng-deep .cdk-visually-hidden{width:1px;height:1px;clip:rect(0 0 0 0);overflow:hidden;position:absolute;white-space:nowrap;outline:0;border:0;left:0;padding:0;margin:-1px}\n"] }]
+        }], ctorParameters: () => [{ type: i0.NgZone }, { type: i1$1.OSService }, { type: i0.ElementRef }, { type: i1$1.OverlayService }, { type: i0.ChangeDetectorRef }, { type: IpiDatepickerService }, { type: DefaultCalendarRangeStrategy }], propDecorators: { datepicker: [{
+                type: ViewChild,
+                args: ['datepicker']
+            }], calendar: [{
+                type: ViewChild,
+                args: ['calendar']
+            }], options: [{
+                type: Input
+            }], onClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DateRange, DateRangeFormControls, IpiDatepickerComponent, IpiDatepickerService };
+//# sourceMappingURL=apexara-ng-components-datepicker.mjs.map