@angular/material

Version:

Angular Material

1 lines • 80.9 kB

Source Map (JSON)

{"version":3,"file":"form-field.mjs","sources":["../../../../../../src/material/form-field/directives/label.ts","../../../../../../src/material/form-field/directives/error.ts","../../../../../../src/material/form-field/directives/hint.ts","../../../../../../src/material/form-field/directives/prefix.ts","../../../../../../src/material/form-field/directives/suffix.ts","../../../../../../src/material/form-field/directives/floating-label.ts","../../../../../../src/material/form-field/directives/line-ripple.ts","../../../../../../src/material/form-field/directives/notched-outline.ts","../../../../../../src/material/form-field/directives/notched-outline.html","../../../../../../src/material/form-field/form-field-animations.ts","../../../../../../src/material/form-field/form-field-control.ts","../../../../../../src/material/form-field/form-field-errors.ts","../../../../../../src/material/form-field/form-field.ts","../../../../../../src/material/form-field/form-field.html","../../../../../../src/material/form-field/module.ts","../../../../../../src/material/form-field/public-api.ts","../../../../../../src/material/form-field/index.ts","../../../../../../src/material/form-field/form-field_public_index.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {Directive} from '@angular/core';\n\n/** The floating label for a `mat-form-field`. */\n@Directive({\n selector: 'mat-label',\n})\nexport class MatLabel {}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {Attribute, Directive, ElementRef, InjectionToken, Input} from '@angular/core';\n\nlet nextUniqueId = 0;\n\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 */\nexport const MAT_ERROR = new InjectionToken<MatError>('MatError');\n\n/** Single error message to be shown underneath the form-field. */\n@Directive({\n selector: 'mat-error, [matError]',\n host: {\n 'class': 'mat-mdc-form-field-error mat-mdc-form-field-bottom-align',\n 'aria-atomic': 'true',\n '[id]': 'id',\n },\n providers: [{provide: MAT_ERROR, useExisting: MatError}],\n})\nexport class MatError {\n @Input() id: string = `mat-mdc-error-${nextUniqueId++}`;\n\n constructor(@Attribute('aria-live') ariaLive: string, elementRef: ElementRef) {\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}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {Directive, Input} from '@angular/core';\n\nlet nextUniqueId = 0;\n\n/** Hint text to be shown underneath the form field control. */\n@Directive({\n selector: 'mat-hint',\n host: {\n 'class': 'mat-mdc-form-field-hint mat-mdc-form-field-bottom-align',\n '[class.mat-mdc-form-field-hint-end]': 'align === \"end\"',\n '[id]': 'id',\n // Remove align attribute to prevent it from interfering with layout.\n '[attr.align]': 'null',\n },\n})\nexport class MatHint {\n /** Whether to align the hint label at the start or end of the line. */\n @Input() align: 'start' | 'end' = 'start';\n\n /** Unique ID for the hint. Used for the aria-describedby on the form field control. */\n @Input() id: string = `mat-mdc-hint-${nextUniqueId++}`;\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {Directive, ElementRef, InjectionToken} from '@angular/core';\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 */\nexport const MAT_PREFIX = new InjectionToken<MatPrefix>('MatPrefix');\n\n/** Prefix to be placed in front of the form field. */\n@Directive({\n selector: '[matPrefix], [matIconPrefix], [matTextPrefix]',\n providers: [{provide: MAT_PREFIX, useExisting: MatPrefix}],\n})\nexport class MatPrefix {\n _isText = false;\n\n constructor(elementRef: ElementRef) {\n this._isText = elementRef.nativeElement.hasAttribute('matTextPrefix');\n }\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {Directive, ElementRef, InjectionToken} from '@angular/core';\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 */\nexport const MAT_SUFFIX = new InjectionToken<MatSuffix>('MatSuffix');\n\n/** Suffix to be placed at the end of the form field. */\n@Directive({\n selector: '[matSuffix], [matIconSuffix], [matTextSuffix]',\n providers: [{provide: MAT_SUFFIX, useExisting: MatSuffix}],\n})\nexport class MatSuffix {\n _isText = false;\n\n constructor(elementRef: ElementRef) {\n this._isText = elementRef.nativeElement.hasAttribute('matTextSuffix');\n }\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {Directive, ElementRef, Input} from '@angular/core';\n\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 */\n@Directive({\n selector: 'label[matFormFieldFloatingLabel]',\n host: {\n 'class': 'mdc-floating-label mat-mdc-floating-label',\n '[class.mdc-floating-label--float-above]': 'floating',\n },\n})\nexport class MatFormFieldFloatingLabel {\n /** Whether the label is floating. */\n @Input() floating: boolean = false;\n\n constructor(private _elementRef: ElementRef<HTMLElement>) {}\n\n /** Gets the width of the label. Used for the outline notch. */\n getWidth(): number {\n return estimateScrollWidth(this._elementRef.nativeElement);\n }\n\n /** Gets the HTML element for the floating label. */\n get element(): HTMLElement {\n return this._elementRef.nativeElement;\n }\n}\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: HTMLElement): number {\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 as HTMLElement;\n if (htmlEl.offsetParent !== null) {\n return htmlEl.scrollWidth;\n }\n\n const clone = htmlEl.cloneNode(true) as HTMLElement;\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 * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {Directive, ElementRef, NgZone, OnDestroy} from '@angular/core';\n\n/** Class added when the line ripple is active. */\nconst ACTIVATE_CLASS = 'mdc-line-ripple--active';\n\n/** Class added when the line ripple is being deactivated. */\nconst DEACTIVATING_CLASS = 'mdc-line-ripple--deactivating';\n\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 */\n@Directive({\n selector: 'div[matFormFieldLineRipple]',\n host: {\n 'class': 'mdc-line-ripple',\n },\n})\nexport class MatFormFieldLineRipple implements OnDestroy {\n constructor(private _elementRef: ElementRef<HTMLElement>, ngZone: NgZone) {\n ngZone.runOutsideAngular(() => {\n _elementRef.nativeElement.addEventListener('transitionend', this._handleTransitionEnd);\n });\n }\n\n activate() {\n const classList = this._elementRef.nativeElement.classList;\n classList.remove(DEACTIVATING_CLASS);\n classList.add(ACTIVATE_CLASS);\n }\n\n deactivate() {\n this._elementRef.nativeElement.classList.add(DEACTIVATING_CLASS);\n }\n\n private _handleTransitionEnd = (event: TransitionEvent) => {\n const classList = this._elementRef.nativeElement.classList;\n const isDeactivating = classList.contains(DEACTIVATING_CLASS);\n\n if (event.propertyName === 'opacity' && isDeactivating) {\n classList.remove(ACTIVATE_CLASS, DEACTIVATING_CLASS);\n }\n };\n\n ngOnDestroy() {\n this._elementRef.nativeElement.removeEventListener('transitionend', this._handleTransitionEnd);\n }\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {\n AfterViewInit,\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n Input,\n NgZone,\n ViewEncapsulation,\n} from '@angular/core';\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 */\n@Component({\n selector: 'div[matFormFieldNotchedOutline]',\n templateUrl: './notched-outline.html',\n host: {\n 'class': 'mdc-notched-outline',\n // Besides updating the notch state through the MDC component, we toggle this class through\n // a host binding in order to ensure that the notched-outline renders correctly on the server.\n '[class.mdc-notched-outline--notched]': 'open',\n },\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n})\nexport class MatFormFieldNotchedOutline implements AfterViewInit {\n /** Width of the label (original scale) */\n @Input('matFormFieldNotchedOutlineLabelWidth') labelWidth: number = 0;\n\n /** Whether the notch should be opened. */\n @Input('matFormFieldNotchedOutlineOpen') open: boolean = false;\n\n constructor(private _elementRef: ElementRef<HTMLElement>, private _ngZone: NgZone) {}\n\n ngAfterViewInit(): void {\n const label = this._elementRef.nativeElement.querySelector<HTMLElement>('.mdc-floating-label');\n if (label) {\n this._elementRef.nativeElement.classList.add('mdc-notched-outline--upgraded');\n\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\n _getNotchWidth() {\n if (this.open) {\n const NOTCH_ELEMENT_PADDING = 8;\n const NOTCH_ELEMENT_BORDER = 1;\n return this.labelWidth > 0\n ? `calc(${this.labelWidth}px * var(--mat-mdc-form-field-floating-label-scale, 0.75) + ${\n NOTCH_ELEMENT_PADDING + NOTCH_ELEMENT_BORDER\n }px)`\n : '0px';\n }\n\n return null;\n }\n}\n","<div class=\"mdc-notched-outline__leading\"></div>\n<div class=\"mdc-notched-outline__notch\" [style.width]=\"_getNotchWidth()\">\n <ng-content></ng-content>\n</div>\n<div class=\"mdc-notched-outline__trailing\"></div>\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nimport {\n animate,\n state,\n style,\n transition,\n trigger,\n AnimationTriggerMetadata,\n} from '@angular/animations';\n\n/**\n * Animations used by the MatFormField.\n * @docs-private\n */\nexport const matFormFieldAnimations: {\n readonly transitionMessages: AnimationTriggerMetadata;\n} = {\n /** Animation that transitions the form field's error and hint messages. */\n transitionMessages: trigger('transitionMessages', [\n // TODO(mmalerba): Use angular animations for label animation as well.\n state('enter', style({opacity: 1, transform: 'translateY(0%)'})),\n transition('void => enter', [\n style({opacity: 0, transform: 'translateY(-5px)'}),\n animate('300ms cubic-bezier(0.55, 0, 0.55, 0.2)'),\n ]),\n ]),\n};\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {Observable} from 'rxjs';\nimport {AbstractControlDirective, NgControl} from '@angular/forms';\nimport {Directive} from '@angular/core';\n\n/** An interface which allows a control to work inside of a `MatFormField`. */\n@Directive()\nexport abstract class MatFormFieldControl<T> {\n /** The value of the control. */\n value: T | null;\n\n /**\n * Stream that emits whenever the state of the control changes such that the parent `MatFormField`\n * needs to run change detection.\n */\n readonly stateChanges: Observable<void>;\n\n /** The element ID for this control. */\n readonly id: string;\n\n /** The placeholder for this control. */\n readonly placeholder: string;\n\n /** Gets the AbstractControlDirective for this control. */\n readonly ngControl: NgControl | AbstractControlDirective | null;\n\n /** Whether the control is focused. */\n readonly focused: boolean;\n\n /** Whether the control is empty. */\n readonly empty: boolean;\n\n /** Whether the `MatFormField` label should try to float. */\n readonly shouldLabelFloat: boolean;\n\n /** Whether the control is required. */\n readonly required: boolean;\n\n /** Whether the control is disabled. */\n readonly disabled: boolean;\n\n /** Whether the control is in an error state. */\n readonly errorState: boolean;\n\n /**\n * An optional name for the control type that can be used to distinguish `mat-form-field` elements\n * based on their control type. The form field will add a class,\n * `mat-form-field-type-{{controlType}}` to its root element.\n */\n readonly controlType?: string;\n\n /**\n * Whether the input is currently in an autofilled state. If property is not present on the\n * control it is assumed to be false.\n */\n readonly autofilled?: boolean;\n\n /**\n * Value of `aria-describedby` that should be merged with the described-by ids\n * which are set by the form-field.\n */\n readonly userAriaDescribedBy?: string;\n\n /** Sets the list of element IDs that currently describe this control. */\n abstract setDescribedByIds(ids: string[]): void;\n\n /** Handles a click on the control's container. */\n abstract onContainerClick(event: MouseEvent): void;\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\n/** @docs-private */\nexport function getMatFormFieldPlaceholderConflictError(): Error {\n return Error('Placeholder attribute and child element were both specified.');\n}\n\n/** @docs-private */\nexport function getMatFormFieldDuplicatedHintError(align: string): Error {\n return Error(`A hint was already declared for 'align=\"${align}\"'.`);\n}\n\n/** @docs-private */\nexport function getMatFormFieldMissingControlError(): Error {\n return Error('mat-form-field must contain a MatFormFieldControl.');\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nimport {Directionality} from '@angular/cdk/bidi';\nimport {Platform} from '@angular/cdk/platform';\nimport {\n AfterContentChecked,\n AfterContentInit,\n AfterViewInit,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ContentChild,\n ContentChildren,\n ElementRef,\n Inject,\n InjectionToken,\n Input,\n NgZone,\n OnDestroy,\n Optional,\n QueryList,\n ViewChild,\n ViewEncapsulation,\n} from '@angular/core';\nimport {AbstractControlDirective} from '@angular/forms';\nimport {ThemePalette} from '@angular/material/core';\nimport {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';\nimport {merge, Subject} from 'rxjs';\nimport {takeUntil} from 'rxjs/operators';\nimport {MAT_ERROR, MatError} from './directives/error';\nimport {MatFormFieldFloatingLabel} from './directives/floating-label';\nimport {MatHint} from './directives/hint';\nimport {MatLabel} from './directives/label';\nimport {MatFormFieldLineRipple} from './directives/line-ripple';\nimport {MatFormFieldNotchedOutline} from './directives/notched-outline';\nimport {MAT_PREFIX, MatPrefix} from './directives/prefix';\nimport {MAT_SUFFIX, MatSuffix} from './directives/suffix';\nimport {DOCUMENT} from '@angular/common';\nimport {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';\nimport {matFormFieldAnimations} from './form-field-animations';\nimport {MatFormFieldControl} from './form-field-control';\nimport {\n getMatFormFieldDuplicatedHintError,\n getMatFormFieldMissingControlError,\n} from './form-field-errors';\n\n/** Type for the available floatLabel values. */\nexport type FloatLabelType = 'always' | 'auto';\n\n/** Possible appearance styles for the form field. */\nexport type MatFormFieldAppearance = 'fill' | 'outline';\n\n/** Behaviors for how the subscript height is set. */\nexport type SubscriptSizing = 'fixed' | 'dynamic';\n\n/**\n * Represents the default options for the form field that can be configured\n * using the `MAT_FORM_FIELD_DEFAULT_OPTIONS` injection token.\n */\nexport interface MatFormFieldDefaultOptions {\n /** Default form field appearance style. */\n appearance?: MatFormFieldAppearance;\n /** Default color of the form field. */\n color?: ThemePalette;\n /** Whether the required marker should be hidden by default. */\n hideRequiredMarker?: boolean;\n /**\n * Whether the label for form fields should by default float `always`,\n * `never`, or `auto` (only when necessary).\n */\n floatLabel?: FloatLabelType;\n /** Whether the form field should reserve space for one line by default. */\n subscriptSizing?: SubscriptSizing;\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 */\nexport const MAT_FORM_FIELD = new InjectionToken<MatFormField>('MatFormField');\n\n/**\n * Injection token that can be used to configure the\n * default options for all form field within an app.\n */\nexport const MAT_FORM_FIELD_DEFAULT_OPTIONS = new InjectionToken<MatFormFieldDefaultOptions>(\n 'MAT_FORM_FIELD_DEFAULT_OPTIONS',\n);\n\nlet nextUniqueId = 0;\n\n/** Default appearance used by the form field. */\nconst DEFAULT_APPEARANCE: MatFormFieldAppearance = 'fill';\n\n/**\n * Whether the label for form fields should by default float `always`,\n * `never`, or `auto`.\n */\nconst DEFAULT_FLOAT_LABEL: FloatLabelType = 'auto';\n\n/** Default way that the subscript element height is set. */\nconst DEFAULT_SUBSCRIPT_SIZING: SubscriptSizing = 'fixed';\n\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\n/** Container for form controls that applies Material Design styling and behavior. */\n@Component({\n selector: 'mat-form-field',\n exportAs: 'matFormField',\n templateUrl: './form-field.html',\n styleUrls: ['./form-field.css'],\n animations: [matFormFieldAnimations.transitionMessages],\n host: {\n 'class': 'mat-mdc-form-field',\n '[class.mat-mdc-form-field-label-always-float]': '_shouldAlwaysFloat()',\n '[class.mat-mdc-form-field-has-icon-prefix]': '_hasIconPrefix',\n '[class.mat-mdc-form-field-has-icon-suffix]': '_hasIconSuffix',\n\n // Note that these classes reuse the same names as the non-MDC version, because they can be\n // considered a public API since custom form controls may use them to style themselves.\n // See https://github.com/angular/components/pull/20502#discussion_r486124901.\n '[class.mat-form-field-invalid]': '_control.errorState',\n '[class.mat-form-field-disabled]': '_control.disabled',\n '[class.mat-form-field-autofilled]': '_control.autofilled',\n '[class.mat-form-field-no-animations]': '_animationMode === \"NoopAnimations\"',\n '[class.mat-form-field-appearance-fill]': 'appearance == \"fill\"',\n '[class.mat-form-field-appearance-outline]': 'appearance == \"outline\"',\n '[class.mat-form-field-hide-placeholder]': '_hasFloatingLabel() && !_shouldLabelFloat()',\n '[class.mat-focused]': '_control.focused',\n '[class.mat-primary]': 'color !== \"accent\" && color !== \"warn\"',\n '[class.mat-accent]': 'color === \"accent\"',\n '[class.mat-warn]': 'color === \"warn\"',\n '[class.ng-untouched]': '_shouldForward(\"untouched\")',\n '[class.ng-touched]': '_shouldForward(\"touched\")',\n '[class.ng-pristine]': '_shouldForward(\"pristine\")',\n '[class.ng-dirty]': '_shouldForward(\"dirty\")',\n '[class.ng-valid]': '_shouldForward(\"valid\")',\n '[class.ng-invalid]': '_shouldForward(\"invalid\")',\n '[class.ng-pending]': '_shouldForward(\"pending\")',\n },\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [{provide: MAT_FORM_FIELD, useExisting: MatFormField}],\n})\nexport class MatFormField\n implements AfterContentInit, AfterContentChecked, AfterViewInit, OnDestroy\n{\n @ViewChild('textField') _textField: ElementRef<HTMLElement>;\n @ViewChild('iconPrefixContainer') _iconPrefixContainer: ElementRef<HTMLElement>;\n @ViewChild('textPrefixContainer') _textPrefixContainer: ElementRef<HTMLElement>;\n @ViewChild(MatFormFieldFloatingLabel) _floatingLabel: MatFormFieldFloatingLabel | undefined;\n @ViewChild(MatFormFieldNotchedOutline) _notchedOutline: MatFormFieldNotchedOutline | undefined;\n @ViewChild(MatFormFieldLineRipple) _lineRipple: MatFormFieldLineRipple | undefined;\n\n @ContentChild(MatLabel) _labelChildNonStatic: MatLabel | undefined;\n @ContentChild(MatLabel, {static: true}) _labelChildStatic: MatLabel | undefined;\n @ContentChild(MatFormFieldControl) _formFieldControl: MatFormFieldControl<any>;\n @ContentChildren(MAT_PREFIX, {descendants: true}) _prefixChildren: QueryList<MatPrefix>;\n @ContentChildren(MAT_SUFFIX, {descendants: true}) _suffixChildren: QueryList<MatSuffix>;\n @ContentChildren(MAT_ERROR, {descendants: true}) _errorChildren: QueryList<MatError>;\n @ContentChildren(MatHint, {descendants: true}) _hintChildren: QueryList<MatHint>;\n\n /** Whether the required marker should be hidden. */\n @Input()\n get hideRequiredMarker(): boolean {\n return this._hideRequiredMarker;\n }\n set hideRequiredMarker(value: BooleanInput) {\n this._hideRequiredMarker = coerceBooleanProperty(value);\n }\n private _hideRequiredMarker = false;\n\n /** The color palette for the form field. */\n @Input() color: ThemePalette = 'primary';\n\n /** Whether the label should always float or float as the user types. */\n @Input()\n get floatLabel(): FloatLabelType {\n return this._floatLabel || this._defaults?.floatLabel || DEFAULT_FLOAT_LABEL;\n }\n set floatLabel(value: FloatLabelType) {\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 private _floatLabel: FloatLabelType;\n\n /** The form field appearance style. */\n @Input()\n get appearance(): MatFormFieldAppearance {\n return this._appearance;\n }\n set appearance(value: MatFormFieldAppearance) {\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(\n `MatFormField: Invalid appearance \"${newAppearance}\", valid values are \"fill\" or \"outline\".`,\n );\n }\n }\n this._appearance = newAppearance;\n if (this._appearance === 'outline' && this._appearance !== oldValue) {\n this._refreshOutlineNotchWidth();\n\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._needsOutlineLabelOffsetUpdateOnStable = true;\n }\n }\n private _appearance: MatFormFieldAppearance = DEFAULT_APPEARANCE;\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 @Input()\n get subscriptSizing(): SubscriptSizing {\n return this._subscriptSizing || this._defaults?.subscriptSizing || DEFAULT_SUBSCRIPT_SIZING;\n }\n set subscriptSizing(value: SubscriptSizing) {\n this._subscriptSizing = value || this._defaults?.subscriptSizing || DEFAULT_SUBSCRIPT_SIZING;\n }\n private _subscriptSizing: SubscriptSizing | null = null;\n\n /** Text for the form field hint. */\n @Input()\n get hintLabel(): string {\n return this._hintLabel;\n }\n set hintLabel(value: string) {\n this._hintLabel = value;\n this._processHints();\n }\n private _hintLabel = '';\n\n _hasIconPrefix = false;\n _hasTextPrefix = false;\n _hasIconSuffix = false;\n _hasTextSuffix = false;\n\n // Unique id for the internal form field label.\n readonly _labelId = `mat-mdc-form-field-label-${nextUniqueId++}`;\n\n // Unique id for the hint label.\n readonly _hintLabelId = `mat-mdc-hint-${nextUniqueId++}`;\n\n /** State of the mat-hint and mat-error animations. */\n _subscriptAnimationState = '';\n\n /** Width of the label element (at scale=1). */\n _labelWidth = 0;\n\n /** Gets the current form field control */\n get _control(): MatFormFieldControl<any> {\n return this._explicitFormFieldControl || this._formFieldControl;\n }\n set _control(value) {\n this._explicitFormFieldControl = value;\n }\n\n private _destroyed = new Subject<void>();\n private _isFocused: boolean | null = null;\n private _explicitFormFieldControl: MatFormFieldControl<any>;\n private _needsOutlineLabelOffsetUpdateOnStable = false;\n\n constructor(\n public _elementRef: ElementRef,\n private _changeDetectorRef: ChangeDetectorRef,\n private _ngZone: NgZone,\n private _dir: Directionality,\n private _platform: Platform,\n @Optional()\n @Inject(MAT_FORM_FIELD_DEFAULT_OPTIONS)\n private _defaults?: MatFormFieldDefaultOptions,\n @Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string,\n @Inject(DOCUMENT) private _document?: any,\n ) {\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\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 // Initial notch width update. This is needed in case the text-field label floats\n // on initialization, and renders inside of the notched outline.\n this._refreshOutlineNotchWidth();\n // Make sure fonts are loaded before calculating the width.\n // zone.js currently doesn't patch the FontFaceSet API so two calls to\n // _refreshOutlineNotchWidth is needed for this to work properly in async tests.\n // Furthermore if the font takes a long time to load we want the outline notch to be close\n // to the correct width from the start then correct itself when the fonts load.\n if (this._document?.fonts?.ready) {\n this._document.fonts.ready.then(() => {\n this._refreshOutlineNotchWidth();\n this._changeDetectorRef.markForCheck();\n });\n } else {\n // FontFaceSet is not supported in IE\n setTimeout(() => this._refreshOutlineNotchWidth(), 100);\n }\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\n ngAfterContentInit() {\n this._assertFormFieldControl();\n this._initializeControl();\n this._initializeSubscript();\n this._initializePrefixAndSuffix();\n this._initializeOutlineLabelOffsetSubscriptions();\n }\n\n ngAfterContentChecked() {\n this._assertFormFieldControl();\n }\n\n ngOnDestroy() {\n this._destroyed.next();\n this._destroyed.complete();\n }\n\n /**\n * Gets the id of the label element. If no label is present, returns `null`.\n */\n getLabelId(): string | null {\n return this._hasFloatingLabel() ? this._labelId : null;\n }\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(): ElementRef {\n return this._textField || this._elementRef;\n }\n\n /** Animates the placeholder up and locks it in position. */\n _animateAndLockLabel(): void {\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\n /** Initializes the registered form field control. */\n private _initializeControl() {\n const control = this._control;\n\n if (control.controlType) {\n this._elementRef.nativeElement.classList.add(\n `mat-mdc-form-field-type-${control.controlType}`,\n );\n }\n\n // Subscribe to changes in the child control state in order to update the form field UI.\n control.stateChanges.subscribe(() => {\n this._updateFocusState();\n this._syncDescribedByIds();\n this._changeDetectorRef.markForCheck();\n });\n\n // Run change detection if the value changes.\n if (control.ngControl && control.ngControl.valueChanges) {\n control.ngControl.valueChanges\n .pipe(takeUntil(this._destroyed))\n .subscribe(() => this._changeDetectorRef.markForCheck());\n }\n }\n\n private _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\n /** Initializes the prefix and suffix containers. */\n private _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 /**\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 private _initializeSubscript() {\n // Re-validate when the number of hints changes.\n this._hintChildren.changes.subscribe(() => {\n this._processHints();\n this._changeDetectorRef.markForCheck();\n });\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\n // Initial mat-hint validation and subscript describedByIds sync.\n this._validateHints();\n this._syncDescribedByIds();\n }\n\n /** Throws an error if the form field's control is missing. */\n private _assertFormFieldControl() {\n if (!this._control && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n throw getMatFormFieldMissingControlError();\n }\n }\n\n private _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\n this._textField?.nativeElement.classList.toggle(\n 'mdc-text-field--focused',\n this._control.focused,\n );\n }\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. In general, we want to avoid performing measurements often,\n * so we rely on the `NgZone` as indicator when the offset should be recalculated, instead of\n * checking every change detection cycle.\n */\n private _initializeOutlineLabelOffsetSubscriptions() {\n // Whenever the prefix changes, schedule an update of the label offset.\n this._prefixChildren.changes.subscribe(\n () => (this._needsOutlineLabelOffsetUpdateOnStable = true),\n );\n\n // Note that we have to run outside of the `NgZone` explicitly, in order to avoid\n // throwing users into an infinite loop if `zone-patch-rxjs` is included.\n this._ngZone.runOutsideAngular(() => {\n this._ngZone.onStable.pipe(takeUntil(this._destroyed)).subscribe(() => {\n if (this._needsOutlineLabelOffsetUpdateOnStable) {\n this._needsOutlineLabelOffsetUpdateOnStable = false;\n this._updateOutlineLabelOffset();\n }\n });\n });\n\n this._dir.change\n .pipe(takeUntil(this._destroyed))\n .subscribe(() => (this._needsOutlineLabelOffsetUpdateOnStable = true));\n }\n\n /** Whether the floating label should always float or not. */\n _shouldAlwaysFloat() {\n return this.floatLabel === 'always';\n }\n\n _hasOutline() {\n return this.appearance === 'outline';\n }\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\n _hasFloatingLabel() {\n return !!this._labelChildNonStatic || !!this._labelChildStatic;\n }\n\n _shouldLabelFloat() {\n return this._control.shouldLabelFloat || this._shouldAlwaysFloat();\n }\n\n /**\n * Determines whether a class from the AbstractControlDirective\n * should be forwarded to the host element.\n */\n _shouldForward(prop: keyof AbstractControlDirective): boolean {\n const control = this._control ? this._control.ngControl : null;\n return control && control[prop];\n }\n\n /** Determines whether to display hints or errors. */\n _getDisplayedMessages(): 'error' | 'hint' {\n return this._errorChildren && this._errorChildren.length > 0 && this._control.errorState\n ? 'error'\n : 'hint';\n }\n\n /** Refreshes the width of the outline-notch, if present. */\n _refreshOutlineNotchWidth() {\n if (!this._hasOutline() || !this._floatingLabel) {\n return;\n }\n this._labelWidth = this._floatingLabel.getWidth();\n }\n\n /** Does any extra processing that is required when handling the hints. */\n private _processHints() {\n this._validateHints();\n this._syncDescribedByIds();\n }\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 private _validateHints() {\n if (this._hintChildren && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n let startHint: MatHint;\n let endHint: MatHint;\n this._hintChildren.forEach((hint: MatHint) => {\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 /**\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 private _syncDescribedByIds() {\n if (this._control) {\n let ids: string[] = [];\n\n // TODO(wagnermaciel): Remove the type check when we find the root cause of this bug.\n if (\n this._control.userAriaDescribedBy &&\n typeof this._control.userAriaDescribedBy === 'string'\n ) {\n ids.push(...this._control.userAriaDescribedBy.split(' '));\n }\n\n if (this._getDisplayedMessages() === 'hint') {\n const startHint = this._hintChildren\n ? this._hintChildren.find(hint => hint.align === 'start')\n : null;\n const endHint = this._hintChildren\n ? this._hintChildren.find(hint => hint.align === 'end')\n : null;\n\n if (startHint) {\n ids.push(startHint.id);\n } else if (this._hintLabel) {\n ids.push(this._hintLabelId);\n }\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\n this._control.setDescribedByIds(ids);\n }\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 private _updateOutlineLabelOffset() {\n if (!this._platform.isBrowser || !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._needsOutlineLabelOffsetUpdateOnStable = true;\n return;\n }\n const iconPrefixContainer = this._iconPrefixContainer?.nativeElement;\n const textPrefixContainer = this._textPrefixContainer?.nativeElement;\n const iconPrefixContainerWidth = iconPrefixContainer?.getBoundingClientRect().width ?? 0;\n const textPrefixContainerWidth = textPrefixContainer?.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\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 }\n\n /** Checks whether the form field is attached to the DOM. */\n private _isAttachedToDom(): boolean {\n const element: HTMLElement = 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}\n","<ng-template #labelTemplate>\n \n <label matFormFieldFloatingLabel\n [floating]=\"_shouldLabelFloat()\"\n *ngIf=\"_hasFloatingLabel()\"\n (cdkObserveContent)=\"_refreshOutlineNotchWidth()\"\n [cdkObserveContentDisabled]=\"!_hasOutline()\"\n [id]=\"_labelId\"\n [attr.for]=\"_control.id\"\n [attr.aria-owns]=\"_control.id\">\n <ng-content select=\"mat-label\"></ng-content>\n \n <span\n *ngIf=\"!hideRequiredMarker && _control.required\"\n aria-hidden=\"true\"\n class=\"mat-mdc-form-field-required-marker mdc-floating-label--required\"></span>\n </label>\n</ng-template>\n\n<div class=\"mat-mdc-text-field-wrapper mdc-text-field\" #textField\n [class.mdc-text-field--filled]=\"!_hasOutline()\"\n [class.mdc-text-field--outlined]=\"_hasOutline()\"\n [class.mdc-text-field--no-label]=\"!_hasFloatingLabel()\"\n [class.mdc-text-field--disabled]=\"_control.disabled\"\n [class.mdc-text-field--invalid]=\"_control.errorState\"\n (click)=\"_control.onContainerClick && _control.onContainerClick($event)\">\n <div class=\"mat-mdc-form-field-focus-overlay\" *ngIf=\"!_hasOutline() && !_control.disabled\"></div>\n <div class=\"mat-mdc-form-field-flex\">\n <div *ngIf=\"_hasOutline()\" matFormFieldNotchedOutline\n [matFormFieldNotchedOutlineOpen]=\"_shouldLabelFloat()\"\n [matFormFieldNotchedOutlineLabelWidth]=\"_labelWidth\">\n <ng-template [ngIf]=\"!_forceDisplayInfixLabel()\">\n <ng-template [ngTemplateOutlet]=\"labelTemplate\"></ng-template>\n </ng-template>\n </div>\n\n <div class=\"mat-mdc-form-field-icon-prefix\" *ngIf=\"_hasIconPrefix\" #iconPrefixContainer>\n <ng-content select=\"[matPrefix], [matIconPrefix]\"></ng-content>\n </div>\n <div class=\"mat-mdc-form-field-text-prefix\" *ngIf=\"_hasTextPrefix\" #textPrefixContainer>\n <ng-content select=\"[matTextPrefix]\"></ng-content>\n </div>\n\n <div class=\"mat-mdc-form-field-infix\">\n <ng-template [ngIf]=\"!_hasOutline() || _forceDisplayInfixLabel()\">\n <ng-template [ngTemplateOutlet]=\"labelTemplate\"></ng-template>\n </ng-template>\n\n <ng-content></ng-content>\n </div>\n\n <div class=\"mat-mdc-form-field-text-suffix\" *ngIf=\"_hasTextSuffix\">\n <ng-content select=\"[matTextSuffix]\"></ng-content>\n </div>\n <div class=\"mat-mdc-form-field-icon-suffix\" *ngIf=\"_hasIconSuffix\">\n <ng-content select=\"[matSuffix], [matIconSuffix]\"></ng-content>\n </div>\n