@updevs/components 1.0.0-alpha.3 → 1.0.0-alpha.30

package/fesm2022/updevs-components-calendar.mjs

@@ -0,0 +1,1712 @@
+import * as i0 from '@angular/core';
+import { inject, Injectable, signal, EventEmitter, Injector, ElementRef, NgZone, afterNextRender, Component, Input, Output, ChangeDetectorRef, effect, ViewChild, NgModule } from '@angular/core';
+import { DateService } from '@updevs/sdk/core';
+import { BaseComponent } from '@updevs/sdk/layout';
+import * as i1$2 from '@jsverse/transloco';
+import { TranslocoService, TranslocoDirective } from '@jsverse/transloco';
+import { startWith } from 'rxjs';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i1$1 from '@updevs/components/button';
+import { UpdButtonModule } from '@updevs/components/button';
+import * as i3 from '@updevs/icons';
+import { UpdIconsModule } from '@updevs/icons';
+
+/**
+ * A class representing a range of dates.
+ */
+class DateRangeModel {
+    constructor(
+    /**
+     * The start date of the range.
+     */
+    start, 
+    /**
+     * The end date of the range.
+     */
+    end) {
+        this.start = start;
+        this.end = end;
+    }
+}
+
+/**
+ * Provides the default date range selection behavior.
+ */
+class CalendarRangeStrategyService {
+    constructor() {
+        this.dateService = inject(DateService);
+    }
+    /**
+     * Called when the user has finished selecting a value.
+     * @param date Date that was selected. Will be null if the user cleared the selection.
+     * @param currentRange Range that is currently show in the calendar.
+     */
+    selectionFinished(date, currentRange) {
+        let { start, end } = currentRange;
+        if (start === undefined) {
+            start = date;
+        }
+        else if (end === undefined && date && this.dateService.compare(date, start) >= 0) {
+            end = date;
+        }
+        else {
+            start = date;
+            end = undefined;
+        }
+        return new DateRangeModel(start, end);
+    }
+    /**
+     * Called when the user has activated a new date (e.g. by hovering over
+     * it or moving focus) and the calendar tries to display a date range.
+     *
+     * @param activeDate Date that the user has activated. Will be null if the user moved
+     *    focus to an element that's no a calendar cell.
+     * @param currentRange Range that is currently shown in the calendar.
+     */
+    createPreview(activeDate, currentRange) {
+        let start;
+        let end;
+        if (!!currentRange.start && !currentRange.end && !!activeDate) {
+            start = currentRange.start;
+            end = activeDate;
+        }
+        return new DateRangeModel(start, end);
+    }
+    /**
+     * Called when the user has dragged a date in the currently selected range to another
+     * date. Returns the date updated range that should result from this interaction.
+     *
+     * @param dragOrigin The date the user started dragging from.
+     * @param originalRange The originally selected date range.
+     * @param newDate The currently targeted date in the drag operation.
+     */
+    createDrag(dragOrigin, originalRange, newDate) {
+        let start = originalRange.start;
+        let end = originalRange.end;
+        if (!start || !end) {
+            // Can't drag from an incomplete range.
+            return undefined;
+        }
+        const isRange = this.dateService.compare(start, end) !== 0;
+        const diffYears = newDate.getFullYear() - dragOrigin.getFullYear();
+        const diffMonths = newDate.getMonth() - dragOrigin.getMonth();
+        const diffDays = newDate.getDate() - dragOrigin.getDate();
+        if (isRange && this.dateService.areEqual(dragOrigin, originalRange.start)) {
+            start = newDate;
+            if (this.dateService.compare(newDate, end) > 0) {
+                end = this.dateService.addYears(end, diffYears);
+                end = this.dateService.addMonths(end, diffMonths);
+                end = this.dateService.addDays(end, diffDays);
+            }
+        }
+        else if (isRange && this.dateService.areEqual(dragOrigin, originalRange.end)) {
+            end = newDate;
+            if (this.dateService.compare(newDate, start) < 0) {
+                start = this.dateService.addYears(start, diffYears);
+                start = this.dateService.addMonths(start, diffMonths);
+                start = this.dateService.addDays(start, diffDays);
+            }
+        }
+        else {
+            start = this.dateService.addYears(start, diffYears);
+            start = this.dateService.addMonths(start, diffMonths);
+            start = this.dateService.addDays(start, diffDays);
+            end = this.dateService.addYears(end, diffYears);
+            end = this.dateService.addMonths(end, diffMonths);
+            end = this.dateService.addDays(end, diffDays);
+        }
+        return new DateRangeModel(start, end);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: CalendarRangeStrategyService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: CalendarRangeStrategyService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: CalendarRangeStrategyService, decorators: [{
+            type: Injectable
+        }] });
+
+class PassiveListeners {
+    /**
+     * Checks whether the user's browser supports passive event listeners.
+     * See: https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md
+     */
+    static supportsPassiveEventListeners() {
+        if (this.supportsPassiveEvents === undefined && typeof window !== 'undefined') {
+            try {
+                window.addEventListener('test', undefined, Object.defineProperty({}, 'passive', {
+                    get: () => (this.supportsPassiveEvents = true)
+                }));
+            }
+            finally {
+                this.supportsPassiveEvents = this.supportsPassiveEvents || false;
+            }
+        }
+        return this.supportsPassiveEvents;
+    }
+    /**
+     * Normalizes an `AddEventListener` object to something that can be passed
+     * to `addEventListener` on any browser, no matter whether it supports the
+     * `options` parameter.
+     * @param options Object to be normalized.
+     */
+    static normalizePassiveListenerOptions(options) {
+        return this.supportsPassiveEventListeners() ? options : !!options.capture;
+    }
+}
+
+/**
+ * Event options that can be used to bind an active, capturing event.
+ */
+const activeCapturingEventOptions = PassiveListeners.normalizePassiveListenerOptions({ passive: false, capture: true });
+/**
+ * Event options that can be used to bind a passive, capturing event.
+ */
+const passiveCapturingEventOptions = PassiveListeners.normalizePassiveListenerOptions({ passive: true, capture: true });
+/**
+ * Event options that can be used to bind a passive, non-capturing event.
+ */
+const passiveEventOptions = PassiveListeners.normalizePassiveListenerOptions({ passive: true });
+
+class CalendarSignalsService {
+    constructor() {
+        this.minDateSignal = signal(undefined);
+        this.maxDateSignal = signal(undefined);
+        this.activeDateSignal = signal(new Date());
+        this.selectedDateSignal = signal(undefined);
+        this.currentViewSignal = signal('month');
+    }
+    get minDate() {
+        return this.minDateSignal.asReadonly();
+    }
+    set minDate(value) {
+        this.minDateSignal.set(value);
+    }
+    get maxDate() {
+        return this.maxDateSignal.asReadonly();
+    }
+    set maxDate(value) {
+        this.maxDateSignal.set(value);
+    }
+    get activeDate() {
+        return this.activeDateSignal.asReadonly();
+    }
+    set activeDate(value) {
+        this.activeDateSignal.set(value);
+    }
+    get selectedDate() {
+        return this.selectedDateSignal.asReadonly();
+    }
+    set selectedDate(value) {
+        this.selectedDateSignal.set(value);
+    }
+    get currentView() {
+        return this.currentViewSignal.asReadonly();
+    }
+    set currentView(value) {
+        this.currentViewSignal.set(value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: CalendarSignalsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: CalendarSignalsService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: CalendarSignalsService, decorators: [{
+            type: Injectable
+        }] });
+
+let calendarBodyId = 1;
+class CalendarBodyComponent {
+    get startDateLabelId() {
+        return `${this.id}-start-date`;
+    }
+    get endDateLabelId() {
+        return `${this.id}-end-date`;
+    }
+    get colspanClass() {
+        return `col-${this.firstRowOffset}`;
+    }
+    constructor() {
+        /**
+         * 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;
+        /**
+         * 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();
+        /**
+         * 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.didDragSinceMouseDown = false;
+        this.id = `upd-calendar-body-${calendarBodyId++}`;
+        /**
+         * Used to focus the active cell after change detection has run.
+         */
+        this.focusActiveCellAfterViewChecked = false;
+        this.injector = inject(Injector);
+        this.elementRef = inject((ElementRef));
+        this.ngZone = inject(NgZone);
+        this.calendarSignalsService = inject(CalendarSignalsService);
+        this.dateService = inject(DateService);
+        /**
+         * Tracking function for rows based on their identity. Ideally we would use some sort of
+         * key on the row, but that would require a breaking change for the `rows` input. We don't
+         * use the built-in identity tracking, because it logs warnings.
+         */
+        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) {
+                    this.ngZone.run(() => this.previewChange.emit({ value: cell.isEnabled ? cell : undefined, event }));
+                }
+            }
+        };
+        this.touchmoveHandler = (event) => {
+            if (!this.isRange) {
+                return;
+            }
+            const target = this.getActualTouchTarget(event);
+            const cell = target ? this.getCellFromElement(target) : undefined;
+            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?.isEnabled ? cell : undefined, 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 !== undefined && this.isRange) {
+                if (event.type !== 'blur') {
+                    this.didDragSinceMouseDown = true;
+                }
+                // 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 &&
+                    this.getCellFromElement(event.target) &&
+                    !(event.relatedTarget &&
+                        this.getCellFromElement(event.relatedTarget))) {
+                    this.ngZone.run(() => this.previewChange.emit({ value: undefined, event }));
+                }
+            }
+        };
+        /**
+         * Triggered on mousedown or touchstart on a date cell.
+         * Responsible 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.isInRange(cell.compareValue)) {
+                return;
+            }
+            this.ngZone.run(() => {
+                this.dragStarted.emit({
+                    value: cell.rawValue,
+                    event
+                });
+            });
+        };
+        /** Triggered on mouseup anywhere. Responsible 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: undefined, event });
+                });
+                return;
+            }
+            if (cellElement.closest('.upd-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 ?? undefined, 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;
+            // `touchmove` is active since we need to call `preventDefault`.
+            element.addEventListener('touchmove', this.touchmoveHandler, activeCapturingEventOptions);
+            element.addEventListener('mouseenter', this.enterHandler, passiveCapturingEventOptions);
+            element.addEventListener('focus', this.enterHandler, passiveCapturingEventOptions);
+            element.addEventListener('mouseleave', this.leaveHandler, passiveCapturingEventOptions);
+            element.addEventListener('blur', this.leaveHandler, passiveCapturingEventOptions);
+            element.addEventListener('mousedown', this.mousedownHandler, passiveEventOptions);
+            element.addEventListener('touchstart', this.mousedownHandler, passiveEventOptions);
+            window.addEventListener('mouseup', this.mouseupHandler);
+            window.addEventListener('touchend', this.touchendHandler);
+        });
+    }
+    ngAfterViewChecked() {
+        if (this.focusActiveCellAfterViewChecked) {
+            this.focusActiveCell();
+            this.focusActiveCellAfterViewChecked = false;
+        }
+    }
+    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}%`;
+        }
+    }
+    ngOnDestroy() {
+        const element = this.elementRef.nativeElement;
+        element.removeEventListener('touchmove', this.touchmoveHandler, activeCapturingEventOptions);
+        element.removeEventListener('mouseenter', this.enterHandler, passiveCapturingEventOptions);
+        element.removeEventListener('focus', this.enterHandler, passiveCapturingEventOptions);
+        element.removeEventListener('mouseleave', this.leaveHandler, passiveCapturingEventOptions);
+        element.removeEventListener('blur', this.leaveHandler, passiveCapturingEventOptions);
+        element.removeEventListener('mousedown', this.mousedownHandler, passiveEventOptions);
+        element.removeEventListener('touchstart', this.mousedownHandler, passiveEventOptions);
+        window.removeEventListener('mouseup', this.mouseupHandler);
+        window.removeEventListener('touchend', this.touchendHandler);
+    }
+    getIndex(colIndex, rowIndex) {
+        return `${colIndex}${rowIndex}`;
+    }
+    onDateEnter(index) {
+        this.hoveredDate = index;
+    }
+    onDateLeave() {
+        this.hoveredDate = undefined;
+    }
+    /**
+     * Called when a cell is clicked.
+     * @param cell
+     * @param event
+     */
+    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.isEnabled) {
+            this.selectedValueChange.emit({ value: cell.value, event });
+        }
+    }
+    emitActiveDateChange(cell) {
+        if (cell.isEnabled) {
+            const month = cell.value;
+            const oldActiveDate = this.calendarSignalsService.activeDate();
+            const tempDate = this.getDateFromDayOfMonth(oldActiveDate, month);
+            if (this.dateService.compare(oldActiveDate, tempDate)) {
+                this.calendarSignalsService.activeDate = tempDate;
+            }
+        }
+    }
+    /**
+     * Returns whether a cell should be marked as selected.
+     * @param value
+     */
+    isSelected(value) {
+        return this.startValue === value || this.endValue === value;
+    }
+    /**
+     * Returns whether a cell is active.
+     * @param rowIndex
+     * @param colIndex
+     */
+    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;
+    }
+    /**
+     * Focuses the active cell after the microtask queue is empty.
+     *
+     * Adding a 0ms setTimeout seems to fix Voiceover losing focus when pressing PageUp/PageDown
+     * (issue #24330).
+     *
+     * Determined a 0ms by gradually increasing duration from 0 and testing two use cases with screen
+     * reader enabled:
+     *
+     * 1. Pressing PageUp/PageDown repeatedly with pausing between each key press.
+     * 2. Pressing and holding the PageDown key with repeated keys enabled.
+     *
+     * Test 1 worked roughly 95-99% of the time with 0ms and got a little bit better as the duration
+     * increased. Test 2 got slightly better until the duration was long enough to interfere with
+     * repeated keys. If the repeated key speed was faster than the timeout duration, then pressing
+     * and holding pagedown caused the entire page to scroll.
+     *
+     * Since repeated key speed can verify across machines, determined that any duration could
+     * potentially interfere with repeated keys. 0ms would be best because it almost entirely
+     * eliminates the focus being lost in Voiceover (#24330) without causing unintended side effects.
+     * Adding delay also complicates writing tests.
+     */
+    focusActiveCell(movePreview = true) {
+        afterNextRender(() => {
+            setTimeout(() => {
+                const activeCell = this.elementRef.nativeElement.querySelector('.upd-calendar-body-active');
+                if (!!activeCell) {
+                    if (!movePreview) {
+                        this.skipNextFocus = true;
+                    }
+                    activeCell.focus();
+                }
+            });
+        }, { injector: this.injector });
+    }
+    /**
+     * 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.
+     * @param value
+     */
+    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. */
+    isInRange(value) {
+        return this.isInsideRange(value, this.startValue, this.endValue, this.isRange);
+    }
+    /** Gets whether a value is the start of the comparison range. */
+    isComparisonStart(value) {
+        return this.isStart(value, this.comparisonStart, this.comparisonEnd);
+    }
+    /** Whether the cell is a start bridge cell between the main and comparison ranges. */
+    isComparisonBridgeStart(value, rowIndex, colIndex) {
+        if (!this.isComparisonStart(value) || this.isRangeStart(value) || !this.isInRange(value)) {
+            return false;
+        }
+        let previousCell = this.rows[rowIndex][colIndex - 1];
+        if (!previousCell) {
+            const previousRow = this.rows[rowIndex - 1];
+            previousCell = previousRow && previousRow[previousRow.length - 1];
+        }
+        return previousCell && !this.isRangeEnd(previousCell.compareValue);
+    }
+    /** Whether the cell is an end bridge cell between the main and comparison ranges. */
+    isComparisonBridgeEnd(value, rowIndex, colIndex) {
+        if (!this.isComparisonEnd(value) || this.isRangeEnd(value) || !this.isInRange(value)) {
+            return false;
+        }
+        let nextCell = this.rows[rowIndex][colIndex + 1];
+        if (!nextCell) {
+            const nextRow = this.rows[rowIndex + 1];
+            nextCell = nextRow && nextRow[0];
+        }
+        return nextCell && !this.isRangeStart(nextCell.compareValue);
+    }
+    /** Gets whether a value is the end of the comparison range. */
+    isComparisonEnd(value) {
+        return this.isEnd(value, this.comparisonStart, this.comparisonEnd);
+    }
+    /** Gets whether a value is within the current comparison range. */
+    isInComparisonRange(value) {
+        return this.isInsideRange(value, this.comparisonStart, this.comparisonEnd, this.isRange);
+    }
+    /**
+     * Gets whether a value is the same as the start and end of the comparison range.
+     * For context, the functions that we use to determine whether something is the start/end of
+     * a range don't allow for the start and end to be on the same day, because we'd have to use
+     * much more specific CSS selectors to style them correctly in all scenarios. This is fine for
+     * the regular range, because when it happens, the selected styles take over and still show where
+     * the range would've been, however we don't have these selected styles for a comparison range.
+     * This function is used to apply a class that serves the same purpose as the one for selected
+     * dates, but it only applies in the context of a comparison range.
+     */
+    isComparisonIdentical(value) {
+        // Note that we don't need to null check the start/end
+        // here, because the `value` will always be defined.
+        return this.comparisonStart === this.comparisonEnd && value === this.comparisonStart;
+    }
+    /** 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) {
+        // console.log('is in range', this.isInsideRange(value, this.previewStart, this.previewEnd, this.isRange));
+        return this.isInsideRange(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 undefined;
+        }
+        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 undefined;
+    }
+    /** Finds the CalendarCell that corresponds to a DOM node. */
+    getCellFromElement(element) {
+        const cell = this.getCellElement(element);
+        if (!!cell) {
+            const row = cell.getAttribute('data-upd-row');
+            const col = cell.getAttribute('data-upd-col');
+            if (row && col) {
+                return this.rows[parseInt(row, 10)][parseInt(col, 10)];
+            }
+        }
+        return undefined;
+    }
+    /** Checks whether a node is a table cell element. */
+    isTableCell(node) {
+        return node?.nodeName === 'DIV';
+    }
+    /**
+     * 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 || undefined)) {
+            cell = element.parentNode;
+        }
+        else if (this.isTableCell(element.parentNode?.parentNode || undefined)) {
+            cell = element.parentNode.parentNode;
+        }
+        return cell?.getAttribute('data-upd-row') !== undefined ? cell : undefined;
+    }
+    /** Checks whether a value is the start of a range. */
+    isStart(value, start, end) {
+        return end !== undefined && start !== end && value < end && value === start;
+    }
+    /** Checks whether a value is the end of a range. */
+    isEnd(value, start, end) {
+        return start !== undefined && start !== end && value >= start && value === end;
+    }
+    /** Checks whether a value is inside of a range. */
+    isInsideRange(value, start, end, rangeEnabled) {
+        return (rangeEnabled && start !== undefined && end !== undefined && 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);
+    }
+    /**
+     * Takes a day of the month and returns a new date in the same month and year as the currently
+     *  active date. The returned date will have the same day of the month as the argument date.
+     */
+    getDateFromDayOfMonth(activeDate, dayOfMonth) {
+        return this.dateService.create(activeDate.getFullYear(), activeDate.getMonth(), dayOfMonth);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: CalendarBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: CalendarBodyComponent, selector: "upd-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", dragStarted: "dragStarted", dragEnded: "dragEnded" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"container\">\n    <!--\n      If there's not enough space in the first row, create a separate label row. We mark this row as\n      aria-hidden because we don't want it to be read out as one of the weeks in the month.\n    -->\n    @if (firstRowOffset < labelMinRequiredCells) {\n        <div class=\"row seven-cols\" aria-hidden=\"true\">\n            <div class=\"col-7 p-1 d-flex align-items-center\" [style.min-height.px]=\"40\">\n                {{ label }}\n            </div>\n        </div>\n    }\n\n    <!-- Create the first row separately so we can include a special spacer cell. -->\n    @for (row of rows; track trackRow(row); let rowIndex = $index) {\n        <div class=\"row seven-cols\">\n            <!--\n              This cell is purely decorative, but we can't put `aria-hidden` or `role=\"presentation\"` on it,\n              because it throws off the week days for the rest of the row on NVDA. The aspect ratio of the\n              table cells is maintained by setting the top and bottom padding as a percentage of the width\n              (a variant of the trick described here: https://www.w3schools.com/howto/howto_css_aspect_ratio.asp).\n            -->\n            @if (rowIndex === 0 && firstRowOffset) {\n                <div [ngClass]=\"colspanClass\" class=\"p-1 d-flex align-items-center\" [style.min-height.px]=\"40\">\n                    {{ firstRowOffset >= labelMinRequiredCells ? label : '' }}\n                </div>\n            }\n\n            <!--\n              Each gridcell in the calendar contains a button, which signals to assistive technology that the\n              cell is interactable, as well as the selection state via `aria-pressed`. See #23476 for\n              background.\n            -->\n            @for (item of row; track item.id; let colIndex = $index) {\n                <div class=\"col-1 justify-content-center p-1 d-flex align-items-center cursor-pointer\" [attr.data-upd-row]=\"rowIndex\"\n                    [attr.data-upd-col]=\"colIndex\" [style.min-height.px]=\"40\"\n                    [class.bg-secondary-lt]=\"hoveredDate === getIndex(rowIndex, colIndex)\" [class.border]=\"isActiveCell(rowIndex, colIndex)\"\n                    [class.border-secondary]=\"isActiveCell(rowIndex, colIndex)\" [class.bg-azure]=\"isSelected(item.compareValue)\"\n                    [class.text-azure-fg]=\"isSelected(item.compareValue)\" [tabindex]=\"isActiveCell(rowIndex, colIndex) ? 0 : -1\"\n                    [class.upd-calendar-body-disabled]=\"!item.isEnabled\" [class.bg-danger]=\"isRangeStart(item.compareValue)\"\n                    [class.text-danger-fg]=\"isRangeStart(item.compareValue)\" [class.bg-muted]=\"isRangeEnd(item.compareValue)\"\n                    [class.text-muted-fg]=\"isRangeEnd(item.compareValue)\"\n                    [class.upd-calendar-body-range-end]=\"isRangeEnd(item.compareValue)\"\n                    [class.upd-calendar-body-in-range]=\"isInRange(item.compareValue)\"\n                    [class.upd-calendar-body-comparison-bridge-start]=\"isComparisonBridgeStart(item.compareValue, rowIndex, colIndex)\"\n                    [class.upd-calendar-body-comparison-bridge-end]=\"isComparisonBridgeEnd(item.compareValue, rowIndex, colIndex)\"\n                    [class.upd-calendar-body-comparison-start]=\"isComparisonStart(item.compareValue)\"\n                    [class.upd-calendar-body-comparison-end]=\"isComparisonEnd(item.compareValue)\"\n                    [class.upd-calendar-body-in-comparison-range]=\"isInComparisonRange(item.compareValue)\"\n                    [class.rounded-start]=\"isPreviewStart(item.compareValue)\" [class.rounded-end]=\"isPreviewEnd(item.compareValue)\"\n                    [class.border-top]=\"isInPreview(item.compareValue)\" [class.fw-bold]=\"isInPreview(item.compareValue)\"\n                    [class.border-bottom]=\"isInPreview(item.compareValue)\" [class.border-secondary-lt]=\"isInPreview(item.compareValue)\"\n                    [attr.aria-label]=\"item.ariaLabel\" [attr.aria-disabled]=\"!item.isEnabled || undefined\"\n                    [attr.aria-pressed]=\"isSelected(item.compareValue)\"\n                    [attr.aria-current]=\"todayValue === item.compareValue ? 'date' : undefined\"\n                    [attr.aria-describedby]=\"getDescribedby(item.compareValue)\" (click)=\"cellClicked(item, $event)\"\n                    (focus)=\"emitActiveDateChange(item)\" (mouseenter)=\"onDateEnter(getIndex(rowIndex, colIndex))\"\n                    (mouseleave)=\"onDateLeave()\">\n                    <span [class.upd-calendar-body-selected]=\"isSelected(item.compareValue)\"\n                        [class.upd-calendar-body-comparison-identical]=\"isComparisonIdentical(item.compareValue)\"\n                        [class.upd-calendar-body-today]=\"todayValue === item.compareValue\">\n                            {{ item.displayValue }}\n                    </span>\n                </div>\n            }\n        </div>\n    }\n\n    <label [id]=\"startDateLabelId\" class=\"upd-calendar-body-hidden-label\">\n        {{ startDateAccessibleName }}\n    </label>\n    <label [id]=\"endDateLabelId\" class=\"upd-calendar-body-hidden-label\">\n        {{ endDateAccessibleName }}\n    </label>\n</div>\n", styles: ["@media (min-width: 768px){.seven-cols .col-1{width:100%}.seven-cols .col-6{width:85.7142857143%}}@media (min-width: 992px){.seven-cols .col-1{width:14.2857142857%}.seven-cols .col-2{width:28.5714285714%}.seven-cols .col-3{width:42.8571428571%}.seven-cols .col-4{width:57.1428571429%}.seven-cols .col-5{width:71.4285714286%}.seven-cols .col-6{width:85.7142857143%}.seven-cols .col-7{width:100%}}@media (min-width: 1200px){.seven-cols .col-1{width:14.2857142857%}.seven-cols .col-2{width:28.5714285714%}.seven-cols .col-3{width:42.8571428571%}.seven-cols .col-4{width:57.1428571429%}.seven-cols .col-5{width:71.4285714286%}.seven-cols .col-6{width:85.7142857143%}.seven-cols .col-7{width:100%}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: CalendarBodyComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'upd-calendar-body', template: "<div class=\"container\">\n    <!--\n      If there's not enough space in the first row, create a separate label row. We mark this row as\n      aria-hidden because we don't want it to be read out as one of the weeks in the month.\n    -->\n    @if (firstRowOffset < labelMinRequiredCells) {\n        <div class=\"row seven-cols\" aria-hidden=\"true\">\n            <div class=\"col-7 p-1 d-flex align-items-center\" [style.min-height.px]=\"40\">\n                {{ label }}\n            </div>\n        </div>\n    }\n\n    <!-- Create the first row separately so we can include a special spacer cell. -->\n    @for (row of rows; track trackRow(row); let rowIndex = $index) {\n        <div class=\"row seven-cols\">\n            <!--\n              This cell is purely decorative, but we can't put `aria-hidden` or `role=\"presentation\"` on it,\n              because it throws off the week days for the rest of the row on NVDA. The aspect ratio of the\n              table cells is maintained by setting the top and bottom padding as a percentage of the width\n              (a variant of the trick described here: https://www.w3schools.com/howto/howto_css_aspect_ratio.asp).\n            -->\n            @if (rowIndex === 0 && firstRowOffset) {\n                <div [ngClass]=\"colspanClass\" class=\"p-1 d-flex align-items-center\" [style.min-height.px]=\"40\">\n                    {{ firstRowOffset >= labelMinRequiredCells ? label : '' }}\n                </div>\n            }\n\n            <!--\n              Each gridcell in the calendar contains a button, which signals to assistive technology that the\n              cell is interactable, as well as the selection state via `aria-pressed`. See #23476 for\n              background.\n            -->\n            @for (item of row; track item.id; let colIndex = $index) {\n                <div class=\"col-1 justify-content-center p-1 d-flex align-items-center cursor-pointer\" [attr.data-upd-row]=\"rowIndex\"\n                    [attr.data-upd-col]=\"colIndex\" [style.min-height.px]=\"40\"\n                    [class.bg-secondary-lt]=\"hoveredDate === getIndex(rowIndex, colIndex)\" [class.border]=\"isActiveCell(rowIndex, colIndex)\"\n                    [class.border-secondary]=\"isActiveCell(rowIndex, colIndex)\" [class.bg-azure]=\"isSelected(item.compareValue)\"\n                    [class.text-azure-fg]=\"isSelected(item.compareValue)\" [tabindex]=\"isActiveCell(rowIndex, colIndex) ? 0 : -1\"\n                    [class.upd-calendar-body-disabled]=\"!item.isEnabled\" [class.bg-danger]=\"isRangeStart(item.compareValue)\"\n                    [class.text-danger-fg]=\"isRangeStart(item.compareValue)\" [class.bg-muted]=\"isRangeEnd(item.compareValue)\"\n                    [class.text-muted-fg]=\"isRangeEnd(item.compareValue)\"\n                    [class.upd-calendar-body-range-end]=\"isRangeEnd(item.compareValue)\"\n                    [class.upd-calendar-body-in-range]=\"isInRange(item.compareValue)\"\n                    [class.upd-calendar-body-comparison-bridge-start]=\"isComparisonBridgeStart(item.compareValue, rowIndex, colIndex)\"\n                    [class.upd-calendar-body-comparison-bridge-end]=\"isComparisonBridgeEnd(item.compareValue, rowIndex, colIndex)\"\n                    [class.upd-calendar-body-comparison-start]=\"isComparisonStart(item.compareValue)\"\n                    [class.upd-calendar-body-comparison-end]=\"isComparisonEnd(item.compareValue)\"\n                    [class.upd-calendar-body-in-comparison-range]=\"isInComparisonRange(item.compareValue)\"\n                    [class.rounded-start]=\"isPreviewStart(item.compareValue)\" [class.rounded-end]=\"isPreviewEnd(item.compareValue)\"\n                    [class.border-top]=\"isInPreview(item.compareValue)\" [class.fw-bold]=\"isInPreview(item.compareValue)\"\n                    [class.border-bottom]=\"isInPreview(item.compareValue)\" [class.border-secondary-lt]=\"isInPreview(item.compareValue)\"\n                    [attr.aria-label]=\"item.ariaLabel\" [attr.aria-disabled]=\"!item.isEnabled || undefined\"\n                    [attr.aria-pressed]=\"isSelected(item.compareValue)\"\n                    [attr.aria-current]=\"todayValue === item.compareValue ? 'date' : undefined\"\n                    [attr.aria-describedby]=\"getDescribedby(item.compareValue)\" (click)=\"cellClicked(item, $event)\"\n                    (focus)=\"emitActiveDateChange(item)\" (mouseenter)=\"onDateEnter(getIndex(rowIndex, colIndex))\"\n                    (mouseleave)=\"onDateLeave()\">\n                    <span [class.upd-calendar-body-selected]=\"isSelected(item.compareValue)\"\n                        [class.upd-calendar-body-comparison-identical]=\"isComparisonIdentical(item.compareValue)\"\n                        [class.upd-calendar-body-today]=\"todayValue === item.compareValue\">\n                            {{ item.displayValue }}\n                    </span>\n                </div>\n            }\n        </div>\n    }\n\n    <label [id]=\"startDateLabelId\" class=\"upd-calendar-body-hidden-label\">\n        {{ startDateAccessibleName }}\n    </label>\n    <label [id]=\"endDateLabelId\" class=\"upd-calendar-body-hidden-label\">\n        {{ endDateAccessibleName }}\n    </label>\n</div>\n", styles: ["@media (min-width: 768px){.seven-cols .col-1{width:100%}.seven-cols .col-6{width:85.7142857143%}}@media (min-width: 992px){.seven-cols .col-1{width:14.2857142857%}.seven-cols .col-2{width:28.5714285714%}.seven-cols .col-3{width:42.8571428571%}.seven-cols .col-4{width:57.1428571429%}.seven-cols .col-5{width:71.4285714286%}.seven-cols .col-6{width:85.7142857143%}.seven-cols .col-7{width:100%}}@media (min-width: 1200px){.seven-cols .col-1{width:14.2857142857%}.seven-cols .col-2{width:28.5714285714%}.seven-cols .col-3{width:42.8571428571%}.seven-cols .col-4{width:57.1428571429%}.seven-cols .col-5{width:71.4285714286%}.seven-cols .col-6{width:85.7142857143%}.seven-cols .col-7{width:100%}}\n"] }]
+        }], ctorParameters: () => [], 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
+            }], dragStarted: [{
+                type: Output
+            }], dragEnded: [{
+                type: Output
+            }] } });
+
+let uniqueIdCounter$1 = 0;
+/**
+ * An internal class that represents the data corresponding to a single calendar cell.
+ * @docs-private
+ */
+class CalendarCellModel {
+    constructor(value, displayValue, ariaLabel, isEnabled, cssClasses = {}, compareValue = value, rawValue) {
+        this.value = value;
+        this.displayValue = displayValue;
+        this.ariaLabel = ariaLabel;
+        this.isEnabled = isEnabled;
+        this.cssClasses = cssClasses;
+        this.compareValue = compareValue;
+        this.rawValue = rawValue;
+        this.id = uniqueIdCounter$1++;
+    }
+}
+
+class KeyboardTools {
+    /**
+     * Checks whether a modifier key is pressed.
+     * @param event Event to be checked.
+     * @param modifiers
+     */
+    static hasModifierKey(event, ...modifiers) {
+        if (modifiers.length) {
+            return modifiers.some(modifier => event[modifier]);
+        }
+        return event.altKey || event.shiftKey || event.ctrlKey || event.metaKey;
+    }
+}
+
+const yearsPerPage = 24;
+class CalendarMultiYearViewComponent {
+    /** Initializes this month view. */
+    init() {
+    }
+    /** Focuses the active cell after the microtask queue is empty. */
+    focusActiveCell(movePreview) {
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: CalendarMultiYearViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.0", type: CalendarMultiYearViewComponent, selector: "upd-calendar-multi-year-view", ngImport: i0, template: "<p>calendar-multi-year-view works!</p>\n", styles: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: CalendarMultiYearViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'upd-calendar-multi-year-view', template: "<p>calendar-multi-year-view works!</p>\n" }]
+        }] });
+
+class CalendarService {
+    /**
+     * When the multi-year view is first opened, the active year will be in view.
+     * So we compute how many years are between the active year and the *slot* where our
+     * "startingYear" will render when paged into view.
+     */
+    getMultiYearActiveOffset(activeDate, minDate, maxDate) {
+        const activeYear = activeDate.getFullYear();
+        return this.euclideanModulo(activeYear - this.getStartingYear(minDate, maxDate), yearsPerPage);
+    }
+    isSameMultiYearView(date1, date2, minDate, maxDate) {
+        const year1 = date1.getFullYear();
+        const year2 = date2.getFullYear();
+        const startingYear = this.getStartingYear(minDate, maxDate);
+        return Math.floor((year1 - startingYear) / yearsPerPage) === Math.floor((year2 - startingYear) / yearsPerPage);
+    }
+    getStartingYear(minDate, maxDate) {
+        let startingYear = 0;
+        if (maxDate) {
+            const maxYear = maxDate.getFullYear();
+            startingYear = maxYear - yearsPerPage + 1;
+        }
+        else if (minDate) {
+            startingYear = minDate.getFullYear();
+        }
+        return startingYear;
+    }
+    euclideanModulo(a, b) {
+        return ((a % b) + b) % b;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: CalendarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: CalendarService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: CalendarService, decorators: [{
+            type: Injectable
+        }] });
+
+let calendarHeaderId = 1;
+class CalendarHeaderComponent {
+    constructor() {
+        this.id = `upd-calendar-header-${calendarHeaderId++}`;
+        this.calendarService = inject(CalendarService);
+        this.calendarSignalsService = inject(CalendarSignalsService);
+        this.dateService = inject(DateService);
+    }
+    /**
+     * The `aria-label` for changing the calendar view.
+     */
+    get periodButtonLabel() {
+        return this.calendarSignalsService.currentView() === 'month' ? 'SwitchToMultiYearView' : 'SwitchToMonthView';
+    }
+    /**
+     * The label for the previous button.
+     */
+    get prevButtonLabel() {
+        return {
+            'month': 'PreviousMonth',
+            'year': 'PreviousYear',
+            'multi-year': 'PreviousMultiYear'
+        }[this.calendarSignalsService.currentView()];
+    }
+    /**
+     * The label for the next button.
+     */
+    get nextButtonLabel() {
+        return {
+            'month': 'NextMonth',
+            'year': 'NextYear',
+            'multi-year': 'NextMultiYear'
+        }[this.calendarSignalsService.currentView()];
+    }
+    /**
+     * Whether the selected view is not a month.
+     */
+    get isNotMonth() {
+        return this.calendarSignalsService.currentView() !== 'month';
+    }
+    /**
+     * ID of the label of the period button.
+     */
+    get periodButtonLabelId() {
+        return `${this.id}-period-label`;
+    }
+    get minYearOfPageLabel() {
+        return this.dateService.getYearName(this.dateService.create(this.minYearOfPage, 0, 1));
+    }
+    get maxYearOfPageLabel() {
+        const maxYearOfPage = this.minYearOfPage + yearsPerPage - 1;
+        return this.dateService.getYearName(this.dateService.create(maxYearOfPage, 0, 1));
+    }
+    get periodText() {
+        if (this.calendarSignalsService.currentView() === 'month') {
+            return this.dateService
+                .format(this.calendarSignalsService.activeDate(), { year: 'numeric', month: 'short' })
+                .toLocaleUpperCase();
+        }
+        if (this.calendarSignalsService.currentView() === 'year') {
+            return this.dateService.getYearName(this.calendarSignalsService.activeDate());
+        }
+        return '';
+    }
+    get minYearOfPage() {
+        // 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 activeDate = this.calendarSignalsService.activeDate();
+        const activeYear = activeDate.getFullYear();
+        const offset = this.calendarService.getMultiYearActiveOffset(activeDate, this.calendarSignalsService.minDate(), this.calendarSignalsService.maxDate());
+        return activeYear - offset;
+    }
+    /**
+     * Handles user clicks on the period label.
+     */
+    currentPeriodClicked() {
+        this.calendarSignalsService.currentView = this.calendarSignalsService.currentView() === 'month' ? 'multi-year' : 'month';
+    }
+    /**
+     * Handles user clicks on the previous button.
+     */
+    previousClicked() {
+        this.calendarSignalsService.activeDate =
+            this.calendarSignalsService.currentView() === 'month'
+                ? this.dateService.addMonths(this.calendarSignalsService.activeDate(), -1)
+                : this.dateService.addYears(this.calendarSignalsService.activeDate(), this.calendarSignalsService.currentView() === 'year' ? -1 : -yearsPerPage);
+    }
+    /**
+     * Handles user clicks on the next button.
+     */
+    nextClicked() {
+        this.calendarSignalsService.activeDate =
+            this.calendarSignalsService.currentView() === 'month'
+                ? this.dateService.addMonths(this.calendarSignalsService.activeDate(), 1)
+                : this.dateService.addYears(this.calendarSignalsService.activeDate(), this.calendarSignalsService.currentView() === 'year' ? 1 : yearsPerPage);
+    }
+    /**
+     * Whether the previous period button is enabled.
+     */
+    previousEnabled() {
+        if (!this.calendarSignalsService.minDate()) {
+            return true;
+        }
+        return !this.calendarSignalsService.minDate()
+            || !this.isSameView(this.calendarSignalsService.activeDate(), this.calendarSignalsService.minDate());
+    }
+    /**
+     * Whether the next period button is enabled.
+     */
+    nextEnabled() {
+        return !this.calendarSignalsService.maxDate()
+            || !this.isSameView(this.calendarSignalsService.activeDate(), this.calendarSignalsService.maxDate());
+    }
+    /**
+     * Whether the two dates represent the same view in the current view mode (month or year).
+     */
+    isSameView(date1, date2) {
+        if (this.calendarSignalsService.currentView() === 'month') {
+            return date1.getFullYear() === date2.getFullYear() && date1.getMonth() === date2.getMonth();
+        }
+        if (this.calendarSignalsService.currentView() === 'year') {
+            return date1.getFullYear() === date2.getFullYear();
+        }
+        // Otherwise we are in 'multi-year' view.
+        return this.calendarService.isSameMultiYearView(date1, date2, this.calendarSignalsService.minDate(), this.calendarSignalsService.maxDate());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: CalendarHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.0", type: CalendarHeaderComponent, selector: "upd-calendar-header", ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'UpDevs.Calendar'\">\n    <div class=\"container\">\n        <div class=\"row\">\n            <div class=\"col d-flex\">\n                <label [id]=\"periodButtonLabelId\" class=\"visually-hidden\" aria-live=\"polite\">\n                    {{ periodText || t('YearRangeLabel', { start: minYearOfPageLabel, end: maxYearOfPageLabel }) }}\n                </label>\n\n                <upd-button [isIcon]=\"true\" [iconModel]=\"{tablerIcon:'chevron-left'}\" [isDisabled]=\"!previousEnabled()\"\n                    (clicked)=\"previousClicked()\" [attr.aria-label]=\"t(prevButtonLabel)\">\n                </upd-button>\n\n                <upd-button (click)=\"currentPeriodClicked()\" [attr.aria-label]=\"t(periodButtonLabel)\"\n                    [attr.aria-describedby]=\"periodButtonLabelId\" customClasses=\"mx-1 flex-grow-1\">\n                    <span aria-hidden=\"true\">\n                        {{ periodText || t('YearRange', { start: minYearOfPageLabel, end: maxYearOfPageLabel }) }}\n                    </span>\n                    <upd-icon [tablerIcon]=\"!isNotMonth ? 'chevron-down' : 'chevron-up'\"></upd-icon>\n                </upd-button>\n\n                <upd-button [isIcon]=\"true\" [iconModel]=\"{tablerIcon:'chevron-right'}\" [isDisabled]=\"!nextEnabled()\"\n                    (clicked)=\"nextClicked()\" [attr.aria-label]=\"t(nextButtonLabel)\">\n                </upd-button>\n            </div>\n        </div>\n    </div>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "component", type: i1$1.ButtonComponent, selector: "upd-button", inputs: ["model", "text", "brandColorStyle", "customClasses", "isOutline", "isGhost", "isSquare", "isPill", "isIcon", "isLoading", "isList", "isFloating", "isAction", "isNavigationLink", "isLink", "shouldIgnoreBtnClass", "iconModel", "iconPosition", "isDisabled", "isActive", "badgeConfig", "colorStyle", "size", "title"], outputs: ["clicked"] }, { kind: "directive", type: i1$2.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: i3.IconComponent, selector: "upd-icon", inputs: ["model", "wrapperClasses", "color", "colorClass", "removeDefaultClasses", "customClasses", "tablerIcon", "tablerIconWeight", "tablerIconType", "tablerIconSize", "heroIcon", "heroIconSize", "heroIconType"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: CalendarHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'upd-calendar-header', template: "<ng-container *transloco=\"let t; prefix: 'UpDevs.Calendar'\">\n    <div class=\"container\">\n        <div class=\"row\">\n            <div class=\"col d-flex\">\n                <label [id]=\"periodButtonLabelId\" class=\"visually-hidden\" aria-live=\"polite\">\n                    {{ periodText || t('YearRangeLabel', { start: minYearOfPageLabel, end: maxYearOfPageLabel }) }}\n                </label>\n\n                <upd-button [isIcon]=\"true\" [iconModel]=\"{tablerIcon:'chevron-left'}\" [isDisabled]=\"!previousEnabled()\"\n                    (clicked)=\"previousClicked()\" [attr.aria-label]=\"t(prevButtonLabel)\">\n                </upd-button>\n\n                <upd-button (click)=\"currentPeriodClicked()\" [attr.aria-label]=\"t(periodButtonLabel)\"\n                    [attr.aria-describedby]=\"periodButtonLabelId\" customClasses=\"mx-1 flex-grow-1\">\n                    <span aria-hidden=\"true\">\n                        {{ periodText || t('YearRange', { start: minYearOfPageLabel, end: maxYearOfPageLabel }) }}\n                    </span>\n                    <upd-icon [tablerIcon]=\"!isNotMonth ? 'chevron-down' : 'chevron-up'\"></upd-icon>\n                </upd-button>\n\n                <upd-button [isIcon]=\"true\" [iconModel]=\"{tablerIcon:'chevron-right'}\" [isDisabled]=\"!nextEnabled()\"\n                    (clicked)=\"nextClicked()\" [attr.aria-label]=\"t(nextButtonLabel)\">\n                </upd-button>\n            </div>\n        </div>\n    </div>\n</ng-container>\n" }]
+        }] });
+
+const daysPerWeek = 7;
+let uniqueIdCounter = 0;
+class CalendarMonthViewComponent extends BaseComponent {
+    /**
+     * The date to display in this month view (everything other than the month and year is ignored).
+     */
+    get activeDate() {
+        return this.calendarSignalsService.activeDate();
+    }
+    set activeDate(value) {
+        this.updateActiveDate(value);
+    }
+    /** The currently selected date. */
+    get selected() {
+        return this.calendarSignalsService.selectedDate();
+    }
+    set selected(value) {
+        let currValue;
+        if (value instanceof DateRangeModel) {
+            currValue = value;
+        }
+        else {
+            currValue = this.dateService.getValidOrUndefined(this.dateService.deserialize(value));
+        }
+        this.calendarSignalsService.selectedDate = currValue;
+        this.setRanges(currValue);
+    }
+    /** The minimum selectable date. */
+    get minDate() {
+        return this._minDate;
+    }
+    set minDate(value) {
+        this._minDate = this.dateService.getValidOrUndefined(this.dateService.deserialize(value));
+    }
+    /** The maximum selectable date. */
+    get maxDate() {
+        return this._maxDate;
+    }
+    set maxDate(value) {
+        this._maxDate = this.dateService.getValidOrUndefined(this.dateService.deserialize(value));
+    }
+    constructor() {
+        super();
+        /**
+         * First day of week.
+         * Zero-based starting from Sunday.
+         * Default: 0 - Sunday.
+         */
+        this.firstDayOfWeek = 0;
+        /** Whether the user is currently selecting a range of dates. */
+        this.isRange = false;
+        /** Emits when a new date is selected. */
+        this.selectedChange = new EventEmitter();
+        /** Emits when any date is selected. */
+        this.userSelection = new EventEmitter();
+        /** Emits when the user initiates a date range drag via mouse or touch. */
+        this.dragStarted = new EventEmitter();
+        /**
+         * Emits when the user completes or cancels a date range drag.
+         * Emits null when the drag was canceled or the newly selected date range if completed.
+         */
+        this.dragEnded = new EventEmitter();
+        /** Emits when any date is activated. */
+        this.activeDateChange = new EventEmitter();
+        /** Grid of calendar cells representing the dates of the month. */
+        this.weeks = [];
+        /** The number of blank cells in the first row before the 1st of the month. */
+        this.firstWeekOffset = 0;
+        /** The names of the weekdays. */
+        this.weekdays = [];
+        /** Flag used to filter out space/enter keyup events that originated outside of the view. */
+        this._selectionKeyPressed = false;
+        this.translocoService = inject(TranslocoService);
+        this.changeDetectorRef = inject(ChangeDetectorRef);
+        this.dateService = inject(DateService);
+        this.calendarSignalsService = inject(CalendarSignalsService);
+        this.calendarRangeStrategy = inject(CalendarRangeStrategyService);
+        effect(() => this.updateActiveDate(this.calendarSignalsService.activeDate(), true));
+    }
+    ngAfterContentInit() {
+        const langSub = this.translocoService.langChanges$
+            .pipe(startWith(undefined))
+            .subscribe(() => this.init());
+        this.addSubscriptions(langSub);
+    }
+    ngOnChanges(changes) {
+        const comparisonChange = changes['comparisonStart'] || changes['comparisonEnd'];
+        if (comparisonChange && !comparisonChange.firstChange) {
+            this.setRanges(this.selected);
+        }
+        if (changes['activeDrag'] && !this.activeDrag) {
+            this.clearPreview();
+        }
+    }
+    /** Handles when a new date is selected. */
+    dateSelected(event) {
+        const date = event.value;
+        const selectedDate = this.getDateFromDayOfMonth(date);
+        const currSelection = this.calendarSignalsService.selectedDate();
+        let rangeStartDate;
+        let rangeEndDate;
+        if (currSelection instanceof DateRangeModel) {
+            rangeStartDate = this.getDateInCurrentMonth(currSelection.start);
+            rangeEndDate = this.getDateInCurrentMonth(currSelection.end);
+        }
+        else {
+            rangeStartDate = rangeEndDate = this.getDateInCurrentMonth(currSelection);
+        }
+        if (rangeStartDate !== date || rangeEndDate !== date) {
+            this.calendarSignalsService.selectedDate = selectedDate;
+        }
+        this.userSelection.emit({ value: selectedDate, event: event.event });
+        this.clearPreview();
+        this.changeDetectorRef.markForCheck();
+    }
+    /** Handles keydown events on the calendar body when calendar is in month view. */
+    handleCalendarBodyKeydown(event) {
+        // TODO(mmalerba): We currently allow keyboard navigation to disabled dates, but just prevent
+        // disabled ones from being selected. This may not be ideal, we should look into whether
+        // navigation should skip over disabled dates, and if so, how to implement that efficiently.
+        const oldActiveDate = this.activeDate;
+        let tempActiveDate;
+        switch (event.key) {
+            case 'LEFT_ARROW':
+                tempActiveDate = this.dateService.addDays(this.activeDate, -1);
+                break;
+            case 'RIGHT_ARROW':
+                tempActiveDate = this.dateService.addDays(this.activeDate, 1);
+                break;
+            case 'UP_ARROW':
+                tempActiveDate = this.dateService.addDays(this.activeDate, -7);
+                break;
+            case 'DOWN_ARROW':
+                tempActiveDate = this.dateService.addDays(this.activeDate, 7);
+                break;
+            case 'HOME':
+                tempActiveDate = this.dateService.addDays(this.activeDate, 1 - this.activeDate.getDate());
+                break;
+            case 'END':
+                tempActiveDate = this.dateService.addDays(this.activeDate, this.dateService.getNumDaysInMonth(this.activeDate) -
+                    this.activeDate.getDate());
+                break;
+            case 'PAGE_UP':
+                tempActiveDate = event.altKey
+                    ? this.dateService.addYears(this.activeDate, -1)
+                    : this.dateService.addMonths(this.activeDate, -1);
+                break;
+            case 'PAGE_DOWN':
+                tempActiveDate = event.altKey
+                    ? this.dateService.addYears(this.activeDate, 1)
+                    : this.dateService.addMonths(this.activeDate, 1);
+                break;
+            case 'ENTER':
+            case 'SPACE':
+                this._selectionKeyPressed = true;
+                if (this.canSelect(this.activeDate)) {
+                    // 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 !== undefined && !KeyboardTools.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: undefined, event });
+                    }
+                    else {
+                        this.selectedChange.emit(undefined);
+                        this.userSelection.emit({ value: undefined, event });
+                    }
+                    event.preventDefault();
+                    event.stopPropagation(); // Prevents the overlay from closing.
+                }
+                return;
+            default:
+                // Don't prevent default or focus active cell on keys that we don't explicitly handle.
+                return;
+        }
+        if (this.dateService.compare(oldActiveDate, this.activeDate)) {
+            this.calendarSignalsService.activeDate = tempActiveDate;
+            this.focusActiveCellAfterViewChecked();
+        }
+        // Prevent unexpected default actions such as form submission.
+        event.preventDefault();
+    }
+    /** Handles keyup events on the calendar body when calendar is in month view. */
+    handleCalendarBodyKeyup(event) {
+        if (event.key === 'SPACE' || event.key === 'ENTER') {
+            if (this._selectionKeyPressed && this.canSelect(this.activeDate)) {
+                this.dateSelected({ value: this.activeDate.getDate(), event });
+            }
+            this._selectionKeyPressed = false;
+        }
+    }
+    /** Initializes this month view. */
+    init() {
+        this.setRanges(this.selected);
+        this.todayDate = this.getCellCompareValue(new Date());
+        this.monthLabel = this.dateService.getMonthNames('short')[this.activeDate.getMonth()].toLocaleUpperCase();
+        const firstOfMonth = this.dateService.create(this.activeDate.getFullYear(), this.activeDate.getMonth(), 1);
+        this.firstWeekOffset = (daysPerWeek + firstOfMonth.getDay() - this.firstDayOfWeek) % daysPerWeek;
+        this.initWeekdays();
+        this.createWeekCells();
+        this.changeDetectorRef.markForCheck();
+    }
+    /** Focuses the active cell after the microtask queue is empty. */
+    focusActiveCell(movePreview) {
+        this._matCalendarBody.focusActiveCell(movePreview);
+    }
+    /** Focuses the active cell after change detection has run and the microtask queue is empty. */
+    focusActiveCellAfterViewChecked() {
+        this._matCalendarBody.scheduleFocusActiveCellAfterViewChecked();
+    }
+    /** Called when the user has activated a new cell and the preview needs to be updated. */
+    previewChanged({ value: cell }) {
+        if (!this.selected) {
+            return;
+        }
+        if (this.isRange && !(this.selected instanceof DateRangeModel)) {
+            this.selected = new DateRangeModel(this.selected);
+        }
+        // We can assume that this will be a range, because preview
+        // events aren't fired for single date selections.
+        const value = cell ? cell.rawValue : undefined;
+        const previewRange = this.calendarRangeStrategy.createPreview(value, this.selected);
+        this.previewStart = this.getCellCompareValue(previewRange.start);
+        this.previewEnd = this.getCellCompareValue(previewRange.end);
+        if (!!this.activeDrag && !!value) {
+            const dragRange = this.calendarRangeStrategy.createDrag?.(this.activeDrag.value, this.selected, value);
+            if (!!dragRange) {
+                this.previewStart = this.getCellCompareValue(dragRange.start);
+                this.previewEnd = this.getCellCompareValue(dragRange.end);
+            }
+        }
+        // Note that here we need to use `detectChanges`, rather than `markForCheck`, because
+        // the way `_focusActiveCell` is set up at the moment makes it fire at the wrong time
+        // when navigating one month back using the keyboard which will cause this handler
+        // to throw a "changed after checked" error when updating the preview state.
+        this.changeDetectorRef.detectChanges();
+    }
+    /**
+     * Called when the user has ended a drag. If the drag/drop was successful,
+     * computes and emits the new range selection.
+     */
+    _dragEnded(event) {
+        if (!this.activeDrag) {
+            return;
+        }
+        if (event.value) {
+            // Propagate drag effect
+            const dragDropResult = this.calendarRangeStrategy?.createDrag?.(this.activeDrag.value, this.selected, event.value);
+            this.dragEnded.emit({ value: dragDropResult ?? undefined, event: event.event });
+        }
+        else {
+            this.dragEnded.emit({ value: undefined, event: event.event });
+        }
+    }
+    updateActiveDate(value, isFromEffect = false) {
+        this.oldActiveDate = this.oldActiveDate || value;
+        const validDate = this.dateService.getValidOrUndefined(this.dateService.deserialize(value)) || new Date();
+        if (!isFromEffect) {
+            this.calendarSignalsService.activeDate = this.dateService.clamp(validDate, this.minDate, this.maxDate);
+        }
+        if (!this.isSameMonthAndYearAsActiveDate(this.oldActiveDate, this.calendarSignalsService.activeDate())) {
+            this.init();
+        }
+        this.oldActiveDate = value;
+        this.activeDateChange.emit(this.calendarSignalsService.activeDate());
+    }
+    /**
+     * Takes a day of the month and returns a new date in the same month and year as the currently
+     *  active date. The returned date will have the same day of the month as the argument date.
+     */
+    getDateFromDayOfMonth(dayOfMonth) {
+        return this.dateService.create(this.activeDate.getFullYear(), this.activeDate.getMonth(), dayOfMonth);
+    }
+    /** Initializes the weekdays. */
+    initWeekdays() {
+        const firstDayOfWeek = this.firstDayOfWeek;
+        const narrowWeekdays = this.dateService.getDayOfWeekNames('narrow');
+        const longWeekdays = this.dateService.getDayOfWeekNames('long');
+        // Rotate the labels for days of the week based on the configured first day of the week.
+        const weekdays = longWeekdays.map((long, i) => ({ long, narrow: narrowWeekdays[i], id: uniqueIdCounter++ }));
+        this.weekdays = weekdays.slice(firstDayOfWeek).concat(weekdays.slice(0, firstDayOfWeek));
+    }
+    /** Creates MatCalendarCells for the dates in this month. */
+    createWeekCells() {
+        const daysInMonth = this.dateService.getNumDaysInMonth(this.activeDate);
+        const dateNames = this.dateService.getDateNames();
+        this.weeks = [[]];
+        for (let i = 0, cell = this.firstWeekOffset; i < daysInMonth; i++, cell++) {
+            if (cell === daysPerWeek) {
+                this.weeks.push([]);
+                cell = 0;
+            }
+            const date = this.dateService.create(this.activeDate.getFullYear(), this.activeDate.getMonth(), i + 1);
+            const isEnabled = this.shouldEnableDate(date);
+            const ariaLabel = this.dateService.format(date, { year: 'numeric', month: 'long', day: 'numeric' });
+            const cellClasses = this.dateClass ? this.dateClass(date, 'month') : undefined;
+            this.weeks[this.weeks.length - 1].push(new CalendarCellModel(i + 1, dateNames[i], ariaLabel, isEnabled, cellClasses, this.getCellCompareValue(date), date));
+        }
+    }
+    /** Date filter for the month */
+    shouldEnableDate(date) {
+        return !!date &&
+            (!this.minDate || this.dateService.compare(date, this.minDate) >= 0) &&
+            (!this.maxDate || this.dateService.compare(date, this.maxDate) <= 0) &&
+            (!this.dateFilter || this.dateFilter(date));
+    }
+    /**
+     * 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.isSameMonthAndYearAsActiveDate(date, this.calendarSignalsService.activeDate())
+            ? date.getDate()
+            : undefined;
+    }
+    /** Checks whether the 2 dates are non-null and fall within the same month of the same year. */
+    isSameMonthAndYearAsActiveDate(d1, d2) {
+        return (!!d1 && !!d2 && d1.getMonth() === d2.getMonth() && d1.getFullYear() === d2.getFullYear());
+    }
+    /** Gets the value that will be used to one cell to another. */
+    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 = date.getFullYear();
+            const month = date.getMonth();
+            const day = date.getDate();
+            return new Date(year, month, day).getTime();
+        }
+        return undefined;
+    }
+    /** Sets the current range based on a model value. */
+    setRanges(selectedValue) {
+        if (selectedValue instanceof DateRangeModel) {
+            this.rangeStart = this.getCellCompareValue(selectedValue.start);
+            this.rangeEnd = this.getCellCompareValue(selectedValue.end);
+            this.isRange = true;
+        }
+        else {
+            this.rangeStart = this.rangeEnd = this.getCellCompareValue(selectedValue);
+        }
+        this.comparisonRangeStart = this.getCellCompareValue(this.comparisonStart);
+        this.comparisonRangeEnd = this.getCellCompareValue(this.comparisonEnd);
+    }
+    /** Gets whether a date can be selected in the month view. */
+    canSelect(date) {
+        return !this.dateFilter || this.dateFilter(date);
+    }
+    /** Clears out preview state. */
+    clearPreview() {
+        this.previewStart = this.previewEnd = undefined;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: CalendarMonthViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: CalendarMonthViewComponent, selector: "upd-calendar-month-view", inputs: { activeDate: "activeDate", selected: "selected", minDate: "minDate", maxDate: "maxDate", dateFilter: "dateFilter", dateClass: "dateClass", comparisonStart: "comparisonStart", comparisonEnd: "comparisonEnd", startDateAccessibleName: "startDateAccessibleName", endDateAccessibleName: "endDateAccessibleName", firstDayOfWeek: "firstDayOfWeek", activeDrag: "activeDrag", isRange: "isRange" }, outputs: { selectedChange: "selectedChange", userSelection: "userSelection", dragStarted: "dragStarted", dragEnded: "dragEnded", activeDateChange: "activeDateChange" }, viewQueries: [{ propertyName: "_matCalendarBody", first: true, predicate: CalendarBodyComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<upd-calendar-header></upd-calendar-header>\n<div class=\"container mt-2\">\n    <div class=\"row seven-cols\">\n        @for (day of weekdays; track day.id) {\n            <div class=\"col-1 p-1 d-flex justify-content-center align-items-center\">\n                <span class=\"visually-hidden\">{{ day.long }}</span>\n                <span aria-hidden=\"true\">{{ day.narrow }}</span>\n            </div>\n        }\n    </div>\n</div>\n<upd-calendar-body [label]=\"monthLabel\" [rows]=\"weeks\" [todayValue]=\"todayDate!\" [startValue]=\"rangeStart!\"\n    [endValue]=\"rangeEnd!\" [comparisonStart]=\"comparisonRangeStart\" [comparisonEnd]=\"comparisonRangeEnd\"\n    [previewStart]=\"previewStart\" [previewEnd]=\"previewEnd\" [isRange]=\"isRange\" [labelMinRequiredCells]=\"3\"\n    [activeCell]=\"activeDate.getDate() - 1\" [startDateAccessibleName]=\"startDateAccessibleName\"\n    [endDateAccessibleName]=\"endDateAccessibleName\" (selectedValueChange)=\"dateSelected($event)\"\n    (previewChange)=\"previewChanged($event)\" (dragStarted)=\"dragStarted.emit($event)\" (dragEnded)=\"_dragEnded($event)\"\n    (keyup)=\"handleCalendarBodyKeyup($event)\" (keydown)=\"handleCalendarBodyKeydown($event)\">\n</upd-calendar-body>\n", styles: ["@media (min-width: 768px){.seven-cols .col-1{width:100%}.seven-cols .col-6{width:85.7142857143%}}@media (min-width: 992px){.seven-cols .col-1{width:14.2857142857%}.seven-cols .col-2{width:28.5714285714%}.seven-cols .col-3{width:42.8571428571%}.seven-cols .col-4{width:57.1428571429%}.seven-cols .col-5{width:71.4285714286%}.seven-cols .col-6{width:85.7142857143%}.seven-cols .col-7{width:100%}}@media (min-width: 1200px){.seven-cols .col-1{width:14.2857142857%}.seven-cols .col-2{width:28.5714285714%}.seven-cols .col-3{width:42.8571428571%}.seven-cols .col-4{width:57.1428571429%}.seven-cols .col-5{width:71.4285714286%}.seven-cols .col-6{width:85.7142857143%}.seven-cols .col-7{width:100%}}\n"], dependencies: [{ kind: "component", type: CalendarHeaderComponent, selector: "upd-calendar-header" }, { kind: "component", type: CalendarBodyComponent, selector: "upd-calendar-body", inputs: ["label", "rows", "todayValue", "startValue", "endValue", "labelMinRequiredCells", "numCols", "activeCell", "isRange", "cellAspectRatio", "comparisonStart", "comparisonEnd", "previewStart", "previewEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedValueChange", "previewChange", "dragStarted", "dragEnded"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: CalendarMonthViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'upd-calendar-month-view', template: "<upd-calendar-header></upd-calendar-header>\n<div class=\"container mt-2\">\n    <div class=\"row seven-cols\">\n        @for (day of weekdays; track day.id) {\n            <div class=\"col-1 p-1 d-flex justify-content-center align-items-center\">\n                <span class=\"visually-hidden\">{{ day.long }}</span>\n                <span aria-hidden=\"true\">{{ day.narrow }}</span>\n            </div>\n        }\n    </div>\n</div>\n<upd-calendar-body [label]=\"monthLabel\" [rows]=\"weeks\" [todayValue]=\"todayDate!\" [startValue]=\"rangeStart!\"\n    [endValue]=\"rangeEnd!\" [comparisonStart]=\"comparisonRangeStart\" [comparisonEnd]=\"comparisonRangeEnd\"\n    [previewStart]=\"previewStart\" [previewEnd]=\"previewEnd\" [isRange]=\"isRange\" [labelMinRequiredCells]=\"3\"\n    [activeCell]=\"activeDate.getDate() - 1\" [startDateAccessibleName]=\"startDateAccessibleName\"\n    [endDateAccessibleName]=\"endDateAccessibleName\" (selectedValueChange)=\"dateSelected($event)\"\n    (previewChange)=\"previewChanged($event)\" (dragStarted)=\"dragStarted.emit($event)\" (dragEnded)=\"_dragEnded($event)\"\n    (keyup)=\"handleCalendarBodyKeyup($event)\" (keydown)=\"handleCalendarBodyKeydown($event)\">\n</upd-calendar-body>\n", styles: ["@media (min-width: 768px){.seven-cols .col-1{width:100%}.seven-cols .col-6{width:85.7142857143%}}@media (min-width: 992px){.seven-cols .col-1{width:14.2857142857%}.seven-cols .col-2{width:28.5714285714%}.seven-cols .col-3{width:42.8571428571%}.seven-cols .col-4{width:57.1428571429%}.seven-cols .col-5{width:71.4285714286%}.seven-cols .col-6{width:85.7142857143%}.seven-cols .col-7{width:100%}}@media (min-width: 1200px){.seven-cols .col-1{width:14.2857142857%}.seven-cols .col-2{width:28.5714285714%}.seven-cols .col-3{width:42.8571428571%}.seven-cols .col-4{width:57.1428571429%}.seven-cols .col-5{width:71.4285714286%}.seven-cols .col-6{width:85.7142857143%}.seven-cols .col-7{width:100%}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { _matCalendarBody: [{
+                type: ViewChild,
+                args: [CalendarBodyComponent]
+            }], activeDate: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], minDate: [{
+                type: Input
+            }], maxDate: [{
+                type: Input
+            }], dateFilter: [{
+                type: Input
+            }], dateClass: [{
+                type: Input
+            }], comparisonStart: [{
+                type: Input
+            }], comparisonEnd: [{
+                type: Input
+            }], startDateAccessibleName: [{
+                type: Input
+            }], endDateAccessibleName: [{
+                type: Input
+            }], firstDayOfWeek: [{
+                type: Input
+            }], activeDrag: [{
+                type: Input
+            }], isRange: [{
+                type: Input
+            }], selectedChange: [{
+                type: Output
+            }], userSelection: [{
+                type: Output
+            }], dragStarted: [{
+                type: Output
+            }], dragEnded: [{
+                type: Output
+            }], activeDateChange: [{
+                type: Output
+            }] } });
+
+class CalendarYearViewComponent {
+    /** Initializes this month view. */
+    init() {
+    }
+    /** Focuses the active cell after the microtask queue is empty. */
+    focusActiveCell(movePreview) {
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: CalendarYearViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.0", type: CalendarYearViewComponent, selector: "upd-calendar-year-view", ngImport: i0, template: "<p>calendar-year-view works!</p>\n", styles: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: CalendarYearViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'upd-calendar-year-view', template: "<p>calendar-year-view works!</p>\n" }]
+        }] });
+
+class CalendarComponent {
+    constructor() {
+        /**
+         * Whether the calendar should be started in month or year view.
+         */
+        this.startView = 'month';
+        /** Whether the user is currently selecting a range of dates. */
+        this.isRange = false;
+        /** Emits when the currently selected date changes. */
+        this.selectedChange = new EventEmitter();
+        /**
+         * Emits the year chosen in multiyear view.
+         * This doesn't imply a change on the selected date.
+         */
+        this.yearSelected = new EventEmitter();
+        /**
+         * Emits the month chosen in year view.
+         * This doesn't imply a change on the selected date.
+         */
+        this.monthSelected = new EventEmitter();
+        /**
+         * Emits when the current view changes.
+         */
+        this.viewChanged = new EventEmitter(true);
+        /** Emits when any date is selected. */
+        this.userSelection = new EventEmitter();
+        /** Emits a new date range value when the user completes a drag drop operation. */
+        this.userDragDrop = new EventEmitter();
+        /**
+         * Used for scheduling that focus should be moved to the active cell on the next tick.
+         * We need to schedule it, rather than do it immediately, because we have to wait
+         * for Angular to re-evaluate the view children.
+         */
+        this._moveFocusOnNextTick = false;
+        this.dateService = inject(DateService);
+        this._changeDetectorRef = inject(ChangeDetectorRef);
+    }
+    /** A date representing the period (month or year) to start the calendar in. */
+    get startAt() {
+        return this._startAt;
+    }
+    set startAt(value) {
+        this._startAt = this.dateService.getValidOrUndefined(this.dateService.deserialize(value));
+    }
+    /**
+     * The currently selected date.
+     */
+    get selected() {
+        return this._selected;
+    }
+    set selected(value) {
+        console.log('setting selected', value);
+        if (value instanceof DateRangeModel) {
+            this._selected = value;
+        }
+        else {
+            this._selected = this.dateService.getValidOrUndefined(this.dateService.deserialize(value));
+        }
+    }
+    /**
+     * The minimum selectable date.
+     */
+    get minDate() {
+        return this._minDate;
+    }
+    set minDate(value) {
+        this._minDate = this.dateService.getValidOrUndefined(this.dateService.deserialize(value));
+    }
+    /**
+     * The maximum selectable date.
+     */
+    get maxDate() {
+        return this._maxDate;
+    }
+    set maxDate(value) {
+        this._maxDate = this.dateService.getValidOrUndefined(this.dateService.deserialize(value));
+    }
+    /**
+     * The current active date. This determines which time period is shown and which date is
+     * highlighted when using keyboard navigation.
+     */
+    get activeDate() {
+        return this._clampedActiveDate;
+    }
+    set activeDate(value) {
+        this._clampedActiveDate = this.dateService.clamp(value, this.minDate, this.maxDate);
+        this._changeDetectorRef.markForCheck();
+    }
+    /** Whether the calendar is in month view. */
+    get currentView() {
+        return this._currentView;
+    }
+    set currentView(value) {
+        const viewChangedResult = this._currentView !== value ? value : undefined;
+        this._currentView = value;
+        this._moveFocusOnNextTick = true;
+        this._changeDetectorRef.markForCheck();
+        if (viewChangedResult) {
+            this.viewChanged.emit(viewChangedResult);
+        }
+    }
+    ngAfterContentInit() {
+        this.activeDate = this.startAt || new Date();
+        // Assign to the private property since we don't want to move focus on init.
+        this._currentView = this.startView;
+    }
+    ngAfterViewChecked() {
+        if (this._moveFocusOnNextTick) {
+            this._moveFocusOnNextTick = false;
+            this.focusActiveCell();
+        }
+    }
+    ngOnChanges(changes) {
+        // Ignore date changes that are at a different time on the same day. This fixes issues where
+        // the calendar re-renders when there is no meaningful change to [minDate] or [maxDate]
+        // (#24435).
+        const minDateChange = changes['minDate'] && !this.dateService.areEqual(changes['minDate'].previousValue, changes['minDate'].currentValue)
+            ? changes['minDate']
+            : undefined;
+        const maxDateChange = changes['maxDate'] && !this.dateService.areEqual(changes['maxDate'].previousValue, changes['maxDate'].currentValue)
+            ? changes['maxDate']
+            : undefined;
+        const change = minDateChange || maxDateChange || changes['dateFilter'];
+        if (change && !change.firstChange) {
+            const view = this._getCurrentViewComponent();
+            if (view) {
+                // We need to `detectChanges` manually here, because the `minDate`, `maxDate` etc. are
+                // passed down to the view via data bindings which won't be up-to-date when we call `_init`.
+                this._changeDetectorRef.detectChanges();
+                view.init();
+            }
+        }
+    }
+    /** Focuses the active date. */
+    focusActiveCell() {
+        this._getCurrentViewComponent().focusActiveCell(false);
+    }
+    /** Updates today's date after an update of the active date */
+    updateTodaysDate() {
+        this._getCurrentViewComponent().init();
+    }
+    /** Handles date selection in the month view. */
+    _dateSelected(event) {
+        const date = event.value;
+        if (this.selected instanceof DateRangeModel || (date && !this.dateService.areEqual(date, this.selected))) {
+            this.selectedChange.emit(date);
+        }
+        this.userSelection.emit(event);
+    }
+    /** Handles year selection in the multiyear view. */
+    _yearSelectedInMultiYearView(normalizedYear) {
+        this.yearSelected.emit(normalizedYear);
+    }
+    /** Handles month selection in the year view. */
+    _monthSelectedInYearView(normalizedMonth) {
+        this.monthSelected.emit(normalizedMonth);
+    }
+    /** Handles year/month selection in the multi-year/year views. */
+    _goToDateInView(date, view) {
+        this.activeDate = date;
+        this.currentView = view;
+    }
+    /** Called when the user starts dragging to change a date range. */
+    _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 = undefined;
+    }
+    /** Returns the component instance that corresponds to the current calendar view. */
+    _getCurrentViewComponent() {
+        // The return type is explicitly written as a union to ensure that the Closure compiler does
+        // not optimize calls to _init(). Without the explicit return type, TypeScript narrows it to
+        // only the first component type. See https://github.com/angular/components/issues/22996.
+        return (this.monthView || this.yearView || this.multiYearView);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: CalendarComponent, selector: "upd-calendar", inputs: { startAt: "startAt", startView: "startView", selected: "selected", minDate: "minDate", maxDate: "maxDate", dateFilter: "dateFilter", dateClass: "dateClass", comparisonStart: "comparisonStart", comparisonEnd: "comparisonEnd", startDateAccessibleName: "startDateAccessibleName", endDateAccessibleName: "endDateAccessibleName", isRange: "isRange" }, outputs: { selectedChange: "selectedChange", yearSelected: "yearSelected", monthSelected: "monthSelected", viewChanged: "viewChanged", userSelection: "userSelection", userDragDrop: "userDragDrop" }, viewQueries: [{ propertyName: "monthView", first: true, predicate: CalendarMonthViewComponent, descendants: true }, { propertyName: "yearView", first: true, predicate: CalendarYearViewComponent, descendants: true }, { propertyName: "multiYearView", first: true, predicate: CalendarMultiYearViewComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@switch (currentView) {\n    @case ('month') {\n        <upd-calendar-month-view [(activeDate)]=\"activeDate\" [isRange]=\"isRange\" [selected]=\"selected\" [dateFilter]=\"dateFilter\"\n            [maxDate]=\"maxDate\" [minDate]=\"minDate\" [dateClass]=\"dateClass\" [comparisonStart]=\"comparisonStart\"\n            [comparisonEnd]=\"comparisonEnd\" [startDateAccessibleName]=\"startDateAccessibleName\"\n            [endDateAccessibleName]=\"endDateAccessibleName\" (userSelection)=\"_dateSelected($event)\" (dragStarted)=\"_dragStarted($event)\"\n            (dragEnded)=\"_dragEnded($event)\" [activeDrag]=\"_activeDrag\">\n        </upd-calendar-month-view>\n    }\n    @case ('year') {\n        YEAR!\n            <!--        <upd-calendar-year-view-->\n            <!--            [(activeDate)]=\"activeDate\"-->\n            <!--            [selected]=\"selected\"-->\n            <!--            [dateFilter]=\"dateFilter\"-->\n            <!--            [maxDate]=\"maxDate\"-->\n            <!--            [minDate]=\"minDate\"-->\n            <!--            [dateClass]=\"dateClass\"-->\n            <!--            (monthSelected)=\"_monthSelectedInYearView($event)\"-->\n            <!--            (selectedChange)=\"_goToDateInView($event, 'month')\"></upd-calendar-year-view>-->\n    }\n    @case ('multi-year') {\n        MUUMUMUULTI-YEAR!\n            <!--        <upd-calendar-multi-year-view-->\n            <!--            [(activeDate)]=\"activeDate\"-->\n            <!--            [selected]=\"selected\"-->\n            <!--            [dateFilter]=\"dateFilter\"-->\n            <!--            [maxDate]=\"maxDate\"-->\n            <!--            [minDate]=\"minDate\"-->\n            <!--            [dateClass]=\"dateClass\"-->\n            <!--            (yearSelected)=\"_yearSelectedInMultiYearView($event)\"-->\n            <!--            (selectedChange)=\"_goToDateInView($event, 'year')\"></upd-calendar-multi-year-view>-->\n    }\n}\n", styles: [""], dependencies: [{ kind: "component", type: CalendarMonthViewComponent, selector: "upd-calendar-month-view", inputs: ["activeDate", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName", "firstDayOfWeek", "activeDrag", "isRange"], outputs: ["selectedChange", "userSelection", "dragStarted", "dragEnded", "activeDateChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: CalendarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'upd-calendar', template: "@switch (currentView) {\n    @case ('month') {\n        <upd-calendar-month-view [(activeDate)]=\"activeDate\" [isRange]=\"isRange\" [selected]=\"selected\" [dateFilter]=\"dateFilter\"\n            [maxDate]=\"maxDate\" [minDate]=\"minDate\" [dateClass]=\"dateClass\" [comparisonStart]=\"comparisonStart\"\n            [comparisonEnd]=\"comparisonEnd\" [startDateAccessibleName]=\"startDateAccessibleName\"\n            [endDateAccessibleName]=\"endDateAccessibleName\" (userSelection)=\"_dateSelected($event)\" (dragStarted)=\"_dragStarted($event)\"\n            (dragEnded)=\"_dragEnded($event)\" [activeDrag]=\"_activeDrag\">\n        </upd-calendar-month-view>\n    }\n    @case ('year') {\n        YEAR!\n            <!--        <upd-calendar-year-view-->\n            <!--            [(activeDate)]=\"activeDate\"-->\n            <!--            [selected]=\"selected\"-->\n            <!--            [dateFilter]=\"dateFilter\"-->\n            <!--            [maxDate]=\"maxDate\"-->\n            <!--            [minDate]=\"minDate\"-->\n            <!--            [dateClass]=\"dateClass\"-->\n            <!--            (monthSelected)=\"_monthSelectedInYearView($event)\"-->\n            <!--            (selectedChange)=\"_goToDateInView($event, 'month')\"></upd-calendar-year-view>-->\n    }\n    @case ('multi-year') {\n        MUUMUMUULTI-YEAR!\n            <!--        <upd-calendar-multi-year-view-->\n            <!--            [(activeDate)]=\"activeDate\"-->\n            <!--            [selected]=\"selected\"-->\n            <!--            [dateFilter]=\"dateFilter\"-->\n            <!--            [maxDate]=\"maxDate\"-->\n            <!--            [minDate]=\"minDate\"-->\n            <!--            [dateClass]=\"dateClass\"-->\n            <!--            (yearSelected)=\"_yearSelectedInMultiYearView($event)\"-->\n            <!--            (selectedChange)=\"_goToDateInView($event, 'year')\"></upd-calendar-multi-year-view>-->\n    }\n}\n" }]
+        }], propDecorators: { monthView: [{
+                type: ViewChild,
+                args: [CalendarMonthViewComponent]
+            }], yearView: [{
+                type: ViewChild,
+                args: [CalendarYearViewComponent]
+            }], multiYearView: [{
+                type: ViewChild,
+                args: [CalendarMultiYearViewComponent]
+            }], startAt: [{
+                type: Input
+            }], startView: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], minDate: [{
+                type: Input
+            }], maxDate: [{
+                type: Input
+            }], dateFilter: [{
+                type: Input
+            }], dateClass: [{
+                type: Input
+            }], comparisonStart: [{
+                type: Input
+            }], comparisonEnd: [{
+                type: Input
+            }], startDateAccessibleName: [{
+                type: Input
+            }], endDateAccessibleName: [{
+                type: Input
+            }], isRange: [{
+                type: Input
+            }], selectedChange: [{
+                type: Output
+            }], yearSelected: [{
+                type: Output
+            }], monthSelected: [{
+                type: Output
+            }], viewChanged: [{
+                type: Output
+            }], userSelection: [{
+                type: Output
+            }], userDragDrop: [{
+                type: Output
+            }] } });
+
+var UpDevs$1 = {
+	Calendar: {
+		PreviousMonth: "Previous month",
+		PreviousYear: "Previous year",
+		PreviousMultiYear: "Previous 24 years",
+		NextMonth: "Next month",
+		NextYear: "Next year",
+		NextMultiYear: "Next 24 years",
+		SwitchToMultiYearView: "Choose month and year",
+		SwitchToMonthView: "Choose date",
+		YearRange: "{{start}} – {{end}}",
+		YearRangeLabel: "{{start}} to {{end}}"
+	}
+};
+var en = {
+	UpDevs: UpDevs$1
+};
+
+var en$1 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    UpDevs: UpDevs$1,
+    default: en
+});
+
+var UpDevs = {
+	Calendar: {
+		PreviousMonth: "Mês anterior",
+		PreviousYear: "Ano anterior",
+		PreviousMultiYear: "24 anos anteriores",
+		NextMonth: "Próximo mês",
+		NextYear: "Próximo ano",
+		NextMultiYear: "Próximos 24 anos",
+		SwitchToMultiYearView: "Escolha mês e ano",
+		SwitchToMonthView: "Escolha uma data",
+		YearRange: "{{start}} – {{end}}",
+		YearRangeLabel: "{{start}} até {{end}}"
+	}
+};
+var pt = {
+	UpDevs: UpDevs
+};
+
+var pt$1 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    UpDevs: UpDevs,
+    default: pt
+});
+
+class UpdCalendarModule {
+    constructor(translocoService) {
+        translocoService.setFallbackLangForMissingTranslation({ fallbackLang: 'en' });
+        translocoService.setTranslation(en$1, 'en');
+        translocoService.setTranslation(pt$1, 'pt');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UpdCalendarModule, deps: [{ token: i1$2.TranslocoService }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: UpdCalendarModule, declarations: [CalendarHeaderComponent,
+            CalendarMultiYearViewComponent,
+            CalendarYearViewComponent,
+            CalendarMonthViewComponent,
+            CalendarBodyComponent,
+            CalendarComponent], imports: [CommonModule,
+            UpdButtonModule,
+            TranslocoDirective,
+            UpdIconsModule], exports: [CalendarComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UpdCalendarModule, providers: [
+            CalendarService,
+            CalendarSignalsService,
+            CalendarRangeStrategyService
+        ], imports: [CommonModule,
+            UpdButtonModule,
+            UpdIconsModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UpdCalendarModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        UpdButtonModule,
+                        TranslocoDirective,
+                        UpdIconsModule
+                    ],
+                    declarations: [
+                        CalendarHeaderComponent,
+                        CalendarMultiYearViewComponent,
+                        CalendarYearViewComponent,
+                        CalendarMonthViewComponent,
+                        CalendarBodyComponent,
+                        CalendarComponent
+                    ],
+                    exports: [
+                        CalendarComponent
+                    ],
+                    providers: [
+                        CalendarService,
+                        CalendarSignalsService,
+                        CalendarRangeStrategyService
+                    ]
+                }]
+        }], ctorParameters: () => [{ type: i1$2.TranslocoService }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CalendarComponent, CalendarRangeStrategyService, DateRangeModel, UpdCalendarModule };
+//# sourceMappingURL=updevs-components-calendar.mjs.map