ngx-material-entity 16.0.2 → 16.0.3

package/fesm2022/ngx-material-entity.mjs

@@ -4,11 +4,11 @@ import 'reflect-metadata';
 import { firstValueFrom, Observable, BehaviorSubject, first, map, Subject, takeUntil } from 'rxjs';
 import JSZip from 'jszip';
 import * as i0 from '@angular/core';
-import { Component, Inject, Input, EventEmitter, Output, Directive, HostListener, InjectionToken, inject, ViewChild, NgModule } from '@angular/core';
+import { Component, Inject, InjectionToken, inject, EventEmitter, Directive, Output, HostListener, Input, ViewChild, NgModule, runInInjectionContext } from '@angular/core';
 import * as i1 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import * as i3 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, NG_VALIDATORS } from '@angular/forms';
 import * as i5 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i4 from '@angular/material/checkbox';
@@ -16,6 +16,8 @@ import { MatCheckboxModule } from '@angular/material/checkbox';
 import * as i1$1 from '@angular/common';
 import { NgIf, NgFor, CommonModule } from '@angular/common';
 import * as i2 from '@angular/common/http';
+import * as i10 from '@angular/material/badge';
+import { MatBadgeModule } from '@angular/material/badge';
 import * as i14 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
 import * as i15 from '@angular/material/progress-spinner';
