@messaia/cdk 13.3.5-rc21 → 13.3.5-rc24

package/fesm2020/messaia-cdk.mjs

@@ -13559,7 +13559,7 @@ class VdSelectComponent extends AbstractMatFormField {
      * @param elementRef
      */
     constructor(injector, ngControl, parentForm, parentFormGroup, defaultErrorStateMatcher, focusMonitor, elementRef) {
-        super("app-vd-select", ngControl, parentForm, parentFormGroup, defaultErrorStateMatcher, focusMonitor, elementRef);
+        super("vd-select", ngControl, parentForm, parentFormGroup, defaultErrorStateMatcher, focusMonitor, elementRef);
         this.injector = injector;
         /**
          * The http service from to get the data
@@ -13866,10 +13866,10 @@ class VdSelectComponent extends AbstractMatFormField {
     }
 }
 /** @nocollapse */ /** @nocollapse */ VdSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdSelectComponent, deps: [{ token: i0.Injector }, { token: i1.NgControl, optional: true, self: true }, { token: i1.NgForm, optional: true }, { token: i1.FormGroupDirective, optional: true }, { token: i2$1.ErrorStateMatcher }, { token: i3$2.FocusMonitor }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ VdSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: VdSelectComponent, selector: "vd-select", inputs: { multiple: "multiple", disabled: "disabled", sorted: "sorted", textPrefix: "textPrefix", endpoint: "endpoint", params: "params", projection: "projection", enum: "enum", key: "key", text: "text", prefix: "prefix", options: "options", filteredOptions: "filteredOptions", filterable: "filterable", cache: "cache", sortBy: "sortBy", mapper: "mapper", compareWith: "compareWith", searchField: "searchField" }, outputs: { onValueChange: "change", onItemChange: "itemChange", onSelected: "selected", onItemSelected: "itemSelected", onLaunch: "launch" }, providers: [{ provide: MatFormFieldControl, useExisting: VdSelectComponent }], queries: [{ propertyName: "optionTemplate", first: true, predicate: VdSelectOptionDirective, descendants: true }, { propertyName: "triggerTemplate", first: true, predicate: VdSelectTriggerDirective, descendants: true }], viewQueries: [{ propertyName: "selectEl", first: true, predicate: MatSelect, descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-select [placeholder]=\"placeholder\" i18n-placeholder [(ngModel)]=\"value\" #select=\"matSelect\" (selectionChange)=\"handleChange($event)\" *ngIf=\"!readonly\" [multiple]=\"multiple\" [compareWith]=\"compareWith\" [disabled]=\"disabled\" flex>\r\n    <!-- #region Filter input -->\r\n    <input #filterInput *ngIf=\"filterable\" type=\"text\" placeholder=\"Filter...\" class=\"vd-select-filter\" (keyup)=\"handleFilter($event.target.value)\">\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Trigger for launch button -->\r\n    <mat-select-trigger *ngIf=\"onLaunch?.observers?.length > 0\">\r\n        <span>{{getTriggerValues(select.selected)}}</span>\r\n        <mat-icon class=\"vd-select-launch\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\r\n    </mat-select-trigger>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Custom trigger template -->\r\n    <mat-select-trigger *ngIf=\"!onLaunch?.observers?.length && triggerTemplate?.templateRef\">\r\n        <ng-template *ngIf=\"triggerTemplate?.templateRef\" [ngTemplateOutlet]=\"triggerTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ trigger: getTriggerValues(select.selected) }\"></ng-template>\r\n    </mat-select-trigger>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Option template as trigger -->\r\n    <mat-select-trigger *ngIf=\"!onLaunch?.observers?.length && !triggerTemplate?.templateRef && optionTemplate?.templateRef\">\r\n        <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ trigger: getTriggerValues(select.selected) }\"></ng-template>\r\n    </mat-select-trigger>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Default option -->\r\n    <mat-option class=\"tc-grey-500\" *ngIf=\"!multiple\" i18n=\"@@pleaseSelect\">--- Please Select ---</mat-option>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Options -->\r\n    <ng-template let-option let-first=\"first\" ngFor [ngForOf]=\"filteredOptions\">\r\n        <mat-option [value]=\"mapper ? option : option[key]\">\r\n            <span *ngIf=\"!optionTemplate?.templateRef\" i18n=\"@@selection\">{option[text], select, option {option} other {{{option[text]}}}}</span>\r\n            <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\r\n        </mat-option>\r\n    </ng-template>\r\n    <!-- #endregion -->\r\n</mat-select>\r\n\r\n<!-- #region Read only value -->\r\n<div *ngIf=\"readonly\">\r\n    <div *ngIf=\"currentValue\">\r\n        <div class=\"readonly-value\">\r\n            <span *ngIf=\"!optionTemplate?.templateRef && !triggerTemplate?.templateRef\">\r\n                <span *ngIf=\"!multiple\" i18n=\"@@selection\">{currentValue[text], select, option {option} other {{{currentValue[text]}}}}</span>\r\n                <ng-container *ngIf=\"multiple\">\r\n                    <span *ngFor=\"let optionValue of currentValue; let last = last\">\r\n                        <span i18n=\"@@selection\">{optionValue[text], select, option {option} other {{{optionValue[text]}}}}</span>\r\n                        <span *ngIf=\"!last\">,&nbsp;</span>\r\n                    </span>\r\n                </ng-container>\r\n            </span>\r\n            <ng-template *ngIf=\"triggerTemplate?.templateRef\" [ngTemplateOutlet]=\"triggerTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ trigger: getTriggerValues(currentValue) }\"></ng-template>\r\n            <ng-template *ngIf=\"optionTemplate?.templateRef && !triggerTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ option: getTriggerValues(currentValue) }\"></ng-template>\r\n        </div>\r\n        <mat-icon *ngIf=\"onLaunch?.observers?.length > 0\" class=\"vd-select-launch-readonly\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\r\n    </div>\r\n    <div *ngIf=\"!currentValue\">&nbsp;</div>\r\n</div>\r\n<!-- #endregion -->", styles: [".vd-select-launch{position:absolute;right:30px;top:-5px;font-size:18px;cursor:pointer}.readonly-value{padding-right:24px;color:#000000a3;min-height:15px}.vd-select-launch-readonly{position:absolute;right:0px;top:9px;font-size:18px;cursor:pointer}.vd-select-filter{position:sticky;top:0;z-index:100;font-size:inherit;box-shadow:none;border-radius:0;padding:16px;box-sizing:border-box;border:none;border-bottom:1px solid #dcdcdc;width:100%;background-color:#f5f5f5;outline:none}\n"], components: [{ type: i4$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4$2.MatSelectTrigger, selector: "mat-select-trigger" }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+/** @nocollapse */ /** @nocollapse */ VdSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: VdSelectComponent, selector: "vd-select", inputs: { multiple: "multiple", disabled: "disabled", sorted: "sorted", textPrefix: "textPrefix", endpoint: "endpoint", params: "params", projection: "projection", enum: "enum", key: "key", text: "text", prefix: "prefix", options: "options", filteredOptions: "filteredOptions", filterable: "filterable", cache: "cache", sortBy: "sortBy", mapper: "mapper", compareWith: "compareWith", searchField: "searchField" }, outputs: { onValueChange: "change", onItemChange: "itemChange", onSelected: "selected", onItemSelected: "itemSelected", onLaunch: "launch" }, providers: [{ provide: MatFormFieldControl, useExisting: VdSelectComponent }], queries: [{ propertyName: "optionTemplate", first: true, predicate: VdSelectOptionDirective, descendants: true }, { propertyName: "triggerTemplate", first: true, predicate: VdSelectTriggerDirective, descendants: true }], viewQueries: [{ propertyName: "selectEl", first: true, predicate: MatSelect, descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-select [placeholder]=\"placeholder\" i18n-placeholder [(ngModel)]=\"value\" #select=\"matSelect\" (selectionChange)=\"handleChange($event)\" *ngIf=\"!readonly\" [multiple]=\"multiple\" [compareWith]=\"compareWith\" [disabled]=\"disabled\" flex>\r\n    <!-- #region Filter input -->\r\n    <input #filterInput *ngIf=\"filterable\" type=\"text\" placeholder=\"Filter...\" class=\"vd-select-filter\" (keyup)=\"handleFilter($event.target.value)\">\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Trigger for launch button -->\r\n    <mat-select-trigger *ngIf=\"onLaunch?.observers?.length > 0\">\r\n        <span>{{getTriggerValues(select.selected)}}</span>\r\n        <mat-icon class=\"vd-select-launch\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\r\n    </mat-select-trigger>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Custom trigger template -->\r\n    <mat-select-trigger *ngIf=\"!onLaunch?.observers?.length && triggerTemplate?.templateRef\">\r\n        <ng-template *ngIf=\"triggerTemplate?.templateRef\" [ngTemplateOutlet]=\"triggerTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ trigger: getTriggerValues(select.selected) }\"></ng-template>\r\n    </mat-select-trigger>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Option template as trigger -->\r\n    <mat-select-trigger *ngIf=\"!onLaunch?.observers?.length && !triggerTemplate?.templateRef && optionTemplate?.templateRef\">\r\n        <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ trigger: getTriggerValues(select.selected) }\"></ng-template>\r\n    </mat-select-trigger>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Default option -->\r\n    <mat-option class=\"tc-grey-500\" *ngIf=\"!multiple\" i18n=\"@@pleaseSelect\">--- Please Select ---</mat-option>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Options -->\r\n    <ng-template let-option let-first=\"first\" ngFor [ngForOf]=\"filteredOptions\">\r\n        <mat-option [value]=\"mapper ? option : option[key]\">\r\n            <span *ngIf=\"!optionTemplate?.templateRef\" i18n=\"@@selection\">{option[text], select, option {option} other {{{option[text]}}}}</span>\r\n            <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\r\n        </mat-option>\r\n    </ng-template>\r\n    <!-- #endregion -->\r\n</mat-select>\r\n\r\n<!-- #region Read only value -->\r\n<div *ngIf=\"readonly\">\r\n    <div *ngIf=\"currentValue\">\r\n        <div class=\"readonly-value\">\r\n            <span *ngIf=\"!optionTemplate?.templateRef && !triggerTemplate?.templateRef\">\r\n                <span *ngIf=\"!multiple\" i18n=\"@@selection\">{currentValue[text], select, option {option} other {{{currentValue[text]}}}}</span>\r\n                <ng-container *ngIf=\"multiple\">\r\n                    <span *ngFor=\"let optionValue of currentValue; let last = last\">\r\n                        <span i18n=\"@@selection\">{optionValue[text], select, option {option} other {{{optionValue[text]}}}}</span>\r\n                        <span *ngIf=\"!last\">,&nbsp;</span>\r\n                    </span>\r\n                </ng-container>\r\n            </span>\r\n            <ng-template *ngIf=\"triggerTemplate?.templateRef\" [ngTemplateOutlet]=\"triggerTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ trigger: currentValue }\"></ng-template>\r\n            <ng-template *ngIf=\"optionTemplate?.templateRef && !triggerTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\r\n        </div>\r\n        <mat-icon *ngIf=\"onLaunch?.observers?.length > 0\" class=\"vd-select-launch-readonly\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\r\n    </div>\r\n    <div *ngIf=\"!currentValue\">&nbsp;</div>\r\n</div>\r\n<!-- #endregion -->", styles: [".vd-select-launch{position:absolute;right:30px;top:-5px;font-size:18px;cursor:pointer}.readonly-value{padding-right:24px;color:#000000a3;min-height:15px}.vd-select-launch-readonly{position:absolute;right:0px;top:9px;font-size:18px;cursor:pointer}.vd-select-filter{position:sticky;top:0;z-index:100;font-size:inherit;box-shadow:none;border-radius:0;padding:16px;box-sizing:border-box;border:none;border-bottom:1px solid #dcdcdc;width:100%;background-color:#f5f5f5;outline:none}\n"], components: [{ type: i4$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4$2.MatSelectTrigger, selector: "mat-select-trigger" }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vd-select', providers: [{ provide: MatFormFieldControl, useExisting: VdSelectComponent }], template: "<mat-select [placeholder]=\"placeholder\" i18n-placeholder [(ngModel)]=\"value\" #select=\"matSelect\" (selectionChange)=\"handleChange($event)\" *ngIf=\"!readonly\" [multiple]=\"multiple\" [compareWith]=\"compareWith\" [disabled]=\"disabled\" flex>\r\n    <!-- #region Filter input -->\r\n    <input #filterInput *ngIf=\"filterable\" type=\"text\" placeholder=\"Filter...\" class=\"vd-select-filter\" (keyup)=\"handleFilter($event.target.value)\">\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Trigger for launch button -->\r\n    <mat-select-trigger *ngIf=\"onLaunch?.observers?.length > 0\">\r\n        <span>{{getTriggerValues(select.selected)}}</span>\r\n        <mat-icon class=\"vd-select-launch\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\r\n    </mat-select-trigger>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Custom trigger template -->\r\n    <mat-select-trigger *ngIf=\"!onLaunch?.observers?.length && triggerTemplate?.templateRef\">\r\n        <ng-template *ngIf=\"triggerTemplate?.templateRef\" [ngTemplateOutlet]=\"triggerTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ trigger: getTriggerValues(select.selected) }\"></ng-template>\r\n    </mat-select-trigger>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Option template as trigger -->\r\n    <mat-select-trigger *ngIf=\"!onLaunch?.observers?.length && !triggerTemplate?.templateRef && optionTemplate?.templateRef\">\r\n        <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ trigger: getTriggerValues(select.selected) }\"></ng-template>\r\n    </mat-select-trigger>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Default option -->\r\n    <mat-option class=\"tc-grey-500\" *ngIf=\"!multiple\" i18n=\"@@pleaseSelect\">--- Please Select ---</mat-option>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Options -->\r\n    <ng-template let-option let-first=\"first\" ngFor [ngForOf]=\"filteredOptions\">\r\n        <mat-option [value]=\"mapper ? option : option[key]\">\r\n            <span *ngIf=\"!optionTemplate?.templateRef\" i18n=\"@@selection\">{option[text], select, option {option} other {{{option[text]}}}}</span>\r\n            <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\r\n        </mat-option>\r\n    </ng-template>\r\n    <!-- #endregion -->\r\n</mat-select>\r\n\r\n<!-- #region Read only value -->\r\n<div *ngIf=\"readonly\">\r\n    <div *ngIf=\"currentValue\">\r\n        <div class=\"readonly-value\">\r\n            <span *ngIf=\"!optionTemplate?.templateRef && !triggerTemplate?.templateRef\">\r\n                <span *ngIf=\"!multiple\" i18n=\"@@selection\">{currentValue[text], select, option {option} other {{{currentValue[text]}}}}</span>\r\n                <ng-container *ngIf=\"multiple\">\r\n                    <span *ngFor=\"let optionValue of currentValue; let last = last\">\r\n                        <span i18n=\"@@selection\">{optionValue[text], select, option {option} other {{{optionValue[text]}}}}</span>\r\n                        <span *ngIf=\"!last\">,&nbsp;</span>\r\n                    </span>\r\n                </ng-container>\r\n            </span>\r\n            <ng-template *ngIf=\"triggerTemplate?.templateRef\" [ngTemplateOutlet]=\"triggerTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ trigger: getTriggerValues(currentValue) }\"></ng-template>\r\n            <ng-template *ngIf=\"optionTemplate?.templateRef && !triggerTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ option: getTriggerValues(currentValue) }\"></ng-template>\r\n        </div>\r\n        <mat-icon *ngIf=\"onLaunch?.observers?.length > 0\" class=\"vd-select-launch-readonly\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\r\n    </div>\r\n    <div *ngIf=\"!currentValue\">&nbsp;</div>\r\n</div>\r\n<!-- #endregion -->", styles: [".vd-select-launch{position:absolute;right:30px;top:-5px;font-size:18px;cursor:pointer}.readonly-value{padding-right:24px;color:#000000a3;min-height:15px}.vd-select-launch-readonly{position:absolute;right:0px;top:9px;font-size:18px;cursor:pointer}.vd-select-filter{position:sticky;top:0;z-index:100;font-size:inherit;box-shadow:none;border-radius:0;padding:16px;box-sizing:border-box;border:none;border-bottom:1px solid #dcdcdc;width:100%;background-color:#f5f5f5;outline:none}\n"] }]
+            args: [{ selector: 'vd-select', providers: [{ provide: MatFormFieldControl, useExisting: VdSelectComponent }], template: "<mat-select [placeholder]=\"placeholder\" i18n-placeholder [(ngModel)]=\"value\" #select=\"matSelect\" (selectionChange)=\"handleChange($event)\" *ngIf=\"!readonly\" [multiple]=\"multiple\" [compareWith]=\"compareWith\" [disabled]=\"disabled\" flex>\r\n    <!-- #region Filter input -->\r\n    <input #filterInput *ngIf=\"filterable\" type=\"text\" placeholder=\"Filter...\" class=\"vd-select-filter\" (keyup)=\"handleFilter($event.target.value)\">\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Trigger for launch button -->\r\n    <mat-select-trigger *ngIf=\"onLaunch?.observers?.length > 0\">\r\n        <span>{{getTriggerValues(select.selected)}}</span>\r\n        <mat-icon class=\"vd-select-launch\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\r\n    </mat-select-trigger>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Custom trigger template -->\r\n    <mat-select-trigger *ngIf=\"!onLaunch?.observers?.length && triggerTemplate?.templateRef\">\r\n        <ng-template *ngIf=\"triggerTemplate?.templateRef\" [ngTemplateOutlet]=\"triggerTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ trigger: getTriggerValues(select.selected) }\"></ng-template>\r\n    </mat-select-trigger>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Option template as trigger -->\r\n    <mat-select-trigger *ngIf=\"!onLaunch?.observers?.length && !triggerTemplate?.templateRef && optionTemplate?.templateRef\">\r\n        <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ trigger: getTriggerValues(select.selected) }\"></ng-template>\r\n    </mat-select-trigger>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Default option -->\r\n    <mat-option class=\"tc-grey-500\" *ngIf=\"!multiple\" i18n=\"@@pleaseSelect\">--- Please Select ---</mat-option>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Options -->\r\n    <ng-template let-option let-first=\"first\" ngFor [ngForOf]=\"filteredOptions\">\r\n        <mat-option [value]=\"mapper ? option : option[key]\">\r\n            <span *ngIf=\"!optionTemplate?.templateRef\" i18n=\"@@selection\">{option[text], select, option {option} other {{{option[text]}}}}</span>\r\n            <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\r\n        </mat-option>\r\n    </ng-template>\r\n    <!-- #endregion -->\r\n</mat-select>\r\n\r\n<!-- #region Read only value -->\r\n<div *ngIf=\"readonly\">\r\n    <div *ngIf=\"currentValue\">\r\n        <div class=\"readonly-value\">\r\n            <span *ngIf=\"!optionTemplate?.templateRef && !triggerTemplate?.templateRef\">\r\n                <span *ngIf=\"!multiple\" i18n=\"@@selection\">{currentValue[text], select, option {option} other {{{currentValue[text]}}}}</span>\r\n                <ng-container *ngIf=\"multiple\">\r\n                    <span *ngFor=\"let optionValue of currentValue; let last = last\">\r\n                        <span i18n=\"@@selection\">{optionValue[text], select, option {option} other {{{optionValue[text]}}}}</span>\r\n                        <span *ngIf=\"!last\">,&nbsp;</span>\r\n                    </span>\r\n                </ng-container>\r\n            </span>\r\n            <ng-template *ngIf=\"triggerTemplate?.templateRef\" [ngTemplateOutlet]=\"triggerTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ trigger: currentValue }\"></ng-template>\r\n            <ng-template *ngIf=\"optionTemplate?.templateRef && !triggerTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\r\n        </div>\r\n        <mat-icon *ngIf=\"onLaunch?.observers?.length > 0\" class=\"vd-select-launch-readonly\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\r\n    </div>\r\n    <div *ngIf=\"!currentValue\">&nbsp;</div>\r\n</div>\r\n<!-- #endregion -->", styles: [".vd-select-launch{position:absolute;right:30px;top:-5px;font-size:18px;cursor:pointer}.readonly-value{padding-right:24px;color:#000000a3;min-height:15px}.vd-select-launch-readonly{position:absolute;right:0px;top:9px;font-size:18px;cursor:pointer}.vd-select-filter{position:sticky;top:0;z-index:100;font-size:inherit;box-shadow:none;border-radius:0;padding:16px;box-sizing:border-box;border:none;border-bottom:1px solid #dcdcdc;width:100%;background-color:#f5f5f5;outline:none}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i1.NgControl, decorators: [{
                     type: Optional
                 }, {
@@ -14136,10 +14136,10 @@ class VdGenericFormComponent {
     }
 }
 /** @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", context: "context", 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, formGroup, context)\">\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\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\">\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\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\"></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\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\" flex>\r\n                        <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerTemplate\">\r\n                            <div [innerHTML]=\"field.triggerTemplate(trigger)\"></div>\r\n                        </ng-template>\r\n                        <ng-template vd-select-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n                            <div [outerHTML]=\"field.optionTemplate(option)\"></div>\r\n                        </ng-template>\r\n                    </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 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?field.params(formGroup.value, formGroup, context):{}\" [projection]=\"field.projection\" [mapper]=\"field.mapper\" [compareWith]=\"field.compareWith\" [key]=\"field.optionValue\" [text]=\"field.optionText\" [multiple]=\"field.multiple\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\" (itemSelected)=\"field.itemSelect && field.itemSelect($event, formGroup?.value, formGroup, context);\" (itemChange)=\"field.itemChange && field.itemChange($event, formGroup?.value, formGroup, context);\" flex>\r\n                        <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerTemplate\">\r\n                            <div [innerHTML]=\"field.triggerTemplate(trigger)\"></div>\r\n                        </ng-template>\r\n                        <ng-template vd-select-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n                            <div [outerHTML]=\"field.optionTemplate(option)\"></div>\r\n                        </ng-template>\r\n                    </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\" [disableControl]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\">\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 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\" [params]=\"field.params?field.params(formGroup?.value, formGroup, context):{}\" [searchField]=\"field.searchField\" [projection]=\"field.projection\" [key]=\"field.optionValue\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\" [removable]=\"!field.clear\" [context]=\"context\" [suffixButtons]=\"field.suffixButtons\" (initSelect)=\"field.itemSelect && field.itemSelect($event, formGroup?.value, formGroup, context);\" (selected)=\"field.itemChange && field.itemChange($event, formGroup?.value, formGroup, context);\" (cleared)=\"field.clear && field.clear(formGroup?.value, formGroup, context);\" 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 were 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\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\">\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\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\">\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\" [disableControl]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\">{{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: i8.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", "context", "key", "searchField", "searchFields", "termMinlength", "limit", "removable", "debounce", "suffixButtons", "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: VdSelectTriggerDirective, selector: "[vd-select-trigger]ng-template" }, { type: VdSelectOptionDirective, selector: "[vd-select-option]ng-template" }, { type: DisableControlDirective, selector: "[disableControl]", inputs: ["disableControl"] }, { 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: i8.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]" }] });
+/** @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", context: "context", 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\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value, formGroup, context)\">\r\n                <ng-container *ngIf=\"field.wrapped\">\r\n                    <!-- #region Text input -->\r\n                    <mat-form-field *ngSwitchCase=\"FormFieldType.Text\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" 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\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\">\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\" [class]=\"field.cssClass\" layout-margin appearance=\"outline\">\r\n                        <mat-label>{{field.header}}</mat-label>\r\n                        <textarea matInput [formControlName]=\"field.name\" rows=\"field.rows||2\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\"></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\" [class]=\"field.cssClass\" 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\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\" flex>\r\n                            <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerTemplate\">\r\n                                <div [innerHTML]=\"field.triggerTemplate(trigger)\"></div>\r\n                            </ng-template>\r\n                            <ng-template vd-select-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n                                <div [outerHTML]=\"field.optionTemplate(option)\"></div>\r\n                            </ng-template>\r\n                        </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 VdSelect -->\r\n                    <mat-form-field *ngSwitchCase=\"FormFieldType.VdSelect\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" 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?field.params(formGroup.value, formGroup, context):{}\" [projection]=\"field.projection\" [mapper]=\"field.mapper\" [compareWith]=\"field.compareWith\" [key]=\"field.optionValue\" [text]=\"field.optionText\" [multiple]=\"field.multiple\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\" (itemSelected)=\"field.itemSelect && field.itemSelect($event, formGroup?.value, formGroup, context);\" (itemChange)=\"field.itemChange && field.itemChange($event, formGroup?.value, formGroup, context);\" flex>\r\n                            <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerTemplate\">\r\n                                <div [innerHTML]=\"field.triggerTemplate(trigger)\"></div>\r\n                            </ng-template>\r\n                            <ng-template vd-select-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n                                <div [outerHTML]=\"field.optionTemplate(option)\"></div>\r\n                            </ng-template>\r\n                        </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\" [class]=\"field.cssClass\" layout-margin appearance=\"outline\">\r\n                        <mat-label>{{field.header}}</mat-label>\r\n                        <mat-chip-list #chipList [formControlName]=\"field.name\" [disableControl]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\">\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 VdChips -->\r\n                    <mat-form-field *ngSwitchCase=\"FormFieldType.VdChips\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin appearance=\"outline\">\r\n                        <mat-label>{{field.header}}</mat-label>\r\n                        <vd-chips #vdChip [formControlName]=\"field.name\" [endpoint]=\"field.endpoint\" [params]=\"field.params?field.params(formGroup?.value, formGroup, context):{}\" [searchField]=\"field.searchField\" [projection]=\"field.projection\" [key]=\"field.optionValue\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\" [removable]=\"!field.clear\" [context]=\"context\" [suffixButtons]=\"field.suffixButtons\" (initSelect)=\"field.itemSelect && field.itemSelect($event, formGroup?.value, formGroup, context);\" (selected)=\"field.itemChange && field.itemChange($event, formGroup?.value, formGroup, context);\" (cleared)=\"field.clear && field.clear(formGroup?.value, formGroup, context);\" 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 were 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\" [class]=\"field.cssClass\" 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\" [class]=\"field.cssClass\" 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\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\">\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\" [class]=\"field.cssClass\" layout-margin appearance=\"outline\">\r\n                        <mat-label>{{field.header}}</mat-label>\r\n                        <input matInput [formControlName]=\"field.name\" autocomplete=\"off\" [matDatepicker]=\"datePicker\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\">\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                </ng-container>\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\" [disableControl]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\">{{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: i8.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", "context", "key", "searchField", "searchFields", "termMinlength", "limit", "removable", "debounce", "suffixButtons", "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: VdSelectTriggerDirective, selector: "[vd-select-trigger]ng-template" }, { type: VdSelectOptionDirective, selector: "[vd-select-option]ng-template" }, { type: DisableControlDirective, selector: "[disableControl]", inputs: ["disableControl"] }, { 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: i8.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, formGroup, context)\">\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\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\">\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\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\"></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\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\" flex>\r\n                        <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerTemplate\">\r\n                            <div [innerHTML]=\"field.triggerTemplate(trigger)\"></div>\r\n                        </ng-template>\r\n                        <ng-template vd-select-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n                            <div [outerHTML]=\"field.optionTemplate(option)\"></div>\r\n                        </ng-template>\r\n                    </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 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?field.params(formGroup.value, formGroup, context):{}\" [projection]=\"field.projection\" [mapper]=\"field.mapper\" [compareWith]=\"field.compareWith\" [key]=\"field.optionValue\" [text]=\"field.optionText\" [multiple]=\"field.multiple\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\" (itemSelected)=\"field.itemSelect && field.itemSelect($event, formGroup?.value, formGroup, context);\" (itemChange)=\"field.itemChange && field.itemChange($event, formGroup?.value, formGroup, context);\" flex>\r\n                        <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerTemplate\">\r\n                            <div [innerHTML]=\"field.triggerTemplate(trigger)\"></div>\r\n                        </ng-template>\r\n                        <ng-template vd-select-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n                            <div [outerHTML]=\"field.optionTemplate(option)\"></div>\r\n                        </ng-template>\r\n                    </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\" [disableControl]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\">\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 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\" [params]=\"field.params?field.params(formGroup?.value, formGroup, context):{}\" [searchField]=\"field.searchField\" [projection]=\"field.projection\" [key]=\"field.optionValue\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\" [removable]=\"!field.clear\" [context]=\"context\" [suffixButtons]=\"field.suffixButtons\" (initSelect)=\"field.itemSelect && field.itemSelect($event, formGroup?.value, formGroup, context);\" (selected)=\"field.itemChange && field.itemChange($event, formGroup?.value, formGroup, context);\" (cleared)=\"field.clear && field.clear(formGroup?.value, formGroup, context);\" 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 were 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\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\">\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\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\">\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\" [disableControl]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\">{{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\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value, formGroup, context)\">\r\n                <ng-container *ngIf=\"field.wrapped\">\r\n                    <!-- #region Text input -->\r\n                    <mat-form-field *ngSwitchCase=\"FormFieldType.Text\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" 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\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\">\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\" [class]=\"field.cssClass\" layout-margin appearance=\"outline\">\r\n                        <mat-label>{{field.header}}</mat-label>\r\n                        <textarea matInput [formControlName]=\"field.name\" rows=\"field.rows||2\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\"></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\" [class]=\"field.cssClass\" 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\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\" flex>\r\n                            <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerTemplate\">\r\n                                <div [innerHTML]=\"field.triggerTemplate(trigger)\"></div>\r\n                            </ng-template>\r\n                            <ng-template vd-select-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n                                <div [outerHTML]=\"field.optionTemplate(option)\"></div>\r\n                            </ng-template>\r\n                        </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 VdSelect -->\r\n                    <mat-form-field *ngSwitchCase=\"FormFieldType.VdSelect\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" 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?field.params(formGroup.value, formGroup, context):{}\" [projection]=\"field.projection\" [mapper]=\"field.mapper\" [compareWith]=\"field.compareWith\" [key]=\"field.optionValue\" [text]=\"field.optionText\" [multiple]=\"field.multiple\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\" (itemSelected)=\"field.itemSelect && field.itemSelect($event, formGroup?.value, formGroup, context);\" (itemChange)=\"field.itemChange && field.itemChange($event, formGroup?.value, formGroup, context);\" flex>\r\n                            <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerTemplate\">\r\n                                <div [innerHTML]=\"field.triggerTemplate(trigger)\"></div>\r\n                            </ng-template>\r\n                            <ng-template vd-select-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n                                <div [outerHTML]=\"field.optionTemplate(option)\"></div>\r\n                            </ng-template>\r\n                        </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\" [class]=\"field.cssClass\" layout-margin appearance=\"outline\">\r\n                        <mat-label>{{field.header}}</mat-label>\r\n                        <mat-chip-list #chipList [formControlName]=\"field.name\" [disableControl]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\">\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 VdChips -->\r\n                    <mat-form-field *ngSwitchCase=\"FormFieldType.VdChips\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin appearance=\"outline\">\r\n                        <mat-label>{{field.header}}</mat-label>\r\n                        <vd-chips #vdChip [formControlName]=\"field.name\" [endpoint]=\"field.endpoint\" [params]=\"field.params?field.params(formGroup?.value, formGroup, context):{}\" [searchField]=\"field.searchField\" [projection]=\"field.projection\" [key]=\"field.optionValue\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\" [removable]=\"!field.clear\" [context]=\"context\" [suffixButtons]=\"field.suffixButtons\" (initSelect)=\"field.itemSelect && field.itemSelect($event, formGroup?.value, formGroup, context);\" (selected)=\"field.itemChange && field.itemChange($event, formGroup?.value, formGroup, context);\" (cleared)=\"field.clear && field.clear(formGroup?.value, formGroup, context);\" 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 were 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\" [class]=\"field.cssClass\" 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\" [class]=\"field.cssClass\" 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\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\">\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\" [class]=\"field.cssClass\" layout-margin appearance=\"outline\">\r\n                        <mat-label>{{field.header}}</mat-label>\r\n                        <input matInput [formControlName]=\"field.name\" autocomplete=\"off\" [matDatepicker]=\"datePicker\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\">\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                </ng-container>\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\" [disableControl]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\">{{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: [{
@@ -14529,6 +14529,7 @@ class FormFieldDefinition {
      */
     constructor(init) {
         this.groupHeader = $localize `:@@details:Details`;
+        this.wrapped = true;
         this.inputType = 'text';
         this.compareWith = (o1, o2) => o1 === o2;
         this.searchField = 'search';
@@ -14541,6 +14542,7 @@ class FormFieldDefinition {
     }
 }
 
+const unwarppedFormFields = [FormFieldType.Checkbox, FormFieldType.Editor, FormFieldType.Code, FormFieldType.File, FormFieldType.Custom];
 /**
  * Property decorator to create form fields
  * @param args
@@ -14597,6 +14599,10 @@ function FormField(args) {
                     break;
             }
         }
+        /* Set wrapped to false, if the field cant be wrapped in the <mat-form-field> */
+        if (unwarppedFormFields?.includes(formField.type)) {
+            formField.wrapped = false;
+        }
         /* Get old form fields */
         let previousFormFields = Reflect.getMetadata(formFieldsMetadataKey, target);
         /* Override the field, if exists */