ngx-material-entity 0.1.5 → 1.0.6

package/fesm2015/ngx-material-entity.mjs

@@ -1,43 +1,47 @@
 import 'reflect-metadata';
-import { __decorate, __metadata, __awaiter } from 'tslib';
-import { BehaviorSubject, firstValueFrom, Subject, takeUntil } from 'rxjs';
+import { __awaiter, __decorate, __metadata } from 'tslib';
 import { isEqual, cloneDeep, omit, isNil, omitBy, isArray } from 'lodash';
+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';
 import * as i1 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
-import * as i6 from '@angular/material/checkbox';
+import * as i2 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i4 from '@angular/material/button';
+import * as i3 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i4$1 from '@angular/common';
+import * as i6 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i3 from '@angular/forms';
+import * as i3$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import * as i5 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$2 from '@angular/material/input';
+import * as i4 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i3$1 from '@angular/cdk/text-field';
-import * as i2 from '@angular/material/autocomplete';
+import * as i3$2 from '@angular/cdk/text-field';
+import * as i2$1 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import * as i3$2 from '@angular/material/core';
-import * as i2$1 from '@angular/material/select';
+import * as i3$3 from '@angular/material/core';
+import * as i2$2 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
-import * as i2$2 from '@angular/material/slide-toggle';
+import * as i2$3 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import * as i3$3 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$3 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 +136,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";
@@ -149,6 +155,7 @@ var DecoratorTypes;
     DecoratorTypes["DATE_TIME"] = "dateTime";
     DecoratorTypes["FILE_DEFAULT"] = "fileDefault";
     DecoratorTypes["FILE_IMAGE"] = "fileImage";
+    DecoratorTypes["CUSTOM"] = "custom";
 })(DecoratorTypes || (DecoratorTypes = {}));
 
 /**
@@ -156,10 +163,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) {
@@ -173,6 +182,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');
+        }
     }
 }
 /**
@@ -237,6 +249,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.
@@ -245,37 +273,20 @@ 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);
     }
 }
 
-/**
- * A base Entity class with a builtin id.
- */
-class Entity {
-}
-__decorate([
-    string({
-        omitForCreate: true,
-        omitForUpdate: true,
-        display: false,
-        displayStyle: 'line',
-        displayName: 'ID',
-        required: true
-    }),
-    __metadata("design:type", String)
-], Entity.prototype, "id", void 0);
-
 /**
  * Encapsulates all functionality of lodash.
  */
@@ -455,14 +466,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
@@ -621,7 +632,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) {
@@ -800,8 +811,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:
@@ -831,9 +844,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)) {
@@ -889,6 +911,13 @@ class EntityUtilities {
                     return false;
                 }
                 break;
+            case DecoratorTypes.CUSTOM:
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const customMetadata = metadata;
+                if (!customMetadata.isValid(entity[key], omit)) {
+                    return false;
+                }
+                break;
             default:
                 throw new Error(`Could not validate the input because the DecoratorType ${type} is not known`);
         }
@@ -921,6 +950,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;
@@ -1021,8 +1065,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++) {
@@ -1032,11 +1074,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;
             }
         }
@@ -1049,7 +1091,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;
@@ -1107,7 +1149,6 @@ class EntityUtilities {
      * @param type - The type of the property.
      * @returns Whether or not the given values are equal.
      */
-    // eslint-disable-next-line max-len
     static isEqual(value, valuePriorChanges, metadata, type) {
         return __awaiter(this, void 0, void 0, function* () {
             switch (type) {
@@ -1125,6 +1166,9 @@ class EntityUtilities {
                 case DecoratorTypes.FILE_IMAGE:
                 case DecoratorTypes.FILE_DEFAULT:
                     return EntityUtilities.isEqualFile(value, valuePriorChanges, metadata.multiple);
+                case DecoratorTypes.CUSTOM:
+                    // eslint-disable-next-line max-len, @typescript-eslint/no-explicit-any
+                    return EntityUtilities.isEqualCustom(value, valuePriorChanges, metadata);
                 default:
                     return LodashUtilities.isEqual(value, valuePriorChanges);
             }
@@ -1197,6 +1241,14 @@ class EntityUtilities {
             return true;
         });
     }
+    static isEqualCustom(value, valuePriorChanges, 
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    metadata) {
+        if (!metadata.isEqual(value, valuePriorChanges, metadata)) {
+            return false;
+        }
+        return true;
+    }
     /**
      * Compare function for sorting entity keys by their order value.
      *
@@ -1253,38 +1305,85 @@ class EntityUtilities {
      * Gets the rows that are used to display the given entity.
      *
      * @param entity - The entity to get the rows from.
+     * @param tab - The tab number for which the rows should be returned.
      * @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.
      */
-    static getEntityRows(entity, hideOmitForCreate = false, hideOmitForEdit = false) {
+    static getEntityRows(entity, tab, hideOmitForCreate, hideOmitForEdit) {
         const res = [];
         const keys = EntityUtilities.keysOf(entity, hideOmitForCreate, hideOmitForEdit);
-        const numberOfRows = EntityUtilities.getNumberOfRows(keys, entity);
+        const numberOfRows = EntityUtilities.getNumberOfRows(keys, entity, tab);
         for (let i = 1; i <= numberOfRows; i++) {
             const row = {
                 row: i,
-                keys: EntityUtilities.getKeysForRow(keys, entity, i)
+                keys: EntityUtilities.getKeysForRow(keys, entity, i, tab)
             };
             res.push(row);
         }
-        const lastRow = {
-            row: numberOfRows + 1,
-            keys: EntityUtilities.getKeysForRow(keys, entity, -1)
-        };
-        res.push(lastRow);
+        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;
     }
-    static getKeysForRow(keys, entity, i) {
+    /**
+     * 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 Tabs containing the rows and the keys to display in that row.
+     */
+    static getEntityTabs(entity, hideOmitForCreate = false, hideOmitForEdit = false) {
+        const res = [];
+        const keys = EntityUtilities.keysOf(entity, hideOmitForCreate, hideOmitForEdit);
+        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(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);
+        }
+        return res;
+    }
+    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.
      *
@@ -1311,6 +1410,26 @@ EntityUtilities.construct = EntityUtilities.new;
 // eslint-disable-next-line @typescript-eslint/member-ordering, jsdoc/require-jsdoc
 EntityUtilities.build = EntityUtilities.new;
 
+/**
+ * A base Entity class with a builtin id.
+ */
+class Entity {
+    constructor(entity) {
+        EntityUtilities.new(this, entity);
+    }
+}
+__decorate([
+    string({
+        omitForCreate: true,
+        omitForUpdate: true,
+        display: false,
+        displayStyle: 'line',
+        displayName: 'ID',
+        required: true
+    }),
+    __metadata("design:type", String)
+], Entity.prototype, "id", void 0);
+
 /**
  * A generic EntityService class.
  * Offers basic CRUD-functionality.
@@ -1617,10 +1736,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: i6.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.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$1.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$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.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,
@@ -1738,67 +1857,92 @@ class AddArrayItemDialogDataBuilder extends BaseBuilder {
     }
 }
 
-/* eslint-disable jsdoc/require-jsdoc */
-class StringInputComponent {
+/**
+ * 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, DecoratorTypes.STRING);
+        this.metadata = EntityUtilities.getPropertyMetadata(this.entity, this.key);
     }
+    /**
+     * Should emit when the input has changed. This is needed to trigger validation and dirty checks.
+     */
     emitChange() {
         this.inputChangeEvent.emit();
     }
 }
-StringInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: StringInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-StringInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: StringInputComponent, selector: "string-input", inputs: { entity: "entity", key: "key", getValidationErrorMessage: "getValidationErrorMessage" }, outputs: { inputChangeEvent: "inputChangeEvent" }, 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$2.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.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i3.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { type: i3.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: [{
+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", 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: [{ 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"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { entity: [{
+            args: [{
+                    selector: 'ngx-mat-entity-base-input',
+                    template: ''
+                }]
+        }], propDecorators: { entity: [{
                 type: Input
             }], key: [{
                 type: Input
             }], getValidationErrorMessage: [{
                 type: Input
+            }], isReadOnly: [{
+                type: Input
             }], inputChangeEvent: [{
                 type: Output
             }] } });
 
 /* eslint-disable jsdoc/require-jsdoc */
-class StringTextboxInputComponent {
-    constructor() {
-        this.inputChangeEvent = new EventEmitter();
-    }
-    ngOnInit() {
-        this.metadata = EntityUtilities.getPropertyMetadata(this.entity, this.key, DecoratorTypes.STRING_TEXTBOX);
-    }
-    emitChange() {
-        this.inputChangeEvent.emit();
-    }
+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)]=\"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)]=\"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: [], target: i0.ɵɵFactoryTarget.Component });
-StringTextboxInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: StringTextboxInputComponent, selector: "string-textbox-input", inputs: { entity: "entity", key: "key", getValidationErrorMessage: "getValidationErrorMessage" }, outputs: { inputChangeEvent: "inputChangeEvent" }, 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$2.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.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { type: i3.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i3.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }] });
+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)]=\"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"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { entity: [{
-                type: Input
-            }], key: [{
-                type: Input
-            }], getValidationErrorMessage: [{
-                type: Input
-            }], inputChangeEvent: [{
-                type: Output
-            }] } });
+            args: [{ selector: 'string-textbox-input', template: "<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <textarea\n        matInput\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString()\"\n        #model=\"ngModel\"\n        cdkTextareaAutosize\n        cdkAutosizeMinRows=\"10\"\n        [required]=\"metadata.required\"\n        [minlength]=\"metadata.minLength ?? null\"\n        [maxlength]=\"metadata.maxLength ?? null\"\n        (ngModelChange)=\"emitChange()\"\n        [disabled]=\"isReadOnly\"\n    >\n    </textarea>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"] }]
+        }] });
 
 /* eslint-disable jsdoc/require-jsdoc */