@@ -661,7 +663,7 @@ class EntityUtilities {
     static getOmitForUpdate(entity) {
         const res = [];
         for (const key of ReflectUtilities.ownKeys(entity)) {
-            const metadata = EntityUtilities.getPropertyMetadata(entity, key);
+            const metadata = this.getPropertyMetadata(entity, key);
             if (metadata.omitForUpdate) {
                 res.push(key);
             }
@@ -677,7 +679,7 @@ class EntityUtilities {
     static getOmitForCreate(entity) {
         const res = [];
         for (const key of ReflectUtilities.ownKeys(entity)) {
-            const metadata = EntityUtilities.getPropertyMetadata(entity, key);
+            const metadata = this.getPropertyMetadata(entity, key);
             if (metadata.omitForCreate) {
                 res.push(key);
             }
@@ -691,7 +693,7 @@ class EntityUtilities {
      * @returns The reduced entity object.
      */
     static getWithoutOmitCreateValues(entity) {
-        return LodashUtilities.omit(entity, EntityUtilities.getOmitForCreate(entity));
+        return LodashUtilities.omit(entity, this.getOmitForCreate(entity));
     }
     /**
      * Returns the given entity without the values that should be omitted for updating.
@@ -704,18 +706,18 @@ class EntityUtilities {
      */
     static async getWithoutOmitUpdateValues(entity, entityPriorChanges, http) {
         const res = {};
-        for (const key of EntityUtilities.keysOf(entity, false, true)) {
-            const metadata = EntityUtilities.getPropertyMetadata(entity, key);
-            const type = EntityUtilities.getPropertyType(entity, key);
-            if (!(await EntityUtilities.isEqual(entity[key], entityPriorChanges[key], metadata, type, http))) {
+        for (const key of this.keysOf(entity, false, true)) {
+            const metadata = this.getPropertyMetadata(entity, key);
+            const type = this.getPropertyType(entity, key);
+            if (!(await this.isEqual(entity[key], entityPriorChanges[key], metadata, type, http))) {
                 switch (type) {
                     case DecoratorTypes.OBJECT:
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        res[key] = LodashUtilities.omit(entity[key], EntityUtilities.getOmitForCreate(entity[key]));
+                        res[key] = LodashUtilities.omit(entity[key], this.getOmitForCreate(entity[key]));
                         break;
                     case DecoratorTypes.ARRAY:
                         res[key] = entity[key]
-                            .map(value => LodashUtilities.omit(value, EntityUtilities.getOmitForCreate(value)));
+                            .map(value => LodashUtilities.omit(value, this.getOmitForCreate(value)));
                         break;
                     default:
                         res[key] = entity[key];
@@ -725,6 +727,20 @@ class EntityUtilities {
         }
         return res;
     }
+    /**
+     * Sets all default values on the given entity.
+     *
+     * @param entity - The entity to set the default values on.
+     */
+    static setDefaultValues(entity) {
+        for (const key in entity) {
+            const metadata = this.getPropertyMetadata(entity, key);
+            if (metadata.default) {
+                // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-explicit-any
+                entity[key] = metadata.default();
+            }
+        }
+    }
     /**
      * Gets all properties on the given entity which are files.
      *
@@ -735,9 +751,9 @@ class EntityUtilities {
     static getFileProperties(entity, omit) {
         const res = [];
         for (const key of ReflectUtilities.ownKeys(entity)) {
-            const type = EntityUtilities.getPropertyType(entity, key);
+            const type = this.getPropertyType(entity, key);
             if (type === DecoratorTypes.FILE_DEFAULT || type === DecoratorTypes.FILE_IMAGE) {
-                const metadata = EntityUtilities.getPropertyMetadata(entity, key);
+                const metadata = this.getPropertyMetadata(entity, key);
                 if (!(metadata.omitForCreate && omit === 'create') && !(metadata.omitForUpdate && omit === 'update')) {
                     res.push(key);
                 }
@@ -794,12 +810,12 @@ class EntityUtilities {
      */
     static new(target, entity) {
         for (const key in target) {
-            const type = EntityUtilities.getPropertyType(target, key);
+            const type = this.getPropertyType(target, key);
             let value = entity ? ReflectUtilities.get(entity, key) : undefined;
             switch (type) {
                 case DecoratorTypes.OBJECT:
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    const objectMetadata = EntityUtilities.getPropertyMetadata(target, key, DecoratorTypes.OBJECT);
+                    const objectMetadata = this.getPropertyMetadata(target, key, DecoratorTypes.OBJECT);
                     value = new objectMetadata.EntityClass(value);
                     break;
                 case DecoratorTypes.ARRAY:
@@ -807,7 +823,7 @@ class EntityUtilities {
                     const resArray = [];
                     if (inputArray) {
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        const arrayMetadata = EntityUtilities.getPropertyMetadata(target, key, DecoratorTypes.ARRAY);
+                        const arrayMetadata = this.getPropertyMetadata(target, key, DecoratorTypes.ARRAY);
                         for (const item of inputArray) {
                             const itemWithMetadata = new arrayMetadata.EntityClass(item);
                             resArray.push(itemWithMetadata);
@@ -822,800 +838,504 @@ class EntityUtilities {
         }
     }
     // eslint-disable-next-line @typescript-eslint/member-ordering, jsdoc/require-jsdoc, @typescript-eslint/typedef
-    static construct = EntityUtilities.new;
+    static construct = this.new;
     // eslint-disable-next-line @typescript-eslint/member-ordering, jsdoc/require-jsdoc, @typescript-eslint/typedef
-    static build = EntityUtilities.new;
+    static build = this.new;
     /**
-     * Checks if the values on an entity are valid.
-     * Also checks all the validators given by the metadata ("required", "maxLength" etc.).
+     * Checks if an entity is "dirty" (if its values have changed).
      *
-     * @param entity - The entity to validate.
-     * @param omit - Whether to check for creating or editing validity.
-     * @returns Whether or not the entity is valid.
+     * @param entity - The entity after all changes.
+     * @param entityPriorChanges - The entity before the changes.
+     * @param http - The angular HttpClient. Used to fetch files.
+     * @returns Whether or not the entity is dirty.
      */
-    static isEntityValid(entity, omit) {
-        for (const key in entity) {
-            if (!EntityUtilities.isPropertyValid(entity, key, omit)) {
-                return false;
-            }
+    static async isDirty(entity, entityPriorChanges, http) {
+        if (!entityPriorChanges) {
+            return false;
         }
-        return true;
+        const differences = await this.getDifferencesBetweenEntities(entity, entityPriorChanges, http);
+        return differences.length ? true : false;
     }
     /**
-     * Checks if a single property value is valid.
+     * Gets the differences between the two given entities.
      *
-     * @param entity - The entity where the property is from.
-     * @param key - The name of the property.
-     * @param omit - Whether to check if the given entity is valid for creation or updating.
-     * @returns Whether or not the property value is valid.
-     * @throws Throws when it extracts an unknown metadata type.
+     * @param entity - The entity as is.
+     * @param entityPriorChanges - The entity before any changes have been made.
+     * @param http - The angular http client, is needed to check if files are equal.
+     * @returns The differences as an array consisting of key, before and after.
      */
-    static isPropertyValid(entity, key, omit) {
-        const type = EntityUtilities.getPropertyType(entity, key);
-        const metadata = EntityUtilities.getPropertyMetadata(entity, key, type);
-        if (metadata.omitForCreate && omit === 'create') {
-            return true;
-        }
-        if (metadata.omitForUpdate && omit === 'update') {
-            return true;
-        }
-        if (metadata.required(entity) && type !== DecoratorTypes.HAS_MANY) {
-            if (entity[key] == null || entity[key] === '') {
-                return false;
+    static async getDifferencesBetweenEntities(entity, entityPriorChanges, http) {
+        const res = [];
+        for (const key of ReflectUtilities.ownKeys(entity)) {
+            const metadata = this.getPropertyMetadata(entity, key);
+            const type = this.getPropertyType(entity, key);
+            if (!(await this.isEqual(entity[key], entityPriorChanges[key], metadata, type, http))) {
+                res.push({
+                    key: key,
+                    before: entityPriorChanges[key],
+                    after: entity[key]
+                });
             }
-        }
-        if (!metadata.required(entity)) {
-            if (entity[key] == null || entity[key] === '') {
-                return true;
+            else {
+                // This is needed to set blob file data so that it is only requested once.
+                entityPriorChanges[key] = LodashUtilities.cloneDeep(entity[key]);
             }
         }
+        return res;
+    }
+    // TODO Remove
+    /**
+     * Compares two Entities and returns their difference in an object.
+     *
+     * @param entity - The first entity to compare.
+     * @param entityPriorChanges - The second entity to compare.
+     * @returns The difference between the two Entities in form of a Partial.
+     */
+    // static async difference<EntityType extends BaseEntityType<EntityType>>(
+    //     entity: EntityType,
+    //     entityPriorChanges: EntityType
+    // ): Promise<Partial<EntityType>> {
+    //     const res: Partial<EntityType> = {};
+    //     for (const key in entity) {
+    //         const metadata: PropertyDecoratorConfigInternal = this.getPropertyMetadata(entity, key);
+    //         const type: DecoratorTypes = this.getPropertyType(entity, key);
+    //         if (!(await this.isEqual(entity[key], entityPriorChanges[key], metadata, type))) {
+    //             res[key] = entity[key];
+    //         }
+    //     }
+    //     return res;
+    // }
+    /**
+     * Checks if two given values are equal.
+     * It uses the isEqual method from LodashUtilities and extends it with functionality regarding Dates.
+     *
+     * @param value - The updated value.
+     * @param valuePriorChanges - The value before any changes.
+     * @param metadata - The metadata of the property.
+     * @param type - The type of the property.
+     * @param http - The angular HttpClient. Used to fetch files.
+     * @returns Whether or not the given values are equal.
+     */
+    static async isEqual(value, valuePriorChanges, metadata, type, http) {
         switch (type) {
-            case DecoratorTypes.BOOLEAN_DROPDOWN:
-                break;
-            case DecoratorTypes.BOOLEAN_CHECKBOX:
-            case DecoratorTypes.BOOLEAN_TOGGLE:
-                const entityBoolean = entity[key];
-                const booleanMetadata = metadata;
-                if (!EntityUtilities.isBooleanValid(entity, entityBoolean, booleanMetadata)) {
-                    return false;
-                }
-                break;
-            case DecoratorTypes.STRING_DROPDOWN:
-                break;
-            case DecoratorTypes.STRING:
-            case DecoratorTypes.STRING_AUTOCOMPLETE:
-                const entityString = entity[key];
-                const stringMetadata = metadata;
-                if (!EntityUtilities.isStringValid(entityString, stringMetadata)) {
-                    return false;
-                }
-                break;
-            case DecoratorTypes.STRING_TEXTBOX:
-                const entityTextbox = entity[key];
-                const textboxMetadata = metadata;
-                if (!EntityUtilities.isTextboxValid(entityTextbox, textboxMetadata)) {
-                    return false;
-                }
-                break;
-            case DecoratorTypes.STRING_PASSWORD:
-                const entityPassword = entity[key];
-                const passwordMetadata = metadata;
-                const confirmPassword = ReflectUtilities.getMetadata(this.CONFIRM_PASSWORD_KEY, 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)) {
-                    return false;
-                }
-                break;
-            case DecoratorTypes.OBJECT:
-                const entityObject = entity[key];
-                for (const parameterKey in entityObject) {
-                    const value = entityObject[parameterKey];
-                    if (!metadata.omit.includes(parameterKey)
-                        && !(!metadata.required(entity) && (value == null || value == ''))) {
-                        if (!EntityUtilities.isPropertyValid(entityObject, parameterKey, omit)) {
-                            return false;
-                        }
-                    }
-                }
-                break;
-            case DecoratorTypes.ARRAY_STRING_CHIPS:
-            case DecoratorTypes.ARRAY_STRING_AUTOCOMPLETE_CHIPS:
+            case DecoratorTypes.DATE_RANGE:
+                return this.isEqualDateRange(value, valuePriorChanges, metadata.filter);
+            case DecoratorTypes.DATE:
+                return this.isEqualDate(value, valuePriorChanges);
+            case DecoratorTypes.DATE_TIME:
+                return this.isEqualDateTime(value, valuePriorChanges);
             case DecoratorTypes.ARRAY_DATE:
             case DecoratorTypes.ARRAY_DATE_TIME:
+                return this.isEqualArrayDate(value, valuePriorChanges);
             case DecoratorTypes.ARRAY_DATE_RANGE:
-            case DecoratorTypes.ARRAY:
-                const entityArray = entity[key];
-                // eslint-disable-next-line max-len
-                const arrayMetadata = metadata;
-                if (arrayMetadata.required(entity) && !entityArray.length) {
-                    return false;
-                }
-                break;
-            case DecoratorTypes.DATE:
-                const entityDate = new Date(entity[key]);
-                const dateMetadata = metadata;
-                if (!EntityUtilities.isDateValid(entityDate, dateMetadata)) {
-                    return false;
-                }
-                break;
-            case DecoratorTypes.DATE_RANGE:
-                const entityDateRange = LodashUtilities.cloneDeep(entity[key]);
-                const dateRangeMetadata = metadata;
-                if (!EntityUtilities.isDateRangeValid(entity, entityDateRange, dateRangeMetadata)) {
-                    return false;
-                }
-                break;
-            case DecoratorTypes.DATE_TIME:
-                const entityDateTime = new Date(entity[key]);
-                const dateTimeMetadata = metadata;
-                const hasTime = ReflectUtilities.hasMetadata(this.TIME_KEY, entity, key);
-                if (!EntityUtilities.isDateTimeValid(entityDateTime, dateTimeMetadata, hasTime)) {
-                    return false;
-                }
-                break;
-            case DecoratorTypes.FILE_DEFAULT:
+                return this.isEqualArrayDateRange(value, valuePriorChanges, metadata.filter);
+            case DecoratorTypes.ARRAY_STRING_CHIPS:
+            case DecoratorTypes.ARRAY_STRING_AUTOCOMPLETE_CHIPS:
+                return this.isEqualArrayString(value, valuePriorChanges);
             case DecoratorTypes.FILE_IMAGE:
-                const entityFile = entity[key];
-                const entityFileMetadata = metadata;
-                if (!EntityUtilities.isFileDataValid(entityFile, entityFileMetadata)) {
-                    return false;
-                }
-                break;
-            case DecoratorTypes.REFERENCES_MANY:
-            case DecoratorTypes.REFERENCES_ONE:
-            case DecoratorTypes.HAS_MANY:
-                break;
+            case DecoratorTypes.FILE_DEFAULT:
+                return this.isEqualFile(value, valuePriorChanges, metadata.multiple, http);
             case DecoratorTypes.CUSTOM:
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any, max-len
-                const customMetadata = metadata;
-                if (!customMetadata.isValid(entity[key], omit)) {
-                    return false;
-                }
-                break;
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                return this.isEqualCustom(value, valuePriorChanges, metadata);
             default:
-                throw new Error(`Could not validate the input because the DecoratorType ${type} is not known`);
+                return LodashUtilities.isEqual(value, valuePriorChanges);
         }
-        return true;
     }
-    static isBooleanValid(entity, value, metadata) {
-        if (metadata.required(entity) && !value) {
+    static isEqualArrayString(value, valuePriorChanges) {
+        const stringArray = LodashUtilities.cloneDeep(value).sort();
+        const stringArrayPriorChanges = LodashUtilities.cloneDeep(valuePriorChanges).sort();
+        return LodashUtilities.isEqual(stringArray, stringArrayPriorChanges);
+    }
+    static isEqualArrayDate(value, valuePriorChanges) {
+        const newValue = value.map(v => new Date(v)).sort();
+        const newValuePriorChanges = valuePriorChanges.map(v => new Date(v)).sort();
+        return LodashUtilities.isEqual(newValue, newValuePriorChanges);
+    }
+    static isEqualArrayDateRange(value, valuePriorChanges, filter) {
+        const dateRanges = value.sort();
+        const dateRangesPriorChanges = valuePriorChanges.sort();
+        if (dateRanges.length !== dateRangesPriorChanges.length) {
             return false;
         }
+        for (let i = 0; i < dateRanges.length; i++) {
+            if (!this.isEqualDateRange(dateRanges[i], dateRangesPriorChanges[i], filter)) {
+                return false;
+            }
+        }
         return true;
     }
-    static isStringValid(value, metadata) {
-        if (metadata.maxLength && value.length > metadata.maxLength) {
-            return false;
+    static isEqualDateTime(value, valuePriorChanges) {
+        const date = new Date(value);
+        const datePriorChanges = new Date(valuePriorChanges);
+        return LodashUtilities.isEqual(date, datePriorChanges);
+    }
+    static isEqualDate(value, valuePriorChanges) {
+        const date = new Date(value);
+        const datePriorChanges = new Date(valuePriorChanges);
+        date.setHours(0, 0, 0, 0);
+        datePriorChanges.setHours(0, 0, 0, 0);
+        return LodashUtilities.isEqual(date, datePriorChanges);
+    }
+    static isEqualDateRange(value, valuePriorChanges, filter) {
+        const dateRange = LodashUtilities.cloneDeep(value);
+        dateRange.start = new Date(value.start);
+        dateRange.end = new Date(value.end);
+        dateRange.values = DateUtilities.getDatesBetween(dateRange.start, dateRange.end, filter);
+        const dateRangePriorChanges = LodashUtilities.cloneDeep(valuePriorChanges);
+        dateRangePriorChanges.start = new Date(valuePriorChanges.start);
+        dateRangePriorChanges.end = new Date(valuePriorChanges.end);
+        dateRangePriorChanges.values = DateUtilities.getDatesBetween(dateRangePriorChanges.start, dateRangePriorChanges.end, filter);
+        return LodashUtilities.isEqual(dateRange, dateRangePriorChanges);
+    }
+    // TODO: Find a way to use blobs with jest
+    /* istanbul ignore next */
+    static async isEqualFile(value, valuePriorChanges, multiple, http) {
+        if (value == null) {
+            if (valuePriorChanges == null) {
+                return true;
+            }
+            else {
+                return false;
+            }
         }
-        if (metadata.minLength && value.length < metadata.minLength) {
+        const files = multiple ? value.sort() : [value].sort();
+        const filesPriorChanges = multiple ? valuePriorChanges.sort() : [valuePriorChanges].sort();
+        if (files.length !== filesPriorChanges.length) {
             return false;
         }
-        if (metadata.regex && !value.match(metadata.regex)) {
-            return false;
+        for (let i = 0; i < files.length; i++) {
+            // checks this before actually getting any files due to performance reasons.
+            if (!LodashUtilities.isEqual(LodashUtilities.omit(files[i], 'file'), LodashUtilities.omit(filesPriorChanges[i], 'file'))) {
+                return false;
+            }
+            if (filesPriorChanges[i].file && !files[i].file) {
+                files[i] = await FileUtilities.getFileData(files[i], http);
+                value = files[i];
+            }
+            if (files[i].file && !filesPriorChanges[i].file) {
+                filesPriorChanges[i] = await FileUtilities.getFileData(filesPriorChanges[i], http);
+                valuePriorChanges = filesPriorChanges[i];
+            }
+            if (!LodashUtilities.isEqual(await files[i].file?.text(), await filesPriorChanges[i].file?.text())) {
+                return false;
+            }
         }
         return true;
     }
-    static isTextboxValid(value, metadata) {
-        if (metadata.maxLength && value.length > metadata.maxLength) {
-            return false;
-        }
-        if (metadata.minLength && value.length < metadata.minLength) {
-            return false;
-        }
-        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)) {
+    static isEqualCustom(value, valuePriorChanges, 
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    metadata) {
+        if (!metadata.isEqual(value, valuePriorChanges, metadata)) {
             return false;
         }
         return true;
     }
-    static isNumberValid(value, metadata) {
-        if (metadata.max && value > metadata.max) {
-            return false;
+    /**
+     * Compare function for sorting entity keys by their order value.
+     *
+     * @param a - First key of entity.
+     * @param b - Second key of entity.
+     * @param entity - Current entity (used to get metadata of entity keys).
+     * @returns 0 if both values have the same order, a negative value if 'a' comes before 'b', a positive value if 'a' comes behind 'b'.
+     */
+    static compareOrder(a, b, entity) {
+        const metadataA = this.getPropertyMetadata(entity, a);
+        const metadataB = this.getPropertyMetadata(entity, b);
+        if (metadataA.position.order === -1) {
+            if (metadataB.position.order === -1) {
+                return 0;
+            }
+            return 1;
         }
-        if (metadata.min && value < metadata.min) {
-            return false;
+        else if (metadataB.position.order === -1) {
+            return -1;
         }
-        return true;
+        return metadataA.position.order - metadataB.position.order;
     }
-    static isDateValid(value, metadata) {
-        if (metadata.min && value.getTime() < metadata.min(value).getTime()) {
-            return false;
-        }
-        if (metadata.max && value.getTime() > metadata.max(value).getTime()) {
-            return false;
-        }
-        if (metadata.filter && !metadata.filter(value)) {
-            return false;
+    /**
+     * Gets the bootstrap column values for "lg", "md", "sm".
+     *
+     * @param entity - Entity to get the bootstrap column values of the key.
+     * @param key - Key of the property to get bootstrap column values from.
+     * @param type - Defines for which screen size the column values should be returned.
+     * @returns Bootstrap column value.
+     */
+    static getWidth(entity, key, type) {
+        const metadata = this.getPropertyMetadata(entity, key);
+        switch (type) {
+            case 'lg':
+                return metadata.defaultWidths[0];
+            case 'md':
+                return metadata.defaultWidths[1];
+            case 'sm':
+                return metadata.defaultWidths[2];
         }
-        return true;
     }
-    static isDateRangeValid(entity, value, metadata) {
-        if (metadata.required(entity)) {
-            if (!value.start) {
-                return false;
-            }
-            if (!value.end) {
-                return false;
-            }
-        }
-        value.start = new Date(value.start);
-        value.end = new Date(value.end);
-        if (metadata.minStart && value.start.getTime() < metadata.minStart(value.start).getTime()) {
-            return false;
-        }
-        if (metadata.maxStart && value.start.getTime() > metadata.maxStart(value.start).getTime()) {
-            return false;
-        }
-        if (metadata.minEnd && value.end.getTime() < metadata.minEnd(value.end).getTime()) {
-            return false;
-        }
-        if (metadata.maxEnd && value.end.getTime() > metadata.maxEnd(value.end).getTime()) {
-            return false;
-        }
-        if (metadata.filter) {
-            if (!metadata.filter(value.start)) {
-                return false;
-            }
-            if (!metadata.filter(value.end)) {
-                return false;
-            }
-            if (value.values) {
-                for (const date of value.values) {
-                    if (!metadata.filter(date)) {
-                        return false;
+    /**
+     * Resets all changes on an entity.
+     *
+     * @param entity - The entity to reset.
+     * @param entityPriorChanges - The entity before any changes.
+     */
+    static resetChangesOnEntity(entity, entityPriorChanges) {
+        for (const key in entityPriorChanges) {
+            ReflectUtilities.set(entity, key, ReflectUtilities.get(entityPriorChanges, key));
+            if (ReflectUtilities.hasMetadata(this.METADATA_KEYS_TO_RESET_KEY, entity, key)) {
+                for (const k of ReflectUtilities.getMetadata(this.METADATA_KEYS_TO_RESET_KEY, entity, key)) {
+                    if (ReflectUtilities.hasMetadata(k, entity, key)) {
+                        ReflectUtilities.defineMetadata(k, undefined, entity, key);
                     }
                 }
             }
         }
-        return true;
     }
-    static isDateTimeValid(value, metadata, hasTime) {
-        if (!hasTime) {
-            return false;
-        }
-        if (metadata.minDate && value.getTime() < metadata.minDate(value).getTime()) {
-            return false;
-        }
-        if (metadata.maxDate && value.getTime() > metadata.maxDate(value).getTime()) {
-            return false;
-        }
-        if (metadata.filterDate && !metadata.filterDate(value)) {
-            return false;
+    static getEntityRows(entity, tab, hideOmitForCreate, hideOmitForEdit, additionalOmitValues) {
+        const res = [];
+        const keys = this.keysOf(entity, hideOmitForCreate, hideOmitForEdit)
+            .filter(k => !additionalOmitValues.includes(k));
+        const numberOfRows = this.getNumberOfRows(keys, entity, tab);
+        for (let i = 1; i <= numberOfRows; i++) {
+            const row = {
+                row: i,
+                keys: this.getKeysForRow(keys, entity, i, tab)
+            };
+            res.push(row);
         }
-        const time = {
-            hours: value.getHours(),
-            minutes: value.getMinutes()
-        };
-        if (metadata.minTime) {
-            const minTime = metadata.minTime(value);
-            if (!(time.hours > minTime.hours
-                || (time.hours === minTime.hours
-                    && time.minutes >= minTime.minutes))) {
-                return false;
-            }
+        if (this.getKeysForRow(keys, entity, -1, tab).length) {
+            const lastRow = {
+                row: numberOfRows + 1,
+                keys: this.getKeysForRow(keys, entity, -1, tab)
+            };
+            res.push(lastRow);
         }
-        if (metadata.maxTime) {
-            const maxTime = metadata.maxTime(value);
-            if (!(time.hours < maxTime.hours
-                || (time.hours === maxTime.hours
-                    && time.minutes <= maxTime.minutes))) {
-                return false;
-            }
+        return res;
+    }
+    /**
+     * 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.
+     * @param additionalOmitValues - Additional omit values.
+     * @returns The sorted Tabs containing the rows and the keys to display in that row.
+     */
+    static getEntityTabs(entity, hideOmitForCreate = false, hideOmitForEdit = false, additionalOmitValues = []) {
+        const res = [];
+        const keys = this.keysOf(entity, hideOmitForCreate, hideOmitForEdit)
+            .filter(k => !additionalOmitValues.includes(k));
+        const numberOfTabs = this.getNumberOfTabs(keys, entity);
+        // eslint-disable-next-line max-len
+        const firstTabRows = this.getEntityRows(entity, -1, hideOmitForCreate, hideOmitForEdit, additionalOmitValues);
+        if (firstTabRows.length) {
+            const firstTab = {
+                tabName: this.getFirstTabName(entity),
+                tab: -1,
+                rows: firstTabRows
+            };
+            res.push(firstTab);
         }
-        if (metadata.filterTime) {
-            if (!metadata.filterTime(time)) {
-                return false;
+        for (let i = 2; i <= numberOfTabs; i++) {
+            const rows = this.getEntityRows(entity, i, hideOmitForCreate, hideOmitForEdit, additionalOmitValues);
+            if (rows.length) {
+                const tab = {
+                    tabName: this.getTabName(entity, i),
+                    tab: i,
+                    rows: rows
+                };
+                res.push(tab);
             }
         }
-        return true;
+        return res;
     }
-    static isFileDataValid(value, metadata) {
-        const files = metadata.multiple ? value : [value];
-        let fileSizeTotal = 0;
-        for (const file of files) {
-            if (!file.name || !file.file && !file.url) {
-                return false;
-            }
-            if (!FileUtilities.isMimeTypeValid(file.type, metadata.allowedMimeTypes)) {
-                return false;
-            }
-            if (FileUtilities.transformToMegaBytes(file.size, 'B') > metadata.maxSize) {
-                return false;
-            }
-            fileSizeTotal += file.size;
-            if (FileUtilities.transformToMegaBytes(fileSizeTotal, 'B') > metadata.maxSizeTotal) {
-                return false;
-            }
-        }
-        return true;
+    static getKeysForRow(keys, entity, row, tab) {
+        return keys
+            .filter(k => this.getPropertyMetadata(entity, k).position.row === row)
+            .filter(k => this.getPropertyMetadata(entity, k).position.tab === tab)
+            .sort((a, b) => this.compareOrder(a, b, entity));
+    }
+    static getNumberOfRows(keys, entity, tab) {
+        return keys
+            .filter(k => this.getPropertyMetadata(entity, k).position.tab === tab)
+            .map(k => this.getPropertyMetadata(entity, k).position.row)
+            .sort((a, b) => (a > b ? -1 : 1))[0];
+    }
+    static getNumberOfTabs(keys, entity) {
+        return keys
+            .map(k => this.getPropertyMetadata(entity, k).position.tab)
+            .sort((a, b) => (a > b ? -1 : 1))[0];
+    }
+    static getTabName(entity, tab) {
+        const providedTabName = ReflectUtilities.ownKeys(entity)
+            .map(k => this.getPropertyMetadata(entity, k))
+            .find(m => m.position.tab === tab && m.position.tabName)?.position.tabName;
+        return providedTabName ?? `Tab ${tab}`;
+    }
+    static getFirstTabName(entity) {
+        const providedTabName = ReflectUtilities.ownKeys(entity)
+            .map(k => this.getPropertyMetadata(entity, k))
+            .find(m => m.position.tabName && m.position.tab === -1)?.position.tabName;
+        return providedTabName ?? 'Tab 1';
     }
     /**
-     * Checks if an entity is "dirty" (if its values have changed).
+     * Gets the keys of the provided entity correctly typed.
      *
-     * @param entity - The entity after all changes.
-     * @param entityPriorChanges - The entity before the changes.
-     * @param http - The angular HttpClient. Used to fetch files.
-     * @returns Whether or not the entity is dirty.
+     * @param entity - The entity to get the keys of.
+     * @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 An array of keys of the entity.
      */
-    static async isDirty(entity, entityPriorChanges, http) {
-        if (!entityPriorChanges) {
-            return false;
+    static keysOf(entity, hideOmitForCreate = false, hideOmitForEdit = false) {
+        let keys = ReflectUtilities.ownKeys(entity);
+        const dontDisplayKeys = this.getDontDisplayKeys(entity);
+        keys = keys.filter(k => !dontDisplayKeys.includes(k));
+        if (hideOmitForCreate) {
+            const omitForCreateKeys = this.getOmitForCreate(entity);
+            keys = keys.filter(k => !omitForCreateKeys.includes(k));
         }
-        const differences = await EntityUtilities.differencesForDirty(entity, entityPriorChanges, http);
-        return differences.length ? true : false;
+        if (hideOmitForEdit) {
+            const omitForUpdateKeys = this.getOmitForUpdate(entity);
+            keys = keys.filter(k => !omitForUpdateKeys.includes(k));
+        }
+        return keys;
     }
-    static async differencesForDirty(entity, entityPriorChanges, http) {
+    static getDontDisplayKeys(entity) {
         const res = [];
         for (const key of ReflectUtilities.ownKeys(entity)) {
-            const metadata = EntityUtilities.getPropertyMetadata(entity, key);
-            const type = EntityUtilities.getPropertyType(entity, key);
-            if (!(await EntityUtilities.isEqual(entity[key], entityPriorChanges[key], metadata, type, http))) {
-                res.push({
-                    key: key,
-                    before: entityPriorChanges[key],
-                    after: entity[key]
-                });
-            }
-            else {
-                // This is needed to set blob file data so that it is only requested once.
-                entityPriorChanges[key] = LodashUtilities.cloneDeep(entity[key]);
+            const metadata = this.getPropertyMetadata(entity, key);
+            if (!metadata.display(entity)) {
+                res.push(key);
             }
         }
         return res;
     }
-    // TODO Remove
-    /**
-     * Compares two Entities and returns their difference in an object.
-     *
-     * @param entity - The first entity to compare.
-     * @param entityPriorChanges - The second entity to compare.
-     * @returns The difference between the two Entities in form of a Partial.
-     */
-    // static async difference<EntityType extends BaseEntityType<EntityType>>(
-    //     entity: EntityType,
-    //     entityPriorChanges: EntityType
-    // ): Promise<Partial<EntityType>> {
-    //     const res: Partial<EntityType> = {};
-    //     for (const key in entity) {
-    //         const metadata: PropertyDecoratorConfigInternal = EntityUtilities.getPropertyMetadata(entity, key);
-    //         const type: DecoratorTypes = EntityUtilities.getPropertyType(entity, key);
-    //         if (!(await EntityUtilities.isEqual(entity[key], entityPriorChanges[key], metadata, type))) {
-    //             res[key] = entity[key];
-    //         }
-    //     }
-    //     return res;
-    // }
-    /**
-     * Checks if two given values are equal.
-     * It uses the isEqual method from LodashUtilities and extends it with functionality regarding Dates.
-     *
-     * @param value - The updated value.
-     * @param valuePriorChanges - The value before any changes.
-     * @param metadata - The metadata of the property.
-     * @param type - The type of the property.
-     * @param http - The angular HttpClient. Used to fetch files.
-     * @returns Whether or not the given values are equal.
-     */
-    static async isEqual(value, valuePriorChanges, metadata, type, http) {
-        switch (type) {
-            case DecoratorTypes.DATE_RANGE:
-                return EntityUtilities.isEqualDateRange(value, valuePriorChanges, metadata.filter);
-            case DecoratorTypes.DATE:
-                return EntityUtilities.isEqualDate(value, valuePriorChanges);
-            case DecoratorTypes.DATE_TIME:
-                return EntityUtilities.isEqualDateTime(value, valuePriorChanges);
-            case DecoratorTypes.ARRAY_DATE:
-            case DecoratorTypes.ARRAY_DATE_TIME:
-                return EntityUtilities.isEqualArrayDate(value, valuePriorChanges);
-            case DecoratorTypes.ARRAY_DATE_RANGE:
-                return EntityUtilities.isEqualArrayDateRange(value, valuePriorChanges, metadata.filter);
-            case DecoratorTypes.ARRAY_STRING_CHIPS:
-            case DecoratorTypes.ARRAY_STRING_AUTOCOMPLETE_CHIPS:
-                return EntityUtilities.isEqualArrayString(value, valuePriorChanges);
-            case DecoratorTypes.FILE_IMAGE:
-            case DecoratorTypes.FILE_DEFAULT:
-                // eslint-disable-next-line max-len
-                return EntityUtilities.isEqualFile(value, valuePriorChanges, metadata.multiple, http);
-            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);
-        }
-    }
-    static isEqualArrayString(value, valuePriorChanges) {
-        const stringArray = LodashUtilities.cloneDeep(value).sort();
-        const stringArrayPriorChanges = LodashUtilities.cloneDeep(valuePriorChanges).sort();
-        return LodashUtilities.isEqual(stringArray, stringArrayPriorChanges);
-    }
-    static isEqualArrayDate(value, valuePriorChanges) {
-        const newValue = value.map(v => new Date(v)).sort();
-        const newValuePriorChanges = valuePriorChanges.map(v => new Date(v)).sort();
-        return LodashUtilities.isEqual(newValue, newValuePriorChanges);
-    }
-    static isEqualArrayDateRange(value, valuePriorChanges, filter) {
-        const dateRanges = value.sort();
-        const dateRangesPriorChanges = valuePriorChanges.sort();
-        if (dateRanges.length !== dateRangesPriorChanges.length) {
-            return false;
-        }
-        for (let i = 0; i < dateRanges.length; i++) {
-            if (!EntityUtilities.isEqualDateRange(dateRanges[i], dateRangesPriorChanges[i], filter)) {
-                return false;
-            }
-        }
-        return true;
-    }
-    static isEqualDateTime(value, valuePriorChanges) {
-        const date = new Date(value);
-        const datePriorChanges = new Date(valuePriorChanges);
-        return LodashUtilities.isEqual(date, datePriorChanges);
-    }
-    static isEqualDate(value, valuePriorChanges) {
-        const date = new Date(value);
-        const datePriorChanges = new Date(valuePriorChanges);
-        date.setHours(0, 0, 0, 0);
-        datePriorChanges.setHours(0, 0, 0, 0);
-        return LodashUtilities.isEqual(date, datePriorChanges);
-    }
-    static isEqualDateRange(value, valuePriorChanges, filter) {
-        const dateRange = LodashUtilities.cloneDeep(value);
-        dateRange.start = new Date(value.start);
-        dateRange.end = new Date(value.end);
-        dateRange.values = DateUtilities.getDatesBetween(dateRange.start, dateRange.end, filter);
-        const dateRangePriorChanges = LodashUtilities.cloneDeep(valuePriorChanges);
-        dateRangePriorChanges.start = new Date(valuePriorChanges.start);
-        dateRangePriorChanges.end = new Date(valuePriorChanges.end);
-        dateRangePriorChanges.values = DateUtilities.getDatesBetween(dateRangePriorChanges.start, dateRangePriorChanges.end, filter);
-        return LodashUtilities.isEqual(dateRange, dateRangePriorChanges);
+}
+
+/**
+ * The base decorator for setting metadata on properties.
+ *
+ * @param metadata - The metadata to define.
+ * @param type - The type of metadata.
+ * @param metadataKeysToReset - Any metadata keys which values should be set to undefined on reset.
+ * @returns The method that sets the metadata.
+ */
+function baseProperty(metadata, type, metadataKeysToReset) {
+    return function (target, propertyKey) {
+        ReflectUtilities.defineMetadata('metadata', metadata, target, propertyKey);
+        ReflectUtilities.defineMetadata('type', type, target, propertyKey);
+        // eslint-disable-next-line max-len
+        ReflectUtilities.defineMetadata(EntityUtilities.METADATA_KEYS_TO_RESET_KEY, metadataKeysToReset, target, propertyKey);
+    };
+}
+
+/**
+ * The default false function.
+ * A boolean false is resolved to this.
+ *
+ * @returns False.
+ */
+function defaultFalse() {
+    return false;
+}
+
+/**
+ * The internal Position. Sets default values and validates user input.
+ */
+class PositionInternal {
+    // eslint-disable-next-line jsdoc/require-jsdoc
+    row;
+    // eslint-disable-next-line jsdoc/require-jsdoc
+    order;
+    // eslint-disable-next-line jsdoc/require-jsdoc
+    tab;
+    // eslint-disable-next-line jsdoc/require-jsdoc
+    tabName;
+    constructor(data) {
+        this.validateInput(data);
+        this.row = data?.row ?? -1;
+        this.order = data?.order ?? -1;
+        this.tab = data?.tab ?? -1;
+        this.tabName = data?.tabName;
     }
-    // TODO: Find a way to use blobs with jest
-    /* istanbul ignore next */
-    static async isEqualFile(value, valuePriorChanges, multiple, http) {
-        if (value == null) {
-            if (valuePriorChanges == null) {
-                return true;
+    validateInput(data) {
+        if (data?.order != null) {
+            if (data.order < 1) {
+                throw new Error('order must be at least 1');
             }
-            else {
-                return false;
+            if (data.order > 12) {
+                throw new Error('order cannot be bigger than 12 (the minimum value for a bootstrap column)');
             }
         }
-        const files = multiple ? value.sort() : [value].sort();
-        const filesPriorChanges = multiple ? valuePriorChanges.sort() : [valuePriorChanges].sort();
-        if (files.length !== filesPriorChanges.length) {
-            return false;
+        if (data?.row != null && data.row < 1) {
+            throw new Error('row must be at least 1');
         }
-        for (let i = 0; i < files.length; i++) {
-            // checks this before actually getting any files due to performance reasons.
-            if (!LodashUtilities.isEqual(LodashUtilities.omit(files[i], 'file'), LodashUtilities.omit(filesPriorChanges[i], 'file'))) {
-                return false;
-            }
-            if (filesPriorChanges[i].file && !files[i].file) {
-                files[i] = await FileUtilities.getFileData(files[i], http);
-                value = files[i];
-            }
-            if (files[i].file && !filesPriorChanges[i].file) {
-                filesPriorChanges[i] = await FileUtilities.getFileData(filesPriorChanges[i], http);
-                valuePriorChanges = filesPriorChanges[i];
-            }
-            if (!LodashUtilities.isEqual(await files[i].file?.text(), await filesPriorChanges[i].file?.text())) {
-                return false;
-            }
+        if (data?.tab != null && data.tab != -1 && data.tab < 2) {
+            throw new Error('tab must be either -1 for the first tab or at least 2');
         }
-        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;
+}
+/**
+ * The internal PropertyDecoratorConfig. Sets default values.
+ */
+class PropertyDecoratorConfigInternal {
+    // eslint-disable-next-line jsdoc/require-jsdoc
+    display;
+    // eslint-disable-next-line jsdoc/require-jsdoc
+    displayName;
+    // eslint-disable-next-line jsdoc/require-jsdoc
+    required;
+    // eslint-disable-next-line jsdoc/require-jsdoc
+    omitForCreate;
+    // eslint-disable-next-line jsdoc/require-jsdoc
+    omitForUpdate;
+    // eslint-disable-next-line jsdoc/require-jsdoc
+    defaultWidths;
+    // eslint-disable-next-line jsdoc/require-jsdoc
+    position;
+    // eslint-disable-next-line jsdoc/require-jsdoc
+    isReadOnly;
+    // eslint-disable-next-line jsdoc/require-jsdoc
+    default;
+    // eslint-disable-next-line jsdoc/require-jsdoc
+    change;
+    constructor(data) {
+        this.display = this.booleanToFunction(data.display ?? true);
+        this.displayName = data.displayName;
+        this.required = this.booleanToFunction(data.required ?? true);
+        this.omitForCreate = data.omitForCreate ?? false;
+        this.omitForUpdate = data.omitForUpdate ?? false;
+        this.defaultWidths = data.defaultWidths ?? [6, 6, 12];
+        this.position = new PositionInternal(data.position);
+        this.isReadOnly = this.booleanToFunction(data.isReadOnly ?? false);
+        this.default = this.defaultToFunction(data.default);
+        this.change = data.change;
     }
     /**
-     * Compare function for sorting entity keys by their order value.
+     * Converts the default value to a function or undefined.
      *
-     * @param a - First key of entity.
-     * @param b - Second key of entity.
-     * @param entity - Current entity (used to get metadata of entity keys).
-     * @returns 0 if both values have the same order, a negative value if 'a' comes before 'b', a positive value if 'a' comes behind 'b'.
+     * @param value - The default value provided by the metadata.
+     * @returns A function that returns a default value or undefined.
      */
-    static compareOrder(a, b, entity) {
-        const metadataA = EntityUtilities.getPropertyMetadata(entity, a);
-        const metadataB = EntityUtilities.getPropertyMetadata(entity, b);
-        if (metadataA.position.order === -1) {
-            if (metadataB.position.order === -1) {
-                return 0;
-            }
-            return 1;
+    defaultToFunction(value) {
+        if (value == null) {
+            return undefined;
         }
-        else if (metadataB.position.order === -1) {
-            return -1;
+        if (typeof value == 'function') {
+            return value;
         }
-        return metadataA.position.order - metadataB.position.order;
+        return (() => value);
     }
     /**
-     * Gets the bootstrap column values for "lg", "md", "sm".
+     * Converts the given boolean or boolean function to a boolean function.
      *
-     * @param entity - Entity to get the bootstrap column values of the key.
-     * @param key - Key of the property to get bootstrap column values from.
-     * @param type - Defines for which screen size the column values should be returned.
-     * @returns Bootstrap column value.
+     * @param value - The value to convert.
+     * @returns A function that resolves to a boolean.
      */
-    static getWidth(entity, key, type) {
-        const metadata = EntityUtilities.getPropertyMetadata(entity, key);
-        switch (type) {
-            case 'lg':
-                return metadata.defaultWidths[0];
-            case 'md':
-                return metadata.defaultWidths[1];
-            case 'sm':
-                return metadata.defaultWidths[2];
+    booleanToFunction(value) {
+        if (typeof value !== 'boolean') {
+            return value;
         }
-    }
-    /**
-     * Resets all changes on an entity.
-     *
-     * @param entity - The entity to reset.
-     * @param entityPriorChanges - The entity before any changes.
-     */
-    static resetChangesOnEntity(entity, entityPriorChanges) {
-        for (const key in entityPriorChanges) {
-            ReflectUtilities.set(entity, key, ReflectUtilities.get(entityPriorChanges, key));
-            if (ReflectUtilities.hasMetadata(this.METADATA_KEYS_TO_RESET_KEY, entity, key)) {
-                for (const k of ReflectUtilities.getMetadata(this.METADATA_KEYS_TO_RESET_KEY, entity, key)) {
-                    if (ReflectUtilities.hasMetadata(k, entity, key)) {
-                        ReflectUtilities.defineMetadata(k, undefined, entity, key);
-                    }
-                }
-            }
-        }
-    }
-    static getEntityRows(entity, tab, hideOmitForCreate, hideOmitForEdit, additionalOmitValues) {
-        const res = [];
-        const keys = EntityUtilities.keysOf(entity, hideOmitForCreate, hideOmitForEdit)
-            .filter(k => !additionalOmitValues.includes(k));
-        const numberOfRows = EntityUtilities.getNumberOfRows(keys, entity, tab);
-        for (let i = 1; i <= numberOfRows; i++) {
-            const row = {
-                row: i,
-                keys: EntityUtilities.getKeysForRow(keys, entity, i, tab)
-            };
-            res.push(row);
-        }
-        if (EntityUtilities.getKeysForRow(keys, entity, -1, tab).length) {
-            const lastRow = {
-                row: numberOfRows + 1,
-                keys: EntityUtilities.getKeysForRow(keys, entity, -1, tab)
-            };
-            res.push(lastRow);
-        }
-        return res;
-    }
-    /**
-     * Gets the 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.
-     * @param additionalOmitValues - Additional omit values.
-     * @returns The sorted Tabs containing the rows and the keys to display in that row.
-     */
-    static getEntityTabs(entity, hideOmitForCreate = false, hideOmitForEdit = false, additionalOmitValues = []) {
-        const res = [];
-        const keys = EntityUtilities.keysOf(entity, hideOmitForCreate, hideOmitForEdit)
-            .filter(k => !additionalOmitValues.includes(k));
-        const numberOfTabs = EntityUtilities.getNumberOfTabs(keys, entity);
-        // eslint-disable-next-line max-len
-        const firstTabRows = EntityUtilities.getEntityRows(entity, -1, hideOmitForCreate, hideOmitForEdit, additionalOmitValues);
-        if (firstTabRows.length) {
-            const firstTab = {
-                tabName: EntityUtilities.getFirstTabName(entity),
-                tab: -1,
-                rows: firstTabRows
-            };
-            res.push(firstTab);
-        }
-        for (let i = 2; i <= numberOfTabs; i++) {
-            const rows = EntityUtilities.getEntityRows(entity, i, hideOmitForCreate, hideOmitForEdit, additionalOmitValues);
-            if (rows.length) {
-                const tab = {
-                    tabName: EntityUtilities.getTabName(entity, i),
-                    tab: i,
-                    rows: rows
-                };
-                res.push(tab);
-            }
-        }
-        return res;
-    }
-    static getKeysForRow(keys, entity, row, tab) {
-        return keys
-            .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, 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) {
-        const providedTabName = ReflectUtilities.ownKeys(entity)
-            .map(k => EntityUtilities.getPropertyMetadata(entity, k))
-            .find(m => m.position.tab === tab && m.position.tabName)?.position.tabName;
-        return providedTabName ?? `Tab ${tab}`;
-    }
-    static getFirstTabName(entity) {
-        const providedTabName = ReflectUtilities.ownKeys(entity)
-            .map(k => EntityUtilities.getPropertyMetadata(entity, k))
-            .find(m => m.position.tabName && m.position.tab === -1)?.position.tabName;
-        return providedTabName ?? 'Tab 1';
-    }
-    /**
-     * Gets the keys of the provided entity correctly typed.
-     *
-     * @param entity - The entity to get the keys of.
-     * @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 An array of keys of the entity.
-     */
-    static keysOf(entity, hideOmitForCreate = false, hideOmitForEdit = false) {
-        let keys = ReflectUtilities.ownKeys(entity);
-        const dontDisplayKeys = EntityUtilities.getDontDisplayKeys(entity);
-        keys = keys.filter(k => !dontDisplayKeys.includes(k));
-        if (hideOmitForCreate) {
-            const omitForCreateKeys = EntityUtilities.getOmitForCreate(entity);
-            keys = keys.filter(k => !omitForCreateKeys.includes(k));
-        }
-        if (hideOmitForEdit) {
-            const omitForUpdateKeys = EntityUtilities.getOmitForUpdate(entity);
-            keys = keys.filter(k => !omitForUpdateKeys.includes(k));
-        }
-        return keys;
-    }
-    static getDontDisplayKeys(entity) {
-        const res = [];
-        for (const key of ReflectUtilities.ownKeys(entity)) {
-            const metadata = EntityUtilities.getPropertyMetadata(entity, key);
-            if (!metadata.display(entity)) {
-                res.push(key);
-            }
-        }
-        return res;
-    }
-}
-
-/**
- * The base decorator for setting metadata on properties.
- *
- * @param metadata - The metadata to define.
- * @param type - The type of metadata.
- * @param metadataKeysToReset - Any metadata keys which values should be set to undefined on reset.
- * @returns The method that sets the metadata.
- */
-function baseProperty(metadata, type, metadataKeysToReset) {
-    return function (target, propertyKey) {
-        ReflectUtilities.defineMetadata('metadata', metadata, target, propertyKey);
-        ReflectUtilities.defineMetadata('type', type, target, propertyKey);
-        // eslint-disable-next-line max-len
-        ReflectUtilities.defineMetadata(EntityUtilities.METADATA_KEYS_TO_RESET_KEY, metadataKeysToReset, target, propertyKey);
-    };
-}
-
-/**
- * The default false function.
- * A boolean false is resolved to this.
- *
- * @returns False.
- */
-function defaultFalse() {
-    return false;
-}
-
-/**
- * The internal Position. Sets default values and validates user input.
- */
-class PositionInternal {
-    // eslint-disable-next-line jsdoc/require-jsdoc
-    row;
-    // eslint-disable-next-line jsdoc/require-jsdoc
-    order;
-    // eslint-disable-next-line jsdoc/require-jsdoc
-    tab;
-    // eslint-disable-next-line jsdoc/require-jsdoc
-    tabName;
-    constructor(data) {
-        this.validateInput(data);
-        this.row = data?.row ?? -1;
-        this.order = data?.order ?? -1;
-        this.tab = data?.tab ?? -1;
-        this.tabName = data?.tabName;
-    }
-    validateInput(data) {
-        if (data?.order != null) {
-            if (data.order < 1) {
-                throw new Error('order must be at least 1');
-            }
-            if (data.order > 12) {
-                throw new Error('order cannot be bigger than 12 (the minimum value for a bootstrap column)');
-            }
-        }
-        if (data?.row != null && data.row < 1) {
-            throw new Error('row must be at least 1');
-        }
-        if (data?.tab != null && data.tab != -1 && data.tab < 2) {
-            throw new Error('tab must be either -1 for the first tab or at least 2');
-        }
-    }
-}
-/**
- * The internal PropertyDecoratorConfig. Sets default values.
- */
-class PropertyDecoratorConfigInternal {
-    // eslint-disable-next-line jsdoc/require-jsdoc
-    display;
-    // eslint-disable-next-line jsdoc/require-jsdoc
-    displayName;
-    // eslint-disable-next-line jsdoc/require-jsdoc
-    required;
-    // eslint-disable-next-line jsdoc/require-jsdoc
-    omitForCreate;
-    // eslint-disable-next-line jsdoc/require-jsdoc
-    omitForUpdate;
-    // eslint-disable-next-line jsdoc/require-jsdoc
-    defaultWidths;
-    // eslint-disable-next-line jsdoc/require-jsdoc
-    position;
-    // eslint-disable-next-line jsdoc/require-jsdoc
-    isReadOnly;
-    constructor(data) {
-        this.display = this.booleanToFunction(data.display ?? true);
-        this.displayName = data.displayName;
-        this.required = this.booleanToFunction(data.required ?? true);
-        this.omitForCreate = data.omitForCreate ?? false;
-        this.omitForUpdate = data.omitForUpdate ?? false;
-        this.defaultWidths = data.defaultWidths ?? [6, 6, 12];
-        this.position = new PositionInternal(data.position);
-        this.isReadOnly = this.booleanToFunction(data.isReadOnly ?? false);
-    }
-    /**
-     * Converts the given boolean or boolean function to a boolean function.
-     *
-     * @param value - The value to convert.
-     * @returns A function that resolves to a boolean.
-     */
-    booleanToFunction(value) {
-        if (typeof value !== 'boolean') {
-            return value;
-        }
-        return value ? defaultTrue : defaultFalse;
+        return value ? defaultTrue : defaultFalse;
     }
 }
 
@@ -1717,8 +1437,6 @@ class PasswordStringDecoratorConfigInternal extends PropertyDecoratorConfigInter
     needsConfirmation;
     // eslint-disable-next-line jsdoc/require-jsdoc
     confirmationDisplayName;
-    // eslint-disable-next-line jsdoc/require-jsdoc
-    passwordsDontMatchErrorMessage;
     constructor(data) {
         super(data);
         this.displayStyle = data.displayStyle;
@@ -1727,7 +1445,6 @@ class PasswordStringDecoratorConfigInternal extends PropertyDecoratorConfigInter
         this.regex = data.regex;
         this.needsConfirmation = data.needsConfirmation ?? true;
         this.confirmationDisplayName = data.confirmationDisplayName ?? 'Confirm Password';
-        this.passwordsDontMatchErrorMessage = data.passwordsDontMatchErrorMessage ?? 'Passwords need to match!';
         this.defaultWidths = data.defaultWidths ?? [12, 12, 12];
     }
 }
@@ -1946,6 +1663,30 @@ const defaultEditDataRoute = {
     canDeactivate: [UnsavedChangesGuard]
 };
 
+const NGX_VALIDATION_ERRORS_TOOLTIP_TITLE = new InjectionToken('Provider for the validation errors tooltip title.', {
+    providedIn: 'root',
+    factory: () => 'Validation Errors:'
+});
+/**
+ * The default function that gets the validation errors tooltip content.
+ *
+ * @param validationErrors - All validation errors for which the tooltip content should be generated.
+ * @returns A html string, containing a list of the name of each invalid property.
+ */
+function getValidationErrorsTooltipContent(validationErrors) {
+    const title = inject(NGX_VALIDATION_ERRORS_TOOLTIP_TITLE);
+    let res = `
+        ${title}
+        <br>
+        <ul style="margin-bottom: 0px; padding-left: 16px;">
+    `;
+    for (const error of validationErrors) {
+        res = res.concat(`<li>${error.property}</li>`);
+    }
+    res = res.concat('</ul>');
+    return res;
+}
+
 /**
  * A generic EntityService class.
  * Offers basic CRUD-functionality.
@@ -2131,91 +1872,663 @@ class EntityService {
         }
     }
     /**
-     * Builds the update request body from the given entity before and after its changes.
+     * Builds the update request body from the given entity before and after its changes.
+     *
+     * @param entity - The entity with changed values.
+     * @param entityPriorChanges - The entity before any changes.
+     * @returns A partial of only the changed values.
+     */
+    async entityToUpdateRequestBody(entity, entityPriorChanges) {
+        const body = await EntityUtilities.getWithoutOmitUpdateValues(entity, entityPriorChanges, this.http);
+        return LodashUtilities.omitBy(body, LodashUtilities.isNil);
+    }
+    // TODO: Find a way to use blobs with jest
+    /* istanbul ignore next */
+    /**
+     * Updates the entity with form data when the entity contains files in contrast to creating it with a normal json body.
+     * All file values are stored inside their respective property key and their name.
+     * Form data is able to handle setting multiple files to the same key.
+     *
+     * @param body - The request body. Already contains only properties that have changed.
+     * @param filePropertyKeys - The keys of all properties which are files and need to separately be appended to the form data.
+     * @param entity - The original entity. Is needed to get the metadata of all the files.
+     * @param id - The id of the entity to update.
+     */
+    async updateWithFormData(body, filePropertyKeys, entity, id) {
+        const formData = new FormData();
+        formData.append('body', JSON.stringify(body));
+        for (const key of filePropertyKeys) {
+            if (EntityUtilities.getPropertyMetadata(entity, key, DecoratorTypes.FILE_DEFAULT).multiple) {
+                const fileDataValues = body[key];
+                for (const value of fileDataValues) {
+                    formData.append(key, (await FileUtilities.getFileData(value, this.http)).file, value.name);
+                }
+            }
+            else {
+                const fileData = body[key];
+                formData.append(key, (await FileUtilities.getFileData(fileData, this.http)).file, fileData.name);
+            }
+        }
+        const updatedEntity = await firstValueFrom(this.http.patch(`${this.baseUrl}/${id}`, formData));
+        if (!updatedEntity) {
+            // eslint-disable-next-line no-console
+            console.warn('The updated entity was not returned in the response. Applying the changes from the request body.');
+            for (const key in body) {
+                this.entities[this.entities.findIndex(e => e[this.idKey] === id)][key]
+                    = body[key];
+            }
+            this.entitiesSubject.next(this.entities);
+            return;
+        }
+        this.entities[this.entities.findIndex(e => e[this.idKey] === id)] = updatedEntity;
+        this.entitiesSubject.next(this.entities);
+    }
+    /**
+     * Updates the entity with a normal json body in contrast to updating it with form data when the entity contains files.
+     *
+     * @param body - The body of the Request. Has already removed all unnecessary values.
+     * @param id - The id of the entity to update.
+     */
+    async updateWithJson(body, id) {
+        const updatedEntity = await firstValueFrom(this.http.patch(`${this.baseUrl}/${id}`, LodashUtilities.omitBy(body, LodashUtilities.isNil)));
+        if (!updatedEntity) {
+            // eslint-disable-next-line no-console
+            console.warn('The updated entity was not returned in the response. Applying the changes from the request body.');
+            const foundEntity = this.entities[this.entities.findIndex(e => e[this.idKey] === id)];
+            for (const key in body) {
+                foundEntity[key]
+                    = body[key];
+            }
+            this.entitiesSubject.next(this.entities);
+            return;
+        }
+        this.entities[this.entities.findIndex(e => e[this.idKey] === id)] = updatedEntity;
+        this.entitiesSubject.next(this.entities);
+    }
+    /**
+     * Deletes a specific Entity.
+     *
+     * @param entity - The entity to delete.
+     */
+    async delete(entity) {
+        await firstValueFrom(this.http.delete(`${this.baseUrl}/${entity[this.idKey]}`));
+        // the == comparison instead of === is to catch ids that are numbers.
+        this.entities.splice(this.entities.findIndex(e => e[this.idKey] === entity[this.idKey]), 1);
+        this.entitiesSubject.next(this.entities);
+    }
+}
+
+/**
+ * Contains HelperMethods around handling Validation of entities and properties.
+ */
+class ValidationUtilities {
+    /**
+     * Checks if the values on an entity are valid.
+     * Also checks all the validators given by the metadata ("required", "maxLength" etc.).
+     *
+     * @param entity - The entity to validate.
+     * @param omit - Whether to check for creating or editing validity.
+     * @returns Whether or not the entity is valid.
+     */
+    static isEntityValid(entity, omit) {
+        return this.getEntityValidationErrors(entity, omit).length === 0;
+    }
+    /**
+     * Gets all validation errors on the given entity.
+     *
+     * @param entity - The entity to validate.
+     * @param omit - What keys not to check. An empty value means no keys are omitted.
+     * @returns An array of validation errors on the provided entity.
+     */
+    static getEntityValidationErrors(entity, omit) {
+        const res = [];
+        for (const key in entity) {
+            const err = this.getPropertyValidationError(entity, key, omit);
+            if (err) {
+                res.push(err);
+            }
+        }
+        return res;
+    }
+    // /**
+    //  * Checks if a single property value is valid.
+    //  *
+    //  * @param entity - The entity where the property is from.
+    //  * @param key - The name of the property.
+    //  * @param omit - Whether to check if the given entity is valid for creation or updating.
+    //  * @returns Whether or not the property value is valid.
+    //  * @throws Throws when it extracts an unknown metadata type.
+    //  */
+    // static isPropertyValid<EntityType extends BaseEntityType<EntityType>>(
+    //     entity: EntityType,
+    //     key: keyof EntityType,
+    //     omit?: 'create' | 'update'
+    // ): boolean {
+    //     return this.getPropertyValidationError(entity, key, omit) == null;
+    // }
+    /**
+     * Validates the property on the given entity with the given key.
+     *
+     * @param entity - The entity on which the property to check is.
+     * @param key - The key of the property to validate.
+     * @param omit - What keys not to check. An empty value means no keys are omitted.
+     * @returns A validation error when the property is not valid, undefined otherwise.
+     * @throws When the type of the property is not known.
+     */
+    static getPropertyValidationError(entity, key, omit) {
+        const type = EntityUtilities.getPropertyType(entity, key);
+        const metadata = EntityUtilities.getPropertyMetadata(entity, key, type);
+        if (metadata.omitForCreate && omit === 'create') {
+            return undefined;
+        }
+        if (metadata.omitForUpdate && omit === 'update') {
+            return undefined;
+        }
+        if (metadata.required(entity) && type !== DecoratorTypes.HAS_MANY) {
+            if (entity[key] == null || entity[key] === '') {
+                return {
+                    property: metadata.displayName,
+                    message: 'required'
+                };
+            }
+        }
+        if (!metadata.required(entity)) {
+            if (entity[key] == null || entity[key] === '') {
+                return undefined;
+            }
+        }
+        switch (type) {
+            case DecoratorTypes.BOOLEAN_DROPDOWN:
+                break;
+            case DecoratorTypes.BOOLEAN_CHECKBOX:
+            case DecoratorTypes.BOOLEAN_TOGGLE:
+                const entityBoolean = entity[key];
+                const booleanMetadata = metadata;
+                return this.getBooleanValidationError(entity, entityBoolean, booleanMetadata);
+            case DecoratorTypes.STRING_DROPDOWN:
+                break;
+            case DecoratorTypes.STRING:
+            case DecoratorTypes.STRING_AUTOCOMPLETE:
+                const entityString = entity[key];
+                const stringMetadata = metadata;
+                return this.getStringValidationError(entityString, stringMetadata);
+            case DecoratorTypes.STRING_TEXTBOX:
+                const entityTextbox = entity[key];
+                const textboxMetadata = metadata;
+                return this.getTextboxValidationError(entityTextbox, textboxMetadata);
+            case DecoratorTypes.STRING_PASSWORD:
+                const entityPassword = entity[key];
+                const passwordMetadata = metadata;
+                const confirmPassword = ReflectUtilities.getMetadata(EntityUtilities.CONFIRM_PASSWORD_KEY, entity, key);
+                return this.getPasswordValidationError(entityPassword, passwordMetadata, confirmPassword);
+            case DecoratorTypes.NUMBER_DROPDOWN:
+                // Because only valid values can be selected, this is always true when it has a value
+                return undefined;
+            case DecoratorTypes.NUMBER:
+            case DecoratorTypes.NUMBER_SLIDER:
+                const entityNumber = entity[key];
+                const numberMetadata = metadata;
+                return this.getNumberValidationError(entityNumber, numberMetadata);
+            case DecoratorTypes.OBJECT:
+                const entityObject = entity[key];
+                for (const parameterKey in entityObject) {
+                    const value = entityObject[parameterKey];
+                    if (!metadata.omit.includes(parameterKey)
+                        && !(!metadata.required(entity) && (value == null || value == ''))) {
+                        const err = this.getPropertyValidationError(entityObject, parameterKey, omit);
+                        if (err) {
+                            return {
+                                property: metadata.displayName,
+                                message: `${err.property} is invalid: ${err.message}`
+                            };
+                        }
+                    }
+                }
+                break;
+            case DecoratorTypes.ARRAY_STRING_CHIPS:
+            case DecoratorTypes.ARRAY_STRING_AUTOCOMPLETE_CHIPS:
+            case DecoratorTypes.ARRAY_DATE:
+            case DecoratorTypes.ARRAY_DATE_TIME:
+            case DecoratorTypes.ARRAY_DATE_RANGE:
+            case DecoratorTypes.ARRAY:
+                const entityArray = entity[key];
+                // eslint-disable-next-line max-len
+                const arrayMetadata = metadata;
+                if (arrayMetadata.required(entity) && !entityArray.length) {
+                    return {
+                        property: metadata.displayName,
+                        message: 'no items in array'
+                    };
+                }
+                break;
+            case DecoratorTypes.DATE:
+                const entityDate = new Date(entity[key]);
+                const dateMetadata = metadata;
+                return this.getDateValidationError(entityDate, dateMetadata);
+            case DecoratorTypes.DATE_RANGE:
+                const entityDateRange = LodashUtilities.cloneDeep(entity[key]);
+                const dateRangeMetadata = metadata;
+                return this.getDateRangeValidationError(entity, entityDateRange, dateRangeMetadata);
+            case DecoratorTypes.DATE_TIME:
+                const entityDateTime = new Date(entity[key]);
+                const dateTimeMetadata = metadata;
+                const hasTime = ReflectUtilities.hasMetadata(EntityUtilities.TIME_KEY, entity, key);
+                return this.getDateTimeValidationError(entityDateTime, dateTimeMetadata, hasTime);
+            case DecoratorTypes.FILE_DEFAULT:
+            case DecoratorTypes.FILE_IMAGE:
+                const entityFile = entity[key];
+                const entityFileMetadata = metadata;
+                return this.getFileDataValidationError(entityFile, entityFileMetadata);
+            case DecoratorTypes.REFERENCES_MANY:
+            case DecoratorTypes.REFERENCES_ONE:
+            case DecoratorTypes.HAS_MANY:
+                break;
+            case DecoratorTypes.CUSTOM:
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any, max-len
+                const customMetadata = metadata;
+                if (!customMetadata.isValid(entity[key], omit)) {
+                    return {
+                        property: metadata.displayName,
+                        message: 'invalid'
+                    };
+                }
+                break;
+            default:
+                throw new Error(`Could not validate the input because the DecoratorType ${type} is not known`);
+        }
+        return undefined;
+    }
+    static getBooleanValidationError(entity, value, metadata) {
+        if (metadata.required(entity) && !value) {
+            return {
+                property: metadata.displayName,
+                message: 'not selected'
+            };
+        }
+        return undefined;
+    }
+    static getStringValidationError(value, metadata) {
+        if (metadata.maxLength && value.length > metadata.maxLength) {
+            return {
+                property: metadata.displayName,
+                message: `needs to be smaller than ${metadata.maxLength} characters`
+            };
+        }
+        if (metadata.minLength && value.length < metadata.minLength) {
+            return {
+                property: metadata.displayName,
+                message: `needs to be bigger than ${metadata.minLength} characters`
+            };
+        }
+        if (metadata.regex && !value.match(metadata.regex)) {
+            return {
+                property: metadata.displayName,
+                message: 'invalid'
+            };
+        }
+        return undefined;
+    }
+    static getTextboxValidationError(value, metadata) {
+        if (metadata.maxLength && value.length > metadata.maxLength) {
+            return {
+                property: metadata.displayName,
+                message: `needs to be smaller than ${metadata.maxLength} characters`
+            };
+        }
+        if (metadata.minLength && value.length < metadata.minLength) {
+            return {
+                property: metadata.displayName,
+                message: `needs to be bigger than ${metadata.minLength} characters`
+            };
+        }
+        return undefined;
+    }
+    static getPasswordValidationError(value, metadata, confirmPassword) {
+        if (value !== confirmPassword) {
+            return {
+                property: metadata.displayName,
+                message: 'passwords need to match'
+            };
+        }
+        if (metadata.maxLength && value.length > metadata.maxLength) {
+            return {
+                property: metadata.displayName,
+                message: `needs to be smaller than ${metadata.maxLength} characters`
+            };
+        }
+        if (metadata.minLength && value.length < metadata.minLength) {
+            return {
+                property: metadata.displayName,
+                message: `needs to be bigger than ${metadata.minLength} characters`
+            };
+        }
+        if (metadata.regex && !value.match(metadata.regex)) {
+            return {
+                property: metadata.displayName,
+                message: 'invalid'
+            };
+        }
+        return undefined;
+    }
+    static getNumberValidationError(value, metadata) {
+        if (metadata.max && value > metadata.max) {
+            return {
+                property: metadata.displayName,
+                message: `needs to be smaller than ${metadata.max}`
+            };
+        }
+        if (metadata.min && value < metadata.min) {
+            return {
+                property: metadata.displayName,
+                message: `needs to be bigger than ${metadata.min}`
+            };
+        }
+        return undefined;
+    }
+    static getDateValidationError(value, metadata) {
+        if (metadata.min && value.getTime() < metadata.min(value).getTime()) {
+            return {
+                property: metadata.displayName,
+                message: `needs to be after ${formatDate(metadata.min(value))}`
+            };
+        }
+        if (metadata.max && value.getTime() > metadata.max(value).getTime()) {
+            return {
+                property: metadata.displayName,
+                message: `needs to be before ${formatDate(metadata.max(value))}`
+            };
+        }
+        if (metadata.filter && !metadata.filter(value)) {
+            return {
+                property: metadata.displayName,
+                message: 'invalid'
+            };
+        }
+        return undefined;
+    }
+    static getDateRangeValidationError(entity, value, metadata) {
+        if (metadata.required(entity)) {
+            if (value.start == null || value.end == null || value.values == null) {
+                return {
+                    property: metadata.displayName,
+                    message: 'required'
+                };
+            }
+        }
+        value.start = new Date(value.start);
+        value.end = new Date(value.end);
+        if (metadata.minStart && value.start.getTime() < metadata.minStart(value.start).getTime()) {
+            return {
+                property: metadata.displayName,
+                message: `start date needs to be after ${formatDate(metadata.minStart(value.start))}`
+            };
+        }
+        if (metadata.maxStart && value.start.getTime() > metadata.maxStart(value.start).getTime()) {
+            return {
+                property: metadata.displayName,
+                message: `start date needs to be before ${formatDate(metadata.maxStart(value.start))}`
+            };
+        }
+        if (metadata.minEnd && value.end.getTime() < metadata.minEnd(value.end).getTime()) {
+            return {
+                property: metadata.displayName,
+                message: `end date needs to be after ${formatDate(metadata.minEnd(value.end))}`
+            };
+        }
+        if (metadata.maxEnd && value.end.getTime() > metadata.maxEnd(value.end).getTime()) {
+            return {
+                property: metadata.displayName,
+                message: `end date needs to be before ${formatDate(metadata.maxEnd(value.end))}`
+            };
+        }
+        if (metadata.filter) {
+            if (!metadata.filter(value.start)) {
+                return {
+                    property: metadata.displayName,
+                    message: 'start date invalid'
+                };
+            }
+            if (!metadata.filter(value.end)) {
+                return {
+                    property: metadata.displayName,
+                    message: 'end date invalid'
+                };
+            }
+            for (const date of value.values) {
+                if (!metadata.filter(date)) {
+                    return {
+                        property: metadata.displayName,
+                        message: `value ${formatDate(date)} invalid`
+                    };
+                }
+            }
+        }
+        return undefined;
+    }
+    static getDateTimeValidationError(value, metadata, hasTime) {
+        if (!hasTime) {
+            return {
+                property: metadata.displayName,
+                message: 'no time'
+            };
+        }
+        if (metadata.minDate && value.getTime() < metadata.minDate(value).getTime()) {
+            return {
+                property: metadata.displayName,
+                message: `date needs to be after ${formatDate(metadata.minDate(value))}`
+            };
+        }
+        if (metadata.maxDate && value.getTime() > metadata.maxDate(value).getTime()) {
+            return {
+                property: metadata.displayName,
+                message: `date needs to be before ${formatDate(metadata.maxDate(value))}`
+            };
+        }
+        if (metadata.filterDate && !metadata.filterDate(value)) {
+            return {
+                property: metadata.displayName,
+                message: 'invalid date'
+            };
+        }
+        const time = DateUtilities.getTimeFromDate(value);
+        if (metadata.minTime) {
+            const minTime = metadata.minTime(value);
+            if (!(time.hours > minTime.hours
+                || (time.hours === minTime.hours
+                    && time.minutes >= minTime.minutes))) {
+                return {
+                    property: metadata.displayName,
+                    message: `time needs to be after ${minTime.hours}:${minTime.minutes}`
+                };
+            }
+        }
+        if (metadata.maxTime) {
+            const maxTime = metadata.maxTime(value);
+            if (!(time.hours < maxTime.hours
+                || (time.hours === maxTime.hours
+                    && time.minutes <= maxTime.minutes))) {
+                return {
+                    property: metadata.displayName,
+                    message: `time needs to be before ${maxTime.hours}:${maxTime.minutes}`
+                };
+            }
+        }
+        if (metadata.filterTime && !metadata.filterTime(time)) {
+            return {
+                property: metadata.displayName,
+                message: 'invalid time'
+            };
+        }
+        return undefined;
+    }
+    static getFileDataValidationError(value, metadata) {
+        const files = metadata.multiple ? value : [value];
+        let fileSizeTotal = 0;
+        for (const file of files) {
+            if (!file.name || !file.file && !file.url) {
+                return {
+                    property: metadata.displayName,
+                    message: 'invalid'
+                };
+            }
+            if (!FileUtilities.isMimeTypeValid(file.type, metadata.allowedMimeTypes)) {
+                return {
+                    property: metadata.displayName,
+                    message: `mimetype needs to be one of ${metadata.allowedMimeTypes}`
+                };
+            }
+            if (FileUtilities.transformToMegaBytes(file.size, 'B') > metadata.maxSize) {
+                return {
+                    property: metadata.displayName,
+                    message: `file needs to be smaller than ${metadata.maxSize} MB`
+                };
+            }
+            fileSizeTotal += file.size;
+            if (FileUtilities.transformToMegaBytes(fileSizeTotal, 'B') > metadata.maxSizeTotal) {
+                return {
+                    property: metadata.displayName,
+                    message: `The size of all files combined needs to be smaller than ${metadata.maxSizeTotal}`
+                };
+            }
+        }
+        return undefined;
+    }
+}
+// eslint-disable-next-line jsdoc/require-jsdoc
+function padTo2Digits(num) {
+    return num.toString().padStart(2, '0');
+}
+// eslint-disable-next-line jsdoc/require-jsdoc
+function formatDate(date) {
+    return [
+        padTo2Digits(date.getDate()),
+        padTo2Digits(date.getMonth() + 1),
+        date.getFullYear()
+    ].join('/');
+}
+
+/**
+ * Adds drag and drop functionality to an element.
+ */
+class DragDropDirective {
+    /**
+     * Emits the dropped files to the parent.
+     */
+    files = new EventEmitter();
+    constructor() { }
+    /**
+     * Prevents the event default.
+     *
+     * @param evt - The Event when dragged files hover over the parent.
+     */
+    onDragOver(evt) {
+        evt.preventDefault();
+        evt.stopPropagation();
+    }
+    /**
+     * Prevents the event default.
      *
-     * @param entity - The entity with changed values.
-     * @param entityPriorChanges - The entity before any changes.
-     * @returns A partial of only the changed values.
+     * @param evt - The Event when dragged files leave the parent.
      */
-    async entityToUpdateRequestBody(entity, entityPriorChanges) {
-        const body = await EntityUtilities.getWithoutOmitUpdateValues(entity, entityPriorChanges, this.http);
-        return LodashUtilities.omitBy(body, LodashUtilities.isNil);
+    onDragLeave(evt) {
+        evt.preventDefault();
+        evt.stopPropagation();
     }
-    // TODO: Find a way to use blobs with jest
-    /* istanbul ignore next */
     /**
-     * Updates the entity with form data when the entity contains files in contrast to creating it with a normal json body.
-     * All file values are stored inside their respective property key and their name.
-     * Form data is able to handle setting multiple files to the same key.
+     * Prevents the event default and emits the dropped files with the output.
      *
-     * @param body - The request body. Already contains only properties that have changed.
-     * @param filePropertyKeys - The keys of all properties which are files and need to separately be appended to the form data.
-     * @param entity - The original entity. Is needed to get the metadata of all the files.
-     * @param id - The id of the entity to update.
+     * @param evt - The Event when files are dropped.
      */
-    async updateWithFormData(body, filePropertyKeys, entity, id) {
-        const formData = new FormData();
-        formData.append('body', JSON.stringify(body));
-        for (const key of filePropertyKeys) {
-            if (EntityUtilities.getPropertyMetadata(entity, key, DecoratorTypes.FILE_DEFAULT).multiple) {
-                const fileDataValues = body[key];
-                for (const value of fileDataValues) {
-                    formData.append(key, (await FileUtilities.getFileData(value, this.http)).file, value.name);
-                }
-            }
-            else {
-                const fileData = body[key];
-                formData.append(key, (await FileUtilities.getFileData(fileData, this.http)).file, fileData.name);
-            }
-        }
-        const updatedEntity = await firstValueFrom(this.http.patch(`${this.baseUrl}/${id}`, formData));
-        if (!updatedEntity) {
-            // eslint-disable-next-line no-console
-            console.warn('The updated entity was not returned in the response. Applying the changes from the request body.');
-            for (const key in body) {
-                this.entities[this.entities.findIndex(e => e[this.idKey] === id)][key]
-                    = body[key];
-            }
-            this.entitiesSubject.next(this.entities);
-            return;
+    onDrop(evt) {
+        evt.preventDefault();
+        evt.stopPropagation();
+        if (evt.dataTransfer && evt.dataTransfer.files.length > 0) {
+            this.files.emit(Array.from(evt.dataTransfer.files));
         }
-        this.entities[this.entities.findIndex(e => e[this.idKey] === id)] = updatedEntity;
-        this.entitiesSubject.next(this.entities);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: DragDropDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.0", type: DragDropDirective, selector: "[dragDrop]", outputs: { files: "files" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: DragDropDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dragDrop]'
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { files: [{
+                type: Output
+            }], onDragOver: [{
+                type: HostListener,
+                args: ['dragover', ['$event']]
+            }], onDragLeave: [{
+                type: HostListener,
+                args: ['dragleave', ['$event']]
+            }], onDrop: [{
+                type: HostListener,
+                args: ['drop', ['$event']]
+            }] } });
+
+/**
+ * A directive that only allows number inputs.
+ */
+class NumberDirective {
+    el;
+    constructor(el) {
+        this.el = el;
     }
     /**
-     * Updates the entity with a normal json body in contrast to updating it with form data when the entity contains files.
+     * Prevents the default event when a key is pressed that is not a valid number, eg. 'A', 'B', 'C', 'D' etc.
      *
-     * @param body - The body of the Request. Has already removed all unnecessary values.
-     * @param id - The id of the entity to update.
+     * @param e - The keydown event from the user.
      */
-    async updateWithJson(body, id) {
-        const updatedEntity = await firstValueFrom(this.http.patch(`${this.baseUrl}/${id}`, LodashUtilities.omitBy(body, LodashUtilities.isNil)));
-        if (!updatedEntity) {
-            // eslint-disable-next-line no-console
-            console.warn('The updated entity was not returned in the response. Applying the changes from the request body.');
-            const foundEntity = this.entities[this.entities.findIndex(e => e[this.idKey] === id)];
-            for (const key in body) {
-                foundEntity[key]
-                    = body[key];
-            }
-            this.entitiesSubject.next(this.entities);
+    onKeyDown(e) {
+        if (!isNaN(parseInt(e.key))
+            || ['.', ',', 'Escape', 'Enter', 'Delete', 'Backspace', 'Home', 'End', 'Left', 'Right', 'Tab'].includes(e.key)
+            || (e.ctrlKey || e.metaKey) // && ['a', 'c', 'v', 'x', 'z'].includes(e.key)
+        ) {
             return;
         }
-        this.entities[this.entities.findIndex(e => e[this.idKey] === id)] = updatedEntity;
-        this.entitiesSubject.next(this.entities);
+        e.preventDefault();
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: NumberDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.0", type: NumberDirective, isStandalone: true, selector: "[number]", host: { listeners: { "keydown": "onKeyDown($event)" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: NumberDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[number]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { onKeyDown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
+/**
+ * A directive that validates if a given password matches the control value.
+ */
+class PasswordMatchValidatorDirective {
     /**
-     * Deletes a specific Entity.
-     *
-     * @param entity - The entity to delete.
+     * The password that the control value should be matched against.
      */
-    async delete(entity) {
-        await firstValueFrom(this.http.delete(`${this.baseUrl}/${entity[this.idKey]}`));
-        // the == comparison instead of === is to catch ids that are numbers.
-        this.entities.splice(this.entities.findIndex(e => e[this.idKey] === entity[this.idKey]), 1);
-        this.entitiesSubject.next(this.entities);
+    passwordMatch;
+    // eslint-disable-next-line jsdoc/require-jsdoc
+    validate(control) {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+        return this.passwordMatch == control.value ? null : { passwordMatch: { value: control.value } };
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: PasswordMatchValidatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.0", type: PasswordMatchValidatorDirective, isStandalone: true, selector: "[passwordMatch]", inputs: { passwordMatch: "passwordMatch" }, providers: [{ provide: NG_VALIDATORS, useExisting: PasswordMatchValidatorDirective, multi: true }], ngImport: i0 });
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: PasswordMatchValidatorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[passwordMatch]',
+                    providers: [{ provide: NG_VALIDATORS, useExisting: PasswordMatchValidatorDirective, multi: true }],
+                    standalone: true
+                }]
+        }], propDecorators: { passwordMatch: [{
+                type: Input
+            }] } });
 
 /* eslint-disable @angular-eslint/component-selector */
 /**
@@ -2361,6 +2674,7 @@ class NgxMatEntityBaseInputComponent {
     // eslint-disable-next-line jsdoc/require-jsdoc
     set propertyValue(value) {
         this.entity[this.key] = value;
+        this.metadata.change?.(this.entity);
     }
     /**
      * The metadata of the property.
@@ -2676,12 +2990,15 @@ class BooleanCheckboxInputComponent extends NgxMatEntityBaseInputComponent {
         super.ngOnInit();
         this.propertyValue = this.propertyValue ?? false;
     }
+    updatePropertyValue() {
+        this.propertyValue = this.propertyValue != null ? !this.propertyValue : true;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: BooleanCheckboxInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: BooleanCheckboxInputComponent, selector: "boolean-checkbox-input", usesInheritance: true, ngImport: i0, template: "<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-checkbox\n        color=\"primary\"\n        (ngModelChange)=\"emitChange()\"\n        (click)=\"model.control.markAsTouched()\"\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString() + uuid\"\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' + uuid\"\n        #model=\"ngModel\"\n        [pattern]=\"metadata.required(entity) ? 'true' : '[\\\\s\\\\S]*'\"\n        [required]=\"metadata.required(entity)\"\n        [disabled]=\"isReadOnly\"\n    >\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-checkbox{margin-top:-10px;margin-bottom:-10px}mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", 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]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: BooleanCheckboxInputComponent, selector: "boolean-checkbox-input", usesInheritance: true, ngImport: i0, template: "<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-checkbox\n        color=\"primary\"\n        (click)=\"model.control.markAsTouched(); updatePropertyValue(); emitChange();\"\n        [disabled]=\"isReadOnly\"\n        [class.disabled]=\"isReadOnly\"\n        [class.mat-checkbox-disabled]=\"false\"\n        [checked]=\"propertyValue\"\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() + uuid\"\n        #model=\"ngModel\"\n        [pattern]=\"metadata.required(entity) ? 'true' : '[\\\\s\\\\S]*'\"\n        [required]=\"metadata.required(entity)\"\n        [disabled]=\"isReadOnly\"\n    >\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-checkbox{margin-top:-10px;margin-bottom:-10px}mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", 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]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: BooleanCheckboxInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'boolean-checkbox-input', template: "<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-checkbox\n        color=\"primary\"\n        (ngModelChange)=\"emitChange()\"\n        (click)=\"model.control.markAsTouched()\"\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString() + uuid\"\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' + uuid\"\n        #model=\"ngModel\"\n        [pattern]=\"metadata.required(entity) ? 'true' : '[\\\\s\\\\S]*'\"\n        [required]=\"metadata.required(entity)\"\n        [disabled]=\"isReadOnly\"\n    >\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-checkbox{margin-top:-10px;margin-bottom:-10px}mat-form-field{width:100%}\n"] }]
+            args: [{ selector: 'boolean-checkbox-input', template: "<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-checkbox\n        color=\"primary\"\n        (click)=\"model.control.markAsTouched(); updatePropertyValue(); emitChange();\"\n        [disabled]=\"isReadOnly\"\n        [class.disabled]=\"isReadOnly\"\n        [class.mat-checkbox-disabled]=\"false\"\n        [checked]=\"propertyValue\"\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() + uuid\"\n        #model=\"ngModel\"\n        [pattern]=\"metadata.required(entity) ? 'true' : '[\\\\s\\\\S]*'\"\n        [required]=\"metadata.required(entity)\"\n        [disabled]=\"isReadOnly\"\n    >\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-checkbox{margin-top:-10px;margin-bottom:-10px}mat-form-field{width:100%}\n"] }]
         }] });
 
 /* eslint-disable jsdoc/require-jsdoc */
@@ -2700,12 +3017,15 @@ class BooleanToggleInputComponent extends NgxMatEntityBaseInputComponent {
         super.ngOnInit();
         this.propertyValue = this.propertyValue ?? false;
     }
+    updatePropertyValue() {
+        this.propertyValue = this.propertyValue != null ? !this.propertyValue : true;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: BooleanToggleInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: BooleanToggleInputComponent, selector: "boolean-toggle-input", usesInheritance: true, ngImport: i0, template: "<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-slide-toggle\n        color=\"primary\"\n        (click)=\"model.control.markAsTouched()\"\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString() + uuid\"\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' + uuid\"\n        #model=\"ngModel\"\n        [pattern]=\"metadata.required(entity) ? 'true' : '[\\\\s\\\\S]*'\"\n        [required]=\"metadata.required(entity)\"\n        (ngModelChange)=\"emitChange()\"\n    >\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", 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]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$3.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: BooleanToggleInputComponent, selector: "boolean-toggle-input", usesInheritance: true, ngImport: i0, template: "<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-slide-toggle\n        color=\"primary\"\n        (click)=\"model.control.markAsTouched(); updatePropertyValue(); emitChange();\"\n        [disabled]=\"isReadOnly\"\n        [checked]=\"propertyValue\"\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() + uuid\"\n        #model=\"ngModel\"\n        [pattern]=\"metadata.required(entity) ? 'true' : '[\\\\s\\\\S]*'\"\n        [required]=\"metadata.required(entity)\"\n        [disabled]=\"isReadOnly\"\n        (ngModelChange)=\"emitChange()\"\n    >\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", 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]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$3.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: BooleanToggleInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'boolean-toggle-input', template: "<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-slide-toggle\n        color=\"primary\"\n        (click)=\"model.control.markAsTouched()\"\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString() + uuid\"\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' + uuid\"\n        #model=\"ngModel\"\n        [pattern]=\"metadata.required(entity) ? 'true' : '[\\\\s\\\\S]*'\"\n        [required]=\"metadata.required(entity)\"\n        (ngModelChange)=\"emitChange()\"\n    >\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"] }]
+            args: [{ selector: 'boolean-toggle-input', template: "<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-slide-toggle\n        color=\"primary\"\n        (click)=\"model.control.markAsTouched(); updatePropertyValue(); emitChange();\"\n        [disabled]=\"isReadOnly\"\n        [checked]=\"propertyValue\"\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() + uuid\"\n        #model=\"ngModel\"\n        [pattern]=\"metadata.required(entity) ? 'true' : '[\\\\s\\\\S]*'\"\n        [required]=\"metadata.required(entity)\"\n        [disabled]=\"isReadOnly\"\n        (ngModelChange)=\"emitChange()\"\n    >\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"] }]
         }] });
 
 /* eslint-disable jsdoc/require-jsdoc */
@@ -2788,6 +3108,8 @@ class DateRangeInputComponent extends NgxMatEntityBaseInputComponent {
             this.dateRange.values = values.length ? values : undefined;
         }
         else {
+            this.dateRange.start = undefined;
+            this.dateRange.end = undefined;
             this.dateRange.values = undefined;
         }
         this.propertyValue = this.dateRange;
@@ -2857,66 +3179,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImpor
             args: [{ selector: 'date-time-input', template: "<div class=\"date-time\">\n    <mat-form-field>\n        <mat-label>{{metadata.displayName}}</mat-label>\n        <input\n            matInput\n            [(ngModel)]=\"propertyValue\"\n            [name]=\"key.toString() + uuid\"\n            #model=\"ngModel\"\n            [matDatepicker]=\"picker\"\n            [required]=\"metadata.required(entity)\"\n            [min]=\"metadata.minDate ? metadata.minDate(propertyValue) : undefined\"\n            [max]=\"metadata.maxDate ? metadata.maxDate(propertyValue) : undefined\"\n            [matDatepickerFilter]=\"metadata.filterDate ?? defaultDateFilter\"\n            (dateChange)=\"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' + uuid\"\n            #timeModel=\"ngModel\"\n            [required]=\"metadata.required(entity)\"\n            [compareWith]=\"compareTimes\"\n            [disabled]=\"isReadOnly\"\n            (selectionChange)=\"setTime()\"\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.
- */
-class DragDropDirective {
-    /**
-     * Emits the dropped files to the parent.
-     */
-    files = new EventEmitter();
-    constructor() { }
-    /**
-     * Prevents the event default.
-     *
-     * @param evt - The Event when dragged files hover over the parent.
-     */
-    onDragOver(evt) {
-        evt.preventDefault();
-        evt.stopPropagation();
-    }
-    /**
-     * Prevents the event default.
-     *
-     * @param evt - The Event when dragged files leave the parent.
-     */
-    onDragLeave(evt) {
-        evt.preventDefault();
-        evt.stopPropagation();
-    }
-    /**
-     * Prevents the event default and emits the dropped files with the output.
-     *
-     * @param evt - The Event when files are dropped.
-     */
-    onDrop(evt) {
-        evt.preventDefault();
-        evt.stopPropagation();
-        if (evt.dataTransfer && evt.dataTransfer.files.length > 0) {
-            this.files.emit(Array.from(evt.dataTransfer.files));
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: DragDropDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.0", type: DragDropDirective, selector: "[dragDrop]", outputs: { files: "files" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: DragDropDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[dragDrop]'
-                }]
-        }], ctorParameters: function () { return []; }, propDecorators: { files: [{
-                type: Output
-            }], onDragOver: [{
-                type: HostListener,
-                args: ['dragover', ['$event']]
-            }], onDragLeave: [{
-                type: HostListener,
-                args: ['dragleave', ['$event']]
-            }], onDrop: [{
-                type: HostListener,
-                args: ['drop', ['$event']]
-            }] } });
-
 /* eslint-disable jsdoc/require-jsdoc */
 class FileInputComponent {
     dialog;
@@ -3205,11 +3467,11 @@ class FileImageInputComponent extends NgxMatEntityBaseInputComponent {
         this.imageIndex = index;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: FileImageInputComponent, deps: [{ token: i2.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: FileImageInputComponent, selector: "file-image-input", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"!metadata.dragAndDrop && !metadata.preview\">\n    <file-input\n        (fileDataChangeEvent)=\"refreshFileData($event)\"\n        [propertyValue]=\"propertyValue\"\n        [metadata]=\"metadata\"\n        [getValidationErrorMessage]=\"getValidationErrorMessage\"\n        [isReadOnly]=\"isReadOnly\"\n        [entity]=\"entity\"\n        [key]=\"key\"\n    >\n    </file-input>\n</div>\n\n<div *ngIf=\"metadata.dragAndDrop || metadata.preview\" class=\"file-input mat-elevation-z8\">\n    <file-input\n        (fileDataChangeEvent)=\"refreshFileData($event)\"\n        [propertyValue]=\"propertyValue\"\n        [metadata]=\"metadata\"\n        [getValidationErrorMessage]=\"getValidationErrorMessage\"\n        [isReadOnly]=\"isReadOnly\"\n        [entity]=\"entity\"\n        [key]=\"key\"\n    >\n    </file-input>\n\n    <div class=\"image-preview\" *ngIf=\"metadata.preview && metadata.multiple\">\n        <i (click)=\"prev()\" [class.disabled]=\"imageIndex === 0\" class=\"prev-button fa-solid fa-angle-left\"></i>\n        <img *ngIf=\"multiPreviewImages?.[imageIndex]\" class=\"mat-elevation-z2\" [src]=\"multiPreviewImages?.[imageIndex]\">\n        <img *ngIf=\"!multiPreviewImages?.[imageIndex]\" class=\"mat-elevation-z2\" [src]=\"metadata.previewPlaceholderUrl ?? placeHolder\">\n        <i (click)=\"next()\"\n            [class.disabled]=\"!multiPreviewImages || !multiPreviewImages.length || imageIndex === (multiPreviewImages.length - 1)\"\n            class=\"next-button fa-solid fa-angle-right\"\n        >\n        </i>\n    </div>\n    <div class=\"preview-nav\" *ngIf=\"metadata.preview && metadata.multiple\">\n        <button type=\"button\" (click)=\"setIndex(imageIndex-4)\" mat-icon-button *ngIf=\"\n            this.multiPreviewImages\n            && multiPreviewImages[imageIndex-4]\n            && imageIndex === (this.multiPreviewImages.length - 1)\"\n        >\n            <span class=\"dot\"></span>\n            <span class=\"image-index\">{{imageIndex - 3}}</span>\n        </button>\n        <!-- eslint-disable-next-line @angular-eslint/template/conditional-complexity -->\n        <button type=\"button\" (click)=\"setIndex(imageIndex-3)\" mat-icon-button *ngIf=\"this.multiPreviewImages\n            && multiPreviewImages[imageIndex-3]\n            && (\n                imageIndex === (this.multiPreviewImages.length - 2)\n                || imageIndex === (this.multiPreviewImages.length - 1)\n            )\"\n        >\n            <span class=\"dot\"></span>\n            <span class=\"image-index\">{{imageIndex - 2}}</span>\n        </button>\n        <button type=\"button\" (click)=\"setIndex(imageIndex-2)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex-2]\">\n            <span class=\"dot\"></span>\n            <span class=\"image-index\">{{imageIndex - 1}}</span>\n        </button>\n        <button type=\"button\" (click)=\"setIndex(imageIndex-1)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex-1]\">\n            <i class=\"dot\"></i>\n            <span class=\"image-index\">{{imageIndex}}</span>\n        </button>\n        <button type=\"button\" mat-icon-button disabled>\n            <i class=\"dot selected\"></i>\n            <span class=\"image-index\">{{imageIndex + 1}}</span>\n        </button>\n        <button type=\"button\" (click)=\"setIndex(imageIndex+1)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex+1]\">\n            <span class=\"dot\"></span>\n            <span class=\"image-index\">{{imageIndex + 2}}</span>\n        </button>\n        <button type=\"button\" (click)=\"setIndex(imageIndex+2)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex+2]\">\n            <span class=\"dot\"></span>\n            <span class=\"image-index\">{{imageIndex + 3}}</span>\n        </button>\n        <button type=\"button\" (click)=\"setIndex(imageIndex+3)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex+3] && imageIndex <= 1\">\n            <span class=\"dot\"></span>\n            <span class=\"image-index\">{{imageIndex + 4}}</span>\n        </button>\n        <button type=\"button\" (click)=\"setIndex(imageIndex+4)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex+4] && imageIndex === 0\">\n            <span class=\"dot\"></span>\n            <span class=\"image-index\">{{imageIndex + 5}}</span>\n        </button>\n    </div>\n\n    <div class=\"image-preview\" *ngIf=\"metadata.preview && !metadata.multiple\">\n        <i class=\"prev-button disabled fa-solid fa-angle-left\"></i>\n        <img class=\"mat-elevation-z2\" [src]=\"singlePreviewImage ?? metadata.previewPlaceholderUrl ?? placeHolder\">\n        <i class=\"next-button disabled fa-solid fa-angle-right\"></i>\n    </div>\n    <div class=\"preview-nav\" *ngIf=\"metadata.preview && !metadata.multiple\">\n        <button type=\"button\" disabled mat-icon-button>\n            <span class=\"dot selected\"></span>\n            <span class=\"image-index\">1</span>\n        </button>\n    </div>\n</div>", styles: [".file-input{margin-top:15px;margin-bottom:15px;padding:15px;border-radius:5px}.image-preview{height:250px;display:flex;align-items:center;padding-top:15px;padding-bottom:15px}.image-preview .prev-button{font-size:100px;margin-left:5px;color:#0000008a}.image-preview .next-button{font-size:100px;margin-right:5px;color:#0000008a}.image-preview .prev-button:hover,.image-preview .next-button:hover{cursor:pointer;color:#000000b3;transition:all .5s ease}.image-preview .prev-button.disabled,.image-preview .next-button.disabled{color:#00000042}.image-preview .prev-button.disabled:hover,.image-preview .next-button.disabled:hover{color:#00000042;transition:none;cursor:default}.image-preview img{max-width:calc(100% - 100px);max-height:100%;margin-left:auto;margin-right:auto;border-radius:3px}.preview-nav{text-align:center}.preview-nav button{display:inline-block;width:18px;height:18px;margin-left:5px;margin-right:5px}.preview-nav button .dot{height:100%;width:100%;background-color:#00000061;border-radius:50%;display:block}.preview-nav button .dot.selected{background-color:#0000008a}.preview-nav button .image-index{position:absolute;height:100%;width:100%;display:block;top:-11.5px;color:#fff}.preview-nav button:hover .dot{background-color:#0000008a;transition:all .3s ease}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: FileInputComponent, selector: "file-input", inputs: ["propertyValue", "entity", "key", "metadata", "getValidationErrorMessage", "isReadOnly"], outputs: ["fileDataChangeEvent"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: FileImageInputComponent, selector: "file-image-input", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"!metadata.dragAndDrop && !metadata.preview\">\n    <file-input\n        (fileDataChangeEvent)=\"refreshFileData($event)\"\n        [propertyValue]=\"propertyValue\"\n        [metadata]=\"metadata\"\n        [getValidationErrorMessage]=\"getValidationErrorMessage\"\n        [isReadOnly]=\"isReadOnly\"\n        [entity]=\"entity\"\n        [key]=\"key\"\n    >\n    </file-input>\n</div>\n\n<div *ngIf=\"metadata.dragAndDrop || metadata.preview\" class=\"file-input mat-elevation-z8\">\n    <file-input\n        (fileDataChangeEvent)=\"refreshFileData($event)\"\n        [propertyValue]=\"propertyValue\"\n        [metadata]=\"metadata\"\n        [getValidationErrorMessage]=\"getValidationErrorMessage\"\n        [isReadOnly]=\"isReadOnly\"\n        [entity]=\"entity\"\n        [key]=\"key\"\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\n    <div class=\"preview-nav\" *ngIf=\"metadata.preview && metadata.multiple\">\n        <button type=\"button\" (click)=\"setIndex(imageIndex-4)\" mat-icon-button *ngIf=\"\n            this.multiPreviewImages\n            && multiPreviewImages[imageIndex-4]\n            && imageIndex === (this.multiPreviewImages.length - 1)\"\n        >\n            <div class=\"dot\">\n                <div class=\"image-index\">{{imageIndex - 3}}</div>\n            </div>\n        </button>\n        <!-- eslint-disable-next-line @angular-eslint/template/conditional-complexity -->\n        <button type=\"button\" (click)=\"setIndex(imageIndex-3)\" mat-icon-button *ngIf=\"this.multiPreviewImages\n            && multiPreviewImages[imageIndex-3]\n            && (\n                imageIndex === (this.multiPreviewImages.length - 2)\n                || imageIndex === (this.multiPreviewImages.length - 1)\n            )\"\n        >\n            <div class=\"dot\">\n                <div class=\"image-index\">{{imageIndex - 2}}</div>\n            </div>\n        </button>\n        <button type=\"button\" (click)=\"setIndex(imageIndex-2)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex-2]\">\n            <div class=\"dot\">\n                <div class=\"image-index\">{{imageIndex - 1}}</div>\n            </div>\n        </button>\n        <button type=\"button\" (click)=\"setIndex(imageIndex-1)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex-1]\">\n            <div class=\"dot\">\n                <div class=\"image-index\">{{imageIndex}}</div>\n            </div>\n        </button>\n        <button type=\"button\" mat-icon-button disabled>\n            <div class=\"dot selected\">\n                <div class=\"image-index\">{{imageIndex + 1}}</div>\n            </div>\n        </button>\n        <button type=\"button\" (click)=\"setIndex(imageIndex+1)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex+1]\">\n            <div class=\"dot\">\n                <div class=\"image-index\">{{imageIndex + 2}}</div>\n            </div>\n        </button>\n        <button type=\"button\" (click)=\"setIndex(imageIndex+2)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex+2]\">\n            <div class=\"dot\">\n                <div class=\"image-index\">{{imageIndex + 3}}</div>\n            </div>\n        </button>\n        <button type=\"button\" (click)=\"setIndex(imageIndex+3)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex+3] && imageIndex <= 1\">\n            <div class=\"dot\">\n                <div class=\"image-index\">{{imageIndex + 4}}</div>\n            </div>\n        </button>\n        <button type=\"button\" (click)=\"setIndex(imageIndex+4)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex+4] && imageIndex === 0\">\n            <div class=\"dot\">\n                <div class=\"image-index\">{{imageIndex + 5}}</div>\n            </div>\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\n    <div class=\"preview-nav\" *ngIf=\"metadata.preview && !metadata.multiple\">\n        <button type=\"button\" disabled mat-icon-button>\n            <div class=\"dot selected\">\n                <div class=\"image-index\">1</div>\n            </div>\n        </button>\n    </div>\n</div>", styles: [".file-input{margin-top:15px;margin-bottom:15px;padding:15px;border-radius:5px}.image-preview{height:250px;display:flex;align-items:center;padding-top:15px;padding-bottom:15px}.image-preview .prev-button{font-size:100px;margin-left:5px;color:#0000008a}.image-preview .next-button{font-size:100px;margin-right:5px;color:#0000008a}.image-preview .prev-button:hover,.image-preview .next-button:hover{cursor:pointer;color:#000000b3;transition:all .5s ease}.image-preview .prev-button.disabled,.image-preview .next-button.disabled{color:#00000042}.image-preview .prev-button.disabled:hover,.image-preview .next-button.disabled:hover{color:#00000042;transition:none;cursor:default}.image-preview img{max-width:calc(100% - 100px);max-height:100%;margin-left:auto;margin-right:auto;border-radius:3px}.preview-nav{display:flex;align-items:center;justify-content:center;column-gap:5px}.preview-nav button{display:flex;align-items:center;justify-content:center;padding:0;height:auto;width:auto}.preview-nav button .dot{display:flex;align-items:center;justify-content:center;height:25px;width:25px;min-width:25px;background-color:#00000061;border-radius:50%}.preview-nav button .dot .image-index{color:#fff;font-size:20px;font-weight:600}.preview-nav button .dot.selected{background-color:#0000008a}.preview-nav button:hover .dot{background-color:#0000008a;transition:all .3s ease}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: FileInputComponent, selector: "file-input", inputs: ["propertyValue", "entity", "key", "metadata", "getValidationErrorMessage", "isReadOnly"], outputs: ["fileDataChangeEvent"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: FileImageInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'file-image-input', template: "<div *ngIf=\"!metadata.dragAndDrop && !metadata.preview\">\n    <file-input\n        (fileDataChangeEvent)=\"refreshFileData($event)\"\n        [propertyValue]=\"propertyValue\"\n        [metadata]=\"metadata\"\n        [getValidationErrorMessage]=\"getValidationErrorMessage\"\n        [isReadOnly]=\"isReadOnly\"\n        [entity]=\"entity\"\n        [key]=\"key\"\n    >\n    </file-input>\n</div>\n\n<div *ngIf=\"metadata.dragAndDrop || metadata.preview\" class=\"file-input mat-elevation-z8\">\n    <file-input\n        (fileDataChangeEvent)=\"refreshFileData($event)\"\n        [propertyValue]=\"propertyValue\"\n        [metadata]=\"metadata\"\n        [getValidationErrorMessage]=\"getValidationErrorMessage\"\n        [isReadOnly]=\"isReadOnly\"\n        [entity]=\"entity\"\n        [key]=\"key\"\n    >\n    </file-input>\n\n    <div class=\"image-preview\" *ngIf=\"metadata.preview && metadata.multiple\">\n        <i (click)=\"prev()\" [class.disabled]=\"imageIndex === 0\" class=\"prev-button fa-solid fa-angle-left\"></i>\n        <img *ngIf=\"multiPreviewImages?.[imageIndex]\" class=\"mat-elevation-z2\" [src]=\"multiPreviewImages?.[imageIndex]\">\n        <img *ngIf=\"!multiPreviewImages?.[imageIndex]\" class=\"mat-elevation-z2\" [src]=\"metadata.previewPlaceholderUrl ?? placeHolder\">\n        <i (click)=\"next()\"\n            [class.disabled]=\"!multiPreviewImages || !multiPreviewImages.length || imageIndex === (multiPreviewImages.length - 1)\"\n            class=\"next-button fa-solid fa-angle-right\"\n        >\n        </i>\n    </div>\n    <div class=\"preview-nav\" *ngIf=\"metadata.preview && metadata.multiple\">\n        <button type=\"button\" (click)=\"setIndex(imageIndex-4)\" mat-icon-button *ngIf=\"\n            this.multiPreviewImages\n            && multiPreviewImages[imageIndex-4]\n            && imageIndex === (this.multiPreviewImages.length - 1)\"\n        >\n            <span class=\"dot\"></span>\n            <span class=\"image-index\">{{imageIndex - 3}}</span>\n        </button>\n        <!-- eslint-disable-next-line @angular-eslint/template/conditional-complexity -->\n        <button type=\"button\" (click)=\"setIndex(imageIndex-3)\" mat-icon-button *ngIf=\"this.multiPreviewImages\n            && multiPreviewImages[imageIndex-3]\n            && (\n                imageIndex === (this.multiPreviewImages.length - 2)\n                || imageIndex === (this.multiPreviewImages.length - 1)\n            )\"\n        >\n            <span class=\"dot\"></span>\n            <span class=\"image-index\">{{imageIndex - 2}}</span>\n        </button>\n        <button type=\"button\" (click)=\"setIndex(imageIndex-2)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex-2]\">\n            <span class=\"dot\"></span>\n            <span class=\"image-index\">{{imageIndex - 1}}</span>\n        </button>\n        <button type=\"button\" (click)=\"setIndex(imageIndex-1)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex-1]\">\n            <i class=\"dot\"></i>\n            <span class=\"image-index\">{{imageIndex}}</span>\n        </button>\n        <button type=\"button\" mat-icon-button disabled>\n            <i class=\"dot selected\"></i>\n            <span class=\"image-index\">{{imageIndex + 1}}</span>\n        </button>\n        <button type=\"button\" (click)=\"setIndex(imageIndex+1)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex+1]\">\n            <span class=\"dot\"></span>\n            <span class=\"image-index\">{{imageIndex + 2}}</span>\n        </button>\n        <button type=\"button\" (click)=\"setIndex(imageIndex+2)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex+2]\">\n            <span class=\"dot\"></span>\n            <span class=\"image-index\">{{imageIndex + 3}}</span>\n        </button>\n        <button type=\"button\" (click)=\"setIndex(imageIndex+3)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex+3] && imageIndex <= 1\">\n            <span class=\"dot\"></span>\n            <span class=\"image-index\">{{imageIndex + 4}}</span>\n        </button>\n        <button type=\"button\" (click)=\"setIndex(imageIndex+4)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex+4] && imageIndex === 0\">\n            <span class=\"dot\"></span>\n            <span class=\"image-index\">{{imageIndex + 5}}</span>\n        </button>\n    </div>\n\n    <div class=\"image-preview\" *ngIf=\"metadata.preview && !metadata.multiple\">\n        <i class=\"prev-button disabled fa-solid fa-angle-left\"></i>\n        <img class=\"mat-elevation-z2\" [src]=\"singlePreviewImage ?? metadata.previewPlaceholderUrl ?? placeHolder\">\n        <i class=\"next-button disabled fa-solid fa-angle-right\"></i>\n    </div>\n    <div class=\"preview-nav\" *ngIf=\"metadata.preview && !metadata.multiple\">\n        <button type=\"button\" disabled mat-icon-button>\n            <span class=\"dot selected\"></span>\n            <span class=\"image-index\">1</span>\n        </button>\n    </div>\n</div>", styles: [".file-input{margin-top:15px;margin-bottom:15px;padding:15px;border-radius:5px}.image-preview{height:250px;display:flex;align-items:center;padding-top:15px;padding-bottom:15px}.image-preview .prev-button{font-size:100px;margin-left:5px;color:#0000008a}.image-preview .next-button{font-size:100px;margin-right:5px;color:#0000008a}.image-preview .prev-button:hover,.image-preview .next-button:hover{cursor:pointer;color:#000000b3;transition:all .5s ease}.image-preview .prev-button.disabled,.image-preview .next-button.disabled{color:#00000042}.image-preview .prev-button.disabled:hover,.image-preview .next-button.disabled:hover{color:#00000042;transition:none;cursor:default}.image-preview img{max-width:calc(100% - 100px);max-height:100%;margin-left:auto;margin-right:auto;border-radius:3px}.preview-nav{text-align:center}.preview-nav button{display:inline-block;width:18px;height:18px;margin-left:5px;margin-right:5px}.preview-nav button .dot{height:100%;width:100%;background-color:#00000061;border-radius:50%;display:block}.preview-nav button .dot.selected{background-color:#0000008a}.preview-nav button .image-index{position:absolute;height:100%;width:100%;display:block;top:-11.5px;color:#fff}.preview-nav button:hover .dot{background-color:#0000008a;transition:all .3s ease}\n"] }]
+            args: [{ selector: 'file-image-input', template: "<div *ngIf=\"!metadata.dragAndDrop && !metadata.preview\">\n    <file-input\n        (fileDataChangeEvent)=\"refreshFileData($event)\"\n        [propertyValue]=\"propertyValue\"\n        [metadata]=\"metadata\"\n        [getValidationErrorMessage]=\"getValidationErrorMessage\"\n        [isReadOnly]=\"isReadOnly\"\n        [entity]=\"entity\"\n        [key]=\"key\"\n    >\n    </file-input>\n</div>\n\n<div *ngIf=\"metadata.dragAndDrop || metadata.preview\" class=\"file-input mat-elevation-z8\">\n    <file-input\n        (fileDataChangeEvent)=\"refreshFileData($event)\"\n        [propertyValue]=\"propertyValue\"\n        [metadata]=\"metadata\"\n        [getValidationErrorMessage]=\"getValidationErrorMessage\"\n        [isReadOnly]=\"isReadOnly\"\n        [entity]=\"entity\"\n        [key]=\"key\"\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\n    <div class=\"preview-nav\" *ngIf=\"metadata.preview && metadata.multiple\">\n        <button type=\"button\" (click)=\"setIndex(imageIndex-4)\" mat-icon-button *ngIf=\"\n            this.multiPreviewImages\n            && multiPreviewImages[imageIndex-4]\n            && imageIndex === (this.multiPreviewImages.length - 1)\"\n        >\n            <div class=\"dot\">\n                <div class=\"image-index\">{{imageIndex - 3}}</div>\n            </div>\n        </button>\n        <!-- eslint-disable-next-line @angular-eslint/template/conditional-complexity -->\n        <button type=\"button\" (click)=\"setIndex(imageIndex-3)\" mat-icon-button *ngIf=\"this.multiPreviewImages\n            && multiPreviewImages[imageIndex-3]\n            && (\n                imageIndex === (this.multiPreviewImages.length - 2)\n                || imageIndex === (this.multiPreviewImages.length - 1)\n            )\"\n        >\n            <div class=\"dot\">\n                <div class=\"image-index\">{{imageIndex - 2}}</div>\n            </div>\n        </button>\n        <button type=\"button\" (click)=\"setIndex(imageIndex-2)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex-2]\">\n            <div class=\"dot\">\n                <div class=\"image-index\">{{imageIndex - 1}}</div>\n            </div>\n        </button>\n        <button type=\"button\" (click)=\"setIndex(imageIndex-1)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex-1]\">\n            <div class=\"dot\">\n                <div class=\"image-index\">{{imageIndex}}</div>\n            </div>\n        </button>\n        <button type=\"button\" mat-icon-button disabled>\n            <div class=\"dot selected\">\n                <div class=\"image-index\">{{imageIndex + 1}}</div>\n            </div>\n        </button>\n        <button type=\"button\" (click)=\"setIndex(imageIndex+1)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex+1]\">\n            <div class=\"dot\">\n                <div class=\"image-index\">{{imageIndex + 2}}</div>\n            </div>\n        </button>\n        <button type=\"button\" (click)=\"setIndex(imageIndex+2)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex+2]\">\n            <div class=\"dot\">\n                <div class=\"image-index\">{{imageIndex + 3}}</div>\n            </div>\n        </button>\n        <button type=\"button\" (click)=\"setIndex(imageIndex+3)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex+3] && imageIndex <= 1\">\n            <div class=\"dot\">\n                <div class=\"image-index\">{{imageIndex + 4}}</div>\n            </div>\n        </button>\n        <button type=\"button\" (click)=\"setIndex(imageIndex+4)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex+4] && imageIndex === 0\">\n            <div class=\"dot\">\n                <div class=\"image-index\">{{imageIndex + 5}}</div>\n            </div>\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\n    <div class=\"preview-nav\" *ngIf=\"metadata.preview && !metadata.multiple\">\n        <button type=\"button\" disabled mat-icon-button>\n            <div class=\"dot selected\">\n                <div class=\"image-index\">1</div>\n            </div>\n        </button>\n    </div>\n</div>", styles: [".file-input{margin-top:15px;margin-bottom:15px;padding:15px;border-radius:5px}.image-preview{height:250px;display:flex;align-items:center;padding-top:15px;padding-bottom:15px}.image-preview .prev-button{font-size:100px;margin-left:5px;color:#0000008a}.image-preview .next-button{font-size:100px;margin-right:5px;color:#0000008a}.image-preview .prev-button:hover,.image-preview .next-button:hover{cursor:pointer;color:#000000b3;transition:all .5s ease}.image-preview .prev-button.disabled,.image-preview .next-button.disabled{color:#00000042}.image-preview .prev-button.disabled:hover,.image-preview .next-button.disabled:hover{color:#00000042;transition:none;cursor:default}.image-preview img{max-width:calc(100% - 100px);max-height:100%;margin-left:auto;margin-right:auto;border-radius:3px}.preview-nav{display:flex;align-items:center;justify-content:center;column-gap:5px}.preview-nav button{display:flex;align-items:center;justify-content:center;padding:0;height:auto;width:auto}.preview-nav button .dot{display:flex;align-items:center;justify-content:center;height:25px;width:25px;min-width:25px;background-color:#00000061;border-radius:50%}.preview-nav button .dot .image-index{color:#fff;font-size:20px;font-weight:600}.preview-nav button .dot.selected{background-color:#0000008a}.preview-nav button:hover .dot{background-color:#0000008a;transition:all .3s ease}\n"] }]
         }], ctorParameters: function () { return [{ type: i2.HttpClient }]; } });
 
 const NGX_GET_VALIDATION_ERROR_MESSAGE = new InjectionToken('Provider for the default getValidationErrorMessage.', {
@@ -3233,6 +3495,10 @@ function getValidationErrorMessage(model) {
         // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
         return `needs to be at least ${model.getError('minlength').requiredLength} characters long`;
     }
+    else if (model.hasError('maxlength')) {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+        return `needs to be at most ${model.getError('maxlength').requiredLength} characters long`;
+    }
     else if (model.hasError('min')) {
         // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
         return `needs to be equal or bigger than ${model.getError('min').min}`;
@@ -3241,6 +3507,9 @@ function getValidationErrorMessage(model) {
         // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
         return `needs to be equal or smaller than ${model.getError('max').max}`;
     }
+    else if (model.hasError('passwordMatch')) {
+        return 'Passwords need to match!';
+    }
     else if (model.hasError('required')) {
         return 'required';
     }
@@ -3748,21 +4017,21 @@ class StringPasswordInputComponent extends NgxMatEntityBaseInputComponent {
         this.emitChange();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: StringPasswordInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", 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() + uuid\"\n            #model=\"ngModel\"\n            [required]=\"metadata.required(entity)\"\n            [pattern]=\"metadata.regex ?? '[\\\\s\\\\S]*'\"\n            [minlength]=\"metadata.minLength ?? null\"\n            [maxlength]=\"metadata.maxLength ?? null\"\n            (ngModelChange)=\"passwordInput()\"\n            [disabled]=\"isReadOnly\"\n        >\n        <button type=\"button\" (click)=\"hide = !hide\" mat-icon-button matSuffix>\n            <i *ngIf=\"hide\" class=\"fas fa-eye-slash\"></i>\n            <i *ngIf=\"!hide\" class=\"fas fa-eye\"></i>\n        </button>\n        <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n    </mat-form-field>\n    <div *ngIf=\"metadata.needsConfirmation\" class=\"password-spacer\"></div>\n    <mat-form-field class=\"w-50\" *ngIf=\"metadata.needsConfirmation\">\n        <mat-label>{{metadata.confirmationDisplayName}}</mat-label>\n        <input\n            [type]=\"hideConfirm ? 'password' : 'text'\"\n            matInput\n            [(ngModel)]=\"confirmPassword\"\n            [name]=\"key.toString() + 'confirmPassword' + uuid\"\n            #confirmModel=\"ngModel\"\n            [required]=\"confirmRequired\"\n            (ngModelChange)=\"passwordInput()\"\n            [disabled]=\"isReadOnly\"\n        >\n        <button type=\"button\" (click)=\"hideConfirm = !hideConfirm\" mat-icon-button matSuffix>\n            <i *ngIf=\"hideConfirm\" class=\"fas fa-eye-slash\"></i>\n            <i *ngIf=\"!hideConfirm\" class=\"fas fa-eye\"></i>\n        </button>\n        <mat-error>{{getValidationErrorMessage(confirmModel)}}</mat-error>\n    </mat-form-field>\n</div>\n\n<mat-error *ngIf=\"metadata.needsConfirmation && propertyValue && confirmPassword && (confirmPassword !== propertyValue)\">\n    {{metadata.passwordsDontMatchErrorMessage}}\n</mat-error>", styles: [".password-row{display:flex;justify-content:space-between}.password-spacer{margin-left:12px;margin-right:12px}.w-50{width:50%}.w-100{width:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", 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]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: StringPasswordInputComponent, selector: "string-password-input", usesInheritance: true, ngImport: i0, template: "<div class=\"password-row\">\n    <mat-form-field>\n        <mat-label>{{metadata.displayName}}</mat-label>\n        <input\n            [type]=\"hide ? 'password' : 'text'\"\n            matInput\n            [(ngModel)]=\"propertyValue\"\n            [name]=\"key.toString() + uuid\"\n            #model=\"ngModel\"\n            [required]=\"metadata.required(entity)\"\n            [pattern]=\"metadata.regex ?? '[\\\\s\\\\S]*'\"\n            [minlength]=\"metadata.minLength ?? null\"\n            [maxlength]=\"metadata.maxLength ?? null\"\n            (ngModelChange)=\"passwordInput()\"\n            [disabled]=\"isReadOnly\"\n        >\n        <button type=\"button\" (click)=\"hide = !hide\" mat-icon-button matSuffix>\n            <div class=\"d-flex justify-content-center align-items-center\">\n                <i *ngIf=\"hide\" class=\"fas fa-eye-slash\"></i>\n                <i *ngIf=\"!hide\" class=\"fas fa-eye\"></i>\n            </div>\n        </button>\n        <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n    </mat-form-field>\n    <mat-form-field *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' + uuid\"\n            #confirmModel=\"ngModel\"\n            [required]=\"confirmRequired\"\n            (ngModelChange)=\"passwordInput()\"\n            [disabled]=\"isReadOnly\"\n            [passwordMatch]=\"propertyValue\"\n        >\n        <button type=\"button\" (click)=\"hideConfirm = !hideConfirm\" mat-icon-button matSuffix>\n            <div class=\"d-flex justify-content-center align-items-center\">\n                <i *ngIf=\"hideConfirm\" class=\"fas fa-eye-slash\"></i>\n                <i *ngIf=\"!hideConfirm\" class=\"fas fa-eye\"></i>\n            </div>\n        </button>\n        <mat-error>{{getValidationErrorMessage(confirmModel)}}</mat-error>\n    </mat-form-field>\n</div>", styles: [".password-row{display:flex;justify-content:space-evenly;column-gap:24px}.password-row mat-form-field{flex:1 1 0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", 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]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: PasswordMatchValidatorDirective, selector: "[passwordMatch]", inputs: ["passwordMatch"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", 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() + uuid\"\n            #model=\"ngModel\"\n            [required]=\"metadata.required(entity)\"\n            [pattern]=\"metadata.regex ?? '[\\\\s\\\\S]*'\"\n            [minlength]=\"metadata.minLength ?? null\"\n            [maxlength]=\"metadata.maxLength ?? null\"\n            (ngModelChange)=\"passwordInput()\"\n            [disabled]=\"isReadOnly\"\n        >\n        <button type=\"button\" (click)=\"hide = !hide\" mat-icon-button matSuffix>\n            <i *ngIf=\"hide\" class=\"fas fa-eye-slash\"></i>\n            <i *ngIf=\"!hide\" class=\"fas fa-eye\"></i>\n        </button>\n        <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n    </mat-form-field>\n    <div *ngIf=\"metadata.needsConfirmation\" class=\"password-spacer\"></div>\n    <mat-form-field class=\"w-50\" *ngIf=\"metadata.needsConfirmation\">\n        <mat-label>{{metadata.confirmationDisplayName}}</mat-label>\n        <input\n            [type]=\"hideConfirm ? 'password' : 'text'\"\n            matInput\n            [(ngModel)]=\"confirmPassword\"\n            [name]=\"key.toString() + 'confirmPassword' + uuid\"\n            #confirmModel=\"ngModel\"\n            [required]=\"confirmRequired\"\n            (ngModelChange)=\"passwordInput()\"\n            [disabled]=\"isReadOnly\"\n        >\n        <button type=\"button\" (click)=\"hideConfirm = !hideConfirm\" mat-icon-button matSuffix>\n            <i *ngIf=\"hideConfirm\" class=\"fas fa-eye-slash\"></i>\n            <i *ngIf=\"!hideConfirm\" class=\"fas fa-eye\"></i>\n        </button>\n        <mat-error>{{getValidationErrorMessage(confirmModel)}}</mat-error>\n    </mat-form-field>\n</div>\n\n<mat-error *ngIf=\"metadata.needsConfirmation && propertyValue && confirmPassword && (confirmPassword !== propertyValue)\">\n    {{metadata.passwordsDontMatchErrorMessage}}\n</mat-error>", styles: [".password-row{display:flex;justify-content:space-between}.password-spacer{margin-left:12px;margin-right:12px}.w-50{width:50%}.w-100{width:100%}\n"] }]
+            args: [{ selector: 'string-password-input', template: "<div class=\"password-row\">\n    <mat-form-field>\n        <mat-label>{{metadata.displayName}}</mat-label>\n        <input\n            [type]=\"hide ? 'password' : 'text'\"\n            matInput\n            [(ngModel)]=\"propertyValue\"\n            [name]=\"key.toString() + uuid\"\n            #model=\"ngModel\"\n            [required]=\"metadata.required(entity)\"\n            [pattern]=\"metadata.regex ?? '[\\\\s\\\\S]*'\"\n            [minlength]=\"metadata.minLength ?? null\"\n            [maxlength]=\"metadata.maxLength ?? null\"\n            (ngModelChange)=\"passwordInput()\"\n            [disabled]=\"isReadOnly\"\n        >\n        <button type=\"button\" (click)=\"hide = !hide\" mat-icon-button matSuffix>\n            <div class=\"d-flex justify-content-center align-items-center\">\n                <i *ngIf=\"hide\" class=\"fas fa-eye-slash\"></i>\n                <i *ngIf=\"!hide\" class=\"fas fa-eye\"></i>\n            </div>\n        </button>\n        <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n    </mat-form-field>\n    <mat-form-field *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' + uuid\"\n            #confirmModel=\"ngModel\"\n            [required]=\"confirmRequired\"\n            (ngModelChange)=\"passwordInput()\"\n            [disabled]=\"isReadOnly\"\n            [passwordMatch]=\"propertyValue\"\n        >\n        <button type=\"button\" (click)=\"hideConfirm = !hideConfirm\" mat-icon-button matSuffix>\n            <div class=\"d-flex justify-content-center align-items-center\">\n                <i *ngIf=\"hideConfirm\" class=\"fas fa-eye-slash\"></i>\n                <i *ngIf=\"!hideConfirm\" class=\"fas fa-eye\"></i>\n            </div>\n        </button>\n        <mat-error>{{getValidationErrorMessage(confirmModel)}}</mat-error>\n    </mat-form-field>\n</div>", styles: [".password-row{display:flex;justify-content:space-evenly;column-gap:24px}.password-row mat-form-field{flex:1 1 0}\n"] }]
         }] });
 
 /* eslint-disable jsdoc/require-jsdoc */
 class NumberInputComponent extends NgxMatEntityBaseInputComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: NumberInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", 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() + uuid\"\n        #model=\"ngModel\"\n        [required]=\"metadata.required(entity)\"\n        [min]=\"metadata.min ?? null\"\n        [max]=\"metadata.max ?? null\"\n        (ngModelChange)=\"emitChange()\"\n        [disabled]=\"isReadOnly\"\n    >\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", 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]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", 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() + uuid\"\n        #model=\"ngModel\"\n        [required]=\"metadata.required(entity)\"\n        [min]=\"metadata.min ?? null\"\n        [max]=\"metadata.max ?? null\"\n        (ngModelChange)=\"emitChange()\"\n        [disabled]=\"isReadOnly\"\n        number\n    >\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", 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]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NumberDirective, selector: "[number]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: NumberInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'number-input', template: "<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <input\n        matInput\n        type=\"number\"\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString() + uuid\"\n        #model=\"ngModel\"\n        [required]=\"metadata.required(entity)\"\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"] }]
+            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() + uuid\"\n        #model=\"ngModel\"\n        [required]=\"metadata.required(entity)\"\n        [min]=\"metadata.min ?? null\"\n        [max]=\"metadata.max ?? null\"\n        (ngModelChange)=\"emitChange()\"\n        [disabled]=\"isReadOnly\"\n        number\n    >\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"] }]
         }] });
 
 /* eslint-disable jsdoc/require-jsdoc */
@@ -3782,12 +4051,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImpor
 
 /* eslint-disable jsdoc/require-jsdoc */
 class NumberSliderInputComponent extends NgxMatEntityBaseInputComponent {
+    updatePropertyValue(value) {
+        this.propertyValue = value;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: NumberSliderInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: NumberSliderInputComponent, selector: "number-slider-input", usesInheritance: true, ngImport: i0, template: "<mat-slider\n    id=\"slider\"\n    color=\"primary\"\n    (click)=\"model.control.markAsTouched()\"\n    [min]=\"metadata.min ?? null\"\n    [max]=\"metadata.max ?? null\"\n    [step]=\"metadata.step\"\n    [discrete]=\"true\"\n    [displayWith]=\"metadata.formatThumbLabelValue\"\n    [showTickMarks]=\"metadata.showTickMarks\"\n    [disabled]=\"isReadOnly\"\n>\n    <input matSliderThumb\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString() + 'Helper' + uuid\"\n        #model=\"ngModel\"\n        [required]=\"metadata.required(entity)\"\n        [min]=\"metadata.min ?? null\"\n        [max]=\"metadata.max ?? null\"\n        (ngModelChange)=\"emitChange()\"\n        [disabled]=\"isReadOnly\"\n    >\n</mat-slider>\n\n<mat-form-field floatLabel=\"always\">\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <!-- hidden input is needed so that the slider can be used inside a mat-form-field -->\n    <input matInput style=\"opacity: 0%;\">\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%;margin-top:-40px}mat-slider{width:calc(100% - 40px);margin-left:20px;margin-right:20px;margin-bottom:-40px;z-index:999}::ng-deep #slider .mdc-slider__value-indicator-container{top:23px;left:57px;display:flex;transform:rotate(90deg) scale(1);border-radius:50%;pointer-events:auto}::ng-deep #slider .mdc-slider__value-indicator{padding-right:5px;padding-left:5px;transition:transform .1s 0ms cubic-bezier(0,0,.2,1);transform:scale(1)}::ng-deep #slider .mdc-slider__value-indicator-text{transform:rotate(270deg)}\n"], dependencies: [{ kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", 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]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$4.MatSlider, selector: "mat-slider", inputs: ["color", "disableRipple", "disabled", "discrete", "showTickMarks", "min", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i4$4.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: NumberSliderInputComponent, selector: "number-slider-input", usesInheritance: true, ngImport: i0, template: "<mat-slider\n    id=\"slider\"\n    color=\"primary\"\n    (click)=\"model.control.markAsTouched()\"\n    [min]=\"metadata.min ?? null\"\n    [max]=\"metadata.max ?? null\"\n    [step]=\"metadata.step\"\n    [discrete]=\"true\"\n    [displayWith]=\"metadata.formatThumbLabelValue\"\n    [showTickMarks]=\"metadata.showTickMarks\"\n    [disabled]=\"isReadOnly\"\n>\n    <input matSliderThumb\n        (valueChange)=\"updatePropertyValue($event)\"\n        [disabled]=\"isReadOnly\"\n    >\n</mat-slider>\n\n<mat-form-field floatLabel=\"always\">\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <!-- hidden input is needed so that the slider can be used inside a mat-form-field -->\n    <input matInput style=\"opacity: 0%;\"\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString() + uuid\"\n        #model=\"ngModel\"\n        [required]=\"metadata.required(entity)\"\n        [min]=\"metadata.min ?? null\"\n        [max]=\"metadata.max ?? null\"\n        (ngModelChange)=\"emitChange()\"\n        [disabled]=\"isReadOnly\"\n    >\n    \n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%;margin-top:-40px}mat-slider{width:calc(100% - 40px);margin-left:20px;margin-right:20px;margin-bottom:-40px;z-index:999}::ng-deep #slider .mdc-slider__value-indicator-container{top:23px;left:57px;display:flex;transform:rotate(90deg) scale(1);border-radius:50%;pointer-events:auto}::ng-deep #slider .mdc-slider__value-indicator{padding-right:5px;padding-left:5px;transition:transform .1s 0ms cubic-bezier(0,0,.2,1);transform:scale(1)}::ng-deep #slider .mdc-slider__value-indicator-text{transform:rotate(270deg)}\n"], dependencies: [{ kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", 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]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$4.MatSlider, selector: "mat-slider", inputs: ["color", "disableRipple", "disabled", "discrete", "showTickMarks", "min", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i4$4.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: NumberSliderInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'number-slider-input', template: "<mat-slider\n    id=\"slider\"\n    color=\"primary\"\n    (click)=\"model.control.markAsTouched()\"\n    [min]=\"metadata.min ?? null\"\n    [max]=\"metadata.max ?? null\"\n    [step]=\"metadata.step\"\n    [discrete]=\"true\"\n    [displayWith]=\"metadata.formatThumbLabelValue\"\n    [showTickMarks]=\"metadata.showTickMarks\"\n    [disabled]=\"isReadOnly\"\n>\n    <input matSliderThumb\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString() + 'Helper' + uuid\"\n        #model=\"ngModel\"\n        [required]=\"metadata.required(entity)\"\n        [min]=\"metadata.min ?? null\"\n        [max]=\"metadata.max ?? null\"\n        (ngModelChange)=\"emitChange()\"\n        [disabled]=\"isReadOnly\"\n    >\n</mat-slider>\n\n<mat-form-field floatLabel=\"always\">\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <!-- hidden input is needed so that the slider can be used inside a mat-form-field -->\n    <input matInput style=\"opacity: 0%;\">\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%;margin-top:-40px}mat-slider{width:calc(100% - 40px);margin-left:20px;margin-right:20px;margin-bottom:-40px;z-index:999}::ng-deep #slider .mdc-slider__value-indicator-container{top:23px;left:57px;display:flex;transform:rotate(90deg) scale(1);border-radius:50%;pointer-events:auto}::ng-deep #slider .mdc-slider__value-indicator{padding-right:5px;padding-left:5px;transition:transform .1s 0ms cubic-bezier(0,0,.2,1);transform:scale(1)}::ng-deep #slider .mdc-slider__value-indicator-text{transform:rotate(270deg)}\n"] }]
+            args: [{ selector: 'number-slider-input', template: "<mat-slider\n    id=\"slider\"\n    color=\"primary\"\n    (click)=\"model.control.markAsTouched()\"\n    [min]=\"metadata.min ?? null\"\n    [max]=\"metadata.max ?? null\"\n    [step]=\"metadata.step\"\n    [discrete]=\"true\"\n    [displayWith]=\"metadata.formatThumbLabelValue\"\n    [showTickMarks]=\"metadata.showTickMarks\"\n    [disabled]=\"isReadOnly\"\n>\n    <input matSliderThumb\n        (valueChange)=\"updatePropertyValue($event)\"\n        [disabled]=\"isReadOnly\"\n    >\n</mat-slider>\n\n<mat-form-field floatLabel=\"always\">\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <!-- hidden input is needed so that the slider can be used inside a mat-form-field -->\n    <input matInput style=\"opacity: 0%;\"\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString() + uuid\"\n        #model=\"ngModel\"\n        [required]=\"metadata.required(entity)\"\n        [min]=\"metadata.min ?? null\"\n        [max]=\"metadata.max ?? null\"\n        (ngModelChange)=\"emitChange()\"\n        [disabled]=\"isReadOnly\"\n    >\n    \n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%;margin-top:-40px}mat-slider{width:calc(100% - 40px);margin-left:20px;margin-right:20px;margin-bottom:-40px;z-index:999}::ng-deep #slider .mdc-slider__value-indicator-container{top:23px;left:57px;display:flex;transform:rotate(90deg) scale(1);border-radius:50%;pointer-events:auto}::ng-deep #slider .mdc-slider__value-indicator{padding-right:5px;padding-left:5px;transition:transform .1s 0ms cubic-bezier(0,0,.2,1);transform:scale(1)}::ng-deep #slider .mdc-slider__value-indicator-text{transform:rotate(270deg)}\n"] }]
         }] });
 
 /* eslint-disable jsdoc/require-jsdoc */
@@ -4547,7 +4819,7 @@ class NgxMatEntityInputComponent {
      * @param omit - Whether values omitted for create or update should be left out.
      */
     checkIsHasManyEntityValid(omit) {
-        this.isHasManyEntityValid = EntityUtilities.isEntityValid(this.hasManyEntity, omit);
+        this.isHasManyEntityValid = ValidationUtilities.isEntityValid(this.hasManyEntity, omit);
     }
     /**
      * Checks whether the array item is valid and if the array item is dirty.
@@ -4566,7 +4838,7 @@ class NgxMatEntityInputComponent {
      * Checks if the arrayItem is valid.
      */
     checkIsArrayItemValid() {
-        this.isArrayItemValid = EntityUtilities.isEntityValid(this.arrayItem, 'create');
+        this.isArrayItemValid = ValidationUtilities.isEntityValid(this.arrayItem, 'create');
     }
     /**
      * Emits that a the value has been changed.
@@ -4673,11 +4945,11 @@ class NgxMatEntityInputComponent {
         this.emitChange();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: NgxMatEntityInputComponent, deps: [{ token: i1.MatDialog }, { token: i0.EnvironmentInjector }, { token: i2$3.Router }, { token: NGX_GET_VALIDATION_ERROR_MESSAGE }, { token: i2.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: NgxMatEntityInputComponent, selector: "ngx-mat-entity-input", inputs: { entity: "entity", propertyKey: "propertyKey", getValidationErrorMessage: "getValidationErrorMessage", hideOmitForCreate: "hideOmitForCreate", hideOmitForEdit: "hideOmitForEdit", validEmpty: "validEmpty", isReadOnly: "isReadOnly" }, outputs: { inputChangeEvent: "inputChangeEvent" }, viewQueries: [{ propertyName: "addArrayItemDialog", first: true, predicate: ["addArrayItemDialog"], descendants: true }, { propertyName: "editArrayItemDialog", first: true, predicate: ["editArrayItemDialog"], descendants: true }, { propertyName: "hasManyPaginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "hasManySort", first: true, predicate: MatSort, descendants: true }, { propertyName: "hasManyFilter", first: true, predicate: ["filter"], descendants: true, static: true }, { propertyName: "createHasManyDialog", first: true, predicate: ["createHasManyDialog"], descendants: true }, { propertyName: "editHasManyDialog", first: true, predicate: ["editHasManyDialog"], 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    <!-------------------Array-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_DATE\">\n        <array-date-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </array-date-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_DATE_TIME\">\n        <array-date-time-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </array-date-time-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_DATE_RANGE\">\n        <array-date-range-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </array-date-range-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_STRING_CHIPS\">\n        <array-string-chips-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </array-string-chips-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_STRING_AUTOCOMPLETE_CHIPS\">\n        <array-string-autocomplete-chips\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </array-string-autocomplete-chips>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Dates-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.DATE\">\n        <date-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </date-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.DATE_RANGE\">\n        <date-range-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </date-range-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.DATE_TIME\">\n        <date-time-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </date-time-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Files-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.FILE_DEFAULT\">\n        <file-default-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </file-default-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.FILE_IMAGE\">\n        <file-image-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </file-image-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------- references many ------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.REFERENCES_MANY\">\n        <references-many-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </references-many-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Custom------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.CUSTOM\">\n        <custom-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </custom-input>\n    </div>\n\n    <!-------------------------------------------->\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                        [validEmpty]=\"!metadata.required(entity)\"\n                        [isReadOnly]=\"isPropertyReadOnly(objectProperty, key)\"\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                    [validEmpty]=\"!metadata.required(entity)\"\n                    [isReadOnly]=\"isPropertyReadOnly(objectProperty, key)\"\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    <!-------------- references one ------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.REFERENCES_ONE\">\n        <mat-form-field>\n            <mat-label>{{metadata.displayName}}</mat-label>\n            <mat-select [(ngModel)]=\"internalEntity[internalPropertyKey]\"\n                [name]=\"internalPropertyKey.toString() + 'input' + referencesOneUUID\"\n                #inputModel=\"ngModel\"\n                [disabled]=\"internalIsReadOnly\"\n                [required]=\"metadata.required(entity)\"\n                (ngModelChange)=\"setReferencesOneObject()\"\n            >\n                <mat-option *ngIf=\"!metadata.required(entity)\">-</mat-option>\n                <mat-option *ngFor=\"let value of referencesOneDropdownValues\" [value]=\"value.value\">{{value.displayName}}</mat-option>\n            </mat-select>\n            <mat-error>{{internalGetValidationErrorMessage(inputModel)}}</mat-error>\n        </mat-form-field>\n        <!-- iterates over the references one properties -->\n        <mat-tab-group *ngIf=\"referencesOnePropertyTabs && referencesOnePropertyTabs.length > 1\" preserveContent>\n            <mat-tab *ngFor=\"let tab of referencesOnePropertyTabs; 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]=\"referencesOneObject\"\n                        [propertyKey]=\"key\"\n                        [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                        [hideOmitForCreate]=\"hideOmitForCreate\"\n                        [hideOmitForEdit]=\"hideOmitForEdit\"\n                        [validEmpty]=\"!metadata.required(entity)\"\n                        [isReadOnly]=\"true\"\n                        class=\"col-lg-{{EntityUtilities.getWidth(referencesOneObject, key, 'lg')}} col-md-{{EntityUtilities.getWidth(referencesOneObject, key, 'md')}} col-sm-{{EntityUtilities.getWidth(referencesOneObject, key, 'sm')}}\"\n                        (inputChangeEvent)=\"emitChange()\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </mat-tab>\n        </mat-tab-group>\n\n        <div *ngIf=\"referencesOnePropertyTabs && referencesOnePropertyTabs.length <= 1\">\n            <div class=\"row\" *ngFor=\"let row of referencesOnePropertyTabs[0].rows\">\n                <ngx-mat-entity-input *ngFor=\"let key of row.keys; let i = index; trackBy: trackByFn\"\n                    [entity]=\"referencesOneObject\"\n                    [propertyKey]=\"key\"\n                    [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                    [hideOmitForCreate]=\"hideOmitForCreate\"\n                    [hideOmitForEdit]=\"hideOmitForEdit\"\n                    [validEmpty]=\"!metadata.required(entity)\"\n                    [isReadOnly]=\"true\"\n                    class=\"col-lg-{{EntityUtilities.getWidth(referencesOneObject, key, 'lg')}} col-md-{{EntityUtilities.getWidth(referencesOneObject, key, 'md')}} col-sm-{{EntityUtilities.getWidth(referencesOneObject, key, 'sm')}}\"\n                    (inputChangeEvent)=\"emitChange()\"\n                >\n                </ngx-mat-entity-input>\n            </div>\n        </div>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Array-------------------->\n    <!-------------------------------------------->\n    <div class=\"entityArray\" *ngSwitchCase=\"DecoratorTypes.ARRAY\">\n        <div class=\"mat-elevation-z8 elevation-container\">\n            <div class=\"array-headline\">\n                <b>{{metadataEntityArray.displayName}}</b>\n            </div>\n            <div *ngIf=\"metadataEntityArray.createInline && !internalIsReadOnly\">\n                <mat-tab-group *ngIf=\"arrayItemInlineTabs.length > 1\" preserveContent>\n                    <mat-tab *ngFor=\"let tab of arrayItemInlineTabs\" [label]=\"tab.tabName\">\n                        <div class=\"row\" *ngFor=\"let row of tab.rows\">\n                            <ngx-mat-entity-input\n                                *ngFor=\"let key of row.keys; let i = index; trackBy: trackByFn\"\n                                [entity]=\"arrayItem\"\n                                [propertyKey]=\"key\"\n                                [hideOmitForCreate]=\"true\"\n                                [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                                class=\"col-lg-{{EntityUtilities.getWidth(arrayItem, key, 'lg')}} col-md-{{EntityUtilities.getWidth(arrayItem, key, 'md')}} col-sm-{{EntityUtilities.getWidth(arrayItem, key, 'sm')}}\"\n                                (inputChangeEvent)=\"checkIsArrayItemValid()\"\n                            >\n                            </ngx-mat-entity-input>\n                        </div>\n                    </mat-tab>\n                </mat-tab-group>\n\n                <div *ngIf=\"arrayItemInlineTabs.length <= 1\">\n                    <div class=\"row\" *ngFor=\"let row of arrayItemInlineTabs[0].rows\">\n                        <ngx-mat-entity-input\n                            *ngFor=\"let key of row.keys; let i = index; trackBy: trackByFn\"\n                            [entity]=\"arrayItem\"\n                            [propertyKey]=\"key\"\n                            [hideOmitForCreate]=\"true\"\n                            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                            class=\"col-lg-{{EntityUtilities.getWidth(arrayItem, key, 'lg')}} col-md-{{EntityUtilities.getWidth(arrayItem, key, 'md')}} col-sm-{{EntityUtilities.getWidth(arrayItem, key, 'sm')}}\"\n                            (inputChangeEvent)=\"checkIsArrayItemValid()\"\n                        >\n                        </ngx-mat-entity-input>\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"buttons\" *ngIf=\"!internalIsReadOnly\">\n                <button type=\"button\" mat-raised-button\n                    [disabled]=\"metadataEntityArray.createInline && !isArrayItemValid\"\n                    (click)=\"addEntity()\">\n                    {{metadataEntityArray.addButtonLabel}}\n                </button>\n                <button type=\"button\" mat-raised-button\n                    [disabled]=\"!entityArraySelection.selected.length\"\n                    (click)=\"removeFromEntityArray()\">\n                    {{metadataEntityArray.removeButtonLabel}}\n                </button>\n            </div>\n        \n            <mat-table [dataSource]=\"entityArrayDataSource\">\n                <!-- select Column -->\n                <ng-container matColumnDef=\"select\" *ngIf=\"!internalIsReadOnly\">\n                    <mat-header-cell *matHeaderCellDef>\n                        <mat-checkbox\n                            [disabled]=\"!entityArrayDataSource.data.length\" (change)=\"$event ? SelectionUtilities.masterToggle(entityArraySelection, entityArrayDataSource) : null\"\n                            [checked]=\"entityArraySelection.hasValue() && SelectionUtilities.isAllSelected(entityArraySelection, entityArrayDataSource)\"\n                            [indeterminate]=\"entityArraySelection.hasValue() && !SelectionUtilities.isAllSelected(entityArraySelection, entityArrayDataSource)\">\n                        </mat-checkbox>\n                    </mat-header-cell>\n                    <mat-cell *matCellDef=\"let entity\">\n                        <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? entityArraySelection.toggle(entity) : null\" [checked]=\"entityArraySelection.isSelected(entity)\"></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.enabled]=\"!dCol.disableClick\" (click)=\"editArrayItem(entity, dCol)\" *matCellDef=\"let entity\">\n                        <ng-container *ngIf=\"dCol.Component\">\n                            <display-column-value [entity]=\"entity\" [ComponentClass]=\"dCol.Component\"></display-column-value>\n                        </ng-container>\n                        <ng-container *ngIf=\"!dCol.Component\">\n                            {{getDisplayColumnValue(entity, dCol)}}\n                        </ng-container>\n                    </mat-cell>\n                </ng-container>\n            \n                <mat-header-row *matHeaderRowDef=\"entityArrayDisplayedColumns\"></mat-header-row>\n                <mat-row *matRowDef=\"let row; columns: entityArrayDisplayedColumns\"></mat-row>\n            </mat-table>\n        \n            <div class=\"array-error\" *ngIf=\"metadataEntityArray.required(entity) && !entityArrayDataSource.data.length\">\n                {{metadataEntityArray.missingErrorMessage}}\n            </div>\n        </div>\n    </div>\n\n    <!-------------------------------------------->\n    <!------------------ has many ---------------->\n    <!-------------------------------------------->\n    <div class=\"hasMany\" *ngSwitchCase=\"DecoratorTypes.HAS_MANY\">\n        <h2 class=\"title\">{{metadataHasMany.tableData.baseData.title}}</h2>\n\n        <div class=\"row\">\n            <mat-form-field class=\"col-lg-8 col-md-6 col-sm-12\">\n                <mat-label>{{metadataHasMany.tableData.baseData.searchLabel}}</mat-label>\n                <input matInput (keyup)=\"applyHasManyFilter($event)\">\n            </mat-form-field>\n            <div\n                *ngIf=\"metadataHasMany.tableData.baseData.tableActions.length\"\n                [class.col-lg-2]=\"hasManyAllowCreate\"\n                [class.col-lg-4]=\"!hasManyAllowCreate\"\n                [class.col-md-3]=\"hasManyAllowCreate\"\n                [class.col-md-6]=\"!hasManyAllowCreate\"\n                [class.col-sm-6]=\"hasManyAllowCreate\"\n                [class.col-sm-12]=\"!hasManyAllowCreate\"\n            >\n                <button type=\"button\" class=\"actions-button\" [matMenuTriggerFor]=\"menu\" mat-raised-button>\n                    {{metadataHasMany.tableData.baseData.tableActionsLabel}}\n                </button>\n            </div>\n            <mat-menu #menu=\"matMenu\">\n                <button *ngIf=\"metadataHasMany.tableData.baseData.allowJsonImport\" type=\"button\" [disabled]=\"hasManyTableActionDisabled(hasManyImportAction)\" (click)=\"runHasManyTableAction(hasManyImportAction)\" mat-menu-item>\n                    {{hasManyImportAction.displayName}}\n                </button>\n                <button type=\"button\" *ngFor=\"let action of metadataHasMany.tableData.baseData.tableActions\" [disabled]=\"hasManyTableActionDisabled(action)\" (click)=\"runHasManyTableAction(action)\" mat-menu-item>\n                    {{action.displayName}}\n                </button>\n            </mat-menu>\n\n            <div\n                *ngIf=\"hasManyAllowCreate\"\n                [class.col-lg-2]=\"metadataHasMany.tableData.baseData.tableActions.length\"\n                [class.col-lg-4]=\"!metadataHasMany.tableData.baseData.tableActions.length\"\n                [class.col-md-3]=\"metadataHasMany.tableData.baseData.tableActions.length\"\n                [class.col-md-6]=\"!metadataHasMany.tableData.baseData.tableActions.length\"\n                [class.col-sm-6]=\"metadataHasMany.tableData.baseData.tableActions.length\"\n                [class.col-sm-12]=\"!metadataHasMany.tableData.baseData.tableActions.length\"\n            >\n                <button type=\"button\" class=\"create-button\" (click)=\"createHasManyEntity()\" mat-raised-button>\n                    {{metadataHasMany.tableData.baseData.createButtonLabel}}\n                </button>\n            </div>\n        </div>\n\n        <div class=\"mat-elevation-z8 elevation-container\">\n            <mat-table [dataSource]=\"hasManyDataSource\" matSort>\n                <!-- select Column -->\n                <ng-container matColumnDef=\"select\">\n                    <mat-header-cell *matHeaderCellDef>\n                        <mat-checkbox (change)=\"$event ? SelectionUtilities.masterToggle(hasManySelection, hasManyDataSource) : null\"\n                            [checked]=\"hasManySelection.hasValue() && SelectionUtilities.isAllSelected(hasManySelection, hasManyDataSource)\"\n                            [indeterminate]=\"hasManySelection.hasValue() && !SelectionUtilities.isAllSelected(hasManySelection, hasManyDataSource)\">\n                        </mat-checkbox>\n                    </mat-header-cell>\n                    <mat-cell *matCellDef=\"let entity\" class=\"enabled\">\n                        <mat-checkbox (click)=\"$event.stopPropagation()\"\n                            (change)=\"$event ? hasManySelection.toggle(entity) : null\"\n                            [checked]=\"hasManySelection.isSelected(entity)\">\n                        </mat-checkbox>\n                    </mat-cell>\n                </ng-container>\n\n                <ng-container *ngFor=\"let dCol of metadataHasMany.tableData.baseData.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n                    <mat-header-cell *matHeaderCellDef mat-sort-header>\n                        {{dCol.displayName}}\n                    </mat-header-cell>\n                    <mat-cell [class.enabled]=\"!dCol.disableClick && (hasManyAllowUpdate(entity) || hasManyAllowRead(entity))\"\n                        (click)=\"editHasManyEntity(entity, dCol)\"\n                        *matCellDef=\"let entity\"\n                    >\n                        <ng-container *ngIf=\"dCol.Component\">\n                            <display-column-value [entity]=\"entity\" [ComponentClass]=\"dCol.Component\"></display-column-value>\n                        </ng-container>\n                        <ng-container *ngIf=\"!dCol.Component\">\n                            {{getDisplayColumnValue(entity, dCol)}}\n                        </ng-container>\n                    </mat-cell>\n                </ng-container>\n\n                <mat-header-row *matHeaderRowDef=\"displayedHasManyColumns\"></mat-header-row>\n                <mat-row *matRowDef=\"let row; columns: displayedHasManyColumns\"></mat-row>\n            </mat-table>\n\n            <mat-spinner *ngIf=\"hasManyIsLoading && metadataHasMany.tableData.baseData.displayLoadingSpinner\">\n            </mat-spinner>\n\n            <mat-paginator [length]=\"hasManyDataSource.filteredData.length\" [pageIndex]=\"0\" [pageSize]=\"10\" [pageSizeOptions]=\"[5, 10, 25, 50]\"></mat-paginator>\n        </div>\n    </div>\n\n    <div *ngSwitchDefault>ERROR: The type {{type}} is not known.</div>\n</div>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n<!--------------------------------------------------------->\n<!--------------------Add Array Item Dialog---------------->\n<!--------------------------------------------------------->\n<ng-template #addArrayItemDialog>\n    <div class=\"mat-dialog-title\">\n        <div>{{addArrayItemDialogData.title}}</div>\n    </div>\n\n    <form>\n        <mat-dialog-content>\n            <mat-tab-group *ngIf=\"arrayItemDialogTabs.length > 1\" preserveContent>\n                <mat-tab *ngFor=\"let tab of arrayItemDialogTabs\" [label]=\"tab.tabName\">\n                    <div class=\"row\" *ngFor=\"let row of tab.rows\">\n                        <ngx-mat-entity-input\n                            *ngFor=\"let key of row.keys\"\n                            [entity]=\"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=\"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]=\"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        </mat-dialog-content>\n    \n        <mat-dialog-actions>\n            <button type=\"submit\" mat-raised-button (click)=\"addArrayItem()\" [disabled]=\"!isArrayItemValid\">\n                {{addArrayItemDialogData.createButtonLabel}}\n            </button>\n            <button type=\"button\" mat-raised-button (click)=\"closeAddArrayItemDialog()\" class=\"cancel-button\">\n                {{addArrayItemDialogData.cancelButtonLabel}}\n            </button>\n        </mat-dialog-actions>\n    </form>\n\n</ng-template>\n\n<!--------------------------------------------------------->\n<!--------------------Edit Array Item Dialog---------------->\n<!--------------------------------------------------------->\n<ng-template #editArrayItemDialog>\n    <div class=\"mat-dialog-title\">\n        <div>{{editArrayItemDialogData.title(arrayItemPriorChanges)}}</div>\n    </div>\n    \n    <form>\n        <mat-dialog-content>\n            <mat-tab-group *ngIf=\"arrayItemDialogTabs.length > 1\" preserveContent>\n                <mat-tab *ngFor=\"let tab of arrayItemDialogTabs\" [label]=\"tab.tabName\">\n                    <div class=\"row\" *ngFor=\"let row of tab.rows\">\n                        <ngx-mat-entity-input\n                            *ngFor=\"let key of row.keys\"\n                            [entity]=\"arrayItem\"\n                            [propertyKey]=\"key\"\n                            [hideOmitForEdit]=\"true\"\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)=\"checkArrayItem()\"\n                            [isReadOnly]=\"isPropertyReadOnly(arrayItem, key)\"\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]=\"arrayItem\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForEdit]=\"true\"\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)=\"checkArrayItem()\"\n                        [isReadOnly]=\"isPropertyReadOnly(arrayItem, key)\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </div>\n        </mat-dialog-content>\n        \n        <mat-dialog-actions>\n            <button type=\"submit\" (click)=\"saveArrayItem()\" mat-raised-button [disabled]=\"internalIsReadOnly || !isArrayItemValid || !isArrayItemDirty\">\n                {{editArrayItemDialogData.confirmButtonLabel}}\n            </button>\n            <button type=\"button\" mat-raised-button (click)=\"closeEditArrayItemDialog()\" class=\"cancel-button\">\n                {{editArrayItemDialogData.cancelButtonLabel}}\n            </button>\n        </mat-dialog-actions>\n    </form>\n</ng-template>\n\n<!--------------------------------------------------------->\n<!--------------------Create Has Many Dialog---------------->\n<!--------------------------------------------------------->\n<ng-template #createHasManyDialog>\n    <div class=\"mat-dialog-title\">\n        <div>{{metadataHasMany.tableData.createDialogData.title}}</div>\n    </div>\n    \n    <form>\n        <mat-dialog-content>\n            <mat-tab-group *ngIf=\"hasManyCreateTabs.length > 1\" preserveContent>\n                <mat-tab *ngFor=\"let tab of hasManyCreateTabs\" [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]=\"hasManyEntity\"\n                            [propertyKey]=\"key\"\n                            [hideOmitForCreate]=\"true\"\n                            class=\"col-lg-{{EntityUtilities.getWidth(hasManyEntity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(hasManyEntity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(hasManyEntity, key, 'sm')}}\"\n                            (inputChangeEvent)=\"checkIsHasManyEntityValid('create')\"\n                        >\n                        </ngx-mat-entity-input>\n                    </div>\n                </mat-tab>\n            </mat-tab-group>\n        \n            <div *ngIf=\"hasManyCreateTabs.length <= 1\">\n                <div class=\"row\" *ngFor=\"let row of hasManyCreateTabs[0].rows\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"hasManyEntity\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForCreate]=\"true\"\n                        class=\"col-lg-{{EntityUtilities.getWidth(hasManyEntity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(hasManyEntity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(hasManyEntity, key, 'sm')}}\"\n                        (inputChangeEvent)=\"checkIsHasManyEntityValid('create')\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </div>\n        </mat-dialog-content>\n        \n        <mat-dialog-actions>\n            <button type=\"submit\" (click)=\"dialogCreateHasMany()\" mat-raised-button [disabled]=\"!isHasManyEntityValid\">\n                {{metadataHasMany.tableData.createDialogData.createButtonLabel}}\n            </button>\n            <button type=\"button\" mat-raised-button (click)=\"dialogCancelCreateHasMany()\" class=\"cancel-button\">\n                {{metadataHasMany.tableData.createDialogData.cancelButtonLabel}}\n            </button>\n        </mat-dialog-actions>\n    </form>\n    \n</ng-template>\n\n<ng-template #editHasManyDialog>\n    <div class=\"mat-dialog-title\">\n        <div>{{metadataHasMany.tableData.editData.title(hasManyEntityPriorChanges)}}</div>\n\n        <div class=\"actions-container\">\n            <button *ngIf=\"metadataHasMany.tableData.editData.actions.length\" type=\"button\" [matMenuTriggerFor]=\"menu\" mat-raised-button>\n                {{metadataHasMany.tableData.editData.actionsLabel}}\n            </button>\n            <mat-menu #menu=\"matMenu\">\n                <button type=\"button\" *ngFor=\"let action of metadataHasMany.tableData.editData.actions\" [disabled]=\"hasManyEditActionDisabled(action)\" (click)=\"hasManyRunEditAction(action)\" mat-menu-item>\n                    {{action.displayName}}\n                </button>\n            </mat-menu>\n        \n            <button type=\"button\" *ngIf=\"hasManyAllowDelete(hasManyEntity)\" mat-raised-button (click)=\"deleteHasManyEntity()\" color=\"warn\" class=\"delete-button\" tabindex=\"-1\">\n                {{metadataHasMany.tableData.editData.deleteButtonLabel}}\n            </button>\n        </div>\n    </div>\n    \n    <form>\n        <mat-dialog-content>\n            <mat-tab-group *ngIf=\"hasManyUpdateTabs.length > 1\" preserveContent>\n                <mat-tab *ngFor=\"let tab of hasManyUpdateTabs\" [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]=\"hasManyEntity\"\n                            [propertyKey]=\"key\"\n                            [hideOmitForEdit]=\"true\"\n                            class=\"col-lg-{{EntityUtilities.getWidth(hasManyEntity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(hasManyEntity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(hasManyEntity, key, 'sm')}}\"\n                            (inputChangeEvent)=\"checkHasManyEntity()\"\n                            [isReadOnly]=\"isPropertyReadOnly(hasManyEntity, key)\"\n                        >\n                        </ngx-mat-entity-input>\n                    </div>\n                </mat-tab>\n            </mat-tab-group>\n        \n            <div *ngIf=\"hasManyUpdateTabs.length <= 1\">\n                <div class=\"row\" *ngFor=\"let row of hasManyUpdateTabs[0].rows\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"hasManyEntity\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForEdit]=\"true\"\n                        class=\"col-lg-{{EntityUtilities.getWidth(hasManyEntity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(hasManyEntity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(hasManyEntity, key, 'sm')}}\"\n                        (inputChangeEvent)=\"checkHasManyEntity()\"\n                        [isReadOnly]=\"isPropertyReadOnly(hasManyEntity, key)\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </div>\n        </mat-dialog-content>\n        \n        <mat-dialog-actions>\n            <button type=\"submit\" (click)=\"dialogEditHasMany()\" mat-raised-button [disabled]=\"internalIsReadOnly || !isHasManyEntityValid || !isHasManyEntityDirty\">\n                {{metadataHasMany.tableData.editData.confirmButtonLabel}}\n            </button>\n            <button type=\"button\" mat-raised-button (click)=\"dialogCancelEditHasMany()\" class=\"cancel-button\">\n                {{metadataHasMany.tableData.editData.cancelButtonLabel}}\n            </button>\n        </mat-dialog-actions>\n    </form>    \n</ng-template>", styles: [".mdc-data-table__row:last-child .mdc-data-table__cell{border-bottom:1px solid rgba(0,0,0,.12)}.mat-dialog-title{padding:12px 20px;display:flex;justify-content:space-between;align-items:center}.mat-dialog-title div{font-size:var(--mdc-dialog-subhead-size, 14px);font-weight:var(--mdc-dialog-subhead-weight, 500)}::ng-deep .mdc-dialog .mdc-dialog__content{padding:6px 20px!important}mat-dialog-actions{justify-content:space-between;align-items:center;padding-left:20px;padding-right:20px}mat-spinner{margin:10px auto}::ng-deep .mat-mdc-tab-body-wrapper{margin-left:-12px;margin-right:-12px}::ng-deep mat-tab-body{padding-top:10px;padding-left:12px;padding-right:12px}::ng-deep mat-tab-body .mat-mdc-tab-body-content{overflow:initial}::ng-deep .mat-mdc-form-field.mat-form-field-disabled label{color:#0009}::ng-deep .mat-mdc-form-field.mat-form-field-disabled input,::ng-deep .mat-mdc-form-field.mat-form-field-disabled textarea,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-select-disabled,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-select-value{color:#000}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-chip.mat-mdc-standard-chip.mat-mdc-chip-disabled{opacity:1}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-chip.mat-mdc-standard-chip.mat-mdc-chip-disabled button{opacity:.2}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-date-range-input-inner:disabled{color:#000}::ng-deep .mat-mdc-form-field .mat-mdc-slide-toggle{opacity:1}.entityArray .elevation-container{border-radius:5px;padding:15px;margin-bottom:15px;margin-top:15px}.entityArray .array-headline{padding-bottom:10px}.entityArray .buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px}.entityArray mat-table{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:25px}.entityArray .mat-column-select{flex:0 0 75px}.entityArray .enabled:hover{cursor:pointer}.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}.hasMany button{width:100%;height:56px;line-height:24px;font-size:16px}.hasMany .title{text-align:center}.hasMany .elevation-container{border-radius:5px;padding:5px;margin-bottom:15px}.hasMany .mat-column-select{flex:0 0 75px}.hasMany .enabled:hover{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i4$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i5$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6$2.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i6$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }, { kind: "component", type: i14.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i14.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i14.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i15.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i16.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: DisplayColumnValueComponent, selector: "display-column-value", inputs: ["entity", "ComponentClass"] }, { kind: "directive", type: i18.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i18.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: StringInputComponent, selector: "string-input" }, { kind: "component", type: StringTextboxInputComponent, selector: "string-textbox-input" }, { kind: "component", type: StringAutocompleteInputComponent, selector: "string-autocomplete-input" }, { kind: "component", type: StringDropdownInputComponent, selector: "string-dropdown-input" }, { kind: "component", type: StringPasswordInputComponent, selector: "string-password-input" }, { kind: "component", type: BooleanCheckboxInputComponent, selector: "boolean-checkbox-input" }, { kind: "component", type: BooleanToggleInputComponent, selector: "boolean-toggle-input" }, { kind: "component", type: BooleanDropdownInputComponent, selector: "boolean-dropdown-input" }, { kind: "component", type: NumberInputComponent, selector: "number-input" }, { kind: "component", type: NumberDropdownInputComponent, selector: "number-dropdown-input" }, { kind: "component", type: NumberSliderInputComponent, selector: "number-slider-input" }, { kind: "component", type: ArrayStringChipsInputComponent, selector: "array-string-chips-input" }, { kind: "component", type: ArrayStringAutocompleteChipsComponent, selector: "array-string-autocomplete-chips" }, { kind: "component", type: DateInputComponent, selector: "date-input" }, { kind: "component", type: DateRangeInputComponent, selector: "date-range-input" }, { kind: "component", type: DateTimeInputComponent, selector: "date-time-input" }, { kind: "component", type: ArrayDateInputComponent, selector: "array-date-input" }, { kind: "component", type: ArrayDateTimeInputComponent, selector: "array-date-time-input" }, { kind: "component", type: ArrayDateRangeInputComponent, selector: "array-date-range-input" }, { kind: "component", type: FileImageInputComponent, selector: "file-image-input" }, { kind: "component", type: FileDefaultInputComponent, selector: "file-default-input" }, { kind: "component", type: ReferencesManyInputComponent, selector: "references-many-input" }, { kind: "component", type: CustomInputComponent, selector: "custom-input" }, { kind: "component", type: NgxMatEntityInputComponent, selector: "ngx-mat-entity-input", inputs: ["entity", "propertyKey", "getValidationErrorMessage", "hideOmitForCreate", "hideOmitForEdit", "validEmpty", "isReadOnly"], outputs: ["inputChangeEvent"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: NgxMatEntityInputComponent, selector: "ngx-mat-entity-input", inputs: { entity: "entity", propertyKey: "propertyKey", getValidationErrorMessage: "getValidationErrorMessage", hideOmitForCreate: "hideOmitForCreate", hideOmitForEdit: "hideOmitForEdit", validEmpty: "validEmpty", isReadOnly: "isReadOnly" }, outputs: { inputChangeEvent: "inputChangeEvent" }, viewQueries: [{ propertyName: "addArrayItemDialog", first: true, predicate: ["addArrayItemDialog"], descendants: true }, { propertyName: "editArrayItemDialog", first: true, predicate: ["editArrayItemDialog"], descendants: true }, { propertyName: "hasManyPaginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "hasManySort", first: true, predicate: MatSort, descendants: true }, { propertyName: "hasManyFilter", first: true, predicate: ["filter"], descendants: true, static: true }, { propertyName: "createHasManyDialog", first: true, predicate: ["createHasManyDialog"], descendants: true }, { propertyName: "editHasManyDialog", first: true, predicate: ["editHasManyDialog"], 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    <!-------------------Array-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_DATE\">\n        <array-date-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </array-date-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_DATE_TIME\">\n        <array-date-time-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </array-date-time-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_DATE_RANGE\">\n        <array-date-range-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </array-date-range-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_STRING_CHIPS\">\n        <array-string-chips-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </array-string-chips-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_STRING_AUTOCOMPLETE_CHIPS\">\n        <array-string-autocomplete-chips\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </array-string-autocomplete-chips>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Dates-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.DATE\">\n        <date-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </date-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.DATE_RANGE\">\n        <date-range-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </date-range-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.DATE_TIME\">\n        <date-time-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </date-time-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Files-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.FILE_DEFAULT\">\n        <file-default-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </file-default-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.FILE_IMAGE\">\n        <file-image-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </file-image-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------- references many ------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.REFERENCES_MANY\">\n        <references-many-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </references-many-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Custom------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.CUSTOM\">\n        <custom-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </custom-input>\n    </div>\n\n    <!-------------------------------------------->\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                        [validEmpty]=\"!metadata.required(entity)\"\n                        [isReadOnly]=\"isPropertyReadOnly(objectProperty, key)\"\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                    [validEmpty]=\"!metadata.required(entity)\"\n                    [isReadOnly]=\"isPropertyReadOnly(objectProperty, key)\"\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    <!-------------- references one ------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.REFERENCES_ONE\">\n        <mat-form-field>\n            <mat-label>{{metadata.displayName}}</mat-label>\n            <mat-select [(ngModel)]=\"internalEntity[internalPropertyKey]\"\n                [name]=\"internalPropertyKey.toString() + 'input' + referencesOneUUID\"\n                #inputModel=\"ngModel\"\n                [disabled]=\"internalIsReadOnly\"\n                [required]=\"metadata.required(entity)\"\n                (ngModelChange)=\"setReferencesOneObject()\"\n            >\n                <mat-option *ngIf=\"!metadata.required(entity)\">-</mat-option>\n                <mat-option *ngFor=\"let value of referencesOneDropdownValues\" [value]=\"value.value\">{{value.displayName}}</mat-option>\n            </mat-select>\n            <mat-error>{{internalGetValidationErrorMessage(inputModel)}}</mat-error>\n        </mat-form-field>\n        <!-- iterates over the references one properties -->\n        <mat-tab-group *ngIf=\"referencesOnePropertyTabs && referencesOnePropertyTabs.length > 1\" preserveContent>\n            <mat-tab *ngFor=\"let tab of referencesOnePropertyTabs; 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]=\"referencesOneObject\"\n                        [propertyKey]=\"key\"\n                        [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                        [hideOmitForCreate]=\"hideOmitForCreate\"\n                        [hideOmitForEdit]=\"hideOmitForEdit\"\n                        [validEmpty]=\"!metadata.required(entity)\"\n                        [isReadOnly]=\"true\"\n                        class=\"col-lg-{{EntityUtilities.getWidth(referencesOneObject, key, 'lg')}} col-md-{{EntityUtilities.getWidth(referencesOneObject, key, 'md')}} col-sm-{{EntityUtilities.getWidth(referencesOneObject, key, 'sm')}}\"\n                        (inputChangeEvent)=\"emitChange()\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </mat-tab>\n        </mat-tab-group>\n\n        <div *ngIf=\"referencesOnePropertyTabs && referencesOnePropertyTabs.length <= 1\">\n            <div class=\"row\" *ngFor=\"let row of referencesOnePropertyTabs[0].rows\">\n                <ngx-mat-entity-input *ngFor=\"let key of row.keys; let i = index; trackBy: trackByFn\"\n                    [entity]=\"referencesOneObject\"\n                    [propertyKey]=\"key\"\n                    [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                    [hideOmitForCreate]=\"hideOmitForCreate\"\n                    [hideOmitForEdit]=\"hideOmitForEdit\"\n                    [validEmpty]=\"!metadata.required(entity)\"\n                    [isReadOnly]=\"true\"\n                    class=\"col-lg-{{EntityUtilities.getWidth(referencesOneObject, key, 'lg')}} col-md-{{EntityUtilities.getWidth(referencesOneObject, key, 'md')}} col-sm-{{EntityUtilities.getWidth(referencesOneObject, key, 'sm')}}\"\n                    (inputChangeEvent)=\"emitChange()\"\n                >\n                </ngx-mat-entity-input>\n            </div>\n        </div>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Array-------------------->\n    <!-------------------------------------------->\n    <div class=\"entityArray\" *ngSwitchCase=\"DecoratorTypes.ARRAY\">\n        <div class=\"mat-elevation-z8 elevation-container\">\n            <div class=\"array-headline\">\n                <b>{{metadataEntityArray.displayName}}</b>\n            </div>\n            <div *ngIf=\"metadataEntityArray.createInline && !internalIsReadOnly\">\n                <mat-tab-group *ngIf=\"arrayItemInlineTabs.length > 1\" preserveContent>\n                    <mat-tab *ngFor=\"let tab of arrayItemInlineTabs\" [label]=\"tab.tabName\">\n                        <div class=\"row\" *ngFor=\"let row of tab.rows\">\n                            <ngx-mat-entity-input\n                                *ngFor=\"let key of row.keys; let i = index; trackBy: trackByFn\"\n                                [entity]=\"arrayItem\"\n                                [propertyKey]=\"key\"\n                                [hideOmitForCreate]=\"true\"\n                                [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                                class=\"col-lg-{{EntityUtilities.getWidth(arrayItem, key, 'lg')}} col-md-{{EntityUtilities.getWidth(arrayItem, key, 'md')}} col-sm-{{EntityUtilities.getWidth(arrayItem, key, 'sm')}}\"\n                                (inputChangeEvent)=\"checkIsArrayItemValid()\"\n                            >\n                            </ngx-mat-entity-input>\n                        </div>\n                    </mat-tab>\n                </mat-tab-group>\n\n                <div *ngIf=\"arrayItemInlineTabs.length <= 1\">\n                    <div class=\"row\" *ngFor=\"let row of arrayItemInlineTabs[0].rows\">\n                        <ngx-mat-entity-input\n                            *ngFor=\"let key of row.keys; let i = index; trackBy: trackByFn\"\n                            [entity]=\"arrayItem\"\n                            [propertyKey]=\"key\"\n                            [hideOmitForCreate]=\"true\"\n                            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                            class=\"col-lg-{{EntityUtilities.getWidth(arrayItem, key, 'lg')}} col-md-{{EntityUtilities.getWidth(arrayItem, key, 'md')}} col-sm-{{EntityUtilities.getWidth(arrayItem, key, 'sm')}}\"\n                            (inputChangeEvent)=\"checkIsArrayItemValid()\"\n                        >\n                        </ngx-mat-entity-input>\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"buttons\" *ngIf=\"!internalIsReadOnly\">\n                <button type=\"button\" mat-raised-button\n                    [disabled]=\"metadataEntityArray.createInline && !isArrayItemValid\"\n                    (click)=\"addEntity()\">\n                    {{metadataEntityArray.addButtonLabel}}\n                </button>\n                <button type=\"button\" mat-raised-button\n                    [disabled]=\"!entityArraySelection.selected.length\"\n                    (click)=\"removeFromEntityArray()\">\n                    {{metadataEntityArray.removeButtonLabel}}\n                </button>\n            </div>\n        \n            <mat-table [dataSource]=\"entityArrayDataSource\">\n                <!-- select Column -->\n                <ng-container matColumnDef=\"select\" *ngIf=\"!internalIsReadOnly\">\n                    <mat-header-cell *matHeaderCellDef>\n                        <mat-checkbox\n                            [disabled]=\"!entityArrayDataSource.data.length\" (change)=\"$event ? SelectionUtilities.masterToggle(entityArraySelection, entityArrayDataSource) : null\"\n                            [checked]=\"entityArraySelection.hasValue() && SelectionUtilities.isAllSelected(entityArraySelection, entityArrayDataSource)\"\n                            [indeterminate]=\"entityArraySelection.hasValue() && !SelectionUtilities.isAllSelected(entityArraySelection, entityArrayDataSource)\">\n                        </mat-checkbox>\n                    </mat-header-cell>\n                    <mat-cell *matCellDef=\"let entity\">\n                        <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? entityArraySelection.toggle(entity) : null\" [checked]=\"entityArraySelection.isSelected(entity)\"></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.enabled]=\"!dCol.disableClick\" (click)=\"editArrayItem(entity, dCol)\" *matCellDef=\"let entity\">\n                        <ng-container *ngIf=\"dCol.Component\">\n                            <display-column-value [entity]=\"entity\" [ComponentClass]=\"dCol.Component\"></display-column-value>\n                        </ng-container>\n                        <ng-container *ngIf=\"!dCol.Component\">\n                            {{getDisplayColumnValue(entity, dCol)}}\n                        </ng-container>\n                    </mat-cell>\n                </ng-container>\n            \n                <mat-header-row *matHeaderRowDef=\"entityArrayDisplayedColumns\"></mat-header-row>\n                <mat-row *matRowDef=\"let row; columns: entityArrayDisplayedColumns\"></mat-row>\n            </mat-table>\n        \n            <div class=\"array-error\" *ngIf=\"metadataEntityArray.required(entity) && !entityArrayDataSource.data.length\">\n                {{metadataEntityArray.missingErrorMessage}}\n            </div>\n        </div>\n    </div>\n\n    <!-------------------------------------------->\n    <!------------------ has many ---------------->\n    <!-------------------------------------------->\n    <div class=\"hasMany\" *ngSwitchCase=\"DecoratorTypes.HAS_MANY\">\n        <h2 class=\"title\">{{metadataHasMany.tableData.baseData.title}}</h2>\n\n        <div class=\"row\">\n            <mat-form-field class=\"col-lg-8 col-md-6 col-sm-12\">\n                <mat-label>{{metadataHasMany.tableData.baseData.searchLabel}}</mat-label>\n                <input matInput (keyup)=\"applyHasManyFilter($event)\">\n            </mat-form-field>\n            <div\n                *ngIf=\"metadataHasMany.tableData.baseData.tableActions.length\"\n                [class.col-lg-2]=\"hasManyAllowCreate\"\n                [class.col-lg-4]=\"!hasManyAllowCreate\"\n                [class.col-md-3]=\"hasManyAllowCreate\"\n                [class.col-md-6]=\"!hasManyAllowCreate\"\n                [class.col-sm-6]=\"hasManyAllowCreate\"\n                [class.col-sm-12]=\"!hasManyAllowCreate\"\n            >\n                <button type=\"button\" class=\"actions-button\" [matMenuTriggerFor]=\"menu\" mat-raised-button>\n                    {{metadataHasMany.tableData.baseData.tableActionsLabel}}\n                </button>\n            </div>\n            <mat-menu #menu=\"matMenu\">\n                <button *ngIf=\"metadataHasMany.tableData.baseData.allowJsonImport\" type=\"button\" [disabled]=\"hasManyTableActionDisabled(hasManyImportAction)\" (click)=\"runHasManyTableAction(hasManyImportAction)\" mat-menu-item>\n                    {{hasManyImportAction.displayName}}\n                </button>\n                <button type=\"button\" *ngFor=\"let action of metadataHasMany.tableData.baseData.tableActions\" [disabled]=\"hasManyTableActionDisabled(action)\" (click)=\"runHasManyTableAction(action)\" mat-menu-item>\n                    {{action.displayName}}\n                </button>\n            </mat-menu>\n\n            <div\n                *ngIf=\"hasManyAllowCreate\"\n                [class.col-lg-2]=\"metadataHasMany.tableData.baseData.tableActions.length\"\n                [class.col-lg-4]=\"!metadataHasMany.tableData.baseData.tableActions.length\"\n                [class.col-md-3]=\"metadataHasMany.tableData.baseData.tableActions.length\"\n                [class.col-md-6]=\"!metadataHasMany.tableData.baseData.tableActions.length\"\n                [class.col-sm-6]=\"metadataHasMany.tableData.baseData.tableActions.length\"\n                [class.col-sm-12]=\"!metadataHasMany.tableData.baseData.tableActions.length\"\n            >\n                <button type=\"button\" class=\"create-button\" (click)=\"createHasManyEntity()\" mat-raised-button>\n                    {{metadataHasMany.tableData.baseData.createButtonLabel}}\n                </button>\n            </div>\n        </div>\n\n        <div class=\"mat-elevation-z8 elevation-container\">\n            <mat-table [dataSource]=\"hasManyDataSource\" matSort>\n                <!-- select Column -->\n                <ng-container matColumnDef=\"select\">\n                    <mat-header-cell *matHeaderCellDef>\n                        <mat-checkbox (change)=\"$event ? SelectionUtilities.masterToggle(hasManySelection, hasManyDataSource) : null\"\n                            [checked]=\"hasManySelection.hasValue() && SelectionUtilities.isAllSelected(hasManySelection, hasManyDataSource)\"\n                            [indeterminate]=\"hasManySelection.hasValue() && !SelectionUtilities.isAllSelected(hasManySelection, hasManyDataSource)\">\n                        </mat-checkbox>\n                    </mat-header-cell>\n                    <mat-cell *matCellDef=\"let entity\" class=\"enabled\">\n                        <mat-checkbox (click)=\"$event.stopPropagation()\"\n                            (change)=\"$event ? hasManySelection.toggle(entity) : null\"\n                            [checked]=\"hasManySelection.isSelected(entity)\">\n                        </mat-checkbox>\n                    </mat-cell>\n                </ng-container>\n\n                <ng-container *ngFor=\"let dCol of metadataHasMany.tableData.baseData.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n                    <mat-header-cell *matHeaderCellDef mat-sort-header>\n                        {{dCol.displayName}}\n                    </mat-header-cell>\n                    <mat-cell [class.enabled]=\"!dCol.disableClick && (hasManyAllowUpdate(entity) || hasManyAllowRead(entity))\"\n                        (click)=\"editHasManyEntity(entity, dCol)\"\n                        *matCellDef=\"let entity\"\n                    >\n                        <ng-container *ngIf=\"dCol.Component\">\n                            <display-column-value [entity]=\"entity\" [ComponentClass]=\"dCol.Component\"></display-column-value>\n                        </ng-container>\n                        <ng-container *ngIf=\"!dCol.Component\">\n                            {{getDisplayColumnValue(entity, dCol)}}\n                        </ng-container>\n                    </mat-cell>\n                </ng-container>\n\n                <mat-header-row *matHeaderRowDef=\"displayedHasManyColumns\"></mat-header-row>\n                <mat-row *matRowDef=\"let row; columns: displayedHasManyColumns\"></mat-row>\n            </mat-table>\n\n            <mat-spinner *ngIf=\"hasManyIsLoading && metadataHasMany.tableData.baseData.displayLoadingSpinner\">\n            </mat-spinner>\n\n            <mat-paginator [length]=\"hasManyDataSource.filteredData.length\" [pageIndex]=\"0\" [pageSize]=\"10\" [pageSizeOptions]=\"[5, 10, 25, 50]\"></mat-paginator>\n        </div>\n    </div>\n\n    <div *ngSwitchDefault>ERROR: The type {{type}} is not known.</div>\n</div>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n<!--------------------------------------------------------->\n<!--------------------Add Array Item Dialog---------------->\n<!--------------------------------------------------------->\n<ng-template #addArrayItemDialog>\n    <div class=\"mat-dialog-title\">\n        <div>{{addArrayItemDialogData.title}}</div>\n    </div>\n\n    <form>\n        <mat-dialog-content>\n            <mat-tab-group *ngIf=\"arrayItemDialogTabs.length > 1\" preserveContent>\n                <mat-tab *ngFor=\"let tab of arrayItemDialogTabs\" [label]=\"tab.tabName\">\n                    <div class=\"row\" *ngFor=\"let row of tab.rows\">\n                        <ngx-mat-entity-input\n                            *ngFor=\"let key of row.keys\"\n                            [entity]=\"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=\"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]=\"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        </mat-dialog-content>\n    \n        <mat-dialog-actions>\n            <button type=\"submit\" mat-raised-button (click)=\"addArrayItem()\" [disabled]=\"!isArrayItemValid\">\n                {{addArrayItemDialogData.createButtonLabel}}\n            </button>\n            <button type=\"button\" mat-raised-button (click)=\"closeAddArrayItemDialog()\" class=\"cancel-button\">\n                {{addArrayItemDialogData.cancelButtonLabel}}\n            </button>\n        </mat-dialog-actions>\n    </form>\n\n</ng-template>\n\n<!--------------------------------------------------------->\n<!--------------------Edit Array Item Dialog---------------->\n<!--------------------------------------------------------->\n<ng-template #editArrayItemDialog>\n    <div class=\"mat-dialog-title\">\n        <div>{{editArrayItemDialogData.title(arrayItemPriorChanges)}}</div>\n    </div>\n    \n    <form>\n        <mat-dialog-content>\n            <mat-tab-group *ngIf=\"arrayItemDialogTabs.length > 1\" preserveContent>\n                <mat-tab *ngFor=\"let tab of arrayItemDialogTabs\" [label]=\"tab.tabName\">\n                    <div class=\"row\" *ngFor=\"let row of tab.rows\">\n                        <ngx-mat-entity-input\n                            *ngFor=\"let key of row.keys\"\n                            [entity]=\"arrayItem\"\n                            [propertyKey]=\"key\"\n                            [hideOmitForEdit]=\"true\"\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)=\"checkArrayItem()\"\n                            [isReadOnly]=\"isPropertyReadOnly(arrayItem, key)\"\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]=\"arrayItem\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForEdit]=\"true\"\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)=\"checkArrayItem()\"\n                        [isReadOnly]=\"isPropertyReadOnly(arrayItem, key)\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </div>\n        </mat-dialog-content>\n        \n        <mat-dialog-actions>\n            <button type=\"submit\" (click)=\"saveArrayItem()\" mat-raised-button [disabled]=\"internalIsReadOnly || !isArrayItemValid || !isArrayItemDirty\">\n                {{editArrayItemDialogData.confirmButtonLabel}}\n            </button>\n            <button type=\"button\" mat-raised-button (click)=\"closeEditArrayItemDialog()\" class=\"cancel-button\">\n                {{editArrayItemDialogData.cancelButtonLabel}}\n            </button>\n        </mat-dialog-actions>\n    </form>\n</ng-template>\n\n<!--------------------------------------------------------->\n<!--------------------Create Has Many Dialog---------------->\n<!--------------------------------------------------------->\n<ng-template #createHasManyDialog>\n    <div class=\"mat-dialog-title\">\n        <div>{{metadataHasMany.tableData.createDialogData.title}}</div>\n    </div>\n    \n    <form>\n        <mat-dialog-content>\n            <mat-tab-group *ngIf=\"hasManyCreateTabs.length > 1\" preserveContent>\n                <mat-tab *ngFor=\"let tab of hasManyCreateTabs\" [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]=\"hasManyEntity\"\n                            [propertyKey]=\"key\"\n                            [hideOmitForCreate]=\"true\"\n                            class=\"col-lg-{{EntityUtilities.getWidth(hasManyEntity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(hasManyEntity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(hasManyEntity, key, 'sm')}}\"\n                            (inputChangeEvent)=\"checkIsHasManyEntityValid('create')\"\n                        >\n                        </ngx-mat-entity-input>\n                    </div>\n                </mat-tab>\n            </mat-tab-group>\n        \n            <div *ngIf=\"hasManyCreateTabs.length <= 1\">\n                <div class=\"row\" *ngFor=\"let row of hasManyCreateTabs[0].rows\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"hasManyEntity\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForCreate]=\"true\"\n                        class=\"col-lg-{{EntityUtilities.getWidth(hasManyEntity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(hasManyEntity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(hasManyEntity, key, 'sm')}}\"\n                        (inputChangeEvent)=\"checkIsHasManyEntityValid('create')\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </div>\n        </mat-dialog-content>\n        \n        <mat-dialog-actions>\n            <button type=\"submit\" (click)=\"dialogCreateHasMany()\" mat-raised-button [disabled]=\"!isHasManyEntityValid\">\n                {{metadataHasMany.tableData.createDialogData.createButtonLabel}}\n            </button>\n            <button type=\"button\" mat-raised-button (click)=\"dialogCancelCreateHasMany()\" class=\"cancel-button\">\n                {{metadataHasMany.tableData.createDialogData.cancelButtonLabel}}\n            </button>\n        </mat-dialog-actions>\n    </form>\n    \n</ng-template>\n\n<ng-template #editHasManyDialog>\n    <div class=\"mat-dialog-title\">\n        <div>{{metadataHasMany.tableData.editData.title(hasManyEntityPriorChanges)}}</div>\n\n        <div class=\"actions-container\">\n            <button *ngIf=\"metadataHasMany.tableData.editData.actions.length\" type=\"button\" [matMenuTriggerFor]=\"menu\" mat-raised-button>\n                {{metadataHasMany.tableData.editData.actionsLabel}}\n            </button>\n            <mat-menu #menu=\"matMenu\">\n                <button type=\"button\" *ngFor=\"let action of metadataHasMany.tableData.editData.actions\" [disabled]=\"hasManyEditActionDisabled(action)\" (click)=\"hasManyRunEditAction(action)\" mat-menu-item>\n                    {{action.displayName}}\n                </button>\n            </mat-menu>\n        \n            <button type=\"button\" *ngIf=\"hasManyAllowDelete(hasManyEntity)\" mat-raised-button (click)=\"deleteHasManyEntity()\" color=\"warn\" class=\"delete-button\" tabindex=\"-1\">\n                {{metadataHasMany.tableData.editData.deleteButtonLabel}}\n            </button>\n        </div>\n    </div>\n    \n    <form>\n        <mat-dialog-content>\n            <mat-tab-group *ngIf=\"hasManyUpdateTabs.length > 1\" preserveContent>\n                <mat-tab *ngFor=\"let tab of hasManyUpdateTabs\" [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]=\"hasManyEntity\"\n                            [propertyKey]=\"key\"\n                            [hideOmitForEdit]=\"true\"\n                            class=\"col-lg-{{EntityUtilities.getWidth(hasManyEntity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(hasManyEntity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(hasManyEntity, key, 'sm')}}\"\n                            (inputChangeEvent)=\"checkHasManyEntity()\"\n                            [isReadOnly]=\"isPropertyReadOnly(hasManyEntity, key)\"\n                        >\n                        </ngx-mat-entity-input>\n                    </div>\n                </mat-tab>\n            </mat-tab-group>\n        \n            <div *ngIf=\"hasManyUpdateTabs.length <= 1\">\n                <div class=\"row\" *ngFor=\"let row of hasManyUpdateTabs[0].rows\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"hasManyEntity\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForEdit]=\"true\"\n                        class=\"col-lg-{{EntityUtilities.getWidth(hasManyEntity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(hasManyEntity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(hasManyEntity, key, 'sm')}}\"\n                        (inputChangeEvent)=\"checkHasManyEntity()\"\n                        [isReadOnly]=\"isPropertyReadOnly(hasManyEntity, key)\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </div>\n        </mat-dialog-content>\n        \n        <mat-dialog-actions>\n            <button type=\"submit\" (click)=\"dialogEditHasMany()\" mat-raised-button [disabled]=\"internalIsReadOnly || !isHasManyEntityValid || !isHasManyEntityDirty\">\n                {{metadataHasMany.tableData.editData.confirmButtonLabel}}\n            </button>\n            <button type=\"button\" mat-raised-button (click)=\"dialogCancelEditHasMany()\" class=\"cancel-button\">\n                {{metadataHasMany.tableData.editData.cancelButtonLabel}}\n            </button>\n        </mat-dialog-actions>\n    </form>    \n</ng-template>", styles: [".mdc-data-table__row:last-child .mdc-data-table__cell{border-bottom:1px solid rgba(0,0,0,.12)}.mat-dialog-title{padding:12px 20px;display:flex;justify-content:space-between;align-items:center}.mat-dialog-title div{font-size:var(--mdc-dialog-subhead-size, 14px);font-weight:var(--mdc-dialog-subhead-weight, 500)}::ng-deep .mdc-dialog .mdc-dialog__content{padding:6px 20px!important}mat-dialog-actions{justify-content:space-between;align-items:center;padding-left:20px;padding-right:20px}mat-spinner{margin:10px auto}::ng-deep .mat-mdc-tab-body-wrapper{margin-left:-12px;margin-right:-12px}::ng-deep mat-tab-body{padding-top:10px;padding-left:12px;padding-right:12px}::ng-deep mat-tab-body .mat-mdc-tab-body-content{overflow:initial}::ng-deep .mat-mdc-form-field.mat-form-field-disabled label{color:#0009}::ng-deep .mat-mdc-form-field.mat-form-field-disabled input,::ng-deep .mat-mdc-form-field.mat-form-field-disabled textarea,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-select-disabled,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-select-value{color:#000!important}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-checkbox .mdc-checkbox__native-control[disabled]:not(:checked):not(:indeterminate):not([data-indeterminate=true])~.mdc-checkbox__background{border-color:#707070}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-checkbox .mdc-checkbox__native-control[disabled]:checked~.mdc-checkbox__background,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-checkbox .mdc-checkbox__native-control[disabled]:indeterminate~.mdc-checkbox__background,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-checkbox .mdc-checkbox__native-control[data-indeterminate=true][disabled]~.mdc-checkbox__background{background-color:#000}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-chip.mat-mdc-standard-chip.mat-mdc-chip-disabled{opacity:1}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-chip.mat-mdc-standard-chip.mat-mdc-chip-disabled button{opacity:.2}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-switch.mdc-switch--selected:disabled .mdc-switch__icons,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-switch.mdc-switch--unselected:disabled .mdc-switch__icons{opacity:1}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-switch.mdc-switch--selected:disabled .mdc-switch__handle:after,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-switch.mdc-switch--unselected:disabled .mdc-switch__handle:after{opacity:1;background:black}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-switch.mdc-switch--selected:disabled .mdc-switch__track,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-switch.mdc-switch--unselected:disabled .mdc-switch__track{opacity:.3}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-date-range-input-inner:disabled{color:#000}::ng-deep #slider.mat-mdc-slider.mdc-slider--disabled{opacity:1}::ng-deep #slider.mat-mdc-slider.mdc-slider--disabled .mdc-slider__input{cursor:default}::ng-deep #slider.mat-mdc-slider.mdc-slider--disabled mat-slider-visual-thumb .mat-mdc-slider,::ng-deep #slider.mat-mdc-slider.mdc-slider--disabled mat-slider-visual-thumb .mdc-slider__thumb:hover,::ng-deep #slider.mat-mdc-slider.mdc-slider--disabled mat-slider-visual-thumb .mdc-slider__thumb-knob{background-color:#000;border-color:#000}::ng-deep .mat-mdc-form-field .mat-mdc-slide-toggle{opacity:1}.entityArray .elevation-container{border-radius:5px;padding:15px;margin-bottom:15px;margin-top:15px}.entityArray .array-headline{padding-bottom:10px}.entityArray .buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px}.entityArray mat-table{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:25px}.entityArray .mat-column-select{flex:0 0 75px}.entityArray .enabled:hover{cursor:pointer}.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}.hasMany button{width:100%;height:56px;line-height:24px;font-size:16px}.hasMany .title{text-align:center}.hasMany .elevation-container{border-radius:5px;padding:5px;margin-bottom:15px}.hasMany .mat-column-select{flex:0 0 75px}.hasMany .enabled:hover{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i4$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i5$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6$2.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i6$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }, { kind: "component", type: i14.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i14.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i14.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i15.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i16.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: DisplayColumnValueComponent, selector: "display-column-value", inputs: ["entity", "ComponentClass"] }, { kind: "directive", type: i18.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i18.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: StringInputComponent, selector: "string-input" }, { kind: "component", type: StringTextboxInputComponent, selector: "string-textbox-input" }, { kind: "component", type: StringAutocompleteInputComponent, selector: "string-autocomplete-input" }, { kind: "component", type: StringDropdownInputComponent, selector: "string-dropdown-input" }, { kind: "component", type: StringPasswordInputComponent, selector: "string-password-input" }, { kind: "component", type: BooleanCheckboxInputComponent, selector: "boolean-checkbox-input" }, { kind: "component", type: BooleanToggleInputComponent, selector: "boolean-toggle-input" }, { kind: "component", type: BooleanDropdownInputComponent, selector: "boolean-dropdown-input" }, { kind: "component", type: NumberInputComponent, selector: "number-input" }, { kind: "component", type: NumberDropdownInputComponent, selector: "number-dropdown-input" }, { kind: "component", type: NumberSliderInputComponent, selector: "number-slider-input" }, { kind: "component", type: ArrayStringChipsInputComponent, selector: "array-string-chips-input" }, { kind: "component", type: ArrayStringAutocompleteChipsComponent, selector: "array-string-autocomplete-chips" }, { kind: "component", type: DateInputComponent, selector: "date-input" }, { kind: "component", type: DateRangeInputComponent, selector: "date-range-input" }, { kind: "component", type: DateTimeInputComponent, selector: "date-time-input" }, { kind: "component", type: ArrayDateInputComponent, selector: "array-date-input" }, { kind: "component", type: ArrayDateTimeInputComponent, selector: "array-date-time-input" }, { kind: "component", type: ArrayDateRangeInputComponent, selector: "array-date-range-input" }, { kind: "component", type: FileImageInputComponent, selector: "file-image-input" }, { kind: "component", type: FileDefaultInputComponent, selector: "file-default-input" }, { kind: "component", type: ReferencesManyInputComponent, selector: "references-many-input" }, { kind: "component", type: CustomInputComponent, selector: "custom-input" }, { kind: "component", type: NgxMatEntityInputComponent, selector: "ngx-mat-entity-input", inputs: ["entity", "propertyKey", "getValidationErrorMessage", "hideOmitForCreate", "hideOmitForEdit", "validEmpty", "isReadOnly"], outputs: ["inputChangeEvent"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: NgxMatEntityInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-mat-entity-input', template: "<div [ngSwitch]=\"type\" *ngIf=\"!(hideOmitForCreate && metadata.omitForCreate) && !(hideOmitForEdit && metadata.omitForUpdate)\">\n    <!-------------------------------------------->\n    <!-----------------Strings-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.STRING\">\n        <string-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </string-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_TEXTBOX\">\n        <string-textbox-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </string-textbox-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_AUTOCOMPLETE\">\n        <string-autocomplete-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </string-autocomplete-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_DROPDOWN\">\n        <string-dropdown-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </string-dropdown-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_PASSWORD\">\n        <string-password-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </string-password-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-----------------Booleans------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_CHECKBOX\">\n        <boolean-checkbox-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </boolean-checkbox-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_TOGGLE\">\n        <boolean-toggle-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </boolean-toggle-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_DROPDOWN\">\n        <boolean-dropdown-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </boolean-dropdown-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!------------------Numbers------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.NUMBER\">\n        <number-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </number-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.NUMBER_DROPDOWN\">\n        <number-dropdown-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </number-dropdown-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.NUMBER_SLIDER\">\n        <number-slider-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </number-slider-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Array-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_DATE\">\n        <array-date-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </array-date-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_DATE_TIME\">\n        <array-date-time-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </array-date-time-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_DATE_RANGE\">\n        <array-date-range-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </array-date-range-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_STRING_CHIPS\">\n        <array-string-chips-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </array-string-chips-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_STRING_AUTOCOMPLETE_CHIPS\">\n        <array-string-autocomplete-chips\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </array-string-autocomplete-chips>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Dates-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.DATE\">\n        <date-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </date-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.DATE_RANGE\">\n        <date-range-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </date-range-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.DATE_TIME\">\n        <date-time-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </date-time-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Files-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.FILE_DEFAULT\">\n        <file-default-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </file-default-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.FILE_IMAGE\">\n        <file-image-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </file-image-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------- references many ------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.REFERENCES_MANY\">\n        <references-many-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </references-many-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Custom------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.CUSTOM\">\n        <custom-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </custom-input>\n    </div>\n\n    <!-------------------------------------------->\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                        [validEmpty]=\"!metadata.required(entity)\"\n                        [isReadOnly]=\"isPropertyReadOnly(objectProperty, key)\"\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                    [validEmpty]=\"!metadata.required(entity)\"\n                    [isReadOnly]=\"isPropertyReadOnly(objectProperty, key)\"\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    <!-------------- references one ------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.REFERENCES_ONE\">\n        <mat-form-field>\n            <mat-label>{{metadata.displayName}}</mat-label>\n            <mat-select [(ngModel)]=\"internalEntity[internalPropertyKey]\"\n                [name]=\"internalPropertyKey.toString() + 'input' + referencesOneUUID\"\n                #inputModel=\"ngModel\"\n                [disabled]=\"internalIsReadOnly\"\n                [required]=\"metadata.required(entity)\"\n                (ngModelChange)=\"setReferencesOneObject()\"\n            >\n                <mat-option *ngIf=\"!metadata.required(entity)\">-</mat-option>\n                <mat-option *ngFor=\"let value of referencesOneDropdownValues\" [value]=\"value.value\">{{value.displayName}}</mat-option>\n            </mat-select>\n            <mat-error>{{internalGetValidationErrorMessage(inputModel)}}</mat-error>\n        </mat-form-field>\n        <!-- iterates over the references one properties -->\n        <mat-tab-group *ngIf=\"referencesOnePropertyTabs && referencesOnePropertyTabs.length > 1\" preserveContent>\n            <mat-tab *ngFor=\"let tab of referencesOnePropertyTabs; 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]=\"referencesOneObject\"\n                        [propertyKey]=\"key\"\n                        [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                        [hideOmitForCreate]=\"hideOmitForCreate\"\n                        [hideOmitForEdit]=\"hideOmitForEdit\"\n                        [validEmpty]=\"!metadata.required(entity)\"\n                        [isReadOnly]=\"true\"\n                        class=\"col-lg-{{EntityUtilities.getWidth(referencesOneObject, key, 'lg')}} col-md-{{EntityUtilities.getWidth(referencesOneObject, key, 'md')}} col-sm-{{EntityUtilities.getWidth(referencesOneObject, key, 'sm')}}\"\n                        (inputChangeEvent)=\"emitChange()\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </mat-tab>\n        </mat-tab-group>\n\n        <div *ngIf=\"referencesOnePropertyTabs && referencesOnePropertyTabs.length <= 1\">\n            <div class=\"row\" *ngFor=\"let row of referencesOnePropertyTabs[0].rows\">\n                <ngx-mat-entity-input *ngFor=\"let key of row.keys; let i = index; trackBy: trackByFn\"\n                    [entity]=\"referencesOneObject\"\n                    [propertyKey]=\"key\"\n                    [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                    [hideOmitForCreate]=\"hideOmitForCreate\"\n                    [hideOmitForEdit]=\"hideOmitForEdit\"\n                    [validEmpty]=\"!metadata.required(entity)\"\n                    [isReadOnly]=\"true\"\n                    class=\"col-lg-{{EntityUtilities.getWidth(referencesOneObject, key, 'lg')}} col-md-{{EntityUtilities.getWidth(referencesOneObject, key, 'md')}} col-sm-{{EntityUtilities.getWidth(referencesOneObject, key, 'sm')}}\"\n                    (inputChangeEvent)=\"emitChange()\"\n                >\n                </ngx-mat-entity-input>\n            </div>\n        </div>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Array-------------------->\n    <!-------------------------------------------->\n    <div class=\"entityArray\" *ngSwitchCase=\"DecoratorTypes.ARRAY\">\n        <div class=\"mat-elevation-z8 elevation-container\">\n            <div class=\"array-headline\">\n                <b>{{metadataEntityArray.displayName}}</b>\n            </div>\n            <div *ngIf=\"metadataEntityArray.createInline && !internalIsReadOnly\">\n                <mat-tab-group *ngIf=\"arrayItemInlineTabs.length > 1\" preserveContent>\n                    <mat-tab *ngFor=\"let tab of arrayItemInlineTabs\" [label]=\"tab.tabName\">\n                        <div class=\"row\" *ngFor=\"let row of tab.rows\">\n                            <ngx-mat-entity-input\n                                *ngFor=\"let key of row.keys; let i = index; trackBy: trackByFn\"\n                                [entity]=\"arrayItem\"\n                                [propertyKey]=\"key\"\n                                [hideOmitForCreate]=\"true\"\n                                [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                                class=\"col-lg-{{EntityUtilities.getWidth(arrayItem, key, 'lg')}} col-md-{{EntityUtilities.getWidth(arrayItem, key, 'md')}} col-sm-{{EntityUtilities.getWidth(arrayItem, key, 'sm')}}\"\n                                (inputChangeEvent)=\"checkIsArrayItemValid()\"\n                            >\n                            </ngx-mat-entity-input>\n                        </div>\n                    </mat-tab>\n                </mat-tab-group>\n\n                <div *ngIf=\"arrayItemInlineTabs.length <= 1\">\n                    <div class=\"row\" *ngFor=\"let row of arrayItemInlineTabs[0].rows\">\n                        <ngx-mat-entity-input\n                            *ngFor=\"let key of row.keys; let i = index; trackBy: trackByFn\"\n                            [entity]=\"arrayItem\"\n                            [propertyKey]=\"key\"\n                            [hideOmitForCreate]=\"true\"\n                            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                            class=\"col-lg-{{EntityUtilities.getWidth(arrayItem, key, 'lg')}} col-md-{{EntityUtilities.getWidth(arrayItem, key, 'md')}} col-sm-{{EntityUtilities.getWidth(arrayItem, key, 'sm')}}\"\n                            (inputChangeEvent)=\"checkIsArrayItemValid()\"\n                        >\n                        </ngx-mat-entity-input>\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"buttons\" *ngIf=\"!internalIsReadOnly\">\n                <button type=\"button\" mat-raised-button\n                    [disabled]=\"metadataEntityArray.createInline && !isArrayItemValid\"\n                    (click)=\"addEntity()\">\n                    {{metadataEntityArray.addButtonLabel}}\n                </button>\n                <button type=\"button\" mat-raised-button\n                    [disabled]=\"!entityArraySelection.selected.length\"\n                    (click)=\"removeFromEntityArray()\">\n                    {{metadataEntityArray.removeButtonLabel}}\n                </button>\n            </div>\n        \n            <mat-table [dataSource]=\"entityArrayDataSource\">\n                <!-- select Column -->\n                <ng-container matColumnDef=\"select\" *ngIf=\"!internalIsReadOnly\">\n                    <mat-header-cell *matHeaderCellDef>\n                        <mat-checkbox\n                            [disabled]=\"!entityArrayDataSource.data.length\" (change)=\"$event ? SelectionUtilities.masterToggle(entityArraySelection, entityArrayDataSource) : null\"\n                            [checked]=\"entityArraySelection.hasValue() && SelectionUtilities.isAllSelected(entityArraySelection, entityArrayDataSource)\"\n                            [indeterminate]=\"entityArraySelection.hasValue() && !SelectionUtilities.isAllSelected(entityArraySelection, entityArrayDataSource)\">\n                        </mat-checkbox>\n                    </mat-header-cell>\n                    <mat-cell *matCellDef=\"let entity\">\n                        <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? entityArraySelection.toggle(entity) : null\" [checked]=\"entityArraySelection.isSelected(entity)\"></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.enabled]=\"!dCol.disableClick\" (click)=\"editArrayItem(entity, dCol)\" *matCellDef=\"let entity\">\n                        <ng-container *ngIf=\"dCol.Component\">\n                            <display-column-value [entity]=\"entity\" [ComponentClass]=\"dCol.Component\"></display-column-value>\n                        </ng-container>\n                        <ng-container *ngIf=\"!dCol.Component\">\n                            {{getDisplayColumnValue(entity, dCol)}}\n                        </ng-container>\n                    </mat-cell>\n                </ng-container>\n            \n                <mat-header-row *matHeaderRowDef=\"entityArrayDisplayedColumns\"></mat-header-row>\n                <mat-row *matRowDef=\"let row; columns: entityArrayDisplayedColumns\"></mat-row>\n            </mat-table>\n        \n            <div class=\"array-error\" *ngIf=\"metadataEntityArray.required(entity) && !entityArrayDataSource.data.length\">\n                {{metadataEntityArray.missingErrorMessage}}\n            </div>\n        </div>\n    </div>\n\n    <!-------------------------------------------->\n    <!------------------ has many ---------------->\n    <!-------------------------------------------->\n    <div class=\"hasMany\" *ngSwitchCase=\"DecoratorTypes.HAS_MANY\">\n        <h2 class=\"title\">{{metadataHasMany.tableData.baseData.title}}</h2>\n\n        <div class=\"row\">\n            <mat-form-field class=\"col-lg-8 col-md-6 col-sm-12\">\n                <mat-label>{{metadataHasMany.tableData.baseData.searchLabel}}</mat-label>\n                <input matInput (keyup)=\"applyHasManyFilter($event)\">\n            </mat-form-field>\n            <div\n                *ngIf=\"metadataHasMany.tableData.baseData.tableActions.length\"\n                [class.col-lg-2]=\"hasManyAllowCreate\"\n                [class.col-lg-4]=\"!hasManyAllowCreate\"\n                [class.col-md-3]=\"hasManyAllowCreate\"\n                [class.col-md-6]=\"!hasManyAllowCreate\"\n                [class.col-sm-6]=\"hasManyAllowCreate\"\n                [class.col-sm-12]=\"!hasManyAllowCreate\"\n            >\n                <button type=\"button\" class=\"actions-button\" [matMenuTriggerFor]=\"menu\" mat-raised-button>\n                    {{metadataHasMany.tableData.baseData.tableActionsLabel}}\n                </button>\n            </div>\n            <mat-menu #menu=\"matMenu\">\n                <button *ngIf=\"metadataHasMany.tableData.baseData.allowJsonImport\" type=\"button\" [disabled]=\"hasManyTableActionDisabled(hasManyImportAction)\" (click)=\"runHasManyTableAction(hasManyImportAction)\" mat-menu-item>\n                    {{hasManyImportAction.displayName}}\n                </button>\n                <button type=\"button\" *ngFor=\"let action of metadataHasMany.tableData.baseData.tableActions\" [disabled]=\"hasManyTableActionDisabled(action)\" (click)=\"runHasManyTableAction(action)\" mat-menu-item>\n                    {{action.displayName}}\n                </button>\n            </mat-menu>\n\n            <div\n                *ngIf=\"hasManyAllowCreate\"\n                [class.col-lg-2]=\"metadataHasMany.tableData.baseData.tableActions.length\"\n                [class.col-lg-4]=\"!metadataHasMany.tableData.baseData.tableActions.length\"\n                [class.col-md-3]=\"metadataHasMany.tableData.baseData.tableActions.length\"\n                [class.col-md-6]=\"!metadataHasMany.tableData.baseData.tableActions.length\"\n                [class.col-sm-6]=\"metadataHasMany.tableData.baseData.tableActions.length\"\n                [class.col-sm-12]=\"!metadataHasMany.tableData.baseData.tableActions.length\"\n            >\n                <button type=\"button\" class=\"create-button\" (click)=\"createHasManyEntity()\" mat-raised-button>\n                    {{metadataHasMany.tableData.baseData.createButtonLabel}}\n                </button>\n            </div>\n        </div>\n\n        <div class=\"mat-elevation-z8 elevation-container\">\n            <mat-table [dataSource]=\"hasManyDataSource\" matSort>\n                <!-- select Column -->\n                <ng-container matColumnDef=\"select\">\n                    <mat-header-cell *matHeaderCellDef>\n                        <mat-checkbox (change)=\"$event ? SelectionUtilities.masterToggle(hasManySelection, hasManyDataSource) : null\"\n                            [checked]=\"hasManySelection.hasValue() && SelectionUtilities.isAllSelected(hasManySelection, hasManyDataSource)\"\n                            [indeterminate]=\"hasManySelection.hasValue() && !SelectionUtilities.isAllSelected(hasManySelection, hasManyDataSource)\">\n                        </mat-checkbox>\n                    </mat-header-cell>\n                    <mat-cell *matCellDef=\"let entity\" class=\"enabled\">\n                        <mat-checkbox (click)=\"$event.stopPropagation()\"\n                            (change)=\"$event ? hasManySelection.toggle(entity) : null\"\n                            [checked]=\"hasManySelection.isSelected(entity)\">\n                        </mat-checkbox>\n                    </mat-cell>\n                </ng-container>\n\n                <ng-container *ngFor=\"let dCol of metadataHasMany.tableData.baseData.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n                    <mat-header-cell *matHeaderCellDef mat-sort-header>\n                        {{dCol.displayName}}\n                    </mat-header-cell>\n                    <mat-cell [class.enabled]=\"!dCol.disableClick && (hasManyAllowUpdate(entity) || hasManyAllowRead(entity))\"\n                        (click)=\"editHasManyEntity(entity, dCol)\"\n                        *matCellDef=\"let entity\"\n                    >\n                        <ng-container *ngIf=\"dCol.Component\">\n                            <display-column-value [entity]=\"entity\" [ComponentClass]=\"dCol.Component\"></display-column-value>\n                        </ng-container>\n                        <ng-container *ngIf=\"!dCol.Component\">\n                            {{getDisplayColumnValue(entity, dCol)}}\n                        </ng-container>\n                    </mat-cell>\n                </ng-container>\n\n                <mat-header-row *matHeaderRowDef=\"displayedHasManyColumns\"></mat-header-row>\n                <mat-row *matRowDef=\"let row; columns: displayedHasManyColumns\"></mat-row>\n            </mat-table>\n\n            <mat-spinner *ngIf=\"hasManyIsLoading && metadataHasMany.tableData.baseData.displayLoadingSpinner\">\n            </mat-spinner>\n\n            <mat-paginator [length]=\"hasManyDataSource.filteredData.length\" [pageIndex]=\"0\" [pageSize]=\"10\" [pageSizeOptions]=\"[5, 10, 25, 50]\"></mat-paginator>\n        </div>\n    </div>\n\n    <div *ngSwitchDefault>ERROR: The type {{type}} is not known.</div>\n</div>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n<!--------------------------------------------------------->\n<!--------------------Add Array Item Dialog---------------->\n<!--------------------------------------------------------->\n<ng-template #addArrayItemDialog>\n    <div class=\"mat-dialog-title\">\n        <div>{{addArrayItemDialogData.title}}</div>\n    </div>\n\n    <form>\n        <mat-dialog-content>\n            <mat-tab-group *ngIf=\"arrayItemDialogTabs.length > 1\" preserveContent>\n                <mat-tab *ngFor=\"let tab of arrayItemDialogTabs\" [label]=\"tab.tabName\">\n                    <div class=\"row\" *ngFor=\"let row of tab.rows\">\n                        <ngx-mat-entity-input\n                            *ngFor=\"let key of row.keys\"\n                            [entity]=\"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=\"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]=\"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        </mat-dialog-content>\n    \n        <mat-dialog-actions>\n            <button type=\"submit\" mat-raised-button (click)=\"addArrayItem()\" [disabled]=\"!isArrayItemValid\">\n                {{addArrayItemDialogData.createButtonLabel}}\n            </button>\n            <button type=\"button\" mat-raised-button (click)=\"closeAddArrayItemDialog()\" class=\"cancel-button\">\n                {{addArrayItemDialogData.cancelButtonLabel}}\n            </button>\n        </mat-dialog-actions>\n    </form>\n\n</ng-template>\n\n<!--------------------------------------------------------->\n<!--------------------Edit Array Item Dialog---------------->\n<!--------------------------------------------------------->\n<ng-template #editArrayItemDialog>\n    <div class=\"mat-dialog-title\">\n        <div>{{editArrayItemDialogData.title(arrayItemPriorChanges)}}</div>\n    </div>\n    \n    <form>\n        <mat-dialog-content>\n            <mat-tab-group *ngIf=\"arrayItemDialogTabs.length > 1\" preserveContent>\n                <mat-tab *ngFor=\"let tab of arrayItemDialogTabs\" [label]=\"tab.tabName\">\n                    <div class=\"row\" *ngFor=\"let row of tab.rows\">\n                        <ngx-mat-entity-input\n                            *ngFor=\"let key of row.keys\"\n                            [entity]=\"arrayItem\"\n                            [propertyKey]=\"key\"\n                            [hideOmitForEdit]=\"true\"\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)=\"checkArrayItem()\"\n                            [isReadOnly]=\"isPropertyReadOnly(arrayItem, key)\"\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]=\"arrayItem\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForEdit]=\"true\"\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)=\"checkArrayItem()\"\n                        [isReadOnly]=\"isPropertyReadOnly(arrayItem, key)\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </div>\n        </mat-dialog-content>\n        \n        <mat-dialog-actions>\n            <button type=\"submit\" (click)=\"saveArrayItem()\" mat-raised-button [disabled]=\"internalIsReadOnly || !isArrayItemValid || !isArrayItemDirty\">\n                {{editArrayItemDialogData.confirmButtonLabel}}\n            </button>\n            <button type=\"button\" mat-raised-button (click)=\"closeEditArrayItemDialog()\" class=\"cancel-button\">\n                {{editArrayItemDialogData.cancelButtonLabel}}\n            </button>\n        </mat-dialog-actions>\n    </form>\n</ng-template>\n\n<!--------------------------------------------------------->\n<!--------------------Create Has Many Dialog---------------->\n<!--------------------------------------------------------->\n<ng-template #createHasManyDialog>\n    <div class=\"mat-dialog-title\">\n        <div>{{metadataHasMany.tableData.createDialogData.title}}</div>\n    </div>\n    \n    <form>\n        <mat-dialog-content>\n            <mat-tab-group *ngIf=\"hasManyCreateTabs.length > 1\" preserveContent>\n                <mat-tab *ngFor=\"let tab of hasManyCreateTabs\" [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]=\"hasManyEntity\"\n                            [propertyKey]=\"key\"\n                            [hideOmitForCreate]=\"true\"\n                            class=\"col-lg-{{EntityUtilities.getWidth(hasManyEntity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(hasManyEntity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(hasManyEntity, key, 'sm')}}\"\n                            (inputChangeEvent)=\"checkIsHasManyEntityValid('create')\"\n                        >\n                        </ngx-mat-entity-input>\n                    </div>\n                </mat-tab>\n            </mat-tab-group>\n        \n            <div *ngIf=\"hasManyCreateTabs.length <= 1\">\n                <div class=\"row\" *ngFor=\"let row of hasManyCreateTabs[0].rows\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"hasManyEntity\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForCreate]=\"true\"\n                        class=\"col-lg-{{EntityUtilities.getWidth(hasManyEntity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(hasManyEntity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(hasManyEntity, key, 'sm')}}\"\n                        (inputChangeEvent)=\"checkIsHasManyEntityValid('create')\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </div>\n        </mat-dialog-content>\n        \n        <mat-dialog-actions>\n            <button type=\"submit\" (click)=\"dialogCreateHasMany()\" mat-raised-button [disabled]=\"!isHasManyEntityValid\">\n                {{metadataHasMany.tableData.createDialogData.createButtonLabel}}\n            </button>\n            <button type=\"button\" mat-raised-button (click)=\"dialogCancelCreateHasMany()\" class=\"cancel-button\">\n                {{metadataHasMany.tableData.createDialogData.cancelButtonLabel}}\n            </button>\n        </mat-dialog-actions>\n    </form>\n    \n</ng-template>\n\n<ng-template #editHasManyDialog>\n    <div class=\"mat-dialog-title\">\n        <div>{{metadataHasMany.tableData.editData.title(hasManyEntityPriorChanges)}}</div>\n\n        <div class=\"actions-container\">\n            <button *ngIf=\"metadataHasMany.tableData.editData.actions.length\" type=\"button\" [matMenuTriggerFor]=\"menu\" mat-raised-button>\n                {{metadataHasMany.tableData.editData.actionsLabel}}\n            </button>\n            <mat-menu #menu=\"matMenu\">\n                <button type=\"button\" *ngFor=\"let action of metadataHasMany.tableData.editData.actions\" [disabled]=\"hasManyEditActionDisabled(action)\" (click)=\"hasManyRunEditAction(action)\" mat-menu-item>\n                    {{action.displayName}}\n                </button>\n            </mat-menu>\n        \n            <button type=\"button\" *ngIf=\"hasManyAllowDelete(hasManyEntity)\" mat-raised-button (click)=\"deleteHasManyEntity()\" color=\"warn\" class=\"delete-button\" tabindex=\"-1\">\n                {{metadataHasMany.tableData.editData.deleteButtonLabel}}\n            </button>\n        </div>\n    </div>\n    \n    <form>\n        <mat-dialog-content>\n            <mat-tab-group *ngIf=\"hasManyUpdateTabs.length > 1\" preserveContent>\n                <mat-tab *ngFor=\"let tab of hasManyUpdateTabs\" [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]=\"hasManyEntity\"\n                            [propertyKey]=\"key\"\n                            [hideOmitForEdit]=\"true\"\n                            class=\"col-lg-{{EntityUtilities.getWidth(hasManyEntity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(hasManyEntity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(hasManyEntity, key, 'sm')}}\"\n                            (inputChangeEvent)=\"checkHasManyEntity()\"\n                            [isReadOnly]=\"isPropertyReadOnly(hasManyEntity, key)\"\n                        >\n                        </ngx-mat-entity-input>\n                    </div>\n                </mat-tab>\n            </mat-tab-group>\n        \n            <div *ngIf=\"hasManyUpdateTabs.length <= 1\">\n                <div class=\"row\" *ngFor=\"let row of hasManyUpdateTabs[0].rows\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"hasManyEntity\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForEdit]=\"true\"\n                        class=\"col-lg-{{EntityUtilities.getWidth(hasManyEntity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(hasManyEntity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(hasManyEntity, key, 'sm')}}\"\n                        (inputChangeEvent)=\"checkHasManyEntity()\"\n                        [isReadOnly]=\"isPropertyReadOnly(hasManyEntity, key)\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </div>\n        </mat-dialog-content>\n        \n        <mat-dialog-actions>\n            <button type=\"submit\" (click)=\"dialogEditHasMany()\" mat-raised-button [disabled]=\"internalIsReadOnly || !isHasManyEntityValid || !isHasManyEntityDirty\">\n                {{metadataHasMany.tableData.editData.confirmButtonLabel}}\n            </button>\n            <button type=\"button\" mat-raised-button (click)=\"dialogCancelEditHasMany()\" class=\"cancel-button\">\n                {{metadataHasMany.tableData.editData.cancelButtonLabel}}\n            </button>\n        </mat-dialog-actions>\n    </form>    \n</ng-template>", styles: [".mdc-data-table__row:last-child .mdc-data-table__cell{border-bottom:1px solid rgba(0,0,0,.12)}.mat-dialog-title{padding:12px 20px;display:flex;justify-content:space-between;align-items:center}.mat-dialog-title div{font-size:var(--mdc-dialog-subhead-size, 14px);font-weight:var(--mdc-dialog-subhead-weight, 500)}::ng-deep .mdc-dialog .mdc-dialog__content{padding:6px 20px!important}mat-dialog-actions{justify-content:space-between;align-items:center;padding-left:20px;padding-right:20px}mat-spinner{margin:10px auto}::ng-deep .mat-mdc-tab-body-wrapper{margin-left:-12px;margin-right:-12px}::ng-deep mat-tab-body{padding-top:10px;padding-left:12px;padding-right:12px}::ng-deep mat-tab-body .mat-mdc-tab-body-content{overflow:initial}::ng-deep .mat-mdc-form-field.mat-form-field-disabled label{color:#0009}::ng-deep .mat-mdc-form-field.mat-form-field-disabled input,::ng-deep .mat-mdc-form-field.mat-form-field-disabled textarea,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-select-disabled,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-select-value{color:#000}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-chip.mat-mdc-standard-chip.mat-mdc-chip-disabled{opacity:1}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-chip.mat-mdc-standard-chip.mat-mdc-chip-disabled button{opacity:.2}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-date-range-input-inner:disabled{color:#000}::ng-deep .mat-mdc-form-field .mat-mdc-slide-toggle{opacity:1}.entityArray .elevation-container{border-radius:5px;padding:15px;margin-bottom:15px;margin-top:15px}.entityArray .array-headline{padding-bottom:10px}.entityArray .buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px}.entityArray mat-table{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:25px}.entityArray .mat-column-select{flex:0 0 75px}.entityArray .enabled:hover{cursor:pointer}.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}.hasMany button{width:100%;height:56px;line-height:24px;font-size:16px}.hasMany .title{text-align:center}.hasMany .elevation-container{border-radius:5px;padding:5px;margin-bottom:15px}.hasMany .mat-column-select{flex:0 0 75px}.hasMany .enabled:hover{cursor:pointer}\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    <!-------------------Array-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_DATE\">\n        <array-date-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </array-date-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_DATE_TIME\">\n        <array-date-time-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </array-date-time-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_DATE_RANGE\">\n        <array-date-range-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </array-date-range-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_STRING_CHIPS\">\n        <array-string-chips-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </array-string-chips-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_STRING_AUTOCOMPLETE_CHIPS\">\n        <array-string-autocomplete-chips\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </array-string-autocomplete-chips>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Dates-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.DATE\">\n        <date-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </date-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.DATE_RANGE\">\n        <date-range-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </date-range-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.DATE_TIME\">\n        <date-time-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </date-time-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Files-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.FILE_DEFAULT\">\n        <file-default-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </file-default-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.FILE_IMAGE\">\n        <file-image-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </file-image-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------- references many ------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.REFERENCES_MANY\">\n        <references-many-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </references-many-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Custom------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.CUSTOM\">\n        <custom-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </custom-input>\n    </div>\n\n    <!-------------------------------------------->\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                        [validEmpty]=\"!metadata.required(entity)\"\n                        [isReadOnly]=\"isPropertyReadOnly(objectProperty, key)\"\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                    [validEmpty]=\"!metadata.required(entity)\"\n                    [isReadOnly]=\"isPropertyReadOnly(objectProperty, key)\"\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    <!-------------- references one ------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.REFERENCES_ONE\">\n        <mat-form-field>\n            <mat-label>{{metadata.displayName}}</mat-label>\n            <mat-select [(ngModel)]=\"internalEntity[internalPropertyKey]\"\n                [name]=\"internalPropertyKey.toString() + 'input' + referencesOneUUID\"\n                #inputModel=\"ngModel\"\n                [disabled]=\"internalIsReadOnly\"\n                [required]=\"metadata.required(entity)\"\n                (ngModelChange)=\"setReferencesOneObject()\"\n            >\n                <mat-option *ngIf=\"!metadata.required(entity)\">-</mat-option>\n                <mat-option *ngFor=\"let value of referencesOneDropdownValues\" [value]=\"value.value\">{{value.displayName}}</mat-option>\n            </mat-select>\n            <mat-error>{{internalGetValidationErrorMessage(inputModel)}}</mat-error>\n        </mat-form-field>\n        <!-- iterates over the references one properties -->\n        <mat-tab-group *ngIf=\"referencesOnePropertyTabs && referencesOnePropertyTabs.length > 1\" preserveContent>\n            <mat-tab *ngFor=\"let tab of referencesOnePropertyTabs; 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]=\"referencesOneObject\"\n                        [propertyKey]=\"key\"\n                        [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                        [hideOmitForCreate]=\"hideOmitForCreate\"\n                        [hideOmitForEdit]=\"hideOmitForEdit\"\n                        [validEmpty]=\"!metadata.required(entity)\"\n                        [isReadOnly]=\"true\"\n                        class=\"col-lg-{{EntityUtilities.getWidth(referencesOneObject, key, 'lg')}} col-md-{{EntityUtilities.getWidth(referencesOneObject, key, 'md')}} col-sm-{{EntityUtilities.getWidth(referencesOneObject, key, 'sm')}}\"\n                        (inputChangeEvent)=\"emitChange()\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </mat-tab>\n        </mat-tab-group>\n\n        <div *ngIf=\"referencesOnePropertyTabs && referencesOnePropertyTabs.length <= 1\">\n            <div class=\"row\" *ngFor=\"let row of referencesOnePropertyTabs[0].rows\">\n                <ngx-mat-entity-input *ngFor=\"let key of row.keys; let i = index; trackBy: trackByFn\"\n                    [entity]=\"referencesOneObject\"\n                    [propertyKey]=\"key\"\n                    [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                    [hideOmitForCreate]=\"hideOmitForCreate\"\n                    [hideOmitForEdit]=\"hideOmitForEdit\"\n                    [validEmpty]=\"!metadata.required(entity)\"\n                    [isReadOnly]=\"true\"\n                    class=\"col-lg-{{EntityUtilities.getWidth(referencesOneObject, key, 'lg')}} col-md-{{EntityUtilities.getWidth(referencesOneObject, key, 'md')}} col-sm-{{EntityUtilities.getWidth(referencesOneObject, key, 'sm')}}\"\n                    (inputChangeEvent)=\"emitChange()\"\n                >\n                </ngx-mat-entity-input>\n            </div>\n        </div>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Array-------------------->\n    <!-------------------------------------------->\n    <div class=\"entityArray\" *ngSwitchCase=\"DecoratorTypes.ARRAY\">\n        <div class=\"mat-elevation-z8 elevation-container\">\n            <div class=\"array-headline\">\n                <b>{{metadataEntityArray.displayName}}</b>\n            </div>\n            <div *ngIf=\"metadataEntityArray.createInline && !internalIsReadOnly\">\n                <mat-tab-group *ngIf=\"arrayItemInlineTabs.length > 1\" preserveContent>\n                    <mat-tab *ngFor=\"let tab of arrayItemInlineTabs\" [label]=\"tab.tabName\">\n                        <div class=\"row\" *ngFor=\"let row of tab.rows\">\n                            <ngx-mat-entity-input\n                                *ngFor=\"let key of row.keys; let i = index; trackBy: trackByFn\"\n                                [entity]=\"arrayItem\"\n                                [propertyKey]=\"key\"\n                                [hideOmitForCreate]=\"true\"\n                                [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                                class=\"col-lg-{{EntityUtilities.getWidth(arrayItem, key, 'lg')}} col-md-{{EntityUtilities.getWidth(arrayItem, key, 'md')}} col-sm-{{EntityUtilities.getWidth(arrayItem, key, 'sm')}}\"\n                                (inputChangeEvent)=\"checkIsArrayItemValid()\"\n                            >\n                            </ngx-mat-entity-input>\n                        </div>\n                    </mat-tab>\n                </mat-tab-group>\n\n                <div *ngIf=\"arrayItemInlineTabs.length <= 1\">\n                    <div class=\"row\" *ngFor=\"let row of arrayItemInlineTabs[0].rows\">\n                        <ngx-mat-entity-input\n                            *ngFor=\"let key of row.keys; let i = index; trackBy: trackByFn\"\n                            [entity]=\"arrayItem\"\n                            [propertyKey]=\"key\"\n                            [hideOmitForCreate]=\"true\"\n                            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                            class=\"col-lg-{{EntityUtilities.getWidth(arrayItem, key, 'lg')}} col-md-{{EntityUtilities.getWidth(arrayItem, key, 'md')}} col-sm-{{EntityUtilities.getWidth(arrayItem, key, 'sm')}}\"\n                            (inputChangeEvent)=\"checkIsArrayItemValid()\"\n                        >\n                        </ngx-mat-entity-input>\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"buttons\" *ngIf=\"!internalIsReadOnly\">\n                <button type=\"button\" mat-raised-button\n                    [disabled]=\"metadataEntityArray.createInline && !isArrayItemValid\"\n                    (click)=\"addEntity()\">\n                    {{metadataEntityArray.addButtonLabel}}\n                </button>\n                <button type=\"button\" mat-raised-button\n                    [disabled]=\"!entityArraySelection.selected.length\"\n                    (click)=\"removeFromEntityArray()\">\n                    {{metadataEntityArray.removeButtonLabel}}\n                </button>\n            </div>\n        \n            <mat-table [dataSource]=\"entityArrayDataSource\">\n                <!-- select Column -->\n                <ng-container matColumnDef=\"select\" *ngIf=\"!internalIsReadOnly\">\n                    <mat-header-cell *matHeaderCellDef>\n                        <mat-checkbox\n                            [disabled]=\"!entityArrayDataSource.data.length\" (change)=\"$event ? SelectionUtilities.masterToggle(entityArraySelection, entityArrayDataSource) : null\"\n                            [checked]=\"entityArraySelection.hasValue() && SelectionUtilities.isAllSelected(entityArraySelection, entityArrayDataSource)\"\n                            [indeterminate]=\"entityArraySelection.hasValue() && !SelectionUtilities.isAllSelected(entityArraySelection, entityArrayDataSource)\">\n                        </mat-checkbox>\n                    </mat-header-cell>\n                    <mat-cell *matCellDef=\"let entity\">\n                        <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? entityArraySelection.toggle(entity) : null\" [checked]=\"entityArraySelection.isSelected(entity)\"></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.enabled]=\"!dCol.disableClick\" (click)=\"editArrayItem(entity, dCol)\" *matCellDef=\"let entity\">\n                        <ng-container *ngIf=\"dCol.Component\">\n                            <display-column-value [entity]=\"entity\" [ComponentClass]=\"dCol.Component\"></display-column-value>\n                        </ng-container>\n                        <ng-container *ngIf=\"!dCol.Component\">\n                            {{getDisplayColumnValue(entity, dCol)}}\n                        </ng-container>\n                    </mat-cell>\n                </ng-container>\n            \n                <mat-header-row *matHeaderRowDef=\"entityArrayDisplayedColumns\"></mat-header-row>\n                <mat-row *matRowDef=\"let row; columns: entityArrayDisplayedColumns\"></mat-row>\n            </mat-table>\n        \n            <div class=\"array-error\" *ngIf=\"metadataEntityArray.required(entity) && !entityArrayDataSource.data.length\">\n                {{metadataEntityArray.missingErrorMessage}}\n            </div>\n        </div>\n    </div>\n\n    <!-------------------------------------------->\n    <!------------------ has many ---------------->\n    <!-------------------------------------------->\n    <div class=\"hasMany\" *ngSwitchCase=\"DecoratorTypes.HAS_MANY\">\n        <h2 class=\"title\">{{metadataHasMany.tableData.baseData.title}}</h2>\n\n        <div class=\"row\">\n            <mat-form-field class=\"col-lg-8 col-md-6 col-sm-12\">\n                <mat-label>{{metadataHasMany.tableData.baseData.searchLabel}}</mat-label>\n                <input matInput (keyup)=\"applyHasManyFilter($event)\">\n            </mat-form-field>\n            <div\n                *ngIf=\"metadataHasMany.tableData.baseData.tableActions.length\"\n                [class.col-lg-2]=\"hasManyAllowCreate\"\n                [class.col-lg-4]=\"!hasManyAllowCreate\"\n                [class.col-md-3]=\"hasManyAllowCreate\"\n                [class.col-md-6]=\"!hasManyAllowCreate\"\n                [class.col-sm-6]=\"hasManyAllowCreate\"\n                [class.col-sm-12]=\"!hasManyAllowCreate\"\n            >\n                <button type=\"button\" class=\"actions-button\" [matMenuTriggerFor]=\"menu\" mat-raised-button>\n                    {{metadataHasMany.tableData.baseData.tableActionsLabel}}\n                </button>\n            </div>\n            <mat-menu #menu=\"matMenu\">\n                <button *ngIf=\"metadataHasMany.tableData.baseData.allowJsonImport\" type=\"button\" [disabled]=\"hasManyTableActionDisabled(hasManyImportAction)\" (click)=\"runHasManyTableAction(hasManyImportAction)\" mat-menu-item>\n                    {{hasManyImportAction.displayName}}\n                </button>\n                <button type=\"button\" *ngFor=\"let action of metadataHasMany.tableData.baseData.tableActions\" [disabled]=\"hasManyTableActionDisabled(action)\" (click)=\"runHasManyTableAction(action)\" mat-menu-item>\n                    {{action.displayName}}\n                </button>\n            </mat-menu>\n\n            <div\n                *ngIf=\"hasManyAllowCreate\"\n                [class.col-lg-2]=\"metadataHasMany.tableData.baseData.tableActions.length\"\n                [class.col-lg-4]=\"!metadataHasMany.tableData.baseData.tableActions.length\"\n                [class.col-md-3]=\"metadataHasMany.tableData.baseData.tableActions.length\"\n                [class.col-md-6]=\"!metadataHasMany.tableData.baseData.tableActions.length\"\n                [class.col-sm-6]=\"metadataHasMany.tableData.baseData.tableActions.length\"\n                [class.col-sm-12]=\"!metadataHasMany.tableData.baseData.tableActions.length\"\n            >\n                <button type=\"button\" class=\"create-button\" (click)=\"createHasManyEntity()\" mat-raised-button>\n                    {{metadataHasMany.tableData.baseData.createButtonLabel}}\n                </button>\n            </div>\n        </div>\n\n        <div class=\"mat-elevation-z8 elevation-container\">\n            <mat-table [dataSource]=\"hasManyDataSource\" matSort>\n                <!-- select Column -->\n                <ng-container matColumnDef=\"select\">\n                    <mat-header-cell *matHeaderCellDef>\n                        <mat-checkbox (change)=\"$event ? SelectionUtilities.masterToggle(hasManySelection, hasManyDataSource) : null\"\n                            [checked]=\"hasManySelection.hasValue() && SelectionUtilities.isAllSelected(hasManySelection, hasManyDataSource)\"\n                            [indeterminate]=\"hasManySelection.hasValue() && !SelectionUtilities.isAllSelected(hasManySelection, hasManyDataSource)\">\n                        </mat-checkbox>\n                    </mat-header-cell>\n                    <mat-cell *matCellDef=\"let entity\" class=\"enabled\">\n                        <mat-checkbox (click)=\"$event.stopPropagation()\"\n                            (change)=\"$event ? hasManySelection.toggle(entity) : null\"\n                            [checked]=\"hasManySelection.isSelected(entity)\">\n                        </mat-checkbox>\n                    </mat-cell>\n                </ng-container>\n\n                <ng-container *ngFor=\"let dCol of metadataHasMany.tableData.baseData.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n                    <mat-header-cell *matHeaderCellDef mat-sort-header>\n                        {{dCol.displayName}}\n                    </mat-header-cell>\n                    <mat-cell [class.enabled]=\"!dCol.disableClick && (hasManyAllowUpdate(entity) || hasManyAllowRead(entity))\"\n                        (click)=\"editHasManyEntity(entity, dCol)\"\n                        *matCellDef=\"let entity\"\n                    >\n                        <ng-container *ngIf=\"dCol.Component\">\n                            <display-column-value [entity]=\"entity\" [ComponentClass]=\"dCol.Component\"></display-column-value>\n                        </ng-container>\n                        <ng-container *ngIf=\"!dCol.Component\">\n                            {{getDisplayColumnValue(entity, dCol)}}\n                        </ng-container>\n                    </mat-cell>\n                </ng-container>\n\n                <mat-header-row *matHeaderRowDef=\"displayedHasManyColumns\"></mat-header-row>\n                <mat-row *matRowDef=\"let row; columns: displayedHasManyColumns\"></mat-row>\n            </mat-table>\n\n            <mat-spinner *ngIf=\"hasManyIsLoading && metadataHasMany.tableData.baseData.displayLoadingSpinner\">\n            </mat-spinner>\n\n            <mat-paginator [length]=\"hasManyDataSource.filteredData.length\" [pageIndex]=\"0\" [pageSize]=\"10\" [pageSizeOptions]=\"[5, 10, 25, 50]\"></mat-paginator>\n        </div>\n    </div>\n\n    <div *ngSwitchDefault>ERROR: The type {{type}} is not known.</div>\n</div>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n<!--------------------------------------------------------->\n<!--------------------Add Array Item Dialog---------------->\n<!--------------------------------------------------------->\n<ng-template #addArrayItemDialog>\n    <div class=\"mat-dialog-title\">\n        <div>{{addArrayItemDialogData.title}}</div>\n    </div>\n\n    <form>\n        <mat-dialog-content>\n            <mat-tab-group *ngIf=\"arrayItemDialogTabs.length > 1\" preserveContent>\n                <mat-tab *ngFor=\"let tab of arrayItemDialogTabs\" [label]=\"tab.tabName\">\n                    <div class=\"row\" *ngFor=\"let row of tab.rows\">\n                        <ngx-mat-entity-input\n                            *ngFor=\"let key of row.keys\"\n                            [entity]=\"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=\"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]=\"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        </mat-dialog-content>\n    \n        <mat-dialog-actions>\n            <button type=\"submit\" mat-raised-button (click)=\"addArrayItem()\" [disabled]=\"!isArrayItemValid\">\n                {{addArrayItemDialogData.createButtonLabel}}\n            </button>\n            <button type=\"button\" mat-raised-button (click)=\"closeAddArrayItemDialog()\" class=\"cancel-button\">\n                {{addArrayItemDialogData.cancelButtonLabel}}\n            </button>\n        </mat-dialog-actions>\n    </form>\n\n</ng-template>\n\n<!--------------------------------------------------------->\n<!--------------------Edit Array Item Dialog---------------->\n<!--------------------------------------------------------->\n<ng-template #editArrayItemDialog>\n    <div class=\"mat-dialog-title\">\n        <div>{{editArrayItemDialogData.title(arrayItemPriorChanges)}}</div>\n    </div>\n    \n    <form>\n        <mat-dialog-content>\n            <mat-tab-group *ngIf=\"arrayItemDialogTabs.length > 1\" preserveContent>\n                <mat-tab *ngFor=\"let tab of arrayItemDialogTabs\" [label]=\"tab.tabName\">\n                    <div class=\"row\" *ngFor=\"let row of tab.rows\">\n                        <ngx-mat-entity-input\n                            *ngFor=\"let key of row.keys\"\n                            [entity]=\"arrayItem\"\n                            [propertyKey]=\"key\"\n                            [hideOmitForEdit]=\"true\"\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)=\"checkArrayItem()\"\n                            [isReadOnly]=\"isPropertyReadOnly(arrayItem, key)\"\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]=\"arrayItem\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForEdit]=\"true\"\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)=\"checkArrayItem()\"\n                        [isReadOnly]=\"isPropertyReadOnly(arrayItem, key)\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </div>\n        </mat-dialog-content>\n        \n        <mat-dialog-actions>\n            <button type=\"submit\" (click)=\"saveArrayItem()\" mat-raised-button [disabled]=\"internalIsReadOnly || !isArrayItemValid || !isArrayItemDirty\">\n                {{editArrayItemDialogData.confirmButtonLabel}}\n            </button>\n            <button type=\"button\" mat-raised-button (click)=\"closeEditArrayItemDialog()\" class=\"cancel-button\">\n                {{editArrayItemDialogData.cancelButtonLabel}}\n            </button>\n        </mat-dialog-actions>\n    </form>\n</ng-template>\n\n<!--------------------------------------------------------->\n<!--------------------Create Has Many Dialog---------------->\n<!--------------------------------------------------------->\n<ng-template #createHasManyDialog>\n    <div class=\"mat-dialog-title\">\n        <div>{{metadataHasMany.tableData.createDialogData.title}}</div>\n    </div>\n    \n    <form>\n        <mat-dialog-content>\n            <mat-tab-group *ngIf=\"hasManyCreateTabs.length > 1\" preserveContent>\n                <mat-tab *ngFor=\"let tab of hasManyCreateTabs\" [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]=\"hasManyEntity\"\n                            [propertyKey]=\"key\"\n                            [hideOmitForCreate]=\"true\"\n                            class=\"col-lg-{{EntityUtilities.getWidth(hasManyEntity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(hasManyEntity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(hasManyEntity, key, 'sm')}}\"\n                            (inputChangeEvent)=\"checkIsHasManyEntityValid('create')\"\n                        >\n                        </ngx-mat-entity-input>\n                    </div>\n                </mat-tab>\n            </mat-tab-group>\n        \n            <div *ngIf=\"hasManyCreateTabs.length <= 1\">\n                <div class=\"row\" *ngFor=\"let row of hasManyCreateTabs[0].rows\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"hasManyEntity\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForCreate]=\"true\"\n                        class=\"col-lg-{{EntityUtilities.getWidth(hasManyEntity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(hasManyEntity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(hasManyEntity, key, 'sm')}}\"\n                        (inputChangeEvent)=\"checkIsHasManyEntityValid('create')\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </div>\n        </mat-dialog-content>\n        \n        <mat-dialog-actions>\n            <button type=\"submit\" (click)=\"dialogCreateHasMany()\" mat-raised-button [disabled]=\"!isHasManyEntityValid\">\n                {{metadataHasMany.tableData.createDialogData.createButtonLabel}}\n            </button>\n            <button type=\"button\" mat-raised-button (click)=\"dialogCancelCreateHasMany()\" class=\"cancel-button\">\n                {{metadataHasMany.tableData.createDialogData.cancelButtonLabel}}\n            </button>\n        </mat-dialog-actions>\n    </form>\n    \n</ng-template>\n\n<ng-template #editHasManyDialog>\n    <div class=\"mat-dialog-title\">\n        <div>{{metadataHasMany.tableData.editData.title(hasManyEntityPriorChanges)}}</div>\n\n        <div class=\"actions-container\">\n            <button *ngIf=\"metadataHasMany.tableData.editData.actions.length\" type=\"button\" [matMenuTriggerFor]=\"menu\" mat-raised-button>\n                {{metadataHasMany.tableData.editData.actionsLabel}}\n            </button>\n            <mat-menu #menu=\"matMenu\">\n                <button type=\"button\" *ngFor=\"let action of metadataHasMany.tableData.editData.actions\" [disabled]=\"hasManyEditActionDisabled(action)\" (click)=\"hasManyRunEditAction(action)\" mat-menu-item>\n                    {{action.displayName}}\n                </button>\n            </mat-menu>\n        \n            <button type=\"button\" *ngIf=\"hasManyAllowDelete(hasManyEntity)\" mat-raised-button (click)=\"deleteHasManyEntity()\" color=\"warn\" class=\"delete-button\" tabindex=\"-1\">\n                {{metadataHasMany.tableData.editData.deleteButtonLabel}}\n            </button>\n        </div>\n    </div>\n    \n    <form>\n        <mat-dialog-content>\n            <mat-tab-group *ngIf=\"hasManyUpdateTabs.length > 1\" preserveContent>\n                <mat-tab *ngFor=\"let tab of hasManyUpdateTabs\" [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]=\"hasManyEntity\"\n                            [propertyKey]=\"key\"\n                            [hideOmitForEdit]=\"true\"\n                            class=\"col-lg-{{EntityUtilities.getWidth(hasManyEntity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(hasManyEntity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(hasManyEntity, key, 'sm')}}\"\n                            (inputChangeEvent)=\"checkHasManyEntity()\"\n                            [isReadOnly]=\"isPropertyReadOnly(hasManyEntity, key)\"\n                        >\n                        </ngx-mat-entity-input>\n                    </div>\n                </mat-tab>\n            </mat-tab-group>\n        \n            <div *ngIf=\"hasManyUpdateTabs.length <= 1\">\n                <div class=\"row\" *ngFor=\"let row of hasManyUpdateTabs[0].rows\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"hasManyEntity\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForEdit]=\"true\"\n                        class=\"col-lg-{{EntityUtilities.getWidth(hasManyEntity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(hasManyEntity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(hasManyEntity, key, 'sm')}}\"\n                        (inputChangeEvent)=\"checkHasManyEntity()\"\n                        [isReadOnly]=\"isPropertyReadOnly(hasManyEntity, key)\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </div>\n        </mat-dialog-content>\n        \n        <mat-dialog-actions>\n            <button type=\"submit\" (click)=\"dialogEditHasMany()\" mat-raised-button [disabled]=\"internalIsReadOnly || !isHasManyEntityValid || !isHasManyEntityDirty\">\n                {{metadataHasMany.tableData.editData.confirmButtonLabel}}\n            </button>\n            <button type=\"button\" mat-raised-button (click)=\"dialogCancelEditHasMany()\" class=\"cancel-button\">\n                {{metadataHasMany.tableData.editData.cancelButtonLabel}}\n            </button>\n        </mat-dialog-actions>\n    </form>    \n</ng-template>", styles: [".mdc-data-table__row:last-child .mdc-data-table__cell{border-bottom:1px solid rgba(0,0,0,.12)}.mat-dialog-title{padding:12px 20px;display:flex;justify-content:space-between;align-items:center}.mat-dialog-title div{font-size:var(--mdc-dialog-subhead-size, 14px);font-weight:var(--mdc-dialog-subhead-weight, 500)}::ng-deep .mdc-dialog .mdc-dialog__content{padding:6px 20px!important}mat-dialog-actions{justify-content:space-between;align-items:center;padding-left:20px;padding-right:20px}mat-spinner{margin:10px auto}::ng-deep .mat-mdc-tab-body-wrapper{margin-left:-12px;margin-right:-12px}::ng-deep mat-tab-body{padding-top:10px;padding-left:12px;padding-right:12px}::ng-deep mat-tab-body .mat-mdc-tab-body-content{overflow:initial}::ng-deep .mat-mdc-form-field.mat-form-field-disabled label{color:#0009}::ng-deep .mat-mdc-form-field.mat-form-field-disabled input,::ng-deep .mat-mdc-form-field.mat-form-field-disabled textarea,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-select-disabled,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-select-value{color:#000!important}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-checkbox .mdc-checkbox__native-control[disabled]:not(:checked):not(:indeterminate):not([data-indeterminate=true])~.mdc-checkbox__background{border-color:#707070}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-checkbox .mdc-checkbox__native-control[disabled]:checked~.mdc-checkbox__background,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-checkbox .mdc-checkbox__native-control[disabled]:indeterminate~.mdc-checkbox__background,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-checkbox .mdc-checkbox__native-control[data-indeterminate=true][disabled]~.mdc-checkbox__background{background-color:#000}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-chip.mat-mdc-standard-chip.mat-mdc-chip-disabled{opacity:1}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-chip.mat-mdc-standard-chip.mat-mdc-chip-disabled button{opacity:.2}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-switch.mdc-switch--selected:disabled .mdc-switch__icons,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-switch.mdc-switch--unselected:disabled .mdc-switch__icons{opacity:1}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-switch.mdc-switch--selected:disabled .mdc-switch__handle:after,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-switch.mdc-switch--unselected:disabled .mdc-switch__handle:after{opacity:1;background:black}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-switch.mdc-switch--selected:disabled .mdc-switch__track,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-switch.mdc-switch--unselected:disabled .mdc-switch__track{opacity:.3}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-date-range-input-inner:disabled{color:#000}::ng-deep #slider.mat-mdc-slider.mdc-slider--disabled{opacity:1}::ng-deep #slider.mat-mdc-slider.mdc-slider--disabled .mdc-slider__input{cursor:default}::ng-deep #slider.mat-mdc-slider.mdc-slider--disabled mat-slider-visual-thumb .mat-mdc-slider,::ng-deep #slider.mat-mdc-slider.mdc-slider--disabled mat-slider-visual-thumb .mdc-slider__thumb:hover,::ng-deep #slider.mat-mdc-slider.mdc-slider--disabled mat-slider-visual-thumb .mdc-slider__thumb-knob{background-color:#000;border-color:#000}::ng-deep .mat-mdc-form-field .mat-mdc-slide-toggle{opacity:1}.entityArray .elevation-container{border-radius:5px;padding:15px;margin-bottom:15px;margin-top:15px}.entityArray .array-headline{padding-bottom:10px}.entityArray .buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px}.entityArray mat-table{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:25px}.entityArray .mat-column-select{flex:0 0 75px}.entityArray .enabled:hover{cursor:pointer}.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}.hasMany button{width:100%;height:56px;line-height:24px;font-size:16px}.hasMany .title{text-align:center}.hasMany .elevation-container{border-radius:5px;padding:5px;margin-bottom:15px}.hasMany .mat-column-select{flex:0 0 75px}.hasMany .enabled:hover{cursor:pointer}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.MatDialog }, { type: i0.EnvironmentInjector }, { type: i2$3.Router }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [NGX_GET_VALIDATION_ERROR_MESSAGE]
@@ -4767,7 +5039,9 @@ class NgxMatEntityInputModule {
             MatProgressSpinnerModule,
             MatPaginatorModule,
             DisplayColumnValueComponent,
-            MatSortModule], exports: [NgxMatEntityInputComponent] });
+            MatSortModule,
+            PasswordMatchValidatorDirective,
+            NumberDirective], exports: [NgxMatEntityInputComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: NgxMatEntityInputModule, imports: [CommonModule,
             MatInputModule,
             FormsModule,
@@ -4841,12 +5115,141 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImpor
                         MatProgressSpinnerModule,
                         MatPaginatorModule,
                         DisplayColumnValueComponent,
-                        MatSortModule
+                        MatSortModule,
+                        PasswordMatchValidatorDirective,
+                        NumberDirective
                     ],
                     exports: [NgxMatEntityInputComponent]
                 }]
         }] });
 
+/**
+ * A directive that displays a tooltip on hover.
+ */
+class TooltipDirective {
+    el;
+    renderer;
+    /**
+     * The content to display inside the tooltip.
+     */
+    tooltip;
+    tooltipElement;
+    isTooltipVisible = false;
+    closeListeners = [];
+    constructor(el, renderer) {
+        this.el = el;
+        this.renderer = renderer;
+    }
+    /**
+     * Shows the tooltip.
+     */
+    onMouseEnter() {
+        if (!this.isTooltipVisible) {
+            this.showTooltip();
+            this.registerCloseListeners();
+        }
+        else {
+            this.hideTooltip();
+            this.removeCloseListeners();
+        }
+    }
+    /**
+     * Hides the tooltip.
+     */
+    onMouseLeave() {
+        this.hideTooltip();
+        this.removeCloseListeners();
+    }
+    showTooltip() {
+        if (!this.tooltipElement) {
+            this.tooltipElement = this.renderer.createElement('div');
+            this.tooltipElement.innerHTML = this.tooltip;
+            const rect = this.el.nativeElement.getBoundingClientRect();
+            this.renderer.setStyle(this.tooltipElement, 'z-index', '1000');
+            this.renderer.setStyle(this.tooltipElement, 'position', 'absolute');
+            this.renderer.setStyle(this.tooltipElement, 'padding', '4px 8px 4px 8px');
+            this.renderer.setStyle(this.tooltipElement, 'border-radius', '5px');
+            this.renderer.setStyle(this.tooltipElement, 'background-color', '#616161');
+            this.renderer.setStyle(this.tooltipElement, 'color', 'white');
+            this.renderer.setStyle(this.tooltipElement, 'max-height', '30vh');
+            this.renderer.setStyle(this.tooltipElement, 'overflow', 'scroll');
+            this.renderer.appendChild(document.body, this.tooltipElement);
+            const left = window.scrollX + rect.left - (this.tooltipElement.clientWidth / 2) + 18;
+            this.renderer.setStyle(this.tooltipElement, 'left', `${left}px`);
+            const top = window.scrollY + rect.top - this.tooltipElement.clientHeight - 5;
+            this.renderer.setStyle(this.tooltipElement, 'top', `${top}px`);
+            this.isTooltipVisible = true;
+        }
+    }
+    registerCloseListeners() {
+        setTimeout(() => {
+            this.closeListeners.push(this.getCloseListener('click'), this.getCloseListener('touchmove'), this.getCloseListener('resize'));
+        }, 100);
+    }
+    getCloseListener(event) {
+        return this.renderer.listen('document', event, () => {
+            this.hideTooltip();
+            this.removeCloseListeners();
+        });
+    }
+    hideTooltip() {
+        if (this.tooltipElement) {
+            this.renderer.removeChild(this.el.nativeElement, this.tooltipElement);
+            this.tooltipElement = undefined;
+            this.isTooltipVisible = false;
+        }
+    }
+    removeCloseListeners() {
+        for (const listener of this.closeListeners) {
+            listener();
+        }
+        this.closeListeners = [];
+    }
+    ngOnDestroy() {
+        this.removeCloseListeners();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: TooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.0", type: TooltipDirective, isStandalone: true, selector: "[tooltip]", inputs: { tooltip: "tooltip" }, host: { listeners: { "mouseenter": "onMouseEnter()", "click": "onMouseEnter()", "mouseleave": "onMouseLeave()", "window:resize": "onMouseLeave()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: TooltipDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tooltip]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { tooltip: [{
+                type: Input
+            }], onMouseEnter: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }, {
+                type: HostListener,
+                args: ['click']
+            }], onMouseLeave: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }, {
+                type: HostListener,
+                args: ['window:resize']
+            }] } });
+
+/**
+ * A component that displays an info-symbol and a tooltip when it is hovered/clicked.
+ */
+class TooltipComponent {
+    tooltipContent;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: TooltipComponent, isStandalone: true, selector: "ngx-mat-entity-tooltip", inputs: { tooltipContent: "tooltipContent" }, ngImport: i0, template: "<div [tooltip]=\"tooltipContent\" class=\"info\">\n    <i class=\"fas fa-info\"></i>\n</div>", styles: [".info{display:flex;align-items:center;justify-content:center;height:25px;min-height:25px;width:25px;min-width:25px;border:2px solid black;border-radius:50%}.info:hover{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: TooltipDirective, selector: "[tooltip]", inputs: ["tooltip"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: TooltipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-mat-entity-tooltip', standalone: true, imports: [
+                        TooltipDirective
+                    ], template: "<div [tooltip]=\"tooltipContent\" class=\"info\">\n    <i class=\"fas fa-info\"></i>\n</div>", styles: [".info{display:flex;align-items:center;justify-content:center;height:25px;min-height:25px;width:25px;min-width:25px;border:2px solid black;border-radius:50%}.info:hover{cursor:pointer}\n"] }]
+        }], propDecorators: { tooltipContent: [{
+                type: Input
+            }] } });
+
 // eslint-disable-next-line jsdoc/require-jsdoc
 class PageEditDataBuilder extends BaseBuilder {
     constructor(data) {
@@ -4904,13 +5307,17 @@ class NgxMatEntityEditPageComponent {
     EntityClass;
     inputData;
     http;
+    el;
+    renderer;
     EntityUtilities = EntityUtilities;
     entityTabs;
     entity;
     entityPriorChanges;
     data;
+    validationErrors = [];
     isEntityValid = true;
     isEntityDirty = false;
+    tooltipContent = '';
     isEntityReadOnly;
     allowDelete;
     inConfirmNavigation = false;
@@ -4918,7 +5325,7 @@ class NgxMatEntityEditPageComponent {
     get hasUnsavedChanges() {
         return this.isEntityDirty && this.data.editData.unsavedChangesRequireConfirmDialog;
     }
-    constructor(dialog, location, route, injector, entityService, EntityClass, inputData, http) {
+    constructor(dialog, location, route, injector, entityService, EntityClass, inputData, http, el, renderer) {
         this.dialog = dialog;
         this.location = location;
         this.route = route;
@@ -4927,6 +5334,8 @@ class NgxMatEntityEditPageComponent {
         this.EntityClass = EntityClass;
         this.inputData = inputData;
         this.http = http;
+        this.el = el;
+        this.renderer = renderer;
     }
     /**
      * Checks if the input with the given key is readonly.
@@ -4935,7 +5344,7 @@ class NgxMatEntityEditPageComponent {
      * @returns Whether or not the input for the key is read only.
      */
     isReadOnly(key) {
-        return this.injector.runInContext(() => {
+        return runInInjectionContext(this.injector, () => {
             const metadata = EntityUtilities.getPropertyMetadata(this.entity, key);
             return this.isEntityReadOnly || metadata.isReadOnly(this.entity);
         });
@@ -4954,11 +5363,34 @@ class NgxMatEntityEditPageComponent {
         }
         this.entity = new this.EntityClass(foundEntity);
         this.entityPriorChanges = LodashUtilities.cloneDeep(this.entity);
-        this.injector.runInContext(() => {
+        runInInjectionContext(this.injector, () => {
             this.isEntityReadOnly = !this.data.allowUpdate(this.entityPriorChanges);
             this.allowDelete = this.data.allowDelete(this.entityPriorChanges);
         });
         this.entityTabs = EntityUtilities.getEntityTabs(this.entity, false, true);
+        setTimeout(() => this.checkOffset(), 1);
+        setTimeout(() => this.checkIsEntityValid(), 1);
+    }
+    /**
+     * Checks if the bottom row should be displayed as fixed.
+     */
+    onScroll() {
+        this.checkOffset();
+    }
+    checkOffset() {
+        const scrollY = window.scrollY;
+        const bottomRow = this.el.nativeElement.querySelector('.bottom-row');
+        const bottomRowContainer = this.el.nativeElement.querySelector('.bottom-row-container');
+        if (bottomRow && bottomRowContainer) {
+            const bottomRowContainerOffset = bottomRowContainer.offsetTop;
+            const windowHeight = window.innerHeight;
+            if (scrollY + windowHeight >= bottomRowContainerOffset) {
+                this.renderer.removeClass(bottomRow, 'fixed');
+            }
+            else {
+                this.renderer.addClass(bottomRow, 'fixed');
+            }
+        }
     }
     /**
      * Whether the page can be left without confirmation (of unsaved changes).
@@ -4972,9 +5404,14 @@ class NgxMatEntityEditPageComponent {
      * Checks if the entity has become invalid or dirty.
      */
     async checkEntity() {
-        this.isEntityValid = EntityUtilities.isEntityValid(this.entity, 'update');
+        this.checkIsEntityValid();
         this.isEntityDirty = await EntityUtilities.isDirty(this.entity, this.entityPriorChanges, this.http);
     }
+    checkIsEntityValid() {
+        this.validationErrors = ValidationUtilities.getEntityValidationErrors(this.entity, 'update');
+        this.tooltipContent = runInInjectionContext(this.injector, () => getValidationErrorsTooltipContent(this.validationErrors));
+        this.isEntityValid = this.validationErrors.length === 0;
+    }
     /**
      * Tries to save the changes and close the dialog afterwards.
      * Also handles the confirmation if required.
@@ -5111,8 +5548,8 @@ class NgxMatEntityEditPageComponent {
             return !action.enabled(this.entityPriorChanges);
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: NgxMatEntityEditPageComponent, deps: [{ token: i1.MatDialog }, { token: i1$1.Location }, { token: i2$3.ActivatedRoute }, { token: i0.EnvironmentInjector }, { token: NGX_EDIT_DATA_ENTITY_SERVICE }, { token: NGX_EDIT_DATA_ENTITY }, { token: NGX_EDIT_DATA }, { token: i2.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: NgxMatEntityEditPageComponent, isStandalone: true, selector: "ngx-mat-entity-edit-page", host: { listeners: { "window:beforeunload": "canDeactivate()" } }, ngImport: i0, template: "<div *ngIf=\"!entityTabs && data.displayLoadingSpinner\" class=\"container\">\n    <br>\n    <mat-spinner></mat-spinner>\n    <br>\n</div>\n\n<div *ngIf=\"entityTabs\" class=\"container\">\n    <br>\n\n    <!------------>\n    <!-- Header -->\n    <!------------>\n    <div class=\"header\">\n        <div class=\"save-cancel-container\">\n            <button type=\"button\" [class.unsavedChanges]=\"hasUnsavedChanges\" mat-raised-button (click)=\"navigateBack()\" class=\"back-button\" tabindex=\"-1\">\n                <i class=\"fas fa-chevron-left\"></i>\n                {{data.editData.cancelButtonLabel}}\n                <i class=\"fas fa-warning\" *ngIf=\"hasUnsavedChanges\"></i>\n            </button>\n            <button type=\"button\" class=\"save-button\" (click)=\"edit()\" mat-raised-button [disabled]=\"isEntityReadOnly || !isEntityValid || !isEntityDirty\">\n                {{data.editData.confirmButtonLabel}}\n            </button>\n        </div>\n        <div class=\"actions-container\">\n            <button *ngIf=\"data.editData.actions.length\" type=\"button\" [matMenuTriggerFor]=\"menu\" mat-raised-button>\n                {{data.editData.actionsLabel}}\n            </button>\n            <mat-menu #menu=\"matMenu\">\n                <button type=\"button\" *ngFor=\"let action of data.editData.actions\" [disabled]=\"editActionDisabled(action)\" (click)=\"runEditAction(action)\" mat-menu-item>\n                    {{action.displayName}}\n                </button>\n            </mat-menu>\n        \n            <button type=\"button\" *ngIf=\"allowDelete\" mat-raised-button (click)=\"delete()\" color=\"warn\" class=\"delete-button\" tabindex=\"-1\">\n                {{data.editData.deleteButtonLabel}}\n            </button>\n        </div>\n    </div>\n\n    <h1>{{data.editData.title(entityPriorChanges)}}</h1>\n\n    <!----------->\n    <!-- Input -->\n    <!----------->\n    <form>\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]=\"entity\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForEdit]=\"true\"\n                        class=\"col-lg-{{EntityUtilities.getWidth(entity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(entity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(entity, key, 'sm')}}\"\n                        (inputChangeEvent)=\"checkEntity()\"\n                        [isReadOnly]=\"isReadOnly(key)\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </mat-tab>\n        </mat-tab-group>\n    \n        <div *ngIf=\"entityTabs.length <= 1\">\n            <span class=\"no-entity-tabs\" *ngIf=\"!entityTabs.length\">\n                ERROR: No Inputs. Did you correctly assign all values in the model constructor?\n            </span>\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]=\"entity\"\n                    [propertyKey]=\"key\"\n                    [hideOmitForEdit]=\"true\"\n                    class=\"col-lg-{{EntityUtilities.getWidth(entity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(entity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(entity, key, 'sm')}}\"\n                    (inputChangeEvent)=\"checkEntity()\"\n                    [isReadOnly]=\"isReadOnly(key)\"\n                >\n                </ngx-mat-entity-input>\n            </div>\n        </div>\n\n        <button type=\"submit\" (click)=\"edit()\" mat-raised-button [disabled]=\"isEntityReadOnly || !isEntityValid || !isEntityDirty\">\n            {{data.editData.confirmButtonLabel}}\n        </button>\n    </form>\n\n    <br>\n</div>", styles: ["h1{text-align:center}mat-spinner{margin:10px auto}.fa-warning{color:orange}.no-entity-tabs{padding:10px;background-color:red;color:#f5f5f5}.header{display:flex;margin-bottom:5px;gap:10px;flex-wrap:wrap}.header button{min-width:150px}.header .save-cancel-container{display:flex;justify-content:flex-start;column-gap:10px;width:calc(50% - 10px)}.header .actions-container{display:flex;justify-content:flex-end;gap:10px;width:calc(50% - 10px)}.unsavedChanges{background-color:#ffe48d}@media (max-width: 800px){.header{margin-bottom:10px;gap:15px}.header button{min-width:0px;width:50%}.header .save-cancel-container,.header .actions-container{width:100%;gap:15px}}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i6$2.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i6$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: NgxMatEntityInputModule }, { kind: "component", type: NgxMatEntityInputComponent, selector: "ngx-mat-entity-input", inputs: ["entity", "propertyKey", "getValidationErrorMessage", "hideOmitForCreate", "hideOmitForEdit", "validEmpty", "isReadOnly"], outputs: ["inputChangeEvent"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i15.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i14.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i14.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i14.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: NgxMatEntityEditPageComponent, deps: [{ token: i1.MatDialog }, { token: i1$1.Location }, { token: i2$3.ActivatedRoute }, { token: i0.EnvironmentInjector }, { token: NGX_EDIT_DATA_ENTITY_SERVICE }, { token: NGX_EDIT_DATA_ENTITY }, { token: NGX_EDIT_DATA }, { token: i2.HttpClient }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: NgxMatEntityEditPageComponent, isStandalone: true, selector: "ngx-mat-entity-edit-page", host: { listeners: { "window:scroll": "onScroll()", "window:beforeunload": "canDeactivate()" } }, ngImport: i0, template: "<div *ngIf=\"!entityTabs && data.displayLoadingSpinner\" class=\"container\">\n    <br>\n    <mat-spinner></mat-spinner>\n    <br>\n</div>\n\n<div *ngIf=\"entityTabs\" class=\"container\">\n    <br>\n\n    <!------------>\n    <!-- Header -->\n    <!------------>\n    <div class=\"header\">\n        <div class=\"save-cancel-container\">\n            <button type=\"button\" [class.unsavedChanges]=\"hasUnsavedChanges\" mat-raised-button (click)=\"navigateBack()\" class=\"back-button\" tabindex=\"-1\">\n                <i class=\"fas fa-chevron-left\"></i>\n                {{data.editData.cancelButtonLabel}}\n                <i class=\"fas fa-warning\" *ngIf=\"hasUnsavedChanges\"></i>\n            </button>\n        </div>\n        <div class=\"actions-container\">\n            <button *ngIf=\"data.editData.actions.length\" type=\"button\" [matMenuTriggerFor]=\"menu\" mat-raised-button>\n                {{data.editData.actionsLabel}}\n            </button>\n            <mat-menu #menu=\"matMenu\">\n                <button type=\"button\" *ngFor=\"let action of data.editData.actions\" [disabled]=\"editActionDisabled(action)\" (click)=\"runEditAction(action)\" mat-menu-item>\n                    {{action.displayName}}\n                </button>\n            </mat-menu>\n        \n            <button type=\"button\" *ngIf=\"allowDelete\" mat-raised-button (click)=\"delete()\" color=\"warn\" class=\"delete-button\" tabindex=\"-1\">\n                {{data.editData.deleteButtonLabel}}\n            </button>\n        </div>\n    </div>\n\n    <h1>{{data.editData.title(entityPriorChanges)}}</h1>\n\n    <!----------->\n    <!-- Input -->\n    <!----------->\n    <form>\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]=\"entity\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForEdit]=\"true\"\n                        class=\"col-lg-{{EntityUtilities.getWidth(entity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(entity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(entity, key, 'sm')}}\"\n                        (inputChangeEvent)=\"checkEntity()\"\n                        [isReadOnly]=\"isReadOnly(key)\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </mat-tab>\n        </mat-tab-group>\n    \n        <div *ngIf=\"entityTabs.length <= 1\">\n            <span class=\"no-entity-tabs\" *ngIf=\"!entityTabs.length\">\n                ERROR: No Inputs. Did you correctly assign all values in the model constructor?\n            </span>\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]=\"entity\"\n                    [propertyKey]=\"key\"\n                    [hideOmitForEdit]=\"true\"\n                    class=\"col-lg-{{EntityUtilities.getWidth(entity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(entity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(entity, key, 'sm')}}\"\n                    (inputChangeEvent)=\"checkEntity()\"\n                    [isReadOnly]=\"isReadOnly(key)\"\n                >\n                </ngx-mat-entity-input>\n            </div>\n        </div>\n\n        <div class=\"bottom-row-container\">\n            <div class=\"bottom-row container\" style=\"margin-top: 10px;\">\n                <button type=\"submit\" (click)=\"edit()\" mat-raised-button\n                    [disabled]=\"isEntityReadOnly || !isEntityValid || !isEntityDirty\"\n                    [matBadge]=\"validationErrors.length\"\n                    [matBadgeHidden]=\"!validationErrors.length\"\n                    matBadgeColor=\"warn\"\n                >\n                    {{data.editData.confirmButtonLabel}}\n                </button>\n                <ngx-mat-entity-tooltip *ngIf=\"validationErrors.length\" [tooltipContent]=\"tooltipContent\"></ngx-mat-entity-tooltip>\n            </div>\n        </div>\n    </form>\n\n    <br>\n</div>", styles: ["h1{text-align:center}mat-spinner{margin:10px auto}.fa-warning{color:orange}.bottom-row{display:flex;align-items:center;column-gap:10px}.fixed{position:fixed;bottom:0;left:0;right:0;width:100%;z-index:1000;padding:8px 20px;background-color:#fff}.no-entity-tabs{padding:10px;background-color:red;color:#f5f5f5}.header{display:flex;margin-bottom:5px;gap:10px;flex-wrap:wrap}.header button{min-width:150px}.header .save-cancel-container{display:flex;justify-content:flex-start;align-items:center;column-gap:10px;width:calc(50% - 10px)}.header .actions-container{display:flex;justify-content:flex-end;gap:10px;width:calc(50% - 10px)}.unsavedChanges{background-color:#ffe48d}@media (max-width: 800px){.header{margin-bottom:10px;gap:15px}.header button{min-width:0px;width:50%}.header .save-cancel-container,.header .actions-container{width:100%;gap:15px}}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i6$2.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i6$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: NgxMatEntityInputModule }, { kind: "component", type: NgxMatEntityInputComponent, selector: "ngx-mat-entity-input", inputs: ["entity", "propertyKey", "getValidationErrorMessage", "hideOmitForCreate", "hideOmitForEdit", "validEmpty", "isReadOnly"], outputs: ["inputChangeEvent"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i15.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i14.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i14.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i14.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i10.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: TooltipComponent, selector: "ngx-mat-entity-tooltip", inputs: ["tooltipContent"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: NgxMatEntityEditPageComponent, decorators: [{
             type: Component,
@@ -5123,8 +5560,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImpor
                         MatTabsModule,
                         NgxMatEntityInputModule,
                         MatProgressSpinnerModule,
-                        MatMenuModule
-                    ], template: "<div *ngIf=\"!entityTabs && data.displayLoadingSpinner\" class=\"container\">\n    <br>\n    <mat-spinner></mat-spinner>\n    <br>\n</div>\n\n<div *ngIf=\"entityTabs\" class=\"container\">\n    <br>\n\n    <!------------>\n    <!-- Header -->\n    <!------------>\n    <div class=\"header\">\n        <div class=\"save-cancel-container\">\n            <button type=\"button\" [class.unsavedChanges]=\"hasUnsavedChanges\" mat-raised-button (click)=\"navigateBack()\" class=\"back-button\" tabindex=\"-1\">\n                <i class=\"fas fa-chevron-left\"></i>\n                {{data.editData.cancelButtonLabel}}\n                <i class=\"fas fa-warning\" *ngIf=\"hasUnsavedChanges\"></i>\n            </button>\n            <button type=\"button\" class=\"save-button\" (click)=\"edit()\" mat-raised-button [disabled]=\"isEntityReadOnly || !isEntityValid || !isEntityDirty\">\n                {{data.editData.confirmButtonLabel}}\n            </button>\n        </div>\n        <div class=\"actions-container\">\n            <button *ngIf=\"data.editData.actions.length\" type=\"button\" [matMenuTriggerFor]=\"menu\" mat-raised-button>\n                {{data.editData.actionsLabel}}\n            </button>\n            <mat-menu #menu=\"matMenu\">\n                <button type=\"button\" *ngFor=\"let action of data.editData.actions\" [disabled]=\"editActionDisabled(action)\" (click)=\"runEditAction(action)\" mat-menu-item>\n                    {{action.displayName}}\n                </button>\n            </mat-menu>\n        \n            <button type=\"button\" *ngIf=\"allowDelete\" mat-raised-button (click)=\"delete()\" color=\"warn\" class=\"delete-button\" tabindex=\"-1\">\n                {{data.editData.deleteButtonLabel}}\n            </button>\n        </div>\n    </div>\n\n    <h1>{{data.editData.title(entityPriorChanges)}}</h1>\n\n    <!----------->\n    <!-- Input -->\n    <!----------->\n    <form>\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]=\"entity\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForEdit]=\"true\"\n                        class=\"col-lg-{{EntityUtilities.getWidth(entity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(entity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(entity, key, 'sm')}}\"\n                        (inputChangeEvent)=\"checkEntity()\"\n                        [isReadOnly]=\"isReadOnly(key)\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </mat-tab>\n        </mat-tab-group>\n    \n        <div *ngIf=\"entityTabs.length <= 1\">\n            <span class=\"no-entity-tabs\" *ngIf=\"!entityTabs.length\">\n                ERROR: No Inputs. Did you correctly assign all values in the model constructor?\n            </span>\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]=\"entity\"\n                    [propertyKey]=\"key\"\n                    [hideOmitForEdit]=\"true\"\n                    class=\"col-lg-{{EntityUtilities.getWidth(entity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(entity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(entity, key, 'sm')}}\"\n                    (inputChangeEvent)=\"checkEntity()\"\n                    [isReadOnly]=\"isReadOnly(key)\"\n                >\n                </ngx-mat-entity-input>\n            </div>\n        </div>\n\n        <button type=\"submit\" (click)=\"edit()\" mat-raised-button [disabled]=\"isEntityReadOnly || !isEntityValid || !isEntityDirty\">\n            {{data.editData.confirmButtonLabel}}\n        </button>\n    </form>\n\n    <br>\n</div>", styles: ["h1{text-align:center}mat-spinner{margin:10px auto}.fa-warning{color:orange}.no-entity-tabs{padding:10px;background-color:red;color:#f5f5f5}.header{display:flex;margin-bottom:5px;gap:10px;flex-wrap:wrap}.header button{min-width:150px}.header .save-cancel-container{display:flex;justify-content:flex-start;column-gap:10px;width:calc(50% - 10px)}.header .actions-container{display:flex;justify-content:flex-end;gap:10px;width:calc(50% - 10px)}.unsavedChanges{background-color:#ffe48d}@media (max-width: 800px){.header{margin-bottom:10px;gap:15px}.header button{min-width:0px;width:50%}.header .save-cancel-container,.header .actions-container{width:100%;gap:15px}}\n"] }]
+                        MatMenuModule,
+                        MatBadgeModule,
+                        TooltipComponent
+                    ], template: "<div *ngIf=\"!entityTabs && data.displayLoadingSpinner\" class=\"container\">\n    <br>\n    <mat-spinner></mat-spinner>\n    <br>\n</div>\n\n<div *ngIf=\"entityTabs\" class=\"container\">\n    <br>\n\n    <!------------>\n    <!-- Header -->\n    <!------------>\n    <div class=\"header\">\n        <div class=\"save-cancel-container\">\n            <button type=\"button\" [class.unsavedChanges]=\"hasUnsavedChanges\" mat-raised-button (click)=\"navigateBack()\" class=\"back-button\" tabindex=\"-1\">\n                <i class=\"fas fa-chevron-left\"></i>\n                {{data.editData.cancelButtonLabel}}\n                <i class=\"fas fa-warning\" *ngIf=\"hasUnsavedChanges\"></i>\n            </button>\n        </div>\n        <div class=\"actions-container\">\n            <button *ngIf=\"data.editData.actions.length\" type=\"button\" [matMenuTriggerFor]=\"menu\" mat-raised-button>\n                {{data.editData.actionsLabel}}\n            </button>\n            <mat-menu #menu=\"matMenu\">\n                <button type=\"button\" *ngFor=\"let action of data.editData.actions\" [disabled]=\"editActionDisabled(action)\" (click)=\"runEditAction(action)\" mat-menu-item>\n                    {{action.displayName}}\n                </button>\n            </mat-menu>\n        \n            <button type=\"button\" *ngIf=\"allowDelete\" mat-raised-button (click)=\"delete()\" color=\"warn\" class=\"delete-button\" tabindex=\"-1\">\n                {{data.editData.deleteButtonLabel}}\n            </button>\n        </div>\n    </div>\n\n    <h1>{{data.editData.title(entityPriorChanges)}}</h1>\n\n    <!----------->\n    <!-- Input -->\n    <!----------->\n    <form>\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]=\"entity\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForEdit]=\"true\"\n                        class=\"col-lg-{{EntityUtilities.getWidth(entity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(entity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(entity, key, 'sm')}}\"\n                        (inputChangeEvent)=\"checkEntity()\"\n                        [isReadOnly]=\"isReadOnly(key)\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </mat-tab>\n        </mat-tab-group>\n    \n        <div *ngIf=\"entityTabs.length <= 1\">\n            <span class=\"no-entity-tabs\" *ngIf=\"!entityTabs.length\">\n                ERROR: No Inputs. Did you correctly assign all values in the model constructor?\n            </span>\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]=\"entity\"\n                    [propertyKey]=\"key\"\n                    [hideOmitForEdit]=\"true\"\n                    class=\"col-lg-{{EntityUtilities.getWidth(entity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(entity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(entity, key, 'sm')}}\"\n                    (inputChangeEvent)=\"checkEntity()\"\n                    [isReadOnly]=\"isReadOnly(key)\"\n                >\n                </ngx-mat-entity-input>\n            </div>\n        </div>\n\n        <div class=\"bottom-row-container\">\n            <div class=\"bottom-row container\" style=\"margin-top: 10px;\">\n                <button type=\"submit\" (click)=\"edit()\" mat-raised-button\n                    [disabled]=\"isEntityReadOnly || !isEntityValid || !isEntityDirty\"\n                    [matBadge]=\"validationErrors.length\"\n                    [matBadgeHidden]=\"!validationErrors.length\"\n                    matBadgeColor=\"warn\"\n                >\n                    {{data.editData.confirmButtonLabel}}\n                </button>\n                <ngx-mat-entity-tooltip *ngIf=\"validationErrors.length\" [tooltipContent]=\"tooltipContent\"></ngx-mat-entity-tooltip>\n            </div>\n        </div>\n    </form>\n\n    <br>\n</div>", styles: ["h1{text-align:center}mat-spinner{margin:10px auto}.fa-warning{color:orange}.bottom-row{display:flex;align-items:center;column-gap:10px}.fixed{position:fixed;bottom:0;left:0;right:0;width:100%;z-index:1000;padding:8px 20px;background-color:#fff}.no-entity-tabs{padding:10px;background-color:red;color:#f5f5f5}.header{display:flex;margin-bottom:5px;gap:10px;flex-wrap:wrap}.header button{min-width:150px}.header .save-cancel-container{display:flex;justify-content:flex-start;align-items:center;column-gap:10px;width:calc(50% - 10px)}.header .actions-container{display:flex;justify-content:flex-end;gap:10px;width:calc(50% - 10px)}.unsavedChanges{background-color:#ffe48d}@media (max-width: 800px){.header{margin-bottom:10px;gap:15px}.header button{min-width:0px;width:50%}.header .save-cancel-container,.header .actions-container{width:100%;gap:15px}}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.MatDialog }, { type: i1$1.Location }, { type: i2$3.ActivatedRoute }, { type: i0.EnvironmentInjector }, { type: EntityService, decorators: [{
                     type: Inject,
                     args: [NGX_EDIT_DATA_ENTITY_SERVICE]
@@ -5134,7 +5573,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImpor
                 }] }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [NGX_EDIT_DATA]
-                }] }, { type: i2.HttpClient }]; }, propDecorators: { canDeactivate: [{
+                }] }, { type: i2.HttpClient }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { onScroll: [{
+                type: HostListener,
+                args: ['window:scroll']
+            }], canDeactivate: [{
                 type: HostListener,
                 args: ['window:beforeunload']
             }] } });
@@ -5193,6 +5635,8 @@ class NgxMatEntityCreateDialogComponent {
     entityService;
     data;
     isEntityValid = false;
+    validationErrors = [];
+    tooltipContent = '';
     constructor(inputData, dialogRef, injector, dialog) {
         this.inputData = inputData;
         this.dialogRef = dialogRef;
@@ -5204,12 +5648,15 @@ class NgxMatEntityCreateDialogComponent {
         this.dialogRef.disableClose = true;
         this.entityTabs = EntityUtilities.getEntityTabs(this.data.entity, true);
         this.entityService = this.injector.get(this.data.EntityServiceClass);
+        setTimeout(() => this.checkIsEntityValid(), 1);
     }
     /**
      * Checks if the entity is valid.
      */
     checkIsEntityValid() {
-        this.isEntityValid = EntityUtilities.isEntityValid(this.data.entity, 'create');
+        this.validationErrors = ValidationUtilities.getEntityValidationErrors(this.data.entity, 'create');
+        this.tooltipContent = runInInjectionContext(this.injector, () => getValidationErrorsTooltipContent(this.validationErrors));
+        this.isEntityValid = this.validationErrors.length === 0;
     }
     /**
      * Tries add the new entity and close the dialog afterwards.
@@ -5249,7 +5696,7 @@ class NgxMatEntityCreateDialogComponent {
         this.dialogRef.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: NgxMatEntityCreateDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.MatDialogRef }, { token: i0.Injector }, { token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: NgxMatEntityCreateDialogComponent, isStandalone: true, selector: "ngx-mat-entity-create-dialog", ngImport: i0, template: "<div class=\"mat-dialog-title\">\n    <div>{{data.createDialogData.title}}</div>\n</div>\n\n<form>\n    <mat-dialog-content>\n        <mat-tab-group *ngIf=\"entityTabs.length > 1\" preserveContent>\n            <mat-tab *ngFor=\"let tab of entityTabs\" [label]=\"tab.tabName\">\n                <div class=\"row\" *ngFor=\"let row of tab.rows\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"data.entity\"\n                        [propertyKey]=\"key\"\n                        [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            <span class=\"no-entity-tabs\" *ngIf=\"!entityTabs.length\">\n                ERROR: No Inputs. Did you correctly assign all values in the model constructor?\n            </span>\n            <div class=\"row\" *ngFor=\"let row of entityTabs[0]?.rows\">\n                <ngx-mat-entity-input\n                    *ngFor=\"let key of row.keys\"\n                    [entity]=\"data.entity\"\n                    [propertyKey]=\"key\"\n                    [hideOmitForCreate]=\"true\"\n                    class=\"col-lg-{{EntityUtilities.getWidth(data.entity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(data.entity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(data.entity, key, 'sm')}}\"\n                    (inputChangeEvent)=\"checkIsEntityValid()\"\n                >\n                </ngx-mat-entity-input>\n            </div>\n        </div>\n    </mat-dialog-content>\n    \n    <mat-dialog-actions>\n        <button type=\"submit\" (click)=\"create()\" mat-raised-button [disabled]=\"!isEntityValid\">\n            {{data.createDialogData.createButtonLabel}}\n        </button>\n        <button type=\"button\" mat-raised-button (click)=\"cancel()\" class=\"cancel-button\">\n            {{data.createDialogData.cancelButtonLabel}}\n        </button>\n    </mat-dialog-actions>\n</form>\n", styles: [".mat-dialog-title{padding:20px;display:flex;justify-content:space-between;align-items:center}.mat-dialog-title div{font-size:var(--mdc-dialog-subhead-size, 14px);font-weight:var(--mdc-dialog-subhead-weight, 500)}.no-entity-tabs{padding:10px;background-color:red;color:#f5f5f5}::ng-deep .mdc-dialog .mdc-dialog__content{padding:6px 20px!important}mat-dialog-actions{justify-content:space-between;align-items:center;padding-left:20px;padding-right:20px}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: NgxMatEntityInputModule }, { kind: "component", type: NgxMatEntityInputComponent, selector: "ngx-mat-entity-input", inputs: ["entity", "propertyKey", "getValidationErrorMessage", "hideOmitForCreate", "hideOmitForEdit", "validEmpty", "isReadOnly"], outputs: ["inputChangeEvent"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i6$2.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i6$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: NgxMatEntityCreateDialogComponent, isStandalone: true, selector: "ngx-mat-entity-create-dialog", ngImport: i0, template: "<div class=\"mat-dialog-title\">\n    <div>{{data.createDialogData.title}}</div>\n</div>\n\n<form>\n    <mat-dialog-content>\n        <mat-tab-group *ngIf=\"entityTabs.length > 1\" preserveContent>\n            <mat-tab *ngFor=\"let tab of entityTabs\" [label]=\"tab.tabName\">\n                <div class=\"row\" *ngFor=\"let row of tab.rows\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"data.entity\"\n                        [propertyKey]=\"key\"\n                        [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            <span class=\"no-entity-tabs\" *ngIf=\"!entityTabs.length\">\n                ERROR: No Inputs. Did you correctly assign all values in the model constructor?\n            </span>\n            <div class=\"row\" *ngFor=\"let row of entityTabs[0]?.rows\">\n                <ngx-mat-entity-input\n                    *ngFor=\"let key of row.keys\"\n                    [entity]=\"data.entity\"\n                    [propertyKey]=\"key\"\n                    [hideOmitForCreate]=\"true\"\n                    class=\"col-lg-{{EntityUtilities.getWidth(data.entity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(data.entity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(data.entity, key, 'sm')}}\"\n                    (inputChangeEvent)=\"checkIsEntityValid()\"\n                >\n                </ngx-mat-entity-input>\n            </div>\n        </div>\n    </mat-dialog-content>\n    \n    <mat-dialog-actions>\n\n        <div class=\"d-flex align-items-center gap-3\" style=\"margin-top: 10px;\">\n            <button type=\"submit\" (click)=\"create()\" mat-raised-button\n                [disabled]=\"!isEntityValid\"\n                [matBadge]=\"validationErrors.length\"\n                [matBadgeHidden]=\"!validationErrors.length\"\n                matBadgeColor=\"warn\"\n            >\n                {{data.createDialogData.createButtonLabel}}\n            </button>\n            <ngx-mat-entity-tooltip *ngIf=\"validationErrors.length\" [tooltipContent]=\"tooltipContent\"></ngx-mat-entity-tooltip>\n        </div>\n\n        <button type=\"button\" mat-raised-button (click)=\"cancel()\" class=\"cancel-button\">\n            {{data.createDialogData.cancelButtonLabel}}\n        </button>\n    </mat-dialog-actions>\n</form>\n", styles: [".mat-dialog-title{padding:20px;display:flex;justify-content:space-between;align-items:center}.mat-dialog-title div{font-size:var(--mdc-dialog-subhead-size, 14px);font-weight:var(--mdc-dialog-subhead-weight, 500)}.no-entity-tabs{padding:10px;background-color:red;color:#f5f5f5}::ng-deep .mdc-dialog .mdc-dialog__content{padding:6px 20px!important}mat-dialog-actions{justify-content:space-between;align-items:center;padding-left:20px;padding-right:20px}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: NgxMatEntityInputModule }, { kind: "component", type: NgxMatEntityInputComponent, selector: "ngx-mat-entity-input", inputs: ["entity", "propertyKey", "getValidationErrorMessage", "hideOmitForCreate", "hideOmitForEdit", "validEmpty", "isReadOnly"], outputs: ["inputChangeEvent"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i6$2.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i6$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i10.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: TooltipComponent, selector: "ngx-mat-entity-tooltip", inputs: ["tooltipContent"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: NgxMatEntityCreateDialogComponent, decorators: [{
             type: Component,
@@ -5260,8 +5707,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImpor
                         MatDialogModule,
                         FormsModule,
                         MatButtonModule,
-                        MatTabsModule
-                    ], template: "<div class=\"mat-dialog-title\">\n    <div>{{data.createDialogData.title}}</div>\n</div>\n\n<form>\n    <mat-dialog-content>\n        <mat-tab-group *ngIf=\"entityTabs.length > 1\" preserveContent>\n            <mat-tab *ngFor=\"let tab of entityTabs\" [label]=\"tab.tabName\">\n                <div class=\"row\" *ngFor=\"let row of tab.rows\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"data.entity\"\n                        [propertyKey]=\"key\"\n                        [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            <span class=\"no-entity-tabs\" *ngIf=\"!entityTabs.length\">\n                ERROR: No Inputs. Did you correctly assign all values in the model constructor?\n            </span>\n            <div class=\"row\" *ngFor=\"let row of entityTabs[0]?.rows\">\n                <ngx-mat-entity-input\n                    *ngFor=\"let key of row.keys\"\n                    [entity]=\"data.entity\"\n                    [propertyKey]=\"key\"\n                    [hideOmitForCreate]=\"true\"\n                    class=\"col-lg-{{EntityUtilities.getWidth(data.entity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(data.entity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(data.entity, key, 'sm')}}\"\n                    (inputChangeEvent)=\"checkIsEntityValid()\"\n                >\n                </ngx-mat-entity-input>\n            </div>\n        </div>\n    </mat-dialog-content>\n    \n    <mat-dialog-actions>\n        <button type=\"submit\" (click)=\"create()\" mat-raised-button [disabled]=\"!isEntityValid\">\n            {{data.createDialogData.createButtonLabel}}\n        </button>\n        <button type=\"button\" mat-raised-button (click)=\"cancel()\" class=\"cancel-button\">\n            {{data.createDialogData.cancelButtonLabel}}\n        </button>\n    </mat-dialog-actions>\n</form>\n", styles: [".mat-dialog-title{padding:20px;display:flex;justify-content:space-between;align-items:center}.mat-dialog-title div{font-size:var(--mdc-dialog-subhead-size, 14px);font-weight:var(--mdc-dialog-subhead-weight, 500)}.no-entity-tabs{padding:10px;background-color:red;color:#f5f5f5}::ng-deep .mdc-dialog .mdc-dialog__content{padding:6px 20px!important}mat-dialog-actions{justify-content:space-between;align-items:center;padding-left:20px;padding-right:20px}\n"] }]
+                        MatTabsModule,
+                        MatBadgeModule,
+                        TooltipComponent
+                    ], template: "<div class=\"mat-dialog-title\">\n    <div>{{data.createDialogData.title}}</div>\n</div>\n\n<form>\n    <mat-dialog-content>\n        <mat-tab-group *ngIf=\"entityTabs.length > 1\" preserveContent>\n            <mat-tab *ngFor=\"let tab of entityTabs\" [label]=\"tab.tabName\">\n                <div class=\"row\" *ngFor=\"let row of tab.rows\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"data.entity\"\n                        [propertyKey]=\"key\"\n                        [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            <span class=\"no-entity-tabs\" *ngIf=\"!entityTabs.length\">\n                ERROR: No Inputs. Did you correctly assign all values in the model constructor?\n            </span>\n            <div class=\"row\" *ngFor=\"let row of entityTabs[0]?.rows\">\n                <ngx-mat-entity-input\n                    *ngFor=\"let key of row.keys\"\n                    [entity]=\"data.entity\"\n                    [propertyKey]=\"key\"\n                    [hideOmitForCreate]=\"true\"\n                    class=\"col-lg-{{EntityUtilities.getWidth(data.entity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(data.entity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(data.entity, key, 'sm')}}\"\n                    (inputChangeEvent)=\"checkIsEntityValid()\"\n                >\n                </ngx-mat-entity-input>\n            </div>\n        </div>\n    </mat-dialog-content>\n    \n    <mat-dialog-actions>\n\n        <div class=\"d-flex align-items-center gap-3\" style=\"margin-top: 10px;\">\n            <button type=\"submit\" (click)=\"create()\" mat-raised-button\n                [disabled]=\"!isEntityValid\"\n                [matBadge]=\"validationErrors.length\"\n                [matBadgeHidden]=\"!validationErrors.length\"\n                matBadgeColor=\"warn\"\n            >\n                {{data.createDialogData.createButtonLabel}}\n            </button>\n            <ngx-mat-entity-tooltip *ngIf=\"validationErrors.length\" [tooltipContent]=\"tooltipContent\"></ngx-mat-entity-tooltip>\n        </div>\n\n        <button type=\"button\" mat-raised-button (click)=\"cancel()\" class=\"cancel-button\">\n            {{data.createDialogData.cancelButtonLabel}}\n        </button>\n    </mat-dialog-actions>\n</form>\n", styles: [".mat-dialog-title{padding:20px;display:flex;justify-content:space-between;align-items:center}.mat-dialog-title div{font-size:var(--mdc-dialog-subhead-size, 14px);font-weight:var(--mdc-dialog-subhead-weight, 500)}.no-entity-tabs{padding:10px;background-color:red;color:#f5f5f5}::ng-deep .mdc-dialog .mdc-dialog__content{padding:6px 20px!important}mat-dialog-actions{justify-content:space-between;align-items:center;padding-left:20px;padding-right:20px}\n"] }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -5446,6 +5895,8 @@ class NgxMatEntityEditDialogComponent {
     data;
     isEntityValid = true;
     isEntityDirty = false;
+    validationErrors = [];
+    tooltipContent = '';
     isEntityReadOnly;
     allowDelete;
     constructor(inputData, dialogRef, injector, dialog, http) {
@@ -5458,13 +5909,14 @@ class NgxMatEntityEditDialogComponent {
     ngOnInit() {
         this.data = new EditEntityDataBuilder(this.inputData).getResult();
         this.entityPriorChanges = LodashUtilities.cloneDeep(this.data.entity);
-        this.injector.runInContext(() => {
+        runInInjectionContext(this.injector, () => {
             this.isEntityReadOnly = !this.data.allowUpdate(this.entityPriorChanges);
             this.allowDelete = this.data.allowDelete(this.entityPriorChanges);
         });
         this.dialogRef.disableClose = true;
         this.entityTabs = EntityUtilities.getEntityTabs(this.data.entity, false, true);
         this.entityService = this.injector.get(this.data.EntityServiceClass);
+        setTimeout(() => this.checkIsEntityValid(), 1);
     }
     /**
      * Checks if the input with the given key is readonly.
@@ -5473,7 +5925,7 @@ class NgxMatEntityEditDialogComponent {
      * @returns Whether or not the input for the key is read only.
      */
     isReadOnly(key) {
-        return this.injector.runInContext(() => {
+        return runInInjectionContext(this.injector, () => {
             const metadata = EntityUtilities.getPropertyMetadata(this.data.entity, key);
             return this.isEntityReadOnly || metadata.isReadOnly(this.data.entity);
         });
@@ -5482,9 +5934,14 @@ class NgxMatEntityEditDialogComponent {
      * Checks if the entity has become invalid or dirty.
      */
     async checkEntity() {
-        this.isEntityValid = EntityUtilities.isEntityValid(this.data.entity, 'update');
+        this.checkIsEntityValid();
         this.isEntityDirty = await EntityUtilities.isDirty(this.data.entity, this.entityPriorChanges, this.http);
     }
+    checkIsEntityValid() {
+        this.validationErrors = ValidationUtilities.getEntityValidationErrors(this.data.entity, 'update');
+        this.tooltipContent = runInInjectionContext(this.injector, () => getValidationErrorsTooltipContent(this.validationErrors));
+        this.isEntityValid = this.validationErrors.length === 0;
+    }
     /**
      * Tries to save the changes and close the dialog afterwards.
      * Also handles the confirmation if required.
@@ -5558,7 +6015,7 @@ class NgxMatEntityEditDialogComponent {
      * @param action - The action to run.
      */
     runEditAction(action) {
-        const requireConfirmDialog = this.injector.runInContext(() => {
+        const requireConfirmDialog = runInInjectionContext(this.injector, () => {
             return action.requireConfirmDialog(this.entityPriorChanges);
         });
         if (!requireConfirmDialog) {
@@ -5577,7 +6034,7 @@ class NgxMatEntityEditDialogComponent {
         });
     }
     confirmRunEditAction(action) {
-        void this.injector.runInContext(async () => {
+        void runInInjectionContext(this.injector, async () => {
             await action.action(this.data.entity, this.entityPriorChanges);
             await this.checkEntity();
         });
@@ -5589,12 +6046,10 @@ class NgxMatEntityEditDialogComponent {
      * @returns Whether or not the Action can be used.
      */
     editActionDisabled(action) {
-        return this.injector.runInContext(() => {
-            return !action.enabled(this.entityPriorChanges);
-        });
+        return runInInjectionContext(this.injector, () => !action.enabled(this.entityPriorChanges));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: NgxMatEntityEditDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.MatDialogRef }, { token: i0.EnvironmentInjector }, { token: i1.MatDialog }, { token: i2.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: NgxMatEntityEditDialogComponent, isStandalone: true, selector: "ngx-mat-entity-edit-dialog", ngImport: i0, template: "<div class=\"mat-dialog-title\">\n    <div>{{data.editData.title(entityPriorChanges)}}</div>\n\n    <div class=\"actions-container\">\n        <button *ngIf=\"data.editData.actions.length\" type=\"button\" [matMenuTriggerFor]=\"menu\" mat-raised-button>\n            {{data.editData.actionsLabel}}\n        </button>\n        <mat-menu #menu=\"matMenu\">\n            <button type=\"button\" *ngFor=\"let action of data.editData.actions\" [disabled]=\"editActionDisabled(action)\" (click)=\"runEditAction(action)\" mat-menu-item>\n                {{action.displayName}}\n            </button>\n        </mat-menu>\n    \n        <button type=\"button\" *ngIf=\"allowDelete\" mat-raised-button (click)=\"delete()\" color=\"warn\" class=\"delete-button\" tabindex=\"-1\">\n            {{data.editData.deleteButtonLabel}}\n        </button>\n    </div>\n</div>\n\n<form>\n    <mat-dialog-content>\n        <mat-tab-group *ngIf=\"entityTabs.length > 1\" preserveContent>\n            <mat-tab *ngFor=\"let tab of entityTabs\" [label]=\"tab.tabName\">\n                <div class=\"row\" *ngFor=\"let row of tab.rows\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"data.entity\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForEdit]=\"true\"\n                        class=\"col-lg-{{EntityUtilities.getWidth(data.entity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(data.entity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(data.entity, key, 'sm')}}\"\n                        (inputChangeEvent)=\"checkEntity()\"\n                        [isReadOnly]=\"isReadOnly(key)\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </mat-tab>\n        </mat-tab-group>\n    \n        <div *ngIf=\"entityTabs.length <= 1\">\n            <span class=\"no-entity-tabs\" *ngIf=\"!entityTabs.length\">\n                ERROR: No Inputs. Did you correctly assign all values in the model constructor?\n            </span>\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(key)\"\n                >\n                </ngx-mat-entity-input>\n            </div>\n        </div>\n    </mat-dialog-content>\n    \n    <mat-dialog-actions>\n        <button type=\"submit\" (click)=\"edit()\" mat-raised-button [disabled]=\"isEntityReadOnly || !isEntityValid || !isEntityDirty\">\n            {{data.editData.confirmButtonLabel}}\n        </button>\n        <button type=\"button\" mat-raised-button (click)=\"cancel()\" class=\"cancel-button\">\n            {{data.editData.cancelButtonLabel}}\n        </button>\n    </mat-dialog-actions>\n</form>\n", styles: [".mat-dialog-title{padding:12px 20px;display:flex;justify-content:space-between;align-items:center}.mat-dialog-title div{font-size:var(--mdc-dialog-subhead-size, 14px);font-weight:var(--mdc-dialog-subhead-weight, 500)}.actions-container{display:flex;gap:10px}.no-entity-tabs{padding:10px;background-color:red;color:#f5f5f5}::ng-deep .mdc-dialog .mdc-dialog__content{padding:6px 20px!important}mat-dialog-actions{justify-content:space-between;align-items:center;padding-left:20px;padding-right:20px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: NgxMatEntityInputModule }, { kind: "component", type: NgxMatEntityInputComponent, selector: "ngx-mat-entity-input", inputs: ["entity", "propertyKey", "getValidationErrorMessage", "hideOmitForCreate", "hideOmitForEdit", "validEmpty", "isReadOnly"], outputs: ["inputChangeEvent"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i6$2.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i6$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i14.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i14.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i14.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: NgxMatEntityEditDialogComponent, isStandalone: true, selector: "ngx-mat-entity-edit-dialog", ngImport: i0, template: "<div class=\"mat-dialog-title\">\n    <div>{{data.editData.title(entityPriorChanges)}}</div>\n\n    <div class=\"actions-container\">\n        <button *ngIf=\"data.editData.actions.length\" type=\"button\" [matMenuTriggerFor]=\"menu\" mat-raised-button>\n            {{data.editData.actionsLabel}}\n        </button>\n        <mat-menu #menu=\"matMenu\">\n            <button type=\"button\" *ngFor=\"let action of data.editData.actions\" [disabled]=\"editActionDisabled(action)\" (click)=\"runEditAction(action)\" mat-menu-item>\n                {{action.displayName}}\n            </button>\n        </mat-menu>\n    \n        <button type=\"button\" *ngIf=\"allowDelete\" mat-raised-button (click)=\"delete()\" color=\"warn\" class=\"delete-button\" tabindex=\"-1\">\n            {{data.editData.deleteButtonLabel}}\n        </button>\n    </div>\n</div>\n\n<form>\n    <mat-dialog-content>\n        <mat-tab-group *ngIf=\"entityTabs.length > 1\" preserveContent>\n            <mat-tab *ngFor=\"let tab of entityTabs\" [label]=\"tab.tabName\">\n                <div class=\"row\" *ngFor=\"let row of tab.rows\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"data.entity\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForEdit]=\"true\"\n                        class=\"col-lg-{{EntityUtilities.getWidth(data.entity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(data.entity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(data.entity, key, 'sm')}}\"\n                        (inputChangeEvent)=\"checkEntity()\"\n                        [isReadOnly]=\"isReadOnly(key)\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </mat-tab>\n        </mat-tab-group>\n    \n        <div *ngIf=\"entityTabs.length <= 1\">\n            <span class=\"no-entity-tabs\" *ngIf=\"!entityTabs.length\">\n                ERROR: No Inputs. Did you correctly assign all values in the model constructor?\n            </span>\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(key)\"\n                >\n                </ngx-mat-entity-input>\n            </div>\n        </div>\n    </mat-dialog-content>\n    \n    <mat-dialog-actions>\n        <div class=\"d-flex align-items-center gap-3\" style=\"margin-top: 10px;\">\n            <button type=\"submit\" (click)=\"edit()\" mat-raised-button\n                [disabled]=\"isEntityReadOnly || !isEntityValid || !isEntityDirty\"\n                [matBadge]=\"validationErrors.length\"\n                [matBadgeHidden]=\"!validationErrors.length\"\n                matBadgeColor=\"warn\"\n            >\n                {{data.editData.confirmButtonLabel}}\n            </button>\n            <ngx-mat-entity-tooltip *ngIf=\"validationErrors.length\" [tooltipContent]=\"tooltipContent\"></ngx-mat-entity-tooltip>\n        </div>\n\n\n        <button type=\"button\" mat-raised-button (click)=\"cancel()\" class=\"cancel-button\">\n            {{data.editData.cancelButtonLabel}}\n        </button>\n    </mat-dialog-actions>\n</form>\n", styles: [".mat-dialog-title{padding:12px 20px;display:flex;justify-content:space-between;align-items:center}.mat-dialog-title div{font-size:var(--mdc-dialog-subhead-size, 14px);font-weight:var(--mdc-dialog-subhead-weight, 500)}.actions-container{display:flex;gap:10px}.no-entity-tabs{padding:10px;background-color:red;color:#f5f5f5}::ng-deep .mdc-dialog .mdc-dialog__content{padding:6px 20px!important}mat-dialog-actions{justify-content:space-between;align-items:center;padding-left:20px;padding-right:20px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: NgxMatEntityInputModule }, { kind: "component", type: NgxMatEntityInputComponent, selector: "ngx-mat-entity-input", inputs: ["entity", "propertyKey", "getValidationErrorMessage", "hideOmitForCreate", "hideOmitForEdit", "validEmpty", "isReadOnly"], outputs: ["inputChangeEvent"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i6$2.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i6$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i14.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i14.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i14.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i10.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: TooltipComponent, selector: "ngx-mat-entity-tooltip", inputs: ["tooltipContent"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: NgxMatEntityEditDialogComponent, decorators: [{
             type: Component,
@@ -5607,8 +6062,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImpor
                         MatButtonModule,
                         MatTabsModule,
                         NgxMatEntityConfirmDialogComponent,
-                        MatMenuModule
-                    ], template: "<div class=\"mat-dialog-title\">\n    <div>{{data.editData.title(entityPriorChanges)}}</div>\n\n    <div class=\"actions-container\">\n        <button *ngIf=\"data.editData.actions.length\" type=\"button\" [matMenuTriggerFor]=\"menu\" mat-raised-button>\n            {{data.editData.actionsLabel}}\n        </button>\n        <mat-menu #menu=\"matMenu\">\n            <button type=\"button\" *ngFor=\"let action of data.editData.actions\" [disabled]=\"editActionDisabled(action)\" (click)=\"runEditAction(action)\" mat-menu-item>\n                {{action.displayName}}\n            </button>\n        </mat-menu>\n    \n        <button type=\"button\" *ngIf=\"allowDelete\" mat-raised-button (click)=\"delete()\" color=\"warn\" class=\"delete-button\" tabindex=\"-1\">\n            {{data.editData.deleteButtonLabel}}\n        </button>\n    </div>\n</div>\n\n<form>\n    <mat-dialog-content>\n        <mat-tab-group *ngIf=\"entityTabs.length > 1\" preserveContent>\n            <mat-tab *ngFor=\"let tab of entityTabs\" [label]=\"tab.tabName\">\n                <div class=\"row\" *ngFor=\"let row of tab.rows\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"data.entity\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForEdit]=\"true\"\n                        class=\"col-lg-{{EntityUtilities.getWidth(data.entity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(data.entity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(data.entity, key, 'sm')}}\"\n                        (inputChangeEvent)=\"checkEntity()\"\n                        [isReadOnly]=\"isReadOnly(key)\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </mat-tab>\n        </mat-tab-group>\n    \n        <div *ngIf=\"entityTabs.length <= 1\">\n            <span class=\"no-entity-tabs\" *ngIf=\"!entityTabs.length\">\n                ERROR: No Inputs. Did you correctly assign all values in the model constructor?\n            </span>\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(key)\"\n                >\n                </ngx-mat-entity-input>\n            </div>\n        </div>\n    </mat-dialog-content>\n    \n    <mat-dialog-actions>\n        <button type=\"submit\" (click)=\"edit()\" mat-raised-button [disabled]=\"isEntityReadOnly || !isEntityValid || !isEntityDirty\">\n            {{data.editData.confirmButtonLabel}}\n        </button>\n        <button type=\"button\" mat-raised-button (click)=\"cancel()\" class=\"cancel-button\">\n            {{data.editData.cancelButtonLabel}}\n        </button>\n    </mat-dialog-actions>\n</form>\n", styles: [".mat-dialog-title{padding:12px 20px;display:flex;justify-content:space-between;align-items:center}.mat-dialog-title div{font-size:var(--mdc-dialog-subhead-size, 14px);font-weight:var(--mdc-dialog-subhead-weight, 500)}.actions-container{display:flex;gap:10px}.no-entity-tabs{padding:10px;background-color:red;color:#f5f5f5}::ng-deep .mdc-dialog .mdc-dialog__content{padding:6px 20px!important}mat-dialog-actions{justify-content:space-between;align-items:center;padding-left:20px;padding-right:20px}\n"] }]
+                        MatMenuModule,
+                        MatBadgeModule,
+                        TooltipComponent
+                    ], template: "<div class=\"mat-dialog-title\">\n    <div>{{data.editData.title(entityPriorChanges)}}</div>\n\n    <div class=\"actions-container\">\n        <button *ngIf=\"data.editData.actions.length\" type=\"button\" [matMenuTriggerFor]=\"menu\" mat-raised-button>\n            {{data.editData.actionsLabel}}\n        </button>\n        <mat-menu #menu=\"matMenu\">\n            <button type=\"button\" *ngFor=\"let action of data.editData.actions\" [disabled]=\"editActionDisabled(action)\" (click)=\"runEditAction(action)\" mat-menu-item>\n                {{action.displayName}}\n            </button>\n        </mat-menu>\n    \n        <button type=\"button\" *ngIf=\"allowDelete\" mat-raised-button (click)=\"delete()\" color=\"warn\" class=\"delete-button\" tabindex=\"-1\">\n            {{data.editData.deleteButtonLabel}}\n        </button>\n    </div>\n</div>\n\n<form>\n    <mat-dialog-content>\n        <mat-tab-group *ngIf=\"entityTabs.length > 1\" preserveContent>\n            <mat-tab *ngFor=\"let tab of entityTabs\" [label]=\"tab.tabName\">\n                <div class=\"row\" *ngFor=\"let row of tab.rows\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"data.entity\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForEdit]=\"true\"\n                        class=\"col-lg-{{EntityUtilities.getWidth(data.entity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(data.entity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(data.entity, key, 'sm')}}\"\n                        (inputChangeEvent)=\"checkEntity()\"\n                        [isReadOnly]=\"isReadOnly(key)\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </mat-tab>\n        </mat-tab-group>\n    \n        <div *ngIf=\"entityTabs.length <= 1\">\n            <span class=\"no-entity-tabs\" *ngIf=\"!entityTabs.length\">\n                ERROR: No Inputs. Did you correctly assign all values in the model constructor?\n            </span>\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(key)\"\n                >\n                </ngx-mat-entity-input>\n            </div>\n        </div>\n    </mat-dialog-content>\n    \n    <mat-dialog-actions>\n        <div class=\"d-flex align-items-center gap-3\" style=\"margin-top: 10px;\">\n            <button type=\"submit\" (click)=\"edit()\" mat-raised-button\n                [disabled]=\"isEntityReadOnly || !isEntityValid || !isEntityDirty\"\n                [matBadge]=\"validationErrors.length\"\n                [matBadgeHidden]=\"!validationErrors.length\"\n                matBadgeColor=\"warn\"\n            >\n                {{data.editData.confirmButtonLabel}}\n            </button>\n            <ngx-mat-entity-tooltip *ngIf=\"validationErrors.length\" [tooltipContent]=\"tooltipContent\"></ngx-mat-entity-tooltip>\n        </div>\n\n\n        <button type=\"button\" mat-raised-button (click)=\"cancel()\" class=\"cancel-button\">\n            {{data.editData.cancelButtonLabel}}\n        </button>\n    </mat-dialog-actions>\n</form>\n", styles: [".mat-dialog-title{padding:12px 20px;display:flex;justify-content:space-between;align-items:center}.mat-dialog-title div{font-size:var(--mdc-dialog-subhead-size, 14px);font-weight:var(--mdc-dialog-subhead-weight, 500)}.actions-container{display:flex;gap:10px}.no-entity-tabs{padding:10px;background-color:red;color:#f5f5f5}::ng-deep .mdc-dialog .mdc-dialog__content{padding:6px 20px!important}mat-dialog-actions{justify-content:space-between;align-items:center;padding-left:20px;padding-right:20px}\n"] }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -5793,7 +6250,7 @@ class NgxMatEntityTableComponent {
         const dialogData = new EditEntityDataBuilder(inputDialogData).getResult();
         const res = await firstValueFrom(this.dialog.open(NgxMatEntityEditDialogComponent, {
             data: dialogData,
-            minWidth: '60%',
+            // minWidth: '60%',
             autoFocus: false,
             restoreFocus: false
         }).afterClosed());
@@ -5815,11 +6272,13 @@ class NgxMatEntityTableComponent {
                 if (!this.data.baseData.EntityClass) {
                     throw new Error('No "EntityClass" specified for this table');
                 }
+                const entity = new this.data.baseData.EntityClass();
+                EntityUtilities.setDefaultValues(entity);
                 if (this.data.baseData.create) {
-                    this.data.baseData.create(new this.data.baseData.EntityClass());
+                    this.data.baseData.create(entity);
                 }
                 else {
-                    this.createDefault(new this.data.baseData.EntityClass());
+                    this.createDefault(entity);
                 }
             }
         });
@@ -5981,6 +6440,15 @@ class PropertyDecoratorConfig {
      */
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     isReadOnly;
+    /**
+     * The value that the property should be prefilled with. Only active in create mode.
+     */
+    default;
+    /**
+     * A function that runs just before the inputChangeEvent every time the property is changed.
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    change;
 }
 
 /**
@@ -6522,6 +6990,7 @@ class DateTimeDateDecoratorConfigInternal extends PropertyDecoratorConfigInterna
         this.minTime = data.minTime;
         this.maxTime = data.maxTime;
         this.filterTime = data.filterTime;
+        this.defaultWidths = [6, 12, 12];
     }
 }
 
@@ -7076,5 +7545,5 @@ class StringDecoratorConfig extends PropertyDecoratorConfig {
  * Generated bundle index. Do not edit.
  */
 
-export { ArrayDecoratorConfig, DateUtilities, DecoratorTypes, Entity, EntityService, EntityUtilities, FileUtilities, NGX_EDIT_DATA, NGX_EDIT_DATA_ENTITY, NGX_EDIT_DATA_ENTITY_SERVICE, NGX_GET_VALIDATION_ERROR_MESSAGE, NgxMatEntityBaseDisplayColumnValueComponent, NgxMatEntityBaseInputComponent, NgxMatEntityConfirmDialogComponent, NgxMatEntityCreateDialogComponent, NgxMatEntityEditDialogComponent, NgxMatEntityEditPageComponent, NgxMatEntityInputComponent, NgxMatEntityInputModule, NgxMatEntityTableComponent, UnsavedChangesGuard, array, boolean, custom, date, defaultEditDataRoute, exportAsCsvMultiAction, exportAsJsonMultiAction, exportAsXmlMultiAction, file, hasMany, importFromJsonMultiAction, number, object, referencesMany, referencesOne, string };
+export { ArrayDecoratorConfig, DateUtilities, DecoratorTypes, Entity, EntityService, EntityUtilities, FileUtilities, NGX_EDIT_DATA, NGX_EDIT_DATA_ENTITY, NGX_EDIT_DATA_ENTITY_SERVICE, NGX_GET_VALIDATION_ERROR_MESSAGE, NGX_VALIDATION_ERRORS_TOOLTIP_TITLE, NgxMatEntityBaseDisplayColumnValueComponent, NgxMatEntityBaseInputComponent, NgxMatEntityConfirmDialogComponent, NgxMatEntityCreateDialogComponent, NgxMatEntityEditDialogComponent, NgxMatEntityEditPageComponent, NgxMatEntityInputComponent, NgxMatEntityInputModule, NgxMatEntityTableComponent, TooltipComponent, UnsavedChangesGuard, ValidationUtilities, array, boolean, custom, date, defaultEditDataRoute, exportAsCsvMultiAction, exportAsJsonMultiAction, exportAsXmlMultiAction, file, getValidationErrorsTooltipContent, hasMany, importFromJsonMultiAction, number, object, referencesMany, referencesOne, string };
 //# sourceMappingURL=ngx-material-entity.mjs.map