@ngx-formly/material 10.0.1 → 11.1.0-rc.0

package/fesm2022/ngx-formly-material-form-field.mjs

@@ -1,55 +1,84 @@
-import * as i0 from '@angular/core';
-import { ViewChild, ViewEncapsulation, Component, NO_ERRORS_SCHEMA, NgModule, Type, ViewChildren, Directive } from '@angular/core';
-import * as i4 from '@ngx-formly/core';
-import { FieldWrapper, ɵdefineHiddenProp as _defineHiddenProp, FormlyModule, FieldType as FieldType$1, ɵobserve as _observe } from '@ngx-formly/core';
-import * as i3 from '@angular/material/form-field';
-import { MatFormField, MatFormFieldModule, MatFormFieldControl } from '@angular/material/form-field';
-import * as i1 from '@angular/cdk/a11y';
-import * as i2 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import { ReactiveFormsModule } from '@angular/forms';
-import { Subject } from 'rxjs';
-
-class FormlyWrapperFormField extends FieldWrapper {
-    constructor(renderer, elementRef, focusMonitor) {
-        super();
-        this.renderer = renderer;
-        this.elementRef = elementRef;
-        this.focusMonitor = focusMonitor;
-    }
-    ngOnInit() {
-        _defineHiddenProp(this.field, '_formField', this.formField);
-        this.focusMonitor.monitor(this.elementRef, true).subscribe((origin) => {
-            if (!origin && this.field.focus) {
-                this.field.focus = false;
-            }
-        });
-    }
-    ngAfterViewInit() {
-        // temporary fix for https://github.com/angular/material2/issues/7891
-        if (this.formField.appearance !== 'outline' && this.props.hideFieldUnderline === true) {
-            const underlineElement = this.formField._elementRef.nativeElement.querySelector('.mat-form-field-underline');
-            underlineElement && this.renderer.removeChild(underlineElement.parentNode, underlineElement);
-        }
-    }
-    ngOnDestroy() {
-        delete this.field._formField;
-        this.focusMonitor.stopMonitoring(this.elementRef);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: FormlyWrapperFormField, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.FocusMonitor }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: FormlyWrapperFormField, isStandalone: false, selector: "formly-wrapper-mat-form-field", viewQueries: [{ propertyName: "formField", first: true, predicate: MatFormField, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
+import * as i0 from "@angular/core";
+import { Component, Directive, NO_ERRORS_SCHEMA, NgModule, Type, ViewChild, ViewChildren, ViewEncapsulation } from "@angular/core";
+import * as i4 from "@ngx-formly/core";
+import { FieldType as FieldType$1, FieldWrapper, FormlyModule, ɵdefineHiddenProp, ɵobserve } from "@ngx-formly/core";
+import * as i3 from "@angular/material/form-field";
+import { MatFormField, MatFormFieldControl, MatFormFieldModule } from "@angular/material/form-field";
+import * as i1 from "@angular/cdk/a11y";
+import * as i2 from "@angular/common";
+import { CommonModule } from "@angular/common";
+import { ReactiveFormsModule } from "@angular/forms";
+import { Subject } from "rxjs";
+var FormlyWrapperFormField = class FormlyWrapperFormField extends FieldWrapper {
+	constructor(renderer, elementRef, focusMonitor) {
+		super();
+		this.renderer = renderer;
+		this.elementRef = elementRef;
+		this.focusMonitor = focusMonitor;
+	}
+	ngOnInit() {
+		ɵdefineHiddenProp(this.field, "_formField", this.formField);
+		this.focusMonitor.monitor(this.elementRef, true).subscribe((origin) => {
+			if (!origin && this.field.focus) this.field.focus = false;
+		});
+	}
+	ngAfterViewInit() {
+		if (this.formField.appearance !== "outline" && this.props.hideFieldUnderline === true) {
+			const underlineElement = this.formField._elementRef.nativeElement.querySelector(".mat-form-field-underline");
+			underlineElement && this.renderer.removeChild(underlineElement.parentNode, underlineElement);
+		}
+	}
+	ngOnDestroy() {
+		delete this.field._formField;
+		this.focusMonitor.stopMonitoring(this.elementRef);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: FormlyWrapperFormField,
+			deps: [
+				{ token: i0.Renderer2 },
+				{ token: i0.ElementRef },
+				{ token: i1.FocusMonitor }
+			],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: FormlyWrapperFormField,
+			isStandalone: false,
+			selector: "formly-wrapper-mat-form-field",
+			viewQueries: [{
+				propertyName: "formField",
+				first: true,
+				predicate: MatFormField,
+				descendants: true,
+				static: true
+			}],
+			usesInheritance: true,
+			ngImport: i0,
+			template: `
     <!-- fix https://github.com/angular/material2/pull/7083 by setting width to 100% -->
     <mat-form-field
       [hideRequiredMarker]="true"
       [floatLabel]="props.floatLabel"
       [appearance]="props.appearance"
-      [subscriptSizing]="props.subscriptSizing"
+      [subscriptSizing]="props.subscriptSizing ?? (field.validation?.showAllErrors ? 'dynamic' : undefined)"
       [color]="props.color ?? 'primary'"
     >
       <ng-container #fieldComponent></ng-container>
       @if (props.label && props.hideLabel !== true) {
         <mat-label>
-          {{ props.label }}
+          @if (props.allowHtml) {
+            <span [innerHTML]="props.label"></span>
+          } @else {
+            {{ props.label }}
+          }
           @if (props.required && props.hideRequiredMarker !== true) {
             <span aria-hidden="true" class="mat-form-field-required-marker mat-mdc-form-field-required-marker">*</span>
           }
@@ -94,7 +123,10 @@ class FormlyWrapperFormField extends FieldWrapper {
 
       @if (props.description || props.hintStart; as hint) {
         <mat-hint>
-          <ng-container [ngTemplateOutlet]="stringOrTemplate" [ngTemplateOutletContext]="{ content: hint }">
+          <ng-container
+            [ngTemplateOutlet]="stringOrTemplate"
+            [ngTemplateOutletContext]="{ content: hint, allowHtml: props.allowHtml && !!props.description }"
+          >
           </ng-container>
         </mat-hint>
       }
@@ -107,30 +139,110 @@ class FormlyWrapperFormField extends FieldWrapper {
       }
     </mat-form-field>
 
-    <ng-template #stringOrTemplate let-content="content">
+    <ng-template #stringOrTemplate let-content="content" let-allowHtml="allowHtml">
       @if (!content.createEmbeddedView) {
-        <ng-container>{{ content }}</ng-container>
+        @if (allowHtml) {
+          <span [innerHTML]="content"></span>
+        } @else {
+          <ng-container>{{ content }}</ng-container>
+        }
       } @else {
         <ng-container [ngTemplateOutlet]="content" [ngTemplateOutletContext]="{ field: field }"></ng-container>
       }
     </ng-template>
-  `, isInline: true, styles: ["formly-wrapper-mat-form-field .mat-mdc-form-field,formly-wrapper-mat-form-field .mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i4.LegacyFormlyValidationMessage, selector: "formly-validation-message" }], encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: FormlyWrapperFormField, decorators: [{
-            type: Component,
-            args: [{ selector: 'formly-wrapper-mat-form-field', template: `
+  `,
+			isInline: true,
+			styles: ["formly-wrapper-mat-form-field .mat-mdc-form-field,formly-wrapper-mat-form-field .mat-form-field{width:100%}\n"],
+			dependencies: [
+				{
+					kind: "directive",
+					type: i2.NgTemplateOutlet,
+					selector: "[ngTemplateOutlet]",
+					inputs: [
+						"ngTemplateOutletContext",
+						"ngTemplateOutlet",
+						"ngTemplateOutletInjector"
+					]
+				},
+				{
+					kind: "component",
+					type: i3.MatFormField,
+					selector: "mat-form-field",
+					inputs: [
+						"hideRequiredMarker",
+						"color",
+						"floatLabel",
+						"appearance",
+						"subscriptSizing",
+						"hintLabel"
+					],
+					exportAs: ["matFormField"]
+				},
+				{
+					kind: "directive",
+					type: i3.MatLabel,
+					selector: "mat-label"
+				},
+				{
+					kind: "directive",
+					type: i3.MatHint,
+					selector: "mat-hint",
+					inputs: ["align", "id"]
+				},
+				{
+					kind: "directive",
+					type: i3.MatError,
+					selector: "mat-error, [matError]",
+					inputs: ["id"]
+				},
+				{
+					kind: "directive",
+					type: i3.MatPrefix,
+					selector: "[matPrefix], [matIconPrefix], [matTextPrefix]",
+					inputs: ["matTextPrefix"]
+				},
+				{
+					kind: "directive",
+					type: i3.MatSuffix,
+					selector: "[matSuffix], [matIconSuffix], [matTextSuffix]",
+					inputs: ["matTextSuffix"]
+				},
+				{
+					kind: "component",
+					type: i4.LegacyFormlyValidationMessage,
+					selector: "formly-validation-message"
+				}
+			],
+			encapsulation: i0.ViewEncapsulation.None
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: FormlyWrapperFormField,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "formly-wrapper-mat-form-field",
+			template: `
     <!-- fix https://github.com/angular/material2/pull/7083 by setting width to 100% -->
     <mat-form-field
       [hideRequiredMarker]="true"
       [floatLabel]="props.floatLabel"
       [appearance]="props.appearance"
-      [subscriptSizing]="props.subscriptSizing"
+      [subscriptSizing]="props.subscriptSizing ?? (field.validation?.showAllErrors ? 'dynamic' : undefined)"
       [color]="props.color ?? 'primary'"
     >
       <ng-container #fieldComponent></ng-container>
       @if (props.label && props.hideLabel !== true) {
         <mat-label>
-          {{ props.label }}
+          @if (props.allowHtml) {
+            <span [innerHTML]="props.label"></span>
+          } @else {
+            {{ props.label }}
+          }
           @if (props.required && props.hideRequiredMarker !== true) {
             <span aria-hidden="true" class="mat-form-field-required-marker mat-mdc-form-field-required-marker">*</span>
           }
@@ -175,7 +287,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImpo
 
       @if (props.description || props.hintStart; as hint) {
         <mat-hint>
-          <ng-container [ngTemplateOutlet]="stringOrTemplate" [ngTemplateOutletContext]="{ content: hint }">
+          <ng-container
+            [ngTemplateOutlet]="stringOrTemplate"
+            [ngTemplateOutletContext]="{ content: hint, allowHtml: props.allowHtml && !!props.description }"
+          >
           </ng-container>
         </mat-hint>
       }
@@ -188,184 +303,283 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImpo
       }
     </mat-form-field>
 
-    <ng-template #stringOrTemplate let-content="content">
+    <ng-template #stringOrTemplate let-content="content" let-allowHtml="allowHtml">
       @if (!content.createEmbeddedView) {
-        <ng-container>{{ content }}</ng-container>
+        @if (allowHtml) {
+          <span [innerHTML]="content"></span>
+        } @else {
+          <ng-container>{{ content }}</ng-container>
+        }
       } @else {
         <ng-container [ngTemplateOutlet]="content" [ngTemplateOutletContext]="{ field: field }"></ng-container>
       }
     </ng-template>
-  `, encapsulation: ViewEncapsulation.None, standalone: false, styles: ["formly-wrapper-mat-form-field .mat-mdc-form-field,formly-wrapper-mat-form-field .mat-form-field{width:100%}\n"] }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i1.FocusMonitor }], propDecorators: { formField: [{
-                type: ViewChild,
-                args: [MatFormField, { static: true }]
-            }] } });
-
+  `,
+			encapsulation: ViewEncapsulation.None,
+			standalone: false,
+			styles: ["formly-wrapper-mat-form-field .mat-mdc-form-field,formly-wrapper-mat-form-field .mat-form-field{width:100%}\n"]
+		}]
+	}],
+	ctorParameters: () => [
+		{ type: i0.Renderer2 },
+		{ type: i0.ElementRef },
+		{ type: i1.FocusMonitor }
+	],
+	propDecorators: { formField: [{
+		type: ViewChild,
+		args: [MatFormField, { static: true }]
+	}] }
+});
 function withFormlyFormField() {
-    return {
-        wrappers: [
-            {
-                name: 'form-field',
-                component: FormlyWrapperFormField,
-            },
-        ],
-    };
-}
-
-class FormlyMatFormFieldModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: FormlyMatFormFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: FormlyMatFormFieldModule, declarations: [FormlyWrapperFormField], imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, i4.FormlyModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: FormlyMatFormFieldModule, imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, FormlyModule.forChild(withFormlyFormField())] }); }
+	return { wrappers: [{
+		name: "form-field",
+		component: FormlyWrapperFormField
+	}] };
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: FormlyMatFormFieldModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [FormlyWrapperFormField],
-                    imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, FormlyModule.forChild(withFormlyFormField())],
-                    schemas: [NO_ERRORS_SCHEMA],
-                }]
-        }] });
-
-class FieldType extends FieldType$1 {
-    constructor() {
-        super(...arguments);
-        this.errorStateMatcher = { isErrorState: () => this.field && this.showError };
-        this.stateChanges = new Subject();
-        this._errorState = false;
-        this._focused = false;
-    }
-    set matPrefix(prefix) {
-        if (prefix) {
-            this.props.prefix = prefix;
-        }
-    }
-    set matTextPrefix(textPrefix) {
-        if (textPrefix) {
-            this.props.textPrefix = textPrefix;
-        }
-    }
-    set matSuffix(suffix) {
-        if (suffix) {
-            this.props.suffix = suffix;
-        }
-    }
-    set matTextSuffix(textSuffix) {
-        if (textSuffix) {
-            this.props.textSuffix = textSuffix;
-        }
-    }
-    set _controls(controls) {
-        this.attachControl(controls.length === 1 ? controls.first : this);
-    }
-    ngOnDestroy() {
-        delete this.formField?._control;
-        this.stateChanges.complete();
-    }
-    setDescribedByIds(_ids) { }
-    onContainerClick(_event) {
-        this.field.focus = true;
-        this.stateChanges.next();
-    }
-    get errorState() {
-        const showError = this.options.showError(this);
-        if (showError !== this._errorState) {
-            this._errorState = showError;
-            this.stateChanges.next();
-        }
-        return showError;
-    }
-    get controlType() {
-        if (this.props.type) {
-            return this.props.type;
-        }
-        const type = this.field.type;
-        return type instanceof Type ? type.prototype.constructor.name : type;
-    }
-    get focused() {
-        const focused = !!this.field.focus && !this.disabled;
-        if (focused !== this._focused) {
-            this._focused = focused;
-            this.stateChanges.next();
-        }
-        return focused;
-    }
-    get disabled() {
-        return !!this.props.disabled;
-    }
-    get required() {
-        return !!this.props.required;
-    }
-    get placeholder() {
-        return this.props.placeholder || '';
-    }
-    get shouldPlaceholderFloat() {
-        return this.shouldLabelFloat;
-    }
-    get value() {
-        return this.formControl?.value;
-    }
-    set value(value) {
-        this.formControl?.patchValue(value);
-    }
-    get ngControl() {
-        return this.formControl;
-    }
-    get empty() {
-        return this.value == null || this.value === '';
-    }
-    get shouldLabelFloat() {
-        return this.focused || !this.empty;
-    }
-    get formField() {
-        return this.field?.['_formField'];
-    }
-    attachControl(control) {
-        if (this.formField && control !== this.formField._control) {
-            this.formField._control = control;
-            // temporary fix for https://github.com/angular/material2/issues/6728
-            const ngControl = control?.ngControl;
-            if (ngControl?.valueAccessor?.hasOwnProperty('_formField')) {
-                ngControl.valueAccessor['_formField'] = this.formField;
-            }
-            if (ngControl?.valueAccessor?.hasOwnProperty('_parentFormField')) {
-                ngControl.valueAccessor['_parentFormField'] = this.formField;
-            }
-            ['prefix', 'suffix', 'textPrefix', 'textSuffix'].forEach((type) => _observe(this.field, ['props', type], ({ currentValue }) => currentValue &&
-                Promise.resolve().then(() => {
-                    this.options.detectChanges(this.field);
-                })));
-            // https://github.com/angular/components/issues/16209
-            const setDescribedByIds = control.setDescribedByIds.bind(control);
-            control.setDescribedByIds = (ids) => {
-                setTimeout(() => setDescribedByIds(ids));
-            };
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: FieldType, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: FieldType, isStandalone: true, viewQueries: [{ propertyName: "matPrefix", first: true, predicate: ["matPrefix"], descendants: true }, { propertyName: "matTextPrefix", first: true, predicate: ["matTextPrefix"], descendants: true }, { propertyName: "matSuffix", first: true, predicate: ["matSuffix"], descendants: true }, { propertyName: "matTextSuffix", first: true, predicate: ["matTextSuffix"], descendants: true }, { propertyName: "_controls", predicate: MatFormFieldControl, descendants: true }], usesInheritance: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: FieldType, decorators: [{
-            type: Directive
-        }], propDecorators: { matPrefix: [{
-                type: ViewChild,
-                args: ['matPrefix']
-            }], matTextPrefix: [{
-                type: ViewChild,
-                args: ['matTextPrefix']
-            }], matSuffix: [{
-                type: ViewChild,
-                args: ['matSuffix']
-            }], matTextSuffix: [{
-                type: ViewChild,
-                args: ['matTextSuffix']
-            }], _controls: [{
-                type: ViewChildren,
-                args: [MatFormFieldControl]
-            }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+var FormlyMatFormFieldModule = class FormlyMatFormFieldModule {
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: FormlyMatFormFieldModule,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.NgModule
+		});
+	}
+	static {
+		this.ɵmod = i0.ɵɵngDeclareNgModule({
+			minVersion: "14.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: FormlyMatFormFieldModule,
+			declarations: [FormlyWrapperFormField],
+			imports: [
+				CommonModule,
+				ReactiveFormsModule,
+				MatFormFieldModule,
+				i4.FormlyModule
+			]
+		});
+	}
+	static {
+		this.ɵinj = i0.ɵɵngDeclareInjector({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: FormlyMatFormFieldModule,
+			imports: [
+				CommonModule,
+				ReactiveFormsModule,
+				MatFormFieldModule,
+				FormlyModule.forChild(withFormlyFormField())
+			]
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: FormlyMatFormFieldModule,
+	decorators: [{
+		type: NgModule,
+		args: [{
+			declarations: [FormlyWrapperFormField],
+			imports: [
+				CommonModule,
+				ReactiveFormsModule,
+				MatFormFieldModule,
+				FormlyModule.forChild(withFormlyFormField())
+			],
+			schemas: [NO_ERRORS_SCHEMA]
+		}]
+	}]
+});
+var FieldType = class FieldType extends FieldType$1 {
+	constructor() {
+		super(...arguments);
+		this.errorStateMatcher = { isErrorState: () => this.field && this.showError };
+		this.stateChanges = new Subject();
+		this._errorState = false;
+		this._focused = false;
+	}
+	set matPrefix(prefix) {
+		if (prefix) this.props.prefix = prefix;
+	}
+	set matTextPrefix(textPrefix) {
+		if (textPrefix) this.props.textPrefix = textPrefix;
+	}
+	set matSuffix(suffix) {
+		if (suffix) this.props.suffix = suffix;
+	}
+	set matTextSuffix(textSuffix) {
+		if (textSuffix) this.props.textSuffix = textSuffix;
+	}
+	set _controls(controls) {
+		this.attachControl(controls.length === 1 ? controls.first : this);
+	}
+	ngOnDestroy() {
+		delete this.formField?._control;
+		this.stateChanges.complete();
+	}
+	setDescribedByIds(_ids) {}
+	onContainerClick(_event) {
+		this.field.focus = true;
+		this.stateChanges.next();
+	}
+	get errorState() {
+		const showError = this.options.showError(this);
+		if (showError !== this._errorState) {
+			this._errorState = showError;
+			this.stateChanges.next();
+		}
+		return showError;
+	}
+	get controlType() {
+		if (this.props.type) return this.props.type;
+		const type = this.field.type;
+		return type instanceof Type ? type.prototype.constructor.name : type;
+	}
+	get focused() {
+		const focused = !!this.field.focus && !this.disabled;
+		if (focused !== this._focused) {
+			this._focused = focused;
+			this.stateChanges.next();
+		}
+		return focused;
+	}
+	get disabled() {
+		return !!this.props.disabled;
+	}
+	get required() {
+		return !!this.props.required;
+	}
+	get placeholder() {
+		return this.props.placeholder || "";
+	}
+	get shouldPlaceholderFloat() {
+		return this.shouldLabelFloat;
+	}
+	get value() {
+		return this.formControl?.value;
+	}
+	set value(value) {
+		this.formControl?.patchValue(value);
+	}
+	get ngControl() {
+		return this.formControl;
+	}
+	get empty() {
+		return this.value == null || this.value === "";
+	}
+	get shouldLabelFloat() {
+		return this.focused || !this.empty;
+	}
+	get formField() {
+		return this.field?.["_formField"];
+	}
+	attachControl(control) {
+		if (this.formField && control !== this.formField._control) {
+			this.formField._control = control;
+			const ngControl = control?.ngControl;
+			if (ngControl?.valueAccessor?.hasOwnProperty("_formField")) ngControl.valueAccessor["_formField"] = this.formField;
+			if (ngControl?.valueAccessor?.hasOwnProperty("_parentFormField")) ngControl.valueAccessor["_parentFormField"] = this.formField;
+			[
+				"prefix",
+				"suffix",
+				"textPrefix",
+				"textSuffix"
+			].forEach((type) => ɵobserve(this.field, ["props", type], ({ currentValue }) => currentValue && Promise.resolve().then(() => {
+				this.options.detectChanges(this.field);
+			})));
+			const setDescribedByIds = control.setDescribedByIds.bind(control);
+			control.setDescribedByIds = (ids) => {
+				setTimeout(() => setDescribedByIds(ids));
+			};
+		}
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: FieldType,
+			deps: null,
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "14.0.0",
+			version: "22.2.2",
+			type: FieldType,
+			isStandalone: true,
+			viewQueries: [
+				{
+					propertyName: "matPrefix",
+					first: true,
+					predicate: ["matPrefix"],
+					descendants: true
+				},
+				{
+					propertyName: "matTextPrefix",
+					first: true,
+					predicate: ["matTextPrefix"],
+					descendants: true
+				},
+				{
+					propertyName: "matSuffix",
+					first: true,
+					predicate: ["matSuffix"],
+					descendants: true
+				},
+				{
+					propertyName: "matTextSuffix",
+					first: true,
+					predicate: ["matTextSuffix"],
+					descendants: true
+				},
+				{
+					propertyName: "_controls",
+					predicate: MatFormFieldControl,
+					descendants: true
+				}
+			],
+			usesInheritance: true,
+			ngImport: i0
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: FieldType,
+	decorators: [{ type: Directive }],
+	propDecorators: {
+		matPrefix: [{
+			type: ViewChild,
+			args: ["matPrefix"]
+		}],
+		matTextPrefix: [{
+			type: ViewChild,
+			args: ["matTextPrefix"]
+		}],
+		matSuffix: [{
+			type: ViewChild,
+			args: ["matSuffix"]
+		}],
+		matTextSuffix: [{
+			type: ViewChild,
+			args: ["matTextSuffix"]
+		}],
+		_controls: [{
+			type: ViewChildren,
+			args: [MatFormFieldControl]
+		}]
+	}
+});
 export { FieldType, FormlyMatFormFieldModule, withFormlyFormField };
-//# sourceMappingURL=ngx-formly-material-form-field.mjs.map
+
+//# sourceMappingURL=ngx-formly-material-form-field.mjs.map