@angular/material
Version:
Angular Material
1,161 lines (1,150 loc) • 119 kB
JavaScript
import { _IdGenerator } from '@angular/cdk/a11y';
import { Directionality } from '@angular/cdk/bidi';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { Platform } from '@angular/cdk/platform';
import { NgTemplateOutlet } from '@angular/common';
import * as i0 from '@angular/core';
import { Directive, InjectionToken, inject, Input, ElementRef, NgZone, Renderer2, Component, ChangeDetectionStrategy, ViewEncapsulation, ViewChild, ChangeDetectorRef, viewChild, computed, contentChild, signal, effect, afterRenderEffect, ContentChild, ContentChildren } from '@angular/core';
import { Subscription, Subject, merge } from 'rxjs';
import { startWith, map, pairwise, filter, takeUntil } from 'rxjs/operators';
import { SharedResizeObserver } from '@angular/cdk/observers/private';
import { _animationsDisabled } from './_animation-chunk.mjs';
class MatLabel {
static ɵfac = i0.ɵɵngDeclareFactory({
minVersion: "12.0.0",
version: "21.0.3",
ngImport: i0,
type: MatLabel,
deps: [],
target: i0.ɵɵFactoryTarget.Directive
});
static ɵdir = i0.ɵɵngDeclareDirective({
minVersion: "14.0.0",
version: "21.0.3",
type: MatLabel,
isStandalone: true,
selector: "mat-label",
ngImport: i0
});
}
i0.ɵɵngDeclareClassMetadata({
minVersion: "12.0.0",
version: "21.0.3",
ngImport: i0,
type: MatLabel,
decorators: [{
type: Directive,
args: [{
selector: 'mat-label'
}]
}]
});
const MAT_ERROR = new InjectionToken('MatError');
class MatError {
id = inject(_IdGenerator).getId('mat-mdc-error-');
constructor() {}
static ɵfac = i0.ɵɵngDeclareFactory({
minVersion: "12.0.0",
version: "21.0.3",
ngImport: i0,
type: MatError,
deps: [],
target: i0.ɵɵFactoryTarget.Directive
});
static ɵdir = i0.ɵɵngDeclareDirective({
minVersion: "14.0.0",
version: "21.0.3",
type: MatError,
isStandalone: true,
selector: "mat-error, [matError]",
inputs: {
id: "id"
},
host: {
properties: {
"id": "id"
},
classAttribute: "mat-mdc-form-field-error mat-mdc-form-field-bottom-align"
},
providers: [{
provide: MAT_ERROR,
useExisting: MatError
}],
ngImport: i0
});
}
i0.ɵɵngDeclareClassMetadata({
minVersion: "12.0.0",
version: "21.0.3",
ngImport: i0,
type: MatError,
decorators: [{
type: Directive,
args: [{
selector: 'mat-error, [matError]',
host: {
'class': 'mat-mdc-form-field-error mat-mdc-form-field-bottom-align',
'[id]': 'id'
},
providers: [{
provide: MAT_ERROR,
useExisting: MatError
}]
}]
}],
ctorParameters: () => [],
propDecorators: {
id: [{
type: Input
}]
}
});
class MatHint {
align = 'start';
id = inject(_IdGenerator).getId('mat-mdc-hint-');
static ɵfac = i0.ɵɵngDeclareFactory({
minVersion: "12.0.0",
version: "21.0.3",
ngImport: i0,
type: MatHint,
deps: [],
target: i0.ɵɵFactoryTarget.Directive
});
static ɵdir = i0.ɵɵngDeclareDirective({
minVersion: "14.0.0",
version: "21.0.3",
type: MatHint,
isStandalone: true,
selector: "mat-hint",
inputs: {
align: "align",
id: "id"
},
host: {
properties: {
"class.mat-mdc-form-field-hint-end": "align === \"end\"",
"id": "id",
"attr.align": "null"
},
classAttribute: "mat-mdc-form-field-hint mat-mdc-form-field-bottom-align"
},
ngImport: i0
});
}
i0.ɵɵngDeclareClassMetadata({
minVersion: "12.0.0",
version: "21.0.3",
ngImport: i0,
type: MatHint,
decorators: [{
type: Directive,
args: [{
selector: 'mat-hint',
host: {
'class': 'mat-mdc-form-field-hint mat-mdc-form-field-bottom-align',
'[class.mat-mdc-form-field-hint-end]': 'align === "end"',
'[id]': 'id',
'[attr.align]': 'null'
}
}]
}],
propDecorators: {
align: [{
type: Input
}],
id: [{
type: Input
}]
}
});
const MAT_PREFIX = new InjectionToken('MatPrefix');
class MatPrefix {
set _isTextSelector(value) {
this._isText = true;
}
_isText = false;
static ɵfac = i0.ɵɵngDeclareFactory({
minVersion: "12.0.0",
version: "21.0.3",
ngImport: i0,
type: MatPrefix,
deps: [],
target: i0.ɵɵFactoryTarget.Directive
});
static ɵdir = i0.ɵɵngDeclareDirective({
minVersion: "14.0.0",
version: "21.0.3",
type: MatPrefix,
isStandalone: true,
selector: "[matPrefix], [matIconPrefix], [matTextPrefix]",
inputs: {
_isTextSelector: ["matTextPrefix", "_isTextSelector"]
},
providers: [{
provide: MAT_PREFIX,
useExisting: MatPrefix
}],
ngImport: i0
});
}
i0.ɵɵngDeclareClassMetadata({
minVersion: "12.0.0",
version: "21.0.3",
ngImport: i0,
type: MatPrefix,
decorators: [{
type: Directive,
args: [{
selector: '[matPrefix], [matIconPrefix], [matTextPrefix]',
providers: [{
provide: MAT_PREFIX,
useExisting: MatPrefix
}]
}]
}],
propDecorators: {
_isTextSelector: [{
type: Input,
args: ['matTextPrefix']
}]
}
});
const MAT_SUFFIX = new InjectionToken('MatSuffix');
class MatSuffix {
set _isTextSelector(value) {
this._isText = true;
}
_isText = false;
static ɵfac = i0.ɵɵngDeclareFactory({
minVersion: "12.0.0",
version: "21.0.3",
ngImport: i0,
type: MatSuffix,
deps: [],
target: i0.ɵɵFactoryTarget.Directive
});
static ɵdir = i0.ɵɵngDeclareDirective({
minVersion: "14.0.0",
version: "21.0.3",
type: MatSuffix,
isStandalone: true,
selector: "[matSuffix], [matIconSuffix], [matTextSuffix]",
inputs: {
_isTextSelector: ["matTextSuffix", "_isTextSelector"]
},
providers: [{
provide: MAT_SUFFIX,
useExisting: MatSuffix
}],
ngImport: i0
});
}
i0.ɵɵngDeclareClassMetadata({
minVersion: "12.0.0",
version: "21.0.3",
ngImport: i0,
type: MatSuffix,
decorators: [{
type: Directive,
args: [{
selector: '[matSuffix], [matIconSuffix], [matTextSuffix]',
providers: [{
provide: MAT_SUFFIX,
useExisting: MatSuffix
}]
}]
}],
propDecorators: {
_isTextSelector: [{
type: Input,
args: ['matTextSuffix']
}]
}
});
const FLOATING_LABEL_PARENT = new InjectionToken('FloatingLabelParent');
class MatFormFieldFloatingLabel {
_elementRef = inject(ElementRef);
get floating() {
return this._floating;
}
set floating(value) {
this._floating = value;
if (this.monitorResize) {
this._handleResize();
}
}
_floating = false;
get monitorResize() {
return this._monitorResize;
}
set monitorResize(value) {
this._monitorResize = value;
if (this._monitorResize) {
this._subscribeToResize();
} else {
this._resizeSubscription.unsubscribe();
}
}
_monitorResize = false;
_resizeObserver = inject(SharedResizeObserver);
_ngZone = inject(NgZone);
_parent = inject(FLOATING_LABEL_PARENT);
_resizeSubscription = new Subscription();
constructor() {}
ngOnDestroy() {
this._resizeSubscription.unsubscribe();
}
getWidth() {
return estimateScrollWidth(this._elementRef.nativeElement);
}
get element() {
return this._elementRef.nativeElement;
}
_handleResize() {
setTimeout(() => this._parent._handleLabelResized());
}
_subscribeToResize() {
this._resizeSubscription.unsubscribe();
this._ngZone.runOutsideAngular(() => {
this._resizeSubscription = this._resizeObserver.observe(this._elementRef.nativeElement, {
box: 'border-box'
}).subscribe(() => this._handleResize());
});
}
static ɵfac = i0.ɵɵngDeclareFactory({
minVersion: "12.0.0",
version: "21.0.3",
ngImport: i0,
type: MatFormFieldFloatingLabel,
deps: [],
target: i0.ɵɵFactoryTarget.Directive
});
static ɵdir = i0.ɵɵngDeclareDirective({
minVersion: "14.0.0",
version: "21.0.3",
type: MatFormFieldFloatingLabel,
isStandalone: true,
selector: "label[matFormFieldFloatingLabel]",
inputs: {
floating: "floating",
monitorResize: "monitorResize"
},
host: {
properties: {
"class.mdc-floating-label--float-above": "floating"
},
classAttribute: "mdc-floating-label mat-mdc-floating-label"
},
ngImport: i0
});
}
i0.ɵɵngDeclareClassMetadata({
minVersion: "12.0.0",
version: "21.0.3",
ngImport: i0,
type: MatFormFieldFloatingLabel,
decorators: [{
type: Directive,
args: [{
selector: 'label[matFormFieldFloatingLabel]',
host: {
'class': 'mdc-floating-label mat-mdc-floating-label',
'[class.mdc-floating-label--float-above]': 'floating'
}
}]
}],
ctorParameters: () => [],
propDecorators: {
floating: [{
type: Input
}],
monitorResize: [{
type: Input
}]
}
});
function estimateScrollWidth(element) {
const htmlEl = element;
if (htmlEl.offsetParent !== null) {
return htmlEl.scrollWidth;
}
const clone = htmlEl.cloneNode(true);
clone.style.setProperty('position', 'absolute');
clone.style.setProperty('transform', 'translate(-9999px, -9999px)');
document.documentElement.appendChild(clone);
const scrollWidth = clone.scrollWidth;
clone.remove();
return scrollWidth;
}
const ACTIVATE_CLASS = 'mdc-line-ripple--active';
const DEACTIVATING_CLASS = 'mdc-line-ripple--deactivating';
class MatFormFieldLineRipple {
_elementRef = inject(ElementRef);
_cleanupTransitionEnd;
constructor() {
const ngZone = inject(NgZone);
const renderer = inject(Renderer2);
ngZone.runOutsideAngular(() => {
this._cleanupTransitionEnd = renderer.listen(this._elementRef.nativeElement, 'transitionend', this._handleTransitionEnd);
});
}
activate() {
const classList = this._elementRef.nativeElement.classList;
classList.remove(DEACTIVATING_CLASS);
classList.add(ACTIVATE_CLASS);
}
deactivate() {
this._elementRef.nativeElement.classList.add(DEACTIVATING_CLASS);
}
_handleTransitionEnd = event => {
const classList = this._elementRef.nativeElement.classList;
const isDeactivating = classList.contains(DEACTIVATING_CLASS);
if (event.propertyName === 'opacity' && isDeactivating) {
classList.remove(ACTIVATE_CLASS, DEACTIVATING_CLASS);
}
};
ngOnDestroy() {
this._cleanupTransitionEnd();
}
static ɵfac = i0.ɵɵngDeclareFactory({
minVersion: "12.0.0",
version: "21.0.3",
ngImport: i0,
type: MatFormFieldLineRipple,
deps: [],
target: i0.ɵɵFactoryTarget.Directive
});
static ɵdir = i0.ɵɵngDeclareDirective({
minVersion: "14.0.0",
version: "21.0.3",
type: MatFormFieldLineRipple,
isStandalone: true,
selector: "div[matFormFieldLineRipple]",
host: {
classAttribute: "mdc-line-ripple"
},
ngImport: i0
});
}
i0.ɵɵngDeclareClassMetadata({
minVersion: "12.0.0",
version: "21.0.3",
ngImport: i0,
type: MatFormFieldLineRipple,
decorators: [{
type: Directive,
args: [{
selector: 'div[matFormFieldLineRipple]',
host: {
'class': 'mdc-line-ripple'
}
}]
}],
ctorParameters: () => []
});
class MatFormFieldNotchedOutline {
_elementRef = inject(ElementRef);
_ngZone = inject(NgZone);
open = false;
_notch;
ngAfterViewInit() {
const element = this._elementRef.nativeElement;
const label = element.querySelector('.mdc-floating-label');
if (label) {
element.classList.add('mdc-notched-outline--upgraded');
if (typeof requestAnimationFrame === 'function') {
label.style.transitionDuration = '0s';
this._ngZone.runOutsideAngular(() => {
requestAnimationFrame(() => label.style.transitionDuration = '');
});
}
} else {
element.classList.add('mdc-notched-outline--no-label');
}
}
_setNotchWidth(labelWidth) {
const notch = this._notch.nativeElement;
if (!this.open || !labelWidth) {
notch.style.width = '';
} else {
const NOTCH_ELEMENT_PADDING = 8;
const NOTCH_ELEMENT_BORDER = 1;
notch.style.width = `calc(${labelWidth}px * var(--mat-mdc-form-field-floating-label-scale, 0.75) + ${NOTCH_ELEMENT_PADDING + NOTCH_ELEMENT_BORDER}px)`;
}
}
_setMaxWidth(prefixAndSuffixWidth) {
this._notch.nativeElement.style.setProperty('--mat-form-field-notch-max-width', `calc(100% - ${prefixAndSuffixWidth}px)`);
}
static ɵfac = i0.ɵɵngDeclareFactory({
minVersion: "12.0.0",
version: "21.0.3",
ngImport: i0,
type: MatFormFieldNotchedOutline,
deps: [],
target: i0.ɵɵFactoryTarget.Component
});
static ɵcmp = i0.ɵɵngDeclareComponent({
minVersion: "14.0.0",
version: "21.0.3",
type: MatFormFieldNotchedOutline,
isStandalone: true,
selector: "div[matFormFieldNotchedOutline]",
inputs: {
open: ["matFormFieldNotchedOutlineOpen", "open"]
},
host: {
properties: {
"class.mdc-notched-outline--notched": "open"
},
classAttribute: "mdc-notched-outline"
},
viewQueries: [{
propertyName: "_notch",
first: true,
predicate: ["notch"],
descendants: true
}],
ngImport: i0,
template: "<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",
changeDetection: i0.ChangeDetectionStrategy.OnPush,
encapsulation: i0.ViewEncapsulation.None
});
}
i0.ɵɵngDeclareClassMetadata({
minVersion: "12.0.0",
version: "21.0.3",
ngImport: i0,
type: MatFormFieldNotchedOutline,
decorators: [{
type: Component,
args: [{
selector: 'div[matFormFieldNotchedOutline]',
host: {
'class': 'mdc-notched-outline',
'[class.mdc-notched-outline--notched]': 'open'
},
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
template: "<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"
}]
}],
propDecorators: {
open: [{
type: Input,
args: ['matFormFieldNotchedOutlineOpen']
}],
_notch: [{
type: ViewChild,
args: ['notch']
}]
}
});
class MatFormFieldControl {
value;
stateChanges;
id;
placeholder;
ngControl;
focused;
empty;
shouldLabelFloat;
required;
disabled;
errorState;
controlType;
autofilled;
userAriaDescribedBy;
disableAutomaticLabeling;
describedByIds;
static ɵfac = i0.ɵɵngDeclareFactory({
minVersion: "12.0.0",
version: "21.0.3",
ngImport: i0,
type: MatFormFieldControl,
deps: [],
target: i0.ɵɵFactoryTarget.Directive
});
static ɵdir = i0.ɵɵngDeclareDirective({
minVersion: "14.0.0",
version: "21.0.3",
type: MatFormFieldControl,
isStandalone: true,
ngImport: i0
});
}
i0.ɵɵngDeclareClassMetadata({
minVersion: "12.0.0",
version: "21.0.3",
ngImport: i0,
type: MatFormFieldControl,
decorators: [{
type: Directive
}]
});
function getMatFormFieldPlaceholderConflictError() {
return Error('Placeholder attribute and child element were both specified.');
}
function getMatFormFieldDuplicatedHintError(align) {
return Error(`A hint was already declared for 'align="${align}"'.`);
}
function getMatFormFieldMissingControlError() {
return Error('mat-form-field must contain a MatFormFieldControl.');
}
const MAT_FORM_FIELD = new InjectionToken('MatFormField');
const MAT_FORM_FIELD_DEFAULT_OPTIONS = new InjectionToken('MAT_FORM_FIELD_DEFAULT_OPTIONS');
const DEFAULT_APPEARANCE = 'fill';
const DEFAULT_FLOAT_LABEL = 'auto';
const DEFAULT_SUBSCRIPT_SIZING = 'fixed';
const FLOATING_LABEL_DEFAULT_DOCKED_TRANSFORM = `translateY(-50%)`;
class MatFormField {
_elementRef = inject(ElementRef);
_changeDetectorRef = inject(ChangeDetectorRef);
_platform = inject(Platform);
_idGenerator = inject(_IdGenerator);
_ngZone = inject(NgZone);
_defaults = inject(MAT_FORM_FIELD_DEFAULT_OPTIONS, {
optional: true
});
_currentDirection;
_textField;
_iconPrefixContainer;
_textPrefixContainer;
_iconSuffixContainer;
_textSuffixContainer;
_floatingLabel;
_notchedOutline;
_lineRipple;
_iconPrefixContainerSignal = viewChild('iconPrefixContainer', ...(ngDevMode ? [{
debugName: "_iconPrefixContainerSignal"
}] : []));
_textPrefixContainerSignal = viewChild('textPrefixContainer', ...(ngDevMode ? [{
debugName: "_textPrefixContainerSignal"
}] : []));
_iconSuffixContainerSignal = viewChild('iconSuffixContainer', ...(ngDevMode ? [{
debugName: "_iconSuffixContainerSignal"
}] : []));
_textSuffixContainerSignal = viewChild('textSuffixContainer', ...(ngDevMode ? [{
debugName: "_textSuffixContainerSignal"
}] : []));
_prefixSuffixContainers = computed(() => {
return [this._iconPrefixContainerSignal(), this._textPrefixContainerSignal(), this._iconSuffixContainerSignal(), this._textSuffixContainerSignal()].map(container => container?.nativeElement).filter(e => e !== undefined);
}, ...(ngDevMode ? [{
debugName: "_prefixSuffixContainers"
}] : []));
_formFieldControl;
_prefixChildren;
_suffixChildren;
_errorChildren;
_hintChildren;
_labelChild = contentChild(MatLabel, ...(ngDevMode ? [{
debugName: "_labelChild"
}] : []));
get hideRequiredMarker() {
return this._hideRequiredMarker;
}
set hideRequiredMarker(value) {
this._hideRequiredMarker = coerceBooleanProperty(value);
}
_hideRequiredMarker = false;
color = 'primary';
get floatLabel() {
return this._floatLabel || this._defaults?.floatLabel || DEFAULT_FLOAT_LABEL;
}
set floatLabel(value) {
if (value !== this._floatLabel) {
this._floatLabel = value;
this._changeDetectorRef.markForCheck();
}
}
_floatLabel;
get appearance() {
return this._appearanceSignal();
}
set appearance(value) {
const newAppearance = value || this._defaults?.appearance || DEFAULT_APPEARANCE;
if (typeof ngDevMode === 'undefined' || ngDevMode) {
if (newAppearance !== 'fill' && newAppearance !== 'outline') {
throw new Error(`MatFormField: Invalid appearance "${newAppearance}", valid values are "fill" or "outline".`);
}
}
this._appearanceSignal.set(newAppearance);
}
_appearanceSignal = signal(DEFAULT_APPEARANCE, ...(ngDevMode ? [{
debugName: "_appearanceSignal"
}] : []));
get subscriptSizing() {
return this._subscriptSizing || this._defaults?.subscriptSizing || DEFAULT_SUBSCRIPT_SIZING;
}
set subscriptSizing(value) {
this._subscriptSizing = value || this._defaults?.subscriptSizing || DEFAULT_SUBSCRIPT_SIZING;
}
_subscriptSizing = null;
get hintLabel() {
return this._hintLabel;
}
set hintLabel(value) {
this._hintLabel = value;
this._processHints();
}
_hintLabel = '';
_hasIconPrefix = false;
_hasTextPrefix = false;
_hasIconSuffix = false;
_hasTextSuffix = false;
_labelId = this._idGenerator.getId('mat-mdc-form-field-label-');
_hintLabelId = this._idGenerator.getId('mat-mdc-hint-');
_describedByIds;
get _control() {
return this._explicitFormFieldControl || this._formFieldControl;
}
set _control(value) {
this._explicitFormFieldControl = value;
}
_destroyed = new Subject();
_isFocused = null;
_explicitFormFieldControl;
_previousControl = null;
_previousControlValidatorFn = null;
_stateChanges;
_valueChanges;
_describedByChanges;
_outlineLabelOffsetResizeObserver = null;
_animationsDisabled = _animationsDisabled();
constructor() {
const defaults = this._defaults;
const dir = inject(Directionality);
if (defaults) {
if (defaults.appearance) {
this.appearance = defaults.appearance;
}
this._hideRequiredMarker = Boolean(defaults?.hideRequiredMarker);
if (defaults.color) {
this.color = defaults.color;
}
}
effect(() => this._currentDirection = dir.valueSignal());
this._syncOutlineLabelOffset();
}
ngAfterViewInit() {
this._updateFocusState();
if (!this._animationsDisabled) {
this._ngZone.runOutsideAngular(() => {
setTimeout(() => {
this._elementRef.nativeElement.classList.add('mat-form-field-animations-enabled');
}, 300);
});
}
this._changeDetectorRef.detectChanges();
}
ngAfterContentInit() {
this._assertFormFieldControl();
this._initializeSubscript();
this._initializePrefixAndSuffix();
}
ngAfterContentChecked() {
this._assertFormFieldControl();
if (this._control !== this._previousControl) {
this._initializeControl(this._previousControl);
if (this._control.ngControl && this._control.ngControl.control) {
this._previousControlValidatorFn = this._control.ngControl.control.validator;
}
this._previousControl = this._control;
}
if (this._control.ngControl && this._control.ngControl.control) {
const validatorFn = this._control.ngControl.control.validator;
if (validatorFn !== this._previousControlValidatorFn) {
this._changeDetectorRef.markForCheck();
}
}
}
ngOnDestroy() {
this._outlineLabelOffsetResizeObserver?.disconnect();
this._stateChanges?.unsubscribe();
this._valueChanges?.unsubscribe();
this._describedByChanges?.unsubscribe();
this._destroyed.next();
this._destroyed.complete();
}
getLabelId = computed(() => this._hasFloatingLabel() ? this._labelId : null, ...(ngDevMode ? [{
debugName: "getLabelId"
}] : []));
getConnectedOverlayOrigin() {
return this._textField || this._elementRef;
}
_animateAndLockLabel() {
if (this._hasFloatingLabel()) {
this.floatLabel = 'always';
}
}
_initializeControl(previousControl) {
const control = this._control;
const classPrefix = 'mat-mdc-form-field-type-';
if (previousControl) {
this._elementRef.nativeElement.classList.remove(classPrefix + previousControl.controlType);
}
if (control.controlType) {
this._elementRef.nativeElement.classList.add(classPrefix + control.controlType);
}
this._stateChanges?.unsubscribe();
this._stateChanges = control.stateChanges.subscribe(() => {
this._updateFocusState();
this._changeDetectorRef.markForCheck();
});
this._describedByChanges?.unsubscribe();
this._describedByChanges = control.stateChanges.pipe(startWith([undefined, undefined]), map(() => [control.errorState, control.userAriaDescribedBy]), pairwise(), filter(([[prevErrorState, prevDescribedBy], [currentErrorState, currentDescribedBy]]) => {
return prevErrorState !== currentErrorState || prevDescribedBy !== currentDescribedBy;
})).subscribe(() => this._syncDescribedByIds());
this._valueChanges?.unsubscribe();
if (control.ngControl && control.ngControl.valueChanges) {
this._valueChanges = control.ngControl.valueChanges.pipe(takeUntil(this._destroyed)).subscribe(() => this._changeDetectorRef.markForCheck());
}
}
_checkPrefixAndSuffixTypes() {
this._hasIconPrefix = !!this._prefixChildren.find(p => !p._isText);
this._hasTextPrefix = !!this._prefixChildren.find(p => p._isText);
this._hasIconSuffix = !!this._suffixChildren.find(s => !s._isText);
this._hasTextSuffix = !!this._suffixChildren.find(s => s._isText);
}
_initializePrefixAndSuffix() {
this._checkPrefixAndSuffixTypes();
merge(this._prefixChildren.changes, this._suffixChildren.changes).subscribe(() => {
this._checkPrefixAndSuffixTypes();
this._changeDetectorRef.markForCheck();
});
}
_initializeSubscript() {
this._hintChildren.changes.subscribe(() => {
this._processHints();
this._changeDetectorRef.markForCheck();
});
this._errorChildren.changes.subscribe(() => {
this._syncDescribedByIds();
this._changeDetectorRef.markForCheck();
});
this._validateHints();
this._syncDescribedByIds();
}
_assertFormFieldControl() {
if (!this._control && (typeof ngDevMode === 'undefined' || ngDevMode)) {
throw getMatFormFieldMissingControlError();
}
}
_updateFocusState() {
const controlFocused = this._control.focused;
if (controlFocused && !this._isFocused) {
this._isFocused = true;
this._lineRipple?.activate();
} else if (!controlFocused && (this._isFocused || this._isFocused === null)) {
this._isFocused = false;
this._lineRipple?.deactivate();
}
this._elementRef.nativeElement.classList.toggle('mat-focused', controlFocused);
this._textField?.nativeElement.classList.toggle('mdc-text-field--focused', controlFocused);
}
_syncOutlineLabelOffset() {
afterRenderEffect({
earlyRead: () => {
if (this._appearanceSignal() !== 'outline') {
this._outlineLabelOffsetResizeObserver?.disconnect();
return null;
}
if (globalThis.ResizeObserver) {
this._outlineLabelOffsetResizeObserver ||= new globalThis.ResizeObserver(() => {
this._writeOutlinedLabelStyles(this._getOutlinedLabelOffset());
});
for (const el of this._prefixSuffixContainers()) {
this._outlineLabelOffsetResizeObserver.observe(el, {
box: 'border-box'
});
}
}
return this._getOutlinedLabelOffset();
},
write: labelStyles => this._writeOutlinedLabelStyles(labelStyles())
});
}
_shouldAlwaysFloat() {
return this.floatLabel === 'always';
}
_hasOutline() {
return this.appearance === 'outline';
}
_forceDisplayInfixLabel() {
return !this._platform.isBrowser && this._prefixChildren.length && !this._shouldLabelFloat();
}
_hasFloatingLabel = computed(() => !!this._labelChild(), ...(ngDevMode ? [{
debugName: "_hasFloatingLabel"
}] : []));
_shouldLabelFloat() {
if (!this._hasFloatingLabel()) {
return false;
}
return this._control.shouldLabelFloat || this._shouldAlwaysFloat();
}
_shouldForward(prop) {
const control = this._control ? this._control.ngControl : null;
return control && control[prop];
}
_getSubscriptMessageType() {
return this._errorChildren && this._errorChildren.length > 0 && this._control.errorState ? 'error' : 'hint';
}
_handleLabelResized() {
this._refreshOutlineNotchWidth();
}
_refreshOutlineNotchWidth() {
if (!this._hasOutline() || !this._floatingLabel || !this._shouldLabelFloat()) {
this._notchedOutline?._setNotchWidth(0);
} else {
this._notchedOutline?._setNotchWidth(this._floatingLabel.getWidth());
}
}
_processHints() {
this._validateHints();
this._syncDescribedByIds();
}
_validateHints() {
if (this._hintChildren && (typeof ngDevMode === 'undefined' || ngDevMode)) {
let startHint;
let endHint;
this._hintChildren.forEach(hint => {
if (hint.align === 'start') {
if (startHint || this.hintLabel) {
throw getMatFormFieldDuplicatedHintError('start');
}
startHint = hint;
} else if (hint.align === 'end') {
if (endHint) {
throw getMatFormFieldDuplicatedHintError('end');
}
endHint = hint;
}
});
}
}
_syncDescribedByIds() {
if (this._control) {
let ids = [];
if (this._control.userAriaDescribedBy && typeof this._control.userAriaDescribedBy === 'string') {
ids.push(...this._control.userAriaDescribedBy.split(' '));
}
if (this._getSubscriptMessageType() === 'hint') {
const startHint = this._hintChildren ? this._hintChildren.find(hint => hint.align === 'start') : null;
const endHint = this._hintChildren ? this._hintChildren.find(hint => hint.align === 'end') : null;
if (startHint) {
ids.push(startHint.id);
} else if (this._hintLabel) {
ids.push(this._hintLabelId);
}
if (endHint) {
ids.push(endHint.id);
}
} else if (this._errorChildren) {
ids.push(...this._errorChildren.map(error => error.id));
}
const existingDescribedBy = this._control.describedByIds;
let toAssign;
if (existingDescribedBy) {
const exclude = this._describedByIds || ids;
toAssign = ids.concat(existingDescribedBy.filter(id => id && !exclude.includes(id)));
} else {
toAssign = ids;
}
this._control.setDescribedByIds(toAssign);
this._describedByIds = ids;
}
}
_getOutlinedLabelOffset() {
if (!this._hasOutline() || !this._floatingLabel) {
return null;
}
if (!this._iconPrefixContainer && !this._textPrefixContainer) {
return ['', null];
}
if (!this._isAttachedToDom()) {
return null;
}
const iconPrefixContainer = this._iconPrefixContainer?.nativeElement;
const textPrefixContainer = this._textPrefixContainer?.nativeElement;
const iconSuffixContainer = this._iconSuffixContainer?.nativeElement;
const textSuffixContainer = this._textSuffixContainer?.nativeElement;
const iconPrefixContainerWidth = iconPrefixContainer?.getBoundingClientRect().width ?? 0;
const textPrefixContainerWidth = textPrefixContainer?.getBoundingClientRect().width ?? 0;
const iconSuffixContainerWidth = iconSuffixContainer?.getBoundingClientRect().width ?? 0;
const textSuffixContainerWidth = textSuffixContainer?.getBoundingClientRect().width ?? 0;
const negate = this._currentDirection === 'rtl' ? '-1' : '1';
const prefixWidth = `${iconPrefixContainerWidth + textPrefixContainerWidth}px`;
const labelOffset = `var(--mat-mdc-form-field-label-offset-x, 0px)`;
const labelHorizontalOffset = `calc(${negate} * (${prefixWidth} + ${labelOffset}))`;
const floatingLabelTransform = 'var(--mat-mdc-form-field-label-transform, ' + `${FLOATING_LABEL_DEFAULT_DOCKED_TRANSFORM} translateX(${labelHorizontalOffset}))`;
const notchedOutlineWidth = iconPrefixContainerWidth + textPrefixContainerWidth + iconSuffixContainerWidth + textSuffixContainerWidth;
return [floatingLabelTransform, notchedOutlineWidth];
}
_writeOutlinedLabelStyles(styles) {
if (styles !== null) {
const [floatingLabelTransform, notchedOutlineWidth] = styles;
if (this._floatingLabel) {
this._floatingLabel.element.style.transform = floatingLabelTransform;
}
if (notchedOutlineWidth !== null) {
this._notchedOutline?._setMaxWidth(notchedOutlineWidth);
}
}
}
_isAttachedToDom() {
const element = this._elementRef.nativeElement;
if (element.getRootNode) {
const rootNode = element.getRootNode();
return rootNode && rootNode !== element;
}
return document.documentElement.contains(element);
}
static ɵfac = i0.ɵɵngDeclareFactory({
minVersion: "12.0.0",
version: "21.0.3",
ngImport: i0,
type: MatFormField,
deps: [],
target: i0.ɵɵFactoryTarget.Component
});
static ɵcmp = i0.ɵɵngDeclareComponent({
minVersion: "17.0.0",
version: "21.0.3",
type: MatFormField,
isStandalone: true,
selector: "mat-form-field",
inputs: {
hideRequiredMarker: "hideRequiredMarker",
color: "color",
floatLabel: "floatLabel",
appearance: "appearance",
subscriptSizing: "subscriptSizing",
hintLabel: "hintLabel"
},
host: {
properties: {
"class.mat-mdc-form-field-label-always-float": "_shouldAlwaysFloat()",
"class.mat-mdc-form-field-has-icon-prefix": "_hasIconPrefix",
"class.mat-mdc-form-field-has-icon-suffix": "_hasIconSuffix",
"class.mat-form-field-invalid": "_control.errorState",
"class.mat-form-field-disabled": "_control.disabled",
"class.mat-form-field-autofilled": "_control.autofilled",
"class.mat-form-field-appearance-fill": "appearance == \"fill\"",
"class.mat-form-field-appearance-outline": "appearance == \"outline\"",
"class.mat-form-field-hide-placeholder": "_hasFloatingLabel() && !_shouldLabelFloat()",
"class.mat-primary": "color !== \"accent\" && color !== \"warn\"",
"class.mat-accent": "color === \"accent\"",
"class.mat-warn": "color === \"warn\"",
"class.ng-untouched": "_shouldForward(\"untouched\")",
"class.ng-touched": "_shouldForward(\"touched\")",
"class.ng-pristine": "_shouldForward(\"pristine\")",
"class.ng-dirty": "_shouldForward(\"dirty\")",
"class.ng-valid": "_shouldForward(\"valid\")",
"class.ng-invalid": "_shouldForward(\"invalid\")",
"class.ng-pending": "_shouldForward(\"pending\")"
},
classAttribute: "mat-mdc-form-field"
},
providers: [{
provide: MAT_FORM_FIELD,
useExisting: MatFormField
}, {
provide: FLOATING_LABEL_PARENT,
useExisting: MatFormField
}],
queries: [{
propertyName: "_labelChild",
first: true,
predicate: MatLabel,
descendants: true,
isSignal: true
}, {
propertyName: "_formFieldControl",
first: true,
predicate: MatFormFieldControl,
descendants: true
}, {
propertyName: "_prefixChildren",
predicate: MAT_PREFIX,
descendants: true
}, {
propertyName: "_suffixChildren",
predicate: MAT_SUFFIX,
descendants: true
}, {
propertyName: "_errorChildren",
predicate: MAT_ERROR,
descendants: true
}, {
propertyName: "_hintChildren",
predicate: MatHint,
descendants: true
}],
viewQueries: [{
propertyName: "_iconPrefixContainerSignal",
first: true,
predicate: ["iconPrefixContainer"],
descendants: true,
isSignal: true
}, {
propertyName: "_textPrefixContainerSignal",
first: true,
predicate: ["textPrefixContainer"],
descendants: true,
isSignal: true
}, {
propertyName: "_iconSuffixContainerSignal",
first: true,
predicate: ["iconSuffixContainer"],
descendants: true,
isSignal: true
}, {
propertyName: "_textSuffixContainerSignal",
first: true,
predicate: ["textSuffixContainer"],
descendants: true,
isSignal: true
}, {
propertyName: "_textField",
first: true,
predicate: ["textField"],
descendants: true
}, {
propertyName: "_iconPrefixContainer",
first: true,
predicate: ["iconPrefixContainer"],
descendants: true
}, {
propertyName: "_textPrefixContainer",
first: true,
predicate: ["textPrefixContainer"],
descendants: true
}, {
propertyName: "_iconSuffixContainer",
first: true,
predicate: ["iconSuffixContainer"],
descendants: true
}, {
propertyName: "_textSuffixContainer",
first: true,
predicate: ["textSuffixContainer"],
descendants: true
}, {
propertyName: "_floatingLabel",
first: true,
predicate: MatFormFieldFloatingLabel,
descendants: true
}, {
propertyName: "_notchedOutline",
first: true,
predicate: MatFormFieldNotchedOutline,
descendants: true
}, {
propertyName: "_lineRipple",
first: true,
predicate: MatFormFieldLineRipple,
descendants: true
}],
exportAs: ["matFormField"],
ngImport: i0,
template: "<ng-template #labelTemplate>\n <!--\n MDC recommends that the text-field is a `<label>` element. This rather complicates the\n setup because it would require every form-field control to explicitly set `aria-labelledby`.\n This is because the `<label>` itself contains more than the actual label (e.g. prefix, suffix\n or other projected content), and screen readers could potentially read out undesired content.\n Excluding elements from being printed out requires them to be marked with `aria-hidden`, or\n the form control is set to a scoped element for the label (using `aria-labelledby`). Both of\n these options seem to complicate the setup because we know exactly what content is rendered\n as part of the label, and we don't want to spend resources on walking through projected content\n to set `aria-hidden`. Nor do we want to set `aria-labelledby` on every form control if we could\n simply link the label to the control using the label `for` attribute.\n -->\n @if (_hasFloatingLabel()) {\n <label\n matFormFieldFloatingLabel\n [floating]=\"_shouldLabelFloat()\"\n [monitorResize]=\"_hasOutline()\"\n [id]=\"_labelId\"\n [attr.for]=\"_control.disableAutomaticLabeling ? null : _control.id\"\n >\n <ng-content select=\"mat-label\"></ng-content>\n <!--\n We set the required marker as a separate element, in order to make it easier to target if\n apps want to override it and to be able to set `aria-hidden` so that screen readers don't\n pick it up.\n -->\n @if (!hideRequiredMarker && _control.required) {\n <span\n aria-hidden=\"true\"\n class=\"mat-mdc-form-field-required-marker mdc-floating-label--required\"\n ></span>\n }\n </label>\n }\n</ng-template>\n\n<div\n class=\"mat-mdc-text-field-wrapper mdc-text-field\"\n #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($event)\"\n>\n @if (!_hasOutline() && !_control.disabled) {\n <div class=\"mat-mdc-form-field-focus-overlay\"></div>\n }\n <div class=\"mat-mdc-form-field-flex\">\n @if (_hasOutline()) {\n <div matFormFieldNotchedOutline [matFormFieldNotchedOutlineOpen]=\"_shouldLabelFloat()\">\n @if (!_forceDisplayInfixLabel()) {\n <ng-template [ngTemplateOutlet]=\"labelTemplate\"></ng-template>\n }\n </div>\n }\n\n @if (_hasIconPrefix) {\n <div class=\"mat-mdc-form-field-icon-prefix\" #iconPrefixContainer>\n <ng-content select=\"[matPrefix], [matIconPrefix]\"></ng-content>\n </div>\n }\n\n @if (_hasTextPrefix) {\n <div class=\"mat-mdc-form-field-text-prefix\" #textPrefixContainer>\n <ng-content select=\"[matTextPrefix]\"></ng-content>\n </div>\n }\n\n <div class=\"mat-mdc-form-field-infix\">\n @if (!_hasOutline() || _forceDisplayInfixLabel()) {\n <ng-template [ngTemplateOutlet]=\"labelTemplate\"></ng-template>\n }\n\n <ng-content></ng-content>\n </div>\n\n @if (_hasTextSuffix) {\n <div class=\"mat-mdc-form-field-text-suffix\" #textSuffixContainer>\n <ng-content select=\"[matTextSuffix]\"></ng-content>\n </div>\n }\n\n @if (_hasIconSuffix) {\n <div class=\"mat-mdc-form-field-icon-suffix\" #iconSuffixContainer>\n <ng-content select=\"[matSuffix], [matIconSuffix]\"></ng-content>\n </div>\n }\n </div>\n\n @if (!_hasOutline()) {\n <div matFormFieldLineRipple></div>\n }\n</div>\n\n<div aria-atomic=\"true\" aria-live=\"polite\"\n class=\"mat-mdc-form-field-subscript-wrapper mat-mdc-form-field-bottom-align\"\n [class.mat-mdc-form-field-subscript-dynamic-size]=\"subscriptSizing === 'dynamic'\"\n>\n @let subscriptMessageType = _getSubscriptMessageType();\n\n @switch (subscriptMessageType) {\n @case ('error') {\n <div class=\"mat-mdc-form-field-error-wrapper\">\n <ng-content select=\"mat-error, [matError]\"></ng-content>\n </div>\n }\n\n @case ('hint') {\n <div class=\"mat-mdc-form-field-hint-wrapper\">\n @if (hintLabel) {\n <mat-hint [id]=\"_hintLabelId\">{{hintLabel}}</mat-hint>\n }\n <ng-content select=\"mat-hint:not([align='end'])\"></ng-content>\n <div class=\"mat-mdc-form-field-hint-spacer\"></div>\n <ng-content select=\"mat-hint[align='end']\"></ng-content>\n </div>\n }\n }\n</div>\n",
styles: [".mdc-text-field{display:inline-flex;align-items:baseline;padding:0 16px;position:relative;box-sizing:border-box;overflow:hidden;will-change:opacity,transform,color;border-top-left-radius:4px;border-top-right-radius:4px;border-bottom-right-radius:0;border-bottom-left-radius:0}.mdc-text-field__input{width:100%;min-width:0;border:none;border-radius:0;background:none;padding:0;-moz-appearance:none;-webkit-appearance:none;height:28px}.mdc-text-field__input::-webkit-calendar-picker-indicator,.mdc-text-field__input::-webkit-search-cancel-button{display:none}.mdc-text-field__input::-ms-clear{display:none}.mdc-text-field__input:focus{outline:none}.mdc-text-field__input:invalid{box-shadow:none}.mdc-text-field__input::placeholder{opacity:0}.mdc-text-field__input::-moz-placeholder{opacity:0}.mdc-text-field__input::-webkit-input-placeholder{opacity:0}.mdc-text-field__input:-ms-input-placeholder{opacity:0}.mdc-text-field--no-label .mdc-text-field__input::placeholder,.mdc-text-field--focused .mdc-text-field__input::placeholder{opacity:1}.mdc-text-field--no-label .mdc-text-field__input::-moz-placeholder,.mdc-text-field--focused .mdc-text-field__input::-moz-placeholder{opacity:1}.mdc-text-field--no-label .mdc-text-field__input::-webkit-input-placeholder,.mdc-text-field--focused .mdc-text-field__input::-webkit-input-placeholder{opacity:1}.mdc-text-field--no-label .mdc-text-field__input:-ms-input-placeholder,.mdc-text-field--focused .mdc-text-field__input:-ms-input-placeholder{opacity:1}.mdc-text-field--disabled:not(.mdc-text-field--no-label) .mdc-text-field__input.mat-mdc-input-disabled-interactive::placeholder{opacity:0}.mdc-text-field--disabled:not(.mdc-text-field--no-label) .mdc-text-field__input.mat-mdc-input-disabled-interactive::-moz-placeholder{opacity:0}.mdc-text-field--disabled:not(.mdc-text-field--no-label) .mdc-text-field__input.mat-mdc-input-disabled-interactive::-webkit-input-placeholder{opacity:0}.mdc-text-field--disabled:not(.mdc-text-field--no-label) .mdc-text-field__input.mat-mdc-input-disabled-interactive:-ms-input-placeholder{opacity:0}.mdc-text-field--outlined .mdc-text-field__input,.mdc-text-field--filled.mdc-text-field--no-label .mdc-text-field__input{height:100%}.mdc-text-field--outlined .mdc-text-field__input{display:flex;border:none !important;background-color:rgba(0,0,0,0)}.mdc-text-field--disabled .mdc-text-field__input{pointer-events:auto}.mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-text-field__input{color:var(--mat-form-field-filled-input-text-color, var(--mat-sys-on-surface));caret-color:var(--mat-form-field-filled-caret-color, var(--mat-sys-primary))}.mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-text-field__input::placeholder{color:var(--mat-form-field-filled-input-text-placeholder-color, var(--mat-sys-on-surface-variant))}.mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-text-field__input::-moz-placeholder{color:var(--mat-form-field-filled-input-text-placeholder-color, var(--mat-sys-on-surface-variant))}.mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-text-field__input::-webkit-input-placeholder{color:var(--mat-form-field-filled-input-text-placeholder-color, var(--mat-sys-on-surface-variant))}.mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-text-field__input:-ms-input-placeholder{color:var(--mat-form-field-filled-input-text-placeholder-color, var(--mat-sys-on-surface-variant))}.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-text-field__input{color:var(--mat-form-field-outlined-input-text-color, var(--mat-sys-on-surface));caret-color:var(--mat-form-field-outlined-caret-color, var(--mat-sys-primary))}.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-text-field__input::placeholder{color:var(--mat-form-field-outlined-input-text-placeholder-color, var(--mat-sys-on-surface-variant))}.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-text-field__input::-moz-placeholder{color:var(--mat-form-field-outlined-input-text-placeholder-color, var(--mat-sys-on-surface-variant))}.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-text-field__input::-webkit-input-placeholder{color:var(--mat-form-field-outlined-input-text-placeholder-color, var(--mat-sys-on-surface-variant))}.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-text-field__input:-ms-input-placeholder{color:var(--mat-form-field-outlined-input-text-placeholder-color, var(--mat-sys-on-surface-variant))}.mdc-text-field--filled.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-text-field__input{caret-color:var(--mat-form-field-filled-error-caret-color, var(--mat-sys-error))}.mdc-text-field--outlined.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-text-field__input{caret-color:var(--mat-form-field-outlined-error-caret-color, var(--mat-sys-error))}.mdc-text-field--filled.mdc-text-field--disabled .mdc-text-field__input{color:var(--mat-form-field-filled-disabled-input-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.mdc-text-field--outlined.mdc-text-field--disabled .mdc-text-field__input{color:var(--mat-form-field-outlined-disabled-input-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}@media(forced-colors: active){.mdc-text-field--disabled .mdc-text-field__input{background-color:Window}}.mdc-text-field--filled{height:56px;border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-left-radius:var(--mat-form-field-filled-container-shape, var(--mat-sys-corner-extra-small));border-top-right-radius:var(--mat-form-field-filled-container-shape, var(--mat-sys-corner-extra-small))}.mdc-text-field--filled:not(.mdc-text-field--disabled){background-color:var(--mat-form-field-filled-container-color, var(--mat-sys-surface-variant))}.mdc-text-field--filled.mdc-text-field--disabled{background-color:var(--mat-form-field-filled-disabled-container-color, color-mix(in srgb, var(--mat-sys-on-surface) 4%, transparent))}.mdc-text-field--outlined{height:56px;overflow:visible;padding-right:max(16px,var(--mat-form-field-outlined-container-shape, var(--mat-sys-corner-extra-small)));padding-left:max(16px,var(--mat-form-field-outlined-container-shape, var(--mat-sys-corner-extra-small)) + 4px)}[dir=rtl] .mdc-text-field--outlined{padding-right:max(16px,var(--mat-form-field-outlined-container-shape, var(--mat-sys-corner-extra-small)) + 4px);padding-left:max(16px,var(--mat-form-field-outlined-container-shape, var(--mat-sys-corner-extra-small)))}.mdc-floating-label{position:absolute;left:0;transform-origin:left top;line-height:1.15rem;text-align:left;text-overflow:ellipsis;white-space:nowrap;cursor:text;overflow:hidden;will-change:transform}[dir=rtl] .mdc-floating-label{right:0;left:auto;transform-origin:right top;text-align:right}.mdc-text-field .mdc-floating-label{top:50%;transform:translateY(-50%);pointer-events:none}.mdc-notched-outline .mdc-floating-label{display:inline-block;position:relative;max-width:100%}.mdc-text-field--outlined .mdc-floating-label{left:4px;right:auto}[dir=rtl] .mdc-text-field--outlined .mdc-floating-label{left:auto;right:4px}.mdc-text-field--filled .mdc-floating-label{left:16px;right:auto}[dir=rtl] .mdc-text-field--filled .mdc-floating-label{left:auto;right:16px}.mdc-text-field--disabled .mdc-floating-label{cursor:default}@media(forced-colors: active){.mdc-text-field--disabled .mdc-floating-label{z-index:1}}.mdc-text-field--filled.mdc-text-field--no-label .mdc-floating-label{display:none}.mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-floating-label{color:var(--mat-form-field-filled-label-text-color, var(--mat-sys-on-surface-variant))}.mdc-text-field--filled:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-floating-label{color:var(--mat-form-field-filled-focus-label-text-color, var(--mat-sys-primary))}.mdc-text-field--filled:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-floating-label{color:var(--mat-form-field-filled-hover-label-text-color, var(--mat-sys-on-surface-variant))}.mdc-text-field--filled.mdc-text-field--disabled .mdc-floating-label{color:var(--mat-form-field-filled-disabled-label-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.mdc-text-field--filled:not(.mdc-text-field--disabled).mdc-text-field--invalid .mdc-floating-label{color:var(--mat-form-field-filled-error-label-text-color, var(--mat-sys-error))}.mdc-text-field--filled:not(.mdc-text-field--disabled).mdc-text-field--invalid.mdc-text-field--focused .mdc-floating-label{color:var(--mat-form-field-filled-error-focus-label-text-color, var(--mat-sys-error))}.mdc-text-field--filled:not(.mdc-text-field--disabled).mdc-text-field--invalid:not(.mdc-text-field--disabled):hover .mdc-floating-label{color:var(--mat-form-field-filled-error-hover-label-text-color, var(--mat-sys-on-error-container))}.mdc-text-field--filled .mdc-floating-label{font-family:var(--mat-form-field-filled-label-text-font, var(--mat-sys-body-large-font));font-size:var(--mat-form-field-filled-label-text-size, var(--mat-sys-body-large-size));font-weight:var(--mat-form-field-filled-label-text-weight, var(--mat-sys-body-large-weight));letter-spacing:var(--mat-form-field-filled-label-text-tracking, var(--mat-sys-body-large-tracking))}.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-floating-label{color:var(--mat-form-field-outlined-label-text-color, var(--mat-sys-on-surface-variant))}.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-floating-label{color:var(--mat-form-field-outlined-focus-la