ngx-material-entity 1.0.0 → 1.1.0

package/fesm2015/ngx-material-entity.mjs

@@ -1,6 +1,7 @@
 import 'reflect-metadata';
 import { __awaiter, __decorate, __metadata } from 'tslib';
 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, EventEmitter, Input, Output, Directive, HostListener, ViewChild } from '@angular/core';
@@ -10,16 +11,16 @@ import * as i2 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import * as i3 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i4 from '@angular/common';
+import * as i6 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i3$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import * as i4$2 from '@angular/material/table';
+import * as i4$1 from '@angular/material/table';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import { SelectionModel } from '@angular/cdk/collections';
 import * as i1$1 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i4$1 from '@angular/material/input';
+import * as i4 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
 import * as i3$2 from '@angular/cdk/text-field';
 import * as i2$1 from '@angular/material/autocomplete';
@@ -29,15 +30,19 @@ import * as i2$2 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 import * as i2$3 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import * as i2$4 from '@angular/material/datepicker';
+import * as i2$4 from '@angular/material/slider';
+import { MatSliderModule } from '@angular/material/slider';
+import * as i13 from '@angular/material/tabs';
+import { MatTabsModule } from '@angular/material/tabs';
+import * as i2$5 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import * as i2$5 from '@angular/material/chips';
+import * as i2$6 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
 import { MatIconModule } from '@angular/material/icon';
 import * as i7 from '@angular/material/paginator';
 import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
-import * as i4$3 from '@angular/material/menu';
+import * as i4$2 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
 
 /**
@@ -132,8 +137,10 @@ var DecoratorTypes;
     DecoratorTypes["STRING_DROPDOWN"] = "stringDropdown";
     DecoratorTypes["STRING_AUTOCOMPLETE"] = "stringAutocomplete";
     DecoratorTypes["STRING_TEXTBOX"] = "stringTextbox";
+    DecoratorTypes["STRING_PASSWORD"] = "stringPassword";
     DecoratorTypes["NUMBER"] = "number";
     DecoratorTypes["NUMBER_DROPDOWN"] = "numberDropdown";
+    DecoratorTypes["NUMBER_SLIDER"] = "numberSlider";
     DecoratorTypes["BOOLEAN_CHECKBOX"] = "boolean";
     DecoratorTypes["BOOLEAN_TOGGLE"] = "booleanToggle";
     DecoratorTypes["BOOLEAN_DROPDOWN"] = "booleanDropdown";
@@ -157,10 +164,12 @@ var DecoratorTypes;
  */
 class PositionInternal {
     constructor(data) {
-        var _a, _b;
+        var _a, _b, _c;
         this.validateInput(data);
         this.row = (_a = data === null || data === void 0 ? void 0 : data.row) !== null && _a !== void 0 ? _a : -1;
         this.order = (_b = data === null || data === void 0 ? void 0 : data.order) !== null && _b !== void 0 ? _b : -1;
+        this.tab = (_c = data === null || data === void 0 ? void 0 : data.tab) !== null && _c !== void 0 ? _c : -1;
+        this.tabName = data === null || data === void 0 ? void 0 : data.tabName;
     }
     validateInput(data) {
         if ((data === null || data === void 0 ? void 0 : data.order) != null) {
@@ -174,6 +183,9 @@ class PositionInternal {
         if ((data === null || data === void 0 ? void 0 : data.row) != null && data.row < 1) {
             throw new Error('row must be at least 1');
         }
+        if ((data === null || data === void 0 ? void 0 : data.tab) != null && data.tab < 2) {
+            throw new Error('tab must be at least 2');
+        }
     }
 }
 /**
@@ -238,6 +250,22 @@ class AutocompleteStringDecoratorConfigInternal extends PropertyDecoratorConfigI
         this.regex = data.regex;
     }
 }
+/**
+ * The internal PasswordStringDecoratorConfig. Sets default values.
+ */
+class PasswordStringDecoratorConfigInternal extends PropertyDecoratorConfigInternal {
+    constructor(data) {
+        var _a, _b, _c;
+        super(data);
+        this.displayStyle = data.displayStyle;
+        this.minLength = data.minLength;
+        this.maxLength = data.maxLength;
+        this.regex = data.regex;
+        this.needsConfirmation = (_a = data.needsConfirmation) !== null && _a !== void 0 ? _a : true;
+        this.confirmationDisplayName = (_b = data.confirmationDisplayName) !== null && _b !== void 0 ? _b : 'Confirm Password';
+        this.passwordsDontMatchErrorMessage = (_c = data.passwordsDontMatchErrorMessage) !== null && _c !== void 0 ? _c : 'Passwords need to match!';
+    }
+}
 
 /**
  * Decorator for setting and getting string Property metadata.
@@ -246,17 +274,17 @@ class AutocompleteStringDecoratorConfigInternal extends PropertyDecoratorConfigI
  * @returns The method that defines the metadata.
  */
 function string(metadata) {
-    if (metadata.displayStyle === 'dropdown') {
-        return baseProperty(new DropdownStringDecoratorConfigInternal(metadata), DecoratorTypes.STRING_DROPDOWN);
-    }
-    else if (metadata.displayStyle === 'autocomplete') {
-        return baseProperty(new AutocompleteStringDecoratorConfigInternal(metadata), DecoratorTypes.STRING_AUTOCOMPLETE);
-    }
-    else if (metadata.displayStyle === 'textbox') {
-        return baseProperty(new TextboxStringDecoratorConfigInternal(metadata), DecoratorTypes.STRING_TEXTBOX);
-    }
-    else {
-        return baseProperty(new DefaultStringDecoratorConfigInternal(metadata), DecoratorTypes.STRING);
+    switch (metadata.displayStyle) {
+        case 'dropdown':
+            return baseProperty(new DropdownStringDecoratorConfigInternal(metadata), DecoratorTypes.STRING_DROPDOWN);
+        case 'autocomplete':
+            return baseProperty(new AutocompleteStringDecoratorConfigInternal(metadata), DecoratorTypes.STRING_AUTOCOMPLETE);
+        case 'textbox':
+            return baseProperty(new TextboxStringDecoratorConfigInternal(metadata), DecoratorTypes.STRING_TEXTBOX);
+        case 'password':
+            return baseProperty(new PasswordStringDecoratorConfigInternal(metadata), DecoratorTypes.STRING_PASSWORD);
+        default:
+            return baseProperty(new DefaultStringDecoratorConfigInternal(metadata), DecoratorTypes.STRING);
     }
 }
 
@@ -439,14 +467,14 @@ class DateUtilities {
     /**
      * Get all valid times for the dropdown of a datetime property.
      *
-     * @param date - The date of the datetime.
      * @param times - All given times to filter.
+     * @param date - The date of the datetime.
      * @param min - The function that defines the minimum time.
      * @param max - The function that defines the maximum time.
      * @param filter - A filter function to do more specific time filtering. This could be e.g. The removal of lunch breaks.
      * @returns All valid dropdown values for the datetime property.
      */
-    static getValidTimesForDropdown(date, times, min, max, filter) {
+    static getValidTimesForDropdown(times, date, min, max, filter) {
         if (min) {
             const minTime = min(date);
             times = times.filter(t => !t.value
@@ -491,6 +519,23 @@ class DateUtilities {
  */
 DateUtilities.defaultDateFilter = () => true;
 
+// TODO: Find a way to use blobs with jest
+/* istanbul ignore next */
+/**
+ * Encapsulates JSZip functionality.
+ */
+class JSZipUtilities {
+    /**
+     * Generates a new JSZip object that is correctly typed.
+     *
+     * @returns A new JSZip object.
+     */
+    static new() {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+        return new JSZip();
+    }
+}
+
 /**
  * Provides functionality regarding files.
  */
@@ -576,6 +621,46 @@ class FileUtilities {
             }
         });
     }
+    // TODO: Find a way to use blobs with jest
+    /* istanbul ignore next */
+    /**
+     * Downloads a single file from the given File Data.
+     *
+     * @param fileData - The file data. Needs to contain a blob.
+     */
+    static downloadSingleFile(fileData) {
+        const a = document.createElement('a');
+        const objectUrl = URL.createObjectURL(fileData.file);
+        a.href = objectUrl;
+        a.download = fileData.name;
+        a.click();
+        URL.revokeObjectURL(objectUrl);
+    }
+    // TODO: Find a way to use blobs with jest
+    /* istanbul ignore next */
+    /**
+     * Downloads multiple files as a zip with the given name.
+     *
+     * @param name - The name of the zip file to generate.
+     * @param multiFileData - The file data array to put in the zip.
+     */
+    static downloadMultipleFiles(name, multiFileData) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const zip = JSZipUtilities.new();
+            for (let i = 0; i < multiFileData.length; i++) {
+                multiFileData[i] = yield FileUtilities.getFileData(multiFileData[i]);
+                zip.file(multiFileData[i].name, multiFileData[i].file);
+            }
+            const zipBlob = yield zip.generateAsync({ type: 'blob' });
+            const fileData = {
+                name: name,
+                file: zipBlob,
+                type: 'application/zip',
+                size: zipBlob.size
+            };
+            FileUtilities.downloadSingleFile(fileData);
+        });
+    }
     /**
      * Checks if the given file has a valid mime type.
      *
@@ -605,7 +690,7 @@ class FileUtilities {
      * @returns The given value as bytes.
      */
     static transformToMegaBytes(value, unit) {
-        const bytes = this.transformToBytes(value, unit);
+        const bytes = this.transformToBytes(LodashUtilities.cloneDeep(value), unit);
         return bytes / 1000000;
     }
     static transformToBytes(value, unit) {
@@ -784,8 +869,10 @@ class EntityUtilities {
         if (metadata.omitForUpdate && omit === 'update') {
             return true;
         }
-        if (metadata.required && entity[key] == null) {
-            return false;
+        if (metadata.required) {
+            if (entity[key] == null || entity[key] === '') {
+                return false;
+            }
         }
         switch (type) {
             case DecoratorTypes.BOOLEAN_DROPDOWN:
@@ -815,9 +902,18 @@ class EntityUtilities {
                     return false;
                 }
                 break;
+            case DecoratorTypes.STRING_PASSWORD:
+                const entityPassword = entity[key];
+                const passwordMetadata = metadata;
+                const confirmPassword = ReflectUtilities.getMetadata('confirmPassword', entity, key);
+                if (!EntityUtilities.isPasswordValid(entityPassword, passwordMetadata, confirmPassword)) {
+                    return false;
+                }
+                break;
             case DecoratorTypes.NUMBER_DROPDOWN:
                 return true;
             case DecoratorTypes.NUMBER:
+            case DecoratorTypes.NUMBER_SLIDER:
                 const entityNumber = entity[key];
                 const numberMetadata = metadata;
                 if (!EntityUtilities.isNumberValid(entityNumber, numberMetadata)) {
@@ -912,6 +1008,21 @@ class EntityUtilities {
         }
         return true;
     }
+    static isPasswordValid(value, metadata, confirmPassword) {
+        if (value !== confirmPassword) {
+            return false;
+        }
+        if (metadata.maxLength && value.length > metadata.maxLength) {
+            return false;
+        }
+        if (metadata.minLength && value.length < metadata.minLength) {
+            return false;
+        }
+        if (metadata.regex && !value.match(metadata.regex)) {
+            return false;
+        }
+        return true;
+    }
     static isNumberValid(value, metadata) {
         if (metadata.max && value > metadata.max) {
             return false;
@@ -1012,8 +1123,6 @@ class EntityUtilities {
     }
     static isFileDataValid(value, metadata) {
         const files = metadata.multiple ? value : [value];
-        const maxSize = metadata.maxSize * 1000000;
-        const maxSizeTotal = metadata.maxSizeTotal * 1000000;
         let fileSizeTotal = 0;
         // eslint-disable-next-line @typescript-eslint/prefer-for-of
         for (let i = 0; i < files.length; i++) {
@@ -1023,11 +1132,11 @@ class EntityUtilities {
             if (!FileUtilities.isMimeTypeValid(files[i].type, metadata.allowedMimeTypes)) {
                 return false;
             }
-            if (files[i].size > maxSize) {
+            if (FileUtilities.transformToMegaBytes(files[i].size, 'B') > metadata.maxSize) {
                 return false;
             }
             fileSizeTotal += files[i].size;
-            if (fileSizeTotal > maxSizeTotal) {
+            if (FileUtilities.transformToMegaBytes(fileSizeTotal, 'B') > metadata.maxSizeTotal) {
                 return false;
             }
         }
@@ -1040,7 +1149,7 @@ class EntityUtilities {
      * @param entityPriorChanges - The entity before the changes.
      * @returns Whether or not the entity is dirty.
      */
-    static dirty(entity, entityPriorChanges) {
+    static isDirty(entity, entityPriorChanges) {
         return __awaiter(this, void 0, void 0, function* () {
             if (!entityPriorChanges) {
                 return false;
@@ -1054,7 +1163,7 @@ class EntityUtilities {
     static differencesForDirty(entity, entityPriorChanges) {
         return __awaiter(this, void 0, void 0, function* () {
             const res = [];
-            for (const key in entity) {
+            for (const key of ReflectUtilities.ownKeys(entity)) {
                 const metadata = EntityUtilities.getPropertyMetadata(entity, key);
                 const type = EntityUtilities.getPropertyType(entity, key);
                 if (!(yield EntityUtilities.isEqual(entity[key], entityPriorChanges[key], metadata, type))) {
@@ -1064,6 +1173,10 @@ class EntityUtilities {
                         after: entity[key]
                     });
                 }
+                else {
+                    // This is needed to set blob file data so that it is only requested once.
+                    entityPriorChanges[key] = LodashUtilities.cloneDeep(entity[key]);
+                }
             }
             return res;
         });
@@ -1167,8 +1280,16 @@ class EntityUtilities {
     // TODO: Find a way to use blobs with jest
     /* istanbul ignore next */
     static isEqualFile(value, valuePriorChanges, multiple) {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b;
         return __awaiter(this, void 0, void 0, function* () {
+            if (value == null) {
+                if (valuePriorChanges == null) {
+                    return true;
+                }
+                else {
+                    return false;
+                }
+            }
             const files = multiple ? value.sort() : [value].sort();
             const filesPriorChanges = multiple ? valuePriorChanges.sort() : [valuePriorChanges].sort();
             if (files.length !== filesPriorChanges.length) {
@@ -1176,14 +1297,18 @@ class EntityUtilities {
             }
             for (let i = 0; i < files.length; i++) {
                 // checks this before actually getting any files due to performance reasons.
-                if (!LodashUtilities.isEqual((_a = files[i]) === null || _a === void 0 ? void 0 : _a.name, (_b = filesPriorChanges[i]) === null || _b === void 0 ? void 0 : _b.name)
-                    || !LodashUtilities.isEqual((_c = files[i]) === null || _c === void 0 ? void 0 : _c.url, (_d = filesPriorChanges[i]) === null || _d === void 0 ? void 0 : _d.url)) {
+                if (!LodashUtilities.isEqual(LodashUtilities.omit(files[i], 'file'), LodashUtilities.omit(filesPriorChanges[i], 'file'))) {
                     return false;
                 }
-                files[i] = filesPriorChanges[i].file && !files[i].file ? yield FileUtilities.getFileData(files[i]) : files[i];
-                // eslint-disable-next-line max-len
-                filesPriorChanges[i] = files[i].file && !filesPriorChanges[i].file ? yield FileUtilities.getFileData(filesPriorChanges[i]) : filesPriorChanges[i];
-                if (!LodashUtilities.isEqual(yield ((_e = files[i].file) === null || _e === void 0 ? void 0 : _e.text()), yield ((_f = filesPriorChanges[i].file) === null || _f === void 0 ? void 0 : _f.text()))) {
+                if (filesPriorChanges[i].file && !files[i].file) {
+                    files[i] = yield FileUtilities.getFileData(files[i]);
+                    value = files[i];
+                }
+                if (files[i].file && !filesPriorChanges[i].file) {
+                    filesPriorChanges[i] = yield FileUtilities.getFileData(filesPriorChanges[i]);
+                    valuePriorChanges = filesPriorChanges[i];
+                }
+                if (!LodashUtilities.isEqual(yield ((_a = files[i].file) === null || _a === void 0 ? void 0 : _a.text()), yield ((_b = filesPriorChanges[i].file) === null || _b === void 0 ? void 0 : _b.text()))) {
                     return false;
                 }
             }
@@ -1250,42 +1375,80 @@ class EntityUtilities {
             ReflectUtilities.set(entity, key, ReflectUtilities.get(entityPriorChanges, key));
         }
     }
+    static getEntityRows(entity, tab, hideOmitForCreate, hideOmitForEdit) {
+        const res = [];
+        const keys = EntityUtilities.keysOf(entity, hideOmitForCreate, hideOmitForEdit);
+        const numberOfRows = EntityUtilities.getNumberOfRows(keys, entity, tab);
+        for (let i = 1; i <= numberOfRows; i++) {
+            const row = {
+                row: i,
+                keys: EntityUtilities.getKeysForRow(keys, entity, i, tab)
+            };
+            res.push(row);
+        }
+        if (EntityUtilities.getKeysForRow(keys, entity, -1, tab).length) {
+            const lastRow = {
+                row: numberOfRows + 1,
+                keys: EntityUtilities.getKeysForRow(keys, entity, -1, tab)
+            };
+            res.push(lastRow);
+        }
+        return res;
+    }
     /**
-     * Gets the rows that are used to display the given entity.
+     * Gets the tabs that are used to display the given entity.
      *
      * @param entity - The entity to get the rows from.
      * @param hideOmitForCreate - Whether or not keys with the metadata omitForCreate should be filtered out.
      * @param hideOmitForEdit - Whether or not keys with the metadata omitForUpdate should be filtered out.
-     * @returns The sorted Rows containing the row number and the keys to display in that row.
+     * @returns The sorted Tabs containing the rows and the keys to display in that row.
      */
-    static getEntityRows(entity, hideOmitForCreate = false, hideOmitForEdit = false) {
+    static getEntityTabs(entity, hideOmitForCreate = false, hideOmitForEdit = false) {
         const res = [];
         const keys = EntityUtilities.keysOf(entity, hideOmitForCreate, hideOmitForEdit);
-        const numberOfRows = EntityUtilities.getNumberOfRows(keys, entity);
-        for (let i = 1; i <= numberOfRows; i++) {
-            const row = {
-                row: i,
-                keys: EntityUtilities.getKeysForRow(keys, entity, i)
+        const numberOfTabs = EntityUtilities.getNumberOfTabs(keys, entity);
+        if (EntityUtilities.getEntityRows(entity, -1, hideOmitForCreate, hideOmitForEdit).length) {
+            const firstTab = {
+                tabName: 'Tab 1',
+                tab: -1,
+                rows: EntityUtilities.getEntityRows(entity, -1, hideOmitForCreate, hideOmitForEdit)
             };
-            res.push(row);
+            res.push(firstTab);
+        }
+        for (let i = 2; i <= numberOfTabs; i++) {
+            const tab = {
+                tabName: EntityUtilities.getTabName(entity, i),
+                tab: i,
+                rows: EntityUtilities.getEntityRows(entity, i, hideOmitForCreate, hideOmitForEdit)
+            };
+            res.push(tab);
         }
-        const lastRow = {
-            row: numberOfRows + 1,
-            keys: EntityUtilities.getKeysForRow(keys, entity, -1)
-        };
-        res.push(lastRow);
         return res;
     }
-    static getKeysForRow(keys, entity, i) {
+    static getKeysForRow(keys, entity, row, tab) {
         return keys
-            .filter(k => EntityUtilities.getPropertyMetadata(entity, k).position.row === i)
+            .filter(k => EntityUtilities.getPropertyMetadata(entity, k).position.row === row)
+            .filter(k => EntityUtilities.getPropertyMetadata(entity, k).position.tab === tab)
             .sort((a, b) => EntityUtilities.compareOrder(a, b, entity));
     }
-    static getNumberOfRows(keys, entity) {
+    static getNumberOfRows(keys, entity, tab) {
         return keys
+            .filter(k => EntityUtilities.getPropertyMetadata(entity, k).position.tab === tab)
             .map(k => EntityUtilities.getPropertyMetadata(entity, k).position.row)
             .sort((a, b) => (a > b ? -1 : 1))[0];
     }
+    static getNumberOfTabs(keys, entity) {
+        return keys
+            .map(k => EntityUtilities.getPropertyMetadata(entity, k).position.tab)
+            .sort((a, b) => (a > b ? -1 : 1))[0];
+    }
+    static getTabName(entity, tab) {
+        var _a;
+        const providedTabName = (_a = EntityUtilities.keysOf(entity)
+            .map(k => EntityUtilities.getPropertyMetadata(entity, k))
+            .find(m => m.position.tab === tab && m.position.tabName)) === null || _a === void 0 ? void 0 : _a.position.tabName;
+        return providedTabName !== null && providedTabName !== void 0 ? providedTabName : `Tab ${tab}`;
+    }
     /**
      * Gets the keys of the provided entity correctly typed.
      *
@@ -1638,10 +1801,10 @@ class NgxMatEntityConfirmDialogComponent {
     }
 }
 NgxMatEntityConfirmDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityConfirmDialogComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-NgxMatEntityConfirmDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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 *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 *ngIf=\"data.type !== 'delete'\" mat-raised-button (click)=\"confirmAction()\" [disabled]=\"data.requireConfirmation && !confirm\" class=\"confirm-button\">\n        {{data.confirmButtonLabel}}\n    </button>\n    <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{display:flex;justify-content:space-between}\n"], components: [{ type: i2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i3.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"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }] });
+NgxMatEntityConfirmDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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 *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 *ngIf=\"data.type !== 'delete'\" mat-raised-button (click)=\"confirmAction()\" [disabled]=\"data.requireConfirmation && !confirm\" class=\"confirm-button\">\n        {{data.confirmButtonLabel}}\n    </button>\n    <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"], components: [{ type: i2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i3.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"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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 *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 *ngIf=\"data.type !== 'delete'\" mat-raised-button (click)=\"confirmAction()\" [disabled]=\"data.requireConfirmation && !confirm\" class=\"confirm-button\">\n        {{data.confirmButtonLabel}}\n    </button>\n    <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{display:flex;justify-content:space-between}\n"] }]
+            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 *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 *ngIf=\"data.type !== 'delete'\" mat-raised-button (click)=\"confirmAction()\" [disabled]=\"data.requireConfirmation && !confirm\" class=\"confirm-button\">\n        {{data.confirmButtonLabel}}\n    </button>\n    <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 () {
         return [{ type: i1.MatDialogRef }, { type: undefined, decorators: [{
                         type: Inject,
@@ -1761,12 +1924,36 @@ class AddArrayItemDialogDataBuilder extends BaseBuilder {
 
 /**
  * The abstract base class of any ngx-mat-entity input.
+ * Extend from this when implementing your own custom decorator.
+ *
+ * It already provides:
+ *
+ * - entity: The entity which the property is on. (type-safe due to the Generic "EntityType")
+ * - key: The key of the property. (type-safe due to the Generic "EntityType")
+ * - getValidationErrorMessage: The function that generates the error message when the input is invalid.
+ * - isReadOnly: Whether or not the input is read only. Can be used to disable elements.
+ * - propertyValue: Just the typed version of the property, its the same as entity[key].
+ * - metadata: The metadata of the property. (type-safe due to the Generic "CustomMetadataType")
+ * - ngOnInit: Gets the metadata for the property, be aware of this when overriding this method.
+ * - emitChange: Should be called when the input has changed. This is needed to trigger validation and dirty checks.
  */
 // eslint-disable-next-line max-len
 class NgxMatEntityBaseInputComponent {
     constructor() {
         this.inputChangeEvent = new EventEmitter();
     }
+    // eslint-disable-next-line jsdoc/require-returns
+    /**
+     * The property value of entity[key] correctly typed.
+     * Uses getters and setters so that inputs are always linked to the original value.
+     */
+    get propertyValue() {
+        return this.entity[this.key];
+    }
+    // eslint-disable-next-line jsdoc/require-jsdoc
+    set propertyValue(value) {
+        this.entity[this.key] = value;
+    }
     ngOnInit() {
         this.metadata = EntityUtilities.getPropertyMetadata(this.entity, this.key);
     }
@@ -1778,7 +1965,7 @@ class NgxMatEntityBaseInputComponent {
     }
 }
 NgxMatEntityBaseInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityBaseInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NgxMatEntityBaseInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NgxMatEntityBaseInputComponent, selector: "ngx-mat-entity-base-input", inputs: { entity: "entity", key: "key", getValidationErrorMessage: "getValidationErrorMessage" }, outputs: { inputChangeEvent: "inputChangeEvent" }, ngImport: i0, template: '', isInline: true });
+NgxMatEntityBaseInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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: "13.3.11", ngImport: i0, type: NgxMatEntityBaseInputComponent, decorators: [{
             type: Component,
             args: [{
@@ -1791,6 +1978,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], getValidationErrorMessage: [{
                 type: Input
+            }], isReadOnly: [{
+                type: Input
             }], inputChangeEvent: [{
                 type: Output
             }] } });
@@ -1799,20 +1988,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
 class StringInputComponent extends NgxMatEntityBaseInputComponent {
 }
 StringInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: StringInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-StringInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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)]=\"entity[key]\"\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    />\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], components: [{ type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i1$1.MatLabel, selector: "mat-label" }, { type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i3$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i3$1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { type: i3$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }] });
+StringInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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"], components: [{ type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i1$1.MatLabel, selector: "mat-label" }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i3$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i3$1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { type: i3$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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)]=\"entity[key]\"\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    />\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"] }]
+            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: "13.3.11", ngImport: i0, type: StringTextboxInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-StringTextboxInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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)]=\"entity[key]\"\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    >\n    </textarea>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], components: [{ type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i1$1.MatLabel, selector: "mat-label" }, { type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i3$2.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i3$1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { type: i3$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }] });
+StringTextboxInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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"], components: [{ type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i1$1.MatLabel, selector: "mat-label" }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i3$2.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i3$1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { type: i3$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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)]=\"entity[key]\"\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    >\n    </textarea>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"] }]
+            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 */
@@ -1828,94 +2017,126 @@ class StringAutocompleteInputComponent extends NgxMatEntityBaseInputComponent {
      * @param input - The input of the user.
      */
     filterAutocompleteStrings(input) {
-        const inputString = input;
-        if (inputString) {
-            const filterValue = inputString.toLowerCase();
-            this.filteredAutocompleteStrings = this.autocompleteStrings.filter(s => s.toLowerCase().includes(filterValue));
+        if (input) {
+            this.filteredAutocompleteStrings = this.autocompleteStrings.filter(s => s.toLowerCase().includes(input.toLowerCase()));
         }
     }
 }
 StringAutocompleteInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: StringAutocompleteInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-StringAutocompleteInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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)]=\"entity[key]\"\n        [name]=\"key.toString()\"\n        #model=\"ngModel\"\n        [matAutocomplete]=\"auto\"\n        (keyup)=\"filterAutocompleteStrings(entity[key])\"\n        [required]=\"metadata.required\"\n        [minlength]=\"metadata.minLength ?? null\"\n        [maxlength]=\"metadata.maxLength ?? null\"\n        [pattern]=\"metadata.regex ?? '[\\\\s\\\\S]*'\"\n        (ngModelChange)=\"emitChange()\"\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"], components: [{ type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i3$3.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i1$1.MatLabel, selector: "mat-label" }, { type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i3$1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { type: i3$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i3$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }] });
+StringAutocompleteInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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"], components: [{ type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i3$3.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i1$1.MatLabel, selector: "mat-label" }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i3$1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { type: i3$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i3$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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)]=\"entity[key]\"\n        [name]=\"key.toString()\"\n        #model=\"ngModel\"\n        [matAutocomplete]=\"auto\"\n        (keyup)=\"filterAutocompleteStrings(entity[key])\"\n        [required]=\"metadata.required\"\n        [minlength]=\"metadata.minLength ?? null\"\n        [maxlength]=\"metadata.maxLength ?? null\"\n        [pattern]=\"metadata.regex ?? '[\\\\s\\\\S]*'\"\n        (ngModelChange)=\"emitChange()\"\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: '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: "13.3.11", ngImport: i0, type: StringDropdownInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-StringDropdownInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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)]=\"entity[key]\" [name]=\"key.toString()\" #model=\"ngModel\" [required]=\"metadata.required\">\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"], components: [{ type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$3.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i1$1.MatLabel, selector: "mat-label" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }] });
+StringDropdownInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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"], components: [{ type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$3.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i1$1.MatLabel, selector: "mat-label" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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)]=\"entity[key]\" [name]=\"key.toString()\" #model=\"ngModel\" [required]=\"metadata.required\">\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: '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.hide = true;
+        this.hideConfirm = true;
+    }
+    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();
+    }
+}
+StringPasswordInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: StringPasswordInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+StringPasswordInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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 (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 (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"], components: [{ type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i3.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"] }], directives: [{ type: i1$1.MatLabel, selector: "mat-label" }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i3$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i3$1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { type: i3$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i1$1.MatSuffix, selector: "[matSuffix]" }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: StringPasswordInputComponent, 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 (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 (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"] }]
         }] });
 
 /* eslint-disable jsdoc/require-jsdoc */
 class BooleanCheckboxInputComponent extends NgxMatEntityBaseInputComponent {
     ngOnInit() {
+        var _a;
         super.ngOnInit();
-        if (this.entity[this.key] == null) {
-            this.entity[this.key] = false;
-        }
+        this.propertyValue = (_a = this.propertyValue) !== null && _a !== void 0 ? _a : false;
     }
 }
 BooleanCheckboxInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BooleanCheckboxInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-BooleanCheckboxInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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 (ngModelChange)=\"emitChange()\" (click)=\"model.control.markAsTouched()\" [(ngModel)]=\"entity[key]\" [name]=\"key.toString()\"></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)]=\"entity[key]\"\n        [name]=\"key.toString() + 'Helper'\"\n        #model=\"ngModel\"\n        [pattern]=\"metadata.required ? 'true' : '[\\\\s\\\\S]*'\"\n        [required]=\"metadata.required\">\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"], components: [{ type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], directives: [{ type: i1$1.MatLabel, selector: "mat-label" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }] });
+BooleanCheckboxInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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"], components: [{ type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], directives: [{ type: i1$1.MatLabel, selector: "mat-label" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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 (ngModelChange)=\"emitChange()\" (click)=\"model.control.markAsTouched()\" [(ngModel)]=\"entity[key]\" [name]=\"key.toString()\"></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)]=\"entity[key]\"\n        [name]=\"key.toString() + 'Helper'\"\n        #model=\"ngModel\"\n        [pattern]=\"metadata.required ? 'true' : '[\\\\s\\\\S]*'\"\n        [required]=\"metadata.required\">\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"] }]
+            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();
-        if (this.entity[this.key] == null) {
-            this.entity[this.key] = false;
-        }
+        this.propertyValue = (_a = this.propertyValue) !== null && _a !== void 0 ? _a : false;
     }
 }
 BooleanToggleInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BooleanToggleInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-BooleanToggleInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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 (click)=\"model.control.markAsTouched()\" [(ngModel)]=\"entity[key]\" [name]=\"key.toString()\"></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)]=\"entity[key]\"\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"], components: [{ type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$3.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }], directives: [{ type: i1$1.MatLabel, selector: "mat-label" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }] });
+BooleanToggleInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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"], components: [{ type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$3.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }], directives: [{ type: i1$1.MatLabel, selector: "mat-label" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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 (click)=\"model.control.markAsTouched()\" [(ngModel)]=\"entity[key]\" [name]=\"key.toString()\"></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)]=\"entity[key]\"\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"] }]
+            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: "13.3.11", ngImport: i0, type: BooleanDropdownInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-BooleanDropdownInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: BooleanDropdownInputComponent, selector: "boolean-dropdown-input", usesInheritance: true, ngImport: i0, template: "<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-select (ngModelChange)=\"emitChange()\" [(ngModel)]=\"entity[key]\" [name]=\"key.toString()\" #model=\"ngModel\" [required]=\"metadata.required\">\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"], components: [{ type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$3.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i1$1.MatLabel, selector: "mat-label" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }] });
+BooleanDropdownInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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"], components: [{ type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$3.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i1$1.MatLabel, selector: "mat-label" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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 (ngModelChange)=\"emitChange()\" [(ngModel)]=\"entity[key]\" [name]=\"key.toString()\" #model=\"ngModel\" [required]=\"metadata.required\">\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"] }]
+            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: "13.3.11", ngImport: i0, type: NumberInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-NumberInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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)]=\"entity[key]\"\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    />\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], components: [{ type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i1$1.MatLabel, selector: "mat-label" }, { type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i3$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i3$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i3$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }] });
+NumberInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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"], components: [{ type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i1$1.MatLabel, selector: "mat-label" }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i3$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i3$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i3$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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)]=\"entity[key]\"\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    />\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"] }]
+            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: "13.3.11", ngImport: i0, type: NumberDropdownInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-NumberDropdownInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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)]=\"entity[key]\" [name]=\"key.toString()\" #model=\"ngModel\" [required]=\"metadata.required\">\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"], components: [{ type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$3.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i1$1.MatLabel, selector: "mat-label" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }] });
+NumberDropdownInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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"], components: [{ type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$3.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i1$1.MatLabel, selector: "mat-label" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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)]=\"entity[key]\" [name]=\"key.toString()\" #model=\"ngModel\" [required]=\"metadata.required\">\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: '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: "13.3.11", ngImport: i0, type: NumberSliderInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+NumberSliderInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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"], components: [{ type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$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"] }], directives: [{ type: i1$1.MatLabel, selector: "mat-label" }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i3$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i3$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i3$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NumberSliderInputComponent, 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"] }]
         }] });
 
 /**
- * The base data needed for all arrays that are displayed as a table.
+ * The base component needed for all arrays that are displayed as a table.
  */
 class ArrayTableComponent extends NgxMatEntityBaseInputComponent {
     constructor(matDialog) {
@@ -1926,18 +2147,16 @@ class ArrayTableComponent extends NgxMatEntityBaseInputComponent {
         this.selection = new SelectionModel(true, []);
     }
     ngOnInit() {
+        var _a;
         super.ngOnInit();
-        if (this.entity[this.key] == null) {
-            this.entity[this.key] = [];
-        }
-        this.arrayValues = this.entity[this.key];
+        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 = ['select'].concat(givenDisplayColumns);
-        this.dataSource.data = this.arrayValues;
+        this.displayedColumns = this.isReadOnly ? givenDisplayColumns : ['select'].concat(givenDisplayColumns);
+        this.dataSource.data = this.propertyValue;
     }
     /**
      * Toggles all array-items in the table.
@@ -1966,9 +2185,10 @@ class ArrayTableComponent extends NgxMatEntityBaseInputComponent {
      * Tries to add an item to the array.
      */
     add() {
+        var _a, _b, _c;
         if (this.input != null) {
             if (!this.metadata.allowDuplicates
-                && this.arrayValues.find((v) => __awaiter(this, void 0, void 0, function* () { return yield EntityUtilities.isEqual(this.input, v, this.metadata, this.metadata.itemType); })) != null) {
+                && ((_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,
@@ -1976,8 +2196,8 @@ class ArrayTableComponent extends NgxMatEntityBaseInputComponent {
                 });
                 return;
             }
-            this.arrayValues.push(LodashUtilities.cloneDeep(this.input));
-            this.dataSource.data = this.arrayValues;
+            (_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();
         }
@@ -1992,10 +2212,12 @@ class ArrayTableComponent extends NgxMatEntityBaseInputComponent {
      * Removes all selected entries from the entity array.
      */
     remove() {
+        var _a;
         this.selection.selected.forEach(s => {
-            this.arrayValues.splice(this.arrayValues.indexOf(s), 1);
+            var _a;
+            (_a = this.propertyValue) === null || _a === void 0 ? void 0 : _a.splice(this.propertyValue.indexOf(s), 1);
         });
-        this.dataSource.data = this.arrayValues;
+        this.dataSource.data = (_a = this.propertyValue) !== null && _a !== void 0 ? _a : [];
         this.selection.clear();
         this.emitChange();
     }
@@ -2018,10 +2240,10 @@ class ArrayDateInputComponent extends ArrayTableComponent {
     }
 }
 ArrayDateInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ArrayDateInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ArrayDateInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ArrayDateInputComponent, selector: "array-date-input", usesInheritance: true, ngImport: i0, template: "<div class=\"mat-elevation-z8\" style=\"border-radius: 5px;padding: 15px;margin-bottom: 15px;margin-top: 15px;\">\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 mat-raised-button\n            [disabled]=\"model.errors\"\n            (click)=\"add()\">\n            {{metadata.addButtonLabel}}\n        </button>\n        <button mat-raised-button\n            [disabled]=\"!selection.selected.length\"\n            (click)=\"remove()\">\n            {{metadata.removeButtonLabel}}\n        </button>\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 ? masterToggle() : null\" [checked]=\"selection.hasValue() && isAllSelected()\" [indeterminate]=\"selection.hasValue() && !isAllSelected()\"></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}.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"], components: [{ type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i2$4.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { type: i3.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"] }, { type: i4$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i4$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i4$2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }], directives: [{ type: i1$1.MatLabel, selector: "mat-label" }, { type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1$1.MatSuffix, selector: "[matSuffix]" }, { type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }, { type: i4$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i4$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i4$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i4$2.MatCellDef, selector: "[matCellDef]" }, { type: i4$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i4$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+ArrayDateInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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 mat-raised-button\n                [disabled]=\"model.errors\"\n                (click)=\"add()\">\n                {{metadata.addButtonLabel}}\n            </button>\n            <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 ? masterToggle() : null\" [checked]=\"selection.hasValue() && isAllSelected()\" [indeterminate]=\"selection.hasValue() && !isAllSelected()\"></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"], components: [{ type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$5.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i2$5.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { type: i3.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"] }, { type: i4$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i4$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i4$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.MatLabel, selector: "mat-label" }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$5.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1$1.MatSuffix, selector: "[matSuffix]" }, { type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }, { type: i4$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i4$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i4$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i4$1.MatCellDef, selector: "[matCellDef]" }, { type: i4$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i4$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ArrayDateInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'array-date-input', template: "<div class=\"mat-elevation-z8\" style=\"border-radius: 5px;padding: 15px;margin-bottom: 15px;margin-top: 15px;\">\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 mat-raised-button\n            [disabled]=\"model.errors\"\n            (click)=\"add()\">\n            {{metadata.addButtonLabel}}\n        </button>\n        <button mat-raised-button\n            [disabled]=\"!selection.selected.length\"\n            (click)=\"remove()\">\n            {{metadata.removeButtonLabel}}\n        </button>\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 ? masterToggle() : null\" [checked]=\"selection.hasValue() && isAllSelected()\" [indeterminate]=\"selection.hasValue() && !isAllSelected()\"></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}.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: '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 mat-raised-button\n                [disabled]=\"model.errors\"\n                (click)=\"add()\">\n                {{metadata.addButtonLabel}}\n            </button>\n            <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 ? masterToggle() : null\" [checked]=\"selection.hasValue() && isAllSelected()\" [indeterminate]=\"selection.hasValue() && !isAllSelected()\"></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 */
@@ -2054,10 +2276,10 @@ class ArrayDateTimeInputComponent extends ArrayTableComponent {
     }
 }
 ArrayDateTimeInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ArrayDateTimeInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ArrayDateTimeInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ArrayDateTimeInputComponent, selector: "array-date-time-input", usesInheritance: true, ngImport: i0, template: "<div class=\"mat-elevation-z8\" style=\"border-radius: 5px;padding: 15px;margin-bottom: 15px;margin-top: 15px;\">\n            \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                        DateUtilities.asDate(input),\n                        metadata.times,\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 mat-raised-button\n            [disabled]=\"model.errors || timeModel.errors || DateUtilities.timeIsUnprocessable(time)\"\n            (click)=\"addDateTime()\">\n            {{metadata.addButtonLabel}}\n        </button>\n        <button mat-raised-button\n            [disabled]=\"!selection.selected.length\"\n            (click)=\"remove()\">\n            {{metadata.removeButtonLabel}}\n        </button>\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 ? masterToggle() : null\" [checked]=\"selection.hasValue() && isAllSelected()\" [indeterminate]=\"selection.hasValue() && !isAllSelected()\"></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}.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"], components: [{ type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i2$4.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { type: i2$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i3.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"] }, { type: i4$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i4$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i4$2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }], directives: [{ type: i1$1.MatLabel, selector: "mat-label" }, { type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1$1.MatSuffix, selector: "[matSuffix]" }, { type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i4$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i4$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i4$2.MatCellDef, selector: "[matCellDef]" }, { type: i4$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i4$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i4$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+ArrayDateTimeInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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 mat-raised-button\n                [disabled]=\"model.errors || timeModel.errors || DateUtilities.timeIsUnprocessable(time)\"\n                (click)=\"addDateTime()\">\n                {{metadata.addButtonLabel}}\n            </button>\n            <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 ? masterToggle() : null\" [checked]=\"selection.hasValue() && isAllSelected()\" [indeterminate]=\"selection.hasValue() && !isAllSelected()\"></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"], components: [{ type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$5.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i2$5.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { type: i2$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i3.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"] }, { type: i4$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i4$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i4$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.MatLabel, selector: "mat-label" }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$5.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1$1.MatSuffix, selector: "[matSuffix]" }, { type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i4$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i4$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i4$1.MatCellDef, selector: "[matCellDef]" }, { type: i4$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i4$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i4$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ArrayDateTimeInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'array-date-time-input', template: "<div class=\"mat-elevation-z8\" style=\"border-radius: 5px;padding: 15px;margin-bottom: 15px;margin-top: 15px;\">\n            \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                        DateUtilities.asDate(input),\n                        metadata.times,\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 mat-raised-button\n            [disabled]=\"model.errors || timeModel.errors || DateUtilities.timeIsUnprocessable(time)\"\n            (click)=\"addDateTime()\">\n            {{metadata.addButtonLabel}}\n        </button>\n        <button mat-raised-button\n            [disabled]=\"!selection.selected.length\"\n            (click)=\"remove()\">\n            {{metadata.removeButtonLabel}}\n        </button>\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 ? masterToggle() : null\" [checked]=\"selection.hasValue() && isAllSelected()\" [indeterminate]=\"selection.hasValue() && !isAllSelected()\"></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}.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"] }]
+            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 mat-raised-button\n                [disabled]=\"model.errors || timeModel.errors || DateUtilities.timeIsUnprocessable(time)\"\n                (click)=\"addDateTime()\">\n                {{metadata.addButtonLabel}}\n            </button>\n            <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 ? masterToggle() : null\" [checked]=\"selection.hasValue() && isAllSelected()\" [indeterminate]=\"selection.hasValue() && !isAllSelected()\"></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 */
@@ -2093,10 +2315,10 @@ class ArrayDateRangeInputComponent extends ArrayTableComponent {
     }
 }
 ArrayDateRangeInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ArrayDateRangeInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ArrayDateRangeInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ArrayDateRangeInputComponent, selector: "array-date-range-input", usesInheritance: true, ngImport: i0, template: "<div class=\"mat-elevation-z8\" style=\"border-radius: 5px;padding: 15px;margin-bottom: 15px;margin-top: 15px;\">\n\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 mat-raised-button\n            [disabled]=\"startModel.errors || endModel.errors\"\n            (click)=\"addDateRange()\">\n            {{metadata.addButtonLabel}}\n        </button>\n        <button mat-raised-button\n            [disabled]=\"!selection.selected.length\"\n            (click)=\"remove()\">\n            {{metadata.removeButtonLabel}}\n        </button>\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 ? masterToggle() : null\" [checked]=\"selection.hasValue() && isAllSelected()\" [indeterminate]=\"selection.hasValue() && !isAllSelected()\"></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}.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"], components: [{ type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$4.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { type: i2$4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i2$4.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { type: i3.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"] }, { type: i4$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i4$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i4$2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }], directives: [{ type: i1$1.MatLabel, selector: "mat-label" }, { type: i2$4.MatStartDate, selector: "input[matStartDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i2$4.MatEndDate, selector: "input[matEndDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { type: i1$1.MatSuffix, selector: "[matSuffix]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }, { type: i4$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i4$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i4$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i4$2.MatCellDef, selector: "[matCellDef]" }, { type: i4$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i4$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }] });
+ArrayDateRangeInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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 mat-raised-button\n                [disabled]=\"startModel.errors || endModel.errors\"\n                (click)=\"addDateRange()\">\n                {{metadata.addButtonLabel}}\n            </button>\n            <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 ? masterToggle() : null\" [checked]=\"selection.hasValue() && isAllSelected()\" [indeterminate]=\"selection.hasValue() && !isAllSelected()\"></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"], components: [{ type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$5.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { type: i2$5.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i2$5.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { type: i3.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"] }, { type: i4$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i4$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i4$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.MatLabel, selector: "mat-label" }, { type: i2$5.MatStartDate, selector: "input[matStartDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i2$5.MatEndDate, selector: "input[matEndDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { type: i1$1.MatSuffix, selector: "[matSuffix]" }, { type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }, { type: i4$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i4$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i4$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i4$1.MatCellDef, selector: "[matCellDef]" }, { type: i4$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i4$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ArrayDateRangeInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'array-date-range-input', template: "<div class=\"mat-elevation-z8\" style=\"border-radius: 5px;padding: 15px;margin-bottom: 15px;margin-top: 15px;\">\n\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 mat-raised-button\n            [disabled]=\"startModel.errors || endModel.errors\"\n            (click)=\"addDateRange()\">\n            {{metadata.addButtonLabel}}\n        </button>\n        <button mat-raised-button\n            [disabled]=\"!selection.selected.length\"\n            (click)=\"remove()\">\n            {{metadata.removeButtonLabel}}\n        </button>\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 ? masterToggle() : null\" [checked]=\"selection.hasValue() && isAllSelected()\" [indeterminate]=\"selection.hasValue() && !isAllSelected()\"></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}.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: '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 mat-raised-button\n                [disabled]=\"startModel.errors || endModel.errors\"\n                (click)=\"addDateRange()\">\n                {{metadata.addButtonLabel}}\n            </button>\n            <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 ? masterToggle() : null\" [checked]=\"selection.hasValue() && isAllSelected()\" [indeterminate]=\"selection.hasValue() && !isAllSelected()\"></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 */
@@ -2105,13 +2327,6 @@ class ArrayStringChipsInputComponent extends NgxMatEntityBaseInputComponent {
         super(...arguments);
         this.chipsInput = '';
     }
-    ngOnInit() {
-        var _a;
-        super.ngOnInit();
-        if ((_a = this.entity[this.key]) === null || _a === void 0 ? void 0 : _a.length) {
-            this.stringChipsArrayValues = this.entity[this.key];
-        }
-    }
     /**
      * Handles adding strings to the chipsArray.
      * Checks validation and also creates a new array if it is undefined.
@@ -2124,7 +2339,7 @@ class ArrayStringChipsInputComponent extends NgxMatEntityBaseInputComponent {
      * @param event - The event that fires when a new chip is completed.
      */
     addStringChipArrayValue(event) {
-        var _a;
+        var _a, _b;
         const value = (event.value || '').trim();
         if (value) {
             if (this.metadata.minLength && value.length < this.metadata.minLength) {
@@ -2136,15 +2351,10 @@ class ArrayStringChipsInputComponent extends NgxMatEntityBaseInputComponent {
             if (this.metadata.regex && !value.match(this.metadata.regex)) {
                 return;
             }
-            if (!this.stringChipsArrayValues) {
-                if (this.entity[this.key] == null) {
-                    this.entity[this.key] = [];
-                }
-                this.stringChipsArrayValues = this.entity[this.key];
-            }
-            this.stringChipsArrayValues.push(value);
+            this.propertyValue = (_a = this.propertyValue) !== null && _a !== void 0 ? _a : [];
+            this.propertyValue.push(value);
         }
-        (_a = event.chipInput) === null || _a === void 0 ? void 0 : _a.clear();
+        (_b = event.chipInput) === null || _b === void 0 ? void 0 : _b.clear();
     }
     /**
      * Removes the given value from the array.
@@ -2158,11 +2368,8 @@ class ArrayStringChipsInputComponent extends NgxMatEntityBaseInputComponent {
      */
     removeStringChipArrayValue(value) {
         var _a, _b;
-        (_a = this.stringChipsArrayValues) === null || _a === void 0 ? void 0 : _a.splice(this.stringChipsArrayValues.indexOf(value), 1);
-        if (!((_b = this.stringChipsArrayValues) === null || _b === void 0 ? void 0 : _b.length)) {
-            this.entity[this.key] = undefined;
-            this.stringChipsArrayValues = this.entity[this.key];
-        }
+        (_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.
@@ -2171,6 +2378,7 @@ class ArrayStringChipsInputComponent extends NgxMatEntityBaseInputComponent {
      * @param chipsInput - The element where the user typed the value.
      */
     selected(event, chipsInput) {
+        var _a;
         const value = (event.option.viewValue || '').trim();
         if (this.metadata.minLength && value.length < this.metadata.minLength) {
             return;
@@ -2181,21 +2389,16 @@ class ArrayStringChipsInputComponent extends NgxMatEntityBaseInputComponent {
         if (this.metadata.regex && !value.match(this.metadata.regex)) {
             return;
         }
-        if (!this.stringChipsArrayValues) {
-            if (this.entity[this.key] == null) {
-                this.entity[this.key] = [];
-            }
-            this.stringChipsArrayValues = this.entity[this.key];
-        }
-        this.stringChipsArrayValues.push(value);
+        this.propertyValue = (_a = this.propertyValue) !== null && _a !== void 0 ? _a : [];
+        this.propertyValue.push(value);
         chipsInput.value = '';
     }
 }
 ArrayStringChipsInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ArrayStringChipsInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ArrayStringChipsInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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)]=\"entity[key]\" [name]=\"key.toString()\" #model=\"ngModel\"\n        [required]=\"metadata.required\"\n    >\n        <mat-chip *ngFor=\"let value of stringChipsArrayValues\" (removed)=\"removeStringChipArrayValue(value)\">\n            {{value}}\n            <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"], components: [{ type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$5.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }], directives: [{ type: i1$1.MatLabel, selector: "mat-label" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$5.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i2$5.MatChipRemove, selector: "[matChipRemove]" }, { type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i2$5.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { type: i3$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i3$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }] });
+ArrayStringChipsInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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 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"], components: [{ type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$6.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }], directives: [{ type: i1$1.MatLabel, selector: "mat-label" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$6.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i2$6.MatChipRemove, selector: "[matChipRemove]" }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i2$6.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { type: i3$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i3$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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)]=\"entity[key]\" [name]=\"key.toString()\" #model=\"ngModel\"\n        [required]=\"metadata.required\"\n    >\n        <mat-chip *ngFor=\"let value of stringChipsArrayValues\" (removed)=\"removeStringChipArrayValue(value)\">\n            {{value}}\n            <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-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 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"] }]
         }] });
 
 /* eslint-disable jsdoc/require-jsdoc */
@@ -2205,12 +2408,8 @@ class ArrayStringAutocompleteChipsComponent extends NgxMatEntityBaseInputCompone
         this.chipsInput = '';
     }
     ngOnInit() {
-        var _a;
         super.ngOnInit();
         this.filteredAutocompleteStrings = LodashUtilities.cloneDeep(this.metadata.autocompleteValues);
-        if ((_a = this.entity[this.key]) === null || _a === void 0 ? void 0 : _a.length) {
-            this.stringChipsArrayValues = this.entity[this.key];
-        }
     }
     /**
      * Handles adding strings to the chipsArray.
@@ -2224,7 +2423,7 @@ class ArrayStringAutocompleteChipsComponent extends NgxMatEntityBaseInputCompone
      * @param event - The event that fires when a new chip is completed.
      */
     addStringChipArrayValue(event) {
-        var _a;
+        var _a, _b;
         const value = (event.value || '').trim();
         if (value) {
             if (this.metadata.minLength && value.length < this.metadata.minLength) {
@@ -2236,15 +2435,10 @@ class ArrayStringAutocompleteChipsComponent extends NgxMatEntityBaseInputCompone
             if (this.metadata.regex && !value.match(this.metadata.regex)) {
                 return;
             }
-            if (!this.stringChipsArrayValues) {
-                if (this.entity[this.key] == null) {
-                    this.entity[this.key] = [];
-                }
-                this.stringChipsArrayValues = this.entity[this.key];
-            }
-            this.stringChipsArrayValues.push(value);
+            this.propertyValue = (_a = this.propertyValue) !== null && _a !== void 0 ? _a : [];
+            this.propertyValue.push(value);
         }
-        (_a = event.chipInput) === null || _a === void 0 ? void 0 : _a.clear();
+        (_b = event.chipInput) === null || _b === void 0 ? void 0 : _b.clear();
     }
     /**
      * Removes the given value from the array.
@@ -2258,11 +2452,8 @@ class ArrayStringAutocompleteChipsComponent extends NgxMatEntityBaseInputCompone
      */
     removeStringChipArrayValue(value) {
         var _a, _b;
-        (_a = this.stringChipsArrayValues) === null || _a === void 0 ? void 0 : _a.splice(this.stringChipsArrayValues.indexOf(value), 1);
-        if (!((_b = this.stringChipsArrayValues) === null || _b === void 0 ? void 0 : _b.length)) {
-            this.entity[this.key] = undefined;
-            this.stringChipsArrayValues = this.entity[this.key];
-        }
+        (_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.
@@ -2271,6 +2462,7 @@ class ArrayStringAutocompleteChipsComponent extends NgxMatEntityBaseInputCompone
      * @param chipsInput - The element where the user typed the value.
      */
     selected(event, chipsInput) {
+        var _a;
         const value = (event.option.viewValue || '').trim();
         if (this.metadata.minLength && value.length < this.metadata.minLength) {
             return;
@@ -2281,13 +2473,8 @@ class ArrayStringAutocompleteChipsComponent extends NgxMatEntityBaseInputCompone
         if (this.metadata.regex && !value.match(this.metadata.regex)) {
             return;
         }
-        if (!this.stringChipsArrayValues) {
-            if (this.entity[this.key] == null) {
-                this.entity[this.key] = [];
-            }
-            this.stringChipsArrayValues = this.entity[this.key];
-        }
-        this.stringChipsArrayValues.push(value);
+        this.propertyValue = (_a = this.propertyValue) !== null && _a !== void 0 ? _a : [];
+        this.propertyValue.push(value);
         chipsInput.value = '';
     }
     /**
@@ -2303,10 +2490,10 @@ class ArrayStringAutocompleteChipsComponent extends NgxMatEntityBaseInputCompone
     }
 }
 ArrayStringAutocompleteChipsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ArrayStringAutocompleteChipsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ArrayStringAutocompleteChipsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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)]=\"entity[key]\" [name]=\"key.toString()\" #model=\"ngModel\"\n        [required]=\"metadata.required\"\n    >\n        <mat-chip *ngFor=\"let value of stringChipsArrayValues\" (removed)=\"removeStringChipArrayValue(value)\">\n            {{value}}\n            <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"], components: [{ type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$5.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: i2$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i3$3.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i1$1.MatLabel, selector: "mat-label" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$5.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i2$5.MatChipRemove, selector: "[matChipRemove]" }, { type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i2$5.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { type: i2$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { type: i3$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i3$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }] });
+ArrayStringAutocompleteChipsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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 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"], components: [{ type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$6.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: i2$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i3$3.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i1$1.MatLabel, selector: "mat-label" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$6.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i2$6.MatChipRemove, selector: "[matChipRemove]" }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i2$6.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { type: i2$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { type: i3$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i3$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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-list #chipList\n        (ngModelChange)=\"emitChange()\"\n        [(ngModel)]=\"entity[key]\" [name]=\"key.toString()\" #model=\"ngModel\"\n        [required]=\"metadata.required\"\n    >\n        <mat-chip *ngFor=\"let value of stringChipsArrayValues\" (removed)=\"removeStringChipArrayValue(value)\">\n            {{value}}\n            <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: '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 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"] }]
         }] });
 
 /* eslint-disable jsdoc/require-jsdoc */
@@ -2314,14 +2501,13 @@ class DateInputComponent extends NgxMatEntityBaseInputComponent {
     constructor() {
         super(...arguments);
         this.DateUtilities = DateUtilities;
-        this.defaultDateFilter = () => true;
     }
 }
 DateInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DateInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DateInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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)]=\"entity[key]\"\n        [name]=\"key.toString()\"\n        #model=\"ngModel\"\n        [matDatepicker]=\"picker\"\n        [required]=\"metadata.required\"\n        [min]=\"metadata.min ? metadata.min(DateUtilities.asDate(entity[key])) : undefined\"\n        [max]=\"metadata.max ? metadata.max(DateUtilities.asDate(entity[key])) : undefined\"\n        [matDatepickerFilter]=\"metadata.filter ?? 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>", styles: ["mat-form-field{width:100%}\n"], components: [{ type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i2$4.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }], directives: [{ type: i1$1.MatLabel, selector: "mat-label" }, { type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1$1.MatSuffix, selector: "[matSuffix]" }, { type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }] });
+DateInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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"], components: [{ type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$5.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i2$5.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }], directives: [{ type: i1$1.MatLabel, selector: "mat-label" }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$5.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1$1.MatSuffix, selector: "[matSuffix]" }, { type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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)]=\"entity[key]\"\n        [name]=\"key.toString()\"\n        #model=\"ngModel\"\n        [matDatepicker]=\"picker\"\n        [required]=\"metadata.required\"\n        [min]=\"metadata.min ? metadata.min(DateUtilities.asDate(entity[key])) : undefined\"\n        [max]=\"metadata.max ? metadata.max(DateUtilities.asDate(entity[key])) : undefined\"\n        [matDatepickerFilter]=\"metadata.filter ?? 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>", styles: ["mat-form-field{width:100%}\n"] }]
+            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"] }]
         }] });
 
 /* eslint-disable jsdoc/require-jsdoc */
