ngx-material-entity 1.1.5 → 15.0.0

package/fesm2015/ngx-material-entity.mjs

@@ -4,7 +4,7 @@ import { isEqual, cloneDeep, omit, isNil, omitBy, isArray } from 'lodash';
 import JSZip from 'jszip';
 import { BehaviorSubject, firstValueFrom, Subject, takeUntil } from 'rxjs';
 import * as i0 from '@angular/core';
-import { Component, Inject, NgModule, InjectionToken, EventEmitter, Input, Output, Directive, HostListener, ViewChild } from '@angular/core';
+import { Component, Inject, NgModule, EventEmitter, Input, Output, Directive, HostListener, InjectionToken, ViewChild } from '@angular/core';
 import * as i1 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import * as i1$1 from '@angular/common';
@@ -15,30 +15,30 @@ import * as i4$1 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import * as i5 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i5$3 from '@angular/material/table';
-import { MatTableDataSource, MatTableModule } from '@angular/material/table';
-import { SelectionModel } from '@angular/cdk/collections';
-import * as i6$1 from '@angular/material/tabs';
-import { MatTabsModule } from '@angular/material/tabs';
-import * as i2 from '@angular/material/form-field';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i3 from '@angular/material/input';
-import { MatInputModule } from '@angular/material/input';
-import * as i1$2 from '@angular/cdk/text-field';
-import * as i5$1 from '@angular/material/core';
 import * as i6 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import * as i4$2 from '@angular/material/select';
-import { MatSelectModule } from '@angular/material/select';
-import * as i4$3 from '@angular/material/slide-toggle';
-import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import * as i4$4 from '@angular/material/slider';
-import { MatSliderModule } from '@angular/material/slider';
-import * as i5$2 from '@angular/material/chips';
+import * as i5$3 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
-import * as i4$5 from '@angular/material/datepicker';
+import * as i4$2 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
+import * as i2$1 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
+import * as i2 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i4$3 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import * as i4$4 from '@angular/material/slide-toggle';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import * as i4$5 from '@angular/material/slider';
+import { MatSliderModule } from '@angular/material/slider';
+import * as i5$1 from '@angular/material/table';
+import { MatTableDataSource, MatTableModule } from '@angular/material/table';
+import * as i6$1 from '@angular/material/tabs';
+import { MatTabsModule } from '@angular/material/tabs';
+import { SelectionModel } from '@angular/cdk/collections';
+import * as i5$2 from '@angular/material/core';
+import * as i3 from '@angular/cdk/text-field';
 import * as i7 from '@angular/material/paginator';
 import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
@@ -156,6 +156,7 @@ var DecoratorTypes;
     DecoratorTypes["DATE_TIME"] = "dateTime";
     DecoratorTypes["FILE_DEFAULT"] = "fileDefault";
     DecoratorTypes["FILE_IMAGE"] = "fileImage";
+    DecoratorTypes["REFERENCES_MANY"] = "referencesMany";
     DecoratorTypes["CUSTOM"] = "custom";
 })(DecoratorTypes || (DecoratorTypes = {}));
 
@@ -971,6 +972,8 @@ class EntityUtilities {
                     return false;
                 }
                 break;
+            case DecoratorTypes.REFERENCES_MANY:
+                break;
             case DecoratorTypes.CUSTOM:
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any, max-len
                 const customMetadata = metadata;
@@ -1226,6 +1229,9 @@ class EntityUtilities {
                     return EntityUtilities.isEqualArrayDate(value, valuePriorChanges);
                 case DecoratorTypes.ARRAY_DATE_RANGE:
                     return EntityUtilities.isEqualArrayDateRange(value, valuePriorChanges, metadata.filter);
+                case DecoratorTypes.ARRAY_STRING_CHIPS:
+                case DecoratorTypes.ARRAY_STRING_AUTOCOMPLETE_CHIPS:
+                    return EntityUtilities.isEqualArrayString(value, valuePriorChanges);
                 case DecoratorTypes.FILE_IMAGE:
                 case DecoratorTypes.FILE_DEFAULT:
                     return EntityUtilities.isEqualFile(value, valuePriorChanges, metadata.multiple);
@@ -1237,6 +1243,11 @@ class EntityUtilities {
             }
         });
     }
+    static isEqualArrayString(value, valuePriorChanges) {
+        const stringArray = LodashUtilities.cloneDeep(value).sort();
+        const stringArrayPriorChanges = LodashUtilities.cloneDeep(valuePriorChanges).sort();
+        return LodashUtilities.isEqual(stringArray, stringArrayPriorChanges);
+    }
     static isEqualArrayDate(value, valuePriorChanges) {
         const newValue = value.map(v => new Date(v)).sort();
         const newValuePriorChanges = valuePriorChanges.map(v => new Date(v)).sort();
@@ -1834,9 +1845,9 @@ class NgxMatEntityConfirmDialogComponent {
         this.dialogRef.close();
     }
 }
-NgxMatEntityConfirmDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: NgxMatEntityConfirmDialogComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-NgxMatEntityConfirmDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.1", type: NgxMatEntityConfirmDialogComponent, selector: "ngx-mat-entity-confirm-dialog", ngImport: i0, template: "<h2 mat-dialog-title *ngIf=\"data.title\">{{data.title}}</h2>\n\n<mat-dialog-content>\n    <p *ngFor=\"let paragraph of data.text\">{{paragraph}}</p>\n    <div *ngIf=\"data.requireConfirmation\" class=\"checkbox-wrapper\">\n        <mat-checkbox [(ngModel)]=\"confirm\" name=\"confirm\">\n            {{data.confirmationText}}\n        </mat-checkbox>\n    </div>\n</mat-dialog-content>\n\n<mat-dialog-actions>\n    <button type=\"button\" *ngIf=\"data.type === 'delete'\" mat-raised-button color=\"warn\" (click)=\"confirmAction()\" [disabled]=\"data.requireConfirmation && !confirm\" class=\"confirm-button\">\n        {{data.confirmButtonLabel}}\n    </button>\n    <button type=\"button\" *ngIf=\"data.type !== 'delete'\" mat-raised-button (click)=\"confirmAction()\" [disabled]=\"data.requireConfirmation && !confirm\" class=\"confirm-button\">\n        {{data.confirmButtonLabel}}\n    </button>\n    <button type=\"button\" *ngIf=\"data.type !== 'info-only'\" mat-raised-button (click)=\"cancel()\" class=\"cancel-button\">\n        {{data.cancelButtonLabel}}\n    </button>\n</mat-dialog-actions>\n", styles: [".checkbox-wrapper{min-height:50px;display:flex}.checkbox-wrapper>mat-checkbox{align-self:center}mat-dialog-actions{justify-content:space-between}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: NgxMatEntityConfirmDialogComponent, decorators: [{
+NgxMatEntityConfirmDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: NgxMatEntityConfirmDialogComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+NgxMatEntityConfirmDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: NgxMatEntityConfirmDialogComponent, selector: "ngx-mat-entity-confirm-dialog", ngImport: i0, template: "<h2 mat-dialog-title *ngIf=\"data.title\">{{data.title}}</h2>\n\n<mat-dialog-content>\n    <p *ngFor=\"let paragraph of data.text\">{{paragraph}}</p>\n    <div *ngIf=\"data.requireConfirmation\" class=\"checkbox-wrapper\">\n        <mat-checkbox [(ngModel)]=\"confirm\" name=\"confirm\">\n            {{data.confirmationText}}\n        </mat-checkbox>\n    </div>\n</mat-dialog-content>\n\n<mat-dialog-actions>\n    <button type=\"button\" *ngIf=\"data.type === 'delete'\" mat-raised-button color=\"warn\" (click)=\"confirmAction()\" [disabled]=\"data.requireConfirmation && !confirm\" class=\"confirm-button\">\n        {{data.confirmButtonLabel}}\n    </button>\n    <button type=\"button\" *ngIf=\"data.type !== 'delete'\" mat-raised-button (click)=\"confirmAction()\" [disabled]=\"data.requireConfirmation && !confirm\" class=\"confirm-button\">\n        {{data.confirmButtonLabel}}\n    </button>\n    <button type=\"button\" *ngIf=\"data.type !== 'info-only'\" mat-raised-button (click)=\"cancel()\" class=\"cancel-button\">\n        {{data.cancelButtonLabel}}\n    </button>\n</mat-dialog-actions>\n", styles: [".checkbox-wrapper{min-height:50px;display:flex}.checkbox-wrapper>mat-checkbox{align-self:center}mat-dialog-actions{justify-content:space-between}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: NgxMatEntityConfirmDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-mat-entity-confirm-dialog', template: "<h2 mat-dialog-title *ngIf=\"data.title\">{{data.title}}</h2>\n\n<mat-dialog-content>\n    <p *ngFor=\"let paragraph of data.text\">{{paragraph}}</p>\n    <div *ngIf=\"data.requireConfirmation\" class=\"checkbox-wrapper\">\n        <mat-checkbox [(ngModel)]=\"confirm\" name=\"confirm\">\n            {{data.confirmationText}}\n        </mat-checkbox>\n    </div>\n</mat-dialog-content>\n\n<mat-dialog-actions>\n    <button type=\"button\" *ngIf=\"data.type === 'delete'\" mat-raised-button color=\"warn\" (click)=\"confirmAction()\" [disabled]=\"data.requireConfirmation && !confirm\" class=\"confirm-button\">\n        {{data.confirmButtonLabel}}\n    </button>\n    <button type=\"button\" *ngIf=\"data.type !== 'delete'\" mat-raised-button (click)=\"confirmAction()\" [disabled]=\"data.requireConfirmation && !confirm\" class=\"confirm-button\">\n        {{data.confirmButtonLabel}}\n    </button>\n    <button type=\"button\" *ngIf=\"data.type !== 'info-only'\" mat-raised-button (click)=\"cancel()\" class=\"cancel-button\">\n        {{data.cancelButtonLabel}}\n    </button>\n</mat-dialog-actions>\n", styles: [".checkbox-wrapper{min-height:50px;display:flex}.checkbox-wrapper>mat-checkbox{align-self:center}mat-dialog-actions{justify-content:space-between}\n"] }]
         }], ctorParameters: function () {
@@ -1848,10 +1859,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
 
 class NgxMatEntityConfirmDialogModule {
 }
-NgxMatEntityConfirmDialogModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: NgxMatEntityConfirmDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NgxMatEntityConfirmDialogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.1", ngImport: i0, type: NgxMatEntityConfirmDialogModule, declarations: [NgxMatEntityConfirmDialogComponent], imports: [CommonModule, MatDialogModule, FormsModule, MatCheckboxModule, MatButtonModule], exports: [NgxMatEntityConfirmDialogComponent] });
-NgxMatEntityConfirmDialogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: NgxMatEntityConfirmDialogModule, imports: [CommonModule, MatDialogModule, FormsModule, MatCheckboxModule, MatButtonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: NgxMatEntityConfirmDialogModule, decorators: [{
+NgxMatEntityConfirmDialogModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: NgxMatEntityConfirmDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NgxMatEntityConfirmDialogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.3", ngImport: i0, type: NgxMatEntityConfirmDialogModule, declarations: [NgxMatEntityConfirmDialogComponent], imports: [CommonModule, MatDialogModule, FormsModule, MatCheckboxModule, MatButtonModule], exports: [NgxMatEntityConfirmDialogComponent] });
+NgxMatEntityConfirmDialogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: NgxMatEntityConfirmDialogModule, imports: [CommonModule, MatDialogModule, FormsModule, MatCheckboxModule, MatButtonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: NgxMatEntityConfirmDialogModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [NgxMatEntityConfirmDialogComponent],
@@ -1860,111 +1871,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
                 }]
         }] });
 
-const NGX_GET_VALIDATION_ERROR_MESSAGE = new InjectionToken('Provider for the default getValidationErrorMessage.', {
-    providedIn: 'root',
-    factory: () => getValidationErrorMessage
-});
-/**
- * Generates a default error message for most validation errors.
- *
- * @param model - The ngModel to get the error from.
- * @returns The Validation Error Message to display.
- */
-function getValidationErrorMessage(model) {
-    if (model.hasError('matDatepickerParse')) {
-        return 'not a valid date';
-    }
-    else if (model.hasError('email')) {
-        return 'not a valid email';
-    }
-    else if (model.hasError('minlength')) {
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-        return `needs to be at least ${model.getError('minlength').requiredLength} characters long`;
-    }
-    else if (model.hasError('min')) {
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-        return `needs to be equal or bigger than ${model.getError('min').min}`;
-    }
-    else if (model.hasError('max')) {
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-        return `needs to be equal or smaller than ${model.getError('max').max}`;
-    }
-    else if (model.hasError('required')) {
-        return 'required';
-    }
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-    else if (model.hasError('pattern') && model.getError('pattern').requiredPattern === '^true$') {
-        return 'needs to be selected';
-    }
-    else {
-        return 'invalid input';
-    }
-}
-
-/**
- * The internal CreateDialogData. Requires all default values the user can leave out.
- */
-class CreateDialogDataInternal {
-    constructor(title, createButtonLabel, cancelButtonLabel, createRequiresConfirmDialog, confirmCreateDialogData) {
-        this.title = title;
-        this.createButtonLabel = createButtonLabel;
-        this.cancelButtonLabel = cancelButtonLabel;
-        this.createRequiresConfirmDialog = createRequiresConfirmDialog;
-        this.confirmCreateDialogData = confirmCreateDialogData;
-    }
-}
-/**
- * The Builder for the CreateDialogData. Sets default values.
- */
-class CreateDialogDataBuilder extends BaseBuilder {
-    constructor(data) {
-        super(data);
-    }
-    // eslint-disable-next-line jsdoc/require-jsdoc
-    generateBaseData(data) {
-        var _a, _b, _c, _d;
-        const confirmCreateDialogData = new ConfirmDialogDataBuilder(data === null || data === void 0 ? void 0 : data.confirmCreateDialogData)
-            .withDefault('confirmButtonLabel', 'create')
-            .withDefault('text', ['Do you really want to create this entity?'])
-            .withDefault('title', 'Create')
-            .getResult();
-        return new CreateDialogDataInternal((_a = data === null || data === void 0 ? void 0 : data.title) !== null && _a !== void 0 ? _a : 'Create', (_b = data === null || data === void 0 ? void 0 : data.createButtonLabel) !== null && _b !== void 0 ? _b : 'Create', (_c = data === null || data === void 0 ? void 0 : data.cancelButtonLabel) !== null && _c !== void 0 ? _c : 'Cancel', (_d = data === null || data === void 0 ? void 0 : data.createRequiresConfirmDialog) !== null && _d !== void 0 ? _d : false, confirmCreateDialogData);
-    }
-}
-
-/**
- * The internal AddArrayItemDialogData. Requires all default values the user can leave out.
- */
-class AddArrayItemDialogDataInternal {
-    constructor(entity, createDialogData, getValidationErrorMessage) {
-        this.entity = entity;
-        this.createDialogData = createDialogData;
-        this.getValidationErrorMessage = getValidationErrorMessage;
-    }
-}
-/**
- * The Builder for the AddArrayItemDialogData. Sets default values.
- */
-let AddArrayItemDialogDataBuilder = class AddArrayItemDialogDataBuilder extends BaseBuilder {
-    constructor(data, defaultGetValidationErrorMessage) {
-        super(data);
-        this.defaultGetValidationErrorMessage = defaultGetValidationErrorMessage;
-    }
-    // eslint-disable-next-line jsdoc/require-jsdoc
-    generateBaseData(data) {
-        var _a;
-        const createDialogData = new CreateDialogDataBuilder(data.createDialogData)
-            .withDefault('createButtonLabel', 'Add')
-            .withDefault('title', 'Add to array')
-            .getResult();
-        return new AddArrayItemDialogDataInternal(data.entity, createDialogData, (_a = data.getValidationErrorMessage) !== null && _a !== void 0 ? _a : this.defaultGetValidationErrorMessage);
-    }
-};
-AddArrayItemDialogDataBuilder = __decorate([
-    __param(1, Inject(NGX_GET_VALIDATION_ERROR_MESSAGE)),
-    __metadata("design:paramtypes", [Object, Function])
-], AddArrayItemDialogDataBuilder);
-
 /**
  * Provides functionality around material selections inside of tables.
  */
@@ -2056,9 +1962,9 @@ class NgxMatEntityBaseInputComponent {
         this.inputChangeEvent.emit();
     }
 }
-NgxMatEntityBaseInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: NgxMatEntityBaseInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NgxMatEntityBaseInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.1", type: NgxMatEntityBaseInputComponent, selector: "ngx-mat-entity-base-input", inputs: { entity: "entity", key: "key", getValidationErrorMessage: "getValidationErrorMessage", isReadOnly: "isReadOnly" }, outputs: { inputChangeEvent: "inputChangeEvent" }, ngImport: i0, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: NgxMatEntityBaseInputComponent, decorators: [{
+NgxMatEntityBaseInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: NgxMatEntityBaseInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NgxMatEntityBaseInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: NgxMatEntityBaseInputComponent, selector: "ngx-mat-entity-base-input", inputs: { entity: "entity", key: "key", getValidationErrorMessage: "getValidationErrorMessage", isReadOnly: "isReadOnly" }, outputs: { inputChangeEvent: "inputChangeEvent" }, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: NgxMatEntityBaseInputComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngx-mat-entity-base-input',
@@ -2076,155 +1982,162 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
                 type: Output
             }] } });
 
-/* eslint-disable jsdoc/require-jsdoc */
-class StringInputComponent extends NgxMatEntityBaseInputComponent {
-}
-StringInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: StringInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-StringInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.1", type: StringInputComponent, selector: "string-input", usesInheritance: true, ngImport: i0, template: "<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <input\n        matInput\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString()\"\n        #model=\"ngModel\"\n        [required]=\"metadata.required\"\n        [pattern]=\"metadata.regex ?? '[\\\\s\\\\S]*'\"\n        [minlength]=\"metadata.minLength ?? null\"\n        [maxlength]=\"metadata.maxLength ?? null\"\n        (ngModelChange)=\"emitChange()\"\n        [disabled]=\"isReadOnly\"\n    >\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i2.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: StringInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'string-input', template: "<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <input\n        matInput\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString()\"\n        #model=\"ngModel\"\n        [required]=\"metadata.required\"\n        [pattern]=\"metadata.regex ?? '[\\\\s\\\\S]*'\"\n        [minlength]=\"metadata.minLength ?? null\"\n        [maxlength]=\"metadata.maxLength ?? null\"\n        (ngModelChange)=\"emitChange()\"\n        [disabled]=\"isReadOnly\"\n    >\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"] }]
-        }] });
-
-/* eslint-disable jsdoc/require-jsdoc */
-class StringTextboxInputComponent extends NgxMatEntityBaseInputComponent {
-}
-StringTextboxInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: StringTextboxInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-StringTextboxInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.1", type: StringTextboxInputComponent, selector: "string-textbox-input", usesInheritance: true, ngImport: i0, template: "<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <textarea\n        matInput\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString()\"\n        #model=\"ngModel\"\n        cdkTextareaAutosize\n        cdkAutosizeMinRows=\"10\"\n        [required]=\"metadata.required\"\n        [minlength]=\"metadata.minLength ?? null\"\n        [maxlength]=\"metadata.maxLength ?? null\"\n        (ngModelChange)=\"emitChange()\"\n        [disabled]=\"isReadOnly\"\n    >\n    </textarea>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i1$2.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "directive", type: i2.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: StringTextboxInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'string-textbox-input', template: "<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <textarea\n        matInput\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString()\"\n        #model=\"ngModel\"\n        cdkTextareaAutosize\n        cdkAutosizeMinRows=\"10\"\n        [required]=\"metadata.required\"\n        [minlength]=\"metadata.minLength ?? null\"\n        [maxlength]=\"metadata.maxLength ?? null\"\n        (ngModelChange)=\"emitChange()\"\n        [disabled]=\"isReadOnly\"\n    >\n    </textarea>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"] }]
-        }] });
-
-/* eslint-disable jsdoc/require-jsdoc */
-class StringAutocompleteInputComponent extends NgxMatEntityBaseInputComponent {
+/**
+ * The base component needed for all arrays that are displayed as a table.
+ */
+class ArrayTableComponent extends NgxMatEntityBaseInputComponent {
+    constructor(matDialog) {
+        super();
+        this.matDialog = matDialog;
+        this.input = undefined;
+        this.dataSource = new MatTableDataSource();
+        this.selection = new SelectionModel(true, []);
+        this.SelectionUtilities = SelectionUtilities;
+    }
     ngOnInit() {
+        var _a;
         super.ngOnInit();
-        this.autocompleteStrings = this.metadata.autocompleteValues;
-        this.filteredAutocompleteStrings = LodashUtilities.cloneDeep(this.autocompleteStrings);
+        this.propertyValue = (_a = this.propertyValue) !== null && _a !== void 0 ? _a : [];
+        const givenDisplayColumns = this.metadata.displayColumns.map((v) => v.displayName);
+        if (givenDisplayColumns.find(s => s === 'select')) {
+            throw new Error(`The name "select" for a display column is reserved.
+                Please choose a different name.`);
+        }
+        this.displayedColumns = this.isReadOnly ? givenDisplayColumns : ['select'].concat(givenDisplayColumns);
+        this.dataSource.data = this.propertyValue;
     }
     /**
-     * Dynamically filters the Autocomplete options when the user inputs something.
-     *
-     * @param input - The input of the user.
+     * Tries to add an item to the array.
      */
-    filterAutocompleteStrings(input) {
-        if (input) {
-            this.filteredAutocompleteStrings = this.autocompleteStrings.filter(s => s.toLowerCase().includes(input.toLowerCase()));
+    add() {
+        var _a, _b, _c;
+        if (this.input != null) {
+            if (!this.metadata.allowDuplicates
+                && ((_a = this.propertyValue) === null || _a === void 0 ? void 0 : _a.find((v) => __awaiter(this, void 0, void 0, function* () { return yield EntityUtilities.isEqual(this.input, v, this.metadata, this.metadata.itemType); }))) != null) {
+                this.matDialog.open(NgxMatEntityConfirmDialogComponent, {
+                    data: this.metadata.duplicatesErrorDialog,
+                    autoFocus: false,
+                    restoreFocus: false
+                });
+                return;
+            }
+            (_b = this.propertyValue) === null || _b === void 0 ? void 0 : _b.push(LodashUtilities.cloneDeep(this.input));
+            this.dataSource.data = (_c = this.propertyValue) !== null && _c !== void 0 ? _c : [];
+            this.resetInput();
+            this.emitChange();
         }
     }
+    /**
+     * Is split up from the add method to override this functionality more easily.
+     */
+    resetInput() {
+        this.input = undefined;
+    }
+    /**
+     * Removes all selected entries from the entity array.
+     */
+    remove() {
+        SelectionUtilities.remove(this.selection, this.propertyValue, this.dataSource);
+        this.emitChange();
+    }
 }
-StringAutocompleteInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: StringAutocompleteInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-StringAutocompleteInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.1", type: StringAutocompleteInputComponent, selector: "string-autocomplete-input", usesInheritance: true, ngImport: i0, template: "<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <input\n        matInput\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString()\"\n        #model=\"ngModel\"\n        [matAutocomplete]=\"auto\"\n        (keyup)=\"filterAutocompleteStrings(propertyValue)\"\n        [required]=\"metadata.required\"\n        [minlength]=\"metadata.minLength ?? null\"\n        [maxlength]=\"metadata.maxLength ?? null\"\n        [pattern]=\"metadata.regex ?? '[\\\\s\\\\S]*'\"\n        (ngModelChange)=\"emitChange()\"\n        [disabled]=\"isReadOnly\"\n    >\n    <mat-autocomplete #auto=\"matAutocomplete\">\n        <mat-option *ngFor=\"let value of filteredAutocompleteStrings\" [value]=\"value\">\n            {{value}}\n        </mat-option>\n    </mat-autocomplete>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i6.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: StringAutocompleteInputComponent, decorators: [{
+ArrayTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: ArrayTableComponent, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+ArrayTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: ArrayTableComponent, selector: "ngx-mat-entity-array-table", usesInheritance: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: ArrayTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'string-autocomplete-input', template: "<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <input\n        matInput\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString()\"\n        #model=\"ngModel\"\n        [matAutocomplete]=\"auto\"\n        (keyup)=\"filterAutocompleteStrings(propertyValue)\"\n        [required]=\"metadata.required\"\n        [minlength]=\"metadata.minLength ?? null\"\n        [maxlength]=\"metadata.maxLength ?? null\"\n        [pattern]=\"metadata.regex ?? '[\\\\s\\\\S]*'\"\n        (ngModelChange)=\"emitChange()\"\n        [disabled]=\"isReadOnly\"\n    >\n    <mat-autocomplete #auto=\"matAutocomplete\">\n        <mat-option *ngFor=\"let value of filteredAutocompleteStrings\" [value]=\"value\">\n            {{value}}\n        </mat-option>\n    </mat-autocomplete>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"] }]
-        }] });
+            args: [{
+                    selector: 'ngx-mat-entity-array-table',
+                    template: ''
+                }]
+        }], ctorParameters: function () { return [{ type: i1.MatDialog }]; } });
 
 /* eslint-disable jsdoc/require-jsdoc */
-class StringDropdownInputComponent extends NgxMatEntityBaseInputComponent {
+class ArrayDateInputComponent extends ArrayTableComponent {
+    constructor() {
+        super(...arguments);
+        this.DateUtilities = DateUtilities;
+    }
 }
-StringDropdownInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: StringDropdownInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-StringDropdownInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.1", type: StringDropdownInputComponent, selector: "string-dropdown-input", usesInheritance: true, ngImport: i0, template: "<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-select (ngModelChange)=\"emitChange()\" [(ngModel)]=\"propertyValue\" [name]=\"key.toString()\" #model=\"ngModel\" [required]=\"metadata.required\" [disabled]=\"isReadOnly\">\n        <mat-option *ngFor=\"let value of metadata.dropdownValues\" [value]=\"value.value\">{{value.displayName}}</mat-option>\n    </mat-select>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i5$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: StringDropdownInputComponent, decorators: [{
+ArrayDateInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: ArrayDateInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+ArrayDateInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: ArrayDateInputComponent, selector: "array-date-input", usesInheritance: true, ngImport: i0, template: "<div class=\"mat-elevation-z8 elevation-container\">\n    <div class=\"array-headline\">\n        <b>{{metadata.displayName}}</b>\n    </div>\n    <div *ngIf=\"!isReadOnly\">\n        <mat-form-field appearance=\"outline\">\n            <mat-label>{{metadata.displayName}}</mat-label>\n            <input\n                matInput\n                [(ngModel)]=\"input\"\n                [name]=\"key.toString()\"\n                #model=\"ngModel\"\n                [matDatepicker]=\"picker\"\n                [required]=\"metadata.required\"\n                [min]=\"metadata.min ? metadata.min(input) : undefined\"\n                [max]=\"metadata.max ? metadata.max(input) : undefined\"\n                [matDatepickerFilter]=\"metadata.filter ?? DateUtilities.defaultDateFilter\"\n            >\n            <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n            <mat-datepicker #picker></mat-datepicker>\n            <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n        </mat-form-field>\n        \n        <div class=\"buttons\">\n            <button type=\"button\" mat-raised-button\n                [disabled]=\"model.errors\"\n                (click)=\"add()\">\n                {{metadata.addButtonLabel}}\n            </button>\n            <button type=\"button\" mat-raised-button\n                [disabled]=\"!selection.selected.length\"\n                (click)=\"remove()\">\n                {{metadata.removeButtonLabel}}\n            </button>\n        </div>\n    </div>\n\n    <mat-table [dataSource]=\"dataSource\">\n        <!-- select Column -->\n        <ng-container matColumnDef=\"select\">\n            <mat-header-cell *matHeaderCellDef>\n                <mat-checkbox [disabled]=\"!dataSource.data.length\" (change)=\"$event ? SelectionUtilities.masterToggle(selection, dataSource) : null\" [checked]=\"selection.hasValue() && SelectionUtilities.isAllSelected(selection, dataSource)\" [indeterminate]=\"selection.hasValue() && !SelectionUtilities.isAllSelected(selection, dataSource)\"></mat-checkbox>\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let module\">\n                <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(module) : null\" [checked]=\"selection.isSelected(module)\"></mat-checkbox>\n            </mat-cell>\n        </ng-container>\n    \n        <ng-container *ngFor=\"let dCol of metadata.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n            <mat-header-cell *matHeaderCellDef>\n                {{dCol.displayName}}\n            </mat-header-cell>\n            <mat-cell class=\"entity\" *matCellDef=\"let entity\">\n                {{dCol.value(entity)}}\n            </mat-cell>\n        </ng-container>\n    \n        <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n        <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n    </mat-table>\n\n    <div class=\"array-error\" *ngIf=\"metadata.required && !dataSource.data.length\">\n        {{metadata.missingErrorMessage}}\n    </div>\n</div>", styles: ["mat-form-field{width:100%}.buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px}mat-table{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:25px}.mat-column-select{flex:0 0 75px}.elevation-container{border-radius:5px;padding:15px;margin-bottom:15px;margin-top:15px}.array-headline{padding-bottom:10px}.array-error{display:flex;align-items:center;justify-content:center;margin-top:-25.8px;border:1px solid #E0E0E0;background-color:#f8d3d7;color:#721c24;height:25.8px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i5$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: ArrayDateInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'string-dropdown-input', template: "<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-select (ngModelChange)=\"emitChange()\" [(ngModel)]=\"propertyValue\" [name]=\"key.toString()\" #model=\"ngModel\" [required]=\"metadata.required\" [disabled]=\"isReadOnly\">\n        <mat-option *ngFor=\"let value of metadata.dropdownValues\" [value]=\"value.value\">{{value.displayName}}</mat-option>\n    </mat-select>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"] }]
+            args: [{ selector: 'array-date-input', template: "<div class=\"mat-elevation-z8 elevation-container\">\n    <div class=\"array-headline\">\n        <b>{{metadata.displayName}}</b>\n    </div>\n    <div *ngIf=\"!isReadOnly\">\n        <mat-form-field appearance=\"outline\">\n            <mat-label>{{metadata.displayName}}</mat-label>\n            <input\n                matInput\n                [(ngModel)]=\"input\"\n                [name]=\"key.toString()\"\n                #model=\"ngModel\"\n                [matDatepicker]=\"picker\"\n                [required]=\"metadata.required\"\n                [min]=\"metadata.min ? metadata.min(input) : undefined\"\n                [max]=\"metadata.max ? metadata.max(input) : undefined\"\n                [matDatepickerFilter]=\"metadata.filter ?? DateUtilities.defaultDateFilter\"\n            >\n            <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n            <mat-datepicker #picker></mat-datepicker>\n            <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n        </mat-form-field>\n        \n        <div class=\"buttons\">\n            <button type=\"button\" mat-raised-button\n                [disabled]=\"model.errors\"\n                (click)=\"add()\">\n                {{metadata.addButtonLabel}}\n            </button>\n            <button type=\"button\" mat-raised-button\n                [disabled]=\"!selection.selected.length\"\n                (click)=\"remove()\">\n                {{metadata.removeButtonLabel}}\n            </button>\n        </div>\n    </div>\n\n    <mat-table [dataSource]=\"dataSource\">\n        <!-- select Column -->\n        <ng-container matColumnDef=\"select\">\n            <mat-header-cell *matHeaderCellDef>\n                <mat-checkbox [disabled]=\"!dataSource.data.length\" (change)=\"$event ? SelectionUtilities.masterToggle(selection, dataSource) : null\" [checked]=\"selection.hasValue() && SelectionUtilities.isAllSelected(selection, dataSource)\" [indeterminate]=\"selection.hasValue() && !SelectionUtilities.isAllSelected(selection, dataSource)\"></mat-checkbox>\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let module\">\n                <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(module) : null\" [checked]=\"selection.isSelected(module)\"></mat-checkbox>\n            </mat-cell>\n        </ng-container>\n    \n        <ng-container *ngFor=\"let dCol of metadata.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n            <mat-header-cell *matHeaderCellDef>\n                {{dCol.displayName}}\n            </mat-header-cell>\n            <mat-cell class=\"entity\" *matCellDef=\"let entity\">\n                {{dCol.value(entity)}}\n            </mat-cell>\n        </ng-container>\n    \n        <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n        <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n    </mat-table>\n\n    <div class=\"array-error\" *ngIf=\"metadata.required && !dataSource.data.length\">\n        {{metadata.missingErrorMessage}}\n    </div>\n</div>", styles: ["mat-form-field{width:100%}.buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px}mat-table{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:25px}.mat-column-select{flex:0 0 75px}.elevation-container{border-radius:5px;padding:15px;margin-bottom:15px;margin-top:15px}.array-headline{padding-bottom:10px}.array-error{display:flex;align-items:center;justify-content:center;margin-top:-25.8px;border:1px solid #E0E0E0;background-color:#f8d3d7;color:#721c24;height:25.8px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}\n"] }]
         }] });
 
 /* eslint-disable jsdoc/require-jsdoc */
-class StringPasswordInputComponent extends NgxMatEntityBaseInputComponent {
+class ArrayDateRangeInputComponent extends ArrayTableComponent {
     constructor() {
         super(...arguments);
-        this.hide = true;
-        this.hideConfirm = true;
+        this.DateUtilities = DateUtilities;
     }
     ngOnInit() {
         super.ngOnInit();
-        this.confirmRequired = this.metadata.required;
-        this.confirmPassword = LodashUtilities.cloneDeep(this.propertyValue);
-        ReflectUtilities.defineMetadata('confirmPassword', this.confirmPassword, this.entity, this.key);
+        this.input = {
+            start: undefined,
+            end: undefined,
+            values: undefined
+        };
     }
-    passwordInput() {
-        this.confirmRequired = Boolean(this.propertyValue);
-        ReflectUtilities.defineMetadata('confirmPassword', this.confirmPassword, this.entity, this.key);
-        this.emitChange();
+    /**
+     * Adds a DateRange to the array.
+     */
+    addDateRange() {
+        if (this.input && this.dateRangeStart && this.dateRangeEnd) {
+            this.input.start = new Date(this.dateRangeStart);
+            this.input.end = new Date(this.dateRangeEnd);
+            const values = DateUtilities.getDatesBetween(this.input.start, this.input.end, this.metadata.filter);
+            this.input.values = values.length ? values : undefined;
+            this.add();
+        }
+    }
+    resetInput() {
+        this.input = undefined;
+        this.dateRangeStart = undefined;
+        this.dateRangeEnd = undefined;
     }
 }
-StringPasswordInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: StringPasswordInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-StringPasswordInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.1", type: StringPasswordInputComponent, selector: "string-password-input", usesInheritance: true, ngImport: i0, template: "<div class=\"password-row\">\n    <mat-form-field [class.w-50]=\"metadata.needsConfirmation\" [class.w-100]=\"!metadata.needsConfirmation\">\n        <mat-label>{{metadata.displayName}}</mat-label>\n        <input\n            [type]=\"hide ? 'password' : 'text'\"\n            matInput\n            [(ngModel)]=\"propertyValue\"\n            [name]=\"key.toString()\"\n            #model=\"ngModel\"\n            [required]=\"metadata.required\"\n            [pattern]=\"metadata.regex ?? '[\\\\s\\\\S]*'\"\n            [minlength]=\"metadata.minLength ?? null\"\n            [maxlength]=\"metadata.maxLength ?? null\"\n            (ngModelChange)=\"passwordInput()\"\n            [disabled]=\"isReadOnly\"\n        >\n        <button type=\"button\" (click)=\"hide = !hide\" [disabled]=\"isReadOnly\" mat-icon-button matSuffix>\n            <i *ngIf=\"hide\" class=\"fas fa-eye-slash\"></i>\n            <i *ngIf=\"!hide\" class=\"fas fa-eye\"></i>\n        </button>\n        <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n    </mat-form-field>\n    <div *ngIf=\"metadata.needsConfirmation\" class=\"password-spacer\"></div>\n    <mat-form-field class=\"w-50\" *ngIf=\"metadata.needsConfirmation\">\n        <mat-label>{{metadata.confirmationDisplayName}}</mat-label>\n        <input\n            [type]=\"hideConfirm ? 'password' : 'text'\"\n            matInput\n            [(ngModel)]=\"confirmPassword\"\n            [name]=\"key.toString() + 'confirmPassword'\"\n            #confirmModel=\"ngModel\"\n            [required]=\"metadata.required || confirmRequired\"\n            (ngModelChange)=\"passwordInput()\"\n            [disabled]=\"isReadOnly\"\n        >\n        <button type=\"button\" (click)=\"hideConfirm = !hideConfirm\" [disabled]=\"isReadOnly\" mat-icon-button matSuffix>\n            <i *ngIf=\"hideConfirm\" class=\"fas fa-eye-slash\"></i>\n            <i *ngIf=\"!hideConfirm\" class=\"fas fa-eye\"></i>\n        </button>\n        <mat-error>{{getValidationErrorMessage(confirmModel)}}</mat-error>\n    </mat-form-field>\n</div>\n\n<mat-error *ngIf=\"metadata.needsConfirmation && propertyValue && confirmPassword && (confirmPassword !== propertyValue)\">\n    {{metadata.passwordsDontMatchErrorMessage}}\n</mat-error>", styles: [".password-row{display:flex;justify-content:space-between}.password-spacer{margin-left:5px;margin-right:5px}.w-50{width:50%}.w-100{width:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: StringPasswordInputComponent, decorators: [{
+ArrayDateRangeInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: ArrayDateRangeInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+ArrayDateRangeInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: ArrayDateRangeInputComponent, selector: "array-date-range-input", usesInheritance: true, ngImport: i0, template: "<div class=\"mat-elevation-z8 elevation-container\">\n    <div class=\"array-headline\">\n        <b>{{metadata.displayName}}</b>\n    </div>\n    <div *ngIf=\"!isReadOnly\">\n        <mat-form-field>\n            <mat-label>{{metadata.displayName}}</mat-label>\n            \n            <mat-date-range-input [rangePicker]=\"picker\" [required]=\"metadata.required\" [dateFilter]=\"metadata.filter ? metadata.filter : DateUtilities.defaultDateFilter\">\n                <input matStartDate\n                    [(ngModel)]=\"dateRangeStart\"\n                    [name]=\"key.toString() + 'start'\"\n                    #startModel=\"ngModel\"\n                    [required]=\"metadata.required\"\n                    [min]=\"metadata.minStart ? metadata.minStart(input?.start) : undefined\"\n                    [max]=\"metadata.maxStart ? metadata.maxStart(input?.start) : undefined\"\n                    [placeholder]=\"metadata.placeholderStart\"\n                >\n                <input matEndDate\n                    [(ngModel)]=\"dateRangeEnd\"\n                    [name]=\"key.toString() + 'end'\"\n                    #endModel=\"ngModel\"\n                    [required]=\"metadata.required\"\n                    [min]=\"metadata.minEnd ? metadata.minEnd(input?.end) : undefined\"\n                    [max]=\"metadata.maxEnd ? metadata.maxEnd(input?.end) : undefined\"\n                    [placeholder]=\"metadata.placeholderEnd\"\n                >\n            </mat-date-range-input>\n            <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n            <mat-date-range-picker #picker></mat-date-range-picker>\n    \n            <mat-error *ngIf=\"startModel.errors\">{{getValidationErrorMessage(startModel)}}</mat-error>\n            <mat-error *ngIf=\"!startModel.errors && endModel.errors\">{{getValidationErrorMessage(endModel)}}</mat-error>\n        </mat-form-field>\n        \n        <div class=\"buttons\">\n            <button type=\"button\" mat-raised-button\n                [disabled]=\"startModel.errors || endModel.errors\"\n                (click)=\"addDateRange()\">\n                {{metadata.addButtonLabel}}\n            </button>\n            <button type=\"button\" mat-raised-button\n                [disabled]=\"!selection.selected.length\"\n                (click)=\"remove()\">\n                {{metadata.removeButtonLabel}}\n            </button>\n        </div>\n    </div>\n\n    <mat-table [dataSource]=\"dataSource\">\n        <!-- select Column -->\n        <ng-container matColumnDef=\"select\">\n            <mat-header-cell *matHeaderCellDef>\n                <mat-checkbox [disabled]=\"!dataSource.data.length\" (change)=\"$event ? SelectionUtilities.masterToggle(selection, dataSource) : null\" [checked]=\"selection.hasValue() && SelectionUtilities.isAllSelected(selection, dataSource)\" [indeterminate]=\"selection.hasValue() && !SelectionUtilities.isAllSelected(selection, dataSource)\"></mat-checkbox>\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let module\">\n                <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(module) : null\" [checked]=\"selection.isSelected(module)\"></mat-checkbox>\n            </mat-cell>\n        </ng-container>\n    \n        <ng-container *ngFor=\"let dCol of metadata.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n            <mat-header-cell *matHeaderCellDef>\n                {{dCol.displayName}}\n            </mat-header-cell>\n            <mat-cell class=\"entity\" *matCellDef=\"let entity\">\n                {{dCol.value(entity)}}\n            </mat-cell>\n        </ng-container>\n    \n        <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n        <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n    </mat-table>\n\n    <div class=\"array-error\" *ngIf=\"metadata.required && !dataSource.data.length\">\n        {{metadata.missingErrorMessage}}\n    </div>\n</div>", styles: ["mat-form-field{width:100%}.buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px}.elevation-container{border-radius:5px;padding:15px;margin-bottom:15px;margin-top:15px}.array-headline{padding-bottom:10px}mat-table{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:25px}.mat-column-select{flex:0 0 75px}.array-error{display:flex;align-items:center;justify-content:center;margin-top:-25.8px;border:1px solid #E0E0E0;background-color:#f8d3d7;color:#721c24;height:25.8px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i5$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i4$2.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i4$2.MatStartDate, selector: "input[matStartDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i4$2.MatEndDate, selector: "input[matEndDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i4$2.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: ArrayDateRangeInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'string-password-input', template: "<div class=\"password-row\">\n    <mat-form-field [class.w-50]=\"metadata.needsConfirmation\" [class.w-100]=\"!metadata.needsConfirmation\">\n        <mat-label>{{metadata.displayName}}</mat-label>\n        <input\n            [type]=\"hide ? 'password' : 'text'\"\n            matInput\n            [(ngModel)]=\"propertyValue\"\n            [name]=\"key.toString()\"\n            #model=\"ngModel\"\n            [required]=\"metadata.required\"\n            [pattern]=\"metadata.regex ?? '[\\\\s\\\\S]*'\"\n            [minlength]=\"metadata.minLength ?? null\"\n            [maxlength]=\"metadata.maxLength ?? null\"\n            (ngModelChange)=\"passwordInput()\"\n            [disabled]=\"isReadOnly\"\n        >\n        <button type=\"button\" (click)=\"hide = !hide\" [disabled]=\"isReadOnly\" mat-icon-button matSuffix>\n            <i *ngIf=\"hide\" class=\"fas fa-eye-slash\"></i>\n            <i *ngIf=\"!hide\" class=\"fas fa-eye\"></i>\n        </button>\n        <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n    </mat-form-field>\n    <div *ngIf=\"metadata.needsConfirmation\" class=\"password-spacer\"></div>\n    <mat-form-field class=\"w-50\" *ngIf=\"metadata.needsConfirmation\">\n        <mat-label>{{metadata.confirmationDisplayName}}</mat-label>\n        <input\n            [type]=\"hideConfirm ? 'password' : 'text'\"\n            matInput\n            [(ngModel)]=\"confirmPassword\"\n            [name]=\"key.toString() + 'confirmPassword'\"\n            #confirmModel=\"ngModel\"\n            [required]=\"metadata.required || confirmRequired\"\n            (ngModelChange)=\"passwordInput()\"\n            [disabled]=\"isReadOnly\"\n        >\n        <button type=\"button\" (click)=\"hideConfirm = !hideConfirm\" [disabled]=\"isReadOnly\" mat-icon-button matSuffix>\n            <i *ngIf=\"hideConfirm\" class=\"fas fa-eye-slash\"></i>\n            <i *ngIf=\"!hideConfirm\" class=\"fas fa-eye\"></i>\n        </button>\n        <mat-error>{{getValidationErrorMessage(confirmModel)}}</mat-error>\n    </mat-form-field>\n</div>\n\n<mat-error *ngIf=\"metadata.needsConfirmation && propertyValue && confirmPassword && (confirmPassword !== propertyValue)\">\n    {{metadata.passwordsDontMatchErrorMessage}}\n</mat-error>", styles: [".password-row{display:flex;justify-content:space-between}.password-spacer{margin-left:5px;margin-right:5px}.w-50{width:50%}.w-100{width:100%}\n"] }]
+            args: [{ selector: 'array-date-range-input', template: "<div class=\"mat-elevation-z8 elevation-container\">\n    <div class=\"array-headline\">\n        <b>{{metadata.displayName}}</b>\n    </div>\n    <div *ngIf=\"!isReadOnly\">\n        <mat-form-field>\n            <mat-label>{{metadata.displayName}}</mat-label>\n            \n            <mat-date-range-input [rangePicker]=\"picker\" [required]=\"metadata.required\" [dateFilter]=\"metadata.filter ? metadata.filter : DateUtilities.defaultDateFilter\">\n                <input matStartDate\n                    [(ngModel)]=\"dateRangeStart\"\n                    [name]=\"key.toString() + 'start'\"\n                    #startModel=\"ngModel\"\n                    [required]=\"metadata.required\"\n                    [min]=\"metadata.minStart ? metadata.minStart(input?.start) : undefined\"\n                    [max]=\"metadata.maxStart ? metadata.maxStart(input?.start) : undefined\"\n                    [placeholder]=\"metadata.placeholderStart\"\n                >\n                <input matEndDate\n                    [(ngModel)]=\"dateRangeEnd\"\n                    [name]=\"key.toString() + 'end'\"\n                    #endModel=\"ngModel\"\n                    [required]=\"metadata.required\"\n                    [min]=\"metadata.minEnd ? metadata.minEnd(input?.end) : undefined\"\n                    [max]=\"metadata.maxEnd ? metadata.maxEnd(input?.end) : undefined\"\n                    [placeholder]=\"metadata.placeholderEnd\"\n                >\n            </mat-date-range-input>\n            <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n            <mat-date-range-picker #picker></mat-date-range-picker>\n    \n            <mat-error *ngIf=\"startModel.errors\">{{getValidationErrorMessage(startModel)}}</mat-error>\n            <mat-error *ngIf=\"!startModel.errors && endModel.errors\">{{getValidationErrorMessage(endModel)}}</mat-error>\n        </mat-form-field>\n        \n        <div class=\"buttons\">\n            <button type=\"button\" mat-raised-button\n                [disabled]=\"startModel.errors || endModel.errors\"\n                (click)=\"addDateRange()\">\n                {{metadata.addButtonLabel}}\n            </button>\n            <button type=\"button\" mat-raised-button\n                [disabled]=\"!selection.selected.length\"\n                (click)=\"remove()\">\n                {{metadata.removeButtonLabel}}\n            </button>\n        </div>\n    </div>\n\n    <mat-table [dataSource]=\"dataSource\">\n        <!-- select Column -->\n        <ng-container matColumnDef=\"select\">\n            <mat-header-cell *matHeaderCellDef>\n                <mat-checkbox [disabled]=\"!dataSource.data.length\" (change)=\"$event ? SelectionUtilities.masterToggle(selection, dataSource) : null\" [checked]=\"selection.hasValue() && SelectionUtilities.isAllSelected(selection, dataSource)\" [indeterminate]=\"selection.hasValue() && !SelectionUtilities.isAllSelected(selection, dataSource)\"></mat-checkbox>\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let module\">\n                <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(module) : null\" [checked]=\"selection.isSelected(module)\"></mat-checkbox>\n            </mat-cell>\n        </ng-container>\n    \n        <ng-container *ngFor=\"let dCol of metadata.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n            <mat-header-cell *matHeaderCellDef>\n                {{dCol.displayName}}\n            </mat-header-cell>\n            <mat-cell class=\"entity\" *matCellDef=\"let entity\">\n                {{dCol.value(entity)}}\n            </mat-cell>\n        </ng-container>\n    \n        <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n        <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n    </mat-table>\n\n    <div class=\"array-error\" *ngIf=\"metadata.required && !dataSource.data.length\">\n        {{metadata.missingErrorMessage}}\n    </div>\n</div>", styles: ["mat-form-field{width:100%}.buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px}.elevation-container{border-radius:5px;padding:15px;margin-bottom:15px;margin-top:15px}.array-headline{padding-bottom:10px}mat-table{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:25px}.mat-column-select{flex:0 0 75px}.array-error{display:flex;align-items:center;justify-content:center;margin-top:-25.8px;border:1px solid #E0E0E0;background-color:#f8d3d7;color:#721c24;height:25.8px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}\n"] }]
         }] });
 
 /* eslint-disable jsdoc/require-jsdoc */
-class BooleanCheckboxInputComponent extends NgxMatEntityBaseInputComponent {
+class ArrayDateTimeInputComponent extends ArrayTableComponent {
+    constructor() {
+        super(...arguments);
+        this.DateUtilities = DateUtilities;
+    }
     ngOnInit() {
-        var _a;
         super.ngOnInit();
-        this.propertyValue = (_a = this.propertyValue) !== null && _a !== void 0 ? _a : false;
-    }
-}
-BooleanCheckboxInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BooleanCheckboxInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-BooleanCheckboxInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.1", type: BooleanCheckboxInputComponent, selector: "boolean-checkbox-input", usesInheritance: true, ngImport: i0, template: "<mat-form-field class=\"hideUnderline\">\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-checkbox\n        color=\"primary\"\n        (ngModelChange)=\"emitChange()\"\n        (click)=\"model.control.markAsTouched()\"\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString()\"\n        [disabled]=\"isReadOnly\"\n        [class.disabled]=\"isReadOnly\"\n        [class.mat-checkbox-disabled]=\"false\"\n    >\n    </mat-checkbox>\n    <!-- hidden input is needed so that the checkbox can be used inside a mat-form-field -->\n    <input matInput hidden\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString() + 'Helper'\"\n        #model=\"ngModel\"\n        [pattern]=\"metadata.required ? 'true' : '[\\\\s\\\\S]*'\"\n        [required]=\"metadata.required\"\n        [disabled]=\"isReadOnly\"\n    >\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["::ng-deep .hideUnderline .mat-form-field-underline{opacity:0%}::ng-deep .disabled .mat-checkbox-ripple{display:none}::ng-deep .disabled:hover{cursor:default}mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i2.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BooleanCheckboxInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'boolean-checkbox-input', template: "<mat-form-field class=\"hideUnderline\">\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-checkbox\n        color=\"primary\"\n        (ngModelChange)=\"emitChange()\"\n        (click)=\"model.control.markAsTouched()\"\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString()\"\n        [disabled]=\"isReadOnly\"\n        [class.disabled]=\"isReadOnly\"\n        [class.mat-checkbox-disabled]=\"false\"\n    >\n    </mat-checkbox>\n    <!-- hidden input is needed so that the checkbox can be used inside a mat-form-field -->\n    <input matInput hidden\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString() + 'Helper'\"\n        #model=\"ngModel\"\n        [pattern]=\"metadata.required ? 'true' : '[\\\\s\\\\S]*'\"\n        [required]=\"metadata.required\"\n        [disabled]=\"isReadOnly\"\n    >\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["::ng-deep .hideUnderline .mat-form-field-underline{opacity:0%}::ng-deep .disabled .mat-checkbox-ripple{display:none}::ng-deep .disabled:hover{cursor:default}mat-form-field{width:100%}\n"] }]
-        }] });
-
-/* eslint-disable jsdoc/require-jsdoc */
-class BooleanToggleInputComponent extends NgxMatEntityBaseInputComponent {
-    ngOnInit() {
-        var _a;
-        super.ngOnInit();
-        this.propertyValue = (_a = this.propertyValue) !== null && _a !== void 0 ? _a : false;
+        this.time = DateUtilities.getTimeFromDate(this.entity[this.key]);
+        this.timeDropdownValues = this.metadata.times;
+        if (this.entity[this.key] != null) {
+            this.dateTime = new Date(this.entity[this.key]);
+        }
+    }
+    resetInput() {
+        this.input = undefined;
+        this.time = undefined;
+    }
+    /**
+     * Adds a date time to the array.
+     */
+    addDateTime() {
+        if (this.input && this.time) {
+            this.input = new Date(this.input);
+            this.input.setHours(this.time.hours, this.time.minutes, 0, 0);
+            this.add();
+        }
     }
 }
-BooleanToggleInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BooleanToggleInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-BooleanToggleInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.1", type: BooleanToggleInputComponent, selector: "boolean-toggle-input", usesInheritance: true, ngImport: i0, template: "<mat-form-field class=\"hideUnderline\">\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-slide-toggle\n        color=\"primary\"\n        (click)=\"model.control.markAsTouched()\"\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString()\"\n        [disabled]=\"isReadOnly\"\n    >\n    </mat-slide-toggle>\n    <!-- hidden input is needed so that the toggle can be used inside a mat-form-field -->\n    <input matInput hidden\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString() + 'Helper'\"\n        #model=\"ngModel\"\n        [pattern]=\"metadata.required ? 'true' : '[\\\\s\\\\S]*'\"\n        [required]=\"metadata.required\"\n        (ngModelChange)=\"emitChange()\"\n    >\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["::ng-deep .hideUnderline .mat-form-field-underline{opacity:0%}mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i2.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$3.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BooleanToggleInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'boolean-toggle-input', template: "<mat-form-field class=\"hideUnderline\">\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-slide-toggle\n        color=\"primary\"\n        (click)=\"model.control.markAsTouched()\"\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString()\"\n        [disabled]=\"isReadOnly\"\n    >\n    </mat-slide-toggle>\n    <!-- hidden input is needed so that the toggle can be used inside a mat-form-field -->\n    <input matInput hidden\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString() + 'Helper'\"\n        #model=\"ngModel\"\n        [pattern]=\"metadata.required ? 'true' : '[\\\\s\\\\S]*'\"\n        [required]=\"metadata.required\"\n        (ngModelChange)=\"emitChange()\"\n    >\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["::ng-deep .hideUnderline .mat-form-field-underline{opacity:0%}mat-form-field{width:100%}\n"] }]
-        }] });
-
-/* eslint-disable jsdoc/require-jsdoc */
-class BooleanDropdownInputComponent extends NgxMatEntityBaseInputComponent {
-}
-BooleanDropdownInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BooleanDropdownInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-BooleanDropdownInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.1", type: BooleanDropdownInputComponent, selector: "boolean-dropdown-input", usesInheritance: true, ngImport: i0, template: "<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-select\n        (ngModelChange)=\"emitChange()\"\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString()\"\n        #model=\"ngModel\"\n        [required]=\"metadata.required\"\n        [disabled]=\"isReadOnly\"\n    >\n        <mat-option [value]=\"undefined\">-</mat-option>\n        <mat-option [value]=\"true\">{{metadata.dropdownTrue}}</mat-option>\n        <mat-option [value]=\"false\">{{metadata.dropdownFalse}}</mat-option>\n    </mat-select>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i2.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i5$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BooleanDropdownInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'boolean-dropdown-input', template: "<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-select\n        (ngModelChange)=\"emitChange()\"\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString()\"\n        #model=\"ngModel\"\n        [required]=\"metadata.required\"\n        [disabled]=\"isReadOnly\"\n    >\n        <mat-option [value]=\"undefined\">-</mat-option>\n        <mat-option [value]=\"true\">{{metadata.dropdownTrue}}</mat-option>\n        <mat-option [value]=\"false\">{{metadata.dropdownFalse}}</mat-option>\n    </mat-select>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"] }]
-        }] });
-
-/* eslint-disable jsdoc/require-jsdoc */
-class NumberInputComponent extends NgxMatEntityBaseInputComponent {
-}
-NumberInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: NumberInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-NumberInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.1", type: NumberInputComponent, selector: "number-input", usesInheritance: true, ngImport: i0, template: "<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <input\n        matInput\n        type=\"number\"\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString()\"\n        #model=\"ngModel\"\n        [required]=\"metadata.required\"\n        [min]=\"metadata.min ?? null\"\n        [max]=\"metadata.max ?? null\"\n        (ngModelChange)=\"emitChange()\"\n        [disabled]=\"isReadOnly\"\n    >\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i2.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i4.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: NumberInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'number-input', template: "<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <input\n        matInput\n        type=\"number\"\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString()\"\n        #model=\"ngModel\"\n        [required]=\"metadata.required\"\n        [min]=\"metadata.min ?? null\"\n        [max]=\"metadata.max ?? null\"\n        (ngModelChange)=\"emitChange()\"\n        [disabled]=\"isReadOnly\"\n    >\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"] }]
-        }] });
-
-/* eslint-disable jsdoc/require-jsdoc */
-class NumberDropdownInputComponent extends NgxMatEntityBaseInputComponent {
-}
-NumberDropdownInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: NumberDropdownInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-NumberDropdownInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.1", type: NumberDropdownInputComponent, selector: "number-dropdown-input", usesInheritance: true, ngImport: i0, template: "<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-select (ngModelChange)=\"emitChange()\" [(ngModel)]=\"propertyValue\" [name]=\"key.toString()\" #model=\"ngModel\" [required]=\"metadata.required\" [disabled]=\"isReadOnly\">\n        <mat-option *ngFor=\"let value of metadata.dropdownValues\" [value]=\"value.value\">{{value.displayName}}</mat-option>\n    </mat-select>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i5$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: NumberDropdownInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'number-dropdown-input', template: "<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-select (ngModelChange)=\"emitChange()\" [(ngModel)]=\"propertyValue\" [name]=\"key.toString()\" #model=\"ngModel\" [required]=\"metadata.required\" [disabled]=\"isReadOnly\">\n        <mat-option *ngFor=\"let value of metadata.dropdownValues\" [value]=\"value.value\">{{value.displayName}}</mat-option>\n    </mat-select>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"] }]
-        }] });
-
-/* eslint-disable jsdoc/require-jsdoc */
-class NumberSliderInputComponent extends NgxMatEntityBaseInputComponent {
-}
-NumberSliderInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: NumberSliderInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-NumberSliderInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.1", type: NumberSliderInputComponent, selector: "number-slider-input", usesInheritance: true, ngImport: i0, template: "<mat-form-field floatLabel=\"always\" class=\"hideUnderline\">\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <!-- hidden input is needed so that the slider can be used inside a mat-form-field -->\n    <input matInput\n        #hiddenInput\n        type=\"number\"\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString() + 'Helper'\"\n        #model=\"ngModel\"\n        [required]=\"metadata.required\"\n        [min]=\"metadata.min ?? null\"\n        [max]=\"metadata.max ?? null\"\n        (ngModelChange)=\"emitChange()\"\n        [disabled]=\"isReadOnly\"\n    >\n    <mat-slider\n        id=\"slider\"\n        color=\"primary\"\n        (click)=\"model.control.markAsTouched()\"\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString()\"\n        [min]=\"metadata.min ?? null\"\n        [max]=\"metadata.max ?? null\"\n        [step]=\"metadata.step\"\n        [thumbLabel]=\"true\"\n        [displayWith]=\"metadata.formatThumbLabelValue\"\n        [tickInterval]=\"metadata.tickInterval\"\n        [disabled]=\"isReadOnly\"\n    >\n    </mat-slider>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}input{opacity:0%}mat-slider{width:100%;position:absolute;top:-7px;left:0}::ng-deep .hideUnderline .mat-form-field-underline{opacity:0%}::ng-deep #slider .mat-slider-thumb-label{top:-15px;display:flex;transform:rotate(45deg) scale(1);border-radius:50%}::ng-deep #slider.mat-slider-min-value.cdk-focused .mat-slider-thumb-label{background-color:#000000de}::ng-deep #slider .mat-slider-thumb{transform:scale(0)}::ng-deep #slider .mat-slider-thumb-label-text{opacity:1}\n"], dependencies: [{ kind: "directive", type: i2.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i4.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$4.MatSlider, selector: "mat-slider", inputs: ["disabled", "color", "tabIndex", "invert", "max", "min", "step", "thumbLabel", "tickInterval", "value", "displayWith", "valueText", "vertical"], outputs: ["change", "input", "valueChange"], exportAs: ["matSlider"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: NumberSliderInputComponent, decorators: [{
+ArrayDateTimeInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: ArrayDateTimeInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+ArrayDateTimeInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: ArrayDateTimeInputComponent, selector: "array-date-time-input", usesInheritance: true, ngImport: i0, template: "<div class=\"mat-elevation-z8 elevation-container\">\n    <div class=\"array-headline\">\n        <b>{{metadata.displayName}}</b>\n    </div>\n    <div *ngIf=\"!isReadOnly\">\n        <div class=\"date-time\">\n            <mat-form-field>\n                <mat-label>{{metadata.displayName}}</mat-label>\n                <input\n                    matInput\n                    [(ngModel)]=\"input\"\n                    [name]=\"key.toString()\"\n                    #model=\"ngModel\"\n                    [matDatepicker]=\"picker\"\n                    [required]=\"metadata.required\"\n                    [min]=\"metadata.minDate ? metadata.minDate(input) : undefined\"\n                    [max]=\"metadata.maxDate ? metadata.maxDate(input) : undefined\"\n                    [matDatepickerFilter]=\"metadata.filterDate ?? DateUtilities.defaultDateFilter\"\n                >\n                <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n                <mat-datepicker #picker></mat-datepicker>\n                <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n            </mat-form-field>\n            <mat-form-field class=\"timepicker\">\n                <mat-label>{{metadata.timeDisplayName}}</mat-label>\n                <mat-select\n                    [(ngModel)]=\"time\"\n                    [name]=\"key.toString() + 'time'\"\n                    #timeModel=\"ngModel\"\n                    [required]=\"metadata.required\"\n                >\n                    <mat-option *ngFor=\"let validTime of DateUtilities.getValidTimesForDropdown(\n                            metadata.times,\n                            input,\n                            metadata.minTime,\n                            metadata.maxTime,\n                            metadata.filterTime\n                        )\"\n                        [value]=\"validTime.value\"\n                    >\n                        {{validTime.displayName}}\n                    </mat-option>\n                </mat-select>\n                <mat-error>{{getValidationErrorMessage(timeModel)}}</mat-error>\n            </mat-form-field>\n        </div>\n        <div class=\"buttons\">\n            <button type=\"button\" mat-raised-button\n                [disabled]=\"model.errors || timeModel.errors || DateUtilities.timeIsUnprocessable(time)\"\n                (click)=\"addDateTime()\">\n                {{metadata.addButtonLabel}}\n            </button>\n            <button type=\"button\" mat-raised-button\n                [disabled]=\"!selection.selected.length\"\n                (click)=\"remove()\">\n                {{metadata.removeButtonLabel}}\n            </button>\n        </div>\n    </div>\n\n    <mat-table [dataSource]=\"dataSource\">\n        <!-- select Column -->\n        <ng-container matColumnDef=\"select\">\n            <mat-header-cell *matHeaderCellDef>\n                <mat-checkbox [disabled]=\"!dataSource.data.length\" (change)=\"$event ? SelectionUtilities.masterToggle(selection, dataSource) : null\" [checked]=\"selection.hasValue() && SelectionUtilities.isAllSelected(selection, dataSource)\" [indeterminate]=\"selection.hasValue() && !SelectionUtilities.isAllSelected(selection, dataSource)\"></mat-checkbox>\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let module\">\n                <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(module) : null\" [checked]=\"selection.isSelected(module)\"></mat-checkbox>\n            </mat-cell>\n        </ng-container>\n    \n        <ng-container *ngFor=\"let dCol of metadata.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n            <mat-header-cell *matHeaderCellDef>\n                {{dCol.displayName}}\n            </mat-header-cell>\n            <mat-cell class=\"entity\" *matCellDef=\"let entity\">\n                {{dCol.value(entity)}}\n            </mat-cell>\n        </ng-container>\n    \n        <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n        <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n    </mat-table>\n\n    <div class=\"array-error\" *ngIf=\"metadata.required && !dataSource.data.length\">\n        {{metadata.missingErrorMessage}}\n    </div>\n</div>", styles: ["mat-form-field{width:100%}.buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px}.elevation-container{border-radius:5px;padding:15px;margin-bottom:15px;margin-top:15px}.array-headline{padding-bottom:10px}mat-table{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:25px}.mat-column-select{flex:0 0 75px}.array-error{display:flex;align-items:center;justify-content:center;margin-top:-25.8px;border:1px solid #E0E0E0;background-color:#f8d3d7;color:#721c24;height:25.8px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.date-time{display:flex;align-items:baseline}.date-time .timepicker{margin-left:10px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$3.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i5$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i5$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: ArrayDateTimeInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'number-slider-input', template: "<mat-form-field floatLabel=\"always\" class=\"hideUnderline\">\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <!-- hidden input is needed so that the slider can be used inside a mat-form-field -->\n    <input matInput\n        #hiddenInput\n        type=\"number\"\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString() + 'Helper'\"\n        #model=\"ngModel\"\n        [required]=\"metadata.required\"\n        [min]=\"metadata.min ?? null\"\n        [max]=\"metadata.max ?? null\"\n        (ngModelChange)=\"emitChange()\"\n        [disabled]=\"isReadOnly\"\n    >\n    <mat-slider\n        id=\"slider\"\n        color=\"primary\"\n        (click)=\"model.control.markAsTouched()\"\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString()\"\n        [min]=\"metadata.min ?? null\"\n        [max]=\"metadata.max ?? null\"\n        [step]=\"metadata.step\"\n        [thumbLabel]=\"true\"\n        [displayWith]=\"metadata.formatThumbLabelValue\"\n        [tickInterval]=\"metadata.tickInterval\"\n        [disabled]=\"isReadOnly\"\n    >\n    </mat-slider>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}input{opacity:0%}mat-slider{width:100%;position:absolute;top:-7px;left:0}::ng-deep .hideUnderline .mat-form-field-underline{opacity:0%}::ng-deep #slider .mat-slider-thumb-label{top:-15px;display:flex;transform:rotate(45deg) scale(1);border-radius:50%}::ng-deep #slider.mat-slider-min-value.cdk-focused .mat-slider-thumb-label{background-color:#000000de}::ng-deep #slider .mat-slider-thumb{transform:scale(0)}::ng-deep #slider .mat-slider-thumb-label-text{opacity:1}\n"] }]
+            args: [{ selector: 'array-date-time-input', template: "<div class=\"mat-elevation-z8 elevation-container\">\n    <div class=\"array-headline\">\n        <b>{{metadata.displayName}}</b>\n    </div>\n    <div *ngIf=\"!isReadOnly\">\n        <div class=\"date-time\">\n            <mat-form-field>\n                <mat-label>{{metadata.displayName}}</mat-label>\n                <input\n                    matInput\n                    [(ngModel)]=\"input\"\n                    [name]=\"key.toString()\"\n                    #model=\"ngModel\"\n                    [matDatepicker]=\"picker\"\n                    [required]=\"metadata.required\"\n                    [min]=\"metadata.minDate ? metadata.minDate(input) : undefined\"\n                    [max]=\"metadata.maxDate ? metadata.maxDate(input) : undefined\"\n                    [matDatepickerFilter]=\"metadata.filterDate ?? DateUtilities.defaultDateFilter\"\n                >\n                <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n                <mat-datepicker #picker></mat-datepicker>\n                <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n            </mat-form-field>\n            <mat-form-field class=\"timepicker\">\n                <mat-label>{{metadata.timeDisplayName}}</mat-label>\n                <mat-select\n                    [(ngModel)]=\"time\"\n                    [name]=\"key.toString() + 'time'\"\n                    #timeModel=\"ngModel\"\n                    [required]=\"metadata.required\"\n                >\n                    <mat-option *ngFor=\"let validTime of DateUtilities.getValidTimesForDropdown(\n                            metadata.times,\n                            input,\n                            metadata.minTime,\n                            metadata.maxTime,\n                            metadata.filterTime\n                        )\"\n                        [value]=\"validTime.value\"\n                    >\n                        {{validTime.displayName}}\n                    </mat-option>\n                </mat-select>\n                <mat-error>{{getValidationErrorMessage(timeModel)}}</mat-error>\n            </mat-form-field>\n        </div>\n        <div class=\"buttons\">\n            <button type=\"button\" mat-raised-button\n                [disabled]=\"model.errors || timeModel.errors || DateUtilities.timeIsUnprocessable(time)\"\n                (click)=\"addDateTime()\">\n                {{metadata.addButtonLabel}}\n            </button>\n            <button type=\"button\" mat-raised-button\n                [disabled]=\"!selection.selected.length\"\n                (click)=\"remove()\">\n                {{metadata.removeButtonLabel}}\n            </button>\n        </div>\n    </div>\n\n    <mat-table [dataSource]=\"dataSource\">\n        <!-- select Column -->\n        <ng-container matColumnDef=\"select\">\n            <mat-header-cell *matHeaderCellDef>\n                <mat-checkbox [disabled]=\"!dataSource.data.length\" (change)=\"$event ? SelectionUtilities.masterToggle(selection, dataSource) : null\" [checked]=\"selection.hasValue() && SelectionUtilities.isAllSelected(selection, dataSource)\" [indeterminate]=\"selection.hasValue() && !SelectionUtilities.isAllSelected(selection, dataSource)\"></mat-checkbox>\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let module\">\n                <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(module) : null\" [checked]=\"selection.isSelected(module)\"></mat-checkbox>\n            </mat-cell>\n        </ng-container>\n    \n        <ng-container *ngFor=\"let dCol of metadata.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n            <mat-header-cell *matHeaderCellDef>\n                {{dCol.displayName}}\n            </mat-header-cell>\n            <mat-cell class=\"entity\" *matCellDef=\"let entity\">\n                {{dCol.value(entity)}}\n            </mat-cell>\n        </ng-container>\n    \n        <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n        <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n    </mat-table>\n\n    <div class=\"array-error\" *ngIf=\"metadata.required && !dataSource.data.length\">\n        {{metadata.missingErrorMessage}}\n    </div>\n</div>", styles: ["mat-form-field{width:100%}.buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px}.elevation-container{border-radius:5px;padding:15px;margin-bottom:15px;margin-top:15px}.array-headline{padding-bottom:10px}mat-table{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:25px}.mat-column-select{flex:0 0 75px}.array-error{display:flex;align-items:center;justify-content:center;margin-top:-25.8px;border:1px solid #E0E0E0;background-color:#f8d3d7;color:#721c24;height:25.8px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.date-time{display:flex;align-items:baseline}.date-time .timepicker{margin-left:10px}\n"] }]
         }] });
 
 /* eslint-disable jsdoc/require-jsdoc */
@@ -2249,6 +2162,8 @@ class ArrayStringChipsInputComponent extends NgxMatEntityBaseInputComponent {
         const value = (event.value || '').trim();
         this.validateAndSetPropertyValue(value);
         (_a = event.chipInput) === null || _a === void 0 ? void 0 : _a.clear();
+        this.chipsInput = '';
+        this.emitChange();
     }
     /**
      * Removes the given value from the array.
@@ -2264,17 +2179,7 @@ class ArrayStringChipsInputComponent extends NgxMatEntityBaseInputComponent {
         var _a, _b;
         (_a = this.propertyValue) === null || _a === void 0 ? void 0 : _a.splice(this.propertyValue.indexOf(value), 1);
         this.propertyValue = ((_b = this.propertyValue) === null || _b === void 0 ? void 0 : _b.length) ? this.propertyValue : undefined;
-    }
-    /**
-     * Handles adding a string to the array when an autocomplete value has been selected.
-     *
-     * @param event - The autocomplete selected event.
-     * @param chipsInput - The element where the user typed the value.
-     */
-    selected(event, chipsInput) {
-        const value = (event.option.viewValue || '').trim();
-        this.validateAndSetPropertyValue(value);
-        chipsInput.value = '';
+        this.emitChange();
     }
     validateAndSetPropertyValue(value) {
         var _a;
@@ -2293,54 +2198,21 @@ class ArrayStringChipsInputComponent extends NgxMatEntityBaseInputComponent {
         }
     }
 }
-ArrayStringChipsInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: ArrayStringChipsInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ArrayStringChipsInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.1", type: ArrayStringChipsInputComponent, selector: "array-string-chips-input", usesInheritance: true, ngImport: i0, template: "<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-chip-list #chipList\n        (ngModelChange)=\"emitChange()\"\n        [(ngModel)]=\"propertyValue\" [name]=\"key.toString()\" #model=\"ngModel\"\n        [required]=\"metadata.required\"\n        [disabled]=\"isReadOnly\"\n    >\n        <mat-chip *ngFor=\"let value of propertyValue\" (removed)=\"removeStringChipArrayValue(value)\">\n            {{value}}\n            <button type=\"button\" matChipRemove>\n                <i class=\"{{metadata.deleteIcon}}\"></i>\n            </button>\n        </mat-chip>\n        <input matInput\n            [matChipInputFor]=\"chipList\"\n            [matChipInputAddOnBlur]=\"true\"\n            (matChipInputTokenEnd)=\"addStringChipArrayValue($event)\"\n            [(ngModel)]=\"chipsInput\" [name]=\"key.toString()\" #chipsModel=\"ngModel\"\n            [minlength]='metadata.minLength ?? null'\n            [maxlength]='metadata.maxLength ?? null'\n            [pattern]=\"metadata.regex ?? '[\\\\s\\\\S]*'\"\n        >\n        <mat-error *ngIf=\"chipsModel.errors\">{{getValidationErrorMessage(chipsModel)}}</mat-error>\n    </mat-chip-list>\n    <mat-error *ngIf=\"!chipsModel.errors\">{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5$2.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i5$2.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i5$2.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i5$2.MatChipRemove, selector: "[matChipRemove]" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: ArrayStringChipsInputComponent, decorators: [{
+ArrayStringChipsInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: ArrayStringChipsInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+ArrayStringChipsInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: ArrayStringChipsInputComponent, selector: "array-string-chips-input", usesInheritance: true, ngImport: i0, template: "<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-chip-grid #chipGrid\n        [(ngModel)]=\"propertyValue\" [name]=\"key.toString()\" #model=\"ngModel\"\n        [required]=\"metadata.required\"\n        [disabled]=\"isReadOnly\"\n    >\n        <mat-chip-row *ngFor=\"let value of propertyValue\" (removed)=\"removeStringChipArrayValue(value)\">\n            {{value}}\n            <button type=\"button\" matChipRemove>\n                <i class=\"{{metadata.deleteIcon}}\"></i>\n            </button>\n        </mat-chip-row>\n        <input matInput\n            [matChipInputFor]=\"chipGrid\"\n            [matChipInputAddOnBlur]=\"true\"\n            (matChipInputTokenEnd)=\"addStringChipArrayValue($event)\"\n            [(ngModel)]=\"chipsInput\" [name]=\"key.toString()\" #chipsModel=\"ngModel\"\n            [minlength]=\"metadata.minLength ?? null\"\n            [maxlength]=\"metadata.maxLength ?? null\"\n            [pattern]=\"metadata.regex ?? '[\\\\s\\\\S]*'\"\n        />\n        <mat-error *ngIf=\"chipsModel.errors\">{{getValidationErrorMessage(chipsModel)}}</mat-error>\n    </mat-chip-grid>\n    <mat-error *ngIf=\"!chipsModel.errors\">{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5$3.MatChipGrid, selector: "mat-chip-grid", inputs: ["tabIndex", "disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i5$3.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i5$3.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i5$3.MatChipRow, selector: "mat-chip-row, mat-basic-chip-row", inputs: ["color", "disabled", "disableRipple", "tabIndex", "editable"], outputs: ["edited"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: ArrayStringChipsInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'array-string-chips-input', template: "<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-chip-list #chipList\n        (ngModelChange)=\"emitChange()\"\n        [(ngModel)]=\"propertyValue\" [name]=\"key.toString()\" #model=\"ngModel\"\n        [required]=\"metadata.required\"\n        [disabled]=\"isReadOnly\"\n    >\n        <mat-chip *ngFor=\"let value of propertyValue\" (removed)=\"removeStringChipArrayValue(value)\">\n            {{value}}\n            <button type=\"button\" matChipRemove>\n                <i class=\"{{metadata.deleteIcon}}\"></i>\n            </button>\n        </mat-chip>\n        <input matInput\n            [matChipInputFor]=\"chipList\"\n            [matChipInputAddOnBlur]=\"true\"\n            (matChipInputTokenEnd)=\"addStringChipArrayValue($event)\"\n            [(ngModel)]=\"chipsInput\" [name]=\"key.toString()\" #chipsModel=\"ngModel\"\n            [minlength]='metadata.minLength ?? null'\n            [maxlength]='metadata.maxLength ?? null'\n            [pattern]=\"metadata.regex ?? '[\\\\s\\\\S]*'\"\n        >\n        <mat-error *ngIf=\"chipsModel.errors\">{{getValidationErrorMessage(chipsModel)}}</mat-error>\n    </mat-chip-list>\n    <mat-error *ngIf=\"!chipsModel.errors\">{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"] }]
+            args: [{ selector: 'array-string-chips-input', template: "<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-chip-grid #chipGrid\n        [(ngModel)]=\"propertyValue\" [name]=\"key.toString()\" #model=\"ngModel\"\n        [required]=\"metadata.required\"\n        [disabled]=\"isReadOnly\"\n    >\n        <mat-chip-row *ngFor=\"let value of propertyValue\" (removed)=\"removeStringChipArrayValue(value)\">\n            {{value}}\n            <button type=\"button\" matChipRemove>\n                <i class=\"{{metadata.deleteIcon}}\"></i>\n            </button>\n        </mat-chip-row>\n        <input matInput\n            [matChipInputFor]=\"chipGrid\"\n            [matChipInputAddOnBlur]=\"true\"\n            (matChipInputTokenEnd)=\"addStringChipArrayValue($event)\"\n            [(ngModel)]=\"chipsInput\" [name]=\"key.toString()\" #chipsModel=\"ngModel\"\n            [minlength]=\"metadata.minLength ?? null\"\n            [maxlength]=\"metadata.maxLength ?? null\"\n            [pattern]=\"metadata.regex ?? '[\\\\s\\\\S]*'\"\n        />\n        <mat-error *ngIf=\"chipsModel.errors\">{{getValidationErrorMessage(chipsModel)}}</mat-error>\n    </mat-chip-grid>\n    <mat-error *ngIf=\"!chipsModel.errors\">{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"] }]
         }] });
 
 /* eslint-disable jsdoc/require-jsdoc */
-class ArrayStringAutocompleteChipsComponent extends NgxMatEntityBaseInputComponent {
-    constructor() {
-        super(...arguments);
-        this.chipsInput = '';
+class ArrayStringAutocompleteChipsComponent extends ArrayStringChipsInputComponent {
+    get autocompleteValues() {
+        return this.metadata.autocompleteValues;
     }
     ngOnInit() {
         super.ngOnInit();
-        this.filteredAutocompleteStrings = LodashUtilities.cloneDeep(this.metadata.autocompleteValues);
-    }
-    /**
-     * Handles adding strings to the chipsArray.
-     * Checks validation and also creates a new array if it is undefined.
-     * This is needed because two things are validated: The array itself
-     * and the contents of the array. And we need a way to display an
-     * mat-error. As the only validation for the array is whether or not
-     * it contains values, we can set it to undefined when the last element is removed
-     * (removeStringChipArrayValue). That way we can use the "required" validator.
-     *
-     * @param event - The event that fires when a new chip is completed.
-     */
-    addStringChipArrayValue(event) {
-        var _a;
-        const value = (event.value || '').trim();
-        this.validateAndSetPropertyValue(value);
-        (_a = event.chipInput) === null || _a === void 0 ? void 0 : _a.clear();
-    }
-    /**
-     * Removes the given value from the array.
-     * Sets the array to undefined if it is now empty.
-     * This is needed because two things are validated: The array itself
-     * and the contents of the array. And we need a way to display an
-     * mat-error. As the only validation for the array is whether or not
-     * it is empty, setting it to undefined here enables us to use the "required" validator.
-     *
-     * @param value - The string to remove from the array.
-     */
-    removeStringChipArrayValue(value) {
-        var _a, _b;
-        (_a = this.propertyValue) === null || _a === void 0 ? void 0 : _a.splice(this.propertyValue.indexOf(value), 1);
-        this.propertyValue = ((_b = this.propertyValue) === null || _b === void 0 ? void 0 : _b.length) ? this.propertyValue : undefined;
+        this.filteredAutocompleteStrings = LodashUtilities.cloneDeep(this.autocompleteValues);
     }
     /**
      * Handles adding a string to the array when an autocomplete value has been selected.
@@ -2352,6 +2224,7 @@ class ArrayStringAutocompleteChipsComponent extends NgxMatEntityBaseInputCompone
         const value = (event.option.viewValue || '').trim();
         this.validateAndSetPropertyValue(value);
         chipsInput.value = '';
+        this.emitChange();
     }
     /**
      * Dynamically filters the Autocomplete options when the user inputs something.
@@ -2361,33 +2234,80 @@ class ArrayStringAutocompleteChipsComponent extends NgxMatEntityBaseInputCompone
     filterAutocompleteStrings(input) {
         if (input != null) {
             const filterValue = input.toLowerCase();
-            this.filteredAutocompleteStrings = this.metadata.autocompleteValues.filter(s => s.toLowerCase().includes(filterValue));
+            this.filteredAutocompleteStrings = this.autocompleteValues.filter(s => s.toLowerCase().includes(filterValue));
         }
     }
-    validateAndSetPropertyValue(value) {
+}
+ArrayStringAutocompleteChipsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: ArrayStringAutocompleteChipsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+ArrayStringAutocompleteChipsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: ArrayStringAutocompleteChipsComponent, selector: "array-string-autocomplete-chips", usesInheritance: true, ngImport: i0, template: "<!-- <mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-chip-grid #chipList\n        (ngModelChange)=\"emitChange()\"\n        [(ngModel)]=\"propertyValue\" [name]=\"key.toString()\" #model=\"ngModel\"\n        [required]=\"metadata.required\"\n        [disabled]=\"isReadOnly\"\n    >\n        <mat-chip *ngFor=\"let value of propertyValue\" (removed)=\"removeStringChipArrayValue(value)\">\n            {{value}}\n            <button type=\"button\" matChipRemove>\n                <i class=\"{{metadata.deleteIcon}}\"></i>\n            </button>\n        </mat-chip>\n        <input matInput\n            [matChipInputFor]=\"chipList\"\n            [matAutocomplete]=\"auto\"\n            [matChipInputAddOnBlur]=\"true\"\n            (matChipInputTokenEnd)=\"addStringChipArrayValue($event)\"\n            (keyup)=\"filterAutocompleteStrings(chipsInput)\"\n            [(ngModel)]=\"chipsInput\" [name]=\"key.toString()\" #chipsModel=\"ngModel\"\n            #chipsElement\n            [minlength]='metadata.minLength ?? null'\n            [maxlength]='metadata.maxLength ?? null'\n            [pattern]=\"metadata.regex ?? '[\\\\s\\\\S]*'\"\n        >\n        <mat-error *ngIf=\"chipsModel.errors\">{{getValidationErrorMessage(chipsModel)}}</mat-error>\n    </mat-chip-grid>\n    <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event, chipsElement)\">\n        <mat-option *ngFor=\"let value of metadata.autocompleteValues\" [value]=\"value\">\n          {{value}}\n        </mat-option>\n    </mat-autocomplete>\n    <mat-error *ngIf=\"!chipsModel.errors\">{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field> -->\n\n<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-chip-grid #chipGrid\n        [(ngModel)]=\"propertyValue\" [name]=\"key.toString()\" #model=\"ngModel\"\n        [required]=\"metadata.required\"\n        [disabled]=\"isReadOnly\"\n    >\n        <mat-chip-row *ngFor=\"let value of propertyValue\" (removed)=\"removeStringChipArrayValue(value)\">\n            {{value}}\n            <button type=\"button\" matChipRemove>\n                <i class=\"{{metadata.deleteIcon}}\"></i>\n            </button>\n        </mat-chip-row>\n        <input matInput\n            [matChipInputFor]=\"chipGrid\"\n            [matAutocomplete]=\"auto\"\n            [matChipInputAddOnBlur]=\"true\"\n            (matChipInputTokenEnd)=\"addStringChipArrayValue($event)\"\n            [(ngModel)]=\"chipsInput\" [name]=\"key.toString()\" #chipsModel=\"ngModel\" #chipsElement\n            [minlength]=\"metadata.minLength ?? null\"\n            [maxlength]=\"metadata.maxLength ?? null\"\n            [pattern]=\"metadata.regex ?? '[\\\\s\\\\S]*'\"\n        />\n        <mat-error *ngIf=\"chipsModel.errors\">{{getValidationErrorMessage(chipsModel)}}</mat-error>\n    </mat-chip-grid>\n    <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event, chipsElement)\">\n        <mat-option *ngFor=\"let value of autocompleteValues\" [value]=\"value\">\n          {{value}}\n        </mat-option>\n    </mat-autocomplete>\n    <mat-error *ngIf=\"!chipsModel.errors\">{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i6.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i5$3.MatChipGrid, selector: "mat-chip-grid", inputs: ["tabIndex", "disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i5$3.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i5$3.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i5$3.MatChipRow, selector: "mat-chip-row, mat-basic-chip-row", inputs: ["color", "disabled", "disableRipple", "tabIndex", "editable"], outputs: ["edited"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: ArrayStringAutocompleteChipsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'array-string-autocomplete-chips', template: "<!-- <mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-chip-grid #chipList\n        (ngModelChange)=\"emitChange()\"\n        [(ngModel)]=\"propertyValue\" [name]=\"key.toString()\" #model=\"ngModel\"\n        [required]=\"metadata.required\"\n        [disabled]=\"isReadOnly\"\n    >\n        <mat-chip *ngFor=\"let value of propertyValue\" (removed)=\"removeStringChipArrayValue(value)\">\n            {{value}}\n            <button type=\"button\" matChipRemove>\n                <i class=\"{{metadata.deleteIcon}}\"></i>\n            </button>\n        </mat-chip>\n        <input matInput\n            [matChipInputFor]=\"chipList\"\n            [matAutocomplete]=\"auto\"\n            [matChipInputAddOnBlur]=\"true\"\n            (matChipInputTokenEnd)=\"addStringChipArrayValue($event)\"\n            (keyup)=\"filterAutocompleteStrings(chipsInput)\"\n            [(ngModel)]=\"chipsInput\" [name]=\"key.toString()\" #chipsModel=\"ngModel\"\n            #chipsElement\n            [minlength]='metadata.minLength ?? null'\n            [maxlength]='metadata.maxLength ?? null'\n            [pattern]=\"metadata.regex ?? '[\\\\s\\\\S]*'\"\n        >\n        <mat-error *ngIf=\"chipsModel.errors\">{{getValidationErrorMessage(chipsModel)}}</mat-error>\n    </mat-chip-grid>\n    <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event, chipsElement)\">\n        <mat-option *ngFor=\"let value of metadata.autocompleteValues\" [value]=\"value\">\n          {{value}}\n        </mat-option>\n    </mat-autocomplete>\n    <mat-error *ngIf=\"!chipsModel.errors\">{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field> -->\n\n<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-chip-grid #chipGrid\n        [(ngModel)]=\"propertyValue\" [name]=\"key.toString()\" #model=\"ngModel\"\n        [required]=\"metadata.required\"\n        [disabled]=\"isReadOnly\"\n    >\n        <mat-chip-row *ngFor=\"let value of propertyValue\" (removed)=\"removeStringChipArrayValue(value)\">\n            {{value}}\n            <button type=\"button\" matChipRemove>\n                <i class=\"{{metadata.deleteIcon}}\"></i>\n            </button>\n        </mat-chip-row>\n        <input matInput\n            [matChipInputFor]=\"chipGrid\"\n            [matAutocomplete]=\"auto\"\n            [matChipInputAddOnBlur]=\"true\"\n            (matChipInputTokenEnd)=\"addStringChipArrayValue($event)\"\n            [(ngModel)]=\"chipsInput\" [name]=\"key.toString()\" #chipsModel=\"ngModel\" #chipsElement\n            [minlength]=\"metadata.minLength ?? null\"\n            [maxlength]=\"metadata.maxLength ?? null\"\n            [pattern]=\"metadata.regex ?? '[\\\\s\\\\S]*'\"\n        />\n        <mat-error *ngIf=\"chipsModel.errors\">{{getValidationErrorMessage(chipsModel)}}</mat-error>\n    </mat-chip-grid>\n    <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event, chipsElement)\">\n        <mat-option *ngFor=\"let value of autocompleteValues\" [value]=\"value\">\n          {{value}}\n        </mat-option>\n    </mat-autocomplete>\n    <mat-error *ngIf=\"!chipsModel.errors\">{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"] }]
+        }] });
+
+/* eslint-disable jsdoc/require-jsdoc */
+class BooleanCheckboxInputComponent extends NgxMatEntityBaseInputComponent {
+    ngOnInit() {
         var _a;
-        if (value) {
-            if (this.metadata.minLength && value.length < this.metadata.minLength) {
-                return;
-            }
-            if (this.metadata.maxLength && value.length > this.metadata.maxLength) {
-                return;
-            }
-            if (this.metadata.regex && !value.match(this.metadata.regex)) {
-                return;
-            }
-            this.propertyValue = (_a = this.propertyValue) !== null && _a !== void 0 ? _a : [];
-            this.propertyValue.push(value);
-        }
+        super.ngOnInit();
+        this.propertyValue = (_a = this.propertyValue) !== null && _a !== void 0 ? _a : false;
     }
 }
-ArrayStringAutocompleteChipsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: ArrayStringAutocompleteChipsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ArrayStringAutocompleteChipsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.1", type: ArrayStringAutocompleteChipsComponent, selector: "array-string-autocomplete-chips", usesInheritance: true, ngImport: i0, template: "<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-chip-list #chipList\n        (ngModelChange)=\"emitChange()\"\n        [(ngModel)]=\"propertyValue\" [name]=\"key.toString()\" #model=\"ngModel\"\n        [required]=\"metadata.required\"\n        [disabled]=\"isReadOnly\"\n    >\n        <mat-chip *ngFor=\"let value of propertyValue\" (removed)=\"removeStringChipArrayValue(value)\">\n            {{value}}\n            <button type=\"button\" matChipRemove>\n                <i class=\"{{metadata.deleteIcon}}\"></i>\n            </button>\n        </mat-chip>\n        <input matInput\n            [matChipInputFor]=\"chipList\"\n            [matAutocomplete]=\"auto\"\n            [matChipInputAddOnBlur]=\"true\"\n            (matChipInputTokenEnd)=\"addStringChipArrayValue($event)\"\n            (keyup)=\"filterAutocompleteStrings(chipsInput)\"\n            [(ngModel)]=\"chipsInput\" [name]=\"key.toString()\" #chipsModel=\"ngModel\"\n            #chipsElement\n            [minlength]='metadata.minLength ?? null'\n            [maxlength]='metadata.maxLength ?? null'\n            [pattern]=\"metadata.regex ?? '[\\\\s\\\\S]*'\"\n        >\n        <mat-error *ngIf=\"chipsModel.errors\">{{getValidationErrorMessage(chipsModel)}}</mat-error>\n    </mat-chip-list>\n    <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event, chipsElement)\">\n        <mat-option *ngFor=\"let value of metadata.autocompleteValues\" [value]=\"value\">\n          {{value}}\n        </mat-option>\n    </mat-autocomplete>\n    <mat-error *ngIf=\"!chipsModel.errors\">{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i6.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i5$2.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i5$2.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i5$2.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i5$2.MatChipRemove, selector: "[matChipRemove]" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: ArrayStringAutocompleteChipsComponent, decorators: [{
+BooleanCheckboxInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: BooleanCheckboxInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+BooleanCheckboxInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: BooleanCheckboxInputComponent, selector: "boolean-checkbox-input", usesInheritance: true, ngImport: i0, template: "<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-checkbox\n        color=\"primary\"\n        (ngModelChange)=\"emitChange()\"\n        (click)=\"model.control.markAsTouched()\"\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString()\"\n        [disabled]=\"isReadOnly\"\n        [class.disabled]=\"isReadOnly\"\n        [class.mat-checkbox-disabled]=\"false\"\n    >\n    </mat-checkbox>\n    <!-- hidden input is needed so that the checkbox can be used inside a mat-form-field -->\n    <input matInput hidden\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString() + 'Helper'\"\n        #model=\"ngModel\"\n        [pattern]=\"metadata.required ? 'true' : '[\\\\s\\\\S]*'\"\n        [required]=\"metadata.required\"\n        [disabled]=\"isReadOnly\"\n    >\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-checkbox{margin-top:-10px;margin-bottom:-10px}mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: BooleanCheckboxInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'array-string-autocomplete-chips', template: "<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-chip-list #chipList\n        (ngModelChange)=\"emitChange()\"\n        [(ngModel)]=\"propertyValue\" [name]=\"key.toString()\" #model=\"ngModel\"\n        [required]=\"metadata.required\"\n        [disabled]=\"isReadOnly\"\n    >\n        <mat-chip *ngFor=\"let value of propertyValue\" (removed)=\"removeStringChipArrayValue(value)\">\n            {{value}}\n            <button type=\"button\" matChipRemove>\n                <i class=\"{{metadata.deleteIcon}}\"></i>\n            </button>\n        </mat-chip>\n        <input matInput\n            [matChipInputFor]=\"chipList\"\n            [matAutocomplete]=\"auto\"\n            [matChipInputAddOnBlur]=\"true\"\n            (matChipInputTokenEnd)=\"addStringChipArrayValue($event)\"\n            (keyup)=\"filterAutocompleteStrings(chipsInput)\"\n            [(ngModel)]=\"chipsInput\" [name]=\"key.toString()\" #chipsModel=\"ngModel\"\n            #chipsElement\n            [minlength]='metadata.minLength ?? null'\n            [maxlength]='metadata.maxLength ?? null'\n            [pattern]=\"metadata.regex ?? '[\\\\s\\\\S]*'\"\n        >\n        <mat-error *ngIf=\"chipsModel.errors\">{{getValidationErrorMessage(chipsModel)}}</mat-error>\n    </mat-chip-list>\n    <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event, chipsElement)\">\n        <mat-option *ngFor=\"let value of metadata.autocompleteValues\" [value]=\"value\">\n          {{value}}\n        </mat-option>\n    </mat-autocomplete>\n    <mat-error *ngIf=\"!chipsModel.errors\">{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"] }]
+            args: [{ selector: 'boolean-checkbox-input', template: "<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-checkbox\n        color=\"primary\"\n        (ngModelChange)=\"emitChange()\"\n        (click)=\"model.control.markAsTouched()\"\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString()\"\n        [disabled]=\"isReadOnly\"\n        [class.disabled]=\"isReadOnly\"\n        [class.mat-checkbox-disabled]=\"false\"\n    >\n    </mat-checkbox>\n    <!-- hidden input is needed so that the checkbox can be used inside a mat-form-field -->\n    <input matInput hidden\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString() + 'Helper'\"\n        #model=\"ngModel\"\n        [pattern]=\"metadata.required ? 'true' : '[\\\\s\\\\S]*'\"\n        [required]=\"metadata.required\"\n        [disabled]=\"isReadOnly\"\n    >\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-checkbox{margin-top:-10px;margin-bottom:-10px}mat-form-field{width:100%}\n"] }]
         }] });
 
+/* eslint-disable jsdoc/require-jsdoc */
+class BooleanDropdownInputComponent extends NgxMatEntityBaseInputComponent {
+}
+BooleanDropdownInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: BooleanDropdownInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+BooleanDropdownInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: BooleanDropdownInputComponent, selector: "boolean-dropdown-input", usesInheritance: true, ngImport: i0, template: "<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-select\n        (ngModelChange)=\"emitChange()\"\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString()\"\n        #model=\"ngModel\"\n        [required]=\"metadata.required\"\n        [disabled]=\"isReadOnly\"\n    >\n        <mat-option [value]=\"undefined\">-</mat-option>\n        <mat-option [value]=\"true\">{{metadata.dropdownTrue}}</mat-option>\n        <mat-option [value]=\"false\">{{metadata.dropdownFalse}}</mat-option>\n    </mat-select>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$3.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i5$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: BooleanDropdownInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'boolean-dropdown-input', template: "<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-select\n        (ngModelChange)=\"emitChange()\"\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString()\"\n        #model=\"ngModel\"\n        [required]=\"metadata.required\"\n        [disabled]=\"isReadOnly\"\n    >\n        <mat-option [value]=\"undefined\">-</mat-option>\n        <mat-option [value]=\"true\">{{metadata.dropdownTrue}}</mat-option>\n        <mat-option [value]=\"false\">{{metadata.dropdownFalse}}</mat-option>\n    </mat-select>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"] }]
+        }] });
+
+/* eslint-disable jsdoc/require-jsdoc */
+class BooleanToggleInputComponent extends NgxMatEntityBaseInputComponent {
+    ngOnInit() {
+        var _a;
+        super.ngOnInit();
+        this.propertyValue = (_a = this.propertyValue) !== null && _a !== void 0 ? _a : false;
+    }
+}
+BooleanToggleInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: BooleanToggleInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+BooleanToggleInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: BooleanToggleInputComponent, selector: "boolean-toggle-input", usesInheritance: true, ngImport: i0, template: "<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-slide-toggle\n        color=\"primary\"\n        (click)=\"model.control.markAsTouched()\"\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString()\"\n        [disabled]=\"isReadOnly\"\n    >\n    </mat-slide-toggle>\n    <!-- hidden input is needed so that the toggle can be used inside a mat-form-field -->\n    <input matInput hidden\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString() + 'Helper'\"\n        #model=\"ngModel\"\n        [pattern]=\"metadata.required ? 'true' : '[\\\\s\\\\S]*'\"\n        [required]=\"metadata.required\"\n        (ngModelChange)=\"emitChange()\"\n    >\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$4.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: BooleanToggleInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'boolean-toggle-input', template: "<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-slide-toggle\n        color=\"primary\"\n        (click)=\"model.control.markAsTouched()\"\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString()\"\n        [disabled]=\"isReadOnly\"\n    >\n    </mat-slide-toggle>\n    <!-- hidden input is needed so that the toggle can be used inside a mat-form-field -->\n    <input matInput hidden\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString() + 'Helper'\"\n        #model=\"ngModel\"\n        [pattern]=\"metadata.required ? 'true' : '[\\\\s\\\\S]*'\"\n        [required]=\"metadata.required\"\n        (ngModelChange)=\"emitChange()\"\n    >\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"] }]
+        }] });
+
+/* eslint-disable jsdoc/require-jsdoc */
+class CustomInputComponent extends NgxMatEntityBaseInputComponent {
+    constructor(viewContainerRef) {
+        super();
+        this.viewContainerRef = viewContainerRef;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.component = this.viewContainerRef.createComponent(this.metadata.component);
+        this.component.instance.entity = this.entity;
+        this.component.instance.key = this.key;
+        this.component.instance.getValidationErrorMessage = this.getValidationErrorMessage;
+        this.component.instance.inputChangeEvent.subscribe(this.inputChangeEvent);
+        this.component.instance.isReadOnly = this.isReadOnly;
+    }
+}
+CustomInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: CustomInputComponent, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
+CustomInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: CustomInputComponent, selector: "custom-input", usesInheritance: true, ngImport: i0, template: "", styles: [""] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: CustomInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'custom-input', template: "" }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; } });
+
 /* eslint-disable jsdoc/require-jsdoc */
 class DateInputComponent extends NgxMatEntityBaseInputComponent {
     constructor() {
@@ -2395,11 +2315,11 @@ class DateInputComponent extends NgxMatEntityBaseInputComponent {
         this.DateUtilities = DateUtilities;
     }
 }
-DateInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: DateInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DateInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.1", type: DateInputComponent, selector: "date-input", usesInheritance: true, ngImport: i0, template: "<mat-form-field appearance=\"standard\">\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <input\n        (ngModelChange)=\"emitChange()\"\n        matInput\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString()\"\n        #model=\"ngModel\"\n        [matDatepicker]=\"picker\"\n        [required]=\"metadata.required\"\n        [min]=\"metadata.min ? metadata.min(propertyValue) : undefined\"\n        [max]=\"metadata.max ? metadata.max(propertyValue) : undefined\"\n        [matDatepickerFilter]=\"metadata.filter ?? DateUtilities.defaultDateFilter\"\n        [disabled]=\"isReadOnly\"\n    >\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n    <mat-datepicker #picker></mat-datepicker>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i2.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$5.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4$5.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4$5.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: DateInputComponent, decorators: [{
+DateInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: DateInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DateInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: DateInputComponent, selector: "date-input", usesInheritance: true, ngImport: i0, template: "<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <input\n        (ngModelChange)=\"emitChange()\"\n        matInput\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString()\"\n        #model=\"ngModel\"\n        [matDatepicker]=\"picker\"\n        [required]=\"metadata.required\"\n        [min]=\"metadata.min ? metadata.min(propertyValue) : undefined\"\n        [max]=\"metadata.max ? metadata.max(propertyValue) : undefined\"\n        [matDatepickerFilter]=\"metadata.filter ?? DateUtilities.defaultDateFilter\"\n        [disabled]=\"isReadOnly\"\n    >\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n    <mat-datepicker #picker></mat-datepicker>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: DateInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'date-input', template: "<mat-form-field appearance=\"standard\">\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <input\n        (ngModelChange)=\"emitChange()\"\n        matInput\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString()\"\n        #model=\"ngModel\"\n        [matDatepicker]=\"picker\"\n        [required]=\"metadata.required\"\n        [min]=\"metadata.min ? metadata.min(propertyValue) : undefined\"\n        [max]=\"metadata.max ? metadata.max(propertyValue) : undefined\"\n        [matDatepickerFilter]=\"metadata.filter ?? DateUtilities.defaultDateFilter\"\n        [disabled]=\"isReadOnly\"\n    >\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n    <mat-datepicker #picker></mat-datepicker>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"] }]
+            args: [{ selector: 'date-input', template: "<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <input\n        (ngModelChange)=\"emitChange()\"\n        matInput\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString()\"\n        #model=\"ngModel\"\n        [matDatepicker]=\"picker\"\n        [required]=\"metadata.required\"\n        [min]=\"metadata.min ? metadata.min(propertyValue) : undefined\"\n        [max]=\"metadata.max ? metadata.max(propertyValue) : undefined\"\n        [matDatepickerFilter]=\"metadata.filter ?? DateUtilities.defaultDateFilter\"\n        [disabled]=\"isReadOnly\"\n    >\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n    <mat-datepicker #picker></mat-datepicker>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"] }]
         }] });
 
 /* eslint-disable jsdoc/require-jsdoc */
@@ -2438,11 +2358,11 @@ class DateRangeInputComponent extends NgxMatEntityBaseInputComponent {
         this.emitChange();
     }
 }
-DateRangeInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: DateRangeInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DateRangeInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.1", type: DateRangeInputComponent, selector: "date-range-input", usesInheritance: true, ngImport: i0, template: "<mat-form-field appearance=\"standard\">\n    <mat-label>{{metadata.displayName}}</mat-label>\n    \n    <mat-date-range-input [rangePicker]=\"picker\" [required]=\"metadata.required\" [dateFilter]=\"metadata.filter ?? defaultDateFilter\" [disabled]=\"isReadOnly\">\n        <input matStartDate\n            [(ngModel)]=\"dateRangeStart\"\n            [name]=\"key.toString() + 'start'\"\n            #startModel=\"ngModel\"\n            [required]=\"metadata.required\"\n            [min]=\"metadata.minStart ? metadata.minStart(dateRange.start) : undefined\"\n            [max]=\"metadata.maxStart ? metadata.maxStart(dateRange.start) : undefined\"\n            [placeholder]=\"metadata.placeholderStart\"\n            (ngModelChange)=\"setDateRangeValues()\"\n        >\n        <input matEndDate\n            [(ngModel)]=\"dateRangeEnd\"\n            [name]=\"key.toString() + 'end'\"\n            #endModel=\"ngModel\"\n            [required]=\"metadata.required\"\n            [min]=\"metadata.minEnd ? metadata.minEnd(dateRange.end) : undefined\"\n            [max]=\"metadata.maxEnd ? metadata.maxEnd(dateRange.end) : undefined\"\n            [placeholder]=\"metadata.placeholderEnd\"\n            (ngModelChange)=\"setDateRangeValues()\"\n        >\n    </mat-date-range-input>\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n    <mat-date-range-picker #picker></mat-date-range-picker>\n\n    <mat-error *ngIf=\"startModel.errors\">{{getValidationErrorMessage(startModel)}}</mat-error>\n    <mat-error *ngIf=\"!startModel.errors && endModel.errors\">{{getValidationErrorMessage(endModel)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$5.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i4$5.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i4$5.MatStartDate, selector: "input[matStartDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i4$5.MatEndDate, selector: "input[matEndDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i4$5.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: DateRangeInputComponent, decorators: [{
+DateRangeInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: DateRangeInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DateRangeInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: DateRangeInputComponent, selector: "date-range-input", usesInheritance: true, ngImport: i0, template: "<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    \n    <mat-date-range-input [rangePicker]=\"picker\" [required]=\"metadata.required\" [dateFilter]=\"metadata.filter ?? defaultDateFilter\" [disabled]=\"isReadOnly\">\n        <input matStartDate\n            [(ngModel)]=\"dateRangeStart\"\n            [name]=\"key.toString() + 'start'\"\n            #startModel=\"ngModel\"\n            [required]=\"metadata.required\"\n            [min]=\"metadata.minStart ? metadata.minStart(dateRange.start) : undefined\"\n            [max]=\"metadata.maxStart ? metadata.maxStart(dateRange.start) : undefined\"\n            [placeholder]=\"metadata.placeholderStart\"\n            (ngModelChange)=\"setDateRangeValues()\"\n        >\n        <input matEndDate\n            [(ngModel)]=\"dateRangeEnd\"\n            [name]=\"key.toString() + 'end'\"\n            #endModel=\"ngModel\"\n            [required]=\"metadata.required\"\n            [min]=\"metadata.minEnd ? metadata.minEnd(dateRange.end) : undefined\"\n            [max]=\"metadata.maxEnd ? metadata.maxEnd(dateRange.end) : undefined\"\n            [placeholder]=\"metadata.placeholderEnd\"\n            (ngModelChange)=\"setDateRangeValues()\"\n        >\n    </mat-date-range-input>\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n    <mat-date-range-picker #picker></mat-date-range-picker>\n\n    <mat-error *ngIf=\"startModel.errors\">{{getValidationErrorMessage(startModel)}}</mat-error>\n    <mat-error *ngIf=\"!startModel.errors && endModel.errors\">{{getValidationErrorMessage(endModel)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i4$2.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i4$2.MatStartDate, selector: "input[matStartDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i4$2.MatEndDate, selector: "input[matEndDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i4$2.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: DateRangeInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'date-range-input', template: "<mat-form-field appearance=\"standard\">\n    <mat-label>{{metadata.displayName}}</mat-label>\n    \n    <mat-date-range-input [rangePicker]=\"picker\" [required]=\"metadata.required\" [dateFilter]=\"metadata.filter ?? defaultDateFilter\" [disabled]=\"isReadOnly\">\n        <input matStartDate\n            [(ngModel)]=\"dateRangeStart\"\n            [name]=\"key.toString() + 'start'\"\n            #startModel=\"ngModel\"\n            [required]=\"metadata.required\"\n            [min]=\"metadata.minStart ? metadata.minStart(dateRange.start) : undefined\"\n            [max]=\"metadata.maxStart ? metadata.maxStart(dateRange.start) : undefined\"\n            [placeholder]=\"metadata.placeholderStart\"\n            (ngModelChange)=\"setDateRangeValues()\"\n        >\n        <input matEndDate\n            [(ngModel)]=\"dateRangeEnd\"\n            [name]=\"key.toString() + 'end'\"\n            #endModel=\"ngModel\"\n            [required]=\"metadata.required\"\n            [min]=\"metadata.minEnd ? metadata.minEnd(dateRange.end) : undefined\"\n            [max]=\"metadata.maxEnd ? metadata.maxEnd(dateRange.end) : undefined\"\n            [placeholder]=\"metadata.placeholderEnd\"\n            (ngModelChange)=\"setDateRangeValues()\"\n        >\n    </mat-date-range-input>\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n    <mat-date-range-picker #picker></mat-date-range-picker>\n\n    <mat-error *ngIf=\"startModel.errors\">{{getValidationErrorMessage(startModel)}}</mat-error>\n    <mat-error *ngIf=\"!startModel.errors && endModel.errors\">{{getValidationErrorMessage(endModel)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"] }]
+            args: [{ selector: 'date-range-input', template: "<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    \n    <mat-date-range-input [rangePicker]=\"picker\" [required]=\"metadata.required\" [dateFilter]=\"metadata.filter ?? defaultDateFilter\" [disabled]=\"isReadOnly\">\n        <input matStartDate\n            [(ngModel)]=\"dateRangeStart\"\n            [name]=\"key.toString() + 'start'\"\n            #startModel=\"ngModel\"\n            [required]=\"metadata.required\"\n            [min]=\"metadata.minStart ? metadata.minStart(dateRange.start) : undefined\"\n            [max]=\"metadata.maxStart ? metadata.maxStart(dateRange.start) : undefined\"\n            [placeholder]=\"metadata.placeholderStart\"\n            (ngModelChange)=\"setDateRangeValues()\"\n        >\n        <input matEndDate\n            [(ngModel)]=\"dateRangeEnd\"\n            [name]=\"key.toString() + 'end'\"\n            #endModel=\"ngModel\"\n            [required]=\"metadata.required\"\n            [min]=\"metadata.minEnd ? metadata.minEnd(dateRange.end) : undefined\"\n            [max]=\"metadata.maxEnd ? metadata.maxEnd(dateRange.end) : undefined\"\n            [placeholder]=\"metadata.placeholderEnd\"\n            (ngModelChange)=\"setDateRangeValues()\"\n        >\n    </mat-date-range-input>\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n    <mat-date-range-picker #picker></mat-date-range-picker>\n\n    <mat-error *ngIf=\"startModel.errors\">{{getValidationErrorMessage(startModel)}}</mat-error>\n    <mat-error *ngIf=\"!startModel.errors && endModel.errors\">{{getValidationErrorMessage(endModel)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"] }]
         }] });
 
 /* eslint-disable jsdoc/require-jsdoc */
@@ -2491,174 +2411,13 @@ class DateTimeInputComponent extends NgxMatEntityBaseInputComponent {
         this.emitChange();
     }
 }
-DateTimeInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: DateTimeInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DateTimeInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.1", type: DateTimeInputComponent, selector: "date-time-input", usesInheritance: true, ngImport: i0, template: "<div class=\"date-time\">\n    <mat-form-field appearance=\"standard\">\n        <mat-label>{{metadata.displayName}}</mat-label>\n        <input\n            matInput\n            [(ngModel)]=\"propertyValue\"\n            [name]=\"key.toString()\"\n            #model=\"ngModel\"\n            [matDatepicker]=\"picker\"\n            [required]=\"metadata.required\"\n            [min]=\"metadata.minDate ? metadata.minDate(propertyValue) : undefined\"\n            [max]=\"metadata.maxDate ? metadata.maxDate(propertyValue) : undefined\"\n            [matDatepickerFilter]=\"metadata.filterDate ?? defaultDateFilter\"\n            (dateInput)=\"setTime()\"\n            [disabled]=\"isReadOnly\"\n        >\n        <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n        <mat-datepicker #picker></mat-datepicker>\n        <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n    </mat-form-field>\n    <mat-form-field class=\"timepicker\">\n        <mat-label>{{metadata.timeDisplayName}}</mat-label>\n        <mat-select\n            [(ngModel)]=\"time\"\n            [name]=\"key.toString() + 'time'\"\n            #timeModel=\"ngModel\"\n            [required]=\"metadata.required\"\n            [compareWith]=\"compareTimes\"\n            (ngModelChange)=\"setTime()\"\n            [disabled]=\"isReadOnly\"\n        >\n            <mat-option *ngFor=\"let validTime of DateUtilities.getValidTimesForDropdown(\n                    metadata.times,\n                    propertyValue,\n                    metadata.minTime,\n                    metadata.maxTime,\n                    metadata.filterTime\n                )\"\n                [value]=\"validTime.value\"\n            >\n                {{validTime.displayName}}\n            </mat-option>\n        </mat-select>\n        <mat-error>{{getValidationErrorMessage(timeModel)}}</mat-error>\n    </mat-form-field>\n</div>", styles: ["mat-form-field{width:100%}.date-time{display:flex;align-items:baseline}.date-time .timepicker{margin-left:10px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i5$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4$5.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4$5.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4$5.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: DateTimeInputComponent, decorators: [{
+DateTimeInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: DateTimeInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DateTimeInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: DateTimeInputComponent, selector: "date-time-input", usesInheritance: true, ngImport: i0, template: "<div class=\"date-time\">\n    <mat-form-field>\n        <mat-label>{{metadata.displayName}}</mat-label>\n        <input\n            matInput\n            [(ngModel)]=\"propertyValue\"\n            [name]=\"key.toString()\"\n            #model=\"ngModel\"\n            [matDatepicker]=\"picker\"\n            [required]=\"metadata.required\"\n            [min]=\"metadata.minDate ? metadata.minDate(propertyValue) : undefined\"\n            [max]=\"metadata.maxDate ? metadata.maxDate(propertyValue) : undefined\"\n            [matDatepickerFilter]=\"metadata.filterDate ?? defaultDateFilter\"\n            (dateInput)=\"setTime()\"\n            [disabled]=\"isReadOnly\"\n        >\n        <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n        <mat-datepicker #picker></mat-datepicker>\n        <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n    </mat-form-field>\n    <mat-form-field class=\"timepicker\">\n        <mat-label>{{metadata.timeDisplayName}}</mat-label>\n        <mat-select\n            [(ngModel)]=\"time\"\n            [name]=\"key.toString() + 'time'\"\n            #timeModel=\"ngModel\"\n            [required]=\"metadata.required\"\n            [compareWith]=\"compareTimes\"\n            (ngModelChange)=\"setTime()\"\n            [disabled]=\"isReadOnly\"\n        >\n            <mat-option *ngFor=\"let validTime of DateUtilities.getValidTimesForDropdown(\n                    metadata.times,\n                    propertyValue,\n                    metadata.minTime,\n                    metadata.maxTime,\n                    metadata.filterTime\n                )\"\n                [value]=\"validTime.value\"\n            >\n                {{validTime.displayName}}\n            </mat-option>\n        </mat-select>\n        <mat-error>{{getValidationErrorMessage(timeModel)}}</mat-error>\n    </mat-form-field>\n</div>", styles: ["mat-form-field{width:100%}.date-time{display:flex;align-items:baseline}.date-time .timepicker{margin-left:10px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$3.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i5$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: DateTimeInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'date-time-input', template: "<div class=\"date-time\">\n    <mat-form-field appearance=\"standard\">\n        <mat-label>{{metadata.displayName}}</mat-label>\n        <input\n            matInput\n            [(ngModel)]=\"propertyValue\"\n            [name]=\"key.toString()\"\n            #model=\"ngModel\"\n            [matDatepicker]=\"picker\"\n            [required]=\"metadata.required\"\n            [min]=\"metadata.minDate ? metadata.minDate(propertyValue) : undefined\"\n            [max]=\"metadata.maxDate ? metadata.maxDate(propertyValue) : undefined\"\n            [matDatepickerFilter]=\"metadata.filterDate ?? defaultDateFilter\"\n            (dateInput)=\"setTime()\"\n            [disabled]=\"isReadOnly\"\n        >\n        <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n        <mat-datepicker #picker></mat-datepicker>\n        <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n    </mat-form-field>\n    <mat-form-field class=\"timepicker\">\n        <mat-label>{{metadata.timeDisplayName}}</mat-label>\n        <mat-select\n            [(ngModel)]=\"time\"\n            [name]=\"key.toString() + 'time'\"\n            #timeModel=\"ngModel\"\n            [required]=\"metadata.required\"\n            [compareWith]=\"compareTimes\"\n            (ngModelChange)=\"setTime()\"\n            [disabled]=\"isReadOnly\"\n        >\n            <mat-option *ngFor=\"let validTime of DateUtilities.getValidTimesForDropdown(\n                    metadata.times,\n                    propertyValue,\n                    metadata.minTime,\n                    metadata.maxTime,\n                    metadata.filterTime\n                )\"\n                [value]=\"validTime.value\"\n            >\n                {{validTime.displayName}}\n            </mat-option>\n        </mat-select>\n        <mat-error>{{getValidationErrorMessage(timeModel)}}</mat-error>\n    </mat-form-field>\n</div>", styles: ["mat-form-field{width:100%}.date-time{display:flex;align-items:baseline}.date-time .timepicker{margin-left:10px}\n"] }]
+            args: [{ selector: 'date-time-input', template: "<div class=\"date-time\">\n    <mat-form-field>\n        <mat-label>{{metadata.displayName}}</mat-label>\n        <input\n            matInput\n            [(ngModel)]=\"propertyValue\"\n            [name]=\"key.toString()\"\n            #model=\"ngModel\"\n            [matDatepicker]=\"picker\"\n            [required]=\"metadata.required\"\n            [min]=\"metadata.minDate ? metadata.minDate(propertyValue) : undefined\"\n            [max]=\"metadata.maxDate ? metadata.maxDate(propertyValue) : undefined\"\n            [matDatepickerFilter]=\"metadata.filterDate ?? defaultDateFilter\"\n            (dateInput)=\"setTime()\"\n            [disabled]=\"isReadOnly\"\n        >\n        <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n        <mat-datepicker #picker></mat-datepicker>\n        <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n    </mat-form-field>\n    <mat-form-field class=\"timepicker\">\n        <mat-label>{{metadata.timeDisplayName}}</mat-label>\n        <mat-select\n            [(ngModel)]=\"time\"\n            [name]=\"key.toString() + 'time'\"\n            #timeModel=\"ngModel\"\n            [required]=\"metadata.required\"\n            [compareWith]=\"compareTimes\"\n            (ngModelChange)=\"setTime()\"\n            [disabled]=\"isReadOnly\"\n        >\n            <mat-option *ngFor=\"let validTime of DateUtilities.getValidTimesForDropdown(\n                    metadata.times,\n                    propertyValue,\n                    metadata.minTime,\n                    metadata.maxTime,\n                    metadata.filterTime\n                )\"\n                [value]=\"validTime.value\"\n            >\n                {{validTime.displayName}}\n            </mat-option>\n        </mat-select>\n        <mat-error>{{getValidationErrorMessage(timeModel)}}</mat-error>\n    </mat-form-field>\n</div>", styles: ["mat-form-field{width:100%}.date-time{display:flex;align-items:baseline}.date-time .timepicker{margin-left:10px}\n"] }]
         }] });
 
-/**
- * The base component needed for all arrays that are displayed as a table.
- */
-class ArrayTableComponent extends NgxMatEntityBaseInputComponent {
-    constructor(matDialog) {
-        super();
-        this.matDialog = matDialog;
-        this.input = undefined;
-        this.dataSource = new MatTableDataSource();
-        this.selection = new SelectionModel(true, []);
-        this.SelectionUtilities = SelectionUtilities;
-    }
-    ngOnInit() {
-        var _a;
-        super.ngOnInit();
-        this.propertyValue = (_a = this.propertyValue) !== null && _a !== void 0 ? _a : [];
-        const givenDisplayColumns = this.metadata.displayColumns.map((v) => v.displayName);
-        if (givenDisplayColumns.find(s => s === 'select')) {
-            throw new Error(`The name "select" for a display column is reserved.
-                Please choose a different name.`);
-        }
-        this.displayedColumns = this.isReadOnly ? givenDisplayColumns : ['select'].concat(givenDisplayColumns);
-        this.dataSource.data = this.propertyValue;
-    }
-    /**
-     * Tries to add an item to the array.
-     */
-    add() {
-        var _a, _b, _c;
-        if (this.input != null) {
-            if (!this.metadata.allowDuplicates
-                && ((_a = this.propertyValue) === null || _a === void 0 ? void 0 : _a.find((v) => __awaiter(this, void 0, void 0, function* () { return yield EntityUtilities.isEqual(this.input, v, this.metadata, this.metadata.itemType); }))) != null) {
-                this.matDialog.open(NgxMatEntityConfirmDialogComponent, {
-                    data: this.metadata.duplicatesErrorDialog,
-                    autoFocus: false,
-                    restoreFocus: false
-                });
-                return;
-            }
-            (_b = this.propertyValue) === null || _b === void 0 ? void 0 : _b.push(LodashUtilities.cloneDeep(this.input));
-            this.dataSource.data = (_c = this.propertyValue) !== null && _c !== void 0 ? _c : [];
-            this.resetInput();
-            this.emitChange();
-        }
-    }
-    /**
-     * Is split up from the add method to override this functionality more easily.
-     */
-    resetInput() {
-        this.input = undefined;
-    }
-    /**
-     * Removes all selected entries from the entity array.
-     */
-    remove() {
-        SelectionUtilities.remove(this.selection, this.propertyValue, this.dataSource);
-        this.emitChange();
-    }
-}
-ArrayTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: ArrayTableComponent, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-ArrayTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.1", type: ArrayTableComponent, selector: "ngx-mat-entity-array-table", usesInheritance: true, ngImport: i0, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: ArrayTableComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ngx-mat-entity-array-table',
-                    template: ''
-                }]
-        }], ctorParameters: function () { return [{ type: i1.MatDialog }]; } });
-
-/* eslint-disable jsdoc/require-jsdoc */
-class ArrayDateInputComponent extends ArrayTableComponent {
-    constructor() {
-        super(...arguments);
-        this.DateUtilities = DateUtilities;
-    }
-}
-ArrayDateInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: ArrayDateInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ArrayDateInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.1", type: ArrayDateInputComponent, selector: "array-date-input", usesInheritance: true, ngImport: i0, template: "<div class=\"mat-elevation-z8 elevation-container\">\n    <div class=\"array-headline\">\n        <b>{{metadata.displayName}}</b>\n    </div>\n    <div *ngIf=\"!isReadOnly\">\n        <mat-form-field appearance=\"standard\">\n            <mat-label>{{metadata.displayName}}</mat-label>\n            <input\n                matInput\n                [(ngModel)]=\"input\"\n                [name]=\"key.toString()\"\n                #model=\"ngModel\"\n                [matDatepicker]=\"picker\"\n                [required]=\"metadata.required\"\n                [min]=\"metadata.min ? metadata.min(input) : undefined\"\n                [max]=\"metadata.max ? metadata.max(input) : undefined\"\n                [matDatepickerFilter]=\"metadata.filter ?? DateUtilities.defaultDateFilter\"\n            >\n            <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n            <mat-datepicker #picker></mat-datepicker>\n            <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n        </mat-form-field>\n        \n        <div class=\"buttons\">\n            <button type=\"button\" mat-raised-button\n                [disabled]=\"model.errors\"\n                (click)=\"add()\">\n                {{metadata.addButtonLabel}}\n            </button>\n            <button type=\"button\" mat-raised-button\n                [disabled]=\"!selection.selected.length\"\n                (click)=\"remove()\">\n                {{metadata.removeButtonLabel}}\n            </button>\n        </div>\n    </div>\n\n    <mat-table [dataSource]=\"dataSource\">\n        <!-- select Column -->\n        <ng-container matColumnDef=\"select\">\n            <mat-header-cell *matHeaderCellDef>\n                <mat-checkbox [disabled]=\"!dataSource.data.length\" (change)=\"$event ? SelectionUtilities.masterToggle(selection, dataSource) : null\" [checked]=\"selection.hasValue() && SelectionUtilities.isAllSelected(selection, dataSource)\" [indeterminate]=\"selection.hasValue() && !SelectionUtilities.isAllSelected(selection, dataSource)\"></mat-checkbox>\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let module\">\n                <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(module) : null\" [checked]=\"selection.isSelected(module)\"></mat-checkbox>\n            </mat-cell>\n        </ng-container>\n    \n        <ng-container *ngFor=\"let dCol of metadata.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n            <mat-header-cell *matHeaderCellDef>\n                {{dCol.displayName}}\n            </mat-header-cell>\n            <mat-cell class=\"entity\" *matCellDef=\"let entity\">\n                {{dCol.value(entity)}}\n            </mat-cell>\n        </ng-container>\n    \n        <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n        <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n    </mat-table>\n\n    <div class=\"array-error\" *ngIf=\"metadata.required && !dataSource.data.length\">\n        {{metadata.missingErrorMessage}}\n    </div>\n</div>", styles: ["mat-form-field{width:100%}.buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px}mat-table{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:25px}.mat-column-select{flex:0 0 75px}.elevation-container{border-radius:5px;padding:15px;margin-bottom:15px;margin-top:15px}.array-headline{padding-bottom:10px}.array-error{display:flex;align-items:center;justify-content:center;margin-top:-25.8px;border:1px solid #E0E0E0;background-color:#f8d3d7;color:#721c24;height:25.8px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5$3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5$3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5$3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5$3.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i5$3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5$3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5$3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5$3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5$3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5$3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$5.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4$5.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4$5.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: ArrayDateInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'array-date-input', template: "<div class=\"mat-elevation-z8 elevation-container\">\n    <div class=\"array-headline\">\n        <b>{{metadata.displayName}}</b>\n    </div>\n    <div *ngIf=\"!isReadOnly\">\n        <mat-form-field appearance=\"standard\">\n            <mat-label>{{metadata.displayName}}</mat-label>\n            <input\n                matInput\n                [(ngModel)]=\"input\"\n                [name]=\"key.toString()\"\n                #model=\"ngModel\"\n                [matDatepicker]=\"picker\"\n                [required]=\"metadata.required\"\n                [min]=\"metadata.min ? metadata.min(input) : undefined\"\n                [max]=\"metadata.max ? metadata.max(input) : undefined\"\n                [matDatepickerFilter]=\"metadata.filter ?? DateUtilities.defaultDateFilter\"\n            >\n            <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n            <mat-datepicker #picker></mat-datepicker>\n            <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n        </mat-form-field>\n        \n        <div class=\"buttons\">\n            <button type=\"button\" mat-raised-button\n                [disabled]=\"model.errors\"\n                (click)=\"add()\">\n                {{metadata.addButtonLabel}}\n            </button>\n            <button type=\"button\" mat-raised-button\n                [disabled]=\"!selection.selected.length\"\n                (click)=\"remove()\">\n                {{metadata.removeButtonLabel}}\n            </button>\n        </div>\n    </div>\n\n    <mat-table [dataSource]=\"dataSource\">\n        <!-- select Column -->\n        <ng-container matColumnDef=\"select\">\n            <mat-header-cell *matHeaderCellDef>\n                <mat-checkbox [disabled]=\"!dataSource.data.length\" (change)=\"$event ? SelectionUtilities.masterToggle(selection, dataSource) : null\" [checked]=\"selection.hasValue() && SelectionUtilities.isAllSelected(selection, dataSource)\" [indeterminate]=\"selection.hasValue() && !SelectionUtilities.isAllSelected(selection, dataSource)\"></mat-checkbox>\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let module\">\n                <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(module) : null\" [checked]=\"selection.isSelected(module)\"></mat-checkbox>\n            </mat-cell>\n        </ng-container>\n    \n        <ng-container *ngFor=\"let dCol of metadata.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n            <mat-header-cell *matHeaderCellDef>\n                {{dCol.displayName}}\n            </mat-header-cell>\n            <mat-cell class=\"entity\" *matCellDef=\"let entity\">\n                {{dCol.value(entity)}}\n            </mat-cell>\n        </ng-container>\n    \n        <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n        <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n    </mat-table>\n\n    <div class=\"array-error\" *ngIf=\"metadata.required && !dataSource.data.length\">\n        {{metadata.missingErrorMessage}}\n    </div>\n</div>", styles: ["mat-form-field{width:100%}.buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px}mat-table{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:25px}.mat-column-select{flex:0 0 75px}.elevation-container{border-radius:5px;padding:15px;margin-bottom:15px;margin-top:15px}.array-headline{padding-bottom:10px}.array-error{display:flex;align-items:center;justify-content:center;margin-top:-25.8px;border:1px solid #E0E0E0;background-color:#f8d3d7;color:#721c24;height:25.8px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}\n"] }]
-        }] });
-
-/* eslint-disable jsdoc/require-jsdoc */
-class ArrayDateTimeInputComponent extends ArrayTableComponent {
-    constructor() {
-        super(...arguments);
-        this.DateUtilities = DateUtilities;
-    }
-    ngOnInit() {
-        super.ngOnInit();
-        this.time = DateUtilities.getTimeFromDate(this.entity[this.key]);
-        this.timeDropdownValues = this.metadata.times;
-        if (this.entity[this.key] != null) {
-            this.dateTime = new Date(this.entity[this.key]);
-        }
-    }
-    resetInput() {
-        this.input = undefined;
-        this.time = undefined;
-    }
-    /**
-     * Adds a date time to the array.
-     */
-    addDateTime() {
-        if (this.input && this.time) {
-            this.input = new Date(this.input);
-            this.input.setHours(this.time.hours, this.time.minutes, 0, 0);
-            this.add();
-        }
-    }
-}
-ArrayDateTimeInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: ArrayDateTimeInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ArrayDateTimeInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.1", type: ArrayDateTimeInputComponent, selector: "array-date-time-input", usesInheritance: true, ngImport: i0, template: "<div class=\"mat-elevation-z8 elevation-container\">\n    <div class=\"array-headline\">\n        <b>{{metadata.displayName}}</b>\n    </div>\n    <div *ngIf=\"!isReadOnly\">\n        <div class=\"date-time\">\n            <mat-form-field appearance=\"standard\">\n                <mat-label>{{metadata.displayName}}</mat-label>\n                <input\n                    matInput\n                    [(ngModel)]=\"input\"\n                    [name]=\"key.toString()\"\n                    #model=\"ngModel\"\n                    [matDatepicker]=\"picker\"\n                    [required]=\"metadata.required\"\n                    [min]=\"metadata.minDate ? metadata.minDate(input) : undefined\"\n                    [max]=\"metadata.maxDate ? metadata.maxDate(input) : undefined\"\n                    [matDatepickerFilter]=\"metadata.filterDate ?? DateUtilities.defaultDateFilter\"\n                >\n                <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n                <mat-datepicker #picker></mat-datepicker>\n                <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n            </mat-form-field>\n            <mat-form-field class=\"timepicker\">\n                <mat-label>{{metadata.timeDisplayName}}</mat-label>\n                <mat-select\n                    [(ngModel)]=\"time\"\n                    [name]=\"key.toString() + 'time'\"\n                    #timeModel=\"ngModel\"\n                    [required]=\"metadata.required\"\n                >\n                    <mat-option *ngFor=\"let validTime of DateUtilities.getValidTimesForDropdown(\n                            metadata.times,\n                            input,\n                            metadata.minTime,\n                            metadata.maxTime,\n                            metadata.filterTime\n                        )\"\n                        [value]=\"validTime.value\"\n                    >\n                        {{validTime.displayName}}\n                    </mat-option>\n                </mat-select>\n                <mat-error>{{getValidationErrorMessage(timeModel)}}</mat-error>\n            </mat-form-field>\n        </div>\n        <div class=\"buttons\">\n            <button type=\"button\" mat-raised-button\n                [disabled]=\"model.errors || timeModel.errors || DateUtilities.timeIsUnprocessable(time)\"\n                (click)=\"addDateTime()\">\n                {{metadata.addButtonLabel}}\n            </button>\n            <button type=\"button\" mat-raised-button\n                [disabled]=\"!selection.selected.length\"\n                (click)=\"remove()\">\n                {{metadata.removeButtonLabel}}\n            </button>\n        </div>\n    </div>\n\n    <mat-table [dataSource]=\"dataSource\">\n        <!-- select Column -->\n        <ng-container matColumnDef=\"select\">\n            <mat-header-cell *matHeaderCellDef>\n                <mat-checkbox [disabled]=\"!dataSource.data.length\" (change)=\"$event ? SelectionUtilities.masterToggle(selection, dataSource) : null\" [checked]=\"selection.hasValue() && SelectionUtilities.isAllSelected(selection, dataSource)\" [indeterminate]=\"selection.hasValue() && !SelectionUtilities.isAllSelected(selection, dataSource)\"></mat-checkbox>\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let module\">\n                <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(module) : null\" [checked]=\"selection.isSelected(module)\"></mat-checkbox>\n            </mat-cell>\n        </ng-container>\n    \n        <ng-container *ngFor=\"let dCol of metadata.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n            <mat-header-cell *matHeaderCellDef>\n                {{dCol.displayName}}\n            </mat-header-cell>\n            <mat-cell class=\"entity\" *matCellDef=\"let entity\">\n                {{dCol.value(entity)}}\n            </mat-cell>\n        </ng-container>\n    \n        <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n        <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n    </mat-table>\n\n    <div class=\"array-error\" *ngIf=\"metadata.required && !dataSource.data.length\">\n        {{metadata.missingErrorMessage}}\n    </div>\n</div>", styles: ["mat-form-field{width:100%}.buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px}.elevation-container{border-radius:5px;padding:15px;margin-bottom:15px;margin-top:15px}.array-headline{padding-bottom:10px}mat-table{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:25px}.mat-column-select{flex:0 0 75px}.array-error{display:flex;align-items:center;justify-content:center;margin-top:-25.8px;border:1px solid #E0E0E0;background-color:#f8d3d7;color:#721c24;height:25.8px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.date-time{display:flex;align-items:baseline}.date-time .timepicker{margin-left:10px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i5$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5$3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5$3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5$3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5$3.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i5$3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5$3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5$3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5$3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5$3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5$3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$5.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4$5.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4$5.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: ArrayDateTimeInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'array-date-time-input', template: "<div class=\"mat-elevation-z8 elevation-container\">\n    <div class=\"array-headline\">\n        <b>{{metadata.displayName}}</b>\n    </div>\n    <div *ngIf=\"!isReadOnly\">\n        <div class=\"date-time\">\n            <mat-form-field appearance=\"standard\">\n                <mat-label>{{metadata.displayName}}</mat-label>\n                <input\n                    matInput\n                    [(ngModel)]=\"input\"\n                    [name]=\"key.toString()\"\n                    #model=\"ngModel\"\n                    [matDatepicker]=\"picker\"\n                    [required]=\"metadata.required\"\n                    [min]=\"metadata.minDate ? metadata.minDate(input) : undefined\"\n                    [max]=\"metadata.maxDate ? metadata.maxDate(input) : undefined\"\n                    [matDatepickerFilter]=\"metadata.filterDate ?? DateUtilities.defaultDateFilter\"\n                >\n                <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n                <mat-datepicker #picker></mat-datepicker>\n                <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n            </mat-form-field>\n            <mat-form-field class=\"timepicker\">\n                <mat-label>{{metadata.timeDisplayName}}</mat-label>\n                <mat-select\n                    [(ngModel)]=\"time\"\n                    [name]=\"key.toString() + 'time'\"\n                    #timeModel=\"ngModel\"\n                    [required]=\"metadata.required\"\n                >\n                    <mat-option *ngFor=\"let validTime of DateUtilities.getValidTimesForDropdown(\n                            metadata.times,\n                            input,\n                            metadata.minTime,\n                            metadata.maxTime,\n                            metadata.filterTime\n                        )\"\n                        [value]=\"validTime.value\"\n                    >\n                        {{validTime.displayName}}\n                    </mat-option>\n                </mat-select>\n                <mat-error>{{getValidationErrorMessage(timeModel)}}</mat-error>\n            </mat-form-field>\n        </div>\n        <div class=\"buttons\">\n            <button type=\"button\" mat-raised-button\n                [disabled]=\"model.errors || timeModel.errors || DateUtilities.timeIsUnprocessable(time)\"\n                (click)=\"addDateTime()\">\n                {{metadata.addButtonLabel}}\n            </button>\n            <button type=\"button\" mat-raised-button\n                [disabled]=\"!selection.selected.length\"\n                (click)=\"remove()\">\n                {{metadata.removeButtonLabel}}\n            </button>\n        </div>\n    </div>\n\n    <mat-table [dataSource]=\"dataSource\">\n        <!-- select Column -->\n        <ng-container matColumnDef=\"select\">\n            <mat-header-cell *matHeaderCellDef>\n                <mat-checkbox [disabled]=\"!dataSource.data.length\" (change)=\"$event ? SelectionUtilities.masterToggle(selection, dataSource) : null\" [checked]=\"selection.hasValue() && SelectionUtilities.isAllSelected(selection, dataSource)\" [indeterminate]=\"selection.hasValue() && !SelectionUtilities.isAllSelected(selection, dataSource)\"></mat-checkbox>\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let module\">\n                <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(module) : null\" [checked]=\"selection.isSelected(module)\"></mat-checkbox>\n            </mat-cell>\n        </ng-container>\n    \n        <ng-container *ngFor=\"let dCol of metadata.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n            <mat-header-cell *matHeaderCellDef>\n                {{dCol.displayName}}\n            </mat-header-cell>\n            <mat-cell class=\"entity\" *matCellDef=\"let entity\">\n                {{dCol.value(entity)}}\n            </mat-cell>\n        </ng-container>\n    \n        <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n        <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n    </mat-table>\n\n    <div class=\"array-error\" *ngIf=\"metadata.required && !dataSource.data.length\">\n        {{metadata.missingErrorMessage}}\n    </div>\n</div>", styles: ["mat-form-field{width:100%}.buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px}.elevation-container{border-radius:5px;padding:15px;margin-bottom:15px;margin-top:15px}.array-headline{padding-bottom:10px}mat-table{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:25px}.mat-column-select{flex:0 0 75px}.array-error{display:flex;align-items:center;justify-content:center;margin-top:-25.8px;border:1px solid #E0E0E0;background-color:#f8d3d7;color:#721c24;height:25.8px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.date-time{display:flex;align-items:baseline}.date-time .timepicker{margin-left:10px}\n"] }]
-        }] });
-
-/* eslint-disable jsdoc/require-jsdoc */
-class ArrayDateRangeInputComponent extends ArrayTableComponent {
-    constructor() {
-        super(...arguments);
-        this.DateUtilities = DateUtilities;
-    }
-    ngOnInit() {
-        super.ngOnInit();
-        this.input = {
-            start: undefined,
-            end: undefined,
-            values: undefined
-        };
-    }
-    /**
-     * Adds a DateRange to the array.
-     */
-    addDateRange() {
-        if (this.input && this.dateRangeStart && this.dateRangeEnd) {
-            this.input.start = new Date(this.dateRangeStart);
-            this.input.end = new Date(this.dateRangeEnd);
-            const values = DateUtilities.getDatesBetween(this.input.start, this.input.end, this.metadata.filter);
-            this.input.values = values.length ? values : undefined;
-            this.add();
-        }
-    }
-    resetInput() {
-        this.input = undefined;
-        this.dateRangeStart = undefined;
-        this.dateRangeEnd = undefined;
-    }
-}
-ArrayDateRangeInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: ArrayDateRangeInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ArrayDateRangeInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.1", type: ArrayDateRangeInputComponent, selector: "array-date-range-input", usesInheritance: true, ngImport: i0, template: "<div class=\"mat-elevation-z8 elevation-container\">\n    <div class=\"array-headline\">\n        <b>{{metadata.displayName}}</b>\n    </div>\n    <div *ngIf=\"!isReadOnly\">\n        <mat-form-field appearance=\"standard\">\n            <mat-label>{{metadata.displayName}}</mat-label>\n            \n            <mat-date-range-input [rangePicker]=\"picker\" [required]=\"metadata.required\" [dateFilter]=\"metadata.filter ? metadata.filter : DateUtilities.defaultDateFilter\">\n                <input matStartDate\n                    [(ngModel)]=\"dateRangeStart\"\n                    [name]=\"key.toString() + 'start'\"\n                    #startModel=\"ngModel\"\n                    [required]=\"metadata.required\"\n                    [min]=\"metadata.minStart ? metadata.minStart(input?.start) : undefined\"\n                    [max]=\"metadata.maxStart ? metadata.maxStart(input?.start) : undefined\"\n                    [placeholder]=\"metadata.placeholderStart\"\n                >\n                <input matEndDate\n                    [(ngModel)]=\"dateRangeEnd\"\n                    [name]=\"key.toString() + 'end'\"\n                    #endModel=\"ngModel\"\n                    [required]=\"metadata.required\"\n                    [min]=\"metadata.minEnd ? metadata.minEnd(input?.end) : undefined\"\n                    [max]=\"metadata.maxEnd ? metadata.maxEnd(input?.end) : undefined\"\n                    [placeholder]=\"metadata.placeholderEnd\"\n                >\n            </mat-date-range-input>\n            <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n            <mat-date-range-picker #picker></mat-date-range-picker>\n    \n            <mat-error *ngIf=\"startModel.errors\">{{getValidationErrorMessage(startModel)}}</mat-error>\n            <mat-error *ngIf=\"!startModel.errors && endModel.errors\">{{getValidationErrorMessage(endModel)}}</mat-error>\n        </mat-form-field>\n        \n        <div class=\"buttons\">\n            <button type=\"button\" mat-raised-button\n                [disabled]=\"startModel.errors || endModel.errors\"\n                (click)=\"addDateRange()\">\n                {{metadata.addButtonLabel}}\n            </button>\n            <button type=\"button\" mat-raised-button\n                [disabled]=\"!selection.selected.length\"\n                (click)=\"remove()\">\n                {{metadata.removeButtonLabel}}\n            </button>\n        </div>\n    </div>\n\n    <mat-table [dataSource]=\"dataSource\">\n        <!-- select Column -->\n        <ng-container matColumnDef=\"select\">\n            <mat-header-cell *matHeaderCellDef>\n                <mat-checkbox [disabled]=\"!dataSource.data.length\" (change)=\"$event ? SelectionUtilities.masterToggle(selection, dataSource) : null\" [checked]=\"selection.hasValue() && SelectionUtilities.isAllSelected(selection, dataSource)\" [indeterminate]=\"selection.hasValue() && !SelectionUtilities.isAllSelected(selection, dataSource)\"></mat-checkbox>\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let module\">\n                <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(module) : null\" [checked]=\"selection.isSelected(module)\"></mat-checkbox>\n            </mat-cell>\n        </ng-container>\n    \n        <ng-container *ngFor=\"let dCol of metadata.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n            <mat-header-cell *matHeaderCellDef>\n                {{dCol.displayName}}\n            </mat-header-cell>\n            <mat-cell class=\"entity\" *matCellDef=\"let entity\">\n                {{dCol.value(entity)}}\n            </mat-cell>\n        </ng-container>\n    \n        <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n        <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n    </mat-table>\n\n    <div class=\"array-error\" *ngIf=\"metadata.required && !dataSource.data.length\">\n        {{metadata.missingErrorMessage}}\n    </div>\n</div>", styles: ["mat-form-field{width:100%}.buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px}.elevation-container{border-radius:5px;padding:15px;margin-bottom:15px;margin-top:15px}.array-headline{padding-bottom:10px}mat-table{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:25px}.mat-column-select{flex:0 0 75px}.array-error{display:flex;align-items:center;justify-content:center;margin-top:-25.8px;border:1px solid #E0E0E0;background-color:#f8d3d7;color:#721c24;height:25.8px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5$3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5$3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5$3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5$3.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i5$3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5$3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5$3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5$3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5$3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5$3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$5.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i4$5.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i4$5.MatStartDate, selector: "input[matStartDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i4$5.MatEndDate, selector: "input[matEndDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i4$5.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: ArrayDateRangeInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'array-date-range-input', template: "<div class=\"mat-elevation-z8 elevation-container\">\n    <div class=\"array-headline\">\n        <b>{{metadata.displayName}}</b>\n    </div>\n    <div *ngIf=\"!isReadOnly\">\n        <mat-form-field appearance=\"standard\">\n            <mat-label>{{metadata.displayName}}</mat-label>\n            \n            <mat-date-range-input [rangePicker]=\"picker\" [required]=\"metadata.required\" [dateFilter]=\"metadata.filter ? metadata.filter : DateUtilities.defaultDateFilter\">\n                <input matStartDate\n                    [(ngModel)]=\"dateRangeStart\"\n                    [name]=\"key.toString() + 'start'\"\n                    #startModel=\"ngModel\"\n                    [required]=\"metadata.required\"\n                    [min]=\"metadata.minStart ? metadata.minStart(input?.start) : undefined\"\n                    [max]=\"metadata.maxStart ? metadata.maxStart(input?.start) : undefined\"\n                    [placeholder]=\"metadata.placeholderStart\"\n                >\n                <input matEndDate\n                    [(ngModel)]=\"dateRangeEnd\"\n                    [name]=\"key.toString() + 'end'\"\n                    #endModel=\"ngModel\"\n                    [required]=\"metadata.required\"\n                    [min]=\"metadata.minEnd ? metadata.minEnd(input?.end) : undefined\"\n                    [max]=\"metadata.maxEnd ? metadata.maxEnd(input?.end) : undefined\"\n                    [placeholder]=\"metadata.placeholderEnd\"\n                >\n            </mat-date-range-input>\n            <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n            <mat-date-range-picker #picker></mat-date-range-picker>\n    \n            <mat-error *ngIf=\"startModel.errors\">{{getValidationErrorMessage(startModel)}}</mat-error>\n            <mat-error *ngIf=\"!startModel.errors && endModel.errors\">{{getValidationErrorMessage(endModel)}}</mat-error>\n        </mat-form-field>\n        \n        <div class=\"buttons\">\n            <button type=\"button\" mat-raised-button\n                [disabled]=\"startModel.errors || endModel.errors\"\n                (click)=\"addDateRange()\">\n                {{metadata.addButtonLabel}}\n            </button>\n            <button type=\"button\" mat-raised-button\n                [disabled]=\"!selection.selected.length\"\n                (click)=\"remove()\">\n                {{metadata.removeButtonLabel}}\n            </button>\n        </div>\n    </div>\n\n    <mat-table [dataSource]=\"dataSource\">\n        <!-- select Column -->\n        <ng-container matColumnDef=\"select\">\n            <mat-header-cell *matHeaderCellDef>\n                <mat-checkbox [disabled]=\"!dataSource.data.length\" (change)=\"$event ? SelectionUtilities.masterToggle(selection, dataSource) : null\" [checked]=\"selection.hasValue() && SelectionUtilities.isAllSelected(selection, dataSource)\" [indeterminate]=\"selection.hasValue() && !SelectionUtilities.isAllSelected(selection, dataSource)\"></mat-checkbox>\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let module\">\n                <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(module) : null\" [checked]=\"selection.isSelected(module)\"></mat-checkbox>\n            </mat-cell>\n        </ng-container>\n    \n        <ng-container *ngFor=\"let dCol of metadata.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n            <mat-header-cell *matHeaderCellDef>\n                {{dCol.displayName}}\n            </mat-header-cell>\n            <mat-cell class=\"entity\" *matCellDef=\"let entity\">\n                {{dCol.value(entity)}}\n            </mat-cell>\n        </ng-container>\n    \n        <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n        <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n    </mat-table>\n\n    <div class=\"array-error\" *ngIf=\"metadata.required && !dataSource.data.length\">\n        {{metadata.missingErrorMessage}}\n    </div>\n</div>", styles: ["mat-form-field{width:100%}.buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px}.elevation-container{border-radius:5px;padding:15px;margin-bottom:15px;margin-top:15px}.array-headline{padding-bottom:10px}mat-table{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:25px}.mat-column-select{flex:0 0 75px}.array-error{display:flex;align-items:center;justify-content:center;margin-top:-25.8px;border:1px solid #E0E0E0;background-color:#f8d3d7;color:#721c24;height:25.8px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}\n"] }]
-        }] });
-
-// eslint-disable-next-line max-len
-const placeholder = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAAAAMgCAMAAAAEPmswAAAANlBMVEXx8/XCy9LFztXu8PPs7/Lp7e/W3OHL0tnZ3+PN1NrS2d7i5urn6u7f5OjI0Nfc4ebP1tzk6excnoRZAAAXh0lEQVR42uzUAQ0AAAzDoN+/6eloAiK4B4gQFpAhLCBDWECGsIAMYQEZwgIyhAVkCAvIEBaQISwgQ1hAhrCADGEBGcICMoQFZAgLyBAWkCEsIENYQIawgAxhARnCAjKEBWQIC8gQFpAhLCBDWECGsIAMYQEZwgIyhAVkCAvIEBaQISwgQ1hAhrCADGEBGcICMoQFZAgLyBAWkCEsIENYQIawgAxhARnCAjKEBWQIC8gQFpAhLGDs1AEJAAAAgKD/r9sR6Ag3hAVsCAvYEBawISxgQ1jAhrCADWEBG8ICNoQFbAgL2BAWsCEsYENYwIawgA1hARvCAjaEBWwIC9gQFrAhLGBDWMCGsIANYQEbwgI2hAVsCAvYEBawISxgQ1jAhrCADWEBG8ICNoQFbAgL2BAWsCEsYENYwIawgA1hARvCAjaEBWwIC9gQFrAhLGBDWMCGsIANYQEbwgI2hAVsCAvYEBbETh2QAAAAAAj6/7odgY6QDWEBG8ICNoQFbAgL2BAWsCEsYENYwIawgA1hARvCAjaEBWwIC9gQFrAhLGBDWMCGsIANYQEbwgI2hAVsCAvYEBawISxgQ1jAhrCADWEBG8ICNoQFbAgL2BAWsCEsYENYwIawgA1hARvCAjaEBWwIC9gQFrAhLGBDWMCGsIANYQEbwgI2hAVsCAvYEBawISxgQ1jAhrCADWEBG8ICNoRF7NQBCQAAAICg/6/bEegIYUNYwIawgA1hARvCAjaEBWwIC9gQFrAhLGBDWMCGsIANYQEbwgI2hAVsCAvYEBawISxgQ1jAhrCADWEBG8ICNoQFbAgL2BAWsCEsYENYwIawgA1hARvCAjaEBWwIC9gQFrAhLGBDWMCGsIANYQEbwgI2hAVsCAvYEBawISxgQ1jAhrCADWEBG8ICNoQFbAgL2BAWsCEsYENYwIawgA1hxc6dJtcKAgEURgREwGn/m32Vd1Op/Ih3cO72fIs4BU0rADEIFgAxCBYAMQgWADEIFgAxCBbwm+3bFOKQ8zSV4r13zvky5a4bYgxjYyuch2ABD7ZJMRdnXnIlDyE1FY5HsADbhmFy5lM+x7GvcCSChXtrQufNCnXpQlvhIAQLt2XHONVmE2VIzLaOQLBwT230ZlsuBy6IeyNYuB+bOmd24TpOWrsiWLiZJhazKz8w09oNwcKd9NGbA9SZg9Y+CBZuw4ZijlMiE63tESzcg02TOZqnWVsjWLiDpqvNKXxkI35LBAv6pWJO5APzrM0QLChnozNnm5jBb4RgQbU2m0uoO3YdtkCwoFjy5jp85Ji1GsGCWpfK1X95rLAKwYJS4XK54pi1HsGCSuH8SfucjkWH5QgWFLpwrr6UVGEZggV10rVz9cVxM1yGYEGZthgJ6oHPdhYgWFClv8jeFcOsfRAsKGIHI8rENumHCBb0iLWRhvn7ZwgWtGgvuXj1kidZHyBY0MF2RiqS9T6CBRWCvNsgyVqAYEGBRsYqA8lajWBBPGlvg38rvBi+gWBBuvb6i+3vmdjLeolgQTYdx6tvme33FwgWRBO6yzBr4BvDpwgWJNN0vHqo+Sz6GYIFuRplx6sHx4PhPIIFsaJRigfDWQQLQvXid6+Yvn+OYEGmUfRq+2uMsv5EsCCSvmk7o6x3ECwIpPo6yCLpEwQL8iTl10G2smYRLIij/zrIvXAOwYIwvcrlq1kT74W/ESzIMmr51Plddazwg2BBlGDux7NH+oNgQRK5/0Fm+L4JgvWPvbvRSRiGAjBaBoqK+PP+L2s0xGSj3QiQ9I57zkN86brblvVItn1l8/2cYLEar1mmGWoOFlm/BIu1yLh9ZZE1IVisRNLtK4usEcFiFYbvwtYiS7BYg7zb7WPfFlmCRXj7bNOiFlkNgkV8j373lZ2siwkW4SX/PTi1+9pkJljEluhyhgsdMy+yBIvQDoWpXeLThYJFYMYZ6vJe4SBYxDWkuAv5Gu9Z78kSLMIajF8ZcBgRLOL6MH5l731MsAhrb/zK3vuEYBFV6ttk7L3XCRZBvRUcLpwSLGLSK3PvFYJFSHrls7BGsIhIr3wWVgkWATnu7G9hnWARj175LGwQLMLRK5+FLYJFNHp1jd1+k4NgEYpeXel5k4JgEYleXe24yUCwCESvXDkzR7CIxPzVTbYJxt4FizD0ynzDPMEiDr3yCtgCwSKMr8Ltnh58I0uwiOG1cA/bxz6oI1iE4L4+E1nLBIsY3IdsIusCgkUI3pu4q/fH3XoXLPob9OqXo4VLBIsAvD944tnCBYJFAN53PjFDukCw6O9Q+GPrfYlg0d2x8M+tfrMEi94+CyOm3tsEi65cKDNl6n2OYNGTA89Vpt5bBIuOHCCs8rOwSbDoaW9gtMbPwhbBohsD7k1+FjYIFv0MBkbb/CysESx6MTA6z8nCCsGiEwNYS7xOcU6w6OWlsMB4ww9794LdJgyEUXgwAsfFL/a/2Z4+T2zjWCMgnl/cbwttbxppNNwjWHgLBrByMN5wj2Ct4HztL+OxS621qTuOp/5a06HnItgw+v0uTRUI1qL2/dDao3b8qO+RRDkGGt5haGpAsJZzPbX2XDvUc/I5ExuwsrE4+QbBWsz+I9kr6VLR/XI5Nsq8SVdBsQjWIg6D5Rn5bxYbGpwYyPqPYC3iMFq+4+aTxSeevdg38xfBWsB5MJ+j/s+5Oc5cEDoxQvoPwZrvozW3SwWHCWX4RM67iX9Oh2DNc+isRFL/QVduNBRg6P0XgjVTv/nJYx9eEAYgXSyCNcNu2PpUjBMXhCEo/7AkWKVm78tM8jc2XqxEDkL4mQ7BKnZot35j48QFYRi6z3QIVqlru/kbGx8uCAORLRbBKvSD808nVoxGorrpnWCVuTIV48TKvlhEL30IVoEl1zlt5xyLlX2xaBaLYJU4J153+bCyLx7J5Q0Ey23hw+Ok+NfGiwP3iBSLRbAKDLaksdkCDtwDSnrLuwmWX29mDB57MOEelF6xCJbTGocx9R9jMeEelNxKP4Ll1tlvHGPl4psTgbVixSJYXr39wS+FuVgpE5lYsQiW0661FcgdJTiwUiY2rd8KCZbTyf7ipjAPO9yjk/o/FsHy2dstBt5fYEVDfErFIlg+g63j2FSLidHwhJ5bECyXs33GaMNLfDRVgk6xCJbLyT7jFOsVJkZFyBSLYHnsbD1C5wgOe4MElWIRLI/e7rFn+ws8eRYiUiyC5dHZelJTIZ4869C4KyRYDnu7x2TDF9gxqkWiWATL4WJrOjW14cmzFoViESyHZGtqm8rw5FmNwCsdgpXvbI8YxXqGJ8+C4heLYOXr7RE7G57gAEtS+I1+BCvfyaYwOzqFAyxR0YtFsPIle8Qh1iQOsGQFLxbByrazCQy7T2ICS1fsb+kQrGwHe4rPQN/iCaGy0MUiWNl6m8Kp+yN2YGmL/E1ogpXtYtMYHb3HDixxgYtFsLIN9gRb/G6xxF1e3AtrgpXtaM/w/vkzlrhXYGiCIljZOntAsKbsOMDSF7VYBCtbsrVV8ofBk5waBD1QreTfyPoIVh6e5NQi5kbJOv6NfAtbX9zLmVw8yanHT/buBDt1GIbCsJwRCOP+N/t62vNaphLbSZEs/98O2gOXyJFkk102BFYkAisGIzmeDMEeAitaK09REl5hJMcVg6MXHr4jb8EZVgRGcpyxl1gOviPv0stzrGv4MdLR4Iu5pZIEViQaR+cxkuOOucu/CKxIjObMYiTHIWsXUxBY0TbynPtevUiM5LhkbKEfgRWJ9TIz6GhwytZ6LAIrEgv8ZtDR4JWpZTMEViRWJM/ZCXyytGyGwIrFJRSvsGTUM0OHqwRWLK75eoUdDa7ZGYQmsOLt5CnO3EOgxd05M59NAisWV9W/MgpcszIITWAl6OUeR1ifaHH37xxMILASnOSBz5NNY/8ZGGBkSIfASjDKDZ8/YelY2lcFG0M6BFaKXh4w+UyLeyU6Cw2kBFaKQW75fHOc7CCogYUhHQIrRSN3aHMPtLjXw0CnIIGV5CT3vN8DN4eCsCb6L4YIrCRHuUYTVgi0uFdFvYGUwEpzkP/cPWxnocW9MkPQRGClGuUKPQ1sca/OOSgisJId5BsnWB/2gqqoNpASWMmaVv6ArTW00biXvkLtMaghsNIN8snXUWYeZp6rpNiORWBl2Mva+lAqZp5rtA9aCKxk36s1aWlg5rlWU1BCYOXYyQcKQmae63UKOgisLAcRoQWLgrBiQ1BBYGVpem8z8BkoCKt2DhoIrDzHztmWoXQUhHXT+dwSWJnGtvoDd2ae66ZSGRBYubbVX/ZMQVg5jXYsAivbueyzSyN/Pwo2hbcjsPJt25qfrygIodDcQGAtMHZlj5EuwFZkqBQIBNYSx16W6Ip9P0hBCJ3mBgJrkeYg+S7F9l9REEKpuYHAWmiobx4nBApCKDU3EFhLjb3k6As+vuKaHGhtbiCwlhvayh6vKAihdZEOgbWCZpI0l2L3i36ZBFD59SWwVjFOKXFVdDUYKAih101IYK0iIbKm0uMqNFyTA615WAJrNcdNL3O6TcGtV18oCKH4qpDAWtP21MnvukOxdw/+oCCE5qtCAmtlx2Hq5FE7DQ6erUKgIITqHDSB9Qea7XCaLvu+a7u+30+nYVtwT/stCkKovioksJCAgvAfe3eU6ygMBFG0GhtCSAxh/5udUWby8Z4COGCgI92ziJLLuBuc+6mQwEI+nozi9KlCAgu5KIQ4/VMhgYVMFEKc/6mQwEIeCiEcTBUSWMhDIYSDBaQEFrJQCOFhASmBhRwUQiwLve2LwEIetozCxb8KCSxk4LcT8DGjQ2BhGYUQTmZ0CCwsoxDCyYwOgYVFFEJ4mdEhsLCEQgg3MzoEFpZQCPGJ0XZDYGERhRCfGWwvBBaWUAjh6OKdwMI8CiE+drF9EFhYQCGEp4t3AgtzKIRwdfFOYGEOhRCuLt4JLMy6CvBz8U5gYU5VC/Dz4p3AwpxBgKNVMwQWJlEI4W3VDIGFGRRC+Fo1Q2BhCoUQ7na8E1iYdBHga8c7gYUJFEL4u3gnsDClFeDs4p3AwjsUQrj8uarsCP21a4Z0G+sYQwiSQoixvo9paJvHpTI4RCFEAVcrSrar/tEMY9SCeL+1zaM3OEIhhMPFDbK9VF07Bn2kTs2V45YPFEJ4XNwg20PfpKgJOallONtdgL/FDbLSqi7V2qpOHUetU1AI8eR0cYOsqKq7BRVybzlpHY5CiH+cvh+VlVN1o8oKt4ar+CNRCPHi8/2orJRrCtpDTA/DISiE2EeyUmRFVG3UfgKZdQAKIX7y+H5UVkA/BP1GZn0vCiGeHP74S7bZJek9Mus7NQL+8vh+VLZRlXSckC6GnfUCnhyOQcu2aYOOVTc80CqOQoj33O0flW3RRR0vJN5nlUUhxAR3Y9Cy9aqb8nHM+g59EPDi7hpLtloXdCKOWYVQCDHP1Ri0LJOf49VL3Rm2ohBiga9rLFkeX8er/yLNcBsKIXI4+o2ObAU//38KA7OGJY0CfvM0Bi1bofd00cHTrLUohDja3TaSfe4R5crIC/gVKIR/2Lvb5NRhGArD54RvCC3sf7N3Op07UyhJ7PQHsvU+W4BxIvlIQbkw2/zkMrFH+em/V6MgRKlIbSy50hDzX82RVYeCEMUitbHkOh9hP/60ozAsRkGIGoHaWHKVQ7D21YORI6sCkVGUC9PGkqcFTV9xZP0RBSGqRWljyb+1/J/myKrAllG8w2bwavKEwGnReXdyWXMoCPF2o1eTi719eLDUlYGdOa1kVdCvo9eSH/RwXkmbI0fWSxSEiOHmleRnTcWvpmz3RoWwYRX0afVuLLnI0FyLg1jWMwpCxHH3OnKJocUn8Ej3/QcKQoRy9Cryt/7OK7rvDygIEcvJa8hf+jyvaGX91HpcBZ1Z18aS7W7PK0kjq9+XnAS8wcUryO75vKIutE1BiJD2rifb7ut+8NmGupCCEBEdXE3dn1eSdtSFFISIZze4lvxf10soqQsnDJH3BaF3V9dSivNK2rKR9KWrgPc5u5LcyfzgogsfBPvtJuB96hcmK08/luY7BSGi2bmOMk2YMazT8Rs02vTpKvKks/pzNPr+hdGam2soWXuDhAOfyUEodSM68oRTr//mTxIOvV0Bo2l3V5BfO/R6XvGS1dAnRZDC3uWU8fro02AJFsI4uJhSfkNlx3UhM88Io2JER0nzz+mvC/vK2KFtV5dSigAWL1nMPCOyswspbzwn80tW3z1KNKd4REeJH75j3ulCIu6IZXQZ+dlHnofvJusKhyTv0GjI0UXU20bkOpeUKVIi7ojn5BJKXixsM6ZIOw+toEllIzpKeEGYPUWa7zdGC64uIJob2XrvaS5V0JizlynLBCGb/Ug0ILbN4EXK23BP2ntP1qREQ+5eJPaNfNmmyb2zowFx7b1ENGO/JSkLcxb9aMXBC5S74Z6uLMxa9KMNOy8Qz95MkSx2NCC2q+cpfcM90zh0n3v60ZObZ4nLox/ufZeFQ/aXaMS3EHgXl0d5ysK8t8Box8VzRPo5zW1h6ltgNGPvGSL9nOW2kAYWmjC7zE80sJIsT+ahhEaMniZqhSR7/f6xdy+4iQNBEEDdQYEA4Xf/y+5ukk2AYAkFKXKX3ztEWe6p6THAoouXGjUYYM1j5YyPEn2saszgX2EWK2cMsGhk/KHCwb/CTYtjJfFRopVDjRj8K8yh9m4pMr0c67bBAGsG/QZXCGlmrPA++FcY9ZwyyJr5Hg462tZNA/GDLK960dCmvhNYMxhk2cNBR7cK7wJrBoOs3QANneobgZU/yLKHg6aWdU1gxQ+ynALT1qquCKz0jTMao/T1WlcE1l121ZbGKI291CWBdZ/XrqN3A3daW9UFgZX90KqBO7091wWBFb0jy8Cd7g51TmAld0g13OlvXWcEVnCHVMOdABe3oAVW8Ojdon4S7OqLwModvdtzRoZjfRJYsaN3K2UIcfZTKLBSR+8OCImxrf8EVmjr3QEhQTb1QWBljt4dEJJk8VTvBFbm6N1DSETZ1juBFblwxpsThNnUG4GVuHBGoYE0Hz+FAivwsNCNZ/Js6x+B9VPbmiqP0pNoWX8JrLjDwpVCA4nefgoFVtph4d5KZDKdqkpgPWCxrslRwCLWskpgPWRyNwufrHAn1mJfAivqsFBekexUAivqZqGCO9GWAutRpwkdFtrYR7bFXmDlPGXvSS/SnQRWTL1BXpHPNY6Uu9AuPDMDatEhd6HlFdCl3iCvgC71BnkFdLkLbd4OdKk3yCugS71BXgFd6g367UCTeoP7zsAPHeoe9l8BU7CrX7WyXxRoUm9Yu6gA/GHvDnMThmEwgNZpF9LQUrj/ZfdvmmBMDEabSu8dIkrsz85O4g3VeQW8ZhjjPv+lAk3pa9whzgA0J8ePxBmABs3xZqP2ILCTVe/2LgI7aRYm04NA1+1iFvog3Q503S6ahZ6DwJe2FycnaQbgLY4p/lnVHQS+abj07noFXGl2TsfsIHCrydS76xVwq8lCViquV8D7fRwU24HdyPGa0aQzsJrpFM8bFa+ANfUlnnS+dADrGmo8oZobBLYwLKf4k1NRagc2M9UUD0rZWxDYVj8/cmalOotdAS2Yyhi/OBcpBqAh/WXJY4or6ZwXhxXQpGE6znMpOZdlmY+TVyAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPDJHhwIAAAAAAD5vzaCqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqwBwcCAAAAAED+r42gqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqirswYEAAAAAAJD/ayOoqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqkp7cCAAAAAAIMjfepArAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgKcAnTNeiLeG1rEAAAAASUVORK5CYII=';
-
 /**
  * Adds drag and drop functionality to an element.
  */
@@ -2700,9 +2459,9 @@ class DragDropDirective {
         }
     }
 }
-DragDropDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: DragDropDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-DragDropDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.1", type: DragDropDirective, selector: "[dragDrop]", outputs: { files: "files" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: DragDropDirective, decorators: [{
+DragDropDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: DragDropDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+DragDropDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.3", type: DragDropDirective, selector: "[dragDrop]", outputs: { files: "files" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: DragDropDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dragDrop]'
@@ -2831,6 +2590,9 @@ class FileInputComponent {
     }
     removeFile(name) {
         var _a, _b;
+        if (this.isReadOnly) {
+            return;
+        }
         if (this.metadata.multiple) {
             (_a = this.filenames) === null || _a === void 0 ? void 0 : _a.splice(this.filenames.indexOf(name), 1);
             if (!((_b = this.filenames) === null || _b === void 0 ? void 0 : _b.length)) {
@@ -2879,16 +2641,17 @@ class FileInputComponent {
     downloadAll() {
         return __awaiter(this, void 0, void 0, function* () {
             if (this.propertyValue.length) {
-                void FileUtilities.downloadMultipleFiles(this.metadata.displayName, this.propertyValue);
+                // eslint-disable-next-line max-len
+                void FileUtilities.downloadMultipleFiles(this.metadata.displayName, LodashUtilities.cloneDeep(this.propertyValue));
             }
         });
     }
 }
-FileInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: FileInputComponent, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-FileInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.1", type: FileInputComponent, selector: "file-input", inputs: { propertyValue: "propertyValue", metadata: "metadata", getValidationErrorMessage: "getValidationErrorMessage", isReadOnly: "isReadOnly" }, outputs: { fileDataChangeEvent: "fileDataChangeEvent" }, ngImport: i0, template: "<input #fileInput\n    type=\"file\" hidden\n    [multiple]=\"metadata.multiple\"\n    [accept]=\"FileUtilities.getAcceptString(metadata.allowedMimeTypes)\"\n    (change)=\"setFileFromInput($event)\"\n>\n\n<mat-form-field floatLabel=\"always\">\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-chip-list #chipList\n        [(ngModel)]=\"filenames\"\n        name=\"file\"\n        #model=\"ngModel\"\n        [required]=\"metadata.required\"\n        [disabled]=\"isReadOnly\"\n    >\n        <mat-chip *ngFor=\"let name of filenames\" (removed)=\"removeFile(name)\">\n            {{name}}\n            <button type=\"button\" class=\"mat-chip-remove mat-chip-trailing-icon ngx-mat-grey\" (click)=\"downloadFile(name)\">\n                <i class=\"fas fa-download\"></i>\n            </button>\n            <button type=\"button\" matChipRemove (click)=\"chipList._markAsTouched()\">\n                <i class=\"{{metadata.deleteIcon}}\"></i>\n            </button>\n        </mat-chip>\n        <mat-chip class=\"download-all-button\" *ngIf=\"downloadAllEnabled()\" (click)=\"downloadAll()\">\n            {{metadata.downloadAllButtonLabel}}\n            <span class=\"mat-chip-remove mat-chip-trailing-icon ngx-mat-grey\">\n                <i class=\"fas fa-file-zipper\"></i>\n            </span>\n        </mat-chip>\n        <input [matChipInputFor]=\"chipList\" [readonly]=\"true\" hidden>\n    </mat-chip-list>\n    <button type=\"button\" class=\"ngx-mat-grey\" mat-icon-button matSuffix [disabled]=\"isReadOnly\" (click)=\"fileInput.click()\">\n        <i class=\"fas fa-upload\"></i>\n    </button>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>\n\n<div *ngIf=\"metadata.dragAndDrop && !isReadOnly\" class=\"drag-drop\" dragDrop (files)=\"setFile($event)\">\n    <button type=\"button\" mat-icon-button [disabled]=\"isReadOnly\" (click)=\"fileInput.click()\">\n        <i class=\"fas fa-file-arrow-up ngx-mat-grey\"></i>\n    </button>\n</div>", styles: ["mat-form-field{width:100%}.mat-form-field-disabled .mat-chip.mat-standard-chip.mat-chip-disabled button.ngx-mat-grey{opacity:1;color:#0000008a}.mat-standard-chip.mat-chip-disabled .mat-chip-trailing-icon.ngx-mat-grey:hover{cursor:pointer}.mat-chip.mat-standard-chip .mat-chip-remove.ngx-mat-grey,.ngx-mat-grey{opacity:1;color:#0000008a}.download-all-button i{vertical-align:middle}.mat-standard-chip.download-all-button:hover{cursor:pointer}.drag-drop{display:flex;align-items:center;justify-content:center;height:200px;border:2px dashed rgba(0,0,0,.54);border-radius:15px;margin-top:5px;margin-bottom:5px}.drag-drop i{font-size:30px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5$2.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i5$2.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i5$2.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i5$2.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: DragDropDirective, selector: "[dragDrop]", outputs: ["files"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: FileInputComponent, decorators: [{
+FileInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: FileInputComponent, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+FileInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: FileInputComponent, selector: "file-input", inputs: { propertyValue: "propertyValue", metadata: "metadata", getValidationErrorMessage: "getValidationErrorMessage", isReadOnly: "isReadOnly" }, outputs: { fileDataChangeEvent: "fileDataChangeEvent" }, ngImport: i0, template: "<input #fileInput\n    type=\"file\" hidden\n    [multiple]=\"metadata.multiple\"\n    [accept]=\"FileUtilities.getAcceptString(metadata.allowedMimeTypes)\"\n    (change)=\"setFileFromInput($event)\"\n>\n\n<mat-form-field floatLabel=\"always\">\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-chip-grid #chipGrid\n        [(ngModel)]=\"filenames\" name=\"file\" #model=\"ngModel\"\n        [required]=\"metadata.required\"\n    >\n        <mat-chip-row *ngFor=\"let name of filenames\" (removed)=\"removeFile(name)\">\n            {{name}}\n            <span class=\"mat-mdc-chip-remove mat-mdc-chip-trailing-icon ngx-mat-grey\" (click)=\"downloadFile(name)\">\n                <i class=\"fas fa-download\"></i>\n            </span>\n            <button *ngIf=\"!isReadOnly\" type=\"button\" matChipRemove>\n                <i class=\"{{metadata.deleteIcon}}\"></i>\n            </button>\n        </mat-chip-row>\n        <input [matChipInputFor]=\"chipGrid\" [readonly]=\"true\" hidden>\n    </mat-chip-grid>\n    <button *ngIf=\"downloadAllEnabled()\" type=\"button\" class=\"ngx-mat-grey\" mat-icon-button matSuffix (click)=\"downloadAll()\">\n        <i class=\"fas fa-file-zipper\"></i>\n    </button>\n    <button type=\"button\" class=\"ngx-mat-grey\" mat-icon-button matSuffix [disabled]=\"isReadOnly\" (click)=\"fileInput.click()\">\n        <i class=\"fas fa-upload\"></i>\n    </button>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>\n\n<div *ngIf=\"metadata.dragAndDrop && !isReadOnly\" class=\"drag-drop\" dragDrop (files)=\"setFile($event)\">\n    <button type=\"button\" mat-icon-button [disabled]=\"isReadOnly\" (click)=\"fileInput.click()\">\n        <i class=\"fas fa-file-arrow-up ngx-mat-grey\"></i>\n    </button>\n</div>", styles: ["mat-form-field{width:100%}.ngx-mat-grey{opacity:1;color:#0000008a}.drag-drop{display:flex;align-items:center;justify-content:center;height:200px;border:2px dashed rgba(0,0,0,.54);border-radius:15px;margin-top:5px;margin-bottom:5px}.drag-drop i{font-size:30px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5$3.MatChipGrid, selector: "mat-chip-grid", inputs: ["tabIndex", "disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i5$3.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i5$3.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i5$3.MatChipRow, selector: "mat-chip-row, mat-basic-chip-row", inputs: ["color", "disabled", "disableRipple", "tabIndex", "editable"], outputs: ["edited"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: DragDropDirective, selector: "[dragDrop]", outputs: ["files"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: FileInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'file-input', template: "<input #fileInput\n    type=\"file\" hidden\n    [multiple]=\"metadata.multiple\"\n    [accept]=\"FileUtilities.getAcceptString(metadata.allowedMimeTypes)\"\n    (change)=\"setFileFromInput($event)\"\n>\n\n<mat-form-field floatLabel=\"always\">\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-chip-list #chipList\n        [(ngModel)]=\"filenames\"\n        name=\"file\"\n        #model=\"ngModel\"\n        [required]=\"metadata.required\"\n        [disabled]=\"isReadOnly\"\n    >\n        <mat-chip *ngFor=\"let name of filenames\" (removed)=\"removeFile(name)\">\n            {{name}}\n            <button type=\"button\" class=\"mat-chip-remove mat-chip-trailing-icon ngx-mat-grey\" (click)=\"downloadFile(name)\">\n                <i class=\"fas fa-download\"></i>\n            </button>\n            <button type=\"button\" matChipRemove (click)=\"chipList._markAsTouched()\">\n                <i class=\"{{metadata.deleteIcon}}\"></i>\n            </button>\n        </mat-chip>\n        <mat-chip class=\"download-all-button\" *ngIf=\"downloadAllEnabled()\" (click)=\"downloadAll()\">\n            {{metadata.downloadAllButtonLabel}}\n            <span class=\"mat-chip-remove mat-chip-trailing-icon ngx-mat-grey\">\n                <i class=\"fas fa-file-zipper\"></i>\n            </span>\n        </mat-chip>\n        <input [matChipInputFor]=\"chipList\" [readonly]=\"true\" hidden>\n    </mat-chip-list>\n    <button type=\"button\" class=\"ngx-mat-grey\" mat-icon-button matSuffix [disabled]=\"isReadOnly\" (click)=\"fileInput.click()\">\n        <i class=\"fas fa-upload\"></i>\n    </button>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>\n\n<div *ngIf=\"metadata.dragAndDrop && !isReadOnly\" class=\"drag-drop\" dragDrop (files)=\"setFile($event)\">\n    <button type=\"button\" mat-icon-button [disabled]=\"isReadOnly\" (click)=\"fileInput.click()\">\n        <i class=\"fas fa-file-arrow-up ngx-mat-grey\"></i>\n    </button>\n</div>", styles: ["mat-form-field{width:100%}.mat-form-field-disabled .mat-chip.mat-standard-chip.mat-chip-disabled button.ngx-mat-grey{opacity:1;color:#0000008a}.mat-standard-chip.mat-chip-disabled .mat-chip-trailing-icon.ngx-mat-grey:hover{cursor:pointer}.mat-chip.mat-standard-chip .mat-chip-remove.ngx-mat-grey,.ngx-mat-grey{opacity:1;color:#0000008a}.download-all-button i{vertical-align:middle}.mat-standard-chip.download-all-button:hover{cursor:pointer}.drag-drop{display:flex;align-items:center;justify-content:center;height:200px;border:2px dashed rgba(0,0,0,.54);border-radius:15px;margin-top:5px;margin-bottom:5px}.drag-drop i{font-size:30px}\n"] }]
+            args: [{ selector: 'file-input', template: "<input #fileInput\n    type=\"file\" hidden\n    [multiple]=\"metadata.multiple\"\n    [accept]=\"FileUtilities.getAcceptString(metadata.allowedMimeTypes)\"\n    (change)=\"setFileFromInput($event)\"\n>\n\n<mat-form-field floatLabel=\"always\">\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-chip-grid #chipGrid\n        [(ngModel)]=\"filenames\" name=\"file\" #model=\"ngModel\"\n        [required]=\"metadata.required\"\n    >\n        <mat-chip-row *ngFor=\"let name of filenames\" (removed)=\"removeFile(name)\">\n            {{name}}\n            <span class=\"mat-mdc-chip-remove mat-mdc-chip-trailing-icon ngx-mat-grey\" (click)=\"downloadFile(name)\">\n                <i class=\"fas fa-download\"></i>\n            </span>\n            <button *ngIf=\"!isReadOnly\" type=\"button\" matChipRemove>\n                <i class=\"{{metadata.deleteIcon}}\"></i>\n            </button>\n        </mat-chip-row>\n        <input [matChipInputFor]=\"chipGrid\" [readonly]=\"true\" hidden>\n    </mat-chip-grid>\n    <button *ngIf=\"downloadAllEnabled()\" type=\"button\" class=\"ngx-mat-grey\" mat-icon-button matSuffix (click)=\"downloadAll()\">\n        <i class=\"fas fa-file-zipper\"></i>\n    </button>\n    <button type=\"button\" class=\"ngx-mat-grey\" mat-icon-button matSuffix [disabled]=\"isReadOnly\" (click)=\"fileInput.click()\">\n        <i class=\"fas fa-upload\"></i>\n    </button>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>\n\n<div *ngIf=\"metadata.dragAndDrop && !isReadOnly\" class=\"drag-drop\" dragDrop (files)=\"setFile($event)\">\n    <button type=\"button\" mat-icon-button [disabled]=\"isReadOnly\" (click)=\"fileInput.click()\">\n        <i class=\"fas fa-file-arrow-up ngx-mat-grey\"></i>\n    </button>\n</div>", styles: ["mat-form-field{width:100%}.ngx-mat-grey{opacity:1;color:#0000008a}.drag-drop{display:flex;align-items:center;justify-content:center;height:200px;border:2px dashed rgba(0,0,0,.54);border-radius:15px;margin-top:5px;margin-bottom:5px}.drag-drop i{font-size:30px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.MatDialog }]; }, propDecorators: { propertyValue: [{
                 type: Input
             }], metadata: [{
@@ -2901,6 +2664,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
                 type: Output
             }] } });
 
+class FileDefaultInputComponent extends NgxMatEntityBaseInputComponent {
+    constructor() {
+        super(...arguments);
+        this.FileUtilities = FileUtilities;
+    }
+    refreshFileData(fileData) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.propertyValue = fileData;
+            this.emitChange();
+        });
+    }
+}
+FileDefaultInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: FileDefaultInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+FileDefaultInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: FileDefaultInputComponent, selector: "file-default-input", usesInheritance: true, ngImport: i0, template: "<div [class.file-input]=\"metadata.dragAndDrop\" [class.mat-elevation-z8]=\"metadata.dragAndDrop\">\n    <file-input\n        (fileDataChangeEvent)=\"refreshFileData($event)\"\n        [propertyValue]=\"propertyValue\"\n        [metadata]=\"metadata\"\n        [getValidationErrorMessage]=\"getValidationErrorMessage\"\n        [isReadOnly]=\"isReadOnly\"\n    >\n    </file-input>\n</div>", styles: [".file-input{margin-top:15px;margin-bottom:15px;padding:15px;border-radius:5px}\n"], dependencies: [{ kind: "component", type: FileInputComponent, selector: "file-input", inputs: ["propertyValue", "metadata", "getValidationErrorMessage", "isReadOnly"], outputs: ["fileDataChangeEvent"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: FileDefaultInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'file-default-input', template: "<div [class.file-input]=\"metadata.dragAndDrop\" [class.mat-elevation-z8]=\"metadata.dragAndDrop\">\n    <file-input\n        (fileDataChangeEvent)=\"refreshFileData($event)\"\n        [propertyValue]=\"propertyValue\"\n        [metadata]=\"metadata\"\n        [getValidationErrorMessage]=\"getValidationErrorMessage\"\n        [isReadOnly]=\"isReadOnly\"\n    >\n    </file-input>\n</div>", styles: [".file-input{margin-top:15px;margin-bottom:15px;padding:15px;border-radius:5px}\n"] }]
+        }] });
+
+// eslint-disable-next-line max-len
+const placeholder = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAAAAMgCAMAAAAEPmswAAAANlBMVEXx8/XCy9LFztXu8PPs7/Lp7e/W3OHL0tnZ3+PN1NrS2d7i5urn6u7f5OjI0Nfc4ebP1tzk6excnoRZAAAXh0lEQVR42uzUAQ0AAAzDoN+/6eloAiK4B4gQFpAhLCBDWECGsIAMYQEZwgIyhAVkCAvIEBaQISwgQ1hAhrCADGEBGcICMoQFZAgLyBAWkCEsIENYQIawgAxhARnCAjKEBWQIC8gQFpAhLCBDWECGsIAMYQEZwgIyhAVkCAvIEBaQISwgQ1hAhrCADGEBGcICMoQFZAgLyBAWkCEsIENYQIawgAxhARnCAjKEBWQIC8gQFpAhLGDs1AEJAAAAgKD/r9sR6Ag3hAVsCAvYEBawISxgQ1jAhrCADWEBG8ICNoQFbAgL2BAWsCEsYENYwIawgA1hARvCAjaEBWwIC9gQFrAhLGBDWMCGsIANYQEbwgI2hAVsCAvYEBawISxgQ1jAhrCADWEBG8ICNoQFbAgL2BAWsCEsYENYwIawgA1hARvCAjaEBWwIC9gQFrAhLGBDWMCGsIANYQEbwgI2hAVsCAvYEBbETh2QAAAAAAj6/7odgY6QDWEBG8ICNoQFbAgL2BAWsCEsYENYwIawgA1hARvCAjaEBWwIC9gQFrAhLGBDWMCGsIANYQEbwgI2hAVsCAvYEBawISxgQ1jAhrCADWEBG8ICNoQFbAgL2BAWsCEsYENYwIawgA1hARvCAjaEBWwIC9gQFrAhLGBDWMCGsIANYQEbwgI2hAVsCAvYEBawISxgQ1jAhrCADWEBG8ICNoRF7NQBCQAAAICg/6/bEegIYUNYwIawgA1hARvCAjaEBWwIC9gQFrAhLGBDWMCGsIANYQEbwgI2hAVsCAvYEBawISxgQ1jAhrCADWEBG8ICNoQFbAgL2BAWsCEsYENYwIawgA1hARvCAjaEBWwIC9gQFrAhLGBDWMCGsIANYQEbwgI2hAVsCAvYEBawISxgQ1jAhrCADWEBG8ICNoQFbAgL2BAWsCEsYENYwIawgA1hxc6dJtcKAgEURgREwGn/m32Vd1Op/Ih3cO72fIs4BU0rADEIFgAxCBYAMQgWADEIFgAxCBbwm+3bFOKQ8zSV4r13zvky5a4bYgxjYyuch2ABD7ZJMRdnXnIlDyE1FY5HsADbhmFy5lM+x7GvcCSChXtrQufNCnXpQlvhIAQLt2XHONVmE2VIzLaOQLBwT230ZlsuBy6IeyNYuB+bOmd24TpOWrsiWLiZJhazKz8w09oNwcKd9NGbA9SZg9Y+CBZuw4ZijlMiE63tESzcg02TOZqnWVsjWLiDpqvNKXxkI35LBAv6pWJO5APzrM0QLChnozNnm5jBb4RgQbU2m0uoO3YdtkCwoFjy5jp85Ji1GsGCWpfK1X95rLAKwYJS4XK54pi1HsGCSuH8SfucjkWH5QgWFLpwrr6UVGEZggV10rVz9cVxM1yGYEGZthgJ6oHPdhYgWFClv8jeFcOsfRAsKGIHI8rENumHCBb0iLWRhvn7ZwgWtGgvuXj1kidZHyBY0MF2RiqS9T6CBRWCvNsgyVqAYEGBRsYqA8lajWBBPGlvg38rvBi+gWBBuvb6i+3vmdjLeolgQTYdx6tvme33FwgWRBO6yzBr4BvDpwgWJNN0vHqo+Sz6GYIFuRplx6sHx4PhPIIFsaJRigfDWQQLQvXid6+Yvn+OYEGmUfRq+2uMsv5EsCCSvmk7o6x3ECwIpPo6yCLpEwQL8iTl10G2smYRLIij/zrIvXAOwYIwvcrlq1kT74W/ESzIMmr51Plddazwg2BBlGDux7NH+oNgQRK5/0Fm+L4JgvWPvbvRSRiGAjBaBoqK+PP+L2s0xGSj3QiQ9I57zkN86brblvVItn1l8/2cYLEar1mmGWoOFlm/BIu1yLh9ZZE1IVisRNLtK4usEcFiFYbvwtYiS7BYg7zb7WPfFlmCRXj7bNOiFlkNgkV8j373lZ2siwkW4SX/PTi1+9pkJljEluhyhgsdMy+yBIvQDoWpXeLThYJFYMYZ6vJe4SBYxDWkuAv5Gu9Z78kSLMIajF8ZcBgRLOL6MH5l731MsAhrb/zK3vuEYBFV6ttk7L3XCRZBvRUcLpwSLGLSK3PvFYJFSHrls7BGsIhIr3wWVgkWATnu7G9hnWARj175LGwQLMLRK5+FLYJFNHp1jd1+k4NgEYpeXel5k4JgEYleXe24yUCwCESvXDkzR7CIxPzVTbYJxt4FizD0ynzDPMEiDr3yCtgCwSKMr8Ltnh58I0uwiOG1cA/bxz6oI1iE4L4+E1nLBIsY3IdsIusCgkUI3pu4q/fH3XoXLPob9OqXo4VLBIsAvD944tnCBYJFAN53PjFDukCw6O9Q+GPrfYlg0d2x8M+tfrMEi94+CyOm3tsEi65cKDNl6n2OYNGTA89Vpt5bBIuOHCCs8rOwSbDoaW9gtMbPwhbBohsD7k1+FjYIFv0MBkbb/CysESx6MTA6z8nCCsGiEwNYS7xOcU6w6OWlsMB4ww9794LdJgyEUXgwAsfFL/a/2Z4+T2zjWCMgnl/cbwttbxppNNwjWHgLBrByMN5wj2Ct4HztL+OxS621qTuOp/5a06HnItgw+v0uTRUI1qL2/dDao3b8qO+RRDkGGt5haGpAsJZzPbX2XDvUc/I5ExuwsrE4+QbBWsz+I9kr6VLR/XI5Nsq8SVdBsQjWIg6D5Rn5bxYbGpwYyPqPYC3iMFq+4+aTxSeevdg38xfBWsB5MJ+j/s+5Oc5cEDoxQvoPwZrvozW3SwWHCWX4RM67iX9Oh2DNc+isRFL/QVduNBRg6P0XgjVTv/nJYx9eEAYgXSyCNcNu2PpUjBMXhCEo/7AkWKVm78tM8jc2XqxEDkL4mQ7BKnZot35j48QFYRi6z3QIVqlru/kbGx8uCAORLRbBKvSD808nVoxGorrpnWCVuTIV48TKvlhEL30IVoEl1zlt5xyLlX2xaBaLYJU4J153+bCyLx7J5Q0Ey23hw+Ok+NfGiwP3iBSLRbAKDLaksdkCDtwDSnrLuwmWX29mDB57MOEelF6xCJbTGocx9R9jMeEelNxKP4Ll1tlvHGPl4psTgbVixSJYXr39wS+FuVgpE5lYsQiW0661FcgdJTiwUiY2rd8KCZbTyf7ipjAPO9yjk/o/FsHy2dstBt5fYEVDfErFIlg+g63j2FSLidHwhJ5bECyXs33GaMNLfDRVgk6xCJbLyT7jFOsVJkZFyBSLYHnsbD1C5wgOe4MElWIRLI/e7rFn+ws8eRYiUiyC5dHZelJTIZ4869C4KyRYDnu7x2TDF9gxqkWiWATL4WJrOjW14cmzFoViESyHZGtqm8rw5FmNwCsdgpXvbI8YxXqGJ8+C4heLYOXr7RE7G57gAEtS+I1+BCvfyaYwOzqFAyxR0YtFsPIle8Qh1iQOsGQFLxbByrazCQy7T2ICS1fsb+kQrGwHe4rPQN/iCaGy0MUiWNl6m8Kp+yN2YGmL/E1ogpXtYtMYHb3HDixxgYtFsLIN9gRb/G6xxF1e3AtrgpXtaM/w/vkzlrhXYGiCIljZOntAsKbsOMDSF7VYBCtbsrVV8ofBk5waBD1QreTfyPoIVh6e5NQi5kbJOv6NfAtbX9zLmVw8yanHT/buBDt1GIbCsJwRCOP+N/t62vNaphLbSZEs/98O2gOXyJFkk102BFYkAisGIzmeDMEeAitaK09REl5hJMcVg6MXHr4jb8EZVgRGcpyxl1gOviPv0stzrGv4MdLR4Iu5pZIEViQaR+cxkuOOucu/CKxIjObMYiTHIWsXUxBY0TbynPtevUiM5LhkbKEfgRWJ9TIz6GhwytZ6LAIrEgv8ZtDR4JWpZTMEViRWJM/ZCXyytGyGwIrFJRSvsGTUM0OHqwRWLK75eoUdDa7ZGYQmsOLt5CnO3EOgxd05M59NAisWV9W/MgpcszIITWAl6OUeR1ifaHH37xxMILASnOSBz5NNY/8ZGGBkSIfASjDKDZ8/YelY2lcFG0M6BFaKXh4w+UyLeyU6Cw2kBFaKQW75fHOc7CCogYUhHQIrRSN3aHMPtLjXw0CnIIGV5CT3vN8DN4eCsCb6L4YIrCRHuUYTVgi0uFdFvYGUwEpzkP/cPWxnocW9MkPQRGClGuUKPQ1sca/OOSgisJId5BsnWB/2gqqoNpASWMmaVv6ArTW00biXvkLtMaghsNIN8snXUWYeZp6rpNiORWBl2Mva+lAqZp5rtA9aCKxk36s1aWlg5rlWU1BCYOXYyQcKQmae63UKOgisLAcRoQWLgrBiQ1BBYGVpem8z8BkoCKt2DhoIrDzHztmWoXQUhHXT+dwSWJnGtvoDd2ae66ZSGRBYubbVX/ZMQVg5jXYsAivbueyzSyN/Pwo2hbcjsPJt25qfrygIodDcQGAtMHZlj5EuwFZkqBQIBNYSx16W6Ip9P0hBCJ3mBgJrkeYg+S7F9l9REEKpuYHAWmiobx4nBApCKDU3EFhLjb3k6As+vuKaHGhtbiCwlhvayh6vKAihdZEOgbWCZpI0l2L3i36ZBFD59SWwVjFOKXFVdDUYKAih101IYK0iIbKm0uMqNFyTA615WAJrNcdNL3O6TcGtV18oCKH4qpDAWtP21MnvukOxdw/+oCCE5qtCAmtlx2Hq5FE7DQ6erUKgIITqHDSB9Qea7XCaLvu+a7u+30+nYVtwT/stCkKovioksJCAgvAfe3eU6ygMBFG0GhtCSAxh/5udUWby8Z4COGCgI92ziJLLuBuc+6mQwEI+nozi9KlCAgu5KIQ4/VMhgYVMFEKc/6mQwEIeCiEcTBUSWMhDIYSDBaQEFrJQCOFhASmBhRwUQiwLve2LwEIetozCxb8KCSxk4LcT8DGjQ2BhGYUQTmZ0CCwsoxDCyYwOgYVFFEJ4mdEhsLCEQgg3MzoEFpZQCPGJ0XZDYGERhRCfGWwvBBaWUAjh6OKdwMI8CiE+drF9EFhYQCGEp4t3AgtzKIRwdfFOYGEOhRCuLt4JLMy6CvBz8U5gYU5VC/Dz4p3AwpxBgKNVMwQWJlEI4W3VDIGFGRRC+Fo1Q2BhCoUQ7na8E1iYdBHga8c7gYUJFEL4u3gnsDClFeDs4p3AwjsUQrj8uarsCP21a4Z0G+sYQwiSQoixvo9paJvHpTI4RCFEAVcrSrar/tEMY9SCeL+1zaM3OEIhhMPFDbK9VF07Bn2kTs2V45YPFEJ4XNwg20PfpKgJOallONtdgL/FDbLSqi7V2qpOHUetU1AI8eR0cYOsqKq7BRVybzlpHY5CiH+cvh+VlVN1o8oKt4ar+CNRCPHi8/2orJRrCtpDTA/DISiE2EeyUmRFVG3UfgKZdQAKIX7y+H5UVkA/BP1GZn0vCiGeHP74S7bZJek9Mus7NQL+8vh+VLZRlXSckC6GnfUCnhyOQcu2aYOOVTc80CqOQoj33O0flW3RRR0vJN5nlUUhxAR3Y9Cy9aqb8nHM+g59EPDi7hpLtloXdCKOWYVQCDHP1Ri0LJOf49VL3Rm2ohBiga9rLFkeX8er/yLNcBsKIXI4+o2ObAU//38KA7OGJY0CfvM0Bi1bofd00cHTrLUohDja3TaSfe4R5crIC/gVKIR/2Lvb5NRhGArD54RvCC3sf7N3Op07UyhJ7PQHsvU+W4BxIvlIQbkw2/zkMrFH+em/V6MgRKlIbSy50hDzX82RVYeCEMUitbHkOh9hP/60ozAsRkGIGoHaWHKVQ7D21YORI6sCkVGUC9PGkqcFTV9xZP0RBSGqRWljyb+1/J/myKrAllG8w2bwavKEwGnReXdyWXMoCPF2o1eTi719eLDUlYGdOa1kVdCvo9eSH/RwXkmbI0fWSxSEiOHmleRnTcWvpmz3RoWwYRX0afVuLLnI0FyLg1jWMwpCxHH3OnKJocUn8Ej3/QcKQoRy9Cryt/7OK7rvDygIEcvJa8hf+jyvaGX91HpcBZ1Z18aS7W7PK0kjq9+XnAS8wcUryO75vKIutE1BiJD2rifb7ut+8NmGupCCEBEdXE3dn1eSdtSFFISIZze4lvxf10soqQsnDJH3BaF3V9dSivNK2rKR9KWrgPc5u5LcyfzgogsfBPvtJuB96hcmK08/luY7BSGi2bmOMk2YMazT8Rs02vTpKvKks/pzNPr+hdGam2soWXuDhAOfyUEodSM68oRTr//mTxIOvV0Bo2l3V5BfO/R6XvGS1dAnRZDC3uWU8fro02AJFsI4uJhSfkNlx3UhM88Io2JER0nzz+mvC/vK2KFtV5dSigAWL1nMPCOyswspbzwn80tW3z1KNKd4REeJH75j3ulCIu6IZXQZ+dlHnofvJusKhyTv0GjI0UXU20bkOpeUKVIi7ojn5BJKXixsM6ZIOw+toEllIzpKeEGYPUWa7zdGC64uIJob2XrvaS5V0JizlynLBCGb/Ug0ILbN4EXK23BP2ntP1qREQ+5eJPaNfNmmyb2zowFx7b1ENGO/JSkLcxb9aMXBC5S74Z6uLMxa9KMNOy8Qz95MkSx2NCC2q+cpfcM90zh0n3v60ZObZ4nLox/ufZeFQ/aXaMS3EHgXl0d5ysK8t8Box8VzRPo5zW1h6ltgNGPvGSL9nOW2kAYWmjC7zE80sJIsT+ahhEaMniZqhSR7/f6xdy+4iQNBEEDdQYEA4Xf/y+5ukk2AYAkFKXKX3ztEWe6p6THAoouXGjUYYM1j5YyPEn2saszgX2EWK2cMsGhk/KHCwb/CTYtjJfFRopVDjRj8K8yh9m4pMr0c67bBAGsG/QZXCGlmrPA++FcY9ZwyyJr5Hg462tZNA/GDLK960dCmvhNYMxhk2cNBR7cK7wJrBoOs3QANneobgZU/yLKHg6aWdU1gxQ+ynALT1qquCKz0jTMao/T1WlcE1l121ZbGKI291CWBdZ/XrqN3A3daW9UFgZX90KqBO7091wWBFb0jy8Cd7g51TmAld0g13OlvXWcEVnCHVMOdABe3oAVW8Ojdon4S7OqLwModvdtzRoZjfRJYsaN3K2UIcfZTKLBSR+8OCImxrf8EVmjr3QEhQTb1QWBljt4dEJJk8VTvBFbm6N1DSETZ1juBFblwxpsThNnUG4GVuHBGoYE0Hz+FAivwsNCNZ/Js6x+B9VPbmiqP0pNoWX8JrLjDwpVCA4nefgoFVtph4d5KZDKdqkpgPWCxrslRwCLWskpgPWRyNwufrHAn1mJfAivqsFBekexUAivqZqGCO9GWAutRpwkdFtrYR7bFXmDlPGXvSS/SnQRWTL1BXpHPNY6Uu9AuPDMDatEhd6HlFdCl3iCvgC71BnkFdLkLbd4OdKk3yCugS71BXgFd6g367UCTeoP7zsAPHeoe9l8BU7CrX7WyXxRoUm9Yu6gA/GHvDnMThmEwgNZpF9LQUrj/ZfdvmmBMDEabSu8dIkrsz85O4g3VeQW8ZhjjPv+lAk3pa9whzgA0J8ePxBmABs3xZqP2ILCTVe/2LgI7aRYm04NA1+1iFvog3Q503S6ahZ6DwJe2FycnaQbgLY4p/lnVHQS+abj07noFXGl2TsfsIHCrydS76xVwq8lCViquV8D7fRwU24HdyPGa0aQzsJrpFM8bFa+ANfUlnnS+dADrGmo8oZobBLYwLKf4k1NRagc2M9UUD0rZWxDYVj8/cmalOotdAS2Yyhi/OBcpBqAh/WXJY4or6ZwXhxXQpGE6znMpOZdlmY+TVyAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPDJHhwIAAAAAAD5vzaCqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqwBwcCAAAAAED+r42gqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqirswYEAAAAAAJD/ayOoqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqkp7cCAAAAAAIMjfepArAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgKcAnTNeiLeG1rEAAAAASUVORK5CYII=';
+
 class FileImageInputComponent extends NgxMatEntityBaseInputComponent {
     constructor() {
         super(...arguments);
@@ -2982,54 +2767,309 @@ class FileImageInputComponent extends NgxMatEntityBaseInputComponent {
         });
     }
 }
-FileImageInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: FileImageInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-FileImageInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.1", type: FileImageInputComponent, selector: "file-image-input", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"!metadata.dragAndDrop && !metadata.preview\">\n    <file-input\n        (fileDataChangeEvent)=\"refreshFileData($event)\"\n        [propertyValue]=\"propertyValue\"\n        [metadata]=\"metadata\"\n        [getValidationErrorMessage]=\"getValidationErrorMessage\"\n        [isReadOnly]=\"isReadOnly\"\n    >\n    </file-input>\n</div>\n\n<div *ngIf=\"metadata.dragAndDrop || metadata.preview\" class=\"file-input mat-elevation-z8\">\n    <file-input\n        (fileDataChangeEvent)=\"refreshFileData($event)\"\n        [propertyValue]=\"propertyValue\"\n        [metadata]=\"metadata\"\n        [getValidationErrorMessage]=\"getValidationErrorMessage\"\n        [isReadOnly]=\"isReadOnly\"\n    >\n    </file-input>\n\n    <div class=\"image-preview\" *ngIf=\"metadata.preview && metadata.multiple\">\n        <i (click)=\"prev()\" [class.disabled]=\"imageIndex === 0\" class=\"prev-button fa-solid fa-angle-left\"></i>\n        <img *ngIf=\"multiPreviewImages?.[imageIndex]\" class=\"mat-elevation-z2\" [src]=\"multiPreviewImages?.[imageIndex]\">\n        <img *ngIf=\"!multiPreviewImages?.[imageIndex]\" class=\"mat-elevation-z2\" [src]=\"metadata.previewPlaceholderUrl ?? placeHolder\">\n        <i (click)=\"next()\"\n            [class.disabled]=\"!multiPreviewImages || !multiPreviewImages.length || imageIndex === (multiPreviewImages.length - 1)\"\n            class=\"next-button fa-solid fa-angle-right\"\n        >\n        </i>\n    </div>\n    <div class=\"preview-nav\" *ngIf=\"metadata.preview && metadata.multiple\">\n        <button type=\"button\" (click)=\"setIndex(imageIndex-4)\" mat-icon-button *ngIf=\"\n            this.multiPreviewImages\n            && multiPreviewImages[imageIndex-4]\n            && imageIndex === (this.multiPreviewImages.length - 1)\"\n        >\n            <span class=\"dot\"></span>\n            <span class=\"image-index\">{{imageIndex - 3}}</span>\n        </button>\n        <!-- eslint-disable-next-line @angular-eslint/template/conditional-complexity -->\n        <button type=\"button\" (click)=\"setIndex(imageIndex-3)\" mat-icon-button *ngIf=\"this.multiPreviewImages\n            && multiPreviewImages[imageIndex-3]\n            && (\n                imageIndex === (this.multiPreviewImages.length - 2)\n                || imageIndex === (this.multiPreviewImages.length - 1)\n            )\"\n        >\n            <span class=\"dot\"></span>\n            <span class=\"image-index\">{{imageIndex - 2}}</span>\n        </button>\n        <button type=\"button\" (click)=\"setIndex(imageIndex-2)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex-2]\">\n            <span class=\"dot\"></span>\n            <span class=\"image-index\">{{imageIndex - 1}}</span>\n        </button>\n        <button type=\"button\" (click)=\"setIndex(imageIndex-1)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex-1]\">\n            <i class=\"dot\"></i>\n            <span class=\"image-index\">{{imageIndex}}</span>\n        </button>\n        <button type=\"button\" mat-icon-button disabled>\n            <i class=\"dot selected\"></i>\n            <span class=\"image-index\">{{imageIndex + 1}}</span>\n        </button>\n        <button type=\"button\" (click)=\"setIndex(imageIndex+1)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex+1]\">\n            <span class=\"dot\"></span>\n            <span class=\"image-index\">{{imageIndex + 2}}</span>\n        </button>\n        <button type=\"button\" (click)=\"setIndex(imageIndex+2)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex+2]\">\n            <span class=\"dot\"></span>\n            <span class=\"image-index\">{{imageIndex + 3}}</span>\n        </button>\n        <button type=\"button\" (click)=\"setIndex(imageIndex+3)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex+3] && imageIndex <= 1\">\n            <span class=\"dot\"></span>\n            <span class=\"image-index\">{{imageIndex + 4}}</span>\n        </button>\n        <button type=\"button\" (click)=\"setIndex(imageIndex+4)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex+4] && imageIndex === 0\">\n            <span class=\"dot\"></span>\n            <span class=\"image-index\">{{imageIndex + 5}}</span>\n        </button>\n    </div>\n\n    <div class=\"image-preview\" *ngIf=\"metadata.preview && !metadata.multiple\">\n        <i class=\"prev-button disabled fa-solid fa-angle-left\"></i>\n        <img class=\"mat-elevation-z2\" [src]=\"singlePreviewImage ?? metadata.previewPlaceholderUrl ?? placeHolder\">\n        <i class=\"next-button disabled fa-solid fa-angle-right\"></i>\n    </div>\n    <div class=\"preview-nav\" *ngIf=\"metadata.preview && !metadata.multiple\">\n        <button type=\"button\" disabled mat-icon-button>\n            <span class=\"dot selected\"></span>\n            <span class=\"image-index\">1</span>\n        </button>\n    </div>\n</div>", styles: [".file-input{margin-top:15px;margin-bottom:15px;padding:15px;border-radius:5px}.image-preview{height:250px;display:flex;align-items:center;padding-top:15px;padding-bottom:15px}.image-preview .prev-button{font-size:100px;margin-left:5px;color:#0000008a}.image-preview .next-button{font-size:100px;margin-right:5px;color:#0000008a}.image-preview .prev-button:hover,.image-preview .next-button:hover{cursor:pointer;color:#000000b3;transition:all .5s ease}.image-preview .prev-button.disabled,.image-preview .next-button.disabled{color:#00000042}.image-preview .prev-button.disabled:hover,.image-preview .next-button.disabled:hover{color:#00000042;transition:none;cursor:default}.image-preview img{max-width:calc(100% - 100px);max-height:100%;margin-left:auto;margin-right:auto;border-radius:3px}.preview-nav{text-align:center}.preview-nav button{display:inline-block;width:18px;height:18px;margin-left:5px;margin-right:5px}.preview-nav button .dot{height:100%;width:100%;background-color:#00000061;border-radius:50%;display:block}.preview-nav button .dot.selected{background-color:#0000008a}.preview-nav button .image-index{position:absolute;height:100%;width:100%;display:block;top:-11.5px;color:#fff}.preview-nav button:hover .dot{background-color:#0000008a;transition:all .3s ease}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: FileInputComponent, selector: "file-input", inputs: ["propertyValue", "metadata", "getValidationErrorMessage", "isReadOnly"], outputs: ["fileDataChangeEvent"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: FileImageInputComponent, decorators: [{
+FileImageInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: FileImageInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+FileImageInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: FileImageInputComponent, selector: "file-image-input", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"!metadata.dragAndDrop && !metadata.preview\">\n    <file-input\n        (fileDataChangeEvent)=\"refreshFileData($event)\"\n        [propertyValue]=\"propertyValue\"\n        [metadata]=\"metadata\"\n        [getValidationErrorMessage]=\"getValidationErrorMessage\"\n        [isReadOnly]=\"isReadOnly\"\n    >\n    </file-input>\n</div>\n\n<div *ngIf=\"metadata.dragAndDrop || metadata.preview\" class=\"file-input mat-elevation-z8\">\n    <file-input\n        (fileDataChangeEvent)=\"refreshFileData($event)\"\n        [propertyValue]=\"propertyValue\"\n        [metadata]=\"metadata\"\n        [getValidationErrorMessage]=\"getValidationErrorMessage\"\n        [isReadOnly]=\"isReadOnly\"\n    >\n    </file-input>\n\n    <div class=\"image-preview\" *ngIf=\"metadata.preview && metadata.multiple\">\n        <i (click)=\"prev()\" [class.disabled]=\"imageIndex === 0\" class=\"prev-button fa-solid fa-angle-left\"></i>\n        <img *ngIf=\"multiPreviewImages?.[imageIndex]\" class=\"mat-elevation-z2\" [src]=\"multiPreviewImages?.[imageIndex]\">\n        <img *ngIf=\"!multiPreviewImages?.[imageIndex]\" class=\"mat-elevation-z2\" [src]=\"metadata.previewPlaceholderUrl ?? placeHolder\">\n        <i (click)=\"next()\"\n            [class.disabled]=\"!multiPreviewImages || !multiPreviewImages.length || imageIndex === (multiPreviewImages.length - 1)\"\n            class=\"next-button fa-solid fa-angle-right\"\n        >\n        </i>\n    </div>\n    <div class=\"preview-nav\" *ngIf=\"metadata.preview && metadata.multiple\">\n        <button type=\"button\" (click)=\"setIndex(imageIndex-4)\" mat-icon-button *ngIf=\"\n            this.multiPreviewImages\n            && multiPreviewImages[imageIndex-4]\n            && imageIndex === (this.multiPreviewImages.length - 1)\"\n        >\n            <span class=\"dot\"></span>\n            <span class=\"image-index\">{{imageIndex - 3}}</span>\n        </button>\n        <!-- eslint-disable-next-line @angular-eslint/template/conditional-complexity -->\n        <button type=\"button\" (click)=\"setIndex(imageIndex-3)\" mat-icon-button *ngIf=\"this.multiPreviewImages\n            && multiPreviewImages[imageIndex-3]\n            && (\n                imageIndex === (this.multiPreviewImages.length - 2)\n                || imageIndex === (this.multiPreviewImages.length - 1)\n            )\"\n        >\n            <span class=\"dot\"></span>\n            <span class=\"image-index\">{{imageIndex - 2}}</span>\n        </button>\n        <button type=\"button\" (click)=\"setIndex(imageIndex-2)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex-2]\">\n            <span class=\"dot\"></span>\n            <span class=\"image-index\">{{imageIndex - 1}}</span>\n        </button>\n        <button type=\"button\" (click)=\"setIndex(imageIndex-1)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex-1]\">\n            <i class=\"dot\"></i>\n            <span class=\"image-index\">{{imageIndex}}</span>\n        </button>\n        <button type=\"button\" mat-icon-button disabled>\n            <i class=\"dot selected\"></i>\n            <span class=\"image-index\">{{imageIndex + 1}}</span>\n        </button>\n        <button type=\"button\" (click)=\"setIndex(imageIndex+1)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex+1]\">\n            <span class=\"dot\"></span>\n            <span class=\"image-index\">{{imageIndex + 2}}</span>\n        </button>\n        <button type=\"button\" (click)=\"setIndex(imageIndex+2)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex+2]\">\n            <span class=\"dot\"></span>\n            <span class=\"image-index\">{{imageIndex + 3}}</span>\n        </button>\n        <button type=\"button\" (click)=\"setIndex(imageIndex+3)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex+3] && imageIndex <= 1\">\n            <span class=\"dot\"></span>\n            <span class=\"image-index\">{{imageIndex + 4}}</span>\n        </button>\n        <button type=\"button\" (click)=\"setIndex(imageIndex+4)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex+4] && imageIndex === 0\">\n            <span class=\"dot\"></span>\n            <span class=\"image-index\">{{imageIndex + 5}}</span>\n        </button>\n    </div>\n\n    <div class=\"image-preview\" *ngIf=\"metadata.preview && !metadata.multiple\">\n        <i class=\"prev-button disabled fa-solid fa-angle-left\"></i>\n        <img class=\"mat-elevation-z2\" [src]=\"singlePreviewImage ?? metadata.previewPlaceholderUrl ?? placeHolder\">\n        <i class=\"next-button disabled fa-solid fa-angle-right\"></i>\n    </div>\n    <div class=\"preview-nav\" *ngIf=\"metadata.preview && !metadata.multiple\">\n        <button type=\"button\" disabled mat-icon-button>\n            <span class=\"dot selected\"></span>\n            <span class=\"image-index\">1</span>\n        </button>\n    </div>\n</div>", styles: [".file-input{margin-top:15px;margin-bottom:15px;padding:15px;border-radius:5px}.image-preview{height:250px;display:flex;align-items:center;padding-top:15px;padding-bottom:15px}.image-preview .prev-button{font-size:100px;margin-left:5px;color:#0000008a}.image-preview .next-button{font-size:100px;margin-right:5px;color:#0000008a}.image-preview .prev-button:hover,.image-preview .next-button:hover{cursor:pointer;color:#000000b3;transition:all .5s ease}.image-preview .prev-button.disabled,.image-preview .next-button.disabled{color:#00000042}.image-preview .prev-button.disabled:hover,.image-preview .next-button.disabled:hover{color:#00000042;transition:none;cursor:default}.image-preview img{max-width:calc(100% - 100px);max-height:100%;margin-left:auto;margin-right:auto;border-radius:3px}.preview-nav{text-align:center}.preview-nav button{display:inline-block;width:18px;height:18px;margin-left:5px;margin-right:5px}.preview-nav button .dot{height:100%;width:100%;background-color:#00000061;border-radius:50%;display:block}.preview-nav button .dot.selected{background-color:#0000008a}.preview-nav button .image-index{position:absolute;height:100%;width:100%;display:block;top:-11.5px;color:#fff}.preview-nav button:hover .dot{background-color:#0000008a;transition:all .3s ease}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: FileInputComponent, selector: "file-input", inputs: ["propertyValue", "metadata", "getValidationErrorMessage", "isReadOnly"], outputs: ["fileDataChangeEvent"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: FileImageInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'file-image-input', template: "<div *ngIf=\"!metadata.dragAndDrop && !metadata.preview\">\n    <file-input\n        (fileDataChangeEvent)=\"refreshFileData($event)\"\n        [propertyValue]=\"propertyValue\"\n        [metadata]=\"metadata\"\n        [getValidationErrorMessage]=\"getValidationErrorMessage\"\n        [isReadOnly]=\"isReadOnly\"\n    >\n    </file-input>\n</div>\n\n<div *ngIf=\"metadata.dragAndDrop || metadata.preview\" class=\"file-input mat-elevation-z8\">\n    <file-input\n        (fileDataChangeEvent)=\"refreshFileData($event)\"\n        [propertyValue]=\"propertyValue\"\n        [metadata]=\"metadata\"\n        [getValidationErrorMessage]=\"getValidationErrorMessage\"\n        [isReadOnly]=\"isReadOnly\"\n    >\n    </file-input>\n\n    <div class=\"image-preview\" *ngIf=\"metadata.preview && metadata.multiple\">\n        <i (click)=\"prev()\" [class.disabled]=\"imageIndex === 0\" class=\"prev-button fa-solid fa-angle-left\"></i>\n        <img *ngIf=\"multiPreviewImages?.[imageIndex]\" class=\"mat-elevation-z2\" [src]=\"multiPreviewImages?.[imageIndex]\">\n        <img *ngIf=\"!multiPreviewImages?.[imageIndex]\" class=\"mat-elevation-z2\" [src]=\"metadata.previewPlaceholderUrl ?? placeHolder\">\n        <i (click)=\"next()\"\n            [class.disabled]=\"!multiPreviewImages || !multiPreviewImages.length || imageIndex === (multiPreviewImages.length - 1)\"\n            class=\"next-button fa-solid fa-angle-right\"\n        >\n        </i>\n    </div>\n    <div class=\"preview-nav\" *ngIf=\"metadata.preview && metadata.multiple\">\n        <button type=\"button\" (click)=\"setIndex(imageIndex-4)\" mat-icon-button *ngIf=\"\n            this.multiPreviewImages\n            && multiPreviewImages[imageIndex-4]\n            && imageIndex === (this.multiPreviewImages.length - 1)\"\n        >\n            <span class=\"dot\"></span>\n            <span class=\"image-index\">{{imageIndex - 3}}</span>\n        </button>\n        <!-- eslint-disable-next-line @angular-eslint/template/conditional-complexity -->\n        <button type=\"button\" (click)=\"setIndex(imageIndex-3)\" mat-icon-button *ngIf=\"this.multiPreviewImages\n            && multiPreviewImages[imageIndex-3]\n            && (\n                imageIndex === (this.multiPreviewImages.length - 2)\n                || imageIndex === (this.multiPreviewImages.length - 1)\n            )\"\n        >\n            <span class=\"dot\"></span>\n            <span class=\"image-index\">{{imageIndex - 2}}</span>\n        </button>\n        <button type=\"button\" (click)=\"setIndex(imageIndex-2)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex-2]\">\n            <span class=\"dot\"></span>\n            <span class=\"image-index\">{{imageIndex - 1}}</span>\n        </button>\n        <button type=\"button\" (click)=\"setIndex(imageIndex-1)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex-1]\">\n            <i class=\"dot\"></i>\n            <span class=\"image-index\">{{imageIndex}}</span>\n        </button>\n        <button type=\"button\" mat-icon-button disabled>\n            <i class=\"dot selected\"></i>\n            <span class=\"image-index\">{{imageIndex + 1}}</span>\n        </button>\n        <button type=\"button\" (click)=\"setIndex(imageIndex+1)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex+1]\">\n            <span class=\"dot\"></span>\n            <span class=\"image-index\">{{imageIndex + 2}}</span>\n        </button>\n        <button type=\"button\" (click)=\"setIndex(imageIndex+2)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex+2]\">\n            <span class=\"dot\"></span>\n            <span class=\"image-index\">{{imageIndex + 3}}</span>\n        </button>\n        <button type=\"button\" (click)=\"setIndex(imageIndex+3)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex+3] && imageIndex <= 1\">\n            <span class=\"dot\"></span>\n            <span class=\"image-index\">{{imageIndex + 4}}</span>\n        </button>\n        <button type=\"button\" (click)=\"setIndex(imageIndex+4)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex+4] && imageIndex === 0\">\n            <span class=\"dot\"></span>\n            <span class=\"image-index\">{{imageIndex + 5}}</span>\n        </button>\n    </div>\n\n    <div class=\"image-preview\" *ngIf=\"metadata.preview && !metadata.multiple\">\n        <i class=\"prev-button disabled fa-solid fa-angle-left\"></i>\n        <img class=\"mat-elevation-z2\" [src]=\"singlePreviewImage ?? metadata.previewPlaceholderUrl ?? placeHolder\">\n        <i class=\"next-button disabled fa-solid fa-angle-right\"></i>\n    </div>\n    <div class=\"preview-nav\" *ngIf=\"metadata.preview && !metadata.multiple\">\n        <button type=\"button\" disabled mat-icon-button>\n            <span class=\"dot selected\"></span>\n            <span class=\"image-index\">1</span>\n        </button>\n    </div>\n</div>", styles: [".file-input{margin-top:15px;margin-bottom:15px;padding:15px;border-radius:5px}.image-preview{height:250px;display:flex;align-items:center;padding-top:15px;padding-bottom:15px}.image-preview .prev-button{font-size:100px;margin-left:5px;color:#0000008a}.image-preview .next-button{font-size:100px;margin-right:5px;color:#0000008a}.image-preview .prev-button:hover,.image-preview .next-button:hover{cursor:pointer;color:#000000b3;transition:all .5s ease}.image-preview .prev-button.disabled,.image-preview .next-button.disabled{color:#00000042}.image-preview .prev-button.disabled:hover,.image-preview .next-button.disabled:hover{color:#00000042;transition:none;cursor:default}.image-preview img{max-width:calc(100% - 100px);max-height:100%;margin-left:auto;margin-right:auto;border-radius:3px}.preview-nav{text-align:center}.preview-nav button{display:inline-block;width:18px;height:18px;margin-left:5px;margin-right:5px}.preview-nav button .dot{height:100%;width:100%;background-color:#00000061;border-radius:50%;display:block}.preview-nav button .dot.selected{background-color:#0000008a}.preview-nav button .image-index{position:absolute;height:100%;width:100%;display:block;top:-11.5px;color:#fff}.preview-nav button:hover .dot{background-color:#0000008a;transition:all .3s ease}\n"] }]
         }] });
 
-class FileDefaultInputComponent extends NgxMatEntityBaseInputComponent {
+const NGX_GET_VALIDATION_ERROR_MESSAGE = new InjectionToken('Provider for the default getValidationErrorMessage.', {
+    providedIn: 'root',
+    factory: () => getValidationErrorMessage
+});
+/**
+ * Generates a default error message for most validation errors.
+ *
+ * @param model - The ngModel to get the error from.
+ * @returns The Validation Error Message to display.
+ */
+function getValidationErrorMessage(model) {
+    if (model.hasError('matDatepickerParse')) {
+        return 'not a valid date';
+    }
+    else if (model.hasError('email')) {
+        return 'not a valid email';
+    }
+    else if (model.hasError('minlength')) {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+        return `needs to be at least ${model.getError('minlength').requiredLength} characters long`;
+    }
+    else if (model.hasError('min')) {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+        return `needs to be equal or bigger than ${model.getError('min').min}`;
+    }
+    else if (model.hasError('max')) {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+        return `needs to be equal or smaller than ${model.getError('max').max}`;
+    }
+    else if (model.hasError('required')) {
+        return 'required';
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+    else if (model.hasError('pattern') && model.getError('pattern').requiredPattern === '^true$') {
+        return 'needs to be selected';
+    }
+    else {
+        return 'invalid input';
+    }
+}
+
+/**
+ * The internal CreateDialogData. Requires all default values the user can leave out.
+ */
+class CreateDialogDataInternal {
+    constructor(title, createButtonLabel, cancelButtonLabel, createRequiresConfirmDialog, confirmCreateDialogData) {
+        this.title = title;
+        this.createButtonLabel = createButtonLabel;
+        this.cancelButtonLabel = cancelButtonLabel;
+        this.createRequiresConfirmDialog = createRequiresConfirmDialog;
+        this.confirmCreateDialogData = confirmCreateDialogData;
+    }
+}
+/**
+ * The Builder for the CreateDialogData. Sets default values.
+ */
+class CreateDialogDataBuilder extends BaseBuilder {
+    constructor(data) {
+        super(data);
+    }
+    // eslint-disable-next-line jsdoc/require-jsdoc
+    generateBaseData(data) {
+        var _a, _b, _c, _d;
+        const confirmCreateDialogData = new ConfirmDialogDataBuilder(data === null || data === void 0 ? void 0 : data.confirmCreateDialogData)
+            .withDefault('confirmButtonLabel', 'create')
+            .withDefault('text', ['Do you really want to create this entity?'])
+            .withDefault('title', 'Create')
+            .getResult();
+        return new CreateDialogDataInternal((_a = data === null || data === void 0 ? void 0 : data.title) !== null && _a !== void 0 ? _a : 'Create', (_b = data === null || data === void 0 ? void 0 : data.createButtonLabel) !== null && _b !== void 0 ? _b : 'Create', (_c = data === null || data === void 0 ? void 0 : data.cancelButtonLabel) !== null && _c !== void 0 ? _c : 'Cancel', (_d = data === null || data === void 0 ? void 0 : data.createRequiresConfirmDialog) !== null && _d !== void 0 ? _d : false, confirmCreateDialogData);
+    }
+}
+
+/**
+ * The internal AddArrayItemDialogData. Requires all default values the user can leave out.
+ */
+class AddArrayItemDialogDataInternal {
+    constructor(entity, createDialogData, getValidationErrorMessage) {
+        this.entity = entity;
+        this.createDialogData = createDialogData;
+        this.getValidationErrorMessage = getValidationErrorMessage;
+    }
+}
+/**
+ * The Builder for the AddArrayItemDialogData. Sets default values.
+ */
+let AddArrayItemDialogDataBuilder = class AddArrayItemDialogDataBuilder extends BaseBuilder {
+    constructor(data, defaultGetValidationErrorMessage) {
+        super(data);
+        this.defaultGetValidationErrorMessage = defaultGetValidationErrorMessage;
+    }
+    // eslint-disable-next-line jsdoc/require-jsdoc
+    generateBaseData(data) {
+        var _a;
+        const createDialogData = new CreateDialogDataBuilder(data.createDialogData)
+            .withDefault('createButtonLabel', 'Add')
+            .withDefault('title', 'Add to array')
+            .getResult();
+        return new AddArrayItemDialogDataInternal(data.entity, createDialogData, (_a = data.getValidationErrorMessage) !== null && _a !== void 0 ? _a : this.defaultGetValidationErrorMessage);
+    }
+};
+AddArrayItemDialogDataBuilder = __decorate([
+    __param(1, Inject(NGX_GET_VALIDATION_ERROR_MESSAGE)),
+    __metadata("design:paramtypes", [Object, Function])
+], AddArrayItemDialogDataBuilder);
+
+/* eslint-disable jsdoc/require-jsdoc */
+class StringInputComponent extends NgxMatEntityBaseInputComponent {
+}
+StringInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: StringInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+StringInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: StringInputComponent, selector: "string-input", usesInheritance: true, ngImport: i0, template: "<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <input\n        matInput\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString()\"\n        #model=\"ngModel\"\n        [required]=\"metadata.required\"\n        [pattern]=\"metadata.regex ?? '[\\\\s\\\\S]*'\"\n        [minlength]=\"metadata.minLength ?? null\"\n        [maxlength]=\"metadata.maxLength ?? null\"\n        (ngModelChange)=\"emitChange()\"\n        [disabled]=\"isReadOnly\"\n    >\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: StringInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'string-input', template: "<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <input\n        matInput\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString()\"\n        #model=\"ngModel\"\n        [required]=\"metadata.required\"\n        [pattern]=\"metadata.regex ?? '[\\\\s\\\\S]*'\"\n        [minlength]=\"metadata.minLength ?? null\"\n        [maxlength]=\"metadata.maxLength ?? null\"\n        (ngModelChange)=\"emitChange()\"\n        [disabled]=\"isReadOnly\"\n    >\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"] }]
+        }] });
+
+/* eslint-disable jsdoc/require-jsdoc */
+class StringTextboxInputComponent extends NgxMatEntityBaseInputComponent {
+}
+StringTextboxInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: StringTextboxInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+StringTextboxInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: StringTextboxInputComponent, selector: "string-textbox-input", usesInheritance: true, ngImport: i0, template: "<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <textarea\n        matInput\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString()\"\n        #model=\"ngModel\"\n        cdkTextareaAutosize\n        cdkAutosizeMinRows=\"10\"\n        [required]=\"metadata.required\"\n        [minlength]=\"metadata.minLength ?? null\"\n        [maxlength]=\"metadata.maxLength ?? null\"\n        (ngModelChange)=\"emitChange()\"\n        [disabled]=\"isReadOnly\"\n    >\n    </textarea>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: StringTextboxInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'string-textbox-input', template: "<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <textarea\n        matInput\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString()\"\n        #model=\"ngModel\"\n        cdkTextareaAutosize\n        cdkAutosizeMinRows=\"10\"\n        [required]=\"metadata.required\"\n        [minlength]=\"metadata.minLength ?? null\"\n        [maxlength]=\"metadata.maxLength ?? null\"\n        (ngModelChange)=\"emitChange()\"\n        [disabled]=\"isReadOnly\"\n    >\n    </textarea>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"] }]
+        }] });
+
+/* eslint-disable jsdoc/require-jsdoc */
+class StringAutocompleteInputComponent extends NgxMatEntityBaseInputComponent {
+    ngOnInit() {
+        super.ngOnInit();
+        this.autocompleteStrings = this.metadata.autocompleteValues;
+        this.filteredAutocompleteStrings = LodashUtilities.cloneDeep(this.autocompleteStrings);
+    }
+    /**
+     * Dynamically filters the Autocomplete options when the user inputs something.
+     *
+     * @param input - The input of the user.
+     */
+    filterAutocompleteStrings(input) {
+        if (input) {
+            this.filteredAutocompleteStrings = this.autocompleteStrings.filter(s => s.toLowerCase().includes(input.toLowerCase()));
+        }
+    }
+}
+StringAutocompleteInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: StringAutocompleteInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+StringAutocompleteInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: StringAutocompleteInputComponent, selector: "string-autocomplete-input", usesInheritance: true, ngImport: i0, template: "<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <input\n        matInput\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString()\"\n        #model=\"ngModel\"\n        [matAutocomplete]=\"auto\"\n        (keyup)=\"filterAutocompleteStrings(propertyValue)\"\n        [required]=\"metadata.required\"\n        [minlength]=\"metadata.minLength ?? null\"\n        [maxlength]=\"metadata.maxLength ?? null\"\n        [pattern]=\"metadata.regex ?? '[\\\\s\\\\S]*'\"\n        (ngModelChange)=\"emitChange()\"\n        [disabled]=\"isReadOnly\"\n    >\n    <mat-autocomplete #auto=\"matAutocomplete\">\n        <mat-option *ngFor=\"let value of filteredAutocompleteStrings\" [value]=\"value\">\n            {{value}}\n        </mat-option>\n    </mat-autocomplete>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i6.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: StringAutocompleteInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'string-autocomplete-input', template: "<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <input\n        matInput\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString()\"\n        #model=\"ngModel\"\n        [matAutocomplete]=\"auto\"\n        (keyup)=\"filterAutocompleteStrings(propertyValue)\"\n        [required]=\"metadata.required\"\n        [minlength]=\"metadata.minLength ?? null\"\n        [maxlength]=\"metadata.maxLength ?? null\"\n        [pattern]=\"metadata.regex ?? '[\\\\s\\\\S]*'\"\n        (ngModelChange)=\"emitChange()\"\n        [disabled]=\"isReadOnly\"\n    >\n    <mat-autocomplete #auto=\"matAutocomplete\">\n        <mat-option *ngFor=\"let value of filteredAutocompleteStrings\" [value]=\"value\">\n            {{value}}\n        </mat-option>\n    </mat-autocomplete>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"] }]
+        }] });
+
+/* eslint-disable jsdoc/require-jsdoc */
+class StringDropdownInputComponent extends NgxMatEntityBaseInputComponent {
+}
+StringDropdownInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: StringDropdownInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+StringDropdownInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: StringDropdownInputComponent, selector: "string-dropdown-input", usesInheritance: true, ngImport: i0, template: "<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-select (ngModelChange)=\"emitChange()\" [(ngModel)]=\"propertyValue\" [name]=\"key.toString()\" #model=\"ngModel\" [required]=\"metadata.required\" [disabled]=\"isReadOnly\">\n        <mat-option *ngFor=\"let value of metadata.dropdownValues\" [value]=\"value.value\">{{value.displayName}}</mat-option>\n    </mat-select>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$3.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i5$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: StringDropdownInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'string-dropdown-input', template: "<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-select (ngModelChange)=\"emitChange()\" [(ngModel)]=\"propertyValue\" [name]=\"key.toString()\" #model=\"ngModel\" [required]=\"metadata.required\" [disabled]=\"isReadOnly\">\n        <mat-option *ngFor=\"let value of metadata.dropdownValues\" [value]=\"value.value\">{{value.displayName}}</mat-option>\n    </mat-select>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"] }]
+        }] });
+
+/* eslint-disable jsdoc/require-jsdoc */
+class StringPasswordInputComponent extends NgxMatEntityBaseInputComponent {
     constructor() {
         super(...arguments);
-        this.FileUtilities = FileUtilities;
+        this.hide = true;
+        this.hideConfirm = true;
     }
-    refreshFileData(fileData) {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.propertyValue = fileData;
-            this.emitChange();
-        });
+    ngOnInit() {
+        super.ngOnInit();
+        this.confirmRequired = this.metadata.required;
+        this.confirmPassword = LodashUtilities.cloneDeep(this.propertyValue);
+        ReflectUtilities.defineMetadata('confirmPassword', this.confirmPassword, this.entity, this.key);
+    }
+    passwordInput() {
+        this.confirmRequired = Boolean(this.propertyValue);
+        ReflectUtilities.defineMetadata('confirmPassword', this.confirmPassword, this.entity, this.key);
+        this.emitChange();
     }
 }
-FileDefaultInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: FileDefaultInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-FileDefaultInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.1", type: FileDefaultInputComponent, selector: "file-default-input", usesInheritance: true, ngImport: i0, template: "<div [class.file-input]=\"metadata.dragAndDrop\" [class.mat-elevation-z8]=\"metadata.dragAndDrop\">\n    <file-input\n        (fileDataChangeEvent)=\"refreshFileData($event)\"\n        [propertyValue]=\"propertyValue\"\n        [metadata]=\"metadata\"\n        [getValidationErrorMessage]=\"getValidationErrorMessage\"\n        [isReadOnly]=\"isReadOnly\"\n    >\n    </file-input>\n</div>", styles: [".file-input{margin-top:15px;margin-bottom:15px;padding:15px;border-radius:5px}\n"], dependencies: [{ kind: "component", type: FileInputComponent, selector: "file-input", inputs: ["propertyValue", "metadata", "getValidationErrorMessage", "isReadOnly"], outputs: ["fileDataChangeEvent"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: FileDefaultInputComponent, decorators: [{
+StringPasswordInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: StringPasswordInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+StringPasswordInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: StringPasswordInputComponent, selector: "string-password-input", usesInheritance: true, ngImport: i0, template: "<div class=\"password-row\">\n    <mat-form-field [class.w-50]=\"metadata.needsConfirmation\" [class.w-100]=\"!metadata.needsConfirmation\">\n        <mat-label>{{metadata.displayName}}</mat-label>\n        <input\n            [type]=\"hide ? 'password' : 'text'\"\n            matInput\n            [(ngModel)]=\"propertyValue\"\n            [name]=\"key.toString()\"\n            #model=\"ngModel\"\n            [required]=\"metadata.required\"\n            [pattern]=\"metadata.regex ?? '[\\\\s\\\\S]*'\"\n            [minlength]=\"metadata.minLength ?? null\"\n            [maxlength]=\"metadata.maxLength ?? null\"\n            (ngModelChange)=\"passwordInput()\"\n            [disabled]=\"isReadOnly\"\n        >\n        <button type=\"button\" (click)=\"hide = !hide\" mat-icon-button matSuffix>\n            <i *ngIf=\"hide\" class=\"fas fa-eye-slash\"></i>\n            <i *ngIf=\"!hide\" class=\"fas fa-eye\"></i>\n        </button>\n        <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n    </mat-form-field>\n    <div *ngIf=\"metadata.needsConfirmation\" class=\"password-spacer\"></div>\n    <mat-form-field class=\"w-50\" *ngIf=\"metadata.needsConfirmation\">\n        <mat-label>{{metadata.confirmationDisplayName}}</mat-label>\n        <input\n            [type]=\"hideConfirm ? 'password' : 'text'\"\n            matInput\n            [(ngModel)]=\"confirmPassword\"\n            [name]=\"key.toString() + 'confirmPassword'\"\n            #confirmModel=\"ngModel\"\n            [required]=\"metadata.required || confirmRequired\"\n            (ngModelChange)=\"passwordInput()\"\n            [disabled]=\"isReadOnly\"\n        >\n        <button type=\"button\" (click)=\"hideConfirm = !hideConfirm\" mat-icon-button matSuffix>\n            <i *ngIf=\"hideConfirm\" class=\"fas fa-eye-slash\"></i>\n            <i *ngIf=\"!hideConfirm\" class=\"fas fa-eye\"></i>\n        </button>\n        <mat-error>{{getValidationErrorMessage(confirmModel)}}</mat-error>\n    </mat-form-field>\n</div>\n\n<mat-error *ngIf=\"metadata.needsConfirmation && propertyValue && confirmPassword && (confirmPassword !== propertyValue)\">\n    {{metadata.passwordsDontMatchErrorMessage}}\n</mat-error>", styles: [".password-row{display:flex;justify-content:space-between}.password-spacer{margin-left:5px;margin-right:5px}.w-50{width:50%}.w-100{width:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: StringPasswordInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'file-default-input', template: "<div [class.file-input]=\"metadata.dragAndDrop\" [class.mat-elevation-z8]=\"metadata.dragAndDrop\">\n    <file-input\n        (fileDataChangeEvent)=\"refreshFileData($event)\"\n        [propertyValue]=\"propertyValue\"\n        [metadata]=\"metadata\"\n        [getValidationErrorMessage]=\"getValidationErrorMessage\"\n        [isReadOnly]=\"isReadOnly\"\n    >\n    </file-input>\n</div>", styles: [".file-input{margin-top:15px;margin-bottom:15px;padding:15px;border-radius:5px}\n"] }]
+            args: [{ selector: 'string-password-input', template: "<div class=\"password-row\">\n    <mat-form-field [class.w-50]=\"metadata.needsConfirmation\" [class.w-100]=\"!metadata.needsConfirmation\">\n        <mat-label>{{metadata.displayName}}</mat-label>\n        <input\n            [type]=\"hide ? 'password' : 'text'\"\n            matInput\n            [(ngModel)]=\"propertyValue\"\n            [name]=\"key.toString()\"\n            #model=\"ngModel\"\n            [required]=\"metadata.required\"\n            [pattern]=\"metadata.regex ?? '[\\\\s\\\\S]*'\"\n            [minlength]=\"metadata.minLength ?? null\"\n            [maxlength]=\"metadata.maxLength ?? null\"\n            (ngModelChange)=\"passwordInput()\"\n            [disabled]=\"isReadOnly\"\n        >\n        <button type=\"button\" (click)=\"hide = !hide\" mat-icon-button matSuffix>\n            <i *ngIf=\"hide\" class=\"fas fa-eye-slash\"></i>\n            <i *ngIf=\"!hide\" class=\"fas fa-eye\"></i>\n        </button>\n        <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n    </mat-form-field>\n    <div *ngIf=\"metadata.needsConfirmation\" class=\"password-spacer\"></div>\n    <mat-form-field class=\"w-50\" *ngIf=\"metadata.needsConfirmation\">\n        <mat-label>{{metadata.confirmationDisplayName}}</mat-label>\n        <input\n            [type]=\"hideConfirm ? 'password' : 'text'\"\n            matInput\n            [(ngModel)]=\"confirmPassword\"\n            [name]=\"key.toString() + 'confirmPassword'\"\n            #confirmModel=\"ngModel\"\n            [required]=\"metadata.required || confirmRequired\"\n            (ngModelChange)=\"passwordInput()\"\n            [disabled]=\"isReadOnly\"\n        >\n        <button type=\"button\" (click)=\"hideConfirm = !hideConfirm\" mat-icon-button matSuffix>\n            <i *ngIf=\"hideConfirm\" class=\"fas fa-eye-slash\"></i>\n            <i *ngIf=\"!hideConfirm\" class=\"fas fa-eye\"></i>\n        </button>\n        <mat-error>{{getValidationErrorMessage(confirmModel)}}</mat-error>\n    </mat-form-field>\n</div>\n\n<mat-error *ngIf=\"metadata.needsConfirmation && propertyValue && confirmPassword && (confirmPassword !== propertyValue)\">\n    {{metadata.passwordsDontMatchErrorMessage}}\n</mat-error>", styles: [".password-row{display:flex;justify-content:space-between}.password-spacer{margin-left:5px;margin-right:5px}.w-50{width:50%}.w-100{width:100%}\n"] }]
         }] });
 
 /* eslint-disable jsdoc/require-jsdoc */
-class CustomInputComponent extends NgxMatEntityBaseInputComponent {
-    constructor(viewContainerRef) {
+class NumberInputComponent extends NgxMatEntityBaseInputComponent {
+}
+NumberInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: NumberInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+NumberInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: NumberInputComponent, selector: "number-input", usesInheritance: true, ngImport: i0, template: "<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <input\n        matInput\n        type=\"number\"\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString()\"\n        #model=\"ngModel\"\n        [required]=\"metadata.required\"\n        [min]=\"metadata.min ?? null\"\n        [max]=\"metadata.max ?? null\"\n        (ngModelChange)=\"emitChange()\"\n        [disabled]=\"isReadOnly\"\n    >\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i4.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: NumberInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'number-input', template: "<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <input\n        matInput\n        type=\"number\"\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString()\"\n        #model=\"ngModel\"\n        [required]=\"metadata.required\"\n        [min]=\"metadata.min ?? null\"\n        [max]=\"metadata.max ?? null\"\n        (ngModelChange)=\"emitChange()\"\n        [disabled]=\"isReadOnly\"\n    >\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"] }]
+        }] });
+
+/* eslint-disable jsdoc/require-jsdoc */
+class NumberDropdownInputComponent extends NgxMatEntityBaseInputComponent {
+}
+NumberDropdownInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: NumberDropdownInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+NumberDropdownInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: NumberDropdownInputComponent, selector: "number-dropdown-input", usesInheritance: true, ngImport: i0, template: "<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-select (ngModelChange)=\"emitChange()\" [(ngModel)]=\"propertyValue\" [name]=\"key.toString()\" #model=\"ngModel\" [required]=\"metadata.required\" [disabled]=\"isReadOnly\">\n        <mat-option *ngFor=\"let value of metadata.dropdownValues\" [value]=\"value.value\">{{value.displayName}}</mat-option>\n    </mat-select>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$3.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i5$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: NumberDropdownInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'number-dropdown-input', template: "<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-select (ngModelChange)=\"emitChange()\" [(ngModel)]=\"propertyValue\" [name]=\"key.toString()\" #model=\"ngModel\" [required]=\"metadata.required\" [disabled]=\"isReadOnly\">\n        <mat-option *ngFor=\"let value of metadata.dropdownValues\" [value]=\"value.value\">{{value.displayName}}</mat-option>\n    </mat-select>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"] }]
+        }] });
+
+/* eslint-disable jsdoc/require-jsdoc */
+class NumberSliderInputComponent extends NgxMatEntityBaseInputComponent {
+}
+NumberSliderInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: NumberSliderInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+NumberSliderInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: NumberSliderInputComponent, selector: "number-slider-input", usesInheritance: true, ngImport: i0, template: "<mat-slider\n    id=\"slider\"\n    color=\"primary\"\n    (click)=\"model.control.markAsTouched()\"\n    [min]=\"metadata.min ?? null\"\n    [max]=\"metadata.max ?? null\"\n    [step]=\"metadata.step\"\n    [discrete]=\"true\"\n    [displayWith]=\"metadata.formatThumbLabelValue\"\n    [showTickMarks]=\"metadata.showTickMarks\"\n    [disabled]=\"isReadOnly\"\n>\n    <input matSliderThumb\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString() + 'Helper'\"\n        #model=\"ngModel\"\n        [required]=\"metadata.required\"\n        [min]=\"metadata.min ?? null\"\n        [max]=\"metadata.max ?? null\"\n        (ngModelChange)=\"emitChange()\"\n        [disabled]=\"isReadOnly\"\n    >\n</mat-slider>\n\n<mat-form-field floatLabel=\"always\">\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <!-- hidden input is needed so that the slider can be used inside a mat-form-field -->\n    <input matInput style=\"opacity: 0%;\">\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%;margin-top:-40px}mat-slider{width:calc(100% - 40px);margin-left:20px;margin-right:20px;margin-bottom:-40px;z-index:999}::ng-deep #slider .mdc-slider__value-indicator-container{top:23px;left:57px;display:flex;transform:rotate(90deg) scale(1);border-radius:50%;pointer-events:auto}::ng-deep #slider .mdc-slider__value-indicator{padding-right:5px;padding-left:5px;transition:transform .1s 0ms cubic-bezier(0,0,.2,1);transform:scale(1)}::ng-deep #slider .mdc-slider__value-indicator-text{transform:rotate(270deg)}\n"], dependencies: [{ kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$5.MatSlider, selector: "mat-slider", inputs: ["color", "disableRipple", "disabled", "discrete", "showTickMarks", "min", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i4$5.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: NumberSliderInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'number-slider-input', template: "<mat-slider\n    id=\"slider\"\n    color=\"primary\"\n    (click)=\"model.control.markAsTouched()\"\n    [min]=\"metadata.min ?? null\"\n    [max]=\"metadata.max ?? null\"\n    [step]=\"metadata.step\"\n    [discrete]=\"true\"\n    [displayWith]=\"metadata.formatThumbLabelValue\"\n    [showTickMarks]=\"metadata.showTickMarks\"\n    [disabled]=\"isReadOnly\"\n>\n    <input matSliderThumb\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString() + 'Helper'\"\n        #model=\"ngModel\"\n        [required]=\"metadata.required\"\n        [min]=\"metadata.min ?? null\"\n        [max]=\"metadata.max ?? null\"\n        (ngModelChange)=\"emitChange()\"\n        [disabled]=\"isReadOnly\"\n    >\n</mat-slider>\n\n<mat-form-field floatLabel=\"always\">\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <!-- hidden input is needed so that the slider can be used inside a mat-form-field -->\n    <input matInput style=\"opacity: 0%;\">\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%;margin-top:-40px}mat-slider{width:calc(100% - 40px);margin-left:20px;margin-right:20px;margin-bottom:-40px;z-index:999}::ng-deep #slider .mdc-slider__value-indicator-container{top:23px;left:57px;display:flex;transform:rotate(90deg) scale(1);border-radius:50%;pointer-events:auto}::ng-deep #slider .mdc-slider__value-indicator{padding-right:5px;padding-left:5px;transition:transform .1s 0ms cubic-bezier(0,0,.2,1);transform:scale(1)}::ng-deep #slider .mdc-slider__value-indicator-text{transform:rotate(270deg)}\n"] }]
+        }] });
+
+class ReferencesManyInputComponent extends NgxMatEntityBaseInputComponent {
+    constructor(injector) {
         super();
-        this.viewContainerRef = viewContainerRef;
+        this.injector = injector;
+        this.allReferencedEntities = [];
+        this.allDropdownValues = [];
+        this.dropdownValues = [];
+        this.input = '';
+        this.referencedEntitiesDataSource = new MatTableDataSource();
+        this.selection = new SelectionModel(true, []);
+        this.SelectionUtilities = SelectionUtilities;
     }
     ngOnInit() {
-        super.ngOnInit();
-        this.component = this.viewContainerRef.createComponent(this.metadata.component);
-        this.component.instance.entity = this.entity;
-        this.component.instance.key = this.key;
-        this.component.instance.getValidationErrorMessage = this.getValidationErrorMessage;
-        this.component.instance.inputChangeEvent.subscribe(this.inputChangeEvent);
-        this.component.instance.isReadOnly = this.isReadOnly;
+        const _super = Object.create(null, {
+            ngOnInit: { get: () => super.ngOnInit }
+        });
+        var _a;
+        return __awaiter(this, void 0, void 0, function* () {
+            _super.ngOnInit.call(this);
+            this.propertyValue = (_a = this.propertyValue) !== null && _a !== void 0 ? _a : [];
+            const givenDisplayColumns = this.metadata.displayColumns.map((v) => v.displayName);
+            if (givenDisplayColumns.find(s => s === 'select')) {
+                throw new Error(`The name "select" for a display column is reserved.
+                Please choose a different name.`);
+            }
+            this.displayedColumns = this.isReadOnly ? givenDisplayColumns : ['select'].concat(givenDisplayColumns);
+            this.referencedEntitiesDataSource.data = this.propertyValue;
+            yield this.injector.runInContext(() => __awaiter(this, void 0, void 0, function* () {
+                this.allReferencedEntities = yield this.metadata.getReferencedEntities();
+            }));
+            this.allDropdownValues = this.metadata.getDropdownValues(LodashUtilities.cloneDeep(this.allReferencedEntities));
+            this.dropdownValues = LodashUtilities.cloneDeep(this.allDropdownValues);
+            for (const value of this.propertyValue) {
+                const foundValue = this.dropdownValues.find(v => v.value === value);
+                if (foundValue) {
+                    this.dropdownValues.splice(this.dropdownValues.indexOf(foundValue), 1);
+                }
+            }
+        });
+    }
+    add() {
+        var _a;
+        return __awaiter(this, void 0, void 0, function* () {
+            this.propertyValue = (_a = this.propertyValue) !== null && _a !== void 0 ? _a : [];
+            this.propertyValue.push(LodashUtilities.cloneDeep(this.input));
+            const foundDropdownValue = this.dropdownValues.find(v => v.value === this.input);
+            this.dropdownValues.splice(this.dropdownValues.indexOf(foundDropdownValue), 1);
+            this.referencedEntitiesDataSource.data = this.propertyValue;
+            this.input = '';
+            this.emitChange();
+        });
+    }
+    addAll() {
+        this.propertyValue = this.allDropdownValues.map(dv => dv.value);
+        this.dropdownValues = [];
+        this.referencedEntitiesDataSource.data = this.propertyValue;
+        this.input = '';
+        this.emitChange();
+    }
+    remove() {
+        var _a;
+        this.selection.selected.forEach(s => {
+            var _a;
+            (_a = this.propertyValue) === null || _a === void 0 ? void 0 : _a.splice(this.propertyValue.indexOf(s), 1);
+            const foundDropdownValue = this.allDropdownValues.find(v => v.value === s);
+            if (foundDropdownValue) {
+                this.dropdownValues.push(foundDropdownValue);
+            }
+        });
+        this.referencedEntitiesDataSource.data = (_a = this.propertyValue) !== null && _a !== void 0 ? _a : [];
+        this.selection.clear();
+        this.emitChange();
     }
 }
-CustomInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: CustomInputComponent, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-CustomInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.1", type: CustomInputComponent, selector: "custom-input", usesInheritance: true, ngImport: i0, template: "", styles: [""] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: CustomInputComponent, decorators: [{
+ReferencesManyInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: ReferencesManyInputComponent, deps: [{ token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Component });
+ReferencesManyInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: ReferencesManyInputComponent, selector: "references-many-input", usesInheritance: true, ngImport: i0, template: "<div class=\"mat-elevation-z8 elevation-container\">\n    <div class=\"array-headline\">\n        <b>{{metadata.displayName}}</b>\n    </div>\n\n    <mat-form-field>\n        <mat-label>{{metadata.dropdownLabel}}</mat-label>\n        <mat-select [(ngModel)]=\"input\" [name]=\"key.toString() + 'input'\" #inputModel=\"ngModel\" [disabled]=\"isReadOnly\">\n            <mat-option>-</mat-option>\n            <mat-option *ngFor=\"let value of dropdownValues\" [value]=\"value.value\">{{value.displayName}}</mat-option>\n        </mat-select>\n        <mat-error>{{getValidationErrorMessage(inputModel)}}</mat-error>\n    </mat-form-field>\n\n    <button type=\"button\" *ngIf=\"metadata.addAll\" style=\"margin-left: 20px;\" mat-raised-button [disabled]=\"!dropdownValues.length || isReadOnly\" (click)=\"addAll()\">\n        {{metadata.addAllButtonLabel}}\n    </button>\n\n    <div class=\"buttons\">\n        <button type=\"button\" mat-raised-button [disabled]=\"!input\" (click)=\"add()\">\n            {{metadata.addButtonLabel}}\n        </button>\n        <button type=\"button\" mat-raised-button [disabled]=\"!selection.selected.length\" (click)=\"remove()\">\n            {{metadata.removeButtonLabel}}\n        </button>\n    </div>\n\n    <mat-table [dataSource]=\"referencedEntitiesDataSource\">\n        <!-- select Column -->\n        <ng-container matColumnDef=\"select\" *ngIf=\"!isReadOnly\">\n            <mat-header-cell *matHeaderCellDef>\n                <mat-checkbox\n                    [disabled]=\"!referencedEntitiesDataSource.data.length\" (change)=\"$event ? SelectionUtilities.masterToggle(selection, referencedEntitiesDataSource) : null\"\n                    [checked]=\"selection.hasValue() && SelectionUtilities.isAllSelected(selection, referencedEntitiesDataSource)\"\n                    [indeterminate]=\"selection.hasValue() && !SelectionUtilities.isAllSelected(selection, referencedEntitiesDataSource)\">\n                </mat-checkbox>\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let module\">\n                <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(module) : null\" [checked]=\"selection.isSelected(module)\"></mat-checkbox>\n            </mat-cell>\n        </ng-container>\n    \n        <ng-container *ngFor=\"let dCol of metadata.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n            <mat-header-cell *matHeaderCellDef>\n                {{dCol.displayName}}\n            </mat-header-cell>\n            <mat-cell class=\"entity\" *matCellDef=\"let entityId\">\n                {{dCol.value(metadata.getEntityForId(entityId, allReferencedEntities))}}\n            </mat-cell>\n        </ng-container>\n    \n        <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n        <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n    </mat-table>\n</div>", styles: [".elevation-container{border-radius:5px;padding:15px;margin-bottom:15px;margin-top:15px}.array-headline{padding-bottom:10px}.buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px}mat-table{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:25px}.mat-column-select{flex:0 0 75px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$3.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i5$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i5$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: ReferencesManyInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'custom-input', template: "" }]
-        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; } });
+            args: [{ selector: 'references-many-input', template: "<div class=\"mat-elevation-z8 elevation-container\">\n    <div class=\"array-headline\">\n        <b>{{metadata.displayName}}</b>\n    </div>\n\n    <mat-form-field>\n        <mat-label>{{metadata.dropdownLabel}}</mat-label>\n        <mat-select [(ngModel)]=\"input\" [name]=\"key.toString() + 'input'\" #inputModel=\"ngModel\" [disabled]=\"isReadOnly\">\n            <mat-option>-</mat-option>\n            <mat-option *ngFor=\"let value of dropdownValues\" [value]=\"value.value\">{{value.displayName}}</mat-option>\n        </mat-select>\n        <mat-error>{{getValidationErrorMessage(inputModel)}}</mat-error>\n    </mat-form-field>\n\n    <button type=\"button\" *ngIf=\"metadata.addAll\" style=\"margin-left: 20px;\" mat-raised-button [disabled]=\"!dropdownValues.length || isReadOnly\" (click)=\"addAll()\">\n        {{metadata.addAllButtonLabel}}\n    </button>\n\n    <div class=\"buttons\">\n        <button type=\"button\" mat-raised-button [disabled]=\"!input\" (click)=\"add()\">\n            {{metadata.addButtonLabel}}\n        </button>\n        <button type=\"button\" mat-raised-button [disabled]=\"!selection.selected.length\" (click)=\"remove()\">\n            {{metadata.removeButtonLabel}}\n        </button>\n    </div>\n\n    <mat-table [dataSource]=\"referencedEntitiesDataSource\">\n        <!-- select Column -->\n        <ng-container matColumnDef=\"select\" *ngIf=\"!isReadOnly\">\n            <mat-header-cell *matHeaderCellDef>\n                <mat-checkbox\n                    [disabled]=\"!referencedEntitiesDataSource.data.length\" (change)=\"$event ? SelectionUtilities.masterToggle(selection, referencedEntitiesDataSource) : null\"\n                    [checked]=\"selection.hasValue() && SelectionUtilities.isAllSelected(selection, referencedEntitiesDataSource)\"\n                    [indeterminate]=\"selection.hasValue() && !SelectionUtilities.isAllSelected(selection, referencedEntitiesDataSource)\">\n                </mat-checkbox>\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let module\">\n                <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(module) : null\" [checked]=\"selection.isSelected(module)\"></mat-checkbox>\n            </mat-cell>\n        </ng-container>\n    \n        <ng-container *ngFor=\"let dCol of metadata.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n            <mat-header-cell *matHeaderCellDef>\n                {{dCol.displayName}}\n            </mat-header-cell>\n            <mat-cell class=\"entity\" *matCellDef=\"let entityId\">\n                {{dCol.value(metadata.getEntityForId(entityId, allReferencedEntities))}}\n            </mat-cell>\n        </ng-container>\n    \n        <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n        <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n    </mat-table>\n</div>", styles: [".elevation-container{border-radius:5px;padding:15px;margin-bottom:15px;margin-top:15px}.array-headline{padding-bottom:10px}.buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px}mat-table{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:25px}.mat-column-select{flex:0 0 75px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.EnvironmentInjector }]; } });
 
 /**
  * The default input component. It gets the metadata of the property from the given @Input "entity" and @Input "propertyKey"
@@ -3200,11 +3240,11 @@ class NgxMatEntityInputComponent {
         this.emitChange();
     }
 }
-NgxMatEntityInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: NgxMatEntityInputComponent, deps: [{ token: i1.MatDialog }, { token: NGX_GET_VALIDATION_ERROR_MESSAGE }], target: i0.ɵɵFactoryTarget.Component });
-NgxMatEntityInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.1", type: NgxMatEntityInputComponent, selector: "ngx-mat-entity-input", inputs: { entity: "entity", propertyKey: "propertyKey", getValidationErrorMessage: "getValidationErrorMessage", hideOmitForCreate: "hideOmitForCreate", hideOmitForEdit: "hideOmitForEdit", isReadOnly: "isReadOnly" }, outputs: { inputChangeEvent: "inputChangeEvent" }, viewQueries: [{ propertyName: "addArrayItemDialog", first: true, predicate: ["addArrayItemDialog"], descendants: true }], ngImport: i0, template: "<div [ngSwitch]=\"type\" *ngIf=\"!(hideOmitForCreate && metadata.omitForCreate) && !(hideOmitForEdit && metadata.omitForUpdate)\">\n    <!-------------------------------------------->\n    <!-----------------Strings-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.STRING\">\n        <string-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </string-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_TEXTBOX\">\n        <string-textbox-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </string-textbox-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_AUTOCOMPLETE\">\n        <string-autocomplete-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </string-autocomplete-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_DROPDOWN\">\n        <string-dropdown-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </string-dropdown-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_PASSWORD\">\n        <string-password-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </string-password-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-----------------Booleans------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_CHECKBOX\">\n        <boolean-checkbox-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </boolean-checkbox-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_TOGGLE\">\n        <boolean-toggle-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </boolean-toggle-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_DROPDOWN\">\n        <boolean-dropdown-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </boolean-dropdown-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!------------------Numbers------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.NUMBER\">\n        <number-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </number-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.NUMBER_DROPDOWN\">\n        <number-dropdown-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </number-dropdown-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.NUMBER_SLIDER\">\n        <number-slider-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </number-slider-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Object------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.OBJECT\">\n        <b>{{metadataDefaultObject.displayName}}</b>\n        <!-- iterates over the object properties -->\n        <mat-tab-group *ngIf=\"objectPropertyTabs.length > 1\" preserveContent>\n            <mat-tab *ngFor=\"let tab of objectPropertyTabs; let tI = index; trackBy: trackByFn\" [label]=\"tab.tabName\">\n                <div class=\"row\" *ngFor=\"let row of tab.rows;\">\n                    <ngx-mat-entity-input *ngFor=\"let key of row.keys; let rI = index; trackBy: trackByFn\"\n                        [entity]=\"objectProperty\"\n                        [propertyKey]=\"key\"\n                        [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                        [hideOmitForCreate]=\"hideOmitForCreate\"\n                        [hideOmitForEdit]=\"hideOmitForEdit\"\n                        [isReadOnly]=\"internalIsReadOnly\"\n                        class=\"col-lg-{{EntityUtilities.getWidth(objectProperty, key, 'lg')}} col-md-{{EntityUtilities.getWidth(objectProperty, key, 'md')}} col-sm-{{EntityUtilities.getWidth(objectProperty, key, 'sm')}}\"\n                        (inputChangeEvent)=\"emitChange()\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </mat-tab>\n        </mat-tab-group>\n\n        <div *ngIf=\"objectPropertyTabs.length <= 1\">\n            <div class=\"row\" *ngFor=\"let row of objectPropertyTabs[0].rows\">\n                <ngx-mat-entity-input *ngFor=\"let key of row.keys; let i = index; trackBy: trackByFn\"\n                    [entity]=\"objectProperty\"\n                    [propertyKey]=\"key\"\n                    [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                    [hideOmitForCreate]=\"hideOmitForCreate\"\n                    [hideOmitForEdit]=\"hideOmitForEdit\"\n                    [isReadOnly]=\"internalIsReadOnly\"\n                    class=\"col-lg-{{EntityUtilities.getWidth(objectProperty, key, 'lg')}} col-md-{{EntityUtilities.getWidth(objectProperty, key, 'md')}} col-sm-{{EntityUtilities.getWidth(objectProperty, key, 'sm')}}\"\n                    (inputChangeEvent)=\"emitChange()\"\n                >\n                </ngx-mat-entity-input>\n            </div>\n        </div>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Array-------------------->\n    <!-------------------------------------------->\n    <div class=\"entityArray\" *ngSwitchCase=\"DecoratorTypes.ARRAY\">\n        <div class=\"mat-elevation-z8 elevation-container\">\n            <div class=\"array-headline\">\n                <b>{{metadataEntityArray.displayName}}</b>\n            </div>\n            <div *ngIf=\"metadataEntityArray.createInline && !internalIsReadOnly\">\n                <mat-tab-group *ngIf=\"arrayItemInlineTabs.length > 1\" preserveContent>\n                    <mat-tab *ngFor=\"let tab of arrayItemInlineTabs\" [label]=\"tab.tabName\">\n                        <div class=\"row\" *ngFor=\"let row of tab.rows\">\n                            <ngx-mat-entity-input\n                                *ngFor=\"let key of row.keys; let i = index; trackBy: trackByFn\"\n                                [entity]=\"arrayItem\"\n                                [propertyKey]=\"key\"\n                                [hideOmitForCreate]=\"true\"\n                                [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                                class=\"col-lg-{{EntityUtilities.getWidth(arrayItem, key, 'lg')}} col-md-{{EntityUtilities.getWidth(arrayItem, key, 'md')}} col-sm-{{EntityUtilities.getWidth(arrayItem, key, 'sm')}}\"\n                                (inputChangeEvent)=\"checkIsArrayItemValid()\"\n                            >\n                            </ngx-mat-entity-input>\n                        </div>\n                    </mat-tab>\n                </mat-tab-group>\n\n                <div *ngIf=\"arrayItemInlineTabs.length <= 1\">\n                    <div class=\"row\" *ngFor=\"let row of arrayItemInlineTabs[0].rows\">\n                        <ngx-mat-entity-input\n                            *ngFor=\"let key of row.keys; let i = index; trackBy: trackByFn\"\n                            [entity]=\"arrayItem\"\n                            [propertyKey]=\"key\"\n                            [hideOmitForCreate]=\"true\"\n                            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                            class=\"col-lg-{{EntityUtilities.getWidth(arrayItem, key, 'lg')}} col-md-{{EntityUtilities.getWidth(arrayItem, key, 'md')}} col-sm-{{EntityUtilities.getWidth(arrayItem, key, 'sm')}}\"\n                            (inputChangeEvent)=\"checkIsArrayItemValid()\"\n                        >\n                        </ngx-mat-entity-input>\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"buttons\" *ngIf=\"!internalIsReadOnly\">\n                <button type=\"button\" mat-raised-button\n                    [disabled]=\"metadataEntityArray.createInline && !isArrayItemValid\"\n                    (click)=\"addEntity()\">\n                    {{metadataEntityArray.addButtonLabel}}\n                </button>\n                <button type=\"button\" mat-raised-button\n                    [disabled]=\"!selection.selected.length\"\n                    (click)=\"remove()\">\n                    {{metadataEntityArray.removeButtonLabel}}\n                </button>\n            </div>\n        \n            <mat-table [dataSource]=\"dataSource\">\n                <!-- select Column -->\n                <ng-container matColumnDef=\"select\" *ngIf=\"!internalIsReadOnly\">\n                    <mat-header-cell *matHeaderCellDef>\n                        <mat-checkbox\n                            [disabled]=\"!dataSource.data.length\" (change)=\"$event ? SelectionUtilities.masterToggle(selection, dataSource) : null\"\n                            [checked]=\"selection.hasValue() && SelectionUtilities.isAllSelected(selection, dataSource)\"\n                            [indeterminate]=\"selection.hasValue() && !SelectionUtilities.isAllSelected(selection, dataSource)\">\n                        </mat-checkbox>\n                    </mat-header-cell>\n                    <mat-cell *matCellDef=\"let module\">\n                        <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(module) : null\" [checked]=\"selection.isSelected(module)\"></mat-checkbox>\n                    </mat-cell>\n                </ng-container>\n            \n                <ng-container *ngFor=\"let dCol of metadataEntityArray.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n                    <mat-header-cell *matHeaderCellDef>\n                        {{dCol.displayName}}\n                    </mat-header-cell>\n                    <mat-cell class=\"entity\" *matCellDef=\"let entity\">\n                        {{dCol.value(entity)}}\n                    </mat-cell>\n                </ng-container>\n            \n                <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n                <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n            </mat-table>\n        \n            <div class=\"array-error\" *ngIf=\"metadataEntityArray.required && !dataSource.data.length\">\n                {{metadataEntityArray.missingErrorMessage}}\n            </div>\n        </div>\n    </div>\n\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_DATE\">\n        <array-date-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </array-date-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_DATE_TIME\">\n        <array-date-time-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </array-date-time-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_DATE_RANGE\">\n        <array-date-range-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </array-date-range-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_STRING_CHIPS\">\n        <array-string-chips-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </array-string-chips-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_STRING_AUTOCOMPLETE_CHIPS\">\n        <array-string-autocomplete-chips\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </array-string-autocomplete-chips>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Dates-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.DATE\">\n        <date-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </date-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.DATE_RANGE\">\n        <date-range-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </date-range-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.DATE_TIME\">\n        <date-time-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </date-time-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Files-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.FILE_DEFAULT\">\n        <file-default-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </file-default-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.FILE_IMAGE\">\n        <file-image-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </file-image-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Custom------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.CUSTOM\">\n        <custom-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </custom-input>\n    </div>\n\n    <div *ngSwitchDefault>ERROR: The type {{type}} is not known.</div>\n</div>\n\n<!--------------------------------------------------------->\n<!--------------------Add Array Item Dialog---------------->\n<!--------------------------------------------------------->\n<ng-template #addArrayItemDialog>\n    <h2 mat-dialog-title>{{dialogData.createDialogData.title}}</h2>\n\n    <form class=\"row\">\n        <mat-dialog-content>\n            <mat-tab-group *ngIf=\"arrayItemDialogTabs.length > 1\" preserveContent>\n                <mat-tab *ngFor=\"let tab of arrayItemDialogTabs\" [label]=\"tab.tabName\">\n                    <div class=\"row\" *ngFor=\"let row of tab.rows\">\n                        <ngx-mat-entity-input\n                            *ngFor=\"let key of row.keys\"\n                            [entity]=\"dialogData.entity\"\n                            [propertyKey]=\"key\"\n                            [hideOmitForCreate]=\"true\"\n                            [getValidationErrorMessage]=\"dialogData.getValidationErrorMessage\"\n                            class=\"col-lg-{{EntityUtilities.getWidth(dialogData.entity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(dialogData.entity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(dialogData.entity, key, 'sm')}}\"\n                            (inputChangeEvent)=\"checkIsDialogArrayItemValid()\"\n                        >\n                        </ngx-mat-entity-input>\n                    </div>\n                </mat-tab>\n            </mat-tab-group>\n    \n            <div *ngIf=\"arrayItemDialogTabs.length <= 1\">\n                <div class=\"row\" *ngFor=\"let row of arrayItemDialogTabs[0].rows\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"dialogData.entity\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForCreate]=\"true\"\n                        [getValidationErrorMessage]=\"dialogData.getValidationErrorMessage\"\n                        class=\"col-lg-{{EntityUtilities.getWidth(dialogData.entity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(dialogData.entity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(dialogData.entity, key, 'sm')}}\"\n                        (inputChangeEvent)=\"checkIsDialogArrayItemValid()\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </div>\n        </mat-dialog-content>\n    \n        <mat-dialog-actions>\n            <button type=\"submit\" mat-raised-button (click)=\"addArrayItem()\" [class.mat-button-disabled]=\"!isDialogArrayItemValid\">\n                {{dialogData.createDialogData.createButtonLabel}}\n            </button>\n            <button type=\"button\" mat-raised-button (click)=\"cancelAddArrayItem()\" class=\"cancel-button\">\n                {{dialogData.createDialogData.cancelButtonLabel}}\n            </button>\n        </mat-dialog-actions>\n    </form>\n\n</ng-template>", styles: ["mat-form-field{width:100%}mat-dialog-actions{justify-content:space-between}::ng-deep .mat-tab-body-wrapper{margin-left:-12px;margin-right:-12px}::ng-deep mat-tab-body{padding-top:10px;padding-left:12px;padding-right:12px}::ng-deep mat-tab-body .mat-tab-body-content{overflow:initial}::ng-deep .mat-form-field.mat-form-field-disabled .mat-form-field-wrapper .mat-form-field-underline{background-image:none;height:1px;background-color:#0000006b}::ng-deep .mat-form-field.mat-form-field-disabled .mat-chip.mat-standard-chip.mat-chip-disabled{opacity:1}::ng-deep .mat-form-field.mat-form-field-disabled .mat-chip.mat-standard-chip.mat-chip-disabled button{opacity:.2}::ng-deep .mat-form-field.mat-form-field-disabled .mat-select-disabled .mat-select-value{color:#000}::ng-deep .mat-form-field.mat-form-field-disabled .mat-date-range-input-inner:disabled{color:#000}::ng-deep .mat-form-field .mat-slide-toggle.mat-disabled{opacity:1}::ng-deep .mat-input-element:disabled{color:#000}.entityArray .elevation-container{border-radius:5px;padding:15px;margin-bottom:15px;margin-top:15px}.entityArray .array-headline{padding-bottom:10px}.entityArray .buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px}.entityArray mat-table{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:25px}.entityArray .mat-column-select{flex:0 0 75px}.entityArray .array-error{display:flex;align-items:center;justify-content:center;margin-top:-25.8px;border:1px solid #E0E0E0;background-color:#f8d3d7;color:#721c24;height:25.8px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i4$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5$3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5$3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5$3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5$3.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i5$3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5$3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5$3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5$3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5$3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5$3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "component", type: i6$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: StringInputComponent, selector: "string-input" }, { kind: "component", type: StringTextboxInputComponent, selector: "string-textbox-input" }, { kind: "component", type: StringAutocompleteInputComponent, selector: "string-autocomplete-input" }, { kind: "component", type: StringDropdownInputComponent, selector: "string-dropdown-input" }, { kind: "component", type: StringPasswordInputComponent, selector: "string-password-input" }, { kind: "component", type: BooleanCheckboxInputComponent, selector: "boolean-checkbox-input" }, { kind: "component", type: BooleanToggleInputComponent, selector: "boolean-toggle-input" }, { kind: "component", type: BooleanDropdownInputComponent, selector: "boolean-dropdown-input" }, { kind: "component", type: NumberInputComponent, selector: "number-input" }, { kind: "component", type: NumberDropdownInputComponent, selector: "number-dropdown-input" }, { kind: "component", type: NumberSliderInputComponent, selector: "number-slider-input" }, { kind: "component", type: ArrayStringChipsInputComponent, selector: "array-string-chips-input" }, { kind: "component", type: ArrayStringAutocompleteChipsComponent, selector: "array-string-autocomplete-chips" }, { kind: "component", type: DateInputComponent, selector: "date-input" }, { kind: "component", type: DateRangeInputComponent, selector: "date-range-input" }, { kind: "component", type: DateTimeInputComponent, selector: "date-time-input" }, { kind: "component", type: ArrayDateInputComponent, selector: "array-date-input" }, { kind: "component", type: ArrayDateTimeInputComponent, selector: "array-date-time-input" }, { kind: "component", type: ArrayDateRangeInputComponent, selector: "array-date-range-input" }, { kind: "component", type: FileImageInputComponent, selector: "file-image-input" }, { kind: "component", type: FileDefaultInputComponent, selector: "file-default-input" }, { kind: "component", type: CustomInputComponent, selector: "custom-input" }, { kind: "component", type: NgxMatEntityInputComponent, selector: "ngx-mat-entity-input", inputs: ["entity", "propertyKey", "getValidationErrorMessage", "hideOmitForCreate", "hideOmitForEdit", "isReadOnly"], outputs: ["inputChangeEvent"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: NgxMatEntityInputComponent, decorators: [{
+NgxMatEntityInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: NgxMatEntityInputComponent, deps: [{ token: i1.MatDialog }, { token: NGX_GET_VALIDATION_ERROR_MESSAGE }], target: i0.ɵɵFactoryTarget.Component });
+NgxMatEntityInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: NgxMatEntityInputComponent, selector: "ngx-mat-entity-input", inputs: { entity: "entity", propertyKey: "propertyKey", getValidationErrorMessage: "getValidationErrorMessage", hideOmitForCreate: "hideOmitForCreate", hideOmitForEdit: "hideOmitForEdit", isReadOnly: "isReadOnly" }, outputs: { inputChangeEvent: "inputChangeEvent" }, viewQueries: [{ propertyName: "addArrayItemDialog", first: true, predicate: ["addArrayItemDialog"], descendants: true }], ngImport: i0, template: "<div [ngSwitch]=\"type\" *ngIf=\"!(hideOmitForCreate && metadata.omitForCreate) && !(hideOmitForEdit && metadata.omitForUpdate)\">\n    <!-------------------------------------------->\n    <!-----------------Strings-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.STRING\">\n        <string-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </string-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_TEXTBOX\">\n        <string-textbox-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </string-textbox-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_AUTOCOMPLETE\">\n        <string-autocomplete-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </string-autocomplete-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_DROPDOWN\">\n        <string-dropdown-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </string-dropdown-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_PASSWORD\">\n        <string-password-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </string-password-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-----------------Booleans------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_CHECKBOX\">\n        <boolean-checkbox-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </boolean-checkbox-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_TOGGLE\">\n        <boolean-toggle-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </boolean-toggle-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_DROPDOWN\">\n        <boolean-dropdown-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </boolean-dropdown-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!------------------Numbers------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.NUMBER\">\n        <number-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </number-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.NUMBER_DROPDOWN\">\n        <number-dropdown-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </number-dropdown-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.NUMBER_SLIDER\">\n        <number-slider-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </number-slider-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Object------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.OBJECT\">\n        <b>{{metadataDefaultObject.displayName}}</b>\n        <!-- iterates over the object properties -->\n        <mat-tab-group *ngIf=\"objectPropertyTabs.length > 1\" preserveContent>\n            <mat-tab *ngFor=\"let tab of objectPropertyTabs; let tI = index; trackBy: trackByFn\" [label]=\"tab.tabName\">\n                <div class=\"row\" *ngFor=\"let row of tab.rows;\">\n                    <ngx-mat-entity-input *ngFor=\"let key of row.keys; let rI = index; trackBy: trackByFn\"\n                        [entity]=\"objectProperty\"\n                        [propertyKey]=\"key\"\n                        [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                        [hideOmitForCreate]=\"hideOmitForCreate\"\n                        [hideOmitForEdit]=\"hideOmitForEdit\"\n                        [isReadOnly]=\"internalIsReadOnly\"\n                        class=\"col-lg-{{EntityUtilities.getWidth(objectProperty, key, 'lg')}} col-md-{{EntityUtilities.getWidth(objectProperty, key, 'md')}} col-sm-{{EntityUtilities.getWidth(objectProperty, key, 'sm')}}\"\n                        (inputChangeEvent)=\"emitChange()\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </mat-tab>\n        </mat-tab-group>\n\n        <div *ngIf=\"objectPropertyTabs.length <= 1\">\n            <div class=\"row\" *ngFor=\"let row of objectPropertyTabs[0].rows\">\n                <ngx-mat-entity-input *ngFor=\"let key of row.keys; let i = index; trackBy: trackByFn\"\n                    [entity]=\"objectProperty\"\n                    [propertyKey]=\"key\"\n                    [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                    [hideOmitForCreate]=\"hideOmitForCreate\"\n                    [hideOmitForEdit]=\"hideOmitForEdit\"\n                    [isReadOnly]=\"internalIsReadOnly\"\n                    class=\"col-lg-{{EntityUtilities.getWidth(objectProperty, key, 'lg')}} col-md-{{EntityUtilities.getWidth(objectProperty, key, 'md')}} col-sm-{{EntityUtilities.getWidth(objectProperty, key, 'sm')}}\"\n                    (inputChangeEvent)=\"emitChange()\"\n                >\n                </ngx-mat-entity-input>\n            </div>\n        </div>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Array-------------------->\n    <!-------------------------------------------->\n    <div class=\"entityArray\" *ngSwitchCase=\"DecoratorTypes.ARRAY\">\n        <div class=\"mat-elevation-z8 elevation-container\">\n            <div class=\"array-headline\">\n                <b>{{metadataEntityArray.displayName}}</b>\n            </div>\n            <div *ngIf=\"metadataEntityArray.createInline && !internalIsReadOnly\">\n                <mat-tab-group *ngIf=\"arrayItemInlineTabs.length > 1\" preserveContent>\n                    <mat-tab *ngFor=\"let tab of arrayItemInlineTabs\" [label]=\"tab.tabName\">\n                        <div class=\"row\" *ngFor=\"let row of tab.rows\">\n                            <ngx-mat-entity-input\n                                *ngFor=\"let key of row.keys; let i = index; trackBy: trackByFn\"\n                                [entity]=\"arrayItem\"\n                                [propertyKey]=\"key\"\n                                [hideOmitForCreate]=\"true\"\n                                [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                                class=\"col-lg-{{EntityUtilities.getWidth(arrayItem, key, 'lg')}} col-md-{{EntityUtilities.getWidth(arrayItem, key, 'md')}} col-sm-{{EntityUtilities.getWidth(arrayItem, key, 'sm')}}\"\n                                (inputChangeEvent)=\"checkIsArrayItemValid()\"\n                            >\n                            </ngx-mat-entity-input>\n                        </div>\n                    </mat-tab>\n                </mat-tab-group>\n\n                <div *ngIf=\"arrayItemInlineTabs.length <= 1\">\n                    <div class=\"row\" *ngFor=\"let row of arrayItemInlineTabs[0].rows\">\n                        <ngx-mat-entity-input\n                            *ngFor=\"let key of row.keys; let i = index; trackBy: trackByFn\"\n                            [entity]=\"arrayItem\"\n                            [propertyKey]=\"key\"\n                            [hideOmitForCreate]=\"true\"\n                            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                            class=\"col-lg-{{EntityUtilities.getWidth(arrayItem, key, 'lg')}} col-md-{{EntityUtilities.getWidth(arrayItem, key, 'md')}} col-sm-{{EntityUtilities.getWidth(arrayItem, key, 'sm')}}\"\n                            (inputChangeEvent)=\"checkIsArrayItemValid()\"\n                        >\n                        </ngx-mat-entity-input>\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"buttons\" *ngIf=\"!internalIsReadOnly\">\n                <button type=\"button\" mat-raised-button\n                    [disabled]=\"metadataEntityArray.createInline && !isArrayItemValid\"\n                    (click)=\"addEntity()\">\n                    {{metadataEntityArray.addButtonLabel}}\n                </button>\n                <button type=\"button\" mat-raised-button\n                    [disabled]=\"!selection.selected.length\"\n                    (click)=\"remove()\">\n                    {{metadataEntityArray.removeButtonLabel}}\n                </button>\n            </div>\n        \n            <mat-table [dataSource]=\"dataSource\">\n                <!-- select Column -->\n                <ng-container matColumnDef=\"select\" *ngIf=\"!internalIsReadOnly\">\n                    <mat-header-cell *matHeaderCellDef>\n                        <mat-checkbox\n                            [disabled]=\"!dataSource.data.length\" (change)=\"$event ? SelectionUtilities.masterToggle(selection, dataSource) : null\"\n                            [checked]=\"selection.hasValue() && SelectionUtilities.isAllSelected(selection, dataSource)\"\n                            [indeterminate]=\"selection.hasValue() && !SelectionUtilities.isAllSelected(selection, dataSource)\">\n                        </mat-checkbox>\n                    </mat-header-cell>\n                    <mat-cell *matCellDef=\"let module\">\n                        <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(module) : null\" [checked]=\"selection.isSelected(module)\"></mat-checkbox>\n                    </mat-cell>\n                </ng-container>\n            \n                <ng-container *ngFor=\"let dCol of metadataEntityArray.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n                    <mat-header-cell *matHeaderCellDef>\n                        {{dCol.displayName}}\n                    </mat-header-cell>\n                    <mat-cell class=\"entity\" *matCellDef=\"let entity\">\n                        {{dCol.value(entity)}}\n                    </mat-cell>\n                </ng-container>\n            \n                <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n                <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n            </mat-table>\n        \n            <div class=\"array-error\" *ngIf=\"metadataEntityArray.required && !dataSource.data.length\">\n                {{metadataEntityArray.missingErrorMessage}}\n            </div>\n        </div>\n    </div>\n\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_DATE\">\n        <array-date-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </array-date-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_DATE_TIME\">\n        <array-date-time-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </array-date-time-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_DATE_RANGE\">\n        <array-date-range-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </array-date-range-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_STRING_CHIPS\">\n        <array-string-chips-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </array-string-chips-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_STRING_AUTOCOMPLETE_CHIPS\">\n        <array-string-autocomplete-chips\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </array-string-autocomplete-chips>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Dates-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.DATE\">\n        <date-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </date-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.DATE_RANGE\">\n        <date-range-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </date-range-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.DATE_TIME\">\n        <date-time-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </date-time-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Files-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.FILE_DEFAULT\">\n        <file-default-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </file-default-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.FILE_IMAGE\">\n        <file-image-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </file-image-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------- references many ------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.REFERENCES_MANY\">\n        <references-many-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </references-many-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Custom------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.CUSTOM\">\n        <custom-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </custom-input>\n    </div>\n\n    <div *ngSwitchDefault>ERROR: The type {{type}} is not known.</div>\n</div>\n\n<!--------------------------------------------------------->\n<!--------------------Add Array Item Dialog---------------->\n<!--------------------------------------------------------->\n<ng-template #addArrayItemDialog>\n    <div class=\"mat-dialog-title\" mat-dialog-title>{{dialogData.createDialogData.title}}</div>\n\n    <form>\n        <mat-dialog-content>\n            <mat-tab-group *ngIf=\"arrayItemDialogTabs.length > 1\" preserveContent>\n                <mat-tab *ngFor=\"let tab of arrayItemDialogTabs\" [label]=\"tab.tabName\">\n                    <div class=\"row\" *ngFor=\"let row of tab.rows\">\n                        <ngx-mat-entity-input\n                            *ngFor=\"let key of row.keys\"\n                            [entity]=\"dialogData.entity\"\n                            [propertyKey]=\"key\"\n                            [hideOmitForCreate]=\"true\"\n                            [getValidationErrorMessage]=\"dialogData.getValidationErrorMessage\"\n                            class=\"col-lg-{{EntityUtilities.getWidth(dialogData.entity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(dialogData.entity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(dialogData.entity, key, 'sm')}}\"\n                            (inputChangeEvent)=\"checkIsDialogArrayItemValid()\"\n                        >\n                        </ngx-mat-entity-input>\n                    </div>\n                </mat-tab>\n            </mat-tab-group>\n    \n            <div *ngIf=\"arrayItemDialogTabs.length <= 1\">\n                <div class=\"row\" *ngFor=\"let row of arrayItemDialogTabs[0].rows\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"dialogData.entity\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForCreate]=\"true\"\n                        [getValidationErrorMessage]=\"dialogData.getValidationErrorMessage\"\n                        class=\"col-lg-{{EntityUtilities.getWidth(dialogData.entity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(dialogData.entity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(dialogData.entity, key, 'sm')}}\"\n                        (inputChangeEvent)=\"checkIsDialogArrayItemValid()\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </div>\n        </mat-dialog-content>\n    \n        <mat-dialog-actions>\n            <button type=\"submit\" mat-raised-button (click)=\"addArrayItem()\" [class.mat-button-disabled]=\"!isDialogArrayItemValid\">\n                {{dialogData.createDialogData.createButtonLabel}}\n            </button>\n            <button type=\"button\" mat-raised-button (click)=\"cancelAddArrayItem()\" class=\"cancel-button\">\n                {{dialogData.createDialogData.cancelButtonLabel}}\n            </button>\n        </mat-dialog-actions>\n    </form>\n\n</ng-template>", styles: [".mat-dialog-title{padding-top:12px;display:flex}.mat-dialog-title button{display:block;margin-left:auto}mat-form-field{width:100%}mat-dialog-actions{justify-content:space-between;padding-left:24px;padding-right:24px}::ng-deep .mat-mdc-tab-body-wrapper{margin-left:-12px;margin-right:-12px}::ng-deep mat-tab-body{padding-top:10px;padding-left:12px;padding-right:12px}::ng-deep mat-tab-body .mat-mdc-tab-body-content{overflow:initial}::ng-deep .mat-mdc-form-field.mat-form-field-disabled label{color:#0009}::ng-deep .mat-mdc-form-field.mat-form-field-disabled input,::ng-deep .mat-mdc-form-field.mat-form-field-disabled textarea,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-select-disabled,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-select-value{color:#000}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-chip.mat-mdc-standard-chip.mat-mdc-chip-disabled{opacity:1}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-chip.mat-mdc-standard-chip.mat-mdc-chip-disabled button{opacity:.2}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-date-range-input-inner:disabled{color:#000}::ng-deep .mat-mdc-form-field .mat-mdc-slide-toggle{opacity:1}.entityArray .elevation-container{border-radius:5px;padding:15px;margin-bottom:15px;margin-top:15px}.entityArray .array-headline{padding-bottom:10px}.entityArray .buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px}.entityArray mat-table{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:25px}.entityArray .mat-column-select{flex:0 0 75px}.entityArray .array-error{display:flex;align-items:center;justify-content:center;margin-top:-25.8px;border:1px solid #E0E0E0;background-color:#f8d3d7;color:#721c24;height:25.8px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i4$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i5$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6$1.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i6$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }, { kind: "component", type: StringInputComponent, selector: "string-input" }, { kind: "component", type: StringTextboxInputComponent, selector: "string-textbox-input" }, { kind: "component", type: StringAutocompleteInputComponent, selector: "string-autocomplete-input" }, { kind: "component", type: StringDropdownInputComponent, selector: "string-dropdown-input" }, { kind: "component", type: StringPasswordInputComponent, selector: "string-password-input" }, { kind: "component", type: BooleanCheckboxInputComponent, selector: "boolean-checkbox-input" }, { kind: "component", type: BooleanToggleInputComponent, selector: "boolean-toggle-input" }, { kind: "component", type: BooleanDropdownInputComponent, selector: "boolean-dropdown-input" }, { kind: "component", type: NumberInputComponent, selector: "number-input" }, { kind: "component", type: NumberDropdownInputComponent, selector: "number-dropdown-input" }, { kind: "component", type: NumberSliderInputComponent, selector: "number-slider-input" }, { kind: "component", type: ArrayStringChipsInputComponent, selector: "array-string-chips-input" }, { kind: "component", type: ArrayStringAutocompleteChipsComponent, selector: "array-string-autocomplete-chips" }, { kind: "component", type: DateInputComponent, selector: "date-input" }, { kind: "component", type: DateRangeInputComponent, selector: "date-range-input" }, { kind: "component", type: DateTimeInputComponent, selector: "date-time-input" }, { kind: "component", type: ArrayDateInputComponent, selector: "array-date-input" }, { kind: "component", type: ArrayDateTimeInputComponent, selector: "array-date-time-input" }, { kind: "component", type: ArrayDateRangeInputComponent, selector: "array-date-range-input" }, { kind: "component", type: FileImageInputComponent, selector: "file-image-input" }, { kind: "component", type: FileDefaultInputComponent, selector: "file-default-input" }, { kind: "component", type: ReferencesManyInputComponent, selector: "references-many-input" }, { kind: "component", type: CustomInputComponent, selector: "custom-input" }, { kind: "component", type: NgxMatEntityInputComponent, selector: "ngx-mat-entity-input", inputs: ["entity", "propertyKey", "getValidationErrorMessage", "hideOmitForCreate", "hideOmitForEdit", "isReadOnly"], outputs: ["inputChangeEvent"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: NgxMatEntityInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-mat-entity-input', template: "<div [ngSwitch]=\"type\" *ngIf=\"!(hideOmitForCreate && metadata.omitForCreate) && !(hideOmitForEdit && metadata.omitForUpdate)\">\n    <!-------------------------------------------->\n    <!-----------------Strings-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.STRING\">\n        <string-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </string-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_TEXTBOX\">\n        <string-textbox-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </string-textbox-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_AUTOCOMPLETE\">\n        <string-autocomplete-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </string-autocomplete-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_DROPDOWN\">\n        <string-dropdown-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </string-dropdown-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_PASSWORD\">\n        <string-password-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </string-password-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-----------------Booleans------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_CHECKBOX\">\n        <boolean-checkbox-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </boolean-checkbox-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_TOGGLE\">\n        <boolean-toggle-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </boolean-toggle-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_DROPDOWN\">\n        <boolean-dropdown-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </boolean-dropdown-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!------------------Numbers------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.NUMBER\">\n        <number-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </number-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.NUMBER_DROPDOWN\">\n        <number-dropdown-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </number-dropdown-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.NUMBER_SLIDER\">\n        <number-slider-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </number-slider-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Object------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.OBJECT\">\n        <b>{{metadataDefaultObject.displayName}}</b>\n        <!-- iterates over the object properties -->\n        <mat-tab-group *ngIf=\"objectPropertyTabs.length > 1\" preserveContent>\n            <mat-tab *ngFor=\"let tab of objectPropertyTabs; let tI = index; trackBy: trackByFn\" [label]=\"tab.tabName\">\n                <div class=\"row\" *ngFor=\"let row of tab.rows;\">\n                    <ngx-mat-entity-input *ngFor=\"let key of row.keys; let rI = index; trackBy: trackByFn\"\n                        [entity]=\"objectProperty\"\n                        [propertyKey]=\"key\"\n                        [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                        [hideOmitForCreate]=\"hideOmitForCreate\"\n                        [hideOmitForEdit]=\"hideOmitForEdit\"\n                        [isReadOnly]=\"internalIsReadOnly\"\n                        class=\"col-lg-{{EntityUtilities.getWidth(objectProperty, key, 'lg')}} col-md-{{EntityUtilities.getWidth(objectProperty, key, 'md')}} col-sm-{{EntityUtilities.getWidth(objectProperty, key, 'sm')}}\"\n                        (inputChangeEvent)=\"emitChange()\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </mat-tab>\n        </mat-tab-group>\n\n        <div *ngIf=\"objectPropertyTabs.length <= 1\">\n            <div class=\"row\" *ngFor=\"let row of objectPropertyTabs[0].rows\">\n                <ngx-mat-entity-input *ngFor=\"let key of row.keys; let i = index; trackBy: trackByFn\"\n                    [entity]=\"objectProperty\"\n                    [propertyKey]=\"key\"\n                    [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                    [hideOmitForCreate]=\"hideOmitForCreate\"\n                    [hideOmitForEdit]=\"hideOmitForEdit\"\n                    [isReadOnly]=\"internalIsReadOnly\"\n                    class=\"col-lg-{{EntityUtilities.getWidth(objectProperty, key, 'lg')}} col-md-{{EntityUtilities.getWidth(objectProperty, key, 'md')}} col-sm-{{EntityUtilities.getWidth(objectProperty, key, 'sm')}}\"\n                    (inputChangeEvent)=\"emitChange()\"\n                >\n                </ngx-mat-entity-input>\n            </div>\n        </div>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Array-------------------->\n    <!-------------------------------------------->\n    <div class=\"entityArray\" *ngSwitchCase=\"DecoratorTypes.ARRAY\">\n        <div class=\"mat-elevation-z8 elevation-container\">\n            <div class=\"array-headline\">\n                <b>{{metadataEntityArray.displayName}}</b>\n            </div>\n            <div *ngIf=\"metadataEntityArray.createInline && !internalIsReadOnly\">\n                <mat-tab-group *ngIf=\"arrayItemInlineTabs.length > 1\" preserveContent>\n                    <mat-tab *ngFor=\"let tab of arrayItemInlineTabs\" [label]=\"tab.tabName\">\n                        <div class=\"row\" *ngFor=\"let row of tab.rows\">\n                            <ngx-mat-entity-input\n                                *ngFor=\"let key of row.keys; let i = index; trackBy: trackByFn\"\n                                [entity]=\"arrayItem\"\n                                [propertyKey]=\"key\"\n                                [hideOmitForCreate]=\"true\"\n                                [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                                class=\"col-lg-{{EntityUtilities.getWidth(arrayItem, key, 'lg')}} col-md-{{EntityUtilities.getWidth(arrayItem, key, 'md')}} col-sm-{{EntityUtilities.getWidth(arrayItem, key, 'sm')}}\"\n                                (inputChangeEvent)=\"checkIsArrayItemValid()\"\n                            >\n                            </ngx-mat-entity-input>\n                        </div>\n                    </mat-tab>\n                </mat-tab-group>\n\n                <div *ngIf=\"arrayItemInlineTabs.length <= 1\">\n                    <div class=\"row\" *ngFor=\"let row of arrayItemInlineTabs[0].rows\">\n                        <ngx-mat-entity-input\n                            *ngFor=\"let key of row.keys; let i = index; trackBy: trackByFn\"\n                            [entity]=\"arrayItem\"\n                            [propertyKey]=\"key\"\n                            [hideOmitForCreate]=\"true\"\n                            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                            class=\"col-lg-{{EntityUtilities.getWidth(arrayItem, key, 'lg')}} col-md-{{EntityUtilities.getWidth(arrayItem, key, 'md')}} col-sm-{{EntityUtilities.getWidth(arrayItem, key, 'sm')}}\"\n                            (inputChangeEvent)=\"checkIsArrayItemValid()\"\n                        >\n                        </ngx-mat-entity-input>\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"buttons\" *ngIf=\"!internalIsReadOnly\">\n                <button type=\"button\" mat-raised-button\n                    [disabled]=\"metadataEntityArray.createInline && !isArrayItemValid\"\n                    (click)=\"addEntity()\">\n                    {{metadataEntityArray.addButtonLabel}}\n                </button>\n                <button type=\"button\" mat-raised-button\n                    [disabled]=\"!selection.selected.length\"\n                    (click)=\"remove()\">\n                    {{metadataEntityArray.removeButtonLabel}}\n                </button>\n            </div>\n        \n            <mat-table [dataSource]=\"dataSource\">\n                <!-- select Column -->\n                <ng-container matColumnDef=\"select\" *ngIf=\"!internalIsReadOnly\">\n                    <mat-header-cell *matHeaderCellDef>\n                        <mat-checkbox\n                            [disabled]=\"!dataSource.data.length\" (change)=\"$event ? SelectionUtilities.masterToggle(selection, dataSource) : null\"\n                            [checked]=\"selection.hasValue() && SelectionUtilities.isAllSelected(selection, dataSource)\"\n                            [indeterminate]=\"selection.hasValue() && !SelectionUtilities.isAllSelected(selection, dataSource)\">\n                        </mat-checkbox>\n                    </mat-header-cell>\n                    <mat-cell *matCellDef=\"let module\">\n                        <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(module) : null\" [checked]=\"selection.isSelected(module)\"></mat-checkbox>\n                    </mat-cell>\n                </ng-container>\n            \n                <ng-container *ngFor=\"let dCol of metadataEntityArray.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n                    <mat-header-cell *matHeaderCellDef>\n                        {{dCol.displayName}}\n                    </mat-header-cell>\n                    <mat-cell class=\"entity\" *matCellDef=\"let entity\">\n                        {{dCol.value(entity)}}\n                    </mat-cell>\n                </ng-container>\n            \n                <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n                <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n            </mat-table>\n        \n            <div class=\"array-error\" *ngIf=\"metadataEntityArray.required && !dataSource.data.length\">\n                {{metadataEntityArray.missingErrorMessage}}\n            </div>\n        </div>\n    </div>\n\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_DATE\">\n        <array-date-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </array-date-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_DATE_TIME\">\n        <array-date-time-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </array-date-time-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_DATE_RANGE\">\n        <array-date-range-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </array-date-range-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_STRING_CHIPS\">\n        <array-string-chips-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </array-string-chips-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_STRING_AUTOCOMPLETE_CHIPS\">\n        <array-string-autocomplete-chips\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </array-string-autocomplete-chips>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Dates-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.DATE\">\n        <date-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </date-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.DATE_RANGE\">\n        <date-range-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </date-range-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.DATE_TIME\">\n        <date-time-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </date-time-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Files-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.FILE_DEFAULT\">\n        <file-default-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </file-default-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.FILE_IMAGE\">\n        <file-image-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </file-image-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Custom------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.CUSTOM\">\n        <custom-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </custom-input>\n    </div>\n\n    <div *ngSwitchDefault>ERROR: The type {{type}} is not known.</div>\n</div>\n\n<!--------------------------------------------------------->\n<!--------------------Add Array Item Dialog---------------->\n<!--------------------------------------------------------->\n<ng-template #addArrayItemDialog>\n    <h2 mat-dialog-title>{{dialogData.createDialogData.title}}</h2>\n\n    <form class=\"row\">\n        <mat-dialog-content>\n            <mat-tab-group *ngIf=\"arrayItemDialogTabs.length > 1\" preserveContent>\n                <mat-tab *ngFor=\"let tab of arrayItemDialogTabs\" [label]=\"tab.tabName\">\n                    <div class=\"row\" *ngFor=\"let row of tab.rows\">\n                        <ngx-mat-entity-input\n                            *ngFor=\"let key of row.keys\"\n                            [entity]=\"dialogData.entity\"\n                            [propertyKey]=\"key\"\n                            [hideOmitForCreate]=\"true\"\n                            [getValidationErrorMessage]=\"dialogData.getValidationErrorMessage\"\n                            class=\"col-lg-{{EntityUtilities.getWidth(dialogData.entity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(dialogData.entity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(dialogData.entity, key, 'sm')}}\"\n                            (inputChangeEvent)=\"checkIsDialogArrayItemValid()\"\n                        >\n                        </ngx-mat-entity-input>\n                    </div>\n                </mat-tab>\n            </mat-tab-group>\n    \n            <div *ngIf=\"arrayItemDialogTabs.length <= 1\">\n                <div class=\"row\" *ngFor=\"let row of arrayItemDialogTabs[0].rows\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"dialogData.entity\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForCreate]=\"true\"\n                        [getValidationErrorMessage]=\"dialogData.getValidationErrorMessage\"\n                        class=\"col-lg-{{EntityUtilities.getWidth(dialogData.entity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(dialogData.entity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(dialogData.entity, key, 'sm')}}\"\n                        (inputChangeEvent)=\"checkIsDialogArrayItemValid()\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </div>\n        </mat-dialog-content>\n    \n        <mat-dialog-actions>\n            <button type=\"submit\" mat-raised-button (click)=\"addArrayItem()\" [class.mat-button-disabled]=\"!isDialogArrayItemValid\">\n                {{dialogData.createDialogData.createButtonLabel}}\n            </button>\n            <button type=\"button\" mat-raised-button (click)=\"cancelAddArrayItem()\" class=\"cancel-button\">\n                {{dialogData.createDialogData.cancelButtonLabel}}\n            </button>\n        </mat-dialog-actions>\n    </form>\n\n</ng-template>", styles: ["mat-form-field{width:100%}mat-dialog-actions{justify-content:space-between}::ng-deep .mat-tab-body-wrapper{margin-left:-12px;margin-right:-12px}::ng-deep mat-tab-body{padding-top:10px;padding-left:12px;padding-right:12px}::ng-deep mat-tab-body .mat-tab-body-content{overflow:initial}::ng-deep .mat-form-field.mat-form-field-disabled .mat-form-field-wrapper .mat-form-field-underline{background-image:none;height:1px;background-color:#0000006b}::ng-deep .mat-form-field.mat-form-field-disabled .mat-chip.mat-standard-chip.mat-chip-disabled{opacity:1}::ng-deep .mat-form-field.mat-form-field-disabled .mat-chip.mat-standard-chip.mat-chip-disabled button{opacity:.2}::ng-deep .mat-form-field.mat-form-field-disabled .mat-select-disabled .mat-select-value{color:#000}::ng-deep .mat-form-field.mat-form-field-disabled .mat-date-range-input-inner:disabled{color:#000}::ng-deep .mat-form-field .mat-slide-toggle.mat-disabled{opacity:1}::ng-deep .mat-input-element:disabled{color:#000}.entityArray .elevation-container{border-radius:5px;padding:15px;margin-bottom:15px;margin-top:15px}.entityArray .array-headline{padding-bottom:10px}.entityArray .buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px}.entityArray mat-table{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:25px}.entityArray .mat-column-select{flex:0 0 75px}.entityArray .array-error{display:flex;align-items:center;justify-content:center;margin-top:-25.8px;border:1px solid #E0E0E0;background-color:#f8d3d7;color:#721c24;height:25.8px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}\n"] }]
+            args: [{ selector: 'ngx-mat-entity-input', template: "<div [ngSwitch]=\"type\" *ngIf=\"!(hideOmitForCreate && metadata.omitForCreate) && !(hideOmitForEdit && metadata.omitForUpdate)\">\n    <!-------------------------------------------->\n    <!-----------------Strings-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.STRING\">\n        <string-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </string-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_TEXTBOX\">\n        <string-textbox-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </string-textbox-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_AUTOCOMPLETE\">\n        <string-autocomplete-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </string-autocomplete-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_DROPDOWN\">\n        <string-dropdown-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </string-dropdown-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_PASSWORD\">\n        <string-password-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </string-password-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-----------------Booleans------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_CHECKBOX\">\n        <boolean-checkbox-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </boolean-checkbox-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_TOGGLE\">\n        <boolean-toggle-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </boolean-toggle-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_DROPDOWN\">\n        <boolean-dropdown-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </boolean-dropdown-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!------------------Numbers------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.NUMBER\">\n        <number-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </number-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.NUMBER_DROPDOWN\">\n        <number-dropdown-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </number-dropdown-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.NUMBER_SLIDER\">\n        <number-slider-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </number-slider-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Object------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.OBJECT\">\n        <b>{{metadataDefaultObject.displayName}}</b>\n        <!-- iterates over the object properties -->\n        <mat-tab-group *ngIf=\"objectPropertyTabs.length > 1\" preserveContent>\n            <mat-tab *ngFor=\"let tab of objectPropertyTabs; let tI = index; trackBy: trackByFn\" [label]=\"tab.tabName\">\n                <div class=\"row\" *ngFor=\"let row of tab.rows;\">\n                    <ngx-mat-entity-input *ngFor=\"let key of row.keys; let rI = index; trackBy: trackByFn\"\n                        [entity]=\"objectProperty\"\n                        [propertyKey]=\"key\"\n                        [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                        [hideOmitForCreate]=\"hideOmitForCreate\"\n                        [hideOmitForEdit]=\"hideOmitForEdit\"\n                        [isReadOnly]=\"internalIsReadOnly\"\n                        class=\"col-lg-{{EntityUtilities.getWidth(objectProperty, key, 'lg')}} col-md-{{EntityUtilities.getWidth(objectProperty, key, 'md')}} col-sm-{{EntityUtilities.getWidth(objectProperty, key, 'sm')}}\"\n                        (inputChangeEvent)=\"emitChange()\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </mat-tab>\n        </mat-tab-group>\n\n        <div *ngIf=\"objectPropertyTabs.length <= 1\">\n            <div class=\"row\" *ngFor=\"let row of objectPropertyTabs[0].rows\">\n                <ngx-mat-entity-input *ngFor=\"let key of row.keys; let i = index; trackBy: trackByFn\"\n                    [entity]=\"objectProperty\"\n                    [propertyKey]=\"key\"\n                    [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                    [hideOmitForCreate]=\"hideOmitForCreate\"\n                    [hideOmitForEdit]=\"hideOmitForEdit\"\n                    [isReadOnly]=\"internalIsReadOnly\"\n                    class=\"col-lg-{{EntityUtilities.getWidth(objectProperty, key, 'lg')}} col-md-{{EntityUtilities.getWidth(objectProperty, key, 'md')}} col-sm-{{EntityUtilities.getWidth(objectProperty, key, 'sm')}}\"\n                    (inputChangeEvent)=\"emitChange()\"\n                >\n                </ngx-mat-entity-input>\n            </div>\n        </div>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Array-------------------->\n    <!-------------------------------------------->\n    <div class=\"entityArray\" *ngSwitchCase=\"DecoratorTypes.ARRAY\">\n        <div class=\"mat-elevation-z8 elevation-container\">\n            <div class=\"array-headline\">\n                <b>{{metadataEntityArray.displayName}}</b>\n            </div>\n            <div *ngIf=\"metadataEntityArray.createInline && !internalIsReadOnly\">\n                <mat-tab-group *ngIf=\"arrayItemInlineTabs.length > 1\" preserveContent>\n                    <mat-tab *ngFor=\"let tab of arrayItemInlineTabs\" [label]=\"tab.tabName\">\n                        <div class=\"row\" *ngFor=\"let row of tab.rows\">\n                            <ngx-mat-entity-input\n                                *ngFor=\"let key of row.keys; let i = index; trackBy: trackByFn\"\n                                [entity]=\"arrayItem\"\n                                [propertyKey]=\"key\"\n                                [hideOmitForCreate]=\"true\"\n                                [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                                class=\"col-lg-{{EntityUtilities.getWidth(arrayItem, key, 'lg')}} col-md-{{EntityUtilities.getWidth(arrayItem, key, 'md')}} col-sm-{{EntityUtilities.getWidth(arrayItem, key, 'sm')}}\"\n                                (inputChangeEvent)=\"checkIsArrayItemValid()\"\n                            >\n                            </ngx-mat-entity-input>\n                        </div>\n                    </mat-tab>\n                </mat-tab-group>\n\n                <div *ngIf=\"arrayItemInlineTabs.length <= 1\">\n                    <div class=\"row\" *ngFor=\"let row of arrayItemInlineTabs[0].rows\">\n                        <ngx-mat-entity-input\n                            *ngFor=\"let key of row.keys; let i = index; trackBy: trackByFn\"\n                            [entity]=\"arrayItem\"\n                            [propertyKey]=\"key\"\n                            [hideOmitForCreate]=\"true\"\n                            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                            class=\"col-lg-{{EntityUtilities.getWidth(arrayItem, key, 'lg')}} col-md-{{EntityUtilities.getWidth(arrayItem, key, 'md')}} col-sm-{{EntityUtilities.getWidth(arrayItem, key, 'sm')}}\"\n                            (inputChangeEvent)=\"checkIsArrayItemValid()\"\n                        >\n                        </ngx-mat-entity-input>\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"buttons\" *ngIf=\"!internalIsReadOnly\">\n                <button type=\"button\" mat-raised-button\n                    [disabled]=\"metadataEntityArray.createInline && !isArrayItemValid\"\n                    (click)=\"addEntity()\">\n                    {{metadataEntityArray.addButtonLabel}}\n                </button>\n                <button type=\"button\" mat-raised-button\n                    [disabled]=\"!selection.selected.length\"\n                    (click)=\"remove()\">\n                    {{metadataEntityArray.removeButtonLabel}}\n                </button>\n            </div>\n        \n            <mat-table [dataSource]=\"dataSource\">\n                <!-- select Column -->\n                <ng-container matColumnDef=\"select\" *ngIf=\"!internalIsReadOnly\">\n                    <mat-header-cell *matHeaderCellDef>\n                        <mat-checkbox\n                            [disabled]=\"!dataSource.data.length\" (change)=\"$event ? SelectionUtilities.masterToggle(selection, dataSource) : null\"\n                            [checked]=\"selection.hasValue() && SelectionUtilities.isAllSelected(selection, dataSource)\"\n                            [indeterminate]=\"selection.hasValue() && !SelectionUtilities.isAllSelected(selection, dataSource)\">\n                        </mat-checkbox>\n                    </mat-header-cell>\n                    <mat-cell *matCellDef=\"let module\">\n                        <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(module) : null\" [checked]=\"selection.isSelected(module)\"></mat-checkbox>\n                    </mat-cell>\n                </ng-container>\n            \n                <ng-container *ngFor=\"let dCol of metadataEntityArray.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n                    <mat-header-cell *matHeaderCellDef>\n                        {{dCol.displayName}}\n                    </mat-header-cell>\n                    <mat-cell class=\"entity\" *matCellDef=\"let entity\">\n                        {{dCol.value(entity)}}\n                    </mat-cell>\n                </ng-container>\n            \n                <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n                <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n            </mat-table>\n        \n            <div class=\"array-error\" *ngIf=\"metadataEntityArray.required && !dataSource.data.length\">\n                {{metadataEntityArray.missingErrorMessage}}\n            </div>\n        </div>\n    </div>\n\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_DATE\">\n        <array-date-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </array-date-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_DATE_TIME\">\n        <array-date-time-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </array-date-time-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_DATE_RANGE\">\n        <array-date-range-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </array-date-range-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_STRING_CHIPS\">\n        <array-string-chips-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </array-string-chips-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_STRING_AUTOCOMPLETE_CHIPS\">\n        <array-string-autocomplete-chips\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </array-string-autocomplete-chips>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Dates-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.DATE\">\n        <date-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </date-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.DATE_RANGE\">\n        <date-range-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </date-range-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.DATE_TIME\">\n        <date-time-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </date-time-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Files-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.FILE_DEFAULT\">\n        <file-default-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </file-default-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.FILE_IMAGE\">\n        <file-image-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </file-image-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------- references many ------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.REFERENCES_MANY\">\n        <references-many-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </references-many-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Custom------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.CUSTOM\">\n        <custom-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </custom-input>\n    </div>\n\n    <div *ngSwitchDefault>ERROR: The type {{type}} is not known.</div>\n</div>\n\n<!--------------------------------------------------------->\n<!--------------------Add Array Item Dialog---------------->\n<!--------------------------------------------------------->\n<ng-template #addArrayItemDialog>\n    <div class=\"mat-dialog-title\" mat-dialog-title>{{dialogData.createDialogData.title}}</div>\n\n    <form>\n        <mat-dialog-content>\n            <mat-tab-group *ngIf=\"arrayItemDialogTabs.length > 1\" preserveContent>\n                <mat-tab *ngFor=\"let tab of arrayItemDialogTabs\" [label]=\"tab.tabName\">\n                    <div class=\"row\" *ngFor=\"let row of tab.rows\">\n                        <ngx-mat-entity-input\n                            *ngFor=\"let key of row.keys\"\n                            [entity]=\"dialogData.entity\"\n                            [propertyKey]=\"key\"\n                            [hideOmitForCreate]=\"true\"\n                            [getValidationErrorMessage]=\"dialogData.getValidationErrorMessage\"\n                            class=\"col-lg-{{EntityUtilities.getWidth(dialogData.entity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(dialogData.entity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(dialogData.entity, key, 'sm')}}\"\n                            (inputChangeEvent)=\"checkIsDialogArrayItemValid()\"\n                        >\n                        </ngx-mat-entity-input>\n                    </div>\n                </mat-tab>\n            </mat-tab-group>\n    \n            <div *ngIf=\"arrayItemDialogTabs.length <= 1\">\n                <div class=\"row\" *ngFor=\"let row of arrayItemDialogTabs[0].rows\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"dialogData.entity\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForCreate]=\"true\"\n                        [getValidationErrorMessage]=\"dialogData.getValidationErrorMessage\"\n                        class=\"col-lg-{{EntityUtilities.getWidth(dialogData.entity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(dialogData.entity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(dialogData.entity, key, 'sm')}}\"\n                        (inputChangeEvent)=\"checkIsDialogArrayItemValid()\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </div>\n        </mat-dialog-content>\n    \n        <mat-dialog-actions>\n            <button type=\"submit\" mat-raised-button (click)=\"addArrayItem()\" [class.mat-button-disabled]=\"!isDialogArrayItemValid\">\n                {{dialogData.createDialogData.createButtonLabel}}\n            </button>\n            <button type=\"button\" mat-raised-button (click)=\"cancelAddArrayItem()\" class=\"cancel-button\">\n                {{dialogData.createDialogData.cancelButtonLabel}}\n            </button>\n        </mat-dialog-actions>\n    </form>\n\n</ng-template>", styles: [".mat-dialog-title{padding-top:12px;display:flex}.mat-dialog-title button{display:block;margin-left:auto}mat-form-field{width:100%}mat-dialog-actions{justify-content:space-between;padding-left:24px;padding-right:24px}::ng-deep .mat-mdc-tab-body-wrapper{margin-left:-12px;margin-right:-12px}::ng-deep mat-tab-body{padding-top:10px;padding-left:12px;padding-right:12px}::ng-deep mat-tab-body .mat-mdc-tab-body-content{overflow:initial}::ng-deep .mat-mdc-form-field.mat-form-field-disabled label{color:#0009}::ng-deep .mat-mdc-form-field.mat-form-field-disabled input,::ng-deep .mat-mdc-form-field.mat-form-field-disabled textarea,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-select-disabled,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-select-value{color:#000}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-chip.mat-mdc-standard-chip.mat-mdc-chip-disabled{opacity:1}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-chip.mat-mdc-standard-chip.mat-mdc-chip-disabled button{opacity:.2}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-date-range-input-inner:disabled{color:#000}::ng-deep .mat-mdc-form-field .mat-mdc-slide-toggle{opacity:1}.entityArray .elevation-container{border-radius:5px;padding:15px;margin-bottom:15px;margin-top:15px}.entityArray .array-headline{padding-bottom:10px}.entityArray .buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px}.entityArray mat-table{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:25px}.entityArray .mat-column-select{flex:0 0 75px}.entityArray .array-error{display:flex;align-items:center;justify-content:center;margin-top:-25.8px;border:1px solid #E0E0E0;background-color:#f8d3d7;color:#721c24;height:25.8px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}\n"] }]
         }], ctorParameters: function () {
         return [{ type: i1.MatDialog }, { type: undefined, decorators: [{
                         type: Inject,
@@ -3231,8 +3271,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
 
 class NgxMatEntityInputModule {
 }
-NgxMatEntityInputModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: NgxMatEntityInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NgxMatEntityInputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.1", ngImport: i0, type: NgxMatEntityInputModule, declarations: [StringInputComponent,
+NgxMatEntityInputModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: NgxMatEntityInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NgxMatEntityInputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.3", ngImport: i0, type: NgxMatEntityInputModule, declarations: [StringInputComponent,
         StringTextboxInputComponent,
         StringAutocompleteInputComponent,
         StringDropdownInputComponent,
@@ -3255,6 +3295,7 @@ NgxMatEntityInputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
         FileImageInputComponent,
         FileDefaultInputComponent,
         DragDropDirective,
+        ReferencesManyInputComponent,
         CustomInputComponent,
         NgxMatEntityInputComponent], imports: [CommonModule,
         MatInputModule,
@@ -3272,7 +3313,7 @@ NgxMatEntityInputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
         MatDatepickerModule,
         MatSliderModule,
         MatTabsModule], exports: [NgxMatEntityInputComponent] });
-NgxMatEntityInputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: NgxMatEntityInputModule, imports: [CommonModule,
+NgxMatEntityInputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: NgxMatEntityInputModule, imports: [CommonModule,
         MatInputModule,
         FormsModule,
         MatFormFieldModule,
@@ -3288,7 +3329,7 @@ NgxMatEntityInputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0",
         MatDatepickerModule,
         MatSliderModule,
         MatTabsModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: NgxMatEntityInputModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: NgxMatEntityInputModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -3315,6 +3356,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
                         FileImageInputComponent,
                         FileDefaultInputComponent,
                         DragDropDirective,
+                        ReferencesManyInputComponent,
                         CustomInputComponent,
                         NgxMatEntityInputComponent
                     ],
@@ -3429,11 +3471,11 @@ class NgxMatEntityCreateDialogComponent {
         this.dialogRef.close();
     }
 }
-NgxMatEntityCreateDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: NgxMatEntityCreateDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.MatDialogRef }, { token: i0.Injector }, { token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-NgxMatEntityCreateDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.1", type: NgxMatEntityCreateDialogComponent, selector: "ngx-mat-entity-create-dialog", ngImport: i0, template: "<h2 mat-dialog-title>{{data.createDialogData.title}}</h2>\n\n<form>\n    <mat-dialog-content>\n        <mat-tab-group *ngIf=\"entityTabs.length > 1\" preserveContent>\n            <mat-tab *ngFor=\"let tab of entityTabs\" [label]=\"tab.tabName\">\n                <div class=\"row\" *ngFor=\"let row of tab.rows\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"data.entity\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForCreate]=\"true\"\n                        class=\"col-lg-{{EntityUtilities.getWidth(data.entity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(data.entity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(data.entity, key, 'sm')}}\"\n                        (inputChangeEvent)=\"checkIsEntityValid()\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </mat-tab>\n        </mat-tab-group>\n    \n        <div *ngIf=\"entityTabs.length <= 1\">\n            <div class=\"row\" *ngFor=\"let row of entityTabs[0].rows\">\n                <ngx-mat-entity-input\n                    *ngFor=\"let key of row.keys\"\n                    [entity]=\"data.entity\"\n                    [propertyKey]=\"key\"\n                    [hideOmitForCreate]=\"true\"\n                    class=\"col-lg-{{EntityUtilities.getWidth(data.entity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(data.entity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(data.entity, key, 'sm')}}\"\n                    (inputChangeEvent)=\"checkIsEntityValid()\"\n                >\n                </ngx-mat-entity-input>\n            </div>\n        </div>\n    </mat-dialog-content>\n    \n    <mat-dialog-actions>\n        <button type=\"submit\" (click)=\"create()\" mat-raised-button [class.mat-button-disabled]=\"!isEntityValid\">\n            {{data.createDialogData.createButtonLabel}}\n        </button>\n        <button type=\"button\" mat-raised-button (click)=\"cancel()\" class=\"cancel-button\">\n            {{data.createDialogData.cancelButtonLabel}}\n        </button>\n    </mat-dialog-actions>\n</form>\n", styles: ["mat-dialog-actions{justify-content:space-between}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NgxMatEntityInputComponent, selector: "ngx-mat-entity-input", inputs: ["entity", "propertyKey", "getValidationErrorMessage", "hideOmitForCreate", "hideOmitForEdit", "isReadOnly"], outputs: ["inputChangeEvent"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "component", type: i6$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: NgxMatEntityCreateDialogComponent, decorators: [{
+NgxMatEntityCreateDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: NgxMatEntityCreateDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.MatDialogRef }, { token: i0.Injector }, { token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+NgxMatEntityCreateDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: NgxMatEntityCreateDialogComponent, selector: "ngx-mat-entity-create-dialog", ngImport: i0, template: "<h2 mat-dialog-title>{{data.createDialogData.title}}</h2>\n\n<form>\n    <mat-dialog-content>\n        <mat-tab-group *ngIf=\"entityTabs.length > 1\" preserveContent>\n            <mat-tab *ngFor=\"let tab of entityTabs\" [label]=\"tab.tabName\">\n                <div class=\"row\" *ngFor=\"let row of tab.rows\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"data.entity\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForCreate]=\"true\"\n                        class=\"col-lg-{{EntityUtilities.getWidth(data.entity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(data.entity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(data.entity, key, 'sm')}}\"\n                        (inputChangeEvent)=\"checkIsEntityValid()\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </mat-tab>\n        </mat-tab-group>\n    \n        <div *ngIf=\"entityTabs.length <= 1\">\n            <div class=\"row\" *ngFor=\"let row of entityTabs[0].rows\">\n                <ngx-mat-entity-input\n                    *ngFor=\"let key of row.keys\"\n                    [entity]=\"data.entity\"\n                    [propertyKey]=\"key\"\n                    [hideOmitForCreate]=\"true\"\n                    class=\"col-lg-{{EntityUtilities.getWidth(data.entity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(data.entity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(data.entity, key, 'sm')}}\"\n                    (inputChangeEvent)=\"checkIsEntityValid()\"\n                >\n                </ngx-mat-entity-input>\n            </div>\n        </div>\n    </mat-dialog-content>\n    \n    <mat-dialog-actions>\n        <button type=\"submit\" (click)=\"create()\" mat-raised-button [disabled]=\"!isEntityValid\">\n            {{data.createDialogData.createButtonLabel}}\n        </button>\n        <button type=\"button\" mat-raised-button (click)=\"cancel()\" class=\"cancel-button\">\n            {{data.createDialogData.cancelButtonLabel}}\n        </button>\n    </mat-dialog-actions>\n</form>\n", styles: ["mat-dialog-actions{justify-content:space-between}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NgxMatEntityInputComponent, selector: "ngx-mat-entity-input", inputs: ["entity", "propertyKey", "getValidationErrorMessage", "hideOmitForCreate", "hideOmitForEdit", "isReadOnly"], outputs: ["inputChangeEvent"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6$1.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i6$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: NgxMatEntityCreateDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-mat-entity-create-dialog', template: "<h2 mat-dialog-title>{{data.createDialogData.title}}</h2>\n\n<form>\n    <mat-dialog-content>\n        <mat-tab-group *ngIf=\"entityTabs.length > 1\" preserveContent>\n            <mat-tab *ngFor=\"let tab of entityTabs\" [label]=\"tab.tabName\">\n                <div class=\"row\" *ngFor=\"let row of tab.rows\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"data.entity\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForCreate]=\"true\"\n                        class=\"col-lg-{{EntityUtilities.getWidth(data.entity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(data.entity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(data.entity, key, 'sm')}}\"\n                        (inputChangeEvent)=\"checkIsEntityValid()\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </mat-tab>\n        </mat-tab-group>\n    \n        <div *ngIf=\"entityTabs.length <= 1\">\n            <div class=\"row\" *ngFor=\"let row of entityTabs[0].rows\">\n                <ngx-mat-entity-input\n                    *ngFor=\"let key of row.keys\"\n                    [entity]=\"data.entity\"\n                    [propertyKey]=\"key\"\n                    [hideOmitForCreate]=\"true\"\n                    class=\"col-lg-{{EntityUtilities.getWidth(data.entity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(data.entity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(data.entity, key, 'sm')}}\"\n                    (inputChangeEvent)=\"checkIsEntityValid()\"\n                >\n                </ngx-mat-entity-input>\n            </div>\n        </div>\n    </mat-dialog-content>\n    \n    <mat-dialog-actions>\n        <button type=\"submit\" (click)=\"create()\" mat-raised-button [class.mat-button-disabled]=\"!isEntityValid\">\n            {{data.createDialogData.createButtonLabel}}\n        </button>\n        <button type=\"button\" mat-raised-button (click)=\"cancel()\" class=\"cancel-button\">\n            {{data.createDialogData.cancelButtonLabel}}\n        </button>\n    </mat-dialog-actions>\n</form>\n", styles: ["mat-dialog-actions{justify-content:space-between}\n"] }]
+            args: [{ selector: 'ngx-mat-entity-create-dialog', template: "<h2 mat-dialog-title>{{data.createDialogData.title}}</h2>\n\n<form>\n    <mat-dialog-content>\n        <mat-tab-group *ngIf=\"entityTabs.length > 1\" preserveContent>\n            <mat-tab *ngFor=\"let tab of entityTabs\" [label]=\"tab.tabName\">\n                <div class=\"row\" *ngFor=\"let row of tab.rows\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"data.entity\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForCreate]=\"true\"\n                        class=\"col-lg-{{EntityUtilities.getWidth(data.entity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(data.entity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(data.entity, key, 'sm')}}\"\n                        (inputChangeEvent)=\"checkIsEntityValid()\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </mat-tab>\n        </mat-tab-group>\n    \n        <div *ngIf=\"entityTabs.length <= 1\">\n            <div class=\"row\" *ngFor=\"let row of entityTabs[0].rows\">\n                <ngx-mat-entity-input\n                    *ngFor=\"let key of row.keys\"\n                    [entity]=\"data.entity\"\n                    [propertyKey]=\"key\"\n                    [hideOmitForCreate]=\"true\"\n                    class=\"col-lg-{{EntityUtilities.getWidth(data.entity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(data.entity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(data.entity, key, 'sm')}}\"\n                    (inputChangeEvent)=\"checkIsEntityValid()\"\n                >\n                </ngx-mat-entity-input>\n            </div>\n        </div>\n    </mat-dialog-content>\n    \n    <mat-dialog-actions>\n        <button type=\"submit\" (click)=\"create()\" mat-raised-button [disabled]=\"!isEntityValid\">\n            {{data.createDialogData.createButtonLabel}}\n        </button>\n        <button type=\"button\" mat-raised-button (click)=\"cancel()\" class=\"cancel-button\">\n            {{data.createDialogData.cancelButtonLabel}}\n        </button>\n    </mat-dialog-actions>\n</form>\n", styles: ["mat-dialog-actions{justify-content:space-between}\n"] }]
         }], ctorParameters: function () {
         return [{ type: undefined, decorators: [{
                         type: Inject,
@@ -3609,11 +3651,11 @@ class NgxMatEntityEditDialogComponent {
         this.dialogRef.close(0);
     }
 }
-NgxMatEntityEditDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: NgxMatEntityEditDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.MatDialogRef }, { token: i0.Injector }, { token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-NgxMatEntityEditDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.1", type: NgxMatEntityEditDialogComponent, selector: "ngx-mat-entity-edit-dialog", ngImport: i0, template: "<h2 mat-dialog-title>\n    {{data.editDialogData.title(data.entity)}}\n    <button type=\"button\" *ngIf=\"data.allowDelete(data.entity)\" mat-raised-button (click)=\"delete()\" color=\"warn\" class=\"delete-button\" tabindex=\"-1\">\n        {{data.editDialogData.deleteButtonLabel}}\n    </button>\n</h2>\n\n<form>\n    <mat-dialog-content>\n        <mat-tab-group *ngIf=\"entityTabs.length > 1\" preserveContent>\n            <mat-tab *ngFor=\"let tab of entityTabs\" [label]=\"tab.tabName\">\n                <div class=\"row\" *ngFor=\"let row of tab.rows\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"data.entity\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForEdit]=\"true\"\n                        class=\"col-lg-{{EntityUtilities.getWidth(data.entity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(data.entity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(data.entity, key, 'sm')}}\"\n                        (inputChangeEvent)=\"checkEntity()\"\n                        [isReadOnly]=\"isReadOnly\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </mat-tab>\n        </mat-tab-group>\n    \n        <div *ngIf=\"entityTabs.length <= 1\">\n            <div class=\"row\" *ngFor=\"let row of entityTabs[0].rows\">\n                <ngx-mat-entity-input\n                    *ngFor=\"let key of row.keys\"\n                    [entity]=\"data.entity\"\n                    [propertyKey]=\"key\"\n                    [hideOmitForEdit]=\"true\"\n                    class=\"col-lg-{{EntityUtilities.getWidth(data.entity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(data.entity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(data.entity, key, 'sm')}}\"\n                    (inputChangeEvent)=\"checkEntity()\"\n                    [isReadOnly]=\"isReadOnly\"\n                >\n                </ngx-mat-entity-input>\n            </div>\n        </div>\n    </mat-dialog-content>\n    \n    <mat-dialog-actions>\n        <button type=\"submit\" (click)=\"edit()\" mat-raised-button [class.mat-button-disabled]=\"isReadOnly || !isEntityValid || !isEntityDirty\">\n            {{data.editDialogData.confirmButtonLabel}}\n        </button>\n        <button type=\"button\" mat-raised-button (click)=\"cancel()\" class=\"cancel-button\">\n            {{data.editDialogData.cancelButtonLabel}}\n        </button>\n    </mat-dialog-actions>\n</form>\n", styles: ["mat-dialog-actions{justify-content:space-between}.delete-button{float:right}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NgxMatEntityInputComponent, selector: "ngx-mat-entity-input", inputs: ["entity", "propertyKey", "getValidationErrorMessage", "hideOmitForCreate", "hideOmitForEdit", "isReadOnly"], outputs: ["inputChangeEvent"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "component", type: i6$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: NgxMatEntityEditDialogComponent, decorators: [{
+NgxMatEntityEditDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: NgxMatEntityEditDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.MatDialogRef }, { token: i0.Injector }, { token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+NgxMatEntityEditDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: NgxMatEntityEditDialogComponent, selector: "ngx-mat-entity-edit-dialog", ngImport: i0, template: "<div class=\"mat-dialog-title\" mat-dialog-title>\n    <div>{{data.editDialogData.title(data.entity)}}</div>\n    <button type=\"button\" *ngIf=\"data.allowDelete(data.entity)\" mat-raised-button (click)=\"delete()\" color=\"warn\" class=\"delete-button\" tabindex=\"-1\">\n        {{data.editDialogData.deleteButtonLabel}}\n    </button>\n</div>\n\n<form>\n    <mat-dialog-content>\n        <mat-tab-group *ngIf=\"entityTabs.length > 1\" preserveContent>\n            <mat-tab *ngFor=\"let tab of entityTabs\" [label]=\"tab.tabName\">\n                <div class=\"row\" *ngFor=\"let row of tab.rows\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"data.entity\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForEdit]=\"true\"\n                        class=\"col-lg-{{EntityUtilities.getWidth(data.entity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(data.entity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(data.entity, key, 'sm')}}\"\n                        (inputChangeEvent)=\"checkEntity()\"\n                        [isReadOnly]=\"isReadOnly\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </mat-tab>\n        </mat-tab-group>\n    \n        <div *ngIf=\"entityTabs.length <= 1\">\n            <div class=\"row\" *ngFor=\"let row of entityTabs[0].rows\">\n                <ngx-mat-entity-input\n                    *ngFor=\"let key of row.keys\"\n                    [entity]=\"data.entity\"\n                    [propertyKey]=\"key\"\n                    [hideOmitForEdit]=\"true\"\n                    class=\"col-lg-{{EntityUtilities.getWidth(data.entity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(data.entity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(data.entity, key, 'sm')}}\"\n                    (inputChangeEvent)=\"checkEntity()\"\n                    [isReadOnly]=\"isReadOnly\"\n                >\n                </ngx-mat-entity-input>\n            </div>\n        </div>\n    </mat-dialog-content>\n    \n    <mat-dialog-actions>\n        <button type=\"submit\" (click)=\"edit()\" mat-raised-button [disabled]=\"isReadOnly || !isEntityValid || !isEntityDirty\">\n            {{data.editDialogData.confirmButtonLabel}}\n        </button>\n        <button type=\"button\" mat-raised-button (click)=\"cancel()\" class=\"cancel-button\">\n            {{data.editDialogData.cancelButtonLabel}}\n        </button>\n    </mat-dialog-actions>\n</form>\n", styles: [".mat-dialog-title{padding-top:12px;display:flex}.mat-dialog-title button{display:block;margin-left:auto}mat-dialog-actions{justify-content:space-between;padding-left:24px;padding-right:24px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NgxMatEntityInputComponent, selector: "ngx-mat-entity-input", inputs: ["entity", "propertyKey", "getValidationErrorMessage", "hideOmitForCreate", "hideOmitForEdit", "isReadOnly"], outputs: ["inputChangeEvent"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6$1.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i6$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: NgxMatEntityEditDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-mat-entity-edit-dialog', template: "<h2 mat-dialog-title>\n    {{data.editDialogData.title(data.entity)}}\n    <button type=\"button\" *ngIf=\"data.allowDelete(data.entity)\" mat-raised-button (click)=\"delete()\" color=\"warn\" class=\"delete-button\" tabindex=\"-1\">\n        {{data.editDialogData.deleteButtonLabel}}\n    </button>\n</h2>\n\n<form>\n    <mat-dialog-content>\n        <mat-tab-group *ngIf=\"entityTabs.length > 1\" preserveContent>\n            <mat-tab *ngFor=\"let tab of entityTabs\" [label]=\"tab.tabName\">\n                <div class=\"row\" *ngFor=\"let row of tab.rows\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"data.entity\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForEdit]=\"true\"\n                        class=\"col-lg-{{EntityUtilities.getWidth(data.entity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(data.entity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(data.entity, key, 'sm')}}\"\n                        (inputChangeEvent)=\"checkEntity()\"\n                        [isReadOnly]=\"isReadOnly\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </mat-tab>\n        </mat-tab-group>\n    \n        <div *ngIf=\"entityTabs.length <= 1\">\n            <div class=\"row\" *ngFor=\"let row of entityTabs[0].rows\">\n                <ngx-mat-entity-input\n                    *ngFor=\"let key of row.keys\"\n                    [entity]=\"data.entity\"\n                    [propertyKey]=\"key\"\n                    [hideOmitForEdit]=\"true\"\n                    class=\"col-lg-{{EntityUtilities.getWidth(data.entity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(data.entity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(data.entity, key, 'sm')}}\"\n                    (inputChangeEvent)=\"checkEntity()\"\n                    [isReadOnly]=\"isReadOnly\"\n                >\n                </ngx-mat-entity-input>\n            </div>\n        </div>\n    </mat-dialog-content>\n    \n    <mat-dialog-actions>\n        <button type=\"submit\" (click)=\"edit()\" mat-raised-button [class.mat-button-disabled]=\"isReadOnly || !isEntityValid || !isEntityDirty\">\n            {{data.editDialogData.confirmButtonLabel}}\n        </button>\n        <button type=\"button\" mat-raised-button (click)=\"cancel()\" class=\"cancel-button\">\n            {{data.editDialogData.cancelButtonLabel}}\n        </button>\n    </mat-dialog-actions>\n</form>\n", styles: ["mat-dialog-actions{justify-content:space-between}.delete-button{float:right}\n"] }]
+            args: [{ selector: 'ngx-mat-entity-edit-dialog', template: "<div class=\"mat-dialog-title\" mat-dialog-title>\n    <div>{{data.editDialogData.title(data.entity)}}</div>\n    <button type=\"button\" *ngIf=\"data.allowDelete(data.entity)\" mat-raised-button (click)=\"delete()\" color=\"warn\" class=\"delete-button\" tabindex=\"-1\">\n        {{data.editDialogData.deleteButtonLabel}}\n    </button>\n</div>\n\n<form>\n    <mat-dialog-content>\n        <mat-tab-group *ngIf=\"entityTabs.length > 1\" preserveContent>\n            <mat-tab *ngFor=\"let tab of entityTabs\" [label]=\"tab.tabName\">\n                <div class=\"row\" *ngFor=\"let row of tab.rows\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"data.entity\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForEdit]=\"true\"\n                        class=\"col-lg-{{EntityUtilities.getWidth(data.entity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(data.entity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(data.entity, key, 'sm')}}\"\n                        (inputChangeEvent)=\"checkEntity()\"\n                        [isReadOnly]=\"isReadOnly\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </mat-tab>\n        </mat-tab-group>\n    \n        <div *ngIf=\"entityTabs.length <= 1\">\n            <div class=\"row\" *ngFor=\"let row of entityTabs[0].rows\">\n                <ngx-mat-entity-input\n                    *ngFor=\"let key of row.keys\"\n                    [entity]=\"data.entity\"\n                    [propertyKey]=\"key\"\n                    [hideOmitForEdit]=\"true\"\n                    class=\"col-lg-{{EntityUtilities.getWidth(data.entity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(data.entity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(data.entity, key, 'sm')}}\"\n                    (inputChangeEvent)=\"checkEntity()\"\n                    [isReadOnly]=\"isReadOnly\"\n                >\n                </ngx-mat-entity-input>\n            </div>\n        </div>\n    </mat-dialog-content>\n    \n    <mat-dialog-actions>\n        <button type=\"submit\" (click)=\"edit()\" mat-raised-button [disabled]=\"isReadOnly || !isEntityValid || !isEntityDirty\">\n            {{data.editDialogData.confirmButtonLabel}}\n        </button>\n        <button type=\"button\" mat-raised-button (click)=\"cancel()\" class=\"cancel-button\">\n            {{data.editDialogData.cancelButtonLabel}}\n        </button>\n    </mat-dialog-actions>\n</form>\n", styles: [".mat-dialog-title{padding-top:12px;display:flex}.mat-dialog-title button{display:block;margin-left:auto}mat-dialog-actions{justify-content:space-between;padding-left:24px;padding-right:24px}\n"] }]
         }], ctorParameters: function () {
         return [{ type: undefined, decorators: [{
                         type: Inject,
@@ -3909,9 +3951,9 @@ class NgxMatEntityTableComponent {
         this.dataSource.filter = filterValue.trim().toLowerCase();
     }
 }
-NgxMatEntityTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: NgxMatEntityTableComponent, deps: [{ token: i1.MatDialog }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-NgxMatEntityTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.1", type: NgxMatEntityTableComponent, selector: "ngx-mat-entity-table", inputs: { tableData: "tableData" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }, { propertyName: "filter", first: true, predicate: ["filter"], descendants: true, static: true }], ngImport: i0, template: "<h1 class=\"title\">{{data.baseData.title}}</h1>\n\n<div class=\"row\">\n    <mat-form-field class=\"col-lg-8 col-md-6 col-sm-12\">\n        <mat-label>{{data.baseData.searchLabel}}</mat-label>\n        <input matInput (keyup)=\"applyFilter($event)\">\n    </mat-form-field>\n    <div\n        *ngIf=\"data.baseData.multiSelectActions.length\"\n        [class.col-lg-2]=\"data.baseData.allowCreate()\"\n        [class.col-lg-4]=\"!data.baseData.allowCreate()\"\n        [class.col-md-3]=\"data.baseData.allowCreate()\"\n        [class.col-md-6]=\"!data.baseData.allowCreate()\"\n        [class.col-sm-6]=\"data.baseData.allowCreate()\"\n        [class.col-sm-12]=\"!data.baseData.allowCreate()\"\n    >\n        <button type=\"button\" class=\"actions-button\" [matMenuTriggerFor]=\"menu\" mat-raised-button>\n            {{data.baseData.multiSelectLabel}}\n        </button>\n    </div>\n    <mat-menu #menu=\"matMenu\">\n        <button type=\"button\" *ngFor=\"let action of data.baseData.multiSelectActions\" [disabled]=\"multiActionDisabled(action)\" (click)=\"runMultiAction(action)\" mat-menu-item>\n            {{action.displayName}}\n        </button>\n    </mat-menu>\n\n    <div\n        *ngIf=\"data.baseData.allowCreate()\"\n        [class.col-lg-2]=\"data.baseData.multiSelectActions.length\"\n        [class.col-lg-4]=\"!data.baseData.multiSelectActions.length\"\n        [class.col-md-3]=\"data.baseData.multiSelectActions.length\"\n        [class.col-md-6]=\"!data.baseData.multiSelectActions.length\"\n        [class.col-sm-6]=\"data.baseData.multiSelectActions.length\"\n        [class.col-sm-12]=\"!data.baseData.multiSelectActions.length\"\n    >\n        <button type=\"button\" class=\"create-button\" (click)=\"createEntity()\" mat-raised-button>\n            {{data.baseData.createButtonLabel}}\n        </button>\n    </div>\n</div>\n\n<div class=\"mat-elevation-z8\">\n    <mat-table [dataSource]=\"dataSource\" matSort>\n        <!-- select Column -->\n        <ng-container matColumnDef=\"select\">\n            <mat-header-cell *matHeaderCellDef>\n                <mat-checkbox (change)=\"$event ? SelectionUtilities.masterToggle(selection, dataSource) : null\" [checked]=\"selection.hasValue() && SelectionUtilities.isAllSelected(selection, dataSource)\" [indeterminate]=\"selection.hasValue() && !SelectionUtilities.isAllSelected(selection, dataSource)\"> </mat-checkbox>\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let module\" class=\"module\">\n                <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(module) : null\" [checked]=\"selection.isSelected(module)\"> </mat-checkbox>\n            </mat-cell>\n        </ng-container>\n\n        <ng-container *ngFor=\"let dCol of data.baseData.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n            <mat-header-cell *matHeaderCellDef mat-sort-header>\n                {{dCol.displayName}}\n            </mat-header-cell>\n            <mat-cell class=\"entity\" [class.enabled]=\"data.baseData.allowUpdate(entity) || data.baseData.allowRead(entity)\" (click)=\"editEntity(entity)\" *matCellDef=\"let entity\">\n                {{dCol.value(entity)}}\n            </mat-cell>\n        </ng-container>\n\n        <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n        <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n    </mat-table>\n\n    <mat-paginator [length]=\"dataSource.filteredData.length\" [pageIndex]=\"0\" [pageSize]=\"10\" [pageSizeOptions]=\"[5, 10, 25, 50]\"> </mat-paginator>\n</div>\n", styles: [".title{text-align:center}button{width:100%}.mat-column-select{flex:0 0 75px}.enabled:hover{cursor:pointer}@media (max-width: 767px){.actions-button,.create-button{margin-bottom:15px}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i4$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5$3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5$3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5$3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5$3.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i5$3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5$3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5$3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5$3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5$3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5$3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i7.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i9.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i9.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i9.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: NgxMatEntityTableComponent, decorators: [{
+NgxMatEntityTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: NgxMatEntityTableComponent, deps: [{ token: i1.MatDialog }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+NgxMatEntityTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: NgxMatEntityTableComponent, selector: "ngx-mat-entity-table", inputs: { tableData: "tableData" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }, { propertyName: "filter", first: true, predicate: ["filter"], descendants: true, static: true }], ngImport: i0, template: "<h1 class=\"title\">{{data.baseData.title}}</h1>\n\n<div class=\"row\">\n    <mat-form-field class=\"col-lg-8 col-md-6 col-sm-12\">\n        <mat-label>{{data.baseData.searchLabel}}</mat-label>\n        <input matInput (keyup)=\"applyFilter($event)\">\n    </mat-form-field>\n    <div\n        *ngIf=\"data.baseData.multiSelectActions.length\"\n        [class.col-lg-2]=\"data.baseData.allowCreate()\"\n        [class.col-lg-4]=\"!data.baseData.allowCreate()\"\n        [class.col-md-3]=\"data.baseData.allowCreate()\"\n        [class.col-md-6]=\"!data.baseData.allowCreate()\"\n        [class.col-sm-6]=\"data.baseData.allowCreate()\"\n        [class.col-sm-12]=\"!data.baseData.allowCreate()\"\n    >\n        <button type=\"button\" class=\"actions-button\" [matMenuTriggerFor]=\"menu\" mat-raised-button>\n            {{data.baseData.multiSelectLabel}}\n        </button>\n    </div>\n    <mat-menu #menu=\"matMenu\">\n        <button type=\"button\" *ngFor=\"let action of data.baseData.multiSelectActions\" [disabled]=\"multiActionDisabled(action)\" (click)=\"runMultiAction(action)\" mat-menu-item>\n            {{action.displayName}}\n        </button>\n    </mat-menu>\n\n    <div\n        *ngIf=\"data.baseData.allowCreate()\"\n        [class.col-lg-2]=\"data.baseData.multiSelectActions.length\"\n        [class.col-lg-4]=\"!data.baseData.multiSelectActions.length\"\n        [class.col-md-3]=\"data.baseData.multiSelectActions.length\"\n        [class.col-md-6]=\"!data.baseData.multiSelectActions.length\"\n        [class.col-sm-6]=\"data.baseData.multiSelectActions.length\"\n        [class.col-sm-12]=\"!data.baseData.multiSelectActions.length\"\n    >\n        <button type=\"button\" class=\"create-button\" (click)=\"createEntity()\" mat-raised-button>\n            {{data.baseData.createButtonLabel}}\n        </button>\n    </div>\n</div>\n\n<div class=\"mat-elevation-z8\">\n    <mat-table [dataSource]=\"dataSource\" matSort>\n        <!-- select Column -->\n        <ng-container matColumnDef=\"select\">\n            <mat-header-cell *matHeaderCellDef>\n                <mat-checkbox (change)=\"$event ? SelectionUtilities.masterToggle(selection, dataSource) : null\" [checked]=\"selection.hasValue() && SelectionUtilities.isAllSelected(selection, dataSource)\" [indeterminate]=\"selection.hasValue() && !SelectionUtilities.isAllSelected(selection, dataSource)\"> </mat-checkbox>\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let module\" class=\"module\">\n                <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(module) : null\" [checked]=\"selection.isSelected(module)\"> </mat-checkbox>\n            </mat-cell>\n        </ng-container>\n\n        <ng-container *ngFor=\"let dCol of data.baseData.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n            <mat-header-cell *matHeaderCellDef mat-sort-header>\n                {{dCol.displayName}}\n            </mat-header-cell>\n            <mat-cell class=\"entity\" [class.enabled]=\"data.baseData.allowUpdate(entity) || data.baseData.allowRead(entity)\" (click)=\"editEntity(entity)\" *matCellDef=\"let entity\">\n                {{dCol.value(entity)}}\n            </mat-cell>\n        </ng-container>\n\n        <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n        <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n    </mat-table>\n\n    <mat-paginator [length]=\"dataSource.filteredData.length\" [pageIndex]=\"0\" [pageSize]=\"10\" [pageSizeOptions]=\"[5, 10, 25, 50]\"> </mat-paginator>\n</div>\n", styles: [".title{text-align:center}button{width:100%}.mat-column-select{flex:0 0 75px}.enabled:hover{cursor:pointer}@media (max-width: 767px){.actions-button,.create-button{margin-bottom:15px}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "component", type: i4$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i5$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i7.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i9.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i9.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i9.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: NgxMatEntityTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-mat-entity-table', template: "<h1 class=\"title\">{{data.baseData.title}}</h1>\n\n<div class=\"row\">\n    <mat-form-field class=\"col-lg-8 col-md-6 col-sm-12\">\n        <mat-label>{{data.baseData.searchLabel}}</mat-label>\n        <input matInput (keyup)=\"applyFilter($event)\">\n    </mat-form-field>\n    <div\n        *ngIf=\"data.baseData.multiSelectActions.length\"\n        [class.col-lg-2]=\"data.baseData.allowCreate()\"\n        [class.col-lg-4]=\"!data.baseData.allowCreate()\"\n        [class.col-md-3]=\"data.baseData.allowCreate()\"\n        [class.col-md-6]=\"!data.baseData.allowCreate()\"\n        [class.col-sm-6]=\"data.baseData.allowCreate()\"\n        [class.col-sm-12]=\"!data.baseData.allowCreate()\"\n    >\n        <button type=\"button\" class=\"actions-button\" [matMenuTriggerFor]=\"menu\" mat-raised-button>\n            {{data.baseData.multiSelectLabel}}\n        </button>\n    </div>\n    <mat-menu #menu=\"matMenu\">\n        <button type=\"button\" *ngFor=\"let action of data.baseData.multiSelectActions\" [disabled]=\"multiActionDisabled(action)\" (click)=\"runMultiAction(action)\" mat-menu-item>\n            {{action.displayName}}\n        </button>\n    </mat-menu>\n\n    <div\n        *ngIf=\"data.baseData.allowCreate()\"\n        [class.col-lg-2]=\"data.baseData.multiSelectActions.length\"\n        [class.col-lg-4]=\"!data.baseData.multiSelectActions.length\"\n        [class.col-md-3]=\"data.baseData.multiSelectActions.length\"\n        [class.col-md-6]=\"!data.baseData.multiSelectActions.length\"\n        [class.col-sm-6]=\"data.baseData.multiSelectActions.length\"\n        [class.col-sm-12]=\"!data.baseData.multiSelectActions.length\"\n    >\n        <button type=\"button\" class=\"create-button\" (click)=\"createEntity()\" mat-raised-button>\n            {{data.baseData.createButtonLabel}}\n        </button>\n    </div>\n</div>\n\n<div class=\"mat-elevation-z8\">\n    <mat-table [dataSource]=\"dataSource\" matSort>\n        <!-- select Column -->\n        <ng-container matColumnDef=\"select\">\n            <mat-header-cell *matHeaderCellDef>\n                <mat-checkbox (change)=\"$event ? SelectionUtilities.masterToggle(selection, dataSource) : null\" [checked]=\"selection.hasValue() && SelectionUtilities.isAllSelected(selection, dataSource)\" [indeterminate]=\"selection.hasValue() && !SelectionUtilities.isAllSelected(selection, dataSource)\"> </mat-checkbox>\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let module\" class=\"module\">\n                <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(module) : null\" [checked]=\"selection.isSelected(module)\"> </mat-checkbox>\n            </mat-cell>\n        </ng-container>\n\n        <ng-container *ngFor=\"let dCol of data.baseData.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n            <mat-header-cell *matHeaderCellDef mat-sort-header>\n                {{dCol.displayName}}\n            </mat-header-cell>\n            <mat-cell class=\"entity\" [class.enabled]=\"data.baseData.allowUpdate(entity) || data.baseData.allowRead(entity)\" (click)=\"editEntity(entity)\" *matCellDef=\"let entity\">\n                {{dCol.value(entity)}}\n            </mat-cell>\n        </ng-container>\n\n        <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n        <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n    </mat-table>\n\n    <mat-paginator [length]=\"dataSource.filteredData.length\" [pageIndex]=\"0\" [pageSize]=\"10\" [pageSizeOptions]=\"[5, 10, 25, 50]\"> </mat-paginator>\n</div>\n", styles: [".title{text-align:center}button{width:100%}.mat-column-select{flex:0 0 75px}.enabled:hover{cursor:pointer}@media (max-width: 767px){.actions-button,.create-button{margin-bottom:15px}}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.MatDialog }, { type: i0.Injector }]; }, propDecorators: { tableData: [{
@@ -3929,20 +3971,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
 
 class NgxMatEntityCreateDialogModule {
 }
-NgxMatEntityCreateDialogModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: NgxMatEntityCreateDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NgxMatEntityCreateDialogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.1", ngImport: i0, type: NgxMatEntityCreateDialogModule, declarations: [NgxMatEntityCreateDialogComponent], imports: [CommonModule,
+NgxMatEntityCreateDialogModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: NgxMatEntityCreateDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NgxMatEntityCreateDialogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.3", ngImport: i0, type: NgxMatEntityCreateDialogModule, declarations: [NgxMatEntityCreateDialogComponent], imports: [CommonModule,
         NgxMatEntityInputModule,
         MatDialogModule,
         FormsModule,
         MatButtonModule,
         MatTabsModule], exports: [NgxMatEntityCreateDialogComponent] });
-NgxMatEntityCreateDialogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: NgxMatEntityCreateDialogModule, imports: [CommonModule,
+NgxMatEntityCreateDialogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: NgxMatEntityCreateDialogModule, imports: [CommonModule,
         NgxMatEntityInputModule,
         MatDialogModule,
         FormsModule,
         MatButtonModule,
         MatTabsModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: NgxMatEntityCreateDialogModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: NgxMatEntityCreateDialogModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [NgxMatEntityCreateDialogComponent],
@@ -3960,22 +4002,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
 
 class NgxMatEntityEditDialogModule {
 }
-NgxMatEntityEditDialogModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: NgxMatEntityEditDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NgxMatEntityEditDialogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.1", ngImport: i0, type: NgxMatEntityEditDialogModule, declarations: [NgxMatEntityEditDialogComponent], imports: [CommonModule,
+NgxMatEntityEditDialogModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: NgxMatEntityEditDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NgxMatEntityEditDialogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.3", ngImport: i0, type: NgxMatEntityEditDialogModule, declarations: [NgxMatEntityEditDialogComponent], imports: [CommonModule,
         NgxMatEntityInputModule,
         MatDialogModule,
         FormsModule,
         MatButtonModule,
         MatTabsModule,
         NgxMatEntityConfirmDialogModule], exports: [NgxMatEntityEditDialogComponent] });
-NgxMatEntityEditDialogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: NgxMatEntityEditDialogModule, imports: [CommonModule,
+NgxMatEntityEditDialogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: NgxMatEntityEditDialogModule, imports: [CommonModule,
         NgxMatEntityInputModule,
         MatDialogModule,
         FormsModule,
         MatButtonModule,
         MatTabsModule,
         NgxMatEntityConfirmDialogModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: NgxMatEntityEditDialogModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: NgxMatEntityEditDialogModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [NgxMatEntityEditDialogComponent],
@@ -3994,8 +4036,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
 
 class NgxMatEntityTableModule {
 }
-NgxMatEntityTableModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: NgxMatEntityTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NgxMatEntityTableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.1", ngImport: i0, type: NgxMatEntityTableModule, declarations: [NgxMatEntityTableComponent], imports: [CommonModule,
+NgxMatEntityTableModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: NgxMatEntityTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NgxMatEntityTableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.3", ngImport: i0, type: NgxMatEntityTableModule, declarations: [NgxMatEntityTableComponent], imports: [CommonModule,
         MatInputModule,
         FormsModule,
         MatFormFieldModule,
@@ -4007,7 +4049,7 @@ NgxMatEntityTableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
         MatDialogModule,
         NgxMatEntityCreateDialogModule,
         NgxMatEntityEditDialogModule], exports: [NgxMatEntityTableComponent] });
-NgxMatEntityTableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: NgxMatEntityTableModule, imports: [CommonModule,
+NgxMatEntityTableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: NgxMatEntityTableModule, imports: [CommonModule,
         MatInputModule,
         FormsModule,
         MatFormFieldModule,
@@ -4019,7 +4061,7 @@ NgxMatEntityTableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0",
         MatDialogModule,
         NgxMatEntityCreateDialogModule,
         NgxMatEntityEditDialogModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: NgxMatEntityTableModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: NgxMatEntityTableModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [NgxMatEntityTableComponent],
@@ -4386,7 +4428,7 @@ class SliderNumberDecoratorConfigInternal extends PropertyDecoratorConfigInterna
         this.min = data.min;
         this.step = data.step;
         this.formatThumbLabelValue = (_a = data.formatThumbLabelValue) !== null && _a !== void 0 ? _a : defaultFormatThumbLabelValue;
-        this.tickInterval = data.tickInterval;
+        this.showTickMarks = data.showTickMarks;
     }
 }
 /**
@@ -4396,7 +4438,7 @@ class SliderNumberDecoratorConfigInternal extends PropertyDecoratorConfigInterna
  * @returns Just the value without any formatting done.
  */
 function defaultFormatThumbLabelValue(value) {
-    return value;
+    return value.toString();
 }
 
 /**
@@ -4455,12 +4497,52 @@ class ObjectDecoratorConfig extends PropertyDecoratorConfig {
 class StringDecoratorConfig extends PropertyDecoratorConfig {
 }
 
+/**
+ * The internal DefaultNumberDecoratorConfig. Sets default values.
+ */
+class ReferencesManyDecoratorConfigInternal extends PropertyDecoratorConfigInternal {
+    constructor(data) {
+        var _a, _b, _c, _d, _e, _f, _g;
+        super(data);
+        this.getReferencedEntities = data.getReferencedEntities;
+        this.getDropdownValues = data.getDropdownValues;
+        this.getEntityForId = (_a = data.getEntityForId) !== null && _a !== void 0 ? _a : defaultGetEntityForId;
+        this.displayColumns = data.displayColumns;
+        this.addButtonLabel = (_b = data.addButtonLabel) !== null && _b !== void 0 ? _b : 'Add';
+        this.removeButtonLabel = (_c = data.removeButtonLabel) !== null && _c !== void 0 ? _c : 'Remove';
+        this.defaultWidths = (_d = data.defaultWidths) !== null && _d !== void 0 ? _d : [12, 12, 12];
+        this.dropdownLabel = (_e = data.dropdownLabel) !== null && _e !== void 0 ? _e : 'Select';
+        this.addAll = (_f = data.addAll) !== null && _f !== void 0 ? _f : false;
+        this.addAllButtonLabel = (_g = data.addAllButtonLabel) !== null && _g !== void 0 ? _g : 'Add all';
+    }
+}
+/**
+ * The default function to use when trying to get the referenced entity for the given id.
+ *
+ * @param entityId - The id of the referenced entity.
+ * @param allReferencedEntities - All referenced entities.
+ * @returns The entity that has the given id.
+ */
+function defaultGetEntityForId(entityId, allReferencedEntities) {
+    return allReferencedEntities.find(e => e['id'] === entityId);
+}
+
+/**
+ * Decorator for setting and getting references many property metadata.
+ *
+ * @param metadata - The metadata of the references many property.
+ * @returns The method that defines the metadata.
+ */
+function referencesMany(metadata) {
+    return baseProperty(new ReferencesManyDecoratorConfigInternal(metadata), DecoratorTypes.REFERENCES_MANY);
+}
+
 /**
  * The internal DefaultFileDecoratorConfig. Sets default values.
  */
 class DefaultFileDecoratorConfigInternal extends PropertyDecoratorConfigInternal {
     constructor(data) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         super(data);
         this.type = data.type;
         this.preview = false;
@@ -4473,7 +4555,6 @@ class DefaultFileDecoratorConfigInternal extends PropertyDecoratorConfigInternal
         this.maxSizeErrorDialog = (_f = data.maxSizeErrorDialog) !== null && _f !== void 0 ? _f : getDefaultMaxSizeErrorDialogData(data);
         this.maxSizeTotalErrorDialog = (_g = data.maxSizeTotalErrorDialog) !== null && _g !== void 0 ? _g : getDefaultMaxSizeTotalErrorDialogData(data);
         this.dragAndDrop = (_h = data.dragAndDrop) !== null && _h !== void 0 ? _h : data.multiple;
-        this.downloadAllButtonLabel = (_j = data.downloadAllButtonLabel) !== null && _j !== void 0 ? _j : 'Download All';
     }
 }
 /**
@@ -4481,7 +4562,7 @@ class DefaultFileDecoratorConfigInternal extends PropertyDecoratorConfigInternal
  */
 class ImageFileDecoratorConfigInternal extends PropertyDecoratorConfigInternal {
     constructor(data) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         super(data);
         this.type = data.type;
         this.allowedMimeTypes = (_a = data.allowedMimeTypes) !== null && _a !== void 0 ? _a : ['image/*'];
@@ -4495,7 +4576,6 @@ class ImageFileDecoratorConfigInternal extends PropertyDecoratorConfigInternal {
         this.maxSizeTotalErrorDialog = (_h = data.maxSizeTotalErrorDialog) !== null && _h !== void 0 ? _h : getDefaultMaxSizeTotalErrorDialogData(data);
         this.previewPlaceholderUrl = data.previewPlaceholderUrl;
         this.dragAndDrop = (_j = data.dragAndDrop) !== null && _j !== void 0 ? _j : data.multiple;
-        this.downloadAllButtonLabel = (_k = data.downloadAllButtonLabel) !== null && _k !== void 0 ? _k : 'Download All';
     }
 }
 /**
@@ -4626,5 +4706,5 @@ function custom(metadata) {
  * Generated bundle index. Do not edit.
  */
 
-export { ArrayDecoratorConfig, DateUtilities, DecoratorTypes, Entity, EntityService, EntityUtilities, FileUtilities, NGX_GET_VALIDATION_ERROR_MESSAGE, NgxMatEntityBaseInputComponent, NgxMatEntityConfirmDialogComponent, NgxMatEntityConfirmDialogModule, NgxMatEntityCreateDialogComponent, NgxMatEntityCreateDialogModule, NgxMatEntityEditDialogComponent, NgxMatEntityEditDialogModule, NgxMatEntityInputComponent, NgxMatEntityInputModule, NgxMatEntityTableComponent, NgxMatEntityTableModule, array, boolean, custom, date, file, number, object, string };
+export { ArrayDecoratorConfig, DateUtilities, DecoratorTypes, Entity, EntityService, EntityUtilities, FileUtilities, NGX_GET_VALIDATION_ERROR_MESSAGE, NgxMatEntityBaseInputComponent, NgxMatEntityConfirmDialogComponent, NgxMatEntityConfirmDialogModule, NgxMatEntityCreateDialogComponent, NgxMatEntityCreateDialogModule, NgxMatEntityEditDialogComponent, NgxMatEntityEditDialogModule, NgxMatEntityInputComponent, NgxMatEntityInputModule, NgxMatEntityTableComponent, NgxMatEntityTableModule, array, boolean, custom, date, file, number, object, referencesMany, string };
 //# sourceMappingURL=ngx-material-entity.mjs.map