ngx-render-material-forms 2.5.9 → 2.5.11

package/esm2020/lib/components/formio-form-field/formio-form-field.component.mjs

@@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core';
 import { LabelPositions } from '../../const/LabelPositions';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
-import * as i2 from "@angular/material/legacy-form-field";
+import * as i2 from "@angular/material/form-field";
 import * as i3 from "@angular/flex-layout/extended";
 import * as i4 from "../label/label.component";
 export class FormioFormFieldComponent {
@@ -36,7 +36,7 @@ export class FormioFormFieldComponent {
     }
 }
 FormioFormFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FormioFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FormioFormFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FormioFormFieldComponent, selector: "mat-formio-form-field", inputs: { labelTemplate: "labelTemplate", renderTopLabel: "renderTopLabel", showDescription: "showDescription", renderElementOnly: "renderElementOnly", instance: "instance", componentTemplate: "componentTemplate" }, ngImport: i0, template: "<div class=\"mat-formio-component-wrapper\" *ngIf=\"instance && !renderElementOnly\"\r\n     [ngClass]=\"{\r\n        'mat-formio-label-right': hasLabel([labelPositions.RIGHT_RIGHT, labelPositions.RIGHT_LEFT]),\r\n        'mat-formio-label-left': hasLabel([labelPositions.LEFT_LEFT, labelPositions.LEFT_RIGHT])\r\n     }\"\r\n>\r\n  <span *ngIf=\"renderTopLabel && hasLabel([labelPositions.TOP])\"\r\n        class=\"mat-formio-label\"\r\n        [ngClass]=\"{\r\n          'mat-formio-label-align-right': hasLabel([labelPositions.LEFT_RIGHT, labelPositions.RIGHT_RIGHT]),\r\n          'mat-formio-label-align-left': hasLabel([labelPositions.LEFT_LEFT, labelPositions.RIGHT_LEFT])\r\n        }\"\r\n  >\r\n    <ng-container *ngTemplateOutlet=\"labelTemplate || defaultLabel\"></ng-container>\r\n  </span>\r\n\r\n  <div class=\"mat-formio-component\" *ngTemplateOutlet=\"componentTemplate; context: componentTemplateContext\"></div>\r\n\r\n  <span *ngIf=\"hasLabel([\r\n                          labelPositions.BOTTOM,\r\n                          labelPositions.RIGHT_RIGHT,\r\n                          labelPositions.RIGHT_LEFT,\r\n                          labelPositions.LEFT_LEFT,\r\n                          labelPositions.LEFT_RIGHT\r\n                        ])\"\r\n        class=\"mat-formio-label\"\r\n        [ngClass]=\"{\r\n          'mat-formio-label-align-right': hasLabel([labelPositions.LEFT_RIGHT, labelPositions.RIGHT_RIGHT]),\r\n          'mat-formio-label-align-left': hasLabel([labelPositions.LEFT_LEFT, labelPositions.RIGHT_LEFT])\r\n        }\"\r\n  >\r\n    <ng-container *ngTemplateOutlet=\"labelTemplate || defaultLabel\"></ng-container>\r\n  </span>\r\n\r\n  <mat-hint *ngIf=\"showDescription && instance.component.description\" class=\"mat-formio-component-description\">\r\n    {{ instance.component.description }}\r\n  </mat-hint>\r\n</div>\r\n\r\n<div class=\"mat-formio-component-wrapper\" *ngIf=\"renderElementOnly\">\r\n  <div class=\"mat-formio-component\" *ngTemplateOutlet=\"componentTemplate; context: componentTemplateContext\"></div>\r\n</div>\r\n\r\n<ng-template #defaultLabel>\r\n  <mat-label>\r\n    <span style=\"display: block;\"\r\n          [instance]=\"instance\" matFormioLabel>\r\n    </span>\r\n  </mat-label>\r\n</ng-template>\r\n", styles: [".mat-formio-component-description{display:block;grid-area:description}.mat-formio-component{grid-area:component}.mat-formio-label{grid-area:label}.mat-formio-label.mat-formio-label-align-right{margin-left:auto}.mat-formio-label.mat-formio-label-align-left{margin-right:auto}.mat-formio-component-wrapper.mat-formio-label-left,.mat-formio-component-wrapper.mat-formio-label-right{display:grid;grid-template-columns:auto auto;grid-column-gap:1em}.mat-formio-component-wrapper.mat-formio-label-right{grid-template-areas:\"component label\" \"description label\"}.mat-formio-component-wrapper.mat-formio-label-left{grid-template-areas:\"label component\" \"label description\"}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.MatLegacyHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatLegacyLabel, selector: "mat-label" }, { kind: "directive", type: i3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: i4.LabelComponent, selector: "span[matFormioLabel]", inputs: ["instance"] }] });
+FormioFormFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FormioFormFieldComponent, selector: "mat-formio-form-field", inputs: { labelTemplate: "labelTemplate", renderTopLabel: "renderTopLabel", showDescription: "showDescription", renderElementOnly: "renderElementOnly", instance: "instance", componentTemplate: "componentTemplate" }, ngImport: i0, template: "<div class=\"mat-formio-component-wrapper\" *ngIf=\"instance && !renderElementOnly\"\r\n     [ngClass]=\"{\r\n        'mat-formio-label-right': hasLabel([labelPositions.RIGHT_RIGHT, labelPositions.RIGHT_LEFT]),\r\n        'mat-formio-label-left': hasLabel([labelPositions.LEFT_LEFT, labelPositions.LEFT_RIGHT])\r\n     }\"\r\n>\r\n  <span *ngIf=\"renderTopLabel && hasLabel([labelPositions.TOP])\"\r\n        class=\"mat-formio-label\"\r\n        [ngClass]=\"{\r\n          'mat-formio-label-align-right': hasLabel([labelPositions.LEFT_RIGHT, labelPositions.RIGHT_RIGHT]),\r\n          'mat-formio-label-align-left': hasLabel([labelPositions.LEFT_LEFT, labelPositions.RIGHT_LEFT])\r\n        }\"\r\n  >\r\n    <ng-container *ngTemplateOutlet=\"labelTemplate || defaultLabel\"></ng-container>\r\n  </span>\r\n\r\n  <div class=\"mat-formio-component\" *ngTemplateOutlet=\"componentTemplate; context: componentTemplateContext\"></div>\r\n\r\n  <span *ngIf=\"hasLabel([\r\n                          labelPositions.BOTTOM,\r\n                          labelPositions.RIGHT_RIGHT,\r\n                          labelPositions.RIGHT_LEFT,\r\n                          labelPositions.LEFT_LEFT,\r\n                          labelPositions.LEFT_RIGHT\r\n                        ])\"\r\n        class=\"mat-formio-label\"\r\n        [ngClass]=\"{\r\n          'mat-formio-label-align-right': hasLabel([labelPositions.LEFT_RIGHT, labelPositions.RIGHT_RIGHT]),\r\n          'mat-formio-label-align-left': hasLabel([labelPositions.LEFT_LEFT, labelPositions.RIGHT_LEFT])\r\n        }\"\r\n  >\r\n    <ng-container *ngTemplateOutlet=\"labelTemplate || defaultLabel\"></ng-container>\r\n  </span>\r\n\r\n  <mat-hint *ngIf=\"showDescription && instance.component.description\" class=\"mat-formio-component-description\">\r\n    {{ instance.component.description }}\r\n  </mat-hint>\r\n</div>\r\n\r\n<div class=\"mat-formio-component-wrapper\" *ngIf=\"renderElementOnly\">\r\n  <div class=\"mat-formio-component\" *ngTemplateOutlet=\"componentTemplate; context: componentTemplateContext\"></div>\r\n</div>\r\n\r\n<ng-template #defaultLabel>\r\n  <mat-label>\r\n    <span style=\"display: block;\"\r\n          [instance]=\"instance\" matFormioLabel>\r\n    </span>\r\n  </mat-label>\r\n</ng-template>\r\n", styles: [".mat-formio-component-description{display:block;grid-area:description}.mat-formio-component{grid-area:component}.mat-formio-label{grid-area:label}.mat-formio-label.mat-formio-label-align-right{margin-left:auto}.mat-formio-label.mat-formio-label-align-left{margin-right:auto}.mat-formio-component-wrapper.mat-formio-label-left,.mat-formio-component-wrapper.mat-formio-label-right{display:grid;grid-template-columns:auto auto;grid-column-gap:1em}.mat-formio-component-wrapper.mat-formio-label-right{grid-template-areas:\"component label\" \"description label\"}.mat-formio-component-wrapper.mat-formio-label-left{grid-template-areas:\"label component\" \"label description\"}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: i4.LabelComponent, selector: "span[matFormioLabel]", inputs: ["instance"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FormioFormFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mat-formio-form-field', template: "<div class=\"mat-formio-component-wrapper\" *ngIf=\"instance && !renderElementOnly\"\r\n     [ngClass]=\"{\r\n        'mat-formio-label-right': hasLabel([labelPositions.RIGHT_RIGHT, labelPositions.RIGHT_LEFT]),\r\n        'mat-formio-label-left': hasLabel([labelPositions.LEFT_LEFT, labelPositions.LEFT_RIGHT])\r\n     }\"\r\n>\r\n  <span *ngIf=\"renderTopLabel && hasLabel([labelPositions.TOP])\"\r\n        class=\"mat-formio-label\"\r\n        [ngClass]=\"{\r\n          'mat-formio-label-align-right': hasLabel([labelPositions.LEFT_RIGHT, labelPositions.RIGHT_RIGHT]),\r\n          'mat-formio-label-align-left': hasLabel([labelPositions.LEFT_LEFT, labelPositions.RIGHT_LEFT])\r\n        }\"\r\n  >\r\n    <ng-container *ngTemplateOutlet=\"labelTemplate || defaultLabel\"></ng-container>\r\n  </span>\r\n\r\n  <div class=\"mat-formio-component\" *ngTemplateOutlet=\"componentTemplate; context: componentTemplateContext\"></div>\r\n\r\n  <span *ngIf=\"hasLabel([\r\n                          labelPositions.BOTTOM,\r\n                          labelPositions.RIGHT_RIGHT,\r\n                          labelPositions.RIGHT_LEFT,\r\n                          labelPositions.LEFT_LEFT,\r\n                          labelPositions.LEFT_RIGHT\r\n                        ])\"\r\n        class=\"mat-formio-label\"\r\n        [ngClass]=\"{\r\n          'mat-formio-label-align-right': hasLabel([labelPositions.LEFT_RIGHT, labelPositions.RIGHT_RIGHT]),\r\n          'mat-formio-label-align-left': hasLabel([labelPositions.LEFT_LEFT, labelPositions.RIGHT_LEFT])\r\n        }\"\r\n  >\r\n    <ng-container *ngTemplateOutlet=\"labelTemplate || defaultLabel\"></ng-container>\r\n  </span>\r\n\r\n  <mat-hint *ngIf=\"showDescription && instance.component.description\" class=\"mat-formio-component-description\">\r\n    {{ instance.component.description }}\r\n  </mat-hint>\r\n</div>\r\n\r\n<div class=\"mat-formio-component-wrapper\" *ngIf=\"renderElementOnly\">\r\n  <div class=\"mat-formio-component\" *ngTemplateOutlet=\"componentTemplate; context: componentTemplateContext\"></div>\r\n</div>\r\n\r\n<ng-template #defaultLabel>\r\n  <mat-label>\r\n    <span style=\"display: block;\"\r\n          [instance]=\"instance\" matFormioLabel>\r\n    </span>\r\n  </mat-label>\r\n</ng-template>\r\n", styles: [".mat-formio-component-description{display:block;grid-area:description}.mat-formio-component{grid-area:component}.mat-formio-label{grid-area:label}.mat-formio-label.mat-formio-label-align-right{margin-left:auto}.mat-formio-label.mat-formio-label-align-left{margin-right:auto}.mat-formio-component-wrapper.mat-formio-label-left,.mat-formio-component-wrapper.mat-formio-label-right{display:grid;grid-template-columns:auto auto;grid-column-gap:1em}.mat-formio-component-wrapper.mat-formio-label-right{grid-template-areas:\"component label\" \"description label\"}.mat-formio-component-wrapper.mat-formio-label-left{grid-template-areas:\"label component\" \"label description\"}\n"] }]

