ngx-material-entity 0.1.3 → 0.1.4

package/fesm2015/ngx-material-entity.mjs

@@ -1,7 +1,7 @@
 import 'reflect-metadata';
 import { __decorate, __metadata, __awaiter } from 'tslib';
 import { BehaviorSubject, firstValueFrom, Subject, takeUntil } from 'rxjs';
-import { isEqual, omit, omitBy, isNil, cloneDeep } from 'lodash';
+import { cloneDeep, isEqual, omit, omitBy, isNil } from 'lodash';
 import * as i0 from '@angular/core';
 import { Component, Inject, NgModule, Input, ViewChild } from '@angular/core';
 import * as i1 from '@angular/material/dialog';
@@ -10,9 +10,9 @@ import * as i6 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 i11 from '@angular/common';
+import * as i12 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i13 from '@angular/forms';
+import * as i14 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i9 from '@angular/material/table';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
@@ -28,9 +28,11 @@ import * as i7 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 i12 from '@angular/material/input';
+import * as i11 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 i14 from '@angular/cdk/text-field';
+import * as i15 from '@angular/cdk/text-field';
 import { MatIconModule } from '@angular/material/icon';
 import * as i7$1 from '@angular/material/paginator';
 import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
@@ -70,6 +72,9 @@ var DecoratorTypes;
     DecoratorTypes["ARRAY"] = "array";
     DecoratorTypes["ARRAY_STRING_CHIPS"] = "arrayStringChips";
     DecoratorTypes["ARRAY_STRING_AUTOCOMPLETE_CHIPS"] = "arrayStringAutocompleteChips";
+    DecoratorTypes["DATE"] = "date";
+    DecoratorTypes["DATE_RANGE"] = "dateRange";
+    DecoratorTypes["DATE_TIME"] = "dateTime";
 })(DecoratorTypes || (DecoratorTypes = {}));
 
 /**
@@ -179,7 +184,7 @@ function string(metadata) {
 }
 
 /**
- * The base Entity class.
+ * A base Entity class with a builtin id.
  */
 class Entity {
 }
@@ -195,7 +200,143 @@ __decorate([
     __metadata("design:type", String)
 ], Entity.prototype, "id", void 0);
 
