@messaia/cdk 13.3.3-rc12 → 13.3.3-rc15

package/fesm2020/messaia-cdk.mjs

@@ -1733,7 +1733,7 @@ class BaseEntity {
     }
 }
 __decorate([
-    Column({ index: 1100, header: $localize `:@@id:ID`, arrowBefore: true }),
+    Column({ filterOperator: '~', index: 1100, header: $localize `:@@id:ID`, arrowBefore: true }),
     prop(),
     __metadata("design:type", Number)
 ], BaseEntity.prototype, "id", void 0);
@@ -13832,18 +13832,24 @@ class VdGenericFormComponent {
      * It is invoked only once when the directive is instantiated.
      */
     ngOnInit() {
-        this.fieldRows = this.fieldGroups
-            ?.filter(x => x.name?.trim() == this.groupName?.trim())[0]
-            ?.groups;
-        this.fieldRows?.filter(x => x.some(y => y.type == FormFieldType.Autocomplete))[0]?.forEach(x => {
-            var control = this.formGroup.controls[x.name];
-            if (control) {
-                this.autocompleteFilteredOptions[x.name] = !control.value?.length ? x.options : x.options?.filter(option => option.name.toLowerCase().includes(control.value.toLowerCase()));
-                control.valueChanges.subscribe(y => {
-                    this.autocompleteFilteredOptions[x.name] = x.options?.filter(option => option.name.toLowerCase().includes(y.toLowerCase()));
-                });
-            }
-        });
+        this.fieldRows = this.fieldGroups?.filter(x => x.name?.trim() == this.groupName?.trim())[0]?.groups;
+    }
+    /**
+     * Handles autocomplete event
+     * @param field
+     * @param event
+     */
+    filterAutocomplete(field, event) {
+        this.autocompleteFilteredOptions[field.name] = field.options?.filter(option => option.name.toLowerCase().includes(event.value?.toString()?.toLowerCase()));
+    }
+    /**
+     * Adds a chip when a autocomplete value is selected
+     * @param field
+     * @param event
+     */
+    autocompleteValueSelected(field, event, chipInputEvent) {
+        this._addChip(field, event.option.viewValue);
+        chipInputEvent.value = '';
     }
     /**
      * Adds a chip
@@ -13851,10 +13857,36 @@ class VdGenericFormComponent {
      * @param event
      */
     addChip(field, event) {
+        this._addChip(field, event.value);
+        event.chipInput.clear();
+    }
+    /**
+     * Removes a chip
+     * @param field
+     * @param chip
+     */
+    removeChip(field, chip) {
+        /* Get the form control using the field name */
+        let control = this.formGroup?.controls[field.name];
+        /* Get the index of the chip */
+        const index = control.value.indexOf(chip);
+        if (index >= 0) {
+            control.value.splice(index, 1);
+            control.updateValueAndValidity();
+            this.formGroup.markAsDirty();
+            this.formGroup.updateValueAndValidity();
+        }
+    }
+    /**
+     * Adds a chip
+     * @param field
+     * @param value
+     */
+    _addChip(field, value) {
         /* Get the form control using the field name */
         let control = this.formGroup?.controls[field.name];
         /* Get the value of the chip */
-        let value = (event.value || '').trim();
+        value = (value || '').trim();
         if (control && value) {
             switch (field.inputType) {
                 case 'number':
@@ -13874,33 +13906,16 @@ class VdGenericFormComponent {
                     break;
             }
             control.updateValueAndValidity();
-            this.formGroup.updateValueAndValidity();
-        }
-        /* Clear the input value */
-        event.chipInput.clear();
-    }
-    /**
-     * Removes a chip
-     * @param field
-     * @param chip
-     */
-    removeChip(field, chip) {
-        /* Get the form control using the field name */
-        let control = this.formGroup?.controls[field.name];
-        /* Get the index of the chip */
-        const index = control.value.indexOf(chip);
-        if (index >= 0) {
-            control.value.splice(index, 1);
-            control.updateValueAndValidity();
+            this.formGroup.markAsDirty();
             this.formGroup.updateValueAndValidity();
         }
     }
 }
 /** @nocollapse */ /** @nocollapse */ VdGenericFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdGenericFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ VdGenericFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: VdGenericFormComponent, selector: "vd-generic-form", inputs: { formGroup: "formGroup", fieldGroups: "fieldGroups", groupName: "groupName", separatorKeysCodes: "separatorKeysCodes" }, queries: [{ propertyName: "editorTemplate", first: true, predicate: VdEditorDirective, descendants: true }, { propertyName: "codeTemplate", first: true, predicate: VdCodeDirective, descendants: true }, { propertyName: "fileTemplate", first: true, predicate: VdFileDirective, descendants: true }, { propertyName: "customTemplate", first: true, predicate: VdCustomDirective, descendants: true }], ngImport: i0, template: "<div *ngIf=\"formGroup && fieldRows\" [formGroup]=\"formGroup\">\r\n    <!-- #region Fields -->\r\n    <div layout-gt-sm=\"row\" layout=\"column\" *ngFor=\"let fields of fieldRows\">\r\n        <ng-container *ngFor=\"let field of fields\" [ngSwitch]=\"field.type\">\r\n            <!-- #region Error handling -->\r\n            <ng-template #fieldErrors>\r\n                <div *ngFor=\"let errorMessage of formGroup.controls[field.name]['errorMessages']\">{{errorMessage}}</div>\r\n            </ng-template>\r\n            <!-- #endregion -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\r\n                <!-- #region Text input -->\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Text\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <input [type]=\"field.inputType\" [minlength]=\"field.minLength||null\" [maxlength]=\"field.maxLength||null\" matInput [formControlName]=\"field.name\">\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Text area -->\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.TextArea\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <textarea matInput [formControlName]=\"field.name\" rows=\"field.rows||2\"></textarea>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Enum -->\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Enum\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <vd-select [formControlName]=\"field.name\" [enum]=\"field.enumType\" [key]=\"field.optionValue\" [text]=\"field.optionText\" [multiple]=\"field.multiple\" flex></vd-select>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Chips -->\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Chips\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <mat-chip-list #chipList [formControlName]=\"field.name\">\r\n                        <mat-chip *ngFor=\"let chip of formGroup.controls[field.name]?.value\" (removed)=\"removeChip(field, chip)\" color=\"primary\" selectable=\"true\" selected>\r\n                            <span>{{chip}}</span>\r\n                            <button matChipRemove>\r\n                                <mat-icon>cancel</mat-icon>\r\n                            </button>\r\n                        </mat-chip>\r\n                        <input [placeholder]=\"field.header\" #chipInput [matChipInputFor]=\"chipList\" [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\" (matChipInputTokenEnd)=\"addChip(field, $event)\">\r\n                    </mat-chip-list>\r\n\r\n                    <!-- [matAutocomplete]=\"chipAutocomplete\" -->\r\n                    <!-- <mat-autocomplete #chipAutocomplete=\"matAutocomplete\" (optionSelected)=\"selected($event)\">\r\n                        <mat-option *ngFor=\"let fruit of filteredFruits | async\" [value]=\"fruit\">\r\n                          {{fruit}}\r\n                        </mat-option>\r\n                      </mat-autocomplete> -->\r\n\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region VdSelect -->\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.VdSelect\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <vd-select [formControlName]=\"field.name\" [endpoint]=\"field.endpoint\" [params]=\"field.params\" [projection]=\"field.projection\" [mapper]=\"field.mapper\" [compareWith]=\"field.compareWith\" [key]=\"field.optionValue\" [text]=\"field.optionText\" [multiple]=\"field.multiple\" flex></vd-select>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region VdChips -->\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.VdChips\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <vd-chips #vdChip [formControlName]=\"field.name\" [endpoint]=\"field.endpoint\" [searchField]=\"field.searchField\" [projection]=\"field.projection\" [key]=\"field.optionValue\" flex>\r\n                        <ng-template vd-chip let-chip=\"chip\" *ngIf=\"field.chipTemplate\">\r\n                            <div [outerHTML]=\"field.chipTemplate(chip)\"></div>\r\n                        </ng-template>\r\n                        <ng-template vd-autocomplete-option let-option=\"option\" *ngIf=\"field.autocompleteTemplate\">\r\n                            <div [outerHTML]=\"field.autocompleteTemplate(option)\"></div>\r\n                        </ng-template>\r\n                    </vd-chips>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-hint *ngIf=\"vdChip.emptyResult\" class=\"tc-red-400\" i18n=\"@@noResultsFound\">No results found</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Select -->\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Select\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <mat-select [formControlName]=\"field.name\" [multiple]=\"field.multiple\" flex>\r\n                        <mat-option *ngFor=\"let option of field.options\" [value]=\"option.id\">{{option.name}}</mat-option>\r\n                    </mat-select>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Autocomplete -->\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Autocomplete\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <input type=\"text\" matInput [formControlName]=\"field.name\" [matAutocomplete]=\"auto\" autocomplete=\"false\">\r\n                    <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\r\n                        <mat-option *ngFor=\"let option of autocompleteFilteredOptions[field.name]\" [value]=\"option.id\">\r\n                            {{option.name}}\r\n                        </mat-option>\r\n                    </mat-autocomplete>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Date -->\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Date\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <input matInput [formControlName]=\"field.name\" autocomplete=\"off\" [matDatepicker]=\"datePicker\">\r\n                    <mat-datepicker-toggle matSuffix [for]=\"datePicker\"></mat-datepicker-toggle>\r\n                    <mat-datepicker #datePicker></mat-datepicker>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Checkbox -->\r\n                <div *ngSwitchCase=\"FormFieldType.Checkbox\" layout-margin appearance=\"outline\" class=\"pad-bottom-xs\">\r\n                    <mat-checkbox [formControlName]=\"field.name\">{{field.header}}</mat-checkbox>\r\n                </div>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Editor -->\r\n                <ng-container *ngSwitchCase=\"FormFieldType.Editor\">\r\n                    <ng-template *ngIf=\"editorTemplate?.templateRef\" [ngTemplateOutlet]=\"editorTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n                </ng-container>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Code -->\r\n                <ng-container *ngSwitchCase=\"FormFieldType.Code\">\r\n                    <ng-template *ngIf=\"codeTemplate?.templateRef\" [ngTemplateOutlet]=\"codeTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n                </ng-container>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region File -->\r\n                <ng-container *ngSwitchCase=\"FormFieldType.File\">\r\n                    <ng-template *ngIf=\"fileTemplate?.templateRef\" [ngTemplateOutlet]=\"fileTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n                </ng-container>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Custom -->\r\n                <ng-container *ngSwitchCase=\"FormFieldType.Custom\">\r\n                    <ng-template *ngIf=\"customTemplate?.templateRef\" [ngTemplateOutlet]=\"customTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n                </ng-container>\r\n                <!-- #endregion -->\r\n            </ng-container>\r\n        </ng-container>\r\n    </div>\r\n    <!-- #endregion -->\r\n</div>", styles: [""], components: [{ type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: VdSelectComponent, selector: "vd-select", inputs: ["multiple", "disabled", "sorted", "textPrefix", "endpoint", "params", "projection", "enum", "key", "text", "prefix", "options", "filteredOptions", "filterable", "cache", "sortBy", "mapper", "compareWith", "searchField"], outputs: ["change", "itemChange", "selected", "itemSelected", "launch"] }, { type: i4$4.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: VdChipsComponent, selector: "vd-chips", inputs: ["chips", "endpoint", "params", "projection", "path", "key", "searchField", "searchFields", "termMinlength", "limit", "debounce", "default"], outputs: ["initSelect", "selected", "cleared", "launch", "chipFocus"] }, { type: i4$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i2$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i7$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i9.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i9.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { type: i4$3.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: MatFormFieldReadonlyDirective, selector: "mat-form-field" }, { type: i1$3.MatLabel, selector: "mat-label" }, { type: i7.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"] }, { 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]" }, { type: i1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i1$3.MatError, selector: "mat-error", inputs: ["id"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4$4.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i4$4.MatChipRemove, selector: "[matChipRemove]" }, { type: i4$4.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { type: VdChipDirective, selector: "[vd-chip]ng-template" }, { type: VdAutocompleteOptionDirective, selector: "[vd-autocomplete-option]ng-template" }, { type: i7$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i9.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i1$3.MatSuffix, selector: "[matSuffix]" }] });
+/** @nocollapse */ /** @nocollapse */ VdGenericFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: VdGenericFormComponent, selector: "vd-generic-form", inputs: { formGroup: "formGroup", fieldGroups: "fieldGroups", groupName: "groupName", separatorKeysCodes: "separatorKeysCodes" }, queries: [{ propertyName: "editorTemplate", first: true, predicate: VdEditorDirective, descendants: true }, { propertyName: "codeTemplate", first: true, predicate: VdCodeDirective, descendants: true }, { propertyName: "fileTemplate", first: true, predicate: VdFileDirective, descendants: true }, { propertyName: "customTemplate", first: true, predicate: VdCustomDirective, descendants: true }], ngImport: i0, template: "<div *ngIf=\"formGroup && fieldRows\" [formGroup]=\"formGroup\">\r\n    <!-- #region Fields -->\r\n    <div layout-gt-sm=\"row\" layout=\"column\" *ngFor=\"let fields of fieldRows\">\r\n        <ng-container *ngFor=\"let field of fields\" [ngSwitch]=\"field.type\">\r\n            <!-- #region Error handling -->\r\n            <ng-template #fieldErrors>\r\n                <div *ngFor=\"let errorMessage of formGroup.controls[field.name]['errorMessages']\">{{errorMessage}}</div>\r\n            </ng-template>\r\n            <!-- #endregion -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\r\n                <!-- #region Text input -->\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Text\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <input [type]=\"field.inputType\" [minlength]=\"field.minLength||null\" [maxlength]=\"field.maxLength||null\" matInput [formControlName]=\"field.name\">\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Text area -->\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.TextArea\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <textarea matInput [formControlName]=\"field.name\" rows=\"field.rows||2\"></textarea>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Enum -->\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Enum\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <vd-select [formControlName]=\"field.name\" [enum]=\"field.enumType\" [key]=\"field.optionValue\" [text]=\"field.optionText\" [multiple]=\"field.multiple\" flex></vd-select>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Chips -->\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Chips\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <mat-chip-list #chipList [formControlName]=\"field.name\">\r\n                        <mat-chip *ngFor=\"let chip of formGroup.controls[field.name]?.value\" (removed)=\"removeChip(field, chip)\" color=\"primary\" selectable=\"true\" selected>\r\n                            <span>{{chip}}</span>\r\n                            <button matChipRemove>\r\n                                <mat-icon>cancel</mat-icon>\r\n                            </button>\r\n                        </mat-chip>\r\n                        <input [placeholder]=\"field.header\" #chipInput [matChipInputFor]=\"chipList\" [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\" [matAutocomplete]=\"chipAutocomplete\" (input)=\"filterAutocomplete(field, chipInput)\" (matChipInputTokenEnd)=\"addChip(field, $event)\" autocomplete=\"off\">\r\n                    </mat-chip-list>\r\n                    <mat-autocomplete autoActiveFirstOption #chipAutocomplete=\"matAutocomplete\" (optionSelected)=\"autocompleteValueSelected(field, $event, chipInput)\">\r\n                        <mat-option *ngFor=\"let option of autocompleteFilteredOptions[field.name]\" [value]=\"option.id\">\r\n                            {{option.name}}\r\n                        </mat-option>\r\n                    </mat-autocomplete>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region VdSelect -->\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.VdSelect\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <vd-select [formControlName]=\"field.name\" [endpoint]=\"field.endpoint\" [params]=\"field.params\" [projection]=\"field.projection\" [mapper]=\"field.mapper\" [compareWith]=\"field.compareWith\" [key]=\"field.optionValue\" [text]=\"field.optionText\" [multiple]=\"field.multiple\" flex></vd-select>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region VdChips -->\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.VdChips\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <vd-chips #vdChip [formControlName]=\"field.name\" [endpoint]=\"field.endpoint\" [searchField]=\"field.searchField\" [projection]=\"field.projection\" [key]=\"field.optionValue\" flex>\r\n                        <ng-template vd-chip let-chip=\"chip\" *ngIf=\"field.chipTemplate\">\r\n                            <div [outerHTML]=\"field.chipTemplate(chip)\"></div>\r\n                        </ng-template>\r\n                        <ng-template vd-autocomplete-option let-option=\"option\" *ngIf=\"field.autocompleteTemplate\">\r\n                            <div [outerHTML]=\"field.autocompleteTemplate(option)\"></div>\r\n                        </ng-template>\r\n                    </vd-chips>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-hint *ngIf=\"vdChip.emptyResult\" class=\"tc-red-400\" i18n=\"@@noResultsFound\">No results found</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Select -->\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Select\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <mat-select [formControlName]=\"field.name\" [multiple]=\"field.multiple\" flex>\r\n                        <mat-option *ngFor=\"let option of field.options\" [value]=\"option.id\">{{option.name}}</mat-option>\r\n                    </mat-select>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Autocomplete -->\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Autocomplete\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <input type=\"text\" matInput [formControlName]=\"field.name\" [matAutocomplete]=\"auto\" #autocompleteInput (input)=\"filterAutocomplete(field, autocompleteInput)\" autocomplete=\"off\">\r\n                    <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\r\n                        <mat-option *ngFor=\"let option of autocompleteFilteredOptions[field.name]\" [value]=\"option.id\">\r\n                            {{option.name}}\r\n                        </mat-option>\r\n                    </mat-autocomplete>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Date -->\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Date\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <input matInput [formControlName]=\"field.name\" autocomplete=\"off\" [matDatepicker]=\"datePicker\">\r\n                    <mat-datepicker-toggle matSuffix [for]=\"datePicker\"></mat-datepicker-toggle>\r\n                    <mat-datepicker #datePicker></mat-datepicker>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Checkbox -->\r\n                <div *ngSwitchCase=\"FormFieldType.Checkbox\" layout-margin appearance=\"outline\" class=\"pad-bottom-xs\">\r\n                    <mat-checkbox [formControlName]=\"field.name\">{{field.header}}</mat-checkbox>\r\n                </div>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Editor -->\r\n                <ng-container *ngSwitchCase=\"FormFieldType.Editor\">\r\n                    <ng-template *ngIf=\"editorTemplate?.templateRef\" [ngTemplateOutlet]=\"editorTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n                </ng-container>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Code -->\r\n                <ng-container *ngSwitchCase=\"FormFieldType.Code\">\r\n                    <ng-template *ngIf=\"codeTemplate?.templateRef\" [ngTemplateOutlet]=\"codeTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n                </ng-container>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region File -->\r\n                <ng-container *ngSwitchCase=\"FormFieldType.File\">\r\n                    <ng-template *ngIf=\"fileTemplate?.templateRef\" [ngTemplateOutlet]=\"fileTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n                </ng-container>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Custom -->\r\n                <ng-container *ngSwitchCase=\"FormFieldType.Custom\">\r\n                    <ng-template *ngIf=\"customTemplate?.templateRef\" [ngTemplateOutlet]=\"customTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n                </ng-container>\r\n                <!-- #endregion -->\r\n            </ng-container>\r\n        </ng-container>\r\n    </div>\r\n    <!-- #endregion -->\r\n</div>", styles: [""], components: [{ type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: VdSelectComponent, selector: "vd-select", inputs: ["multiple", "disabled", "sorted", "textPrefix", "endpoint", "params", "projection", "enum", "key", "text", "prefix", "options", "filteredOptions", "filterable", "cache", "sortBy", "mapper", "compareWith", "searchField"], outputs: ["change", "itemChange", "selected", "itemSelected", "launch"] }, { type: i4$4.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i7$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i2$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: VdChipsComponent, selector: "vd-chips", inputs: ["chips", "endpoint", "params", "projection", "path", "key", "searchField", "searchFields", "termMinlength", "limit", "debounce", "default"], outputs: ["initSelect", "selected", "cleared", "launch", "chipFocus"] }, { type: i4$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i9.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i9.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { type: i4$3.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: MatFormFieldReadonlyDirective, selector: "mat-form-field" }, { type: i1$3.MatLabel, selector: "mat-label" }, { type: i7.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"] }, { 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]" }, { type: i1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i1$3.MatError, selector: "mat-error", inputs: ["id"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4$4.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i4$4.MatChipRemove, selector: "[matChipRemove]" }, { type: i4$4.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { type: i7$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: VdChipDirective, selector: "[vd-chip]ng-template" }, { type: VdAutocompleteOptionDirective, selector: "[vd-autocomplete-option]ng-template" }, { type: i9.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i1$3.MatSuffix, selector: "[matSuffix]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdGenericFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vd-generic-form', template: "<div *ngIf=\"formGroup && fieldRows\" [formGroup]=\"formGroup\">\r\n    <!-- #region Fields -->\r\n    <div layout-gt-sm=\"row\" layout=\"column\" *ngFor=\"let fields of fieldRows\">\r\n        <ng-container *ngFor=\"let field of fields\" [ngSwitch]=\"field.type\">\r\n            <!-- #region Error handling -->\r\n            <ng-template #fieldErrors>\r\n                <div *ngFor=\"let errorMessage of formGroup.controls[field.name]['errorMessages']\">{{errorMessage}}</div>\r\n            </ng-template>\r\n            <!-- #endregion -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\r\n                <!-- #region Text input -->\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Text\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <input [type]=\"field.inputType\" [minlength]=\"field.minLength||null\" [maxlength]=\"field.maxLength||null\" matInput [formControlName]=\"field.name\">\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Text area -->\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.TextArea\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <textarea matInput [formControlName]=\"field.name\" rows=\"field.rows||2\"></textarea>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Enum -->\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Enum\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <vd-select [formControlName]=\"field.name\" [enum]=\"field.enumType\" [key]=\"field.optionValue\" [text]=\"field.optionText\" [multiple]=\"field.multiple\" flex></vd-select>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Chips -->\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Chips\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <mat-chip-list #chipList [formControlName]=\"field.name\">\r\n                        <mat-chip *ngFor=\"let chip of formGroup.controls[field.name]?.value\" (removed)=\"removeChip(field, chip)\" color=\"primary\" selectable=\"true\" selected>\r\n                            <span>{{chip}}</span>\r\n                            <button matChipRemove>\r\n                                <mat-icon>cancel</mat-icon>\r\n                            </button>\r\n                        </mat-chip>\r\n                        <input [placeholder]=\"field.header\" #chipInput [matChipInputFor]=\"chipList\" [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\" (matChipInputTokenEnd)=\"addChip(field, $event)\">\r\n                    </mat-chip-list>\r\n\r\n                    <!-- [matAutocomplete]=\"chipAutocomplete\" -->\r\n                    <!-- <mat-autocomplete #chipAutocomplete=\"matAutocomplete\" (optionSelected)=\"selected($event)\">\r\n                        <mat-option *ngFor=\"let fruit of filteredFruits | async\" [value]=\"fruit\">\r\n                          {{fruit}}\r\n                        </mat-option>\r\n                      </mat-autocomplete> -->\r\n\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region VdSelect -->\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.VdSelect\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <vd-select [formControlName]=\"field.name\" [endpoint]=\"field.endpoint\" [params]=\"field.params\" [projection]=\"field.projection\" [mapper]=\"field.mapper\" [compareWith]=\"field.compareWith\" [key]=\"field.optionValue\" [text]=\"field.optionText\" [multiple]=\"field.multiple\" flex></vd-select>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region VdChips -->\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.VdChips\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <vd-chips #vdChip [formControlName]=\"field.name\" [endpoint]=\"field.endpoint\" [searchField]=\"field.searchField\" [projection]=\"field.projection\" [key]=\"field.optionValue\" flex>\r\n                        <ng-template vd-chip let-chip=\"chip\" *ngIf=\"field.chipTemplate\">\r\n                            <div [outerHTML]=\"field.chipTemplate(chip)\"></div>\r\n                        </ng-template>\r\n                        <ng-template vd-autocomplete-option let-option=\"option\" *ngIf=\"field.autocompleteTemplate\">\r\n                            <div [outerHTML]=\"field.autocompleteTemplate(option)\"></div>\r\n                        </ng-template>\r\n                    </vd-chips>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-hint *ngIf=\"vdChip.emptyResult\" class=\"tc-red-400\" i18n=\"@@noResultsFound\">No results found</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Select -->\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Select\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <mat-select [formControlName]=\"field.name\" [multiple]=\"field.multiple\" flex>\r\n                        <mat-option *ngFor=\"let option of field.options\" [value]=\"option.id\">{{option.name}}</mat-option>\r\n                    </mat-select>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Autocomplete -->\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Autocomplete\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <input type=\"text\" matInput [formControlName]=\"field.name\" [matAutocomplete]=\"auto\" autocomplete=\"false\">\r\n                    <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\r\n                        <mat-option *ngFor=\"let option of autocompleteFilteredOptions[field.name]\" [value]=\"option.id\">\r\n                            {{option.name}}\r\n                        </mat-option>\r\n                    </mat-autocomplete>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Date -->\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Date\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <input matInput [formControlName]=\"field.name\" autocomplete=\"off\" [matDatepicker]=\"datePicker\">\r\n                    <mat-datepicker-toggle matSuffix [for]=\"datePicker\"></mat-datepicker-toggle>\r\n                    <mat-datepicker #datePicker></mat-datepicker>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Checkbox -->\r\n                <div *ngSwitchCase=\"FormFieldType.Checkbox\" layout-margin appearance=\"outline\" class=\"pad-bottom-xs\">\r\n                    <mat-checkbox [formControlName]=\"field.name\">{{field.header}}</mat-checkbox>\r\n                </div>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Editor -->\r\n                <ng-container *ngSwitchCase=\"FormFieldType.Editor\">\r\n                    <ng-template *ngIf=\"editorTemplate?.templateRef\" [ngTemplateOutlet]=\"editorTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n                </ng-container>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Code -->\r\n                <ng-container *ngSwitchCase=\"FormFieldType.Code\">\r\n                    <ng-template *ngIf=\"codeTemplate?.templateRef\" [ngTemplateOutlet]=\"codeTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n                </ng-container>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region File -->\r\n                <ng-container *ngSwitchCase=\"FormFieldType.File\">\r\n                    <ng-template *ngIf=\"fileTemplate?.templateRef\" [ngTemplateOutlet]=\"fileTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n                </ng-container>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Custom -->\r\n                <ng-container *ngSwitchCase=\"FormFieldType.Custom\">\r\n                    <ng-template *ngIf=\"customTemplate?.templateRef\" [ngTemplateOutlet]=\"customTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n                </ng-container>\r\n                <!-- #endregion -->\r\n            </ng-container>\r\n        </ng-container>\r\n    </div>\r\n    <!-- #endregion -->\r\n</div>", styles: [""] }]
+            args: [{ selector: 'vd-generic-form', template: "<div *ngIf=\"formGroup && fieldRows\" [formGroup]=\"formGroup\">\r\n    <!-- #region Fields -->\r\n    <div layout-gt-sm=\"row\" layout=\"column\" *ngFor=\"let fields of fieldRows\">\r\n        <ng-container *ngFor=\"let field of fields\" [ngSwitch]=\"field.type\">\r\n            <!-- #region Error handling -->\r\n            <ng-template #fieldErrors>\r\n                <div *ngFor=\"let errorMessage of formGroup.controls[field.name]['errorMessages']\">{{errorMessage}}</div>\r\n            </ng-template>\r\n            <!-- #endregion -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\r\n                <!-- #region Text input -->\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Text\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <input [type]=\"field.inputType\" [minlength]=\"field.minLength||null\" [maxlength]=\"field.maxLength||null\" matInput [formControlName]=\"field.name\">\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Text area -->\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.TextArea\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <textarea matInput [formControlName]=\"field.name\" rows=\"field.rows||2\"></textarea>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Enum -->\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Enum\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <vd-select [formControlName]=\"field.name\" [enum]=\"field.enumType\" [key]=\"field.optionValue\" [text]=\"field.optionText\" [multiple]=\"field.multiple\" flex></vd-select>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Chips -->\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Chips\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <mat-chip-list #chipList [formControlName]=\"field.name\">\r\n                        <mat-chip *ngFor=\"let chip of formGroup.controls[field.name]?.value\" (removed)=\"removeChip(field, chip)\" color=\"primary\" selectable=\"true\" selected>\r\n                            <span>{{chip}}</span>\r\n                            <button matChipRemove>\r\n                                <mat-icon>cancel</mat-icon>\r\n                            </button>\r\n                        </mat-chip>\r\n                        <input [placeholder]=\"field.header\" #chipInput [matChipInputFor]=\"chipList\" [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\" [matAutocomplete]=\"chipAutocomplete\" (input)=\"filterAutocomplete(field, chipInput)\" (matChipInputTokenEnd)=\"addChip(field, $event)\" autocomplete=\"off\">\r\n                    </mat-chip-list>\r\n                    <mat-autocomplete autoActiveFirstOption #chipAutocomplete=\"matAutocomplete\" (optionSelected)=\"autocompleteValueSelected(field, $event, chipInput)\">\r\n                        <mat-option *ngFor=\"let option of autocompleteFilteredOptions[field.name]\" [value]=\"option.id\">\r\n                            {{option.name}}\r\n                        </mat-option>\r\n                    </mat-autocomplete>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region VdSelect -->\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.VdSelect\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <vd-select [formControlName]=\"field.name\" [endpoint]=\"field.endpoint\" [params]=\"field.params\" [projection]=\"field.projection\" [mapper]=\"field.mapper\" [compareWith]=\"field.compareWith\" [key]=\"field.optionValue\" [text]=\"field.optionText\" [multiple]=\"field.multiple\" flex></vd-select>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region VdChips -->\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.VdChips\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <vd-chips #vdChip [formControlName]=\"field.name\" [endpoint]=\"field.endpoint\" [searchField]=\"field.searchField\" [projection]=\"field.projection\" [key]=\"field.optionValue\" flex>\r\n                        <ng-template vd-chip let-chip=\"chip\" *ngIf=\"field.chipTemplate\">\r\n                            <div [outerHTML]=\"field.chipTemplate(chip)\"></div>\r\n                        </ng-template>\r\n                        <ng-template vd-autocomplete-option let-option=\"option\" *ngIf=\"field.autocompleteTemplate\">\r\n                            <div [outerHTML]=\"field.autocompleteTemplate(option)\"></div>\r\n                        </ng-template>\r\n                    </vd-chips>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-hint *ngIf=\"vdChip.emptyResult\" class=\"tc-red-400\" i18n=\"@@noResultsFound\">No results found</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Select -->\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Select\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <mat-select [formControlName]=\"field.name\" [multiple]=\"field.multiple\" flex>\r\n                        <mat-option *ngFor=\"let option of field.options\" [value]=\"option.id\">{{option.name}}</mat-option>\r\n                    </mat-select>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Autocomplete -->\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Autocomplete\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <input type=\"text\" matInput [formControlName]=\"field.name\" [matAutocomplete]=\"auto\" #autocompleteInput (input)=\"filterAutocomplete(field, autocompleteInput)\" autocomplete=\"off\">\r\n                    <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\r\n                        <mat-option *ngFor=\"let option of autocompleteFilteredOptions[field.name]\" [value]=\"option.id\">\r\n                            {{option.name}}\r\n                        </mat-option>\r\n                    </mat-autocomplete>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Date -->\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Date\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <input matInput [formControlName]=\"field.name\" autocomplete=\"off\" [matDatepicker]=\"datePicker\">\r\n                    <mat-datepicker-toggle matSuffix [for]=\"datePicker\"></mat-datepicker-toggle>\r\n                    <mat-datepicker #datePicker></mat-datepicker>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Checkbox -->\r\n                <div *ngSwitchCase=\"FormFieldType.Checkbox\" layout-margin appearance=\"outline\" class=\"pad-bottom-xs\">\r\n                    <mat-checkbox [formControlName]=\"field.name\">{{field.header}}</mat-checkbox>\r\n                </div>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Editor -->\r\n                <ng-container *ngSwitchCase=\"FormFieldType.Editor\">\r\n                    <ng-template *ngIf=\"editorTemplate?.templateRef\" [ngTemplateOutlet]=\"editorTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n                </ng-container>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Code -->\r\n                <ng-container *ngSwitchCase=\"FormFieldType.Code\">\r\n                    <ng-template *ngIf=\"codeTemplate?.templateRef\" [ngTemplateOutlet]=\"codeTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n                </ng-container>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region File -->\r\n                <ng-container *ngSwitchCase=\"FormFieldType.File\">\r\n                    <ng-template *ngIf=\"fileTemplate?.templateRef\" [ngTemplateOutlet]=\"fileTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n                </ng-container>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Custom -->\r\n                <ng-container *ngSwitchCase=\"FormFieldType.Custom\">\r\n                    <ng-template *ngIf=\"customTemplate?.templateRef\" [ngTemplateOutlet]=\"customTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n                </ng-container>\r\n                <!-- #endregion -->\r\n            </ng-container>\r\n        </ng-container>\r\n    </div>\r\n    <!-- #endregion -->\r\n</div>", styles: [""] }]
         }], propDecorators: { formGroup: [{
                 type: Input
             }], fieldGroups: [{