@@ -2333,12 +2519,12 @@ const EMPTY_DATERANGE = {
 class DateRangeInputComponent extends NgxMatEntityBaseInputComponent {
     constructor() {
         super(...arguments);
-        this.defaultDateFilter = () => true;
+        this.defaultDateFilter = DateUtilities.defaultDateFilter;
     }
     ngOnInit() {
         var _a;
         super.ngOnInit();
-        this.dateRange = (_a = LodashUtilities.cloneDeep(this.entity[this.key])) !== null && _a !== void 0 ? _a : EMPTY_DATERANGE;
+        this.dateRange = (_a = LodashUtilities.cloneDeep(this.propertyValue)) !== null && _a !== void 0 ? _a : EMPTY_DATERANGE;
         this.dateRangeStart = new Date(this.dateRange.start);
         this.dateRangeEnd = new Date(this.dateRange.end);
         this.setDateRangeValues();
@@ -2356,15 +2542,15 @@ class DateRangeInputComponent extends NgxMatEntityBaseInputComponent {
         else {
             this.dateRange.values = undefined;
         }
-        this.entity[this.key] = this.dateRange;
+        this.propertyValue = this.dateRange;
         this.emitChange();
     }
 }
 DateRangeInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DateRangeInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DateRangeInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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\">\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"], components: [{ type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$4.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { type: i2$4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i2$4.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }], directives: [{ type: i1$1.MatLabel, selector: "mat-label" }, { type: i2$4.MatStartDate, selector: "input[matStartDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i2$4.MatEndDate, selector: "input[matEndDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { type: i1$1.MatSuffix, selector: "[matSuffix]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }] });
+DateRangeInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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"], components: [{ type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$5.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { type: i2$5.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i2$5.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }], directives: [{ type: i1$1.MatLabel, selector: "mat-label" }, { type: i2$5.MatStartDate, selector: "input[matStartDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i2$5.MatEndDate, selector: "input[matEndDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { type: i1$1.MatSuffix, selector: "[matSuffix]" }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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\">\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 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"] }]
         }] });
 
 /* eslint-disable jsdoc/require-jsdoc */
