\\n\", host: {\n 'class': 'mat-calendar-body',\n 'role': 'grid',\n 'aria-readonly': 'true'\n }, exportAs: 'matCalendarBody', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, 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-cell{position:relative;height:0;line-height:0;text-align:center;outline:none;cursor:pointer}.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;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}.mat-datepicker-dialog .mat-dialog-container{position:relative;overflow:visible}.cdk-high-contrast-active .mat-datepicker-popup:not(:empty),.cdk-high-contrast-active .mat-calendar-body-selected{outline:solid 1px}.cdk-high-contrast-active .mat-calendar-body-today{outline:dotted 1px}.cdk-high-contrast-active .cdk-keyboard-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected),.cdk-high-contrast-active .cdk-program-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected){outline:dotted 2px}[dir=rtl] .mat-calendar-body-label{text-align:right}@media(hover: none){.mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected){background-color:transparent}}\\n\"] }]\n }], function () { return [{ type: ɵngcc0.ElementRef }, { type: ɵngcc0.NgZone }]; }, { numCols: [{\n type: Input\n }], activeCell: [{\n type: Input\n }], isRange: [{\n type: Input\n }], cellAspectRatio: [{\n type: Input\n }], previewStart: [{\n type: Input\n }], previewEnd: [{\n type: Input\n }], selectedValueChange: [{\n type: Output\n }], previewChange: [{\n type: Output\n }], 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 }], comparisonStart: [{\n type: Input\n }], comparisonEnd: [{\n type: Input\n }] }); })();\n/** Checks whether a node is a table cell element. */\nfunction isTableCell(node) {\n return node.nodeName === 'TD';\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 && start !== null && end !== null && start !== end &&\n value >= start && value <= end;\n}\n\n/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n/** 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 /**\n * Clones the selection model.\n * @deprecated To be turned into an abstract method.\n * @breaking-change 12.0.0\n */\n clone() {\n if (typeof ngDevMode === 'undefined' || ngDevMode) {\n throw Error('Not implemented');\n }\n return null;\n }\n}\nMatDateSelectionModel.ɵfac = function MatDateSelectionModel_Factory(t) { return new (t || MatDateSelectionModel)(ɵngcc0.ɵɵinject(undefined), ɵngcc0.ɵɵinject(ɵngcc2.DateAdapter)); };\nMatDateSelectionModel.ɵprov = /*@__PURE__*/ ɵngcc0.ɵɵdefineInjectable({ token: MatDateSelectionModel, factory: MatDateSelectionModel.ɵfac });\nMatDateSelectionModel.ctorParameters = () => [\n { type: undefined },\n { type: DateAdapter }\n];\n(function () { (typeof ngDevMode === \"undefined\" || ngDevMode) && ɵngcc0.ɵsetClassMetadata(MatDateSelectionModel, [{\n type: Injectable\n }], function () { return [{ type: undefined }, { type: ɵngcc2.DateAdapter }]; }, null); })();\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 = function MatSingleDateSelectionModel_Factory(t) { return new (t || MatSingleDateSelectionModel)(ɵngcc0.ɵɵinject(ɵngcc2.DateAdapter)); };\nMatSingleDateSelectionModel.ɵprov = /*@__PURE__*/ ɵngcc0.ɵɵdefineInjectable({ token: MatSingleDateSelectionModel, factory: MatSingleDateSelectionModel.ɵfac });\nMatSingleDateSelectionModel.ctorParameters = () => [\n { type: DateAdapter }\n];\n(function () { (typeof ngDevMode === \"undefined\" || ngDevMode) && ɵngcc0.ɵsetClassMetadata(MatSingleDateSelectionModel, [{\n type: Injectable\n }], function () { return [{ type: ɵngcc2.DateAdapter }]; }, null); })();\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) && 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 = function MatRangeDateSelectionModel_Factory(t) { return new (t || MatRangeDateSelectionModel)(ɵngcc0.ɵɵinject(ɵngcc2.DateAdapter)); };\nMatRangeDateSelectionModel.ɵprov = /*@__PURE__*/ ɵngcc0.ɵɵdefineInjectable({ token: MatRangeDateSelectionModel, factory: MatRangeDateSelectionModel.ɵfac });\nMatRangeDateSelectionModel.ctorParameters = () => [\n { type: DateAdapter }\n];\n(function () { (typeof ngDevMode === \"undefined\" || ngDevMode) && ɵngcc0.ɵsetClassMetadata(MatRangeDateSelectionModel, [{\n type: Injectable\n }], function () { return [{ type: ɵngcc2.DateAdapter }]; }, null); })();\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}\nDefaultMatCalendarRangeStrategy.ɵfac = function DefaultMatCalendarRangeStrategy_Factory(t) { return new (t || DefaultMatCalendarRangeStrategy)(ɵngcc0.ɵɵinject(ɵngcc2.DateAdapter)); };\nDefaultMatCalendarRangeStrategy.ɵprov = /*@__PURE__*/ ɵngcc0.ɵɵdefineInjectable({ token: DefaultMatCalendarRangeStrategy, factory: DefaultMatCalendarRangeStrategy.ɵfac });\nDefaultMatCalendarRangeStrategy.ctorParameters = () => [\n { type: DateAdapter }\n];\n(function () { (typeof ngDevMode === \"undefined\" || ngDevMode) && ɵngcc0.ɵsetClassMetadata(DefaultMatCalendarRangeStrategy, [{\n type: Injectable\n }], function () { return [{ type: ɵngcc2.DateAdapter }]; }, null); })();\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 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 /** 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 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 /**\n * The date to display in this month view (everything other than the month and year is ignored).\n */\n get activeDate() { return this._activeDate; }\n set activeDate(value) {\n const oldActiveDate = this._activeDate;\n const validDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value)) || 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() { return this._selected; }\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() { return this._minDate; }\n set minDate(value) {\n this._minDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));\n }\n /** The maximum selectable date. */\n get maxDate() { return this._maxDate; }\n set maxDate(value) {\n this._maxDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));\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 }\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 selectedYear = this._dateAdapter.getYear(this.activeDate);\n const selectedMonth = this._dateAdapter.getMonth(this.activeDate);\n const selectedDate = this._dateAdapter.createDate(selectedYear, selectedMonth, 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._previewStart = this._previewEnd = null;\n this._changeDetectorRef.markForCheck();\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 if (!this.dateFilter || this.dateFilter(this._activeDate)) {\n this._dateSelected({ value: this._dateAdapter.getDate(this._activeDate), event });\n // Prevent unexpected default actions such as form submission.\n event.preventDefault();\n }\n return;\n case ESCAPE:\n // Abort the current range selection if the user presses escape mid-selection.\n if (this._previewEnd != null && !hasModifierKey(event)) {\n this._previewStart = this._previewEnd = null;\n this.selectedChange.emit(null);\n this._userSelection.emit({ value: null, event });\n event.preventDefault();\n event.stopPropagation(); // Prevents the overlay from closing.\n }\n return;\n default:\n // Don't prevent default or focus active cell on keys that we don't explicitly handle.\n return;\n }\n if (this._dateAdapter.compareDate(oldActiveDate, this.activeDate)) {\n this.activeDateChange.emit(this.activeDate);\n }\n this._focusActiveCell();\n // Prevent unexpected default actions such as form submission.\n event.preventDefault();\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.getMonthNames('short')[this._dateAdapter.getMonth(this.activeDate)]\n .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 + this._dateAdapter.getDayOfWeek(firstOfMonth) -\n this._dateAdapter.getFirstDayOfWeek()) % 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 /** 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 // 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 /** 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) : 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 && d2 && 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}\nMatMonthView.ɵfac = function MatMonthView_Factory(t) { return new (t || MatMonthView)(ɵngcc0.ɵɵdirectiveInject(ɵngcc0.ChangeDetectorRef), ɵngcc0.ɵɵdirectiveInject(MAT_DATE_FORMATS, 8), ɵngcc0.ɵɵdirectiveInject(ɵngcc2.DateAdapter, 8), ɵngcc0.ɵɵdirectiveInject(ɵngcc3.Directionality, 8), ɵngcc0.ɵɵdirectiveInject(MAT_DATE_RANGE_SELECTION_STRATEGY, 8)); };\nMatMonthView.ɵcmp = /*@__PURE__*/ ɵngcc0.ɵɵdefineComponent({ type: MatMonthView, selectors: [[\"mat-month-view\"]], viewQuery: function MatMonthView_Query(rf, ctx) { if (rf & 1) {\n ɵngcc0.ɵɵviewQuery(MatCalendarBody, 5);\n } if (rf & 2) {\n let _t;\n ɵngcc0.ɵɵqueryRefresh(_t = ɵngcc0.ɵɵloadQuery()) && (ctx._matCalendarBody = _t.first);\n } }, inputs: { activeDate: \"activeDate\", selected: \"selected\", minDate: \"minDate\", maxDate: \"maxDate\", dateFilter: \"dateFilter\", dateClass: \"dateClass\", comparisonStart: \"comparisonStart\", comparisonEnd: \"comparisonEnd\" }, outputs: { selectedChange: \"selectedChange\", _userSelection: \"_userSelection\", activeDateChange: \"activeDateChange\" }, exportAs: [\"matMonthView\"], features: [ɵngcc0.ɵɵNgOnChangesFeature], decls: 7, vars: 13, consts: [[\"role\", \"presentation\", 1, \"mat-calendar-table\"], [1, \"mat-calendar-table-header\"], [\"scope\", \"col\", 4, \"ngFor\", \"ngForOf\"], [\"colspan\", \"7\", \"aria-hidden\", \"true\", 1, \"mat-calendar-table-header-divider\"], [\"mat-calendar-body\", \"\", 3, \"label\", \"rows\", \"todayValue\", \"startValue\", \"endValue\", \"comparisonStart\", \"comparisonEnd\", \"previewStart\", \"previewEnd\", \"isRange\", \"labelMinRequiredCells\", \"activeCell\", \"selectedValueChange\", \"previewChange\", \"keydown\"], [\"scope\", \"col\"]], template: function MatMonthView_Template(rf, ctx) { if (rf & 1) {\n ɵngcc0.ɵɵelementStart(0, \"table\", 0)(1, \"thead\", 1)(2, \"tr\");\n ɵngcc0.ɵɵtemplate(3, MatMonthView_th_3_Template, 2, 2, \"th\", 2);\n ɵngcc0.ɵɵelementEnd();\n ɵngcc0.ɵɵelementStart(4, \"tr\");\n ɵngcc0.ɵɵelement(5, \"th\", 3);\n ɵngcc0.ɵɵelementEnd()();\n ɵngcc0.ɵɵelementStart(6, \"tbody\", 4);\n ɵngcc0.ɵɵlistener(\"selectedValueChange\", function MatMonthView_Template_tbody_selectedValueChange_6_listener($event) { return ctx._dateSelected($event); })(\"previewChange\", function MatMonthView_Template_tbody_previewChange_6_listener($event) { return ctx._previewChanged($event); })(\"keydown\", function MatMonthView_Template_tbody_keydown_6_listener($event) { return ctx._handleCalendarBodyKeydown($event); });\n ɵngcc0.ɵɵelementEnd()();\n } if (rf & 2) {\n ɵngcc0.ɵɵadvance(3);\n ɵngcc0.ɵɵproperty(\"ngForOf\", ctx._weekdays);\n ɵngcc0.ɵɵadvance(3);\n ɵngcc0.ɵɵproperty(\"label\", ctx._monthLabel)(\"rows\", ctx._weeks)(\"todayValue\", ctx._todayDate)(\"startValue\", ctx._rangeStart)(\"endValue\", ctx._rangeEnd)(\"comparisonStart\", ctx._comparisonRangeStart)(\"comparisonEnd\", ctx._comparisonRangeEnd)(\"previewStart\", ctx._previewStart)(\"previewEnd\", ctx._previewEnd)(\"isRange\", ctx._isRange)(\"labelMinRequiredCells\", 3)(\"activeCell\", ctx._dateAdapter.getDate(ctx.activeDate) - 1);\n } }, dependencies: [ɵngcc1.NgForOf, MatCalendarBody], encapsulation: 2, changeDetection: 0 });\nMatMonthView.ctorParameters = () => [\n { type: ChangeDetectorRef },\n { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [MAT_DATE_FORMATS,] }] },\n { type: DateAdapter, decorators: [{ type: Optional }] },\n { type: Directionality, decorators: [{ type: Optional }] },\n { type: undefined, decorators: [{ type: Inject, args: [MAT_DATE_RANGE_SELECTION_STRATEGY,] }, { type: Optional }] }\n];\nMatMonthView.propDecorators = {\n activeDate: [{ type: Input }],\n selected: [{ type: Input }],\n minDate: [{ type: Input }],\n maxDate: [{ type: Input }],\n dateFilter: [{ type: Input }],\n dateClass: [{ type: Input }],\n comparisonStart: [{ type: Input }],\n comparisonEnd: [{ type: Input }],\n selectedChange: [{ type: Output }],\n _userSelection: [{ type: Output }],\n activeDateChange: [{ type: Output }],\n _matCalendarBody: [{ type: ViewChild, args: [MatCalendarBody,] }]\n};\n(function () { (typeof ngDevMode === \"undefined\" || ngDevMode) && ɵngcc0.ɵsetClassMetadata(MatMonthView, [{\n type: Component,\n args: [{\n selector: 'mat-month-view',\n template: \"
\\n \\n
\\n
{{day.narrow}}
\\n
\\n
\\n \\n \\n \\n
\\n\",\n exportAs: 'matMonthView',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush\n }]\n }], function () { return [{ type: ɵngcc0.ChangeDetectorRef }, { type: undefined, decorators: [{\n type: Optional\n }, {\n type: Inject,\n args: [MAT_DATE_FORMATS]\n }] }, { type: ɵngcc2.DateAdapter, decorators: [{\n type: Optional\n }] }, { type: ɵngcc3.Directionality, decorators: [{\n type: Optional\n }] }, { type: undefined, decorators: [{\n type: Inject,\n args: [MAT_DATE_RANGE_SELECTION_STRATEGY]\n }, {\n type: Optional\n }] }]; }, { selectedChange: [{\n type: Output\n }], _userSelection: [{\n type: Output\n }], activeDateChange: [{\n type: Output\n }], 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 }], _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 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 /** The date to display in this multi-year view (everything other than the year is ignored). */\n get activeDate() { return this._activeDate; }\n set activeDate(value) {\n let oldActiveDate = this._activeDate;\n const validDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value)) || 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() { return this._selected; }\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() { return this._minDate; }\n set minDate(value) {\n this._minDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));\n }\n /** The maximum selectable date. */\n get maxDate() { return this._maxDate; }\n set maxDate(value) {\n this._maxDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));\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 this.yearSelected.emit(this._dateAdapter.createDate(year, 0, 1));\n let month = this._dateAdapter.getMonth(this.activeDate);\n let daysInMonth = this._dateAdapter.getNumDaysInMonth(this._dateAdapter.createDate(year, month, 1));\n this.selectedChange.emit(this._dateAdapter.createDate(year, month, Math.min(this._dateAdapter.getDate(this.activeDate), daysInMonth)));\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 - getActiveOffset(this._dateAdapter, this.activeDate, this.minDate, this.maxDate) - 1);\n break;\n case PAGE_UP:\n this.activeDate =\n this._dateAdapter.addCalendarYears(this._activeDate, event.altKey ? -yearsPerPage * 10 : -yearsPerPage);\n break;\n case PAGE_DOWN:\n this.activeDate =\n this._dateAdapter.addCalendarYears(this._activeDate, event.altKey ? yearsPerPage * 10 : yearsPerPage);\n break;\n case ENTER:\n case SPACE:\n this._yearSelected({ value: this._dateAdapter.getYear(this._activeDate), event });\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._focusActiveCell();\n // Prevent unexpected default actions such as form submission.\n event.preventDefault();\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 /** 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 || 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 = function MatMultiYearView_Factory(t) { return new (t || MatMultiYearView)(ɵngcc0.ɵɵdirectiveInject(ɵngcc0.ChangeDetectorRef), ɵngcc0.ɵɵdirectiveInject(ɵngcc2.DateAdapter, 8), ɵngcc0.ɵɵdirectiveInject(ɵngcc3.Directionality, 8)); };\nMatMultiYearView.ɵcmp = /*@__PURE__*/ ɵngcc0.ɵɵdefineComponent({ type: MatMultiYearView, selectors: [[\"mat-multi-year-view\"]], viewQuery: function MatMultiYearView_Query(rf, ctx) { if (rf & 1) {\n ɵngcc0.ɵɵviewQuery(MatCalendarBody, 5);\n } if (rf & 2) {\n let _t;\n ɵngcc0.ɵɵqueryRefresh(_t = ɵngcc0.ɵɵloadQuery()) && (ctx._matCalendarBody = _t.first);\n } }, inputs: { activeDate: \"activeDate\", selected: \"selected\", minDate: \"minDate\", maxDate: \"maxDate\", dateFilter: \"dateFilter\", dateClass: \"dateClass\" }, outputs: { selectedChange: \"selectedChange\", yearSelected: \"yearSelected\", activeDateChange: \"activeDateChange\" }, exportAs: [\"matMultiYearView\"], decls: 5, vars: 7, consts: [[\"role\", \"presentation\", 1, \"mat-calendar-table\"], [1, \"mat-calendar-table-header\"], [\"colspan\", \"4\", 1, \"mat-calendar-table-header-divider\"], [\"mat-calendar-body\", \"\", 3, \"rows\", \"todayValue\", \"startValue\", \"endValue\", \"numCols\", \"cellAspectRatio\", \"activeCell\", \"selectedValueChange\", \"keydown\"]], template: function MatMultiYearView_Template(rf, ctx) { if (rf & 1) {\n ɵngcc0.ɵɵelementStart(0, \"table\", 0)(1, \"thead\", 1)(2, \"tr\");\n ɵngcc0.ɵɵelement(3, \"th\", 2);\n ɵngcc0.ɵɵelementEnd()();\n ɵngcc0.ɵɵelementStart(4, \"tbody\", 3);\n ɵngcc0.ɵɵlistener(\"selectedValueChange\", function MatMultiYearView_Template_tbody_selectedValueChange_4_listener($event) { return ctx._yearSelected($event); })(\"keydown\", function MatMultiYearView_Template_tbody_keydown_4_listener($event) { return ctx._handleCalendarBodyKeydown($event); });\n ɵngcc0.ɵɵelementEnd()();\n } if (rf & 2) {\n ɵngcc0.ɵɵadvance(4);\n ɵngcc0.ɵɵproperty(\"rows\", ctx._years)(\"todayValue\", ctx._todayYear)(\"startValue\", ctx._selectedYear)(\"endValue\", ctx._selectedYear)(\"numCols\", 4)(\"cellAspectRatio\", 4 / 7)(\"activeCell\", ctx._getActiveCell());\n } }, dependencies: [MatCalendarBody], encapsulation: 2, changeDetection: 0 });\nMatMultiYearView.ctorParameters = () => [\n { type: ChangeDetectorRef },\n { type: DateAdapter, decorators: [{ type: Optional }] },\n { type: Directionality, decorators: [{ type: Optional }] }\n];\nMatMultiYearView.propDecorators = {\n activeDate: [{ type: Input }],\n selected: [{ type: Input }],\n minDate: [{ type: Input }],\n maxDate: [{ type: Input }],\n dateFilter: [{ type: Input }],\n dateClass: [{ type: Input }],\n selectedChange: [{ type: Output }],\n yearSelected: [{ type: Output }],\n activeDateChange: [{ type: Output }],\n _matCalendarBody: [{ type: ViewChild, args: [MatCalendarBody,] }]\n};\n(function () { (typeof ngDevMode === \"undefined\" || ngDevMode) && ɵngcc0.ɵsetClassMetadata(MatMultiYearView, [{\n type: Component,\n args: [{\n selector: 'mat-multi-year-view',\n template: \"
\\n \\n
\\n \\n \\n \\n
\\n\",\n exportAs: 'matMultiYearView',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush\n }]\n }], function () { return [{ type: ɵngcc0.ChangeDetectorRef }, { type: ɵngcc2.DateAdapter, decorators: [{\n type: Optional\n }] }, { type: ɵngcc3.Directionality, decorators: [{\n type: Optional\n }] }]; }, { selectedChange: [{\n type: Output\n }], yearSelected: [{\n type: Output\n }], activeDateChange: [{\n type: Output\n }], 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 }], _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 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 /** The date to display in this year view (everything other than the year is ignored). */\n get activeDate() { return this._activeDate; }\n set activeDate(value) {\n let oldActiveDate = this._activeDate;\n const validDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value)) || 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() { return this._selected; }\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() { return this._minDate; }\n set minDate(value) {\n this._minDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));\n }\n /** The maximum selectable date. */\n get maxDate() { return this._maxDate; }\n set maxDate(value) {\n this._maxDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));\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 normalizedDate = this._dateAdapter.createDate(this._dateAdapter.getYear(this.activeDate), month, 1);\n this.monthSelected.emit(normalizedDate);\n const daysInMonth = this._dateAdapter.getNumDaysInMonth(normalizedDate);\n this.selectedChange.emit(this._dateAdapter.createDate(this._dateAdapter.getYear(this.activeDate), month, Math.min(this._dateAdapter.getDate(this.activeDate), daysInMonth)));\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 =\n this._dateAdapter.addCalendarYears(this._activeDate, event.altKey ? -10 : -1);\n break;\n case PAGE_DOWN:\n this.activeDate =\n this._dateAdapter.addCalendarYears(this._activeDate, event.altKey ? 10 : 1);\n break;\n case ENTER:\n case SPACE:\n this._monthSelected({ value: this._dateAdapter.getMonth(this._activeDate), event });\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._focusActiveCell();\n // Prevent unexpected default actions such as form submission.\n event.preventDefault();\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 = [[0, 1, 2, 3], [4, 5, 6, 7], [8, 9, 10, 11]].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 /**\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) : null;\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 || 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 = this._getMonthInCurrentYear(value.start) ||\n this._getMonthInCurrentYear(value.end);\n }\n else {\n this._selectedMonth = this._getMonthInCurrentYear(value);\n }\n }\n}\nMatYearView.ɵfac = function MatYearView_Factory(t) { return new (t || MatYearView)(ɵngcc0.ɵɵdirectiveInject(ɵngcc0.ChangeDetectorRef), ɵngcc0.ɵɵdirectiveInject(MAT_DATE_FORMATS, 8), ɵngcc0.ɵɵdirectiveInject(ɵngcc2.DateAdapter, 8), ɵngcc0.ɵɵdirectiveInject(ɵngcc3.Directionality, 8)); };\nMatYearView.ɵcmp = /*@__PURE__*/ ɵngcc0.ɵɵdefineComponent({ type: MatYearView, selectors: [[\"mat-year-view\"]], viewQuery: function MatYearView_Query(rf, ctx) { if (rf & 1) {\n ɵngcc0.ɵɵviewQuery(MatCalendarBody, 5);\n } if (rf & 2) {\n let _t;\n ɵngcc0.ɵɵqueryRefresh(_t = ɵngcc0.ɵɵloadQuery()) && (ctx._matCalendarBody = _t.first);\n } }, inputs: { activeDate: \"activeDate\", selected: \"selected\", minDate: \"minDate\", maxDate: \"maxDate\", dateFilter: \"dateFilter\", dateClass: \"dateClass\" }, outputs: { selectedChange: \"selectedChange\", monthSelected: \"monthSelected\", activeDateChange: \"activeDateChange\" }, exportAs: [\"matYearView\"], decls: 5, vars: 9, consts: [[\"role\", \"presentation\", 1, \"mat-calendar-table\"], [1, \"mat-calendar-table-header\"], [\"colspan\", \"4\", 1, \"mat-calendar-table-header-divider\"], [\"mat-calendar-body\", \"\", 3, \"label\", \"rows\", \"todayValue\", \"startValue\", \"endValue\", \"labelMinRequiredCells\", \"numCols\", \"cellAspectRatio\", \"activeCell\", \"selectedValueChange\", \"keydown\"]], template: function MatYearView_Template(rf, ctx) { if (rf & 1) {\n ɵngcc0.ɵɵelementStart(0, \"table\", 0)(1, \"thead\", 1)(2, \"tr\");\n ɵngcc0.ɵɵelement(3, \"th\", 2);\n ɵngcc0.ɵɵelementEnd()();\n ɵngcc0.ɵɵelementStart(4, \"tbody\", 3);\n ɵngcc0.ɵɵlistener(\"selectedValueChange\", function MatYearView_Template_tbody_selectedValueChange_4_listener($event) { return ctx._monthSelected($event); })(\"keydown\", function MatYearView_Template_tbody_keydown_4_listener($event) { return ctx._handleCalendarBodyKeydown($event); });\n ɵngcc0.ɵɵelementEnd()();\n } if (rf & 2) {\n ɵngcc0.ɵɵadvance(4);\n ɵngcc0.ɵɵproperty(\"label\", ctx._yearLabel)(\"rows\", ctx._months)(\"todayValue\", ctx._todayMonth)(\"startValue\", ctx._selectedMonth)(\"endValue\", ctx._selectedMonth)(\"labelMinRequiredCells\", 2)(\"numCols\", 4)(\"cellAspectRatio\", 4 / 7)(\"activeCell\", ctx._dateAdapter.getMonth(ctx.activeDate));\n } }, dependencies: [MatCalendarBody], encapsulation: 2, changeDetection: 0 });\nMatYearView.ctorParameters = () => [\n { type: ChangeDetectorRef },\n { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [MAT_DATE_FORMATS,] }] },\n { type: DateAdapter, decorators: [{ type: Optional }] },\n { type: Directionality, decorators: [{ type: Optional }] }\n];\nMatYearView.propDecorators = {\n activeDate: [{ type: Input }],\n selected: [{ type: Input }],\n minDate: [{ type: Input }],\n maxDate: [{ type: Input }],\n dateFilter: [{ type: Input }],\n dateClass: [{ type: Input }],\n selectedChange: [{ type: Output }],\n monthSelected: [{ type: Output }],\n activeDateChange: [{ type: Output }],\n _matCalendarBody: [{ type: ViewChild, args: [MatCalendarBody,] }]\n};\n(function () { (typeof ngDevMode === \"undefined\" || ngDevMode) && ɵngcc0.ɵsetClassMetadata(MatYearView, [{\n type: Component,\n args: [{\n selector: 'mat-year-view',\n template: \"
\\n \\n
\\n \\n \\n \\n
\\n\",\n exportAs: 'matYearView',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush\n }]\n }], function () { return [{ type: ɵngcc0.ChangeDetectorRef }, { type: undefined, decorators: [{\n type: Optional\n }, {\n type: Inject,\n args: [MAT_DATE_FORMATS]\n }] }, { type: ɵngcc2.DateAdapter, decorators: [{\n type: Optional\n }] }, { type: ɵngcc3.Directionality, decorators: [{\n type: Optional\n }] }]; }, { selectedChange: [{\n type: Output\n }], monthSelected: [{\n type: Output\n }], activeDateChange: [{\n type: Output\n }], 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 }], _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 */\n/** Counter used to generate unique IDs. */\nlet uniqueId = 0;\n/** Default header for MatCalendar */\nclass MatCalendarHeader {\n constructor(_intl, calendar, _dateAdapter, _dateFormats, changeDetectorRef) {\n this._intl = _intl;\n this.calendar = calendar;\n this._dateAdapter = _dateAdapter;\n this._dateFormats = _dateFormats;\n this._buttonDescriptionId = `mat-calendar-button-${uniqueId++}`;\n this.calendar.stateChanges.subscribe(() => changeDetectorRef.markForCheck());\n }\n /** The label for the current calendar view. */\n get periodButtonText() {\n if (this.calendar.currentView == 'month') {\n return this._dateAdapter\n .format(this.calendar.activeDate, this._dateFormats.display.monthYearLabel)\n .toLocaleUpperCase();\n }\n if (this.calendar.currentView == 'year') {\n return this._dateAdapter.getYearName(this.calendar.activeDate);\n }\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, and the last year is\n // just yearsPerPage - 1 away.\n const activeYear = this._dateAdapter.getYear(this.calendar.activeDate);\n const minYearOfPage = activeYear - getActiveOffset(this._dateAdapter, this.calendar.activeDate, this.calendar.minDate, this.calendar.maxDate);\n const maxYearOfPage = minYearOfPage + yearsPerPage - 1;\n const minYearName = this._dateAdapter.getYearName(this._dateAdapter.createDate(minYearOfPage, 0, 1));\n const maxYearName = this._dateAdapter.getYearName(this._dateAdapter.createDate(maxYearOfPage, 0, 1));\n return this._intl.formatYearRange(minYearName, maxYearName);\n }\n get periodButtonLabel() {\n return this.calendar.currentView == 'month' ?\n this._intl.switchToMultiYearViewLabel : this._intl.switchToMonthViewLabel;\n }\n /** The label for the previous button. */\n get prevButtonLabel() {\n return {\n 'month': this._intl.prevMonthLabel,\n 'year': this._intl.prevYearLabel,\n 'multi-year': this._intl.prevMultiYearLabel\n }[this.calendar.currentView];\n }\n /** The label for the next button. */\n get nextButtonLabel() {\n return {\n 'month': this._intl.nextMonthLabel,\n 'year': this._intl.nextYearLabel,\n 'multi-year': this._intl.nextMultiYearLabel\n }[this.calendar.currentView];\n }\n /** Handles user clicks on the period label. */\n currentPeriodClicked() {\n this.calendar.currentView = this.calendar.currentView == 'month' ? 'multi-year' : 'month';\n }\n /** Handles user clicks on the previous button. */\n previousClicked() {\n this.calendar.activeDate = this.calendar.currentView == 'month' ?\n this._dateAdapter.addCalendarMonths(this.calendar.activeDate, -1) :\n this._dateAdapter.addCalendarYears(this.calendar.activeDate, this.calendar.currentView == 'year' ? -1 : -yearsPerPage);\n }\n /** Handles user clicks on the next button. */\n nextClicked() {\n this.calendar.activeDate = this.calendar.currentView == 'month' ?\n this._dateAdapter.addCalendarMonths(this.calendar.activeDate, 1) :\n this._dateAdapter.addCalendarYears(this.calendar.activeDate, this.calendar.currentView == 'year' ? 1 : yearsPerPage);\n }\n /** Whether the previous period button is enabled. */\n previousEnabled() {\n if (!this.calendar.minDate) {\n return true;\n }\n return !this.calendar.minDate ||\n !this._isSameView(this.calendar.activeDate, this.calendar.minDate);\n }\n /** Whether the next period button is enabled. */\n nextEnabled() {\n return !this.calendar.maxDate ||\n !this._isSameView(this.calendar.activeDate, this.calendar.maxDate);\n }\n /** Whether the two dates represent the same view in the current view mode (month or year). */\n _isSameView(date1, date2) {\n if (this.calendar.currentView == 'month') {\n return this._dateAdapter.getYear(date1) == this._dateAdapter.getYear(date2) &&\n this._dateAdapter.getMonth(date1) == this._dateAdapter.getMonth(date2);\n }\n if (this.calendar.currentView == 'year') {\n return this._dateAdapter.getYear(date1) == this._dateAdapter.getYear(date2);\n }\n // Otherwise we are in 'multi-year' view.\n return isSameMultiYearView(this._dateAdapter, date1, date2, this.calendar.minDate, this.calendar.maxDate);\n }\n}\nMatCalendarHeader.ɵfac = function MatCalendarHeader_Factory(t) { return new (t || MatCalendarHeader)(ɵngcc0.ɵɵdirectiveInject(MatDatepickerIntl), ɵngcc0.ɵɵdirectiveInject(forwardRef(() => MatCalendar)), ɵngcc0.ɵɵdirectiveInject(ɵngcc2.DateAdapter, 8), ɵngcc0.ɵɵdirectiveInject(MAT_DATE_FORMATS, 8), ɵngcc0.ɵɵdirectiveInject(ɵngcc0.ChangeDetectorRef)); };\nMatCalendarHeader.ɵcmp = /*@__PURE__*/ ɵngcc0.ɵɵdefineComponent({ type: MatCalendarHeader, selectors: [[\"mat-calendar-header\"]], exportAs: [\"matCalendarHeader\"], ngContentSelectors: _c1, decls: 10, vars: 10, consts: [[1, \"mat-calendar-header\"], [1, \"mat-calendar-controls\"], [\"mat-button\", \"\", \"type\", \"button\", \"cdkAriaLive\", \"polite\", 1, \"mat-calendar-period-button\", 3, \"click\"], [1, \"mat-calendar-arrow\"], [1, \"mat-calendar-spacer\"], [\"mat-icon-button\", \"\", \"type\", \"button\", 1, \"mat-calendar-previous-button\", 3, \"disabled\", \"click\"], [\"mat-icon-button\", \"\", \"type\", \"button\", 1, \"mat-calendar-next-button\", 3, \"disabled\", \"click\"]], template: function MatCalendarHeader_Template(rf, ctx) { if (rf & 1) {\n ɵngcc0.ɵɵprojectionDef();\n ɵngcc0.ɵɵelementStart(0, \"div\", 0)(1, \"div\", 1)(2, \"button\", 2);\n ɵngcc0.ɵɵlistener(\"click\", function MatCalendarHeader_Template_button_click_2_listener() { return ctx.currentPeriodClicked(); });\n ɵngcc0.ɵɵelementStart(3, \"span\");\n ɵngcc0.ɵɵtext(4);\n ɵngcc0.ɵɵelementEnd();\n ɵngcc0.ɵɵelement(5, \"div\", 3);\n ɵngcc0.ɵɵelementEnd();\n ɵngcc0.ɵɵelement(6, \"div\", 4);\n ɵngcc0.ɵɵprojection(7);\n ɵngcc0.ɵɵelementStart(8, \"button\", 5);\n ɵngcc0.ɵɵlistener(\"click\", function MatCalendarHeader_Template_button_click_8_listener() { return ctx.previousClicked(); });\n ɵngcc0.ɵɵelementEnd();\n ɵngcc0.ɵɵelementStart(9, \"button\", 6);\n ɵngcc0.ɵɵlistener(\"click\", function MatCalendarHeader_Template_button_click_9_listener() { return ctx.nextClicked(); });\n ɵngcc0.ɵɵelementEnd()()();\n } if (rf & 2) {\n ɵngcc0.ɵɵadvance(2);\n ɵngcc0.ɵɵattribute(\"aria-label\", ctx.periodButtonLabel)(\"aria-describedby\", ctx._buttonDescriptionId);\n ɵngcc0.ɵɵadvance(1);\n ɵngcc0.ɵɵattribute(\"id\", ctx._buttonDescriptionId);\n ɵngcc0.ɵɵadvance(1);\n ɵngcc0.ɵɵtextInterpolate(ctx.periodButtonText);\n ɵngcc0.ɵɵadvance(1);\n ɵngcc0.ɵɵclassProp(\"mat-calendar-invert\", ctx.calendar.currentView !== \"month\");\n ɵngcc0.ɵɵadvance(3);\n ɵngcc0.ɵɵproperty(\"disabled\", !ctx.previousEnabled());\n ɵngcc0.ɵɵattribute(\"aria-label\", ctx.prevButtonLabel);\n ɵngcc0.ɵɵadvance(1);\n ɵngcc0.ɵɵproperty(\"disabled\", !ctx.nextEnabled());\n ɵngcc0.ɵɵattribute(\"aria-label\", ctx.nextButtonLabel);\n } }, dependencies: [ɵngcc4.MatButton, ɵngcc5.CdkAriaLive], encapsulation: 2, changeDetection: 0 });\nMatCalendarHeader.ctorParameters = () => [\n { type: MatDatepickerIntl },\n { type: MatCalendar, decorators: [{ type: Inject, args: [forwardRef(() => MatCalendar),] }] },\n { type: DateAdapter, decorators: [{ type: Optional }] },\n { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [MAT_DATE_FORMATS,] }] },\n { type: ChangeDetectorRef }\n];\n(function () { (typeof ngDevMode === \"undefined\" || ngDevMode) && ɵngcc0.ɵsetClassMetadata(MatCalendarHeader, [{\n type: Component,\n args: [{\n selector: 'mat-calendar-header',\n template: \"
\\n
\\n \\n\\n \\n\\n \\n\\n \\n\\n \\n
\\n
\\n\",\n exportAs: 'matCalendarHeader',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush\n }]\n }], function () { return [{ type: MatDatepickerIntl }, { type: MatCalendar, decorators: [{\n type: Inject,\n args: [forwardRef(() => MatCalendar)]\n }] }, { type: ɵngcc2.DateAdapter, decorators: [{\n type: Optional\n }] }, { type: undefined, decorators: [{\n type: Optional\n }, {\n type: Inject,\n args: [MAT_DATE_FORMATS]\n }] }, { type: ɵngcc0.ChangeDetectorRef }]; }, null); })();\n/**\n * A calendar that is used as part of the datepicker.\n * @docs-private\n */\nclass MatCalendar {\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 /**\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 /** A date representing the period (month or year) to start the calendar in. */\n get startAt() { return this._startAt; }\n set startAt(value) {\n this._startAt = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));\n }\n /** The currently selected date. */\n get selected() { return this._selected; }\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() { return this._minDate; }\n set minDate(value) {\n this._minDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));\n }\n /** The maximum selectable date. */\n get maxDate() { return this._maxDate; }\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() { return this._clampedActiveDate; }\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() { return this._currentView; }\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 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 const change = changes['minDate'] || changes['maxDate'] || 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 focusActiveCell() {\n this._getCurrentViewComponent()._focusActiveCell(false);\n }\n /** Updates today's date after an update of the active date */\n updateTodaysDate() {\n const currentView = this.currentView;\n let view;\n if (currentView === 'month') {\n view = this.monthView;\n }\n else if (currentView === 'year') {\n view = this.yearView;\n }\n else {\n view = this.multiYearView;\n }\n view._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 /** Returns the component instance that corresponds to the current calendar view. */\n _getCurrentViewComponent() {\n return this.monthView || this.yearView || this.multiYearView;\n }\n}\nMatCalendar.ɵfac = function MatCalendar_Factory(t) { return new (t || MatCalendar)(ɵngcc0.ɵɵdirectiveInject(MatDatepickerIntl), ɵngcc0.ɵɵdirectiveInject(ɵngcc2.DateAdapter, 8), ɵngcc0.ɵɵdirectiveInject(MAT_DATE_FORMATS, 8), ɵngcc0.ɵɵdirectiveInject(ɵngcc0.ChangeDetectorRef)); };\nMatCalendar.ɵcmp = /*@__PURE__*/ ɵngcc0.ɵɵdefineComponent({ type: MatCalendar, selectors: [[\"mat-calendar\"]], viewQuery: function MatCalendar_Query(rf, ctx) { if (rf & 1) {\n ɵngcc0.ɵɵviewQuery(MatMonthView, 5);\n ɵngcc0.ɵɵviewQuery(MatYearView, 5);\n ɵngcc0.ɵɵviewQuery(MatMultiYearView, 5);\n } if (rf & 2) {\n let _t;\n ɵngcc0.ɵɵqueryRefresh(_t = ɵngcc0.ɵɵloadQuery()) && (ctx.monthView = _t.first);\n ɵngcc0.ɵɵqueryRefresh(_t = ɵngcc0.ɵɵloadQuery()) && (ctx.yearView = _t.first);\n ɵngcc0.ɵɵqueryRefresh(_t = ɵngcc0.ɵɵloadQuery()) && (ctx.multiYearView = _t.first);\n } }, hostAttrs: [1, \"mat-calendar\"], inputs: { startView: \"startView\", startAt: \"startAt\", selected: \"selected\", minDate: \"minDate\", maxDate: \"maxDate\", headerComponent: \"headerComponent\", dateFilter: \"dateFilter\", dateClass: \"dateClass\", comparisonStart: \"comparisonStart\", comparisonEnd: \"comparisonEnd\" }, outputs: { selectedChange: \"selectedChange\", yearSelected: \"yearSelected\", monthSelected: \"monthSelected\", viewChanged: \"viewChanged\", _userSelection: \"_userSelection\" }, exportAs: [\"matCalendar\"], features: [ɵngcc0.ɵɵProvidersFeature([MAT_SINGLE_DATE_SELECTION_MODEL_PROVIDER]), ɵngcc0.ɵɵNgOnChangesFeature], decls: 5, vars: 5, consts: [[3, \"cdkPortalOutlet\"], [\"cdkMonitorSubtreeFocus\", \"\", \"tabindex\", \"-1\", 1, \"mat-calendar-content\", 3, \"ngSwitch\"], [3, \"activeDate\", \"selected\", \"dateFilter\", \"maxDate\", \"minDate\", \"dateClass\", \"comparisonStart\", \"comparisonEnd\", \"activeDateChange\", \"_userSelection\", 4, \"ngSwitchCase\"], [3, \"activeDate\", \"selected\", \"dateFilter\", \"maxDate\", \"minDate\", \"dateClass\", \"activeDateChange\", \"monthSelected\", \"selectedChange\", 4, \"ngSwitchCase\"], [3, \"activeDate\", \"selected\", \"dateFilter\", \"maxDate\", \"minDate\", \"dateClass\", \"activeDateChange\", \"yearSelected\", \"selectedChange\", 4, \"ngSwitchCase\"], [3, \"activeDate\", \"selected\", \"dateFilter\", \"maxDate\", \"minDate\", \"dateClass\", \"comparisonStart\", \"comparisonEnd\", \"activeDateChange\", \"_userSelection\"], [3, \"activeDate\", \"selected\", \"dateFilter\", \"maxDate\", \"minDate\", \"dateClass\", \"activeDateChange\", \"monthSelected\", \"selectedChange\"], [3, \"activeDate\", \"selected\", \"dateFilter\", \"maxDate\", \"minDate\", \"dateClass\", \"activeDateChange\", \"yearSelected\", \"selectedChange\"]], template: function MatCalendar_Template(rf, ctx) { if (rf & 1) {\n ɵngcc0.ɵɵtemplate(0, MatCalendar_ng_template_0_Template, 0, 0, \"ng-template\", 0);\n ɵngcc0.ɵɵelementStart(1, \"div\", 1);\n ɵngcc0.ɵɵtemplate(2, MatCalendar_mat_month_view_2_Template, 1, 8, \"mat-month-view\", 2);\n ɵngcc0.ɵɵtemplate(3, MatCalendar_mat_year_view_3_Template, 1, 6, \"mat-year-view\", 3);\n ɵngcc0.ɵɵtemplate(4, MatCalendar_mat_multi_year_view_4_Template, 1, 6, \"mat-multi-year-view\", 4);\n ɵngcc0.ɵɵelementEnd();\n } if (rf & 2) {\n ɵngcc0.ɵɵproperty(\"cdkPortalOutlet\", ctx._calendarHeaderPortal);\n ɵngcc0.ɵɵadvance(1);\n ɵngcc0.ɵɵproperty(\"ngSwitch\", ctx.currentView);\n ɵngcc0.ɵɵadvance(1);\n ɵngcc0.ɵɵproperty(\"ngSwitchCase\", \"month\");\n ɵngcc0.ɵɵadvance(1);\n ɵngcc0.ɵɵproperty(\"ngSwitchCase\", \"year\");\n ɵngcc0.ɵɵadvance(1);\n ɵngcc0.ɵɵproperty(\"ngSwitchCase\", \"multi-year\");\n } }, dependencies: [ɵngcc1.NgSwitch, ɵngcc1.NgSwitchCase, ɵngcc5.CdkMonitorFocus, ɵngcc6.CdkPortalOutlet, MatMonthView, MatYearView, MatMultiYearView], 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;margin:5% calc(33% / 7 - 16px)}.mat-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:.04}.mat-calendar-spacer{flex:1 1 auto}.mat-calendar-period-button{min-width:0}.mat-calendar-arrow{display:inline-block;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top-width:5px;border-top-style:solid;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}.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}\\n\"], encapsulation: 2, changeDetection: 0 });\nMatCalendar.ctorParameters = () => [\n { type: MatDatepickerIntl },\n { type: DateAdapter, decorators: [{ type: Optional }] },\n { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [MAT_DATE_FORMATS,] }] },\n { type: ChangeDetectorRef }\n];\nMatCalendar.propDecorators = {\n headerComponent: [{ type: Input }],\n startAt: [{ type: Input }],\n startView: [{ type: Input }],\n selected: [{ type: Input }],\n minDate: [{ type: Input }],\n maxDate: [{ type: Input }],\n dateFilter: [{ type: Input }],\n dateClass: [{ type: Input }],\n comparisonStart: [{ type: Input }],\n comparisonEnd: [{ type: Input }],\n selectedChange: [{ type: Output }],\n yearSelected: [{ type: Output }],\n monthSelected: [{ type: Output }],\n viewChanged: [{ type: Output }],\n _userSelection: [{ type: Output }],\n monthView: [{ type: ViewChild, args: [MatMonthView,] }],\n yearView: [{ type: ViewChild, args: [MatYearView,] }],\n multiYearView: [{ type: ViewChild, args: [MatMultiYearView,] }]\n};\n(function () { (typeof ngDevMode === \"undefined\" || ngDevMode) && ɵngcc0.ɵsetClassMetadata(MatCalendar, [{\n type: Component,\n args: [{ selector: 'mat-calendar', template: \"\\n\\n
\\n \\n \\n\\n \\n \\n\\n \\n \\n
\\n\", host: {\n 'class': 'mat-calendar'\n }, exportAs: 'matCalendar', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [MAT_SINGLE_DATE_SELECTION_MODEL_PROVIDER], 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;margin:5% calc(33% / 7 - 16px)}.mat-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:.04}.mat-calendar-spacer{flex:1 1 auto}.mat-calendar-period-button{min-width:0}.mat-calendar-arrow{display:inline-block;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top-width:5px;border-top-style:solid;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}.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}\\n\"] }]\n }], function () { return [{ type: MatDatepickerIntl }, { type: ɵngcc2.DateAdapter, decorators: [{\n type: Optional\n }] }, { type: undefined, decorators: [{\n type: Optional\n }, {\n type: Inject,\n args: [MAT_DATE_FORMATS]\n }] }, { type: ɵngcc0.ChangeDetectorRef }]; }, { startView: [{\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 }], startAt: [{\n type: Input\n }], selected: [{\n type: Input\n }], minDate: [{\n type: Input\n }], maxDate: [{\n type: Input\n }], headerComponent: [{\n type: Input\n }], dateFilter: [{\n type: Input\n }], dateClass: [{\n type: Input\n }], comparisonStart: [{\n type: Input\n }], comparisonEnd: [{\n type: Input\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 state('void', style({\n opacity: 0,\n transform: 'scale(1, 0.8)'\n })),\n transition('void => enter', animate('120ms cubic-bezier(0, 0, 0.2, 1)', style({\n opacity: 1,\n transform: 'scale(1, 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 */\nclass MatDatepickerContentBase {\n constructor(_elementRef) {\n this._elementRef = _elementRef;\n }\n}\nconst _MatDatepickerContentMixinBase = mixinColor(MatDatepickerContentBase);\n/**\n * Component used as the content for the datepicker dialog and popup. 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 popup that are not part of the calendar itself in the\n * future. (e.g. confirmation buttons).\n * @docs-private\n */\nclass MatDatepickerContent extends _MatDatepickerContentMixinBase {\n constructor(elementRef, _changeDetectorRef, _globalModel, _dateAdapter, _rangeSelectionStrategy, \n /**\n * @deprecated `intl` argument to become required.\n * @breaking-change 12.0.0\n */\n 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 /** Current state of the animation. */\n this._animationState = 'enter';\n /** Emits when an animation has finished. */\n this._animationDone = new Subject();\n /** Portal with projected action buttons. */\n this._actionsPortal = null;\n // @breaking-change 12.0.0 Remove fallback for `intl`.\n this._closeButtonText = (intl === null || intl === void 0 ? void 0 : intl.closeCalendarLabel) || 'Close calendar';\n }\n ngOnInit() {\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 = this._actionsPortal ? this._globalModel.clone() : this._globalModel;\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 && (isRange ||\n !this._dateAdapter.sameDate(value, selection))) {\n this._model.add(value);\n }\n // Delegate closing the popup to the actions.\n if ((!this._model || this._model.isComplete()) && !this._actionsPortal) {\n this.datepicker.close();\n }\n }\n _startExitAnimation() {\n this._animationState = 'void';\n this._changeDetectorRef.markForCheck();\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}\nMatDatepickerContent.ɵfac = function MatDatepickerContent_Factory(t) { return new (t || MatDatepickerContent)(ɵngcc0.ɵɵdirectiveInject(ɵngcc0.ElementRef), ɵngcc0.ɵɵdirectiveInject(ɵngcc0.ChangeDetectorRef), ɵngcc0.ɵɵdirectiveInject(MatDateSelectionModel), ɵngcc0.ɵɵdirectiveInject(ɵngcc2.DateAdapter), ɵngcc0.ɵɵdirectiveInject(MAT_DATE_RANGE_SELECTION_STRATEGY, 8), ɵngcc0.ɵɵdirectiveInject(MatDatepickerIntl)); };\nMatDatepickerContent.ɵcmp = /*@__PURE__*/ ɵngcc0.ɵɵdefineComponent({ type: MatDatepickerContent, selectors: [[\"mat-datepicker-content\"]], viewQuery: function MatDatepickerContent_Query(rf, ctx) { if (rf & 1) {\n ɵngcc0.ɵɵviewQuery(MatCalendar, 5);\n } if (rf & 2) {\n let _t;\n ɵngcc0.ɵɵqueryRefresh(_t = ɵngcc0.ɵɵloadQuery()) && (ctx._calendar = _t.first);\n } }, hostAttrs: [1, \"mat-datepicker-content\"], hostVars: 3, hostBindings: function MatDatepickerContent_HostBindings(rf, ctx) { if (rf & 1) {\n ɵngcc0.ɵɵsyntheticHostListener(\"@transformPanel.done\", function MatDatepickerContent_animation_transformPanel_done_HostBindingHandler() { return ctx._animationDone.next(); });\n } if (rf & 2) {\n ɵngcc0.ɵɵsyntheticHostProperty(\"@transformPanel\", ctx._animationState);\n ɵngcc0.ɵɵclassProp(\"mat-datepicker-content-touch\", ctx.datepicker.touchUi);\n } }, inputs: { color: \"color\" }, exportAs: [\"matDatepickerContent\"], features: [ɵngcc0.ɵɵInheritDefinitionFeature], decls: 5, vars: 20, consts: [[\"cdkTrapFocus\", \"\", 1, \"mat-datepicker-content-container\"], [3, \"id\", \"ngClass\", \"startAt\", \"startView\", \"minDate\", \"maxDate\", \"dateFilter\", \"headerComponent\", \"selected\", \"dateClass\", \"comparisonStart\", \"comparisonEnd\", \"yearSelected\", \"monthSelected\", \"viewChanged\", \"_userSelection\"], [3, \"cdkPortalOutlet\"], [\"type\", \"button\", \"mat-raised-button\", \"\", 1, \"mat-datepicker-close-button\", 3, \"color\", \"focus\", \"blur\", \"click\"]], template: function MatDatepickerContent_Template(rf, ctx) { if (rf & 1) {\n ɵngcc0.ɵɵelementStart(0, \"div\", 0)(1, \"mat-calendar\", 1);\n ɵngcc0.ɵɵlistener(\"yearSelected\", function MatDatepickerContent_Template_mat_calendar_yearSelected_1_listener($event) { return ctx.datepicker._selectYear($event); })(\"monthSelected\", function MatDatepickerContent_Template_mat_calendar_monthSelected_1_listener($event) { return ctx.datepicker._selectMonth($event); })(\"viewChanged\", function MatDatepickerContent_Template_mat_calendar_viewChanged_1_listener($event) { return ctx.datepicker._viewChanged($event); })(\"_userSelection\", function MatDatepickerContent_Template_mat_calendar__userSelection_1_listener($event) { return ctx._handleUserSelection($event); });\n ɵngcc0.ɵɵelementEnd();\n ɵngcc0.ɵɵtemplate(2, MatDatepickerContent_ng_template_2_Template, 0, 0, \"ng-template\", 2);\n ɵngcc0.ɵɵelementStart(3, \"button\", 3);\n ɵngcc0.ɵɵlistener(\"focus\", function MatDatepickerContent_Template_button_focus_3_listener() { return ctx._closeButtonFocused = true; })(\"blur\", function MatDatepickerContent_Template_button_blur_3_listener() { return ctx._closeButtonFocused = false; })(\"click\", function MatDatepickerContent_Template_button_click_3_listener() { return ctx.datepicker.close(); });\n ɵngcc0.ɵɵtext(4);\n ɵngcc0.ɵɵelementEnd()();\n } if (rf & 2) {\n ɵngcc0.ɵɵclassProp(\"mat-datepicker-content-container-with-actions\", ctx._actionsPortal);\n ɵngcc0.ɵɵadvance(1);\n ɵngcc0.ɵɵproperty(\"id\", ctx.datepicker.id)(\"ngClass\", ctx.datepicker.panelClass)(\"startAt\", ctx.datepicker.startAt)(\"startView\", ctx.datepicker.startView)(\"minDate\", ctx.datepicker._getMinDate())(\"maxDate\", ctx.datepicker._getMaxDate())(\"dateFilter\", ctx.datepicker._getDateFilter())(\"headerComponent\", ctx.datepicker.calendarHeaderComponent)(\"selected\", ctx._getSelected())(\"dateClass\", ctx.datepicker.dateClass)(\"comparisonStart\", ctx.comparisonStart)(\"comparisonEnd\", ctx.comparisonEnd)(\"@fadeInCalendar\", \"enter\");\n ɵngcc0.ɵɵadvance(1);\n ɵngcc0.ɵɵproperty(\"cdkPortalOutlet\", ctx._actionsPortal);\n ɵngcc0.ɵɵadvance(1);\n ɵngcc0.ɵɵclassProp(\"cdk-visually-hidden\", !ctx._closeButtonFocused);\n ɵngcc0.ɵɵproperty(\"color\", ctx.color || \"primary\");\n ɵngcc0.ɵɵadvance(1);\n ɵngcc0.ɵɵtextInterpolate(ctx._closeButtonText);\n } }, dependencies: [ɵngcc1.NgClass, ɵngcc4.MatButton, ɵngcc5.CdkTrapFocus, ɵngcc6.CdkPortalOutlet, MatCalendar], styles: [\".mat-datepicker-content{display:block;border-radius:4px}.mat-datepicker-content .mat-calendar{width:296px;height:354px}.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;overflow:auto;margin:-24px}.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\"], encapsulation: 2, data: { animation: [\n matDatepickerAnimations.transformPanel,\n matDatepickerAnimations.fadeInCalendar,\n ] }, changeDetection: 0 });\nMatDatepickerContent.ctorParameters = () => [\n { type: ElementRef },\n { type: ChangeDetectorRef },\n { type: MatDateSelectionModel },\n { type: DateAdapter },\n { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [MAT_DATE_RANGE_SELECTION_STRATEGY,] }] },\n { type: MatDatepickerIntl }\n];\nMatDatepickerContent.propDecorators = {\n _calendar: [{ type: ViewChild, args: [MatCalendar,] }]\n};\n(function () { (typeof ngDevMode === \"undefined\" || ngDevMode) && ɵngcc0.ɵsetClassMetadata(MatDatepickerContent, [{\n type: Component,\n args: [{ selector: 'mat-datepicker-content', template: \"\\n \\n\\n \\n\\n \\n {{ _closeButtonText }}\\n\\n\", host: {\n 'class': 'mat-datepicker-content',\n '[@transformPanel]': '_animationState',\n '(@transformPanel.done)': '_animationDone.next()',\n '[class.mat-datepicker-content-touch]': 'datepicker.touchUi'\n }, animations: [\n matDatepickerAnimations.transformPanel,\n matDatepickerAnimations.fadeInCalendar,\n ], exportAs: 'matDatepickerContent', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, inputs: ['color'], styles: [\".mat-datepicker-content{display:block;border-radius:4px}.mat-datepicker-content .mat-calendar{width:296px;height:354px}.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;overflow:auto;margin:-24px}.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\"] }]\n }], function () { return [{ type: ɵngcc0.ElementRef }, { type: ɵngcc0.ChangeDetectorRef }, { type: MatDateSelectionModel }, { type: ɵngcc2.DateAdapter }, { type: undefined, decorators: [{\n type: Optional\n }, {\n type: Inject,\n args: [MAT_DATE_RANGE_SELECTION_STRATEGY]\n }] }, { type: MatDatepickerIntl }]; }, { _calendar: [{\n type: ViewChild,\n args: [MatCalendar]\n }] }); })();\n/** Base class for a datepicker. */\nclass MatDatepickerBase {\n constructor(_dialog, _overlay, _ngZone, _viewContainerRef, scrollStrategy, _dateAdapter, _dir, _document, _model) {\n this._dialog = _dialog;\n this._overlay = _overlay;\n this._ngZone = _ngZone;\n this._viewContainerRef = _viewContainerRef;\n this._dateAdapter = _dateAdapter;\n this._dir = _dir;\n this._document = _document;\n this._model = _model;\n this._inputStateChanges = Subscription.EMPTY;\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 /** 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 ||\n (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 popup and elements have more padding to allow for bigger touch targets.\n */\n get touchUi() { return this._touchUi; }\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 : !!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() { return this._restoreFocus; }\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() { return this._panelClass; }\n set panelClass(value) {\n this._panelClass = coerceStringArray(value);\n }\n /** Whether the calendar is open. */\n get opened() { return this._opened; }\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 ngOnChanges(changes) {\n const positionChange = changes['xPosition'] || changes['yPosition'];\n if (positionChange && !positionChange.firstChange && this._popupRef) {\n this._setConnectedPositions(this._popupRef.getConfig().positionStrategy);\n if (this.opened) {\n this._popupRef.updatePosition();\n }\n }\n this.stateChanges.next(undefined);\n }\n ngOnDestroy() {\n this._destroyPopup();\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 =\n 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 }\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 }\n }\n /** Open the calendar. */\n open() {\n if (this._opened || this.disabled) {\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 if (this._document) {\n this._focusedElementBeforeOpen = this._document.activeElement;\n }\n this.touchUi ? this._openAsDialog() : this._openAsPopup();\n this._opened = true;\n this.openedStream.emit();\n }\n /** Close the calendar. */\n close() {\n if (!this._opened) {\n return;\n }\n if (this._popupComponentRef && this._popupRef) {\n const instance = this._popupComponentRef.instance;\n instance._startExitAnimation();\n instance._animationDone.pipe(take(1)).subscribe(() => this._destroyPopup());\n }\n if (this._dialogRef) {\n this._dialogRef.close();\n this._dialogRef = null;\n }\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 this._focusedElementBeforeOpen = null;\n }\n };\n if (this._restoreFocus && this._focusedElementBeforeOpen &&\n typeof this._focusedElementBeforeOpen.focus === 'function') {\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 this._focusedElementBeforeOpen.focus();\n setTimeout(completeClose);\n }\n else {\n completeClose();\n }\n }\n /** Applies the current pending selection on the popup to the model. */\n _applyPendingSelection() {\n var _a, _b;\n const instance = ((_a = this._popupComponentRef) === null || _a === void 0 ? void 0 : _a.instance) || ((_b = this._dialogRef) === null || _b === void 0 ? void 0 : _b.componentInstance);\n instance === null || instance === void 0 ? void 0 : instance._applyPendingSelection();\n }\n /** Open the calendar as a dialog. */\n _openAsDialog() {\n // Usually this would be handled by `open` which ensures that we can only have one overlay\n // open at a time, however since we reset the variables in async handlers some overlays\n // may slip through if the user opens and closes multiple times in quick succession (e.g.\n // by holding down the enter key).\n if (this._dialogRef) {\n this._dialogRef.close();\n }\n this._dialogRef = this._dialog.open(MatDatepickerContent, {\n direction: this._dir ? this._dir.value : 'ltr',\n viewContainerRef: this._viewContainerRef,\n panelClass: 'mat-datepicker-dialog',\n // These values are all the same as the defaults, but we set them explicitly so that the\n // datepicker dialog behaves consistently even if the user changed the defaults.\n hasBackdrop: true,\n disableClose: false,\n backdropClass: ['cdk-overlay-dark-backdrop', this._backdropHarnessClass],\n width: '',\n height: '',\n minWidth: '',\n minHeight: '',\n maxWidth: '80vw',\n maxHeight: '',\n position: {},\n // Disable the dialog's automatic focus capturing, because it'll go to the close button\n // automatically. The calendar will move focus on its own once it renders.\n autoFocus: false,\n // `MatDialog` has focus restoration built in, however we want to disable it since the\n // datepicker also has focus restoration for dropdown mode. We want to do this, in order\n // to ensure that the timing is consistent between dropdown and dialog modes since `MatDialog`\n // restores focus when the animation is finished, but the datepicker does it immediately.\n // Furthermore, this avoids any conflicts where the datepicker consumer might move focus\n // inside the `closed` event which is dispatched immediately.\n restoreFocus: false\n });\n this._dialogRef.afterClosed().subscribe(() => this.close());\n this._forwardContentValues(this._dialogRef.componentInstance);\n }\n /** Open the calendar as a popup. */\n _openAsPopup() {\n const portal = new ComponentPortal(MatDatepickerContent, this._viewContainerRef);\n this._destroyPopup();\n this._createPopup();\n this._popupComponentRef = this._popupRef.attach(portal);\n this._forwardContentValues(this._popupComponentRef.instance);\n // Update the position once the calendar has rendered.\n this._ngZone.onStable.pipe(take(1)).subscribe(() => {\n this._popupRef.updatePosition();\n });\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._actionsPortal = this._actionsPortal;\n }\n /** Create the popup. */\n _createPopup() {\n const positionStrategy = this._overlay.position()\n .flexibleConnectedTo(this.datepickerInput.getConnectedOverlayOrigin())\n .withTransformOriginOn('.mat-datepicker-content')\n .withFlexibleDimensions(false)\n .withViewportMargin(8)\n .withLockedPosition();\n const overlayConfig = new OverlayConfig({\n positionStrategy: this._setConnectedPositions(positionStrategy),\n hasBackdrop: true,\n backdropClass: ['mat-overlay-transparent-backdrop', this._backdropHarnessClass],\n direction: this._dir,\n scrollStrategy: this._scrollStrategy(),\n panelClass: 'mat-datepicker-popup',\n });\n this._popupRef = this._overlay.create(overlayConfig);\n this._popupRef.overlayElement.setAttribute('role', 'dialog');\n merge(this._popupRef.backdropClick(), this._popupRef.detachments(), this._popupRef.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)) || (this.datepickerInput &&\n hasModifierKey(event, 'altKey') && event.keyCode === UP_ARROW);\n }))).subscribe(event => {\n if (event) {\n event.preventDefault();\n }\n this.close();\n });\n }\n /** Destroys the current popup overlay. */\n _destroyPopup() {\n if (this._popupRef) {\n this._popupRef.dispose();\n this._popupRef = this._popupComponentRef = null;\n }\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}\nMatDatepickerBase.ɵfac = function MatDatepickerBase_Factory(t) { return new (t || MatDatepickerBase)(ɵngcc0.ɵɵdirectiveInject(ɵngcc7.MatDialog), ɵngcc0.ɵɵdirectiveInject(ɵngcc8.Overlay), ɵngcc0.ɵɵdirectiveInject(ɵngcc0.NgZone), ɵngcc0.ɵɵdirectiveInject(ɵngcc0.ViewContainerRef), ɵngcc0.ɵɵdirectiveInject(MAT_DATEPICKER_SCROLL_STRATEGY), ɵngcc0.ɵɵdirectiveInject(ɵngcc2.DateAdapter, 8), ɵngcc0.ɵɵdirectiveInject(ɵngcc3.Directionality, 8), ɵngcc0.ɵɵdirectiveInject(DOCUMENT, 8), ɵngcc0.ɵɵdirectiveInject(MatDateSelectionModel)); };\nMatDatepickerBase.ɵdir = /*@__PURE__*/ ɵngcc0.ɵɵdefineDirective({ type: MatDatepickerBase, inputs: { startView: \"startView\", xPosition: \"xPosition\", yPosition: \"yPosition\", startAt: \"startAt\", color: \"color\", touchUi: \"touchUi\", disabled: \"disabled\", restoreFocus: \"restoreFocus\", panelClass: \"panelClass\", opened: \"opened\", calendarHeaderComponent: \"calendarHeaderComponent\", dateClass: \"dateClass\" }, outputs: { yearSelected: \"yearSelected\", monthSelected: \"monthSelected\", viewChanged: \"viewChanged\", openedStream: \"opened\", closedStream: \"closed\" }, features: [ɵngcc0.ɵɵNgOnChangesFeature] });\nMatDatepickerBase.ctorParameters = () => [\n { type: MatDialog },\n { type: Overlay },\n { type: NgZone },\n { type: ViewContainerRef },\n { type: undefined, decorators: [{ type: Inject, args: [MAT_DATEPICKER_SCROLL_STRATEGY,] }] },\n { type: DateAdapter, decorators: [{ type: Optional }] },\n { type: Directionality, decorators: [{ type: Optional }] },\n { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [DOCUMENT,] }] },\n { type: MatDateSelectionModel }\n];\nMatDatepickerBase.propDecorators = {\n calendarHeaderComponent: [{ type: Input }],\n startAt: [{ type: Input }],\n startView: [{ type: Input }],\n color: [{ type: Input }],\n touchUi: [{ type: Input }],\n disabled: [{ type: Input }],\n xPosition: [{ type: Input }],\n yPosition: [{ type: Input }],\n restoreFocus: [{ type: Input }],\n yearSelected: [{ type: Output }],\n monthSelected: [{ type: Output }],\n viewChanged: [{ type: Output }],\n dateClass: [{ type: Input }],\n openedStream: [{ type: Output, args: ['opened',] }],\n closedStream: [{ type: Output, args: ['closed',] }],\n panelClass: [{ type: Input }],\n opened: [{ type: Input }]\n};\n(function () { (typeof ngDevMode === \"undefined\" || ngDevMode) && ɵngcc0.ɵsetClassMetadata(MatDatepickerBase, [{\n type: Directive\n }], function () { return [{ type: ɵngcc7.MatDialog }, { type: ɵngcc8.Overlay }, { type: ɵngcc0.NgZone }, { type: ɵngcc0.ViewContainerRef }, { type: undefined, decorators: [{\n type: Inject,\n args: [MAT_DATEPICKER_SCROLL_STRATEGY]\n }] }, { type: ɵngcc2.DateAdapter, decorators: [{\n type: Optional\n }] }, { type: ɵngcc3.Directionality, decorators: [{\n type: Optional\n }] }, { type: undefined, decorators: [{\n type: Optional\n }, {\n type: Inject,\n args: [DOCUMENT]\n }] }, { type: MatDateSelectionModel }]; }, { startView: [{\n type: Input\n }], xPosition: [{\n type: Input\n }], yPosition: [{\n type: Input\n }], yearSelected: [{\n type: Output\n }], monthSelected: [{\n type: Output\n }], viewChanged: [{\n type: Output\n }], openedStream: [{\n type: Output,\n args: ['opened']\n }], closedStream: [{\n type: Output,\n args: ['closed']\n }], startAt: [{\n type: Input\n }], color: [{\n type: Input\n }], touchUi: [{\n type: Input\n }], disabled: [{\n type: Input\n }], restoreFocus: [{\n type: Input\n }], panelClass: [{\n type: Input\n }], opened: [{\n type: Input\n }], calendarHeaderComponent: [{\n type: Input\n }], dateClass: [{\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 = /*@__PURE__*/ function () { let ɵMatDatepicker_BaseFactory; return function MatDatepicker_Factory(t) { return (ɵMatDatepicker_BaseFactory || (ɵMatDatepicker_BaseFactory = ɵngcc0.ɵɵgetInheritedFactory(MatDatepicker)))(t || MatDatepicker); }; }();\nMatDatepicker.ɵcmp = /*@__PURE__*/ ɵngcc0.ɵɵdefineComponent({ type: MatDatepicker, selectors: [[\"mat-datepicker\"]], exportAs: [\"matDatepicker\"], features: [ɵngcc0.ɵɵProvidersFeature([\n MAT_SINGLE_DATE_SELECTION_MODEL_PROVIDER,\n { provide: MatDatepickerBase, useExisting: MatDatepicker },\n ]), ɵngcc0.ɵɵInheritDefinitionFeature], decls: 0, vars: 0, template: function MatDatepicker_Template(rf, ctx) { }, encapsulation: 2, changeDetection: 0 });\n(function () { (typeof ngDevMode === \"undefined\" || ngDevMode) && ɵngcc0.ɵsetClassMetadata(MatDatepicker, [{\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 }], null, null); })();\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 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 : { '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 : { '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 ||\n this._dateAdapter.compareDate(min, controlValue) <= 0) ?\n null : { '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 ||\n this._dateAdapter.compareDate(max, controlValue) >= 0) ?\n null : { '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 /** 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() { return !!this._disabled || this._parentDisabled(); }\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 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 isAltDownArrow = event.altKey && event.keyCode === DOWN_ARROW;\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 if (!this._dateAdapter.sameDate(date, this.value)) {\n this._assignValue(date);\n this._cvaOnChange(date);\n this.dateInput.emit(new MatDatepickerInputEvent(this, this._elementRef.nativeElement));\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 }\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 ? 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 = function MatDatepickerInputBase_Factory(t) { return new (t || MatDatepickerInputBase)(ɵngcc0.ɵɵdirectiveInject(ɵngcc0.ElementRef), ɵngcc0.ɵɵdirectiveInject(ɵngcc2.DateAdapter, 8), ɵngcc0.ɵɵdirectiveInject(MAT_DATE_FORMATS, 8)); };\nMatDatepickerInputBase.ɵdir = /*@__PURE__*/ ɵngcc0.ɵɵdefineDirective({ type: MatDatepickerInputBase, inputs: { value: \"value\", disabled: \"disabled\" }, outputs: { dateChange: \"dateChange\", dateInput: \"dateInput\" }, features: [ɵngcc0.ɵɵNgOnChangesFeature] });\nMatDatepickerInputBase.ctorParameters = () => [\n { type: ElementRef },\n { type: DateAdapter, decorators: [{ type: Optional }] },\n { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [MAT_DATE_FORMATS,] }] }\n];\nMatDatepickerInputBase.propDecorators = {\n value: [{ type: Input }],\n disabled: [{ type: Input }],\n dateChange: [{ type: Output }],\n dateInput: [{ type: Output }]\n};\n(function () { (typeof ngDevMode === \"undefined\" || ngDevMode) && ɵngcc0.ɵsetClassMetadata(MatDatepickerInputBase, [{\n type: Directive\n }], function () { return [{ type: ɵngcc0.ElementRef }, { type: ɵngcc2.DateAdapter, decorators: [{\n type: Optional\n }] }, { type: undefined, decorators: [{\n type: Optional\n }, {\n type: Inject,\n args: [MAT_DATE_FORMATS]\n }] }]; }, { dateChange: [{\n type: Output\n }], dateInput: [{\n type: Output\n }], value: [{\n type: Input\n }], disabled: [{\n type: Input\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 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 /** 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() { return this._min; }\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() { return this._max; }\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() { return this._dateFilter; }\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 /**\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 /** 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 = function MatDatepickerInput_Factory(t) { return new (t || MatDatepickerInput)(ɵngcc0.ɵɵdirectiveInject(ɵngcc0.ElementRef), ɵngcc0.ɵɵdirectiveInject(ɵngcc2.DateAdapter, 8), ɵngcc0.ɵɵdirectiveInject(MAT_DATE_FORMATS, 8), ɵngcc0.ɵɵdirectiveInject(MAT_FORM_FIELD, 8)); };\nMatDatepickerInput.ɵdir = /*@__PURE__*/ ɵngcc0.ɵɵdefineDirective({ type: MatDatepickerInput, selectors: [[\"input\", \"matDatepicker\", \"\"]], hostAttrs: [1, \"mat-datepicker-input\"], hostVars: 6, hostBindings: function MatDatepickerInput_HostBindings(rf, ctx) { if (rf & 1) {\n ɵngcc0.ɵɵlistener(\"input\", function MatDatepickerInput_input_HostBindingHandler($event) { return ctx._onInput($event.target.value); })(\"change\", function MatDatepickerInput_change_HostBindingHandler() { return ctx._onChange(); })(\"blur\", function MatDatepickerInput_blur_HostBindingHandler() { return ctx._onBlur(); })(\"keydown\", function MatDatepickerInput_keydown_HostBindingHandler($event) { return ctx._onKeydown($event); });\n } if (rf & 2) {\n ɵngcc0.ɵɵhostProperty(\"disabled\", ctx.disabled);\n ɵngcc0.ɵɵattribute(\"aria-haspopup\", ctx._datepicker ? \"dialog\" : null)(\"aria-owns\", (ctx._datepicker == null ? null : ctx._datepicker.opened) && ctx._datepicker.id || null)(\"min\", ctx.min ? ctx._dateAdapter.toIso8601(ctx.min) : null)(\"max\", ctx.max ? ctx._dateAdapter.toIso8601(ctx.max) : null)(\"data-mat-calendar\", ctx._datepicker ? ctx._datepicker.id : null);\n } }, inputs: { matDatepicker: \"matDatepicker\", min: \"min\", max: \"max\", dateFilter: [\"matDatepickerFilter\", \"dateFilter\"] }, exportAs: [\"matDatepickerInput\"], features: [ɵngcc0.ɵɵProvidersFeature([\n MAT_DATEPICKER_VALUE_ACCESSOR,\n MAT_DATEPICKER_VALIDATORS,\n { provide: MAT_INPUT_VALUE_ACCESSOR, useExisting: MatDatepickerInput },\n ]), ɵngcc0.ɵɵInheritDefinitionFeature] });\nMatDatepickerInput.ctorParameters = () => [\n { type: ElementRef },\n { type: DateAdapter, decorators: [{ type: Optional }] },\n { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [MAT_DATE_FORMATS,] }] },\n { type: MatFormField, decorators: [{ type: Optional }, { type: Inject, args: [MAT_FORM_FIELD,] }] }\n];\nMatDatepickerInput.propDecorators = {\n matDatepicker: [{ type: Input }],\n min: [{ type: Input }],\n max: [{ type: Input }],\n dateFilter: [{ type: Input, args: ['matDatepickerFilter',] }]\n};\n(function () { (typeof ngDevMode === \"undefined\" || ngDevMode) && ɵngcc0.ɵsetClassMetadata(MatDatepickerInput, [{\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 }], function () { return [{ type: ɵngcc0.ElementRef }, { type: ɵngcc2.DateAdapter, decorators: [{\n type: Optional\n }] }, { type: undefined, decorators: [{\n type: Optional\n }, {\n type: Inject,\n args: [MAT_DATE_FORMATS]\n }] }, { type: ɵngcc9.MatFormField, decorators: [{\n type: Optional\n }, {\n type: Inject,\n args: [MAT_FORM_FIELD]\n }] }]; }, { 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 = function MatDatepickerToggleIcon_Factory(t) { return new (t || MatDatepickerToggleIcon)(); };\nMatDatepickerToggleIcon.ɵdir = /*@__PURE__*/ ɵngcc0.ɵɵdefineDirective({ type: MatDatepickerToggleIcon, selectors: [[\"\", \"matDatepickerToggleIcon\", \"\"]] });\n(function () { (typeof ngDevMode === \"undefined\" || ngDevMode) && ɵngcc0.ɵsetClassMetadata(MatDatepickerToggleIcon, [{\n type: Directive,\n args: [{\n selector: '[matDatepickerToggleIcon]'\n }]\n }], null, null); })();\nclass MatDatepickerToggle {\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 /** 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 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 : 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 = function MatDatepickerToggle_Factory(t) { return new (t || MatDatepickerToggle)(ɵngcc0.ɵɵdirectiveInject(MatDatepickerIntl), ɵngcc0.ɵɵdirectiveInject(ɵngcc0.ChangeDetectorRef), ɵngcc0.ɵɵinjectAttribute('tabindex')); };\nMatDatepickerToggle.ɵcmp = /*@__PURE__*/ ɵngcc0.ɵɵdefineComponent({ type: MatDatepickerToggle, selectors: [[\"mat-datepicker-toggle\"]], contentQueries: function MatDatepickerToggle_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {\n ɵngcc0.ɵɵcontentQuery(dirIndex, MatDatepickerToggleIcon, 5);\n } if (rf & 2) {\n let _t;\n ɵngcc0.ɵɵqueryRefresh(_t = ɵngcc0.ɵɵloadQuery()) && (ctx._customIcon = _t.first);\n } }, viewQuery: function MatDatepickerToggle_Query(rf, ctx) { if (rf & 1) {\n ɵngcc0.ɵɵviewQuery(_c2, 5);\n } if (rf & 2) {\n let _t;\n ɵngcc0.ɵɵqueryRefresh(_t = ɵngcc0.ɵɵloadQuery()) && (ctx._button = _t.first);\n } }, hostAttrs: [1, \"mat-datepicker-toggle\"], hostVars: 8, hostBindings: function MatDatepickerToggle_HostBindings(rf, ctx) { if (rf & 1) {\n ɵngcc0.ɵɵlistener(\"click\", function MatDatepickerToggle_click_HostBindingHandler($event) { return ctx._open($event); });\n } if (rf & 2) {\n ɵngcc0.ɵɵattribute(\"tabindex\", null)(\"data-mat-calendar\", ctx.datepicker ? ctx.datepicker.id : null);\n ɵngcc0.ɵɵclassProp(\"mat-datepicker-toggle-active\", ctx.datepicker && ctx.datepicker.opened)(\"mat-accent\", ctx.datepicker && ctx.datepicker.color === \"accent\")(\"mat-warn\", ctx.datepicker && ctx.datepicker.color === \"warn\");\n } }, inputs: { tabIndex: \"tabIndex\", disabled: \"disabled\", datepicker: [\"for\", \"datepicker\"], ariaLabel: [\"aria-label\", \"ariaLabel\"], disableRipple: \"disableRipple\" }, exportAs: [\"matDatepickerToggle\"], features: [ɵngcc0.ɵɵNgOnChangesFeature], ngContentSelectors: _c4, decls: 4, vars: 6, consts: [[\"mat-icon-button\", \"\", \"type\", \"button\", 3, \"disabled\", \"disableRipple\"], [\"button\", \"\"], [\"class\", \"mat-datepicker-toggle-default-icon\", \"viewBox\", \"0 0 24 24\", \"width\", \"24px\", \"height\", \"24px\", \"fill\", \"currentColor\", \"focusable\", \"false\", 4, \"ngIf\"], [\"viewBox\", \"0 0 24 24\", \"width\", \"24px\", \"height\", \"24px\", \"fill\", \"currentColor\", \"focusable\", \"false\", 1, \"mat-datepicker-toggle-default-icon\"], [\"d\", \"M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z\"]], template: function MatDatepickerToggle_Template(rf, ctx) { if (rf & 1) {\n ɵngcc0.ɵɵprojectionDef(_c3);\n ɵngcc0.ɵɵelementStart(0, \"button\", 0, 1);\n ɵngcc0.ɵɵtemplate(2, MatDatepickerToggle__svg_svg_2_Template, 2, 0, \"svg\", 2);\n ɵngcc0.ɵɵprojection(3);\n ɵngcc0.ɵɵelementEnd();\n } if (rf & 2) {\n ɵngcc0.ɵɵproperty(\"disabled\", ctx.disabled)(\"disableRipple\", ctx.disableRipple);\n ɵngcc0.ɵɵattribute(\"aria-haspopup\", ctx.datepicker ? \"dialog\" : null)(\"aria-label\", ctx.ariaLabel || ctx._intl.openCalendarLabel)(\"tabindex\", ctx.disabled ? -1 : ctx.tabIndex);\n ɵngcc0.ɵɵadvance(2);\n ɵngcc0.ɵɵproperty(\"ngIf\", !ctx._customIcon);\n } }, dependencies: [ɵngcc1.NgIf, ɵngcc4.MatButton], styles: [\".mat-form-field-appearance-legacy .mat-form-field-prefix .mat-datepicker-toggle-default-icon,.mat-form-field-appearance-legacy .mat-form-field-suffix .mat-datepicker-toggle-default-icon{width:1em}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-datepicker-toggle-default-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-datepicker-toggle-default-icon{display:block;width:1.5em;height:1.5em}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon-button .mat-datepicker-toggle-default-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon-button .mat-datepicker-toggle-default-icon{margin:auto}.cdk-high-contrast-active .mat-datepicker-toggle-default-icon{color:CanvasText}\\n\"], encapsulation: 2, changeDetection: 0 });\nMatDatepickerToggle.ctorParameters = () => [\n { type: MatDatepickerIntl },\n { type: ChangeDetectorRef },\n { type: String, decorators: [{ type: Attribute, args: ['tabindex',] }] }\n];\nMatDatepickerToggle.propDecorators = {\n datepicker: [{ type: Input, args: ['for',] }],\n tabIndex: [{ type: Input }],\n ariaLabel: [{ type: Input, args: ['aria-label',] }],\n disabled: [{ type: Input }],\n disableRipple: [{ type: Input }],\n _customIcon: [{ type: ContentChild, args: [MatDatepickerToggleIcon,] }],\n _button: [{ type: ViewChild, args: ['button',] }]\n};\n(function () { (typeof ngDevMode === \"undefined\" || ngDevMode) && ɵngcc0.ɵsetClassMetadata(MatDatepickerToggle, [{\n type: Component,\n args: [{ selector: 'mat-datepicker-toggle', template: \"\\n\\n \\n \\n \\n\\n \\n\\n\", 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, styles: [\".mat-form-field-appearance-legacy .mat-form-field-prefix .mat-datepicker-toggle-default-icon,.mat-form-field-appearance-legacy .mat-form-field-suffix .mat-datepicker-toggle-default-icon{width:1em}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-datepicker-toggle-default-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-datepicker-toggle-default-icon{display:block;width:1.5em;height:1.5em}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon-button .mat-datepicker-toggle-default-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon-button .mat-datepicker-toggle-default-icon{margin:auto}.cdk-high-contrast-active .mat-datepicker-toggle-default-icon{color:CanvasText}\\n\"] }]\n }], function () { return [{ type: MatDatepickerIntl }, { type: ɵngcc0.ChangeDetectorRef }, { type: String, decorators: [{\n type: Attribute,\n args: ['tabindex']\n }] }]; }, { tabIndex: [{\n type: Input\n }], disabled: [{\n type: Input\n }], datepicker: [{\n type: Input,\n args: ['for']\n }], ariaLabel: [{\n type: Input,\n args: ['aria-label']\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/**\n * Used to provide the date range input wrapper component\n * to the parts without circular dependencies.\n */\nconst MAT_DATE_RANGE_INPUT_PARENT = new InjectionToken('MAT_DATE_RANGE_INPUT_PARENT');\n/**\n * Base class for the individual inputs that can be projected inside a `mat-date-range-input`.\n */\nclass MatDateRangeInputPartBase extends MatDatepickerInputBase {\n constructor(_rangeInput, elementRef, _defaultErrorStateMatcher, _injector, _parentForm, _parentFormGroup, dateAdapter, dateFormats) {\n super(elementRef, dateAdapter, dateFormats);\n this._rangeInput = _rangeInput;\n this._defaultErrorStateMatcher = _defaultErrorStateMatcher;\n this._injector = _injector;\n this._parentForm = _parentForm;\n this._parentFormGroup = _parentFormGroup;\n }\n ngOnInit() {\n // We need the date input to provide itself as a `ControlValueAccessor` and a `Validator`, while\n // injecting its `NgControl` so that the error state is handled correctly. This introduces a\n // circular dependency, because both `ControlValueAccessor` and `Validator` depend on the input\n // itself. Usually we can work around it for the CVA, but there's no API to do it for the\n // validator. We work around it here by injecting the `NgControl` in `ngOnInit`, after\n // everything has been resolved.\n const ngControl = this._injector.get(NgControl, null, InjectFlags.Self);\n if (ngControl) {\n this.ngControl = ngControl;\n }\n }\n ngDoCheck() {\n if (this.ngControl) {\n // We need to re-evaluate this on every change detection cycle, because there are some\n // error triggers that we can't subscribe to (e.g. parent form submissions). This means\n // that whatever logic is in here has to be super lean or we risk destroying the performance.\n this.updateErrorState();\n }\n }\n /** Gets whether the input is empty. */\n isEmpty() {\n return this._elementRef.nativeElement.value.length === 0;\n }\n /** Gets the placeholder of the input. */\n _getPlaceholder() {\n return this._elementRef.nativeElement.placeholder;\n }\n /** Focuses the input. */\n focus() {\n this._elementRef.nativeElement.focus();\n }\n /** Handles `input` events on the input element. */\n _onInput(value) {\n super._onInput(value);\n this._rangeInput._handleChildValueChange();\n }\n /** Opens the datepicker associated with the input. */\n _openPopup() {\n this._rangeInput._openDatepicker();\n }\n /** Gets the minimum date from the range input. */\n _getMinDate() {\n return this._rangeInput.min;\n }\n /** Gets the maximum date from the range input. */\n _getMaxDate() {\n return this._rangeInput.max;\n }\n /** Gets the date filter function from the range input. */\n _getDateFilter() {\n return this._rangeInput.dateFilter;\n }\n _parentDisabled() {\n return this._rangeInput._groupDisabled;\n }\n _shouldHandleChangeEvent({ source }) {\n return source !== this._rangeInput._startInput && source !== this._rangeInput._endInput;\n }\n _assignValueProgrammatically(value) {\n super._assignValueProgrammatically(value);\n const opposite = (this === this._rangeInput._startInput ? this._rangeInput._endInput :\n this._rangeInput._startInput);\n opposite === null || opposite === void 0 ? void 0 : opposite._validatorOnChange();\n }\n}\nMatDateRangeInputPartBase.ɵfac = function MatDateRangeInputPartBase_Factory(t) { return new (t || MatDateRangeInputPartBase)(ɵngcc0.ɵɵdirectiveInject(MAT_DATE_RANGE_INPUT_PARENT), ɵngcc0.ɵɵdirectiveInject(ɵngcc0.ElementRef), ɵngcc0.ɵɵdirectiveInject(ɵngcc2.ErrorStateMatcher), ɵngcc0.ɵɵdirectiveInject(ɵngcc0.Injector), ɵngcc0.ɵɵdirectiveInject(ɵngcc10.NgForm, 8), ɵngcc0.ɵɵdirectiveInject(ɵngcc10.FormGroupDirective, 8), ɵngcc0.ɵɵdirectiveInject(ɵngcc2.DateAdapter, 8), ɵngcc0.ɵɵdirectiveInject(MAT_DATE_FORMATS, 8)); };\nMatDateRangeInputPartBase.ɵdir = /*@__PURE__*/ ɵngcc0.ɵɵdefineDirective({ type: MatDateRangeInputPartBase, features: [ɵngcc0.ɵɵInheritDefinitionFeature] });\nMatDateRangeInputPartBase.ctorParameters = () => [\n { type: undefined, decorators: [{ type: Inject, args: [MAT_DATE_RANGE_INPUT_PARENT,] }] },\n { type: ElementRef },\n { type: ErrorStateMatcher },\n { type: Injector },\n { type: NgForm, decorators: [{ type: Optional }] },\n { type: FormGroupDirective, decorators: [{ type: Optional }] },\n { type: DateAdapter, decorators: [{ type: Optional }] },\n { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [MAT_DATE_FORMATS,] }] }\n];\n(function () { (typeof ngDevMode === \"undefined\" || ngDevMode) && ɵngcc0.ɵsetClassMetadata(MatDateRangeInputPartBase, [{\n type: Directive\n }], function () { return [{ type: undefined, decorators: [{\n type: Inject,\n args: [MAT_DATE_RANGE_INPUT_PARENT]\n }] }, { type: ɵngcc0.ElementRef }, { type: ɵngcc2.ErrorStateMatcher }, { type: ɵngcc0.Injector }, { type: ɵngcc10.NgForm, decorators: [{\n type: Optional\n }] }, { type: ɵngcc10.FormGroupDirective, decorators: [{\n type: Optional\n }] }, { type: ɵngcc2.DateAdapter, decorators: [{\n type: Optional\n }] }, { type: undefined, decorators: [{\n type: Optional\n }, {\n type: Inject,\n args: [MAT_DATE_FORMATS]\n }] }]; }, null); })();\nconst _MatDateRangeInputBase = \n// Needs to be `as any`, because the base class is abstract.\nmixinErrorState(MatDateRangeInputPartBase);\n/** Input for entering the start date in a `mat-date-range-input`. */\nclass MatStartDate extends _MatDateRangeInputBase {\n constructor(rangeInput, elementRef, defaultErrorStateMatcher, injector, parentForm, parentFormGroup, dateAdapter, dateFormats) {\n // TODO(crisbeto): this constructor shouldn't be necessary, but ViewEngine doesn't seem to\n // handle DI correctly when it is inherited from `MatDateRangeInputPartBase`. We can drop this\n // constructor once ViewEngine is removed.\n super(rangeInput, elementRef, defaultErrorStateMatcher, injector, parentForm, parentFormGroup, dateAdapter, dateFormats);\n /** Validator that checks that the start date isn't after the end date. */\n this._startValidator = (control) => {\n const start = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(control.value));\n const end = this._model ? this._model.selection.end : null;\n return (!start || !end ||\n this._dateAdapter.compareDate(start, end) <= 0) ?\n null : { 'matStartDateInvalid': { 'end': end, 'actual': start } };\n };\n this._validator = Validators.compose([...super._getValidators(), this._startValidator]);\n }\n ngOnInit() {\n // Normally this happens automatically, but it seems to break if not added explicitly when all\n // of the criteria below are met:\n // 1) The class extends a TS mixin.\n // 2) The application is running in ViewEngine.\n // 3) The application is being transpiled through tsickle.\n // This can be removed once google3 is completely migrated to Ivy.\n super.ngOnInit();\n }\n ngDoCheck() {\n // Normally this happens automatically, but it seems to break if not added explicitly when all\n // of the criteria below are met:\n // 1) The class extends a TS mixin.\n // 2) The application is running in ViewEngine.\n // 3) The application is being transpiled through tsickle.\n // This can be removed once google3 is completely migrated to Ivy.\n super.ngDoCheck();\n }\n _getValueFromModel(modelValue) {\n return modelValue.start;\n }\n _shouldHandleChangeEvent(change) {\n var _a;\n if (!super._shouldHandleChangeEvent(change)) {\n return false;\n }\n else {\n return !((_a = change.oldValue) === null || _a === void 0 ? void 0 : _a.start) ? !!change.selection.start :\n !change.selection.start ||\n !!this._dateAdapter.compareDate(change.oldValue.start, change.selection.start);\n }\n }\n _assignValueToModel(value) {\n if (this._model) {\n const range = new DateRange(value, this._model.selection.end);\n this._model.updateSelection(range, this);\n }\n }\n _formatValue(value) {\n super._formatValue(value);\n // Any time the input value is reformatted we need to tell the parent.\n this._rangeInput._handleChildValueChange();\n }\n /** Gets the value that should be used when mirroring the input's size. */\n getMirrorValue() {\n const element = this._elementRef.nativeElement;\n const value = element.value;\n return value.length > 0 ? value : element.placeholder;\n }\n}\nMatStartDate.ɵfac = function MatStartDate_Factory(t) { return new (t || MatStartDate)(ɵngcc0.ɵɵdirectiveInject(MAT_DATE_RANGE_INPUT_PARENT), ɵngcc0.ɵɵdirectiveInject(ɵngcc0.ElementRef), ɵngcc0.ɵɵdirectiveInject(ɵngcc2.ErrorStateMatcher), ɵngcc0.ɵɵdirectiveInject(ɵngcc0.Injector), ɵngcc0.ɵɵdirectiveInject(ɵngcc10.NgForm, 8), ɵngcc0.ɵɵdirectiveInject(ɵngcc10.FormGroupDirective, 8), ɵngcc0.ɵɵdirectiveInject(ɵngcc2.DateAdapter, 8), ɵngcc0.ɵɵdirectiveInject(MAT_DATE_FORMATS, 8)); };\nMatStartDate.ɵdir = /*@__PURE__*/ ɵngcc0.ɵɵdefineDirective({ type: MatStartDate, selectors: [[\"input\", \"matStartDate\", \"\"]], hostAttrs: [\"type\", \"text\", 1, \"mat-start-date\", \"mat-date-range-input-inner\"], hostVars: 6, hostBindings: function MatStartDate_HostBindings(rf, ctx) { if (rf & 1) {\n ɵngcc0.ɵɵlistener(\"input\", function MatStartDate_input_HostBindingHandler($event) { return ctx._onInput($event.target.value); })(\"change\", function MatStartDate_change_HostBindingHandler() { return ctx._onChange(); })(\"keydown\", function MatStartDate_keydown_HostBindingHandler($event) { return ctx._onKeydown($event); })(\"blur\", function MatStartDate_blur_HostBindingHandler() { return ctx._onBlur(); });\n } if (rf & 2) {\n ɵngcc0.ɵɵhostProperty(\"disabled\", ctx.disabled);\n ɵngcc0.ɵɵattribute(\"id\", ctx._rangeInput.id)(\"aria-haspopup\", ctx._rangeInput.rangePicker ? \"dialog\" : null)(\"aria-owns\", (ctx._rangeInput.rangePicker == null ? null : ctx._rangeInput.rangePicker.opened) && ctx._rangeInput.rangePicker.id || null)(\"min\", ctx._getMinDate() ? ctx._dateAdapter.toIso8601(ctx._getMinDate()) : null)(\"max\", ctx._getMaxDate() ? ctx._dateAdapter.toIso8601(ctx._getMaxDate()) : null);\n } }, inputs: { errorStateMatcher: \"errorStateMatcher\" }, outputs: { dateChange: \"dateChange\", dateInput: \"dateInput\" }, features: [ɵngcc0.ɵɵProvidersFeature([\n { provide: NG_VALUE_ACCESSOR, useExisting: MatStartDate, multi: true },\n { provide: NG_VALIDATORS, useExisting: MatStartDate, multi: true }\n ]), ɵngcc0.ɵɵInheritDefinitionFeature] });\nMatStartDate.ctorParameters = () => [\n { type: undefined, decorators: [{ type: Inject, args: [MAT_DATE_RANGE_INPUT_PARENT,] }] },\n { type: ElementRef },\n { type: ErrorStateMatcher },\n { type: Injector },\n { type: NgForm, decorators: [{ type: Optional }] },\n { type: FormGroupDirective, decorators: [{ type: Optional }] },\n { type: DateAdapter, decorators: [{ type: Optional }] },\n { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [MAT_DATE_FORMATS,] }] }\n];\n(function () { (typeof ngDevMode === \"undefined\" || ngDevMode) && ɵngcc0.ɵsetClassMetadata(MatStartDate, [{\n type: Directive,\n args: [{\n selector: 'input[matStartDate]',\n host: {\n 'class': 'mat-start-date mat-date-range-input-inner',\n '[disabled]': 'disabled',\n '(input)': '_onInput($event.target.value)',\n '(change)': '_onChange()',\n '(keydown)': '_onKeydown($event)',\n '[attr.id]': '_rangeInput.id',\n '[attr.aria-haspopup]': '_rangeInput.rangePicker ? \"dialog\" : null',\n '[attr.aria-owns]': '(_rangeInput.rangePicker?.opened && _rangeInput.rangePicker.id) || null',\n '[attr.min]': '_getMinDate() ? _dateAdapter.toIso8601(_getMinDate()) : null',\n '[attr.max]': '_getMaxDate() ? _dateAdapter.toIso8601(_getMaxDate()) : null',\n '(blur)': '_onBlur()',\n 'type': 'text'\n },\n providers: [\n { provide: NG_VALUE_ACCESSOR, useExisting: MatStartDate, multi: true },\n { provide: NG_VALIDATORS, useExisting: MatStartDate, multi: true }\n ],\n // These need to be specified explicitly, because some tooling doesn't\n // seem to pick them up from the base class. See #20932.\n outputs: ['dateChange', 'dateInput'],\n inputs: ['errorStateMatcher']\n }]\n }], function () { return [{ type: undefined, decorators: [{\n type: Inject,\n args: [MAT_DATE_RANGE_INPUT_PARENT]\n }] }, { type: ɵngcc0.ElementRef }, { type: ɵngcc2.ErrorStateMatcher }, { type: ɵngcc0.Injector }, { type: ɵngcc10.NgForm, decorators: [{\n type: Optional\n }] }, { type: ɵngcc10.FormGroupDirective, decorators: [{\n type: Optional\n }] }, { type: ɵngcc2.DateAdapter, decorators: [{\n type: Optional\n }] }, { type: undefined, decorators: [{\n type: Optional\n }, {\n type: Inject,\n args: [MAT_DATE_FORMATS]\n }] }]; }, null); })();\n/** Input for entering the end date in a `mat-date-range-input`. */\nclass MatEndDate extends _MatDateRangeInputBase {\n constructor(rangeInput, elementRef, defaultErrorStateMatcher, injector, parentForm, parentFormGroup, dateAdapter, dateFormats) {\n // TODO(crisbeto): this constructor shouldn't be necessary, but ViewEngine doesn't seem to\n // handle DI correctly when it is inherited from `MatDateRangeInputPartBase`. We can drop this\n // constructor once ViewEngine is removed.\n super(rangeInput, elementRef, defaultErrorStateMatcher, injector, parentForm, parentFormGroup, dateAdapter, dateFormats);\n /** Validator that checks that the end date isn't before the start date. */\n this._endValidator = (control) => {\n const end = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(control.value));\n const start = this._model ? this._model.selection.start : null;\n return (!end || !start ||\n this._dateAdapter.compareDate(end, start) >= 0) ?\n null : { 'matEndDateInvalid': { 'start': start, 'actual': end } };\n };\n this._validator = Validators.compose([...super._getValidators(), this._endValidator]);\n }\n ngOnInit() {\n // Normally this happens automatically, but it seems to break if not added explicitly when all\n // of the criteria below are met:\n // 1) The class extends a TS mixin.\n // 2) The application is running in ViewEngine.\n // 3) The application is being transpiled through tsickle.\n // This can be removed once google3 is completely migrated to Ivy.\n super.ngOnInit();\n }\n ngDoCheck() {\n // Normally this happens automatically, but it seems to break if not added explicitly when all\n // of the criteria below are met:\n // 1) The class extends a TS mixin.\n // 2) The application is running in ViewEngine.\n // 3) The application is being transpiled through tsickle.\n // This can be removed once google3 is completely migrated to Ivy.\n super.ngDoCheck();\n }\n _getValueFromModel(modelValue) {\n return modelValue.end;\n }\n _shouldHandleChangeEvent(change) {\n var _a;\n if (!super._shouldHandleChangeEvent(change)) {\n return false;\n }\n else {\n return !((_a = change.oldValue) === null || _a === void 0 ? void 0 : _a.end) ? !!change.selection.end :\n !change.selection.end ||\n !!this._dateAdapter.compareDate(change.oldValue.end, change.selection.end);\n }\n }\n _assignValueToModel(value) {\n if (this._model) {\n const range = new DateRange(this._model.selection.start, value);\n this._model.updateSelection(range, this);\n }\n }\n _onKeydown(event) {\n // If the user is pressing backspace on an empty end input, move focus back to the start.\n if (event.keyCode === BACKSPACE && !this._elementRef.nativeElement.value) {\n this._rangeInput._startInput.focus();\n }\n super._onKeydown(event);\n }\n}\nMatEndDate.ɵfac = function MatEndDate_Factory(t) { return new (t || MatEndDate)(ɵngcc0.ɵɵdirectiveInject(MAT_DATE_RANGE_INPUT_PARENT), ɵngcc0.ɵɵdirectiveInject(ɵngcc0.ElementRef), ɵngcc0.ɵɵdirectiveInject(ɵngcc2.ErrorStateMatcher), ɵngcc0.ɵɵdirectiveInject(ɵngcc0.Injector), ɵngcc0.ɵɵdirectiveInject(ɵngcc10.NgForm, 8), ɵngcc0.ɵɵdirectiveInject(ɵngcc10.FormGroupDirective, 8), ɵngcc0.ɵɵdirectiveInject(ɵngcc2.DateAdapter, 8), ɵngcc0.ɵɵdirectiveInject(MAT_DATE_FORMATS, 8)); };\nMatEndDate.ɵdir = /*@__PURE__*/ ɵngcc0.ɵɵdefineDirective({ type: MatEndDate, selectors: [[\"input\", \"matEndDate\", \"\"]], hostAttrs: [\"type\", \"text\", 1, \"mat-end-date\", \"mat-date-range-input-inner\"], hostVars: 5, hostBindings: function MatEndDate_HostBindings(rf, ctx) { if (rf & 1) {\n ɵngcc0.ɵɵlistener(\"input\", function MatEndDate_input_HostBindingHandler($event) { return ctx._onInput($event.target.value); })(\"change\", function MatEndDate_change_HostBindingHandler() { return ctx._onChange(); })(\"keydown\", function MatEndDate_keydown_HostBindingHandler($event) { return ctx._onKeydown($event); })(\"blur\", function MatEndDate_blur_HostBindingHandler() { return ctx._onBlur(); });\n } if (rf & 2) {\n ɵngcc0.ɵɵhostProperty(\"disabled\", ctx.disabled);\n ɵngcc0.ɵɵattribute(\"aria-haspopup\", ctx._rangeInput.rangePicker ? \"dialog\" : null)(\"aria-owns\", (ctx._rangeInput.rangePicker == null ? null : ctx._rangeInput.rangePicker.opened) && ctx._rangeInput.rangePicker.id || null)(\"min\", ctx._getMinDate() ? ctx._dateAdapter.toIso8601(ctx._getMinDate()) : null)(\"max\", ctx._getMaxDate() ? ctx._dateAdapter.toIso8601(ctx._getMaxDate()) : null);\n } }, inputs: { errorStateMatcher: \"errorStateMatcher\" }, outputs: { dateChange: \"dateChange\", dateInput: \"dateInput\" }, features: [ɵngcc0.ɵɵProvidersFeature([\n { provide: NG_VALUE_ACCESSOR, useExisting: MatEndDate, multi: true },\n { provide: NG_VALIDATORS, useExisting: MatEndDate, multi: true }\n ]), ɵngcc0.ɵɵInheritDefinitionFeature] });\nMatEndDate.ctorParameters = () => [\n { type: undefined, decorators: [{ type: Inject, args: [MAT_DATE_RANGE_INPUT_PARENT,] }] },\n { type: ElementRef },\n { type: ErrorStateMatcher },\n { type: Injector },\n { type: NgForm, decorators: [{ type: Optional }] },\n { type: FormGroupDirective, decorators: [{ type: Optional }] },\n { type: DateAdapter, decorators: [{ type: Optional }] },\n { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [MAT_DATE_FORMATS,] }] }\n];\n(function () { (typeof ngDevMode === \"undefined\" || ngDevMode) && ɵngcc0.ɵsetClassMetadata(MatEndDate, [{\n type: Directive,\n args: [{\n selector: 'input[matEndDate]',\n host: {\n 'class': 'mat-end-date mat-date-range-input-inner',\n '[disabled]': 'disabled',\n '(input)': '_onInput($event.target.value)',\n '(change)': '_onChange()',\n '(keydown)': '_onKeydown($event)',\n '[attr.aria-haspopup]': '_rangeInput.rangePicker ? \"dialog\" : null',\n '[attr.aria-owns]': '(_rangeInput.rangePicker?.opened && _rangeInput.rangePicker.id) || null',\n '[attr.min]': '_getMinDate() ? _dateAdapter.toIso8601(_getMinDate()) : null',\n '[attr.max]': '_getMaxDate() ? _dateAdapter.toIso8601(_getMaxDate()) : null',\n '(blur)': '_onBlur()',\n 'type': 'text'\n },\n providers: [\n { provide: NG_VALUE_ACCESSOR, useExisting: MatEndDate, multi: true },\n { provide: NG_VALIDATORS, useExisting: MatEndDate, multi: true }\n ],\n // These need to be specified explicitly, because some tooling doesn't\n // seem to pick them up from the base class. See #20932.\n outputs: ['dateChange', 'dateInput'],\n inputs: ['errorStateMatcher']\n }]\n }], function () { return [{ type: undefined, decorators: [{\n type: Inject,\n args: [MAT_DATE_RANGE_INPUT_PARENT]\n }] }, { type: ɵngcc0.ElementRef }, { type: ɵngcc2.ErrorStateMatcher }, { type: ɵngcc0.Injector }, { type: ɵngcc10.NgForm, decorators: [{\n type: Optional\n }] }, { type: ɵngcc10.FormGroupDirective, decorators: [{\n type: Optional\n }] }, { type: ɵngcc2.DateAdapter, decorators: [{\n type: Optional\n }] }, { type: undefined, decorators: [{\n type: Optional\n }, {\n type: Inject,\n args: [MAT_DATE_FORMATS]\n }] }]; }, null); })();\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 */\nlet nextUniqueId = 0;\nclass MatDateRangeInput {\n constructor(_changeDetectorRef, _elementRef, control, _dateAdapter, _formField) {\n this._changeDetectorRef = _changeDetectorRef;\n this._elementRef = _elementRef;\n this._dateAdapter = _dateAdapter;\n this._formField = _formField;\n this._closedSubscription = Subscription.EMPTY;\n /** Unique ID for the input. */\n this.id = `mat-date-range-input-${nextUniqueId++}`;\n /** Whether the control is focused. */\n this.focused = false;\n /** Name of the form control. */\n this.controlType = 'mat-date-range-input';\n this._groupDisabled = false;\n /** Value for the `aria-describedby` attribute of the inputs. */\n this._ariaDescribedBy = null;\n /** Separator text to be shown between the inputs. */\n this.separator = '–';\n /** Start of the comparison range that should be shown in the calendar. */\n this.comparisonStart = null;\n /** End of the comparison range that should be shown in the calendar. */\n this.comparisonEnd = null;\n /** Emits when the input's state has changed. */\n this.stateChanges = new Subject();\n if (!_dateAdapter && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n throw createMissingDateImplError('DateAdapter');\n }\n // The datepicker module can be used both with MDC and non-MDC form fields. We have\n // to conditionally add the MDC input class so that the range picker looks correctly.\n if (_formField === null || _formField === void 0 ? void 0 : _formField._elementRef.nativeElement.classList.contains('mat-mdc-form-field')) {\n _elementRef.nativeElement.classList.add('mat-mdc-input-element');\n }\n // TODO(crisbeto): remove `as any` after #18206 lands.\n this.ngControl = control;\n }\n /** Current value of the range input. */\n get value() {\n return this._model ? this._model.selection : null;\n }\n /** Whether the control's label should float. */\n get shouldLabelFloat() {\n return this.focused || !this.empty;\n }\n /**\n * Implemented as a part of `MatFormFieldControl`.\n * Set the placeholder attribute on `matStartDate` and `matEndDate`.\n * @docs-private\n */\n get placeholder() {\n var _a, _b;\n const start = ((_a = this._startInput) === null || _a === void 0 ? void 0 : _a._getPlaceholder()) || '';\n const end = ((_b = this._endInput) === null || _b === void 0 ? void 0 : _b._getPlaceholder()) || '';\n return (start || end) ? `${start} ${this.separator} ${end}` : '';\n }\n /** The range picker that this input is associated with. */\n get rangePicker() { return this._rangePicker; }\n set rangePicker(rangePicker) {\n if (rangePicker) {\n this._model = rangePicker.registerInput(this);\n this._rangePicker = rangePicker;\n this._closedSubscription.unsubscribe();\n this._closedSubscription = rangePicker.closedStream.subscribe(() => {\n var _a, _b;\n (_a = this._startInput) === null || _a === void 0 ? void 0 : _a._onTouched();\n (_b = this._endInput) === null || _b === void 0 ? void 0 : _b._onTouched();\n });\n this._registerModel(this._model);\n }\n }\n /** Whether the input is required. */\n get required() { return !!this._required; }\n set required(value) {\n this._required = coerceBooleanProperty(value);\n }\n /** Function that can be used to filter out dates within the date range picker. */\n get dateFilter() { return this._dateFilter; }\n set dateFilter(value) {\n const start = this._startInput;\n const end = this._endInput;\n const wasMatchingStart = start && start._matchesFilter(start.value);\n const wasMatchingEnd = end && end._matchesFilter(start.value);\n this._dateFilter = value;\n if (start && start._matchesFilter(start.value) !== wasMatchingStart) {\n start._validatorOnChange();\n }\n if (end && end._matchesFilter(end.value) !== wasMatchingEnd) {\n end._validatorOnChange();\n }\n }\n /** The minimum valid date. */\n get min() { return this._min; }\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._revalidate();\n }\n }\n /** The maximum valid date. */\n get max() { return this._max; }\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._revalidate();\n }\n }\n /** Whether the input is disabled. */\n get disabled() {\n return (this._startInput && this._endInput) ?\n (this._startInput.disabled && this._endInput.disabled) :\n this._groupDisabled;\n }\n set disabled(value) {\n const newValue = coerceBooleanProperty(value);\n if (newValue !== this._groupDisabled) {\n this._groupDisabled = newValue;\n this.stateChanges.next(undefined);\n }\n }\n /** Whether the input is in an error state. */\n get errorState() {\n if (this._startInput && this._endInput) {\n return this._startInput.errorState || this._endInput.errorState;\n }\n return false;\n }\n /** Whether the datepicker input is empty. */\n get empty() {\n const startEmpty = this._startInput ? this._startInput.isEmpty() : false;\n const endEmpty = this._endInput ? this._endInput.isEmpty() : false;\n return startEmpty && endEmpty;\n }\n /**\n * Implemented as a part of `MatFormFieldControl`.\n * @docs-private\n */\n setDescribedByIds(ids) {\n this._ariaDescribedBy = ids.length ? ids.join(' ') : null;\n }\n /**\n * Implemented as a part of `MatFormFieldControl`.\n * @docs-private\n */\n onContainerClick() {\n if (!this.focused && !this.disabled) {\n if (!this._model || !this._model.selection.start) {\n this._startInput.focus();\n }\n else {\n this._endInput.focus();\n }\n }\n }\n ngAfterContentInit() {\n if (typeof ngDevMode === 'undefined' || ngDevMode) {\n if (!this._startInput) {\n throw Error('mat-date-range-input must contain a matStartDate input');\n }\n if (!this._endInput) {\n throw Error('mat-date-range-input must contain a matEndDate input');\n }\n }\n if (this._model) {\n this._registerModel(this._model);\n }\n // We don't need to unsubscribe from this, because we\n // know that the input streams will be completed on destroy.\n merge(this._startInput.stateChanges, this._endInput.stateChanges).subscribe(() => {\n this.stateChanges.next(undefined);\n });\n }\n ngOnChanges(changes) {\n if (dateInputsHaveChanged(changes, this._dateAdapter)) {\n this.stateChanges.next(undefined);\n }\n }\n ngOnDestroy() {\n this._closedSubscription.unsubscribe();\n this.stateChanges.complete();\n }\n /** Gets the date at which the calendar should start. */\n getStartValue() {\n return this.value ? this.value.start : null;\n }\n /** Gets the input's theme palette. */\n getThemePalette() {\n return this._formField ? this._formField.color : undefined;\n }\n /** Gets the element to which the calendar overlay should be attached. */\n getConnectedOverlayOrigin() {\n return this._formField ? this._formField.getConnectedOverlayOrigin() : this._elementRef;\n }\n /** Gets the value that is used to mirror the state input. */\n _getInputMirrorValue() {\n return this._startInput ? this._startInput.getMirrorValue() : '';\n }\n /** Whether the input placeholders should be hidden. */\n _shouldHidePlaceholders() {\n return this._startInput ? !this._startInput.isEmpty() : false;\n }\n /** Handles the value in one of the child inputs changing. */\n _handleChildValueChange() {\n this.stateChanges.next(undefined);\n this._changeDetectorRef.markForCheck();\n }\n /** Opens the date range picker associated with the input. */\n _openDatepicker() {\n if (this._rangePicker) {\n this._rangePicker.open();\n }\n }\n /** Whether the separate text should be hidden. */\n _shouldHideSeparator() {\n return (!this._formField || (this._formField.getLabelId() &&\n !this._formField._shouldLabelFloat())) && this.empty;\n }\n /** Gets the value for the `aria-labelledby` attribute of the inputs. */\n _getAriaLabelledby() {\n const formField = this._formField;\n return formField && formField._hasFloatingLabel() ? formField._labelId : null;\n }\n /** Updates the focused state of the range input. */\n _updateFocus(origin) {\n this.focused = origin !== null;\n this.stateChanges.next();\n }\n /** Re-runs the validators on the start/end inputs. */\n _revalidate() {\n if (this._startInput) {\n this._startInput._validatorOnChange();\n }\n if (this._endInput) {\n this._endInput._validatorOnChange();\n }\n }\n /** Registers the current date selection model with the start/end inputs. */\n _registerModel(model) {\n if (this._startInput) {\n this._startInput._registerModel(model);\n }\n if (this._endInput) {\n this._endInput._registerModel(model);\n }\n }\n}\nMatDateRangeInput.ɵfac = function MatDateRangeInput_Factory(t) { return new (t || MatDateRangeInput)(ɵngcc0.ɵɵdirectiveInject(ɵngcc0.ChangeDetectorRef), ɵngcc0.ɵɵdirectiveInject(ɵngcc0.ElementRef), ɵngcc0.ɵɵdirectiveInject(ɵngcc10.ControlContainer, 10), ɵngcc0.ɵɵdirectiveInject(ɵngcc2.DateAdapter, 8), ɵngcc0.ɵɵdirectiveInject(MAT_FORM_FIELD, 8)); };\nMatDateRangeInput.ɵcmp = /*@__PURE__*/ ɵngcc0.ɵɵdefineComponent({ type: MatDateRangeInput, selectors: [[\"mat-date-range-input\"]], contentQueries: function MatDateRangeInput_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {\n ɵngcc0.ɵɵcontentQuery(dirIndex, MatStartDate, 5);\n ɵngcc0.ɵɵcontentQuery(dirIndex, MatEndDate, 5);\n } if (rf & 2) {\n let _t;\n ɵngcc0.ɵɵqueryRefresh(_t = ɵngcc0.ɵɵloadQuery()) && (ctx._startInput = _t.first);\n ɵngcc0.ɵɵqueryRefresh(_t = ɵngcc0.ɵɵloadQuery()) && (ctx._endInput = _t.first);\n } }, hostAttrs: [\"role\", \"group\", 1, \"mat-date-range-input\"], hostVars: 8, hostBindings: function MatDateRangeInput_HostBindings(rf, ctx) { if (rf & 2) {\n ɵngcc0.ɵɵattribute(\"id\", null)(\"aria-labelledby\", ctx._getAriaLabelledby())(\"aria-describedby\", ctx._ariaDescribedBy)(\"data-mat-calendar\", ctx.rangePicker ? ctx.rangePicker.id : null);\n ɵngcc0.ɵɵclassProp(\"mat-date-range-input-hide-placeholders\", ctx._shouldHidePlaceholders())(\"mat-date-range-input-required\", ctx.required);\n } }, inputs: { separator: \"separator\", comparisonStart: \"comparisonStart\", comparisonEnd: \"comparisonEnd\", rangePicker: \"rangePicker\", required: \"required\", dateFilter: \"dateFilter\", min: \"min\", max: \"max\", disabled: \"disabled\" }, exportAs: [\"matDateRangeInput\"], features: [ɵngcc0.ɵɵProvidersFeature([\n { provide: MatFormFieldControl, useExisting: MatDateRangeInput },\n { provide: MAT_DATE_RANGE_INPUT_PARENT, useExisting: MatDateRangeInput },\n ]), ɵngcc0.ɵɵNgOnChangesFeature], ngContentSelectors: _c6, decls: 9, vars: 4, consts: [[\"cdkMonitorSubtreeFocus\", \"\", 1, \"mat-date-range-input-container\", 3, \"cdkFocusChange\"], [1, \"mat-date-range-input-start-wrapper\"], [\"aria-hidden\", \"true\", 1, \"mat-date-range-input-mirror\"], [1, \"mat-date-range-input-separator\"], [1, \"mat-date-range-input-end-wrapper\"]], template: function MatDateRangeInput_Template(rf, ctx) { if (rf & 1) {\n ɵngcc0.ɵɵprojectionDef(_c5);\n ɵngcc0.ɵɵelementStart(0, \"div\", 0);\n ɵngcc0.ɵɵlistener(\"cdkFocusChange\", function MatDateRangeInput_Template_div_cdkFocusChange_0_listener($event) { return ctx._updateFocus($event); });\n ɵngcc0.ɵɵelementStart(1, \"div\", 1);\n ɵngcc0.ɵɵprojection(2);\n ɵngcc0.ɵɵelementStart(3, \"span\", 2);\n ɵngcc0.ɵɵtext(4);\n ɵngcc0.ɵɵelementEnd()();\n ɵngcc0.ɵɵelementStart(5, \"span\", 3);\n ɵngcc0.ɵɵtext(6);\n ɵngcc0.ɵɵelementEnd();\n ɵngcc0.ɵɵelementStart(7, \"div\", 4);\n ɵngcc0.ɵɵprojection(8, 1);\n ɵngcc0.ɵɵelementEnd()();\n } if (rf & 2) {\n ɵngcc0.ɵɵadvance(4);\n ɵngcc0.ɵɵtextInterpolate(ctx._getInputMirrorValue());\n ɵngcc0.ɵɵadvance(1);\n ɵngcc0.ɵɵclassProp(\"mat-date-range-input-separator-hidden\", ctx._shouldHideSeparator());\n ɵngcc0.ɵɵadvance(1);\n ɵngcc0.ɵɵtextInterpolate(ctx.separator);\n } }, dependencies: [ɵngcc5.CdkMonitorFocus], styles: [\".mat-date-range-input{display:block;width:100%}.mat-date-range-input-container{display:flex;align-items:center}.mat-date-range-input-separator{transition:opacity 400ms 133.3333333333ms cubic-bezier(0.25, 0.8, 0.25, 1);margin:0 4px}.mat-date-range-input-separator-hidden{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:0;transition:none}.mat-date-range-input-inner{font:inherit;background:transparent;color:currentColor;border:none;outline:none;padding:0;margin:0;vertical-align:bottom;text-align:inherit;-webkit-appearance:none;width:100%}.mat-date-range-input-inner::-ms-clear,.mat-date-range-input-inner::-ms-reveal{display:none}.mat-date-range-input-inner:-moz-ui-invalid{box-shadow:none}.mat-date-range-input-inner::placeholder{transition:color 400ms 133.3333333333ms cubic-bezier(0.25, 0.8, 0.25, 1)}.mat-date-range-input-inner::-moz-placeholder{transition:color 400ms 133.3333333333ms cubic-bezier(0.25, 0.8, 0.25, 1)}.mat-date-range-input-inner::-webkit-input-placeholder{transition:color 400ms 133.3333333333ms cubic-bezier(0.25, 0.8, 0.25, 1)}.mat-date-range-input-inner:-ms-input-placeholder{transition:color 400ms 133.3333333333ms cubic-bezier(0.25, 0.8, 0.25, 1)}.mat-form-field-hide-placeholder .mat-date-range-input-inner::placeholder,.mat-date-range-input-hide-placeholders .mat-date-range-input-inner::placeholder{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:transparent !important;-webkit-text-fill-color:transparent;transition:none}.mat-form-field-hide-placeholder .mat-date-range-input-inner::-moz-placeholder,.mat-date-range-input-hide-placeholders .mat-date-range-input-inner::-moz-placeholder{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:transparent !important;-webkit-text-fill-color:transparent;transition:none}.mat-form-field-hide-placeholder .mat-date-range-input-inner::-webkit-input-placeholder,.mat-date-range-input-hide-placeholders .mat-date-range-input-inner::-webkit-input-placeholder{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:transparent !important;-webkit-text-fill-color:transparent;transition:none}.mat-form-field-hide-placeholder .mat-date-range-input-inner:-ms-input-placeholder,.mat-date-range-input-hide-placeholders .mat-date-range-input-inner:-ms-input-placeholder{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:transparent !important;-webkit-text-fill-color:transparent;transition:none}.mat-date-range-input-mirror{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;visibility:hidden;white-space:nowrap;display:inline-block;min-width:2px}.mat-date-range-input-start-wrapper{position:relative;overflow:hidden;max-width:calc(50% - 4px)}.mat-date-range-input-start-wrapper .mat-date-range-input-inner{position:absolute;top:0;left:0}.mat-date-range-input-end-wrapper{flex-grow:1;max-width:calc(50% - 4px)}.mat-form-field-type-mat-date-range-input .mat-form-field-infix{width:200px}\\n\"], encapsulation: 2, changeDetection: 0 });\nMatDateRangeInput.ctorParameters = () => [\n { type: ChangeDetectorRef },\n { type: ElementRef },\n { type: ControlContainer, decorators: [{ type: Optional }, { type: Self }] },\n { type: DateAdapter, decorators: [{ type: Optional }] },\n { type: MatFormField, decorators: [{ type: Optional }, { type: Inject, args: [MAT_FORM_FIELD,] }] }\n];\nMatDateRangeInput.propDecorators = {\n rangePicker: [{ type: Input }],\n required: [{ type: Input }],\n dateFilter: [{ type: Input }],\n min: [{ type: Input }],\n max: [{ type: Input }],\n disabled: [{ type: Input }],\n separator: [{ type: Input }],\n comparisonStart: [{ type: Input }],\n comparisonEnd: [{ type: Input }],\n _startInput: [{ type: ContentChild, args: [MatStartDate,] }],\n _endInput: [{ type: ContentChild, args: [MatEndDate,] }]\n};\n(function () { (typeof ngDevMode === \"undefined\" || ngDevMode) && ɵngcc0.ɵsetClassMetadata(MatDateRangeInput, [{\n type: Component,\n args: [{ selector: 'mat-date-range-input', template: \"\\n
\\n \\n {{_getInputMirrorValue()}}\\n
\\n\\n {{separator}}\\n\\n
\\n \\n
\\n\\n\\n\", exportAs: 'matDateRangeInput', host: {\n 'class': 'mat-date-range-input',\n '[class.mat-date-range-input-hide-placeholders]': '_shouldHidePlaceholders()',\n '[class.mat-date-range-input-required]': 'required',\n '[attr.id]': 'null',\n 'role': 'group',\n '[attr.aria-labelledby]': '_getAriaLabelledby()',\n '[attr.aria-describedby]': '_ariaDescribedBy',\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]': 'rangePicker ? rangePicker.id : null'\n }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [\n { provide: MatFormFieldControl, useExisting: MatDateRangeInput },\n { provide: MAT_DATE_RANGE_INPUT_PARENT, useExisting: MatDateRangeInput },\n ], styles: [\".mat-date-range-input{display:block;width:100%}.mat-date-range-input-container{display:flex;align-items:center}.mat-date-range-input-separator{transition:opacity 400ms 133.3333333333ms cubic-bezier(0.25, 0.8, 0.25, 1);margin:0 4px}.mat-date-range-input-separator-hidden{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:0;transition:none}.mat-date-range-input-inner{font:inherit;background:transparent;color:currentColor;border:none;outline:none;padding:0;margin:0;vertical-align:bottom;text-align:inherit;-webkit-appearance:none;width:100%}.mat-date-range-input-inner::-ms-clear,.mat-date-range-input-inner::-ms-reveal{display:none}.mat-date-range-input-inner:-moz-ui-invalid{box-shadow:none}.mat-date-range-input-inner::placeholder{transition:color 400ms 133.3333333333ms cubic-bezier(0.25, 0.8, 0.25, 1)}.mat-date-range-input-inner::-moz-placeholder{transition:color 400ms 133.3333333333ms cubic-bezier(0.25, 0.8, 0.25, 1)}.mat-date-range-input-inner::-webkit-input-placeholder{transition:color 400ms 133.3333333333ms cubic-bezier(0.25, 0.8, 0.25, 1)}.mat-date-range-input-inner:-ms-input-placeholder{transition:color 400ms 133.3333333333ms cubic-bezier(0.25, 0.8, 0.25, 1)}.mat-form-field-hide-placeholder .mat-date-range-input-inner::placeholder,.mat-date-range-input-hide-placeholders .mat-date-range-input-inner::placeholder{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:transparent !important;-webkit-text-fill-color:transparent;transition:none}.mat-form-field-hide-placeholder .mat-date-range-input-inner::-moz-placeholder,.mat-date-range-input-hide-placeholders .mat-date-range-input-inner::-moz-placeholder{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:transparent !important;-webkit-text-fill-color:transparent;transition:none}.mat-form-field-hide-placeholder .mat-date-range-input-inner::-webkit-input-placeholder,.mat-date-range-input-hide-placeholders .mat-date-range-input-inner::-webkit-input-placeholder{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:transparent !important;-webkit-text-fill-color:transparent;transition:none}.mat-form-field-hide-placeholder .mat-date-range-input-inner:-ms-input-placeholder,.mat-date-range-input-hide-placeholders .mat-date-range-input-inner:-ms-input-placeholder{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:transparent !important;-webkit-text-fill-color:transparent;transition:none}.mat-date-range-input-mirror{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;visibility:hidden;white-space:nowrap;display:inline-block;min-width:2px}.mat-date-range-input-start-wrapper{position:relative;overflow:hidden;max-width:calc(50% - 4px)}.mat-date-range-input-start-wrapper .mat-date-range-input-inner{position:absolute;top:0;left:0}.mat-date-range-input-end-wrapper{flex-grow:1;max-width:calc(50% - 4px)}.mat-form-field-type-mat-date-range-input .mat-form-field-infix{width:200px}\\n\"] }]\n }], function () { return [{ type: ɵngcc0.ChangeDetectorRef }, { type: ɵngcc0.ElementRef }, { type: ɵngcc10.ControlContainer, decorators: [{\n type: Optional\n }, {\n type: Self\n }] }, { type: ɵngcc2.DateAdapter, decorators: [{\n type: Optional\n }] }, { type: ɵngcc9.MatFormField, decorators: [{\n type: Optional\n }, {\n type: Inject,\n args: [MAT_FORM_FIELD]\n }] }]; }, { separator: [{\n type: Input\n }], comparisonStart: [{\n type: Input\n }], comparisonEnd: [{\n type: Input\n }], rangePicker: [{\n type: Input\n }], required: [{\n type: Input\n }], dateFilter: [{\n type: Input\n }], min: [{\n type: Input\n }], max: [{\n type: Input\n }], disabled: [{\n type: Input\n }], _startInput: [{\n type: ContentChild,\n args: [MatStartDate]\n }], _endInput: [{\n type: ContentChild,\n args: [MatEndDate]\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=\"matDateRangePicker\"). We can change this to a\n// directive if angular adds support for `exportAs: '$implicit'` on directives.\n/** Component responsible for managing the date range picker popup/dialog. */\nclass MatDateRangePicker extends MatDatepickerBase {\n _forwardContentValues(instance) {\n super._forwardContentValues(instance);\n const input = this.datepickerInput;\n if (input) {\n instance.comparisonStart = input.comparisonStart;\n instance.comparisonEnd = input.comparisonEnd;\n }\n }\n}\nMatDateRangePicker.ɵfac = /*@__PURE__*/ function () { let ɵMatDateRangePicker_BaseFactory; return function MatDateRangePicker_Factory(t) { return (ɵMatDateRangePicker_BaseFactory || (ɵMatDateRangePicker_BaseFactory = ɵngcc0.ɵɵgetInheritedFactory(MatDateRangePicker)))(t || MatDateRangePicker); }; }();\nMatDateRangePicker.ɵcmp = /*@__PURE__*/ ɵngcc0.ɵɵdefineComponent({ type: MatDateRangePicker, selectors: [[\"mat-date-range-picker\"]], exportAs: [\"matDateRangePicker\"], features: [ɵngcc0.ɵɵProvidersFeature([\n MAT_RANGE_DATE_SELECTION_MODEL_PROVIDER,\n MAT_CALENDAR_RANGE_STRATEGY_PROVIDER,\n { provide: MatDatepickerBase, useExisting: MatDateRangePicker },\n ]), ɵngcc0.ɵɵInheritDefinitionFeature], decls: 0, vars: 0, template: function MatDateRangePicker_Template(rf, ctx) { }, encapsulation: 2, changeDetection: 0 });\n(function () { (typeof ngDevMode === \"undefined\" || ngDevMode) && ɵngcc0.ɵsetClassMetadata(MatDateRangePicker, [{\n type: Component,\n args: [{\n selector: 'mat-date-range-picker',\n template: '',\n exportAs: 'matDateRangePicker',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n providers: [\n MAT_RANGE_DATE_SELECTION_MODEL_PROVIDER,\n MAT_CALENDAR_RANGE_STRATEGY_PROVIDER,\n { provide: MatDatepickerBase, useExisting: MatDateRangePicker },\n ]\n }]\n }], null, null); })();\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/** Button that will close the datepicker and assign the current selection to the data model. */\nclass MatDatepickerApply {\n constructor(_datepicker) {\n this._datepicker = _datepicker;\n }\n _applySelection() {\n this._datepicker._applyPendingSelection();\n this._datepicker.close();\n }\n}\nMatDatepickerApply.ɵfac = function MatDatepickerApply_Factory(t) { return new (t || MatDatepickerApply)(ɵngcc0.ɵɵdirectiveInject(MatDatepickerBase)); };\nMatDatepickerApply.ɵdir = /*@__PURE__*/ ɵngcc0.ɵɵdefineDirective({ type: MatDatepickerApply, selectors: [[\"\", \"matDatepickerApply\", \"\"], [\"\", \"matDateRangePickerApply\", \"\"]], hostBindings: function MatDatepickerApply_HostBindings(rf, ctx) { if (rf & 1) {\n ɵngcc0.ɵɵlistener(\"click\", function MatDatepickerApply_click_HostBindingHandler() { return ctx._applySelection(); });\n } } });\nMatDatepickerApply.ctorParameters = () => [\n { type: MatDatepickerBase }\n];\n(function () { (typeof ngDevMode === \"undefined\" || ngDevMode) && ɵngcc0.ɵsetClassMetadata(MatDatepickerApply, [{\n type: Directive,\n args: [{\n selector: '[matDatepickerApply], [matDateRangePickerApply]',\n host: { '(click)': '_applySelection()' }\n }]\n }], function () { return [{ type: MatDatepickerBase }]; }, null); })();\n/** Button that will close the datepicker and discard the current selection. */\nclass MatDatepickerCancel {\n constructor(_datepicker) {\n this._datepicker = _datepicker;\n }\n}\nMatDatepickerCancel.ɵfac = function MatDatepickerCancel_Factory(t) { return new (t || MatDatepickerCancel)(ɵngcc0.ɵɵdirectiveInject(MatDatepickerBase)); };\nMatDatepickerCancel.ɵdir = /*@__PURE__*/ ɵngcc0.ɵɵdefineDirective({ type: MatDatepickerCancel, selectors: [[\"\", \"matDatepickerCancel\", \"\"], [\"\", \"matDateRangePickerCancel\", \"\"]], hostBindings: function MatDatepickerCancel_HostBindings(rf, ctx) { if (rf & 1) {\n ɵngcc0.ɵɵlistener(\"click\", function MatDatepickerCancel_click_HostBindingHandler() { return ctx._datepicker.close(); });\n } } });\nMatDatepickerCancel.ctorParameters = () => [\n { type: MatDatepickerBase }\n];\n(function () { (typeof ngDevMode === \"undefined\" || ngDevMode) && ɵngcc0.ɵsetClassMetadata(MatDatepickerCancel, [{\n type: Directive,\n args: [{\n selector: '[matDatepickerCancel], [matDateRangePickerCancel]',\n host: { '(click)': '_datepicker.close()' }\n }]\n }], function () { return [{ type: MatDatepickerBase }]; }, null); })();\n/**\n * Container that can be used to project a row of action buttons\n * to the bottom of a datepicker or date range picker.\n */\nclass MatDatepickerActions {\n constructor(_datepicker, _viewContainerRef) {\n this._datepicker = _datepicker;\n this._viewContainerRef = _viewContainerRef;\n }\n ngAfterViewInit() {\n this._portal = new TemplatePortal(this._template, this._viewContainerRef);\n this._datepicker.registerActions(this._portal);\n }\n ngOnDestroy() {\n var _a;\n this._datepicker.removeActions(this._portal);\n // Needs to be null checked since we initialize it in `ngAfterViewInit`.\n if (this._portal && this._portal.isAttached) {\n (_a = this._portal) === null || _a === void 0 ? void 0 : _a.detach();\n }\n }\n}\nMatDatepickerActions.ɵfac = function MatDatepickerActions_Factory(t) { return new (t || MatDatepickerActions)(ɵngcc0.ɵɵdirectiveInject(MatDatepickerBase), ɵngcc0.ɵɵdirectiveInject(ɵngcc0.ViewContainerRef)); };\nMatDatepickerActions.ɵcmp = /*@__PURE__*/ ɵngcc0.ɵɵdefineComponent({ type: MatDatepickerActions, selectors: [[\"mat-datepicker-actions\"], [\"mat-date-range-picker-actions\"]], viewQuery: function MatDatepickerActions_Query(rf, ctx) { if (rf & 1) {\n ɵngcc0.ɵɵviewQuery(TemplateRef, 5);\n } if (rf & 2) {\n let _t;\n ɵngcc0.ɵɵqueryRefresh(_t = ɵngcc0.ɵɵloadQuery()) && (ctx._template = _t.first);\n } }, ngContentSelectors: _c1, decls: 1, vars: 0, consts: [[1, \"mat-datepicker-actions\"]], template: function MatDatepickerActions_Template(rf, ctx) { if (rf & 1) {\n ɵngcc0.ɵɵprojectionDef();\n ɵngcc0.ɵɵtemplate(0, MatDatepickerActions_ng_template_0_Template, 2, 0, \"ng-template\");\n } }, styles: [\".mat-datepicker-actions{display:flex;justify-content:flex-end;align-items:center;padding:0 8px 8px 8px}.mat-datepicker-actions .mat-button-base+.mat-button-base{margin-left:8px}[dir=rtl] .mat-datepicker-actions .mat-button-base+.mat-button-base{margin-left:0;margin-right:8px}\\n\"], encapsulation: 2, changeDetection: 0 });\nMatDatepickerActions.ctorParameters = () => [\n { type: MatDatepickerBase },\n { type: ViewContainerRef }\n];\nMatDatepickerActions.propDecorators = {\n _template: [{ type: ViewChild, args: [TemplateRef,] }]\n};\n(function () { (typeof ngDevMode === \"undefined\" || ngDevMode) && ɵngcc0.ɵsetClassMetadata(MatDatepickerActions, [{\n type: Component,\n args: [{ selector: 'mat-datepicker-actions, mat-date-range-picker-actions', template: `\n \n
\n \n
\n \n `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [\".mat-datepicker-actions{display:flex;justify-content:flex-end;align-items:center;padding:0 8px 8px 8px}.mat-datepicker-actions .mat-button-base+.mat-button-base{margin-left:8px}[dir=rtl] .mat-datepicker-actions .mat-button-base+.mat-button-base{margin-left:0;margin-right:8px}\\n\"] }]\n }], function () { return [{ type: MatDatepickerBase }, { type: ɵngcc0.ViewContainerRef }]; }, { _template: [{\n type: ViewChild,\n args: [TemplateRef]\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 */\nclass MatDatepickerModule {\n}\nMatDatepickerModule.ɵfac = function MatDatepickerModule_Factory(t) { return new (t || MatDatepickerModule)(); };\nMatDatepickerModule.ɵmod = /*@__PURE__*/ ɵngcc0.ɵɵdefineNgModule({ type: MatDatepickerModule });\nMatDatepickerModule.ɵinj = /*@__PURE__*/ ɵngcc0.ɵɵdefineInjector({ providers: [\n MatDatepickerIntl,\n MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER\n ], imports: [CommonModule,\n MatButtonModule,\n MatDialogModule,\n OverlayModule,\n A11yModule,\n PortalModule,\n MatCommonModule, CdkScrollableModule] });\n(function () { (typeof ngDevMode === \"undefined\" || ngDevMode) && ɵngcc0.ɵsetClassMetadata(MatDatepickerModule, [{\n type: NgModule,\n args: [{\n imports: [\n CommonModule,\n MatButtonModule,\n MatDialogModule,\n OverlayModule,\n A11yModule,\n PortalModule,\n MatCommonModule,\n ],\n exports: [\n CdkScrollableModule,\n MatCalendar,\n MatCalendarBody,\n MatDatepicker,\n MatDatepickerContent,\n MatDatepickerInput,\n MatDatepickerToggle,\n MatDatepickerToggleIcon,\n MatMonthView,\n MatYearView,\n MatMultiYearView,\n MatCalendarHeader,\n MatDateRangeInput,\n MatStartDate,\n MatEndDate,\n MatDateRangePicker,\n MatDatepickerActions,\n MatDatepickerCancel,\n MatDatepickerApply\n ],\n declarations: [\n MatCalendar,\n MatCalendarBody,\n MatDatepicker,\n MatDatepickerContent,\n MatDatepickerInput,\n MatDatepickerToggle,\n MatDatepickerToggleIcon,\n MatMonthView,\n MatYearView,\n MatMultiYearView,\n MatCalendarHeader,\n MatDateRangeInput,\n MatStartDate,\n MatEndDate,\n MatDateRangePicker,\n MatDatepickerActions,\n MatDatepickerCancel,\n MatDatepickerApply\n ],\n providers: [\n MatDatepickerIntl,\n MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER\n ],\n entryComponents: [\n MatDatepickerContent,\n MatCalendarHeader,\n ]\n }]\n }], null, null); })();\n(function () { (typeof ngJitMode === \"undefined\" || ngJitMode) && ɵngcc0.ɵɵsetNgModuleScope(MatDatepickerModule, { declarations: function () { return [MatCalendar, MatCalendarBody, MatDatepicker, MatDatepickerContent, MatDatepickerInput, MatDatepickerToggle, MatDatepickerToggleIcon, MatMonthView, MatYearView, MatMultiYearView, MatCalendarHeader, MatDateRangeInput, MatStartDate, MatEndDate, MatDateRangePicker, MatDatepickerActions, MatDatepickerCancel, MatDatepickerApply]; }, imports: function () { return [CommonModule,\n MatButtonModule,\n MatDialogModule,\n OverlayModule,\n A11yModule,\n PortalModule,\n MatCommonModule]; }, exports: function () { return [CdkScrollableModule, MatCalendar, MatCalendarBody, MatDatepicker, MatDatepickerContent, MatDatepickerInput, MatDatepickerToggle, MatDatepickerToggleIcon, MatMonthView, MatYearView, MatMultiYearView, MatCalendarHeader, MatDateRangeInput, MatStartDate, MatEndDate, MatDateRangePicker, MatDatepickerActions, MatDatepickerCancel, MatDatepickerApply]; } }); })();\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/**\n * Generated bundle index. Do not edit.\n */\n\nexport { DateRange, DefaultMatCalendarRangeStrategy, MAT_DATEPICKER_SCROLL_STRATEGY, MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY, MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER, MAT_DATEPICKER_VALIDATORS, MAT_DATEPICKER_VALUE_ACCESSOR, MAT_DATE_RANGE_SELECTION_STRATEGY, MAT_RANGE_DATE_SELECTION_MODEL_FACTORY, MAT_RANGE_DATE_SELECTION_MODEL_PROVIDER, MAT_SINGLE_DATE_SELECTION_MODEL_FACTORY, MAT_SINGLE_DATE_SELECTION_MODEL_PROVIDER, MatCalendar, MatCalendarBody, MatCalendarCell, MatCalendarHeader, MatDateRangeInput, MatDateRangePicker, MatDateSelectionModel, MatDatepicker, MatDatepickerActions, MatDatepickerApply, MatDatepickerCancel, MatDatepickerContent, MatDatepickerInput, MatDatepickerInputEvent, MatDatepickerIntl, MatDatepickerModule, MatDatepickerToggle, MatDatepickerToggleIcon, MatEndDate, MatMonthView, MatMultiYearView, MatRangeDateSelectionModel, MatSingleDateSelectionModel, MatStartDate, MatYearView, matDatepickerAnimations, yearsPerPage, yearsPerRow, MAT_CALENDAR_RANGE_STRATEGY_PROVIDER_FACTORY as ɵangular_material_src_material_datepicker_datepicker_a, MAT_CALENDAR_RANGE_STRATEGY_PROVIDER as ɵangular_material_src_material_datepicker_datepicker_b, MatDatepickerBase as ɵangular_material_src_material_datepicker_datepicker_c, MatDatepickerInputBase as ɵangular_material_src_material_datepicker_datepicker_d, MAT_DATE_RANGE_INPUT_PARENT as ɵangular_material_src_material_datepicker_datepicker_e };\n\n","import { Overlay, OverlayConfig, OverlayContainer, OverlayModule } from '@angular/cdk/overlay';\nimport { BasePortalOutlet, CdkPortalOutlet, ComponentPortal, TemplatePortal, PortalModule } from '@angular/cdk/portal';\nimport { EventEmitter, Directive, ElementRef, ChangeDetectorRef, Optional, Inject, ViewChild, Component, ViewEncapsulation, ChangeDetectionStrategy, InjectionToken, Injector, TemplateRef, Type, Injectable, SkipSelf, Input, NgModule } from '@angular/core';\nimport { MatCommonModule } from '@angular/material/core';\nimport { Directionality } from '@angular/cdk/bidi';\nimport { DOCUMENT, Location } from '@angular/common';\nimport { Subject, defer, of } from 'rxjs';\nimport { filter, take, startWith } from 'rxjs/operators';\nimport { FocusTrapFactory, FocusMonitor } from '@angular/cdk/a11y';\nimport { trigger, state, style, transition, animate } from '@angular/animations';\nimport { ESCAPE, hasModifierKey } from '@angular/cdk/keycodes';\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 * Configuration for opening a modal dialog with the MatDialog service.\n */\nimport * as ɵngcc0 from '@angular/core';\nimport * as ɵngcc1 from '@angular/cdk/a11y';\nimport * as ɵngcc2 from '@angular/cdk/portal';\nimport * as ɵngcc3 from '@angular/cdk/overlay';\nimport * as ɵngcc4 from '@angular/common';\n\nfunction MatDialogContainer_ng_template_0_Template(rf, ctx) { }\nclass MatDialogConfig {\n constructor() {\n /** The ARIA role of the dialog element. */\n this.role = 'dialog';\n /** Custom class for the overlay pane. */\n this.panelClass = '';\n /** Whether the dialog has a backdrop. */\n this.hasBackdrop = true;\n /** Custom class for the backdrop. */\n this.backdropClass = '';\n /** Whether the user can use escape or clicking on the backdrop to close the modal. */\n this.disableClose = false;\n /** Width of the dialog. */\n this.width = '';\n /** Height of the dialog. */\n this.height = '';\n /** Max-width of the dialog. If a number is provided, assumes pixel units. Defaults to 80vw. */\n this.maxWidth = '80vw';\n /** Data being injected into the child component. */\n this.data = null;\n /** ID of the element that describes the dialog. */\n this.ariaDescribedBy = null;\n /** ID of the element that labels the dialog. */\n this.ariaLabelledBy = null;\n /** Aria label to assign to the dialog element. */\n this.ariaLabel = null;\n /** Whether the dialog should focus the first focusable element on open. */\n this.autoFocus = true;\n /**\n * Whether the dialog should restore focus to the\n * previously-focused element, after it's closed.\n */\n this.restoreFocus = true;\n /**\n * Whether the dialog should close when the user goes backwards/forwards in history.\n * Note that this usually doesn't include clicking on links (unless the user is using\n * the `HashLocationStrategy`).\n */\n this.closeOnNavigation = true;\n // TODO(jelbourn): add configuration for lifecycle hooks, ARIA labelling.\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 * Animations used by MatDialog.\n * @docs-private\n */\nconst matDialogAnimations = {\n /** Animation that is applied on the dialog container by default. */\n dialogContainer: trigger('dialogContainer', [\n // Note: The `enter` animation transitions to `transform: none`, because for some reason\n // specifying the transform explicitly, causes IE both to blur the dialog content and\n // decimate the animation performance. Leaving it as `none` solves both issues.\n state('void, exit', style({ opacity: 0, transform: 'scale(0.7)' })),\n state('enter', style({ transform: 'none' })),\n transition('* => enter', animate('150ms cubic-bezier(0, 0, 0.2, 1)', style({ transform: 'none', opacity: 1 }))),\n transition('* => void, * => exit', animate('75ms cubic-bezier(0.4, 0.0, 0.2, 1)', style({ opacity: 0 }))),\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 * Throws an exception for the case when a ComponentPortal is\n * attached to a DomPortalOutlet without an origin.\n * @docs-private\n */\nfunction throwMatDialogContentAlreadyAttachedError() {\n throw Error('Attempting to attach dialog content after content is already attached');\n}\n/**\n * Base class for the `MatDialogContainer`. The base class does not implement\n * animations as these are left to implementers of the dialog container.\n */\nclass _MatDialogContainerBase extends BasePortalOutlet {\n constructor(_elementRef, _focusTrapFactory, _changeDetectorRef, _document, \n /** The dialog configuration. */\n _config, _focusMonitor) {\n super();\n this._elementRef = _elementRef;\n this._focusTrapFactory = _focusTrapFactory;\n this._changeDetectorRef = _changeDetectorRef;\n this._config = _config;\n this._focusMonitor = _focusMonitor;\n /** Emits when an animation state changes. */\n this._animationStateChanged = new EventEmitter();\n /** Element that was focused before the dialog was opened. Save this to restore upon close. */\n this._elementFocusedBeforeDialogWasOpened = null;\n /**\n * Type of interaction that led to the dialog being closed. This is used to determine\n * whether the focus style will be applied when returning focus to its original location\n * after the dialog is closed.\n */\n this._closeInteractionType = null;\n /**\n * Attaches a DOM portal to the dialog container.\n * @param portal Portal to be attached.\n * @deprecated To be turned into a method.\n * @breaking-change 10.0.0\n */\n this.attachDomPortal = (portal) => {\n if (this._portalOutlet.hasAttached() && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n throwMatDialogContentAlreadyAttachedError();\n }\n return this._portalOutlet.attachDomPortal(portal);\n };\n this._ariaLabelledBy = _config.ariaLabelledBy || null;\n this._document = _document;\n }\n /** Initializes the dialog container with the attached content. */\n _initializeWithAttachedContent() {\n this._setupFocusTrap();\n // Save the previously focused element. This element will be re-focused\n // when the dialog closes.\n this._capturePreviouslyFocusedElement();\n // Move focus onto the dialog immediately in order to prevent the user\n // from accidentally opening multiple dialogs at the same time.\n this._focusDialogContainer();\n }\n /**\n * Attach a ComponentPortal as content to this dialog container.\n * @param portal Portal to be attached as the dialog content.\n */\n attachComponentPortal(portal) {\n if (this._portalOutlet.hasAttached() && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n throwMatDialogContentAlreadyAttachedError();\n }\n return this._portalOutlet.attachComponentPortal(portal);\n }\n /**\n * Attach a TemplatePortal as content to this dialog container.\n * @param portal Portal to be attached as the dialog content.\n */\n attachTemplatePortal(portal) {\n if (this._portalOutlet.hasAttached() && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n throwMatDialogContentAlreadyAttachedError();\n }\n return this._portalOutlet.attachTemplatePortal(portal);\n }\n /** Moves focus back into the dialog if it was moved out. */\n _recaptureFocus() {\n if (!this._containsFocus()) {\n const focusContainer = !this._config.autoFocus || !this._focusTrap.focusInitialElement();\n if (focusContainer) {\n this._elementRef.nativeElement.focus();\n }\n }\n }\n /** Moves the focus inside the focus trap. */\n _trapFocus() {\n // If we were to attempt to focus immediately, then the content of the dialog would not yet be\n // ready in instances where change detection has to run first. To deal with this, we simply\n // wait for the microtask queue to be empty.\n if (this._config.autoFocus) {\n this._focusTrap.focusInitialElementWhenReady();\n }\n else if (!this._containsFocus()) {\n // Otherwise ensure that focus is on the dialog container. It's possible that a different\n // component tried to move focus while the open animation was running. See:\n // https://github.com/angular/components/issues/16215. Note that we only want to do this\n // if the focus isn't inside the dialog already, because it's possible that the consumer\n // turned off `autoFocus` in order to move focus themselves.\n this._elementRef.nativeElement.focus();\n }\n }\n /** Restores focus to the element that was focused before the dialog opened. */\n _restoreFocus() {\n const previousElement = this._elementFocusedBeforeDialogWasOpened;\n // We need the extra check, because IE can set the `activeElement` to null in some cases.\n if (this._config.restoreFocus && previousElement &&\n typeof previousElement.focus === 'function') {\n const activeElement = this._getActiveElement();\n const element = this._elementRef.nativeElement;\n // Make sure that focus is still inside the dialog or is on the body (usually because a\n // non-focusable element like the backdrop was clicked) before moving it. It's possible that\n // the consumer moved it themselves before the animation was done, in which case we shouldn't\n // do anything.\n if (!activeElement || activeElement === this._document.body || activeElement === element ||\n element.contains(activeElement)) {\n if (this._focusMonitor) {\n this._focusMonitor.focusVia(previousElement, this._closeInteractionType);\n this._closeInteractionType = null;\n }\n else {\n previousElement.focus();\n }\n }\n }\n if (this._focusTrap) {\n this._focusTrap.destroy();\n }\n }\n /** Sets up the focus trap. */\n _setupFocusTrap() {\n this._focusTrap = this._focusTrapFactory.create(this._elementRef.nativeElement);\n }\n /** Captures the element that was focused before the dialog was opened. */\n _capturePreviouslyFocusedElement() {\n if (this._document) {\n this._elementFocusedBeforeDialogWasOpened = this._getActiveElement();\n }\n }\n /** Focuses the dialog container. */\n _focusDialogContainer() {\n // Note that there is no focus method when rendering on the server.\n if (this._elementRef.nativeElement.focus) {\n this._elementRef.nativeElement.focus();\n }\n }\n /** Returns whether focus is inside the dialog. */\n _containsFocus() {\n const element = this._elementRef.nativeElement;\n const activeElement = this._getActiveElement();\n return element === activeElement || element.contains(activeElement);\n }\n /** Gets the currently-focused element on the page. */\n _getActiveElement() {\n var _a;\n // If the `activeElement` is inside a shadow root, `document.activeElement` will\n // point to the shadow root so we have to descend into it ourselves.\n const activeElement = this._document.activeElement;\n return ((_a = activeElement === null || activeElement === void 0 ? void 0 : activeElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement) || activeElement;\n }\n}\n_MatDialogContainerBase.ɵfac = function _MatDialogContainerBase_Factory(t) { return new (t || _MatDialogContainerBase)(ɵngcc0.ɵɵdirectiveInject(ɵngcc0.ElementRef), ɵngcc0.ɵɵdirectiveInject(ɵngcc1.FocusTrapFactory), ɵngcc0.ɵɵdirectiveInject(ɵngcc0.ChangeDetectorRef), ɵngcc0.ɵɵdirectiveInject(DOCUMENT, 8), ɵngcc0.ɵɵdirectiveInject(MatDialogConfig), ɵngcc0.ɵɵdirectiveInject(ɵngcc1.FocusMonitor)); };\n_MatDialogContainerBase.ɵdir = /*@__PURE__*/ ɵngcc0.ɵɵdefineDirective({ type: _MatDialogContainerBase, viewQuery: function _MatDialogContainerBase_Query(rf, ctx) { if (rf & 1) {\n ɵngcc0.ɵɵviewQuery(CdkPortalOutlet, 7);\n } if (rf & 2) {\n let _t;\n ɵngcc0.ɵɵqueryRefresh(_t = ɵngcc0.ɵɵloadQuery()) && (ctx._portalOutlet = _t.first);\n } }, features: [ɵngcc0.ɵɵInheritDefinitionFeature] });\n_MatDialogContainerBase.ctorParameters = () => [\n { type: ElementRef },\n { type: FocusTrapFactory },\n { type: ChangeDetectorRef },\n { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [DOCUMENT,] }] },\n { type: MatDialogConfig },\n { type: FocusMonitor }\n];\n_MatDialogContainerBase.propDecorators = {\n _portalOutlet: [{ type: ViewChild, args: [CdkPortalOutlet, { static: true },] }]\n};\n(function () { (typeof ngDevMode === \"undefined\" || ngDevMode) && ɵngcc0.ɵsetClassMetadata(_MatDialogContainerBase, [{\n type: Directive\n }], function () { return [{ type: ɵngcc0.ElementRef }, { type: ɵngcc1.FocusTrapFactory }, { type: ɵngcc0.ChangeDetectorRef }, { type: undefined, decorators: [{\n type: Optional\n }, {\n type: Inject,\n args: [DOCUMENT]\n }] }, { type: MatDialogConfig }, { type: ɵngcc1.FocusMonitor }]; }, { _portalOutlet: [{\n type: ViewChild,\n args: [CdkPortalOutlet, { static: true }]\n }] }); })();\n/**\n * Internal component that wraps user-provided dialog content.\n * Animation is based on https://material.io/guidelines/motion/choreography.html.\n * @docs-private\n */\nclass MatDialogContainer extends _MatDialogContainerBase {\n constructor() {\n super(...arguments);\n /** State of the dialog animation. */\n this._state = 'enter';\n }\n /** Callback, invoked whenever an animation on the host completes. */\n _onAnimationDone({ toState, totalTime }) {\n if (toState === 'enter') {\n this._trapFocus();\n this._animationStateChanged.next({ state: 'opened', totalTime });\n }\n else if (toState === 'exit') {\n this._restoreFocus();\n this._animationStateChanged.next({ state: 'closed', totalTime });\n }\n }\n /** Callback, invoked when an animation on the host starts. */\n _onAnimationStart({ toState, totalTime }) {\n if (toState === 'enter') {\n this._animationStateChanged.next({ state: 'opening', totalTime });\n }\n else if (toState === 'exit' || toState === 'void') {\n this._animationStateChanged.next({ state: 'closing', totalTime });\n }\n }\n /** Starts the dialog exit animation. */\n _startExitAnimation() {\n this._state = 'exit';\n // Mark the container for check so it can react if the\n // view container is using OnPush change detection.\n this._changeDetectorRef.markForCheck();\n }\n}\nMatDialogContainer.ɵfac = /*@__PURE__*/ function () { let ɵMatDialogContainer_BaseFactory; return function MatDialogContainer_Factory(t) { return (ɵMatDialogContainer_BaseFactory || (ɵMatDialogContainer_BaseFactory = ɵngcc0.ɵɵgetInheritedFactory(MatDialogContainer)))(t || MatDialogContainer); }; }();\nMatDialogContainer.ɵcmp = /*@__PURE__*/ ɵngcc0.ɵɵdefineComponent({ type: MatDialogContainer, selectors: [[\"mat-dialog-container\"]], hostAttrs: [\"tabindex\", \"-1\", \"aria-modal\", \"true\", 1, \"mat-dialog-container\"], hostVars: 6, hostBindings: function MatDialogContainer_HostBindings(rf, ctx) { if (rf & 1) {\n ɵngcc0.ɵɵsyntheticHostListener(\"@dialogContainer.start\", function MatDialogContainer_animation_dialogContainer_start_HostBindingHandler($event) { return ctx._onAnimationStart($event); })(\"@dialogContainer.done\", function MatDialogContainer_animation_dialogContainer_done_HostBindingHandler($event) { return ctx._onAnimationDone($event); });\n } if (rf & 2) {\n ɵngcc0.ɵɵhostProperty(\"id\", ctx._id);\n ɵngcc0.ɵɵattribute(\"role\", ctx._config.role)(\"aria-labelledby\", ctx._config.ariaLabel ? null : ctx._ariaLabelledBy)(\"aria-label\", ctx._config.ariaLabel)(\"aria-describedby\", ctx._config.ariaDescribedBy || null);\n ɵngcc0.ɵɵsyntheticHostProperty(\"@dialogContainer\", ctx._state);\n } }, features: [ɵngcc0.ɵɵInheritDefinitionFeature], decls: 1, vars: 0, consts: [[\"cdkPortalOutlet\", \"\"]], template: function MatDialogContainer_Template(rf, ctx) { if (rf & 1) {\n ɵngcc0.ɵɵtemplate(0, MatDialogContainer_ng_template_0_Template, 0, 0, \"ng-template\", 0);\n } }, dependencies: [ɵngcc2.CdkPortalOutlet], styles: [\".mat-dialog-container{display:block;padding:24px;border-radius:4px;box-sizing:border-box;overflow:auto;outline:0;width:100%;height:100%;min-height:inherit;max-height:inherit}.cdk-high-contrast-active .mat-dialog-container{outline:solid 1px}.mat-dialog-content{display:block;margin:0 -24px;padding:0 24px;max-height:65vh;overflow:auto;-webkit-overflow-scrolling:touch}.mat-dialog-title{margin:0 0 20px;display:block}.mat-dialog-actions{padding:8px 0;display:flex;flex-wrap:wrap;min-height:52px;align-items:center;box-sizing:content-box;margin-bottom:-24px}.mat-dialog-actions[align=end]{justify-content:flex-end}.mat-dialog-actions[align=center]{justify-content:center}.mat-dialog-actions .mat-button-base+.mat-button-base,.mat-dialog-actions .mat-mdc-button-base+.mat-mdc-button-base{margin-left:8px}[dir=rtl] .mat-dialog-actions .mat-button-base+.mat-button-base,[dir=rtl] .mat-dialog-actions .mat-mdc-button-base+.mat-mdc-button-base{margin-left:0;margin-right:8px}\\n\"], encapsulation: 2, data: { animation: [matDialogAnimations.dialogContainer] } });\n(function () { (typeof ngDevMode === \"undefined\" || ngDevMode) && ɵngcc0.ɵsetClassMetadata(MatDialogContainer, [{\n type: Component,\n args: [{ selector: 'mat-dialog-container', template: \"\\n\", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default, animations: [matDialogAnimations.dialogContainer], host: {\n 'class': 'mat-dialog-container',\n 'tabindex': '-1',\n 'aria-modal': 'true',\n '[id]': '_id',\n '[attr.role]': '_config.role',\n '[attr.aria-labelledby]': '_config.ariaLabel ? null : _ariaLabelledBy',\n '[attr.aria-label]': '_config.ariaLabel',\n '[attr.aria-describedby]': '_config.ariaDescribedBy || null',\n '[@dialogContainer]': '_state',\n '(@dialogContainer.start)': '_onAnimationStart($event)',\n '(@dialogContainer.done)': '_onAnimationDone($event)'\n }, styles: [\".mat-dialog-container{display:block;padding:24px;border-radius:4px;box-sizing:border-box;overflow:auto;outline:0;width:100%;height:100%;min-height:inherit;max-height:inherit}.cdk-high-contrast-active .mat-dialog-container{outline:solid 1px}.mat-dialog-content{display:block;margin:0 -24px;padding:0 24px;max-height:65vh;overflow:auto;-webkit-overflow-scrolling:touch}.mat-dialog-title{margin:0 0 20px;display:block}.mat-dialog-actions{padding:8px 0;display:flex;flex-wrap:wrap;min-height:52px;align-items:center;box-sizing:content-box;margin-bottom:-24px}.mat-dialog-actions[align=end]{justify-content:flex-end}.mat-dialog-actions[align=center]{justify-content:center}.mat-dialog-actions .mat-button-base+.mat-button-base,.mat-dialog-actions .mat-mdc-button-base+.mat-mdc-button-base{margin-left:8px}[dir=rtl] .mat-dialog-actions .mat-button-base+.mat-button-base,[dir=rtl] .mat-dialog-actions .mat-mdc-button-base+.mat-mdc-button-base{margin-left:0;margin-right:8px}\\n\"] }]\n }], null, null); })();\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(jelbourn): resizing\n// Counter for unique dialog ids.\nlet uniqueId = 0;\n/**\n * Reference to a dialog opened via the MatDialog service.\n */\nclass MatDialogRef {\n constructor(_overlayRef, _containerInstance, id = `mat-dialog-${uniqueId++}`) {\n this._overlayRef = _overlayRef;\n this._containerInstance = _containerInstance;\n this.id = id;\n /** Whether the user is allowed to close the dialog. */\n this.disableClose = this._containerInstance._config.disableClose;\n /** Subject for notifying the user that the dialog has finished opening. */\n this._afterOpened = new Subject();\n /** Subject for notifying the user that the dialog has finished closing. */\n this._afterClosed = new Subject();\n /** Subject for notifying the user that the dialog has started closing. */\n this._beforeClosed = new Subject();\n /** Current state of the dialog. */\n this._state = 0 /* OPEN */;\n // Pass the id along to the container.\n _containerInstance._id = id;\n // Emit when opening animation completes\n _containerInstance._animationStateChanged.pipe(filter(event => event.state === 'opened'), take(1))\n .subscribe(() => {\n this._afterOpened.next();\n this._afterOpened.complete();\n });\n // Dispose overlay when closing animation is complete\n _containerInstance._animationStateChanged.pipe(filter(event => event.state === 'closed'), take(1)).subscribe(() => {\n clearTimeout(this._closeFallbackTimeout);\n this._finishDialogClose();\n });\n _overlayRef.detachments().subscribe(() => {\n this._beforeClosed.next(this._result);\n this._beforeClosed.complete();\n this._afterClosed.next(this._result);\n this._afterClosed.complete();\n this.componentInstance = null;\n this._overlayRef.dispose();\n });\n _overlayRef.keydownEvents()\n .pipe(filter(event => {\n return event.keyCode === ESCAPE && !this.disableClose && !hasModifierKey(event);\n }))\n .subscribe(event => {\n event.preventDefault();\n _closeDialogVia(this, 'keyboard');\n });\n _overlayRef.backdropClick().subscribe(() => {\n if (this.disableClose) {\n this._containerInstance._recaptureFocus();\n }\n else {\n _closeDialogVia(this, 'mouse');\n }\n });\n }\n /**\n * Close the dialog.\n * @param dialogResult Optional result to return to the dialog opener.\n */\n close(dialogResult) {\n this._result = dialogResult;\n // Transition the backdrop in parallel to the dialog.\n this._containerInstance._animationStateChanged.pipe(filter(event => event.state === 'closing'), take(1))\n .subscribe(event => {\n this._beforeClosed.next(dialogResult);\n this._beforeClosed.complete();\n this._overlayRef.detachBackdrop();\n // The logic that disposes of the overlay depends on the exit animation completing, however\n // it isn't guaranteed if the parent view is destroyed while it's running. Add a fallback\n // timeout which will clean everything up if the animation hasn't fired within the specified\n // amount of time plus 100ms. We don't need to run this outside the NgZone, because for the\n // vast majority of cases the timeout will have been cleared before it has the chance to fire.\n this._closeFallbackTimeout = setTimeout(() => this._finishDialogClose(), event.totalTime + 100);\n });\n this._state = 1 /* CLOSING */;\n this._containerInstance._startExitAnimation();\n }\n /**\n * Gets an observable that is notified when the dialog is finished opening.\n */\n afterOpened() {\n return this._afterOpened;\n }\n /**\n * Gets an observable that is notified when the dialog is finished closing.\n */\n afterClosed() {\n return this._afterClosed;\n }\n /**\n * Gets an observable that is notified when the dialog has started closing.\n */\n beforeClosed() {\n return this._beforeClosed;\n }\n /**\n * Gets an observable that emits when the overlay's backdrop has been clicked.\n */\n backdropClick() {\n return this._overlayRef.backdropClick();\n }\n /**\n * Gets an observable that emits when keydown events are targeted on the overlay.\n */\n keydownEvents() {\n return this._overlayRef.keydownEvents();\n }\n /**\n * Updates the dialog's position.\n * @param position New dialog position.\n */\n updatePosition(position) {\n let strategy = this._getPositionStrategy();\n if (position && (position.left || position.right)) {\n position.left ? strategy.left(position.left) : strategy.right(position.right);\n }\n else {\n strategy.centerHorizontally();\n }\n if (position && (position.top || position.bottom)) {\n position.top ? strategy.top(position.top) : strategy.bottom(position.bottom);\n }\n else {\n strategy.centerVertically();\n }\n this._overlayRef.updatePosition();\n return this;\n }\n /**\n * Updates the dialog's width and height.\n * @param width New width of the dialog.\n * @param height New height of the dialog.\n */\n updateSize(width = '', height = '') {\n this._overlayRef.updateSize({ width, height });\n this._overlayRef.updatePosition();\n return this;\n }\n /** Add a CSS class or an array of classes to the overlay pane. */\n addPanelClass(classes) {\n this._overlayRef.addPanelClass(classes);\n return this;\n }\n /** Remove a CSS class or an array of classes from the overlay pane. */\n removePanelClass(classes) {\n this._overlayRef.removePanelClass(classes);\n return this;\n }\n /** Gets the current state of the dialog's lifecycle. */\n getState() {\n return this._state;\n }\n /**\n * Finishes the dialog close by updating the state of the dialog\n * and disposing the overlay.\n */\n _finishDialogClose() {\n this._state = 2 /* CLOSED */;\n this._overlayRef.dispose();\n }\n /** Fetches the position strategy object from the overlay ref. */\n _getPositionStrategy() {\n return this._overlayRef.getConfig().positionStrategy;\n }\n}\n/**\n * Closes the dialog with the specified interaction type. This is currently not part of\n * `MatDialogRef` as that would conflict with custom dialog ref mocks provided in tests.\n * More details. See: https://github.com/angular/components/pull/9257#issuecomment-651342226.\n */\n// TODO: TODO: Move this back into `MatDialogRef` when we provide an official mock dialog ref.\nfunction _closeDialogVia(ref, interactionType, result) {\n // Some mock dialog ref instances in tests do not have the `_containerInstance` property.\n // For those, we keep the behavior as is and do not deal with the interaction type.\n if (ref._containerInstance !== undefined) {\n ref._containerInstance._closeInteractionType = interactionType;\n }\n return ref.close(result);\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 that can be used to access the data that was passed in to a dialog. */\nconst MAT_DIALOG_DATA = new InjectionToken('MatDialogData');\n/** Injection token that can be used to specify default dialog options. */\nconst MAT_DIALOG_DEFAULT_OPTIONS = new InjectionToken('mat-dialog-default-options');\n/** Injection token that determines the scroll handling while the dialog is open. */\nconst MAT_DIALOG_SCROLL_STRATEGY = new InjectionToken('mat-dialog-scroll-strategy');\n/** @docs-private */\nfunction MAT_DIALOG_SCROLL_STRATEGY_FACTORY(overlay) {\n return () => overlay.scrollStrategies.block();\n}\n/** @docs-private */\nfunction MAT_DIALOG_SCROLL_STRATEGY_PROVIDER_FACTORY(overlay) {\n return () => overlay.scrollStrategies.block();\n}\n/** @docs-private */\nconst MAT_DIALOG_SCROLL_STRATEGY_PROVIDER = {\n provide: MAT_DIALOG_SCROLL_STRATEGY,\n deps: [Overlay],\n useFactory: MAT_DIALOG_SCROLL_STRATEGY_PROVIDER_FACTORY,\n};\n/**\n * Base class for dialog services. The base dialog service allows\n * for arbitrary dialog refs and dialog container components.\n */\nclass _MatDialogBase {\n constructor(_overlay, _injector, _defaultOptions, _parentDialog, _overlayContainer, scrollStrategy, _dialogRefConstructor, _dialogContainerType, _dialogDataToken) {\n this._overlay = _overlay;\n this._injector = _injector;\n this._defaultOptions = _defaultOptions;\n this._parentDialog = _parentDialog;\n this._overlayContainer = _overlayContainer;\n this._dialogRefConstructor = _dialogRefConstructor;\n this._dialogContainerType = _dialogContainerType;\n this._dialogDataToken = _dialogDataToken;\n this._openDialogsAtThisLevel = [];\n this._afterAllClosedAtThisLevel = new Subject();\n this._afterOpenedAtThisLevel = new Subject();\n this._ariaHiddenElements = new Map();\n // TODO (jelbourn): tighten the typing right-hand side of this expression.\n /**\n * Stream that emits when all open dialog have finished closing.\n * Will emit on subscribe if there are no open dialogs to begin with.\n */\n this.afterAllClosed = defer(() => this.openDialogs.length ?\n this._getAfterAllClosed() :\n this._getAfterAllClosed().pipe(startWith(undefined)));\n this._scrollStrategy = scrollStrategy;\n }\n /** Keeps track of the currently-open dialogs. */\n get openDialogs() {\n return this._parentDialog ? this._parentDialog.openDialogs : this._openDialogsAtThisLevel;\n }\n /** Stream that emits when a dialog has been opened. */\n get afterOpened() {\n return this._parentDialog ? this._parentDialog.afterOpened : this._afterOpenedAtThisLevel;\n }\n _getAfterAllClosed() {\n const parent = this._parentDialog;\n return parent ? parent._getAfterAllClosed() : this._afterAllClosedAtThisLevel;\n }\n open(componentOrTemplateRef, config) {\n config = _applyConfigDefaults(config, this._defaultOptions || new MatDialogConfig());\n if (config.id && this.getDialogById(config.id) &&\n (typeof ngDevMode === 'undefined' || ngDevMode)) {\n throw Error(`Dialog with id \"${config.id}\" exists already. The dialog id must be unique.`);\n }\n const overlayRef = this._createOverlay(config);\n const dialogContainer = this._attachDialogContainer(overlayRef, config);\n const dialogRef = this._attachDialogContent(componentOrTemplateRef, dialogContainer, overlayRef, config);\n // If this is the first dialog that we're opening, hide all the non-overlay content.\n if (!this.openDialogs.length) {\n this._hideNonDialogContentFromAssistiveTechnology();\n }\n this.openDialogs.push(dialogRef);\n dialogRef.afterClosed().subscribe(() => this._removeOpenDialog(dialogRef));\n this.afterOpened.next(dialogRef);\n // Notify the dialog container that the content has been attached.\n dialogContainer._initializeWithAttachedContent();\n return dialogRef;\n }\n /**\n * Closes all of the currently-open dialogs.\n */\n closeAll() {\n this._closeDialogs(this.openDialogs);\n }\n /**\n * Finds an open dialog by its id.\n * @param id ID to use when looking up the dialog.\n */\n getDialogById(id) {\n return this.openDialogs.find(dialog => dialog.id === id);\n }\n ngOnDestroy() {\n // Only close the dialogs at this level on destroy\n // since the parent service may still be active.\n this._closeDialogs(this._openDialogsAtThisLevel);\n this._afterAllClosedAtThisLevel.complete();\n this._afterOpenedAtThisLevel.complete();\n }\n /**\n * Creates the overlay into which the dialog will be loaded.\n * @param config The dialog configuration.\n * @returns A promise resolving to the OverlayRef for the created overlay.\n */\n _createOverlay(config) {\n const overlayConfig = this._getOverlayConfig(config);\n return this._overlay.create(overlayConfig);\n }\n /**\n * Creates an overlay config from a dialog config.\n * @param dialogConfig The dialog configuration.\n * @returns The overlay configuration.\n */\n _getOverlayConfig(dialogConfig) {\n const state = new OverlayConfig({\n positionStrategy: this._overlay.position().global(),\n scrollStrategy: dialogConfig.scrollStrategy || this._scrollStrategy(),\n panelClass: dialogConfig.panelClass,\n hasBackdrop: dialogConfig.hasBackdrop,\n direction: dialogConfig.direction,\n minWidth: dialogConfig.minWidth,\n minHeight: dialogConfig.minHeight,\n maxWidth: dialogConfig.maxWidth,\n maxHeight: dialogConfig.maxHeight,\n disposeOnNavigation: dialogConfig.closeOnNavigation\n });\n if (dialogConfig.backdropClass) {\n state.backdropClass = dialogConfig.backdropClass;\n }\n return state;\n }\n /**\n * Attaches a dialog container to a dialog's already-created overlay.\n * @param overlay Reference to the dialog's underlying overlay.\n * @param config The dialog configuration.\n * @returns A promise resolving to a ComponentRef for the attached container.\n */\n _attachDialogContainer(overlay, config) {\n const userInjector = config && config.viewContainerRef && config.viewContainerRef.injector;\n const injector = Injector.create({\n parent: userInjector || this._injector,\n providers: [{ provide: MatDialogConfig, useValue: config }]\n });\n const containerPortal = new ComponentPortal(this._dialogContainerType, config.viewContainerRef, injector, config.componentFactoryResolver);\n const containerRef = overlay.attach(containerPortal);\n return containerRef.instance;\n }\n /**\n * Attaches the user-provided component to the already-created dialog container.\n * @param componentOrTemplateRef The type of component being loaded into the dialog,\n * or a TemplateRef to instantiate as the content.\n * @param dialogContainer Reference to the wrapping dialog container.\n * @param overlayRef Reference to the overlay in which the dialog resides.\n * @param config The dialog configuration.\n * @returns A promise resolving to the MatDialogRef that should be returned to the user.\n */\n _attachDialogContent(componentOrTemplateRef, dialogContainer, overlayRef, config) {\n // Create a reference to the dialog we're creating in order to give the user a handle\n // to modify and close it.\n const dialogRef = new this._dialogRefConstructor(overlayRef, dialogContainer, config.id);\n if (componentOrTemplateRef instanceof TemplateRef) {\n dialogContainer.attachTemplatePortal(new TemplatePortal(componentOrTemplateRef, null, { $implicit: config.data, dialogRef }));\n }\n else {\n const injector = this._createInjector(config, dialogRef, dialogContainer);\n const contentRef = dialogContainer.attachComponentPortal(new ComponentPortal(componentOrTemplateRef, config.viewContainerRef, injector));\n dialogRef.componentInstance = contentRef.instance;\n }\n dialogRef\n .updateSize(config.width, config.height)\n .updatePosition(config.position);\n return dialogRef;\n }\n /**\n * Creates a custom injector to be used inside the dialog. This allows a component loaded inside\n * of a dialog to close itself and, optionally, to return a value.\n * @param config Config object that is used to construct the dialog.\n * @param dialogRef Reference to the dialog.\n * @param dialogContainer Dialog container element that wraps all of the contents.\n * @returns The custom injector that can be used inside the dialog.\n */\n _createInjector(config, dialogRef, dialogContainer) {\n const userInjector = config && config.viewContainerRef && config.viewContainerRef.injector;\n // The dialog container should be provided as the dialog container and the dialog's\n // content are created out of the same `ViewContainerRef` and as such, are siblings\n // for injector purposes. To allow the hierarchy that is expected, the dialog\n // container is explicitly provided in the injector.\n const providers = [\n { provide: this._dialogContainerType, useValue: dialogContainer },\n { provide: this._dialogDataToken, useValue: config.data },\n { provide: this._dialogRefConstructor, useValue: dialogRef }\n ];\n if (config.direction &&\n (!userInjector || !userInjector.get(Directionality, null))) {\n providers.push({\n provide: Directionality,\n useValue: { value: config.direction, change: of() }\n });\n }\n return Injector.create({ parent: userInjector || this._injector, providers });\n }\n /**\n * Removes a dialog from the array of open dialogs.\n * @param dialogRef Dialog to be removed.\n */\n _removeOpenDialog(dialogRef) {\n const index = this.openDialogs.indexOf(dialogRef);\n if (index > -1) {\n this.openDialogs.splice(index, 1);\n // If all the dialogs were closed, remove/restore the `aria-hidden`\n // to a the siblings and emit to the `afterAllClosed` stream.\n if (!this.openDialogs.length) {\n this._ariaHiddenElements.forEach((previousValue, element) => {\n if (previousValue) {\n element.setAttribute('aria-hidden', previousValue);\n }\n else {\n element.removeAttribute('aria-hidden');\n }\n });\n this._ariaHiddenElements.clear();\n this._getAfterAllClosed().next();\n }\n }\n }\n /**\n * Hides all of the content that isn't an overlay from assistive technology.\n */\n _hideNonDialogContentFromAssistiveTechnology() {\n const overlayContainer = this._overlayContainer.getContainerElement();\n // Ensure that the overlay container is attached to the DOM.\n if (overlayContainer.parentElement) {\n const siblings = overlayContainer.parentElement.children;\n for (let i = siblings.length - 1; i > -1; i--) {\n let sibling = siblings[i];\n if (sibling !== overlayContainer &&\n sibling.nodeName !== 'SCRIPT' &&\n sibling.nodeName !== 'STYLE' &&\n !sibling.hasAttribute('aria-live')) {\n this._ariaHiddenElements.set(sibling, sibling.getAttribute('aria-hidden'));\n sibling.setAttribute('aria-hidden', 'true');\n }\n }\n }\n }\n /** Closes all of the dialogs in an array. */\n _closeDialogs(dialogs) {\n let i = dialogs.length;\n while (i--) {\n // The `_openDialogs` property isn't updated after close until the rxjs subscription\n // runs on the next microtask, in addition to modifying the array as we're going\n // through it. We loop through all of them and call close without assuming that\n // they'll be removed from the list instantaneously.\n dialogs[i].close();\n }\n }\n}\n_MatDialogBase.ɵfac = function _MatDialogBase_Factory(t) { return new (t || _MatDialogBase)(ɵngcc0.ɵɵdirectiveInject(ɵngcc3.Overlay), ɵngcc0.ɵɵdirectiveInject(ɵngcc0.Injector), ɵngcc0.ɵɵdirectiveInject(undefined), ɵngcc0.ɵɵdirectiveInject(undefined), ɵngcc0.ɵɵdirectiveInject(ɵngcc3.OverlayContainer), ɵngcc0.ɵɵdirectiveInject(undefined), ɵngcc0.ɵɵdirectiveInject(ɵngcc0.Type), ɵngcc0.ɵɵdirectiveInject(ɵngcc0.Type), ɵngcc0.ɵɵdirectiveInject(ɵngcc0.InjectionToken)); };\n_MatDialogBase.ɵdir = /*@__PURE__*/ ɵngcc0.ɵɵdefineDirective({ type: _MatDialogBase });\n_MatDialogBase.ctorParameters = () => [\n { type: Overlay },\n { type: Injector },\n { type: undefined },\n { type: undefined },\n { type: OverlayContainer },\n { type: undefined },\n { type: Type },\n { type: Type },\n { type: InjectionToken }\n];\n(function () { (typeof ngDevMode === \"undefined\" || ngDevMode) && ɵngcc0.ɵsetClassMetadata(_MatDialogBase, [{\n type: Directive\n }], function () { return [{ type: ɵngcc3.Overlay }, { type: ɵngcc0.Injector }, { type: undefined }, { type: undefined }, { type: ɵngcc3.OverlayContainer }, { type: undefined }, { type: ɵngcc0.Type }, { type: ɵngcc0.Type }, { type: ɵngcc0.InjectionToken }]; }, null); })();\n/**\n * Service to open Material Design modal dialogs.\n */\nclass MatDialog extends _MatDialogBase {\n constructor(overlay, injector, \n /**\n * @deprecated `_location` parameter to be removed.\n * @breaking-change 10.0.0\n */\n location, defaultOptions, scrollStrategy, parentDialog, overlayContainer) {\n super(overlay, injector, defaultOptions, parentDialog, overlayContainer, scrollStrategy, MatDialogRef, MatDialogContainer, MAT_DIALOG_DATA);\n }\n}\nMatDialog.ɵfac = function MatDialog_Factory(t) { return new (t || MatDialog)(ɵngcc0.ɵɵinject(ɵngcc3.Overlay), ɵngcc0.ɵɵinject(ɵngcc0.Injector), ɵngcc0.ɵɵinject(ɵngcc4.Location, 8), ɵngcc0.ɵɵinject(MAT_DIALOG_DEFAULT_OPTIONS, 8), ɵngcc0.ɵɵinject(MAT_DIALOG_SCROLL_STRATEGY), ɵngcc0.ɵɵinject(MatDialog, 12), ɵngcc0.ɵɵinject(ɵngcc3.OverlayContainer)); };\nMatDialog.ɵprov = /*@__PURE__*/ ɵngcc0.ɵɵdefineInjectable({ token: MatDialog, factory: MatDialog.ɵfac });\nMatDialog.ctorParameters = () => [\n { type: Overlay },\n { type: Injector },\n { type: Location, decorators: [{ type: Optional }] },\n { type: MatDialogConfig, decorators: [{ type: Optional }, { type: Inject, args: [MAT_DIALOG_DEFAULT_OPTIONS,] }] },\n { type: undefined, decorators: [{ type: Inject, args: [MAT_DIALOG_SCROLL_STRATEGY,] }] },\n { type: MatDialog, decorators: [{ type: Optional }, { type: SkipSelf }] },\n { type: OverlayContainer }\n];\n(function () { (typeof ngDevMode === \"undefined\" || ngDevMode) && ɵngcc0.ɵsetClassMetadata(MatDialog, [{\n type: Injectable\n }], function () { return [{ type: ɵngcc3.Overlay }, { type: ɵngcc0.Injector }, { type: ɵngcc4.Location, decorators: [{\n type: Optional\n }] }, { type: MatDialogConfig, decorators: [{\n type: Optional\n }, {\n type: Inject,\n args: [MAT_DIALOG_DEFAULT_OPTIONS]\n }] }, { type: undefined, decorators: [{\n type: Inject,\n args: [MAT_DIALOG_SCROLL_STRATEGY]\n }] }, { type: MatDialog, decorators: [{\n type: Optional\n }, {\n type: SkipSelf\n }] }, { type: ɵngcc3.OverlayContainer }]; }, null); })();\n/**\n * Applies default options to the dialog config.\n * @param config Config to be modified.\n * @param defaultOptions Default options provided.\n * @returns The new configuration object.\n */\nfunction _applyConfigDefaults(config, defaultOptions) {\n return Object.assign(Object.assign({}, defaultOptions), config);\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/** Counter used to generate unique IDs for dialog elements. */\nlet dialogElementUid = 0;\n/**\n * Button that will close the current dialog.\n */\nclass MatDialogClose {\n constructor(\n // The dialog title directive is always used in combination with a `MatDialogRef`.\n // tslint:disable-next-line: lightweight-tokens\n dialogRef, _elementRef, _dialog) {\n this.dialogRef = dialogRef;\n this._elementRef = _elementRef;\n this._dialog = _dialog;\n /** Default to \"button\" to prevents accidental form submits. */\n this.type = 'button';\n }\n ngOnInit() {\n if (!this.dialogRef) {\n // When this directive is included in a dialog via TemplateRef (rather than being\n // in a Component), the DialogRef isn't available via injection because embedded\n // views cannot be given a custom injector. Instead, we look up the DialogRef by\n // ID. This must occur in `onInit`, as the ID binding for the dialog container won't\n // be resolved at constructor time.\n this.dialogRef = getClosestDialog(this._elementRef, this._dialog.openDialogs);\n }\n }\n ngOnChanges(changes) {\n const proxiedChange = changes['_matDialogClose'] || changes['_matDialogCloseResult'];\n if (proxiedChange) {\n this.dialogResult = proxiedChange.currentValue;\n }\n }\n _onButtonClick(event) {\n // Determinate the focus origin using the click event, because using the FocusMonitor will\n // result in incorrect origins. Most of the time, close buttons will be auto focused in the\n // dialog, and therefore clicking the button won't result in a focus change. This means that\n // the FocusMonitor won't detect any origin change, and will always output `program`.\n _closeDialogVia(this.dialogRef, event.screenX === 0 && event.screenY === 0 ? 'keyboard' : 'mouse', this.dialogResult);\n }\n}\nMatDialogClose.ɵfac = function MatDialogClose_Factory(t) { return new (t || MatDialogClose)(ɵngcc0.ɵɵdirectiveInject(MatDialogRef, 8), ɵngcc0.ɵɵdirectiveInject(ɵngcc0.ElementRef), ɵngcc0.ɵɵdirectiveInject(MatDialog)); };\nMatDialogClose.ɵdir = /*@__PURE__*/ ɵngcc0.ɵɵdefineDirective({ type: MatDialogClose, selectors: [[\"\", \"mat-dialog-close\", \"\"], [\"\", \"matDialogClose\", \"\"]], hostVars: 2, hostBindings: function MatDialogClose_HostBindings(rf, ctx) { if (rf & 1) {\n ɵngcc0.ɵɵlistener(\"click\", function MatDialogClose_click_HostBindingHandler($event) { return ctx._onButtonClick($event); });\n } if (rf & 2) {\n ɵngcc0.ɵɵattribute(\"aria-label\", ctx.ariaLabel || null)(\"type\", ctx.type);\n } }, inputs: { type: \"type\", dialogResult: [\"mat-dialog-close\", \"dialogResult\"], ariaLabel: [\"aria-label\", \"ariaLabel\"], _matDialogClose: [\"matDialogClose\", \"_matDialogClose\"] }, exportAs: [\"matDialogClose\"], features: [ɵngcc0.ɵɵNgOnChangesFeature] });\nMatDialogClose.ctorParameters = () => [\n { type: MatDialogRef, decorators: [{ type: Optional }] },\n { type: ElementRef },\n { type: MatDialog }\n];\nMatDialogClose.propDecorators = {\n ariaLabel: [{ type: Input, args: ['aria-label',] }],\n type: [{ type: Input }],\n dialogResult: [{ type: Input, args: ['mat-dialog-close',] }],\n _matDialogClose: [{ type: Input, args: ['matDialogClose',] }]\n};\n(function () { (typeof ngDevMode === \"undefined\" || ngDevMode) && ɵngcc0.ɵsetClassMetadata(MatDialogClose, [{\n type: Directive,\n args: [{\n selector: '[mat-dialog-close], [matDialogClose]',\n exportAs: 'matDialogClose',\n host: {\n '(click)': '_onButtonClick($event)',\n '[attr.aria-label]': 'ariaLabel || null',\n '[attr.type]': 'type'\n }\n }]\n }], function () { return [{ type: MatDialogRef, decorators: [{\n type: Optional\n }] }, { type: ɵngcc0.ElementRef }, { type: MatDialog }]; }, { type: [{\n type: Input\n }], dialogResult: [{\n type: Input,\n args: ['mat-dialog-close']\n }], ariaLabel: [{\n type: Input,\n args: ['aria-label']\n }], _matDialogClose: [{\n type: Input,\n args: ['matDialogClose']\n }] }); })();\n/**\n * Title of a dialog element. Stays fixed to the top of the dialog when scrolling.\n */\nclass MatDialogTitle {\n constructor(\n // The dialog title directive is always used in combination with a `MatDialogRef`.\n // tslint:disable-next-line: lightweight-tokens\n _dialogRef, _elementRef, _dialog) {\n this._dialogRef = _dialogRef;\n this._elementRef = _elementRef;\n this._dialog = _dialog;\n this.id = `mat-dialog-title-${dialogElementUid++}`;\n }\n ngOnInit() {\n if (!this._dialogRef) {\n this._dialogRef = getClosestDialog(this._elementRef, this._dialog.openDialogs);\n }\n if (this._dialogRef) {\n Promise.resolve().then(() => {\n const container = this._dialogRef._containerInstance;\n if (container && !container._ariaLabelledBy) {\n container._ariaLabelledBy = this.id;\n }\n });\n }\n }\n}\nMatDialogTitle.ɵfac = function MatDialogTitle_Factory(t) { return new (t || MatDialogTitle)(ɵngcc0.ɵɵdirectiveInject(MatDialogRef, 8), ɵngcc0.ɵɵdirectiveInject(ɵngcc0.ElementRef), ɵngcc0.ɵɵdirectiveInject(MatDialog)); };\nMatDialogTitle.ɵdir = /*@__PURE__*/ ɵngcc0.ɵɵdefineDirective({ type: MatDialogTitle, selectors: [[\"\", \"mat-dialog-title\", \"\"], [\"\", \"matDialogTitle\", \"\"]], hostAttrs: [1, \"mat-dialog-title\"], hostVars: 1, hostBindings: function MatDialogTitle_HostBindings(rf, ctx) { if (rf & 2) {\n ɵngcc0.ɵɵhostProperty(\"id\", ctx.id);\n } }, inputs: { id: \"id\" }, exportAs: [\"matDialogTitle\"] });\nMatDialogTitle.ctorParameters = () => [\n { type: MatDialogRef, decorators: [{ type: Optional }] },\n { type: ElementRef },\n { type: MatDialog }\n];\nMatDialogTitle.propDecorators = {\n id: [{ type: Input }]\n};\n(function () { (typeof ngDevMode === \"undefined\" || ngDevMode) && ɵngcc0.ɵsetClassMetadata(MatDialogTitle, [{\n type: Directive,\n args: [{\n selector: '[mat-dialog-title], [matDialogTitle]',\n exportAs: 'matDialogTitle',\n host: {\n 'class': 'mat-dialog-title',\n '[id]': 'id'\n }\n }]\n }], function () { return [{ type: MatDialogRef, decorators: [{\n type: Optional\n }] }, { type: ɵngcc0.ElementRef }, { type: MatDialog }]; }, { id: [{\n type: Input\n }] }); })();\n/**\n * Scrollable content container of a dialog.\n */\nclass MatDialogContent {\n}\nMatDialogContent.ɵfac = function MatDialogContent_Factory(t) { return new (t || MatDialogContent)(); };\nMatDialogContent.ɵdir = /*@__PURE__*/ ɵngcc0.ɵɵdefineDirective({ type: MatDialogContent, selectors: [[\"\", \"mat-dialog-content\", \"\"], [\"mat-dialog-content\"], [\"\", \"matDialogContent\", \"\"]], hostAttrs: [1, \"mat-dialog-content\"] });\n(function () { (typeof ngDevMode === \"undefined\" || ngDevMode) && ɵngcc0.ɵsetClassMetadata(MatDialogContent, [{\n type: Directive,\n args: [{\n selector: `[mat-dialog-content], mat-dialog-content, [matDialogContent]`,\n host: { 'class': 'mat-dialog-content' }\n }]\n }], null, null); })();\n/**\n * Container for the bottom action buttons in a dialog.\n * Stays fixed to the bottom when scrolling.\n */\nclass MatDialogActions {\n}\nMatDialogActions.ɵfac = function MatDialogActions_Factory(t) { return new (t || MatDialogActions)(); };\nMatDialogActions.ɵdir = /*@__PURE__*/ ɵngcc0.ɵɵdefineDirective({ type: MatDialogActions, selectors: [[\"\", \"mat-dialog-actions\", \"\"], [\"mat-dialog-actions\"], [\"\", \"matDialogActions\", \"\"]], hostAttrs: [1, \"mat-dialog-actions\"] });\n(function () { (typeof ngDevMode === \"undefined\" || ngDevMode) && ɵngcc0.ɵsetClassMetadata(MatDialogActions, [{\n type: Directive,\n args: [{\n selector: `[mat-dialog-actions], mat-dialog-actions, [matDialogActions]`,\n host: { 'class': 'mat-dialog-actions' }\n }]\n }], null, null); })();\n/**\n * Finds the closest MatDialogRef to an element by looking at the DOM.\n * @param element Element relative to which to look for a dialog.\n * @param openDialogs References to the currently-open dialogs.\n */\nfunction getClosestDialog(element, openDialogs) {\n let parent = element.nativeElement.parentElement;\n while (parent && !parent.classList.contains('mat-dialog-container')) {\n parent = parent.parentElement;\n }\n return parent ? openDialogs.find(dialog => dialog.id === parent.id) : null;\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 */\nclass MatDialogModule {\n}\nMatDialogModule.ɵfac = function MatDialogModule_Factory(t) { return new (t || MatDialogModule)(); };\nMatDialogModule.ɵmod = /*@__PURE__*/ ɵngcc0.ɵɵdefineNgModule({ type: MatDialogModule });\nMatDialogModule.ɵinj = /*@__PURE__*/ ɵngcc0.ɵɵdefineInjector({ providers: [\n MatDialog,\n MAT_DIALOG_SCROLL_STRATEGY_PROVIDER,\n ], imports: [OverlayModule,\n PortalModule,\n MatCommonModule, MatCommonModule] });\n(function () { (typeof ngDevMode === \"undefined\" || ngDevMode) && ɵngcc0.ɵsetClassMetadata(MatDialogModule, [{\n type: NgModule,\n args: [{\n imports: [\n OverlayModule,\n PortalModule,\n MatCommonModule,\n ],\n exports: [\n MatDialogContainer,\n MatDialogClose,\n MatDialogTitle,\n MatDialogContent,\n MatDialogActions,\n MatCommonModule,\n ],\n declarations: [\n MatDialogContainer,\n MatDialogClose,\n MatDialogTitle,\n MatDialogActions,\n MatDialogContent,\n ],\n providers: [\n MatDialog,\n MAT_DIALOG_SCROLL_STRATEGY_PROVIDER,\n ],\n entryComponents: [MatDialogContainer]\n }]\n }], null, null); })();\n(function () { (typeof ngJitMode === \"undefined\" || ngJitMode) && ɵngcc0.ɵɵsetNgModuleScope(MatDialogModule, { declarations: function () { return [MatDialogContainer, MatDialogClose, MatDialogTitle, MatDialogActions, MatDialogContent]; }, imports: function () { return [OverlayModule,\n PortalModule,\n MatCommonModule]; }, exports: function () { return [MatDialogContainer, MatDialogClose, MatDialogTitle, MatDialogContent, MatDialogActions, MatCommonModule]; } }); })();\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/**\n * Generated bundle index. Do not edit.\n */\n\nexport { MAT_DIALOG_DATA, MAT_DIALOG_DEFAULT_OPTIONS, MAT_DIALOG_SCROLL_STRATEGY, MAT_DIALOG_SCROLL_STRATEGY_FACTORY, MAT_DIALOG_SCROLL_STRATEGY_PROVIDER, MAT_DIALOG_SCROLL_STRATEGY_PROVIDER_FACTORY, MatDialog, MatDialogActions, MatDialogClose, MatDialogConfig, MatDialogContainer, MatDialogContent, MatDialogModule, MatDialogRef, MatDialogTitle, _MatDialogBase, _MatDialogContainerBase, _closeDialogVia, matDialogAnimations, throwMatDialogContentAlreadyAttachedError };\n\n","import { Component, ViewEncapsulation, ChangeDetectionStrategy, Input, NgModule } from '@angular/core';\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { MatCommonModule } from '@angular/material/core';\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 */\nimport * as ɵngcc0 from '@angular/core';\nclass MatDivider {\n constructor() {\n this._vertical = false;\n this._inset = false;\n }\n /** Whether the divider is vertically aligned. */\n get vertical() { return this._vertical; }\n set vertical(value) { this._vertical = coerceBooleanProperty(value); }\n /** Whether the divider is an inset divider. */\n get inset() { return this._inset; }\n set inset(value) { this._inset = coerceBooleanProperty(value); }\n}\nMatDivider.ɵfac = function MatDivider_Factory(t) { return new (t || MatDivider)(); };\nMatDivider.ɵcmp = /*@__PURE__*/ ɵngcc0.ɵɵdefineComponent({ type: MatDivider, selectors: [[\"mat-divider\"]], hostAttrs: [\"role\", \"separator\", 1, \"mat-divider\"], hostVars: 7, hostBindings: function MatDivider_HostBindings(rf, ctx) { if (rf & 2) {\n ɵngcc0.ɵɵattribute(\"aria-orientation\", ctx.vertical ? \"vertical\" : \"horizontal\");\n ɵngcc0.ɵɵclassProp(\"mat-divider-vertical\", ctx.vertical)(\"mat-divider-horizontal\", !ctx.vertical)(\"mat-divider-inset\", ctx.inset);\n } }, inputs: { vertical: \"vertical\", inset: \"inset\" }, decls: 0, vars: 0, template: function MatDivider_Template(rf, ctx) { }, styles: [\".mat-divider{display:block;margin:0;border-top-width:1px;border-top-style:solid}.mat-divider.mat-divider-vertical{border-top:0;border-right-width:1px;border-right-style:solid}.mat-divider.mat-divider-inset{margin-left:80px}[dir=rtl] .mat-divider.mat-divider-inset{margin-left:auto;margin-right:80px}\\n\"], encapsulation: 2, changeDetection: 0 });\nMatDivider.propDecorators = {\n vertical: [{ type: Input }],\n inset: [{ type: Input }]\n};\n(function () { (typeof ngDevMode === \"undefined\" || ngDevMode) && ɵngcc0.ɵsetClassMetadata(MatDivider, [{\n type: Component,\n args: [{ selector: 'mat-divider', host: {\n 'role': 'separator',\n '[attr.aria-orientation]': 'vertical ? \"vertical\" : \"horizontal\"',\n '[class.mat-divider-vertical]': 'vertical',\n '[class.mat-divider-horizontal]': '!vertical',\n '[class.mat-divider-inset]': 'inset',\n 'class': 'mat-divider'\n }, template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [\".mat-divider{display:block;margin:0;border-top-width:1px;border-top-style:solid}.mat-divider.mat-divider-vertical{border-top:0;border-right-width:1px;border-right-style:solid}.mat-divider.mat-divider-inset{margin-left:80px}[dir=rtl] .mat-divider.mat-divider-inset{margin-left:auto;margin-right:80px}\\n\"] }]\n }], function () { return []; }, { vertical: [{\n type: Input\n }], inset: [{\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 */\nclass MatDividerModule {\n}\nMatDividerModule.ɵfac = function MatDividerModule_Factory(t) { return new (t || MatDividerModule)(); };\nMatDividerModule.ɵmod = /*@__PURE__*/ ɵngcc0.ɵɵdefineNgModule({ type: MatDividerModule });\nMatDividerModule.ɵinj = /*@__PURE__*/ ɵngcc0.ɵɵdefineInjector({ imports: [MatCommonModule, MatCommonModule] });\n(function () { (typeof ngDevMode === \"undefined\" || ngDevMode) && ɵngcc0.ɵsetClassMetadata(MatDividerModule, [{\n type: NgModule,\n args: [{\n imports: [MatCommonModule],\n exports: [MatDivider, MatCommonModule],\n declarations: [MatDivider]\n }]\n }], null, null); })();\n(function () { (typeof ngJitMode === \"undefined\" || ngJitMode) && ɵngcc0.ɵɵsetNgModuleScope(MatDividerModule, { declarations: function () { return [MatDivider]; }, imports: function () { return [MatCommonModule]; }, exports: function () { return [MatDivider, MatCommonModule]; } }); })();\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/**\n * Generated bundle index. Do not edit.\n */\n\nexport { MatDivider, MatDividerModule };\n\n","import { SecurityContext, ɵɵdefineInjectable, ɵɵinject, ErrorHandler, Injectable, Optional, Inject, SkipSelf, InjectionToken, inject, Component, ViewEncapsulation, ChangeDetectionStrategy, ElementRef, Attribute, Input, NgModule } from '@angular/core';\nimport { mixinColor, MatCommonModule } from '@angular/material/core';\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { DOCUMENT } from '@angular/common';\nimport { of, throwError, forkJoin, Subscription } from 'rxjs';\nimport { tap, map, catchError, finalize, share, take } from 'rxjs/operators';\nimport { HttpClient } from '@angular/common/http';\nimport { DomSanitizer } from '@angular/platform-browser';\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 * Returns an exception to be thrown in the case when attempting to\n * load an icon with a name that cannot be found.\n * @docs-private\n */\nimport * as ɵngcc0 from '@angular/core';\nimport * as ɵngcc1 from '@angular/common/http';\nimport * as ɵngcc2 from '@angular/platform-browser';\n\nconst _c0 = [\"*\"];\nfunction getMatIconNameNotFoundError(iconName) {\n return Error(`Unable to find icon with the name \"${iconName}\"`);\n}\n/**\n * Returns an exception to be thrown when the consumer attempts to use\n * `` without including @angular/common/http.\n * @docs-private\n */\nfunction getMatIconNoHttpProviderError() {\n return Error('Could not find HttpClient provider for use with Angular Material icons. ' +\n 'Please include the HttpClientModule from @angular/common/http in your ' +\n 'app imports.');\n}\n/**\n * Returns an exception to be thrown when a URL couldn't be sanitized.\n * @param url URL that was attempted to be sanitized.\n * @docs-private\n */\nfunction getMatIconFailedToSanitizeUrlError(url) {\n return Error(`The URL provided to MatIconRegistry was not trusted as a resource URL ` +\n `via Angular's DomSanitizer. Attempted URL was \"${url}\".`);\n}\n/**\n * Returns an exception to be thrown when a HTML string couldn't be sanitized.\n * @param literal HTML that was attempted to be sanitized.\n * @docs-private\n */\nfunction getMatIconFailedToSanitizeLiteralError(literal) {\n return Error(`The literal provided to MatIconRegistry was not trusted as safe HTML by ` +\n `Angular's DomSanitizer. Attempted literal was \"${literal}\".`);\n}\n/**\n * Configuration for an icon, including the URL and possibly the cached SVG element.\n * @docs-private\n */\nclass SvgIconConfig {\n constructor(url, svgText, options) {\n this.url = url;\n this.svgText = svgText;\n this.options = options;\n }\n}\n/**\n * Service to register and display icons used by the `` component.\n * - Registers icon URLs by namespace and name.\n * - Registers icon set URLs by namespace.\n * - Registers aliases for CSS classes, for use with icon fonts.\n * - Loads icons from URLs and extracts individual icons from icon sets.\n */\nclass MatIconRegistry {\n constructor(_httpClient, _sanitizer, document, _errorHandler) {\n this._httpClient = _httpClient;\n this._sanitizer = _sanitizer;\n this._errorHandler = _errorHandler;\n /**\n * URLs and cached SVG elements for individual icons. Keys are of the format \"[namespace]:[icon]\".\n */\n this._svgIconConfigs = new Map();\n /**\n * SvgIconConfig objects and cached SVG elements for icon sets, keyed by namespace.\n * Multiple icon sets can be registered under the same namespace.\n */\n this._iconSetConfigs = new Map();\n /** Cache for icons loaded by direct URLs. */\n this._cachedIconsByUrl = new Map();\n /** In-progress icon fetches. Used to coalesce multiple requests to the same URL. */\n this._inProgressUrlFetches = new Map();\n /** Map from font identifiers to their CSS class names. Used for icon fonts. */\n this._fontCssClassesByAlias = new Map();\n /** Registered icon resolver functions. */\n this._resolvers = [];\n /**\n * The CSS class to apply when an `` component has no icon name, url, or font specified.\n * The default 'material-icons' value assumes that the material icon font has been loaded as\n * described at http://google.github.io/material-design-icons/#icon-font-for-the-web\n */\n this._defaultFontSetClass = 'material-icons';\n this._document = document;\n }\n /**\n * Registers an icon by URL in the default namespace.\n * @param iconName Name under which the icon should be registered.\n * @param url\n */\n addSvgIcon(iconName, url, options) {\n return this.addSvgIconInNamespace('', iconName, url, options);\n }\n /**\n * Registers an icon using an HTML string in the default namespace.\n * @param iconName Name under which the icon should be registered.\n * @param literal SVG source of the icon.\n */\n addSvgIconLiteral(iconName, literal, options) {\n return this.addSvgIconLiteralInNamespace('', iconName, literal, options);\n }\n /**\n * Registers an icon by URL in the specified namespace.\n * @param namespace Namespace in which the icon should be registered.\n * @param iconName Name under which the icon should be registered.\n * @param url\n */\n addSvgIconInNamespace(namespace, iconName, url, options) {\n return this._addSvgIconConfig(namespace, iconName, new SvgIconConfig(url, null, options));\n }\n /**\n * Registers an icon resolver function with the registry. The function will be invoked with the\n * name and namespace of an icon when the registry tries to resolve the URL from which to fetch\n * the icon. The resolver is expected to return a `SafeResourceUrl` that points to the icon,\n * an object with the icon URL and icon options, or `null` if the icon is not supported. Resolvers\n * will be invoked in the order in which they have been registered.\n * @param resolver Resolver function to be registered.\n */\n addSvgIconResolver(resolver) {\n this._resolvers.push(resolver);\n return this;\n }\n /**\n * Registers an icon using an HTML string in the specified namespace.\n * @param namespace Namespace in which the icon should be registered.\n * @param iconName Name under which the icon should be registered.\n * @param literal SVG source of the icon.\n */\n addSvgIconLiteralInNamespace(namespace, iconName, literal, options) {\n const cleanLiteral = this._sanitizer.sanitize(SecurityContext.HTML, literal);\n // TODO: add an ngDevMode check\n if (!cleanLiteral) {\n throw getMatIconFailedToSanitizeLiteralError(literal);\n }\n return this._addSvgIconConfig(namespace, iconName, new SvgIconConfig('', cleanLiteral, options));\n }\n /**\n * Registers an icon set by URL in the default namespace.\n * @param url\n */\n addSvgIconSet(url, options) {\n return this.addSvgIconSetInNamespace('', url, options);\n }\n /**\n * Registers an icon set using an HTML string in the default namespace.\n * @param literal SVG source of the icon set.\n */\n addSvgIconSetLiteral(literal, options) {\n return this.addSvgIconSetLiteralInNamespace('', literal, options);\n }\n /**\n * Registers an icon set by URL in the specified namespace.\n * @param namespace Namespace in which to register the icon set.\n * @param url\n */\n addSvgIconSetInNamespace(namespace, url, options) {\n return this._addSvgIconSetConfig(namespace, new SvgIconConfig(url, null, options));\n }\n /**\n * Registers an icon set using an HTML string in the specified namespace.\n * @param namespace Namespace in which to register the icon set.\n * @param literal SVG source of the icon set.\n */\n addSvgIconSetLiteralInNamespace(namespace, literal, options) {\n const cleanLiteral = this._sanitizer.sanitize(SecurityContext.HTML, literal);\n if (!cleanLiteral) {\n throw getMatIconFailedToSanitizeLiteralError(literal);\n }\n return this._addSvgIconSetConfig(namespace, new SvgIconConfig('', cleanLiteral, options));\n }\n /**\n * Defines an alias for a CSS class name to be used for icon fonts. Creating an matIcon\n * component with the alias as the fontSet input will cause the class name to be applied\n * to the `` element.\n *\n * @param alias Alias for the font.\n * @param className Class name override to be used instead of the alias.\n */\n registerFontClassAlias(alias, className = alias) {\n this._fontCssClassesByAlias.set(alias, className);\n return this;\n }\n /**\n * Returns the CSS class name associated with the alias by a previous call to\n * registerFontClassAlias. If no CSS class has been associated, returns the alias unmodified.\n */\n classNameForFontAlias(alias) {\n return this._fontCssClassesByAlias.get(alias) || alias;\n }\n /**\n * Sets the CSS class name to be used for icon fonts when an `` component does not\n * have a fontSet input value, and is not loading an icon by name or URL.\n *\n * @param className\n */\n setDefaultFontSetClass(className) {\n this._defaultFontSetClass = className;\n return this;\n }\n /**\n * Returns the CSS class name to be used for icon fonts when an `` component does not\n * have a fontSet input value, and is not loading an icon by name or URL.\n */\n getDefaultFontSetClass() {\n return this._defaultFontSetClass;\n }\n /**\n * Returns an Observable that produces the icon (as an `