-class StringAutocompleteInputComponent {
-    constructor() {
-        this.inputChangeEvent = new EventEmitter();
-    }
+class StringAutocompleteInputComponent extends NgxMatEntityBaseInputComponent {
     ngOnInit() {
-        this.metadata = EntityUtilities.getPropertyMetadata(this.entity, this.key, DecoratorTypes.STRING_AUTOCOMPLETE);
+        super.ngOnInit();
         this.autocompleteStrings = this.metadata.autocompleteValues;
         this.filteredAutocompleteStrings = LodashUtilities.cloneDeep(this.autocompleteStrings);
     }
@@ -1808,222 +1952,146 @@ class StringAutocompleteInputComponent {
      * @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()));
         }
     }
-    emitChange() {
-        this.inputChangeEvent.emit();
-    }
 }
-StringAutocompleteInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: StringAutocompleteInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-StringAutocompleteInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: StringAutocompleteInputComponent, selector: "string-autocomplete-input", inputs: { entity: "entity", key: "key", getValidationErrorMessage: "getValidationErrorMessage" }, outputs: { inputChangeEvent: "inputChangeEvent" }, 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.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i1$1.MatLabel, selector: "mat-label" }, { type: i4$2.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.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.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i3.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }] });
+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)]=\"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"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { entity: [{
-                type: Input
-            }], key: [{
-                type: Input
-            }], getValidationErrorMessage: [{
-                type: Input
-            }], inputChangeEvent: [{
-                type: Output
-            }] } });
+            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 {
-    constructor() {
-        this.inputChangeEvent = new EventEmitter();
-    }
-    ngOnInit() {
-        this.metadata = EntityUtilities.getPropertyMetadata(this.entity, this.key, DecoratorTypes.STRING_DROPDOWN);
-    }
-    emitChange() {
-        this.inputChangeEvent.emit();
-    }
+class StringDropdownInputComponent extends NgxMatEntityBaseInputComponent {
 }
-StringDropdownInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: StringDropdownInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-StringDropdownInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: StringDropdownInputComponent, selector: "string-dropdown-input", inputs: { entity: "entity", key: "key", getValidationErrorMessage: "getValidationErrorMessage" }, outputs: { inputChangeEvent: "inputChangeEvent" }, 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$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i1$1.MatLabel, selector: "mat-label" }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }] });
+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)]=\"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"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { entity: [{
-                type: Input
-            }], key: [{
-                type: Input
-            }], getValidationErrorMessage: [{
-                type: Input
-            }], inputChangeEvent: [{
-                type: Output
-            }] } });
+            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 BooleanCheckboxInputComponent {
+class StringPasswordInputComponent extends NgxMatEntityBaseInputComponent {
     constructor() {
-        this.inputChangeEvent = new EventEmitter();
+        super(...arguments);
+        this.hide = true;
+        this.hideConfirm = true;
     }
     ngOnInit() {
-        this.metadata = EntityUtilities.getPropertyMetadata(this.entity, this.key, DecoratorTypes.BOOLEAN_CHECKBOX);
-        if (this.entity[this.key] == null) {
-            this.entity[this.key] = false;
-        }
+        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();
     }
-    emitChange() {
-        this.inputChangeEvent.emit();
+}
+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\" style=\"margin-left: 5px;margin-right: 5px;\"></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}.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\" style=\"margin-left: 5px;margin-right: 5px;\"></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}.w-50{width:50%}.w-100{width:100%}\n"] }]
+        }] });
+
+/* eslint-disable jsdoc/require-jsdoc */
+class BooleanCheckboxInputComponent extends NgxMatEntityBaseInputComponent {
+    ngOnInit() {
+        var _a;
+        super.ngOnInit();
+        this.propertyValue = (_a = this.propertyValue) !== null && _a !== void 0 ? _a : false;
     }
 }
-BooleanCheckboxInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BooleanCheckboxInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BooleanCheckboxInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: BooleanCheckboxInputComponent, selector: "boolean-checkbox-input", inputs: { entity: "entity", key: "key", getValidationErrorMessage: "getValidationErrorMessage" }, outputs: { inputChangeEvent: "inputChangeEvent" }, 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: i6.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4$2.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.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.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i3.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.ɵ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\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"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { entity: [{
-                type: Input
-            }], key: [{
-                type: Input
-            }], getValidationErrorMessage: [{
-                type: Input
-            }], inputChangeEvent: [{
-                type: Output
-            }] } });
+            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 {
-    constructor() {
-        this.inputChangeEvent = new EventEmitter();
-    }
+class BooleanToggleInputComponent extends NgxMatEntityBaseInputComponent {
     ngOnInit() {
-        this.metadata = EntityUtilities.getPropertyMetadata(this.entity, this.key, DecoratorTypes.BOOLEAN_TOGGLE);
-        if (this.entity[this.key] == null) {
-            this.entity[this.key] = false;
-        }
-    }
-    emitChange() {
-        this.inputChangeEvent.emit();
+        var _a;
+        super.ngOnInit();
+        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: [], target: i0.ɵɵFactoryTarget.Component });
-BooleanToggleInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: BooleanToggleInputComponent, selector: "boolean-toggle-input", inputs: { entity: "entity", key: "key", getValidationErrorMessage: "getValidationErrorMessage" }, outputs: { inputChangeEvent: "inputChangeEvent" }, 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$2.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4$2.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.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.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i3.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.ɵ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\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"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { entity: [{
-                type: Input
-            }], key: [{
-                type: Input
-            }], getValidationErrorMessage: [{
-                type: Input
-            }], inputChangeEvent: [{
-                type: Output
-            }] } });
+            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 {
-    constructor() {
-        this.inputChangeEvent = new EventEmitter();
-    }
-    ngOnInit() {
-        this.metadata = EntityUtilities.getPropertyMetadata(this.entity, this.key, DecoratorTypes.BOOLEAN_DROPDOWN);
-    }
-    emitChange() {
-        this.inputChangeEvent.emit();
-    }
+class BooleanDropdownInputComponent extends NgxMatEntityBaseInputComponent {
 }
-BooleanDropdownInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BooleanDropdownInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BooleanDropdownInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: BooleanDropdownInputComponent, selector: "boolean-dropdown-input", inputs: { entity: "entity", key: "key", getValidationErrorMessage: "getValidationErrorMessage" }, outputs: { inputChangeEvent: "inputChangeEvent" }, 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$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i1$1.MatLabel, selector: "mat-label" }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.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.ɵ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\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"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { entity: [{
-                type: Input
-            }], key: [{
-                type: Input
-            }], getValidationErrorMessage: [{
-                type: Input
-            }], inputChangeEvent: [{
-                type: Output
-            }] } });
+            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 {
-    constructor() {
-        this.inputChangeEvent = new EventEmitter();
-    }
-    ngOnInit() {
-        this.metadata = EntityUtilities.getPropertyMetadata(this.entity, this.key, DecoratorTypes.NUMBER);
-    }
-    emitChange() {
-        this.inputChangeEvent.emit();
-    }
+class NumberInputComponent extends NgxMatEntityBaseInputComponent {
 }
-NumberInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NumberInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NumberInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NumberInputComponent, selector: "number-input", inputs: { entity: "entity", key: "key", getValidationErrorMessage: "getValidationErrorMessage" }, outputs: { inputChangeEvent: "inputChangeEvent" }, 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$2.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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i3.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { type: i3.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.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.ɵ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)]=\"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"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { entity: [{
-                type: Input
-            }], key: [{
-                type: Input
-            }], getValidationErrorMessage: [{
-                type: Input
-            }], inputChangeEvent: [{
-                type: Output
-            }] } });
+            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 {
-    constructor() {
-        this.inputChangeEvent = new EventEmitter();
-    }
-    ngOnInit() {
-        this.metadata = EntityUtilities.getPropertyMetadata(this.entity, this.key, DecoratorTypes.NUMBER_DROPDOWN);
-    }
-    emitChange() {
-        this.inputChangeEvent.emit();
-    }
+class NumberDropdownInputComponent extends NgxMatEntityBaseInputComponent {
 }
-NumberDropdownInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NumberDropdownInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NumberDropdownInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NumberDropdownInputComponent, selector: "number-dropdown-input", inputs: { entity: "entity", key: "key", getValidationErrorMessage: "getValidationErrorMessage" }, outputs: { inputChangeEvent: "inputChangeEvent" }, 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$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i1$1.MatLabel, selector: "mat-label" }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }] });
+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)]=\"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"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { entity: [{
-                type: Input
-            }], key: [{
-                type: Input
-            }], getValidationErrorMessage: [{
-                type: Input
-            }], inputChangeEvent: [{
-                type: Output
-            }] } });
+            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.
  */