@@ -2376,10 +2562,10 @@ class DateTimeInputComponent extends NgxMatEntityBaseInputComponent {
     }
     ngOnInit() {
         super.ngOnInit();
-        this.time = DateUtilities.getTimeFromDate(this.entity[this.key]);
+        this.time = DateUtilities.getTimeFromDate(this.propertyValue);
         this.timeDropdownValues = this.metadata.times;
-        if (this.entity[this.key] != null) {
-            this.dateTime = new Date(this.entity[this.key]);
+        if (this.propertyValue) {
+            this.propertyValue = new Date(this.propertyValue);
         }
     }
     /**
@@ -2390,34 +2576,34 @@ class DateTimeInputComponent extends NgxMatEntityBaseInputComponent {
      * @returns Whether or not the time objects are the same.
      */
     compareTimes(time1, time2) {
-        // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
-        return time1 && time2 && time1.hours === time2.hours && time1.minutes === time2.minutes;
+        if (time1 && time2 && time1.hours === time2.hours && time1.minutes === time2.minutes) {
+            return true;
+        }
+        return false;
     }
     /**
      * Sets the time on a datetime property.
      */
     setTime() {
         var _a, _b;
-        if (!this.dateTime) {
-            this.entity[this.key] = undefined;
+        if (!this.propertyValue) {
             this.emitChange();
             return;
         }
-        this.entity[this.key] = new Date(this.dateTime);
         if (((_a = this.time) === null || _a === void 0 ? void 0 : _a.hours) != null && ((_b = this.time) === null || _b === void 0 ? void 0 : _b.minutes) != null) {
-            this.entity[this.key].setHours(this.time.hours, this.time.minutes, 0, 0);
+            this.propertyValue.setHours(this.time.hours, this.time.minutes, 0, 0);
         }
         else {
-            this.entity[this.key].setHours(0, 0, 0, 0);
+            this.propertyValue.setHours(0, 0, 0, 0);
         }
         this.emitChange();
     }
 }
 DateTimeInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DateTimeInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DateTimeInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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)]=\"dateTime\"\n            [name]=\"key.toString()\"\n            #model=\"ngModel\"\n            [matDatepicker]=\"picker\"\n            [required]=\"metadata.required\"\n            [min]=\"metadata.minDate ? metadata.minDate(dateTime) : undefined\"\n            [max]=\"metadata.maxDate ? metadata.maxDate(dateTime) : undefined\"\n            [matDatepickerFilter]=\"metadata.filterDate ?? defaultDateFilter\"\n            (dateInput)=\"setTime()\"\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        >\n            <mat-option *ngFor=\"let validTime of DateUtilities.getValidTimesForDropdown(\n                    DateUtilities.asDate(entity[key]),\n                    metadata.times,\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"], components: [{ type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i2$4.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { type: i2$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$3.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i1$1.MatLabel, selector: "mat-label" }, { type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1$1.MatSuffix, selector: "[matSuffix]" }, { type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+DateTimeInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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"], components: [{ type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$5.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i2$5.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { type: i2$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$3.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i1$1.MatLabel, selector: "mat-label" }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$5.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1$1.MatSuffix, selector: "[matSuffix]" }, { type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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)]=\"dateTime\"\n            [name]=\"key.toString()\"\n            #model=\"ngModel\"\n            [matDatepicker]=\"picker\"\n            [required]=\"metadata.required\"\n            [min]=\"metadata.minDate ? metadata.minDate(dateTime) : undefined\"\n            [max]=\"metadata.maxDate ? metadata.maxDate(dateTime) : undefined\"\n            [matDatepickerFilter]=\"metadata.filterDate ?? defaultDateFilter\"\n            (dateInput)=\"setTime()\"\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        >\n            <mat-option *ngFor=\"let validTime of DateUtilities.getValidTimesForDropdown(\n                    DateUtilities.asDate(entity[key]),\n                    metadata.times,\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 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"] }]
         }] });
 
 /**
@@ -2489,28 +2675,24 @@ class FileInputComponent {
         this.fileDataChangeEvent = new EventEmitter();
     }
     ngOnInit() {
-        var _a;
         return __awaiter(this, void 0, void 0, function* () {
-            this.metadata = EntityUtilities.getPropertyMetadata(this.entity, this.key, DecoratorTypes.FILE_DEFAULT);
             if (this.metadata.multiple) {
                 this.initMultiFile();
             }
             else {
                 this.initSingleFile();
             }
-            this.fileDataChangeEvent.emit((_a = this.singleFileData) !== null && _a !== void 0 ? _a : this.multiFileData);
+            this.fileDataChangeEvent.emit(this.propertyValue);
         });
     }
     initMultiFile() {
-        this.multiFileData = this.entity[this.key];
-        if (this.multiFileData) {
-            this.filenames = this.multiFileData.map(f => f.name);
+        if (this.propertyValue) {
+            this.filenames = this.propertyValue.map(f => f.name);
         }
     }
     initSingleFile() {
-        this.singleFileData = this.entity[this.key];
-        if (this.singleFileData) {
-            this.filenames = LodashUtilities.cloneDeep([this.singleFileData.name]);
+        if (this.propertyValue) {
+            this.filenames = [this.propertyValue.name];
         }
     }
     setFileFromInput(event) {
@@ -2521,7 +2703,6 @@ class FileInputComponent {
         });
     }
     setFile(files) {
-        var _a;
         return __awaiter(this, void 0, void 0, function* () {
             // validation done inline
             if (files.find(f => !FileUtilities.isMimeTypeValid(f.type, this.metadata.allowedMimeTypes))) {
@@ -2533,7 +2714,7 @@ class FileInputComponent {
                 this.resetFileInputs();
                 return;
             }
-            if (files.find(f => f.size > (this.metadata.maxSize * 1000000))) {
+            if (files.find(f => FileUtilities.transformToMegaBytes(f.size, 'B') > this.metadata.maxSize)) {
                 this.dialog.open(NgxMatEntityConfirmDialogComponent, {
                     data: this.metadata.maxSizeErrorDialog,
                     autoFocus: false,
@@ -2546,7 +2727,7 @@ class FileInputComponent {
             for (const file of files) {
                 fileSizeTotal += file.size;
             }
-            if (fileSizeTotal > (this.metadata.maxSizeTotal * 1000000)) {
+            if (FileUtilities.transformToMegaBytes(fileSizeTotal, 'B') > this.metadata.maxSizeTotal) {
                 this.dialog.open(NgxMatEntityConfirmDialogComponent, {
                     data: this.metadata.maxSizeTotalErrorDialog,
                     autoFocus: false,
@@ -2561,14 +2742,13 @@ class FileInputComponent {
             else {
                 yield this.setSingleFile(files[0]);
             }
-            this.fileDataChangeEvent.emit((_a = this.singleFileData) !== null && _a !== void 0 ? _a : this.multiFileData);
+            this.fileDataChangeEvent.emit(this.propertyValue);
         });
     }
     resetFileInputs() {
         this.filenames = undefined;
-        this.singleFileData = undefined;
-        this.multiFileData = undefined;
-        this.fileDataChangeEvent.emit();
+        this.propertyValue = undefined;
+        this.fileDataChangeEvent.emit(this.propertyValue);
     }
     setMultiFile(files) {
         return __awaiter(this, void 0, void 0, function* () {
@@ -2582,52 +2762,89 @@ class FileInputComponent {
                 };
                 data.push(fileData);
             }
-            this.multiFileData = LodashUtilities.cloneDeep(data);
-            this.filenames = this.multiFileData.map(f => f.name);
+            this.propertyValue = LodashUtilities.cloneDeep(data);
+            this.filenames = this.propertyValue.map(f => f.name);
         });
     }
     setSingleFile(file) {
         return __awaiter(this, void 0, void 0, function* () {
-            this.singleFileData = {
+            this.propertyValue = {
                 file: file,
                 name: file.name,
                 type: file.type,
                 size: file.size
             };
-            this.filenames = LodashUtilities.cloneDeep([this.singleFileData.name]);
+            this.filenames = [this.propertyValue.name];
         });
     }
     removeFile(name) {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b;
         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)) {
                 this.filenames = undefined;
             }
-            const fileDataToRemove = (_c = this.multiFileData) === null || _c === void 0 ? void 0 : _c.find(f => f.name === name);
-            (_d = this.multiFileData) === null || _d === void 0 ? void 0 : _d.splice(this.multiFileData.indexOf(fileDataToRemove), 1);
-            if (!((_e = this.multiFileData) === null || _e === void 0 ? void 0 : _e.length)) {
-                this.multiFileData = undefined;
+            const fileDataToRemove = this.propertyValue.find(f => f.name === name);
+            this.propertyValue.splice(this.propertyValue.indexOf(fileDataToRemove), 1);
+            if (!this.propertyValue.length) {
+                this.propertyValue = undefined;
             }
         }
         else {
             this.filenames = undefined;
-            this.singleFileData = undefined;
+            this.propertyValue = undefined;
+        }
+        this.fileDataChangeEvent.emit(this.propertyValue);
+    }
+    downloadFile(name) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.metadata.multiple && this.propertyValue.length) {
+                const foundFileData = this.propertyValue.find(f => f.name === name);
+                // the index need to be saved in a constant because we edit foundFileData
+                // => .indexOf() returns undefined.
+                const index = this.propertyValue.indexOf(foundFileData);
+                this.propertyValue[index] = yield FileUtilities.getFileData(foundFileData);
+                FileUtilities.downloadSingleFile(this.propertyValue[index]);
+            }
+            else if (this.propertyValue) {
+                this.propertyValue = yield FileUtilities.getFileData(this.propertyValue);
+                FileUtilities.downloadSingleFile(this.propertyValue);
+            }
+        });
+    }
+    downloadAllEnabled() {
+        if (!this.metadata.multiple) {
+            return false;
+        }
+        if (!this.propertyValue) {
+            return false;
+        }
+        if (this.propertyValue.length < 2) {
+            return false;
         }
-        this.fileDataChangeEvent.emit((_f = this.singleFileData) !== null && _f !== void 0 ? _f : this.multiFileData);
+        return true;
+    }
+    downloadAll() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.propertyValue.length) {
+                void FileUtilities.downloadMultipleFiles(this.metadata.displayName, this.propertyValue);
+            }
+        });
     }
 }
 FileInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileInputComponent, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-FileInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FileInputComponent, selector: "file-input", inputs: { entity: "entity", key: "key", getValidationErrorMessage: "getValidationErrorMessage" }, 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\" (click)=\"fileInput.click()\">\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-chip-list #chipList\n        [(ngModel)]=\"filenames\"\n        [name]=\"key.toString()\"\n        #model=\"ngModel\"\n        [required]=\"metadata.required\"\n    >\n        <mat-chip *ngFor=\"let name of filenames\" (removed)=\"removeFile(name)\">\n            {{name}}\n            <button matChipRemove>\n                <i class=\"{{metadata.deleteIcon}}\"></i>\n            </button>\n        </mat-chip>\n        <input [matChipInputFor]=\"chipList\" [readonly]=\"true\">\n    </mat-chip-list>\n    <button mat-icon-button matSuffix>\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\" class=\"dropdown\" dragDrop (files)=\"setFile($event)\">\n    <i class=\"fas fa-file-arrow-up\"></i>\n</div>", styles: ["mat-form-field{width:100%}input:hover,mat-form-field:hover{cursor:pointer}i{color:#757575}.dropdown{display:flex;align-items:center;justify-content:center;height:200px;border:2px dashed #757575;border-radius:15px;margin-top:5px;margin-bottom:5px}.dropdown i{font-size:30px}\n"], components: [{ type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$5.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: i3.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"] }], directives: [{ type: i1$1.MatLabel, selector: "mat-label" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$5.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i2$5.MatChipRemove, selector: "[matChipRemove]" }, { type: i2$5.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { type: i1$1.MatSuffix, selector: "[matSuffix]" }, { type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DragDropDirective, selector: "[dragDrop]", outputs: ["files"] }] });
+FileInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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 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 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 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 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"], components: [{ type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$6.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: i3.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"] }], directives: [{ type: i1$1.MatLabel, selector: "mat-label" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$6.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i2$6.MatChipRemove, selector: "[matChipRemove]" }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$6.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { type: i1$1.MatSuffix, selector: "[matSuffix]" }, { type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }, { type: DragDropDirective, selector: "[dragDrop]", outputs: ["files"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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\" (click)=\"fileInput.click()\">\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-chip-list #chipList\n        [(ngModel)]=\"filenames\"\n        [name]=\"key.toString()\"\n        #model=\"ngModel\"\n        [required]=\"metadata.required\"\n    >\n        <mat-chip *ngFor=\"let name of filenames\" (removed)=\"removeFile(name)\">\n            {{name}}\n            <button matChipRemove>\n                <i class=\"{{metadata.deleteIcon}}\"></i>\n            </button>\n        </mat-chip>\n        <input [matChipInputFor]=\"chipList\" [readonly]=\"true\">\n    </mat-chip-list>\n    <button mat-icon-button matSuffix>\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\" class=\"dropdown\" dragDrop (files)=\"setFile($event)\">\n    <i class=\"fas fa-file-arrow-up\"></i>\n</div>", styles: ["mat-form-field{width:100%}input:hover,mat-form-field:hover{cursor:pointer}i{color:#757575}.dropdown{display:flex;align-items:center;justify-content:center;height:200px;border:2px dashed #757575;border-radius:15px;margin-top:5px;margin-bottom:5px}.dropdown i{font-size:30px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.MatDialog }]; }, propDecorators: { entity: [{
+            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 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 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 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 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"] }]
+        }], ctorParameters: function () { return [{ type: i1.MatDialog }]; }, propDecorators: { propertyValue: [{
                 type: Input
-            }], key: [{
+            }], metadata: [{
                 type: Input
             }], getValidationErrorMessage: [{
                 type: Input
+            }], isReadOnly: [{
+                type: Input
             }], fileDataChangeEvent: [{
                 type: Output
             }] } });
@@ -2639,16 +2856,16 @@ class FileDefaultInputComponent extends NgxMatEntityBaseInputComponent {
     }
     refreshFileData(fileData) {
         return __awaiter(this, void 0, void 0, function* () {
-            this.entity[this.key] = fileData;
+            this.propertyValue = fileData;
             this.emitChange();
         });
     }
 }
 FileDefaultInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileDefaultInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-FileDefaultInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FileDefaultInputComponent, selector: "file-default-input", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"metadata.dragAndDrop\" class=\"file-input mat-elevation-z8\">\n    <file-input (fileDataChangeEvent)=\"refreshFileData($event)\" [entity]=\"entity\" [key]=\"key\" [getValidationErrorMessage]=\"getValidationErrorMessage\"></file-input>\n</div>\n\n<div *ngIf=\"!metadata.dragAndDrop\">\n    <file-input (fileDataChangeEvent)=\"refreshFileData($event)\" [entity]=\"entity\" [key]=\"key\" [getValidationErrorMessage]=\"getValidationErrorMessage\"></file-input>\n</div>", styles: [".file-input{margin-top:15px;margin-bottom:15px;padding:15px;border-radius:5px}\n"], components: [{ type: FileInputComponent, selector: "file-input", inputs: ["entity", "key", "getValidationErrorMessage"], outputs: ["fileDataChangeEvent"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+FileDefaultInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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"], components: [{ type: FileInputComponent, selector: "file-input", inputs: ["propertyValue", "metadata", "getValidationErrorMessage", "isReadOnly"], outputs: ["fileDataChangeEvent"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileDefaultInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'file-default-input', template: "<div *ngIf=\"metadata.dragAndDrop\" class=\"file-input mat-elevation-z8\">\n    <file-input (fileDataChangeEvent)=\"refreshFileData($event)\" [entity]=\"entity\" [key]=\"key\" [getValidationErrorMessage]=\"getValidationErrorMessage\"></file-input>\n</div>\n\n<div *ngIf=\"!metadata.dragAndDrop\">\n    <file-input (fileDataChangeEvent)=\"refreshFileData($event)\" [entity]=\"entity\" [key]=\"key\" [getValidationErrorMessage]=\"getValidationErrorMessage\"></file-input>\n</div>", styles: [".file-input{margin-top:15px;margin-bottom:15px;padding:15px;border-radius:5px}\n"] }]
+            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
@@ -2663,10 +2880,9 @@ class FileImageInputComponent extends NgxMatEntityBaseInputComponent {
     }
     setSinglePreviewImage() {
         return __awaiter(this, void 0, void 0, function* () {
-            let singleFileData = this.entity[this.key];
-            if (singleFileData) {
-                singleFileData = yield FileUtilities.getFileData(singleFileData);
-                this.singlePreviewImage = yield FileUtilities.getDataURLFromFile(singleFileData.file);
+            if (this.propertyValue) {
+                this.propertyValue = yield FileUtilities.getFileData(this.propertyValue);
+                this.singlePreviewImage = yield FileUtilities.getDataURLFromFile(this.propertyValue.file);
             }
             else {
                 this.singlePreviewImage = undefined;
@@ -2675,7 +2891,7 @@ class FileImageInputComponent extends NgxMatEntityBaseInputComponent {
     }
     setMultiPreviewImages(index) {
         return __awaiter(this, void 0, void 0, function* () {
-            const multiFileData = this.entity[this.key];
+            const multiFileData = this.propertyValue;
             const previewImages = [];
             if (multiFileData === null || multiFileData === void 0 ? void 0 : multiFileData.length) {
                 for (let i = 0; i < multiFileData.length; i++) {
@@ -2693,9 +2909,10 @@ class FileImageInputComponent extends NgxMatEntityBaseInputComponent {
     }
     refreshFileData(fileData) {
         return __awaiter(this, void 0, void 0, function* () {
-            this.entity[this.key] = fileData;
+            this.propertyValue = fileData;
             this.emitChange();
             if (this.metadata.multiple) {
+                fileData = fileData;
                 if (!(fileData === null || fileData === void 0 ? void 0 : fileData[this.imageIndex])) {
                     this.imageIndex = 0;
                 }
@@ -2708,19 +2925,24 @@ class FileImageInputComponent extends NgxMatEntityBaseInputComponent {
     }
     prev() {
         return __awaiter(this, void 0, void 0, function* () {
-            if (this.imageIndex > 0) {
-                yield this.setMultiPreviewImages(this.imageIndex - 1);
-                this.imageIndex--;
+            if (this.imageIndex <= 0) {
+                return;
             }
+            yield this.setMultiPreviewImages(this.imageIndex - 1);
+            this.imageIndex--;
         });
     }
     next() {
         var _a;
         return __awaiter(this, void 0, void 0, function* () {
-            if (((_a = this.multiPreviewImages) === null || _a === void 0 ? void 0 : _a.length) && this.imageIndex !== (this.multiPreviewImages.length - 1)) {
-                yield this.setMultiPreviewImages(this.imageIndex + 1);
-                this.imageIndex++;
+            if (!((_a = this.multiPreviewImages) === null || _a === void 0 ? void 0 : _a.length)) {
+                return;
+            }
+            if (this.imageIndex === (this.multiPreviewImages.length - 1)) {
+                return;
             }
+            yield this.setMultiPreviewImages(this.imageIndex + 1);
+            this.imageIndex++;
         });
     }
     setIndex(index) {
@@ -2731,10 +2953,10 @@ class FileImageInputComponent extends NgxMatEntityBaseInputComponent {
     }
 }
 FileImageInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileImageInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-FileImageInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FileImageInputComponent, selector: "file-image-input", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"!metadata.dragAndDrop && !metadata.preview\">\n    <file-input (fileDataChangeEvent)=\"refreshFileData($event)\" [entity]=\"entity\" [key]=\"key\" [getValidationErrorMessage]=\"getValidationErrorMessage\"></file-input>\n</div>\n\n<div *ngIf=\"metadata.dragAndDrop || metadata.preview\" class=\"file-input mat-elevation-z8\">\n    <file-input (fileDataChangeEvent)=\"refreshFileData($event)\" [entity]=\"entity\" [key]=\"key\" [getValidationErrorMessage]=\"getValidationErrorMessage\"></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()\" [class.disabled]=\"!multiPreviewImages || !multiPreviewImages.length || imageIndex === (multiPreviewImages.length - 1)\" class=\"next-button fa-solid fa-angle-right\"></i>\n    </div>\n    <div class=\"preview-nav\" *ngIf=\"metadata.preview && metadata.multiple\">\n        <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 (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 (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 (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 mat-icon-button disabled>\n            <i class=\"dot selected\"></i>\n            <span class=\"image-index\">{{imageIndex + 1}}</span>\n        </button>\n        <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 (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 (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 (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 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}.image-preview .next-button{font-size:100px;margin-right:5px}.image-preview .prev-button:hover,.image-preview .next-button:hover{cursor:pointer}.image-preview .prev-button.disabled,.image-preview .next-button.disabled{color:#00000061}.image-preview .prev-button.disabled:hover,.image-preview .next-button.disabled:hover{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:#000000de}.preview-nav button .image-index{position:absolute;height:100%;width:100%;display:block;top:-11.5px;color:#fff}.preview-nav button:hover{background-color:#000}\n"], components: [{ type: FileInputComponent, selector: "file-input", inputs: ["entity", "key", "getValidationErrorMessage"], outputs: ["fileDataChangeEvent"] }, { type: i3.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"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+FileImageInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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 (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 (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 (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 (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 mat-icon-button disabled>\n            <i class=\"dot selected\"></i>\n            <span class=\"image-index\">{{imageIndex + 1}}</span>\n        </button>\n        <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 (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 (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 (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 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"], components: [{ type: FileInputComponent, selector: "file-input", inputs: ["propertyValue", "metadata", "getValidationErrorMessage", "isReadOnly"], outputs: ["fileDataChangeEvent"] }, { type: i3.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"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileImageInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'file-image-input', template: "<div *ngIf=\"!metadata.dragAndDrop && !metadata.preview\">\n    <file-input (fileDataChangeEvent)=\"refreshFileData($event)\" [entity]=\"entity\" [key]=\"key\" [getValidationErrorMessage]=\"getValidationErrorMessage\"></file-input>\n</div>\n\n<div *ngIf=\"metadata.dragAndDrop || metadata.preview\" class=\"file-input mat-elevation-z8\">\n    <file-input (fileDataChangeEvent)=\"refreshFileData($event)\" [entity]=\"entity\" [key]=\"key\" [getValidationErrorMessage]=\"getValidationErrorMessage\"></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()\" [class.disabled]=\"!multiPreviewImages || !multiPreviewImages.length || imageIndex === (multiPreviewImages.length - 1)\" class=\"next-button fa-solid fa-angle-right\"></i>\n    </div>\n    <div class=\"preview-nav\" *ngIf=\"metadata.preview && metadata.multiple\">\n        <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 (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 (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 (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 mat-icon-button disabled>\n            <i class=\"dot selected\"></i>\n            <span class=\"image-index\">{{imageIndex + 1}}</span>\n        </button>\n        <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 (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 (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 (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 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}.image-preview .next-button{font-size:100px;margin-right:5px}.image-preview .prev-button:hover,.image-preview .next-button:hover{cursor:pointer}.image-preview .prev-button.disabled,.image-preview .next-button.disabled{color:#00000061}.image-preview .prev-button.disabled:hover,.image-preview .next-button.disabled:hover{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:#000000de}.preview-nav button .image-index{position:absolute;height:100%;width:100%;display:block;top:-11.5px;color:#fff}.preview-nav button:hover{background-color:#000}\n"] }]
+            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 (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 (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 (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 (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 mat-icon-button disabled>\n            <i class=\"dot selected\"></i>\n            <span class=\"image-index\">{{imageIndex + 1}}</span>\n        </button>\n        <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 (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 (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 (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 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"] }]
         }] });
 
 /* eslint-disable jsdoc/require-jsdoc */