-var _a;
+const DAY_IN_MS = 1000 * 60 * 60 * 24;
+/**
+ * Contains Helper Functions for handling date properties.
+ */
+class DateUtilities {
+    /**
+     * Gets the given value as a date value.
+     *
+     * @param value - The value to get as a date.
+     * @returns The given value as a date.
+     */
+    static asDate(value) {
+        return value;
+    }
+    /**
+     * Gets the default times used by the DateTime picker when nothing is specified by the user.
+     *
+     * @param format - The time format. Defaults to 24.
+     * @param minuteSteps - The steps from one time value to the next. Defaults to 30.
+     * @returns Times in the 24 hour format from 0:00 until 23:30 in 30 minute steps.
+     */
+    static getDefaultTimes(format = 24, minuteSteps = 30) {
+        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));
+            }
+        }
+        return res;
+    }
+    static getTimeDropdownValue(format, hour, minute) {
+        const displayHour = this.getFormattedHour(format, cloneDeep(hour));
+        const displayMinute = this.getFormattedMinute(format, hour, minute);
+        return {
+            displayName: `${displayHour}:${displayMinute}`,
+            value: {
+                hours: hour,
+                minutes: minute
+            }
+        };
+    }
+    static getFormattedHour(format, hour) {
+        if (format === 12 && hour > 12) {
+            hour -= 12;
+        }
+        return hour;
+    }
+    static getFormattedMinute(format, hour, minute) {
+        let res = `${minute}`;
+        if (format === 12) {
+            if (hour > 12) {
+                res = `${minute} PM`;
+            }
+            else {
+                res = `${minute} AM`;
+            }
+        }
+        if (minute.toString().length === 1) {
+            res = '0'.concat(res);
+        }
+        return res;
+    }
+    /**
+     * Gets the Time object from the given date.
+     *
+     * @param value - The date to get the time object from.
+     * @returns The Time object build from the date value.
+     */
+    static getTimeFromDate(value) {
+        if (!value) {
+            return {
+                hours: undefined,
+                minutes: undefined
+            };
+        }
+        else {
+            return {
+                hours: new Date(value).getHours(),
+                minutes: new Date(value).getMinutes()
+            };
+        }
+    }
+    /**
+     * Gets the dates between the two given gates. Does additional filtering based on the provided DateRange metadata.
+     *
+     * @param startDate - The start date.
+     * @param endDate - The end date.
+     * @param metadataDateRangeDate - The metadata.
+     * @returns All dates between the two provided dates. Includes start and end date.
+     */
+    static getDatesBetween(startDate, endDate, metadataDateRangeDate) {
+        const res = [];
+        while (startDate.getFullYear() < endDate.getFullYear()
+            || startDate.getMonth() < endDate.getMonth()
+            || startDate.getDate() <= endDate.getDate()) {
+            res.push(new Date(startDate));
+            startDate.setTime(startDate.getTime() + DAY_IN_MS);
+        }
+        if (metadataDateRangeDate.filter) {
+            return res.filter(d => { var _a; return (_a = metadataDateRangeDate.filter) === null || _a === void 0 ? void 0 : _a.call(metadataDateRangeDate, d); });
+        }
+        else {
+            return res;
+        }
+    }
+    /**
+     * 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 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) {
+        if (min) {
+            const minTime = min(date);
+            times = times.filter(t => !t.value
+                || t.value.hours > minTime.hours
+                || (t.value.hours === minTime.hours
+                    && t.value.minutes >= minTime.minutes));
+        }
+        if (max) {
+            const maxTime = max(date);
+            times = times.filter(t => !t.value
+                || t.value.hours < maxTime.hours
+                || (t.value.hours === maxTime.hours
+                    && t.value.minutes <= maxTime.minutes));
+        }
+        if (filter) {
+            times = times.filter(t => !t.value || filter(t.value));
+        }
+        return times;
+    }
+}
+
 /**
  * Contains HelperMethods around handling Entities and their property-metadata.
  */
