@cahdev-angular-material-components/datetime-picker/fesm2022/cahdev-angular-material-components-datetime-picker.mjs.map

Angular Material Datetime Picker

{"version":3,"file":"cahdev-angular-material-components-datetime-picker.mjs","sources":["../../../../projects/datetime-picker/src/lib/core/date-formats.ts","../../../../projects/datetime-picker/src/lib/core/date-adapter.ts","../../../../projects/datetime-picker/src/lib/date-selection-model.ts","../../../../projects/datetime-picker/src/lib/datepicker-errors.ts","../../../../projects/datetime-picker/src/lib/calendar-body.ts","../../../../projects/datetime-picker/src/lib/calendar-body.html","../../../../projects/datetime-picker/src/lib/date-range-selection-strategy.ts","../../../../projects/datetime-picker/src/lib/month-view.ts","../../../../projects/datetime-picker/src/lib/month-view.html","../../../../projects/datetime-picker/src/lib/multi-year-view.ts","../../../../projects/datetime-picker/src/lib/multi-year-view.html","../../../../projects/datetime-picker/src/lib/year-view.ts","../../../../projects/datetime-picker/src/lib/year-view.html","../../../../projects/datetime-picker/src/lib/datepicker-intl.ts","../../../../projects/datetime-picker/src/lib/calendar.ts","../../../../projects/datetime-picker/src/lib/calendar-header.html","../../../../projects/datetime-picker/src/lib/calendar.html","../../../../projects/datetime-picker/src/lib/core/native-date-adapter.ts","../../../../projects/datetime-picker/src/lib/core/native-date-formats.ts","../../../../projects/datetime-picker/src/lib/core/native-date.module.ts","../../../../projects/datetime-picker/src/lib/aria-accessible-name.ts","../../../../projects/datetime-picker/src/lib/datepicker-input-base.ts","../../../../projects/datetime-picker/src/lib/date-range-input-parts.ts","../../../../projects/datetime-picker/src/lib/date-range-input.ts","../../../../projects/datetime-picker/src/lib/date-range-input.html","../../../../projects/datetime-picker/src/lib/datepicker-animations.ts","../../../../projects/datetime-picker/src/lib/utils/date-utils.ts","../../../../projects/datetime-picker/src/lib/timepicker.component.ts","../../../../projects/datetime-picker/src/lib/timepicker.component.html","../../../../projects/datetime-picker/src/lib/datepicker-base.ts","../../../../projects/datetime-picker/src/lib/datepicker-content.html","../../../../projects/datetime-picker/src/lib/date-range-picker.ts","../../../../projects/datetime-picker/src/lib/datepicker.ts","../../../../projects/datetime-picker/src/lib/datepicker-actions.ts","../../../../projects/datetime-picker/src/lib/datepicker-input.ts","../../../../projects/datetime-picker/src/lib/datepicker-toggle.ts","../../../../projects/datetime-picker/src/lib/datepicker-toggle.html","../../../../projects/datetime-picker/src/lib/timepicker.module.ts","../../../../projects/datetime-picker/src/lib/datepicker-module.ts","../../../../projects/datetime-picker/src/public-api.ts","../../../../projects/datetime-picker/src/cahdev-angular-material-components-datetime-picker.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\r\n\r\n\r\nexport type NgxMatDateFormats = {\r\n\tparse: {\r\n\t\tdateInput: any;\r\n\t};\r\n\tdisplay: {\r\n\t\tdateInput: any;\r\n\t\tmonthLabel?: any;\r\n\t\tmonthYearLabel: any;\r\n\t\tdateA11yLabel: any;\r\n\t\tmonthYearA11yLabel: any;\r\n\t};\r\n};\r\n\r\nexport const NGX_MAT_DATE_FORMATS = new InjectionToken<NgxMatDateFormats>('ngx-mat-date-formats');\r\n","import { DateAdapter } from '@angular/material/core';\r\n\r\nexport abstract class NgxMatDateAdapter<D> extends DateAdapter<D> {\r\n  /**\r\n * Gets the hour component of the given date.\r\n * @param date The date to extract the month from.\r\n * @returns The hour component.\r\n */\r\n  abstract getHour(date: D): number;\r\n\r\n  /**\r\n* Gets the minute component of the given date.\r\n* @param date The date to extract the month from.\r\n* @returns The minute component.\r\n*/\r\n  abstract getMinute(date: D): number;\r\n\r\n  /**\r\n  * Gets the second component of the given date.\r\n  * @param date The date to extract the month from.\r\n  * @returns The second component.\r\n  */\r\n  abstract getSecond(date: D): number;\r\n\r\n  /**\r\n  * Set the hour component of the given date.\r\n  * @param date The date to extract the month from.\r\n  * @param value The value to set.\r\n  */\r\n  abstract setHour(date: D, value: number): void;\r\n\r\n  /**\r\n  * Set the second component of the given date.\r\n  * @param date The date to extract the month from.\r\n  * @param value The value to set.\r\n  */\r\n  abstract setMinute(date: D, value: number): void;\r\n\r\n  /**\r\n   * Set the second component of the given date.\r\n   * @param date The date to extract the month from.\r\n   * @param value The value to set.\r\n   */\r\n  abstract setSecond(date: D, value: number): void;\r\n\r\n  /**\r\n   * Check if two date have same time\r\n   * @param a Date 1\r\n   * @param b Date 2\r\n   */\r\n  isSameTime(a: D, b: D): boolean {\r\n    if (a == null || b == null) return true;\r\n    return this.getHour(a) === this.getHour(b)\r\n      && this.getMinute(a) === this.getMinute(b)\r\n      && this.getSecond(a) === this.getSecond(b);\r\n  }\r\n\r\n  /**\r\n   * Copy time from a date to a another date\r\n   * @param toDate \r\n   * @param fromDate \r\n   */\r\n  copyTime(toDate: D, fromDate: D) {\r\n    this.setHour(toDate, this.getHour(fromDate));\r\n    this.setMinute(toDate, this.getMinute(fromDate));\r\n    this.setSecond(toDate, this.getSecond(fromDate));\r\n  }\r\n\r\n  /**\r\n * Compares two dates.\r\n * @param first The first date to compare.\r\n * @param second The second date to compare.\r\n * @returns 0 if the dates are equal, a number less than 0 if the first date is earlier,\r\n *     a number greater than 0 if the first date is later.\r\n */\r\n  compareDateWithTime(first: D, second: D, showSeconds?: boolean): number {\r\n    let res = super.compareDate(first, second) ||\r\n      this.getHour(first) - this.getHour(second) ||\r\n      this.getMinute(first) - this.getMinute(second);\r\n    if (showSeconds) {\r\n      res = res || this.getSecond(first) - this.getSecond(second);\r\n    }\r\n    return res;\r\n  }\r\n\r\n  /**\r\n   * Set time by using default values\r\n   * @param defaultTime List default values [hour, minute, second]\r\n   */\r\n  setTimeByDefaultValues(date: D, defaultTime: number[]) {\r\n    if (!Array.isArray(defaultTime)) {\r\n      throw Error('@Input DefaultTime should be an array');\r\n    }\r\n    this.setHour(date, defaultTime[0] || 0);\r\n    this.setMinute(date, defaultTime[1] || 0);\r\n    this.setSecond(date, defaultTime[2] || 0);\r\n  }\r\n\r\n}\r\n","\r\n\r\nimport { FactoryProvider, Injectable, OnDestroy, Optional, SkipSelf } from '@angular/core';\r\nimport { Observable, Subject } from 'rxjs';\r\nimport { NgxMatDateAdapter } from './core/date-adapter';\r\n\r\n/** A class representing a range of dates. */\r\nexport class NgxDateRange<D> {\r\n  /**\r\n   * Ensures that objects with a `start` and `end` property can't be assigned to a variable that\r\n   * expects a `DateRange`\r\n   */\r\n  // tslint:disable-next-line:no-unused-variable\r\n  private _disableStructuralEquivalency: never;\r\n\r\n  constructor(\r\n    /** The start date of the range. */\r\n    readonly start: D | null,\r\n    /** The end date of the range. */\r\n    readonly end: D | null,\r\n  ) { }\r\n}\r\n\r\n/**\r\n * Conditionally picks the date type, if a DateRange is passed in.\r\n * @docs-private\r\n */\r\nexport type NgxExtractDateTypeFromSelection<T> = T extends NgxDateRange<infer D> ? D : NonNullable<T>;\r\n\r\n/**\r\n * Event emitted by the date selection model when its selection changes.\r\n * @docs-private\r\n */\r\nexport interface NgxDateSelectionModelChange<S> {\r\n  /** New value for the selection. */\r\n  selection: S;\r\n\r\n  /** Object that triggered the change. */\r\n  source: unknown;\r\n\r\n  /** Previous value */\r\n  oldValue?: S;\r\n}\r\n\r\n/**\r\n * A selection model containing a date selection.\r\n * @docs-private\r\n */\r\n@Injectable()\r\nexport abstract class NgxMatDateSelectionModel<S, D = NgxExtractDateTypeFromSelection<S>>\r\n  implements OnDestroy {\r\n  private readonly _selectionChanged = new Subject<NgxDateSelectionModelChange<S>>();\r\n\r\n  /** Emits when the selection has changed. */\r\n  selectionChanged: Observable<NgxDateSelectionModelChange<S>> = this._selectionChanged;\r\n\r\n  protected constructor(\r\n    /** The current selection. */\r\n    readonly selection: S,\r\n    protected _adapter: NgxMatDateAdapter<D>,\r\n  ) {\r\n    this.selection = selection;\r\n  }\r\n\r\n  /**\r\n   * Updates the current selection in the model.\r\n   * @param value New selection that should be assigned.\r\n   * @param source Object that triggered the selection change.\r\n   */\r\n  updateSelection(value: S, source: unknown) {\r\n    const oldValue = (this as { selection: S }).selection;\r\n    (this as { selection: S }).selection = value;\r\n    this._selectionChanged.next({ selection: value, source, oldValue });\r\n  }\r\n\r\n  ngOnDestroy() {\r\n    this._selectionChanged.complete();\r\n  }\r\n\r\n  protected _isValidDateInstance(date: D): boolean {\r\n    return this._adapter.isDateInstance(date) && this._adapter.isValid(date);\r\n  }\r\n\r\n  /** Adds a date to the current selection. */\r\n  abstract add(date: D | null): void;\r\n\r\n  /** Checks whether the current selection is valid. */\r\n  abstract isValid(): boolean;\r\n\r\n  /** Checks whether the current selection is complete. */\r\n  abstract isComplete(): boolean;\r\n\r\n  /** Clones the selection model. */\r\n  abstract clone(): NgxMatDateSelectionModel<S, D>;\r\n}\r\n\r\n/**\r\n * A selection model that contains a single date.\r\n * @docs-private\r\n */\r\n@Injectable()\r\nexport class NgxMatSingleDateSelectionModel<D> extends NgxMatDateSelectionModel<D | null, D> {\r\n  constructor(adapter: NgxMatDateAdapter<D>) {\r\n    super(null, adapter);\r\n  }\r\n\r\n  /**\r\n   * Adds a date to the current selection. In the case of a single date selection, the added date\r\n   * simply overwrites the previous selection\r\n   */\r\n  add(date: D | null) {\r\n    super.updateSelection(date, this);\r\n  }\r\n\r\n  /** Checks whether the current selection is valid. */\r\n  isValid(): boolean {\r\n    return this.selection != null && this._isValidDateInstance(this.selection);\r\n  }\r\n\r\n  /**\r\n   * Checks whether the current selection is complete. In the case of a single date selection, this\r\n   * is true if the current selection is not null.\r\n   */\r\n  isComplete() {\r\n    return this.selection != null;\r\n  }\r\n\r\n  /** Clones the selection model. */\r\n  clone() {\r\n    const clone = new NgxMatSingleDateSelectionModel<D>(this._adapter);\r\n    clone.updateSelection(this.selection, this);\r\n    return clone;\r\n  }\r\n}\r\n\r\n/**\r\n * A selection model that contains a date range.\r\n * @docs-private\r\n */\r\n@Injectable()\r\nexport class NgxMatRangeDateSelectionModel<D> extends NgxMatDateSelectionModel<NgxDateRange<D>, D> {\r\n  constructor(adapter: NgxMatDateAdapter<D>) {\r\n    super(new NgxDateRange<D>(null, null), adapter);\r\n  }\r\n\r\n  /**\r\n   * Adds a date to the current selection. In the case of a date range selection, the added date\r\n   * fills in the next `null` value in the range. If both the start and the end already have a date,\r\n   * the selection is reset so that the given date is the new `start` and the `end` is null.\r\n   */\r\n  add(date: D | null): void {\r\n    let { start, end } = this.selection;\r\n\r\n    if (start == null) {\r\n      start = date;\r\n    } else if (end == null) {\r\n      end = date;\r\n    } else {\r\n      start = date;\r\n      end = null;\r\n    }\r\n\r\n    super.updateSelection(new NgxDateRange<D>(start, end), this);\r\n  }\r\n\r\n  /** Checks whether the current selection is valid. */\r\n  isValid(): boolean {\r\n    const { start, end } = this.selection;\r\n\r\n    // Empty ranges are valid.\r\n    if (start == null && end == null) {\r\n      return true;\r\n    }\r\n\r\n    // Complete ranges are only valid if both dates are valid and the start is before the end.\r\n    if (start != null && end != null) {\r\n      return (\r\n        this._isValidDateInstance(start) &&\r\n        this._isValidDateInstance(end) &&\r\n        this._adapter.compareDate(start, end) <= 0\r\n      );\r\n    }\r\n\r\n    // Partial ranges are valid if the start/end is valid.\r\n    return (\r\n      (start == null || this._isValidDateInstance(start)) &&\r\n      (end == null || this._isValidDateInstance(end))\r\n    );\r\n  }\r\n\r\n  /**\r\n   * Checks whether the current selection is complete. In the case of a date range selection, this\r\n   * is true if the current selection has a non-null `start` and `end`.\r\n   */\r\n  isComplete(): boolean {\r\n    return this.selection.start != null && this.selection.end != null;\r\n  }\r\n\r\n  /** Clones the selection model. */\r\n  clone() {\r\n    const clone = new NgxMatRangeDateSelectionModel<D>(this._adapter);\r\n    clone.updateSelection(this.selection, this);\r\n    return clone;\r\n  }\r\n}\r\n\r\n/** @docs-private */\r\nexport function NGX_MAT_SINGLE_DATE_SELECTION_MODEL_FACTORY(\r\n  parent: NgxMatSingleDateSelectionModel<unknown>,\r\n  adapter: NgxMatDateAdapter<unknown>,\r\n) {\r\n  return parent || new NgxMatSingleDateSelectionModel(adapter);\r\n}\r\n\r\n/**\r\n * Used to provide a single selection model to a component.\r\n * @docs-private\r\n */\r\nexport const NGX_MAT_SINGLE_DATE_SELECTION_MODEL_PROVIDER: FactoryProvider = {\r\n  provide: NgxMatDateSelectionModel,\r\n  deps: [[new Optional(), new SkipSelf(), NgxMatDateSelectionModel], NgxMatDateAdapter],\r\n  useFactory: NGX_MAT_SINGLE_DATE_SELECTION_MODEL_FACTORY,\r\n};\r\n\r\n/** @docs-private */\r\nexport function NGX_MAT_RANGE_DATE_SELECTION_MODEL_FACTORY(\r\n  parent: NgxMatSingleDateSelectionModel<unknown>,\r\n  adapter: NgxMatDateAdapter<unknown>,\r\n) {\r\n  return parent || new NgxMatRangeDateSelectionModel(adapter);\r\n}\r\n\r\n/**\r\n * Used to provide a range selection model to a component.\r\n * @docs-private\r\n */\r\nexport const NGX_MAT_RANGE_DATE_SELECTION_MODEL_PROVIDER: FactoryProvider = {\r\n  provide: NgxMatDateSelectionModel,\r\n  deps: [[new Optional(), new SkipSelf(), NgxMatDateSelectionModel], NgxMatDateAdapter],\r\n  useFactory: NGX_MAT_RANGE_DATE_SELECTION_MODEL_FACTORY,\r\n};\r\n","\r\n\r\n/** @docs-private */\r\nexport function createMissingDateImplError(provider: string) {\r\n  return Error(\r\n    `NgxMatDatetimePicker: No provider found for ${provider}. You must import one of the following ` +\r\n      `modules at your application root: NgxMatNativeDateModule, NgxMatMomentDateModule, or provide a ` +\r\n      `custom implementation.`,\r\n  );\r\n}\r\n","import {Platform} from '@angular/cdk/platform';\r\nimport {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  ElementRef,\r\n  EventEmitter,\r\n  Input,\r\n  Output,\r\n  ViewEncapsulation,\r\n  NgZone,\r\n  OnChanges,\r\n  SimpleChanges,\r\n  OnDestroy,\r\n  AfterViewChecked,\r\n  inject,\r\n} from '@angular/core';\r\nimport {take} from 'rxjs/operators';\r\n\r\n/** Extra CSS classes that can be associated with a calendar cell. */\r\nexport type NgxMatCalendarCellCssClasses = string | string[] | Set<string> | {[key: string]: any};\r\n\r\n/** Function that can generate the extra classes that should be added to a calendar cell. */\r\nexport type NgxMatCalendarCellClassFunction<D> = (\r\n  date: D,\r\n  view: 'month' | 'year' | 'multi-year',\r\n) => NgxMatCalendarCellCssClasses;\r\n\r\n/**\r\n * An internal class that represents the data corresponding to a single calendar cell.\r\n * @docs-private\r\n */\r\nexport class NgxMatCalendarCell<D = any> {\r\n  constructor(\r\n    public value: number,\r\n    public displayValue: string,\r\n    public ariaLabel: string,\r\n    public enabled: boolean,\r\n    public cssClasses: NgxMatCalendarCellCssClasses = {},\r\n    public compareValue = value,\r\n    public rawValue?: D,\r\n  ) {}\r\n}\r\n\r\n/** Event emitted when a date inside the calendar is triggered as a result of a user action. */\r\nexport interface NgxMatCalendarUserEvent<D> {\r\n  value: D;\r\n  event: Event;\r\n}\r\n\r\nlet calendarBodyId = 1;\r\n\r\n@Component({\r\n  selector: '[ngx-mat-calendar-body]',\r\n  templateUrl: 'calendar-body.html',\r\n  styleUrls: ['calendar-body.scss'],\r\n  host: {\r\n    'class': 'ngx-mat-calendar-body',\r\n  },\r\n  exportAs: 'matCalendarBody',\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class NgxMatCalendarBody<D = any> implements OnChanges, OnDestroy, AfterViewChecked {\r\n  private _platform = inject(Platform);\r\n\r\n  /**\r\n   * Used to skip the next focus event when rendering the preview range.\r\n   * We need a flag like this, because some browsers fire focus events asynchronously.\r\n   */\r\n  private _skipNextFocus: boolean;\r\n\r\n  /**\r\n   * Used to focus the active cell after change detection has run.\r\n   */\r\n  private _focusActiveCellAfterViewChecked = false;\r\n\r\n  /** The label for the table. (e.g. \"Jan 2017\"). */\r\n  @Input() label: string;\r\n\r\n  /** The cells to display in the table. */\r\n  @Input() rows: NgxMatCalendarCell[][];\r\n\r\n  /** The value in the table that corresponds to today. */\r\n  @Input() todayValue: number;\r\n\r\n  /** Start value of the selected date range. */\r\n  @Input() startValue: number;\r\n\r\n  /** End value of the selected date range. */\r\n  @Input() endValue: number;\r\n\r\n  /** The minimum number of free cells needed to fit the label in the first row. */\r\n  @Input() labelMinRequiredCells: number;\r\n\r\n  /** The number of columns in the table. */\r\n  @Input() numCols: number = 7;\r\n\r\n  /** The cell number of the active cell in the table. */\r\n  @Input() activeCell: number = 0;\r\n\r\n  ngAfterViewChecked() {\r\n    if (this._focusActiveCellAfterViewChecked) {\r\n      this._focusActiveCell();\r\n      this._focusActiveCellAfterViewChecked = false;\r\n    }\r\n  }\r\n\r\n  /** Whether a range is being selected. */\r\n  @Input() isRange: boolean = false;\r\n\r\n  /**\r\n   * The aspect ratio (width / height) to use for the cells in the table. This aspect ratio will be\r\n   * maintained even as the table resizes.\r\n   */\r\n  @Input() cellAspectRatio: number = 1;\r\n\r\n  /** Start of the comparison range. */\r\n  @Input() comparisonStart: number | null;\r\n\r\n  /** End of the comparison range. */\r\n  @Input() comparisonEnd: number | null;\r\n\r\n  /** Start of the preview range. */\r\n  @Input() previewStart: number | null = null;\r\n\r\n  /** End of the preview range. */\r\n  @Input() previewEnd: number | null = null;\r\n\r\n  /** ARIA Accessible name of the `<input matStartDate/>` */\r\n  @Input() startDateAccessibleName: string | null;\r\n\r\n  /** ARIA Accessible name of the `<input matEndDate/>` */\r\n  @Input() endDateAccessibleName: string | null;\r\n\r\n  /** Emits when a new value is selected. */\r\n  @Output() readonly selectedValueChange = new EventEmitter<NgxMatCalendarUserEvent<number>>();\r\n\r\n  /** Emits when the preview has changed as a result of a user action. */\r\n  @Output() readonly previewChange = new EventEmitter<\r\n    NgxMatCalendarUserEvent<NgxMatCalendarCell | null>\r\n  >();\r\n\r\n  @Output() readonly activeDateChange = new EventEmitter<NgxMatCalendarUserEvent<number>>();\r\n\r\n  /** Emits the date at the possible start of a drag event. */\r\n  @Output() readonly dragStarted = new EventEmitter<NgxMatCalendarUserEvent<D>>();\r\n\r\n  /** Emits the date at the conclusion of a drag, or null if mouse was not released on a date. */\r\n  @Output() readonly dragEnded = new EventEmitter<NgxMatCalendarUserEvent<D | null>>();\r\n\r\n  /** The number of blank cells to put at the beginning for the first row. */\r\n  _firstRowOffset: number;\r\n\r\n  /** Padding for the individual date cells. */\r\n  _cellPadding: string;\r\n\r\n  /** Width of an individual cell. */\r\n  _cellWidth: string;\r\n\r\n  private _didDragSinceMouseDown = false;\r\n\r\n  constructor(private _elementRef: ElementRef<HTMLElement>, private _ngZone: NgZone) {\r\n    _ngZone.runOutsideAngular(() => {\r\n      const element = _elementRef.nativeElement;\r\n      element.addEventListener('mouseenter', this._enterHandler, true);\r\n      element.addEventListener('touchmove', this._touchmoveHandler, true);\r\n      element.addEventListener('focus', this._enterHandler, true);\r\n      element.addEventListener('mouseleave', this._leaveHandler, true);\r\n      element.addEventListener('blur', this._leaveHandler, true);\r\n      element.addEventListener('mousedown', this._mousedownHandler);\r\n      element.addEventListener('touchstart', this._mousedownHandler);\r\n\r\n      if (this._platform.isBrowser) {\r\n        window.addEventListener('mouseup', this._mouseupHandler);\r\n        window.addEventListener('touchend', this._touchendHandler);\r\n      }\r\n    });\r\n  }\r\n\r\n  /** Called when a cell is clicked. */\r\n  _cellClicked(cell: NgxMatCalendarCell, event: MouseEvent): void {\r\n    // Ignore \"clicks\" that are actually canceled drags (eg the user dragged\r\n    // off and then went back to this cell to undo).\r\n    if (this._didDragSinceMouseDown) {\r\n      return;\r\n    }\r\n\r\n    if (cell.enabled) {\r\n      this.selectedValueChange.emit({value: cell.value, event});\r\n    }\r\n  }\r\n\r\n  _emitActiveDateChange(cell: NgxMatCalendarCell, event: FocusEvent): void {\r\n    if (cell.enabled) {\r\n      this.activeDateChange.emit({value: cell.value, event});\r\n    }\r\n  }\r\n\r\n  /** Returns whether a cell should be marked as selected. */\r\n  _isSelected(value: number) {\r\n    return this.startValue === value || this.endValue === value;\r\n  }\r\n\r\n  ngOnChanges(changes: SimpleChanges) {\r\n    const columnChanges = changes['numCols'];\r\n    const {rows, numCols} = this;\r\n\r\n    if (changes['rows'] || columnChanges) {\r\n      this._firstRowOffset = rows && rows.length && rows[0].length ? numCols - rows[0].length : 0;\r\n    }\r\n\r\n    if (changes['cellAspectRatio'] || columnChanges || !this._cellPadding) {\r\n      this._cellPadding = `${(50 * this.cellAspectRatio) / numCols}%`;\r\n    }\r\n\r\n    if (columnChanges || !this._cellWidth) {\r\n      this._cellWidth = `${100 / numCols}%`;\r\n    }\r\n  }\r\n\r\n  ngOnDestroy() {\r\n    const element = this._elementRef.nativeElement;\r\n    element.removeEventListener('mouseenter', this._enterHandler, true);\r\n    element.removeEventListener('touchmove', this._touchmoveHandler, true);\r\n    element.removeEventListener('focus', this._enterHandler, true);\r\n    element.removeEventListener('mouseleave', this._leaveHandler, true);\r\n    element.removeEventListener('blur', this._leaveHandler, true);\r\n    element.removeEventListener('mousedown', this._mousedownHandler);\r\n    element.removeEventListener('touchstart', this._mousedownHandler);\r\n\r\n    if (this._platform.isBrowser) {\r\n      window.removeEventListener('mouseup', this._mouseupHandler);\r\n      window.removeEventListener('touchend', this._touchendHandler);\r\n    }\r\n  }\r\n\r\n  /** Returns whether a cell is active. */\r\n  _isActiveCell(rowIndex: number, colIndex: number): boolean {\r\n    let cellNumber = rowIndex * this.numCols + colIndex;\r\n\r\n    // Account for the fact that the first row may not have as many cells.\r\n    if (rowIndex) {\r\n      cellNumber -= this._firstRowOffset;\r\n    }\r\n\r\n    return cellNumber == this.activeCell;\r\n  }\r\n\r\n  _focusActiveCell(movePreview = true) {\r\n    this._ngZone.runOutsideAngular(() => {\r\n      this._ngZone.onStable.pipe(take(1)).subscribe(() => {\r\n        setTimeout(() => {\r\n          const activeCell: HTMLElement | null = this._elementRef.nativeElement.querySelector(\r\n            '.mat-calendar-body-active',\r\n          );\r\n\r\n          if (activeCell) {\r\n            if (!movePreview) {\r\n              this._skipNextFocus = true;\r\n            }\r\n\r\n            activeCell.focus();\r\n          }\r\n        });\r\n      });\r\n    });\r\n  }\r\n\r\n  /** Focuses the active cell after change detection has run and the microtask queue is empty. */\r\n  _scheduleFocusActiveCellAfterViewChecked() {\r\n    this._focusActiveCellAfterViewChecked = true;\r\n  }\r\n\r\n  /** Gets whether a value is the start of the main range. */\r\n  _isRangeStart(value: number) {\r\n    return isStart(value, this.startValue, this.endValue);\r\n  }\r\n\r\n  /** Gets whether a value is the end of the main range. */\r\n  _isRangeEnd(value: number) {\r\n    return isEnd(value, this.startValue, this.endValue);\r\n  }\r\n\r\n  /** Gets whether a value is within the currently-selected range. */\r\n  _isInRange(value: number): boolean {\r\n    return isInRange(value, this.startValue, this.endValue, this.isRange);\r\n  }\r\n\r\n  /** Gets whether a value is the start of the comparison range. */\r\n  _isComparisonStart(value: number) {\r\n    return isStart(value, this.comparisonStart, this.comparisonEnd);\r\n  }\r\n\r\n  /** Whether the cell is a start bridge cell between the main and comparison ranges. */\r\n  _isComparisonBridgeStart(value: number, rowIndex: number, colIndex: number) {\r\n    if (!this._isComparisonStart(value) || this._isRangeStart(value) || !this._isInRange(value)) {\r\n      return false;\r\n    }\r\n\r\n    let previousCell: NgxMatCalendarCell | undefined = this.rows[rowIndex][colIndex - 1];\r\n\r\n    if (!previousCell) {\r\n      const previousRow = this.rows[rowIndex - 1];\r\n      previousCell = previousRow && previousRow[previousRow.length - 1];\r\n    }\r\n\r\n    return previousCell && !this._isRangeEnd(previousCell.compareValue);\r\n  }\r\n\r\n  /** Whether the cell is an end bridge cell between the main and comparison ranges. */\r\n  _isComparisonBridgeEnd(value: number, rowIndex: number, colIndex: number) {\r\n    if (!this._isComparisonEnd(value) || this._isRangeEnd(value) || !this._isInRange(value)) {\r\n      return false;\r\n    }\r\n\r\n    let nextCell: NgxMatCalendarCell | undefined = this.rows[rowIndex][colIndex + 1];\r\n\r\n    if (!nextCell) {\r\n      const nextRow = this.rows[rowIndex + 1];\r\n      nextCell = nextRow && nextRow[0];\r\n    }\r\n\r\n    return nextCell && !this._isRangeStart(nextCell.compareValue);\r\n  }\r\n\r\n  /** Gets whether a value is the end of the comparison range. */\r\n  _isComparisonEnd(value: number) {\r\n    return isEnd(value, this.comparisonStart, this.comparisonEnd);\r\n  }\r\n\r\n  /** Gets whether a value is within the current comparison range. */\r\n  _isInComparisonRange(value: number) {\r\n    return isInRange(value, this.comparisonStart, this.comparisonEnd, this.isRange);\r\n  }\r\n\r\n  _isComparisonIdentical(value: number) {\r\n    // Note that we don't need to null check the start/end\r\n    // here, because the `value` will always be defined.\r\n    return this.comparisonStart === this.comparisonEnd && value === this.comparisonStart;\r\n  }\r\n\r\n  /** Gets whether a value is the start of the preview range. */\r\n  _isPreviewStart(value: number) {\r\n    return isStart(value, this.previewStart, this.previewEnd);\r\n  }\r\n\r\n  /** Gets whether a value is the end of the preview range. */\r\n  _isPreviewEnd(value: number) {\r\n    return isEnd(value, this.previewStart, this.previewEnd);\r\n  }\r\n\r\n  /** Gets whether a value is inside the preview range. */\r\n  _isInPreview(value: number) {\r\n    return isInRange(value, this.previewStart, this.previewEnd, this.isRange);\r\n  }\r\n\r\n  /** Gets ids of aria descriptions for the start and end of a date range. */\r\n  _getDescribedby(value: number): string | null {\r\n    if (!this.isRange) {\r\n      return null;\r\n    }\r\n\r\n    if (this.startValue === value && this.endValue === value) {\r\n      return `${this._startDateLabelId} ${this._endDateLabelId}`;\r\n    } else if (this.startValue === value) {\r\n      return this._startDateLabelId;\r\n    } else if (this.endValue === value) {\r\n      return this._endDateLabelId;\r\n    }\r\n    return null;\r\n  }\r\n\r\n  /**\r\n   * Event handler for when the user enters an element\r\n   * inside the calendar body (e.g. by hovering in or focus).\r\n   */\r\n  private _enterHandler = (event: Event) => {\r\n    if (this._skipNextFocus && event.type === 'focus') {\r\n      this._skipNextFocus = false;\r\n      return;\r\n    }\r\n\r\n    // We only need to hit the zone when we're selecting a range.\r\n    if (event.target && this.isRange) {\r\n      const cell = this._getCellFromElement(event.target as HTMLElement);\r\n\r\n      if (cell) {\r\n        this._ngZone.run(() => this.previewChange.emit({value: cell.enabled ? cell : null, event}));\r\n      }\r\n    }\r\n  };\r\n\r\n  private _touchmoveHandler = (event: TouchEvent) => {\r\n    if (!this.isRange) return;\r\n\r\n    const target = getActualTouchTarget(event);\r\n    const cell = target ? this._getCellFromElement(target as HTMLElement) : null;\r\n\r\n    if (target !== event.target) {\r\n      this._didDragSinceMouseDown = true;\r\n    }\r\n\r\n    // If the initial target of the touch is a date cell, prevent default so\r\n    // that the move is not handled as a scroll.\r\n    if (getCellElement(event.target as HTMLElement)) {\r\n      event.preventDefault();\r\n    }\r\n\r\n    this._ngZone.run(() => this.previewChange.emit({value: cell?.enabled ? cell : null, event}));\r\n  };\r\n\r\n  /**\r\n   * Event handler for when the user's pointer leaves an element\r\n   * inside the calendar body (e.g. by hovering out or blurring).\r\n   */\r\n  private _leaveHandler = (event: Event) => {\r\n    // We only need to hit the zone when we're selecting a range.\r\n    if (this.previewEnd !== null && this.isRange) {\r\n      if (event.type !== 'blur') {\r\n        this._didDragSinceMouseDown = true;\r\n      }\r\n\r\n      // Only reset the preview end value when leaving cells. This looks better, because\r\n      // we have a gap between the cells and the rows and we don't want to remove the\r\n      // range just for it to show up again when the user moves a few pixels to the side.\r\n      if (\r\n        event.target &&\r\n        this._getCellFromElement(event.target as HTMLElement) &&\r\n        !(\r\n          (event as MouseEvent).relatedTarget &&\r\n          this._getCellFromElement((event as MouseEvent).relatedTarget as HTMLElement)\r\n        )\r\n      ) {\r\n        this._ngZone.run(() => this.previewChange.emit({value: null, event}));\r\n      }\r\n    }\r\n  };\r\n\r\n  /**\r\n   * Triggered on mousedown or touchstart on a date cell.\r\n   * Respsonsible for starting a drag sequence.\r\n   */\r\n  private _mousedownHandler = (event: Event) => {\r\n    if (!this.isRange) return;\r\n\r\n    this._didDragSinceMouseDown = false;\r\n    // Begin a drag if a cell within the current range was targeted.\r\n    const cell = event.target && this._getCellFromElement(event.target as HTMLElement);\r\n    if (!cell || !this._isInRange(cell.rawValue)) {\r\n      return;\r\n    }\r\n\r\n    this._ngZone.run(() => {\r\n      this.dragStarted.emit({\r\n        value: cell.rawValue,\r\n        event,\r\n      });\r\n    });\r\n  };\r\n\r\n  /** Triggered on mouseup anywhere. Respsonsible for ending a drag sequence. */\r\n  private _mouseupHandler = (event: Event) => {\r\n    if (!this.isRange) return;\r\n\r\n    const cellElement = getCellElement(event.target as HTMLElement);\r\n    if (!cellElement) {\r\n      // Mouseup happened outside of datepicker. Cancel drag.\r\n      this._ngZone.run(() => {\r\n        this.dragEnded.emit({value: null, event});\r\n      });\r\n      return;\r\n    }\r\n\r\n    if (cellElement.closest('.mat-calendar-body') !== this._elementRef.nativeElement) {\r\n      // Mouseup happened inside a different month instance.\r\n      // Allow it to handle the event.\r\n      return;\r\n    }\r\n\r\n    this._ngZone.run(() => {\r\n      const cell = this._getCellFromElement(cellElement);\r\n      this.dragEnded.emit({value: cell?.rawValue ?? null, event});\r\n    });\r\n  };\r\n\r\n  /** Triggered on touchend anywhere. Respsonsible for ending a drag sequence. */\r\n  private _touchendHandler = (event: TouchEvent) => {\r\n    const target = getActualTouchTarget(event);\r\n\r\n    if (target) {\r\n      this._mouseupHandler({target} as unknown as Event);\r\n    }\r\n  };\r\n\r\n  /** Finds the MatCalendarCell that corresponds to a DOM node. */\r\n  private _getCellFromElement(element: HTMLElement): NgxMatCalendarCell | null {\r\n    const cell = getCellElement(element);\r\n\r\n    if (cell) {\r\n      const row = cell.getAttribute('data-mat-row');\r\n      const col = cell.getAttribute('data-mat-col');\r\n\r\n      if (row && col) {\r\n        return this.rows[parseInt(row)][parseInt(col)];\r\n      }\r\n    }\r\n\r\n    return null;\r\n  }\r\n\r\n  private _id = `mat-calendar-body-${calendarBodyId++}`;\r\n\r\n  _startDateLabelId = `${this._id}-start-date`;\r\n\r\n  _endDateLabelId = `${this._id}-end-date`;\r\n}\r\n\r\n/** Checks whether a node is a table cell element. */\r\nfunction isTableCell(node: Node | undefined | null): node is HTMLTableCellElement {\r\n  return node?.nodeName === 'TD';\r\n}\r\n\r\n/**\r\n * Gets the date table cell element that is or contains the specified element.\r\n * Or returns null if element is not part of a date cell.\r\n */\r\nfunction getCellElement(element: HTMLElement): HTMLElement | null {\r\n  let cell: HTMLElement | undefined;\r\n  if (isTableCell(element)) {\r\n    cell = element;\r\n  } else if (isTableCell(element.parentNode)) {\r\n    cell = element.parentNode as HTMLElement;\r\n  } else if (isTableCell(element.parentNode?.parentNode)) {\r\n    cell = element.parentNode!.parentNode as HTMLElement;\r\n  }\r\n\r\n  return cell?.getAttribute('data-mat-row') != null ? cell : null;\r\n}\r\n\r\n/** Checks whether a value is the start of a range. */\r\nfunction isStart(value: number, start: number | null, end: number | null): boolean {\r\n  return end !== null && start !== end && value < end && value === start;\r\n}\r\n\r\n/** Checks whether a value is the end of a range. */\r\nfunction isEnd(value: number, start: number | null, end: number | null): boolean {\r\n  return start !== null && start !== end && value >= start && value === end;\r\n}\r\n\r\n/** Checks whether a value is inside of a range. */\r\nfunction isInRange(\r\n  value: number,\r\n  start: number | null,\r\n  end: number | null,\r\n  rangeEnabled: boolean,\r\n): boolean {\r\n  return (\r\n    rangeEnabled &&\r\n    start !== null &&\r\n    end !== null &&\r\n    start !== end &&\r\n    value >= start &&\r\n    value <= end\r\n  );\r\n}\r\n\r\n/**\r\n * Extracts the element that actually corresponds to a touch event's location\r\n * (rather than the element that initiated the sequence of touch events).\r\n */\r\nfunction getActualTouchTarget(event: TouchEvent): Element | null {\r\n  const touchLocation = event.changedTouches[0];\r\n  return document.elementFromPoint(touchLocation.clientX, touchLocation.clientY);\r\n}\r\n","<!--\r\n  If there's not enough space in the first row, create a separate label row. We mark this row as\r\n  aria-hidden because we don't want it to be read out as one of the weeks in the month.\r\n-->\r\n<tr *ngIf=\"_firstRowOffset < labelMinRequiredCells\" aria-hidden=\"true\">\r\n  <td class=\"mat-calendar-body-label\"\r\n      [attr.colspan]=\"numCols\"\r\n      [style.paddingTop]=\"_cellPadding\"\r\n      [style.paddingBottom]=\"_cellPadding\">\r\n    {{label}}\r\n  </td>\r\n</tr>\r\n\r\n<!-- Create the first row separately so we can include a special spacer cell. -->\r\n<tr *ngFor=\"let row of rows; let rowIndex = index\" role=\"row\">\r\n  <!--\r\n    This cell is purely decorative, but we can't put `aria-hidden` or `role=\"presentation\"` on it,\r\n    because it throws off the week days for the rest of the row on NVDA. The aspect ratio of the\r\n    table cells is maintained by setting the top and bottom padding as a percentage of the width\r\n    (a variant of the trick described here: https://www.w3schools.com/howto/howto_css_aspect_ratio.asp).\r\n  -->\r\n  <td *ngIf=\"rowIndex === 0 && _firstRowOffset\"\r\n      class=\"mat-calendar-body-label\"\r\n      [attr.colspan]=\"_firstRowOffset\"\r\n      [style.paddingTop]=\"_cellPadding\"\r\n      [style.paddingBottom]=\"_cellPadding\">\r\n    {{_firstRowOffset >= labelMinRequiredCells ? label : ''}}\r\n  </td>\r\n  <!--\r\n    Each gridcell in the calendar contains a button, which signals to assistive technology that the\r\n    cell is interactable, as well as the selection state via `aria-pressed`. See #23476 for\r\n    background.\r\n  -->\r\n  <td\r\n    *ngFor=\"let item of row; let colIndex = index\"\r\n    role=\"gridcell\"\r\n    class=\"mat-calendar-body-cell-container\"\r\n    [style.width]=\"_cellWidth\"\r\n    [style.paddingTop]=\"_cellPadding\"\r\n    [style.paddingBottom]=\"_cellPadding\"\r\n    [attr.data-mat-row]=\"rowIndex\"\r\n    [attr.data-mat-col]=\"colIndex\"\r\n  >\r\n    <button\r\n        type=\"button\"\r\n        class=\"mat-calendar-body-cell\"\r\n        [ngClass]=\"item.cssClasses\"\r\n        [tabindex]=\"_isActiveCell(rowIndex, colIndex) ? 0 : -1\"\r\n        [class.mat-calendar-body-disabled]=\"!item.enabled\"\r\n        [class.mat-calendar-body-active]=\"_isActiveCell(rowIndex, colIndex)\"\r\n        [class.mat-calendar-body-range-start]=\"_isRangeStart(item.compareValue)\"\r\n        [class.mat-calendar-body-range-end]=\"_isRangeEnd(item.compareValue)\"\r\n        [class.mat-calendar-body-in-range]=\"_isInRange(item.compareValue)\"\r\n        [class.mat-calendar-body-comparison-bridge-start]=\"_isComparisonBridgeStart(item.compareValue, rowIndex, colIndex)\"\r\n        [class.mat-calendar-body-comparison-bridge-end]=\"_isComparisonBridgeEnd(item.compareValue, rowIndex, colIndex)\"\r\n        [class.mat-calendar-body-comparison-start]=\"_isComparisonStart(item.compareValue)\"\r\n        [class.mat-calendar-body-comparison-end]=\"_isComparisonEnd(item.compareValue)\"\r\n        [class.mat-calendar-body-in-comparison-range]=\"_isInComparisonRange(item.compareValue)\"\r\n        [class.mat-calendar-body-preview-start]=\"_isPreviewStart(item.compareValue)\"\r\n        [class.mat-calendar-body-preview-end]=\"_isPreviewEnd(item.compareValue)\"\r\n        [class.mat-calendar-body-in-preview]=\"_isInPreview(item.compareValue)\"\r\n        [attr.aria-label]=\"item.ariaLabel\"\r\n        [attr.aria-disabled]=\"!item.enabled || null\"\r\n        [attr.aria-pressed]=\"_isSelected(item.compareValue)\"\r\n        [attr.aria-current]=\"todayValue === item.compareValue ? 'date' : null\"\r\n        [attr.aria-describedby]=\"_getDescribedby(item.compareValue)\"\r\n        (click)=\"_cellClicked(item, $event)\"\r\n        (focus)=\"_emitActiveDateChange(item, $event)\">\r\n        <span class=\"mat-calendar-body-cell-content mat-focus-indicator\"\r\n          [class.mat-calendar-body-selected]=\"_isSelected(item.compareValue)\"\r\n          [class.mat-calendar-body-comparison-identical]=\"_isComparisonIdentical(item.compareValue)\"\r\n          [class.mat-calendar-body-today]=\"todayValue === item.compareValue\">\r\n          {{item.displayValue}}\r\n        </span>\r\n        <span class=\"mat-calendar-body-cell-preview\" aria-hidden=\"true\"></span>\r\n    </button>\r\n  </td>\r\n</tr>\r\n\r\n<label [id]=\"_startDateLabelId\" class=\"mat-calendar-body-hidden-label\">\r\n  {{startDateAccessibleName}}\r\n</label>\r\n<label [id]=\"_endDateLabelId\" class=\"mat-calendar-body-hidden-label\">\r\n  {{endDateAccessibleName}}\r\n</label>\r\n","import { FactoryProvider, Injectable, InjectionToken, Optional, SkipSelf } from '@angular/core';\r\nimport { NgxMatDateAdapter } from './core/date-adapter';\r\nimport { NgxDateRange } from './date-selection-model';\r\n\r\n/** Injection token used to customize the date range selection behavior. */\r\nexport const NGX_MAT_DATE_RANGE_SELECTION_STRATEGY = new InjectionToken<\r\n  NgxMatDateRangeSelectionStrategy<any>\r\n>('NGX_MAT_DATE_RANGE_SELECTION_STRATEGY');\r\n\r\n/** Object that can be provided in order to customize the date range selection behavior. */\r\nexport interface NgxMatDateRangeSelectionStrategy<D> {\r\n  /**\r\n   * Called when the user has finished selecting a value.\r\n   * @param date Date that was selected. Will be null if the user cleared the selection.\r\n   * @param currentRange Range that is currently show in the calendar.\r\n   * @param event DOM event that triggered the selection. Currently only corresponds to a `click`\r\n   *    event, but it may get expanded in the future.\r\n   */\r\n  selectionFinished(date: D | null, currentRange: NgxDateRange<D>, event: Event): NgxDateRange<D>;\r\n\r\n  /**\r\n   * Called when the user has activated a new date (e.g. by hovering over\r\n   * it or moving focus) and the calendar tries to display a date range.\r\n   *\r\n   * @param activeDate Date that the user has activated. Will be null if the user moved\r\n   *    focus to an element that's no a calendar cell.\r\n   * @param currentRange Range that is currently shown in the calendar.\r\n   * @param event DOM event that caused the preview to be changed. Will be either a\r\n   *    `mouseenter`/`mouseleave` or `focus`/`blur` depending on how the user is navigating.\r\n   */\r\n  createPreview(activeDate: D | null, currentRange: NgxDateRange<D>, event: Event): NgxDateRange<D>;\r\n\r\n  /**\r\n   * Called when the user has dragged a date in the currently selected range to another\r\n   * date. Returns the date updated range that should result from this interaction.\r\n   *\r\n   * @param dateOrigin The date the user started dragging from.\r\n   * @param originalRange The originally selected date range.\r\n   * @param newDate The currently targeted date in the drag operation.\r\n   * @param event DOM event that triggered the updated drag state. Will be\r\n   *     `mouseenter`/`mouseup` or `touchmove`/`touchend` depending on the device type.\r\n   */\r\n  createDrag?(\r\n    dragOrigin: D,\r\n    originalRange: NgxDateRange<D>,\r\n    newDate: D,\r\n    event: Event,\r\n  ): NgxDateRange<D> | null;\r\n}\r\n\r\n/** Provides the default date range selection behavior. */\r\n@Injectable()\r\nexport class DefaultNgxMatCalendarRangeStrategy<D> implements NgxMatDateRangeSelectionStrategy<D> {\r\n  constructor(private _dateAdapter: NgxMatDateAdapter<D>) { }\r\n\r\n  selectionFinished(date: D, currentRange: NgxDateRange<D>) {\r\n    let { start, end } = currentRange;\r\n\r\n    if (start == null) {\r\n      start = date;\r\n    } else if (end == null && date && this._dateAdapter.compareDate(date, start) >= 0) {\r\n      end = date;\r\n    } else {\r\n      start = date;\r\n      end = null;\r\n    }\r\n\r\n    return new NgxDateRange<D>(start, end);\r\n  }\r\n\r\n  createPreview(activeDate: D | null, currentRange: NgxDateRange<D>) {\r\n    let start: D | null = null;\r\n    let end: D | null = null;\r\n\r\n    if (currentRange.start && !currentRange.end && activeDate) {\r\n      start = currentRange.start;\r\n      end = activeDate;\r\n    }\r\n\r\n    return new NgxDateRange<D>(start, end);\r\n  }\r\n\r\n  createDrag(dragOrigin: D, originalRange: NgxDateRange<D>, newDate: D) {\r\n    let start = originalRange.start;\r\n    let end = originalRange.end;\r\n\r\n    if (!start || !end) {\r\n      // Can't drag from an incomplete range.\r\n      return null;\r\n    }\r\n\r\n    const adapter = this._dateAdapter;\r\n\r\n    const isRange = adapter.compareDate(start, end) !== 0;\r\n    const diffYears = adapter.getYear(newDate) - adapter.getYear(dragOrigin);\r\n    const diffMonths = adapter.getMonth(newDate) - adapter.getMonth(dragOrigin);\r\n    const diffDays = adapter.getDate(newDate) - adapter.getDate(dragOrigin);\r\n\r\n    if (isRange && adapter.sameDate(dragOrigin, originalRange.start)) {\r\n      start = newDate;\r\n      if (adapter.compareDate(newDate, end) > 0) {\r\n        end = adapter.addCalendarYears(end, diffYears);\r\n        end = adapter.addCalendarMonths(end, diffMonths);\r\n        end = adapter.addCalendarDays(end, diffDays);\r\n      }\r\n    } else if (isRange && adapter.sameDate(dragOrigin, originalRange.end)) {\r\n      end = newDate;\r\n      if (adapter.compareDate(newDate, start) < 0) {\r\n        start = adapter.addCalendarYears(start, diffYears);\r\n        start = adapter.addCalendarMonths(start, diffMonths);\r\n        start = adapter.addCalendarDays(start, diffDays);\r\n      }\r\n    } else {\r\n      start = adapter.addCalendarYears(start, diffYears);\r\n      start = adapter.addCalendarMonths(start, diffMonths);\r\n      start = adapter.addCalendarDays(start, diffDays);\r\n      end = adapter.addCalendarYears(end, diffYears);\r\n      end = adapter.addCalendarMonths(end, diffMonths);\r\n      end = adapter.addCalendarDays(end, diffDays);\r\n    }\r\n\r\n    return new NgxDateRange<D>(start, end);\r\n  }\r\n}\r\n\r\n/** @docs-private */\r\nexport function NGX_MAT_CALENDAR_RANGE_STRATEGY_PROVIDER_FACTORY(\r\n  parent: NgxMatDateRangeSelectionStrategy<unknown>,\r\n  adapter: NgxMatDateAdapter<unknown>,\r\n) {\r\n  return parent || new DefaultNgxMatCalendarRangeStrategy(adapter);\r\n}\r\n\r\nexport const NGX_MAT_CALENDAR_RANGE_STRATEGY_PROVIDER: FactoryProvider = {\r\n  provide: NGX_MAT_DATE_RANGE_SELECTION_STRATEGY,\r\n  deps: [[new Optional(), new SkipSelf(), NGX_MAT_DATE_RANGE_SELECTION_STRATEGY], NgxMatDateAdapter],\r\n  useFactory: NGX_MAT_CALENDAR_RANGE_STRATEGY_PROVIDER_FACTORY,\r\n};\r\n","\r\n\r\nimport { Directionality } from '@angular/cdk/bidi';\r\nimport {\r\n  DOWN_ARROW,\r\n  END,\r\n  ENTER,\r\n  ESCAPE,\r\n  HOME,\r\n  LEFT_ARROW,\r\n  PAGE_DOWN,\r\n  PAGE_UP,\r\n  RIGHT_ARROW,\r\n  SPACE,\r\n  UP_ARROW,\r\n  hasModifierKey,\r\n} from '@angular/cdk/keycodes';\r\nimport {\r\n  AfterContentInit,\r\n  ChangeDetectionStrategy,\r\n  ChangeDetectorRef,\r\n  Component,\r\n  EventEmitter,\r\n  Inject,\r\n  Input,\r\n  OnChanges,\r\n  OnDestroy,\r\n  Optional,\r\n  Output,\r\n  SimpleChanges,\r\n  ViewChild,\r\n  ViewEncapsulation,\r\n} from '@angular/core';\r\nimport { Subscription } from 'rxjs';\r\nimport { startWith } from 'rxjs/operators';\r\nimport {\r\n  NgxMatCalendarBody,\r\n  NgxMatCalendarCell,\r\n  NgxMatCalendarCellClassFunction,\r\n  NgxMatCalendarUserEvent,\r\n} from './calendar-body';\r\nimport { NgxMatDateAdapter } from './core/date-adapter';\r\nimport { NGX_MAT_DATE_FORMATS, NgxMatDateFormats } from './core/date-formats';\r\nimport {\r\n  NGX_MAT_DATE_RANGE_SELECTION_STRATEGY,\r\n  NgxMatDateRangeSelectionStrategy,\r\n} from './date-range-selection-strategy';\r\nimport { NgxDateRange } from './date-selection-model';\r\nimport { createMissingDateImplError } from './datepicker-errors';\r\n\r\nconst DAYS_PER_WEEK = 7;\r\n\r\n/**\r\n * An internal component used to display a single month in the datepicker.\r\n * @docs-private\r\n */\r\n@Component({\r\n  selector: 'ngx-mat-month-view',\r\n  templateUrl: 'month-view.html',\r\n  exportAs: 'ngxMatMonthView',\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class NgxMatMonthView<D> implements AfterContentInit, OnChanges, OnDestroy {\r\n  private _rerenderSubscription = Subscription.EMPTY;\r\n\r\n  /** Flag used to filter out space/enter keyup events that originated outside of the view. */\r\n  private _selectionKeyPressed: boolean;\r\n\r\n  /**\r\n   * The date to display in this month view (everything other than the month and year is ignored).\r\n   */\r\n  @Input()\r\n  get activeDate(): D {\r\n    return this._activeDate;\r\n  }\r\n  set activeDate(value: D) {\r\n    const oldActiveDate = this._activeDate;\r\n    const validDate =\r\n      this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value)) ||\r\n      this._dateAdapter.today();\r\n    this._activeDate = this._dateAdapter.clampDate(validDate, this.minDate, this.maxDate);\r\n    if (!this._hasSameMonthAndYear(oldActiveDate, this._activeDate)) {\r\n      this._init();\r\n    }\r\n  }\r\n  private _activeDate: D;\r\n\r\n  /** The currently selected date. */\r\n  @Input()\r\n  get selected(): NgxDateRange<D> | D | null {\r\n    return this._selected;\r\n  }\r\n  set selected(value: NgxDateRange<D> | D | null) {\r\n    if (value instanceof NgxDateRange) {\r\n      this._selected = value;\r\n    } else {\r\n      this._selected = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));\r\n    }\r\n\r\n    this._setRanges(this._selected);\r\n  }\r\n  private _selected: NgxDateRange<D> | D | null;\r\n\r\n  /** The minimum selectable date. */\r\n  @Input()\r\n  get minDate(): D | null {\r\n    return this._minDate;\r\n  }\r\n  set minDate(value: D | null) {\r\n    this._minDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));\r\n  }\r\n  private _minDate: D | null;\r\n\r\n  /** The maximum selectable date. */\r\n  @Input()\r\n  get maxDate(): D | null {\r\n    return this._maxDate;\r\n  }\r\n  set maxDate(value: D | null) {\r\n    this._maxDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));\r\n  }\r\n  private _maxDate: D | null;\r\n\r\n  /** Function used to filter which dates are selectable. */\r\n  @Input() dateFilter: (date: D) => boolean;\r\n\r\n  /** Function that can be used to add custom CSS classes to dates. */\r\n  @Input() dateClass: NgxMatCalendarCellClassFunction<D>;\r\n\r\n  /** Start of the comparison range. */\r\n  @Input() comparisonStart: D | null;\r\n\r\n  /** End of the comparison range. */\r\n  @Input() comparisonEnd: D | null;\r\n\r\n  /** ARIA Accessible name of the `<input matStartDate/>` */\r\n  @Input() startDateAccessibleName: string | null;\r\n\r\n  /** ARIA Accessible name of the `<input matEndDate/