@@ -2750,6 +2972,7 @@ class CustomInputComponent extends NgxMatEntityBaseInputComponent {
         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: "13.3.11", ngImport: i0, type: CustomInputComponent, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
@@ -2788,7 +3011,7 @@ class NgxMatEntityInputComponent {
         return index;
     }
     ngOnInit() {
-        var _a;
+        var _a, _b;
         if (!this.entity) {
             throw new Error('Missing required Input data "entity"');
         }
@@ -2798,8 +3021,9 @@ class NgxMatEntityInputComponent {
         }
         this.internalPropertyKey = this.propertyKey;
         this.internalGetValidationErrorMessage = (_a = this.getValidationErrorMessage) !== null && _a !== void 0 ? _a : getValidationErrorMessage;
-        this.type = EntityUtilities.getPropertyType(this.entity, this.propertyKey);
-        this.metadata = EntityUtilities.getPropertyMetadata(this.entity, this.propertyKey, this.type);
+        this.internalIsReadOnly = (_b = this.isReadOnly) !== null && _b !== void 0 ? _b : false;
+        this.type = EntityUtilities.getPropertyType(this.internalEntity, this.internalPropertyKey);
+        this.metadata = EntityUtilities.getPropertyMetadata(this.internalEntity, this.internalPropertyKey, this.type);
         if (this.type === DecoratorTypes.OBJECT) {
             this.initObjectInput();
         }
@@ -2808,7 +3032,6 @@ class NgxMatEntityInputComponent {
         }
     }
     initEntityArray() {
-        var _a;
         this.metadataEntityArray = this.metadata;
         if (this.internalEntity[this.internalPropertyKey] == null) {
             this.internalEntity[this.internalPropertyKey] = [];
@@ -2824,11 +3047,11 @@ class NgxMatEntityInputComponent {
             throw new Error(`The name "select" for a display column is reserved.
                 Please choose a different name.`);
         }
-        this.displayedColumns = ['select'].concat(givenDisplayColumns);
+        this.displayedColumns = this.internalIsReadOnly ? givenDisplayColumns : ['select'].concat(givenDisplayColumns);
         this.dataSource = new MatTableDataSource();
         this.dataSource.data = this.entityArrayValues;
         this.arrayItem = new this.metadataEntityArray.EntityClass();
-        this.arrayItemInlineRows = EntityUtilities.getEntityRows(this.arrayItem, (_a = this.hideOmitForCreate) !== null && _a !== void 0 ? _a : true, this.hideOmitForEdit);
+        this.arrayItemInlineTabs = EntityUtilities.getEntityTabs(this.arrayItem, true);
         this.arrayItemPriorChanges = LodashUtilities.cloneDeep(this.arrayItem);
         this.dialogInputData = {
             entity: this.arrayItem,
@@ -2836,12 +3059,12 @@ class NgxMatEntityInputComponent {
             getValidationErrorMessage: this.getValidationErrorMessage
         };
         this.dialogData = new AddArrayItemDialogDataBuilder(this.dialogInputData).getResult();
-        this.arrayItemDialogRows = EntityUtilities.getEntityRows(this.dialogData.entity, true);
+        this.arrayItemDialogTabs = EntityUtilities.getEntityTabs(this.dialogData.entity, true);
     }
     initObjectInput() {
         this.metadataDefaultObject = this.metadata;
         this.objectProperty = this.internalEntity[this.internalPropertyKey];
-        this.objectPropertyRows = EntityUtilities.getEntityRows(this.objectProperty, this.hideOmitForCreate, this.hideOmitForEdit);
+        this.objectPropertyTabs = EntityUtilities.getEntityTabs(this.objectProperty, this.hideOmitForCreate, this.hideOmitForEdit);
     }
     /**
      * Checks if the arrayItem is valid.
@@ -2962,10 +3185,10 @@ class NgxMatEntityInputComponent {
     }
 }
 NgxMatEntityInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityInputComponent, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-NgxMatEntityInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NgxMatEntityInputComponent, selector: "ngx-mat-entity-input", inputs: { entity: "entity", propertyKey: "propertyKey", getValidationErrorMessage: "getValidationErrorMessage", hideOmitForCreate: "hideOmitForCreate", hideOmitForEdit: "hideOmitForEdit" }, 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 (inputChangeEvent)=\"emitChange()\" [entity]=\"internalEntity\" [key]=\"internalPropertyKey\" [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"></string-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_TEXTBOX\">\n        <string-textbox-input (inputChangeEvent)=\"emitChange()\" [entity]=\"internalEntity\" [key]=\"internalPropertyKey\" [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"></string-textbox-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_AUTOCOMPLETE\">\n        <string-autocomplete-input (inputChangeEvent)=\"emitChange()\" [entity]=\"internalEntity\" [key]=\"internalPropertyKey\" [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"></string-autocomplete-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_DROPDOWN\">\n        <string-dropdown-input (inputChangeEvent)=\"emitChange()\" [entity]=\"internalEntity\" [key]=\"internalPropertyKey\" [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"></string-dropdown-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-----------------Booleans------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_CHECKBOX\">\n        <boolean-checkbox-input (inputChangeEvent)=\"emitChange()\" [entity]=\"internalEntity\" [key]=\"internalPropertyKey\" [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"></boolean-checkbox-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_TOGGLE\">\n        <boolean-toggle-input (inputChangeEvent)=\"emitChange()\" [entity]=\"internalEntity\" [key]=\"internalPropertyKey\" [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"></boolean-toggle-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_DROPDOWN\">\n        <boolean-dropdown-input (inputChangeEvent)=\"emitChange()\" [entity]=\"internalEntity\" [key]=\"internalPropertyKey\" [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"></boolean-dropdown-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!------------------Numbers------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.NUMBER\">\n        <number-input (inputChangeEvent)=\"emitChange()\" [entity]=\"internalEntity\" [key]=\"internalPropertyKey\" [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"></number-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.NUMBER_DROPDOWN\">\n        <number-dropdown-input (inputChangeEvent)=\"emitChange()\" [entity]=\"internalEntity\" [key]=\"internalPropertyKey\" [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"></number-dropdown-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        <div class=\"row\" *ngFor=\"let row of objectPropertyRows\">\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                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\n    <!-------------------------------------------->\n    <!-------------------Array-------------------->\n    <!-------------------------------------------->\n    <div class=\"entityArray\" *ngSwitchCase=\"DecoratorTypes.ARRAY\">\n        <div class=\"mat-elevation-z8\" style=\"border-radius: 5px;padding: 15px;margin-bottom: 15px;margin-top: 15px;\">\n            <div style=\"padding-bottom: 10px\">\n                <b>{{metadataEntityArray.displayName}}</b>\n            </div>\n            <div *ngIf=\"metadataEntityArray.createInline\">\n                <div class=\"row\" *ngFor=\"let row of arrayItemInlineRows\">\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            \n            <div class=\"buttons\">\n                <button mat-raised-button\n                    [disabled]=\"metadataEntityArray.createInline && !isArrayItemValid\"\n                    (click)=\"addEntity()\">\n                    {{metadataEntityArray.addButtonLabel}}\n                </button>\n                <button mat-raised-button\n                    [disabled]=\"!selection.selected.length\"\n                    (click)=\"remove(selection, entityArrayValues, dataSource)\">\n                    {{metadataEntityArray.removeButtonLabel}}\n                </button>\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 ? masterToggle(selection, dataSource) : null\" [checked]=\"selection.hasValue() && isAllSelected(selection, dataSource)\" [indeterminate]=\"selection.hasValue() && !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 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 (inputChangeEvent)=\"emitChange()\" [entity]=\"internalEntity\" [key]=\"internalPropertyKey\" [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"></array-date-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_DATE_TIME\">\n        <array-date-time-input (inputChangeEvent)=\"emitChange()\" [entity]=\"internalEntity\" [key]=\"internalPropertyKey\" [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"></array-date-time-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_DATE_RANGE\">\n        <array-date-range-input (inputChangeEvent)=\"emitChange()\" [entity]=\"internalEntity\" [key]=\"internalPropertyKey\" [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"></array-date-range-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_STRING_CHIPS\">\n        <array-string-chips-input (inputChangeEvent)=\"emitChange()\" [entity]=\"internalEntity\" [key]=\"internalPropertyKey\" [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"></array-string-chips-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_STRING_AUTOCOMPLETE_CHIPS\">\n        <array-string-autocomplete-chips (inputChangeEvent)=\"emitChange()\" [entity]=\"internalEntity\" [key]=\"internalPropertyKey\" [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"></array-string-autocomplete-chips>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Dates-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.DATE\">\n        <date-input (inputChangeEvent)=\"emitChange()\" [entity]=\"internalEntity\" [key]=\"internalPropertyKey\" [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"></date-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.DATE_RANGE\">\n        <date-range-input (inputChangeEvent)=\"emitChange()\" [entity]=\"internalEntity\" [key]=\"internalPropertyKey\" [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"></date-range-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.DATE_TIME\">\n        <date-time-input (inputChangeEvent)=\"emitChange()\" [entity]=\"internalEntity\" [key]=\"internalPropertyKey\" [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"></date-time-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Files-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.FILE_DEFAULT\">\n        <file-default-input (inputChangeEvent)=\"emitChange()\" [entity]=\"internalEntity\" [key]=\"internalPropertyKey\" [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"></file-default-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.FILE_IMAGE\">\n        <file-image-input (inputChangeEvent)=\"emitChange()\" [entity]=\"internalEntity\" [key]=\"internalPropertyKey\" [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"></file-image-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Custom------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.CUSTOM\">\n        <custom-input (inputChangeEvent)=\"emitChange()\" [entity]=\"internalEntity\" [key]=\"internalPropertyKey\" [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"></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    <mat-dialog-content>\n        <form #form=\"ngForm\" class=\"row\">\n            <div class=\"row\" *ngFor=\"let row of arrayItemDialogRows\">\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        </form>\n    </mat-dialog-content>\n\n    <mat-dialog-actions>\n        <button mat-raised-button (click)=\"addArrayItem()\" [disabled]=\"!isDialogArrayItemValid\">\n            {{dialogData.createDialogData.createButtonLabel}}\n        </button>\n        <button mat-raised-button (click)=\"cancelAddArrayItem()\" class=\"cancel-button\">\n            {{dialogData.createDialogData.cancelButtonLabel}}\n        </button>\n    </mat-dialog-actions>\n\n</ng-template>", styles: ["mat-form-field{width:100%}.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"], components: [{ type: StringInputComponent, selector: "string-input" }, { type: StringTextboxInputComponent, selector: "string-textbox-input" }, { type: StringAutocompleteInputComponent, selector: "string-autocomplete-input" }, { type: StringDropdownInputComponent, selector: "string-dropdown-input" }, { type: BooleanCheckboxInputComponent, selector: "boolean-checkbox-input" }, { type: BooleanToggleInputComponent, selector: "boolean-toggle-input" }, { type: BooleanDropdownInputComponent, selector: "boolean-dropdown-input" }, { type: NumberInputComponent, selector: "number-input" }, { type: NumberDropdownInputComponent, selector: "number-dropdown-input" }, { type: NgxMatEntityInputComponent, selector: "ngx-mat-entity-input", inputs: ["entity", "propertyKey", "getValidationErrorMessage", "hideOmitForCreate", "hideOmitForEdit"], outputs: ["inputChangeEvent"] }, { type: i3.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"] }, { type: i4$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i4$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i4$2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { type: ArrayDateInputComponent, selector: "array-date-input" }, { type: ArrayDateTimeInputComponent, selector: "array-date-time-input" }, { type: ArrayDateRangeInputComponent, selector: "array-date-range-input" }, { type: ArrayStringChipsInputComponent, selector: "array-string-chips-input" }, { type: ArrayStringAutocompleteChipsComponent, selector: "array-string-autocomplete-chips" }, { type: DateInputComponent, selector: "date-input" }, { type: DateRangeInputComponent, selector: "date-range-input" }, { type: DateTimeInputComponent, selector: "date-time-input" }, { type: FileDefaultInputComponent, selector: "file-default-input" }, { type: FileImageInputComponent, selector: "file-image-input" }, { type: CustomInputComponent, selector: "custom-input" }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i4$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i4$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i4$2.MatCellDef, selector: "[matCellDef]" }, { type: i4$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i4$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i4$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }] });
+NgxMatEntityInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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 mat-raised-button\n                    [disabled]=\"metadataEntityArray.createInline && !isArrayItemValid\"\n                    (click)=\"addEntity()\">\n                    {{metadataEntityArray.addButtonLabel}}\n                </button>\n                <button mat-raised-button\n                    [disabled]=\"!selection.selected.length\"\n                    (click)=\"remove(selection, entityArrayValues, dataSource)\">\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 ? masterToggle(selection, dataSource) : null\"\n                            [checked]=\"selection.hasValue() && isAllSelected(selection, dataSource)\"\n                            [indeterminate]=\"selection.hasValue() && !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    <mat-dialog-content>\n        <form #form=\"ngForm\" class=\"row\">\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        </form>\n    </mat-dialog-content>\n\n    <mat-dialog-actions>\n        <button mat-raised-button (click)=\"addArrayItem()\" [disabled]=\"!isDialogArrayItemValid\">\n            {{dialogData.createDialogData.createButtonLabel}}\n        </button>\n        <button mat-raised-button (click)=\"cancelAddArrayItem()\" class=\"cancel-button\">\n            {{dialogData.createDialogData.cancelButtonLabel}}\n        </button>\n    </mat-dialog-actions>\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"], components: [{ type: StringInputComponent, selector: "string-input" }, { type: StringTextboxInputComponent, selector: "string-textbox-input" }, { type: StringAutocompleteInputComponent, selector: "string-autocomplete-input" }, { type: StringDropdownInputComponent, selector: "string-dropdown-input" }, { type: StringPasswordInputComponent, selector: "string-password-input" }, { type: BooleanCheckboxInputComponent, selector: "boolean-checkbox-input" }, { type: BooleanToggleInputComponent, selector: "boolean-toggle-input" }, { type: BooleanDropdownInputComponent, selector: "boolean-dropdown-input" }, { type: NumberInputComponent, selector: "number-input" }, { type: NumberDropdownInputComponent, selector: "number-dropdown-input" }, { type: NumberSliderInputComponent, selector: "number-slider-input" }, { type: i13.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { type: i13.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { type: NgxMatEntityInputComponent, selector: "ngx-mat-entity-input", inputs: ["entity", "propertyKey", "getValidationErrorMessage", "hideOmitForCreate", "hideOmitForEdit", "isReadOnly"], outputs: ["inputChangeEvent"] }, { type: i3.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"] }, { type: i4$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i4$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i4$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { type: ArrayDateInputComponent, selector: "array-date-input" }, { type: ArrayDateTimeInputComponent, selector: "array-date-time-input" }, { type: ArrayDateRangeInputComponent, selector: "array-date-range-input" }, { type: ArrayStringChipsInputComponent, selector: "array-string-chips-input" }, { type: ArrayStringAutocompleteChipsComponent, selector: "array-string-autocomplete-chips" }, { type: DateInputComponent, selector: "date-input" }, { type: DateRangeInputComponent, selector: "date-range-input" }, { type: DateTimeInputComponent, selector: "date-time-input" }, { type: FileDefaultInputComponent, selector: "file-default-input" }, { type: FileImageInputComponent, selector: "file-image-input" }, { type: CustomInputComponent, selector: "custom-input" }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i6.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i4$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i4$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i4$1.MatCellDef, selector: "[matCellDef]" }, { type: i4$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i4$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i4$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { type: i6.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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 (inputChangeEvent)=\"emitChange()\" [entity]=\"internalEntity\" [key]=\"internalPropertyKey\" [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"></string-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_TEXTBOX\">\n        <string-textbox-input (inputChangeEvent)=\"emitChange()\" [entity]=\"internalEntity\" [key]=\"internalPropertyKey\" [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"></string-textbox-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_AUTOCOMPLETE\">\n        <string-autocomplete-input (inputChangeEvent)=\"emitChange()\" [entity]=\"internalEntity\" [key]=\"internalPropertyKey\" [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"></string-autocomplete-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_DROPDOWN\">\n        <string-dropdown-input (inputChangeEvent)=\"emitChange()\" [entity]=\"internalEntity\" [key]=\"internalPropertyKey\" [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"></string-dropdown-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-----------------Booleans------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_CHECKBOX\">\n        <boolean-checkbox-input (inputChangeEvent)=\"emitChange()\" [entity]=\"internalEntity\" [key]=\"internalPropertyKey\" [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"></boolean-checkbox-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_TOGGLE\">\n        <boolean-toggle-input (inputChangeEvent)=\"emitChange()\" [entity]=\"internalEntity\" [key]=\"internalPropertyKey\" [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"></boolean-toggle-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_DROPDOWN\">\n        <boolean-dropdown-input (inputChangeEvent)=\"emitChange()\" [entity]=\"internalEntity\" [key]=\"internalPropertyKey\" [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"></boolean-dropdown-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!------------------Numbers------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.NUMBER\">\n        <number-input (inputChangeEvent)=\"emitChange()\" [entity]=\"internalEntity\" [key]=\"internalPropertyKey\" [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"></number-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.NUMBER_DROPDOWN\">\n        <number-dropdown-input (inputChangeEvent)=\"emitChange()\" [entity]=\"internalEntity\" [key]=\"internalPropertyKey\" [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"></number-dropdown-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        <div class=\"row\" *ngFor=\"let row of objectPropertyRows\">\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                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\n    <!-------------------------------------------->\n    <!-------------------Array-------------------->\n    <!-------------------------------------------->\n    <div class=\"entityArray\" *ngSwitchCase=\"DecoratorTypes.ARRAY\">\n        <div class=\"mat-elevation-z8\" style=\"border-radius: 5px;padding: 15px;margin-bottom: 15px;margin-top: 15px;\">\n            <div style=\"padding-bottom: 10px\">\n                <b>{{metadataEntityArray.displayName}}</b>\n            </div>\n            <div *ngIf=\"metadataEntityArray.createInline\">\n                <div class=\"row\" *ngFor=\"let row of arrayItemInlineRows\">\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            \n            <div class=\"buttons\">\n                <button mat-raised-button\n                    [disabled]=\"metadataEntityArray.createInline && !isArrayItemValid\"\n                    (click)=\"addEntity()\">\n                    {{metadataEntityArray.addButtonLabel}}\n                </button>\n                <button mat-raised-button\n                    [disabled]=\"!selection.selected.length\"\n                    (click)=\"remove(selection, entityArrayValues, dataSource)\">\n                    {{metadataEntityArray.removeButtonLabel}}\n                </button>\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 ? masterToggle(selection, dataSource) : null\" [checked]=\"selection.hasValue() && isAllSelected(selection, dataSource)\" [indeterminate]=\"selection.hasValue() && !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 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 (inputChangeEvent)=\"emitChange()\" [entity]=\"internalEntity\" [key]=\"internalPropertyKey\" [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"></array-date-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_DATE_TIME\">\n        <array-date-time-input (inputChangeEvent)=\"emitChange()\" [entity]=\"internalEntity\" [key]=\"internalPropertyKey\" [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"></array-date-time-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_DATE_RANGE\">\n        <array-date-range-input (inputChangeEvent)=\"emitChange()\" [entity]=\"internalEntity\" [key]=\"internalPropertyKey\" [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"></array-date-range-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_STRING_CHIPS\">\n        <array-string-chips-input (inputChangeEvent)=\"emitChange()\" [entity]=\"internalEntity\" [key]=\"internalPropertyKey\" [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"></array-string-chips-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_STRING_AUTOCOMPLETE_CHIPS\">\n        <array-string-autocomplete-chips (inputChangeEvent)=\"emitChange()\" [entity]=\"internalEntity\" [key]=\"internalPropertyKey\" [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"></array-string-autocomplete-chips>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Dates-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.DATE\">\n        <date-input (inputChangeEvent)=\"emitChange()\" [entity]=\"internalEntity\" [key]=\"internalPropertyKey\" [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"></date-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.DATE_RANGE\">\n        <date-range-input (inputChangeEvent)=\"emitChange()\" [entity]=\"internalEntity\" [key]=\"internalPropertyKey\" [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"></date-range-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.DATE_TIME\">\n        <date-time-input (inputChangeEvent)=\"emitChange()\" [entity]=\"internalEntity\" [key]=\"internalPropertyKey\" [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"></date-time-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Files-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.FILE_DEFAULT\">\n        <file-default-input (inputChangeEvent)=\"emitChange()\" [entity]=\"internalEntity\" [key]=\"internalPropertyKey\" [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"></file-default-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.FILE_IMAGE\">\n        <file-image-input (inputChangeEvent)=\"emitChange()\" [entity]=\"internalEntity\" [key]=\"internalPropertyKey\" [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"></file-image-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Custom------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.CUSTOM\">\n        <custom-input (inputChangeEvent)=\"emitChange()\" [entity]=\"internalEntity\" [key]=\"internalPropertyKey\" [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"></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    <mat-dialog-content>\n        <form #form=\"ngForm\" class=\"row\">\n            <div class=\"row\" *ngFor=\"let row of arrayItemDialogRows\">\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        </form>\n    </mat-dialog-content>\n\n    <mat-dialog-actions>\n        <button mat-raised-button (click)=\"addArrayItem()\" [disabled]=\"!isDialogArrayItemValid\">\n            {{dialogData.createDialogData.createButtonLabel}}\n        </button>\n        <button mat-raised-button (click)=\"cancelAddArrayItem()\" class=\"cancel-button\">\n            {{dialogData.createDialogData.cancelButtonLabel}}\n        </button>\n    </mat-dialog-actions>\n\n</ng-template>", styles: ["mat-form-field{width:100%}.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 mat-raised-button\n                    [disabled]=\"metadataEntityArray.createInline && !isArrayItemValid\"\n                    (click)=\"addEntity()\">\n                    {{metadataEntityArray.addButtonLabel}}\n                </button>\n                <button mat-raised-button\n                    [disabled]=\"!selection.selected.length\"\n                    (click)=\"remove(selection, entityArrayValues, dataSource)\">\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 ? masterToggle(selection, dataSource) : null\"\n                            [checked]=\"selection.hasValue() && isAllSelected(selection, dataSource)\"\n                            [indeterminate]=\"selection.hasValue() && !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    <mat-dialog-content>\n        <form #form=\"ngForm\" class=\"row\">\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        </form>\n    </mat-dialog-content>\n\n    <mat-dialog-actions>\n        <button mat-raised-button (click)=\"addArrayItem()\" [disabled]=\"!isDialogArrayItemValid\">\n            {{dialogData.createDialogData.createButtonLabel}}\n        </button>\n        <button mat-raised-button (click)=\"cancelAddArrayItem()\" class=\"cancel-button\">\n            {{dialogData.createDialogData.cancelButtonLabel}}\n        </button>\n    </mat-dialog-actions>\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"] }]
         }], ctorParameters: function () { return [{ type: i1.MatDialog }]; }, propDecorators: { entity: [{
                 type: Input
             }], propertyKey: [{
@@ -2976,6 +3199,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], hideOmitForEdit: [{
                 type: Input
+            }], isReadOnly: [{
+                type: Input
             }], inputChangeEvent: [{
                 type: Output
             }], addArrayItemDialog: [{
@@ -2990,11 +3215,13 @@ NgxMatEntityInputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0",
         StringTextboxInputComponent,
         StringAutocompleteInputComponent,
         StringDropdownInputComponent,
+        StringPasswordInputComponent,
         BooleanCheckboxInputComponent,
         BooleanToggleInputComponent,
         BooleanDropdownInputComponent,
         NumberInputComponent,
         NumberDropdownInputComponent,
+        NumberSliderInputComponent,
         ArrayStringChipsInputComponent,
         ArrayStringAutocompleteChipsComponent,
         DateInputComponent,
@@ -3021,7 +3248,9 @@ NgxMatEntityInputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0",
         MatTableModule,
         MatDialogModule,
         MatButtonModule,
-        MatDatepickerModule], exports: [NgxMatEntityInputComponent] });
+        MatDatepickerModule,
+        MatSliderModule,
+        MatTabsModule], exports: [NgxMatEntityInputComponent] });
 NgxMatEntityInputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityInputModule, imports: [[
             CommonModule,
             MatInputModule,
@@ -3036,7 +3265,9 @@ NgxMatEntityInputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0",
             MatTableModule,
             MatDialogModule,
             MatButtonModule,
-            MatDatepickerModule
+            MatDatepickerModule,
+            MatSliderModule,
+            MatTabsModule
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityInputModule, decorators: [{
             type: NgModule,
@@ -3046,11 +3277,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         StringTextboxInputComponent,
                         StringAutocompleteInputComponent,
                         StringDropdownInputComponent,
+                        StringPasswordInputComponent,
                         BooleanCheckboxInputComponent,
                         BooleanToggleInputComponent,
                         BooleanDropdownInputComponent,
                         NumberInputComponent,
                         NumberDropdownInputComponent,
+                        NumberSliderInputComponent,
                         ArrayStringChipsInputComponent,
                         ArrayStringAutocompleteChipsComponent,
                         DateInputComponent,
@@ -3080,7 +3313,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         MatTableModule,
                         MatDialogModule,
                         MatButtonModule,
-                        MatDatepickerModule
+                        MatDatepickerModule,
+                        MatSliderModule,
+                        MatTabsModule
                     ],
                     exports: [NgxMatEntityInputComponent]
                 }]
@@ -3128,7 +3363,7 @@ class NgxMatEntityCreateDialogComponent {
     ngOnInit() {
         this.data = new CreateEntityDialogDataBuilder(this.inputData).getResult();
         this.dialogRef.disableClose = true;
-        this.entityRows = EntityUtilities.getEntityRows(this.data.entity, true);
+        this.entityTabs = EntityUtilities.getEntityTabs(this.data.entity, true);
         this.entityService = this.injector.get(this.data.EntityServiceClass);
     }
     /**
@@ -3173,10 +3408,10 @@ class NgxMatEntityCreateDialogComponent {
     }
 }
 NgxMatEntityCreateDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", 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: "12.0.0", version: "13.3.11", type: NgxMatEntityCreateDialogComponent, selector: "ngx-mat-entity-create-dialog", ngImport: i0, template: "<h2 mat-dialog-title>{{data.createDialogData.title}}</h2>\n\n<mat-dialog-content>\n    <form #form=\"ngForm\">\n        <div class=\"row\" *ngFor=\"let row of entityRows\">\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    </form>\n</mat-dialog-content>\n\n<mat-dialog-actions>\n    <button mat-raised-button (click)=\"create()\" [disabled]=\"!isEntityValid\">\n        {{data.createDialogData.createButtonLabel}}\n    </button>\n    <button mat-raised-button (click)=\"cancel()\" class=\"cancel-button\">\n        {{data.createDialogData.cancelButtonLabel}}\n    </button>\n</mat-dialog-actions>\n", styles: ["mat-dialog-actions{display:flex;justify-content:space-between}\n"], components: [{ type: NgxMatEntityInputComponent, selector: "ngx-mat-entity-input", inputs: ["entity", "propertyKey", "getValidationErrorMessage", "hideOmitForCreate", "hideOmitForEdit"], outputs: ["inputChangeEvent"] }, { type: i3.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"] }], directives: [{ type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }] });
+NgxMatEntityCreateDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NgxMatEntityCreateDialogComponent, selector: "ngx-mat-entity-create-dialog", ngImport: i0, template: "<h2 mat-dialog-title>{{data.createDialogData.title}}</h2>\n\n<mat-dialog-content>\n    <form #form=\"ngForm\">\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    </form>\n</mat-dialog-content>\n\n<mat-dialog-actions>\n    <button mat-raised-button (click)=\"create()\" [disabled]=\"!isEntityValid\">\n        {{data.createDialogData.createButtonLabel}}\n    </button>\n    <button mat-raised-button (click)=\"cancel()\" class=\"cancel-button\">\n        {{data.createDialogData.cancelButtonLabel}}\n    </button>\n</mat-dialog-actions>\n", styles: ["mat-dialog-actions{justify-content:space-between}\n"], components: [{ type: i13.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { type: i13.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { type: NgxMatEntityInputComponent, selector: "ngx-mat-entity-input", inputs: ["entity", "propertyKey", "getValidationErrorMessage", "hideOmitForCreate", "hideOmitForEdit", "isReadOnly"], outputs: ["inputChangeEvent"] }, { type: i3.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"] }], directives: [{ type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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<mat-dialog-content>\n    <form #form=\"ngForm\">\n        <div class=\"row\" *ngFor=\"let row of entityRows\">\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    </form>\n</mat-dialog-content>\n\n<mat-dialog-actions>\n    <button mat-raised-button (click)=\"create()\" [disabled]=\"!isEntityValid\">\n        {{data.createDialogData.createButtonLabel}}\n    </button>\n    <button mat-raised-button (click)=\"cancel()\" class=\"cancel-button\">\n        {{data.createDialogData.cancelButtonLabel}}\n    </button>\n</mat-dialog-actions>\n", styles: ["mat-dialog-actions{display:flex;justify-content:space-between}\n"] }]
+            args: [{ selector: 'ngx-mat-entity-create-dialog', template: "<h2 mat-dialog-title>{{data.createDialogData.title}}</h2>\n\n<mat-dialog-content>\n    <form #form=\"ngForm\">\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    </form>\n</mat-dialog-content>\n\n<mat-dialog-actions>\n    <button mat-raised-button (click)=\"create()\" [disabled]=\"!isEntityValid\">\n        {{data.createDialogData.createButtonLabel}}\n    </button>\n    <button mat-raised-button (click)=\"cancel()\" class=\"cancel-button\">\n        {{data.createDialogData.cancelButtonLabel}}\n    </button>\n</mat-dialog-actions>\n", styles: ["mat-dialog-actions{justify-content:space-between}\n"] }]
         }], ctorParameters: function () {
         return [{ type: undefined, decorators: [{
                         type: Inject,
@@ -3228,11 +3463,12 @@ class EditDialogDataBuilder extends BaseBuilder {
  * The internal EditEntityDialogData. Requires all default values the user can leave out.
  */
 class EditEntityDialogDataInternal {
-    constructor(entity, EntityServiceClass, editDialogData, allowDelete) {
+    constructor(entity, EntityServiceClass, editDialogData, allowUpdate, allowDelete) {
         this.entity = entity;
         this.EntityServiceClass = EntityServiceClass;
         this.editDialogData = editDialogData;
         this.allowDelete = allowDelete;
+        this.allowUpdate = allowUpdate;
     }
 }
 /**
@@ -3244,9 +3480,9 @@ class EditEntityDialogDataBuilder extends BaseBuilder {
     }
     // eslint-disable-next-line jsdoc/require-jsdoc
     generateBaseData(data) {
-        var _a;
+        var _a, _b;
         const editDialogData = new EditDialogDataBuilder(data.editDialogData).getResult();
-        return new EditEntityDialogDataInternal(data.entity, data.EntityServiceClass, editDialogData, (_a = data.allowDelete) !== null && _a !== void 0 ? _a : (() => true));
+        return new EditEntityDialogDataInternal(data.entity, data.EntityServiceClass, editDialogData, (_a = data.allowUpdate) !== null && _a !== void 0 ? _a : (() => true), (_b = data.allowDelete) !== null && _b !== void 0 ? _b : (() => true));
     }
 }
 
@@ -3264,19 +3500,24 @@ class NgxMatEntityEditDialogComponent {
         this.dialog = dialog;
         this.EntityUtilities = EntityUtilities;
         this.isEntityValid = true;
-        this.isEntityDirty = (() => __awaiter(this, void 0, void 0, function* () { return false; })).call(this);
+        this.isEntityDirty = false;
     }
     ngOnInit() {
         this.data = new EditEntityDialogDataBuilder(this.inputData).getResult();
+        this.entityPriorChanges = LodashUtilities.cloneDeep(this.data.entity);
+        this.isReadOnly = !this.data.allowUpdate(this.entityPriorChanges);
         this.dialogRef.disableClose = true;
-        this.entityRows = EntityUtilities.getEntityRows(this.data.entity, false, true);
+        this.entityTabs = EntityUtilities.getEntityTabs(this.data.entity, false, true);
         this.entityService = this.injector.get(this.data.EntityServiceClass);
-        this.entityPriorChanges = LodashUtilities.cloneDeep(this.data.entity);
     }
-    // eslint-disable-next-line jsdoc/require-jsdoc
+    /**
+     * Checks if the entity has become invalid or dirty.
+     */
     checkEntity() {
-        this.isEntityValid = EntityUtilities.isEntityValid(this.data.entity, 'update');
-        this.isEntityDirty = EntityUtilities.dirty(this.data.entity, this.entityPriorChanges);
+        return __awaiter(this, void 0, void 0, function* () {
+            this.isEntityValid = EntityUtilities.isEntityValid(this.data.entity, 'update');
+            this.isEntityDirty = yield EntityUtilities.isDirty(this.data.entity, this.entityPriorChanges);
+        });
     }
     /**
      * Tries to save the changes and close the dialog afterwards.
@@ -3344,10 +3585,10 @@ class NgxMatEntityEditDialogComponent {
     }
 }
 NgxMatEntityEditDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", 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: "12.0.0", version: "13.3.11", type: NgxMatEntityEditDialogComponent, selector: "ngx-mat-entity-edit-dialog", ngImport: i0, template: "<h2 mat-dialog-title>\n    {{data.editDialogData.title(data.entity)}}\n    <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<mat-dialog-content>\n    <form #form=\"ngForm\" class=\"row\">\n        <div class=\"row\" *ngFor=\"let row of entityRows\">\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            >\n            </ngx-mat-entity-input>\n        </div>\n    </form>\n</mat-dialog-content>\n\n<mat-dialog-actions>\n    <button mat-raised-button (click)=\"edit()\" [disabled]=\"!isEntityValid || (isEntityDirty | async) === false\">\n        {{data.editDialogData.confirmButtonLabel}}\n    </button>\n    <button mat-raised-button (click)=\"cancel()\" class=\"cancel-button\">\n        {{data.editDialogData.cancelButtonLabel}}\n    </button>\n</mat-dialog-actions>\n", styles: ["mat-dialog-actions{display:flex;justify-content:space-between}.delete-button{float:right}\n"], components: [{ type: i3.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"] }, { type: NgxMatEntityInputComponent, selector: "ngx-mat-entity-input", inputs: ["entity", "propertyKey", "getValidationErrorMessage", "hideOmitForCreate", "hideOmitForEdit"], outputs: ["inputChangeEvent"] }], directives: [{ type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }], pipes: { "async": i4.AsyncPipe } });
+NgxMatEntityEditDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NgxMatEntityEditDialogComponent, selector: "ngx-mat-entity-edit-dialog", ngImport: i0, template: "<h2 mat-dialog-title>\n    {{data.editDialogData.title(data.entity)}}\n    <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<mat-dialog-content>\n    <form #form=\"ngForm\" class=\"row\">\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    </form>\n</mat-dialog-content>\n\n<mat-dialog-actions>\n    <button mat-raised-button (click)=\"edit()\" [disabled]=\"isReadOnly || !isEntityValid || !isEntityDirty\">\n        {{data.editDialogData.confirmButtonLabel}}\n    </button>\n    <button mat-raised-button (click)=\"cancel()\" class=\"cancel-button\">\n        {{data.editDialogData.cancelButtonLabel}}\n    </button>\n</mat-dialog-actions>\n", styles: ["mat-dialog-actions{justify-content:space-between}.delete-button{float:right}\n"], components: [{ type: i3.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"] }, { type: i13.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { type: i13.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { type: NgxMatEntityInputComponent, selector: "ngx-mat-entity-input", inputs: ["entity", "propertyKey", "getValidationErrorMessage", "hideOmitForCreate", "hideOmitForEdit", "isReadOnly"], outputs: ["inputChangeEvent"] }], directives: [{ type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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 *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<mat-dialog-content>\n    <form #form=\"ngForm\" class=\"row\">\n        <div class=\"row\" *ngFor=\"let row of entityRows\">\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            >\n            </ngx-mat-entity-input>\n        </div>\n    </form>\n</mat-dialog-content>\n\n<mat-dialog-actions>\n    <button mat-raised-button (click)=\"edit()\" [disabled]=\"!isEntityValid || (isEntityDirty | async) === false\">\n        {{data.editDialogData.confirmButtonLabel}}\n    </button>\n    <button mat-raised-button (click)=\"cancel()\" class=\"cancel-button\">\n        {{data.editDialogData.cancelButtonLabel}}\n    </button>\n</mat-dialog-actions>\n", styles: ["mat-dialog-actions{display:flex;justify-content:space-between}.delete-button{float:right}\n"] }]
+            args: [{ selector: 'ngx-mat-entity-edit-dialog', template: "<h2 mat-dialog-title>\n    {{data.editDialogData.title(data.entity)}}\n    <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<mat-dialog-content>\n    <form #form=\"ngForm\" class=\"row\">\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    </form>\n</mat-dialog-content>\n\n<mat-dialog-actions>\n    <button mat-raised-button (click)=\"edit()\" [disabled]=\"isReadOnly || !isEntityValid || !isEntityDirty\">\n        {{data.editDialogData.confirmButtonLabel}}\n    </button>\n    <button mat-raised-button (click)=\"cancel()\" class=\"cancel-button\">\n        {{data.editDialogData.cancelButtonLabel}}\n    </button>\n</mat-dialog-actions>\n", styles: ["mat-dialog-actions{justify-content:space-between}.delete-button{float:right}\n"] }]
         }], ctorParameters: function () {
         return [{ type: undefined, decorators: [{
                         type: Inject,
@@ -3374,15 +3615,15 @@ class BaseDataBuilder extends BaseBuilder {
     }
     // eslint-disable-next-line jsdoc/require-jsdoc
     generateBaseData(data) {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        return new BaseDataInternal(data.title, data.displayColumns, data.EntityServiceClass, (_a = data.searchLabel) !== null && _a !== void 0 ? _a : 'Search', (_b = data.createButtonLabel) !== null && _b !== void 0 ? _b : 'Create', (_c = data.searchString) !== null && _c !== void 0 ? _c : defaultSearchFunction, (_d = data.allowCreate) !== null && _d !== void 0 ? _d : true, (_e = data.allowEdit) !== null && _e !== void 0 ? _e : (() => true), (_f = data.allowDelete) !== null && _f !== void 0 ? _f : (() => true), (_g = data.multiSelectActions) !== null && _g !== void 0 ? _g : [], (_h = data.multiSelectLabel) !== null && _h !== void 0 ? _h : 'Actions', data.EntityClass, data.edit, data.create);
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        return new BaseDataInternal(data.title, data.displayColumns, data.EntityServiceClass, (_a = data.searchLabel) !== null && _a !== void 0 ? _a : 'Search', (_b = data.createButtonLabel) !== null && _b !== void 0 ? _b : 'Create', (_c = data.searchString) !== null && _c !== void 0 ? _c : defaultSearchFunction, (_d = data.allowCreate) !== null && _d !== void 0 ? _d : (() => true), (_e = data.allowRead) !== null && _e !== void 0 ? _e : (() => true), (_f = data.allowUpdate) !== null && _f !== void 0 ? _f : (() => true), (_g = data.allowDelete) !== null && _g !== void 0 ? _g : (() => true), (_h = data.multiSelectActions) !== null && _h !== void 0 ? _h : [], (_j = data.multiSelectLabel) !== null && _j !== void 0 ? _j : 'Actions', data.EntityClass, data.edit, data.create);
     }
 }
 /**
  * The internal TableData. Requires all default values the user can leave out.
  */
 class BaseDataInternal {
-    constructor(title, displayColumns, EntityServiceClass, searchLabel, createButtonLabel, searchString, allowCreate, allowEdit, allowDelete, multiSelectActions, multiSelectLabel, EntityClass, edit, create) {
+    constructor(title, displayColumns, EntityServiceClass, searchLabel, createButtonLabel, searchString, allowCreate, allowRead, allowUpdate, allowDelete, multiSelectActions, multiSelectLabel, EntityClass, edit, create) {
         this.title = title;
         this.displayColumns = displayColumns;
         this.EntityServiceClass = EntityServiceClass;
@@ -3391,7 +3632,8 @@ class BaseDataInternal {
         this.createButtonLabel = createButtonLabel;
         this.searchString = searchString;
         this.allowCreate = allowCreate;
-        this.allowEdit = allowEdit;
+        this.allowRead = allowRead;
+        this.allowUpdate = allowUpdate;
         this.allowDelete = allowDelete;
         this.multiSelectActions = multiSelectActions;
         this.multiSelectLabel = multiSelectLabel;
@@ -3420,24 +3662,26 @@ class TableDataBuilder extends BaseBuilder {
             throw new Error(`The name "select" for a display column is reserved for the multi-select action functionality.
                 Please choose a different name.`);
         }
-        if ((data.baseData.allowEdit && data.baseData.allowEdit !== (() => false)
-            || data.baseData.allowDelete && data.baseData.allowDelete !== (() => false)
-            || data.baseData.allowCreate === true)
+        if ((data.baseData.allowCreate !== (() => false)
+            || data.baseData.allowRead !== (() => false)
+            || data.baseData.allowUpdate !== (() => false)
+            || data.baseData.allowDelete !== (() => false))
             && !data.baseData.EntityClass) {
             throw new Error(`
                 Missing required Input data "EntityClass".
                 You can only omit this value if you can neither create or update entities.`);
         }
-        if (data.baseData.allowCreate !== false && !data.baseData.create && !data.createDialogData) {
+        if (data.baseData.allowCreate !== (() => false) && !data.baseData.create && !data.createDialogData) {
             throw new Error(`Missing required Input data "createDialogData".
                 You can only omit this value when creation is disallowed or done with a custom create method.`);
         }
-        if ((data.baseData.allowEdit !== (() => false)
+        if ((data.baseData.allowRead !== (() => false)
+            || data.baseData.allowUpdate !== (() => false)
             || data.baseData.allowDelete !== (() => false))
             && !data.baseData.edit
             && !data.editDialogData) {
             throw new Error(`Missing required Input data "editDialogData".
-                You can only omit this value when editing and deleting is disallowed or done with a custom edit method.`);
+                You can only omit this value when viewing, editing and deleting is disallowed or done with a custom edit method.`);
         }
     }
 }
@@ -3512,16 +3756,17 @@ class NgxMatEntityTableComponent {
      * @throws When no EntityClass was provided, as a new call is needed to initialize metadata.
      */
     editEntity(entity) {
-        if (this.data.baseData.allowEdit(entity)) {
-            if (!this.data.baseData.EntityClass) {
-                throw new Error('No "EntityClass" specified for this table');
-            }
-            if (this.data.baseData.edit) {
-                this.data.baseData.edit(new this.data.baseData.EntityClass(entity));
-            }
-            else {
-                void this.editDefault(new this.data.baseData.EntityClass(entity));
-            }
+        if (!(this.data.baseData.allowUpdate(entity) || this.data.baseData.allowRead(entity))) {
+            return;
+        }
+        if (!this.data.baseData.EntityClass) {
+            throw new Error('No "EntityClass" specified for this table');
+        }
+        if (this.data.baseData.edit) {
+            this.data.baseData.edit(new this.data.baseData.EntityClass(entity));
+        }
+        else {
+            void this.editDefault(new this.data.baseData.EntityClass(entity));
         }
     }
     editDefault(entity) {
@@ -3529,6 +3774,7 @@ class NgxMatEntityTableComponent {
             const inputDialogData = {
                 entity: entity,
                 EntityServiceClass: this.data.baseData.EntityServiceClass,
+                allowUpdate: this.data.baseData.allowUpdate,
                 allowDelete: this.data.baseData.allowDelete,
                 editDialogData: this.data.editDialogData
             };
@@ -3553,7 +3799,7 @@ class NgxMatEntityTableComponent {
      * @throws When no EntityClass was provided, as a new call is needed to initialize metadata.
      */
     createEntity() {
-        if (this.data.baseData.allowCreate) {
+        if (this.data.baseData.allowCreate()) {
             if (!this.data.baseData.EntityClass) {
                 throw new Error('No "EntityClass" specified for this table');
             }
@@ -3660,10 +3906,10 @@ class NgxMatEntityTableComponent {
     }
 }
 NgxMatEntityTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityTableComponent, deps: [{ token: i1.MatDialog }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-NgxMatEntityTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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 class=\"actions-button\" [matMenuTriggerFor]=\"menu\" mat-raised-button>\n            {{data.baseData.multiSelectLabel}}\n        </button>\n    </div>\n    <mat-menu #menu=\"matMenu\">\n        <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 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 *ngIf=\"dataSource\" [dataSource]=\"dataSource\" matSort>\n        <!-- select Column -->\n        <ng-container matColumnDef=\"select\">\n            <mat-header-cell *matHeaderCellDef>\n                <mat-checkbox (change)=\"$event ? masterToggle() : null\" [checked]=\"selection.hasValue() && isAllSelected()\" [indeterminate]=\"selection.hasValue() && !isAllSelected()\"> </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.allowEdit(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 *ngIf=\"dataSource\" id=\"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"], components: [{ type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i3.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"] }, { type: i4$3.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i4$3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: i4$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i4$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i4$2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { type: i7.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }], directives: [{ type: i1$1.MatLabel, selector: "mat-label" }, { type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i4$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i4$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i4$2.MatCellDef, selector: "[matCellDef]" }, { type: i4$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i4$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i4$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }] });
+NgxMatEntityTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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 class=\"actions-button\" [matMenuTriggerFor]=\"menu\" mat-raised-button>\n            {{data.baseData.multiSelectLabel}}\n        </button>\n    </div>\n    <mat-menu #menu=\"matMenu\">\n        <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 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 *ngIf=\"dataSource\" [dataSource]=\"dataSource\" matSort>\n        <!-- select Column -->\n        <ng-container matColumnDef=\"select\">\n            <mat-header-cell *matHeaderCellDef>\n                <mat-checkbox (change)=\"$event ? masterToggle() : null\" [checked]=\"selection.hasValue() && isAllSelected()\" [indeterminate]=\"selection.hasValue() && !isAllSelected()\"> </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 *ngIf=\"dataSource\" id=\"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"], components: [{ type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i3.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"] }, { type: i4$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: i4$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i4$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i4$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { type: i7.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }], directives: [{ type: i1$1.MatLabel, selector: "mat-label" }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i4$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i4$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i4$1.MatCellDef, selector: "[matCellDef]" }, { type: i4$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i4$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i4$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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 class=\"actions-button\" [matMenuTriggerFor]=\"menu\" mat-raised-button>\n            {{data.baseData.multiSelectLabel}}\n        </button>\n    </div>\n    <mat-menu #menu=\"matMenu\">\n        <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 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 *ngIf=\"dataSource\" [dataSource]=\"dataSource\" matSort>\n        <!-- select Column -->\n        <ng-container matColumnDef=\"select\">\n            <mat-header-cell *matHeaderCellDef>\n                <mat-checkbox (change)=\"$event ? masterToggle() : null\" [checked]=\"selection.hasValue() && isAllSelected()\" [indeterminate]=\"selection.hasValue() && !isAllSelected()\"> </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.allowEdit(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 *ngIf=\"dataSource\" id=\"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"] }]
+            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 class=\"actions-button\" [matMenuTriggerFor]=\"menu\" mat-raised-button>\n            {{data.baseData.multiSelectLabel}}\n        </button>\n    </div>\n    <mat-menu #menu=\"matMenu\">\n        <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 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 *ngIf=\"dataSource\" [dataSource]=\"dataSource\" matSort>\n        <!-- select Column -->\n        <ng-container matColumnDef=\"select\">\n            <mat-header-cell *matHeaderCellDef>\n                <mat-checkbox (change)=\"$event ? masterToggle() : null\" [checked]=\"selection.hasValue() && isAllSelected()\" [indeterminate]=\"selection.hasValue() && !isAllSelected()\"> </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 *ngIf=\"dataSource\" id=\"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: [{
                 type: Input
             }], paginator: [{
@@ -3684,13 +3930,15 @@ NgxMatEntityCreateDialogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "1
         NgxMatEntityInputModule,
         MatDialogModule,
         FormsModule,
-        MatButtonModule], exports: [NgxMatEntityCreateDialogComponent] });
+        MatButtonModule,
+        MatTabsModule], exports: [NgxMatEntityCreateDialogComponent] });
 NgxMatEntityCreateDialogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityCreateDialogModule, imports: [[
             CommonModule,
             NgxMatEntityInputModule,
             MatDialogModule,
             FormsModule,
-            MatButtonModule
+            MatButtonModule,
+            MatTabsModule
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityCreateDialogModule, decorators: [{
             type: NgModule,
@@ -3701,7 +3949,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         NgxMatEntityInputModule,
                         MatDialogModule,
                         FormsModule,
-                        MatButtonModule
+                        MatButtonModule,
+                        MatTabsModule
                     ],
                     exports: [NgxMatEntityCreateDialogComponent]
                 }]
@@ -3715,6 +3964,7 @@ NgxMatEntityEditDialogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.
         MatDialogModule,
         FormsModule,
         MatButtonModule,
+        MatTabsModule,
         NgxMatEntityConfirmDialogModule], exports: [NgxMatEntityEditDialogComponent] });
 NgxMatEntityEditDialogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityEditDialogModule, imports: [[
             CommonModule,
@@ -3722,6 +3972,7 @@ NgxMatEntityEditDialogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.
             MatDialogModule,
             FormsModule,
             MatButtonModule,
+            MatTabsModule,
             NgxMatEntityConfirmDialogModule
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityEditDialogModule, decorators: [{
@@ -3734,6 +3985,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         MatDialogModule,
                         FormsModule,
                         MatButtonModule,
+                        MatTabsModule,
                         NgxMatEntityConfirmDialogModule
                     ],
                     exports: [NgxMatEntityEditDialogComponent]
@@ -4125,6 +4377,30 @@ class DropdownNumberDecoratorConfigInternal extends PropertyDecoratorConfigInter
         this.dropdownValues = data.dropdownValues;
     }
 }
+/**
+ * The internal SliderNumberDecoratorConfig. Sets default values.
+ */
+class SliderNumberDecoratorConfigInternal extends PropertyDecoratorConfigInternal {
+    constructor(data) {
+        var _a;
+        super(data);
+        this.displayStyle = data.displayStyle;
+        this.max = data.max;
+        this.min = data.min;
+        this.step = data.step;
+        this.formatThumbLabelValue = (_a = data.formatThumbLabelValue) !== null && _a !== void 0 ? _a : defaultFormatThumbLabelValue;
+        this.tickInterval = data.tickInterval;
+    }
+}
+/**
+ * The default function to format values for the number slider thumb label.
+ *
+ * @param value - The value of the slider.
+ * @returns Just the value without any formatting done.
+ */
+function defaultFormatThumbLabelValue(value) {
+    return value;
+}
 
 /**
  * Decorator for setting and getting number property metadata.
@@ -4133,11 +4409,13 @@ class DropdownNumberDecoratorConfigInternal extends PropertyDecoratorConfigInter
  * @returns The method that defines the metadata.
  */
 function number(metadata) {
-    if (metadata.displayStyle === 'dropdown') {
-        return baseProperty(new DropdownNumberDecoratorConfigInternal(metadata), DecoratorTypes.NUMBER_DROPDOWN);
-    }
-    else {
-        return baseProperty(new DefaultNumberDecoratorConfigInternal(metadata), DecoratorTypes.NUMBER);
+    switch (metadata.displayStyle) {
+        case 'dropdown':
+            return baseProperty(new DropdownNumberDecoratorConfigInternal(metadata), DecoratorTypes.NUMBER_DROPDOWN);
+        case 'slider':
+            return baseProperty(new SliderNumberDecoratorConfigInternal(metadata), DecoratorTypes.NUMBER_SLIDER);
+        default:
+            return baseProperty(new DefaultNumberDecoratorConfigInternal(metadata), DecoratorTypes.NUMBER);
     }
 }
 
@@ -4185,7 +4463,7 @@ class StringDecoratorConfig extends PropertyDecoratorConfig {
  */
 class DefaultFileDecoratorConfigInternal extends PropertyDecoratorConfigInternal {
     constructor(data) {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         super(data);
         this.type = data.type;
         this.preview = false;
@@ -4198,6 +4476,7 @@ 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';
     }
 }
 /**
@@ -4205,7 +4484,7 @@ class DefaultFileDecoratorConfigInternal extends PropertyDecoratorConfigInternal
  */
 class ImageFileDecoratorConfigInternal extends PropertyDecoratorConfigInternal {
     constructor(data) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         super(data);
         this.type = data.type;
         this.allowedMimeTypes = (_a = data.allowedMimeTypes) !== null && _a !== void 0 ? _a : ['image/*'];
@@ -4219,6 +4498,7 @@ 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';
     }
 }
 /**