ngx-material-entity 15.1.7 → 15.1.8

package/fesm2020/ngx-material-entity.mjs

@@ -801,7 +801,7 @@ class EntityUtilities {
         if (metadata.omitForUpdate && omit === 'update') {
             return true;
         }
-        if (metadata.required) {
+        if (metadata.required && type !== DecoratorTypes.HAS_MANY) {
             if (entity[key] == null || entity[key] === '') {
                 return false;
             }
@@ -1480,6 +1480,50 @@ function baseProperty(metadata, type, metadataKeysToReset) {
     };
 }
 
+const defaultTrue = () => true;
+const defaultFalse = () => false;
+/**
+ * The abstract BaseBuilder class.
+ */
+class BaseBuilder {
+    constructor(data) {
+        this.validateInput(data);
+        this.inputData = data;
+        this.data = this.generateBaseData(data);
+        return this;
+    }
+    /**
+     * Used to validate the user input in the constructor.
+     *
+     * @param data - The user input.
+     */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    validateInput(data) {
+        // By default, no validation is done
+    }
+    /**
+     * Sets the value for the given key if no user value was provided.
+     *
+     * @param key - The key to set the default value for.
+     * @param value - The value to set when nothing was provided.
+     * @returns The Builder.
+     */
+    withDefault(key, value) {
+        if (this.inputData == null || this.inputData[key] == null) {
+            this.data[key] = value;
+        }
+        return this;
+    }
+    /**
+     * Method used to get the final build value after applying all chaining.
+     *
+     * @returns The build value.
+     */
+    getResult() {
+        return this.data;
+    }
+}
+
 /**
  * The internal Position. Sets default values and validates user input.
  */
@@ -1520,6 +1564,20 @@ class PropertyDecoratorConfigInternal {
         this.omitForUpdate = data.omitForUpdate ?? false;
         this.defaultWidths = data.defaultWidths ?? [6, 6, 12];
         this.position = new PositionInternal(data.position);
+        this.isReadOnly = this.isReadOnlyToFunction(data.isReadOnly);
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    isReadOnlyToFunction(value) {
+        if (value == null) {
+            return defaultFalse;
+        }
+        if (typeof value == 'boolean') {
+            if (value) {
+                return defaultTrue;
+            }
+            return defaultFalse;
+        }
+        return value;
     }
 }
 
@@ -1626,50 +1684,6 @@ __decorate([
     __metadata("design:type", String)
 ], Entity.prototype, "id", void 0);
 
-const defaultTrue = () => true;
-const defaultFalse = () => false;
-/**
- * The abstract BaseBuilder class.
- */
-class BaseBuilder {
-    constructor(data) {
-        this.validateInput(data);
-        this.inputData = data;
-        this.data = this.generateBaseData(data);
-        return this;
-    }
-    /**
-     * Used to validate the user input in the constructor.
-     *
-     * @param data - The user input.
-     */
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    validateInput(data) {
-        // By default, no validation is done
-    }
-    /**
-     * Sets the value for the given key if no user value was provided.
-     *
-     * @param key - The key to set the default value for.
-     * @param value - The value to set when nothing was provided.
-     * @returns The Builder.
-     */
-    withDefault(key, value) {
-        if (this.inputData == null || this.inputData[key] == null) {
-            this.data[key] = value;
-        }
-        return this;
-    }
-    /**
-     * Method used to get the final build value after applying all chaining.
-     *
-     * @returns The build value.
-     */
-    getResult() {
-        return this.data;
-    }
-}
-
 /**
  * The internal ConfirmDialogData. Requires all default values the user can leave out.
  */
@@ -3226,6 +3240,17 @@ class NgxMatEntityInputComponent {
         this.DateUtilities = DateUtilities;
         this.SelectionUtilities = SelectionUtilities;
     }
+    /**
+     * Checks if the input with the given key on the given property is readonly.
+     *
+     * @param property - The property on which to check the input.
+     * @param key - The key for the input to check.
+     * @returns Whether or not the input is read only.
+     */
+    isPropertyReadOnly(property, key) {
+        const metadata = EntityUtilities.getPropertyMetadata(property, key);
+        return this.internalIsReadOnly || metadata.isReadOnly(property);
+    }
     /**
      * This is needed for the inputs to work inside an ngFor.
      *
@@ -3734,10 +3759,10 @@ class NgxMatEntityInputComponent {
     }
 }
 NgxMatEntityInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NgxMatEntityInputComponent, deps: [{ token: i1.MatDialog }, { token: i0.EnvironmentInjector }, { token: i2$2.Router }, { token: NGX_GET_VALIDATION_ERROR_MESSAGE }], target: i0.ɵɵFactoryTarget.Component });
-NgxMatEntityInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: NgxMatEntityInputComponent, selector: "ngx-mat-entity-input", inputs: { entity: "entity", propertyKey: "propertyKey", getValidationErrorMessage: "getValidationErrorMessage", hideOmitForCreate: "hideOmitForCreate", hideOmitForEdit: "hideOmitForEdit", isReadOnly: "isReadOnly" }, outputs: { inputChangeEvent: "inputChangeEvent" }, viewQueries: [{ propertyName: "addArrayItemDialog", first: true, predicate: ["addArrayItemDialog"], descendants: true }, { propertyName: "editArrayItemDialog", first: true, predicate: ["editArrayItemDialog"], descendants: true }, { propertyName: "hasManyPaginator", first: true, predicate: MatPaginator, descendants: true, static: true }, { propertyName: "hasManySort", first: true, predicate: MatSort, descendants: true, static: true }, { propertyName: "hasManyFilter", first: true, predicate: ["filter"], descendants: true, static: true }, { propertyName: "createHasManyDialog", first: true, predicate: ["createHasManyDialog"], descendants: true }, { propertyName: "editHasManyDialog", first: true, predicate: ["editHasManyDialog"], descendants: true }], ngImport: i0, template: "<div [ngSwitch]=\"type\" *ngIf=\"!(hideOmitForCreate && metadata.omitForCreate) && !(hideOmitForEdit && metadata.omitForUpdate)\">\n    <!-------------------------------------------->\n    <!-----------------Strings-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.STRING\">\n        <string-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </string-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_TEXTBOX\">\n        <string-textbox-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </string-textbox-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_AUTOCOMPLETE\">\n        <string-autocomplete-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </string-autocomplete-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_DROPDOWN\">\n        <string-dropdown-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </string-dropdown-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_PASSWORD\">\n        <string-password-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </string-password-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-----------------Booleans------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_CHECKBOX\">\n        <boolean-checkbox-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </boolean-checkbox-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_TOGGLE\">\n        <boolean-toggle-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </boolean-toggle-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_DROPDOWN\">\n        <boolean-dropdown-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </boolean-dropdown-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!------------------Numbers------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.NUMBER\">\n        <number-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </number-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.NUMBER_DROPDOWN\">\n        <number-dropdown-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </number-dropdown-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.NUMBER_SLIDER\">\n        <number-slider-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </number-slider-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Array-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_DATE\">\n        <array-date-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </array-date-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_DATE_TIME\">\n        <array-date-time-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </array-date-time-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_DATE_RANGE\">\n        <array-date-range-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </array-date-range-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_STRING_CHIPS\">\n        <array-string-chips-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </array-string-chips-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_STRING_AUTOCOMPLETE_CHIPS\">\n        <array-string-autocomplete-chips\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </array-string-autocomplete-chips>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Dates-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.DATE\">\n        <date-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </date-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.DATE_RANGE\">\n        <date-range-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </date-range-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.DATE_TIME\">\n        <date-time-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </date-time-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Files-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.FILE_DEFAULT\">\n        <file-default-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </file-default-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.FILE_IMAGE\">\n        <file-image-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </file-image-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------- references many ------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.REFERENCES_MANY\">\n        <references-many-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </references-many-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Custom------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.CUSTOM\">\n        <custom-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </custom-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Object------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.OBJECT\">\n        <b>{{metadataDefaultObject.displayName}}</b>\n        <!-- iterates over the object properties -->\n        <mat-tab-group *ngIf=\"objectPropertyTabs.length > 1\" preserveContent>\n            <mat-tab *ngFor=\"let tab of objectPropertyTabs; let tI = index; trackBy: trackByFn\" [label]=\"tab.tabName\">\n                <div class=\"row\" *ngFor=\"let row of tab.rows;\">\n                    <ngx-mat-entity-input *ngFor=\"let key of row.keys; let rI = index; trackBy: trackByFn\"\n                        [entity]=\"objectProperty\"\n                        [propertyKey]=\"key\"\n                        [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                        [hideOmitForCreate]=\"hideOmitForCreate\"\n                        [hideOmitForEdit]=\"hideOmitForEdit\"\n                        [isReadOnly]=\"internalIsReadOnly\"\n                        class=\"col-lg-{{EntityUtilities.getWidth(objectProperty, key, 'lg')}} col-md-{{EntityUtilities.getWidth(objectProperty, key, 'md')}} col-sm-{{EntityUtilities.getWidth(objectProperty, key, 'sm')}}\"\n                        (inputChangeEvent)=\"emitChange()\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </mat-tab>\n        </mat-tab-group>\n\n        <div *ngIf=\"objectPropertyTabs.length <= 1\">\n            <div class=\"row\" *ngFor=\"let row of objectPropertyTabs[0].rows\">\n                <ngx-mat-entity-input *ngFor=\"let key of row.keys; let i = index; trackBy: trackByFn\"\n                    [entity]=\"objectProperty\"\n                    [propertyKey]=\"key\"\n                    [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                    [hideOmitForCreate]=\"hideOmitForCreate\"\n                    [hideOmitForEdit]=\"hideOmitForEdit\"\n                    [isReadOnly]=\"internalIsReadOnly\"\n                    class=\"col-lg-{{EntityUtilities.getWidth(objectProperty, key, 'lg')}} col-md-{{EntityUtilities.getWidth(objectProperty, key, 'md')}} col-sm-{{EntityUtilities.getWidth(objectProperty, key, 'sm')}}\"\n                    (inputChangeEvent)=\"emitChange()\"\n                >\n                </ngx-mat-entity-input>\n            </div>\n        </div>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Array-------------------->\n    <!-------------------------------------------->\n    <div class=\"entityArray\" *ngSwitchCase=\"DecoratorTypes.ARRAY\">\n        <div class=\"mat-elevation-z8 elevation-container\">\n            <div class=\"array-headline\">\n                <b>{{metadataEntityArray.displayName}}</b>\n            </div>\n            <div *ngIf=\"metadataEntityArray.createInline && !internalIsReadOnly\">\n                <mat-tab-group *ngIf=\"arrayItemInlineTabs.length > 1\" preserveContent>\n                    <mat-tab *ngFor=\"let tab of arrayItemInlineTabs\" [label]=\"tab.tabName\">\n                        <div class=\"row\" *ngFor=\"let row of tab.rows\">\n                            <ngx-mat-entity-input\n                                *ngFor=\"let key of row.keys; let i = index; trackBy: trackByFn\"\n                                [entity]=\"arrayItem\"\n                                [propertyKey]=\"key\"\n                                [hideOmitForCreate]=\"true\"\n                                [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                                class=\"col-lg-{{EntityUtilities.getWidth(arrayItem, key, 'lg')}} col-md-{{EntityUtilities.getWidth(arrayItem, key, 'md')}} col-sm-{{EntityUtilities.getWidth(arrayItem, key, 'sm')}}\"\n                                (inputChangeEvent)=\"checkIsArrayItemValid()\"\n                            >\n                            </ngx-mat-entity-input>\n                        </div>\n                    </mat-tab>\n                </mat-tab-group>\n\n                <div *ngIf=\"arrayItemInlineTabs.length <= 1\">\n                    <div class=\"row\" *ngFor=\"let row of arrayItemInlineTabs[0].rows\">\n                        <ngx-mat-entity-input\n                            *ngFor=\"let key of row.keys; let i = index; trackBy: trackByFn\"\n                            [entity]=\"arrayItem\"\n                            [propertyKey]=\"key\"\n                            [hideOmitForCreate]=\"true\"\n                            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                            class=\"col-lg-{{EntityUtilities.getWidth(arrayItem, key, 'lg')}} col-md-{{EntityUtilities.getWidth(arrayItem, key, 'md')}} col-sm-{{EntityUtilities.getWidth(arrayItem, key, 'sm')}}\"\n                            (inputChangeEvent)=\"checkIsArrayItemValid()\"\n                        >\n                        </ngx-mat-entity-input>\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"buttons\" *ngIf=\"!internalIsReadOnly\">\n                <button type=\"button\" mat-raised-button\n                    [disabled]=\"metadataEntityArray.createInline && !isArrayItemValid\"\n                    (click)=\"addEntity()\">\n                    {{metadataEntityArray.addButtonLabel}}\n                </button>\n                <button type=\"button\" mat-raised-button\n                    [disabled]=\"!entityArraySelection.selected.length\"\n                    (click)=\"removeFromEntityArray()\">\n                    {{metadataEntityArray.removeButtonLabel}}\n                </button>\n            </div>\n        \n            <mat-table [dataSource]=\"entityArrayDataSource\">\n                <!-- select Column -->\n                <ng-container matColumnDef=\"select\" *ngIf=\"!internalIsReadOnly\">\n                    <mat-header-cell *matHeaderCellDef>\n                        <mat-checkbox\n                            [disabled]=\"!entityArrayDataSource.data.length\" (change)=\"$event ? SelectionUtilities.masterToggle(entityArraySelection, entityArrayDataSource) : null\"\n                            [checked]=\"entityArraySelection.hasValue() && SelectionUtilities.isAllSelected(entityArraySelection, entityArrayDataSource)\"\n                            [indeterminate]=\"entityArraySelection.hasValue() && !SelectionUtilities.isAllSelected(entityArraySelection, entityArrayDataSource)\">\n                        </mat-checkbox>\n                    </mat-header-cell>\n                    <mat-cell *matCellDef=\"let entity\">\n                        <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? entityArraySelection.toggle(entity) : null\" [checked]=\"entityArraySelection.isSelected(entity)\"></mat-checkbox>\n                    </mat-cell>\n                </ng-container>\n            \n                <ng-container *ngFor=\"let dCol of metadataEntityArray.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n                    <mat-header-cell *matHeaderCellDef>\n                        {{dCol.displayName}}\n                    </mat-header-cell>\n                    <mat-cell (click)=\"editArrayItem(entity)\" class=\"entity\" *matCellDef=\"let entity\">\n                        {{dCol.value(entity)}}\n                    </mat-cell>\n                </ng-container>\n            \n                <mat-header-row *matHeaderRowDef=\"entityArrayDisplayedColumns\"></mat-header-row>\n                <mat-row *matRowDef=\"let row; columns: entityArrayDisplayedColumns\"></mat-row>\n            </mat-table>\n        \n            <div class=\"array-error\" *ngIf=\"metadataEntityArray.required && !entityArrayDataSource.data.length\">\n                {{metadataEntityArray.missingErrorMessage}}\n            </div>\n        </div>\n    </div>\n\n    <!-------------------------------------------->\n    <!------------------ has many ---------------->\n    <!-------------------------------------------->\n    <div class=\"hasMany\" *ngSwitchCase=\"DecoratorTypes.HAS_MANY\">\n        <h2 class=\"title\">{{metadataHasMany.tableData.baseData.title}}</h2>\n\n        <div class=\"row\">\n            <mat-form-field class=\"col-lg-8 col-md-6 col-sm-12\">\n                <mat-label>{{metadataHasMany.tableData.baseData.searchLabel}}</mat-label>\n                <input matInput (keyup)=\"applyHasManyFilter($event)\">\n            </mat-form-field>\n            <div\n                *ngIf=\"metadataHasMany.tableData.baseData.multiSelectActions.length\"\n                [class.col-lg-2]=\"metadataHasMany.tableData.baseData.allowCreate()\"\n                [class.col-lg-4]=\"!metadataHasMany.tableData.baseData.allowCreate()\"\n                [class.col-md-3]=\"metadataHasMany.tableData.baseData.allowCreate()\"\n                [class.col-md-6]=\"!metadataHasMany.tableData.baseData.allowCreate()\"\n                [class.col-sm-6]=\"metadataHasMany.tableData.baseData.allowCreate()\"\n                [class.col-sm-12]=\"!metadataHasMany.tableData.baseData.allowCreate()\"\n            >\n                <button type=\"button\" class=\"actions-button\" [matMenuTriggerFor]=\"menu\" mat-raised-button>\n                    {{metadataHasMany.tableData.baseData.multiSelectLabel}}\n                </button>\n            </div>\n            <mat-menu #menu=\"matMenu\">\n                <button *ngIf=\"metadataHasMany.tableData.baseData.allowJsonImport\" type=\"button\" [disabled]=\"hasManyImportAction.enabled?.(this.hasManySelection.selected) === false\" (click)=\"runHasManyMultiAction(hasManyImportAction)\" mat-menu-item>\n                    {{hasManyImportAction.displayName}}\n                </button>\n                <button type=\"button\" *ngFor=\"let action of metadataHasMany.tableData.baseData.multiSelectActions\" [disabled]=\"hasManyMultiActionDisabled(action)\" (click)=\"runHasManyMultiAction(action)\" mat-menu-item>\n                    {{action.displayName}}\n                </button>\n            </mat-menu>\n\n            <div\n                *ngIf=\"metadataHasMany.tableData.baseData.allowCreate()\"\n                [class.col-lg-2]=\"metadataHasMany.tableData.baseData.multiSelectActions.length\"\n                [class.col-lg-4]=\"!metadataHasMany.tableData.baseData.multiSelectActions.length\"\n                [class.col-md-3]=\"metadataHasMany.tableData.baseData.multiSelectActions.length\"\n                [class.col-md-6]=\"!metadataHasMany.tableData.baseData.multiSelectActions.length\"\n                [class.col-sm-6]=\"metadataHasMany.tableData.baseData.multiSelectActions.length\"\n                [class.col-sm-12]=\"!metadataHasMany.tableData.baseData.multiSelectActions.length\"\n            >\n                <button type=\"button\" class=\"create-button\" (click)=\"createHasManyEntity()\" mat-raised-button>\n                    {{metadataHasMany.tableData.baseData.createButtonLabel}}\n                </button>\n            </div>\n        </div>\n\n        <div class=\"mat-elevation-z8 elevation-container\">\n            <mat-table [dataSource]=\"hasManyDataSource\" matSort>\n                <!-- select Column -->\n                <ng-container matColumnDef=\"select\">\n                    <mat-header-cell *matHeaderCellDef>\n                        <mat-checkbox (change)=\"$event ? SelectionUtilities.masterToggle(hasManySelection, hasManyDataSource) : null\" [checked]=\"hasManySelection.hasValue() && SelectionUtilities.isAllSelected(hasManySelection, hasManyDataSource)\" [indeterminate]=\"hasManySelection.hasValue() && !SelectionUtilities.isAllSelected(hasManySelection, hasManyDataSource)\"> </mat-checkbox>\n                    </mat-header-cell>\n                    <mat-cell *matCellDef=\"let entity\" class=\"entity\">\n                        <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? hasManySelection.toggle(entity) : null\" [checked]=\"hasManySelection.isSelected(entity)\"> </mat-checkbox>\n                    </mat-cell>\n                </ng-container>\n\n                <ng-container *ngFor=\"let dCol of metadataHasMany.tableData.baseData.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n                    <mat-header-cell *matHeaderCellDef mat-sort-header>\n                        {{dCol.displayName}}\n                    </mat-header-cell>\n                    <mat-cell class=\"entity\" [class.enabled]=\"metadataHasMany.tableData.baseData.allowUpdate(entity) || metadataHasMany.tableData.baseData.allowRead(entity)\" (click)=\"editHasManyEntity(entity)\" *matCellDef=\"let entity\">\n                        {{dCol.value(entity)}}\n                    </mat-cell>\n                </ng-container>\n\n                <mat-header-row *matHeaderRowDef=\"displayedHasManyColumns\"></mat-header-row>\n                <mat-row *matRowDef=\"let row; columns: displayedHasManyColumns\"></mat-row>\n            </mat-table>\n\n            <mat-spinner *ngIf=\"hasManyIsLoading && metadataHasMany.tableData.baseData.displayLoadingSpinner\" style=\"margin-left: auto; margin-right: auto; margin-top: 10px; margin-bottom: 10px;\">\n            </mat-spinner>\n\n            <mat-paginator [length]=\"hasManyDataSource.filteredData.length\" [pageIndex]=\"0\" [pageSize]=\"10\" [pageSizeOptions]=\"[5, 10, 25, 50]\"></mat-paginator>\n        </div>\n    </div>\n\n    <div *ngSwitchDefault>ERROR: The type {{type}} is not known.</div>\n</div>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n<!--------------------------------------------------------->\n<!--------------------Add Array Item Dialog---------------->\n<!--------------------------------------------------------->\n<ng-template #addArrayItemDialog>\n    <div class=\"mat-dialog-title\">\n        <div>{{addArrayItemDialogData.title}}</div>\n    </div>\n\n    <form>\n        <mat-dialog-content>\n            <mat-tab-group *ngIf=\"arrayItemDialogTabs.length > 1\" preserveContent>\n                <mat-tab *ngFor=\"let tab of arrayItemDialogTabs\" [label]=\"tab.tabName\">\n                    <div class=\"row\" *ngFor=\"let row of tab.rows\">\n                        <ngx-mat-entity-input\n                            *ngFor=\"let key of row.keys\"\n                            [entity]=\"arrayItem\"\n                            [propertyKey]=\"key\"\n                            [hideOmitForCreate]=\"true\"\n                            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                            class=\"col-lg-{{EntityUtilities.getWidth(arrayItem, key, 'lg')}} col-md-{{EntityUtilities.getWidth(arrayItem, key, 'md')}} col-sm-{{EntityUtilities.getWidth(arrayItem, key, 'sm')}}\"\n                            (inputChangeEvent)=\"checkIsArrayItemValid()\"\n                        >\n                        </ngx-mat-entity-input>\n                    </div>\n                </mat-tab>\n            </mat-tab-group>\n    \n            <div *ngIf=\"arrayItemDialogTabs.length <= 1\">\n                <div class=\"row\" *ngFor=\"let row of arrayItemDialogTabs[0].rows\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"arrayItem\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForCreate]=\"true\"\n                        [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                        class=\"col-lg-{{EntityUtilities.getWidth(arrayItem, key, 'lg')}} col-md-{{EntityUtilities.getWidth(arrayItem, key, 'md')}} col-sm-{{EntityUtilities.getWidth(arrayItem, key, 'sm')}}\"\n                        (inputChangeEvent)=\"checkIsArrayItemValid()\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </div>\n        </mat-dialog-content>\n    \n        <mat-dialog-actions>\n            <button type=\"submit\" mat-raised-button (click)=\"addArrayItem()\" [disabled]=\"!isArrayItemValid\">\n                {{addArrayItemDialogData.createButtonLabel}}\n            </button>\n            <button type=\"button\" mat-raised-button (click)=\"closeAddArrayItemDialog()\" class=\"cancel-button\">\n                {{addArrayItemDialogData.cancelButtonLabel}}\n            </button>\n        </mat-dialog-actions>\n    </form>\n\n</ng-template>\n\n<!--------------------------------------------------------->\n<!--------------------Edit Array Item Dialog---------------->\n<!--------------------------------------------------------->\n<ng-template #editArrayItemDialog>\n    <div class=\"mat-dialog-title\">\n        <div>{{editArrayItemDialogData.title(arrayItem)}}</div>\n    </div>\n    \n    <form>\n        <mat-dialog-content>\n            <mat-tab-group *ngIf=\"arrayItemDialogTabs.length > 1\" preserveContent>\n                <mat-tab *ngFor=\"let tab of arrayItemDialogTabs\" [label]=\"tab.tabName\">\n                    <div class=\"row\" *ngFor=\"let row of tab.rows\">\n                        <ngx-mat-entity-input\n                            *ngFor=\"let key of row.keys\"\n                            [entity]=\"arrayItem\"\n                            [propertyKey]=\"key\"\n                            [hideOmitForEdit]=\"true\"\n                            class=\"col-lg-{{EntityUtilities.getWidth(arrayItem, key, 'lg')}} col-md-{{EntityUtilities.getWidth(arrayItem, key, 'md')}} col-sm-{{EntityUtilities.getWidth(arrayItem, key, 'sm')}}\"\n                            (inputChangeEvent)=\"checkArrayItem()\"\n                            [isReadOnly]=\"internalIsReadOnly\"\n                        >\n                        </ngx-mat-entity-input>\n                    </div>\n                </mat-tab>\n            </mat-tab-group>\n        \n            <div *ngIf=\"arrayItemDialogTabs.length <= 1\">\n                <div class=\"row\" *ngFor=\"let row of arrayItemDialogTabs[0].rows\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"arrayItem\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForEdit]=\"true\"\n                        class=\"col-lg-{{EntityUtilities.getWidth(arrayItem, key, 'lg')}} col-md-{{EntityUtilities.getWidth(arrayItem, key, 'md')}} col-sm-{{EntityUtilities.getWidth(arrayItem, key, 'sm')}}\"\n                        (inputChangeEvent)=\"checkArrayItem()\"\n                        [isReadOnly]=\"internalIsReadOnly\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </div>\n        </mat-dialog-content>\n        \n        <mat-dialog-actions>\n            <button type=\"submit\" (click)=\"saveArrayItem()\" mat-raised-button [disabled]=\"internalIsReadOnly || !isArrayItemValid || !isArrayItemDirty\">\n                {{editArrayItemDialogData.confirmButtonLabel}}\n            </button>\n            <button type=\"button\" mat-raised-button (click)=\"closeEditArrayItemDialog()\" class=\"cancel-button\">\n                {{editArrayItemDialogData.cancelButtonLabel}}\n            </button>\n        </mat-dialog-actions>\n    </form>\n</ng-template>\n\n<!--------------------------------------------------------->\n<!--------------------Create Has Many Dialog---------------->\n<!--------------------------------------------------------->\n<ng-template #createHasManyDialog>\n    <div class=\"mat-dialog-title\">\n        <div>{{metadataHasMany.tableData.createDialogData.title}}</div>\n    </div>\n    \n    <form>\n        <mat-dialog-content>\n            <mat-tab-group *ngIf=\"hasManyCreateTabs.length > 1\" preserveContent>\n                <mat-tab *ngFor=\"let tab of hasManyCreateTabs\" [label]=\"tab.tabName\">\n                    <div class=\"row\" *ngFor=\"let row of tab.rows\">\n                        <ngx-mat-entity-input\n                            *ngFor=\"let key of row.keys\"\n                            [entity]=\"hasManyEntity\"\n                            [propertyKey]=\"key\"\n                            [hideOmitForCreate]=\"true\"\n                            class=\"col-lg-{{EntityUtilities.getWidth(hasManyEntity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(hasManyEntity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(hasManyEntity, key, 'sm')}}\"\n                            (inputChangeEvent)=\"checkIsHasManyEntityValid('create')\"\n                        >\n                        </ngx-mat-entity-input>\n                    </div>\n                </mat-tab>\n            </mat-tab-group>\n        \n            <div *ngIf=\"hasManyCreateTabs.length <= 1\">\n                <div class=\"row\" *ngFor=\"let row of hasManyCreateTabs[0].rows\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"hasManyEntity\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForCreate]=\"true\"\n                        class=\"col-lg-{{EntityUtilities.getWidth(hasManyEntity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(hasManyEntity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(hasManyEntity, key, 'sm')}}\"\n                        (inputChangeEvent)=\"checkIsHasManyEntityValid('create')\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </div>\n        </mat-dialog-content>\n        \n        <mat-dialog-actions>\n            <button type=\"submit\" (click)=\"dialogCreateHasMany()\" mat-raised-button [disabled]=\"!isHasManyEntityValid\">\n                {{metadataHasMany.tableData.createDialogData.createButtonLabel}}\n            </button>\n            <button type=\"button\" mat-raised-button (click)=\"dialogCancelCreateHasMany()\" class=\"cancel-button\">\n                {{metadataHasMany.tableData.createDialogData.cancelButtonLabel}}\n            </button>\n        </mat-dialog-actions>\n    </form>\n    \n</ng-template>\n\n<ng-template #editHasManyDialog>\n    <div class=\"mat-dialog-title\">\n        <div>{{metadataHasMany.tableData.editData.title(hasManyEntity)}}</div>\n        <button type=\"button\" *ngIf=\"metadataHasMany.tableData.baseData.allowDelete(hasManyEntity)\" mat-raised-button (click)=\"deleteHasManyEntity()\" color=\"warn\" class=\"delete-button\" tabindex=\"-1\">\n            {{metadataHasMany.tableData.editData.deleteButtonLabel}}\n        </button>\n    </div>\n    \n    <form>\n        <mat-dialog-content>\n            <mat-tab-group *ngIf=\"hasManyUpdateTabs.length > 1\" preserveContent>\n                <mat-tab *ngFor=\"let tab of hasManyUpdateTabs\" [label]=\"tab.tabName\">\n                    <div class=\"row\" *ngFor=\"let row of tab.rows\">\n                        <ngx-mat-entity-input\n                            *ngFor=\"let key of row.keys\"\n                            [entity]=\"hasManyEntity\"\n                            [propertyKey]=\"key\"\n                            [hideOmitForEdit]=\"true\"\n                            class=\"col-lg-{{EntityUtilities.getWidth(hasManyEntity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(hasManyEntity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(hasManyEntity, key, 'sm')}}\"\n                            (inputChangeEvent)=\"checkHasManyEntity()\"\n                            [isReadOnly]=\"isReadOnly\"\n                        >\n                        </ngx-mat-entity-input>\n                    </div>\n                </mat-tab>\n            </mat-tab-group>\n        \n            <div *ngIf=\"hasManyUpdateTabs.length <= 1\">\n                <div class=\"row\" *ngFor=\"let row of hasManyUpdateTabs[0].rows\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"hasManyEntity\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForEdit]=\"true\"\n                        class=\"col-lg-{{EntityUtilities.getWidth(hasManyEntity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(hasManyEntity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(hasManyEntity, key, 'sm')}}\"\n                        (inputChangeEvent)=\"checkHasManyEntity()\"\n                        [isReadOnly]=\"isReadOnly\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </div>\n        </mat-dialog-content>\n        \n        <mat-dialog-actions>\n            <button type=\"submit\" (click)=\"dialogEditHasMany()\" mat-raised-button [disabled]=\"isReadOnly || !isHasManyEntityValid || !isHasManyEntityDirty\">\n                {{metadataHasMany.tableData.editData.confirmButtonLabel}}\n            </button>\n            <button type=\"button\" mat-raised-button (click)=\"dialogCancelEditHasMany()\" class=\"cancel-button\">\n                {{metadataHasMany.tableData.editData.cancelButtonLabel}}\n            </button>\n        </mat-dialog-actions>\n    </form>    \n</ng-template>", styles: [".mdc-data-table__row:last-child .mdc-data-table__cell{border-bottom:1px solid rgba(0,0,0,.12)}.mat-dialog-title{padding:12px 20px;display:flex;justify-content:space-between;align-items:center}.mat-dialog-title div{font-size:var(--mdc-dialog-subhead-size, 14px);font-weight:var(--mdc-dialog-subhead-weight, 500)}::ng-deep .mdc-dialog .mdc-dialog__content{padding:6px 20px!important}mat-dialog-actions{justify-content:space-between;align-items:center;padding-left:20px;padding-right:20px}::ng-deep .mat-mdc-tab-body-wrapper{margin-left:-12px;margin-right:-12px}::ng-deep mat-tab-body{padding-top:10px;padding-left:12px;padding-right:12px}::ng-deep mat-tab-body .mat-mdc-tab-body-content{overflow:initial}::ng-deep .mat-mdc-form-field.mat-form-field-disabled label{color:#0009}::ng-deep .mat-mdc-form-field.mat-form-field-disabled input,::ng-deep .mat-mdc-form-field.mat-form-field-disabled textarea,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-select-disabled,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-select-value{color:#000}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-chip.mat-mdc-standard-chip.mat-mdc-chip-disabled{opacity:1}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-chip.mat-mdc-standard-chip.mat-mdc-chip-disabled button{opacity:.2}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-date-range-input-inner:disabled{color:#000}::ng-deep .mat-mdc-form-field .mat-mdc-slide-toggle{opacity:1}.entityArray .elevation-container{border-radius:5px;padding:15px;margin-bottom:15px;margin-top:15px}.entityArray .array-headline{padding-bottom:10px}.entityArray .buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px}.entityArray mat-table{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:25px}.entityArray .mat-column-select{flex:0 0 75px}.entityArray .entity:hover{cursor:pointer}.entityArray .array-error{display:flex;align-items:center;justify-content:center;margin-top:-25.8px;border:1px solid #E0E0E0;background-color:#f8d3d7;color:#721c24;height:25.8px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.hasMany button{width:100%;height:56px;line-height:24px;font-size:16px}.hasMany .title{text-align:center}.hasMany .elevation-container{border-radius:5px;padding:5px;margin-bottom:15px}.hasMany .enabled:hover{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i4$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i8.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i8.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i8.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i8.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i8.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i8.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i8.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i8.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i8.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i8.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6$1.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i6$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }, { kind: "component", type: i11.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i11.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i11.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i12.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i13.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: StringInputComponent, selector: "string-input" }, { kind: "component", type: StringTextboxInputComponent, selector: "string-textbox-input" }, { kind: "component", type: StringAutocompleteInputComponent, selector: "string-autocomplete-input" }, { kind: "component", type: StringDropdownInputComponent, selector: "string-dropdown-input" }, { kind: "component", type: StringPasswordInputComponent, selector: "string-password-input" }, { kind: "component", type: BooleanCheckboxInputComponent, selector: "boolean-checkbox-input" }, { kind: "component", type: BooleanToggleInputComponent, selector: "boolean-toggle-input" }, { kind: "component", type: BooleanDropdownInputComponent, selector: "boolean-dropdown-input" }, { kind: "component", type: NumberInputComponent, selector: "number-input" }, { kind: "component", type: NumberDropdownInputComponent, selector: "number-dropdown-input" }, { kind: "component", type: NumberSliderInputComponent, selector: "number-slider-input" }, { kind: "component", type: ArrayStringChipsInputComponent, selector: "array-string-chips-input" }, { kind: "component", type: ArrayStringAutocompleteChipsComponent, selector: "array-string-autocomplete-chips" }, { kind: "component", type: DateInputComponent, selector: "date-input" }, { kind: "component", type: DateRangeInputComponent, selector: "date-range-input" }, { kind: "component", type: DateTimeInputComponent, selector: "date-time-input" }, { kind: "component", type: ArrayDateInputComponent, selector: "array-date-input" }, { kind: "component", type: ArrayDateTimeInputComponent, selector: "array-date-time-input" }, { kind: "component", type: ArrayDateRangeInputComponent, selector: "array-date-range-input" }, { kind: "component", type: FileImageInputComponent, selector: "file-image-input" }, { kind: "component", type: FileDefaultInputComponent, selector: "file-default-input" }, { kind: "component", type: ReferencesManyInputComponent, selector: "references-many-input" }, { kind: "component", type: CustomInputComponent, selector: "custom-input" }, { kind: "component", type: NgxMatEntityInputComponent, selector: "ngx-mat-entity-input", inputs: ["entity", "propertyKey", "getValidationErrorMessage", "hideOmitForCreate", "hideOmitForEdit", "isReadOnly"], outputs: ["inputChangeEvent"] }] });
+NgxMatEntityInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: NgxMatEntityInputComponent, selector: "ngx-mat-entity-input", inputs: { entity: "entity", propertyKey: "propertyKey", getValidationErrorMessage: "getValidationErrorMessage", hideOmitForCreate: "hideOmitForCreate", hideOmitForEdit: "hideOmitForEdit", isReadOnly: "isReadOnly" }, outputs: { inputChangeEvent: "inputChangeEvent" }, viewQueries: [{ propertyName: "addArrayItemDialog", first: true, predicate: ["addArrayItemDialog"], descendants: true }, { propertyName: "editArrayItemDialog", first: true, predicate: ["editArrayItemDialog"], descendants: true }, { propertyName: "hasManyPaginator", first: true, predicate: MatPaginator, descendants: true, static: true }, { propertyName: "hasManySort", first: true, predicate: MatSort, descendants: true, static: true }, { propertyName: "hasManyFilter", first: true, predicate: ["filter"], descendants: true, static: true }, { propertyName: "createHasManyDialog", first: true, predicate: ["createHasManyDialog"], descendants: true }, { propertyName: "editHasManyDialog", first: true, predicate: ["editHasManyDialog"], descendants: true }], ngImport: i0, template: "<div [ngSwitch]=\"type\" *ngIf=\"!(hideOmitForCreate && metadata.omitForCreate) && !(hideOmitForEdit && metadata.omitForUpdate)\">\n    <!-------------------------------------------->\n    <!-----------------Strings-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.STRING\">\n        <string-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </string-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_TEXTBOX\">\n        <string-textbox-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </string-textbox-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_AUTOCOMPLETE\">\n        <string-autocomplete-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </string-autocomplete-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_DROPDOWN\">\n        <string-dropdown-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </string-dropdown-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_PASSWORD\">\n        <string-password-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </string-password-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-----------------Booleans------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_CHECKBOX\">\n        <boolean-checkbox-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </boolean-checkbox-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_TOGGLE\">\n        <boolean-toggle-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </boolean-toggle-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_DROPDOWN\">\n        <boolean-dropdown-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </boolean-dropdown-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!------------------Numbers------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.NUMBER\">\n        <number-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </number-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.NUMBER_DROPDOWN\">\n        <number-dropdown-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </number-dropdown-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.NUMBER_SLIDER\">\n        <number-slider-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </number-slider-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Array-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_DATE\">\n        <array-date-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </array-date-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_DATE_TIME\">\n        <array-date-time-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </array-date-time-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_DATE_RANGE\">\n        <array-date-range-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </array-date-range-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_STRING_CHIPS\">\n        <array-string-chips-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </array-string-chips-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_STRING_AUTOCOMPLETE_CHIPS\">\n        <array-string-autocomplete-chips\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </array-string-autocomplete-chips>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Dates-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.DATE\">\n        <date-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </date-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.DATE_RANGE\">\n        <date-range-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </date-range-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.DATE_TIME\">\n        <date-time-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </date-time-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Files-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.FILE_DEFAULT\">\n        <file-default-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </file-default-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.FILE_IMAGE\">\n        <file-image-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </file-image-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------- references many ------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.REFERENCES_MANY\">\n        <references-many-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </references-many-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Custom------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.CUSTOM\">\n        <custom-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </custom-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Object------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.OBJECT\">\n        <b>{{metadataDefaultObject.displayName}}</b>\n        <!-- iterates over the object properties -->\n        <mat-tab-group *ngIf=\"objectPropertyTabs.length > 1\" preserveContent>\n            <mat-tab *ngFor=\"let tab of objectPropertyTabs; let tI = index; trackBy: trackByFn\" [label]=\"tab.tabName\">\n                <div class=\"row\" *ngFor=\"let row of tab.rows;\">\n                    <ngx-mat-entity-input *ngFor=\"let key of row.keys; let rI = index; trackBy: trackByFn\"\n                        [entity]=\"objectProperty\"\n                        [propertyKey]=\"key\"\n                        [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                        [hideOmitForCreate]=\"hideOmitForCreate\"\n                        [hideOmitForEdit]=\"hideOmitForEdit\"\n                        [isReadOnly]=\"isPropertyReadOnly(objectProperty, key)\"\n                        class=\"col-lg-{{EntityUtilities.getWidth(objectProperty, key, 'lg')}} col-md-{{EntityUtilities.getWidth(objectProperty, key, 'md')}} col-sm-{{EntityUtilities.getWidth(objectProperty, key, 'sm')}}\"\n                        (inputChangeEvent)=\"emitChange()\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </mat-tab>\n        </mat-tab-group>\n\n        <div *ngIf=\"objectPropertyTabs.length <= 1\">\n            <div class=\"row\" *ngFor=\"let row of objectPropertyTabs[0].rows\">\n                <ngx-mat-entity-input *ngFor=\"let key of row.keys; let i = index; trackBy: trackByFn\"\n                    [entity]=\"objectProperty\"\n                    [propertyKey]=\"key\"\n                    [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                    [hideOmitForCreate]=\"hideOmitForCreate\"\n                    [hideOmitForEdit]=\"hideOmitForEdit\"\n                    [isReadOnly]=\"isPropertyReadOnly(objectProperty, key)\"\n                    class=\"col-lg-{{EntityUtilities.getWidth(objectProperty, key, 'lg')}} col-md-{{EntityUtilities.getWidth(objectProperty, key, 'md')}} col-sm-{{EntityUtilities.getWidth(objectProperty, key, 'sm')}}\"\n                    (inputChangeEvent)=\"emitChange()\"\n                >\n                </ngx-mat-entity-input>\n            </div>\n        </div>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Array-------------------->\n    <!-------------------------------------------->\n    <div class=\"entityArray\" *ngSwitchCase=\"DecoratorTypes.ARRAY\">\n        <div class=\"mat-elevation-z8 elevation-container\">\n            <div class=\"array-headline\">\n                <b>{{metadataEntityArray.displayName}}</b>\n            </div>\n            <div *ngIf=\"metadataEntityArray.createInline && !internalIsReadOnly\">\n                <mat-tab-group *ngIf=\"arrayItemInlineTabs.length > 1\" preserveContent>\n                    <mat-tab *ngFor=\"let tab of arrayItemInlineTabs\" [label]=\"tab.tabName\">\n                        <div class=\"row\" *ngFor=\"let row of tab.rows\">\n                            <ngx-mat-entity-input\n                                *ngFor=\"let key of row.keys; let i = index; trackBy: trackByFn\"\n                                [entity]=\"arrayItem\"\n                                [propertyKey]=\"key\"\n                                [hideOmitForCreate]=\"true\"\n                                [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                                class=\"col-lg-{{EntityUtilities.getWidth(arrayItem, key, 'lg')}} col-md-{{EntityUtilities.getWidth(arrayItem, key, 'md')}} col-sm-{{EntityUtilities.getWidth(arrayItem, key, 'sm')}}\"\n                                (inputChangeEvent)=\"checkIsArrayItemValid()\"\n                            >\n                            </ngx-mat-entity-input>\n                        </div>\n                    </mat-tab>\n                </mat-tab-group>\n\n                <div *ngIf=\"arrayItemInlineTabs.length <= 1\">\n                    <div class=\"row\" *ngFor=\"let row of arrayItemInlineTabs[0].rows\">\n                        <ngx-mat-entity-input\n                            *ngFor=\"let key of row.keys; let i = index; trackBy: trackByFn\"\n                            [entity]=\"arrayItem\"\n                            [propertyKey]=\"key\"\n                            [hideOmitForCreate]=\"true\"\n                            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                            class=\"col-lg-{{EntityUtilities.getWidth(arrayItem, key, 'lg')}} col-md-{{EntityUtilities.getWidth(arrayItem, key, 'md')}} col-sm-{{EntityUtilities.getWidth(arrayItem, key, 'sm')}}\"\n                            (inputChangeEvent)=\"checkIsArrayItemValid()\"\n                        >\n                        </ngx-mat-entity-input>\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"buttons\" *ngIf=\"!internalIsReadOnly\">\n                <button type=\"button\" mat-raised-button\n                    [disabled]=\"metadataEntityArray.createInline && !isArrayItemValid\"\n                    (click)=\"addEntity()\">\n                    {{metadataEntityArray.addButtonLabel}}\n                </button>\n                <button type=\"button\" mat-raised-button\n                    [disabled]=\"!entityArraySelection.selected.length\"\n                    (click)=\"removeFromEntityArray()\">\n                    {{metadataEntityArray.removeButtonLabel}}\n                </button>\n            </div>\n        \n            <mat-table [dataSource]=\"entityArrayDataSource\">\n                <!-- select Column -->\n                <ng-container matColumnDef=\"select\" *ngIf=\"!internalIsReadOnly\">\n                    <mat-header-cell *matHeaderCellDef>\n                        <mat-checkbox\n                            [disabled]=\"!entityArrayDataSource.data.length\" (change)=\"$event ? SelectionUtilities.masterToggle(entityArraySelection, entityArrayDataSource) : null\"\n                            [checked]=\"entityArraySelection.hasValue() && SelectionUtilities.isAllSelected(entityArraySelection, entityArrayDataSource)\"\n                            [indeterminate]=\"entityArraySelection.hasValue() && !SelectionUtilities.isAllSelected(entityArraySelection, entityArrayDataSource)\">\n                        </mat-checkbox>\n                    </mat-header-cell>\n                    <mat-cell *matCellDef=\"let entity\">\n                        <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? entityArraySelection.toggle(entity) : null\" [checked]=\"entityArraySelection.isSelected(entity)\"></mat-checkbox>\n                    </mat-cell>\n                </ng-container>\n            \n                <ng-container *ngFor=\"let dCol of metadataEntityArray.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n                    <mat-header-cell *matHeaderCellDef>\n                        {{dCol.displayName}}\n                    </mat-header-cell>\n                    <mat-cell (click)=\"editArrayItem(entity)\" class=\"entity\" *matCellDef=\"let entity\">\n                        {{dCol.value(entity)}}\n                    </mat-cell>\n                </ng-container>\n            \n                <mat-header-row *matHeaderRowDef=\"entityArrayDisplayedColumns\"></mat-header-row>\n                <mat-row *matRowDef=\"let row; columns: entityArrayDisplayedColumns\"></mat-row>\n            </mat-table>\n        \n            <div class=\"array-error\" *ngIf=\"metadataEntityArray.required && !entityArrayDataSource.data.length\">\n                {{metadataEntityArray.missingErrorMessage}}\n            </div>\n        </div>\n    </div>\n\n    <!-------------------------------------------->\n    <!------------------ has many ---------------->\n    <!-------------------------------------------->\n    <div class=\"hasMany\" *ngSwitchCase=\"DecoratorTypes.HAS_MANY\">\n        <h2 class=\"title\">{{metadataHasMany.tableData.baseData.title}}</h2>\n\n        <div class=\"row\">\n            <mat-form-field class=\"col-lg-8 col-md-6 col-sm-12\">\n                <mat-label>{{metadataHasMany.tableData.baseData.searchLabel}}</mat-label>\n                <input matInput (keyup)=\"applyHasManyFilter($event)\">\n            </mat-form-field>\n            <div\n                *ngIf=\"metadataHasMany.tableData.baseData.multiSelectActions.length\"\n                [class.col-lg-2]=\"metadataHasMany.tableData.baseData.allowCreate()\"\n                [class.col-lg-4]=\"!metadataHasMany.tableData.baseData.allowCreate()\"\n                [class.col-md-3]=\"metadataHasMany.tableData.baseData.allowCreate()\"\n                [class.col-md-6]=\"!metadataHasMany.tableData.baseData.allowCreate()\"\n                [class.col-sm-6]=\"metadataHasMany.tableData.baseData.allowCreate()\"\n                [class.col-sm-12]=\"!metadataHasMany.tableData.baseData.allowCreate()\"\n            >\n                <button type=\"button\" class=\"actions-button\" [matMenuTriggerFor]=\"menu\" mat-raised-button>\n                    {{metadataHasMany.tableData.baseData.multiSelectLabel}}\n                </button>\n            </div>\n            <mat-menu #menu=\"matMenu\">\n                <button *ngIf=\"metadataHasMany.tableData.baseData.allowJsonImport\" type=\"button\" [disabled]=\"hasManyImportAction.enabled?.(this.hasManySelection.selected) === false\" (click)=\"runHasManyMultiAction(hasManyImportAction)\" mat-menu-item>\n                    {{hasManyImportAction.displayName}}\n                </button>\n                <button type=\"button\" *ngFor=\"let action of metadataHasMany.tableData.baseData.multiSelectActions\" [disabled]=\"hasManyMultiActionDisabled(action)\" (click)=\"runHasManyMultiAction(action)\" mat-menu-item>\n                    {{action.displayName}}\n                </button>\n            </mat-menu>\n\n            <div\n                *ngIf=\"metadataHasMany.tableData.baseData.allowCreate()\"\n                [class.col-lg-2]=\"metadataHasMany.tableData.baseData.multiSelectActions.length\"\n                [class.col-lg-4]=\"!metadataHasMany.tableData.baseData.multiSelectActions.length\"\n                [class.col-md-3]=\"metadataHasMany.tableData.baseData.multiSelectActions.length\"\n                [class.col-md-6]=\"!metadataHasMany.tableData.baseData.multiSelectActions.length\"\n                [class.col-sm-6]=\"metadataHasMany.tableData.baseData.multiSelectActions.length\"\n                [class.col-sm-12]=\"!metadataHasMany.tableData.baseData.multiSelectActions.length\"\n            >\n                <button type=\"button\" class=\"create-button\" (click)=\"createHasManyEntity()\" mat-raised-button>\n                    {{metadataHasMany.tableData.baseData.createButtonLabel}}\n                </button>\n            </div>\n        </div>\n\n        <div class=\"mat-elevation-z8 elevation-container\">\n            <mat-table [dataSource]=\"hasManyDataSource\" matSort>\n                <!-- select Column -->\n                <ng-container matColumnDef=\"select\">\n                    <mat-header-cell *matHeaderCellDef>\n                        <mat-checkbox (change)=\"$event ? SelectionUtilities.masterToggle(hasManySelection, hasManyDataSource) : null\" [checked]=\"hasManySelection.hasValue() && SelectionUtilities.isAllSelected(hasManySelection, hasManyDataSource)\" [indeterminate]=\"hasManySelection.hasValue() && !SelectionUtilities.isAllSelected(hasManySelection, hasManyDataSource)\"> </mat-checkbox>\n                    </mat-header-cell>\n                    <mat-cell *matCellDef=\"let entity\" class=\"entity\">\n                        <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? hasManySelection.toggle(entity) : null\" [checked]=\"hasManySelection.isSelected(entity)\"> </mat-checkbox>\n                    </mat-cell>\n                </ng-container>\n\n                <ng-container *ngFor=\"let dCol of metadataHasMany.tableData.baseData.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n                    <mat-header-cell *matHeaderCellDef mat-sort-header>\n                        {{dCol.displayName}}\n                    </mat-header-cell>\n                    <mat-cell class=\"entity\" [class.enabled]=\"metadataHasMany.tableData.baseData.allowUpdate(entity) || metadataHasMany.tableData.baseData.allowRead(entity)\" (click)=\"editHasManyEntity(entity)\" *matCellDef=\"let entity\">\n                        {{dCol.value(entity)}}\n                    </mat-cell>\n                </ng-container>\n\n                <mat-header-row *matHeaderRowDef=\"displayedHasManyColumns\"></mat-header-row>\n                <mat-row *matRowDef=\"let row; columns: displayedHasManyColumns\"></mat-row>\n            </mat-table>\n\n            <mat-spinner *ngIf=\"hasManyIsLoading && metadataHasMany.tableData.baseData.displayLoadingSpinner\" style=\"margin-left: auto; margin-right: auto; margin-top: 10px; margin-bottom: 10px;\">\n            </mat-spinner>\n\n            <mat-paginator [length]=\"hasManyDataSource.filteredData.length\" [pageIndex]=\"0\" [pageSize]=\"10\" [pageSizeOptions]=\"[5, 10, 25, 50]\"></mat-paginator>\n        </div>\n    </div>\n\n    <div *ngSwitchDefault>ERROR: The type {{type}} is not known.</div>\n</div>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n<!--------------------------------------------------------->\n<!--------------------Add Array Item Dialog---------------->\n<!--------------------------------------------------------->\n<ng-template #addArrayItemDialog>\n    <div class=\"mat-dialog-title\">\n        <div>{{addArrayItemDialogData.title}}</div>\n    </div>\n\n    <form>\n        <mat-dialog-content>\n            <mat-tab-group *ngIf=\"arrayItemDialogTabs.length > 1\" preserveContent>\n                <mat-tab *ngFor=\"let tab of arrayItemDialogTabs\" [label]=\"tab.tabName\">\n                    <div class=\"row\" *ngFor=\"let row of tab.rows\">\n                        <ngx-mat-entity-input\n                            *ngFor=\"let key of row.keys\"\n                            [entity]=\"arrayItem\"\n                            [propertyKey]=\"key\"\n                            [hideOmitForCreate]=\"true\"\n                            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                            class=\"col-lg-{{EntityUtilities.getWidth(arrayItem, key, 'lg')}} col-md-{{EntityUtilities.getWidth(arrayItem, key, 'md')}} col-sm-{{EntityUtilities.getWidth(arrayItem, key, 'sm')}}\"\n                            (inputChangeEvent)=\"checkIsArrayItemValid()\"\n                        >\n                        </ngx-mat-entity-input>\n                    </div>\n                </mat-tab>\n            </mat-tab-group>\n    \n            <div *ngIf=\"arrayItemDialogTabs.length <= 1\">\n                <div class=\"row\" *ngFor=\"let row of arrayItemDialogTabs[0].rows\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"arrayItem\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForCreate]=\"true\"\n                        [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                        class=\"col-lg-{{EntityUtilities.getWidth(arrayItem, key, 'lg')}} col-md-{{EntityUtilities.getWidth(arrayItem, key, 'md')}} col-sm-{{EntityUtilities.getWidth(arrayItem, key, 'sm')}}\"\n                        (inputChangeEvent)=\"checkIsArrayItemValid()\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </div>\n        </mat-dialog-content>\n    \n        <mat-dialog-actions>\n            <button type=\"submit\" mat-raised-button (click)=\"addArrayItem()\" [disabled]=\"!isArrayItemValid\">\n                {{addArrayItemDialogData.createButtonLabel}}\n            </button>\n            <button type=\"button\" mat-raised-button (click)=\"closeAddArrayItemDialog()\" class=\"cancel-button\">\n                {{addArrayItemDialogData.cancelButtonLabel}}\n            </button>\n        </mat-dialog-actions>\n    </form>\n\n</ng-template>\n\n<!--------------------------------------------------------->\n<!--------------------Edit Array Item Dialog---------------->\n<!--------------------------------------------------------->\n<ng-template #editArrayItemDialog>\n    <div class=\"mat-dialog-title\">\n        <div>{{editArrayItemDialogData.title(arrayItemPriorChanges)}}</div>\n    </div>\n    \n    <form>\n        <mat-dialog-content>\n            <mat-tab-group *ngIf=\"arrayItemDialogTabs.length > 1\" preserveContent>\n                <mat-tab *ngFor=\"let tab of arrayItemDialogTabs\" [label]=\"tab.tabName\">\n                    <div class=\"row\" *ngFor=\"let row of tab.rows\">\n                        <ngx-mat-entity-input\n                            *ngFor=\"let key of row.keys\"\n                            [entity]=\"arrayItem\"\n                            [propertyKey]=\"key\"\n                            [hideOmitForEdit]=\"true\"\n                            class=\"col-lg-{{EntityUtilities.getWidth(arrayItem, key, 'lg')}} col-md-{{EntityUtilities.getWidth(arrayItem, key, 'md')}} col-sm-{{EntityUtilities.getWidth(arrayItem, key, 'sm')}}\"\n                            (inputChangeEvent)=\"checkArrayItem()\"\n                            [isReadOnly]=\"isPropertyReadOnly(arrayItem, key)\"\n                        >\n                        </ngx-mat-entity-input>\n                    </div>\n                </mat-tab>\n            </mat-tab-group>\n        \n            <div *ngIf=\"arrayItemDialogTabs.length <= 1\">\n                <div class=\"row\" *ngFor=\"let row of arrayItemDialogTabs[0].rows\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"arrayItem\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForEdit]=\"true\"\n                        class=\"col-lg-{{EntityUtilities.getWidth(arrayItem, key, 'lg')}} col-md-{{EntityUtilities.getWidth(arrayItem, key, 'md')}} col-sm-{{EntityUtilities.getWidth(arrayItem, key, 'sm')}}\"\n                        (inputChangeEvent)=\"checkArrayItem()\"\n                        [isReadOnly]=\"isPropertyReadOnly(arrayItem, key)\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </div>\n        </mat-dialog-content>\n        \n        <mat-dialog-actions>\n            <button type=\"submit\" (click)=\"saveArrayItem()\" mat-raised-button [disabled]=\"internalIsReadOnly || !isArrayItemValid || !isArrayItemDirty\">\n                {{editArrayItemDialogData.confirmButtonLabel}}\n            </button>\n            <button type=\"button\" mat-raised-button (click)=\"closeEditArrayItemDialog()\" class=\"cancel-button\">\n                {{editArrayItemDialogData.cancelButtonLabel}}\n            </button>\n        </mat-dialog-actions>\n    </form>\n</ng-template>\n\n<!--------------------------------------------------------->\n<!--------------------Create Has Many Dialog---------------->\n<!--------------------------------------------------------->\n<ng-template #createHasManyDialog>\n    <div class=\"mat-dialog-title\">\n        <div>{{metadataHasMany.tableData.createDialogData.title}}</div>\n    </div>\n    \n    <form>\n        <mat-dialog-content>\n            <mat-tab-group *ngIf=\"hasManyCreateTabs.length > 1\" preserveContent>\n                <mat-tab *ngFor=\"let tab of hasManyCreateTabs\" [label]=\"tab.tabName\">\n                    <div class=\"row\" *ngFor=\"let row of tab.rows\">\n                        <ngx-mat-entity-input\n                            *ngFor=\"let key of row.keys\"\n                            [entity]=\"hasManyEntity\"\n                            [propertyKey]=\"key\"\n                            [hideOmitForCreate]=\"true\"\n                            class=\"col-lg-{{EntityUtilities.getWidth(hasManyEntity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(hasManyEntity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(hasManyEntity, key, 'sm')}}\"\n                            (inputChangeEvent)=\"checkIsHasManyEntityValid('create')\"\n                        >\n                        </ngx-mat-entity-input>\n                    </div>\n                </mat-tab>\n            </mat-tab-group>\n        \n            <div *ngIf=\"hasManyCreateTabs.length <= 1\">\n                <div class=\"row\" *ngFor=\"let row of hasManyCreateTabs[0].rows\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"hasManyEntity\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForCreate]=\"true\"\n                        class=\"col-lg-{{EntityUtilities.getWidth(hasManyEntity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(hasManyEntity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(hasManyEntity, key, 'sm')}}\"\n                        (inputChangeEvent)=\"checkIsHasManyEntityValid('create')\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </div>\n        </mat-dialog-content>\n        \n        <mat-dialog-actions>\n            <button type=\"submit\" (click)=\"dialogCreateHasMany()\" mat-raised-button [disabled]=\"!isHasManyEntityValid\">\n                {{metadataHasMany.tableData.createDialogData.createButtonLabel}}\n            </button>\n            <button type=\"button\" mat-raised-button (click)=\"dialogCancelCreateHasMany()\" class=\"cancel-button\">\n                {{metadataHasMany.tableData.createDialogData.cancelButtonLabel}}\n            </button>\n        </mat-dialog-actions>\n    </form>\n    \n</ng-template>\n\n<ng-template #editHasManyDialog>\n    <div class=\"mat-dialog-title\">\n        <div>{{metadataHasMany.tableData.editData.title(hasManyEntityPriorChanges)}}</div>\n        <button type=\"button\" *ngIf=\"metadataHasMany.tableData.baseData.allowDelete(hasManyEntity)\" mat-raised-button (click)=\"deleteHasManyEntity()\" color=\"warn\" class=\"delete-button\" tabindex=\"-1\">\n            {{metadataHasMany.tableData.editData.deleteButtonLabel}}\n        </button>\n    </div>\n    \n    <form>\n        <mat-dialog-content>\n            <mat-tab-group *ngIf=\"hasManyUpdateTabs.length > 1\" preserveContent>\n                <mat-tab *ngFor=\"let tab of hasManyUpdateTabs\" [label]=\"tab.tabName\">\n                    <div class=\"row\" *ngFor=\"let row of tab.rows\">\n                        <ngx-mat-entity-input\n                            *ngFor=\"let key of row.keys\"\n                            [entity]=\"hasManyEntity\"\n                            [propertyKey]=\"key\"\n                            [hideOmitForEdit]=\"true\"\n                            class=\"col-lg-{{EntityUtilities.getWidth(hasManyEntity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(hasManyEntity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(hasManyEntity, key, 'sm')}}\"\n                            (inputChangeEvent)=\"checkHasManyEntity()\"\n                            [isReadOnly]=\"isPropertyReadOnly(hasManyEntity, key)\"\n                        >\n                        </ngx-mat-entity-input>\n                    </div>\n                </mat-tab>\n            </mat-tab-group>\n        \n            <div *ngIf=\"hasManyUpdateTabs.length <= 1\">\n                <div class=\"row\" *ngFor=\"let row of hasManyUpdateTabs[0].rows\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"hasManyEntity\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForEdit]=\"true\"\n                        class=\"col-lg-{{EntityUtilities.getWidth(hasManyEntity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(hasManyEntity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(hasManyEntity, key, 'sm')}}\"\n                        (inputChangeEvent)=\"checkHasManyEntity()\"\n                        [isReadOnly]=\"isPropertyReadOnly(hasManyEntity, key)\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </div>\n        </mat-dialog-content>\n        \n        <mat-dialog-actions>\n            <button type=\"submit\" (click)=\"dialogEditHasMany()\" mat-raised-button [disabled]=\"internalIsReadOnly || !isHasManyEntityValid || !isHasManyEntityDirty\">\n                {{metadataHasMany.tableData.editData.confirmButtonLabel}}\n            </button>\n            <button type=\"button\" mat-raised-button (click)=\"dialogCancelEditHasMany()\" class=\"cancel-button\">\n                {{metadataHasMany.tableData.editData.cancelButtonLabel}}\n            </button>\n        </mat-dialog-actions>\n    </form>    \n</ng-template>", styles: [".mdc-data-table__row:last-child .mdc-data-table__cell{border-bottom:1px solid rgba(0,0,0,.12)}.mat-dialog-title{padding:12px 20px;display:flex;justify-content:space-between;align-items:center}.mat-dialog-title div{font-size:var(--mdc-dialog-subhead-size, 14px);font-weight:var(--mdc-dialog-subhead-weight, 500)}::ng-deep .mdc-dialog .mdc-dialog__content{padding:6px 20px!important}mat-dialog-actions{justify-content:space-between;align-items:center;padding-left:20px;padding-right:20px}::ng-deep .mat-mdc-tab-body-wrapper{margin-left:-12px;margin-right:-12px}::ng-deep mat-tab-body{padding-top:10px;padding-left:12px;padding-right:12px}::ng-deep mat-tab-body .mat-mdc-tab-body-content{overflow:initial}::ng-deep .mat-mdc-form-field.mat-form-field-disabled label{color:#0009}::ng-deep .mat-mdc-form-field.mat-form-field-disabled input,::ng-deep .mat-mdc-form-field.mat-form-field-disabled textarea,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-select-disabled,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-select-value{color:#000}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-chip.mat-mdc-standard-chip.mat-mdc-chip-disabled{opacity:1}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-chip.mat-mdc-standard-chip.mat-mdc-chip-disabled button{opacity:.2}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-date-range-input-inner:disabled{color:#000}::ng-deep .mat-mdc-form-field .mat-mdc-slide-toggle{opacity:1}.entityArray .elevation-container{border-radius:5px;padding:15px;margin-bottom:15px;margin-top:15px}.entityArray .array-headline{padding-bottom:10px}.entityArray .buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px}.entityArray mat-table{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:25px}.entityArray .mat-column-select{flex:0 0 75px}.entityArray .entity:hover{cursor:pointer}.entityArray .array-error{display:flex;align-items:center;justify-content:center;margin-top:-25.8px;border:1px solid #E0E0E0;background-color:#f8d3d7;color:#721c24;height:25.8px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.hasMany button{width:100%;height:56px;line-height:24px;font-size:16px}.hasMany .title{text-align:center}.hasMany .elevation-container{border-radius:5px;padding:5px;margin-bottom:15px}.hasMany .enabled:hover{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i4$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i8.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i8.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i8.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i8.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i8.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i8.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i8.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i8.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i8.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i8.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6$1.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i6$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }, { kind: "component", type: i11.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i11.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i11.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i12.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i13.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: StringInputComponent, selector: "string-input" }, { kind: "component", type: StringTextboxInputComponent, selector: "string-textbox-input" }, { kind: "component", type: StringAutocompleteInputComponent, selector: "string-autocomplete-input" }, { kind: "component", type: StringDropdownInputComponent, selector: "string-dropdown-input" }, { kind: "component", type: StringPasswordInputComponent, selector: "string-password-input" }, { kind: "component", type: BooleanCheckboxInputComponent, selector: "boolean-checkbox-input" }, { kind: "component", type: BooleanToggleInputComponent, selector: "boolean-toggle-input" }, { kind: "component", type: BooleanDropdownInputComponent, selector: "boolean-dropdown-input" }, { kind: "component", type: NumberInputComponent, selector: "number-input" }, { kind: "component", type: NumberDropdownInputComponent, selector: "number-dropdown-input" }, { kind: "component", type: NumberSliderInputComponent, selector: "number-slider-input" }, { kind: "component", type: ArrayStringChipsInputComponent, selector: "array-string-chips-input" }, { kind: "component", type: ArrayStringAutocompleteChipsComponent, selector: "array-string-autocomplete-chips" }, { kind: "component", type: DateInputComponent, selector: "date-input" }, { kind: "component", type: DateRangeInputComponent, selector: "date-range-input" }, { kind: "component", type: DateTimeInputComponent, selector: "date-time-input" }, { kind: "component", type: ArrayDateInputComponent, selector: "array-date-input" }, { kind: "component", type: ArrayDateTimeInputComponent, selector: "array-date-time-input" }, { kind: "component", type: ArrayDateRangeInputComponent, selector: "array-date-range-input" }, { kind: "component", type: FileImageInputComponent, selector: "file-image-input" }, { kind: "component", type: FileDefaultInputComponent, selector: "file-default-input" }, { kind: "component", type: ReferencesManyInputComponent, selector: "references-many-input" }, { kind: "component", type: CustomInputComponent, selector: "custom-input" }, { kind: "component", type: NgxMatEntityInputComponent, selector: "ngx-mat-entity-input", inputs: ["entity", "propertyKey", "getValidationErrorMessage", "hideOmitForCreate", "hideOmitForEdit", "isReadOnly"], outputs: ["inputChangeEvent"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NgxMatEntityInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-mat-entity-input', template: "<div [ngSwitch]=\"type\" *ngIf=\"!(hideOmitForCreate && metadata.omitForCreate) && !(hideOmitForEdit && metadata.omitForUpdate)\">\n    <!-------------------------------------------->\n    <!-----------------Strings-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.STRING\">\n        <string-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </string-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_TEXTBOX\">\n        <string-textbox-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </string-textbox-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_AUTOCOMPLETE\">\n        <string-autocomplete-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </string-autocomplete-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_DROPDOWN\">\n        <string-dropdown-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </string-dropdown-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_PASSWORD\">\n        <string-password-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </string-password-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-----------------Booleans------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_CHECKBOX\">\n        <boolean-checkbox-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </boolean-checkbox-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_TOGGLE\">\n        <boolean-toggle-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </boolean-toggle-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_DROPDOWN\">\n        <boolean-dropdown-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </boolean-dropdown-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!------------------Numbers------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.NUMBER\">\n        <number-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </number-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.NUMBER_DROPDOWN\">\n        <number-dropdown-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </number-dropdown-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.NUMBER_SLIDER\">\n        <number-slider-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </number-slider-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Array-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_DATE\">\n        <array-date-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </array-date-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_DATE_TIME\">\n        <array-date-time-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </array-date-time-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_DATE_RANGE\">\n        <array-date-range-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </array-date-range-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_STRING_CHIPS\">\n        <array-string-chips-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </array-string-chips-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_STRING_AUTOCOMPLETE_CHIPS\">\n        <array-string-autocomplete-chips\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </array-string-autocomplete-chips>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Dates-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.DATE\">\n        <date-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </date-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.DATE_RANGE\">\n        <date-range-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </date-range-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.DATE_TIME\">\n        <date-time-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </date-time-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Files-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.FILE_DEFAULT\">\n        <file-default-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </file-default-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.FILE_IMAGE\">\n        <file-image-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </file-image-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------- references many ------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.REFERENCES_MANY\">\n        <references-many-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </references-many-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Custom------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.CUSTOM\">\n        <custom-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </custom-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Object------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.OBJECT\">\n        <b>{{metadataDefaultObject.displayName}}</b>\n        <!-- iterates over the object properties -->\n        <mat-tab-group *ngIf=\"objectPropertyTabs.length > 1\" preserveContent>\n            <mat-tab *ngFor=\"let tab of objectPropertyTabs; let tI = index; trackBy: trackByFn\" [label]=\"tab.tabName\">\n                <div class=\"row\" *ngFor=\"let row of tab.rows;\">\n                    <ngx-mat-entity-input *ngFor=\"let key of row.keys; let rI = index; trackBy: trackByFn\"\n                        [entity]=\"objectProperty\"\n                        [propertyKey]=\"key\"\n                        [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                        [hideOmitForCreate]=\"hideOmitForCreate\"\n                        [hideOmitForEdit]=\"hideOmitForEdit\"\n                        [isReadOnly]=\"internalIsReadOnly\"\n                        class=\"col-lg-{{EntityUtilities.getWidth(objectProperty, key, 'lg')}} col-md-{{EntityUtilities.getWidth(objectProperty, key, 'md')}} col-sm-{{EntityUtilities.getWidth(objectProperty, key, 'sm')}}\"\n                        (inputChangeEvent)=\"emitChange()\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </mat-tab>\n        </mat-tab-group>\n\n        <div *ngIf=\"objectPropertyTabs.length <= 1\">\n            <div class=\"row\" *ngFor=\"let row of objectPropertyTabs[0].rows\">\n                <ngx-mat-entity-input *ngFor=\"let key of row.keys; let i = index; trackBy: trackByFn\"\n                    [entity]=\"objectProperty\"\n                    [propertyKey]=\"key\"\n                    [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                    [hideOmitForCreate]=\"hideOmitForCreate\"\n                    [hideOmitForEdit]=\"hideOmitForEdit\"\n                    [isReadOnly]=\"internalIsReadOnly\"\n                    class=\"col-lg-{{EntityUtilities.getWidth(objectProperty, key, 'lg')}} col-md-{{EntityUtilities.getWidth(objectProperty, key, 'md')}} col-sm-{{EntityUtilities.getWidth(objectProperty, key, 'sm')}}\"\n                    (inputChangeEvent)=\"emitChange()\"\n                >\n                </ngx-mat-entity-input>\n            </div>\n        </div>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Array-------------------->\n    <!-------------------------------------------->\n    <div class=\"entityArray\" *ngSwitchCase=\"DecoratorTypes.ARRAY\">\n        <div class=\"mat-elevation-z8 elevation-container\">\n            <div class=\"array-headline\">\n                <b>{{metadataEntityArray.displayName}}</b>\n            </div>\n            <div *ngIf=\"metadataEntityArray.createInline && !internalIsReadOnly\">\n                <mat-tab-group *ngIf=\"arrayItemInlineTabs.length > 1\" preserveContent>\n                    <mat-tab *ngFor=\"let tab of arrayItemInlineTabs\" [label]=\"tab.tabName\">\n                        <div class=\"row\" *ngFor=\"let row of tab.rows\">\n                            <ngx-mat-entity-input\n                                *ngFor=\"let key of row.keys; let i = index; trackBy: trackByFn\"\n                                [entity]=\"arrayItem\"\n                                [propertyKey]=\"key\"\n                                [hideOmitForCreate]=\"true\"\n                                [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                                class=\"col-lg-{{EntityUtilities.getWidth(arrayItem, key, 'lg')}} col-md-{{EntityUtilities.getWidth(arrayItem, key, 'md')}} col-sm-{{EntityUtilities.getWidth(arrayItem, key, 'sm')}}\"\n                                (inputChangeEvent)=\"checkIsArrayItemValid()\"\n                            >\n                            </ngx-mat-entity-input>\n                        </div>\n                    </mat-tab>\n                </mat-tab-group>\n\n                <div *ngIf=\"arrayItemInlineTabs.length <= 1\">\n                    <div class=\"row\" *ngFor=\"let row of arrayItemInlineTabs[0].rows\">\n                        <ngx-mat-entity-input\n                            *ngFor=\"let key of row.keys; let i = index; trackBy: trackByFn\"\n                            [entity]=\"arrayItem\"\n                            [propertyKey]=\"key\"\n                            [hideOmitForCreate]=\"true\"\n                            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                            class=\"col-lg-{{EntityUtilities.getWidth(arrayItem, key, 'lg')}} col-md-{{EntityUtilities.getWidth(arrayItem, key, 'md')}} col-sm-{{EntityUtilities.getWidth(arrayItem, key, 'sm')}}\"\n                            (inputChangeEvent)=\"checkIsArrayItemValid()\"\n                        >\n                        </ngx-mat-entity-input>\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"buttons\" *ngIf=\"!internalIsReadOnly\">\n                <button type=\"button\" mat-raised-button\n                    [disabled]=\"metadataEntityArray.createInline && !isArrayItemValid\"\n                    (click)=\"addEntity()\">\n                    {{metadataEntityArray.addButtonLabel}}\n                </button>\n                <button type=\"button\" mat-raised-button\n                    [disabled]=\"!entityArraySelection.selected.length\"\n                    (click)=\"removeFromEntityArray()\">\n                    {{metadataEntityArray.removeButtonLabel}}\n                </button>\n            </div>\n        \n            <mat-table [dataSource]=\"entityArrayDataSource\">\n                <!-- select Column -->\n                <ng-container matColumnDef=\"select\" *ngIf=\"!internalIsReadOnly\">\n                    <mat-header-cell *matHeaderCellDef>\n                        <mat-checkbox\n                            [disabled]=\"!entityArrayDataSource.data.length\" (change)=\"$event ? SelectionUtilities.masterToggle(entityArraySelection, entityArrayDataSource) : null\"\n                            [checked]=\"entityArraySelection.hasValue() && SelectionUtilities.isAllSelected(entityArraySelection, entityArrayDataSource)\"\n                            [indeterminate]=\"entityArraySelection.hasValue() && !SelectionUtilities.isAllSelected(entityArraySelection, entityArrayDataSource)\">\n                        </mat-checkbox>\n                    </mat-header-cell>\n                    <mat-cell *matCellDef=\"let entity\">\n                        <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? entityArraySelection.toggle(entity) : null\" [checked]=\"entityArraySelection.isSelected(entity)\"></mat-checkbox>\n                    </mat-cell>\n                </ng-container>\n            \n                <ng-container *ngFor=\"let dCol of metadataEntityArray.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n                    <mat-header-cell *matHeaderCellDef>\n                        {{dCol.displayName}}\n                    </mat-header-cell>\n                    <mat-cell (click)=\"editArrayItem(entity)\" class=\"entity\" *matCellDef=\"let entity\">\n                        {{dCol.value(entity)}}\n                    </mat-cell>\n                </ng-container>\n            \n                <mat-header-row *matHeaderRowDef=\"entityArrayDisplayedColumns\"></mat-header-row>\n                <mat-row *matRowDef=\"let row; columns: entityArrayDisplayedColumns\"></mat-row>\n            </mat-table>\n        \n            <div class=\"array-error\" *ngIf=\"metadataEntityArray.required && !entityArrayDataSource.data.length\">\n                {{metadataEntityArray.missingErrorMessage}}\n            </div>\n        </div>\n    </div>\n\n    <!-------------------------------------------->\n    <!------------------ has many ---------------->\n    <!-------------------------------------------->\n    <div class=\"hasMany\" *ngSwitchCase=\"DecoratorTypes.HAS_MANY\">\n        <h2 class=\"title\">{{metadataHasMany.tableData.baseData.title}}</h2>\n\n        <div class=\"row\">\n            <mat-form-field class=\"col-lg-8 col-md-6 col-sm-12\">\n                <mat-label>{{metadataHasMany.tableData.baseData.searchLabel}}</mat-label>\n                <input matInput (keyup)=\"applyHasManyFilter($event)\">\n            </mat-form-field>\n            <div\n                *ngIf=\"metadataHasMany.tableData.baseData.multiSelectActions.length\"\n                [class.col-lg-2]=\"metadataHasMany.tableData.baseData.allowCreate()\"\n                [class.col-lg-4]=\"!metadataHasMany.tableData.baseData.allowCreate()\"\n                [class.col-md-3]=\"metadataHasMany.tableData.baseData.allowCreate()\"\n                [class.col-md-6]=\"!metadataHasMany.tableData.baseData.allowCreate()\"\n                [class.col-sm-6]=\"metadataHasMany.tableData.baseData.allowCreate()\"\n                [class.col-sm-12]=\"!metadataHasMany.tableData.baseData.allowCreate()\"\n            >\n                <button type=\"button\" class=\"actions-button\" [matMenuTriggerFor]=\"menu\" mat-raised-button>\n                    {{metadataHasMany.tableData.baseData.multiSelectLabel}}\n                </button>\n            </div>\n            <mat-menu #menu=\"matMenu\">\n                <button *ngIf=\"metadataHasMany.tableData.baseData.allowJsonImport\" type=\"button\" [disabled]=\"hasManyImportAction.enabled?.(this.hasManySelection.selected) === false\" (click)=\"runHasManyMultiAction(hasManyImportAction)\" mat-menu-item>\n                    {{hasManyImportAction.displayName}}\n                </button>\n                <button type=\"button\" *ngFor=\"let action of metadataHasMany.tableData.baseData.multiSelectActions\" [disabled]=\"hasManyMultiActionDisabled(action)\" (click)=\"runHasManyMultiAction(action)\" mat-menu-item>\n                    {{action.displayName}}\n                </button>\n            </mat-menu>\n\n            <div\n                *ngIf=\"metadataHasMany.tableData.baseData.allowCreate()\"\n                [class.col-lg-2]=\"metadataHasMany.tableData.baseData.multiSelectActions.length\"\n                [class.col-lg-4]=\"!metadataHasMany.tableData.baseData.multiSelectActions.length\"\n                [class.col-md-3]=\"metadataHasMany.tableData.baseData.multiSelectActions.length\"\n                [class.col-md-6]=\"!metadataHasMany.tableData.baseData.multiSelectActions.length\"\n                [class.col-sm-6]=\"metadataHasMany.tableData.baseData.multiSelectActions.length\"\n                [class.col-sm-12]=\"!metadataHasMany.tableData.baseData.multiSelectActions.length\"\n            >\n                <button type=\"button\" class=\"create-button\" (click)=\"createHasManyEntity()\" mat-raised-button>\n                    {{metadataHasMany.tableData.baseData.createButtonLabel}}\n                </button>\n            </div>\n        </div>\n\n        <div class=\"mat-elevation-z8 elevation-container\">\n            <mat-table [dataSource]=\"hasManyDataSource\" matSort>\n                <!-- select Column -->\n                <ng-container matColumnDef=\"select\">\n                    <mat-header-cell *matHeaderCellDef>\n                        <mat-checkbox (change)=\"$event ? SelectionUtilities.masterToggle(hasManySelection, hasManyDataSource) : null\" [checked]=\"hasManySelection.hasValue() && SelectionUtilities.isAllSelected(hasManySelection, hasManyDataSource)\" [indeterminate]=\"hasManySelection.hasValue() && !SelectionUtilities.isAllSelected(hasManySelection, hasManyDataSource)\"> </mat-checkbox>\n                    </mat-header-cell>\n                    <mat-cell *matCellDef=\"let entity\" class=\"entity\">\n                        <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? hasManySelection.toggle(entity) : null\" [checked]=\"hasManySelection.isSelected(entity)\"> </mat-checkbox>\n                    </mat-cell>\n                </ng-container>\n\n                <ng-container *ngFor=\"let dCol of metadataHasMany.tableData.baseData.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n                    <mat-header-cell *matHeaderCellDef mat-sort-header>\n                        {{dCol.displayName}}\n                    </mat-header-cell>\n                    <mat-cell class=\"entity\" [class.enabled]=\"metadataHasMany.tableData.baseData.allowUpdate(entity) || metadataHasMany.tableData.baseData.allowRead(entity)\" (click)=\"editHasManyEntity(entity)\" *matCellDef=\"let entity\">\n                        {{dCol.value(entity)}}\n                    </mat-cell>\n                </ng-container>\n\n                <mat-header-row *matHeaderRowDef=\"displayedHasManyColumns\"></mat-header-row>\n                <mat-row *matRowDef=\"let row; columns: displayedHasManyColumns\"></mat-row>\n            </mat-table>\n\n            <mat-spinner *ngIf=\"hasManyIsLoading && metadataHasMany.tableData.baseData.displayLoadingSpinner\" style=\"margin-left: auto; margin-right: auto; margin-top: 10px; margin-bottom: 10px;\">\n            </mat-spinner>\n\n            <mat-paginator [length]=\"hasManyDataSource.filteredData.length\" [pageIndex]=\"0\" [pageSize]=\"10\" [pageSizeOptions]=\"[5, 10, 25, 50]\"></mat-paginator>\n        </div>\n    </div>\n\n    <div *ngSwitchDefault>ERROR: The type {{type}} is not known.</div>\n</div>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n<!--------------------------------------------------------->\n<!--------------------Add Array Item Dialog---------------->\n<!--------------------------------------------------------->\n<ng-template #addArrayItemDialog>\n    <div class=\"mat-dialog-title\">\n        <div>{{addArrayItemDialogData.title}}</div>\n    </div>\n\n    <form>\n        <mat-dialog-content>\n            <mat-tab-group *ngIf=\"arrayItemDialogTabs.length > 1\" preserveContent>\n                <mat-tab *ngFor=\"let tab of arrayItemDialogTabs\" [label]=\"tab.tabName\">\n                    <div class=\"row\" *ngFor=\"let row of tab.rows\">\n                        <ngx-mat-entity-input\n                            *ngFor=\"let key of row.keys\"\n                            [entity]=\"arrayItem\"\n                            [propertyKey]=\"key\"\n                            [hideOmitForCreate]=\"true\"\n                            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                            class=\"col-lg-{{EntityUtilities.getWidth(arrayItem, key, 'lg')}} col-md-{{EntityUtilities.getWidth(arrayItem, key, 'md')}} col-sm-{{EntityUtilities.getWidth(arrayItem, key, 'sm')}}\"\n                            (inputChangeEvent)=\"checkIsArrayItemValid()\"\n                        >\n                        </ngx-mat-entity-input>\n                    </div>\n                </mat-tab>\n            </mat-tab-group>\n    \n            <div *ngIf=\"arrayItemDialogTabs.length <= 1\">\n                <div class=\"row\" *ngFor=\"let row of arrayItemDialogTabs[0].rows\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"arrayItem\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForCreate]=\"true\"\n                        [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                        class=\"col-lg-{{EntityUtilities.getWidth(arrayItem, key, 'lg')}} col-md-{{EntityUtilities.getWidth(arrayItem, key, 'md')}} col-sm-{{EntityUtilities.getWidth(arrayItem, key, 'sm')}}\"\n                        (inputChangeEvent)=\"checkIsArrayItemValid()\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </div>\n        </mat-dialog-content>\n    \n        <mat-dialog-actions>\n            <button type=\"submit\" mat-raised-button (click)=\"addArrayItem()\" [disabled]=\"!isArrayItemValid\">\n                {{addArrayItemDialogData.createButtonLabel}}\n            </button>\n            <button type=\"button\" mat-raised-button (click)=\"closeAddArrayItemDialog()\" class=\"cancel-button\">\n                {{addArrayItemDialogData.cancelButtonLabel}}\n            </button>\n        </mat-dialog-actions>\n    </form>\n\n</ng-template>\n\n<!--------------------------------------------------------->\n<!--------------------Edit Array Item Dialog---------------->\n<!--------------------------------------------------------->\n<ng-template #editArrayItemDialog>\n    <div class=\"mat-dialog-title\">\n        <div>{{editArrayItemDialogData.title(arrayItem)}}</div>\n    </div>\n    \n    <form>\n        <mat-dialog-content>\n            <mat-tab-group *ngIf=\"arrayItemDialogTabs.length > 1\" preserveContent>\n                <mat-tab *ngFor=\"let tab of arrayItemDialogTabs\" [label]=\"tab.tabName\">\n                    <div class=\"row\" *ngFor=\"let row of tab.rows\">\n                        <ngx-mat-entity-input\n                            *ngFor=\"let key of row.keys\"\n                            [entity]=\"arrayItem\"\n                            [propertyKey]=\"key\"\n                            [hideOmitForEdit]=\"true\"\n                            class=\"col-lg-{{EntityUtilities.getWidth(arrayItem, key, 'lg')}} col-md-{{EntityUtilities.getWidth(arrayItem, key, 'md')}} col-sm-{{EntityUtilities.getWidth(arrayItem, key, 'sm')}}\"\n                            (inputChangeEvent)=\"checkArrayItem()\"\n                            [isReadOnly]=\"internalIsReadOnly\"\n                        >\n                        </ngx-mat-entity-input>\n                    </div>\n                </mat-tab>\n            </mat-tab-group>\n        \n            <div *ngIf=\"arrayItemDialogTabs.length <= 1\">\n                <div class=\"row\" *ngFor=\"let row of arrayItemDialogTabs[0].rows\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"arrayItem\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForEdit]=\"true\"\n                        class=\"col-lg-{{EntityUtilities.getWidth(arrayItem, key, 'lg')}} col-md-{{EntityUtilities.getWidth(arrayItem, key, 'md')}} col-sm-{{EntityUtilities.getWidth(arrayItem, key, 'sm')}}\"\n                        (inputChangeEvent)=\"checkArrayItem()\"\n                        [isReadOnly]=\"internalIsReadOnly\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </div>\n        </mat-dialog-content>\n        \n        <mat-dialog-actions>\n            <button type=\"submit\" (click)=\"saveArrayItem()\" mat-raised-button [disabled]=\"internalIsReadOnly || !isArrayItemValid || !isArrayItemDirty\">\n                {{editArrayItemDialogData.confirmButtonLabel}}\n            </button>\n            <button type=\"button\" mat-raised-button (click)=\"closeEditArrayItemDialog()\" class=\"cancel-button\">\n                {{editArrayItemDialogData.cancelButtonLabel}}\n            </button>\n        </mat-dialog-actions>\n    </form>\n</ng-template>\n\n<!--------------------------------------------------------->\n<!--------------------Create Has Many Dialog---------------->\n<!--------------------------------------------------------->\n<ng-template #createHasManyDialog>\n    <div class=\"mat-dialog-title\">\n        <div>{{metadataHasMany.tableData.createDialogData.title}}</div>\n    </div>\n    \n    <form>\n        <mat-dialog-content>\n            <mat-tab-group *ngIf=\"hasManyCreateTabs.length > 1\" preserveContent>\n                <mat-tab *ngFor=\"let tab of hasManyCreateTabs\" [label]=\"tab.tabName\">\n                    <div class=\"row\" *ngFor=\"let row of tab.rows\">\n                        <ngx-mat-entity-input\n                            *ngFor=\"let key of row.keys\"\n                            [entity]=\"hasManyEntity\"\n                            [propertyKey]=\"key\"\n                            [hideOmitForCreate]=\"true\"\n                            class=\"col-lg-{{EntityUtilities.getWidth(hasManyEntity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(hasManyEntity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(hasManyEntity, key, 'sm')}}\"\n                            (inputChangeEvent)=\"checkIsHasManyEntityValid('create')\"\n                        >\n                        </ngx-mat-entity-input>\n                    </div>\n                </mat-tab>\n            </mat-tab-group>\n        \n            <div *ngIf=\"hasManyCreateTabs.length <= 1\">\n                <div class=\"row\" *ngFor=\"let row of hasManyCreateTabs[0].rows\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"hasManyEntity\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForCreate]=\"true\"\n                        class=\"col-lg-{{EntityUtilities.getWidth(hasManyEntity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(hasManyEntity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(hasManyEntity, key, 'sm')}}\"\n                        (inputChangeEvent)=\"checkIsHasManyEntityValid('create')\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </div>\n        </mat-dialog-content>\n        \n        <mat-dialog-actions>\n            <button type=\"submit\" (click)=\"dialogCreateHasMany()\" mat-raised-button [disabled]=\"!isHasManyEntityValid\">\n                {{metadataHasMany.tableData.createDialogData.createButtonLabel}}\n            </button>\n            <button type=\"button\" mat-raised-button (click)=\"dialogCancelCreateHasMany()\" class=\"cancel-button\">\n                {{metadataHasMany.tableData.createDialogData.cancelButtonLabel}}\n            </button>\n        </mat-dialog-actions>\n    </form>\n    \n</ng-template>\n\n<ng-template #editHasManyDialog>\n    <div class=\"mat-dialog-title\">\n        <div>{{metadataHasMany.tableData.editData.title(hasManyEntity)}}</div>\n        <button type=\"button\" *ngIf=\"metadataHasMany.tableData.baseData.allowDelete(hasManyEntity)\" mat-raised-button (click)=\"deleteHasManyEntity()\" color=\"warn\" class=\"delete-button\" tabindex=\"-1\">\n            {{metadataHasMany.tableData.editData.deleteButtonLabel}}\n        </button>\n    </div>\n    \n    <form>\n        <mat-dialog-content>\n            <mat-tab-group *ngIf=\"hasManyUpdateTabs.length > 1\" preserveContent>\n                <mat-tab *ngFor=\"let tab of hasManyUpdateTabs\" [label]=\"tab.tabName\">\n                    <div class=\"row\" *ngFor=\"let row of tab.rows\">\n                        <ngx-mat-entity-input\n                            *ngFor=\"let key of row.keys\"\n                            [entity]=\"hasManyEntity\"\n                            [propertyKey]=\"key\"\n                            [hideOmitForEdit]=\"true\"\n                            class=\"col-lg-{{EntityUtilities.getWidth(hasManyEntity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(hasManyEntity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(hasManyEntity, key, 'sm')}}\"\n                            (inputChangeEvent)=\"checkHasManyEntity()\"\n                            [isReadOnly]=\"isReadOnly\"\n                        >\n                        </ngx-mat-entity-input>\n                    </div>\n                </mat-tab>\n            </mat-tab-group>\n        \n            <div *ngIf=\"hasManyUpdateTabs.length <= 1\">\n                <div class=\"row\" *ngFor=\"let row of hasManyUpdateTabs[0].rows\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"hasManyEntity\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForEdit]=\"true\"\n                        class=\"col-lg-{{EntityUtilities.getWidth(hasManyEntity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(hasManyEntity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(hasManyEntity, key, 'sm')}}\"\n                        (inputChangeEvent)=\"checkHasManyEntity()\"\n                        [isReadOnly]=\"isReadOnly\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </div>\n        </mat-dialog-content>\n        \n        <mat-dialog-actions>\n            <button type=\"submit\" (click)=\"dialogEditHasMany()\" mat-raised-button [disabled]=\"isReadOnly || !isHasManyEntityValid || !isHasManyEntityDirty\">\n                {{metadataHasMany.tableData.editData.confirmButtonLabel}}\n            </button>\n            <button type=\"button\" mat-raised-button (click)=\"dialogCancelEditHasMany()\" class=\"cancel-button\">\n                {{metadataHasMany.tableData.editData.cancelButtonLabel}}\n            </button>\n        </mat-dialog-actions>\n    </form>    \n</ng-template>", styles: [".mdc-data-table__row:last-child .mdc-data-table__cell{border-bottom:1px solid rgba(0,0,0,.12)}.mat-dialog-title{padding:12px 20px;display:flex;justify-content:space-between;align-items:center}.mat-dialog-title div{font-size:var(--mdc-dialog-subhead-size, 14px);font-weight:var(--mdc-dialog-subhead-weight, 500)}::ng-deep .mdc-dialog .mdc-dialog__content{padding:6px 20px!important}mat-dialog-actions{justify-content:space-between;align-items:center;padding-left:20px;padding-right:20px}::ng-deep .mat-mdc-tab-body-wrapper{margin-left:-12px;margin-right:-12px}::ng-deep mat-tab-body{padding-top:10px;padding-left:12px;padding-right:12px}::ng-deep mat-tab-body .mat-mdc-tab-body-content{overflow:initial}::ng-deep .mat-mdc-form-field.mat-form-field-disabled label{color:#0009}::ng-deep .mat-mdc-form-field.mat-form-field-disabled input,::ng-deep .mat-mdc-form-field.mat-form-field-disabled textarea,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-select-disabled,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-select-value{color:#000}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-chip.mat-mdc-standard-chip.mat-mdc-chip-disabled{opacity:1}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-chip.mat-mdc-standard-chip.mat-mdc-chip-disabled button{opacity:.2}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-date-range-input-inner:disabled{color:#000}::ng-deep .mat-mdc-form-field .mat-mdc-slide-toggle{opacity:1}.entityArray .elevation-container{border-radius:5px;padding:15px;margin-bottom:15px;margin-top:15px}.entityArray .array-headline{padding-bottom:10px}.entityArray .buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px}.entityArray mat-table{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:25px}.entityArray .mat-column-select{flex:0 0 75px}.entityArray .entity:hover{cursor:pointer}.entityArray .array-error{display:flex;align-items:center;justify-content:center;margin-top:-25.8px;border:1px solid #E0E0E0;background-color:#f8d3d7;color:#721c24;height:25.8px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.hasMany button{width:100%;height:56px;line-height:24px;font-size:16px}.hasMany .title{text-align:center}.hasMany .elevation-container{border-radius:5px;padding:5px;margin-bottom:15px}.hasMany .enabled:hover{cursor:pointer}\n"] }]
+            args: [{ selector: 'ngx-mat-entity-input', template: "<div [ngSwitch]=\"type\" *ngIf=\"!(hideOmitForCreate && metadata.omitForCreate) && !(hideOmitForEdit && metadata.omitForUpdate)\">\n    <!-------------------------------------------->\n    <!-----------------Strings-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.STRING\">\n        <string-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </string-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_TEXTBOX\">\n        <string-textbox-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </string-textbox-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_AUTOCOMPLETE\">\n        <string-autocomplete-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </string-autocomplete-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_DROPDOWN\">\n        <string-dropdown-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </string-dropdown-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_PASSWORD\">\n        <string-password-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </string-password-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-----------------Booleans------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_CHECKBOX\">\n        <boolean-checkbox-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </boolean-checkbox-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_TOGGLE\">\n        <boolean-toggle-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </boolean-toggle-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_DROPDOWN\">\n        <boolean-dropdown-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </boolean-dropdown-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!------------------Numbers------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.NUMBER\">\n        <number-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </number-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.NUMBER_DROPDOWN\">\n        <number-dropdown-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </number-dropdown-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.NUMBER_SLIDER\">\n        <number-slider-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </number-slider-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Array-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_DATE\">\n        <array-date-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </array-date-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_DATE_TIME\">\n        <array-date-time-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </array-date-time-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_DATE_RANGE\">\n        <array-date-range-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </array-date-range-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_STRING_CHIPS\">\n        <array-string-chips-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </array-string-chips-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_STRING_AUTOCOMPLETE_CHIPS\">\n        <array-string-autocomplete-chips\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </array-string-autocomplete-chips>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Dates-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.DATE\">\n        <date-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </date-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.DATE_RANGE\">\n        <date-range-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </date-range-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.DATE_TIME\">\n        <date-time-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </date-time-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Files-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.FILE_DEFAULT\">\n        <file-default-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </file-default-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.FILE_IMAGE\">\n        <file-image-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </file-image-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------- references many ------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.REFERENCES_MANY\">\n        <references-many-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </references-many-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Custom------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.CUSTOM\">\n        <custom-input\n            (inputChangeEvent)=\"emitChange()\"\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n        >\n        </custom-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Object------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.OBJECT\">\n        <b>{{metadataDefaultObject.displayName}}</b>\n        <!-- iterates over the object properties -->\n        <mat-tab-group *ngIf=\"objectPropertyTabs.length > 1\" preserveContent>\n            <mat-tab *ngFor=\"let tab of objectPropertyTabs; let tI = index; trackBy: trackByFn\" [label]=\"tab.tabName\">\n                <div class=\"row\" *ngFor=\"let row of tab.rows;\">\n                    <ngx-mat-entity-input *ngFor=\"let key of row.keys; let rI = index; trackBy: trackByFn\"\n                        [entity]=\"objectProperty\"\n                        [propertyKey]=\"key\"\n                        [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                        [hideOmitForCreate]=\"hideOmitForCreate\"\n                        [hideOmitForEdit]=\"hideOmitForEdit\"\n                        [isReadOnly]=\"isPropertyReadOnly(objectProperty, key)\"\n                        class=\"col-lg-{{EntityUtilities.getWidth(objectProperty, key, 'lg')}} col-md-{{EntityUtilities.getWidth(objectProperty, key, 'md')}} col-sm-{{EntityUtilities.getWidth(objectProperty, key, 'sm')}}\"\n                        (inputChangeEvent)=\"emitChange()\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </mat-tab>\n        </mat-tab-group>\n\n        <div *ngIf=\"objectPropertyTabs.length <= 1\">\n            <div class=\"row\" *ngFor=\"let row of objectPropertyTabs[0].rows\">\n                <ngx-mat-entity-input *ngFor=\"let key of row.keys; let i = index; trackBy: trackByFn\"\n                    [entity]=\"objectProperty\"\n                    [propertyKey]=\"key\"\n                    [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                    [hideOmitForCreate]=\"hideOmitForCreate\"\n                    [hideOmitForEdit]=\"hideOmitForEdit\"\n                    [isReadOnly]=\"isPropertyReadOnly(objectProperty, key)\"\n                    class=\"col-lg-{{EntityUtilities.getWidth(objectProperty, key, 'lg')}} col-md-{{EntityUtilities.getWidth(objectProperty, key, 'md')}} col-sm-{{EntityUtilities.getWidth(objectProperty, key, 'sm')}}\"\n                    (inputChangeEvent)=\"emitChange()\"\n                >\n                </ngx-mat-entity-input>\n            </div>\n        </div>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Array-------------------->\n    <!-------------------------------------------->\n    <div class=\"entityArray\" *ngSwitchCase=\"DecoratorTypes.ARRAY\">\n        <div class=\"mat-elevation-z8 elevation-container\">\n            <div class=\"array-headline\">\n                <b>{{metadataEntityArray.displayName}}</b>\n            </div>\n            <div *ngIf=\"metadataEntityArray.createInline && !internalIsReadOnly\">\n                <mat-tab-group *ngIf=\"arrayItemInlineTabs.length > 1\" preserveContent>\n                    <mat-tab *ngFor=\"let tab of arrayItemInlineTabs\" [label]=\"tab.tabName\">\n                        <div class=\"row\" *ngFor=\"let row of tab.rows\">\n                            <ngx-mat-entity-input\n                                *ngFor=\"let key of row.keys; let i = index; trackBy: trackByFn\"\n                                [entity]=\"arrayItem\"\n                                [propertyKey]=\"key\"\n                                [hideOmitForCreate]=\"true\"\n                                [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                                class=\"col-lg-{{EntityUtilities.getWidth(arrayItem, key, 'lg')}} col-md-{{EntityUtilities.getWidth(arrayItem, key, 'md')}} col-sm-{{EntityUtilities.getWidth(arrayItem, key, 'sm')}}\"\n                                (inputChangeEvent)=\"checkIsArrayItemValid()\"\n                            >\n                            </ngx-mat-entity-input>\n                        </div>\n                    </mat-tab>\n                </mat-tab-group>\n\n                <div *ngIf=\"arrayItemInlineTabs.length <= 1\">\n                    <div class=\"row\" *ngFor=\"let row of arrayItemInlineTabs[0].rows\">\n                        <ngx-mat-entity-input\n                            *ngFor=\"let key of row.keys; let i = index; trackBy: trackByFn\"\n                            [entity]=\"arrayItem\"\n                            [propertyKey]=\"key\"\n                            [hideOmitForCreate]=\"true\"\n                            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                            class=\"col-lg-{{EntityUtilities.getWidth(arrayItem, key, 'lg')}} col-md-{{EntityUtilities.getWidth(arrayItem, key, 'md')}} col-sm-{{EntityUtilities.getWidth(arrayItem, key, 'sm')}}\"\n                            (inputChangeEvent)=\"checkIsArrayItemValid()\"\n                        >\n                        </ngx-mat-entity-input>\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"buttons\" *ngIf=\"!internalIsReadOnly\">\n                <button type=\"button\" mat-raised-button\n                    [disabled]=\"metadataEntityArray.createInline && !isArrayItemValid\"\n                    (click)=\"addEntity()\">\n                    {{metadataEntityArray.addButtonLabel}}\n                </button>\n                <button type=\"button\" mat-raised-button\n                    [disabled]=\"!entityArraySelection.selected.length\"\n                    (click)=\"removeFromEntityArray()\">\n                    {{metadataEntityArray.removeButtonLabel}}\n                </button>\n            </div>\n        \n            <mat-table [dataSource]=\"entityArrayDataSource\">\n                <!-- select Column -->\n                <ng-container matColumnDef=\"select\" *ngIf=\"!internalIsReadOnly\">\n                    <mat-header-cell *matHeaderCellDef>\n                        <mat-checkbox\n                            [disabled]=\"!entityArrayDataSource.data.length\" (change)=\"$event ? SelectionUtilities.masterToggle(entityArraySelection, entityArrayDataSource) : null\"\n                            [checked]=\"entityArraySelection.hasValue() && SelectionUtilities.isAllSelected(entityArraySelection, entityArrayDataSource)\"\n                            [indeterminate]=\"entityArraySelection.hasValue() && !SelectionUtilities.isAllSelected(entityArraySelection, entityArrayDataSource)\">\n                        </mat-checkbox>\n                    </mat-header-cell>\n                    <mat-cell *matCellDef=\"let entity\">\n                        <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? entityArraySelection.toggle(entity) : null\" [checked]=\"entityArraySelection.isSelected(entity)\"></mat-checkbox>\n                    </mat-cell>\n                </ng-container>\n            \n                <ng-container *ngFor=\"let dCol of metadataEntityArray.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n                    <mat-header-cell *matHeaderCellDef>\n                        {{dCol.displayName}}\n                    </mat-header-cell>\n                    <mat-cell (click)=\"editArrayItem(entity)\" class=\"entity\" *matCellDef=\"let entity\">\n                        {{dCol.value(entity)}}\n                    </mat-cell>\n                </ng-container>\n            \n                <mat-header-row *matHeaderRowDef=\"entityArrayDisplayedColumns\"></mat-header-row>\n                <mat-row *matRowDef=\"let row; columns: entityArrayDisplayedColumns\"></mat-row>\n            </mat-table>\n        \n            <div class=\"array-error\" *ngIf=\"metadataEntityArray.required && !entityArrayDataSource.data.length\">\n                {{metadataEntityArray.missingErrorMessage}}\n            </div>\n        </div>\n    </div>\n\n    <!-------------------------------------------->\n    <!------------------ has many ---------------->\n    <!-------------------------------------------->\n    <div class=\"hasMany\" *ngSwitchCase=\"DecoratorTypes.HAS_MANY\">\n        <h2 class=\"title\">{{metadataHasMany.tableData.baseData.title}}</h2>\n\n        <div class=\"row\">\n            <mat-form-field class=\"col-lg-8 col-md-6 col-sm-12\">\n                <mat-label>{{metadataHasMany.tableData.baseData.searchLabel}}</mat-label>\n                <input matInput (keyup)=\"applyHasManyFilter($event)\">\n            </mat-form-field>\n            <div\n                *ngIf=\"metadataHasMany.tableData.baseData.multiSelectActions.length\"\n                [class.col-lg-2]=\"metadataHasMany.tableData.baseData.allowCreate()\"\n                [class.col-lg-4]=\"!metadataHasMany.tableData.baseData.allowCreate()\"\n                [class.col-md-3]=\"metadataHasMany.tableData.baseData.allowCreate()\"\n                [class.col-md-6]=\"!metadataHasMany.tableData.baseData.allowCreate()\"\n                [class.col-sm-6]=\"metadataHasMany.tableData.baseData.allowCreate()\"\n                [class.col-sm-12]=\"!metadataHasMany.tableData.baseData.allowCreate()\"\n            >\n                <button type=\"button\" class=\"actions-button\" [matMenuTriggerFor]=\"menu\" mat-raised-button>\n                    {{metadataHasMany.tableData.baseData.multiSelectLabel}}\n                </button>\n            </div>\n            <mat-menu #menu=\"matMenu\">\n                <button *ngIf=\"metadataHasMany.tableData.baseData.allowJsonImport\" type=\"button\" [disabled]=\"hasManyImportAction.enabled?.(this.hasManySelection.selected) === false\" (click)=\"runHasManyMultiAction(hasManyImportAction)\" mat-menu-item>\n                    {{hasManyImportAction.displayName}}\n                </button>\n                <button type=\"button\" *ngFor=\"let action of metadataHasMany.tableData.baseData.multiSelectActions\" [disabled]=\"hasManyMultiActionDisabled(action)\" (click)=\"runHasManyMultiAction(action)\" mat-menu-item>\n                    {{action.displayName}}\n                </button>\n            </mat-menu>\n\n            <div\n                *ngIf=\"metadataHasMany.tableData.baseData.allowCreate()\"\n                [class.col-lg-2]=\"metadataHasMany.tableData.baseData.multiSelectActions.length\"\n                [class.col-lg-4]=\"!metadataHasMany.tableData.baseData.multiSelectActions.length\"\n                [class.col-md-3]=\"metadataHasMany.tableData.baseData.multiSelectActions.length\"\n                [class.col-md-6]=\"!metadataHasMany.tableData.baseData.multiSelectActions.length\"\n                [class.col-sm-6]=\"metadataHasMany.tableData.baseData.multiSelectActions.length\"\n                [class.col-sm-12]=\"!metadataHasMany.tableData.baseData.multiSelectActions.length\"\n            >\n                <button type=\"button\" class=\"create-button\" (click)=\"createHasManyEntity()\" mat-raised-button>\n                    {{metadataHasMany.tableData.baseData.createButtonLabel}}\n                </button>\n            </div>\n        </div>\n\n        <div class=\"mat-elevation-z8 elevation-container\">\n            <mat-table [dataSource]=\"hasManyDataSource\" matSort>\n                <!-- select Column -->\n                <ng-container matColumnDef=\"select\">\n                    <mat-header-cell *matHeaderCellDef>\n                        <mat-checkbox (change)=\"$event ? SelectionUtilities.masterToggle(hasManySelection, hasManyDataSource) : null\" [checked]=\"hasManySelection.hasValue() && SelectionUtilities.isAllSelected(hasManySelection, hasManyDataSource)\" [indeterminate]=\"hasManySelection.hasValue() && !SelectionUtilities.isAllSelected(hasManySelection, hasManyDataSource)\"> </mat-checkbox>\n                    </mat-header-cell>\n                    <mat-cell *matCellDef=\"let entity\" class=\"entity\">\n                        <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? hasManySelection.toggle(entity) : null\" [checked]=\"hasManySelection.isSelected(entity)\"> </mat-checkbox>\n                    </mat-cell>\n                </ng-container>\n\n                <ng-container *ngFor=\"let dCol of metadataHasMany.tableData.baseData.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n                    <mat-header-cell *matHeaderCellDef mat-sort-header>\n                        {{dCol.displayName}}\n                    </mat-header-cell>\n                    <mat-cell class=\"entity\" [class.enabled]=\"metadataHasMany.tableData.baseData.allowUpdate(entity) || metadataHasMany.tableData.baseData.allowRead(entity)\" (click)=\"editHasManyEntity(entity)\" *matCellDef=\"let entity\">\n                        {{dCol.value(entity)}}\n                    </mat-cell>\n                </ng-container>\n\n                <mat-header-row *matHeaderRowDef=\"displayedHasManyColumns\"></mat-header-row>\n                <mat-row *matRowDef=\"let row; columns: displayedHasManyColumns\"></mat-row>\n            </mat-table>\n\n            <mat-spinner *ngIf=\"hasManyIsLoading && metadataHasMany.tableData.baseData.displayLoadingSpinner\" style=\"margin-left: auto; margin-right: auto; margin-top: 10px; margin-bottom: 10px;\">\n            </mat-spinner>\n\n            <mat-paginator [length]=\"hasManyDataSource.filteredData.length\" [pageIndex]=\"0\" [pageSize]=\"10\" [pageSizeOptions]=\"[5, 10, 25, 50]\"></mat-paginator>\n        </div>\n    </div>\n\n    <div *ngSwitchDefault>ERROR: The type {{type}} is not known.</div>\n</div>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n<!--------------------------------------------------------->\n<!--------------------Add Array Item Dialog---------------->\n<!--------------------------------------------------------->\n<ng-template #addArrayItemDialog>\n    <div class=\"mat-dialog-title\">\n        <div>{{addArrayItemDialogData.title}}</div>\n    </div>\n\n    <form>\n        <mat-dialog-content>\n            <mat-tab-group *ngIf=\"arrayItemDialogTabs.length > 1\" preserveContent>\n                <mat-tab *ngFor=\"let tab of arrayItemDialogTabs\" [label]=\"tab.tabName\">\n                    <div class=\"row\" *ngFor=\"let row of tab.rows\">\n                        <ngx-mat-entity-input\n                            *ngFor=\"let key of row.keys\"\n                            [entity]=\"arrayItem\"\n                            [propertyKey]=\"key\"\n                            [hideOmitForCreate]=\"true\"\n                            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                            class=\"col-lg-{{EntityUtilities.getWidth(arrayItem, key, 'lg')}} col-md-{{EntityUtilities.getWidth(arrayItem, key, 'md')}} col-sm-{{EntityUtilities.getWidth(arrayItem, key, 'sm')}}\"\n                            (inputChangeEvent)=\"checkIsArrayItemValid()\"\n                        >\n                        </ngx-mat-entity-input>\n                    </div>\n                </mat-tab>\n            </mat-tab-group>\n    \n            <div *ngIf=\"arrayItemDialogTabs.length <= 1\">\n                <div class=\"row\" *ngFor=\"let row of arrayItemDialogTabs[0].rows\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"arrayItem\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForCreate]=\"true\"\n                        [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                        class=\"col-lg-{{EntityUtilities.getWidth(arrayItem, key, 'lg')}} col-md-{{EntityUtilities.getWidth(arrayItem, key, 'md')}} col-sm-{{EntityUtilities.getWidth(arrayItem, key, 'sm')}}\"\n                        (inputChangeEvent)=\"checkIsArrayItemValid()\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </div>\n        </mat-dialog-content>\n    \n        <mat-dialog-actions>\n            <button type=\"submit\" mat-raised-button (click)=\"addArrayItem()\" [disabled]=\"!isArrayItemValid\">\n                {{addArrayItemDialogData.createButtonLabel}}\n            </button>\n            <button type=\"button\" mat-raised-button (click)=\"closeAddArrayItemDialog()\" class=\"cancel-button\">\n                {{addArrayItemDialogData.cancelButtonLabel}}\n            </button>\n        </mat-dialog-actions>\n    </form>\n\n</ng-template>\n\n<!--------------------------------------------------------->\n<!--------------------Edit Array Item Dialog---------------->\n<!--------------------------------------------------------->\n<ng-template #editArrayItemDialog>\n    <div class=\"mat-dialog-title\">\n        <div>{{editArrayItemDialogData.title(arrayItemPriorChanges)}}</div>\n    </div>\n    \n    <form>\n        <mat-dialog-content>\n            <mat-tab-group *ngIf=\"arrayItemDialogTabs.length > 1\" preserveContent>\n                <mat-tab *ngFor=\"let tab of arrayItemDialogTabs\" [label]=\"tab.tabName\">\n                    <div class=\"row\" *ngFor=\"let row of tab.rows\">\n                        <ngx-mat-entity-input\n                            *ngFor=\"let key of row.keys\"\n                            [entity]=\"arrayItem\"\n                            [propertyKey]=\"key\"\n                            [hideOmitForEdit]=\"true\"\n                            class=\"col-lg-{{EntityUtilities.getWidth(arrayItem, key, 'lg')}} col-md-{{EntityUtilities.getWidth(arrayItem, key, 'md')}} col-sm-{{EntityUtilities.getWidth(arrayItem, key, 'sm')}}\"\n                            (inputChangeEvent)=\"checkArrayItem()\"\n                            [isReadOnly]=\"isPropertyReadOnly(arrayItem, key)\"\n                        >\n                        </ngx-mat-entity-input>\n                    </div>\n                </mat-tab>\n            </mat-tab-group>\n        \n            <div *ngIf=\"arrayItemDialogTabs.length <= 1\">\n                <div class=\"row\" *ngFor=\"let row of arrayItemDialogTabs[0].rows\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"arrayItem\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForEdit]=\"true\"\n                        class=\"col-lg-{{EntityUtilities.getWidth(arrayItem, key, 'lg')}} col-md-{{EntityUtilities.getWidth(arrayItem, key, 'md')}} col-sm-{{EntityUtilities.getWidth(arrayItem, key, 'sm')}}\"\n                        (inputChangeEvent)=\"checkArrayItem()\"\n                        [isReadOnly]=\"isPropertyReadOnly(arrayItem, key)\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </div>\n        </mat-dialog-content>\n        \n        <mat-dialog-actions>\n            <button type=\"submit\" (click)=\"saveArrayItem()\" mat-raised-button [disabled]=\"internalIsReadOnly || !isArrayItemValid || !isArrayItemDirty\">\n                {{editArrayItemDialogData.confirmButtonLabel}}\n            </button>\n            <button type=\"button\" mat-raised-button (click)=\"closeEditArrayItemDialog()\" class=\"cancel-button\">\n                {{editArrayItemDialogData.cancelButtonLabel}}\n            </button>\n        </mat-dialog-actions>\n    </form>\n</ng-template>\n\n<!--------------------------------------------------------->\n<!--------------------Create Has Many Dialog---------------->\n<!--------------------------------------------------------->\n<ng-template #createHasManyDialog>\n    <div class=\"mat-dialog-title\">\n        <div>{{metadataHasMany.tableData.createDialogData.title}}</div>\n    </div>\n    \n    <form>\n        <mat-dialog-content>\n            <mat-tab-group *ngIf=\"hasManyCreateTabs.length > 1\" preserveContent>\n                <mat-tab *ngFor=\"let tab of hasManyCreateTabs\" [label]=\"tab.tabName\">\n                    <div class=\"row\" *ngFor=\"let row of tab.rows\">\n                        <ngx-mat-entity-input\n                            *ngFor=\"let key of row.keys\"\n                            [entity]=\"hasManyEntity\"\n                            [propertyKey]=\"key\"\n                            [hideOmitForCreate]=\"true\"\n                            class=\"col-lg-{{EntityUtilities.getWidth(hasManyEntity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(hasManyEntity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(hasManyEntity, key, 'sm')}}\"\n                            (inputChangeEvent)=\"checkIsHasManyEntityValid('create')\"\n                        >\n                        </ngx-mat-entity-input>\n                    </div>\n                </mat-tab>\n            </mat-tab-group>\n        \n            <div *ngIf=\"hasManyCreateTabs.length <= 1\">\n                <div class=\"row\" *ngFor=\"let row of hasManyCreateTabs[0].rows\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"hasManyEntity\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForCreate]=\"true\"\n                        class=\"col-lg-{{EntityUtilities.getWidth(hasManyEntity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(hasManyEntity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(hasManyEntity, key, 'sm')}}\"\n                        (inputChangeEvent)=\"checkIsHasManyEntityValid('create')\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </div>\n        </mat-dialog-content>\n        \n        <mat-dialog-actions>\n            <button type=\"submit\" (click)=\"dialogCreateHasMany()\" mat-raised-button [disabled]=\"!isHasManyEntityValid\">\n                {{metadataHasMany.tableData.createDialogData.createButtonLabel}}\n            </button>\n            <button type=\"button\" mat-raised-button (click)=\"dialogCancelCreateHasMany()\" class=\"cancel-button\">\n                {{metadataHasMany.tableData.createDialogData.cancelButtonLabel}}\n            </button>\n        </mat-dialog-actions>\n    </form>\n    \n</ng-template>\n\n<ng-template #editHasManyDialog>\n    <div class=\"mat-dialog-title\">\n        <div>{{metadataHasMany.tableData.editData.title(hasManyEntityPriorChanges)}}</div>\n        <button type=\"button\" *ngIf=\"metadataHasMany.tableData.baseData.allowDelete(hasManyEntity)\" mat-raised-button (click)=\"deleteHasManyEntity()\" color=\"warn\" class=\"delete-button\" tabindex=\"-1\">\n            {{metadataHasMany.tableData.editData.deleteButtonLabel}}\n        </button>\n    </div>\n    \n    <form>\n        <mat-dialog-content>\n            <mat-tab-group *ngIf=\"hasManyUpdateTabs.length > 1\" preserveContent>\n                <mat-tab *ngFor=\"let tab of hasManyUpdateTabs\" [label]=\"tab.tabName\">\n                    <div class=\"row\" *ngFor=\"let row of tab.rows\">\n                        <ngx-mat-entity-input\n                            *ngFor=\"let key of row.keys\"\n                            [entity]=\"hasManyEntity\"\n                            [propertyKey]=\"key\"\n                            [hideOmitForEdit]=\"true\"\n                            class=\"col-lg-{{EntityUtilities.getWidth(hasManyEntity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(hasManyEntity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(hasManyEntity, key, 'sm')}}\"\n                            (inputChangeEvent)=\"checkHasManyEntity()\"\n                            [isReadOnly]=\"isPropertyReadOnly(hasManyEntity, key)\"\n                        >\n                        </ngx-mat-entity-input>\n                    </div>\n                </mat-tab>\n            </mat-tab-group>\n        \n            <div *ngIf=\"hasManyUpdateTabs.length <= 1\">\n                <div class=\"row\" *ngFor=\"let row of hasManyUpdateTabs[0].rows\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"hasManyEntity\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForEdit]=\"true\"\n                        class=\"col-lg-{{EntityUtilities.getWidth(hasManyEntity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(hasManyEntity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(hasManyEntity, key, 'sm')}}\"\n                        (inputChangeEvent)=\"checkHasManyEntity()\"\n                        [isReadOnly]=\"isPropertyReadOnly(hasManyEntity, key)\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </div>\n        </mat-dialog-content>\n        \n        <mat-dialog-actions>\n            <button type=\"submit\" (click)=\"dialogEditHasMany()\" mat-raised-button [disabled]=\"internalIsReadOnly || !isHasManyEntityValid || !isHasManyEntityDirty\">\n                {{metadataHasMany.tableData.editData.confirmButtonLabel}}\n            </button>\n            <button type=\"button\" mat-raised-button (click)=\"dialogCancelEditHasMany()\" class=\"cancel-button\">\n                {{metadataHasMany.tableData.editData.cancelButtonLabel}}\n            </button>\n        </mat-dialog-actions>\n    </form>    \n</ng-template>", styles: [".mdc-data-table__row:last-child .mdc-data-table__cell{border-bottom:1px solid rgba(0,0,0,.12)}.mat-dialog-title{padding:12px 20px;display:flex;justify-content:space-between;align-items:center}.mat-dialog-title div{font-size:var(--mdc-dialog-subhead-size, 14px);font-weight:var(--mdc-dialog-subhead-weight, 500)}::ng-deep .mdc-dialog .mdc-dialog__content{padding:6px 20px!important}mat-dialog-actions{justify-content:space-between;align-items:center;padding-left:20px;padding-right:20px}::ng-deep .mat-mdc-tab-body-wrapper{margin-left:-12px;margin-right:-12px}::ng-deep mat-tab-body{padding-top:10px;padding-left:12px;padding-right:12px}::ng-deep mat-tab-body .mat-mdc-tab-body-content{overflow:initial}::ng-deep .mat-mdc-form-field.mat-form-field-disabled label{color:#0009}::ng-deep .mat-mdc-form-field.mat-form-field-disabled input,::ng-deep .mat-mdc-form-field.mat-form-field-disabled textarea,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-select-disabled,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-select-value{color:#000}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-chip.mat-mdc-standard-chip.mat-mdc-chip-disabled{opacity:1}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-chip.mat-mdc-standard-chip.mat-mdc-chip-disabled button{opacity:.2}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-date-range-input-inner:disabled{color:#000}::ng-deep .mat-mdc-form-field .mat-mdc-slide-toggle{opacity:1}.entityArray .elevation-container{border-radius:5px;padding:15px;margin-bottom:15px;margin-top:15px}.entityArray .array-headline{padding-bottom:10px}.entityArray .buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px}.entityArray mat-table{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:25px}.entityArray .mat-column-select{flex:0 0 75px}.entityArray .entity:hover{cursor:pointer}.entityArray .array-error{display:flex;align-items:center;justify-content:center;margin-top:-25.8px;border:1px solid #E0E0E0;background-color:#f8d3d7;color:#721c24;height:25.8px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.hasMany button{width:100%;height:56px;line-height:24px;font-size:16px}.hasMany .title{text-align:center}.hasMany .elevation-container{border-radius:5px;padding:5px;margin-bottom:15px}.hasMany .enabled:hover{cursor:pointer}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.MatDialog }, { type: i0.EnvironmentInjector }, { type: i2$2.Router }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [NGX_GET_VALIDATION_ERROR_MESSAGE]
@@ -4000,6 +4025,16 @@ class NgxMatEntityEditPageComponent {
     get hasUnsavedChanges() {
         return this.isEntityDirty && this.data.editData.unsavedChangesRequireConfirmDialog;
     }
+    /**
+     * Checks if the input with the given key is readonly.
+     *
+     * @param key - The key for the input to check.
+     * @returns Whether or not the input for the key is read only.
+     */
+    isReadOnly(key) {
+        const metadata = EntityUtilities.getPropertyMetadata(this.entity, key);
+        return this.isEntityReadOnly || metadata.isReadOnly(this.entity);
+    }
     async ngOnInit() {
         this.data = new PageEditDataBuilder(this.inputData).getResult();
         if (this.data == null) {
@@ -4014,7 +4049,7 @@ class NgxMatEntityEditPageComponent {
         }
         this.entity = new this.EntityClass(foundEntity);
         this.entityPriorChanges = LodashUtilities.cloneDeep(this.entity);
-        this.isReadOnly = !this.data.allowUpdate(this.entityPriorChanges);
+        this.isEntityReadOnly = !this.data.allowUpdate(this.entityPriorChanges);
         this.entityTabs = EntityUtilities.getEntityTabs(this.entity, false, true);
     }
     /**
@@ -4037,7 +4072,7 @@ class NgxMatEntityEditPageComponent {
      * Also handles the confirmation if required.
      */
     edit() {
-        if (this.isReadOnly || !this.isEntityValid || !this.isEntityDirty) {
+        if (this.isEntityReadOnly || !this.isEntityValid || !this.isEntityDirty) {
             return;
         }
         if (!this.data.editData.editRequiresConfirmDialog) {
@@ -4129,10 +4164,10 @@ class NgxMatEntityEditPageComponent {
     }
 }
 NgxMatEntityEditPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NgxMatEntityEditPageComponent, deps: [{ token: i1.MatDialog }, { token: i1$1.Location }, { token: i2$2.ActivatedRoute }, { token: NGX_EDIT_DATA_ENTITY_SERVICE }, { token: NGX_EDIT_DATA_ENTITY }, { token: NGX_EDIT_DATA }], target: i0.ɵɵFactoryTarget.Component });
-NgxMatEntityEditPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: NgxMatEntityEditPageComponent, isStandalone: true, selector: "ngx-mat-entity-edit-page", host: { listeners: { "window:beforeunload": "canDeactivate()" } }, ngImport: i0, template: "<div *ngIf=\"!entityTabs && data.displayLoadingSpinner\" class=\"container\">\n    <br>\n    <mat-spinner style=\"margin-left: auto; margin-right: auto;\"></mat-spinner>\n    <br>\n</div>\n\n<div *ngIf=\"entityTabs\" class=\"container\">\n    <br>\n\n    <!------------>\n    <!-- Header -->\n    <!------------>\n    <div class=\"header\">\n        <div>\n            <button type=\"button\" [class.unsavedChanges]=\"hasUnsavedChanges\" mat-raised-button (click)=\"navigateBack()\" class=\"back-button\" tabindex=\"-1\">\n                <i class=\"fas fa-chevron-left\"></i>\n                {{data.editData.cancelButtonLabel}}\n                <i class=\"fas fa-warning\" style=\"color: orange;\" *ngIf=\"hasUnsavedChanges\"></i>\n            </button>\n            <button (click)=\"edit()\" mat-raised-button [disabled]=\"isReadOnly || !isEntityValid || !isEntityDirty\">\n                {{data.editData.confirmButtonLabel}}\n            </button>\n        </div>\n        <button type=\"button\" *ngIf=\"data.allowDelete(entity)\" mat-raised-button (click)=\"delete()\" color=\"warn\" class=\"delete-button\" tabindex=\"-1\">\n            {{data.editData.deleteButtonLabel}}\n        </button>\n    </div>\n\n    <h1>{{data.editData.title(entityPriorChanges)}}</h1>\n\n    <!----------->\n    <!-- Input -->\n    <!----------->\n    <form>\n        <mat-tab-group *ngIf=\"entityTabs.length > 1\" preserveContent>\n            <mat-tab *ngFor=\"let tab of entityTabs\" [label]=\"tab.tabName\">\n                <div class=\"row\" *ngFor=\"let row of tab.rows\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"entity\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForEdit]=\"true\"\n                        class=\"col-lg-{{EntityUtilities.getWidth(entity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(entity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(entity, key, 'sm')}}\"\n                        (inputChangeEvent)=\"checkEntity()\"\n                        [isReadOnly]=\"isReadOnly\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </mat-tab>\n        </mat-tab-group>\n    \n        <div *ngIf=\"entityTabs.length <= 1\">\n            <div class=\"row\" *ngFor=\"let row of entityTabs[0].rows\">\n                <ngx-mat-entity-input\n                    *ngFor=\"let key of row.keys\"\n                    [entity]=\"entity\"\n                    [propertyKey]=\"key\"\n                    [hideOmitForEdit]=\"true\"\n                    class=\"col-lg-{{EntityUtilities.getWidth(entity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(entity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(entity, key, 'sm')}}\"\n                    (inputChangeEvent)=\"checkEntity()\"\n                    [isReadOnly]=\"isReadOnly\"\n                >\n                </ngx-mat-entity-input>\n            </div>\n        </div>\n\n        <button type=\"submit\" (click)=\"edit()\" mat-raised-button [disabled]=\"isReadOnly || !isEntityValid || !isEntityDirty\">\n            {{data.editData.confirmButtonLabel}}\n        </button>\n    </form>\n\n    <br>\n</div>", styles: [".header{display:flex;justify-content:space-between}.header div{display:flex;column-gap:10px}h1{text-align:center}.unsavedChanges{background-color:#ffe48d}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i6$1.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i6$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: NgxMatEntityInputModule }, { kind: "component", type: NgxMatEntityInputComponent, selector: "ngx-mat-entity-input", inputs: ["entity", "propertyKey", "getValidationErrorMessage", "hideOmitForCreate", "hideOmitForEdit", "isReadOnly"], outputs: ["inputChangeEvent"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i12.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] });
+NgxMatEntityEditPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: NgxMatEntityEditPageComponent, isStandalone: true, selector: "ngx-mat-entity-edit-page", host: { listeners: { "window:beforeunload": "canDeactivate()" } }, ngImport: i0, template: "<div *ngIf=\"!entityTabs && data.displayLoadingSpinner\" class=\"container\">\n    <br>\n    <mat-spinner style=\"margin-left: auto; margin-right: auto;\"></mat-spinner>\n    <br>\n</div>\n\n<div *ngIf=\"entityTabs\" class=\"container\">\n    <br>\n\n    <!------------>\n    <!-- Header -->\n    <!------------>\n    <div class=\"header\">\n        <div>\n            <button type=\"button\" [class.unsavedChanges]=\"hasUnsavedChanges\" mat-raised-button (click)=\"navigateBack()\" class=\"back-button\" tabindex=\"-1\">\n                <i class=\"fas fa-chevron-left\"></i>\n                {{data.editData.cancelButtonLabel}}\n                <i class=\"fas fa-warning\" style=\"color: orange;\" *ngIf=\"hasUnsavedChanges\"></i>\n            </button>\n            <button (click)=\"edit()\" mat-raised-button [disabled]=\"isEntityReadOnly || !isEntityValid || !isEntityDirty\">\n                {{data.editData.confirmButtonLabel}}\n            </button>\n        </div>\n        <button type=\"button\" *ngIf=\"data.allowDelete(entity)\" mat-raised-button (click)=\"delete()\" color=\"warn\" class=\"delete-button\" tabindex=\"-1\">\n            {{data.editData.deleteButtonLabel}}\n        </button>\n    </div>\n\n    <h1>{{data.editData.title(entityPriorChanges)}}</h1>\n\n    <!----------->\n    <!-- Input -->\n    <!----------->\n    <form>\n        <mat-tab-group *ngIf=\"entityTabs.length > 1\" preserveContent>\n            <mat-tab *ngFor=\"let tab of entityTabs\" [label]=\"tab.tabName\">\n                <div class=\"row\" *ngFor=\"let row of tab.rows\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"entity\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForEdit]=\"true\"\n                        class=\"col-lg-{{EntityUtilities.getWidth(entity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(entity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(entity, key, 'sm')}}\"\n                        (inputChangeEvent)=\"checkEntity()\"\n                        [isReadOnly]=\"isReadOnly(key)\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </mat-tab>\n        </mat-tab-group>\n    \n        <div *ngIf=\"entityTabs.length <= 1\">\n            <div class=\"row\" *ngFor=\"let row of entityTabs[0].rows\">\n                <ngx-mat-entity-input\n                    *ngFor=\"let key of row.keys\"\n                    [entity]=\"entity\"\n                    [propertyKey]=\"key\"\n                    [hideOmitForEdit]=\"true\"\n                    class=\"col-lg-{{EntityUtilities.getWidth(entity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(entity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(entity, key, 'sm')}}\"\n                    (inputChangeEvent)=\"checkEntity()\"\n                    [isReadOnly]=\"isReadOnly(key)\"\n                >\n                </ngx-mat-entity-input>\n            </div>\n        </div>\n\n        <button type=\"submit\" (click)=\"edit()\" mat-raised-button [disabled]=\"isEntityReadOnly || !isEntityValid || !isEntityDirty\">\n            {{data.editData.confirmButtonLabel}}\n        </button>\n    </form>\n\n    <br>\n</div>", styles: [".header{display:flex;justify-content:space-between}.header div{display:flex;column-gap:10px}h1{text-align:center}.unsavedChanges{background-color:#ffe48d}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i6$1.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i6$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: NgxMatEntityInputModule }, { kind: "component", type: NgxMatEntityInputComponent, selector: "ngx-mat-entity-input", inputs: ["entity", "propertyKey", "getValidationErrorMessage", "hideOmitForCreate", "hideOmitForEdit", "isReadOnly"], outputs: ["inputChangeEvent"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i12.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NgxMatEntityEditPageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-mat-entity-edit-page', standalone: true, imports: [CommonModule, MatButtonModule, MatTabsModule, NgxMatEntityInputModule, MatProgressSpinnerModule], template: "<div *ngIf=\"!entityTabs && data.displayLoadingSpinner\" class=\"container\">\n    <br>\n    <mat-spinner style=\"margin-left: auto; margin-right: auto;\"></mat-spinner>\n    <br>\n</div>\n\n<div *ngIf=\"entityTabs\" class=\"container\">\n    <br>\n\n    <!------------>\n    <!-- Header -->\n    <!------------>\n    <div class=\"header\">\n        <div>\n            <button type=\"button\" [class.unsavedChanges]=\"hasUnsavedChanges\" mat-raised-button (click)=\"navigateBack()\" class=\"back-button\" tabindex=\"-1\">\n                <i class=\"fas fa-chevron-left\"></i>\n                {{data.editData.cancelButtonLabel}}\n                <i class=\"fas fa-warning\" style=\"color: orange;\" *ngIf=\"hasUnsavedChanges\"></i>\n            </button>\n            <button (click)=\"edit()\" mat-raised-button [disabled]=\"isReadOnly || !isEntityValid || !isEntityDirty\">\n                {{data.editData.confirmButtonLabel}}\n            </button>\n        </div>\n        <button type=\"button\" *ngIf=\"data.allowDelete(entity)\" mat-raised-button (click)=\"delete()\" color=\"warn\" class=\"delete-button\" tabindex=\"-1\">\n            {{data.editData.deleteButtonLabel}}\n        </button>\n    </div>\n\n    <h1>{{data.editData.title(entityPriorChanges)}}</h1>\n\n    <!----------->\n    <!-- Input -->\n    <!----------->\n    <form>\n        <mat-tab-group *ngIf=\"entityTabs.length > 1\" preserveContent>\n            <mat-tab *ngFor=\"let tab of entityTabs\" [label]=\"tab.tabName\">\n                <div class=\"row\" *ngFor=\"let row of tab.rows\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"entity\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForEdit]=\"true\"\n                        class=\"col-lg-{{EntityUtilities.getWidth(entity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(entity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(entity, key, 'sm')}}\"\n                        (inputChangeEvent)=\"checkEntity()\"\n                        [isReadOnly]=\"isReadOnly\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </mat-tab>\n        </mat-tab-group>\n    \n        <div *ngIf=\"entityTabs.length <= 1\">\n            <div class=\"row\" *ngFor=\"let row of entityTabs[0].rows\">\n                <ngx-mat-entity-input\n                    *ngFor=\"let key of row.keys\"\n                    [entity]=\"entity\"\n                    [propertyKey]=\"key\"\n                    [hideOmitForEdit]=\"true\"\n                    class=\"col-lg-{{EntityUtilities.getWidth(entity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(entity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(entity, key, 'sm')}}\"\n                    (inputChangeEvent)=\"checkEntity()\"\n                    [isReadOnly]=\"isReadOnly\"\n                >\n                </ngx-mat-entity-input>\n            </div>\n        </div>\n\n        <button type=\"submit\" (click)=\"edit()\" mat-raised-button [disabled]=\"isReadOnly || !isEntityValid || !isEntityDirty\">\n            {{data.editData.confirmButtonLabel}}\n        </button>\n    </form>\n\n    <br>\n</div>", styles: [".header{display:flex;justify-content:space-between}.header div{display:flex;column-gap:10px}h1{text-align:center}.unsavedChanges{background-color:#ffe48d}\n"] }]
+            args: [{ selector: 'ngx-mat-entity-edit-page', standalone: true, imports: [CommonModule, MatButtonModule, MatTabsModule, NgxMatEntityInputModule, MatProgressSpinnerModule], template: "<div *ngIf=\"!entityTabs && data.displayLoadingSpinner\" class=\"container\">\n    <br>\n    <mat-spinner style=\"margin-left: auto; margin-right: auto;\"></mat-spinner>\n    <br>\n</div>\n\n<div *ngIf=\"entityTabs\" class=\"container\">\n    <br>\n\n    <!------------>\n    <!-- Header -->\n    <!------------>\n    <div class=\"header\">\n        <div>\n            <button type=\"button\" [class.unsavedChanges]=\"hasUnsavedChanges\" mat-raised-button (click)=\"navigateBack()\" class=\"back-button\" tabindex=\"-1\">\n                <i class=\"fas fa-chevron-left\"></i>\n                {{data.editData.cancelButtonLabel}}\n                <i class=\"fas fa-warning\" style=\"color: orange;\" *ngIf=\"hasUnsavedChanges\"></i>\n            </button>\n            <button (click)=\"edit()\" mat-raised-button [disabled]=\"isEntityReadOnly || !isEntityValid || !isEntityDirty\">\n                {{data.editData.confirmButtonLabel}}\n            </button>\n        </div>\n        <button type=\"button\" *ngIf=\"data.allowDelete(entity)\" mat-raised-button (click)=\"delete()\" color=\"warn\" class=\"delete-button\" tabindex=\"-1\">\n            {{data.editData.deleteButtonLabel}}\n        </button>\n    </div>\n\n    <h1>{{data.editData.title(entityPriorChanges)}}</h1>\n\n    <!----------->\n    <!-- Input -->\n    <!----------->\n    <form>\n        <mat-tab-group *ngIf=\"entityTabs.length > 1\" preserveContent>\n            <mat-tab *ngFor=\"let tab of entityTabs\" [label]=\"tab.tabName\">\n                <div class=\"row\" *ngFor=\"let row of tab.rows\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"entity\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForEdit]=\"true\"\n                        class=\"col-lg-{{EntityUtilities.getWidth(entity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(entity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(entity, key, 'sm')}}\"\n                        (inputChangeEvent)=\"checkEntity()\"\n                        [isReadOnly]=\"isReadOnly(key)\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </mat-tab>\n        </mat-tab-group>\n    \n        <div *ngIf=\"entityTabs.length <= 1\">\n            <div class=\"row\" *ngFor=\"let row of entityTabs[0].rows\">\n                <ngx-mat-entity-input\n                    *ngFor=\"let key of row.keys\"\n                    [entity]=\"entity\"\n                    [propertyKey]=\"key\"\n                    [hideOmitForEdit]=\"true\"\n                    class=\"col-lg-{{EntityUtilities.getWidth(entity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(entity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(entity, key, 'sm')}}\"\n                    (inputChangeEvent)=\"checkEntity()\"\n                    [isReadOnly]=\"isReadOnly(key)\"\n                >\n                </ngx-mat-entity-input>\n            </div>\n        </div>\n\n        <button type=\"submit\" (click)=\"edit()\" mat-raised-button [disabled]=\"isEntityReadOnly || !isEntityValid || !isEntityDirty\">\n            {{data.editData.confirmButtonLabel}}\n        </button>\n    </form>\n\n    <br>\n</div>", styles: [".header{display:flex;justify-content:space-between}.header div{display:flex;column-gap:10px}h1{text-align:center}.unsavedChanges{background-color:#ffe48d}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.MatDialog }, { type: i1$1.Location }, { type: i2$2.ActivatedRoute }, { type: EntityService, decorators: [{
                     type: Inject,
                     args: [NGX_EDIT_DATA_ENTITY_SERVICE]
@@ -4322,11 +4357,21 @@ class NgxMatEntityEditDialogComponent {
     ngOnInit() {
         this.data = new EditEntityDataBuilder(this.inputData).getResult();
         this.entityPriorChanges = LodashUtilities.cloneDeep(this.data.entity);
-        this.isReadOnly = !this.data.allowUpdate(this.entityPriorChanges);
+        this.isEntityReadOnly = !this.data.allowUpdate(this.entityPriorChanges);
         this.dialogRef.disableClose = true;
         this.entityTabs = EntityUtilities.getEntityTabs(this.data.entity, false, true);
         this.entityService = this.injector.get(this.data.EntityServiceClass);
     }
+    /**
+     * Checks if the input with the given key is readonly.
+     *
+     * @param key - The key for the input to check.
+     * @returns Whether or not the input for the key is read only.
+     */
+    isReadOnly(key) {
+        const metadata = EntityUtilities.getPropertyMetadata(this.data.entity, key);
+        return this.isEntityReadOnly || metadata.isReadOnly(this.data.entity);
+    }
     /**
      * Checks if the entity has become invalid or dirty.
      */
@@ -4339,7 +4384,7 @@ class NgxMatEntityEditDialogComponent {
      * Also handles the confirmation if required.
      */
     edit() {
-        if (this.isReadOnly || !this.isEntityValid || !this.isEntityDirty) {
+        if (this.isEntityReadOnly || !this.isEntityValid || !this.isEntityDirty) {
             return;
         }
         if (!this.data.editData.editRequiresConfirmDialog) {
@@ -4403,10 +4448,10 @@ class NgxMatEntityEditDialogComponent {
     }
 }
 NgxMatEntityEditDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", 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: "14.0.0", version: "15.2.3", type: NgxMatEntityEditDialogComponent, selector: "ngx-mat-entity-edit-dialog", ngImport: i0, template: "<div class=\"mat-dialog-title\">\n    <div>{{data.editData.title(data.entity)}}</div>\n    <button type=\"button\" *ngIf=\"data.allowDelete(data.entity)\" mat-raised-button (click)=\"delete()\" color=\"warn\" class=\"delete-button\" tabindex=\"-1\">\n        {{data.editData.deleteButtonLabel}}\n    </button>\n</div>\n\n<form>\n    <mat-dialog-content>\n        <mat-tab-group *ngIf=\"entityTabs.length > 1\" preserveContent>\n            <mat-tab *ngFor=\"let tab of entityTabs\" [label]=\"tab.tabName\">\n                <div class=\"row\" *ngFor=\"let row of tab.rows\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"data.entity\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForEdit]=\"true\"\n                        class=\"col-lg-{{EntityUtilities.getWidth(data.entity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(data.entity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(data.entity, key, 'sm')}}\"\n                        (inputChangeEvent)=\"checkEntity()\"\n                        [isReadOnly]=\"isReadOnly\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </mat-tab>\n        </mat-tab-group>\n    \n        <div *ngIf=\"entityTabs.length <= 1\">\n            <div class=\"row\" *ngFor=\"let row of entityTabs[0].rows\">\n                <ngx-mat-entity-input\n                    *ngFor=\"let key of row.keys\"\n                    [entity]=\"data.entity\"\n                    [propertyKey]=\"key\"\n                    [hideOmitForEdit]=\"true\"\n                    class=\"col-lg-{{EntityUtilities.getWidth(data.entity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(data.entity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(data.entity, key, 'sm')}}\"\n                    (inputChangeEvent)=\"checkEntity()\"\n                    [isReadOnly]=\"isReadOnly\"\n                >\n                </ngx-mat-entity-input>\n            </div>\n        </div>\n    </mat-dialog-content>\n    \n    <mat-dialog-actions>\n        <button type=\"submit\" (click)=\"edit()\" mat-raised-button [disabled]=\"isReadOnly || !isEntityValid || !isEntityDirty\">\n            {{data.editData.confirmButtonLabel}}\n        </button>\n        <button type=\"button\" mat-raised-button (click)=\"cancel()\" class=\"cancel-button\">\n            {{data.editData.cancelButtonLabel}}\n        </button>\n    </mat-dialog-actions>\n</form>\n", styles: [".mat-dialog-title{padding:12px 20px;display:flex;justify-content:space-between;align-items:center}.mat-dialog-title div{font-size:var(--mdc-dialog-subhead-size, 14px);font-weight:var(--mdc-dialog-subhead-weight, 500)}::ng-deep .mdc-dialog .mdc-dialog__content{padding:6px 20px!important}mat-dialog-actions{justify-content:space-between;align-items:center;padding-left:20px;padding-right:20px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NgxMatEntityInputComponent, selector: "ngx-mat-entity-input", inputs: ["entity", "propertyKey", "getValidationErrorMessage", "hideOmitForCreate", "hideOmitForEdit", "isReadOnly"], outputs: ["inputChangeEvent"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6$1.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i6$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }] });
+NgxMatEntityEditDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: NgxMatEntityEditDialogComponent, selector: "ngx-mat-entity-edit-dialog", ngImport: i0, template: "<div class=\"mat-dialog-title\">\n    <div>{{data.editData.title(entityPriorChanges)}}</div>\n    <button type=\"button\" *ngIf=\"data.allowDelete(data.entity)\" mat-raised-button (click)=\"delete()\" color=\"warn\" class=\"delete-button\" tabindex=\"-1\">\n        {{data.editData.deleteButtonLabel}}\n    </button>\n</div>\n\n<form>\n    <mat-dialog-content>\n        <mat-tab-group *ngIf=\"entityTabs.length > 1\" preserveContent>\n            <mat-tab *ngFor=\"let tab of entityTabs\" [label]=\"tab.tabName\">\n                <div class=\"row\" *ngFor=\"let row of tab.rows\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"data.entity\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForEdit]=\"true\"\n                        class=\"col-lg-{{EntityUtilities.getWidth(data.entity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(data.entity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(data.entity, key, 'sm')}}\"\n                        (inputChangeEvent)=\"checkEntity()\"\n                        [isReadOnly]=\"isReadOnly(key)\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </mat-tab>\n        </mat-tab-group>\n    \n        <div *ngIf=\"entityTabs.length <= 1\">\n            <div class=\"row\" *ngFor=\"let row of entityTabs[0].rows\">\n                <ngx-mat-entity-input\n                    *ngFor=\"let key of row.keys\"\n                    [entity]=\"data.entity\"\n                    [propertyKey]=\"key\"\n                    [hideOmitForEdit]=\"true\"\n                    class=\"col-lg-{{EntityUtilities.getWidth(data.entity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(data.entity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(data.entity, key, 'sm')}}\"\n                    (inputChangeEvent)=\"checkEntity()\"\n                    [isReadOnly]=\"isReadOnly(key)\"\n                >\n                </ngx-mat-entity-input>\n            </div>\n        </div>\n    </mat-dialog-content>\n    \n    <mat-dialog-actions>\n        <button type=\"submit\" (click)=\"edit()\" mat-raised-button [disabled]=\"isEntityReadOnly || !isEntityValid || !isEntityDirty\">\n            {{data.editData.confirmButtonLabel}}\n        </button>\n        readonly {{isEntityReadOnly}} valid {{isEntityValid}} dirty {{isEntityDirty}}\n        <button type=\"button\" mat-raised-button (click)=\"cancel()\" class=\"cancel-button\">\n            {{data.editData.cancelButtonLabel}}\n        </button>\n    </mat-dialog-actions>\n</form>\n", styles: [".mat-dialog-title{padding:12px 20px;display:flex;justify-content:space-between;align-items:center}.mat-dialog-title div{font-size:var(--mdc-dialog-subhead-size, 14px);font-weight:var(--mdc-dialog-subhead-weight, 500)}::ng-deep .mdc-dialog .mdc-dialog__content{padding:6px 20px!important}mat-dialog-actions{justify-content:space-between;align-items:center;padding-left:20px;padding-right:20px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NgxMatEntityInputComponent, selector: "ngx-mat-entity-input", inputs: ["entity", "propertyKey", "getValidationErrorMessage", "hideOmitForCreate", "hideOmitForEdit", "isReadOnly"], outputs: ["inputChangeEvent"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6$1.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i6$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NgxMatEntityEditDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-mat-entity-edit-dialog', template: "<div class=\"mat-dialog-title\">\n    <div>{{data.editData.title(data.entity)}}</div>\n    <button type=\"button\" *ngIf=\"data.allowDelete(data.entity)\" mat-raised-button (click)=\"delete()\" color=\"warn\" class=\"delete-button\" tabindex=\"-1\">\n        {{data.editData.deleteButtonLabel}}\n    </button>\n</div>\n\n<form>\n    <mat-dialog-content>\n        <mat-tab-group *ngIf=\"entityTabs.length > 1\" preserveContent>\n            <mat-tab *ngFor=\"let tab of entityTabs\" [label]=\"tab.tabName\">\n                <div class=\"row\" *ngFor=\"let row of tab.rows\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"data.entity\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForEdit]=\"true\"\n                        class=\"col-lg-{{EntityUtilities.getWidth(data.entity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(data.entity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(data.entity, key, 'sm')}}\"\n                        (inputChangeEvent)=\"checkEntity()\"\n                        [isReadOnly]=\"isReadOnly\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </mat-tab>\n        </mat-tab-group>\n    \n        <div *ngIf=\"entityTabs.length <= 1\">\n            <div class=\"row\" *ngFor=\"let row of entityTabs[0].rows\">\n                <ngx-mat-entity-input\n                    *ngFor=\"let key of row.keys\"\n                    [entity]=\"data.entity\"\n                    [propertyKey]=\"key\"\n                    [hideOmitForEdit]=\"true\"\n                    class=\"col-lg-{{EntityUtilities.getWidth(data.entity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(data.entity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(data.entity, key, 'sm')}}\"\n                    (inputChangeEvent)=\"checkEntity()\"\n                    [isReadOnly]=\"isReadOnly\"\n                >\n                </ngx-mat-entity-input>\n            </div>\n        </div>\n    </mat-dialog-content>\n    \n    <mat-dialog-actions>\n        <button type=\"submit\" (click)=\"edit()\" mat-raised-button [disabled]=\"isReadOnly || !isEntityValid || !isEntityDirty\">\n            {{data.editData.confirmButtonLabel}}\n        </button>\n        <button type=\"button\" mat-raised-button (click)=\"cancel()\" class=\"cancel-button\">\n            {{data.editData.cancelButtonLabel}}\n        </button>\n    </mat-dialog-actions>\n</form>\n", styles: [".mat-dialog-title{padding:12px 20px;display:flex;justify-content:space-between;align-items:center}.mat-dialog-title div{font-size:var(--mdc-dialog-subhead-size, 14px);font-weight:var(--mdc-dialog-subhead-weight, 500)}::ng-deep .mdc-dialog .mdc-dialog__content{padding:6px 20px!important}mat-dialog-actions{justify-content:space-between;align-items:center;padding-left:20px;padding-right:20px}\n"] }]
+            args: [{ selector: 'ngx-mat-entity-edit-dialog', template: "<div class=\"mat-dialog-title\">\n    <div>{{data.editData.title(entityPriorChanges)}}</div>\n    <button type=\"button\" *ngIf=\"data.allowDelete(data.entity)\" mat-raised-button (click)=\"delete()\" color=\"warn\" class=\"delete-button\" tabindex=\"-1\">\n        {{data.editData.deleteButtonLabel}}\n    </button>\n</div>\n\n<form>\n    <mat-dialog-content>\n        <mat-tab-group *ngIf=\"entityTabs.length > 1\" preserveContent>\n            <mat-tab *ngFor=\"let tab of entityTabs\" [label]=\"tab.tabName\">\n                <div class=\"row\" *ngFor=\"let row of tab.rows\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"data.entity\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForEdit]=\"true\"\n                        class=\"col-lg-{{EntityUtilities.getWidth(data.entity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(data.entity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(data.entity, key, 'sm')}}\"\n                        (inputChangeEvent)=\"checkEntity()\"\n                        [isReadOnly]=\"isReadOnly(key)\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </mat-tab>\n        </mat-tab-group>\n    \n        <div *ngIf=\"entityTabs.length <= 1\">\n            <div class=\"row\" *ngFor=\"let row of entityTabs[0].rows\">\n                <ngx-mat-entity-input\n                    *ngFor=\"let key of row.keys\"\n                    [entity]=\"data.entity\"\n                    [propertyKey]=\"key\"\n                    [hideOmitForEdit]=\"true\"\n                    class=\"col-lg-{{EntityUtilities.getWidth(data.entity, key, 'lg')}} col-md-{{EntityUtilities.getWidth(data.entity, key, 'md')}} col-sm-{{EntityUtilities.getWidth(data.entity, key, 'sm')}}\"\n                    (inputChangeEvent)=\"checkEntity()\"\n                    [isReadOnly]=\"isReadOnly(key)\"\n                >\n                </ngx-mat-entity-input>\n            </div>\n        </div>\n    </mat-dialog-content>\n    \n    <mat-dialog-actions>\n        <button type=\"submit\" (click)=\"edit()\" mat-raised-button [disabled]=\"isEntityReadOnly || !isEntityValid || !isEntityDirty\">\n            {{data.editData.confirmButtonLabel}}\n        </button>\n        readonly {{isEntityReadOnly}} valid {{isEntityValid}} dirty {{isEntityDirty}}\n        <button type=\"button\" mat-raised-button (click)=\"cancel()\" class=\"cancel-button\">\n            {{data.editData.cancelButtonLabel}}\n        </button>\n    </mat-dialog-actions>\n</form>\n", styles: [".mat-dialog-title{padding:12px 20px;display:flex;justify-content:space-between;align-items:center}.mat-dialog-title div{font-size:var(--mdc-dialog-subhead-size, 14px);font-weight:var(--mdc-dialog-subhead-weight, 500)}::ng-deep .mdc-dialog .mdc-dialog__content{padding:6px 20px!important}mat-dialog-actions{justify-content:space-between;align-items:center;padding-left:20px;padding-right:20px}\n"] }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]