ngx-render-material-forms 1.0.5 → 1.0.6

package/fesm2020/ngx-render-material-forms.js

@@ -128,6 +128,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
   ` }]
         }], ctorParameters: function () { return []; } });
 
+console.log('Webform=>', Webform);
 Webform.prototype.redraw = function () {
     return this.render();
 };
@@ -495,9 +496,18 @@ class MaterialTextfieldComponent extends MaterialComponent {
     getErrorMessage() {
         if (this.instance.error && this.instance.error.messages) {
             const { messages } = this.instance.error;
-            for (const msg of messages) {
-                if (msg.context && this.control.hasError(msg.context.validator)) {
-                    return this.instance.error.message;
+            if (messages.length) {
+                for (const msg of messages) {
+                    //this.control.hasError(msg.context.validator)
+                    if (this.instance.type == 'phoneNumber' || this.instance.type == 'email') {
+                        this.phoneNumberAndEmail = true;
+                    }
+                    else {
+                        this.phoneNumberAndEmail = this.control.hasError(msg.context.validator);
+                    }
+                    if (msg.context && this.phoneNumberAndEmail) {
+                        return this.instance.error.message;
+                    }
                 }
             }
         }
@@ -1838,20 +1848,8 @@ class MaterialDateComponent extends MaterialComponent {
         return !formattedDates.includes(momentDate(d).format('YYYY-MM-DD'));
     }
     clickOutside(event) {
-        if (this.isPickerOpened && (event.target.classList.value == "mat-calendar-body-cell-content mat-focus-indicator mat-calendar-body-today" || event.target.classList.value == "mat-calendar-body" || event.target.classList.value == "mat-calendar-body-cell mat-calendar-body-active" || event.target.classList.value == '' || event.target.classList.value == "mat-calendar-body-label" || event.target.classList.value == "mat-calendar-table-header-divider" || event.target.classList.value == "mat-calendar-controls" || event.target.classList.value == "mat-button-wrapper" || event.target.classList.value == "mat-calendar-header" || event.target.classList.value == "mat-calendar-arrow mat-calendar-invert" || event.target.classList.value == "mat-calendar-content cdk-focused cdk-mouse-focused" || event.target.classList.value == "mat-calendar calendar ng-star-inserted" || event.target.classList.value == "mat-focus-indicator mat-calendar-period-button mat-button mat-button-base cdk-focused cdk-mouse-focused" || event.target.classList.value == 'mat-calendar-body-cell-content mat-focus-indicator' || event.target.classList.value == "mat-focus-indicator mat-calendar-next-button mat-icon-button mat-button-base cdk-focused cdk-mouse-focused" || event.target.classList.value == "mat-focus-indicator mat-calendar-previous-button mat-icon-button mat-button-base cdk-focused cdk-mouse-focused")) {
-            this.isPickerOpened = true;
-        }
-        else {
-            if (event.target.classList.value == 'mat-calendar-body-cell-content mat-focus-indicator mat-calendar-body-selected' && this.isPickerOpened) {
-                this.toggleCalendar(event);
-            }
-            else {
-                this.isPickerOpened = false;
-            }
-        }
-        // if (event.target.classList.contains('mat-calendar-body-selected') && this.isPickerOpened) {
-        //   this.toggleCalendar(event);
-        // }
+        if (event.target.classList.contains('mat-calendar-body-selected') && this.isPickerOpened)
+            this.toggleCalendar(event);
     }
     improveMinMaxDate(minDate, maxDate) {
         if (minDate && minDate.length === 4) {
@@ -1864,63 +1862,63 @@ class MaterialDateComponent extends MaterialComponent {
     }
 }
 MaterialDateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialDateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MaterialDateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: MaterialDateComponent, selector: "mat-formio-date", host: { listeners: { "document:click": "clickOutside($event)" } }, viewQueries: [{ propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
-    <mat-formio-form-field [instance]="instance" [componentTemplate]="componentTemplate"></mat-formio-form-field>
-    <ng-template #componentTemplate let-hasLabel>
-      <mat-label *ngIf="hasLabel" fxFill>
-        <span [instance]="instance" matFormioLabel></span>
-      </mat-label>
-
-      <form class="example-form">
-        <mat-datepicker-toggle [disabled]="isDisabled()" (click)="toggleCalendar($event)">
-          <mat-icon matDatepickerToggleIcon *ngIf="enableTime && !enableDate">schedule</mat-icon>
-        </mat-datepicker-toggle>
-        <mat-form-field class="example-full-width">
-          <input
-            *ngIf="enableTime && enableDate"
-            matInput
-            type="datetime-local"
-            [placeholder]="instance.component.placeholder"
-            [formControl]="displayControl"
-            (input)="onChangeInput()"
-            [readonly]="!allowManualInput"
-          >
-          <input
-            *ngIf="enableTime && !enableDate"
-            matInput
-            [placeholder]="instance.component.placeholder"
-            [formControl]="displayControl"
-            [matMask]="formatTime"
-            (input)="onChangeInput()"
-            [readonly]="!allowManualInput"
-          >
-          <input
-            *ngIf="!enableTime && enableDate"
-            matInput
-            [placeholder]="instance.component.placeholder"
-            [formControl]="displayControl"
-            (input)="onChangeInput()"
-            [readonly]="!allowManualInput"
-          >
-        </mat-form-field>
-
-        <mat-formio-calendar
-          #calendar
-          [minDate]="instance.component.datePicker.minDate || ''"
-          [maxDate]="instance.component.datePicker.maxDate || ''"
-          [dateFilter]="dateFilter"
-          [hidden]="!isPickerOpened"
-          (dateSelectEvent)="onChangeDate($event)"
-          (timeSelectEvent)="onChangeTime($event)"
-          [enableDate]="enableDate"
-          [enableTime]="enableTime"
-          [hourStep]="instance.component.timePicker.hourStep"
-          [minuteStep]="instance.component.timePicker.minuteStep"
-          [instance]="instance"
-        ></mat-formio-calendar>
-        <mat-error *ngIf="instance.error">{{ instance.error.message }}</mat-error>
-      </form>
-    </ng-template>
+MaterialDateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: MaterialDateComponent, selector: "mat-formio-date", host: { listeners: { "document:click": "clickOutside($event)" } }, viewQueries: [{ propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
+    <mat-formio-form-field [instance]="instance" [componentTemplate]="componentTemplate"></mat-formio-form-field>
+    <ng-template #componentTemplate let-hasLabel>
+      <mat-label *ngIf="hasLabel" fxFill>
+        <span [instance]="instance" matFormioLabel></span>
+      </mat-label>
+
+      <form class="example-form">
+        <mat-datepicker-toggle [disabled]="isDisabled()" (click)="toggleCalendar($event)">
+          <mat-icon matDatepickerToggleIcon *ngIf="enableTime && !enableDate">schedule</mat-icon>
+        </mat-datepicker-toggle>
+        <mat-form-field class="example-full-width">
+          <input
+            *ngIf="enableTime && enableDate"
+            matInput
+            type="datetime-local"
+            [placeholder]="instance.component.placeholder"
+            [formControl]="displayControl"
+            (input)="onChangeInput()"
+            [readonly]="!allowManualInput"
+          >
+          <input
+            *ngIf="enableTime && !enableDate"
+            matInput
+            [placeholder]="instance.component.placeholder"
+            [formControl]="displayControl"
+            [matMask]="formatTime"
+            (input)="onChangeInput()"
+            [readonly]="!allowManualInput"
+          >
+          <input
+            *ngIf="!enableTime && enableDate"
+            matInput
+            [placeholder]="instance.component.placeholder"
+            [formControl]="displayControl"
+            (input)="onChangeInput()"
+            [readonly]="!allowManualInput"
+          >
+        </mat-form-field>
+
+        <mat-formio-calendar
+          #calendar
+          [minDate]="instance.component.datePicker.minDate || ''"
+          [maxDate]="instance.component.datePicker.maxDate || ''"
+          [dateFilter]="dateFilter"
+          [hidden]="!isPickerOpened"
+          (dateSelectEvent)="onChangeDate($event)"
+          (timeSelectEvent)="onChangeTime($event)"
+          [enableDate]="enableDate"
+          [enableTime]="enableTime"
+          [hourStep]="instance.component.timePicker.hourStep"
+          [minuteStep]="instance.component.timePicker.minuteStep"
+          [instance]="instance"
+        ></mat-formio-calendar>
+        <mat-error *ngIf="instance.error">{{ instance.error.message }}</mat-error>
+      </form>
+    </ng-template>
   `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$3.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: i5$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i5$2.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "component", type: MaterialCalendarComponent, selector: "mat-formio-calendar", inputs: ["enableDate", "enableTime", "minDate", "maxDate", "dateFilter", "hourStep", "minuteStep"], outputs: ["timeSelectEvent", "dateSelectEvent"] }, { kind: "component", type: FormioFormFieldComponent, selector: "mat-formio-form-field", inputs: ["labelTemplate", "renderTopLabel", "showDescription", "renderElementOnly", "instance", "componentTemplate"] }, { kind: "component", type: LabelComponent, selector: "span[matFormioLabel]", inputs: ["instance"] }, { kind: "directive", type: MaskDirective, selector: "input[matMask]", inputs: ["matMask", "value"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialDateComponent, decorators: [{
             type: Component,
@@ -1929,63 +1927,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
                     host: {
                         '(document:click)': 'clickOutside($event)',
                     },
-                    template: `
-    <mat-formio-form-field [instance]="instance" [componentTemplate]="componentTemplate"></mat-formio-form-field>
-    <ng-template #componentTemplate let-hasLabel>
-      <mat-label *ngIf="hasLabel" fxFill>
-        <span [instance]="instance" matFormioLabel></span>
-      </mat-label>
-
-      <form class="example-form">
-        <mat-datepicker-toggle [disabled]="isDisabled()" (click)="toggleCalendar($event)">
-          <mat-icon matDatepickerToggleIcon *ngIf="enableTime && !enableDate">schedule</mat-icon>
-        </mat-datepicker-toggle>
-        <mat-form-field class="example-full-width">
-          <input
-            *ngIf="enableTime && enableDate"
-            matInput
-            type="datetime-local"
-            [placeholder]="instance.component.placeholder"
-            [formControl]="displayControl"
-            (input)="onChangeInput()"
-            [readonly]="!allowManualInput"
-          >
-          <input
-            *ngIf="enableTime && !enableDate"
-            matInput
-            [placeholder]="instance.component.placeholder"
-            [formControl]="displayControl"
-            [matMask]="formatTime"
-            (input)="onChangeInput()"
-            [readonly]="!allowManualInput"
-          >
-          <input
-            *ngIf="!enableTime && enableDate"
-            matInput
-            [placeholder]="instance.component.placeholder"
-            [formControl]="displayControl"
-            (input)="onChangeInput()"
-            [readonly]="!allowManualInput"
-          >
-        </mat-form-field>
-
-        <mat-formio-calendar
-          #calendar
-          [minDate]="instance.component.datePicker.minDate || ''"
-          [maxDate]="instance.component.datePicker.maxDate || ''"
-          [dateFilter]="dateFilter"
-          [hidden]="!isPickerOpened"
-          (dateSelectEvent)="onChangeDate($event)"
-          (timeSelectEvent)="onChangeTime($event)"
-          [enableDate]="enableDate"
-          [enableTime]="enableTime"
-          [hourStep]="instance.component.timePicker.hourStep"
-          [minuteStep]="instance.component.timePicker.minuteStep"
-          [instance]="instance"
-        ></mat-formio-calendar>
-        <mat-error *ngIf="instance.error">{{ instance.error.message }}</mat-error>
-      </form>
-    </ng-template>
+                    template: `
+    <mat-formio-form-field [instance]="instance" [componentTemplate]="componentTemplate"></mat-formio-form-field>
+    <ng-template #componentTemplate let-hasLabel>
+      <mat-label *ngIf="hasLabel" fxFill>
+        <span [instance]="instance" matFormioLabel></span>
+      </mat-label>
+
+      <form class="example-form">
+        <mat-datepicker-toggle [disabled]="isDisabled()" (click)="toggleCalendar($event)">
+          <mat-icon matDatepickerToggleIcon *ngIf="enableTime && !enableDate">schedule</mat-icon>
+        </mat-datepicker-toggle>
+        <mat-form-field class="example-full-width">
+          <input
+            *ngIf="enableTime && enableDate"
+            matInput
+            type="datetime-local"
+            [placeholder]="instance.component.placeholder"
+            [formControl]="displayControl"
+            (input)="onChangeInput()"
+            [readonly]="!allowManualInput"
+          >
+          <input
+            *ngIf="enableTime && !enableDate"
+            matInput
+            [placeholder]="instance.component.placeholder"
+            [formControl]="displayControl"
+            [matMask]="formatTime"
+            (input)="onChangeInput()"
+            [readonly]="!allowManualInput"
+          >
+          <input
+            *ngIf="!enableTime && enableDate"
+            matInput
+            [placeholder]="instance.component.placeholder"
+            [formControl]="displayControl"
+            (input)="onChangeInput()"
+            [readonly]="!allowManualInput"
+          >
+        </mat-form-field>
+
+        <mat-formio-calendar
+          #calendar
+          [minDate]="instance.component.datePicker.minDate || ''"
+          [maxDate]="instance.component.datePicker.maxDate || ''"
+          [dateFilter]="dateFilter"
+          [hidden]="!isPickerOpened"
+          (dateSelectEvent)="onChangeDate($event)"
+          (timeSelectEvent)="onChangeTime($event)"
+          [enableDate]="enableDate"
+          [enableTime]="enableTime"
+          [hourStep]="instance.component.timePicker.hourStep"
+          [minuteStep]="instance.component.timePicker.minuteStep"
+          [instance]="instance"
+        ></mat-formio-calendar>
+        <mat-error *ngIf="instance.error">{{ instance.error.message }}</mat-error>
+      </form>
+    </ng-template>
   `
                 }]
         }], propDecorators: { calendar: [{
@@ -2518,7 +2516,7 @@ class MaterialSelectComponent extends MaterialComponent {
         let search = this.websiteMultiFilterCtrl.value;
         search = search.toLowerCase();
         this.filteredOptions = this.selectOptions.then((options) => {
-            const filtered = options.filter((option) => option.label.replace(/<\/?span[^>]*>/g, "").toLowerCase().indexOf(search) !== -1);
+            const filtered = options.filter((option) => option.label.toLowerCase().indexOf(search) !== -1);
             this.filteredOptionsLength = filtered.length;
             return filtered;
         });
@@ -2562,101 +2560,101 @@ class MaterialSelectComponent extends MaterialComponent {
     }
 }
 MaterialSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MaterialSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: MaterialSelectComponent, selector: "mat-formio-select", viewQueries: [{ propertyName: "multiSelect", first: true, predicate: ["multiSelect"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
-    <mat-formio-form-field [instance]="instance" [componentTemplate]="componentTemplate"></mat-formio-form-field>
-    <ng-template #componentTemplate let-hasLabel>
-      <mat-form-field fxFill>
-
-        <mat-label *ngIf="hasLabel">
-          <span [instance]="instance" matFormioLabel></span>
-        </mat-label>
-
-        <span *ngIf="instance.component.prefix" matPrefix>
-          {{ instance.component.prefix }}&nbsp;
-        </span>
-        <mat-select
-                [multiple]="instance.component.multiple"
-                [formControl]="control"
-                [placeholder]="instance.component.placeholder"
-                (selectionChange)="onChange()"
-                [compareWith]="compareObjects"
-        >
-
-        <mat-option>
-        <ngx-mat-select-search placeholderLabel="Type to search" [formControl]="websiteMultiFilterCtrl"></ngx-mat-select-search>
-      </mat-option>
-      
-      <mat-option *ngFor="let option of filteredOptions | async" [value]="option.value">
-        <span [innerHTML]="option.label"></span>
-      </mat-option>
-
-          <!-- <div class="mat-option">
-            <input class="mat-input-element" placeholder="Type to search the risk" (input)="onFilter($event.target.value)">
-          </div> -->
-          <mat-option *ngIf="!filteredOptionsLength" disabled>
-            <span>Nothing was found</span>
-          </mat-option>
-          <!-- <mat-option *ngFor="let option of filteredOptions | async" [value]="option.value">
-            <span [innerHTML]="option.label"></span>
-          </mat-option> -->
-        </mat-select>
-
-        <span *ngIf="instance.component.suffix" matSuffix>
-          {{ instance.component.suffix }}
-        </span>
-        <mat-error *ngIf="instance.error">{{ instance.error.message }}</mat-error>
-      </mat-form-field>
-    </ng-template>
+MaterialSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: MaterialSelectComponent, selector: "mat-formio-select", viewQueries: [{ propertyName: "multiSelect", first: true, predicate: ["multiSelect"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
+    <mat-formio-form-field [instance]="instance" [componentTemplate]="componentTemplate"></mat-formio-form-field>
+    <ng-template #componentTemplate let-hasLabel>
+      <mat-form-field fxFill>
+
+        <mat-label *ngIf="hasLabel">
+          <span [instance]="instance" matFormioLabel></span>
+        </mat-label>
+
+        <span *ngIf="instance.component.prefix" matPrefix>
+          {{ instance.component.prefix }}&nbsp;
+        </span>
+        <mat-select
+                [multiple]="instance.component.multiple"
+                [formControl]="control"
+                [placeholder]="instance.component.placeholder"
+                (selectionChange)="onChange()"
+                [compareWith]="compareObjects"
+        >
+
+        <mat-option>
+        <ngx-mat-select-search placeholderLabel="Type to search" [formControl]="websiteMultiFilterCtrl"></ngx-mat-select-search>
+      </mat-option>
+      
+      <mat-option *ngFor="let option of filteredOptions | async" [value]="option.value">
+        <span [innerHTML]="option.label"></span>
+      </mat-option>
+
+          <!-- <div class="mat-option">
+            <input class="mat-input-element" placeholder="Type to search the risk" (input)="onFilter($event.target.value)">
+          </div> -->
+          <mat-option *ngIf="!filteredOptionsLength" disabled>
+            <span>Nothing was found</span>
+          </mat-option>
+          <!-- <mat-option *ngFor="let option of filteredOptions | async" [value]="option.value">
+            <span [innerHTML]="option.label"></span>
+          </mat-option> -->
+        </mat-select>
+
+        <span *ngIf="instance.component.suffix" matSuffix>
+          {{ instance.component.suffix }}
+        </span>
+        <mat-error *ngIf="instance.error">{{ instance.error.message }}</mat-error>
+      </mat-form-field>
+    </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.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix]" }, { kind: "component", type: i4$4.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i5$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i5.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "component", type: i7.MatSelectSearchComponent, selector: "ngx-mat-select-search", inputs: ["placeholderLabel", "type", "closeIcon", "closeSvgIcon", "noEntriesFoundLabel", "indexAndLengthScreenReaderText", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toogleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti"], outputs: ["toggleAll"] }, { kind: "component", type: FormioFormFieldComponent, selector: "mat-formio-form-field", inputs: ["labelTemplate", "renderTopLabel", "showDescription", "renderElementOnly", "instance", "componentTemplate"] }, { kind: "component", type: LabelComponent, selector: "span[matFormioLabel]", inputs: ["instance"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialSelectComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'mat-formio-select',
-                    template: `
-    <mat-formio-form-field [instance]="instance" [componentTemplate]="componentTemplate"></mat-formio-form-field>
-    <ng-template #componentTemplate let-hasLabel>
-      <mat-form-field fxFill>
-
-        <mat-label *ngIf="hasLabel">
-          <span [instance]="instance" matFormioLabel></span>
-        </mat-label>
-
-        <span *ngIf="instance.component.prefix" matPrefix>
-          {{ instance.component.prefix }}&nbsp;
-        </span>
-        <mat-select
-                [multiple]="instance.component.multiple"
-                [formControl]="control"
-                [placeholder]="instance.component.placeholder"
-                (selectionChange)="onChange()"
-                [compareWith]="compareObjects"
-        >
-
-        <mat-option>
-        <ngx-mat-select-search placeholderLabel="Type to search" [formControl]="websiteMultiFilterCtrl"></ngx-mat-select-search>
-      </mat-option>
-      
-      <mat-option *ngFor="let option of filteredOptions | async" [value]="option.value">
-        <span [innerHTML]="option.label"></span>
-      </mat-option>
-
-          <!-- <div class="mat-option">
-            <input class="mat-input-element" placeholder="Type to search the risk" (input)="onFilter($event.target.value)">
-          </div> -->
-          <mat-option *ngIf="!filteredOptionsLength" disabled>
-            <span>Nothing was found</span>
-          </mat-option>
-          <!-- <mat-option *ngFor="let option of filteredOptions | async" [value]="option.value">
-            <span [innerHTML]="option.label"></span>
-          </mat-option> -->
-        </mat-select>
-
-        <span *ngIf="instance.component.suffix" matSuffix>
-          {{ instance.component.suffix }}
-        </span>
-        <mat-error *ngIf="instance.error">{{ instance.error.message }}</mat-error>
-      </mat-form-field>
-    </ng-template>
+                    template: `
+    <mat-formio-form-field [instance]="instance" [componentTemplate]="componentTemplate"></mat-formio-form-field>
+    <ng-template #componentTemplate let-hasLabel>
+      <mat-form-field fxFill>
+
+        <mat-label *ngIf="hasLabel">
+          <span [instance]="instance" matFormioLabel></span>
+        </mat-label>
+
+        <span *ngIf="instance.component.prefix" matPrefix>
+          {{ instance.component.prefix }}&nbsp;
+        </span>
+        <mat-select
+                [multiple]="instance.component.multiple"
+                [formControl]="control"
+                [placeholder]="instance.component.placeholder"
+                (selectionChange)="onChange()"
+                [compareWith]="compareObjects"
+        >
+
+        <mat-option>
+        <ngx-mat-select-search placeholderLabel="Type to search" [formControl]="websiteMultiFilterCtrl"></ngx-mat-select-search>
+      </mat-option>
+      
+      <mat-option *ngFor="let option of filteredOptions | async" [value]="option.value">
+        <span [innerHTML]="option.label"></span>
+      </mat-option>
+
+          <!-- <div class="mat-option">
+            <input class="mat-input-element" placeholder="Type to search the risk" (input)="onFilter($event.target.value)">
+          </div> -->
+          <mat-option *ngIf="!filteredOptionsLength" disabled>
+            <span>Nothing was found</span>
+          </mat-option>
+          <!-- <mat-option *ngFor="let option of filteredOptions | async" [value]="option.value">
+            <span [innerHTML]="option.label"></span>
+          </mat-option> -->
+        </mat-select>
+
+        <span *ngIf="instance.component.suffix" matSuffix>
+          {{ instance.component.suffix }}
+        </span>
+        <mat-error *ngIf="instance.error">{{ instance.error.message }}</mat-error>
+      </mat-form-field>
+    </ng-template>
   `
                 }]
         }], propDecorators: { multiSelect: [{