@angular/material/fesm2020/datepicker.mjs.map

Angular Material

{"version":3,"file":"datepicker.mjs","sources":["../../../../../../src/material/datepicker/datepicker-errors.ts","../../../../../../src/material/datepicker/datepicker-intl.ts","../../../../../../src/material/datepicker/calendar-body.ts","../../../../../../src/material/datepicker/calendar-body.html","../../../../../../src/material/datepicker/date-selection-model.ts","../../../../../../src/material/datepicker/date-range-selection-strategy.ts","../../../../../../src/material/datepicker/month-view.ts","../../../../../../src/material/datepicker/month-view.html","../../../../../../src/material/datepicker/multi-year-view.ts","../../../../../../src/material/datepicker/multi-year-view.html","../../../../../../src/material/datepicker/year-view.ts","../../../../../../src/material/datepicker/year-view.html","../../../../../../src/material/datepicker/calendar.ts","../../../../../../src/material/datepicker/calendar-header.html","../../../../../../src/material/datepicker/calendar.html","../../../../../../src/material/datepicker/datepicker-animations.ts","../../../../../../src/material/datepicker/datepicker-base.ts","../../../../../../src/material/datepicker/datepicker-content.html","../../../../../../src/material/datepicker/datepicker.ts","../../../../../../src/material/datepicker/datepicker-input-base.ts","../../../../../../src/material/datepicker/datepicker-input.ts","../../../../../../src/material/datepicker/datepicker-toggle.ts","../../../../../../src/material/datepicker/datepicker-toggle.html","../../../../../../src/material/datepicker/aria-accessible-name.ts","../../../../../../src/material/datepicker/date-range-input-parts.ts","../../../../../../src/material/datepicker/date-range-input.ts","../../../../../../src/material/datepicker/date-range-input.html","../../../../../../src/material/datepicker/date-range-picker.ts","../../../../../../src/material/datepicker/datepicker-actions.ts","../../../../../../src/material/datepicker/datepicker-module.ts","../../../../../../src/material/datepicker/public-api.ts","../../../../../../src/material/datepicker/index.ts","../../../../../../src/material/datepicker/datepicker_public_index.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.io/license\n */\n\n/** @docs-private */\nexport function createMissingDateImplError(provider: string) {\n  return Error(\n    `MatDatepicker: No provider found for ${provider}. You must import one of the following ` +\n      `modules at your application root: MatNativeDateModule, MatMomentDateModule, or provide a ` +\n      `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.io/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  /** 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.io/license\n */\n\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} from '@angular/core';\nimport {take} from 'rxjs/operators';\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\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  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\nlet calendarBodyId = 1;\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  styleUrls: ['calendar-body.css'],\n  host: {\n    'class': 'mat-calendar-body',\n  },\n  exportAs: 'matCalendarBody',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class MatCalendarBody implements OnChanges, OnDestroy, AfterViewChecked {\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  /** 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  constructor(private _elementRef: ElementRef<HTMLElement>, private _ngZone: NgZone) {\n    _ngZone.runOutsideAngular(() => {\n      const element = _elementRef.nativeElement;\n      element.addEventListener('mouseenter', this._enterHandler, true);\n      element.addEventListener('focus', this._enterHandler, true);\n      element.addEventListener('mouseleave', this._leaveHandler, true);\n      element.addEventListener('blur', this._leaveHandler, true);\n    });\n  }\n\n  /** Called when a cell is clicked. */\n  _cellClicked(cell: MatCalendarCell, event: MouseEvent): void {\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    const element = this._elementRef.nativeElement;\n    element.removeEventListener('mouseenter', this._enterHandler, true);\n    element.removeEventListener('focus', this._enterHandler, true);\n    element.removeEventListener('mouseleave', this._leaveHandler, true);\n    element.removeEventListener('blur', this._leaveHandler, true);\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    this._ngZone.runOutsideAngular(() => {\n      this._ngZone.onStable.pipe(take(1)).subscribe(() => {\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    });\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    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  /**\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      // 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 (event.target && this._getCellFromElement(event.target as HTMLElement)) {\n        this._ngZone.run(() => this.previewChange.emit({value: null, event}));\n      }\n    }\n  };\n\n  /** Finds the MatCalendarCell that corresponds to a DOM node. */\n  private _getCellFromElement(element: HTMLElement): MatCalendarCell | null {\n    let cell: HTMLElement | undefined;\n\n    if (isTableCell(element)) {\n      cell = element;\n    } else if (isTableCell(element.parentNode!)) {\n      cell = element.parentNode as HTMLElement;\n    }\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  private _id = `mat-calendar-body-${calendarBodyId++}`;\n\n  _startDateLabelId = `${this._id}-start-date`;\n\n  _endDateLabelId = `${this._id}-end-date`;\n}\n\n/** Checks whether a node is a table cell element. */\nfunction isTableCell(node: Node): node is HTMLTableCellElement {\n  return node.nodeName === 'TD';\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  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<tr *ngIf=\"_firstRowOffset < labelMinRequiredCells\" 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<!-- Create the first row separately so we can include a special spacer cell. -->\n<tr *ngFor=\"let row of rows; let rowIndex = index\" role=\"row\">\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  <td *ngIf=\"rowIndex === 0 && _firstRowOffset\"\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    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  <td\n    *ngFor=\"let item of row; let colIndex = index\"\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        <div 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        </div>\n        <div class=\"mat-calendar-body-cell-preview\" aria-hidden=\"true\"></div>\n    </button>\n  </td>\n</tr>\n\n<label [id]=\"_startDateLabelId\" class=\"mat-calendar-body-hidden-label\">\n  {{startDateAccessibleName}}\n</label>\n<label [id]=\"_endDateLabelId\" class=\"mat-calendar-body-hidden-label\">\n  {{endDateAccessibleName}}\n</label>\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.io/license\n */\n\nimport {FactoryProvider, Injectable, Optional, SkipSelf, OnDestroy} from '@angular/core';\nimport {DateAdapter} from '@angular/material/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/** @docs-private */\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 */\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/** @docs-private */\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 */\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.io/license\n */\n\nimport {Injectable, InjectionToken, Optional, SkipSelf, FactoryProvider} from '@angular/core';\nimport {DateAdapter} from '@angular/material/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/** 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\n/** @docs-private */\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/** @docs-private */\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.io/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,\n  EventEmitter,\n  Inject,\n  Input,\n  Optional,\n  Output,\n  ViewEncapsulation,\n  ViewChild,\n  OnDestroy,\n  SimpleChanges,\n  OnChanges,\n} from '@angular/core';\nimport {DateAdapter, MAT_DATE_FORMATS, MatDateFormats} from '@angular/material/core';\nimport {Directionality} from '@angular/cdk/bidi';\nimport {\n  MatCalendarBody,\n  MatCalendarCell,\n  MatCalendarUserEvent,\n  MatCalendarCellClassFunction,\n} from './calendar-body';\nimport {createMissingDateImplError} from './datepicker-errors';\nimport {Subscription} from 'rxjs';\nimport {startWith} from 'rxjs/operators';\nimport {DateRange} from './date-selection-model';\nimport {\n  MatDateRangeSelectionStrategy,\n  MAT_DATE_RANGE_SELECTION_STRATEGY,\n} from './date-range-selection-strategy';\n\nconst DAYS_PER_WEEK = 7;\n\n/**\n * An internal component used to display a single month in the datepicker.\n * @docs-private\n */\n@Component({\n  selector: 'mat-month-view',\n  templateUrl: 'month-view.html',\n  exportAs: 'matMonthView',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class MatMonthView<D> implements AfterContentInit, OnChanges, OnDestroy {\n  private _rerenderSubscription = Subscription.EMPTY;\n\n  /** Flag used to filter out space/enter keyup events that originated outside of the view. */\n  private _selectionKeyPressed: boolean;\n\n  /**\n   * The date to display in this month view (everything other than the month and year is ignored).\n   */\n  @Input()\n  get activeDate(): D {\n    return this._activeDate;\n  }\n  set activeDate(value: D) {\n    const oldActiveDate = this._activeDate;\n    const validDate =\n      this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value)) ||\n      this._dateAdapter.today();\n    this._activeDate = this._dateAdapter.clampDate(validDate, this.minDate, this.maxDate);\n    if (!this._hasSameMonthAndYear(oldActiveDate, this._activeDate)) {\n      this._init();\n    }\n  }\n  private _activeDate: D;\n\n  /** The currently selected date. */\n  @Input()\n  get selected(): DateRange<D> | D | null {\n    return this._selected;\n  }\n  set selected(value: DateRange<D> | D | null) {\n    if (value instanceof DateRange) {\n      this._selected = value;\n    } else {\n      this._selected = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));\n    }\n\n    this._setRanges(this._selected);\n  }\n  private _selected: DateRange<D> | D | null;\n\n  /** The minimum selectable date. */\n  @Input()\n  get minDate(): D | null {\n    return this._minDate;\n  }\n  set minDate(value: D | null) {\n    this._minDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));\n  }\n  private _minDate: D | null;\n\n  /** The maximum selectable date. */\n  @Input()\n  get maxDate(): D | null {\n    return this._maxDate;\n  }\n  set maxDate(value: D | null) {\n    this._maxDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));\n  }\n  private _maxDate: D | null;\n\n  /** Function used to filter which dates are selectable. */\n  @Input() dateFilter: (date: D) => boolean;\n\n  /** Function that can be used to add custom CSS classes to dates. */\n  @Input() dateClass: MatCalendarCellClassFunction<D>;\n\n  /** Start of the comparison range. */\n  @Input() comparisonStart: D | null;\n\n  /** End of the comparison range. */\n  @Input() comparisonEnd: D | 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 date is selected. */\n  @Output() readonly selectedChange: EventEmitter<D | null> = new EventEmitter<D | null>();\n\n  /** Emits when any date is selected. */\n  @Output() readonly _userSelection: EventEmitter<MatCalendarUserEvent<D | null>> =\n    new EventEmitter<MatCalendarUserEvent<D | null>>();\n\n  /** Emits when any date is activated. */\n  @Output() readonly activeDateChange: EventEmitter<D> = new EventEmitter<D>();\n\n  /** The body of calendar table */\n  @ViewChild(MatCalendarBody) _matCalendarBody: MatCalendarBody;\n\n  /** The label for this month (e.g. \"January 2017\"). */\n  _monthLabel: string;\n\n  /** Grid of calendar cells representing the dates of the month. */\n  _weeks: MatCalendarCell[][];\n\n  /** The number of blank cells in the first row before the 1st of the month. */\n  _firstWeekOffset: number;\n\n  /** Start value of the currently-shown date range. */\n  _rangeStart: number | null;\n\n  /** End value of the currently-shown date range. */\n  _rangeEnd: number | null;\n\n  /** Start value of the currently-shown comparison date range. */\n  _comparisonRangeStart: number | null;\n\n  /** End value of the currently-shown comparison date range. */\n  _comparisonRangeEnd: number | null;\n\n  /** Start of the preview range. */\n  _previewStart: number | null;\n\n  /** End of the preview range. */\n  _previewEnd: number | null;\n\n  /** Whether the user is currently selecting a range of dates. */\n  _isRange: boolean;\n\n  /** The date of the month that today falls on. Null if today is in another month. */\n  _todayDate: number | null;\n\n  /** The names of the weekdays. */\n  _weekdays: {long: string; narrow: string}[];\n\n  constructor(\n    readonly _changeDetectorRef: ChangeDetectorRef,\n    @Optional() @Inject(MAT_DATE_FORMATS) private _dateFormats: MatDateFormats,\n    @Optional() public _dateAdapter: DateAdapter<D>,\n    @Optional() private _dir?: Directionality,\n    @Inject(MAT_DATE_RANGE_SELECTION_STRATEGY)\n    @Optional()\n    private _rangeStrategy?: MatDateRangeSelectionStrategy<D>,\n  ) {\n    if (typeof ngDevMode === 'undefined' || ngDevMode) {\n      if (!this._dateAdapter) {\n        throw createMissingDateImplError('DateAdapter');\n      }\n      if (!this._dateFormats) {\n        throw createMissingDateImplError('MAT_DATE_FORMATS');\n      }\n    }\n\n    this._activeDate = this._dateAdapter.today();\n  }\n\n  ngAfterContentInit() {\n    this._rerenderSubscription = this._dateAdapter.localeChanges\n      .pipe(startWith(null))\n      .subscribe(() => this._init());\n  }\n\n  ngOnChanges(changes: SimpleChanges) {\n    const comparisonChange = changes['comparisonStart'] || changes['comparisonEnd'];\n\n    if (comparisonChange && !comparisonChange.firstChange) {\n      this._setRanges(this.selected);\n    }\n  }\n\n  ngOnDestroy() {\n    this._rerenderSubscription.unsubscribe();\n  }\n\n  /** Handles when a new date is selected. */\n  _dateSelected(event: MatCalendarUserEvent<number>) {\n    const date = event.value;\n    const selectedDate = this._getDateFromDayOfMonth(date);\n    let rangeStartDate: number | null;\n    let rangeEndDate: number | null;\n\n    if (this._selected instanceof DateRange) {\n      rangeStartDate = this._getDateInCurrentMonth(this._selected.start);\n      rangeEndDate = this._getDateInCurrentMonth(this._selected.end);\n    } else {\n      rangeStartDate = rangeEndDate = this._getDateInCurrentMonth(this._selected);\n    }\n\n    if (rangeStartDate !== date || rangeEndDate !== date) {\n      this.selectedChange.emit(selectedDate);\n    }\n\n    this._userSelection.emit({value: selectedDate, event: event.event});\n    this._previewStart = this._previewEnd = null;\n    this._changeDetectorRef.markForCheck();\n  }\n\n  /**\n   * Takes the index of a calendar body cell wrapped in in an event as argument. For the date that\n   * corresponds to the given cell, set `activeDate` to that date and fire `activeDateChange` with\n   * that date.\n   *\n   * This function is used to match each component's model of the active date with the calendar\n   * body cell that was focused. It updates its value of `activeDate` synchronously and updates the\n   * parent's value asynchronously via the `activeDateChange` event. The child component receives an\n   * updated value asynchronously via the `activeCell` Input.\n   */\n  _updateActiveDate(event: MatCalendarUserEvent<number>) {\n    const month = event.value;\n    const oldActiveDate = this._activeDate;\n    this.activeDate = this._getDateFromDayOfMonth(month);\n\n    if (this._dateAdapter.compareDate(oldActiveDate, this.activeDate)) {\n      this.activeDateChange.emit(this._activeDate);\n    }\n  }\n\n  /** Handles keydown events on the calendar body when calendar is in month view. */\n  _handleCalendarBodyKeydown(event: KeyboardEvent): void {\n    // TODO(mmalerba): We currently allow keyboard navigation to disabled dates, but just prevent\n    // disabled ones from being selected. This may not be ideal, we should look into whether\n    // navigation should skip over disabled dates, and if so, how to implement that efficiently.\n\n    const oldActiveDate = this._activeDate;\n    const isRtl = this._isRtl();\n\n    switch (event.keyCode) {\n      case LEFT_ARROW:\n        this.activeDate = this._dateAdapter.addCalendarDays(this._activeDate, isRtl ? 1 : -1);\n        break;\n      case RIGHT_ARROW:\n        this.activeDate = this._dateAdapter.addCalendarDays(this._activeDate, isRtl ? -1 : 1);\n        break;\n      case UP_ARROW:\n        this.activeDate = this._dateAdapter.addCalendarDays(this._activeDate, -7);\n        break;\n      case DOWN_ARROW:\n        this.activeDate = this._dateAdapter.addCalendarDays(this._activeDate, 7);\n        break;\n      case HOME:\n        this.activeDate = this._dateAdapter.addCalendarDays(\n          this._activeDate,\n          1 - this._dateAdapter.getDate(this._activeDate),\n        );\n        break;\n      case END:\n        this.activeDate = this._dateAdapter.addCalendarDays(\n          this._activeDate,\n          this._dateAdapter.getNumDaysInMonth(this._activeDate) -\n            this._dateAdapter.getDate(this._activeDate),\n        );\n        break;\n      case PAGE_UP:\n        this.activeDate = event.altKey\n          ? this._dateAdapter.addCalendarYears(this._activeDate, -1)\n          : this._dateAdapter.addCalendarMonths(this._activeDate, -1);\n        break;\n      case PAGE_DOWN:\n        this.activeDate = event.altKey\n          ? this._dateAdapter.addCalendarYears(this._activeDate, 1)\n          : this._dateAdapter.addCalendarMonths(this._activeDate, 1);\n        break;\n      case ENTER:\n      case SPACE:\n        this._selectionKeyPressed = true;\n\n        if (this._canSelect(this._activeDate)) {\n          // Prevent unexpected default actions such as form submission.\n          // Note that we only prevent the default action here while the selection happens in\n          // `keyup` below. We can't do the selection here, because it can cause the calendar to\n          // reopen if focus is restored immediately. We also can't call `preventDefault` on `keyup`\n          // because it's too late (see #23305).\n          event.preventDefault();\n        }\n        return;\n      case ESCAPE:\n        // Abort the current range selection if the user presses escape mid-selection.\n        if (this._previewEnd != null && !hasModifierKey(event)) {\n          this._previewStart = this._previewEnd = null;\n          this.selectedChange.emit(null);\n          this._userSelection.emit({value: null, event});\n          event.preventDefault();\n          event.stopPropagation(); // Prevents the overlay from closing.\n        }\n        return;\n      default:\n        // Don't prevent default or focus active cell on keys that we don't explicitly handle.\n        return;\n    }\n\n    if (this._dateAdapter.compareDate(oldActiveDate, this.activeDate)) {\n      this.activeDateChange.emit(this.activeDate);\n\n      this._focusActiveCellAfterViewChecked();\n    }\n\n    // Prevent unexpected default actions such as form submission.\n    event.preventDefault();\n  }\n\n  /** Handles keyup events on the calendar body when calendar is in month view. */\n  _handleCalendarBodyKeyup(event: KeyboardEvent): void {\n    if (event.keyCode === SPACE || event.keyCode === ENTER) {\n      if (this._selectionKeyPressed && this._canSelect(this._activeDate)) {\n        this._dateSelected({value: this._dateAdapter.getDate(this._activeDate), event});\n      }\n\n      this._selectionKeyPressed = false;\n    }\n  }\n\n  /** Initializes this month view. */\n  _init() {\n    this._setRanges(this.selec