-class ArrayTable {
+class ArrayTableComponent extends NgxMatEntityBaseInputComponent {
     constructor(matDialog) {
+        super();
         this.matDialog = matDialog;
         this.input = undefined;
         this.dataSource = new MatTableDataSource();
         this.selection = new SelectionModel(true, []);
     }
-    init() {
-        this.metadata = EntityUtilities.getPropertyMetadata(this.entity, this.key);
-        if (this.entity[this.key] == null) {
-            this.entity[this.key] = [];
-        }
-        this.arrayValues = this.entity[this.key];
+    ngOnInit() {
+        var _a;
+        super.ngOnInit();
+        this.propertyValue = (_a = this.propertyValue) !== null && _a !== void 0 ? _a : [];
         const givenDisplayColumns = this.metadata.displayColumns.map((v) => v.displayName);
         if (givenDisplayColumns.find(s => s === 'select')) {
             throw new Error(`The name "select" for a display column is reserved.
                 Please choose a different name.`);
         }
-        this.displayedColumns = ['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.
@@ -2052,9 +2120,10 @@ class ArrayTable {
      * 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,
@@ -2062,8 +2131,8 @@ class ArrayTable {
                 });
                 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();
         }
@@ -2078,55 +2147,48 @@ class ArrayTable {
      * 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();
     }
 }
+ArrayTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ArrayTableComponent, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+ArrayTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ArrayTableComponent, selector: "ngx-mat-entity-array-table", usesInheritance: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ArrayTableComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngx-mat-entity-array-table',
+                    template: ''
+                }]
+        }], ctorParameters: function () { return [{ type: i1.MatDialog }]; } });
 
 /* eslint-disable jsdoc/require-jsdoc */
-class ArrayDateInputComponent extends ArrayTable {
-    constructor(dialog) {
-        super(dialog);
-        this.dialog = dialog;
+class ArrayDateInputComponent extends ArrayTableComponent {
+    constructor() {
+        super(...arguments);
         this.DateUtilities = DateUtilities;
-        this.inputChangeEvent = new EventEmitter();
-    }
-    ngOnInit() {
-        this.init();
-    }
-    emitChange() {
-        this.inputChangeEvent.emit();
     }
 }
-ArrayDateInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ArrayDateInputComponent, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-ArrayDateInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ArrayDateInputComponent, selector: "array-date-input", inputs: { entity: "entity", key: "key", getValidationErrorMessage: "getValidationErrorMessage" }, outputs: { inputChangeEvent: "inputChangeEvent" }, 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: i3$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i3$3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { type: i4.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: i5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i6.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: i5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }], directives: [{ type: i1$1.MatLabel, selector: "mat-label" }, { type: i4$2.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.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$3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.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: i5.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i5.MatCellDef, selector: "[matCellDef]" }, { type: i5.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+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    <div style=\"padding-bottom: 10px;\">\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}.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"] }]
-        }], ctorParameters: function () { return [{ type: i1.MatDialog }]; }, propDecorators: { entity: [{
-                type: Input
-            }], key: [{
-                type: Input
-            }], getValidationErrorMessage: [{
-                type: Input
-            }], inputChangeEvent: [{
-                type: Output
-            }] } });
+            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    <div style=\"padding-bottom: 10px;\">\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}.array-error{display:flex;align-items:center;justify-content:center;margin-top:-25.8px;border:1px solid #E0E0E0;background-color:#f8d3d7;color:#721c24;height:25.8px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}\n"] }]
+        }] });
 
 /* eslint-disable jsdoc/require-jsdoc */
-class ArrayDateTimeInputComponent extends ArrayTable {
-    constructor(dialog) {
-        super(dialog);
-        this.dialog = dialog;
+class ArrayDateTimeInputComponent extends ArrayTableComponent {
+    constructor() {
+        super(...arguments);
         this.DateUtilities = DateUtilities;
-        this.inputChangeEvent = new EventEmitter();
     }
     ngOnInit() {
-        this.init();
+        super.ngOnInit();
         this.time = DateUtilities.getTimeFromDate(this.entity[this.key]);
         this.timeDropdownValues = this.metadata.times;
         if (this.entity[this.key] != null) {
@@ -2147,35 +2209,22 @@ class ArrayDateTimeInputComponent extends ArrayTable {
             this.add();
         }
     }
-    emitChange() {
-        this.inputChangeEvent.emit();
-    }
 }
-ArrayDateTimeInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ArrayDateTimeInputComponent, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-ArrayDateTimeInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ArrayDateTimeInputComponent, selector: "array-date-time-input", inputs: { entity: "entity", key: "key", getValidationErrorMessage: "getValidationErrorMessage" }, outputs: { inputChangeEvent: "inputChangeEvent" }, 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: i3$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i3$3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { type: i2$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i4.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: i5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i6.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: i5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }], directives: [{ type: i1$1.MatLabel, selector: "mat-label" }, { type: i4$2.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.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$3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i5.MatCellDef, selector: "[matCellDef]" }, { type: i5.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+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    <div style=\"padding-bottom: 10px;\">\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}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"] }]
-        }], ctorParameters: function () { return [{ type: i1.MatDialog }]; }, propDecorators: { entity: [{
-                type: Input
-            }], key: [{
-                type: Input
-            }], getValidationErrorMessage: [{
-                type: Input
-            }], inputChangeEvent: [{
-                type: Output
-            }] } });
+            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    <div style=\"padding-bottom: 10px;\">\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}mat-table{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:25px}.mat-column-select{flex:0 0 75px}.array-error{display:flex;align-items:center;justify-content:center;margin-top:-25.8px;border:1px solid #E0E0E0;background-color:#f8d3d7;color:#721c24;height:25.8px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.date-time{display:flex;align-items:baseline}.date-time .timepicker{margin-left:10px}\n"] }]
+        }] });
 
 /* eslint-disable jsdoc/require-jsdoc */
-class ArrayDateRangeInputComponent extends ArrayTable {
-    constructor(dialog) {
-        super(dialog);
-        this.dialog = dialog;
+class ArrayDateRangeInputComponent extends ArrayTableComponent {
+    constructor() {
+        super(...arguments);
         this.DateUtilities = DateUtilities;
-        this.inputChangeEvent = new EventEmitter();
     }
     ngOnInit() {
-        this.init();
+        super.ngOnInit();
         this.input = {
             start: undefined,
             end: undefined,
@@ -2199,40 +2248,20 @@ class ArrayDateRangeInputComponent extends ArrayTable {
         this.dateRangeStart = undefined;
         this.dateRangeEnd = undefined;
     }
-    emitChange() {
-        this.inputChangeEvent.emit();
-    }
 }
-ArrayDateRangeInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ArrayDateRangeInputComponent, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-ArrayDateRangeInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ArrayDateRangeInputComponent, selector: "array-date-range-input", inputs: { entity: "entity", key: "key", metadata: "metadata", getValidationErrorMessage: "getValidationErrorMessage" }, outputs: { inputChangeEvent: "inputChangeEvent" }, 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: i3$3.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { type: i3$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i3$3.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { type: i4.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: i5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i6.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: i5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }], directives: [{ type: i1$1.MatLabel, selector: "mat-label" }, { type: i3$3.MatStartDate, selector: "input[matStartDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { type: i3.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i3$3.MatEndDate, selector: "input[matEndDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { type: i1$1.MatSuffix, selector: "[matSuffix]" }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }, { type: i5.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i5.MatCellDef, selector: "[matCellDef]" }, { type: i5.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }] });
+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    <div style=\"padding-bottom: 10px;\">\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}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"] }]
-        }], ctorParameters: function () { return [{ type: i1.MatDialog }]; }, propDecorators: { entity: [{
-                type: Input
-            }], key: [{
-                type: Input
-            }], metadata: [{
-                type: Input
-            }], getValidationErrorMessage: [{
-                type: Input
-            }], inputChangeEvent: [{
-                type: Output
-            }] } });
+            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    <div style=\"padding-bottom: 10px;\">\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}mat-table{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:25px}.mat-column-select{flex:0 0 75px}.array-error{display:flex;align-items:center;justify-content:center;margin-top:-25.8px;border:1px solid #E0E0E0;background-color:#f8d3d7;color:#721c24;height:25.8px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}\n"] }]
+        }] });
 
 /* eslint-disable jsdoc/require-jsdoc */