package/esm2020/lib/components/formio.wizard.mjs

@@ -4,7 +4,7 @@ import Displays from 'formiojs/displays/Displays';
 import { MaterialNestedComponent } from './MaterialNestedComponent';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
-import * as i2 from "@angular/material/legacy-button";
+import * as i2 from "@angular/material/button";
 import * as i3 from "@angular/material/stepper";
 export class MaterialWizardComponent extends MaterialNestedComponent {
     constructor() {
@@ -63,7 +63,7 @@ MaterialWizardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
           <button *ngIf="instance.hasButton('submit')" mat-raised-button color="primary" (click)="submit()">Submit</button>
         </div>
       </mat-step>
-    </mat-horizontal-stepper>`, isInline: true, styles: [":host .navigation-button-row{margin-top:8px}\n", ":host .navigation-button-row button{margin-right:8px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatLegacyButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "component", type: i3.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["selectedIndex", "disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }] });
+    </mat-horizontal-stepper>`, isInline: true, styles: [":host .navigation-button-row{margin-top:8px}\n", ":host .navigation-button-row button{margin-right:8px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "component", type: i3.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["selectedIndex", "disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MaterialWizardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mat-formio-wizard', template: `

package/esm2020/lib/components/hidden/hidden.component.mjs

@@ -3,11 +3,11 @@ import { MaterialComponent } from '../MaterialComponent';
 import HiddenComponent from 'formiojs/components/hidden/Hidden.js';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/forms";
-import * as i2 from "@angular/material/legacy-input";
+import * as i2 from "@angular/material/input";
 export class MaterialHiddenComponent extends MaterialComponent {
 }
 MaterialHiddenComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MaterialHiddenComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MaterialHiddenComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MaterialHiddenComponent, selector: "mat-formio-hidden", usesInheritance: true, ngImport: i0, template: `<input matInput type="hidden" [formControl]="control" #input>`, isInline: true, dependencies: [{ kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.MatLegacyInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", exportAs: ["matInput"] }] });
+MaterialHiddenComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MaterialHiddenComponent, selector: "mat-formio-hidden", usesInheritance: true, ngImport: i0, template: `<input matInput type="hidden" [formControl]="control" #input>`, isInline: true, dependencies: [{ kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MaterialHiddenComponent, decorators: [{
             type: Component,
             args: [{

package/esm2020/lib/components/label/label.component.mjs

@@ -1,13 +1,13 @@
 import { Component, Input } from '@angular/core';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
-import * as i2 from "@angular/material/legacy-form-field";
-import * as i3 from "@angular/material/legacy-tooltip";
+import * as i2 from "@angular/material/form-field";
+import * as i3 from "@angular/material/tooltip";
 import * as i4 from "@angular/material/icon";
 export class LabelComponent {
 }
 LabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-LabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: LabelComponent, selector: "span[matFormioLabel]", inputs: { instance: "instance" }, ngImport: i0, template: "<ng-container *ngIf=\"instance\">\r\n  {{ instance.component.label }}<span class=\"required-star\" *ngIf=\"instance.component.validate.required\">*</span>\r\n  <mat-icon *ngIf=\"instance.component.tooltip\" style=\"font-size: 1rem;\"\r\n            matTooltip=\"{{ instance.component.tooltip }}\" matSuffix\r\n  >\r\n    info\r\n  </mat-icon>\r\n</ng-container>\r\n", styles: [":host{pointer-events:all;display:block}.required-star{margin-left:.2rem;color:red;font-size:.8rem;vertical-align:top}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.MatLegacySuffix, selector: "[matSuffix]" }, { kind: "directive", type: i3.MatLegacyTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+LabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: LabelComponent, selector: "span[matFormioLabel]", inputs: { instance: "instance" }, ngImport: i0, template: "<ng-container *ngIf=\"instance\">\r\n  {{ instance.component.label }}<span class=\"required-star\" *ngIf=\"instance.component.validate.required\">*</span>\r\n  <mat-icon *ngIf=\"instance.component.tooltip\" style=\"font-size: 1rem;\"\r\n            matTooltip=\"{{ instance.component.tooltip }}\" matSuffix\r\n  >\r\n    info\r\n  </mat-icon>\r\n</ng-container>\r\n", styles: [":host{pointer-events:all;display:block}.required-star{margin-left:.2rem;color:red;font-size:.8rem;vertical-align:top}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LabelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'span[matFormioLabel]', template: "<ng-container *ngIf=\"instance\">\r\n  {{ instance.component.label }}<span class=\"required-star\" *ngIf=\"instance.component.validate.required\">*</span>\r\n  <mat-icon *ngIf=\"instance.component.tooltip\" style=\"font-size: 1rem;\"\r\n            matTooltip=\"{{ instance.component.tooltip }}\" matSuffix\r\n  >\r\n    info\r\n  </mat-icon>\r\n</ng-container>\r\n", styles: [":host{pointer-events:all;display:block}.required-star{margin-left:.2rem;color:red;font-size:.8rem;vertical-align:top}\n"] }]

package/esm2020/lib/components/number/number.component.mjs

@@ -5,8 +5,8 @@ import _ from 'lodash';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
 import * as i2 from "@angular/forms";
-import * as i3 from "@angular/material/legacy-form-field";
-import * as i4 from "@angular/material/legacy-input";
+import * as i3 from "@angular/material/input";
+import * as i4 from "@angular/material/form-field";
 import * as i5 from "@angular/flex-layout/flex";
 import * as i6 from "@angular/flex-layout/extended";
 import * as i7 from "../formio-form-field/formio-form-field.component";
@@ -54,7 +54,7 @@ export class MaterialNumberComponent extends MaterialTextfieldComponent {
     }
 }
 MaterialNumberComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MaterialNumberComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-MaterialNumberComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MaterialNumberComponent, selector: "mat-formio-number", usesInheritance: true, ngImport: i0, template: "\n  <mat-formio-form-field [instance]=\"instance\" [componentTemplate]=\"componentTemplate\"></mat-formio-form-field>\n  <ng-template #componentTemplate let-hasLabel>\n    <mat-form-field [appearance]=\"getFormFieldAppearance()\" fxFill>\n\n      <mat-label *ngIf=\"hasLabel\">\n          <span [instance]=\"instance\" matFormioLabel></span>\n      </mat-label>\n\n      <span *ngIf=\"instance.component.prefix && instance.type !== 'currency'\"\n            matPrefix\n      >\n        {{ instance.component.prefix }}&nbsp;\n      </span>\n      <input matInput\n            type=\"{{ inputType }}\"\n            [formControl]=\"control\"\n            [placeholder]=\"instance.component.placeholder\"\n            (input)=\"onChange()\" #input\n            [ngClass]=\"{ 'show-invalid': inputType=='email' }\"\n      >\n      <span *ngIf=\"instance.component.suffix\" matSuffix>{{ instance.component.suffix }}</span>\n\n      <mat-hint *ngIf=\"instance.component.showWordCount || instance.component.showCharCount\">\n        {{ getHint() }}\n      </mat-hint>\n\n      <br/>\n      <mat-error *ngIf=\"isError()\" >{{ getErrorMessage() }}</mat-error>\n    </mat-form-field>\n  </ng-template>\n", isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.MatLegacyError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i3.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLegacyHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatLegacyLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatLegacyPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i3.MatLegacySuffix, selector: "[matSuffix]" }, { kind: "directive", type: i4.MatLegacyInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", exportAs: ["matInput"] }, { kind: "directive", type: i5.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i6.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: i7.FormioFormFieldComponent, selector: "mat-formio-form-field", inputs: ["labelTemplate", "renderTopLabel", "showDescription", "renderElementOnly", "instance", "componentTemplate"] }, { kind: "component", type: i8.LabelComponent, selector: "span[matFormioLabel]", inputs: ["instance"] }] });
+MaterialNumberComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MaterialNumberComponent, selector: "mat-formio-number", usesInheritance: true, ngImport: i0, template: "\n  <mat-formio-form-field [instance]=\"instance\" [componentTemplate]=\"componentTemplate\"></mat-formio-form-field>\n  <ng-template #componentTemplate let-hasLabel>\n    <mat-form-field [appearance]=\"getFormFieldAppearance()\" fxFill>\n\n      <mat-label *ngIf=\"hasLabel\">\n          <span [instance]=\"instance\" matFormioLabel></span>\n      </mat-label>\n\n      <span *ngIf=\"instance.component.prefix && instance.type !== 'currency'\"\n            matPrefix\n      >\n        {{ instance.component.prefix }}&nbsp;\n      </span>\n      <input matInput\n            type=\"{{ inputType }}\"\n            [formControl]=\"control\"\n            [placeholder]=\"instance.component.placeholder\"\n            (input)=\"onChange()\" #input\n            [ngClass]=\"{ 'show-invalid': inputType=='email' }\"\n      >\n      <span *ngIf=\"instance.component.suffix\" matSuffix>{{ instance.component.suffix }}</span>\n\n      <mat-hint *ngIf=\"instance.component.showWordCount || instance.component.showCharCount\">\n        {{ getHint() }}\n      </mat-hint>\n\n      <br/>\n      <mat-error *ngIf=\"isError()\" >{{ getErrorMessage() }}</mat-error>\n    </mat-form-field>\n  </ng-template>\n", isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i5.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i6.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: i7.FormioFormFieldComponent, selector: "mat-formio-form-field", inputs: ["labelTemplate", "renderTopLabel", "showDescription", "renderElementOnly", "instance", "componentTemplate"] }, { kind: "component", type: i8.LabelComponent, selector: "span[matFormioLabel]", inputs: ["instance"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MaterialNumberComponent, decorators: [{
             type: Component,
             args: [{

package/esm2020/lib/components/panel/panel.component.mjs

@@ -5,12 +5,12 @@ import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
 import * as i2 from "@angular/material/expansion";
 import * as i3 from "@angular/flex-layout/flex";
-import * as i4 from "@angular/material/legacy-card";
+import * as i4 from "@angular/material/card";
 export class MaterialPanelComponent extends MaterialNestedComponent {
 }
 MaterialPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MaterialPanelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
 MaterialPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MaterialPanelComponent, selector: "mat-formio-panel", usesInheritance: true, ngImport: i0, template: `
-    <mat-card *ngIf="!instance.component.collapsible">
+    <mat-card appearance="outlined" *ngIf="!instance.component.collapsible">
       <mat-card-title *ngIf="instance?.component?.title">
         {{ instance.component.title }}
       </mat-card-title>
@@ -28,11 +28,11 @@ MaterialPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
       </mat-expansion-panel-header>
       <ng-template #components></ng-template>
     </mat-expansion-panel>
-  `, isInline: true, styles: [":host{margin-bottom:1em}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i2.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i3.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "component", type: i4.MatLegacyCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i4.MatLegacyCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "directive", type: i4.MatLegacyCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }] });
+  `, isInline: true, styles: [":host{margin-bottom:1em}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i2.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i3.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i4.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MaterialPanelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mat-formio-panel', template: `
-    <mat-card *ngIf="!instance.component.collapsible">
+    <mat-card appearance="outlined" *ngIf="!instance.component.collapsible">
       <mat-card-title *ngIf="instance?.component?.title">
         {{ instance.component.title }}
       </mat-card-title>
@@ -54,4 +54,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
         }] });
 PanelComponent.MaterialComponent = MaterialPanelComponent;
 export { PanelComponent };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFuZWwuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXJlbmRlci1tYXRlcmlhbC1mb3Jtcy9zcmMvbGliL2NvbXBvbmVudHMvcGFuZWwvcGFuZWwuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDMUMsT0FBTyxFQUFFLHVCQUF1QixFQUFFLE1BQU0sNEJBQTRCLENBQUM7QUFDckUsT0FBTyxjQUFjLE1BQU0sb0NBQW9DLENBQUM7Ozs7OztBQTJCaEUsTUFBTSxPQUFPLHNCQUF1QixTQUFRLHVCQUF1Qjs7b0hBQXRELHNCQUFzQjt3R0FBdEIsc0JBQXNCLCtFQXhCdkI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0FtQlQ7NEZBS1Usc0JBQXNCO2tCQTFCbEMsU0FBUzsrQkFDRSxrQkFBa0IsWUFDbEI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0FtQlQ7O0FBTUgsY0FBYyxDQUFDLGlCQUFpQixHQUFHLHNCQUFzQixDQUFDO0FBQzFELE9BQU8sRUFBRSxjQUFjLEVBQUUsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBNYXRlcmlhbE5lc3RlZENvbXBvbmVudCB9IGZyb20gJy4uL01hdGVyaWFsTmVzdGVkQ29tcG9uZW50JztcclxuaW1wb3J0IFBhbmVsQ29tcG9uZW50IGZyb20gJ2Zvcm1pb2pzL2NvbXBvbmVudHMvcGFuZWwvUGFuZWwuanMnO1xyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ21hdC1mb3JtaW8tcGFuZWwnLFxyXG4gIHRlbXBsYXRlOiBgXHJcbiAgICA8bWF0LWNhcmQgKm5nSWY9XCIhaW5zdGFuY2UuY29tcG9uZW50LmNvbGxhcHNpYmxlXCI+XHJcbiAgICAgIDxtYXQtY2FyZC10aXRsZSAqbmdJZj1cImluc3RhbmNlPy5jb21wb25lbnQ/LnRpdGxlXCI+XHJcbiAgICAgICAge3sgaW5zdGFuY2UuY29tcG9uZW50LnRpdGxlIH19XHJcbiAgICAgIDwvbWF0LWNhcmQtdGl0bGU+XHJcbiAgICAgIDxtYXQtY2FyZC1jb250ZW50IGZ4TGF5b3V0PVwiY29sdW1uXCIgZnhMYXlvdXRHYXA9XCIxZW1cIj5cclxuICAgICAgICA8bmctdGVtcGxhdGUgI2NvbXBvbmVudHM+PC9uZy10ZW1wbGF0ZT5cclxuICAgICAgPC9tYXQtY2FyZC1jb250ZW50PlxyXG4gICAgPC9tYXQtY2FyZD5cclxuICAgIDxtYXQtZXhwYW5zaW9uLXBhbmVsICpuZ0lmPVwiaW5zdGFuY2UuY29tcG9uZW50LmNvbGxhcHNpYmxlXCJcclxuICAgICAgICAgICAgICAgICAgICAgICAgIFtleHBhbmRlZF09XCIhaW5zdGFuY2UuY29tcG9uZW50LmNvbGxhcHNlZFwiXHJcbiAgICA+XHJcbiAgICAgIDxtYXQtZXhwYW5zaW9uLXBhbmVsLWhlYWRlciAqbmdJZj1cImluc3RhbmNlPy5jb21wb25lbnQ/LnRpdGxlXCI+XHJcbiAgICAgICAgPG1hdC1wYW5lbC10aXRsZT5cclxuICAgICAgICAgIHt7IGluc3RhbmNlLmNvbXBvbmVudC50aXRsZSB9fVxyXG4gICAgICAgIDwvbWF0LXBhbmVsLXRpdGxlPlxyXG4gICAgICA8L21hdC1leHBhbnNpb24tcGFuZWwtaGVhZGVyPlxyXG4gICAgICA8bmctdGVtcGxhdGUgI2NvbXBvbmVudHM+PC9uZy10ZW1wbGF0ZT5cclxuICAgIDwvbWF0LWV4cGFuc2lvbi1wYW5lbD5cclxuICBgLFxyXG4gIHN0eWxlczogW1xyXG4gICAgJzpob3N0IHsgbWFyZ2luLWJvdHRvbTogMWVtOyB9J1xyXG4gIF1cclxufSlcclxuZXhwb3J0IGNsYXNzIE1hdGVyaWFsUGFuZWxDb21wb25lbnQgZXh0ZW5kcyBNYXRlcmlhbE5lc3RlZENvbXBvbmVudCB7fVxyXG5QYW5lbENvbXBvbmVudC5NYXRlcmlhbENvbXBvbmVudCA9IE1hdGVyaWFsUGFuZWxDb21wb25lbnQ7XHJcbmV4cG9ydCB7IFBhbmVsQ29tcG9uZW50IH07XHJcbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFuZWwuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXJlbmRlci1tYXRlcmlhbC1mb3Jtcy9zcmMvbGliL2NvbXBvbmVudHMvcGFuZWwvcGFuZWwuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDMUMsT0FBTyxFQUFFLHVCQUF1QixFQUFFLE1BQU0sNEJBQTRCLENBQUM7QUFDckUsT0FBTyxjQUFjLE1BQU0sb0NBQW9DLENBQUM7Ozs7OztBQTJCaEUsTUFBTSxPQUFPLHNCQUF1QixTQUFRLHVCQUF1Qjs7b0hBQXRELHNCQUFzQjt3R0FBdEIsc0JBQXNCLCtFQXhCdkI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0FtQlQ7NEZBS1Usc0JBQXNCO2tCQTFCbEMsU0FBUzsrQkFDRSxrQkFBa0IsWUFDbEI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0FtQlQ7O0FBTUgsY0FBYyxDQUFDLGlCQUFpQixHQUFHLHNCQUFzQixDQUFDO0FBQzFELE9BQU8sRUFBRSxjQUFjLEVBQUUsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBNYXRlcmlhbE5lc3RlZENvbXBvbmVudCB9IGZyb20gJy4uL01hdGVyaWFsTmVzdGVkQ29tcG9uZW50JztcclxuaW1wb3J0IFBhbmVsQ29tcG9uZW50IGZyb20gJ2Zvcm1pb2pzL2NvbXBvbmVudHMvcGFuZWwvUGFuZWwuanMnO1xyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ21hdC1mb3JtaW8tcGFuZWwnLFxyXG4gIHRlbXBsYXRlOiBgXHJcbiAgICA8bWF0LWNhcmQgYXBwZWFyYW5jZT1cIm91dGxpbmVkXCIgKm5nSWY9XCIhaW5zdGFuY2UuY29tcG9uZW50LmNvbGxhcHNpYmxlXCI+XHJcbiAgICAgIDxtYXQtY2FyZC10aXRsZSAqbmdJZj1cImluc3RhbmNlPy5jb21wb25lbnQ/LnRpdGxlXCI+XHJcbiAgICAgICAge3sgaW5zdGFuY2UuY29tcG9uZW50LnRpdGxlIH19XHJcbiAgICAgIDwvbWF0LWNhcmQtdGl0bGU+XHJcbiAgICAgIDxtYXQtY2FyZC1jb250ZW50IGZ4TGF5b3V0PVwiY29sdW1uXCIgZnhMYXlvdXRHYXA9XCIxZW1cIj5cclxuICAgICAgICA8bmctdGVtcGxhdGUgI2NvbXBvbmVudHM+PC9uZy10ZW1wbGF0ZT5cclxuICAgICAgPC9tYXQtY2FyZC1jb250ZW50PlxyXG4gICAgPC9tYXQtY2FyZD5cclxuICAgIDxtYXQtZXhwYW5zaW9uLXBhbmVsICpuZ0lmPVwiaW5zdGFuY2UuY29tcG9uZW50LmNvbGxhcHNpYmxlXCJcclxuICAgICAgICAgICAgICAgICAgICAgICAgIFtleHBhbmRlZF09XCIhaW5zdGFuY2UuY29tcG9uZW50LmNvbGxhcHNlZFwiXHJcbiAgICA+XHJcbiAgICAgIDxtYXQtZXhwYW5zaW9uLXBhbmVsLWhlYWRlciAqbmdJZj1cImluc3RhbmNlPy5jb21wb25lbnQ/LnRpdGxlXCI+XHJcbiAgICAgICAgPG1hdC1wYW5lbC10aXRsZT5cclxuICAgICAgICAgIHt7IGluc3RhbmNlLmNvbXBvbmVudC50aXRsZSB9fVxyXG4gICAgICAgIDwvbWF0LXBhbmVsLXRpdGxlPlxyXG4gICAgICA8L21hdC1leHBhbnNpb24tcGFuZWwtaGVhZGVyPlxyXG4gICAgICA8bmctdGVtcGxhdGUgI2NvbXBvbmVudHM+PC9uZy10ZW1wbGF0ZT5cclxuICAgIDwvbWF0LWV4cGFuc2lvbi1wYW5lbD5cclxuICBgLFxyXG4gIHN0eWxlczogW1xyXG4gICAgJzpob3N0IHsgbWFyZ2luLWJvdHRvbTogMWVtOyB9J1xyXG4gIF1cclxufSlcclxuZXhwb3J0IGNsYXNzIE1hdGVyaWFsUGFuZWxDb21wb25lbnQgZXh0ZW5kcyBNYXRlcmlhbE5lc3RlZENvbXBvbmVudCB7fVxyXG5QYW5lbENvbXBvbmVudC5NYXRlcmlhbENvbXBvbmVudCA9IE1hdGVyaWFsUGFuZWxDb21wb25lbnQ7XHJcbmV4cG9ydCB7IFBhbmVsQ29tcG9uZW50IH07XHJcbiJdfQ==

package/esm2020/lib/components/password/password.component.mjs

@@ -4,8 +4,8 @@ import PasswordComponent from 'formiojs/components/password/Password.js';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
 import * as i2 from "@angular/forms";
-import * as i3 from "@angular/material/legacy-form-field";
-import * as i4 from "@angular/material/legacy-input";
+import * as i3 from "@angular/material/input";
+import * as i4 from "@angular/material/form-field";
 import * as i5 from "@angular/flex-layout/flex";
 import * as i6 from "@angular/flex-layout/extended";
 import * as i7 from "../formio-form-field/formio-form-field.component";
@@ -17,7 +17,7 @@ export class MaterialPasswordComponent extends MaterialTextfieldComponent {
     }
 }
 MaterialPasswordComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MaterialPasswordComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MaterialPasswordComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MaterialPasswordComponent, selector: "mat-formio-password", usesInheritance: true, ngImport: i0, template: "\n  <mat-formio-form-field [instance]=\"instance\" [componentTemplate]=\"componentTemplate\"></mat-formio-form-field>\n  <ng-template #componentTemplate let-hasLabel>\n    <mat-form-field [appearance]=\"getFormFieldAppearance()\" fxFill>\n\n      <mat-label *ngIf=\"hasLabel\">\n          <span [instance]=\"instance\" matFormioLabel></span>\n      </mat-label>\n\n      <span *ngIf=\"instance.component.prefix && instance.type !== 'currency'\"\n            matPrefix\n      >\n        {{ instance.component.prefix }}&nbsp;\n      </span>\n      <input matInput\n            type=\"{{ inputType }}\"\n            [formControl]=\"control\"\n            [placeholder]=\"instance.component.placeholder\"\n            (input)=\"onChange()\" #input\n            [ngClass]=\"{ 'show-invalid': inputType=='email' }\"\n      >\n      <span *ngIf=\"instance.component.suffix\" matSuffix>{{ instance.component.suffix }}</span>\n\n      <mat-hint *ngIf=\"instance.component.showWordCount || instance.component.showCharCount\">\n        {{ getHint() }}\n      </mat-hint>\n\n      <br/>\n      <mat-error *ngIf=\"isError()\" >{{ getErrorMessage() }}</mat-error>\n    </mat-form-field>\n  </ng-template>\n", isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.MatLegacyError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i3.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLegacyHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatLegacyLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatLegacyPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i3.MatLegacySuffix, selector: "[matSuffix]" }, { kind: "directive", type: i4.MatLegacyInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", exportAs: ["matInput"] }, { kind: "directive", type: i5.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i6.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: i7.FormioFormFieldComponent, selector: "mat-formio-form-field", inputs: ["labelTemplate", "renderTopLabel", "showDescription", "renderElementOnly", "instance", "componentTemplate"] }, { kind: "component", type: i8.LabelComponent, selector: "span[matFormioLabel]", inputs: ["instance"] }] });
+MaterialPasswordComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MaterialPasswordComponent, selector: "mat-formio-password", usesInheritance: true, ngImport: i0, template: "\n  <mat-formio-form-field [instance]=\"instance\" [componentTemplate]=\"componentTemplate\"></mat-formio-form-field>\n  <ng-template #componentTemplate let-hasLabel>\n    <mat-form-field [appearance]=\"getFormFieldAppearance()\" fxFill>\n\n      <mat-label *ngIf=\"hasLabel\">\n          <span [instance]=\"instance\" matFormioLabel></span>\n      </mat-label>\n\n      <span *ngIf=\"instance.component.prefix && instance.type !== 'currency'\"\n            matPrefix\n      >\n        {{ instance.component.prefix }}&nbsp;\n      </span>\n      <input matInput\n            type=\"{{ inputType }}\"\n            [formControl]=\"control\"\n            [placeholder]=\"instance.component.placeholder\"\n            (input)=\"onChange()\" #input\n            [ngClass]=\"{ 'show-invalid': inputType=='email' }\"\n      >\n      <span *ngIf=\"instance.component.suffix\" matSuffix>{{ instance.component.suffix }}</span>\n\n      <mat-hint *ngIf=\"instance.component.showWordCount || instance.component.showCharCount\">\n        {{ getHint() }}\n      </mat-hint>\n\n      <br/>\n      <mat-error *ngIf=\"isError()\" >{{ getErrorMessage() }}</mat-error>\n    </mat-form-field>\n  </ng-template>\n", isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i5.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i6.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: i7.FormioFormFieldComponent, selector: "mat-formio-form-field", inputs: ["labelTemplate", "renderTopLabel", "showDescription", "renderElementOnly", "instance", "componentTemplate"] }, { kind: "component", type: i8.LabelComponent, selector: "span[matFormioLabel]", inputs: ["instance"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MaterialPasswordComponent, decorators: [{
             type: Component,
             args: [{

package/esm2020/lib/components/phonenumber/phonenumber.component.mjs

@@ -4,8 +4,8 @@ import PhoneNumberComponent from 'formiojs/components/phonenumber/PhoneNumber.js
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
 import * as i2 from "@angular/forms";
-import * as i3 from "@angular/material/legacy-form-field";
-import * as i4 from "@angular/material/legacy-input";
+import * as i3 from "@angular/material/input";
+import * as i4 from "@angular/material/form-field";
 import * as i5 from "@angular/flex-layout/flex";
 import * as i6 from "@angular/flex-layout/extended";
 import * as i7 from "../formio-form-field/formio-form-field.component";
@@ -17,7 +17,7 @@ export class MaterialPhoneNumberComponent extends MaterialTextfieldComponent {
     }
 }
 MaterialPhoneNumberComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MaterialPhoneNumberComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MaterialPhoneNumberComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MaterialPhoneNumberComponent, selector: "mat-formio-phonenumber", usesInheritance: true, ngImport: i0, template: "\n  <mat-formio-form-field [instance]=\"instance\" [componentTemplate]=\"componentTemplate\"></mat-formio-form-field>\n  <ng-template #componentTemplate let-hasLabel>\n    <mat-form-field [appearance]=\"getFormFieldAppearance()\" fxFill>\n\n      <mat-label *ngIf=\"hasLabel\">\n          <span [instance]=\"instance\" matFormioLabel></span>\n      </mat-label>\n\n      <span *ngIf=\"instance.component.prefix && instance.type !== 'currency'\"\n            matPrefix\n      >\n        {{ instance.component.prefix }}&nbsp;\n      </span>\n      <input matInput\n            type=\"{{ inputType }}\"\n            [formControl]=\"control\"\n            [placeholder]=\"instance.component.placeholder\"\n            (input)=\"onChange()\" #input\n            [ngClass]=\"{ 'show-invalid': inputType=='email' }\"\n      >\n      <span *ngIf=\"instance.component.suffix\" matSuffix>{{ instance.component.suffix }}</span>\n\n      <mat-hint *ngIf=\"instance.component.showWordCount || instance.component.showCharCount\">\n        {{ getHint() }}\n      </mat-hint>\n\n      <br/>\n      <mat-error *ngIf=\"isError()\" >{{ getErrorMessage() }}</mat-error>\n    </mat-form-field>\n  </ng-template>\n", isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.MatLegacyError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i3.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLegacyHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatLegacyLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatLegacyPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i3.MatLegacySuffix, selector: "[matSuffix]" }, { kind: "directive", type: i4.MatLegacyInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", exportAs: ["matInput"] }, { kind: "directive", type: i5.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i6.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: i7.FormioFormFieldComponent, selector: "mat-formio-form-field", inputs: ["labelTemplate", "renderTopLabel", "showDescription", "renderElementOnly", "instance", "componentTemplate"] }, { kind: "component", type: i8.LabelComponent, selector: "span[matFormioLabel]", inputs: ["instance"] }] });
+MaterialPhoneNumberComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MaterialPhoneNumberComponent, selector: "mat-formio-phonenumber", usesInheritance: true, ngImport: i0, template: "\n  <mat-formio-form-field [instance]=\"instance\" [componentTemplate]=\"componentTemplate\"></mat-formio-form-field>\n  <ng-template #componentTemplate let-hasLabel>\n    <mat-form-field [appearance]=\"getFormFieldAppearance()\" fxFill>\n\n      <mat-label *ngIf=\"hasLabel\">\n          <span [instance]=\"instance\" matFormioLabel></span>\n      </mat-label>\n\n      <span *ngIf=\"instance.component.prefix && instance.type !== 'currency'\"\n            matPrefix\n      >\n        {{ instance.component.prefix }}&nbsp;\n      </span>\n      <input matInput\n            type=\"{{ inputType }}\"\n            [formControl]=\"control\"\n            [placeholder]=\"instance.component.placeholder\"\n            (input)=\"onChange()\" #input\n            [ngClass]=\"{ 'show-invalid': inputType=='email' }\"\n      >\n      <span *ngIf=\"instance.component.suffix\" matSuffix>{{ instance.component.suffix }}</span>\n\n      <mat-hint *ngIf=\"instance.component.showWordCount || instance.component.showCharCount\">\n        {{ getHint() }}\n      </mat-hint>\n\n      <br/>\n      <mat-error *ngIf=\"isError()\" >{{ getErrorMessage() }}</mat-error>\n    </mat-form-field>\n  </ng-template>\n", isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i5.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i6.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: i7.FormioFormFieldComponent, selector: "mat-formio-form-field", inputs: ["labelTemplate", "renderTopLabel", "showDescription", "renderElementOnly", "instance", "componentTemplate"] }, { kind: "component", type: i8.LabelComponent, selector: "span[matFormioLabel]", inputs: ["instance"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MaterialPhoneNumberComponent, decorators: [{
             type: Component,
             args: [{

package/esm2020/lib/components/radio/radio.component.mjs

@@ -4,8 +4,8 @@ import RadioComponent from 'formiojs/components/radio/Radio.js';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
 import * as i2 from "@angular/forms";
-import * as i3 from "@angular/material/legacy-form-field";
-import * as i4 from "@angular/material/legacy-radio";
+import * as i3 from "@angular/material/form-field";
+import * as i4 from "@angular/material/radio";
 import * as i5 from "@angular/flex-layout/flex";
 import * as i6 from "../formio-form-field/formio-form-field.component";
 import * as i7 from "../label/label.component";
@@ -56,7 +56,7 @@ MaterialRadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
         </mat-radio-group>
       </div>
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.MatLegacyError, selector: "mat-error", inputs: ["id"] }, { kind: "directive", type: i3.MatLegacyLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatLegacyRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i4.MatLegacyRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "directive", type: i5.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i5.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i5.DefaultFlexOffsetDirective, selector: "  [fxFlexOffset], [fxFlexOffset.xs], [fxFlexOffset.sm], [fxFlexOffset.md],  [fxFlexOffset.lg], [fxFlexOffset.xl], [fxFlexOffset.lt-sm], [fxFlexOffset.lt-md],  [fxFlexOffset.lt-lg], [fxFlexOffset.lt-xl], [fxFlexOffset.gt-xs], [fxFlexOffset.gt-sm],  [fxFlexOffset.gt-md], [fxFlexOffset.gt-lg]", inputs: ["fxFlexOffset", "fxFlexOffset.xs", "fxFlexOffset.sm", "fxFlexOffset.md", "fxFlexOffset.lg", "fxFlexOffset.xl", "fxFlexOffset.lt-sm", "fxFlexOffset.lt-md", "fxFlexOffset.lt-lg", "fxFlexOffset.lt-xl", "fxFlexOffset.gt-xs", "fxFlexOffset.gt-sm", "fxFlexOffset.gt-md", "fxFlexOffset.gt-lg"] }, { kind: "component", type: i6.FormioFormFieldComponent, selector: "mat-formio-form-field", inputs: ["labelTemplate", "renderTopLabel", "showDescription", "renderElementOnly", "instance", "componentTemplate"] }, { kind: "component", type: i7.LabelComponent, selector: "span[matFormioLabel]", inputs: ["instance"] }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i4.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "directive", type: i5.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i5.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i5.DefaultFlexOffsetDirective, selector: "  [fxFlexOffset], [fxFlexOffset.xs], [fxFlexOffset.sm], [fxFlexOffset.md],  [fxFlexOffset.lg], [fxFlexOffset.xl], [fxFlexOffset.lt-sm], [fxFlexOffset.lt-md],  [fxFlexOffset.lt-lg], [fxFlexOffset.lt-xl], [fxFlexOffset.gt-xs], [fxFlexOffset.gt-sm],  [fxFlexOffset.gt-md], [fxFlexOffset.gt-lg]", inputs: ["fxFlexOffset", "fxFlexOffset.xs", "fxFlexOffset.sm", "fxFlexOffset.md", "fxFlexOffset.lg", "fxFlexOffset.xl", "fxFlexOffset.lt-sm", "fxFlexOffset.lt-md", "fxFlexOffset.lt-lg", "fxFlexOffset.lt-xl", "fxFlexOffset.gt-xs", "fxFlexOffset.gt-sm", "fxFlexOffset.gt-md", "fxFlexOffset.gt-lg"] }, { kind: "component", type: i6.FormioFormFieldComponent, selector: "mat-formio-form-field", inputs: ["labelTemplate", "renderTopLabel", "showDescription", "renderElementOnly", "instance", "componentTemplate"] }, { kind: "component", type: i7.LabelComponent, selector: "span[matFormioLabel]", inputs: ["instance"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MaterialRadioComponent, decorators: [{
             type: Component,
             args: [{