@angular/material/fesm2022/form-field-0a6b3078.mjs.map

Angular Material

{"version":3,"file":"form-field-0a6b3078.mjs","sources":["../../../../../k8-fastbuild-ST-46c76129e412/bin/src/material/form-field/directives/label.ts","../../../../../k8-fastbuild-ST-46c76129e412/bin/src/material/form-field/directives/error.ts","../../../../../k8-fastbuild-ST-46c76129e412/bin/src/material/form-field/directives/hint.ts","../../../../../k8-fastbuild-ST-46c76129e412/bin/src/material/form-field/directives/prefix.ts","../../../../../k8-fastbuild-ST-46c76129e412/bin/src/material/form-field/directives/suffix.ts","../../../../../k8-fastbuild-ST-46c76129e412/bin/src/material/form-field/directives/floating-label.ts","../../../../../k8-fastbuild-ST-46c76129e412/bin/src/material/form-field/directives/line-ripple.ts","../../../../../k8-fastbuild-ST-46c76129e412/bin/src/material/form-field/directives/notched-outline.ts","../../../../../k8-fastbuild-ST-46c76129e412/bin/src/material/form-field/directives/notched-outline.html","../../../../../k8-fastbuild-ST-46c76129e412/bin/src/material/form-field/form-field-control.ts","../../../../../k8-fastbuild-ST-46c76129e412/bin/src/material/form-field/form-field-errors.ts","../../../../../k8-fastbuild-ST-46c76129e412/bin/src/material/form-field/form-field.ts","../../../../../k8-fastbuild-ST-46c76129e412/bin/src/material/form-field/form-field.html"],"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.dev/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.dev/license\n */\n\nimport {Directive, InjectionToken, Input, inject} from '@angular/core';\nimport {_IdGenerator} from '@angular/cdk/a11y';\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    '[id]': 'id',\n  },\n  providers: [{provide: MAT_ERROR, useExisting: MatError}],\n})\nexport class MatError {\n  @Input() id: string = inject(_IdGenerator).getId('mat-mdc-error-');\n\n  constructor(...args: unknown[]);\n\n  constructor() {}\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.dev/license\n */\n\nimport {Directive, inject, Input} from '@angular/core';\nimport {_IdGenerator} from '@angular/cdk/a11y';\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 = inject(_IdGenerator).getId('mat-mdc-hint-');\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.dev/license\n */\n\nimport {Directive, InjectionToken, Input} 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  @Input('matTextPrefix')\n  set _isTextSelector(value: '') {\n    this._isText = true;\n  }\n\n  _isText = false;\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.dev/license\n */\n\nimport {Directive, InjectionToken, Input} 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  @Input('matTextSuffix')\n  set _isTextSelector(value: '') {\n    this._isText = true;\n  }\n\n  _isText = false;\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.dev/license\n */\n\nimport {\n  Directive,\n  ElementRef,\n  inject,\n  Input,\n  NgZone,\n  OnDestroy,\n  InjectionToken,\n} from '@angular/core';\nimport {SharedResizeObserver} from '@angular/cdk/observers/private';\nimport {Subscription} from 'rxjs';\n\n/** An interface that the parent form-field should implement to receive resize events. */\nexport interface FloatingLabelParent {\n  _handleLabelResized(): void;\n}\n\n/** An injion token for the parent form-field. */\nexport const FLOATING_LABEL_PARENT = new InjectionToken<FloatingLabelParent>('FloatingLabelParent');\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 implements OnDestroy {\n  private _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n\n  /** Whether the label is floating. */\n  @Input()\n  get floating() {\n    return this._floating;\n  }\n  set floating(value: boolean) {\n    this._floating = value;\n    if (this.monitorResize) {\n      this._handleResize();\n    }\n  }\n  private _floating = false;\n\n  /** Whether to monitor for resize events on the floating label. */\n  @Input()\n  get monitorResize() {\n    return this._monitorResize;\n  }\n  set monitorResize(value: boolean) {\n    this._monitorResize = value;\n    if (this._monitorResize) {\n      this._subscribeToResize();\n    } else {\n      this._resizeSubscription.unsubscribe();\n    }\n  }\n  private _monitorResize = false;\n\n  /** The shared ResizeObserver. */\n  private _resizeObserver = inject(SharedResizeObserver);\n\n  /** The Angular zone. */\n  private _ngZone = inject(NgZone);\n\n  /** The parent form-field. */\n  private _parent = inject(FLOATING_LABEL_PARENT);\n\n  /** The current resize event subscription. */\n  private _resizeSubscription = new Subscription();\n\n  constructor(...args: unknown[]);\n  constructor() {}\n\n  ngOnDestroy() {\n    this._resizeSubscription.unsubscribe();\n  }\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  /** Handles resize events from the ResizeObserver. */\n  private _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\n  /** Subscribes to resize events. */\n  private _subscribeToResize() {\n    this._resizeSubscription.unsubscribe();\n    this._ngZone.runOutsideAngular(() => {\n      this._resizeSubscription = this._resizeObserver\n        .observe(this._elementRef.nativeElement, {box: 'border-box'})\n        .subscribe(() => this._handleResize());\n    });\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.dev/license\n */\n\nimport {Directive, ElementRef, NgZone, OnDestroy, Renderer2, inject} 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  private _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n  private _cleanupTransitionEnd: () => void;\n\n  constructor(...args: unknown[]);\n\n  constructor() {\n    const ngZone = inject(NgZone);\n    const renderer = inject(Renderer2);\n\n    ngZone.runOutsideAngular(() => {\n      this._cleanupTransitionEnd = renderer.listen(\n        this._elementRef.nativeElement,\n        'transitionend',\n        this._handleTransitionEnd,\n      );\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._cleanupTransitionEnd();\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.dev/license\n */\n\nimport {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  Input,\n  NgZone,\n  ViewChild,\n  ViewEncapsulation,\n  inject,\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  private _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n  private _ngZone = inject(NgZone);\n\n  /** Whether the notch should be opened. */\n  @Input('matFormFieldNotchedOutlineOpen') open: boolean = false;\n\n  @ViewChild('notch') _notch: ElementRef;\n\n  constructor(...args: unknown[]);\n  constructor() {}\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  _setNotchWidth(labelWidth: number) {\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) + ${\n        NOTCH_ELEMENT_PADDING + NOTCH_ELEMENT_BORDER\n      }px)`;\n    }\n  }\n}\n","<div class=\"mat-mdc-notch-piece mdc-notched-outline__leading\"></div>\n<div class=\"mat-mdc-notch-piece mdc-notched-outline__notch\" #notch>\n  <ng-content></ng-content>\n</div>\n<div class=\"mat-mdc-notch-piece 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.dev/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  /**\n   * Whether to automatically assign the ID of the form field as the `for` attribute\n   * on the `<label>` inside the form field. Set this to true to prevent the form\n   * field from associating the label with non-native elements.\n   */\n  readonly disableAutomaticLabeling?: boolean;\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.dev/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.dev/license\n */\nimport {Directionality} from '@angular/cdk/bidi';\nimport {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';\nimport {Platform} from '@angular/cdk/platform';\nimport {NgTemplateOutlet} from '@angular/common';\nimport {\n  ANIMATION_MODULE_TYPE,\n  AfterContentChecked,\n  AfterContentInit,\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ContentChild,\n  ContentChildren,\n  ElementRef,\n  InjectionToken,\n  Injector,\n  Input,\n  NgZone,\n  OnDestroy,\n  QueryList,\n  ViewChild,\n  ViewEncapsulation,\n  afterRender,\n  computed,\n  contentChild,\n  inject,\n} from '@angular/core';\nimport {AbstractControlDirective, ValidatorFn} from '@angular/forms';\nimport {ThemePalette} from '../core';\nimport {_IdGenerator} from '@angular/cdk/a11y';\nimport {Subject, Subscription, merge} from 'rxjs';\nimport {map, pairwise, takeUntil, filter, startWith} from 'rxjs/operators';\nimport {MAT_ERROR, MatError} from './directives/error';\nimport {\n  FLOATING_LABEL_PARENT,\n  FloatingLabelParent,\n  MatFormFieldFloatingLabel,\n} 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 {MatFormFieldControl as _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  /**\n   * Default theme color of the form field. This API is supported in M2 themes only, it has no\n   * effect in M3 themes. For color customization in M3, see https://material.angular.io/components/form-field/styling.\n   *\n   * For information on applying color variants in M3, see\n   * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants\n   */\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\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/**\n * Despite `MatFormFieldControl` being an abstract class, most of our usages enforce its shape\n * using `implements` instead of `extends`. This appears to be problematic when Closure compiler\n * is configured to use type information to rename properties, because it can't figure out which\n * class properties are coming from. This interface seems to work around the issue while preserving\n * our type safety (alternative being using `any` everywhere).\n * @docs-private\n */\ninterface MatFormFieldControl<T> extends _MatFormFieldControl<T> {}\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  styleUrl: './form-field.css',\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    // 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-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: [\n    {provide: MAT_FORM_FIELD, useExisting: MatFormField},\n    {provide: FLOATING_LABEL_PARENT, useExisting: MatFormField},\n  ],\n  imports: [\n    MatFormFieldFloatingLabel,\n    MatFormFieldNotchedOutline,\n    NgTemplateOutlet,\n    MatFormFieldLineRipple,\n    MatHint,\n  ],\n})\nexport class MatFormField\n  implements FloatingLabelParent, AfterContentInit, AfterContentChecked, AfterViewInit, OnDestroy\n{\n  _elementRef = inject(ElementRef);\n  private _changeDetectorRef = inject(ChangeDetectorRef);\n  private _dir = inject(Directionality);\n  private _platform = inject(Platform);\n  private _idGenerator = inject(_IdGenerator);\n  private _ngZone = inject(NgZone);\n  private _injector = inject(Injector);\n  private _defaults = inject<MatFormFieldDefaultOptions>(MAT_FORM_FIELD_DEFAULT_OPTIONS, {\n    optional: true,\n  });\n\n  @ViewChild('textField') _textField: ElementRef<HTMLElement>;\n  @ViewChild('iconPrefixContainer') _iconPrefixContainer: ElementRef<HTMLElement>;\n  @ViewChild('textPrefixContainer') _textPrefixContainer: ElementRef<HTMLElement>;\n  @ViewChild('iconSuffixContainer') _iconSuffixContainer: ElementRef<HTMLElement>;\n  @ViewChild('textSuffixContainer') _textSuffixContainer: ElementRef<HTMLElement>;\n  @ViewChild(MatFormFieldFloatingLabel) _floatingLabel: MatFormFieldFloatingLabel | undefined;\n  @ViewChild(MatFormFieldNotchedOutline) _notchedOutline: MatFormFieldNotchedOutline | undefined;\n  @ViewChild(MatFormFieldLineRipple) _lineRipple: MatFormFieldLineRipple | undefined;\n\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  private readonly _labelChild = contentChild(MatLabel);\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  /**\n   * Theme color of the form field. This API is supported in M2 themes only, it\n   * has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/form-field/styling.\n   *\n   * For information on applying color variants in M3, see\n   * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants\n   */\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      // 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  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 = this._idGenerator.getId('mat-mdc-form-field-label-');\n\n  // Unique id for the hint label.\n  readonly _hintLabelId = this._idGenerator.getId('mat-mdc-hint-');\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 _needsOutlineLabelOffsetUpdate = false;\n  private _previousControl: MatFormFieldControl<unknown> | null = null;\n  private _previousControlValidatorFn: ValidatorFn | null = null;\n  private _stateChanges: Subscription | undefined;\n  private _valueChanges: Subscription | undefined;\n  private _describedByChanges: Subscription | undefined;\n  protected readonly _animationsDisabled: boolean;\n\n  constructor(...args: unknown[]);\n\n  constructor() {\n    const defaults = this._defaults;\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    this._animationsDisabled = inject(ANIMATION_MODULE_TYPE, {optional: true}) === 'NoopAnimations';\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\n    if (!this._animationsDisabled) {\n      this._ngZone.runOutsideAngular(() => {\n        // Enable animations after a certain amount of time so that they don't run on init.\n        setTimeout(() => {\n          this._elementRef.nativeElement.classList.add('mat-form-field-animations-enabled');\n        }, 300);\n      });\n    }\n\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._initializeSubscript();\n    this._initializePrefixAndSuffix();\n    this._initializeOutlineLabelOffsetSubscriptions();\n  }\n\n  ngAfterContentChecked() {\n    this._assertFormFieldControl();\n\n    // if form field was being used with an input in first place and then replaced by other\n    // component such as select.\n    if (this._control !== this._previousControl) {\n      this._initializeControl(this._previousControl);\n\n      // keep a reference for last validator we had.\n      if (this._control.ngControl && this._control.ngControl.control) {\n        this._previousControlValidatorFn = this._control.ngControl.control.validator;\n      }\n\n      this._previousControl = this._control;\n    }\n\n    // make sure the the control has been initialized.\n    if (this._control.ngControl && this._control.ngControl.control) {\n      // get the validators for current control.\n      const validatorFn = this._control.ngControl.control.validator;\n\n      // if our current validatorFn isn't equal to it might be we are CD behind, marking the\n      // component will allow us to catch up.\n      if (validatorFn !== this._previousControlValidatorFn) {\n        this._changeDetectorRef.markForCheck();\n      }\n    }\n  }\n\n  ngOnDestroy() {\n    this._stateChanges?.unsubscribe();\n    this._valueChanges?.unsubscribe();\n    this._describedByChanges?.unsubscribe();\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 = computed(() => (this._hasFloatingLabel() ? this._labelId : null));\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(previousControl: MatFormFieldControl<unknown> | null) {\n    const control = this._control;\n    const classPrefix = 'mat-mdc-form-field-type-';\n\n    if (previousControl) {\n      this._elementRef.nativeElement.classList.remove(classPrefix + previousControl.controlType);\n    }\n\n    if (control.controlType) {\n      this._elementRef.nativeElement.classList.add(classPrefix + control.controlType);\n    }\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._changeDetectorRef.markForCheck();\n    });\n\n    // Updating the `aria-describedby` touches the DOM. Only do it if it actually needs to change.\n    this._describedByChanges?.unsubscribe();\n    this._describedByChanges = control.stateChanges\n      .pipe(\n        startWith([undefined, undefined] as const),\n        map(() => [control.errorState, control.userAriaDescribedBy] as const),\n        pairwise(),\n        filter(([[prevErrorState, prevDescribedBy], [currentErrorState, currentDescribedBy]]) => {\n          return prevErrorState !== currentErrorState || prevDescribedBy !== currentDescribedBy;\n        }),\n      )\n      .subscribe(() => this._syncDescribedByIds());\n\n    this._valueChanges?.unsubscribe();\n\n    // Run change detection if the value changes.\n    if (control.ngControl && control.ngControl.valueChanges) {\n      this._valueChanges = 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.\n   */\n  private _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\n    // TODO(mmalerba): Split this into separate `afterRender` calls using the `EarlyRead` and\n    //  `Write` phases.\n    afterRender(\n      () => {\n        if (this._needsOutlineLabelOffsetUpdate) {\n          this._needsOutlineLabelOffsetUpdate = false;\n          this._updateOutlineLabelOffset();\n        }\n      },\n      {\n        injector: this._injector,\n      },\n    );\n\n    this._dir.change\n      .pipe(takeUntil(this._destroyed))\n      .subscribe(() => (this._needsOutlineLabelOffsetUpdate = 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 = computed(() => !!this._labelChild());\n\n  _shouldLabelFloat(): boolean {\n    if (!this._hasFloatingLabel()) {\n      return false;\n    }\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  /** Gets the type of subscript message to render (error or hint). */\n  _getSubscriptMessageType(): 'error' | 'hint' {\n    return this._errorChildren && this._errorChildren.length > 0 && this._control.errorState\n      ? 'error'\n      : 'hint';\n  }\n\n  /** Handle label resize events. */\n  _handleLabelResized() {\n    this._refreshOutlineNotchWidth();\n  }\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\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._getSubscriptMessageType() === '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._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 textSuffi