-class ArrayStringChipsInputComponent {
+class ArrayStringChipsInputComponent extends NgxMatEntityBaseInputComponent {
     constructor() {
-        this.inputChangeEvent = new EventEmitter();
+        super(...arguments);
         this.chipsInput = '';
     }
-    ngOnInit() {
-        var _a;
-        this.metadata = EntityUtilities.getPropertyMetadata(this.entity, this.key, DecoratorTypes.ARRAY_STRING_CHIPS);
-        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.
@@ -2245,7 +2274,7 @@ class ArrayStringChipsInputComponent {
      * @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) {
@@ -2257,15 +2286,10 @@ class ArrayStringChipsInputComponent {
             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.
@@ -2279,11 +2303,8 @@ class ArrayStringChipsInputComponent {
      */
     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.
@@ -2292,6 +2313,7 @@ class ArrayStringChipsInputComponent {
      * @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;
@@ -2302,47 +2324,27 @@ class ArrayStringChipsInputComponent {
         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 = '';
     }
-    emitChange() {
-        this.inputChangeEvent.emit();
-    }
 }
-ArrayStringChipsInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ArrayStringChipsInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ArrayStringChipsInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ArrayStringChipsInputComponent, selector: "array-string-chips-input", inputs: { entity: "entity", key: "key", getValidationErrorMessage: "getValidationErrorMessage" }, outputs: { inputChangeEvent: "inputChangeEvent" }, 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$3.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$3.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$3.MatChipRemove, selector: "[matChipRemove]" }, { type: i4$2.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$3.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { type: i3.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.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }] });
+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)]=\"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"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { entity: [{
-                type: Input
-            }], key: [{
-                type: Input
-            }], getValidationErrorMessage: [{
-                type: Input
-            }], inputChangeEvent: [{
-                type: Output
-            }] } });
+            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 */
-class ArrayStringAutocompleteChipsComponent {
+class ArrayStringAutocompleteChipsComponent extends NgxMatEntityBaseInputComponent {
     constructor() {
-        this.inputChangeEvent = new EventEmitter();
+        super(...arguments);
         this.chipsInput = '';
     }
     ngOnInit() {
-        var _a;
-        this.metadata = EntityUtilities.getPropertyMetadata(this.entity, this.key, DecoratorTypes.ARRAY_STRING_AUTOCOMPLETE_CHIPS);
+        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.
@@ -2356,7 +2358,7 @@ class ArrayStringAutocompleteChipsComponent {
      * @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) {
@@ -2368,15 +2370,10 @@ class ArrayStringAutocompleteChipsComponent {
             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.
@@ -2390,11 +2387,8 @@ class ArrayStringAutocompleteChipsComponent {
      */
     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.
@@ -2403,6 +2397,7 @@ class ArrayStringAutocompleteChipsComponent {
      * @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;
@@ -2413,13 +2408,8 @@ class ArrayStringAutocompleteChipsComponent {
         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 = '';
     }
     /**
@@ -2433,53 +2423,27 @@ class ArrayStringAutocompleteChipsComponent {
             this.filteredAutocompleteStrings = this.metadata.autocompleteValues.filter(s => s.toLowerCase().includes(filterValue));
         }
     }
-    emitChange() {
-        this.inputChangeEvent.emit();
-    }
 }
-ArrayStringAutocompleteChipsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ArrayStringAutocompleteChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ArrayStringAutocompleteChipsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ArrayStringAutocompleteChipsComponent, selector: "array-string-autocomplete-chips", inputs: { entity: "entity", key: "key", getValidationErrorMessage: "getValidationErrorMessage" }, outputs: { inputChangeEvent: "inputChangeEvent" }, 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$3.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: i2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i1$1.MatLabel, selector: "mat-label" }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$3.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$3.MatChipRemove, selector: "[matChipRemove]" }, { type: i4$2.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$3.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { type: i2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i3.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.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }] });
+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)]=\"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"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { entity: [{
-                type: Input
-            }], key: [{
-                type: Input
-            }], getValidationErrorMessage: [{
-                type: Input
-            }], inputChangeEvent: [{
-                type: Output
-            }] } });
+            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 */
-class DateInputComponent {
+class DateInputComponent extends NgxMatEntityBaseInputComponent {
     constructor() {
+        super(...arguments);
         this.DateUtilities = DateUtilities;
-        this.inputChangeEvent = new EventEmitter();
-        this.defaultDateFilter = () => true;
-    }
-    ngOnInit() {
-        this.metadata = EntityUtilities.getPropertyMetadata(this.entity, this.key, DecoratorTypes.DATE);
-    }
-    emitChange() {
-        this.inputChangeEvent.emit();
     }
 }
-DateInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DateInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DateInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DateInputComponent, selector: "date-input", inputs: { entity: "entity", key: "key", getValidationErrorMessage: "getValidationErrorMessage" }, outputs: { inputChangeEvent: "inputChangeEvent" }, 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: i3$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i3$3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }], directives: [{ type: i1$1.MatLabel, selector: "mat-label" }, { type: i4$2.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.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$3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.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.ɵ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)]=\"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"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { entity: [{
-                type: Input
-            }], key: [{
-                type: Input
-            }], getValidationErrorMessage: [{
-                type: Input
-            }], inputChangeEvent: [{
-                type: Output
-            }] } });
+            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 */
 const EMPTY_DATERANGE = {
@@ -2487,15 +2451,15 @@ const EMPTY_DATERANGE = {
     end: undefined,
     values: undefined
 };
-class DateRangeInputComponent {
+class DateRangeInputComponent extends NgxMatEntityBaseInputComponent {
     constructor() {
-        this.inputChangeEvent = new EventEmitter();
-        this.defaultDateFilter = () => true;
+        super(...arguments);
+        this.defaultDateFilter = DateUtilities.defaultDateFilter;
     }
     ngOnInit() {
         var _a;
-        this.metadata = EntityUtilities.getPropertyMetadata(this.entity, this.key, DecoratorTypes.DATE_RANGE);
-        this.dateRange = (_a = LodashUtilities.cloneDeep(this.entity[this.key])) !== null && _a !== void 0 ? _a : EMPTY_DATERANGE;
+        super.ngOnInit();
+        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();
@@ -2513,41 +2477,30 @@ class DateRangeInputComponent {
         else {
             this.dateRange.values = undefined;
         }
-        this.entity[this.key] = this.dateRange;
+        this.propertyValue = this.dateRange;
         this.emitChange();
     }
-    emitChange() {
-        this.inputChangeEvent.emit();
-    }
 }
-DateRangeInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DateRangeInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DateRangeInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DateRangeInputComponent, selector: "date-range-input", inputs: { entity: "entity", key: "key", getValidationErrorMessage: "getValidationErrorMessage" }, outputs: { inputChangeEvent: "inputChangeEvent" }, 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: i3$3.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { type: i3$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i3$3.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }], directives: [{ type: i1$1.MatLabel, selector: "mat-label" }, { type: i3$3.MatStartDate, selector: "input[matStartDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { type: i3.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i3$3.MatEndDate, selector: "input[matEndDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { type: i1$1.MatSuffix, selector: "[matSuffix]" }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }] });
+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\" [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"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { entity: [{
-                type: Input
-            }], key: [{
-                type: Input
-            }], getValidationErrorMessage: [{
-                type: Input
-            }], inputChangeEvent: [{
-                type: Output
-            }] } });
+            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 */
-class DateTimeInputComponent {
+class DateTimeInputComponent extends NgxMatEntityBaseInputComponent {
     constructor() {
+        super(...arguments);
         this.DateUtilities = DateUtilities;
-        this.inputChangeEvent = new EventEmitter();
         this.defaultDateFilter = () => true;
     }
     ngOnInit() {
-        this.metadata = EntityUtilities.getPropertyMetadata(this.entity, this.key, DecoratorTypes.DATE_TIME);
-        this.time = DateUtilities.getTimeFromDate(this.entity[this.key]);
+        super.ngOnInit();
+        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);
         }
     }
     /**
@@ -2558,45 +2511,35 @@ class DateTimeInputComponent {
      * @returns Whether or not the time objects are the same.
      */
     compareTimes(time1, time2) {
-        return 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();
     }
-    emitChange() {
-        this.inputChangeEvent.emit();
-    }
 }
-DateTimeInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DateTimeInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DateTimeInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DateTimeInputComponent, selector: "date-time-input", inputs: { entity: "entity", key: "key", getValidationErrorMessage: "getValidationErrorMessage" }, outputs: { inputChangeEvent: "inputChangeEvent" }, 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: i3$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i3$3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { type: i2$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i1$1.MatLabel, selector: "mat-label" }, { type: i4$2.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.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$3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+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)]=\"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"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { entity: [{
-                type: Input
-            }], key: [{
-                type: Input
-            }], getValidationErrorMessage: [{
-                type: Input
-            }], inputChangeEvent: [{
-                type: Output
-            }] } });
+            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"] }]
+        }] });
 
 /**
  * Adds drag and drop functionality to an element.
@@ -2711,7 +2654,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,
@@ -2724,7 +2667,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,
@@ -2796,77 +2739,56 @@ class FileInputComponent {
     }
 }
 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$3.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: i4.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$3.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$3.MatChipRemove, selector: "[matChipRemove]" }, { type: i2$3.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$1.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: { entity: "entity", key: "key", 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 [class.readOnly]=\"isReadOnly\" floatLabel=\"always\" (click)=\"!isReadOnly ? fileInput.click() : null\">\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        [disabled]=\"isReadOnly\"\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 [disabled]=\"isReadOnly\">\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=\"dropdown\" dragDrop (files)=\"setFile($event)\">\n    <i class=\"fas fa-file-arrow-up\"></i>\n</div>", styles: ["mat-form-field{width:100%}.readOnly:hover,.readOnly:hover input:hover{cursor:default}input:hover,mat-form-field:hover{cursor:pointer}.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$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: 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: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }]
+            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 [class.readOnly]=\"isReadOnly\" floatLabel=\"always\" (click)=\"!isReadOnly ? fileInput.click() : null\">\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        [disabled]=\"isReadOnly\"\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 [disabled]=\"isReadOnly\">\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=\"dropdown\" dragDrop (files)=\"setFile($event)\">\n    <i class=\"fas fa-file-arrow-up\"></i>\n</div>", styles: ["mat-form-field{width:100%}.readOnly:hover,.readOnly:hover input:hover{cursor:default}input:hover,mat-form-field:hover{cursor:pointer}.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: [{
                 type: Input
             }], key: [{
                 type: Input
             }], getValidationErrorMessage: [{
                 type: Input
+            }], isReadOnly: [{
+                type: Input
             }], fileDataChangeEvent: [{
                 type: Output
             }] } });
 
-class FileDefaultInputComponent {
+class FileDefaultInputComponent extends NgxMatEntityBaseInputComponent {
     constructor() {
+        super(...arguments);
         this.FileUtilities = FileUtilities;
-        this.inputChangeEvent = new EventEmitter();
-    }
-    ngOnInit() {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.metadata = EntityUtilities.getPropertyMetadata(this.entity, this.key, DecoratorTypes.FILE_DEFAULT);
-        });
     }
     refreshFileData(fileData) {
         return __awaiter(this, void 0, void 0, function* () {
-            this.entity[this.key] = fileData;
+            this.propertyValue = fileData;
             this.emitChange();
         });
     }
-    emitChange() {
-        this.inputChangeEvent.emit();
-    }
 }
-FileDefaultInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileDefaultInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FileDefaultInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FileDefaultInputComponent, selector: "file-default-input", inputs: { entity: "entity", key: "key", getValidationErrorMessage: "getValidationErrorMessage" }, outputs: { inputChangeEvent: "inputChangeEvent" }, 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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+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 [class.file-input]=\"metadata.dragAndDrop\" [class.mat-elevation-z8]=\"metadata.dragAndDrop\">\n    <file-input\n        (fileDataChangeEvent)=\"refreshFileData($event)\"\n        [entity]=\"entity\"\n        [key]=\"key\"\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: ["entity", "key", "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"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { entity: [{
-                type: Input
-            }], key: [{
-                type: Input
-            }], getValidationErrorMessage: [{
-                type: Input
-            }], inputChangeEvent: [{
-                type: Output
-            }] } });
+            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        [entity]=\"entity\"\n        [key]=\"key\"\n        [getValidationErrorMessage]=\"getValidationErrorMessage\"\n        [isReadOnly]=\"isReadOnly\"\n    >\n    </file-input>\n</div>", styles: [".file-input{margin-top:15px;margin-bottom:15px;padding:15px;border-radius:5px}\n"] }]
+        }] });
 
 // eslint-disable-next-line max-len
 const placeholder = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAAAAMgCAMAAAAEPmswAAAANlBMVEXx8/XCy9LFztXu8PPs7/Lp7e/W3OHL0tnZ3+PN1NrS2d7i5urn6u7f5OjI0Nfc4ebP1tzk6excnoRZAAAXh0lEQVR42uzUAQ0AAAzDoN+/6eloAiK4B4gQFpAhLCBDWECGsIAMYQEZwgIyhAVkCAvIEBaQISwgQ1hAhrCADGEBGcICMoQFZAgLyBAWkCEsIENYQIawgAxhARnCAjKEBWQIC8gQFpAhLCBDWECGsIAMYQEZwgIyhAVkCAvIEBaQISwgQ1hAhrCADGEBGcICMoQFZAgLyBAWkCEsIENYQIawgAxhARnCAjKEBWQIC8gQFpAhLGDs1AEJAAAAgKD/r9sR6Ag3hAVsCAvYEBawISxgQ1jAhrCADWEBG8ICNoQFbAgL2BAWsCEsYENYwIawgA1hARvCAjaEBWwIC9gQFrAhLGBDWMCGsIANYQEbwgI2hAVsCAvYEBawISxgQ1jAhrCADWEBG8ICNoQFbAgL2BAWsCEsYENYwIawgA1hARvCAjaEBWwIC9gQFrAhLGBDWMCGsIANYQEbwgI2hAVsCAvYEBbETh2QAAAAAAj6/7odgY6QDWEBG8ICNoQFbAgL2BAWsCEsYENYwIawgA1hARvCAjaEBWwIC9gQFrAhLGBDWMCGsIANYQEbwgI2hAVsCAvYEBawISxgQ1jAhrCADWEBG8ICNoQFbAgL2BAWsCEsYENYwIawgA1hARvCAjaEBWwIC9gQFrAhLGBDWMCGsIANYQEbwgI2hAVsCAvYEBawISxgQ1jAhrCADWEBG8ICNoRF7NQBCQAAAICg/6/bEegIYUNYwIawgA1hARvCAjaEBWwIC9gQFrAhLGBDWMCGsIANYQEbwgI2hAVsCAvYEBawISxgQ1jAhrCADWEBG8ICNoQFbAgL2BAWsCEsYENYwIawgA1hARvCAjaEBWwIC9gQFrAhLGBDWMCGsIANYQEbwgI2hAVsCAvYEBawISxgQ1jAhrCADWEBG8ICNoQFbAgL2BAWsCEsYENYwIawgA1hxc6dJtcKAgEURgREwGn/m32Vd1Op/Ih3cO72fIs4BU0rADEIFgAxCBYAMQgWADEIFgAxCBbwm+3bFOKQ8zSV4r13zvky5a4bYgxjYyuch2ABD7ZJMRdnXnIlDyE1FY5HsADbhmFy5lM+x7GvcCSChXtrQufNCnXpQlvhIAQLt2XHONVmE2VIzLaOQLBwT230ZlsuBy6IeyNYuB+bOmd24TpOWrsiWLiZJhazKz8w09oNwcKd9NGbA9SZg9Y+CBZuw4ZijlMiE63tESzcg02TOZqnWVsjWLiDpqvNKXxkI35LBAv6pWJO5APzrM0QLChnozNnm5jBb4RgQbU2m0uoO3YdtkCwoFjy5jp85Ji1GsGCWpfK1X95rLAKwYJS4XK54pi1HsGCSuH8SfucjkWH5QgWFLpwrr6UVGEZggV10rVz9cVxM1yGYEGZthgJ6oHPdhYgWFClv8jeFcOsfRAsKGIHI8rENumHCBb0iLWRhvn7ZwgWtGgvuXj1kidZHyBY0MF2RiqS9T6CBRWCvNsgyVqAYEGBRsYqA8lajWBBPGlvg38rvBi+gWBBuvb6i+3vmdjLeolgQTYdx6tvme33FwgWRBO6yzBr4BvDpwgWJNN0vHqo+Sz6GYIFuRplx6sHx4PhPIIFsaJRigfDWQQLQvXid6+Yvn+OYEGmUfRq+2uMsv5EsCCSvmk7o6x3ECwIpPo6yCLpEwQL8iTl10G2smYRLIij/zrIvXAOwYIwvcrlq1kT74W/ESzIMmr51Plddazwg2BBlGDux7NH+oNgQRK5/0Fm+L4JgvWPvbvRSRiGAjBaBoqK+PP+L2s0xGSj3QiQ9I57zkN86brblvVItn1l8/2cYLEar1mmGWoOFlm/BIu1yLh9ZZE1IVisRNLtK4usEcFiFYbvwtYiS7BYg7zb7WPfFlmCRXj7bNOiFlkNgkV8j373lZ2siwkW4SX/PTi1+9pkJljEluhyhgsdMy+yBIvQDoWpXeLThYJFYMYZ6vJe4SBYxDWkuAv5Gu9Z78kSLMIajF8ZcBgRLOL6MH5l731MsAhrb/zK3vuEYBFV6ttk7L3XCRZBvRUcLpwSLGLSK3PvFYJFSHrls7BGsIhIr3wWVgkWATnu7G9hnWARj175LGwQLMLRK5+FLYJFNHp1jd1+k4NgEYpeXel5k4JgEYleXe24yUCwCESvXDkzR7CIxPzVTbYJxt4FizD0ynzDPMEiDr3yCtgCwSKMr8Ltnh58I0uwiOG1cA/bxz6oI1iE4L4+E1nLBIsY3IdsIusCgkUI3pu4q/fH3XoXLPob9OqXo4VLBIsAvD944tnCBYJFAN53PjFDukCw6O9Q+GPrfYlg0d2x8M+tfrMEi94+CyOm3tsEi65cKDNl6n2OYNGTA89Vpt5bBIuOHCCs8rOwSbDoaW9gtMbPwhbBohsD7k1+FjYIFv0MBkbb/CysESx6MTA6z8nCCsGiEwNYS7xOcU6w6OWlsMB4ww9794LdJgyEUXgwAsfFL/a/2Z4+T2zjWCMgnl/cbwttbxppNNwjWHgLBrByMN5wj2Ct4HztL+OxS621qTuOp/5a06HnItgw+v0uTRUI1qL2/dDao3b8qO+RRDkGGt5haGpAsJZzPbX2XDvUc/I5ExuwsrE4+QbBWsz+I9kr6VLR/XI5Nsq8SVdBsQjWIg6D5Rn5bxYbGpwYyPqPYC3iMFq+4+aTxSeevdg38xfBWsB5MJ+j/s+5Oc5cEDoxQvoPwZrvozW3SwWHCWX4RM67iX9Oh2DNc+isRFL/QVduNBRg6P0XgjVTv/nJYx9eEAYgXSyCNcNu2PpUjBMXhCEo/7AkWKVm78tM8jc2XqxEDkL4mQ7BKnZot35j48QFYRi6z3QIVqlru/kbGx8uCAORLRbBKvSD808nVoxGorrpnWCVuTIV48TKvlhEL30IVoEl1zlt5xyLlX2xaBaLYJU4J153+bCyLx7J5Q0Ey23hw+Ok+NfGiwP3iBSLRbAKDLaksdkCDtwDSnrLuwmWX29mDB57MOEelF6xCJbTGocx9R9jMeEelNxKP4Ll1tlvHGPl4psTgbVixSJYXr39wS+FuVgpE5lYsQiW0661FcgdJTiwUiY2rd8KCZbTyf7ipjAPO9yjk/o/FsHy2dstBt5fYEVDfErFIlg+g63j2FSLidHwhJ5bECyXs33GaMNLfDRVgk6xCJbLyT7jFOsVJkZFyBSLYHnsbD1C5wgOe4MElWIRLI/e7rFn+ws8eRYiUiyC5dHZelJTIZ4869C4KyRYDnu7x2TDF9gxqkWiWATL4WJrOjW14cmzFoViESyHZGtqm8rw5FmNwCsdgpXvbI8YxXqGJ8+C4heLYOXr7RE7G57gAEtS+I1+BCvfyaYwOzqFAyxR0YtFsPIle8Qh1iQOsGQFLxbByrazCQy7T2ICS1fsb+kQrGwHe4rPQN/iCaGy0MUiWNl6m8Kp+yN2YGmL/E1ogpXtYtMYHb3HDixxgYtFsLIN9gRb/G6xxF1e3AtrgpXtaM/w/vkzlrhXYGiCIljZOntAsKbsOMDSF7VYBCtbsrVV8ofBk5waBD1QreTfyPoIVh6e5NQi5kbJOv6NfAtbX9zLmVw8yanHT/buBDt1GIbCsJwRCOP+N/t62vNaphLbSZEs/98O2gOXyJFkk102BFYkAisGIzmeDMEeAitaK09REl5hJMcVg6MXHr4jb8EZVgRGcpyxl1gOviPv0stzrGv4MdLR4Iu5pZIEViQaR+cxkuOOucu/CKxIjObMYiTHIWsXUxBY0TbynPtevUiM5LhkbKEfgRWJ9TIz6GhwytZ6LAIrEgv8ZtDR4JWpZTMEViRWJM/ZCXyytGyGwIrFJRSvsGTUM0OHqwRWLK75eoUdDa7ZGYQmsOLt5CnO3EOgxd05M59NAisWV9W/MgpcszIITWAl6OUeR1ifaHH37xxMILASnOSBz5NNY/8ZGGBkSIfASjDKDZ8/YelY2lcFG0M6BFaKXh4w+UyLeyU6Cw2kBFaKQW75fHOc7CCogYUhHQIrRSN3aHMPtLjXw0CnIIGV5CT3vN8DN4eCsCb6L4YIrCRHuUYTVgi0uFdFvYGUwEpzkP/cPWxnocW9MkPQRGClGuUKPQ1sca/OOSgisJId5BsnWB/2gqqoNpASWMmaVv6ArTW00biXvkLtMaghsNIN8snXUWYeZp6rpNiORWBl2Mva+lAqZp5rtA9aCKxk36s1aWlg5rlWU1BCYOXYyQcKQmae63UKOgisLAcRoQWLgrBiQ1BBYGVpem8z8BkoCKt2DhoIrDzHztmWoXQUhHXT+dwSWJnGtvoDd2ae66ZSGRBYubbVX/ZMQVg5jXYsAivbueyzSyN/Pwo2hbcjsPJt25qfrygIodDcQGAtMHZlj5EuwFZkqBQIBNYSx16W6Ip9P0hBCJ3mBgJrkeYg+S7F9l9REEKpuYHAWmiobx4nBApCKDU3EFhLjb3k6As+vuKaHGhtbiCwlhvayh6vKAihdZEOgbWCZpI0l2L3i36ZBFD59SWwVjFOKXFVdDUYKAih101IYK0iIbKm0uMqNFyTA615WAJrNcdNL3O6TcGtV18oCKH4qpDAWtP21MnvukOxdw/+oCCE5qtCAmtlx2Hq5FE7DQ6erUKgIITqHDSB9Qea7XCaLvu+a7u+30+nYVtwT/stCkKovioksJCAgvAfe3eU6ygMBFG0GhtCSAxh/5udUWby8Z4COGCgI92ziJLLuBuc+6mQwEI+nozi9KlCAgu5KIQ4/VMhgYVMFEKc/6mQwEIeCiEcTBUSWMhDIYSDBaQEFrJQCOFhASmBhRwUQiwLve2LwEIetozCxb8KCSxk4LcT8DGjQ2BhGYUQTmZ0CCwsoxDCyYwOgYVFFEJ4mdEhsLCEQgg3MzoEFpZQCPGJ0XZDYGERhRCfGWwvBBaWUAjh6OKdwMI8CiE+drF9EFhYQCGEp4t3AgtzKIRwdfFOYGEOhRCuLt4JLMy6CvBz8U5gYU5VC/Dz4p3AwpxBgKNVMwQWJlEI4W3VDIGFGRRC+Fo1Q2BhCoUQ7na8E1iYdBHga8c7gYUJFEL4u3gnsDClFeDs4p3AwjsUQrj8uarsCP21a4Z0G+sYQwiSQoixvo9paJvHpTI4RCFEAVcrSrar/tEMY9SCeL+1zaM3OEIhhMPFDbK9VF07Bn2kTs2V45YPFEJ4XNwg20PfpKgJOallONtdgL/FDbLSqi7V2qpOHUetU1AI8eR0cYOsqKq7BRVybzlpHY5CiH+cvh+VlVN1o8oKt4ar+CNRCPHi8/2orJRrCtpDTA/DISiE2EeyUmRFVG3UfgKZdQAKIX7y+H5UVkA/BP1GZn0vCiGeHP74S7bZJek9Mus7NQL+8vh+VLZRlXSckC6GnfUCnhyOQcu2aYOOVTc80CqOQoj33O0flW3RRR0vJN5nlUUhxAR3Y9Cy9aqb8nHM+g59EPDi7hpLtloXdCKOWYVQCDHP1Ri0LJOf49VL3Rm2ohBiga9rLFkeX8er/yLNcBsKIXI4+o2ObAU//38KA7OGJY0CfvM0Bi1bofd00cHTrLUohDja3TaSfe4R5crIC/gVKIR/2Lvb5NRhGArD54RvCC3sf7N3Op07UyhJ7PQHsvU+W4BxIvlIQbkw2/zkMrFH+em/V6MgRKlIbSy50hDzX82RVYeCEMUitbHkOh9hP/60ozAsRkGIGoHaWHKVQ7D21YORI6sCkVGUC9PGkqcFTV9xZP0RBSGqRWljyb+1/J/myKrAllG8w2bwavKEwGnReXdyWXMoCPF2o1eTi719eLDUlYGdOa1kVdCvo9eSH/RwXkmbI0fWSxSEiOHmleRnTcWvpmz3RoWwYRX0afVuLLnI0FyLg1jWMwpCxHH3OnKJocUn8Ej3/QcKQoRy9Cryt/7OK7rvDygIEcvJa8hf+jyvaGX91HpcBZ1Z18aS7W7PK0kjq9+XnAS8wcUryO75vKIutE1BiJD2rifb7ut+8NmGupCCEBEdXE3dn1eSdtSFFISIZze4lvxf10soqQsnDJH3BaF3V9dSivNK2rKR9KWrgPc5u5LcyfzgogsfBPvtJuB96hcmK08/luY7BSGi2bmOMk2YMazT8Rs02vTpKvKks/pzNPr+hdGam2soWXuDhAOfyUEodSM68oRTr//mTxIOvV0Bo2l3V5BfO/R6XvGS1dAnRZDC3uWU8fro02AJFsI4uJhSfkNlx3UhM88Io2JER0nzz+mvC/vK2KFtV5dSigAWL1nMPCOyswspbzwn80tW3z1KNKd4REeJH75j3ulCIu6IZXQZ+dlHnofvJusKhyTv0GjI0UXU20bkOpeUKVIi7ojn5BJKXixsM6ZIOw+toEllIzpKeEGYPUWa7zdGC64uIJob2XrvaS5V0JizlynLBCGb/Ug0ILbN4EXK23BP2ntP1qREQ+5eJPaNfNmmyb2zowFx7b1ENGO/JSkLcxb9aMXBC5S74Z6uLMxa9KMNOy8Qz95MkSx2NCC2q+cpfcM90zh0n3v60ZObZ4nLox/ufZeFQ/aXaMS3EHgXl0d5ysK8t8Box8VzRPo5zW1h6ltgNGPvGSL9nOW2kAYWmjC7zE80sJIsT+ahhEaMniZqhSR7/f6xdy+4iQNBEEDdQYEA4Xf/y+5ukk2AYAkFKXKX3ztEWe6p6THAoouXGjUYYM1j5YyPEn2saszgX2EWK2cMsGhk/KHCwb/CTYtjJfFRopVDjRj8K8yh9m4pMr0c67bBAGsG/QZXCGlmrPA++FcY9ZwyyJr5Hg462tZNA/GDLK960dCmvhNYMxhk2cNBR7cK7wJrBoOs3QANneobgZU/yLKHg6aWdU1gxQ+ynALT1qquCKz0jTMao/T1WlcE1l121ZbGKI291CWBdZ/XrqN3A3daW9UFgZX90KqBO7091wWBFb0jy8Cd7g51TmAld0g13OlvXWcEVnCHVMOdABe3oAVW8Ojdon4S7OqLwModvdtzRoZjfRJYsaN3K2UIcfZTKLBSR+8OCImxrf8EVmjr3QEhQTb1QWBljt4dEJJk8VTvBFbm6N1DSETZ1juBFblwxpsThNnUG4GVuHBGoYE0Hz+FAivwsNCNZ/Js6x+B9VPbmiqP0pNoWX8JrLjDwpVCA4nefgoFVtph4d5KZDKdqkpgPWCxrslRwCLWskpgPWRyNwufrHAn1mJfAivqsFBekexUAivqZqGCO9GWAutRpwkdFtrYR7bFXmDlPGXvSS/SnQRWTL1BXpHPNY6Uu9AuPDMDatEhd6HlFdCl3iCvgC71BnkFdLkLbd4OdKk3yCugS71BXgFd6g367UCTeoP7zsAPHeoe9l8BU7CrX7WyXxRoUm9Yu6gA/GHvDnMThmEwgNZpF9LQUrj/ZfdvmmBMDEabSu8dIkrsz85O4g3VeQW8ZhjjPv+lAk3pa9whzgA0J8ePxBmABs3xZqP2ILCTVe/2LgI7aRYm04NA1+1iFvog3Q503S6ahZ6DwJe2FycnaQbgLY4p/lnVHQS+abj07noFXGl2TsfsIHCrydS76xVwq8lCViquV8D7fRwU24HdyPGa0aQzsJrpFM8bFa+ANfUlnnS+dADrGmo8oZobBLYwLKf4k1NRagc2M9UUD0rZWxDYVj8/cmalOotdAS2Yyhi/OBcpBqAh/WXJY4or6ZwXhxXQpGE6znMpOZdlmY+TVyAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPDJHhwIAAAAAAD5vzaCqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqwBwcCAAAAAED+r42gqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqirswYEAAAAAAJD/ayOoqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqkp7cCAAAAAAIMjfepArAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgKcAnTNeiLeG1rEAAAAASUVORK5CYII=';
 
-class FileImageInputComponent {
+class FileImageInputComponent extends NgxMatEntityBaseInputComponent {
     constructor() {
+        super(...arguments);
         this.FileUtilities = FileUtilities;
-        this.inputChangeEvent = new EventEmitter();
         this.imageIndex = 0;
         this.placeHolder = placeholder;
     }
-    ngOnInit() {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.metadata = EntityUtilities.getPropertyMetadata(this.entity, this.key, DecoratorTypes.FILE_IMAGE);
-            // setting the image is done inside the refresh method
-        });
-    }
     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;
@@ -2875,7 +2797,7 @@ class FileImageInputComponent {
     }
     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++) {
@@ -2893,9 +2815,10 @@ class FileImageInputComponent {
     }
     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;
                 }
@@ -2908,19 +2831,24 @@ class FileImageInputComponent {
     }
     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) {
@@ -2929,24 +2857,36 @@ class FileImageInputComponent {
             this.imageIndex = index;
         });
     }
-    emitChange() {
-        this.inputChangeEvent.emit();
-    }
 }
-FileImageInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileImageInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FileImageInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FileImageInputComponent, selector: "file-image-input", inputs: { entity: "entity", key: "key", getValidationErrorMessage: "getValidationErrorMessage" }, outputs: { inputChangeEvent: "inputChangeEvent" }, 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: i4.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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+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\n        (fileDataChangeEvent)=\"refreshFileData($event)\"\n        [entity]=\"entity\"\n        [key]=\"key\"\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        [entity]=\"entity\"\n        [key]=\"key\"\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}.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:#00000042}.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", "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"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { entity: [{
-                type: Input
-            }], key: [{
-                type: Input
-            }], getValidationErrorMessage: [{
-                type: Input
-            }], inputChangeEvent: [{
-                type: Output
-            }] } });
+            args: [{ selector: 'file-image-input', template: "<div *ngIf=\"!metadata.dragAndDrop && !metadata.preview\">\n    <file-input\n        (fileDataChangeEvent)=\"refreshFileData($event)\"\n        [entity]=\"entity\"\n        [key]=\"key\"\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        [entity]=\"entity\"\n        [key]=\"key\"\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}.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:#00000042}.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"] }]
+        }] });
+
+/* eslint-disable jsdoc/require-jsdoc */
+class CustomInputComponent extends NgxMatEntityBaseInputComponent {
+    constructor(viewContainerRef) {
+        super();
+        this.viewContainerRef = viewContainerRef;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.component = this.viewContainerRef.createComponent(this.metadata.component);
+        this.component.instance.entity = this.entity;
+        this.component.instance.key = this.key;
+        this.component.instance.getValidationErrorMessage = this.getValidationErrorMessage;
+        this.component.instance.inputChangeEvent.subscribe(this.inputChangeEvent);
+        this.component.instance.isReadOnly = this.isReadOnly;
+    }
+}
+CustomInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CustomInputComponent, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
+CustomInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CustomInputComponent, selector: "custom-input", usesInheritance: true, ngImport: i0, template: "", styles: [""] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CustomInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'custom-input', template: "", styles: [""] }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; } });
 
 /**
  * The default input component. It gets the metadata of the property from the given @Input "entity" and @Input "propertyKey"
@@ -2977,7 +2917,7 @@ class NgxMatEntityInputComponent {
         return index;
     }
     ngOnInit() {
-        var _a;
+        var _a, _b;
         if (!this.entity) {
             throw new Error('Missing required Input data "entity"');
         }
@@ -2987,8 +2927,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();
         }
@@ -2997,7 +2938,6 @@ class NgxMatEntityInputComponent {
         }
     }
     initEntityArray() {
-        var _a;
         this.metadataEntityArray = this.metadata;
         if (this.internalEntity[this.internalPropertyKey] == null) {
             this.internalEntity[this.internalPropertyKey] = [];
@@ -3013,11 +2953,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,
@@ -3025,12 +2965,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.
@@ -3056,28 +2996,34 @@ class NgxMatEntityInputComponent {
      * or in a separate dialog if it is set to false.
      */
     addEntity() {
-        if (this.metadataEntityArray.createInline) {
-            if (!this.metadataEntityArray.allowDuplicates
-                && this.entityArrayValues.find((v) => __awaiter(this, void 0, void 0, function* () { return yield EntityUtilities.isEqual(this.arrayItem, v, this.metadata, this.metadataEntityArray.itemType); }))) {
-                this.dialog.open(NgxMatEntityConfirmDialogComponent, {
-                    data: this.metadataEntityArray.duplicatesErrorDialog,
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.metadataEntityArray.createInline) {
+                if (!this.metadataEntityArray.allowDuplicates) {
+                    for (const v of this.entityArrayValues) {
+                        if ((yield EntityUtilities.isEqual(this.arrayItem, v, this.metadata, this.metadataEntityArray.itemType))) {
+                            this.dialog.open(NgxMatEntityConfirmDialogComponent, {
+                                data: this.metadataEntityArray.duplicatesErrorDialog,
+                                autoFocus: false,
+                                restoreFocus: false
+                            });
+                            return;
+                        }
+                    }
+                }
+                this.entityArrayValues.push(LodashUtilities.cloneDeep(this.arrayItem));
+                this.dataSource.data = this.entityArrayValues;
+                EntityUtilities.resetChangesOnEntity(this.arrayItem, this.arrayItemPriorChanges);
+                this.checkIsArrayItemValid();
+                this.emitChange();
+            }
+            else {
+                this.addArrayItemDialogRef = this.dialog.open(this.addArrayItemDialog, {
+                    data: this.dialogData,
                     autoFocus: false,
                     restoreFocus: false
                 });
-                return;
             }
-            this.entityArrayValues.push(LodashUtilities.cloneDeep(this.arrayItem));
-            this.dataSource.data = this.entityArrayValues;
-            EntityUtilities.resetChangesOnEntity(this.arrayItem, this.arrayItemPriorChanges);
-            this.emitChange();
-        }
-        else {
-            this.addArrayItemDialogRef = this.dialog.open(this.addArrayItemDialog, {
-                data: this.dialogData,
-                autoFocus: false,
-                restoreFocus: false
-            });
-        }
+        });
     }
     /**
      * Adds the array item defined in the dialog.
@@ -3087,6 +3033,7 @@ class NgxMatEntityInputComponent {
         this.entityArrayValues.push(LodashUtilities.cloneDeep(this.arrayItem));
         this.dataSource.data = this.entityArrayValues;
         EntityUtilities.resetChangesOnEntity(this.arrayItem, this.arrayItemPriorChanges);
+        this.checkIsArrayItemValid();
         this.emitChange();
     }
     /**
@@ -3144,10 +3091,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    <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", inputs: ["entity", "key", "getValidationErrorMessage"], outputs: ["inputChangeEvent"] }, { type: StringTextboxInputComponent, selector: "string-textbox-input", inputs: ["entity", "key", "getValidationErrorMessage"], outputs: ["inputChangeEvent"] }, { type: StringAutocompleteInputComponent, selector: "string-autocomplete-input", inputs: ["entity", "key", "getValidationErrorMessage"], outputs: ["inputChangeEvent"] }, { type: StringDropdownInputComponent, selector: "string-dropdown-input", inputs: ["entity", "key", "getValidationErrorMessage"], outputs: ["inputChangeEvent"] }, { type: BooleanCheckboxInputComponent, selector: "boolean-checkbox-input", inputs: ["entity", "key", "getValidationErrorMessage"], outputs: ["inputChangeEvent"] }, { type: BooleanToggleInputComponent, selector: "boolean-toggle-input", inputs: ["entity", "key", "getValidationErrorMessage"], outputs: ["inputChangeEvent"] }, { type: BooleanDropdownInputComponent, selector: "boolean-dropdown-input", inputs: ["entity", "key", "getValidationErrorMessage"], outputs: ["inputChangeEvent"] }, { type: NumberInputComponent, selector: "number-input", inputs: ["entity", "key", "getValidationErrorMessage"], outputs: ["inputChangeEvent"] }, { type: NumberDropdownInputComponent, selector: "number-dropdown-input", inputs: ["entity", "key", "getValidationErrorMessage"], outputs: ["inputChangeEvent"] }, { type: NgxMatEntityInputComponent, selector: "ngx-mat-entity-input", inputs: ["entity", "propertyKey", "getValidationErrorMessage", "hideOmitForCreate", "hideOmitForEdit"], outputs: ["inputChangeEvent"] }, { type: i4.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: i5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i6.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: i5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { type: ArrayDateInputComponent, selector: "array-date-input", inputs: ["entity", "key", "getValidationErrorMessage"], outputs: ["inputChangeEvent"] }, { type: ArrayDateTimeInputComponent, selector: "array-date-time-input", inputs: ["entity", "key", "getValidationErrorMessage"], outputs: ["inputChangeEvent"] }, { type: ArrayDateRangeInputComponent, selector: "array-date-range-input", inputs: ["entity", "key", "metadata", "getValidationErrorMessage"], outputs: ["inputChangeEvent"] }, { type: ArrayStringChipsInputComponent, selector: "array-string-chips-input", inputs: ["entity", "key", "getValidationErrorMessage"], outputs: ["inputChangeEvent"] }, { type: ArrayStringAutocompleteChipsComponent, selector: "array-string-autocomplete-chips", inputs: ["entity", "key", "getValidationErrorMessage"], outputs: ["inputChangeEvent"] }, { type: DateInputComponent, selector: "date-input", inputs: ["entity", "key", "getValidationErrorMessage"], outputs: ["inputChangeEvent"] }, { type: DateRangeInputComponent, selector: "date-range-input", inputs: ["entity", "key", "getValidationErrorMessage"], outputs: ["inputChangeEvent"] }, { type: DateTimeInputComponent, selector: "date-time-input", inputs: ["entity", "key", "getValidationErrorMessage"], outputs: ["inputChangeEvent"] }, { type: FileDefaultInputComponent, selector: "file-default-input", inputs: ["entity", "key", "getValidationErrorMessage"], outputs: ["inputChangeEvent"] }, { type: FileImageInputComponent, selector: "file-image-input", inputs: ["entity", "key", "getValidationErrorMessage"], outputs: ["inputChangeEvent"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i5.MatCellDef, selector: "[matCellDef]" }, { type: i5.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { type: i4$1.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.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3.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\" 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 && !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 .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    <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\" 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 && !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 .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: [{
@@ -3158,6 +3105,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], hideOmitForEdit: [{
                 type: Input
+            }], isReadOnly: [{
+                type: Input
             }], inputChangeEvent: [{
                 type: Output
             }], addArrayItemDialog: [{
@@ -3172,11 +3121,13 @@ NgxMatEntityInputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0",
         StringTextboxInputComponent,
         StringAutocompleteInputComponent,
         StringDropdownInputComponent,
+        StringPasswordInputComponent,
         BooleanCheckboxInputComponent,
         BooleanToggleInputComponent,
         BooleanDropdownInputComponent,
         NumberInputComponent,
         NumberDropdownInputComponent,
+        NumberSliderInputComponent,
         ArrayStringChipsInputComponent,
         ArrayStringAutocompleteChipsComponent,
         DateInputComponent,
@@ -3189,6 +3140,7 @@ NgxMatEntityInputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0",
         FileImageInputComponent,
         FileDefaultInputComponent,
         DragDropDirective,
+        CustomInputComponent,
         NgxMatEntityInputComponent], imports: [CommonModule,
         MatInputModule,
         FormsModule,
@@ -3202,7 +3154,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,
@@ -3217,7 +3171,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,
@@ -3227,11 +3183,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,
@@ -3244,6 +3202,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         FileImageInputComponent,
                         FileDefaultInputComponent,
                         DragDropDirective,
+                        CustomInputComponent,
                         NgxMatEntityInputComponent
                     ],
                     imports: [
@@ -3260,7 +3219,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         MatTableModule,
                         MatDialogModule,
                         MatButtonModule,
-                        MatDatepickerModule
+                        MatDatepickerModule,
+                        MatSliderModule,
+                        MatTabsModule
                     ],
                     exports: [NgxMatEntityInputComponent]
                 }]
@@ -3308,7 +3269,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);
     }
     /**
@@ -3353,10 +3314,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: i4.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.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4$1.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,
@@ -3408,11 +3369,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;
     }
 }
 /**
@@ -3424,9 +3386,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));
     }
 }
 
@@ -3448,15 +3410,16 @@ class NgxMatEntityEditDialogComponent {
     }
     ngOnInit() {
         this.data = new EditEntityDialogDataBuilder(this.inputData).getResult();
+        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
     checkEntity() {
         this.isEntityValid = EntityUtilities.isEntityValid(this.data.entity, 'update');
-        this.isEntityDirty = EntityUtilities.dirty(this.data.entity, this.entityPriorChanges);
+        this.isEntityDirty = EntityUtilities.isDirty(this.data.entity, this.entityPriorChanges);
     }
     /**
      * Tries to save the changes and close the dialog afterwards.
@@ -3524,10 +3487,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: i4.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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }], pipes: { "async": i4$1.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 | 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{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]" }], pipes: { "async": i6.AsyncPipe } });
 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 | 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{justify-content:space-between}.delete-button{float:right}\n"] }]
         }], ctorParameters: function () {
         return [{ type: undefined, decorators: [{
                         type: Inject,
@@ -3554,15 +3517,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;
@@ -3571,7 +3534,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;
@@ -3600,24 +3564,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.`);
         }
     }
 }
@@ -3692,16 +3658,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) {
@@ -3709,6 +3676,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
             };
@@ -3733,7 +3701,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');
             }
@@ -3840,10 +3808,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: i4.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: i5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i6.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: i5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i5.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$2.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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i5.MatCellDef, selector: "[matCellDef]" }, { type: i5.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i5.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: [{
@@ -3864,13 +3832,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,
@@ -3881,7 +3851,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         NgxMatEntityInputModule,
                         MatDialogModule,
                         FormsModule,
-                        MatButtonModule
+                        MatButtonModule,
+                        MatTabsModule
                     ],
                     exports: [NgxMatEntityCreateDialogComponent]
                 }]
@@ -3895,6 +3866,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,
@@ -3902,6 +3874,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: [{
@@ -3914,6 +3887,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         MatDialogModule,
                         FormsModule,
                         MatButtonModule,
+                        MatTabsModule,
                         NgxMatEntityConfirmDialogModule
                     ],
                     exports: [NgxMatEntityEditDialogComponent]
@@ -4305,6 +4279,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.
@@ -4313,11 +4311,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);
     }
 }
 
@@ -4487,6 +4487,41 @@ function file(metadata) {
 class FileDecoratorConfig extends PropertyDecoratorConfig {
 }
 
+/**
+ * The default function to use for checking if the value is dirty.
+ *
+ * @param value - The current value.
+ * @param valuePriorChanges - The value before any changes.
+ * @returns Whether or not the provided value has been changed.
+ */
+function defaultIsEqual(value, valuePriorChanges) {
+    return LodashUtilities.isEqual(value, valuePriorChanges);
+}
+/**
+ * The internal config for the @custom decorator.
+ * Sets default values.
+ */
+class CustomDecoratorConfigInternal extends PropertyDecoratorConfigInternal {
+    constructor(data) {
+        var _a, _b;
+        super(data);
+        this.component = data.component;
+        this.isValid = (_a = data.isValid) !== null && _a !== void 0 ? _a : (() => true);
+        this.isEqual = (_b = data.isEqual) !== null && _b !== void 0 ? _b : defaultIsEqual;
+        this.customMetadata = data.customMetadata;
+    }
+}
+
+/**
+ * Decorator for setting and getting custom property metadata.
+ *
+ * @param metadata - The metadata of the custom property.
+ * @returns The method that defines the metadata.
+ */
+function custom(metadata) {
+    return baseProperty(new CustomDecoratorConfigInternal(metadata), DecoratorTypes.CUSTOM);
+}
+
 /**
  * Public API Surface of ngx-material-entity.
  */
