@angular/material

Version:

Angular Material

1 lines • 372 kB

Source Map (JSON)

{"version":3,"file":"datepicker.mjs","sources":["../../../../../darwin_arm64-fastbuild-ST-46c76129e412/bin/src/material/datepicker/datepicker-errors.ts","../../../../../darwin_arm64-fastbuild-ST-46c76129e412/bin/src/material/datepicker/datepicker-intl.ts","../../../../../darwin_arm64-fastbuild-ST-46c76129e412/bin/src/material/datepicker/calendar-body.ts","../../../../../darwin_arm64-fastbuild-ST-46c76129e412/bin/src/material/datepicker/calendar-body.html","../../../../../darwin_arm64-fastbuild-ST-46c76129e412/bin/src/material/datepicker/date-selection-model.ts","../../../../../darwin_arm64-fastbuild-ST-46c76129e412/bin/src/material/datepicker/date-range-selection-strategy.ts","../../../../../darwin_arm64-fastbuild-ST-46c76129e412/bin/src/material/datepicker/month-view.ts","../../../../../darwin_arm64-fastbuild-ST-46c76129e412/bin/src/material/datepicker/month-view.html","../../../../../darwin_arm64-fastbuild-ST-46c76129e412/bin/src/material/datepicker/multi-year-view.ts","../../../../../darwin_arm64-fastbuild-ST-46c76129e412/bin/src/material/datepicker/multi-year-view.html","../../../../../darwin_arm64-fastbuild-ST-46c76129e412/bin/src/material/datepicker/year-view.ts","../../../../../darwin_arm64-fastbuild-ST-46c76129e412/bin/src/material/datepicker/year-view.html","../../../../../darwin_arm64-fastbuild-ST-46c76129e412/bin/src/material/datepicker/calendar.ts","../../../../../darwin_arm64-fastbuild-ST-46c76129e412/bin/src/material/datepicker/calendar-header.html","../../../../../darwin_arm64-fastbuild-ST-46c76129e412/bin/src/material/datepicker/calendar.html","../../../../../darwin_arm64-fastbuild-ST-46c76129e412/bin/src/material/datepicker/datepicker-base.ts","../../../../../darwin_arm64-fastbuild-ST-46c76129e412/bin/src/material/datepicker/datepicker-content.html","../../../../../darwin_arm64-fastbuild-ST-46c76129e412/bin/src/material/datepicker/datepicker.ts","../../../../../darwin_arm64-fastbuild-ST-46c76129e412/bin/src/material/datepicker/datepicker-input-base.ts","../../../../../darwin_arm64-fastbuild-ST-46c76129e412/bin/src/material/datepicker/datepicker-input.ts","../../../../../darwin_arm64-fastbuild-ST-46c76129e412/bin/src/material/datepicker/datepicker-toggle.ts","../../../../../darwin_arm64-fastbuild-ST-46c76129e412/bin/src/material/datepicker/datepicker-toggle.html","../../../../../darwin_arm64-fastbuild-ST-46c76129e412/bin/src/material/datepicker/date-range-input.ts","../../../../../darwin_arm64-fastbuild-ST-46c76129e412/bin/src/material/datepicker/date-range-input.html","../../../../../darwin_arm64-fastbuild-ST-46c76129e412/bin/src/material/datepicker/aria-accessible-name.ts","../../../../../darwin_arm64-fastbuild-ST-46c76129e412/bin/src/material/datepicker/date-range-input-parts.ts","../../../../../darwin_arm64-fastbuild-ST-46c76129e412/bin/src/material/datepicker/date-range-picker.ts","../../../../../darwin_arm64-fastbuild-ST-46c76129e412/bin/src/material/datepicker/datepicker-actions.ts","../../../../../darwin_arm64-fastbuild-ST-46c76129e412/bin/src/material/datepicker/datepicker-module.ts","../../../../../darwin_arm64-fastbuild-ST-46c76129e412/bin/src/material/datepicker/datepicker-animations.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.dev/license\n */\n\n/** @docs-private */\nexport function createMissingDateImplError(provider: string) {\n return Error(\n `MatDatepicker: No provider found for ${provider}. You must add one of the following ` +\n `to your app config: provideNativeDateAdapter, provideDateFnsAdapter, ` +\n `provideLuxonDateAdapter, provideMomentDateAdapter, or provide a custom implementation.`,\n );\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.dev/license\n */\n\nimport {Injectable} from '@angular/core';\nimport {Subject} from 'rxjs';\n\n/** Datepicker data that requires internationalization. */\n@Injectable({providedIn: 'root'})\nexport class MatDatepickerIntl {\n /**\n * Stream that emits whenever the labels here are changed. Use this to notify\n * components if the labels have changed after initialization.\n */\n readonly changes: Subject<void> = new Subject<void>();\n\n /** A label for the calendar popup (used by screen readers). */\n calendarLabel = 'Calendar';\n\n /** A label for the button used to open the calendar popup (used by screen readers). */\n openCalendarLabel = 'Open calendar';\n\n /** Label for the button used to close the calendar popup. */\n closeCalendarLabel = 'Close calendar';\n\n /** A label for the previous month button (used by screen readers). */\n prevMonthLabel = 'Previous month';\n\n /** A label for the next month button (used by screen readers). */\n nextMonthLabel = 'Next month';\n\n /** A label for the previous year button (used by screen readers). */\n prevYearLabel = 'Previous year';\n\n /** A label for the next year button (used by screen readers). */\n nextYearLabel = 'Next year';\n\n /** A label for the previous multi-year button (used by screen readers). */\n prevMultiYearLabel = 'Previous 24 years';\n\n /** A label for the next multi-year button (used by screen readers). */\n nextMultiYearLabel = 'Next 24 years';\n\n /** A label for the 'switch to month view' button (used by screen readers). */\n switchToMonthViewLabel = 'Choose date';\n\n /** A label for the 'switch to year view' button (used by screen readers). */\n switchToMultiYearViewLabel = 'Choose month and year';\n\n /**\n * A label for the first date of a range of dates (used by screen readers).\n * @deprecated Provide your own internationalization string.\n * @breaking-change 17.0.0\n */\n startDateLabel = 'Start date';\n\n /**\n * A label for the last date of a range of dates (used by screen readers).\n * @deprecated Provide your own internationalization string.\n * @breaking-change 17.0.0\n */\n endDateLabel = 'End date';\n\n /**\n * A label for the Comparison date of a range of dates (used by screen readers).\n */\n comparisonDateLabel = 'Comparison range';\n\n /** Formats a range of years (used for visuals). */\n formatYearRange(start: string, end: string): string {\n return `${start} \\u2013 ${end}`;\n }\n\n /** Formats a label for a range of years (used by screen readers). */\n formatYearRangeLabel(start: string, end: string): string {\n return `${start} to ${end}`;\n }\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.dev/license\n */\n\nimport {Platform, _bindEventWithOptions} from '@angular/cdk/platform';\nimport {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n EventEmitter,\n Input,\n Output,\n ViewEncapsulation,\n NgZone,\n OnChanges,\n SimpleChanges,\n OnDestroy,\n AfterViewChecked,\n inject,\n afterNextRender,\n Injector,\n Renderer2,\n} from '@angular/core';\nimport {_IdGenerator} from '@angular/cdk/a11y';\nimport {NgClass} from '@angular/common';\nimport {_CdkPrivateStyleLoader} from '@angular/cdk/private';\nimport {_StructuralStylesLoader} from '../core';\nimport {MatDatepickerIntl} from './datepicker-intl';\n\n/** Extra CSS classes that can be associated with a calendar cell. */\nexport type MatCalendarCellCssClasses = string | string[] | Set<string> | {[key: string]: any};\n\n/** Function that can generate the extra classes that should be added to a calendar cell. */\nexport type MatCalendarCellClassFunction<D> = (\n date: D,\n view: 'month' | 'year' | 'multi-year',\n) => MatCalendarCellCssClasses;\n\nlet uniqueIdCounter = 0;\n\n/**\n * An internal class that represents the data corresponding to a single calendar cell.\n * @docs-private\n */\nexport class MatCalendarCell<D = any> {\n readonly id = uniqueIdCounter++;\n\n constructor(\n public value: number,\n public displayValue: string,\n public ariaLabel: string,\n public enabled: boolean,\n public cssClasses: MatCalendarCellCssClasses = {},\n public compareValue = value,\n public rawValue?: D,\n ) {}\n}\n\n/** Event emitted when a date inside the calendar is triggered as a result of a user action. */\nexport interface MatCalendarUserEvent<D> {\n value: D;\n event: Event;\n}\n\n/** Event options that can be used to bind an active, capturing event. */\nconst activeCapturingEventOptions = {\n passive: false,\n capture: true,\n};\n\n/** Event options that can be used to bind a passive, capturing event. */\nconst passiveCapturingEventOptions = {\n passive: true,\n capture: true,\n};\n\n/** Event options that can be used to bind a passive, non-capturing event. */\nconst passiveEventOptions = {passive: true};\n\n/**\n * An internal component used to display calendar data in a table.\n * @docs-private\n */\n@Component({\n selector: '[mat-calendar-body]',\n templateUrl: 'calendar-body.html',\n styleUrl: 'calendar-body.css',\n host: {\n 'class': 'mat-calendar-body',\n },\n exportAs: 'matCalendarBody',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [NgClass],\n})\nexport class MatCalendarBody<D = any> implements OnChanges, OnDestroy, AfterViewChecked {\n private _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n private _ngZone = inject(NgZone);\n private _platform = inject(Platform);\n private _intl = inject(MatDatepickerIntl);\n private _eventCleanups: (() => void)[];\n\n /**\n * Used to skip the next focus event when rendering the preview range.\n * We need a flag like this, because some browsers fire focus events asynchronously.\n */\n private _skipNextFocus: boolean;\n\n /**\n * Used to focus the active cell after change detection has run.\n */\n private _focusActiveCellAfterViewChecked = false;\n\n /** The label for the table. (e.g. \"Jan 2017\"). */\n @Input() label: string;\n\n /** The cells to display in the table. */\n @Input() rows: MatCalendarCell[][];\n\n /** The value in the table that corresponds to today. */\n @Input() todayValue: number;\n\n /** Start value of the selected date range. */\n @Input() startValue: number;\n\n /** End value of the selected date range. */\n @Input() endValue: number;\n\n /** The minimum number of free cells needed to fit the label in the first row. */\n @Input() labelMinRequiredCells: number;\n\n /** The number of columns in the table. */\n @Input() numCols: number = 7;\n\n /** The cell number of the active cell in the table. */\n @Input() activeCell: number = 0;\n\n ngAfterViewChecked() {\n if (this._focusActiveCellAfterViewChecked) {\n this._focusActiveCell();\n this._focusActiveCellAfterViewChecked = false;\n }\n }\n\n /** Whether a range is being selected. */\n @Input() isRange: boolean = false;\n\n /**\n * The aspect ratio (width / height) to use for the cells in the table. This aspect ratio will be\n * maintained even as the table resizes.\n */\n @Input() cellAspectRatio: number = 1;\n\n /** Start of the comparison range. */\n @Input() comparisonStart: number | null;\n\n /** End of the comparison range. */\n @Input() comparisonEnd: number | null;\n\n /** Start of the preview range. */\n @Input() previewStart: number | null = null;\n\n /** End of the preview range. */\n @Input() previewEnd: number | null = null;\n\n /** ARIA Accessible name of the `<input matStartDate/>` */\n @Input() startDateAccessibleName: string | null;\n\n /** ARIA Accessible name of the `<input matEndDate/>` */\n @Input() endDateAccessibleName: string | null;\n\n /** Emits when a new value is selected. */\n @Output() readonly selectedValueChange = new EventEmitter<MatCalendarUserEvent<number>>();\n\n /** Emits when the preview has changed as a result of a user action. */\n @Output() readonly previewChange = new EventEmitter<\n MatCalendarUserEvent<MatCalendarCell | null>\n >();\n\n @Output() readonly activeDateChange = new EventEmitter<MatCalendarUserEvent<number>>();\n\n /** Emits the date at the possible start of a drag event. */\n @Output() readonly dragStarted = new EventEmitter<MatCalendarUserEvent<D>>();\n\n /** Emits the date at the conclusion of a drag, or null if mouse was not released on a date. */\n @Output() readonly dragEnded = new EventEmitter<MatCalendarUserEvent<D | null>>();\n\n /** The number of blank cells to put at the beginning for the first row. */\n _firstRowOffset: number;\n\n /** Padding for the individual date cells. */\n _cellPadding: string;\n\n /** Width of an individual cell. */\n _cellWidth: string;\n\n /** ID for the start date label. */\n _startDateLabelId: string;\n\n /** ID for the end date label. */\n _endDateLabelId: string;\n\n /** ID for the comparison start date label. */\n _comparisonStartDateLabelId: string;\n\n /** ID for the comparison end date label. */\n _comparisonEndDateLabelId: string;\n\n private _didDragSinceMouseDown = false;\n\n private _injector = inject(Injector);\n\n comparisonDateAccessibleName = this._intl.comparisonDateLabel;\n\n /**\n * Tracking function for rows based on their identity. Ideally we would use some sort of\n * key on the row, but that would require a breaking change for the `rows` input. We don't\n * use the built-in identity tracking, because it logs warnings.\n */\n _trackRow = (row: MatCalendarCell[]) => row;\n\n constructor(...args: unknown[]);\n\n constructor() {\n const renderer = inject(Renderer2);\n const idGenerator = inject(_IdGenerator);\n this._startDateLabelId = idGenerator.getId('mat-calendar-body-start-');\n this._endDateLabelId = idGenerator.getId('mat-calendar-body-end-');\n this._comparisonStartDateLabelId = idGenerator.getId('mat-calendar-body-comparison-start-');\n this._comparisonEndDateLabelId = idGenerator.getId('mat-calendar-body-comparison-end-');\n\n inject(_CdkPrivateStyleLoader).load(_StructuralStylesLoader);\n\n this._ngZone.runOutsideAngular(() => {\n const element = this._elementRef.nativeElement;\n const cleanups = [\n // `touchmove` is active since we need to call `preventDefault`.\n _bindEventWithOptions(\n renderer,\n element,\n 'touchmove',\n this._touchmoveHandler,\n activeCapturingEventOptions,\n ),\n _bindEventWithOptions(\n renderer,\n element,\n 'mouseenter',\n this._enterHandler,\n passiveCapturingEventOptions,\n ),\n _bindEventWithOptions(\n renderer,\n element,\n 'focus',\n this._enterHandler,\n passiveCapturingEventOptions,\n ),\n _bindEventWithOptions(\n renderer,\n element,\n 'mouseleave',\n this._leaveHandler,\n passiveCapturingEventOptions,\n ),\n _bindEventWithOptions(\n renderer,\n element,\n 'blur',\n this._leaveHandler,\n passiveCapturingEventOptions,\n ),\n _bindEventWithOptions(\n renderer,\n element,\n 'mousedown',\n this._mousedownHandler,\n passiveEventOptions,\n ),\n _bindEventWithOptions(\n renderer,\n element,\n 'touchstart',\n this._mousedownHandler,\n passiveEventOptions,\n ),\n ];\n\n if (this._platform.isBrowser) {\n cleanups.push(\n renderer.listen('window', 'mouseup', this._mouseupHandler),\n renderer.listen('window', 'touchend', this._touchendHandler),\n );\n }\n\n this._eventCleanups = cleanups;\n });\n }\n\n /** Called when a cell is clicked. */\n _cellClicked(cell: MatCalendarCell, event: MouseEvent): void {\n // Ignore \"clicks\" that are actually canceled drags (eg the user dragged\n // off and then went back to this cell to undo).\n if (this._didDragSinceMouseDown) {\n return;\n }\n\n if (cell.enabled) {\n this.selectedValueChange.emit({value: cell.value, event});\n }\n }\n\n _emitActiveDateChange(cell: MatCalendarCell, event: FocusEvent): void {\n if (cell.enabled) {\n this.activeDateChange.emit({value: cell.value, event});\n }\n }\n\n /** Returns whether a cell should be marked as selected. */\n _isSelected(value: number) {\n return this.startValue === value || this.endValue === value;\n }\n\n ngOnChanges(changes: SimpleChanges) {\n const columnChanges = changes['numCols'];\n const {rows, numCols} = this;\n\n if (changes['rows'] || columnChanges) {\n this._firstRowOffset = rows && rows.length && rows[0].length ? numCols - rows[0].length : 0;\n }\n\n if (changes['cellAspectRatio'] || columnChanges || !this._cellPadding) {\n this._cellPadding = `${(50 * this.cellAspectRatio) / numCols}%`;\n }\n\n if (columnChanges || !this._cellWidth) {\n this._cellWidth = `${100 / numCols}%`;\n }\n }\n\n ngOnDestroy() {\n this._eventCleanups.forEach(cleanup => cleanup());\n }\n\n /** Returns whether a cell is active. */\n _isActiveCell(rowIndex: number, colIndex: number): boolean {\n let cellNumber = rowIndex * this.numCols + colIndex;\n\n // Account for the fact that the first row may not have as many cells.\n if (rowIndex) {\n cellNumber -= this._firstRowOffset;\n }\n\n return cellNumber == this.activeCell;\n }\n\n /**\n * Focuses the active cell after the microtask queue is empty.\n *\n * Adding a 0ms setTimeout seems to fix Voiceover losing focus when pressing PageUp/PageDown\n * (issue #24330).\n *\n * Determined a 0ms by gradually increasing duration from 0 and testing two use cases with screen\n * reader enabled:\n *\n * 1. Pressing PageUp/PageDown repeatedly with pausing between each key press.\n * 2. Pressing and holding the PageDown key with repeated keys enabled.\n *\n * Test 1 worked roughly 95-99% of the time with 0ms and got a little bit better as the duration\n * increased. Test 2 got slightly better until the duration was long enough to interfere with\n * repeated keys. If the repeated key speed was faster than the timeout duration, then pressing\n * and holding pagedown caused the entire page to scroll.\n *\n * Since repeated key speed can verify across machines, determined that any duration could\n * potentially interfere with repeated keys. 0ms would be best because it almost entirely\n * eliminates the focus being lost in Voiceover (#24330) without causing unintended side effects.\n * Adding delay also complicates writing tests.\n */\n _focusActiveCell(movePreview = true) {\n afterNextRender(\n () => {\n setTimeout(() => {\n const activeCell: HTMLElement | null = this._elementRef.nativeElement.querySelector(\n '.mat-calendar-body-active',\n );\n\n if (activeCell) {\n if (!movePreview) {\n this._skipNextFocus = true;\n }\n\n activeCell.focus();\n }\n });\n },\n {injector: this._injector},\n );\n }\n\n /** Focuses the active cell after change detection has run and the microtask queue is empty. */\n _scheduleFocusActiveCellAfterViewChecked() {\n this._focusActiveCellAfterViewChecked = true;\n }\n\n /** Gets whether a value is the start of the main range. */\n _isRangeStart(value: number) {\n return isStart(value, this.startValue, this.endValue);\n }\n\n /** Gets whether a value is the end of the main range. */\n _isRangeEnd(value: number) {\n return isEnd(value, this.startValue, this.endValue);\n }\n\n /** Gets whether a value is within the currently-selected range. */\n _isInRange(value: number): boolean {\n return isInRange(value, this.startValue, this.endValue, this.isRange);\n }\n\n /** Gets whether a value is the start of the comparison range. */\n _isComparisonStart(value: number) {\n return isStart(value, this.comparisonStart, this.comparisonEnd);\n }\n\n /** Whether the cell is a start bridge cell between the main and comparison ranges. */\n _isComparisonBridgeStart(value: number, rowIndex: number, colIndex: number) {\n if (!this._isComparisonStart(value) || this._isRangeStart(value) || !this._isInRange(value)) {\n return false;\n }\n\n let previousCell: MatCalendarCell | undefined = this.rows[rowIndex][colIndex - 1];\n\n if (!previousCell) {\n const previousRow = this.rows[rowIndex - 1];\n previousCell = previousRow && previousRow[previousRow.length - 1];\n }\n\n return previousCell && !this._isRangeEnd(previousCell.compareValue);\n }\n\n /** Whether the cell is an end bridge cell between the main and comparison ranges. */\n _isComparisonBridgeEnd(value: number, rowIndex: number, colIndex: number) {\n if (!this._isComparisonEnd(value) || this._isRangeEnd(value) || !this._isInRange(value)) {\n return false;\n }\n\n let nextCell: MatCalendarCell | undefined = this.rows[rowIndex][colIndex + 1];\n\n if (!nextCell) {\n const nextRow = this.rows[rowIndex + 1];\n nextCell = nextRow && nextRow[0];\n }\n\n return nextCell && !this._isRangeStart(nextCell.compareValue);\n }\n\n /** Gets whether a value is the end of the comparison range. */\n _isComparisonEnd(value: number) {\n return isEnd(value, this.comparisonStart, this.comparisonEnd);\n }\n\n /** Gets whether a value is within the current comparison range. */\n _isInComparisonRange(value: number) {\n return isInRange(value, this.comparisonStart, this.comparisonEnd, this.isRange);\n }\n\n /**\n * Gets whether a value is the same as the start and end of the comparison range.\n * For context, the functions that we use to determine whether something is the start/end of\n * a range don't allow for the start and end to be on the same day, because we'd have to use\n * much more specific CSS selectors to style them correctly in all scenarios. This is fine for\n * the regular range, because when it happens, the selected styles take over and still show where\n * the range would've been, however we don't have these selected styles for a comparison range.\n * This function is used to apply a class that serves the same purpose as the one for selected\n * dates, but it only applies in the context of a comparison range.\n */\n _isComparisonIdentical(value: number) {\n // Note that we don't need to null check the start/end\n // here, because the `value` will always be defined.\n return this.comparisonStart === this.comparisonEnd && value === this.comparisonStart;\n }\n\n /** Gets whether a value is the start of the preview range. */\n _isPreviewStart(value: number) {\n return isStart(value, this.previewStart, this.previewEnd);\n }\n\n /** Gets whether a value is the end of the preview range. */\n _isPreviewEnd(value: number) {\n return isEnd(value, this.previewStart, this.previewEnd);\n }\n\n /** Gets whether a value is inside the preview range. */\n _isInPreview(value: number) {\n return isInRange(value, this.previewStart, this.previewEnd, this.isRange);\n }\n\n /** Gets ids of aria descriptions for the start and end of a date range. */\n _getDescribedby(value: number): string | null {\n if (!this.isRange) {\n return null;\n }\n\n if (this.startValue === value && this.endValue === value) {\n return `${this._startDateLabelId} ${this._endDateLabelId}`;\n } else if (this.startValue === value) {\n return this._startDateLabelId;\n } else if (this.endValue === value) {\n return this._endDateLabelId;\n }\n\n if (this.comparisonStart !== null && this.comparisonEnd !== null) {\n if (value === this.comparisonStart && value === this.comparisonEnd) {\n return `${this._comparisonStartDateLabelId} ${this._comparisonEndDateLabelId}`;\n } else if (value === this.comparisonStart) {\n return this._comparisonStartDateLabelId;\n } else if (value === this.comparisonEnd) {\n return this._comparisonEndDateLabelId;\n }\n }\n\n return null;\n }\n\n /**\n * Event handler for when the user enters an element\n * inside the calendar body (e.g. by hovering in or focus).\n */\n private _enterHandler = (event: Event) => {\n if (this._skipNextFocus && event.type === 'focus') {\n this._skipNextFocus = false;\n return;\n }\n\n // We only need to hit the zone when we're selecting a range.\n if (event.target && this.isRange) {\n const cell = this._getCellFromElement(event.target as HTMLElement);\n\n if (cell) {\n this._ngZone.run(() => this.previewChange.emit({value: cell.enabled ? cell : null, event}));\n }\n }\n };\n\n private _touchmoveHandler = (event: TouchEvent) => {\n if (!this.isRange) return;\n\n const target = getActualTouchTarget(event);\n const cell = target ? this._getCellFromElement(target as HTMLElement) : null;\n\n if (target !== event.target) {\n this._didDragSinceMouseDown = true;\n }\n\n // If the initial target of the touch is a date cell, prevent default so\n // that the move is not handled as a scroll.\n if (getCellElement(event.target as HTMLElement)) {\n event.preventDefault();\n }\n\n this._ngZone.run(() => this.previewChange.emit({value: cell?.enabled ? cell : null, event}));\n };\n\n /**\n * Event handler for when the user's pointer leaves an element\n * inside the calendar body (e.g. by hovering out or blurring).\n */\n private _leaveHandler = (event: Event) => {\n // We only need to hit the zone when we're selecting a range.\n if (this.previewEnd !== null && this.isRange) {\n if (event.type !== 'blur') {\n this._didDragSinceMouseDown = true;\n }\n\n // Only reset the preview end value when leaving cells. This looks better, because\n // we have a gap between the cells and the rows and we don't want to remove the\n // range just for it to show up again when the user moves a few pixels to the side.\n if (\n event.target &&\n this._getCellFromElement(event.target as HTMLElement) &&\n !(\n (event as MouseEvent).relatedTarget &&\n this._getCellFromElement((event as MouseEvent).relatedTarget as HTMLElement)\n )\n ) {\n this._ngZone.run(() => this.previewChange.emit({value: null, event}));\n }\n }\n };\n\n /**\n * Triggered on mousedown or touchstart on a date cell.\n * Respsonsible for starting a drag sequence.\n */\n private _mousedownHandler = (event: Event) => {\n if (!this.isRange) return;\n\n this._didDragSinceMouseDown = false;\n // Begin a drag if a cell within the current range was targeted.\n const cell = event.target && this._getCellFromElement(event.target as HTMLElement);\n if (!cell || !this._isInRange(cell.compareValue)) {\n return;\n }\n\n this._ngZone.run(() => {\n this.dragStarted.emit({\n value: cell.rawValue,\n event,\n });\n });\n };\n\n /** Triggered on mouseup anywhere. Respsonsible for ending a drag sequence. */\n private _mouseupHandler = (event: Event) => {\n if (!this.isRange) return;\n\n const cellElement = getCellElement(event.target as HTMLElement);\n if (!cellElement) {\n // Mouseup happened outside of datepicker. Cancel drag.\n this._ngZone.run(() => {\n this.dragEnded.emit({value: null, event});\n });\n return;\n }\n\n if (cellElement.closest('.mat-calendar-body') !== this._elementRef.nativeElement) {\n // Mouseup happened inside a different month instance.\n // Allow it to handle the event.\n return;\n }\n\n this._ngZone.run(() => {\n const cell = this._getCellFromElement(cellElement);\n this.dragEnded.emit({value: cell?.rawValue ?? null, event});\n });\n };\n\n /** Triggered on touchend anywhere. Respsonsible for ending a drag sequence. */\n private _touchendHandler = (event: TouchEvent) => {\n const target = getActualTouchTarget(event);\n\n if (target) {\n this._mouseupHandler({target} as unknown as Event);\n }\n };\n\n /** Finds the MatCalendarCell that corresponds to a DOM node. */\n private _getCellFromElement(element: HTMLElement): MatCalendarCell | null {\n const cell = getCellElement(element);\n\n if (cell) {\n const row = cell.getAttribute('data-mat-row');\n const col = cell.getAttribute('data-mat-col');\n\n if (row && col) {\n return this.rows[parseInt(row)][parseInt(col)];\n }\n }\n\n return null;\n }\n}\n\n/** Checks whether a node is a table cell element. */\nfunction isTableCell(node: Node | undefined | null): node is HTMLTableCellElement {\n return node?.nodeName === 'TD';\n}\n\n/**\n * Gets the date table cell element that is or contains the specified element.\n * Or returns null if element is not part of a date cell.\n */\nfunction getCellElement(element: HTMLElement): HTMLElement | null {\n let cell: HTMLElement | undefined;\n if (isTableCell(element)) {\n cell = element;\n } else if (isTableCell(element.parentNode)) {\n cell = element.parentNode as HTMLElement;\n } else if (isTableCell(element.parentNode?.parentNode)) {\n cell = element.parentNode!.parentNode as HTMLElement;\n }\n\n return cell?.getAttribute('data-mat-row') != null ? cell : null;\n}\n\n/** Checks whether a value is the start of a range. */\nfunction isStart(value: number, start: number | null, end: number | null): boolean {\n return end !== null && start !== end && value < end && value === start;\n}\n\n/** Checks whether a value is the end of a range. */\nfunction isEnd(value: number, start: number | null, end: number | null): boolean {\n return start !== null && start !== end && value >= start && value === end;\n}\n\n/** Checks whether a value is inside of a range. */\nfunction isInRange(\n value: number,\n start: number | null,\n end: number | null,\n rangeEnabled: boolean,\n): boolean {\n return (\n rangeEnabled &&\n start !== null &&\n end !== null &&\n start !== end &&\n value >= start &&\n value <= end\n );\n}\n\n/**\n * Extracts the element that actually corresponds to a touch event's location\n * (rather than the element that initiated the sequence of touch events).\n */\nfunction getActualTouchTarget(event: TouchEvent): Element | null {\n const touchLocation = event.changedTouches[0];\n return document.elementFromPoint(touchLocation.clientX, touchLocation.clientY);\n}\n","\n@if (_firstRowOffset < labelMinRequiredCells) {\n <tr aria-hidden=\"true\">\n <td class=\"mat-calendar-body-label\"\n [attr.colspan]=\"numCols\"\n [style.paddingTop]=\"_cellPadding\"\n [style.paddingBottom]=\"_cellPadding\">\n {{label}}\n </td>\n </tr>\n}\n\n\n@for (row of rows; track _trackRow(row); let rowIndex = $index) {\n <tr role=\"row\">\n \n @if (rowIndex === 0 && _firstRowOffset) {\n <td\n class=\"mat-calendar-body-label\"\n [attr.colspan]=\"_firstRowOffset\"\n [style.paddingTop]=\"_cellPadding\"\n [style.paddingBottom]=\"_cellPadding\">\n {{_firstRowOffset >= labelMinRequiredCells ? label : ''}}\n </td>\n }\n \n @for (item of row; track item.id; let colIndex = $index) {\n <td\n role=\"gridcell\"\n class=\"mat-calendar-body-cell-container\"\n [style.width]=\"_cellWidth\"\n [style.paddingTop]=\"_cellPadding\"\n [style.paddingBottom]=\"_cellPadding\"\n [attr.data-mat-row]=\"rowIndex\"\n [attr.data-mat-col]=\"colIndex\"\n >\n <button\n type=\"button\"\n class=\"mat-calendar-body-cell\"\n [ngClass]=\"item.cssClasses\"\n [tabindex]=\"_isActiveCell(rowIndex, colIndex) ? 0 : -1\"\n [class.mat-calendar-body-disabled]=\"!item.enabled\"\n [class.mat-calendar-body-active]=\"_isActiveCell(rowIndex, colIndex)\"\n [class.mat-calendar-body-range-start]=\"_isRangeStart(item.compareValue)\"\n [class.mat-calendar-body-range-end]=\"_isRangeEnd(item.compareValue)\"\n [class.mat-calendar-body-in-range]=\"_isInRange(item.compareValue)\"\n [class.mat-calendar-body-comparison-bridge-start]=\"_isComparisonBridgeStart(item.compareValue, rowIndex, colIndex)\"\n [class.mat-calendar-body-comparison-bridge-end]=\"_isComparisonBridgeEnd(item.compareValue, rowIndex, colIndex)\"\n [class.mat-calendar-body-comparison-start]=\"_isComparisonStart(item.compareValue)\"\n [class.mat-calendar-body-comparison-end]=\"_isComparisonEnd(item.compareValue)\"\n [class.mat-calendar-body-in-comparison-range]=\"_isInComparisonRange(item.compareValue)\"\n [class.mat-calendar-body-preview-start]=\"_isPreviewStart(item.compareValue)\"\n [class.mat-calendar-body-preview-end]=\"_isPreviewEnd(item.compareValue)\"\n [class.mat-calendar-body-in-preview]=\"_isInPreview(item.compareValue)\"\n [attr.aria-label]=\"item.ariaLabel\"\n [attr.aria-disabled]=\"!item.enabled || null\"\n [attr.aria-pressed]=\"_isSelected(item.compareValue)\"\n [attr.aria-current]=\"todayValue === item.compareValue ? 'date' : null\"\n [attr.aria-describedby]=\"_getDescribedby(item.compareValue)\"\n (click)=\"_cellClicked(item, $event)\"\n (focus)=\"_emitActiveDateChange(item, $event)\">\n <span class=\"mat-calendar-body-cell-content mat-focus-indicator\"\n [class.mat-calendar-body-selected]=\"_isSelected(item.compareValue)\"\n [class.mat-calendar-body-comparison-identical]=\"_isComparisonIdentical(item.compareValue)\"\n [class.mat-calendar-body-today]=\"todayValue === item.compareValue\">\n {{item.displayValue}}\n </span>\n <span class=\"mat-calendar-body-cell-preview\" aria-hidden=\"true\"></span>\n </button>\n </td>\n }\n </tr>\n}\n\n<span [id]=\"_startDateLabelId\" class=\"mat-calendar-body-hidden-label\">\n {{startDateAccessibleName}}\n</span>\n<span [id]=\"_endDateLabelId\" class=\"mat-calendar-body-hidden-label\">\n {{endDateAccessibleName}}\n</span>\n<span [id]=\"_comparisonStartDateLabelId\" class=\"mat-calendar-body-hidden-label\">\n {{comparisonDateAccessibleName}} {{startDateAccessibleName}}\n</span>\n<span [id]=\"_comparisonEndDateLabelId\" class=\"mat-calendar-body-hidden-label\">\n {{comparisonDateAccessibleName}} {{endDateAccessibleName}}\n</span>\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.dev/license\n */\n\nimport {FactoryProvider, Injectable, Optional, SkipSelf, OnDestroy} from '@angular/core';\nimport {DateAdapter} from '../core';\nimport {Observable, Subject} from 'rxjs';\n\n/** A class representing a range of dates. */\nexport class DateRange<D> {\n /**\n * Ensures that objects with a `start` and `end` property can't be assigned to a variable that\n * expects a `DateRange`\n */\n // tslint:disable-next-line:no-unused-variable\n private _disableStructuralEquivalency: never;\n\n constructor(\n /** The start date of the range. */\n readonly start: D | null,\n /** The end date of the range. */\n readonly end: D | null,\n ) {}\n}\n\n/**\n * Conditionally picks the date type, if a DateRange is passed in.\n * @docs-private\n */\nexport type ExtractDateTypeFromSelection<T> = T extends DateRange<infer D> ? D : NonNullable<T>;\n\n/**\n * Event emitted by the date selection model when its selection changes.\n * @docs-private\n */\nexport interface DateSelectionModelChange<S> {\n /** New value for the selection. */\n selection: S;\n\n /** Object that triggered the change. */\n source: unknown;\n\n /** Previous value */\n oldValue?: S;\n}\n\n/**\n * A selection model containing a date selection.\n * @docs-private\n */\n@Injectable()\nexport abstract class MatDateSelectionModel<S, D = ExtractDateTypeFromSelection<S>>\n implements OnDestroy\n{\n private readonly _selectionChanged = new Subject<DateSelectionModelChange<S>>();\n\n /** Emits when the selection has changed. */\n selectionChanged: Observable<DateSelectionModelChange<S>> = this._selectionChanged;\n\n protected constructor(\n /** The current selection. */\n readonly selection: S,\n protected _adapter: DateAdapter<D>,\n ) {\n this.selection = selection;\n }\n\n /**\n * Updates the current selection in the model.\n * @param value New selection that should be assigned.\n * @param source Object that triggered the selection change.\n */\n updateSelection(value: S, source: unknown) {\n const oldValue = (this as {selection: S}).selection;\n (this as {selection: S}).selection = value;\n this._selectionChanged.next({selection: value, source, oldValue});\n }\n\n ngOnDestroy() {\n this._selectionChanged.complete();\n }\n\n protected _isValidDateInstance(date: D): boolean {\n return this._adapter.isDateInstance(date) && this._adapter.isValid(date);\n }\n\n /** Adds a date to the current selection. */\n abstract add(date: D | null): void;\n\n /** Checks whether the current selection is valid. */\n abstract isValid(): boolean;\n\n /** Checks whether the current selection is complete. */\n abstract isComplete(): boolean;\n\n /** Clones the selection model. */\n abstract clone(): MatDateSelectionModel<S, D>;\n}\n\n/**\n * A selection model that contains a single date.\n * @docs-private\n */\n@Injectable()\nexport class MatSingleDateSelectionModel<D> extends MatDateSelectionModel<D | null, D> {\n constructor(adapter: DateAdapter<D>) {\n super(null, adapter);\n }\n\n /**\n * Adds a date to the current selection. In the case of a single date selection, the added date\n * simply overwrites the previous selection\n */\n add(date: D | null) {\n super.updateSelection(date, this);\n }\n\n /** Checks whether the current selection is valid. */\n isValid(): boolean {\n return this.selection != null && this._isValidDateInstance(this.selection);\n }\n\n /**\n * Checks whether the current selection is complete. In the case of a single date selection, this\n * is true if the current selection is not null.\n */\n isComplete() {\n return this.selection != null;\n }\n\n /** Clones the selection model. */\n clone() {\n const clone = new MatSingleDateSelectionModel<D>(this._adapter);\n clone.updateSelection(this.selection, this);\n return clone;\n }\n}\n\n/**\n * A selection model that contains a date range.\n * @docs-private\n */\n@Injectable()\nexport class MatRangeDateSelectionModel<D> extends MatDateSelectionModel<DateRange<D>, D> {\n constructor(adapter: DateAdapter<D>) {\n super(new DateRange<D>(null, null), adapter);\n }\n\n /**\n * Adds a date to the current selection. In the case of a date range selection, the added date\n * fills in the next `null` value in the range. If both the start and the end already have a date,\n * the selection is reset so that the given date is the new `start` and the `end` is null.\n */\n add(date: D | null): void {\n let {start, end} = this.selection;\n\n if (start == null) {\n start = date;\n } else if (end == null) {\n end = date;\n } else {\n start = date;\n end = null;\n }\n\n super.updateSelection(new DateRange<D>(start, end), this);\n }\n\n /** Checks whether the current selection is valid. */\n isValid(): boolean {\n const {start, end} = this.selection;\n\n // Empty ranges are valid.\n if (start == null && end == null) {\n return true;\n }\n\n // Complete ranges are only valid if both dates are valid and the start is before the end.\n if (start != null && end != null) {\n return (\n this._isValidDateInstance(start) &&\n this._isValidDateInstance(end) &&\n this._adapter.compareDate(start, end) <= 0\n );\n }\n\n // Partial ranges are valid if the start/end is valid.\n return (\n (start == null || this._isValidDateInstance(start)) &&\n (end == null || this._isValidDateInstance(end))\n );\n }\n\n /**\n * Checks whether the current selection is complete. In the case of a date range selection, this\n * is true if the current selection has a non-null `start` and `end`.\n */\n isComplete(): boolean {\n return this.selection.start != null && this.selection.end != null;\n }\n\n /** Clones the selection model. */\n clone() {\n const clone = new MatRangeDateSelectionModel<D>(this._adapter);\n clone.updateSelection(this.selection, this);\n return clone;\n }\n}\n\n/**\n * @docs-private\n * @deprecated No longer used, will be removed.\n * @breaking-change 21.0.0\n */\nexport function MAT_SINGLE_DATE_SELECTION_MODEL_FACTORY(\n parent: MatSingleDateSelectionModel<unknown>,\n adapter: DateAdapter<unknown>,\n) {\n return parent || new MatSingleDateSelectionModel(adapter);\n}\n\n/**\n * Used to provide a single selection model to a component.\n * @docs-private\n * @deprecated No longer used, will be removed.\n * @breaking-change 21.0.0\n */\nexport const MAT_SINGLE_DATE_SELECTION_MODEL_PROVIDER: FactoryProvider = {\n provide: MatDateSelectionModel,\n deps: [[new Optional(), new SkipSelf(), MatDateSelectionModel], DateAdapter],\n useFactory: MAT_SINGLE_DATE_SELECTION_MODEL_FACTORY,\n};\n\n/**\n * @docs-private\n * @deprecated No longer used, will be removed.\n * @breaking-change 21.0.0\n */\nexport function MAT_RANGE_DATE_SELECTION_MODEL_FACTORY(\n parent: MatSingleDateSelectionModel<unknown>,\n adapter: DateAdapter<unknown>,\n) {\n return parent || new MatRangeDateSelectionModel(adapter);\n}\n\n/**\n * Used to provide a range selection model to a component.\n * @docs-private\n * @deprecated No longer used, will be removed.\n * @breaking-change 21.0.0\n */\nexport const MAT_RANGE_DATE_SELECTION_MODEL_PROVIDER: FactoryProvider = {\n provide: MatDateSelectionModel,\n deps: [[new Optional(), new SkipSelf(), MatDateSelectionModel], DateAdapter],\n useFactory: MAT_RANGE_DATE_SELECTION_MODEL_FACTORY,\n};\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.dev/license\n */\n\nimport {Injectable, InjectionToken, Optional, SkipSelf, FactoryProvider} from '@angular/core';\nimport {DateAdapter} from '../core';\nimport {DateRange} from './date-selection-model';\n\n/** Injection token used to customize the date range selection behavior. */\nexport const MAT_DATE_RANGE_SELECTION_STRATEGY = new InjectionToken<\n MatDateRangeSelectionStrategy<any>\n>('MAT_DATE_RANGE_SELECTION_STRATEGY');\n\n/** Object that can be provided in order to customize the date range selection behavior. */\nexport interface MatDateRangeSelectionStrategy<D> {\n /**\n * Called when the user has finished selecting a value.\n * @param date Date that was selected. Will be null if the user cleared the selection.\n * @param currentRange Range that is currently show in the calendar.\n * @param event DOM event that triggered the selection. Currently only corresponds to a `click`\n * event, but it may get expanded in the future.\n */\n selectionFinished(date: D | null, currentRange: DateRange<D>, event: Event): DateRange<D>;\n\n /**\n * Called when the user has activated a new date (e.g. by hovering over\n * it or moving focus) and the calendar tries to display a date range.\n *\n * @param activeDate Date that the user has activated. Will be null if the user moved\n * focus to an element that's no a calendar cell.\n * @param currentRange Range that is currently shown in the calendar.\n * @param event DOM event that caused the preview to be changed. Will be either a\n * `mouseenter`/`mouseleave` or `focus`/`blur` depending on how the user is navigating.\n */\n createPreview(activeDate: D | null, currentRange: DateRange<D>, event: Event): DateRange<D>;\n\n /**\n * Called when the user has dragged a date in the currently selected range to another\n * date. Returns the date updated range that should result from this interaction.\n *\n * @param dateOrigin The date the user started dragging from.\n * @param originalRange The originally selected date range.\n * @param newDate The currently targeted date in the drag operation.\n * @param event DOM event that triggered the updated drag state. Will be\n * `mouseenter`/`mouseup` or `touchmove`/`touchend` depending on the device type.\n */\n createDrag?(\n dragOrigin: D,\n originalRange: DateRange<D>,\n newDate: D,\n event: Event,\n ): DateRange<D> | null;\n}\n\n/** Provides the default date range selection behavior. */\n@Injectable()\nexport class DefaultMatCalendarRangeStrategy<D> implements MatDateRangeSelectionStrategy<D> {\n constructor(private _dateAdapter: DateAdapter<D>) {}\n\n selectionFinished(date: D, currentRange: DateRange<D>) {\n let {start, end} = currentRange;\n\n if (start == null) {\n start = date;\n } else if (end == null && date && this._dateAdapter.compareDate(date, start) >= 0) {\n end = date;\n } else {\n start = date;\n end = null;\n }\n\n return new DateRange<D>(start, end);\n }\n\n createPreview(activeDate: D | null, currentRange: DateRange<D>) {\n let start: D | null = null;\n let end: D | null = null;\n\n if (currentRange.start && !currentRange.end && activeDate) {\n start = currentRange.start;\n end = activeDate;\n }\n\n return new DateRange<D>(start, end);\n }\n\n createDrag(dragOrigin: D, originalRange: DateRange<D>, newDate: D) {\n let start = originalRange.start;\n let end = originalRange.end;\n\n if (!start || !end) {\n // Can't drag from an incomplete range.\n return null;\n }\n\n const adapter = this._dateAdapter;\n\n const isRange = adapter.compareDate(start, end) !== 0;\n const diffYears = adapter.getYear(newDate) - adapter.getYear(dragOrigin);\n const diffMonths = adapter.getMonth(newDate) - adapter.getMonth(dragOrigin);\n const diffDays = adapter.getDate(newDate) - adapter.getDate(dragOrigin);\n\n if (isRange && adapter.sameDate(dragOrigin, originalRange.start)) {\n start = newDate;\n if (adapter.compareDate(newDate, end) > 0) {\n end = adapter.addCalendarYears(end, diffYears);\n end = adapter.addCalendarMonths(end, diffMonths);\n end = adapter.addCalendarDays(end, diffDays);\n }\n } else if (isRange && adapter.sameDate(dragOrigin, originalRange.end)) {\n end = newDate;\n if (adapter.compareDate(newDate, start) < 0) {\n start = adapter.addCalendarYears(start, diffYears);\n start = adapter.addCalendarMonths(start, diffMonths);\n start = adapter.addCalendarDays(start, diffDays);\n }\n } else {\n start = adapter.addCalendarYears(start, diffYears);\n start = adapter.addCalendarMonths(start, diffMonths);\n start = adapter.addCalendarDays(start, diffDays);\n end = adapter.addCalendarYears(end, diffYears);\n end = adapter.addCalendarMonths(end, diffMonths);\n end = adapter.addCalendarDays(end, diffDays);\n }\n\n return new DateRange<D>(start, end);\n }\n}\n\n/**\n * @docs-private\n * @deprecated No longer used, will be removed.\n * @breaking-change 21.0.0\n */\nexport function MAT_CALENDAR_RANGE_STRATEGY_PROVIDER_FACTORY(\n parent: MatDateRangeSelectionStrategy<unknown>,\n adapter: DateAdapter<unknown>,\n) {\n return parent || new DefaultMatCalendarRangeStrategy(adapter);\n}\n\n/**\n * @docs-private\n * @deprecated No longer used, will be removed.\n * @breaking-change 21.0.0\n */\nexport const MAT_CALENDAR_RANGE_STRATEGY_PROVIDER: FactoryProvider = {\n provide: MAT_DATE_RANGE_SELECTION_STRATEGY,\n deps: [[new Optional(), new SkipSelf(), MAT_DATE_RANGE_SELECTION_STRATEGY], DateAdapter],\n useFactory: MAT_CALENDAR_RANGE_STRATEGY_PROVIDER_FACTORY,\n};\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.dev/license\n */\n\nimport {\n DOWN_ARROW,\n END,\n ENTER,\n HOME,\n LEFT_ARROW,\n PAGE_DOWN,\n PAGE_UP,\n RIGHT_ARROW,\n UP_ARROW,\n SPACE,\n ESCAPE,\n hasModifierKey,\n} from '@angular/cdk/keycodes';\nimport {\n AfterContentInit,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\