\r\n\r\n","import { FormField } from '../../../profile/models/form-field.model';\r\nimport { Component, Input } from '@angular/core';\r\nimport { UntypedFormControl, UntypedFormGroup, ValidatorFn, Validators } from '@angular/forms';\r\nimport { ProfileFormService } from '../../../profile/services/profile-form-service';\r\n\r\n@Component({\r\n selector: 'maas-dynamic-form',\r\n templateUrl: './dynamic-form.component.html',\r\n})\r\nexport class DynamicFormComponent {\r\n\r\n form: UntypedFormGroup | undefined;\r\n private edit = false;\r\n private _formFields: FormField[] = [];\r\n\r\n @Input() profileType: string = '';\r\n\r\n @Input() set formFields(value: FormField[]) {\r\n if (value?.length > 0) {\r\n this._formFields = value;\r\n this.edit = this._formFields.some((f) => Array.isArray(f?.value) ? f?.value?.length > 0 : f?.value);\r\n this.form = this.toFormGroup(this.formFields);\r\n }\r\n }\r\n get formFields(): FormField[] {\r\n return this._formFields;\r\n }\r\n\r\n constructor(\r\n private profileFormService: ProfileFormService\r\n ) { }\r\n\r\n toFormGroup(inputs: FormField[]): UntypedFormGroup {\r\n const group: { [key: string]: UntypedFormControl } = {};\r\n inputs?.forEach((input) => {\r\n const validator: ValidatorFn[] = [Validators.required];\r\n if (input.validator === 'email') validator.push(Validators.email);\r\n\r\n group[input.key] =\r\n validator.length > 0\r\n ? new UntypedFormControl(input?.value || '', validator)\r\n : new UntypedFormControl(input?.value || '');\r\n });\r\n return new UntypedFormGroup(group);\r\n }\r\n\r\n\r\n onSubmit() {\r\n if (!this.form) return;\r\n\r\n // required to remove http/https string from form values because of gateway WAF rule\r\n this.cleanWebsiteQuestion('200');\r\n this.cleanWebsiteQuestion('201');\r\n\r\n this.edit\r\n ? this.profileFormService.updateProfileForm(this.form, this.profileType)\r\n : this.profileFormService.addProfileForm(this.form, this.profileType)\r\n }\r\n\r\n cleanWebsiteQuestion(id: string) {\r\n if (!this.form?.controls[id]) return;\r\n\r\n let value = this.form?.controls[id].value;\r\n if (value.includes('http') || value.includes('https')) {\r\n this.form?.get(id)?.setValue(value.replace(/^https?:\\/\\//, ''));\r\n }\r\n }\r\n}\r\n","import { IEmployerProfileCompany, IProfileFormAnswer } from '../../models';\r\nimport { createAction, props } from '@ngrx/store';\r\n\r\nexport const addEmployerProfileFormAnswers = createAction(\r\n '[Employer Profile - Current Suppliers] Add Employer Profile Form Answers',\r\n props<{ employerProfileFormAnswers: IProfileFormAnswer[] }>()\r\n);\r\n\r\nexport const addEmployerProfileFormAnswersSuccess = createAction(\r\n '[Employer Profile Effects] Add Employer Profile Form Answers Success',\r\n props<{ employerProfileFormAnswers: IProfileFormAnswer[] }>()\r\n);\r\n\r\nexport const addEmployerProfileFormAnswersFailure = createAction(\r\n '[Employer Profile Effects] Add Employer Profile Form Answers Failure',\r\n props<{ error: any }>()\r\n);\r\n\r\nexport const updateEmployerProfileFormAnswers = createAction(\r\n '[Employer Profile - Current Suppliers] Update Employer Profile Form Answers',\r\n props<{ employerProfileFormAnswers: IProfileFormAnswer[] }>()\r\n);\r\n\r\nexport const updateEmployerProfileFormAnswersSuccess = createAction(\r\n '[Employer Profile Effects] Update Employer Profile Form Answers Success',\r\n props<{ employerProfileFormAnswers: IProfileFormAnswer[]}>()\r\n);\r\n\r\nexport const updateEmployerProfileFormAnswersFailure = createAction(\r\n '[Employer Profile Effects] Update Employer Profile Form Answers Failure',\r\n props<{error: any}>()\r\n);\r\n","export class FormField {\r\n value: T;\r\n key: string;\r\n label: string;\r\n validator: string;\r\n controlType: string;\r\n options: { [key: number]: string; };\r\n\r\n constructor(\r\n options: {\r\n value: T;\r\n key?: string;\r\n label?: string;\r\n validator?: string;\r\n controlType?: string;\r\n options?: { [key: number]: string; };\r\n }\r\n ) {\r\n this.value = options.value;\r\n this.key = options.key || '';\r\n this.label = options.label || '';\r\n this.validator = options.validator || '';\r\n this.controlType = options.controlType || '';\r\n this.options = options.options || [];\r\n }\r\n}\r\n","import { SharedModule } from '@shared';\r\nimport { DynamicFormInputComponent } from './components/dynamic-form-input/dynamic-form-input.component';\r\nimport { DynamicFormComponent } from './components/dynamic-form/dynamic-form.component';\r\nimport { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { RouterModule } from '@angular/router';\r\nimport { MatDatepickerModule } from '@angular/material/datepicker';\r\nimport { MatNativeDateModule } from '@angular/material/core';\r\n\r\n@NgModule({\r\n declarations: [DynamicFormComponent, DynamicFormInputComponent],\r\n imports: [\r\n CommonModule,\r\n SharedModule,\r\n MatDatepickerModule,\r\n MatNativeDateModule,\r\n RouterModule\r\n ],\r\n exports: [DynamicFormComponent, DynamicFormInputComponent]\r\n})\r\nexport class ProfileModule {}\r\n","import { addEmployerProfileFormAnswers, updateEmployerProfileFormAnswers } from './../employer-profile/store/actions/employer-profile-form-answers.actions';\r\nimport { CacheService, RootState } from '@core';\r\nimport { UntypedFormGroup } from '@angular/forms';\r\nimport { Injectable } from '@angular/core';\r\nimport { Store } from '@ngrx/store';\r\nimport { HttpClient } from '@angular/common/http';\r\nimport { IProfileQuestionAnswerMapping } from '../models/profile-question-answer-mapping.model';\r\nimport { IProfileFormAnswer } from '../employer-profile/models';\r\nimport { addSupplierProfileFormAnswers, updateSupplierProfileFormAnswers } from '../supplier-profile/store/actions';\r\n\r\n@Injectable({\r\n providedIn: 'root',\r\n})\r\nexport class ProfileFormService {\r\n constructor(private http: HttpClient, private store: Store, private cache: CacheService) {}\r\n\r\n getSupplierProfileQuestionAnswerMappings() {\r\n return this.http.get(\r\n `Profiles/${this.cache.get('currentClientId')}/supplier/questionanswermappings`\r\n );\r\n }\r\n\r\n addSupplierProfileFormAnswers(responseAnswers: IProfileFormAnswer[]) {\r\n return this.http.post(\r\n `profiles/${this.cache.get('currentClientId')}/supplier/responses`,\r\n responseAnswers\r\n );\r\n }\r\n\r\n updateSupplierProfileFormAnswers(responseAnswers: IProfileFormAnswer[]) {\r\n return this.http.put(\r\n `profiles/${this.cache.get('currentClientId')}/supplier/responses`,\r\n responseAnswers\r\n );\r\n }\r\n\r\n addProfileForm(form: UntypedFormGroup, profileType: string) {\r\n if (profileType === 'sp')\r\n this.store.dispatch(\r\n addSupplierProfileFormAnswers({ supplierProfileFormAnswers: this.buildProfileAnswersFromForm(form) })\r\n );\r\n\r\n if (profileType === 'ep')\r\n this.store.dispatch(\r\n addEmployerProfileFormAnswers({ employerProfileFormAnswers: this.buildProfileAnswersFromForm(form) })\r\n );\r\n }\r\n\r\n\r\n updateProfileForm(form: UntypedFormGroup, profileType: string) {\r\n if (profileType === 'sp')\r\n this.store.dispatch(\r\n updateSupplierProfileFormAnswers({ supplierProfileFormAnswers: this.buildProfileAnswersFromForm(form) })\r\n );\r\n\r\n if (profileType === 'ep')\r\n this.store.dispatch(\r\n updateEmployerProfileFormAnswers({ employerProfileFormAnswers: this.buildProfileAnswersFromForm(form) })\r\n );\r\n }\r\n\r\n private buildProfileAnswersFromForm(form: UntypedFormGroup) {\r\n const supplierProfileFormAnswers: IProfileFormAnswer[] = [];\r\n // tslint:disable-next-line:forin\r\n for (const question in form?.controls) {\r\n const responseAnswer: IProfileFormAnswer = {\r\n questionId: +question,\r\n questionChoiceIds: Array.isArray(form.controls[question].value)\r\n ? form.controls[question].value\r\n : Number.isFinite(form.controls[question].value)\r\n ? [form.controls[question].value]\r\n : null,\r\n text:\r\n Array.isArray(form.controls[question].value) || Number.isFinite(form.controls[question].value)\r\n ? null\r\n : form.controls[question].value,\r\n };\r\n\r\n supplierProfileFormAnswers.push(responseAnswer);\r\n }\r\n\r\n return supplierProfileFormAnswers;\r\n }\r\n}\r\n","import { createAction, props } from '@ngrx/store';\r\nimport { IProfileFormAnswer } from 'src/app/profile/models/profile-form-answer.model';\r\n\r\nexport const addSupplierProfileFormAnswers = createAction(\r\n '[Supplier Profile - Current Suppliers] Add Supplier Profile Form Answers',\r\n props<{ supplierProfileFormAnswers: IProfileFormAnswer[] }>()\r\n);\r\n\r\nexport const addSupplierProfileFormAnswersSuccess = createAction(\r\n '[Supplier Profile Effects] Add Supplier Profile Form Answers Success',\r\n props<{ supplierProfileFormAnswers: IProfileFormAnswer[] }>()\r\n);\r\n\r\nexport const updateSupplierProfileFormAnswers = createAction(\r\n '[Supplier Profile - Current Suppliers] Update Supplier Profile Form Answers',\r\n props<{ supplierProfileFormAnswers: IProfileFormAnswer[] }>()\r\n);\r\n\r\nexport const updateSupplierProfileFormAnswersSuccess = createAction(\r\n '[Supplier Profile Effects] Update Supplier Profile Form Answers Success',\r\n props<{ supplierProfileFormAnswers: IProfileFormAnswer[]}>()\r\n);\r\n","import { createAction, props } from '@ngrx/store';\r\nimport { IProfileQuestionAnswerMapping } from '../../../models/profile-question-answer-mapping.model';\r\n\r\nexport const loadSupplierProfileQuestionAnswerMappings = createAction(\r\n '[Supplier Profile Root] Load Supplier Profile Question Answer Mappings'\r\n );\r\n\r\nexport const loadSupplierProfileQuestionAnswerMappingsSuccess = createAction(\r\n '[Supplier Profile Effects] Load Supplier Profile Question Answer Mappings Success',\r\n props<{\r\n questionAnswerMappings: IProfileQuestionAnswerMapping[]\r\n }>()\r\n);\r\n","import * as i5 from '@angular/cdk/a11y';\nimport { A11yModule } from '@angular/cdk/a11y';\nimport * as i9 from '@angular/cdk/overlay';\nimport { Overlay, FlexibleConnectedPositionStrategy, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';\nimport * as i6 from '@angular/cdk/portal';\nimport { ComponentPortal, TemplatePortal, PortalModule } from '@angular/cdk/portal';\nimport * as i1 from '@angular/common';\nimport { DOCUMENT, CommonModule } from '@angular/common';\nimport * as i0 from '@angular/core';\nimport { Injectable, inject, EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, Output, Optional, SkipSelf, InjectionToken, Inject, ViewChild, forwardRef, Directive, Attribute, ContentChild, Self, TemplateRef, NgModule } from '@angular/core';\nimport * as i3 from '@angular/material/button';\nimport { MatButtonModule } from '@angular/material/button';\nimport { CdkScrollableModule } from '@angular/cdk/scrolling';\nimport * as i1$1 from '@angular/material/core';\nimport { DateAdapter, MAT_DATE_FORMATS, mixinColor, mixinErrorState, MatCommonModule } from '@angular/material/core';\nimport { Subject, Subscription, merge, of } from 'rxjs';\nimport { ESCAPE, hasModifierKey, SPACE, ENTER, PAGE_DOWN, PAGE_UP, END, HOME, DOWN_ARROW, UP_ARROW, RIGHT_ARROW, LEFT_ARROW, BACKSPACE } from '@angular/cdk/keycodes';\nimport * as i2 from '@angular/cdk/bidi';\nimport { Directionality } from '@angular/cdk/bidi';\nimport { Platform, _getFocusedElementPierceShadowDom } from '@angular/cdk/platform';\nimport { take, startWith, filter } from 'rxjs/operators';\nimport { coerceBooleanProperty, coerceStringArray } from '@angular/cdk/coercion';\nimport { trigger, transition, animate, keyframes, style, state } from '@angular/animations';\nimport * as i2$1 from '@angular/forms';\nimport { NG_VALUE_ACCESSOR, NG_VALIDATORS, Validators, NgControl } from '@angular/forms';\nimport { MAT_FORM_FIELD, MatFormFieldControl } from '@angular/material/form-field';\nimport { MAT_INPUT_VALUE_ACCESSOR } from '@angular/material/input';\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/** @docs-private */\nfunction createMissingDateImplError(provider) {\n return Error(`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/** Datepicker data that requires internationalization. */\nclass MatDatepickerIntl {\n constructor() {\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 this.changes = new Subject();\n /** A label for the calendar popup (used by screen readers). */\n this.calendarLabel = 'Calendar';\n /** A label for the button used to open the calendar popup (used by screen readers). */\n this.openCalendarLabel = 'Open calendar';\n /** Label for the button used to close the calendar popup. */\n this.closeCalendarLabel = 'Close calendar';\n /** A label for the previous month button (used by screen readers). */\n this.prevMonthLabel = 'Previous month';\n /** A label for the next month button (used by screen readers). */\n this.nextMonthLabel = 'Next month';\n /** A label for the previous year button (used by screen readers). */\n this.prevYearLabel = 'Previous year';\n /** A label for the next year button (used by screen readers). */\n this.nextYearLabel = 'Next year';\n /** A label for the previous multi-year button (used by screen readers). */\n this.prevMultiYearLabel = 'Previous 24 years';\n /** A label for the next multi-year button (used by screen readers). */\n this.nextMultiYearLabel = 'Next 24 years';\n /** A label for the 'switch to month view' button (used by screen readers). */\n this.switchToMonthViewLabel = 'Choose date';\n /** A label for the 'switch to year view' button (used by screen readers). */\n this.switchToMultiYearViewLabel = 'Choose month and year';\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 this.startDateLabel = 'Start date';\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 this.endDateLabel = 'End date';\n }\n /** Formats a range of years (used for visuals). */\n formatYearRange(start, end) {\n return `${start} \\u2013 ${end}`;\n }\n /** Formats a label for a range of years (used by screen readers). */\n formatYearRangeLabel(start, end) {\n return `${start} to ${end}`;\n }\n}\nMatDatepickerIntl.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0-rc.0\", ngImport: i0, type: MatDatepickerIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable });\nMatDatepickerIntl.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: \"12.0.0\", version: \"15.2.0-rc.0\", ngImport: i0, type: MatDatepickerIntl, providedIn: 'root' });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0-rc.0\", ngImport: i0, type: MatDatepickerIntl, decorators: [{\n type: Injectable,\n args: [{ providedIn: 'root' }]\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/**\n * An internal class that represents the data corresponding to a single calendar cell.\n * @docs-private\n */\nclass MatCalendarCell {\n constructor(value, displayValue, ariaLabel, enabled, cssClasses = {}, compareValue = value, rawValue) {\n this.value = value;\n this.displayValue = displayValue;\n this.ariaLabel = ariaLabel;\n this.enabled = enabled;\n this.cssClasses = cssClasses;\n this.compareValue = compareValue;\n this.rawValue = rawValue;\n }\n}\nlet calendarBodyId = 1;\n/**\n * An internal component used to display calendar data in a table.\n * @docs-private\n */\nclass MatCalendarBody {\n ngAfterViewChecked() {\n if (this._focusActiveCellAfterViewChecked) {\n this._focusActiveCell();\n this._focusActiveCellAfterViewChecked = false;\n }\n }\n constructor(_elementRef, _ngZone) {\n this._elementRef = _elementRef;\n this._ngZone = _ngZone;\n this._platform = inject(Platform);\n /**\n * Used to focus the active cell after change detection has run.\n */\n this._focusActiveCellAfterViewChecked = false;\n /** The number of columns in the table. */\n this.numCols = 7;\n /** The cell number of the active cell in the table. */\n this.activeCell = 0;\n /** Whether a range is being selected. */\n this.isRange = false;\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 this.cellAspectRatio = 1;\n /** Start of the preview range. */\n this.previewStart = null;\n /** End of the preview range. */\n this.previewEnd = null;\n /** Emits when a new value is selected. */\n this.selectedValueChange = new EventEmitter();\n /** Emits when the preview has changed as a result of a user action. */\n this.previewChange = new EventEmitter();\n this.activeDateChange = new EventEmitter();\n /** Emits the date at the possible start of a drag event. */\n this.dragStarted = new EventEmitter();\n /** Emits the date at the conclusion of a drag, or null if mouse was not released on a date. */\n this.dragEnded = new EventEmitter();\n this._didDragSinceMouseDown = false;\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 this._enterHandler = (event) => {\n if (this._skipNextFocus && event.type === 'focus') {\n this._skipNextFocus = false;\n return;\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);\n if (cell) {\n this._ngZone.run(() => this.previewChange.emit({ value: cell.enabled ? cell : null, event }));\n }\n }\n };\n this._touchmoveHandler = (event) => {\n if (!this.isRange)\n return;\n const target = getActualTouchTarget(event);\n const cell = target ? this._getCellFromElement(target) : null;\n if (target !== event.target) {\n this._didDragSinceMouseDown = true;\n }\n // If the initial target of the touch is a date cell, prevent default so\n // that the move is not handled as a scroll.\n if (getCellElement(event.target)) {\n event.preventDefault();\n }\n this._ngZone.run(() => this.previewChange.emit({ value: cell?.enabled ? cell : null, event }));\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 this._leaveHandler = (event) => {\n // We only need to hit the zone when we're selecting a range.\n if (this.previewEnd !== null && this.isRange) {\n if (event.type !== 'blur') {\n this._didDragSinceMouseDown = true;\n }\n // 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 &&\n this._getCellFromElement(event.target) &&\n !(event.relatedTarget &&\n this._getCellFromElement(event.relatedTarget))) {\n this._ngZone.run(() => this.previewChange.emit({ value: null, event }));\n }\n }\n };\n /**\n * Triggered on mousedown or touchstart on a date cell.\n * Respsonsible for starting a drag sequence.\n */\n this._mousedownHandler = (event) => {\n if (!this.isRange)\n return;\n this._didDragSinceMouseDown = false;\n // Begin a drag if a cell within the current range was targeted.\n const cell = event.target && this._getCellFromElement(event.target);\n if (!cell || !this._isInRange(cell.rawValue)) {\n return;\n }\n this._ngZone.run(() => {\n this.dragStarted.emit({\n value: cell.rawValue,\n event,\n });\n });\n };\n /** Triggered on mouseup anywhere. Respsonsible for ending a drag sequence. */\n this._mouseupHandler = (event) => {\n if (!this.isRange)\n return;\n const cellElement = getCellElement(event.target);\n if (!cellElement) {\n // Mouseup happened outside of datepicker. Cancel drag.\n this._ngZone.run(() => {\n this.dragEnded.emit({ value: null, event });\n });\n return;\n }\n if (cellElement.closest('.mat-calendar-body') !== this._elementRef.nativeElement) {\n // Mouseup happened inside a different month instance.\n // Allow it to handle the event.\n return;\n }\n this._ngZone.run(() => {\n const cell = this._getCellFromElement(cellElement);\n this.dragEnded.emit({ value: cell?.rawValue ?? null, event });\n });\n };\n /** Triggered on touchend anywhere. Respsonsible for ending a drag sequence. */\n this._touchendHandler = (event) => {\n const target = getActualTouchTarget(event);\n if (target) {\n this._mouseupHandler({ target });\n }\n };\n this._id = `mat-calendar-body-${calendarBodyId++}`;\n this._startDateLabelId = `${this._id}-start-date`;\n this._endDateLabelId = `${this._id}-end-date`;\n _ngZone.runOutsideAngular(() => {\n const element = _elementRef.nativeElement;\n element.addEventListener('mouseenter', this._enterHandler, true);\n element.addEventListener('touchmove', this._touchmoveHandler, true);\n element.addEventListener('focus', this._enterHandler, true);\n element.addEventListener('mouseleave', this._leaveHandler, true);\n element.addEventListener('blur', this._leaveHandler, true);\n element.addEventListener('mousedown', this._mousedownHandler);\n element.addEventListener('touchstart', this._mousedownHandler);\n if (this._platform.isBrowser) {\n window.addEventListener('mouseup', this._mouseupHandler);\n window.addEventListener('touchend', this._touchendHandler);\n }\n });\n }\n /** Called when a cell is clicked. */\n _cellClicked(cell, event) {\n // Ignore \"clicks\" that are actually canceled drags (eg the user dragged\n // off and then went back to this cell to undo).\n if (this._didDragSinceMouseDown) {\n return;\n }\n if (cell.enabled) {\n this.selectedValueChange.emit({ value: cell.value, event });\n }\n }\n _emitActiveDateChange(cell, event) {\n if (cell.enabled) {\n this.activeDateChange.emit({ value: cell.value, event });\n }\n }\n /** Returns whether a cell should be marked as selected. */\n _isSelected(value) {\n return this.startValue === value || this.endValue === value;\n }\n ngOnChanges(changes) {\n const columnChanges = changes['numCols'];\n const { rows, numCols } = this;\n if (changes['rows'] || columnChanges) {\n this._firstRowOffset = rows && rows.length && rows[0].length ? numCols - rows[0].length : 0;\n }\n if (changes['cellAspectRatio'] || columnChanges || !this._cellPadding) {\n this._cellPadding = `${(50 * this.cellAspectRatio) / numCols}%`;\n }\n if (columnChanges || !this._cellWidth) {\n this._cellWidth = `${100 / numCols}%`;\n }\n }\n ngOnDestroy() {\n const element = this._elementRef.nativeElement;\n element.removeEventListener('mouseenter', this._enterHandler, true);\n element.removeEventListener('touchmove', this._touchmoveHandler, true);\n element.removeEventListener('focus', this._enterHandler, true);\n element.removeEventListener('mouseleave', this._leaveHandler, true);\n element.removeEventListener('blur', this._leaveHandler, true);\n element.removeEventListener('mousedown', this._mousedownHandler);\n element.removeEventListener('touchstart', this._mousedownHandler);\n if (this._platform.isBrowser) {\n window.removeEventListener('mouseup', this._mouseupHandler);\n window.removeEventListener('touchend', this._touchendHandler);\n }\n }\n /** Returns whether a cell is active. */\n _isActiveCell(rowIndex, colIndex) {\n let cellNumber = rowIndex * this.numCols + colIndex;\n // Account for the fact that the first row may not have as many cells.\n if (rowIndex) {\n cellNumber -= this._firstRowOffset;\n }\n return cellNumber == this.activeCell;\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 = this._elementRef.nativeElement.querySelector('.mat-calendar-body-active');\n if (activeCell) {\n if (!movePreview) {\n this._skipNextFocus = true;\n }\n activeCell.focus();\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 /** Gets whether a value is the start of the main range. */\n _isRangeStart(value) {\n return isStart(value, this.startValue, this.endValue);\n }\n /** Gets whether a value is the end of the main range. */\n _isRangeEnd(value) {\n return isEnd(value, this.startValue, this.endValue);\n }\n /** Gets whether a value is within the currently-selected range. */\n _isInRange(value) {\n return isInRange(value, this.startValue, this.endValue, this.isRange);\n }\n /** Gets whether a value is the start of the comparison range. */\n _isComparisonStart(value) {\n return isStart(value, this.comparisonStart, this.comparisonEnd);\n }\n /** Whether the cell is a start bridge cell between the main and comparison ranges. */\n _isComparisonBridgeStart(value, rowIndex, colIndex) {\n if (!this._isComparisonStart(value) || this._isRangeStart(value) || !this._isInRange(value)) {\n return false;\n }\n let previousCell = this.rows[rowIndex][colIndex - 1];\n if (!previousCell) {\n const previousRow = this.rows[rowIndex - 1];\n previousCell = previousRow && previousRow[previousRow.length - 1];\n }\n return previousCell && !this._isRangeEnd(previousCell.compareValue);\n }\n /** Whether the cell is an end bridge cell between the main and comparison ranges. */\n _isComparisonBridgeEnd(value, rowIndex, colIndex) {\n if (!this._isComparisonEnd(value) || this._isRangeEnd(value) || !this._isInRange(value)) {\n return false;\n }\n let nextCell = this.rows[rowIndex][colIndex + 1];\n if (!nextCell) {\n const nextRow = this.rows[rowIndex + 1];\n nextCell = nextRow && nextRow[0];\n }\n return nextCell && !this._isRangeStart(nextCell.compareValue);\n }\n /** Gets whether a value is the end of the comparison range. */\n _isComparisonEnd(value) {\n return isEnd(value, this.comparisonStart, this.comparisonEnd);\n }\n /** Gets whether a value is within the current comparison range. */\n _isInComparisonRange(value) {\n return isInRange(value, this.comparisonStart, this.comparisonEnd, this.isRange);\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) {\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 /** Gets whether a value is the start of the preview range. */\n _isPreviewStart(value) {\n return isStart(value, this.previewStart, this.previewEnd);\n }\n /** Gets whether a value is the end of the preview range. */\n _isPreviewEnd(value) {\n return isEnd(value, this.previewStart, this.previewEnd);\n }\n /** Gets whether a value is inside the preview range. */\n _isInPreview(value) {\n return isInRange(value, this.previewStart, this.previewEnd, this.isRange);\n }\n /** Gets ids of aria descriptions for the start and end of a date range. */\n _getDescribedby(value) {\n if (!this.isRange) {\n return null;\n }\n if (this.startValue === value && this.endValue === value) {\n return `${this._startDateLabelId} ${this._endDateLabelId}`;\n }\n else if (this.startValue === value) {\n return this._startDateLabelId;\n }\n else if (this.endValue === value) {\n return this._endDateLabelId;\n }\n return null;\n }\n /** Finds the MatCalendarCell that corresponds to a DOM node. */\n _getCellFromElement(element) {\n const cell = getCellElement(element);\n if (cell) {\n const row = cell.getAttribute('data-mat-row');\n const col = cell.getAttribute('data-mat-col');\n if (row && col) {\n return this.rows[parseInt(row)][parseInt(col)];\n }\n }\n return null;\n }\n}\nMatCalendarBody.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0-rc.0\", ngImport: i0, type: MatCalendarBody, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });\nMatCalendarBody.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: \"14.0.0\", version: \"15.2.0-rc.0\", type: MatCalendarBody, selector: \"[mat-calendar-body]\", inputs: { label: \"label\", rows: \"rows\", todayValue: \"todayValue\", startValue: \"startValue\", endValue: \"endValue\", labelMinRequiredCells: \"labelMinRequiredCells\", numCols: \"numCols\", activeCell: \"activeCell\", isRange: \"isRange\", cellAspectRatio: \"cellAspectRatio\", comparisonStart: \"comparisonStart\", comparisonEnd: \"comparisonEnd\", previewStart: \"previewStart\", previewEnd: \"previewEnd\", startDateAccessibleName: \"startDateAccessibleName\", endDateAccessibleName: \"endDateAccessibleName\" }, outputs: { selectedValueChange: \"selectedValueChange\", previewChange: \"previewChange\", activeDateChange: \"activeDateChange\", dragStarted: \"dragStarted\", dragEnded: \"dragEnded\" }, host: { classAttribute: \"mat-calendar-body\" }, exportAs: [\"matCalendarBody\"], usesOnChanges: true, ngImport: i0, template: \"\\n
\\n\\n\\n\\n\", styles: [\".mat-calendar-body{min-width:224px}.mat-calendar-body-label{height:0;line-height:0;text-align:left;padding-left:4.7142857143%;padding-right:4.7142857143%}.mat-calendar-body-hidden-label{display:none}.mat-calendar-body-cell-container{position:relative;height:0;line-height:0}.mat-calendar-body-cell{-webkit-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;-webkit-tap-highlight-color:rgba(0,0,0,0);position:absolute;top:0;left:0;width:100%;height:100%;background:none;text-align:center;outline:none;font-family:inherit;margin:0}.mat-calendar-body-cell::-moz-focus-inner{border:0}.mat-calendar-body-cell::before,.mat-calendar-body-cell::after,.mat-calendar-body-cell-preview{content:\\\"\\\";position:absolute;top:5%;left:0;z-index:0;box-sizing:border-box;display:block;height:90%;width:100%}.mat-calendar-body-range-start:not(.mat-calendar-body-in-comparison-range)::before,.mat-calendar-body-range-start::after,.mat-calendar-body-comparison-start:not(.mat-calendar-body-comparison-bridge-start)::before,.mat-calendar-body-comparison-start::after,.mat-calendar-body-preview-start .mat-calendar-body-cell-preview{left:5%;width:95%;border-top-left-radius:999px;border-bottom-left-radius:999px}[dir=rtl] .mat-calendar-body-range-start:not(.mat-calendar-body-in-comparison-range)::before,[dir=rtl] .mat-calendar-body-range-start::after,[dir=rtl] .mat-calendar-body-comparison-start:not(.mat-calendar-body-comparison-bridge-start)::before,[dir=rtl] .mat-calendar-body-comparison-start::after,[dir=rtl] .mat-calendar-body-preview-start .mat-calendar-body-cell-preview{left:0;border-radius:0;border-top-right-radius:999px;border-bottom-right-radius:999px}.mat-calendar-body-range-end:not(.mat-calendar-body-in-comparison-range)::before,.mat-calendar-body-range-end::after,.mat-calendar-body-comparison-end:not(.mat-calendar-body-comparison-bridge-end)::before,.mat-calendar-body-comparison-end::after,.mat-calendar-body-preview-end .mat-calendar-body-cell-preview{width:95%;border-top-right-radius:999px;border-bottom-right-radius:999px}[dir=rtl] .mat-calendar-body-range-end:not(.mat-calendar-body-in-comparison-range)::before,[dir=rtl] .mat-calendar-body-range-end::after,[dir=rtl] .mat-calendar-body-comparison-end:not(.mat-calendar-body-comparison-bridge-end)::before,[dir=rtl] .mat-calendar-body-comparison-end::after,[dir=rtl] .mat-calendar-body-preview-end .mat-calendar-body-cell-preview{left:5%;border-radius:0;border-top-left-radius:999px;border-bottom-left-radius:999px}[dir=rtl] .mat-calendar-body-comparison-bridge-start.mat-calendar-body-range-end::after,[dir=rtl] .mat-calendar-body-comparison-bridge-end.mat-calendar-body-range-start::after{width:95%;border-top-right-radius:999px;border-bottom-right-radius:999px}.mat-calendar-body-comparison-start.mat-calendar-body-range-end::after,[dir=rtl] .mat-calendar-body-comparison-start.mat-calendar-body-range-end::after,.mat-calendar-body-comparison-end.mat-calendar-body-range-start::after,[dir=rtl] .mat-calendar-body-comparison-end.mat-calendar-body-range-start::after{width:90%}.mat-calendar-body-in-preview .mat-calendar-body-cell-preview{border-top:dashed 1px;border-bottom:dashed 1px}.mat-calendar-body-preview-start .mat-calendar-body-cell-preview{border-left:dashed 1px}[dir=rtl] .mat-calendar-body-preview-start .mat-calendar-body-cell-preview{border-left:0;border-right:dashed 1px}.mat-calendar-body-preview-end .mat-calendar-body-cell-preview{border-right:dashed 1px}[dir=rtl] .mat-calendar-body-preview-end .mat-calendar-body-cell-preview{border-right:0;border-left:dashed 1px}.mat-calendar-body-disabled{cursor:default}.cdk-high-contrast-active .mat-calendar-body-disabled{opacity:.5}.mat-calendar-body-cell-content{top:5%;left:5%;z-index:1;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:90%;height:90%;line-height:1;border-width:1px;border-style:solid;border-radius:999px}.mat-calendar-body-cell-content.mat-focus-indicator{position:absolute}.cdk-high-contrast-active .mat-calendar-body-cell-content{border:none}.cdk-high-contrast-active .mat-datepicker-popup:not(:empty),.cdk-high-contrast-active .mat-calendar-body-cell:not(.mat-calendar-body-in-range) .mat-calendar-body-selected{outline:solid 1px}.cdk-high-contrast-active .mat-calendar-body-today{outline:dotted 1px}.cdk-high-contrast-active .mat-calendar-body-cell::before,.cdk-high-contrast-active .mat-calendar-body-cell::after,.cdk-high-contrast-active .mat-calendar-body-selected{background:none}.cdk-high-contrast-active .mat-calendar-body-in-range::before,.cdk-high-contrast-active .mat-calendar-body-comparison-bridge-start::before,.cdk-high-contrast-active .mat-calendar-body-comparison-bridge-end::before{border-top:solid 1px;border-bottom:solid 1px}.cdk-high-contrast-active .mat-calendar-body-range-start::before{border-left:solid 1px}[dir=rtl] .cdk-high-contrast-active .mat-calendar-body-range-start::before{border-left:0;border-right:solid 1px}.cdk-high-contrast-active .mat-calendar-body-range-end::before{border-right:solid 1px}[dir=rtl] .cdk-high-contrast-active .mat-calendar-body-range-end::before{border-right:0;border-left:solid 1px}.cdk-high-contrast-active .mat-calendar-body-in-comparison-range::before{border-top:dashed 1px;border-bottom:dashed 1px}.cdk-high-contrast-active .mat-calendar-body-comparison-start::before{border-left:dashed 1px}[dir=rtl] .cdk-high-contrast-active .mat-calendar-body-comparison-start::before{border-left:0;border-right:dashed 1px}.cdk-high-contrast-active .mat-calendar-body-comparison-end::before{border-right:dashed 1px}[dir=rtl] .cdk-high-contrast-active .mat-calendar-body-comparison-end::before{border-right:0;border-left:dashed 1px}[dir=rtl] .mat-calendar-body-label{text-align:right}\"] }]\n }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { label: [{\n type: Input\n }], rows: [{\n type: Input\n }], todayValue: [{\n type: Input\n }], startValue: [{\n type: Input\n }], endValue: [{\n type: Input\n }], labelMinRequiredCells: [{\n type: Input\n }], numCols: [{\n type: Input\n }], activeCell: [{\n type: Input\n }], isRange: [{\n type: Input\n }], cellAspectRatio: [{\n type: Input\n }], comparisonStart: [{\n type: Input\n }], comparisonEnd: [{\n type: Input\n }], previewStart: [{\n type: Input\n }], previewEnd: [{\n type: Input\n }], startDateAccessibleName: [{\n type: Input\n }], endDateAccessibleName: [{\n type: Input\n }], selectedValueChange: [{\n type: Output\n }], previewChange: [{\n type: Output\n }], activeDateChange: [{\n type: Output\n }], dragStarted: [{\n type: Output\n }], dragEnded: [{\n type: Output\n }] } });\n/** Checks whether a node is a table cell element. */\nfunction isTableCell(node) {\n return node?.nodeName === 'TD';\n}\n/**\n * Gets the date table cell element that is or contains the specified element.\n * Or returns null if element is not part of a date cell.\n */\nfunction getCellElement(element) {\n let cell;\n if (isTableCell(element)) {\n cell = element;\n }\n else if (isTableCell(element.parentNode)) {\n cell = element.parentNode;\n }\n else if (isTableCell(element.parentNode?.parentNode)) {\n cell = element.parentNode.parentNode;\n }\n return cell?.getAttribute('data-mat-row') != null ? cell : null;\n}\n/** Checks whether a value is the start of a range. */\nfunction isStart(value, start, end) {\n return end !== null && start !== end && value < end && value === start;\n}\n/** Checks whether a value is the end of a range. */\nfunction isEnd(value, start, end) {\n return start !== null && start !== end && value >= start && value === end;\n}\n/** Checks whether a value is inside of a range. */\nfunction isInRange(value, start, end, rangeEnabled) {\n return (rangeEnabled &&\n start !== null &&\n end !== null &&\n start !== end &&\n value >= start &&\n value <= end);\n}\n/**\n * Extracts the element that actually corresponds to a touch event's location\n * (rather than the element that initiated the sequence of touch events).\n */\nfunction getActualTouchTarget(event) {\n const touchLocation = event.changedTouches[0];\n return document.elementFromPoint(touchLocation.clientX, touchLocation.clientY);\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/** A class representing a range of dates. */\nclass DateRange {\n constructor(\n /** The start date of the range. */\n start, \n /** The end date of the range. */\n end) {\n this.start = start;\n this.end = end;\n }\n}\n/**\n * A selection model containing a date selection.\n * @docs-private\n */\nclass MatDateSelectionModel {\n constructor(\n /** The current selection. */\n selection, _adapter) {\n this.selection = selection;\n this._adapter = _adapter;\n this._selectionChanged = new Subject();\n /** Emits when the selection has changed. */\n this.selectionChanged = this._selectionChanged;\n this.selection = selection;\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, source) {\n const oldValue = this.selection;\n this.selection = value;\n this._selectionChanged.next({ selection: value, source, oldValue });\n }\n ngOnDestroy() {\n this._selectionChanged.complete();\n }\n _isValidDateInstance(date) {\n return this._adapter.isDateInstance(date) && this._adapter.isValid(date);\n }\n}\nMatDateSelectionModel.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0-rc.0\", ngImport: i0, type: MatDateSelectionModel, deps: \"invalid\", target: i0.ɵɵFactoryTarget.Injectable });\nMatDateSelectionModel.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: \"12.0.0\", version: \"15.2.0-rc.0\", ngImport: i0, type: MatDateSelectionModel });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0-rc.0\", ngImport: i0, type: MatDateSelectionModel, decorators: [{\n type: Injectable\n }], ctorParameters: function () { return [{ type: undefined }, { type: i1$1.DateAdapter }]; } });\n/**\n * A selection model that contains a single date.\n * @docs-private\n */\nclass MatSingleDateSelectionModel extends MatDateSelectionModel {\n constructor(adapter) {\n super(null, adapter);\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) {\n super.updateSelection(date, this);\n }\n /** Checks whether the current selection is valid. */\n isValid() {\n return this.selection != null && this._isValidDateInstance(this.selection);\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 /** Clones the selection model. */\n clone() {\n const clone = new MatSingleDateSelectionModel(this._adapter);\n clone.updateSelection(this.selection, this);\n return clone;\n }\n}\nMatSingleDateSelectionModel.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0-rc.0\", ngImport: i0, type: MatSingleDateSelectionModel, deps: [{ token: i1$1.DateAdapter }], target: i0.ɵɵFactoryTarget.Injectable });\nMatSingleDateSelectionModel.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: \"12.0.0\", version: \"15.2.0-rc.0\", ngImport: i0, type: MatSingleDateSelectionModel });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0-rc.0\", ngImport: i0, type: MatSingleDateSelectionModel, decorators: [{\n type: Injectable\n }], ctorParameters: function () { return [{ type: i1$1.DateAdapter }]; } });\n/**\n * A selection model that contains a date range.\n * @docs-private\n */\nclass MatRangeDateSelectionModel extends MatDateSelectionModel {\n constructor(adapter) {\n super(new DateRange(null, null), adapter);\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) {\n let { start, end } = this.selection;\n if (start == null) {\n start = date;\n }\n else if (end == null) {\n end = date;\n }\n else {\n start = date;\n end = null;\n }\n super.updateSelection(new DateRange(start, end), this);\n }\n /** Checks whether the current selection is valid. */\n isValid() {\n const { start, end } = this.selection;\n // Empty ranges are valid.\n if (start == null && end == null) {\n return true;\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 (this._isValidDateInstance(start) &&\n this._isValidDateInstance(end) &&\n this._adapter.compareDate(start, end) <= 0);\n }\n // Partial ranges are valid if the start/end is valid.\n return ((start == null || this._isValidDateInstance(start)) &&\n (end == null || this._isValidDateInstance(end)));\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() {\n return this.selection.start != null && this.selection.end != null;\n }\n /** Clones the selection model. */\n clone() {\n const clone = new MatRangeDateSelectionModel(this._adapter);\n clone.updateSelection(this.selection, this);\n return clone;\n }\n}\nMatRangeDateSelectionModel.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0-rc.0\", ngImport: i0, type: MatRangeDateSelectionModel, deps: [{ token: i1$1.DateAdapter }], target: i0.ɵɵFactoryTarget.Injectable });\nMatRangeDateSelectionModel.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: \"12.0.0\", version: \"15.2.0-rc.0\", ngImport: i0, type: MatRangeDateSelectionModel });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0-rc.0\", ngImport: i0, type: MatRangeDateSelectionModel, decorators: [{\n type: Injectable\n }], ctorParameters: function () { return [{ type: i1$1.DateAdapter }]; } });\n/** @docs-private */\nfunction MAT_SINGLE_DATE_SELECTION_MODEL_FACTORY(parent, adapter) {\n return parent || new MatSingleDateSelectionModel(adapter);\n}\n/**\n * Used to provide a single selection model to a component.\n * @docs-private\n */\nconst MAT_SINGLE_DATE_SELECTION_MODEL_PROVIDER = {\n provide: MatDateSelectionModel,\n deps: [[new Optional(), new SkipSelf(), MatDateSelectionModel], DateAdapter],\n useFactory: MAT_SINGLE_DATE_SELECTION_MODEL_FACTORY,\n};\n/** @docs-private */\nfunction MAT_RANGE_DATE_SELECTION_MODEL_FACTORY(parent, adapter) {\n return parent || new MatRangeDateSelectionModel(adapter);\n}\n/**\n * Used to provide a range selection model to a component.\n * @docs-private\n */\nconst MAT_RANGE_DATE_SELECTION_MODEL_PROVIDER = {\n provide: MatDateSelectionModel,\n deps: [[new Optional(), new SkipSelf(), MatDateSelectionModel], DateAdapter],\n useFactory: MAT_RANGE_DATE_SELECTION_MODEL_FACTORY,\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/** Injection token used to customize the date range selection behavior. */\nconst MAT_DATE_RANGE_SELECTION_STRATEGY = new InjectionToken('MAT_DATE_RANGE_SELECTION_STRATEGY');\n/** Provides the default date range selection behavior. */\nclass DefaultMatCalendarRangeStrategy {\n constructor(_dateAdapter) {\n this._dateAdapter = _dateAdapter;\n }\n selectionFinished(date, currentRange) {\n let { start, end } = currentRange;\n if (start == null) {\n start = date;\n }\n else if (end == null && date && this._dateAdapter.compareDate(date, start) >= 0) {\n end = date;\n }\n else {\n start = date;\n end = null;\n }\n return new DateRange(start, end);\n }\n createPreview(activeDate, currentRange) {\n let start = null;\n let end = null;\n if (currentRange.start && !currentRange.end && activeDate) {\n start = currentRange.start;\n end = activeDate;\n }\n return new DateRange(start, end);\n }\n createDrag(dragOrigin, originalRange, newDate) {\n let start = originalRange.start;\n let end = originalRange.end;\n if (!start || !end) {\n // Can't drag from an incomplete range.\n return null;\n }\n const adapter = this._dateAdapter;\n const isRange = adapter.compareDate(start, end) !== 0;\n const diffYears = adapter.getYear(newDate) - adapter.getYear(dragOrigin);\n const diffMonths = adapter.getMonth(newDate) - adapter.getMonth(dragOrigin);\n const diffDays = adapter.getDate(newDate) - adapter.getDate(dragOrigin);\n if (isRange && adapter.sameDate(dragOrigin, originalRange.start)) {\n start = newDate;\n if (adapter.compareDate(newDate, end) > 0) {\n end = adapter.addCalendarYears(end, diffYears);\n end = adapter.addCalendarMonths(end, diffMonths);\n end = adapter.addCalendarDays(end, diffDays);\n }\n }\n else if (isRange && adapter.sameDate(dragOrigin, originalRange.end)) {\n end = newDate;\n if (adapter.compareDate(newDate, start) < 0) {\n start = adapter.addCalendarYears(start, diffYears);\n start = adapter.addCalendarMonths(start, diffMonths);\n start = adapter.addCalendarDays(start, diffDays);\n }\n }\n else {\n start = adapter.addCalendarYears(start, diffYears);\n start = adapter.addCalendarMonths(start, diffMonths);\n start = adapter.addCalendarDays(start, diffDays);\n end = adapter.addCalendarYears(end, diffYears);\n end = adapter.addCalendarMonths(end, diffMonths);\n end = adapter.addCalendarDays(end, diffDays);\n }\n return new DateRange(start, end);\n }\n}\nDefaultMatCalendarRangeStrategy.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0-rc.0\", ngImport: i0, type: DefaultMatCalendarRangeStrategy, deps: [{ token: i1$1.DateAdapter }], target: i0.ɵɵFactoryTarget.Injectable });\nDefaultMatCalendarRangeStrategy.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: \"12.0.0\", version: \"15.2.0-rc.0\", ngImport: i0, type: DefaultMatCalendarRangeStrategy });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0-rc.0\", ngImport: i0, type: DefaultMatCalendarRangeStrategy, decorators: [{\n type: Injectable\n }], ctorParameters: function () { return [{ type: i1$1.DateAdapter }]; } });\n/** @docs-private */\nfunction MAT_CALENDAR_RANGE_STRATEGY_PROVIDER_FACTORY(parent, adapter) {\n return parent || new DefaultMatCalendarRangeStrategy(adapter);\n}\n/** @docs-private */\nconst MAT_CALENDAR_RANGE_STRATEGY_PROVIDER = {\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/**\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 */\nconst DAYS_PER_WEEK = 7;\n/**\n * An internal component used to display a single month in the datepicker.\n * @docs-private\n */\nclass MatMonthView {\n /**\n * The date to display in this month view (everything other than the month and year is ignored).\n */\n get activeDate() {\n return this._activeDate;\n }\n set activeDate(value) {\n const oldActiveDate = this._activeDate;\n const validDate = 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 /** The currently selected date. */\n get selected() {\n return this._selected;\n }\n set selected(value) {\n if (value instanceof DateRange) {\n this._selected = value;\n }\n else {\n this._selected = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));\n }\n this._setRanges(this._selected);\n }\n /** The minimum selectable date. */\n get minDate() {\n return this._minDate;\n }\n set minDate(value) {\n this._minDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));\n }\n /** The maximum selectable date. */\n get maxDate() {\n return this._maxDate;\n }\n set maxDate(value) {\n this._maxDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));\n }\n constructor(_changeDetectorRef, _dateFormats, _dateAdapter, _dir, _rangeStrategy) {\n this._changeDetectorRef = _changeDetectorRef;\n this._dateFormats = _dateFormats;\n this._dateAdapter = _dateAdapter;\n this._dir = _dir;\n this._rangeStrategy = _rangeStrategy;\n this._rerenderSubscription = Subscription.EMPTY;\n /** Origin of active drag, or null when dragging is not active. */\n this.activeDrag = null;\n /** Emits when a new date is selected. */\n this.selectedChange = new EventEmitter();\n /** Emits when any date is selected. */\n this._userSelection = new EventEmitter();\n /** Emits when the user initiates a date range drag via mouse or touch. */\n this.dragStarted = new EventEmitter();\n /**\n * Emits when the user completes or cancels a date range drag.\n * Emits null when the drag was canceled or the newly selected date range if completed.\n */\n this.dragEnded = new EventEmitter();\n /** Emits when any date is activated. */\n this.activeDateChange = new EventEmitter();\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 this._activeDate = this._dateAdapter.today();\n }\n ngAfterContentInit() {\n this._rerenderSubscription = this._dateAdapter.localeChanges\n .pipe(startWith(null))\n .subscribe(() => this._init());\n }\n ngOnChanges(changes) {\n const comparisonChange = changes['comparisonStart'] || changes['comparisonEnd'];\n if (comparisonChange && !comparisonChange.firstChange) {\n this._setRanges(this.selected);\n }\n if (changes['activeDrag'] && !this.activeDrag) {\n this._clearPreview();\n }\n }\n ngOnDestroy() {\n this._rerenderSubscription.unsubscribe();\n }\n /** Handles when a new date is selected. */\n _dateSelected(event) {\n const date = event.value;\n const selectedDate = this._getDateFromDayOfMonth(date);\n let rangeStartDate;\n let rangeEndDate;\n if (this._selected instanceof DateRange) {\n rangeStartDate = this._getDateInCurrentMonth(this._selected.start);\n rangeEndDate = this._getDateInCurrentMonth(this._selected.end);\n }\n else {\n rangeStartDate = rangeEndDate = this._getDateInCurrentMonth(this._selected);\n }\n if (rangeStartDate !== date || rangeEndDate !== date) {\n this.selectedChange.emit(selectedDate);\n }\n this._userSelection.emit({ value: selectedDate, event: event.event });\n this._clearPreview();\n this._changeDetectorRef.markForCheck();\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) {\n const month = event.value;\n const oldActiveDate = this._activeDate;\n this.activeDate = this._getDateFromDayOfMonth(month);\n if (this._dateAdapter.compareDate(oldActiveDate, this.activeDate)) {\n this.activeDateChange.emit(this._activeDate);\n }\n }\n /** Handles keydown events on the calendar body when calendar is in month view. */\n _handleCalendarBodyKeydown(event) {\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 const oldActiveDate = this._activeDate;\n const isRtl = this._isRtl();\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(this._activeDate, 1 - this._dateAdapter.getDate(this._activeDate));\n break;\n case END:\n this.activeDate = this._dateAdapter.addCalendarDays(this._activeDate, this._dateAdapter.getNumDaysInMonth(this._activeDate) -\n this._dateAdapter.getDate(this._activeDate));\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 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._clearPreview();\n // If a drag is in progress, cancel the drag without changing the\n // current selection.\n if (this.activeDrag) {\n this.dragEnded.emit({ value: null, event });\n }\n else {\n this.selectedChange.emit(null);\n this._userSelection.emit({ value: null, event });\n }\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 if (this._dateAdapter.compareDate(oldActiveDate, this.activeDate)) {\n this.activeDateChange.emit(this.activeDate);\n this._focusActiveCellAfterViewChecked();\n }\n // Prevent unexpected default actions such as form submission.\n event.preventDefault();\n }\n /** Handles keyup events on the calendar body when calendar is in month view. */\n _handleCalendarBodyKeyup(event) {\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 this._selectionKeyPressed = false;\n }\n }\n /** Initializes this month view. */\n _init() {\n this._setRanges(this.selected);\n this._todayDate = this._getCellCompareValue(this._dateAdapter.today());\n this._monthLabel = this._dateFormats.display.monthLabel\n ? this._dateAdapter.format(this.activeDate, this._dateFormats.display.monthLabel)\n : this._dateAdapter\n .getMonthNames('short')[this._dateAdapter.getMonth(this.activeDate)].toLocaleUpperCase();\n let firstOfMonth = this._dateAdapter.createDate(this._dateAdapter.getYear(this.activeDate), this._dateAdapter.getMonth(this.activeDate), 1);\n this._firstWeekOffset =\n (DAYS_PER_WEEK +\n this._dateAdapter.getDayOfWeek(firstOfMonth) -\n this._dateAdapter.getFirstDayOfWeek()) %\n DAYS_PER_WEEK;\n this._initWeekdays();\n this._createWeekCells();\n this._changeDetectorRef.markForCheck();\n }\n /** Focuses the active cell after the microtask queue is empty. */\n _focusActiveCell(movePreview) {\n this._matCalendarBody._focusActiveCell(movePreview);\n }\n /** Focuses the active cell after change detection has run and the microtask queue is empty. */\n _focusActiveCellAfterViewChecked() {\n this._matCalendarBody._scheduleFocusActiveCellAfterViewChecked();\n }\n /** Called when the user has activated a new cell and the preview needs to be updated. */\n _previewChanged({ event, value: cell }) {\n if (this._rangeStrategy) {\n // We can assume that this will be a range, because preview\n // events aren't fired for single date selections.\n const value = cell ? cell.rawValue : null;\n const previewRange = this._rangeStrategy.createPreview(value, this.selected, event);\n this._previewStart = this._getCellCompareValue(previewRange.start);\n this._previewEnd = this._getCellCompareValue(previewRange.end);\n if (this.activeDrag && value) {\n const dragRange = this._rangeStrategy.createDrag?.(this.activeDrag.value, this.selected, value, event);\n if (dragRange) {\n this._previewStart = this._getCellCompareValue(dragRange.start);\n this._previewEnd = this._getCellCompareValue(dragRange.end);\n }\n }\n // Note that here we need to use `detectChanges`, rather than `markForCheck`, because\n // the way `_focusActiveCell` is set up at the moment makes it fire at the wrong time\n // when navigating one month back using the keyboard which will cause this handler\n // to throw a \"changed after checked\" error when updating the preview state.\n this._changeDetectorRef.detectChanges();\n }\n }\n /**\n * Called when the user has ended a drag. If the drag/drop was successful,\n * computes and emits the new range selection.\n */\n _dragEnded(event) {\n if (!this.activeDrag)\n return;\n if (event.value) {\n // Propagate drag effect\n const dragDropResult = this._rangeStrategy?.createDrag?.(this.activeDrag.value, this.selected, event.value, event.event);\n this.dragEnded.emit({ value: dragDropResult ?? null, event: event.event });\n }\n else {\n this.dragEnded.emit({ value: null, event: event.event });\n }\n }\n /**\n * Takes a day of the month and returns a new date in the same month and year as the currently\n * active date. The returned date will have the same day of the month as the argument date.\n */\n _getDateFromDayOfMonth(dayOfMonth) {\n return this._dateAdapter.createDate(this._dateAdapter.getYear(this.activeDate), this._dateAdapter.getMonth(this.activeDate), dayOfMonth);\n }\n /** Initializes the weekdays. */\n _initWeekdays() {\n const firstDayOfWeek = this._dateAdapter.getFirstDayOfWeek();\n const narrowWeekdays = this._dateAdapter.getDayOfWeekNames('narrow');\n const longWeekdays = this._dateAdapter.getDayOfWeekNames('long');\n // Rotate the labels for days of the week based on the configured first day of the week.\n let weekdays = longWeekdays.map((long, i) => {\n return { long, narrow: narrowWeekdays[i] };\n });\n this._weekdays = weekdays.slice(firstDayOfWeek).concat(weekdays.slice(0, firstDayOfWeek));\n }\n /** Creates MatCalendarCells for the dates in this month. */\n _createWeekCells() {\n const daysInMonth = this._dateAdapter.getNumDaysInMonth(this.activeDate);\n const dateNames = this._dateAdapter.getDateNames();\n this._weeks = [[]];\n for (let i = 0, cell = this._firstWeekOffset; i < daysInMonth; i++, cell++) {\n if (cell == DAYS_PER_WEEK) {\n this._weeks.push([]);\n cell = 0;\n }\n const date = this._dateAdapter.createDate(this._dateAdapter.getYear(this.activeDate), this._dateAdapter.getMonth(this.activeDate), i + 1);\n const enabled = this._shouldEnableDate(date);\n const ariaLabel = this._dateAdapter.format(date, this._dateFormats.display.dateA11yLabel);\n const cellClasses = this.dateClass ? this.dateClass(date, 'month') : undefined;\n this._weeks[this._weeks.length - 1].push(new MatCalendarCell(i + 1, dateNames[i], ariaLabel, enabled, cellClasses, this._getCellCompareValue(date), date));\n }\n }\n /** Date filter for the month */\n _shouldEnableDate(date) {\n return (!!date &&\n (!this.minDate || this._dateAdapter.compareDate(date, this.minDate) >= 0) &&\n (!this.maxDate || this._dateAdapter.compareDate(date, this.maxDate) <= 0) &&\n (!this.dateFilter || this.dateFilter(date)));\n }\n /**\n * Gets the date in this month that the given Date falls on.\n * Returns null if the given Date is in another month.\n */\n _getDateInCurrentMonth(date) {\n return date && this._hasSameMonthAndYear(date, this.activeDate)\n ? this._dateAdapter.getDate(date)\n : null;\n }\n /** Checks whether the 2 dates are non-null and fall within the same month of the same year. */\n _hasSameMonthAndYear(d1, d2) {\n return !!(d1 &&\n d2 &&\n this._dateAdapter.getMonth(d1) == this._dateAdapter.getMonth(d2) &&\n this._dateAdapter.getYear(d1) == this._dateAdapter.getYear(d2));\n }\n /** Gets the value that will be used to one cell to another. */\n _getCellCompareValue(date) {\n if (date) {\n // We use the time since the Unix epoch to compare dates in this view, rather than the\n // cell values, because we need to support ranges that span across multiple months/years.\n const year = this._dateAdapter.getYear(date);\n const month = this._dateAdapter.getMonth(date);\n const day = this._dateAdapter.getDate(date);\n return new Date(year, month, day).getTime();\n }\n return null;\n }\n /** Determines whether the user has the RTL layout direction. */\n _isRtl() {\n return this._dir && this._dir.value === 'rtl';\n }\n /** Sets the current range based on a model value. */\n _setRanges(selectedValue) {\n if (selectedValue instanceof DateRange) {\n this._rangeStart = this._getCellCompareValue(selectedValue.start);\n this._rangeEnd = this._getCellCompareValue(selectedValue.end);\n this._isRange = true;\n }\n else {\n this._rangeStart = this._rangeEnd = this._getCellCompareValue(selectedValue);\n this._isRange = false;\n }\n this._comparisonRangeStart = this._getCellCompareValue(this.comparisonStart);\n this._comparisonRangeEnd = this._getCellCompareValue(this.comparisonEnd);\n }\n /** Gets whether a date can be selected in the month view. */\n _canSelect(date) {\n return !this.dateFilter || this.dateFilter(date);\n }\n /** Clears out preview state. */\n _clearPreview() {\n this._previewStart = this._previewEnd = null;\n }\n}\nMatMonthView.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0-rc.0\", ngImport: i0, type: MatMonthView, deps: [{ token: i0.ChangeDetectorRef }, { token: MAT_DATE_FORMATS, optional: true }, { token: i1$1.DateAdapter, optional: true }, { token: i2.Directionality, optional: true }, { token: MAT_DATE_RANGE_SELECTION_STRATEGY, optional: true }], target: i0.ɵɵFactoryTarget.Component });\nMatMonthView.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: \"14.0.0\", version: \"15.2.0-rc.0\", type: MatMonthView, selector: \"mat-month-view\", inputs: { activeDate: \"activeDate\", selected: \"selected\", minDate: \"minDate\", maxDate: \"maxDate\", dateFilter: \"dateFilter\", dateClass: \"dateClass\", comparisonStart: \"comparisonStart\", comparisonEnd: \"comparisonEnd\", startDateAccessibleName: \"startDateAccessibleName\", endDateAccessibleName: \"endDateAccessibleName\", activeDrag: \"activeDrag\" }, outputs: { selectedChange: \"selectedChange\", _userSelection: \"_userSelection\", dragStarted: \"dragStarted\", dragEnded: \"dragEnded\", activeDateChange: \"activeDateChange\" }, viewQueries: [{ propertyName: \"_matCalendarBody\", first: true, predicate: MatCalendarBody, descendants: true }], exportAs: [\"matMonthView\"], usesOnChanges: true, ngImport: i0, template: \"
\\n\" }]\n }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{\n type: Optional\n }, {\n type: Inject,\n args: [MAT_DATE_FORMATS]\n }] }, { type: i1$1.DateAdapter, decorators: [{\n type: Optional\n }] }, { type: i2.Directionality, decorators: [{\n type: Optional\n }] }, { type: undefined, decorators: [{\n type: Inject,\n args: [MAT_DATE_RANGE_SELECTION_STRATEGY]\n }, {\n type: Optional\n }] }]; }, propDecorators: { activeDate: [{\n type: Input\n }], selected: [{\n type: Input\n }], minDate: [{\n type: Input\n }], maxDate: [{\n type: Input\n }], dateFilter: [{\n type: Input\n }], dateClass: [{\n type: Input\n }], comparisonStart: [{\n type: Input\n }], comparisonEnd: [{\n type: Input\n }], startDateAccessibleName: [{\n type: Input\n }], endDateAccessibleName: [{\n type: Input\n }], activeDrag: [{\n type: Input\n }], selectedChange: [{\n type: Output\n }], _userSelection: [{\n type: Output\n }], dragStarted: [{\n type: Output\n }], dragEnded: [{\n type: Output\n }], activeDateChange: [{\n type: Output\n }], _matCalendarBody: [{\n type: ViewChild,\n args: [MatCalendarBody]\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 */\nconst yearsPerPage = 24;\nconst yearsPerRow = 4;\n/**\n * An internal component used to display a year selector in the datepicker.\n * @docs-private\n */\nclass MatMultiYearView {\n /** The date to display in this multi-year view (everything other than the year is ignored). */\n get activeDate() {\n return this._activeDate;\n }\n set activeDate(value) {\n let oldActiveDate = this._activeDate;\n const validDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value)) ||\n this._dateAdapter.today();\n this._activeDate = this._dateAdapter.clampDate(validDate, this.minDate, this.maxDate);\n if (!isSameMultiYearView(this._dateAdapter, oldActiveDate, this._activeDate, this.minDate, this.maxDate)) {\n this._init();\n }\n }\n /** The currently selected date. */\n get selected() {\n return this._selected;\n }\n set selected(value) {\n if (value instanceof DateRange) {\n this._selected = value;\n }\n else {\n this._selected = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));\n }\n this._setSelectedYear(value);\n }\n /** The minimum selectable date. */\n get minDate() {\n return this._minDate;\n }\n set minDate(value) {\n this._minDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));\n }\n /** The maximum selectable date. */\n get maxDate() {\n return this._maxDate;\n }\n set maxDate(value) {\n this._maxDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));\n }\n constructor(_changeDetectorRef, _dateAdapter, _dir) {\n this._changeDetectorRef = _changeDetectorRef;\n this._dateAdapter = _dateAdapter;\n this._dir = _dir;\n this._rerenderSubscription = Subscription.EMPTY;\n /** Emits when a new year is selected. */\n this.selectedChange = new EventEmitter();\n /** Emits the selected year. This doesn't imply a change on the selected date */\n this.yearSelected = new EventEmitter();\n /** Emits when any date is activated. */\n this.activeDateChange = new EventEmitter();\n if (!this._dateAdapter && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n throw createMissingDateImplError('DateAdapter');\n }\n this._activeDate = this._dateAdapter.today();\n }\n ngAfterContentInit() {\n this._rerenderSubscription = this._dateAdapter.localeChanges\n .pipe(startWith(null))\n .subscribe(() => this._init());\n }\n ngOnDestroy() {\n this._rerenderSubscription.unsubscribe();\n }\n /** Initializes this multi-year view. */\n _init() {\n this._todayYear = this._dateAdapter.getYear(this._dateAdapter.today());\n // We want a range years such that we maximize the number of\n // enabled dates visible at once. This prevents issues where the minimum year\n // is the last item of a page OR the maximum year is the first item of a page.\n // The offset from the active year to the \"slot\" for the starting year is the\n // *actual* first rendered year in the multi-year view.\n const activeYear = this._dateAdapter.getYear(this._activeDate);\n const minYearOfPage = activeYear - getActiveOffset(this._dateAdapter, this.activeDate, this.minDate, this.maxDate);\n this._years = [];\n for (let i = 0, row = []; i < yearsPerPage; i++) {\n row.push(minYearOfPage + i);\n if (row.length == yearsPerRow) {\n this._years.push(row.map(year => this._createCellForYear(year)));\n row = [];\n }\n }\n this._changeDetectorRef.markForCheck();\n }\n /** Handles when a new year is selected. */\n _yearSelected(event) {\n const year = event.value;\n const selectedYear = this._dateAdapter.createDate(year, 0, 1);\n const selectedDate = this._getDateFromYear(year);\n this.yearSelected.emit(selectedYear);\n this.selectedChange.emit(selectedDate);\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) {\n const year = event.value;\n const oldActiveDate = this._activeDate;\n this.activeDate = this._getDateFromYear(year);\n if (this._dateAdapter.compareDate(oldActiveDate, this.activeDate)) {\n this.activeDateChange.emit(this.activeDate);\n }\n }\n /** Handles keydown events on the calendar body when calendar is in multi-year view. */\n _handleCalendarBodyKeydown(event) {\n const oldActiveDate = this._activeDate;\n const isRtl = this._isRtl();\n switch (event.keyCode) {\n case LEFT_ARROW:\n this.activeDate = this._dateAdapter.addCalendarYears(this._activeDate, isRtl ? 1 : -1);\n break;\n case RIGHT_ARROW:\n this.activeDate = this._dateAdapter.addCalendarYears(this._activeDate, isRtl ? -1 : 1);\n break;\n case UP_ARROW:\n this.activeDate = this._dateAdapter.addCalendarYears(this._activeDate, -yearsPerRow);\n break;\n case DOWN_ARROW:\n this.activeDate = this._dateAdapter.addCalendarYears(this._activeDate, yearsPerRow);\n break;\n case HOME:\n this.activeDate = this._dateAdapter.addCalendarYears(this._activeDate, -getActiveOffset(this._dateAdapter, this.activeDate, this.minDate, this.maxDate));\n break;\n case END:\n this.activeDate = this._dateAdapter.addCalendarYears(this._activeDate, yearsPerPage -\n getActiveOffset(this._dateAdapter, this.activeDate, this.minDate, this.maxDate) -\n 1);\n break;\n case PAGE_UP:\n this.activeDate = this._dateAdapter.addCalendarYears(this._activeDate, event.altKey ? -yearsPerPage * 10 : -yearsPerPage);\n break;\n case PAGE_DOWN:\n this.activeDate = this._dateAdapter.addCalendarYears(this._activeDate, event.altKey ? yearsPerPage * 10 : yearsPerPage);\n break;\n case ENTER:\n case SPACE:\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 this._selectionKeyPressed = true;\n break;\n default:\n // Don't prevent default or focus active cell on keys that we don't explicitly handle.\n return;\n }\n if (this._dateAdapter.compareDate(oldActiveDate, this.activeDate)) {\n this.activeDateChange.emit(this.activeDate);\n }\n this._focusActiveCellAfterViewChecked();\n // Prevent unexpected default actions such as form submission.\n event.preventDefault();\n }\n /** Handles keyup events on the calendar body when calendar is in multi-year view. */\n _handleCalendarBodyKeyup(event) {\n if (event.keyCode === SPACE || event.keyCode === ENTER) {\n if (this._selectionKeyPressed) {\n this._yearSelected({ value: this._dateAdapter.getYear(this._activeDate), event });\n }\n this._selectionKeyPressed = false;\n }\n }\n _getActiveCell() {\n return getActiveOffset(this._dateAdapter, this.activeDate, this.minDate, this.maxDate);\n }\n /** Focuses the active cell after the microtask queue is empty. */\n _focusActiveCell() {\n this._matCalendarBody._focusActiveCell();\n }\n /** Focuses the active cell after change detection has run and the microtask queue is empty. */\n _focusActiveCellAfterViewChecked() {\n this._matCalendarBody._scheduleFocusActiveCellAfterViewChecked();\n }\n /**\n * Takes a year and returns a new date on the same day and month as the currently active date\n * The returned date will have the same year as the argument date.\n */\n _getDateFromYear(year) {\n const activeMonth = this._dateAdapter.getMonth(this.activeDate);\n const daysInMonth = this._dateAdapter.getNumDaysInMonth(this._dateAdapter.createDate(year, activeMonth, 1));\n const normalizedDate = this._dateAdapter.createDate(year, activeMonth, Math.min(this._dateAdapter.getDate(this.activeDate), daysInMonth));\n return normalizedDate;\n }\n /** Creates an MatCalendarCell for the given year. */\n _createCellForYear(year) {\n const date = this._dateAdapter.createDate(year, 0, 1);\n const yearName = this._dateAdapter.getYearName(date);\n const cellClasses = this.dateClass ? this.dateClass(date, 'multi-year') : undefined;\n return new MatCalendarCell(year, yearName, yearName, this._shouldEnableYear(year), cellClasses);\n }\n /** Whether the given year is enabled. */\n _shouldEnableYear(year) {\n // disable if the year is greater than maxDate lower than minDate\n if (year === undefined ||\n year === null ||\n (this.maxDate && year > this._dateAdapter.getYear(this.maxDate)) ||\n (this.minDate && year < this._dateAdapter.getYear(this.minDate))) {\n return false;\n }\n // enable if it reaches here and there's no filter defined\n if (!this.dateFilter) {\n return true;\n }\n const firstOfYear = this._dateAdapter.createDate(year, 0, 1);\n // If any date in the year is enabled count the year as enabled.\n for (let date = firstOfYear; this._dateAdapter.getYear(date) == year; date = this._dateAdapter.addCalendarDays(date, 1)) {\n if (this.dateFilter(date)) {\n return true;\n }\n }\n return false;\n }\n /** Determines whether the user has the RTL layout direction. */\n _isRtl() {\n return this._dir && this._dir.value === 'rtl';\n }\n /** Sets the currently-highlighted year based on a model value. */\n _setSelectedYear(value) {\n this._selectedYear = null;\n if (value instanceof DateRange) {\n const displayValue = value.start || value.end;\n if (displayValue) {\n this._selectedYear = this._dateAdapter.getYear(displayValue);\n }\n }\n else if (value) {\n this._selectedYear = this._dateAdapter.getYear(value);\n }\n }\n}\nMatMultiYearView.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0-rc.0\", ngImport: i0, type: MatMultiYearView, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.DateAdapter, optional: true }, { token: i2.Directionality, optional: true }], target: i0.ɵɵFactoryTarget.Component });\nMatMultiYearView.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: \"14.0.0\", version: \"15.2.0-rc.0\", type: MatMultiYearView, selector: \"mat-multi-year-view\", inputs: { activeDate: \"activeDate\", selected: \"selected\", minDate: \"minDate\", maxDate: \"maxDate\", dateFilter: \"dateFilter\", dateClass: \"dateClass\" }, outputs: { selectedChange: \"selectedChange\", yearSelected: \"yearSelected\", activeDateChange: \"activeDateChange\" }, viewQueries: [{ propertyName: \"_matCalendarBody\", first: true, predicate: MatCalendarBody, descendants: true }], exportAs: [\"matMultiYearView\"], ngImport: i0, template: \"
\\n\" }]\n }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$1.DateAdapter, decorators: [{\n type: Optional\n }] }, { type: i2.Directionality, decorators: [{\n type: Optional\n }] }]; }, propDecorators: { activeDate: [{\n type: Input\n }], selected: [{\n type: Input\n }], minDate: [{\n type: Input\n }], maxDate: [{\n type: Input\n }], dateFilter: [{\n type: Input\n }], dateClass: [{\n type: Input\n }], selectedChange: [{\n type: Output\n }], yearSelected: [{\n type: Output\n }], activeDateChange: [{\n type: Output\n }], _matCalendarBody: [{\n type: ViewChild,\n args: [MatCalendarBody]\n }] } });\nfunction isSameMultiYearView(dateAdapter, date1, date2, minDate, maxDate) {\n const year1 = dateAdapter.getYear(date1);\n const year2 = dateAdapter.getYear(date2);\n const startingYear = getStartingYear(dateAdapter, minDate, maxDate);\n return (Math.floor((year1 - startingYear) / yearsPerPage) ===\n Math.floor((year2 - startingYear) / yearsPerPage));\n}\n/**\n * When the multi-year view is first opened, the active year will be in view.\n * So we compute how many years are between the active year and the *slot* where our\n * \"startingYear\" will render when paged into view.\n */\nfunction getActiveOffset(dateAdapter, activeDate, minDate, maxDate) {\n const activeYear = dateAdapter.getYear(activeDate);\n return euclideanModulo(activeYear - getStartingYear(dateAdapter, minDate, maxDate), yearsPerPage);\n}\n/**\n * We pick a \"starting\" year such that either the maximum year would be at the end\n * or the minimum year would be at the beginning of a page.\n */\nfunction getStartingYear(dateAdapter, minDate, maxDate) {\n let startingYear = 0;\n if (maxDate) {\n const maxYear = dateAdapter.getYear(maxDate);\n startingYear = maxYear - yearsPerPage + 1;\n }\n else if (minDate) {\n startingYear = dateAdapter.getYear(minDate);\n }\n return startingYear;\n}\n/** Gets remainder that is non-negative, even if first number is negative */\nfunction euclideanModulo(a, b) {\n return ((a % b) + b) % b;\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/**\n * An internal component used to display a single year in the datepicker.\n * @docs-private\n */\nclass MatYearView {\n /** The date to display in this year view (everything other than the year is ignored). */\n get activeDate() {\n return this._activeDate;\n }\n set activeDate(value) {\n let oldActiveDate = this._activeDate;\n const validDate = 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._dateAdapter.getYear(oldActiveDate) !== this._dateAdapter.getYear(this._activeDate)) {\n this._init();\n }\n }\n /** The currently selected date. */\n get selected() {\n return this._selected;\n }\n set selected(value) {\n if (value instanceof DateRange) {\n this._selected = value;\n }\n else {\n this._selected = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));\n }\n this._setSelectedMonth(value);\n }\n /** The minimum selectable date. */\n get minDate() {\n return this._minDate;\n }\n set minDate(value) {\n this._minDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));\n }\n /** The maximum selectable date. */\n get maxDate() {\n return this._maxDate;\n }\n set maxDate(value) {\n this._maxDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));\n }\n constructor(_changeDetectorRef, _dateFormats, _dateAdapter, _dir) {\n this._changeDetectorRef = _changeDetectorRef;\n this._dateFormats = _dateFormats;\n this._dateAdapter = _dateAdapter;\n this._dir = _dir;\n this._rerenderSubscription = Subscription.EMPTY;\n /** Emits when a new month is selected. */\n this.selectedChange = new EventEmitter();\n /** Emits the selected month. This doesn't imply a change on the selected date */\n this.monthSelected = new EventEmitter();\n /** Emits when any date is activated. */\n this.activeDateChange = new EventEmitter();\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 this._activeDate = this._dateAdapter.today();\n }\n ngAfterContentInit() {\n this._rerenderSubscription = this._dateAdapter.localeChanges\n .pipe(startWith(null))\n .subscribe(() => this._init());\n }\n ngOnDestroy() {\n this._rerenderSubscription.unsubscribe();\n }\n /** Handles when a new month is selected. */\n _monthSelected(event) {\n const month = event.value;\n const selectedMonth = this._dateAdapter.createDate(this._dateAdapter.getYear(this.activeDate), month, 1);\n this.monthSelected.emit(selectedMonth);\n const selectedDate = this._getDateFromMonth(month);\n this.selectedChange.emit(selectedDate);\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) {\n const month = event.value;\n const oldActiveDate = this._activeDate;\n this.activeDate = this._getDateFromMonth(month);\n if (this._dateAdapter.compareDate(oldActiveDate, this.activeDate)) {\n this.activeDateChange.emit(this.activeDate);\n }\n }\n /** Handles keydown events on the calendar body when calendar is in year view. */\n _handleCalendarBodyKeydown(event) {\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 const oldActiveDate = this._activeDate;\n const isRtl = this._isRtl();\n switch (event.keyCode) {\n case LEFT_ARROW:\n this.activeDate = this._dateAdapter.addCalendarMonths(this._activeDate, isRtl ? 1 : -1);\n break;\n case RIGHT_ARROW:\n this.activeDate = this._dateAdapter.addCalendarMonths(this._activeDate, isRtl ? -1 : 1);\n break;\n case UP_ARROW:\n this.activeDate = this._dateAdapter.addCalendarMonths(this._activeDate, -4);\n break;\n case DOWN_ARROW:\n this.activeDate = this._dateAdapter.addCalendarMonths(this._activeDate, 4);\n break;\n case HOME:\n this.activeDate = this._dateAdapter.addCalendarMonths(this._activeDate, -this._dateAdapter.getMonth(this._activeDate));\n break;\n case END:\n this.activeDate = this._dateAdapter.addCalendarMonths(this._activeDate, 11 - this._dateAdapter.getMonth(this._activeDate));\n break;\n case PAGE_UP:\n this.activeDate = this._dateAdapter.addCalendarYears(this._activeDate, event.altKey ? -10 : -1);\n break;\n case PAGE_DOWN:\n this.activeDate = this._dateAdapter.addCalendarYears(this._activeDate, event.altKey ? 10 : 1);\n break;\n case ENTER:\n case SPACE:\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 this._selectionKeyPressed = true;\n break;\n default:\n // Don't prevent default or focus active cell on keys that we don't explicitly handle.\n return;\n }\n if (this._dateAdapter.compareDate(oldActiveDate, this.activeDate)) {\n this.activeDateChange.emit(this.activeDate);\n this._focusActiveCellAfterViewChecked();\n }\n // Prevent unexpected default actions such as form submission.\n event.preventDefault();\n }\n /** Handles keyup events on the calendar body when calendar is in year view. */\n _handleCalendarBodyKeyup(event) {\n if (event.keyCode === SPACE || event.keyCode === ENTER) {\n if (this._selectionKeyPressed) {\n this._monthSelected({ value: this._dateAdapter.getMonth(this._activeDate), event });\n }\n this._selectionKeyPressed = false;\n }\n }\n /** Initializes this year view. */\n _init() {\n this._setSelectedMonth(this.selected);\n this._todayMonth = this._getMonthInCurrentYear(this._dateAdapter.today());\n this._yearLabel = this._dateAdapter.getYearName(this.activeDate);\n let monthNames = this._dateAdapter.getMonthNames('short');\n // First row of months only contains 5 elements so we can fit the year label on the same row.\n this._months = [\n [0, 1, 2, 3],\n [4, 5, 6, 7],\n [8, 9, 10, 11],\n ].map(row => row.map(month => this._createCellForMonth(month, monthNames[month])));\n this._changeDetectorRef.markForCheck();\n }\n /** Focuses the active cell after the microtask queue is empty. */\n _focusActiveCell() {\n this._matCalendarBody._focusActiveCell();\n }\n /** Schedules the matCalendarBody to focus the active cell after change detection has run */\n _focusActiveCellAfterViewChecked() {\n this._matCalendarBody._scheduleFocusActiveCellAfterViewChecked();\n }\n /**\n * Gets the month in this year that the given Date falls on.\n * Returns null if the given Date is in another year.\n */\n _getMonthInCurrentYear(date) {\n return date && this._dateAdapter.getYear(date) == this._dateAdapter.getYear(this.activeDate)\n ? this._dateAdapter.getMonth(date)\n : null;\n }\n /**\n * Takes a month and returns a new date in the same day and year as the currently active date.\n * The returned date will have the same month as the argument date.\n */\n _getDateFromMonth(month) {\n const normalizedDate = this._dateAdapter.createDate(this._dateAdapter.getYear(this.activeDate), month, 1);\n const daysInMonth = this._dateAdapter.getNumDaysInMonth(normalizedDate);\n return this._dateAdapter.createDate(this._dateAdapter.getYear(this.activeDate), month, Math.min(this._dateAdapter.getDate(this.activeDate), daysInMonth));\n }\n /** Creates an MatCalendarCell for the given month. */\n _createCellForMonth(month, monthName) {\n const date = this._dateAdapter.createDate(this._dateAdapter.getYear(this.activeDate), month, 1);\n const ariaLabel = this._dateAdapter.format(date, this._dateFormats.display.monthYearA11yLabel);\n const cellClasses = this.dateClass ? this.dateClass(date, 'year') : undefined;\n return new MatCalendarCell(month, monthName.toLocaleUpperCase(), ariaLabel, this._shouldEnableMonth(month), cellClasses);\n }\n /** Whether the given month is enabled. */\n _shouldEnableMonth(month) {\n const activeYear = this._dateAdapter.getYear(this.activeDate);\n if (month === undefined ||\n month === null ||\n this._isYearAndMonthAfterMaxDate(activeYear, month) ||\n this._isYearAndMonthBeforeMinDate(activeYear, month)) {\n return false;\n }\n if (!this.dateFilter) {\n return true;\n }\n const firstOfMonth = this._dateAdapter.createDate(activeYear, month, 1);\n // If any date in the month is enabled count the month as enabled.\n for (let date = firstOfMonth; this._dateAdapter.getMonth(date) == month; date = this._dateAdapter.addCalendarDays(date, 1)) {\n if (this.dateFilter(date)) {\n return true;\n }\n }\n return false;\n }\n /**\n * Tests whether the combination month/year is after this.maxDate, considering\n * just the month and year of this.maxDate\n */\n _isYearAndMonthAfterMaxDate(year, month) {\n if (this.maxDate) {\n const maxYear = this._dateAdapter.getYear(this.maxDate);\n const maxMonth = this._dateAdapter.getMonth(this.maxDate);\n return year > maxYear || (year === maxYear && month > maxMonth);\n }\n return false;\n }\n /**\n * Tests whether the combination month/year is before this.minDate, considering\n * just the month and year of this.minDate\n */\n _isYearAndMonthBeforeMinDate(year, month) {\n if (this.minDate) {\n const minYear = this._dateAdapter.getYear(this.minDate);\n const minMonth = this._dateAdapter.getMonth(this.minDate);\n return year < minYear || (year === minYear && month < minMonth);\n }\n return false;\n }\n /** Determines whether the user has the RTL layout direction. */\n _isRtl() {\n return this._dir && this._dir.value === 'rtl';\n }\n /** Sets the currently-selected month based on a model value. */\n _setSelectedMonth(value) {\n if (value instanceof DateRange) {\n this._selectedMonth =\n this._getMonthInCurrentYear(value.start) || this._getMonthInCurrentYear(value.end);\n }\n else {\n this._selectedMonth = this._getMonthInCurrentYear(value);\n }\n }\n}\nMatYearView.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0-rc.0\", ngImport: i0, type: MatYearView, deps: [{ token: i0.ChangeDetectorRef }, { token: MAT_DATE_FORMATS, optional: true }, { token: i1$1.DateAdapter, optional: true }, { token: i2.Directionality, optional: true }], target: i0.ɵɵFactoryTarget.Component });\nMatYearView.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: \"14.0.0\", version: \"15.2.0-rc.0\", type: MatYearView, selector: \"mat-year-view\", inputs: { activeDate: \"activeDate\", selected: \"selected\", minDate: \"minDate\", maxDate: \"maxDate\", dateFilter: \"dateFilter\", dateClass: \"dateClass\" }, outputs: { selectedChange: \"selectedChange\", monthSelected: \"monthSelected\", activeDateChange: \"activeDateChange\" }, viewQueries: [{ propertyName: \"_matCalendarBody\", first: true, predicate: MatCalendarBody, descendants: true }], exportAs: [\"matYearView\"], ngImport: i0, template: \"
\\n\\n\" }]\n }], ctorParameters: function () { return [{ type: MatDatepickerIntl }, { type: MatCalendar, decorators: [{\n type: Inject,\n args: [forwardRef(() => MatCalendar)]\n }] }, { type: i1$1.DateAdapter, decorators: [{\n type: Optional\n }] }, { type: undefined, decorators: [{\n type: Optional\n }, {\n type: Inject,\n args: [MAT_DATE_FORMATS]\n }] }, { type: i0.ChangeDetectorRef }]; } });\n/** A calendar that is used as part of the datepicker. */\nclass MatCalendar {\n /** A date representing the period (month or year) to start the calendar in. */\n get startAt() {\n return this._startAt;\n }\n set startAt(value) {\n this._startAt = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));\n }\n /** The currently selected date. */\n get selected() {\n return this._selected;\n }\n set selected(value) {\n if (value instanceof DateRange) {\n this._selected = value;\n }\n else {\n this._selected = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));\n }\n }\n /** The minimum selectable date. */\n get minDate() {\n return this._minDate;\n }\n set minDate(value) {\n this._minDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));\n }\n /** The maximum selectable date. */\n get maxDate() {\n return this._maxDate;\n }\n set maxDate(value) {\n this._maxDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));\n }\n /**\n * The current active date. This determines which time period is shown and which date is\n * highlighted when using keyboard navigation.\n */\n get activeDate() {\n return this._clampedActiveDate;\n }\n set activeDate(value) {\n this._clampedActiveDate = this._dateAdapter.clampDate(value, this.minDate, this.maxDate);\n this.stateChanges.next();\n this._changeDetectorRef.markForCheck();\n }\n /** Whether the calendar is in month view. */\n get currentView() {\n return this._currentView;\n }\n set currentView(value) {\n const viewChangedResult = this._currentView !== value ? value : null;\n this._currentView = value;\n this._moveFocusOnNextTick = true;\n this._changeDetectorRef.markForCheck();\n if (viewChangedResult) {\n this.viewChanged.emit(viewChangedResult);\n }\n }\n constructor(_intl, _dateAdapter, _dateFormats, _changeDetectorRef) {\n this._dateAdapter = _dateAdapter;\n this._dateFormats = _dateFormats;\n this._changeDetectorRef = _changeDetectorRef;\n /**\n * Used for scheduling that focus should be moved to the active cell on the next tick.\n * We need to schedule it, rather than do it immediately, because we have to wait\n * for Angular to re-evaluate the view children.\n */\n this._moveFocusOnNextTick = false;\n /** Whether the calendar should be started in month or year view. */\n this.startView = 'month';\n /** Emits when the currently selected date changes. */\n this.selectedChange = new EventEmitter();\n /**\n * Emits the year chosen in multiyear view.\n * This doesn't imply a change on the selected date.\n */\n this.yearSelected = new EventEmitter();\n /**\n * Emits the month chosen in year view.\n * This doesn't imply a change on the selected date.\n */\n this.monthSelected = new EventEmitter();\n /**\n * Emits when the current view changes.\n */\n this.viewChanged = new EventEmitter(true);\n /** Emits when any date is selected. */\n this._userSelection = new EventEmitter();\n /** Emits a new date range value when the user completes a drag drop operation. */\n this._userDragDrop = new EventEmitter();\n /** Origin of active drag, or null when dragging is not active. */\n this._activeDrag = null;\n /**\n * Emits whenever there is a state change that the header may need to respond to.\n */\n this.stateChanges = new Subject();\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 this._intlChanges = _intl.changes.subscribe(() => {\n _changeDetectorRef.markForCheck();\n this.stateChanges.next();\n });\n }\n ngAfterContentInit() {\n this._calendarHeaderPortal = new ComponentPortal(this.headerComponent || MatCalendarHeader);\n this.activeDate = this.startAt || this._dateAdapter.today();\n // Assign to the private property since we don't want to move focus on init.\n this._currentView = this.startView;\n }\n ngAfterViewChecked() {\n if (this._moveFocusOnNextTick) {\n this._moveFocusOnNextTick = false;\n this.focusActiveCell();\n }\n }\n ngOnDestroy() {\n this._intlChanges.unsubscribe();\n this.stateChanges.complete();\n }\n ngOnChanges(changes) {\n // Ignore date changes that are at a different time on the same day. This fixes issues where\n // the calendar re-renders when there is no meaningful change to [minDate] or [maxDate]\n // (#24435).\n const minDateChange = changes['minDate'] &&\n !this._dateAdapter.sameDate(changes['minDate'].previousValue, changes['minDate'].currentValue)\n ? changes['minDate']\n : undefined;\n const maxDateChange = changes['maxDate'] &&\n !this._dateAdapter.sameDate(changes['maxDate'].previousValue, changes['maxDate'].currentValue)\n ? changes['maxDate']\n : undefined;\n const change = minDateChange || maxDateChange || changes['dateFilter'];\n if (change && !change.firstChange) {\n const view = this._getCurrentViewComponent();\n if (view) {\n // We need to `detectChanges` manually here, because the `minDate`, `maxDate` etc. are\n // passed down to the view via data bindings which won't be up-to-date when we call `_init`.\n this._changeDetectorRef.detectChanges();\n view._init();\n }\n }\n this.stateChanges.next();\n }\n /** Focuses the active date. */\n focusActiveCell() {\n this._getCurrentViewComponent()._focusActiveCell(false);\n }\n /** Updates today's date after an update of the active date */\n updateTodaysDate() {\n this._getCurrentViewComponent()._init();\n }\n /** Handles date selection in the month view. */\n _dateSelected(event) {\n const date = event.value;\n if (this.selected instanceof DateRange ||\n (date && !this._dateAdapter.sameDate(date, this.selected))) {\n this.selectedChange.emit(date);\n }\n this._userSelection.emit(event);\n }\n /** Handles year selection in the multiyear view. */\n _yearSelectedInMultiYearView(normalizedYear) {\n this.yearSelected.emit(normalizedYear);\n }\n /** Handles month selection in the year view. */\n _monthSelectedInYearView(normalizedMonth) {\n this.monthSelected.emit(normalizedMonth);\n }\n /** Handles year/month selection in the multi-year/year views. */\n _goToDateInView(date, view) {\n this.activeDate = date;\n this.currentView = view;\n }\n /** Called when the user starts dragging to change a date range. */\n _dragStarted(event) {\n this._activeDrag = event;\n }\n /**\n * Called when a drag completes. It may end in cancelation or in the selection\n * of a new range.\n */\n _dragEnded(event) {\n if (!this._activeDrag)\n return;\n if (event.value) {\n this._userDragDrop.emit(event);\n }\n this._activeDrag = null;\n }\n /** Returns the component instance that corresponds to the current calendar view. */\n _getCurrentViewComponent() {\n // The return type is explicitly written as a union to ensure that the Closure compiler does\n // not optimize calls to _init(). Without the explicit return type, TypeScript narrows it to\n // only the first component type. See https://github.com/angular/components/issues/22996.\n return this.monthView || this.yearView || this.multiYearView;\n }\n}\nMatCalendar.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0-rc.0\", ngImport: i0, type: MatCalendar, deps: [{ token: MatDatepickerIntl }, { token: i1$1.DateAdapter, optional: true }, { token: MAT_DATE_FORMATS, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });\nMatCalendar.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: \"14.0.0\", version: \"15.2.0-rc.0\", type: MatCalendar, selector: \"mat-calendar\", inputs: { headerComponent: \"headerComponent\", startAt: \"startAt\", startView: \"startView\", selected: \"selected\", minDate: \"minDate\", maxDate: \"maxDate\", dateFilter: \"dateFilter\", dateClass: \"dateClass\", comparisonStart: \"comparisonStart\", comparisonEnd: \"comparisonEnd\", startDateAccessibleName: \"startDateAccessibleName\", endDateAccessibleName: \"endDateAccessibleName\" }, outputs: { selectedChange: \"selectedChange\", yearSelected: \"yearSelected\", monthSelected: \"monthSelected\", viewChanged: \"viewChanged\", _userSelection: \"_userSelection\", _userDragDrop: \"_userDragDrop\" }, host: { classAttribute: \"mat-calendar\" }, providers: [MAT_SINGLE_DATE_SELECTION_MODEL_PROVIDER], viewQueries: [{ propertyName: \"monthView\", first: true, predicate: MatMonthView, descendants: true }, { propertyName: \"yearView\", first: true, predicate: MatYearView, descendants: true }, { propertyName: \"multiYearView\", first: true, predicate: MatMultiYearView, descendants: true }], exportAs: [\"matCalendar\"], usesOnChanges: true, ngImport: i0, template: \"\\n\\n
\\n\", styles: [\".mat-calendar{display:block}.mat-calendar-header{padding:8px 8px 0 8px}.mat-calendar-content{padding:0 8px 8px 8px;outline:none}.mat-calendar-controls{display:flex;align-items:center;margin:5% calc(4.7142857143% - 16px)}.mat-calendar-spacer{flex:1 1 auto}.mat-calendar-period-button{min-width:0;margin:0 8px}.mat-calendar-arrow{display:inline-block;width:10px;height:5px;margin:0 0 0 5px;vertical-align:middle}.mat-calendar-arrow.mat-calendar-invert{transform:rotate(180deg)}[dir=rtl] .mat-calendar-arrow{margin:0 5px 0 0}.cdk-high-contrast-active .mat-calendar-arrow{fill:CanvasText}.mat-calendar-previous-button,.mat-calendar-next-button{position:relative}.mat-calendar-previous-button::after,.mat-calendar-next-button::after{top:0;left:0;right:0;bottom:0;position:absolute;content:\\\"\\\";margin:15.5px;border:0 solid currentColor;border-top-width:2px}[dir=rtl] .mat-calendar-previous-button,[dir=rtl] .mat-calendar-next-button{transform:rotate(180deg)}.mat-calendar-previous-button::after{border-left-width:2px;transform:translateX(2px) rotate(-45deg)}.mat-calendar-next-button::after{border-right-width:2px;transform:translateX(-2px) rotate(45deg)}.mat-calendar-table{border-spacing:0;border-collapse:collapse;width:100%}.mat-calendar-table-header th{text-align:center;padding:0 0 8px 0}.mat-calendar-table-header-divider{position:relative;height:1px}.mat-calendar-table-header-divider::after{content:\\\"\\\";position:absolute;top:0;left:-8px;right:-8px;height:1px}.mat-calendar-body-cell-content::before{margin:calc(calc(var(--mat-focus-indicator-border-width, 3px) + 3px) * -1)}.mat-calendar-body-cell:focus .mat-focus-indicator::before{content:\\\"\\\"}.mat-calendar-hidden-label{display:none}\"] }]\n }], ctorParameters: function () { return [{ type: MatDatepickerIntl }, { type: i1$1.DateAdapter, decorators: [{\n type: Optional\n }] }, { type: undefined, decorators: [{\n type: Optional\n }, {\n type: Inject,\n args: [MAT_DATE_FORMATS]\n }] }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { headerComponent: [{\n type: Input\n }], startAt: [{\n type: Input\n }], startView: [{\n type: Input\n }], selected: [{\n type: Input\n }], minDate: [{\n type: Input\n }], maxDate: [{\n type: Input\n }], dateFilter: [{\n type: Input\n }], dateClass: [{\n type: Input\n }], comparisonStart: [{\n type: Input\n }], comparisonEnd: [{\n type: Input\n }], startDateAccessibleName: [{\n type: Input\n }], endDateAccessibleName: [{\n type: Input\n }], selectedChange: [{\n type: Output\n }], yearSelected: [{\n type: Output\n }], monthSelected: [{\n type: Output\n }], viewChanged: [{\n type: Output\n }], _userSelection: [{\n type: Output\n }], _userDragDrop: [{\n type: Output\n }], monthView: [{\n type: ViewChild,\n args: [MatMonthView]\n }], yearView: [{\n type: ViewChild,\n args: [MatYearView]\n }], multiYearView: [{\n type: ViewChild,\n args: [MatMultiYearView]\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/**\n * Animations used by the Material datepicker.\n * @docs-private\n */\nconst matDatepickerAnimations = {\n /** Transforms the height of the datepicker's calendar. */\n transformPanel: trigger('transformPanel', [\n transition('void => enter-dropdown', animate('120ms cubic-bezier(0, 0, 0.2, 1)', keyframes([\n style({ opacity: 0, transform: 'scale(1, 0.8)' }),\n style({ opacity: 1, transform: 'scale(1, 1)' }),\n ]))),\n transition('void => enter-dialog', animate('150ms cubic-bezier(0, 0, 0.2, 1)', keyframes([\n style({ opacity: 0, transform: 'scale(0.7)' }),\n style({ transform: 'none', opacity: 1 }),\n ]))),\n transition('* => void', animate('100ms linear', style({ opacity: 0 }))),\n ]),\n /** Fades in the content of the calendar. */\n fadeInCalendar: trigger('fadeInCalendar', [\n state('void', style({ opacity: 0 })),\n state('enter', style({ opacity: 1 })),\n // TODO(crisbeto): this animation should be removed since it isn't quite on spec, but we\n // need to keep it until #12440 gets in, otherwise the exit animation will look glitchy.\n transition('void => *', animate('120ms 100ms cubic-bezier(0.55, 0, 0.55, 0.2)')),\n ]),\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/** Used to generate a unique ID for each datepicker instance. */\nlet datepickerUid = 0;\n/** Injection token that determines the scroll handling while the calendar is open. */\nconst MAT_DATEPICKER_SCROLL_STRATEGY = new InjectionToken('mat-datepicker-scroll-strategy');\n/** @docs-private */\nfunction MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY(overlay) {\n return () => overlay.scrollStrategies.reposition();\n}\n/** @docs-private */\nconst MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER = {\n provide: MAT_DATEPICKER_SCROLL_STRATEGY,\n deps: [Overlay],\n useFactory: MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY,\n};\n// Boilerplate for applying mixins to MatDatepickerContent.\n/** @docs-private */\nconst _MatDatepickerContentBase = mixinColor(class {\n constructor(_elementRef) {\n this._elementRef = _elementRef;\n }\n});\n/**\n * Component used as the content for the datepicker overlay. We use this instead of using\n * MatCalendar directly as the content so we can control the initial focus. This also gives us a\n * place to put additional features of the overlay that are not part of the calendar itself in the\n * future. (e.g. confirmation buttons).\n * @docs-private\n */\nclass MatDatepickerContent extends _MatDatepickerContentBase {\n constructor(elementRef, _changeDetectorRef, _globalModel, _dateAdapter, _rangeSelectionStrategy, intl) {\n super(elementRef);\n this._changeDetectorRef = _changeDetectorRef;\n this._globalModel = _globalModel;\n this._dateAdapter = _dateAdapter;\n this._rangeSelectionStrategy = _rangeSelectionStrategy;\n this._subscriptions = new Subscription();\n /** Emits when an animation has finished. */\n this._animationDone = new Subject();\n /** Whether there is an in-progress animation. */\n this._isAnimating = false;\n /** Portal with projected action buttons. */\n this._actionsPortal = null;\n this._closeButtonText = intl.closeCalendarLabel;\n }\n ngOnInit() {\n this._animationState = this.datepicker.touchUi ? 'enter-dialog' : 'enter-dropdown';\n }\n ngAfterViewInit() {\n this._subscriptions.add(this.datepicker.stateChanges.subscribe(() => {\n this._changeDetectorRef.markForCheck();\n }));\n this._calendar.focusActiveCell();\n }\n ngOnDestroy() {\n this._subscriptions.unsubscribe();\n this._animationDone.complete();\n }\n _handleUserSelection(event) {\n const selection = this._model.selection;\n const value = event.value;\n const isRange = selection instanceof DateRange;\n // If we're selecting a range and we have a selection strategy, always pass the value through\n // there. Otherwise don't assign null values to the model, unless we're selecting a range.\n // A null value when picking a range means that the user cancelled the selection (e.g. by\n // pressing escape), whereas when selecting a single value it means that the value didn't\n // change. This isn't very intuitive, but it's here for backwards-compatibility.\n if (isRange && this._rangeSelectionStrategy) {\n const newSelection = this._rangeSelectionStrategy.selectionFinished(value, selection, event.event);\n this._model.updateSelection(newSelection, this);\n }\n else if (value &&\n (isRange || !this._dateAdapter.sameDate(value, selection))) {\n this._model.add(value);\n }\n // Delegate closing the overlay to the actions.\n if ((!this._model || this._model.isComplete()) && !this._actionsPortal) {\n this.datepicker.close();\n }\n }\n _handleUserDragDrop(event) {\n this._model.updateSelection(event.value, this);\n }\n _startExitAnimation() {\n this._animationState = 'void';\n this._changeDetectorRef.markForCheck();\n }\n _handleAnimationEvent(event) {\n this._isAnimating = event.phaseName === 'start';\n if (!this._isAnimating) {\n this._animationDone.next();\n }\n }\n _getSelected() {\n return this._model.selection;\n }\n /** Applies the current pending selection to the global model. */\n _applyPendingSelection() {\n if (this._model !== this._globalModel) {\n this._globalModel.updateSelection(this._model.selection, this);\n }\n }\n /**\n * Assigns a new portal containing the datepicker actions.\n * @param portal Portal with the actions to be assigned.\n * @param forceRerender Whether a re-render of the portal should be triggered. This isn't\n * necessary if the portal is assigned during initialization, but it may be required if it's\n * added at a later point.\n */\n _assignActions(portal, forceRerender) {\n // If we have actions, clone the model so that we have the ability to cancel the selection,\n // otherwise update the global model directly. Note that we want to assign this as soon as\n // possible, but `_actionsPortal` isn't available in the constructor so we do it in `ngOnInit`.\n this._model = portal ? this._globalModel.clone() : this._globalModel;\n this._actionsPortal = portal;\n if (forceRerender) {\n this._changeDetectorRef.detectChanges();\n }\n }\n}\nMatDatepickerContent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0-rc.0\", ngImport: i0, type: MatDatepickerContent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: MatDateSelectionModel }, { token: i1$1.DateAdapter }, { token: MAT_DATE_RANGE_SELECTION_STRATEGY, optional: true }, { token: MatDatepickerIntl }], target: i0.ɵɵFactoryTarget.Component });\nMatDatepickerContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: \"14.0.0\", version: \"15.2.0-rc.0\", type: MatDatepickerContent, selector: \"mat-datepicker-content\", inputs: { color: \"color\" }, host: { listeners: { \"@transformPanel.start\": \"_handleAnimationEvent($event)\", \"@transformPanel.done\": \"_handleAnimationEvent($event)\" }, properties: { \"@transformPanel\": \"_animationState\", \"class.mat-datepicker-content-touch\": \"datepicker.touchUi\" }, classAttribute: \"mat-datepicker-content\" }, viewQueries: [{ propertyName: \"_calendar\", first: true, predicate: MatCalendar, descendants: true }], exportAs: [\"matDatepickerContent\"], usesInheritance: true, ngImport: i0, template: \"\\n \\n\\n \\n\\n \\n {{ _closeButtonText }}\\n\\n\", styles: [\".mat-datepicker-content{display:block;border-radius:4px}.mat-datepicker-content .mat-calendar{width:296px;height:354px}.mat-datepicker-content .mat-datepicker-content-container-with-custom-header .mat-calendar{height:auto}.mat-datepicker-content .mat-datepicker-close-button{position:absolute;top:100%;left:0;margin-top:8px}.ng-animating .mat-datepicker-content .mat-datepicker-close-button{display:none}.mat-datepicker-content-container{display:flex;flex-direction:column;justify-content:space-between}.mat-datepicker-content-touch{display:block;max-height:80vh;position:relative;overflow:visible}.mat-datepicker-content-touch .mat-datepicker-content-container{min-height:312px;max-height:788px;min-width:250px;max-width:750px}.mat-datepicker-content-touch .mat-calendar{width:100%;height:auto}@media all and (orientation: landscape){.mat-datepicker-content-touch .mat-datepicker-content-container{width:64vh;height:80vh}}@media all and (orientation: portrait){.mat-datepicker-content-touch .mat-datepicker-content-container{width:80vw;height:100vw}.mat-datepicker-content-touch .mat-datepicker-content-container-with-actions{height:115vw}}\"], dependencies: [{ kind: \"directive\", type: i1.NgClass, selector: \"[ngClass]\", inputs: [\"class\", \"ngClass\"] }, { kind: \"component\", type: i3.MatButton, selector: \" button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] \", inputs: [\"disabled\", \"disableRipple\", \"color\"], exportAs: [\"matButton\"] }, { kind: \"directive\", type: i5.CdkTrapFocus, selector: \"[cdkTrapFocus]\", inputs: [\"cdkTrapFocus\", \"cdkTrapFocusAutoCapture\"], exportAs: [\"cdkTrapFocus\"] }, { kind: \"directive\", type: i6.CdkPortalOutlet, selector: \"[cdkPortalOutlet]\", inputs: [\"cdkPortalOutlet\"], outputs: [\"attached\"], exportAs: [\"cdkPortalOutlet\"] }, { kind: \"component\", type: MatCalendar, selector: \"mat-calendar\", inputs: [\"headerComponent\", \"startAt\", \"startView\", \"selected\", \"minDate\", \"maxDate\", \"dateFilter\", \"dateClass\", \"comparisonStart\", \"comparisonEnd\", \"startDateAccessibleName\", \"endDateAccessibleName\"], outputs: [\"selectedChange\", \"yearSelected\", \"monthSelected\", \"viewChanged\", \"_userSelection\", \"_userDragDrop\"], exportAs: [\"matCalendar\"] }], animations: [matDatepickerAnimations.transformPanel, matDatepickerAnimations.fadeInCalendar], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0-rc.0\", ngImport: i0, type: MatDatepickerContent, decorators: [{\n type: Component,\n args: [{ selector: 'mat-datepicker-content', host: {\n 'class': 'mat-datepicker-content',\n '[@transformPanel]': '_animationState',\n '(@transformPanel.start)': '_handleAnimationEvent($event)',\n '(@transformPanel.done)': '_handleAnimationEvent($event)',\n '[class.mat-datepicker-content-touch]': 'datepicker.touchUi',\n }, animations: [matDatepickerAnimations.transformPanel, matDatepickerAnimations.fadeInCalendar], exportAs: 'matDatepickerContent', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, inputs: ['color'], template: \"\\n \\n\\n \\n\\n \\n {{ _closeButtonText }}\\n\\n\", styles: [\".mat-datepicker-content{display:block;border-radius:4px}.mat-datepicker-content .mat-calendar{width:296px;height:354px}.mat-datepicker-content .mat-datepicker-content-container-with-custom-header .mat-calendar{height:auto}.mat-datepicker-content .mat-datepicker-close-button{position:absolute;top:100%;left:0;margin-top:8px}.ng-animating .mat-datepicker-content .mat-datepicker-close-button{display:none}.mat-datepicker-content-container{display:flex;flex-direction:column;justify-content:space-between}.mat-datepicker-content-touch{display:block;max-height:80vh;position:relative;overflow:visible}.mat-datepicker-content-touch .mat-datepicker-content-container{min-height:312px;max-height:788px;min-width:250px;max-width:750px}.mat-datepicker-content-touch .mat-calendar{width:100%;height:auto}@media all and (orientation: landscape){.mat-datepicker-content-touch .mat-datepicker-content-container{width:64vh;height:80vh}}@media all and (orientation: portrait){.mat-datepicker-content-touch .mat-datepicker-content-container{width:80vw;height:100vw}.mat-datepicker-content-touch .mat-datepicker-content-container-with-actions{height:115vw}}\"] }]\n }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: MatDateSelectionModel }, { type: i1$1.DateAdapter }, { type: undefined, decorators: [{\n type: Optional\n }, {\n type: Inject,\n args: [MAT_DATE_RANGE_SELECTION_STRATEGY]\n }] }, { type: MatDatepickerIntl }]; }, propDecorators: { _calendar: [{\n type: ViewChild,\n args: [MatCalendar]\n }] } });\n/** Base class for a datepicker. */\nclass MatDatepickerBase {\n /** The date to open the calendar to initially. */\n get startAt() {\n // If an explicit startAt is set we start there, otherwise we start at whatever the currently\n // selected value is.\n return this._startAt || (this.datepickerInput ? this.datepickerInput.getStartValue() : null);\n }\n set startAt(value) {\n this._startAt = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));\n }\n /** Color palette to use on the datepicker's calendar. */\n get color() {\n return (this._color || (this.datepickerInput ? this.datepickerInput.getThemePalette() : undefined));\n }\n set color(value) {\n this._color = value;\n }\n /**\n * Whether the calendar UI is in touch mode. In touch mode the calendar opens in a dialog rather\n * than a dropdown and elements have more padding to allow for bigger touch targets.\n */\n get touchUi() {\n return this._touchUi;\n }\n set touchUi(value) {\n this._touchUi = coerceBooleanProperty(value);\n }\n /** Whether the datepicker pop-up should be disabled. */\n get disabled() {\n return this._disabled === undefined && this.datepickerInput\n ? this.datepickerInput.disabled\n : !!this._disabled;\n }\n set disabled(value) {\n const newValue = coerceBooleanProperty(value);\n if (newValue !== this._disabled) {\n this._disabled = newValue;\n this.stateChanges.next(undefined);\n }\n }\n /**\n * Whether to restore focus to the previously-focused element when the calendar is closed.\n * Note that automatic focus restoration is an accessibility feature and it is recommended that\n * you provide your own equivalent, if you decide to turn it off.\n */\n get restoreFocus() {\n return this._restoreFocus;\n }\n set restoreFocus(value) {\n this._restoreFocus = coerceBooleanProperty(value);\n }\n /**\n * Classes to be passed to the date picker panel.\n * Supports string and string array values, similar to `ngClass`.\n */\n get panelClass() {\n return this._panelClass;\n }\n set panelClass(value) {\n this._panelClass = coerceStringArray(value);\n }\n /** Whether the calendar is open. */\n get opened() {\n return this._opened;\n }\n set opened(value) {\n coerceBooleanProperty(value) ? this.open() : this.close();\n }\n /** The minimum selectable date. */\n _getMinDate() {\n return this.datepickerInput && this.datepickerInput.min;\n }\n /** The maximum selectable date. */\n _getMaxDate() {\n return this.datepickerInput && this.datepickerInput.max;\n }\n _getDateFilter() {\n return this.datepickerInput && this.datepickerInput.dateFilter;\n }\n constructor(_overlay, _ngZone, _viewContainerRef, scrollStrategy, _dateAdapter, _dir, _model) {\n this._overlay = _overlay;\n this._ngZone = _ngZone;\n this._viewContainerRef = _viewContainerRef;\n this._dateAdapter = _dateAdapter;\n this._dir = _dir;\n this._model = _model;\n this._inputStateChanges = Subscription.EMPTY;\n this._document = inject(DOCUMENT);\n /** The view that the calendar should start in. */\n this.startView = 'month';\n this._touchUi = false;\n /** Preferred position of the datepicker in the X axis. */\n this.xPosition = 'start';\n /** Preferred position of the datepicker in the Y axis. */\n this.yPosition = 'below';\n this._restoreFocus = true;\n /**\n * Emits selected year in multiyear view.\n * This doesn't imply a change on the selected date.\n */\n this.yearSelected = new EventEmitter();\n /**\n * Emits selected month in year view.\n * This doesn't imply a change on the selected date.\n */\n this.monthSelected = new EventEmitter();\n /**\n * Emits when the current view changes.\n */\n this.viewChanged = new EventEmitter(true);\n /** Emits when the datepicker has been opened. */\n this.openedStream = new EventEmitter();\n /** Emits when the datepicker has been closed. */\n this.closedStream = new EventEmitter();\n this._opened = false;\n /** The id for the datepicker calendar. */\n this.id = `mat-datepicker-${datepickerUid++}`;\n /** The element that was focused before the datepicker was opened. */\n this._focusedElementBeforeOpen = null;\n /** Unique class that will be added to the backdrop so that the test harnesses can look it up. */\n this._backdropHarnessClass = `${this.id}-backdrop`;\n /** Emits when the datepicker's state changes. */\n this.stateChanges = new Subject();\n if (!this._dateAdapter && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n throw createMissingDateImplError('DateAdapter');\n }\n this._scrollStrategy = scrollStrategy;\n }\n ngOnChanges(changes) {\n const positionChange = changes['xPosition'] || changes['yPosition'];\n if (positionChange && !positionChange.firstChange && this._overlayRef) {\n const positionStrategy = this._overlayRef.getConfig().positionStrategy;\n if (positionStrategy instanceof FlexibleConnectedPositionStrategy) {\n this._setConnectedPositions(positionStrategy);\n if (this.opened) {\n this._overlayRef.updatePosition();\n }\n }\n }\n this.stateChanges.next(undefined);\n }\n ngOnDestroy() {\n this._destroyOverlay();\n this.close();\n this._inputStateChanges.unsubscribe();\n this.stateChanges.complete();\n }\n /** Selects the given date */\n select(date) {\n this._model.add(date);\n }\n /** Emits the selected year in multiyear view */\n _selectYear(normalizedYear) {\n this.yearSelected.emit(normalizedYear);\n }\n /** Emits selected month in year view */\n _selectMonth(normalizedMonth) {\n this.monthSelected.emit(normalizedMonth);\n }\n /** Emits changed view */\n _viewChanged(view) {\n this.viewChanged.emit(view);\n }\n /**\n * Register an input with this datepicker.\n * @param input The datepicker input to register with this datepicker.\n * @returns Selection model that the input should hook itself up to.\n */\n registerInput(input) {\n if (this.datepickerInput && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n throw Error('A MatDatepicker can only be associated with a single input.');\n }\n this._inputStateChanges.unsubscribe();\n this.datepickerInput = input;\n this._inputStateChanges = input.stateChanges.subscribe(() => this.stateChanges.next(undefined));\n return this._model;\n }\n /**\n * Registers a portal containing action buttons with the datepicker.\n * @param portal Portal to be registered.\n */\n registerActions(portal) {\n if (this._actionsPortal && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n throw Error('A MatDatepicker can only be associated with a single actions row.');\n }\n this._actionsPortal = portal;\n this._componentRef?.instance._assignActions(portal, true);\n }\n /**\n * Removes a portal containing action buttons from the datepicker.\n * @param portal Portal to be removed.\n */\n removeActions(portal) {\n if (portal === this._actionsPortal) {\n this._actionsPortal = null;\n this._componentRef?.instance._assignActions(null, true);\n }\n }\n /** Open the calendar. */\n open() {\n // Skip reopening if there's an in-progress animation to avoid overlapping\n // sequences which can cause \"changed after checked\" errors. See #25837.\n if (this._opened || this.disabled || this._componentRef?.instance._isAnimating) {\n return;\n }\n if (!this.datepickerInput && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n throw Error('Attempted to open an MatDatepicker with no associated input.');\n }\n this._focusedElementBeforeOpen = _getFocusedElementPierceShadowDom();\n this._openOverlay();\n this._opened = true;\n this.openedStream.emit();\n }\n /** Close the calendar. */\n close() {\n // Skip reopening if there's an in-progress animation to avoid overlapping\n // sequences which can cause \"changed after checked\" errors. See #25837.\n if (!this._opened || this._componentRef?.instance._isAnimating) {\n return;\n }\n const canRestoreFocus = this._restoreFocus &&\n this._focusedElementBeforeOpen &&\n typeof this._focusedElementBeforeOpen.focus === 'function';\n const completeClose = () => {\n // The `_opened` could've been reset already if\n // we got two events in quick succession.\n if (this._opened) {\n this._opened = false;\n this.closedStream.emit();\n }\n };\n if (this._componentRef) {\n const { instance, location } = this._componentRef;\n instance._startExitAnimation();\n instance._animationDone.pipe(take(1)).subscribe(() => {\n const activeElement = this._document.activeElement;\n // Since we restore focus after the exit animation, we have to check that\n // the user didn't move focus themselves inside the `close` handler.\n if (canRestoreFocus &&\n (!activeElement ||\n activeElement === this._document.activeElement ||\n location.nativeElement.contains(activeElement))) {\n this._focusedElementBeforeOpen.focus();\n }\n this._focusedElementBeforeOpen = null;\n this._destroyOverlay();\n });\n }\n if (canRestoreFocus) {\n // Because IE moves focus asynchronously, we can't count on it being restored before we've\n // marked the datepicker as closed. If the event fires out of sequence and the element that\n // we're refocusing opens the datepicker on focus, the user could be stuck with not being\n // able to close the calendar at all. We work around it by making the logic, that marks\n // the datepicker as closed, async as well.\n setTimeout(completeClose);\n }\n else {\n completeClose();\n }\n }\n /** Applies the current pending selection on the overlay to the model. */\n _applyPendingSelection() {\n this._componentRef?.instance?._applyPendingSelection();\n }\n /** Forwards relevant values from the datepicker to the datepicker content inside the overlay. */\n _forwardContentValues(instance) {\n instance.datepicker = this;\n instance.color = this.color;\n instance._dialogLabelId = this.datepickerInput.getOverlayLabelId();\n instance._assignActions(this._actionsPortal, false);\n }\n /** Opens the overlay with the calendar. */\n _openOverlay() {\n this._destroyOverlay();\n const isDialog = this.touchUi;\n const portal = new ComponentPortal(MatDatepickerContent, this._viewContainerRef);\n const overlayRef = (this._overlayRef = this._overlay.create(new OverlayConfig({\n positionStrategy: isDialog ? this._getDialogStrategy() : this._getDropdownStrategy(),\n hasBackdrop: true,\n backdropClass: [\n isDialog ? 'cdk-overlay-dark-backdrop' : 'mat-overlay-transparent-backdrop',\n this._backdropHarnessClass,\n ],\n direction: this._dir,\n scrollStrategy: isDialog ? this._overlay.scrollStrategies.block() : this._scrollStrategy(),\n panelClass: `mat-datepicker-${isDialog ? 'dialog' : 'popup'}`,\n })));\n this._getCloseStream(overlayRef).subscribe(event => {\n if (event) {\n event.preventDefault();\n }\n this.close();\n });\n // The `preventDefault` call happens inside the calendar as well, however focus moves into\n // it inside a timeout which can give browsers a chance to fire off a keyboard event in-between\n // that can scroll the page (see #24969). Always block default actions of arrow keys for the\n // entire overlay so the page doesn't get scrolled by accident.\n overlayRef.keydownEvents().subscribe(event => {\n const keyCode = event.keyCode;\n if (keyCode === UP_ARROW ||\n keyCode === DOWN_ARROW ||\n keyCode === LEFT_ARROW ||\n keyCode === RIGHT_ARROW ||\n keyCode === PAGE_UP ||\n keyCode === PAGE_DOWN) {\n event.preventDefault();\n }\n });\n this._componentRef = overlayRef.attach(portal);\n this._forwardContentValues(this._componentRef.instance);\n // Update the position once the calendar has rendered. Only relevant in dropdown mode.\n if (!isDialog) {\n this._ngZone.onStable.pipe(take(1)).subscribe(() => overlayRef.updatePosition());\n }\n }\n /** Destroys the current overlay. */\n _destroyOverlay() {\n if (this._overlayRef) {\n this._overlayRef.dispose();\n this._overlayRef = this._componentRef = null;\n }\n }\n /** Gets a position strategy that will open the calendar as a dropdown. */\n _getDialogStrategy() {\n return this._overlay.position().global().centerHorizontally().centerVertically();\n }\n /** Gets a position strategy that will open the calendar as a dropdown. */\n _getDropdownStrategy() {\n const strategy = this._overlay\n .position()\n .flexibleConnectedTo(this.datepickerInput.getConnectedOverlayOrigin())\n .withTransformOriginOn('.mat-datepicker-content')\n .withFlexibleDimensions(false)\n .withViewportMargin(8)\n .withLockedPosition();\n return this._setConnectedPositions(strategy);\n }\n /** Sets the positions of the datepicker in dropdown mode based on the current configuration. */\n _setConnectedPositions(strategy) {\n const primaryX = this.xPosition === 'end' ? 'end' : 'start';\n const secondaryX = primaryX === 'start' ? 'end' : 'start';\n const primaryY = this.yPosition === 'above' ? 'bottom' : 'top';\n const secondaryY = primaryY === 'top' ? 'bottom' : 'top';\n return strategy.withPositions([\n {\n originX: primaryX,\n originY: secondaryY,\n overlayX: primaryX,\n overlayY: primaryY,\n },\n {\n originX: primaryX,\n originY: primaryY,\n overlayX: primaryX,\n overlayY: secondaryY,\n },\n {\n originX: secondaryX,\n originY: secondaryY,\n overlayX: secondaryX,\n overlayY: primaryY,\n },\n {\n originX: secondaryX,\n originY: primaryY,\n overlayX: secondaryX,\n overlayY: secondaryY,\n },\n ]);\n }\n /** Gets an observable that will emit when the overlay is supposed to be closed. */\n _getCloseStream(overlayRef) {\n const ctrlShiftMetaModifiers = ['ctrlKey', 'shiftKey', 'metaKey'];\n return merge(overlayRef.backdropClick(), overlayRef.detachments(), overlayRef.keydownEvents().pipe(filter(event => {\n // Closing on alt + up is only valid when there's an input associated with the datepicker.\n return ((event.keyCode === ESCAPE && !hasModifierKey(event)) ||\n (this.datepickerInput &&\n hasModifierKey(event, 'altKey') &&\n event.keyCode === UP_ARROW &&\n ctrlShiftMetaModifiers.every((modifier) => !hasModifierKey(event, modifier))));\n })));\n }\n}\nMatDatepickerBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0-rc.0\", ngImport: i0, type: MatDatepickerBase, deps: [{ token: i9.Overlay }, { token: i0.NgZone }, { token: i0.ViewContainerRef }, { token: MAT_DATEPICKER_SCROLL_STRATEGY }, { token: i1$1.DateAdapter, optional: true }, { token: i2.Directionality, optional: true }, { token: MatDateSelectionModel }], target: i0.ɵɵFactoryTarget.Directive });\nMatDatepickerBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: \"14.0.0\", version: \"15.2.0-rc.0\", type: MatDatepickerBase, inputs: { calendarHeaderComponent: \"calendarHeaderComponent\", startAt: \"startAt\", startView: \"startView\", color: \"color\", touchUi: \"touchUi\", disabled: \"disabled\", xPosition: \"xPosition\", yPosition: \"yPosition\", restoreFocus: \"restoreFocus\", dateClass: \"dateClass\", panelClass: \"panelClass\", opened: \"opened\" }, outputs: { yearSelected: \"yearSelected\", monthSelected: \"monthSelected\", viewChanged: \"viewChanged\", openedStream: \"opened\", closedStream: \"closed\" }, usesOnChanges: true, ngImport: i0 });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0-rc.0\", ngImport: i0, type: MatDatepickerBase, decorators: [{\n type: Directive\n }], ctorParameters: function () { return [{ type: i9.Overlay }, { type: i0.NgZone }, { type: i0.ViewContainerRef }, { type: undefined, decorators: [{\n type: Inject,\n args: [MAT_DATEPICKER_SCROLL_STRATEGY]\n }] }, { type: i1$1.DateAdapter, decorators: [{\n type: Optional\n }] }, { type: i2.Directionality, decorators: [{\n type: Optional\n }] }, { type: MatDateSelectionModel }]; }, propDecorators: { calendarHeaderComponent: [{\n type: Input\n }], startAt: [{\n type: Input\n }], startView: [{\n type: Input\n }], color: [{\n type: Input\n }], touchUi: [{\n type: Input\n }], disabled: [{\n type: Input\n }], xPosition: [{\n type: Input\n }], yPosition: [{\n type: Input\n }], restoreFocus: [{\n type: Input\n }], yearSelected: [{\n type: Output\n }], monthSelected: [{\n type: Output\n }], viewChanged: [{\n type: Output\n }], dateClass: [{\n type: Input\n }], openedStream: [{\n type: Output,\n args: ['opened']\n }], closedStream: [{\n type: Output,\n args: ['closed']\n }], panelClass: [{\n type: Input\n }], opened: [{\n type: Input\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// TODO(mmalerba): We use a component instead of a directive here so the user can use implicit\n// template reference variables (e.g. #d vs #d=\"matDatepicker\"). We can change this to a directive\n// if angular adds support for `exportAs: '$implicit'` on directives.\n/** Component responsible for managing the datepicker popup/dialog. */\nclass MatDatepicker extends MatDatepickerBase {\n}\nMatDatepicker.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0-rc.0\", ngImport: i0, type: MatDatepicker, deps: null, target: i0.ɵɵFactoryTarget.Component });\nMatDatepicker.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: \"14.0.0\", version: \"15.2.0-rc.0\", type: MatDatepicker, selector: \"mat-datepicker\", providers: [\n MAT_SINGLE_DATE_SELECTION_MODEL_PROVIDER,\n { provide: MatDatepickerBase, useExisting: MatDatepicker },\n ], exportAs: [\"matDatepicker\"], usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0-rc.0\", ngImport: i0, type: MatDatepicker, decorators: [{\n type: Component,\n args: [{\n selector: 'mat-datepicker',\n template: '',\n exportAs: 'matDatepicker',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n providers: [\n MAT_SINGLE_DATE_SELECTION_MODEL_PROVIDER,\n { provide: MatDatepickerBase, useExisting: MatDatepicker },\n ],\n }]\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/**\n * An event used for datepicker input and change events. We don't always have access to a native\n * input or change event because the event may have been triggered by the user clicking on the\n * calendar popup. For consistency, we always use MatDatepickerInputEvent instead.\n */\nclass MatDatepickerInputEvent {\n constructor(\n /** Reference to the datepicker input component that emitted the event. */\n target, \n /** Reference to the native input element associated with the datepicker input. */\n targetElement) {\n this.target = target;\n this.targetElement = targetElement;\n this.value = this.target.value;\n }\n}\n/** Base class for datepicker inputs. */\nclass MatDatepickerInputBase {\n /** The value of the input. */\n get value() {\n return this._model ? this._getValueFromModel(this._model.selection) : this._pendingValue;\n }\n set value(value) {\n this._assignValueProgrammatically(value);\n }\n /** Whether the datepicker-input is disabled. */\n get disabled() {\n return !!this._disabled || this._parentDisabled();\n }\n set disabled(value) {\n const newValue = coerceBooleanProperty(value);\n const element = this._elementRef.nativeElement;\n if (this._disabled !== newValue) {\n this._disabled = newValue;\n this.stateChanges.next(undefined);\n }\n // We need to null check the `blur` method, because it's undefined during SSR.\n // In Ivy static bindings are invoked earlier, before the element is attached to the DOM.\n // This can cause an error to be thrown in some browsers (IE/Edge) which assert that the\n // element has been inserted.\n if (newValue && this._isInitialized && element.blur) {\n // Normally, native input elements automatically blur if they turn disabled. This behavior\n // is problematic, because it would mean that it triggers another change detection cycle,\n // which then causes a changed after checked error if the input element was focused before.\n element.blur();\n }\n }\n /** Gets the base validator functions. */\n _getValidators() {\n return [this._parseValidator, this._minValidator, this._maxValidator, this._filterValidator];\n }\n /** Registers a date selection model with the input. */\n _registerModel(model) {\n this._model = model;\n this._valueChangesSubscription.unsubscribe();\n if (this._pendingValue) {\n this._assignValue(this._pendingValue);\n }\n this._valueChangesSubscription = this._model.selectionChanged.subscribe(event => {\n if (this._shouldHandleChangeEvent(event)) {\n const value = this._getValueFromModel(event.selection);\n this._lastValueValid = this._isValidValue(value);\n this._cvaOnChange(value);\n this._onTouched();\n this._formatValue(value);\n this.dateInput.emit(new MatDatepickerInputEvent(this, this._elementRef.nativeElement));\n this.dateChange.emit(new MatDatepickerInputEvent(this, this._elementRef.nativeElement));\n }\n });\n }\n constructor(_elementRef, _dateAdapter, _dateFormats) {\n this._elementRef = _elementRef;\n this._dateAdapter = _dateAdapter;\n this._dateFormats = _dateFormats;\n /** Emits when a `change` event is fired on this ``. */\n this.dateChange = new EventEmitter();\n /** Emits when an `input` event is fired on this ``. */\n this.dateInput = new EventEmitter();\n /** Emits when the internal state has changed */\n this.stateChanges = new Subject();\n this._onTouched = () => { };\n this._validatorOnChange = () => { };\n this._cvaOnChange = () => { };\n this._valueChangesSubscription = Subscription.EMPTY;\n this._localeSubscription = Subscription.EMPTY;\n /** The form control validator for whether the input parses. */\n this._parseValidator = () => {\n return this._lastValueValid\n ? null\n : { 'matDatepickerParse': { 'text': this._elementRef.nativeElement.value } };\n };\n /** The form control validator for the date filter. */\n this._filterValidator = (control) => {\n const controlValue = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(control.value));\n return !controlValue || this._matchesFilter(controlValue)\n ? null\n : { 'matDatepickerFilter': true };\n };\n /** The form control validator for the min date. */\n this._minValidator = (control) => {\n const controlValue = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(control.value));\n const min = this._getMinDate();\n return !min || !controlValue || this._dateAdapter.compareDate(min, controlValue) <= 0\n ? null\n : { 'matDatepickerMin': { 'min': min, 'actual': controlValue } };\n };\n /** The form control validator for the max date. */\n this._maxValidator = (control) => {\n const controlValue = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(control.value));\n const max = this._getMaxDate();\n return !max || !controlValue || this._dateAdapter.compareDate(max, controlValue) >= 0\n ? null\n : { 'matDatepickerMax': { 'max': max, 'actual': controlValue } };\n };\n /** Whether the last value set on the input was valid. */\n this._lastValueValid = false;\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 // Update the displayed date when the locale changes.\n this._localeSubscription = _dateAdapter.localeChanges.subscribe(() => {\n this._assignValueProgrammatically(this.value);\n });\n }\n ngAfterViewInit() {\n this._isInitialized = true;\n }\n ngOnChanges(changes) {\n if (dateInputsHaveChanged(changes, this._dateAdapter)) {\n this.stateChanges.next(undefined);\n }\n }\n ngOnDestroy() {\n this._valueChangesSubscription.unsubscribe();\n this._localeSubscription.unsubscribe();\n this.stateChanges.complete();\n }\n /** @docs-private */\n registerOnValidatorChange(fn) {\n this._validatorOnChange = fn;\n }\n /** @docs-private */\n validate(c) {\n return this._validator ? this._validator(c) : null;\n }\n // Implemented as part of ControlValueAccessor.\n writeValue(value) {\n this._assignValueProgrammatically(value);\n }\n // Implemented as part of ControlValueAccessor.\n registerOnChange(fn) {\n this._cvaOnChange = fn;\n }\n // Implemented as part of ControlValueAccessor.\n registerOnTouched(fn) {\n this._onTouched = fn;\n }\n // Implemented as part of ControlValueAccessor.\n setDisabledState(isDisabled) {\n this.disabled = isDisabled;\n }\n _onKeydown(event) {\n const ctrlShiftMetaModifiers = ['ctrlKey', 'shiftKey', 'metaKey'];\n const isAltDownArrow = hasModifierKey(event, 'altKey') &&\n event.keyCode === DOWN_ARROW &&\n ctrlShiftMetaModifiers.every((modifier) => !hasModifierKey(event, modifier));\n if (isAltDownArrow && !this._elementRef.nativeElement.readOnly) {\n this._openPopup();\n event.preventDefault();\n }\n }\n _onInput(value) {\n const lastValueWasValid = this._lastValueValid;\n let date = this._dateAdapter.parse(value, this._dateFormats.parse.dateInput);\n this._lastValueValid = this._isValidValue(date);\n date = this._dateAdapter.getValidDateOrNull(date);\n const hasChanged = !this._dateAdapter.sameDate(date, this.value);\n // We need to fire the CVA change event for all\n // nulls, otherwise the validators won't run.\n if (!date || hasChanged) {\n this._cvaOnChange(date);\n }\n else {\n // Call the CVA change handler for invalid values\n // since this is what marks the control as dirty.\n if (value && !this.value) {\n this._cvaOnChange(date);\n }\n if (lastValueWasValid !== this._lastValueValid) {\n this._validatorOnChange();\n }\n }\n if (hasChanged) {\n this._assignValue(date);\n this.dateInput.emit(new MatDatepickerInputEvent(this, this._elementRef.nativeElement));\n }\n }\n _onChange() {\n this.dateChange.emit(new MatDatepickerInputEvent(this, this._elementRef.nativeElement));\n }\n /** Handles blur events on the input. */\n _onBlur() {\n // Reformat the input only if we have a valid value.\n if (this.value) {\n this._formatValue(this.value);\n }\n this._onTouched();\n }\n /** Formats a value and sets it on the input element. */\n _formatValue(value) {\n this._elementRef.nativeElement.value =\n value != null ? this._dateAdapter.format(value, this._dateFormats.display.dateInput) : '';\n }\n /** Assigns a value to the model. */\n _assignValue(value) {\n // We may get some incoming values before the model was\n // assigned. Save the value so that we can assign it later.\n if (this._model) {\n this._assignValueToModel(value);\n this._pendingValue = null;\n }\n else {\n this._pendingValue = value;\n }\n }\n /** Whether a value is considered valid. */\n _isValidValue(value) {\n return !value || this._dateAdapter.isValid(value);\n }\n /**\n * Checks whether a parent control is disabled. This is in place so that it can be overridden\n * by inputs extending this one which can be placed inside of a group that can be disabled.\n */\n _parentDisabled() {\n return false;\n }\n /** Programmatically assigns a value to the input. */\n _assignValueProgrammatically(value) {\n value = this._dateAdapter.deserialize(value);\n this._lastValueValid = this._isValidValue(value);\n value = this._dateAdapter.getValidDateOrNull(value);\n this._assignValue(value);\n this._formatValue(value);\n }\n /** Gets whether a value matches the current date filter. */\n _matchesFilter(value) {\n const filter = this._getDateFilter();\n return !filter || filter(value);\n }\n}\nMatDatepickerInputBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0-rc.0\", ngImport: i0, type: MatDatepickerInputBase, deps: [{ token: i0.ElementRef }, { token: i1$1.DateAdapter, optional: true }, { token: MAT_DATE_FORMATS, optional: true }], target: i0.ɵɵFactoryTarget.Directive });\nMatDatepickerInputBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: \"14.0.0\", version: \"15.2.0-rc.0\", type: MatDatepickerInputBase, inputs: { value: \"value\", disabled: \"disabled\" }, outputs: { dateChange: \"dateChange\", dateInput: \"dateInput\" }, usesOnChanges: true, ngImport: i0 });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0-rc.0\", ngImport: i0, type: MatDatepickerInputBase, decorators: [{\n type: Directive\n }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.DateAdapter, decorators: [{\n type: Optional\n }] }, { type: undefined, decorators: [{\n type: Optional\n }, {\n type: Inject,\n args: [MAT_DATE_FORMATS]\n }] }]; }, propDecorators: { value: [{\n type: Input\n }], disabled: [{\n type: Input\n }], dateChange: [{\n type: Output\n }], dateInput: [{\n type: Output\n }] } });\n/**\n * Checks whether the `SimpleChanges` object from an `ngOnChanges`\n * callback has any changes, accounting for date objects.\n */\nfunction dateInputsHaveChanged(changes, adapter) {\n const keys = Object.keys(changes);\n for (let key of keys) {\n const { previousValue, currentValue } = changes[key];\n if (adapter.isDateInstance(previousValue) && adapter.isDateInstance(currentValue)) {\n if (!adapter.sameDate(previousValue, currentValue)) {\n return true;\n }\n }\n else {\n return true;\n }\n }\n return false;\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/** @docs-private */\nconst MAT_DATEPICKER_VALUE_ACCESSOR = {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => MatDatepickerInput),\n multi: true,\n};\n/** @docs-private */\nconst MAT_DATEPICKER_VALIDATORS = {\n provide: NG_VALIDATORS,\n useExisting: forwardRef(() => MatDatepickerInput),\n multi: true,\n};\n/** Directive used to connect an input to a MatDatepicker. */\nclass MatDatepickerInput extends MatDatepickerInputBase {\n /** The datepicker that this input is associated with. */\n set matDatepicker(datepicker) {\n if (datepicker) {\n this._datepicker = datepicker;\n this._closedSubscription = datepicker.closedStream.subscribe(() => this._onTouched());\n this._registerModel(datepicker.registerInput(this));\n }\n }\n /** The minimum valid date. */\n get min() {\n return this._min;\n }\n set min(value) {\n const validValue = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));\n if (!this._dateAdapter.sameDate(validValue, this._min)) {\n this._min = validValue;\n this._validatorOnChange();\n }\n }\n /** The maximum valid date. */\n get max() {\n return this._max;\n }\n set max(value) {\n const validValue = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));\n if (!this._dateAdapter.sameDate(validValue, this._max)) {\n this._max = validValue;\n this._validatorOnChange();\n }\n }\n /** Function that can be used to filter out dates within the datepicker. */\n get dateFilter() {\n return this._dateFilter;\n }\n set dateFilter(value) {\n const wasMatchingValue = this._matchesFilter(this.value);\n this._dateFilter = value;\n if (this._matchesFilter(this.value) !== wasMatchingValue) {\n this._validatorOnChange();\n }\n }\n constructor(elementRef, dateAdapter, dateFormats, _formField) {\n super(elementRef, dateAdapter, dateFormats);\n this._formField = _formField;\n this._closedSubscription = Subscription.EMPTY;\n this._validator = Validators.compose(super._getValidators());\n }\n /**\n * Gets the element that the datepicker popup should be connected to.\n * @return The element to connect the popup to.\n */\n getConnectedOverlayOrigin() {\n return this._formField ? this._formField.getConnectedOverlayOrigin() : this._elementRef;\n }\n /** Gets the ID of an element that should be used a description for the calendar overlay. */\n getOverlayLabelId() {\n if (this._formField) {\n return this._formField.getLabelId();\n }\n return this._elementRef.nativeElement.getAttribute('aria-labelledby');\n }\n /** Returns the palette used by the input's form field, if any. */\n getThemePalette() {\n return this._formField ? this._formField.color : undefined;\n }\n /** Gets the value at which the calendar should start. */\n getStartValue() {\n return this.value;\n }\n ngOnDestroy() {\n super.ngOnDestroy();\n this._closedSubscription.unsubscribe();\n }\n /** Opens the associated datepicker. */\n _openPopup() {\n if (this._datepicker) {\n this._datepicker.open();\n }\n }\n _getValueFromModel(modelValue) {\n return modelValue;\n }\n _assignValueToModel(value) {\n if (this._model) {\n this._model.updateSelection(value, this);\n }\n }\n /** Gets the input's minimum date. */\n _getMinDate() {\n return this._min;\n }\n /** Gets the input's maximum date. */\n _getMaxDate() {\n return this._max;\n }\n /** Gets the input's date filtering function. */\n _getDateFilter() {\n return this._dateFilter;\n }\n _shouldHandleChangeEvent(event) {\n return event.source !== this;\n }\n}\nMatDatepickerInput.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0-rc.0\", ngImport: i0, type: MatDatepickerInput, deps: [{ token: i0.ElementRef }, { token: i1$1.DateAdapter, optional: true }, { token: MAT_DATE_FORMATS, optional: true }, { token: MAT_FORM_FIELD, optional: true }], target: i0.ɵɵFactoryTarget.Directive });\nMatDatepickerInput.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: \"14.0.0\", version: \"15.2.0-rc.0\", type: MatDatepickerInput, selector: \"input[matDatepicker]\", inputs: { matDatepicker: \"matDatepicker\", min: \"min\", max: \"max\", dateFilter: [\"matDatepickerFilter\", \"dateFilter\"] }, host: { listeners: { \"input\": \"_onInput($event.target.value)\", \"change\": \"_onChange()\", \"blur\": \"_onBlur()\", \"keydown\": \"_onKeydown($event)\" }, properties: { \"attr.aria-haspopup\": \"_datepicker ? \\\"dialog\\\" : null\", \"attr.aria-owns\": \"(_datepicker?.opened && _datepicker.id) || null\", \"attr.min\": \"min ? _dateAdapter.toIso8601(min) : null\", \"attr.max\": \"max ? _dateAdapter.toIso8601(max) : null\", \"attr.data-mat-calendar\": \"_datepicker ? _datepicker.id : null\", \"disabled\": \"disabled\" }, classAttribute: \"mat-datepicker-input\" }, providers: [\n MAT_DATEPICKER_VALUE_ACCESSOR,\n MAT_DATEPICKER_VALIDATORS,\n { provide: MAT_INPUT_VALUE_ACCESSOR, useExisting: MatDatepickerInput },\n ], exportAs: [\"matDatepickerInput\"], usesInheritance: true, ngImport: i0 });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0-rc.0\", ngImport: i0, type: MatDatepickerInput, decorators: [{\n type: Directive,\n args: [{\n selector: 'input[matDatepicker]',\n providers: [\n MAT_DATEPICKER_VALUE_ACCESSOR,\n MAT_DATEPICKER_VALIDATORS,\n { provide: MAT_INPUT_VALUE_ACCESSOR, useExisting: MatDatepickerInput },\n ],\n host: {\n 'class': 'mat-datepicker-input',\n '[attr.aria-haspopup]': '_datepicker ? \"dialog\" : null',\n '[attr.aria-owns]': '(_datepicker?.opened && _datepicker.id) || null',\n '[attr.min]': 'min ? _dateAdapter.toIso8601(min) : null',\n '[attr.max]': 'max ? _dateAdapter.toIso8601(max) : null',\n // Used by the test harness to tie this input to its calendar. We can't depend on\n // `aria-owns` for this, because it's only defined while the calendar is open.\n '[attr.data-mat-calendar]': '_datepicker ? _datepicker.id : null',\n '[disabled]': 'disabled',\n '(input)': '_onInput($event.target.value)',\n '(change)': '_onChange()',\n '(blur)': '_onBlur()',\n '(keydown)': '_onKeydown($event)',\n },\n exportAs: 'matDatepickerInput',\n }]\n }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.DateAdapter, decorators: [{\n type: Optional\n }] }, { type: undefined, decorators: [{\n type: Optional\n }, {\n type: Inject,\n args: [MAT_DATE_FORMATS]\n }] }, { type: undefined, decorators: [{\n type: Optional\n }, {\n type: Inject,\n args: [MAT_FORM_FIELD]\n }] }]; }, propDecorators: { matDatepicker: [{\n type: Input\n }], min: [{\n type: Input\n }], max: [{\n type: Input\n }], dateFilter: [{\n type: Input,\n args: ['matDatepickerFilter']\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/** Can be used to override the icon of a `matDatepickerToggle`. */\nclass MatDatepickerToggleIcon {\n}\nMatDatepickerToggleIcon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0-rc.0\", ngImport: i0, type: MatDatepickerToggleIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive });\nMatDatepickerToggleIcon.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: \"14.0.0\", version: \"15.2.0-rc.0\", type: MatDatepickerToggleIcon, selector: \"[matDatepickerToggleIcon]\", ngImport: i0 });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0-rc.0\", ngImport: i0, type: MatDatepickerToggleIcon, decorators: [{\n type: Directive,\n args: [{\n selector: '[matDatepickerToggleIcon]',\n }]\n }] });\nclass MatDatepickerToggle {\n /** Whether the toggle button is disabled. */\n get disabled() {\n if (this._disabled === undefined && this.datepicker) {\n return this.datepicker.disabled;\n }\n return !!this._disabled;\n }\n set disabled(value) {\n this._disabled = coerceBooleanProperty(value);\n }\n constructor(_intl, _changeDetectorRef, defaultTabIndex) {\n this._intl = _intl;\n this._changeDetectorRef = _changeDetectorRef;\n this._stateChanges = Subscription.EMPTY;\n const parsedTabIndex = Number(defaultTabIndex);\n this.tabIndex = parsedTabIndex || parsedTabIndex === 0 ? parsedTabIndex : null;\n }\n ngOnChanges(changes) {\n if (changes['datepicker']) {\n this._watchStateChanges();\n }\n }\n ngOnDestroy() {\n this._stateChanges.unsubscribe();\n }\n ngAfterContentInit() {\n this._watchStateChanges();\n }\n _open(event) {\n if (this.datepicker && !this.disabled) {\n this.datepicker.open();\n event.stopPropagation();\n }\n }\n _watchStateChanges() {\n const datepickerStateChanged = this.datepicker ? this.datepicker.stateChanges : of();\n const inputStateChanged = this.datepicker && this.datepicker.datepickerInput\n ? this.datepicker.datepickerInput.stateChanges\n : of();\n const datepickerToggled = this.datepicker\n ? merge(this.datepicker.openedStream, this.datepicker.closedStream)\n : of();\n this._stateChanges.unsubscribe();\n this._stateChanges = merge(this._intl.changes, datepickerStateChanged, inputStateChanged, datepickerToggled).subscribe(() => this._changeDetectorRef.markForCheck());\n }\n}\nMatDatepickerToggle.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"15.2.0-rc.0\", ngImport: i0, type: MatDatepickerToggle, deps: [{ token: MatDatepickerIntl }, { token: i0.ChangeDetectorRef }, { token: 'tabindex', attribute: true }], target: i0.ɵɵFactoryTarget.Component });\nMatDatepickerToggle.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: \"14.0.0\", version: \"15.2.0-rc.0\", type: MatDatepickerToggle, selector: \"mat-datepicker-toggle\", inputs: { datepicker: [\"for\", \"datepicker\"], tabIndex: \"tabIndex\", ariaLabel: [\"aria-label\", \"ariaLabel\"], disabled: \"disabled\", disableRipple: \"disableRipple\" }, host: { listeners: { \"click\": \"_open($event)\" }, properties: { \"attr.tabindex\": \"null\", \"class.mat-datepicker-toggle-active\": \"datepicker && datepicker.opened\", \"class.mat-accent\": \"datepicker && datepicker.color === \\\"accent\\\"\", \"class.mat-warn\": \"datepicker && datepicker.color === \\\"warn\\\"\", \"attr.data-mat-calendar\": \"datepicker ? datepicker.id : null\" }, classAttribute: \"mat-datepicker-toggle\" }, queries: [{ propertyName: \"_customIcon\", first: true, predicate: MatDatepickerToggleIcon, descendants: true }], viewQueries: [{ propertyName: \"_button\", first: true, predicate: [\"button\"], descendants: true }], exportAs: [\"matDatepickerToggle\"], usesOnChanges: true, ngImport: i0, template: \"\\n\\n \\n \\n \\n\\n \\n\\n\", styles: [\".mat-datepicker-toggle{pointer-events:auto}.cdk-high-contrast-active .mat-datepicker-toggle-default-icon{color:CanvasText}\"], dependencies: [{ kind: \"directive\", type: i1.NgIf, selector: \"[ngIf]\", inputs: [\"ngIf\", \"ngIfThen\", \"ngIfElse\"] }, { kind: \"component\", type: i3.MatIconButton, selector: \"button[mat-icon-button]\", inputs: [\"disabled\", \"disableRipple\", \"color\"], exportAs: [\"matButton\"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"15.2.0-rc.0\", ngImport: i0, type: MatDatepickerToggle, decorators: [{\n type: Component,\n args: [{ selector: 'mat-datepicker-toggle', host: {\n 'class': 'mat-datepicker-toggle',\n '[attr.tabindex]': 'null',\n '[class.mat-datepicker-toggle-active]': 'datepicker && datepicker.opened',\n '[class.mat-accent]': 'datepicker && datepicker.color === \"accent\"',\n '[class.mat-warn]': 'datepicker && datepicker.color === \"warn\"',\n // Used by the test harness to tie this toggle to its datepicker.\n '[attr.data-mat-calendar]': 'datepicker ? datepicker.id : null',\n // Bind the `click` on the host, rather than the inner `button`, so that we can call\n // `stopPropagation` on it without affecting the user's `click` handlers. We need to stop\n // it so that the input doesn't get focused automatically by the form field (See #21836).\n '(click)': '_open($event)',\n }, exportAs: 'matDatepickerToggle', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: \"\\n\\n \\n \\n \\n\\n \\n\\n\", styles: [\".mat-datepicker-toggle{pointer-events:auto}.cdk-high-contrast-active .mat-datepicker-toggle-default-icon{color:CanvasText}\"] }]\n }], ctorParameters: function () { return [{ type: MatDatepickerIntl }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{\n type: Attribute,\n args: ['tabindex']\n }] }]; }, propDecorators: { datepicker: [{\n type: Input,\n args: ['for']\n }], tabIndex: [{\n type: Input\n }], ariaLabel: [{\n type: Input,\n args: ['aria-label']\n }], disabled: [{\n type: Input\n }], disableRipple: [{\n type: Input\n }], _customIcon: [{\n type: ContentChild,\n args: [MatDatepickerToggleIcon]\n }], _button: [{\n type: ViewChild,\n args: ['button']\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// This file contains the `_computeAriaAccessibleName` function, which computes what the *expected*\n// ARIA accessible name would be for a given element. Implements a subset of ARIA specification\n// [Accessible Name and Description Computation 1.2](https://www.w3.org/TR/accname-1.2/).\n//\n// Specification accname-1.2 can be summarized by returning the result of the first method\n// available.\n//\n// 1. `aria-labelledby` attribute\n// ```\n// \n// \n// \n// ```\n// 2. `aria-label` attribute (e.g. ``)\n// 3. Label with `for`/`id`\n// ```\n// \n// \n// \n// ```\n// 4. `placeholder` attribute (e.g. ``)\n// 5. `title` attribute (e.g. ``)\n// 6. text content\n// ```\n// \n// \n// \n// ```\n/**\n * Computes the *expected* ARIA accessible name for argument element based on [accname-1.2\n * specification](https://www.w3.org/TR/accname-1.2/). Implements a subset of accname-1.2,\n * and should only be used for the Datepicker's specific use case.\n *\n * Intended use:\n * This is not a general use implementation. Only implements the parts of accname-1.2 that are\n * required for the Datepicker's specific use case. This function is not intended for any other\n * use.\n *\n * Limitations:\n * - Only covers the needs of `matStartDate` and `matEndDate`. Does not support other use cases.\n * - See NOTES's in implementation for specific details on what parts of the accname-1.2\n * specification are not implemented.\n *\n * @param element {HTMLInputElement} native <input/> element of `matStartDate` or\n * `matEndDate` component. Corresponds to the 'Root Element' from accname-1.2\n *\n * @return expected ARIA accessible name of argument <input/>\n */\nfunction _computeAriaAccessibleName(element) {\n return _computeAriaAccessibleNameInternal(element, true);\n}\n/**\n * Determine if argument node is an Element based on `nodeType` property. This function is safe to\n * use with server-side rendering.\n */\nfunction ssrSafeIsElement(node) {\n return node.nodeType === Node.ELEMENT_NODE;\n}\n/**\n * Determine if argument node is an HTMLInputElement based on `nodeName` property. This funciton is\n * safe to use with server-side rendering.\n */\nfunction ssrSafeIsHTMLInputElement(node) {\n return node.nodeName === 'INPUT';\n}\n/**\n * Determine if argument node is an HTMLTextAreaElement based on `nodeName` property. This\n * funciton is safe to use with server-side rendering.\n */\nfunction ssrSafeIsHTMLTextAreaElement(node) {\n return node.nodeName === 'TEXTAREA';\n}\n/**\n * Calculate the expected ARIA accessible name for given DOM Node. Given DOM Node may be either the\n * \"Root node\" passed to `_computeAriaAccessibleName` or \"Current node\" as result of recursion.\n *\n * @return the accessible name of argument DOM Node\n *\n * @param currentNode node to determine accessible name of\n * @param isDirectlyReferenced true if `currentNode` is the root node to calculate ARIA accessible\n * name of. False if it is a result of recursion.\n */\nfunction _computeAriaAccessibleNameInternal(currentNode, isDirectlyReferenced) {\n // NOTE: this differs from accname-1.2 specification.\n // - Does not implement Step 1. of accname-1.2: '''If `currentNode`'s role prohibits naming,\n // return the empty string (\"\")'''.\n // - Does not implement Step 2.A. of accname-1.2: '''if current node is hidden and not directly\n // referenced by aria-labelledby... return the empty string.'''\n // acc-name-1.2 Step 2.B.: aria-labelledby\n if (ssrSafeIsElement(currentNode) && isDirectlyReferenced) {\n const labelledbyIds = currentNode.getAttribute?.('aria-labelledby')?.split(/\\s+/g) || [];\n const validIdRefs = labelledbyIds.reduce((validIds, id) => {\n const elem = document.getElementById(id);\n if (elem) {\n validIds.push(elem);\n }\n return validIds;\n }, []);\n if (validIdRefs.length) {\n return validIdRefs\n .map(idRef => {\n return _computeAriaAccessibleNameInternal(idRef, false);\n })\n .join(' ');\n }\n }\n // acc-name-1.2 Step 2.C.: aria-label\n if (ssrSafeIsElement(currentNode)) {\n const ariaLabel = currentNode.getAttribute('aria-label')?.trim();\n if (ariaLabel) {\n return ariaLabel;\n }\n }\n // acc-name-1.2 Step 2.D. attribute or element that defines a text alternative\n //\n // NOTE: this differs from accname-1.2 specification.\n // Only implements Step 2.D. for `