@@ -4495,5 +4530,5 @@ class FileDecoratorConfig extends PropertyDecoratorConfig {
  * Generated bundle index. Do not edit.
  */
 
-export { ArrayDecoratorConfig, DateUtilities, DecoratorTypes, Entity, EntityService, EntityUtilities, FileUtilities, NgxMatEntityConfirmDialogComponent, NgxMatEntityConfirmDialogModule, NgxMatEntityCreateDialogComponent, NgxMatEntityCreateDialogModule, NgxMatEntityEditDialogComponent, NgxMatEntityEditDialogModule, NgxMatEntityInputComponent, NgxMatEntityInputModule, NgxMatEntityTableComponent, NgxMatEntityTableModule, array, boolean, date, file, getValidationErrorMessage, number, object, string };
+export { ArrayDecoratorConfig, DateUtilities, DecoratorTypes, Entity, EntityService, EntityUtilities, FileUtilities, NgxMatEntityBaseInputComponent, NgxMatEntityConfirmDialogComponent, NgxMatEntityConfirmDialogModule, NgxMatEntityCreateDialogComponent, NgxMatEntityCreateDialogModule, NgxMatEntityEditDialogComponent, NgxMatEntityEditDialogModule, NgxMatEntityInputComponent, NgxMatEntityInputModule, NgxMatEntityTableComponent, NgxMatEntityTableModule, array, boolean, custom, date, file, getValidationErrorMessage, number, object, string };
 //# sourceMappingURL=ngx-material-entity.mjs.map