@@ -293,7 +434,7 @@ class EntityUtilities {
                 case DecoratorTypes.OBJECT:
                     const objectMetadata = EntityUtilities.getPropertyMetadata(target, key, DecoratorTypes.OBJECT);
                     // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-                    value = new objectMetadata.type(value);
+                    value = new objectMetadata.EntityClass(value);
                     break;
                 case DecoratorTypes.ARRAY:
                     const inputArray = value;
@@ -323,7 +464,7 @@ class EntityUtilities {
      */
     static isEntityValid(entity, omit) {
         for (const key in entity) {
-            if (!this.isPropertyValid(entity, key, omit)) {
+            if (!EntityUtilities.isPropertyValid(entity, key, omit)) {
                 return false;
             }
         }
@@ -339,14 +480,8 @@ class EntityUtilities {
      * @throws Throws when it extracts an unknown metadata type.
      */
     static isPropertyValid(entity, key, omit) {
-        const type = this.getPropertyType(entity, key);
-        const metadata = this.getPropertyMetadata(entity, key, type);
-        const metadataDefaultString = metadata;
-        const metadataTextboxString = metadata;
-        const metadataDefaultNumber = metadata;
-        const objectProperty = entity[key];
-        const metadataEntityArray = metadata;
-        const arrayItems = entity[key];
+        const type = EntityUtilities.getPropertyType(entity, key);
+        const metadata = EntityUtilities.getPropertyMetadata(entity, key, type);
         if (metadata.omitForCreate && omit === 'create') {
             return true;
         }
@@ -365,42 +500,32 @@ class EntityUtilities {
                 return true;
             case DecoratorTypes.STRING:
             case DecoratorTypes.STRING_AUTOCOMPLETE:
-                if (metadataDefaultString.maxLength
-                    && entity[key].length > metadataDefaultString.maxLength) {
-                    return false;
-                }
-                if (metadataDefaultString.minLength
-                    && entity[key].length < metadataDefaultString.minLength) {
-                    return false;
-                }
-                if (metadataDefaultString.regex
-                    && !entity[key].match(metadataDefaultString.regex)) {
+                const entityString = entity[key];
+                const stringMetadata = metadata;
+                if (!this.isStringValid(entityString, stringMetadata)) {
                     return false;
                 }
                 break;
             case DecoratorTypes.STRING_TEXTBOX:
-                if (metadataTextboxString.maxLength
-                    && entity[key].length > metadataTextboxString.maxLength) {
-                    return false;
-                }
-                if (metadataTextboxString.minLength
-                    && entity[key].length < metadataTextboxString.minLength) {
+                const entityTextbox = entity[key];
+                const textboxMetadata = metadata;
+                if (!this.isTextboxValid(entityTextbox, textboxMetadata)) {
                     return false;
                 }
                 break;
             case DecoratorTypes.NUMBER_DROPDOWN:
                 return true;
             case DecoratorTypes.NUMBER:
-                if (metadataDefaultNumber.max && entity[key] > metadataDefaultNumber.max) {
-                    return false;
-                }
-                if (metadataDefaultNumber.min && entity[key] < metadataDefaultNumber.min) {
+                const entityNumber = entity[key];
+                const numberMetadata = metadata;
+                if (!this.isNumberValid(entityNumber, numberMetadata)) {
                     return false;
                 }
                 break;
             case DecoratorTypes.OBJECT:
-                for (const parameterKey in objectProperty) {
-                    if (!this.isPropertyValid(objectProperty, parameterKey, omit)) {
+                const entityObject = entity[key];
+                for (const parameterKey in entityObject) {
+                    if (!EntityUtilities.isPropertyValid(entityObject, parameterKey, omit)) {
                         return false;
                     }
                 }
@@ -408,7 +533,30 @@ class EntityUtilities {
             case DecoratorTypes.ARRAY_STRING_CHIPS:
             case DecoratorTypes.ARRAY_STRING_AUTOCOMPLETE_CHIPS:
             case DecoratorTypes.ARRAY:
-                if (metadataEntityArray.required && !arrayItems.length) {
+                const entityArray = entity[key];
+                const arrayMetadata = metadata;
+                if (arrayMetadata.required && !entityArray.length) {
+                    return false;
+                }
+                break;
+            case DecoratorTypes.DATE:
+                const entityDate = new Date(entity[key]);
+                const dateMetadata = metadata;
+                if (!this.isDateValid(entityDate, dateMetadata)) {
+                    return false;
+                }
+                break;
+            case DecoratorTypes.DATE_RANGE:
+                const entityDateRange = cloneDeep(entity[key]);
+                const dateRangeMetadata = metadata;
+                if (!this.isDateRangeValid(entityDateRange, dateRangeMetadata)) {
+                    return false;
+                }
+                break;
+            case DecoratorTypes.DATE_TIME:
+                const entityDateTime = new Date(entity[key]);
+                const dateTimeMetadata = metadata;
+                if (!this.isDateTimeValid(entityDateTime, dateTimeMetadata)) {
                     return false;
                 }
                 break;
@@ -417,6 +565,120 @@ class EntityUtilities {
         }
         return true;
     }
+    static isStringValid(value, metadata) {
+        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 isTextboxValid(value, metadata) {
+        if (metadata.maxLength && value.length > metadata.maxLength) {
+            return false;
+        }
+        if (metadata.minLength && value.length < metadata.minLength) {
+            return false;
+        }
+        return true;
+    }
+    static isNumberValid(value, metadata) {
+        if (metadata.max && value > metadata.max) {
+            return false;
+        }
+        if (metadata.min && value < metadata.min) {
+            return false;
+        }
+        return true;
+    }
+    static isDateValid(value, metadata) {
+        if (metadata.min && value.getTime() < metadata.min(value).getTime()) {
+            return false;
+        }
+        if (metadata.max && value.getTime() > metadata.max(value).getTime()) {
+            return false;
+        }
+        if (metadata.filter && !metadata.filter(value)) {
+            return false;
+        }
+        return true;
+    }
+    static isDateRangeValid(value, metadata) {
+        if (metadata.required && (!value.start || !value.end)) {
+            return false;
+        }
+        value.start = new Date(value.start);
+        value.end = new Date(value.end);
+        if (metadata.minStart && value.start.getTime() < metadata.minStart(value.start).getTime()) {
+            return false;
+        }
+        if (metadata.maxStart && value.start.getTime() > metadata.maxStart(value.start).getTime()) {
+            return false;
+        }
+        if (metadata.minEnd && value.end.getTime() < metadata.minEnd(value.end).getTime()) {
+            return false;
+        }
+        if (metadata.maxEnd && value.end.getTime() > metadata.maxEnd(value.end).getTime()) {
+            return false;
+        }
+        if (metadata.filter) {
+            if (!metadata.filter(value.start)) {
+                return false;
+            }
+            if (!metadata.filter(value.end)) {
+                return false;
+            }
+            if (value.values) {
+                for (const date of value.values) {
+                    if (!metadata.filter(date)) {
+                        return false;
+                    }
+                }
+            }
+        }
+        return true;
+    }
+    static isDateTimeValid(value, metadata) {
+        if (metadata.minDate && value.getTime() < metadata.minDate(value).getTime()) {
+            return false;
+        }
+        if (metadata.maxDate && value.getTime() > metadata.maxDate(value).getTime()) {
+            return false;
+        }
+        if (metadata.filterDate && !metadata.filterDate(value)) {
+            return false;
+        }
+        const time = {
+            hours: value.getHours(),
+            minutes: value.getMinutes()
+        };
+        if (metadata.minTime) {
+            const minTime = metadata.minTime(value);
+            if (!(time.hours > minTime.hours
+                || (time.hours === minTime.hours
+                    && time.minutes >= minTime.minutes))) {
+                return false;
+            }
+        }
+        if (metadata.maxTime) {
+            const maxTime = metadata.maxTime(value);
+            if (!(time.hours < maxTime.hours
+                || (time.hours === maxTime.hours
+                    && time.minutes <= maxTime.minutes))) {
+                return false;
+            }
+        }
+        if (metadata.filterTime) {
+            if (!metadata.filterTime(time)) {
+                return false;
+            }
+        }
+        return true;
+    }
     /**
      * Checks if an entity is "dirty" (if its values have changed).
      *
@@ -429,14 +691,22 @@ class EntityUtilities {
             return false;
         }
         else {
-            const diff = this.difference(entity, entityPriorChanges);
-            if (JSON.stringify(diff) === '{}') {
-                return false;
-            }
-            else {
-                return true;
+            const differences = this.differencesForDirty(entity, entityPriorChanges);
+            return differences.length ? true : false;
+        }
+    }
+    static differencesForDirty(entity, entityPriorChanges) {
+        const res = [];
+        for (const key in entity) {
+            if (!this.isEqual(entity[key], entityPriorChanges[key], EntityUtilities.getPropertyMetadata(entity, key))) {
+                res.push({
+                    key: key,
+                    before: entityPriorChanges[key],
+                    after: entity[key]
+                });
             }
         }
+        return res;
     }
     /**
      * Compares two Entities and returns their difference in an object.
@@ -448,20 +718,53 @@ class EntityUtilities {
     static difference(entity, entityPriorChanges) {
         const res = {};
         for (const key in entity) {
-            if (!isEqual(entity[key], entityPriorChanges[key])) {
+            if (!this.isEqual(entity[key], entityPriorChanges[key], EntityUtilities.getPropertyMetadata(entity, key))) {
                 res[key] = entity[key];
             }
         }
         return res;
     }
-    //TODO X Y
+    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;
+            }
+            catch (error) { }
+            ;
+        }
+        return false;
+    }
     /**
      * Compare function for sorting entity keys by their order value.
      *
      * @param a - First key of entity.
      * @param b - Second key of entity.
      * @param entity - Current entity (used to get metadata of entity keys).
-     * @returns 0 if both values have the same order, a negative value if X, a positive value if Y.
+     * @returns 0 if both values have the same order, a negative value if 'a' comes before 'b', a positive value if 'a' comes behind 'b'.
      */
     static compareOrder(a, b, entity) {
         const metadataA = EntityUtilities.getPropertyMetadata(entity, a);
@@ -518,17 +821,17 @@ class EntityUtilities {
     static getEntityRows(entity, hideOmitForCreate = false, hideOmitForEdit = false) {
         const res = [];
         const keys = EntityUtilities.keysOf(entity, hideOmitForCreate, hideOmitForEdit);
-        const numberOfRows = EntityUtilities.getNumberOfRows(keys, entity);
+        const numberOfRows = this.getNumberOfRows(keys, entity);
         for (let i = 1; i <= numberOfRows; i++) {
             const row = {
                 row: i,
-                keys: EntityUtilities.getKeysForRow(keys, entity, i)
+                keys: this.getKeysForRow(keys, entity, i)
             };
             res.push(row);
         }
         const lastRow = {
             row: numberOfRows + 1,
-            keys: EntityUtilities.getKeysForRow(keys, entity, -1)
+            keys: this.getKeysForRow(keys, entity, -1)
         };
         res.push(lastRow);
         return res;
@@ -564,11 +867,10 @@ class EntityUtilities {
         return keys;
     }
 }
-_a = EntityUtilities;
 // eslint-disable-next-line @typescript-eslint/member-ordering, jsdoc/require-jsdoc
-EntityUtilities.construct = _a.new;
+EntityUtilities.construct = EntityUtilities.new;
 // eslint-disable-next-line @typescript-eslint/member-ordering, jsdoc/require-jsdoc
-EntityUtilities.build = _a.new;
+EntityUtilities.build = EntityUtilities.new;
 
 /**
  * A generic EntityService class.
@@ -579,6 +881,12 @@ EntityUtilities.build = _a.new;
 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.
          * Can be subscribed to when you want to do a specific thing whenever the entities change.
@@ -632,20 +940,21 @@ class EntityService {
     update(entity, entityPriorChanges) {
         return __awaiter(this, void 0, void 0, function* () {
             const reqBody = omit(EntityUtilities.difference(entity, entityPriorChanges), EntityUtilities.getOmitForUpdate(entity));
-            const updatedEntity = yield firstValueFrom(this.http.patch(`${this.baseUrl}/${entityPriorChanges.id}`, omitBy(reqBody, isNil)));
-            this.entities[this.entities.findIndex((e) => e.id === entityPriorChanges.id)] = updatedEntity;
+            const updatedEntity = yield 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;
             this.entitiesSubject.next(this.entities);
         });
     }
     /**
      * Deletes a specific Entity.
      *
-     * @param id - The id of the element to delete.
+     * @param entity - The entity to delete.
      */
-    delete(id) {
+    delete(entity) {
         return __awaiter(this, void 0, void 0, function* () {
-            yield firstValueFrom(this.http.delete(`${this.baseUrl}/${id}`));
-            this.entities.splice(this.entities.findIndex((e) => e.id === id), 1);
+            yield firstValueFrom(this.http.delete(`${this.baseUrl}/${entity[this.idKey]}`));
+            // the == comparison instead of === is to catch ids that are numbers.
+            this.entities.splice(this.entities.findIndex(e => e[this.idKey] === entity[this.idKey]), 1);
             this.entitiesSubject.next(this.entities);
         });
     }
@@ -766,7 +1075,7 @@ 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: i11.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: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i13.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i13.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 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]" }] });
 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"] }]
@@ -900,7 +1209,8 @@ class NgxMatEntityInputComponent {
         this.selection = new SelectionModel(true, []);
         this.DecoratorTypes = DecoratorTypes;
         this.EntityUtilities = EntityUtilities;
-        this.getWidth = EntityUtilities.getWidth;
+        this.DateUtilities = DateUtilities;
+        this.defaultDateFilter = () => true;
     }
     /**
      * This is needed for the inputs to work inside an ngFor.
@@ -953,9 +1263,8 @@ class NgxMatEntityInputComponent {
                     title: 'Add'
                 };
             }
-            // TODO
             const givenDisplayColumns = this.metadataEntityArray.displayColumns.map((v) => v.displayName);
-            if (givenDisplayColumns.find((s) => s === 'select')) {
+            if (givenDisplayColumns.find(s => s === 'select')) {
                 throw new Error(`The name "select" for a display column is reserved.
                     Please choose a different name.`);
             }
@@ -982,6 +1291,71 @@ class NgxMatEntityInputComponent {
         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]);
+            }
+        }
+    }
+    /**
+     * 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) {
+        return time1 && time2 && time1.hours === time2.hours && time1.minutes === time2.minutes;
+    }
+    /**
+     * 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.metadataDateRangeDate);
+            this.dateRange.values = values.length ? values : undefined;
+        }
+        else {
+            this.dateRange.values = undefined;
+        }
+        this.entity[this.propertyKey] = this.dateRange;
+    }
+    /**
+     * Sets the time on a datetime property.
+     */
+    setTime() {
+        var _a, _b;
+        if (!this.dateTime) {
+            this.entity[this.propertyKey] = undefined;
+            return;
+        }
+        this.entity[this.propertyKey] = new Date(this.dateTime);
+        if (((_a = this.time) === null || _a === void 0 ? void 0 : _a.hours) != null && ((_b = this.time) === null || _b === void 0 ? void 0 : _b.minutes) != null) {
+            DateUtilities.asDate(this.entity[this.propertyKey]).setHours(this.time.hours, this.time.minutes, 0, 0);
+        }
+        else {
+            DateUtilities.asDate(this.entity[this.propertyKey]).setHours(0, 0, 0, 0);
+        }
     }
     /**
      * Tries to add an item to the array.
@@ -1036,7 +1410,7 @@ class NgxMatEntityInputComponent {
             this.selection.clear();
         }
         else {
-            this.dataSource.data.forEach((row) => this.selection.select(row));
+            this.dataSource.data.forEach(row => this.selection.select(row));
         }
     }
     /**
@@ -1132,15 +1506,17 @@ class NgxMatEntityInputComponent {
      * @param input - The input of the user.
      */
     filterAutocompleteStrings(input) {
-        const filterValue = input.toLowerCase();
-        this.filteredAutocompleteStrings = this.autocompleteStrings.filter(s => s.toLowerCase().includes(filterValue));
+        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-{{getWidth(objectProperty, key, 'lg')}} col-md-{{getWidth(objectProperty, key, 'md')}} col-sm-{{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-{{getWidth(arrayItem, key, 'lg')}} col-md-{{getWidth(arrayItem, key, 'md')}} col-sm-{{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    <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-{{getWidth(dialogData.entity, key, 'lg')}} col-md-{{getWidth(dialogData.entity, key, 'md')}} col-sm-{{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}\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"] }], directives: [{ type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i11.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i11.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2.MatLabel, selector: "mat-label" }, { type: i12.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: i13.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: i13.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i13.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i13.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i13.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i13.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { type: i13.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i2.MatError, selector: "mat-error", inputs: ["id"] }, { type: i14.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { type: i3$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i13.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i13.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i13.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.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: i13.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i13.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i13.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" }, 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]" }] });
 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-{{getWidth(objectProperty, key, 'lg')}} col-md-{{getWidth(objectProperty, key, 'md')}} col-sm-{{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-{{getWidth(arrayItem, key, 'lg')}} col-md-{{getWidth(arrayItem, key, 'md')}} col-sm-{{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    <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-{{getWidth(dialogData.entity, key, 'lg')}} col-md-{{getWidth(dialogData.entity, key, 'md')}} col-sm-{{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}\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        <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"] }]
         }], ctorParameters: function () { return [{ type: i1.MatDialog }]; }, propDecorators: { entity: [{
                 type: Input
             }], propertyKey: [{
@@ -1171,7 +1547,8 @@ NgxMatEntityInputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0",
         MatIconModule,
         MatTableModule,
         MatDialogModule,
-        MatButtonModule], exports: [NgxMatEntityInputComponent] });
+        MatButtonModule,
+        MatDatepickerModule], exports: [NgxMatEntityInputComponent] });
 NgxMatEntityInputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityInputModule, imports: [[
             CommonModule,
             MatInputModule,
@@ -1185,7 +1562,8 @@ NgxMatEntityInputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0",
             MatIconModule,
             MatTableModule,
             MatDialogModule,
-            MatButtonModule
+            MatButtonModule,
+            MatDatepickerModule
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityInputModule, decorators: [{
             type: NgModule,
@@ -1206,7 +1584,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         MatIconModule,
                         MatTableModule,
                         MatDialogModule,
-                        MatButtonModule
+                        MatButtonModule,
+                        MatDatepickerModule
                     ],
                     exports: [NgxMatEntityInputComponent]
                 }]
@@ -1293,7 +1672,7 @@ 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: i13.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i13.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i13.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i11.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-{{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]" }] });
 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"] }]
@@ -1443,7 +1822,7 @@ class NgxMatEntityEditDialogComponent {
         });
     }
     confirmDelete() {
-        this.entityService.delete(this.entityPriorChanges.id).then(() => this.dialogRef.close(2));
+        this.entityService.delete(this.entityPriorChanges).then(() => this.dialogRef.close(2));
     }
     /**
      * Reverts all changes made and closes the dialog.
@@ -1454,7 +1833,7 @@ 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: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i13.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i13.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i13.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i11.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-{{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]" }] });
 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"] }]
@@ -1651,7 +2030,7 @@ class NgxMatEntityTableComponent {
         }).afterClosed()).then((res) => {
             if (res === 0) {
                 const data = this.dataSource.data;
-                data[this.dataSource.data.findIndex((e) => e.id === entity.id)] = entity;
+                data[this.dataSource.data.findIndex((e) => e[this.entityService.idKey] === entity[this.entityService.idKey])] = entity;
                 this.dataSource.data = data;
                 this.selection.clear();
             }
@@ -1769,7 +2148,7 @@ 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: i12.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: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i11.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.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"] }] });
 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"] }]
@@ -2062,9 +2441,9 @@ class DropdownNumberDecoratorConfigInternal extends PropertyDecoratorConfigInter
 }
 
 /**
- * Decorator for setting and getting string property metadata.
+ * Decorator for setting and getting number property metadata.
  *
- * @param metadata - The metadata of the string property.
+ * @param metadata - The metadata of the number property.
  * @returns The method that defines the metadata.
  */
 function number(metadata) {
@@ -2089,7 +2468,7 @@ class DefaultObjectDecoratorConfigInternal extends PropertyDecoratorConfigIntern
     constructor(data) {
         super(data);
         this.displayStyle = data.displayStyle;
-        this.type = data.type;
+        this.EntityClass = data.EntityClass;
     }
 }
 
@@ -2123,5 +2502,5 @@ class StringDecoratorConfig extends PropertyDecoratorConfig {
  * Generated bundle index. Do not edit.
  */
 
-export { DecoratorTypes, Entity, EntityService, EntityUtilities, NgxMatEntityConfirmDialogComponent, NgxMatEntityConfirmDialogModule, NgxMatEntityCreateDialogComponent, NgxMatEntityCreateDialogModule, NgxMatEntityEditDialogComponent, NgxMatEntityEditDialogModule, NgxMatEntityInputComponent, NgxMatEntityInputModule, NgxMatEntityTableComponent, NgxMatEntityTableModule, array, boolean, getValidationErrorMessage, number, object, string };
+export { DateUtilities, DecoratorTypes, Entity, EntityService, EntityUtilities, NgxMatEntityConfirmDialogComponent, NgxMatEntityConfirmDialogModule, NgxMatEntityCreateDialogComponent, NgxMatEntityCreateDialogModule, NgxMatEntityEditDialogComponent, NgxMatEntityEditDialogModule, NgxMatEntityInputComponent, NgxMatEntityInputModule, NgxMatEntityTableComponent, NgxMatEntityTableModule, array, boolean, getValidationErrorMessage, number, object, string };
 //# sourceMappingURL=ngx-material-entity.mjs.map