{"version":3,"sources":["node_modules/@angular/material/fesm2022/toolbar.mjs","node_modules/@angular/cdk/fesm2022/observers/private.mjs","node_modules/@angular/material/fesm2022/form-field.mjs","node_modules/@angular/cdk/fesm2022/text-field.mjs","node_modules/@angular/material/fesm2022/input.mjs","node_modules/@angular/material/fesm2022/datepicker.mjs","node_modules/@angular/material/fesm2022/select.mjs","node_modules/@angular/material/fesm2022/checkbox.mjs","node_modules/@angular/material/fesm2022/autocomplete.mjs","node_modules/@angular/material/fesm2022/sort.mjs","node_modules/@angular/cdk/fesm2022/table.mjs","node_modules/@angular/material/fesm2022/table.mjs","node_modules/@angular/material/fesm2022/radio.mjs","node_modules/@angular/material/fesm2022/snack-bar.mjs","src/app/shared/directives/arrow-key-navigator.directive.ts","src/app/shared/pipes/arrow-search-disable.pipe.ts","src/app/shared/directives/mat-autocomplete/mat-autocomplete-tab.directive.ts","src/app/shared/components/ag-grid/clickable-grid-header.component.ts","src/app/shared/components/ag-grid/clickable-grid-header.component.html","src/app/forms/shared/forms.service.ts","src/app/shared/directives/ctrl-key-listener.directive.ts","src/app/shared/directives/shortcut-listener.directive.ts","src/app/shared/directives/datepicker-helper.directive.ts","src/app/shared/services/theme.service.ts","src/app/shared/services/browser/document-ref.service.ts","src/app/shared/directives/focus.directive.ts","src/app/shared/directives/form-control-disable.directive.ts","src/app/shared/pipes/form-permission.pipe.ts","src/app/shared/dialogs/generic-table-dialog/generic-table-dialog.component.ts","src/app/shared/dialogs/generic-table-dialog/generic-table-dialog.component.html","src/app/shared/components/ag-grid/grid-row-checkbox.component.ts","src/app/shared/components/ag-grid/grid-row-checkbox.component.html","src/app/shared/pipes/job-edit-permission.pipe.ts","node_modules/@angular/material/fesm2022/progress-spinner.mjs","src/app/shared/mobile/directives/mobile-visibility.directive.ts","src/app/shared/directives/no-leading-space.directive.ts","src/app/shared/components/note.component.ts","src/app/shared/utilities/number.utility.ts","src/app/shared/directives/number-format.directive.ts","src/app/shared/directives/object-input-formatter.directive.ts","src/app/shared/directives/only-number.directive.ts","src/app/shared/directives/permissions-handler.directive.ts","src/app/shared/utilities/price-input.utility.ts","src/app/shared/directives/percent-price-format.directive.ts","src/app/system-parameters/shared/parameter.model.ts","src/app/system-parameters/shared/system-parameters.service.ts","src/app/shared/services/phone-number-mask-validator.service.ts","src/app/shared/directives/phone-number-mask.directive.ts","src/app/shared/dialogs/print-dialog/models/print-options.model.ts","src/app/notifications/snackbars/au-snackbar.component.ts","src/app/notifications/snackbars/au-snackbar.component.html","src/app/shared/models/snackbars/au-snackbar-data.model.ts","src/app/shared/models/snackbars/au-snackbar-types.enum.ts","src/app/shared/models/snackbars/au-snackbar-config.builder.ts","src/app/notifications/au-snackbar.service.ts","src/app/ticketing/ticket-entry/weight-table/batch-weight.model.ts","src/app/orders/cod-total/order-calculated-prices.model.ts","src/app/shared/models/request-valid.model.ts","src/app/ticketing/models/sales-tax.model.ts","src/app/ticketing/models/simple-ticket.model.ts","src/app/ticketing/models/ticket-order-id.model.ts","src/app/ticketing/models/printing/ticket-print-reply.model.ts","src/app/ticketing/models/printing/ticket-print-request.model.ts","src/app/ticketing/models/ticket-product-delete-response.model.ts","src/app/ticketing/models/ticket-status.model.ts","src/app/ticketing/models/ticket-truck-details.model.ts","src/app/ticketing/models/ticket-update.model.ts","src/app/ticketing/models/void-status.model.ts","src/app/ticketing/shared/ticketing.service.ts","src/app/shared/dialogs/print-dialog/print-options-dialog.component.ts","src/app/shared/dialogs/print-dialog/print-options-dialog.component.html","src/app/shared/components/progress-ring.component.ts","src/app/shared/directives/progress-spinner.directive.ts","src/app/shared/directives/required-error-clear.directive.ts","src/app/shared/models/select-header-checkbox-types.enum.ts","src/app/shared/components/ag-grid/select-header-checkbox.component.ts","src/app/shared/components/ag-grid/select-header-checkbox.component.html","src/app/shared/dialogs/simple-input-dialog/simple-input-dialog.component.ts","src/app/shared/dialogs/simple-input-dialog/simple-input-dialog.component.html","src/app/shared/directives/time-format.directive.ts","src/app/shared/mobile/directives/touch-and-hold.directive.ts","src/app/shared/directives/virtual-viewport-height-calculator.directive.ts","src/app/shared/shared.module.ts"],"sourcesContent":["import * as i0 from '@angular/core';\nimport { Directive, Component, ChangeDetectionStrategy, ViewEncapsulation, Inject, Input, ContentChildren, NgModule } from '@angular/core';\nimport { MatCommonModule } from '@angular/material/core';\nimport * as i1 from '@angular/cdk/platform';\nimport { DOCUMENT } from '@angular/common';\nconst _c0 = [\"*\", [[\"mat-toolbar-row\"]]];\nconst _c1 = [\"*\", \"mat-toolbar-row\"];\nlet MatToolbarRow = /*#__PURE__*/(() => {\n class MatToolbarRow {\n static {\n this.ɵfac = function MatToolbarRow_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || MatToolbarRow)();\n };\n }\n static {\n this.ɵdir = /* @__PURE__ */i0.ɵɵdefineDirective({\n type: MatToolbarRow,\n selectors: [[\"mat-toolbar-row\"]],\n hostAttrs: [1, \"mat-toolbar-row\"],\n exportAs: [\"matToolbarRow\"],\n standalone: true\n });\n }\n }\n return MatToolbarRow;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\nlet MatToolbar = /*#__PURE__*/(() => {\n class MatToolbar {\n constructor(_elementRef, _platform, document) {\n this._elementRef = _elementRef;\n this._platform = _platform;\n // TODO: make the document a required param when doing breaking changes.\n this._document = document;\n }\n ngAfterViewInit() {\n if (this._platform.isBrowser) {\n this._checkToolbarMixedModes();\n this._toolbarRows.changes.subscribe(() => this._checkToolbarMixedModes());\n }\n }\n /**\n * Throws an exception when developers are attempting to combine the different toolbar row modes.\n */\n _checkToolbarMixedModes() {\n if (this._toolbarRows.length && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n // Check if there are any other DOM nodes that can display content but aren't inside of\n // a element.\n const isCombinedUsage = Array.from(this._elementRef.nativeElement.childNodes).filter(node => !(node.classList && node.classList.contains('mat-toolbar-row'))).filter(node => node.nodeType !== (this._document ? this._document.COMMENT_NODE : 8)).some(node => !!(node.textContent && node.textContent.trim()));\n if (isCombinedUsage) {\n throwToolbarMixedModesError();\n }\n }\n }\n static {\n this.ɵfac = function MatToolbar_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || MatToolbar)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i1.Platform), i0.ɵɵdirectiveInject(DOCUMENT));\n };\n }\n static {\n this.ɵcmp = /* @__PURE__ */i0.ɵɵdefineComponent({\n type: MatToolbar,\n selectors: [[\"mat-toolbar\"]],\n contentQueries: function MatToolbar_ContentQueries(rf, ctx, dirIndex) {\n if (rf & 1) {\n i0.ɵɵcontentQuery(dirIndex, MatToolbarRow, 5);\n }\n if (rf & 2) {\n let _t;\n i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx._toolbarRows = _t);\n }\n },\n hostAttrs: [1, \"mat-toolbar\"],\n hostVars: 6,\n hostBindings: function MatToolbar_HostBindings(rf, ctx) {\n if (rf & 2) {\n i0.ɵɵclassMap(ctx.color ? \"mat-\" + ctx.color : \"\");\n i0.ɵɵclassProp(\"mat-toolbar-multiple-rows\", ctx._toolbarRows.length > 0)(\"mat-toolbar-single-row\", ctx._toolbarRows.length === 0);\n }\n },\n inputs: {\n color: \"color\"\n },\n exportAs: [\"matToolbar\"],\n standalone: true,\n features: [i0.ɵɵStandaloneFeature],\n ngContentSelectors: _c1,\n decls: 2,\n vars: 0,\n template: function MatToolbar_Template(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵprojectionDef(_c0);\n i0.ɵɵprojection(0);\n i0.ɵɵprojection(1, 1);\n }\n },\n styles: [\".mat-toolbar{background:var(--mat-toolbar-container-background-color, var(--mat-app-surface));color:var(--mat-toolbar-container-text-color, var(--mat-app-on-surface))}.mat-toolbar,.mat-toolbar h1,.mat-toolbar h2,.mat-toolbar h3,.mat-toolbar h4,.mat-toolbar h5,.mat-toolbar h6{font-family:var(--mat-toolbar-title-text-font, var(--mat-app-title-large-font));font-size:var(--mat-toolbar-title-text-size, var(--mat-app-title-large-size));line-height:var(--mat-toolbar-title-text-line-height, var(--mat-app-title-large-line-height));font-weight:var(--mat-toolbar-title-text-weight, var(--mat-app-title-large-weight));letter-spacing:var(--mat-toolbar-title-text-tracking, var(--mat-app-title-large-tracking));margin:0}.cdk-high-contrast-active .mat-toolbar{outline:solid 1px}.mat-toolbar .mat-form-field-underline,.mat-toolbar .mat-form-field-ripple,.mat-toolbar .mat-focused .mat-form-field-ripple{background-color:currentColor}.mat-toolbar .mat-form-field-label,.mat-toolbar .mat-focused .mat-form-field-label,.mat-toolbar .mat-select-value,.mat-toolbar .mat-select-arrow,.mat-toolbar .mat-form-field.mat-focused .mat-select-arrow{color:inherit}.mat-toolbar .mat-input-element{caret-color:currentColor}.mat-toolbar .mat-mdc-button-base.mat-mdc-button-base.mat-unthemed{--mdc-text-button-label-text-color:var(--mat-toolbar-container-text-color, var(--mat-app-on-surface));--mdc-outlined-button-label-text-color:var(--mat-toolbar-container-text-color, var(--mat-app-on-surface))}.mat-toolbar-row,.mat-toolbar-single-row{display:flex;box-sizing:border-box;padding:0 16px;width:100%;flex-direction:row;align-items:center;white-space:nowrap;height:var(--mat-toolbar-standard-height)}@media(max-width: 599px){.mat-toolbar-row,.mat-toolbar-single-row{height:var(--mat-toolbar-mobile-height)}}.mat-toolbar-multiple-rows{display:flex;box-sizing:border-box;flex-direction:column;width:100%;min-height:var(--mat-toolbar-standard-height)}@media(max-width: 599px){.mat-toolbar-multiple-rows{min-height:var(--mat-toolbar-mobile-height)}}\"],\n encapsulation: 2,\n changeDetection: 0\n });\n }\n }\n return MatToolbar;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n/**\n * Throws an exception when attempting to combine the different toolbar row modes.\n * @docs-private\n */\nfunction throwToolbarMixedModesError() {\n throw Error('MatToolbar: Attempting to combine different toolbar modes. ' + 'Either specify multiple `` elements explicitly or just place content ' + 'inside of a `` for a single row.');\n}\nlet MatToolbarModule = /*#__PURE__*/(() => {\n class MatToolbarModule {\n static {\n this.ɵfac = function MatToolbarModule_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || MatToolbarModule)();\n };\n }\n static {\n this.ɵmod = /* @__PURE__ */i0.ɵɵdefineNgModule({\n type: MatToolbarModule\n });\n }\n static {\n this.ɵinj = /* @__PURE__ */i0.ɵɵdefineInjector({\n imports: [MatCommonModule, MatCommonModule]\n });\n }\n }\n return MatToolbarModule;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n\n/**\n * Generated bundle index. Do not edit.\n */\n\nexport { MatToolbar, MatToolbarModule, MatToolbarRow, throwToolbarMixedModesError };\n","import * as i0 from '@angular/core';\nimport { inject, NgZone, Injectable } from '@angular/core';\nimport { Subject, Observable } from 'rxjs';\nimport { filter, shareReplay, takeUntil } from 'rxjs/operators';\n\n/**\n * Handler that logs \"ResizeObserver loop limit exceeded\" errors.\n * These errors are not shown in the Chrome console, so we log them to ensure developers are aware.\n * @param e The error\n */\nconst loopLimitExceededErrorHandler = e => {\n if (e instanceof ErrorEvent && e.message === 'ResizeObserver loop limit exceeded') {\n console.error(`${e.message}. This could indicate a performance issue with your app. See https://github.com/WICG/resize-observer/blob/master/explainer.md#error-handling`);\n }\n};\n/**\n * A shared ResizeObserver to be used for a particular box type (content-box, border-box, or\n * device-pixel-content-box)\n */\nclass SingleBoxSharedResizeObserver {\n constructor( /** The box type to observe for resizes. */\n _box) {\n this._box = _box;\n /** Stream that emits when the shared observer is destroyed. */\n this._destroyed = new Subject();\n /** Stream of all events from the ResizeObserver. */\n this._resizeSubject = new Subject();\n /** A map of elements to streams of their resize events. */\n this._elementObservables = new Map();\n if (typeof ResizeObserver !== 'undefined') {\n this._resizeObserver = new ResizeObserver(entries => this._resizeSubject.next(entries));\n }\n }\n /**\n * Gets a stream of resize events for the given element.\n * @param target The element to observe.\n * @return The stream of resize events for the element.\n */\n observe(target) {\n if (!this._elementObservables.has(target)) {\n this._elementObservables.set(target, new Observable(observer => {\n const subscription = this._resizeSubject.subscribe(observer);\n this._resizeObserver?.observe(target, {\n box: this._box\n });\n return () => {\n this._resizeObserver?.unobserve(target);\n subscription.unsubscribe();\n this._elementObservables.delete(target);\n };\n }).pipe(filter(entries => entries.some(entry => entry.target === target)),\n // Share a replay of the last event so that subsequent calls to observe the same element\n // receive initial sizing info like the first one. Also enable ref counting so the\n // element will be automatically unobserved when there are no more subscriptions.\n shareReplay({\n bufferSize: 1,\n refCount: true\n }), takeUntil(this._destroyed)));\n }\n return this._elementObservables.get(target);\n }\n /** Destroys this instance. */\n destroy() {\n this._destroyed.next();\n this._destroyed.complete();\n this._resizeSubject.complete();\n this._elementObservables.clear();\n }\n}\n/**\n * Allows observing resize events on multiple elements using a shared set of ResizeObserver.\n * Sharing a ResizeObserver instance is recommended for better performance (see\n * https://github.com/WICG/resize-observer/issues/59).\n *\n * Rather than share a single `ResizeObserver`, this class creates one `ResizeObserver` per type\n * of observed box ('content-box', 'border-box', and 'device-pixel-content-box'). This avoids\n * later calls to `observe` with a different box type from influencing the events dispatched to\n * earlier calls.\n */\nlet SharedResizeObserver = /*#__PURE__*/(() => {\n class SharedResizeObserver {\n constructor() {\n /** Map of box type to shared resize observer. */\n this._observers = new Map();\n /** The Angular zone. */\n this._ngZone = inject(NgZone);\n if (typeof ResizeObserver !== 'undefined' && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n this._ngZone.runOutsideAngular(() => {\n window.addEventListener('error', loopLimitExceededErrorHandler);\n });\n }\n }\n ngOnDestroy() {\n for (const [, observer] of this._observers) {\n observer.destroy();\n }\n this._observers.clear();\n if (typeof ResizeObserver !== 'undefined' && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n window.removeEventListener('error', loopLimitExceededErrorHandler);\n }\n }\n /**\n * Gets a stream of resize events for the given target element and box type.\n * @param target The element to observe for resizes.\n * @param options Options to pass to the `ResizeObserver`\n * @return The stream of resize events for the element.\n */\n observe(target, options) {\n const box = options?.box || 'content-box';\n if (!this._observers.has(box)) {\n this._observers.set(box, new SingleBoxSharedResizeObserver(box));\n }\n return this._observers.get(box).observe(target);\n }\n static {\n this.ɵfac = function SharedResizeObserver_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || SharedResizeObserver)();\n };\n }\n static {\n this.ɵprov = /* @__PURE__ */i0.ɵɵdefineInjectable({\n token: SharedResizeObserver,\n factory: SharedResizeObserver.ɵfac,\n providedIn: 'root'\n });\n }\n }\n return SharedResizeObserver;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n\n/**\n * Generated bundle index. Do not edit.\n */\n\nexport { SharedResizeObserver };\n","import * as i0 from '@angular/core';\nimport { Directive, InjectionToken, Attribute, Input, inject, NgZone, Component, ChangeDetectionStrategy, ViewEncapsulation, ViewChild, contentChild, Injector, computed, afterRender, ANIMATION_MODULE_TYPE, Optional, Inject, ContentChild, ContentChildren, NgModule } from '@angular/core';\nimport * as i1 from '@angular/cdk/bidi';\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport * as i2 from '@angular/cdk/platform';\nimport { DOCUMENT, NgTemplateOutlet, CommonModule } from '@angular/common';\nimport { Subscription, Subject, merge } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\nimport { SharedResizeObserver } from '@angular/cdk/observers/private';\nimport { trigger, state, style, transition, animate } from '@angular/animations';\nimport { ObserversModule } from '@angular/cdk/observers';\nimport { MatCommonModule } from '@angular/material/core';\n\n/** The floating label for a `mat-form-field`. */\nconst _c0 = [\"notch\"];\nconst _c1 = [\"matFormFieldNotchedOutline\", \"\"];\nconst _c2 = [\"*\"];\nconst _c3 = [\"textField\"];\nconst _c4 = [\"iconPrefixContainer\"];\nconst _c5 = [\"textPrefixContainer\"];\nconst _c6 = [\"iconSuffixContainer\"];\nconst _c7 = [\"textSuffixContainer\"];\nconst _c8 = [\"*\", [[\"mat-label\"]], [[\"\", \"matPrefix\", \"\"], [\"\", \"matIconPrefix\", \"\"]], [[\"\", \"matTextPrefix\", \"\"]], [[\"\", \"matTextSuffix\", \"\"]], [[\"\", \"matSuffix\", \"\"], [\"\", \"matIconSuffix\", \"\"]], [[\"mat-error\"], [\"\", \"matError\", \"\"]], [[\"mat-hint\", 3, \"align\", \"end\"]], [[\"mat-hint\", \"align\", \"end\"]]];\nconst _c9 = [\"*\", \"mat-label\", \"[matPrefix], [matIconPrefix]\", \"[matTextPrefix]\", \"[matTextSuffix]\", \"[matSuffix], [matIconSuffix]\", \"mat-error, [matError]\", \"mat-hint:not([align='end'])\", \"mat-hint[align='end']\"];\nfunction MatFormField_ng_template_0_Conditional_0_Conditional_2_Template(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵelement(0, \"span\", 21);\n }\n}\nfunction MatFormField_ng_template_0_Conditional_0_Template(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵelementStart(0, \"label\", 20);\n i0.ɵɵprojection(1, 1);\n i0.ɵɵtemplate(2, MatFormField_ng_template_0_Conditional_0_Conditional_2_Template, 1, 0, \"span\", 21);\n i0.ɵɵelementEnd();\n }\n if (rf & 2) {\n const ctx_r1 = i0.ɵɵnextContext(2);\n i0.ɵɵproperty(\"floating\", ctx_r1._shouldLabelFloat())(\"monitorResize\", ctx_r1._hasOutline())(\"id\", ctx_r1._labelId);\n i0.ɵɵattribute(\"for\", ctx_r1._control.disableAutomaticLabeling ? null : ctx_r1._control.id);\n i0.ɵɵadvance(2);\n i0.ɵɵconditional(!ctx_r1.hideRequiredMarker && ctx_r1._control.required ? 2 : -1);\n }\n}\nfunction MatFormField_ng_template_0_Template(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵtemplate(0, MatFormField_ng_template_0_Conditional_0_Template, 3, 5, \"label\", 20);\n }\n if (rf & 2) {\n const ctx_r1 = i0.ɵɵnextContext();\n i0.ɵɵconditional(ctx_r1._hasFloatingLabel() ? 0 : -1);\n }\n}\nfunction MatFormField_Conditional_4_Template(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵelement(0, \"div\", 7);\n }\n}\nfunction MatFormField_Conditional_6_Conditional_1_ng_template_0_Template(rf, ctx) {}\nfunction MatFormField_Conditional_6_Conditional_1_Template(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵtemplate(0, MatFormField_Conditional_6_Conditional_1_ng_template_0_Template, 0, 0, \"ng-template\", 13);\n }\n if (rf & 2) {\n i0.ɵɵnextContext(2);\n const labelTemplate_r3 = i0.ɵɵreference(1);\n i0.ɵɵproperty(\"ngTemplateOutlet\", labelTemplate_r3);\n }\n}\nfunction MatFormField_Conditional_6_Template(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵelementStart(0, \"div\", 9);\n i0.ɵɵtemplate(1, MatFormField_Conditional_6_Conditional_1_Template, 1, 1, null, 13);\n i0.ɵɵelementEnd();\n }\n if (rf & 2) {\n const ctx_r1 = i0.ɵɵnextContext();\n i0.ɵɵproperty(\"matFormFieldNotchedOutlineOpen\", ctx_r1._shouldLabelFloat());\n i0.ɵɵadvance();\n i0.ɵɵconditional(!ctx_r1._forceDisplayInfixLabel() ? 1 : -1);\n }\n}\nfunction MatFormField_Conditional_7_Template(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵelementStart(0, \"div\", 10, 2);\n i0.ɵɵprojection(2, 2);\n i0.ɵɵelementEnd();\n }\n}\nfunction MatFormField_Conditional_8_Template(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵelementStart(0, \"div\", 11, 3);\n i0.ɵɵprojection(2, 3);\n i0.ɵɵelementEnd();\n }\n}\nfunction MatFormField_Conditional_10_ng_template_0_Template(rf, ctx) {}\nfunction MatFormField_Conditional_10_Template(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵtemplate(0, MatFormField_Conditional_10_ng_template_0_Template, 0, 0, \"ng-template\", 13);\n }\n if (rf & 2) {\n i0.ɵɵnextContext();\n const labelTemplate_r3 = i0.ɵɵreference(1);\n i0.ɵɵproperty(\"ngTemplateOutlet\", labelTemplate_r3);\n }\n}\nfunction MatFormField_Conditional_12_Template(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵelementStart(0, \"div\", 14, 4);\n i0.ɵɵprojection(2, 4);\n i0.ɵɵelementEnd();\n }\n}\nfunction MatFormField_Conditional_13_Template(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵelementStart(0, \"div\", 15, 5);\n i0.ɵɵprojection(2, 5);\n i0.ɵɵelementEnd();\n }\n}\nfunction MatFormField_Conditional_14_Template(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵelement(0, \"div\", 16);\n }\n}\nfunction MatFormField_Case_16_Template(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵelementStart(0, \"div\", 18);\n i0.ɵɵprojection(1, 6);\n i0.ɵɵelementEnd();\n }\n if (rf & 2) {\n const ctx_r1 = i0.ɵɵnextContext();\n i0.ɵɵproperty(\"@transitionMessages\", ctx_r1._subscriptAnimationState);\n }\n}\nfunction MatFormField_Case_17_Conditional_1_Template(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵelementStart(0, \"mat-hint\", 22);\n i0.ɵɵtext(1);\n i0.ɵɵelementEnd();\n }\n if (rf & 2) {\n const ctx_r1 = i0.ɵɵnextContext(2);\n i0.ɵɵproperty(\"id\", ctx_r1._hintLabelId);\n i0.ɵɵadvance();\n i0.ɵɵtextInterpolate(ctx_r1.hintLabel);\n }\n}\nfunction MatFormField_Case_17_Template(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵelementStart(0, \"div\", 19);\n i0.ɵɵtemplate(1, MatFormField_Case_17_Conditional_1_Template, 2, 2, \"mat-hint\", 22);\n i0.ɵɵprojection(2, 7);\n i0.ɵɵelement(3, \"div\", 23);\n i0.ɵɵprojection(4, 8);\n i0.ɵɵelementEnd();\n }\n if (rf & 2) {\n const ctx_r1 = i0.ɵɵnextContext();\n i0.ɵɵproperty(\"@transitionMessages\", ctx_r1._subscriptAnimationState);\n i0.ɵɵadvance();\n i0.ɵɵconditional(ctx_r1.hintLabel ? 1 : -1);\n }\n}\nlet MatLabel = /*#__PURE__*/(() => {\n class MatLabel {\n static {\n this.ɵfac = function MatLabel_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || MatLabel)();\n };\n }\n static {\n this.ɵdir = /* @__PURE__ */i0.ɵɵdefineDirective({\n type: MatLabel,\n selectors: [[\"mat-label\"]],\n standalone: true\n });\n }\n }\n return MatLabel;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\nlet nextUniqueId$2 = 0;\n/**\n * Injection token that can be used to reference instances of `MatError`. It serves as\n * alternative token to the actual `MatError` class which could cause unnecessary\n * retention of the class and its directive metadata.\n */\nconst MAT_ERROR = /*#__PURE__*/new InjectionToken('MatError');\n/** Single error message to be shown underneath the form-field. */\nlet MatError = /*#__PURE__*/(() => {\n class MatError {\n constructor(ariaLive, elementRef) {\n this.id = `mat-mdc-error-${nextUniqueId$2++}`;\n // If no aria-live value is set add 'polite' as a default. This is preferred over setting\n // role='alert' so that screen readers do not interrupt the current task to read this aloud.\n if (!ariaLive) {\n elementRef.nativeElement.setAttribute('aria-live', 'polite');\n }\n }\n static {\n this.ɵfac = function MatError_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || MatError)(i0.ɵɵinjectAttribute('aria-live'), i0.ɵɵdirectiveInject(i0.ElementRef));\n };\n }\n static {\n this.ɵdir = /* @__PURE__ */i0.ɵɵdefineDirective({\n type: MatError,\n selectors: [[\"mat-error\"], [\"\", \"matError\", \"\"]],\n hostAttrs: [\"aria-atomic\", \"true\", 1, \"mat-mdc-form-field-error\", \"mat-mdc-form-field-bottom-align\"],\n hostVars: 1,\n hostBindings: function MatError_HostBindings(rf, ctx) {\n if (rf & 2) {\n i0.ɵɵhostProperty(\"id\", ctx.id);\n }\n },\n inputs: {\n id: \"id\"\n },\n standalone: true,\n features: [i0.ɵɵProvidersFeature([{\n provide: MAT_ERROR,\n useExisting: MatError\n }])]\n });\n }\n }\n return MatError;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\nlet nextUniqueId$1 = 0;\n/** Hint text to be shown underneath the form field control. */\nlet MatHint = /*#__PURE__*/(() => {\n class MatHint {\n constructor() {\n /** Whether to align the hint label at the start or end of the line. */\n this.align = 'start';\n /** Unique ID for the hint. Used for the aria-describedby on the form field control. */\n this.id = `mat-mdc-hint-${nextUniqueId$1++}`;\n }\n static {\n this.ɵfac = function MatHint_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || MatHint)();\n };\n }\n static {\n this.ɵdir = /* @__PURE__ */i0.ɵɵdefineDirective({\n type: MatHint,\n selectors: [[\"mat-hint\"]],\n hostAttrs: [1, \"mat-mdc-form-field-hint\", \"mat-mdc-form-field-bottom-align\"],\n hostVars: 4,\n hostBindings: function MatHint_HostBindings(rf, ctx) {\n if (rf & 2) {\n i0.ɵɵhostProperty(\"id\", ctx.id);\n i0.ɵɵattribute(\"align\", null);\n i0.ɵɵclassProp(\"mat-mdc-form-field-hint-end\", ctx.align === \"end\");\n }\n },\n inputs: {\n align: \"align\",\n id: \"id\"\n },\n standalone: true\n });\n }\n }\n return MatHint;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n\n/**\n * Injection token that can be used to reference instances of `MatPrefix`. It serves as\n * alternative token to the actual `MatPrefix` class which could cause unnecessary\n * retention of the class and its directive metadata.\n */\nconst MAT_PREFIX = /*#__PURE__*/new InjectionToken('MatPrefix');\n/** Prefix to be placed in front of the form field. */\nlet MatPrefix = /*#__PURE__*/(() => {\n class MatPrefix {\n constructor() {\n this._isText = false;\n }\n set _isTextSelector(value) {\n this._isText = true;\n }\n static {\n this.ɵfac = function MatPrefix_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || MatPrefix)();\n };\n }\n static {\n this.ɵdir = /* @__PURE__ */i0.ɵɵdefineDirective({\n type: MatPrefix,\n selectors: [[\"\", \"matPrefix\", \"\"], [\"\", \"matIconPrefix\", \"\"], [\"\", \"matTextPrefix\", \"\"]],\n inputs: {\n _isTextSelector: [0, \"matTextPrefix\", \"_isTextSelector\"]\n },\n standalone: true,\n features: [i0.ɵɵProvidersFeature([{\n provide: MAT_PREFIX,\n useExisting: MatPrefix\n }])]\n });\n }\n }\n return MatPrefix;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n\n/**\n * Injection token that can be used to reference instances of `MatSuffix`. It serves as\n * alternative token to the actual `MatSuffix` class which could cause unnecessary\n * retention of the class and its directive metadata.\n */\nconst MAT_SUFFIX = /*#__PURE__*/new InjectionToken('MatSuffix');\n/** Suffix to be placed at the end of the form field. */\nlet MatSuffix = /*#__PURE__*/(() => {\n class MatSuffix {\n constructor() {\n this._isText = false;\n }\n set _isTextSelector(value) {\n this._isText = true;\n }\n static {\n this.ɵfac = function MatSuffix_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || MatSuffix)();\n };\n }\n static {\n this.ɵdir = /* @__PURE__ */i0.ɵɵdefineDirective({\n type: MatSuffix,\n selectors: [[\"\", \"matSuffix\", \"\"], [\"\", \"matIconSuffix\", \"\"], [\"\", \"matTextSuffix\", \"\"]],\n inputs: {\n _isTextSelector: [0, \"matTextSuffix\", \"_isTextSelector\"]\n },\n standalone: true,\n features: [i0.ɵɵProvidersFeature([{\n provide: MAT_SUFFIX,\n useExisting: MatSuffix\n }])]\n });\n }\n }\n return MatSuffix;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n\n/** An injion token for the parent form-field. */\nconst FLOATING_LABEL_PARENT = /*#__PURE__*/new InjectionToken('FloatingLabelParent');\n/**\n * Internal directive that maintains a MDC floating label. This directive does not\n * use the `MDCFloatingLabelFoundation` class, as it is not worth the size cost of\n * including it just to measure the label width and toggle some classes.\n *\n * The use of a directive allows us to conditionally render a floating label in the\n * template without having to manually manage instantiation and destruction of the\n * floating label component based on.\n *\n * The component is responsible for setting up the floating label styles, measuring label\n * width for the outline notch, and providing inputs that can be used to toggle the\n * label's floating or required state.\n */\nlet MatFormFieldFloatingLabel = /*#__PURE__*/(() => {\n class MatFormFieldFloatingLabel {\n /** Whether the label is floating. */\n get floating() {\n return this._floating;\n }\n set floating(value) {\n this._floating = value;\n if (this.monitorResize) {\n this._handleResize();\n }\n }\n /** Whether to monitor for resize events on the floating label. */\n get monitorResize() {\n return this._monitorResize;\n }\n set monitorResize(value) {\n this._monitorResize = value;\n if (this._monitorResize) {\n this._subscribeToResize();\n } else {\n this._resizeSubscription.unsubscribe();\n }\n }\n constructor(_elementRef) {\n this._elementRef = _elementRef;\n this._floating = false;\n this._monitorResize = false;\n /** The shared ResizeObserver. */\n this._resizeObserver = inject(SharedResizeObserver);\n /** The Angular zone. */\n this._ngZone = inject(NgZone);\n /** The parent form-field. */\n this._parent = inject(FLOATING_LABEL_PARENT);\n /** The current resize event subscription. */\n this._resizeSubscription = new Subscription();\n }\n ngOnDestroy() {\n this._resizeSubscription.unsubscribe();\n }\n /** Gets the width of the label. Used for the outline notch. */\n getWidth() {\n return estimateScrollWidth(this._elementRef.nativeElement);\n }\n /** Gets the HTML element for the floating label. */\n get element() {\n return this._elementRef.nativeElement;\n }\n /** Handles resize events from the ResizeObserver. */\n _handleResize() {\n // In the case where the label grows in size, the following sequence of events occurs:\n // 1. The label grows by 1px triggering the ResizeObserver\n // 2. The notch is expanded to accommodate the entire label\n // 3. The label expands to its full width, triggering the ResizeObserver again\n //\n // This is expected, but If we allow this to all happen within the same macro task it causes an\n // error: `ResizeObserver loop limit exceeded`. Therefore we push the notch resize out until\n // the next macro task.\n setTimeout(() => this._parent._handleLabelResized());\n }\n /** Subscribes to resize events. */\n _subscribeToResize() {\n this._resizeSubscription.unsubscribe();\n this._ngZone.runOutsideAngular(() => {\n this._resizeSubscription = this._resizeObserver.observe(this._elementRef.nativeElement, {\n box: 'border-box'\n }).subscribe(() => this._handleResize());\n });\n }\n static {\n this.ɵfac = function MatFormFieldFloatingLabel_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || MatFormFieldFloatingLabel)(i0.ɵɵdirectiveInject(i0.ElementRef));\n };\n }\n static {\n this.ɵdir = /* @__PURE__ */i0.ɵɵdefineDirective({\n type: MatFormFieldFloatingLabel,\n selectors: [[\"label\", \"matFormFieldFloatingLabel\", \"\"]],\n hostAttrs: [1, \"mdc-floating-label\", \"mat-mdc-floating-label\"],\n hostVars: 2,\n hostBindings: function MatFormFieldFloatingLabel_HostBindings(rf, ctx) {\n if (rf & 2) {\n i0.ɵɵclassProp(\"mdc-floating-label--float-above\", ctx.floating);\n }\n },\n inputs: {\n floating: \"floating\",\n monitorResize: \"monitorResize\"\n },\n standalone: true\n });\n }\n }\n return MatFormFieldFloatingLabel;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n/**\n * Estimates the scroll width of an element.\n * via https://github.com/material-components/material-components-web/blob/c0a11ef0d000a098fd0c372be8f12d6a99302855/packages/mdc-dom/ponyfill.ts\n */\nfunction estimateScrollWidth(element) {\n // Check the offsetParent. If the element inherits display: none from any\n // parent, the offsetParent property will be null (see\n // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent).\n // This check ensures we only clone the node when necessary.\n const htmlEl = element;\n if (htmlEl.offsetParent !== null) {\n return htmlEl.scrollWidth;\n }\n const clone = htmlEl.cloneNode(true);\n clone.style.setProperty('position', 'absolute');\n clone.style.setProperty('transform', 'translate(-9999px, -9999px)');\n document.documentElement.appendChild(clone);\n const scrollWidth = clone.scrollWidth;\n clone.remove();\n return scrollWidth;\n}\n\n/** Class added when the line ripple is active. */\nconst ACTIVATE_CLASS = 'mdc-line-ripple--active';\n/** Class added when the line ripple is being deactivated. */\nconst DEACTIVATING_CLASS = 'mdc-line-ripple--deactivating';\n/**\n * Internal directive that creates an instance of the MDC line-ripple component. Using a\n * directive allows us to conditionally render a line-ripple in the template without having\n * to manually create and destroy the `MDCLineRipple` component whenever the condition changes.\n *\n * The directive sets up the styles for the line-ripple and provides an API for activating\n * and deactivating the line-ripple.\n */\nlet MatFormFieldLineRipple = /*#__PURE__*/(() => {\n class MatFormFieldLineRipple {\n constructor(_elementRef, ngZone) {\n this._elementRef = _elementRef;\n this._handleTransitionEnd = event => {\n const classList = this._elementRef.nativeElement.classList;\n const isDeactivating = classList.contains(DEACTIVATING_CLASS);\n if (event.propertyName === 'opacity' && isDeactivating) {\n classList.remove(ACTIVATE_CLASS, DEACTIVATING_CLASS);\n }\n };\n ngZone.runOutsideAngular(() => {\n _elementRef.nativeElement.addEventListener('transitionend', this._handleTransitionEnd);\n });\n }\n activate() {\n const classList = this._elementRef.nativeElement.classList;\n classList.remove(DEACTIVATING_CLASS);\n classList.add(ACTIVATE_CLASS);\n }\n deactivate() {\n this._elementRef.nativeElement.classList.add(DEACTIVATING_CLASS);\n }\n ngOnDestroy() {\n this._elementRef.nativeElement.removeEventListener('transitionend', this._handleTransitionEnd);\n }\n static {\n this.ɵfac = function MatFormFieldLineRipple_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || MatFormFieldLineRipple)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.NgZone));\n };\n }\n static {\n this.ɵdir = /* @__PURE__ */i0.ɵɵdefineDirective({\n type: MatFormFieldLineRipple,\n selectors: [[\"div\", \"matFormFieldLineRipple\", \"\"]],\n hostAttrs: [1, \"mdc-line-ripple\"],\n standalone: true\n });\n }\n }\n return MatFormFieldLineRipple;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n\n/**\n * Internal component that creates an instance of the MDC notched-outline component.\n *\n * The component sets up the HTML structure and styles for the notched-outline. It provides\n * inputs to toggle the notch state and width.\n */\nlet MatFormFieldNotchedOutline = /*#__PURE__*/(() => {\n class MatFormFieldNotchedOutline {\n constructor(_elementRef, _ngZone) {\n this._elementRef = _elementRef;\n this._ngZone = _ngZone;\n /** Whether the notch should be opened. */\n this.open = false;\n }\n ngAfterViewInit() {\n const label = this._elementRef.nativeElement.querySelector('.mdc-floating-label');\n if (label) {\n this._elementRef.nativeElement.classList.add('mdc-notched-outline--upgraded');\n if (typeof requestAnimationFrame === 'function') {\n label.style.transitionDuration = '0s';\n this._ngZone.runOutsideAngular(() => {\n requestAnimationFrame(() => label.style.transitionDuration = '');\n });\n }\n } else {\n this._elementRef.nativeElement.classList.add('mdc-notched-outline--no-label');\n }\n }\n _setNotchWidth(labelWidth) {\n if (!this.open || !labelWidth) {\n this._notch.nativeElement.style.width = '';\n } else {\n const NOTCH_ELEMENT_PADDING = 8;\n const NOTCH_ELEMENT_BORDER = 1;\n this._notch.nativeElement.style.width = `calc(${labelWidth}px * var(--mat-mdc-form-field-floating-label-scale, 0.75) + ${NOTCH_ELEMENT_PADDING + NOTCH_ELEMENT_BORDER}px)`;\n }\n }\n static {\n this.ɵfac = function MatFormFieldNotchedOutline_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || MatFormFieldNotchedOutline)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.NgZone));\n };\n }\n static {\n this.ɵcmp = /* @__PURE__ */i0.ɵɵdefineComponent({\n type: MatFormFieldNotchedOutline,\n selectors: [[\"div\", \"matFormFieldNotchedOutline\", \"\"]],\n viewQuery: function MatFormFieldNotchedOutline_Query(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵviewQuery(_c0, 5);\n }\n if (rf & 2) {\n let _t;\n i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx._notch = _t.first);\n }\n },\n hostAttrs: [1, \"mdc-notched-outline\"],\n hostVars: 2,\n hostBindings: function MatFormFieldNotchedOutline_HostBindings(rf, ctx) {\n if (rf & 2) {\n i0.ɵɵclassProp(\"mdc-notched-outline--notched\", ctx.open);\n }\n },\n inputs: {\n open: [0, \"matFormFieldNotchedOutlineOpen\", \"open\"]\n },\n standalone: true,\n features: [i0.ɵɵStandaloneFeature],\n attrs: _c1,\n ngContentSelectors: _c2,\n decls: 5,\n vars: 0,\n consts: [[\"notch\", \"\"], [1, \"mat-mdc-notch-piece\", \"mdc-notched-outline__leading\"], [1, \"mat-mdc-notch-piece\", \"mdc-notched-outline__notch\"], [1, \"mat-mdc-notch-piece\", \"mdc-notched-outline__trailing\"]],\n template: function MatFormFieldNotchedOutline_Template(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵprojectionDef();\n i0.ɵɵelement(0, \"div\", 1);\n i0.ɵɵelementStart(1, \"div\", 2, 0);\n i0.ɵɵprojection(3);\n i0.ɵɵelementEnd();\n i0.ɵɵelement(4, \"div\", 3);\n }\n },\n encapsulation: 2,\n changeDetection: 0\n });\n }\n }\n return MatFormFieldNotchedOutline;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n\n/**\n * Animations used by the MatFormField.\n * @docs-private\n */\nconst matFormFieldAnimations = {\n /** Animation that transitions the form field's error and hint messages. */\n transitionMessages: /*#__PURE__*/trigger('transitionMessages', [\n /*#__PURE__*/\n // TODO(mmalerba): Use angular animations for label animation as well.\n state('enter', /*#__PURE__*/style({\n opacity: 1,\n transform: 'translateY(0%)'\n })), /*#__PURE__*/transition('void => enter', [/*#__PURE__*/style({\n opacity: 0,\n transform: 'translateY(-5px)'\n }), /*#__PURE__*/animate('300ms cubic-bezier(0.55, 0, 0.55, 0.2)')])])\n};\n\n/** An interface which allows a control to work inside of a `MatFormField`. */\nlet MatFormFieldControl = /*#__PURE__*/(() => {\n class MatFormFieldControl {\n static {\n this.ɵfac = function MatFormFieldControl_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || MatFormFieldControl)();\n };\n }\n static {\n this.ɵdir = /* @__PURE__ */i0.ɵɵdefineDirective({\n type: MatFormFieldControl\n });\n }\n }\n return MatFormFieldControl;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n\n/** @docs-private */\nfunction getMatFormFieldPlaceholderConflictError() {\n return Error('Placeholder attribute and child element were both specified.');\n}\n/** @docs-private */\nfunction getMatFormFieldDuplicatedHintError(align) {\n return Error(`A hint was already declared for 'align=\"${align}\"'.`);\n}\n/** @docs-private */\nfunction getMatFormFieldMissingControlError() {\n return Error('mat-form-field must contain a MatFormFieldControl.');\n}\n\n/**\n * Injection token that can be used to inject an instances of `MatFormField`. It serves\n * as alternative token to the actual `MatFormField` class which would cause unnecessary\n * retention of the `MatFormField` class and its component metadata.\n */\nconst MAT_FORM_FIELD = /*#__PURE__*/new InjectionToken('MatFormField');\n/**\n * Injection token that can be used to configure the\n * default options for all form field within an app.\n */\nconst MAT_FORM_FIELD_DEFAULT_OPTIONS = /*#__PURE__*/new InjectionToken('MAT_FORM_FIELD_DEFAULT_OPTIONS');\nlet nextUniqueId = 0;\n/** Default appearance used by the form field. */\nconst DEFAULT_APPEARANCE = 'fill';\n/**\n * Whether the label for form fields should by default float `always`,\n * `never`, or `auto`.\n */\nconst DEFAULT_FLOAT_LABEL = 'auto';\n/** Default way that the subscript element height is set. */\nconst DEFAULT_SUBSCRIPT_SIZING = 'fixed';\n/**\n * Default transform for docked floating labels in a MDC text-field. This value has been\n * extracted from the MDC text-field styles because we programmatically modify the docked\n * label transform, but do not want to accidentally discard the default label transform.\n */\nconst FLOATING_LABEL_DEFAULT_DOCKED_TRANSFORM = `translateY(-50%)`;\n/** Container for form controls that applies Material Design styling and behavior. */\nlet MatFormField = /*#__PURE__*/(() => {\n class MatFormField {\n /** Whether the required marker should be hidden. */\n get hideRequiredMarker() {\n return this._hideRequiredMarker;\n }\n set hideRequiredMarker(value) {\n this._hideRequiredMarker = coerceBooleanProperty(value);\n }\n /** Whether the label should always float or float as the user types. */\n get floatLabel() {\n return this._floatLabel || this._defaults?.floatLabel || DEFAULT_FLOAT_LABEL;\n }\n set floatLabel(value) {\n if (value !== this._floatLabel) {\n this._floatLabel = value;\n // For backwards compatibility. Custom form field controls or directives might set\n // the \"floatLabel\" input and expect the form field view to be updated automatically.\n // e.g. autocomplete trigger. Ideally we'd get rid of this and the consumers would just\n // emit the \"stateChanges\" observable. TODO(devversion): consider removing.\n this._changeDetectorRef.markForCheck();\n }\n }\n /** The form field appearance style. */\n get appearance() {\n return this._appearance;\n }\n set appearance(value) {\n const oldValue = this._appearance;\n const newAppearance = value || this._defaults?.appearance || DEFAULT_APPEARANCE;\n if (typeof ngDevMode === 'undefined' || ngDevMode) {\n if (newAppearance !== 'fill' && newAppearance !== 'outline') {\n throw new Error(`MatFormField: Invalid appearance \"${newAppearance}\", valid values are \"fill\" or \"outline\".`);\n }\n }\n this._appearance = newAppearance;\n if (this._appearance === 'outline' && this._appearance !== oldValue) {\n // If the appearance has been switched to `outline`, the label offset needs to be updated.\n // The update can happen once the view has been re-checked, but not immediately because\n // the view has not been updated and the notched-outline floating label is not present.\n this._needsOutlineLabelOffsetUpdate = true;\n }\n }\n /**\n * Whether the form field should reserve space for one line of hint/error text (default)\n * or to have the spacing grow from 0px as needed based on the size of the hint/error content.\n * Note that when using dynamic sizing, layout shifts will occur when hint/error text changes.\n */\n get subscriptSizing() {\n return this._subscriptSizing || this._defaults?.subscriptSizing || DEFAULT_SUBSCRIPT_SIZING;\n }\n set subscriptSizing(value) {\n this._subscriptSizing = value || this._defaults?.subscriptSizing || DEFAULT_SUBSCRIPT_SIZING;\n }\n /** Text for the form field hint. */\n get hintLabel() {\n return this._hintLabel;\n }\n set hintLabel(value) {\n this._hintLabel = value;\n this._processHints();\n }\n /** Gets the current form field control */\n get _control() {\n return this._explicitFormFieldControl || this._formFieldControl;\n }\n set _control(value) {\n this._explicitFormFieldControl = value;\n }\n constructor(_elementRef, _changeDetectorRef,\n /**\n * @deprecated not needed, to be removed.\n * @breaking-change 19.0.0 remove this param\n */\n _unusedNgZone, _dir, _platform, _defaults, _animationMode,\n /**\n * @deprecated not needed, to be removed.\n * @breaking-change 17.0.0 remove this param\n */\n _unusedDocument) {\n this._elementRef = _elementRef;\n this._changeDetectorRef = _changeDetectorRef;\n this._dir = _dir;\n this._platform = _platform;\n this._defaults = _defaults;\n this._animationMode = _animationMode;\n this._labelChild = contentChild(MatLabel);\n this._hideRequiredMarker = false;\n /**\n * Theme color of the form field. This API is supported in M2 themes only, it\n * has no effect in M3 themes.\n *\n * For information on applying color variants in M3, see\n * https://material.angular.io/guide/theming#using-component-color-variants.\n */\n this.color = 'primary';\n this._appearance = DEFAULT_APPEARANCE;\n this._subscriptSizing = null;\n this._hintLabel = '';\n this._hasIconPrefix = false;\n this._hasTextPrefix = false;\n this._hasIconSuffix = false;\n this._hasTextSuffix = false;\n // Unique id for the internal form field label.\n this._labelId = `mat-mdc-form-field-label-${nextUniqueId++}`;\n // Unique id for the hint label.\n this._hintLabelId = `mat-mdc-hint-${nextUniqueId++}`;\n /** State of the mat-hint and mat-error animations. */\n this._subscriptAnimationState = '';\n this._destroyed = new Subject();\n this._isFocused = null;\n this._needsOutlineLabelOffsetUpdate = false;\n this._previousControl = null;\n this._injector = inject(Injector);\n /**\n * Gets the id of the label element. If no label is present, returns `null`.\n */\n this.getLabelId = computed(() => this._hasFloatingLabel() ? this._labelId : null);\n this._hasFloatingLabel = computed(() => !!this._labelChild());\n if (_defaults) {\n if (_defaults.appearance) {\n this.appearance = _defaults.appearance;\n }\n this._hideRequiredMarker = Boolean(_defaults?.hideRequiredMarker);\n if (_defaults.color) {\n this.color = _defaults.color;\n }\n }\n }\n ngAfterViewInit() {\n // Initial focus state sync. This happens rarely, but we want to account for\n // it in case the form field control has \"focused\" set to true on init.\n this._updateFocusState();\n // Enable animations now. This ensures we don't animate on initial render.\n this._subscriptAnimationState = 'enter';\n // Because the above changes a value used in the template after it was checked, we need\n // to trigger CD or the change might not be reflected if there is no other CD scheduled.\n this._changeDetectorRef.detectChanges();\n }\n ngAfterContentInit() {\n this._assertFormFieldControl();\n this._initializeSubscript();\n this._initializePrefixAndSuffix();\n this._initializeOutlineLabelOffsetSubscriptions();\n }\n ngAfterContentChecked() {\n this._assertFormFieldControl();\n if (this._control !== this._previousControl) {\n this._initializeControl(this._previousControl);\n this._previousControl = this._control;\n }\n }\n ngOnDestroy() {\n this._stateChanges?.unsubscribe();\n this._valueChanges?.unsubscribe();\n this._destroyed.next();\n this._destroyed.complete();\n }\n /**\n * Gets an ElementRef for the element that a overlay attached to the form field\n * should be positioned relative to.\n */\n getConnectedOverlayOrigin() {\n return this._textField || this._elementRef;\n }\n /** Animates the placeholder up and locks it in position. */\n _animateAndLockLabel() {\n // This is for backwards compatibility only. Consumers of the form field might use\n // this method. e.g. the autocomplete trigger. This method has been added to the non-MDC\n // form field because setting \"floatLabel\" to \"always\" caused the label to float without\n // animation. This is different in MDC where the label always animates, so this method\n // is no longer necessary. There doesn't seem any benefit in adding logic to allow changing\n // the floating label state without animations. The non-MDC implementation was inconsistent\n // because it always animates if \"floatLabel\" is set away from \"always\".\n // TODO(devversion): consider removing this method when releasing the MDC form field.\n if (this._hasFloatingLabel()) {\n this.floatLabel = 'always';\n }\n }\n /** Initializes the registered form field control. */\n _initializeControl(previousControl) {\n const control = this._control;\n const classPrefix = 'mat-mdc-form-field-type-';\n if (previousControl) {\n this._elementRef.nativeElement.classList.remove(classPrefix + previousControl.controlType);\n }\n if (control.controlType) {\n this._elementRef.nativeElement.classList.add(classPrefix + control.controlType);\n }\n // Subscribe to changes in the child control state in order to update the form field UI.\n this._stateChanges?.unsubscribe();\n this._stateChanges = control.stateChanges.subscribe(() => {\n this._updateFocusState();\n this._syncDescribedByIds();\n this._changeDetectorRef.markForCheck();\n });\n this._valueChanges?.unsubscribe();\n // Run change detection if the value changes.\n if (control.ngControl && control.ngControl.valueChanges) {\n this._valueChanges = control.ngControl.valueChanges.pipe(takeUntil(this._destroyed)).subscribe(() => this._changeDetectorRef.markForCheck());\n }\n }\n _checkPrefixAndSuffixTypes() {\n this._hasIconPrefix = !!this._prefixChildren.find(p => !p._isText);\n this._hasTextPrefix = !!this._prefixChildren.find(p => p._isText);\n this._hasIconSuffix = !!this._suffixChildren.find(s => !s._isText);\n this._hasTextSuffix = !!this._suffixChildren.find(s => s._isText);\n }\n /** Initializes the prefix and suffix containers. */\n _initializePrefixAndSuffix() {\n this._checkPrefixAndSuffixTypes();\n // Mark the form field as dirty whenever the prefix or suffix children change. This\n // is necessary because we conditionally display the prefix/suffix containers based\n // on whether there is projected content.\n merge(this._prefixChildren.changes, this._suffixChildren.changes).subscribe(() => {\n this._checkPrefixAndSuffixTypes();\n this._changeDetectorRef.markForCheck();\n });\n }\n /**\n * Initializes the subscript by validating hints and synchronizing \"aria-describedby\" ids\n * with the custom form field control. Also subscribes to hint and error changes in order\n * to be able to validate and synchronize ids on change.\n */\n _initializeSubscript() {\n // Re-validate when the number of hints changes.\n this._hintChildren.changes.subscribe(() => {\n this._processHints();\n this._changeDetectorRef.markForCheck();\n });\n // Update the aria-described by when the number of errors changes.\n this._errorChildren.changes.subscribe(() => {\n this._syncDescribedByIds();\n this._changeDetectorRef.markForCheck();\n });\n // Initial mat-hint validation and subscript describedByIds sync.\n this._validateHints();\n this._syncDescribedByIds();\n }\n /** Throws an error if the form field's control is missing. */\n _assertFormFieldControl() {\n if (!this._control && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n throw getMatFormFieldMissingControlError();\n }\n }\n _updateFocusState() {\n // Usually the MDC foundation would call \"activateFocus\" and \"deactivateFocus\" whenever\n // certain DOM events are emitted. This is not possible in our implementation of the\n // form field because we support abstract form field controls which are not necessarily\n // of type input, nor do we have a reference to a native form field control element. Instead\n // we handle the focus by checking if the abstract form field control focused state changes.\n if (this._control.focused && !this._isFocused) {\n this._isFocused = true;\n this._lineRipple?.activate();\n } else if (!this._control.focused && (this._isFocused || this._isFocused === null)) {\n this._isFocused = false;\n this._lineRipple?.deactivate();\n }\n this._textField?.nativeElement.classList.toggle('mdc-text-field--focused', this._control.focused);\n }\n /**\n * The floating label in the docked state needs to account for prefixes. The horizontal offset\n * is calculated whenever the appearance changes to `outline`, the prefixes change, or when the\n * form field is added to the DOM. This method sets up all subscriptions which are needed to\n * trigger the label offset update.\n */\n _initializeOutlineLabelOffsetSubscriptions() {\n // Whenever the prefix changes, schedule an update of the label offset.\n // TODO(mmalerba): Use ResizeObserver to better support dynamically changing prefix content.\n this._prefixChildren.changes.subscribe(() => this._needsOutlineLabelOffsetUpdate = true);\n // TODO(mmalerba): Split this into separate `afterRender` calls using the `EarlyRead` and\n // `Write` phases.\n afterRender(() => {\n if (this._needsOutlineLabelOffsetUpdate) {\n this._needsOutlineLabelOffsetUpdate = false;\n this._updateOutlineLabelOffset();\n }\n }, {\n injector: this._injector\n });\n this._dir.change.pipe(takeUntil(this._destroyed)).subscribe(() => this._needsOutlineLabelOffsetUpdate = true);\n }\n /** Whether the floating label should always float or not. */\n _shouldAlwaysFloat() {\n return this.floatLabel === 'always';\n }\n _hasOutline() {\n return this.appearance === 'outline';\n }\n /**\n * Whether the label should display in the infix. Labels in the outline appearance are\n * displayed as part of the notched-outline and are horizontally offset to account for\n * form field prefix content. This won't work in server side rendering since we cannot\n * measure the width of the prefix container. To make the docked label appear as if the\n * right offset has been calculated, we forcibly render the label inside the infix. Since\n * the label is part of the infix, the label cannot overflow the prefix content.\n */\n _forceDisplayInfixLabel() {\n return !this._platform.isBrowser && this._prefixChildren.length && !this._shouldLabelFloat();\n }\n _shouldLabelFloat() {\n if (!this._hasFloatingLabel()) {\n return false;\n }\n return this._control.shouldLabelFloat || this._shouldAlwaysFloat();\n }\n /**\n * Determines whether a class from the AbstractControlDirective\n * should be forwarded to the host element.\n */\n _shouldForward(prop) {\n const control = this._control ? this._control.ngControl : null;\n return control && control[prop];\n }\n /** Determines whether to display hints or errors. */\n _getDisplayedMessages() {\n return this._errorChildren && this._errorChildren.length > 0 && this._control.errorState ? 'error' : 'hint';\n }\n /** Handle label resize events. */\n _handleLabelResized() {\n this._refreshOutlineNotchWidth();\n }\n /** Refreshes the width of the outline-notch, if present. */\n _refreshOutlineNotchWidth() {\n if (!this._hasOutline() || !this._floatingLabel || !this._shouldLabelFloat()) {\n this._notchedOutline?._setNotchWidth(0);\n } else {\n this._notchedOutline?._setNotchWidth(this._floatingLabel.getWidth());\n }\n }\n /** Does any extra processing that is required when handling the hints. */\n _processHints() {\n this._validateHints();\n this._syncDescribedByIds();\n }\n /**\n * Ensure that there is a maximum of one of each \"mat-hint\" alignment specified. The hint\n * label specified set through the input is being considered as \"start\" aligned.\n *\n * This method is a noop if Angular runs in production mode.\n */\n _validateHints() {\n if (this._hintChildren && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n let startHint;\n let endHint;\n this._hintChildren.forEach(hint => {\n if (hint.align === 'start') {\n if (startHint || this.hintLabel) {\n throw getMatFormFieldDuplicatedHintError('start');\n }\n startHint = hint;\n } else if (hint.align === 'end') {\n if (endHint) {\n throw getMatFormFieldDuplicatedHintError('end');\n }\n endHint = hint;\n }\n });\n }\n }\n /**\n * Sets the list of element IDs that describe the child control. This allows the control to update\n * its `aria-describedby` attribute accordingly.\n */\n _syncDescribedByIds() {\n if (this._control) {\n let ids = [];\n // TODO(wagnermaciel): Remove the type check when we find the root cause of this bug.\n if (this._control.userAriaDescribedBy && typeof this._control.userAriaDescribedBy === 'string') {\n ids.push(...this._control.userAriaDescribedBy.split(' '));\n }\n if (this._getDisplayedMessages() === 'hint') {\n const startHint = this._hintChildren ? this._hintChildren.find(hint => hint.align === 'start') : null;\n const endHint = this._hintChildren ? this._hintChildren.find(hint => hint.align === 'end') : null;\n if (startHint) {\n ids.push(startHint.id);\n } else if (this._hintLabel) {\n ids.push(this._hintLabelId);\n }\n if (endHint) {\n ids.push(endHint.id);\n }\n } else if (this._errorChildren) {\n ids.push(...this._errorChildren.map(error => error.id));\n }\n this._control.setDescribedByIds(ids);\n }\n }\n /**\n * Updates the horizontal offset of the label in the outline appearance. In the outline\n * appearance, the notched-outline and label are not relative to the infix container because\n * the outline intends to surround prefixes, suffixes and the infix. This means that the\n * floating label by default overlaps prefixes in the docked state. To avoid this, we need to\n * horizontally offset the label by the width of the prefix container. The MDC text-field does\n * not need to do this because they use a fixed width for prefixes. Hence, they can simply\n * incorporate the horizontal offset into their default text-field styles.\n */\n _updateOutlineLabelOffset() {\n if (!this._hasOutline() || !this._floatingLabel) {\n return;\n }\n const floatingLabel = this._floatingLabel.element;\n // If no prefix is displayed, reset the outline label offset from potential\n // previous label offset updates.\n if (!(this._iconPrefixContainer || this._textPrefixContainer)) {\n floatingLabel.style.transform = '';\n return;\n }\n // If the form field is not attached to the DOM yet (e.g. in a tab), we defer\n // the label offset update until the zone stabilizes.\n if (!this._isAttachedToDom()) {\n this._needsOutlineLabelOffsetUpdate = true;\n return;\n }\n const iconPrefixContainer = this._iconPrefixContainer?.nativeElement;\n const textPrefixContainer = this._textPrefixContainer?.nativeElement;\n const iconSuffixContainer = this._iconSuffixContainer?.nativeElement;\n const textSuffixContainer = this._textSuffixContainer?.nativeElement;\n const iconPrefixContainerWidth = iconPrefixContainer?.getBoundingClientRect().width ?? 0;\n const textPrefixContainerWidth = textPrefixContainer?.getBoundingClientRect().width ?? 0;\n const iconSuffixContainerWidth = iconSuffixContainer?.getBoundingClientRect().width ?? 0;\n const textSuffixContainerWidth = textSuffixContainer?.getBoundingClientRect().width ?? 0;\n // If the directionality is RTL, the x-axis transform needs to be inverted. This\n // is because `transformX` does not change based on the page directionality.\n const negate = this._dir.value === 'rtl' ? '-1' : '1';\n const prefixWidth = `${iconPrefixContainerWidth + textPrefixContainerWidth}px`;\n const labelOffset = `var(--mat-mdc-form-field-label-offset-x, 0px)`;\n const labelHorizontalOffset = `calc(${negate} * (${prefixWidth} + ${labelOffset}))`;\n // Update the translateX of the floating label to account for the prefix container,\n // but allow the CSS to override this setting via a CSS variable when the label is\n // floating.\n floatingLabel.style.transform = `var(\n --mat-mdc-form-field-label-transform,\n ${FLOATING_LABEL_DEFAULT_DOCKED_TRANSFORM} translateX(${labelHorizontalOffset})\n )`;\n // Prevent the label from overlapping the suffix when in resting position.\n const prefixAndSuffixWidth = iconPrefixContainerWidth + textPrefixContainerWidth + iconSuffixContainerWidth + textSuffixContainerWidth;\n this._elementRef.nativeElement.style.setProperty('--mat-form-field-notch-max-width', `calc(100% - ${prefixAndSuffixWidth}px)`);\n }\n /** Checks whether the form field is attached to the DOM. */\n _isAttachedToDom() {\n const element = this._elementRef.nativeElement;\n if (element.getRootNode) {\n const rootNode = element.getRootNode();\n // If the element is inside the DOM the root node will be either the document\n // or the closest shadow root, otherwise it'll be the element itself.\n return rootNode && rootNode !== element;\n }\n // Otherwise fall back to checking if it's in the document. This doesn't account for\n // shadow DOM, however browser that support shadow DOM should support `getRootNode` as well.\n return document.documentElement.contains(element);\n }\n static {\n this.ɵfac = function MatFormField_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || MatFormField)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.NgZone), i0.ɵɵdirectiveInject(i1.Directionality), i0.ɵɵdirectiveInject(i2.Platform), i0.ɵɵdirectiveInject(MAT_FORM_FIELD_DEFAULT_OPTIONS, 8), i0.ɵɵdirectiveInject(ANIMATION_MODULE_TYPE, 8), i0.ɵɵdirectiveInject(DOCUMENT));\n };\n }\n static {\n this.ɵcmp = /* @__PURE__ */i0.ɵɵdefineComponent({\n type: MatFormField,\n selectors: [[\"mat-form-field\"]],\n contentQueries: function MatFormField_ContentQueries(rf, ctx, dirIndex) {\n if (rf & 1) {\n i0.ɵɵcontentQuerySignal(dirIndex, ctx._labelChild, MatLabel, 5);\n i0.ɵɵcontentQuery(dirIndex, MatFormFieldControl, 5);\n i0.ɵɵcontentQuery(dirIndex, MAT_PREFIX, 5);\n i0.ɵɵcontentQuery(dirIndex, MAT_SUFFIX, 5);\n i0.ɵɵcontentQuery(dirIndex, MAT_ERROR, 5);\n i0.ɵɵcontentQuery(dirIndex, MatHint, 5);\n }\n if (rf & 2) {\n i0.ɵɵqueryAdvance();\n let _t;\n i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx._formFieldControl = _t.first);\n i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx._prefixChildren = _t);\n i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx._suffixChildren = _t);\n i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx._errorChildren = _t);\n i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx._hintChildren = _t);\n }\n },\n viewQuery: function MatFormField_Query(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵviewQuery(_c3, 5);\n i0.ɵɵviewQuery(_c4, 5);\n i0.ɵɵviewQuery(_c5, 5);\n i0.ɵɵviewQuery(_c6, 5);\n i0.ɵɵviewQuery(_c7, 5);\n i0.ɵɵviewQuery(MatFormFieldFloatingLabel, 5);\n i0.ɵɵviewQuery(MatFormFieldNotchedOutline, 5);\n i0.ɵɵviewQuery(MatFormFieldLineRipple, 5);\n }\n if (rf & 2) {\n let _t;\n i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx._textField = _t.first);\n i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx._iconPrefixContainer = _t.first);\n i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx._textPrefixContainer = _t.first);\n i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx._iconSuffixContainer = _t.first);\n i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx._textSuffixContainer = _t.first);\n i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx._floatingLabel = _t.first);\n i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx._notchedOutline = _t.first);\n i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx._lineRipple = _t.first);\n }\n },\n hostAttrs: [1, \"mat-mdc-form-field\"],\n hostVars: 42,\n hostBindings: function MatFormField_HostBindings(rf, ctx) {\n if (rf & 2) {\n i0.ɵɵclassProp(\"mat-mdc-form-field-label-always-float\", ctx._shouldAlwaysFloat())(\"mat-mdc-form-field-has-icon-prefix\", ctx._hasIconPrefix)(\"mat-mdc-form-field-has-icon-suffix\", ctx._hasIconSuffix)(\"mat-form-field-invalid\", ctx._control.errorState)(\"mat-form-field-disabled\", ctx._control.disabled)(\"mat-form-field-autofilled\", ctx._control.autofilled)(\"mat-form-field-no-animations\", ctx._animationMode === \"NoopAnimations\")(\"mat-form-field-appearance-fill\", ctx.appearance == \"fill\")(\"mat-form-field-appearance-outline\", ctx.appearance == \"outline\")(\"mat-form-field-hide-placeholder\", ctx._hasFloatingLabel() && !ctx._shouldLabelFloat())(\"mat-focused\", ctx._control.focused)(\"mat-primary\", ctx.color !== \"accent\" && ctx.color !== \"warn\")(\"mat-accent\", ctx.color === \"accent\")(\"mat-warn\", ctx.color === \"warn\")(\"ng-untouched\", ctx._shouldForward(\"untouched\"))(\"ng-touched\", ctx._shouldForward(\"touched\"))(\"ng-pristine\", ctx._shouldForward(\"pristine\"))(\"ng-dirty\", ctx._shouldForward(\"dirty\"))(\"ng-valid\", ctx._shouldForward(\"valid\"))(\"ng-invalid\", ctx._shouldForward(\"invalid\"))(\"ng-pending\", ctx._shouldForward(\"pending\"));\n }\n },\n inputs: {\n hideRequiredMarker: \"hideRequiredMarker\",\n color: \"color\",\n floatLabel: \"floatLabel\",\n appearance: \"appearance\",\n subscriptSizing: \"subscriptSizing\",\n hintLabel: \"hintLabel\"\n },\n exportAs: [\"matFormField\"],\n standalone: true,\n features: [i0.ɵɵProvidersFeature([{\n provide: MAT_FORM_FIELD,\n useExisting: MatFormField\n }, {\n provide: FLOATING_LABEL_PARENT,\n useExisting: MatFormField\n }]), i0.ɵɵStandaloneFeature],\n ngContentSelectors: _c9,\n decls: 18,\n vars: 21,\n consts: [[\"labelTemplate\", \"\"], [\"textField\", \"\"], [\"iconPrefixContainer\", \"\"], [\"textPrefixContainer\", \"\"], [\"textSuffixContainer\", \"\"], [\"iconSuffixContainer\", \"\"], [1, \"mat-mdc-text-field-wrapper\", \"mdc-text-field\", 3, \"click\"], [1, \"mat-mdc-form-field-focus-overlay\"], [1, \"mat-mdc-form-field-flex\"], [\"matFormFieldNotchedOutline\", \"\", 3, \"matFormFieldNotchedOutlineOpen\"], [1, \"mat-mdc-form-field-icon-prefix\"], [1, \"mat-mdc-form-field-text-prefix\"], [1, \"mat-mdc-form-field-infix\"], [3, \"ngTemplateOutlet\"], [1, \"mat-mdc-form-field-text-suffix\"], [1, \"mat-mdc-form-field-icon-suffix\"], [\"matFormFieldLineRipple\", \"\"], [1, \"mat-mdc-form-field-subscript-wrapper\", \"mat-mdc-form-field-bottom-align\"], [1, \"mat-mdc-form-field-error-wrapper\"], [1, \"mat-mdc-form-field-hint-wrapper\"], [\"matFormFieldFloatingLabel\", \"\", 3, \"floating\", \"monitorResize\", \"id\"], [\"aria-hidden\", \"true\", 1, \"mat-mdc-form-field-required-marker\", \"mdc-floating-label--required\"], [3, \"id\"], [1, \"mat-mdc-form-field-hint-spacer\"]],\n template: function MatFormField_Template(rf, ctx) {\n if (rf & 1) {\n const _r1 = i0.ɵɵgetCurrentView();\n i0.ɵɵprojectionDef(_c8);\n i0.ɵɵtemplate(0, MatFormField_ng_template_0_Template, 1, 1, \"ng-template\", null, 0, i0.ɵɵtemplateRefExtractor);\n i0.ɵɵelementStart(2, \"div\", 6, 1);\n i0.ɵɵlistener(\"click\", function MatFormField_Template_div_click_2_listener($event) {\n i0.ɵɵrestoreView(_r1);\n return i0.ɵɵresetView(ctx._control.onContainerClick($event));\n });\n i0.ɵɵtemplate(4, MatFormField_Conditional_4_Template, 1, 0, \"div\", 7);\n i0.ɵɵelementStart(5, \"div\", 8);\n i0.ɵɵtemplate(6, MatFormField_Conditional_6_Template, 2, 2, \"div\", 9)(7, MatFormField_Conditional_7_Template, 3, 0, \"div\", 10)(8, MatFormField_Conditional_8_Template, 3, 0, \"div\", 11);\n i0.ɵɵelementStart(9, \"div\", 12);\n i0.ɵɵtemplate(10, MatFormField_Conditional_10_Template, 1, 1, null, 13);\n i0.ɵɵprojection(11);\n i0.ɵɵelementEnd();\n i0.ɵɵtemplate(12, MatFormField_Conditional_12_Template, 3, 0, \"div\", 14)(13, MatFormField_Conditional_13_Template, 3, 0, \"div\", 15);\n i0.ɵɵelementEnd();\n i0.ɵɵtemplate(14, MatFormField_Conditional_14_Template, 1, 0, \"div\", 16);\n i0.ɵɵelementEnd();\n i0.ɵɵelementStart(15, \"div\", 17);\n i0.ɵɵtemplate(16, MatFormField_Case_16_Template, 2, 1, \"div\", 18)(17, MatFormField_Case_17_Template, 5, 2, \"div\", 19);\n i0.ɵɵelementEnd();\n }\n if (rf & 2) {\n let tmp_16_0;\n i0.ɵɵadvance(2);\n i0.ɵɵclassProp(\"mdc-text-field--filled\", !ctx._hasOutline())(\"mdc-text-field--outlined\", ctx._hasOutline())(\"mdc-text-field--no-label\", !ctx._hasFloatingLabel())(\"mdc-text-field--disabled\", ctx._control.disabled)(\"mdc-text-field--invalid\", ctx._control.errorState);\n i0.ɵɵadvance(2);\n i0.ɵɵconditional(!ctx._hasOutline() && !ctx._control.disabled ? 4 : -1);\n i0.ɵɵadvance(2);\n i0.ɵɵconditional(ctx._hasOutline() ? 6 : -1);\n i0.ɵɵadvance();\n i0.ɵɵconditional(ctx._hasIconPrefix ? 7 : -1);\n i0.ɵɵadvance();\n i0.ɵɵconditional(ctx._hasTextPrefix ? 8 : -1);\n i0.ɵɵadvance(2);\n i0.ɵɵconditional(!ctx._hasOutline() || ctx._forceDisplayInfixLabel() ? 10 : -1);\n i0.ɵɵadvance(2);\n i0.ɵɵconditional(ctx._hasTextSuffix ? 12 : -1);\n i0.ɵɵadvance();\n i0.ɵɵconditional(ctx._hasIconSuffix ? 13 : -1);\n i0.ɵɵadvance();\n i0.ɵɵconditional(!ctx._hasOutline() ? 14 : -1);\n i0.ɵɵadvance();\n i0.ɵɵclassProp(\"mat-mdc-form-field-subscript-dynamic-size\", ctx.subscriptSizing === \"dynamic\");\n i0.ɵɵadvance();\n i0.ɵɵconditional((tmp_16_0 = ctx._getDisplayedMessages()) === \"error\" ? 16 : tmp_16_0 === \"hint\" ? 17 : -1);\n }\n },\n dependencies: [MatFormFieldFloatingLabel, MatFormFieldNotchedOutline, NgTemplateOutlet, MatFormFieldLineRipple, MatHint],\n styles: [\".mdc-text-field{display:inline-flex;align-items:baseline;padding:0 16px;position:relative;box-sizing:border-box;overflow:hidden;will-change:opacity,transform,color;border-top-left-radius:4px;border-top-right-radius:4px;border-bottom-right-radius:0;border-bottom-left-radius:0}.mdc-text-field__input{width:100%;min-width:0;border:none;border-radius:0;background:none;padding:0;-moz-appearance:none;-webkit-appearance:none;height:28px}.mdc-text-field__input::-webkit-calendar-picker-indicator{display:none}.mdc-text-field__input::-ms-clear{display:none}.mdc-text-field__input:focus{outline:none}.mdc-text-field__input:invalid{box-shadow:none}.mdc-text-field__input::placeholder{opacity:0}.mdc-text-field__input::-moz-placeholder{opacity:0}.mdc-text-field__input::-webkit-input-placeholder{opacity:0}.mdc-text-field__input:-ms-input-placeholder{opacity:0}.mdc-text-field--no-label .mdc-text-field__input::placeholder,.mdc-text-field--focused .mdc-text-field__input::placeholder{opacity:1}.mdc-text-field--no-label .mdc-text-field__input::-moz-placeholder,.mdc-text-field--focused .mdc-text-field__input::-moz-placeholder{opacity:1}.mdc-text-field--no-label .mdc-text-field__input::-webkit-input-placeholder,.mdc-text-field--focused .mdc-text-field__input::-webkit-input-placeholder{opacity:1}.mdc-text-field--no-label .mdc-text-field__input:-ms-input-placeholder,.mdc-text-field--focused .mdc-text-field__input:-ms-input-placeholder{opacity:1}.mdc-text-field--outlined .mdc-text-field__input,.mdc-text-field--filled.mdc-text-field--no-label .mdc-text-field__input{height:100%}.mdc-text-field--outlined .mdc-text-field__input{display:flex;border:none !important;background-color:rgba(0,0,0,0)}.mdc-text-field--disabled .mdc-text-field__input{pointer-events:auto}.mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-text-field__input{color:var(--mdc-filled-text-field-input-text-color, var(--mat-app-on-surface));caret-color:var(--mdc-filled-text-field-caret-color, var(--mat-app-primary))}.mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-text-field__input::placeholder{color:var(--mdc-filled-text-field-input-text-placeholder-color, var(--mat-app-on-surface-variant))}.mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-text-field__input::-moz-placeholder{color:var(--mdc-filled-text-field-input-text-placeholder-color, var(--mat-app-on-surface-variant))}.mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-text-field__input::-webkit-input-placeholder{color:var(--mdc-filled-text-field-input-text-placeholder-color, var(--mat-app-on-surface-variant))}.mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-text-field__input:-ms-input-placeholder{color:var(--mdc-filled-text-field-input-text-placeholder-color, var(--mat-app-on-surface-variant))}.mdc-text-field--filled.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-text-field__input{caret-color:var(--mdc-filled-text-field-error-caret-color)}.mdc-text-field--filled.mdc-text-field--disabled .mdc-text-field__input{color:var(--mdc-filled-text-field-disabled-input-text-color)}.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-text-field__input{color:var(--mdc-outlined-text-field-input-text-color, var(--mat-app-on-surface));caret-color:var(--mdc-outlined-text-field-caret-color, var(--mat-app-primary))}.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-text-field__input::placeholder{color:var(--mdc-outlined-text-field-input-text-placeholder-color, var(--mat-app-on-surface-variant))}.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-text-field__input::-moz-placeholder{color:var(--mdc-outlined-text-field-input-text-placeholder-color, var(--mat-app-on-surface-variant))}.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-text-field__input::-webkit-input-placeholder{color:var(--mdc-outlined-text-field-input-text-placeholder-color, var(--mat-app-on-surface-variant))}.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-text-field__input:-ms-input-placeholder{color:var(--mdc-outlined-text-field-input-text-placeholder-color, var(--mat-app-on-surface-variant))}.mdc-text-field--outlined.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-text-field__input{caret-color:var(--mdc-outlined-text-field-error-caret-color)}.mdc-text-field--outlined.mdc-text-field--disabled .mdc-text-field__input{color:var(--mdc-outlined-text-field-disabled-input-text-color)}.mdc-text-field--disabled .cdk-high-contrast-active .mdc-text-field__input{background-color:Window}.mdc-text-field--filled{height:56px;border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-left-radius:var(--mdc-filled-text-field-container-shape, var(--mat-app-corner-extra-small-top));border-top-right-radius:var(--mdc-filled-text-field-container-shape, var(--mat-app-corner-extra-small-top))}.mdc-text-field--filled:not(.mdc-text-field--disabled){background-color:var(--mdc-filled-text-field-container-color, var(--mat-app-surface-variant))}.mdc-text-field--filled.mdc-text-field--disabled{background-color:var(--mdc-filled-text-field-disabled-container-color)}.mdc-text-field--outlined{height:56px;overflow:visible;padding-right:max(16px,var(--mdc-outlined-text-field-container-shape, var(--mat-app-corner-extra-small)));padding-left:max(16px,var(--mdc-outlined-text-field-container-shape, var(--mat-app-corner-extra-small)) + 4px)}[dir=rtl] .mdc-text-field--outlined{padding-right:max(16px,var(--mdc-outlined-text-field-container-shape, var(--mat-app-corner-extra-small)) + 4px);padding-left:max(16px,var(--mdc-outlined-text-field-container-shape, var(--mat-app-corner-extra-small)))}.mdc-floating-label{position:absolute;left:0;transform-origin:left top;line-height:1.15rem;text-align:left;text-overflow:ellipsis;white-space:nowrap;cursor:text;overflow:hidden;will-change:transform}[dir=rtl] .mdc-floating-label{right:0;left:auto;transform-origin:right top;text-align:right}.mdc-text-field .mdc-floating-label{top:50%;transform:translateY(-50%);pointer-events:none}.mdc-notched-outline .mdc-floating-label{display:inline-block;position:relative;max-width:100%}.mdc-text-field--outlined .mdc-floating-label{left:4px;right:auto}[dir=rtl] .mdc-text-field--outlined .mdc-floating-label{left:auto;right:4px}.mdc-text-field--filled .mdc-floating-label{left:16px;right:auto}[dir=rtl] .mdc-text-field--filled .mdc-floating-label{left:auto;right:16px}.mdc-text-field--disabled .mdc-floating-label{cursor:default}.cdk-high-contrast-active .mdc-text-field--disabled .mdc-floating-label{z-index:1}.mdc-text-field--filled.mdc-text-field--no-label .mdc-floating-label{display:none}.mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-floating-label{color:var(--mdc-filled-text-field-label-text-color, var(--mat-app-on-surface-variant))}.mdc-text-field--filled:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-floating-label{color:var(--mdc-filled-text-field-focus-label-text-color, var(--mat-app-primary))}.mdc-text-field--filled:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-floating-label{color:var(--mdc-filled-text-field-hover-label-text-color, var(--mat-app-on-surface-variant))}.mdc-text-field--filled.mdc-text-field--disabled .mdc-floating-label{color:var(--mdc-filled-text-field-disabled-label-text-color)}.mdc-text-field--filled:not(.mdc-text-field--disabled).mdc-text-field--invalid .mdc-floating-label{color:var(--mdc-filled-text-field-error-label-text-color, var(--mat-app-error))}.mdc-text-field--filled:not(.mdc-text-field--disabled).mdc-text-field--invalid.mdc-text-field--focused .mdc-floating-label{color:var(--mdc-filled-text-field-error-focus-label-text-color, var(--mat-app-error))}.mdc-text-field--filled:not(.mdc-text-field--disabled).mdc-text-field--invalid:not(.mdc-text-field--disabled):hover .mdc-floating-label{color:var(--mdc-filled-text-field-error-hover-label-text-color, var(--mat-app-on-error-container))}.mdc-text-field--filled .mdc-floating-label{font-family:var(--mdc-filled-text-field-label-text-font, var(--mat-app-body-large-font));font-size:var(--mdc-filled-text-field-label-text-size, var(--mat-app-body-large-size));font-weight:var(--mdc-filled-text-field-label-text-weight, var(--mat-app-body-large-weight));letter-spacing:var(--mdc-filled-text-field-label-text-tracking, var(--mat-app-body-large-tracking))}.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-floating-label{color:var(--mdc-outlined-text-field-label-text-color, var(--mat-app-on-surface-variant))}.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-floating-label{color:var(--mdc-outlined-text-field-focus-label-text-color, var(--mat-app-primary))}.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-floating-label{color:var(--mdc-outlined-text-field-hover-label-text-color, var(--mat-app-on-surface))}.mdc-text-field--outlined.mdc-text-field--disabled .mdc-floating-label{color:var(--mdc-outlined-text-field-disabled-label-text-color)}.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--invalid .mdc-floating-label{color:var(--mdc-outlined-text-field-error-label-text-color, var(--mat-app-error))}.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--invalid.mdc-text-field--focused .mdc-floating-label{color:var(--mdc-outlined-text-field-error-focus-label-text-color, var(--mat-app-error))}.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--invalid:not(.mdc-text-field--disabled):hover .mdc-floating-label{color:var(--mdc-outlined-text-field-error-hover-label-text-color, var(--mat-app-on-error-container))}.mdc-text-field--outlined .mdc-floating-label{font-family:var(--mdc-outlined-text-field-label-text-font, var(--mat-app-body-large-font));font-size:var(--mdc-outlined-text-field-label-text-size, var(--mat-app-body-large-size));font-weight:var(--mdc-outlined-text-field-label-text-weight, var(--mat-app-body-large-weight));letter-spacing:var(--mdc-outlined-text-field-label-text-tracking, var(--mat-app-body-large-tracking))}.mdc-floating-label--float-above{cursor:auto;transform:translateY(-106%) scale(0.75)}.mdc-text-field--filled .mdc-floating-label--float-above{transform:translateY(-106%) scale(0.75)}.mdc-text-field--outlined .mdc-floating-label--float-above{transform:translateY(-37.25px) scale(1);font-size:.75rem}.mdc-notched-outline .mdc-floating-label--float-above{text-overflow:clip}.mdc-notched-outline--upgraded .mdc-floating-label--float-above{max-width:133.3333333333%}.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above,.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{transform:translateY(-34.75px) scale(0.75)}.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above,.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{font-size:1rem}.mdc-floating-label--required:not(.mdc-floating-label--hide-required-marker)::after{margin-left:1px;margin-right:0;content:\\\"*\\\"}[dir=rtl] .mdc-floating-label--required:not(.mdc-floating-label--hide-required-marker)::after{margin-left:0;margin-right:1px}.mdc-notched-outline{display:flex;position:absolute;top:0;right:0;left:0;box-sizing:border-box;width:100%;max-width:100%;height:100%;text-align:left;pointer-events:none}[dir=rtl] .mdc-notched-outline{text-align:right}.mdc-text-field--outlined .mdc-notched-outline{z-index:1}.mat-mdc-notch-piece{box-sizing:border-box;height:100%;pointer-events:none;border-top:1px solid;border-bottom:1px solid}.mdc-text-field--focused .mat-mdc-notch-piece{border-width:2px}.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mat-mdc-notch-piece{border-color:var(--mdc-outlined-text-field-outline-color, var(--mat-app-outline));border-width:var(--mdc-outlined-text-field-outline-width)}.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mat-mdc-notch-piece{border-color:var(--mdc-outlined-text-field-hover-outline-color, var(--mat-app-on-surface))}.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mat-mdc-notch-piece{border-color:var(--mdc-outlined-text-field-focus-outline-color, var(--mat-app-primary))}.mdc-text-field--outlined.mdc-text-field--disabled .mat-mdc-notch-piece{border-color:var(--mdc-outlined-text-field-disabled-outline-color)}.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--invalid .mat-mdc-notch-piece{border-color:var(--mdc-outlined-text-field-error-outline-color, var(--mat-app-error))}.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--invalid:not(.mdc-text-field--focused):hover .mdc-notched-outline .mat-mdc-notch-piece{border-color:var(--mdc-outlined-text-field-error-hover-outline-color, var(--mat-app-on-error-container))}.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--invalid.mdc-text-field--focused .mat-mdc-notch-piece{border-color:var(--mdc-outlined-text-field-error-focus-outline-color, var(--mat-app-error))}.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline .mat-mdc-notch-piece{border-width:var(--mdc-outlined-text-field-focus-outline-width)}.mdc-notched-outline__leading{border-left:1px solid;border-right:none;border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:var(--mdc-outlined-text-field-container-shape, var(--mat-app-corner-extra-small));border-bottom-left-radius:var(--mdc-outlined-text-field-container-shape, var(--mat-app-corner-extra-small))}.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading{width:max(12px,var(--mdc-outlined-text-field-container-shape, var(--mat-app-corner-extra-small)))}[dir=rtl] .mdc-notched-outline__leading{border-left:none;border-right:1px solid;border-bottom-left-radius:0;border-top-left-radius:0;border-top-right-radius:var(--mdc-outlined-text-field-container-shape, var(--mat-app-corner-extra-small));border-bottom-right-radius:var(--mdc-outlined-text-field-container-shape, var(--mat-app-corner-extra-small))}.mdc-notched-outline__trailing{flex-grow:1;border-left:none;border-right:1px solid;border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--mdc-outlined-text-field-container-shape, var(--mat-app-corner-extra-small));border-bottom-right-radius:var(--mdc-outlined-text-field-container-shape, var(--mat-app-corner-extra-small))}[dir=rtl] .mdc-notched-outline__trailing{border-left:1px solid;border-right:none;border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:var(--mdc-outlined-text-field-container-shape, var(--mat-app-corner-extra-small));border-bottom-left-radius:var(--mdc-outlined-text-field-container-shape, var(--mat-app-corner-extra-small))}.mdc-notched-outline__notch{flex:0 0 auto;width:auto}.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__notch{max-width:min(var(--mat-form-field-notch-max-width, 100%),100% - max(12px,var(--mdc-outlined-text-field-container-shape, var(--mat-app-corner-extra-small)))*2)}.mdc-text-field--outlined .mdc-notched-outline--notched .mdc-notched-outline__notch{padding-top:1px}.mdc-text-field--focused.mdc-text-field--outlined .mdc-notched-outline--notched .mdc-notched-outline__notch{padding-top:2px}.mdc-notched-outline--notched .mdc-notched-outline__notch{padding-left:0;padding-right:8px;border-top:none;--mat-form-field-notch-max-width: 100%}[dir=rtl] .mdc-notched-outline--notched .mdc-notched-outline__notch{padding-left:8px;padding-right:0}.mdc-notched-outline--no-label .mdc-notched-outline__notch{display:none}.mdc-line-ripple::before,.mdc-line-ripple::after{position:absolute;bottom:0;left:0;width:100%;border-bottom-style:solid;content:\\\"\\\"}.mdc-line-ripple::before{z-index:1;border-bottom-width:var(--mdc-filled-text-field-active-indicator-height)}.mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-line-ripple::before{border-bottom-color:var(--mdc-filled-text-field-active-indicator-color, var(--mat-app-on-surface-variant))}.mdc-text-field--filled:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-line-ripple::before{border-bottom-color:var(--mdc-filled-text-field-hover-active-indicator-color, var(--mat-app-on-surface))}.mdc-text-field--filled.mdc-text-field--disabled .mdc-line-ripple::before{border-bottom-color:var(--mdc-filled-text-field-disabled-active-indicator-color)}.mdc-text-field--filled:not(.mdc-text-field--disabled).mdc-text-field--invalid .mdc-line-ripple::before{border-bottom-color:var(--mdc-filled-text-field-error-active-indicator-color, var(--mat-app-error))}.mdc-text-field--filled:not(.mdc-text-field--disabled).mdc-text-field--invalid:not(.mdc-text-field--focused):hover .mdc-line-ripple::before{border-bottom-color:var(--mdc-filled-text-field-error-hover-active-indicator-color, var(--mat-app-on-error-container))}.mdc-line-ripple::after{transform:scaleX(0);opacity:0;z-index:2}.mdc-text-field--filled .mdc-line-ripple::after{border-bottom-width:var(--mdc-filled-text-field-focus-active-indicator-height)}.mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-line-ripple::after{border-bottom-color:var(--mdc-filled-text-field-focus-active-indicator-color, var(--mat-app-primary))}.mdc-text-field--filled.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-line-ripple::after{border-bottom-color:var(--mdc-filled-text-field-error-focus-active-indicator-color, var(--mat-app-error))}.mdc-line-ripple--active::after{transform:scaleX(1);opacity:1}.mdc-line-ripple--deactivating::after{opacity:0}.mdc-text-field--disabled{pointer-events:none}.mat-mdc-form-field-textarea-control{vertical-align:middle;resize:vertical;box-sizing:border-box;height:auto;margin:0;padding:0;border:none;overflow:auto}.mat-mdc-form-field-input-control.mat-mdc-form-field-input-control{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font:inherit;letter-spacing:inherit;text-decoration:inherit;text-transform:inherit;border:none}.mat-mdc-form-field .mat-mdc-floating-label.mdc-floating-label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;line-height:normal;pointer-events:all;will-change:auto}.mat-mdc-form-field:not(.mat-form-field-disabled) .mat-mdc-floating-label.mdc-floating-label{cursor:inherit}.mdc-text-field--no-label:not(.mdc-text-field--textarea) .mat-mdc-form-field-input-control.mdc-text-field__input,.mat-mdc-text-field-wrapper .mat-mdc-form-field-input-control{height:auto}.mat-mdc-text-field-wrapper .mat-mdc-form-field-input-control.mdc-text-field__input[type=color]{height:23px}.mat-mdc-text-field-wrapper{height:auto;flex:auto;will-change:auto}.mat-mdc-form-field-has-icon-prefix .mat-mdc-text-field-wrapper{padding-left:0;--mat-mdc-form-field-label-offset-x: -16px}.mat-mdc-form-field-has-icon-suffix .mat-mdc-text-field-wrapper{padding-right:0}[dir=rtl] .mat-mdc-text-field-wrapper{padding-left:16px;padding-right:16px}[dir=rtl] .mat-mdc-form-field-has-icon-suffix .mat-mdc-text-field-wrapper{padding-left:0}[dir=rtl] .mat-mdc-form-field-has-icon-prefix .mat-mdc-text-field-wrapper{padding-right:0}.mat-form-field-disabled .mdc-text-field__input::placeholder{color:var(--mat-form-field-disabled-input-text-placeholder-color)}.mat-form-field-disabled .mdc-text-field__input::-moz-placeholder{color:var(--mat-form-field-disabled-input-text-placeholder-color)}.mat-form-field-disabled .mdc-text-field__input::-webkit-input-placeholder{color:var(--mat-form-field-disabled-input-text-placeholder-color)}.mat-form-field-disabled .mdc-text-field__input:-ms-input-placeholder{color:var(--mat-form-field-disabled-input-text-placeholder-color)}.mat-mdc-form-field-label-always-float .mdc-text-field__input::placeholder{transition-delay:40ms;transition-duration:110ms;opacity:1}.mat-mdc-text-field-wrapper .mat-mdc-form-field-infix .mat-mdc-floating-label{left:auto;right:auto}.mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-text-field__input{display:inline-block}.mat-mdc-form-field .mat-mdc-text-field-wrapper.mdc-text-field .mdc-notched-outline__notch{padding-top:0}.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field .mdc-notched-outline__notch{border-left:1px solid rgba(0,0,0,0)}[dir=rtl] .mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field .mdc-notched-outline__notch{border-left:none;border-right:1px solid rgba(0,0,0,0)}.mat-mdc-form-field-infix{min-height:var(--mat-form-field-container-height);padding-top:var(--mat-form-field-filled-with-label-container-padding-top);padding-bottom:var(--mat-form-field-filled-with-label-container-padding-bottom)}.mdc-text-field--outlined .mat-mdc-form-field-infix,.mdc-text-field--no-label .mat-mdc-form-field-infix{padding-top:var(--mat-form-field-container-vertical-padding);padding-bottom:var(--mat-form-field-container-vertical-padding)}.mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:calc(var(--mat-form-field-container-height)/2)}.mdc-text-field--filled .mat-mdc-floating-label{display:var(--mat-form-field-filled-label-display, block)}.mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{--mat-mdc-form-field-label-transform: translateY(calc(calc(6.75px + var(--mat-form-field-container-height) / 2) * -1)) scale(var(--mat-mdc-form-field-floating-label-scale, 0.75));transform:var(--mat-mdc-form-field-label-transform)}.mat-mdc-form-field-subscript-wrapper{box-sizing:border-box;width:100%;position:relative}.mat-mdc-form-field-hint-wrapper,.mat-mdc-form-field-error-wrapper{position:absolute;top:0;left:0;right:0;padding:0 16px}.mat-mdc-form-field-subscript-dynamic-size .mat-mdc-form-field-hint-wrapper,.mat-mdc-form-field-subscript-dynamic-size .mat-mdc-form-field-error-wrapper{position:static}.mat-mdc-form-field-bottom-align::before{content:\\\"\\\";display:inline-block;height:16px}.mat-mdc-form-field-bottom-align.mat-mdc-form-field-subscript-dynamic-size::before{content:unset}.mat-mdc-form-field-hint-end{order:1}.mat-mdc-form-field-hint-wrapper{display:flex}.mat-mdc-form-field-hint-spacer{flex:1 0 1em}.mat-mdc-form-field-error{display:block;color:var(--mat-form-field-error-text-color, var(--mat-app-error))}.mat-mdc-form-field-subscript-wrapper,.mat-mdc-form-field-bottom-align::before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--mat-form-field-subscript-text-font, var(--mat-app-body-small-font));line-height:var(--mat-form-field-subscript-text-line-height, var(--mat-app-body-small-line-height));font-size:var(--mat-form-field-subscript-text-size, var(--mat-app-body-small-size));letter-spacing:var(--mat-form-field-subscript-text-tracking, var(--mat-app-body-small-tracking));font-weight:var(--mat-form-field-subscript-text-weight, var(--mat-app-body-small-weight))}.mat-mdc-form-field-focus-overlay{top:0;left:0;right:0;bottom:0;position:absolute;opacity:0;pointer-events:none;background-color:var(--mat-form-field-state-layer-color, var(--mat-app-on-surface))}.mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-focus-overlay{opacity:var(--mat-form-field-hover-state-layer-opacity, var(--mat-app-hover-state-layer-opacity))}.mat-mdc-form-field.mat-focused .mat-mdc-form-field-focus-overlay{opacity:var(--mat-form-field-focus-state-layer-opacity)}select.mat-mdc-form-field-input-control{-moz-appearance:none;-webkit-appearance:none;background-color:rgba(0,0,0,0);display:inline-flex;box-sizing:border-box}select.mat-mdc-form-field-input-control:not(:disabled){cursor:pointer}select.mat-mdc-form-field-input-control:not(.mat-mdc-native-select-inline) option{color:var(--mat-form-field-select-option-text-color)}select.mat-mdc-form-field-input-control:not(.mat-mdc-native-select-inline) option:disabled{color:var(--mat-form-field-select-disabled-option-text-color)}.mat-mdc-form-field-type-mat-native-select .mat-mdc-form-field-infix::after{content:\\\"\\\";width:0;height:0;border-left:5px solid rgba(0,0,0,0);border-right:5px solid rgba(0,0,0,0);border-top:5px solid;position:absolute;right:0;top:50%;margin-top:-2.5px;pointer-events:none;color:var(--mat-form-field-enabled-select-arrow-color, var(--mat-app-on-surface-variant))}[dir=rtl] .mat-mdc-form-field-type-mat-native-select .mat-mdc-form-field-infix::after{right:auto;left:0}.mat-mdc-form-field-type-mat-native-select.mat-focused .mat-mdc-form-field-infix::after{color:var(--mat-form-field-focus-select-arrow-color, var(--mat-app-primary))}.mat-mdc-form-field-type-mat-native-select.mat-form-field-disabled .mat-mdc-form-field-infix::after{color:var(--mat-form-field-disabled-select-arrow-color)}.mat-mdc-form-field-type-mat-native-select .mat-mdc-form-field-input-control{padding-right:15px}[dir=rtl] .mat-mdc-form-field-type-mat-native-select .mat-mdc-form-field-input-control{padding-right:0;padding-left:15px}.cdk-high-contrast-active .mat-form-field-appearance-fill .mat-mdc-text-field-wrapper{outline:solid 1px}.cdk-high-contrast-active .mat-form-field-appearance-fill.mat-form-field-disabled .mat-mdc-text-field-wrapper{outline-color:GrayText}.cdk-high-contrast-active .mat-form-field-appearance-fill.mat-focused .mat-mdc-text-field-wrapper{outline:dashed 3px}.cdk-high-contrast-active .mat-mdc-form-field.mat-focused .mdc-notched-outline{border:dashed 3px}.mat-mdc-form-field-input-control[type=date],.mat-mdc-form-field-input-control[type=datetime],.mat-mdc-form-field-input-control[type=datetime-local],.mat-mdc-form-field-input-control[type=month],.mat-mdc-form-field-input-control[type=week],.mat-mdc-form-field-input-control[type=time]{line-height:1}.mat-mdc-form-field-input-control::-webkit-datetime-edit{line-height:1;padding:0;margin-bottom:-2px}.mat-mdc-form-field{--mat-mdc-form-field-floating-label-scale: 0.75;display:inline-flex;flex-direction:column;min-width:0;text-align:left;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--mat-form-field-container-text-font, var(--mat-app-body-large-font));line-height:var(--mat-form-field-container-text-line-height, var(--mat-app-body-large-line-height));font-size:var(--mat-form-field-container-text-size, var(--mat-app-body-large-size));letter-spacing:var(--mat-form-field-container-text-tracking, var(--mat-app-body-large-tracking));font-weight:var(--mat-form-field-container-text-weight, var(--mat-app-body-large-weight))}[dir=rtl] .mat-mdc-form-field{text-align:right}.mat-mdc-form-field .mdc-text-field--outlined .mdc-floating-label--float-above{font-size:calc(var(--mat-form-field-outlined-label-text-populated-size)*var(--mat-mdc-form-field-floating-label-scale))}.mat-mdc-form-field .mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{font-size:var(--mat-form-field-outlined-label-text-populated-size)}.mat-mdc-form-field-flex{display:inline-flex;align-items:baseline;box-sizing:border-box;width:100%}.mat-mdc-text-field-wrapper{width:100%;z-index:0}.mat-mdc-form-field-icon-prefix,.mat-mdc-form-field-icon-suffix{align-self:center;line-height:0;pointer-events:auto;position:relative;z-index:1}.mat-mdc-form-field-icon-prefix>.mat-icon,.mat-mdc-form-field-icon-suffix>.mat-icon{padding:0 12px;box-sizing:content-box}.mat-mdc-form-field-icon-prefix{color:var(--mat-form-field-leading-icon-color, var(--mat-app-on-surface-variant))}.mat-form-field-disabled .mat-mdc-form-field-icon-prefix{color:var(--mat-form-field-disabled-leading-icon-color)}.mat-mdc-form-field-icon-suffix{color:var(--mat-form-field-trailing-icon-color, var(--mat-app-on-surface-variant))}.mat-form-field-disabled .mat-mdc-form-field-icon-suffix{color:var(--mat-form-field-disabled-trailing-icon-color)}.mat-form-field-invalid .mat-mdc-form-field-icon-suffix{color:var(--mat-form-field-error-trailing-icon-color, var(--mat-app-error))}.mat-form-field-invalid:not(.mat-focused):not(.mat-form-field-disabled) .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-icon-suffix{color:var(--mat-form-field-error-hover-trailing-icon-color, var(--mat-app-on-error-container))}.mat-form-field-invalid.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-icon-suffix{color:var(--mat-form-field-error-focus-trailing-icon-color, var(--mat-app-error))}.mat-mdc-form-field-icon-prefix,[dir=rtl] .mat-mdc-form-field-icon-suffix{padding:0 4px 0 0}.mat-mdc-form-field-icon-suffix,[dir=rtl] .mat-mdc-form-field-icon-prefix{padding:0 0 0 4px}.mat-mdc-form-field-subscript-wrapper .mat-icon,.mat-mdc-form-field label .mat-icon{width:1em;height:1em;font-size:inherit}.mat-mdc-form-field-infix{flex:auto;min-width:0;width:180px;position:relative;box-sizing:border-box}.mat-mdc-form-field-infix:has(textarea[cols]){width:auto}.mat-mdc-form-field .mdc-notched-outline__notch{margin-left:-1px;-webkit-clip-path:inset(-9em -999em -9em 1px);clip-path:inset(-9em -999em -9em 1px)}[dir=rtl] .mat-mdc-form-field .mdc-notched-outline__notch{margin-left:0;margin-right:-1px;-webkit-clip-path:inset(-9em 1px -9em -999em);clip-path:inset(-9em 1px -9em -999em)}.mat-mdc-form-field:not(.mat-form-field-no-animations) .mdc-floating-label{transition:transform 150ms cubic-bezier(0.4, 0, 0.2, 1),color 150ms cubic-bezier(0.4, 0, 0.2, 1)}.mat-mdc-form-field:not(.mat-form-field-no-animations) .mdc-text-field__input{transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1)}.mat-mdc-form-field:not(.mat-form-field-no-animations) .mdc-text-field__input::placeholder{transition:opacity 67ms cubic-bezier(0.4, 0, 0.2, 1)}.mat-mdc-form-field:not(.mat-form-field-no-animations) .mdc-text-field__input::-moz-placeholder{transition:opacity 67ms cubic-bezier(0.4, 0, 0.2, 1)}.mat-mdc-form-field:not(.mat-form-field-no-animations) .mdc-text-field__input::-webkit-input-placeholder{transition:opacity 67ms cubic-bezier(0.4, 0, 0.2, 1)}.mat-mdc-form-field:not(.mat-form-field-no-animations) .mdc-text-field__input:-ms-input-placeholder{transition:opacity 67ms cubic-bezier(0.4, 0, 0.2, 1)}.mat-mdc-form-field:not(.mat-form-field-no-animations).mdc-text-field--no-label .mdc-text-field__input::placeholder,.mat-mdc-form-field:not(.mat-form-field-no-animations).mdc-text-field--focused .mdc-text-field__input::placeholder{transition-delay:40ms;transition-duration:110ms}.mat-mdc-form-field:not(.mat-form-field-no-animations).mdc-text-field--no-label .mdc-text-field__input::-moz-placeholder,.mat-mdc-form-field:not(.mat-form-field-no-animations).mdc-text-field--focused .mdc-text-field__input::-moz-placeholder{transition-delay:40ms;transition-duration:110ms}.mat-mdc-form-field:not(.mat-form-field-no-animations).mdc-text-field--no-label .mdc-text-field__input::-webkit-input-placeholder,.mat-mdc-form-field:not(.mat-form-field-no-animations).mdc-text-field--focused .mdc-text-field__input::-webkit-input-placeholder{transition-delay:40ms;transition-duration:110ms}.mat-mdc-form-field:not(.mat-form-field-no-animations).mdc-text-field--no-label .mdc-text-field__input:-ms-input-placeholder,.mat-mdc-form-field:not(.mat-form-field-no-animations).mdc-text-field--focused .mdc-text-field__input:-ms-input-placeholder{transition-delay:40ms;transition-duration:110ms}.mat-mdc-form-field:not(.mat-form-field-no-animations) .mdc-text-field--filled:not(.mdc-ripple-upgraded):focus .mdc-text-field__ripple::before{transition-duration:75ms}.mat-mdc-form-field:not(.mat-form-field-no-animations) .mdc-line-ripple::after{transition:transform 180ms cubic-bezier(0.4, 0, 0.2, 1),opacity 180ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-notched-outline .mdc-floating-label{max-width:calc(100% + 1px)}.mdc-notched-outline--upgraded .mdc-floating-label--float-above{max-width:calc(133.3333333333% + 1px)}\"],\n encapsulation: 2,\n data: {\n animation: [matFormFieldAnimations.transitionMessages]\n },\n changeDetection: 0\n });\n }\n }\n return MatFormField;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\nlet MatFormFieldModule = /*#__PURE__*/(() => {\n class MatFormFieldModule {\n static {\n this.ɵfac = function MatFormFieldModule_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || MatFormFieldModule)();\n };\n }\n static {\n this.ɵmod = /* @__PURE__ */i0.ɵɵdefineNgModule({\n type: MatFormFieldModule\n });\n }\n static {\n this.ɵinj = /* @__PURE__ */i0.ɵɵdefineInjector({\n imports: [MatCommonModule, CommonModule, ObserversModule, MatCommonModule]\n });\n }\n }\n return MatFormFieldModule;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n\n/**\n * Generated bundle index. Do not edit.\n */\n\nexport { MAT_ERROR, MAT_FORM_FIELD, MAT_FORM_FIELD_DEFAULT_OPTIONS, MAT_PREFIX, MAT_SUFFIX, MatError, MatFormField, MatFormFieldControl, MatFormFieldModule, MatHint, MatLabel, MatPrefix, MatSuffix, getMatFormFieldDuplicatedHintError, getMatFormFieldMissingControlError, getMatFormFieldPlaceholderConflictError, matFormFieldAnimations };\n","import * as i1 from '@angular/cdk/platform';\nimport { normalizePassiveListenerOptions } from '@angular/cdk/platform';\nimport * as i0 from '@angular/core';\nimport { Injectable, EventEmitter, Directive, Output, booleanAttribute, Optional, Inject, Input, NgModule } from '@angular/core';\nimport { coerceElement, coerceNumberProperty } from '@angular/cdk/coercion';\nimport { EMPTY, Subject, fromEvent } from 'rxjs';\nimport { auditTime, takeUntil } from 'rxjs/operators';\nimport { DOCUMENT } from '@angular/common';\n\n/** Options to pass to the animationstart listener. */\nconst listenerOptions = /*#__PURE__*/normalizePassiveListenerOptions({\n passive: true\n});\n/**\n * An injectable service that can be used to monitor the autofill state of an input.\n * Based on the following blog post:\n * https://medium.com/@brunn/detecting-autofilled-fields-in-javascript-aed598d25da7\n */\nlet AutofillMonitor = /*#__PURE__*/(() => {\n class AutofillMonitor {\n constructor(_platform, _ngZone) {\n this._platform = _platform;\n this._ngZone = _ngZone;\n this._monitoredElements = new Map();\n }\n monitor(elementOrRef) {\n if (!this._platform.isBrowser) {\n return EMPTY;\n }\n const element = coerceElement(elementOrRef);\n const info = this._monitoredElements.get(element);\n if (info) {\n return info.subject;\n }\n const result = new Subject();\n const cssClass = 'cdk-text-field-autofilled';\n const listener = event => {\n // Animation events fire on initial element render, we check for the presence of the autofill\n // CSS class to make sure this is a real change in state, not just the initial render before\n // we fire off events.\n if (event.animationName === 'cdk-text-field-autofill-start' && !element.classList.contains(cssClass)) {\n element.classList.add(cssClass);\n this._ngZone.run(() => result.next({\n target: event.target,\n isAutofilled: true\n }));\n } else if (event.animationName === 'cdk-text-field-autofill-end' && element.classList.contains(cssClass)) {\n element.classList.remove(cssClass);\n this._ngZone.run(() => result.next({\n target: event.target,\n isAutofilled: false\n }));\n }\n };\n this._ngZone.runOutsideAngular(() => {\n element.addEventListener('animationstart', listener, listenerOptions);\n element.classList.add('cdk-text-field-autofill-monitored');\n });\n this._monitoredElements.set(element, {\n subject: result,\n unlisten: () => {\n element.removeEventListener('animationstart', listener, listenerOptions);\n }\n });\n return result;\n }\n stopMonitoring(elementOrRef) {\n const element = coerceElement(elementOrRef);\n const info = this._monitoredElements.get(element);\n if (info) {\n info.unlisten();\n info.subject.complete();\n element.classList.remove('cdk-text-field-autofill-monitored');\n element.classList.remove('cdk-text-field-autofilled');\n this._monitoredElements.delete(element);\n }\n }\n ngOnDestroy() {\n this._monitoredElements.forEach((_info, element) => this.stopMonitoring(element));\n }\n static {\n this.ɵfac = function AutofillMonitor_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || AutofillMonitor)(i0.ɵɵinject(i1.Platform), i0.ɵɵinject(i0.NgZone));\n };\n }\n static {\n this.ɵprov = /* @__PURE__ */i0.ɵɵdefineInjectable({\n token: AutofillMonitor,\n factory: AutofillMonitor.ɵfac,\n providedIn: 'root'\n });\n }\n }\n return AutofillMonitor;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n/** A directive that can be used to monitor the autofill state of an input. */\nlet CdkAutofill = /*#__PURE__*/(() => {\n class CdkAutofill {\n constructor(_elementRef, _autofillMonitor) {\n this._elementRef = _elementRef;\n this._autofillMonitor = _autofillMonitor;\n /** Emits when the autofill state of the element changes. */\n this.cdkAutofill = new EventEmitter();\n }\n ngOnInit() {\n this._autofillMonitor.monitor(this._elementRef).subscribe(event => this.cdkAutofill.emit(event));\n }\n ngOnDestroy() {\n this._autofillMonitor.stopMonitoring(this._elementRef);\n }\n static {\n this.ɵfac = function CdkAutofill_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || CdkAutofill)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(AutofillMonitor));\n };\n }\n static {\n this.ɵdir = /* @__PURE__ */i0.ɵɵdefineDirective({\n type: CdkAutofill,\n selectors: [[\"\", \"cdkAutofill\", \"\"]],\n outputs: {\n cdkAutofill: \"cdkAutofill\"\n },\n standalone: true\n });\n }\n }\n return CdkAutofill;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n\n/** Directive to automatically resize a textarea to fit its content. */\nlet CdkTextareaAutosize = /*#__PURE__*/(() => {\n class CdkTextareaAutosize {\n /** Minimum amount of rows in the textarea. */\n get minRows() {\n return this._minRows;\n }\n set minRows(value) {\n this._minRows = coerceNumberProperty(value);\n this._setMinHeight();\n }\n /** Maximum amount of rows in the textarea. */\n get maxRows() {\n return this._maxRows;\n }\n set maxRows(value) {\n this._maxRows = coerceNumberProperty(value);\n this._setMaxHeight();\n }\n /** Whether autosizing is enabled or not */\n get enabled() {\n return this._enabled;\n }\n set enabled(value) {\n // Only act if the actual value changed. This specifically helps to not run\n // resizeToFitContent too early (i.e. before ngAfterViewInit)\n if (this._enabled !== value) {\n (this._enabled = value) ? this.resizeToFitContent(true) : this.reset();\n }\n }\n get placeholder() {\n return this._textareaElement.placeholder;\n }\n set placeholder(value) {\n this._cachedPlaceholderHeight = undefined;\n if (value) {\n this._textareaElement.setAttribute('placeholder', value);\n } else {\n this._textareaElement.removeAttribute('placeholder');\n }\n this._cacheTextareaPlaceholderHeight();\n }\n constructor(_elementRef, _platform, _ngZone, /** @breaking-change 11.0.0 make document required */\n document) {\n this._elementRef = _elementRef;\n this._platform = _platform;\n this._ngZone = _ngZone;\n this._destroyed = new Subject();\n this._enabled = true;\n /**\n * Value of minRows as of last resize. If the minRows has decreased, the\n * height of the textarea needs to be recomputed to reflect the new minimum. The maxHeight\n * does not have the same problem because it does not affect the textarea's scrollHeight.\n */\n this._previousMinRows = -1;\n this._isViewInited = false;\n /** Handles `focus` and `blur` events. */\n this._handleFocusEvent = event => {\n this._hasFocus = event.type === 'focus';\n };\n this._document = document;\n this._textareaElement = this._elementRef.nativeElement;\n }\n /** Sets the minimum height of the textarea as determined by minRows. */\n _setMinHeight() {\n const minHeight = this.minRows && this._cachedLineHeight ? `${this.minRows * this._cachedLineHeight}px` : null;\n if (minHeight) {\n this._textareaElement.style.minHeight = minHeight;\n }\n }\n /** Sets the maximum height of the textarea as determined by maxRows. */\n _setMaxHeight() {\n const maxHeight = this.maxRows && this._cachedLineHeight ? `${this.maxRows * this._cachedLineHeight}px` : null;\n if (maxHeight) {\n this._textareaElement.style.maxHeight = maxHeight;\n }\n }\n ngAfterViewInit() {\n if (this._platform.isBrowser) {\n // Remember the height which we started with in case autosizing is disabled\n this._initialHeight = this._textareaElement.style.height;\n this.resizeToFitContent();\n this._ngZone.runOutsideAngular(() => {\n const window = this._getWindow();\n fromEvent(window, 'resize').pipe(auditTime(16), takeUntil(this._destroyed)).subscribe(() => this.resizeToFitContent(true));\n this._textareaElement.addEventListener('focus', this._handleFocusEvent);\n this._textareaElement.addEventListener('blur', this._handleFocusEvent);\n });\n this._isViewInited = true;\n this.resizeToFitContent(true);\n }\n }\n ngOnDestroy() {\n this._textareaElement.removeEventListener('focus', this._handleFocusEvent);\n this._textareaElement.removeEventListener('blur', this._handleFocusEvent);\n this._destroyed.next();\n this._destroyed.complete();\n }\n /**\n * Cache the height of a single-row textarea if it has not already been cached.\n *\n * We need to know how large a single \"row\" of a textarea is in order to apply minRows and\n * maxRows. For the initial version, we will assume that the height of a single line in the\n * textarea does not ever change.\n */\n _cacheTextareaLineHeight() {\n if (this._cachedLineHeight) {\n return;\n }\n // Use a clone element because we have to override some styles.\n let textareaClone = this._textareaElement.cloneNode(false);\n textareaClone.rows = 1;\n // Use `position: absolute` so that this doesn't cause a browser layout and use\n // `visibility: hidden` so that nothing is rendered. Clear any other styles that\n // would affect the height.\n textareaClone.style.position = 'absolute';\n textareaClone.style.visibility = 'hidden';\n textareaClone.style.border = 'none';\n textareaClone.style.padding = '0';\n textareaClone.style.height = '';\n textareaClone.style.minHeight = '';\n textareaClone.style.maxHeight = '';\n // In Firefox it happens that textarea elements are always bigger than the specified amount\n // of rows. This is because Firefox tries to add extra space for the horizontal scrollbar.\n // As a workaround that removes the extra space for the scrollbar, we can just set overflow\n // to hidden. This ensures that there is no invalid calculation of the line height.\n // See Firefox bug report: https://bugzilla.mozilla.org/show_bug.cgi?id=33654\n textareaClone.style.overflow = 'hidden';\n this._textareaElement.parentNode.appendChild(textareaClone);\n this._cachedLineHeight = textareaClone.clientHeight;\n textareaClone.remove();\n // Min and max heights have to be re-calculated if the cached line height changes\n this._setMinHeight();\n this._setMaxHeight();\n }\n _measureScrollHeight() {\n const element = this._textareaElement;\n const previousMargin = element.style.marginBottom || '';\n const isFirefox = this._platform.FIREFOX;\n const needsMarginFiller = isFirefox && this._hasFocus;\n const measuringClass = isFirefox ? 'cdk-textarea-autosize-measuring-firefox' : 'cdk-textarea-autosize-measuring';\n // In some cases the page might move around while we're measuring the `textarea` on Firefox. We\n // work around it by assigning a temporary margin with the same height as the `textarea` so that\n // it occupies the same amount of space. See #23233.\n if (needsMarginFiller) {\n element.style.marginBottom = `${element.clientHeight}px`;\n }\n // Reset the textarea height to auto in order to shrink back to its default size.\n // Also temporarily force overflow:hidden, so scroll bars do not interfere with calculations.\n element.classList.add(measuringClass);\n // The measuring class includes a 2px padding to workaround an issue with Chrome,\n // so we account for that extra space here by subtracting 4 (2px top + 2px bottom).\n const scrollHeight = element.scrollHeight - 4;\n element.classList.remove(measuringClass);\n if (needsMarginFiller) {\n element.style.marginBottom = previousMargin;\n }\n return scrollHeight;\n }\n _cacheTextareaPlaceholderHeight() {\n if (!this._isViewInited || this._cachedPlaceholderHeight != undefined) {\n return;\n }\n if (!this.placeholder) {\n this._cachedPlaceholderHeight = 0;\n return;\n }\n const value = this._textareaElement.value;\n this._textareaElement.value = this._textareaElement.placeholder;\n this._cachedPlaceholderHeight = this._measureScrollHeight();\n this._textareaElement.value = value;\n }\n ngDoCheck() {\n if (this._platform.isBrowser) {\n this.resizeToFitContent();\n }\n }\n /**\n * Resize the textarea to fit its content.\n * @param force Whether to force a height recalculation. By default the height will be\n * recalculated only if the value changed since the last call.\n */\n resizeToFitContent(force = false) {\n // If autosizing is disabled, just skip everything else\n if (!this._enabled) {\n return;\n }\n this._cacheTextareaLineHeight();\n this._cacheTextareaPlaceholderHeight();\n // If we haven't determined the line-height yet, we know we're still hidden and there's no point\n // in checking the height of the textarea.\n if (!this._cachedLineHeight) {\n return;\n }\n const textarea = this._elementRef.nativeElement;\n const value = textarea.value;\n // Only resize if the value or minRows have changed since these calculations can be expensive.\n if (!force && this._minRows === this._previousMinRows && value === this._previousValue) {\n return;\n }\n const scrollHeight = this._measureScrollHeight();\n const height = Math.max(scrollHeight, this._cachedPlaceholderHeight || 0);\n // Use the scrollHeight to know how large the textarea *would* be if fit its entire value.\n textarea.style.height = `${height}px`;\n this._ngZone.runOutsideAngular(() => {\n if (typeof requestAnimationFrame !== 'undefined') {\n requestAnimationFrame(() => this._scrollToCaretPosition(textarea));\n } else {\n setTimeout(() => this._scrollToCaretPosition(textarea));\n }\n });\n this._previousValue = value;\n this._previousMinRows = this._minRows;\n }\n /**\n * Resets the textarea to its original size\n */\n reset() {\n // Do not try to change the textarea, if the initialHeight has not been determined yet\n // This might potentially remove styles when reset() is called before ngAfterViewInit\n if (this._initialHeight !== undefined) {\n this._textareaElement.style.height = this._initialHeight;\n }\n }\n _noopInputHandler() {\n // no-op handler that ensures we're running change detection on input events.\n }\n /** Access injected document if available or fallback to global document reference */\n _getDocument() {\n return this._document || document;\n }\n /** Use defaultView of injected document if available or fallback to global window reference */\n _getWindow() {\n const doc = this._getDocument();\n return doc.defaultView || window;\n }\n /**\n * Scrolls a textarea to the caret position. On Firefox resizing the textarea will\n * prevent it from scrolling to the caret position. We need to re-set the selection\n * in order for it to scroll to the proper position.\n */\n _scrollToCaretPosition(textarea) {\n const {\n selectionStart,\n selectionEnd\n } = textarea;\n // IE will throw an \"Unspecified error\" if we try to set the selection range after the\n // element has been removed from the DOM. Assert that the directive hasn't been destroyed\n // between the time we requested the animation frame and when it was executed.\n // Also note that we have to assert that the textarea is focused before we set the\n // selection range. Setting the selection range on a non-focused textarea will cause\n // it to receive focus on IE and Edge.\n if (!this._destroyed.isStopped && this._hasFocus) {\n textarea.setSelectionRange(selectionStart, selectionEnd);\n }\n }\n static {\n this.ɵfac = function CdkTextareaAutosize_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || CdkTextareaAutosize)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i1.Platform), i0.ɵɵdirectiveInject(i0.NgZone), i0.ɵɵdirectiveInject(DOCUMENT, 8));\n };\n }\n static {\n this.ɵdir = /* @__PURE__ */i0.ɵɵdefineDirective({\n type: CdkTextareaAutosize,\n selectors: [[\"textarea\", \"cdkTextareaAutosize\", \"\"]],\n hostAttrs: [\"rows\", \"1\", 1, \"cdk-textarea-autosize\"],\n hostBindings: function CdkTextareaAutosize_HostBindings(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵlistener(\"input\", function CdkTextareaAutosize_input_HostBindingHandler() {\n return ctx._noopInputHandler();\n });\n }\n },\n inputs: {\n minRows: [0, \"cdkAutosizeMinRows\", \"minRows\"],\n maxRows: [0, \"cdkAutosizeMaxRows\", \"maxRows\"],\n enabled: [2, \"cdkTextareaAutosize\", \"enabled\", booleanAttribute],\n placeholder: \"placeholder\"\n },\n exportAs: [\"cdkTextareaAutosize\"],\n standalone: true,\n features: [i0.ɵɵInputTransformsFeature]\n });\n }\n }\n return CdkTextareaAutosize;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\nlet TextFieldModule = /*#__PURE__*/(() => {\n class TextFieldModule {\n static {\n this.ɵfac = function TextFieldModule_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || TextFieldModule)();\n };\n }\n static {\n this.ɵmod = /* @__PURE__ */i0.ɵɵdefineNgModule({\n type: TextFieldModule\n });\n }\n static {\n this.ɵinj = /* @__PURE__ */i0.ɵɵdefineInjector({});\n }\n }\n return TextFieldModule;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n\n/**\n * Generated bundle index. Do not edit.\n */\n\nexport { AutofillMonitor, CdkAutofill, CdkTextareaAutosize, TextFieldModule };\n","import { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport * as i1 from '@angular/cdk/platform';\nimport { getSupportedInputTypes } from '@angular/cdk/platform';\nimport * as i4 from '@angular/cdk/text-field';\nimport { TextFieldModule } from '@angular/cdk/text-field';\nimport * as i0 from '@angular/core';\nimport { InjectionToken, Directive, Optional, Self, Inject, Input, NgModule } from '@angular/core';\nimport * as i2 from '@angular/forms';\nimport { Validators } from '@angular/forms';\nimport * as i3 from '@angular/material/core';\nimport { _ErrorStateTracker, MatCommonModule } from '@angular/material/core';\nimport * as i5 from '@angular/material/form-field';\nimport { MAT_FORM_FIELD, MatFormFieldControl, MatFormFieldModule } from '@angular/material/form-field';\nexport { MatError, MatFormField, MatHint, MatLabel, MatPrefix, MatSuffix } from '@angular/material/form-field';\nimport { Subject } from 'rxjs';\n\n/** @docs-private */\nfunction getMatInputUnsupportedTypeError(type) {\n return Error(`Input type \"${type}\" isn't supported by matInput.`);\n}\n\n/**\n * This token is used to inject the object whose value should be set into `MatInput`. If none is\n * provided, the native `HTMLInputElement` is used. Directives like `MatDatepickerInput` can provide\n * themselves for this token, in order to make `MatInput` delegate the getting and setting of the\n * value to them.\n */\nconst MAT_INPUT_VALUE_ACCESSOR = /*#__PURE__*/new InjectionToken('MAT_INPUT_VALUE_ACCESSOR');\n\n// Invalid input type. Using one of these will throw an MatInputUnsupportedTypeError.\nconst MAT_INPUT_INVALID_TYPES = ['button', 'checkbox', 'file', 'hidden', 'image', 'radio', 'range', 'reset', 'submit'];\nlet nextUniqueId = 0;\nlet MatInput = /*#__PURE__*/(() => {\n class MatInput {\n /**\n * Implemented as part of MatFormFieldControl.\n * @docs-private\n */\n get disabled() {\n return this._disabled;\n }\n set disabled(value) {\n this._disabled = coerceBooleanProperty(value);\n // Browsers may not fire the blur event if the input is disabled too quickly.\n // Reset from here to ensure that the element doesn't become stuck.\n if (this.focused) {\n this.focused = false;\n this.stateChanges.next();\n }\n }\n /**\n * Implemented as part of MatFormFieldControl.\n * @docs-private\n */\n get id() {\n return this._id;\n }\n set id(value) {\n this._id = value || this._uid;\n }\n /**\n * Implemented as part of MatFormFieldControl.\n * @docs-private\n */\n get required() {\n return this._required ?? this.ngControl?.control?.hasValidator(Validators.required) ?? false;\n }\n set required(value) {\n this._required = coerceBooleanProperty(value);\n }\n /** Input type of the element. */\n get type() {\n return this._type;\n }\n set type(value) {\n this._type = value || 'text';\n this._validateType();\n // When using Angular inputs, developers are no longer able to set the properties on the native\n // input element. To ensure that bindings for `type` work, we need to sync the setter\n // with the native property. Textarea elements don't support the type property or attribute.\n if (!this._isTextarea && getSupportedInputTypes().has(this._type)) {\n this._elementRef.nativeElement.type = this._type;\n }\n this._ensureWheelDefaultBehavior();\n }\n /** An object used to control when error messages are shown. */\n get errorStateMatcher() {\n return this._errorStateTracker.matcher;\n }\n set errorStateMatcher(value) {\n this._errorStateTracker.matcher = value;\n }\n /**\n * Implemented as part of MatFormFieldControl.\n * @docs-private\n */\n get value() {\n return this._inputValueAccessor.value;\n }\n set value(value) {\n if (value !== this.value) {\n this._inputValueAccessor.value = value;\n this.stateChanges.next();\n }\n }\n /** Whether the element is readonly. */\n get readonly() {\n return this._readonly;\n }\n set readonly(value) {\n this._readonly = coerceBooleanProperty(value);\n }\n /** Whether the input is in an error state. */\n get errorState() {\n return this._errorStateTracker.errorState;\n }\n set errorState(value) {\n this._errorStateTracker.errorState = value;\n }\n constructor(_elementRef, _platform, ngControl, parentForm, parentFormGroup, defaultErrorStateMatcher, inputValueAccessor, _autofillMonitor, _ngZone,\n // TODO: Remove this once the legacy appearance has been removed. We only need\n // to inject the form field for determining whether the placeholder has been promoted.\n _formField) {\n this._elementRef = _elementRef;\n this._platform = _platform;\n this.ngControl = ngControl;\n this._autofillMonitor = _autofillMonitor;\n this._ngZone = _ngZone;\n this._formField = _formField;\n this._uid = `mat-input-${nextUniqueId++}`;\n this._webkitBlinkWheelListenerAttached = false;\n /**\n * Implemented as part of MatFormFieldControl.\n * @docs-private\n */\n this.focused = false;\n /**\n * Implemented as part of MatFormFieldControl.\n * @docs-private\n */\n this.stateChanges = new Subject();\n /**\n * Implemented as part of MatFormFieldControl.\n * @docs-private\n */\n this.controlType = 'mat-input';\n /**\n * Implemented as part of MatFormFieldControl.\n * @docs-private\n */\n this.autofilled = false;\n this._disabled = false;\n this._type = 'text';\n this._readonly = false;\n this._neverEmptyInputTypes = ['date', 'datetime', 'datetime-local', 'month', 'time', 'week'].filter(t => getSupportedInputTypes().has(t));\n this._iOSKeyupListener = event => {\n const el = event.target;\n // Note: We specifically check for 0, rather than `!el.selectionStart`, because the two\n // indicate different things. If the value is 0, it means that the caret is at the start\n // of the input, whereas a value of `null` means that the input doesn't support\n // manipulating the selection range. Inputs that don't support setting the selection range\n // will throw an error so we want to avoid calling `setSelectionRange` on them. See:\n // https://html.spec.whatwg.org/multipage/input.html#do-not-apply\n if (!el.value && el.selectionStart === 0 && el.selectionEnd === 0) {\n // Note: Just setting `0, 0` doesn't fix the issue. Setting\n // `1, 1` fixes it for the first time that you type text and\n // then hold delete. Toggling to `1, 1` and then back to\n // `0, 0` seems to completely fix it.\n el.setSelectionRange(1, 1);\n el.setSelectionRange(0, 0);\n }\n };\n this._webkitBlinkWheelListener = () => {\n // This is a noop function and is used to enable mouse wheel input\n // on number inputs\n // on blink and webkit browsers.\n };\n const element = this._elementRef.nativeElement;\n const nodeName = element.nodeName.toLowerCase();\n // If no input value accessor was explicitly specified, use the element as the input value\n // accessor.\n this._inputValueAccessor = inputValueAccessor || element;\n this._previousNativeValue = this.value;\n // Force setter to be called in case id was not specified.\n this.id = this.id;\n // On some versions of iOS the caret gets stuck in the wrong place when holding down the delete\n // key. In order to get around this we need to \"jiggle\" the caret loose. Since this bug only\n // exists on iOS, we only bother to install the listener on iOS.\n if (_platform.IOS) {\n _ngZone.runOutsideAngular(() => {\n _elementRef.nativeElement.addEventListener('keyup', this._iOSKeyupListener);\n });\n }\n this._errorStateTracker = new _ErrorStateTracker(defaultErrorStateMatcher, ngControl, parentFormGroup, parentForm, this.stateChanges);\n this._isServer = !this._platform.isBrowser;\n this._isNativeSelect = nodeName === 'select';\n this._isTextarea = nodeName === 'textarea';\n this._isInFormField = !!_formField;\n if (this._isNativeSelect) {\n this.controlType = element.multiple ? 'mat-native-select-multiple' : 'mat-native-select';\n }\n }\n ngAfterViewInit() {\n if (this._platform.isBrowser) {\n this._autofillMonitor.monitor(this._elementRef.nativeElement).subscribe(event => {\n this.autofilled = event.isAutofilled;\n this.stateChanges.next();\n });\n }\n }\n ngOnChanges() {\n this.stateChanges.next();\n }\n ngOnDestroy() {\n this.stateChanges.complete();\n if (this._platform.isBrowser) {\n this._autofillMonitor.stopMonitoring(this._elementRef.nativeElement);\n }\n if (this._platform.IOS) {\n this._elementRef.nativeElement.removeEventListener('keyup', this._iOSKeyupListener);\n }\n if (this._webkitBlinkWheelListenerAttached) {\n this._elementRef.nativeElement.removeEventListener('wheel', this._webkitBlinkWheelListener);\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 // Since the input isn't a `ControlValueAccessor`, we don't have a good way of knowing when\n // the disabled state has changed. We can't use the `ngControl.statusChanges`, because it\n // won't fire if the input is disabled with `emitEvents = false`, despite the input becoming\n // disabled.\n if (this.ngControl.disabled !== null && this.ngControl.disabled !== this.disabled) {\n this.disabled = this.ngControl.disabled;\n this.stateChanges.next();\n }\n }\n // We need to dirty-check the native element's value, because there are some cases where\n // we won't be notified when it changes (e.g. the consumer isn't using forms or they're\n // updating the value using `emitEvent: false`).\n this._dirtyCheckNativeValue();\n // We need to dirty-check and set the placeholder attribute ourselves, because whether it's\n // present or not depends on a query which is prone to \"changed after checked\" errors.\n this._dirtyCheckPlaceholder();\n }\n /** Focuses the input. */\n focus(options) {\n this._elementRef.nativeElement.focus(options);\n }\n /** Refreshes the error state of the input. */\n updateErrorState() {\n this._errorStateTracker.updateErrorState();\n }\n /** Callback for the cases where the focused state of the input changes. */\n _focusChanged(isFocused) {\n if (isFocused !== this.focused) {\n this.focused = isFocused;\n this.stateChanges.next();\n }\n }\n _onInput() {\n // This is a noop function and is used to let Angular know whenever the value changes.\n // Angular will run a new change detection each time the `input` event has been dispatched.\n // It's necessary that Angular recognizes the value change, because when floatingLabel\n // is set to false and Angular forms aren't used, the placeholder won't recognize the\n // value changes and will not disappear.\n // Listening to the input event wouldn't be necessary when the input is using the\n // FormsModule or ReactiveFormsModule, because Angular forms also listens to input events.\n }\n /** Does some manual dirty checking on the native input `value` property. */\n _dirtyCheckNativeValue() {\n const newValue = this._elementRef.nativeElement.value;\n if (this._previousNativeValue !== newValue) {\n this._previousNativeValue = newValue;\n this.stateChanges.next();\n }\n }\n /** Does some manual dirty checking on the native input `placeholder` attribute. */\n _dirtyCheckPlaceholder() {\n const placeholder = this._getPlaceholder();\n if (placeholder !== this._previousPlaceholder) {\n const element = this._elementRef.nativeElement;\n this._previousPlaceholder = placeholder;\n placeholder ? element.setAttribute('placeholder', placeholder) : element.removeAttribute('placeholder');\n }\n }\n /** Gets the current placeholder of the form field. */\n _getPlaceholder() {\n return this.placeholder || null;\n }\n /** Make sure the input is a supported type. */\n _validateType() {\n if (MAT_INPUT_INVALID_TYPES.indexOf(this._type) > -1 && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n throw getMatInputUnsupportedTypeError(this._type);\n }\n }\n /** Checks whether the input type is one of the types that are never empty. */\n _isNeverEmpty() {\n return this._neverEmptyInputTypes.indexOf(this._type) > -1;\n }\n /** Checks whether the input is invalid based on the native validation. */\n _isBadInput() {\n // The `validity` property won't be present on platform-server.\n let validity = this._elementRef.nativeElement.validity;\n return validity && validity.badInput;\n }\n /**\n * Implemented as part of MatFormFieldControl.\n * @docs-private\n */\n get empty() {\n return !this._isNeverEmpty() && !this._elementRef.nativeElement.value && !this._isBadInput() && !this.autofilled;\n }\n /**\n * Implemented as part of MatFormFieldControl.\n * @docs-private\n */\n get shouldLabelFloat() {\n if (this._isNativeSelect) {\n // For a single-selection ``, the label *always* floats to avoid\n // overlapping the label with the options.\n const selectElement = this._elementRef.nativeElement;\n const firstOption = selectElement.options[0];\n // On most browsers the `selectedIndex` will always be 0, however on IE and Edge it'll be\n // -1 if the `value` is set to something, that isn't in the list of options, at a later point.\n return this.focused || selectElement.multiple || !this.empty || !!(selectElement.selectedIndex > -1 && firstOption && firstOption.label);\n } else {\n return this.focused || !this.empty;\n }\n }\n /**\n * Implemented as part of MatFormFieldControl.\n * @docs-private\n */\n setDescribedByIds(ids) {\n if (ids.length) {\n this._elementRef.nativeElement.setAttribute('aria-describedby', ids.join(' '));\n } else {\n this._elementRef.nativeElement.removeAttribute('aria-describedby');\n }\n }\n /**\n * Implemented as part of MatFormFieldControl.\n * @docs-private\n */\n onContainerClick() {\n // Do not re-focus the input element if the element is already focused. Otherwise it can happen\n // that someone clicks on a time input and the cursor resets to the \"hours\" field while the\n // \"minutes\" field was actually clicked. See: https://github.com/angular/components/issues/12849\n if (!this.focused) {\n this.focus();\n }\n }\n /** Whether the form control is a native select that is displayed inline. */\n _isInlineSelect() {\n const element = this._elementRef.nativeElement;\n return this._isNativeSelect && (element.multiple || element.size > 1);\n }\n /**\n * In blink and webkit browsers a focused number input does not increment or decrement its value\n * on mouse wheel interaction unless a wheel event listener is attached to it or one of its ancestors or a passive wheel listener is attached somewhere in the DOM.\n * For example: Hitting a tooltip once enables the mouse wheel input for all number inputs as long as it exists.\n * In order to get reliable and intuitive behavior we apply a wheel event on our own\n * thus making sure increment and decrement by mouse wheel works every time.\n * @docs-private\n */\n _ensureWheelDefaultBehavior() {\n if (!this._webkitBlinkWheelListenerAttached && this._type === 'number' && (this._platform.BLINK || this._platform.WEBKIT)) {\n this._ngZone.runOutsideAngular(() => {\n this._elementRef.nativeElement.addEventListener('wheel', this._webkitBlinkWheelListener);\n });\n this._webkitBlinkWheelListenerAttached = true;\n }\n if (this._webkitBlinkWheelListenerAttached && this._type !== 'number') {\n this._elementRef.nativeElement.removeEventListener('wheel', this._webkitBlinkWheelListener);\n this._webkitBlinkWheelListenerAttached = true;\n }\n }\n static {\n this.ɵfac = function MatInput_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || MatInput)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i1.Platform), i0.ɵɵdirectiveInject(i2.NgControl, 10), i0.ɵɵdirectiveInject(i2.NgForm, 8), i0.ɵɵdirectiveInject(i2.FormGroupDirective, 8), i0.ɵɵdirectiveInject(i3.ErrorStateMatcher), i0.ɵɵdirectiveInject(MAT_INPUT_VALUE_ACCESSOR, 10), i0.ɵɵdirectiveInject(i4.AutofillMonitor), i0.ɵɵdirectiveInject(i0.NgZone), i0.ɵɵdirectiveInject(MAT_FORM_FIELD, 8));\n };\n }\n static {\n this.ɵdir = /* @__PURE__ */i0.ɵɵdefineDirective({\n type: MatInput,\n selectors: [[\"input\", \"matInput\", \"\"], [\"textarea\", \"matInput\", \"\"], [\"select\", \"matNativeControl\", \"\"], [\"input\", \"matNativeControl\", \"\"], [\"textarea\", \"matNativeControl\", \"\"]],\n hostAttrs: [1, \"mat-mdc-input-element\"],\n hostVars: 18,\n hostBindings: function MatInput_HostBindings(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵlistener(\"focus\", function MatInput_focus_HostBindingHandler() {\n return ctx._focusChanged(true);\n })(\"blur\", function MatInput_blur_HostBindingHandler() {\n return ctx._focusChanged(false);\n })(\"input\", function MatInput_input_HostBindingHandler() {\n return ctx._onInput();\n });\n }\n if (rf & 2) {\n i0.ɵɵhostProperty(\"id\", ctx.id)(\"disabled\", ctx.disabled)(\"required\", ctx.required);\n i0.ɵɵattribute(\"name\", ctx.name || null)(\"readonly\", ctx.readonly && !ctx._isNativeSelect || null)(\"aria-invalid\", ctx.empty && ctx.required ? null : ctx.errorState)(\"aria-required\", ctx.required)(\"id\", ctx.id);\n i0.ɵɵclassProp(\"mat-input-server\", ctx._isServer)(\"mat-mdc-form-field-textarea-control\", ctx._isInFormField && ctx._isTextarea)(\"mat-mdc-form-field-input-control\", ctx._isInFormField)(\"mdc-text-field__input\", ctx._isInFormField)(\"mat-mdc-native-select-inline\", ctx._isInlineSelect());\n }\n },\n inputs: {\n disabled: \"disabled\",\n id: \"id\",\n placeholder: \"placeholder\",\n name: \"name\",\n required: \"required\",\n type: \"type\",\n errorStateMatcher: \"errorStateMatcher\",\n userAriaDescribedBy: [0, \"aria-describedby\", \"userAriaDescribedBy\"],\n value: \"value\",\n readonly: \"readonly\"\n },\n exportAs: [\"matInput\"],\n standalone: true,\n features: [i0.ɵɵProvidersFeature([{\n provide: MatFormFieldControl,\n useExisting: MatInput\n }]), i0.ɵɵNgOnChangesFeature]\n });\n }\n }\n return MatInput;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\nlet MatInputModule = /*#__PURE__*/(() => {\n class MatInputModule {\n static {\n this.ɵfac = function MatInputModule_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || MatInputModule)();\n };\n }\n static {\n this.ɵmod = /* @__PURE__ */i0.ɵɵdefineNgModule({\n type: MatInputModule\n });\n }\n static {\n this.ɵinj = /* @__PURE__ */i0.ɵɵdefineInjector({\n imports: [MatCommonModule, MatFormFieldModule, MatFormFieldModule, TextFieldModule, MatCommonModule]\n });\n }\n }\n return MatInputModule;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n\n/**\n * Generated bundle index. Do not edit.\n */\n\nexport { MAT_INPUT_VALUE_ACCESSOR, MatInput, MatInputModule, getMatInputUnsupportedTypeError };\n","import { CdkMonitorFocus, CdkTrapFocus, A11yModule } from '@angular/cdk/a11y';\nimport * as i4 from '@angular/cdk/overlay';\nimport { Overlay, FlexibleConnectedPositionStrategy, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';\nimport { ComponentPortal, CdkPortalOutlet, TemplatePortal, PortalModule } from '@angular/cdk/portal';\nimport { NgClass, DOCUMENT, CommonModule } from '@angular/common';\nimport * as i0 from '@angular/core';\nimport { Injectable, inject, EventEmitter, Injector, afterNextRender, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, Output, Optional, SkipSelf, InjectionToken, Inject, ViewChild, forwardRef, ChangeDetectorRef, booleanAttribute, Directive, signal, Attribute, ContentChild, Self, TemplateRef, NgModule } from '@angular/core';\nimport { MatButton, MatIconButton, MatButtonModule } from '@angular/material/button';\nimport { CdkScrollableModule } from '@angular/cdk/scrolling';\nimport * as i1 from '@angular/material/core';\nimport { DateAdapter, MAT_DATE_FORMATS, _ErrorStateTracker, MatCommonModule } from '@angular/material/core';\nimport { Subject, Subscription, merge, of } from 'rxjs';\nimport { ESCAPE, hasModifierKey, SPACE, ENTER, PAGE_DOWN, PAGE_UP, END, HOME, DOWN_ARROW, UP_ARROW, RIGHT_ARROW, LEFT_ARROW, BACKSPACE } from '@angular/cdk/keycodes';\nimport * as i2 from '@angular/cdk/bidi';\nimport { Directionality } from '@angular/cdk/bidi';\nimport { normalizePassiveListenerOptions, Platform, _getFocusedElementPierceShadowDom } from '@angular/cdk/platform';\nimport { startWith, take, filter } from 'rxjs/operators';\nimport { coerceStringArray } from '@angular/cdk/coercion';\nimport { trigger, transition, animate, keyframes, style, state } from '@angular/animations';\nimport * as i2$1 from '@angular/forms';\nimport { NG_VALUE_ACCESSOR, NG_VALIDATORS, Validators, NgControl } from '@angular/forms';\nimport { MAT_FORM_FIELD, MatFormFieldControl } from '@angular/material/form-field';\nimport { MAT_INPUT_VALUE_ACCESSOR } from '@angular/material/input';\n\n/** @docs-private */\nconst _c0 = [\"mat-calendar-body\", \"\"];\nfunction _forTrack0($index, $item) {\n return this._trackRow($item);\n}\nconst _forTrack1 = ($index, $item) => $item.id;\nfunction MatCalendarBody_Conditional_0_Template(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵelementStart(0, \"tr\", 0)(1, \"td\", 3);\n i0.ɵɵtext(2);\n i0.ɵɵelementEnd()();\n }\n if (rf & 2) {\n const ctx_r0 = i0.ɵɵnextContext();\n i0.ɵɵadvance();\n i0.ɵɵstyleProp(\"padding-top\", ctx_r0._cellPadding)(\"padding-bottom\", ctx_r0._cellPadding);\n i0.ɵɵattribute(\"colspan\", ctx_r0.numCols);\n i0.ɵɵadvance();\n i0.ɵɵtextInterpolate1(\" \", ctx_r0.label, \" \");\n }\n}\nfunction MatCalendarBody_For_2_Conditional_1_Template(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵelementStart(0, \"td\", 3);\n i0.ɵɵtext(1);\n i0.ɵɵelementEnd();\n }\n if (rf & 2) {\n const ctx_r0 = i0.ɵɵnextContext(2);\n i0.ɵɵstyleProp(\"padding-top\", ctx_r0._cellPadding)(\"padding-bottom\", ctx_r0._cellPadding);\n i0.ɵɵattribute(\"colspan\", ctx_r0._firstRowOffset);\n i0.ɵɵadvance();\n i0.ɵɵtextInterpolate1(\" \", ctx_r0._firstRowOffset >= ctx_r0.labelMinRequiredCells ? ctx_r0.label : \"\", \" \");\n }\n}\nfunction MatCalendarBody_For_2_For_3_Template(rf, ctx) {\n if (rf & 1) {\n const _r2 = i0.ɵɵgetCurrentView();\n i0.ɵɵelementStart(0, \"td\", 6)(1, \"button\", 7);\n i0.ɵɵlistener(\"click\", function MatCalendarBody_For_2_For_3_Template_button_click_1_listener($event) {\n const item_r3 = i0.ɵɵrestoreView(_r2).$implicit;\n const ctx_r0 = i0.ɵɵnextContext(2);\n return i0.ɵɵresetView(ctx_r0._cellClicked(item_r3, $event));\n })(\"focus\", function MatCalendarBody_For_2_For_3_Template_button_focus_1_listener($event) {\n const item_r3 = i0.ɵɵrestoreView(_r2).$implicit;\n const ctx_r0 = i0.ɵɵnextContext(2);\n return i0.ɵɵresetView(ctx_r0._emitActiveDateChange(item_r3, $event));\n });\n i0.ɵɵelementStart(2, \"span\", 8);\n i0.ɵɵtext(3);\n i0.ɵɵelementEnd();\n i0.ɵɵelement(4, \"span\", 9);\n i0.ɵɵelementEnd()();\n }\n if (rf & 2) {\n const item_r3 = ctx.$implicit;\n const ɵ$index_14_r4 = ctx.$index;\n const ɵ$index_7_r5 = i0.ɵɵnextContext().$index;\n const ctx_r0 = i0.ɵɵnextContext();\n i0.ɵɵstyleProp(\"width\", ctx_r0._cellWidth)(\"padding-top\", ctx_r0._cellPadding)(\"padding-bottom\", ctx_r0._cellPadding);\n i0.ɵɵattribute(\"data-mat-row\", ɵ$index_7_r5)(\"data-mat-col\", ɵ$index_14_r4);\n i0.ɵɵadvance();\n i0.ɵɵclassProp(\"mat-calendar-body-disabled\", !item_r3.enabled)(\"mat-calendar-body-active\", ctx_r0._isActiveCell(ɵ$index_7_r5, ɵ$index_14_r4))(\"mat-calendar-body-range-start\", ctx_r0._isRangeStart(item_r3.compareValue))(\"mat-calendar-body-range-end\", ctx_r0._isRangeEnd(item_r3.compareValue))(\"mat-calendar-body-in-range\", ctx_r0._isInRange(item_r3.compareValue))(\"mat-calendar-body-comparison-bridge-start\", ctx_r0._isComparisonBridgeStart(item_r3.compareValue, ɵ$index_7_r5, ɵ$index_14_r4))(\"mat-calendar-body-comparison-bridge-end\", ctx_r0._isComparisonBridgeEnd(item_r3.compareValue, ɵ$index_7_r5, ɵ$index_14_r4))(\"mat-calendar-body-comparison-start\", ctx_r0._isComparisonStart(item_r3.compareValue))(\"mat-calendar-body-comparison-end\", ctx_r0._isComparisonEnd(item_r3.compareValue))(\"mat-calendar-body-in-comparison-range\", ctx_r0._isInComparisonRange(item_r3.compareValue))(\"mat-calendar-body-preview-start\", ctx_r0._isPreviewStart(item_r3.compareValue))(\"mat-calendar-body-preview-end\", ctx_r0._isPreviewEnd(item_r3.compareValue))(\"mat-calendar-body-in-preview\", ctx_r0._isInPreview(item_r3.compareValue));\n i0.ɵɵproperty(\"ngClass\", item_r3.cssClasses)(\"tabindex\", ctx_r0._isActiveCell(ɵ$index_7_r5, ɵ$index_14_r4) ? 0 : -1);\n i0.ɵɵattribute(\"aria-label\", item_r3.ariaLabel)(\"aria-disabled\", !item_r3.enabled || null)(\"aria-pressed\", ctx_r0._isSelected(item_r3.compareValue))(\"aria-current\", ctx_r0.todayValue === item_r3.compareValue ? \"date\" : null)(\"aria-describedby\", ctx_r0._getDescribedby(item_r3.compareValue));\n i0.ɵɵadvance();\n i0.ɵɵclassProp(\"mat-calendar-body-selected\", ctx_r0._isSelected(item_r3.compareValue))(\"mat-calendar-body-comparison-identical\", ctx_r0._isComparisonIdentical(item_r3.compareValue))(\"mat-calendar-body-today\", ctx_r0.todayValue === item_r3.compareValue);\n i0.ɵɵadvance();\n i0.ɵɵtextInterpolate1(\" \", item_r3.displayValue, \" \");\n }\n}\nfunction MatCalendarBody_For_2_Template(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵelementStart(0, \"tr\", 1);\n i0.ɵɵtemplate(1, MatCalendarBody_For_2_Conditional_1_Template, 2, 6, \"td\", 4);\n i0.ɵɵrepeaterCreate(2, MatCalendarBody_For_2_For_3_Template, 5, 48, \"td\", 5, _forTrack1);\n i0.ɵɵelementEnd();\n }\n if (rf & 2) {\n const row_r6 = ctx.$implicit;\n const ɵ$index_7_r5 = ctx.$index;\n const ctx_r0 = i0.ɵɵnextContext();\n i0.ɵɵadvance();\n i0.ɵɵconditional(ɵ$index_7_r5 === 0 && ctx_r0._firstRowOffset ? 1 : -1);\n i0.ɵɵadvance();\n i0.ɵɵrepeater(row_r6);\n }\n}\nfunction MatMonthView_For_4_Template(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵelementStart(0, \"th\", 2)(1, \"span\", 6);\n i0.ɵɵtext(2);\n i0.ɵɵelementEnd();\n i0.ɵɵelementStart(3, \"span\", 3);\n i0.ɵɵtext(4);\n i0.ɵɵelementEnd()();\n }\n if (rf & 2) {\n const day_r1 = ctx.$implicit;\n i0.ɵɵadvance(2);\n i0.ɵɵtextInterpolate(day_r1.long);\n i0.ɵɵadvance(2);\n i0.ɵɵtextInterpolate(day_r1.narrow);\n }\n}\nconst _c1 = [\"*\"];\nfunction MatCalendar_ng_template_0_Template(rf, ctx) {}\nfunction MatCalendar_Case_2_Template(rf, ctx) {\n if (rf & 1) {\n const _r1 = i0.ɵɵgetCurrentView();\n i0.ɵɵelementStart(0, \"mat-month-view\", 4);\n i0.ɵɵtwoWayListener(\"activeDateChange\", function MatCalendar_Case_2_Template_mat_month_view_activeDateChange_0_listener($event) {\n i0.ɵɵrestoreView(_r1);\n const ctx_r1 = i0.ɵɵnextContext();\n i0.ɵɵtwoWayBindingSet(ctx_r1.activeDate, $event) || (ctx_r1.activeDate = $event);\n return i0.ɵɵresetView($event);\n });\n i0.ɵɵlistener(\"_userSelection\", function MatCalendar_Case_2_Template_mat_month_view__userSelection_0_listener($event) {\n i0.ɵɵrestoreView(_r1);\n const ctx_r1 = i0.ɵɵnextContext();\n return i0.ɵɵresetView(ctx_r1._dateSelected($event));\n })(\"dragStarted\", function MatCalendar_Case_2_Template_mat_month_view_dragStarted_0_listener($event) {\n i0.ɵɵrestoreView(_r1);\n const ctx_r1 = i0.ɵɵnextContext();\n return i0.ɵɵresetView(ctx_r1._dragStarted($event));\n })(\"dragEnded\", function MatCalendar_Case_2_Template_mat_month_view_dragEnded_0_listener($event) {\n i0.ɵɵrestoreView(_r1);\n const ctx_r1 = i0.ɵɵnextContext();\n return i0.ɵɵresetView(ctx_r1._dragEnded($event));\n });\n i0.ɵɵelementEnd();\n }\n if (rf & 2) {\n const ctx_r1 = i0.ɵɵnextContext();\n i0.ɵɵtwoWayProperty(\"activeDate\", ctx_r1.activeDate);\n i0.ɵɵproperty(\"selected\", ctx_r1.selected)(\"dateFilter\", ctx_r1.dateFilter)(\"maxDate\", ctx_r1.maxDate)(\"minDate\", ctx_r1.minDate)(\"dateClass\", ctx_r1.dateClass)(\"comparisonStart\", ctx_r1.comparisonStart)(\"comparisonEnd\", ctx_r1.comparisonEnd)(\"startDateAccessibleName\", ctx_r1.startDateAccessibleName)(\"endDateAccessibleName\", ctx_r1.endDateAccessibleName)(\"activeDrag\", ctx_r1._activeDrag);\n }\n}\nfunction MatCalendar_Case_3_Template(rf, ctx) {\n if (rf & 1) {\n const _r3 = i0.ɵɵgetCurrentView();\n i0.ɵɵelementStart(0, \"mat-year-view\", 5);\n i0.ɵɵtwoWayListener(\"activeDateChange\", function MatCalendar_Case_3_Template_mat_year_view_activeDateChange_0_listener($event) {\n i0.ɵɵrestoreView(_r3);\n const ctx_r1 = i0.ɵɵnextContext();\n i0.ɵɵtwoWayBindingSet(ctx_r1.activeDate, $event) || (ctx_r1.activeDate = $event);\n return i0.ɵɵresetView($event);\n });\n i0.ɵɵlistener(\"monthSelected\", function MatCalendar_Case_3_Template_mat_year_view_monthSelected_0_listener($event) {\n i0.ɵɵrestoreView(_r3);\n const ctx_r1 = i0.ɵɵnextContext();\n return i0.ɵɵresetView(ctx_r1._monthSelectedInYearView($event));\n })(\"selectedChange\", function MatCalendar_Case_3_Template_mat_year_view_selectedChange_0_listener($event) {\n i0.ɵɵrestoreView(_r3);\n const ctx_r1 = i0.ɵɵnextContext();\n return i0.ɵɵresetView(ctx_r1._goToDateInView($event, \"month\"));\n });\n i0.ɵɵelementEnd();\n }\n if (rf & 2) {\n const ctx_r1 = i0.ɵɵnextContext();\n i0.ɵɵtwoWayProperty(\"activeDate\", ctx_r1.activeDate);\n i0.ɵɵproperty(\"selected\", ctx_r1.selected)(\"dateFilter\", ctx_r1.dateFilter)(\"maxDate\", ctx_r1.maxDate)(\"minDate\", ctx_r1.minDate)(\"dateClass\", ctx_r1.dateClass);\n }\n}\nfunction MatCalendar_Case_4_Template(rf, ctx) {\n if (rf & 1) {\n const _r4 = i0.ɵɵgetCurrentView();\n i0.ɵɵelementStart(0, \"mat-multi-year-view\", 6);\n i0.ɵɵtwoWayListener(\"activeDateChange\", function MatCalendar_Case_4_Template_mat_multi_year_view_activeDateChange_0_listener($event) {\n i0.ɵɵrestoreView(_r4);\n const ctx_r1 = i0.ɵɵnextContext();\n i0.ɵɵtwoWayBindingSet(ctx_r1.activeDate, $event) || (ctx_r1.activeDate = $event);\n return i0.ɵɵresetView($event);\n });\n i0.ɵɵlistener(\"yearSelected\", function MatCalendar_Case_4_Template_mat_multi_year_view_yearSelected_0_listener($event) {\n i0.ɵɵrestoreView(_r4);\n const ctx_r1 = i0.ɵɵnextContext();\n return i0.ɵɵresetView(ctx_r1._yearSelectedInMultiYearView($event));\n })(\"selectedChange\", function MatCalendar_Case_4_Template_mat_multi_year_view_selectedChange_0_listener($event) {\n i0.ɵɵrestoreView(_r4);\n const ctx_r1 = i0.ɵɵnextContext();\n return i0.ɵɵresetView(ctx_r1._goToDateInView($event, \"year\"));\n });\n i0.ɵɵelementEnd();\n }\n if (rf & 2) {\n const ctx_r1 = i0.ɵɵnextContext();\n i0.ɵɵtwoWayProperty(\"activeDate\", ctx_r1.activeDate);\n i0.ɵɵproperty(\"selected\", ctx_r1.selected)(\"dateFilter\", ctx_r1.dateFilter)(\"maxDate\", ctx_r1.maxDate)(\"minDate\", ctx_r1.minDate)(\"dateClass\", ctx_r1.dateClass);\n }\n}\nfunction MatDatepickerContent_ng_template_2_Template(rf, ctx) {}\nconst _c2 = [\"button\"];\nconst _c3 = [[[\"\", \"matDatepickerToggleIcon\", \"\"]]];\nconst _c4 = [\"[matDatepickerToggleIcon]\"];\nfunction MatDatepickerToggle_Conditional_2_Template(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵnamespaceSVG();\n i0.ɵɵelementStart(0, \"svg\", 2);\n i0.ɵɵelement(1, \"path\", 3);\n i0.ɵɵelementEnd();\n }\n}\nconst _c5 = [[[\"input\", \"matStartDate\", \"\"]], [[\"input\", \"matEndDate\", \"\"]]];\nconst _c6 = [\"input[matStartDate]\", \"input[matEndDate]\"];\nfunction MatDatepickerActions_ng_template_0_Template(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵelementStart(0, \"div\", 0);\n i0.ɵɵprojection(1);\n i0.ɵɵelementEnd();\n }\n}\nfunction createMissingDateImplError(provider) {\n return Error(`MatDatepicker: No provider found for ${provider}. You must add one of the following ` + `to your app config: provideNativeDateAdapter, provideDateFnsAdapter, ` + `provideLuxonDateAdapter, provideMomentDateAdapter, or provide a custom implementation.`);\n}\n\n/** Datepicker data that requires internationalization. */\nlet MatDatepickerIntl = /*#__PURE__*/(() => {\n class MatDatepickerIntl {\n constructor() {\n /**\n * Stream that emits whenever the labels here are changed. Use this to notify\n * components if the labels have changed after initialization.\n */\n this.changes = new Subject();\n /** A label for the calendar popup (used by screen readers). */\n this.calendarLabel = 'Calendar';\n /** A label for the button used to open the calendar popup (used by screen readers). */\n this.openCalendarLabel = 'Open calendar';\n /** Label for the button used to close the calendar popup. */\n this.closeCalendarLabel = 'Close calendar';\n /** A label for the previous month button (used by screen readers). */\n this.prevMonthLabel = 'Previous month';\n /** A label for the next month button (used by screen readers). */\n this.nextMonthLabel = 'Next month';\n /** A label for the previous year button (used by screen readers). */\n this.prevYearLabel = 'Previous year';\n /** A label for the next year button (used by screen readers). */\n this.nextYearLabel = 'Next year';\n /** A label for the previous multi-year button (used by screen readers). */\n this.prevMultiYearLabel = 'Previous 24 years';\n /** A label for the next multi-year button (used by screen readers). */\n this.nextMultiYearLabel = 'Next 24 years';\n /** A label for the 'switch to month view' button (used by screen readers). */\n this.switchToMonthViewLabel = 'Choose date';\n /** A label for the 'switch to year view' button (used by screen readers). */\n this.switchToMultiYearViewLabel = 'Choose month and year';\n /**\n * A label for the first date of a range of dates (used by screen readers).\n * @deprecated Provide your own internationalization string.\n * @breaking-change 17.0.0\n */\n this.startDateLabel = 'Start date';\n /**\n * A label for the last date of a range of dates (used by screen readers).\n * @deprecated Provide your own internationalization string.\n * @breaking-change 17.0.0\n */\n this.endDateLabel = 'End date';\n }\n /** Formats a range of years (used for visuals). */\n formatYearRange(start, end) {\n return `${start} \\u2013 ${end}`;\n }\n /** Formats a label for a range of years (used by screen readers). */\n formatYearRangeLabel(start, end) {\n return `${start} to ${end}`;\n }\n static {\n this.ɵfac = function MatDatepickerIntl_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || MatDatepickerIntl)();\n };\n }\n static {\n this.ɵprov = /* @__PURE__ */i0.ɵɵdefineInjectable({\n token: MatDatepickerIntl,\n factory: MatDatepickerIntl.ɵfac,\n providedIn: 'root'\n });\n }\n }\n return MatDatepickerIntl;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\nlet uniqueIdCounter$1 = 0;\n/**\n * An internal class that represents the data corresponding to a single calendar cell.\n * @docs-private\n */\nclass MatCalendarCell {\n constructor(value, displayValue, ariaLabel, enabled, cssClasses = {}, compareValue = value, rawValue) {\n this.value = value;\n this.displayValue = displayValue;\n this.ariaLabel = ariaLabel;\n this.enabled = enabled;\n this.cssClasses = cssClasses;\n this.compareValue = compareValue;\n this.rawValue = rawValue;\n this.id = uniqueIdCounter$1++;\n }\n}\nlet calendarBodyId = 1;\n/** Event options that can be used to bind an active, capturing event. */\nconst activeCapturingEventOptions = /*#__PURE__*/normalizePassiveListenerOptions({\n passive: false,\n capture: true\n});\n/** Event options that can be used to bind a passive, capturing event. */\nconst passiveCapturingEventOptions = /*#__PURE__*/normalizePassiveListenerOptions({\n passive: true,\n capture: true\n});\n/** Event options that can be used to bind a passive, non-capturing event. */\nconst passiveEventOptions = /*#__PURE__*/normalizePassiveListenerOptions({\n passive: true\n});\n/**\n * An internal component used to display calendar data in a table.\n * @docs-private\n */\nlet MatCalendarBody = /*#__PURE__*/(() => {\n class MatCalendarBody {\n ngAfterViewChecked() {\n if (this._focusActiveCellAfterViewChecked) {\n this._focusActiveCell();\n this._focusActiveCellAfterViewChecked = false;\n }\n }\n constructor(_elementRef, _ngZone) {\n this._elementRef = _elementRef;\n this._ngZone = _ngZone;\n this._platform = inject(Platform);\n /**\n * Used to focus the active cell after change detection has run.\n */\n this._focusActiveCellAfterViewChecked = false;\n /** The number of columns in the table. */\n this.numCols = 7;\n /** The cell number of the active cell in the table. */\n this.activeCell = 0;\n /** Whether a range is being selected. */\n this.isRange = false;\n /**\n * The aspect ratio (width / height) to use for the cells in the table. This aspect ratio will be\n * maintained even as the table resizes.\n */\n this.cellAspectRatio = 1;\n /** Start of the preview range. */\n this.previewStart = null;\n /** End of the preview range. */\n this.previewEnd = null;\n /** Emits when a new value is selected. */\n this.selectedValueChange = new EventEmitter();\n /** Emits when the preview has changed as a result of a user action. */\n this.previewChange = new EventEmitter();\n this.activeDateChange = new EventEmitter();\n /** Emits the date at the possible start of a drag event. */\n this.dragStarted = new EventEmitter();\n /** Emits the date at the conclusion of a drag, or null if mouse was not released on a date. */\n this.dragEnded = new EventEmitter();\n this._didDragSinceMouseDown = false;\n this._injector = inject(Injector);\n /**\n * Tracking function for rows based on their identity. Ideally we would use some sort of\n * key on the row, but that would require a breaking change for the `rows` input. We don't\n * use the built-in identity tracking, because it logs warnings.\n */\n this._trackRow = row => row;\n /**\n * Event handler for when the user enters an element\n * inside the calendar body (e.g. by hovering in or focus).\n */\n this._enterHandler = event => {\n if (this._skipNextFocus && event.type === 'focus') {\n this._skipNextFocus = false;\n return;\n }\n // We only need to hit the zone when we're selecting a range.\n if (event.target && this.isRange) {\n const cell = this._getCellFromElement(event.target);\n if (cell) {\n this._ngZone.run(() => this.previewChange.emit({\n value: cell.enabled ? cell : null,\n event\n }));\n }\n }\n };\n this._touchmoveHandler = event => {\n if (!this.isRange) return;\n const target = getActualTouchTarget(event);\n const cell = target ? this._getCellFromElement(target) : null;\n if (target !== event.target) {\n this._didDragSinceMouseDown = true;\n }\n // If the initial target of the touch is a date cell, prevent default so\n // that the move is not handled as a scroll.\n if (getCellElement(event.target)) {\n event.preventDefault();\n }\n this._ngZone.run(() => this.previewChange.emit({\n value: cell?.enabled ? cell : null,\n event\n }));\n };\n /**\n * Event handler for when the user's pointer leaves an element\n * inside the calendar body (e.g. by hovering out or blurring).\n */\n this._leaveHandler = event => {\n // We only need to hit the zone when we're selecting a range.\n if (this.previewEnd !== null && this.isRange) {\n if (event.type !== 'blur') {\n this._didDragSinceMouseDown = true;\n }\n // Only reset the preview end value when leaving cells. This looks better, because\n // we have a gap between the cells and the rows and we don't want to remove the\n // range just for it to show up again when the user moves a few pixels to the side.\n if (event.target && this._getCellFromElement(event.target) && !(event.relatedTarget && this._getCellFromElement(event.relatedTarget))) {\n this._ngZone.run(() => this.previewChange.emit({\n value: null,\n event\n }));\n }\n }\n };\n /**\n * Triggered on mousedown or touchstart on a date cell.\n * Respsonsible for starting a drag sequence.\n */\n this._mousedownHandler = event => {\n if (!this.isRange) return;\n this._didDragSinceMouseDown = false;\n // Begin a drag if a cell within the current range was targeted.\n const cell = event.target && this._getCellFromElement(event.target);\n if (!cell || !this._isInRange(cell.compareValue)) {\n return;\n }\n this._ngZone.run(() => {\n this.dragStarted.emit({\n value: cell.rawValue,\n event\n });\n });\n };\n /** Triggered on mouseup anywhere. Respsonsible for ending a drag sequence. */\n this._mouseupHandler = event => {\n if (!this.isRange) return;\n const cellElement = getCellElement(event.target);\n if (!cellElement) {\n // Mouseup happened outside of datepicker. Cancel drag.\n this._ngZone.run(() => {\n this.dragEnded.emit({\n value: null,\n event\n });\n });\n return;\n }\n if (cellElement.closest('.mat-calendar-body') !== this._elementRef.nativeElement) {\n // Mouseup happened inside a different month instance.\n // Allow it to handle the event.\n return;\n }\n this._ngZone.run(() => {\n const cell = this._getCellFromElement(cellElement);\n this.dragEnded.emit({\n value: cell?.rawValue ?? null,\n event\n });\n });\n };\n /** Triggered on touchend anywhere. Respsonsible for ending a drag sequence. */\n this._touchendHandler = event => {\n const target = getActualTouchTarget(event);\n if (target) {\n this._mouseupHandler({\n target\n });\n }\n };\n this._id = `mat-calendar-body-${calendarBodyId++}`;\n this._startDateLabelId = `${this._id}-start-date`;\n this._endDateLabelId = `${this._id}-end-date`;\n _ngZone.runOutsideAngular(() => {\n const element = _elementRef.nativeElement;\n // `touchmove` is active since we need to call `preventDefault`.\n element.addEventListener('touchmove', this._touchmoveHandler, activeCapturingEventOptions);\n element.addEventListener('mouseenter', this._enterHandler, passiveCapturingEventOptions);\n element.addEventListener('focus', this._enterHandler, passiveCapturingEventOptions);\n element.addEventListener('mouseleave', this._leaveHandler, passiveCapturingEventOptions);\n element.addEventListener('blur', this._leaveHandler, passiveCapturingEventOptions);\n element.addEventListener('mousedown', this._mousedownHandler, passiveEventOptions);\n element.addEventListener('touchstart', this._mousedownHandler, passiveEventOptions);\n if (this._platform.isBrowser) {\n window.addEventListener('mouseup', this._mouseupHandler);\n window.addEventListener('touchend', this._touchendHandler);\n }\n });\n }\n /** Called when a cell is clicked. */\n _cellClicked(cell, event) {\n // Ignore \"clicks\" that are actually canceled drags (eg the user dragged\n // off and then went back to this cell to undo).\n if (this._didDragSinceMouseDown) {\n return;\n }\n if (cell.enabled) {\n this.selectedValueChange.emit({\n value: cell.value,\n event\n });\n }\n }\n _emitActiveDateChange(cell, event) {\n if (cell.enabled) {\n this.activeDateChange.emit({\n value: cell.value,\n event\n });\n }\n }\n /** Returns whether a cell should be marked as selected. */\n _isSelected(value) {\n return this.startValue === value || this.endValue === value;\n }\n ngOnChanges(changes) {\n const columnChanges = changes['numCols'];\n const {\n rows,\n numCols\n } = this;\n if (changes['rows'] || columnChanges) {\n this._firstRowOffset = rows && rows.length && rows[0].length ? numCols - rows[0].length : 0;\n }\n if (changes['cellAspectRatio'] || columnChanges || !this._cellPadding) {\n this._cellPadding = `${50 * this.cellAspectRatio / numCols}%`;\n }\n if (columnChanges || !this._cellWidth) {\n this._cellWidth = `${100 / numCols}%`;\n }\n }\n ngOnDestroy() {\n const element = this._elementRef.nativeElement;\n element.removeEventListener('touchmove', this._touchmoveHandler, activeCapturingEventOptions);\n element.removeEventListener('mouseenter', this._enterHandler, passiveCapturingEventOptions);\n element.removeEventListener('focus', this._enterHandler, passiveCapturingEventOptions);\n element.removeEventListener('mouseleave', this._leaveHandler, passiveCapturingEventOptions);\n element.removeEventListener('blur', this._leaveHandler, passiveCapturingEventOptions);\n element.removeEventListener('mousedown', this._mousedownHandler, passiveEventOptions);\n element.removeEventListener('touchstart', this._mousedownHandler, passiveEventOptions);\n if (this._platform.isBrowser) {\n window.removeEventListener('mouseup', this._mouseupHandler);\n window.removeEventListener('touchend', this._touchendHandler);\n }\n }\n /** Returns whether a cell is active. */\n _isActiveCell(rowIndex, colIndex) {\n let cellNumber = rowIndex * this.numCols + colIndex;\n // Account for the fact that the first row may not have as many cells.\n if (rowIndex) {\n cellNumber -= this._firstRowOffset;\n }\n return cellNumber == this.activeCell;\n }\n /**\n * Focuses the active cell after the microtask queue is empty.\n *\n * Adding a 0ms setTimeout seems to fix Voiceover losing focus when pressing PageUp/PageDown\n * (issue #24330).\n *\n * Determined a 0ms by gradually increasing duration from 0 and testing two use cases with screen\n * reader enabled:\n *\n * 1. Pressing PageUp/PageDown repeatedly with pausing between each key press.\n * 2. Pressing and holding the PageDown key with repeated keys enabled.\n *\n * Test 1 worked roughly 95-99% of the time with 0ms and got a little bit better as the duration\n * increased. Test 2 got slightly better until the duration was long enough to interfere with\n * repeated keys. If the repeated key speed was faster than the timeout duration, then pressing\n * and holding pagedown caused the entire page to scroll.\n *\n * Since repeated key speed can verify across machines, determined that any duration could\n * potentially interfere with repeated keys. 0ms would be best because it almost entirely\n * eliminates the focus being lost in Voiceover (#24330) without causing unintended side effects.\n * Adding delay also complicates writing tests.\n */\n _focusActiveCell(movePreview = true) {\n afterNextRender(() => {\n setTimeout(() => {\n const activeCell = this._elementRef.nativeElement.querySelector('.mat-calendar-body-active');\n if (activeCell) {\n if (!movePreview) {\n this._skipNextFocus = true;\n }\n activeCell.focus();\n }\n });\n }, {\n injector: this._injector\n });\n }\n /** Focuses the active cell after change detection has run and the microtask queue is empty. */\n _scheduleFocusActiveCellAfterViewChecked() {\n this._focusActiveCellAfterViewChecked = true;\n }\n /** Gets whether a value is the start of the main range. */\n _isRangeStart(value) {\n return isStart(value, this.startValue, this.endValue);\n }\n /** Gets whether a value is the end of the main range. */\n _isRangeEnd(value) {\n return isEnd(value, this.startValue, this.endValue);\n }\n /** Gets whether a value is within the currently-selected range. */\n _isInRange(value) {\n return isInRange(value, this.startValue, this.endValue, this.isRange);\n }\n /** Gets whether a value is the start of the comparison range. */\n _isComparisonStart(value) {\n return isStart(value, this.comparisonStart, this.comparisonEnd);\n }\n /** Whether the cell is a start bridge cell between the main and comparison ranges. */\n _isComparisonBridgeStart(value, rowIndex, colIndex) {\n if (!this._isComparisonStart(value) || this._isRangeStart(value) || !this._isInRange(value)) {\n return false;\n }\n let previousCell = this.rows[rowIndex][colIndex - 1];\n if (!previousCell) {\n const previousRow = this.rows[rowIndex - 1];\n previousCell = previousRow && previousRow[previousRow.length - 1];\n }\n return previousCell && !this._isRangeEnd(previousCell.compareValue);\n }\n /** Whether the cell is an end bridge cell between the main and comparison ranges. */\n _isComparisonBridgeEnd(value, rowIndex, colIndex) {\n if (!this._isComparisonEnd(value) || this._isRangeEnd(value) || !this._isInRange(value)) {\n return false;\n }\n let nextCell = this.rows[rowIndex][colIndex + 1];\n if (!nextCell) {\n const nextRow = this.rows[rowIndex + 1];\n nextCell = nextRow && nextRow[0];\n }\n return nextCell && !this._isRangeStart(nextCell.compareValue);\n }\n /** Gets whether a value is the end of the comparison range. */\n _isComparisonEnd(value) {\n return isEnd(value, this.comparisonStart, this.comparisonEnd);\n }\n /** Gets whether a value is within the current comparison range. */\n _isInComparisonRange(value) {\n return isInRange(value, this.comparisonStart, this.comparisonEnd, this.isRange);\n }\n /**\n * Gets whether a value is the same as the start and end of the comparison range.\n * For context, the functions that we use to determine whether something is the start/end of\n * a range don't allow for the start and end to be on the same day, because we'd have to use\n * much more specific CSS selectors to style them correctly in all scenarios. This is fine for\n * the regular range, because when it happens, the selected styles take over and still show where\n * the range would've been, however we don't have these selected styles for a comparison range.\n * This function is used to apply a class that serves the same purpose as the one for selected\n * dates, but it only applies in the context of a comparison range.\n */\n _isComparisonIdentical(value) {\n // Note that we don't need to null check the start/end\n // here, because the `value` will always be defined.\n return this.comparisonStart === this.comparisonEnd && value === this.comparisonStart;\n }\n /** Gets whether a value is the start of the preview range. */\n _isPreviewStart(value) {\n return isStart(value, this.previewStart, this.previewEnd);\n }\n /** Gets whether a value is the end of the preview range. */\n _isPreviewEnd(value) {\n return isEnd(value, this.previewStart, this.previewEnd);\n }\n /** Gets whether a value is inside the preview range. */\n _isInPreview(value) {\n return isInRange(value, this.previewStart, this.previewEnd, this.isRange);\n }\n /** Gets ids of aria descriptions for the start and end of a date range. */\n _getDescribedby(value) {\n if (!this.isRange) {\n return null;\n }\n if (this.startValue === value && this.endValue === value) {\n return `${this._startDateLabelId} ${this._endDateLabelId}`;\n } else if (this.startValue === value) {\n return this._startDateLabelId;\n } else if (this.endValue === value) {\n return this._endDateLabelId;\n }\n return null;\n }\n /** Finds the MatCalendarCell that corresponds to a DOM node. */\n _getCellFromElement(element) {\n const cell = getCellElement(element);\n if (cell) {\n const row = cell.getAttribute('data-mat-row');\n const col = cell.getAttribute('data-mat-col');\n if (row && col) {\n return this.rows[parseInt(row)][parseInt(col)];\n }\n }\n return null;\n }\n static {\n this.ɵfac = function MatCalendarBody_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || MatCalendarBody)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.NgZone));\n };\n }\n static {\n this.ɵcmp = /* @__PURE__ */i0.ɵɵdefineComponent({\n type: MatCalendarBody,\n selectors: [[\"\", \"mat-calendar-body\", \"\"]],\n hostAttrs: [1, \"mat-calendar-body\"],\n inputs: {\n label: \"label\",\n rows: \"rows\",\n todayValue: \"todayValue\",\n startValue: \"startValue\",\n endValue: \"endValue\",\n labelMinRequiredCells: \"labelMinRequiredCells\",\n numCols: \"numCols\",\n activeCell: \"activeCell\",\n isRange: \"isRange\",\n cellAspectRatio: \"cellAspectRatio\",\n comparisonStart: \"comparisonStart\",\n comparisonEnd: \"comparisonEnd\",\n previewStart: \"previewStart\",\n previewEnd: \"previewEnd\",\n startDateAccessibleName: \"startDateAccessibleName\",\n endDateAccessibleName: \"endDateAccessibleName\"\n },\n outputs: {\n selectedValueChange: \"selectedValueChange\",\n previewChange: \"previewChange\",\n activeDateChange: \"activeDateChange\",\n dragStarted: \"dragStarted\",\n dragEnded: \"dragEnded\"\n },\n exportAs: [\"matCalendarBody\"],\n standalone: true,\n features: [i0.ɵɵNgOnChangesFeature, i0.ɵɵStandaloneFeature],\n attrs: _c0,\n decls: 7,\n vars: 5,\n consts: [[\"aria-hidden\", \"true\"], [\"role\", \"row\"], [1, \"mat-calendar-body-hidden-label\", 3, \"id\"], [1, \"mat-calendar-body-label\"], [1, \"mat-calendar-body-label\", 3, \"paddingTop\", \"paddingBottom\"], [\"role\", \"gridcell\", 1, \"mat-calendar-body-cell-container\", 3, \"width\", \"paddingTop\", \"paddingBottom\"], [\"role\", \"gridcell\", 1, \"mat-calendar-body-cell-container\"], [\"type\", \"button\", 1, \"mat-calendar-body-cell\", 3, \"click\", \"focus\", \"ngClass\", \"tabindex\"], [1, \"mat-calendar-body-cell-content\", \"mat-focus-indicator\"], [\"aria-hidden\", \"true\", 1, \"mat-calendar-body-cell-preview\"]],\n template: function MatCalendarBody_Template(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵtemplate(0, MatCalendarBody_Conditional_0_Template, 3, 6, \"tr\", 0);\n i0.ɵɵrepeaterCreate(1, MatCalendarBody_For_2_Template, 4, 1, \"tr\", 1, _forTrack0, true);\n i0.ɵɵelementStart(3, \"span\", 2);\n i0.ɵɵtext(4);\n i0.ɵɵelementEnd();\n i0.ɵɵelementStart(5, \"span\", 2);\n i0.ɵɵtext(6);\n i0.ɵɵelementEnd();\n }\n if (rf & 2) {\n i0.ɵɵconditional(ctx._firstRowOffset < ctx.labelMinRequiredCells ? 0 : -1);\n i0.ɵɵadvance();\n i0.ɵɵrepeater(ctx.rows);\n i0.ɵɵadvance(2);\n i0.ɵɵproperty(\"id\", ctx._startDateLabelId);\n i0.ɵɵadvance();\n i0.ɵɵtextInterpolate1(\" \", ctx.startDateAccessibleName, \"\\n\");\n i0.ɵɵadvance();\n i0.ɵɵproperty(\"id\", ctx._endDateLabelId);\n i0.ɵɵadvance();\n i0.ɵɵtextInterpolate1(\" \", ctx.endDateAccessibleName, \"\\n\");\n }\n },\n dependencies: [NgClass],\n styles: [\".mat-calendar-body{min-width:224px}.mat-calendar-body-today:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){border-color:var(--mat-datepicker-calendar-date-today-outline-color, var(--mat-app-primary))}.mat-calendar-body-label{height:0;line-height:0;text-align:start;padding-left:4.7142857143%;padding-right:4.7142857143%;font-size:var(--mat-datepicker-calendar-body-label-text-size, var(--mat-app-title-small-size));font-weight:var(--mat-datepicker-calendar-body-label-text-weight, var(--mat-app-title-small-weight));color:var(--mat-datepicker-calendar-body-label-text-color, var(--mat-app-on-surface))}.mat-calendar-body-hidden-label{display:none}.mat-calendar-body-cell-container{position:relative;height:0;line-height:0}.mat-calendar-body-cell{-webkit-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;-webkit-tap-highlight-color:rgba(0,0,0,0);position:absolute;top:0;left:0;width:100%;height:100%;background:none;text-align:center;outline:none;font-family:inherit;margin:0;font-family:var(--mat-datepicker-calendar-text-font, var(--mat-app-body-medium-font));font-size:var(--mat-datepicker-calendar-text-size, var(--mat-app-body-medium-size))}.mat-calendar-body-cell::-moz-focus-inner{border:0}.mat-calendar-body-cell::before,.mat-calendar-body-cell::after,.mat-calendar-body-cell-preview{content:\\\"\\\";position:absolute;top:5%;left:0;z-index:0;box-sizing:border-box;display:block;height:90%;width:100%}.mat-calendar-body-range-start:not(.mat-calendar-body-in-comparison-range)::before,.mat-calendar-body-range-start::after,.mat-calendar-body-comparison-start:not(.mat-calendar-body-comparison-bridge-start)::before,.mat-calendar-body-comparison-start::after,.mat-calendar-body-preview-start .mat-calendar-body-cell-preview{left:5%;width:95%;border-top-left-radius:999px;border-bottom-left-radius:999px}[dir=rtl] .mat-calendar-body-range-start:not(.mat-calendar-body-in-comparison-range)::before,[dir=rtl] .mat-calendar-body-range-start::after,[dir=rtl] .mat-calendar-body-comparison-start:not(.mat-calendar-body-comparison-bridge-start)::before,[dir=rtl] .mat-calendar-body-comparison-start::after,[dir=rtl] .mat-calendar-body-preview-start .mat-calendar-body-cell-preview{left:0;border-radius:0;border-top-right-radius:999px;border-bottom-right-radius:999px}.mat-calendar-body-range-end:not(.mat-calendar-body-in-comparison-range)::before,.mat-calendar-body-range-end::after,.mat-calendar-body-comparison-end:not(.mat-calendar-body-comparison-bridge-end)::before,.mat-calendar-body-comparison-end::after,.mat-calendar-body-preview-end .mat-calendar-body-cell-preview{width:95%;border-top-right-radius:999px;border-bottom-right-radius:999px}[dir=rtl] .mat-calendar-body-range-end:not(.mat-calendar-body-in-comparison-range)::before,[dir=rtl] .mat-calendar-body-range-end::after,[dir=rtl] .mat-calendar-body-comparison-end:not(.mat-calendar-body-comparison-bridge-end)::before,[dir=rtl] .mat-calendar-body-comparison-end::after,[dir=rtl] .mat-calendar-body-preview-end .mat-calendar-body-cell-preview{left:5%;border-radius:0;border-top-left-radius:999px;border-bottom-left-radius:999px}[dir=rtl] .mat-calendar-body-comparison-bridge-start.mat-calendar-body-range-end::after,[dir=rtl] .mat-calendar-body-comparison-bridge-end.mat-calendar-body-range-start::after{width:95%;border-top-right-radius:999px;border-bottom-right-radius:999px}.mat-calendar-body-comparison-start.mat-calendar-body-range-end::after,[dir=rtl] .mat-calendar-body-comparison-start.mat-calendar-body-range-end::after,.mat-calendar-body-comparison-end.mat-calendar-body-range-start::after,[dir=rtl] .mat-calendar-body-comparison-end.mat-calendar-body-range-start::after{width:90%}.mat-calendar-body-in-preview{color:var(--mat-datepicker-calendar-date-preview-state-outline-color, var(--mat-app-primary))}.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}.mat-calendar-body-disabled>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){color:var(--mat-datepicker-calendar-date-disabled-state-text-color)}.mat-calendar-body-disabled>.mat-calendar-body-today:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){border-color:var(--mat-datepicker-calendar-date-today-disabled-state-outline-color)}.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;color:var(--mat-datepicker-calendar-date-text-color, var(--mat-app-on-surface));border-color:var(--mat-datepicker-calendar-date-outline-color)}.mat-calendar-body-cell-content.mat-focus-indicator{position:absolute}.cdk-high-contrast-active .mat-calendar-body-cell-content{border:none}.cdk-keyboard-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),.cdk-program-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:var(--mat-datepicker-calendar-date-focus-state-background-color)}@media(hover: hover){.mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:var(--mat-datepicker-calendar-date-hover-state-background-color)}}.mat-calendar-body-selected{background-color:var(--mat-datepicker-calendar-date-selected-state-background-color, var(--mat-app-primary));color:var(--mat-datepicker-calendar-date-selected-state-text-color, var(--mat-app-on-primary))}.mat-calendar-body-disabled>.mat-calendar-body-selected{background-color:var(--mat-datepicker-calendar-date-selected-disabled-state-background-color)}.mat-calendar-body-selected.mat-calendar-body-today{box-shadow:inset 0 0 0 1px var(--mat-datepicker-calendar-date-today-selected-state-outline-color, var(--mat-app-primary))}.mat-calendar-body-in-range::before{background:var(--mat-datepicker-calendar-date-in-range-state-background-color, var(--mat-app-primary-container))}.mat-calendar-body-comparison-identical,.mat-calendar-body-in-comparison-range::before{background:var(--mat-datepicker-calendar-date-in-comparison-range-state-background-color, var(--mat-app-tertiary-container))}.mat-calendar-body-comparison-identical,.mat-calendar-body-in-comparison-range::before{background:var(--mat-datepicker-calendar-date-in-comparison-range-state-background-color, var(--mat-app-tertiary-container))}.mat-calendar-body-comparison-bridge-start::before,[dir=rtl] .mat-calendar-body-comparison-bridge-end::before{background:linear-gradient(to right, var(--mat-datepicker-calendar-date-in-range-state-background-color, var(--mat-app-primary-container)) 50%, var(--mat-datepicker-calendar-date-in-comparison-range-state-background-color, var(--mat-app-tertiary-container)) 50%)}.mat-calendar-body-comparison-bridge-end::before,[dir=rtl] .mat-calendar-body-comparison-bridge-start::before{background:linear-gradient(to left, var(--mat-datepicker-calendar-date-in-range-state-background-color, var(--mat-app-primary-container)) 50%, var(--mat-datepicker-calendar-date-in-comparison-range-state-background-color, var(--mat-app-tertiary-container)) 50%)}.mat-calendar-body-in-range>.mat-calendar-body-comparison-identical,.mat-calendar-body-in-comparison-range.mat-calendar-body-in-range::after{background:var(--mat-datepicker-calendar-date-in-overlap-range-state-background-color, var(--mat-app-secondary-container))}.mat-calendar-body-comparison-identical.mat-calendar-body-selected,.mat-calendar-body-in-comparison-range>.mat-calendar-body-selected{background:var(--mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color, var(--mat-app-secondary))}.cdk-high-contrast-active .mat-datepicker-popup:not(:empty),.cdk-high-contrast-active .mat-calendar-body-cell:not(.mat-calendar-body-in-range) .mat-calendar-body-selected{outline:solid 1px}.cdk-high-contrast-active .mat-calendar-body-today{outline:dotted 1px}.cdk-high-contrast-active .mat-calendar-body-cell::before,.cdk-high-contrast-active .mat-calendar-body-cell::after,.cdk-high-contrast-active .mat-calendar-body-selected{background:none}.cdk-high-contrast-active .mat-calendar-body-in-range::before,.cdk-high-contrast-active .mat-calendar-body-comparison-bridge-start::before,.cdk-high-contrast-active .mat-calendar-body-comparison-bridge-end::before{border-top:solid 1px;border-bottom:solid 1px}.cdk-high-contrast-active .mat-calendar-body-range-start::before{border-left:solid 1px}[dir=rtl] .cdk-high-contrast-active .mat-calendar-body-range-start::before{border-left:0;border-right:solid 1px}.cdk-high-contrast-active .mat-calendar-body-range-end::before{border-right:solid 1px}[dir=rtl] .cdk-high-contrast-active .mat-calendar-body-range-end::before{border-right:0;border-left:solid 1px}.cdk-high-contrast-active .mat-calendar-body-in-comparison-range::before{border-top:dashed 1px;border-bottom:dashed 1px}.cdk-high-contrast-active .mat-calendar-body-comparison-start::before{border-left:dashed 1px}[dir=rtl] .cdk-high-contrast-active .mat-calendar-body-comparison-start::before{border-left:0;border-right:dashed 1px}.cdk-high-contrast-active .mat-calendar-body-comparison-end::before{border-right:dashed 1px}[dir=rtl] .cdk-high-contrast-active .mat-calendar-body-comparison-end::before{border-right:0;border-left:dashed 1px}\"],\n encapsulation: 2,\n changeDetection: 0\n });\n }\n }\n return MatCalendarBody;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n/** Checks whether a node is a table cell element. */\nfunction isTableCell(node) {\n return node?.nodeName === 'TD';\n}\n/**\n * Gets the date table cell element that is or contains the specified element.\n * Or returns null if element is not part of a date cell.\n */\nfunction getCellElement(element) {\n let cell;\n if (isTableCell(element)) {\n cell = element;\n } else if (isTableCell(element.parentNode)) {\n cell = element.parentNode;\n } else if (isTableCell(element.parentNode?.parentNode)) {\n cell = element.parentNode.parentNode;\n }\n return cell?.getAttribute('data-mat-row') != null ? cell : null;\n}\n/** Checks whether a value is the start of a range. */\nfunction isStart(value, start, end) {\n return end !== null && start !== end && value < end && value === start;\n}\n/** Checks whether a value is the end of a range. */\nfunction isEnd(value, start, end) {\n return start !== null && start !== end && value >= start && value === end;\n}\n/** Checks whether a value is inside of a range. */\nfunction isInRange(value, start, end, rangeEnabled) {\n return rangeEnabled && start !== null && end !== null && start !== end && value >= start && value <= end;\n}\n/**\n * Extracts the element that actually corresponds to a touch event's location\n * (rather than the element that initiated the sequence of touch events).\n */\nfunction getActualTouchTarget(event) {\n const touchLocation = event.changedTouches[0];\n return document.elementFromPoint(touchLocation.clientX, touchLocation.clientY);\n}\n\n/** A class representing a range of dates. */\nclass DateRange {\n constructor( /** The start date of the range. */\n start, /** 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 */\nlet MatDateSelectionModel = /*#__PURE__*/(() => {\n class MatDateSelectionModel {\n constructor( /** 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({\n selection: value,\n source,\n oldValue\n });\n }\n ngOnDestroy() {\n this._selectionChanged.complete();\n }\n _isValidDateInstance(date) {\n return this._adapter.isDateInstance(date) && this._adapter.isValid(date);\n }\n static {\n this.ɵfac = function MatDateSelectionModel_Factory(__ngFactoryType__) {\n i0.ɵɵinvalidFactory();\n };\n }\n static {\n this.ɵprov = /* @__PURE__ */i0.ɵɵdefineInjectable({\n token: MatDateSelectionModel,\n factory: MatDateSelectionModel.ɵfac\n });\n }\n }\n return MatDateSelectionModel;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n/**\n * A selection model that contains a single date.\n * @docs-private\n */\nlet MatSingleDateSelectionModel = /*#__PURE__*/(() => {\n class 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 static {\n this.ɵfac = function MatSingleDateSelectionModel_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || MatSingleDateSelectionModel)(i0.ɵɵinject(i1.DateAdapter));\n };\n }\n static {\n this.ɵprov = /* @__PURE__ */i0.ɵɵdefineInjectable({\n token: MatSingleDateSelectionModel,\n factory: MatSingleDateSelectionModel.ɵfac\n });\n }\n }\n return MatSingleDateSelectionModel;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n/**\n * A selection model that contains a date range.\n * @docs-private\n */\nlet MatRangeDateSelectionModel = /*#__PURE__*/(() => {\n class 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 {\n start,\n end\n } = this.selection;\n if (start == null) {\n start = date;\n } else if (end == null) {\n end = date;\n } else {\n start = date;\n end = null;\n }\n super.updateSelection(new DateRange(start, end), this);\n }\n /** Checks whether the current selection is valid. */\n isValid() {\n const {\n start,\n end\n } = 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) && 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)) && (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 static {\n this.ɵfac = function MatRangeDateSelectionModel_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || MatRangeDateSelectionModel)(i0.ɵɵinject(i1.DateAdapter));\n };\n }\n static {\n this.ɵprov = /* @__PURE__ */i0.ɵɵdefineInjectable({\n token: MatRangeDateSelectionModel,\n factory: MatRangeDateSelectionModel.ɵfac\n });\n }\n }\n return MatRangeDateSelectionModel;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\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: [[/*#__PURE__*/new Optional(), /*#__PURE__*/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: [[/*#__PURE__*/new Optional(), /*#__PURE__*/new SkipSelf(), MatDateSelectionModel], DateAdapter],\n useFactory: MAT_RANGE_DATE_SELECTION_MODEL_FACTORY\n};\n\n/** Injection token used to customize the date range selection behavior. */\nconst MAT_DATE_RANGE_SELECTION_STRATEGY = /*#__PURE__*/new InjectionToken('MAT_DATE_RANGE_SELECTION_STRATEGY');\n/** Provides the default date range selection behavior. */\nlet DefaultMatCalendarRangeStrategy = /*#__PURE__*/(() => {\n class DefaultMatCalendarRangeStrategy {\n constructor(_dateAdapter) {\n this._dateAdapter = _dateAdapter;\n }\n selectionFinished(date, currentRange) {\n let {\n start,\n end\n } = currentRange;\n if (start == null) {\n start = date;\n } else if (end == null && date && this._dateAdapter.compareDate(date, start) >= 0) {\n end = date;\n } else {\n start = date;\n end = null;\n }\n return new DateRange(start, end);\n }\n createPreview(activeDate, currentRange) {\n let start = null;\n let end = null;\n if (currentRange.start && !currentRange.end && activeDate) {\n start = currentRange.start;\n end = activeDate;\n }\n return new DateRange(start, end);\n }\n createDrag(dragOrigin, originalRange, newDate) {\n let start = originalRange.start;\n let end = originalRange.end;\n if (!start || !end) {\n // Can't drag from an incomplete range.\n return null;\n }\n const adapter = this._dateAdapter;\n const isRange = adapter.compareDate(start, end) !== 0;\n const diffYears = adapter.getYear(newDate) - adapter.getYear(dragOrigin);\n const diffMonths = adapter.getMonth(newDate) - adapter.getMonth(dragOrigin);\n const diffDays = adapter.getDate(newDate) - adapter.getDate(dragOrigin);\n if (isRange && adapter.sameDate(dragOrigin, originalRange.start)) {\n start = newDate;\n if (adapter.compareDate(newDate, end) > 0) {\n end = adapter.addCalendarYears(end, diffYears);\n end = adapter.addCalendarMonths(end, diffMonths);\n end = adapter.addCalendarDays(end, diffDays);\n }\n } else if (isRange && adapter.sameDate(dragOrigin, originalRange.end)) {\n end = newDate;\n if (adapter.compareDate(newDate, start) < 0) {\n start = adapter.addCalendarYears(start, diffYears);\n start = adapter.addCalendarMonths(start, diffMonths);\n start = adapter.addCalendarDays(start, diffDays);\n }\n } else {\n start = adapter.addCalendarYears(start, diffYears);\n start = adapter.addCalendarMonths(start, diffMonths);\n start = adapter.addCalendarDays(start, diffDays);\n end = adapter.addCalendarYears(end, diffYears);\n end = adapter.addCalendarMonths(end, diffMonths);\n end = adapter.addCalendarDays(end, diffDays);\n }\n return new DateRange(start, end);\n }\n static {\n this.ɵfac = function DefaultMatCalendarRangeStrategy_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || DefaultMatCalendarRangeStrategy)(i0.ɵɵinject(i1.DateAdapter));\n };\n }\n static {\n this.ɵprov = /* @__PURE__ */i0.ɵɵdefineInjectable({\n token: DefaultMatCalendarRangeStrategy,\n factory: DefaultMatCalendarRangeStrategy.ɵfac\n });\n }\n }\n return DefaultMatCalendarRangeStrategy;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\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: [[/*#__PURE__*/new Optional(), /*#__PURE__*/new SkipSelf(), MAT_DATE_RANGE_SELECTION_STRATEGY], DateAdapter],\n useFactory: MAT_CALENDAR_RANGE_STRATEGY_PROVIDER_FACTORY\n};\nconst DAYS_PER_WEEK = 7;\nlet uniqueIdCounter = 0;\n/**\n * An internal component used to display a single month in the datepicker.\n * @docs-private\n */\nlet MatMonthView = /*#__PURE__*/(() => {\n class MatMonthView {\n /**\n * The date to display in this month view (everything other than the month and year is ignored).\n */\n get activeDate() {\n return this._activeDate;\n }\n set activeDate(value) {\n const oldActiveDate = this._activeDate;\n const validDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value)) || this._dateAdapter.today();\n this._activeDate = this._dateAdapter.clampDate(validDate, this.minDate, this.maxDate);\n if (!this._hasSameMonthAndYear(oldActiveDate, this._activeDate)) {\n this._init();\n }\n }\n /** The currently selected date. */\n get selected() {\n return this._selected;\n }\n set selected(value) {\n if (value instanceof DateRange) {\n this._selected = value;\n } else {\n this._selected = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));\n }\n this._setRanges(this._selected);\n }\n /** The minimum selectable date. */\n get minDate() {\n return this._minDate;\n }\n set minDate(value) {\n this._minDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));\n }\n /** The maximum selectable date. */\n get maxDate() {\n return this._maxDate;\n }\n set maxDate(value) {\n this._maxDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));\n }\n constructor(_changeDetectorRef, _dateFormats, _dateAdapter, _dir, _rangeStrategy) {\n this._changeDetectorRef = _changeDetectorRef;\n this._dateFormats = _dateFormats;\n this._dateAdapter = _dateAdapter;\n this._dir = _dir;\n this._rangeStrategy = _rangeStrategy;\n this._rerenderSubscription = Subscription.EMPTY;\n /** Origin of active drag, or null when dragging is not active. */\n this.activeDrag = null;\n /** Emits when a new date is selected. */\n this.selectedChange = new EventEmitter();\n /** Emits when any date is selected. */\n this._userSelection = new EventEmitter();\n /** Emits when the user initiates a date range drag via mouse or touch. */\n this.dragStarted = new EventEmitter();\n /**\n * Emits when the user completes or cancels a date range drag.\n * Emits null when the drag was canceled or the newly selected date range if completed.\n */\n this.dragEnded = new EventEmitter();\n /** Emits when any date is activated. */\n this.activeDateChange = new EventEmitter();\n if (typeof ngDevMode === 'undefined' || ngDevMode) {\n if (!this._dateAdapter) {\n throw createMissingDateImplError('DateAdapter');\n }\n if (!this._dateFormats) {\n throw createMissingDateImplError('MAT_DATE_FORMATS');\n }\n }\n this._activeDate = this._dateAdapter.today();\n }\n ngAfterContentInit() {\n this._rerenderSubscription = this._dateAdapter.localeChanges.pipe(startWith(null)).subscribe(() => this._init());\n }\n ngOnChanges(changes) {\n const comparisonChange = changes['comparisonStart'] || changes['comparisonEnd'];\n if (comparisonChange && !comparisonChange.firstChange) {\n this._setRanges(this.selected);\n }\n if (changes['activeDrag'] && !this.activeDrag) {\n this._clearPreview();\n }\n }\n ngOnDestroy() {\n this._rerenderSubscription.unsubscribe();\n }\n /** Handles when a new date is selected. */\n _dateSelected(event) {\n const date = event.value;\n const selectedDate = this._getDateFromDayOfMonth(date);\n let rangeStartDate;\n let rangeEndDate;\n if (this._selected instanceof DateRange) {\n rangeStartDate = this._getDateInCurrentMonth(this._selected.start);\n rangeEndDate = this._getDateInCurrentMonth(this._selected.end);\n } 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({\n value: selectedDate,\n event: event.event\n });\n this._clearPreview();\n this._changeDetectorRef.markForCheck();\n }\n /**\n * Takes the index of a calendar body cell wrapped in an event as argument. For the date that\n * corresponds to the given cell, set `activeDate` to that date and fire `activeDateChange` with\n * that date.\n *\n * This function is used to match each component's model of the active date with the calendar\n * body cell that was focused. It updates its value of `activeDate` synchronously and updates the\n * parent's value asynchronously via the `activeDateChange` event. The child component receives an\n * updated value asynchronously via the `activeCell` Input.\n */\n _updateActiveDate(event) {\n const month = event.value;\n const oldActiveDate = this._activeDate;\n this.activeDate = this._getDateFromDayOfMonth(month);\n if (this._dateAdapter.compareDate(oldActiveDate, this.activeDate)) {\n this.activeDateChange.emit(this._activeDate);\n }\n }\n /** Handles keydown events on the calendar body when calendar is in month view. */\n _handleCalendarBodyKeydown(event) {\n // TODO(mmalerba): We currently allow keyboard navigation to disabled dates, but just prevent\n // disabled ones from being selected. This may not be ideal, we should look into whether\n // navigation should skip over disabled dates, and if so, how to implement that efficiently.\n const oldActiveDate = this._activeDate;\n const isRtl = this._isRtl();\n switch (event.keyCode) {\n case LEFT_ARROW:\n this.activeDate = this._dateAdapter.addCalendarDays(this._activeDate, isRtl ? 1 : -1);\n break;\n case RIGHT_ARROW:\n this.activeDate = this._dateAdapter.addCalendarDays(this._activeDate, isRtl ? -1 : 1);\n break;\n case UP_ARROW:\n this.activeDate = this._dateAdapter.addCalendarDays(this._activeDate, -7);\n break;\n case DOWN_ARROW:\n this.activeDate = this._dateAdapter.addCalendarDays(this._activeDate, 7);\n break;\n case HOME:\n this.activeDate = this._dateAdapter.addCalendarDays(this._activeDate, 1 - this._dateAdapter.getDate(this._activeDate));\n break;\n case END:\n this.activeDate = this._dateAdapter.addCalendarDays(this._activeDate, this._dateAdapter.getNumDaysInMonth(this._activeDate) - this._dateAdapter.getDate(this._activeDate));\n break;\n case PAGE_UP:\n this.activeDate = event.altKey ? this._dateAdapter.addCalendarYears(this._activeDate, -1) : this._dateAdapter.addCalendarMonths(this._activeDate, -1);\n break;\n case PAGE_DOWN:\n this.activeDate = event.altKey ? this._dateAdapter.addCalendarYears(this._activeDate, 1) : this._dateAdapter.addCalendarMonths(this._activeDate, 1);\n break;\n case ENTER:\n case SPACE:\n this._selectionKeyPressed = true;\n if (this._canSelect(this._activeDate)) {\n // Prevent unexpected default actions such as form submission.\n // Note that we only prevent the default action here while the selection happens in\n // `keyup` below. We can't do the selection here, because it can cause the calendar to\n // reopen if focus is restored immediately. We also can't call `preventDefault` on `keyup`\n // because it's too late (see #23305).\n event.preventDefault();\n }\n return;\n case ESCAPE:\n // Abort the current range selection if the user presses escape mid-selection.\n if (this._previewEnd != null && !hasModifierKey(event)) {\n this._clearPreview();\n // If a drag is in progress, cancel the drag without changing the\n // current selection.\n if (this.activeDrag) {\n this.dragEnded.emit({\n value: null,\n event\n });\n } else {\n this.selectedChange.emit(null);\n this._userSelection.emit({\n value: null,\n event\n });\n }\n event.preventDefault();\n event.stopPropagation(); // Prevents the overlay from closing.\n }\n return;\n default:\n // Don't prevent default or focus active cell on keys that we don't explicitly handle.\n return;\n }\n if (this._dateAdapter.compareDate(oldActiveDate, this.activeDate)) {\n this.activeDateChange.emit(this.activeDate);\n this._focusActiveCellAfterViewChecked();\n }\n // Prevent unexpected default actions such as form submission.\n event.preventDefault();\n }\n /** Handles keyup events on the calendar body when calendar is in month view. */\n _handleCalendarBodyKeyup(event) {\n if (event.keyCode === SPACE || event.keyCode === ENTER) {\n if (this._selectionKeyPressed && this._canSelect(this._activeDate)) {\n this._dateSelected({\n value: this._dateAdapter.getDate(this._activeDate),\n event\n });\n }\n this._selectionKeyPressed = false;\n }\n }\n /** Initializes this month view. */\n _init() {\n this._setRanges(this.selected);\n this._todayDate = this._getCellCompareValue(this._dateAdapter.today());\n this._monthLabel = this._dateFormats.display.monthLabel ? this._dateAdapter.format(this.activeDate, this._dateFormats.display.monthLabel) : this._dateAdapter.getMonthNames('short')[this._dateAdapter.getMonth(this.activeDate)].toLocaleUpperCase();\n let firstOfMonth = this._dateAdapter.createDate(this._dateAdapter.getYear(this.activeDate), this._dateAdapter.getMonth(this.activeDate), 1);\n this._firstWeekOffset = (DAYS_PER_WEEK + this._dateAdapter.getDayOfWeek(firstOfMonth) - 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 /** Focuses the active cell after change detection has run and the microtask queue is empty. */\n _focusActiveCellAfterViewChecked() {\n this._matCalendarBody._scheduleFocusActiveCellAfterViewChecked();\n }\n /** Called when the user has activated a new cell and the preview needs to be updated. */\n _previewChanged({\n event,\n value: cell\n }) {\n if (this._rangeStrategy) {\n // We can assume that this will be a range, because preview\n // events aren't fired for single date selections.\n const value = cell ? cell.rawValue : null;\n const previewRange = this._rangeStrategy.createPreview(value, this.selected, event);\n this._previewStart = this._getCellCompareValue(previewRange.start);\n this._previewEnd = this._getCellCompareValue(previewRange.end);\n if (this.activeDrag && value) {\n const dragRange = this._rangeStrategy.createDrag?.(this.activeDrag.value, this.selected, value, event);\n if (dragRange) {\n this._previewStart = this._getCellCompareValue(dragRange.start);\n this._previewEnd = this._getCellCompareValue(dragRange.end);\n }\n }\n // Note that here we need to use `detectChanges`, rather than `markForCheck`, because\n // the way `_focusActiveCell` is set up at the moment makes it fire at the wrong time\n // when navigating one month back using the keyboard which will cause this handler\n // to throw a \"changed after checked\" error when updating the preview state.\n this._changeDetectorRef.detectChanges();\n }\n }\n /**\n * Called when the user has ended a drag. If the drag/drop was successful,\n * computes and emits the new range selection.\n */\n _dragEnded(event) {\n if (!this.activeDrag) return;\n if (event.value) {\n // Propagate drag effect\n const dragDropResult = this._rangeStrategy?.createDrag?.(this.activeDrag.value, this.selected, event.value, event.event);\n this.dragEnded.emit({\n value: dragDropResult ?? null,\n event: event.event\n });\n } else {\n this.dragEnded.emit({\n value: null,\n event: event.event\n });\n }\n }\n /**\n * Takes a day of the month and returns a new date in the same month and year as the currently\n * active date. The returned date will have the same day of the month as the argument date.\n */\n _getDateFromDayOfMonth(dayOfMonth) {\n return this._dateAdapter.createDate(this._dateAdapter.getYear(this.activeDate), this._dateAdapter.getMonth(this.activeDate), dayOfMonth);\n }\n /** Initializes the weekdays. */\n _initWeekdays() {\n const firstDayOfWeek = this._dateAdapter.getFirstDayOfWeek();\n const narrowWeekdays = this._dateAdapter.getDayOfWeekNames('narrow');\n const longWeekdays = this._dateAdapter.getDayOfWeekNames('long');\n // Rotate the labels for days of the week based on the configured first day of the week.\n let weekdays = longWeekdays.map((long, i) => {\n return {\n long,\n narrow: narrowWeekdays[i],\n id: uniqueIdCounter++\n };\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 && (!this.minDate || this._dateAdapter.compareDate(date, this.minDate) >= 0) && (!this.maxDate || this._dateAdapter.compareDate(date, this.maxDate) <= 0) && (!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) ? 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) && 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 } else {\n this._rangeStart = this._rangeEnd = this._getCellCompareValue(selectedValue);\n this._isRange = false;\n }\n this._comparisonRangeStart = this._getCellCompareValue(this.comparisonStart);\n this._comparisonRangeEnd = this._getCellCompareValue(this.comparisonEnd);\n }\n /** Gets whether a date can be selected in the month view. */\n _canSelect(date) {\n return !this.dateFilter || this.dateFilter(date);\n }\n /** Clears out preview state. */\n _clearPreview() {\n this._previewStart = this._previewEnd = null;\n }\n static {\n this.ɵfac = function MatMonthView_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || MatMonthView)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(MAT_DATE_FORMATS, 8), i0.ɵɵdirectiveInject(i1.DateAdapter, 8), i0.ɵɵdirectiveInject(i2.Directionality, 8), i0.ɵɵdirectiveInject(MAT_DATE_RANGE_SELECTION_STRATEGY, 8));\n };\n }\n static {\n this.ɵcmp = /* @__PURE__ */i0.ɵɵdefineComponent({\n type: MatMonthView,\n selectors: [[\"mat-month-view\"]],\n viewQuery: function MatMonthView_Query(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵviewQuery(MatCalendarBody, 5);\n }\n if (rf & 2) {\n let _t;\n i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx._matCalendarBody = _t.first);\n }\n },\n inputs: {\n activeDate: \"activeDate\",\n selected: \"selected\",\n minDate: \"minDate\",\n maxDate: \"maxDate\",\n dateFilter: \"dateFilter\",\n dateClass: \"dateClass\",\n comparisonStart: \"comparisonStart\",\n comparisonEnd: \"comparisonEnd\",\n startDateAccessibleName: \"startDateAccessibleName\",\n endDateAccessibleName: \"endDateAccessibleName\",\n activeDrag: \"activeDrag\"\n },\n outputs: {\n selectedChange: \"selectedChange\",\n _userSelection: \"_userSelection\",\n dragStarted: \"dragStarted\",\n dragEnded: \"dragEnded\",\n activeDateChange: \"activeDateChange\"\n },\n exportAs: [\"matMonthView\"],\n standalone: true,\n features: [i0.ɵɵNgOnChangesFeature, i0.ɵɵStandaloneFeature],\n decls: 8,\n vars: 14,\n consts: [[\"role\", \"grid\", 1, \"mat-calendar-table\"], [1, \"mat-calendar-table-header\"], [\"scope\", \"col\"], [\"aria-hidden\", \"true\"], [\"colspan\", \"7\", 1, \"mat-calendar-table-header-divider\"], [\"mat-calendar-body\", \"\", 3, \"selectedValueChange\", \"activeDateChange\", \"previewChange\", \"dragStarted\", \"dragEnded\", \"keyup\", \"keydown\", \"label\", \"rows\", \"todayValue\", \"startValue\", \"endValue\", \"comparisonStart\", \"comparisonEnd\", \"previewStart\", \"previewEnd\", \"isRange\", \"labelMinRequiredCells\", \"activeCell\", \"startDateAccessibleName\", \"endDateAccessibleName\"], [1, \"cdk-visually-hidden\"]],\n template: function MatMonthView_Template(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵelementStart(0, \"table\", 0)(1, \"thead\", 1)(2, \"tr\");\n i0.ɵɵrepeaterCreate(3, MatMonthView_For_4_Template, 5, 2, \"th\", 2, _forTrack1);\n i0.ɵɵelementEnd();\n i0.ɵɵelementStart(5, \"tr\", 3);\n i0.ɵɵelement(6, \"th\", 4);\n i0.ɵɵelementEnd()();\n i0.ɵɵelementStart(7, \"tbody\", 5);\n i0.ɵɵlistener(\"selectedValueChange\", function MatMonthView_Template_tbody_selectedValueChange_7_listener($event) {\n return ctx._dateSelected($event);\n })(\"activeDateChange\", function MatMonthView_Template_tbody_activeDateChange_7_listener($event) {\n return ctx._updateActiveDate($event);\n })(\"previewChange\", function MatMonthView_Template_tbody_previewChange_7_listener($event) {\n return ctx._previewChanged($event);\n })(\"dragStarted\", function MatMonthView_Template_tbody_dragStarted_7_listener($event) {\n return ctx.dragStarted.emit($event);\n })(\"dragEnded\", function MatMonthView_Template_tbody_dragEnded_7_listener($event) {\n return ctx._dragEnded($event);\n })(\"keyup\", function MatMonthView_Template_tbody_keyup_7_listener($event) {\n return ctx._handleCalendarBodyKeyup($event);\n })(\"keydown\", function MatMonthView_Template_tbody_keydown_7_listener($event) {\n return ctx._handleCalendarBodyKeydown($event);\n });\n i0.ɵɵelementEnd()();\n }\n if (rf & 2) {\n i0.ɵɵadvance(3);\n i0.ɵɵrepeater(ctx._weekdays);\n i0.ɵɵadvance(4);\n i0.ɵɵ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)(\"startDateAccessibleName\", ctx.startDateAccessibleName)(\"endDateAccessibleName\", ctx.endDateAccessibleName);\n }\n },\n dependencies: [MatCalendarBody],\n encapsulation: 2,\n changeDetection: 0\n });\n }\n }\n return MatMonthView;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\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 */\nlet MatMultiYearView = /*#__PURE__*/(() => {\n class MatMultiYearView {\n /** The date to display in this multi-year view (everything other than the year is ignored). */\n get activeDate() {\n return this._activeDate;\n }\n set activeDate(value) {\n let oldActiveDate = this._activeDate;\n const validDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value)) || this._dateAdapter.today();\n this._activeDate = this._dateAdapter.clampDate(validDate, this.minDate, this.maxDate);\n if (!isSameMultiYearView(this._dateAdapter, oldActiveDate, this._activeDate, this.minDate, this.maxDate)) {\n this._init();\n }\n }\n /** The currently selected date. */\n get selected() {\n return this._selected;\n }\n set selected(value) {\n if (value instanceof DateRange) {\n this._selected = value;\n } else {\n this._selected = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));\n }\n this._setSelectedYear(value);\n }\n /** The minimum selectable date. */\n get minDate() {\n return this._minDate;\n }\n set minDate(value) {\n this._minDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));\n }\n /** The maximum selectable date. */\n get maxDate() {\n return this._maxDate;\n }\n set maxDate(value) {\n this._maxDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));\n }\n constructor(_changeDetectorRef, _dateAdapter, _dir) {\n this._changeDetectorRef = _changeDetectorRef;\n this._dateAdapter = _dateAdapter;\n this._dir = _dir;\n this._rerenderSubscription = Subscription.EMPTY;\n /** Emits when a new year is selected. */\n this.selectedChange = new EventEmitter();\n /** Emits the selected year. This doesn't imply a change on the selected date */\n this.yearSelected = new EventEmitter();\n /** Emits when any date is activated. */\n this.activeDateChange = new EventEmitter();\n if (!this._dateAdapter && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n throw createMissingDateImplError('DateAdapter');\n }\n this._activeDate = this._dateAdapter.today();\n }\n ngAfterContentInit() {\n this._rerenderSubscription = this._dateAdapter.localeChanges.pipe(startWith(null)).subscribe(() => this._init());\n }\n ngOnDestroy() {\n this._rerenderSubscription.unsubscribe();\n }\n /** Initializes this multi-year view. */\n _init() {\n this._todayYear = this._dateAdapter.getYear(this._dateAdapter.today());\n // We want a range years such that we maximize the number of\n // enabled dates visible at once. This prevents issues where the minimum year\n // is the last item of a page OR the maximum year is the first item of a page.\n // The offset from the active year to the \"slot\" for the starting year is the\n // *actual* first rendered year in the multi-year view.\n const activeYear = this._dateAdapter.getYear(this._activeDate);\n const minYearOfPage = activeYear - getActiveOffset(this._dateAdapter, this.activeDate, this.minDate, this.maxDate);\n this._years = [];\n for (let i = 0, row = []; i < yearsPerPage; i++) {\n row.push(minYearOfPage + i);\n if (row.length == yearsPerRow) {\n this._years.push(row.map(year => this._createCellForYear(year)));\n row = [];\n }\n }\n this._changeDetectorRef.markForCheck();\n }\n /** Handles when a new year is selected. */\n _yearSelected(event) {\n const year = event.value;\n const selectedYear = this._dateAdapter.createDate(year, 0, 1);\n const selectedDate = this._getDateFromYear(year);\n this.yearSelected.emit(selectedYear);\n this.selectedChange.emit(selectedDate);\n }\n /**\n * Takes the index of a calendar body cell wrapped in an event as argument. For the date that\n * corresponds to the given cell, set `activeDate` to that date and fire `activeDateChange` with\n * that date.\n *\n * This function is used to match each component's model of the active date with the calendar\n * body cell that was focused. It updates its value of `activeDate` synchronously and updates the\n * parent's value asynchronously via the `activeDateChange` event. The child component receives an\n * updated value asynchronously via the `activeCell` Input.\n */\n _updateActiveDate(event) {\n const year = event.value;\n const oldActiveDate = this._activeDate;\n this.activeDate = this._getDateFromYear(year);\n if (this._dateAdapter.compareDate(oldActiveDate, this.activeDate)) {\n this.activeDateChange.emit(this.activeDate);\n }\n }\n /** Handles keydown events on the calendar body when calendar is in multi-year view. */\n _handleCalendarBodyKeydown(event) {\n const oldActiveDate = this._activeDate;\n const isRtl = this._isRtl();\n switch (event.keyCode) {\n case LEFT_ARROW:\n this.activeDate = this._dateAdapter.addCalendarYears(this._activeDate, isRtl ? 1 : -1);\n break;\n case RIGHT_ARROW:\n this.activeDate = this._dateAdapter.addCalendarYears(this._activeDate, isRtl ? -1 : 1);\n break;\n case UP_ARROW:\n this.activeDate = this._dateAdapter.addCalendarYears(this._activeDate, -yearsPerRow);\n break;\n case DOWN_ARROW:\n this.activeDate = this._dateAdapter.addCalendarYears(this._activeDate, yearsPerRow);\n break;\n case HOME:\n this.activeDate = this._dateAdapter.addCalendarYears(this._activeDate, -getActiveOffset(this._dateAdapter, this.activeDate, this.minDate, this.maxDate));\n break;\n case END:\n this.activeDate = this._dateAdapter.addCalendarYears(this._activeDate, yearsPerPage - getActiveOffset(this._dateAdapter, this.activeDate, this.minDate, this.maxDate) - 1);\n break;\n case PAGE_UP:\n this.activeDate = this._dateAdapter.addCalendarYears(this._activeDate, event.altKey ? -yearsPerPage * 10 : -yearsPerPage);\n break;\n case PAGE_DOWN:\n this.activeDate = this._dateAdapter.addCalendarYears(this._activeDate, event.altKey ? yearsPerPage * 10 : yearsPerPage);\n break;\n case ENTER:\n case SPACE:\n // Note that we only prevent the default action here while the selection happens in\n // `keyup` below. We can't do the selection here, because it can cause the calendar to\n // reopen if focus is restored immediately. We also can't call `preventDefault` on `keyup`\n // because it's too late (see #23305).\n this._selectionKeyPressed = true;\n break;\n default:\n // Don't prevent default or focus active cell on keys that we don't explicitly handle.\n return;\n }\n if (this._dateAdapter.compareDate(oldActiveDate, this.activeDate)) {\n this.activeDateChange.emit(this.activeDate);\n }\n this._focusActiveCellAfterViewChecked();\n // Prevent unexpected default actions such as form submission.\n event.preventDefault();\n }\n /** Handles keyup events on the calendar body when calendar is in multi-year view. */\n _handleCalendarBodyKeyup(event) {\n if (event.keyCode === SPACE || event.keyCode === ENTER) {\n if (this._selectionKeyPressed) {\n this._yearSelected({\n value: this._dateAdapter.getYear(this._activeDate),\n event\n });\n }\n this._selectionKeyPressed = false;\n }\n }\n _getActiveCell() {\n return getActiveOffset(this._dateAdapter, this.activeDate, this.minDate, this.maxDate);\n }\n /** Focuses the active cell after the microtask queue is empty. */\n _focusActiveCell() {\n this._matCalendarBody._focusActiveCell();\n }\n /** Focuses the active cell after change detection has run and the microtask queue is empty. */\n _focusActiveCellAfterViewChecked() {\n this._matCalendarBody._scheduleFocusActiveCellAfterViewChecked();\n }\n /**\n * Takes a year and returns a new date on the same day and month as the currently active date\n * The returned date will have the same year as the argument date.\n */\n _getDateFromYear(year) {\n const activeMonth = this._dateAdapter.getMonth(this.activeDate);\n const daysInMonth = this._dateAdapter.getNumDaysInMonth(this._dateAdapter.createDate(year, activeMonth, 1));\n const normalizedDate = this._dateAdapter.createDate(year, activeMonth, Math.min(this._dateAdapter.getDate(this.activeDate), daysInMonth));\n return normalizedDate;\n }\n /** Creates an MatCalendarCell for the given year. */\n _createCellForYear(year) {\n const date = this._dateAdapter.createDate(year, 0, 1);\n const yearName = this._dateAdapter.getYearName(date);\n const cellClasses = this.dateClass ? this.dateClass(date, 'multi-year') : undefined;\n return new MatCalendarCell(year, yearName, yearName, this._shouldEnableYear(year), cellClasses);\n }\n /** Whether the given year is enabled. */\n _shouldEnableYear(year) {\n // disable if the year is greater than maxDate lower than minDate\n if (year === undefined || year === null || this.maxDate && year > this._dateAdapter.getYear(this.maxDate) || 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 } else if (value) {\n this._selectedYear = this._dateAdapter.getYear(value);\n }\n }\n static {\n this.ɵfac = function MatMultiYearView_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || MatMultiYearView)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1.DateAdapter, 8), i0.ɵɵdirectiveInject(i2.Directionality, 8));\n };\n }\n static {\n this.ɵcmp = /* @__PURE__ */i0.ɵɵdefineComponent({\n type: MatMultiYearView,\n selectors: [[\"mat-multi-year-view\"]],\n viewQuery: function MatMultiYearView_Query(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵviewQuery(MatCalendarBody, 5);\n }\n if (rf & 2) {\n let _t;\n i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx._matCalendarBody = _t.first);\n }\n },\n inputs: {\n activeDate: \"activeDate\",\n selected: \"selected\",\n minDate: \"minDate\",\n maxDate: \"maxDate\",\n dateFilter: \"dateFilter\",\n dateClass: \"dateClass\"\n },\n outputs: {\n selectedChange: \"selectedChange\",\n yearSelected: \"yearSelected\",\n activeDateChange: \"activeDateChange\"\n },\n exportAs: [\"matMultiYearView\"],\n standalone: true,\n features: [i0.ɵɵStandaloneFeature],\n decls: 5,\n vars: 7,\n consts: [[\"role\", \"grid\", 1, \"mat-calendar-table\"], [\"aria-hidden\", \"true\", 1, \"mat-calendar-table-header\"], [\"colspan\", \"4\", 1, \"mat-calendar-table-header-divider\"], [\"mat-calendar-body\", \"\", 3, \"selectedValueChange\", \"activeDateChange\", \"keyup\", \"keydown\", \"rows\", \"todayValue\", \"startValue\", \"endValue\", \"numCols\", \"cellAspectRatio\", \"activeCell\"]],\n template: function MatMultiYearView_Template(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵelementStart(0, \"table\", 0)(1, \"thead\", 1)(2, \"tr\");\n i0.ɵɵelement(3, \"th\", 2);\n i0.ɵɵelementEnd()();\n i0.ɵɵelementStart(4, \"tbody\", 3);\n i0.ɵɵlistener(\"selectedValueChange\", function MatMultiYearView_Template_tbody_selectedValueChange_4_listener($event) {\n return ctx._yearSelected($event);\n })(\"activeDateChange\", function MatMultiYearView_Template_tbody_activeDateChange_4_listener($event) {\n return ctx._updateActiveDate($event);\n })(\"keyup\", function MatMultiYearView_Template_tbody_keyup_4_listener($event) {\n return ctx._handleCalendarBodyKeyup($event);\n })(\"keydown\", function MatMultiYearView_Template_tbody_keydown_4_listener($event) {\n return ctx._handleCalendarBodyKeydown($event);\n });\n i0.ɵɵelementEnd()();\n }\n if (rf & 2) {\n i0.ɵɵadvance(4);\n i0.ɵɵproperty(\"rows\", ctx._years)(\"todayValue\", ctx._todayYear)(\"startValue\", ctx._selectedYear)(\"endValue\", ctx._selectedYear)(\"numCols\", 4)(\"cellAspectRatio\", 4 / 7)(\"activeCell\", ctx._getActiveCell());\n }\n },\n dependencies: [MatCalendarBody],\n encapsulation: 2,\n changeDetection: 0\n });\n }\n }\n return MatMultiYearView;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\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) === 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 } 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 * An internal component used to display a single year in the datepicker.\n * @docs-private\n */\nlet MatYearView = /*#__PURE__*/(() => {\n class MatYearView {\n /** The date to display in this year view (everything other than the year is ignored). */\n get activeDate() {\n return this._activeDate;\n }\n set activeDate(value) {\n let oldActiveDate = this._activeDate;\n const validDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value)) || this._dateAdapter.today();\n this._activeDate = this._dateAdapter.clampDate(validDate, this.minDate, this.maxDate);\n if (this._dateAdapter.getYear(oldActiveDate) !== this._dateAdapter.getYear(this._activeDate)) {\n this._init();\n }\n }\n /** The currently selected date. */\n get selected() {\n return this._selected;\n }\n set selected(value) {\n if (value instanceof DateRange) {\n this._selected = value;\n } else {\n this._selected = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));\n }\n this._setSelectedMonth(value);\n }\n /** The minimum selectable date. */\n get minDate() {\n return this._minDate;\n }\n set minDate(value) {\n this._minDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));\n }\n /** The maximum selectable date. */\n get maxDate() {\n return this._maxDate;\n }\n set maxDate(value) {\n this._maxDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));\n }\n constructor(_changeDetectorRef, _dateFormats, _dateAdapter, _dir) {\n this._changeDetectorRef = _changeDetectorRef;\n this._dateFormats = _dateFormats;\n this._dateAdapter = _dateAdapter;\n this._dir = _dir;\n this._rerenderSubscription = Subscription.EMPTY;\n /** Emits when a new month is selected. */\n this.selectedChange = new EventEmitter();\n /** Emits the selected month. This doesn't imply a change on the selected date */\n this.monthSelected = new EventEmitter();\n /** Emits when any date is activated. */\n this.activeDateChange = new EventEmitter();\n if (typeof ngDevMode === 'undefined' || ngDevMode) {\n if (!this._dateAdapter) {\n throw createMissingDateImplError('DateAdapter');\n }\n if (!this._dateFormats) {\n throw createMissingDateImplError('MAT_DATE_FORMATS');\n }\n }\n this._activeDate = this._dateAdapter.today();\n }\n ngAfterContentInit() {\n this._rerenderSubscription = this._dateAdapter.localeChanges.pipe(startWith(null)).subscribe(() => this._init());\n }\n ngOnDestroy() {\n this._rerenderSubscription.unsubscribe();\n }\n /** Handles when a new month is selected. */\n _monthSelected(event) {\n const month = event.value;\n const selectedMonth = this._dateAdapter.createDate(this._dateAdapter.getYear(this.activeDate), month, 1);\n this.monthSelected.emit(selectedMonth);\n const selectedDate = this._getDateFromMonth(month);\n this.selectedChange.emit(selectedDate);\n }\n /**\n * Takes the index of a calendar body cell wrapped in an event as argument. For the date that\n * corresponds to the given cell, set `activeDate` to that date and fire `activeDateChange` with\n * that date.\n *\n * This function is used to match each component's model of the active date with the calendar\n * body cell that was focused. It updates its value of `activeDate` synchronously and updates the\n * parent's value asynchronously via the `activeDateChange` event. The child component receives an\n * updated value asynchronously via the `activeCell` Input.\n */\n _updateActiveDate(event) {\n const month = event.value;\n const oldActiveDate = this._activeDate;\n this.activeDate = this._getDateFromMonth(month);\n if (this._dateAdapter.compareDate(oldActiveDate, this.activeDate)) {\n this.activeDateChange.emit(this.activeDate);\n }\n }\n /** Handles keydown events on the calendar body when calendar is in year view. */\n _handleCalendarBodyKeydown(event) {\n // TODO(mmalerba): We currently allow keyboard navigation to disabled dates, but just prevent\n // disabled ones from being selected. This may not be ideal, we should look into whether\n // navigation should skip over disabled dates, and if so, how to implement that efficiently.\n const oldActiveDate = this._activeDate;\n const isRtl = this._isRtl();\n switch (event.keyCode) {\n case LEFT_ARROW:\n this.activeDate = this._dateAdapter.addCalendarMonths(this._activeDate, isRtl ? 1 : -1);\n break;\n case RIGHT_ARROW:\n this.activeDate = this._dateAdapter.addCalendarMonths(this._activeDate, isRtl ? -1 : 1);\n break;\n case UP_ARROW:\n this.activeDate = this._dateAdapter.addCalendarMonths(this._activeDate, -4);\n break;\n case DOWN_ARROW:\n this.activeDate = this._dateAdapter.addCalendarMonths(this._activeDate, 4);\n break;\n case HOME:\n this.activeDate = this._dateAdapter.addCalendarMonths(this._activeDate, -this._dateAdapter.getMonth(this._activeDate));\n break;\n case END:\n this.activeDate = this._dateAdapter.addCalendarMonths(this._activeDate, 11 - this._dateAdapter.getMonth(this._activeDate));\n break;\n case PAGE_UP:\n this.activeDate = this._dateAdapter.addCalendarYears(this._activeDate, event.altKey ? -10 : -1);\n break;\n case PAGE_DOWN:\n this.activeDate = this._dateAdapter.addCalendarYears(this._activeDate, event.altKey ? 10 : 1);\n break;\n case ENTER:\n case SPACE:\n // Note that we only prevent the default action here while the selection happens in\n // `keyup` below. We can't do the selection here, because it can cause the calendar to\n // reopen if focus is restored immediately. We also can't call `preventDefault` on `keyup`\n // because it's too late (see #23305).\n this._selectionKeyPressed = true;\n break;\n default:\n // Don't prevent default or focus active cell on keys that we don't explicitly handle.\n return;\n }\n if (this._dateAdapter.compareDate(oldActiveDate, this.activeDate)) {\n this.activeDateChange.emit(this.activeDate);\n this._focusActiveCellAfterViewChecked();\n }\n // Prevent unexpected default actions such as form submission.\n event.preventDefault();\n }\n /** Handles keyup events on the calendar body when calendar is in year view. */\n _handleCalendarBodyKeyup(event) {\n if (event.keyCode === SPACE || event.keyCode === ENTER) {\n if (this._selectionKeyPressed) {\n this._monthSelected({\n value: this._dateAdapter.getMonth(this._activeDate),\n event\n });\n }\n this._selectionKeyPressed = false;\n }\n }\n /** Initializes this year view. */\n _init() {\n this._setSelectedMonth(this.selected);\n this._todayMonth = this._getMonthInCurrentYear(this._dateAdapter.today());\n this._yearLabel = this._dateAdapter.getYearName(this.activeDate);\n let monthNames = this._dateAdapter.getMonthNames('short');\n // First row of months only contains 5 elements so we can fit the year label on the same row.\n this._months = [[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 /** Schedules the matCalendarBody to focus the active cell after change detection has run */\n _focusActiveCellAfterViewChecked() {\n this._matCalendarBody._scheduleFocusActiveCellAfterViewChecked();\n }\n /**\n * Gets the month in this year that the given Date falls on.\n * Returns null if the given Date is in another year.\n */\n _getMonthInCurrentYear(date) {\n return date && this._dateAdapter.getYear(date) == this._dateAdapter.getYear(this.activeDate) ? this._dateAdapter.getMonth(date) : null;\n }\n /**\n * Takes a month and returns a new date in the same day and year as the currently active date.\n * The returned date will have the same month as the argument date.\n */\n _getDateFromMonth(month) {\n const normalizedDate = this._dateAdapter.createDate(this._dateAdapter.getYear(this.activeDate), month, 1);\n const daysInMonth = this._dateAdapter.getNumDaysInMonth(normalizedDate);\n return this._dateAdapter.createDate(this._dateAdapter.getYear(this.activeDate), month, Math.min(this._dateAdapter.getDate(this.activeDate), daysInMonth));\n }\n /** Creates an MatCalendarCell for the given month. */\n _createCellForMonth(month, monthName) {\n const date = this._dateAdapter.createDate(this._dateAdapter.getYear(this.activeDate), month, 1);\n const ariaLabel = this._dateAdapter.format(date, this._dateFormats.display.monthYearA11yLabel);\n const cellClasses = this.dateClass ? this.dateClass(date, 'year') : undefined;\n return new MatCalendarCell(month, monthName.toLocaleUpperCase(), ariaLabel, this._shouldEnableMonth(month), cellClasses);\n }\n /** Whether the given month is enabled. */\n _shouldEnableMonth(month) {\n const activeYear = this._dateAdapter.getYear(this.activeDate);\n if (month === undefined || month === null || this._isYearAndMonthAfterMaxDate(activeYear, month) || 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) || this._getMonthInCurrentYear(value.end);\n } else {\n this._selectedMonth = this._getMonthInCurrentYear(value);\n }\n }\n static {\n this.ɵfac = function MatYearView_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || MatYearView)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(MAT_DATE_FORMATS, 8), i0.ɵɵdirectiveInject(i1.DateAdapter, 8), i0.ɵɵdirectiveInject(i2.Directionality, 8));\n };\n }\n static {\n this.ɵcmp = /* @__PURE__ */i0.ɵɵdefineComponent({\n type: MatYearView,\n selectors: [[\"mat-year-view\"]],\n viewQuery: function MatYearView_Query(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵviewQuery(MatCalendarBody, 5);\n }\n if (rf & 2) {\n let _t;\n i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx._matCalendarBody = _t.first);\n }\n },\n inputs: {\n activeDate: \"activeDate\",\n selected: \"selected\",\n minDate: \"minDate\",\n maxDate: \"maxDate\",\n dateFilter: \"dateFilter\",\n dateClass: \"dateClass\"\n },\n outputs: {\n selectedChange: \"selectedChange\",\n monthSelected: \"monthSelected\",\n activeDateChange: \"activeDateChange\"\n },\n exportAs: [\"matYearView\"],\n standalone: true,\n features: [i0.ɵɵStandaloneFeature],\n decls: 5,\n vars: 9,\n consts: [[\"role\", \"grid\", 1, \"mat-calendar-table\"], [\"aria-hidden\", \"true\", 1, \"mat-calendar-table-header\"], [\"colspan\", \"4\", 1, \"mat-calendar-table-header-divider\"], [\"mat-calendar-body\", \"\", 3, \"selectedValueChange\", \"activeDateChange\", \"keyup\", \"keydown\", \"label\", \"rows\", \"todayValue\", \"startValue\", \"endValue\", \"labelMinRequiredCells\", \"numCols\", \"cellAspectRatio\", \"activeCell\"]],\n template: function MatYearView_Template(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵelementStart(0, \"table\", 0)(1, \"thead\", 1)(2, \"tr\");\n i0.ɵɵelement(3, \"th\", 2);\n i0.ɵɵelementEnd()();\n i0.ɵɵelementStart(4, \"tbody\", 3);\n i0.ɵɵlistener(\"selectedValueChange\", function MatYearView_Template_tbody_selectedValueChange_4_listener($event) {\n return ctx._monthSelected($event);\n })(\"activeDateChange\", function MatYearView_Template_tbody_activeDateChange_4_listener($event) {\n return ctx._updateActiveDate($event);\n })(\"keyup\", function MatYearView_Template_tbody_keyup_4_listener($event) {\n return ctx._handleCalendarBodyKeyup($event);\n })(\"keydown\", function MatYearView_Template_tbody_keydown_4_listener($event) {\n return ctx._handleCalendarBodyKeydown($event);\n });\n i0.ɵɵelementEnd()();\n }\n if (rf & 2) {\n i0.ɵɵadvance(4);\n i0.ɵɵ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 }\n },\n dependencies: [MatCalendarBody],\n encapsulation: 2,\n changeDetection: 0\n });\n }\n }\n return MatYearView;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\nlet calendarHeaderId = 1;\n/** Default header for MatCalendar */\nlet MatCalendarHeader = /*#__PURE__*/(() => {\n class 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._id = `mat-calendar-header-${calendarHeaderId++}`;\n this._periodButtonLabelId = `${this._id}-period-label`;\n this.calendar.stateChanges.subscribe(() => changeDetectorRef.markForCheck());\n }\n /** The display text for the current calendar view. */\n get periodButtonText() {\n if (this.calendar.currentView == 'month') {\n return this._dateAdapter.format(this.calendar.activeDate, this._dateFormats.display.monthYearLabel).toLocaleUpperCase();\n }\n if (this.calendar.currentView == 'year') {\n return this._dateAdapter.getYearName(this.calendar.activeDate);\n }\n return this._intl.formatYearRange(...this._formatMinAndMaxYearLabels());\n }\n /** The aria description for the current calendar view. */\n get periodButtonDescription() {\n if (this.calendar.currentView == 'month') {\n return this._dateAdapter.format(this.calendar.activeDate, this._dateFormats.display.monthYearLabel).toLocaleUpperCase();\n }\n if (this.calendar.currentView == 'year') {\n return this._dateAdapter.getYearName(this.calendar.activeDate);\n }\n // Format a label for the window of years displayed in the multi-year calendar view. Use\n // `formatYearRangeLabel` because it is TTS friendly.\n return this._intl.formatYearRangeLabel(...this._formatMinAndMaxYearLabels());\n }\n /** The `aria-label` for changing the calendar view. */\n get periodButtonLabel() {\n return this.calendar.currentView == 'month' ? 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' ? this._dateAdapter.addCalendarMonths(this.calendar.activeDate, -1) : 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' ? this._dateAdapter.addCalendarMonths(this.calendar.activeDate, 1) : 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 || !this._isSameView(this.calendar.activeDate, this.calendar.minDate);\n }\n /** Whether the next period button is enabled. */\n nextEnabled() {\n return !this.calendar.maxDate || !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) && 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 /**\n * Format two individual labels for the minimum year and maximum year available in the multi-year\n * calendar view. Returns an array of two strings where the first string is the formatted label\n * for the minimum year, and the second string is the formatted label for the maximum year.\n */\n _formatMinAndMaxYearLabels() {\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 minYearLabel = this._dateAdapter.getYearName(this._dateAdapter.createDate(minYearOfPage, 0, 1));\n const maxYearLabel = this._dateAdapter.getYearName(this._dateAdapter.createDate(maxYearOfPage, 0, 1));\n return [minYearLabel, maxYearLabel];\n }\n static {\n this.ɵfac = function MatCalendarHeader_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || MatCalendarHeader)(i0.ɵɵdirectiveInject(MatDatepickerIntl), i0.ɵɵdirectiveInject(forwardRef(() => MatCalendar)), i0.ɵɵdirectiveInject(i1.DateAdapter, 8), i0.ɵɵdirectiveInject(MAT_DATE_FORMATS, 8), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef));\n };\n }\n static {\n this.ɵcmp = /* @__PURE__ */i0.ɵɵdefineComponent({\n type: MatCalendarHeader,\n selectors: [[\"mat-calendar-header\"]],\n exportAs: [\"matCalendarHeader\"],\n standalone: true,\n features: [i0.ɵɵStandaloneFeature],\n ngContentSelectors: _c1,\n decls: 17,\n vars: 11,\n consts: [[1, \"mat-calendar-header\"], [1, \"mat-calendar-controls\"], [\"aria-live\", \"polite\", 1, \"cdk-visually-hidden\", 3, \"id\"], [\"mat-button\", \"\", \"type\", \"button\", 1, \"mat-calendar-period-button\", 3, \"click\"], [\"aria-hidden\", \"true\"], [\"viewBox\", \"0 0 10 5\", \"focusable\", \"false\", \"aria-hidden\", \"true\", 1, \"mat-calendar-arrow\"], [\"points\", \"0,0 5,5 10,0\"], [1, \"mat-calendar-spacer\"], [\"mat-icon-button\", \"\", \"type\", \"button\", 1, \"mat-calendar-previous-button\", 3, \"click\", \"disabled\"], [\"viewBox\", \"0 0 24 24\", \"focusable\", \"false\", \"aria-hidden\", \"true\"], [\"d\", \"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z\"], [\"mat-icon-button\", \"\", \"type\", \"button\", 1, \"mat-calendar-next-button\", 3, \"click\", \"disabled\"], [\"d\", \"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"]],\n template: function MatCalendarHeader_Template(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵprojectionDef();\n i0.ɵɵelementStart(0, \"div\", 0)(1, \"div\", 1)(2, \"span\", 2);\n i0.ɵɵtext(3);\n i0.ɵɵelementEnd();\n i0.ɵɵelementStart(4, \"button\", 3);\n i0.ɵɵlistener(\"click\", function MatCalendarHeader_Template_button_click_4_listener() {\n return ctx.currentPeriodClicked();\n });\n i0.ɵɵelementStart(5, \"span\", 4);\n i0.ɵɵtext(6);\n i0.ɵɵelementEnd();\n i0.ɵɵnamespaceSVG();\n i0.ɵɵelementStart(7, \"svg\", 5);\n i0.ɵɵelement(8, \"polygon\", 6);\n i0.ɵɵelementEnd()();\n i0.ɵɵnamespaceHTML();\n i0.ɵɵelement(9, \"div\", 7);\n i0.ɵɵprojection(10);\n i0.ɵɵelementStart(11, \"button\", 8);\n i0.ɵɵlistener(\"click\", function MatCalendarHeader_Template_button_click_11_listener() {\n return ctx.previousClicked();\n });\n i0.ɵɵnamespaceSVG();\n i0.ɵɵelementStart(12, \"svg\", 9);\n i0.ɵɵelement(13, \"path\", 10);\n i0.ɵɵelementEnd()();\n i0.ɵɵnamespaceHTML();\n i0.ɵɵelementStart(14, \"button\", 11);\n i0.ɵɵlistener(\"click\", function MatCalendarHeader_Template_button_click_14_listener() {\n return ctx.nextClicked();\n });\n i0.ɵɵnamespaceSVG();\n i0.ɵɵelementStart(15, \"svg\", 9);\n i0.ɵɵelement(16, \"path\", 12);\n i0.ɵɵelementEnd()()()();\n }\n if (rf & 2) {\n i0.ɵɵadvance(2);\n i0.ɵɵproperty(\"id\", ctx._periodButtonLabelId);\n i0.ɵɵadvance();\n i0.ɵɵtextInterpolate(ctx.periodButtonDescription);\n i0.ɵɵadvance();\n i0.ɵɵattribute(\"aria-label\", ctx.periodButtonLabel)(\"aria-describedby\", ctx._periodButtonLabelId);\n i0.ɵɵadvance(2);\n i0.ɵɵtextInterpolate(ctx.periodButtonText);\n i0.ɵɵadvance();\n i0.ɵɵclassProp(\"mat-calendar-invert\", ctx.calendar.currentView !== \"month\");\n i0.ɵɵadvance(4);\n i0.ɵɵproperty(\"disabled\", !ctx.previousEnabled());\n i0.ɵɵattribute(\"aria-label\", ctx.prevButtonLabel);\n i0.ɵɵadvance(3);\n i0.ɵɵproperty(\"disabled\", !ctx.nextEnabled());\n i0.ɵɵattribute(\"aria-label\", ctx.nextButtonLabel);\n }\n },\n dependencies: [MatButton, MatIconButton],\n encapsulation: 2,\n changeDetection: 0\n });\n }\n }\n return MatCalendarHeader;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n/** A calendar that is used as part of the datepicker. */\nlet MatCalendar = /*#__PURE__*/(() => {\n class MatCalendar {\n /** A date representing the period (month or year) to start the calendar in. */\n get startAt() {\n return this._startAt;\n }\n set startAt(value) {\n this._startAt = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));\n }\n /** The currently selected date. */\n get selected() {\n return this._selected;\n }\n set selected(value) {\n if (value instanceof DateRange) {\n this._selected = value;\n } else {\n this._selected = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));\n }\n }\n /** The minimum selectable date. */\n get minDate() {\n return this._minDate;\n }\n set minDate(value) {\n this._minDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));\n }\n /** The maximum selectable date. */\n get maxDate() {\n return this._maxDate;\n }\n set maxDate(value) {\n this._maxDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));\n }\n /**\n * The current active date. This determines which time period is shown and which date is\n * highlighted when using keyboard navigation.\n */\n get activeDate() {\n return this._clampedActiveDate;\n }\n set activeDate(value) {\n this._clampedActiveDate = this._dateAdapter.clampDate(value, this.minDate, this.maxDate);\n this.stateChanges.next();\n this._changeDetectorRef.markForCheck();\n }\n /** Whether the calendar is in month view. */\n get currentView() {\n return this._currentView;\n }\n set currentView(value) {\n const viewChangedResult = this._currentView !== value ? value : null;\n this._currentView = value;\n this._moveFocusOnNextTick = true;\n this._changeDetectorRef.markForCheck();\n if (viewChangedResult) {\n this.viewChanged.emit(viewChangedResult);\n }\n }\n constructor(_intl, _dateAdapter, _dateFormats, _changeDetectorRef) {\n this._dateAdapter = _dateAdapter;\n this._dateFormats = _dateFormats;\n this._changeDetectorRef = _changeDetectorRef;\n /**\n * Used for scheduling that focus should be moved to the active cell on the next tick.\n * We need to schedule it, rather than do it immediately, because we have to wait\n * for Angular to re-evaluate the view children.\n */\n this._moveFocusOnNextTick = false;\n /** Whether the calendar should be started in month or year view. */\n this.startView = 'month';\n /** Emits when the currently selected date changes. */\n this.selectedChange = new EventEmitter();\n /**\n * Emits the year chosen in multiyear view.\n * This doesn't imply a change on the selected date.\n */\n this.yearSelected = new EventEmitter();\n /**\n * Emits the month chosen in year view.\n * This doesn't imply a change on the selected date.\n */\n this.monthSelected = new EventEmitter();\n /**\n * Emits when the current view changes.\n */\n this.viewChanged = new EventEmitter(true);\n /** Emits when any date is selected. */\n this._userSelection = new EventEmitter();\n /** Emits a new date range value when the user completes a drag drop operation. */\n this._userDragDrop = new EventEmitter();\n /** Origin of active drag, or null when dragging is not active. */\n this._activeDrag = null;\n /**\n * Emits whenever there is a state change that the header may need to respond to.\n */\n this.stateChanges = new Subject();\n if (typeof ngDevMode === 'undefined' || ngDevMode) {\n if (!this._dateAdapter) {\n throw createMissingDateImplError('DateAdapter');\n }\n if (!this._dateFormats) {\n throw createMissingDateImplError('MAT_DATE_FORMATS');\n }\n }\n this._intlChanges = _intl.changes.subscribe(() => {\n _changeDetectorRef.markForCheck();\n this.stateChanges.next();\n });\n }\n ngAfterContentInit() {\n this._calendarHeaderPortal = new ComponentPortal(this.headerComponent || MatCalendarHeader);\n this.activeDate = this.startAt || this._dateAdapter.today();\n // Assign to the private property since we don't want to move focus on init.\n this._currentView = this.startView;\n }\n ngAfterViewChecked() {\n if (this._moveFocusOnNextTick) {\n this._moveFocusOnNextTick = false;\n this.focusActiveCell();\n }\n }\n ngOnDestroy() {\n this._intlChanges.unsubscribe();\n this.stateChanges.complete();\n }\n ngOnChanges(changes) {\n // Ignore date changes that are at a different time on the same day. This fixes issues where\n // the calendar re-renders when there is no meaningful change to [minDate] or [maxDate]\n // (#24435).\n const minDateChange = changes['minDate'] && !this._dateAdapter.sameDate(changes['minDate'].previousValue, changes['minDate'].currentValue) ? changes['minDate'] : undefined;\n const maxDateChange = changes['maxDate'] && !this._dateAdapter.sameDate(changes['maxDate'].previousValue, changes['maxDate'].currentValue) ? changes['maxDate'] : undefined;\n const changeRequiringRerender = minDateChange || maxDateChange || changes['dateFilter'];\n if (changeRequiringRerender && !changeRequiringRerender.firstChange) {\n const view = this._getCurrentViewComponent();\n if (view) {\n // Schedule focus to be moved to the active date since re-rendering\n // can blur the active cell. See #29265.\n this._moveFocusOnNextTick = true;\n // We need to `detectChanges` manually here, because the `minDate`, `maxDate` etc. are\n // passed down to the view via data bindings which won't be up-to-date when we call `_init`.\n this._changeDetectorRef.detectChanges();\n view._init();\n }\n }\n this.stateChanges.next();\n }\n /** Focuses the active date. */\n focusActiveCell() {\n this._getCurrentViewComponent()._focusActiveCell(false);\n }\n /** Updates today's date after an update of the active date */\n updateTodaysDate() {\n this._getCurrentViewComponent()._init();\n }\n /** Handles date selection in the month view. */\n _dateSelected(event) {\n const date = event.value;\n if (this.selected instanceof DateRange || date && !this._dateAdapter.sameDate(date, this.selected)) {\n this.selectedChange.emit(date);\n }\n this._userSelection.emit(event);\n }\n /** Handles year selection in the multiyear view. */\n _yearSelectedInMultiYearView(normalizedYear) {\n this.yearSelected.emit(normalizedYear);\n }\n /** Handles month selection in the year view. */\n _monthSelectedInYearView(normalizedMonth) {\n this.monthSelected.emit(normalizedMonth);\n }\n /** Handles year/month selection in the multi-year/year views. */\n _goToDateInView(date, view) {\n this.activeDate = date;\n this.currentView = view;\n }\n /** Called when the user starts dragging to change a date range. */\n _dragStarted(event) {\n this._activeDrag = event;\n }\n /**\n * Called when a drag completes. It may end in cancelation or in the selection\n * of a new range.\n */\n _dragEnded(event) {\n if (!this._activeDrag) return;\n if (event.value) {\n this._userDragDrop.emit(event);\n }\n this._activeDrag = null;\n }\n /** Returns the component instance that corresponds to the current calendar view. */\n _getCurrentViewComponent() {\n // The return type is explicitly written as a union to ensure that the Closure compiler does\n // not optimize calls to _init(). Without the explicit return type, TypeScript narrows it to\n // only the first component type. See https://github.com/angular/components/issues/22996.\n return this.monthView || this.yearView || this.multiYearView;\n }\n static {\n this.ɵfac = function MatCalendar_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || MatCalendar)(i0.ɵɵdirectiveInject(MatDatepickerIntl), i0.ɵɵdirectiveInject(i1.DateAdapter, 8), i0.ɵɵdirectiveInject(MAT_DATE_FORMATS, 8), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef));\n };\n }\n static {\n this.ɵcmp = /* @__PURE__ */i0.ɵɵdefineComponent({\n type: MatCalendar,\n selectors: [[\"mat-calendar\"]],\n viewQuery: function MatCalendar_Query(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵviewQuery(MatMonthView, 5);\n i0.ɵɵviewQuery(MatYearView, 5);\n i0.ɵɵviewQuery(MatMultiYearView, 5);\n }\n if (rf & 2) {\n let _t;\n i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.monthView = _t.first);\n i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.yearView = _t.first);\n i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.multiYearView = _t.first);\n }\n },\n hostAttrs: [1, \"mat-calendar\"],\n inputs: {\n headerComponent: \"headerComponent\",\n startAt: \"startAt\",\n startView: \"startView\",\n selected: \"selected\",\n minDate: \"minDate\",\n maxDate: \"maxDate\",\n dateFilter: \"dateFilter\",\n dateClass: \"dateClass\",\n comparisonStart: \"comparisonStart\",\n comparisonEnd: \"comparisonEnd\",\n startDateAccessibleName: \"startDateAccessibleName\",\n endDateAccessibleName: \"endDateAccessibleName\"\n },\n outputs: {\n selectedChange: \"selectedChange\",\n yearSelected: \"yearSelected\",\n monthSelected: \"monthSelected\",\n viewChanged: \"viewChanged\",\n _userSelection: \"_userSelection\",\n _userDragDrop: \"_userDragDrop\"\n },\n exportAs: [\"matCalendar\"],\n standalone: true,\n features: [i0.ɵɵProvidersFeature([MAT_SINGLE_DATE_SELECTION_MODEL_PROVIDER]), i0.ɵɵNgOnChangesFeature, i0.ɵɵStandaloneFeature],\n decls: 5,\n vars: 2,\n consts: [[3, \"cdkPortalOutlet\"], [\"cdkMonitorSubtreeFocus\", \"\", \"tabindex\", \"-1\", 1, \"mat-calendar-content\"], [3, \"activeDate\", \"selected\", \"dateFilter\", \"maxDate\", \"minDate\", \"dateClass\", \"comparisonStart\", \"comparisonEnd\", \"startDateAccessibleName\", \"endDateAccessibleName\", \"activeDrag\"], [3, \"activeDate\", \"selected\", \"dateFilter\", \"maxDate\", \"minDate\", \"dateClass\"], [3, \"activeDateChange\", \"_userSelection\", \"dragStarted\", \"dragEnded\", \"activeDate\", \"selected\", \"dateFilter\", \"maxDate\", \"minDate\", \"dateClass\", \"comparisonStart\", \"comparisonEnd\", \"startDateAccessibleName\", \"endDateAccessibleName\", \"activeDrag\"], [3, \"activeDateChange\", \"monthSelected\", \"selectedChange\", \"activeDate\", \"selected\", \"dateFilter\", \"maxDate\", \"minDate\", \"dateClass\"], [3, \"activeDateChange\", \"yearSelected\", \"selectedChange\", \"activeDate\", \"selected\", \"dateFilter\", \"maxDate\", \"minDate\", \"dateClass\"]],\n template: function MatCalendar_Template(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵtemplate(0, MatCalendar_ng_template_0_Template, 0, 0, \"ng-template\", 0);\n i0.ɵɵelementStart(1, \"div\", 1);\n i0.ɵɵtemplate(2, MatCalendar_Case_2_Template, 1, 11, \"mat-month-view\", 2)(3, MatCalendar_Case_3_Template, 1, 6, \"mat-year-view\", 3)(4, MatCalendar_Case_4_Template, 1, 6, \"mat-multi-year-view\", 3);\n i0.ɵɵelementEnd();\n }\n if (rf & 2) {\n let tmp_1_0;\n i0.ɵɵproperty(\"cdkPortalOutlet\", ctx._calendarHeaderPortal);\n i0.ɵɵadvance(2);\n i0.ɵɵconditional((tmp_1_0 = ctx.currentView) === \"month\" ? 2 : tmp_1_0 === \"year\" ? 3 : tmp_1_0 === \"multi-year\" ? 4 : -1);\n }\n },\n dependencies: [CdkPortalOutlet, CdkMonitorFocus, MatMonthView, MatYearView, MatMultiYearView],\n styles: [\".mat-calendar{display:block;line-height:normal;font-family:var(--mat-datepicker-calendar-text-font, var(--mat-app-body-medium-font));font-size:var(--mat-datepicker-calendar-text-size, var(--mat-app-body-medium-size))}.mat-calendar-header{padding:8px 8px 0 8px}.mat-calendar-content{padding:0 8px 8px 8px;outline:none}.mat-calendar-controls{display:flex;align-items:center;margin:5% calc(4.7142857143% - 16px)}.mat-calendar-spacer{flex:1 1 auto}.mat-calendar-period-button{min-width:0;margin:0 8px;font-size:var(--mat-datepicker-calendar-period-button-text-size, var(--mat-app-title-small-size));font-weight:var(--mat-datepicker-calendar-period-button-text-weight, var(--mat-app-title-small-weight));--mdc-text-button-label-text-color:var(--mat-datepicker-calendar-period-button-text-color, var(--mat-app-on-surface-variant))}.mat-calendar-arrow{display:inline-block;width:10px;height:5px;margin:0 0 0 5px;vertical-align:middle;fill:var(--mat-datepicker-calendar-period-button-icon-color, var(--mat-app-on-surface-variant))}.mat-calendar-arrow.mat-calendar-invert{transform:rotate(180deg)}[dir=rtl] .mat-calendar-arrow{margin:0 5px 0 0}.cdk-high-contrast-active .mat-calendar-arrow{fill:CanvasText}.mat-datepicker-content .mat-calendar-previous-button:not(.mat-mdc-button-disabled),.mat-datepicker-content .mat-calendar-next-button:not(.mat-mdc-button-disabled){color:var(--mat-datepicker-calendar-navigation-button-icon-color, var(--mat-app-on-surface-variant))}[dir=rtl] .mat-calendar-previous-button,[dir=rtl] .mat-calendar-next-button{transform:rotate(180deg)}.mat-calendar-table{border-spacing:0;border-collapse:collapse;width:100%}.mat-calendar-table-header th{text-align:center;padding:0 0 8px 0;color:var(--mat-datepicker-calendar-header-text-color, var(--mat-app-on-surface-variant));font-size:var(--mat-datepicker-calendar-header-text-size, var(--mat-app-title-small-size));font-weight:var(--mat-datepicker-calendar-header-text-weight, var(--mat-app-title-small-weight))}.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;background:var(--mat-datepicker-calendar-header-divider-color)}.mat-calendar-body-cell-content::before{margin:calc(calc(var(--mat-focus-indicator-border-width, 3px) + 3px)*-1)}.mat-calendar-body-cell:focus .mat-focus-indicator::before{content:\\\"\\\"}\"],\n encapsulation: 2,\n changeDetection: 0\n });\n }\n }\n return MatCalendar;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\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: /*#__PURE__*/trigger('transformPanel', [/*#__PURE__*/transition('void => enter-dropdown', /*#__PURE__*/animate('120ms cubic-bezier(0, 0, 0.2, 1)', /*#__PURE__*/keyframes([/*#__PURE__*/style({\n opacity: 0,\n transform: 'scale(1, 0.8)'\n }), /*#__PURE__*/style({\n opacity: 1,\n transform: 'scale(1, 1)'\n })]))), /*#__PURE__*/transition('void => enter-dialog', /*#__PURE__*/animate('150ms cubic-bezier(0, 0, 0.2, 1)', /*#__PURE__*/keyframes([/*#__PURE__*/style({\n opacity: 0,\n transform: 'scale(0.7)'\n }), /*#__PURE__*/style({\n transform: 'none',\n opacity: 1\n })]))), /*#__PURE__*/transition('* => void', /*#__PURE__*/animate('100ms linear', /*#__PURE__*/style({\n opacity: 0\n })))]),\n /** Fades in the content of the calendar. */\n fadeInCalendar: /*#__PURE__*/trigger('fadeInCalendar', [/*#__PURE__*/state('void', /*#__PURE__*/style({\n opacity: 0\n })), /*#__PURE__*/state('enter', /*#__PURE__*/style({\n opacity: 1\n })),\n /*#__PURE__*/\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 => *', /*#__PURE__*/animate('120ms 100ms cubic-bezier(0.55, 0, 0.55, 0.2)'))])\n};\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 = /*#__PURE__*/new InjectionToken('mat-datepicker-scroll-strategy', {\n providedIn: 'root',\n factory: () => {\n const overlay = inject(Overlay);\n return () => overlay.scrollStrategies.reposition();\n }\n});\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/**\n * Component used as the content for the datepicker overlay. We use this instead of using\n * MatCalendar directly as the content so we can control the initial focus. This also gives us a\n * place to put additional features of the overlay that are not part of the calendar itself in the\n * future. (e.g. confirmation buttons).\n * @docs-private\n */\nlet MatDatepickerContent = /*#__PURE__*/(() => {\n class MatDatepickerContent {\n constructor(_elementRef, _changeDetectorRef, _globalModel, _dateAdapter, _rangeSelectionStrategy, intl) {\n this._elementRef = _elementRef;\n this._changeDetectorRef = _changeDetectorRef;\n this._globalModel = _globalModel;\n this._dateAdapter = _dateAdapter;\n this._rangeSelectionStrategy = _rangeSelectionStrategy;\n this._subscriptions = new Subscription();\n /** Emits when an animation has finished. */\n this._animationDone = new Subject();\n /** Whether there is an in-progress animation. */\n this._isAnimating = false;\n /** Portal with projected action buttons. */\n this._actionsPortal = null;\n this._closeButtonText = intl.closeCalendarLabel;\n }\n ngOnInit() {\n this._animationState = this.datepicker.touchUi ? 'enter-dialog' : 'enter-dropdown';\n }\n ngAfterViewInit() {\n this._subscriptions.add(this.datepicker.stateChanges.subscribe(() => {\n this._changeDetectorRef.markForCheck();\n }));\n this._calendar.focusActiveCell();\n }\n ngOnDestroy() {\n this._subscriptions.unsubscribe();\n this._animationDone.complete();\n }\n _handleUserSelection(event) {\n const selection = this._model.selection;\n const value = event.value;\n const isRange = selection instanceof DateRange;\n // If we're selecting a range and we have a selection strategy, always pass the value through\n // there. Otherwise don't assign null values to the model, unless we're selecting a range.\n // A null value when picking a range means that the user cancelled the selection (e.g. by\n // pressing escape), whereas when selecting a single value it means that the value didn't\n // change. This isn't very intuitive, but it's here for backwards-compatibility.\n if (isRange && this._rangeSelectionStrategy) {\n const newSelection = this._rangeSelectionStrategy.selectionFinished(value, selection, event.event);\n this._model.updateSelection(newSelection, this);\n } else if (value && (isRange || !this._dateAdapter.sameDate(value, selection))) {\n this._model.add(value);\n }\n // Delegate closing the overlay to the actions.\n if ((!this._model || this._model.isComplete()) && !this._actionsPortal) {\n this.datepicker.close();\n }\n }\n _handleUserDragDrop(event) {\n this._model.updateSelection(event.value, this);\n }\n _startExitAnimation() {\n this._animationState = 'void';\n this._changeDetectorRef.markForCheck();\n }\n _handleAnimationEvent(event) {\n this._isAnimating = event.phaseName === 'start';\n if (!this._isAnimating) {\n this._animationDone.next();\n }\n }\n _getSelected() {\n return this._model.selection;\n }\n /** Applies the current pending selection to the global model. */\n _applyPendingSelection() {\n if (this._model !== this._globalModel) {\n this._globalModel.updateSelection(this._model.selection, this);\n }\n }\n /**\n * Assigns a new portal containing the datepicker actions.\n * @param portal Portal with the actions to be assigned.\n * @param forceRerender Whether a re-render of the portal should be triggered. This isn't\n * necessary if the portal is assigned during initialization, but it may be required if it's\n * added at a later point.\n */\n _assignActions(portal, forceRerender) {\n // If we have actions, clone the model so that we have the ability to cancel the selection,\n // otherwise update the global model directly. Note that we want to assign this as soon as\n // possible, but `_actionsPortal` isn't available in the constructor so we do it in `ngOnInit`.\n this._model = portal ? this._globalModel.clone() : this._globalModel;\n this._actionsPortal = portal;\n if (forceRerender) {\n this._changeDetectorRef.detectChanges();\n }\n }\n static {\n this.ɵfac = function MatDatepickerContent_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || MatDatepickerContent)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(MatDateSelectionModel), i0.ɵɵdirectiveInject(i1.DateAdapter), i0.ɵɵdirectiveInject(MAT_DATE_RANGE_SELECTION_STRATEGY, 8), i0.ɵɵdirectiveInject(MatDatepickerIntl));\n };\n }\n static {\n this.ɵcmp = /* @__PURE__ */i0.ɵɵdefineComponent({\n type: MatDatepickerContent,\n selectors: [[\"mat-datepicker-content\"]],\n viewQuery: function MatDatepickerContent_Query(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵviewQuery(MatCalendar, 5);\n }\n if (rf & 2) {\n let _t;\n i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx._calendar = _t.first);\n }\n },\n hostAttrs: [1, \"mat-datepicker-content\"],\n hostVars: 5,\n hostBindings: function MatDatepickerContent_HostBindings(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵsyntheticHostListener(\"@transformPanel.start\", function MatDatepickerContent_animation_transformPanel_start_HostBindingHandler($event) {\n return ctx._handleAnimationEvent($event);\n })(\"@transformPanel.done\", function MatDatepickerContent_animation_transformPanel_done_HostBindingHandler($event) {\n return ctx._handleAnimationEvent($event);\n });\n }\n if (rf & 2) {\n i0.ɵɵsyntheticHostProperty(\"@transformPanel\", ctx._animationState);\n i0.ɵɵclassMap(ctx.color ? \"mat-\" + ctx.color : \"\");\n i0.ɵɵclassProp(\"mat-datepicker-content-touch\", ctx.datepicker.touchUi);\n }\n },\n inputs: {\n color: \"color\"\n },\n exportAs: [\"matDatepickerContent\"],\n standalone: true,\n features: [i0.ɵɵStandaloneFeature],\n decls: 5,\n vars: 27,\n consts: [[\"cdkTrapFocus\", \"\", \"role\", \"dialog\", 1, \"mat-datepicker-content-container\"], [3, \"yearSelected\", \"monthSelected\", \"viewChanged\", \"_userSelection\", \"_userDragDrop\", \"id\", \"startAt\", \"startView\", \"minDate\", \"maxDate\", \"dateFilter\", \"headerComponent\", \"selected\", \"dateClass\", \"comparisonStart\", \"comparisonEnd\", \"startDateAccessibleName\", \"endDateAccessibleName\"], [3, \"cdkPortalOutlet\"], [\"type\", \"button\", \"mat-raised-button\", \"\", 1, \"mat-datepicker-close-button\", 3, \"focus\", \"blur\", \"click\", \"color\"]],\n template: function MatDatepickerContent_Template(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵelementStart(0, \"div\", 0)(1, \"mat-calendar\", 1);\n i0.ɵɵlistener(\"yearSelected\", function MatDatepickerContent_Template_mat_calendar_yearSelected_1_listener($event) {\n return ctx.datepicker._selectYear($event);\n })(\"monthSelected\", function MatDatepickerContent_Template_mat_calendar_monthSelected_1_listener($event) {\n return ctx.datepicker._selectMonth($event);\n })(\"viewChanged\", function MatDatepickerContent_Template_mat_calendar_viewChanged_1_listener($event) {\n return ctx.datepicker._viewChanged($event);\n })(\"_userSelection\", function MatDatepickerContent_Template_mat_calendar__userSelection_1_listener($event) {\n return ctx._handleUserSelection($event);\n })(\"_userDragDrop\", function MatDatepickerContent_Template_mat_calendar__userDragDrop_1_listener($event) {\n return ctx._handleUserDragDrop($event);\n });\n i0.ɵɵelementEnd();\n i0.ɵɵtemplate(2, MatDatepickerContent_ng_template_2_Template, 0, 0, \"ng-template\", 2);\n i0.ɵɵelementStart(3, \"button\", 3);\n i0.ɵɵlistener(\"focus\", function MatDatepickerContent_Template_button_focus_3_listener() {\n return ctx._closeButtonFocused = true;\n })(\"blur\", function MatDatepickerContent_Template_button_blur_3_listener() {\n return ctx._closeButtonFocused = false;\n })(\"click\", function MatDatepickerContent_Template_button_click_3_listener() {\n return ctx.datepicker.close();\n });\n i0.ɵɵtext(4);\n i0.ɵɵelementEnd()();\n }\n if (rf & 2) {\n let tmp_3_0;\n i0.ɵɵclassProp(\"mat-datepicker-content-container-with-custom-header\", ctx.datepicker.calendarHeaderComponent)(\"mat-datepicker-content-container-with-actions\", ctx._actionsPortal);\n i0.ɵɵattribute(\"aria-modal\", true)(\"aria-labelledby\", (tmp_3_0 = ctx._dialogLabelId) !== null && tmp_3_0 !== undefined ? tmp_3_0 : undefined);\n i0.ɵɵadvance();\n i0.ɵɵclassMap(ctx.datepicker.panelClass);\n i0.ɵɵproperty(\"id\", ctx.datepicker.id)(\"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\")(\"startDateAccessibleName\", ctx.startDateAccessibleName)(\"endDateAccessibleName\", ctx.endDateAccessibleName);\n i0.ɵɵadvance();\n i0.ɵɵproperty(\"cdkPortalOutlet\", ctx._actionsPortal);\n i0.ɵɵadvance();\n i0.ɵɵclassProp(\"cdk-visually-hidden\", !ctx._closeButtonFocused);\n i0.ɵɵproperty(\"color\", ctx.color || \"primary\");\n i0.ɵɵadvance();\n i0.ɵɵtextInterpolate(ctx._closeButtonText);\n }\n },\n dependencies: [CdkTrapFocus, MatCalendar, CdkPortalOutlet, MatButton],\n styles: [\".mat-datepicker-content{display:block;border-radius:4px;background-color:var(--mat-datepicker-calendar-container-background-color, var(--mat-app-surface-container-high));color:var(--mat-datepicker-calendar-container-text-color, var(--mat-app-on-surface));box-shadow:var(--mat-datepicker-calendar-container-elevation-shadow);border-radius:var(--mat-datepicker-calendar-container-shape, var(--mat-app-corner-large))}.mat-datepicker-content .mat-calendar{width:296px;height:354px}.mat-datepicker-content .mat-datepicker-content-container-with-custom-header .mat-calendar{height:auto}.mat-datepicker-content .mat-datepicker-close-button{position:absolute;top:100%;left:0;margin-top:8px}.ng-animating .mat-datepicker-content .mat-datepicker-close-button{display:none}.mat-datepicker-content-container{display:flex;flex-direction:column;justify-content:space-between}.mat-datepicker-content-touch{display:block;max-height:80vh;box-shadow:var(--mat-datepicker-calendar-container-touch-elevation-shadow);border-radius:var(--mat-datepicker-calendar-container-touch-shape, var(--mat-app-corner-extra-large));position:relative;overflow:visible}.mat-datepicker-content-touch .mat-datepicker-content-container{min-height:312px;max-height:788px;min-width:250px;max-width:750px}.mat-datepicker-content-touch .mat-calendar{width:100%;height:auto}@media all and (orientation: landscape){.mat-datepicker-content-touch .mat-datepicker-content-container{width:64vh;height:80vh}}@media all and (orientation: portrait){.mat-datepicker-content-touch .mat-datepicker-content-container{width:80vw;height:100vw}.mat-datepicker-content-touch .mat-datepicker-content-container-with-actions{height:115vw}}\"],\n encapsulation: 2,\n data: {\n animation: [matDatepickerAnimations.transformPanel, matDatepickerAnimations.fadeInCalendar]\n },\n changeDetection: 0\n });\n }\n }\n return MatDatepickerContent;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n/** Base class for a datepicker. */\nlet MatDatepickerBase = /*#__PURE__*/(() => {\n class MatDatepickerBase {\n /** The date to open the calendar to initially. */\n get startAt() {\n // If an explicit startAt is set we start there, otherwise we start at whatever the currently\n // selected value is.\n return this._startAt || (this.datepickerInput ? this.datepickerInput.getStartValue() : null);\n }\n set startAt(value) {\n this._startAt = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));\n }\n /**\n * Theme color of the datepicker's calendar. This API is supported in M2 themes only, it\n * has no effect in M3 themes.\n *\n * For information on applying color variants in M3, see\n * https://material.angular.io/guide/theming#using-component-color-variants.\n */\n get color() {\n return this._color || (this.datepickerInput ? this.datepickerInput.getThemePalette() : undefined);\n }\n set color(value) {\n this._color = value;\n }\n /** Whether the datepicker pop-up should be disabled. */\n get disabled() {\n return this._disabled === undefined && this.datepickerInput ? this.datepickerInput.disabled : !!this._disabled;\n }\n set disabled(value) {\n if (value !== this._disabled) {\n this._disabled = value;\n this.stateChanges.next(undefined);\n }\n }\n /** Classes to be passed to the date picker panel. */\n get panelClass() {\n return this._panelClass;\n }\n set panelClass(value) {\n this._panelClass = coerceStringArray(value);\n }\n /** Whether the calendar is open. */\n get opened() {\n return this._opened;\n }\n set opened(value) {\n if (value) {\n this.open();\n } else {\n this.close();\n }\n }\n /** The minimum selectable date. */\n _getMinDate() {\n return this.datepickerInput && this.datepickerInput.min;\n }\n /** The maximum selectable date. */\n _getMaxDate() {\n return this.datepickerInput && this.datepickerInput.max;\n }\n _getDateFilter() {\n return this.datepickerInput && this.datepickerInput.dateFilter;\n }\n constructor(_overlay,\n /**\n * @deprecated parameter is unused and will be removed\n * @breaking-change 19.0.0\n */\n _unusedNgZone, _viewContainerRef, scrollStrategy, _dateAdapter, _dir, _model) {\n this._overlay = _overlay;\n this._viewContainerRef = _viewContainerRef;\n this._dateAdapter = _dateAdapter;\n this._dir = _dir;\n this._model = _model;\n this._inputStateChanges = Subscription.EMPTY;\n this._document = inject(DOCUMENT);\n /** The view that the calendar should start in. */\n this.startView = 'month';\n /**\n * Whether the calendar UI is in touch mode. In touch mode the calendar opens in a dialog rather\n * than a dropdown and elements have more padding to allow for bigger touch targets.\n */\n 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 /**\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 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 this._injector = inject(Injector);\n this._changeDetectorRef = inject(ChangeDetectorRef);\n if (!this._dateAdapter && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n throw createMissingDateImplError('DateAdapter');\n }\n this._scrollStrategy = scrollStrategy;\n this._model.selectionChanged.subscribe(() => {\n this._changeDetectorRef.markForCheck();\n });\n }\n ngOnChanges(changes) {\n const positionChange = changes['xPosition'] || changes['yPosition'];\n if (positionChange && !positionChange.firstChange && this._overlayRef) {\n const positionStrategy = this._overlayRef.getConfig().positionStrategy;\n if (positionStrategy instanceof FlexibleConnectedPositionStrategy) {\n this._setConnectedPositions(positionStrategy);\n if (this.opened) {\n this._overlayRef.updatePosition();\n }\n }\n }\n this.stateChanges.next(undefined);\n }\n ngOnDestroy() {\n this._destroyOverlay();\n this.close();\n this._inputStateChanges.unsubscribe();\n this.stateChanges.complete();\n }\n /** Selects the given date */\n select(date) {\n this._model.add(date);\n }\n /** Emits the selected year in multiyear view */\n _selectYear(normalizedYear) {\n this.yearSelected.emit(normalizedYear);\n }\n /** Emits selected month in year view */\n _selectMonth(normalizedMonth) {\n this.monthSelected.emit(normalizedMonth);\n }\n /** Emits changed view */\n _viewChanged(view) {\n this.viewChanged.emit(view);\n }\n /**\n * Register an input with this datepicker.\n * @param input The datepicker input to register with this datepicker.\n * @returns Selection model that the input should hook itself up to.\n */\n registerInput(input) {\n if (this.datepickerInput && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n throw Error('A MatDatepicker can only be associated with a single input.');\n }\n this._inputStateChanges.unsubscribe();\n this.datepickerInput = input;\n this._inputStateChanges = input.stateChanges.subscribe(() => this.stateChanges.next(undefined));\n return this._model;\n }\n /**\n * Registers a portal containing action buttons with the datepicker.\n * @param portal Portal to be registered.\n */\n registerActions(portal) {\n if (this._actionsPortal && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n throw Error('A MatDatepicker can only be associated with a single actions row.');\n }\n this._actionsPortal = portal;\n this._componentRef?.instance._assignActions(portal, true);\n }\n /**\n * Removes a portal containing action buttons from the datepicker.\n * @param portal Portal to be removed.\n */\n removeActions(portal) {\n if (portal === this._actionsPortal) {\n this._actionsPortal = null;\n this._componentRef?.instance._assignActions(null, true);\n }\n }\n /** Open the calendar. */\n open() {\n // Skip reopening if there's an in-progress animation to avoid overlapping\n // sequences which can cause \"changed after checked\" errors. See #25837.\n if (this._opened || this.disabled || this._componentRef?.instance._isAnimating) {\n return;\n }\n if (!this.datepickerInput && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n throw Error('Attempted to open an MatDatepicker with no associated input.');\n }\n this._focusedElementBeforeOpen = _getFocusedElementPierceShadowDom();\n this._openOverlay();\n this._opened = true;\n this.openedStream.emit();\n }\n /** Close the calendar. */\n close() {\n // Skip reopening if there's an in-progress animation to avoid overlapping\n // sequences which can cause \"changed after checked\" errors. See #25837.\n if (!this._opened || this._componentRef?.instance._isAnimating) {\n return;\n }\n const canRestoreFocus = this.restoreFocus && this._focusedElementBeforeOpen && typeof this._focusedElementBeforeOpen.focus === 'function';\n const completeClose = () => {\n // The `_opened` could've been reset already if\n // we got two events in quick succession.\n if (this._opened) {\n this._opened = false;\n this.closedStream.emit();\n }\n };\n if (this._componentRef) {\n const {\n instance,\n location\n } = this._componentRef;\n instance._startExitAnimation();\n instance._animationDone.pipe(take(1)).subscribe(() => {\n const activeElement = this._document.activeElement;\n // Since we restore focus after the exit animation, we have to check that\n // the user didn't move focus themselves inside the `close` handler.\n if (canRestoreFocus && (!activeElement || activeElement === this._document.activeElement || location.nativeElement.contains(activeElement))) {\n this._focusedElementBeforeOpen.focus();\n }\n this._focusedElementBeforeOpen = null;\n this._destroyOverlay();\n });\n }\n if (canRestoreFocus) {\n // Because IE moves focus asynchronously, we can't count on it being restored before we've\n // marked the datepicker as closed. If the event fires out of sequence and the element that\n // we're refocusing opens the datepicker on focus, the user could be stuck with not being\n // able to close the calendar at all. We work around it by making the logic, that marks\n // the datepicker as closed, async as well.\n setTimeout(completeClose);\n } else {\n completeClose();\n }\n }\n /** Applies the current pending selection on the overlay to the model. */\n _applyPendingSelection() {\n this._componentRef?.instance?._applyPendingSelection();\n }\n /** Forwards relevant values from the datepicker to the datepicker content inside the overlay. */\n _forwardContentValues(instance) {\n instance.datepicker = this;\n instance.color = this.color;\n instance._dialogLabelId = this.datepickerInput.getOverlayLabelId();\n instance._assignActions(this._actionsPortal, false);\n }\n /** Opens the overlay with the calendar. */\n _openOverlay() {\n this._destroyOverlay();\n const isDialog = this.touchUi;\n const portal = new ComponentPortal(MatDatepickerContent, this._viewContainerRef);\n const overlayRef = this._overlayRef = this._overlay.create(new OverlayConfig({\n positionStrategy: isDialog ? this._getDialogStrategy() : this._getDropdownStrategy(),\n hasBackdrop: true,\n backdropClass: [isDialog ? 'cdk-overlay-dark-backdrop' : 'mat-overlay-transparent-backdrop', this._backdropHarnessClass],\n direction: this._dir,\n scrollStrategy: isDialog ? this._overlay.scrollStrategies.block() : this._scrollStrategy(),\n panelClass: `mat-datepicker-${isDialog ? 'dialog' : 'popup'}`\n }));\n this._getCloseStream(overlayRef).subscribe(event => {\n if (event) {\n event.preventDefault();\n }\n this.close();\n });\n // The `preventDefault` call happens inside the calendar as well, however focus moves into\n // it inside a timeout which can give browsers a chance to fire off a keyboard event in-between\n // that can scroll the page (see #24969). Always block default actions of arrow keys for the\n // entire overlay so the page doesn't get scrolled by accident.\n overlayRef.keydownEvents().subscribe(event => {\n const keyCode = event.keyCode;\n if (keyCode === UP_ARROW || keyCode === DOWN_ARROW || keyCode === LEFT_ARROW || keyCode === RIGHT_ARROW || keyCode === PAGE_UP || keyCode === PAGE_DOWN) {\n event.preventDefault();\n }\n });\n this._componentRef = overlayRef.attach(portal);\n this._forwardContentValues(this._componentRef.instance);\n // Update the position once the calendar has rendered. Only relevant in dropdown mode.\n if (!isDialog) {\n afterNextRender(() => {\n overlayRef.updatePosition();\n }, {\n injector: this._injector\n });\n }\n }\n /** Destroys the current overlay. */\n _destroyOverlay() {\n if (this._overlayRef) {\n this._overlayRef.dispose();\n this._overlayRef = this._componentRef = null;\n }\n }\n /** Gets a position strategy that will open the calendar as a dropdown. */\n _getDialogStrategy() {\n return this._overlay.position().global().centerHorizontally().centerVertically();\n }\n /** Gets a position strategy that will open the calendar as a dropdown. */\n _getDropdownStrategy() {\n const strategy = this._overlay.position().flexibleConnectedTo(this.datepickerInput.getConnectedOverlayOrigin()).withTransformOriginOn('.mat-datepicker-content').withFlexibleDimensions(false).withViewportMargin(8).withLockedPosition();\n return this._setConnectedPositions(strategy);\n }\n /** Sets the positions of the datepicker in dropdown mode based on the current configuration. */\n _setConnectedPositions(strategy) {\n const primaryX = this.xPosition === 'end' ? 'end' : 'start';\n const secondaryX = primaryX === 'start' ? 'end' : 'start';\n const primaryY = this.yPosition === 'above' ? 'bottom' : 'top';\n const secondaryY = primaryY === 'top' ? 'bottom' : 'top';\n return strategy.withPositions([{\n originX: primaryX,\n originY: secondaryY,\n overlayX: primaryX,\n overlayY: primaryY\n }, {\n originX: primaryX,\n originY: primaryY,\n overlayX: primaryX,\n overlayY: secondaryY\n }, {\n originX: secondaryX,\n originY: secondaryY,\n overlayX: secondaryX,\n overlayY: primaryY\n }, {\n originX: secondaryX,\n originY: primaryY,\n overlayX: secondaryX,\n overlayY: secondaryY\n }]);\n }\n /** Gets an observable that will emit when the overlay is supposed to be closed. */\n _getCloseStream(overlayRef) {\n const ctrlShiftMetaModifiers = ['ctrlKey', 'shiftKey', 'metaKey'];\n return merge(overlayRef.backdropClick(), overlayRef.detachments(), overlayRef.keydownEvents().pipe(filter(event => {\n // Closing on alt + up is only valid when there's an input associated with the datepicker.\n return event.keyCode === ESCAPE && !hasModifierKey(event) || this.datepickerInput && hasModifierKey(event, 'altKey') && event.keyCode === UP_ARROW && ctrlShiftMetaModifiers.every(modifier => !hasModifierKey(event, modifier));\n })));\n }\n static {\n this.ɵfac = function MatDatepickerBase_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || MatDatepickerBase)(i0.ɵɵdirectiveInject(i4.Overlay), i0.ɵɵdirectiveInject(i0.NgZone), i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject(MAT_DATEPICKER_SCROLL_STRATEGY), i0.ɵɵdirectiveInject(i1.DateAdapter, 8), i0.ɵɵdirectiveInject(i2.Directionality, 8), i0.ɵɵdirectiveInject(MatDateSelectionModel));\n };\n }\n static {\n this.ɵdir = /* @__PURE__ */i0.ɵɵdefineDirective({\n type: MatDatepickerBase,\n inputs: {\n calendarHeaderComponent: \"calendarHeaderComponent\",\n startAt: \"startAt\",\n startView: \"startView\",\n color: \"color\",\n touchUi: [2, \"touchUi\", \"touchUi\", booleanAttribute],\n disabled: [2, \"disabled\", \"disabled\", booleanAttribute],\n xPosition: \"xPosition\",\n yPosition: \"yPosition\",\n restoreFocus: [2, \"restoreFocus\", \"restoreFocus\", booleanAttribute],\n dateClass: \"dateClass\",\n panelClass: \"panelClass\",\n opened: [2, \"opened\", \"opened\", booleanAttribute]\n },\n outputs: {\n yearSelected: \"yearSelected\",\n monthSelected: \"monthSelected\",\n viewChanged: \"viewChanged\",\n openedStream: \"opened\",\n closedStream: \"closed\"\n },\n features: [i0.ɵɵInputTransformsFeature, i0.ɵɵNgOnChangesFeature]\n });\n }\n }\n return MatDatepickerBase;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\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. */\nlet MatDatepicker = /*#__PURE__*/(() => {\n class MatDatepicker extends MatDatepickerBase {\n static {\n this.ɵfac = /* @__PURE__ */(() => {\n let ɵMatDatepicker_BaseFactory;\n return function MatDatepicker_Factory(__ngFactoryType__) {\n return (ɵMatDatepicker_BaseFactory || (ɵMatDatepicker_BaseFactory = i0.ɵɵgetInheritedFactory(MatDatepicker)))(__ngFactoryType__ || MatDatepicker);\n };\n })();\n }\n static {\n this.ɵcmp = /* @__PURE__ */i0.ɵɵdefineComponent({\n type: MatDatepicker,\n selectors: [[\"mat-datepicker\"]],\n exportAs: [\"matDatepicker\"],\n standalone: true,\n features: [i0.ɵɵProvidersFeature([MAT_SINGLE_DATE_SELECTION_MODEL_PROVIDER, {\n provide: MatDatepickerBase,\n useExisting: MatDatepicker\n }]), i0.ɵɵInheritDefinitionFeature, i0.ɵɵStandaloneFeature],\n decls: 0,\n vars: 0,\n template: function MatDatepicker_Template(rf, ctx) {},\n encapsulation: 2,\n changeDetection: 0\n });\n }\n }\n return MatDatepicker;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\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( /** Reference to the datepicker input component that emitted the event. */\n target, /** 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. */\nlet MatDatepickerInputBase = /*#__PURE__*/(() => {\n class MatDatepickerInputBase {\n /** The value of the input. */\n get value() {\n return this._model ? this._getValueFromModel(this._model.selection) : this._pendingValue;\n }\n set value(value) {\n this._assignValueProgrammatically(value);\n }\n /** Whether the datepicker-input is disabled. */\n get disabled() {\n return !!this._disabled || this._parentDisabled();\n }\n set disabled(value) {\n const newValue = value;\n const element = this._elementRef.nativeElement;\n if (this._disabled !== newValue) {\n this._disabled = newValue;\n this.stateChanges.next(undefined);\n }\n // We need to null check the `blur` method, because it's undefined during SSR.\n // In Ivy static bindings are invoked earlier, before the element is attached to the DOM.\n // This can cause an error to be thrown in some browsers (IE/Edge) which assert that the\n // element has been inserted.\n if (newValue && this._isInitialized && element.blur) {\n // Normally, native input elements automatically blur if they turn disabled. This behavior\n // is problematic, because it would mean that it triggers another change detection cycle,\n // which then causes a changed after checked error if the input element was focused before.\n element.blur();\n }\n }\n /** Gets the base validator functions. */\n _getValidators() {\n return [this._parseValidator, this._minValidator, this._maxValidator, this._filterValidator];\n }\n /** Registers a date selection model with the input. */\n _registerModel(model) {\n this._model = model;\n this._valueChangesSubscription.unsubscribe();\n if (this._pendingValue) {\n this._assignValue(this._pendingValue);\n }\n this._valueChangesSubscription = this._model.selectionChanged.subscribe(event => {\n if (this._shouldHandleChangeEvent(event)) {\n const value = this._getValueFromModel(event.selection);\n this._lastValueValid = this._isValidValue(value);\n this._cvaOnChange(value);\n this._onTouched();\n this._formatValue(value);\n this.dateInput.emit(new MatDatepickerInputEvent(this, this._elementRef.nativeElement));\n this.dateChange.emit(new MatDatepickerInputEvent(this, this._elementRef.nativeElement));\n }\n });\n }\n constructor(_elementRef, _dateAdapter, _dateFormats) {\n this._elementRef = _elementRef;\n this._dateAdapter = _dateAdapter;\n this._dateFormats = _dateFormats;\n /** Emits when a `change` event is fired on this ``. */\n this.dateChange = new EventEmitter();\n /** Emits when an `input` event is fired on this ``. */\n this.dateInput = new EventEmitter();\n /** Emits when the internal state has changed */\n this.stateChanges = new Subject();\n this._onTouched = () => {};\n this._validatorOnChange = () => {};\n this._cvaOnChange = () => {};\n this._valueChangesSubscription = Subscription.EMPTY;\n this._localeSubscription = Subscription.EMPTY;\n /** The form control validator for whether the input parses. */\n this._parseValidator = () => {\n return this._lastValueValid ? null : {\n 'matDatepickerParse': {\n 'text': this._elementRef.nativeElement.value\n }\n };\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) ? null : {\n 'matDatepickerFilter': true\n };\n };\n /** The form control validator for the min date. */\n this._minValidator = control => {\n const controlValue = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(control.value));\n const min = this._getMinDate();\n return !min || !controlValue || this._dateAdapter.compareDate(min, controlValue) <= 0 ? null : {\n 'matDatepickerMin': {\n 'min': min,\n 'actual': controlValue\n }\n };\n };\n /** The form control validator for the max date. */\n this._maxValidator = control => {\n const controlValue = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(control.value));\n const max = this._getMaxDate();\n return !max || !controlValue || this._dateAdapter.compareDate(max, controlValue) >= 0 ? null : {\n 'matDatepickerMax': {\n 'max': max,\n 'actual': controlValue\n }\n };\n };\n /** Whether the last value set on the input was valid. */\n this._lastValueValid = false;\n if (typeof ngDevMode === 'undefined' || ngDevMode) {\n if (!this._dateAdapter) {\n throw createMissingDateImplError('DateAdapter');\n }\n if (!this._dateFormats) {\n throw createMissingDateImplError('MAT_DATE_FORMATS');\n }\n }\n // Update the displayed date when the locale changes.\n this._localeSubscription = _dateAdapter.localeChanges.subscribe(() => {\n this._assignValueProgrammatically(this.value);\n });\n }\n ngAfterViewInit() {\n this._isInitialized = true;\n }\n ngOnChanges(changes) {\n if (dateInputsHaveChanged(changes, this._dateAdapter)) {\n this.stateChanges.next(undefined);\n }\n }\n ngOnDestroy() {\n this._valueChangesSubscription.unsubscribe();\n this._localeSubscription.unsubscribe();\n this.stateChanges.complete();\n }\n /** @docs-private */\n registerOnValidatorChange(fn) {\n this._validatorOnChange = fn;\n }\n /** @docs-private */\n validate(c) {\n return this._validator ? this._validator(c) : null;\n }\n // Implemented as part of ControlValueAccessor.\n writeValue(value) {\n this._assignValueProgrammatically(value);\n }\n // Implemented as part of ControlValueAccessor.\n registerOnChange(fn) {\n this._cvaOnChange = fn;\n }\n // Implemented as part of ControlValueAccessor.\n registerOnTouched(fn) {\n this._onTouched = fn;\n }\n // Implemented as part of ControlValueAccessor.\n setDisabledState(isDisabled) {\n this.disabled = isDisabled;\n }\n _onKeydown(event) {\n const ctrlShiftMetaModifiers = ['ctrlKey', 'shiftKey', 'metaKey'];\n const isAltDownArrow = hasModifierKey(event, 'altKey') && event.keyCode === DOWN_ARROW && ctrlShiftMetaModifiers.every(modifier => !hasModifierKey(event, modifier));\n if (isAltDownArrow && !this._elementRef.nativeElement.readOnly) {\n this._openPopup();\n event.preventDefault();\n }\n }\n _onInput(value) {\n const lastValueWasValid = this._lastValueValid;\n let date = this._dateAdapter.parse(value, this._dateFormats.parse.dateInput);\n this._lastValueValid = this._isValidValue(date);\n date = this._dateAdapter.getValidDateOrNull(date);\n const hasChanged = !this._dateAdapter.sameDate(date, this.value);\n // We need to fire the CVA change event for all\n // nulls, otherwise the validators won't run.\n if (!date || hasChanged) {\n this._cvaOnChange(date);\n } else {\n // Call the CVA change handler for invalid values\n // since this is what marks the control as dirty.\n if (value && !this.value) {\n this._cvaOnChange(date);\n }\n if (lastValueWasValid !== this._lastValueValid) {\n this._validatorOnChange();\n }\n }\n if (hasChanged) {\n this._assignValue(date);\n this.dateInput.emit(new MatDatepickerInputEvent(this, this._elementRef.nativeElement));\n }\n }\n _onChange() {\n this.dateChange.emit(new MatDatepickerInputEvent(this, this._elementRef.nativeElement));\n }\n /** Handles blur events on the input. */\n _onBlur() {\n // Reformat the input only if we have a valid value.\n if (this.value) {\n this._formatValue(this.value);\n }\n this._onTouched();\n }\n /** Formats a value and sets it on the input element. */\n _formatValue(value) {\n this._elementRef.nativeElement.value = value != null ? this._dateAdapter.format(value, this._dateFormats.display.dateInput) : '';\n }\n /** Assigns a value to the model. */\n _assignValue(value) {\n // We may get some incoming values before the model was\n // assigned. Save the value so that we can assign it later.\n if (this._model) {\n this._assignValueToModel(value);\n this._pendingValue = null;\n } 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 static {\n this.ɵfac = function MatDatepickerInputBase_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || MatDatepickerInputBase)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i1.DateAdapter, 8), i0.ɵɵdirectiveInject(MAT_DATE_FORMATS, 8));\n };\n }\n static {\n this.ɵdir = /* @__PURE__ */i0.ɵɵdefineDirective({\n type: MatDatepickerInputBase,\n inputs: {\n value: \"value\",\n disabled: [2, \"disabled\", \"disabled\", booleanAttribute]\n },\n outputs: {\n dateChange: \"dateChange\",\n dateInput: \"dateInput\"\n },\n standalone: true,\n features: [i0.ɵɵInputTransformsFeature, i0.ɵɵNgOnChangesFeature]\n });\n }\n }\n return MatDatepickerInputBase;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\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 {\n previousValue,\n currentValue\n } = changes[key];\n if (adapter.isDateInstance(previousValue) && adapter.isDateInstance(currentValue)) {\n if (!adapter.sameDate(previousValue, currentValue)) {\n return true;\n }\n } else {\n return true;\n }\n }\n return false;\n}\n\n/** @docs-private */\nconst MAT_DATEPICKER_VALUE_ACCESSOR = {\n provide: NG_VALUE_ACCESSOR,\n useExisting: /*#__PURE__*/forwardRef(() => MatDatepickerInput),\n multi: true\n};\n/** @docs-private */\nconst MAT_DATEPICKER_VALIDATORS = {\n provide: NG_VALIDATORS,\n useExisting: /*#__PURE__*/forwardRef(() => MatDatepickerInput),\n multi: true\n};\n/** Directive used to connect an input to a MatDatepicker. */\nlet MatDatepickerInput = /*#__PURE__*/(() => {\n class MatDatepickerInput extends MatDatepickerInputBase {\n /** The datepicker that this input is associated with. */\n set matDatepicker(datepicker) {\n if (datepicker) {\n this._datepicker = datepicker;\n this._ariaOwns.set(datepicker.opened ? datepicker.id : null);\n this._closedSubscription = datepicker.closedStream.subscribe(() => {\n this._onTouched();\n this._ariaOwns.set(null);\n });\n this._openedSubscription = datepicker.openedStream.subscribe(() => {\n this._ariaOwns.set(datepicker.id);\n });\n this._registerModel(datepicker.registerInput(this));\n }\n }\n /** The minimum valid date. */\n get min() {\n return this._min;\n }\n set min(value) {\n const validValue = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));\n if (!this._dateAdapter.sameDate(validValue, this._min)) {\n this._min = validValue;\n this._validatorOnChange();\n }\n }\n /** The maximum valid date. */\n get max() {\n return this._max;\n }\n set max(value) {\n const validValue = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));\n if (!this._dateAdapter.sameDate(validValue, this._max)) {\n this._max = validValue;\n this._validatorOnChange();\n }\n }\n /** Function that can be used to filter out dates within the datepicker. */\n get dateFilter() {\n return this._dateFilter;\n }\n set dateFilter(value) {\n const wasMatchingValue = this._matchesFilter(this.value);\n this._dateFilter = value;\n if (this._matchesFilter(this.value) !== wasMatchingValue) {\n this._validatorOnChange();\n }\n }\n constructor(elementRef, dateAdapter, dateFormats, _formField) {\n super(elementRef, dateAdapter, dateFormats);\n this._formField = _formField;\n this._closedSubscription = Subscription.EMPTY;\n this._openedSubscription = Subscription.EMPTY;\n /** The id of the panel owned by this input. */\n this._ariaOwns = signal(null);\n this._validator = Validators.compose(super._getValidators());\n }\n /**\n * Gets the element that the datepicker popup should be connected to.\n * @return The element to connect the popup to.\n */\n getConnectedOverlayOrigin() {\n return this._formField ? this._formField.getConnectedOverlayOrigin() : this._elementRef;\n }\n /** Gets the ID of an element that should be used a description for the calendar overlay. */\n getOverlayLabelId() {\n if (this._formField) {\n return this._formField.getLabelId();\n }\n return this._elementRef.nativeElement.getAttribute('aria-labelledby');\n }\n /** Returns the palette used by the input's form field, if any. */\n getThemePalette() {\n return this._formField ? this._formField.color : undefined;\n }\n /** Gets the value at which the calendar should start. */\n getStartValue() {\n return this.value;\n }\n ngOnDestroy() {\n super.ngOnDestroy();\n this._closedSubscription.unsubscribe();\n this._openedSubscription.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 static {\n this.ɵfac = function MatDatepickerInput_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || MatDatepickerInput)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i1.DateAdapter, 8), i0.ɵɵdirectiveInject(MAT_DATE_FORMATS, 8), i0.ɵɵdirectiveInject(MAT_FORM_FIELD, 8));\n };\n }\n static {\n this.ɵdir = /* @__PURE__ */i0.ɵɵdefineDirective({\n type: MatDatepickerInput,\n selectors: [[\"input\", \"matDatepicker\", \"\"]],\n hostAttrs: [1, \"mat-datepicker-input\"],\n hostVars: 6,\n hostBindings: function MatDatepickerInput_HostBindings(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵlistener(\"input\", function MatDatepickerInput_input_HostBindingHandler($event) {\n return ctx._onInput($event.target.value);\n })(\"change\", function MatDatepickerInput_change_HostBindingHandler() {\n return ctx._onChange();\n })(\"blur\", function MatDatepickerInput_blur_HostBindingHandler() {\n return ctx._onBlur();\n })(\"keydown\", function MatDatepickerInput_keydown_HostBindingHandler($event) {\n return ctx._onKeydown($event);\n });\n }\n if (rf & 2) {\n i0.ɵɵhostProperty(\"disabled\", ctx.disabled);\n i0.ɵɵattribute(\"aria-haspopup\", ctx._datepicker ? \"dialog\" : null)(\"aria-owns\", ctx._ariaOwns())(\"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 }\n },\n inputs: {\n matDatepicker: \"matDatepicker\",\n min: \"min\",\n max: \"max\",\n dateFilter: [0, \"matDatepickerFilter\", \"dateFilter\"]\n },\n exportAs: [\"matDatepickerInput\"],\n standalone: true,\n features: [i0.ɵɵProvidersFeature([MAT_DATEPICKER_VALUE_ACCESSOR, MAT_DATEPICKER_VALIDATORS, {\n provide: MAT_INPUT_VALUE_ACCESSOR,\n useExisting: MatDatepickerInput\n }]), i0.ɵɵInheritDefinitionFeature]\n });\n }\n }\n return MatDatepickerInput;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n\n/** Can be used to override the icon of a `matDatepickerToggle`. */\nlet MatDatepickerToggleIcon = /*#__PURE__*/(() => {\n class MatDatepickerToggleIcon {\n static {\n this.ɵfac = function MatDatepickerToggleIcon_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || MatDatepickerToggleIcon)();\n };\n }\n static {\n this.ɵdir = /* @__PURE__ */i0.ɵɵdefineDirective({\n type: MatDatepickerToggleIcon,\n selectors: [[\"\", \"matDatepickerToggleIcon\", \"\"]],\n standalone: true\n });\n }\n }\n return MatDatepickerToggleIcon;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\nlet MatDatepickerToggle = /*#__PURE__*/(() => {\n class MatDatepickerToggle {\n /** Whether the toggle button is disabled. */\n get disabled() {\n if (this._disabled === undefined && this.datepicker) {\n return this.datepicker.disabled;\n }\n return !!this._disabled;\n }\n set disabled(value) {\n this._disabled = value;\n }\n constructor(_intl, _changeDetectorRef, defaultTabIndex) {\n this._intl = _intl;\n this._changeDetectorRef = _changeDetectorRef;\n this._stateChanges = Subscription.EMPTY;\n const parsedTabIndex = Number(defaultTabIndex);\n this.tabIndex = parsedTabIndex || parsedTabIndex === 0 ? parsedTabIndex : null;\n }\n ngOnChanges(changes) {\n if (changes['datepicker']) {\n this._watchStateChanges();\n }\n }\n ngOnDestroy() {\n this._stateChanges.unsubscribe();\n }\n ngAfterContentInit() {\n this._watchStateChanges();\n }\n _open(event) {\n if (this.datepicker && !this.disabled) {\n this.datepicker.open();\n event.stopPropagation();\n }\n }\n _watchStateChanges() {\n const datepickerStateChanged = this.datepicker ? this.datepicker.stateChanges : of();\n const inputStateChanged = this.datepicker && this.datepicker.datepickerInput ? this.datepicker.datepickerInput.stateChanges : of();\n const datepickerToggled = this.datepicker ? merge(this.datepicker.openedStream, this.datepicker.closedStream) : of();\n this._stateChanges.unsubscribe();\n this._stateChanges = merge(this._intl.changes, datepickerStateChanged, inputStateChanged, datepickerToggled).subscribe(() => this._changeDetectorRef.markForCheck());\n }\n static {\n this.ɵfac = function MatDatepickerToggle_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || MatDatepickerToggle)(i0.ɵɵdirectiveInject(MatDatepickerIntl), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵinjectAttribute('tabindex'));\n };\n }\n static {\n this.ɵcmp = /* @__PURE__ */i0.ɵɵdefineComponent({\n type: MatDatepickerToggle,\n selectors: [[\"mat-datepicker-toggle\"]],\n contentQueries: function MatDatepickerToggle_ContentQueries(rf, ctx, dirIndex) {\n if (rf & 1) {\n i0.ɵɵcontentQuery(dirIndex, MatDatepickerToggleIcon, 5);\n }\n if (rf & 2) {\n let _t;\n i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx._customIcon = _t.first);\n }\n },\n viewQuery: function MatDatepickerToggle_Query(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵviewQuery(_c2, 5);\n }\n if (rf & 2) {\n let _t;\n i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx._button = _t.first);\n }\n },\n hostAttrs: [1, \"mat-datepicker-toggle\"],\n hostVars: 8,\n hostBindings: function MatDatepickerToggle_HostBindings(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵlistener(\"click\", function MatDatepickerToggle_click_HostBindingHandler($event) {\n return ctx._open($event);\n });\n }\n if (rf & 2) {\n i0.ɵɵattribute(\"tabindex\", null)(\"data-mat-calendar\", ctx.datepicker ? ctx.datepicker.id : null);\n i0.ɵɵ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 }\n },\n inputs: {\n datepicker: [0, \"for\", \"datepicker\"],\n tabIndex: \"tabIndex\",\n ariaLabel: [0, \"aria-label\", \"ariaLabel\"],\n disabled: [2, \"disabled\", \"disabled\", booleanAttribute],\n disableRipple: \"disableRipple\"\n },\n exportAs: [\"matDatepickerToggle\"],\n standalone: true,\n features: [i0.ɵɵInputTransformsFeature, i0.ɵɵNgOnChangesFeature, i0.ɵɵStandaloneFeature],\n ngContentSelectors: _c4,\n decls: 4,\n vars: 6,\n consts: [[\"button\", \"\"], [\"mat-icon-button\", \"\", \"type\", \"button\", 3, \"disabled\", \"disableRipple\"], [\"viewBox\", \"0 0 24 24\", \"width\", \"24px\", \"height\", \"24px\", \"fill\", \"currentColor\", \"focusable\", \"false\", \"aria-hidden\", \"true\", 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\"]],\n template: function MatDatepickerToggle_Template(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵprojectionDef(_c3);\n i0.ɵɵelementStart(0, \"button\", 1, 0);\n i0.ɵɵtemplate(2, MatDatepickerToggle_Conditional_2_Template, 2, 0, \":svg:svg\", 2);\n i0.ɵɵprojection(3);\n i0.ɵɵelementEnd();\n }\n if (rf & 2) {\n i0.ɵɵproperty(\"disabled\", ctx.disabled)(\"disableRipple\", ctx.disableRipple);\n i0.ɵɵattribute(\"aria-haspopup\", ctx.datepicker ? \"dialog\" : null)(\"aria-label\", ctx.ariaLabel || ctx._intl.openCalendarLabel)(\"tabindex\", ctx.disabled ? -1 : ctx.tabIndex);\n i0.ɵɵadvance(2);\n i0.ɵɵconditional(!ctx._customIcon ? 2 : -1);\n }\n },\n dependencies: [MatIconButton],\n styles: [\".mat-datepicker-toggle{pointer-events:auto;color:var(--mat-datepicker-toggle-icon-color, var(--mat-app-on-surface-variant))}.mat-datepicker-toggle-active{color:var(--mat-datepicker-toggle-active-state-icon-color, var(--mat-app-on-surface-variant))}.cdk-high-contrast-active .mat-datepicker-toggle-default-icon{color:CanvasText}\"],\n encapsulation: 2,\n changeDetection: 0\n });\n }\n }\n return MatDatepickerToggle;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n\n// This file contains the `_computeAriaAccessibleName` function, which computes what the *expected*\n// ARIA accessible name would be for a given element. Implements a subset of ARIA specification\n// [Accessible Name and Description Computation 1.2](https://www.w3.org/TR/accname-1.2/).\n//\n// Specification accname-1.2 can be summarized by returning the result of the first method\n// available.\n//\n// 1. `aria-labelledby` attribute\n// ```\n// \n// \n// \n// ```\n// 2. `aria-label` attribute (e.g. ``)\n// 3. Label with `for`/`id`\n// ```\n// \n// \n// \n// ```\n// 4. `placeholder` attribute (e.g. ``)\n// 5. `title` attribute (e.g. ``)\n// 6. text content\n// ```\n// \n// \n// \n// ```\n/**\n * Computes the *expected* ARIA accessible name for argument element based on [accname-1.2\n * specification](https://www.w3.org/TR/accname-1.2/). Implements a subset of accname-1.2,\n * and should only be used for the Datepicker's specific use case.\n *\n * Intended use:\n * This is not a general use implementation. Only implements the parts of accname-1.2 that are\n * required for the Datepicker's specific use case. This function is not intended for any other\n * use.\n *\n * Limitations:\n * - Only covers the needs of `matStartDate` and `matEndDate`. Does not support other use cases.\n * - See NOTES's in implementation for specific details on what parts of the accname-1.2\n * specification are not implemented.\n *\n * @param element {HTMLInputElement} native <input/> element of `matStartDate` or\n * `matEndDate` component. Corresponds to the 'Root Element' from accname-1.2\n *\n * @return expected ARIA accessible name of argument <input/>\n */\nfunction _computeAriaAccessibleName(element) {\n return _computeAriaAccessibleNameInternal(element, true);\n}\n/**\n * Determine if argument node is an Element based on `nodeType` property. This function is safe to\n * use with server-side rendering.\n */\nfunction ssrSafeIsElement(node) {\n return node.nodeType === Node.ELEMENT_NODE;\n}\n/**\n * Determine if argument node is an HTMLInputElement based on `nodeName` property. This funciton is\n * safe to use with server-side rendering.\n */\nfunction ssrSafeIsHTMLInputElement(node) {\n return node.nodeName === 'INPUT';\n}\n/**\n * Determine if argument node is an HTMLTextAreaElement based on `nodeName` property. This\n * funciton is safe to use with server-side rendering.\n */\nfunction ssrSafeIsHTMLTextAreaElement(node) {\n return node.nodeName === 'TEXTAREA';\n}\n/**\n * Calculate the expected ARIA accessible name for given DOM Node. Given DOM Node may be either the\n * \"Root node\" passed to `_computeAriaAccessibleName` or \"Current node\" as result of recursion.\n *\n * @return the accessible name of argument DOM Node\n *\n * @param currentNode node to determine accessible name of\n * @param isDirectlyReferenced true if `currentNode` is the root node to calculate ARIA accessible\n * name of. False if it is a result of recursion.\n */\nfunction _computeAriaAccessibleNameInternal(currentNode, isDirectlyReferenced) {\n // NOTE: this differs from accname-1.2 specification.\n // - Does not implement Step 1. of accname-1.2: '''If `currentNode`'s role prohibits naming,\n // return the empty string (\"\")'''.\n // - Does not implement Step 2.A. of accname-1.2: '''if current node is hidden and not directly\n // referenced by aria-labelledby... return the empty string.'''\n // acc-name-1.2 Step 2.B.: aria-labelledby\n if (ssrSafeIsElement(currentNode) && isDirectlyReferenced) {\n const labelledbyIds = currentNode.getAttribute?.('aria-labelledby')?.split(/\\s+/g) || [];\n const validIdRefs = labelledbyIds.reduce((validIds, id) => {\n const elem = document.getElementById(id);\n if (elem) {\n validIds.push(elem);\n }\n return validIds;\n }, []);\n if (validIdRefs.length) {\n return validIdRefs.map(idRef => {\n return _computeAriaAccessibleNameInternal(idRef, false);\n }).join(' ');\n }\n }\n // acc-name-1.2 Step 2.C.: aria-label\n if (ssrSafeIsElement(currentNode)) {\n const ariaLabel = currentNode.getAttribute('aria-label')?.trim();\n if (ariaLabel) {\n return ariaLabel;\n }\n }\n // acc-name-1.2 Step 2.D. attribute or element that defines a text alternative\n //\n // NOTE: this differs from accname-1.2 specification.\n // Only implements Step 2.D. for `