{"version":3,"sources":["src/app/shared/ui/notification/notification.module.ts","src/app/shared/form/extensions/form-field.extension.ts","src/app/shared/form/helpers/form.helper.ts","node_modules/@angular/material/fesm2022/form-field.mjs","node_modules/@angular/material/fesm2022/autocomplete.mjs","src/app/shared/ui/text-content/text-content.component.ts","src/app/shared/ui/text-content/text-content.component.html","src/app/shared/ui/text-content/text-content.module.ts","src/app/shared/form/ui/error/error.component.ts","src/app/shared/form/ui/error/error.component.html","src/app/shared/form/ui/error/error.module.ts","src/app/shared/form/ui/input/input.component.ts","src/app/shared/form/ui/input/input.component.html","src/app/shared/form/ui/input/input.module.ts","src/app/shared/form/ui/autocomplete/autocomplete.component.ts","src/app/shared/form/ui/autocomplete/autocomplete.component.html","src/app/shared/form/ui/autocomplete/autocomplete.module.ts","src/app/shared/form/ui/checkbox/checkbox.component.ts","src/app/shared/form/ui/checkbox/checkbox.component.html","src/app/shared/form/ui/checkbox/checkbox.module.ts","src/app/shared/ui/toast/toast.component.ts","src/app/shared/ui/toast/toast.component.html","src/app/shared/ui/toast/toast.module.ts","src/app/shared/ui/file-uploader/file-uploader.component.ts","src/app/shared/ui/file-uploader/file-uploader.component.html","src/app/shared/ui/file-uploader/file-uploader.module.ts","src/app/shared/form/ui/checkbox-group/checkbox-group.component.ts","src/app/shared/form/ui/checkbox-group/checkbox-group.component.html","src/app/shared/form/ui/checkbox-group/checkbox-group.module.ts","src/app/shared/form/ui/radio-group/radio-group.component.ts","src/app/shared/form/ui/radio-group/radio-group.component.html","src/app/shared/form/ui/radio/radio.component.ts","src/app/shared/form/ui/radio/radio.component.html","src/app/shared/form/ui/radio/radio.module.ts","src/app/shared/form/ui/radio-group/radio-group.module.ts","src/app/shared/form/ui/select/select.component.ts","src/app/shared/form/ui/select/select.component.html","src/app/shared/form/ui/select/select.module.ts","src/app/shared/form/ui/textarea/textarea.component.ts","src/app/shared/form/ui/textarea/textarea.component.html","src/app/shared/form/ui/textarea/textarea.module.ts","src/app/shared/form/ui/toggle/toggle.component.ts","src/app/shared/form/ui/toggle/toggle.component.html","src/app/shared/form/ui/toggle/toggle.module.ts","src/app/shared/form/ui/form-field/form-field.module.ts","src/app/shared/directives/click-outside.directive.ts","src/app/shared/directives/directives.module.ts","src/app/shared/form/ui/multi-select/multi-select.component.ts","src/app/shared/form/ui/multi-select/multi-select.component.html","src/app/shared/form/ui/multi-select/multi-select.module.ts","src/app/shared/form/ui/form.module.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\nimport { IconModule } from '@lis-ui/icon';\nimport { NotificationComponent } from './notification.component';\n\n@NgModule({\n declarations: [NotificationComponent],\n imports: [CommonModule, IconModule],\n exports: [NotificationComponent],\n})\nexport class NotificationModule {}\n","import { Component, Input } from '@angular/core';\nimport { AbstractControl, ValidationErrors } from '@angular/forms';\n\n@Component({\n template: '',\n})\nexport abstract class LisFormFieldExtComponent {\n @Input() control?: AbstractControl;\n @Input() htmlId?: string;\n\n constructor() {}\n\n protected isTouched(): boolean {\n return !!this.control?.touched;\n }\n\n protected getErrors(): ValidationErrors | undefined {\n if (this.control?.errors) {\n return this.control.errors;\n }\n\n return undefined;\n }\n\n protected shouldShowErrors(): boolean {\n return this.isTouched() && !!this.getErrors() && !this.control?.disabled;\n }\n}\n","export function scrollToError(formContainer: HTMLElement): void {\n const errorElement = formContainer.querySelector('.form-error');\n if (errorElement) {\n errorElement.scrollIntoView({\n behavior: 'smooth',\n block: 'center',\n });\n }\n}\n\nexport function getFloatAsFormattedString(value: number | string): string {\n const strVal: string = typeof value === 'string' ? value : value.toString();\n if (isNaN(parseFloat(strVal))) {\n return '';\n }\n return strVal.replace('.', ',');\n}\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 i0 from '@angular/core';\nimport { InjectionToken, EventEmitter, booleanAttribute, TemplateRef, Component, ViewEncapsulation, ChangeDetectionStrategy, Inject, ViewChild, ContentChildren, Input, Output, Directive, forwardRef, inject, Injector, afterNextRender, Optional, Host, NgModule } from '@angular/core';\nimport { MAT_OPTION_PARENT_COMPONENT, MatOption, MAT_OPTGROUP, MatOptionSelectionChange, _countGroupLabelsBeforeOption, _getOptionScrollPosition, MatOptionModule, MatCommonModule } from '@angular/material/core';\nconst _c0 = [\"panel\"];\nconst _c1 = [\"*\"];\nfunction MatAutocomplete_ng_template_0_Template(rf, ctx) {\n if (rf & 1) {\n const _r1 = i0.ɵɵgetCurrentView();\n i0.ɵɵelementStart(0, \"div\", 1, 0);\n i0.ɵɵlistener(\"@panelAnimation.done\", function MatAutocomplete_ng_template_0_Template_div_animation_panelAnimation_done_0_listener($event) {\n i0.ɵɵrestoreView(_r1);\n const ctx_r1 = i0.ɵɵnextContext();\n return i0.ɵɵresetView(ctx_r1._animationDone.next($event));\n });\n i0.ɵɵprojection(2);\n i0.ɵɵelementEnd();\n }\n if (rf & 2) {\n const formFieldId_r3 = ctx.id;\n const ctx_r1 = i0.ɵɵnextContext();\n i0.ɵɵclassMap(ctx_r1._classList);\n i0.ɵɵclassProp(\"mat-mdc-autocomplete-visible\", ctx_r1.showPanel)(\"mat-mdc-autocomplete-hidden\", !ctx_r1.showPanel)(\"mat-primary\", ctx_r1._color === \"primary\")(\"mat-accent\", ctx_r1._color === \"accent\")(\"mat-warn\", ctx_r1._color === \"warn\");\n i0.ɵɵproperty(\"id\", ctx_r1.id)(\"@panelAnimation\", ctx_r1.isOpen ? \"visible\" : \"hidden\");\n i0.ɵɵattribute(\"aria-label\", ctx_r1.ariaLabel || null)(\"aria-labelledby\", ctx_r1._getPanelAriaLabelledby(formFieldId_r3));\n }\n}\nexport { MatOptgroup, MatOption } from '@angular/material/core';\nimport { DOCUMENT, CommonModule } from '@angular/common';\nimport * as i3 from '@angular/cdk/scrolling';\nimport { CdkScrollableModule } from '@angular/cdk/scrolling';\nimport * as i1$1 from '@angular/cdk/overlay';\nimport { Overlay, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';\nimport { ActiveDescendantKeyManager, removeAriaReferencedId, addAriaReferencedId } from '@angular/cdk/a11y';\nimport * as i1 from '@angular/cdk/platform';\nimport { _getEventTarget } from '@angular/cdk/platform';\nimport { trigger, state, style, transition, group, animate } from '@angular/animations';\nimport { Subscription, Subject, defer, merge, of, fromEvent, Observable } from 'rxjs';\nimport { ESCAPE, hasModifierKey, UP_ARROW, ENTER, DOWN_ARROW, TAB } from '@angular/cdk/keycodes';\nimport { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';\nimport { TemplatePortal } from '@angular/cdk/portal';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\nimport * as i4 from '@angular/material/form-field';\nimport { MAT_FORM_FIELD } from '@angular/material/form-field';\nimport { startWith, switchMap, filter, map, tap, delay, take } from 'rxjs/operators';\nimport * as i2 from '@angular/cdk/bidi';\n\n// Animation values come from\n// TODO(mmalerba): Ideally find a way to import the values from MDC's code.\nconst panelAnimation = /*#__PURE__*/trigger('panelAnimation', [/*#__PURE__*/state('void, hidden', /*#__PURE__*/style({\n opacity: 0,\n transform: 'scaleY(0.8)'\n})), /*#__PURE__*/transition(':enter, hidden => visible', [/*#__PURE__*/group([/*#__PURE__*/animate('0.03s linear', /*#__PURE__*/style({\n opacity: 1\n})), /*#__PURE__*/animate('0.12s cubic-bezier(0, 0, 0.2, 1)', /*#__PURE__*/style({\n transform: 'scaleY(1)'\n}))])]), /*#__PURE__*/transition(':leave, visible => hidden', [/*#__PURE__*/animate('0.075s linear', /*#__PURE__*/style({\n opacity: 0\n}))])]);\n\n/**\n * Autocomplete IDs need to be unique across components, so this counter exists outside of\n * the component definition.\n */\nlet _uniqueAutocompleteIdCounter = 0;\n/** Event object that is emitted when an autocomplete option is selected. */\nclass MatAutocompleteSelectedEvent {\n constructor(/** Reference to the autocomplete panel that emitted the event. */\n source, /** Option that was selected. */\n option) {\n this.source = source;\n this.option = option;\n }\n}\n/** Injection token to be used to override the default options for `mat-autocomplete`. */\nconst MAT_AUTOCOMPLETE_DEFAULT_OPTIONS = /*#__PURE__*/new InjectionToken('mat-autocomplete-default-options', {\n providedIn: 'root',\n factory: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS_FACTORY\n});\n/** @docs-private */\nfunction MAT_AUTOCOMPLETE_DEFAULT_OPTIONS_FACTORY() {\n return {\n autoActiveFirstOption: false,\n autoSelectActiveOption: false,\n hideSingleSelectionIndicator: false,\n requireSelection: false\n };\n}\n/** Autocomplete component. */\nlet MatAutocomplete = /*#__PURE__*/(() => {\n class MatAutocomplete {\n /** Whether the autocomplete panel is open. */\n get isOpen() {\n return this._isOpen && this.showPanel;\n }\n /** @docs-private Sets the theme color of the panel. */\n _setColor(value) {\n this._color = value;\n this._changeDetectorRef.markForCheck();\n }\n /**\n * Takes classes set on the host mat-autocomplete element and applies them to the panel\n * inside the overlay container to allow for easy styling.\n */\n set classList(value) {\n this._classList = value;\n this._elementRef.nativeElement.className = '';\n }\n /** Whether checkmark indicator for single-selection options is hidden. */\n get hideSingleSelectionIndicator() {\n return this._hideSingleSelectionIndicator;\n }\n set hideSingleSelectionIndicator(value) {\n this._hideSingleSelectionIndicator = value;\n this._syncParentProperties();\n }\n /** Syncs the parent state with the individual options. */\n _syncParentProperties() {\n if (this.options) {\n for (const option of this.options) {\n option._changeDetectorRef.markForCheck();\n }\n }\n }\n constructor(_changeDetectorRef, _elementRef, _defaults, platform) {\n this._changeDetectorRef = _changeDetectorRef;\n this._elementRef = _elementRef;\n this._defaults = _defaults;\n this._activeOptionChanges = Subscription.EMPTY;\n /** Emits when the panel animation is done. Null if the panel doesn't animate. */\n this._animationDone = new EventEmitter();\n /** Whether the autocomplete panel should be visible, depending on option length. */\n this.showPanel = false;\n this._isOpen = false;\n /** Function that maps an option's control value to its display value in the trigger. */\n this.displayWith = null;\n /** Event that is emitted whenever an option from the list is selected. */\n this.optionSelected = new EventEmitter();\n /** Event that is emitted when the autocomplete panel is opened. */\n this.opened = new EventEmitter();\n /** Event that is emitted when the autocomplete panel is closed. */\n this.closed = new EventEmitter();\n /** Emits whenever an option is activated. */\n this.optionActivated = new EventEmitter();\n /** Unique ID to be used by autocomplete trigger's \"aria-owns\" property. */\n this.id = `mat-autocomplete-${_uniqueAutocompleteIdCounter++}`;\n // TODO(crisbeto): the problem that the `inertGroups` option resolves is only present on\n // Safari using VoiceOver. We should occasionally check back to see whether the bug\n // wasn't resolved in VoiceOver, and if it has, we can remove this and the `inertGroups`\n // option altogether.\n this.inertGroups = platform?.SAFARI || false;\n this.autoActiveFirstOption = !!_defaults.autoActiveFirstOption;\n this.autoSelectActiveOption = !!_defaults.autoSelectActiveOption;\n this.requireSelection = !!_defaults.requireSelection;\n this._hideSingleSelectionIndicator = this._defaults.hideSingleSelectionIndicator ?? false;\n }\n ngAfterContentInit() {\n this._keyManager = new ActiveDescendantKeyManager(this.options).withWrap().skipPredicate(this._skipPredicate);\n this._activeOptionChanges = this._keyManager.change.subscribe(index => {\n if (this.isOpen) {\n this.optionActivated.emit({\n source: this,\n option: this.options.toArray()[index] || null\n });\n }\n });\n // Set the initial visibility state.\n this._setVisibility();\n }\n ngOnDestroy() {\n this._keyManager?.destroy();\n this._activeOptionChanges.unsubscribe();\n this._animationDone.complete();\n }\n /**\n * Sets the panel scrollTop. This allows us to manually scroll to display options\n * above or below the fold, as they are not actually being focused when active.\n */\n _setScrollTop(scrollTop) {\n if (this.panel) {\n this.panel.nativeElement.scrollTop = scrollTop;\n }\n }\n /** Returns the panel's scrollTop. */\n _getScrollTop() {\n return this.panel ? this.panel.nativeElement.scrollTop : 0;\n }\n /** Panel should hide itself when the option list is empty. */\n _setVisibility() {\n this.showPanel = !!this.options.length;\n this._changeDetectorRef.markForCheck();\n }\n /** Emits the `select` event. */\n _emitSelectEvent(option) {\n const event = new MatAutocompleteSelectedEvent(this, option);\n this.optionSelected.emit(event);\n }\n /** Gets the aria-labelledby for the autocomplete panel. */\n _getPanelAriaLabelledby(labelId) {\n if (this.ariaLabel) {\n return null;\n }\n const labelExpression = labelId ? labelId + ' ' : '';\n return this.ariaLabelledby ? labelExpression + this.ariaLabelledby : labelId;\n }\n // `skipPredicate` determines if key manager should avoid putting a given option in the tab\n // order. Allow disabled list items to receive focus via keyboard to align with WAI ARIA\n // recommendation.\n //\n // Normally WAI ARIA's instructions are to exclude disabled items from the tab order, but it\n // makes a few exceptions for compound widgets.\n //\n // From [Developing a Keyboard Interface](\n // https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/):\n // \"For the following composite widget elements, keep them focusable when disabled: Options in a\n // Listbox...\"\n //\n // The user can focus disabled options using the keyboard, but the user cannot click disabled\n // options.\n _skipPredicate() {\n return false;\n }\n static {\n this.ɵfac = function MatAutocomplete_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || MatAutocomplete)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(MAT_AUTOCOMPLETE_DEFAULT_OPTIONS), i0.ɵɵdirectiveInject(i1.Platform));\n };\n }\n static {\n this.ɵcmp = /* @__PURE__ */i0.ɵɵdefineComponent({\n type: MatAutocomplete,\n selectors: [[\"mat-autocomplete\"]],\n contentQueries: function MatAutocomplete_ContentQueries(rf, ctx, dirIndex) {\n if (rf & 1) {\n i0.ɵɵcontentQuery(dirIndex, MatOption, 5);\n i0.ɵɵcontentQuery(dirIndex, MAT_OPTGROUP, 5);\n }\n if (rf & 2) {\n let _t;\n i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.options = _t);\n i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.optionGroups = _t);\n }\n },\n viewQuery: function MatAutocomplete_Query(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵviewQuery(TemplateRef, 7);\n i0.ɵɵviewQuery(_c0, 5);\n }\n if (rf & 2) {\n let _t;\n i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.template = _t.first);\n i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.panel = _t.first);\n }\n },\n hostAttrs: [1, \"mat-mdc-autocomplete\"],\n inputs: {\n ariaLabel: [0, \"aria-label\", \"ariaLabel\"],\n ariaLabelledby: [0, \"aria-labelledby\", \"ariaLabelledby\"],\n displayWith: \"displayWith\",\n autoActiveFirstOption: [2, \"autoActiveFirstOption\", \"autoActiveFirstOption\", booleanAttribute],\n autoSelectActiveOption: [2, \"autoSelectActiveOption\", \"autoSelectActiveOption\", booleanAttribute],\n requireSelection: [2, \"requireSelection\", \"requireSelection\", booleanAttribute],\n panelWidth: \"panelWidth\",\n disableRipple: [2, \"disableRipple\", \"disableRipple\", booleanAttribute],\n classList: [0, \"class\", \"classList\"],\n hideSingleSelectionIndicator: [2, \"hideSingleSelectionIndicator\", \"hideSingleSelectionIndicator\", booleanAttribute]\n },\n outputs: {\n optionSelected: \"optionSelected\",\n opened: \"opened\",\n closed: \"closed\",\n optionActivated: \"optionActivated\"\n },\n exportAs: [\"matAutocomplete\"],\n standalone: true,\n features: [i0.ɵɵProvidersFeature([{\n provide: MAT_OPTION_PARENT_COMPONENT,\n useExisting: MatAutocomplete\n }]), i0.ɵɵInputTransformsFeature, i0.ɵɵStandaloneFeature],\n ngContentSelectors: _c1,\n decls: 1,\n vars: 0,\n consts: [[\"panel\", \"\"], [\"role\", \"listbox\", 1, \"mat-mdc-autocomplete-panel\", \"mdc-menu-surface\", \"mdc-menu-surface--open\", 3, \"id\"]],\n template: function MatAutocomplete_Template(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵprojectionDef();\n i0.ɵɵtemplate(0, MatAutocomplete_ng_template_0_Template, 3, 16, \"ng-template\");\n }\n },\n styles: [\"div.mat-mdc-autocomplete-panel{width:100%;max-height:256px;visibility:hidden;transform-origin:center top;overflow:auto;padding:8px 0;box-sizing:border-box;position:static;border-radius:var(--mat-autocomplete-container-shape, var(--mat-app-corner-extra-small));box-shadow:var(--mat-autocomplete-container-elevation-shadow);background-color:var(--mat-autocomplete-background-color, var(--mat-app-surface-container))}.cdk-high-contrast-active div.mat-mdc-autocomplete-panel{outline:solid 1px}.cdk-overlay-pane:not(.mat-mdc-autocomplete-panel-above) div.mat-mdc-autocomplete-panel{border-top-left-radius:0;border-top-right-radius:0}.mat-mdc-autocomplete-panel-above div.mat-mdc-autocomplete-panel{border-bottom-left-radius:0;border-bottom-right-radius:0;transform-origin:center bottom}div.mat-mdc-autocomplete-panel.mat-mdc-autocomplete-visible{visibility:visible}div.mat-mdc-autocomplete-panel.mat-mdc-autocomplete-hidden{visibility:hidden;pointer-events:none}mat-autocomplete{display:none}\"],\n encapsulation: 2,\n data: {\n animation: [panelAnimation]\n },\n changeDetection: 0\n });\n }\n }\n return MatAutocomplete;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n\n/**\n * Directive applied to an element to make it usable\n * as a connection point for an autocomplete panel.\n */\nlet MatAutocompleteOrigin = /*#__PURE__*/(() => {\n class MatAutocompleteOrigin {\n constructor(/** Reference to the element on which the directive is applied. */\n elementRef) {\n this.elementRef = elementRef;\n }\n static {\n this.ɵfac = function MatAutocompleteOrigin_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || MatAutocompleteOrigin)(i0.ɵɵdirectiveInject(i0.ElementRef));\n };\n }\n static {\n this.ɵdir = /* @__PURE__ */i0.ɵɵdefineDirective({\n type: MatAutocompleteOrigin,\n selectors: [[\"\", \"matAutocompleteOrigin\", \"\"]],\n exportAs: [\"matAutocompleteOrigin\"],\n standalone: true\n });\n }\n }\n return MatAutocompleteOrigin;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n\n/**\n * Provider that allows the autocomplete to register as a ControlValueAccessor.\n * @docs-private\n */\nconst MAT_AUTOCOMPLETE_VALUE_ACCESSOR = {\n provide: NG_VALUE_ACCESSOR,\n useExisting: /*#__PURE__*/forwardRef(() => MatAutocompleteTrigger),\n multi: true\n};\n/**\n * Creates an error to be thrown when attempting to use an autocomplete trigger without a panel.\n * @docs-private\n */\nfunction getMatAutocompleteMissingPanelError() {\n return Error('Attempting to open an undefined instance of `mat-autocomplete`. ' + 'Make sure that the id passed to the `matAutocomplete` is correct and that ' + \"you're attempting to open it after the ngAfterContentInit hook.\");\n}\n/** Injection token that determines the scroll handling while the autocomplete panel is open. */\nconst MAT_AUTOCOMPLETE_SCROLL_STRATEGY = /*#__PURE__*/new InjectionToken('mat-autocomplete-scroll-strategy', {\n providedIn: 'root',\n factory: () => {\n const overlay = inject(Overlay);\n return () => overlay.scrollStrategies.reposition();\n }\n});\n/** @docs-private */\nfunction MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY(overlay) {\n return () => overlay.scrollStrategies.reposition();\n}\n/** @docs-private */\nconst MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY_PROVIDER = {\n provide: MAT_AUTOCOMPLETE_SCROLL_STRATEGY,\n deps: [Overlay],\n useFactory: MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY\n};\n/** Base class with all of the `MatAutocompleteTrigger` functionality. */\nlet MatAutocompleteTrigger = /*#__PURE__*/(() => {\n class MatAutocompleteTrigger {\n constructor(_element, _overlay, _viewContainerRef, _zone, _changeDetectorRef, scrollStrategy, _dir, _formField, _document, _viewportRuler, _defaults) {\n this._element = _element;\n this._overlay = _overlay;\n this._viewContainerRef = _viewContainerRef;\n this._zone = _zone;\n this._changeDetectorRef = _changeDetectorRef;\n this._dir = _dir;\n this._formField = _formField;\n this._document = _document;\n this._viewportRuler = _viewportRuler;\n this._defaults = _defaults;\n this._componentDestroyed = false;\n /** Whether or not the label state is being overridden. */\n this._manuallyFloatingLabel = false;\n /** Subscription to viewport size changes. */\n this._viewportSubscription = Subscription.EMPTY;\n /** Implements BreakpointObserver to be used to detect handset landscape */\n this._breakpointObserver = inject(BreakpointObserver);\n this._handsetLandscapeSubscription = Subscription.EMPTY;\n /**\n * Whether the autocomplete can open the next time it is focused. Used to prevent a focused,\n * closed autocomplete from being reopened if the user switches to another browser tab and then\n * comes back.\n */\n this._canOpenOnNextFocus = true;\n /** Stream of keyboard events that can close the panel. */\n this._closeKeyEventStream = new Subject();\n /**\n * Event handler for when the window is blurred. Needs to be an\n * arrow function in order to preserve the context.\n */\n this._windowBlurHandler = () => {\n // If the user blurred the window while the autocomplete is focused, it means that it'll be\n // refocused when they come back. In this case we want to skip the first focus event, if the\n // pane was closed, in order to avoid reopening it unintentionally.\n this._canOpenOnNextFocus = this._document.activeElement !== this._element.nativeElement || this.panelOpen;\n };\n /** `View -> model callback called when value changes` */\n this._onChange = () => {};\n /** `View -> model callback called when autocomplete has been touched` */\n this._onTouched = () => {};\n /**\n * Position of the autocomplete panel relative to the trigger element. A position of `auto`\n * will render the panel underneath the trigger if there is enough space for it to fit in\n * the viewport, otherwise the panel will be shown above it. If the position is set to\n * `above` or `below`, the panel will always be shown above or below the trigger. no matter\n * whether it fits completely in the viewport.\n */\n this.position = 'auto';\n /**\n * `autocomplete` attribute to be set on the input element.\n * @docs-private\n */\n this.autocompleteAttribute = 'off';\n this._initialized = new Subject();\n this._injector = inject(Injector);\n /** Class to apply to the panel when it's above the input. */\n this._aboveClass = 'mat-mdc-autocomplete-panel-above';\n this._overlayAttached = false;\n /** Stream of changes to the selection state of the autocomplete options. */\n this.optionSelections = defer(() => {\n const options = this.autocomplete ? this.autocomplete.options : null;\n if (options) {\n return options.changes.pipe(startWith(options), switchMap(() => merge(...options.map(option => option.onSelectionChange))));\n }\n // If there are any subscribers before `ngAfterViewInit`, the `autocomplete` will be undefined.\n // Return a stream that we'll replace with the real one once everything is in place.\n return this._initialized.pipe(switchMap(() => this.optionSelections));\n });\n /** Handles keyboard events coming from the overlay panel. */\n this._handlePanelKeydown = event => {\n // Close when pressing ESCAPE or ALT + UP_ARROW, based on the a11y guidelines.\n // See: https://www.w3.org/TR/wai-aria-practices-1.1/#textbox-keyboard-interaction\n if (event.keyCode === ESCAPE && !hasModifierKey(event) || event.keyCode === UP_ARROW && hasModifierKey(event, 'altKey')) {\n // If the user had typed something in before we autoselected an option, and they decided\n // to cancel the selection, restore the input value to the one they had typed in.\n if (this._pendingAutoselectedOption) {\n this._updateNativeInputValue(this._valueBeforeAutoSelection ?? '');\n this._pendingAutoselectedOption = null;\n }\n this._closeKeyEventStream.next();\n this._resetActiveItem();\n // We need to stop propagation, otherwise the event will eventually\n // reach the input itself and cause the overlay to be reopened.\n event.stopPropagation();\n event.preventDefault();\n }\n };\n /**\n * Track which modal we have modified the `aria-owns` attribute of. When the combobox trigger is\n * inside an aria-modal, we apply aria-owns to the parent modal with the `id` of the options\n * panel. Track the modal we have changed so we can undo the changes on destroy.\n */\n this._trackedModal = null;\n this._scrollStrategy = scrollStrategy;\n }\n ngAfterViewInit() {\n this._initialized.next();\n this._initialized.complete();\n const window = this._getWindow();\n if (typeof window !== 'undefined') {\n this._zone.runOutsideAngular(() => window.addEventListener('blur', this._windowBlurHandler));\n }\n }\n ngOnChanges(changes) {\n if (changes['position'] && this._positionStrategy) {\n this._setStrategyPositions(this._positionStrategy);\n if (this.panelOpen) {\n this._overlayRef.updatePosition();\n }\n }\n }\n ngOnDestroy() {\n const window = this._getWindow();\n if (typeof window !== 'undefined') {\n window.removeEventListener('blur', this._windowBlurHandler);\n }\n this._handsetLandscapeSubscription.unsubscribe();\n this._viewportSubscription.unsubscribe();\n this._componentDestroyed = true;\n this._destroyPanel();\n this._closeKeyEventStream.complete();\n this._clearFromModal();\n }\n /** Whether or not the autocomplete panel is open. */\n get panelOpen() {\n return this._overlayAttached && this.autocomplete.showPanel;\n }\n /** Opens the autocomplete suggestion panel. */\n openPanel() {\n this._openPanelInternal();\n }\n /** Closes the autocomplete suggestion panel. */\n closePanel() {\n this._resetLabel();\n if (!this._overlayAttached) {\n return;\n }\n if (this.panelOpen) {\n // Only emit if the panel was visible.\n // `afterNextRender` always runs outside of the Angular zone, so all the subscriptions from\n // `_subscribeToClosingActions()` are also outside of the Angular zone.\n // We should manually run in Angular zone to update UI after panel closing.\n this._zone.run(() => {\n this.autocomplete.closed.emit();\n });\n }\n // Only reset if this trigger is the latest one that opened the\n // autocomplete since another may have taken it over.\n if (this.autocomplete._latestOpeningTrigger === this) {\n this.autocomplete._isOpen = false;\n this.autocomplete._latestOpeningTrigger = null;\n }\n this._overlayAttached = false;\n this._pendingAutoselectedOption = null;\n if (this._overlayRef && this._overlayRef.hasAttached()) {\n this._overlayRef.detach();\n this._closingActionsSubscription.unsubscribe();\n }\n this._updatePanelState();\n // Note that in some cases this can end up being called after the component is destroyed.\n // Add a check to ensure that we don't try to run change detection on a destroyed view.\n if (!this._componentDestroyed) {\n // We need to trigger change detection manually, because\n // `fromEvent` doesn't seem to do it at the proper time.\n // This ensures that the label is reset when the\n // user clicks outside.\n this._changeDetectorRef.detectChanges();\n }\n // Remove aria-owns attribute when the autocomplete is no longer visible.\n if (this._trackedModal) {\n removeAriaReferencedId(this._trackedModal, 'aria-owns', this.autocomplete.id);\n }\n }\n /**\n * Updates the position of the autocomplete suggestion panel to ensure that it fits all options\n * within the viewport.\n */\n updatePosition() {\n if (this._overlayAttached) {\n this._overlayRef.updatePosition();\n }\n }\n /**\n * A stream of actions that should close the autocomplete panel, including\n * when an option is selected, on blur, and when TAB is pressed.\n */\n get panelClosingActions() {\n return merge(this.optionSelections, this.autocomplete._keyManager.tabOut.pipe(filter(() => this._overlayAttached)), this._closeKeyEventStream, this._getOutsideClickStream(), this._overlayRef ? this._overlayRef.detachments().pipe(filter(() => this._overlayAttached)) : of()).pipe(\n // Normalize the output so we return a consistent type.\n map(event => event instanceof MatOptionSelectionChange ? event : null));\n }\n /** The currently active option, coerced to MatOption type. */\n get activeOption() {\n if (this.autocomplete && this.autocomplete._keyManager) {\n return this.autocomplete._keyManager.activeItem;\n }\n return null;\n }\n /** Stream of clicks outside of the autocomplete panel. */\n _getOutsideClickStream() {\n return merge(fromEvent(this._document, 'click'), fromEvent(this._document, 'auxclick'), fromEvent(this._document, 'touchend')).pipe(filter(event => {\n // If we're in the Shadow DOM, the event target will be the shadow root, so we have to\n // fall back to check the first element in the path of the click event.\n const clickTarget = _getEventTarget(event);\n const formField = this._formField ? this._formField.getConnectedOverlayOrigin().nativeElement : null;\n const customOrigin = this.connectedTo ? this.connectedTo.elementRef.nativeElement : null;\n return this._overlayAttached && clickTarget !== this._element.nativeElement &&\n // Normally focus moves inside `mousedown` so this condition will almost always be\n // true. Its main purpose is to handle the case where the input is focused from an\n // outside click which propagates up to the `body` listener within the same sequence\n // and causes the panel to close immediately (see #3106).\n this._document.activeElement !== this._element.nativeElement && (!formField || !formField.contains(clickTarget)) && (!customOrigin || !customOrigin.contains(clickTarget)) && !!this._overlayRef && !this._overlayRef.overlayElement.contains(clickTarget);\n }));\n }\n // Implemented as part of ControlValueAccessor.\n writeValue(value) {\n Promise.resolve(null).then(() => this._assignOptionValue(value));\n }\n // Implemented as part of ControlValueAccessor.\n registerOnChange(fn) {\n this._onChange = 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._element.nativeElement.disabled = isDisabled;\n }\n _handleKeydown(event) {\n const keyCode = event.keyCode;\n const hasModifier = hasModifierKey(event);\n // Prevent the default action on all escape key presses. This is here primarily to bring IE\n // in line with other browsers. By default, pressing escape on IE will cause it to revert\n // the input value to the one that it had on focus, however it won't dispatch any events\n // which means that the model value will be out of sync with the view.\n if (keyCode === ESCAPE && !hasModifier) {\n event.preventDefault();\n }\n this._valueOnLastKeydown = this._element.nativeElement.value;\n if (this.activeOption && keyCode === ENTER && this.panelOpen && !hasModifier) {\n this.activeOption._selectViaInteraction();\n this._resetActiveItem();\n event.preventDefault();\n } else if (this.autocomplete) {\n const prevActiveItem = this.autocomplete._keyManager.activeItem;\n const isArrowKey = keyCode === UP_ARROW || keyCode === DOWN_ARROW;\n if (keyCode === TAB || isArrowKey && !hasModifier && this.panelOpen) {\n this.autocomplete._keyManager.onKeydown(event);\n } else if (isArrowKey && this._canOpen()) {\n this._openPanelInternal(this._valueOnLastKeydown);\n }\n if (isArrowKey || this.autocomplete._keyManager.activeItem !== prevActiveItem) {\n this._scrollToOption(this.autocomplete._keyManager.activeItemIndex || 0);\n if (this.autocomplete.autoSelectActiveOption && this.activeOption) {\n if (!this._pendingAutoselectedOption) {\n this._valueBeforeAutoSelection = this._valueOnLastKeydown;\n }\n this._pendingAutoselectedOption = this.activeOption;\n this._assignOptionValue(this.activeOption.value);\n }\n }\n }\n }\n _handleInput(event) {\n let target = event.target;\n let value = target.value;\n // Based on `NumberValueAccessor` from forms.\n if (target.type === 'number') {\n value = value == '' ? null : parseFloat(value);\n }\n // If the input has a placeholder, IE will fire the `input` event on page load,\n // focus and blur, in addition to when the user actually changed the value. To\n // filter out all of the extra events, we save the value on focus and between\n // `input` events, and we check whether it changed.\n // See: https://connect.microsoft.com/IE/feedback/details/885747/\n if (this._previousValue !== value) {\n this._previousValue = value;\n this._pendingAutoselectedOption = null;\n // If selection is required we don't write to the CVA while the user is typing.\n // At the end of the selection either the user will have picked something\n // or we'll reset the value back to null.\n if (!this.autocomplete || !this.autocomplete.requireSelection) {\n this._onChange(value);\n }\n if (!value) {\n this._clearPreviousSelectedOption(null, false);\n } else if (this.panelOpen && !this.autocomplete.requireSelection) {\n // Note that we don't reset this when `requireSelection` is enabled,\n // because the option will be reset when the panel is closed.\n const selectedOption = this.autocomplete.options?.find(option => option.selected);\n if (selectedOption) {\n const display = this._getDisplayValue(selectedOption.value);\n if (value !== display) {\n selectedOption.deselect(false);\n }\n }\n }\n if (this._canOpen() && this._document.activeElement === event.target) {\n // When the `input` event fires, the input's value will have already changed. This means\n // that if we take the `this._element.nativeElement.value` directly, it'll be one keystroke\n // behind. This can be a problem when the user selects a value, changes a character while\n // the input still has focus and then clicks away (see #28432). To work around it, we\n // capture the value in `keydown` so we can use it here.\n const valueOnAttach = this._valueOnLastKeydown ?? this._element.nativeElement.value;\n this._valueOnLastKeydown = null;\n this._openPanelInternal(valueOnAttach);\n }\n }\n }\n _handleFocus() {\n if (!this._canOpenOnNextFocus) {\n this._canOpenOnNextFocus = true;\n } else if (this._canOpen()) {\n this._previousValue = this._element.nativeElement.value;\n this._attachOverlay(this._previousValue);\n this._floatLabel(true);\n }\n }\n _handleClick() {\n if (this._canOpen() && !this.panelOpen) {\n this._openPanelInternal();\n }\n }\n /**\n * In \"auto\" mode, the label will animate down as soon as focus is lost.\n * This causes the value to jump when selecting an option with the mouse.\n * This method manually floats the label until the panel can be closed.\n * @param shouldAnimate Whether the label should be animated when it is floated.\n */\n _floatLabel(shouldAnimate = false) {\n if (this._formField && this._formField.floatLabel === 'auto') {\n if (shouldAnimate) {\n this._formField._animateAndLockLabel();\n } else {\n this._formField.floatLabel = 'always';\n }\n this._manuallyFloatingLabel = true;\n }\n }\n /** If the label has been manually elevated, return it to its normal state. */\n _resetLabel() {\n if (this._manuallyFloatingLabel) {\n if (this._formField) {\n this._formField.floatLabel = 'auto';\n }\n this._manuallyFloatingLabel = false;\n }\n }\n /**\n * This method listens to a stream of panel closing actions and resets the\n * stream every time the option list changes.\n */\n _subscribeToClosingActions() {\n const initialRender = new Observable(subscriber => {\n afterNextRender(() => {\n subscriber.next();\n }, {\n injector: this._injector\n });\n });\n const optionChanges = this.autocomplete.options.changes.pipe(tap(() => this._positionStrategy.reapplyLastPosition()),\n // Defer emitting to the stream until the next tick, because changing\n // bindings in here will cause \"changed after checked\" errors.\n delay(0));\n // When the options are initially rendered, and when the option list changes...\n return merge(initialRender, optionChanges).pipe(\n // create a new stream of panelClosingActions, replacing any previous streams\n // that were created, and flatten it so our stream only emits closing events...\n switchMap(() => this._zone.run(() => {\n // `afterNextRender` always runs outside of the Angular zone, thus we have to re-enter\n // the Angular zone. This will lead to change detection being called outside of the Angular\n // zone and the `autocomplete.opened` will also emit outside of the Angular.\n const wasOpen = this.panelOpen;\n this._resetActiveItem();\n this._updatePanelState();\n this._changeDetectorRef.detectChanges();\n if (this.panelOpen) {\n this._overlayRef.updatePosition();\n }\n if (wasOpen !== this.panelOpen) {\n // If the `panelOpen` state changed, we need to make sure to emit the `opened` or\n // `closed` event, because we may not have emitted it. This can happen\n // - if the users opens the panel and there are no options, but the\n // options come in slightly later or as a result of the value changing,\n // - if the panel is closed after the user entered a string that did not match any\n // of the available options,\n // - if a valid string is entered after an invalid one.\n if (this.panelOpen) {\n this._emitOpened();\n } else {\n this.autocomplete.closed.emit();\n }\n }\n return this.panelClosingActions;\n })),\n // when the first closing event occurs...\n take(1))\n // set the value, close the panel, and complete.\n .subscribe(event => this._setValueAndClose(event));\n }\n /**\n * Emits the opened event once it's known that the panel will be shown and stores\n * the state of the trigger right before the opening sequence was finished.\n */\n _emitOpened() {\n this.autocomplete.opened.emit();\n }\n /** Destroys the autocomplete suggestion panel. */\n _destroyPanel() {\n if (this._overlayRef) {\n this.closePanel();\n this._overlayRef.dispose();\n this._overlayRef = null;\n }\n }\n /** Given a value, returns the string that should be shown within the input. */\n _getDisplayValue(value) {\n const autocomplete = this.autocomplete;\n return autocomplete && autocomplete.displayWith ? autocomplete.displayWith(value) : value;\n }\n _assignOptionValue(value) {\n const toDisplay = this._getDisplayValue(value);\n if (value == null) {\n this._clearPreviousSelectedOption(null, false);\n }\n // Simply falling back to an empty string if the display value is falsy does not work properly.\n // The display value can also be the number zero and shouldn't fall back to an empty string.\n this._updateNativeInputValue(toDisplay != null ? toDisplay : '');\n }\n _updateNativeInputValue(value) {\n // If it's used within a `MatFormField`, we should set it through the property so it can go\n // through change detection.\n if (this._formField) {\n this._formField._control.value = value;\n } else {\n this._element.nativeElement.value = value;\n }\n this._previousValue = value;\n }\n /**\n * This method closes the panel, and if a value is specified, also sets the associated\n * control to that value. It will also mark the control as dirty if this interaction\n * stemmed from the user.\n */\n _setValueAndClose(event) {\n const panel = this.autocomplete;\n const toSelect = event ? event.source : this._pendingAutoselectedOption;\n if (toSelect) {\n this._clearPreviousSelectedOption(toSelect);\n this._assignOptionValue(toSelect.value);\n // TODO(crisbeto): this should wait until the animation is done, otherwise the value\n // gets reset while the panel is still animating which looks glitchy. It'll likely break\n // some tests to change it at this point.\n this._onChange(toSelect.value);\n panel._emitSelectEvent(toSelect);\n this._element.nativeElement.focus();\n } else if (panel.requireSelection && this._element.nativeElement.value !== this._valueOnAttach) {\n this._clearPreviousSelectedOption(null);\n this._assignOptionValue(null);\n // Wait for the animation to finish before clearing the form control value, otherwise\n // the options might change while the animation is running which looks glitchy.\n if (panel._animationDone) {\n panel._animationDone.pipe(take(1)).subscribe(() => this._onChange(null));\n } else {\n this._onChange(null);\n }\n }\n this.closePanel();\n }\n /**\n * Clear any previous selected option and emit a selection change event for this option\n */\n _clearPreviousSelectedOption(skip, emitEvent) {\n // Null checks are necessary here, because the autocomplete\n // or its options may not have been assigned yet.\n this.autocomplete?.options?.forEach(option => {\n if (option !== skip && option.selected) {\n option.deselect(emitEvent);\n }\n });\n }\n _openPanelInternal(valueOnAttach = this._element.nativeElement.value) {\n this._attachOverlay(valueOnAttach);\n this._floatLabel();\n // Add aria-owns attribute when the autocomplete becomes visible.\n if (this._trackedModal) {\n const panelId = this.autocomplete.id;\n addAriaReferencedId(this._trackedModal, 'aria-owns', panelId);\n }\n }\n _attachOverlay(valueOnAttach) {\n if (!this.autocomplete && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n throw getMatAutocompleteMissingPanelError();\n }\n let overlayRef = this._overlayRef;\n if (!overlayRef) {\n this._portal = new TemplatePortal(this.autocomplete.template, this._viewContainerRef, {\n id: this._formField?.getLabelId()\n });\n overlayRef = this._overlay.create(this._getOverlayConfig());\n this._overlayRef = overlayRef;\n this._viewportSubscription = this._viewportRuler.change().subscribe(() => {\n if (this.panelOpen && overlayRef) {\n overlayRef.updateSize({\n width: this._getPanelWidth()\n });\n }\n });\n // Subscribe to the breakpoint events stream to detect when screen is in\n // handsetLandscape.\n this._handsetLandscapeSubscription = this._breakpointObserver.observe(Breakpoints.HandsetLandscape).subscribe(result => {\n const isHandsetLandscape = result.matches;\n // Check if result.matches Breakpoints.HandsetLandscape. Apply HandsetLandscape\n // settings to prevent overlay cutoff in that breakpoint. Fixes b/284148377\n if (isHandsetLandscape) {\n this._positionStrategy.withFlexibleDimensions(true).withGrowAfterOpen(true).withViewportMargin(8);\n } else {\n this._positionStrategy.withFlexibleDimensions(false).withGrowAfterOpen(false).withViewportMargin(0);\n }\n });\n } else {\n // Update the trigger, panel width and direction, in case anything has changed.\n this._positionStrategy.setOrigin(this._getConnectedElement());\n overlayRef.updateSize({\n width: this._getPanelWidth()\n });\n }\n if (overlayRef && !overlayRef.hasAttached()) {\n overlayRef.attach(this._portal);\n this._valueOnAttach = valueOnAttach;\n this._valueOnLastKeydown = null;\n this._closingActionsSubscription = this._subscribeToClosingActions();\n }\n const wasOpen = this.panelOpen;\n this.autocomplete._isOpen = this._overlayAttached = true;\n this.autocomplete._latestOpeningTrigger = this;\n this.autocomplete._setColor(this._formField?.color);\n this._updatePanelState();\n this._applyModalPanelOwnership();\n // We need to do an extra `panelOpen` check in here, because the\n // autocomplete won't be shown if there are no options.\n if (this.panelOpen && wasOpen !== this.panelOpen) {\n this._emitOpened();\n }\n }\n /** Updates the panel's visibility state and any trigger state tied to id. */\n _updatePanelState() {\n this.autocomplete._setVisibility();\n // Note that here we subscribe and unsubscribe based on the panel's visiblity state,\n // because the act of subscribing will prevent events from reaching other overlays and\n // we don't want to block the events if there are no options.\n if (this.panelOpen) {\n const overlayRef = this._overlayRef;\n if (!this._keydownSubscription) {\n // Use the `keydownEvents` in order to take advantage of\n // the overlay event targeting provided by the CDK overlay.\n this._keydownSubscription = overlayRef.keydownEvents().subscribe(this._handlePanelKeydown);\n }\n if (!this._outsideClickSubscription) {\n // Subscribe to the pointer events stream so that it doesn't get picked up by other overlays.\n // TODO(crisbeto): we should switch `_getOutsideClickStream` eventually to use this stream,\n // but the behvior isn't exactly the same and it ends up breaking some internal tests.\n this._outsideClickSubscription = overlayRef.outsidePointerEvents().subscribe();\n }\n } else {\n this._keydownSubscription?.unsubscribe();\n this._outsideClickSubscription?.unsubscribe();\n this._keydownSubscription = this._outsideClickSubscription = null;\n }\n }\n _getOverlayConfig() {\n return new OverlayConfig({\n positionStrategy: this._getOverlayPosition(),\n scrollStrategy: this._scrollStrategy(),\n width: this._getPanelWidth(),\n direction: this._dir ?? undefined,\n panelClass: this._defaults?.overlayPanelClass\n });\n }\n _getOverlayPosition() {\n // Set default Overlay Position\n const strategy = this._overlay.position().flexibleConnectedTo(this._getConnectedElement()).withFlexibleDimensions(false).withPush(false);\n this._setStrategyPositions(strategy);\n this._positionStrategy = strategy;\n return strategy;\n }\n /** Sets the positions on a position strategy based on the directive's input state. */\n _setStrategyPositions(positionStrategy) {\n // Note that we provide horizontal fallback positions, even though by default the dropdown\n // width matches the input, because consumers can override the width. See #18854.\n const belowPositions = [{\n originX: 'start',\n originY: 'bottom',\n overlayX: 'start',\n overlayY: 'top'\n }, {\n originX: 'end',\n originY: 'bottom',\n overlayX: 'end',\n overlayY: 'top'\n }];\n // The overlay edge connected to the trigger should have squared corners, while\n // the opposite end has rounded corners. We apply a CSS class to swap the\n // border-radius based on the overlay position.\n const panelClass = this._aboveClass;\n const abovePositions = [{\n originX: 'start',\n originY: 'top',\n overlayX: 'start',\n overlayY: 'bottom',\n panelClass\n }, {\n originX: 'end',\n originY: 'top',\n overlayX: 'end',\n overlayY: 'bottom',\n panelClass\n }];\n let positions;\n if (this.position === 'above') {\n positions = abovePositions;\n } else if (this.position === 'below') {\n positions = belowPositions;\n } else {\n positions = [...belowPositions, ...abovePositions];\n }\n positionStrategy.withPositions(positions);\n }\n _getConnectedElement() {\n if (this.connectedTo) {\n return this.connectedTo.elementRef;\n }\n return this._formField ? this._formField.getConnectedOverlayOrigin() : this._element;\n }\n _getPanelWidth() {\n return this.autocomplete.panelWidth || this._getHostWidth();\n }\n /** Returns the width of the input element, so the panel width can match it. */\n _getHostWidth() {\n return this._getConnectedElement().nativeElement.getBoundingClientRect().width;\n }\n /**\n * Reset the active item to -1. This is so that pressing arrow keys will activate the correct\n * option.\n *\n * If the consumer opted-in to automatically activatating the first option, activate the first\n * *enabled* option.\n */\n _resetActiveItem() {\n const autocomplete = this.autocomplete;\n if (autocomplete.autoActiveFirstOption) {\n // Find the index of the first *enabled* option. Avoid calling `_keyManager.setActiveItem`\n // because it activates the first option that passes the skip predicate, rather than the\n // first *enabled* option.\n let firstEnabledOptionIndex = -1;\n for (let index = 0; index < autocomplete.options.length; index++) {\n const option = autocomplete.options.get(index);\n if (!option.disabled) {\n firstEnabledOptionIndex = index;\n break;\n }\n }\n autocomplete._keyManager.setActiveItem(firstEnabledOptionIndex);\n } else {\n autocomplete._keyManager.setActiveItem(-1);\n }\n }\n /** Determines whether the panel can be opened. */\n _canOpen() {\n const element = this._element.nativeElement;\n return !element.readOnly && !element.disabled && !this.autocompleteDisabled;\n }\n /** Use defaultView of injected document if available or fallback to global window reference */\n _getWindow() {\n return this._document?.defaultView || window;\n }\n /** Scrolls to a particular option in the list. */\n _scrollToOption(index) {\n // Given that we are not actually focusing active options, we must manually adjust scroll\n // to reveal options below the fold. First, we find the offset of the option from the top\n // of the panel. If that offset is below the fold, the new scrollTop will be the offset -\n // the panel height + the option height, so the active option will be just visible at the\n // bottom of the panel. If that offset is above the top of the visible panel, the new scrollTop\n // will become the offset. If that offset is visible within the panel already, the scrollTop is\n // not adjusted.\n const autocomplete = this.autocomplete;\n const labelCount = _countGroupLabelsBeforeOption(index, autocomplete.options, autocomplete.optionGroups);\n if (index === 0 && labelCount === 1) {\n // If we've got one group label before the option and we're at the top option,\n // scroll the list to the top. This is better UX than scrolling the list to the\n // top of the option, because it allows the user to read the top group's label.\n autocomplete._setScrollTop(0);\n } else if (autocomplete.panel) {\n const option = autocomplete.options.toArray()[index];\n if (option) {\n const element = option._getHostElement();\n const newScrollPosition = _getOptionScrollPosition(element.offsetTop, element.offsetHeight, autocomplete._getScrollTop(), autocomplete.panel.nativeElement.offsetHeight);\n autocomplete._setScrollTop(newScrollPosition);\n }\n }\n }\n /**\n * If the autocomplete trigger is inside of an `aria-modal` element, connect\n * that modal to the options panel with `aria-owns`.\n *\n * For some browser + screen reader combinations, when navigation is inside\n * of an `aria-modal` element, the screen reader treats everything outside\n * of that modal as hidden or invisible.\n *\n * This causes a problem when the combobox trigger is _inside_ of a modal, because the\n * options panel is rendered _outside_ of that modal, preventing screen reader navigation\n * from reaching the panel.\n *\n * We can work around this issue by applying `aria-owns` to the modal with the `id` of\n * the options panel. This effectively communicates to assistive technology that the\n * options panel is part of the same interaction as the modal.\n *\n * At time of this writing, this issue is present in VoiceOver.\n * See https://github.com/angular/components/issues/20694\n */\n _applyModalPanelOwnership() {\n // TODO(http://github.com/angular/components/issues/26853): consider de-duplicating this with\n // the `LiveAnnouncer` and any other usages.\n //\n // Note that the selector here is limited to CDK overlays at the moment in order to reduce the\n // section of the DOM we need to look through. This should cover all the cases we support, but\n // the selector can be expanded if it turns out to be too narrow.\n const modal = this._element.nativeElement.closest('body > .cdk-overlay-container [aria-modal=\"true\"]');\n if (!modal) {\n // Most commonly, the autocomplete trigger is not inside a modal.\n return;\n }\n const panelId = this.autocomplete.id;\n if (this._trackedModal) {\n removeAriaReferencedId(this._trackedModal, 'aria-owns', panelId);\n }\n addAriaReferencedId(modal, 'aria-owns', panelId);\n this._trackedModal = modal;\n }\n /** Clears the references to the listbox overlay element from the modal it was added to. */\n _clearFromModal() {\n if (this._trackedModal) {\n const panelId = this.autocomplete.id;\n removeAriaReferencedId(this._trackedModal, 'aria-owns', panelId);\n this._trackedModal = null;\n }\n }\n static {\n this.ɵfac = function MatAutocompleteTrigger_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || MatAutocompleteTrigger)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i1$1.Overlay), i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject(i0.NgZone), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(MAT_AUTOCOMPLETE_SCROLL_STRATEGY), i0.ɵɵdirectiveInject(i2.Directionality, 8), i0.ɵɵdirectiveInject(MAT_FORM_FIELD, 9), i0.ɵɵdirectiveInject(DOCUMENT, 8), i0.ɵɵdirectiveInject(i3.ViewportRuler), i0.ɵɵdirectiveInject(MAT_AUTOCOMPLETE_DEFAULT_OPTIONS, 8));\n };\n }\n static {\n this.ɵdir = /* @__PURE__ */i0.ɵɵdefineDirective({\n type: MatAutocompleteTrigger,\n selectors: [[\"input\", \"matAutocomplete\", \"\"], [\"textarea\", \"matAutocomplete\", \"\"]],\n hostAttrs: [1, \"mat-mdc-autocomplete-trigger\"],\n hostVars: 7,\n hostBindings: function MatAutocompleteTrigger_HostBindings(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵlistener(\"focusin\", function MatAutocompleteTrigger_focusin_HostBindingHandler() {\n return ctx._handleFocus();\n })(\"blur\", function MatAutocompleteTrigger_blur_HostBindingHandler() {\n return ctx._onTouched();\n })(\"input\", function MatAutocompleteTrigger_input_HostBindingHandler($event) {\n return ctx._handleInput($event);\n })(\"keydown\", function MatAutocompleteTrigger_keydown_HostBindingHandler($event) {\n return ctx._handleKeydown($event);\n })(\"click\", function MatAutocompleteTrigger_click_HostBindingHandler() {\n return ctx._handleClick();\n });\n }\n if (rf & 2) {\n i0.ɵɵattribute(\"autocomplete\", ctx.autocompleteAttribute)(\"role\", ctx.autocompleteDisabled ? null : \"combobox\")(\"aria-autocomplete\", ctx.autocompleteDisabled ? null : \"list\")(\"aria-activedescendant\", ctx.panelOpen && ctx.activeOption ? ctx.activeOption.id : null)(\"aria-expanded\", ctx.autocompleteDisabled ? null : ctx.panelOpen.toString())(\"aria-controls\", ctx.autocompleteDisabled || !ctx.panelOpen ? null : ctx.autocomplete == null ? null : ctx.autocomplete.id)(\"aria-haspopup\", ctx.autocompleteDisabled ? null : \"listbox\");\n }\n },\n inputs: {\n autocomplete: [0, \"matAutocomplete\", \"autocomplete\"],\n position: [0, \"matAutocompletePosition\", \"position\"],\n connectedTo: [0, \"matAutocompleteConnectedTo\", \"connectedTo\"],\n autocompleteAttribute: [0, \"autocomplete\", \"autocompleteAttribute\"],\n autocompleteDisabled: [2, \"matAutocompleteDisabled\", \"autocompleteDisabled\", booleanAttribute]\n },\n exportAs: [\"matAutocompleteTrigger\"],\n standalone: true,\n features: [i0.ɵɵProvidersFeature([MAT_AUTOCOMPLETE_VALUE_ACCESSOR]), i0.ɵɵInputTransformsFeature, i0.ɵɵNgOnChangesFeature]\n });\n }\n }\n return MatAutocompleteTrigger;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\nlet MatAutocompleteModule = /*#__PURE__*/(() => {\n class MatAutocompleteModule {\n static {\n this.ɵfac = function MatAutocompleteModule_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || MatAutocompleteModule)();\n };\n }\n static {\n this.ɵmod = /* @__PURE__ */i0.ɵɵdefineNgModule({\n type: MatAutocompleteModule\n });\n }\n static {\n this.ɵinj = /* @__PURE__ */i0.ɵɵdefineInjector({\n providers: [MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY_PROVIDER],\n imports: [OverlayModule, MatOptionModule, MatCommonModule, CommonModule, CdkScrollableModule, MatOptionModule, MatCommonModule]\n });\n }\n }\n return MatAutocompleteModule;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n\n/**\n * Generated bundle index. Do not edit.\n */\n\nexport { MAT_AUTOCOMPLETE_DEFAULT_OPTIONS, MAT_AUTOCOMPLETE_DEFAULT_OPTIONS_FACTORY, MAT_AUTOCOMPLETE_SCROLL_STRATEGY, MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY, MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY_PROVIDER, MAT_AUTOCOMPLETE_VALUE_ACCESSOR, MatAutocomplete, MatAutocompleteModule, MatAutocompleteOrigin, MatAutocompleteSelectedEvent, MatAutocompleteTrigger, getMatAutocompleteMissingPanelError };\n","import {\n ChangeDetectionStrategy,\n Component,\n Input,\n OnInit,\n} from '@angular/core';\nimport { LisTextContent } from '@lis-types';\n\n@Component({\n selector: 'lis-text-content',\n templateUrl: './text-content.component.html',\n styleUrls: ['./text-content.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class TextContentComponent implements OnInit {\n @Input({ required: true }) content!: LisTextContent;\n\n constructor() {}\n\n ngOnInit(): void {}\n}\n","
\n {{ 'docs.upload-dialog.drag-file' | translate }}\n
\n\n {{ 'docs.upload-dialog.upload-information' | translate }}\n
\n{{ 'docs.upload-dialog.filename' | translate }}
\n{{ file.file.name }}
\n{{ displayedValue }}
\n{{ group.groupKey }}
\n