ngx-material-entity 16.0.7 → 16.0.9

package/fesm2022/ngx-material-entity.mjs

@@ -24,7 +24,7 @@ import * as i5$1 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
 import * as i4$1 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import * as i6$1 from '@angular/material/chips';
+import * as i6$2 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
 import * as i7 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
@@ -37,7 +37,7 @@ import * as i13 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
 import * as i14 from '@angular/material/paginator';
 import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
-import * as i7$1 from '@angular/material/select';
+import * as i6$1 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 import * as i4$2 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
@@ -45,7 +45,7 @@ import * as i4$3 from '@angular/material/slider';
 import { MatSliderModule } from '@angular/material/slider';
 import * as i17 from '@angular/material/sort';
 import { MatSort, MatSortModule } from '@angular/material/sort';
-import * as i10 from '@angular/material/table';
+import * as i9 from '@angular/material/table';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import { SelectionModel } from '@angular/cdk/collections';
 import * as uuid from 'uuid';
@@ -188,7 +188,11 @@ class ReflectUtilities {
      * @returns The keys of the given object.
      */
     static ownKeys(target) {
-        return Reflect.ownKeys(target);
+        const res = [];
+        for (const key in target) {
+            res.push(key);
+        }
+        return res;
     }
     /**
      * Gets the property of target, equivalent to `target[propertyKey]`.
@@ -249,7 +253,6 @@ function defaultTrue() {
     return true;
 }
 
-// eslint-disable-next-line constCase/uppercase
 const DAY_IN_MS = 1000 * 60 * 60 * 24;
 /**
  * Contains Helper Functions for handling date properties.
@@ -618,9 +621,9 @@ class EntityUtilities {
      */
     static getOmitForUpdate(entity) {
         const res = [];
-        for (const key of ReflectUtilities.ownKeys(entity)) {
+        for (const key in entity) {
             const metadata = this.getPropertyMetadata(entity, key);
-            if (metadata.omitForUpdate) {
+            if (!metadata || metadata.omitForUpdate) {
                 res.push(key);
             }
         }
@@ -633,9 +636,9 @@ class EntityUtilities {
      */
     static getOmitForCreate(entity) {
         const res = [];
-        for (const key of ReflectUtilities.ownKeys(entity)) {
+        for (const key in entity) {
             const metadata = this.getPropertyMetadata(entity, key);
-            if (metadata.omitForCreate) {
+            if (!metadata || metadata.omitForCreate) {
                 res.push(key);
             }
         }
@@ -688,7 +691,7 @@ class EntityUtilities {
     static setDefaultValues(entity) {
         for (const key in entity) {
             const metadata = this.getPropertyMetadata(entity, key);
-            if (metadata.default) {
+            if (metadata?.default) {
                 // eslint-disable-next-line typescript/no-unsafe-assignment, typescript/no-explicit-any
                 entity[key] = metadata.default();
             }
@@ -702,7 +705,7 @@ class EntityUtilities {
      */
     static getFileProperties(entity, omit) {
         const res = [];
-        for (const key of ReflectUtilities.ownKeys(entity)) {
+        for (const key in entity) {
             const type = this.getPropertyType(entity, key);
             if (type === DecoratorTypes.FILE_DEFAULT || type === DecoratorTypes.FILE_IMAGE) {
                 const metadata = this.getPropertyMetadata(entity, key);
@@ -725,9 +728,9 @@ class EntityUtilities {
     // eslint-disable-next-line typescript/no-unused-vars
     type) {
         const metadata = ReflectUtilities.getMetadata('metadata', entity, propertyKey);
-        if (metadata == null) {
-            throw new Error(`Could not find metadata for property ${String(propertyKey)} on the entity ${JSON.stringify(entity)}`);
-        }
+        // if (metadata == null) {
+        //     throw new Error(`Could not find metadata for property ${String(propertyKey)} on the entity ${JSON.stringify(entity)}`);
+        // }
         return metadata;
     }
     /**
@@ -738,16 +741,7 @@ class EntityUtilities {
      * @throws Will throw an error if no metadata can be found for the given property.
      */
     static getPropertyType(entity, propertyKey) {
-        try {
-            const propertyType = ReflectUtilities.getMetadata('type', entity, propertyKey);
-            if (propertyType == null) {
-                throw new Error(`Could not find type metadata for property ${String(propertyKey)} on the entity ${JSON.stringify(entity)}`);
-            }
-            return propertyType;
-        }
-        catch (error) {
-            throw new Error(`Could not find type metadata for property ${String(propertyKey)} on the entity ${JSON.stringify(entity)}`);
-        }
+        return ReflectUtilities.getMetadata('type', entity, propertyKey);
     }
     /**
      * Sets all property values based on a given entity data-object.
@@ -764,7 +758,9 @@ class EntityUtilities {
             switch (type) {
                 case DecoratorTypes.OBJECT:
                     // eslint-disable-next-line typescript/no-explicit-any
-                    const objectMetadata = this.getPropertyMetadata(target, key, DecoratorTypes.OBJECT);
+                    const objectMetadata 
+                    // eslint-disable-next-line typescript/no-explicit-any
+                    = this.getPropertyMetadata(target, key, DecoratorTypes.OBJECT);
                     value = new objectMetadata.EntityClass(value);
                     break;
                 case DecoratorTypes.ARRAY:
@@ -772,7 +768,9 @@ class EntityUtilities {
                     const resArray = [];
                     if (inputArray) {
                         // eslint-disable-next-line typescript/no-explicit-any
-                        const arrayMetadata = this.getPropertyMetadata(target, key, DecoratorTypes.ARRAY);
+                        const arrayMetadata 
+                        // eslint-disable-next-line typescript/no-explicit-any
+                        = this.getPropertyMetadata(target, key, DecoratorTypes.ARRAY);
                         for (const item of inputArray) {
                             const itemWithMetadata = new arrayMetadata.EntityClass(item);
                             resArray.push(itemWithMetadata);
@@ -813,9 +811,9 @@ class EntityUtilities {
      */
     static async getDifferencesBetweenEntities(entity, entityPriorChanges, http) {
         const res = [];
-        for (const key of ReflectUtilities.ownKeys(entity)) {
-            const metadata = this.getPropertyMetadata(entity, key);
+        for (const key in entity) {
             const type = this.getPropertyType(entity, key);
+            const metadata = this.getPropertyMetadata(entity, key);
             if (!(await this.isEqual(entity[key], entityPriorChanges[key], metadata, type, http))) {
                 res.push({
                     key: key,
@@ -932,7 +930,6 @@ class EntityUtilities {
         if (dateRange?.start && dateRange.end) {
             dateRange.values = DateUtilities.getDatesBetween(dateRange.start, dateRange.end, filter);
         }
-        // eslint-disable-next-line max-len
         const dateRangePriorChanges = LodashUtilities.cloneDeep(valuePriorChanges);
         if (dateRangePriorChanges?.start) {
             dateRangePriorChanges.start = new Date(dateRangePriorChanges.start);
@@ -1001,6 +998,9 @@ class EntityUtilities {
     static compareOrder(a, b, entity) {
         const metadataA = this.getPropertyMetadata(entity, a);
         const metadataB = this.getPropertyMetadata(entity, b);
+        if (!metadataA || !metadataB) {
+            return 0;
+        }
         if (metadataA.position.order === -1) {
             if (metadataB.position.order === -1) {
                 return 0;
@@ -1017,9 +1017,13 @@ class EntityUtilities {
      * @param entity - Entity to get the bootstrap column values of the key.
      * @param key - Key of the property to get bootstrap column values from.
      * @returns Bootstrap column classes.
+     * @throws When no metadata for the given key was found.
      */
     static getWidthClasses(entity, key) {
         const metadata = this.getPropertyMetadata(entity, key);
+        if (!metadata) {
+            throw new Error(`Could not get metadata for property "${key.toString()}"`);
+        }
         return `col-lg-${metadata.defaultWidths[0]} col-md-${metadata.defaultWidths[1]} col-sm-${metadata.defaultWidths[2]}`;
     }
     /**
@@ -1074,7 +1078,6 @@ class EntityUtilities {
         const keys = this.keysOf(entity, injector, 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, injector);
         if (firstTabRows.length) {
             const firstTab = {
@@ -1099,31 +1102,32 @@ class EntityUtilities {
     }
     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)
+            .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)
+            .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)
+            .filter(k => this.getPropertyMetadata(entity, k) != null)
+            .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;
+            .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;
+            .find(m => m?.position.tabName && m.position.tab === -1)?.position.tabName;
         return providedTabName ?? 'Tab 1';
     }
     /**
@@ -1150,9 +1154,9 @@ class EntityUtilities {
     }
     static getDontDisplayKeys(entity, injector) {
         const res = [];
-        for (const key of ReflectUtilities.ownKeys(entity)) {
+        for (const key in entity) {
             const metadata = this.getPropertyMetadata(entity, key);
-            if (runInInjectionContext(injector, () => !metadata.display(entity))) {
+            if (runInInjectionContext(injector, () => !metadata || !metadata.display(entity))) {
                 res.push(key);
             }
         }
@@ -1171,7 +1175,6 @@ 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);
     };
 }
@@ -1349,7 +1352,7 @@ class TextboxStringDecoratorConfigInternal extends PropertyDecoratorConfigIntern
 class AutocompleteStringDecoratorConfigInternal extends PropertyDecoratorConfigInternal {
     // eslint-disable-next-line jsdoc/require-jsdoc
     displayStyle;
-    // eslint-disable-next-line jsdoc/require-jsdoc
+    // eslint-disable-next-line jsdoc/require-jsdoc, typescript/no-explicit-any
     autocompleteValues;
     // eslint-disable-next-line jsdoc/require-jsdoc
     minLength;
@@ -1362,12 +1365,20 @@ class AutocompleteStringDecoratorConfigInternal extends PropertyDecoratorConfigI
     constructor(data) {
         super(data);
         this.displayStyle = data.displayStyle;
-        this.autocompleteValues = data.autocompleteValues;
+        this.autocompleteValues = this.autocompleteValuesToFunction(data.autocompleteValues);
         this.minLength = data.minLength;
         this.maxLength = data.maxLength;
         this.regex = data.regex;
         this.restrictToOptions = data.restrictToOptions;
     }
+    // eslint-disable-next-line typescript/no-explicit-any
+    autocompleteValuesToFunction(autocompleteValues) {
+        if (Array.isArray(autocompleteValues)) {
+            return async () => autocompleteValues;
+        }
+        // eslint-disable-next-line typescript/no-explicit-any
+        return async (e) => await autocompleteValues(e);
+    }
 }
 /**
  * The internal PasswordStringDecoratorConfig. Sets default values.
@@ -1385,6 +1396,8 @@ class PasswordStringDecoratorConfigInternal extends PropertyDecoratorConfigInter
     needsConfirmation;
     // eslint-disable-next-line jsdoc/require-jsdoc
     confirmationDisplayName;
+    // eslint-disable-next-line jsdoc/require-jsdoc
+    displayPasswordStrength;
     constructor(data) {
         super(data);
         this.displayStyle = data.displayStyle;
@@ -1393,6 +1406,7 @@ class PasswordStringDecoratorConfigInternal extends PropertyDecoratorConfigInter
         this.regex = data.regex;
         this.needsConfirmation = data.needsConfirmation ?? true;
         this.confirmationDisplayName = data.confirmationDisplayName ?? 'Confirm Password';
+        this.displayPasswordStrength = data.displayPasswordStrength ?? true;
         this.defaultWidths = data.defaultWidths ?? [12, 12, 12];
     }
 }
@@ -1445,7 +1459,6 @@ __decorate([
 /**
  * The provider for global configuration values.
  */
-// eslint-disable-next-line max-len, constCase/uppercase
 const NGX_GLOBAL_DEFAULT_VALUES = new InjectionToken('NGX_GLOBAL_DEFAULT_VALUES', {
     providedIn: 'root',
     factory: () => {
@@ -1543,7 +1556,6 @@ const needsUpdateGlobalDefaults = {
 /**
  * The internal values consisting of default ones and values provided by the user in NGX_GLOBAL_DEFAULT_VALUES.
  */
-// eslint-disable-next-line constCase/uppercase
 const NGX_INTERNAL_GLOBAL_DEFAULT_VALUES = new InjectionToken('NGX_INTERNAL_GLOBAL_DEFAULT_VALUES', {
     providedIn: 'root',
     factory: () => {
@@ -1657,7 +1669,6 @@ class ConfirmDialogDataBuilder extends BaseBuilder {
             return;
         }
         if (data.requireConfirmation === true && !data.confirmationText) {
-            // eslint-disable-next-line max-len
             throw new Error('Missing required Input data "confirmationText". You can only omit this value when "requireConfirmation" is false.');
         }
         if (data.requireConfirmation !== true && data.confirmationText) {
@@ -2051,22 +2062,24 @@ 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 injector - An angular environment injector.
      * @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;
+    static async isEntityValid(entity, injector, omit) {
+        return (await this.getEntityValidationErrors(entity, injector, omit)).length === 0;
     }
     /**
      * Gets all validation errors on the given entity.
      * @param entity - The entity to validate.
+     * @param injector - An angular environment injector.
      * @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) {
+    static async getEntityValidationErrors(entity, injector, omit) {
         const res = [];
-        for (const key in entity) {
-            const err = this.getPropertyValidationError(entity, key, omit);
+        for (const key of EntityUtilities.keysOf(entity, injector)) {
+            const err = await this.getPropertyValidationError(entity, key, omit);
             if (err) {
                 res.push(err);
             }
@@ -2097,9 +2110,16 @@ class ValidationUtilities {
      * @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) {
+    static async getPropertyValidationError(entity, key, omit) {
         const type = EntityUtilities.getPropertyType(entity, key);
+        if (type == null) {
+            return undefined;
+        }
         const metadata = EntityUtilities.getPropertyMetadata(entity, key, type);
+        // istanbul ignore next
+        if (metadata == null) {
+            return undefined;
+        }
         if (metadata.omitForCreate && omit === 'create') {
             return undefined;
         }
@@ -2135,9 +2155,8 @@ class ValidationUtilities {
                 return this.getStringValidationError(entityString, stringMetadata);
             case DecoratorTypes.STRING_AUTOCOMPLETE:
                 const entityAutocompleteString = entity[key];
-                // eslint-disable-next-line max-len
                 const stringAutocompleteMetadata = metadata;
-                return this.getAutocompleteStringValidationError(entityAutocompleteString, stringAutocompleteMetadata);
+                return this.getAutocompleteStringValidationError(entity, entityAutocompleteString, stringAutocompleteMetadata);
             case DecoratorTypes.STRING_TEXTBOX:
                 const entityTextbox = entity[key];
                 const textboxMetadata = metadata;
@@ -2161,7 +2180,7 @@ class ValidationUtilities {
                     const value = entityObject[parameterKey];
                     if (!metadata.omit.includes(parameterKey)
                         && !(!metadata.required(entity) && (value == null || value == ''))) {
-                        const err = this.getPropertyValidationError(entityObject, parameterKey, omit);
+                        const err = await this.getPropertyValidationError(entityObject, parameterKey, omit);
                         if (err) {
                             return {
                                 property: metadata.displayName,
@@ -2171,14 +2190,16 @@ class ValidationUtilities {
                     }
                 }
                 break;
-            case DecoratorTypes.ARRAY_STRING_CHIPS:
             case DecoratorTypes.ARRAY_STRING_AUTOCOMPLETE_CHIPS:
+                const stringAutocompleteArray = entity[key];
+                const stringAutocompleteArrayMetadata = metadata;
+                return await this.getArrayStringAutocompleteChipsValidationError(entity, stringAutocompleteArrayMetadata, stringAutocompleteArray);
+            case DecoratorTypes.ARRAY_STRING_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 {
@@ -2210,7 +2231,7 @@ class ValidationUtilities {
             case DecoratorTypes.HAS_MANY:
                 break;
             case DecoratorTypes.CUSTOM:
-                // eslint-disable-next-line typescript/no-explicit-any, max-len
+                // eslint-disable-next-line typescript/no-explicit-any
                 const customMetadata = metadata;
                 if (!customMetadata.isValid(entity[key], omit)) {
                     return {
@@ -2224,6 +2245,26 @@ class ValidationUtilities {
         }
         return undefined;
     }
+    static async getArrayStringAutocompleteChipsValidationError(entity, metadata, stringAutocompleteArray) {
+        if (metadata.required(entity) && !stringAutocompleteArray.length) {
+            return {
+                property: metadata.displayName,
+                message: 'no items in array'
+            };
+        }
+        if (metadata.restrictToOptions == true) {
+            const autocompleteValues = await metadata.autocompleteValues(entity);
+            for (const value of stringAutocompleteArray) {
+                if (!autocompleteValues.includes(value)) {
+                    return {
+                        property: metadata.displayName,
+                        message: `The value "${value}" needs to be one of the provided values`
+                    };
+                }
+            }
+        }
+        return undefined;
+    }
     static getBooleanValidationError(entity, value, metadata) {
         if (metadata.required(entity) && !value) {
             return {
@@ -2254,7 +2295,7 @@ class ValidationUtilities {
         }
         return undefined;
     }
-    static getAutocompleteStringValidationError(value, metadata) {
+    static async getAutocompleteStringValidationError(entity, value, metadata) {
         if (metadata.maxLength && value.length > metadata.maxLength) {
             return {
                 property: metadata.displayName,
@@ -2273,7 +2314,7 @@ class ValidationUtilities {
                 message: 'invalid'
             };
         }
-        if (metadata.restrictToOptions == true && !metadata.autocompleteValues.includes(value)) {
+        if (metadata.restrictToOptions == true && !(await metadata.autocompleteValues(entity)).includes(value)) {
             return {
                 property: metadata.displayName,
                 message: 'Needs to be one of the provided values'
@@ -2595,10 +2636,9 @@ class IncludedInValidatorDirective {
     includedIn;
     // eslint-disable-next-line jsdoc/require-jsdoc
     validate(control) {
-        if (!this.includedIn?.length) {
+        if (!this.includedIn?.length || !(Boolean(control.value))) {
             return null;
         }
-        // eslint-disable-next-line typescript/no-unsafe-assignment
         return this.includedIn.includes(control.value) ? null : { includedIn: { value: control.value, validValues: this.includedIn } };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: IncludedInValidatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -2732,10 +2772,24 @@ class TooltipDirective {
     tooltip;
     tooltipElement;
     closeListeners = [];
+    openedByClick = false;
     constructor(el, renderer) {
         this.el = el;
         this.renderer = renderer;
     }
+    /**
+     * Toggles the tooltip.
+     */
+    onClick() {
+        if (!this.tooltipElement) {
+            this.showTooltip();
+            this.registerCloseListeners();
+            this.openedByClick = true;
+            return;
+        }
+        this.hideTooltip();
+        this.removeCloseListeners();
+    }
     /**
      * Shows the tooltip.
      */
@@ -2743,16 +2797,28 @@ class TooltipDirective {
         if (!this.tooltipElement) {
             this.showTooltip();
             this.registerCloseListeners();
+            return;
         }
-        else {
-            this.hideTooltip();
-            this.removeCloseListeners();
+        if (this.openedByClick) {
+            return;
         }
+        this.hideTooltip();
+        this.removeCloseListeners();
     }
     /**
      * Hides the tooltip.
      */
     onMouseLeave() {
+        if (this.openedByClick) {
+            return;
+        }
+        this.hideTooltip();
+        this.removeCloseListeners();
+    }
+    /**
+     * Hides the tooltip.
+     */
+    onResize() {
         this.hideTooltip();
         this.removeCloseListeners();
     }
@@ -2795,12 +2861,13 @@ class TooltipDirective {
             listener();
         }
         this.closeListeners = [];
+        this.openedByClick = false;
     }
     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 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.0", type: TooltipDirective, isStandalone: true, selector: "[tooltip]", inputs: { tooltip: "tooltip" }, host: { listeners: { "click": "onClick()", "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "window:resize": "onResize()" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: TooltipDirective, decorators: [{
             type: Directive,
@@ -2810,16 +2877,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { tooltip: [{
                 type: Input
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
             }], onMouseEnter: [{
                 type: HostListener,
                 args: ['mouseenter']
-            }, {
-                type: HostListener,
-                args: ['click']
             }], onMouseLeave: [{
                 type: HostListener,
                 args: ['mouseleave']
-            }, {
+            }], onResize: [{
                 type: HostListener,
                 args: ['window:resize']
             }] } });
@@ -3081,7 +3148,7 @@ class StringChipsArrayDecoratorConfigInternal extends PropertyDecoratorConfigInt
  * The internal AutocompleteStringChipsArrayDecoratorConfig. Sets default values.
  */
 class AutocompleteStringChipsArrayDecoratorConfigInternal extends PropertyDecoratorConfigInternal {
-    // eslint-disable-next-line jsdoc/require-jsdoc
+    // eslint-disable-next-line jsdoc/require-jsdoc, typescript/no-explicit-any
     autocompleteValues;
     // eslint-disable-next-line jsdoc/require-jsdoc
     itemType;
@@ -3101,7 +3168,7 @@ class AutocompleteStringChipsArrayDecoratorConfigInternal extends PropertyDecora
     restrictToOptions;
     constructor(data, globalConfig) {
         super(data);
-        this.autocompleteValues = data.autocompleteValues;
+        this.autocompleteValues = this.autocompleteValuesToFunction(data.autocompleteValues);
         this.deleteIcon = data.deleteIcon ?? 'fas fa-circle-minus';
         this.itemType = data.itemType;
         this.allowDuplicates = data.allowDuplicates ?? false;
@@ -3112,6 +3179,14 @@ class AutocompleteStringChipsArrayDecoratorConfigInternal extends PropertyDecora
         this.restrictToOptions = data.restrictToOptions;
         this.defaultWidths = data.defaultWidths ?? [6, 12, 12];
     }
+    // eslint-disable-next-line typescript/no-explicit-any
+    autocompleteValuesToFunction(autocompleteValues) {
+        if (Array.isArray(autocompleteValues)) {
+            return async () => autocompleteValues;
+        }
+        // eslint-disable-next-line typescript/no-explicit-any
+        return async (e) => await autocompleteValues(e);
+    }
 }
 /**
  * Gets the default dialog data for the error dialog to display when the user tries to add a duplicate value.
@@ -3246,7 +3321,11 @@ class NgxMatEntityBaseInputComponent {
      */
     name;
     ngOnInit() {
-        this.metadata = EntityUtilities.getPropertyMetadata(this.entity, this.key);
+        const foundMetadata = EntityUtilities.getPropertyMetadata(this.entity, this.key);
+        if (!foundMetadata) {
+            throw new Error(`No metadata was found for the key "${String(this.key)}"`);
+        }
+        this.metadata = foundMetadata;
         this.name = this.key.toString() + UUIDUtilities.create();
     }
     /**
@@ -3376,7 +3455,7 @@ class ArrayDateInputComponent extends ArrayTableComponent {
         ReflectUtilities.defineMetadata('metadata', this.metadata, this.entity, this.key);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: ArrayDateInputComponent, deps: [{ token: i1.MatDialog }, { token: i0.EnvironmentInjector }, { token: i2$1.HttpClient }, { token: NGX_INTERNAL_GLOBAL_DEFAULT_VALUES }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: ArrayDateInputComponent, selector: "array-date-input", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<div class=\"mat-elevation-z8 elevation-container\">\n    <div class=\"array-headline\">\n        <b>{{metadata.displayName}}</b>\n    </div>\n    <div *ngIf=\"!isReadOnly\">\n        <mat-form-field appearance=\"outline\">\n            <mat-label>{{metadata.displayName}}</mat-label>\n            <input\n                #model=\"ngModel\"\n                matInput\n                [name]=\"name\"\n                [matDatepicker]=\"picker\"\n                [required]=\"metadata.required(entity)\"\n                [min]=\"metadata.min ? metadata.min(input) : undefined\"\n                [max]=\"metadata.max ? metadata.max(input) : undefined\"\n                [matDatepickerFilter]=\"metadata.filter ?? DateUtilities.defaultDateFilter\"\n                [(ngModel)]=\"input\"\n            >\n            <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n            <mat-datepicker #picker></mat-datepicker>\n            <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n        </mat-form-field>\n        \n        <div class=\"buttons\">\n            <button type=\"button\" mat-raised-button\n                [disabled]=\"model.errors\"\n                (click)=\"add()\">\n                {{metadata.addButtonLabel}}\n            </button>\n            <button type=\"button\" mat-raised-button\n                [disabled]=\"!selection.selected.length\"\n                (click)=\"remove()\">\n                {{metadata.removeButtonLabel}}\n            </button>\n        </div>\n    </div>\n\n    <mat-table [dataSource]=\"dataSource\">\n        <!-- select Column -->\n        <ng-container matColumnDef=\"select\">\n            <mat-header-cell *matHeaderCellDef>\n                <mat-checkbox [disabled]=\"!dataSource.data.length\" [checked]=\"selection.hasValue() && SelectionUtilities.isAllSelected(selection, dataSource)\" [indeterminate]=\"selection.hasValue() && !SelectionUtilities.isAllSelected(selection, dataSource)\" (change)=\"$event ? SelectionUtilities.masterToggle(selection, dataSource) : null\"></mat-checkbox>\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let entity\">\n                <mat-checkbox [checked]=\"selection.isSelected(entity)\" (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(entity) : null\"></mat-checkbox>\n            </mat-cell>\n        </ng-container>\n    \n        <ng-container *ngFor=\"let dCol of metadata.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n            <mat-header-cell *matHeaderCellDef>\n                {{dCol.displayName}}\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let entity\" class=\"entity\">\n                {{getDisplayColumnValue(entity, dCol)}}\n            </mat-cell>\n        </ng-container>\n    \n        <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n        <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n    </mat-table>\n\n    <div *ngIf=\"metadata.required(entity) && !dataSource.data.length\" class=\"array-error\">\n        {{metadata.missingErrorMessage}}\n    </div>\n</div>", styles: [".mdc-data-table__row:last-child .mdc-data-table__cell{border-bottom:1px solid rgba(0,0,0,.12)}mat-form-field{width:100%}.buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px}mat-table{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:25px}.mat-column-select{flex:0 0 75px}.elevation-container{border-radius:5px;padding:15px;margin-bottom:15px;margin-top:15px}.array-headline{padding-bottom:10px}.array-error{display:flex;align-items:center;justify-content:center;margin-top:-25.8px;border:1px solid #E0E0E0;background-color:#f8d3d7;color:#721c24;height:25.8px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i7.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i7.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i7.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i10.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i10.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i10.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i10.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i10.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i10.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i10.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i10.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i10.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: ArrayDateInputComponent, selector: "array-date-input", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<div class=\"mat-elevation-z8 elevation-container\">\n    <div class=\"array-headline\">\n        <b>{{metadata.displayName}}</b>\n    </div>\n    <div *ngIf=\"!isReadOnly\">\n        <mat-form-field appearance=\"outline\">\n            <mat-label>{{metadata.displayName}}</mat-label>\n            <input\n                #model=\"ngModel\"\n                matInput\n                [name]=\"name\"\n                [matDatepicker]=\"picker\"\n                [required]=\"metadata.required(entity)\"\n                [min]=\"metadata.min ? metadata.min(input) : undefined\"\n                [max]=\"metadata.max ? metadata.max(input) : undefined\"\n                [matDatepickerFilter]=\"metadata.filter ?? DateUtilities.defaultDateFilter\"\n                [(ngModel)]=\"input\"\n            >\n            <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n            <mat-datepicker #picker></mat-datepicker>\n            <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n        </mat-form-field>\n        \n        <div class=\"buttons\">\n            <button type=\"button\" mat-raised-button\n                [disabled]=\"model.errors\"\n                (click)=\"add()\">\n                {{metadata.addButtonLabel}}\n            </button>\n            <button type=\"button\" mat-raised-button\n                [disabled]=\"!selection.selected.length\"\n                (click)=\"remove()\">\n                {{metadata.removeButtonLabel}}\n            </button>\n        </div>\n    </div>\n\n    <mat-table [dataSource]=\"dataSource\">\n        <!-- select Column -->\n        <ng-container matColumnDef=\"select\">\n            <mat-header-cell *matHeaderCellDef>\n                <mat-checkbox [disabled]=\"!dataSource.data.length\" [checked]=\"selection.hasValue() && SelectionUtilities.isAllSelected(selection, dataSource)\" [indeterminate]=\"selection.hasValue() && !SelectionUtilities.isAllSelected(selection, dataSource)\" (change)=\"$event ? SelectionUtilities.masterToggle(selection, dataSource) : null\"></mat-checkbox>\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let entity\">\n                <mat-checkbox [checked]=\"selection.isSelected(entity)\" (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(entity) : null\"></mat-checkbox>\n            </mat-cell>\n        </ng-container>\n    \n        <ng-container *ngFor=\"let dCol of metadata.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n            <mat-header-cell *matHeaderCellDef>\n                {{dCol.displayName}}\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let entity\" class=\"entity\">\n                {{getDisplayColumnValue(entity, dCol)}}\n            </mat-cell>\n        </ng-container>\n    \n        <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n        <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n    </mat-table>\n\n    <div *ngIf=\"metadata.required(entity) && !dataSource.data.length\" class=\"array-error\">\n        {{metadata.missingErrorMessage}}\n    </div>\n</div>", styles: [".mdc-data-table__row:last-child .mdc-data-table__cell{border-bottom:1px solid rgba(0,0,0,.12)}mat-form-field{width:100%}.buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px}mat-table{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:25px}.mat-column-select{flex:0 0 75px}.elevation-container{border-radius:5px;padding:15px;margin-bottom:15px;margin-top:15px}.array-headline{padding-bottom:10px}.array-error{display:flex;align-items:center;justify-content:center;margin-top:-25.8px;border:1px solid #E0E0E0;background-color:#f8d3d7;color:#721c24;height:25.8px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i7.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i7.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i7.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: ArrayDateInputComponent, decorators: [{
             type: Component,
@@ -3425,7 +3504,7 @@ class ArrayDateRangeInputComponent extends ArrayTableComponent {
         this.dateRangeEnd = undefined;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: ArrayDateRangeInputComponent, deps: [{ token: i1.MatDialog }, { token: i0.EnvironmentInjector }, { token: i2$1.HttpClient }, { token: NGX_INTERNAL_GLOBAL_DEFAULT_VALUES }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: ArrayDateRangeInputComponent, selector: "array-date-range-input", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<div class=\"mat-elevation-z8 elevation-container\">\n    <div class=\"array-headline\">\n        <b>{{metadata.displayName}}</b>\n    </div>\n    <div *ngIf=\"!isReadOnly\">\n        <mat-form-field>\n            <mat-label>{{metadata.displayName}}</mat-label>\n            \n            <mat-date-range-input [rangePicker]=\"picker\" [required]=\"metadata.required(entity)\" [dateFilter]=\"metadata.filter ? metadata.filter : DateUtilities.defaultDateFilter\">\n                <input #startModel=\"ngModel\"\n                    matStartDate\n                    [name]=\"name + 'start'\"\n                    [required]=\"metadata.required(entity)\"\n                    [min]=\"metadata.minStart ? metadata.minStart(input?.start) : undefined\"\n                    [max]=\"metadata.maxStart ? metadata.maxStart(input?.start) : undefined\"\n                    [placeholder]=\"metadata.placeholderStart\"\n                    [(ngModel)]=\"dateRangeStart\"\n                >\n                <input #endModel=\"ngModel\"\n                    matEndDate\n                    [name]=\"name + 'end'\"\n                    [required]=\"metadata.required(entity)\"\n                    [min]=\"metadata.minEnd ? metadata.minEnd(input?.end) : undefined\"\n                    [max]=\"metadata.maxEnd ? metadata.maxEnd(input?.end) : undefined\"\n                    [placeholder]=\"metadata.placeholderEnd\"\n                    [(ngModel)]=\"dateRangeEnd\"\n                >\n            </mat-date-range-input>\n            <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n            <mat-date-range-picker #picker></mat-date-range-picker>\n    \n            <mat-error *ngIf=\"startModel.errors\">{{getValidationErrorMessage(startModel)}}</mat-error>\n            <mat-error *ngIf=\"!startModel.errors && endModel.errors\">{{getValidationErrorMessage(endModel)}}</mat-error>\n        </mat-form-field>\n        \n        <div class=\"buttons\">\n            <button type=\"button\" mat-raised-button\n                [disabled]=\"startModel.errors || endModel.errors\"\n                (click)=\"addDateRange()\">\n                {{metadata.addButtonLabel}}\n            </button>\n            <button type=\"button\" mat-raised-button\n                [disabled]=\"!selection.selected.length\"\n                (click)=\"remove()\">\n                {{metadata.removeButtonLabel}}\n            </button>\n        </div>\n    </div>\n\n    <mat-table [dataSource]=\"dataSource\">\n        <!-- select Column -->\n        <ng-container matColumnDef=\"select\">\n            <mat-header-cell *matHeaderCellDef>\n                <mat-checkbox [disabled]=\"!dataSource.data.length\" [checked]=\"selection.hasValue() && SelectionUtilities.isAllSelected(selection, dataSource)\" [indeterminate]=\"selection.hasValue() && !SelectionUtilities.isAllSelected(selection, dataSource)\" (change)=\"$event ? SelectionUtilities.masterToggle(selection, dataSource) : null\"></mat-checkbox>\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let entity\">\n                <mat-checkbox [checked]=\"selection.isSelected(entity)\" (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(entity) : null\"></mat-checkbox>\n            </mat-cell>\n        </ng-container>\n    \n        <ng-container *ngFor=\"let dCol of metadata.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n            <mat-header-cell *matHeaderCellDef>\n                {{dCol.displayName}}\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let entity\" class=\"entity\">\n                {{getDisplayColumnValue(entity, dCol)}}\n            </mat-cell>\n        </ng-container>\n    \n        <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n        <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n    </mat-table>\n\n    <div *ngIf=\"metadata.required(entity) && !dataSource.data.length\" class=\"array-error\">\n        {{metadata.missingErrorMessage}}\n    </div>\n</div>", styles: [".mdc-data-table__row:last-child .mdc-data-table__cell{border-bottom:1px solid rgba(0,0,0,.12)}mat-form-field{width:100%}.buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px}.elevation-container{border-radius:5px;padding:15px;margin-bottom:15px;margin-top:15px}.array-headline{padding-bottom:10px}mat-table{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:25px}.mat-column-select{flex:0 0 75px}.array-error{display:flex;align-items:center;justify-content:center;margin-top:-25.8px;border:1px solid #E0E0E0;background-color:#f8d3d7;color:#721c24;height:25.8px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i7.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i7.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i7.MatStartDate, selector: "input[matStartDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i7.MatEndDate, selector: "input[matEndDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i7.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i10.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i10.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i10.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i10.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i10.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i10.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i10.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i10.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i10.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i10.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: ArrayDateRangeInputComponent, selector: "array-date-range-input", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<div class=\"mat-elevation-z8 elevation-container\">\n    <div class=\"array-headline\">\n        <b>{{metadata.displayName}}</b>\n    </div>\n    <div *ngIf=\"!isReadOnly\">\n        <mat-form-field>\n            <mat-label>{{metadata.displayName}}</mat-label>\n            \n            <mat-date-range-input [rangePicker]=\"picker\" [required]=\"metadata.required(entity)\" [dateFilter]=\"metadata.filter ? metadata.filter : DateUtilities.defaultDateFilter\">\n                <input #startModel=\"ngModel\"\n                    matStartDate\n                    [name]=\"name + 'start'\"\n                    [required]=\"metadata.required(entity)\"\n                    [min]=\"metadata.minStart ? metadata.minStart(input?.start) : undefined\"\n                    [max]=\"metadata.maxStart ? metadata.maxStart(input?.start) : undefined\"\n                    [placeholder]=\"metadata.placeholderStart\"\n                    [(ngModel)]=\"dateRangeStart\"\n                >\n                <input #endModel=\"ngModel\"\n                    matEndDate\n                    [name]=\"name + 'end'\"\n                    [required]=\"metadata.required(entity)\"\n                    [min]=\"metadata.minEnd ? metadata.minEnd(input?.end) : undefined\"\n                    [max]=\"metadata.maxEnd ? metadata.maxEnd(input?.end) : undefined\"\n                    [placeholder]=\"metadata.placeholderEnd\"\n                    [(ngModel)]=\"dateRangeEnd\"\n                >\n            </mat-date-range-input>\n            <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n            <mat-date-range-picker #picker></mat-date-range-picker>\n    \n            <mat-error *ngIf=\"startModel.errors\">{{getValidationErrorMessage(startModel)}}</mat-error>\n            <mat-error *ngIf=\"!startModel.errors && endModel.errors\">{{getValidationErrorMessage(endModel)}}</mat-error>\n        </mat-form-field>\n        \n        <div class=\"buttons\">\n            <button type=\"button\" mat-raised-button\n                [disabled]=\"startModel.errors || endModel.errors\"\n                (click)=\"addDateRange()\">\n                {{metadata.addButtonLabel}}\n            </button>\n            <button type=\"button\" mat-raised-button\n                [disabled]=\"!selection.selected.length\"\n                (click)=\"remove()\">\n                {{metadata.removeButtonLabel}}\n            </button>\n        </div>\n    </div>\n\n    <mat-table [dataSource]=\"dataSource\">\n        <!-- select Column -->\n        <ng-container matColumnDef=\"select\">\n            <mat-header-cell *matHeaderCellDef>\n                <mat-checkbox [disabled]=\"!dataSource.data.length\" [checked]=\"selection.hasValue() && SelectionUtilities.isAllSelected(selection, dataSource)\" [indeterminate]=\"selection.hasValue() && !SelectionUtilities.isAllSelected(selection, dataSource)\" (change)=\"$event ? SelectionUtilities.masterToggle(selection, dataSource) : null\"></mat-checkbox>\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let entity\">\n                <mat-checkbox [checked]=\"selection.isSelected(entity)\" (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(entity) : null\"></mat-checkbox>\n            </mat-cell>\n        </ng-container>\n    \n        <ng-container *ngFor=\"let dCol of metadata.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n            <mat-header-cell *matHeaderCellDef>\n                {{dCol.displayName}}\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let entity\" class=\"entity\">\n                {{getDisplayColumnValue(entity, dCol)}}\n            </mat-cell>\n        </ng-container>\n    \n        <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n        <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n    </mat-table>\n\n    <div *ngIf=\"metadata.required(entity) && !dataSource.data.length\" class=\"array-error\">\n        {{metadata.missingErrorMessage}}\n    </div>\n</div>", styles: [".mdc-data-table__row:last-child .mdc-data-table__cell{border-bottom:1px solid rgba(0,0,0,.12)}mat-form-field{width:100%}.buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px}.elevation-container{border-radius:5px;padding:15px;margin-bottom:15px;margin-top:15px}.array-headline{padding-bottom:10px}mat-table{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:25px}.mat-column-select{flex:0 0 75px}.array-error{display:flex;align-items:center;justify-content:center;margin-top:-25.8px;border:1px solid #E0E0E0;background-color:#f8d3d7;color:#721c24;height:25.8px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i7.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i7.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i7.MatStartDate, selector: "input[matStartDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i7.MatEndDate, selector: "input[matEndDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i7.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: ArrayDateRangeInputComponent, decorators: [{
             type: Component,
@@ -3471,7 +3550,7 @@ class ArrayDateTimeInputComponent extends ArrayTableComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: ArrayDateTimeInputComponent, deps: [{ token: i1.MatDialog }, { token: i0.EnvironmentInjector }, { token: i2$1.HttpClient }, { token: NGX_INTERNAL_GLOBAL_DEFAULT_VALUES }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: ArrayDateTimeInputComponent, selector: "array-date-time-input", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<div class=\"mat-elevation-z8 elevation-container\">\n    <div class=\"array-headline\">\n        <b>{{metadata.displayName}}</b>\n    </div>\n    <div *ngIf=\"!isReadOnly\">\n        <div class=\"date-time\">\n            <mat-form-field>\n                <mat-label>{{metadata.displayName}}</mat-label>\n                <input\n                    #model=\"ngModel\"\n                    matInput\n                    [name]=\"name\"\n                    [matDatepicker]=\"picker\"\n                    [required]=\"metadata.required(entity)\"\n                    [min]=\"metadata.minDate ? metadata.minDate(input) : undefined\"\n                    [max]=\"metadata.maxDate ? metadata.maxDate(input) : undefined\"\n                    [matDatepickerFilter]=\"metadata.filterDate ?? DateUtilities.defaultDateFilter\"\n                    [(ngModel)]=\"input\"\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                    #timeModel=\"ngModel\"\n                    [name]=\"name + 'time'\"\n                    [required]=\"metadata.required(entity)\"\n                    [(ngModel)]=\"time\"\n                >\n                    <mat-option *ngFor=\"let validTime of DateUtilities.getValidTimesForDropdown(\n                            metadata.times,\n                            input,\n                            metadata.minTime,\n                            metadata.maxTime,\n                            metadata.filterTime\n                        )\"\n                        [value]=\"validTime.value\"\n                    >\n                        {{validTime.displayName}}\n                    </mat-option>\n                </mat-select>\n                <mat-error>{{getValidationErrorMessage(timeModel)}}</mat-error>\n            </mat-form-field>\n        </div>\n        <div class=\"buttons\">\n            <button type=\"button\" mat-raised-button\n                [disabled]=\"model.errors || timeModel.errors || DateUtilities.timeIsUnprocessable(time)\"\n                (click)=\"addDateTime()\">\n                {{metadata.addButtonLabel}}\n            </button>\n            <button type=\"button\" mat-raised-button\n                [disabled]=\"!selection.selected.length\"\n                (click)=\"remove()\">\n                {{metadata.removeButtonLabel}}\n            </button>\n        </div>\n    </div>\n\n    <mat-table [dataSource]=\"dataSource\">\n        <!-- select Column -->\n        <ng-container matColumnDef=\"select\">\n            <mat-header-cell *matHeaderCellDef>\n                <mat-checkbox [disabled]=\"!dataSource.data.length\" [checked]=\"selection.hasValue() && SelectionUtilities.isAllSelected(selection, dataSource)\" [indeterminate]=\"selection.hasValue() && !SelectionUtilities.isAllSelected(selection, dataSource)\" (change)=\"$event ? SelectionUtilities.masterToggle(selection, dataSource) : null\"></mat-checkbox>\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let entity\">\n                <mat-checkbox [checked]=\"selection.isSelected(entity)\" (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(entity) : null\"></mat-checkbox>\n            </mat-cell>\n        </ng-container>\n    \n        <ng-container *ngFor=\"let dCol of metadata.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n            <mat-header-cell *matHeaderCellDef>\n                {{dCol.displayName}}\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let entity\" class=\"entity\">\n                {{getDisplayColumnValue(entity, dCol)}}\n            </mat-cell>\n        </ng-container>\n    \n        <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n        <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n    </mat-table>\n\n    <div *ngIf=\"metadata.required(entity) && !dataSource.data.length\" class=\"array-error\">\n        {{metadata.missingErrorMessage}}\n    </div>\n</div>", styles: [".mdc-data-table__row:last-child .mdc-data-table__cell{border-bottom:1px solid rgba(0,0,0,.12)}mat-form-field{width:100%}.buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px}.elevation-container{border-radius:5px;padding:15px;margin-bottom:15px;margin-top:15px}.array-headline{padding-bottom:10px}mat-table{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:25px}.mat-column-select{flex:0 0 75px}.array-error{display:flex;align-items:center;justify-content:center;margin-top:-25.8px;border:1px solid #E0E0E0;background-color:#f8d3d7;color:#721c24;height:25.8px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.date-time{display:flex;align-items:baseline}.date-time .timepicker{margin-left:10px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { 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.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i7.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i7.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i7.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i10.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i10.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i10.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i10.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i10.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i10.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i10.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i10.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i10.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i10.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: ArrayDateTimeInputComponent, selector: "array-date-time-input", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<div class=\"mat-elevation-z8 elevation-container\">\n    <div class=\"array-headline\">\n        <b>{{metadata.displayName}}</b>\n    </div>\n    <div *ngIf=\"!isReadOnly\">\n        <div class=\"date-time\">\n            <mat-form-field>\n                <mat-label>{{metadata.displayName}}</mat-label>\n                <input\n                    #model=\"ngModel\"\n                    matInput\n                    [name]=\"name\"\n                    [matDatepicker]=\"picker\"\n                    [required]=\"metadata.required(entity)\"\n                    [min]=\"metadata.minDate ? metadata.minDate(input) : undefined\"\n                    [max]=\"metadata.maxDate ? metadata.maxDate(input) : undefined\"\n                    [matDatepickerFilter]=\"metadata.filterDate ?? DateUtilities.defaultDateFilter\"\n                    [(ngModel)]=\"input\"\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                    #timeModel=\"ngModel\"\n                    [name]=\"name + 'time'\"\n                    [required]=\"metadata.required(entity)\"\n                    [(ngModel)]=\"time\"\n                >\n                    <mat-option *ngFor=\"let validTime of DateUtilities.getValidTimesForDropdown(\n                            metadata.times,\n                            input,\n                            metadata.minTime,\n                            metadata.maxTime,\n                            metadata.filterTime\n                        )\"\n                        [value]=\"validTime.value\"\n                    >\n                        {{validTime.displayName}}\n                    </mat-option>\n                </mat-select>\n                <mat-error>{{getValidationErrorMessage(timeModel)}}</mat-error>\n            </mat-form-field>\n        </div>\n        <div class=\"buttons\">\n            <button type=\"button\" mat-raised-button\n                [disabled]=\"model.errors || timeModel.errors || DateUtilities.timeIsUnprocessable(time)\"\n                (click)=\"addDateTime()\">\n                {{metadata.addButtonLabel}}\n            </button>\n            <button type=\"button\" mat-raised-button\n                [disabled]=\"!selection.selected.length\"\n                (click)=\"remove()\">\n                {{metadata.removeButtonLabel}}\n            </button>\n        </div>\n    </div>\n\n    <mat-table [dataSource]=\"dataSource\">\n        <!-- select Column -->\n        <ng-container matColumnDef=\"select\">\n            <mat-header-cell *matHeaderCellDef>\n                <mat-checkbox [disabled]=\"!dataSource.data.length\" [checked]=\"selection.hasValue() && SelectionUtilities.isAllSelected(selection, dataSource)\" [indeterminate]=\"selection.hasValue() && !SelectionUtilities.isAllSelected(selection, dataSource)\" (change)=\"$event ? SelectionUtilities.masterToggle(selection, dataSource) : null\"></mat-checkbox>\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let entity\">\n                <mat-checkbox [checked]=\"selection.isSelected(entity)\" (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(entity) : null\"></mat-checkbox>\n            </mat-cell>\n        </ng-container>\n    \n        <ng-container *ngFor=\"let dCol of metadata.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n            <mat-header-cell *matHeaderCellDef>\n                {{dCol.displayName}}\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let entity\" class=\"entity\">\n                {{getDisplayColumnValue(entity, dCol)}}\n            </mat-cell>\n        </ng-container>\n    \n        <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n        <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n    </mat-table>\n\n    <div *ngIf=\"metadata.required(entity) && !dataSource.data.length\" class=\"array-error\">\n        {{metadata.missingErrorMessage}}\n    </div>\n</div>", styles: [".mdc-data-table__row:last-child .mdc-data-table__cell{border-bottom:1px solid rgba(0,0,0,.12)}mat-form-field{width:100%}.buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px}.elevation-container{border-radius:5px;padding:15px;margin-bottom:15px;margin-top:15px}.array-headline{padding-bottom:10px}mat-table{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:25px}.mat-column-select{flex:0 0 75px}.array-error{display:flex;align-items:center;justify-content:center;margin-top:-25.8px;border:1px solid #E0E0E0;background-color:#f8d3d7;color:#721c24;height:25.8px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.date-time{display:flex;align-items:baseline}.date-time .timepicker{margin-left:10px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { 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.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i7.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i7.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i7.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: ArrayDateTimeInputComponent, decorators: [{
             type: Component,
@@ -3495,10 +3574,15 @@ class ArrayStringChipsInputComponent extends NgxMatEntityBaseInputComponent {
      * it contains values, we can set it to undefined when the last element is removed
      * (removeStringChipArrayValue). That way we can use the "required" validator.
      * @param event - The event that fires when a new chip is completed.
+     * @param invalid - Whether or not the input is invalid.
      */
-    addStringChipArrayValue(event) {
-        const value = (event.value || '').trim();
-        this.validateAndSetPropertyValue(value);
+    addStringChipArrayValue(event, invalid) {
+        if (invalid || !event.value) {
+            return;
+        }
+        const value = event.value.trim();
+        this.propertyValue = this.propertyValue ?? [];
+        this.propertyValue.push(value);
         event.chipInput?.clear();
         this.chipsInput = '';
         this.emitChange();
@@ -3517,53 +3601,56 @@ class ArrayStringChipsInputComponent extends NgxMatEntityBaseInputComponent {
         this.propertyValue = this.propertyValue?.length ? this.propertyValue : undefined;
         this.emitChange();
     }
-    validateAndSetPropertyValue(value) {
-        if (value) {
-            if (this.metadata.minLength && value.length < this.metadata.minLength) {
-                return;
-            }
-            if (this.metadata.maxLength && value.length > this.metadata.maxLength) {
-                return;
-            }
-            if (this.metadata.regex && !value.match(this.metadata.regex)) {
-                return;
-            }
-            this.propertyValue = this.propertyValue ?? [];
-            this.propertyValue.push(value);
+    setValidationErrors(model, chipsModel) {
+        if (chipsModel.errors) {
+            model.control.setErrors(chipsModel.errors);
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: ArrayStringChipsInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: ArrayStringChipsInputComponent, selector: "array-string-chips-input", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-chip-grid #chipGrid\n        #model=\"ngModel\" [name]=\"name\" [required]=\"metadata.required(entity)\"\n        [disabled]=\"isReadOnly\"\n        [(ngModel)]=\"propertyValue\"\n    >\n        <mat-chip-row *ngFor=\"let value of propertyValue\" (removed)=\"removeStringChipArrayValue(value)\">\n            {{value}}\n            <button type=\"button\" matChipRemove>\n                <i [class]=\"metadata.deleteIcon\"></i>\n            </button>\n        </mat-chip-row>\n        <input #chipsModel=\"ngModel\"\n            matInput\n            [matChipInputFor]=\"chipGrid\"\n            [matChipInputAddOnBlur]=\"true\"\n            [name]=\"uuid2\" [minlength]=\"metadata.minLength ?? null\" [maxlength]=\"metadata.maxLength ?? null\"\n            [pattern]=\"metadata.regex ?? '[\\\\s\\\\S]*'\"\n            [(ngModel)]=\"chipsInput\"\n            (matChipInputTokenEnd)=\"addStringChipArrayValue($event)\"\n        />\n        <mat-error *ngIf=\"chipsModel.errors\">{{getValidationErrorMessage(chipsModel)}}</mat-error>\n    </mat-chip-grid>\n    <mat-error *ngIf=\"!chipsModel.errors\">{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6$1.MatChipGrid, selector: "mat-chip-grid", inputs: ["tabIndex", "disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i6$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i6$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i6$1.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "editable"], outputs: ["edited"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: ArrayStringChipsInputComponent, selector: "array-string-chips-input", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-chip-grid #chipGrid\n        #model=\"ngModel\" [name]=\"name\" [required]=\"metadata.required(entity)\"\n        [disabled]=\"isReadOnly\"\n        [(ngModel)]=\"propertyValue\"\n        (ngModelChange)=\"setValidationErrors(model, chipsModel)\"\n    >\n        <mat-chip-row *ngFor=\"let value of propertyValue\" (removed)=\"removeStringChipArrayValue(value)\">\n            {{value}}\n            <button type=\"button\" matChipRemove>\n                <i [class]=\"metadata.deleteIcon\"></i>\n            </button>\n        </mat-chip-row>\n        <input #chipsModel=\"ngModel\"\n            matInput\n            [matChipInputFor]=\"chipGrid\"\n            [matChipInputAddOnBlur]=\"true\"\n            [name]=\"uuid2\"\n            [minlength]=\"metadata.minLength ?? null\"\n            [maxlength]=\"metadata.maxLength ?? null\"\n            [pattern]=\"metadata.regex ?? '[\\\\s\\\\S]*'\"\n            [(ngModel)]=\"chipsInput\"\n            (matChipInputTokenEnd)=\"addStringChipArrayValue($event, !!chipsModel.errors)\"\n        />\n    </mat-chip-grid>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6$2.MatChipGrid, selector: "mat-chip-grid", inputs: ["tabIndex", "disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i6$2.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i6$2.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i6$2.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "editable"], outputs: ["edited"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: ArrayStringChipsInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'array-string-chips-input', template: "<!-- eslint-disable angular/no-call-expression -->\n<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-chip-grid #chipGrid\n        #model=\"ngModel\" [name]=\"name\" [required]=\"metadata.required(entity)\"\n        [disabled]=\"isReadOnly\"\n        [(ngModel)]=\"propertyValue\"\n    >\n        <mat-chip-row *ngFor=\"let value of propertyValue\" (removed)=\"removeStringChipArrayValue(value)\">\n            {{value}}\n            <button type=\"button\" matChipRemove>\n                <i [class]=\"metadata.deleteIcon\"></i>\n            </button>\n        </mat-chip-row>\n        <input #chipsModel=\"ngModel\"\n            matInput\n            [matChipInputFor]=\"chipGrid\"\n            [matChipInputAddOnBlur]=\"true\"\n            [name]=\"uuid2\" [minlength]=\"metadata.minLength ?? null\" [maxlength]=\"metadata.maxLength ?? null\"\n            [pattern]=\"metadata.regex ?? '[\\\\s\\\\S]*'\"\n            [(ngModel)]=\"chipsInput\"\n            (matChipInputTokenEnd)=\"addStringChipArrayValue($event)\"\n        />\n        <mat-error *ngIf=\"chipsModel.errors\">{{getValidationErrorMessage(chipsModel)}}</mat-error>\n    </mat-chip-grid>\n    <mat-error *ngIf=\"!chipsModel.errors\">{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"] }]
+            args: [{ selector: 'array-string-chips-input', template: "<!-- eslint-disable angular/no-call-expression -->\n<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-chip-grid #chipGrid\n        #model=\"ngModel\" [name]=\"name\" [required]=\"metadata.required(entity)\"\n        [disabled]=\"isReadOnly\"\n        [(ngModel)]=\"propertyValue\"\n        (ngModelChange)=\"setValidationErrors(model, chipsModel)\"\n    >\n        <mat-chip-row *ngFor=\"let value of propertyValue\" (removed)=\"removeStringChipArrayValue(value)\">\n            {{value}}\n            <button type=\"button\" matChipRemove>\n                <i [class]=\"metadata.deleteIcon\"></i>\n            </button>\n        </mat-chip-row>\n        <input #chipsModel=\"ngModel\"\n            matInput\n            [matChipInputFor]=\"chipGrid\"\n            [matChipInputAddOnBlur]=\"true\"\n            [name]=\"uuid2\"\n            [minlength]=\"metadata.minLength ?? null\"\n            [maxlength]=\"metadata.maxLength ?? null\"\n            [pattern]=\"metadata.regex ?? '[\\\\s\\\\S]*'\"\n            [(ngModel)]=\"chipsInput\"\n            (matChipInputTokenEnd)=\"addStringChipArrayValue($event, !!chipsModel.errors)\"\n        />\n    </mat-chip-grid>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"] }]
         }] });
 
 /* eslint-disable jsdoc/require-jsdoc */
 // eslint-disable-next-line angular/prefer-standalone-component
 class ArrayStringAutocompleteChipsComponent extends ArrayStringChipsInputComponent {
+    injector;
     filteredAutocompleteStrings;
-    get autocompleteStrings() {
-        return this.metadata.autocompleteValues;
-    }
+    autocompleteStrings = [];
     get autocompleteMetadata() {
         return this.metadata;
     }
-    ngOnInit() {
+    constructor(injector) {
+        super();
+        this.injector = injector;
+    }
+    async ngOnInit() {
         super.ngOnInit();
-        this.filteredAutocompleteStrings = LodashUtilities.cloneDeep(this.autocompleteStrings);
+        await runInInjectionContext(this.injector, async () => {
+            this.autocompleteStrings = await this.autocompleteMetadata.autocompleteValues(this.entity);
+            this.filteredAutocompleteStrings = LodashUtilities.cloneDeep(this.autocompleteStrings);
+        });
     }
     /**
      * Handles adding a string to the array when an autocomplete value has been selected.
      * @param event - The autocomplete selected event.
      * @param chipsInput - The element where the user typed the value.
+     * @param model - The model of the string array.
+     * @param chipsModel - The model of the single string input.
      */
-    selected(event, chipsInput) {
-        const value = (event.option.viewValue || '').trim();
-        this.validateAndSetPropertyValue(value);
+    selected(event, chipsInput, model, chipsModel) {
+        // validation is not needed as selected options are all valid.
+        this.propertyValue = this.propertyValue ?? [];
+        this.propertyValue.push(event.option.value);
         chipsInput.value = '';
-        this.filterAutocompleteStrings(chipsInput.value);
+        this.chipsInput = '';
+        this.filterAutocompleteStrings(this.chipsInput);
+        chipsModel.control.updateValueAndValidity();
+        model.control.updateValueAndValidity();
+        this.setValidationErrors(model, chipsModel);
         this.emitChange();
     }
     /**
@@ -3574,13 +3661,13 @@ class ArrayStringAutocompleteChipsComponent extends ArrayStringChipsInputCompone
         const filterValue = input.toLowerCase();
         this.filteredAutocompleteStrings = this.autocompleteStrings.filter(s => s.toLowerCase().includes(filterValue));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: ArrayStringAutocompleteChipsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: ArrayStringAutocompleteChipsComponent, selector: "array-string-autocomplete-chips", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<!-- <mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-chip-grid #chipList\n        (ngModelChange)=\"emitChange()\"\n        [(ngModel)]=\"propertyValue\" [name]=\"key.toString()\" #model=\"ngModel\"\n        [required]=\"metadata.required(entity)\"\n        [disabled]=\"isReadOnly\"\n    >\n        <mat-chip *ngFor=\"let value of propertyValue\" (removed)=\"removeStringChipArrayValue(value)\">\n            {{value}}\n            <button type=\"button\" matChipRemove>\n                <i class=\"{{metadata.deleteIcon}}\"></i>\n            </button>\n        </mat-chip>\n        <input matInput\n            [matChipInputFor]=\"chipList\"\n            [matAutocomplete]=\"auto\"\n            [matChipInputAddOnBlur]=\"true\"\n            (matChipInputTokenEnd)=\"addStringChipArrayValue($event)\"\n            (keyup)=\"filterAutocompleteStrings(chipsInput)\"\n            [(ngModel)]=\"chipsInput\" [name]=\"key.toString()\" #chipsModel=\"ngModel\"\n            #chipsElement\n            [minlength]='metadata.minLength ?? null'\n            [maxlength]='metadata.maxLength ?? null'\n            [pattern]=\"metadata.regex ?? '[\\\\s\\\\S]*'\"\n        >\n        <mat-error *ngIf=\"chipsModel.errors\">{{getValidationErrorMessage(chipsModel)}}</mat-error>\n    </mat-chip-grid>\n    <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event, chipsElement)\">\n        <mat-option *ngFor=\"let value of metadata.autocompleteValues\" [value]=\"value\">\n          {{value}}\n        </mat-option>\n    </mat-autocomplete>\n    <mat-error *ngIf=\"!chipsModel.errors\">{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field> -->\n\n<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-chip-grid #chipGrid\n        #model=\"ngModel\" [name]=\"name\"\n        [required]=\"metadata.required(entity)\"\n        [disabled]=\"isReadOnly\"\n        [(ngModel)]=\"propertyValue\"\n    >\n        <mat-chip-row *ngFor=\"let value of propertyValue\" (removed)=\"removeStringChipArrayValue(value)\">\n            {{value}}\n            <button type=\"button\" matChipRemove>\n                <i [class]=\"metadata.deleteIcon\"></i>\n            </button>\n        </mat-chip-row>\n        <input #chipsModel=\"ngModel\"\n            #chipsElement\n            matInput\n            [matChipInputFor]=\"chipGrid\"\n            [matAutocomplete]=\"auto\"\n            [matChipInputAddOnBlur]=\"true\"\n            [name]=\"uuid2\"\n            [minlength]=\"metadata.minLength ?? null\"\n            [maxlength]=\"metadata.maxLength ?? null\"\n            [pattern]=\"metadata.regex ?? '[\\\\s\\\\S]*'\"\n            [includedIn]=\"autocompleteMetadata.restrictToOptions ? autocompleteStrings : undefined\"\n            [(ngModel)]=\"chipsInput\"\n            (keyup)=\"filterAutocompleteStrings(propertyValue)\"\n            (matChipInputTokenEnd)=\"addStringChipArrayValue($event)\"\n        />\n        <mat-error *ngIf=\"chipsModel.errors\">{{getValidationErrorMessage(chipsModel)}}</mat-error>\n    </mat-chip-grid>\n    <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event, chipsElement)\">\n        <mat-option *ngFor=\"let value of filteredAutocompleteStrings\" [value]=\"value\">\n          {{value}}\n        </mat-option>\n    </mat-autocomplete>\n    <mat-error *ngIf=\"!chipsModel.errors\">{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IncludedInValidatorDirective, selector: "[includedIn]", inputs: ["includedIn"] }, { kind: "component", type: i4$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i4$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i6$1.MatChipGrid, selector: "mat-chip-grid", inputs: ["tabIndex", "disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i6$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i6$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i6$1.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "editable"], outputs: ["edited"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: ArrayStringAutocompleteChipsComponent, deps: [{ token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: ArrayStringAutocompleteChipsComponent, selector: "array-string-autocomplete-chips", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n\n<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-chip-grid #chipGrid\n        #model=\"ngModel\" [name]=\"name\"\n        [required]=\"metadata.required(entity)\"\n        [disabled]=\"isReadOnly\"\n        [(ngModel)]=\"propertyValue\"\n        (ngModelChange)=\"setValidationErrors(model, chipsModel)\"\n    >\n        <mat-chip-row *ngFor=\"let value of propertyValue\" (removed)=\"removeStringChipArrayValue(value)\">\n            {{value}}\n            <button type=\"button\" matChipRemove>\n                <i [class]=\"metadata.deleteIcon\"></i>\n            </button>\n        </mat-chip-row>\n        <input #chipsModel=\"ngModel\"\n            #chipsElement\n            matInput\n            [matChipInputFor]=\"chipGrid\"\n            [matAutocomplete]=\"auto\"\n            [matChipInputAddOnBlur]=\"true\"\n            [name]=\"uuid2\"\n            [minlength]=\"metadata.minLength ?? null\"\n            [maxlength]=\"metadata.maxLength ?? null\"\n            [pattern]=\"metadata.regex ?? '[\\\\s\\\\S]*'\"\n            [includedIn]=\"autocompleteMetadata.restrictToOptions ? autocompleteStrings : undefined\"\n            [(ngModel)]=\"chipsInput\"\n            (keyup)=\"filterAutocompleteStrings(chipsInput)\"\n            (matChipInputTokenEnd)=\"addStringChipArrayValue($event, !!chipsModel.errors)\"\n        />\n    </mat-chip-grid>\n    <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event, chipsElement, model, chipsModel)\">\n        <mat-option *ngFor=\"let value of filteredAutocompleteStrings\" [value]=\"value\">\n          {{value}}\n        </mat-option>\n    </mat-autocomplete>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IncludedInValidatorDirective, selector: "[includedIn]", inputs: ["includedIn"] }, { kind: "component", type: i4$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i4$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i6$2.MatChipGrid, selector: "mat-chip-grid", inputs: ["tabIndex", "disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i6$2.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i6$2.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i6$2.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "editable"], outputs: ["edited"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: ArrayStringAutocompleteChipsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'array-string-autocomplete-chips', template: "<!-- eslint-disable angular/no-call-expression -->\n<!-- <mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-chip-grid #chipList\n        (ngModelChange)=\"emitChange()\"\n        [(ngModel)]=\"propertyValue\" [name]=\"key.toString()\" #model=\"ngModel\"\n        [required]=\"metadata.required(entity)\"\n        [disabled]=\"isReadOnly\"\n    >\n        <mat-chip *ngFor=\"let value of propertyValue\" (removed)=\"removeStringChipArrayValue(value)\">\n            {{value}}\n            <button type=\"button\" matChipRemove>\n                <i class=\"{{metadata.deleteIcon}}\"></i>\n            </button>\n        </mat-chip>\n        <input matInput\n            [matChipInputFor]=\"chipList\"\n            [matAutocomplete]=\"auto\"\n            [matChipInputAddOnBlur]=\"true\"\n            (matChipInputTokenEnd)=\"addStringChipArrayValue($event)\"\n            (keyup)=\"filterAutocompleteStrings(chipsInput)\"\n            [(ngModel)]=\"chipsInput\" [name]=\"key.toString()\" #chipsModel=\"ngModel\"\n            #chipsElement\n            [minlength]='metadata.minLength ?? null'\n            [maxlength]='metadata.maxLength ?? null'\n            [pattern]=\"metadata.regex ?? '[\\\\s\\\\S]*'\"\n        >\n        <mat-error *ngIf=\"chipsModel.errors\">{{getValidationErrorMessage(chipsModel)}}</mat-error>\n    </mat-chip-grid>\n    <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event, chipsElement)\">\n        <mat-option *ngFor=\"let value of metadata.autocompleteValues\" [value]=\"value\">\n          {{value}}\n        </mat-option>\n    </mat-autocomplete>\n    <mat-error *ngIf=\"!chipsModel.errors\">{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field> -->\n\n<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-chip-grid #chipGrid\n        #model=\"ngModel\" [name]=\"name\"\n        [required]=\"metadata.required(entity)\"\n        [disabled]=\"isReadOnly\"\n        [(ngModel)]=\"propertyValue\"\n    >\n        <mat-chip-row *ngFor=\"let value of propertyValue\" (removed)=\"removeStringChipArrayValue(value)\">\n            {{value}}\n            <button type=\"button\" matChipRemove>\n                <i [class]=\"metadata.deleteIcon\"></i>\n            </button>\n        </mat-chip-row>\n        <input #chipsModel=\"ngModel\"\n            #chipsElement\n            matInput\n            [matChipInputFor]=\"chipGrid\"\n            [matAutocomplete]=\"auto\"\n            [matChipInputAddOnBlur]=\"true\"\n            [name]=\"uuid2\"\n            [minlength]=\"metadata.minLength ?? null\"\n            [maxlength]=\"metadata.maxLength ?? null\"\n            [pattern]=\"metadata.regex ?? '[\\\\s\\\\S]*'\"\n            [includedIn]=\"autocompleteMetadata.restrictToOptions ? autocompleteStrings : undefined\"\n            [(ngModel)]=\"chipsInput\"\n            (keyup)=\"filterAutocompleteStrings(propertyValue)\"\n            (matChipInputTokenEnd)=\"addStringChipArrayValue($event)\"\n        />\n        <mat-error *ngIf=\"chipsModel.errors\">{{getValidationErrorMessage(chipsModel)}}</mat-error>\n    </mat-chip-grid>\n    <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event, chipsElement)\">\n        <mat-option *ngFor=\"let value of filteredAutocompleteStrings\" [value]=\"value\">\n          {{value}}\n        </mat-option>\n    </mat-autocomplete>\n    <mat-error *ngIf=\"!chipsModel.errors\">{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"] }]
-        }] });
+            args: [{ selector: 'array-string-autocomplete-chips', template: "<!-- eslint-disable angular/no-call-expression -->\n\n<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-chip-grid #chipGrid\n        #model=\"ngModel\" [name]=\"name\"\n        [required]=\"metadata.required(entity)\"\n        [disabled]=\"isReadOnly\"\n        [(ngModel)]=\"propertyValue\"\n        (ngModelChange)=\"setValidationErrors(model, chipsModel)\"\n    >\n        <mat-chip-row *ngFor=\"let value of propertyValue\" (removed)=\"removeStringChipArrayValue(value)\">\n            {{value}}\n            <button type=\"button\" matChipRemove>\n                <i [class]=\"metadata.deleteIcon\"></i>\n            </button>\n        </mat-chip-row>\n        <input #chipsModel=\"ngModel\"\n            #chipsElement\n            matInput\n            [matChipInputFor]=\"chipGrid\"\n            [matAutocomplete]=\"auto\"\n            [matChipInputAddOnBlur]=\"true\"\n            [name]=\"uuid2\"\n            [minlength]=\"metadata.minLength ?? null\"\n            [maxlength]=\"metadata.maxLength ?? null\"\n            [pattern]=\"metadata.regex ?? '[\\\\s\\\\S]*'\"\n            [includedIn]=\"autocompleteMetadata.restrictToOptions ? autocompleteStrings : undefined\"\n            [(ngModel)]=\"chipsInput\"\n            (keyup)=\"filterAutocompleteStrings(chipsInput)\"\n            (matChipInputTokenEnd)=\"addStringChipArrayValue($event, !!chipsModel.errors)\"\n        />\n    </mat-chip-grid>\n    <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event, chipsElement, model, chipsModel)\">\n        <mat-option *ngFor=\"let value of filteredAutocompleteStrings\" [value]=\"value\">\n          {{value}}\n        </mat-option>\n    </mat-autocomplete>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.EnvironmentInjector }]; } });
 
 /* eslint-disable jsdoc/require-jsdoc */
 // eslint-disable-next-line angular/prefer-standalone-component
@@ -3651,7 +3738,7 @@ class BooleanDropdownInputComponent extends NgxMatEntityBaseInputComponent {
         this.metadata = new DropdownBooleanDecoratorConfigInternal(this.metadata, this.globalConfig);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: BooleanDropdownInputComponent, deps: [{ token: NGX_INTERNAL_GLOBAL_DEFAULT_VALUES }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: BooleanDropdownInputComponent, selector: "boolean-dropdown-input", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-select\n        #model=\"ngModel\"\n        [name]=\"name\"\n        [required]=\"metadata.required(entity)\"\n        [disabled]=\"isReadOnly\"\n        [(ngModel)]=\"propertyValue\"\n        (selectionChange)=\"emitChange()\"\n    >\n        <mat-option [value]=\"undefined\">-</mat-option>\n        <mat-option [value]=\"true\">{{metadata.dropdownTrue}}</mat-option>\n        <mat-option [value]=\"false\">{{metadata.dropdownFalse}}</mat-option>\n    </mat-select>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i7$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: BooleanDropdownInputComponent, selector: "boolean-dropdown-input", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-select\n        #model=\"ngModel\"\n        [name]=\"name\"\n        [required]=\"metadata.required(entity)\"\n        [disabled]=\"isReadOnly\"\n        [(ngModel)]=\"propertyValue\"\n        (selectionChange)=\"emitChange()\"\n    >\n        <mat-option [value]=\"undefined\">-</mat-option>\n        <mat-option [value]=\"true\">{{metadata.dropdownTrue}}</mat-option>\n        <mat-option [value]=\"false\">{{metadata.dropdownFalse}}</mat-option>\n    </mat-select>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i6$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: BooleanDropdownInputComponent, decorators: [{
             type: Component,
@@ -3923,7 +4010,7 @@ class DateTimeInputComponent extends NgxMatEntityBaseInputComponent {
         this.emitChange();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: DateTimeInputComponent, deps: [{ token: NGX_INTERNAL_GLOBAL_DEFAULT_VALUES }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: DateTimeInputComponent, selector: "date-time-input", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<div class=\"date-time\">\n    <mat-form-field>\n        <mat-label>{{metadata.displayName}}</mat-label>\n        <input\n            #model=\"ngModel\"\n            matInput\n            [name]=\"name\"\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            [disabled]=\"isReadOnly\"\n            [(ngModel)]=\"propertyValue\"\n            (dateChange)=\"setTime()\"\n        >\n        <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n        <mat-datepicker #picker></mat-datepicker>\n        <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n    </mat-form-field>\n    <mat-form-field class=\"timepicker\">\n        <mat-label>{{metadata.timeDisplayName}}</mat-label>\n        <mat-select\n            #timeModel=\"ngModel\"\n            [name]=\"name + 'time'\"\n            [required]=\"metadata.required(entity)\"\n            [compareWith]=\"compareTimes\"\n            [disabled]=\"isReadOnly\"\n            [(ngModel)]=\"time\"\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"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i7.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i7.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i7.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: DateTimeInputComponent, selector: "date-time-input", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<div class=\"date-time\">\n    <mat-form-field>\n        <mat-label>{{metadata.displayName}}</mat-label>\n        <input\n            #model=\"ngModel\"\n            matInput\n            [name]=\"name\"\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            [disabled]=\"isReadOnly\"\n            [(ngModel)]=\"propertyValue\"\n            (dateChange)=\"setTime()\"\n        >\n        <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n        <mat-datepicker #picker></mat-datepicker>\n        <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n    </mat-form-field>\n    <mat-form-field class=\"timepicker\">\n        <mat-label>{{metadata.timeDisplayName}}</mat-label>\n        <mat-select\n            #timeModel=\"ngModel\"\n            [name]=\"name + 'time'\"\n            [required]=\"metadata.required(entity)\"\n            [compareWith]=\"compareTimes\"\n            [disabled]=\"isReadOnly\"\n            [(ngModel)]=\"time\"\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"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i7.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i7.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i7.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: DateTimeInputComponent, decorators: [{
             type: Component,
@@ -4099,12 +4186,11 @@ class FileInputComponent {
     }
     async downloadAll() {
         if (this.propertyValue.length) {
-            // eslint-disable-next-line max-len
             void FileUtilities.downloadMultipleFiles(this.metadata.displayName, LodashUtilities.cloneDeep(this.propertyValue), this.http);
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: FileInputComponent, deps: [{ token: i1.MatDialog }, { token: i2$1.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: FileInputComponent, selector: "file-input", inputs: { propertyValue: "propertyValue", entity: "entity", key: "key", metadata: "metadata", getValidationErrorMessage: "getValidationErrorMessage", isReadOnly: "isReadOnly" }, outputs: { fileDataChangeEvent: "fileDataChangeEvent" }, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<input #fileInput\n    type=\"file\" hidden\n    [multiple]=\"metadata.multiple\"\n    [accept]=\"acceptString\"\n    (change)=\"setFileFromInput($event)\"\n>\n\n<mat-form-field floatLabel=\"always\">\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-chip-grid #chipGrid\n        #model=\"ngModel\" name=\"file\" [required]=\"metadata.required(entity)\"\n        [(ngModel)]=\"filenames\"\n    >\n        <mat-chip-row *ngFor=\"let name of filenames\" (removed)=\"removeFile(name)\">\n            {{name}}\n            <span class=\"mat-mdc-chip-remove mat-mdc-chip-trailing-icon ngx-mat-grey\" (click)=\"downloadFile(name)\">\n                <i class=\"fas fa-download\"></i>\n            </span>\n            <button *ngIf=\"!isReadOnly\" type=\"button\" matChipRemove>\n                <i [class]=\"metadata.deleteIcon\"></i>\n            </button>\n        </mat-chip-row>\n        <input hidden [matChipInputFor]=\"chipGrid\" [readonly]=\"true\">\n    </mat-chip-grid>\n    <button *ngIf=\"downloadAllEnabled()\" type=\"button\" class=\"ngx-mat-grey\" mat-icon-button matSuffix (click)=\"downloadAll()\">\n        <i class=\"fas fa-file-zipper\"></i>\n    </button>\n    <button type=\"button\" class=\"ngx-mat-grey\" mat-icon-button matSuffix [disabled]=\"isReadOnly\" (click)=\"fileInput.click()\">\n        <i class=\"fas fa-upload\"></i>\n    </button>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>\n\n<div *ngIf=\"metadata.dragAndDrop && !isReadOnly\" class=\"drag-drop\" dragDrop (files)=\"setFile($event)\">\n    <button type=\"button\" mat-icon-button [disabled]=\"isReadOnly\" (click)=\"fileInput.click()\">\n        <i class=\"fas fa-file-arrow-up ngx-mat-grey\"></i>\n    </button>\n</div>", styles: ["mat-form-field{width:100%}.ngx-mat-grey{opacity:1;color:#0000008a}.drag-drop{display:flex;align-items:center;justify-content:center;height:200px;border:2px dashed rgba(0,0,0,.54);border-radius:15px;margin-top:5px;margin-bottom:5px}.drag-drop i{font-size:30px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.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: "component", type: i6$1.MatChipGrid, selector: "mat-chip-grid", inputs: ["tabIndex", "disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i6$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i6$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i6$1.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "editable"], outputs: ["edited"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: DragDropDirective, selector: "[dragDrop]", outputs: ["files"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: FileInputComponent, selector: "file-input", inputs: { propertyValue: "propertyValue", entity: "entity", key: "key", metadata: "metadata", getValidationErrorMessage: "getValidationErrorMessage", isReadOnly: "isReadOnly" }, outputs: { fileDataChangeEvent: "fileDataChangeEvent" }, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<input #fileInput\n    type=\"file\" hidden\n    [multiple]=\"metadata.multiple\"\n    [accept]=\"acceptString\"\n    (change)=\"setFileFromInput($event)\"\n>\n\n<mat-form-field floatLabel=\"always\">\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-chip-grid #chipGrid\n        #model=\"ngModel\" name=\"file\" [required]=\"metadata.required(entity)\"\n        [(ngModel)]=\"filenames\"\n    >\n        <mat-chip-row *ngFor=\"let name of filenames\" (removed)=\"removeFile(name)\">\n            {{name}}\n            <span class=\"mat-mdc-chip-remove mat-mdc-chip-trailing-icon ngx-mat-grey\" (click)=\"downloadFile(name)\">\n                <i class=\"fas fa-download\"></i>\n            </span>\n            <button *ngIf=\"!isReadOnly\" type=\"button\" matChipRemove>\n                <i [class]=\"metadata.deleteIcon\"></i>\n            </button>\n        </mat-chip-row>\n        <input hidden [matChipInputFor]=\"chipGrid\" [readonly]=\"true\">\n    </mat-chip-grid>\n    <button *ngIf=\"downloadAllEnabled()\" type=\"button\" class=\"ngx-mat-grey\" mat-icon-button matSuffix (click)=\"downloadAll()\">\n        <i class=\"fas fa-file-zipper\"></i>\n    </button>\n    <button type=\"button\" class=\"ngx-mat-grey\" mat-icon-button matSuffix [disabled]=\"isReadOnly\" (click)=\"fileInput.click()\">\n        <i class=\"fas fa-upload\"></i>\n    </button>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>\n\n<div *ngIf=\"metadata.dragAndDrop && !isReadOnly\" class=\"drag-drop\" dragDrop (files)=\"setFile($event)\">\n    <button type=\"button\" mat-icon-button [disabled]=\"isReadOnly\" (click)=\"fileInput.click()\">\n        <i class=\"fas fa-file-arrow-up ngx-mat-grey\"></i>\n    </button>\n</div>", styles: ["mat-form-field{width:100%}.ngx-mat-grey{opacity:1;color:#0000008a}.drag-drop{display:flex;align-items:center;justify-content:center;height:200px;border:2px dashed rgba(0,0,0,.54);border-radius:15px;margin-top:5px;margin-bottom:5px}.drag-drop i{font-size:30px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.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: "component", type: i6$2.MatChipGrid, selector: "mat-chip-grid", inputs: ["tabIndex", "disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i6$2.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i6$2.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i6$2.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "editable"], outputs: ["edited"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: DragDropDirective, selector: "[dragDrop]", outputs: ["files"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: FileInputComponent, decorators: [{
             type: Component,
@@ -4140,7 +4226,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImpor
             args: [{ selector: 'file-default-input', template: "<div [class.file-input]=\"metadata.dragAndDrop\" [class.mat-elevation-z8]=\"metadata.dragAndDrop\">\n    <file-input\n        [propertyValue]=\"propertyValue\"\n        [metadata]=\"metadata\"\n        [getValidationErrorMessage]=\"getValidationErrorMessage\"\n        [isReadOnly]=\"isReadOnly\"\n        [entity]=\"entity\"\n        [key]=\"key\"\n        (fileDataChangeEvent)=\"refreshFileData($event)\"\n    >\n    </file-input>\n</div>", styles: [".file-input{margin-top:15px;margin-bottom:15px;padding:15px;border-radius:5px}\n"] }]
         }] });
 
-// eslint-disable-next-line max-len, jsdoc/require-jsdoc
+// eslint-disable-next-line jsdoc/require-jsdoc
 const PLACEHOLDER = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAAAAMgCAMAAAAEPmswAAAANlBMVEXx8/XCy9LFztXu8PPs7/Lp7e/W3OHL0tnZ3+PN1NrS2d7i5urn6u7f5OjI0Nfc4ebP1tzk6excnoRZAAAXh0lEQVR42uzUAQ0AAAzDoN+/6eloAiK4B4gQFpAhLCBDWECGsIAMYQEZwgIyhAVkCAvIEBaQISwgQ1hAhrCADGEBGcICMoQFZAgLyBAWkCEsIENYQIawgAxhARnCAjKEBWQIC8gQFpAhLCBDWECGsIAMYQEZwgIyhAVkCAvIEBaQISwgQ1hAhrCADGEBGcICMoQFZAgLyBAWkCEsIENYQIawgAxhARnCAjKEBWQIC8gQFpAhLGDs1AEJAAAAgKD/r9sR6Ag3hAVsCAvYEBawISxgQ1jAhrCADWEBG8ICNoQFbAgL2BAWsCEsYENYwIawgA1hARvCAjaEBWwIC9gQFrAhLGBDWMCGsIANYQEbwgI2hAVsCAvYEBawISxgQ1jAhrCADWEBG8ICNoQFbAgL2BAWsCEsYENYwIawgA1hARvCAjaEBWwIC9gQFrAhLGBDWMCGsIANYQEbwgI2hAVsCAvYEBbETh2QAAAAAAj6/7odgY6QDWEBG8ICNoQFbAgL2BAWsCEsYENYwIawgA1hARvCAjaEBWwIC9gQFrAhLGBDWMCGsIANYQEbwgI2hAVsCAvYEBawISxgQ1jAhrCADWEBG8ICNoQFbAgL2BAWsCEsYENYwIawgA1hARvCAjaEBWwIC9gQFrAhLGBDWMCGsIANYQEbwgI2hAVsCAvYEBawISxgQ1jAhrCADWEBG8ICNoRF7NQBCQAAAICg/6/bEegIYUNYwIawgA1hARvCAjaEBWwIC9gQFrAhLGBDWMCGsIANYQEbwgI2hAVsCAvYEBawISxgQ1jAhrCADWEBG8ICNoQFbAgL2BAWsCEsYENYwIawgA1hARvCAjaEBWwIC9gQFrAhLGBDWMCGsIANYQEbwgI2hAVsCAvYEBawISxgQ1jAhrCADWEBG8ICNoQFbAgL2BAWsCEsYENYwIawgA1hxc6dJtcKAgEURgREwGn/m32Vd1Op/Ih3cO72fIs4BU0rADEIFgAxCBYAMQgWADEIFgAxCBbwm+3bFOKQ8zSV4r13zvky5a4bYgxjYyuch2ABD7ZJMRdnXnIlDyE1FY5HsADbhmFy5lM+x7GvcCSChXtrQufNCnXpQlvhIAQLt2XHONVmE2VIzLaOQLBwT230ZlsuBy6IeyNYuB+bOmd24TpOWrsiWLiZJhazKz8w09oNwcKd9NGbA9SZg9Y+CBZuw4ZijlMiE63tESzcg02TOZqnWVsjWLiDpqvNKXxkI35LBAv6pWJO5APzrM0QLChnozNnm5jBb4RgQbU2m0uoO3YdtkCwoFjy5jp85Ji1GsGCWpfK1X95rLAKwYJS4XK54pi1HsGCSuH8SfucjkWH5QgWFLpwrr6UVGEZggV10rVz9cVxM1yGYEGZthgJ6oHPdhYgWFClv8jeFcOsfRAsKGIHI8rENumHCBb0iLWRhvn7ZwgWtGgvuXj1kidZHyBY0MF2RiqS9T6CBRWCvNsgyVqAYEGBRsYqA8lajWBBPGlvg38rvBi+gWBBuvb6i+3vmdjLeolgQTYdx6tvme33FwgWRBO6yzBr4BvDpwgWJNN0vHqo+Sz6GYIFuRplx6sHx4PhPIIFsaJRigfDWQQLQvXid6+Yvn+OYEGmUfRq+2uMsv5EsCCSvmk7o6x3ECwIpPo6yCLpEwQL8iTl10G2smYRLIij/zrIvXAOwYIwvcrlq1kT74W/ESzIMmr51Plddazwg2BBlGDux7NH+oNgQRK5/0Fm+L4JgvWPvbvRSRiGAjBaBoqK+PP+L2s0xGSj3QiQ9I57zkN86brblvVItn1l8/2cYLEar1mmGWoOFlm/BIu1yLh9ZZE1IVisRNLtK4usEcFiFYbvwtYiS7BYg7zb7WPfFlmCRXj7bNOiFlkNgkV8j373lZ2siwkW4SX/PTi1+9pkJljEluhyhgsdMy+yBIvQDoWpXeLThYJFYMYZ6vJe4SBYxDWkuAv5Gu9Z78kSLMIajF8ZcBgRLOL6MH5l731MsAhrb/zK3vuEYBFV6ttk7L3XCRZBvRUcLpwSLGLSK3PvFYJFSHrls7BGsIhIr3wWVgkWATnu7G9hnWARj175LGwQLMLRK5+FLYJFNHp1jd1+k4NgEYpeXel5k4JgEYleXe24yUCwCESvXDkzR7CIxPzVTbYJxt4FizD0ynzDPMEiDr3yCtgCwSKMr8Ltnh58I0uwiOG1cA/bxz6oI1iE4L4+E1nLBIsY3IdsIusCgkUI3pu4q/fH3XoXLPob9OqXo4VLBIsAvD944tnCBYJFAN53PjFDukCw6O9Q+GPrfYlg0d2x8M+tfrMEi94+CyOm3tsEi65cKDNl6n2OYNGTA89Vpt5bBIuOHCCs8rOwSbDoaW9gtMbPwhbBohsD7k1+FjYIFv0MBkbb/CysESx6MTA6z8nCCsGiEwNYS7xOcU6w6OWlsMB4ww9794LdJgyEUXgwAsfFL/a/2Z4+T2zjWCMgnl/cbwttbxppNNwjWHgLBrByMN5wj2Ct4HztL+OxS621qTuOp/5a06HnItgw+v0uTRUI1qL2/dDao3b8qO+RRDkGGt5haGpAsJZzPbX2XDvUc/I5ExuwsrE4+QbBWsz+I9kr6VLR/XI5Nsq8SVdBsQjWIg6D5Rn5bxYbGpwYyPqPYC3iMFq+4+aTxSeevdg38xfBWsB5MJ+j/s+5Oc5cEDoxQvoPwZrvozW3SwWHCWX4RM67iX9Oh2DNc+isRFL/QVduNBRg6P0XgjVTv/nJYx9eEAYgXSyCNcNu2PpUjBMXhCEo/7AkWKVm78tM8jc2XqxEDkL4mQ7BKnZot35j48QFYRi6z3QIVqlru/kbGx8uCAORLRbBKvSD808nVoxGorrpnWCVuTIV48TKvlhEL30IVoEl1zlt5xyLlX2xaBaLYJU4J153+bCyLx7J5Q0Ey23hw+Ok+NfGiwP3iBSLRbAKDLaksdkCDtwDSnrLuwmWX29mDB57MOEelF6xCJbTGocx9R9jMeEelNxKP4Ll1tlvHGPl4psTgbVixSJYXr39wS+FuVgpE5lYsQiW0661FcgdJTiwUiY2rd8KCZbTyf7ipjAPO9yjk/o/FsHy2dstBt5fYEVDfErFIlg+g63j2FSLidHwhJ5bECyXs33GaMNLfDRVgk6xCJbLyT7jFOsVJkZFyBSLYHnsbD1C5wgOe4MElWIRLI/e7rFn+ws8eRYiUiyC5dHZelJTIZ4869C4KyRYDnu7x2TDF9gxqkWiWATL4WJrOjW14cmzFoViESyHZGtqm8rw5FmNwCsdgpXvbI8YxXqGJ8+C4heLYOXr7RE7G57gAEtS+I1+BCvfyaYwOzqFAyxR0YtFsPIle8Qh1iQOsGQFLxbByrazCQy7T2ICS1fsb+kQrGwHe4rPQN/iCaGy0MUiWNl6m8Kp+yN2YGmL/E1ogpXtYtMYHb3HDixxgYtFsLIN9gRb/G6xxF1e3AtrgpXtaM/w/vkzlrhXYGiCIljZOntAsKbsOMDSF7VYBCtbsrVV8ofBk5waBD1QreTfyPoIVh6e5NQi5kbJOv6NfAtbX9zLmVw8yanHT/buBDt1GIbCsJwRCOP+N/t62vNaphLbSZEs/98O2gOXyJFkk102BFYkAisGIzmeDMEeAitaK09REl5hJMcVg6MXHr4jb8EZVgRGcpyxl1gOviPv0stzrGv4MdLR4Iu5pZIEViQaR+cxkuOOucu/CKxIjObMYiTHIWsXUxBY0TbynPtevUiM5LhkbKEfgRWJ9TIz6GhwytZ6LAIrEgv8ZtDR4JWpZTMEViRWJM/ZCXyytGyGwIrFJRSvsGTUM0OHqwRWLK75eoUdDa7ZGYQmsOLt5CnO3EOgxd05M59NAisWV9W/MgpcszIITWAl6OUeR1ifaHH37xxMILASnOSBz5NNY/8ZGGBkSIfASjDKDZ8/YelY2lcFG0M6BFaKXh4w+UyLeyU6Cw2kBFaKQW75fHOc7CCogYUhHQIrRSN3aHMPtLjXw0CnIIGV5CT3vN8DN4eCsCb6L4YIrCRHuUYTVgi0uFdFvYGUwEpzkP/cPWxnocW9MkPQRGClGuUKPQ1sca/OOSgisJId5BsnWB/2gqqoNpASWMmaVv6ArTW00biXvkLtMaghsNIN8snXUWYeZp6rpNiORWBl2Mva+lAqZp5rtA9aCKxk36s1aWlg5rlWU1BCYOXYyQcKQmae63UKOgisLAcRoQWLgrBiQ1BBYGVpem8z8BkoCKt2DhoIrDzHztmWoXQUhHXT+dwSWJnGtvoDd2ae66ZSGRBYubbVX/ZMQVg5jXYsAivbueyzSyN/Pwo2hbcjsPJt25qfrygIodDcQGAtMHZlj5EuwFZkqBQIBNYSx16W6Ip9P0hBCJ3mBgJrkeYg+S7F9l9REEKpuYHAWmiobx4nBApCKDU3EFhLjb3k6As+vuKaHGhtbiCwlhvayh6vKAihdZEOgbWCZpI0l2L3i36ZBFD59SWwVjFOKXFVdDUYKAih101IYK0iIbKm0uMqNFyTA615WAJrNcdNL3O6TcGtV18oCKH4qpDAWtP21MnvukOxdw/+oCCE5qtCAmtlx2Hq5FE7DQ6erUKgIITqHDSB9Qea7XCaLvu+a7u+30+nYVtwT/stCkKovioksJCAgvAfe3eU6ygMBFG0GhtCSAxh/5udUWby8Z4COGCgI92ziJLLuBuc+6mQwEI+nozi9KlCAgu5KIQ4/VMhgYVMFEKc/6mQwEIeCiEcTBUSWMhDIYSDBaQEFrJQCOFhASmBhRwUQiwLve2LwEIetozCxb8KCSxk4LcT8DGjQ2BhGYUQTmZ0CCwsoxDCyYwOgYVFFEJ4mdEhsLCEQgg3MzoEFpZQCPGJ0XZDYGERhRCfGWwvBBaWUAjh6OKdwMI8CiE+drF9EFhYQCGEp4t3AgtzKIRwdfFOYGEOhRCuLt4JLMy6CvBz8U5gYU5VC/Dz4p3AwpxBgKNVMwQWJlEI4W3VDIGFGRRC+Fo1Q2BhCoUQ7na8E1iYdBHga8c7gYUJFEL4u3gnsDClFeDs4p3AwjsUQrj8uarsCP21a4Z0G+sYQwiSQoixvo9paJvHpTI4RCFEAVcrSrar/tEMY9SCeL+1zaM3OEIhhMPFDbK9VF07Bn2kTs2V45YPFEJ4XNwg20PfpKgJOallONtdgL/FDbLSqi7V2qpOHUetU1AI8eR0cYOsqKq7BRVybzlpHY5CiH+cvh+VlVN1o8oKt4ar+CNRCPHi8/2orJRrCtpDTA/DISiE2EeyUmRFVG3UfgKZdQAKIX7y+H5UVkA/BP1GZn0vCiGeHP74S7bZJek9Mus7NQL+8vh+VLZRlXSckC6GnfUCnhyOQcu2aYOOVTc80CqOQoj33O0flW3RRR0vJN5nlUUhxAR3Y9Cy9aqb8nHM+g59EPDi7hpLtloXdCKOWYVQCDHP1Ri0LJOf49VL3Rm2ohBiga9rLFkeX8er/yLNcBsKIXI4+o2ObAU//38KA7OGJY0CfvM0Bi1bofd00cHTrLUohDja3TaSfe4R5crIC/gVKIR/2Lvb5NRhGArD54RvCC3sf7N3Op07UyhJ7PQHsvU+W4BxIvlIQbkw2/zkMrFH+em/V6MgRKlIbSy50hDzX82RVYeCEMUitbHkOh9hP/60ozAsRkGIGoHaWHKVQ7D21YORI6sCkVGUC9PGkqcFTV9xZP0RBSGqRWljyb+1/J/myKrAllG8w2bwavKEwGnReXdyWXMoCPF2o1eTi719eLDUlYGdOa1kVdCvo9eSH/RwXkmbI0fWSxSEiOHmleRnTcWvpmz3RoWwYRX0afVuLLnI0FyLg1jWMwpCxHH3OnKJocUn8Ej3/QcKQoRy9Cryt/7OK7rvDygIEcvJa8hf+jyvaGX91HpcBZ1Z18aS7W7PK0kjq9+XnAS8wcUryO75vKIutE1BiJD2rifb7ut+8NmGupCCEBEdXE3dn1eSdtSFFISIZze4lvxf10soqQsnDJH3BaF3V9dSivNK2rKR9KWrgPc5u5LcyfzgogsfBPvtJuB96hcmK08/luY7BSGi2bmOMk2YMazT8Rs02vTpKvKks/pzNPr+hdGam2soWXuDhAOfyUEodSM68oRTr//mTxIOvV0Bo2l3V5BfO/R6XvGS1dAnRZDC3uWU8fro02AJFsI4uJhSfkNlx3UhM88Io2JER0nzz+mvC/vK2KFtV5dSigAWL1nMPCOyswspbzwn80tW3z1KNKd4REeJH75j3ulCIu6IZXQZ+dlHnofvJusKhyTv0GjI0UXU20bkOpeUKVIi7ojn5BJKXixsM6ZIOw+toEllIzpKeEGYPUWa7zdGC64uIJob2XrvaS5V0JizlynLBCGb/Ug0ILbN4EXK23BP2ntP1qREQ+5eJPaNfNmmyb2zowFx7b1ENGO/JSkLcxb9aMXBC5S74Z6uLMxa9KMNOy8Qz95MkSx2NCC2q+cpfcM90zh0n3v60ZObZ4nLox/ufZeFQ/aXaMS3EHgXl0d5ysK8t8Box8VzRPo5zW1h6ltgNGPvGSL9nOW2kAYWmjC7zE80sJIsT+ahhEaMniZqhSR7/f6xdy+4iQNBEEDdQYEA4Xf/y+5ukk2AYAkFKXKX3ztEWe6p6THAoouXGjUYYM1j5YyPEn2saszgX2EWK2cMsGhk/KHCwb/CTYtjJfFRopVDjRj8K8yh9m4pMr0c67bBAGsG/QZXCGlmrPA++FcY9ZwyyJr5Hg462tZNA/GDLK960dCmvhNYMxhk2cNBR7cK7wJrBoOs3QANneobgZU/yLKHg6aWdU1gxQ+ynALT1qquCKz0jTMao/T1WlcE1l121ZbGKI291CWBdZ/XrqN3A3daW9UFgZX90KqBO7091wWBFb0jy8Cd7g51TmAld0g13OlvXWcEVnCHVMOdABe3oAVW8Ojdon4S7OqLwModvdtzRoZjfRJYsaN3K2UIcfZTKLBSR+8OCImxrf8EVmjr3QEhQTb1QWBljt4dEJJk8VTvBFbm6N1DSETZ1juBFblwxpsThNnUG4GVuHBGoYE0Hz+FAivwsNCNZ/Js6x+B9VPbmiqP0pNoWX8JrLjDwpVCA4nefgoFVtph4d5KZDKdqkpgPWCxrslRwCLWskpgPWRyNwufrHAn1mJfAivqsFBekexUAivqZqGCO9GWAutRpwkdFtrYR7bFXmDlPGXvSS/SnQRWTL1BXpHPNY6Uu9AuPDMDatEhd6HlFdCl3iCvgC71BnkFdLkLbd4OdKk3yCugS71BXgFd6g367UCTeoP7zsAPHeoe9l8BU7CrX7WyXxRoUm9Yu6gA/GHvDnMThmEwgNZpF9LQUrj/ZfdvmmBMDEabSu8dIkrsz85O4g3VeQW8ZhjjPv+lAk3pa9whzgA0J8ePxBmABs3xZqP2ILCTVe/2LgI7aRYm04NA1+1iFvog3Q503S6ahZ6DwJe2FycnaQbgLY4p/lnVHQS+abj07noFXGl2TsfsIHCrydS76xVwq8lCViquV8D7fRwU24HdyPGa0aQzsJrpFM8bFa+ANfUlnnS+dADrGmo8oZobBLYwLKf4k1NRagc2M9UUD0rZWxDYVj8/cmalOotdAS2Yyhi/OBcpBqAh/WXJY4or6ZwXhxXQpGE6znMpOZdlmY+TVyAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPDJHhwIAAAAAAD5vzaCqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqwBwcCAAAAAED+r42gqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqirswYEAAAAAAJD/ayOoqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqkp7cCAAAAAAIMjfepArAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgKcAnTNeiLeG1rEAAAAASUVORK5CYII=';
 
 /* eslint-disable jsdoc/require-jsdoc */
@@ -4233,6 +4319,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImpor
             args: [{ selector: 'file-image-input', template: "<!-- eslint-disable angular/prefer-ngsrc -->\n<!-- eslint-disable angular/alt-text -->\n<!-- eslint-disable angular/cyclomatic-complexity -->\n<div *ngIf=\"!metadata.dragAndDrop && !metadata.preview\">\n    <file-input\n        [propertyValue]=\"propertyValue\"\n        [metadata]=\"metadata\"\n        [getValidationErrorMessage]=\"getValidationErrorMessage\"\n        [isReadOnly]=\"isReadOnly\"\n        [entity]=\"entity\"\n        [key]=\"key\"\n        (fileDataChangeEvent)=\"refreshFileData($event)\"\n    >\n    </file-input>\n</div>\n\n<div *ngIf=\"metadata.dragAndDrop || metadata.preview\" class=\"file-input mat-elevation-z8\">\n    <file-input\n        [propertyValue]=\"propertyValue\"\n        [metadata]=\"metadata\"\n        [getValidationErrorMessage]=\"getValidationErrorMessage\"\n        [isReadOnly]=\"isReadOnly\"\n        [entity]=\"entity\"\n        [key]=\"key\"\n        (fileDataChangeEvent)=\"refreshFileData($event)\"\n    >\n    </file-input>\n\n    <div *ngIf=\"metadata.preview && metadata.multiple\" class=\"image-preview\">\n        <i class=\"prev-button fa-solid fa-angle-left\" [class.disabled]=\"imageIndex === 0\" (click)=\"prev()\"></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 class=\"next-button fa-solid fa-angle-right\"\n            [class.disabled]=\"!multiPreviewImages || !multiPreviewImages.length || imageIndex === (multiPreviewImages.length - 1)\"\n            (click)=\"next()\"\n        >\n        </i>\n    </div>\n\n    <div *ngIf=\"metadata.preview && metadata.multiple\" class=\"preview-nav\">\n        <button *ngIf=\"\n            this.multiPreviewImages\n            && multiPreviewImages[imageIndex-4]\n            && imageIndex === (this.multiPreviewImages.length - 1)\"\n            type=\"button\" mat-icon-button (click)=\"setIndex(imageIndex-4)\"\n        >\n            <div class=\"dot\">\n                <div class=\"image-index\">{{imageIndex - 3}}</div>\n            </div>\n        </button>\n        <!-- eslint-disable-next-line angular/conditional-complexity -->\n        <button *ngIf=\"this.multiPreviewImages\n            && multiPreviewImages[imageIndex-3]\n            && (\n                imageIndex === (this.multiPreviewImages.length - 2)\n                || imageIndex === (this.multiPreviewImages.length - 1)\n            )\" type=\"button\" mat-icon-button (click)=\"setIndex(imageIndex-3)\"\n        >\n            <div class=\"dot\">\n                <div class=\"image-index\">{{imageIndex - 2}}</div>\n            </div>\n        </button>\n        <button *ngIf=\"multiPreviewImages?.[imageIndex-2]\" type=\"button\" mat-icon-button (click)=\"setIndex(imageIndex-2)\">\n            <div class=\"dot\">\n                <div class=\"image-index\">{{imageIndex - 1}}</div>\n            </div>\n        </button>\n        <button *ngIf=\"multiPreviewImages?.[imageIndex-1]\" type=\"button\" mat-icon-button (click)=\"setIndex(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 *ngIf=\"multiPreviewImages?.[imageIndex+1]\" type=\"button\" mat-icon-button (click)=\"setIndex(imageIndex+1)\">\n            <div class=\"dot\">\n                <div class=\"image-index\">{{imageIndex + 2}}</div>\n            </div>\n        </button>\n        <button *ngIf=\"multiPreviewImages?.[imageIndex+2]\" type=\"button\" mat-icon-button (click)=\"setIndex(imageIndex+2)\">\n            <div class=\"dot\">\n                <div class=\"image-index\">{{imageIndex + 3}}</div>\n            </div>\n        </button>\n        <button *ngIf=\"multiPreviewImages?.[imageIndex+3] && imageIndex <= 1\" type=\"button\" mat-icon-button (click)=\"setIndex(imageIndex+3)\">\n            <div class=\"dot\">\n                <div class=\"image-index\">{{imageIndex + 4}}</div>\n            </div>\n        </button>\n        <button *ngIf=\"multiPreviewImages?.[imageIndex+4] && imageIndex === 0\" type=\"button\" mat-icon-button (click)=\"setIndex(imageIndex+4)\">\n            <div class=\"dot\">\n                <div class=\"image-index\">{{imageIndex + 5}}</div>\n            </div>\n        </button>\n    </div>\n\n    <div *ngIf=\"metadata.preview && !metadata.multiple\" class=\"image-preview\">\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 *ngIf=\"metadata.preview && !metadata.multiple\" class=\"preview-nav\">\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$1.HttpClient }]; } });
 
+/**
+ * The default function to retrieve dynamic style classes.
+ * Returns an empty array.
+ */
+// eslint-disable-next-line typescript/no-explicit-any
+const defaultDynamicStyleClasses = () => [];
+
 /**
  * Checks if the given function is async or not.
  * @param originalFunction - The function to check.
@@ -4273,7 +4366,6 @@ class CreateDataBuilder extends BaseBuilder {
     }
     // eslint-disable-next-line jsdoc/require-jsdoc
     generateBaseData(data) {
-        // eslint-disable-next-line max-len
         const confirmCreateDialogData = new ConfirmDialogDataBuilder(this.globalConfig, data?.confirmCreateDialogData)
             .withDefault('confirmButtonLabel', this.globalConfig.createLabel)
             .withDefault('text', this.globalConfig.confirmCreateText)
@@ -4309,7 +4401,6 @@ let EditActionInternal = class EditActionInternal {
             .withDefault('text', globalConfig.confirmBaseActionText)
             .getResult();
     }
-    // eslint-disable-next-line max-len
     functionToAsync(originalFunction) {
         if (isAsyncFunction(originalFunction)) {
             return originalFunction;
@@ -4467,7 +4558,6 @@ let MultiSelectActionInternal = class MultiSelectActionInternal {
             .withDefault('text', globalConfig.confirmBaseActionText)
             .getResult();
     }
-    // eslint-disable-next-line max-len
     functionToAsync(originalFunction) {
         if (isAsyncFunction(originalFunction)) {
             return originalFunction;
@@ -4555,6 +4645,8 @@ let BaseDataInternal = class BaseDataInternal {
     // eslint-disable-next-line jsdoc/require-jsdoc
     importActionData;
     // eslint-disable-next-line jsdoc/require-jsdoc
+    dynamicRowStyleClasses;
+    // eslint-disable-next-line jsdoc/require-jsdoc
     EntityClass;
     // eslint-disable-next-line jsdoc/require-jsdoc
     edit;
@@ -4573,7 +4665,6 @@ let BaseDataInternal = class BaseDataInternal {
         this.searchString = data.searchString ?? defaultSearchFunction;
         if (data.tableActions) {
             this.tableActions = data.tableActions.map(tA => {
-                // eslint-disable-next-line max-len
                 return tA.type === 'default' ? new BaseTableActionInternal(tA, globalConfig) : new MultiSelectActionInternal(tA, globalConfig);
             });
         }
@@ -4584,6 +4675,7 @@ let BaseDataInternal = class BaseDataInternal {
         this.displayLoadingSpinner = data.displayLoadingSpinner ?? true;
         this.allowJsonImport = data.allowJsonImport ?? false;
         this.importActionData = this.buildImportActionData(data.importActionData);
+        this.dynamicRowStyleClasses = data.dynamicRowStyleClasses ?? defaultDynamicStyleClasses;
         this.edit = data.edit;
         this.create = data.create;
         this.allowCreate = this.allowDataToFunction(data.allowCreate);
@@ -4707,7 +4799,6 @@ class HasManyDecoratorConfigInternal extends PropertyDecoratorConfigInternal {
 /* istanbul ignore next */
 // eslint-disable-next-line jsdoc/require-jsdoc
 function defaultCreateBaseUrl(baseEntity, metadata) {
-    // eslint-disable-next-line max-len
     const baseEntityService = inject(metadata.RelatedEntityServiceClass);
     const entityService = inject(metadata.tableData.baseData.EntityServiceClass);
     const baseUrlSegments = entityService.baseUrl.split('/');
@@ -4717,7 +4808,6 @@ function defaultCreateBaseUrl(baseEntity, metadata) {
 /**
  * Provider for the default getValidationErrorMessage.
  */
-// eslint-disable-next-line constCase/uppercase
 const NGX_GET_VALIDATION_ERROR_MESSAGE = new InjectionToken('Provider for the default getValidationErrorMessage.', {
     providedIn: 'root',
     factory: () => getValidationErrorMessage
@@ -4771,18 +4861,44 @@ function getValidationErrorMessage(model) {
 /* eslint-disable jsdoc/require-jsdoc */
 // eslint-disable-next-line angular/prefer-standalone-component
 class NumberDropdownInputComponent extends NgxMatEntityBaseInputComponent {
+    injector;
     dropdownValues = [];
+    filteredDropdownValues = [];
+    get currentDropdownValue() {
+        return LodashUtilities.cloneDeep(this.dropdownValues ?? [])
+            .find(v => v.value === this.propertyValue);
+    }
+    get shouldDisplayCurrentValue() {
+        return !!this.currentDropdownValue && !(!!this.filteredDropdownValues.find(v => v.value === this.currentDropdownValue?.value));
+    }
+    constructor(injector) {
+        super();
+        this.injector = injector;
+    }
     async ngOnInit() {
         super.ngOnInit();
-        this.dropdownValues = await this.metadata.dropdownValues(this.entity);
+        await runInInjectionContext(this.injector, async () => {
+            this.dropdownValues = await this.metadata.dropdownValues(this.entity);
+            this.filteredDropdownValues = LodashUtilities.cloneDeep(this.dropdownValues);
+        });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: NumberDropdownInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: NumberDropdownInputComponent, selector: "number-dropdown-input", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-select #model=\"ngModel\"\n        [name]=\"name\"\n        [required]=\"metadata.required(entity)\"\n        [disabled]=\"isReadOnly\"\n        [(ngModel)]=\"propertyValue\"\n        (selectionChange)=\"emitChange()\"\n    >\n        <mat-option *ngFor=\"let value of dropdownValues\" [value]=\"value.value\">{{value.displayName}}</mat-option>\n    </mat-select>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i7$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }] });
+    /**
+     * Filters the dropdown values.
+     * @param searchInput - The search input to filter for.
+     */
+    filterDropdownValues(searchInput) {
+        const filter = searchInput.toLowerCase();
+        this.filteredDropdownValues = LodashUtilities.cloneDeep(this.dropdownValues).filter(option => {
+            return option.displayName.toLowerCase().includes(filter) || (`${option.value}`).toLowerCase().includes(filter);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: NumberDropdownInputComponent, deps: [{ token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: NumberDropdownInputComponent, selector: "number-dropdown-input", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-select #model=\"ngModel\"\n        [name]=\"name\"\n        [required]=\"metadata.required(entity)\"\n        [disabled]=\"isReadOnly\"\n        [(ngModel)]=\"propertyValue\"\n        (selectionChange)=\"emitChange()\"\n        (opened)=\"selectSearchInput.focus()\"\n    >\n        <mat-form-field class=\"select-search-input\">\n            <!-- eslint-disable-next-line angular/no-any -->\n            <input #selectSearchInput matInput (keyup)=\"filterDropdownValues($any($event.target).value)\">\n            <i matSuffix class=\"fas fa-search\"></i>\n        </mat-form-field>\n        <mat-option *ngIf=\"!metadata.required(entity)\">-</mat-option>\n        <mat-option *ngIf=\"shouldDisplayCurrentValue\" [value]=\"currentDropdownValue?.value\">{{currentDropdownValue?.displayName}}</mat-option>\n        <mat-option *ngFor=\"let value of filteredDropdownValues\" [value]=\"value.value\">{{value.displayName}}</mat-option>\n    </mat-select>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}::ng-deep .mat-mdc-form-field-has-icon-suffix .mat-mdc-text-field-wrapper{padding-right:16px}::ng-deep .select-search-input{max-width:100%;margin-top:-8px;margin-bottom:8px}::ng-deep .select-search-input .mat-mdc-form-field-subscript-wrapper{display:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: NumberDropdownInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'number-dropdown-input', template: "<!-- eslint-disable angular/no-call-expression -->\n<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-select #model=\"ngModel\"\n        [name]=\"name\"\n        [required]=\"metadata.required(entity)\"\n        [disabled]=\"isReadOnly\"\n        [(ngModel)]=\"propertyValue\"\n        (selectionChange)=\"emitChange()\"\n    >\n        <mat-option *ngFor=\"let value of dropdownValues\" [value]=\"value.value\">{{value.displayName}}</mat-option>\n    </mat-select>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"] }]
-        }] });
+            args: [{ selector: 'number-dropdown-input', template: "<!-- eslint-disable angular/no-call-expression -->\n<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-select #model=\"ngModel\"\n        [name]=\"name\"\n        [required]=\"metadata.required(entity)\"\n        [disabled]=\"isReadOnly\"\n        [(ngModel)]=\"propertyValue\"\n        (selectionChange)=\"emitChange()\"\n        (opened)=\"selectSearchInput.focus()\"\n    >\n        <mat-form-field class=\"select-search-input\">\n            <!-- eslint-disable-next-line angular/no-any -->\n            <input #selectSearchInput matInput (keyup)=\"filterDropdownValues($any($event.target).value)\">\n            <i matSuffix class=\"fas fa-search\"></i>\n        </mat-form-field>\n        <mat-option *ngIf=\"!metadata.required(entity)\">-</mat-option>\n        <mat-option *ngIf=\"shouldDisplayCurrentValue\" [value]=\"currentDropdownValue?.value\">{{currentDropdownValue?.displayName}}</mat-option>\n        <mat-option *ngFor=\"let value of filteredDropdownValues\" [value]=\"value.value\">{{value.displayName}}</mat-option>\n    </mat-select>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}::ng-deep .mat-mdc-form-field-has-icon-suffix .mat-mdc-text-field-wrapper{padding-right:16px}::ng-deep .select-search-input{max-width:100%;margin-top:-8px;margin-bottom:8px}::ng-deep .select-search-input .mat-mdc-form-field-subscript-wrapper{display:none}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.EnvironmentInjector }]; } });
 
 /* eslint-disable jsdoc/require-jsdoc */
 // eslint-disable-next-line angular/prefer-standalone-component
@@ -4863,11 +4979,19 @@ class ReferencesManyInputComponent extends NgxMatEntityBaseInputComponent {
     allReferencedEntities = [];
     allDropdownValues = [];
     dropdownValues = [];
+    filteredDropdownValues = [];
     input = '';
     referencedEntitiesDataSource = new MatTableDataSource();
     displayedColumns;
     selection = new SelectionModel(true, []);
     SelectionUtilities = SelectionUtilities;
+    get currentDropdownValue() {
+        return LodashUtilities.cloneDeep(this.dropdownValues ?? [])
+            .find(v => v.value === this.input);
+    }
+    get shouldDisplayCurrentValue() {
+        return !!this.currentDropdownValue && !(!!this.filteredDropdownValues.find(v => v.value === this.currentDropdownValue?.value));
+    }
     constructor(injector, globalConfig) {
         super();
         this.injector = injector;
@@ -4895,6 +5019,17 @@ class ReferencesManyInputComponent extends NgxMatEntityBaseInputComponent {
                 this.dropdownValues.splice(this.dropdownValues.indexOf(foundValue), 1);
             }
         }
+        this.filteredDropdownValues = LodashUtilities.cloneDeep(this.dropdownValues);
+    }
+    /**
+     * Filters the dropdown values.
+     * @param searchInput - The search input to filter for.
+     */
+    filterDropdownValues(searchInput) {
+        const filter = searchInput.toLowerCase();
+        this.filteredDropdownValues = LodashUtilities.cloneDeep(this.dropdownValues).filter(option => {
+            return option.displayName.toLowerCase().includes(filter) || option.value.toLowerCase().includes(filter);
+        });
     }
     /**
      * Gets the value to display in the column.
@@ -4914,6 +5049,7 @@ class ReferencesManyInputComponent extends NgxMatEntityBaseInputComponent {
         this.propertyValue.push(LodashUtilities.cloneDeep(this.input));
         const foundDropdownValue = this.dropdownValues.find(v => v.value === this.input);
         this.dropdownValues.splice(this.dropdownValues.indexOf(foundDropdownValue), 1);
+        this.filteredDropdownValues = LodashUtilities.cloneDeep(this.dropdownValues);
         this.referencedEntitiesDataSource.data = this.propertyValue;
         this.input = '';
         this.emitChange();
@@ -4924,6 +5060,7 @@ class ReferencesManyInputComponent extends NgxMatEntityBaseInputComponent {
             this.propertyValue = undefined;
         }
         this.dropdownValues = [];
+        this.filteredDropdownValues = LodashUtilities.cloneDeep(this.dropdownValues);
         this.referencedEntitiesDataSource.data = this.propertyValue ?? [];
         this.input = '';
         this.emitChange();
@@ -4936,19 +5073,21 @@ class ReferencesManyInputComponent extends NgxMatEntityBaseInputComponent {
                 this.dropdownValues.push(foundDropdownValue);
             }
         });
+        this.filteredDropdownValues = LodashUtilities.cloneDeep(this.dropdownValues);
         if (!this.propertyValue?.length) {
             this.propertyValue = undefined;
         }
         this.referencedEntitiesDataSource.data = this.propertyValue ?? [];
         this.selection.clear();
+        this.input = '';
         this.emitChange();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: ReferencesManyInputComponent, deps: [{ token: i0.EnvironmentInjector }, { token: NGX_INTERNAL_GLOBAL_DEFAULT_VALUES }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: ReferencesManyInputComponent, selector: "references-many-input", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<div class=\"mat-elevation-z8 elevation-container\">\n    <div class=\"array-headline\">\n        <b>{{metadata.displayName}}</b>\n    </div>\n\n    <mat-form-field>\n        <mat-label>{{metadata.dropdownLabel}}</mat-label>\n        <mat-select #inputModel=\"ngModel\" [name]=\"name + 'input'\" [disabled]=\"isReadOnly\" [(ngModel)]=\"input\">\n            <mat-option>-</mat-option>\n            <mat-option *ngFor=\"let value of dropdownValues\" [value]=\"value.value\">{{value.displayName}}</mat-option>\n        </mat-select>\n        <mat-error>{{getValidationErrorMessage(inputModel)}}</mat-error>\n    </mat-form-field>\n\n    <button *ngIf=\"metadata.addAll\" type=\"button\" style=\"margin-left: 20px;\" mat-raised-button [disabled]=\"!dropdownValues.length || isReadOnly\" (click)=\"addAll()\">\n        {{metadata.addAllButtonLabel}}\n    </button>\n\n    <div class=\"buttons\">\n        <button type=\"button\" mat-raised-button [disabled]=\"!input\" (click)=\"add()\">\n            {{metadata.addButtonLabel}}\n        </button>\n        <button type=\"button\" mat-raised-button [disabled]=\"!selection.selected.length\" (click)=\"remove()\">\n            {{metadata.removeButtonLabel}}\n        </button>\n    </div>\n\n    <mat-table [dataSource]=\"referencedEntitiesDataSource\">\n        <!-- select Column -->\n        <ng-container *ngIf=\"!isReadOnly\" matColumnDef=\"select\">\n            <mat-header-cell *matHeaderCellDef>\n                <mat-checkbox\n                    [disabled]=\"!referencedEntitiesDataSource.data.length\" [checked]=\"selection.hasValue() && SelectionUtilities.isAllSelected(selection, referencedEntitiesDataSource)\"\n                    [indeterminate]=\"selection.hasValue() && !SelectionUtilities.isAllSelected(selection, referencedEntitiesDataSource)\"\n                    (change)=\"$event ? SelectionUtilities.masterToggle(selection, referencedEntitiesDataSource) : null\">\n                </mat-checkbox>\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let entity\">\n                <mat-checkbox [checked]=\"selection.isSelected(entity)\" (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(entity) : null\"></mat-checkbox>\n            </mat-cell>\n        </ng-container>\n    \n        <ng-container *ngFor=\"let dCol of metadata.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n            <mat-header-cell *matHeaderCellDef>\n                {{dCol.displayName}}\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let entityId\" class=\"entity\">\n                {{getDisplayColumnValue(entityId, dCol)}}\n            </mat-cell>\n        </ng-container>\n    \n        <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n        <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n    </mat-table>\n</div>", styles: [".mdc-data-table__row:last-child .mdc-data-table__cell{border-bottom:1px solid rgba(0,0,0,.12)}.elevation-container{border-radius:5px;padding:15px;margin-bottom:15px;margin-top:15px}.array-headline{padding-bottom:10px}.buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px}mat-table{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:25px}.mat-column-select{flex:0 0 75px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { 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.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i7$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i10.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i10.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i10.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i10.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i10.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i10.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i10.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i10.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i10.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i10.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: ReferencesManyInputComponent, selector: "references-many-input", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<div class=\"mat-elevation-z8 elevation-container\">\n    <div class=\"array-headline\">\n        <b>{{metadata.displayName}}</b>\n    </div>\n\n    <mat-form-field>\n        <mat-label>{{metadata.dropdownLabel}}</mat-label>\n        <mat-select #inputModel=\"ngModel\" [name]=\"name + 'input'\" [disabled]=\"isReadOnly\" [(ngModel)]=\"input\" (opened)=\"selectSearchInput.focus()\">\n            <mat-form-field class=\"select-search-input\">\n                <!-- eslint-disable-next-line angular/no-any -->\n                <input #selectSearchInput matInput (keyup)=\"filterDropdownValues($any($event.target).value)\">\n                <i matSuffix class=\"fas fa-search\"></i>\n            </mat-form-field>\n            <mat-option>-</mat-option>\n            <mat-option *ngIf=\"shouldDisplayCurrentValue\" [value]=\"currentDropdownValue?.value\">{{currentDropdownValue?.displayName}}</mat-option>\n        <mat-option *ngFor=\"let value of filteredDropdownValues\" [value]=\"value.value\">{{value.displayName}}</mat-option>\n        </mat-select>\n        <mat-error>{{getValidationErrorMessage(inputModel)}}</mat-error>\n    </mat-form-field>\n\n    <button *ngIf=\"metadata.addAll\" type=\"button\" style=\"margin-left: 20px;\" mat-raised-button [disabled]=\"!dropdownValues.length || isReadOnly\" (click)=\"addAll()\">\n        {{metadata.addAllButtonLabel}}\n    </button>\n\n    <div class=\"buttons\">\n        <button type=\"button\" mat-raised-button [disabled]=\"!input\" (click)=\"add()\">\n            {{metadata.addButtonLabel}}\n        </button>\n        <button type=\"button\" mat-raised-button [disabled]=\"!selection.selected.length\" (click)=\"remove()\">\n            {{metadata.removeButtonLabel}}\n        </button>\n    </div>\n\n    <mat-table [dataSource]=\"referencedEntitiesDataSource\">\n        <!-- select Column -->\n        <ng-container *ngIf=\"!isReadOnly\" matColumnDef=\"select\">\n            <mat-header-cell *matHeaderCellDef>\n                <mat-checkbox\n                    [disabled]=\"!referencedEntitiesDataSource.data.length\" [checked]=\"selection.hasValue() && SelectionUtilities.isAllSelected(selection, referencedEntitiesDataSource)\"\n                    [indeterminate]=\"selection.hasValue() && !SelectionUtilities.isAllSelected(selection, referencedEntitiesDataSource)\"\n                    (change)=\"$event ? SelectionUtilities.masterToggle(selection, referencedEntitiesDataSource) : null\">\n                </mat-checkbox>\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let entity\">\n                <mat-checkbox [checked]=\"selection.isSelected(entity)\" (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(entity) : null\"></mat-checkbox>\n            </mat-cell>\n        </ng-container>\n    \n        <ng-container *ngFor=\"let dCol of metadata.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n            <mat-header-cell *matHeaderCellDef>\n                {{dCol.displayName}}\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let entityId\" class=\"entity\">\n                {{getDisplayColumnValue(entityId, dCol)}}\n            </mat-cell>\n        </ng-container>\n    \n        <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n        <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n    </mat-table>\n</div>", styles: [".mdc-data-table__row:last-child .mdc-data-table__cell{border-bottom:1px solid rgba(0,0,0,.12)}.elevation-container{border-radius:5px;padding:15px;margin-bottom:15px;margin-top:15px}.array-headline{padding-bottom:10px}.buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px}mat-table{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:25px}.mat-column-select{flex:0 0 75px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { 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.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: ReferencesManyInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'references-many-input', template: "<!-- eslint-disable angular/no-call-expression -->\n<div class=\"mat-elevation-z8 elevation-container\">\n    <div class=\"array-headline\">\n        <b>{{metadata.displayName}}</b>\n    </div>\n\n    <mat-form-field>\n        <mat-label>{{metadata.dropdownLabel}}</mat-label>\n        <mat-select #inputModel=\"ngModel\" [name]=\"name + 'input'\" [disabled]=\"isReadOnly\" [(ngModel)]=\"input\">\n            <mat-option>-</mat-option>\n            <mat-option *ngFor=\"let value of dropdownValues\" [value]=\"value.value\">{{value.displayName}}</mat-option>\n        </mat-select>\n        <mat-error>{{getValidationErrorMessage(inputModel)}}</mat-error>\n    </mat-form-field>\n\n    <button *ngIf=\"metadata.addAll\" type=\"button\" style=\"margin-left: 20px;\" mat-raised-button [disabled]=\"!dropdownValues.length || isReadOnly\" (click)=\"addAll()\">\n        {{metadata.addAllButtonLabel}}\n    </button>\n\n    <div class=\"buttons\">\n        <button type=\"button\" mat-raised-button [disabled]=\"!input\" (click)=\"add()\">\n            {{metadata.addButtonLabel}}\n        </button>\n        <button type=\"button\" mat-raised-button [disabled]=\"!selection.selected.length\" (click)=\"remove()\">\n            {{metadata.removeButtonLabel}}\n        </button>\n    </div>\n\n    <mat-table [dataSource]=\"referencedEntitiesDataSource\">\n        <!-- select Column -->\n        <ng-container *ngIf=\"!isReadOnly\" matColumnDef=\"select\">\n            <mat-header-cell *matHeaderCellDef>\n                <mat-checkbox\n                    [disabled]=\"!referencedEntitiesDataSource.data.length\" [checked]=\"selection.hasValue() && SelectionUtilities.isAllSelected(selection, referencedEntitiesDataSource)\"\n                    [indeterminate]=\"selection.hasValue() && !SelectionUtilities.isAllSelected(selection, referencedEntitiesDataSource)\"\n                    (change)=\"$event ? SelectionUtilities.masterToggle(selection, referencedEntitiesDataSource) : null\">\n                </mat-checkbox>\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let entity\">\n                <mat-checkbox [checked]=\"selection.isSelected(entity)\" (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(entity) : null\"></mat-checkbox>\n            </mat-cell>\n        </ng-container>\n    \n        <ng-container *ngFor=\"let dCol of metadata.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n            <mat-header-cell *matHeaderCellDef>\n                {{dCol.displayName}}\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let entityId\" class=\"entity\">\n                {{getDisplayColumnValue(entityId, dCol)}}\n            </mat-cell>\n        </ng-container>\n    \n        <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n        <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n    </mat-table>\n</div>", styles: [".mdc-data-table__row:last-child .mdc-data-table__cell{border-bottom:1px solid rgba(0,0,0,.12)}.elevation-container{border-radius:5px;padding:15px;margin-bottom:15px;margin-top:15px}.array-headline{padding-bottom:10px}.buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px}mat-table{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:25px}.mat-column-select{flex:0 0 75px}\n"] }]
+            args: [{ selector: 'references-many-input', template: "<!-- eslint-disable angular/no-call-expression -->\n<div class=\"mat-elevation-z8 elevation-container\">\n    <div class=\"array-headline\">\n        <b>{{metadata.displayName}}</b>\n    </div>\n\n    <mat-form-field>\n        <mat-label>{{metadata.dropdownLabel}}</mat-label>\n        <mat-select #inputModel=\"ngModel\" [name]=\"name + 'input'\" [disabled]=\"isReadOnly\" [(ngModel)]=\"input\" (opened)=\"selectSearchInput.focus()\">\n            <mat-form-field class=\"select-search-input\">\n                <!-- eslint-disable-next-line angular/no-any -->\n                <input #selectSearchInput matInput (keyup)=\"filterDropdownValues($any($event.target).value)\">\n                <i matSuffix class=\"fas fa-search\"></i>\n            </mat-form-field>\n            <mat-option>-</mat-option>\n            <mat-option *ngIf=\"shouldDisplayCurrentValue\" [value]=\"currentDropdownValue?.value\">{{currentDropdownValue?.displayName}}</mat-option>\n        <mat-option *ngFor=\"let value of filteredDropdownValues\" [value]=\"value.value\">{{value.displayName}}</mat-option>\n        </mat-select>\n        <mat-error>{{getValidationErrorMessage(inputModel)}}</mat-error>\n    </mat-form-field>\n\n    <button *ngIf=\"metadata.addAll\" type=\"button\" style=\"margin-left: 20px;\" mat-raised-button [disabled]=\"!dropdownValues.length || isReadOnly\" (click)=\"addAll()\">\n        {{metadata.addAllButtonLabel}}\n    </button>\n\n    <div class=\"buttons\">\n        <button type=\"button\" mat-raised-button [disabled]=\"!input\" (click)=\"add()\">\n            {{metadata.addButtonLabel}}\n        </button>\n        <button type=\"button\" mat-raised-button [disabled]=\"!selection.selected.length\" (click)=\"remove()\">\n            {{metadata.removeButtonLabel}}\n        </button>\n    </div>\n\n    <mat-table [dataSource]=\"referencedEntitiesDataSource\">\n        <!-- select Column -->\n        <ng-container *ngIf=\"!isReadOnly\" matColumnDef=\"select\">\n            <mat-header-cell *matHeaderCellDef>\n                <mat-checkbox\n                    [disabled]=\"!referencedEntitiesDataSource.data.length\" [checked]=\"selection.hasValue() && SelectionUtilities.isAllSelected(selection, referencedEntitiesDataSource)\"\n                    [indeterminate]=\"selection.hasValue() && !SelectionUtilities.isAllSelected(selection, referencedEntitiesDataSource)\"\n                    (change)=\"$event ? SelectionUtilities.masterToggle(selection, referencedEntitiesDataSource) : null\">\n                </mat-checkbox>\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let entity\">\n                <mat-checkbox [checked]=\"selection.isSelected(entity)\" (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(entity) : null\"></mat-checkbox>\n            </mat-cell>\n        </ng-container>\n    \n        <ng-container *ngFor=\"let dCol of metadata.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n            <mat-header-cell *matHeaderCellDef>\n                {{dCol.displayName}}\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let entityId\" class=\"entity\">\n                {{getDisplayColumnValue(entityId, dCol)}}\n            </mat-cell>\n        </ng-container>\n    \n        <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n        <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n    </mat-table>\n</div>", styles: [".mdc-data-table__row:last-child .mdc-data-table__cell{border-bottom:1px solid rgba(0,0,0,.12)}.elevation-container{border-radius:5px;padding:15px;margin-bottom:15px;margin-top:15px}.array-headline{padding-bottom:10px}.buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px}mat-table{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:25px}.mat-column-select{flex:0 0 75px}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.EnvironmentInjector }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [NGX_INTERNAL_GLOBAL_DEFAULT_VALUES]
@@ -4957,12 +5096,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImpor
 /* eslint-disable jsdoc/require-jsdoc */
 // eslint-disable-next-line angular/prefer-standalone-component
 class StringAutocompleteInputComponent extends NgxMatEntityBaseInputComponent {
-    autocompleteStrings;
+    injector;
+    autocompleteStrings = [];
     filteredAutocompleteStrings;
-    ngOnInit() {
+    constructor(injector) {
+        super();
+        this.injector = injector;
+    }
+    async ngOnInit() {
         super.ngOnInit();
-        this.autocompleteStrings = this.metadata.autocompleteValues;
-        this.filteredAutocompleteStrings = LodashUtilities.cloneDeep(this.autocompleteStrings);
+        await runInInjectionContext(this.injector, async () => {
+            this.autocompleteStrings = await this.metadata.autocompleteValues(this.entity);
+            this.filteredAutocompleteStrings = LodashUtilities.cloneDeep(this.autocompleteStrings);
+        });
     }
     /**
      * Dynamically filters the Autocomplete options when the user inputs something.
@@ -4975,29 +5121,55 @@ class StringAutocompleteInputComponent extends NgxMatEntityBaseInputComponent {
             this.filteredAutocompleteStrings = LodashUtilities.cloneDeep(this.autocompleteStrings);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: StringAutocompleteInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: StringAutocompleteInputComponent, selector: "string-autocomplete-input", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <input\n        #model=\"ngModel\"\n        matInput\n        [name]=\"name\"\n        [matAutocomplete]=\"auto\"\n        [required]=\"metadata.required(entity)\"\n        [minlength]=\"metadata.minLength ?? null\"\n        [maxlength]=\"metadata.maxLength ?? null\"\n        [pattern]=\"metadata.regex ?? '[\\\\s\\\\S]*'\"\n        [disabled]=\"isReadOnly\"\n        [includedIn]=\"metadata.restrictToOptions ? autocompleteStrings : undefined\"\n        [(ngModel)]=\"propertyValue\"\n        (keyup)=\"filterAutocompleteStrings(propertyValue)\"\n        (ngModelChange)=\"emitChange()\"\n    >\n    <mat-autocomplete #auto=\"matAutocomplete\">\n        <mat-option *ngFor=\"let value of filteredAutocompleteStrings\" [value]=\"value\">\n            {{value}}\n        </mat-option>\n    </mat-autocomplete>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IncludedInValidatorDirective, selector: "[includedIn]", inputs: ["includedIn"] }, { kind: "component", type: i4$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i4$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: StringAutocompleteInputComponent, deps: [{ token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: StringAutocompleteInputComponent, selector: "string-autocomplete-input", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<mat-form-field *ngIf=\"autocompleteStrings.length\">\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <input\n        #model=\"ngModel\"\n        matInput\n        [name]=\"name\"\n        [matAutocomplete]=\"auto\"\n        [required]=\"metadata.required(entity)\"\n        [minlength]=\"metadata.minLength ?? null\"\n        [maxlength]=\"metadata.maxLength ?? null\"\n        [pattern]=\"metadata.regex ?? '[\\\\s\\\\S]*'\"\n        [disabled]=\"isReadOnly\"\n        [includedIn]=\"metadata.restrictToOptions ? autocompleteStrings : undefined\"\n        [(ngModel)]=\"propertyValue\"\n        (keyup)=\"filterAutocompleteStrings(propertyValue)\"\n        (ngModelChange)=\"emitChange()\"\n    >\n    <mat-autocomplete #auto=\"matAutocomplete\">\n        <mat-option *ngFor=\"let value of filteredAutocompleteStrings\" [value]=\"value\">\n            {{value}}\n        </mat-option>\n    </mat-autocomplete>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IncludedInValidatorDirective, selector: "[includedIn]", inputs: ["includedIn"] }, { kind: "component", type: i4$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i4$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: StringAutocompleteInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'string-autocomplete-input', template: "<!-- eslint-disable angular/no-call-expression -->\n<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <input\n        #model=\"ngModel\"\n        matInput\n        [name]=\"name\"\n        [matAutocomplete]=\"auto\"\n        [required]=\"metadata.required(entity)\"\n        [minlength]=\"metadata.minLength ?? null\"\n        [maxlength]=\"metadata.maxLength ?? null\"\n        [pattern]=\"metadata.regex ?? '[\\\\s\\\\S]*'\"\n        [disabled]=\"isReadOnly\"\n        [includedIn]=\"metadata.restrictToOptions ? autocompleteStrings : undefined\"\n        [(ngModel)]=\"propertyValue\"\n        (keyup)=\"filterAutocompleteStrings(propertyValue)\"\n        (ngModelChange)=\"emitChange()\"\n    >\n    <mat-autocomplete #auto=\"matAutocomplete\">\n        <mat-option *ngFor=\"let value of filteredAutocompleteStrings\" [value]=\"value\">\n            {{value}}\n        </mat-option>\n    </mat-autocomplete>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"] }]
-        }] });
+            args: [{ selector: 'string-autocomplete-input', template: "<!-- eslint-disable angular/no-call-expression -->\n<mat-form-field *ngIf=\"autocompleteStrings.length\">\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <input\n        #model=\"ngModel\"\n        matInput\n        [name]=\"name\"\n        [matAutocomplete]=\"auto\"\n        [required]=\"metadata.required(entity)\"\n        [minlength]=\"metadata.minLength ?? null\"\n        [maxlength]=\"metadata.maxLength ?? null\"\n        [pattern]=\"metadata.regex ?? '[\\\\s\\\\S]*'\"\n        [disabled]=\"isReadOnly\"\n        [includedIn]=\"metadata.restrictToOptions ? autocompleteStrings : undefined\"\n        [(ngModel)]=\"propertyValue\"\n        (keyup)=\"filterAutocompleteStrings(propertyValue)\"\n        (ngModelChange)=\"emitChange()\"\n    >\n    <mat-autocomplete #auto=\"matAutocomplete\">\n        <mat-option *ngFor=\"let value of filteredAutocompleteStrings\" [value]=\"value\">\n            {{value}}\n        </mat-option>\n    </mat-autocomplete>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.EnvironmentInjector }]; } });
 
 /* eslint-disable jsdoc/require-jsdoc */
 // eslint-disable-next-line angular/prefer-standalone-component
 class StringDropdownInputComponent extends NgxMatEntityBaseInputComponent {
+    injector;
     dropdownValues = [];
+    filteredDropdownValues = [];
+    get currentDropdownValue() {
+        return LodashUtilities.cloneDeep(this.dropdownValues ?? [])
+            .find(v => v.value === this.propertyValue);
+    }
+    get shouldDisplayCurrentValue() {
+        return !!this.currentDropdownValue && !(!!this.filteredDropdownValues.find(v => v.value === this.currentDropdownValue?.value));
+    }
+    constructor(injector) {
+        super();
+        this.injector = injector;
+    }
     async ngOnInit() {
         super.ngOnInit();
-        this.dropdownValues = await this.metadata.dropdownValues(this.entity);
+        await runInInjectionContext(this.injector, async () => {
+            this.dropdownValues = await this.metadata.dropdownValues(this.entity);
+            this.filteredDropdownValues = LodashUtilities.cloneDeep(this.dropdownValues);
+        });
+    }
+    /**
+     * Filters the dropdown values.
+     * @param searchInput - The search input to filter for.
+     */
+    filterDropdownValues(searchInput) {
+        const filter = searchInput.toLowerCase();
+        this.filteredDropdownValues = LodashUtilities.cloneDeep(this.dropdownValues).filter(option => {
+            return option.displayName.toLowerCase().includes(filter) || option.value?.toLowerCase().includes(filter);
+        });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: StringDropdownInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: StringDropdownInputComponent, selector: "string-dropdown-input", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-select #model=\"ngModel\"\n        [name]=\"name\"\n        [required]=\"metadata.required(entity)\"\n        [disabled]=\"isReadOnly\"\n        [(ngModel)]=\"propertyValue\"\n        (selectionChange)=\"emitChange()\"\n    >\n        <mat-option *ngFor=\"let value of dropdownValues\" [value]=\"value.value\">{{value.displayName}}</mat-option>\n    </mat-select>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i7$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: StringDropdownInputComponent, deps: [{ token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: StringDropdownInputComponent, selector: "string-dropdown-input", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-select #model=\"ngModel\"\n        [name]=\"name\"\n        [required]=\"metadata.required(entity)\"\n        [disabled]=\"isReadOnly\"\n        [(ngModel)]=\"propertyValue\"\n        (selectionChange)=\"emitChange()\"\n        (opened)=\"selectSearchInput.focus()\"\n    >\n        <mat-form-field class=\"select-search-input\">\n            <!-- eslint-disable-next-line angular/no-any -->\n            <input #selectSearchInput matInput (keyup)=\"filterDropdownValues($any($event.target).value)\">\n            <i matSuffix class=\"fas fa-search\"></i>\n        </mat-form-field>\n        <mat-option *ngIf=\"!metadata.required(entity)\">-</mat-option>\n        <mat-option *ngIf=\"shouldDisplayCurrentValue\" [value]=\"currentDropdownValue?.value\">{{currentDropdownValue?.displayName}}</mat-option>\n        <mat-option *ngFor=\"let value of filteredDropdownValues\" [value]=\"value.value\">{{value.displayName}}</mat-option>\n    </mat-select>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: StringDropdownInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'string-dropdown-input', template: "<!-- eslint-disable angular/no-call-expression -->\n<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-select #model=\"ngModel\"\n        [name]=\"name\"\n        [required]=\"metadata.required(entity)\"\n        [disabled]=\"isReadOnly\"\n        [(ngModel)]=\"propertyValue\"\n        (selectionChange)=\"emitChange()\"\n    >\n        <mat-option *ngFor=\"let value of dropdownValues\" [value]=\"value.value\">{{value.displayName}}</mat-option>\n    </mat-select>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"] }]
-        }] });
+            args: [{ selector: 'string-dropdown-input', template: "<!-- eslint-disable angular/no-call-expression -->\n<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-select #model=\"ngModel\"\n        [name]=\"name\"\n        [required]=\"metadata.required(entity)\"\n        [disabled]=\"isReadOnly\"\n        [(ngModel)]=\"propertyValue\"\n        (selectionChange)=\"emitChange()\"\n        (opened)=\"selectSearchInput.focus()\"\n    >\n        <mat-form-field class=\"select-search-input\">\n            <!-- eslint-disable-next-line angular/no-any -->\n            <input #selectSearchInput matInput (keyup)=\"filterDropdownValues($any($event.target).value)\">\n            <i matSuffix class=\"fas fa-search\"></i>\n        </mat-form-field>\n        <mat-option *ngIf=\"!metadata.required(entity)\">-</mat-option>\n        <mat-option *ngIf=\"shouldDisplayCurrentValue\" [value]=\"currentDropdownValue?.value\">{{currentDropdownValue?.displayName}}</mat-option>\n        <mat-option *ngFor=\"let value of filteredDropdownValues\" [value]=\"value.value\">{{value.displayName}}</mat-option>\n    </mat-select>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.EnvironmentInjector }]; } });
 
 /* eslint-disable jsdoc/require-jsdoc */
 // eslint-disable-next-line angular/prefer-standalone-component
@@ -5011,11 +5183,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImpor
         }] });
 
 /* eslint-disable jsdoc/require-jsdoc */
+var PasswordStrength;
+(function (PasswordStrength) {
+    PasswordStrength["WEAK"] = "weak";
+    PasswordStrength["MEDIUM"] = "medium";
+    PasswordStrength["STRONG"] = "strong";
+})(PasswordStrength || (PasswordStrength = {}));
 // eslint-disable-next-line angular/prefer-standalone-component
 class StringPasswordInputComponent extends NgxMatEntityBaseInputComponent {
     hide = true;
     hideConfirm = true;
     confirmRequired = false;
+    passwordStrength;
+    PasswordStrength = PasswordStrength;
     get confirmPassword() {
         return ReflectUtilities.getMetadata(EntityUtilities.CONFIRM_PASSWORD_KEY, this.entity, this.key);
     }
@@ -5029,14 +5209,60 @@ class StringPasswordInputComponent extends NgxMatEntityBaseInputComponent {
     }
     passwordInput() {
         this.confirmRequired = Boolean(this.propertyValue);
+        this.setPasswordStrength();
         this.emitChange();
     }
+    setPasswordStrength() {
+        if (this.isPasswordStrong()) {
+            this.passwordStrength = PasswordStrength.STRONG;
+            return;
+        }
+        if (this.isPasswordMedium()) {
+            this.passwordStrength = PasswordStrength.MEDIUM;
+            return;
+        }
+        if (this.isPasswordWeak()) {
+            this.passwordStrength = PasswordStrength.WEAK;
+            return;
+        }
+        this.passwordStrength = undefined;
+    }
+    // long AND complex
+    isPasswordStrong() {
+        if (!this.propertyValue) {
+            return false;
+        }
+        return this.propertyValue?.length >= 15 && this.isPasswordComplex();
+    }
+    // long OR complex
+    isPasswordMedium() {
+        if (!this.propertyValue) {
+            return false;
+        }
+        return this.propertyValue?.length >= 15 || this.isPasswordComplex();
+    }
+    // exists
+    isPasswordWeak() {
+        if (!this.propertyValue) {
+            return false;
+        }
+        return true;
+    }
+    isPasswordComplex() {
+        if (!this.propertyValue) {
+            return false;
+        }
+        return /[A-Z]/g.test(this.propertyValue)
+            && /[a-z]/g.test(this.propertyValue)
+            && /[0-9]/g.test(this.propertyValue)
+            && /[!@#$%^&*(),.?":{}|<>]/.test(this.propertyValue);
+    }
     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: "<!-- eslint-disable angular/no-call-expression -->\n<div class=\"password-row\">\n    <mat-form-field>\n        <mat-label>{{metadata.displayName}}</mat-label>\n        <input\n            #model=\"ngModel\"\n            matInput\n            [type]=\"hide ? 'password' : 'text'\"\n            [name]=\"name\"\n            [required]=\"metadata.required(entity)\"\n            [pattern]=\"metadata.regex ?? '[\\\\s\\\\S]*'\"\n            [minlength]=\"metadata.minLength ?? null\"\n            [maxlength]=\"metadata.maxLength ?? null\"\n            [disabled]=\"isReadOnly\"\n            [(ngModel)]=\"propertyValue\"\n            (ngModelChange)=\"passwordInput()\"\n        >\n        <button type=\"button\" mat-icon-button matSuffix (click)=\"hide = !hide\">\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            #confirmModel=\"ngModel\"\n            matInput\n            [type]=\"hideConfirm ? 'password' : 'text'\"\n            [name]=\"name + 'confirmPassword'\"\n            [required]=\"confirmRequired\"\n            [disabled]=\"isReadOnly\"\n            [passwordMatch]=\"propertyValue\"\n            [(ngModel)]=\"confirmPassword\"\n            (ngModelChange)=\"passwordInput()\"\n        >\n        <button type=\"button\" mat-icon-button matSuffix (click)=\"hideConfirm = !hideConfirm\">\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.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.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: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: PasswordMatchValidatorDirective, selector: "[passwordMatch]", inputs: ["passwordMatch"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: StringPasswordInputComponent, selector: "string-password-input", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<div class=\"password-row\">\n    <mat-form-field>\n        <mat-label>{{metadata.displayName}}</mat-label>\n        <input\n            #model=\"ngModel\"\n            matInput\n            [type]=\"hide ? 'password' : 'text'\"\n            [name]=\"name\"\n            [required]=\"metadata.required(entity)\"\n            [pattern]=\"metadata.regex ?? '[\\\\s\\\\S]*'\"\n            [minlength]=\"metadata.minLength ?? null\"\n            [maxlength]=\"metadata.maxLength ?? null\"\n            [disabled]=\"isReadOnly\"\n            [(ngModel)]=\"propertyValue\"\n            (ngModelChange)=\"passwordInput()\"\n        >\n        <button type=\"button\" mat-icon-button matSuffix (click)=\"hide = !hide\">\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        <div *ngIf=\"passwordStrength\" class=\"password-strength-indicator\"\n            [class.green]=\"passwordStrength === PasswordStrength.STRONG\"\n            [class.yellow]=\"passwordStrength === PasswordStrength.MEDIUM\"\n            [class.red]=\"passwordStrength === PasswordStrength.WEAK\"\n        >\n        </div>\n    </mat-form-field>\n    <mat-form-field *ngIf=\"metadata.needsConfirmation\">\n        <mat-label>{{metadata.confirmationDisplayName}}</mat-label>\n        <input\n            #confirmModel=\"ngModel\"\n            matInput\n            [type]=\"hideConfirm ? 'password' : 'text'\"\n            [name]=\"name + 'confirmPassword'\"\n            [required]=\"confirmRequired\"\n            [disabled]=\"isReadOnly\"\n            [passwordMatch]=\"propertyValue\"\n            [(ngModel)]=\"confirmPassword\"\n            (ngModelChange)=\"passwordInput()\"\n        >\n        <button type=\"button\" mat-icon-button matSuffix (click)=\"hideConfirm = !hideConfirm\">\n            <div class=\"d-flex justify-content-center align-items-center\">\n                <i *ngIf=\"hideConfirm\" class=\"fas fa-eye-slash\"></i>\n                <!-- eslint-disable-next-line angular/cyclomatic-complexity -->\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}.password-strength-indicator{height:5px;width:100%}.green{background-color:green}.yellow{background-color:#b3b30f}.red{background-color:red}@media (max-width: 767px){.password-row{flex-wrap:wrap}.password-row mat-form-field{min-width:100%}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.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: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: 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: "<!-- eslint-disable angular/no-call-expression -->\n<div class=\"password-row\">\n    <mat-form-field>\n        <mat-label>{{metadata.displayName}}</mat-label>\n        <input\n            #model=\"ngModel\"\n            matInput\n            [type]=\"hide ? 'password' : 'text'\"\n            [name]=\"name\"\n            [required]=\"metadata.required(entity)\"\n            [pattern]=\"metadata.regex ?? '[\\\\s\\\\S]*'\"\n            [minlength]=\"metadata.minLength ?? null\"\n            [maxlength]=\"metadata.maxLength ?? null\"\n            [disabled]=\"isReadOnly\"\n            [(ngModel)]=\"propertyValue\"\n            (ngModelChange)=\"passwordInput()\"\n        >\n        <button type=\"button\" mat-icon-button matSuffix (click)=\"hide = !hide\">\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            #confirmModel=\"ngModel\"\n            matInput\n            [type]=\"hideConfirm ? 'password' : 'text'\"\n            [name]=\"name + 'confirmPassword'\"\n            [required]=\"confirmRequired\"\n            [disabled]=\"isReadOnly\"\n            [passwordMatch]=\"propertyValue\"\n            [(ngModel)]=\"confirmPassword\"\n            (ngModelChange)=\"passwordInput()\"\n        >\n        <button type=\"button\" mat-icon-button matSuffix (click)=\"hideConfirm = !hideConfirm\">\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"] }]
+            args: [{ selector: 'string-password-input', template: "<!-- eslint-disable angular/no-call-expression -->\n<div class=\"password-row\">\n    <mat-form-field>\n        <mat-label>{{metadata.displayName}}</mat-label>\n        <input\n            #model=\"ngModel\"\n            matInput\n            [type]=\"hide ? 'password' : 'text'\"\n            [name]=\"name\"\n            [required]=\"metadata.required(entity)\"\n            [pattern]=\"metadata.regex ?? '[\\\\s\\\\S]*'\"\n            [minlength]=\"metadata.minLength ?? null\"\n            [maxlength]=\"metadata.maxLength ?? null\"\n            [disabled]=\"isReadOnly\"\n            [(ngModel)]=\"propertyValue\"\n            (ngModelChange)=\"passwordInput()\"\n        >\n        <button type=\"button\" mat-icon-button matSuffix (click)=\"hide = !hide\">\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        <div *ngIf=\"passwordStrength\" class=\"password-strength-indicator\"\n            [class.green]=\"passwordStrength === PasswordStrength.STRONG\"\n            [class.yellow]=\"passwordStrength === PasswordStrength.MEDIUM\"\n            [class.red]=\"passwordStrength === PasswordStrength.WEAK\"\n        >\n        </div>\n    </mat-form-field>\n    <mat-form-field *ngIf=\"metadata.needsConfirmation\">\n        <mat-label>{{metadata.confirmationDisplayName}}</mat-label>\n        <input\n            #confirmModel=\"ngModel\"\n            matInput\n            [type]=\"hideConfirm ? 'password' : 'text'\"\n            [name]=\"name + 'confirmPassword'\"\n            [required]=\"confirmRequired\"\n            [disabled]=\"isReadOnly\"\n            [passwordMatch]=\"propertyValue\"\n            [(ngModel)]=\"confirmPassword\"\n            (ngModelChange)=\"passwordInput()\"\n        >\n        <button type=\"button\" mat-icon-button matSuffix (click)=\"hideConfirm = !hideConfirm\">\n            <div class=\"d-flex justify-content-center align-items-center\">\n                <i *ngIf=\"hideConfirm\" class=\"fas fa-eye-slash\"></i>\n                <!-- eslint-disable-next-line angular/cyclomatic-complexity -->\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}.password-strength-indicator{height:5px;width:100%}.green{background-color:green}.yellow{background-color:#b3b30f}.red{background-color:red}@media (max-width: 767px){.password-row{flex-wrap:wrap}.password-row mat-form-field{min-width:100%}}\n"] }]
         }] });
 
 /* eslint-disable jsdoc/require-jsdoc */
@@ -5310,6 +5536,10 @@ class NgxMatEntityInputComponent {
      * The possible references one dropdown values.
      */
     referencesOneDropdownValues;
+    /**
+     * The filtered dropdown values that get displayed in the references one dropdown input.
+     */
+    filteredReferencesOneDropdownValues;
     /**
      * A unique input name for the references one property.
      */
@@ -5330,6 +5560,25 @@ class NgxMatEntityInputComponent {
      * Provides functionality around material selections inside of tables.
      */
     SelectionUtilities = SelectionUtilities;
+    // eslint-disable-next-line jsdoc/require-returns
+    /**
+     * Gets the currently selected dropdown value for references one.
+     * Is needed so that the dropdown value will still be displayed,
+     * even when the filter method removes the value from the selectable dropdown values.
+     */
+    get currentReferencesOneDropdownValue() {
+        return LodashUtilities.cloneDeep(this.referencesOneDropdownValues ?? [])
+            .find(v => v.value === this.internalEntity[this.internalPropertyKey]);
+    }
+    // eslint-disable-next-line jsdoc/require-returns
+    /**
+     * Whether or not the currently selected references one value should be shown,
+     * although it would have been filtered out by the search.
+     */
+    get shouldDisplayCurrentReferencesOneDropdownValue() {
+        return !!this.currentReferencesOneDropdownValue
+            && !(!!this.filteredReferencesOneDropdownValues.find(v => v.value === this.currentReferencesOneDropdownValue?.value));
+    }
     constructor(dialog, injector, router, defaultGetValidationErrorMessage, globalConfig, http) {
         this.dialog = dialog;
         this.injector = injector;
@@ -5350,6 +5599,9 @@ class NgxMatEntityInputComponent {
                 return true;
             }
             const metadata = EntityUtilities.getPropertyMetadata(property, key);
+            if (!metadata) {
+                throw new Error(`No metadata was found for the key "${String(key)}"`);
+            }
             return metadata.isReadOnly(property);
         });
     }
@@ -5382,14 +5634,20 @@ class NgxMatEntityInputComponent {
         this.internalPropertyKey = this.propertyKey;
         this.internalGetValidationErrorMessage = this.getValidationErrorMessage ?? this.defaultGetValidationErrorMessage;
         this.internalIsReadOnly = this.isReadOnly ?? false;
-        this.type = EntityUtilities.getPropertyType(this.internalEntity, this.internalPropertyKey);
+        const foundType = EntityUtilities.getPropertyType(this.internalEntity, this.internalPropertyKey);
+        if (foundType == null) {
+            throw new Error(`No type was found for the key "${String(this.internalPropertyKey)}"`);
+        }
+        this.type = foundType;
         if (this.validEmpty === true) {
-            // eslint-disable-next-line max-len
             const currentMetadata = ReflectUtilities.getMetadata('metadata', this.internalEntity, this.internalPropertyKey);
-            // eslint-disable-next-line max-len
             ReflectUtilities.defineMetadata('metadata', { ...currentMetadata, required: defaultFalse }, this.internalEntity, this.internalPropertyKey);
         }
-        this.metadata = EntityUtilities.getPropertyMetadata(this.internalEntity, this.internalPropertyKey, this.type);
+        const foundMetadata = EntityUtilities.getPropertyMetadata(this.internalEntity, this.internalPropertyKey, this.type);
+        if (!foundMetadata) {
+            throw new Error(`No metadata was found for the key "${String(this.internalPropertyKey)}"`);
+        }
+        this.metadata = foundMetadata;
         switch (this.type) {
             case DecoratorTypes.OBJECT:
                 this.initObjectInput();
@@ -5412,11 +5670,21 @@ class NgxMatEntityInputComponent {
         this.referencesOneName = this.internalPropertyKey.toString() + 'input' + UUIDUtilities.create();
         void runInInjectionContext(this.injector, (async () => {
             this.referencesOneAllReferencedEntities = await this.metadataReferencesOne.getReferencedEntities();
-            // eslint-disable-next-line max-len
             this.referencesOneDropdownValues = this.metadataReferencesOne.getDropdownValues(LodashUtilities.cloneDeep(this.referencesOneAllReferencedEntities));
+            this.filteredReferencesOneDropdownValues = LodashUtilities.cloneDeep(this.referencesOneDropdownValues);
             this.setReferencesOneObject();
         }));
     }
+    /**
+     * Filters the references one dropdown values.
+     * @param searchInput - The search input to filter for.
+     */
+    filterReferencesOneValues(searchInput) {
+        const filter = searchInput.toLowerCase();
+        this.filteredReferencesOneDropdownValues = LodashUtilities.cloneDeep(this.referencesOneDropdownValues).filter(option => {
+            return option.displayName.toLowerCase().includes(filter) || option.value.toLowerCase().includes(filter);
+        });
+    }
     initHasMany() {
         this.metadata = new HasManyDecoratorConfigInternal(this.metadata, this.globalConfig);
         ReflectUtilities.defineMetadata('metadata', this.metadata, this.internalEntity, this.internalPropertyKey);
@@ -5439,7 +5707,6 @@ class NgxMatEntityInputComponent {
         }
         this.hasManyDataSource.sortingDataAccessor = (entity, header) => {
             return runInInjectionContext(this.injector, () => {
-                // eslint-disable-next-line max-len
                 return this.metadataHasMany.tableData.baseData.displayColumns.find((dp) => dp.displayName === header)?.value(entity);
             });
         };
@@ -5510,7 +5777,6 @@ class NgxMatEntityInputComponent {
         input.click();
     }
     importJson(file) {
-        // eslint-disable-next-line max-len
         const dialogData = new ConfirmDialogDataBuilder(this.globalConfig, this.hasManyImportAction.confirmDialogData)
             .withDefault('text', this.metadataHasMany.tableData.baseData.importActionData.confirmDialogData?.text)
             .withDefault('title', this.hasManyImportAction.displayName)
@@ -5530,7 +5796,6 @@ class NgxMatEntityInputComponent {
      * Sets the references one object using the input id.
      */
     setReferencesOneObject() {
-        // eslint-disable-next-line max-len
         const foundEntity = this.metadataReferencesOne.getEntityForId(this.internalEntity[this.internalPropertyKey], this.referencesOneAllReferencedEntities);
         this.referencesOneObject = new this.metadataReferencesOne.EntityClass(foundEntity);
         this.referencesOnePropertyTabs = EntityUtilities.getEntityTabs(this.referencesOneObject, this.injector);
@@ -5644,7 +5909,6 @@ class NgxMatEntityInputComponent {
         const res = await firstValueFrom(this.editHasManyDialogRef.afterClosed());
         if (res === 0) {
             const data = this.hasManyDataSource.data;
-            // eslint-disable-next-line max-len
             data[this.hasManyDataSource.data.findIndex((e) => e[this.hasManyEntityService.idKey] === entity[this.hasManyEntityService.idKey])] = entity;
             this.hasManyDataSource.data = data;
             this.hasManySelection.clear();
@@ -5662,7 +5926,6 @@ class NgxMatEntityInputComponent {
             this.dialogConfirmEditHasMany();
             return;
         }
-        // eslint-disable-next-line max-len
         const dialogData = new ConfirmDialogDataBuilder(this.globalConfig, this.metadataHasMany.tableData.editData.confirmEditDialogData)
             .withDefault('text', this.globalConfig.confirmSaveText)
             .withDefault('confirmButtonLabel', this.globalConfig.saveLabel)
@@ -5695,7 +5958,6 @@ class NgxMatEntityInputComponent {
             this.confirmDeleteHasManyEntity();
             return;
         }
-        // eslint-disable-next-line max-len
         const dialogData = new ConfirmDialogDataBuilder(this.globalConfig, this.metadataHasMany.tableData.editData.confirmDeleteDialogData)
             .withDefault('text', this.globalConfig.confirmDeleteText)
             .withDefault('type', 'delete')
@@ -5731,7 +5993,7 @@ class NgxMatEntityInputComponent {
      * @throws When no EntityClass was provided, as a new call is needed to initialize metadata.
      */
     createHasManyEntity() {
-        runInInjectionContext(this.injector, () => {
+        void runInInjectionContext(this.injector, async () => {
             if (this.metadataHasMany.tableData.baseData.allowCreate()) {
                 if (!this.metadataHasMany.tableData.baseData.EntityClass) {
                     throw new Error('No "EntityClass" specified for this table');
@@ -5746,17 +6008,17 @@ class NgxMatEntityInputComponent {
                     this.createHasManyDefaultPage();
                     return;
                 }
-                this.createHasManyDefaultDialog(entity);
+                await this.createHasManyDefaultDialog(entity);
             }
         });
     }
     createHasManyDefaultPage() {
         void this.router.navigateByUrl(this.hasManyEntityService.createBaseRoute);
     }
-    createHasManyDefaultDialog(entity) {
+    async createHasManyDefaultDialog(entity) {
         this.hasManyEntity = entity;
         this.hasManyCreateTabs = EntityUtilities.getEntityTabs(this.hasManyEntity, this.injector, true);
-        this.checkIsHasManyEntityValid('create');
+        await this.checkIsHasManyEntityValid('create');
         this.createHasManyDialogRef = this.dialog.open(this.createHasManyDialog, {
             minWidth: '60%',
             autoFocus: false,
@@ -5774,7 +6036,6 @@ class NgxMatEntityInputComponent {
             this.dialogConfirmCreateHasMany();
             return;
         }
-        // eslint-disable-next-line max-len
         const dialogData = new ConfirmDialogDataBuilder(this.globalConfig, this.metadataHasMany.tableData.createData.confirmCreateDialogData)
             .withDefault('text', this.globalConfig.confirmCreateText)
             .withDefault('confirmButtonLabel', this.globalConfig.createLabel)
@@ -5814,7 +6075,6 @@ class NgxMatEntityInputComponent {
             this.confirmRunHasManyTableAction(action);
             return;
         }
-        // eslint-disable-next-line max-len
         const defaultText = action.type === 'multi-select' ? this.globalConfig.confirmMultiSelectActionText(this.hasManySelection.selected) : this.globalConfig.confirmBaseActionText;
         const dialogData = new ConfirmDialogDataBuilder(this.globalConfig, action.confirmDialogData)
             .withDefault('text', defaultText)
@@ -5859,24 +6119,23 @@ class NgxMatEntityInputComponent {
      * Checks if the entity is valid for updating and if it is dirty.
      */
     async checkHasManyEntity() {
-        this.checkIsHasManyEntityValid('update');
+        await this.checkIsHasManyEntityValid('update');
         this.isHasManyEntityDirty = await EntityUtilities.isDirty(this.hasManyEntity, this.hasManyEntityPriorChanges, this.http);
     }
     /**
      * Checks if the entity is valid.
      * @param omit - Whether values omitted for create or update should be left out.
      */
-    checkIsHasManyEntityValid(omit) {
-        this.hasManyValidationErrors = ValidationUtilities.getEntityValidationErrors(this.hasManyEntity, omit);
-        // eslint-disable-next-line max-len
+    async checkIsHasManyEntityValid(omit) {
+        this.hasManyValidationErrors = await ValidationUtilities.getEntityValidationErrors(this.hasManyEntity, this.injector, omit);
         this.hasManyTooltipContent = runInInjectionContext(this.injector, () => getValidationErrorsTooltipContent(this.hasManyValidationErrors));
         this.isHasManyEntityValid = this.hasManyValidationErrors.length === 0;
     }
     /**
      * Checks whether the array item is valid and if the array item is dirty.
      */
-    checkArrayItem() {
-        this.checkIsArrayItemValid();
+    async checkArrayItem() {
+        await this.checkIsArrayItemValid();
         void this.checkIsArrayItemDirty();
     }
     /**
@@ -5888,9 +6147,8 @@ class NgxMatEntityInputComponent {
     /**
      * Checks if the arrayItem is valid.
      */
-    checkIsArrayItemValid() {
-        this.arrayItemValidationErrors = ValidationUtilities.getEntityValidationErrors(this.arrayItem, 'create');
-        // eslint-disable-next-line max-len
+    async checkIsArrayItemValid() {
+        this.arrayItemValidationErrors = await ValidationUtilities.getEntityValidationErrors(this.arrayItem, this.injector, 'create');
         this.arrayItemTooltipContent = runInInjectionContext(this.injector, () => getValidationErrorsTooltipContent(this.arrayItemValidationErrors));
         this.isArrayItemValid = this.arrayItemValidationErrors.length === 0;
     }
@@ -5906,6 +6164,7 @@ class NgxMatEntityInputComponent {
      * or in a separate dialog if it is set to false.
      */
     async addEntity() {
+        await this.checkIsArrayItemValid();
         if (this.metadataEntityArray.createInline) {
             if (!this.metadataEntityArray.allowDuplicates) {
                 for (const v of this.entityArrayValues) {
@@ -5923,7 +6182,7 @@ class NgxMatEntityInputComponent {
             this.entityArrayDataSource.data = this.entityArrayValues;
             EntityUtilities.resetChangesOnEntity(this.arrayItem, this.arrayItemPriorChanges);
             EntityUtilities.setDefaultValues(this.arrayItem);
-            this.checkIsArrayItemValid();
+            await this.checkIsArrayItemValid();
             this.emitChange();
         }
         else {
@@ -5932,27 +6191,26 @@ class NgxMatEntityInputComponent {
                 autoFocus: false,
                 restoreFocus: false
             });
-            this.checkIsArrayItemValid();
         }
     }
     /**
      * Adds the array item defined in the dialog.
      */
-    addArrayItem() {
+    async addArrayItem() {
         if (!this.isArrayItemValid) {
             return;
         }
         this.entityArrayValues.push(LodashUtilities.cloneDeep(this.arrayItem));
         this.entityArrayDataSource.data = this.entityArrayValues;
-        this.closeAddArrayItemDialog();
+        await this.closeAddArrayItemDialog();
     }
     /**
      * Cancels adding the array item defined in the dialog.
      */
-    closeAddArrayItemDialog() {
+    async closeAddArrayItemDialog() {
         this.addArrayItemDialogRef.close();
         EntityUtilities.resetChangesOnEntity(this.arrayItem, this.arrayItemPriorChanges);
-        this.checkIsArrayItemValid();
+        await this.checkIsArrayItemValid();
         this.emitChange();
     }
     /**
@@ -5960,14 +6218,14 @@ class NgxMatEntityInputComponent {
      * @param entity - The entity that has been clicked.
      * @param dCol - The display column that was clicked on.
      */
-    editArrayItem(entity, dCol) {
+    async editArrayItem(entity, dCol) {
         if (dCol.disableClick === true) {
             return;
         }
         this.indexOfEditedArrayItem = this.entityArrayValues.indexOf(entity);
         this.arrayItem = new this.metadataEntityArray.EntityClass(entity);
         this.arrayItemPriorChanges = LodashUtilities.cloneDeep(this.arrayItem);
-        this.checkArrayItem();
+        await this.checkArrayItem();
         this.editArrayItemDialogRef = this.dialog.open(this.editArrayItemDialog, {
             minWidth: '60%',
             autoFocus: false,
@@ -5980,16 +6238,16 @@ class NgxMatEntityInputComponent {
     saveArrayItem() {
         this.entityArrayValues[this.indexOfEditedArrayItem] = LodashUtilities.cloneDeep(this.arrayItem);
         this.entityArrayDataSource.data = this.entityArrayValues;
-        this.closeEditArrayItemDialog();
+        void this.closeEditArrayItemDialog();
     }
     /**
      * Closes the edit array item dialog and resets changes.
      */
-    closeEditArrayItemDialog() {
+    async closeEditArrayItemDialog() {
         this.editArrayItemDialogRef.close();
         this.arrayItem = new this.metadataEntityArray.EntityClass();
         this.arrayItemPriorChanges = LodashUtilities.cloneDeep(this.arrayItem);
-        this.checkArrayItem();
+        await this.checkArrayItem();
         this.emitChange();
     }
     /**
@@ -6000,11 +6258,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$2.Router }, { token: NGX_GET_VALIDATION_ERROR_MESSAGE }, { token: NGX_INTERNAL_GLOBAL_DEFAULT_VALUES }, { token: i2$1.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: "<!-- eslint-disable angular/no-call-expression -->\n \n<!-- eslint-disable angular/cyclomatic-complexity -->\n<div *ngIf=\"!(hideOmitForCreate && metadata.omitForCreate) && !(hideOmitForEdit && metadata.omitForUpdate)\" [ngSwitch]=\"type\">\n    <!-------------------------------------------->\n    <!-----------------Strings-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.STRING\">\n        <string-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </string-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_TEXTBOX\">\n        <string-textbox-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </string-textbox-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_AUTOCOMPLETE\">\n        <string-autocomplete-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </string-autocomplete-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_DROPDOWN\">\n        <string-dropdown-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </string-dropdown-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_PASSWORD\">\n        <string-password-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </string-password-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-----------------Booleans------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_CHECKBOX\">\n        <boolean-checkbox-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </boolean-checkbox-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_TOGGLE\">\n        <boolean-toggle-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </boolean-toggle-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_DROPDOWN\">\n        <boolean-dropdown-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </boolean-dropdown-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!------------------Numbers------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.NUMBER\">\n        <number-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </number-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.NUMBER_DROPDOWN\">\n        <number-dropdown-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </number-dropdown-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.NUMBER_SLIDER\">\n        <number-slider-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </number-slider-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Array-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_DATE\">\n        <array-date-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </array-date-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_DATE_TIME\">\n        <array-date-time-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </array-date-time-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_DATE_RANGE\">\n        <array-date-range-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </array-date-range-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_STRING_CHIPS\">\n        <array-string-chips-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </array-string-chips-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_STRING_AUTOCOMPLETE_CHIPS\">\n        <array-string-autocomplete-chips\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </array-string-autocomplete-chips>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Dates-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.DATE\">\n        <date-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </date-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.DATE_RANGE\">\n        <date-range-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </date-range-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.DATE_TIME\">\n        <date-time-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </date-time-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Files-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.FILE_DEFAULT\">\n        <file-default-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </file-default-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.FILE_IMAGE\">\n        <file-image-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </file-image-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------- references many ------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.REFERENCES_MANY\">\n        <references-many-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </references-many-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Custom------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.CUSTOM\">\n        <custom-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\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 *ngFor=\"let row of tab.rows;\" class=\"row\">\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]=\"EntityUtilities.getWidthClasses(objectProperty, key)\"\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 *ngFor=\"let row of objectPropertyTabs[0].rows\" class=\"row\">\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]=\"EntityUtilities.getWidthClasses(objectProperty, key)\"\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 #inputModel=\"ngModel\"\n                [name]=\"referencesOneName\"\n                [disabled]=\"internalIsReadOnly\"\n                [required]=\"metadata.required(entity)\"\n                [(ngModel)]=\"internalEntity[internalPropertyKey]\"\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 *ngFor=\"let row of tab.rows;\" class=\"row\">\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]=\"EntityUtilities.getWidthClasses(referencesOneObject, key)\"\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 *ngFor=\"let row of referencesOnePropertyTabs[0].rows\" class=\"row\">\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]=\"EntityUtilities.getWidthClasses(referencesOneObject, key)\"\n                    (inputChangeEvent)=\"emitChange()\"\n                >\n                </ngx-mat-entity-input>\n            </div>\n        </div>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Array-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY\" class=\"entityArray\">\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 *ngFor=\"let row of tab.rows\" class=\"row\">\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]=\"EntityUtilities.getWidthClasses(arrayItem, key)\"\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 *ngFor=\"let row of arrayItemInlineTabs[0].rows\" class=\"row\">\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]=\"EntityUtilities.getWidthClasses(arrayItem, key)\"\n                            (inputChangeEvent)=\"checkIsArrayItemValid()\"\n                        >\n                        </ngx-mat-entity-input>\n                    </div>\n                </div>\n            </div>\n\n            <div *ngIf=\"!internalIsReadOnly\" class=\"buttons\">\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 *ngIf=\"!internalIsReadOnly\" matColumnDef=\"select\">\n                    <mat-header-cell *matHeaderCellDef>\n                        <mat-checkbox\n                            [disabled]=\"!entityArrayDataSource.data.length\" [checked]=\"entityArraySelection.hasValue() && SelectionUtilities.isAllSelected(entityArraySelection, entityArrayDataSource)\"\n                            [indeterminate]=\"entityArraySelection.hasValue() && !SelectionUtilities.isAllSelected(entityArraySelection, entityArrayDataSource)\"\n                            (change)=\"$event ? SelectionUtilities.masterToggle(entityArraySelection, entityArrayDataSource) : null\">\n                        </mat-checkbox>\n                    </mat-header-cell>\n                    <mat-cell *matCellDef=\"let entity\">\n                        <mat-checkbox [checked]=\"entityArraySelection.isSelected(entity)\" (click)=\"$event.stopPropagation()\" (change)=\"$event ? entityArraySelection.toggle(entity) : null\"></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 *matCellDef=\"let entity\" [class.enabled]=\"!dCol.disableClick\" (click)=\"editArrayItem(entity, dCol)\">\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 *ngIf=\"metadataEntityArray.required(entity) && !entityArrayDataSource.data.length\" class=\"array-error\">\n                {{metadataEntityArray.missingErrorMessage}}\n            </div>\n        </div>\n    </div>\n\n    <!-------------------------------------------->\n    <!------------------ has many ---------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.HAS_MANY\" class=\"hasMany\">\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\" mat-raised-button [matMenuTriggerFor]=\"menu\">\n                    {{metadataHasMany.tableData.baseData.tableActionsLabel}}\n                </button>\n            </div>\n            <mat-menu #menu=\"matMenu\">\n                <button *ngIf=\"metadataHasMany.tableData.baseData.allowJsonImport\" type=\"button\" mat-menu-item [disabled]=\"hasManyTableActionDisabled(hasManyImportAction)\" (click)=\"runHasManyTableAction(hasManyImportAction)\">\n                    {{hasManyImportAction.displayName}}\n                </button>\n                <button *ngFor=\"let action of metadataHasMany.tableData.baseData.tableActions\" type=\"button\" mat-menu-item [disabled]=\"hasManyTableActionDisabled(action)\" (click)=\"runHasManyTableAction(action)\">\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\" mat-raised-button (click)=\"createHasManyEntity()\">\n                    {{metadataHasMany.tableData.baseData.createButtonLabel}}\n                </button>\n            </div>\n        </div>\n\n        <div class=\"mat-elevation-z8 elevation-container\">\n            <mat-table matSort [dataSource]=\"hasManyDataSource\">\n                <!-- select Column -->\n                <ng-container matColumnDef=\"select\">\n                    <mat-header-cell *matHeaderCellDef>\n                        <mat-checkbox [checked]=\"hasManySelection.hasValue() && SelectionUtilities.isAllSelected(hasManySelection, hasManyDataSource)\"\n                            [indeterminate]=\"hasManySelection.hasValue() && !SelectionUtilities.isAllSelected(hasManySelection, hasManyDataSource)\"\n                            (change)=\"$event ? SelectionUtilities.masterToggle(hasManySelection, hasManyDataSource) : null\">\n                        </mat-checkbox>\n                    </mat-header-cell>\n                    <mat-cell *matCellDef=\"let entity\" class=\"enabled\">\n                        <mat-checkbox [checked]=\"hasManySelection.isSelected(entity)\"\n                            (click)=\"$event.stopPropagation()\"\n                            (change)=\"$event ? hasManySelection.toggle(entity) : null\">\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 *matCellDef=\"let entity\"\n                        [class.enabled]=\"!dCol.disableClick && (hasManyAllowUpdate(entity) || hasManyAllowRead(entity))\"\n                        (click)=\"editHasManyEntity(entity, dCol)\"\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 *ngFor=\"let row of tab.rows\" class=\"row\">\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]=\"EntityUtilities.getWidthClasses(arrayItem, key)\"\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 *ngFor=\"let row of arrayItemDialogTabs[0].rows\" class=\"row\">\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]=\"EntityUtilities.getWidthClasses(arrayItem, key)\"\n                        (inputChangeEvent)=\"checkIsArrayItemValid()\"\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\" mat-raised-button matBadgeColor=\"warn\"\n                    [disabled]=\"!isArrayItemValid\"\n                    [matBadge]=\"arrayItemValidationErrors.length\"\n                    [matBadgeHidden]=\"!arrayItemValidationErrors.length\"\n                    (click)=\"addArrayItem()\"\n                >\n                    {{addArrayItemDialogData.createButtonLabel}}\n                </button>\n                <ngx-mat-entity-tooltip *ngIf=\"arrayItemValidationErrors.length\" [tooltipContent]=\"arrayItemTooltipContent\"></ngx-mat-entity-tooltip>\n            </div>\n            <button type=\"button\" mat-raised-button class=\"cancel-button\" (click)=\"closeAddArrayItemDialog()\">\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 *ngFor=\"let row of tab.rows\" class=\"row\">\n                        <ngx-mat-entity-input\n                            *ngFor=\"let key of row.keys\"\n                            [entity]=\"arrayItem\"\n                            [propertyKey]=\"key\"\n                            [hideOmitForEdit]=\"true\"\n                            [class]=\"EntityUtilities.getWidthClasses(arrayItem, key)\"\n                            [isReadOnly]=\"isPropertyReadOnly(arrayItem, key)\"\n                            (inputChangeEvent)=\"checkArrayItem()\"\n                        >\n                        </ngx-mat-entity-input>\n                    </div>\n                </mat-tab>\n            </mat-tab-group>\n        \n            <div *ngIf=\"arrayItemDialogTabs.length <= 1\">\n                <div *ngFor=\"let row of arrayItemDialogTabs[0].rows\" class=\"row\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"arrayItem\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForEdit]=\"true\"\n                        [class]=\"EntityUtilities.getWidthClasses(arrayItem, key)\"\n                        [isReadOnly]=\"isPropertyReadOnly(arrayItem, key)\"\n                        (inputChangeEvent)=\"checkArrayItem()\"\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\" mat-raised-button matBadgeColor=\"warn\"\n                [disabled]=\"internalIsReadOnly || !isArrayItemValid || !isArrayItemDirty\"\n                    [matBadge]=\"arrayItemValidationErrors.length\"\n                    [matBadgeHidden]=\"!arrayItemValidationErrors.length\"\n                    (click)=\"saveArrayItem()\"\n                >\n                    {{editArrayItemDialogData.confirmButtonLabel}}\n                </button>\n                <ngx-mat-entity-tooltip *ngIf=\"arrayItemValidationErrors.length\" [tooltipContent]=\"arrayItemTooltipContent\"></ngx-mat-entity-tooltip>\n            </div>\n            <button type=\"button\" mat-raised-button class=\"cancel-button\" (click)=\"closeEditArrayItemDialog()\">\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.createData.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 *ngFor=\"let row of tab.rows\" class=\"row\">\n                        <ngx-mat-entity-input\n                            *ngFor=\"let key of row.keys\"\n                            [entity]=\"hasManyEntity\"\n                            [propertyKey]=\"key\"\n                            [hideOmitForCreate]=\"true\"\n                            [class]=\"EntityUtilities.getWidthClasses(hasManyEntity, key)\"\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 *ngFor=\"let row of hasManyCreateTabs[0].rows\" class=\"row\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"hasManyEntity\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForCreate]=\"true\"\n                        [class]=\"EntityUtilities.getWidthClasses(hasManyEntity, key)\"\n                        (inputChangeEvent)=\"checkIsHasManyEntityValid('create')\"\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\" mat-raised-button matBadgeColor=\"warn\"\n                    [disabled]=\"!isHasManyEntityValid\"\n                    [matBadge]=\"hasManyValidationErrors.length\"\n                    [matBadgeHidden]=\"!hasManyValidationErrors.length\"\n                    (click)=\"dialogCreateHasMany()\"\n                >\n                    {{metadataHasMany.tableData.createData.createButtonLabel}}\n                </button>\n                <ngx-mat-entity-tooltip *ngIf=\"hasManyValidationErrors.length\" [tooltipContent]=\"hasManyTooltipContent\"></ngx-mat-entity-tooltip>\n            </div>\n            <button type=\"button\" mat-raised-button class=\"cancel-button\" (click)=\"dialogCancelCreateHasMany()\">\n                {{metadataHasMany.tableData.createData.cancelButtonLabel}}\n            </button>\n        </mat-dialog-actions>\n    </form>\n    \n</ng-template>\n\n<!--------------------------------------------------------->\n<!--------------------Edit Has Many Dialog----------------->\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\" mat-raised-button [matMenuTriggerFor]=\"menu\">\n                {{metadataHasMany.tableData.editData.actionsLabel}}\n            </button>\n            <mat-menu #menu=\"matMenu\">\n                <button *ngFor=\"let action of metadataHasMany.tableData.editData.actions\" type=\"button\" mat-menu-item [disabled]=\"hasManyEditActionDisabled(action)\" (click)=\"hasManyRunEditAction(action)\">\n                    {{action.displayName}}\n                </button>\n            </mat-menu>\n        \n            <button *ngIf=\"hasManyAllowDelete(hasManyEntity)\" type=\"button\" mat-raised-button color=\"warn\" class=\"delete-button\" tabindex=\"-1\" (click)=\"deleteHasManyEntity()\">\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 *ngFor=\"let row of tab.rows\" class=\"row\">\n                        <ngx-mat-entity-input\n                            *ngFor=\"let key of row.keys\"\n                            [entity]=\"hasManyEntity\"\n                            [propertyKey]=\"key\"\n                            [hideOmitForEdit]=\"true\"\n                            [class]=\"EntityUtilities.getWidthClasses(hasManyEntity, key)\"\n                            [isReadOnly]=\"isPropertyReadOnly(hasManyEntity, key)\"\n                            (inputChangeEvent)=\"checkHasManyEntity()\"\n                        >\n                        </ngx-mat-entity-input>\n                    </div>\n                </mat-tab>\n            </mat-tab-group>\n        \n            <div *ngIf=\"hasManyUpdateTabs.length <= 1\">\n                <div *ngFor=\"let row of hasManyUpdateTabs[0].rows\" class=\"row\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"hasManyEntity\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForEdit]=\"true\"\n                        [class]=\"EntityUtilities.getWidthClasses(hasManyEntity, key)\"\n                        [isReadOnly]=\"isPropertyReadOnly(hasManyEntity, key)\"\n                        (inputChangeEvent)=\"checkHasManyEntity()\"\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\" mat-raised-button matBadgeColor=\"warn\"\n                    [disabled]=\"internalIsReadOnly || !isHasManyEntityValid || !isHasManyEntityDirty\"\n                    [matBadge]=\"hasManyValidationErrors.length\"\n                    [matBadgeHidden]=\"!hasManyValidationErrors.length\"\n                    (click)=\"dialogEditHasMany()\"\n                >\n                    {{metadataHasMany.tableData.editData.confirmButtonLabel}}\n                </button>\n                <ngx-mat-entity-tooltip *ngIf=\"hasManyValidationErrors.length\" [tooltipContent]=\"hasManyTooltipContent\"></ngx-mat-entity-tooltip>\n            </div>\n            <button type=\"button\" mat-raised-button class=\"cancel-button\" (click)=\"dialogCancelEditHasMany()\">\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)}.actions-container{display:flex;gap:10px}::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: "component", type: DisplayColumnValueComponent, selector: "display-column-value", inputs: ["entity", "ComponentClass"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i8.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { 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.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { 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: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i13.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i13.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i13.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i14.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: i15.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i7$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: i17.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i17.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i10.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i10.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i10.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i10.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i10.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i10.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i10.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i10.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i10.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i10.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i5$1.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i5$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }, { kind: "component", type: TooltipComponent, selector: "ngx-mat-entity-tooltip", inputs: ["tooltipContent"] }, { kind: "component", type: ArrayDateInputComponent, selector: "array-date-input" }, { kind: "component", type: ArrayDateRangeInputComponent, selector: "array-date-range-input" }, { kind: "component", type: ArrayDateTimeInputComponent, selector: "array-date-time-input" }, { kind: "component", type: ArrayStringAutocompleteChipsComponent, selector: "array-string-autocomplete-chips" }, { kind: "component", type: ArrayStringChipsInputComponent, selector: "array-string-chips-input" }, { kind: "component", type: BooleanCheckboxInputComponent, selector: "boolean-checkbox-input" }, { kind: "component", type: BooleanDropdownInputComponent, selector: "boolean-dropdown-input" }, { kind: "component", type: BooleanToggleInputComponent, selector: "boolean-toggle-input" }, { kind: "component", type: CustomInputComponent, selector: "custom-input" }, { 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: FileDefaultInputComponent, selector: "file-default-input" }, { kind: "component", type: FileImageInputComponent, selector: "file-image-input" }, { kind: "component", type: NgxMatEntityInputComponent, selector: "ngx-mat-entity-input", inputs: ["entity", "propertyKey", "getValidationErrorMessage", "hideOmitForCreate", "hideOmitForEdit", "validEmpty", "isReadOnly"], outputs: ["inputChangeEvent"] }, { kind: "component", type: NumberDropdownInputComponent, selector: "number-dropdown-input" }, { kind: "component", type: NumberInputComponent, selector: "number-input" }, { kind: "component", type: NumberSliderInputComponent, selector: "number-slider-input" }, { kind: "component", type: ReferencesManyInputComponent, selector: "references-many-input" }, { kind: "component", type: StringAutocompleteInputComponent, selector: "string-autocomplete-input" }, { kind: "component", type: StringDropdownInputComponent, selector: "string-dropdown-input" }, { kind: "component", type: StringInputComponent, selector: "string-input" }, { kind: "component", type: StringPasswordInputComponent, selector: "string-password-input" }, { kind: "component", type: StringTextboxInputComponent, selector: "string-textbox-input" }] });
+    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: "<!-- eslint-disable angular/no-call-expression -->\n \n<!-- eslint-disable angular/cyclomatic-complexity -->\n<div *ngIf=\"!(hideOmitForCreate && metadata.omitForCreate) && !(hideOmitForEdit && metadata.omitForUpdate)\" [ngSwitch]=\"type\">\n    <!-------------------------------------------->\n    <!-----------------Strings-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.STRING\">\n        <string-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </string-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_TEXTBOX\">\n        <string-textbox-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </string-textbox-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_AUTOCOMPLETE\">\n        <string-autocomplete-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </string-autocomplete-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_DROPDOWN\">\n        <string-dropdown-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </string-dropdown-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_PASSWORD\">\n        <string-password-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </string-password-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-----------------Booleans------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_CHECKBOX\">\n        <boolean-checkbox-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </boolean-checkbox-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_TOGGLE\">\n        <boolean-toggle-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </boolean-toggle-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_DROPDOWN\">\n        <boolean-dropdown-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </boolean-dropdown-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!------------------Numbers------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.NUMBER\">\n        <number-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </number-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.NUMBER_DROPDOWN\">\n        <number-dropdown-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </number-dropdown-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.NUMBER_SLIDER\">\n        <number-slider-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </number-slider-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Array-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_DATE\">\n        <array-date-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </array-date-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_DATE_TIME\">\n        <array-date-time-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </array-date-time-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_DATE_RANGE\">\n        <array-date-range-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </array-date-range-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_STRING_CHIPS\">\n        <array-string-chips-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </array-string-chips-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_STRING_AUTOCOMPLETE_CHIPS\">\n        <array-string-autocomplete-chips\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </array-string-autocomplete-chips>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Dates-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.DATE\">\n        <date-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </date-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.DATE_RANGE\">\n        <date-range-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </date-range-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.DATE_TIME\">\n        <date-time-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </date-time-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Files-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.FILE_DEFAULT\">\n        <file-default-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </file-default-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.FILE_IMAGE\">\n        <file-image-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </file-image-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------- references many ------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.REFERENCES_MANY\">\n        <references-many-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </references-many-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Custom------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.CUSTOM\">\n        <custom-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\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 *ngFor=\"let row of tab.rows;\" class=\"row\">\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]=\"EntityUtilities.getWidthClasses(objectProperty, key)\"\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 *ngFor=\"let row of objectPropertyTabs[0].rows\" class=\"row\">\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]=\"EntityUtilities.getWidthClasses(objectProperty, key)\"\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 #inputModel=\"ngModel\"\n                [name]=\"referencesOneName\"\n                [disabled]=\"internalIsReadOnly\"\n                [required]=\"metadata.required(entity)\"\n                [(ngModel)]=\"internalEntity[internalPropertyKey]\"\n                (selectionChange)=\"setReferencesOneObject()\"\n                (opened)=\"selectSearchInput.focus()\"\n            >\n                <mat-form-field class=\"select-search-input\">\n                    <!-- eslint-disable-next-line angular/no-any -->\n                    <input #selectSearchInput matInput (keyup)=\"filterReferencesOneValues($any($event.target).value)\">\n                    <i matSuffix class=\"fas fa-search\"></i>\n                </mat-form-field>\n                <mat-option *ngIf=\"!metadata.required(entity)\">-</mat-option>\n                <mat-option *ngIf=\"shouldDisplayCurrentReferencesOneDropdownValue\" [value]=\"currentReferencesOneDropdownValue?.value\">{{currentReferencesOneDropdownValue?.displayName}}</mat-option>\n                <mat-option *ngFor=\"let value of filteredReferencesOneDropdownValues\" [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 *ngFor=\"let row of tab.rows;\" class=\"row\">\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]=\"EntityUtilities.getWidthClasses(referencesOneObject, key)\"\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 *ngFor=\"let row of referencesOnePropertyTabs[0].rows\" class=\"row\">\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]=\"EntityUtilities.getWidthClasses(referencesOneObject, key)\"\n                    (inputChangeEvent)=\"emitChange()\"\n                >\n                </ngx-mat-entity-input>\n            </div>\n        </div>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Array-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY\" class=\"entityArray\">\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 *ngFor=\"let row of tab.rows\" class=\"row\">\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]=\"EntityUtilities.getWidthClasses(arrayItem, key)\"\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 *ngFor=\"let row of arrayItemInlineTabs[0].rows\" class=\"row\">\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]=\"EntityUtilities.getWidthClasses(arrayItem, key)\"\n                            (inputChangeEvent)=\"checkIsArrayItemValid()\"\n                        >\n                        </ngx-mat-entity-input>\n                    </div>\n                </div>\n            </div>\n\n            <div *ngIf=\"!internalIsReadOnly\" class=\"buttons\">\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 *ngIf=\"!internalIsReadOnly\" matColumnDef=\"select\">\n                    <mat-header-cell *matHeaderCellDef>\n                        <mat-checkbox\n                            [disabled]=\"!entityArrayDataSource.data.length\" [checked]=\"entityArraySelection.hasValue() && SelectionUtilities.isAllSelected(entityArraySelection, entityArrayDataSource)\"\n                            [indeterminate]=\"entityArraySelection.hasValue() && !SelectionUtilities.isAllSelected(entityArraySelection, entityArrayDataSource)\"\n                            (change)=\"$event ? SelectionUtilities.masterToggle(entityArraySelection, entityArrayDataSource) : null\">\n                        </mat-checkbox>\n                    </mat-header-cell>\n                    <mat-cell *matCellDef=\"let entity\">\n                        <mat-checkbox [checked]=\"entityArraySelection.isSelected(entity)\" (click)=\"$event.stopPropagation()\" (change)=\"$event ? entityArraySelection.toggle(entity) : null\"></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 *matCellDef=\"let entity\" [class.enabled]=\"!dCol.disableClick\" (click)=\"editArrayItem(entity, dCol)\">\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 *ngIf=\"metadataEntityArray.required(entity) && !entityArrayDataSource.data.length\" class=\"array-error\">\n                {{metadataEntityArray.missingErrorMessage}}\n            </div>\n        </div>\n    </div>\n\n    <!-------------------------------------------->\n    <!------------------ has many ---------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.HAS_MANY\" class=\"hasMany\">\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\" mat-raised-button [matMenuTriggerFor]=\"menu\">\n                    {{metadataHasMany.tableData.baseData.tableActionsLabel}}\n                </button>\n            </div>\n            <mat-menu #menu=\"matMenu\">\n                <button *ngIf=\"metadataHasMany.tableData.baseData.allowJsonImport\" type=\"button\" mat-menu-item [disabled]=\"hasManyTableActionDisabled(hasManyImportAction)\" (click)=\"runHasManyTableAction(hasManyImportAction)\">\n                    {{hasManyImportAction.displayName}}\n                </button>\n                <button *ngFor=\"let action of metadataHasMany.tableData.baseData.tableActions\" type=\"button\" mat-menu-item [disabled]=\"hasManyTableActionDisabled(action)\" (click)=\"runHasManyTableAction(action)\">\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\" mat-raised-button (click)=\"createHasManyEntity()\">\n                    {{metadataHasMany.tableData.baseData.createButtonLabel}}\n                </button>\n            </div>\n        </div>\n\n        <div class=\"mat-elevation-z8 elevation-container\">\n            <mat-table matSort [dataSource]=\"hasManyDataSource\">\n                <!-- select Column -->\n                <ng-container matColumnDef=\"select\">\n                    <mat-header-cell *matHeaderCellDef>\n                        <mat-checkbox [checked]=\"hasManySelection.hasValue() && SelectionUtilities.isAllSelected(hasManySelection, hasManyDataSource)\"\n                            [indeterminate]=\"hasManySelection.hasValue() && !SelectionUtilities.isAllSelected(hasManySelection, hasManyDataSource)\"\n                            (change)=\"$event ? SelectionUtilities.masterToggle(hasManySelection, hasManyDataSource) : null\">\n                        </mat-checkbox>\n                    </mat-header-cell>\n                    <mat-cell *matCellDef=\"let entity\" class=\"enabled\">\n                        <mat-checkbox [checked]=\"hasManySelection.isSelected(entity)\"\n                            (click)=\"$event.stopPropagation()\"\n                            (change)=\"$event ? hasManySelection.toggle(entity) : null\">\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 *matCellDef=\"let entity\"\n                        [class.enabled]=\"!dCol.disableClick && (hasManyAllowUpdate(entity) || hasManyAllowRead(entity))\"\n                        (click)=\"editHasManyEntity(entity, dCol)\"\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 *ngFor=\"let row of tab.rows\" class=\"row\">\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]=\"EntityUtilities.getWidthClasses(arrayItem, key)\"\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 *ngFor=\"let row of arrayItemDialogTabs[0].rows\" class=\"row\">\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]=\"EntityUtilities.getWidthClasses(arrayItem, key)\"\n                        (inputChangeEvent)=\"checkIsArrayItemValid()\"\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\" mat-raised-button matBadgeColor=\"warn\"\n                    [disabled]=\"!isArrayItemValid\"\n                    [matBadge]=\"arrayItemValidationErrors.length\"\n                    [matBadgeHidden]=\"!arrayItemValidationErrors.length\"\n                    (click)=\"addArrayItem()\"\n                >\n                    {{addArrayItemDialogData.createButtonLabel}}\n                </button>\n                <ngx-mat-entity-tooltip *ngIf=\"arrayItemValidationErrors.length\" [tooltipContent]=\"arrayItemTooltipContent\"></ngx-mat-entity-tooltip>\n            </div>\n            <button type=\"button\" mat-raised-button class=\"cancel-button\" (click)=\"closeAddArrayItemDialog()\">\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 *ngFor=\"let row of tab.rows\" class=\"row\">\n                        <ngx-mat-entity-input\n                            *ngFor=\"let key of row.keys\"\n                            [entity]=\"arrayItem\"\n                            [propertyKey]=\"key\"\n                            [hideOmitForEdit]=\"true\"\n                            [class]=\"EntityUtilities.getWidthClasses(arrayItem, key)\"\n                            [isReadOnly]=\"isPropertyReadOnly(arrayItem, key)\"\n                            (inputChangeEvent)=\"checkArrayItem()\"\n                        >\n                        </ngx-mat-entity-input>\n                    </div>\n                </mat-tab>\n            </mat-tab-group>\n        \n            <div *ngIf=\"arrayItemDialogTabs.length <= 1\">\n                <div *ngFor=\"let row of arrayItemDialogTabs[0].rows\" class=\"row\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"arrayItem\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForEdit]=\"true\"\n                        [class]=\"EntityUtilities.getWidthClasses(arrayItem, key)\"\n                        [isReadOnly]=\"isPropertyReadOnly(arrayItem, key)\"\n                        (inputChangeEvent)=\"checkArrayItem()\"\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\" mat-raised-button matBadgeColor=\"warn\"\n                [disabled]=\"internalIsReadOnly || !isArrayItemValid || !isArrayItemDirty\"\n                    [matBadge]=\"arrayItemValidationErrors.length\"\n                    [matBadgeHidden]=\"!arrayItemValidationErrors.length\"\n                    (click)=\"saveArrayItem()\"\n                >\n                    {{editArrayItemDialogData.confirmButtonLabel}}\n                </button>\n                <ngx-mat-entity-tooltip *ngIf=\"arrayItemValidationErrors.length\" [tooltipContent]=\"arrayItemTooltipContent\"></ngx-mat-entity-tooltip>\n            </div>\n            <button type=\"button\" mat-raised-button class=\"cancel-button\" (click)=\"closeEditArrayItemDialog()\">\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.createData.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 *ngFor=\"let row of tab.rows\" class=\"row\">\n                        <ngx-mat-entity-input\n                            *ngFor=\"let key of row.keys\"\n                            [entity]=\"hasManyEntity\"\n                            [propertyKey]=\"key\"\n                            [hideOmitForCreate]=\"true\"\n                            [class]=\"EntityUtilities.getWidthClasses(hasManyEntity, key)\"\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 *ngFor=\"let row of hasManyCreateTabs[0].rows\" class=\"row\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"hasManyEntity\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForCreate]=\"true\"\n                        [class]=\"EntityUtilities.getWidthClasses(hasManyEntity, key)\"\n                        (inputChangeEvent)=\"checkIsHasManyEntityValid('create')\"\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\" mat-raised-button matBadgeColor=\"warn\"\n                    [disabled]=\"!isHasManyEntityValid\"\n                    [matBadge]=\"hasManyValidationErrors.length\"\n                    [matBadgeHidden]=\"!hasManyValidationErrors.length\"\n                    (click)=\"dialogCreateHasMany()\"\n                >\n                    {{metadataHasMany.tableData.createData.createButtonLabel}}\n                </button>\n                <ngx-mat-entity-tooltip *ngIf=\"hasManyValidationErrors.length\" [tooltipContent]=\"hasManyTooltipContent\"></ngx-mat-entity-tooltip>\n            </div>\n            <button type=\"button\" mat-raised-button class=\"cancel-button\" (click)=\"dialogCancelCreateHasMany()\">\n                {{metadataHasMany.tableData.createData.cancelButtonLabel}}\n            </button>\n        </mat-dialog-actions>\n    </form>\n    \n</ng-template>\n\n<!--------------------------------------------------------->\n<!--------------------Edit Has Many Dialog----------------->\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\" mat-raised-button [matMenuTriggerFor]=\"menu\">\n                {{metadataHasMany.tableData.editData.actionsLabel}}\n            </button>\n            <mat-menu #menu=\"matMenu\">\n                <button *ngFor=\"let action of metadataHasMany.tableData.editData.actions\" type=\"button\" mat-menu-item [disabled]=\"hasManyEditActionDisabled(action)\" (click)=\"hasManyRunEditAction(action)\">\n                    {{action.displayName}}\n                </button>\n            </mat-menu>\n        \n            <button *ngIf=\"hasManyAllowDelete(hasManyEntity)\" type=\"button\" mat-raised-button color=\"warn\" class=\"delete-button\" tabindex=\"-1\" (click)=\"deleteHasManyEntity()\">\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 *ngFor=\"let row of tab.rows\" class=\"row\">\n                        <ngx-mat-entity-input\n                            *ngFor=\"let key of row.keys\"\n                            [entity]=\"hasManyEntity\"\n                            [propertyKey]=\"key\"\n                            [hideOmitForEdit]=\"true\"\n                            [class]=\"EntityUtilities.getWidthClasses(hasManyEntity, key)\"\n                            [isReadOnly]=\"isPropertyReadOnly(hasManyEntity, key)\"\n                            (inputChangeEvent)=\"checkHasManyEntity()\"\n                        >\n                        </ngx-mat-entity-input>\n                    </div>\n                </mat-tab>\n            </mat-tab-group>\n        \n            <div *ngIf=\"hasManyUpdateTabs.length <= 1\">\n                <div *ngFor=\"let row of hasManyUpdateTabs[0].rows\" class=\"row\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"hasManyEntity\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForEdit]=\"true\"\n                        [class]=\"EntityUtilities.getWidthClasses(hasManyEntity, key)\"\n                        [isReadOnly]=\"isPropertyReadOnly(hasManyEntity, key)\"\n                        (inputChangeEvent)=\"checkHasManyEntity()\"\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\" mat-raised-button matBadgeColor=\"warn\"\n                    [disabled]=\"internalIsReadOnly || !isHasManyEntityValid || !isHasManyEntityDirty\"\n                    [matBadge]=\"hasManyValidationErrors.length\"\n                    [matBadgeHidden]=\"!hasManyValidationErrors.length\"\n                    (click)=\"dialogEditHasMany()\"\n                >\n                    {{metadataHasMany.tableData.editData.confirmButtonLabel}}\n                </button>\n                <ngx-mat-entity-tooltip *ngIf=\"hasManyValidationErrors.length\" [tooltipContent]=\"hasManyTooltipContent\"></ngx-mat-entity-tooltip>\n            </div>\n            <button type=\"button\" mat-raised-button class=\"cancel-button\" (click)=\"dialogCancelEditHasMany()\">\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)}.actions-container{display:flex;gap:10px}::ng-deep .mat-mdc-form-field-has-icon-suffix .mat-mdc-text-field-wrapper{padding-right:16px}::ng-deep .select-search-input{max-width:100%;margin-top:-8px;margin-bottom:8px}::ng-deep .select-search-input .mat-mdc-form-field-subscript-wrapper{display:none}::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: "component", type: DisplayColumnValueComponent, selector: "display-column-value", inputs: ["entity", "ComponentClass"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i8.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { 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.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { 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: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i13.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i13.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i13.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i14.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: i15.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i6$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: i17.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i17.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i5$1.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i5$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }, { kind: "component", type: TooltipComponent, selector: "ngx-mat-entity-tooltip", inputs: ["tooltipContent"] }, { kind: "component", type: ArrayDateInputComponent, selector: "array-date-input" }, { kind: "component", type: ArrayDateRangeInputComponent, selector: "array-date-range-input" }, { kind: "component", type: ArrayDateTimeInputComponent, selector: "array-date-time-input" }, { kind: "component", type: ArrayStringAutocompleteChipsComponent, selector: "array-string-autocomplete-chips" }, { kind: "component", type: ArrayStringChipsInputComponent, selector: "array-string-chips-input" }, { kind: "component", type: BooleanCheckboxInputComponent, selector: "boolean-checkbox-input" }, { kind: "component", type: BooleanDropdownInputComponent, selector: "boolean-dropdown-input" }, { kind: "component", type: BooleanToggleInputComponent, selector: "boolean-toggle-input" }, { kind: "component", type: CustomInputComponent, selector: "custom-input" }, { 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: FileDefaultInputComponent, selector: "file-default-input" }, { kind: "component", type: FileImageInputComponent, selector: "file-image-input" }, { kind: "component", type: NgxMatEntityInputComponent, selector: "ngx-mat-entity-input", inputs: ["entity", "propertyKey", "getValidationErrorMessage", "hideOmitForCreate", "hideOmitForEdit", "validEmpty", "isReadOnly"], outputs: ["inputChangeEvent"] }, { kind: "component", type: NumberDropdownInputComponent, selector: "number-dropdown-input" }, { kind: "component", type: NumberInputComponent, selector: "number-input" }, { kind: "component", type: NumberSliderInputComponent, selector: "number-slider-input" }, { kind: "component", type: ReferencesManyInputComponent, selector: "references-many-input" }, { kind: "component", type: StringAutocompleteInputComponent, selector: "string-autocomplete-input" }, { kind: "component", type: StringDropdownInputComponent, selector: "string-dropdown-input" }, { kind: "component", type: StringInputComponent, selector: "string-input" }, { kind: "component", type: StringPasswordInputComponent, selector: "string-password-input" }, { kind: "component", type: StringTextboxInputComponent, selector: "string-textbox-input" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: NgxMatEntityInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-mat-entity-input', template: "<!-- eslint-disable angular/no-call-expression -->\n \n<!-- eslint-disable angular/cyclomatic-complexity -->\n<div *ngIf=\"!(hideOmitForCreate && metadata.omitForCreate) && !(hideOmitForEdit && metadata.omitForUpdate)\" [ngSwitch]=\"type\">\n    <!-------------------------------------------->\n    <!-----------------Strings-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.STRING\">\n        <string-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </string-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_TEXTBOX\">\n        <string-textbox-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </string-textbox-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_AUTOCOMPLETE\">\n        <string-autocomplete-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </string-autocomplete-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_DROPDOWN\">\n        <string-dropdown-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </string-dropdown-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_PASSWORD\">\n        <string-password-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </string-password-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-----------------Booleans------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_CHECKBOX\">\n        <boolean-checkbox-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </boolean-checkbox-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_TOGGLE\">\n        <boolean-toggle-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </boolean-toggle-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_DROPDOWN\">\n        <boolean-dropdown-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </boolean-dropdown-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!------------------Numbers------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.NUMBER\">\n        <number-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </number-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.NUMBER_DROPDOWN\">\n        <number-dropdown-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </number-dropdown-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.NUMBER_SLIDER\">\n        <number-slider-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </number-slider-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Array-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_DATE\">\n        <array-date-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </array-date-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_DATE_TIME\">\n        <array-date-time-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </array-date-time-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_DATE_RANGE\">\n        <array-date-range-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </array-date-range-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_STRING_CHIPS\">\n        <array-string-chips-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </array-string-chips-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_STRING_AUTOCOMPLETE_CHIPS\">\n        <array-string-autocomplete-chips\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </array-string-autocomplete-chips>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Dates-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.DATE\">\n        <date-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </date-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.DATE_RANGE\">\n        <date-range-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </date-range-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.DATE_TIME\">\n        <date-time-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </date-time-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Files-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.FILE_DEFAULT\">\n        <file-default-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </file-default-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.FILE_IMAGE\">\n        <file-image-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </file-image-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------- references many ------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.REFERENCES_MANY\">\n        <references-many-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </references-many-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Custom------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.CUSTOM\">\n        <custom-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\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 *ngFor=\"let row of tab.rows;\" class=\"row\">\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]=\"EntityUtilities.getWidthClasses(objectProperty, key)\"\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 *ngFor=\"let row of objectPropertyTabs[0].rows\" class=\"row\">\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]=\"EntityUtilities.getWidthClasses(objectProperty, key)\"\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 #inputModel=\"ngModel\"\n                [name]=\"referencesOneName\"\n                [disabled]=\"internalIsReadOnly\"\n                [required]=\"metadata.required(entity)\"\n                [(ngModel)]=\"internalEntity[internalPropertyKey]\"\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 *ngFor=\"let row of tab.rows;\" class=\"row\">\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]=\"EntityUtilities.getWidthClasses(referencesOneObject, key)\"\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 *ngFor=\"let row of referencesOnePropertyTabs[0].rows\" class=\"row\">\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]=\"EntityUtilities.getWidthClasses(referencesOneObject, key)\"\n                    (inputChangeEvent)=\"emitChange()\"\n                >\n                </ngx-mat-entity-input>\n            </div>\n        </div>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Array-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY\" class=\"entityArray\">\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 *ngFor=\"let row of tab.rows\" class=\"row\">\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]=\"EntityUtilities.getWidthClasses(arrayItem, key)\"\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 *ngFor=\"let row of arrayItemInlineTabs[0].rows\" class=\"row\">\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]=\"EntityUtilities.getWidthClasses(arrayItem, key)\"\n                            (inputChangeEvent)=\"checkIsArrayItemValid()\"\n                        >\n                        </ngx-mat-entity-input>\n                    </div>\n                </div>\n            </div>\n\n            <div *ngIf=\"!internalIsReadOnly\" class=\"buttons\">\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 *ngIf=\"!internalIsReadOnly\" matColumnDef=\"select\">\n                    <mat-header-cell *matHeaderCellDef>\n                        <mat-checkbox\n                            [disabled]=\"!entityArrayDataSource.data.length\" [checked]=\"entityArraySelection.hasValue() && SelectionUtilities.isAllSelected(entityArraySelection, entityArrayDataSource)\"\n                            [indeterminate]=\"entityArraySelection.hasValue() && !SelectionUtilities.isAllSelected(entityArraySelection, entityArrayDataSource)\"\n                            (change)=\"$event ? SelectionUtilities.masterToggle(entityArraySelection, entityArrayDataSource) : null\">\n                        </mat-checkbox>\n                    </mat-header-cell>\n                    <mat-cell *matCellDef=\"let entity\">\n                        <mat-checkbox [checked]=\"entityArraySelection.isSelected(entity)\" (click)=\"$event.stopPropagation()\" (change)=\"$event ? entityArraySelection.toggle(entity) : null\"></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 *matCellDef=\"let entity\" [class.enabled]=\"!dCol.disableClick\" (click)=\"editArrayItem(entity, dCol)\">\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 *ngIf=\"metadataEntityArray.required(entity) && !entityArrayDataSource.data.length\" class=\"array-error\">\n                {{metadataEntityArray.missingErrorMessage}}\n            </div>\n        </div>\n    </div>\n\n    <!-------------------------------------------->\n    <!------------------ has many ---------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.HAS_MANY\" class=\"hasMany\">\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\" mat-raised-button [matMenuTriggerFor]=\"menu\">\n                    {{metadataHasMany.tableData.baseData.tableActionsLabel}}\n                </button>\n            </div>\n            <mat-menu #menu=\"matMenu\">\n                <button *ngIf=\"metadataHasMany.tableData.baseData.allowJsonImport\" type=\"button\" mat-menu-item [disabled]=\"hasManyTableActionDisabled(hasManyImportAction)\" (click)=\"runHasManyTableAction(hasManyImportAction)\">\n                    {{hasManyImportAction.displayName}}\n                </button>\n                <button *ngFor=\"let action of metadataHasMany.tableData.baseData.tableActions\" type=\"button\" mat-menu-item [disabled]=\"hasManyTableActionDisabled(action)\" (click)=\"runHasManyTableAction(action)\">\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\" mat-raised-button (click)=\"createHasManyEntity()\">\n                    {{metadataHasMany.tableData.baseData.createButtonLabel}}\n                </button>\n            </div>\n        </div>\n\n        <div class=\"mat-elevation-z8 elevation-container\">\n            <mat-table matSort [dataSource]=\"hasManyDataSource\">\n                <!-- select Column -->\n                <ng-container matColumnDef=\"select\">\n                    <mat-header-cell *matHeaderCellDef>\n                        <mat-checkbox [checked]=\"hasManySelection.hasValue() && SelectionUtilities.isAllSelected(hasManySelection, hasManyDataSource)\"\n                            [indeterminate]=\"hasManySelection.hasValue() && !SelectionUtilities.isAllSelected(hasManySelection, hasManyDataSource)\"\n                            (change)=\"$event ? SelectionUtilities.masterToggle(hasManySelection, hasManyDataSource) : null\">\n                        </mat-checkbox>\n                    </mat-header-cell>\n                    <mat-cell *matCellDef=\"let entity\" class=\"enabled\">\n                        <mat-checkbox [checked]=\"hasManySelection.isSelected(entity)\"\n                            (click)=\"$event.stopPropagation()\"\n                            (change)=\"$event ? hasManySelection.toggle(entity) : null\">\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 *matCellDef=\"let entity\"\n                        [class.enabled]=\"!dCol.disableClick && (hasManyAllowUpdate(entity) || hasManyAllowRead(entity))\"\n                        (click)=\"editHasManyEntity(entity, dCol)\"\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 *ngFor=\"let row of tab.rows\" class=\"row\">\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]=\"EntityUtilities.getWidthClasses(arrayItem, key)\"\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 *ngFor=\"let row of arrayItemDialogTabs[0].rows\" class=\"row\">\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]=\"EntityUtilities.getWidthClasses(arrayItem, key)\"\n                        (inputChangeEvent)=\"checkIsArrayItemValid()\"\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\" mat-raised-button matBadgeColor=\"warn\"\n                    [disabled]=\"!isArrayItemValid\"\n                    [matBadge]=\"arrayItemValidationErrors.length\"\n                    [matBadgeHidden]=\"!arrayItemValidationErrors.length\"\n                    (click)=\"addArrayItem()\"\n                >\n                    {{addArrayItemDialogData.createButtonLabel}}\n                </button>\n                <ngx-mat-entity-tooltip *ngIf=\"arrayItemValidationErrors.length\" [tooltipContent]=\"arrayItemTooltipContent\"></ngx-mat-entity-tooltip>\n            </div>\n            <button type=\"button\" mat-raised-button class=\"cancel-button\" (click)=\"closeAddArrayItemDialog()\">\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 *ngFor=\"let row of tab.rows\" class=\"row\">\n                        <ngx-mat-entity-input\n                            *ngFor=\"let key of row.keys\"\n                            [entity]=\"arrayItem\"\n                            [propertyKey]=\"key\"\n                            [hideOmitForEdit]=\"true\"\n                            [class]=\"EntityUtilities.getWidthClasses(arrayItem, key)\"\n                            [isReadOnly]=\"isPropertyReadOnly(arrayItem, key)\"\n                            (inputChangeEvent)=\"checkArrayItem()\"\n                        >\n                        </ngx-mat-entity-input>\n                    </div>\n                </mat-tab>\n            </mat-tab-group>\n        \n            <div *ngIf=\"arrayItemDialogTabs.length <= 1\">\n                <div *ngFor=\"let row of arrayItemDialogTabs[0].rows\" class=\"row\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"arrayItem\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForEdit]=\"true\"\n                        [class]=\"EntityUtilities.getWidthClasses(arrayItem, key)\"\n                        [isReadOnly]=\"isPropertyReadOnly(arrayItem, key)\"\n                        (inputChangeEvent)=\"checkArrayItem()\"\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\" mat-raised-button matBadgeColor=\"warn\"\n                [disabled]=\"internalIsReadOnly || !isArrayItemValid || !isArrayItemDirty\"\n                    [matBadge]=\"arrayItemValidationErrors.length\"\n                    [matBadgeHidden]=\"!arrayItemValidationErrors.length\"\n                    (click)=\"saveArrayItem()\"\n                >\n                    {{editArrayItemDialogData.confirmButtonLabel}}\n                </button>\n                <ngx-mat-entity-tooltip *ngIf=\"arrayItemValidationErrors.length\" [tooltipContent]=\"arrayItemTooltipContent\"></ngx-mat-entity-tooltip>\n            </div>\n            <button type=\"button\" mat-raised-button class=\"cancel-button\" (click)=\"closeEditArrayItemDialog()\">\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.createData.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 *ngFor=\"let row of tab.rows\" class=\"row\">\n                        <ngx-mat-entity-input\n                            *ngFor=\"let key of row.keys\"\n                            [entity]=\"hasManyEntity\"\n                            [propertyKey]=\"key\"\n                            [hideOmitForCreate]=\"true\"\n                            [class]=\"EntityUtilities.getWidthClasses(hasManyEntity, key)\"\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 *ngFor=\"let row of hasManyCreateTabs[0].rows\" class=\"row\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"hasManyEntity\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForCreate]=\"true\"\n                        [class]=\"EntityUtilities.getWidthClasses(hasManyEntity, key)\"\n                        (inputChangeEvent)=\"checkIsHasManyEntityValid('create')\"\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\" mat-raised-button matBadgeColor=\"warn\"\n                    [disabled]=\"!isHasManyEntityValid\"\n                    [matBadge]=\"hasManyValidationErrors.length\"\n                    [matBadgeHidden]=\"!hasManyValidationErrors.length\"\n                    (click)=\"dialogCreateHasMany()\"\n                >\n                    {{metadataHasMany.tableData.createData.createButtonLabel}}\n                </button>\n                <ngx-mat-entity-tooltip *ngIf=\"hasManyValidationErrors.length\" [tooltipContent]=\"hasManyTooltipContent\"></ngx-mat-entity-tooltip>\n            </div>\n            <button type=\"button\" mat-raised-button class=\"cancel-button\" (click)=\"dialogCancelCreateHasMany()\">\n                {{metadataHasMany.tableData.createData.cancelButtonLabel}}\n            </button>\n        </mat-dialog-actions>\n    </form>\n    \n</ng-template>\n\n<!--------------------------------------------------------->\n<!--------------------Edit Has Many Dialog----------------->\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\" mat-raised-button [matMenuTriggerFor]=\"menu\">\n                {{metadataHasMany.tableData.editData.actionsLabel}}\n            </button>\n            <mat-menu #menu=\"matMenu\">\n                <button *ngFor=\"let action of metadataHasMany.tableData.editData.actions\" type=\"button\" mat-menu-item [disabled]=\"hasManyEditActionDisabled(action)\" (click)=\"hasManyRunEditAction(action)\">\n                    {{action.displayName}}\n                </button>\n            </mat-menu>\n        \n            <button *ngIf=\"hasManyAllowDelete(hasManyEntity)\" type=\"button\" mat-raised-button color=\"warn\" class=\"delete-button\" tabindex=\"-1\" (click)=\"deleteHasManyEntity()\">\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 *ngFor=\"let row of tab.rows\" class=\"row\">\n                        <ngx-mat-entity-input\n                            *ngFor=\"let key of row.keys\"\n                            [entity]=\"hasManyEntity\"\n                            [propertyKey]=\"key\"\n                            [hideOmitForEdit]=\"true\"\n                            [class]=\"EntityUtilities.getWidthClasses(hasManyEntity, key)\"\n                            [isReadOnly]=\"isPropertyReadOnly(hasManyEntity, key)\"\n                            (inputChangeEvent)=\"checkHasManyEntity()\"\n                        >\n                        </ngx-mat-entity-input>\n                    </div>\n                </mat-tab>\n            </mat-tab-group>\n        \n            <div *ngIf=\"hasManyUpdateTabs.length <= 1\">\n                <div *ngFor=\"let row of hasManyUpdateTabs[0].rows\" class=\"row\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"hasManyEntity\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForEdit]=\"true\"\n                        [class]=\"EntityUtilities.getWidthClasses(hasManyEntity, key)\"\n                        [isReadOnly]=\"isPropertyReadOnly(hasManyEntity, key)\"\n                        (inputChangeEvent)=\"checkHasManyEntity()\"\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\" mat-raised-button matBadgeColor=\"warn\"\n                    [disabled]=\"internalIsReadOnly || !isHasManyEntityValid || !isHasManyEntityDirty\"\n                    [matBadge]=\"hasManyValidationErrors.length\"\n                    [matBadgeHidden]=\"!hasManyValidationErrors.length\"\n                    (click)=\"dialogEditHasMany()\"\n                >\n                    {{metadataHasMany.tableData.editData.confirmButtonLabel}}\n                </button>\n                <ngx-mat-entity-tooltip *ngIf=\"hasManyValidationErrors.length\" [tooltipContent]=\"hasManyTooltipContent\"></ngx-mat-entity-tooltip>\n            </div>\n            <button type=\"button\" mat-raised-button class=\"cancel-button\" (click)=\"dialogCancelEditHasMany()\">\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)}.actions-container{display:flex;gap:10px}::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"] }]
+            args: [{ selector: 'ngx-mat-entity-input', template: "<!-- eslint-disable angular/no-call-expression -->\n \n<!-- eslint-disable angular/cyclomatic-complexity -->\n<div *ngIf=\"!(hideOmitForCreate && metadata.omitForCreate) && !(hideOmitForEdit && metadata.omitForUpdate)\" [ngSwitch]=\"type\">\n    <!-------------------------------------------->\n    <!-----------------Strings-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.STRING\">\n        <string-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </string-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_TEXTBOX\">\n        <string-textbox-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </string-textbox-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_AUTOCOMPLETE\">\n        <string-autocomplete-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </string-autocomplete-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_DROPDOWN\">\n        <string-dropdown-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </string-dropdown-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_PASSWORD\">\n        <string-password-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </string-password-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-----------------Booleans------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_CHECKBOX\">\n        <boolean-checkbox-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </boolean-checkbox-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_TOGGLE\">\n        <boolean-toggle-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </boolean-toggle-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_DROPDOWN\">\n        <boolean-dropdown-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </boolean-dropdown-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!------------------Numbers------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.NUMBER\">\n        <number-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </number-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.NUMBER_DROPDOWN\">\n        <number-dropdown-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </number-dropdown-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.NUMBER_SLIDER\">\n        <number-slider-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </number-slider-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Array-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_DATE\">\n        <array-date-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </array-date-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_DATE_TIME\">\n        <array-date-time-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </array-date-time-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_DATE_RANGE\">\n        <array-date-range-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </array-date-range-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_STRING_CHIPS\">\n        <array-string-chips-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </array-string-chips-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_STRING_AUTOCOMPLETE_CHIPS\">\n        <array-string-autocomplete-chips\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </array-string-autocomplete-chips>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Dates-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.DATE\">\n        <date-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </date-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.DATE_RANGE\">\n        <date-range-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </date-range-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.DATE_TIME\">\n        <date-time-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </date-time-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Files-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.FILE_DEFAULT\">\n        <file-default-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </file-default-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.FILE_IMAGE\">\n        <file-image-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </file-image-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------- references many ------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.REFERENCES_MANY\">\n        <references-many-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </references-many-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Custom------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.CUSTOM\">\n        <custom-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\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 *ngFor=\"let row of tab.rows;\" class=\"row\">\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]=\"EntityUtilities.getWidthClasses(objectProperty, key)\"\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 *ngFor=\"let row of objectPropertyTabs[0].rows\" class=\"row\">\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]=\"EntityUtilities.getWidthClasses(objectProperty, key)\"\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 #inputModel=\"ngModel\"\n                [name]=\"referencesOneName\"\n                [disabled]=\"internalIsReadOnly\"\n                [required]=\"metadata.required(entity)\"\n                [(ngModel)]=\"internalEntity[internalPropertyKey]\"\n                (selectionChange)=\"setReferencesOneObject()\"\n                (opened)=\"selectSearchInput.focus()\"\n            >\n                <mat-form-field class=\"select-search-input\">\n                    <!-- eslint-disable-next-line angular/no-any -->\n                    <input #selectSearchInput matInput (keyup)=\"filterReferencesOneValues($any($event.target).value)\">\n                    <i matSuffix class=\"fas fa-search\"></i>\n                </mat-form-field>\n                <mat-option *ngIf=\"!metadata.required(entity)\">-</mat-option>\n                <mat-option *ngIf=\"shouldDisplayCurrentReferencesOneDropdownValue\" [value]=\"currentReferencesOneDropdownValue?.value\">{{currentReferencesOneDropdownValue?.displayName}}</mat-option>\n                <mat-option *ngFor=\"let value of filteredReferencesOneDropdownValues\" [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 *ngFor=\"let row of tab.rows;\" class=\"row\">\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]=\"EntityUtilities.getWidthClasses(referencesOneObject, key)\"\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 *ngFor=\"let row of referencesOnePropertyTabs[0].rows\" class=\"row\">\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]=\"EntityUtilities.getWidthClasses(referencesOneObject, key)\"\n                    (inputChangeEvent)=\"emitChange()\"\n                >\n                </ngx-mat-entity-input>\n            </div>\n        </div>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Array-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY\" class=\"entityArray\">\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 *ngFor=\"let row of tab.rows\" class=\"row\">\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]=\"EntityUtilities.getWidthClasses(arrayItem, key)\"\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 *ngFor=\"let row of arrayItemInlineTabs[0].rows\" class=\"row\">\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]=\"EntityUtilities.getWidthClasses(arrayItem, key)\"\n                            (inputChangeEvent)=\"checkIsArrayItemValid()\"\n                        >\n                        </ngx-mat-entity-input>\n                    </div>\n                </div>\n            </div>\n\n            <div *ngIf=\"!internalIsReadOnly\" class=\"buttons\">\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 *ngIf=\"!internalIsReadOnly\" matColumnDef=\"select\">\n                    <mat-header-cell *matHeaderCellDef>\n                        <mat-checkbox\n                            [disabled]=\"!entityArrayDataSource.data.length\" [checked]=\"entityArraySelection.hasValue() && SelectionUtilities.isAllSelected(entityArraySelection, entityArrayDataSource)\"\n                            [indeterminate]=\"entityArraySelection.hasValue() && !SelectionUtilities.isAllSelected(entityArraySelection, entityArrayDataSource)\"\n                            (change)=\"$event ? SelectionUtilities.masterToggle(entityArraySelection, entityArrayDataSource) : null\">\n                        </mat-checkbox>\n                    </mat-header-cell>\n                    <mat-cell *matCellDef=\"let entity\">\n                        <mat-checkbox [checked]=\"entityArraySelection.isSelected(entity)\" (click)=\"$event.stopPropagation()\" (change)=\"$event ? entityArraySelection.toggle(entity) : null\"></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 *matCellDef=\"let entity\" [class.enabled]=\"!dCol.disableClick\" (click)=\"editArrayItem(entity, dCol)\">\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 *ngIf=\"metadataEntityArray.required(entity) && !entityArrayDataSource.data.length\" class=\"array-error\">\n                {{metadataEntityArray.missingErrorMessage}}\n            </div>\n        </div>\n    </div>\n\n    <!-------------------------------------------->\n    <!------------------ has many ---------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.HAS_MANY\" class=\"hasMany\">\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\" mat-raised-button [matMenuTriggerFor]=\"menu\">\n                    {{metadataHasMany.tableData.baseData.tableActionsLabel}}\n                </button>\n            </div>\n            <mat-menu #menu=\"matMenu\">\n                <button *ngIf=\"metadataHasMany.tableData.baseData.allowJsonImport\" type=\"button\" mat-menu-item [disabled]=\"hasManyTableActionDisabled(hasManyImportAction)\" (click)=\"runHasManyTableAction(hasManyImportAction)\">\n                    {{hasManyImportAction.displayName}}\n                </button>\n                <button *ngFor=\"let action of metadataHasMany.tableData.baseData.tableActions\" type=\"button\" mat-menu-item [disabled]=\"hasManyTableActionDisabled(action)\" (click)=\"runHasManyTableAction(action)\">\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\" mat-raised-button (click)=\"createHasManyEntity()\">\n                    {{metadataHasMany.tableData.baseData.createButtonLabel}}\n                </button>\n            </div>\n        </div>\n\n        <div class=\"mat-elevation-z8 elevation-container\">\n            <mat-table matSort [dataSource]=\"hasManyDataSource\">\n                <!-- select Column -->\n                <ng-container matColumnDef=\"select\">\n                    <mat-header-cell *matHeaderCellDef>\n                        <mat-checkbox [checked]=\"hasManySelection.hasValue() && SelectionUtilities.isAllSelected(hasManySelection, hasManyDataSource)\"\n                            [indeterminate]=\"hasManySelection.hasValue() && !SelectionUtilities.isAllSelected(hasManySelection, hasManyDataSource)\"\n                            (change)=\"$event ? SelectionUtilities.masterToggle(hasManySelection, hasManyDataSource) : null\">\n                        </mat-checkbox>\n                    </mat-header-cell>\n                    <mat-cell *matCellDef=\"let entity\" class=\"enabled\">\n                        <mat-checkbox [checked]=\"hasManySelection.isSelected(entity)\"\n                            (click)=\"$event.stopPropagation()\"\n                            (change)=\"$event ? hasManySelection.toggle(entity) : null\">\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 *matCellDef=\"let entity\"\n                        [class.enabled]=\"!dCol.disableClick && (hasManyAllowUpdate(entity) || hasManyAllowRead(entity))\"\n                        (click)=\"editHasManyEntity(entity, dCol)\"\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 *ngFor=\"let row of tab.rows\" class=\"row\">\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]=\"EntityUtilities.getWidthClasses(arrayItem, key)\"\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 *ngFor=\"let row of arrayItemDialogTabs[0].rows\" class=\"row\">\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]=\"EntityUtilities.getWidthClasses(arrayItem, key)\"\n                        (inputChangeEvent)=\"checkIsArrayItemValid()\"\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\" mat-raised-button matBadgeColor=\"warn\"\n                    [disabled]=\"!isArrayItemValid\"\n                    [matBadge]=\"arrayItemValidationErrors.length\"\n                    [matBadgeHidden]=\"!arrayItemValidationErrors.length\"\n                    (click)=\"addArrayItem()\"\n                >\n                    {{addArrayItemDialogData.createButtonLabel}}\n                </button>\n                <ngx-mat-entity-tooltip *ngIf=\"arrayItemValidationErrors.length\" [tooltipContent]=\"arrayItemTooltipContent\"></ngx-mat-entity-tooltip>\n            </div>\n            <button type=\"button\" mat-raised-button class=\"cancel-button\" (click)=\"closeAddArrayItemDialog()\">\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 *ngFor=\"let row of tab.rows\" class=\"row\">\n                        <ngx-mat-entity-input\n                            *ngFor=\"let key of row.keys\"\n                            [entity]=\"arrayItem\"\n                            [propertyKey]=\"key\"\n                            [hideOmitForEdit]=\"true\"\n                            [class]=\"EntityUtilities.getWidthClasses(arrayItem, key)\"\n                            [isReadOnly]=\"isPropertyReadOnly(arrayItem, key)\"\n                            (inputChangeEvent)=\"checkArrayItem()\"\n                        >\n                        </ngx-mat-entity-input>\n                    </div>\n                </mat-tab>\n            </mat-tab-group>\n        \n            <div *ngIf=\"arrayItemDialogTabs.length <= 1\">\n                <div *ngFor=\"let row of arrayItemDialogTabs[0].rows\" class=\"row\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"arrayItem\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForEdit]=\"true\"\n                        [class]=\"EntityUtilities.getWidthClasses(arrayItem, key)\"\n                        [isReadOnly]=\"isPropertyReadOnly(arrayItem, key)\"\n                        (inputChangeEvent)=\"checkArrayItem()\"\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\" mat-raised-button matBadgeColor=\"warn\"\n                [disabled]=\"internalIsReadOnly || !isArrayItemValid || !isArrayItemDirty\"\n                    [matBadge]=\"arrayItemValidationErrors.length\"\n                    [matBadgeHidden]=\"!arrayItemValidationErrors.length\"\n                    (click)=\"saveArrayItem()\"\n                >\n                    {{editArrayItemDialogData.confirmButtonLabel}}\n                </button>\n                <ngx-mat-entity-tooltip *ngIf=\"arrayItemValidationErrors.length\" [tooltipContent]=\"arrayItemTooltipContent\"></ngx-mat-entity-tooltip>\n            </div>\n            <button type=\"button\" mat-raised-button class=\"cancel-button\" (click)=\"closeEditArrayItemDialog()\">\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.createData.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 *ngFor=\"let row of tab.rows\" class=\"row\">\n                        <ngx-mat-entity-input\n                            *ngFor=\"let key of row.keys\"\n                            [entity]=\"hasManyEntity\"\n                            [propertyKey]=\"key\"\n                            [hideOmitForCreate]=\"true\"\n                            [class]=\"EntityUtilities.getWidthClasses(hasManyEntity, key)\"\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 *ngFor=\"let row of hasManyCreateTabs[0].rows\" class=\"row\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"hasManyEntity\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForCreate]=\"true\"\n                        [class]=\"EntityUtilities.getWidthClasses(hasManyEntity, key)\"\n                        (inputChangeEvent)=\"checkIsHasManyEntityValid('create')\"\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\" mat-raised-button matBadgeColor=\"warn\"\n                    [disabled]=\"!isHasManyEntityValid\"\n                    [matBadge]=\"hasManyValidationErrors.length\"\n                    [matBadgeHidden]=\"!hasManyValidationErrors.length\"\n                    (click)=\"dialogCreateHasMany()\"\n                >\n                    {{metadataHasMany.tableData.createData.createButtonLabel}}\n                </button>\n                <ngx-mat-entity-tooltip *ngIf=\"hasManyValidationErrors.length\" [tooltipContent]=\"hasManyTooltipContent\"></ngx-mat-entity-tooltip>\n            </div>\n            <button type=\"button\" mat-raised-button class=\"cancel-button\" (click)=\"dialogCancelCreateHasMany()\">\n                {{metadataHasMany.tableData.createData.cancelButtonLabel}}\n            </button>\n        </mat-dialog-actions>\n    </form>\n    \n</ng-template>\n\n<!--------------------------------------------------------->\n<!--------------------Edit Has Many Dialog----------------->\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\" mat-raised-button [matMenuTriggerFor]=\"menu\">\n                {{metadataHasMany.tableData.editData.actionsLabel}}\n            </button>\n            <mat-menu #menu=\"matMenu\">\n                <button *ngFor=\"let action of metadataHasMany.tableData.editData.actions\" type=\"button\" mat-menu-item [disabled]=\"hasManyEditActionDisabled(action)\" (click)=\"hasManyRunEditAction(action)\">\n                    {{action.displayName}}\n                </button>\n            </mat-menu>\n        \n            <button *ngIf=\"hasManyAllowDelete(hasManyEntity)\" type=\"button\" mat-raised-button color=\"warn\" class=\"delete-button\" tabindex=\"-1\" (click)=\"deleteHasManyEntity()\">\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 *ngFor=\"let row of tab.rows\" class=\"row\">\n                        <ngx-mat-entity-input\n                            *ngFor=\"let key of row.keys\"\n                            [entity]=\"hasManyEntity\"\n                            [propertyKey]=\"key\"\n                            [hideOmitForEdit]=\"true\"\n                            [class]=\"EntityUtilities.getWidthClasses(hasManyEntity, key)\"\n                            [isReadOnly]=\"isPropertyReadOnly(hasManyEntity, key)\"\n                            (inputChangeEvent)=\"checkHasManyEntity()\"\n                        >\n                        </ngx-mat-entity-input>\n                    </div>\n                </mat-tab>\n            </mat-tab-group>\n        \n            <div *ngIf=\"hasManyUpdateTabs.length <= 1\">\n                <div *ngFor=\"let row of hasManyUpdateTabs[0].rows\" class=\"row\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"hasManyEntity\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForEdit]=\"true\"\n                        [class]=\"EntityUtilities.getWidthClasses(hasManyEntity, key)\"\n                        [isReadOnly]=\"isPropertyReadOnly(hasManyEntity, key)\"\n                        (inputChangeEvent)=\"checkHasManyEntity()\"\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\" mat-raised-button matBadgeColor=\"warn\"\n                    [disabled]=\"internalIsReadOnly || !isHasManyEntityValid || !isHasManyEntityDirty\"\n                    [matBadge]=\"hasManyValidationErrors.length\"\n                    [matBadgeHidden]=\"!hasManyValidationErrors.length\"\n                    (click)=\"dialogEditHasMany()\"\n                >\n                    {{metadataHasMany.tableData.editData.confirmButtonLabel}}\n                </button>\n                <ngx-mat-entity-tooltip *ngIf=\"hasManyValidationErrors.length\" [tooltipContent]=\"hasManyTooltipContent\"></ngx-mat-entity-tooltip>\n            </div>\n            <button type=\"button\" mat-raised-button class=\"cancel-button\" (click)=\"dialogCancelEditHasMany()\">\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)}.actions-container{display:flex;gap:10px}::ng-deep .mat-mdc-form-field-has-icon-suffix .mat-mdc-text-field-wrapper{padding-right:16px}::ng-deep .select-search-input{max-width:100%;margin-top:-8px;margin-bottom:8px}::ng-deep .select-search-input .mat-mdc-form-field-subscript-wrapper{display:none}::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$2.Router }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [NGX_GET_VALIDATION_ERROR_MESSAGE]
@@ -6198,7 +6456,6 @@ class PageCreateDataBuilder extends BaseBuilder {
         const createData = new CreateDataBuilder(this.globalConfig, data.createData)
             .withDefault('cancelButtonLabel', this.globalConfig.backLabel)
             .getResult();
-        // eslint-disable-next-line max-len
         const confirmUnsavedChangesDialogData = new ConfirmDialogDataBuilder(this.globalConfig, data.createData?.confirmUnsavedChangesDialogData)
             .withDefault('title', this.globalConfig.confirmUnsavedChangesTitle)
             .withDefault('text', this.globalConfig.confirmUnsavedChangesText)
@@ -6218,17 +6475,17 @@ class PageCreateDataBuilder extends BaseBuilder {
 /**
  * The entity service that needs to be provided in the providers array of the create page route.
  */
-// eslint-disable-next-line max-len, typescript/no-explicit-any, constCase/uppercase
+// eslint-disable-next-line typescript/no-explicit-any
 const NGX_CREATE_DATA_ENTITY_SERVICE = new InjectionToken('NGX_CREATE_DATA_ENTITY_SERVICE');
 /**
  * The entity class that needs to be provided in the providers array of the create page route.
  */
-// eslint-disable-next-line max-len, typescript/no-explicit-any, constCase/uppercase
+// eslint-disable-next-line typescript/no-explicit-any
 const NGX_CREATE_DATA_ENTITY = new InjectionToken('NGX_CREATE_DATA_ENTITY');
 /**
  * The configuration that needs to be provided in the providers array of the create page route.
  */
-// eslint-disable-next-line typescript/no-explicit-any, constCase/uppercase
+// eslint-disable-next-line typescript/no-explicit-any
 const NGX_CREATE_DATA = new InjectionToken('NGX_CREATE_DATA');
 /**
  * A generic page that allows you to create a specific entity.
@@ -6303,13 +6560,12 @@ class NgxMatEntityCreatePageComponent {
         this.data = new PageCreateDataBuilder(this.inputData, this.globalConfig).getResult();
         if (this.data == null) {
             this.confirmNavigateBack();
-            // eslint-disable-next-line max-len
             throw new Error('No create data was provided for "NGX_CREATE_DATA". You need to provide a value in your routes providers array.');
         }
         this.entity = new this.EntityClass();
         EntityUtilities.setDefaultValues(this.entity);
         this.entityPriorChanges = LodashUtilities.cloneDeep(this.entity);
-        this.checkIsEntityValid();
+        void this.checkIsEntityValid();
         this.entityTabs = EntityUtilities.getEntityTabs(this.entity, this.injector, true, false);
         setTimeout(() => this.checkOffset(), 1);
         // setTimeout(() => this.checkEntity(), 1);
@@ -6343,11 +6599,11 @@ class NgxMatEntityCreatePageComponent {
      * Checks if the entity has become invalid or dirty.
      */
     async checkEntity() {
-        this.checkIsEntityValid();
+        await this.checkIsEntityValid();
         this.isEntityDirty = await EntityUtilities.isDirty(this.entity, this.entityPriorChanges, this.http);
     }
-    checkIsEntityValid() {
-        this.validationErrors = ValidationUtilities.getEntityValidationErrors(this.entity, 'create');
+    async checkIsEntityValid() {
+        this.validationErrors = await ValidationUtilities.getEntityValidationErrors(this.entity, this.injector, 'create');
         this.tooltipContent = runInInjectionContext(this.injector, () => getValidationErrorsTooltipContent(this.validationErrors));
         this.isEntityValid = this.validationErrors.length === 0;
     }
@@ -6363,7 +6619,6 @@ class NgxMatEntityCreatePageComponent {
             this.confirmCreate();
             return;
         }
-        // eslint-disable-next-line max-len
         const dialogData = new ConfirmDialogDataBuilder(this.globalConfig, this.data.createData.confirmCreateDialogData)
             .withDefault('text', this.globalConfig.confirmCreateText)
             .withDefault('confirmButtonLabel', this.globalConfig.createLabel)
@@ -6422,6 +6677,9 @@ class NgxMatEntityCreatePageComponent {
     isReadOnly(key) {
         return runInInjectionContext(this.injector, () => {
             const metadata = EntityUtilities.getPropertyMetadata(this.entity, key);
+            if (!metadata) {
+                throw new Error(`No metadata was found for the key "${String(key)}"`);
+            }
             return metadata.isReadOnly(this.entity);
         });
     }
@@ -6488,7 +6746,6 @@ class PageEditDataBuilder extends BaseBuilder {
         const editData = new EditDataBuilder(this.globalConfig, data.editData)
             .withDefault('cancelButtonLabel', this.globalConfig.backLabel)
             .getResult();
-        // eslint-disable-next-line max-len
         const confirmUnsavedChangesDialogData = new ConfirmDialogDataBuilder(this.globalConfig, data.editData?.confirmUnsavedChangesDialogData)
             .withDefault('title', this.globalConfig.confirmUnsavedChangesTitle)
             .withDefault('text', this.globalConfig.confirmUnsavedChangesText)
@@ -6510,17 +6767,17 @@ class PageEditDataBuilder extends BaseBuilder {
 /**
  * The entity service that needs to be provided in the providers array of the edit page route.
  */
-// eslint-disable-next-line max-len, typescript/no-explicit-any, constCase/uppercase
+// eslint-disable-next-line typescript/no-explicit-any
 const NGX_EDIT_DATA_ENTITY_SERVICE = new InjectionToken('NGX_EDIT_DATA_ENTITY_SERVICE');
 /**
  * The entity class that needs to be provided in the providers array of the edit page route.
  */
-// eslint-disable-next-line max-len, typescript/no-explicit-any, constCase/uppercase
+// eslint-disable-next-line typescript/no-explicit-any
 const NGX_EDIT_DATA_ENTITY = new InjectionToken('NGX_EDIT_DATA_ENTITY');
 /**
  * The configuration that needs to be provided in the providers array of the edit page route.
  */
-// eslint-disable-next-line typescript/no-explicit-any, constCase/uppercase
+// eslint-disable-next-line typescript/no-explicit-any
 const NGX_EDIT_DATA = new InjectionToken('NGX_EDIT_DATA');
 /**
  * A generic page that allows you to edit a specific entity.
@@ -6608,6 +6865,9 @@ class NgxMatEntityEditPageComponent {
     isReadOnly(key) {
         return runInInjectionContext(this.injector, () => {
             const metadata = EntityUtilities.getPropertyMetadata(this.entity, key);
+            if (!metadata) {
+                throw new Error(`No metadata was found for the key "${String(key)}"`);
+            }
             return this.isEntityReadOnly || metadata.isReadOnly(this.entity);
         });
     }
@@ -6631,7 +6891,7 @@ class NgxMatEntityEditPageComponent {
         });
         this.entityTabs = EntityUtilities.getEntityTabs(this.entity, this.injector, false, true);
         setTimeout(() => this.checkOffset(), 1);
-        setTimeout(() => this.checkIsEntityValid(), 1);
+        setTimeout(() => void this.checkIsEntityValid(), 1);
     }
     /**
      * Checks if the bottom row should be displayed as fixed.
@@ -6662,11 +6922,11 @@ class NgxMatEntityEditPageComponent {
      * Checks if the entity has become invalid or dirty.
      */
     async checkEntity() {
-        this.checkIsEntityValid();
+        await this.checkIsEntityValid();
         this.isEntityDirty = await EntityUtilities.isDirty(this.entity, this.entityPriorChanges, this.http);
     }
-    checkIsEntityValid() {
-        this.validationErrors = ValidationUtilities.getEntityValidationErrors(this.entity, 'update');
+    async checkIsEntityValid() {
+        this.validationErrors = await ValidationUtilities.getEntityValidationErrors(this.entity, this.injector, 'update');
         this.tooltipContent = runInInjectionContext(this.injector, () => getValidationErrorsTooltipContent(this.validationErrors));
         this.isEntityValid = this.validationErrors.length === 0;
     }
@@ -6682,7 +6942,6 @@ class NgxMatEntityEditPageComponent {
             this.confirmEdit();
             return;
         }
-        // eslint-disable-next-line max-len
         const dialogData = new ConfirmDialogDataBuilder(this.globalConfig, this.data.editData.confirmEditDialogData)
             .withDefault('text', this.globalConfig.confirmSaveText)
             .withDefault('confirmButtonLabel', this.globalConfig.saveLabel)
@@ -6711,7 +6970,6 @@ class NgxMatEntityEditPageComponent {
             this.confirmDelete();
             return;
         }
-        // eslint-disable-next-line max-len
         const dialogData = new ConfirmDialogDataBuilder(this.globalConfig, this.data.editData.confirmDeleteDialogData)
             .withDefault('text', this.globalConfig.confirmDeleteText)
             .withDefault('type', 'delete')
@@ -6929,13 +7187,13 @@ class NgxMatEntityCreateDialogComponent {
         this.dialogRef.disableClose = true;
         this.entityTabs = EntityUtilities.getEntityTabs(this.data.entity, this.injector, true);
         this.entityService = this.injector.get(this.data.EntityServiceClass);
-        setTimeout(() => this.checkIsEntityValid(), 1);
+        setTimeout(() => void this.checkIsEntityValid(), 1);
     }
     /**
      * Checks if the entity is valid.
      */
-    checkIsEntityValid() {
-        this.validationErrors = ValidationUtilities.getEntityValidationErrors(this.data.entity, 'create');
+    async checkIsEntityValid() {
+        this.validationErrors = await ValidationUtilities.getEntityValidationErrors(this.data.entity, this.injector, 'create');
         this.tooltipContent = runInInjectionContext(this.injector, () => getValidationErrorsTooltipContent(this.validationErrors));
         this.isEntityValid = this.validationErrors.length === 0;
     }
@@ -7234,7 +7492,7 @@ class NgxMatEntityEditDialogComponent {
         this.dialogRef.disableClose = true;
         this.entityTabs = EntityUtilities.getEntityTabs(this.data.entity, this.injector, false, true);
         this.entityService = this.injector.get(this.data.EntityServiceClass);
-        setTimeout(() => this.checkIsEntityValid(), 1);
+        setTimeout(() => void this.checkIsEntityValid(), 1);
     }
     /**
      * Checks if the input with the given key is readonly.
@@ -7244,6 +7502,9 @@ class NgxMatEntityEditDialogComponent {
     isReadOnly(key) {
         return runInInjectionContext(this.injector, () => {
             const metadata = EntityUtilities.getPropertyMetadata(this.data.entity, key);
+            if (!metadata) {
+                throw new Error(`No metadata was found for the key "${String(key)}"`);
+            }
             return this.isEntityReadOnly || metadata.isReadOnly(this.data.entity);
         });
     }
@@ -7251,11 +7512,11 @@ class NgxMatEntityEditDialogComponent {
      * Checks if the entity has become invalid or dirty.
      */
     async checkEntity() {
-        this.checkIsEntityValid();
+        await this.checkIsEntityValid();
         this.isEntityDirty = await EntityUtilities.isDirty(this.data.entity, this.entityPriorChanges, this.http);
     }
-    checkIsEntityValid() {
-        this.validationErrors = ValidationUtilities.getEntityValidationErrors(this.data.entity, 'update');
+    async checkIsEntityValid() {
+        this.validationErrors = await ValidationUtilities.getEntityValidationErrors(this.data.entity, this.injector, 'update');
         this.tooltipContent = runInInjectionContext(this.injector, () => getValidationErrorsTooltipContent(this.validationErrors));
         this.isEntityValid = this.validationErrors.length === 0;
     }
@@ -7271,7 +7532,6 @@ class NgxMatEntityEditDialogComponent {
             this.confirmEdit();
             return;
         }
-        // eslint-disable-next-line max-len
         const dialogData = new ConfirmDialogDataBuilder(this.globalConfig, this.data.editData.confirmEditDialogData)
             .withDefault('text', this.globalConfig.confirmSaveText)
             .withDefault('confirmButtonLabel', this.globalConfig.saveLabel)
@@ -7300,7 +7560,6 @@ class NgxMatEntityEditDialogComponent {
             this.confirmDelete();
             return;
         }
-        // eslint-disable-next-line max-len
         const dialogData = new ConfirmDialogDataBuilder(this.globalConfig, this.data.editData.confirmDeleteDialogData)
             .withDefault('text', this.globalConfig.confirmDeleteText)
             .withDefault('type', 'delete')
@@ -7391,6 +7650,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImpor
                     args: [NGX_INTERNAL_GLOBAL_DEFAULT_VALUES]
                 }] }]; } });
 
+/**
+ * Dynamically applies css classes based on a provided function.
+ */
+class DynamicStyleClassDirective {
+    element;
+    renderer;
+    styleClassesApplied = [];
+    /**
+     * The function that gets the css classes to dynamically apply.
+     */
+    dynamicStyleClasses;
+    /**
+     * The input for the dynamic style classes function.
+     */
+    entity;
+    constructor(element, renderer) {
+        this.element = element;
+        this.renderer = renderer;
+    }
+    ngOnChanges() {
+        this.applyDynamicClasses();
+    }
+    applyDynamicClasses() {
+        const classes = this.dynamicStyleClasses(this.entity);
+        for (const styleClass of this.styleClassesApplied) {
+            this.renderer.removeClass(this.element.nativeElement, styleClass);
+        }
+        this.styleClassesApplied = [];
+        if (classes?.length) {
+            for (const styleClass of classes) {
+                this.renderer.addClass(this.element.nativeElement, styleClass);
+                this.styleClassesApplied.push(styleClass);
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: DynamicStyleClassDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.0", type: DynamicStyleClassDirective, isStandalone: true, selector: "[dynamicStyleClasses]", inputs: { dynamicStyleClasses: "dynamicStyleClasses", entity: "entity" }, usesOnChanges: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: DynamicStyleClassDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[dynamicStyleClasses]', standalone: true }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { dynamicStyleClasses: [{
+                type: Input,
+                args: [{ required: true }]
+            }], entity: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
 /**
  * Generates a fully functional table for displaying, creating, updating and deleting entities
  * based on the configuration passed in the @Input "tableData".
@@ -7702,7 +8010,7 @@ class NgxMatEntityTableComponent {
         this.dataSource.filter = filterValue.trim().toLowerCase();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: NgxMatEntityTableComponent, deps: [{ token: i1.MatDialog }, { token: i0.EnvironmentInjector }, { token: i2$2.Router }, { token: NGX_INTERNAL_GLOBAL_DEFAULT_VALUES }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: NgxMatEntityTableComponent, isStandalone: true, selector: "ngx-mat-entity-table", inputs: { tableData: "tableData" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }, { propertyName: "filter", first: true, predicate: ["filter"], descendants: true, static: true }], ngImport: i0, template: "<!-- eslint-disable angular/cyclomatic-complexity -->\n<!-- eslint-disable angular/no-call-expression -->\n<h1 class=\"title\">{{data.baseData.title}}</h1>\n\n<div class=\"row\">\n    <mat-form-field class=\"col-lg-8 col-md-6 col-sm-12\">\n        <mat-label>{{data.baseData.searchLabel}}</mat-label>\n        <input matInput (keyup)=\"applyFilter($event)\">\n    </mat-form-field>\n    <div\n        *ngIf=\"data.baseData.tableActions.length\"\n        [class.col-lg-2]=\"allowCreate\"\n        [class.col-lg-4]=\"!allowCreate\"\n        [class.col-md-3]=\"allowCreate\"\n        [class.col-md-6]=\"!allowCreate\"\n        [class.col-sm-6]=\"allowCreate\"\n        [class.col-sm-12]=\"!allowCreate\"\n    >\n        <button type=\"button\" class=\"actions-button\" mat-raised-button [matMenuTriggerFor]=\"menu\">\n            {{data.baseData.tableActionsLabel}}\n        </button>\n    </div>\n    <mat-menu #menu=\"matMenu\">\n        <button *ngIf=\"data.baseData.allowJsonImport\" type=\"button\" mat-menu-item [disabled]=\"tableActionDisabled(importAction)\" (click)=\"runTableAction(importAction)\">\n            {{importAction.displayName}}\n        </button>\n        <button *ngFor=\"let action of data.baseData.tableActions\" type=\"button\" mat-menu-item [disabled]=\"tableActionDisabled(action)\" (click)=\"runTableAction(action)\">\n            {{action.displayName}}\n        </button>\n    </mat-menu>\n\n    <div\n        *ngIf=\"allowCreate\"\n        [class.col-lg-2]=\"data.baseData.tableActions.length\"\n        [class.col-lg-4]=\"!data.baseData.tableActions.length\"\n        [class.col-md-3]=\"data.baseData.tableActions.length\"\n        [class.col-md-6]=\"!data.baseData.tableActions.length\"\n        [class.col-sm-6]=\"data.baseData.tableActions.length\"\n        [class.col-sm-12]=\"!data.baseData.tableActions.length\"\n    >\n        <button type=\"button\" class=\"create-button\" mat-raised-button (click)=\"createEntity()\">\n            {{data.baseData.createButtonLabel}}\n        </button>\n    </div>\n</div>\n\n<div class=\"mat-elevation-z8\">\n    <mat-table matSort [dataSource]=\"dataSource\">\n        <!-- select Column -->\n        <ng-container matColumnDef=\"select\">\n            <mat-header-cell *matHeaderCellDef>\n                <mat-checkbox [checked]=\"selection.hasValue() && SelectionUtilities.isAllSelected(selection, dataSource)\"\n                    [indeterminate]=\"selection.hasValue() && !SelectionUtilities.isAllSelected(selection, dataSource)\"\n                    (change)=\"$event ? SelectionUtilities.masterToggle(selection, dataSource) : null\">\n                </mat-checkbox>\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let entity\" class=\"entity\">\n                <mat-checkbox [checked]=\"selection.isSelected(entity)\"\n                    (click)=\"$event.stopPropagation()\"\n                    (change)=\"$event ? selection.toggle(entity) : null\">\n                </mat-checkbox>\n            </mat-cell>\n        </ng-container>\n\n        <ng-container *ngFor=\"let dCol of data.baseData.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n            <mat-header-cell *matHeaderCellDef mat-sort-header>\n                {{dCol.displayName}}\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let entity\" class=\"entity\"\n                [class.enabled]=\"!dCol.disableClick && (allowUpdate(entity) || allowRead(entity))\"\n                (click)=\"editEntity(entity, dCol)\"\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=\"displayedColumns\"></mat-header-row>\n        <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n    </mat-table>\n\n    <mat-spinner *ngIf=\"isLoading && data.baseData.displayLoadingSpinner\">\n    </mat-spinner>\n\n    <mat-paginator [length]=\"dataSource.filteredData.length\" [pageIndex]=\"0\" [pageSize]=\"10\" [pageSizeOptions]=\"[5, 10, 25, 50]\"></mat-paginator>\n</div>", styles: [".mdc-data-table__row:last-child .mdc-data-table__cell{border-bottom:1px solid rgba(0,0,0,.12)}button{width:100%}mat-spinner{margin:10px auto}.title{text-align:center}.actions-button,.create-button{height:56px;line-height:24px;font-size:16px}.mat-column-select{flex:0 0 75px}.enabled:hover{cursor:pointer}@media (max-width: 767px){.actions-button,.create-button{margin-bottom:15px}}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i6.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i10.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i10.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i10.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i10.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i10.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i10.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i10.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i10.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i10.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i10.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i14.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i17.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i17.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { 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: MatMenuModule }, { kind: "component", type: i13.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i13.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i13.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i15.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: DisplayColumnValueComponent, selector: "display-column-value", inputs: ["entity", "ComponentClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: NgxMatEntityTableComponent, isStandalone: true, selector: "ngx-mat-entity-table", inputs: { tableData: "tableData" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }, { propertyName: "filter", first: true, predicate: ["filter"], descendants: true, static: true }], ngImport: i0, template: "<!-- eslint-disable angular/cyclomatic-complexity -->\n<!-- eslint-disable angular/no-call-expression -->\n<h1 class=\"title\">{{data.baseData.title}}</h1>\n\n<div class=\"row\">\n    <mat-form-field class=\"col-lg-8 col-md-6 col-sm-12\">\n        <mat-label>{{data.baseData.searchLabel}}</mat-label>\n        <input matInput (keyup)=\"applyFilter($event)\">\n    </mat-form-field>\n    <div\n        *ngIf=\"data.baseData.tableActions.length\"\n        [class.col-lg-2]=\"allowCreate\"\n        [class.col-lg-4]=\"!allowCreate\"\n        [class.col-md-3]=\"allowCreate\"\n        [class.col-md-6]=\"!allowCreate\"\n        [class.col-sm-6]=\"allowCreate\"\n        [class.col-sm-12]=\"!allowCreate\"\n    >\n        <button type=\"button\" class=\"actions-button\" mat-raised-button [matMenuTriggerFor]=\"menu\">\n            {{data.baseData.tableActionsLabel}}\n        </button>\n    </div>\n    <mat-menu #menu=\"matMenu\">\n        <button *ngIf=\"data.baseData.allowJsonImport\" type=\"button\" mat-menu-item [disabled]=\"tableActionDisabled(importAction)\" (click)=\"runTableAction(importAction)\">\n            {{importAction.displayName}}\n        </button>\n        <button *ngFor=\"let action of data.baseData.tableActions\" type=\"button\" mat-menu-item [disabled]=\"tableActionDisabled(action)\" (click)=\"runTableAction(action)\">\n            {{action.displayName}}\n        </button>\n    </mat-menu>\n\n    <div\n        *ngIf=\"allowCreate\"\n        [class.col-lg-2]=\"data.baseData.tableActions.length\"\n        [class.col-lg-4]=\"!data.baseData.tableActions.length\"\n        [class.col-md-3]=\"data.baseData.tableActions.length\"\n        [class.col-md-6]=\"!data.baseData.tableActions.length\"\n        [class.col-sm-6]=\"data.baseData.tableActions.length\"\n        [class.col-sm-12]=\"!data.baseData.tableActions.length\"\n    >\n        <button type=\"button\" class=\"create-button\" mat-raised-button (click)=\"createEntity()\">\n            {{data.baseData.createButtonLabel}}\n        </button>\n    </div>\n</div>\n\n<div class=\"mat-elevation-z8\">\n    <mat-table matSort [dataSource]=\"dataSource\">\n        <!-- select Column -->\n        <ng-container matColumnDef=\"select\">\n            <mat-header-cell *matHeaderCellDef>\n                <mat-checkbox [checked]=\"selection.hasValue() && SelectionUtilities.isAllSelected(selection, dataSource)\"\n                    [indeterminate]=\"selection.hasValue() && !SelectionUtilities.isAllSelected(selection, dataSource)\"\n                    (change)=\"$event ? SelectionUtilities.masterToggle(selection, dataSource) : null\">\n                </mat-checkbox>\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let entity\" class=\"entity\" [dynamicStyleClasses]=\"data.baseData.dynamicRowStyleClasses\" [entity]=\"entity\">\n                <mat-checkbox [checked]=\"selection.isSelected(entity)\"\n                    (click)=\"$event.stopPropagation()\"\n                    (change)=\"$event ? selection.toggle(entity) : null\">\n                </mat-checkbox>\n            </mat-cell>\n        </ng-container>\n\n        <ng-container *ngFor=\"let dCol of data.baseData.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n            <mat-header-cell *matHeaderCellDef mat-sort-header>\n                {{dCol.displayName}}\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let entity\" class=\"entity\"\n                [class.enabled]=\"!dCol.disableClick && (allowUpdate(entity) || allowRead(entity))\"\n                [dynamicStyleClasses]=\"data.baseData.dynamicRowStyleClasses\" [entity]=\"entity\"\n                (click)=\"editEntity(entity, dCol)\"\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=\"displayedColumns\"></mat-header-row>\n        <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n    </mat-table>\n\n    <mat-spinner *ngIf=\"isLoading && data.baseData.displayLoadingSpinner\">\n    </mat-spinner>\n\n    <mat-paginator [length]=\"dataSource.filteredData.length\" [pageIndex]=\"0\" [pageSize]=\"10\" [pageSizeOptions]=\"[5, 10, 25, 50]\"></mat-paginator>\n</div>", styles: [".mdc-data-table__row:last-child .mdc-data-table__cell{border-bottom:1px solid rgba(0,0,0,.12)}button{width:100%}mat-spinner{margin:10px auto}.title{text-align:center}.actions-button,.create-button{height:56px;line-height:24px;font-size:16px}.mat-column-select{flex:0 0 75px}.enabled:hover{cursor:pointer}@media (max-width: 767px){.actions-button,.create-button{margin-bottom:15px}}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i6.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i14.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i17.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i17.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { 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: MatMenuModule }, { kind: "component", type: i13.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i13.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i13.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i15.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: DisplayColumnValueComponent, selector: "display-column-value", inputs: ["entity", "ComponentClass"] }, { kind: "directive", type: DynamicStyleClassDirective, selector: "[dynamicStyleClasses]", inputs: ["dynamicStyleClasses", "entity"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: NgxMatEntityTableComponent, decorators: [{
             type: Component,
@@ -7722,8 +8030,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImpor
                         MatProgressSpinnerModule,
                         NgxMatEntityCreateDialogComponent,
                         NgxMatEntityEditDialogComponent,
-                        DisplayColumnValueComponent
-                    ], template: "<!-- eslint-disable angular/cyclomatic-complexity -->\n<!-- eslint-disable angular/no-call-expression -->\n<h1 class=\"title\">{{data.baseData.title}}</h1>\n\n<div class=\"row\">\n    <mat-form-field class=\"col-lg-8 col-md-6 col-sm-12\">\n        <mat-label>{{data.baseData.searchLabel}}</mat-label>\n        <input matInput (keyup)=\"applyFilter($event)\">\n    </mat-form-field>\n    <div\n        *ngIf=\"data.baseData.tableActions.length\"\n        [class.col-lg-2]=\"allowCreate\"\n        [class.col-lg-4]=\"!allowCreate\"\n        [class.col-md-3]=\"allowCreate\"\n        [class.col-md-6]=\"!allowCreate\"\n        [class.col-sm-6]=\"allowCreate\"\n        [class.col-sm-12]=\"!allowCreate\"\n    >\n        <button type=\"button\" class=\"actions-button\" mat-raised-button [matMenuTriggerFor]=\"menu\">\n            {{data.baseData.tableActionsLabel}}\n        </button>\n    </div>\n    <mat-menu #menu=\"matMenu\">\n        <button *ngIf=\"data.baseData.allowJsonImport\" type=\"button\" mat-menu-item [disabled]=\"tableActionDisabled(importAction)\" (click)=\"runTableAction(importAction)\">\n            {{importAction.displayName}}\n        </button>\n        <button *ngFor=\"let action of data.baseData.tableActions\" type=\"button\" mat-menu-item [disabled]=\"tableActionDisabled(action)\" (click)=\"runTableAction(action)\">\n            {{action.displayName}}\n        </button>\n    </mat-menu>\n\n    <div\n        *ngIf=\"allowCreate\"\n        [class.col-lg-2]=\"data.baseData.tableActions.length\"\n        [class.col-lg-4]=\"!data.baseData.tableActions.length\"\n        [class.col-md-3]=\"data.baseData.tableActions.length\"\n        [class.col-md-6]=\"!data.baseData.tableActions.length\"\n        [class.col-sm-6]=\"data.baseData.tableActions.length\"\n        [class.col-sm-12]=\"!data.baseData.tableActions.length\"\n    >\n        <button type=\"button\" class=\"create-button\" mat-raised-button (click)=\"createEntity()\">\n            {{data.baseData.createButtonLabel}}\n        </button>\n    </div>\n</div>\n\n<div class=\"mat-elevation-z8\">\n    <mat-table matSort [dataSource]=\"dataSource\">\n        <!-- select Column -->\n        <ng-container matColumnDef=\"select\">\n            <mat-header-cell *matHeaderCellDef>\n                <mat-checkbox [checked]=\"selection.hasValue() && SelectionUtilities.isAllSelected(selection, dataSource)\"\n                    [indeterminate]=\"selection.hasValue() && !SelectionUtilities.isAllSelected(selection, dataSource)\"\n                    (change)=\"$event ? SelectionUtilities.masterToggle(selection, dataSource) : null\">\n                </mat-checkbox>\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let entity\" class=\"entity\">\n                <mat-checkbox [checked]=\"selection.isSelected(entity)\"\n                    (click)=\"$event.stopPropagation()\"\n                    (change)=\"$event ? selection.toggle(entity) : null\">\n                </mat-checkbox>\n            </mat-cell>\n        </ng-container>\n\n        <ng-container *ngFor=\"let dCol of data.baseData.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n            <mat-header-cell *matHeaderCellDef mat-sort-header>\n                {{dCol.displayName}}\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let entity\" class=\"entity\"\n                [class.enabled]=\"!dCol.disableClick && (allowUpdate(entity) || allowRead(entity))\"\n                (click)=\"editEntity(entity, dCol)\"\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=\"displayedColumns\"></mat-header-row>\n        <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n    </mat-table>\n\n    <mat-spinner *ngIf=\"isLoading && data.baseData.displayLoadingSpinner\">\n    </mat-spinner>\n\n    <mat-paginator [length]=\"dataSource.filteredData.length\" [pageIndex]=\"0\" [pageSize]=\"10\" [pageSizeOptions]=\"[5, 10, 25, 50]\"></mat-paginator>\n</div>", styles: [".mdc-data-table__row:last-child .mdc-data-table__cell{border-bottom:1px solid rgba(0,0,0,.12)}button{width:100%}mat-spinner{margin:10px auto}.title{text-align:center}.actions-button,.create-button{height:56px;line-height:24px;font-size:16px}.mat-column-select{flex:0 0 75px}.enabled:hover{cursor:pointer}@media (max-width: 767px){.actions-button,.create-button{margin-bottom:15px}}\n"] }]
+                        DisplayColumnValueComponent,
+                        DynamicStyleClassDirective
+                    ], template: "<!-- eslint-disable angular/cyclomatic-complexity -->\n<!-- eslint-disable angular/no-call-expression -->\n<h1 class=\"title\">{{data.baseData.title}}</h1>\n\n<div class=\"row\">\n    <mat-form-field class=\"col-lg-8 col-md-6 col-sm-12\">\n        <mat-label>{{data.baseData.searchLabel}}</mat-label>\n        <input matInput (keyup)=\"applyFilter($event)\">\n    </mat-form-field>\n    <div\n        *ngIf=\"data.baseData.tableActions.length\"\n        [class.col-lg-2]=\"allowCreate\"\n        [class.col-lg-4]=\"!allowCreate\"\n        [class.col-md-3]=\"allowCreate\"\n        [class.col-md-6]=\"!allowCreate\"\n        [class.col-sm-6]=\"allowCreate\"\n        [class.col-sm-12]=\"!allowCreate\"\n    >\n        <button type=\"button\" class=\"actions-button\" mat-raised-button [matMenuTriggerFor]=\"menu\">\n            {{data.baseData.tableActionsLabel}}\n        </button>\n    </div>\n    <mat-menu #menu=\"matMenu\">\n        <button *ngIf=\"data.baseData.allowJsonImport\" type=\"button\" mat-menu-item [disabled]=\"tableActionDisabled(importAction)\" (click)=\"runTableAction(importAction)\">\n            {{importAction.displayName}}\n        </button>\n        <button *ngFor=\"let action of data.baseData.tableActions\" type=\"button\" mat-menu-item [disabled]=\"tableActionDisabled(action)\" (click)=\"runTableAction(action)\">\n            {{action.displayName}}\n        </button>\n    </mat-menu>\n\n    <div\n        *ngIf=\"allowCreate\"\n        [class.col-lg-2]=\"data.baseData.tableActions.length\"\n        [class.col-lg-4]=\"!data.baseData.tableActions.length\"\n        [class.col-md-3]=\"data.baseData.tableActions.length\"\n        [class.col-md-6]=\"!data.baseData.tableActions.length\"\n        [class.col-sm-6]=\"data.baseData.tableActions.length\"\n        [class.col-sm-12]=\"!data.baseData.tableActions.length\"\n    >\n        <button type=\"button\" class=\"create-button\" mat-raised-button (click)=\"createEntity()\">\n            {{data.baseData.createButtonLabel}}\n        </button>\n    </div>\n</div>\n\n<div class=\"mat-elevation-z8\">\n    <mat-table matSort [dataSource]=\"dataSource\">\n        <!-- select Column -->\n        <ng-container matColumnDef=\"select\">\n            <mat-header-cell *matHeaderCellDef>\n                <mat-checkbox [checked]=\"selection.hasValue() && SelectionUtilities.isAllSelected(selection, dataSource)\"\n                    [indeterminate]=\"selection.hasValue() && !SelectionUtilities.isAllSelected(selection, dataSource)\"\n                    (change)=\"$event ? SelectionUtilities.masterToggle(selection, dataSource) : null\">\n                </mat-checkbox>\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let entity\" class=\"entity\" [dynamicStyleClasses]=\"data.baseData.dynamicRowStyleClasses\" [entity]=\"entity\">\n                <mat-checkbox [checked]=\"selection.isSelected(entity)\"\n                    (click)=\"$event.stopPropagation()\"\n                    (change)=\"$event ? selection.toggle(entity) : null\">\n                </mat-checkbox>\n            </mat-cell>\n        </ng-container>\n\n        <ng-container *ngFor=\"let dCol of data.baseData.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n            <mat-header-cell *matHeaderCellDef mat-sort-header>\n                {{dCol.displayName}}\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let entity\" class=\"entity\"\n                [class.enabled]=\"!dCol.disableClick && (allowUpdate(entity) || allowRead(entity))\"\n                [dynamicStyleClasses]=\"data.baseData.dynamicRowStyleClasses\" [entity]=\"entity\"\n                (click)=\"editEntity(entity, dCol)\"\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=\"displayedColumns\"></mat-header-row>\n        <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n    </mat-table>\n\n    <mat-spinner *ngIf=\"isLoading && data.baseData.displayLoadingSpinner\">\n    </mat-spinner>\n\n    <mat-paginator [length]=\"dataSource.filteredData.length\" [pageIndex]=\"0\" [pageSize]=\"10\" [pageSizeOptions]=\"[5, 10, 25, 50]\"></mat-paginator>\n</div>", styles: [".mdc-data-table__row:last-child .mdc-data-table__cell{border-bottom:1px solid rgba(0,0,0,.12)}button{width:100%}mat-spinner{margin:10px auto}.title{text-align:center}.actions-button,.create-button{height:56px;line-height:24px;font-size:16px}.mat-column-select{flex:0 0 75px}.enabled:hover{cursor:pointer}@media (max-width: 767px){.actions-button,.create-button{margin-bottom:15px}}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.MatDialog }, { type: i0.EnvironmentInjector }, { type: i2$2.Router }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [NGX_INTERNAL_GLOBAL_DEFAULT_VALUES]
@@ -7889,7 +8198,7 @@ class CustomDecoratorConfigInternal extends PropertyDecoratorConfigInternal {
     component;
     // eslint-disable-next-line jsdoc/require-jsdoc
     isValid;
-    // eslint-disable-next-line jsdoc/require-jsdoc, max-len
+    // eslint-disable-next-line jsdoc/require-jsdoc
     isEqual;
     // eslint-disable-next-line jsdoc/require-jsdoc
     customMetadata;
@@ -8091,7 +8400,6 @@ class ImageFileDecoratorConfigInternal extends PropertyDecoratorConfigInternal {
 function getDefaultMimeTypeErrorDialogData(data) {
     return {
         type: data.mimeTypeErrorDialog?.type ?? 'info-only',
-        // eslint-disable-next-line max-len
         text: data.mimeTypeErrorDialog?.text ?? (data.multiple ? ['One of the uploaded files has the wrong type.'] : ['The uploaded file has the wrong type.']),
         title: data.mimeTypeErrorDialog?.title ?? (data.multiple ? 'Error adding files' : 'Error adding file'),
         confirmButtonLabel: data.mimeTypeErrorDialog?.confirmButtonLabel,
@@ -8109,7 +8417,6 @@ function getDefaultMimeTypeErrorDialogData(data) {
 function getDefaultMaxSizeErrorDialogData(data) {
     return {
         type: data.mimeTypeErrorDialog?.type ?? 'info-only',
-        // eslint-disable-next-line max-len
         text: data.mimeTypeErrorDialog?.text ?? (data.multiple ? ['One of the uploaded files is too big'] : ['The uploaded files is too big']),
         title: data.mimeTypeErrorDialog?.title ?? (data.multiple ? 'Error adding files' : 'Error adding file'),
         confirmButtonLabel: data.mimeTypeErrorDialog?.confirmButtonLabel,
@@ -8371,5 +8678,5 @@ class StringDecoratorConfig extends PropertyDecoratorConfig {
  * Generated bundle index. Do not edit.
  */
 
-export { ArrayDecoratorConfig, DateUtilities, DecoratorTypes, Entity, EntityService, EntityUtilities, FileUtilities, NGX_CREATE_DATA, NGX_CREATE_DATA_ENTITY, NGX_CREATE_DATA_ENTITY_SERVICE, NGX_EDIT_DATA, NGX_EDIT_DATA_ENTITY, NGX_EDIT_DATA_ENTITY_SERVICE, NGX_GET_VALIDATION_ERROR_MESSAGE, NGX_GLOBAL_DEFAULT_VALUES, NgxMatEntityBaseDisplayColumnValueComponent, NgxMatEntityBaseInputComponent, NgxMatEntityConfirmDialogComponent, NgxMatEntityCreateDialogComponent, NgxMatEntityCreatePageComponent, NgxMatEntityEditDialogComponent, NgxMatEntityEditPageComponent, NgxMatEntityInputComponent, NgxMatEntityInputModule, NgxMatEntityTableComponent, NgxValidationErrorsTooltipTitle, TooltipComponent, UnsavedChangesGuard, ValidationUtilities, array, boolean, custom, date, defaultCreateDataRoute, defaultEditDataRoute, exportAsCsvMultiAction, exportAsJsonMultiAction, exportAsXmlMultiAction, file, getValidationErrorsTooltipContent, hasMany, importFromJsonMultiAction, number, object, referencesMany, referencesOne, string };
+export { ArrayDecoratorConfig, DateUtilities, DecoratorTypes, DynamicStyleClassDirective, Entity, EntityService, EntityUtilities, FileUtilities, IncludedInValidatorDirective, NGX_CREATE_DATA, NGX_CREATE_DATA_ENTITY, NGX_CREATE_DATA_ENTITY_SERVICE, NGX_EDIT_DATA, NGX_EDIT_DATA_ENTITY, NGX_EDIT_DATA_ENTITY_SERVICE, NGX_GET_VALIDATION_ERROR_MESSAGE, NGX_GLOBAL_DEFAULT_VALUES, NgxMatEntityBaseDisplayColumnValueComponent, NgxMatEntityBaseInputComponent, NgxMatEntityConfirmDialogComponent, NgxMatEntityCreateDialogComponent, NgxMatEntityCreatePageComponent, NgxMatEntityEditDialogComponent, NgxMatEntityEditPageComponent, NgxMatEntityInputComponent, NgxMatEntityInputModule, NgxMatEntityTableComponent, NgxValidationErrorsTooltipTitle, NumberDirective, TooltipComponent, TooltipDirective, UnsavedChangesGuard, ValidationUtilities, array, boolean, custom, date, defaultCreateDataRoute, defaultEditDataRoute, exportAsCsvMultiAction, exportAsJsonMultiAction, exportAsXmlMultiAction, file, getValidationErrorsTooltipContent, hasMany, importFromJsonMultiAction, number, object, referencesMany, referencesOne, string };
 //# sourceMappingURL=ngx-material-entity.mjs.map