ngx-material-entity 0.1.4 → 1.0.5

package/fesm2020/ngx-material-entity.mjs

@@ -1,45 +1,116 @@
 import 'reflect-metadata';
 import { __decorate, __metadata } from 'tslib';
+import { isEqual, cloneDeep, omit, isNil, omitBy, isArray } from 'lodash';
 import { BehaviorSubject, firstValueFrom, Subject, takeUntil } from 'rxjs';
-import { cloneDeep, isEqual, omit, omitBy, isNil } from 'lodash';
 import * as i0 from '@angular/core';
-import { Component, Inject, NgModule, Input, ViewChild } from '@angular/core';
+import { Component, Inject, NgModule, EventEmitter, Input, Output, Directive, HostListener, ViewChild } from '@angular/core';
 import * as i1 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
-import * as i6 from '@angular/material/checkbox';
+import * as i2 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import * as i3 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i12 from '@angular/common';
+import * as i6 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i14 from '@angular/forms';
+import * as i4 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import * as i9 from '@angular/material/table';
+import * as i4$2 from '@angular/material/table';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import { SelectionModel } from '@angular/cdk/collections';
-import * as i2 from '@angular/material/form-field';
+import * as i1$1 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i3$1 from '@angular/material/autocomplete';
+import * as i4$1 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i3$1 from '@angular/cdk/text-field';
+import * as i2$1 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import * as i4 from '@angular/material/core';
-import * as i5 from '@angular/material/select';
+import * as i3$2 from '@angular/material/core';
+import * as i2$2 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
-import * as i7 from '@angular/material/slide-toggle';
+import * as i2$3 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import * as i10 from '@angular/material/chips';
-import { MatChipsModule } from '@angular/material/chips';
-import * as i11 from '@angular/material/datepicker';
+import * as i2$4 from '@angular/material/slider';
+import { MatSliderModule } from '@angular/material/slider';
+import * as i2$5 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import * as i13 from '@angular/material/input';
-import { MatInputModule } from '@angular/material/input';
-import * as i15 from '@angular/cdk/text-field';
+import * as i2$6 from '@angular/material/chips';
+import { MatChipsModule } from '@angular/material/chips';
 import { MatIconModule } from '@angular/material/icon';
-import * as i7$1 from '@angular/material/paginator';
+import * as i7 from '@angular/material/paginator';
 import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
-import * as i4$1 from '@angular/material/menu';
+import * as i4$3 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
 
+/**
+ * Encapsulates all functionality of Reflect.
+ */
+class ReflectUtilities {
+    /**
+     * Gets the metadata value for the provided metadata key on the target object or its prototype chain.
+     *
+     * @param metadataKey - A key used to store and retrieve metadata.
+     * @param target - The target object on which the metadata is defined.
+     * @param propertyKey - The property key for the target.
+     * @returns The metadata value for the metadata key if found; otherwise, undefined.
+     */
+    static getMetadata(metadataKey, target, propertyKey) {
+        return Reflect.getMetadata(metadataKey, target, propertyKey);
+    }
+    /**
+     * Returns the string and symbol keys of the own properties of an object. The own properties of an object
+     * are those that are defined directly on that object, and are not inherited from the object's prototype.
+     *
+     * @param target - Object that contains the own properties.
+     * @returns The keys of the given object.
+     */
+    static ownKeys(target) {
+        return Reflect.ownKeys(target);
+    }
+    /**
+     * Gets the property of target, equivalent to `target[propertyKey]`.
+     *
+     * @param target - Object that contains the property on itself or in its prototype chain.
+     * @param propertyKey - The property name.
+     * @returns The property of the target of the given key.
+     */
+    static get(target, propertyKey) {
+        return Reflect.get(target, propertyKey);
+    }
+    /**
+     * Sets the property of target, equivalent to `target[propertyKey] = value`.
+     *
+     * @param target - Object that contains the property on itself or in its prototype chain.
+     * @param propertyKey - The property name.
+     * @param value - The value to set the property to.
+     * @returns If setting the value was successful.
+     */
+    static set(target, propertyKey, value) {
+        return Reflect.set(target, propertyKey, value);
+    }
+    /**
+     * Equivalent to `propertyKey in target`.
+     *
+     * @param target - Object that contains the property on itself or in its prototype chain.
+     * @param propertyKey - Name of the property.
+     * @returns Whether or not the given target has the key.
+     */
+    static has(target, propertyKey) {
+        return Reflect.has(target, propertyKey);
+    }
+    /**
+     * Define a unique metadata entry on the target.
+     *
+     * @param metadataKey - A key used to store and retrieve metadata.
+     * @param metadataValue - A value that contains attached metadata.
+     * @param target - The target object on which to define metadata.
+     * @param propertyKey - The property key for the target.
+     */
+    static defineMetadata(metadataKey, metadataValue, target, propertyKey) {
+        Reflect.defineMetadata(metadataKey, metadataValue, target, propertyKey);
+    }
+}
+
 /**
  * The base decorator for setting metadata on properties.
  *
@@ -49,8 +120,8 @@ import { MatMenuModule } from '@angular/material/menu';
  */
 function baseProperty(metadata, type) {
     return function (target, propertyKey) {
-        Reflect.defineMetadata('metadata', metadata, target, propertyKey);
-        Reflect.defineMetadata('type', type, target, propertyKey);
+        ReflectUtilities.defineMetadata('metadata', metadata, target, propertyKey);
+        ReflectUtilities.defineMetadata('type', type, target, propertyKey);
     };
 }
 
@@ -63,18 +134,26 @@ var DecoratorTypes;
     DecoratorTypes["STRING_DROPDOWN"] = "stringDropdown";
     DecoratorTypes["STRING_AUTOCOMPLETE"] = "stringAutocomplete";
     DecoratorTypes["STRING_TEXTBOX"] = "stringTextbox";
+    DecoratorTypes["STRING_PASSWORD"] = "stringPassword";
     DecoratorTypes["NUMBER"] = "number";
     DecoratorTypes["NUMBER_DROPDOWN"] = "numberDropdown";
+    DecoratorTypes["NUMBER_SLIDER"] = "numberSlider";
     DecoratorTypes["BOOLEAN_CHECKBOX"] = "boolean";
     DecoratorTypes["BOOLEAN_TOGGLE"] = "booleanToggle";
     DecoratorTypes["BOOLEAN_DROPDOWN"] = "booleanDropdown";
     DecoratorTypes["OBJECT"] = "object";
     DecoratorTypes["ARRAY"] = "array";
+    DecoratorTypes["ARRAY_DATE"] = "arrayDate";
+    DecoratorTypes["ARRAY_DATE_TIME"] = "arrayDateTime";
+    DecoratorTypes["ARRAY_DATE_RANGE"] = "arrayDateRange";
     DecoratorTypes["ARRAY_STRING_CHIPS"] = "arrayStringChips";
     DecoratorTypes["ARRAY_STRING_AUTOCOMPLETE_CHIPS"] = "arrayStringAutocompleteChips";
     DecoratorTypes["DATE"] = "date";
     DecoratorTypes["DATE_RANGE"] = "dateRange";
     DecoratorTypes["DATE_TIME"] = "dateTime";
+    DecoratorTypes["FILE_DEFAULT"] = "fileDefault";
+    DecoratorTypes["FILE_IMAGE"] = "fileImage";
+    DecoratorTypes["CUSTOM"] = "custom";
 })(DecoratorTypes || (DecoratorTypes = {}));
 
 /**
@@ -83,11 +162,11 @@ var DecoratorTypes;
 class PositionInternal {
     constructor(data) {
         this.validateInput(data);
-        this.row = data?.row ? data.row : -1;
-        this.order = data?.order ? data.order : -1;
+        this.row = data?.row ?? -1;
+        this.order = data?.order ?? -1;
     }
     validateInput(data) {
-        if (data?.order) {
+        if (data?.order != null) {
             if (data.order < 1) {
                 throw new Error('order must be at least 1');
             }
@@ -95,7 +174,7 @@ class PositionInternal {
                 throw new Error('order cannot be bigger than 12 (the minimum value for a bootstrap column)');
             }
         }
-        if (data?.row && (data.row < 1)) {
+        if (data?.row != null && data.row < 1) {
             throw new Error('row must be at least 1');
         }
     }
@@ -105,12 +184,12 @@ class PositionInternal {
  */
 class PropertyDecoratorConfigInternal {
     constructor(data) {
-        this.display = data.display != undefined ? data.display : true;
+        this.display = data.display ?? true;
         this.displayName = data.displayName;
-        this.required = data.required != undefined ? data.required : true;
-        this.omitForCreate = data.omitForCreate != undefined ? data.omitForCreate : false;
-        this.omitForUpdate = data.omitForUpdate != undefined ? data.omitForUpdate : false;
-        this.defaultWidths = data.defaultWidths ? data.defaultWidths : [6, 6, 12];
+        this.required = data.required ?? true;
+        this.omitForCreate = data.omitForCreate ?? false;
+        this.omitForUpdate = data.omitForUpdate ?? false;
+        this.defaultWidths = data.defaultWidths ?? [6, 6, 12];
         this.position = new PositionInternal(data.position);
     }
 }
@@ -161,6 +240,21 @@ class AutocompleteStringDecoratorConfigInternal extends PropertyDecoratorConfigI
         this.regex = data.regex;
     }
 }
+/**
+ * The internal PasswordStringDecoratorConfig. Sets default values.
+ */
+class PasswordStringDecoratorConfigInternal extends PropertyDecoratorConfigInternal {
+    constructor(data) {
+        super(data);
+        this.displayStyle = data.displayStyle;
+        this.minLength = data.minLength;
+        this.maxLength = data.maxLength;
+        this.regex = data.regex;
+        this.needsConfirmation = data.needsConfirmation ?? true;
+        this.confirmationDisplayName = data.confirmationDisplayName ?? 'Confirm Password';
+        this.passwordsDontMatchErrorMessage = data.passwordsDontMatchErrorMessage ?? 'Passwords need to match!';
+    }
+}
 
 /**
  * Decorator for setting and getting string Property metadata.
@@ -169,36 +263,93 @@ class AutocompleteStringDecoratorConfigInternal extends PropertyDecoratorConfigI
  * @returns The method that defines the metadata.
  */
 function string(metadata) {
-    if (metadata.displayStyle === 'dropdown') {
-        return baseProperty(new DropdownStringDecoratorConfigInternal(metadata), DecoratorTypes.STRING_DROPDOWN);
-    }
-    else if (metadata.displayStyle === 'autocomplete') {
-        return baseProperty(new AutocompleteStringDecoratorConfigInternal(metadata), DecoratorTypes.STRING_AUTOCOMPLETE);
-    }
-    else if (metadata.displayStyle === 'textbox') {
-        return baseProperty(new TextboxStringDecoratorConfigInternal(metadata), DecoratorTypes.STRING_TEXTBOX);
-    }
-    else {
-        return baseProperty(new DefaultStringDecoratorConfigInternal(metadata), DecoratorTypes.STRING);
+    switch (metadata.displayStyle) {
+        case 'dropdown':
+            return baseProperty(new DropdownStringDecoratorConfigInternal(metadata), DecoratorTypes.STRING_DROPDOWN);
+        case 'autocomplete':
+            return baseProperty(new AutocompleteStringDecoratorConfigInternal(metadata), DecoratorTypes.STRING_AUTOCOMPLETE);
+        case 'textbox':
+            return baseProperty(new TextboxStringDecoratorConfigInternal(metadata), DecoratorTypes.STRING_TEXTBOX);
+        case 'password':
+            return baseProperty(new PasswordStringDecoratorConfigInternal(metadata), DecoratorTypes.STRING_PASSWORD);
+        default:
+            return baseProperty(new DefaultStringDecoratorConfigInternal(metadata), DecoratorTypes.STRING);
     }
 }
 
 /**
- * A base Entity class with a builtin id.
+ * Encapsulates all functionality of lodash.
  */
-class Entity {
+class LodashUtilities {
+    /**
+     * Performs a deep comparison between two values to determine if they are
+     * equivalent.
+     *
+     * **Note:** This method supports comparing arrays, array buffers, booleans,
+     * date objects, error objects, maps, numbers, `Object` objects, regexps,
+     * sets, strings, symbols, and typed arrays. `Object` objects are compared
+     * by their own, not inherited, enumerable properties. Functions and DOM
+     * nodes are **not** supported.
+     *
+     * @param value - The value to compare.
+     * @param other - The other value to compare.
+     * @returns Returns `true` if the values are equivalent, else `false`.
+     */
+    static isEqual(value, other) {
+        return isEqual(value, other);
+    }
+    /**
+     * This method is like _.clone except that it recursively clones value.
+     *
+     * @param value - The value to recursively clone.
+     * @returns Returns the deep cloned value.
+     */
+    static cloneDeep(value) {
+        return cloneDeep(value);
+    }
+    /**
+     * The opposite of `_.pick`; this method creates an object composed of the
+     * own and inherited enumerable properties of `object` that are not omitted.
+     *
+     * @param object - The source object.
+     * @param paths - The property names to omit, specified
+     * individually or in arrays.
+     * @returns Returns the new object.
+     */
+    static omit(object, ...paths) {
+        return omit(object, ...paths);
+    }
+    /**
+     * Checks if `value` is `null` or `undefined`.
+     *
+     * @param value - The value to check.
+     * @returns Returns `true` if `value` is nullish, else `false`.
+     */
+    static isNil(value) {
+        return isNil(value);
+    }
+    /**
+     * The opposite of `_.pickBy`; this method creates an object composed of the
+     * own and inherited enumerable properties of `object` that `predicate`
+     * doesn't return truthy for.
+     *
+     * @param object - The source object.
+     * @param predicate - The function invoked per property.
+     * @returns Returns the new object.
+     */
+    static omitBy(object, predicate) {
+        return omitBy(object, predicate);
+    }
+    /**
+     * Checks if value is classified as an Array object.
+     *
+     * @param value - The value to check.
+     * @returns Returns true if value is correctly classified, else false.
+     */
+    static isArray(value) {
+        return isArray(value);
+    }
 }
-__decorate([
-    string({
-        omitForCreate: true,
-        omitForUpdate: true,
-        display: false,
-        displayStyle: 'line',
-        displayName: 'ID',
-        required: true
-    }),
-    __metadata("design:type", String)
-], Entity.prototype, "id", void 0);
 
 const DAY_IN_MS = 1000 * 60 * 60 * 24;
 /**
@@ -225,14 +376,14 @@ class DateUtilities {
         const res = [{ displayName: '-', value: undefined }];
         for (let hour = 0; hour < 24; hour++) {
             for (let minute = 0; minute < 60; minute += minuteSteps) {
-                res.push(this.getTimeDropdownValue(format, hour, minute));
+                res.push(DateUtilities.getTimeDropdownValue(format, hour, minute));
             }
         }
         return res;
     }
     static getTimeDropdownValue(format, hour, minute) {
-        const displayHour = this.getFormattedHour(format, cloneDeep(hour));
-        const displayMinute = this.getFormattedMinute(format, hour, minute);
+        const displayHour = DateUtilities.getFormattedHour(format, LodashUtilities.cloneDeep(hour));
+        const displayMinute = DateUtilities.getFormattedMinute(format, hour, minute);
         return {
             displayName: `${displayHour}:${displayMinute}`,
             value: {
@@ -270,10 +421,7 @@ class DateUtilities {
      */
     static getTimeFromDate(value) {
         if (!value) {
-            return {
-                hours: undefined,
-                minutes: undefined
-            };
+            return undefined;
         }
         else {
             return {
@@ -287,10 +435,10 @@ class DateUtilities {
      *
      * @param startDate - The start date.
      * @param endDate - The end date.
-     * @param metadataDateRangeDate - The metadata.
+     * @param filter - The custom filter from the metadata.
      * @returns All dates between the two provided dates. Includes start and end date.
      */
-    static getDatesBetween(startDate, endDate, metadataDateRangeDate) {
+    static getDatesBetween(startDate, endDate, filter) {
         const res = [];
         while (startDate.getFullYear() < endDate.getFullYear()
             || startDate.getMonth() < endDate.getMonth()
@@ -298,8 +446,8 @@ class DateUtilities {
             res.push(new Date(startDate));
             startDate.setTime(startDate.getTime() + DAY_IN_MS);
         }
-        if (metadataDateRangeDate.filter) {
-            return res.filter(d => metadataDateRangeDate.filter?.(d));
+        if (filter) {
+            return res.filter(d => filter(d));
         }
         else {
             return res;
@@ -308,14 +456,14 @@ class DateUtilities {
     /**
      * Get all valid times for the dropdown of a datetime property.
      *
-     * @param date - The date of the datetime.
      * @param times - All given times to filter.
+     * @param date - The date of the datetime.
      * @param min - The function that defines the minimum time.
      * @param max - The function that defines the maximum time.
      * @param filter - A filter function to do more specific time filtering. This could be e.g. The removal of lunch breaks.
      * @returns All valid dropdown values for the datetime property.
      */
-    static getValidTimesForDropdown(date, times, min, max, filter) {
+    static getValidTimesForDropdown(times, date, min, max, filter) {
         if (min) {
             const minTime = min(date);
             times = times.filter(t => !t.value
@@ -335,6 +483,152 @@ class DateUtilities {
         }
         return times;
     }
+    /**
+     * Checks if the time object has processable hours and minutes properties.
+     * Doesn't check custom validators like min/max from the metadata configuration.
+     *
+     * @param time - The time to check.
+     * @returns Whether or not the time object is unprocessable.
+     */
+    static timeIsUnprocessable(time) {
+        if (!time
+            || time.hours == null
+            || typeof time.hours !== 'number'
+            || Number.isNaN(time.hours)
+            || time.minutes == null
+            || typeof time.minutes !== 'number'
+            || Number.isNaN(time.minutes)) {
+            return true;
+        }
+        return false;
+    }
+}
+/**
+ * The default filter function to user when none was provided by the user.
+ */
+DateUtilities.defaultDateFilter = () => true;
+
+/**
+ * Provides functionality regarding files.
+ */
+class FileUtilities {
+    /**
+     * Gets the accept value for the html input.
+     *
+     * @param mimeTypes - The mimeTypes to get the accept string from.
+     * @returns A comma separated string of all the provided mime types.
+     */
+    static getAcceptString(mimeTypes) {
+        if (!mimeTypes?.length) {
+            return '*';
+        }
+        return mimeTypes.join(', ');
+    }
+    // TODO: Find a way to use blobs with jest
+    /* istanbul ignore next */
+    /**
+     * Reads a url to display the given file.
+     *
+     * @param file - The file to get the url from.
+     * @returns A promise of the url. Undefined if no file was provided.
+     */
+    static async getDataURLFromFile(file) {
+        if (!file) {
+            return undefined;
+        }
+        return new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onload = e => resolve(e.target?.result);
+            reader.onerror = e => reject(e);
+            reader.readAsDataURL(file);
+        });
+    }
+    // TODO: Find a way to use blobs with jest
+    /* istanbul ignore next */
+    /**
+     * Gets a file from the given url.
+     *
+     * @param url - The url to get the file from.
+     * @returns A promise of the File.
+     */
+    static async getFileFromUrl(url) {
+        const res = await fetch(url);
+        if (!res.ok) {
+            // TODO make error more robust
+            throw new Error(`Error fetching the file from the url ${url}`);
+        }
+        return await res.blob();
+    }
+    // TODO: Find a way to use blobs with jest
+    /* istanbul ignore next */
+    /**
+     * Gets the file data with the blob from the given File Data.
+     *
+     * @param data - The File Data to get the file data with blob from.
+     * @returns FileDataWithFile.
+     */
+    static async getFileData(data) {
+        if (data.file) {
+            return {
+                file: data.file,
+                name: data.name,
+                url: data.url,
+                type: data.type,
+                size: data.size
+            };
+        }
+        else {
+            return {
+                file: await FileUtilities.getFileFromUrl(data.url),
+                name: data.name,
+                url: data.url,
+                type: data.type,
+                size: data.size
+            };
+        }
+    }
+    /**
+     * Checks if the given file has a valid mime type.
+     *
+     * @param type - The type of the file to check.
+     * @param allowedMimeTypes - The allowed mime types.
+     * @returns Whether or not the given file has a valid mime type.
+     */
+    static isMimeTypeValid(type, allowedMimeTypes) {
+        if (allowedMimeTypes.includes('*')) {
+            return true;
+        }
+        for (const t of allowedMimeTypes) {
+            if (t === type) {
+                return true;
+            }
+            if (t.endsWith('*') && type.startsWith(t.split('*')[0])) {
+                return true;
+            }
+        }
+        return false;
+    }
+    /**
+     * Transform the given value to Megabytes.
+     *
+     * @param value - The original value.
+     * @param unit - If the value is B, KB or GB.
+     * @returns The given value as bytes.
+     */
+    static transformToMegaBytes(value, unit) {
+        const bytes = this.transformToBytes(LodashUtilities.cloneDeep(value), unit);
+        return bytes / 1000000;
+    }
+    static transformToBytes(value, unit) {
+        switch (unit) {
+            case 'B':
+                return value;
+            case 'KB':
+                return value * 1000;
+            case 'GB':
+                return value * 1000000000;
+        }
+    }
 }
 
 /**
@@ -373,6 +667,26 @@ class EntityUtilities {
         }
         return res;
     }
+    /**
+     * Gets all properties on the given entity which are files.
+     *
+     * @param entity - The entity to check for file properties.
+     * @param omit - Whether to leave out values that are omitted for create or delete.
+     * @returns The keys of all file properties on the given entity.
+     */
+    static getFileProperties(entity, omit) {
+        const res = [];
+        for (const key of EntityUtilities.keysOf(entity)) {
+            const type = EntityUtilities.getPropertyType(entity, key);
+            if (type === DecoratorTypes.FILE_DEFAULT || type === DecoratorTypes.FILE_IMAGE) {
+                const metadata = EntityUtilities.getPropertyMetadata(entity, key);
+                if (!(metadata.omitForCreate && omit === 'create') && !(metadata.omitForUpdate && omit === 'update')) {
+                    res.push(key);
+                }
+            }
+        }
+        return res;
+    }
     /**
      * Gets the metadata included in an property.
      *
@@ -385,16 +699,11 @@ class EntityUtilities {
     static getPropertyMetadata(entity, propertyKey, 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     type) {
-        try {
-            const metadata = Reflect.getMetadata('metadata', entity, propertyKey);
-            if (!metadata) {
-                throw new Error(`Could not find metadata for property ${String(propertyKey)} on the entity ${JSON.stringify(entity)}`);
-            }
-            return metadata;
-        }
-        catch (error) {
+        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)}`);
         }
+        return metadata;
     }
     /**
      * Gets the type of the property-metadata.
@@ -406,8 +715,8 @@ class EntityUtilities {
      */
     static getPropertyType(entity, propertyKey) {
         try {
-            const propertyType = Reflect.getMetadata('type', entity, propertyKey);
-            if (!propertyType) {
+            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;
@@ -428,12 +737,10 @@ class EntityUtilities {
     static new(target, entity) {
         for (const key in target) {
             const type = EntityUtilities.getPropertyType(target, key);
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-            let value = entity ? Reflect.get(entity, key) : undefined;
+            let value = entity ? ReflectUtilities.get(entity, key) : undefined;
             switch (type) {
                 case DecoratorTypes.OBJECT:
                     const objectMetadata = EntityUtilities.getPropertyMetadata(target, key, DecoratorTypes.OBJECT);
-                    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
                     value = new objectMetadata.EntityClass(value);
                     break;
                 case DecoratorTypes.ARRAY:
@@ -451,7 +758,7 @@ class EntityUtilities {
                 default:
                     break;
             }
-            Reflect.set(target, key, value);
+            ReflectUtilities.set(target, key, value);
         }
     }
     /**
@@ -488,37 +795,52 @@ class EntityUtilities {
         if (metadata.omitForUpdate && omit === 'update') {
             return true;
         }
-        if (metadata.required && !entity[key]) {
+        if (metadata.required && entity[key] == null) {
             return false;
         }
         switch (type) {
             case DecoratorTypes.BOOLEAN_DROPDOWN:
+                break;
             case DecoratorTypes.BOOLEAN_CHECKBOX:
             case DecoratorTypes.BOOLEAN_TOGGLE:
-                return true;
+                const entityBoolean = entity[key];
+                const booleanMetadata = metadata;
+                if (!EntityUtilities.isBooleanValid(entityBoolean, booleanMetadata)) {
+                    return false;
+                }
+                break;
             case DecoratorTypes.STRING_DROPDOWN:
-                return true;
+                break;
             case DecoratorTypes.STRING:
             case DecoratorTypes.STRING_AUTOCOMPLETE:
                 const entityString = entity[key];
                 const stringMetadata = metadata;
-                if (!this.isStringValid(entityString, stringMetadata)) {
+                if (!EntityUtilities.isStringValid(entityString, stringMetadata)) {
                     return false;
                 }
                 break;
             case DecoratorTypes.STRING_TEXTBOX:
                 const entityTextbox = entity[key];
                 const textboxMetadata = metadata;
-                if (!this.isTextboxValid(entityTextbox, textboxMetadata)) {
+                if (!EntityUtilities.isTextboxValid(entityTextbox, textboxMetadata)) {
+                    return false;
+                }
+                break;
+            case DecoratorTypes.STRING_PASSWORD:
+                const entityPassword = entity[key];
+                const passwordMetadata = metadata;
+                const confirmPassword = ReflectUtilities.getMetadata('confirmPassword', entity, key);
+                if (!EntityUtilities.isPasswordValid(entityPassword, passwordMetadata, confirmPassword)) {
                     return false;
                 }
                 break;
             case DecoratorTypes.NUMBER_DROPDOWN:
                 return true;
             case DecoratorTypes.NUMBER:
+            case DecoratorTypes.NUMBER_SLIDER:
                 const entityNumber = entity[key];
                 const numberMetadata = metadata;
-                if (!this.isNumberValid(entityNumber, numberMetadata)) {
+                if (!EntityUtilities.isNumberValid(entityNumber, numberMetadata)) {
                     return false;
                 }
                 break;
@@ -532,6 +854,9 @@ class EntityUtilities {
                 break;
             case DecoratorTypes.ARRAY_STRING_CHIPS:
             case DecoratorTypes.ARRAY_STRING_AUTOCOMPLETE_CHIPS:
+            case DecoratorTypes.ARRAY_DATE:
+            case DecoratorTypes.ARRAY_DATE_TIME:
+            case DecoratorTypes.ARRAY_DATE_RANGE:
             case DecoratorTypes.ARRAY:
                 const entityArray = entity[key];
                 const arrayMetadata = metadata;
@@ -542,21 +867,36 @@ class EntityUtilities {
             case DecoratorTypes.DATE:
                 const entityDate = new Date(entity[key]);
                 const dateMetadata = metadata;
-                if (!this.isDateValid(entityDate, dateMetadata)) {
+                if (!EntityUtilities.isDateValid(entityDate, dateMetadata)) {
                     return false;
                 }
                 break;
             case DecoratorTypes.DATE_RANGE:
-                const entityDateRange = cloneDeep(entity[key]);
+                const entityDateRange = LodashUtilities.cloneDeep(entity[key]);
                 const dateRangeMetadata = metadata;
-                if (!this.isDateRangeValid(entityDateRange, dateRangeMetadata)) {
+                if (!EntityUtilities.isDateRangeValid(entityDateRange, dateRangeMetadata)) {
                     return false;
                 }
                 break;
             case DecoratorTypes.DATE_TIME:
                 const entityDateTime = new Date(entity[key]);
                 const dateTimeMetadata = metadata;
-                if (!this.isDateTimeValid(entityDateTime, dateTimeMetadata)) {
+                if (!EntityUtilities.isDateTimeValid(entityDateTime, dateTimeMetadata)) {
+                    return false;
+                }
+                break;
+            case DecoratorTypes.FILE_DEFAULT:
+            case DecoratorTypes.FILE_IMAGE:
+                const entityFile = entity[key];
+                const entityFileMetadata = metadata;
+                if (!EntityUtilities.isFileDataValid(entityFile, entityFileMetadata)) {
+                    return false;
+                }
+                break;
+            case DecoratorTypes.CUSTOM:
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const customMetadata = metadata;
+                if (!customMetadata.isValid(entity[key], omit)) {
                     return false;
                 }
                 break;
@@ -565,6 +905,12 @@ class EntityUtilities {
         }
         return true;
     }
+    static isBooleanValid(value, metadata) {
+        if (metadata.required && !value) {
+            return false;
+        }
+        return true;
+    }
     static isStringValid(value, metadata) {
         if (metadata.maxLength && value.length > metadata.maxLength) {
             return false;
@@ -586,6 +932,21 @@ class EntityUtilities {
         }
         return true;
     }
+    static isPasswordValid(value, metadata, confirmPassword) {
+        if (value !== confirmPassword) {
+            return false;
+        }
+        if (metadata.maxLength && value.length > metadata.maxLength) {
+            return false;
+        }
+        if (metadata.minLength && value.length < metadata.minLength) {
+            return false;
+        }
+        if (metadata.regex && !value.match(metadata.regex)) {
+            return false;
+        }
+        return true;
+    }
     static isNumberValid(value, metadata) {
         if (metadata.max && value > metadata.max) {
             return false;
@@ -608,8 +969,13 @@ class EntityUtilities {
         return true;
     }
     static isDateRangeValid(value, metadata) {
-        if (metadata.required && (!value.start || !value.end)) {
-            return false;
+        if (metadata.required) {
+            if (!value.start) {
+                return false;
+            }
+            if (!value.end) {
+                return false;
+            }
         }
         value.start = new Date(value.start);
         value.end = new Date(value.end);
@@ -679,6 +1045,27 @@ class EntityUtilities {
         }
         return true;
     }
+    static isFileDataValid(value, metadata) {
+        const files = metadata.multiple ? value : [value];
+        let fileSizeTotal = 0;
+        // eslint-disable-next-line @typescript-eslint/prefer-for-of
+        for (let i = 0; i < files.length; i++) {
+            if (!files[i].name || !files[i].file && !files[i].url) {
+                return false;
+            }
+            if (!FileUtilities.isMimeTypeValid(files[i].type, metadata.allowedMimeTypes)) {
+                return false;
+            }
+            if (FileUtilities.transformToMegaBytes(files[i].size, 'B') > metadata.maxSize) {
+                return false;
+            }
+            fileSizeTotal += files[i].size;
+            if (FileUtilities.transformToMegaBytes(fileSizeTotal, 'B') > metadata.maxSizeTotal) {
+                return false;
+            }
+        }
+        return true;
+    }
     /**
      * Checks if an entity is "dirty" (if its values have changed).
      *
@@ -686,19 +1073,21 @@ class EntityUtilities {
      * @param entityPriorChanges - The entity before the changes.
      * @returns Whether or not the entity is dirty.
      */
-    static dirty(entity, entityPriorChanges) {
+    static async isDirty(entity, entityPriorChanges) {
         if (!entityPriorChanges) {
             return false;
         }
         else {
-            const differences = this.differencesForDirty(entity, entityPriorChanges);
+            const differences = await EntityUtilities.differencesForDirty(entity, entityPriorChanges);
             return differences.length ? true : false;
         }
     }
-    static differencesForDirty(entity, entityPriorChanges) {
+    static async differencesForDirty(entity, entityPriorChanges) {
         const res = [];
         for (const key in entity) {
-            if (!this.isEqual(entity[key], entityPriorChanges[key], EntityUtilities.getPropertyMetadata(entity, key))) {
+            const metadata = EntityUtilities.getPropertyMetadata(entity, key);
+            const type = EntityUtilities.getPropertyType(entity, key);
+            if (!(await EntityUtilities.isEqual(entity[key], entityPriorChanges[key], metadata, type))) {
                 res.push({
                     key: key,
                     before: entityPriorChanges[key],
@@ -715,48 +1104,121 @@ class EntityUtilities {
      * @param entityPriorChanges - The second entity to compare.
      * @returns The difference between the two Entities in form of a Partial.
      */
-    static difference(entity, entityPriorChanges) {
+    static async difference(entity, entityPriorChanges) {
         const res = {};
         for (const key in entity) {
-            if (!this.isEqual(entity[key], entityPriorChanges[key], EntityUtilities.getPropertyMetadata(entity, key))) {
+            const metadata = EntityUtilities.getPropertyMetadata(entity, key);
+            const type = EntityUtilities.getPropertyType(entity, key);
+            if (!(await EntityUtilities.isEqual(entity[key], entityPriorChanges[key], metadata, type))) {
                 res[key] = entity[key];
             }
         }
         return res;
     }
-    static isEqual(value, valuePriorChanges, metadata) {
-        if (this.isDateRange(value) && this.isDateRange(valuePriorChanges)) {
-            const dateRange = cloneDeep(value);
-            dateRange.start = new Date(value.start);
-            dateRange.end = new Date(value.end);
-            dateRange.values = DateUtilities.getDatesBetween(dateRange.start, dateRange.end, metadata);
-            const dateRangePriorChanges = cloneDeep(valuePriorChanges);
-            dateRangePriorChanges.start = new Date(valuePriorChanges.start);
-            dateRangePriorChanges.end = new Date(valuePriorChanges.end);
-            dateRangePriorChanges.values = DateUtilities.getDatesBetween(dateRangePriorChanges.start, dateRangePriorChanges.end, metadata);
-            return isEqual(dateRange, dateRangePriorChanges);
-        }
-        if (metadata.displayStyle === 'date') {
-            const date = new Date(DateUtilities.asDate(value));
-            const datePriorChanges = new Date(DateUtilities.asDate(valuePriorChanges));
-            date.setHours(0, 0, 0, 0);
-            datePriorChanges.setHours(0, 0, 0, 0);
-            return isEqual(date, datePriorChanges);
-        }
-        return isEqual(value, valuePriorChanges);
-    }
-    static isDateRange(value) {
-        const dateRange = value;
-        if (dateRange.start && dateRange.end) {
-            try {
-                new Date(dateRange.start);
-                new Date(dateRange.end);
-                return true;
+    /**
+     * Checks if two given values are equal.
+     * It uses the isEqual method from LodashUtilities and extends it with functionality regarding Dates.
+     *
+     * @param value - The updated value.
+     * @param valuePriorChanges - The value before any changes.
+     * @param metadata - The metadata of the property.
+     * @param type - The type of the property.
+     * @returns Whether or not the given values are equal.
+     */
+    static async isEqual(value, valuePriorChanges, metadata, type) {
+        switch (type) {
+            case DecoratorTypes.DATE_RANGE:
+                return EntityUtilities.isEqualDateRange(value, valuePriorChanges, metadata.filter);
+            case DecoratorTypes.DATE:
+                return EntityUtilities.isEqualDate(value, valuePriorChanges);
+            case DecoratorTypes.DATE_TIME:
+                return EntityUtilities.isEqualDateTime(value, valuePriorChanges);
+            case DecoratorTypes.ARRAY_DATE:
+            case DecoratorTypes.ARRAY_DATE_TIME:
+                return EntityUtilities.isEqualArrayDate(value, valuePriorChanges);
+            case DecoratorTypes.ARRAY_DATE_RANGE:
+                return EntityUtilities.isEqualArrayDateRange(value, valuePriorChanges, metadata.filter);
+            case DecoratorTypes.FILE_IMAGE:
+            case DecoratorTypes.FILE_DEFAULT:
+                return EntityUtilities.isEqualFile(value, valuePriorChanges, metadata.multiple);
+            case DecoratorTypes.CUSTOM:
+                // eslint-disable-next-line max-len, @typescript-eslint/no-explicit-any
+                return EntityUtilities.isEqualCustom(value, valuePriorChanges, metadata);
+            default:
+                return LodashUtilities.isEqual(value, valuePriorChanges);
+        }
+    }
+    static isEqualArrayDate(value, valuePriorChanges) {
+        const newValue = value.map(v => new Date(v)).sort();
+        const newValuePriorChanges = valuePriorChanges.map(v => new Date(v)).sort();
+        return LodashUtilities.isEqual(newValue, newValuePriorChanges);
+    }
+    static isEqualArrayDateRange(value, valuePriorChanges, filter) {
+        const dateRanges = value.sort();
+        const dateRangesPriorChanges = valuePriorChanges.sort();
+        if (dateRanges.length !== dateRangesPriorChanges.length) {
+            return false;
+        }
+        for (let i = 0; i < dateRanges.length; i++) {
+            if (!EntityUtilities.isEqualDateRange(dateRanges[i], dateRangesPriorChanges[i], filter)) {
+                return false;
             }
-            catch (error) { }
-            ;
         }
-        return false;
+        return true;
+    }
+    static isEqualDateTime(value, valuePriorChanges) {
+        const date = new Date(value);
+        const datePriorChanges = new Date(valuePriorChanges);
+        return LodashUtilities.isEqual(date, datePriorChanges);
+    }
+    static isEqualDate(value, valuePriorChanges) {
+        const date = new Date(value);
+        const datePriorChanges = new Date(valuePriorChanges);
+        date.setHours(0, 0, 0, 0);
+        datePriorChanges.setHours(0, 0, 0, 0);
+        return LodashUtilities.isEqual(date, datePriorChanges);
+    }
+    static isEqualDateRange(value, valuePriorChanges, filter) {
+        const dateRange = LodashUtilities.cloneDeep(value);
+        dateRange.start = new Date(value.start);
+        dateRange.end = new Date(value.end);
+        dateRange.values = DateUtilities.getDatesBetween(dateRange.start, dateRange.end, filter);
+        const dateRangePriorChanges = LodashUtilities.cloneDeep(valuePriorChanges);
+        dateRangePriorChanges.start = new Date(valuePriorChanges.start);
+        dateRangePriorChanges.end = new Date(valuePriorChanges.end);
+        dateRangePriorChanges.values = DateUtilities.getDatesBetween(dateRangePriorChanges.start, dateRangePriorChanges.end, filter);
+        return LodashUtilities.isEqual(dateRange, dateRangePriorChanges);
+    }
+    // TODO: Find a way to use blobs with jest
+    /* istanbul ignore next */
+    static async isEqualFile(value, valuePriorChanges, multiple) {
+        const files = multiple ? value.sort() : [value].sort();
+        const filesPriorChanges = multiple ? valuePriorChanges.sort() : [valuePriorChanges].sort();
+        if (files.length !== filesPriorChanges.length) {
+            return false;
+        }
+        for (let i = 0; i < files.length; i++) {
+            // checks this before actually getting any files due to performance reasons.
+            if (!LodashUtilities.isEqual(files[i]?.name, filesPriorChanges[i]?.name)
+                || !LodashUtilities.isEqual(files[i]?.url, filesPriorChanges[i]?.url)) {
+                return false;
+            }
+            files[i] = filesPriorChanges[i].file && !files[i].file ? await FileUtilities.getFileData(files[i]) : files[i];
+            // eslint-disable-next-line max-len
+            filesPriorChanges[i] = files[i].file && !filesPriorChanges[i].file ? await FileUtilities.getFileData(filesPriorChanges[i]) : filesPriorChanges[i];
+            if (!LodashUtilities.isEqual(await files[i].file?.text(), await filesPriorChanges[i].file?.text())) {
+                return false;
+            }
+        }
+        return true;
+    }
+    static isEqualCustom(value, valuePriorChanges, 
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    metadata) {
+        if (!metadata.isEqual(value, valuePriorChanges, metadata)) {
+            return false;
+        }
+        return true;
     }
     /**
      * Compare function for sorting entity keys by their order value.
@@ -778,7 +1240,7 @@ class EntityUtilities {
         else if (metadataB.position.order === -1) {
             return -1;
         }
-        return ((metadataA.position.order) - (metadataB.position.order));
+        return metadataA.position.order - metadataB.position.order;
     }
     /**
      * Gets the bootstrap column values for "lg", "md", "sm".
@@ -807,7 +1269,7 @@ class EntityUtilities {
      */
     static resetChangesOnEntity(entity, entityPriorChanges) {
         for (const key in entityPriorChanges) {
-            Reflect.set(entity, key, Reflect.get(entityPriorChanges, key));
+            ReflectUtilities.set(entity, key, ReflectUtilities.get(entityPriorChanges, key));
         }
     }
     /**
@@ -821,17 +1283,17 @@ class EntityUtilities {
     static getEntityRows(entity, hideOmitForCreate = false, hideOmitForEdit = false) {
         const res = [];
         const keys = EntityUtilities.keysOf(entity, hideOmitForCreate, hideOmitForEdit);
-        const numberOfRows = this.getNumberOfRows(keys, entity);
+        const numberOfRows = EntityUtilities.getNumberOfRows(keys, entity);
         for (let i = 1; i <= numberOfRows; i++) {
             const row = {
                 row: i,
-                keys: this.getKeysForRow(keys, entity, i)
+                keys: EntityUtilities.getKeysForRow(keys, entity, i)
             };
             res.push(row);
         }
         const lastRow = {
             row: numberOfRows + 1,
-            keys: this.getKeysForRow(keys, entity, -1)
+            keys: EntityUtilities.getKeysForRow(keys, entity, -1)
         };
         res.push(lastRow);
         return res;
@@ -855,7 +1317,7 @@ class EntityUtilities {
      * @returns An array of keys of the entity.
      */
     static keysOf(entity, hideOmitForCreate = false, hideOmitForEdit = false) {
-        let keys = Reflect.ownKeys(entity);
+        let keys = ReflectUtilities.ownKeys(entity);
         if (hideOmitForCreate) {
             const omitForCreateKeys = EntityUtilities.getOmitForCreate(entity);
             keys = keys.filter(k => !omitForCreateKeys.includes(k));
@@ -873,19 +1335,39 @@ EntityUtilities.construct = EntityUtilities.new;
 EntityUtilities.build = EntityUtilities.new;
 
 /**
- * A generic EntityService class.
- * Offers basic CRUD-functionality.
- * You should create a service for every Entity you have.
- * If you extend from this you need to make sure that the extended Service can be injected.
+ * A base Entity class with a builtin id.
  */
-class EntityService {
-    constructor(http) {
-        this.http = http;
-        /**
-         * The key which holds the id value.
-         *
-         * @default 'id'
-         */
+class Entity {
+    constructor(entity) {
+        EntityUtilities.new(this, entity);
+    }
+}
+__decorate([
+    string({
+        omitForCreate: true,
+        omitForUpdate: true,
+        display: false,
+        displayStyle: 'line',
+        displayName: 'ID',
+        required: true
+    }),
+    __metadata("design:type", String)
+], Entity.prototype, "id", void 0);
+
+/**
+ * A generic EntityService class.
+ * Offers basic CRUD-functionality.
+ * You should create a service for every Entity you have.
+ * If you extend from this you need to make sure that the extended Service can be injected.
+ */
+class EntityService {
+    constructor(http) {
+        this.http = http;
+        /**
+         * The key which holds the id value.
+         *
+         * @default 'id'
+         */
         this.idKey = 'id';
         /**
          * A subject of all the entity values.
@@ -909,7 +1391,54 @@ class EntityService {
      * @returns A Promise of the created entity.
      */
     async create(entity) {
-        const body = omit(entity, EntityUtilities.getOmitForCreate(entity));
+        const body = LodashUtilities.omit(entity, EntityUtilities.getOmitForCreate(entity));
+        const filePropertyKeys = EntityUtilities.getFileProperties(entity);
+        if (!filePropertyKeys.length) {
+            return await this.createWithJson(body);
+        }
+        else {
+            return await this.createWithFormData(body, filePropertyKeys, entity);
+        }
+    }
+    // TODO: Find a way to use blobs with jest
+    /* istanbul ignore next */
+    /**
+     * Creates the entity with form data when the entity contains files in contrast to creating it with a normal json body.
+     * All file values are stored inside their respective property key and their name.
+     * Form data is able to handle setting multiple files to the same key.
+     *
+     * @param body - The body Of the request.
+     * @param filePropertyKeys - All property keys that are files and need to be added to the form data.
+     * @param entity - The entity to create. This is needed in addition to the body because the body doesn't contain any metadata.
+     * @returns The created entity from the server.
+     */
+    async createWithFormData(body, filePropertyKeys, entity) {
+        const formData = new FormData();
+        formData.append('body', JSON.stringify(LodashUtilities.omit(body, filePropertyKeys)));
+        for (const key of filePropertyKeys) {
+            if (EntityUtilities.getPropertyMetadata(entity, key, DecoratorTypes.FILE_DEFAULT).multiple) {
+                const fileDataValues = body[key];
+                for (const value of fileDataValues) {
+                    formData.append(key, (await FileUtilities.getFileData(value)).file, value.name);
+                }
+            }
+            else {
+                const fileData = body[key];
+                formData.append(key, (await FileUtilities.getFileData(fileData)).file, fileData.name);
+            }
+        }
+        const e = await firstValueFrom(this.http.post(this.baseUrl, formData));
+        this.entities.push(e);
+        this.entitiesSubject.next(this.entities);
+        return e;
+    }
+    /**
+     * Creates the entity with a normal json body in contrast to creating it with form data when the entity contains files.
+     *
+     * @param body - The body Of the request.
+     * @returns The created entity from the server.
+     */
+    async createWithJson(body) {
         const e = await firstValueFrom(this.http.post(this.baseUrl, body));
         this.entities.push(e);
         this.entitiesSubject.next(this.entities);
@@ -934,9 +1463,57 @@ class EntityService {
      * It Is used to get changed values and only update them instead of sending the whole entity data.
      */
     async update(entity, entityPriorChanges) {
-        const reqBody = omit(EntityUtilities.difference(entity, entityPriorChanges), EntityUtilities.getOmitForUpdate(entity));
-        const updatedEntity = await firstValueFrom(this.http.patch(`${this.baseUrl}/${entityPriorChanges[this.idKey]}`, omitBy(reqBody, isNil)));
-        this.entities[this.entities.findIndex(e => e[this.idKey] === entityPriorChanges[this.idKey])] = updatedEntity;
+        const body = LodashUtilities.omit(await EntityUtilities.difference(entity, entityPriorChanges), EntityUtilities.getOmitForUpdate(entity));
+        const filePropertyKeys = EntityUtilities.getFileProperties(entityPriorChanges);
+        if (!filePropertyKeys.length) {
+            await this.updateWithJson(body, entityPriorChanges[this.idKey]);
+        }
+        else {
+            await this.updateWithFormData(body, filePropertyKeys, entity, entityPriorChanges[this.idKey]);
+        }
+    }
+    // TODO: Find a way to use blobs with jest
+    /* istanbul ignore next */
+    /**
+     * Updates the entity with form data when the entity contains files in contrast to creating it with a normal json body.
+     * All file values are stored inside their respective property key and their name.
+     * Form data is able to handle setting multiple files to the same key.
+     *
+     * @param body - The request body. Already contains only properties that have changed.
+     * @param filePropertyKeys - The keys of all properties which are files and need to separately be appended to the form data.
+     * @param entity - The original entity. Is needed to get the metadata of all the files.
+     * @param id - The id of the entity to update.
+     */
+    async updateWithFormData(body, filePropertyKeys, entity, id) {
+        const formData = new FormData();
+        formData.append('body', JSON.stringify(LodashUtilities.omitBy(body, LodashUtilities.isNil)));
+        for (const key of filePropertyKeys) {
+            if (EntityUtilities.getPropertyMetadata(entity, key, DecoratorTypes.FILE_DEFAULT).multiple) {
+                // eslint-disable-next-line max-len
+                const fileDataValues = body[key];
+                for (const value of fileDataValues) {
+                    formData.append(key, (await FileUtilities.getFileData(value)).file, value.name);
+                }
+            }
+            else {
+                // eslint-disable-next-line max-len
+                const fileData = body[key];
+                formData.append(key, (await FileUtilities.getFileData(fileData)).file, fileData.name);
+            }
+        }
+        const updatedEntity = await firstValueFrom(this.http.patch(`${this.baseUrl}/${id}`, formData));
+        this.entities[this.entities.findIndex(e => e[this.idKey] === id)] = updatedEntity;
+        this.entitiesSubject.next(this.entities);
+    }
+    /**
+     * Updates the entity with a normal json body in contrast to updating it with form data when the entity contains files.
+     *
+     * @param body - The body of the Request. Has already removed all unnecessary values.
+     * @param id - The id of the entity to update.
+     */
+    async updateWithJson(body, id) {
+        const updatedEntity = await firstValueFrom(this.http.patch(`${this.baseUrl}/${id}`, LodashUtilities.omitBy(body, LodashUtilities.isNil)));
+        this.entities[this.entities.findIndex(e => e[this.idKey] === id)] = updatedEntity;
         this.entitiesSubject.next(this.entities);
     }
     /**
@@ -971,7 +1548,6 @@ class BaseBuilder {
     validateInput(data) {
         // By default, no validation is done
     }
-    ;
     /**
      * Sets the value for the given key if no user value was provided.
      *
@@ -980,7 +1556,7 @@ class BaseBuilder {
      * @returns The Builder.
      */
     withDefault(key, value) {
-        if (!this.inputData || !this.inputData[key]) {
+        if (this.inputData == null || this.inputData[key] == null) {
             this.data[key] = value;
         }
         return this;
@@ -1018,18 +1594,18 @@ class ConfirmDialogDataBuilder extends BaseBuilder {
     }
     // eslint-disable-next-line jsdoc/require-jsdoc
     generateBaseData(data) {
-        return new ConfirmDialogDataInternal(data?.text ? data.text : ['Do you really want to do this?'], data?.type ? data.type : 'default', data?.confirmButtonLabel ? data.confirmButtonLabel : 'Confirm', data?.cancelButtonLabel ? data.cancelButtonLabel : 'Cancel', data?.title ? data.title : 'Confirmation', data?.requireConfirmation ? data.requireConfirmation : false, data?.confirmationText);
+        return new ConfirmDialogDataInternal(data?.text ?? ['Do you really want to do this?'], data?.type ?? 'default', data?.confirmButtonLabel ?? 'Confirm', data?.cancelButtonLabel ?? 'Cancel', data?.title ?? 'Confirmation', data?.requireConfirmation ?? false, data?.confirmationText);
     }
     // eslint-disable-next-line jsdoc/require-jsdoc
     validateInput(data) {
         if (!data) {
             return;
         }
-        if (data.requireConfirmation && !data.confirmationText) {
+        if (data.requireConfirmation === true && !data.confirmationText) {
             throw new Error(`Missing required Input data "confirmationText".
             You can only omit this value when "requireConfirmation" is false.`);
         }
-        if (!data.requireConfirmation && data.confirmationText) {
+        if (data.requireConfirmation !== true && data.confirmationText) {
             throw new Error('The "confirmationText" will never be shown because "requireConfirmation" is not set to true');
         }
         if (data.type === 'info-only' && data.cancelButtonLabel) {
@@ -1067,10 +1643,10 @@ class NgxMatEntityConfirmDialogComponent {
     }
 }
 NgxMatEntityConfirmDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityConfirmDialogComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-NgxMatEntityConfirmDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NgxMatEntityConfirmDialogComponent, selector: "ngx-mat-entity-confirm-dialog", ngImport: i0, template: "<h2 mat-dialog-title *ngIf=\"data.title\">{{data.title}}</h2>\n\n<mat-dialog-content>\n    <p *ngFor=\"let paragraph of data.text\">{{paragraph}}</p>\n    <div *ngIf=\"data.requireConfirmation\" class=\"checkbox-wrapper\">\n        <mat-checkbox [(ngModel)]=\"confirm\" name=\"confirm\">\n            {{data.confirmationText}}\n        </mat-checkbox>\n    </div>\n</mat-dialog-content>\n\n<mat-dialog-actions>\n    <button *ngIf=\"data.type === 'delete'\" mat-raised-button color=\"warn\" (click)=\"confirmAction()\" [disabled]=\"data.requireConfirmation && !confirm\" class=\"confirm-button\">\n        {{data.confirmButtonLabel}}\n    </button>\n    <button *ngIf=\"data.type !== 'delete'\" mat-raised-button (click)=\"confirmAction()\" [disabled]=\"data.requireConfirmation && !confirm\" class=\"confirm-button\">\n        {{data.confirmButtonLabel}}\n    </button>\n    <button mat-raised-button (click)=\"cancel()\" class=\"cancel-button\">\n        {{data.cancelButtonLabel}}\n    </button>\n</mat-dialog-actions>\n", styles: [".checkbox-wrapper{min-height:50px;display:flex}.checkbox-wrapper>mat-checkbox{align-self:center}mat-dialog-actions{display:flex;justify-content:space-between}\n"], components: [{ type: i6.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i12.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i14.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i14.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }] });
+NgxMatEntityConfirmDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NgxMatEntityConfirmDialogComponent, selector: "ngx-mat-entity-confirm-dialog", ngImport: i0, template: "<h2 mat-dialog-title *ngIf=\"data.title\">{{data.title}}</h2>\n\n<mat-dialog-content>\n    <p *ngFor=\"let paragraph of data.text\">{{paragraph}}</p>\n    <div *ngIf=\"data.requireConfirmation\" class=\"checkbox-wrapper\">\n        <mat-checkbox [(ngModel)]=\"confirm\" name=\"confirm\">\n            {{data.confirmationText}}\n        </mat-checkbox>\n    </div>\n</mat-dialog-content>\n\n<mat-dialog-actions>\n    <button *ngIf=\"data.type === 'delete'\" mat-raised-button color=\"warn\" (click)=\"confirmAction()\" [disabled]=\"data.requireConfirmation && !confirm\" class=\"confirm-button\">\n        {{data.confirmButtonLabel}}\n    </button>\n    <button *ngIf=\"data.type !== 'delete'\" mat-raised-button (click)=\"confirmAction()\" [disabled]=\"data.requireConfirmation && !confirm\" class=\"confirm-button\">\n        {{data.confirmButtonLabel}}\n    </button>\n    <button *ngIf=\"data.type !== 'info-only'\" mat-raised-button (click)=\"cancel()\" class=\"cancel-button\">\n        {{data.cancelButtonLabel}}\n    </button>\n</mat-dialog-actions>\n", styles: [".checkbox-wrapper{min-height:50px;display:flex}.checkbox-wrapper>mat-checkbox{align-self:center}mat-dialog-actions{display:flex;justify-content:space-between}\n"], components: [{ type: i2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityConfirmDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-mat-entity-confirm-dialog', template: "<h2 mat-dialog-title *ngIf=\"data.title\">{{data.title}}</h2>\n\n<mat-dialog-content>\n    <p *ngFor=\"let paragraph of data.text\">{{paragraph}}</p>\n    <div *ngIf=\"data.requireConfirmation\" class=\"checkbox-wrapper\">\n        <mat-checkbox [(ngModel)]=\"confirm\" name=\"confirm\">\n            {{data.confirmationText}}\n        </mat-checkbox>\n    </div>\n</mat-dialog-content>\n\n<mat-dialog-actions>\n    <button *ngIf=\"data.type === 'delete'\" mat-raised-button color=\"warn\" (click)=\"confirmAction()\" [disabled]=\"data.requireConfirmation && !confirm\" class=\"confirm-button\">\n        {{data.confirmButtonLabel}}\n    </button>\n    <button *ngIf=\"data.type !== 'delete'\" mat-raised-button (click)=\"confirmAction()\" [disabled]=\"data.requireConfirmation && !confirm\" class=\"confirm-button\">\n        {{data.confirmButtonLabel}}\n    </button>\n    <button mat-raised-button (click)=\"cancel()\" class=\"cancel-button\">\n        {{data.cancelButtonLabel}}\n    </button>\n</mat-dialog-actions>\n", styles: [".checkbox-wrapper{min-height:50px;display:flex}.checkbox-wrapper>mat-checkbox{align-self:center}mat-dialog-actions{display:flex;justify-content:space-between}\n"] }]
+            args: [{ selector: 'ngx-mat-entity-confirm-dialog', template: "<h2 mat-dialog-title *ngIf=\"data.title\">{{data.title}}</h2>\n\n<mat-dialog-content>\n    <p *ngFor=\"let paragraph of data.text\">{{paragraph}}</p>\n    <div *ngIf=\"data.requireConfirmation\" class=\"checkbox-wrapper\">\n        <mat-checkbox [(ngModel)]=\"confirm\" name=\"confirm\">\n            {{data.confirmationText}}\n        </mat-checkbox>\n    </div>\n</mat-dialog-content>\n\n<mat-dialog-actions>\n    <button *ngIf=\"data.type === 'delete'\" mat-raised-button color=\"warn\" (click)=\"confirmAction()\" [disabled]=\"data.requireConfirmation && !confirm\" class=\"confirm-button\">\n        {{data.confirmButtonLabel}}\n    </button>\n    <button *ngIf=\"data.type !== 'delete'\" mat-raised-button (click)=\"confirmAction()\" [disabled]=\"data.requireConfirmation && !confirm\" class=\"confirm-button\">\n        {{data.confirmButtonLabel}}\n    </button>\n    <button *ngIf=\"data.type !== 'info-only'\" mat-raised-button (click)=\"cancel()\" class=\"cancel-button\">\n        {{data.cancelButtonLabel}}\n    </button>\n</mat-dialog-actions>\n", styles: [".checkbox-wrapper{min-height:50px;display:flex}.checkbox-wrapper>mat-checkbox{align-self:center}mat-dialog-actions{display:flex;justify-content:space-between}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -1153,7 +1729,7 @@ class CreateDialogDataBuilder extends BaseBuilder {
             .withDefault('text', ['Do you really want to create this entity?'])
             .withDefault('title', 'Create')
             .getResult();
-        return new CreateDialogDataInternal(data?.title ? data.title : 'Create', data?.createButtonLabel ? data.createButtonLabel : 'Create', data?.cancelButtonLabel ? data.cancelButtonLabel : 'Cancel', data?.createRequiresConfirmDialog ? data.createRequiresConfirmDialog : false, confirmCreateDialogData);
+        return new CreateDialogDataInternal(data?.title ?? 'Create', data?.createButtonLabel ?? 'Create', data?.cancelButtonLabel ?? 'Cancel', data?.createRequiresConfirmDialog ?? false, confirmCreateDialogData);
     }
 }
 
@@ -1180,181 +1756,1127 @@ class AddArrayItemDialogDataBuilder extends BaseBuilder {
             .withDefault('createButtonLabel', 'Add')
             .withDefault('title', 'Add to array')
             .getResult();
-        return new AddArrayItemDialogDataInternal(data.entity, createDialogData, data.getValidationErrorMessage ? data.getValidationErrorMessage : getValidationErrorMessage);
+        return new AddArrayItemDialogDataInternal(data.entity, createDialogData, data.getValidationErrorMessage ?? getValidationErrorMessage);
     }
 }
 
 /**
- * The default input component. It gets the metadata of the property from the given @Input "entity" and @Input "propertyKey"
- * and displays the input field accordingly.
+ * The abstract base class of any ngx-mat-entity input.
+ * Extend from this when implementing your own custom decorator.
  *
- * You can also define a method that generates error-messages and if the input should be hidden when its metadata says
- * that it should be omitted for creating or updating.
- * The last part being mostly relevant if you want to use this component inside an ngFor.
+ * It already provides:
+ *
+ * - entity: The entity which the property is on. (type-safe due to the Generic "EntityType")
+ * - key: The key of the property. (type-safe due to the Generic "EntityType")
+ * - getValidationErrorMessage: The function that generates the error message when the input is invalid.
+ * - isReadOnly: Whether or not the input is read only. Can be used to disable elements.
+ * - propertyValue: Just the typed version of the property, its the same as entity[key].
+ * - metadata: The metadata of the property. (type-safe due to the Generic "CustomMetadataType")
+ * - ngOnInit: Gets the metadata for the property, be aware of this when overriding this method.
+ * - emitChange: Should be called when the input has changed. This is needed to trigger validation and dirty checks.
  */
-class NgxMatEntityInputComponent {
-    constructor(dialog) {
-        this.dialog = dialog;
-        this.chipsInput = '';
-        this.selection = new SelectionModel(true, []);
-        this.DecoratorTypes = DecoratorTypes;
-        this.EntityUtilities = EntityUtilities;
-        this.DateUtilities = DateUtilities;
-        this.defaultDateFilter = () => true;
+// eslint-disable-next-line max-len
+class NgxMatEntityBaseInputComponent {
+    constructor() {
+        this.inputChangeEvent = new EventEmitter();
     }
+    // eslint-disable-next-line jsdoc/require-returns
     /**
-     * This is needed for the inputs to work inside an ngFor.
-     *
-     * @param index - The index of the element in the ngFor.
-     * @returns The index.
+     * The property value of entity[key] correctly typed.
+     * Uses getters and setters so that inputs are always linked to the original value.
      */
-    trackByFn(index) {
-        return index;
+    get propertyValue() {
+        return this.entity[this.key];
+    }
+    // eslint-disable-next-line jsdoc/require-jsdoc
+    set propertyValue(value) {
+        this.entity[this.key] = value;
     }
     ngOnInit() {
-        if (!this.entity) {
-            throw new Error('Missing required Input data "entity"');
-        }
-        if (!this.propertyKey) {
-            throw new Error('Missing required Input data "propertyKey"');
-        }
-        this.type = EntityUtilities.getPropertyType(this.entity, this.propertyKey);
-        this.metadata = EntityUtilities.getPropertyMetadata(this.entity, this.propertyKey, this.type);
-        this.metadataDefaultString = this.metadata;
-        this.metadataTextboxString = this.metadata;
-        this.metadataAutocompleteString = this.metadata;
-        this.autocompleteStrings = this.metadataAutocompleteString.autocompleteValues;
-        this.filteredAutocompleteStrings = cloneDeep(this.autocompleteStrings);
-        this.metadataDropdownString = this.metadata;
-        this.metadataDropdownBoolean = this.metadata;
-        if ((this.type === DecoratorTypes.BOOLEAN_CHECKBOX || this.type === DecoratorTypes.BOOLEAN_TOGGLE)
-            && this.entity[this.propertyKey] === undefined) {
-            this.entity[this.propertyKey] = false;
-        }
-        this.metadataDefaultNumber = this.metadata;
-        this.metadataDropdownNumber = this.metadata;
-        this.metadataDefaultObject = this.metadata;
-        this.objectProperty = this.entity[this.propertyKey];
-        if (this.type === DecoratorTypes.OBJECT) {
-            this.objectPropertyRows = EntityUtilities.getEntityRows(this.objectProperty, this.hideOmitForCreate, this.hideOmitForEdit);
-        }
-        this.metadataEntityArray = this.metadata;
-        if (this.type === DecoratorTypes.ARRAY) {
-            if (!this.entity[this.propertyKey]) {
-                this.entity[this.propertyKey] = [];
-            }
-            this.entityArrayValues = this.entity[this.propertyKey];
-            if (this.metadataEntityArray.createInline === undefined) {
-                this.metadataEntityArray.createInline = true;
-            }
-            if (!this.metadataEntityArray.createInline && !this.metadataEntityArray.createDialogData) {
-                this.metadataEntityArray.createDialogData = {
-                    title: 'Add'
-                };
-            }
-            const givenDisplayColumns = this.metadataEntityArray.displayColumns.map((v) => v.displayName);
-            if (givenDisplayColumns.find(s => s === 'select')) {
-                throw new Error(`The name "select" for a display column is reserved.
-                    Please choose a different name.`);
-            }
-            this.displayedColumns = ['select'].concat(givenDisplayColumns);
-            this.dataSource = new MatTableDataSource();
-            this.dataSource.data = this.entityArrayValues;
-            this.arrayItem = new this.metadataEntityArray.EntityClass();
-            this.arrayItemInlineRows = EntityUtilities.getEntityRows(this.arrayItem, this.hideOmitForCreate === false ? false : true, this.hideOmitForEdit ? true : false);
-            this.arrayItemPriorChanges = cloneDeep(this.arrayItem);
-            this.dialogInputData = {
-                entity: this.arrayItem,
-                createDialogData: this.metadataEntityArray.createDialogData,
-                getValidationErrorMessage: this.getValidationErrorMessage
-            };
-            this.dialogData = new AddArrayItemDialogDataBuilder(this.dialogInputData).getResult();
-            this.arrayItemDialogRows = EntityUtilities.getEntityRows(this.dialogData.entity, true);
-        }
-        this.metadataStringChipsArray = this.metadata;
-        if ((this.type === DecoratorTypes.ARRAY_STRING_CHIPS || this.type === DecoratorTypes.ARRAY_STRING_AUTOCOMPLETE_CHIPS)
-            && this.entity[this.propertyKey]?.length) {
-            this.stringChipsArrayValues = this.entity[this.propertyKey];
-        }
-        this.metadataAutocompleteStringChipsArray = this.metadata;
-        if (!this.getValidationErrorMessage) {
-            this.getValidationErrorMessage = getValidationErrorMessage;
-        }
-        this.metadataDefaultDate = this.metadata;
-        this.metadataDateRangeDate = this.metadata;
-        this.metadataDateTimeDate = this.metadata;
-        if (this.type === DecoratorTypes.DATE_RANGE) {
-            this.dateRange = cloneDeep(this.entity[this.propertyKey]);
-            if (!this.dateRange) {
-                this.dateRange = {
-                    start: undefined,
-                    end: undefined,
-                    values: undefined
-                };
-            }
-            this.dateRangeStart = new Date(this.dateRange.start);
-            this.dateRangeEnd = new Date(this.dateRange.end);
-            this.setDateRangeValues();
-        }
-        if (this.type === DecoratorTypes.DATE_TIME) {
-            this.time = DateUtilities.getTimeFromDate(DateUtilities.asDate(this.entity[this.propertyKey]));
-            this.timeDropdownValues = this.metadataDateTimeDate.times;
-            if (this.entity[this.propertyKey]) {
-                this.dateTime = new Date(this.entity[this.propertyKey]);
-            }
-        }
+        this.metadata = EntityUtilities.getPropertyMetadata(this.entity, this.key);
     }
     /**
-     * Checks if two times are equal. Is needed for the dropdown.
-     *
-     * @param time1 - The first time to compare.
-     * @param time2 - The second time to compare.
-     * @returns Whether or not the time objects are the same.
+     * Should emit when the input has changed. This is needed to trigger validation and dirty checks.
      */
-    compareTimes(time1, time2) {
-        return time1 && time2 && time1.hours === time2.hours && time1.minutes === time2.minutes;
+    emitChange() {
+        this.inputChangeEvent.emit();
+    }
+}
+NgxMatEntityBaseInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityBaseInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NgxMatEntityBaseInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NgxMatEntityBaseInputComponent, selector: "ngx-mat-entity-base-input", inputs: { entity: "entity", key: "key", getValidationErrorMessage: "getValidationErrorMessage", isReadOnly: "isReadOnly" }, outputs: { inputChangeEvent: "inputChangeEvent" }, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityBaseInputComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngx-mat-entity-base-input',
+                    template: ''
+                }]
+        }], propDecorators: { entity: [{
+                type: Input
+            }], key: [{
+                type: Input
+            }], getValidationErrorMessage: [{
+                type: Input
+            }], isReadOnly: [{
+                type: Input
+            }], inputChangeEvent: [{
+                type: Output
+            }] } });
+
+/* eslint-disable jsdoc/require-jsdoc */
+class StringInputComponent extends NgxMatEntityBaseInputComponent {
+}
+StringInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: StringInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+StringInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: StringInputComponent, selector: "string-input", usesInheritance: true, ngImport: i0, template: "<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <input\n        matInput\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString()\"\n        #model=\"ngModel\"\n        [required]=\"metadata.required\"\n        [pattern]=\"metadata.regex ?? '[\\\\s\\\\S]*'\"\n        [minlength]=\"metadata.minLength ?? null\"\n        [maxlength]=\"metadata.maxLength ?? null\"\n        (ngModelChange)=\"emitChange()\"\n        [disabled]=\"isReadOnly\"\n    >\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], components: [{ type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i1$1.MatLabel, selector: "mat-label" }, { type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i4.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { type: i4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: StringInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'string-input', template: "<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <input\n        matInput\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString()\"\n        #model=\"ngModel\"\n        [required]=\"metadata.required\"\n        [pattern]=\"metadata.regex ?? '[\\\\s\\\\S]*'\"\n        [minlength]=\"metadata.minLength ?? null\"\n        [maxlength]=\"metadata.maxLength ?? null\"\n        (ngModelChange)=\"emitChange()\"\n        [disabled]=\"isReadOnly\"\n    >\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"] }]
+        }] });
+
+/* eslint-disable jsdoc/require-jsdoc */
+class StringTextboxInputComponent extends NgxMatEntityBaseInputComponent {
+}
+StringTextboxInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: StringTextboxInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+StringTextboxInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: StringTextboxInputComponent, selector: "string-textbox-input", usesInheritance: true, ngImport: i0, template: "<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <textarea\n        matInput\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString()\"\n        #model=\"ngModel\"\n        cdkTextareaAutosize\n        cdkAutosizeMinRows=\"10\"\n        [required]=\"metadata.required\"\n        [minlength]=\"metadata.minLength ?? null\"\n        [maxlength]=\"metadata.maxLength ?? null\"\n        (ngModelChange)=\"emitChange()\"\n        [disabled]=\"isReadOnly\"\n    >\n    </textarea>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], components: [{ type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i1$1.MatLabel, selector: "mat-label" }, { type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i3$1.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { type: i4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: StringTextboxInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'string-textbox-input', template: "<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <textarea\n        matInput\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString()\"\n        #model=\"ngModel\"\n        cdkTextareaAutosize\n        cdkAutosizeMinRows=\"10\"\n        [required]=\"metadata.required\"\n        [minlength]=\"metadata.minLength ?? null\"\n        [maxlength]=\"metadata.maxLength ?? null\"\n        (ngModelChange)=\"emitChange()\"\n        [disabled]=\"isReadOnly\"\n    >\n    </textarea>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"] }]
+        }] });
+
+/* eslint-disable jsdoc/require-jsdoc */
+class StringAutocompleteInputComponent extends NgxMatEntityBaseInputComponent {
+    ngOnInit() {
+        super.ngOnInit();
+        this.autocompleteStrings = this.metadata.autocompleteValues;
+        this.filteredAutocompleteStrings = LodashUtilities.cloneDeep(this.autocompleteStrings);
     }
     /**
-     * Updates the date range values based on the start and end date.
+     * Dynamically filters the Autocomplete options when the user inputs something.
+     *
+     * @param input - The input of the user.
      */
-    setDateRangeValues() {
-        if (this.dateRangeStart && this.dateRangeEnd) {
-            this.dateRange.start = new Date(this.dateRangeStart);
-            this.dateRange.end = new Date(this.dateRangeEnd);
-            const values = DateUtilities.getDatesBetween(new Date(this.dateRange.start), new Date(this.dateRange.end), this.metadataDateRangeDate);
-            this.dateRange.values = values.length ? values : undefined;
+    filterAutocompleteStrings(input) {
+        if (input) {
+            this.filteredAutocompleteStrings = this.autocompleteStrings.filter(s => s.toLowerCase().includes(input.toLowerCase()));
         }
-        else {
-            this.dateRange.values = undefined;
+    }
+}
+StringAutocompleteInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: StringAutocompleteInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+StringAutocompleteInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: StringAutocompleteInputComponent, selector: "string-autocomplete-input", usesInheritance: true, ngImport: i0, template: "<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <input\n        matInput\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString()\"\n        #model=\"ngModel\"\n        [matAutocomplete]=\"auto\"\n        (keyup)=\"filterAutocompleteStrings(propertyValue)\"\n        [required]=\"metadata.required\"\n        [minlength]=\"metadata.minLength ?? null\"\n        [maxlength]=\"metadata.maxLength ?? null\"\n        [pattern]=\"metadata.regex ?? '[\\\\s\\\\S]*'\"\n        (ngModelChange)=\"emitChange()\"\n        [disabled]=\"isReadOnly\"\n    >\n    <mat-autocomplete #auto=\"matAutocomplete\">\n        <mat-option *ngFor=\"let value of filteredAutocompleteStrings\" [value]=\"value\">\n            {{value}}\n        </mat-option>\n    </mat-autocomplete>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], components: [{ type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i1$1.MatLabel, selector: "mat-label" }, { type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { type: i4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: StringAutocompleteInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'string-autocomplete-input', template: "<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <input\n        matInput\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString()\"\n        #model=\"ngModel\"\n        [matAutocomplete]=\"auto\"\n        (keyup)=\"filterAutocompleteStrings(propertyValue)\"\n        [required]=\"metadata.required\"\n        [minlength]=\"metadata.minLength ?? null\"\n        [maxlength]=\"metadata.maxLength ?? null\"\n        [pattern]=\"metadata.regex ?? '[\\\\s\\\\S]*'\"\n        (ngModelChange)=\"emitChange()\"\n        [disabled]=\"isReadOnly\"\n    >\n    <mat-autocomplete #auto=\"matAutocomplete\">\n        <mat-option *ngFor=\"let value of filteredAutocompleteStrings\" [value]=\"value\">\n            {{value}}\n        </mat-option>\n    </mat-autocomplete>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"] }]
+        }] });
+
+/* eslint-disable jsdoc/require-jsdoc */
+class StringDropdownInputComponent extends NgxMatEntityBaseInputComponent {
+}
+StringDropdownInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: StringDropdownInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+StringDropdownInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: StringDropdownInputComponent, selector: "string-dropdown-input", usesInheritance: true, ngImport: i0, template: "<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-select (ngModelChange)=\"emitChange()\" [(ngModel)]=\"propertyValue\" [name]=\"key.toString()\" #model=\"ngModel\" [required]=\"metadata.required\" [disabled]=\"isReadOnly\">\n        <mat-option *ngFor=\"let value of metadata.dropdownValues\" [value]=\"value.value\">{{value.displayName}}</mat-option>\n    </mat-select>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], components: [{ type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i1$1.MatLabel, selector: "mat-label" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: StringDropdownInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'string-dropdown-input', template: "<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-select (ngModelChange)=\"emitChange()\" [(ngModel)]=\"propertyValue\" [name]=\"key.toString()\" #model=\"ngModel\" [required]=\"metadata.required\" [disabled]=\"isReadOnly\">\n        <mat-option *ngFor=\"let value of metadata.dropdownValues\" [value]=\"value.value\">{{value.displayName}}</mat-option>\n    </mat-select>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"] }]
+        }] });
+
+/* eslint-disable jsdoc/require-jsdoc */
+class StringPasswordInputComponent extends NgxMatEntityBaseInputComponent {
+    constructor() {
+        super(...arguments);
+        this.hide = true;
+        this.hideConfirm = true;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.confirmRequired = this.metadata.required;
+        this.confirmPassword = LodashUtilities.cloneDeep(this.propertyValue);
+        ReflectUtilities.defineMetadata('confirmPassword', this.confirmPassword, this.entity, this.key);
+    }
+    passwordInput() {
+        this.confirmRequired = Boolean(this.propertyValue);
+        ReflectUtilities.defineMetadata('confirmPassword', this.confirmPassword, this.entity, this.key);
+        this.emitChange();
+    }
+}
+StringPasswordInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: StringPasswordInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+StringPasswordInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: StringPasswordInputComponent, selector: "string-password-input", usesInheritance: true, ngImport: i0, template: "<div class=\"password-row\">\n    <mat-form-field [class.w-50]=\"metadata.needsConfirmation\" [class.w-100]=\"!metadata.needsConfirmation\">\n        <mat-label>{{metadata.displayName}}</mat-label>\n        <input\n            [type]=\"hide ? 'password' : 'text'\"\n            matInput\n            [(ngModel)]=\"propertyValue\"\n            [name]=\"key.toString()\"\n            #model=\"ngModel\"\n            [required]=\"metadata.required\"\n            [pattern]=\"metadata.regex ?? '[\\\\s\\\\S]*'\"\n            [minlength]=\"metadata.minLength ?? null\"\n            [maxlength]=\"metadata.maxLength ?? null\"\n            (ngModelChange)=\"passwordInput()\"\n            [disabled]=\"isReadOnly\"\n        >\n        <button (click)=\"hide = !hide\" [disabled]=\"isReadOnly\" mat-icon-button matSuffix>\n            <i *ngIf=\"hide\" class=\"fas fa-eye-slash\"></i>\n            <i *ngIf=\"!hide\" class=\"fas fa-eye\"></i>\n        </button>\n        <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n    </mat-form-field>\n    <div *ngIf=\"metadata.needsConfirmation\" style=\"margin-left: 5px;margin-right: 5px;\"></div>\n    <mat-form-field class=\"w-50\" *ngIf=\"metadata.needsConfirmation\">\n        <mat-label>{{metadata.confirmationDisplayName}}</mat-label>\n        <input\n            [type]=\"hideConfirm ? 'password' : 'text'\"\n            matInput\n            [(ngModel)]=\"confirmPassword\"\n            [name]=\"key.toString() + 'confirmPassword'\"\n            #confirmModel=\"ngModel\"\n            [required]=\"metadata.required || confirmRequired\"\n            (ngModelChange)=\"passwordInput()\"\n            [disabled]=\"isReadOnly\"\n        >\n        <button (click)=\"hideConfirm = !hideConfirm\" [disabled]=\"isReadOnly\" mat-icon-button matSuffix>\n            <i *ngIf=\"hideConfirm\" class=\"fas fa-eye-slash\"></i>\n            <i *ngIf=\"!hideConfirm\" class=\"fas fa-eye\"></i>\n        </button>\n        <mat-error>{{getValidationErrorMessage(confirmModel)}}</mat-error>\n    </mat-form-field>\n</div>\n\n<mat-error *ngIf=\"metadata.needsConfirmation && propertyValue && confirmPassword && (confirmPassword !== propertyValue)\">\n    {{metadata.passwordsDontMatchErrorMessage}}\n</mat-error>", styles: [".password-row{display:flex;justify-content:space-between}.w-50{width:50%}.w-100{width:100%}\n"], components: [{ type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i1$1.MatLabel, selector: "mat-label" }, { type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i4.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { type: i4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i1$1.MatSuffix, selector: "[matSuffix]" }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: StringPasswordInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'string-password-input', template: "<div class=\"password-row\">\n    <mat-form-field [class.w-50]=\"metadata.needsConfirmation\" [class.w-100]=\"!metadata.needsConfirmation\">\n        <mat-label>{{metadata.displayName}}</mat-label>\n        <input\n            [type]=\"hide ? 'password' : 'text'\"\n            matInput\n            [(ngModel)]=\"propertyValue\"\n            [name]=\"key.toString()\"\n            #model=\"ngModel\"\n            [required]=\"metadata.required\"\n            [pattern]=\"metadata.regex ?? '[\\\\s\\\\S]*'\"\n            [minlength]=\"metadata.minLength ?? null\"\n            [maxlength]=\"metadata.maxLength ?? null\"\n            (ngModelChange)=\"passwordInput()\"\n            [disabled]=\"isReadOnly\"\n        >\n        <button (click)=\"hide = !hide\" [disabled]=\"isReadOnly\" mat-icon-button matSuffix>\n            <i *ngIf=\"hide\" class=\"fas fa-eye-slash\"></i>\n            <i *ngIf=\"!hide\" class=\"fas fa-eye\"></i>\n        </button>\n        <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n    </mat-form-field>\n    <div *ngIf=\"metadata.needsConfirmation\" style=\"margin-left: 5px;margin-right: 5px;\"></div>\n    <mat-form-field class=\"w-50\" *ngIf=\"metadata.needsConfirmation\">\n        <mat-label>{{metadata.confirmationDisplayName}}</mat-label>\n        <input\n            [type]=\"hideConfirm ? 'password' : 'text'\"\n            matInput\n            [(ngModel)]=\"confirmPassword\"\n            [name]=\"key.toString() + 'confirmPassword'\"\n            #confirmModel=\"ngModel\"\n            [required]=\"metadata.required || confirmRequired\"\n            (ngModelChange)=\"passwordInput()\"\n            [disabled]=\"isReadOnly\"\n        >\n        <button (click)=\"hideConfirm = !hideConfirm\" [disabled]=\"isReadOnly\" mat-icon-button matSuffix>\n            <i *ngIf=\"hideConfirm\" class=\"fas fa-eye-slash\"></i>\n            <i *ngIf=\"!hideConfirm\" class=\"fas fa-eye\"></i>\n        </button>\n        <mat-error>{{getValidationErrorMessage(confirmModel)}}</mat-error>\n    </mat-form-field>\n</div>\n\n<mat-error *ngIf=\"metadata.needsConfirmation && propertyValue && confirmPassword && (confirmPassword !== propertyValue)\">\n    {{metadata.passwordsDontMatchErrorMessage}}\n</mat-error>", styles: [".password-row{display:flex;justify-content:space-between}.w-50{width:50%}.w-100{width:100%}\n"] }]
+        }] });
+
+/* eslint-disable jsdoc/require-jsdoc */
+class BooleanCheckboxInputComponent extends NgxMatEntityBaseInputComponent {
+    ngOnInit() {
+        super.ngOnInit();
+        this.propertyValue = this.propertyValue ?? false;
+    }
+}
+BooleanCheckboxInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BooleanCheckboxInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+BooleanCheckboxInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: BooleanCheckboxInputComponent, selector: "boolean-checkbox-input", usesInheritance: true, ngImport: i0, template: "<mat-form-field class=\"hideUnderline\">\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-checkbox\n        color=\"primary\"\n        (ngModelChange)=\"emitChange()\"\n        (click)=\"model.control.markAsTouched()\"\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString()\"\n        [disabled]=\"isReadOnly\"\n        [class.disabled]=\"isReadOnly\"\n        [class.mat-checkbox-disabled]=\"false\"\n    >\n    </mat-checkbox>\n    <!-- hidden input is needed so that the checkbox can be used inside a mat-form-field -->\n    <input matInput hidden\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString() + 'Helper'\"\n        #model=\"ngModel\"\n        [pattern]=\"metadata.required ? 'true' : '[\\\\s\\\\S]*'\"\n        [required]=\"metadata.required\"\n        [disabled]=\"isReadOnly\"\n    >\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["::ng-deep .hideUnderline .mat-form-field-underline{opacity:0%}::ng-deep .disabled .mat-checkbox-ripple{display:none}::ng-deep .disabled:hover{cursor:default}mat-form-field{width:100%}\n"], components: [{ type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], directives: [{ type: i1$1.MatLabel, selector: "mat-label" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BooleanCheckboxInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'boolean-checkbox-input', template: "<mat-form-field class=\"hideUnderline\">\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-checkbox\n        color=\"primary\"\n        (ngModelChange)=\"emitChange()\"\n        (click)=\"model.control.markAsTouched()\"\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString()\"\n        [disabled]=\"isReadOnly\"\n        [class.disabled]=\"isReadOnly\"\n        [class.mat-checkbox-disabled]=\"false\"\n    >\n    </mat-checkbox>\n    <!-- hidden input is needed so that the checkbox can be used inside a mat-form-field -->\n    <input matInput hidden\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString() + 'Helper'\"\n        #model=\"ngModel\"\n        [pattern]=\"metadata.required ? 'true' : '[\\\\s\\\\S]*'\"\n        [required]=\"metadata.required\"\n        [disabled]=\"isReadOnly\"\n    >\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["::ng-deep .hideUnderline .mat-form-field-underline{opacity:0%}::ng-deep .disabled .mat-checkbox-ripple{display:none}::ng-deep .disabled:hover{cursor:default}mat-form-field{width:100%}\n"] }]
+        }] });
+
+/* eslint-disable jsdoc/require-jsdoc */
+class BooleanToggleInputComponent extends NgxMatEntityBaseInputComponent {
+    ngOnInit() {
+        super.ngOnInit();
+        this.propertyValue = this.propertyValue ?? false;
+    }
+}
+BooleanToggleInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BooleanToggleInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+BooleanToggleInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: BooleanToggleInputComponent, selector: "boolean-toggle-input", usesInheritance: true, ngImport: i0, template: "<mat-form-field class=\"hideUnderline\">\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-slide-toggle\n        color=\"primary\"\n        (click)=\"model.control.markAsTouched()\"\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString()\"\n        [disabled]=\"isReadOnly\"\n    >\n    </mat-slide-toggle>\n    <!-- hidden input is needed so that the toggle can be used inside a mat-form-field -->\n    <input matInput hidden\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString() + 'Helper'\"\n        #model=\"ngModel\"\n        [pattern]=\"metadata.required ? 'true' : '[\\\\s\\\\S]*'\"\n        [required]=\"metadata.required\"\n        (ngModelChange)=\"emitChange()\"\n    >\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["::ng-deep .hideUnderline .mat-form-field-underline{opacity:0%}mat-form-field{width:100%}\n"], components: [{ type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$3.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }], directives: [{ type: i1$1.MatLabel, selector: "mat-label" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BooleanToggleInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'boolean-toggle-input', template: "<mat-form-field class=\"hideUnderline\">\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-slide-toggle\n        color=\"primary\"\n        (click)=\"model.control.markAsTouched()\"\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString()\"\n        [disabled]=\"isReadOnly\"\n    >\n    </mat-slide-toggle>\n    <!-- hidden input is needed so that the toggle can be used inside a mat-form-field -->\n    <input matInput hidden\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString() + 'Helper'\"\n        #model=\"ngModel\"\n        [pattern]=\"metadata.required ? 'true' : '[\\\\s\\\\S]*'\"\n        [required]=\"metadata.required\"\n        (ngModelChange)=\"emitChange()\"\n    >\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["::ng-deep .hideUnderline .mat-form-field-underline{opacity:0%}mat-form-field{width:100%}\n"] }]
+        }] });
+
+/* eslint-disable jsdoc/require-jsdoc */
+class BooleanDropdownInputComponent extends NgxMatEntityBaseInputComponent {
+}
+BooleanDropdownInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BooleanDropdownInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+BooleanDropdownInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: BooleanDropdownInputComponent, selector: "boolean-dropdown-input", usesInheritance: true, ngImport: i0, template: "<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-select\n        (ngModelChange)=\"emitChange()\"\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString()\"\n        #model=\"ngModel\"\n        [required]=\"metadata.required\"\n        [disabled]=\"isReadOnly\"\n    >\n        <mat-option [value]=\"undefined\">-</mat-option>\n        <mat-option [value]=\"true\">{{metadata.dropdownTrue}}</mat-option>\n        <mat-option [value]=\"false\">{{metadata.dropdownFalse}}</mat-option>\n    </mat-select>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], components: [{ type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i1$1.MatLabel, selector: "mat-label" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BooleanDropdownInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'boolean-dropdown-input', template: "<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-select\n        (ngModelChange)=\"emitChange()\"\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString()\"\n        #model=\"ngModel\"\n        [required]=\"metadata.required\"\n        [disabled]=\"isReadOnly\"\n    >\n        <mat-option [value]=\"undefined\">-</mat-option>\n        <mat-option [value]=\"true\">{{metadata.dropdownTrue}}</mat-option>\n        <mat-option [value]=\"false\">{{metadata.dropdownFalse}}</mat-option>\n    </mat-select>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"] }]
+        }] });
+
+/* eslint-disable jsdoc/require-jsdoc */
+class NumberInputComponent extends NgxMatEntityBaseInputComponent {
+}
+NumberInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NumberInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+NumberInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NumberInputComponent, selector: "number-input", usesInheritance: true, ngImport: i0, template: "<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <input\n        matInput\n        type=\"number\"\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString()\"\n        #model=\"ngModel\"\n        [required]=\"metadata.required\"\n        [min]=\"metadata.min ?? null\"\n        [max]=\"metadata.max ?? null\"\n        (ngModelChange)=\"emitChange()\"\n        [disabled]=\"isReadOnly\"\n    >\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], components: [{ type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i1$1.MatLabel, selector: "mat-label" }, { type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i4.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i4.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NumberInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'number-input', template: "<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <input\n        matInput\n        type=\"number\"\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString()\"\n        #model=\"ngModel\"\n        [required]=\"metadata.required\"\n        [min]=\"metadata.min ?? null\"\n        [max]=\"metadata.max ?? null\"\n        (ngModelChange)=\"emitChange()\"\n        [disabled]=\"isReadOnly\"\n    >\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"] }]
+        }] });
+
+/* eslint-disable jsdoc/require-jsdoc */
+class NumberDropdownInputComponent extends NgxMatEntityBaseInputComponent {
+}
+NumberDropdownInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NumberDropdownInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+NumberDropdownInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NumberDropdownInputComponent, selector: "number-dropdown-input", usesInheritance: true, ngImport: i0, template: "<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-select (ngModelChange)=\"emitChange()\" [(ngModel)]=\"propertyValue\" [name]=\"key.toString()\" #model=\"ngModel\" [required]=\"metadata.required\" [disabled]=\"isReadOnly\">\n        <mat-option *ngFor=\"let value of metadata.dropdownValues\" [value]=\"value.value\">{{value.displayName}}</mat-option>\n    </mat-select>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], components: [{ type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i1$1.MatLabel, selector: "mat-label" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NumberDropdownInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'number-dropdown-input', template: "<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-select (ngModelChange)=\"emitChange()\" [(ngModel)]=\"propertyValue\" [name]=\"key.toString()\" #model=\"ngModel\" [required]=\"metadata.required\" [disabled]=\"isReadOnly\">\n        <mat-option *ngFor=\"let value of metadata.dropdownValues\" [value]=\"value.value\">{{value.displayName}}</mat-option>\n    </mat-select>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"] }]
+        }] });
+
+/* eslint-disable jsdoc/require-jsdoc */
+class NumberSliderInputComponent extends NgxMatEntityBaseInputComponent {
+}
+NumberSliderInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NumberSliderInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+NumberSliderInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NumberSliderInputComponent, selector: "number-slider-input", usesInheritance: true, ngImport: i0, template: "<mat-form-field floatLabel=\"always\" class=\"hideUnderline\">\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <!-- hidden input is needed so that the slider can be used inside a mat-form-field -->\n    <input matInput\n        #hiddenInput\n        type=\"number\"\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString() + 'Helper'\"\n        #model=\"ngModel\"\n        [required]=\"metadata.required\"\n        [min]=\"metadata.min ?? null\"\n        [max]=\"metadata.max ?? null\"\n        (ngModelChange)=\"emitChange()\"\n        [disabled]=\"isReadOnly\"\n    >\n    <mat-slider\n        id=\"slider\"\n        color=\"primary\"\n        (click)=\"model.control.markAsTouched()\"\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString()\"\n        [min]=\"metadata.min ?? null\"\n        [max]=\"metadata.max ?? null\"\n        [step]=\"metadata.step\"\n        [thumbLabel]=\"true\"\n        [displayWith]=\"metadata.formatThumbLabelValue\"\n        [tickInterval]=\"metadata.tickInterval\"\n        [disabled]=\"isReadOnly\"\n    >\n    </mat-slider>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}input{opacity:0%}mat-slider{width:100%;position:absolute;top:-7px;left:0}::ng-deep .hideUnderline .mat-form-field-underline{opacity:0%}::ng-deep #slider .mat-slider-thumb-label{top:-15px;display:flex;transform:rotate(45deg) scale(1);border-radius:50%}::ng-deep #slider.mat-slider-min-value.cdk-focused .mat-slider-thumb-label{background-color:#000000de}::ng-deep #slider .mat-slider-thumb{transform:scale(0)}::ng-deep #slider .mat-slider-thumb-label-text{opacity:1}\n"], components: [{ type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$4.MatSlider, selector: "mat-slider", inputs: ["disabled", "color", "tabIndex", "invert", "max", "min", "step", "thumbLabel", "tickInterval", "value", "displayWith", "valueText", "vertical"], outputs: ["change", "input", "valueChange"], exportAs: ["matSlider"] }], directives: [{ type: i1$1.MatLabel, selector: "mat-label" }, { type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i4.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i4.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NumberSliderInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'number-slider-input', template: "<mat-form-field floatLabel=\"always\" class=\"hideUnderline\">\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <!-- hidden input is needed so that the slider can be used inside a mat-form-field -->\n    <input matInput\n        #hiddenInput\n        type=\"number\"\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString() + 'Helper'\"\n        #model=\"ngModel\"\n        [required]=\"metadata.required\"\n        [min]=\"metadata.min ?? null\"\n        [max]=\"metadata.max ?? null\"\n        (ngModelChange)=\"emitChange()\"\n        [disabled]=\"isReadOnly\"\n    >\n    <mat-slider\n        id=\"slider\"\n        color=\"primary\"\n        (click)=\"model.control.markAsTouched()\"\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString()\"\n        [min]=\"metadata.min ?? null\"\n        [max]=\"metadata.max ?? null\"\n        [step]=\"metadata.step\"\n        [thumbLabel]=\"true\"\n        [displayWith]=\"metadata.formatThumbLabelValue\"\n        [tickInterval]=\"metadata.tickInterval\"\n        [disabled]=\"isReadOnly\"\n    >\n    </mat-slider>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}input{opacity:0%}mat-slider{width:100%;position:absolute;top:-7px;left:0}::ng-deep .hideUnderline .mat-form-field-underline{opacity:0%}::ng-deep #slider .mat-slider-thumb-label{top:-15px;display:flex;transform:rotate(45deg) scale(1);border-radius:50%}::ng-deep #slider.mat-slider-min-value.cdk-focused .mat-slider-thumb-label{background-color:#000000de}::ng-deep #slider .mat-slider-thumb{transform:scale(0)}::ng-deep #slider .mat-slider-thumb-label-text{opacity:1}\n"] }]
+        }] });
+
+/* eslint-disable jsdoc/require-jsdoc */
+/**
+ * The base data needed for all arrays that are displayed as a table.
+ */
+class ArrayTableComponent extends NgxMatEntityBaseInputComponent {
+    constructor(matDialog) {
+        super();
+        this.matDialog = matDialog;
+        this.input = undefined;
+        this.dataSource = new MatTableDataSource();
+        this.selection = new SelectionModel(true, []);
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.propertyValue = this.propertyValue ?? [];
+        const givenDisplayColumns = this.metadata.displayColumns.map((v) => v.displayName);
+        if (givenDisplayColumns.find(s => s === 'select')) {
+            throw new Error(`The name "select" for a display column is reserved.
+                Please choose a different name.`);
         }
-        this.entity[this.propertyKey] = this.dateRange;
+        this.displayedColumns = this.isReadOnly ? givenDisplayColumns : ['select'].concat(givenDisplayColumns);
+        this.dataSource.data = this.propertyValue;
     }
     /**
-     * Sets the time on a datetime property.
+     * Toggles all array-items in the table.
+     *
      */
-    setTime() {
-        if (!this.dateTime) {
-            this.entity[this.propertyKey] = undefined;
-            return;
-        }
-        this.entity[this.propertyKey] = new Date(this.dateTime);
-        if (this.time?.hours != null && this.time?.minutes != null) {
-            DateUtilities.asDate(this.entity[this.propertyKey]).setHours(this.time.hours, this.time.minutes, 0, 0);
+    masterToggle() {
+        if (this.isAllSelected()) {
+            this.selection.clear();
         }
         else {
-            DateUtilities.asDate(this.entity[this.propertyKey]).setHours(0, 0, 0, 0);
+            this.dataSource.data.forEach(row => this.selection.select(row));
         }
     }
+    /**
+     * Checks if all array-items in the table have been selected.
+     * This is needed to display the "masterToggle"-checkbox correctly.
+     *
+     * @returns Whether or not all array-items in the table have been selected.
+     */
+    isAllSelected() {
+        const numSelected = this.selection.selected.length;
+        const numRows = this.dataSource.data.length;
+        return numSelected === numRows;
+    }
     /**
      * Tries to add an item to the array.
-     * Does this either inline if the "createInline"-metadata is set to true
-     * or in a separate dialog if it is set to false.
      */
     add() {
-        if (this.metadataEntityArray.createInline) {
-            this.entityArrayValues.push(cloneDeep(this.arrayItem));
+        if (this.input != null) {
+            if (!this.metadata.allowDuplicates
+                && this.propertyValue?.find(async (v) => await EntityUtilities.isEqual(this.input, v, this.metadata, this.metadata.itemType)) != null) {
+                this.matDialog.open(NgxMatEntityConfirmDialogComponent, {
+                    data: this.metadata.duplicatesErrorDialog,
+                    autoFocus: false,
+                    restoreFocus: false
+                });
+                return;
+            }
+            this.propertyValue?.push(LodashUtilities.cloneDeep(this.input));
+            this.dataSource.data = this.propertyValue ?? [];
+            this.resetInput();
+            this.emitChange();
+        }
+    }
+    /**
+     * Is split up from the add method to override this functionality more easily.
+     */
+    resetInput() {
+        this.input = undefined;
+    }
+    /**
+     * Removes all selected entries from the entity array.
+     */
+    remove() {
+        this.selection.selected.forEach(s => {
+            this.propertyValue?.splice(this.propertyValue.indexOf(s), 1);
+        });
+        this.dataSource.data = this.propertyValue ?? [];
+        this.selection.clear();
+        this.emitChange();
+    }
+}
+ArrayTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ArrayTableComponent, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+ArrayTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ArrayTableComponent, selector: "ngx-mat-entity-array-table", usesInheritance: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ArrayTableComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngx-mat-entity-array-table',
+                    template: ''
+                }]
+        }], ctorParameters: function () { return [{ type: i1.MatDialog }]; } });
+
+/* eslint-disable jsdoc/require-jsdoc */
+class ArrayDateInputComponent extends ArrayTableComponent {
+    constructor() {
+        super(...arguments);
+        this.DateUtilities = DateUtilities;
+    }
+}
+ArrayDateInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ArrayDateInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+ArrayDateInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ArrayDateInputComponent, selector: "array-date-input", usesInheritance: true, ngImport: i0, template: "<div class=\"mat-elevation-z8\" style=\"border-radius: 5px;padding: 15px;margin-bottom: 15px;margin-top: 15px;\">\n    <div style=\"padding-bottom: 10px;\">\n        <b>{{metadata.displayName}}</b>\n    </div>\n    <div *ngIf=\"!isReadOnly\">\n        <mat-form-field appearance=\"standard\">\n            <mat-label>{{metadata.displayName}}</mat-label>\n            <input\n                matInput\n                [(ngModel)]=\"input\"\n                [name]=\"key.toString()\"\n                #model=\"ngModel\"\n                [matDatepicker]=\"picker\"\n                [required]=\"metadata.required\"\n                [min]=\"metadata.min ? metadata.min(input) : undefined\"\n                [max]=\"metadata.max ? metadata.max(input) : undefined\"\n                [matDatepickerFilter]=\"metadata.filter ?? DateUtilities.defaultDateFilter\"\n            >\n            <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n            <mat-datepicker #picker></mat-datepicker>\n            <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n        </mat-form-field>\n        \n        <div class=\"buttons\">\n            <button mat-raised-button\n                [disabled]=\"model.errors\"\n                (click)=\"add()\">\n                {{metadata.addButtonLabel}}\n            </button>\n            <button mat-raised-button\n                [disabled]=\"!selection.selected.length\"\n                (click)=\"remove()\">\n                {{metadata.removeButtonLabel}}\n            </button>\n        </div>\n    </div>\n\n    <mat-table [dataSource]=\"dataSource\">\n        <!-- select Column -->\n        <ng-container matColumnDef=\"select\">\n            <mat-header-cell *matHeaderCellDef>\n                <mat-checkbox [disabled]=\"!dataSource.data.length\" (change)=\"$event ? masterToggle() : null\" [checked]=\"selection.hasValue() && isAllSelected()\" [indeterminate]=\"selection.hasValue() && !isAllSelected()\"></mat-checkbox>\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let module\">\n                <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(module) : null\" [checked]=\"selection.isSelected(module)\"></mat-checkbox>\n            </mat-cell>\n        </ng-container>\n    \n        <ng-container *ngFor=\"let dCol of metadata.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n            <mat-header-cell *matHeaderCellDef>\n                {{dCol.displayName}}\n            </mat-header-cell>\n            <mat-cell class=\"entity\" *matCellDef=\"let entity\">\n                {{dCol.value(entity)}}\n            </mat-cell>\n        </ng-container>\n    \n        <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n        <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n    </mat-table>\n\n    <div class=\"array-error\" *ngIf=\"metadata.required && !dataSource.data.length\">\n        {{metadata.missingErrorMessage}}\n    </div>\n</div>", styles: ["mat-form-field{width:100%}.buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px}mat-table{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:25px}.mat-column-select{flex:0 0 75px}.array-error{display:flex;align-items:center;justify-content:center;margin-top:-25.8px;border:1px solid #E0E0E0;background-color:#f8d3d7;color:#721c24;height:25.8px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}\n"], components: [{ type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$5.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i2$5.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i4$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i4$2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.MatLabel, selector: "mat-label" }, { type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$5.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1$1.MatSuffix, selector: "[matSuffix]" }, { type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }, { type: i4$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i4$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i4$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i4$2.MatCellDef, selector: "[matCellDef]" }, { type: i4$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i4$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ArrayDateInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'array-date-input', template: "<div class=\"mat-elevation-z8\" style=\"border-radius: 5px;padding: 15px;margin-bottom: 15px;margin-top: 15px;\">\n    <div style=\"padding-bottom: 10px;\">\n        <b>{{metadata.displayName}}</b>\n    </div>\n    <div *ngIf=\"!isReadOnly\">\n        <mat-form-field appearance=\"standard\">\n            <mat-label>{{metadata.displayName}}</mat-label>\n            <input\n                matInput\n                [(ngModel)]=\"input\"\n                [name]=\"key.toString()\"\n                #model=\"ngModel\"\n                [matDatepicker]=\"picker\"\n                [required]=\"metadata.required\"\n                [min]=\"metadata.min ? metadata.min(input) : undefined\"\n                [max]=\"metadata.max ? metadata.max(input) : undefined\"\n                [matDatepickerFilter]=\"metadata.filter ?? DateUtilities.defaultDateFilter\"\n            >\n            <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n            <mat-datepicker #picker></mat-datepicker>\n            <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n        </mat-form-field>\n        \n        <div class=\"buttons\">\n            <button mat-raised-button\n                [disabled]=\"model.errors\"\n                (click)=\"add()\">\n                {{metadata.addButtonLabel}}\n            </button>\n            <button mat-raised-button\n                [disabled]=\"!selection.selected.length\"\n                (click)=\"remove()\">\n                {{metadata.removeButtonLabel}}\n            </button>\n        </div>\n    </div>\n\n    <mat-table [dataSource]=\"dataSource\">\n        <!-- select Column -->\n        <ng-container matColumnDef=\"select\">\n            <mat-header-cell *matHeaderCellDef>\n                <mat-checkbox [disabled]=\"!dataSource.data.length\" (change)=\"$event ? masterToggle() : null\" [checked]=\"selection.hasValue() && isAllSelected()\" [indeterminate]=\"selection.hasValue() && !isAllSelected()\"></mat-checkbox>\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let module\">\n                <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(module) : null\" [checked]=\"selection.isSelected(module)\"></mat-checkbox>\n            </mat-cell>\n        </ng-container>\n    \n        <ng-container *ngFor=\"let dCol of metadata.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n            <mat-header-cell *matHeaderCellDef>\n                {{dCol.displayName}}\n            </mat-header-cell>\n            <mat-cell class=\"entity\" *matCellDef=\"let entity\">\n                {{dCol.value(entity)}}\n            </mat-cell>\n        </ng-container>\n    \n        <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n        <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n    </mat-table>\n\n    <div class=\"array-error\" *ngIf=\"metadata.required && !dataSource.data.length\">\n        {{metadata.missingErrorMessage}}\n    </div>\n</div>", styles: ["mat-form-field{width:100%}.buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px}mat-table{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:25px}.mat-column-select{flex:0 0 75px}.array-error{display:flex;align-items:center;justify-content:center;margin-top:-25.8px;border:1px solid #E0E0E0;background-color:#f8d3d7;color:#721c24;height:25.8px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}\n"] }]
+        }] });
+
+/* eslint-disable jsdoc/require-jsdoc */
+class ArrayDateTimeInputComponent extends ArrayTableComponent {
+    constructor() {
+        super(...arguments);
+        this.DateUtilities = DateUtilities;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.time = DateUtilities.getTimeFromDate(this.entity[this.key]);
+        this.timeDropdownValues = this.metadata.times;
+        if (this.entity[this.key] != null) {
+            this.dateTime = new Date(this.entity[this.key]);
+        }
+    }
+    resetInput() {
+        this.input = undefined;
+        this.time = undefined;
+    }
+    /**
+     * Adds a date time to the array.
+     */
+    addDateTime() {
+        if (this.input && this.time) {
+            this.input = new Date(this.input);
+            this.input.setHours(this.time.hours, this.time.minutes, 0, 0);
+            this.add();
+        }
+    }
+}
+ArrayDateTimeInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ArrayDateTimeInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+ArrayDateTimeInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ArrayDateTimeInputComponent, selector: "array-date-time-input", usesInheritance: true, ngImport: i0, template: "<div class=\"mat-elevation-z8\" style=\"border-radius: 5px;padding: 15px;margin-bottom: 15px;margin-top: 15px;\">\n    <div style=\"padding-bottom: 10px;\">\n        <b>{{metadata.displayName}}</b>\n    </div>\n    <div *ngIf=\"!isReadOnly\">\n        <div class=\"date-time\">\n            <mat-form-field appearance=\"standard\">\n                <mat-label>{{metadata.displayName}}</mat-label>\n                <input\n                    matInput\n                    [(ngModel)]=\"input\"\n                    [name]=\"key.toString()\"\n                    #model=\"ngModel\"\n                    [matDatepicker]=\"picker\"\n                    [required]=\"metadata.required\"\n                    [min]=\"metadata.minDate ? metadata.minDate(input) : undefined\"\n                    [max]=\"metadata.maxDate ? metadata.maxDate(input) : undefined\"\n                    [matDatepickerFilter]=\"metadata.filterDate ?? DateUtilities.defaultDateFilter\"\n                >\n                <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n                <mat-datepicker #picker></mat-datepicker>\n                <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n            </mat-form-field>\n            <mat-form-field class=\"timepicker\">\n                <mat-label>{{metadata.timeDisplayName}}</mat-label>\n                <mat-select\n                    [(ngModel)]=\"time\"\n                    [name]=\"key.toString() + 'time'\"\n                    #timeModel=\"ngModel\"\n                    [required]=\"metadata.required\"\n                >\n                    <mat-option *ngFor=\"let validTime of DateUtilities.getValidTimesForDropdown(\n                            metadata.times,\n                            input,\n                            metadata.minTime,\n                            metadata.maxTime,\n                            metadata.filterTime\n                        )\"\n                        [value]=\"validTime.value\"\n                    >\n                        {{validTime.displayName}}\n                    </mat-option>\n                </mat-select>\n                <mat-error>{{getValidationErrorMessage(timeModel)}}</mat-error>\n            </mat-form-field>\n        </div>\n        <div class=\"buttons\">\n            <button mat-raised-button\n                [disabled]=\"model.errors || timeModel.errors || DateUtilities.timeIsUnprocessable(time)\"\n                (click)=\"addDateTime()\">\n                {{metadata.addButtonLabel}}\n            </button>\n            <button mat-raised-button\n                [disabled]=\"!selection.selected.length\"\n                (click)=\"remove()\">\n                {{metadata.removeButtonLabel}}\n            </button>\n        </div>\n    </div>\n\n    <mat-table [dataSource]=\"dataSource\">\n        <!-- select Column -->\n        <ng-container matColumnDef=\"select\">\n            <mat-header-cell *matHeaderCellDef>\n                <mat-checkbox [disabled]=\"!dataSource.data.length\" (change)=\"$event ? masterToggle() : null\" [checked]=\"selection.hasValue() && isAllSelected()\" [indeterminate]=\"selection.hasValue() && !isAllSelected()\"></mat-checkbox>\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let module\">\n                <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(module) : null\" [checked]=\"selection.isSelected(module)\"></mat-checkbox>\n            </mat-cell>\n        </ng-container>\n    \n        <ng-container *ngFor=\"let dCol of metadata.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n            <mat-header-cell *matHeaderCellDef>\n                {{dCol.displayName}}\n            </mat-header-cell>\n            <mat-cell class=\"entity\" *matCellDef=\"let entity\">\n                {{dCol.value(entity)}}\n            </mat-cell>\n        </ng-container>\n    \n        <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n        <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n    </mat-table>\n\n    <div class=\"array-error\" *ngIf=\"metadata.required && !dataSource.data.length\">\n        {{metadata.missingErrorMessage}}\n    </div>\n</div>", styles: ["mat-form-field{width:100%}.buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px}mat-table{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:25px}.mat-column-select{flex:0 0 75px}.array-error{display:flex;align-items:center;justify-content:center;margin-top:-25.8px;border:1px solid #E0E0E0;background-color:#f8d3d7;color:#721c24;height:25.8px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.date-time{display:flex;align-items:baseline}.date-time .timepicker{margin-left:10px}\n"], components: [{ type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$5.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i2$5.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { type: i2$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i4$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i4$2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.MatLabel, selector: "mat-label" }, { type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$5.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1$1.MatSuffix, selector: "[matSuffix]" }, { type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i4$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i4$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i4$2.MatCellDef, selector: "[matCellDef]" }, { type: i4$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i4$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i4$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ArrayDateTimeInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'array-date-time-input', template: "<div class=\"mat-elevation-z8\" style=\"border-radius: 5px;padding: 15px;margin-bottom: 15px;margin-top: 15px;\">\n    <div style=\"padding-bottom: 10px;\">\n        <b>{{metadata.displayName}}</b>\n    </div>\n    <div *ngIf=\"!isReadOnly\">\n        <div class=\"date-time\">\n            <mat-form-field appearance=\"standard\">\n                <mat-label>{{metadata.displayName}}</mat-label>\n                <input\n                    matInput\n                    [(ngModel)]=\"input\"\n                    [name]=\"key.toString()\"\n                    #model=\"ngModel\"\n                    [matDatepicker]=\"picker\"\n                    [required]=\"metadata.required\"\n                    [min]=\"metadata.minDate ? metadata.minDate(input) : undefined\"\n                    [max]=\"metadata.maxDate ? metadata.maxDate(input) : undefined\"\n                    [matDatepickerFilter]=\"metadata.filterDate ?? DateUtilities.defaultDateFilter\"\n                >\n                <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n                <mat-datepicker #picker></mat-datepicker>\n                <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n            </mat-form-field>\n            <mat-form-field class=\"timepicker\">\n                <mat-label>{{metadata.timeDisplayName}}</mat-label>\n                <mat-select\n                    [(ngModel)]=\"time\"\n                    [name]=\"key.toString() + 'time'\"\n                    #timeModel=\"ngModel\"\n                    [required]=\"metadata.required\"\n                >\n                    <mat-option *ngFor=\"let validTime of DateUtilities.getValidTimesForDropdown(\n                            metadata.times,\n                            input,\n                            metadata.minTime,\n                            metadata.maxTime,\n                            metadata.filterTime\n                        )\"\n                        [value]=\"validTime.value\"\n                    >\n                        {{validTime.displayName}}\n                    </mat-option>\n                </mat-select>\n                <mat-error>{{getValidationErrorMessage(timeModel)}}</mat-error>\n            </mat-form-field>\n        </div>\n        <div class=\"buttons\">\n            <button mat-raised-button\n                [disabled]=\"model.errors || timeModel.errors || DateUtilities.timeIsUnprocessable(time)\"\n                (click)=\"addDateTime()\">\n                {{metadata.addButtonLabel}}\n            </button>\n            <button mat-raised-button\n                [disabled]=\"!selection.selected.length\"\n                (click)=\"remove()\">\n                {{metadata.removeButtonLabel}}\n            </button>\n        </div>\n    </div>\n\n    <mat-table [dataSource]=\"dataSource\">\n        <!-- select Column -->\n        <ng-container matColumnDef=\"select\">\n            <mat-header-cell *matHeaderCellDef>\n                <mat-checkbox [disabled]=\"!dataSource.data.length\" (change)=\"$event ? masterToggle() : null\" [checked]=\"selection.hasValue() && isAllSelected()\" [indeterminate]=\"selection.hasValue() && !isAllSelected()\"></mat-checkbox>\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let module\">\n                <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(module) : null\" [checked]=\"selection.isSelected(module)\"></mat-checkbox>\n            </mat-cell>\n        </ng-container>\n    \n        <ng-container *ngFor=\"let dCol of metadata.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n            <mat-header-cell *matHeaderCellDef>\n                {{dCol.displayName}}\n            </mat-header-cell>\n            <mat-cell class=\"entity\" *matCellDef=\"let entity\">\n                {{dCol.value(entity)}}\n            </mat-cell>\n        </ng-container>\n    \n        <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n        <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n    </mat-table>\n\n    <div class=\"array-error\" *ngIf=\"metadata.required && !dataSource.data.length\">\n        {{metadata.missingErrorMessage}}\n    </div>\n</div>", styles: ["mat-form-field{width:100%}.buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px}mat-table{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:25px}.mat-column-select{flex:0 0 75px}.array-error{display:flex;align-items:center;justify-content:center;margin-top:-25.8px;border:1px solid #E0E0E0;background-color:#f8d3d7;color:#721c24;height:25.8px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.date-time{display:flex;align-items:baseline}.date-time .timepicker{margin-left:10px}\n"] }]
+        }] });
+
+/* eslint-disable jsdoc/require-jsdoc */
+class ArrayDateRangeInputComponent extends ArrayTableComponent {
+    constructor() {
+        super(...arguments);
+        this.DateUtilities = DateUtilities;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.input = {
+            start: undefined,
+            end: undefined,
+            values: undefined
+        };
+    }
+    /**
+     * Adds a DateRange to the array.
+     */
+    addDateRange() {
+        if (this.input && this.dateRangeStart && this.dateRangeEnd) {
+            this.input.start = new Date(this.dateRangeStart);
+            this.input.end = new Date(this.dateRangeEnd);
+            const values = DateUtilities.getDatesBetween(this.input.start, this.input.end, this.metadata.filter);
+            this.input.values = values.length ? values : undefined;
+            this.add();
+        }
+    }
+    resetInput() {
+        this.input = undefined;
+        this.dateRangeStart = undefined;
+        this.dateRangeEnd = undefined;
+    }
+}
+ArrayDateRangeInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ArrayDateRangeInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+ArrayDateRangeInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ArrayDateRangeInputComponent, selector: "array-date-range-input", usesInheritance: true, ngImport: i0, template: "<div class=\"mat-elevation-z8\" style=\"border-radius: 5px;padding: 15px;margin-bottom: 15px;margin-top: 15px;\">\n    <div style=\"padding-bottom: 10px;\">\n        <b>{{metadata.displayName}}</b>\n    </div>\n    <div *ngIf=\"!isReadOnly\">\n        <mat-form-field appearance=\"standard\">\n            <mat-label>{{metadata.displayName}}</mat-label>\n            \n            <mat-date-range-input [rangePicker]=\"picker\" [required]=\"metadata.required\" [dateFilter]=\"metadata.filter ? metadata.filter : DateUtilities.defaultDateFilter\">\n                <input matStartDate\n                    [(ngModel)]=\"dateRangeStart\"\n                    [name]=\"key.toString() + 'start'\"\n                    #startModel=\"ngModel\"\n                    [required]=\"metadata.required\"\n                    [min]=\"metadata.minStart ? metadata.minStart(input?.start) : undefined\"\n                    [max]=\"metadata.maxStart ? metadata.maxStart(input?.start) : undefined\"\n                    [placeholder]=\"metadata.placeholderStart\"\n                >\n                <input matEndDate\n                    [(ngModel)]=\"dateRangeEnd\"\n                    [name]=\"key.toString() + 'end'\"\n                    #endModel=\"ngModel\"\n                    [required]=\"metadata.required\"\n                    [min]=\"metadata.minEnd ? metadata.minEnd(input?.end) : undefined\"\n                    [max]=\"metadata.maxEnd ? metadata.maxEnd(input?.end) : undefined\"\n                    [placeholder]=\"metadata.placeholderEnd\"\n                >\n            </mat-date-range-input>\n            <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n            <mat-date-range-picker #picker></mat-date-range-picker>\n    \n            <mat-error *ngIf=\"startModel.errors\">{{getValidationErrorMessage(startModel)}}</mat-error>\n            <mat-error *ngIf=\"!startModel.errors && endModel.errors\">{{getValidationErrorMessage(endModel)}}</mat-error>\n        </mat-form-field>\n        \n        <div class=\"buttons\">\n            <button mat-raised-button\n                [disabled]=\"startModel.errors || endModel.errors\"\n                (click)=\"addDateRange()\">\n                {{metadata.addButtonLabel}}\n            </button>\n            <button mat-raised-button\n                [disabled]=\"!selection.selected.length\"\n                (click)=\"remove()\">\n                {{metadata.removeButtonLabel}}\n            </button>\n        </div>\n    </div>\n\n    <mat-table [dataSource]=\"dataSource\">\n        <!-- select Column -->\n        <ng-container matColumnDef=\"select\">\n            <mat-header-cell *matHeaderCellDef>\n                <mat-checkbox [disabled]=\"!dataSource.data.length\" (change)=\"$event ? masterToggle() : null\" [checked]=\"selection.hasValue() && isAllSelected()\" [indeterminate]=\"selection.hasValue() && !isAllSelected()\"></mat-checkbox>\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let module\">\n                <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(module) : null\" [checked]=\"selection.isSelected(module)\"></mat-checkbox>\n            </mat-cell>\n        </ng-container>\n    \n        <ng-container *ngFor=\"let dCol of metadata.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n            <mat-header-cell *matHeaderCellDef>\n                {{dCol.displayName}}\n            </mat-header-cell>\n            <mat-cell class=\"entity\" *matCellDef=\"let entity\">\n                {{dCol.value(entity)}}\n            </mat-cell>\n        </ng-container>\n    \n        <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n        <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n    </mat-table>\n\n    <div class=\"array-error\" *ngIf=\"metadata.required && !dataSource.data.length\">\n        {{metadata.missingErrorMessage}}\n    </div>\n</div>", styles: ["mat-form-field{width:100%}.buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px}mat-table{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:25px}.mat-column-select{flex:0 0 75px}.array-error{display:flex;align-items:center;justify-content:center;margin-top:-25.8px;border:1px solid #E0E0E0;background-color:#f8d3d7;color:#721c24;height:25.8px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}\n"], components: [{ type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$5.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { type: i2$5.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i2$5.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i4$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i4$2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.MatLabel, selector: "mat-label" }, { type: i2$5.MatStartDate, selector: "input[matStartDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i2$5.MatEndDate, selector: "input[matEndDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { type: i1$1.MatSuffix, selector: "[matSuffix]" }, { type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }, { type: i4$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i4$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i4$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i4$2.MatCellDef, selector: "[matCellDef]" }, { type: i4$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i4$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ArrayDateRangeInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'array-date-range-input', template: "<div class=\"mat-elevation-z8\" style=\"border-radius: 5px;padding: 15px;margin-bottom: 15px;margin-top: 15px;\">\n    <div style=\"padding-bottom: 10px;\">\n        <b>{{metadata.displayName}}</b>\n    </div>\n    <div *ngIf=\"!isReadOnly\">\n        <mat-form-field appearance=\"standard\">\n            <mat-label>{{metadata.displayName}}</mat-label>\n            \n            <mat-date-range-input [rangePicker]=\"picker\" [required]=\"metadata.required\" [dateFilter]=\"metadata.filter ? metadata.filter : DateUtilities.defaultDateFilter\">\n                <input matStartDate\n                    [(ngModel)]=\"dateRangeStart\"\n                    [name]=\"key.toString() + 'start'\"\n                    #startModel=\"ngModel\"\n                    [required]=\"metadata.required\"\n                    [min]=\"metadata.minStart ? metadata.minStart(input?.start) : undefined\"\n                    [max]=\"metadata.maxStart ? metadata.maxStart(input?.start) : undefined\"\n                    [placeholder]=\"metadata.placeholderStart\"\n                >\n                <input matEndDate\n                    [(ngModel)]=\"dateRangeEnd\"\n                    [name]=\"key.toString() + 'end'\"\n                    #endModel=\"ngModel\"\n                    [required]=\"metadata.required\"\n                    [min]=\"metadata.minEnd ? metadata.minEnd(input?.end) : undefined\"\n                    [max]=\"metadata.maxEnd ? metadata.maxEnd(input?.end) : undefined\"\n                    [placeholder]=\"metadata.placeholderEnd\"\n                >\n            </mat-date-range-input>\n            <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n            <mat-date-range-picker #picker></mat-date-range-picker>\n    \n            <mat-error *ngIf=\"startModel.errors\">{{getValidationErrorMessage(startModel)}}</mat-error>\n            <mat-error *ngIf=\"!startModel.errors && endModel.errors\">{{getValidationErrorMessage(endModel)}}</mat-error>\n        </mat-form-field>\n        \n        <div class=\"buttons\">\n            <button mat-raised-button\n                [disabled]=\"startModel.errors || endModel.errors\"\n                (click)=\"addDateRange()\">\n                {{metadata.addButtonLabel}}\n            </button>\n            <button mat-raised-button\n                [disabled]=\"!selection.selected.length\"\n                (click)=\"remove()\">\n                {{metadata.removeButtonLabel}}\n            </button>\n        </div>\n    </div>\n\n    <mat-table [dataSource]=\"dataSource\">\n        <!-- select Column -->\n        <ng-container matColumnDef=\"select\">\n            <mat-header-cell *matHeaderCellDef>\n                <mat-checkbox [disabled]=\"!dataSource.data.length\" (change)=\"$event ? masterToggle() : null\" [checked]=\"selection.hasValue() && isAllSelected()\" [indeterminate]=\"selection.hasValue() && !isAllSelected()\"></mat-checkbox>\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let module\">\n                <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(module) : null\" [checked]=\"selection.isSelected(module)\"></mat-checkbox>\n            </mat-cell>\n        </ng-container>\n    \n        <ng-container *ngFor=\"let dCol of metadata.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n            <mat-header-cell *matHeaderCellDef>\n                {{dCol.displayName}}\n            </mat-header-cell>\n            <mat-cell class=\"entity\" *matCellDef=\"let entity\">\n                {{dCol.value(entity)}}\n            </mat-cell>\n        </ng-container>\n    \n        <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n        <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n    </mat-table>\n\n    <div class=\"array-error\" *ngIf=\"metadata.required && !dataSource.data.length\">\n        {{metadata.missingErrorMessage}}\n    </div>\n</div>", styles: ["mat-form-field{width:100%}.buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px}mat-table{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:25px}.mat-column-select{flex:0 0 75px}.array-error{display:flex;align-items:center;justify-content:center;margin-top:-25.8px;border:1px solid #E0E0E0;background-color:#f8d3d7;color:#721c24;height:25.8px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}\n"] }]
+        }] });
+
+/* eslint-disable jsdoc/require-jsdoc */
+class ArrayStringChipsInputComponent extends NgxMatEntityBaseInputComponent {
+    constructor() {
+        super(...arguments);
+        this.chipsInput = '';
+    }
+    /**
+     * Handles adding strings to the chipsArray.
+     * Checks validation and also creates a new array if it is undefined.
+     * This is needed because two things are validated: The array itself
+     * and the contents of the array. And we need a way to display an
+     * mat-error. As the only validation for the array is whether or not
+     * it contains values, we can set it to undefined when the last element is removed
+     * (removeStringChipArrayValue). That way we can use the "required" validator.
+     *
+     * @param event - The event that fires when a new chip is completed.
+     */
+    addStringChipArrayValue(event) {
+        const value = (event.value || '').trim();
+        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);
+        }
+        event.chipInput?.clear();
+    }
+    /**
+     * Removes the given value from the array.
+     * Sets the array to undefined if it is now empty.
+     * This is needed because two things are validated: The array itself
+     * and the contents of the array. And we need a way to display an
+     * mat-error. As the only validation for the array is whether or not
+     * it is empty, setting it to undefined here enables us to use the "required" validator.
+     *
+     * @param value - The string to remove from the array.
+     */
+    removeStringChipArrayValue(value) {
+        this.propertyValue?.splice(this.propertyValue.indexOf(value), 1);
+        this.propertyValue = this.propertyValue?.length ? this.propertyValue : undefined;
+    }
+    /**
+     * Handles adding a string to the array when an autocomplete value has been selected.
+     *
+     * @param event - The autocomplete selected event.
+     * @param chipsInput - The element where the user typed the value.
+     */
+    selected(event, chipsInput) {
+        const value = (event.option.viewValue || '').trim();
+        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);
+        chipsInput.value = '';
+    }
+}
+ArrayStringChipsInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ArrayStringChipsInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+ArrayStringChipsInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ArrayStringChipsInputComponent, selector: "array-string-chips-input", usesInheritance: true, ngImport: i0, template: "<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-chip-list #chipList\n        (ngModelChange)=\"emitChange()\"\n        [(ngModel)]=\"propertyValue\" [name]=\"key.toString()\" #model=\"ngModel\"\n        [required]=\"metadata.required\"\n        [disabled]=\"isReadOnly\"\n    >\n        <mat-chip *ngFor=\"let value of propertyValue\" (removed)=\"removeStringChipArrayValue(value)\">\n            {{value}}\n            <button matChipRemove>\n                <i class=\"{{metadata.deleteIcon}}\"></i>\n            </button>\n        </mat-chip>\n        <input matInput\n            [matChipInputFor]=\"chipList\"\n            [matChipInputAddOnBlur]=\"true\"\n            (matChipInputTokenEnd)=\"addStringChipArrayValue($event)\"\n            [(ngModel)]=\"chipsInput\" [name]=\"key.toString()\" #chipsModel=\"ngModel\"\n            [minlength]='metadata.minLength ?? null'\n            [maxlength]='metadata.maxLength ?? null'\n            [pattern]=\"metadata.regex ?? '[\\\\s\\\\S]*'\"\n        >\n        <mat-error *ngIf=\"chipsModel.errors\">{{getValidationErrorMessage(chipsModel)}}</mat-error>\n    </mat-chip-list>\n    <mat-error *ngIf=\"!chipsModel.errors\">{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], components: [{ type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$6.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }], directives: [{ type: i1$1.MatLabel, selector: "mat-label" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$6.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i2$6.MatChipRemove, selector: "[matChipRemove]" }, { type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i2$6.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { type: i4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ArrayStringChipsInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'array-string-chips-input', template: "<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-chip-list #chipList\n        (ngModelChange)=\"emitChange()\"\n        [(ngModel)]=\"propertyValue\" [name]=\"key.toString()\" #model=\"ngModel\"\n        [required]=\"metadata.required\"\n        [disabled]=\"isReadOnly\"\n    >\n        <mat-chip *ngFor=\"let value of propertyValue\" (removed)=\"removeStringChipArrayValue(value)\">\n            {{value}}\n            <button matChipRemove>\n                <i class=\"{{metadata.deleteIcon}}\"></i>\n            </button>\n        </mat-chip>\n        <input matInput\n            [matChipInputFor]=\"chipList\"\n            [matChipInputAddOnBlur]=\"true\"\n            (matChipInputTokenEnd)=\"addStringChipArrayValue($event)\"\n            [(ngModel)]=\"chipsInput\" [name]=\"key.toString()\" #chipsModel=\"ngModel\"\n            [minlength]='metadata.minLength ?? null'\n            [maxlength]='metadata.maxLength ?? null'\n            [pattern]=\"metadata.regex ?? '[\\\\s\\\\S]*'\"\n        >\n        <mat-error *ngIf=\"chipsModel.errors\">{{getValidationErrorMessage(chipsModel)}}</mat-error>\n    </mat-chip-list>\n    <mat-error *ngIf=\"!chipsModel.errors\">{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"] }]
+        }] });
+
+/* eslint-disable jsdoc/require-jsdoc */
+class ArrayStringAutocompleteChipsComponent extends NgxMatEntityBaseInputComponent {
+    constructor() {
+        super(...arguments);
+        this.chipsInput = '';
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.filteredAutocompleteStrings = LodashUtilities.cloneDeep(this.metadata.autocompleteValues);
+    }
+    /**
+     * Handles adding strings to the chipsArray.
+     * Checks validation and also creates a new array if it is undefined.
+     * This is needed because two things are validated: The array itself
+     * and the contents of the array. And we need a way to display an
+     * mat-error. As the only validation for the array is whether or not
+     * it contains values, we can set it to undefined when the last element is removed
+     * (removeStringChipArrayValue). That way we can use the "required" validator.
+     *
+     * @param event - The event that fires when a new chip is completed.
+     */
+    addStringChipArrayValue(event) {
+        const value = (event.value || '').trim();
+        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);
+        }
+        event.chipInput?.clear();
+    }
+    /**
+     * Removes the given value from the array.
+     * Sets the array to undefined if it is now empty.
+     * This is needed because two things are validated: The array itself
+     * and the contents of the array. And we need a way to display an
+     * mat-error. As the only validation for the array is whether or not
+     * it is empty, setting it to undefined here enables us to use the "required" validator.
+     *
+     * @param value - The string to remove from the array.
+     */
+    removeStringChipArrayValue(value) {
+        this.propertyValue?.splice(this.propertyValue.indexOf(value), 1);
+        this.propertyValue = this.propertyValue?.length ? this.propertyValue : undefined;
+    }
+    /**
+     * Handles adding a string to the array when an autocomplete value has been selected.
+     *
+     * @param event - The autocomplete selected event.
+     * @param chipsInput - The element where the user typed the value.
+     */
+    selected(event, chipsInput) {
+        const value = (event.option.viewValue || '').trim();
+        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);
+        chipsInput.value = '';
+    }
+    /**
+     * Dynamically filters the Autocomplete options when the user inputs something.
+     *
+     * @param input - The input of the user.
+     */
+    filterAutocompleteStrings(input) {
+        if (input != null) {
+            const filterValue = input.toLowerCase();
+            this.filteredAutocompleteStrings = this.metadata.autocompleteValues.filter(s => s.toLowerCase().includes(filterValue));
+        }
+    }
+}
+ArrayStringAutocompleteChipsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ArrayStringAutocompleteChipsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+ArrayStringAutocompleteChipsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ArrayStringAutocompleteChipsComponent, selector: "array-string-autocomplete-chips", usesInheritance: true, ngImport: i0, template: "<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-chip-list #chipList\n        (ngModelChange)=\"emitChange()\"\n        [(ngModel)]=\"propertyValue\" [name]=\"key.toString()\" #model=\"ngModel\"\n        [required]=\"metadata.required\"\n        [disabled]=\"isReadOnly\"\n    >\n        <mat-chip *ngFor=\"let value of propertyValue\" (removed)=\"removeStringChipArrayValue(value)\">\n            {{value}}\n            <button matChipRemove>\n                <i class=\"{{metadata.deleteIcon}}\"></i>\n            </button>\n        </mat-chip>\n        <input matInput\n            [matChipInputFor]=\"chipList\"\n            [matAutocomplete]=\"auto\"\n            [matChipInputAddOnBlur]=\"true\"\n            (matChipInputTokenEnd)=\"addStringChipArrayValue($event)\"\n            (keyup)=\"filterAutocompleteStrings(chipsInput)\"\n            [(ngModel)]=\"chipsInput\" [name]=\"key.toString()\" #chipsModel=\"ngModel\"\n            #chipsElement\n            [minlength]='metadata.minLength ?? null'\n            [maxlength]='metadata.maxLength ?? null'\n            [pattern]=\"metadata.regex ?? '[\\\\s\\\\S]*'\"\n        >\n        <mat-error *ngIf=\"chipsModel.errors\">{{getValidationErrorMessage(chipsModel)}}</mat-error>\n    </mat-chip-list>\n    <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event, chipsElement)\">\n        <mat-option *ngFor=\"let value of metadata.autocompleteValues\" [value]=\"value\">\n          {{value}}\n        </mat-option>\n    </mat-autocomplete>\n    <mat-error *ngIf=\"!chipsModel.errors\">{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], components: [{ type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$6.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: i2$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i1$1.MatLabel, selector: "mat-label" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$6.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i2$6.MatChipRemove, selector: "[matChipRemove]" }, { type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i2$6.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { type: i2$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { type: i4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ArrayStringAutocompleteChipsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'array-string-autocomplete-chips', template: "<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-chip-list #chipList\n        (ngModelChange)=\"emitChange()\"\n        [(ngModel)]=\"propertyValue\" [name]=\"key.toString()\" #model=\"ngModel\"\n        [required]=\"metadata.required\"\n        [disabled]=\"isReadOnly\"\n    >\n        <mat-chip *ngFor=\"let value of propertyValue\" (removed)=\"removeStringChipArrayValue(value)\">\n            {{value}}\n            <button matChipRemove>\n                <i class=\"{{metadata.deleteIcon}}\"></i>\n            </button>\n        </mat-chip>\n        <input matInput\n            [matChipInputFor]=\"chipList\"\n            [matAutocomplete]=\"auto\"\n            [matChipInputAddOnBlur]=\"true\"\n            (matChipInputTokenEnd)=\"addStringChipArrayValue($event)\"\n            (keyup)=\"filterAutocompleteStrings(chipsInput)\"\n            [(ngModel)]=\"chipsInput\" [name]=\"key.toString()\" #chipsModel=\"ngModel\"\n            #chipsElement\n            [minlength]='metadata.minLength ?? null'\n            [maxlength]='metadata.maxLength ?? null'\n            [pattern]=\"metadata.regex ?? '[\\\\s\\\\S]*'\"\n        >\n        <mat-error *ngIf=\"chipsModel.errors\">{{getValidationErrorMessage(chipsModel)}}</mat-error>\n    </mat-chip-list>\n    <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event, chipsElement)\">\n        <mat-option *ngFor=\"let value of metadata.autocompleteValues\" [value]=\"value\">\n          {{value}}\n        </mat-option>\n    </mat-autocomplete>\n    <mat-error *ngIf=\"!chipsModel.errors\">{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"] }]
+        }] });
+
+/* eslint-disable jsdoc/require-jsdoc */
+class DateInputComponent extends NgxMatEntityBaseInputComponent {
+    constructor() {
+        super(...arguments);
+        this.DateUtilities = DateUtilities;
+    }
+}
+DateInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DateInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DateInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DateInputComponent, selector: "date-input", usesInheritance: true, ngImport: i0, template: "<mat-form-field appearance=\"standard\">\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <input\n        (ngModelChange)=\"emitChange()\"\n        matInput\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString()\"\n        #model=\"ngModel\"\n        [matDatepicker]=\"picker\"\n        [required]=\"metadata.required\"\n        [min]=\"metadata.min ? metadata.min(propertyValue) : undefined\"\n        [max]=\"metadata.max ? metadata.max(propertyValue) : undefined\"\n        [matDatepickerFilter]=\"metadata.filter ?? DateUtilities.defaultDateFilter\"\n        [disabled]=\"isReadOnly\"\n    >\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n    <mat-datepicker #picker></mat-datepicker>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], components: [{ type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$5.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i2$5.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }], directives: [{ type: i1$1.MatLabel, selector: "mat-label" }, { type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$5.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1$1.MatSuffix, selector: "[matSuffix]" }, { type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DateInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'date-input', template: "<mat-form-field appearance=\"standard\">\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <input\n        (ngModelChange)=\"emitChange()\"\n        matInput\n        [(ngModel)]=\"propertyValue\"\n        [name]=\"key.toString()\"\n        #model=\"ngModel\"\n        [matDatepicker]=\"picker\"\n        [required]=\"metadata.required\"\n        [min]=\"metadata.min ? metadata.min(propertyValue) : undefined\"\n        [max]=\"metadata.max ? metadata.max(propertyValue) : undefined\"\n        [matDatepickerFilter]=\"metadata.filter ?? DateUtilities.defaultDateFilter\"\n        [disabled]=\"isReadOnly\"\n    >\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n    <mat-datepicker #picker></mat-datepicker>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"] }]
+        }] });
+
+/* eslint-disable jsdoc/require-jsdoc */
+const EMPTY_DATERANGE = {
+    start: undefined,
+    end: undefined,
+    values: undefined
+};
+class DateRangeInputComponent extends NgxMatEntityBaseInputComponent {
+    constructor() {
+        super(...arguments);
+        this.defaultDateFilter = DateUtilities.defaultDateFilter;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.dateRange = LodashUtilities.cloneDeep(this.propertyValue) ?? EMPTY_DATERANGE;
+        this.dateRangeStart = new Date(this.dateRange.start);
+        this.dateRangeEnd = new Date(this.dateRange.end);
+        this.setDateRangeValues();
+    }
+    /**
+     * Updates the date range values based on the start and end date.
+     */
+    setDateRangeValues() {
+        if (this.dateRangeStart && this.dateRangeEnd) {
+            this.dateRange.start = new Date(this.dateRangeStart);
+            this.dateRange.end = new Date(this.dateRangeEnd);
+            const values = DateUtilities.getDatesBetween(new Date(this.dateRange.start), new Date(this.dateRange.end), this.metadata.filter);
+            this.dateRange.values = values.length ? values : undefined;
+        }
+        else {
+            this.dateRange.values = undefined;
+        }
+        this.propertyValue = this.dateRange;
+        this.emitChange();
+    }
+}
+DateRangeInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DateRangeInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DateRangeInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DateRangeInputComponent, selector: "date-range-input", usesInheritance: true, ngImport: i0, template: "<mat-form-field appearance=\"standard\">\n    <mat-label>{{metadata.displayName}}</mat-label>\n    \n    <mat-date-range-input [rangePicker]=\"picker\" [required]=\"metadata.required\" [dateFilter]=\"metadata.filter ?? defaultDateFilter\" [disabled]=\"isReadOnly\">\n        <input matStartDate\n            [(ngModel)]=\"dateRangeStart\"\n            [name]=\"key.toString() + 'start'\"\n            #startModel=\"ngModel\"\n            [required]=\"metadata.required\"\n            [min]=\"metadata.minStart ? metadata.minStart(dateRange.start) : undefined\"\n            [max]=\"metadata.maxStart ? metadata.maxStart(dateRange.start) : undefined\"\n            [placeholder]=\"metadata.placeholderStart\"\n            (ngModelChange)=\"setDateRangeValues()\"\n        >\n        <input matEndDate\n            [(ngModel)]=\"dateRangeEnd\"\n            [name]=\"key.toString() + 'end'\"\n            #endModel=\"ngModel\"\n            [required]=\"metadata.required\"\n            [min]=\"metadata.minEnd ? metadata.minEnd(dateRange.end) : undefined\"\n            [max]=\"metadata.maxEnd ? metadata.maxEnd(dateRange.end) : undefined\"\n            [placeholder]=\"metadata.placeholderEnd\"\n            (ngModelChange)=\"setDateRangeValues()\"\n        >\n    </mat-date-range-input>\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n    <mat-date-range-picker #picker></mat-date-range-picker>\n\n    <mat-error *ngIf=\"startModel.errors\">{{getValidationErrorMessage(startModel)}}</mat-error>\n    <mat-error *ngIf=\"!startModel.errors && endModel.errors\">{{getValidationErrorMessage(endModel)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], components: [{ type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$5.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { type: i2$5.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i2$5.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }], directives: [{ type: i1$1.MatLabel, selector: "mat-label" }, { type: i2$5.MatStartDate, selector: "input[matStartDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i2$5.MatEndDate, selector: "input[matEndDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { type: i1$1.MatSuffix, selector: "[matSuffix]" }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DateRangeInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'date-range-input', template: "<mat-form-field appearance=\"standard\">\n    <mat-label>{{metadata.displayName}}</mat-label>\n    \n    <mat-date-range-input [rangePicker]=\"picker\" [required]=\"metadata.required\" [dateFilter]=\"metadata.filter ?? defaultDateFilter\" [disabled]=\"isReadOnly\">\n        <input matStartDate\n            [(ngModel)]=\"dateRangeStart\"\n            [name]=\"key.toString() + 'start'\"\n            #startModel=\"ngModel\"\n            [required]=\"metadata.required\"\n            [min]=\"metadata.minStart ? metadata.minStart(dateRange.start) : undefined\"\n            [max]=\"metadata.maxStart ? metadata.maxStart(dateRange.start) : undefined\"\n            [placeholder]=\"metadata.placeholderStart\"\n            (ngModelChange)=\"setDateRangeValues()\"\n        >\n        <input matEndDate\n            [(ngModel)]=\"dateRangeEnd\"\n            [name]=\"key.toString() + 'end'\"\n            #endModel=\"ngModel\"\n            [required]=\"metadata.required\"\n            [min]=\"metadata.minEnd ? metadata.minEnd(dateRange.end) : undefined\"\n            [max]=\"metadata.maxEnd ? metadata.maxEnd(dateRange.end) : undefined\"\n            [placeholder]=\"metadata.placeholderEnd\"\n            (ngModelChange)=\"setDateRangeValues()\"\n        >\n    </mat-date-range-input>\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n    <mat-date-range-picker #picker></mat-date-range-picker>\n\n    <mat-error *ngIf=\"startModel.errors\">{{getValidationErrorMessage(startModel)}}</mat-error>\n    <mat-error *ngIf=\"!startModel.errors && endModel.errors\">{{getValidationErrorMessage(endModel)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"] }]
+        }] });
+
+/* eslint-disable jsdoc/require-jsdoc */
+class DateTimeInputComponent extends NgxMatEntityBaseInputComponent {
+    constructor() {
+        super(...arguments);
+        this.DateUtilities = DateUtilities;
+        this.defaultDateFilter = () => true;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.time = DateUtilities.getTimeFromDate(this.propertyValue);
+        this.timeDropdownValues = this.metadata.times;
+        if (this.propertyValue) {
+            this.propertyValue = new Date(this.propertyValue);
+        }
+    }
+    /**
+     * Checks if two times are equal. Is needed for the dropdown.
+     *
+     * @param time1 - The first time to compare.
+     * @param time2 - The second time to compare.
+     * @returns Whether or not the time objects are the same.
+     */
+    compareTimes(time1, time2) {
+        if (time1 && time2 && time1.hours === time2.hours && time1.minutes === time2.minutes) {
+            return true;
+        }
+        return false;
+    }
+    /**
+     * Sets the time on a datetime property.
+     */
+    setTime() {
+        if (!this.propertyValue) {
+            this.emitChange();
+            return;
+        }
+        if (this.time?.hours != null && this.time?.minutes != null) {
+            this.propertyValue.setHours(this.time.hours, this.time.minutes, 0, 0);
+        }
+        else {
+            this.propertyValue.setHours(0, 0, 0, 0);
+        }
+        this.emitChange();
+    }
+}
+DateTimeInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DateTimeInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DateTimeInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DateTimeInputComponent, selector: "date-time-input", usesInheritance: true, ngImport: i0, template: "<div class=\"date-time\">\n    <mat-form-field appearance=\"standard\">\n        <mat-label>{{metadata.displayName}}</mat-label>\n        <input\n            matInput\n            [(ngModel)]=\"propertyValue\"\n            [name]=\"key.toString()\"\n            #model=\"ngModel\"\n            [matDatepicker]=\"picker\"\n            [required]=\"metadata.required\"\n            [min]=\"metadata.minDate ? metadata.minDate(propertyValue) : undefined\"\n            [max]=\"metadata.maxDate ? metadata.maxDate(propertyValue) : undefined\"\n            [matDatepickerFilter]=\"metadata.filterDate ?? defaultDateFilter\"\n            (dateInput)=\"setTime()\"\n            [disabled]=\"isReadOnly\"\n        >\n        <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n        <mat-datepicker #picker></mat-datepicker>\n        <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n    </mat-form-field>\n    <mat-form-field class=\"timepicker\">\n        <mat-label>{{metadata.timeDisplayName}}</mat-label>\n        <mat-select\n            [(ngModel)]=\"time\"\n            [name]=\"key.toString() + 'time'\"\n            #timeModel=\"ngModel\"\n            [required]=\"metadata.required\"\n            [compareWith]=\"compareTimes\"\n            (ngModelChange)=\"setTime()\"\n            [disabled]=\"isReadOnly\"\n        >\n            <mat-option *ngFor=\"let validTime of DateUtilities.getValidTimesForDropdown(\n                    metadata.times,\n                    propertyValue,\n                    metadata.minTime,\n                    metadata.maxTime,\n                    metadata.filterTime\n                )\"\n                [value]=\"validTime.value\"\n            >\n                {{validTime.displayName}}\n            </mat-option>\n        </mat-select>\n        <mat-error>{{getValidationErrorMessage(timeModel)}}</mat-error>\n    </mat-form-field>\n</div>", styles: ["mat-form-field{width:100%}.date-time{display:flex;align-items:baseline}.date-time .timepicker{margin-left:10px}\n"], components: [{ type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$5.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i2$5.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { type: i2$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i1$1.MatLabel, selector: "mat-label" }, { type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$5.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1$1.MatSuffix, selector: "[matSuffix]" }, { type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DateTimeInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'date-time-input', template: "<div class=\"date-time\">\n    <mat-form-field appearance=\"standard\">\n        <mat-label>{{metadata.displayName}}</mat-label>\n        <input\n            matInput\n            [(ngModel)]=\"propertyValue\"\n            [name]=\"key.toString()\"\n            #model=\"ngModel\"\n            [matDatepicker]=\"picker\"\n            [required]=\"metadata.required\"\n            [min]=\"metadata.minDate ? metadata.minDate(propertyValue) : undefined\"\n            [max]=\"metadata.maxDate ? metadata.maxDate(propertyValue) : undefined\"\n            [matDatepickerFilter]=\"metadata.filterDate ?? defaultDateFilter\"\n            (dateInput)=\"setTime()\"\n            [disabled]=\"isReadOnly\"\n        >\n        <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n        <mat-datepicker #picker></mat-datepicker>\n        <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n    </mat-form-field>\n    <mat-form-field class=\"timepicker\">\n        <mat-label>{{metadata.timeDisplayName}}</mat-label>\n        <mat-select\n            [(ngModel)]=\"time\"\n            [name]=\"key.toString() + 'time'\"\n            #timeModel=\"ngModel\"\n            [required]=\"metadata.required\"\n            [compareWith]=\"compareTimes\"\n            (ngModelChange)=\"setTime()\"\n            [disabled]=\"isReadOnly\"\n        >\n            <mat-option *ngFor=\"let validTime of DateUtilities.getValidTimesForDropdown(\n                    metadata.times,\n                    propertyValue,\n                    metadata.minTime,\n                    metadata.maxTime,\n                    metadata.filterTime\n                )\"\n                [value]=\"validTime.value\"\n            >\n                {{validTime.displayName}}\n            </mat-option>\n        </mat-select>\n        <mat-error>{{getValidationErrorMessage(timeModel)}}</mat-error>\n    </mat-form-field>\n</div>", styles: ["mat-form-field{width:100%}.date-time{display:flex;align-items:baseline}.date-time .timepicker{margin-left:10px}\n"] }]
+        }] });
+
+/**
+ * Adds drag and drop functionality to an element.
+ */
+class DragDropDirective {
+    constructor() {
+        /**
+         * Emits the dropped files to the parent.
+         */
+        this.files = new EventEmitter();
+    }
+    /**
+     * Prevents the event default.
+     *
+     * @param evt - The Event when dragged files hover over the parent.
+     */
+    onDragOver(evt) {
+        evt.preventDefault();
+        evt.stopPropagation();
+    }
+    /**
+     * Prevents the event default.
+     *
+     * @param evt - The Event when dragged files leave the parent.
+     */
+    onDragLeave(evt) {
+        evt.preventDefault();
+        evt.stopPropagation();
+    }
+    /**
+     * Prevents the event default and emits the dropped files with the output.
+     *
+     * @param evt - The Event when files are dropped.
+     */
+    onDrop(evt) {
+        evt.preventDefault();
+        evt.stopPropagation();
+        if (evt.dataTransfer && evt.dataTransfer.files.length > 0) {
+            this.files.emit(Array.from(evt.dataTransfer.files));
+        }
+    }
+}
+DragDropDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DragDropDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+DragDropDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: DragDropDirective, selector: "[dragDrop]", outputs: { files: "files" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DragDropDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: '[dragDrop]'
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { files: [{
+                type: Output
+            }], onDragOver: [{
+                type: HostListener,
+                args: ['dragover', ['$event']]
+            }], onDragLeave: [{
+                type: HostListener,
+                args: ['dragleave', ['$event']]
+            }], onDrop: [{
+                type: HostListener,
+                args: ['drop', ['$event']]
+            }] } });
+
+/* eslint-disable jsdoc/require-jsdoc */
+class FileInputComponent {
+    constructor(dialog) {
+        this.dialog = dialog;
+        this.FileUtilities = FileUtilities;
+        this.fileDataChangeEvent = new EventEmitter();
+    }
+    async ngOnInit() {
+        this.metadata = EntityUtilities.getPropertyMetadata(this.entity, this.key, DecoratorTypes.FILE_DEFAULT);
+        if (this.metadata.multiple) {
+            this.initMultiFile();
+        }
+        else {
+            this.initSingleFile();
+        }
+        this.fileDataChangeEvent.emit(this.singleFileData ?? this.multiFileData);
+    }
+    initMultiFile() {
+        this.multiFileData = this.entity[this.key];
+        if (this.multiFileData) {
+            this.filenames = this.multiFileData.map(f => f.name);
+        }
+    }
+    initSingleFile() {
+        this.singleFileData = this.entity[this.key];
+        if (this.singleFileData) {
+            this.filenames = LodashUtilities.cloneDeep([this.singleFileData.name]);
+        }
+    }
+    async setFileFromInput(event) {
+        const files = event.target.files ?? [];
+        await this.setFile(Array.from(files));
+    }
+    async setFile(files) {
+        // validation done inline
+        if (files.find(f => !FileUtilities.isMimeTypeValid(f.type, this.metadata.allowedMimeTypes))) {
+            this.dialog.open(NgxMatEntityConfirmDialogComponent, {
+                data: this.metadata.mimeTypeErrorDialog,
+                autoFocus: false,
+                restoreFocus: false
+            });
+            this.resetFileInputs();
+            return;
+        }
+        if (files.find(f => FileUtilities.transformToMegaBytes(f.size, 'B') > this.metadata.maxSize)) {
+            this.dialog.open(NgxMatEntityConfirmDialogComponent, {
+                data: this.metadata.maxSizeErrorDialog,
+                autoFocus: false,
+                restoreFocus: false
+            });
+            this.resetFileInputs();
+            return;
+        }
+        let fileSizeTotal = 0;
+        for (const file of files) {
+            fileSizeTotal += file.size;
+        }
+        if (FileUtilities.transformToMegaBytes(fileSizeTotal, 'B') > this.metadata.maxSizeTotal) {
+            this.dialog.open(NgxMatEntityConfirmDialogComponent, {
+                data: this.metadata.maxSizeTotalErrorDialog,
+                autoFocus: false,
+                restoreFocus: false
+            });
+            this.resetFileInputs();
+            return;
+        }
+        if (this.metadata.multiple) {
+            await this.setMultiFile(Array.from(files));
+        }
+        else {
+            await this.setSingleFile(files[0]);
+        }
+        this.fileDataChangeEvent.emit(this.singleFileData ?? this.multiFileData);
+    }
+    resetFileInputs() {
+        this.filenames = undefined;
+        this.singleFileData = undefined;
+        this.multiFileData = undefined;
+        this.fileDataChangeEvent.emit();
+    }
+    async setMultiFile(files) {
+        const data = [];
+        for (const file of files) {
+            const fileData = {
+                file: file,
+                name: file.name,
+                type: file.type,
+                size: file.size
+            };
+            data.push(fileData);
+        }
+        this.multiFileData = LodashUtilities.cloneDeep(data);
+        this.filenames = this.multiFileData.map(f => f.name);
+    }
+    async setSingleFile(file) {
+        this.singleFileData = {
+            file: file,
+            name: file.name,
+            type: file.type,
+            size: file.size
+        };
+        this.filenames = LodashUtilities.cloneDeep([this.singleFileData.name]);
+    }
+    removeFile(name) {
+        if (this.metadata.multiple) {
+            this.filenames?.splice(this.filenames.indexOf(name), 1);
+            if (!this.filenames?.length) {
+                this.filenames = undefined;
+            }
+            const fileDataToRemove = this.multiFileData?.find(f => f.name === name);
+            this.multiFileData?.splice(this.multiFileData.indexOf(fileDataToRemove), 1);
+            if (!this.multiFileData?.length) {
+                this.multiFileData = undefined;
+            }
+        }
+        else {
+            this.filenames = undefined;
+            this.singleFileData = undefined;
+        }
+        this.fileDataChangeEvent.emit(this.singleFileData ?? this.multiFileData);
+    }
+}
+FileInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileInputComponent, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+FileInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FileInputComponent, selector: "file-input", inputs: { entity: "entity", key: "key", getValidationErrorMessage: "getValidationErrorMessage", isReadOnly: "isReadOnly" }, outputs: { fileDataChangeEvent: "fileDataChangeEvent" }, ngImport: i0, template: "<input #fileInput\n    type=\"file\" hidden\n    [multiple]=\"metadata.multiple\"\n    [accept]=\"FileUtilities.getAcceptString(metadata.allowedMimeTypes)\"\n    (change)=\"setFileFromInput($event)\"\n>\n\n<mat-form-field [class.readOnly]=\"isReadOnly\" floatLabel=\"always\" (click)=\"!isReadOnly ? fileInput.click() : null\">\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-chip-list #chipList\n        [(ngModel)]=\"filenames\"\n        [name]=\"key.toString()\"\n        #model=\"ngModel\"\n        [required]=\"metadata.required\"\n        [disabled]=\"isReadOnly\"\n    >\n        <mat-chip *ngFor=\"let name of filenames\" (removed)=\"removeFile(name)\">\n            {{name}}\n            <button matChipRemove>\n                <i class=\"{{metadata.deleteIcon}}\"></i>\n            </button>\n        </mat-chip>\n        <input [matChipInputFor]=\"chipList\" [readonly]=\"true\">\n    </mat-chip-list>\n    <button mat-icon-button matSuffix [disabled]=\"isReadOnly\">\n        <i class=\"fas fa-upload\"></i>\n    </button>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>\n\n<div *ngIf=\"metadata.dragAndDrop && !isReadOnly\" class=\"dropdown\" dragDrop (files)=\"setFile($event)\">\n    <i class=\"fas fa-file-arrow-up\"></i>\n</div>", styles: ["mat-form-field{width:100%}.readOnly:hover,.readOnly:hover input:hover{cursor:default}input:hover,mat-form-field:hover{cursor:pointer}.dropdown{display:flex;align-items:center;justify-content:center;height:200px;border:2px dashed #757575;border-radius:15px;margin-top:5px;margin-bottom:5px}.dropdown i{font-size:30px}\n"], components: [{ type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$6.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i1$1.MatLabel, selector: "mat-label" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$6.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i2$6.MatChipRemove, selector: "[matChipRemove]" }, { type: i2$6.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { type: i1$1.MatSuffix, selector: "[matSuffix]" }, { type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DragDropDirective, selector: "[dragDrop]", outputs: ["files"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'file-input', template: "<input #fileInput\n    type=\"file\" hidden\n    [multiple]=\"metadata.multiple\"\n    [accept]=\"FileUtilities.getAcceptString(metadata.allowedMimeTypes)\"\n    (change)=\"setFileFromInput($event)\"\n>\n\n<mat-form-field [class.readOnly]=\"isReadOnly\" floatLabel=\"always\" (click)=\"!isReadOnly ? fileInput.click() : null\">\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-chip-list #chipList\n        [(ngModel)]=\"filenames\"\n        [name]=\"key.toString()\"\n        #model=\"ngModel\"\n        [required]=\"metadata.required\"\n        [disabled]=\"isReadOnly\"\n    >\n        <mat-chip *ngFor=\"let name of filenames\" (removed)=\"removeFile(name)\">\n            {{name}}\n            <button matChipRemove>\n                <i class=\"{{metadata.deleteIcon}}\"></i>\n            </button>\n        </mat-chip>\n        <input [matChipInputFor]=\"chipList\" [readonly]=\"true\">\n    </mat-chip-list>\n    <button mat-icon-button matSuffix [disabled]=\"isReadOnly\">\n        <i class=\"fas fa-upload\"></i>\n    </button>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>\n\n<div *ngIf=\"metadata.dragAndDrop && !isReadOnly\" class=\"dropdown\" dragDrop (files)=\"setFile($event)\">\n    <i class=\"fas fa-file-arrow-up\"></i>\n</div>", styles: ["mat-form-field{width:100%}.readOnly:hover,.readOnly:hover input:hover{cursor:default}input:hover,mat-form-field:hover{cursor:pointer}.dropdown{display:flex;align-items:center;justify-content:center;height:200px;border:2px dashed #757575;border-radius:15px;margin-top:5px;margin-bottom:5px}.dropdown i{font-size:30px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.MatDialog }]; }, propDecorators: { entity: [{
+                type: Input
+            }], key: [{
+                type: Input
+            }], getValidationErrorMessage: [{
+                type: Input
+            }], isReadOnly: [{
+                type: Input
+            }], fileDataChangeEvent: [{
+                type: Output
+            }] } });
+
+/* eslint-disable jsdoc/require-jsdoc */
+class FileDefaultInputComponent extends NgxMatEntityBaseInputComponent {
+    constructor() {
+        super(...arguments);
+        this.FileUtilities = FileUtilities;
+    }
+    async refreshFileData(fileData) {
+        this.propertyValue = fileData;
+        this.emitChange();
+    }
+}
+FileDefaultInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileDefaultInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+FileDefaultInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FileDefaultInputComponent, selector: "file-default-input", usesInheritance: true, ngImport: i0, template: "<div [class.file-input]=\"metadata.dragAndDrop\" [class.mat-elevation-z8]=\"metadata.dragAndDrop\">\n    <file-input\n        (fileDataChangeEvent)=\"refreshFileData($event)\"\n        [entity]=\"entity\"\n        [key]=\"key\"\n        [getValidationErrorMessage]=\"getValidationErrorMessage\"\n        [isReadOnly]=\"isReadOnly\"\n    >\n    </file-input>\n</div>", styles: [".file-input{margin-top:15px;margin-bottom:15px;padding:15px;border-radius:5px}\n"], components: [{ type: FileInputComponent, selector: "file-input", inputs: ["entity", "key", "getValidationErrorMessage", "isReadOnly"], outputs: ["fileDataChangeEvent"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileDefaultInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'file-default-input', template: "<div [class.file-input]=\"metadata.dragAndDrop\" [class.mat-elevation-z8]=\"metadata.dragAndDrop\">\n    <file-input\n        (fileDataChangeEvent)=\"refreshFileData($event)\"\n        [entity]=\"entity\"\n        [key]=\"key\"\n        [getValidationErrorMessage]=\"getValidationErrorMessage\"\n        [isReadOnly]=\"isReadOnly\"\n    >\n    </file-input>\n</div>", styles: [".file-input{margin-top:15px;margin-bottom:15px;padding:15px;border-radius:5px}\n"] }]
+        }] });
+
+// eslint-disable-next-line max-len
+const placeholder = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAAAAMgCAMAAAAEPmswAAAANlBMVEXx8/XCy9LFztXu8PPs7/Lp7e/W3OHL0tnZ3+PN1NrS2d7i5urn6u7f5OjI0Nfc4ebP1tzk6excnoRZAAAXh0lEQVR42uzUAQ0AAAzDoN+/6eloAiK4B4gQFpAhLCBDWECGsIAMYQEZwgIyhAVkCAvIEBaQISwgQ1hAhrCADGEBGcICMoQFZAgLyBAWkCEsIENYQIawgAxhARnCAjKEBWQIC8gQFpAhLCBDWECGsIAMYQEZwgIyhAVkCAvIEBaQISwgQ1hAhrCADGEBGcICMoQFZAgLyBAWkCEsIENYQIawgAxhARnCAjKEBWQIC8gQFpAhLGDs1AEJAAAAgKD/r9sR6Ag3hAVsCAvYEBawISxgQ1jAhrCADWEBG8ICNoQFbAgL2BAWsCEsYENYwIawgA1hARvCAjaEBWwIC9gQFrAhLGBDWMCGsIANYQEbwgI2hAVsCAvYEBawISxgQ1jAhrCADWEBG8ICNoQFbAgL2BAWsCEsYENYwIawgA1hARvCAjaEBWwIC9gQFrAhLGBDWMCGsIANYQEbwgI2hAVsCAvYEBbETh2QAAAAAAj6/7odgY6QDWEBG8ICNoQFbAgL2BAWsCEsYENYwIawgA1hARvCAjaEBWwIC9gQFrAhLGBDWMCGsIANYQEbwgI2hAVsCAvYEBawISxgQ1jAhrCADWEBG8ICNoQFbAgL2BAWsCEsYENYwIawgA1hARvCAjaEBWwIC9gQFrAhLGBDWMCGsIANYQEbwgI2hAVsCAvYEBawISxgQ1jAhrCADWEBG8ICNoRF7NQBCQAAAICg/6/bEegIYUNYwIawgA1hARvCAjaEBWwIC9gQFrAhLGBDWMCGsIANYQEbwgI2hAVsCAvYEBawISxgQ1jAhrCADWEBG8ICNoQFbAgL2BAWsCEsYENYwIawgA1hARvCAjaEBWwIC9gQFrAhLGBDWMCGsIANYQEbwgI2hAVsCAvYEBawISxgQ1jAhrCADWEBG8ICNoQFbAgL2BAWsCEsYENYwIawgA1hxc6dJtcKAgEURgREwGn/m32Vd1Op/Ih3cO72fIs4BU0rADEIFgAxCBYAMQgWADEIFgAxCBbwm+3bFOKQ8zSV4r13zvky5a4bYgxjYyuch2ABD7ZJMRdnXnIlDyE1FY5HsADbhmFy5lM+x7GvcCSChXtrQufNCnXpQlvhIAQLt2XHONVmE2VIzLaOQLBwT230ZlsuBy6IeyNYuB+bOmd24TpOWrsiWLiZJhazKz8w09oNwcKd9NGbA9SZg9Y+CBZuw4ZijlMiE63tESzcg02TOZqnWVsjWLiDpqvNKXxkI35LBAv6pWJO5APzrM0QLChnozNnm5jBb4RgQbU2m0uoO3YdtkCwoFjy5jp85Ji1GsGCWpfK1X95rLAKwYJS4XK54pi1HsGCSuH8SfucjkWH5QgWFLpwrr6UVGEZggV10rVz9cVxM1yGYEGZthgJ6oHPdhYgWFClv8jeFcOsfRAsKGIHI8rENumHCBb0iLWRhvn7ZwgWtGgvuXj1kidZHyBY0MF2RiqS9T6CBRWCvNsgyVqAYEGBRsYqA8lajWBBPGlvg38rvBi+gWBBuvb6i+3vmdjLeolgQTYdx6tvme33FwgWRBO6yzBr4BvDpwgWJNN0vHqo+Sz6GYIFuRplx6sHx4PhPIIFsaJRigfDWQQLQvXid6+Yvn+OYEGmUfRq+2uMsv5EsCCSvmk7o6x3ECwIpPo6yCLpEwQL8iTl10G2smYRLIij/zrIvXAOwYIwvcrlq1kT74W/ESzIMmr51Plddazwg2BBlGDux7NH+oNgQRK5/0Fm+L4JgvWPvbvRSRiGAjBaBoqK+PP+L2s0xGSj3QiQ9I57zkN86brblvVItn1l8/2cYLEar1mmGWoOFlm/BIu1yLh9ZZE1IVisRNLtK4usEcFiFYbvwtYiS7BYg7zb7WPfFlmCRXj7bNOiFlkNgkV8j373lZ2siwkW4SX/PTi1+9pkJljEluhyhgsdMy+yBIvQDoWpXeLThYJFYMYZ6vJe4SBYxDWkuAv5Gu9Z78kSLMIajF8ZcBgRLOL6MH5l731MsAhrb/zK3vuEYBFV6ttk7L3XCRZBvRUcLpwSLGLSK3PvFYJFSHrls7BGsIhIr3wWVgkWATnu7G9hnWARj175LGwQLMLRK5+FLYJFNHp1jd1+k4NgEYpeXel5k4JgEYleXe24yUCwCESvXDkzR7CIxPzVTbYJxt4FizD0ynzDPMEiDr3yCtgCwSKMr8Ltnh58I0uwiOG1cA/bxz6oI1iE4L4+E1nLBIsY3IdsIusCgkUI3pu4q/fH3XoXLPob9OqXo4VLBIsAvD944tnCBYJFAN53PjFDukCw6O9Q+GPrfYlg0d2x8M+tfrMEi94+CyOm3tsEi65cKDNl6n2OYNGTA89Vpt5bBIuOHCCs8rOwSbDoaW9gtMbPwhbBohsD7k1+FjYIFv0MBkbb/CysESx6MTA6z8nCCsGiEwNYS7xOcU6w6OWlsMB4ww9794LdJgyEUXgwAsfFL/a/2Z4+T2zjWCMgnl/cbwttbxppNNwjWHgLBrByMN5wj2Ct4HztL+OxS621qTuOp/5a06HnItgw+v0uTRUI1qL2/dDao3b8qO+RRDkGGt5haGpAsJZzPbX2XDvUc/I5ExuwsrE4+QbBWsz+I9kr6VLR/XI5Nsq8SVdBsQjWIg6D5Rn5bxYbGpwYyPqPYC3iMFq+4+aTxSeevdg38xfBWsB5MJ+j/s+5Oc5cEDoxQvoPwZrvozW3SwWHCWX4RM67iX9Oh2DNc+isRFL/QVduNBRg6P0XgjVTv/nJYx9eEAYgXSyCNcNu2PpUjBMXhCEo/7AkWKVm78tM8jc2XqxEDkL4mQ7BKnZot35j48QFYRi6z3QIVqlru/kbGx8uCAORLRbBKvSD808nVoxGorrpnWCVuTIV48TKvlhEL30IVoEl1zlt5xyLlX2xaBaLYJU4J153+bCyLx7J5Q0Ey23hw+Ok+NfGiwP3iBSLRbAKDLaksdkCDtwDSnrLuwmWX29mDB57MOEelF6xCJbTGocx9R9jMeEelNxKP4Ll1tlvHGPl4psTgbVixSJYXr39wS+FuVgpE5lYsQiW0661FcgdJTiwUiY2rd8KCZbTyf7ipjAPO9yjk/o/FsHy2dstBt5fYEVDfErFIlg+g63j2FSLidHwhJ5bECyXs33GaMNLfDRVgk6xCJbLyT7jFOsVJkZFyBSLYHnsbD1C5wgOe4MElWIRLI/e7rFn+ws8eRYiUiyC5dHZelJTIZ4869C4KyRYDnu7x2TDF9gxqkWiWATL4WJrOjW14cmzFoViESyHZGtqm8rw5FmNwCsdgpXvbI8YxXqGJ8+C4heLYOXr7RE7G57gAEtS+I1+BCvfyaYwOzqFAyxR0YtFsPIle8Qh1iQOsGQFLxbByrazCQy7T2ICS1fsb+kQrGwHe4rPQN/iCaGy0MUiWNl6m8Kp+yN2YGmL/E1ogpXtYtMYHb3HDixxgYtFsLIN9gRb/G6xxF1e3AtrgpXtaM/w/vkzlrhXYGiCIljZOntAsKbsOMDSF7VYBCtbsrVV8ofBk5waBD1QreTfyPoIVh6e5NQi5kbJOv6NfAtbX9zLmVw8yanHT/buBDt1GIbCsJwRCOP+N/t62vNaphLbSZEs/98O2gOXyJFkk102BFYkAisGIzmeDMEeAitaK09REl5hJMcVg6MXHr4jb8EZVgRGcpyxl1gOviPv0stzrGv4MdLR4Iu5pZIEViQaR+cxkuOOucu/CKxIjObMYiTHIWsXUxBY0TbynPtevUiM5LhkbKEfgRWJ9TIz6GhwytZ6LAIrEgv8ZtDR4JWpZTMEViRWJM/ZCXyytGyGwIrFJRSvsGTUM0OHqwRWLK75eoUdDa7ZGYQmsOLt5CnO3EOgxd05M59NAisWV9W/MgpcszIITWAl6OUeR1ifaHH37xxMILASnOSBz5NNY/8ZGGBkSIfASjDKDZ8/YelY2lcFG0M6BFaKXh4w+UyLeyU6Cw2kBFaKQW75fHOc7CCogYUhHQIrRSN3aHMPtLjXw0CnIIGV5CT3vN8DN4eCsCb6L4YIrCRHuUYTVgi0uFdFvYGUwEpzkP/cPWxnocW9MkPQRGClGuUKPQ1sca/OOSgisJId5BsnWB/2gqqoNpASWMmaVv6ArTW00biXvkLtMaghsNIN8snXUWYeZp6rpNiORWBl2Mva+lAqZp5rtA9aCKxk36s1aWlg5rlWU1BCYOXYyQcKQmae63UKOgisLAcRoQWLgrBiQ1BBYGVpem8z8BkoCKt2DhoIrDzHztmWoXQUhHXT+dwSWJnGtvoDd2ae66ZSGRBYubbVX/ZMQVg5jXYsAivbueyzSyN/Pwo2hbcjsPJt25qfrygIodDcQGAtMHZlj5EuwFZkqBQIBNYSx16W6Ip9P0hBCJ3mBgJrkeYg+S7F9l9REEKpuYHAWmiobx4nBApCKDU3EFhLjb3k6As+vuKaHGhtbiCwlhvayh6vKAihdZEOgbWCZpI0l2L3i36ZBFD59SWwVjFOKXFVdDUYKAih101IYK0iIbKm0uMqNFyTA615WAJrNcdNL3O6TcGtV18oCKH4qpDAWtP21MnvukOxdw/+oCCE5qtCAmtlx2Hq5FE7DQ6erUKgIITqHDSB9Qea7XCaLvu+a7u+30+nYVtwT/stCkKovioksJCAgvAfe3eU6ygMBFG0GhtCSAxh/5udUWby8Z4COGCgI92ziJLLuBuc+6mQwEI+nozi9KlCAgu5KIQ4/VMhgYVMFEKc/6mQwEIeCiEcTBUSWMhDIYSDBaQEFrJQCOFhASmBhRwUQiwLve2LwEIetozCxb8KCSxk4LcT8DGjQ2BhGYUQTmZ0CCwsoxDCyYwOgYVFFEJ4mdEhsLCEQgg3MzoEFpZQCPGJ0XZDYGERhRCfGWwvBBaWUAjh6OKdwMI8CiE+drF9EFhYQCGEp4t3AgtzKIRwdfFOYGEOhRCuLt4JLMy6CvBz8U5gYU5VC/Dz4p3AwpxBgKNVMwQWJlEI4W3VDIGFGRRC+Fo1Q2BhCoUQ7na8E1iYdBHga8c7gYUJFEL4u3gnsDClFeDs4p3AwjsUQrj8uarsCP21a4Z0G+sYQwiSQoixvo9paJvHpTI4RCFEAVcrSrar/tEMY9SCeL+1zaM3OEIhhMPFDbK9VF07Bn2kTs2V45YPFEJ4XNwg20PfpKgJOallONtdgL/FDbLSqi7V2qpOHUetU1AI8eR0cYOsqKq7BRVybzlpHY5CiH+cvh+VlVN1o8oKt4ar+CNRCPHi8/2orJRrCtpDTA/DISiE2EeyUmRFVG3UfgKZdQAKIX7y+H5UVkA/BP1GZn0vCiGeHP74S7bZJek9Mus7NQL+8vh+VLZRlXSckC6GnfUCnhyOQcu2aYOOVTc80CqOQoj33O0flW3RRR0vJN5nlUUhxAR3Y9Cy9aqb8nHM+g59EPDi7hpLtloXdCKOWYVQCDHP1Ri0LJOf49VL3Rm2ohBiga9rLFkeX8er/yLNcBsKIXI4+o2ObAU//38KA7OGJY0CfvM0Bi1bofd00cHTrLUohDja3TaSfe4R5crIC/gVKIR/2Lvb5NRhGArD54RvCC3sf7N3Op07UyhJ7PQHsvU+W4BxIvlIQbkw2/zkMrFH+em/V6MgRKlIbSy50hDzX82RVYeCEMUitbHkOh9hP/60ozAsRkGIGoHaWHKVQ7D21YORI6sCkVGUC9PGkqcFTV9xZP0RBSGqRWljyb+1/J/myKrAllG8w2bwavKEwGnReXdyWXMoCPF2o1eTi719eLDUlYGdOa1kVdCvo9eSH/RwXkmbI0fWSxSEiOHmleRnTcWvpmz3RoWwYRX0afVuLLnI0FyLg1jWMwpCxHH3OnKJocUn8Ej3/QcKQoRy9Cryt/7OK7rvDygIEcvJa8hf+jyvaGX91HpcBZ1Z18aS7W7PK0kjq9+XnAS8wcUryO75vKIutE1BiJD2rifb7ut+8NmGupCCEBEdXE3dn1eSdtSFFISIZze4lvxf10soqQsnDJH3BaF3V9dSivNK2rKR9KWrgPc5u5LcyfzgogsfBPvtJuB96hcmK08/luY7BSGi2bmOMk2YMazT8Rs02vTpKvKks/pzNPr+hdGam2soWXuDhAOfyUEodSM68oRTr//mTxIOvV0Bo2l3V5BfO/R6XvGS1dAnRZDC3uWU8fro02AJFsI4uJhSfkNlx3UhM88Io2JER0nzz+mvC/vK2KFtV5dSigAWL1nMPCOyswspbzwn80tW3z1KNKd4REeJH75j3ulCIu6IZXQZ+dlHnofvJusKhyTv0GjI0UXU20bkOpeUKVIi7ojn5BJKXixsM6ZIOw+toEllIzpKeEGYPUWa7zdGC64uIJob2XrvaS5V0JizlynLBCGb/Ug0ILbN4EXK23BP2ntP1qREQ+5eJPaNfNmmyb2zowFx7b1ENGO/JSkLcxb9aMXBC5S74Z6uLMxa9KMNOy8Qz95MkSx2NCC2q+cpfcM90zh0n3v60ZObZ4nLox/ufZeFQ/aXaMS3EHgXl0d5ysK8t8Box8VzRPo5zW1h6ltgNGPvGSL9nOW2kAYWmjC7zE80sJIsT+ahhEaMniZqhSR7/f6xdy+4iQNBEEDdQYEA4Xf/y+5ukk2AYAkFKXKX3ztEWe6p6THAoouXGjUYYM1j5YyPEn2saszgX2EWK2cMsGhk/KHCwb/CTYtjJfFRopVDjRj8K8yh9m4pMr0c67bBAGsG/QZXCGlmrPA++FcY9ZwyyJr5Hg462tZNA/GDLK960dCmvhNYMxhk2cNBR7cK7wJrBoOs3QANneobgZU/yLKHg6aWdU1gxQ+ynALT1qquCKz0jTMao/T1WlcE1l121ZbGKI291CWBdZ/XrqN3A3daW9UFgZX90KqBO7091wWBFb0jy8Cd7g51TmAld0g13OlvXWcEVnCHVMOdABe3oAVW8Ojdon4S7OqLwModvdtzRoZjfRJYsaN3K2UIcfZTKLBSR+8OCImxrf8EVmjr3QEhQTb1QWBljt4dEJJk8VTvBFbm6N1DSETZ1juBFblwxpsThNnUG4GVuHBGoYE0Hz+FAivwsNCNZ/Js6x+B9VPbmiqP0pNoWX8JrLjDwpVCA4nefgoFVtph4d5KZDKdqkpgPWCxrslRwCLWskpgPWRyNwufrHAn1mJfAivqsFBekexUAivqZqGCO9GWAutRpwkdFtrYR7bFXmDlPGXvSS/SnQRWTL1BXpHPNY6Uu9AuPDMDatEhd6HlFdCl3iCvgC71BnkFdLkLbd4OdKk3yCugS71BXgFd6g367UCTeoP7zsAPHeoe9l8BU7CrX7WyXxRoUm9Yu6gA/GHvDnMThmEwgNZpF9LQUrj/ZfdvmmBMDEabSu8dIkrsz85O4g3VeQW8ZhjjPv+lAk3pa9whzgA0J8ePxBmABs3xZqP2ILCTVe/2LgI7aRYm04NA1+1iFvog3Q503S6ahZ6DwJe2FycnaQbgLY4p/lnVHQS+abj07noFXGl2TsfsIHCrydS76xVwq8lCViquV8D7fRwU24HdyPGa0aQzsJrpFM8bFa+ANfUlnnS+dADrGmo8oZobBLYwLKf4k1NRagc2M9UUD0rZWxDYVj8/cmalOotdAS2Yyhi/OBcpBqAh/WXJY4or6ZwXhxXQpGE6znMpOZdlmY+TVyAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPDJHhwIAAAAAAD5vzaCqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqwBwcCAAAAAED+r42gqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqirswYEAAAAAAJD/ayOoqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqkp7cCAAAAAAIMjfepArAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgKcAnTNeiLeG1rEAAAAASUVORK5CYII=';
+
+/* eslint-disable jsdoc/require-jsdoc */
+class FileImageInputComponent extends NgxMatEntityBaseInputComponent {
+    constructor() {
+        super(...arguments);
+        this.FileUtilities = FileUtilities;
+        this.imageIndex = 0;
+        this.placeHolder = placeholder;
+    }
+    async setSinglePreviewImage() {
+        if (this.propertyValue) {
+            this.propertyValue = await FileUtilities.getFileData(this.propertyValue);
+            this.singlePreviewImage = await FileUtilities.getDataURLFromFile(this.propertyValue.file);
+        }
+        else {
+            this.singlePreviewImage = undefined;
+        }
+    }
+    async setMultiPreviewImages(index) {
+        const multiFileData = this.propertyValue;
+        const previewImages = [];
+        if (multiFileData?.length) {
+            for (let i = 0; i < multiFileData.length; i++) {
+                if (i === index) {
+                    multiFileData[index] = await FileUtilities.getFileData(multiFileData[index]);
+                    previewImages.push(await FileUtilities.getDataURLFromFile(multiFileData[index].file));
+                }
+                else {
+                    previewImages.push('empty');
+                }
+            }
+        }
+        this.multiPreviewImages = previewImages;
+    }
+    async refreshFileData(fileData) {
+        this.propertyValue = fileData;
+        this.emitChange();
+        if (this.metadata.multiple) {
+            fileData = fileData;
+            if (!fileData?.[this.imageIndex]) {
+                this.imageIndex = 0;
+            }
+            await this.setMultiPreviewImages(this.imageIndex);
+        }
+        else {
+            await this.setSinglePreviewImage();
+        }
+    }
+    async prev() {
+        if (this.imageIndex <= 0) {
+            return;
+        }
+        await this.setMultiPreviewImages(this.imageIndex - 1);
+        this.imageIndex--;
+    }
+    async next() {
+        if (!this.multiPreviewImages?.length) {
+            return;
+        }
+        if (this.imageIndex === (this.multiPreviewImages.length - 1)) {
+            return;
+        }
+        await this.setMultiPreviewImages(this.imageIndex + 1);
+        this.imageIndex++;
+    }
+    async setIndex(index) {
+        await this.setMultiPreviewImages(index);
+        this.imageIndex = index;
+    }
+}
+FileImageInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileImageInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+FileImageInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FileImageInputComponent, selector: "file-image-input", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"!metadata.dragAndDrop && !metadata.preview\">\n    <file-input\n        (fileDataChangeEvent)=\"refreshFileData($event)\"\n        [entity]=\"entity\"\n        [key]=\"key\"\n        [getValidationErrorMessage]=\"getValidationErrorMessage\"\n        [isReadOnly]=\"isReadOnly\"\n    >\n    </file-input>\n</div>\n\n<div *ngIf=\"metadata.dragAndDrop || metadata.preview\" class=\"file-input mat-elevation-z8\">\n    <file-input\n        (fileDataChangeEvent)=\"refreshFileData($event)\"\n        [entity]=\"entity\"\n        [key]=\"key\"\n        [getValidationErrorMessage]=\"getValidationErrorMessage\"\n        [isReadOnly]=\"isReadOnly\"\n    >\n    </file-input>\n\n    <div class=\"image-preview\" *ngIf=\"metadata.preview && metadata.multiple\">\n        <i (click)=\"prev()\" [class.disabled]=\"imageIndex === 0\" class=\"prev-button fa-solid fa-angle-left\"></i>\n        <img *ngIf=\"multiPreviewImages?.[imageIndex]\" class=\"mat-elevation-z2\" [src]=\"multiPreviewImages?.[imageIndex]\">\n        <img *ngIf=\"!multiPreviewImages?.[imageIndex]\" class=\"mat-elevation-z2\" [src]=\"metadata.previewPlaceholderUrl ?? placeHolder\">\n        <i (click)=\"next()\"\n            [class.disabled]=\"!multiPreviewImages || !multiPreviewImages.length || imageIndex === (multiPreviewImages.length - 1)\"\n            class=\"next-button fa-solid fa-angle-right\"\n        >\n        </i>\n    </div>\n    <div class=\"preview-nav\" *ngIf=\"metadata.preview && metadata.multiple\">\n        <button (click)=\"setIndex(imageIndex-4)\" mat-icon-button *ngIf=\"\n            this.multiPreviewImages\n            && multiPreviewImages[imageIndex-4]\n            && imageIndex === (this.multiPreviewImages.length - 1)\"\n        >\n            <span class=\"dot\"></span>\n            <span class=\"image-index\">{{imageIndex - 3}}</span>\n        </button>\n        <!-- eslint-disable-next-line @angular-eslint/template/conditional-complexity -->\n        <button (click)=\"setIndex(imageIndex-3)\" mat-icon-button *ngIf=\"this.multiPreviewImages\n            && multiPreviewImages[imageIndex-3]\n            && (\n                imageIndex === (this.multiPreviewImages.length - 2)\n                || imageIndex === (this.multiPreviewImages.length - 1)\n            )\"\n        >\n            <span class=\"dot\"></span>\n            <span class=\"image-index\">{{imageIndex - 2}}</span>\n        </button>\n        <button (click)=\"setIndex(imageIndex-2)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex-2]\">\n            <span class=\"dot\"></span>\n            <span class=\"image-index\">{{imageIndex - 1}}</span>\n        </button>\n        <button (click)=\"setIndex(imageIndex-1)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex-1]\">\n            <i class=\"dot\"></i>\n            <span class=\"image-index\">{{imageIndex}}</span>\n        </button>\n        <button mat-icon-button disabled>\n            <i class=\"dot selected\"></i>\n            <span class=\"image-index\">{{imageIndex + 1}}</span>\n        </button>\n        <button (click)=\"setIndex(imageIndex+1)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex+1]\">\n            <span class=\"dot\"></span>\n            <span class=\"image-index\">{{imageIndex + 2}}</span>\n        </button>\n        <button (click)=\"setIndex(imageIndex+2)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex+2]\">\n            <span class=\"dot\"></span>\n            <span class=\"image-index\">{{imageIndex + 3}}</span>\n        </button>\n        <button (click)=\"setIndex(imageIndex+3)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex+3] && imageIndex <= 1\">\n            <span class=\"dot\"></span>\n            <span class=\"image-index\">{{imageIndex + 4}}</span>\n        </button>\n        <button (click)=\"setIndex(imageIndex+4)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex+4] && imageIndex === 0\">\n            <span class=\"dot\"></span>\n            <span class=\"image-index\">{{imageIndex + 5}}</span>\n        </button>\n    </div>\n\n    <div class=\"image-preview\" *ngIf=\"metadata.preview && !metadata.multiple\">\n        <i class=\"prev-button disabled fa-solid fa-angle-left\"></i>\n        <img class=\"mat-elevation-z2\" [src]=\"singlePreviewImage ?? metadata.previewPlaceholderUrl ?? placeHolder\">\n        <i class=\"next-button disabled fa-solid fa-angle-right\"></i>\n    </div>\n    <div class=\"preview-nav\" *ngIf=\"metadata.preview && !metadata.multiple\">\n        <button disabled mat-icon-button>\n            <span class=\"dot selected\"></span>\n            <span class=\"image-index\">1</span>\n        </button>\n    </div>\n</div>", styles: [".file-input{margin-top:15px;margin-bottom:15px;padding:15px;border-radius:5px}.image-preview{height:250px;display:flex;align-items:center;padding-top:15px;padding-bottom:15px}.image-preview .prev-button{font-size:100px;margin-left:5px}.image-preview .next-button{font-size:100px;margin-right:5px}.image-preview .prev-button:hover,.image-preview .next-button:hover{cursor:pointer}.image-preview .prev-button.disabled,.image-preview .next-button.disabled{color:#00000042}.image-preview .prev-button.disabled:hover,.image-preview .next-button.disabled:hover{cursor:default}.image-preview img{max-width:calc(100% - 100px);max-height:100%;margin-left:auto;margin-right:auto;border-radius:3px}.preview-nav{text-align:center}.preview-nav button{display:inline-block;width:18px;height:18px;margin-left:5px;margin-right:5px}.preview-nav button .dot{height:100%;width:100%;background-color:#00000061;border-radius:50%;display:block}.preview-nav button .dot.selected{background-color:#000000de}.preview-nav button .image-index{position:absolute;height:100%;width:100%;display:block;top:-11.5px;color:#fff}.preview-nav button:hover{background-color:#000}\n"], components: [{ type: FileInputComponent, selector: "file-input", inputs: ["entity", "key", "getValidationErrorMessage", "isReadOnly"], outputs: ["fileDataChangeEvent"] }, { type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileImageInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'file-image-input', template: "<div *ngIf=\"!metadata.dragAndDrop && !metadata.preview\">\n    <file-input\n        (fileDataChangeEvent)=\"refreshFileData($event)\"\n        [entity]=\"entity\"\n        [key]=\"key\"\n        [getValidationErrorMessage]=\"getValidationErrorMessage\"\n        [isReadOnly]=\"isReadOnly\"\n    >\n    </file-input>\n</div>\n\n<div *ngIf=\"metadata.dragAndDrop || metadata.preview\" class=\"file-input mat-elevation-z8\">\n    <file-input\n        (fileDataChangeEvent)=\"refreshFileData($event)\"\n        [entity]=\"entity\"\n        [key]=\"key\"\n        [getValidationErrorMessage]=\"getValidationErrorMessage\"\n        [isReadOnly]=\"isReadOnly\"\n    >\n    </file-input>\n\n    <div class=\"image-preview\" *ngIf=\"metadata.preview && metadata.multiple\">\n        <i (click)=\"prev()\" [class.disabled]=\"imageIndex === 0\" class=\"prev-button fa-solid fa-angle-left\"></i>\n        <img *ngIf=\"multiPreviewImages?.[imageIndex]\" class=\"mat-elevation-z2\" [src]=\"multiPreviewImages?.[imageIndex]\">\n        <img *ngIf=\"!multiPreviewImages?.[imageIndex]\" class=\"mat-elevation-z2\" [src]=\"metadata.previewPlaceholderUrl ?? placeHolder\">\n        <i (click)=\"next()\"\n            [class.disabled]=\"!multiPreviewImages || !multiPreviewImages.length || imageIndex === (multiPreviewImages.length - 1)\"\n            class=\"next-button fa-solid fa-angle-right\"\n        >\n        </i>\n    </div>\n    <div class=\"preview-nav\" *ngIf=\"metadata.preview && metadata.multiple\">\n        <button (click)=\"setIndex(imageIndex-4)\" mat-icon-button *ngIf=\"\n            this.multiPreviewImages\n            && multiPreviewImages[imageIndex-4]\n            && imageIndex === (this.multiPreviewImages.length - 1)\"\n        >\n            <span class=\"dot\"></span>\n            <span class=\"image-index\">{{imageIndex - 3}}</span>\n        </button>\n        <!-- eslint-disable-next-line @angular-eslint/template/conditional-complexity -->\n        <button (click)=\"setIndex(imageIndex-3)\" mat-icon-button *ngIf=\"this.multiPreviewImages\n            && multiPreviewImages[imageIndex-3]\n            && (\n                imageIndex === (this.multiPreviewImages.length - 2)\n                || imageIndex === (this.multiPreviewImages.length - 1)\n            )\"\n        >\n            <span class=\"dot\"></span>\n            <span class=\"image-index\">{{imageIndex - 2}}</span>\n        </button>\n        <button (click)=\"setIndex(imageIndex-2)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex-2]\">\n            <span class=\"dot\"></span>\n            <span class=\"image-index\">{{imageIndex - 1}}</span>\n        </button>\n        <button (click)=\"setIndex(imageIndex-1)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex-1]\">\n            <i class=\"dot\"></i>\n            <span class=\"image-index\">{{imageIndex}}</span>\n        </button>\n        <button mat-icon-button disabled>\n            <i class=\"dot selected\"></i>\n            <span class=\"image-index\">{{imageIndex + 1}}</span>\n        </button>\n        <button (click)=\"setIndex(imageIndex+1)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex+1]\">\n            <span class=\"dot\"></span>\n            <span class=\"image-index\">{{imageIndex + 2}}</span>\n        </button>\n        <button (click)=\"setIndex(imageIndex+2)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex+2]\">\n            <span class=\"dot\"></span>\n            <span class=\"image-index\">{{imageIndex + 3}}</span>\n        </button>\n        <button (click)=\"setIndex(imageIndex+3)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex+3] && imageIndex <= 1\">\n            <span class=\"dot\"></span>\n            <span class=\"image-index\">{{imageIndex + 4}}</span>\n        </button>\n        <button (click)=\"setIndex(imageIndex+4)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex+4] && imageIndex === 0\">\n            <span class=\"dot\"></span>\n            <span class=\"image-index\">{{imageIndex + 5}}</span>\n        </button>\n    </div>\n\n    <div class=\"image-preview\" *ngIf=\"metadata.preview && !metadata.multiple\">\n        <i class=\"prev-button disabled fa-solid fa-angle-left\"></i>\n        <img class=\"mat-elevation-z2\" [src]=\"singlePreviewImage ?? metadata.previewPlaceholderUrl ?? placeHolder\">\n        <i class=\"next-button disabled fa-solid fa-angle-right\"></i>\n    </div>\n    <div class=\"preview-nav\" *ngIf=\"metadata.preview && !metadata.multiple\">\n        <button disabled mat-icon-button>\n            <span class=\"dot selected\"></span>\n            <span class=\"image-index\">1</span>\n        </button>\n    </div>\n</div>", styles: [".file-input{margin-top:15px;margin-bottom:15px;padding:15px;border-radius:5px}.image-preview{height:250px;display:flex;align-items:center;padding-top:15px;padding-bottom:15px}.image-preview .prev-button{font-size:100px;margin-left:5px}.image-preview .next-button{font-size:100px;margin-right:5px}.image-preview .prev-button:hover,.image-preview .next-button:hover{cursor:pointer}.image-preview .prev-button.disabled,.image-preview .next-button.disabled{color:#00000042}.image-preview .prev-button.disabled:hover,.image-preview .next-button.disabled:hover{cursor:default}.image-preview img{max-width:calc(100% - 100px);max-height:100%;margin-left:auto;margin-right:auto;border-radius:3px}.preview-nav{text-align:center}.preview-nav button{display:inline-block;width:18px;height:18px;margin-left:5px;margin-right:5px}.preview-nav button .dot{height:100%;width:100%;background-color:#00000061;border-radius:50%;display:block}.preview-nav button .dot.selected{background-color:#000000de}.preview-nav button .image-index{position:absolute;height:100%;width:100%;display:block;top:-11.5px;color:#fff}.preview-nav button:hover{background-color:#000}\n"] }]
+        }] });
+
+/* eslint-disable jsdoc/require-jsdoc */
+class CustomInputComponent extends NgxMatEntityBaseInputComponent {
+    constructor(viewContainerRef) {
+        super();
+        this.viewContainerRef = viewContainerRef;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.component = this.viewContainerRef.createComponent(this.metadata.component);
+        this.component.instance.entity = this.entity;
+        this.component.instance.key = this.key;
+        this.component.instance.getValidationErrorMessage = this.getValidationErrorMessage;
+        this.component.instance.inputChangeEvent.subscribe(this.inputChangeEvent);
+        this.component.instance.isReadOnly = this.isReadOnly;
+    }
+}
+CustomInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CustomInputComponent, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
+CustomInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CustomInputComponent, selector: "custom-input", usesInheritance: true, ngImport: i0, template: "", styles: [""] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CustomInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'custom-input', template: "", styles: [""] }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; } });
+
+/**
+ * The default input component. It gets the metadata of the property from the given @Input "entity" and @Input "propertyKey"
+ * and displays the input field accordingly.
+ *
+ * You can also define a method that generates error-messages and if the input should be hidden when its metadata says
+ * that it should be omitted for creating or updating.
+ * The last part being mostly relevant if you want to use this component inside an ngFor.
+ */
+class NgxMatEntityInputComponent {
+    constructor(dialog) {
+        this.dialog = dialog;
+        this.inputChangeEvent = new EventEmitter();
+        this.selection = new SelectionModel(true, []);
+        this.isArrayItemValid = false;
+        this.isDialogArrayItemValid = false;
+        this.DecoratorTypes = DecoratorTypes;
+        this.EntityUtilities = EntityUtilities;
+        this.DateUtilities = DateUtilities;
+    }
+    /**
+     * This is needed for the inputs to work inside an ngFor.
+     *
+     * @param index - The index of the element in the ngFor.
+     * @returns The index.
+     */
+    trackByFn(index) {
+        return index;
+    }
+    ngOnInit() {
+        if (!this.entity) {
+            throw new Error('Missing required Input data "entity"');
+        }
+        this.internalEntity = this.entity;
+        if (this.propertyKey == null) {
+            throw new Error('Missing required Input data "propertyKey"');
+        }
+        this.internalPropertyKey = this.propertyKey;
+        this.internalGetValidationErrorMessage = this.getValidationErrorMessage ?? getValidationErrorMessage;
+        this.internalIsReadOnly = this.isReadOnly ?? false;
+        this.type = EntityUtilities.getPropertyType(this.internalEntity, this.internalPropertyKey);
+        this.metadata = EntityUtilities.getPropertyMetadata(this.internalEntity, this.internalPropertyKey, this.type);
+        if (this.type === DecoratorTypes.OBJECT) {
+            this.initObjectInput();
+        }
+        if (this.type === DecoratorTypes.ARRAY) {
+            this.initEntityArray();
+        }
+    }
+    initEntityArray() {
+        this.metadataEntityArray = this.metadata;
+        if (this.internalEntity[this.internalPropertyKey] == null) {
+            this.internalEntity[this.internalPropertyKey] = [];
+        }
+        this.entityArrayValues = this.internalEntity[this.internalPropertyKey];
+        if (!this.metadataEntityArray.createInline && !this.metadataEntityArray.createDialogData) {
+            this.metadataEntityArray.createDialogData = {
+                title: 'Add'
+            };
+        }
+        const givenDisplayColumns = this.metadataEntityArray.displayColumns.map((v) => v.displayName);
+        if (givenDisplayColumns.find(s => s === 'select')) {
+            throw new Error(`The name "select" for a display column is reserved.
+                Please choose a different name.`);
+        }
+        this.displayedColumns = this.internalIsReadOnly ? givenDisplayColumns : ['select'].concat(givenDisplayColumns);
+        this.dataSource = new MatTableDataSource();
+        this.dataSource.data = this.entityArrayValues;
+        this.arrayItem = new this.metadataEntityArray.EntityClass();
+        this.arrayItemInlineRows = EntityUtilities.getEntityRows(this.arrayItem, this.hideOmitForCreate ?? true, this.hideOmitForEdit);
+        this.arrayItemPriorChanges = LodashUtilities.cloneDeep(this.arrayItem);
+        this.dialogInputData = {
+            entity: this.arrayItem,
+            createDialogData: this.metadataEntityArray.createDialogData,
+            getValidationErrorMessage: this.getValidationErrorMessage
+        };
+        this.dialogData = new AddArrayItemDialogDataBuilder(this.dialogInputData).getResult();
+        this.arrayItemDialogRows = EntityUtilities.getEntityRows(this.dialogData.entity, true);
+    }
+    initObjectInput() {
+        this.metadataDefaultObject = this.metadata;
+        this.objectProperty = this.internalEntity[this.internalPropertyKey];
+        this.objectPropertyRows = EntityUtilities.getEntityRows(this.objectProperty, this.hideOmitForCreate, this.hideOmitForEdit);
+    }
+    /**
+     * Checks if the arrayItem is valid.
+     */
+    checkIsArrayItemValid() {
+        this.isArrayItemValid = EntityUtilities.isEntityValid(this.arrayItem, 'create');
+    }
+    /**
+     * Checks if the arrayItem inside the dialog is valid.
+     */
+    checkIsDialogArrayItemValid() {
+        this.isDialogArrayItemValid = EntityUtilities.isEntityValid(this.dialogData.entity, 'create');
+    }
+    /**
+     * Emits that a the value has been changed.
+     */
+    emitChange() {
+        this.inputChangeEvent.emit();
+    }
+    /**
+     * Tries to add an item to the entity array.
+     * Does this either inline if the "createInline"-metadata is set to true
+     * or in a separate dialog if it is set to false.
+     */
+    async addEntity() {
+        if (this.metadataEntityArray.createInline) {
+            if (!this.metadataEntityArray.allowDuplicates) {
+                for (const v of this.entityArrayValues) {
+                    if ((await EntityUtilities.isEqual(this.arrayItem, v, this.metadata, this.metadataEntityArray.itemType))) {
+                        this.dialog.open(NgxMatEntityConfirmDialogComponent, {
+                            data: this.metadataEntityArray.duplicatesErrorDialog,
+                            autoFocus: false,
+                            restoreFocus: false
+                        });
+                        return;
+                    }
+                }
+            }
+            this.entityArrayValues.push(LodashUtilities.cloneDeep(this.arrayItem));
             this.dataSource.data = this.entityArrayValues;
             EntityUtilities.resetChangesOnEntity(this.arrayItem, this.arrayItemPriorChanges);
+            this.checkIsArrayItemValid();
+            this.emitChange();
         }
         else {
             this.addArrayItemDialogRef = this.dialog.open(this.addArrayItemDialog, {
@@ -1369,9 +2891,11 @@ class NgxMatEntityInputComponent {
      */
     addArrayItem() {
         this.addArrayItemDialogRef.close();
-        this.entityArrayValues.push(cloneDeep(this.arrayItem));
+        this.entityArrayValues.push(LodashUtilities.cloneDeep(this.arrayItem));
         this.dataSource.data = this.entityArrayValues;
         EntityUtilities.resetChangesOnEntity(this.arrayItem, this.arrayItemPriorChanges);
+        this.checkIsArrayItemValid();
+        this.emitChange();
     }
     /**
      * Cancels adding the array item defined in the dialog.
@@ -1379,132 +2903,59 @@ class NgxMatEntityInputComponent {
     cancelAddArrayItem() {
         this.addArrayItemDialogRef.close();
         EntityUtilities.resetChangesOnEntity(this.arrayItem, this.arrayItemPriorChanges);
+        this.emitChange();
     }
     /**
-     * Removes all selected entries from the array.
+     * Removes all selected entries from the entity array.
+     *
+     * @param selection - The selection containing the items to remove.
+     * @param values - The values of the dataSource.
+     * @param dataSource - The dataSource.
      */
-    remove() {
-        this.selection.selected.forEach(s => {
-            this.entityArrayValues.splice(this.entityArrayValues.indexOf(s), 1);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    remove(selection, values, dataSource) {
+        selection.selected.forEach(s => {
+            values.splice(values.indexOf(s), 1);
         });
-        this.dataSource.data = this.entityArrayValues;
-        this.selection.clear();
+        dataSource.data = values;
+        selection.clear();
+        this.emitChange();
     }
     /**
      * Toggles all array-items in the table.
+     *
+     * @param selection - The selection to toggle.
+     * @param dataSource - The dataSource of the selection.
      */
-    masterToggle() {
-        if (this.isAllSelected()) {
-            this.selection.clear();
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    masterToggle(selection, dataSource) {
+        if (this.isAllSelected(selection, dataSource)) {
+            selection.clear();
         }
         else {
-            this.dataSource.data.forEach(row => this.selection.select(row));
+            dataSource.data.forEach(row => selection.select(row));
         }
     }
     /**
      * Checks if all array-items in the table have been selected.
      * This is needed to display the "masterToggle"-checkbox correctly.
      *
+     * @param selection - The selection to check.
+     * @param dataSource - The dataSource of the selection.
      * @returns Whether or not all array-items in the table have been selected.
      */
-    isAllSelected() {
-        const numSelected = this.selection.selected.length;
-        const numRows = this.dataSource.data.length;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    isAllSelected(selection, dataSource) {
+        const numSelected = selection.selected.length;
+        const numRows = dataSource.data.length;
         return numSelected === numRows;
     }
-    /**
-     * Handles adding strings to the chipsArray.
-     * Checks validation and also creates a new array if it is undefined.
-     * This is needed because two things are validated: The array itself
-     * and the contents of the array. And we need a way to display an
-     * mat-error. As the only validation for the array is whether or not
-     * it contains values, we can set it to undefined when the last element is removed
-     * (removeStringChipArrayValue). That way we can use the "required" validator.
-     *
-     * @param event - The event that fires when a new chip is completed.
-     */
-    addStringChipArrayValue(event) {
-        const value = (event.value || '').trim();
-        if (value) {
-            if (this.metadataStringChipsArray.minLength && value.length < this.metadataStringChipsArray.minLength) {
-                return;
-            }
-            if (this.metadataStringChipsArray.maxLength && value.length > this.metadataStringChipsArray.maxLength) {
-                return;
-            }
-            if (this.metadataStringChipsArray.regex && !value.match(this.metadataStringChipsArray.regex)) {
-                return;
-            }
-            if (!this.stringChipsArrayValues) {
-                if (!this.entity[this.propertyKey]) {
-                    this.entity[this.propertyKey] = [];
-                }
-                this.stringChipsArrayValues = this.entity[this.propertyKey];
-            }
-            this.stringChipsArrayValues.push(value);
-        }
-        event.chipInput.clear();
-    }
-    /**
-     * Removes the given value from the array.
-     * Sets the array to undefined if it is now empty.
-     * This is needed because two things are validated: The array itself
-     * and the contents of the array. And we need a way to display an
-     * mat-error. As the only validation for the array is whether or not
-     * it is empty, setting it to undefined here enables us to use the "required" validator.
-     *
-     * @param value - The string to remove from the array.
-     */
-    removeStringChipArrayValue(value) {
-        this.stringChipsArrayValues.splice(this.stringChipsArrayValues.indexOf(value), 1);
-        if (!this.stringChipsArrayValues.length) {
-            this.entity[this.propertyKey] = undefined;
-            this.stringChipsArrayValues = this.entity[this.propertyKey];
-        }
-    }
-    /**
-     * Handles adding a string to the array when an autocomplete value has been selected.
-     *
-     * @param event - The autocomplete selected event.
-     * @param chipsInput - The element where the user typed the value.
-     */
-    selected(event, chipsInput) {
-        const value = (event.option.viewValue || '').trim();
-        if (this.metadataStringChipsArray.minLength && value.length < this.metadataStringChipsArray.minLength) {
-            return;
-        }
-        if (this.metadataStringChipsArray.maxLength && value.length > this.metadataStringChipsArray.maxLength) {
-            return;
-        }
-        if (this.metadataStringChipsArray.regex && !value.match(this.metadataStringChipsArray.regex)) {
-            return;
-        }
-        if (!this.stringChipsArrayValues) {
-            if (!this.entity[this.propertyKey]) {
-                this.entity[this.propertyKey] = [];
-            }
-            this.stringChipsArrayValues = this.entity[this.propertyKey];
-        }
-        this.stringChipsArrayValues.push(value);
-        chipsInput.value = '';
-    }
-    /**
-     * Dynamically filters the Autocomplete options when the user inputs something.
-     *
-     * @param input - The input of the user.
-     */
-    filterAutocompleteStrings(input) {
-        if (input) {
-            const filterValue = input.toLowerCase();
-            this.filteredAutocompleteStrings = this.autocompleteStrings.filter(s => s.toLowerCase().includes(filterValue));
-        }
-    }
 }
 NgxMatEntityInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityInputComponent, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-NgxMatEntityInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NgxMatEntityInputComponent, selector: "ngx-mat-entity-input", inputs: { entity: "entity", propertyKey: "propertyKey", getValidationErrorMessage: "getValidationErrorMessage", hideOmitForCreate: "hideOmitForCreate", hideOmitForEdit: "hideOmitForEdit" }, viewQueries: [{ propertyName: "addArrayItemDialog", first: true, predicate: ["addArrayItemDialog"], descendants: true }], ngImport: i0, template: "<div [ngSwitch]=\"type\" *ngIf=\"!(hideOmitForCreate && metadata.omitForCreate) && !(hideOmitForEdit && metadata.omitForUpdate)\">\n    <!-------------------------------------------->\n    <!-----------------Strings-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.STRING\">\n        <mat-form-field>\n            <mat-label>{{metadata.displayName}}</mat-label>\n            <input\n                matInput\n                [(ngModel)]=\"entity[propertyKey]\"\n                [name]=\"propertyKey.toString()\"\n                #model=\"ngModel\"\n                [required]=\"metadata.required\"\n                [pattern]=\"metadataDefaultString.regex ? metadataDefaultString.regex : '[\\\\s\\\\S]*'\"\n                [minlength]=\"metadataDefaultString.minLength ? metadataDefaultString.minLength : null\"\n                [maxlength]=\"metadataDefaultString.maxLength ? metadataDefaultString.maxLength : null\"\n            />\n            <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n        </mat-form-field>\n    </div>\n\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_TEXTBOX\">\n        <mat-form-field>\n            <mat-label>{{metadata.displayName}}</mat-label>\n            <textarea\n                matInput\n                [(ngModel)]=\"entity[propertyKey]\"\n                [name]=\"propertyKey.toString()\"\n                #model=\"ngModel\"\n                cdkTextareaAutosize\n                cdkAutosizeMinRows=\"10\"\n                [required]=\"metadata.required\"\n                [minlength]=\"metadataTextboxString.minLength ? metadataTextboxString.minLength : null\"\n                [maxlength]=\"metadataTextboxString.maxLength ? metadataTextboxString.maxLength : null\"\n            >\n            </textarea>\n            <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n        </mat-form-field>\n    </div>\n\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_AUTOCOMPLETE\">\n        <mat-form-field>\n            <mat-label>{{metadata.displayName}}</mat-label>\n            <input\n                matInput\n                [(ngModel)]=\"entity[propertyKey]\"\n                [name]=\"propertyKey.toString()\"\n                #model=\"ngModel\"\n                [matAutocomplete]=\"auto\"\n                (keyup)=\"filterAutocompleteStrings(entity[propertyKey])\"\n                [required]=\"metadata.required\"\n                [minlength]=\"metadataAutocompleteString.minLength ? metadataAutocompleteString.minLength : null\"\n                [maxlength]=\"metadataAutocompleteString.maxLength ? metadataAutocompleteString.maxLength : null\"\n                [pattern]=\"metadataAutocompleteString.regex ? metadataAutocompleteString.regex : '[\\\\s\\\\S]*'\"\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>\n    </div>\n\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_DROPDOWN\">\n        <mat-form-field>\n            <mat-label>{{metadata.displayName}}</mat-label>\n            <mat-select [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\" #model=\"ngModel\" [required]=\"metadata.required\">\n                <mat-option *ngFor=\"let value of metadataDropdownString.dropdownValues\" [value]=\"value.value\">{{value.displayName}}</mat-option>\n            </mat-select>\n            <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n        </mat-form-field>\n    </div>\n\n    <!-------------------------------------------->\n    <!-----------------Booleans------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_CHECKBOX\">\n        <mat-form-field class=\"hideUnderline\">\n            <mat-label>{{metadata.displayName}}</mat-label>\n            <mat-checkbox (click)=\"model.control.markAsTouched()\" [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\"></mat-checkbox>\n            <!-- hidden input is needed so that the checkbox can be used inside a mat-form-field -->\n            <input matInput hidden\n                [(ngModel)]=\"entity[propertyKey]\"\n                [name]=\"propertyKey.toString() + 'Helper'\"\n                #model=\"ngModel\"\n                [pattern]=\"metadata.required ? 'true' : '[\\\\s\\\\S]*'\"\n                [required]=\"metadata.required\">\n            <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n        </mat-form-field>\n    </div>\n\n    <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_TOGGLE\">\n        <mat-form-field class=\"hideUnderline\">\n            <mat-label>{{metadata.displayName}}</mat-label>\n            <mat-slide-toggle (click)=\"model.control.markAsTouched()\" [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\"></mat-slide-toggle>\n            <!-- hidden input is needed so that the toggle can be used inside a mat-form-field -->\n            <input matInput hidden\n                [(ngModel)]=\"entity[propertyKey]\"\n                [name]=\"propertyKey.toString() + 'Helper'\"\n                #model=\"ngModel\"\n                [pattern]=\"metadata.required ? 'true' : '[\\\\s\\\\S]*'\"\n                [required]=\"metadata.required\">\n            <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n        </mat-form-field>\n    </div>\n\n    <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_DROPDOWN\">\n        <mat-form-field>\n            <mat-label>{{metadata.displayName}}</mat-label>\n            <mat-select [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\" #model=\"ngModel\" [required]=\"metadata.required\">\n                <mat-option [value]=\"undefined\">-</mat-option>\n                <mat-option [value]=\"true\">{{metadataDropdownBoolean.dropdownTrue}}</mat-option>\n                <mat-option [value]=\"false\">{{metadataDropdownBoolean.dropdownFalse}}</mat-option>\n            </mat-select>\n            <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n        </mat-form-field>\n    </div>\n\n    <!-------------------------------------------->\n    <!------------------Numbers------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.NUMBER\">\n        <mat-form-field>\n            <mat-label>{{metadata.displayName}}</mat-label>\n            <input\n                matInput\n                type=\"number\"\n                [(ngModel)]=\"entity[propertyKey]\"\n                [name]=\"propertyKey.toString()\"\n                #model=\"ngModel\"\n                [required]=\"metadata.required\"\n                [min]=\"metadataDefaultNumber.min ? metadataDefaultNumber.min : null\"\n                [max]=\"metadataDefaultNumber.max ? metadataDefaultNumber.max : null\"\n            />\n            <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n        </mat-form-field>\n    </div>\n\n    <div *ngSwitchCase=\"DecoratorTypes.NUMBER_DROPDOWN\">\n        <mat-form-field>\n            <mat-label>{{metadata.displayName}}</mat-label>\n            <mat-select [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\" #model=\"ngModel\" [required]=\"metadata.required\">\n                <mat-option *ngFor=\"let value of metadataDropdownNumber.dropdownValues\" [value]=\"value.value\">{{value.displayName}}</mat-option>\n            </mat-select>\n            <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n        </mat-form-field>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Object------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.OBJECT\">\n        <b>{{metadataDefaultObject.displayName}}</b>\n        <!-- iterates over the object properties -->\n\n        <div class=\"row\" *ngFor=\"let row of objectPropertyRows\">\n            <!--\n                displays another ngx-material-entity with the:\n                object as the entity,\n                the current key in the loop received by the keyvalue direction as the propertyKey\n                and the getValidationErrorMessage of the current component\n            -->\n            <ngx-mat-entity-input\n                *ngFor=\"let key of row.keys; let i = index; trackBy: trackByFn\"\n                [entity]=\"objectProperty\"\n                [propertyKey]=\"key\"\n                [getValidationErrorMessage]=\"getValidationErrorMessage\"\n                [hideOmitForCreate]=\"hideOmitForCreate\"\n                [hideOmitForEdit]=\"hideOmitForEdit\"\n                class=\"col-lg-{{EntityUtilities.getWidth(objectProperty, key, 'lg')}} col-md-{{EntityUtilities.getWidth(objectProperty, key, 'md')}} col-sm-{{EntityUtilities.getWidth(objectProperty, key, 'sm')}}\"\n            >\n            </ngx-mat-entity-input>\n        </div>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Array-------------------->\n    <!-------------------------------------------->\n    <div class=\"entityArray\" *ngSwitchCase=\"DecoratorTypes.ARRAY\">\n        <div class=\"mat-elevation-z8\" style=\"border-radius: 5px;padding: 15px;margin-bottom: 15px;margin-top: 15px;\">\n\n            <div style=\"padding-bottom: 10px\">\n                <b>{{metadataEntityArray.displayName}}</b>\n            </div>\n            <div *ngIf=\"metadataEntityArray.createInline\">\n                <div class=\"row\" *ngFor=\"let row of arrayItemInlineRows\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys; let i = index; trackBy: trackByFn\"\n                        [entity]=\"arrayItem\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForCreate]=\"true\"\n                        [getValidationErrorMessage]=\"getValidationErrorMessage\"\n                        class=\"col-lg-{{EntityUtilities.getWidth(arrayItem, key, 'lg')}} col-md-{{EntityUtilities.getWidth(arrayItem, key, 'md')}} col-sm-{{EntityUtilities.getWidth(arrayItem, key, 'sm')}}\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </div>\n            \n            <div class=\"buttons\">\n                <button mat-raised-button\n                    [disabled]=\"metadataEntityArray.createInline && !EntityUtilities.isEntityValid(arrayItem, 'create')\"\n                    (click)=\"add()\">\n                    {{metadataEntityArray.addButtonLabel}}\n                </button>\n                <button mat-raised-button\n                    [disabled]=\"!selection.selected.length\"\n                    (click)=\"remove()\">\n                    {{metadataEntityArray.removeButtonLabel}}\n                </button>\n            </div>\n        \n            <mat-table [dataSource]=\"dataSource\">\n                <!-- select Column -->\n                <ng-container matColumnDef=\"select\">\n                    <mat-header-cell *matHeaderCellDef>\n                        <mat-checkbox [disabled]=\"!dataSource.data.length\" (change)=\"$event ? masterToggle() : null\" [checked]=\"selection.hasValue() && isAllSelected()\" [indeterminate]=\"selection.hasValue() && !isAllSelected()\"></mat-checkbox>\n                    </mat-header-cell>\n                    <mat-cell *matCellDef=\"let module\" class=\"module\">\n                        <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(module) : null\" [checked]=\"selection.isSelected(module)\"></mat-checkbox>\n                    </mat-cell>\n                </ng-container>\n            \n                <ng-container *ngFor=\"let dCol of metadataEntityArray.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n                    <mat-header-cell *matHeaderCellDef>\n                        {{dCol.displayName}}\n                    </mat-header-cell>\n                    <mat-cell class=\"entity\" *matCellDef=\"let entity\">\n                        {{dCol.value(entity)}}\n                    </mat-cell>\n                </ng-container>\n            \n                <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n                <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n            </mat-table>\n        \n            <div class=\"array-error\" *ngIf=\"metadataEntityArray.required && !dataSource.data.length\">\n                {{metadataEntityArray.missingErrorMessage}}\n            </div>\n        </div>\n    </div>\n\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_STRING_CHIPS\">\n        <mat-form-field>\n            <mat-label>{{metadata.displayName}}</mat-label>\n            <mat-chip-list #chipList\n                [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\" #model=\"ngModel\"\n                [required]=\"metadata.required\"\n            >\n                <mat-chip *ngFor=\"let value of stringChipsArrayValues\" (removed)=\"removeStringChipArrayValue(value)\">\n                    {{value}}\n                    <button matChipRemove>\n                        <i class=\"{{metadataStringChipsArray.deleteIcon}}\"></i>\n                    </button>\n                </mat-chip>\n                <input matInput\n                    [matChipInputFor]=\"chipList\"\n                    [matChipInputAddOnBlur]=\"true\"\n                    (matChipInputTokenEnd)=\"addStringChipArrayValue($event)\"\n                    [(ngModel)]=\"chipsInput\" [name]=\"propertyKey.toString()\" #chipsModel=\"ngModel\"\n                    [minlength]='metadataStringChipsArray.minLength ? metadataStringChipsArray.minLength : null'\n                    [maxlength]='metadataStringChipsArray.maxLength ? metadataStringChipsArray.maxLength : null'\n                    [pattern]=\"metadataStringChipsArray.regex ? metadataStringChipsArray.regex : '[\\\\s\\\\S]*'\"\n                >\n                <mat-error *ngIf=\"chipsModel.errors\">{{getValidationErrorMessage(chipsModel)}}</mat-error>\n            </mat-chip-list>\n            <mat-error *ngIf=\"!chipsModel.errors\">{{getValidationErrorMessage(model)}}</mat-error>\n        </mat-form-field>\n    </div>\n\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_STRING_AUTOCOMPLETE_CHIPS\">\n        <mat-form-field>\n            <mat-label>{{metadata.displayName}}</mat-label>\n            <mat-chip-list #chipList\n                [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\" #model=\"ngModel\"\n                [required]=\"metadata.required\"\n            >\n                <mat-chip *ngFor=\"let value of stringChipsArrayValues\" (removed)=\"removeStringChipArrayValue(value)\">\n                    {{value}}\n                    <button matChipRemove>\n                        <i class=\"{{metadataStringChipsArray.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]=\"propertyKey.toString()\" #chipsModel=\"ngModel\"\n                    #chipsElement\n                    [minlength]='metadataStringChipsArray.minLength ? metadataStringChipsArray.minLength : null'\n                    [maxlength]='metadataStringChipsArray.maxLength ? metadataStringChipsArray.maxLength : null'\n                    [pattern]=\"metadataStringChipsArray.regex ? metadataStringChipsArray.regex : '[\\\\s\\\\S]*'\"\n                >\n                <mat-error *ngIf=\"chipsModel.errors\">{{getValidationErrorMessage(chipsModel)}}</mat-error>\n            </mat-chip-list>\n            <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event, chipsElement)\">\n                <mat-option *ngFor=\"let value of 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>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Dates-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.DATE\">\n        <mat-form-field appearance=\"standard\">\n            <mat-label>{{metadata.displayName}}</mat-label>\n            <input\n                matInput\n                [(ngModel)]=\"entity[propertyKey]\"\n                [name]=\"propertyKey.toString()\"\n                #model=\"ngModel\"\n                [matDatepicker]=\"picker\"\n                [required]=\"metadata.required\"\n                [min]=\"metadataDefaultDate.min ? metadataDefaultDate.min(DateUtilities.asDate(entity[propertyKey])) : undefined\"\n                [max]=\"metadataDefaultDate.max ? metadataDefaultDate.max(DateUtilities.asDate(entity[propertyKey])) : undefined\"\n                [matDatepickerFilter]=\"metadataDefaultDate.filter ? metadataDefaultDate.filter : defaultDateFilter\"\n            >\n            <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n            <mat-datepicker #picker></mat-datepicker>\n            <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n        </mat-form-field>\n    </div>\n\n    <div *ngSwitchCase=\"DecoratorTypes.DATE_RANGE\">\n        <mat-form-field appearance=\"standard\">\n            <mat-label>{{metadata.displayName}}</mat-label>\n            \n            <mat-date-range-input [rangePicker]=\"picker\" [required]=\"metadata.required\" [dateFilter]=\"metadataDateRangeDate.filter ? metadataDateRangeDate.filter : defaultDateFilter\">\n                <input matStartDate\n                    [(ngModel)]=\"dateRangeStart\"\n                    [name]=\"propertyKey.toString() + 'start'\"\n                    #startModel=\"ngModel\"\n                    [required]=\"metadata.required\"\n                    [min]=\"metadataDateRangeDate.minStart ? metadataDateRangeDate.minStart(dateRange.start) : undefined\"\n                    [max]=\"metadataDateRangeDate.maxStart ? metadataDateRangeDate.maxStart(dateRange.start) : undefined\"\n                    [placeholder]=\"metadataDateRangeDate.placeholderStart ? metadataDateRangeDate.placeholderStart : 'Start'\"\n                    (ngModelChange)=\"setDateRangeValues()\"\n                >\n                <input matEndDate\n                    [(ngModel)]=\"dateRangeEnd\"\n                    [name]=\"propertyKey.toString() + 'end'\"\n                    #endModel=\"ngModel\"\n                    [required]=\"metadata.required\"\n                    [min]=\"metadataDateRangeDate.minEnd ? metadataDateRangeDate.minEnd(dateRange.end) : undefined\"\n                    [max]=\"metadataDateRangeDate.maxEnd ? metadataDateRangeDate.maxEnd(dateRange.end) : undefined\"\n                    [placeholder]=\"metadataDateRangeDate.placeholderEnd ? metadataDateRangeDate.placeholderEnd : 'End'\"\n                    (ngModelChange)=\"setDateRangeValues()\"\n                >\n            </mat-date-range-input>\n            <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n            <mat-date-range-picker #picker></mat-date-range-picker>\n\n            <mat-error *ngIf=\"startModel.errors\">{{getValidationErrorMessage(startModel)}}</mat-error>\n            <mat-error *ngIf=\"!startModel.errors && endModel.errors\">{{getValidationErrorMessage(endModel)}}</mat-error>\n        </mat-form-field>\n    </div>\n\n    <div *ngSwitchCase=\"DecoratorTypes.DATE_TIME\" class=\"date-time\">\n        <mat-form-field appearance=\"standard\" class=\"datepicker\">\n            <mat-label>{{metadata.displayName}}</mat-label>\n            <input\n                matInput\n                [(ngModel)]=\"dateTime\"\n                [name]=\"propertyKey.toString()\"\n                #model=\"ngModel\"\n                [matDatepicker]=\"picker\"\n                [required]=\"metadata.required\"\n                [min]=\"metadataDateTimeDate.minDate ? metadataDateTimeDate.minDate(dateTime) : undefined\"\n                [max]=\"metadataDateTimeDate.maxDate ? metadataDateTimeDate.maxDate(dateTime) : undefined\"\n                [matDatepickerFilter]=\"metadataDateTimeDate.filterDate ? metadataDateTimeDate.filterDate : defaultDateFilter\"\n                (dateInput)=\"setTime()\"\n            >\n            <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n            <mat-datepicker #picker></mat-datepicker>\n            <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n        </mat-form-field>\n        <mat-form-field class=\"timepicker\">\n            <mat-label>{{metadataDateTimeDate.timeDisplayName}}</mat-label>\n            <mat-select\n                [(ngModel)]=\"time\"\n                [name]=\"propertyKey.toString() + 'time'\"\n                #timeModel=\"ngModel\"\n                [required]=\"metadata.required\"\n                [compareWith]=\"compareTimes\"\n                (ngModelChange)=\"setTime()\"\n            >\n                <mat-option *ngFor=\"let validTime of DateUtilities.getValidTimesForDropdown(\n                        DateUtilities.asDate(entity[propertyKey]),\n                        metadataDateTimeDate.times,\n                        metadataDateTimeDate.minTime,\n                        metadataDateTimeDate.maxTime,\n                        metadataDateTimeDate.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\n    <div *ngSwitchDefault>ERROR: The type {{type}} is not known.</div>\n</div>\n\n<!--------------------------------------------------------->\n<!--------------------Add Array Item Dialog---------------->\n<!--------------------------------------------------------->\n<ng-template #addArrayItemDialog>\n    <h2 mat-dialog-title>{{dialogData.createDialogData.title}}</h2>\n\n    <mat-dialog-content>\n        <form #form=\"ngForm\" class=\"row\">\n            <div class=\"row\" *ngFor=\"let row of arrayItemDialogRows\">\n                <ngx-mat-entity-input\n                    *ngFor=\"let key of row.keys\"\n                    [entity]=\"dialogData.entity\"\n                    [propertyKey]=\"key\"\n                    [hideOmitForCreate]=\"true\"\n                    [getValidationErrorMessage]=\"dialogData.getValidationErrorMessage\"\n                    class=\"col-lg-{{EntityUtilities.getWidth(dialogData.entity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(dialogData.entity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(dialogData.entity, key, 'sm')}}\"\n                >\n                </ngx-mat-entity-input>\n            </div>\n        </form>\n    </mat-dialog-content>\n\n    <mat-dialog-actions>\n        <button mat-raised-button (click)=\"addArrayItem()\" [disabled]=\"!EntityUtilities.isEntityValid(dialogData.entity, 'create')\">\n            {{dialogData.createDialogData.createButtonLabel}}\n        </button>\n        <button mat-raised-button (click)=\"cancelAddArrayItem()\" class=\"cancel-button\">\n            {{dialogData.createDialogData.cancelButtonLabel}}\n        </button>\n    </mat-dialog-actions>\n\n</ng-template>", styles: ["mat-form-field{width:100%}::ng-deep .hideUnderline .mat-form-field-underline{opacity:0%}.entityArray .buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px}.entityArray mat-table{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:25px}.entityArray .mat-column-select{flex:0 0 75px}.entityArray .array-error{display:flex;align-items:center;justify-content:center;margin-top:-25.8px;border:1px solid #E0E0E0;background-color:#f8d3d7;color:#721c24;height:25.8px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.date-time{display:flex;align-items:baseline}.date-time .timepicker{margin-left:10px}\n"], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i3$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i4.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i6.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: NgxMatEntityInputComponent, selector: "ngx-mat-entity-input", inputs: ["entity", "propertyKey", "getValidationErrorMessage", "hideOmitForCreate", "hideOmitForEdit"] }, { type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { type: i10.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: i11.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i11.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { type: i11.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { type: i11.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }], directives: [{ type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i12.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i12.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2.MatLabel, selector: "mat-label" }, { type: i13.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i14.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i14.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i14.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i14.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i14.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i14.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { type: i14.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i2.MatError, selector: "mat-error", inputs: ["id"] }, { type: i15.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { type: i3$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i12.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i14.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i14.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i14.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i9.MatCellDef, selector: "[matCellDef]" }, { type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { type: i10.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i10.MatChipRemove, selector: "[matChipRemove]" }, { type: i10.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { type: i11.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i2.MatSuffix, selector: "[matSuffix]" }, { type: i11.MatStartDate, selector: "input[matStartDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { type: i11.MatEndDate, selector: "input[matEndDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { type: i12.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i14.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i14.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i14.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }] });
+NgxMatEntityInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NgxMatEntityInputComponent, selector: "ngx-mat-entity-input", inputs: { entity: "entity", propertyKey: "propertyKey", getValidationErrorMessage: "getValidationErrorMessage", hideOmitForCreate: "hideOmitForCreate", hideOmitForEdit: "hideOmitForEdit", isReadOnly: "isReadOnly" }, outputs: { inputChangeEvent: "inputChangeEvent" }, viewQueries: [{ propertyName: "addArrayItemDialog", first: true, predicate: ["addArrayItemDialog"], descendants: true }], ngImport: i0, template: "<div [ngSwitch]=\"type\" *ngIf=\"!(hideOmitForCreate && metadata.omitForCreate) && !(hideOmitForEdit && metadata.omitForUpdate)\">\n    <!-------------------------------------------->\n    <!-----------------Strings-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.STRING\">\n        <string-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </string-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_TEXTBOX\">\n        <string-textbox-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </string-textbox-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_AUTOCOMPLETE\">\n        <string-autocomplete-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </string-autocomplete-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_DROPDOWN\">\n        <string-dropdown-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </string-dropdown-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_PASSWORD\">\n        <string-password-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </string-password-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-----------------Booleans------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_CHECKBOX\">\n        <boolean-checkbox-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </boolean-checkbox-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_TOGGLE\">\n        <boolean-toggle-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </boolean-toggle-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_DROPDOWN\">\n        <boolean-dropdown-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </boolean-dropdown-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!------------------Numbers------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.NUMBER\">\n        <number-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </number-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.NUMBER_DROPDOWN\">\n        <number-dropdown-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </number-dropdown-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.NUMBER_SLIDER\">\n        <number-slider-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </number-slider-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Object------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.OBJECT\">\n        <b>{{metadataDefaultObject.displayName}}</b>\n        <!-- iterates over the object properties -->\n        <div class=\"row\" *ngFor=\"let row of objectPropertyRows\">\n            <ngx-mat-entity-input *ngFor=\"let key of row.keys; let i = index; trackBy: trackByFn\"\n                [entity]=\"objectProperty\"\n                [propertyKey]=\"key\"\n                [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                [hideOmitForCreate]=\"hideOmitForCreate\"\n                [hideOmitForEdit]=\"hideOmitForEdit\"\n                [isReadOnly]=\"internalIsReadOnly\"\n                class=\"col-lg-{{EntityUtilities.getWidth(objectProperty, key, 'lg')}} col-md-{{EntityUtilities.getWidth(objectProperty, key, 'md')}} col-sm-{{EntityUtilities.getWidth(objectProperty, key, 'sm')}}\"\n                (inputChangeEvent)=\"emitChange()\"\n            >\n            </ngx-mat-entity-input>\n        </div>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Array-------------------->\n    <!-------------------------------------------->\n    <div class=\"entityArray\" *ngSwitchCase=\"DecoratorTypes.ARRAY\">\n        <div class=\"mat-elevation-z8\" style=\"border-radius: 5px;padding: 15px;margin-bottom: 15px;margin-top: 15px;\">\n            <div style=\"padding-bottom: 10px\">\n                <b>{{metadataEntityArray.displayName}}</b>\n            </div>\n            <div *ngIf=\"metadataEntityArray.createInline && !internalIsReadOnly\">\n                <div class=\"row\" *ngFor=\"let row of arrayItemInlineRows\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys; let i = index; trackBy: trackByFn\"\n                        [entity]=\"arrayItem\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForCreate]=\"true\"\n                        [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                        class=\"col-lg-{{EntityUtilities.getWidth(arrayItem, key, 'lg')}} col-md-{{EntityUtilities.getWidth(arrayItem, key, 'md')}} col-sm-{{EntityUtilities.getWidth(arrayItem, key, 'sm')}}\"\n                        (inputChangeEvent)=\"checkIsArrayItemValid()\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </div>\n\n            <div class=\"buttons\" *ngIf=\"!internalIsReadOnly\">\n                <button mat-raised-button\n                    [disabled]=\"metadataEntityArray.createInline && !isArrayItemValid\"\n                    (click)=\"addEntity()\">\n                    {{metadataEntityArray.addButtonLabel}}\n                </button>\n                <button mat-raised-button\n                    [disabled]=\"!selection.selected.length\"\n                    (click)=\"remove(selection, entityArrayValues, dataSource)\">\n                    {{metadataEntityArray.removeButtonLabel}}\n                </button>\n            </div>\n        \n            <mat-table [dataSource]=\"dataSource\">\n                <!-- select Column -->\n                <ng-container matColumnDef=\"select\" *ngIf=\"!internalIsReadOnly\">\n                    <mat-header-cell *matHeaderCellDef>\n                        <mat-checkbox\n                            [disabled]=\"!dataSource.data.length\" (change)=\"$event ? masterToggle(selection, dataSource) : null\"\n                            [checked]=\"selection.hasValue() && isAllSelected(selection, dataSource)\"\n                            [indeterminate]=\"selection.hasValue() && !isAllSelected(selection, dataSource)\">\n                        </mat-checkbox>\n                    </mat-header-cell>\n                    <mat-cell *matCellDef=\"let module\">\n                        <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(module) : null\" [checked]=\"selection.isSelected(module)\"></mat-checkbox>\n                    </mat-cell>\n                </ng-container>\n            \n                <ng-container *ngFor=\"let dCol of metadataEntityArray.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n                    <mat-header-cell *matHeaderCellDef>\n                        {{dCol.displayName}}\n                    </mat-header-cell>\n                    <mat-cell class=\"entity\" *matCellDef=\"let entity\">\n                        {{dCol.value(entity)}}\n                    </mat-cell>\n                </ng-container>\n            \n                <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n                <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n            </mat-table>\n        \n            <div class=\"array-error\" *ngIf=\"metadataEntityArray.required && !dataSource.data.length\">\n                {{metadataEntityArray.missingErrorMessage}}\n            </div>\n        </div>\n    </div>\n\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_DATE\">\n        <array-date-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </array-date-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_DATE_TIME\">\n        <array-date-time-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </array-date-time-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_DATE_RANGE\">\n        <array-date-range-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </array-date-range-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_STRING_CHIPS\">\n        <array-string-chips-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </array-string-chips-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_STRING_AUTOCOMPLETE_CHIPS\">\n        <array-string-autocomplete-chips\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </array-string-autocomplete-chips>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Dates-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.DATE\">\n        <date-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </date-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.DATE_RANGE\">\n        <date-range-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </date-range-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.DATE_TIME\">\n        <date-time-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </date-time-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Files-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.FILE_DEFAULT\">\n        <file-default-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </file-default-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.FILE_IMAGE\">\n        <file-image-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </file-image-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Custom------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.CUSTOM\">\n        <custom-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </custom-input>\n    </div>\n\n    <div *ngSwitchDefault>ERROR: The type {{type}} is not known.</div>\n</div>\n\n<!--------------------------------------------------------->\n<!--------------------Add Array Item Dialog---------------->\n<!--------------------------------------------------------->\n<ng-template #addArrayItemDialog>\n    <h2 mat-dialog-title>{{dialogData.createDialogData.title}}</h2>\n\n    <mat-dialog-content>\n        <form #form=\"ngForm\" class=\"row\">\n            <div class=\"row\" *ngFor=\"let row of arrayItemDialogRows\">\n                <ngx-mat-entity-input\n                    *ngFor=\"let key of row.keys\"\n                    [entity]=\"dialogData.entity\"\n                    [propertyKey]=\"key\"\n                    [hideOmitForCreate]=\"true\"\n                    [getValidationErrorMessage]=\"dialogData.getValidationErrorMessage\"\n                    class=\"col-lg-{{EntityUtilities.getWidth(dialogData.entity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(dialogData.entity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(dialogData.entity, key, 'sm')}}\"\n                    (inputChangeEvent)=\"checkIsDialogArrayItemValid()\"\n                >\n                </ngx-mat-entity-input>\n            </div>\n        </form>\n    </mat-dialog-content>\n\n    <mat-dialog-actions>\n        <button mat-raised-button (click)=\"addArrayItem()\" [disabled]=\"!isDialogArrayItemValid\">\n            {{dialogData.createDialogData.createButtonLabel}}\n        </button>\n        <button mat-raised-button (click)=\"cancelAddArrayItem()\" class=\"cancel-button\">\n            {{dialogData.createDialogData.cancelButtonLabel}}\n        </button>\n    </mat-dialog-actions>\n\n</ng-template>", styles: ["mat-form-field{width:100%}::ng-deep .mat-form-field.mat-form-field-disabled .mat-form-field-wrapper .mat-form-field-underline{background-image:none;height:1px;background-color:#0000006b}::ng-deep .mat-form-field.mat-form-field-disabled .mat-chip.mat-standard-chip.mat-chip-disabled{opacity:1}::ng-deep .mat-form-field.mat-form-field-disabled .mat-chip.mat-standard-chip.mat-chip-disabled button{opacity:.2}::ng-deep .mat-form-field.mat-form-field-disabled .mat-select-disabled .mat-select-value{color:#000}::ng-deep .mat-form-field.mat-form-field-disabled .mat-date-range-input-inner:disabled{color:#000}::ng-deep .mat-form-field .mat-slide-toggle.mat-disabled{opacity:1}::ng-deep .mat-input-element:disabled{color:#000}.entityArray .buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px}.entityArray mat-table{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:25px}.entityArray .mat-column-select{flex:0 0 75px}.entityArray .array-error{display:flex;align-items:center;justify-content:center;margin-top:-25.8px;border:1px solid #E0E0E0;background-color:#f8d3d7;color:#721c24;height:25.8px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}\n"], components: [{ type: StringInputComponent, selector: "string-input" }, { type: StringTextboxInputComponent, selector: "string-textbox-input" }, { type: StringAutocompleteInputComponent, selector: "string-autocomplete-input" }, { type: StringDropdownInputComponent, selector: "string-dropdown-input" }, { type: StringPasswordInputComponent, selector: "string-password-input" }, { type: BooleanCheckboxInputComponent, selector: "boolean-checkbox-input" }, { type: BooleanToggleInputComponent, selector: "boolean-toggle-input" }, { type: BooleanDropdownInputComponent, selector: "boolean-dropdown-input" }, { type: NumberInputComponent, selector: "number-input" }, { type: NumberDropdownInputComponent, selector: "number-dropdown-input" }, { type: NumberSliderInputComponent, selector: "number-slider-input" }, { type: NgxMatEntityInputComponent, selector: "ngx-mat-entity-input", inputs: ["entity", "propertyKey", "getValidationErrorMessage", "hideOmitForCreate", "hideOmitForEdit", "isReadOnly"], outputs: ["inputChangeEvent"] }, { type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i4$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i4$2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { type: ArrayDateInputComponent, selector: "array-date-input" }, { type: ArrayDateTimeInputComponent, selector: "array-date-time-input" }, { type: ArrayDateRangeInputComponent, selector: "array-date-range-input" }, { type: ArrayStringChipsInputComponent, selector: "array-string-chips-input" }, { type: ArrayStringAutocompleteChipsComponent, selector: "array-string-autocomplete-chips" }, { type: DateInputComponent, selector: "date-input" }, { type: DateRangeInputComponent, selector: "date-range-input" }, { type: DateTimeInputComponent, selector: "date-time-input" }, { type: FileDefaultInputComponent, selector: "file-default-input" }, { type: FileImageInputComponent, selector: "file-image-input" }, { type: CustomInputComponent, selector: "custom-input" }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i6.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i4$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i4$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i4$2.MatCellDef, selector: "[matCellDef]" }, { type: i4$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i4$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i4$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { type: i6.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-mat-entity-input', template: "<div [ngSwitch]=\"type\" *ngIf=\"!(hideOmitForCreate && metadata.omitForCreate) && !(hideOmitForEdit && metadata.omitForUpdate)\">\n    <!-------------------------------------------->\n    <!-----------------Strings-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.STRING\">\n        <mat-form-field>\n            <mat-label>{{metadata.displayName}}</mat-label>\n            <input\n                matInput\n                [(ngModel)]=\"entity[propertyKey]\"\n                [name]=\"propertyKey.toString()\"\n                #model=\"ngModel\"\n                [required]=\"metadata.required\"\n                [pattern]=\"metadataDefaultString.regex ? metadataDefaultString.regex : '[\\\\s\\\\S]*'\"\n                [minlength]=\"metadataDefaultString.minLength ? metadataDefaultString.minLength : null\"\n                [maxlength]=\"metadataDefaultString.maxLength ? metadataDefaultString.maxLength : null\"\n            />\n            <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n        </mat-form-field>\n    </div>\n\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_TEXTBOX\">\n        <mat-form-field>\n            <mat-label>{{metadata.displayName}}</mat-label>\n            <textarea\n                matInput\n                [(ngModel)]=\"entity[propertyKey]\"\n                [name]=\"propertyKey.toString()\"\n                #model=\"ngModel\"\n                cdkTextareaAutosize\n                cdkAutosizeMinRows=\"10\"\n                [required]=\"metadata.required\"\n                [minlength]=\"metadataTextboxString.minLength ? metadataTextboxString.minLength : null\"\n                [maxlength]=\"metadataTextboxString.maxLength ? metadataTextboxString.maxLength : null\"\n            >\n            </textarea>\n            <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n        </mat-form-field>\n    </div>\n\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_AUTOCOMPLETE\">\n        <mat-form-field>\n            <mat-label>{{metadata.displayName}}</mat-label>\n            <input\n                matInput\n                [(ngModel)]=\"entity[propertyKey]\"\n                [name]=\"propertyKey.toString()\"\n                #model=\"ngModel\"\n                [matAutocomplete]=\"auto\"\n                (keyup)=\"filterAutocompleteStrings(entity[propertyKey])\"\n                [required]=\"metadata.required\"\n                [minlength]=\"metadataAutocompleteString.minLength ? metadataAutocompleteString.minLength : null\"\n                [maxlength]=\"metadataAutocompleteString.maxLength ? metadataAutocompleteString.maxLength : null\"\n                [pattern]=\"metadataAutocompleteString.regex ? metadataAutocompleteString.regex : '[\\\\s\\\\S]*'\"\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>\n    </div>\n\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_DROPDOWN\">\n        <mat-form-field>\n            <mat-label>{{metadata.displayName}}</mat-label>\n            <mat-select [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\" #model=\"ngModel\" [required]=\"metadata.required\">\n                <mat-option *ngFor=\"let value of metadataDropdownString.dropdownValues\" [value]=\"value.value\">{{value.displayName}}</mat-option>\n            </mat-select>\n            <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n        </mat-form-field>\n    </div>\n\n    <!-------------------------------------------->\n    <!-----------------Booleans------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_CHECKBOX\">\n        <mat-form-field class=\"hideUnderline\">\n            <mat-label>{{metadata.displayName}}</mat-label>\n            <mat-checkbox (click)=\"model.control.markAsTouched()\" [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\"></mat-checkbox>\n            <!-- hidden input is needed so that the checkbox can be used inside a mat-form-field -->\n            <input matInput hidden\n                [(ngModel)]=\"entity[propertyKey]\"\n                [name]=\"propertyKey.toString() + 'Helper'\"\n                #model=\"ngModel\"\n                [pattern]=\"metadata.required ? 'true' : '[\\\\s\\\\S]*'\"\n                [required]=\"metadata.required\">\n            <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n        </mat-form-field>\n    </div>\n\n    <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_TOGGLE\">\n        <mat-form-field class=\"hideUnderline\">\n            <mat-label>{{metadata.displayName}}</mat-label>\n            <mat-slide-toggle (click)=\"model.control.markAsTouched()\" [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\"></mat-slide-toggle>\n            <!-- hidden input is needed so that the toggle can be used inside a mat-form-field -->\n            <input matInput hidden\n                [(ngModel)]=\"entity[propertyKey]\"\n                [name]=\"propertyKey.toString() + 'Helper'\"\n                #model=\"ngModel\"\n                [pattern]=\"metadata.required ? 'true' : '[\\\\s\\\\S]*'\"\n                [required]=\"metadata.required\">\n            <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n        </mat-form-field>\n    </div>\n\n    <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_DROPDOWN\">\n        <mat-form-field>\n            <mat-label>{{metadata.displayName}}</mat-label>\n            <mat-select [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\" #model=\"ngModel\" [required]=\"metadata.required\">\n                <mat-option [value]=\"undefined\">-</mat-option>\n                <mat-option [value]=\"true\">{{metadataDropdownBoolean.dropdownTrue}}</mat-option>\n                <mat-option [value]=\"false\">{{metadataDropdownBoolean.dropdownFalse}}</mat-option>\n            </mat-select>\n            <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n        </mat-form-field>\n    </div>\n\n    <!-------------------------------------------->\n    <!------------------Numbers------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.NUMBER\">\n        <mat-form-field>\n            <mat-label>{{metadata.displayName}}</mat-label>\n            <input\n                matInput\n                type=\"number\"\n                [(ngModel)]=\"entity[propertyKey]\"\n                [name]=\"propertyKey.toString()\"\n                #model=\"ngModel\"\n                [required]=\"metadata.required\"\n                [min]=\"metadataDefaultNumber.min ? metadataDefaultNumber.min : null\"\n                [max]=\"metadataDefaultNumber.max ? metadataDefaultNumber.max : null\"\n            />\n            <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n        </mat-form-field>\n    </div>\n\n    <div *ngSwitchCase=\"DecoratorTypes.NUMBER_DROPDOWN\">\n        <mat-form-field>\n            <mat-label>{{metadata.displayName}}</mat-label>\n            <mat-select [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\" #model=\"ngModel\" [required]=\"metadata.required\">\n                <mat-option *ngFor=\"let value of metadataDropdownNumber.dropdownValues\" [value]=\"value.value\">{{value.displayName}}</mat-option>\n            </mat-select>\n            <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n        </mat-form-field>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Object------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.OBJECT\">\n        <b>{{metadataDefaultObject.displayName}}</b>\n        <!-- iterates over the object properties -->\n\n        <div class=\"row\" *ngFor=\"let row of objectPropertyRows\">\n            <!--\n                displays another ngx-material-entity with the:\n                object as the entity,\n                the current key in the loop received by the keyvalue direction as the propertyKey\n                and the getValidationErrorMessage of the current component\n            -->\n            <ngx-mat-entity-input\n                *ngFor=\"let key of row.keys; let i = index; trackBy: trackByFn\"\n                [entity]=\"objectProperty\"\n                [propertyKey]=\"key\"\n                [getValidationErrorMessage]=\"getValidationErrorMessage\"\n                [hideOmitForCreate]=\"hideOmitForCreate\"\n                [hideOmitForEdit]=\"hideOmitForEdit\"\n                class=\"col-lg-{{EntityUtilities.getWidth(objectProperty, key, 'lg')}} col-md-{{EntityUtilities.getWidth(objectProperty, key, 'md')}} col-sm-{{EntityUtilities.getWidth(objectProperty, key, 'sm')}}\"\n            >\n            </ngx-mat-entity-input>\n        </div>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Array-------------------->\n    <!-------------------------------------------->\n    <div class=\"entityArray\" *ngSwitchCase=\"DecoratorTypes.ARRAY\">\n        <div class=\"mat-elevation-z8\" style=\"border-radius: 5px;padding: 15px;margin-bottom: 15px;margin-top: 15px;\">\n\n            <div style=\"padding-bottom: 10px\">\n                <b>{{metadataEntityArray.displayName}}</b>\n            </div>\n            <div *ngIf=\"metadataEntityArray.createInline\">\n                <div class=\"row\" *ngFor=\"let row of arrayItemInlineRows\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys; let i = index; trackBy: trackByFn\"\n                        [entity]=\"arrayItem\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForCreate]=\"true\"\n                        [getValidationErrorMessage]=\"getValidationErrorMessage\"\n                        class=\"col-lg-{{EntityUtilities.getWidth(arrayItem, key, 'lg')}} col-md-{{EntityUtilities.getWidth(arrayItem, key, 'md')}} col-sm-{{EntityUtilities.getWidth(arrayItem, key, 'sm')}}\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </div>\n            \n            <div class=\"buttons\">\n                <button mat-raised-button\n                    [disabled]=\"metadataEntityArray.createInline && !EntityUtilities.isEntityValid(arrayItem, 'create')\"\n                    (click)=\"add()\">\n                    {{metadataEntityArray.addButtonLabel}}\n                </button>\n                <button mat-raised-button\n                    [disabled]=\"!selection.selected.length\"\n                    (click)=\"remove()\">\n                    {{metadataEntityArray.removeButtonLabel}}\n                </button>\n            </div>\n        \n            <mat-table [dataSource]=\"dataSource\">\n                <!-- select Column -->\n                <ng-container matColumnDef=\"select\">\n                    <mat-header-cell *matHeaderCellDef>\n                        <mat-checkbox [disabled]=\"!dataSource.data.length\" (change)=\"$event ? masterToggle() : null\" [checked]=\"selection.hasValue() && isAllSelected()\" [indeterminate]=\"selection.hasValue() && !isAllSelected()\"></mat-checkbox>\n                    </mat-header-cell>\n                    <mat-cell *matCellDef=\"let module\" class=\"module\">\n                        <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(module) : null\" [checked]=\"selection.isSelected(module)\"></mat-checkbox>\n                    </mat-cell>\n                </ng-container>\n            \n                <ng-container *ngFor=\"let dCol of metadataEntityArray.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n                    <mat-header-cell *matHeaderCellDef>\n                        {{dCol.displayName}}\n                    </mat-header-cell>\n                    <mat-cell class=\"entity\" *matCellDef=\"let entity\">\n                        {{dCol.value(entity)}}\n                    </mat-cell>\n                </ng-container>\n            \n                <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n                <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n            </mat-table>\n        \n            <div class=\"array-error\" *ngIf=\"metadataEntityArray.required && !dataSource.data.length\">\n                {{metadataEntityArray.missingErrorMessage}}\n            </div>\n        </div>\n    </div>\n\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_STRING_CHIPS\">\n        <mat-form-field>\n            <mat-label>{{metadata.displayName}}</mat-label>\n            <mat-chip-list #chipList\n                [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\" #model=\"ngModel\"\n                [required]=\"metadata.required\"\n            >\n                <mat-chip *ngFor=\"let value of stringChipsArrayValues\" (removed)=\"removeStringChipArrayValue(value)\">\n                    {{value}}\n                    <button matChipRemove>\n                        <i class=\"{{metadataStringChipsArray.deleteIcon}}\"></i>\n                    </button>\n                </mat-chip>\n                <input matInput\n                    [matChipInputFor]=\"chipList\"\n                    [matChipInputAddOnBlur]=\"true\"\n                    (matChipInputTokenEnd)=\"addStringChipArrayValue($event)\"\n                    [(ngModel)]=\"chipsInput\" [name]=\"propertyKey.toString()\" #chipsModel=\"ngModel\"\n                    [minlength]='metadataStringChipsArray.minLength ? metadataStringChipsArray.minLength : null'\n                    [maxlength]='metadataStringChipsArray.maxLength ? metadataStringChipsArray.maxLength : null'\n                    [pattern]=\"metadataStringChipsArray.regex ? metadataStringChipsArray.regex : '[\\\\s\\\\S]*'\"\n                >\n                <mat-error *ngIf=\"chipsModel.errors\">{{getValidationErrorMessage(chipsModel)}}</mat-error>\n            </mat-chip-list>\n            <mat-error *ngIf=\"!chipsModel.errors\">{{getValidationErrorMessage(model)}}</mat-error>\n        </mat-form-field>\n    </div>\n\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_STRING_AUTOCOMPLETE_CHIPS\">\n        <mat-form-field>\n            <mat-label>{{metadata.displayName}}</mat-label>\n            <mat-chip-list #chipList\n                [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\" #model=\"ngModel\"\n                [required]=\"metadata.required\"\n            >\n                <mat-chip *ngFor=\"let value of stringChipsArrayValues\" (removed)=\"removeStringChipArrayValue(value)\">\n                    {{value}}\n                    <button matChipRemove>\n                        <i class=\"{{metadataStringChipsArray.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]=\"propertyKey.toString()\" #chipsModel=\"ngModel\"\n                    #chipsElement\n                    [minlength]='metadataStringChipsArray.minLength ? metadataStringChipsArray.minLength : null'\n                    [maxlength]='metadataStringChipsArray.maxLength ? metadataStringChipsArray.maxLength : null'\n                    [pattern]=\"metadataStringChipsArray.regex ? metadataStringChipsArray.regex : '[\\\\s\\\\S]*'\"\n                >\n                <mat-error *ngIf=\"chipsModel.errors\">{{getValidationErrorMessage(chipsModel)}}</mat-error>\n            </mat-chip-list>\n            <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event, chipsElement)\">\n                <mat-option *ngFor=\"let value of 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>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Dates-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.DATE\">\n        <mat-form-field appearance=\"standard\">\n            <mat-label>{{metadata.displayName}}</mat-label>\n            <input\n                matInput\n                [(ngModel)]=\"entity[propertyKey]\"\n                [name]=\"propertyKey.toString()\"\n                #model=\"ngModel\"\n                [matDatepicker]=\"picker\"\n                [required]=\"metadata.required\"\n                [min]=\"metadataDefaultDate.min ? metadataDefaultDate.min(DateUtilities.asDate(entity[propertyKey])) : undefined\"\n                [max]=\"metadataDefaultDate.max ? metadataDefaultDate.max(DateUtilities.asDate(entity[propertyKey])) : undefined\"\n                [matDatepickerFilter]=\"metadataDefaultDate.filter ? metadataDefaultDate.filter : defaultDateFilter\"\n            >\n            <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n            <mat-datepicker #picker></mat-datepicker>\n            <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n        </mat-form-field>\n    </div>\n\n    <div *ngSwitchCase=\"DecoratorTypes.DATE_RANGE\">\n        <mat-form-field appearance=\"standard\">\n            <mat-label>{{metadata.displayName}}</mat-label>\n            \n            <mat-date-range-input [rangePicker]=\"picker\" [required]=\"metadata.required\" [dateFilter]=\"metadataDateRangeDate.filter ? metadataDateRangeDate.filter : defaultDateFilter\">\n                <input matStartDate\n                    [(ngModel)]=\"dateRangeStart\"\n                    [name]=\"propertyKey.toString() + 'start'\"\n                    #startModel=\"ngModel\"\n                    [required]=\"metadata.required\"\n                    [min]=\"metadataDateRangeDate.minStart ? metadataDateRangeDate.minStart(dateRange.start) : undefined\"\n                    [max]=\"metadataDateRangeDate.maxStart ? metadataDateRangeDate.maxStart(dateRange.start) : undefined\"\n                    [placeholder]=\"metadataDateRangeDate.placeholderStart ? metadataDateRangeDate.placeholderStart : 'Start'\"\n                    (ngModelChange)=\"setDateRangeValues()\"\n                >\n                <input matEndDate\n                    [(ngModel)]=\"dateRangeEnd\"\n                    [name]=\"propertyKey.toString() + 'end'\"\n                    #endModel=\"ngModel\"\n                    [required]=\"metadata.required\"\n                    [min]=\"metadataDateRangeDate.minEnd ? metadataDateRangeDate.minEnd(dateRange.end) : undefined\"\n                    [max]=\"metadataDateRangeDate.maxEnd ? metadataDateRangeDate.maxEnd(dateRange.end) : undefined\"\n                    [placeholder]=\"metadataDateRangeDate.placeholderEnd ? metadataDateRangeDate.placeholderEnd : 'End'\"\n                    (ngModelChange)=\"setDateRangeValues()\"\n                >\n            </mat-date-range-input>\n            <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n            <mat-date-range-picker #picker></mat-date-range-picker>\n\n            <mat-error *ngIf=\"startModel.errors\">{{getValidationErrorMessage(startModel)}}</mat-error>\n            <mat-error *ngIf=\"!startModel.errors && endModel.errors\">{{getValidationErrorMessage(endModel)}}</mat-error>\n        </mat-form-field>\n    </div>\n\n    <div *ngSwitchCase=\"DecoratorTypes.DATE_TIME\" class=\"date-time\">\n        <mat-form-field appearance=\"standard\" class=\"datepicker\">\n            <mat-label>{{metadata.displayName}}</mat-label>\n            <input\n                matInput\n                [(ngModel)]=\"dateTime\"\n                [name]=\"propertyKey.toString()\"\n                #model=\"ngModel\"\n                [matDatepicker]=\"picker\"\n                [required]=\"metadata.required\"\n                [min]=\"metadataDateTimeDate.minDate ? metadataDateTimeDate.minDate(dateTime) : undefined\"\n                [max]=\"metadataDateTimeDate.maxDate ? metadataDateTimeDate.maxDate(dateTime) : undefined\"\n                [matDatepickerFilter]=\"metadataDateTimeDate.filterDate ? metadataDateTimeDate.filterDate : defaultDateFilter\"\n                (dateInput)=\"setTime()\"\n            >\n            <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n            <mat-datepicker #picker></mat-datepicker>\n            <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n        </mat-form-field>\n        <mat-form-field class=\"timepicker\">\n            <mat-label>{{metadataDateTimeDate.timeDisplayName}}</mat-label>\n            <mat-select\n                [(ngModel)]=\"time\"\n                [name]=\"propertyKey.toString() + 'time'\"\n                #timeModel=\"ngModel\"\n                [required]=\"metadata.required\"\n                [compareWith]=\"compareTimes\"\n                (ngModelChange)=\"setTime()\"\n            >\n                <mat-option *ngFor=\"let validTime of DateUtilities.getValidTimesForDropdown(\n                        DateUtilities.asDate(entity[propertyKey]),\n                        metadataDateTimeDate.times,\n                        metadataDateTimeDate.minTime,\n                        metadataDateTimeDate.maxTime,\n                        metadataDateTimeDate.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\n    <div *ngSwitchDefault>ERROR: The type {{type}} is not known.</div>\n</div>\n\n<!--------------------------------------------------------->\n<!--------------------Add Array Item Dialog---------------->\n<!--------------------------------------------------------->\n<ng-template #addArrayItemDialog>\n    <h2 mat-dialog-title>{{dialogData.createDialogData.title}}</h2>\n\n    <mat-dialog-content>\n        <form #form=\"ngForm\" class=\"row\">\n            <div class=\"row\" *ngFor=\"let row of arrayItemDialogRows\">\n                <ngx-mat-entity-input\n                    *ngFor=\"let key of row.keys\"\n                    [entity]=\"dialogData.entity\"\n                    [propertyKey]=\"key\"\n                    [hideOmitForCreate]=\"true\"\n                    [getValidationErrorMessage]=\"dialogData.getValidationErrorMessage\"\n                    class=\"col-lg-{{EntityUtilities.getWidth(dialogData.entity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(dialogData.entity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(dialogData.entity, key, 'sm')}}\"\n                >\n                </ngx-mat-entity-input>\n            </div>\n        </form>\n    </mat-dialog-content>\n\n    <mat-dialog-actions>\n        <button mat-raised-button (click)=\"addArrayItem()\" [disabled]=\"!EntityUtilities.isEntityValid(dialogData.entity, 'create')\">\n            {{dialogData.createDialogData.createButtonLabel}}\n        </button>\n        <button mat-raised-button (click)=\"cancelAddArrayItem()\" class=\"cancel-button\">\n            {{dialogData.createDialogData.cancelButtonLabel}}\n        </button>\n    </mat-dialog-actions>\n\n</ng-template>", styles: ["mat-form-field{width:100%}::ng-deep .hideUnderline .mat-form-field-underline{opacity:0%}.entityArray .buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px}.entityArray mat-table{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:25px}.entityArray .mat-column-select{flex:0 0 75px}.entityArray .array-error{display:flex;align-items:center;justify-content:center;margin-top:-25.8px;border:1px solid #E0E0E0;background-color:#f8d3d7;color:#721c24;height:25.8px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.date-time{display:flex;align-items:baseline}.date-time .timepicker{margin-left:10px}\n"] }]
+            args: [{ selector: 'ngx-mat-entity-input', template: "<div [ngSwitch]=\"type\" *ngIf=\"!(hideOmitForCreate && metadata.omitForCreate) && !(hideOmitForEdit && metadata.omitForUpdate)\">\n    <!-------------------------------------------->\n    <!-----------------Strings-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.STRING\">\n        <string-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </string-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_TEXTBOX\">\n        <string-textbox-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </string-textbox-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_AUTOCOMPLETE\">\n        <string-autocomplete-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </string-autocomplete-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_DROPDOWN\">\n        <string-dropdown-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </string-dropdown-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_PASSWORD\">\n        <string-password-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </string-password-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-----------------Booleans------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_CHECKBOX\">\n        <boolean-checkbox-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </boolean-checkbox-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_TOGGLE\">\n        <boolean-toggle-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </boolean-toggle-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_DROPDOWN\">\n        <boolean-dropdown-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </boolean-dropdown-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!------------------Numbers------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.NUMBER\">\n        <number-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </number-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.NUMBER_DROPDOWN\">\n        <number-dropdown-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </number-dropdown-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.NUMBER_SLIDER\">\n        <number-slider-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </number-slider-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Object------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.OBJECT\">\n        <b>{{metadataDefaultObject.displayName}}</b>\n        <!-- iterates over the object properties -->\n        <div class=\"row\" *ngFor=\"let row of objectPropertyRows\">\n            <ngx-mat-entity-input *ngFor=\"let key of row.keys; let i = index; trackBy: trackByFn\"\n                [entity]=\"objectProperty\"\n                [propertyKey]=\"key\"\n                [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                [hideOmitForCreate]=\"hideOmitForCreate\"\n                [hideOmitForEdit]=\"hideOmitForEdit\"\n                [isReadOnly]=\"internalIsReadOnly\"\n                class=\"col-lg-{{EntityUtilities.getWidth(objectProperty, key, 'lg')}} col-md-{{EntityUtilities.getWidth(objectProperty, key, 'md')}} col-sm-{{EntityUtilities.getWidth(objectProperty, key, 'sm')}}\"\n                (inputChangeEvent)=\"emitChange()\"\n            >\n            </ngx-mat-entity-input>\n        </div>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Array-------------------->\n    <!-------------------------------------------->\n    <div class=\"entityArray\" *ngSwitchCase=\"DecoratorTypes.ARRAY\">\n        <div class=\"mat-elevation-z8\" style=\"border-radius: 5px;padding: 15px;margin-bottom: 15px;margin-top: 15px;\">\n            <div style=\"padding-bottom: 10px\">\n                <b>{{metadataEntityArray.displayName}}</b>\n            </div>\n            <div *ngIf=\"metadataEntityArray.createInline && !internalIsReadOnly\">\n                <div class=\"row\" *ngFor=\"let row of arrayItemInlineRows\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys; let i = index; trackBy: trackByFn\"\n                        [entity]=\"arrayItem\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForCreate]=\"true\"\n                        [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                        class=\"col-lg-{{EntityUtilities.getWidth(arrayItem, key, 'lg')}} col-md-{{EntityUtilities.getWidth(arrayItem, key, 'md')}} col-sm-{{EntityUtilities.getWidth(arrayItem, key, 'sm')}}\"\n                        (inputChangeEvent)=\"checkIsArrayItemValid()\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </div>\n\n            <div class=\"buttons\" *ngIf=\"!internalIsReadOnly\">\n                <button mat-raised-button\n                    [disabled]=\"metadataEntityArray.createInline && !isArrayItemValid\"\n                    (click)=\"addEntity()\">\n                    {{metadataEntityArray.addButtonLabel}}\n                </button>\n                <button mat-raised-button\n                    [disabled]=\"!selection.selected.length\"\n                    (click)=\"remove(selection, entityArrayValues, dataSource)\">\n                    {{metadataEntityArray.removeButtonLabel}}\n                </button>\n            </div>\n        \n            <mat-table [dataSource]=\"dataSource\">\n                <!-- select Column -->\n                <ng-container matColumnDef=\"select\" *ngIf=\"!internalIsReadOnly\">\n                    <mat-header-cell *matHeaderCellDef>\n                        <mat-checkbox\n                            [disabled]=\"!dataSource.data.length\" (change)=\"$event ? masterToggle(selection, dataSource) : null\"\n                            [checked]=\"selection.hasValue() && isAllSelected(selection, dataSource)\"\n                            [indeterminate]=\"selection.hasValue() && !isAllSelected(selection, dataSource)\">\n                        </mat-checkbox>\n                    </mat-header-cell>\n                    <mat-cell *matCellDef=\"let module\">\n                        <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(module) : null\" [checked]=\"selection.isSelected(module)\"></mat-checkbox>\n                    </mat-cell>\n                </ng-container>\n            \n                <ng-container *ngFor=\"let dCol of metadataEntityArray.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n                    <mat-header-cell *matHeaderCellDef>\n                        {{dCol.displayName}}\n                    </mat-header-cell>\n                    <mat-cell class=\"entity\" *matCellDef=\"let entity\">\n                        {{dCol.value(entity)}}\n                    </mat-cell>\n                </ng-container>\n            \n                <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n                <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n            </mat-table>\n        \n            <div class=\"array-error\" *ngIf=\"metadataEntityArray.required && !dataSource.data.length\">\n                {{metadataEntityArray.missingErrorMessage}}\n            </div>\n        </div>\n    </div>\n\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_DATE\">\n        <array-date-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </array-date-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_DATE_TIME\">\n        <array-date-time-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </array-date-time-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_DATE_RANGE\">\n        <array-date-range-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </array-date-range-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_STRING_CHIPS\">\n        <array-string-chips-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </array-string-chips-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_STRING_AUTOCOMPLETE_CHIPS\">\n        <array-string-autocomplete-chips\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </array-string-autocomplete-chips>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Dates-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.DATE\">\n        <date-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </date-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.DATE_RANGE\">\n        <date-range-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </date-range-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.DATE_TIME\">\n        <date-time-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </date-time-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Files-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.FILE_DEFAULT\">\n        <file-default-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </file-default-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.FILE_IMAGE\">\n        <file-image-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </file-image-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Custom------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.CUSTOM\">\n        <custom-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </custom-input>\n    </div>\n\n    <div *ngSwitchDefault>ERROR: The type {{type}} is not known.</div>\n</div>\n\n<!--------------------------------------------------------->\n<!--------------------Add Array Item Dialog---------------->\n<!--------------------------------------------------------->\n<ng-template #addArrayItemDialog>\n    <h2 mat-dialog-title>{{dialogData.createDialogData.title}}</h2>\n\n    <mat-dialog-content>\n        <form #form=\"ngForm\" class=\"row\">\n            <div class=\"row\" *ngFor=\"let row of arrayItemDialogRows\">\n                <ngx-mat-entity-input\n                    *ngFor=\"let key of row.keys\"\n                    [entity]=\"dialogData.entity\"\n                    [propertyKey]=\"key\"\n                    [hideOmitForCreate]=\"true\"\n                    [getValidationErrorMessage]=\"dialogData.getValidationErrorMessage\"\n                    class=\"col-lg-{{EntityUtilities.getWidth(dialogData.entity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(dialogData.entity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(dialogData.entity, key, 'sm')}}\"\n                    (inputChangeEvent)=\"checkIsDialogArrayItemValid()\"\n                >\n                </ngx-mat-entity-input>\n            </div>\n        </form>\n    </mat-dialog-content>\n\n    <mat-dialog-actions>\n        <button mat-raised-button (click)=\"addArrayItem()\" [disabled]=\"!isDialogArrayItemValid\">\n            {{dialogData.createDialogData.createButtonLabel}}\n        </button>\n        <button mat-raised-button (click)=\"cancelAddArrayItem()\" class=\"cancel-button\">\n            {{dialogData.createDialogData.cancelButtonLabel}}\n        </button>\n    </mat-dialog-actions>\n\n</ng-template>", styles: ["mat-form-field{width:100%}::ng-deep .mat-form-field.mat-form-field-disabled .mat-form-field-wrapper .mat-form-field-underline{background-image:none;height:1px;background-color:#0000006b}::ng-deep .mat-form-field.mat-form-field-disabled .mat-chip.mat-standard-chip.mat-chip-disabled{opacity:1}::ng-deep .mat-form-field.mat-form-field-disabled .mat-chip.mat-standard-chip.mat-chip-disabled button{opacity:.2}::ng-deep .mat-form-field.mat-form-field-disabled .mat-select-disabled .mat-select-value{color:#000}::ng-deep .mat-form-field.mat-form-field-disabled .mat-date-range-input-inner:disabled{color:#000}::ng-deep .mat-form-field .mat-slide-toggle.mat-disabled{opacity:1}::ng-deep .mat-input-element:disabled{color:#000}.entityArray .buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px}.entityArray mat-table{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:25px}.entityArray .mat-column-select{flex:0 0 75px}.entityArray .array-error{display:flex;align-items:center;justify-content:center;margin-top:-25.8px;border:1px solid #E0E0E0;background-color:#f8d3d7;color:#721c24;height:25.8px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.MatDialog }]; }, propDecorators: { entity: [{
                 type: Input
             }], propertyKey: [{
@@ -1515,6 +2966,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], hideOmitForEdit: [{
                 type: Input
+            }], isReadOnly: [{
+                type: Input
+            }], inputChangeEvent: [{
+                type: Output
             }], addArrayItemDialog: [{
                 type: ViewChild,
                 args: ['addArrayItemDialog']
@@ -1523,7 +2978,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
 class NgxMatEntityInputModule {
 }
 NgxMatEntityInputModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NgxMatEntityInputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityInputModule, declarations: [NgxMatEntityInputComponent], imports: [CommonModule,
+NgxMatEntityInputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityInputModule, declarations: [StringInputComponent,
+        StringTextboxInputComponent,
+        StringAutocompleteInputComponent,
+        StringDropdownInputComponent,
+        StringPasswordInputComponent,
+        BooleanCheckboxInputComponent,
+        BooleanToggleInputComponent,
+        BooleanDropdownInputComponent,
+        NumberInputComponent,
+        NumberDropdownInputComponent,
+        NumberSliderInputComponent,
+        ArrayStringChipsInputComponent,
+        ArrayStringAutocompleteChipsComponent,
+        DateInputComponent,
+        DateRangeInputComponent,
+        DateTimeInputComponent,
+        ArrayDateInputComponent,
+        ArrayDateTimeInputComponent,
+        ArrayDateRangeInputComponent,
+        FileInputComponent,
+        FileImageInputComponent,
+        FileDefaultInputComponent,
+        DragDropDirective,
+        CustomInputComponent,
+        NgxMatEntityInputComponent], imports: [CommonModule,
         MatInputModule,
         FormsModule,
         MatFormFieldModule,
@@ -1536,7 +3015,8 @@ NgxMatEntityInputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0",
         MatTableModule,
         MatDialogModule,
         MatButtonModule,
-        MatDatepickerModule], exports: [NgxMatEntityInputComponent] });
+        MatDatepickerModule,
+        MatSliderModule], exports: [NgxMatEntityInputComponent] });
 NgxMatEntityInputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityInputModule, imports: [[
             CommonModule,
             MatInputModule,
@@ -1551,13 +3031,38 @@ NgxMatEntityInputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0",
             MatTableModule,
             MatDialogModule,
             MatButtonModule,
-            MatDatepickerModule
+            MatDatepickerModule,
+            MatSliderModule
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityInputModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
-                        NgxMatEntityInputComponent,
+                        StringInputComponent,
+                        StringTextboxInputComponent,
+                        StringAutocompleteInputComponent,
+                        StringDropdownInputComponent,
+                        StringPasswordInputComponent,
+                        BooleanCheckboxInputComponent,
+                        BooleanToggleInputComponent,
+                        BooleanDropdownInputComponent,
+                        NumberInputComponent,
+                        NumberDropdownInputComponent,
+                        NumberSliderInputComponent,
+                        ArrayStringChipsInputComponent,
+                        ArrayStringAutocompleteChipsComponent,
+                        DateInputComponent,
+                        DateRangeInputComponent,
+                        DateTimeInputComponent,
+                        ArrayDateInputComponent,
+                        ArrayDateTimeInputComponent,
+                        ArrayDateRangeInputComponent,
+                        FileInputComponent,
+                        FileImageInputComponent,
+                        FileDefaultInputComponent,
+                        DragDropDirective,
+                        CustomInputComponent,
+                        NgxMatEntityInputComponent
                     ],
                     imports: [
                         CommonModule,
@@ -1573,7 +3078,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         MatTableModule,
                         MatDialogModule,
                         MatButtonModule,
-                        MatDatepickerModule
+                        MatDatepickerModule,
+                        MatSliderModule
                     ],
                     exports: [NgxMatEntityInputComponent]
                 }]
@@ -1616,7 +3122,7 @@ class NgxMatEntityCreateDialogComponent {
         this.injector = injector;
         this.dialog = dialog;
         this.EntityUtilities = EntityUtilities;
-        this.getWidth = EntityUtilities.getWidth;
+        this.isEntityValid = false;
     }
     ngOnInit() {
         this.data = new CreateEntityDialogDataBuilder(this.inputData).getResult();
@@ -1624,15 +3130,22 @@ class NgxMatEntityCreateDialogComponent {
         this.entityRows = EntityUtilities.getEntityRows(this.data.entity, true);
         this.entityService = this.injector.get(this.data.EntityServiceClass);
     }
+    /**
+     * Checks if the entity is valid.
+     */
+    checkIsEntityValid() {
+        this.isEntityValid = EntityUtilities.isEntityValid(this.data.entity, 'create');
+    }
     /**
      * Tries add the new entity and close the dialog afterwards.
      * Also handles the confirmation if required.
      */
     create() {
-        if (!this.data.createDialogData?.createRequiresConfirmDialog) {
-            return this.confirmCreate();
+        if (!this.data.createDialogData.createRequiresConfirmDialog) {
+            this.confirmCreate();
+            return;
         }
-        const dialogData = new ConfirmDialogDataBuilder(this.data.createDialogData?.confirmCreateDialogData)
+        const dialogData = new ConfirmDialogDataBuilder(this.data.createDialogData.confirmCreateDialogData)
             .withDefault('text', ['Do you really want to create this entity?'])
             .withDefault('confirmButtonLabel', 'Create')
             .withDefault('title', 'Create')
@@ -1649,7 +3162,7 @@ class NgxMatEntityCreateDialogComponent {
         });
     }
     confirmCreate() {
-        this.entityService.create(this.data.entity).then(() => this.dialogRef.close());
+        void this.entityService.create(this.data.entity).then(() => this.dialogRef.close());
     }
     /**
      * Closes the dialog.
@@ -1659,10 +3172,10 @@ class NgxMatEntityCreateDialogComponent {
     }
 }
 NgxMatEntityCreateDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityCreateDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.MatDialogRef }, { token: i0.Injector }, { token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-NgxMatEntityCreateDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NgxMatEntityCreateDialogComponent, selector: "ngx-mat-entity-create-dialog", ngImport: i0, template: "<h2 mat-dialog-title>{{data.createDialogData.title}}</h2>\n\n<mat-dialog-content>\n    <form #form=\"ngForm\">\n        <div class=\"row\" *ngFor=\"let row of entityRows\">\n            <ngx-mat-entity-input\n                *ngFor=\"let key of row.keys\"\n                [entity]=\"data.entity\"\n                [propertyKey]=\"key\"\n                [hideOmitForCreate]=\"true\"\n                class=\"col-lg-{{getWidth(data.entity, key, 'lg')}} col-md-{{getWidth(data.entity, key, 'md')}} col-sm-{{getWidth(data.entity, key, 'sm')}}\"\n            >\n            </ngx-mat-entity-input>\n        </div>\n    </form>\n</mat-dialog-content>\n\n<mat-dialog-actions>\n    <button mat-raised-button (click)=\"create()\" [disabled]=\"!EntityUtilities.isEntityValid(data.entity, 'create')\">\n        {{data.createDialogData.createButtonLabel}}\n    </button>\n    <button mat-raised-button (click)=\"cancel()\" class=\"cancel-button\">\n        {{data.createDialogData.cancelButtonLabel}}\n    </button>\n</mat-dialog-actions>\n", styles: ["mat-dialog-actions{display:flex;justify-content:space-between}\n"], components: [{ type: NgxMatEntityInputComponent, selector: "ngx-mat-entity-input", inputs: ["entity", "propertyKey", "getValidationErrorMessage", "hideOmitForCreate", "hideOmitForEdit"] }, { type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i14.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i14.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i14.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i12.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }] });
+NgxMatEntityCreateDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NgxMatEntityCreateDialogComponent, selector: "ngx-mat-entity-create-dialog", ngImport: i0, template: "<h2 mat-dialog-title>{{data.createDialogData.title}}</h2>\n\n<mat-dialog-content>\n    <form #form=\"ngForm\">\n        <div class=\"row\" *ngFor=\"let row of entityRows\">\n            <ngx-mat-entity-input\n                *ngFor=\"let key of row.keys\"\n                [entity]=\"data.entity\"\n                [propertyKey]=\"key\"\n                [hideOmitForCreate]=\"true\"\n                class=\"col-lg-{{EntityUtilities.getWidth(data.entity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(data.entity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(data.entity, key, 'sm')}}\"\n                (inputChangeEvent)=\"checkIsEntityValid()\"\n            >\n            </ngx-mat-entity-input>\n        </div>\n    </form>\n</mat-dialog-content>\n\n<mat-dialog-actions>\n    <button mat-raised-button (click)=\"create()\" [disabled]=\"!isEntityValid\">\n        {{data.createDialogData.createButtonLabel}}\n    </button>\n    <button mat-raised-button (click)=\"cancel()\" class=\"cancel-button\">\n        {{data.createDialogData.cancelButtonLabel}}\n    </button>\n</mat-dialog-actions>\n", styles: ["mat-dialog-actions{display:flex;justify-content:space-between}\n"], components: [{ type: NgxMatEntityInputComponent, selector: "ngx-mat-entity-input", inputs: ["entity", "propertyKey", "getValidationErrorMessage", "hideOmitForCreate", "hideOmitForEdit", "isReadOnly"], outputs: ["inputChangeEvent"] }, { type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityCreateDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-mat-entity-create-dialog', template: "<h2 mat-dialog-title>{{data.createDialogData.title}}</h2>\n\n<mat-dialog-content>\n    <form #form=\"ngForm\">\n        <div class=\"row\" *ngFor=\"let row of entityRows\">\n            <ngx-mat-entity-input\n                *ngFor=\"let key of row.keys\"\n                [entity]=\"data.entity\"\n                [propertyKey]=\"key\"\n                [hideOmitForCreate]=\"true\"\n                class=\"col-lg-{{getWidth(data.entity, key, 'lg')}} col-md-{{getWidth(data.entity, key, 'md')}} col-sm-{{getWidth(data.entity, key, 'sm')}}\"\n            >\n            </ngx-mat-entity-input>\n        </div>\n    </form>\n</mat-dialog-content>\n\n<mat-dialog-actions>\n    <button mat-raised-button (click)=\"create()\" [disabled]=\"!EntityUtilities.isEntityValid(data.entity, 'create')\">\n        {{data.createDialogData.createButtonLabel}}\n    </button>\n    <button mat-raised-button (click)=\"cancel()\" class=\"cancel-button\">\n        {{data.createDialogData.cancelButtonLabel}}\n    </button>\n</mat-dialog-actions>\n", styles: ["mat-dialog-actions{display:flex;justify-content:space-between}\n"] }]
+            args: [{ selector: 'ngx-mat-entity-create-dialog', template: "<h2 mat-dialog-title>{{data.createDialogData.title}}</h2>\n\n<mat-dialog-content>\n    <form #form=\"ngForm\">\n        <div class=\"row\" *ngFor=\"let row of entityRows\">\n            <ngx-mat-entity-input\n                *ngFor=\"let key of row.keys\"\n                [entity]=\"data.entity\"\n                [propertyKey]=\"key\"\n                [hideOmitForCreate]=\"true\"\n                class=\"col-lg-{{EntityUtilities.getWidth(data.entity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(data.entity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(data.entity, key, 'sm')}}\"\n                (inputChangeEvent)=\"checkIsEntityValid()\"\n            >\n            </ngx-mat-entity-input>\n        </div>\n    </form>\n</mat-dialog-content>\n\n<mat-dialog-actions>\n    <button mat-raised-button (click)=\"create()\" [disabled]=\"!isEntityValid\">\n        {{data.createDialogData.createButtonLabel}}\n    </button>\n    <button mat-raised-button (click)=\"cancel()\" class=\"cancel-button\">\n        {{data.createDialogData.cancelButtonLabel}}\n    </button>\n</mat-dialog-actions>\n", styles: ["mat-dialog-actions{display:flex;justify-content:space-between}\n"] }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -1703,7 +3216,7 @@ class EditDialogDataBuilder extends BaseBuilder {
             .withDefault('text', ['Do you really want to delete this entity?'])
             .withDefault('title', 'Delete')
             .getResult();
-        return new EditDialogDataInternal(data?.title ? data.title : () => 'Edit', data?.confirmButtonLabel ? data.confirmButtonLabel : 'Save', data?.deleteButtonLabel ? data.deleteButtonLabel : 'Delete', data?.cancelButtonLabel ? data.cancelButtonLabel : 'Cancel', data?.deleteRequiresConfirmDialog ? data.deleteRequiresConfirmDialog : true, data?.editRequiresConfirmDialog ? data.editRequiresConfirmDialog : false, confirmDeleteDialogData, confirmEditDialogData);
+        return new EditDialogDataInternal(data?.title ?? (() => 'Edit'), data?.confirmButtonLabel ?? 'Save', data?.deleteButtonLabel ?? 'Delete', data?.cancelButtonLabel ?? 'Cancel', data?.deleteRequiresConfirmDialog ?? true, data?.editRequiresConfirmDialog ?? false, confirmDeleteDialogData, confirmEditDialogData);
     }
 }
 
@@ -1711,11 +3224,12 @@ class EditDialogDataBuilder extends BaseBuilder {
  * The internal EditEntityDialogData. Requires all default values the user can leave out.
  */
 class EditEntityDialogDataInternal {
-    constructor(entity, EntityServiceClass, editDialogData, allowDelete) {
+    constructor(entity, EntityServiceClass, editDialogData, allowUpdate, allowDelete) {
         this.entity = entity;
         this.EntityServiceClass = EntityServiceClass;
         this.editDialogData = editDialogData;
         this.allowDelete = allowDelete;
+        this.allowUpdate = allowUpdate;
     }
 }
 /**
@@ -1728,7 +3242,7 @@ class EditEntityDialogDataBuilder extends BaseBuilder {
     // eslint-disable-next-line jsdoc/require-jsdoc
     generateBaseData(data) {
         const editDialogData = new EditDialogDataBuilder(data.editDialogData).getResult();
-        return new EditEntityDialogDataInternal(data.entity, data.EntityServiceClass, editDialogData, data.allowDelete ? data.allowDelete : () => true);
+        return new EditEntityDialogDataInternal(data.entity, data.EntityServiceClass, editDialogData, data.allowUpdate ?? (() => true), data.allowDelete ?? (() => true));
     }
 }
 
@@ -1745,14 +3259,21 @@ class NgxMatEntityEditDialogComponent {
         this.injector = injector;
         this.dialog = dialog;
         this.EntityUtilities = EntityUtilities;
-        this.getWidth = EntityUtilities.getWidth;
+        this.isEntityValid = true;
+        this.isEntityDirty = (async () => false).call(this);
     }
     ngOnInit() {
         this.data = new EditEntityDialogDataBuilder(this.inputData).getResult();
+        this.isReadOnly = !this.data.allowUpdate(this.entityPriorChanges);
         this.dialogRef.disableClose = true;
         this.entityRows = EntityUtilities.getEntityRows(this.data.entity, false, true);
         this.entityService = this.injector.get(this.data.EntityServiceClass);
-        this.entityPriorChanges = cloneDeep(this.data.entity);
+        this.entityPriorChanges = LodashUtilities.cloneDeep(this.data.entity);
+    }
+    // eslint-disable-next-line jsdoc/require-jsdoc
+    checkEntity() {
+        this.isEntityValid = EntityUtilities.isEntityValid(this.data.entity, 'update');
+        this.isEntityDirty = EntityUtilities.isDirty(this.data.entity, this.entityPriorChanges);
     }
     /**
      * Tries to save the changes and close the dialog afterwards.
@@ -1760,7 +3281,8 @@ class NgxMatEntityEditDialogComponent {
      */
     edit() {
         if (!this.data.editDialogData.editRequiresConfirmDialog) {
-            return this.confirmEdit();
+            this.confirmEdit();
+            return;
         }
         const dialogData = new ConfirmDialogDataBuilder(this.data.editDialogData.confirmEditDialogData)
             .withDefault('text', ['Do you really want to save all changes?'])
@@ -1779,7 +3301,7 @@ class NgxMatEntityEditDialogComponent {
         });
     }
     confirmEdit() {
-        this.entityService.update(this.data.entity, this.entityPriorChanges).then(() => this.dialogRef.close(1));
+        void this.entityService.update(this.data.entity, this.entityPriorChanges).then(() => this.dialogRef.close(1));
     }
     /**
      * Tries to delete the entity and close the dialog afterwards.
@@ -1787,7 +3309,8 @@ class NgxMatEntityEditDialogComponent {
      */
     delete() {
         if (!this.data.editDialogData.deleteRequiresConfirmDialog) {
-            return this.confirmDelete();
+            this.confirmDelete();
+            return;
         }
         const dialogData = new ConfirmDialogDataBuilder(this.data.editDialogData.confirmDeleteDialogData)
             .withDefault('text', ['Do you really want to delete this entity?'])
@@ -1807,7 +3330,7 @@ class NgxMatEntityEditDialogComponent {
         });
     }
     confirmDelete() {
-        this.entityService.delete(this.entityPriorChanges).then(() => this.dialogRef.close(2));
+        void this.entityService.delete(this.entityPriorChanges).then(() => this.dialogRef.close(2));
     }
     /**
      * Reverts all changes made and closes the dialog.
@@ -1818,10 +3341,10 @@ class NgxMatEntityEditDialogComponent {
     }
 }
 NgxMatEntityEditDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityEditDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.MatDialogRef }, { token: i0.Injector }, { token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-NgxMatEntityEditDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NgxMatEntityEditDialogComponent, selector: "ngx-mat-entity-edit-dialog", ngImport: i0, template: "<h2 mat-dialog-title>\n    {{data.editDialogData.title(data.entity)}}\n    <button *ngIf=\"data.allowDelete(data.entity)\" mat-raised-button (click)=\"delete()\" color=\"warn\" class=\"delete-button\" tabindex=\"-1\">\n        {{data.editDialogData.deleteButtonLabel}}\n    </button>\n</h2>\n\n<mat-dialog-content>\n    <form #form=\"ngForm\" class=\"row\">\n        <div class=\"row\" *ngFor=\"let row of entityRows\">\n            <ngx-mat-entity-input\n                *ngFor=\"let key of row.keys\"\n                [entity]=\"data.entity\"\n                [propertyKey]=\"key\"\n                [hideOmitForEdit]=\"true\"\n                class=\"col-lg-{{getWidth(data.entity, key, 'lg')}} col-md-{{getWidth(data.entity, key, 'md')}} col-sm-{{getWidth(data.entity, key, 'sm')}}\"\n            >\n            </ngx-mat-entity-input>\n        </div>\n    </form>\n</mat-dialog-content>\n\n<mat-dialog-actions>\n    <button mat-raised-button (click)=\"edit()\" [disabled]=\"!EntityUtilities.isEntityValid(data.entity, 'update') || !EntityUtilities.dirty(data.entity, entityPriorChanges)\">\n        {{data.editDialogData.confirmButtonLabel}}\n    </button>\n    <button mat-raised-button (click)=\"cancel()\" class=\"cancel-button\">\n        {{data.editDialogData.cancelButtonLabel}}\n    </button>\n</mat-dialog-actions>\n", styles: ["mat-dialog-actions{display:flex;justify-content:space-between}.delete-button{float:right}\n"], components: [{ type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: NgxMatEntityInputComponent, selector: "ngx-mat-entity-input", inputs: ["entity", "propertyKey", "getValidationErrorMessage", "hideOmitForCreate", "hideOmitForEdit"] }], directives: [{ type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i14.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i14.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i14.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i12.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }] });
+NgxMatEntityEditDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NgxMatEntityEditDialogComponent, selector: "ngx-mat-entity-edit-dialog", ngImport: i0, template: "<h2 mat-dialog-title>\n    {{data.editDialogData.title(data.entity)}}\n    <button *ngIf=\"data.allowDelete(data.entity)\" mat-raised-button (click)=\"delete()\" color=\"warn\" class=\"delete-button\" tabindex=\"-1\">\n        {{data.editDialogData.deleteButtonLabel}}\n    </button>\n</h2>\n\n<mat-dialog-content>\n    <form #form=\"ngForm\" class=\"row\">\n        <div class=\"row\" *ngFor=\"let row of entityRows\">\n            <ngx-mat-entity-input\n                *ngFor=\"let key of row.keys\"\n                [entity]=\"data.entity\"\n                [propertyKey]=\"key\"\n                [hideOmitForEdit]=\"true\"\n                class=\"col-lg-{{EntityUtilities.getWidth(data.entity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(data.entity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(data.entity, key, 'sm')}}\"\n                (inputChangeEvent)=\"checkEntity()\"\n                [isReadOnly]=\"isReadOnly\"\n            >\n            </ngx-mat-entity-input>\n        </div>\n    </form>\n</mat-dialog-content>\n\n<mat-dialog-actions>\n    <button mat-raised-button (click)=\"edit()\" [disabled]=\"isReadOnly || !isEntityValid || (isEntityDirty | async) === false\">\n        {{data.editDialogData.confirmButtonLabel}}\n    </button>\n    <button mat-raised-button (click)=\"cancel()\" class=\"cancel-button\">\n        {{data.editDialogData.cancelButtonLabel}}\n    </button>\n</mat-dialog-actions>\n", styles: ["mat-dialog-actions{display:flex;justify-content:space-between}.delete-button{float:right}\n"], components: [{ type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: NgxMatEntityInputComponent, selector: "ngx-mat-entity-input", inputs: ["entity", "propertyKey", "getValidationErrorMessage", "hideOmitForCreate", "hideOmitForEdit", "isReadOnly"], outputs: ["inputChangeEvent"] }], directives: [{ type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }], pipes: { "async": i6.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityEditDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-mat-entity-edit-dialog', template: "<h2 mat-dialog-title>\n    {{data.editDialogData.title(data.entity)}}\n    <button *ngIf=\"data.allowDelete(data.entity)\" mat-raised-button (click)=\"delete()\" color=\"warn\" class=\"delete-button\" tabindex=\"-1\">\n        {{data.editDialogData.deleteButtonLabel}}\n    </button>\n</h2>\n\n<mat-dialog-content>\n    <form #form=\"ngForm\" class=\"row\">\n        <div class=\"row\" *ngFor=\"let row of entityRows\">\n            <ngx-mat-entity-input\n                *ngFor=\"let key of row.keys\"\n                [entity]=\"data.entity\"\n                [propertyKey]=\"key\"\n                [hideOmitForEdit]=\"true\"\n                class=\"col-lg-{{getWidth(data.entity, key, 'lg')}} col-md-{{getWidth(data.entity, key, 'md')}} col-sm-{{getWidth(data.entity, key, 'sm')}}\"\n            >\n            </ngx-mat-entity-input>\n        </div>\n    </form>\n</mat-dialog-content>\n\n<mat-dialog-actions>\n    <button mat-raised-button (click)=\"edit()\" [disabled]=\"!EntityUtilities.isEntityValid(data.entity, 'update') || !EntityUtilities.dirty(data.entity, entityPriorChanges)\">\n        {{data.editDialogData.confirmButtonLabel}}\n    </button>\n    <button mat-raised-button (click)=\"cancel()\" class=\"cancel-button\">\n        {{data.editDialogData.cancelButtonLabel}}\n    </button>\n</mat-dialog-actions>\n", styles: ["mat-dialog-actions{display:flex;justify-content:space-between}.delete-button{float:right}\n"] }]
+            args: [{ selector: 'ngx-mat-entity-edit-dialog', template: "<h2 mat-dialog-title>\n    {{data.editDialogData.title(data.entity)}}\n    <button *ngIf=\"data.allowDelete(data.entity)\" mat-raised-button (click)=\"delete()\" color=\"warn\" class=\"delete-button\" tabindex=\"-1\">\n        {{data.editDialogData.deleteButtonLabel}}\n    </button>\n</h2>\n\n<mat-dialog-content>\n    <form #form=\"ngForm\" class=\"row\">\n        <div class=\"row\" *ngFor=\"let row of entityRows\">\n            <ngx-mat-entity-input\n                *ngFor=\"let key of row.keys\"\n                [entity]=\"data.entity\"\n                [propertyKey]=\"key\"\n                [hideOmitForEdit]=\"true\"\n                class=\"col-lg-{{EntityUtilities.getWidth(data.entity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(data.entity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(data.entity, key, 'sm')}}\"\n                (inputChangeEvent)=\"checkEntity()\"\n                [isReadOnly]=\"isReadOnly\"\n            >\n            </ngx-mat-entity-input>\n        </div>\n    </form>\n</mat-dialog-content>\n\n<mat-dialog-actions>\n    <button mat-raised-button (click)=\"edit()\" [disabled]=\"isReadOnly || !isEntityValid || (isEntityDirty | async) === false\">\n        {{data.editDialogData.confirmButtonLabel}}\n    </button>\n    <button mat-raised-button (click)=\"cancel()\" class=\"cancel-button\">\n        {{data.editDialogData.cancelButtonLabel}}\n    </button>\n</mat-dialog-actions>\n", styles: ["mat-dialog-actions{display:flex;justify-content:space-between}.delete-button{float:right}\n"] }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -1846,14 +3369,14 @@ class BaseDataBuilder extends BaseBuilder {
     }
     // eslint-disable-next-line jsdoc/require-jsdoc
     generateBaseData(data) {
-        return new BaseDataInternal(data.title, data.displayColumns, data.EntityServiceClass, data.searchLabel ? data.searchLabel : 'Search', data.createButtonLabel ? data.createButtonLabel : 'Create', data.searchString ? data.searchString : defaultSearchFunction, data.allowCreate === false ? data.allowCreate : true, data.allowEdit ? data.allowEdit : () => true, data.allowDelete ? data.allowDelete : () => true, data.multiSelectActions ? data.multiSelectActions : [], data.multiSelectLabel ? data.multiSelectLabel : 'Actions', data.EntityClass, data.edit, data.create);
+        return new BaseDataInternal(data.title, data.displayColumns, data.EntityServiceClass, data.searchLabel ?? 'Search', data.createButtonLabel ?? 'Create', data.searchString ?? defaultSearchFunction, data.allowCreate ?? (() => true), data.allowRead ?? (() => true), data.allowUpdate ?? (() => true), data.allowDelete ?? (() => true), data.multiSelectActions ?? [], data.multiSelectLabel ?? 'Actions', data.EntityClass, data.edit, data.create);
     }
 }
 /**
  * The internal TableData. Requires all default values the user can leave out.
  */
 class BaseDataInternal {
-    constructor(title, displayColumns, EntityServiceClass, searchLabel, createButtonLabel, searchString, allowCreate, allowEdit, allowDelete, multiSelectActions, multiSelectLabel, EntityClass, edit, create) {
+    constructor(title, displayColumns, EntityServiceClass, searchLabel, createButtonLabel, searchString, allowCreate, allowRead, allowUpdate, allowDelete, multiSelectActions, multiSelectLabel, EntityClass, edit, create) {
         this.title = title;
         this.displayColumns = displayColumns;
         this.EntityServiceClass = EntityServiceClass;
@@ -1862,7 +3385,8 @@ class BaseDataInternal {
         this.createButtonLabel = createButtonLabel;
         this.searchString = searchString;
         this.allowCreate = allowCreate;
-        this.allowEdit = allowEdit;
+        this.allowRead = allowRead;
+        this.allowUpdate = allowUpdate;
         this.allowDelete = allowDelete;
         this.multiSelectActions = multiSelectActions;
         this.multiSelectLabel = multiSelectLabel;
@@ -1890,24 +3414,26 @@ class TableDataBuilder extends BaseBuilder {
             throw new Error(`The name "select" for a display column is reserved for the multi-select action functionality.
                 Please choose a different name.`);
         }
-        if ((data.baseData.allowEdit && data.baseData.allowEdit !== (() => false)
-            || data.baseData.allowDelete && data.baseData.allowDelete !== (() => false)
-            || data.baseData.allowCreate)
+        if ((data.baseData.allowCreate !== (() => false)
+            || data.baseData.allowRead !== (() => false)
+            || data.baseData.allowUpdate !== (() => false)
+            || data.baseData.allowDelete !== (() => false))
             && !data.baseData.EntityClass) {
             throw new Error(`
                 Missing required Input data "EntityClass".
                 You can only omit this value if you can neither create or update entities.`);
         }
-        if (data.baseData.allowCreate !== false && !data.baseData.create && !data.createDialogData) {
+        if (data.baseData.allowCreate !== (() => false) && !data.baseData.create && !data.createDialogData) {
             throw new Error(`Missing required Input data "createDialogData".
                 You can only omit this value when creation is disallowed or done with a custom create method.`);
         }
-        if ((data.baseData.allowEdit !== (() => false)
+        if ((data.baseData.allowRead !== (() => false)
+            || data.baseData.allowUpdate !== (() => false)
             || data.baseData.allowDelete !== (() => false))
             && !data.baseData.edit
             && !data.editDialogData) {
             throw new Error(`Missing required Input data "editDialogData".
-                You can only omit this value when editing and deleting is disallowed or done with a custom edit method.`);
+                You can only omit this value when viewing, editing and deleting is disallowed or done with a custom edit method.`);
         }
     }
 }
@@ -1960,21 +3486,19 @@ class NgxMatEntityTableComponent {
             return this.data.baseData.displayColumns.find((dp) => dp.displayName === header)?.value(entity);
         };
         this.dataSource.sort = this.sort;
-        if (this.data.baseData.searchString) {
-            this.dataSource.filterPredicate = (entity, filter) => {
-                const searchStr = this.data.baseData.searchString(entity);
-                const formattedSearchString = searchStr.toLowerCase();
-                const formattedFilterString = filter.toLowerCase();
-                return formattedSearchString.includes(formattedFilterString);
-            };
-        }
+        this.dataSource.filterPredicate = (entity, filter) => {
+            const searchStr = this.data.baseData.searchString(entity);
+            const formattedSearchString = searchStr.toLowerCase();
+            const formattedFilterString = filter.toLowerCase();
+            return formattedSearchString.includes(formattedFilterString);
+        };
         this.dataSource.filter = this.filter;
         this.dataSource.paginator = this.paginator;
         this.entityService.entitiesSubject.pipe(takeUntil(this.onDestroy)).subscribe((entities) => {
             this.dataSource.data = entities;
             this.selection.clear();
         });
-        this.entityService.read();
+        void this.entityService.read();
     }
     /**
      * Edits an entity. This either calls the edit-Method provided by the user or uses a default edit-dialog.
@@ -1983,39 +3507,40 @@ class NgxMatEntityTableComponent {
      * @throws When no EntityClass was provided, as a new call is needed to initialize metadata.
      */
     editEntity(entity) {
-        if (this.data.baseData.allowEdit(entity)) {
-            if (!this.data.baseData.EntityClass) {
-                throw new Error('No "EntityClass" specified for this table');
-            }
-            if (this.data.baseData.edit) {
-                this.data.baseData.edit(new this.data.baseData.EntityClass(entity));
-            }
-            else {
-                this.editDefault(new this.data.baseData.EntityClass(entity));
-            }
+        if (!(this.data.baseData.allowUpdate(entity) || this.data.baseData.allowRead(entity))) {
+            return;
+        }
+        if (!this.data.baseData.EntityClass) {
+            throw new Error('No "EntityClass" specified for this table');
+        }
+        if (this.data.baseData.edit) {
+            this.data.baseData.edit(new this.data.baseData.EntityClass(entity));
+        }
+        else {
+            void this.editDefault(new this.data.baseData.EntityClass(entity));
         }
     }
-    editDefault(entity) {
+    async editDefault(entity) {
         const inputDialogData = {
             entity: entity,
             EntityServiceClass: this.data.baseData.EntityServiceClass,
+            allowUpdate: this.data.baseData.allowUpdate,
             allowDelete: this.data.baseData.allowDelete,
             editDialogData: this.data.editDialogData
         };
         const dialogData = new EditEntityDialogDataBuilder(inputDialogData).getResult();
-        firstValueFrom(this.dialog.open(NgxMatEntityEditDialogComponent, {
+        const res = await firstValueFrom(this.dialog.open(NgxMatEntityEditDialogComponent, {
             data: dialogData,
             minWidth: '60%',
             autoFocus: false,
             restoreFocus: false
-        }).afterClosed()).then((res) => {
-            if (res === 0) {
-                const data = this.dataSource.data;
-                data[this.dataSource.data.findIndex((e) => e[this.entityService.idKey] === entity[this.entityService.idKey])] = entity;
-                this.dataSource.data = data;
-                this.selection.clear();
-            }
-        });
+        }).afterClosed());
+        if (res === 0) {
+            const data = this.dataSource.data;
+            data[this.dataSource.data.findIndex((e) => e[this.entityService.idKey] === entity[this.entityService.idKey])] = entity;
+            this.dataSource.data = data;
+            this.selection.clear();
+        }
     }
     /**
      * Creates a new Entity. This either calls the create-Method provided by the user or uses a default create-dialog.
@@ -2023,7 +3548,7 @@ class NgxMatEntityTableComponent {
      * @throws When no EntityClass was provided, as a new call is needed to initialize metadata.
      */
     createEntity() {
-        if (this.data.baseData.allowCreate) {
+        if (this.data.baseData.allowCreate()) {
             if (!this.data.baseData.EntityClass) {
                 throw new Error('No "EntityClass" specified for this table');
             }
@@ -2056,7 +3581,8 @@ class NgxMatEntityTableComponent {
      */
     runMultiAction(action) {
         if (!action.requireConfirmDialog || !action.requireConfirmDialog(this.selection.selected)) {
-            return this.confirmRunMultiAction(action);
+            this.confirmRunMultiAction(action);
+            return;
         }
         const dialogData = new ConfirmDialogDataBuilder(action.confirmDialogData)
             .withDefault('text', [`Do you really want to run this action on ${this.selection.selected.length} entries?`])
@@ -2099,7 +3625,7 @@ class NgxMatEntityTableComponent {
             this.selection.clear();
         }
         else {
-            this.dataSource.data.forEach((row) => this.selection.select(row));
+            this.dataSource.data.forEach(row => this.selection.select(row));
         }
     }
     /**
@@ -2128,10 +3654,10 @@ class NgxMatEntityTableComponent {
     }
 }
 NgxMatEntityTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityTableComponent, deps: [{ token: i1.MatDialog }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-NgxMatEntityTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NgxMatEntityTableComponent, selector: "ngx-mat-entity-table", inputs: { tableData: "tableData" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }, { propertyName: "filter", first: true, predicate: ["filter"], descendants: true, static: true }], ngImport: i0, template: "<h1 class=\"title\">{{data.baseData.title}}</h1>\n\n<div class=\"row\">\n    <mat-form-field class=\"col-lg-8 col-md-6 col-sm-12\">\n        <mat-label>{{data.baseData.searchLabel}}</mat-label>\n        <input matInput (keyup)=\"applyFilter($event)\" />\n    </mat-form-field>\n    <div\n        *ngIf=\"data.baseData.multiSelectActions.length\"\n        [class.col-lg-2]=\"data.baseData.allowCreate\"\n        [class.col-lg-4]=\"!data.baseData.allowCreate\"\n        [class.col-md-3]=\"data.baseData.allowCreate\"\n        [class.col-md-6]=\"!data.baseData.allowCreate\"\n        [class.col-sm-6]=\"data.baseData.allowCreate\"\n        [class.col-sm-12]=\"!data.baseData.allowCreate\"\n    >\n        <button class=\"actions-button\" [matMenuTriggerFor]=\"menu\" mat-raised-button>\n            {{data.baseData.multiSelectLabel}}\n        </button>\n    </div>\n    <mat-menu #menu=\"matMenu\">\n        <button *ngFor=\"let action of data.baseData.multiSelectActions\" [disabled]=\"multiActionDisabled(action)\" (click)=\"runMultiAction(action)\" mat-menu-item>\n            {{action.displayName}}\n        </button>\n    </mat-menu>\n\n    <div\n        *ngIf=\"data.baseData.allowCreate\"\n        [class.col-lg-2]=\"data.baseData.multiSelectActions.length\"\n        [class.col-lg-4]=\"!data.baseData.multiSelectActions.length\"\n        [class.col-md-3]=\"data.baseData.multiSelectActions.length\"\n        [class.col-md-6]=\"!data.baseData.multiSelectActions.length\"\n        [class.col-sm-6]=\"data.baseData.multiSelectActions.length\"\n        [class.col-sm-12]=\"!data.baseData.multiSelectActions.length\"\n    >\n        <button class=\"create-button\" (click)=\"createEntity()\" mat-raised-button>\n            {{data.baseData.createButtonLabel}}\n        </button>\n    </div>\n</div>\n\n<div class=\"mat-elevation-z8\">\n    <mat-table *ngIf=\"dataSource\" [dataSource]=\"dataSource\" matSort>\n        <!-- select Column -->\n        <ng-container matColumnDef=\"select\">\n            <mat-header-cell *matHeaderCellDef>\n                <mat-checkbox (change)=\"$event ? masterToggle() : null\" [checked]=\"selection.hasValue() && isAllSelected()\" [indeterminate]=\"selection.hasValue() && !isAllSelected()\"> </mat-checkbox>\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let module\" class=\"module\">\n                <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(module) : null\" [checked]=\"selection.isSelected(module)\"> </mat-checkbox>\n            </mat-cell>\n        </ng-container>\n\n        <ng-container *ngFor=\"let dCol of data.baseData.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n            <mat-header-cell *matHeaderCellDef mat-sort-header>\n                {{dCol.displayName}}\n            </mat-header-cell>\n            <mat-cell class=\"entity\" [class.enabled]=\"data.baseData.allowEdit(entity)\" (click)=\"editEntity(entity)\" *matCellDef=\"let entity\">\n                {{dCol.value(entity)}}\n            </mat-cell>\n        </ng-container>\n\n        <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n        <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n    </mat-table>\n\n    <mat-paginator *ngIf=\"dataSource\" id=\"paginator\" [length]=\"dataSource.filteredData.length\" [pageIndex]=\"0\" [pageSize]=\"10\" [pageSizeOptions]=\"[5, 10, 25, 50]\"> </mat-paginator>\n</div>\n", styles: [".title{text-align:center}button{width:100%}.mat-column-select{flex:0 0 75px}.enabled:hover{cursor:pointer}@media (max-width: 767px){.actions-button,.create-button{margin-bottom:15px}}\n"], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i4$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i6.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { type: i7$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }], directives: [{ type: i2.MatLabel, selector: "mat-label" }, { type: i13.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i12.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i9.MatCellDef, selector: "[matCellDef]" }, { type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }] });
+NgxMatEntityTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NgxMatEntityTableComponent, selector: "ngx-mat-entity-table", inputs: { tableData: "tableData" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }, { propertyName: "filter", first: true, predicate: ["filter"], descendants: true, static: true }], ngImport: i0, template: "<h1 class=\"title\">{{data.baseData.title}}</h1>\n\n<div class=\"row\">\n    <mat-form-field class=\"col-lg-8 col-md-6 col-sm-12\">\n        <mat-label>{{data.baseData.searchLabel}}</mat-label>\n        <input matInput (keyup)=\"applyFilter($event)\">\n    </mat-form-field>\n    <div\n        *ngIf=\"data.baseData.multiSelectActions.length\"\n        [class.col-lg-2]=\"data.baseData.allowCreate()\"\n        [class.col-lg-4]=\"!data.baseData.allowCreate()\"\n        [class.col-md-3]=\"data.baseData.allowCreate()\"\n        [class.col-md-6]=\"!data.baseData.allowCreate()\"\n        [class.col-sm-6]=\"data.baseData.allowCreate()\"\n        [class.col-sm-12]=\"!data.baseData.allowCreate()\"\n    >\n        <button class=\"actions-button\" [matMenuTriggerFor]=\"menu\" mat-raised-button>\n            {{data.baseData.multiSelectLabel}}\n        </button>\n    </div>\n    <mat-menu #menu=\"matMenu\">\n        <button *ngFor=\"let action of data.baseData.multiSelectActions\" [disabled]=\"multiActionDisabled(action)\" (click)=\"runMultiAction(action)\" mat-menu-item>\n            {{action.displayName}}\n        </button>\n    </mat-menu>\n\n    <div\n        *ngIf=\"data.baseData.allowCreate()\"\n        [class.col-lg-2]=\"data.baseData.multiSelectActions.length\"\n        [class.col-lg-4]=\"!data.baseData.multiSelectActions.length\"\n        [class.col-md-3]=\"data.baseData.multiSelectActions.length\"\n        [class.col-md-6]=\"!data.baseData.multiSelectActions.length\"\n        [class.col-sm-6]=\"data.baseData.multiSelectActions.length\"\n        [class.col-sm-12]=\"!data.baseData.multiSelectActions.length\"\n    >\n        <button class=\"create-button\" (click)=\"createEntity()\" mat-raised-button>\n            {{data.baseData.createButtonLabel}}\n        </button>\n    </div>\n</div>\n\n<div class=\"mat-elevation-z8\">\n    <mat-table *ngIf=\"dataSource\" [dataSource]=\"dataSource\" matSort>\n        <!-- select Column -->\n        <ng-container matColumnDef=\"select\">\n            <mat-header-cell *matHeaderCellDef>\n                <mat-checkbox (change)=\"$event ? masterToggle() : null\" [checked]=\"selection.hasValue() && isAllSelected()\" [indeterminate]=\"selection.hasValue() && !isAllSelected()\"> </mat-checkbox>\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let module\" class=\"module\">\n                <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(module) : null\" [checked]=\"selection.isSelected(module)\"> </mat-checkbox>\n            </mat-cell>\n        </ng-container>\n\n        <ng-container *ngFor=\"let dCol of data.baseData.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n            <mat-header-cell *matHeaderCellDef mat-sort-header>\n                {{dCol.displayName}}\n            </mat-header-cell>\n            <mat-cell class=\"entity\" [class.enabled]=\"data.baseData.allowUpdate(entity) || data.baseData.allowRead(entity)\" (click)=\"editEntity(entity)\" *matCellDef=\"let entity\">\n                {{dCol.value(entity)}}\n            </mat-cell>\n        </ng-container>\n\n        <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n        <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n    </mat-table>\n\n    <mat-paginator *ngIf=\"dataSource\" id=\"paginator\" [length]=\"dataSource.filteredData.length\" [pageIndex]=\"0\" [pageSize]=\"10\" [pageSizeOptions]=\"[5, 10, 25, 50]\"> </mat-paginator>\n</div>\n", styles: [".title{text-align:center}button{width:100%}.mat-column-select{flex:0 0 75px}.enabled:hover{cursor:pointer}@media (max-width: 767px){.actions-button,.create-button{margin-bottom:15px}}\n"], components: [{ type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4$3.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i4$3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: i4$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i4$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i4$2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { type: i7.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }], directives: [{ type: i1$1.MatLabel, selector: "mat-label" }, { type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i4$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i4$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i4$2.MatCellDef, selector: "[matCellDef]" }, { type: i4$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i4$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i4$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-mat-entity-table', template: "<h1 class=\"title\">{{data.baseData.title}}</h1>\n\n<div class=\"row\">\n    <mat-form-field class=\"col-lg-8 col-md-6 col-sm-12\">\n        <mat-label>{{data.baseData.searchLabel}}</mat-label>\n        <input matInput (keyup)=\"applyFilter($event)\" />\n    </mat-form-field>\n    <div\n        *ngIf=\"data.baseData.multiSelectActions.length\"\n        [class.col-lg-2]=\"data.baseData.allowCreate\"\n        [class.col-lg-4]=\"!data.baseData.allowCreate\"\n        [class.col-md-3]=\"data.baseData.allowCreate\"\n        [class.col-md-6]=\"!data.baseData.allowCreate\"\n        [class.col-sm-6]=\"data.baseData.allowCreate\"\n        [class.col-sm-12]=\"!data.baseData.allowCreate\"\n    >\n        <button class=\"actions-button\" [matMenuTriggerFor]=\"menu\" mat-raised-button>\n            {{data.baseData.multiSelectLabel}}\n        </button>\n    </div>\n    <mat-menu #menu=\"matMenu\">\n        <button *ngFor=\"let action of data.baseData.multiSelectActions\" [disabled]=\"multiActionDisabled(action)\" (click)=\"runMultiAction(action)\" mat-menu-item>\n            {{action.displayName}}\n        </button>\n    </mat-menu>\n\n    <div\n        *ngIf=\"data.baseData.allowCreate\"\n        [class.col-lg-2]=\"data.baseData.multiSelectActions.length\"\n        [class.col-lg-4]=\"!data.baseData.multiSelectActions.length\"\n        [class.col-md-3]=\"data.baseData.multiSelectActions.length\"\n        [class.col-md-6]=\"!data.baseData.multiSelectActions.length\"\n        [class.col-sm-6]=\"data.baseData.multiSelectActions.length\"\n        [class.col-sm-12]=\"!data.baseData.multiSelectActions.length\"\n    >\n        <button class=\"create-button\" (click)=\"createEntity()\" mat-raised-button>\n            {{data.baseData.createButtonLabel}}\n        </button>\n    </div>\n</div>\n\n<div class=\"mat-elevation-z8\">\n    <mat-table *ngIf=\"dataSource\" [dataSource]=\"dataSource\" matSort>\n        <!-- select Column -->\n        <ng-container matColumnDef=\"select\">\n            <mat-header-cell *matHeaderCellDef>\n                <mat-checkbox (change)=\"$event ? masterToggle() : null\" [checked]=\"selection.hasValue() && isAllSelected()\" [indeterminate]=\"selection.hasValue() && !isAllSelected()\"> </mat-checkbox>\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let module\" class=\"module\">\n                <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(module) : null\" [checked]=\"selection.isSelected(module)\"> </mat-checkbox>\n            </mat-cell>\n        </ng-container>\n\n        <ng-container *ngFor=\"let dCol of data.baseData.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n            <mat-header-cell *matHeaderCellDef mat-sort-header>\n                {{dCol.displayName}}\n            </mat-header-cell>\n            <mat-cell class=\"entity\" [class.enabled]=\"data.baseData.allowEdit(entity)\" (click)=\"editEntity(entity)\" *matCellDef=\"let entity\">\n                {{dCol.value(entity)}}\n            </mat-cell>\n        </ng-container>\n\n        <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n        <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n    </mat-table>\n\n    <mat-paginator *ngIf=\"dataSource\" id=\"paginator\" [length]=\"dataSource.filteredData.length\" [pageIndex]=\"0\" [pageSize]=\"10\" [pageSizeOptions]=\"[5, 10, 25, 50]\"> </mat-paginator>\n</div>\n", styles: [".title{text-align:center}button{width:100%}.mat-column-select{flex:0 0 75px}.enabled:hover{cursor:pointer}@media (max-width: 767px){.actions-button,.create-button{margin-bottom:15px}}\n"] }]
+            args: [{ selector: 'ngx-mat-entity-table', template: "<h1 class=\"title\">{{data.baseData.title}}</h1>\n\n<div class=\"row\">\n    <mat-form-field class=\"col-lg-8 col-md-6 col-sm-12\">\n        <mat-label>{{data.baseData.searchLabel}}</mat-label>\n        <input matInput (keyup)=\"applyFilter($event)\">\n    </mat-form-field>\n    <div\n        *ngIf=\"data.baseData.multiSelectActions.length\"\n        [class.col-lg-2]=\"data.baseData.allowCreate()\"\n        [class.col-lg-4]=\"!data.baseData.allowCreate()\"\n        [class.col-md-3]=\"data.baseData.allowCreate()\"\n        [class.col-md-6]=\"!data.baseData.allowCreate()\"\n        [class.col-sm-6]=\"data.baseData.allowCreate()\"\n        [class.col-sm-12]=\"!data.baseData.allowCreate()\"\n    >\n        <button class=\"actions-button\" [matMenuTriggerFor]=\"menu\" mat-raised-button>\n            {{data.baseData.multiSelectLabel}}\n        </button>\n    </div>\n    <mat-menu #menu=\"matMenu\">\n        <button *ngFor=\"let action of data.baseData.multiSelectActions\" [disabled]=\"multiActionDisabled(action)\" (click)=\"runMultiAction(action)\" mat-menu-item>\n            {{action.displayName}}\n        </button>\n    </mat-menu>\n\n    <div\n        *ngIf=\"data.baseData.allowCreate()\"\n        [class.col-lg-2]=\"data.baseData.multiSelectActions.length\"\n        [class.col-lg-4]=\"!data.baseData.multiSelectActions.length\"\n        [class.col-md-3]=\"data.baseData.multiSelectActions.length\"\n        [class.col-md-6]=\"!data.baseData.multiSelectActions.length\"\n        [class.col-sm-6]=\"data.baseData.multiSelectActions.length\"\n        [class.col-sm-12]=\"!data.baseData.multiSelectActions.length\"\n    >\n        <button class=\"create-button\" (click)=\"createEntity()\" mat-raised-button>\n            {{data.baseData.createButtonLabel}}\n        </button>\n    </div>\n</div>\n\n<div class=\"mat-elevation-z8\">\n    <mat-table *ngIf=\"dataSource\" [dataSource]=\"dataSource\" matSort>\n        <!-- select Column -->\n        <ng-container matColumnDef=\"select\">\n            <mat-header-cell *matHeaderCellDef>\n                <mat-checkbox (change)=\"$event ? masterToggle() : null\" [checked]=\"selection.hasValue() && isAllSelected()\" [indeterminate]=\"selection.hasValue() && !isAllSelected()\"> </mat-checkbox>\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let module\" class=\"module\">\n                <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(module) : null\" [checked]=\"selection.isSelected(module)\"> </mat-checkbox>\n            </mat-cell>\n        </ng-container>\n\n        <ng-container *ngFor=\"let dCol of data.baseData.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n            <mat-header-cell *matHeaderCellDef mat-sort-header>\n                {{dCol.displayName}}\n            </mat-header-cell>\n            <mat-cell class=\"entity\" [class.enabled]=\"data.baseData.allowUpdate(entity) || data.baseData.allowRead(entity)\" (click)=\"editEntity(entity)\" *matCellDef=\"let entity\">\n                {{dCol.value(entity)}}\n            </mat-cell>\n        </ng-container>\n\n        <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n        <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n    </mat-table>\n\n    <mat-paginator *ngIf=\"dataSource\" id=\"paginator\" [length]=\"dataSource.filteredData.length\" [pageIndex]=\"0\" [pageSize]=\"10\" [pageSizeOptions]=\"[5, 10, 25, 50]\"> </mat-paginator>\n</div>\n", styles: [".title{text-align:center}button{width:100%}.mat-column-select{flex:0 0 75px}.enabled:hover{cursor:pointer}@media (max-width: 767px){.actions-button,.create-button{margin-bottom:15px}}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.MatDialog }, { type: i0.Injector }]; }, propDecorators: { tableData: [{
                 type: Input
             }], paginator: [{
@@ -2265,16 +3791,83 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
 class EntityArrayDecoratorConfigInternal extends PropertyDecoratorConfigInternal {
     constructor(data) {
         super(data);
-        this.createInline = data.createInline != undefined ? data.createInline : true;
-        this.displayStyle = data.displayStyle;
+        this.createInline = data.createInline ?? true;
         this.itemType = data.itemType;
+        this.allowDuplicates = data.allowDuplicates ?? false;
+        this.duplicatesErrorDialog = getDefaultDuplicateErrorDialogData(data);
         this.EntityClass = data.EntityClass;
         this.displayColumns = data.displayColumns;
-        this.createInline = data.createInline != undefined ? data.createInline : true;
-        this.missingErrorMessage = data.missingErrorMessage ? data.missingErrorMessage : 'Needs to contain at least one value';
-        this.defaultWidths = data.defaultWidths ? data.defaultWidths : [12, 12, 12];
-        this.addButtonLabel = data.addButtonLabel ? data.addButtonLabel : 'Add';
-        this.removeButtonLabel = data.removeButtonLabel ? data.removeButtonLabel : 'Remove';
+        this.createInline = data.createInline ?? true;
+        this.missingErrorMessage = data.missingErrorMessage ?? 'Needs to contain at least one value';
+        this.defaultWidths = data.defaultWidths ?? [12, 12, 12];
+        this.addButtonLabel = data.addButtonLabel ?? 'Add';
+        this.removeButtonLabel = data.removeButtonLabel ?? 'Remove';
+    }
+}
+/**
+ * The internal DateArrayDecoratorConfig. Sets default values.
+ */
+class DateArrayDecoratorConfigInternal extends PropertyDecoratorConfigInternal {
+    constructor(data) {
+        super(data);
+        this.itemType = data.itemType;
+        this.allowDuplicates = data.allowDuplicates ?? false;
+        this.duplicatesErrorDialog = getDefaultDuplicateErrorDialogData(data);
+        this.displayColumns = data.displayColumns;
+        this.defaultWidths = data.defaultWidths ?? [12, 12, 12];
+        this.addButtonLabel = data.addButtonLabel ?? 'Add';
+        this.removeButtonLabel = data.removeButtonLabel ?? 'Remove';
+        this.missingErrorMessage = data.missingErrorMessage ?? 'Needs to contain at least one value';
+        this.min = data.min;
+        this.max = data.max;
+        this.filter = data.filter;
+    }
+}
+/**
+ * The internal DateTimeArrayDecoratorConfig. Sets default values.
+ */
+class DateTimeArrayDecoratorConfigInternal extends PropertyDecoratorConfigInternal {
+    constructor(data) {
+        super(data);
+        this.itemType = data.itemType;
+        this.allowDuplicates = data.allowDuplicates ?? false;
+        this.duplicatesErrorDialog = getDefaultDuplicateErrorDialogData(data);
+        this.displayColumns = data.displayColumns;
+        this.defaultWidths = data.defaultWidths ?? [12, 12, 12];
+        this.addButtonLabel = data.addButtonLabel ?? 'Add';
+        this.removeButtonLabel = data.removeButtonLabel ?? 'Remove';
+        this.missingErrorMessage = data.missingErrorMessage ?? 'Needs to contain at least one value';
+        this.times = data.times ?? DateUtilities.getDefaultTimes();
+        this.timeDisplayName = data.timeDisplayName ?? 'Time';
+        this.minDate = data.minDate;
+        this.maxDate = data.maxDate;
+        this.filterDate = data.filterDate;
+        this.minTime = data.minTime;
+        this.maxTime = data.maxTime;
+        this.filterTime = data.filterTime;
+    }
+}
+/**
+ * The internal DateRangeArrayDecoratorConfig. Sets default values.
+ */
+class DateRangeArrayDecoratorConfigInternal extends PropertyDecoratorConfigInternal {
+    constructor(data) {
+        super(data);
+        this.itemType = data.itemType;
+        this.allowDuplicates = data.allowDuplicates ?? false;
+        this.duplicatesErrorDialog = getDefaultDuplicateErrorDialogData(data);
+        this.displayColumns = data.displayColumns;
+        this.defaultWidths = data.defaultWidths ?? [12, 12, 12];
+        this.addButtonLabel = data.addButtonLabel ?? 'Add';
+        this.removeButtonLabel = data.removeButtonLabel ?? 'Remove';
+        this.missingErrorMessage = data.missingErrorMessage ?? 'Needs to contain at least one value';
+        this.placeholderStart = data.placeholderStart ?? 'Start';
+        this.placeholderEnd = data.placeholderEnd ?? 'End';
+        this.minStart = data.minStart;
+        this.maxStart = data.maxStart;
+        this.minEnd = data.minEnd;
+        this.maxEnd = data.maxEnd;
+        this.filter = data.filter;
     }
 }
 /**
@@ -2283,13 +3876,14 @@ class EntityArrayDecoratorConfigInternal extends PropertyDecoratorConfigInternal
 class StringChipsArrayDecoratorConfigInternal extends PropertyDecoratorConfigInternal {
     constructor(data) {
         super(data);
-        this.deleteIcon = data.deleteIcon ? data.deleteIcon : 'fas fa-circle-minus';
-        this.displayStyle = data.displayStyle;
+        this.deleteIcon = data.deleteIcon ?? 'fas fa-circle-minus';
         this.itemType = data.itemType;
+        this.allowDuplicates = data.allowDuplicates ?? false;
+        this.duplicatesErrorDialog = getDefaultDuplicateErrorDialogData(data);
         this.maxLength = data.maxLength;
         this.minLength = data.minLength;
         this.regex = data.regex;
-        this.defaultWidths = data.defaultWidths ? data.defaultWidths : [6, 12, 12];
+        this.defaultWidths = data.defaultWidths ?? [6, 12, 12];
     }
 }
 /**
@@ -2299,15 +3893,34 @@ class AutocompleteStringChipsArrayDecoratorConfigInternal extends PropertyDecora
     constructor(data) {
         super(data);
         this.autocompleteValues = data.autocompleteValues;
-        this.deleteIcon = data.deleteIcon ? data.deleteIcon : 'fas fa-circle-minus';
-        this.displayStyle = data.displayStyle;
+        this.deleteIcon = data.deleteIcon ?? 'fas fa-circle-minus';
         this.itemType = data.itemType;
+        this.allowDuplicates = data.allowDuplicates ?? false;
+        this.duplicatesErrorDialog = getDefaultDuplicateErrorDialogData(data);
         this.maxLength = data.maxLength;
         this.minLength = data.minLength;
         this.regex = data.regex;
-        this.defaultWidths = data.defaultWidths ? data.defaultWidths : [6, 12, 12];
+        this.defaultWidths = data.defaultWidths ?? [6, 12, 12];
     }
 }
+/**
+ * Gets the default dialog data for the error dialog to display when the user tries to add a duplicate value.
+ *
+ * @param data - The Array Decorator data.
+ * @returns The dialog data with set default values.
+ */
+function getDefaultDuplicateErrorDialogData(data) {
+    return {
+        type: data.duplicatesErrorDialog?.type ?? 'info-only',
+        // eslint-disable-next-line max-len
+        text: data.duplicatesErrorDialog?.text ?? ['Adding duplicate entries to the array is not allowed.'],
+        title: data.duplicatesErrorDialog?.title ?? 'Error adding duplicate item',
+        confirmButtonLabel: data.duplicatesErrorDialog?.confirmButtonLabel,
+        cancelButtonLabel: data.duplicatesErrorDialog?.cancelButtonLabel,
+        requireConfirmation: data.duplicatesErrorDialog?.requireConfirmation,
+        confirmationText: data.duplicatesErrorDialog?.confirmationText
+    };
+}
 
 /**
  * Decorator for setting and getting array property metadata.
@@ -2320,6 +3933,12 @@ function array(metadata) {
     switch (metadata.itemType) {
         case DecoratorTypes.OBJECT:
             return baseProperty(new EntityArrayDecoratorConfigInternal(metadata), DecoratorTypes.ARRAY);
+        case DecoratorTypes.DATE:
+            return baseProperty(new DateArrayDecoratorConfigInternal(metadata), DecoratorTypes.ARRAY_DATE);
+        case DecoratorTypes.DATE_TIME:
+            return baseProperty(new DateTimeArrayDecoratorConfigInternal(metadata), DecoratorTypes.ARRAY_DATE_TIME);
+        case DecoratorTypes.DATE_RANGE:
+            return baseProperty(new DateRangeArrayDecoratorConfigInternal(metadata), DecoratorTypes.ARRAY_DATE_RANGE);
         case DecoratorTypes.STRING:
             return baseProperty(new StringChipsArrayDecoratorConfigInternal(metadata), DecoratorTypes.ARRAY_STRING_CHIPS);
         case DecoratorTypes.STRING_AUTOCOMPLETE:
@@ -2360,7 +3979,7 @@ class CheckboxBooleanDecoratorConfigInternal extends PropertyDecoratorConfigInte
     constructor(data) {
         super(data);
         this.displayStyle = data.displayStyle;
-        this.required = data.required === undefined ? false : data.required;
+        this.required = data.required ?? false;
     }
 }
 /**
@@ -2370,7 +3989,7 @@ class ToggleBooleanDecoratorConfigInternal extends PropertyDecoratorConfigIntern
     constructor(data) {
         super(data);
         this.displayStyle = data.displayStyle;
-        this.required = data.required === undefined ? false : data.required;
+        this.required = data.required ?? false;
     }
 }
 
@@ -2398,6 +4017,76 @@ function boolean(metadata) {
 class BooleanDecoratorConfig extends PropertyDecoratorConfig {
 }
 
+/**
+ * The internal DefaultDateDecoratorConfig. Sets default values.
+ */
+class DefaultDateDecoratorConfigInternal extends PropertyDecoratorConfigInternal {
+    constructor(data) {
+        super(data);
+        this.displayStyle = data.displayStyle;
+        this.max = data.max;
+        this.min = data.min;
+        this.filter = data.filter;
+    }
+}
+/**
+ * The internal DateRangeDateDecoratorConfig. Sets default values.
+ */
+class DateRangeDateDecoratorConfigInternal extends PropertyDecoratorConfigInternal {
+    constructor(data) {
+        super(data);
+        this.displayStyle = data.displayStyle;
+        this.minStart = data.minStart;
+        this.maxStart = data.maxStart;
+        this.minEnd = data.minEnd;
+        this.maxEnd = data.maxEnd;
+        this.filter = data.filter;
+        this.placeholderStart = data.placeholderStart ?? 'Start';
+        this.placeholderEnd = data.placeholderEnd ?? 'End';
+    }
+}
+/**
+ * The internal DateTimeDateDecoratorConfig. Sets default values.
+ */
+class DateTimeDateDecoratorConfigInternal extends PropertyDecoratorConfigInternal {
+    constructor(data) {
+        super(data);
+        this.displayStyle = data.displayStyle;
+        this.times = data.times ?? DateUtilities.getDefaultTimes();
+        this.timeDisplayName = data.timeDisplayName ?? 'Time';
+        this.minDate = data.minDate;
+        this.maxDate = data.maxDate;
+        this.filterDate = data.filterDate;
+        this.minTime = data.minTime;
+        this.maxTime = data.maxTime;
+        this.filterTime = data.filterTime;
+    }
+}
+
+/**
+ * Decorator for setting and getting date property metadata.
+ *
+ * @param metadata - The metadata of the date property.
+ * @returns The method that defines the metadata.
+ */
+function date(metadata) {
+    if (metadata.displayStyle === 'date') {
+        return baseProperty(new DefaultDateDecoratorConfigInternal(metadata), DecoratorTypes.DATE);
+    }
+    else if (metadata.displayStyle === 'datetime') {
+        return baseProperty(new DateTimeDateDecoratorConfigInternal(metadata), DecoratorTypes.DATE_TIME);
+    }
+    else {
+        return baseProperty(new DateRangeDateDecoratorConfigInternal(metadata), DecoratorTypes.DATE_RANGE);
+    }
+}
+
+/**
+ * Definition for the @date metadata.
+ */
+class DateDecoratorConfig extends PropertyDecoratorConfig {
+}
+
 /**
  * The internal DefaultNumberDecoratorConfig. Sets default values.
  */
@@ -2419,6 +4108,29 @@ class DropdownNumberDecoratorConfigInternal extends PropertyDecoratorConfigInter
         this.dropdownValues = data.dropdownValues;
     }
 }
+/**
+ * The internal SliderNumberDecoratorConfig. Sets default values.
+ */
+class SliderNumberDecoratorConfigInternal extends PropertyDecoratorConfigInternal {
+    constructor(data) {
+        super(data);
+        this.displayStyle = data.displayStyle;
+        this.max = data.max;
+        this.min = data.min;
+        this.step = data.step;
+        this.formatThumbLabelValue = data.formatThumbLabelValue ?? defaultFormatThumbLabelValue;
+        this.tickInterval = data.tickInterval;
+    }
+}
+/**
+ * The default function to format values for the number slider thumb label.
+ *
+ * @param value - The value of the slider.
+ * @returns Just the value without any formatting done.
+ */
+function defaultFormatThumbLabelValue(value) {
+    return value;
+}
 
 /**
  * Decorator for setting and getting number property metadata.
@@ -2427,11 +4139,13 @@ class DropdownNumberDecoratorConfigInternal extends PropertyDecoratorConfigInter
  * @returns The method that defines the metadata.
  */
 function number(metadata) {
-    if (metadata.displayStyle === 'dropdown') {
-        return baseProperty(new DropdownNumberDecoratorConfigInternal(metadata), DecoratorTypes.NUMBER_DROPDOWN);
-    }
-    else {
-        return baseProperty(new DefaultNumberDecoratorConfigInternal(metadata), DecoratorTypes.NUMBER);
+    switch (metadata.displayStyle) {
+        case 'dropdown':
+            return baseProperty(new DropdownNumberDecoratorConfigInternal(metadata), DecoratorTypes.NUMBER_DROPDOWN);
+        case 'slider':
+            return baseProperty(new SliderNumberDecoratorConfigInternal(metadata), DecoratorTypes.NUMBER_SLIDER);
+        default:
+            return baseProperty(new DefaultNumberDecoratorConfigInternal(metadata), DecoratorTypes.NUMBER);
     }
 }
 
@@ -2474,6 +4188,162 @@ class ObjectDecoratorConfig extends PropertyDecoratorConfig {
 class StringDecoratorConfig extends PropertyDecoratorConfig {
 }
 
+/**
+ * The internal DefaultFileDecoratorConfig. Sets default values.
+ */
+class DefaultFileDecoratorConfigInternal extends PropertyDecoratorConfigInternal {
+    constructor(data) {
+        super(data);
+        this.type = data.type;
+        this.preview = false;
+        this.multiple = data.multiple;
+        this.deleteIcon = data.deleteIcon ?? 'fas fa-circle-minus';
+        this.allowedMimeTypes = data.allowedMimeTypes ?? ['*'];
+        this.maxSize = data.maxSize ?? 10;
+        this.maxSizeTotal = data.maxSizeTotal ?? 100;
+        this.mimeTypeErrorDialog = data.mimeTypeErrorDialog ?? getDefaultMimeTypeErrorDialogData(data);
+        this.maxSizeErrorDialog = data.maxSizeErrorDialog ?? getDefaultMaxSizeErrorDialogData(data);
+        this.maxSizeTotalErrorDialog = data.maxSizeTotalErrorDialog ?? getDefaultMaxSizeTotalErrorDialogData(data);
+        this.dragAndDrop = data.dragAndDrop ?? data.multiple;
+    }
+}
+/**
+ * The internal ImageFileDecoratorConfig. Sets default values.
+ */
+class ImageFileDecoratorConfigInternal extends PropertyDecoratorConfigInternal {
+    constructor(data) {
+        super(data);
+        this.type = data.type;
+        this.allowedMimeTypes = data.allowedMimeTypes ?? ['image/*'];
+        this.multiple = data.multiple;
+        this.preview = data.preview ?? true;
+        this.deleteIcon = data.deleteIcon ?? 'fas fa-circle-minus';
+        this.maxSize = data.maxSize ?? 10;
+        this.maxSizeTotal = data.maxSizeTotal ?? 100;
+        this.mimeTypeErrorDialog = data.mimeTypeErrorDialog ?? getDefaultMimeTypeErrorDialogData(data);
+        this.maxSizeErrorDialog = data.maxSizeErrorDialog ?? getDefaultMaxSizeErrorDialogData(data);
+        this.maxSizeTotalErrorDialog = data.maxSizeTotalErrorDialog ?? getDefaultMaxSizeTotalErrorDialogData(data);
+        this.previewPlaceholderUrl = data.previewPlaceholderUrl;
+        this.dragAndDrop = data.dragAndDrop ?? data.multiple;
+    }
+}
+/**
+ * Gets the default dialog data for the error dialog to display
+ * when the user tries to add a file with a wrong type.
+ *
+ * @param data - The File Decorator data.
+ * @returns The dialog data with set default values.
+ */
+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,
+        cancelButtonLabel: data.mimeTypeErrorDialog?.cancelButtonLabel,
+        requireConfirmation: data.mimeTypeErrorDialog?.requireConfirmation,
+        confirmationText: data.mimeTypeErrorDialog?.confirmationText
+    };
+}
+/**
+ * Gets the default dialog data for the error dialog to display
+ * when the user tries to add a single file that is bigger than the allowed maxSize.
+ *
+ * @param data - The File Decorator data.
+ * @returns The dialog data with set default values.
+ */
+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,
+        cancelButtonLabel: data.mimeTypeErrorDialog?.cancelButtonLabel,
+        requireConfirmation: data.mimeTypeErrorDialog?.requireConfirmation,
+        confirmationText: data.mimeTypeErrorDialog?.confirmationText
+    };
+}
+/**
+ * Gets the default dialog data for the error dialog to display
+ * when the user tries to add a single file that is bigger than the allowed maxSize.
+ *
+ * @param data - The File Decorator data.
+ * @returns The dialog data with set default values.
+ */
+function getDefaultMaxSizeTotalErrorDialogData(data) {
+    return {
+        type: data.mimeTypeErrorDialog?.type ?? 'info-only',
+        // eslint-disable-next-line max-len
+        text: data.mimeTypeErrorDialog?.text ?? ['The size of all files combined is too big'],
+        title: data.mimeTypeErrorDialog?.title ?? (data.multiple ? 'Error adding files' : 'Error adding file'),
+        confirmButtonLabel: data.mimeTypeErrorDialog?.confirmButtonLabel,
+        cancelButtonLabel: data.mimeTypeErrorDialog?.cancelButtonLabel,
+        requireConfirmation: data.mimeTypeErrorDialog?.requireConfirmation,
+        confirmationText: data.mimeTypeErrorDialog?.confirmationText
+    };
+}
+
+/**
+ * Decorator for setting and getting file property metadata.
+ *
+ * @param metadata - The metadata of the file property.
+ * @returns The method that defines the metadata.
+ * @throws When an unknown metadata type was provided.
+ */
+function file(metadata) {
+    switch (metadata.type) {
+        case 'other':
+            return baseProperty(new DefaultFileDecoratorConfigInternal(metadata), DecoratorTypes.FILE_DEFAULT);
+        case 'image':
+            return baseProperty(new ImageFileDecoratorConfigInternal(metadata), DecoratorTypes.FILE_IMAGE);
+        default:
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-explicit-any
+            throw new Error(`Unknown metadata type ${metadata.type}`);
+    }
+}
+
+/**
+ * Definition for the @file metadata.
+ */
+class FileDecoratorConfig extends PropertyDecoratorConfig {
+}
+
+/**
+ * The default function to use for checking if the value is dirty.
+ *
+ * @param value - The current value.
+ * @param valuePriorChanges - The value before any changes.
+ * @returns Whether or not the provided value has been changed.
+ */
+function defaultIsEqual(value, valuePriorChanges) {
+    return LodashUtilities.isEqual(value, valuePriorChanges);
+}
+/**
+ * The internal config for the @custom decorator.
+ * Sets default values.
+ */
+class CustomDecoratorConfigInternal extends PropertyDecoratorConfigInternal {
+    constructor(data) {
+        super(data);
+        this.component = data.component;
+        this.isValid = data.isValid ?? (() => true);
+        this.isEqual = data.isEqual ?? defaultIsEqual;
+        this.customMetadata = data.customMetadata;
+    }
+}
+
+/**
+ * Decorator for setting and getting custom property metadata.
+ *
+ * @param metadata - The metadata of the custom property.
+ * @returns The method that defines the metadata.
+ */
+function custom(metadata) {
+    return baseProperty(new CustomDecoratorConfigInternal(metadata), DecoratorTypes.CUSTOM);
+}
+
 /**
  * Public API Surface of ngx-material-entity.
  */
@@ -2482,5 +4352,5 @@ class StringDecoratorConfig extends PropertyDecoratorConfig {
  * Generated bundle index. Do not edit.
  */
 
-export { DateUtilities, DecoratorTypes, Entity, EntityService, EntityUtilities, NgxMatEntityConfirmDialogComponent, NgxMatEntityConfirmDialogModule, NgxMatEntityCreateDialogComponent, NgxMatEntityCreateDialogModule, NgxMatEntityEditDialogComponent, NgxMatEntityEditDialogModule, NgxMatEntityInputComponent, NgxMatEntityInputModule, NgxMatEntityTableComponent, NgxMatEntityTableModule, array, boolean, getValidationErrorMessage, number, object, string };
+export { ArrayDecoratorConfig, DateUtilities, DecoratorTypes, Entity, EntityService, EntityUtilities, FileUtilities, NgxMatEntityBaseInputComponent, NgxMatEntityConfirmDialogComponent, NgxMatEntityConfirmDialogModule, NgxMatEntityCreateDialogComponent, NgxMatEntityCreateDialogModule, NgxMatEntityEditDialogComponent, NgxMatEntityEditDialogModule, NgxMatEntityInputComponent, NgxMatEntityInputModule, NgxMatEntityTableComponent, NgxMatEntityTableModule, array, boolean, custom, date, file, getValidationErrorMessage, number, object, string };
 //# sourceMappingURL=ngx-material-entity.mjs.map