ngx-material-entity 16.0.9 → 16.1.0

package/fesm2022/ngx-material-entity.mjs

@@ -2779,14 +2779,20 @@ class TooltipDirective {
     }
     /**
      * Toggles the tooltip.
+     * @param event - The click event, is used to stop the propagation that would trigger the global click listener.
      */
-    onClick() {
+    onClick(event) {
+        event.stopPropagation();
         if (!this.tooltipElement) {
             this.showTooltip();
             this.registerCloseListeners();
             this.openedByClick = true;
             return;
         }
+        if (!this.openedByClick) {
+            this.openedByClick = true;
+            return;
+        }
         this.hideTooltip();
         this.removeCloseListeners();
     }
@@ -2802,8 +2808,6 @@ class TooltipDirective {
         if (this.openedByClick) {
             return;
         }
-        this.hideTooltip();
-        this.removeCloseListeners();
     }
     /**
      * Hides the tooltip.
@@ -2867,7 +2871,7 @@ class TooltipDirective {
         this.removeCloseListeners();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: TooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.0", type: TooltipDirective, isStandalone: true, selector: "[tooltip]", inputs: { tooltip: "tooltip" }, host: { listeners: { "click": "onClick()", "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "window:resize": "onResize()" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.0", type: TooltipDirective, isStandalone: true, selector: "[tooltip]", inputs: { tooltip: "tooltip" }, host: { listeners: { "click": "onClick($event)", "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "window:resize": "onResize()" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: TooltipDirective, decorators: [{
             type: Directive,
@@ -2879,7 +2883,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImpor
                 type: Input
             }], onClick: [{
                 type: HostListener,
-                args: ['click']
+                args: ['click', ['$event']]
             }], onMouseEnter: [{
                 type: HostListener,
                 args: ['mouseenter']
@@ -3455,11 +3459,11 @@ class ArrayDateInputComponent extends ArrayTableComponent {
         ReflectUtilities.defineMetadata('metadata', this.metadata, this.entity, this.key);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: ArrayDateInputComponent, deps: [{ token: i1.MatDialog }, { token: i0.EnvironmentInjector }, { token: i2$1.HttpClient }, { token: NGX_INTERNAL_GLOBAL_DEFAULT_VALUES }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: ArrayDateInputComponent, selector: "array-date-input", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<div class=\"mat-elevation-z8 elevation-container\">\n    <div class=\"array-headline\">\n        <b>{{metadata.displayName}}</b>\n    </div>\n    <div *ngIf=\"!isReadOnly\">\n        <mat-form-field appearance=\"outline\">\n            <mat-label>{{metadata.displayName}}</mat-label>\n            <input\n                #model=\"ngModel\"\n                matInput\n                [name]=\"name\"\n                [matDatepicker]=\"picker\"\n                [required]=\"metadata.required(entity)\"\n                [min]=\"metadata.min ? metadata.min(input) : undefined\"\n                [max]=\"metadata.max ? metadata.max(input) : undefined\"\n                [matDatepickerFilter]=\"metadata.filter ?? DateUtilities.defaultDateFilter\"\n                [(ngModel)]=\"input\"\n            >\n            <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n            <mat-datepicker #picker></mat-datepicker>\n            <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n        </mat-form-field>\n        \n        <div class=\"buttons\">\n            <button type=\"button\" mat-raised-button\n                [disabled]=\"model.errors\"\n                (click)=\"add()\">\n                {{metadata.addButtonLabel}}\n            </button>\n            <button type=\"button\" mat-raised-button\n                [disabled]=\"!selection.selected.length\"\n                (click)=\"remove()\">\n                {{metadata.removeButtonLabel}}\n            </button>\n        </div>\n    </div>\n\n    <mat-table [dataSource]=\"dataSource\">\n        <!-- select Column -->\n        <ng-container matColumnDef=\"select\">\n            <mat-header-cell *matHeaderCellDef>\n                <mat-checkbox [disabled]=\"!dataSource.data.length\" [checked]=\"selection.hasValue() && SelectionUtilities.isAllSelected(selection, dataSource)\" [indeterminate]=\"selection.hasValue() && !SelectionUtilities.isAllSelected(selection, dataSource)\" (change)=\"$event ? SelectionUtilities.masterToggle(selection, dataSource) : null\"></mat-checkbox>\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let entity\">\n                <mat-checkbox [checked]=\"selection.isSelected(entity)\" (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(entity) : null\"></mat-checkbox>\n            </mat-cell>\n        </ng-container>\n    \n        <ng-container *ngFor=\"let dCol of metadata.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n            <mat-header-cell *matHeaderCellDef>\n                {{dCol.displayName}}\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let entity\" class=\"entity\">\n                {{getDisplayColumnValue(entity, dCol)}}\n            </mat-cell>\n        </ng-container>\n    \n        <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n        <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n    </mat-table>\n\n    <div *ngIf=\"metadata.required(entity) && !dataSource.data.length\" class=\"array-error\">\n        {{metadata.missingErrorMessage}}\n    </div>\n</div>", styles: [".mdc-data-table__row:last-child .mdc-data-table__cell{border-bottom:1px solid rgba(0,0,0,.12)}mat-form-field{width:100%}.buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px}mat-table{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:25px}.mat-column-select{flex:0 0 75px}.elevation-container{border-radius:5px;padding:15px;margin-bottom:15px;margin-top:15px}.array-headline{padding-bottom:10px}.array-error{display:flex;align-items:center;justify-content:center;margin-top:-25.8px;border:1px solid #E0E0E0;background-color:#f8d3d7;color:#721c24;height:25.8px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i7.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i7.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i7.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: ArrayDateInputComponent, selector: "array-date-input", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<div class=\"mat-elevation-z8 elevation-container\">\n    <div class=\"array-headline\">\n        <b>{{metadata.displayName}}</b>\n    </div>\n    <div *ngIf=\"!isReadOnly\">\n        <mat-form-field appearance=\"outline\">\n            <mat-label>{{metadata.displayName}}</mat-label>\n            <input\n                #model=\"ngModel\"\n                matInput\n                [name]=\"name\"\n                [matDatepicker]=\"picker\"\n                [required]=\"metadata.required(entity)\"\n                [min]=\"metadata.min ? metadata.min(input) : undefined\"\n                [max]=\"metadata.max ? metadata.max(input) : undefined\"\n                [matDatepickerFilter]=\"metadata.filter ?? DateUtilities.defaultDateFilter\"\n                [(ngModel)]=\"input\"\n            >\n            <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n            <mat-datepicker #picker></mat-datepicker>\n            <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n        </mat-form-field>\n        \n        <div class=\"buttons\">\n            <button type=\"button\" mat-raised-button\n                [disabled]=\"model.errors\"\n                (click)=\"add()\">\n                {{metadata.addButtonLabel}}\n            </button>\n            <button type=\"button\" mat-raised-button\n                [disabled]=\"!selection.selected.length\"\n                (click)=\"remove()\">\n                {{metadata.removeButtonLabel}}\n            </button>\n        </div>\n    </div>\n\n    <mat-table [dataSource]=\"dataSource\">\n        <!-- select Column -->\n        <ng-container matColumnDef=\"select\">\n            <mat-header-cell *matHeaderCellDef>\n                <mat-checkbox [disabled]=\"!dataSource.data.length\" [checked]=\"selection.hasValue() && SelectionUtilities.isAllSelected(selection, dataSource)\" [indeterminate]=\"selection.hasValue() && !SelectionUtilities.isAllSelected(selection, dataSource)\" (change)=\"$event ? SelectionUtilities.masterToggle(selection, dataSource) : null\"></mat-checkbox>\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let entity\">\n                <mat-checkbox [checked]=\"selection.isSelected(entity)\" (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(entity) : null\"></mat-checkbox>\n            </mat-cell>\n        </ng-container>\n    \n        <ng-container *ngFor=\"let dCol of metadata.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n            <mat-header-cell *matHeaderCellDef>\n                {{dCol.displayName}}\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let entity\" class=\"entity\">\n                {{getDisplayColumnValue(entity, dCol)}}\n            </mat-cell>\n        </ng-container>\n    \n        <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n        <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n    </mat-table>\n\n    <div *ngIf=\"metadata.required(entity) && !dataSource.data.length\" class=\"array-error\">\n        {{metadata.missingErrorMessage}}\n    </div>\n</div>", styles: [".mdc-data-table__row:last-child .mdc-data-table__cell{border-bottom:1px solid rgba(0,0,0,.12)}mat-form-field{width:100%}.buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px;flex-wrap:wrap;gap:10px}.buttons button{flex-grow:1}mat-table{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:5px}.mat-column-select{flex:0 0 48px;padding-left:0;padding-right:0;justify-content:center}.elevation-container{border-radius:5px;padding:15px;margin-bottom:15px;margin-top:15px}.array-headline{padding-bottom:10px}.array-error{display:flex;align-items:center;justify-content:center;margin-top:-6px;border:1px solid #E0E0E0;background-color:#f8d3d7;color:#721c24;height:-moz-fit-content;height:fit-content;padding-left:4px;padding-right:4px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i7.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i7.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i7.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: ArrayDateInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'array-date-input', template: "<!-- eslint-disable angular/no-call-expression -->\n<div class=\"mat-elevation-z8 elevation-container\">\n    <div class=\"array-headline\">\n        <b>{{metadata.displayName}}</b>\n    </div>\n    <div *ngIf=\"!isReadOnly\">\n        <mat-form-field appearance=\"outline\">\n            <mat-label>{{metadata.displayName}}</mat-label>\n            <input\n                #model=\"ngModel\"\n                matInput\n                [name]=\"name\"\n                [matDatepicker]=\"picker\"\n                [required]=\"metadata.required(entity)\"\n                [min]=\"metadata.min ? metadata.min(input) : undefined\"\n                [max]=\"metadata.max ? metadata.max(input) : undefined\"\n                [matDatepickerFilter]=\"metadata.filter ?? DateUtilities.defaultDateFilter\"\n                [(ngModel)]=\"input\"\n            >\n            <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n            <mat-datepicker #picker></mat-datepicker>\n            <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n        </mat-form-field>\n        \n        <div class=\"buttons\">\n            <button type=\"button\" mat-raised-button\n                [disabled]=\"model.errors\"\n                (click)=\"add()\">\n                {{metadata.addButtonLabel}}\n            </button>\n            <button type=\"button\" mat-raised-button\n                [disabled]=\"!selection.selected.length\"\n                (click)=\"remove()\">\n                {{metadata.removeButtonLabel}}\n            </button>\n        </div>\n    </div>\n\n    <mat-table [dataSource]=\"dataSource\">\n        <!-- select Column -->\n        <ng-container matColumnDef=\"select\">\n            <mat-header-cell *matHeaderCellDef>\n                <mat-checkbox [disabled]=\"!dataSource.data.length\" [checked]=\"selection.hasValue() && SelectionUtilities.isAllSelected(selection, dataSource)\" [indeterminate]=\"selection.hasValue() && !SelectionUtilities.isAllSelected(selection, dataSource)\" (change)=\"$event ? SelectionUtilities.masterToggle(selection, dataSource) : null\"></mat-checkbox>\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let entity\">\n                <mat-checkbox [checked]=\"selection.isSelected(entity)\" (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(entity) : null\"></mat-checkbox>\n            </mat-cell>\n        </ng-container>\n    \n        <ng-container *ngFor=\"let dCol of metadata.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n            <mat-header-cell *matHeaderCellDef>\n                {{dCol.displayName}}\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let entity\" class=\"entity\">\n                {{getDisplayColumnValue(entity, dCol)}}\n            </mat-cell>\n        </ng-container>\n    \n        <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n        <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n    </mat-table>\n\n    <div *ngIf=\"metadata.required(entity) && !dataSource.data.length\" class=\"array-error\">\n        {{metadata.missingErrorMessage}}\n    </div>\n</div>", styles: [".mdc-data-table__row:last-child .mdc-data-table__cell{border-bottom:1px solid rgba(0,0,0,.12)}mat-form-field{width:100%}.buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px}mat-table{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:25px}.mat-column-select{flex:0 0 75px}.elevation-container{border-radius:5px;padding:15px;margin-bottom:15px;margin-top:15px}.array-headline{padding-bottom:10px}.array-error{display:flex;align-items:center;justify-content:center;margin-top:-25.8px;border:1px solid #E0E0E0;background-color:#f8d3d7;color:#721c24;height:25.8px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}\n"] }]
+            args: [{ selector: 'array-date-input', template: "<!-- eslint-disable angular/no-call-expression -->\n<div class=\"mat-elevation-z8 elevation-container\">\n    <div class=\"array-headline\">\n        <b>{{metadata.displayName}}</b>\n    </div>\n    <div *ngIf=\"!isReadOnly\">\n        <mat-form-field appearance=\"outline\">\n            <mat-label>{{metadata.displayName}}</mat-label>\n            <input\n                #model=\"ngModel\"\n                matInput\n                [name]=\"name\"\n                [matDatepicker]=\"picker\"\n                [required]=\"metadata.required(entity)\"\n                [min]=\"metadata.min ? metadata.min(input) : undefined\"\n                [max]=\"metadata.max ? metadata.max(input) : undefined\"\n                [matDatepickerFilter]=\"metadata.filter ?? DateUtilities.defaultDateFilter\"\n                [(ngModel)]=\"input\"\n            >\n            <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n            <mat-datepicker #picker></mat-datepicker>\n            <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n        </mat-form-field>\n        \n        <div class=\"buttons\">\n            <button type=\"button\" mat-raised-button\n                [disabled]=\"model.errors\"\n                (click)=\"add()\">\n                {{metadata.addButtonLabel}}\n            </button>\n            <button type=\"button\" mat-raised-button\n                [disabled]=\"!selection.selected.length\"\n                (click)=\"remove()\">\n                {{metadata.removeButtonLabel}}\n            </button>\n        </div>\n    </div>\n\n    <mat-table [dataSource]=\"dataSource\">\n        <!-- select Column -->\n        <ng-container matColumnDef=\"select\">\n            <mat-header-cell *matHeaderCellDef>\n                <mat-checkbox [disabled]=\"!dataSource.data.length\" [checked]=\"selection.hasValue() && SelectionUtilities.isAllSelected(selection, dataSource)\" [indeterminate]=\"selection.hasValue() && !SelectionUtilities.isAllSelected(selection, dataSource)\" (change)=\"$event ? SelectionUtilities.masterToggle(selection, dataSource) : null\"></mat-checkbox>\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let entity\">\n                <mat-checkbox [checked]=\"selection.isSelected(entity)\" (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(entity) : null\"></mat-checkbox>\n            </mat-cell>\n        </ng-container>\n    \n        <ng-container *ngFor=\"let dCol of metadata.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n            <mat-header-cell *matHeaderCellDef>\n                {{dCol.displayName}}\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let entity\" class=\"entity\">\n                {{getDisplayColumnValue(entity, dCol)}}\n            </mat-cell>\n        </ng-container>\n    \n        <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n        <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n    </mat-table>\n\n    <div *ngIf=\"metadata.required(entity) && !dataSource.data.length\" class=\"array-error\">\n        {{metadata.missingErrorMessage}}\n    </div>\n</div>", styles: [".mdc-data-table__row:last-child .mdc-data-table__cell{border-bottom:1px solid rgba(0,0,0,.12)}mat-form-field{width:100%}.buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px;flex-wrap:wrap;gap:10px}.buttons button{flex-grow:1}mat-table{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:5px}.mat-column-select{flex:0 0 48px;padding-left:0;padding-right:0;justify-content:center}.elevation-container{border-radius:5px;padding:15px;margin-bottom:15px;margin-top:15px}.array-headline{padding-bottom:10px}.array-error{display:flex;align-items:center;justify-content:center;margin-top:-6px;border:1px solid #E0E0E0;background-color:#f8d3d7;color:#721c24;height:-moz-fit-content;height:fit-content;padding-left:4px;padding-right:4px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.MatDialog }, { type: i0.EnvironmentInjector }, { type: i2$1.HttpClient }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [NGX_INTERNAL_GLOBAL_DEFAULT_VALUES]
@@ -3504,11 +3508,11 @@ class ArrayDateRangeInputComponent extends ArrayTableComponent {
         this.dateRangeEnd = undefined;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: ArrayDateRangeInputComponent, deps: [{ token: i1.MatDialog }, { token: i0.EnvironmentInjector }, { token: i2$1.HttpClient }, { token: NGX_INTERNAL_GLOBAL_DEFAULT_VALUES }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: ArrayDateRangeInputComponent, selector: "array-date-range-input", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<div class=\"mat-elevation-z8 elevation-container\">\n    <div class=\"array-headline\">\n        <b>{{metadata.displayName}}</b>\n    </div>\n    <div *ngIf=\"!isReadOnly\">\n        <mat-form-field>\n            <mat-label>{{metadata.displayName}}</mat-label>\n            \n            <mat-date-range-input [rangePicker]=\"picker\" [required]=\"metadata.required(entity)\" [dateFilter]=\"metadata.filter ? metadata.filter : DateUtilities.defaultDateFilter\">\n                <input #startModel=\"ngModel\"\n                    matStartDate\n                    [name]=\"name + 'start'\"\n                    [required]=\"metadata.required(entity)\"\n                    [min]=\"metadata.minStart ? metadata.minStart(input?.start) : undefined\"\n                    [max]=\"metadata.maxStart ? metadata.maxStart(input?.start) : undefined\"\n                    [placeholder]=\"metadata.placeholderStart\"\n                    [(ngModel)]=\"dateRangeStart\"\n                >\n                <input #endModel=\"ngModel\"\n                    matEndDate\n                    [name]=\"name + 'end'\"\n                    [required]=\"metadata.required(entity)\"\n                    [min]=\"metadata.minEnd ? metadata.minEnd(input?.end) : undefined\"\n                    [max]=\"metadata.maxEnd ? metadata.maxEnd(input?.end) : undefined\"\n                    [placeholder]=\"metadata.placeholderEnd\"\n                    [(ngModel)]=\"dateRangeEnd\"\n                >\n            </mat-date-range-input>\n            <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n            <mat-date-range-picker #picker></mat-date-range-picker>\n    \n            <mat-error *ngIf=\"startModel.errors\">{{getValidationErrorMessage(startModel)}}</mat-error>\n            <mat-error *ngIf=\"!startModel.errors && endModel.errors\">{{getValidationErrorMessage(endModel)}}</mat-error>\n        </mat-form-field>\n        \n        <div class=\"buttons\">\n            <button type=\"button\" mat-raised-button\n                [disabled]=\"startModel.errors || endModel.errors\"\n                (click)=\"addDateRange()\">\n                {{metadata.addButtonLabel}}\n            </button>\n            <button type=\"button\" mat-raised-button\n                [disabled]=\"!selection.selected.length\"\n                (click)=\"remove()\">\n                {{metadata.removeButtonLabel}}\n            </button>\n        </div>\n    </div>\n\n    <mat-table [dataSource]=\"dataSource\">\n        <!-- select Column -->\n        <ng-container matColumnDef=\"select\">\n            <mat-header-cell *matHeaderCellDef>\n                <mat-checkbox [disabled]=\"!dataSource.data.length\" [checked]=\"selection.hasValue() && SelectionUtilities.isAllSelected(selection, dataSource)\" [indeterminate]=\"selection.hasValue() && !SelectionUtilities.isAllSelected(selection, dataSource)\" (change)=\"$event ? SelectionUtilities.masterToggle(selection, dataSource) : null\"></mat-checkbox>\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let entity\">\n                <mat-checkbox [checked]=\"selection.isSelected(entity)\" (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(entity) : null\"></mat-checkbox>\n            </mat-cell>\n        </ng-container>\n    \n        <ng-container *ngFor=\"let dCol of metadata.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n            <mat-header-cell *matHeaderCellDef>\n                {{dCol.displayName}}\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let entity\" class=\"entity\">\n                {{getDisplayColumnValue(entity, dCol)}}\n            </mat-cell>\n        </ng-container>\n    \n        <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n        <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n    </mat-table>\n\n    <div *ngIf=\"metadata.required(entity) && !dataSource.data.length\" class=\"array-error\">\n        {{metadata.missingErrorMessage}}\n    </div>\n</div>", styles: [".mdc-data-table__row:last-child .mdc-data-table__cell{border-bottom:1px solid rgba(0,0,0,.12)}mat-form-field{width:100%}.buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px}.elevation-container{border-radius:5px;padding:15px;margin-bottom:15px;margin-top:15px}.array-headline{padding-bottom:10px}mat-table{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:25px}.mat-column-select{flex:0 0 75px}.array-error{display:flex;align-items:center;justify-content:center;margin-top:-25.8px;border:1px solid #E0E0E0;background-color:#f8d3d7;color:#721c24;height:25.8px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i7.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i7.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i7.MatStartDate, selector: "input[matStartDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i7.MatEndDate, selector: "input[matEndDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i7.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: ArrayDateRangeInputComponent, selector: "array-date-range-input", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<div class=\"mat-elevation-z8 elevation-container\">\n    <div class=\"array-headline\">\n        <b>{{metadata.displayName}}</b>\n    </div>\n    <div *ngIf=\"!isReadOnly\">\n        <mat-form-field>\n            <mat-label>{{metadata.displayName}}</mat-label>\n            \n            <mat-date-range-input [rangePicker]=\"picker\" [required]=\"metadata.required(entity)\" [dateFilter]=\"metadata.filter ? metadata.filter : DateUtilities.defaultDateFilter\">\n                <input #startModel=\"ngModel\"\n                    matStartDate\n                    [name]=\"name + 'start'\"\n                    [required]=\"metadata.required(entity)\"\n                    [min]=\"metadata.minStart ? metadata.minStart(input?.start) : undefined\"\n                    [max]=\"metadata.maxStart ? metadata.maxStart(input?.start) : undefined\"\n                    [placeholder]=\"metadata.placeholderStart\"\n                    [(ngModel)]=\"dateRangeStart\"\n                >\n                <input #endModel=\"ngModel\"\n                    matEndDate\n                    [name]=\"name + 'end'\"\n                    [required]=\"metadata.required(entity)\"\n                    [min]=\"metadata.minEnd ? metadata.minEnd(input?.end) : undefined\"\n                    [max]=\"metadata.maxEnd ? metadata.maxEnd(input?.end) : undefined\"\n                    [placeholder]=\"metadata.placeholderEnd\"\n                    [(ngModel)]=\"dateRangeEnd\"\n                >\n            </mat-date-range-input>\n            <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n            <mat-date-range-picker #picker></mat-date-range-picker>\n    \n            <mat-error *ngIf=\"startModel.errors\">{{getValidationErrorMessage(startModel)}}</mat-error>\n            <mat-error *ngIf=\"!startModel.errors && endModel.errors\">{{getValidationErrorMessage(endModel)}}</mat-error>\n        </mat-form-field>\n        \n        <div class=\"buttons\">\n            <button type=\"button\" mat-raised-button\n                [disabled]=\"startModel.errors || endModel.errors\"\n                (click)=\"addDateRange()\">\n                {{metadata.addButtonLabel}}\n            </button>\n            <button type=\"button\" mat-raised-button\n                [disabled]=\"!selection.selected.length\"\n                (click)=\"remove()\">\n                {{metadata.removeButtonLabel}}\n            </button>\n        </div>\n    </div>\n\n    <mat-table [dataSource]=\"dataSource\">\n        <!-- select Column -->\n        <ng-container matColumnDef=\"select\">\n            <mat-header-cell *matHeaderCellDef>\n                <mat-checkbox [disabled]=\"!dataSource.data.length\" [checked]=\"selection.hasValue() && SelectionUtilities.isAllSelected(selection, dataSource)\" [indeterminate]=\"selection.hasValue() && !SelectionUtilities.isAllSelected(selection, dataSource)\" (change)=\"$event ? SelectionUtilities.masterToggle(selection, dataSource) : null\"></mat-checkbox>\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let entity\">\n                <mat-checkbox [checked]=\"selection.isSelected(entity)\" (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(entity) : null\"></mat-checkbox>\n            </mat-cell>\n        </ng-container>\n    \n        <ng-container *ngFor=\"let dCol of metadata.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n            <mat-header-cell *matHeaderCellDef>\n                {{dCol.displayName}}\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let entity\" class=\"entity\">\n                {{getDisplayColumnValue(entity, dCol)}}\n            </mat-cell>\n        </ng-container>\n    \n        <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n        <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n    </mat-table>\n\n    <div *ngIf=\"metadata.required(entity) && !dataSource.data.length\" class=\"array-error\">\n        {{metadata.missingErrorMessage}}\n    </div>\n</div>", styles: [".mdc-data-table__row:last-child .mdc-data-table__cell{border-bottom:1px solid rgba(0,0,0,.12)}mat-form-field{width:100%}.buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px;flex-wrap:wrap;gap:10px}.buttons button{flex-grow:1}.elevation-container{border-radius:5px;padding:15px;margin-bottom:15px;margin-top:15px}.array-headline{padding-bottom:10px}mat-table{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:5px}.mat-column-select{flex:0 0 48px;padding-left:0;padding-right:0;justify-content:center}.array-error{display:flex;align-items:center;justify-content:center;margin-top:-6px;border:1px solid #E0E0E0;background-color:#f8d3d7;color:#721c24;height:-moz-fit-content;height:fit-content;padding-left:4px;padding-right:4px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i7.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i7.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i7.MatStartDate, selector: "input[matStartDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i7.MatEndDate, selector: "input[matEndDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i7.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: ArrayDateRangeInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'array-date-range-input', template: "<!-- eslint-disable angular/no-call-expression -->\n<div class=\"mat-elevation-z8 elevation-container\">\n    <div class=\"array-headline\">\n        <b>{{metadata.displayName}}</b>\n    </div>\n    <div *ngIf=\"!isReadOnly\">\n        <mat-form-field>\n            <mat-label>{{metadata.displayName}}</mat-label>\n            \n            <mat-date-range-input [rangePicker]=\"picker\" [required]=\"metadata.required(entity)\" [dateFilter]=\"metadata.filter ? metadata.filter : DateUtilities.defaultDateFilter\">\n                <input #startModel=\"ngModel\"\n                    matStartDate\n                    [name]=\"name + 'start'\"\n                    [required]=\"metadata.required(entity)\"\n                    [min]=\"metadata.minStart ? metadata.minStart(input?.start) : undefined\"\n                    [max]=\"metadata.maxStart ? metadata.maxStart(input?.start) : undefined\"\n                    [placeholder]=\"metadata.placeholderStart\"\n                    [(ngModel)]=\"dateRangeStart\"\n                >\n                <input #endModel=\"ngModel\"\n                    matEndDate\n                    [name]=\"name + 'end'\"\n                    [required]=\"metadata.required(entity)\"\n                    [min]=\"metadata.minEnd ? metadata.minEnd(input?.end) : undefined\"\n                    [max]=\"metadata.maxEnd ? metadata.maxEnd(input?.end) : undefined\"\n                    [placeholder]=\"metadata.placeholderEnd\"\n                    [(ngModel)]=\"dateRangeEnd\"\n                >\n            </mat-date-range-input>\n            <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n            <mat-date-range-picker #picker></mat-date-range-picker>\n    \n            <mat-error *ngIf=\"startModel.errors\">{{getValidationErrorMessage(startModel)}}</mat-error>\n            <mat-error *ngIf=\"!startModel.errors && endModel.errors\">{{getValidationErrorMessage(endModel)}}</mat-error>\n        </mat-form-field>\n        \n        <div class=\"buttons\">\n            <button type=\"button\" mat-raised-button\n                [disabled]=\"startModel.errors || endModel.errors\"\n                (click)=\"addDateRange()\">\n                {{metadata.addButtonLabel}}\n            </button>\n            <button type=\"button\" mat-raised-button\n                [disabled]=\"!selection.selected.length\"\n                (click)=\"remove()\">\n                {{metadata.removeButtonLabel}}\n            </button>\n        </div>\n    </div>\n\n    <mat-table [dataSource]=\"dataSource\">\n        <!-- select Column -->\n        <ng-container matColumnDef=\"select\">\n            <mat-header-cell *matHeaderCellDef>\n                <mat-checkbox [disabled]=\"!dataSource.data.length\" [checked]=\"selection.hasValue() && SelectionUtilities.isAllSelected(selection, dataSource)\" [indeterminate]=\"selection.hasValue() && !SelectionUtilities.isAllSelected(selection, dataSource)\" (change)=\"$event ? SelectionUtilities.masterToggle(selection, dataSource) : null\"></mat-checkbox>\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let entity\">\n                <mat-checkbox [checked]=\"selection.isSelected(entity)\" (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(entity) : null\"></mat-checkbox>\n            </mat-cell>\n        </ng-container>\n    \n        <ng-container *ngFor=\"let dCol of metadata.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n            <mat-header-cell *matHeaderCellDef>\n                {{dCol.displayName}}\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let entity\" class=\"entity\">\n                {{getDisplayColumnValue(entity, dCol)}}\n            </mat-cell>\n        </ng-container>\n    \n        <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n        <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n    </mat-table>\n\n    <div *ngIf=\"metadata.required(entity) && !dataSource.data.length\" class=\"array-error\">\n        {{metadata.missingErrorMessage}}\n    </div>\n</div>", styles: [".mdc-data-table__row:last-child .mdc-data-table__cell{border-bottom:1px solid rgba(0,0,0,.12)}mat-form-field{width:100%}.buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px}.elevation-container{border-radius:5px;padding:15px;margin-bottom:15px;margin-top:15px}.array-headline{padding-bottom:10px}mat-table{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:25px}.mat-column-select{flex:0 0 75px}.array-error{display:flex;align-items:center;justify-content:center;margin-top:-25.8px;border:1px solid #E0E0E0;background-color:#f8d3d7;color:#721c24;height:25.8px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}\n"] }]
+            args: [{ selector: 'array-date-range-input', template: "<!-- eslint-disable angular/no-call-expression -->\n<div class=\"mat-elevation-z8 elevation-container\">\n    <div class=\"array-headline\">\n        <b>{{metadata.displayName}}</b>\n    </div>\n    <div *ngIf=\"!isReadOnly\">\n        <mat-form-field>\n            <mat-label>{{metadata.displayName}}</mat-label>\n            \n            <mat-date-range-input [rangePicker]=\"picker\" [required]=\"metadata.required(entity)\" [dateFilter]=\"metadata.filter ? metadata.filter : DateUtilities.defaultDateFilter\">\n                <input #startModel=\"ngModel\"\n                    matStartDate\n                    [name]=\"name + 'start'\"\n                    [required]=\"metadata.required(entity)\"\n                    [min]=\"metadata.minStart ? metadata.minStart(input?.start) : undefined\"\n                    [max]=\"metadata.maxStart ? metadata.maxStart(input?.start) : undefined\"\n                    [placeholder]=\"metadata.placeholderStart\"\n                    [(ngModel)]=\"dateRangeStart\"\n                >\n                <input #endModel=\"ngModel\"\n                    matEndDate\n                    [name]=\"name + 'end'\"\n                    [required]=\"metadata.required(entity)\"\n                    [min]=\"metadata.minEnd ? metadata.minEnd(input?.end) : undefined\"\n                    [max]=\"metadata.maxEnd ? metadata.maxEnd(input?.end) : undefined\"\n                    [placeholder]=\"metadata.placeholderEnd\"\n                    [(ngModel)]=\"dateRangeEnd\"\n                >\n            </mat-date-range-input>\n            <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n            <mat-date-range-picker #picker></mat-date-range-picker>\n    \n            <mat-error *ngIf=\"startModel.errors\">{{getValidationErrorMessage(startModel)}}</mat-error>\n            <mat-error *ngIf=\"!startModel.errors && endModel.errors\">{{getValidationErrorMessage(endModel)}}</mat-error>\n        </mat-form-field>\n        \n        <div class=\"buttons\">\n            <button type=\"button\" mat-raised-button\n                [disabled]=\"startModel.errors || endModel.errors\"\n                (click)=\"addDateRange()\">\n                {{metadata.addButtonLabel}}\n            </button>\n            <button type=\"button\" mat-raised-button\n                [disabled]=\"!selection.selected.length\"\n                (click)=\"remove()\">\n                {{metadata.removeButtonLabel}}\n            </button>\n        </div>\n    </div>\n\n    <mat-table [dataSource]=\"dataSource\">\n        <!-- select Column -->\n        <ng-container matColumnDef=\"select\">\n            <mat-header-cell *matHeaderCellDef>\n                <mat-checkbox [disabled]=\"!dataSource.data.length\" [checked]=\"selection.hasValue() && SelectionUtilities.isAllSelected(selection, dataSource)\" [indeterminate]=\"selection.hasValue() && !SelectionUtilities.isAllSelected(selection, dataSource)\" (change)=\"$event ? SelectionUtilities.masterToggle(selection, dataSource) : null\"></mat-checkbox>\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let entity\">\n                <mat-checkbox [checked]=\"selection.isSelected(entity)\" (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(entity) : null\"></mat-checkbox>\n            </mat-cell>\n        </ng-container>\n    \n        <ng-container *ngFor=\"let dCol of metadata.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n            <mat-header-cell *matHeaderCellDef>\n                {{dCol.displayName}}\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let entity\" class=\"entity\">\n                {{getDisplayColumnValue(entity, dCol)}}\n            </mat-cell>\n        </ng-container>\n    \n        <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n        <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n    </mat-table>\n\n    <div *ngIf=\"metadata.required(entity) && !dataSource.data.length\" class=\"array-error\">\n        {{metadata.missingErrorMessage}}\n    </div>\n</div>", styles: [".mdc-data-table__row:last-child .mdc-data-table__cell{border-bottom:1px solid rgba(0,0,0,.12)}mat-form-field{width:100%}.buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px;flex-wrap:wrap;gap:10px}.buttons button{flex-grow:1}.elevation-container{border-radius:5px;padding:15px;margin-bottom:15px;margin-top:15px}.array-headline{padding-bottom:10px}mat-table{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:5px}.mat-column-select{flex:0 0 48px;padding-left:0;padding-right:0;justify-content:center}.array-error{display:flex;align-items:center;justify-content:center;margin-top:-6px;border:1px solid #E0E0E0;background-color:#f8d3d7;color:#721c24;height:-moz-fit-content;height:fit-content;padding-left:4px;padding-right:4px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.MatDialog }, { type: i0.EnvironmentInjector }, { type: i2$1.HttpClient }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [NGX_INTERNAL_GLOBAL_DEFAULT_VALUES]
@@ -3550,11 +3554,11 @@ class ArrayDateTimeInputComponent extends ArrayTableComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: ArrayDateTimeInputComponent, deps: [{ token: i1.MatDialog }, { token: i0.EnvironmentInjector }, { token: i2$1.HttpClient }, { token: NGX_INTERNAL_GLOBAL_DEFAULT_VALUES }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: ArrayDateTimeInputComponent, selector: "array-date-time-input", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<div class=\"mat-elevation-z8 elevation-container\">\n    <div class=\"array-headline\">\n        <b>{{metadata.displayName}}</b>\n    </div>\n    <div *ngIf=\"!isReadOnly\">\n        <div class=\"date-time\">\n            <mat-form-field>\n                <mat-label>{{metadata.displayName}}</mat-label>\n                <input\n                    #model=\"ngModel\"\n                    matInput\n                    [name]=\"name\"\n                    [matDatepicker]=\"picker\"\n                    [required]=\"metadata.required(entity)\"\n                    [min]=\"metadata.minDate ? metadata.minDate(input) : undefined\"\n                    [max]=\"metadata.maxDate ? metadata.maxDate(input) : undefined\"\n                    [matDatepickerFilter]=\"metadata.filterDate ?? DateUtilities.defaultDateFilter\"\n                    [(ngModel)]=\"input\"\n                >\n                <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n                <mat-datepicker #picker></mat-datepicker>\n                <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n            </mat-form-field>\n            <mat-form-field class=\"timepicker\">\n                <mat-label>{{metadata.timeDisplayName}}</mat-label>\n                <mat-select\n                    #timeModel=\"ngModel\"\n                    [name]=\"name + 'time'\"\n                    [required]=\"metadata.required(entity)\"\n                    [(ngModel)]=\"time\"\n                >\n                    <mat-option *ngFor=\"let validTime of DateUtilities.getValidTimesForDropdown(\n                            metadata.times,\n                            input,\n                            metadata.minTime,\n                            metadata.maxTime,\n                            metadata.filterTime\n                        )\"\n                        [value]=\"validTime.value\"\n                    >\n                        {{validTime.displayName}}\n                    </mat-option>\n                </mat-select>\n                <mat-error>{{getValidationErrorMessage(timeModel)}}</mat-error>\n            </mat-form-field>\n        </div>\n        <div class=\"buttons\">\n            <button type=\"button\" mat-raised-button\n                [disabled]=\"model.errors || timeModel.errors || DateUtilities.timeIsUnprocessable(time)\"\n                (click)=\"addDateTime()\">\n                {{metadata.addButtonLabel}}\n            </button>\n            <button type=\"button\" mat-raised-button\n                [disabled]=\"!selection.selected.length\"\n                (click)=\"remove()\">\n                {{metadata.removeButtonLabel}}\n            </button>\n        </div>\n    </div>\n\n    <mat-table [dataSource]=\"dataSource\">\n        <!-- select Column -->\n        <ng-container matColumnDef=\"select\">\n            <mat-header-cell *matHeaderCellDef>\n                <mat-checkbox [disabled]=\"!dataSource.data.length\" [checked]=\"selection.hasValue() && SelectionUtilities.isAllSelected(selection, dataSource)\" [indeterminate]=\"selection.hasValue() && !SelectionUtilities.isAllSelected(selection, dataSource)\" (change)=\"$event ? SelectionUtilities.masterToggle(selection, dataSource) : null\"></mat-checkbox>\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let entity\">\n                <mat-checkbox [checked]=\"selection.isSelected(entity)\" (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(entity) : null\"></mat-checkbox>\n            </mat-cell>\n        </ng-container>\n    \n        <ng-container *ngFor=\"let dCol of metadata.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n            <mat-header-cell *matHeaderCellDef>\n                {{dCol.displayName}}\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let entity\" class=\"entity\">\n                {{getDisplayColumnValue(entity, dCol)}}\n            </mat-cell>\n        </ng-container>\n    \n        <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n        <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n    </mat-table>\n\n    <div *ngIf=\"metadata.required(entity) && !dataSource.data.length\" class=\"array-error\">\n        {{metadata.missingErrorMessage}}\n    </div>\n</div>", styles: [".mdc-data-table__row:last-child .mdc-data-table__cell{border-bottom:1px solid rgba(0,0,0,.12)}mat-form-field{width:100%}.buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px}.elevation-container{border-radius:5px;padding:15px;margin-bottom:15px;margin-top:15px}.array-headline{padding-bottom:10px}mat-table{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:25px}.mat-column-select{flex:0 0 75px}.array-error{display:flex;align-items:center;justify-content:center;margin-top:-25.8px;border:1px solid #E0E0E0;background-color:#f8d3d7;color:#721c24;height:25.8px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.date-time{display:flex;align-items:baseline}.date-time .timepicker{margin-left:10px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i7.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i7.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i7.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: ArrayDateTimeInputComponent, selector: "array-date-time-input", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<div class=\"mat-elevation-z8 elevation-container\">\n    <div class=\"array-headline\">\n        <b>{{metadata.displayName}}</b>\n    </div>\n    <div *ngIf=\"!isReadOnly\">\n        <div class=\"date-time\">\n            <mat-form-field>\n                <mat-label>{{metadata.displayName}}</mat-label>\n                <input\n                    #model=\"ngModel\"\n                    matInput\n                    [name]=\"name\"\n                    [matDatepicker]=\"picker\"\n                    [required]=\"metadata.required(entity)\"\n                    [min]=\"metadata.minDate ? metadata.minDate(input) : undefined\"\n                    [max]=\"metadata.maxDate ? metadata.maxDate(input) : undefined\"\n                    [matDatepickerFilter]=\"metadata.filterDate ?? DateUtilities.defaultDateFilter\"\n                    [(ngModel)]=\"input\"\n                >\n                <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n                <mat-datepicker #picker></mat-datepicker>\n                <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n            </mat-form-field>\n            <mat-form-field class=\"timepicker\">\n                <mat-label>{{metadata.timeDisplayName}}</mat-label>\n                <mat-select\n                    #timeModel=\"ngModel\"\n                    [name]=\"name + 'time'\"\n                    [required]=\"metadata.required(entity)\"\n                    [(ngModel)]=\"time\"\n                >\n                    <mat-option *ngFor=\"let validTime of DateUtilities.getValidTimesForDropdown(\n                            metadata.times,\n                            input,\n                            metadata.minTime,\n                            metadata.maxTime,\n                            metadata.filterTime\n                        )\"\n                        [value]=\"validTime.value\"\n                    >\n                        {{validTime.displayName}}\n                    </mat-option>\n                </mat-select>\n                <mat-error>{{getValidationErrorMessage(timeModel)}}</mat-error>\n            </mat-form-field>\n        </div>\n        <div class=\"buttons\">\n            <button type=\"button\" mat-raised-button\n                [disabled]=\"model.errors || timeModel.errors || DateUtilities.timeIsUnprocessable(time)\"\n                (click)=\"addDateTime()\">\n                {{metadata.addButtonLabel}}\n            </button>\n            <button type=\"button\" mat-raised-button\n                [disabled]=\"!selection.selected.length\"\n                (click)=\"remove()\">\n                {{metadata.removeButtonLabel}}\n            </button>\n        </div>\n    </div>\n\n    <mat-table [dataSource]=\"dataSource\">\n        <!-- select Column -->\n        <ng-container matColumnDef=\"select\">\n            <mat-header-cell *matHeaderCellDef>\n                <mat-checkbox [disabled]=\"!dataSource.data.length\" [checked]=\"selection.hasValue() && SelectionUtilities.isAllSelected(selection, dataSource)\" [indeterminate]=\"selection.hasValue() && !SelectionUtilities.isAllSelected(selection, dataSource)\" (change)=\"$event ? SelectionUtilities.masterToggle(selection, dataSource) : null\"></mat-checkbox>\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let entity\">\n                <mat-checkbox [checked]=\"selection.isSelected(entity)\" (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(entity) : null\"></mat-checkbox>\n            </mat-cell>\n        </ng-container>\n    \n        <ng-container *ngFor=\"let dCol of metadata.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n            <mat-header-cell *matHeaderCellDef>\n                {{dCol.displayName}}\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let entity\" class=\"entity\">\n                {{getDisplayColumnValue(entity, dCol)}}\n            </mat-cell>\n        </ng-container>\n    \n        <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n        <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n    </mat-table>\n\n    <div *ngIf=\"metadata.required(entity) && !dataSource.data.length\" class=\"array-error\">\n        {{metadata.missingErrorMessage}}\n    </div>\n</div>", styles: [".mdc-data-table__row:last-child .mdc-data-table__cell{border-bottom:1px solid rgba(0,0,0,.12)}mat-form-field{width:100%}.buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px;flex-wrap:wrap;gap:10px}.buttons button{flex-grow:1}.elevation-container{border-radius:5px;padding:15px;margin-bottom:15px;margin-top:15px}.array-headline{padding-bottom:10px}mat-table{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:5px}.mat-column-select{flex:0 0 48px;padding-left:0;padding-right:0;justify-content:center}.array-error{display:flex;align-items:center;justify-content:center;margin-top:-6px;border:1px solid #E0E0E0;background-color:#f8d3d7;color:#721c24;height:-moz-fit-content;height:fit-content;padding-left:4px;padding-right:4px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.date-time{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:10px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i7.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i7.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i7.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: ArrayDateTimeInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'array-date-time-input', template: "<!-- eslint-disable angular/no-call-expression -->\n<div class=\"mat-elevation-z8 elevation-container\">\n    <div class=\"array-headline\">\n        <b>{{metadata.displayName}}</b>\n    </div>\n    <div *ngIf=\"!isReadOnly\">\n        <div class=\"date-time\">\n            <mat-form-field>\n                <mat-label>{{metadata.displayName}}</mat-label>\n                <input\n                    #model=\"ngModel\"\n                    matInput\n                    [name]=\"name\"\n                    [matDatepicker]=\"picker\"\n                    [required]=\"metadata.required(entity)\"\n                    [min]=\"metadata.minDate ? metadata.minDate(input) : undefined\"\n                    [max]=\"metadata.maxDate ? metadata.maxDate(input) : undefined\"\n                    [matDatepickerFilter]=\"metadata.filterDate ?? DateUtilities.defaultDateFilter\"\n                    [(ngModel)]=\"input\"\n                >\n                <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n                <mat-datepicker #picker></mat-datepicker>\n                <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n            </mat-form-field>\n            <mat-form-field class=\"timepicker\">\n                <mat-label>{{metadata.timeDisplayName}}</mat-label>\n                <mat-select\n                    #timeModel=\"ngModel\"\n                    [name]=\"name + 'time'\"\n                    [required]=\"metadata.required(entity)\"\n                    [(ngModel)]=\"time\"\n                >\n                    <mat-option *ngFor=\"let validTime of DateUtilities.getValidTimesForDropdown(\n                            metadata.times,\n                            input,\n                            metadata.minTime,\n                            metadata.maxTime,\n                            metadata.filterTime\n                        )\"\n                        [value]=\"validTime.value\"\n                    >\n                        {{validTime.displayName}}\n                    </mat-option>\n                </mat-select>\n                <mat-error>{{getValidationErrorMessage(timeModel)}}</mat-error>\n            </mat-form-field>\n        </div>\n        <div class=\"buttons\">\n            <button type=\"button\" mat-raised-button\n                [disabled]=\"model.errors || timeModel.errors || DateUtilities.timeIsUnprocessable(time)\"\n                (click)=\"addDateTime()\">\n                {{metadata.addButtonLabel}}\n            </button>\n            <button type=\"button\" mat-raised-button\n                [disabled]=\"!selection.selected.length\"\n                (click)=\"remove()\">\n                {{metadata.removeButtonLabel}}\n            </button>\n        </div>\n    </div>\n\n    <mat-table [dataSource]=\"dataSource\">\n        <!-- select Column -->\n        <ng-container matColumnDef=\"select\">\n            <mat-header-cell *matHeaderCellDef>\n                <mat-checkbox [disabled]=\"!dataSource.data.length\" [checked]=\"selection.hasValue() && SelectionUtilities.isAllSelected(selection, dataSource)\" [indeterminate]=\"selection.hasValue() && !SelectionUtilities.isAllSelected(selection, dataSource)\" (change)=\"$event ? SelectionUtilities.masterToggle(selection, dataSource) : null\"></mat-checkbox>\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let entity\">\n                <mat-checkbox [checked]=\"selection.isSelected(entity)\" (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(entity) : null\"></mat-checkbox>\n            </mat-cell>\n        </ng-container>\n    \n        <ng-container *ngFor=\"let dCol of metadata.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n            <mat-header-cell *matHeaderCellDef>\n                {{dCol.displayName}}\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let entity\" class=\"entity\">\n                {{getDisplayColumnValue(entity, dCol)}}\n            </mat-cell>\n        </ng-container>\n    \n        <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n        <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n    </mat-table>\n\n    <div *ngIf=\"metadata.required(entity) && !dataSource.data.length\" class=\"array-error\">\n        {{metadata.missingErrorMessage}}\n    </div>\n</div>", styles: [".mdc-data-table__row:last-child .mdc-data-table__cell{border-bottom:1px solid rgba(0,0,0,.12)}mat-form-field{width:100%}.buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px}.elevation-container{border-radius:5px;padding:15px;margin-bottom:15px;margin-top:15px}.array-headline{padding-bottom:10px}mat-table{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:25px}.mat-column-select{flex:0 0 75px}.array-error{display:flex;align-items:center;justify-content:center;margin-top:-25.8px;border:1px solid #E0E0E0;background-color:#f8d3d7;color:#721c24;height:25.8px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.date-time{display:flex;align-items:baseline}.date-time .timepicker{margin-left:10px}\n"] }]
+            args: [{ selector: 'array-date-time-input', template: "<!-- eslint-disable angular/no-call-expression -->\n<div class=\"mat-elevation-z8 elevation-container\">\n    <div class=\"array-headline\">\n        <b>{{metadata.displayName}}</b>\n    </div>\n    <div *ngIf=\"!isReadOnly\">\n        <div class=\"date-time\">\n            <mat-form-field>\n                <mat-label>{{metadata.displayName}}</mat-label>\n                <input\n                    #model=\"ngModel\"\n                    matInput\n                    [name]=\"name\"\n                    [matDatepicker]=\"picker\"\n                    [required]=\"metadata.required(entity)\"\n                    [min]=\"metadata.minDate ? metadata.minDate(input) : undefined\"\n                    [max]=\"metadata.maxDate ? metadata.maxDate(input) : undefined\"\n                    [matDatepickerFilter]=\"metadata.filterDate ?? DateUtilities.defaultDateFilter\"\n                    [(ngModel)]=\"input\"\n                >\n                <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n                <mat-datepicker #picker></mat-datepicker>\n                <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n            </mat-form-field>\n            <mat-form-field class=\"timepicker\">\n                <mat-label>{{metadata.timeDisplayName}}</mat-label>\n                <mat-select\n                    #timeModel=\"ngModel\"\n                    [name]=\"name + 'time'\"\n                    [required]=\"metadata.required(entity)\"\n                    [(ngModel)]=\"time\"\n                >\n                    <mat-option *ngFor=\"let validTime of DateUtilities.getValidTimesForDropdown(\n                            metadata.times,\n                            input,\n                            metadata.minTime,\n                            metadata.maxTime,\n                            metadata.filterTime\n                        )\"\n                        [value]=\"validTime.value\"\n                    >\n                        {{validTime.displayName}}\n                    </mat-option>\n                </mat-select>\n                <mat-error>{{getValidationErrorMessage(timeModel)}}</mat-error>\n            </mat-form-field>\n        </div>\n        <div class=\"buttons\">\n            <button type=\"button\" mat-raised-button\n                [disabled]=\"model.errors || timeModel.errors || DateUtilities.timeIsUnprocessable(time)\"\n                (click)=\"addDateTime()\">\n                {{metadata.addButtonLabel}}\n            </button>\n            <button type=\"button\" mat-raised-button\n                [disabled]=\"!selection.selected.length\"\n                (click)=\"remove()\">\n                {{metadata.removeButtonLabel}}\n            </button>\n        </div>\n    </div>\n\n    <mat-table [dataSource]=\"dataSource\">\n        <!-- select Column -->\n        <ng-container matColumnDef=\"select\">\n            <mat-header-cell *matHeaderCellDef>\n                <mat-checkbox [disabled]=\"!dataSource.data.length\" [checked]=\"selection.hasValue() && SelectionUtilities.isAllSelected(selection, dataSource)\" [indeterminate]=\"selection.hasValue() && !SelectionUtilities.isAllSelected(selection, dataSource)\" (change)=\"$event ? SelectionUtilities.masterToggle(selection, dataSource) : null\"></mat-checkbox>\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let entity\">\n                <mat-checkbox [checked]=\"selection.isSelected(entity)\" (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(entity) : null\"></mat-checkbox>\n            </mat-cell>\n        </ng-container>\n    \n        <ng-container *ngFor=\"let dCol of metadata.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n            <mat-header-cell *matHeaderCellDef>\n                {{dCol.displayName}}\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let entity\" class=\"entity\">\n                {{getDisplayColumnValue(entity, dCol)}}\n            </mat-cell>\n        </ng-container>\n    \n        <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n        <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n    </mat-table>\n\n    <div *ngIf=\"metadata.required(entity) && !dataSource.data.length\" class=\"array-error\">\n        {{metadata.missingErrorMessage}}\n    </div>\n</div>", styles: [".mdc-data-table__row:last-child .mdc-data-table__cell{border-bottom:1px solid rgba(0,0,0,.12)}mat-form-field{width:100%}.buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px;flex-wrap:wrap;gap:10px}.buttons button{flex-grow:1}.elevation-container{border-radius:5px;padding:15px;margin-bottom:15px;margin-top:15px}.array-headline{padding-bottom:10px}mat-table{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:5px}.mat-column-select{flex:0 0 48px;padding-left:0;padding-right:0;justify-content:center}.array-error{display:flex;align-items:center;justify-content:center;margin-top:-6px;border:1px solid #E0E0E0;background-color:#f8d3d7;color:#721c24;height:-moz-fit-content;height:fit-content;padding-left:4px;padding-right:4px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.date-time{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:10px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.MatDialog }, { type: i0.EnvironmentInjector }, { type: i2$1.HttpClient }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [NGX_INTERNAL_GLOBAL_DEFAULT_VALUES]
@@ -4010,11 +4014,11 @@ class DateTimeInputComponent extends NgxMatEntityBaseInputComponent {
         this.emitChange();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: DateTimeInputComponent, deps: [{ token: NGX_INTERNAL_GLOBAL_DEFAULT_VALUES }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: DateTimeInputComponent, selector: "date-time-input", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<div class=\"date-time\">\n    <mat-form-field>\n        <mat-label>{{metadata.displayName}}</mat-label>\n        <input\n            #model=\"ngModel\"\n            matInput\n            [name]=\"name\"\n            [matDatepicker]=\"picker\"\n            [required]=\"metadata.required(entity)\"\n            [min]=\"metadata.minDate ? metadata.minDate(propertyValue) : undefined\"\n            [max]=\"metadata.maxDate ? metadata.maxDate(propertyValue) : undefined\"\n            [matDatepickerFilter]=\"metadata.filterDate ?? defaultDateFilter\"\n            [disabled]=\"isReadOnly\"\n            [(ngModel)]=\"propertyValue\"\n            (dateChange)=\"setTime()\"\n        >\n        <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n        <mat-datepicker #picker></mat-datepicker>\n        <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n    </mat-form-field>\n    <mat-form-field class=\"timepicker\">\n        <mat-label>{{metadata.timeDisplayName}}</mat-label>\n        <mat-select\n            #timeModel=\"ngModel\"\n            [name]=\"name + 'time'\"\n            [required]=\"metadata.required(entity)\"\n            [compareWith]=\"compareTimes\"\n            [disabled]=\"isReadOnly\"\n            [(ngModel)]=\"time\"\n            (selectionChange)=\"setTime()\"\n        >\n            <mat-option *ngFor=\"let validTime of DateUtilities.getValidTimesForDropdown(\n                    metadata.times,\n                    propertyValue,\n                    metadata.minTime,\n                    metadata.maxTime,\n                    metadata.filterTime\n                )\"\n                [value]=\"validTime.value\"\n            >\n                {{validTime.displayName}}\n            </mat-option>\n        </mat-select>\n        <mat-error>{{getValidationErrorMessage(timeModel)}}</mat-error>\n    </mat-form-field>\n</div>", styles: ["mat-form-field{width:100%}.date-time{display:flex;align-items:baseline}.date-time .timepicker{margin-left:10px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i7.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i7.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i7.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: DateTimeInputComponent, selector: "date-time-input", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<div class=\"date-time\">\n    <mat-form-field>\n        <mat-label>{{metadata.displayName}}</mat-label>\n        <input\n            #model=\"ngModel\"\n            matInput\n            [name]=\"name\"\n            [matDatepicker]=\"picker\"\n            [required]=\"metadata.required(entity)\"\n            [min]=\"metadata.minDate ? metadata.minDate(propertyValue) : undefined\"\n            [max]=\"metadata.maxDate ? metadata.maxDate(propertyValue) : undefined\"\n            [matDatepickerFilter]=\"metadata.filterDate ?? defaultDateFilter\"\n            [disabled]=\"isReadOnly\"\n            [(ngModel)]=\"propertyValue\"\n            (dateChange)=\"setTime()\"\n        >\n        <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n        <mat-datepicker #picker></mat-datepicker>\n        <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n    </mat-form-field>\n    <mat-form-field class=\"timepicker\">\n        <mat-label>{{metadata.timeDisplayName}}</mat-label>\n        <mat-select\n            #timeModel=\"ngModel\"\n            [name]=\"name + 'time'\"\n            [required]=\"metadata.required(entity)\"\n            [compareWith]=\"compareTimes\"\n            [disabled]=\"isReadOnly\"\n            [(ngModel)]=\"time\"\n            (selectionChange)=\"setTime()\"\n        >\n            <mat-option *ngFor=\"let validTime of DateUtilities.getValidTimesForDropdown(\n                    metadata.times,\n                    propertyValue,\n                    metadata.minTime,\n                    metadata.maxTime,\n                    metadata.filterTime\n                )\"\n                [value]=\"validTime.value\"\n            >\n                {{validTime.displayName}}\n            </mat-option>\n        </mat-select>\n        <mat-error>{{getValidationErrorMessage(timeModel)}}</mat-error>\n    </mat-form-field>\n</div>", styles: ["mat-form-field{width:100%}.date-time{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:10px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i7.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i7.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i7.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: DateTimeInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'date-time-input', template: "<!-- eslint-disable angular/no-call-expression -->\n<div class=\"date-time\">\n    <mat-form-field>\n        <mat-label>{{metadata.displayName}}</mat-label>\n        <input\n            #model=\"ngModel\"\n            matInput\n            [name]=\"name\"\n            [matDatepicker]=\"picker\"\n            [required]=\"metadata.required(entity)\"\n            [min]=\"metadata.minDate ? metadata.minDate(propertyValue) : undefined\"\n            [max]=\"metadata.maxDate ? metadata.maxDate(propertyValue) : undefined\"\n            [matDatepickerFilter]=\"metadata.filterDate ?? defaultDateFilter\"\n            [disabled]=\"isReadOnly\"\n            [(ngModel)]=\"propertyValue\"\n            (dateChange)=\"setTime()\"\n        >\n        <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n        <mat-datepicker #picker></mat-datepicker>\n        <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n    </mat-form-field>\n    <mat-form-field class=\"timepicker\">\n        <mat-label>{{metadata.timeDisplayName}}</mat-label>\n        <mat-select\n            #timeModel=\"ngModel\"\n            [name]=\"name + 'time'\"\n            [required]=\"metadata.required(entity)\"\n            [compareWith]=\"compareTimes\"\n            [disabled]=\"isReadOnly\"\n            [(ngModel)]=\"time\"\n            (selectionChange)=\"setTime()\"\n        >\n            <mat-option *ngFor=\"let validTime of DateUtilities.getValidTimesForDropdown(\n                    metadata.times,\n                    propertyValue,\n                    metadata.minTime,\n                    metadata.maxTime,\n                    metadata.filterTime\n                )\"\n                [value]=\"validTime.value\"\n            >\n                {{validTime.displayName}}\n            </mat-option>\n        </mat-select>\n        <mat-error>{{getValidationErrorMessage(timeModel)}}</mat-error>\n    </mat-form-field>\n</div>", styles: ["mat-form-field{width:100%}.date-time{display:flex;align-items:baseline}.date-time .timepicker{margin-left:10px}\n"] }]
+            args: [{ selector: 'date-time-input', template: "<!-- eslint-disable angular/no-call-expression -->\n<div class=\"date-time\">\n    <mat-form-field>\n        <mat-label>{{metadata.displayName}}</mat-label>\n        <input\n            #model=\"ngModel\"\n            matInput\n            [name]=\"name\"\n            [matDatepicker]=\"picker\"\n            [required]=\"metadata.required(entity)\"\n            [min]=\"metadata.minDate ? metadata.minDate(propertyValue) : undefined\"\n            [max]=\"metadata.maxDate ? metadata.maxDate(propertyValue) : undefined\"\n            [matDatepickerFilter]=\"metadata.filterDate ?? defaultDateFilter\"\n            [disabled]=\"isReadOnly\"\n            [(ngModel)]=\"propertyValue\"\n            (dateChange)=\"setTime()\"\n        >\n        <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n        <mat-datepicker #picker></mat-datepicker>\n        <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n    </mat-form-field>\n    <mat-form-field class=\"timepicker\">\n        <mat-label>{{metadata.timeDisplayName}}</mat-label>\n        <mat-select\n            #timeModel=\"ngModel\"\n            [name]=\"name + 'time'\"\n            [required]=\"metadata.required(entity)\"\n            [compareWith]=\"compareTimes\"\n            [disabled]=\"isReadOnly\"\n            [(ngModel)]=\"time\"\n            (selectionChange)=\"setTime()\"\n        >\n            <mat-option *ngFor=\"let validTime of DateUtilities.getValidTimesForDropdown(\n                    metadata.times,\n                    propertyValue,\n                    metadata.minTime,\n                    metadata.maxTime,\n                    metadata.filterTime\n                )\"\n                [value]=\"validTime.value\"\n            >\n                {{validTime.displayName}}\n            </mat-option>\n        </mat-select>\n        <mat-error>{{getValidationErrorMessage(timeModel)}}</mat-error>\n    </mat-form-field>\n</div>", styles: ["mat-form-field{width:100%}.date-time{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:10px}\n"] }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [NGX_INTERNAL_GLOBAL_DEFAULT_VALUES]
@@ -4115,7 +4119,7 @@ class FileInputComponent {
         this.fileDataChangeEvent.emit(this.propertyValue);
     }
     async setMultiFile(files) {
-        const data = [];
+        this.propertyValue = this.propertyValue ?? [];
         for (const file of files) {
             const fileData = {
                 file: file,
@@ -4123,9 +4127,8 @@ class FileInputComponent {
                 type: file.type,
                 size: file.size
             };
-            data.push(fileData);
+            this.propertyValue.push(fileData);
         }
-        this.propertyValue = LodashUtilities.cloneDeep(data);
         this.filenames = this.propertyValue.map(f => f.name);
     }
     async setSingleFile(file) {
@@ -4190,11 +4193,11 @@ class FileInputComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: FileInputComponent, deps: [{ token: i1.MatDialog }, { token: i2$1.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: FileInputComponent, selector: "file-input", inputs: { propertyValue: "propertyValue", entity: "entity", key: "key", metadata: "metadata", getValidationErrorMessage: "getValidationErrorMessage", isReadOnly: "isReadOnly" }, outputs: { fileDataChangeEvent: "fileDataChangeEvent" }, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<input #fileInput\n    type=\"file\" hidden\n    [multiple]=\"metadata.multiple\"\n    [accept]=\"acceptString\"\n    (change)=\"setFileFromInput($event)\"\n>\n\n<mat-form-field floatLabel=\"always\">\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-chip-grid #chipGrid\n        #model=\"ngModel\" name=\"file\" [required]=\"metadata.required(entity)\"\n        [(ngModel)]=\"filenames\"\n    >\n        <mat-chip-row *ngFor=\"let name of filenames\" (removed)=\"removeFile(name)\">\n            {{name}}\n            <span class=\"mat-mdc-chip-remove mat-mdc-chip-trailing-icon ngx-mat-grey\" (click)=\"downloadFile(name)\">\n                <i class=\"fas fa-download\"></i>\n            </span>\n            <button *ngIf=\"!isReadOnly\" type=\"button\" matChipRemove>\n                <i [class]=\"metadata.deleteIcon\"></i>\n            </button>\n        </mat-chip-row>\n        <input hidden [matChipInputFor]=\"chipGrid\" [readonly]=\"true\">\n    </mat-chip-grid>\n    <button *ngIf=\"downloadAllEnabled()\" type=\"button\" class=\"ngx-mat-grey\" mat-icon-button matSuffix (click)=\"downloadAll()\">\n        <i class=\"fas fa-file-zipper\"></i>\n    </button>\n    <button type=\"button\" class=\"ngx-mat-grey\" mat-icon-button matSuffix [disabled]=\"isReadOnly\" (click)=\"fileInput.click()\">\n        <i class=\"fas fa-upload\"></i>\n    </button>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>\n\n<div *ngIf=\"metadata.dragAndDrop && !isReadOnly\" class=\"drag-drop\" dragDrop (files)=\"setFile($event)\">\n    <button type=\"button\" mat-icon-button [disabled]=\"isReadOnly\" (click)=\"fileInput.click()\">\n        <i class=\"fas fa-file-arrow-up ngx-mat-grey\"></i>\n    </button>\n</div>", styles: ["mat-form-field{width:100%}.ngx-mat-grey{opacity:1;color:#0000008a}.drag-drop{display:flex;align-items:center;justify-content:center;height:200px;border:2px dashed rgba(0,0,0,.54);border-radius:15px;margin-top:5px;margin-bottom:5px}.drag-drop i{font-size:30px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6$2.MatChipGrid, selector: "mat-chip-grid", inputs: ["tabIndex", "disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i6$2.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i6$2.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i6$2.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "editable"], outputs: ["edited"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: DragDropDirective, selector: "[dragDrop]", outputs: ["files"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: FileInputComponent, selector: "file-input", inputs: { propertyValue: "propertyValue", entity: "entity", key: "key", metadata: "metadata", getValidationErrorMessage: "getValidationErrorMessage", isReadOnly: "isReadOnly" }, outputs: { fileDataChangeEvent: "fileDataChangeEvent" }, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<input #fileInput\n    type=\"file\" hidden\n    [multiple]=\"metadata.multiple\"\n    [accept]=\"acceptString\"\n    (change)=\"setFileFromInput($event)\"\n>\n\n<mat-form-field floatLabel=\"always\">\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-chip-grid #chipGrid\n        #model=\"ngModel\" name=\"file\" [required]=\"metadata.required(entity)\"\n        [(ngModel)]=\"filenames\"\n    >\n        <mat-chip-row *ngFor=\"let name of filenames\" (removed)=\"removeFile(name)\">\n            {{name}}\n            <span class=\"mat-mdc-chip-remove mat-mdc-chip-trailing-icon ngx-mat-grey\" (click)=\"downloadFile(name)\">\n                <i class=\"fas fa-download\"></i>\n            </span>\n            <button *ngIf=\"!isReadOnly\" type=\"button\" matChipRemove>\n                <i [class]=\"metadata.deleteIcon\"></i>\n            </button>\n        </mat-chip-row>\n        <input hidden [matChipInputFor]=\"chipGrid\" [readonly]=\"true\">\n    </mat-chip-grid>\n    <button *ngIf=\"downloadAllEnabled()\" type=\"button\" class=\"ngx-mat-grey\" mat-icon-button matSuffix (click)=\"downloadAll()\">\n        <i class=\"fas fa-file-zipper\"></i>\n    </button>\n    <button type=\"button\" class=\"ngx-mat-grey\" mat-icon-button matSuffix [disabled]=\"isReadOnly\" (click)=\"fileInput.click()\">\n        <i class=\"fas\" [class.fa-plus-circle]=\"metadata.multiple\" [class.fa-upload]=\"!metadata.multiple\"></i>\n    </button>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>\n\n<div *ngIf=\"metadata.dragAndDrop && !isReadOnly\" class=\"drag-drop\" dragDrop (files)=\"setFile($event)\">\n    <button type=\"button\" mat-icon-button [disabled]=\"isReadOnly\" (click)=\"fileInput.click()\">\n        <i class=\"fas fa-file-arrow-up ngx-mat-grey\"></i>\n    </button>\n</div>", styles: ["mat-form-field{width:100%}.ngx-mat-grey{opacity:1;color:#0000008a}.drag-drop{display:flex;align-items:center;justify-content:center;height:200px;border:2px dashed rgba(0,0,0,.54);border-radius:15px;margin-top:5px;margin-bottom:5px}.drag-drop i{font-size:30px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6$2.MatChipGrid, selector: "mat-chip-grid", inputs: ["tabIndex", "disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i6$2.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i6$2.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i6$2.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "editable"], outputs: ["edited"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: DragDropDirective, selector: "[dragDrop]", outputs: ["files"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: FileInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'file-input', template: "<!-- eslint-disable angular/no-call-expression -->\n<input #fileInput\n    type=\"file\" hidden\n    [multiple]=\"metadata.multiple\"\n    [accept]=\"acceptString\"\n    (change)=\"setFileFromInput($event)\"\n>\n\n<mat-form-field floatLabel=\"always\">\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-chip-grid #chipGrid\n        #model=\"ngModel\" name=\"file\" [required]=\"metadata.required(entity)\"\n        [(ngModel)]=\"filenames\"\n    >\n        <mat-chip-row *ngFor=\"let name of filenames\" (removed)=\"removeFile(name)\">\n            {{name}}\n            <span class=\"mat-mdc-chip-remove mat-mdc-chip-trailing-icon ngx-mat-grey\" (click)=\"downloadFile(name)\">\n                <i class=\"fas fa-download\"></i>\n            </span>\n            <button *ngIf=\"!isReadOnly\" type=\"button\" matChipRemove>\n                <i [class]=\"metadata.deleteIcon\"></i>\n            </button>\n        </mat-chip-row>\n        <input hidden [matChipInputFor]=\"chipGrid\" [readonly]=\"true\">\n    </mat-chip-grid>\n    <button *ngIf=\"downloadAllEnabled()\" type=\"button\" class=\"ngx-mat-grey\" mat-icon-button matSuffix (click)=\"downloadAll()\">\n        <i class=\"fas fa-file-zipper\"></i>\n    </button>\n    <button type=\"button\" class=\"ngx-mat-grey\" mat-icon-button matSuffix [disabled]=\"isReadOnly\" (click)=\"fileInput.click()\">\n        <i class=\"fas fa-upload\"></i>\n    </button>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>\n\n<div *ngIf=\"metadata.dragAndDrop && !isReadOnly\" class=\"drag-drop\" dragDrop (files)=\"setFile($event)\">\n    <button type=\"button\" mat-icon-button [disabled]=\"isReadOnly\" (click)=\"fileInput.click()\">\n        <i class=\"fas fa-file-arrow-up ngx-mat-grey\"></i>\n    </button>\n</div>", styles: ["mat-form-field{width:100%}.ngx-mat-grey{opacity:1;color:#0000008a}.drag-drop{display:flex;align-items:center;justify-content:center;height:200px;border:2px dashed rgba(0,0,0,.54);border-radius:15px;margin-top:5px;margin-bottom:5px}.drag-drop i{font-size:30px}\n"] }]
+            args: [{ selector: 'file-input', template: "<!-- eslint-disable angular/no-call-expression -->\n<input #fileInput\n    type=\"file\" hidden\n    [multiple]=\"metadata.multiple\"\n    [accept]=\"acceptString\"\n    (change)=\"setFileFromInput($event)\"\n>\n\n<mat-form-field floatLabel=\"always\">\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-chip-grid #chipGrid\n        #model=\"ngModel\" name=\"file\" [required]=\"metadata.required(entity)\"\n        [(ngModel)]=\"filenames\"\n    >\n        <mat-chip-row *ngFor=\"let name of filenames\" (removed)=\"removeFile(name)\">\n            {{name}}\n            <span class=\"mat-mdc-chip-remove mat-mdc-chip-trailing-icon ngx-mat-grey\" (click)=\"downloadFile(name)\">\n                <i class=\"fas fa-download\"></i>\n            </span>\n            <button *ngIf=\"!isReadOnly\" type=\"button\" matChipRemove>\n                <i [class]=\"metadata.deleteIcon\"></i>\n            </button>\n        </mat-chip-row>\n        <input hidden [matChipInputFor]=\"chipGrid\" [readonly]=\"true\">\n    </mat-chip-grid>\n    <button *ngIf=\"downloadAllEnabled()\" type=\"button\" class=\"ngx-mat-grey\" mat-icon-button matSuffix (click)=\"downloadAll()\">\n        <i class=\"fas fa-file-zipper\"></i>\n    </button>\n    <button type=\"button\" class=\"ngx-mat-grey\" mat-icon-button matSuffix [disabled]=\"isReadOnly\" (click)=\"fileInput.click()\">\n        <i class=\"fas\" [class.fa-plus-circle]=\"metadata.multiple\" [class.fa-upload]=\"!metadata.multiple\"></i>\n    </button>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>\n\n<div *ngIf=\"metadata.dragAndDrop && !isReadOnly\" class=\"drag-drop\" dragDrop (files)=\"setFile($event)\">\n    <button type=\"button\" mat-icon-button [disabled]=\"isReadOnly\" (click)=\"fileInput.click()\">\n        <i class=\"fas fa-file-arrow-up ngx-mat-grey\"></i>\n    </button>\n</div>", styles: ["mat-form-field{width:100%}.ngx-mat-grey{opacity:1;color:#0000008a}.drag-drop{display:flex;align-items:center;justify-content:center;height:200px;border:2px dashed rgba(0,0,0,.54);border-radius:15px;margin-top:5px;margin-bottom:5px}.drag-drop i{font-size:30px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.MatDialog }, { type: i2$1.HttpClient }]; }, propDecorators: { propertyValue: [{
                 type: Input
             }], entity: [{
@@ -4312,11 +4315,11 @@ class FileImageInputComponent extends NgxMatEntityBaseInputComponent {
         this.imageIndex = index;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: FileImageInputComponent, deps: [{ token: i2$1.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: FileImageInputComponent, selector: "file-image-input", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/prefer-ngsrc -->\n<!-- eslint-disable angular/alt-text -->\n<!-- eslint-disable angular/cyclomatic-complexity -->\n<div *ngIf=\"!metadata.dragAndDrop && !metadata.preview\">\n    <file-input\n        [propertyValue]=\"propertyValue\"\n        [metadata]=\"metadata\"\n        [getValidationErrorMessage]=\"getValidationErrorMessage\"\n        [isReadOnly]=\"isReadOnly\"\n        [entity]=\"entity\"\n        [key]=\"key\"\n        (fileDataChangeEvent)=\"refreshFileData($event)\"\n    >\n    </file-input>\n</div>\n\n<div *ngIf=\"metadata.dragAndDrop || metadata.preview\" class=\"file-input mat-elevation-z8\">\n    <file-input\n        [propertyValue]=\"propertyValue\"\n        [metadata]=\"metadata\"\n        [getValidationErrorMessage]=\"getValidationErrorMessage\"\n        [isReadOnly]=\"isReadOnly\"\n        [entity]=\"entity\"\n        [key]=\"key\"\n        (fileDataChangeEvent)=\"refreshFileData($event)\"\n    >\n    </file-input>\n\n    <div *ngIf=\"metadata.preview && metadata.multiple\" class=\"image-preview\">\n        <i class=\"prev-button fa-solid fa-angle-left\" [class.disabled]=\"imageIndex === 0\" (click)=\"prev()\"></i>\n        <img *ngIf=\"multiPreviewImages?.[imageIndex]\" class=\"mat-elevation-z2\" [src]=\"multiPreviewImages?.[imageIndex]\">\n        <img *ngIf=\"!multiPreviewImages?.[imageIndex]\" class=\"mat-elevation-z2\" [src]=\"metadata.previewPlaceholderUrl ?? placeHolder\">\n        <i class=\"next-button fa-solid fa-angle-right\"\n            [class.disabled]=\"!multiPreviewImages || !multiPreviewImages.length || imageIndex === (multiPreviewImages.length - 1)\"\n            (click)=\"next()\"\n        >\n        </i>\n    </div>\n\n    <div *ngIf=\"metadata.preview && metadata.multiple\" class=\"preview-nav\">\n        <button *ngIf=\"\n            this.multiPreviewImages\n            && multiPreviewImages[imageIndex-4]\n            && imageIndex === (this.multiPreviewImages.length - 1)\"\n            type=\"button\" mat-icon-button (click)=\"setIndex(imageIndex-4)\"\n        >\n            <div class=\"dot\">\n                <div class=\"image-index\">{{imageIndex - 3}}</div>\n            </div>\n        </button>\n        <!-- eslint-disable-next-line angular/conditional-complexity -->\n        <button *ngIf=\"this.multiPreviewImages\n            && multiPreviewImages[imageIndex-3]\n            && (\n                imageIndex === (this.multiPreviewImages.length - 2)\n                || imageIndex === (this.multiPreviewImages.length - 1)\n            )\" type=\"button\" mat-icon-button (click)=\"setIndex(imageIndex-3)\"\n        >\n            <div class=\"dot\">\n                <div class=\"image-index\">{{imageIndex - 2}}</div>\n            </div>\n        </button>\n        <button *ngIf=\"multiPreviewImages?.[imageIndex-2]\" type=\"button\" mat-icon-button (click)=\"setIndex(imageIndex-2)\">\n            <div class=\"dot\">\n                <div class=\"image-index\">{{imageIndex - 1}}</div>\n            </div>\n        </button>\n        <button *ngIf=\"multiPreviewImages?.[imageIndex-1]\" type=\"button\" mat-icon-button (click)=\"setIndex(imageIndex-1)\">\n            <div class=\"dot\">\n                <div class=\"image-index\">{{imageIndex}}</div>\n            </div>\n        </button>\n        <button type=\"button\" mat-icon-button disabled>\n            <div class=\"dot selected\">\n                <div class=\"image-index\">{{imageIndex + 1}}</div>\n            </div>\n        </button>\n        <button *ngIf=\"multiPreviewImages?.[imageIndex+1]\" type=\"button\" mat-icon-button (click)=\"setIndex(imageIndex+1)\">\n            <div class=\"dot\">\n                <div class=\"image-index\">{{imageIndex + 2}}</div>\n            </div>\n        </button>\n        <button *ngIf=\"multiPreviewImages?.[imageIndex+2]\" type=\"button\" mat-icon-button (click)=\"setIndex(imageIndex+2)\">\n            <div class=\"dot\">\n                <div class=\"image-index\">{{imageIndex + 3}}</div>\n            </div>\n        </button>\n        <button *ngIf=\"multiPreviewImages?.[imageIndex+3] && imageIndex <= 1\" type=\"button\" mat-icon-button (click)=\"setIndex(imageIndex+3)\">\n            <div class=\"dot\">\n                <div class=\"image-index\">{{imageIndex + 4}}</div>\n            </div>\n        </button>\n        <button *ngIf=\"multiPreviewImages?.[imageIndex+4] && imageIndex === 0\" type=\"button\" mat-icon-button (click)=\"setIndex(imageIndex+4)\">\n            <div class=\"dot\">\n                <div class=\"image-index\">{{imageIndex + 5}}</div>\n            </div>\n        </button>\n    </div>\n\n    <div *ngIf=\"metadata.preview && !metadata.multiple\" class=\"image-preview\">\n        <i class=\"prev-button disabled fa-solid fa-angle-left\"></i>\n        <img class=\"mat-elevation-z2\" [src]=\"singlePreviewImage ?? metadata.previewPlaceholderUrl ?? placeHolder\">\n        <i class=\"next-button disabled fa-solid fa-angle-right\"></i>\n    </div>\n\n    <div *ngIf=\"metadata.preview && !metadata.multiple\" class=\"preview-nav\">\n        <button type=\"button\" disabled mat-icon-button>\n            <div class=\"dot selected\">\n                <div class=\"image-index\">1</div>\n            </div>\n        </button>\n    </div>\n</div>", styles: [".file-input{margin-top:15px;margin-bottom:15px;padding:15px;border-radius:5px}.image-preview{height:250px;display:flex;align-items:center;padding-top:15px;padding-bottom:15px}.image-preview .prev-button{font-size:100px;margin-left:5px;color:#0000008a}.image-preview .next-button{font-size:100px;margin-right:5px;color:#0000008a}.image-preview .prev-button:hover,.image-preview .next-button:hover{cursor:pointer;color:#000000b3;transition:all .5s ease}.image-preview .prev-button.disabled,.image-preview .next-button.disabled{color:#00000042}.image-preview .prev-button.disabled:hover,.image-preview .next-button.disabled:hover{color:#00000042;transition:none;cursor:default}.image-preview img{max-width:calc(100% - 100px);max-height:100%;margin-left:auto;margin-right:auto;border-radius:3px}.preview-nav{display:flex;align-items:center;justify-content:center;column-gap:5px}.preview-nav button{display:flex;align-items:center;justify-content:center;padding:0;height:auto;width:auto}.preview-nav button .dot{display:flex;align-items:center;justify-content:center;height:25px;width:25px;min-width:25px;background-color:#00000061;border-radius:50%}.preview-nav button .dot .image-index{color:#fff;font-size:20px;font-weight:600}.preview-nav button .dot.selected{background-color:#0000008a}.preview-nav button:hover .dot{background-color:#0000008a;transition:all .3s ease}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: FileInputComponent, selector: "file-input", inputs: ["propertyValue", "entity", "key", "metadata", "getValidationErrorMessage", "isReadOnly"], outputs: ["fileDataChangeEvent"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: FileImageInputComponent, selector: "file-image-input", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/conditional-complexity -->\n<!-- eslint-disable angular/prefer-ngsrc -->\n<!-- eslint-disable angular/alt-text -->\n<!-- eslint-disable angular/cyclomatic-complexity -->\n<div *ngIf=\"!metadata.dragAndDrop && !metadata.preview\">\n    <file-input\n        [propertyValue]=\"propertyValue\"\n        [metadata]=\"metadata\"\n        [getValidationErrorMessage]=\"getValidationErrorMessage\"\n        [isReadOnly]=\"isReadOnly\"\n        [entity]=\"entity\"\n        [key]=\"key\"\n        (fileDataChangeEvent)=\"refreshFileData($event)\"\n    >\n    </file-input>\n</div>\n\n<div *ngIf=\"metadata.dragAndDrop || metadata.preview\" class=\"file-input mat-elevation-z8\">\n    <file-input\n        [propertyValue]=\"propertyValue\"\n        [metadata]=\"metadata\"\n        [getValidationErrorMessage]=\"getValidationErrorMessage\"\n        [isReadOnly]=\"isReadOnly\"\n        [entity]=\"entity\"\n        [key]=\"key\"\n        (fileDataChangeEvent)=\"refreshFileData($event)\"\n    >\n    </file-input>\n\n    <ng-container *ngIf=\"metadata.preview\">\n        <ng-container *ngIf=\"metadata.multiple\">\n            <div class=\"image-preview\">\n                <img *ngIf=\"multiPreviewImages?.[imageIndex]\" class=\"mat-elevation-z2\" [src]=\"multiPreviewImages?.[imageIndex]\">\n                <img *ngIf=\"!multiPreviewImages?.[imageIndex]\" class=\"mat-elevation-z2\" [src]=\"metadata.previewPlaceholderUrl ?? placeHolder\">\n            </div>\n        \n            <div class=\"preview-nav\">\n                <i class=\"fas fa-angle-left left-button\" [class.disabled]=\"imageIndex === 0\" (click)=\"prev()\"></i>\n                <div *ngIf=\"\n                        multiPreviewImages\n                        && multiPreviewImages[imageIndex-4]\n                        && imageIndex === (multiPreviewImages.length - 1)\n                    \"\n                    class=\"dot\"\n                    (click)=\"setIndex(imageIndex-4)\"\n                >\n                    <div class=\"image-index\">{{imageIndex - 3}}</div>\n                </div>\n                <div *ngIf=\"\n                            multiPreviewImages\n                            && multiPreviewImages[imageIndex-3]\n                            && (\n                                imageIndex === (multiPreviewImages.length - 2)\n                                || imageIndex === (multiPreviewImages.length - 1)\n                            )\n                        \"\n                        class=\"dot\"\n                        (click)=\"setIndex(imageIndex-3)\"\n                    >\n                    <div class=\"image-index\">{{imageIndex - 2}}</div>\n                </div>\n                <div *ngIf=\"multiPreviewImages?.[imageIndex-2]\" class=\"dot\" (click)=\"setIndex(imageIndex-2)\">\n                    <div class=\"image-index\">{{imageIndex - 1}}</div>\n                </div>\n                <div *ngIf=\"multiPreviewImages?.[imageIndex-1]\" class=\"dot\" (click)=\"setIndex(imageIndex-1)\">\n                    <div class=\"image-index\">{{imageIndex}}</div>\n                </div>\n                <div class=\"dot selected disabled\">\n                    <div class=\"image-index\">{{imageIndex + 1}}</div>\n                </div>\n                <div *ngIf=\"multiPreviewImages?.[imageIndex+1]\" class=\"dot\" (click)=\"setIndex(imageIndex+1)\">\n                    <div class=\"image-index\">{{imageIndex + 2}}</div>\n                </div>\n                <div *ngIf=\"multiPreviewImages?.[imageIndex+2]\" class=\"dot\" (click)=\"setIndex(imageIndex+2)\">\n                    <div class=\"image-index\">{{imageIndex + 3}}</div>\n                </div>\n                <div *ngIf=\"multiPreviewImages?.[imageIndex+3] && imageIndex <= 1\" class=\"dot\" (click)=\"setIndex(imageIndex+3)\">\n                    <div class=\"image-index\">{{imageIndex + 4}}</div>\n                </div>\n                <div *ngIf=\"multiPreviewImages?.[imageIndex+4] && imageIndex === 0\" class=\"dot\" (click)=\"setIndex(imageIndex+4)\">\n                    <div class=\"image-index\">{{imageIndex + 5}}</div>\n                </div>\n                <i class=\"fas fa-angle-right right-button\" [class.disabled]=\"!multiPreviewImages || !multiPreviewImages.length || imageIndex === (multiPreviewImages.length - 1)\" (click)=\"next()\"></i>\n            </div>\n        </ng-container>\n\n        <ng-container *ngIf=\"!metadata.multiple\">\n            <div class=\"image-preview\">\n                <img class=\"mat-elevation-z2\" [src]=\"singlePreviewImage ?? metadata.previewPlaceholderUrl ?? placeHolder\">\n            </div>\n        </ng-container>\n    </ng-container>\n</div>", styles: [".file-input{margin-top:15px;margin-bottom:15px;padding:15px;border-radius:5px}.image-preview{height:250px;display:flex;align-items:center;padding-top:15px;padding-bottom:15px}.image-preview img{max-width:100%;max-height:100%;margin-left:auto;margin-right:auto;border-radius:3px}.preview-nav{display:flex;align-items:center;justify-content:center;column-gap:5px}.preview-nav .left-button,.preview-nav .right-button{font-size:30px;color:#00000061}.preview-nav .left-button:hover,.preview-nav .right-button:hover{color:#0000008a;cursor:pointer;transition:all .3s ease}.preview-nav .left-button.disabled,.preview-nav .right-button.disabled{color:#00000042}.preview-nav .left-button.disabled:hover,.preview-nav .right-button.disabled:hover{color:#00000042;transition:none;cursor:default}.preview-nav .dot{display:flex;align-items:center;justify-content:center;height:30px;width:30px;min-width:30px;background-color:#00000061;border-radius:50%}.preview-nav .dot .image-index{color:#fff;font-size:24px;font-weight:600}.preview-nav .dot.selected{background-color:#0000008a}.preview-nav .dot:hover{background-color:#0000008a;cursor:pointer;transition:all .3s ease}.preview-nav .dot.disabled:hover{cursor:default}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FileInputComponent, selector: "file-input", inputs: ["propertyValue", "entity", "key", "metadata", "getValidationErrorMessage", "isReadOnly"], outputs: ["fileDataChangeEvent"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: FileImageInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'file-image-input', template: "<!-- eslint-disable angular/prefer-ngsrc -->\n<!-- eslint-disable angular/alt-text -->\n<!-- eslint-disable angular/cyclomatic-complexity -->\n<div *ngIf=\"!metadata.dragAndDrop && !metadata.preview\">\n    <file-input\n        [propertyValue]=\"propertyValue\"\n        [metadata]=\"metadata\"\n        [getValidationErrorMessage]=\"getValidationErrorMessage\"\n        [isReadOnly]=\"isReadOnly\"\n        [entity]=\"entity\"\n        [key]=\"key\"\n        (fileDataChangeEvent)=\"refreshFileData($event)\"\n    >\n    </file-input>\n</div>\n\n<div *ngIf=\"metadata.dragAndDrop || metadata.preview\" class=\"file-input mat-elevation-z8\">\n    <file-input\n        [propertyValue]=\"propertyValue\"\n        [metadata]=\"metadata\"\n        [getValidationErrorMessage]=\"getValidationErrorMessage\"\n        [isReadOnly]=\"isReadOnly\"\n        [entity]=\"entity\"\n        [key]=\"key\"\n        (fileDataChangeEvent)=\"refreshFileData($event)\"\n    >\n    </file-input>\n\n    <div *ngIf=\"metadata.preview && metadata.multiple\" class=\"image-preview\">\n        <i class=\"prev-button fa-solid fa-angle-left\" [class.disabled]=\"imageIndex === 0\" (click)=\"prev()\"></i>\n        <img *ngIf=\"multiPreviewImages?.[imageIndex]\" class=\"mat-elevation-z2\" [src]=\"multiPreviewImages?.[imageIndex]\">\n        <img *ngIf=\"!multiPreviewImages?.[imageIndex]\" class=\"mat-elevation-z2\" [src]=\"metadata.previewPlaceholderUrl ?? placeHolder\">\n        <i class=\"next-button fa-solid fa-angle-right\"\n            [class.disabled]=\"!multiPreviewImages || !multiPreviewImages.length || imageIndex === (multiPreviewImages.length - 1)\"\n            (click)=\"next()\"\n        >\n        </i>\n    </div>\n\n    <div *ngIf=\"metadata.preview && metadata.multiple\" class=\"preview-nav\">\n        <button *ngIf=\"\n            this.multiPreviewImages\n            && multiPreviewImages[imageIndex-4]\n            && imageIndex === (this.multiPreviewImages.length - 1)\"\n            type=\"button\" mat-icon-button (click)=\"setIndex(imageIndex-4)\"\n        >\n            <div class=\"dot\">\n                <div class=\"image-index\">{{imageIndex - 3}}</div>\n            </div>\n        </button>\n        <!-- eslint-disable-next-line angular/conditional-complexity -->\n        <button *ngIf=\"this.multiPreviewImages\n            && multiPreviewImages[imageIndex-3]\n            && (\n                imageIndex === (this.multiPreviewImages.length - 2)\n                || imageIndex === (this.multiPreviewImages.length - 1)\n            )\" type=\"button\" mat-icon-button (click)=\"setIndex(imageIndex-3)\"\n        >\n            <div class=\"dot\">\n                <div class=\"image-index\">{{imageIndex - 2}}</div>\n            </div>\n        </button>\n        <button *ngIf=\"multiPreviewImages?.[imageIndex-2]\" type=\"button\" mat-icon-button (click)=\"setIndex(imageIndex-2)\">\n            <div class=\"dot\">\n                <div class=\"image-index\">{{imageIndex - 1}}</div>\n            </div>\n        </button>\n        <button *ngIf=\"multiPreviewImages?.[imageIndex-1]\" type=\"button\" mat-icon-button (click)=\"setIndex(imageIndex-1)\">\n            <div class=\"dot\">\n                <div class=\"image-index\">{{imageIndex}}</div>\n            </div>\n        </button>\n        <button type=\"button\" mat-icon-button disabled>\n            <div class=\"dot selected\">\n                <div class=\"image-index\">{{imageIndex + 1}}</div>\n            </div>\n        </button>\n        <button *ngIf=\"multiPreviewImages?.[imageIndex+1]\" type=\"button\" mat-icon-button (click)=\"setIndex(imageIndex+1)\">\n            <div class=\"dot\">\n                <div class=\"image-index\">{{imageIndex + 2}}</div>\n            </div>\n        </button>\n        <button *ngIf=\"multiPreviewImages?.[imageIndex+2]\" type=\"button\" mat-icon-button (click)=\"setIndex(imageIndex+2)\">\n            <div class=\"dot\">\n                <div class=\"image-index\">{{imageIndex + 3}}</div>\n            </div>\n        </button>\n        <button *ngIf=\"multiPreviewImages?.[imageIndex+3] && imageIndex <= 1\" type=\"button\" mat-icon-button (click)=\"setIndex(imageIndex+3)\">\n            <div class=\"dot\">\n                <div class=\"image-index\">{{imageIndex + 4}}</div>\n            </div>\n        </button>\n        <button *ngIf=\"multiPreviewImages?.[imageIndex+4] && imageIndex === 0\" type=\"button\" mat-icon-button (click)=\"setIndex(imageIndex+4)\">\n            <div class=\"dot\">\n                <div class=\"image-index\">{{imageIndex + 5}}</div>\n            </div>\n        </button>\n    </div>\n\n    <div *ngIf=\"metadata.preview && !metadata.multiple\" class=\"image-preview\">\n        <i class=\"prev-button disabled fa-solid fa-angle-left\"></i>\n        <img class=\"mat-elevation-z2\" [src]=\"singlePreviewImage ?? metadata.previewPlaceholderUrl ?? placeHolder\">\n        <i class=\"next-button disabled fa-solid fa-angle-right\"></i>\n    </div>\n\n    <div *ngIf=\"metadata.preview && !metadata.multiple\" class=\"preview-nav\">\n        <button type=\"button\" disabled mat-icon-button>\n            <div class=\"dot selected\">\n                <div class=\"image-index\">1</div>\n            </div>\n        </button>\n    </div>\n</div>", styles: [".file-input{margin-top:15px;margin-bottom:15px;padding:15px;border-radius:5px}.image-preview{height:250px;display:flex;align-items:center;padding-top:15px;padding-bottom:15px}.image-preview .prev-button{font-size:100px;margin-left:5px;color:#0000008a}.image-preview .next-button{font-size:100px;margin-right:5px;color:#0000008a}.image-preview .prev-button:hover,.image-preview .next-button:hover{cursor:pointer;color:#000000b3;transition:all .5s ease}.image-preview .prev-button.disabled,.image-preview .next-button.disabled{color:#00000042}.image-preview .prev-button.disabled:hover,.image-preview .next-button.disabled:hover{color:#00000042;transition:none;cursor:default}.image-preview img{max-width:calc(100% - 100px);max-height:100%;margin-left:auto;margin-right:auto;border-radius:3px}.preview-nav{display:flex;align-items:center;justify-content:center;column-gap:5px}.preview-nav button{display:flex;align-items:center;justify-content:center;padding:0;height:auto;width:auto}.preview-nav button .dot{display:flex;align-items:center;justify-content:center;height:25px;width:25px;min-width:25px;background-color:#00000061;border-radius:50%}.preview-nav button .dot .image-index{color:#fff;font-size:20px;font-weight:600}.preview-nav button .dot.selected{background-color:#0000008a}.preview-nav button:hover .dot{background-color:#0000008a;transition:all .3s ease}\n"] }]
+            args: [{ selector: 'file-image-input', template: "<!-- eslint-disable angular/conditional-complexity -->\n<!-- eslint-disable angular/prefer-ngsrc -->\n<!-- eslint-disable angular/alt-text -->\n<!-- eslint-disable angular/cyclomatic-complexity -->\n<div *ngIf=\"!metadata.dragAndDrop && !metadata.preview\">\n    <file-input\n        [propertyValue]=\"propertyValue\"\n        [metadata]=\"metadata\"\n        [getValidationErrorMessage]=\"getValidationErrorMessage\"\n        [isReadOnly]=\"isReadOnly\"\n        [entity]=\"entity\"\n        [key]=\"key\"\n        (fileDataChangeEvent)=\"refreshFileData($event)\"\n    >\n    </file-input>\n</div>\n\n<div *ngIf=\"metadata.dragAndDrop || metadata.preview\" class=\"file-input mat-elevation-z8\">\n    <file-input\n        [propertyValue]=\"propertyValue\"\n        [metadata]=\"metadata\"\n        [getValidationErrorMessage]=\"getValidationErrorMessage\"\n        [isReadOnly]=\"isReadOnly\"\n        [entity]=\"entity\"\n        [key]=\"key\"\n        (fileDataChangeEvent)=\"refreshFileData($event)\"\n    >\n    </file-input>\n\n    <ng-container *ngIf=\"metadata.preview\">\n        <ng-container *ngIf=\"metadata.multiple\">\n            <div class=\"image-preview\">\n                <img *ngIf=\"multiPreviewImages?.[imageIndex]\" class=\"mat-elevation-z2\" [src]=\"multiPreviewImages?.[imageIndex]\">\n                <img *ngIf=\"!multiPreviewImages?.[imageIndex]\" class=\"mat-elevation-z2\" [src]=\"metadata.previewPlaceholderUrl ?? placeHolder\">\n            </div>\n        \n            <div class=\"preview-nav\">\n                <i class=\"fas fa-angle-left left-button\" [class.disabled]=\"imageIndex === 0\" (click)=\"prev()\"></i>\n                <div *ngIf=\"\n                        multiPreviewImages\n                        && multiPreviewImages[imageIndex-4]\n                        && imageIndex === (multiPreviewImages.length - 1)\n                    \"\n                    class=\"dot\"\n                    (click)=\"setIndex(imageIndex-4)\"\n                >\n                    <div class=\"image-index\">{{imageIndex - 3}}</div>\n                </div>\n                <div *ngIf=\"\n                            multiPreviewImages\n                            && multiPreviewImages[imageIndex-3]\n                            && (\n                                imageIndex === (multiPreviewImages.length - 2)\n                                || imageIndex === (multiPreviewImages.length - 1)\n                            )\n                        \"\n                        class=\"dot\"\n                        (click)=\"setIndex(imageIndex-3)\"\n                    >\n                    <div class=\"image-index\">{{imageIndex - 2}}</div>\n                </div>\n                <div *ngIf=\"multiPreviewImages?.[imageIndex-2]\" class=\"dot\" (click)=\"setIndex(imageIndex-2)\">\n                    <div class=\"image-index\">{{imageIndex - 1}}</div>\n                </div>\n                <div *ngIf=\"multiPreviewImages?.[imageIndex-1]\" class=\"dot\" (click)=\"setIndex(imageIndex-1)\">\n                    <div class=\"image-index\">{{imageIndex}}</div>\n                </div>\n                <div class=\"dot selected disabled\">\n                    <div class=\"image-index\">{{imageIndex + 1}}</div>\n                </div>\n                <div *ngIf=\"multiPreviewImages?.[imageIndex+1]\" class=\"dot\" (click)=\"setIndex(imageIndex+1)\">\n                    <div class=\"image-index\">{{imageIndex + 2}}</div>\n                </div>\n                <div *ngIf=\"multiPreviewImages?.[imageIndex+2]\" class=\"dot\" (click)=\"setIndex(imageIndex+2)\">\n                    <div class=\"image-index\">{{imageIndex + 3}}</div>\n                </div>\n                <div *ngIf=\"multiPreviewImages?.[imageIndex+3] && imageIndex <= 1\" class=\"dot\" (click)=\"setIndex(imageIndex+3)\">\n                    <div class=\"image-index\">{{imageIndex + 4}}</div>\n                </div>\n                <div *ngIf=\"multiPreviewImages?.[imageIndex+4] && imageIndex === 0\" class=\"dot\" (click)=\"setIndex(imageIndex+4)\">\n                    <div class=\"image-index\">{{imageIndex + 5}}</div>\n                </div>\n                <i class=\"fas fa-angle-right right-button\" [class.disabled]=\"!multiPreviewImages || !multiPreviewImages.length || imageIndex === (multiPreviewImages.length - 1)\" (click)=\"next()\"></i>\n            </div>\n        </ng-container>\n\n        <ng-container *ngIf=\"!metadata.multiple\">\n            <div class=\"image-preview\">\n                <img class=\"mat-elevation-z2\" [src]=\"singlePreviewImage ?? metadata.previewPlaceholderUrl ?? placeHolder\">\n            </div>\n        </ng-container>\n    </ng-container>\n</div>", styles: [".file-input{margin-top:15px;margin-bottom:15px;padding:15px;border-radius:5px}.image-preview{height:250px;display:flex;align-items:center;padding-top:15px;padding-bottom:15px}.image-preview img{max-width:100%;max-height:100%;margin-left:auto;margin-right:auto;border-radius:3px}.preview-nav{display:flex;align-items:center;justify-content:center;column-gap:5px}.preview-nav .left-button,.preview-nav .right-button{font-size:30px;color:#00000061}.preview-nav .left-button:hover,.preview-nav .right-button:hover{color:#0000008a;cursor:pointer;transition:all .3s ease}.preview-nav .left-button.disabled,.preview-nav .right-button.disabled{color:#00000042}.preview-nav .left-button.disabled:hover,.preview-nav .right-button.disabled:hover{color:#00000042;transition:none;cursor:default}.preview-nav .dot{display:flex;align-items:center;justify-content:center;height:30px;width:30px;min-width:30px;background-color:#00000061;border-radius:50%}.preview-nav .dot .image-index{color:#fff;font-size:24px;font-weight:600}.preview-nav .dot.selected{background-color:#0000008a}.preview-nav .dot:hover{background-color:#0000008a;cursor:pointer;transition:all .3s ease}.preview-nav .dot.disabled:hover{cursor:default}\n"] }]
         }], ctorParameters: function () { return [{ type: i2$1.HttpClient }]; } });
 
 /**
@@ -5083,11 +5086,11 @@ class ReferencesManyInputComponent extends NgxMatEntityBaseInputComponent {
         this.emitChange();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: ReferencesManyInputComponent, deps: [{ token: i0.EnvironmentInjector }, { token: NGX_INTERNAL_GLOBAL_DEFAULT_VALUES }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: ReferencesManyInputComponent, selector: "references-many-input", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<div class=\"mat-elevation-z8 elevation-container\">\n    <div class=\"array-headline\">\n        <b>{{metadata.displayName}}</b>\n    </div>\n\n    <mat-form-field>\n        <mat-label>{{metadata.dropdownLabel}}</mat-label>\n        <mat-select #inputModel=\"ngModel\" [name]=\"name + 'input'\" [disabled]=\"isReadOnly\" [(ngModel)]=\"input\" (opened)=\"selectSearchInput.focus()\">\n            <mat-form-field class=\"select-search-input\">\n                <!-- eslint-disable-next-line angular/no-any -->\n                <input #selectSearchInput matInput (keyup)=\"filterDropdownValues($any($event.target).value)\">\n                <i matSuffix class=\"fas fa-search\"></i>\n            </mat-form-field>\n            <mat-option>-</mat-option>\n            <mat-option *ngIf=\"shouldDisplayCurrentValue\" [value]=\"currentDropdownValue?.value\">{{currentDropdownValue?.displayName}}</mat-option>\n        <mat-option *ngFor=\"let value of filteredDropdownValues\" [value]=\"value.value\">{{value.displayName}}</mat-option>\n        </mat-select>\n        <mat-error>{{getValidationErrorMessage(inputModel)}}</mat-error>\n    </mat-form-field>\n\n    <button *ngIf=\"metadata.addAll\" type=\"button\" style=\"margin-left: 20px;\" mat-raised-button [disabled]=\"!dropdownValues.length || isReadOnly\" (click)=\"addAll()\">\n        {{metadata.addAllButtonLabel}}\n    </button>\n\n    <div class=\"buttons\">\n        <button type=\"button\" mat-raised-button [disabled]=\"!input\" (click)=\"add()\">\n            {{metadata.addButtonLabel}}\n        </button>\n        <button type=\"button\" mat-raised-button [disabled]=\"!selection.selected.length\" (click)=\"remove()\">\n            {{metadata.removeButtonLabel}}\n        </button>\n    </div>\n\n    <mat-table [dataSource]=\"referencedEntitiesDataSource\">\n        <!-- select Column -->\n        <ng-container *ngIf=\"!isReadOnly\" matColumnDef=\"select\">\n            <mat-header-cell *matHeaderCellDef>\n                <mat-checkbox\n                    [disabled]=\"!referencedEntitiesDataSource.data.length\" [checked]=\"selection.hasValue() && SelectionUtilities.isAllSelected(selection, referencedEntitiesDataSource)\"\n                    [indeterminate]=\"selection.hasValue() && !SelectionUtilities.isAllSelected(selection, referencedEntitiesDataSource)\"\n                    (change)=\"$event ? SelectionUtilities.masterToggle(selection, referencedEntitiesDataSource) : null\">\n                </mat-checkbox>\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let entity\">\n                <mat-checkbox [checked]=\"selection.isSelected(entity)\" (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(entity) : null\"></mat-checkbox>\n            </mat-cell>\n        </ng-container>\n    \n        <ng-container *ngFor=\"let dCol of metadata.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n            <mat-header-cell *matHeaderCellDef>\n                {{dCol.displayName}}\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let entityId\" class=\"entity\">\n                {{getDisplayColumnValue(entityId, dCol)}}\n            </mat-cell>\n        </ng-container>\n    \n        <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n        <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n    </mat-table>\n</div>", styles: [".mdc-data-table__row:last-child .mdc-data-table__cell{border-bottom:1px solid rgba(0,0,0,.12)}.elevation-container{border-radius:5px;padding:15px;margin-bottom:15px;margin-top:15px}.array-headline{padding-bottom:10px}.buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px}mat-table{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:25px}.mat-column-select{flex:0 0 75px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: ReferencesManyInputComponent, selector: "references-many-input", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<div class=\"mat-elevation-z8 elevation-container\">\n    <div class=\"array-headline\">\n        <b>{{metadata.displayName}}</b>\n    </div>\n\n    <mat-form-field>\n        <mat-label>{{metadata.dropdownLabel}}</mat-label>\n        <mat-select #inputModel=\"ngModel\" [name]=\"name + 'input'\" [disabled]=\"isReadOnly\" [(ngModel)]=\"input\" (opened)=\"selectSearchInput.focus()\">\n            <mat-form-field class=\"select-search-input\">\n                <!-- eslint-disable-next-line angular/no-any -->\n                <input #selectSearchInput matInput (keyup)=\"filterDropdownValues($any($event.target).value)\">\n                <i matSuffix class=\"fas fa-search\"></i>\n            </mat-form-field>\n            <mat-option>-</mat-option>\n            <mat-option *ngIf=\"shouldDisplayCurrentValue\" [value]=\"currentDropdownValue?.value\">{{currentDropdownValue?.displayName}}</mat-option>\n        <mat-option *ngFor=\"let value of filteredDropdownValues\" [value]=\"value.value\">{{value.displayName}}</mat-option>\n        </mat-select>\n        <mat-error>{{getValidationErrorMessage(inputModel)}}</mat-error>\n    </mat-form-field>\n\n    <button *ngIf=\"metadata.addAll\" type=\"button\" style=\"margin-left: 20px;\" mat-raised-button [disabled]=\"!dropdownValues.length || isReadOnly\" (click)=\"addAll()\">\n        {{metadata.addAllButtonLabel}}\n    </button>\n\n    <div class=\"buttons\">\n        <button type=\"button\" mat-raised-button [disabled]=\"!input\" (click)=\"add()\">\n            {{metadata.addButtonLabel}}\n        </button>\n        <button type=\"button\" mat-raised-button [disabled]=\"!selection.selected.length\" (click)=\"remove()\">\n            {{metadata.removeButtonLabel}}\n        </button>\n    </div>\n\n    <mat-table [dataSource]=\"referencedEntitiesDataSource\">\n        <!-- select Column -->\n        <ng-container *ngIf=\"!isReadOnly\" matColumnDef=\"select\">\n            <mat-header-cell *matHeaderCellDef>\n                <mat-checkbox\n                    [disabled]=\"!referencedEntitiesDataSource.data.length\" [checked]=\"selection.hasValue() && SelectionUtilities.isAllSelected(selection, referencedEntitiesDataSource)\"\n                    [indeterminate]=\"selection.hasValue() && !SelectionUtilities.isAllSelected(selection, referencedEntitiesDataSource)\"\n                    (change)=\"$event ? SelectionUtilities.masterToggle(selection, referencedEntitiesDataSource) : null\">\n                </mat-checkbox>\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let entity\">\n                <mat-checkbox [checked]=\"selection.isSelected(entity)\" (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(entity) : null\"></mat-checkbox>\n            </mat-cell>\n        </ng-container>\n    \n        <ng-container *ngFor=\"let dCol of metadata.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n            <mat-header-cell *matHeaderCellDef>\n                {{dCol.displayName}}\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let entityId\" class=\"entity\">\n                {{getDisplayColumnValue(entityId, dCol)}}\n            </mat-cell>\n        </ng-container>\n    \n        <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n        <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n    </mat-table>\n</div>", styles: [".mdc-data-table__row:last-child .mdc-data-table__cell{border-bottom:1px solid rgba(0,0,0,.12)}.elevation-container{border-radius:5px;padding:15px;margin-bottom:15px;margin-top:15px}.array-headline{padding-bottom:10px}.buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px;flex-wrap:wrap;gap:10px}.buttons button{flex-grow:1}mat-form-field{max-width:100%}mat-table{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:25px}.mat-column-select{flex:0 0 48px;padding-left:0;padding-right:0;justify-content:center}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: ReferencesManyInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'references-many-input', template: "<!-- eslint-disable angular/no-call-expression -->\n<div class=\"mat-elevation-z8 elevation-container\">\n    <div class=\"array-headline\">\n        <b>{{metadata.displayName}}</b>\n    </div>\n\n    <mat-form-field>\n        <mat-label>{{metadata.dropdownLabel}}</mat-label>\n        <mat-select #inputModel=\"ngModel\" [name]=\"name + 'input'\" [disabled]=\"isReadOnly\" [(ngModel)]=\"input\" (opened)=\"selectSearchInput.focus()\">\n            <mat-form-field class=\"select-search-input\">\n                <!-- eslint-disable-next-line angular/no-any -->\n                <input #selectSearchInput matInput (keyup)=\"filterDropdownValues($any($event.target).value)\">\n                <i matSuffix class=\"fas fa-search\"></i>\n            </mat-form-field>\n            <mat-option>-</mat-option>\n            <mat-option *ngIf=\"shouldDisplayCurrentValue\" [value]=\"currentDropdownValue?.value\">{{currentDropdownValue?.displayName}}</mat-option>\n        <mat-option *ngFor=\"let value of filteredDropdownValues\" [value]=\"value.value\">{{value.displayName}}</mat-option>\n        </mat-select>\n        <mat-error>{{getValidationErrorMessage(inputModel)}}</mat-error>\n    </mat-form-field>\n\n    <button *ngIf=\"metadata.addAll\" type=\"button\" style=\"margin-left: 20px;\" mat-raised-button [disabled]=\"!dropdownValues.length || isReadOnly\" (click)=\"addAll()\">\n        {{metadata.addAllButtonLabel}}\n    </button>\n\n    <div class=\"buttons\">\n        <button type=\"button\" mat-raised-button [disabled]=\"!input\" (click)=\"add()\">\n            {{metadata.addButtonLabel}}\n        </button>\n        <button type=\"button\" mat-raised-button [disabled]=\"!selection.selected.length\" (click)=\"remove()\">\n            {{metadata.removeButtonLabel}}\n        </button>\n    </div>\n\n    <mat-table [dataSource]=\"referencedEntitiesDataSource\">\n        <!-- select Column -->\n        <ng-container *ngIf=\"!isReadOnly\" matColumnDef=\"select\">\n            <mat-header-cell *matHeaderCellDef>\n                <mat-checkbox\n                    [disabled]=\"!referencedEntitiesDataSource.data.length\" [checked]=\"selection.hasValue() && SelectionUtilities.isAllSelected(selection, referencedEntitiesDataSource)\"\n                    [indeterminate]=\"selection.hasValue() && !SelectionUtilities.isAllSelected(selection, referencedEntitiesDataSource)\"\n                    (change)=\"$event ? SelectionUtilities.masterToggle(selection, referencedEntitiesDataSource) : null\">\n                </mat-checkbox>\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let entity\">\n                <mat-checkbox [checked]=\"selection.isSelected(entity)\" (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(entity) : null\"></mat-checkbox>\n            </mat-cell>\n        </ng-container>\n    \n        <ng-container *ngFor=\"let dCol of metadata.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n            <mat-header-cell *matHeaderCellDef>\n                {{dCol.displayName}}\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let entityId\" class=\"entity\">\n                {{getDisplayColumnValue(entityId, dCol)}}\n            </mat-cell>\n        </ng-container>\n    \n        <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n        <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n    </mat-table>\n</div>", styles: [".mdc-data-table__row:last-child .mdc-data-table__cell{border-bottom:1px solid rgba(0,0,0,.12)}.elevation-container{border-radius:5px;padding:15px;margin-bottom:15px;margin-top:15px}.array-headline{padding-bottom:10px}.buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px}mat-table{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:25px}.mat-column-select{flex:0 0 75px}\n"] }]
+            args: [{ selector: 'references-many-input', template: "<!-- eslint-disable angular/no-call-expression -->\n<div class=\"mat-elevation-z8 elevation-container\">\n    <div class=\"array-headline\">\n        <b>{{metadata.displayName}}</b>\n    </div>\n\n    <mat-form-field>\n        <mat-label>{{metadata.dropdownLabel}}</mat-label>\n        <mat-select #inputModel=\"ngModel\" [name]=\"name + 'input'\" [disabled]=\"isReadOnly\" [(ngModel)]=\"input\" (opened)=\"selectSearchInput.focus()\">\n            <mat-form-field class=\"select-search-input\">\n                <!-- eslint-disable-next-line angular/no-any -->\n                <input #selectSearchInput matInput (keyup)=\"filterDropdownValues($any($event.target).value)\">\n                <i matSuffix class=\"fas fa-search\"></i>\n            </mat-form-field>\n            <mat-option>-</mat-option>\n            <mat-option *ngIf=\"shouldDisplayCurrentValue\" [value]=\"currentDropdownValue?.value\">{{currentDropdownValue?.displayName}}</mat-option>\n        <mat-option *ngFor=\"let value of filteredDropdownValues\" [value]=\"value.value\">{{value.displayName}}</mat-option>\n        </mat-select>\n        <mat-error>{{getValidationErrorMessage(inputModel)}}</mat-error>\n    </mat-form-field>\n\n    <button *ngIf=\"metadata.addAll\" type=\"button\" style=\"margin-left: 20px;\" mat-raised-button [disabled]=\"!dropdownValues.length || isReadOnly\" (click)=\"addAll()\">\n        {{metadata.addAllButtonLabel}}\n    </button>\n\n    <div class=\"buttons\">\n        <button type=\"button\" mat-raised-button [disabled]=\"!input\" (click)=\"add()\">\n            {{metadata.addButtonLabel}}\n        </button>\n        <button type=\"button\" mat-raised-button [disabled]=\"!selection.selected.length\" (click)=\"remove()\">\n            {{metadata.removeButtonLabel}}\n        </button>\n    </div>\n\n    <mat-table [dataSource]=\"referencedEntitiesDataSource\">\n        <!-- select Column -->\n        <ng-container *ngIf=\"!isReadOnly\" matColumnDef=\"select\">\n            <mat-header-cell *matHeaderCellDef>\n                <mat-checkbox\n                    [disabled]=\"!referencedEntitiesDataSource.data.length\" [checked]=\"selection.hasValue() && SelectionUtilities.isAllSelected(selection, referencedEntitiesDataSource)\"\n                    [indeterminate]=\"selection.hasValue() && !SelectionUtilities.isAllSelected(selection, referencedEntitiesDataSource)\"\n                    (change)=\"$event ? SelectionUtilities.masterToggle(selection, referencedEntitiesDataSource) : null\">\n                </mat-checkbox>\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let entity\">\n                <mat-checkbox [checked]=\"selection.isSelected(entity)\" (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(entity) : null\"></mat-checkbox>\n            </mat-cell>\n        </ng-container>\n    \n        <ng-container *ngFor=\"let dCol of metadata.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n            <mat-header-cell *matHeaderCellDef>\n                {{dCol.displayName}}\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let entityId\" class=\"entity\">\n                {{getDisplayColumnValue(entityId, dCol)}}\n            </mat-cell>\n        </ng-container>\n    \n        <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n        <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n    </mat-table>\n</div>", styles: [".mdc-data-table__row:last-child .mdc-data-table__cell{border-bottom:1px solid rgba(0,0,0,.12)}.elevation-container{border-radius:5px;padding:15px;margin-bottom:15px;margin-top:15px}.array-headline{padding-bottom:10px}.buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px;flex-wrap:wrap;gap:10px}.buttons button{flex-grow:1}mat-form-field{max-width:100%}mat-table{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:25px}.mat-column-select{flex:0 0 48px;padding-left:0;padding-right:0;justify-content:center}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.EnvironmentInjector }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [NGX_INTERNAL_GLOBAL_DEFAULT_VALUES]
@@ -5164,11 +5167,11 @@ class StringDropdownInputComponent extends NgxMatEntityBaseInputComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: StringDropdownInputComponent, deps: [{ token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: StringDropdownInputComponent, selector: "string-dropdown-input", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-select #model=\"ngModel\"\n        [name]=\"name\"\n        [required]=\"metadata.required(entity)\"\n        [disabled]=\"isReadOnly\"\n        [(ngModel)]=\"propertyValue\"\n        (selectionChange)=\"emitChange()\"\n        (opened)=\"selectSearchInput.focus()\"\n    >\n        <mat-form-field class=\"select-search-input\">\n            <!-- eslint-disable-next-line angular/no-any -->\n            <input #selectSearchInput matInput (keyup)=\"filterDropdownValues($any($event.target).value)\">\n            <i matSuffix class=\"fas fa-search\"></i>\n        </mat-form-field>\n        <mat-option *ngIf=\"!metadata.required(entity)\">-</mat-option>\n        <mat-option *ngIf=\"shouldDisplayCurrentValue\" [value]=\"currentDropdownValue?.value\">{{currentDropdownValue?.displayName}}</mat-option>\n        <mat-option *ngFor=\"let value of filteredDropdownValues\" [value]=\"value.value\">{{value.displayName}}</mat-option>\n    </mat-select>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: StringDropdownInputComponent, selector: "string-dropdown-input", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-select #model=\"ngModel\"\n        [name]=\"name\"\n        [required]=\"metadata.required(entity)\"\n        [disabled]=\"isReadOnly\"\n        [(ngModel)]=\"propertyValue\"\n        (selectionChange)=\"emitChange()\"\n        (opened)=\"selectSearchInput.focus()\"\n    >\n        <mat-form-field class=\"select-search-input\">\n            <!-- eslint-disable-next-line angular/no-any -->\n            <input #selectSearchInput matInput (keyup)=\"filterDropdownValues($any($event.target).value)\">\n            <i matSuffix class=\"fas fa-search\"></i>\n        </mat-form-field>\n        <mat-option *ngIf=\"!metadata.required(entity)\">-</mat-option>\n        <mat-option *ngIf=\"shouldDisplayCurrentValue\" [value]=\"currentDropdownValue?.value\">{{currentDropdownValue?.displayName}}</mat-option>\n        <mat-option *ngFor=\"let value of filteredDropdownValues\" [value]=\"value.value\">{{value.displayName}}</mat-option>\n    </mat-select>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}::ng-deep .mat-mdc-form-field-has-icon-suffix .mat-mdc-text-field-wrapper{padding-right:16px}::ng-deep .select-search-input{max-width:100%;margin-top:-8px;margin-bottom:8px}::ng-deep .select-search-input .mat-mdc-form-field-subscript-wrapper{display:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: StringDropdownInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'string-dropdown-input', template: "<!-- eslint-disable angular/no-call-expression -->\n<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-select #model=\"ngModel\"\n        [name]=\"name\"\n        [required]=\"metadata.required(entity)\"\n        [disabled]=\"isReadOnly\"\n        [(ngModel)]=\"propertyValue\"\n        (selectionChange)=\"emitChange()\"\n        (opened)=\"selectSearchInput.focus()\"\n    >\n        <mat-form-field class=\"select-search-input\">\n            <!-- eslint-disable-next-line angular/no-any -->\n            <input #selectSearchInput matInput (keyup)=\"filterDropdownValues($any($event.target).value)\">\n            <i matSuffix class=\"fas fa-search\"></i>\n        </mat-form-field>\n        <mat-option *ngIf=\"!metadata.required(entity)\">-</mat-option>\n        <mat-option *ngIf=\"shouldDisplayCurrentValue\" [value]=\"currentDropdownValue?.value\">{{currentDropdownValue?.displayName}}</mat-option>\n        <mat-option *ngFor=\"let value of filteredDropdownValues\" [value]=\"value.value\">{{value.displayName}}</mat-option>\n    </mat-select>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"] }]
+            args: [{ selector: 'string-dropdown-input', template: "<!-- eslint-disable angular/no-call-expression -->\n<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-select #model=\"ngModel\"\n        [name]=\"name\"\n        [required]=\"metadata.required(entity)\"\n        [disabled]=\"isReadOnly\"\n        [(ngModel)]=\"propertyValue\"\n        (selectionChange)=\"emitChange()\"\n        (opened)=\"selectSearchInput.focus()\"\n    >\n        <mat-form-field class=\"select-search-input\">\n            <!-- eslint-disable-next-line angular/no-any -->\n            <input #selectSearchInput matInput (keyup)=\"filterDropdownValues($any($event.target).value)\">\n            <i matSuffix class=\"fas fa-search\"></i>\n        </mat-form-field>\n        <mat-option *ngIf=\"!metadata.required(entity)\">-</mat-option>\n        <mat-option *ngIf=\"shouldDisplayCurrentValue\" [value]=\"currentDropdownValue?.value\">{{currentDropdownValue?.displayName}}</mat-option>\n        <mat-option *ngFor=\"let value of filteredDropdownValues\" [value]=\"value.value\">{{value.displayName}}</mat-option>\n    </mat-select>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}::ng-deep .mat-mdc-form-field-has-icon-suffix .mat-mdc-text-field-wrapper{padding-right:16px}::ng-deep .select-search-input{max-width:100%;margin-top:-8px;margin-bottom:8px}::ng-deep .select-search-input .mat-mdc-form-field-subscript-wrapper{display:none}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.EnvironmentInjector }]; } });
 
 /* eslint-disable jsdoc/require-jsdoc */
@@ -5297,14 +5300,10 @@ class NgxMatEntityInputComponent {
      * to determine the property for which the input should be generated.
      */
     entity;
-    // eslint-disable-next-line jsdoc/require-jsdoc
-    internalEntity;
     /**
      * The name of the property to generate the input for. Used in conjunction with the "entity".
      */
     propertyKey;
-    // eslint-disable-next-line jsdoc/require-jsdoc
-    internalPropertyKey;
     /**
      * (optional) A custom function to generate the error-message for invalid inputs.
      */
@@ -5568,7 +5567,7 @@ class NgxMatEntityInputComponent {
      */
     get currentReferencesOneDropdownValue() {
         return LodashUtilities.cloneDeep(this.referencesOneDropdownValues ?? [])
-            .find(v => v.value === this.internalEntity[this.internalPropertyKey]);
+            .find(v => v.value === this.entity[this.propertyKey]);
     }
     // eslint-disable-next-line jsdoc/require-returns
     /**
@@ -5624,28 +5623,20 @@ class NgxMatEntityInputComponent {
         return runInInjectionContext(this.injector, () => displayColumn.value(entity));
     }
     ngOnInit() {
-        if (!this.entity) {
-            throw new Error('Missing required Input data "entity"');
-        }
-        this.internalEntity = this.entity;
-        if (this.propertyKey == null) {
-            throw new Error('Missing required Input data "propertyKey"');
-        }
-        this.internalPropertyKey = this.propertyKey;
         this.internalGetValidationErrorMessage = this.getValidationErrorMessage ?? this.defaultGetValidationErrorMessage;
         this.internalIsReadOnly = this.isReadOnly ?? false;
-        const foundType = EntityUtilities.getPropertyType(this.internalEntity, this.internalPropertyKey);
+        const foundType = EntityUtilities.getPropertyType(this.entity, this.propertyKey);
         if (foundType == null) {
-            throw new Error(`No type was found for the key "${String(this.internalPropertyKey)}"`);
+            throw new Error(`No type was found for the key "${String(this.propertyKey)}"`);
         }
         this.type = foundType;
         if (this.validEmpty === true) {
-            const currentMetadata = ReflectUtilities.getMetadata('metadata', this.internalEntity, this.internalPropertyKey);
-            ReflectUtilities.defineMetadata('metadata', { ...currentMetadata, required: defaultFalse }, this.internalEntity, this.internalPropertyKey);
+            const currentMetadata = ReflectUtilities.getMetadata('metadata', this.entity, this.propertyKey);
+            ReflectUtilities.defineMetadata('metadata', { ...currentMetadata, required: defaultFalse }, this.entity, this.propertyKey);
         }
-        const foundMetadata = EntityUtilities.getPropertyMetadata(this.internalEntity, this.internalPropertyKey, this.type);
+        const foundMetadata = EntityUtilities.getPropertyMetadata(this.entity, this.propertyKey, this.type);
         if (!foundMetadata) {
-            throw new Error(`No metadata was found for the key "${String(this.internalPropertyKey)}"`);
+            throw new Error(`No metadata was found for the key "${String(this.propertyKey)}"`);
         }
         this.metadata = foundMetadata;
         switch (this.type) {
@@ -5667,7 +5658,7 @@ class NgxMatEntityInputComponent {
     }
     initReferencesOne() {
         this.metadataReferencesOne = this.metadata;
-        this.referencesOneName = this.internalPropertyKey.toString() + 'input' + UUIDUtilities.create();
+        this.referencesOneName = this.propertyKey.toString() + 'input' + UUIDUtilities.create();
         void runInInjectionContext(this.injector, (async () => {
             this.referencesOneAllReferencedEntities = await this.metadataReferencesOne.getReferencedEntities();
             this.referencesOneDropdownValues = this.metadataReferencesOne.getDropdownValues(LodashUtilities.cloneDeep(this.referencesOneAllReferencedEntities));
@@ -5687,7 +5678,7 @@ class NgxMatEntityInputComponent {
     }
     initHasMany() {
         this.metadata = new HasManyDecoratorConfigInternal(this.metadata, this.globalConfig);
-        ReflectUtilities.defineMetadata('metadata', this.metadata, this.internalEntity, this.internalPropertyKey);
+        ReflectUtilities.defineMetadata('metadata', this.metadata, this.entity, this.propertyKey);
         this.metadataHasMany = this.metadata;
         this.hasManyImportAction = new BaseTableActionInternal({
             ...this.metadataHasMany.tableData.baseData.importActionData,
@@ -5696,7 +5687,7 @@ class NgxMatEntityInputComponent {
         runInInjectionContext(this.injector, () => {
             this.hasManyAllowCreate = this.metadataHasMany.tableData.baseData.allowCreate();
             this.hasManyEntityService = inject(this.metadataHasMany.tableData.baseData.EntityServiceClass);
-            this.hasManyCreateBaseUrl = this.metadataHasMany.createBaseUrl(this.internalEntity, this.metadataHasMany);
+            this.hasManyCreateBaseUrl = this.metadataHasMany.createBaseUrl(this.entity, this.metadataHasMany);
         });
         const givenDisplayColumns = this.metadataHasMany.tableData.baseData.displayColumns.map((v) => v.displayName);
         if (this.metadataHasMany.tableData.baseData.tableActions.filter(tA => tA.type === 'multi-select').length) {
@@ -5722,7 +5713,7 @@ class NgxMatEntityInputComponent {
             this.hasManySelection.clear();
         });
         runInInjectionContext(this.injector, () => {
-            const readBaseUrl = this.metadataHasMany.readBaseUrl(this.internalEntity, this.metadataHasMany);
+            const readBaseUrl = this.metadataHasMany.readBaseUrl(this.entity, this.metadataHasMany);
             void this.hasManyEntityService.read(readBaseUrl).then(() => {
                 this.hasManyIsLoading = false;
             });
@@ -5730,12 +5721,12 @@ class NgxMatEntityInputComponent {
     }
     initEntityArray() {
         this.metadata = new EntityArrayDecoratorConfigInternal(this.metadata, this.globalConfig);
-        ReflectUtilities.defineMetadata('metadata', this.metadata, this.internalEntity, this.internalPropertyKey);
+        ReflectUtilities.defineMetadata('metadata', this.metadata, this.entity, this.propertyKey);
         this.metadataEntityArray = this.metadata;
-        if (this.internalEntity[this.internalPropertyKey] == null) {
-            this.internalEntity[this.internalPropertyKey] = [];
+        if (this.entity[this.propertyKey] == null) {
+            this.entity[this.propertyKey] = [];
         }
-        this.entityArrayValues = this.internalEntity[this.internalPropertyKey];
+        this.entityArrayValues = this.entity[this.propertyKey];
         if (!this.metadataEntityArray.createInline && !this.metadataEntityArray.createDialogData) {
             this.metadataEntityArray.createDialogData = {
                 title: 'Add'
@@ -5762,7 +5753,7 @@ class NgxMatEntityInputComponent {
     }
     initObjectInput() {
         this.metadataDefaultObject = this.metadata;
-        this.objectProperty = this.internalEntity[this.internalPropertyKey];
+        this.objectProperty = this.entity[this.propertyKey];
         this.objectPropertyTabs = EntityUtilities.getEntityTabs(this.objectProperty, this.injector, this.hideOmitForCreate, this.hideOmitForEdit, this.metadataDefaultObject.omit);
     }
     startImportJson() {
@@ -5796,7 +5787,7 @@ class NgxMatEntityInputComponent {
      * Sets the references one object using the input id.
      */
     setReferencesOneObject() {
-        const foundEntity = this.metadataReferencesOne.getEntityForId(this.internalEntity[this.internalPropertyKey], this.referencesOneAllReferencedEntities);
+        const foundEntity = this.metadataReferencesOne.getEntityForId(this.entity[this.propertyKey], this.referencesOneAllReferencedEntities);
         this.referencesOneObject = new this.metadataReferencesOne.EntityClass(foundEntity);
         this.referencesOnePropertyTabs = EntityUtilities.getEntityTabs(this.referencesOneObject, this.injector);
         this.emitChange();
@@ -6258,11 +6249,11 @@ class NgxMatEntityInputComponent {
         this.emitChange();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: NgxMatEntityInputComponent, deps: [{ token: i1.MatDialog }, { token: i0.EnvironmentInjector }, { token: i2$2.Router }, { token: NGX_GET_VALIDATION_ERROR_MESSAGE }, { token: NGX_INTERNAL_GLOBAL_DEFAULT_VALUES }, { token: i2$1.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: NgxMatEntityInputComponent, selector: "ngx-mat-entity-input", inputs: { entity: "entity", propertyKey: "propertyKey", getValidationErrorMessage: "getValidationErrorMessage", hideOmitForCreate: "hideOmitForCreate", hideOmitForEdit: "hideOmitForEdit", validEmpty: "validEmpty", isReadOnly: "isReadOnly" }, outputs: { inputChangeEvent: "inputChangeEvent" }, viewQueries: [{ propertyName: "addArrayItemDialog", first: true, predicate: ["addArrayItemDialog"], descendants: true }, { propertyName: "editArrayItemDialog", first: true, predicate: ["editArrayItemDialog"], descendants: true }, { propertyName: "hasManyPaginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "hasManySort", first: true, predicate: MatSort, descendants: true }, { propertyName: "hasManyFilter", first: true, predicate: ["filter"], descendants: true, static: true }, { propertyName: "createHasManyDialog", first: true, predicate: ["createHasManyDialog"], descendants: true }, { propertyName: "editHasManyDialog", first: true, predicate: ["editHasManyDialog"], descendants: true }], ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n \n<!-- eslint-disable angular/cyclomatic-complexity -->\n<div *ngIf=\"!(hideOmitForCreate && metadata.omitForCreate) && !(hideOmitForEdit && metadata.omitForUpdate)\" [ngSwitch]=\"type\">\n    <!-------------------------------------------->\n    <!-----------------Strings-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.STRING\">\n        <string-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </string-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_TEXTBOX\">\n        <string-textbox-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </string-textbox-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_AUTOCOMPLETE\">\n        <string-autocomplete-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </string-autocomplete-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_DROPDOWN\">\n        <string-dropdown-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </string-dropdown-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_PASSWORD\">\n        <string-password-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </string-password-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-----------------Booleans------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_CHECKBOX\">\n        <boolean-checkbox-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </boolean-checkbox-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_TOGGLE\">\n        <boolean-toggle-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </boolean-toggle-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_DROPDOWN\">\n        <boolean-dropdown-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </boolean-dropdown-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!------------------Numbers------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.NUMBER\">\n        <number-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </number-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.NUMBER_DROPDOWN\">\n        <number-dropdown-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </number-dropdown-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.NUMBER_SLIDER\">\n        <number-slider-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </number-slider-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Array-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_DATE\">\n        <array-date-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </array-date-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_DATE_TIME\">\n        <array-date-time-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </array-date-time-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_DATE_RANGE\">\n        <array-date-range-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </array-date-range-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_STRING_CHIPS\">\n        <array-string-chips-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </array-string-chips-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_STRING_AUTOCOMPLETE_CHIPS\">\n        <array-string-autocomplete-chips\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </array-string-autocomplete-chips>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Dates-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.DATE\">\n        <date-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </date-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.DATE_RANGE\">\n        <date-range-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </date-range-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.DATE_TIME\">\n        <date-time-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </date-time-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Files-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.FILE_DEFAULT\">\n        <file-default-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </file-default-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.FILE_IMAGE\">\n        <file-image-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </file-image-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------- references many ------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.REFERENCES_MANY\">\n        <references-many-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </references-many-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Custom------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.CUSTOM\">\n        <custom-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </custom-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Object------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.OBJECT\">\n        <b>{{metadataDefaultObject.displayName}}</b>\n        <!-- iterates over the object properties -->\n        <mat-tab-group *ngIf=\"objectPropertyTabs.length > 1\" preserveContent>\n            <mat-tab *ngFor=\"let tab of objectPropertyTabs; let tI = index; trackBy: trackByFn\" [label]=\"tab.tabName\">\n                <div *ngFor=\"let row of tab.rows;\" class=\"row\">\n                    <ngx-mat-entity-input *ngFor=\"let key of row.keys; let rI = index; trackBy: trackByFn\"\n                        [entity]=\"objectProperty\"\n                        [propertyKey]=\"key\"\n                        [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                        [hideOmitForCreate]=\"hideOmitForCreate\"\n                        [hideOmitForEdit]=\"hideOmitForEdit\"\n                        [validEmpty]=\"!metadata.required(entity)\"\n                        [isReadOnly]=\"isPropertyReadOnly(objectProperty, key)\"\n                        [class]=\"EntityUtilities.getWidthClasses(objectProperty, key)\"\n                        (inputChangeEvent)=\"emitChange()\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </mat-tab>\n        </mat-tab-group>\n\n        <div *ngIf=\"objectPropertyTabs.length <= 1\">\n            <div *ngFor=\"let row of objectPropertyTabs[0].rows\" class=\"row\">\n                <ngx-mat-entity-input *ngFor=\"let key of row.keys; let i = index; trackBy: trackByFn\"\n                    [entity]=\"objectProperty\"\n                    [propertyKey]=\"key\"\n                    [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                    [hideOmitForCreate]=\"hideOmitForCreate\"\n                    [hideOmitForEdit]=\"hideOmitForEdit\"\n                    [validEmpty]=\"!metadata.required(entity)\"\n                    [isReadOnly]=\"isPropertyReadOnly(objectProperty, key)\"\n                    [class]=\"EntityUtilities.getWidthClasses(objectProperty, key)\"\n                    (inputChangeEvent)=\"emitChange()\"\n                >\n                </ngx-mat-entity-input>\n            </div>\n        </div>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------- references one ------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.REFERENCES_ONE\">\n        <mat-form-field>\n            <mat-label>{{metadata.displayName}}</mat-label>\n            <mat-select #inputModel=\"ngModel\"\n                [name]=\"referencesOneName\"\n                [disabled]=\"internalIsReadOnly\"\n                [required]=\"metadata.required(entity)\"\n                [(ngModel)]=\"internalEntity[internalPropertyKey]\"\n                (selectionChange)=\"setReferencesOneObject()\"\n                (opened)=\"selectSearchInput.focus()\"\n            >\n                <mat-form-field class=\"select-search-input\">\n                    <!-- eslint-disable-next-line angular/no-any -->\n                    <input #selectSearchInput matInput (keyup)=\"filterReferencesOneValues($any($event.target).value)\">\n                    <i matSuffix class=\"fas fa-search\"></i>\n                </mat-form-field>\n                <mat-option *ngIf=\"!metadata.required(entity)\">-</mat-option>\n                <mat-option *ngIf=\"shouldDisplayCurrentReferencesOneDropdownValue\" [value]=\"currentReferencesOneDropdownValue?.value\">{{currentReferencesOneDropdownValue?.displayName}}</mat-option>\n                <mat-option *ngFor=\"let value of filteredReferencesOneDropdownValues\" [value]=\"value.value\">{{value.displayName}}</mat-option>\n            </mat-select>\n            <mat-error>{{internalGetValidationErrorMessage(inputModel)}}</mat-error>\n        </mat-form-field>\n        <!-- iterates over the references one properties -->\n        <mat-tab-group *ngIf=\"referencesOnePropertyTabs && referencesOnePropertyTabs.length > 1\" preserveContent>\n            <mat-tab *ngFor=\"let tab of referencesOnePropertyTabs; let tI = index; trackBy: trackByFn\" [label]=\"tab.tabName\">\n                <div *ngFor=\"let row of tab.rows;\" class=\"row\">\n                    <ngx-mat-entity-input *ngFor=\"let key of row.keys; let rI = index; trackBy: trackByFn\"\n                        [entity]=\"referencesOneObject\"\n                        [propertyKey]=\"key\"\n                        [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                        [hideOmitForCreate]=\"hideOmitForCreate\"\n                        [hideOmitForEdit]=\"hideOmitForEdit\"\n                        [validEmpty]=\"!metadata.required(entity)\"\n                        [isReadOnly]=\"true\"\n                        [class]=\"EntityUtilities.getWidthClasses(referencesOneObject, key)\"\n                        (inputChangeEvent)=\"emitChange()\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </mat-tab>\n        </mat-tab-group>\n\n        <div *ngIf=\"referencesOnePropertyTabs && referencesOnePropertyTabs.length <= 1\">\n            <div *ngFor=\"let row of referencesOnePropertyTabs[0].rows\" class=\"row\">\n                <ngx-mat-entity-input *ngFor=\"let key of row.keys; let i = index; trackBy: trackByFn\"\n                    [entity]=\"referencesOneObject\"\n                    [propertyKey]=\"key\"\n                    [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                    [hideOmitForCreate]=\"hideOmitForCreate\"\n                    [hideOmitForEdit]=\"hideOmitForEdit\"\n                    [validEmpty]=\"!metadata.required(entity)\"\n                    [isReadOnly]=\"true\"\n                    [class]=\"EntityUtilities.getWidthClasses(referencesOneObject, key)\"\n                    (inputChangeEvent)=\"emitChange()\"\n                >\n                </ngx-mat-entity-input>\n            </div>\n        </div>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Array-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY\" class=\"entityArray\">\n        <div class=\"mat-elevation-z8 elevation-container\">\n            <div class=\"array-headline\">\n                <b>{{metadataEntityArray.displayName}}</b>\n            </div>\n            <div *ngIf=\"metadataEntityArray.createInline && !internalIsReadOnly\">\n                <mat-tab-group *ngIf=\"arrayItemInlineTabs.length > 1\" preserveContent>\n                    <mat-tab *ngFor=\"let tab of arrayItemInlineTabs\" [label]=\"tab.tabName\">\n                        <div *ngFor=\"let row of tab.rows\" class=\"row\">\n                            <ngx-mat-entity-input\n                                *ngFor=\"let key of row.keys; let i = index; trackBy: trackByFn\"\n                                [entity]=\"arrayItem\"\n                                [propertyKey]=\"key\"\n                                [hideOmitForCreate]=\"true\"\n                                [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                                [class]=\"EntityUtilities.getWidthClasses(arrayItem, key)\"\n                                (inputChangeEvent)=\"checkIsArrayItemValid()\"\n                            >\n                            </ngx-mat-entity-input>\n                        </div>\n                    </mat-tab>\n                </mat-tab-group>\n\n                <div *ngIf=\"arrayItemInlineTabs.length <= 1\">\n                    <div *ngFor=\"let row of arrayItemInlineTabs[0].rows\" class=\"row\">\n                        <ngx-mat-entity-input\n                            *ngFor=\"let key of row.keys; let i = index; trackBy: trackByFn\"\n                            [entity]=\"arrayItem\"\n                            [propertyKey]=\"key\"\n                            [hideOmitForCreate]=\"true\"\n                            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                            [class]=\"EntityUtilities.getWidthClasses(arrayItem, key)\"\n                            (inputChangeEvent)=\"checkIsArrayItemValid()\"\n                        >\n                        </ngx-mat-entity-input>\n                    </div>\n                </div>\n            </div>\n\n            <div *ngIf=\"!internalIsReadOnly\" class=\"buttons\">\n                <button type=\"button\" mat-raised-button\n                    [disabled]=\"metadataEntityArray.createInline && !isArrayItemValid\"\n                    (click)=\"addEntity()\">\n                    {{metadataEntityArray.addButtonLabel}}\n                </button>\n                <button type=\"button\" mat-raised-button\n                    [disabled]=\"!entityArraySelection.selected.length\"\n                    (click)=\"removeFromEntityArray()\">\n                    {{metadataEntityArray.removeButtonLabel}}\n                </button>\n            </div>\n        \n            <mat-table [dataSource]=\"entityArrayDataSource\">\n                <!-- select Column -->\n                <ng-container *ngIf=\"!internalIsReadOnly\" matColumnDef=\"select\">\n                    <mat-header-cell *matHeaderCellDef>\n                        <mat-checkbox\n                            [disabled]=\"!entityArrayDataSource.data.length\" [checked]=\"entityArraySelection.hasValue() && SelectionUtilities.isAllSelected(entityArraySelection, entityArrayDataSource)\"\n                            [indeterminate]=\"entityArraySelection.hasValue() && !SelectionUtilities.isAllSelected(entityArraySelection, entityArrayDataSource)\"\n                            (change)=\"$event ? SelectionUtilities.masterToggle(entityArraySelection, entityArrayDataSource) : null\">\n                        </mat-checkbox>\n                    </mat-header-cell>\n                    <mat-cell *matCellDef=\"let entity\">\n                        <mat-checkbox [checked]=\"entityArraySelection.isSelected(entity)\" (click)=\"$event.stopPropagation()\" (change)=\"$event ? entityArraySelection.toggle(entity) : null\"></mat-checkbox>\n                    </mat-cell>\n                </ng-container>\n            \n                <ng-container *ngFor=\"let dCol of metadataEntityArray.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n                    <mat-header-cell *matHeaderCellDef>\n                        {{dCol.displayName}}\n                    </mat-header-cell>\n                    <mat-cell *matCellDef=\"let entity\" [class.enabled]=\"!dCol.disableClick\" (click)=\"editArrayItem(entity, dCol)\">\n                        <ng-container *ngIf=\"dCol.Component\">\n                            <display-column-value [entity]=\"entity\" [ComponentClass]=\"dCol.Component\"></display-column-value>\n                        </ng-container>\n                        <ng-container *ngIf=\"!dCol.Component\">\n                            {{getDisplayColumnValue(entity, dCol)}}\n                        </ng-container>\n                    </mat-cell>\n                </ng-container>\n            \n                <mat-header-row *matHeaderRowDef=\"entityArrayDisplayedColumns\"></mat-header-row>\n                <mat-row *matRowDef=\"let row; columns: entityArrayDisplayedColumns\"></mat-row>\n            </mat-table>\n        \n            <div *ngIf=\"metadataEntityArray.required(entity) && !entityArrayDataSource.data.length\" class=\"array-error\">\n                {{metadataEntityArray.missingErrorMessage}}\n            </div>\n        </div>\n    </div>\n\n    <!-------------------------------------------->\n    <!------------------ has many ---------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.HAS_MANY\" class=\"hasMany\">\n        <h2 class=\"title\">{{metadataHasMany.tableData.baseData.title}}</h2>\n\n        <div class=\"row\">\n            <mat-form-field class=\"col-lg-8 col-md-6 col-sm-12\">\n                <mat-label>{{metadataHasMany.tableData.baseData.searchLabel}}</mat-label>\n                <input matInput (keyup)=\"applyHasManyFilter($event)\">\n            </mat-form-field>\n            <div\n                *ngIf=\"metadataHasMany.tableData.baseData.tableActions.length\"\n                [class.col-lg-2]=\"hasManyAllowCreate\"\n                [class.col-lg-4]=\"!hasManyAllowCreate\"\n                [class.col-md-3]=\"hasManyAllowCreate\"\n                [class.col-md-6]=\"!hasManyAllowCreate\"\n                [class.col-sm-6]=\"hasManyAllowCreate\"\n                [class.col-sm-12]=\"!hasManyAllowCreate\"\n            >\n                <button type=\"button\" class=\"actions-button\" mat-raised-button [matMenuTriggerFor]=\"menu\">\n                    {{metadataHasMany.tableData.baseData.tableActionsLabel}}\n                </button>\n            </div>\n            <mat-menu #menu=\"matMenu\">\n                <button *ngIf=\"metadataHasMany.tableData.baseData.allowJsonImport\" type=\"button\" mat-menu-item [disabled]=\"hasManyTableActionDisabled(hasManyImportAction)\" (click)=\"runHasManyTableAction(hasManyImportAction)\">\n                    {{hasManyImportAction.displayName}}\n                </button>\n                <button *ngFor=\"let action of metadataHasMany.tableData.baseData.tableActions\" type=\"button\" mat-menu-item [disabled]=\"hasManyTableActionDisabled(action)\" (click)=\"runHasManyTableAction(action)\">\n                    {{action.displayName}}\n                </button>\n            </mat-menu>\n\n            <div\n                *ngIf=\"hasManyAllowCreate\"\n                [class.col-lg-2]=\"metadataHasMany.tableData.baseData.tableActions.length\"\n                [class.col-lg-4]=\"!metadataHasMany.tableData.baseData.tableActions.length\"\n                [class.col-md-3]=\"metadataHasMany.tableData.baseData.tableActions.length\"\n                [class.col-md-6]=\"!metadataHasMany.tableData.baseData.tableActions.length\"\n                [class.col-sm-6]=\"metadataHasMany.tableData.baseData.tableActions.length\"\n                [class.col-sm-12]=\"!metadataHasMany.tableData.baseData.tableActions.length\"\n            >\n                <button type=\"button\" class=\"create-button\" mat-raised-button (click)=\"createHasManyEntity()\">\n                    {{metadataHasMany.tableData.baseData.createButtonLabel}}\n                </button>\n            </div>\n        </div>\n\n        <div class=\"mat-elevation-z8 elevation-container\">\n            <mat-table matSort [dataSource]=\"hasManyDataSource\">\n                <!-- select Column -->\n                <ng-container matColumnDef=\"select\">\n                    <mat-header-cell *matHeaderCellDef>\n                        <mat-checkbox [checked]=\"hasManySelection.hasValue() && SelectionUtilities.isAllSelected(hasManySelection, hasManyDataSource)\"\n                            [indeterminate]=\"hasManySelection.hasValue() && !SelectionUtilities.isAllSelected(hasManySelection, hasManyDataSource)\"\n                            (change)=\"$event ? SelectionUtilities.masterToggle(hasManySelection, hasManyDataSource) : null\">\n                        </mat-checkbox>\n                    </mat-header-cell>\n                    <mat-cell *matCellDef=\"let entity\" class=\"enabled\">\n                        <mat-checkbox [checked]=\"hasManySelection.isSelected(entity)\"\n                            (click)=\"$event.stopPropagation()\"\n                            (change)=\"$event ? hasManySelection.toggle(entity) : null\">\n                        </mat-checkbox>\n                    </mat-cell>\n                </ng-container>\n\n                <ng-container *ngFor=\"let dCol of metadataHasMany.tableData.baseData.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n                    <mat-header-cell *matHeaderCellDef mat-sort-header>\n                        {{dCol.displayName}}\n                    </mat-header-cell>\n                    <mat-cell *matCellDef=\"let entity\"\n                        [class.enabled]=\"!dCol.disableClick && (hasManyAllowUpdate(entity) || hasManyAllowRead(entity))\"\n                        (click)=\"editHasManyEntity(entity, dCol)\"\n                    >\n                        <ng-container *ngIf=\"dCol.Component\">\n                            <display-column-value [entity]=\"entity\" [ComponentClass]=\"dCol.Component\"></display-column-value>\n                        </ng-container>\n                        <ng-container *ngIf=\"!dCol.Component\">\n                            {{getDisplayColumnValue(entity, dCol)}}\n                        </ng-container>\n                    </mat-cell>\n                </ng-container>\n\n                <mat-header-row *matHeaderRowDef=\"displayedHasManyColumns\"></mat-header-row>\n                <mat-row *matRowDef=\"let row; columns: displayedHasManyColumns\"></mat-row>\n            </mat-table>\n\n            <mat-spinner *ngIf=\"hasManyIsLoading && metadataHasMany.tableData.baseData.displayLoadingSpinner\">\n            </mat-spinner>\n\n            <mat-paginator [length]=\"hasManyDataSource.filteredData.length\" [pageIndex]=\"0\" [pageSize]=\"10\" [pageSizeOptions]=\"[5, 10, 25, 50]\"></mat-paginator>\n        </div>\n    </div>\n\n    <div *ngSwitchDefault>ERROR: The type {{type}} is not known.</div>\n</div>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n<!--------------------------------------------------------->\n<!--------------------Add Array Item Dialog---------------->\n<!--------------------------------------------------------->\n<ng-template #addArrayItemDialog>\n    <div class=\"mat-dialog-title\">\n        <div>{{addArrayItemDialogData.title}}</div>\n    </div>\n\n    <form>\n        <mat-dialog-content>\n            <mat-tab-group *ngIf=\"arrayItemDialogTabs.length > 1\" preserveContent>\n                <mat-tab *ngFor=\"let tab of arrayItemDialogTabs\" [label]=\"tab.tabName\">\n                    <div *ngFor=\"let row of tab.rows\" class=\"row\">\n                        <ngx-mat-entity-input\n                            *ngFor=\"let key of row.keys\"\n                            [entity]=\"arrayItem\"\n                            [propertyKey]=\"key\"\n                            [hideOmitForCreate]=\"true\"\n                            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                            [class]=\"EntityUtilities.getWidthClasses(arrayItem, key)\"\n                            (inputChangeEvent)=\"checkIsArrayItemValid()\"\n                        >\n                        </ngx-mat-entity-input>\n                    </div>\n                </mat-tab>\n            </mat-tab-group>\n    \n            <div *ngIf=\"arrayItemDialogTabs.length <= 1\">\n                <div *ngFor=\"let row of arrayItemDialogTabs[0].rows\" class=\"row\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"arrayItem\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForCreate]=\"true\"\n                        [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                        [class]=\"EntityUtilities.getWidthClasses(arrayItem, key)\"\n                        (inputChangeEvent)=\"checkIsArrayItemValid()\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </div>\n        </mat-dialog-content>\n    \n        <mat-dialog-actions>\n            <div class=\"d-flex align-items-center gap-3\" style=\"margin-top: 10px;\">\n                <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n                    [disabled]=\"!isArrayItemValid\"\n                    [matBadge]=\"arrayItemValidationErrors.length\"\n                    [matBadgeHidden]=\"!arrayItemValidationErrors.length\"\n                    (click)=\"addArrayItem()\"\n                >\n                    {{addArrayItemDialogData.createButtonLabel}}\n                </button>\n                <ngx-mat-entity-tooltip *ngIf=\"arrayItemValidationErrors.length\" [tooltipContent]=\"arrayItemTooltipContent\"></ngx-mat-entity-tooltip>\n            </div>\n            <button type=\"button\" mat-raised-button class=\"cancel-button\" (click)=\"closeAddArrayItemDialog()\">\n                {{addArrayItemDialogData.cancelButtonLabel}}\n            </button>\n        </mat-dialog-actions>\n    </form>\n\n</ng-template>\n\n<!--------------------------------------------------------->\n<!--------------------Edit Array Item Dialog---------------->\n<!--------------------------------------------------------->\n<ng-template #editArrayItemDialog>\n    <div class=\"mat-dialog-title\">\n        <div>{{editArrayItemDialogData.title(arrayItemPriorChanges)}}</div>\n    </div>\n    \n    <form>\n        <mat-dialog-content>\n            <mat-tab-group *ngIf=\"arrayItemDialogTabs.length > 1\" preserveContent>\n                <mat-tab *ngFor=\"let tab of arrayItemDialogTabs\" [label]=\"tab.tabName\">\n                    <div *ngFor=\"let row of tab.rows\" class=\"row\">\n                        <ngx-mat-entity-input\n                            *ngFor=\"let key of row.keys\"\n                            [entity]=\"arrayItem\"\n                            [propertyKey]=\"key\"\n                            [hideOmitForEdit]=\"true\"\n                            [class]=\"EntityUtilities.getWidthClasses(arrayItem, key)\"\n                            [isReadOnly]=\"isPropertyReadOnly(arrayItem, key)\"\n                            (inputChangeEvent)=\"checkArrayItem()\"\n                        >\n                        </ngx-mat-entity-input>\n                    </div>\n                </mat-tab>\n            </mat-tab-group>\n        \n            <div *ngIf=\"arrayItemDialogTabs.length <= 1\">\n                <div *ngFor=\"let row of arrayItemDialogTabs[0].rows\" class=\"row\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"arrayItem\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForEdit]=\"true\"\n                        [class]=\"EntityUtilities.getWidthClasses(arrayItem, key)\"\n                        [isReadOnly]=\"isPropertyReadOnly(arrayItem, key)\"\n                        (inputChangeEvent)=\"checkArrayItem()\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </div>\n        </mat-dialog-content>\n        \n        <mat-dialog-actions>\n            <div class=\"d-flex align-items-center gap-3\" style=\"margin-top: 10px;\">\n                <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n                [disabled]=\"internalIsReadOnly || !isArrayItemValid || !isArrayItemDirty\"\n                    [matBadge]=\"arrayItemValidationErrors.length\"\n                    [matBadgeHidden]=\"!arrayItemValidationErrors.length\"\n                    (click)=\"saveArrayItem()\"\n                >\n                    {{editArrayItemDialogData.confirmButtonLabel}}\n                </button>\n                <ngx-mat-entity-tooltip *ngIf=\"arrayItemValidationErrors.length\" [tooltipContent]=\"arrayItemTooltipContent\"></ngx-mat-entity-tooltip>\n            </div>\n            <button type=\"button\" mat-raised-button class=\"cancel-button\" (click)=\"closeEditArrayItemDialog()\">\n                {{editArrayItemDialogData.cancelButtonLabel}}\n            </button>\n        </mat-dialog-actions>\n    </form>\n</ng-template>\n\n<!--------------------------------------------------------->\n<!--------------------Create Has Many Dialog---------------->\n<!--------------------------------------------------------->\n<ng-template #createHasManyDialog>\n    <div class=\"mat-dialog-title\">\n        <div>{{metadataHasMany.tableData.createData.title}}</div>\n    </div>\n    \n    <form>\n        <mat-dialog-content>\n            <mat-tab-group *ngIf=\"hasManyCreateTabs.length > 1\" preserveContent>\n                <mat-tab *ngFor=\"let tab of hasManyCreateTabs\" [label]=\"tab.tabName\">\n                    <div *ngFor=\"let row of tab.rows\" class=\"row\">\n                        <ngx-mat-entity-input\n                            *ngFor=\"let key of row.keys\"\n                            [entity]=\"hasManyEntity\"\n                            [propertyKey]=\"key\"\n                            [hideOmitForCreate]=\"true\"\n                            [class]=\"EntityUtilities.getWidthClasses(hasManyEntity, key)\"\n                            (inputChangeEvent)=\"checkIsHasManyEntityValid('create')\"\n                        >\n                        </ngx-mat-entity-input>\n                    </div>\n                </mat-tab>\n            </mat-tab-group>\n        \n            <div *ngIf=\"hasManyCreateTabs.length <= 1\">\n                <div *ngFor=\"let row of hasManyCreateTabs[0].rows\" class=\"row\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"hasManyEntity\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForCreate]=\"true\"\n                        [class]=\"EntityUtilities.getWidthClasses(hasManyEntity, key)\"\n                        (inputChangeEvent)=\"checkIsHasManyEntityValid('create')\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </div>\n        </mat-dialog-content>\n        \n        <mat-dialog-actions>\n            <div class=\"d-flex align-items-center gap-3\" style=\"margin-top: 10px;\">\n                <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n                    [disabled]=\"!isHasManyEntityValid\"\n                    [matBadge]=\"hasManyValidationErrors.length\"\n                    [matBadgeHidden]=\"!hasManyValidationErrors.length\"\n                    (click)=\"dialogCreateHasMany()\"\n                >\n                    {{metadataHasMany.tableData.createData.createButtonLabel}}\n                </button>\n                <ngx-mat-entity-tooltip *ngIf=\"hasManyValidationErrors.length\" [tooltipContent]=\"hasManyTooltipContent\"></ngx-mat-entity-tooltip>\n            </div>\n            <button type=\"button\" mat-raised-button class=\"cancel-button\" (click)=\"dialogCancelCreateHasMany()\">\n                {{metadataHasMany.tableData.createData.cancelButtonLabel}}\n            </button>\n        </mat-dialog-actions>\n    </form>\n    \n</ng-template>\n\n<!--------------------------------------------------------->\n<!--------------------Edit Has Many Dialog----------------->\n<!--------------------------------------------------------->\n<ng-template #editHasManyDialog>\n    <div class=\"mat-dialog-title\">\n        <div>{{metadataHasMany.tableData.editData.title(hasManyEntityPriorChanges)}}</div>\n\n        <div class=\"actions-container\">\n            <button *ngIf=\"metadataHasMany.tableData.editData.actions.length\" type=\"button\" mat-raised-button [matMenuTriggerFor]=\"menu\">\n                {{metadataHasMany.tableData.editData.actionsLabel}}\n            </button>\n            <mat-menu #menu=\"matMenu\">\n                <button *ngFor=\"let action of metadataHasMany.tableData.editData.actions\" type=\"button\" mat-menu-item [disabled]=\"hasManyEditActionDisabled(action)\" (click)=\"hasManyRunEditAction(action)\">\n                    {{action.displayName}}\n                </button>\n            </mat-menu>\n        \n            <button *ngIf=\"hasManyAllowDelete(hasManyEntity)\" type=\"button\" mat-raised-button color=\"warn\" class=\"delete-button\" tabindex=\"-1\" (click)=\"deleteHasManyEntity()\">\n                {{metadataHasMany.tableData.editData.deleteButtonLabel}}\n            </button>\n        </div>\n    </div>\n    \n    <form>\n        <mat-dialog-content>\n            <mat-tab-group *ngIf=\"hasManyUpdateTabs.length > 1\" preserveContent>\n                <mat-tab *ngFor=\"let tab of hasManyUpdateTabs\" [label]=\"tab.tabName\">\n                    <div *ngFor=\"let row of tab.rows\" class=\"row\">\n                        <ngx-mat-entity-input\n                            *ngFor=\"let key of row.keys\"\n                            [entity]=\"hasManyEntity\"\n                            [propertyKey]=\"key\"\n                            [hideOmitForEdit]=\"true\"\n                            [class]=\"EntityUtilities.getWidthClasses(hasManyEntity, key)\"\n                            [isReadOnly]=\"isPropertyReadOnly(hasManyEntity, key)\"\n                            (inputChangeEvent)=\"checkHasManyEntity()\"\n                        >\n                        </ngx-mat-entity-input>\n                    </div>\n                </mat-tab>\n            </mat-tab-group>\n        \n            <div *ngIf=\"hasManyUpdateTabs.length <= 1\">\n                <div *ngFor=\"let row of hasManyUpdateTabs[0].rows\" class=\"row\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"hasManyEntity\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForEdit]=\"true\"\n                        [class]=\"EntityUtilities.getWidthClasses(hasManyEntity, key)\"\n                        [isReadOnly]=\"isPropertyReadOnly(hasManyEntity, key)\"\n                        (inputChangeEvent)=\"checkHasManyEntity()\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </div>\n        </mat-dialog-content>\n        \n        <mat-dialog-actions>\n            <div class=\"d-flex align-items-center gap-3\" style=\"margin-top: 10px;\">\n                <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n                    [disabled]=\"internalIsReadOnly || !isHasManyEntityValid || !isHasManyEntityDirty\"\n                    [matBadge]=\"hasManyValidationErrors.length\"\n                    [matBadgeHidden]=\"!hasManyValidationErrors.length\"\n                    (click)=\"dialogEditHasMany()\"\n                >\n                    {{metadataHasMany.tableData.editData.confirmButtonLabel}}\n                </button>\n                <ngx-mat-entity-tooltip *ngIf=\"hasManyValidationErrors.length\" [tooltipContent]=\"hasManyTooltipContent\"></ngx-mat-entity-tooltip>\n            </div>\n            <button type=\"button\" mat-raised-button class=\"cancel-button\" (click)=\"dialogCancelEditHasMany()\">\n                {{metadataHasMany.tableData.editData.cancelButtonLabel}}\n            </button>\n        </mat-dialog-actions>\n    </form>\n</ng-template>", styles: [".mdc-data-table__row:last-child .mdc-data-table__cell{border-bottom:1px solid rgba(0,0,0,.12)}.mat-dialog-title{padding:12px 20px;display:flex;justify-content:space-between;align-items:center}.mat-dialog-title div{font-size:var(--mdc-dialog-subhead-size, 14px);font-weight:var(--mdc-dialog-subhead-weight, 500)}.actions-container{display:flex;gap:10px}::ng-deep .mat-mdc-form-field-has-icon-suffix .mat-mdc-text-field-wrapper{padding-right:16px}::ng-deep .select-search-input{max-width:100%;margin-top:-8px;margin-bottom:8px}::ng-deep .select-search-input .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .mdc-dialog .mdc-dialog__content{padding:6px 20px!important}mat-dialog-actions{justify-content:space-between;align-items:center;padding-left:20px;padding-right:20px}mat-spinner{margin:10px auto}::ng-deep .mat-mdc-tab-body-wrapper{margin-left:-12px;margin-right:-12px}::ng-deep mat-tab-body{padding-top:10px;padding-left:12px;padding-right:12px}::ng-deep mat-tab-body .mat-mdc-tab-body-content{overflow:initial}::ng-deep .mat-mdc-form-field.mat-form-field-disabled label{color:#0009}::ng-deep .mat-mdc-form-field.mat-form-field-disabled input,::ng-deep .mat-mdc-form-field.mat-form-field-disabled textarea,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-select-disabled,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-select-value{color:#000!important}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-checkbox .mdc-checkbox__native-control[disabled]:not(:checked):not(:indeterminate):not([data-indeterminate=true])~.mdc-checkbox__background{border-color:#707070}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-checkbox .mdc-checkbox__native-control[disabled]:checked~.mdc-checkbox__background,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-checkbox .mdc-checkbox__native-control[disabled]:indeterminate~.mdc-checkbox__background,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-checkbox .mdc-checkbox__native-control[data-indeterminate=true][disabled]~.mdc-checkbox__background{background-color:#000}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-chip.mat-mdc-standard-chip.mat-mdc-chip-disabled{opacity:1}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-chip.mat-mdc-standard-chip.mat-mdc-chip-disabled button{opacity:.2}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-switch.mdc-switch--selected:disabled .mdc-switch__icons,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-switch.mdc-switch--unselected:disabled .mdc-switch__icons{opacity:1}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-switch.mdc-switch--selected:disabled .mdc-switch__handle:after,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-switch.mdc-switch--unselected:disabled .mdc-switch__handle:after{opacity:1;background:black}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-switch.mdc-switch--selected:disabled .mdc-switch__track,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-switch.mdc-switch--unselected:disabled .mdc-switch__track{opacity:.3}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-date-range-input-inner:disabled{color:#000}::ng-deep #slider.mat-mdc-slider.mdc-slider--disabled{opacity:1}::ng-deep #slider.mat-mdc-slider.mdc-slider--disabled .mdc-slider__input{cursor:default}::ng-deep #slider.mat-mdc-slider.mdc-slider--disabled mat-slider-visual-thumb .mat-mdc-slider,::ng-deep #slider.mat-mdc-slider.mdc-slider--disabled mat-slider-visual-thumb .mdc-slider__thumb:hover,::ng-deep #slider.mat-mdc-slider.mdc-slider--disabled mat-slider-visual-thumb .mdc-slider__thumb-knob{background-color:#000;border-color:#000}::ng-deep .mat-mdc-form-field .mat-mdc-slide-toggle{opacity:1}.entityArray .elevation-container{border-radius:5px;padding:15px;margin-bottom:15px;margin-top:15px}.entityArray .array-headline{padding-bottom:10px}.entityArray .buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px}.entityArray mat-table{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:25px}.entityArray .mat-column-select{flex:0 0 75px}.entityArray .enabled:hover{cursor:pointer}.entityArray .array-error{display:flex;align-items:center;justify-content:center;margin-top:-25.8px;border:1px solid #E0E0E0;background-color:#f8d3d7;color:#721c24;height:25.8px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.hasMany button{width:100%;height:56px;line-height:24px;font-size:16px}.hasMany .title{text-align:center}.hasMany .elevation-container{border-radius:5px;padding:5px;margin-bottom:15px}.hasMany .mat-column-select{flex:0 0 75px}.hasMany .enabled:hover{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: DisplayColumnValueComponent, selector: "display-column-value", inputs: ["entity", "ComponentClass"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i8.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i13.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i13.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i13.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i14.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: i15.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i6$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: i17.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i17.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i5$1.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i5$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }, { kind: "component", type: TooltipComponent, selector: "ngx-mat-entity-tooltip", inputs: ["tooltipContent"] }, { kind: "component", type: ArrayDateInputComponent, selector: "array-date-input" }, { kind: "component", type: ArrayDateRangeInputComponent, selector: "array-date-range-input" }, { kind: "component", type: ArrayDateTimeInputComponent, selector: "array-date-time-input" }, { kind: "component", type: ArrayStringAutocompleteChipsComponent, selector: "array-string-autocomplete-chips" }, { kind: "component", type: ArrayStringChipsInputComponent, selector: "array-string-chips-input" }, { kind: "component", type: BooleanCheckboxInputComponent, selector: "boolean-checkbox-input" }, { kind: "component", type: BooleanDropdownInputComponent, selector: "boolean-dropdown-input" }, { kind: "component", type: BooleanToggleInputComponent, selector: "boolean-toggle-input" }, { kind: "component", type: CustomInputComponent, selector: "custom-input" }, { kind: "component", type: DateInputComponent, selector: "date-input" }, { kind: "component", type: DateRangeInputComponent, selector: "date-range-input" }, { kind: "component", type: DateTimeInputComponent, selector: "date-time-input" }, { kind: "component", type: FileDefaultInputComponent, selector: "file-default-input" }, { kind: "component", type: FileImageInputComponent, selector: "file-image-input" }, { kind: "component", type: NgxMatEntityInputComponent, selector: "ngx-mat-entity-input", inputs: ["entity", "propertyKey", "getValidationErrorMessage", "hideOmitForCreate", "hideOmitForEdit", "validEmpty", "isReadOnly"], outputs: ["inputChangeEvent"] }, { kind: "component", type: NumberDropdownInputComponent, selector: "number-dropdown-input" }, { kind: "component", type: NumberInputComponent, selector: "number-input" }, { kind: "component", type: NumberSliderInputComponent, selector: "number-slider-input" }, { kind: "component", type: ReferencesManyInputComponent, selector: "references-many-input" }, { kind: "component", type: StringAutocompleteInputComponent, selector: "string-autocomplete-input" }, { kind: "component", type: StringDropdownInputComponent, selector: "string-dropdown-input" }, { kind: "component", type: StringInputComponent, selector: "string-input" }, { kind: "component", type: StringPasswordInputComponent, selector: "string-password-input" }, { kind: "component", type: StringTextboxInputComponent, selector: "string-textbox-input" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: NgxMatEntityInputComponent, selector: "ngx-mat-entity-input", inputs: { entity: "entity", propertyKey: "propertyKey", getValidationErrorMessage: "getValidationErrorMessage", hideOmitForCreate: "hideOmitForCreate", hideOmitForEdit: "hideOmitForEdit", validEmpty: "validEmpty", isReadOnly: "isReadOnly" }, outputs: { inputChangeEvent: "inputChangeEvent" }, viewQueries: [{ propertyName: "addArrayItemDialog", first: true, predicate: ["addArrayItemDialog"], descendants: true }, { propertyName: "editArrayItemDialog", first: true, predicate: ["editArrayItemDialog"], descendants: true }, { propertyName: "hasManyPaginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "hasManySort", first: true, predicate: MatSort, descendants: true }, { propertyName: "hasManyFilter", first: true, predicate: ["filter"], descendants: true, static: true }, { propertyName: "createHasManyDialog", first: true, predicate: ["createHasManyDialog"], descendants: true }, { propertyName: "editHasManyDialog", first: true, predicate: ["editHasManyDialog"], descendants: true }], ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n \n<!-- eslint-disable angular/cyclomatic-complexity -->\n<div *ngIf=\"!(hideOmitForCreate && metadata.omitForCreate) && !(hideOmitForEdit && metadata.omitForUpdate)\" [ngSwitch]=\"type\">\n    <!-------------------------------------------->\n    <!-----------------Strings-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.STRING\">\n        <string-input\n            [entity]=\"entity\"\n            [key]=\"propertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </string-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_TEXTBOX\">\n        <string-textbox-input\n            [entity]=\"entity\"\n            [key]=\"propertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </string-textbox-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_AUTOCOMPLETE\">\n        <string-autocomplete-input\n            [entity]=\"entity\"\n            [key]=\"propertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </string-autocomplete-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_DROPDOWN\">\n        <string-dropdown-input\n            [entity]=\"entity\"\n            [key]=\"propertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </string-dropdown-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_PASSWORD\">\n        <string-password-input\n            [entity]=\"entity\"\n            [key]=\"propertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </string-password-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-----------------Booleans------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_CHECKBOX\">\n        <boolean-checkbox-input\n            [entity]=\"entity\"\n            [key]=\"propertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </boolean-checkbox-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_TOGGLE\">\n        <boolean-toggle-input\n            [entity]=\"entity\"\n            [key]=\"propertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </boolean-toggle-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_DROPDOWN\">\n        <boolean-dropdown-input\n            [entity]=\"entity\"\n            [key]=\"propertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </boolean-dropdown-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!------------------Numbers------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.NUMBER\">\n        <number-input\n            [entity]=\"entity\"\n            [key]=\"propertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </number-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.NUMBER_DROPDOWN\">\n        <number-dropdown-input\n            [entity]=\"entity\"\n            [key]=\"propertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </number-dropdown-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.NUMBER_SLIDER\">\n        <number-slider-input\n            [entity]=\"entity\"\n            [key]=\"propertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </number-slider-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Array-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_DATE\">\n        <array-date-input\n            [entity]=\"entity\"\n            [key]=\"propertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </array-date-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_DATE_TIME\">\n        <array-date-time-input\n            [entity]=\"entity\"\n            [key]=\"propertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </array-date-time-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_DATE_RANGE\">\n        <array-date-range-input\n            [entity]=\"entity\"\n            [key]=\"propertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </array-date-range-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_STRING_CHIPS\">\n        <array-string-chips-input\n            [entity]=\"entity\"\n            [key]=\"propertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </array-string-chips-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_STRING_AUTOCOMPLETE_CHIPS\">\n        <array-string-autocomplete-chips\n            [entity]=\"entity\"\n            [key]=\"propertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </array-string-autocomplete-chips>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Dates-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.DATE\">\n        <date-input\n            [entity]=\"entity\"\n            [key]=\"propertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </date-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.DATE_RANGE\">\n        <date-range-input\n            [entity]=\"entity\"\n            [key]=\"propertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </date-range-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.DATE_TIME\">\n        <date-time-input\n            [entity]=\"entity\"\n            [key]=\"propertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </date-time-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Files-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.FILE_DEFAULT\">\n        <file-default-input\n            [entity]=\"entity\"\n            [key]=\"propertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </file-default-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.FILE_IMAGE\">\n        <file-image-input\n            [entity]=\"entity\"\n            [key]=\"propertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </file-image-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------- references many ------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.REFERENCES_MANY\">\n        <references-many-input\n            [entity]=\"entity\"\n            [key]=\"propertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </references-many-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Custom------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.CUSTOM\">\n        <custom-input\n            [entity]=\"entity\"\n            [key]=\"propertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </custom-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Object------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.OBJECT\">\n        <b>{{metadataDefaultObject.displayName}}</b>\n        <!-- iterates over the object properties -->\n        <mat-tab-group *ngIf=\"objectPropertyTabs.length > 1\" preserveContent>\n            <mat-tab *ngFor=\"let tab of objectPropertyTabs; let tI = index; trackBy: trackByFn\" [label]=\"tab.tabName\">\n                <div *ngFor=\"let row of tab.rows;\" class=\"row\">\n                    <ngx-mat-entity-input *ngFor=\"let key of row.keys; let rI = index; trackBy: trackByFn\"\n                        [entity]=\"objectProperty\"\n                        [propertyKey]=\"key\"\n                        [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                        [hideOmitForCreate]=\"hideOmitForCreate\"\n                        [hideOmitForEdit]=\"hideOmitForEdit\"\n                        [validEmpty]=\"!metadata.required(entity)\"\n                        [isReadOnly]=\"isPropertyReadOnly(objectProperty, key)\"\n                        [class]=\"EntityUtilities.getWidthClasses(objectProperty, key)\"\n                        (inputChangeEvent)=\"emitChange()\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </mat-tab>\n        </mat-tab-group>\n\n        <div *ngIf=\"objectPropertyTabs.length <= 1\">\n            <div *ngFor=\"let row of objectPropertyTabs[0].rows\" class=\"row\">\n                <ngx-mat-entity-input *ngFor=\"let key of row.keys; let i = index; trackBy: trackByFn\"\n                    [entity]=\"objectProperty\"\n                    [propertyKey]=\"key\"\n                    [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                    [hideOmitForCreate]=\"hideOmitForCreate\"\n                    [hideOmitForEdit]=\"hideOmitForEdit\"\n                    [validEmpty]=\"!metadata.required(entity)\"\n                    [isReadOnly]=\"isPropertyReadOnly(objectProperty, key)\"\n                    [class]=\"EntityUtilities.getWidthClasses(objectProperty, key)\"\n                    (inputChangeEvent)=\"emitChange()\"\n                >\n                </ngx-mat-entity-input>\n            </div>\n        </div>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------- references one ------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.REFERENCES_ONE\">\n        <mat-form-field>\n            <mat-label>{{metadata.displayName}}</mat-label>\n            <mat-select #inputModel=\"ngModel\"\n                [name]=\"referencesOneName\"\n                [disabled]=\"internalIsReadOnly\"\n                [required]=\"metadata.required(entity)\"\n                [(ngModel)]=\"entity[propertyKey]\"\n                (selectionChange)=\"setReferencesOneObject()\"\n                (opened)=\"selectSearchInput.focus()\"\n            >\n                <mat-form-field class=\"select-search-input\">\n                    <!-- eslint-disable-next-line angular/no-any -->\n                    <input #selectSearchInput matInput (keyup)=\"filterReferencesOneValues($any($event.target).value)\">\n                    <i matSuffix class=\"fas fa-search\"></i>\n                </mat-form-field>\n                <mat-option *ngIf=\"!metadata.required(entity)\">-</mat-option>\n                <mat-option *ngIf=\"shouldDisplayCurrentReferencesOneDropdownValue\" [value]=\"currentReferencesOneDropdownValue?.value\">{{currentReferencesOneDropdownValue?.displayName}}</mat-option>\n                <mat-option *ngFor=\"let value of filteredReferencesOneDropdownValues\" [value]=\"value.value\">{{value.displayName}}</mat-option>\n            </mat-select>\n            <mat-error>{{internalGetValidationErrorMessage(inputModel)}}</mat-error>\n        </mat-form-field>\n        <!-- iterates over the references one properties -->\n        <mat-tab-group *ngIf=\"referencesOnePropertyTabs && referencesOnePropertyTabs.length > 1\" preserveContent>\n            <mat-tab *ngFor=\"let tab of referencesOnePropertyTabs; let tI = index; trackBy: trackByFn\" [label]=\"tab.tabName\">\n                <div *ngFor=\"let row of tab.rows;\" class=\"row\">\n                    <ngx-mat-entity-input *ngFor=\"let key of row.keys; let rI = index; trackBy: trackByFn\"\n                        [entity]=\"referencesOneObject\"\n                        [propertyKey]=\"key\"\n                        [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                        [hideOmitForCreate]=\"hideOmitForCreate\"\n                        [hideOmitForEdit]=\"hideOmitForEdit\"\n                        [validEmpty]=\"!metadata.required(entity)\"\n                        [isReadOnly]=\"true\"\n                        [class]=\"EntityUtilities.getWidthClasses(referencesOneObject, key)\"\n                        (inputChangeEvent)=\"emitChange()\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </mat-tab>\n        </mat-tab-group>\n\n        <div *ngIf=\"referencesOnePropertyTabs && referencesOnePropertyTabs.length <= 1\">\n            <div *ngFor=\"let row of referencesOnePropertyTabs[0].rows\" class=\"row\">\n                <ngx-mat-entity-input *ngFor=\"let key of row.keys; let i = index; trackBy: trackByFn\"\n                    [entity]=\"referencesOneObject\"\n                    [propertyKey]=\"key\"\n                    [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                    [hideOmitForCreate]=\"hideOmitForCreate\"\n                    [hideOmitForEdit]=\"hideOmitForEdit\"\n                    [validEmpty]=\"!metadata.required(entity)\"\n                    [isReadOnly]=\"true\"\n                    [class]=\"EntityUtilities.getWidthClasses(referencesOneObject, key)\"\n                    (inputChangeEvent)=\"emitChange()\"\n                >\n                </ngx-mat-entity-input>\n            </div>\n        </div>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Array-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY\" class=\"entityArray\">\n        <div class=\"mat-elevation-z8 elevation-container\">\n            <div class=\"array-headline\">\n                <b>{{metadataEntityArray.displayName}}</b>\n            </div>\n            <div *ngIf=\"metadataEntityArray.createInline && !internalIsReadOnly\">\n                <mat-tab-group *ngIf=\"arrayItemInlineTabs.length > 1\" preserveContent>\n                    <mat-tab *ngFor=\"let tab of arrayItemInlineTabs\" [label]=\"tab.tabName\">\n                        <div *ngFor=\"let row of tab.rows\" class=\"row\">\n                            <ngx-mat-entity-input\n                                *ngFor=\"let key of row.keys; let i = index; trackBy: trackByFn\"\n                                [entity]=\"arrayItem\"\n                                [propertyKey]=\"key\"\n                                [hideOmitForCreate]=\"true\"\n                                [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                                [class]=\"EntityUtilities.getWidthClasses(arrayItem, key)\"\n                                (inputChangeEvent)=\"checkIsArrayItemValid()\"\n                            >\n                            </ngx-mat-entity-input>\n                        </div>\n                    </mat-tab>\n                </mat-tab-group>\n\n                <div *ngIf=\"arrayItemInlineTabs.length <= 1\">\n                    <div *ngFor=\"let row of arrayItemInlineTabs[0].rows\" class=\"row\">\n                        <ngx-mat-entity-input\n                            *ngFor=\"let key of row.keys; let i = index; trackBy: trackByFn\"\n                            [entity]=\"arrayItem\"\n                            [propertyKey]=\"key\"\n                            [hideOmitForCreate]=\"true\"\n                            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                            [class]=\"EntityUtilities.getWidthClasses(arrayItem, key)\"\n                            (inputChangeEvent)=\"checkIsArrayItemValid()\"\n                        >\n                        </ngx-mat-entity-input>\n                    </div>\n                </div>\n            </div>\n\n            <div *ngIf=\"!internalIsReadOnly\" class=\"buttons\">\n                <button type=\"button\" mat-raised-button\n                    [disabled]=\"metadataEntityArray.createInline && !isArrayItemValid\"\n                    (click)=\"addEntity()\">\n                    {{metadataEntityArray.addButtonLabel}}\n                </button>\n                <button type=\"button\" mat-raised-button\n                    [disabled]=\"!entityArraySelection.selected.length\"\n                    (click)=\"removeFromEntityArray()\">\n                    {{metadataEntityArray.removeButtonLabel}}\n                </button>\n            </div>\n        \n            <mat-table [dataSource]=\"entityArrayDataSource\">\n                <!-- select Column -->\n                <ng-container *ngIf=\"!internalIsReadOnly\" matColumnDef=\"select\">\n                    <mat-header-cell *matHeaderCellDef>\n                        <mat-checkbox\n                            [disabled]=\"!entityArrayDataSource.data.length\" [checked]=\"entityArraySelection.hasValue() && SelectionUtilities.isAllSelected(entityArraySelection, entityArrayDataSource)\"\n                            [indeterminate]=\"entityArraySelection.hasValue() && !SelectionUtilities.isAllSelected(entityArraySelection, entityArrayDataSource)\"\n                            (change)=\"$event ? SelectionUtilities.masterToggle(entityArraySelection, entityArrayDataSource) : null\">\n                        </mat-checkbox>\n                    </mat-header-cell>\n                    <mat-cell *matCellDef=\"let entity\">\n                        <mat-checkbox [checked]=\"entityArraySelection.isSelected(entity)\" (click)=\"$event.stopPropagation()\" (change)=\"$event ? entityArraySelection.toggle(entity) : null\"></mat-checkbox>\n                    </mat-cell>\n                </ng-container>\n            \n                <ng-container *ngFor=\"let dCol of metadataEntityArray.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n                    <mat-header-cell *matHeaderCellDef>\n                        {{dCol.displayName}}\n                    </mat-header-cell>\n                    <mat-cell *matCellDef=\"let entity\" [class.enabled]=\"!dCol.disableClick\" (click)=\"editArrayItem(entity, dCol)\">\n                        <ng-container *ngIf=\"dCol.Component\">\n                            <display-column-value [entity]=\"entity\" [ComponentClass]=\"dCol.Component\"></display-column-value>\n                        </ng-container>\n                        <ng-container *ngIf=\"!dCol.Component\">\n                            {{getDisplayColumnValue(entity, dCol)}}\n                        </ng-container>\n                    </mat-cell>\n                </ng-container>\n            \n                <mat-header-row *matHeaderRowDef=\"entityArrayDisplayedColumns\"></mat-header-row>\n                <mat-row *matRowDef=\"let row; columns: entityArrayDisplayedColumns\"></mat-row>\n            </mat-table>\n        \n            <div *ngIf=\"metadataEntityArray.required(entity) && !entityArrayDataSource.data.length\" class=\"array-error\">\n                {{metadataEntityArray.missingErrorMessage}}\n            </div>\n        </div>\n    </div>\n\n    <!-------------------------------------------->\n    <!------------------ has many ---------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.HAS_MANY\" class=\"hasMany\">\n        <h2 class=\"title\">{{metadataHasMany.tableData.baseData.title}}</h2>\n\n        <div class=\"row\">\n            <mat-form-field class=\"col-lg-8 col-md-6 col-sm-12\">\n                <mat-label>{{metadataHasMany.tableData.baseData.searchLabel}}</mat-label>\n                <input matInput (keyup)=\"applyHasManyFilter($event)\">\n            </mat-form-field>\n            <div\n                *ngIf=\"metadataHasMany.tableData.baseData.tableActions.length\"\n                [class.col-lg-2]=\"hasManyAllowCreate\"\n                [class.col-lg-4]=\"!hasManyAllowCreate\"\n                [class.col-md-3]=\"hasManyAllowCreate\"\n                [class.col-md-6]=\"!hasManyAllowCreate\"\n                [class.col-sm-6]=\"hasManyAllowCreate\"\n                [class.col-sm-12]=\"!hasManyAllowCreate\"\n            >\n                <button type=\"button\" class=\"actions-button\" mat-raised-button [matMenuTriggerFor]=\"menu\">\n                    {{metadataHasMany.tableData.baseData.tableActionsLabel}}\n                </button>\n            </div>\n            <mat-menu #menu=\"matMenu\">\n                <button *ngIf=\"metadataHasMany.tableData.baseData.allowJsonImport\" type=\"button\" mat-menu-item [disabled]=\"hasManyTableActionDisabled(hasManyImportAction)\" (click)=\"runHasManyTableAction(hasManyImportAction)\">\n                    {{hasManyImportAction.displayName}}\n                </button>\n                <button *ngFor=\"let action of metadataHasMany.tableData.baseData.tableActions\" type=\"button\" mat-menu-item [disabled]=\"hasManyTableActionDisabled(action)\" (click)=\"runHasManyTableAction(action)\">\n                    {{action.displayName}}\n                </button>\n            </mat-menu>\n\n            <div\n                *ngIf=\"hasManyAllowCreate\"\n                [class.col-lg-2]=\"metadataHasMany.tableData.baseData.tableActions.length\"\n                [class.col-lg-4]=\"!metadataHasMany.tableData.baseData.tableActions.length\"\n                [class.col-md-3]=\"metadataHasMany.tableData.baseData.tableActions.length\"\n                [class.col-md-6]=\"!metadataHasMany.tableData.baseData.tableActions.length\"\n                [class.col-sm-6]=\"metadataHasMany.tableData.baseData.tableActions.length\"\n                [class.col-sm-12]=\"!metadataHasMany.tableData.baseData.tableActions.length\"\n            >\n                <button type=\"button\" class=\"create-button\" mat-raised-button (click)=\"createHasManyEntity()\">\n                    {{metadataHasMany.tableData.baseData.createButtonLabel}}\n                </button>\n            </div>\n        </div>\n\n        <div class=\"mat-elevation-z8 elevation-container\">\n            <mat-table matSort [dataSource]=\"hasManyDataSource\">\n                <!-- select Column -->\n                <ng-container matColumnDef=\"select\">\n                    <mat-header-cell *matHeaderCellDef>\n                        <mat-checkbox [checked]=\"hasManySelection.hasValue() && SelectionUtilities.isAllSelected(hasManySelection, hasManyDataSource)\"\n                            [indeterminate]=\"hasManySelection.hasValue() && !SelectionUtilities.isAllSelected(hasManySelection, hasManyDataSource)\"\n                            (change)=\"$event ? SelectionUtilities.masterToggle(hasManySelection, hasManyDataSource) : null\">\n                        </mat-checkbox>\n                    </mat-header-cell>\n                    <mat-cell *matCellDef=\"let entity\" class=\"enabled\">\n                        <mat-checkbox [checked]=\"hasManySelection.isSelected(entity)\"\n                            (click)=\"$event.stopPropagation()\"\n                            (change)=\"$event ? hasManySelection.toggle(entity) : null\">\n                        </mat-checkbox>\n                    </mat-cell>\n                </ng-container>\n\n                <ng-container *ngFor=\"let dCol of metadataHasMany.tableData.baseData.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n                    <mat-header-cell *matHeaderCellDef mat-sort-header>\n                        {{dCol.displayName}}\n                    </mat-header-cell>\n                    <mat-cell *matCellDef=\"let entity\"\n                        [class.enabled]=\"!dCol.disableClick && (hasManyAllowUpdate(entity) || hasManyAllowRead(entity))\"\n                        (click)=\"editHasManyEntity(entity, dCol)\"\n                    >\n                        <ng-container *ngIf=\"dCol.Component\">\n                            <display-column-value [entity]=\"entity\" [ComponentClass]=\"dCol.Component\"></display-column-value>\n                        </ng-container>\n                        <ng-container *ngIf=\"!dCol.Component\">\n                            {{getDisplayColumnValue(entity, dCol)}}\n                        </ng-container>\n                    </mat-cell>\n                </ng-container>\n\n                <mat-header-row *matHeaderRowDef=\"displayedHasManyColumns\"></mat-header-row>\n                <mat-row *matRowDef=\"let row; columns: displayedHasManyColumns\"></mat-row>\n            </mat-table>\n\n            <mat-spinner *ngIf=\"hasManyIsLoading && metadataHasMany.tableData.baseData.displayLoadingSpinner\">\n            </mat-spinner>\n\n            <mat-paginator style=\"padding-top: 10px; padding-bottom: 10px;\" [length]=\"hasManyDataSource.filteredData.length\" [pageIndex]=\"0\" [pageSize]=\"10\" [pageSizeOptions]=\"[5, 10, 25, 50]\"></mat-paginator>\n        </div>\n    </div>\n\n    <div *ngSwitchDefault>ERROR: The type {{type}} is not known.</div>\n</div>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n<!--------------------------------------------------------->\n<!--------------------Add Array Item Dialog---------------->\n<!--------------------------------------------------------->\n<ng-template #addArrayItemDialog>\n    <div class=\"mat-dialog-title\">\n        <div>{{addArrayItemDialogData.title}}</div>\n    </div>\n\n    <form>\n        <mat-dialog-content>\n            <mat-tab-group *ngIf=\"arrayItemDialogTabs.length > 1\" preserveContent>\n                <mat-tab *ngFor=\"let tab of arrayItemDialogTabs\" [label]=\"tab.tabName\">\n                    <div *ngFor=\"let row of tab.rows\" class=\"row\">\n                        <ngx-mat-entity-input\n                            *ngFor=\"let key of row.keys\"\n                            [entity]=\"arrayItem\"\n                            [propertyKey]=\"key\"\n                            [hideOmitForCreate]=\"true\"\n                            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                            [class]=\"EntityUtilities.getWidthClasses(arrayItem, key)\"\n                            (inputChangeEvent)=\"checkIsArrayItemValid()\"\n                        >\n                        </ngx-mat-entity-input>\n                    </div>\n                </mat-tab>\n            </mat-tab-group>\n    \n            <div *ngIf=\"arrayItemDialogTabs.length <= 1\">\n                <div *ngFor=\"let row of arrayItemDialogTabs[0].rows\" class=\"row\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"arrayItem\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForCreate]=\"true\"\n                        [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                        [class]=\"EntityUtilities.getWidthClasses(arrayItem, key)\"\n                        (inputChangeEvent)=\"checkIsArrayItemValid()\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </div>\n        </mat-dialog-content>\n    \n        <mat-dialog-actions>\n            <div class=\"d-flex align-items-center gap-3\" style=\"margin-top: 10px;\">\n                <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n                    [disabled]=\"!isArrayItemValid\"\n                    [matBadge]=\"arrayItemValidationErrors.length\"\n                    [matBadgeHidden]=\"!arrayItemValidationErrors.length\"\n                    (click)=\"addArrayItem()\"\n                >\n                    {{addArrayItemDialogData.createButtonLabel}}\n                </button>\n                <ngx-mat-entity-tooltip *ngIf=\"arrayItemValidationErrors.length\" [tooltipContent]=\"arrayItemTooltipContent\"></ngx-mat-entity-tooltip>\n            </div>\n            <button type=\"button\" mat-raised-button class=\"cancel-button\" (click)=\"closeAddArrayItemDialog()\">\n                {{addArrayItemDialogData.cancelButtonLabel}}\n            </button>\n        </mat-dialog-actions>\n    </form>\n\n</ng-template>\n\n<!--------------------------------------------------------->\n<!--------------------Edit Array Item Dialog---------------->\n<!--------------------------------------------------------->\n<ng-template #editArrayItemDialog>\n    <div class=\"mat-dialog-title\">\n        <div>{{editArrayItemDialogData.title(arrayItemPriorChanges)}}</div>\n    </div>\n    \n    <form>\n        <mat-dialog-content>\n            <mat-tab-group *ngIf=\"arrayItemDialogTabs.length > 1\" preserveContent>\n                <mat-tab *ngFor=\"let tab of arrayItemDialogTabs\" [label]=\"tab.tabName\">\n                    <div *ngFor=\"let row of tab.rows\" class=\"row\">\n                        <ngx-mat-entity-input\n                            *ngFor=\"let key of row.keys\"\n                            [entity]=\"arrayItem\"\n                            [propertyKey]=\"key\"\n                            [hideOmitForEdit]=\"true\"\n                            [class]=\"EntityUtilities.getWidthClasses(arrayItem, key)\"\n                            [isReadOnly]=\"isPropertyReadOnly(arrayItem, key)\"\n                            (inputChangeEvent)=\"checkArrayItem()\"\n                        >\n                        </ngx-mat-entity-input>\n                    </div>\n                </mat-tab>\n            </mat-tab-group>\n        \n            <div *ngIf=\"arrayItemDialogTabs.length <= 1\">\n                <div *ngFor=\"let row of arrayItemDialogTabs[0].rows\" class=\"row\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"arrayItem\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForEdit]=\"true\"\n                        [class]=\"EntityUtilities.getWidthClasses(arrayItem, key)\"\n                        [isReadOnly]=\"isPropertyReadOnly(arrayItem, key)\"\n                        (inputChangeEvent)=\"checkArrayItem()\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </div>\n        </mat-dialog-content>\n        \n        <mat-dialog-actions>\n            <div class=\"d-flex align-items-center gap-3\" style=\"margin-top: 10px;\">\n                <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n                [disabled]=\"internalIsReadOnly || !isArrayItemValid || !isArrayItemDirty\"\n                    [matBadge]=\"arrayItemValidationErrors.length\"\n                    [matBadgeHidden]=\"!arrayItemValidationErrors.length\"\n                    (click)=\"saveArrayItem()\"\n                >\n                    {{editArrayItemDialogData.confirmButtonLabel}}\n                </button>\n                <ngx-mat-entity-tooltip *ngIf=\"arrayItemValidationErrors.length\" [tooltipContent]=\"arrayItemTooltipContent\"></ngx-mat-entity-tooltip>\n            </div>\n            <button type=\"button\" mat-raised-button class=\"cancel-button\" (click)=\"closeEditArrayItemDialog()\">\n                {{editArrayItemDialogData.cancelButtonLabel}}\n            </button>\n        </mat-dialog-actions>\n    </form>\n</ng-template>\n\n<!--------------------------------------------------------->\n<!--------------------Create Has Many Dialog---------------->\n<!--------------------------------------------------------->\n<ng-template #createHasManyDialog>\n    <div class=\"mat-dialog-title\">\n        <div>{{metadataHasMany.tableData.createData.title}}</div>\n    </div>\n    \n    <form>\n        <mat-dialog-content>\n            <mat-tab-group *ngIf=\"hasManyCreateTabs.length > 1\" preserveContent>\n                <mat-tab *ngFor=\"let tab of hasManyCreateTabs\" [label]=\"tab.tabName\">\n                    <div *ngFor=\"let row of tab.rows\" class=\"row\">\n                        <ngx-mat-entity-input\n                            *ngFor=\"let key of row.keys\"\n                            [entity]=\"hasManyEntity\"\n                            [propertyKey]=\"key\"\n                            [hideOmitForCreate]=\"true\"\n                            [class]=\"EntityUtilities.getWidthClasses(hasManyEntity, key)\"\n                            (inputChangeEvent)=\"checkIsHasManyEntityValid('create')\"\n                        >\n                        </ngx-mat-entity-input>\n                    </div>\n                </mat-tab>\n            </mat-tab-group>\n        \n            <div *ngIf=\"hasManyCreateTabs.length <= 1\">\n                <div *ngFor=\"let row of hasManyCreateTabs[0].rows\" class=\"row\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"hasManyEntity\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForCreate]=\"true\"\n                        [class]=\"EntityUtilities.getWidthClasses(hasManyEntity, key)\"\n                        (inputChangeEvent)=\"checkIsHasManyEntityValid('create')\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </div>\n        </mat-dialog-content>\n        \n        <mat-dialog-actions>\n            <div class=\"d-flex align-items-center gap-3\" style=\"margin-top: 10px;\">\n                <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n                    [disabled]=\"!isHasManyEntityValid\"\n                    [matBadge]=\"hasManyValidationErrors.length\"\n                    [matBadgeHidden]=\"!hasManyValidationErrors.length\"\n                    (click)=\"dialogCreateHasMany()\"\n                >\n                    {{metadataHasMany.tableData.createData.createButtonLabel}}\n                </button>\n                <ngx-mat-entity-tooltip *ngIf=\"hasManyValidationErrors.length\" [tooltipContent]=\"hasManyTooltipContent\"></ngx-mat-entity-tooltip>\n            </div>\n            <button type=\"button\" mat-raised-button class=\"cancel-button\" (click)=\"dialogCancelCreateHasMany()\">\n                {{metadataHasMany.tableData.createData.cancelButtonLabel}}\n            </button>\n        </mat-dialog-actions>\n    </form>\n    \n</ng-template>\n\n<!--------------------------------------------------------->\n<!--------------------Edit Has Many Dialog----------------->\n<!--------------------------------------------------------->\n<ng-template #editHasManyDialog>\n    <div class=\"mat-dialog-title\">\n        <div>{{metadataHasMany.tableData.editData.title(hasManyEntityPriorChanges)}}</div>\n\n        <div class=\"actions-container\">\n            <button *ngIf=\"metadataHasMany.tableData.editData.actions.length\" type=\"button\" mat-raised-button [matMenuTriggerFor]=\"menu\">\n                {{metadataHasMany.tableData.editData.actionsLabel}}\n            </button>\n            <mat-menu #menu=\"matMenu\">\n                <button *ngFor=\"let action of metadataHasMany.tableData.editData.actions\" type=\"button\" mat-menu-item [disabled]=\"hasManyEditActionDisabled(action)\" (click)=\"hasManyRunEditAction(action)\">\n                    {{action.displayName}}\n                </button>\n            </mat-menu>\n        \n            <button *ngIf=\"hasManyAllowDelete(hasManyEntity)\" type=\"button\" mat-raised-button color=\"warn\" class=\"delete-button\" tabindex=\"-1\" (click)=\"deleteHasManyEntity()\">\n                {{metadataHasMany.tableData.editData.deleteButtonLabel}}\n            </button>\n        </div>\n    </div>\n    \n    <form>\n        <mat-dialog-content>\n            <mat-tab-group *ngIf=\"hasManyUpdateTabs.length > 1\" preserveContent>\n                <mat-tab *ngFor=\"let tab of hasManyUpdateTabs\" [label]=\"tab.tabName\">\n                    <div *ngFor=\"let row of tab.rows\" class=\"row\">\n                        <ngx-mat-entity-input\n                            *ngFor=\"let key of row.keys\"\n                            [entity]=\"hasManyEntity\"\n                            [propertyKey]=\"key\"\n                            [hideOmitForEdit]=\"true\"\n                            [class]=\"EntityUtilities.getWidthClasses(hasManyEntity, key)\"\n                            [isReadOnly]=\"isPropertyReadOnly(hasManyEntity, key)\"\n                            (inputChangeEvent)=\"checkHasManyEntity()\"\n                        >\n                        </ngx-mat-entity-input>\n                    </div>\n                </mat-tab>\n            </mat-tab-group>\n        \n            <div *ngIf=\"hasManyUpdateTabs.length <= 1\">\n                <div *ngFor=\"let row of hasManyUpdateTabs[0].rows\" class=\"row\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"hasManyEntity\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForEdit]=\"true\"\n                        [class]=\"EntityUtilities.getWidthClasses(hasManyEntity, key)\"\n                        [isReadOnly]=\"isPropertyReadOnly(hasManyEntity, key)\"\n                        (inputChangeEvent)=\"checkHasManyEntity()\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </div>\n        </mat-dialog-content>\n        \n        <mat-dialog-actions>\n            <div class=\"d-flex align-items-center gap-3\" style=\"margin-top: 10px;\">\n                <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n                    [disabled]=\"internalIsReadOnly || !isHasManyEntityValid || !isHasManyEntityDirty\"\n                    [matBadge]=\"hasManyValidationErrors.length\"\n                    [matBadgeHidden]=\"!hasManyValidationErrors.length\"\n                    (click)=\"dialogEditHasMany()\"\n                >\n                    {{metadataHasMany.tableData.editData.confirmButtonLabel}}\n                </button>\n                <ngx-mat-entity-tooltip *ngIf=\"hasManyValidationErrors.length\" [tooltipContent]=\"hasManyTooltipContent\"></ngx-mat-entity-tooltip>\n            </div>\n            <button type=\"button\" mat-raised-button class=\"cancel-button\" (click)=\"dialogCancelEditHasMany()\">\n                {{metadataHasMany.tableData.editData.cancelButtonLabel}}\n            </button>\n        </mat-dialog-actions>\n    </form>\n</ng-template>", styles: [".mdc-data-table__row:last-child .mdc-data-table__cell{border-bottom:1px solid rgba(0,0,0,.12)}.mat-dialog-title{padding:12px 20px;display:flex;justify-content:space-between;align-items:center}.mat-dialog-title div{font-size:var(--mdc-dialog-subhead-size, 14px);font-weight:var(--mdc-dialog-subhead-weight, 500)}.actions-container{display:flex;gap:10px}::ng-deep .mat-mdc-form-field-has-icon-suffix .mat-mdc-text-field-wrapper{padding-right:16px}::ng-deep .select-search-input{max-width:100%;margin-top:-8px;margin-bottom:8px}::ng-deep .select-search-input .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .mdc-dialog .mdc-dialog__content{padding:6px 20px!important}mat-dialog-actions{justify-content:space-between;align-items:center;padding-left:20px;padding-right:20px}mat-spinner{margin:10px auto}::ng-deep .mat-mdc-tab-body-wrapper{margin-left:-12px;margin-right:-12px}::ng-deep mat-tab-body{padding-top:10px;padding-left:12px;padding-right:12px}::ng-deep mat-tab-body .mat-mdc-tab-body-content{overflow:initial}::ng-deep .mat-mdc-form-field.mat-form-field-disabled label{color:#0009}::ng-deep .mat-mdc-form-field.mat-form-field-disabled input,::ng-deep .mat-mdc-form-field.mat-form-field-disabled textarea,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-select-disabled,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-select-value{color:#000!important}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-checkbox .mdc-checkbox__native-control[disabled]:not(:checked):not(:indeterminate):not([data-indeterminate=true])~.mdc-checkbox__background{border-color:#707070}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-checkbox .mdc-checkbox__native-control[disabled]:checked~.mdc-checkbox__background,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-checkbox .mdc-checkbox__native-control[disabled]:indeterminate~.mdc-checkbox__background,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-checkbox .mdc-checkbox__native-control[data-indeterminate=true][disabled]~.mdc-checkbox__background{background-color:#000}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-chip.mat-mdc-standard-chip.mat-mdc-chip-disabled{opacity:1}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-chip.mat-mdc-standard-chip.mat-mdc-chip-disabled button{opacity:.2}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-switch.mdc-switch--selected:disabled .mdc-switch__icons,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-switch.mdc-switch--unselected:disabled .mdc-switch__icons{opacity:1}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-switch.mdc-switch--selected:disabled .mdc-switch__handle:after,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-switch.mdc-switch--unselected:disabled .mdc-switch__handle:after{opacity:1;background:black}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-switch.mdc-switch--selected:disabled .mdc-switch__track,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-switch.mdc-switch--unselected:disabled .mdc-switch__track{opacity:.3}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-date-range-input-inner:disabled{color:#000}::ng-deep #slider.mat-mdc-slider.mdc-slider--disabled{opacity:1}::ng-deep #slider.mat-mdc-slider.mdc-slider--disabled .mdc-slider__input{cursor:default}::ng-deep #slider.mat-mdc-slider.mdc-slider--disabled mat-slider-visual-thumb .mat-mdc-slider,::ng-deep #slider.mat-mdc-slider.mdc-slider--disabled mat-slider-visual-thumb .mdc-slider__thumb:hover,::ng-deep #slider.mat-mdc-slider.mdc-slider--disabled mat-slider-visual-thumb .mdc-slider__thumb-knob{background-color:#000;border-color:#000}::ng-deep .mat-mdc-form-field .mat-mdc-slide-toggle{opacity:1}.entityArray .elevation-container{border-radius:5px;padding:15px;margin-bottom:15px;margin-top:15px}.entityArray .array-headline{padding-bottom:10px}.entityArray .buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px;flex-wrap:wrap;gap:10px}.entityArray .buttons button{flex-grow:1}.entityArray mat-table{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:5px}.entityArray .mat-column-select{flex:0 0 48px;padding-left:0;padding-right:0;justify-content:center}.entityArray .enabled:hover{cursor:pointer}.entityArray .array-error{display:flex;align-items:center;justify-content:center;margin-top:-6px;border:1px solid #E0E0E0;background-color:#f8d3d7;color:#721c24;height:-moz-fit-content;height:fit-content;padding-left:4px;padding-right:4px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.hasMany button{width:100%;height:56px;line-height:24px;font-size:16px}.hasMany .title{text-align:center}.hasMany .elevation-container{border-radius:5px;padding:5px;margin-bottom:15px}.hasMany .mat-column-select{flex:0 0 48px;padding-left:0;padding-right:0;justify-content:center}.hasMany .enabled:hover{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: DisplayColumnValueComponent, selector: "display-column-value", inputs: ["entity", "ComponentClass"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i8.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i13.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i13.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i13.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i14.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: i15.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i6$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: i17.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i17.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i5$1.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i5$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }, { kind: "component", type: TooltipComponent, selector: "ngx-mat-entity-tooltip", inputs: ["tooltipContent"] }, { kind: "component", type: ArrayDateInputComponent, selector: "array-date-input" }, { kind: "component", type: ArrayDateRangeInputComponent, selector: "array-date-range-input" }, { kind: "component", type: ArrayDateTimeInputComponent, selector: "array-date-time-input" }, { kind: "component", type: ArrayStringAutocompleteChipsComponent, selector: "array-string-autocomplete-chips" }, { kind: "component", type: ArrayStringChipsInputComponent, selector: "array-string-chips-input" }, { kind: "component", type: BooleanCheckboxInputComponent, selector: "boolean-checkbox-input" }, { kind: "component", type: BooleanDropdownInputComponent, selector: "boolean-dropdown-input" }, { kind: "component", type: BooleanToggleInputComponent, selector: "boolean-toggle-input" }, { kind: "component", type: CustomInputComponent, selector: "custom-input" }, { kind: "component", type: DateInputComponent, selector: "date-input" }, { kind: "component", type: DateRangeInputComponent, selector: "date-range-input" }, { kind: "component", type: DateTimeInputComponent, selector: "date-time-input" }, { kind: "component", type: FileDefaultInputComponent, selector: "file-default-input" }, { kind: "component", type: FileImageInputComponent, selector: "file-image-input" }, { kind: "component", type: NgxMatEntityInputComponent, selector: "ngx-mat-entity-input", inputs: ["entity", "propertyKey", "getValidationErrorMessage", "hideOmitForCreate", "hideOmitForEdit", "validEmpty", "isReadOnly"], outputs: ["inputChangeEvent"] }, { kind: "component", type: NumberDropdownInputComponent, selector: "number-dropdown-input" }, { kind: "component", type: NumberInputComponent, selector: "number-input" }, { kind: "component", type: NumberSliderInputComponent, selector: "number-slider-input" }, { kind: "component", type: ReferencesManyInputComponent, selector: "references-many-input" }, { kind: "component", type: StringAutocompleteInputComponent, selector: "string-autocomplete-input" }, { kind: "component", type: StringDropdownInputComponent, selector: "string-dropdown-input" }, { kind: "component", type: StringInputComponent, selector: "string-input" }, { kind: "component", type: StringPasswordInputComponent, selector: "string-password-input" }, { kind: "component", type: StringTextboxInputComponent, selector: "string-textbox-input" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: NgxMatEntityInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-mat-entity-input', template: "<!-- eslint-disable angular/no-call-expression -->\n \n<!-- eslint-disable angular/cyclomatic-complexity -->\n<div *ngIf=\"!(hideOmitForCreate && metadata.omitForCreate) && !(hideOmitForEdit && metadata.omitForUpdate)\" [ngSwitch]=\"type\">\n    <!-------------------------------------------->\n    <!-----------------Strings-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.STRING\">\n        <string-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </string-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_TEXTBOX\">\n        <string-textbox-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </string-textbox-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_AUTOCOMPLETE\">\n        <string-autocomplete-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </string-autocomplete-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_DROPDOWN\">\n        <string-dropdown-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </string-dropdown-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_PASSWORD\">\n        <string-password-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </string-password-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-----------------Booleans------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_CHECKBOX\">\n        <boolean-checkbox-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </boolean-checkbox-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_TOGGLE\">\n        <boolean-toggle-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </boolean-toggle-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_DROPDOWN\">\n        <boolean-dropdown-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </boolean-dropdown-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!------------------Numbers------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.NUMBER\">\n        <number-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </number-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.NUMBER_DROPDOWN\">\n        <number-dropdown-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </number-dropdown-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.NUMBER_SLIDER\">\n        <number-slider-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </number-slider-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Array-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_DATE\">\n        <array-date-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </array-date-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_DATE_TIME\">\n        <array-date-time-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </array-date-time-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_DATE_RANGE\">\n        <array-date-range-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </array-date-range-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_STRING_CHIPS\">\n        <array-string-chips-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </array-string-chips-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_STRING_AUTOCOMPLETE_CHIPS\">\n        <array-string-autocomplete-chips\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </array-string-autocomplete-chips>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Dates-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.DATE\">\n        <date-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </date-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.DATE_RANGE\">\n        <date-range-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </date-range-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.DATE_TIME\">\n        <date-time-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </date-time-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Files-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.FILE_DEFAULT\">\n        <file-default-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </file-default-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.FILE_IMAGE\">\n        <file-image-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </file-image-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------- references many ------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.REFERENCES_MANY\">\n        <references-many-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </references-many-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Custom------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.CUSTOM\">\n        <custom-input\n            [entity]=\"internalEntity\"\n            [key]=\"internalPropertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </custom-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Object------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.OBJECT\">\n        <b>{{metadataDefaultObject.displayName}}</b>\n        <!-- iterates over the object properties -->\n        <mat-tab-group *ngIf=\"objectPropertyTabs.length > 1\" preserveContent>\n            <mat-tab *ngFor=\"let tab of objectPropertyTabs; let tI = index; trackBy: trackByFn\" [label]=\"tab.tabName\">\n                <div *ngFor=\"let row of tab.rows;\" class=\"row\">\n                    <ngx-mat-entity-input *ngFor=\"let key of row.keys; let rI = index; trackBy: trackByFn\"\n                        [entity]=\"objectProperty\"\n                        [propertyKey]=\"key\"\n                        [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                        [hideOmitForCreate]=\"hideOmitForCreate\"\n                        [hideOmitForEdit]=\"hideOmitForEdit\"\n                        [validEmpty]=\"!metadata.required(entity)\"\n                        [isReadOnly]=\"isPropertyReadOnly(objectProperty, key)\"\n                        [class]=\"EntityUtilities.getWidthClasses(objectProperty, key)\"\n                        (inputChangeEvent)=\"emitChange()\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </mat-tab>\n        </mat-tab-group>\n\n        <div *ngIf=\"objectPropertyTabs.length <= 1\">\n            <div *ngFor=\"let row of objectPropertyTabs[0].rows\" class=\"row\">\n                <ngx-mat-entity-input *ngFor=\"let key of row.keys; let i = index; trackBy: trackByFn\"\n                    [entity]=\"objectProperty\"\n                    [propertyKey]=\"key\"\n                    [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                    [hideOmitForCreate]=\"hideOmitForCreate\"\n                    [hideOmitForEdit]=\"hideOmitForEdit\"\n                    [validEmpty]=\"!metadata.required(entity)\"\n                    [isReadOnly]=\"isPropertyReadOnly(objectProperty, key)\"\n                    [class]=\"EntityUtilities.getWidthClasses(objectProperty, key)\"\n                    (inputChangeEvent)=\"emitChange()\"\n                >\n                </ngx-mat-entity-input>\n            </div>\n        </div>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------- references one ------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.REFERENCES_ONE\">\n        <mat-form-field>\n            <mat-label>{{metadata.displayName}}</mat-label>\n            <mat-select #inputModel=\"ngModel\"\n                [name]=\"referencesOneName\"\n                [disabled]=\"internalIsReadOnly\"\n                [required]=\"metadata.required(entity)\"\n                [(ngModel)]=\"internalEntity[internalPropertyKey]\"\n                (selectionChange)=\"setReferencesOneObject()\"\n                (opened)=\"selectSearchInput.focus()\"\n            >\n                <mat-form-field class=\"select-search-input\">\n                    <!-- eslint-disable-next-line angular/no-any -->\n                    <input #selectSearchInput matInput (keyup)=\"filterReferencesOneValues($any($event.target).value)\">\n                    <i matSuffix class=\"fas fa-search\"></i>\n                </mat-form-field>\n                <mat-option *ngIf=\"!metadata.required(entity)\">-</mat-option>\n                <mat-option *ngIf=\"shouldDisplayCurrentReferencesOneDropdownValue\" [value]=\"currentReferencesOneDropdownValue?.value\">{{currentReferencesOneDropdownValue?.displayName}}</mat-option>\n                <mat-option *ngFor=\"let value of filteredReferencesOneDropdownValues\" [value]=\"value.value\">{{value.displayName}}</mat-option>\n            </mat-select>\n            <mat-error>{{internalGetValidationErrorMessage(inputModel)}}</mat-error>\n        </mat-form-field>\n        <!-- iterates over the references one properties -->\n        <mat-tab-group *ngIf=\"referencesOnePropertyTabs && referencesOnePropertyTabs.length > 1\" preserveContent>\n            <mat-tab *ngFor=\"let tab of referencesOnePropertyTabs; let tI = index; trackBy: trackByFn\" [label]=\"tab.tabName\">\n                <div *ngFor=\"let row of tab.rows;\" class=\"row\">\n                    <ngx-mat-entity-input *ngFor=\"let key of row.keys; let rI = index; trackBy: trackByFn\"\n                        [entity]=\"referencesOneObject\"\n                        [propertyKey]=\"key\"\n                        [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                        [hideOmitForCreate]=\"hideOmitForCreate\"\n                        [hideOmitForEdit]=\"hideOmitForEdit\"\n                        [validEmpty]=\"!metadata.required(entity)\"\n                        [isReadOnly]=\"true\"\n                        [class]=\"EntityUtilities.getWidthClasses(referencesOneObject, key)\"\n                        (inputChangeEvent)=\"emitChange()\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </mat-tab>\n        </mat-tab-group>\n\n        <div *ngIf=\"referencesOnePropertyTabs && referencesOnePropertyTabs.length <= 1\">\n            <div *ngFor=\"let row of referencesOnePropertyTabs[0].rows\" class=\"row\">\n                <ngx-mat-entity-input *ngFor=\"let key of row.keys; let i = index; trackBy: trackByFn\"\n                    [entity]=\"referencesOneObject\"\n                    [propertyKey]=\"key\"\n                    [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                    [hideOmitForCreate]=\"hideOmitForCreate\"\n                    [hideOmitForEdit]=\"hideOmitForEdit\"\n                    [validEmpty]=\"!metadata.required(entity)\"\n                    [isReadOnly]=\"true\"\n                    [class]=\"EntityUtilities.getWidthClasses(referencesOneObject, key)\"\n                    (inputChangeEvent)=\"emitChange()\"\n                >\n                </ngx-mat-entity-input>\n            </div>\n        </div>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Array-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY\" class=\"entityArray\">\n        <div class=\"mat-elevation-z8 elevation-container\">\n            <div class=\"array-headline\">\n                <b>{{metadataEntityArray.displayName}}</b>\n            </div>\n            <div *ngIf=\"metadataEntityArray.createInline && !internalIsReadOnly\">\n                <mat-tab-group *ngIf=\"arrayItemInlineTabs.length > 1\" preserveContent>\n                    <mat-tab *ngFor=\"let tab of arrayItemInlineTabs\" [label]=\"tab.tabName\">\n                        <div *ngFor=\"let row of tab.rows\" class=\"row\">\n                            <ngx-mat-entity-input\n                                *ngFor=\"let key of row.keys; let i = index; trackBy: trackByFn\"\n                                [entity]=\"arrayItem\"\n                                [propertyKey]=\"key\"\n                                [hideOmitForCreate]=\"true\"\n                                [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                                [class]=\"EntityUtilities.getWidthClasses(arrayItem, key)\"\n                                (inputChangeEvent)=\"checkIsArrayItemValid()\"\n                            >\n                            </ngx-mat-entity-input>\n                        </div>\n                    </mat-tab>\n                </mat-tab-group>\n\n                <div *ngIf=\"arrayItemInlineTabs.length <= 1\">\n                    <div *ngFor=\"let row of arrayItemInlineTabs[0].rows\" class=\"row\">\n                        <ngx-mat-entity-input\n                            *ngFor=\"let key of row.keys; let i = index; trackBy: trackByFn\"\n                            [entity]=\"arrayItem\"\n                            [propertyKey]=\"key\"\n                            [hideOmitForCreate]=\"true\"\n                            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                            [class]=\"EntityUtilities.getWidthClasses(arrayItem, key)\"\n                            (inputChangeEvent)=\"checkIsArrayItemValid()\"\n                        >\n                        </ngx-mat-entity-input>\n                    </div>\n                </div>\n            </div>\n\n            <div *ngIf=\"!internalIsReadOnly\" class=\"buttons\">\n                <button type=\"button\" mat-raised-button\n                    [disabled]=\"metadataEntityArray.createInline && !isArrayItemValid\"\n                    (click)=\"addEntity()\">\n                    {{metadataEntityArray.addButtonLabel}}\n                </button>\n                <button type=\"button\" mat-raised-button\n                    [disabled]=\"!entityArraySelection.selected.length\"\n                    (click)=\"removeFromEntityArray()\">\n                    {{metadataEntityArray.removeButtonLabel}}\n                </button>\n            </div>\n        \n            <mat-table [dataSource]=\"entityArrayDataSource\">\n                <!-- select Column -->\n                <ng-container *ngIf=\"!internalIsReadOnly\" matColumnDef=\"select\">\n                    <mat-header-cell *matHeaderCellDef>\n                        <mat-checkbox\n                            [disabled]=\"!entityArrayDataSource.data.length\" [checked]=\"entityArraySelection.hasValue() && SelectionUtilities.isAllSelected(entityArraySelection, entityArrayDataSource)\"\n                            [indeterminate]=\"entityArraySelection.hasValue() && !SelectionUtilities.isAllSelected(entityArraySelection, entityArrayDataSource)\"\n                            (change)=\"$event ? SelectionUtilities.masterToggle(entityArraySelection, entityArrayDataSource) : null\">\n                        </mat-checkbox>\n                    </mat-header-cell>\n                    <mat-cell *matCellDef=\"let entity\">\n                        <mat-checkbox [checked]=\"entityArraySelection.isSelected(entity)\" (click)=\"$event.stopPropagation()\" (change)=\"$event ? entityArraySelection.toggle(entity) : null\"></mat-checkbox>\n                    </mat-cell>\n                </ng-container>\n            \n                <ng-container *ngFor=\"let dCol of metadataEntityArray.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n                    <mat-header-cell *matHeaderCellDef>\n                        {{dCol.displayName}}\n                    </mat-header-cell>\n                    <mat-cell *matCellDef=\"let entity\" [class.enabled]=\"!dCol.disableClick\" (click)=\"editArrayItem(entity, dCol)\">\n                        <ng-container *ngIf=\"dCol.Component\">\n                            <display-column-value [entity]=\"entity\" [ComponentClass]=\"dCol.Component\"></display-column-value>\n                        </ng-container>\n                        <ng-container *ngIf=\"!dCol.Component\">\n                            {{getDisplayColumnValue(entity, dCol)}}\n                        </ng-container>\n                    </mat-cell>\n                </ng-container>\n            \n                <mat-header-row *matHeaderRowDef=\"entityArrayDisplayedColumns\"></mat-header-row>\n                <mat-row *matRowDef=\"let row; columns: entityArrayDisplayedColumns\"></mat-row>\n            </mat-table>\n        \n            <div *ngIf=\"metadataEntityArray.required(entity) && !entityArrayDataSource.data.length\" class=\"array-error\">\n                {{metadataEntityArray.missingErrorMessage}}\n            </div>\n        </div>\n    </div>\n\n    <!-------------------------------------------->\n    <!------------------ has many ---------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.HAS_MANY\" class=\"hasMany\">\n        <h2 class=\"title\">{{metadataHasMany.tableData.baseData.title}}</h2>\n\n        <div class=\"row\">\n            <mat-form-field class=\"col-lg-8 col-md-6 col-sm-12\">\n                <mat-label>{{metadataHasMany.tableData.baseData.searchLabel}}</mat-label>\n                <input matInput (keyup)=\"applyHasManyFilter($event)\">\n            </mat-form-field>\n            <div\n                *ngIf=\"metadataHasMany.tableData.baseData.tableActions.length\"\n                [class.col-lg-2]=\"hasManyAllowCreate\"\n                [class.col-lg-4]=\"!hasManyAllowCreate\"\n                [class.col-md-3]=\"hasManyAllowCreate\"\n                [class.col-md-6]=\"!hasManyAllowCreate\"\n                [class.col-sm-6]=\"hasManyAllowCreate\"\n                [class.col-sm-12]=\"!hasManyAllowCreate\"\n            >\n                <button type=\"button\" class=\"actions-button\" mat-raised-button [matMenuTriggerFor]=\"menu\">\n                    {{metadataHasMany.tableData.baseData.tableActionsLabel}}\n                </button>\n            </div>\n            <mat-menu #menu=\"matMenu\">\n                <button *ngIf=\"metadataHasMany.tableData.baseData.allowJsonImport\" type=\"button\" mat-menu-item [disabled]=\"hasManyTableActionDisabled(hasManyImportAction)\" (click)=\"runHasManyTableAction(hasManyImportAction)\">\n                    {{hasManyImportAction.displayName}}\n                </button>\n                <button *ngFor=\"let action of metadataHasMany.tableData.baseData.tableActions\" type=\"button\" mat-menu-item [disabled]=\"hasManyTableActionDisabled(action)\" (click)=\"runHasManyTableAction(action)\">\n                    {{action.displayName}}\n                </button>\n            </mat-menu>\n\n            <div\n                *ngIf=\"hasManyAllowCreate\"\n                [class.col-lg-2]=\"metadataHasMany.tableData.baseData.tableActions.length\"\n                [class.col-lg-4]=\"!metadataHasMany.tableData.baseData.tableActions.length\"\n                [class.col-md-3]=\"metadataHasMany.tableData.baseData.tableActions.length\"\n                [class.col-md-6]=\"!metadataHasMany.tableData.baseData.tableActions.length\"\n                [class.col-sm-6]=\"metadataHasMany.tableData.baseData.tableActions.length\"\n                [class.col-sm-12]=\"!metadataHasMany.tableData.baseData.tableActions.length\"\n            >\n                <button type=\"button\" class=\"create-button\" mat-raised-button (click)=\"createHasManyEntity()\">\n                    {{metadataHasMany.tableData.baseData.createButtonLabel}}\n                </button>\n            </div>\n        </div>\n\n        <div class=\"mat-elevation-z8 elevation-container\">\n            <mat-table matSort [dataSource]=\"hasManyDataSource\">\n                <!-- select Column -->\n                <ng-container matColumnDef=\"select\">\n                    <mat-header-cell *matHeaderCellDef>\n                        <mat-checkbox [checked]=\"hasManySelection.hasValue() && SelectionUtilities.isAllSelected(hasManySelection, hasManyDataSource)\"\n                            [indeterminate]=\"hasManySelection.hasValue() && !SelectionUtilities.isAllSelected(hasManySelection, hasManyDataSource)\"\n                            (change)=\"$event ? SelectionUtilities.masterToggle(hasManySelection, hasManyDataSource) : null\">\n                        </mat-checkbox>\n                    </mat-header-cell>\n                    <mat-cell *matCellDef=\"let entity\" class=\"enabled\">\n                        <mat-checkbox [checked]=\"hasManySelection.isSelected(entity)\"\n                            (click)=\"$event.stopPropagation()\"\n                            (change)=\"$event ? hasManySelection.toggle(entity) : null\">\n                        </mat-checkbox>\n                    </mat-cell>\n                </ng-container>\n\n                <ng-container *ngFor=\"let dCol of metadataHasMany.tableData.baseData.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n                    <mat-header-cell *matHeaderCellDef mat-sort-header>\n                        {{dCol.displayName}}\n                    </mat-header-cell>\n                    <mat-cell *matCellDef=\"let entity\"\n                        [class.enabled]=\"!dCol.disableClick && (hasManyAllowUpdate(entity) || hasManyAllowRead(entity))\"\n                        (click)=\"editHasManyEntity(entity, dCol)\"\n                    >\n                        <ng-container *ngIf=\"dCol.Component\">\n                            <display-column-value [entity]=\"entity\" [ComponentClass]=\"dCol.Component\"></display-column-value>\n                        </ng-container>\n                        <ng-container *ngIf=\"!dCol.Component\">\n                            {{getDisplayColumnValue(entity, dCol)}}\n                        </ng-container>\n                    </mat-cell>\n                </ng-container>\n\n                <mat-header-row *matHeaderRowDef=\"displayedHasManyColumns\"></mat-header-row>\n                <mat-row *matRowDef=\"let row; columns: displayedHasManyColumns\"></mat-row>\n            </mat-table>\n\n            <mat-spinner *ngIf=\"hasManyIsLoading && metadataHasMany.tableData.baseData.displayLoadingSpinner\">\n            </mat-spinner>\n\n            <mat-paginator [length]=\"hasManyDataSource.filteredData.length\" [pageIndex]=\"0\" [pageSize]=\"10\" [pageSizeOptions]=\"[5, 10, 25, 50]\"></mat-paginator>\n        </div>\n    </div>\n\n    <div *ngSwitchDefault>ERROR: The type {{type}} is not known.</div>\n</div>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n<!--------------------------------------------------------->\n<!--------------------Add Array Item Dialog---------------->\n<!--------------------------------------------------------->\n<ng-template #addArrayItemDialog>\n    <div class=\"mat-dialog-title\">\n        <div>{{addArrayItemDialogData.title}}</div>\n    </div>\n\n    <form>\n        <mat-dialog-content>\n            <mat-tab-group *ngIf=\"arrayItemDialogTabs.length > 1\" preserveContent>\n                <mat-tab *ngFor=\"let tab of arrayItemDialogTabs\" [label]=\"tab.tabName\">\n                    <div *ngFor=\"let row of tab.rows\" class=\"row\">\n                        <ngx-mat-entity-input\n                            *ngFor=\"let key of row.keys\"\n                            [entity]=\"arrayItem\"\n                            [propertyKey]=\"key\"\n                            [hideOmitForCreate]=\"true\"\n                            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                            [class]=\"EntityUtilities.getWidthClasses(arrayItem, key)\"\n                            (inputChangeEvent)=\"checkIsArrayItemValid()\"\n                        >\n                        </ngx-mat-entity-input>\n                    </div>\n                </mat-tab>\n            </mat-tab-group>\n    \n            <div *ngIf=\"arrayItemDialogTabs.length <= 1\">\n                <div *ngFor=\"let row of arrayItemDialogTabs[0].rows\" class=\"row\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"arrayItem\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForCreate]=\"true\"\n                        [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                        [class]=\"EntityUtilities.getWidthClasses(arrayItem, key)\"\n                        (inputChangeEvent)=\"checkIsArrayItemValid()\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </div>\n        </mat-dialog-content>\n    \n        <mat-dialog-actions>\n            <div class=\"d-flex align-items-center gap-3\" style=\"margin-top: 10px;\">\n                <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n                    [disabled]=\"!isArrayItemValid\"\n                    [matBadge]=\"arrayItemValidationErrors.length\"\n                    [matBadgeHidden]=\"!arrayItemValidationErrors.length\"\n                    (click)=\"addArrayItem()\"\n                >\n                    {{addArrayItemDialogData.createButtonLabel}}\n                </button>\n                <ngx-mat-entity-tooltip *ngIf=\"arrayItemValidationErrors.length\" [tooltipContent]=\"arrayItemTooltipContent\"></ngx-mat-entity-tooltip>\n            </div>\n            <button type=\"button\" mat-raised-button class=\"cancel-button\" (click)=\"closeAddArrayItemDialog()\">\n                {{addArrayItemDialogData.cancelButtonLabel}}\n            </button>\n        </mat-dialog-actions>\n    </form>\n\n</ng-template>\n\n<!--------------------------------------------------------->\n<!--------------------Edit Array Item Dialog---------------->\n<!--------------------------------------------------------->\n<ng-template #editArrayItemDialog>\n    <div class=\"mat-dialog-title\">\n        <div>{{editArrayItemDialogData.title(arrayItemPriorChanges)}}</div>\n    </div>\n    \n    <form>\n        <mat-dialog-content>\n            <mat-tab-group *ngIf=\"arrayItemDialogTabs.length > 1\" preserveContent>\n                <mat-tab *ngFor=\"let tab of arrayItemDialogTabs\" [label]=\"tab.tabName\">\n                    <div *ngFor=\"let row of tab.rows\" class=\"row\">\n                        <ngx-mat-entity-input\n                            *ngFor=\"let key of row.keys\"\n                            [entity]=\"arrayItem\"\n                            [propertyKey]=\"key\"\n                            [hideOmitForEdit]=\"true\"\n                            [class]=\"EntityUtilities.getWidthClasses(arrayItem, key)\"\n                            [isReadOnly]=\"isPropertyReadOnly(arrayItem, key)\"\n                            (inputChangeEvent)=\"checkArrayItem()\"\n                        >\n                        </ngx-mat-entity-input>\n                    </div>\n                </mat-tab>\n            </mat-tab-group>\n        \n            <div *ngIf=\"arrayItemDialogTabs.length <= 1\">\n                <div *ngFor=\"let row of arrayItemDialogTabs[0].rows\" class=\"row\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"arrayItem\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForEdit]=\"true\"\n                        [class]=\"EntityUtilities.getWidthClasses(arrayItem, key)\"\n                        [isReadOnly]=\"isPropertyReadOnly(arrayItem, key)\"\n                        (inputChangeEvent)=\"checkArrayItem()\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </div>\n        </mat-dialog-content>\n        \n        <mat-dialog-actions>\n            <div class=\"d-flex align-items-center gap-3\" style=\"margin-top: 10px;\">\n                <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n                [disabled]=\"internalIsReadOnly || !isArrayItemValid || !isArrayItemDirty\"\n                    [matBadge]=\"arrayItemValidationErrors.length\"\n                    [matBadgeHidden]=\"!arrayItemValidationErrors.length\"\n                    (click)=\"saveArrayItem()\"\n                >\n                    {{editArrayItemDialogData.confirmButtonLabel}}\n                </button>\n                <ngx-mat-entity-tooltip *ngIf=\"arrayItemValidationErrors.length\" [tooltipContent]=\"arrayItemTooltipContent\"></ngx-mat-entity-tooltip>\n            </div>\n            <button type=\"button\" mat-raised-button class=\"cancel-button\" (click)=\"closeEditArrayItemDialog()\">\n                {{editArrayItemDialogData.cancelButtonLabel}}\n            </button>\n        </mat-dialog-actions>\n    </form>\n</ng-template>\n\n<!--------------------------------------------------------->\n<!--------------------Create Has Many Dialog---------------->\n<!--------------------------------------------------------->\n<ng-template #createHasManyDialog>\n    <div class=\"mat-dialog-title\">\n        <div>{{metadataHasMany.tableData.createData.title}}</div>\n    </div>\n    \n    <form>\n        <mat-dialog-content>\n            <mat-tab-group *ngIf=\"hasManyCreateTabs.length > 1\" preserveContent>\n                <mat-tab *ngFor=\"let tab of hasManyCreateTabs\" [label]=\"tab.tabName\">\n                    <div *ngFor=\"let row of tab.rows\" class=\"row\">\n                        <ngx-mat-entity-input\n                            *ngFor=\"let key of row.keys\"\n                            [entity]=\"hasManyEntity\"\n                            [propertyKey]=\"key\"\n                            [hideOmitForCreate]=\"true\"\n                            [class]=\"EntityUtilities.getWidthClasses(hasManyEntity, key)\"\n                            (inputChangeEvent)=\"checkIsHasManyEntityValid('create')\"\n                        >\n                        </ngx-mat-entity-input>\n                    </div>\n                </mat-tab>\n            </mat-tab-group>\n        \n            <div *ngIf=\"hasManyCreateTabs.length <= 1\">\n                <div *ngFor=\"let row of hasManyCreateTabs[0].rows\" class=\"row\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"hasManyEntity\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForCreate]=\"true\"\n                        [class]=\"EntityUtilities.getWidthClasses(hasManyEntity, key)\"\n                        (inputChangeEvent)=\"checkIsHasManyEntityValid('create')\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </div>\n        </mat-dialog-content>\n        \n        <mat-dialog-actions>\n            <div class=\"d-flex align-items-center gap-3\" style=\"margin-top: 10px;\">\n                <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n                    [disabled]=\"!isHasManyEntityValid\"\n                    [matBadge]=\"hasManyValidationErrors.length\"\n                    [matBadgeHidden]=\"!hasManyValidationErrors.length\"\n                    (click)=\"dialogCreateHasMany()\"\n                >\n                    {{metadataHasMany.tableData.createData.createButtonLabel}}\n                </button>\n                <ngx-mat-entity-tooltip *ngIf=\"hasManyValidationErrors.length\" [tooltipContent]=\"hasManyTooltipContent\"></ngx-mat-entity-tooltip>\n            </div>\n            <button type=\"button\" mat-raised-button class=\"cancel-button\" (click)=\"dialogCancelCreateHasMany()\">\n                {{metadataHasMany.tableData.createData.cancelButtonLabel}}\n            </button>\n        </mat-dialog-actions>\n    </form>\n    \n</ng-template>\n\n<!--------------------------------------------------------->\n<!--------------------Edit Has Many Dialog----------------->\n<!--------------------------------------------------------->\n<ng-template #editHasManyDialog>\n    <div class=\"mat-dialog-title\">\n        <div>{{metadataHasMany.tableData.editData.title(hasManyEntityPriorChanges)}}</div>\n\n        <div class=\"actions-container\">\n            <button *ngIf=\"metadataHasMany.tableData.editData.actions.length\" type=\"button\" mat-raised-button [matMenuTriggerFor]=\"menu\">\n                {{metadataHasMany.tableData.editData.actionsLabel}}\n            </button>\n            <mat-menu #menu=\"matMenu\">\n                <button *ngFor=\"let action of metadataHasMany.tableData.editData.actions\" type=\"button\" mat-menu-item [disabled]=\"hasManyEditActionDisabled(action)\" (click)=\"hasManyRunEditAction(action)\">\n                    {{action.displayName}}\n                </button>\n            </mat-menu>\n        \n            <button *ngIf=\"hasManyAllowDelete(hasManyEntity)\" type=\"button\" mat-raised-button color=\"warn\" class=\"delete-button\" tabindex=\"-1\" (click)=\"deleteHasManyEntity()\">\n                {{metadataHasMany.tableData.editData.deleteButtonLabel}}\n            </button>\n        </div>\n    </div>\n    \n    <form>\n        <mat-dialog-content>\n            <mat-tab-group *ngIf=\"hasManyUpdateTabs.length > 1\" preserveContent>\n                <mat-tab *ngFor=\"let tab of hasManyUpdateTabs\" [label]=\"tab.tabName\">\n                    <div *ngFor=\"let row of tab.rows\" class=\"row\">\n                        <ngx-mat-entity-input\n                            *ngFor=\"let key of row.keys\"\n                            [entity]=\"hasManyEntity\"\n                            [propertyKey]=\"key\"\n                            [hideOmitForEdit]=\"true\"\n                            [class]=\"EntityUtilities.getWidthClasses(hasManyEntity, key)\"\n                            [isReadOnly]=\"isPropertyReadOnly(hasManyEntity, key)\"\n                            (inputChangeEvent)=\"checkHasManyEntity()\"\n                        >\n                        </ngx-mat-entity-input>\n                    </div>\n                </mat-tab>\n            </mat-tab-group>\n        \n            <div *ngIf=\"hasManyUpdateTabs.length <= 1\">\n                <div *ngFor=\"let row of hasManyUpdateTabs[0].rows\" class=\"row\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"hasManyEntity\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForEdit]=\"true\"\n                        [class]=\"EntityUtilities.getWidthClasses(hasManyEntity, key)\"\n                        [isReadOnly]=\"isPropertyReadOnly(hasManyEntity, key)\"\n                        (inputChangeEvent)=\"checkHasManyEntity()\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </div>\n        </mat-dialog-content>\n        \n        <mat-dialog-actions>\n            <div class=\"d-flex align-items-center gap-3\" style=\"margin-top: 10px;\">\n                <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n                    [disabled]=\"internalIsReadOnly || !isHasManyEntityValid || !isHasManyEntityDirty\"\n                    [matBadge]=\"hasManyValidationErrors.length\"\n                    [matBadgeHidden]=\"!hasManyValidationErrors.length\"\n                    (click)=\"dialogEditHasMany()\"\n                >\n                    {{metadataHasMany.tableData.editData.confirmButtonLabel}}\n                </button>\n                <ngx-mat-entity-tooltip *ngIf=\"hasManyValidationErrors.length\" [tooltipContent]=\"hasManyTooltipContent\"></ngx-mat-entity-tooltip>\n            </div>\n            <button type=\"button\" mat-raised-button class=\"cancel-button\" (click)=\"dialogCancelEditHasMany()\">\n                {{metadataHasMany.tableData.editData.cancelButtonLabel}}\n            </button>\n        </mat-dialog-actions>\n    </form>\n</ng-template>", styles: [".mdc-data-table__row:last-child .mdc-data-table__cell{border-bottom:1px solid rgba(0,0,0,.12)}.mat-dialog-title{padding:12px 20px;display:flex;justify-content:space-between;align-items:center}.mat-dialog-title div{font-size:var(--mdc-dialog-subhead-size, 14px);font-weight:var(--mdc-dialog-subhead-weight, 500)}.actions-container{display:flex;gap:10px}::ng-deep .mat-mdc-form-field-has-icon-suffix .mat-mdc-text-field-wrapper{padding-right:16px}::ng-deep .select-search-input{max-width:100%;margin-top:-8px;margin-bottom:8px}::ng-deep .select-search-input .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .mdc-dialog .mdc-dialog__content{padding:6px 20px!important}mat-dialog-actions{justify-content:space-between;align-items:center;padding-left:20px;padding-right:20px}mat-spinner{margin:10px auto}::ng-deep .mat-mdc-tab-body-wrapper{margin-left:-12px;margin-right:-12px}::ng-deep mat-tab-body{padding-top:10px;padding-left:12px;padding-right:12px}::ng-deep mat-tab-body .mat-mdc-tab-body-content{overflow:initial}::ng-deep .mat-mdc-form-field.mat-form-field-disabled label{color:#0009}::ng-deep .mat-mdc-form-field.mat-form-field-disabled input,::ng-deep .mat-mdc-form-field.mat-form-field-disabled textarea,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-select-disabled,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-select-value{color:#000!important}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-checkbox .mdc-checkbox__native-control[disabled]:not(:checked):not(:indeterminate):not([data-indeterminate=true])~.mdc-checkbox__background{border-color:#707070}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-checkbox .mdc-checkbox__native-control[disabled]:checked~.mdc-checkbox__background,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-checkbox .mdc-checkbox__native-control[disabled]:indeterminate~.mdc-checkbox__background,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-checkbox .mdc-checkbox__native-control[data-indeterminate=true][disabled]~.mdc-checkbox__background{background-color:#000}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-chip.mat-mdc-standard-chip.mat-mdc-chip-disabled{opacity:1}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-chip.mat-mdc-standard-chip.mat-mdc-chip-disabled button{opacity:.2}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-switch.mdc-switch--selected:disabled .mdc-switch__icons,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-switch.mdc-switch--unselected:disabled .mdc-switch__icons{opacity:1}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-switch.mdc-switch--selected:disabled .mdc-switch__handle:after,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-switch.mdc-switch--unselected:disabled .mdc-switch__handle:after{opacity:1;background:black}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-switch.mdc-switch--selected:disabled .mdc-switch__track,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-switch.mdc-switch--unselected:disabled .mdc-switch__track{opacity:.3}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-date-range-input-inner:disabled{color:#000}::ng-deep #slider.mat-mdc-slider.mdc-slider--disabled{opacity:1}::ng-deep #slider.mat-mdc-slider.mdc-slider--disabled .mdc-slider__input{cursor:default}::ng-deep #slider.mat-mdc-slider.mdc-slider--disabled mat-slider-visual-thumb .mat-mdc-slider,::ng-deep #slider.mat-mdc-slider.mdc-slider--disabled mat-slider-visual-thumb .mdc-slider__thumb:hover,::ng-deep #slider.mat-mdc-slider.mdc-slider--disabled mat-slider-visual-thumb .mdc-slider__thumb-knob{background-color:#000;border-color:#000}::ng-deep .mat-mdc-form-field .mat-mdc-slide-toggle{opacity:1}.entityArray .elevation-container{border-radius:5px;padding:15px;margin-bottom:15px;margin-top:15px}.entityArray .array-headline{padding-bottom:10px}.entityArray .buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px}.entityArray mat-table{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:25px}.entityArray .mat-column-select{flex:0 0 75px}.entityArray .enabled:hover{cursor:pointer}.entityArray .array-error{display:flex;align-items:center;justify-content:center;margin-top:-25.8px;border:1px solid #E0E0E0;background-color:#f8d3d7;color:#721c24;height:25.8px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.hasMany button{width:100%;height:56px;line-height:24px;font-size:16px}.hasMany .title{text-align:center}.hasMany .elevation-container{border-radius:5px;padding:5px;margin-bottom:15px}.hasMany .mat-column-select{flex:0 0 75px}.hasMany .enabled:hover{cursor:pointer}\n"] }]
+            args: [{ selector: 'ngx-mat-entity-input', template: "<!-- eslint-disable angular/no-call-expression -->\n \n<!-- eslint-disable angular/cyclomatic-complexity -->\n<div *ngIf=\"!(hideOmitForCreate && metadata.omitForCreate) && !(hideOmitForEdit && metadata.omitForUpdate)\" [ngSwitch]=\"type\">\n    <!-------------------------------------------->\n    <!-----------------Strings-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.STRING\">\n        <string-input\n            [entity]=\"entity\"\n            [key]=\"propertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </string-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_TEXTBOX\">\n        <string-textbox-input\n            [entity]=\"entity\"\n            [key]=\"propertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </string-textbox-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_AUTOCOMPLETE\">\n        <string-autocomplete-input\n            [entity]=\"entity\"\n            [key]=\"propertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </string-autocomplete-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_DROPDOWN\">\n        <string-dropdown-input\n            [entity]=\"entity\"\n            [key]=\"propertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </string-dropdown-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.STRING_PASSWORD\">\n        <string-password-input\n            [entity]=\"entity\"\n            [key]=\"propertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </string-password-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-----------------Booleans------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_CHECKBOX\">\n        <boolean-checkbox-input\n            [entity]=\"entity\"\n            [key]=\"propertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </boolean-checkbox-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_TOGGLE\">\n        <boolean-toggle-input\n            [entity]=\"entity\"\n            [key]=\"propertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </boolean-toggle-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_DROPDOWN\">\n        <boolean-dropdown-input\n            [entity]=\"entity\"\n            [key]=\"propertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </boolean-dropdown-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!------------------Numbers------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.NUMBER\">\n        <number-input\n            [entity]=\"entity\"\n            [key]=\"propertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </number-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.NUMBER_DROPDOWN\">\n        <number-dropdown-input\n            [entity]=\"entity\"\n            [key]=\"propertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </number-dropdown-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.NUMBER_SLIDER\">\n        <number-slider-input\n            [entity]=\"entity\"\n            [key]=\"propertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </number-slider-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Array-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_DATE\">\n        <array-date-input\n            [entity]=\"entity\"\n            [key]=\"propertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </array-date-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_DATE_TIME\">\n        <array-date-time-input\n            [entity]=\"entity\"\n            [key]=\"propertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </array-date-time-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_DATE_RANGE\">\n        <array-date-range-input\n            [entity]=\"entity\"\n            [key]=\"propertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </array-date-range-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_STRING_CHIPS\">\n        <array-string-chips-input\n            [entity]=\"entity\"\n            [key]=\"propertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </array-string-chips-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY_STRING_AUTOCOMPLETE_CHIPS\">\n        <array-string-autocomplete-chips\n            [entity]=\"entity\"\n            [key]=\"propertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </array-string-autocomplete-chips>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Dates-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.DATE\">\n        <date-input\n            [entity]=\"entity\"\n            [key]=\"propertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </date-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.DATE_RANGE\">\n        <date-range-input\n            [entity]=\"entity\"\n            [key]=\"propertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </date-range-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.DATE_TIME\">\n        <date-time-input\n            [entity]=\"entity\"\n            [key]=\"propertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </date-time-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Files-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.FILE_DEFAULT\">\n        <file-default-input\n            [entity]=\"entity\"\n            [key]=\"propertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </file-default-input>\n    </div>\n    <div *ngSwitchCase=\"DecoratorTypes.FILE_IMAGE\">\n        <file-image-input\n            [entity]=\"entity\"\n            [key]=\"propertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </file-image-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------- references many ------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.REFERENCES_MANY\">\n        <references-many-input\n            [entity]=\"entity\"\n            [key]=\"propertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </references-many-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Custom------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.CUSTOM\">\n        <custom-input\n            [entity]=\"entity\"\n            [key]=\"propertyKey\"\n            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n            [isReadOnly]=\"internalIsReadOnly\"\n            (inputChangeEvent)=\"emitChange()\"\n        >\n        </custom-input>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Object------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.OBJECT\">\n        <b>{{metadataDefaultObject.displayName}}</b>\n        <!-- iterates over the object properties -->\n        <mat-tab-group *ngIf=\"objectPropertyTabs.length > 1\" preserveContent>\n            <mat-tab *ngFor=\"let tab of objectPropertyTabs; let tI = index; trackBy: trackByFn\" [label]=\"tab.tabName\">\n                <div *ngFor=\"let row of tab.rows;\" class=\"row\">\n                    <ngx-mat-entity-input *ngFor=\"let key of row.keys; let rI = index; trackBy: trackByFn\"\n                        [entity]=\"objectProperty\"\n                        [propertyKey]=\"key\"\n                        [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                        [hideOmitForCreate]=\"hideOmitForCreate\"\n                        [hideOmitForEdit]=\"hideOmitForEdit\"\n                        [validEmpty]=\"!metadata.required(entity)\"\n                        [isReadOnly]=\"isPropertyReadOnly(objectProperty, key)\"\n                        [class]=\"EntityUtilities.getWidthClasses(objectProperty, key)\"\n                        (inputChangeEvent)=\"emitChange()\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </mat-tab>\n        </mat-tab-group>\n\n        <div *ngIf=\"objectPropertyTabs.length <= 1\">\n            <div *ngFor=\"let row of objectPropertyTabs[0].rows\" class=\"row\">\n                <ngx-mat-entity-input *ngFor=\"let key of row.keys; let i = index; trackBy: trackByFn\"\n                    [entity]=\"objectProperty\"\n                    [propertyKey]=\"key\"\n                    [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                    [hideOmitForCreate]=\"hideOmitForCreate\"\n                    [hideOmitForEdit]=\"hideOmitForEdit\"\n                    [validEmpty]=\"!metadata.required(entity)\"\n                    [isReadOnly]=\"isPropertyReadOnly(objectProperty, key)\"\n                    [class]=\"EntityUtilities.getWidthClasses(objectProperty, key)\"\n                    (inputChangeEvent)=\"emitChange()\"\n                >\n                </ngx-mat-entity-input>\n            </div>\n        </div>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------- references one ------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.REFERENCES_ONE\">\n        <mat-form-field>\n            <mat-label>{{metadata.displayName}}</mat-label>\n            <mat-select #inputModel=\"ngModel\"\n                [name]=\"referencesOneName\"\n                [disabled]=\"internalIsReadOnly\"\n                [required]=\"metadata.required(entity)\"\n                [(ngModel)]=\"entity[propertyKey]\"\n                (selectionChange)=\"setReferencesOneObject()\"\n                (opened)=\"selectSearchInput.focus()\"\n            >\n                <mat-form-field class=\"select-search-input\">\n                    <!-- eslint-disable-next-line angular/no-any -->\n                    <input #selectSearchInput matInput (keyup)=\"filterReferencesOneValues($any($event.target).value)\">\n                    <i matSuffix class=\"fas fa-search\"></i>\n                </mat-form-field>\n                <mat-option *ngIf=\"!metadata.required(entity)\">-</mat-option>\n                <mat-option *ngIf=\"shouldDisplayCurrentReferencesOneDropdownValue\" [value]=\"currentReferencesOneDropdownValue?.value\">{{currentReferencesOneDropdownValue?.displayName}}</mat-option>\n                <mat-option *ngFor=\"let value of filteredReferencesOneDropdownValues\" [value]=\"value.value\">{{value.displayName}}</mat-option>\n            </mat-select>\n            <mat-error>{{internalGetValidationErrorMessage(inputModel)}}</mat-error>\n        </mat-form-field>\n        <!-- iterates over the references one properties -->\n        <mat-tab-group *ngIf=\"referencesOnePropertyTabs && referencesOnePropertyTabs.length > 1\" preserveContent>\n            <mat-tab *ngFor=\"let tab of referencesOnePropertyTabs; let tI = index; trackBy: trackByFn\" [label]=\"tab.tabName\">\n                <div *ngFor=\"let row of tab.rows;\" class=\"row\">\n                    <ngx-mat-entity-input *ngFor=\"let key of row.keys; let rI = index; trackBy: trackByFn\"\n                        [entity]=\"referencesOneObject\"\n                        [propertyKey]=\"key\"\n                        [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                        [hideOmitForCreate]=\"hideOmitForCreate\"\n                        [hideOmitForEdit]=\"hideOmitForEdit\"\n                        [validEmpty]=\"!metadata.required(entity)\"\n                        [isReadOnly]=\"true\"\n                        [class]=\"EntityUtilities.getWidthClasses(referencesOneObject, key)\"\n                        (inputChangeEvent)=\"emitChange()\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </mat-tab>\n        </mat-tab-group>\n\n        <div *ngIf=\"referencesOnePropertyTabs && referencesOnePropertyTabs.length <= 1\">\n            <div *ngFor=\"let row of referencesOnePropertyTabs[0].rows\" class=\"row\">\n                <ngx-mat-entity-input *ngFor=\"let key of row.keys; let i = index; trackBy: trackByFn\"\n                    [entity]=\"referencesOneObject\"\n                    [propertyKey]=\"key\"\n                    [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                    [hideOmitForCreate]=\"hideOmitForCreate\"\n                    [hideOmitForEdit]=\"hideOmitForEdit\"\n                    [validEmpty]=\"!metadata.required(entity)\"\n                    [isReadOnly]=\"true\"\n                    [class]=\"EntityUtilities.getWidthClasses(referencesOneObject, key)\"\n                    (inputChangeEvent)=\"emitChange()\"\n                >\n                </ngx-mat-entity-input>\n            </div>\n        </div>\n    </div>\n\n    <!-------------------------------------------->\n    <!-------------------Array-------------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.ARRAY\" class=\"entityArray\">\n        <div class=\"mat-elevation-z8 elevation-container\">\n            <div class=\"array-headline\">\n                <b>{{metadataEntityArray.displayName}}</b>\n            </div>\n            <div *ngIf=\"metadataEntityArray.createInline && !internalIsReadOnly\">\n                <mat-tab-group *ngIf=\"arrayItemInlineTabs.length > 1\" preserveContent>\n                    <mat-tab *ngFor=\"let tab of arrayItemInlineTabs\" [label]=\"tab.tabName\">\n                        <div *ngFor=\"let row of tab.rows\" class=\"row\">\n                            <ngx-mat-entity-input\n                                *ngFor=\"let key of row.keys; let i = index; trackBy: trackByFn\"\n                                [entity]=\"arrayItem\"\n                                [propertyKey]=\"key\"\n                                [hideOmitForCreate]=\"true\"\n                                [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                                [class]=\"EntityUtilities.getWidthClasses(arrayItem, key)\"\n                                (inputChangeEvent)=\"checkIsArrayItemValid()\"\n                            >\n                            </ngx-mat-entity-input>\n                        </div>\n                    </mat-tab>\n                </mat-tab-group>\n\n                <div *ngIf=\"arrayItemInlineTabs.length <= 1\">\n                    <div *ngFor=\"let row of arrayItemInlineTabs[0].rows\" class=\"row\">\n                        <ngx-mat-entity-input\n                            *ngFor=\"let key of row.keys; let i = index; trackBy: trackByFn\"\n                            [entity]=\"arrayItem\"\n                            [propertyKey]=\"key\"\n                            [hideOmitForCreate]=\"true\"\n                            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                            [class]=\"EntityUtilities.getWidthClasses(arrayItem, key)\"\n                            (inputChangeEvent)=\"checkIsArrayItemValid()\"\n                        >\n                        </ngx-mat-entity-input>\n                    </div>\n                </div>\n            </div>\n\n            <div *ngIf=\"!internalIsReadOnly\" class=\"buttons\">\n                <button type=\"button\" mat-raised-button\n                    [disabled]=\"metadataEntityArray.createInline && !isArrayItemValid\"\n                    (click)=\"addEntity()\">\n                    {{metadataEntityArray.addButtonLabel}}\n                </button>\n                <button type=\"button\" mat-raised-button\n                    [disabled]=\"!entityArraySelection.selected.length\"\n                    (click)=\"removeFromEntityArray()\">\n                    {{metadataEntityArray.removeButtonLabel}}\n                </button>\n            </div>\n        \n            <mat-table [dataSource]=\"entityArrayDataSource\">\n                <!-- select Column -->\n                <ng-container *ngIf=\"!internalIsReadOnly\" matColumnDef=\"select\">\n                    <mat-header-cell *matHeaderCellDef>\n                        <mat-checkbox\n                            [disabled]=\"!entityArrayDataSource.data.length\" [checked]=\"entityArraySelection.hasValue() && SelectionUtilities.isAllSelected(entityArraySelection, entityArrayDataSource)\"\n                            [indeterminate]=\"entityArraySelection.hasValue() && !SelectionUtilities.isAllSelected(entityArraySelection, entityArrayDataSource)\"\n                            (change)=\"$event ? SelectionUtilities.masterToggle(entityArraySelection, entityArrayDataSource) : null\">\n                        </mat-checkbox>\n                    </mat-header-cell>\n                    <mat-cell *matCellDef=\"let entity\">\n                        <mat-checkbox [checked]=\"entityArraySelection.isSelected(entity)\" (click)=\"$event.stopPropagation()\" (change)=\"$event ? entityArraySelection.toggle(entity) : null\"></mat-checkbox>\n                    </mat-cell>\n                </ng-container>\n            \n                <ng-container *ngFor=\"let dCol of metadataEntityArray.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n                    <mat-header-cell *matHeaderCellDef>\n                        {{dCol.displayName}}\n                    </mat-header-cell>\n                    <mat-cell *matCellDef=\"let entity\" [class.enabled]=\"!dCol.disableClick\" (click)=\"editArrayItem(entity, dCol)\">\n                        <ng-container *ngIf=\"dCol.Component\">\n                            <display-column-value [entity]=\"entity\" [ComponentClass]=\"dCol.Component\"></display-column-value>\n                        </ng-container>\n                        <ng-container *ngIf=\"!dCol.Component\">\n                            {{getDisplayColumnValue(entity, dCol)}}\n                        </ng-container>\n                    </mat-cell>\n                </ng-container>\n            \n                <mat-header-row *matHeaderRowDef=\"entityArrayDisplayedColumns\"></mat-header-row>\n                <mat-row *matRowDef=\"let row; columns: entityArrayDisplayedColumns\"></mat-row>\n            </mat-table>\n        \n            <div *ngIf=\"metadataEntityArray.required(entity) && !entityArrayDataSource.data.length\" class=\"array-error\">\n                {{metadataEntityArray.missingErrorMessage}}\n            </div>\n        </div>\n    </div>\n\n    <!-------------------------------------------->\n    <!------------------ has many ---------------->\n    <!-------------------------------------------->\n    <div *ngSwitchCase=\"DecoratorTypes.HAS_MANY\" class=\"hasMany\">\n        <h2 class=\"title\">{{metadataHasMany.tableData.baseData.title}}</h2>\n\n        <div class=\"row\">\n            <mat-form-field class=\"col-lg-8 col-md-6 col-sm-12\">\n                <mat-label>{{metadataHasMany.tableData.baseData.searchLabel}}</mat-label>\n                <input matInput (keyup)=\"applyHasManyFilter($event)\">\n            </mat-form-field>\n            <div\n                *ngIf=\"metadataHasMany.tableData.baseData.tableActions.length\"\n                [class.col-lg-2]=\"hasManyAllowCreate\"\n                [class.col-lg-4]=\"!hasManyAllowCreate\"\n                [class.col-md-3]=\"hasManyAllowCreate\"\n                [class.col-md-6]=\"!hasManyAllowCreate\"\n                [class.col-sm-6]=\"hasManyAllowCreate\"\n                [class.col-sm-12]=\"!hasManyAllowCreate\"\n            >\n                <button type=\"button\" class=\"actions-button\" mat-raised-button [matMenuTriggerFor]=\"menu\">\n                    {{metadataHasMany.tableData.baseData.tableActionsLabel}}\n                </button>\n            </div>\n            <mat-menu #menu=\"matMenu\">\n                <button *ngIf=\"metadataHasMany.tableData.baseData.allowJsonImport\" type=\"button\" mat-menu-item [disabled]=\"hasManyTableActionDisabled(hasManyImportAction)\" (click)=\"runHasManyTableAction(hasManyImportAction)\">\n                    {{hasManyImportAction.displayName}}\n                </button>\n                <button *ngFor=\"let action of metadataHasMany.tableData.baseData.tableActions\" type=\"button\" mat-menu-item [disabled]=\"hasManyTableActionDisabled(action)\" (click)=\"runHasManyTableAction(action)\">\n                    {{action.displayName}}\n                </button>\n            </mat-menu>\n\n            <div\n                *ngIf=\"hasManyAllowCreate\"\n                [class.col-lg-2]=\"metadataHasMany.tableData.baseData.tableActions.length\"\n                [class.col-lg-4]=\"!metadataHasMany.tableData.baseData.tableActions.length\"\n                [class.col-md-3]=\"metadataHasMany.tableData.baseData.tableActions.length\"\n                [class.col-md-6]=\"!metadataHasMany.tableData.baseData.tableActions.length\"\n                [class.col-sm-6]=\"metadataHasMany.tableData.baseData.tableActions.length\"\n                [class.col-sm-12]=\"!metadataHasMany.tableData.baseData.tableActions.length\"\n            >\n                <button type=\"button\" class=\"create-button\" mat-raised-button (click)=\"createHasManyEntity()\">\n                    {{metadataHasMany.tableData.baseData.createButtonLabel}}\n                </button>\n            </div>\n        </div>\n\n        <div class=\"mat-elevation-z8 elevation-container\">\n            <mat-table matSort [dataSource]=\"hasManyDataSource\">\n                <!-- select Column -->\n                <ng-container matColumnDef=\"select\">\n                    <mat-header-cell *matHeaderCellDef>\n                        <mat-checkbox [checked]=\"hasManySelection.hasValue() && SelectionUtilities.isAllSelected(hasManySelection, hasManyDataSource)\"\n                            [indeterminate]=\"hasManySelection.hasValue() && !SelectionUtilities.isAllSelected(hasManySelection, hasManyDataSource)\"\n                            (change)=\"$event ? SelectionUtilities.masterToggle(hasManySelection, hasManyDataSource) : null\">\n                        </mat-checkbox>\n                    </mat-header-cell>\n                    <mat-cell *matCellDef=\"let entity\" class=\"enabled\">\n                        <mat-checkbox [checked]=\"hasManySelection.isSelected(entity)\"\n                            (click)=\"$event.stopPropagation()\"\n                            (change)=\"$event ? hasManySelection.toggle(entity) : null\">\n                        </mat-checkbox>\n                    </mat-cell>\n                </ng-container>\n\n                <ng-container *ngFor=\"let dCol of metadataHasMany.tableData.baseData.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n                    <mat-header-cell *matHeaderCellDef mat-sort-header>\n                        {{dCol.displayName}}\n                    </mat-header-cell>\n                    <mat-cell *matCellDef=\"let entity\"\n                        [class.enabled]=\"!dCol.disableClick && (hasManyAllowUpdate(entity) || hasManyAllowRead(entity))\"\n                        (click)=\"editHasManyEntity(entity, dCol)\"\n                    >\n                        <ng-container *ngIf=\"dCol.Component\">\n                            <display-column-value [entity]=\"entity\" [ComponentClass]=\"dCol.Component\"></display-column-value>\n                        </ng-container>\n                        <ng-container *ngIf=\"!dCol.Component\">\n                            {{getDisplayColumnValue(entity, dCol)}}\n                        </ng-container>\n                    </mat-cell>\n                </ng-container>\n\n                <mat-header-row *matHeaderRowDef=\"displayedHasManyColumns\"></mat-header-row>\n                <mat-row *matRowDef=\"let row; columns: displayedHasManyColumns\"></mat-row>\n            </mat-table>\n\n            <mat-spinner *ngIf=\"hasManyIsLoading && metadataHasMany.tableData.baseData.displayLoadingSpinner\">\n            </mat-spinner>\n\n            <mat-paginator style=\"padding-top: 10px; padding-bottom: 10px;\" [length]=\"hasManyDataSource.filteredData.length\" [pageIndex]=\"0\" [pageSize]=\"10\" [pageSizeOptions]=\"[5, 10, 25, 50]\"></mat-paginator>\n        </div>\n    </div>\n\n    <div *ngSwitchDefault>ERROR: The type {{type}} is not known.</div>\n</div>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n<!--------------------------------------------------------->\n<!--------------------Add Array Item Dialog---------------->\n<!--------------------------------------------------------->\n<ng-template #addArrayItemDialog>\n    <div class=\"mat-dialog-title\">\n        <div>{{addArrayItemDialogData.title}}</div>\n    </div>\n\n    <form>\n        <mat-dialog-content>\n            <mat-tab-group *ngIf=\"arrayItemDialogTabs.length > 1\" preserveContent>\n                <mat-tab *ngFor=\"let tab of arrayItemDialogTabs\" [label]=\"tab.tabName\">\n                    <div *ngFor=\"let row of tab.rows\" class=\"row\">\n                        <ngx-mat-entity-input\n                            *ngFor=\"let key of row.keys\"\n                            [entity]=\"arrayItem\"\n                            [propertyKey]=\"key\"\n                            [hideOmitForCreate]=\"true\"\n                            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                            [class]=\"EntityUtilities.getWidthClasses(arrayItem, key)\"\n                            (inputChangeEvent)=\"checkIsArrayItemValid()\"\n                        >\n                        </ngx-mat-entity-input>\n                    </div>\n                </mat-tab>\n            </mat-tab-group>\n    \n            <div *ngIf=\"arrayItemDialogTabs.length <= 1\">\n                <div *ngFor=\"let row of arrayItemDialogTabs[0].rows\" class=\"row\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"arrayItem\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForCreate]=\"true\"\n                        [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                        [class]=\"EntityUtilities.getWidthClasses(arrayItem, key)\"\n                        (inputChangeEvent)=\"checkIsArrayItemValid()\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </div>\n        </mat-dialog-content>\n    \n        <mat-dialog-actions>\n            <div class=\"d-flex align-items-center gap-3\" style=\"margin-top: 10px;\">\n                <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n                    [disabled]=\"!isArrayItemValid\"\n                    [matBadge]=\"arrayItemValidationErrors.length\"\n                    [matBadgeHidden]=\"!arrayItemValidationErrors.length\"\n                    (click)=\"addArrayItem()\"\n                >\n                    {{addArrayItemDialogData.createButtonLabel}}\n                </button>\n                <ngx-mat-entity-tooltip *ngIf=\"arrayItemValidationErrors.length\" [tooltipContent]=\"arrayItemTooltipContent\"></ngx-mat-entity-tooltip>\n            </div>\n            <button type=\"button\" mat-raised-button class=\"cancel-button\" (click)=\"closeAddArrayItemDialog()\">\n                {{addArrayItemDialogData.cancelButtonLabel}}\n            </button>\n        </mat-dialog-actions>\n    </form>\n\n</ng-template>\n\n<!--------------------------------------------------------->\n<!--------------------Edit Array Item Dialog---------------->\n<!--------------------------------------------------------->\n<ng-template #editArrayItemDialog>\n    <div class=\"mat-dialog-title\">\n        <div>{{editArrayItemDialogData.title(arrayItemPriorChanges)}}</div>\n    </div>\n    \n    <form>\n        <mat-dialog-content>\n            <mat-tab-group *ngIf=\"arrayItemDialogTabs.length > 1\" preserveContent>\n                <mat-tab *ngFor=\"let tab of arrayItemDialogTabs\" [label]=\"tab.tabName\">\n                    <div *ngFor=\"let row of tab.rows\" class=\"row\">\n                        <ngx-mat-entity-input\n                            *ngFor=\"let key of row.keys\"\n                            [entity]=\"arrayItem\"\n                            [propertyKey]=\"key\"\n                            [hideOmitForEdit]=\"true\"\n                            [class]=\"EntityUtilities.getWidthClasses(arrayItem, key)\"\n                            [isReadOnly]=\"isPropertyReadOnly(arrayItem, key)\"\n                            (inputChangeEvent)=\"checkArrayItem()\"\n                        >\n                        </ngx-mat-entity-input>\n                    </div>\n                </mat-tab>\n            </mat-tab-group>\n        \n            <div *ngIf=\"arrayItemDialogTabs.length <= 1\">\n                <div *ngFor=\"let row of arrayItemDialogTabs[0].rows\" class=\"row\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"arrayItem\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForEdit]=\"true\"\n                        [class]=\"EntityUtilities.getWidthClasses(arrayItem, key)\"\n                        [isReadOnly]=\"isPropertyReadOnly(arrayItem, key)\"\n                        (inputChangeEvent)=\"checkArrayItem()\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </div>\n        </mat-dialog-content>\n        \n        <mat-dialog-actions>\n            <div class=\"d-flex align-items-center gap-3\" style=\"margin-top: 10px;\">\n                <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n                [disabled]=\"internalIsReadOnly || !isArrayItemValid || !isArrayItemDirty\"\n                    [matBadge]=\"arrayItemValidationErrors.length\"\n                    [matBadgeHidden]=\"!arrayItemValidationErrors.length\"\n                    (click)=\"saveArrayItem()\"\n                >\n                    {{editArrayItemDialogData.confirmButtonLabel}}\n                </button>\n                <ngx-mat-entity-tooltip *ngIf=\"arrayItemValidationErrors.length\" [tooltipContent]=\"arrayItemTooltipContent\"></ngx-mat-entity-tooltip>\n            </div>\n            <button type=\"button\" mat-raised-button class=\"cancel-button\" (click)=\"closeEditArrayItemDialog()\">\n                {{editArrayItemDialogData.cancelButtonLabel}}\n            </button>\n        </mat-dialog-actions>\n    </form>\n</ng-template>\n\n<!--------------------------------------------------------->\n<!--------------------Create Has Many Dialog---------------->\n<!--------------------------------------------------------->\n<ng-template #createHasManyDialog>\n    <div class=\"mat-dialog-title\">\n        <div>{{metadataHasMany.tableData.createData.title}}</div>\n    </div>\n    \n    <form>\n        <mat-dialog-content>\n            <mat-tab-group *ngIf=\"hasManyCreateTabs.length > 1\" preserveContent>\n                <mat-tab *ngFor=\"let tab of hasManyCreateTabs\" [label]=\"tab.tabName\">\n                    <div *ngFor=\"let row of tab.rows\" class=\"row\">\n                        <ngx-mat-entity-input\n                            *ngFor=\"let key of row.keys\"\n                            [entity]=\"hasManyEntity\"\n                            [propertyKey]=\"key\"\n                            [hideOmitForCreate]=\"true\"\n                            [class]=\"EntityUtilities.getWidthClasses(hasManyEntity, key)\"\n                            (inputChangeEvent)=\"checkIsHasManyEntityValid('create')\"\n                        >\n                        </ngx-mat-entity-input>\n                    </div>\n                </mat-tab>\n            </mat-tab-group>\n        \n            <div *ngIf=\"hasManyCreateTabs.length <= 1\">\n                <div *ngFor=\"let row of hasManyCreateTabs[0].rows\" class=\"row\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"hasManyEntity\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForCreate]=\"true\"\n                        [class]=\"EntityUtilities.getWidthClasses(hasManyEntity, key)\"\n                        (inputChangeEvent)=\"checkIsHasManyEntityValid('create')\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </div>\n        </mat-dialog-content>\n        \n        <mat-dialog-actions>\n            <div class=\"d-flex align-items-center gap-3\" style=\"margin-top: 10px;\">\n                <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n                    [disabled]=\"!isHasManyEntityValid\"\n                    [matBadge]=\"hasManyValidationErrors.length\"\n                    [matBadgeHidden]=\"!hasManyValidationErrors.length\"\n                    (click)=\"dialogCreateHasMany()\"\n                >\n                    {{metadataHasMany.tableData.createData.createButtonLabel}}\n                </button>\n                <ngx-mat-entity-tooltip *ngIf=\"hasManyValidationErrors.length\" [tooltipContent]=\"hasManyTooltipContent\"></ngx-mat-entity-tooltip>\n            </div>\n            <button type=\"button\" mat-raised-button class=\"cancel-button\" (click)=\"dialogCancelCreateHasMany()\">\n                {{metadataHasMany.tableData.createData.cancelButtonLabel}}\n            </button>\n        </mat-dialog-actions>\n    </form>\n    \n</ng-template>\n\n<!--------------------------------------------------------->\n<!--------------------Edit Has Many Dialog----------------->\n<!--------------------------------------------------------->\n<ng-template #editHasManyDialog>\n    <div class=\"mat-dialog-title\">\n        <div>{{metadataHasMany.tableData.editData.title(hasManyEntityPriorChanges)}}</div>\n\n        <div class=\"actions-container\">\n            <button *ngIf=\"metadataHasMany.tableData.editData.actions.length\" type=\"button\" mat-raised-button [matMenuTriggerFor]=\"menu\">\n                {{metadataHasMany.tableData.editData.actionsLabel}}\n            </button>\n            <mat-menu #menu=\"matMenu\">\n                <button *ngFor=\"let action of metadataHasMany.tableData.editData.actions\" type=\"button\" mat-menu-item [disabled]=\"hasManyEditActionDisabled(action)\" (click)=\"hasManyRunEditAction(action)\">\n                    {{action.displayName}}\n                </button>\n            </mat-menu>\n        \n            <button *ngIf=\"hasManyAllowDelete(hasManyEntity)\" type=\"button\" mat-raised-button color=\"warn\" class=\"delete-button\" tabindex=\"-1\" (click)=\"deleteHasManyEntity()\">\n                {{metadataHasMany.tableData.editData.deleteButtonLabel}}\n            </button>\n        </div>\n    </div>\n    \n    <form>\n        <mat-dialog-content>\n            <mat-tab-group *ngIf=\"hasManyUpdateTabs.length > 1\" preserveContent>\n                <mat-tab *ngFor=\"let tab of hasManyUpdateTabs\" [label]=\"tab.tabName\">\n                    <div *ngFor=\"let row of tab.rows\" class=\"row\">\n                        <ngx-mat-entity-input\n                            *ngFor=\"let key of row.keys\"\n                            [entity]=\"hasManyEntity\"\n                            [propertyKey]=\"key\"\n                            [hideOmitForEdit]=\"true\"\n                            [class]=\"EntityUtilities.getWidthClasses(hasManyEntity, key)\"\n                            [isReadOnly]=\"isPropertyReadOnly(hasManyEntity, key)\"\n                            (inputChangeEvent)=\"checkHasManyEntity()\"\n                        >\n                        </ngx-mat-entity-input>\n                    </div>\n                </mat-tab>\n            </mat-tab-group>\n        \n            <div *ngIf=\"hasManyUpdateTabs.length <= 1\">\n                <div *ngFor=\"let row of hasManyUpdateTabs[0].rows\" class=\"row\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"hasManyEntity\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForEdit]=\"true\"\n                        [class]=\"EntityUtilities.getWidthClasses(hasManyEntity, key)\"\n                        [isReadOnly]=\"isPropertyReadOnly(hasManyEntity, key)\"\n                        (inputChangeEvent)=\"checkHasManyEntity()\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </div>\n        </mat-dialog-content>\n        \n        <mat-dialog-actions>\n            <div class=\"d-flex align-items-center gap-3\" style=\"margin-top: 10px;\">\n                <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n                    [disabled]=\"internalIsReadOnly || !isHasManyEntityValid || !isHasManyEntityDirty\"\n                    [matBadge]=\"hasManyValidationErrors.length\"\n                    [matBadgeHidden]=\"!hasManyValidationErrors.length\"\n                    (click)=\"dialogEditHasMany()\"\n                >\n                    {{metadataHasMany.tableData.editData.confirmButtonLabel}}\n                </button>\n                <ngx-mat-entity-tooltip *ngIf=\"hasManyValidationErrors.length\" [tooltipContent]=\"hasManyTooltipContent\"></ngx-mat-entity-tooltip>\n            </div>\n            <button type=\"button\" mat-raised-button class=\"cancel-button\" (click)=\"dialogCancelEditHasMany()\">\n                {{metadataHasMany.tableData.editData.cancelButtonLabel}}\n            </button>\n        </mat-dialog-actions>\n    </form>\n</ng-template>", styles: [".mdc-data-table__row:last-child .mdc-data-table__cell{border-bottom:1px solid rgba(0,0,0,.12)}.mat-dialog-title{padding:12px 20px;display:flex;justify-content:space-between;align-items:center}.mat-dialog-title div{font-size:var(--mdc-dialog-subhead-size, 14px);font-weight:var(--mdc-dialog-subhead-weight, 500)}.actions-container{display:flex;gap:10px}::ng-deep .mat-mdc-form-field-has-icon-suffix .mat-mdc-text-field-wrapper{padding-right:16px}::ng-deep .select-search-input{max-width:100%;margin-top:-8px;margin-bottom:8px}::ng-deep .select-search-input .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .mdc-dialog .mdc-dialog__content{padding:6px 20px!important}mat-dialog-actions{justify-content:space-between;align-items:center;padding-left:20px;padding-right:20px}mat-spinner{margin:10px auto}::ng-deep .mat-mdc-tab-body-wrapper{margin-left:-12px;margin-right:-12px}::ng-deep mat-tab-body{padding-top:10px;padding-left:12px;padding-right:12px}::ng-deep mat-tab-body .mat-mdc-tab-body-content{overflow:initial}::ng-deep .mat-mdc-form-field.mat-form-field-disabled label{color:#0009}::ng-deep .mat-mdc-form-field.mat-form-field-disabled input,::ng-deep .mat-mdc-form-field.mat-form-field-disabled textarea,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-select-disabled,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-select-value{color:#000!important}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-checkbox .mdc-checkbox__native-control[disabled]:not(:checked):not(:indeterminate):not([data-indeterminate=true])~.mdc-checkbox__background{border-color:#707070}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-checkbox .mdc-checkbox__native-control[disabled]:checked~.mdc-checkbox__background,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-checkbox .mdc-checkbox__native-control[disabled]:indeterminate~.mdc-checkbox__background,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-checkbox .mdc-checkbox__native-control[data-indeterminate=true][disabled]~.mdc-checkbox__background{background-color:#000}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-chip.mat-mdc-standard-chip.mat-mdc-chip-disabled{opacity:1}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-chip.mat-mdc-standard-chip.mat-mdc-chip-disabled button{opacity:.2}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-switch.mdc-switch--selected:disabled .mdc-switch__icons,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-switch.mdc-switch--unselected:disabled .mdc-switch__icons{opacity:1}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-switch.mdc-switch--selected:disabled .mdc-switch__handle:after,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-switch.mdc-switch--unselected:disabled .mdc-switch__handle:after{opacity:1;background:black}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-switch.mdc-switch--selected:disabled .mdc-switch__track,::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-switch.mdc-switch--unselected:disabled .mdc-switch__track{opacity:.3}::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mat-date-range-input-inner:disabled{color:#000}::ng-deep #slider.mat-mdc-slider.mdc-slider--disabled{opacity:1}::ng-deep #slider.mat-mdc-slider.mdc-slider--disabled .mdc-slider__input{cursor:default}::ng-deep #slider.mat-mdc-slider.mdc-slider--disabled mat-slider-visual-thumb .mat-mdc-slider,::ng-deep #slider.mat-mdc-slider.mdc-slider--disabled mat-slider-visual-thumb .mdc-slider__thumb:hover,::ng-deep #slider.mat-mdc-slider.mdc-slider--disabled mat-slider-visual-thumb .mdc-slider__thumb-knob{background-color:#000;border-color:#000}::ng-deep .mat-mdc-form-field .mat-mdc-slide-toggle{opacity:1}.entityArray .elevation-container{border-radius:5px;padding:15px;margin-bottom:15px;margin-top:15px}.entityArray .array-headline{padding-bottom:10px}.entityArray .buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px;flex-wrap:wrap;gap:10px}.entityArray .buttons button{flex-grow:1}.entityArray mat-table{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:5px}.entityArray .mat-column-select{flex:0 0 48px;padding-left:0;padding-right:0;justify-content:center}.entityArray .enabled:hover{cursor:pointer}.entityArray .array-error{display:flex;align-items:center;justify-content:center;margin-top:-6px;border:1px solid #E0E0E0;background-color:#f8d3d7;color:#721c24;height:-moz-fit-content;height:fit-content;padding-left:4px;padding-right:4px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.hasMany button{width:100%;height:56px;line-height:24px;font-size:16px}.hasMany .title{text-align:center}.hasMany .elevation-container{border-radius:5px;padding:5px;margin-bottom:15px}.hasMany .mat-column-select{flex:0 0 48px;padding-left:0;padding-right:0;justify-content:center}.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]
@@ -6270,9 +6261,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImpor
                     type: Inject,
                     args: [NGX_INTERNAL_GLOBAL_DEFAULT_VALUES]
                 }] }, { type: i2$1.HttpClient }]; }, propDecorators: { entity: [{
-                type: Input
+                type: Input,
+                args: [{ required: true }]
             }], propertyKey: [{
-                type: Input
+                type: Input,
+                args: [{ required: true }]
             }], getValidationErrorMessage: [{
                 type: Input
             }], hideOmitForCreate: [{
@@ -7062,7 +7055,7 @@ class NgxMatEntityEditPageComponent {
         return runInInjectionContext(this.injector, () => !action.enabled(this.entityPriorChanges));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: NgxMatEntityEditPageComponent, deps: [{ token: i1.MatDialog }, { token: i1$1.Location }, { token: i2$2.ActivatedRoute }, { token: i0.EnvironmentInjector }, { token: NGX_EDIT_DATA_ENTITY_SERVICE }, { token: NGX_EDIT_DATA_ENTITY }, { token: NGX_EDIT_DATA }, { token: i2$1.HttpClient }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: NGX_INTERNAL_GLOBAL_DEFAULT_VALUES }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: NgxMatEntityEditPageComponent, isStandalone: true, selector: "ngx-mat-entity-edit-page", host: { listeners: { "window:scroll": "checkOffset()", "window:beforeunload": "canDeactivate()" } }, ngImport: i0, template: " \n<!-- eslint-disable angular/no-call-expression -->\n<!-- eslint-disable angular/cyclomatic-complexity -->\n<div *ngIf=\"!entityTabs && data.displayLoadingSpinner\" class=\"container\">\n    <br>\n    <mat-spinner></mat-spinner>\n    <br>\n</div>\n\n<div *ngIf=\"entityTabs\" class=\"container\">\n    <br>\n\n    <!------------>\n    <!-- Header -->\n    <!------------>\n    <div class=\"header\">\n        <div class=\"cancel-container\">\n            <button type=\"button\" mat-raised-button class=\"back-button\" tabindex=\"-1\" [class.unsavedChanges]=\"hasUnsavedChanges\" (click)=\"navigateBack()\">\n                <i class=\"fas fa-chevron-left\"></i>\n                {{data.editData.cancelButtonLabel}}\n                <i *ngIf=\"hasUnsavedChanges\" class=\"fas fa-warning\"></i>\n            </button>\n        </div>\n        <div class=\"actions-container\">\n            <button *ngIf=\"data.editData.actions.length\" type=\"button\" mat-raised-button [matMenuTriggerFor]=\"menu\">\n                {{data.editData.actionsLabel}}\n            </button>\n            <mat-menu #menu=\"matMenu\">\n                <button *ngFor=\"let action of data.editData.actions\" type=\"button\" mat-menu-item [disabled]=\"editActionDisabled(action)\" (click)=\"runEditAction(action)\">\n                    {{action.displayName}}\n                </button>\n            </mat-menu>\n        \n            <button *ngIf=\"allowDelete\" type=\"button\" mat-raised-button color=\"warn\" class=\"delete-button\" tabindex=\"-1\" (click)=\"delete()\">\n                {{data.editData.deleteButtonLabel}}\n            </button>\n        </div>\n    </div>\n\n    <h1>{{data.editData.title(entityPriorChanges)}}</h1>\n\n    <!----------->\n    <!-- Input -->\n    <!----------->\n    <form>\n        <mat-tab-group *ngIf=\"entityTabs.length > 1\" preserveContent (selectedTabChange)=\"checkOffset()\">\n            <mat-tab *ngFor=\"let tab of entityTabs\" [label]=\"tab.tabName\">\n                <div *ngFor=\"let row of tab.rows\" class=\"row\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"entity\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForEdit]=\"true\"\n                        [class]=\"EntityUtilities.getWidthClasses(entity, key)\"\n                        [isReadOnly]=\"isReadOnly(key)\"\n                        (inputChangeEvent)=\"checkEntity()\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </mat-tab>\n        </mat-tab-group>\n    \n        <div *ngIf=\"entityTabs.length <= 1\">\n            <span *ngIf=\"!entityTabs.length\" class=\"no-entity-tabs\">\n                ERROR: No Inputs. Did you correctly assign all values in the model constructor?\n            </span>\n            <div *ngFor=\"let row of entityTabs[0]?.rows\" class=\"row\">\n                <ngx-mat-entity-input\n                    *ngFor=\"let key of row.keys\"\n                    [entity]=\"entity\"\n                    [propertyKey]=\"key\"\n                    [hideOmitForEdit]=\"true\"\n                    [class]=\"EntityUtilities.getWidthClasses(entity, key)\"\n                    [isReadOnly]=\"isReadOnly(key)\"\n                    (inputChangeEvent)=\"checkEntity()\"\n                >\n                </ngx-mat-entity-input>\n            </div>\n        </div>\n\n        <div class=\"bottom-row-container\">\n            <div class=\"bottom-row container\" style=\"margin-top: 10px;\">\n                <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n                    [disabled]=\"isEntityReadOnly || !isEntityValid || !isEntityDirty\"\n                    [matBadge]=\"validationErrors.length\"\n                    [matBadgeHidden]=\"!validationErrors.length\"\n                    (click)=\"edit()\"\n                >\n                    {{data.editData.confirmButtonLabel}}\n                </button>\n                <ngx-mat-entity-tooltip *ngIf=\"validationErrors.length\" [tooltipContent]=\"tooltipContent\"></ngx-mat-entity-tooltip>\n            </div>\n        </div>\n    </form>\n\n    <br>\n</div>", styles: ["h1{text-align:center}mat-spinner{margin:10px auto}.fa-warning{color:orange}.bottom-row{display:flex;align-items:center;column-gap:10px}.fixed{position:fixed;bottom:0;left:0;right:0;width:100%;z-index:1000;padding:8px 20px;background-color:#fff}.no-entity-tabs{padding:10px;background-color:red;color:#f5f5f5}.header{display:flex;margin-bottom:5px;gap:10px;flex-wrap:wrap}.header button{min-width:150px}.header .cancel-container{display:flex;justify-content:flex-start;align-items:center;column-gap:10px;width:calc(50% - 10px)}.header .actions-container{display:flex;justify-content:flex-end;gap:10px;width:calc(50% - 10px)}.unsavedChanges{background-color:#ffe48d}@media (max-width: 800px){.header{margin-bottom:10px;gap:15px}.header button{min-width:0px;width:50%}.header .save-cancel-container,.header .actions-container{width:100%;gap:15px}}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i5$1.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i5$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: NgxMatEntityInputModule }, { kind: "component", type: NgxMatEntityInputComponent, selector: "ngx-mat-entity-input", inputs: ["entity", "propertyKey", "getValidationErrorMessage", "hideOmitForCreate", "hideOmitForEdit", "validEmpty", "isReadOnly"], outputs: ["inputChangeEvent"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i15.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i13.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i13.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i13.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i8.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: TooltipComponent, selector: "ngx-mat-entity-tooltip", inputs: ["tooltipContent"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: NgxMatEntityEditPageComponent, isStandalone: true, selector: "ngx-mat-entity-edit-page", host: { listeners: { "window:scroll": "checkOffset()", "window:beforeunload": "canDeactivate()" } }, ngImport: i0, template: " \n<!-- eslint-disable angular/no-call-expression -->\n<!-- eslint-disable angular/cyclomatic-complexity -->\n<div *ngIf=\"!entityTabs && data.displayLoadingSpinner\" class=\"container\">\n    <br>\n    <mat-spinner></mat-spinner>\n    <br>\n</div>\n\n<div *ngIf=\"entityTabs\" class=\"container\">\n    <br>\n\n    <!------------>\n    <!-- Header -->\n    <!------------>\n    <div class=\"header\">\n        <div class=\"cancel-container\">\n            <button type=\"button\" mat-raised-button class=\"back-button\" tabindex=\"-1\" [class.unsavedChanges]=\"hasUnsavedChanges\" (click)=\"navigateBack()\">\n                <i class=\"fas fa-chevron-left\"></i>\n                {{data.editData.cancelButtonLabel}}\n                <i *ngIf=\"hasUnsavedChanges\" class=\"fas fa-warning\"></i>\n            </button>\n        </div>\n        <div class=\"actions-container\">\n            <button *ngIf=\"data.editData.actions.length\" type=\"button\" mat-raised-button [matMenuTriggerFor]=\"menu\">\n                {{data.editData.actionsLabel}}\n            </button>\n            <mat-menu #menu=\"matMenu\">\n                <button *ngFor=\"let action of data.editData.actions\" type=\"button\" mat-menu-item [disabled]=\"editActionDisabled(action)\" (click)=\"runEditAction(action)\">\n                    {{action.displayName}}\n                </button>\n            </mat-menu>\n        \n            <button *ngIf=\"allowDelete\" type=\"button\" mat-raised-button color=\"warn\" class=\"delete-button\" tabindex=\"-1\" (click)=\"delete()\">\n                {{data.editData.deleteButtonLabel}}\n            </button>\n        </div>\n    </div>\n\n    <h1>{{data.editData.title(entityPriorChanges)}}</h1>\n\n    <!----------->\n    <!-- Input -->\n    <!----------->\n    <form>\n        <mat-tab-group *ngIf=\"entityTabs.length > 1\" preserveContent (selectedTabChange)=\"checkOffset()\">\n            <mat-tab *ngFor=\"let tab of entityTabs\" [label]=\"tab.tabName\">\n                <div *ngFor=\"let row of tab.rows\" class=\"row\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"entity\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForEdit]=\"true\"\n                        [class]=\"EntityUtilities.getWidthClasses(entity, key)\"\n                        [isReadOnly]=\"isReadOnly(key)\"\n                        (inputChangeEvent)=\"checkEntity()\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </mat-tab>\n        </mat-tab-group>\n    \n        <div *ngIf=\"entityTabs.length <= 1\">\n            <span *ngIf=\"!entityTabs.length\" class=\"no-entity-tabs\">\n                ERROR: No Inputs. Did you correctly assign all values in the model constructor?\n            </span>\n            <div *ngFor=\"let row of entityTabs[0]?.rows\" class=\"row\">\n                <ngx-mat-entity-input\n                    *ngFor=\"let key of row.keys\"\n                    [entity]=\"entity\"\n                    [propertyKey]=\"key\"\n                    [hideOmitForEdit]=\"true\"\n                    [class]=\"EntityUtilities.getWidthClasses(entity, key)\"\n                    [isReadOnly]=\"isReadOnly(key)\"\n                    (inputChangeEvent)=\"checkEntity()\"\n                >\n                </ngx-mat-entity-input>\n            </div>\n        </div>\n\n        <div class=\"bottom-row-container\">\n            <div class=\"bottom-row container\" style=\"margin-top: 10px;\">\n                <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n                    [disabled]=\"isEntityReadOnly || !isEntityValid || !isEntityDirty\"\n                    [matBadge]=\"validationErrors.length\"\n                    [matBadgeHidden]=\"!validationErrors.length\"\n                    (click)=\"edit()\"\n                >\n                    {{data.editData.confirmButtonLabel}}\n                </button>\n                <ngx-mat-entity-tooltip *ngIf=\"validationErrors.length\" [tooltipContent]=\"tooltipContent\"></ngx-mat-entity-tooltip>\n            </div>\n        </div>\n    </form>\n\n    <br>\n</div>", styles: ["h1{text-align:center}mat-spinner{margin:10px auto}.fa-warning{color:orange}.bottom-row{display:flex;align-items:center;column-gap:10px}.fixed{position:fixed;bottom:0;left:0;right:0;width:100%;z-index:1000;padding:8px 20px;background-color:#fff}.no-entity-tabs{padding:10px;background-color:red;color:#f5f5f5}.header{display:flex;margin-bottom:5px;gap:10px;flex-wrap:wrap}.header button{min-width:150px}.header .cancel-container{display:flex;justify-content:flex-start;align-items:center;column-gap:10px;width:calc(50% - 10px)}.header .actions-container{display:flex;justify-content:flex-end;gap:10px;width:calc(50% - 10px)}.unsavedChanges{background-color:#ffe48d}@media (max-width: 800px){.header{margin-bottom:10px;gap:15px}.header button{min-width:0px;width:50%}.header .cancel-container,.header .actions-container{width:100%;gap:15px}}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i5$1.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i5$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: NgxMatEntityInputModule }, { kind: "component", type: NgxMatEntityInputComponent, selector: "ngx-mat-entity-input", inputs: ["entity", "propertyKey", "getValidationErrorMessage", "hideOmitForCreate", "hideOmitForEdit", "validEmpty", "isReadOnly"], outputs: ["inputChangeEvent"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i15.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i13.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i13.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i13.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i8.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: TooltipComponent, selector: "ngx-mat-entity-tooltip", inputs: ["tooltipContent"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: NgxMatEntityEditPageComponent, decorators: [{
             type: Component,
@@ -7076,7 +7069,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImpor
                         MatMenuModule,
                         MatBadgeModule,
                         TooltipComponent
-                    ], template: " \n<!-- eslint-disable angular/no-call-expression -->\n<!-- eslint-disable angular/cyclomatic-complexity -->\n<div *ngIf=\"!entityTabs && data.displayLoadingSpinner\" class=\"container\">\n    <br>\n    <mat-spinner></mat-spinner>\n    <br>\n</div>\n\n<div *ngIf=\"entityTabs\" class=\"container\">\n    <br>\n\n    <!------------>\n    <!-- Header -->\n    <!------------>\n    <div class=\"header\">\n        <div class=\"cancel-container\">\n            <button type=\"button\" mat-raised-button class=\"back-button\" tabindex=\"-1\" [class.unsavedChanges]=\"hasUnsavedChanges\" (click)=\"navigateBack()\">\n                <i class=\"fas fa-chevron-left\"></i>\n                {{data.editData.cancelButtonLabel}}\n                <i *ngIf=\"hasUnsavedChanges\" class=\"fas fa-warning\"></i>\n            </button>\n        </div>\n        <div class=\"actions-container\">\n            <button *ngIf=\"data.editData.actions.length\" type=\"button\" mat-raised-button [matMenuTriggerFor]=\"menu\">\n                {{data.editData.actionsLabel}}\n            </button>\n            <mat-menu #menu=\"matMenu\">\n                <button *ngFor=\"let action of data.editData.actions\" type=\"button\" mat-menu-item [disabled]=\"editActionDisabled(action)\" (click)=\"runEditAction(action)\">\n                    {{action.displayName}}\n                </button>\n            </mat-menu>\n        \n            <button *ngIf=\"allowDelete\" type=\"button\" mat-raised-button color=\"warn\" class=\"delete-button\" tabindex=\"-1\" (click)=\"delete()\">\n                {{data.editData.deleteButtonLabel}}\n            </button>\n        </div>\n    </div>\n\n    <h1>{{data.editData.title(entityPriorChanges)}}</h1>\n\n    <!----------->\n    <!-- Input -->\n    <!----------->\n    <form>\n        <mat-tab-group *ngIf=\"entityTabs.length > 1\" preserveContent (selectedTabChange)=\"checkOffset()\">\n            <mat-tab *ngFor=\"let tab of entityTabs\" [label]=\"tab.tabName\">\n                <div *ngFor=\"let row of tab.rows\" class=\"row\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"entity\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForEdit]=\"true\"\n                        [class]=\"EntityUtilities.getWidthClasses(entity, key)\"\n                        [isReadOnly]=\"isReadOnly(key)\"\n                        (inputChangeEvent)=\"checkEntity()\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </mat-tab>\n        </mat-tab-group>\n    \n        <div *ngIf=\"entityTabs.length <= 1\">\n            <span *ngIf=\"!entityTabs.length\" class=\"no-entity-tabs\">\n                ERROR: No Inputs. Did you correctly assign all values in the model constructor?\n            </span>\n            <div *ngFor=\"let row of entityTabs[0]?.rows\" class=\"row\">\n                <ngx-mat-entity-input\n                    *ngFor=\"let key of row.keys\"\n                    [entity]=\"entity\"\n                    [propertyKey]=\"key\"\n                    [hideOmitForEdit]=\"true\"\n                    [class]=\"EntityUtilities.getWidthClasses(entity, key)\"\n                    [isReadOnly]=\"isReadOnly(key)\"\n                    (inputChangeEvent)=\"checkEntity()\"\n                >\n                </ngx-mat-entity-input>\n            </div>\n        </div>\n\n        <div class=\"bottom-row-container\">\n            <div class=\"bottom-row container\" style=\"margin-top: 10px;\">\n                <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n                    [disabled]=\"isEntityReadOnly || !isEntityValid || !isEntityDirty\"\n                    [matBadge]=\"validationErrors.length\"\n                    [matBadgeHidden]=\"!validationErrors.length\"\n                    (click)=\"edit()\"\n                >\n                    {{data.editData.confirmButtonLabel}}\n                </button>\n                <ngx-mat-entity-tooltip *ngIf=\"validationErrors.length\" [tooltipContent]=\"tooltipContent\"></ngx-mat-entity-tooltip>\n            </div>\n        </div>\n    </form>\n\n    <br>\n</div>", styles: ["h1{text-align:center}mat-spinner{margin:10px auto}.fa-warning{color:orange}.bottom-row{display:flex;align-items:center;column-gap:10px}.fixed{position:fixed;bottom:0;left:0;right:0;width:100%;z-index:1000;padding:8px 20px;background-color:#fff}.no-entity-tabs{padding:10px;background-color:red;color:#f5f5f5}.header{display:flex;margin-bottom:5px;gap:10px;flex-wrap:wrap}.header button{min-width:150px}.header .cancel-container{display:flex;justify-content:flex-start;align-items:center;column-gap:10px;width:calc(50% - 10px)}.header .actions-container{display:flex;justify-content:flex-end;gap:10px;width:calc(50% - 10px)}.unsavedChanges{background-color:#ffe48d}@media (max-width: 800px){.header{margin-bottom:10px;gap:15px}.header button{min-width:0px;width:50%}.header .save-cancel-container,.header .actions-container{width:100%;gap:15px}}\n"] }]
+                    ], template: " \n<!-- eslint-disable angular/no-call-expression -->\n<!-- eslint-disable angular/cyclomatic-complexity -->\n<div *ngIf=\"!entityTabs && data.displayLoadingSpinner\" class=\"container\">\n    <br>\n    <mat-spinner></mat-spinner>\n    <br>\n</div>\n\n<div *ngIf=\"entityTabs\" class=\"container\">\n    <br>\n\n    <!------------>\n    <!-- Header -->\n    <!------------>\n    <div class=\"header\">\n        <div class=\"cancel-container\">\n            <button type=\"button\" mat-raised-button class=\"back-button\" tabindex=\"-1\" [class.unsavedChanges]=\"hasUnsavedChanges\" (click)=\"navigateBack()\">\n                <i class=\"fas fa-chevron-left\"></i>\n                {{data.editData.cancelButtonLabel}}\n                <i *ngIf=\"hasUnsavedChanges\" class=\"fas fa-warning\"></i>\n            </button>\n        </div>\n        <div class=\"actions-container\">\n            <button *ngIf=\"data.editData.actions.length\" type=\"button\" mat-raised-button [matMenuTriggerFor]=\"menu\">\n                {{data.editData.actionsLabel}}\n            </button>\n            <mat-menu #menu=\"matMenu\">\n                <button *ngFor=\"let action of data.editData.actions\" type=\"button\" mat-menu-item [disabled]=\"editActionDisabled(action)\" (click)=\"runEditAction(action)\">\n                    {{action.displayName}}\n                </button>\n            </mat-menu>\n        \n            <button *ngIf=\"allowDelete\" type=\"button\" mat-raised-button color=\"warn\" class=\"delete-button\" tabindex=\"-1\" (click)=\"delete()\">\n                {{data.editData.deleteButtonLabel}}\n            </button>\n        </div>\n    </div>\n\n    <h1>{{data.editData.title(entityPriorChanges)}}</h1>\n\n    <!----------->\n    <!-- Input -->\n    <!----------->\n    <form>\n        <mat-tab-group *ngIf=\"entityTabs.length > 1\" preserveContent (selectedTabChange)=\"checkOffset()\">\n            <mat-tab *ngFor=\"let tab of entityTabs\" [label]=\"tab.tabName\">\n                <div *ngFor=\"let row of tab.rows\" class=\"row\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"entity\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForEdit]=\"true\"\n                        [class]=\"EntityUtilities.getWidthClasses(entity, key)\"\n                        [isReadOnly]=\"isReadOnly(key)\"\n                        (inputChangeEvent)=\"checkEntity()\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </mat-tab>\n        </mat-tab-group>\n    \n        <div *ngIf=\"entityTabs.length <= 1\">\n            <span *ngIf=\"!entityTabs.length\" class=\"no-entity-tabs\">\n                ERROR: No Inputs. Did you correctly assign all values in the model constructor?\n            </span>\n            <div *ngFor=\"let row of entityTabs[0]?.rows\" class=\"row\">\n                <ngx-mat-entity-input\n                    *ngFor=\"let key of row.keys\"\n                    [entity]=\"entity\"\n                    [propertyKey]=\"key\"\n                    [hideOmitForEdit]=\"true\"\n                    [class]=\"EntityUtilities.getWidthClasses(entity, key)\"\n                    [isReadOnly]=\"isReadOnly(key)\"\n                    (inputChangeEvent)=\"checkEntity()\"\n                >\n                </ngx-mat-entity-input>\n            </div>\n        </div>\n\n        <div class=\"bottom-row-container\">\n            <div class=\"bottom-row container\" style=\"margin-top: 10px;\">\n                <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n                    [disabled]=\"isEntityReadOnly || !isEntityValid || !isEntityDirty\"\n                    [matBadge]=\"validationErrors.length\"\n                    [matBadgeHidden]=\"!validationErrors.length\"\n                    (click)=\"edit()\"\n                >\n                    {{data.editData.confirmButtonLabel}}\n                </button>\n                <ngx-mat-entity-tooltip *ngIf=\"validationErrors.length\" [tooltipContent]=\"tooltipContent\"></ngx-mat-entity-tooltip>\n            </div>\n        </div>\n    </form>\n\n    <br>\n</div>", styles: ["h1{text-align:center}mat-spinner{margin:10px auto}.fa-warning{color:orange}.bottom-row{display:flex;align-items:center;column-gap:10px}.fixed{position:fixed;bottom:0;left:0;right:0;width:100%;z-index:1000;padding:8px 20px;background-color:#fff}.no-entity-tabs{padding:10px;background-color:red;color:#f5f5f5}.header{display:flex;margin-bottom:5px;gap:10px;flex-wrap:wrap}.header button{min-width:150px}.header .cancel-container{display:flex;justify-content:flex-start;align-items:center;column-gap:10px;width:calc(50% - 10px)}.header .actions-container{display:flex;justify-content:flex-end;gap:10px;width:calc(50% - 10px)}.unsavedChanges{background-color:#ffe48d}@media (max-width: 800px){.header{margin-bottom:10px;gap:15px}.header button{min-width:0px;width:50%}.header .cancel-container,.header .actions-container{width:100%;gap:15px}}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.MatDialog }, { type: i1$1.Location }, { type: i2$2.ActivatedRoute }, { type: i0.EnvironmentInjector }, { type: EntityService, decorators: [{
                     type: Inject,
                     args: [NGX_EDIT_DATA_ENTITY_SERVICE]
@@ -7235,7 +7228,7 @@ class NgxMatEntityCreateDialogComponent {
         this.dialogRef.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: NgxMatEntityCreateDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.MatDialogRef }, { token: i0.EnvironmentInjector }, { token: i1.MatDialog }, { token: NGX_INTERNAL_GLOBAL_DEFAULT_VALUES }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: NgxMatEntityCreateDialogComponent, isStandalone: true, selector: "ngx-mat-entity-create-dialog", ngImport: i0, template: "<!-- eslint-disable angular/cyclomatic-complexity -->\n<!-- eslint-disable angular/no-call-expression -->\n \n<div class=\"mat-dialog-title\">\n    <div>{{data.createData.title}}</div>\n</div>\n\n<form>\n    <mat-dialog-content>\n        <mat-tab-group *ngIf=\"entityTabs.length > 1\" preserveContent>\n            <mat-tab *ngFor=\"let tab of entityTabs\" [label]=\"tab.tabName\">\n                <div *ngFor=\"let row of tab.rows\" class=\"row\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"data.entity\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForCreate]=\"true\"\n                        [class]=\"EntityUtilities.getWidthClasses(data.entity, key)\"\n                        (inputChangeEvent)=\"checkIsEntityValid()\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </mat-tab>\n        </mat-tab-group>\n    \n        <div *ngIf=\"entityTabs.length <= 1\">\n            <span *ngIf=\"!entityTabs.length\" class=\"no-entity-tabs\">\n                ERROR: No Inputs. Did you correctly assign all values in the model constructor?\n            </span>\n            <div *ngFor=\"let row of entityTabs[0]?.rows\" class=\"row\">\n                <ngx-mat-entity-input\n                    *ngFor=\"let key of row.keys\"\n                    [entity]=\"data.entity\"\n                    [propertyKey]=\"key\"\n                    [hideOmitForCreate]=\"true\"\n                    [class]=\"EntityUtilities.getWidthClasses(data.entity, key)\"\n                    (inputChangeEvent)=\"checkIsEntityValid()\"\n                >\n                </ngx-mat-entity-input>\n            </div>\n        </div>\n    </mat-dialog-content>\n    \n    <mat-dialog-actions>\n\n        <div class=\"d-flex align-items-center gap-3\" style=\"margin-top: 10px;\">\n            <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n                [disabled]=\"!isEntityValid\"\n                [matBadge]=\"validationErrors.length\"\n                [matBadgeHidden]=\"!validationErrors.length\"\n                (click)=\"create()\"\n            >\n                {{data.createData.createButtonLabel}}\n            </button>\n            <ngx-mat-entity-tooltip *ngIf=\"validationErrors.length\" [tooltipContent]=\"tooltipContent\"></ngx-mat-entity-tooltip>\n        </div>\n\n        <button type=\"button\" mat-raised-button class=\"cancel-button\" (click)=\"cancel()\">\n            {{data.createData.cancelButtonLabel}}\n        </button>\n    </mat-dialog-actions>\n</form>\n", styles: [".mat-dialog-title{padding:20px;display:flex;justify-content:space-between;align-items:center}.mat-dialog-title div{font-size:var(--mdc-dialog-subhead-size, 14px);font-weight:var(--mdc-dialog-subhead-weight, 500)}.no-entity-tabs{padding:10px;background-color:red;color:#f5f5f5}::ng-deep .mdc-dialog .mdc-dialog__content{padding:6px 20px!important}mat-dialog-actions{justify-content:space-between;align-items:center;padding-left:20px;padding-right:20px}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: NgxMatEntityInputModule }, { kind: "component", type: NgxMatEntityInputComponent, selector: "ngx-mat-entity-input", inputs: ["entity", "propertyKey", "getValidationErrorMessage", "hideOmitForCreate", "hideOmitForEdit", "validEmpty", "isReadOnly"], outputs: ["inputChangeEvent"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i5$1.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i5$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i8.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: TooltipComponent, selector: "ngx-mat-entity-tooltip", inputs: ["tooltipContent"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: NgxMatEntityCreateDialogComponent, isStandalone: true, selector: "ngx-mat-entity-create-dialog", ngImport: i0, template: "<!-- eslint-disable angular/cyclomatic-complexity -->\n<!-- eslint-disable angular/no-call-expression -->\n \n<div class=\"mat-dialog-title\">\n    <div>{{data.createData.title}}</div>\n</div>\n\n<form>\n    <mat-dialog-content>\n        <mat-tab-group *ngIf=\"entityTabs.length > 1\" preserveContent>\n            <mat-tab *ngFor=\"let tab of entityTabs\" [label]=\"tab.tabName\">\n                <div *ngFor=\"let row of tab.rows\" class=\"row\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"data.entity\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForCreate]=\"true\"\n                        [class]=\"EntityUtilities.getWidthClasses(data.entity, key)\"\n                        (inputChangeEvent)=\"checkIsEntityValid()\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </mat-tab>\n        </mat-tab-group>\n    \n        <div *ngIf=\"entityTabs.length <= 1\">\n            <span *ngIf=\"!entityTabs.length\" class=\"no-entity-tabs\">\n                ERROR: No Inputs. Did you correctly assign all values in the model constructor?\n            </span>\n            <div *ngFor=\"let row of entityTabs[0]?.rows\" class=\"row\">\n                <ngx-mat-entity-input\n                    *ngFor=\"let key of row.keys\"\n                    [entity]=\"data.entity\"\n                    [propertyKey]=\"key\"\n                    [hideOmitForCreate]=\"true\"\n                    [class]=\"EntityUtilities.getWidthClasses(data.entity, key)\"\n                    (inputChangeEvent)=\"checkIsEntityValid()\"\n                >\n                </ngx-mat-entity-input>\n            </div>\n        </div>\n    </mat-dialog-content>\n    \n    <mat-dialog-actions>\n\n        <div class=\"d-flex align-items-center gap-3\" style=\"margin-top: 10px;\">\n            <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n                [disabled]=\"!isEntityValid\"\n                [matBadge]=\"validationErrors.length\"\n                [matBadgeHidden]=\"!validationErrors.length\"\n                (click)=\"create()\"\n            >\n                {{data.createData.createButtonLabel}}\n            </button>\n            <ngx-mat-entity-tooltip *ngIf=\"validationErrors.length\" [tooltipContent]=\"tooltipContent\"></ngx-mat-entity-tooltip>\n        </div>\n\n        <button type=\"button\" mat-raised-button class=\"cancel-button\" (click)=\"cancel()\">\n            {{data.createData.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)}.no-entity-tabs{padding:10px;background-color:red;color:#f5f5f5}::ng-deep .mdc-dialog .mdc-dialog__content{padding:6px 20px!important}mat-dialog-actions{justify-content:space-between;align-items:center;padding-left:20px;padding-right:20px}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: NgxMatEntityInputModule }, { kind: "component", type: NgxMatEntityInputComponent, selector: "ngx-mat-entity-input", inputs: ["entity", "propertyKey", "getValidationErrorMessage", "hideOmitForCreate", "hideOmitForEdit", "validEmpty", "isReadOnly"], outputs: ["inputChangeEvent"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i5$1.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i5$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i8.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: TooltipComponent, selector: "ngx-mat-entity-tooltip", inputs: ["tooltipContent"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: NgxMatEntityCreateDialogComponent, decorators: [{
             type: Component,
@@ -7249,7 +7242,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImpor
                         MatTabsModule,
                         MatBadgeModule,
                         TooltipComponent
-                    ], template: "<!-- eslint-disable angular/cyclomatic-complexity -->\n<!-- eslint-disable angular/no-call-expression -->\n \n<div class=\"mat-dialog-title\">\n    <div>{{data.createData.title}}</div>\n</div>\n\n<form>\n    <mat-dialog-content>\n        <mat-tab-group *ngIf=\"entityTabs.length > 1\" preserveContent>\n            <mat-tab *ngFor=\"let tab of entityTabs\" [label]=\"tab.tabName\">\n                <div *ngFor=\"let row of tab.rows\" class=\"row\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"data.entity\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForCreate]=\"true\"\n                        [class]=\"EntityUtilities.getWidthClasses(data.entity, key)\"\n                        (inputChangeEvent)=\"checkIsEntityValid()\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </mat-tab>\n        </mat-tab-group>\n    \n        <div *ngIf=\"entityTabs.length <= 1\">\n            <span *ngIf=\"!entityTabs.length\" class=\"no-entity-tabs\">\n                ERROR: No Inputs. Did you correctly assign all values in the model constructor?\n            </span>\n            <div *ngFor=\"let row of entityTabs[0]?.rows\" class=\"row\">\n                <ngx-mat-entity-input\n                    *ngFor=\"let key of row.keys\"\n                    [entity]=\"data.entity\"\n                    [propertyKey]=\"key\"\n                    [hideOmitForCreate]=\"true\"\n                    [class]=\"EntityUtilities.getWidthClasses(data.entity, key)\"\n                    (inputChangeEvent)=\"checkIsEntityValid()\"\n                >\n                </ngx-mat-entity-input>\n            </div>\n        </div>\n    </mat-dialog-content>\n    \n    <mat-dialog-actions>\n\n        <div class=\"d-flex align-items-center gap-3\" style=\"margin-top: 10px;\">\n            <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n                [disabled]=\"!isEntityValid\"\n                [matBadge]=\"validationErrors.length\"\n                [matBadgeHidden]=\"!validationErrors.length\"\n                (click)=\"create()\"\n            >\n                {{data.createData.createButtonLabel}}\n            </button>\n            <ngx-mat-entity-tooltip *ngIf=\"validationErrors.length\" [tooltipContent]=\"tooltipContent\"></ngx-mat-entity-tooltip>\n        </div>\n\n        <button type=\"button\" mat-raised-button class=\"cancel-button\" (click)=\"cancel()\">\n            {{data.createData.cancelButtonLabel}}\n        </button>\n    </mat-dialog-actions>\n</form>\n", styles: [".mat-dialog-title{padding:20px;display:flex;justify-content:space-between;align-items:center}.mat-dialog-title div{font-size:var(--mdc-dialog-subhead-size, 14px);font-weight:var(--mdc-dialog-subhead-weight, 500)}.no-entity-tabs{padding:10px;background-color:red;color:#f5f5f5}::ng-deep .mdc-dialog .mdc-dialog__content{padding:6px 20px!important}mat-dialog-actions{justify-content:space-between;align-items:center;padding-left:20px;padding-right:20px}\n"] }]
+                    ], template: "<!-- eslint-disable angular/cyclomatic-complexity -->\n<!-- eslint-disable angular/no-call-expression -->\n \n<div class=\"mat-dialog-title\">\n    <div>{{data.createData.title}}</div>\n</div>\n\n<form>\n    <mat-dialog-content>\n        <mat-tab-group *ngIf=\"entityTabs.length > 1\" preserveContent>\n            <mat-tab *ngFor=\"let tab of entityTabs\" [label]=\"tab.tabName\">\n                <div *ngFor=\"let row of tab.rows\" class=\"row\">\n                    <ngx-mat-entity-input\n                        *ngFor=\"let key of row.keys\"\n                        [entity]=\"data.entity\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForCreate]=\"true\"\n                        [class]=\"EntityUtilities.getWidthClasses(data.entity, key)\"\n                        (inputChangeEvent)=\"checkIsEntityValid()\"\n                    >\n                    </ngx-mat-entity-input>\n                </div>\n            </mat-tab>\n        </mat-tab-group>\n    \n        <div *ngIf=\"entityTabs.length <= 1\">\n            <span *ngIf=\"!entityTabs.length\" class=\"no-entity-tabs\">\n                ERROR: No Inputs. Did you correctly assign all values in the model constructor?\n            </span>\n            <div *ngFor=\"let row of entityTabs[0]?.rows\" class=\"row\">\n                <ngx-mat-entity-input\n                    *ngFor=\"let key of row.keys\"\n                    [entity]=\"data.entity\"\n                    [propertyKey]=\"key\"\n                    [hideOmitForCreate]=\"true\"\n                    [class]=\"EntityUtilities.getWidthClasses(data.entity, key)\"\n                    (inputChangeEvent)=\"checkIsEntityValid()\"\n                >\n                </ngx-mat-entity-input>\n            </div>\n        </div>\n    </mat-dialog-content>\n    \n    <mat-dialog-actions>\n\n        <div class=\"d-flex align-items-center gap-3\" style=\"margin-top: 10px;\">\n            <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n                [disabled]=\"!isEntityValid\"\n                [matBadge]=\"validationErrors.length\"\n                [matBadgeHidden]=\"!validationErrors.length\"\n                (click)=\"create()\"\n            >\n                {{data.createData.createButtonLabel}}\n            </button>\n            <ngx-mat-entity-tooltip *ngIf=\"validationErrors.length\" [tooltipContent]=\"tooltipContent\"></ngx-mat-entity-tooltip>\n        </div>\n\n        <button type=\"button\" mat-raised-button class=\"cancel-button\" (click)=\"cancel()\">\n            {{data.createData.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)}.no-entity-tabs{padding:10px;background-color:red;color:#f5f5f5}::ng-deep .mdc-dialog .mdc-dialog__content{padding:6px 20px!important}mat-dialog-actions{justify-content:space-between;align-items:center;padding-left:20px;padding-right:20px}\n"] }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -8010,7 +8003,7 @@ class NgxMatEntityTableComponent {
         this.dataSource.filter = filterValue.trim().toLowerCase();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: NgxMatEntityTableComponent, deps: [{ token: i1.MatDialog }, { token: i0.EnvironmentInjector }, { token: i2$2.Router }, { token: NGX_INTERNAL_GLOBAL_DEFAULT_VALUES }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: NgxMatEntityTableComponent, isStandalone: true, selector: "ngx-mat-entity-table", inputs: { tableData: "tableData" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }, { propertyName: "filter", first: true, predicate: ["filter"], descendants: true, static: true }], ngImport: i0, template: "<!-- eslint-disable angular/cyclomatic-complexity -->\n<!-- eslint-disable angular/no-call-expression -->\n<h1 class=\"title\">{{data.baseData.title}}</h1>\n\n<div class=\"row\">\n    <mat-form-field class=\"col-lg-8 col-md-6 col-sm-12\">\n        <mat-label>{{data.baseData.searchLabel}}</mat-label>\n        <input matInput (keyup)=\"applyFilter($event)\">\n    </mat-form-field>\n    <div\n        *ngIf=\"data.baseData.tableActions.length\"\n        [class.col-lg-2]=\"allowCreate\"\n        [class.col-lg-4]=\"!allowCreate\"\n        [class.col-md-3]=\"allowCreate\"\n        [class.col-md-6]=\"!allowCreate\"\n        [class.col-sm-6]=\"allowCreate\"\n        [class.col-sm-12]=\"!allowCreate\"\n    >\n        <button type=\"button\" class=\"actions-button\" mat-raised-button [matMenuTriggerFor]=\"menu\">\n            {{data.baseData.tableActionsLabel}}\n        </button>\n    </div>\n    <mat-menu #menu=\"matMenu\">\n        <button *ngIf=\"data.baseData.allowJsonImport\" type=\"button\" mat-menu-item [disabled]=\"tableActionDisabled(importAction)\" (click)=\"runTableAction(importAction)\">\n            {{importAction.displayName}}\n        </button>\n        <button *ngFor=\"let action of data.baseData.tableActions\" type=\"button\" mat-menu-item [disabled]=\"tableActionDisabled(action)\" (click)=\"runTableAction(action)\">\n            {{action.displayName}}\n        </button>\n    </mat-menu>\n\n    <div\n        *ngIf=\"allowCreate\"\n        [class.col-lg-2]=\"data.baseData.tableActions.length\"\n        [class.col-lg-4]=\"!data.baseData.tableActions.length\"\n        [class.col-md-3]=\"data.baseData.tableActions.length\"\n        [class.col-md-6]=\"!data.baseData.tableActions.length\"\n        [class.col-sm-6]=\"data.baseData.tableActions.length\"\n        [class.col-sm-12]=\"!data.baseData.tableActions.length\"\n    >\n        <button type=\"button\" class=\"create-button\" mat-raised-button (click)=\"createEntity()\">\n            {{data.baseData.createButtonLabel}}\n        </button>\n    </div>\n</div>\n\n<div class=\"mat-elevation-z8\">\n    <mat-table matSort [dataSource]=\"dataSource\">\n        <!-- select Column -->\n        <ng-container matColumnDef=\"select\">\n            <mat-header-cell *matHeaderCellDef>\n                <mat-checkbox [checked]=\"selection.hasValue() && SelectionUtilities.isAllSelected(selection, dataSource)\"\n                    [indeterminate]=\"selection.hasValue() && !SelectionUtilities.isAllSelected(selection, dataSource)\"\n                    (change)=\"$event ? SelectionUtilities.masterToggle(selection, dataSource) : null\">\n                </mat-checkbox>\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let entity\" class=\"entity\" [dynamicStyleClasses]=\"data.baseData.dynamicRowStyleClasses\" [entity]=\"entity\">\n                <mat-checkbox [checked]=\"selection.isSelected(entity)\"\n                    (click)=\"$event.stopPropagation()\"\n                    (change)=\"$event ? selection.toggle(entity) : null\">\n                </mat-checkbox>\n            </mat-cell>\n        </ng-container>\n\n        <ng-container *ngFor=\"let dCol of data.baseData.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n            <mat-header-cell *matHeaderCellDef mat-sort-header>\n                {{dCol.displayName}}\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let entity\" class=\"entity\"\n                [class.enabled]=\"!dCol.disableClick && (allowUpdate(entity) || allowRead(entity))\"\n                [dynamicStyleClasses]=\"data.baseData.dynamicRowStyleClasses\" [entity]=\"entity\"\n                (click)=\"editEntity(entity, dCol)\"\n            >\n                <ng-container *ngIf=\"dCol.Component\">\n                    <display-column-value [entity]=\"entity\" [ComponentClass]=\"dCol.Component\"></display-column-value>\n                </ng-container>\n                <ng-container *ngIf=\"!dCol.Component\">\n                    {{getDisplayColumnValue(entity, dCol)}}\n                </ng-container>\n            </mat-cell>\n        </ng-container>\n\n        <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n        <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n    </mat-table>\n\n    <mat-spinner *ngIf=\"isLoading && data.baseData.displayLoadingSpinner\">\n    </mat-spinner>\n\n    <mat-paginator [length]=\"dataSource.filteredData.length\" [pageIndex]=\"0\" [pageSize]=\"10\" [pageSizeOptions]=\"[5, 10, 25, 50]\"></mat-paginator>\n</div>", styles: [".mdc-data-table__row:last-child .mdc-data-table__cell{border-bottom:1px solid rgba(0,0,0,.12)}button{width:100%}mat-spinner{margin:10px auto}.title{text-align:center}.actions-button,.create-button{height:56px;line-height:24px;font-size:16px}.mat-column-select{flex:0 0 75px}.enabled:hover{cursor:pointer}@media (max-width: 767px){.actions-button,.create-button{margin-bottom:15px}}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i6.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i14.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i17.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i17.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i13.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i13.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i13.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i15.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: DisplayColumnValueComponent, selector: "display-column-value", inputs: ["entity", "ComponentClass"] }, { kind: "directive", type: DynamicStyleClassDirective, selector: "[dynamicStyleClasses]", inputs: ["dynamicStyleClasses", "entity"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: NgxMatEntityTableComponent, isStandalone: true, selector: "ngx-mat-entity-table", inputs: { tableData: "tableData" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }, { propertyName: "filter", first: true, predicate: ["filter"], descendants: true, static: true }], ngImport: i0, template: "<!-- eslint-disable angular/cyclomatic-complexity -->\n<!-- eslint-disable angular/no-call-expression -->\n<h1 class=\"title\">{{data.baseData.title}}</h1>\n\n<div class=\"row\">\n    <mat-form-field class=\"col-lg-8 col-md-6 col-sm-12\">\n        <mat-label>{{data.baseData.searchLabel}}</mat-label>\n        <input matInput (keyup)=\"applyFilter($event)\">\n    </mat-form-field>\n    <div\n        *ngIf=\"data.baseData.tableActions.length\"\n        [class.col-lg-2]=\"allowCreate\"\n        [class.col-lg-4]=\"!allowCreate\"\n        [class.col-md-3]=\"allowCreate\"\n        [class.col-md-6]=\"!allowCreate\"\n        [class.col-sm-6]=\"allowCreate\"\n        [class.col-sm-12]=\"!allowCreate\"\n    >\n        <button type=\"button\" class=\"actions-button\" mat-raised-button [matMenuTriggerFor]=\"menu\">\n            {{data.baseData.tableActionsLabel}}\n        </button>\n    </div>\n    <mat-menu #menu=\"matMenu\">\n        <button *ngIf=\"data.baseData.allowJsonImport\" type=\"button\" mat-menu-item [disabled]=\"tableActionDisabled(importAction)\" (click)=\"runTableAction(importAction)\">\n            {{importAction.displayName}}\n        </button>\n        <button *ngFor=\"let action of data.baseData.tableActions\" type=\"button\" mat-menu-item [disabled]=\"tableActionDisabled(action)\" (click)=\"runTableAction(action)\">\n            {{action.displayName}}\n        </button>\n    </mat-menu>\n\n    <div\n        *ngIf=\"allowCreate\"\n        [class.col-lg-2]=\"data.baseData.tableActions.length\"\n        [class.col-lg-4]=\"!data.baseData.tableActions.length\"\n        [class.col-md-3]=\"data.baseData.tableActions.length\"\n        [class.col-md-6]=\"!data.baseData.tableActions.length\"\n        [class.col-sm-6]=\"data.baseData.tableActions.length\"\n        [class.col-sm-12]=\"!data.baseData.tableActions.length\"\n    >\n        <button type=\"button\" class=\"create-button\" mat-raised-button (click)=\"createEntity()\">\n            {{data.baseData.createButtonLabel}}\n        </button>\n    </div>\n</div>\n\n<div class=\"mat-elevation-z8\">\n    <mat-table matSort [dataSource]=\"dataSource\">\n        <!-- select Column -->\n        <ng-container matColumnDef=\"select\">\n            <mat-header-cell *matHeaderCellDef>\n                <mat-checkbox [checked]=\"selection.hasValue() && SelectionUtilities.isAllSelected(selection, dataSource)\"\n                    [indeterminate]=\"selection.hasValue() && !SelectionUtilities.isAllSelected(selection, dataSource)\"\n                    (change)=\"$event ? SelectionUtilities.masterToggle(selection, dataSource) : null\">\n                </mat-checkbox>\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let entity\" class=\"entity\" [dynamicStyleClasses]=\"data.baseData.dynamicRowStyleClasses\" [entity]=\"entity\">\n                <mat-checkbox [checked]=\"selection.isSelected(entity)\"\n                    (click)=\"$event.stopPropagation()\"\n                    (change)=\"$event ? selection.toggle(entity) : null\">\n                </mat-checkbox>\n            </mat-cell>\n        </ng-container>\n\n        <ng-container *ngFor=\"let dCol of data.baseData.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n            <mat-header-cell *matHeaderCellDef mat-sort-header>\n                {{dCol.displayName}}\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let entity\" class=\"entity\"\n                [class.enabled]=\"!dCol.disableClick && (allowUpdate(entity) || allowRead(entity))\"\n                [dynamicStyleClasses]=\"data.baseData.dynamicRowStyleClasses\" [entity]=\"entity\"\n                (click)=\"editEntity(entity, dCol)\"\n            >\n                <ng-container *ngIf=\"dCol.Component\">\n                    <display-column-value [entity]=\"entity\" [ComponentClass]=\"dCol.Component\"></display-column-value>\n                </ng-container>\n                <ng-container *ngIf=\"!dCol.Component\">\n                    {{getDisplayColumnValue(entity, dCol)}}\n                </ng-container>\n            </mat-cell>\n        </ng-container>\n\n        <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n        <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n    </mat-table>\n\n    <mat-spinner *ngIf=\"isLoading && data.baseData.displayLoadingSpinner\">\n    </mat-spinner>\n\n    <mat-paginator style=\"padding-top: 10px; padding-bottom: 10px;\" [length]=\"dataSource.filteredData.length\" [pageIndex]=\"0\" [pageSize]=\"10\" [pageSizeOptions]=\"[5, 10, 25, 50]\"></mat-paginator>\n</div>", styles: [".mdc-data-table__row:last-child .mdc-data-table__cell{border-bottom:1px solid rgba(0,0,0,.12)}button{width:100%}mat-spinner{margin:10px auto}.title{text-align:center}.actions-button,.create-button{height:56px;line-height:24px;font-size:16px}.mat-column-select{flex:0 0 48px;padding-left:0;padding-right:0;justify-content:center}.enabled:hover{cursor:pointer}@media (max-width: 767px){.actions-button,.create-button{margin-bottom:15px}}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i6.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i14.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i17.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i17.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i13.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i13.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i13.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i15.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: DisplayColumnValueComponent, selector: "display-column-value", inputs: ["entity", "ComponentClass"] }, { kind: "directive", type: DynamicStyleClassDirective, selector: "[dynamicStyleClasses]", inputs: ["dynamicStyleClasses", "entity"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: NgxMatEntityTableComponent, decorators: [{
             type: Component,
@@ -8032,7 +8025,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImpor
                         NgxMatEntityEditDialogComponent,
                         DisplayColumnValueComponent,
                         DynamicStyleClassDirective
-                    ], template: "<!-- eslint-disable angular/cyclomatic-complexity -->\n<!-- eslint-disable angular/no-call-expression -->\n<h1 class=\"title\">{{data.baseData.title}}</h1>\n\n<div class=\"row\">\n    <mat-form-field class=\"col-lg-8 col-md-6 col-sm-12\">\n        <mat-label>{{data.baseData.searchLabel}}</mat-label>\n        <input matInput (keyup)=\"applyFilter($event)\">\n    </mat-form-field>\n    <div\n        *ngIf=\"data.baseData.tableActions.length\"\n        [class.col-lg-2]=\"allowCreate\"\n        [class.col-lg-4]=\"!allowCreate\"\n        [class.col-md-3]=\"allowCreate\"\n        [class.col-md-6]=\"!allowCreate\"\n        [class.col-sm-6]=\"allowCreate\"\n        [class.col-sm-12]=\"!allowCreate\"\n    >\n        <button type=\"button\" class=\"actions-button\" mat-raised-button [matMenuTriggerFor]=\"menu\">\n            {{data.baseData.tableActionsLabel}}\n        </button>\n    </div>\n    <mat-menu #menu=\"matMenu\">\n        <button *ngIf=\"data.baseData.allowJsonImport\" type=\"button\" mat-menu-item [disabled]=\"tableActionDisabled(importAction)\" (click)=\"runTableAction(importAction)\">\n            {{importAction.displayName}}\n        </button>\n        <button *ngFor=\"let action of data.baseData.tableActions\" type=\"button\" mat-menu-item [disabled]=\"tableActionDisabled(action)\" (click)=\"runTableAction(action)\">\n            {{action.displayName}}\n        </button>\n    </mat-menu>\n\n    <div\n        *ngIf=\"allowCreate\"\n        [class.col-lg-2]=\"data.baseData.tableActions.length\"\n        [class.col-lg-4]=\"!data.baseData.tableActions.length\"\n        [class.col-md-3]=\"data.baseData.tableActions.length\"\n        [class.col-md-6]=\"!data.baseData.tableActions.length\"\n        [class.col-sm-6]=\"data.baseData.tableActions.length\"\n        [class.col-sm-12]=\"!data.baseData.tableActions.length\"\n    >\n        <button type=\"button\" class=\"create-button\" mat-raised-button (click)=\"createEntity()\">\n            {{data.baseData.createButtonLabel}}\n        </button>\n    </div>\n</div>\n\n<div class=\"mat-elevation-z8\">\n    <mat-table matSort [dataSource]=\"dataSource\">\n        <!-- select Column -->\n        <ng-container matColumnDef=\"select\">\n            <mat-header-cell *matHeaderCellDef>\n                <mat-checkbox [checked]=\"selection.hasValue() && SelectionUtilities.isAllSelected(selection, dataSource)\"\n                    [indeterminate]=\"selection.hasValue() && !SelectionUtilities.isAllSelected(selection, dataSource)\"\n                    (change)=\"$event ? SelectionUtilities.masterToggle(selection, dataSource) : null\">\n                </mat-checkbox>\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let entity\" class=\"entity\" [dynamicStyleClasses]=\"data.baseData.dynamicRowStyleClasses\" [entity]=\"entity\">\n                <mat-checkbox [checked]=\"selection.isSelected(entity)\"\n                    (click)=\"$event.stopPropagation()\"\n                    (change)=\"$event ? selection.toggle(entity) : null\">\n                </mat-checkbox>\n            </mat-cell>\n        </ng-container>\n\n        <ng-container *ngFor=\"let dCol of data.baseData.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n            <mat-header-cell *matHeaderCellDef mat-sort-header>\n                {{dCol.displayName}}\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let entity\" class=\"entity\"\n                [class.enabled]=\"!dCol.disableClick && (allowUpdate(entity) || allowRead(entity))\"\n                [dynamicStyleClasses]=\"data.baseData.dynamicRowStyleClasses\" [entity]=\"entity\"\n                (click)=\"editEntity(entity, dCol)\"\n            >\n                <ng-container *ngIf=\"dCol.Component\">\n                    <display-column-value [entity]=\"entity\" [ComponentClass]=\"dCol.Component\"></display-column-value>\n                </ng-container>\n                <ng-container *ngIf=\"!dCol.Component\">\n                    {{getDisplayColumnValue(entity, dCol)}}\n                </ng-container>\n            </mat-cell>\n        </ng-container>\n\n        <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n        <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n    </mat-table>\n\n    <mat-spinner *ngIf=\"isLoading && data.baseData.displayLoadingSpinner\">\n    </mat-spinner>\n\n    <mat-paginator [length]=\"dataSource.filteredData.length\" [pageIndex]=\"0\" [pageSize]=\"10\" [pageSizeOptions]=\"[5, 10, 25, 50]\"></mat-paginator>\n</div>", styles: [".mdc-data-table__row:last-child .mdc-data-table__cell{border-bottom:1px solid rgba(0,0,0,.12)}button{width:100%}mat-spinner{margin:10px auto}.title{text-align:center}.actions-button,.create-button{height:56px;line-height:24px;font-size:16px}.mat-column-select{flex:0 0 75px}.enabled:hover{cursor:pointer}@media (max-width: 767px){.actions-button,.create-button{margin-bottom:15px}}\n"] }]
+                    ], template: "<!-- eslint-disable angular/cyclomatic-complexity -->\n<!-- eslint-disable angular/no-call-expression -->\n<h1 class=\"title\">{{data.baseData.title}}</h1>\n\n<div class=\"row\">\n    <mat-form-field class=\"col-lg-8 col-md-6 col-sm-12\">\n        <mat-label>{{data.baseData.searchLabel}}</mat-label>\n        <input matInput (keyup)=\"applyFilter($event)\">\n    </mat-form-field>\n    <div\n        *ngIf=\"data.baseData.tableActions.length\"\n        [class.col-lg-2]=\"allowCreate\"\n        [class.col-lg-4]=\"!allowCreate\"\n        [class.col-md-3]=\"allowCreate\"\n        [class.col-md-6]=\"!allowCreate\"\n        [class.col-sm-6]=\"allowCreate\"\n        [class.col-sm-12]=\"!allowCreate\"\n    >\n        <button type=\"button\" class=\"actions-button\" mat-raised-button [matMenuTriggerFor]=\"menu\">\n            {{data.baseData.tableActionsLabel}}\n        </button>\n    </div>\n    <mat-menu #menu=\"matMenu\">\n        <button *ngIf=\"data.baseData.allowJsonImport\" type=\"button\" mat-menu-item [disabled]=\"tableActionDisabled(importAction)\" (click)=\"runTableAction(importAction)\">\n            {{importAction.displayName}}\n        </button>\n        <button *ngFor=\"let action of data.baseData.tableActions\" type=\"button\" mat-menu-item [disabled]=\"tableActionDisabled(action)\" (click)=\"runTableAction(action)\">\n            {{action.displayName}}\n        </button>\n    </mat-menu>\n\n    <div\n        *ngIf=\"allowCreate\"\n        [class.col-lg-2]=\"data.baseData.tableActions.length\"\n        [class.col-lg-4]=\"!data.baseData.tableActions.length\"\n        [class.col-md-3]=\"data.baseData.tableActions.length\"\n        [class.col-md-6]=\"!data.baseData.tableActions.length\"\n        [class.col-sm-6]=\"data.baseData.tableActions.length\"\n        [class.col-sm-12]=\"!data.baseData.tableActions.length\"\n    >\n        <button type=\"button\" class=\"create-button\" mat-raised-button (click)=\"createEntity()\">\n            {{data.baseData.createButtonLabel}}\n        </button>\n    </div>\n</div>\n\n<div class=\"mat-elevation-z8\">\n    <mat-table matSort [dataSource]=\"dataSource\">\n        <!-- select Column -->\n        <ng-container matColumnDef=\"select\">\n            <mat-header-cell *matHeaderCellDef>\n                <mat-checkbox [checked]=\"selection.hasValue() && SelectionUtilities.isAllSelected(selection, dataSource)\"\n                    [indeterminate]=\"selection.hasValue() && !SelectionUtilities.isAllSelected(selection, dataSource)\"\n                    (change)=\"$event ? SelectionUtilities.masterToggle(selection, dataSource) : null\">\n                </mat-checkbox>\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let entity\" class=\"entity\" [dynamicStyleClasses]=\"data.baseData.dynamicRowStyleClasses\" [entity]=\"entity\">\n                <mat-checkbox [checked]=\"selection.isSelected(entity)\"\n                    (click)=\"$event.stopPropagation()\"\n                    (change)=\"$event ? selection.toggle(entity) : null\">\n                </mat-checkbox>\n            </mat-cell>\n        </ng-container>\n\n        <ng-container *ngFor=\"let dCol of data.baseData.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n            <mat-header-cell *matHeaderCellDef mat-sort-header>\n                {{dCol.displayName}}\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let entity\" class=\"entity\"\n                [class.enabled]=\"!dCol.disableClick && (allowUpdate(entity) || allowRead(entity))\"\n                [dynamicStyleClasses]=\"data.baseData.dynamicRowStyleClasses\" [entity]=\"entity\"\n                (click)=\"editEntity(entity, dCol)\"\n            >\n                <ng-container *ngIf=\"dCol.Component\">\n                    <display-column-value [entity]=\"entity\" [ComponentClass]=\"dCol.Component\"></display-column-value>\n                </ng-container>\n                <ng-container *ngIf=\"!dCol.Component\">\n                    {{getDisplayColumnValue(entity, dCol)}}\n                </ng-container>\n            </mat-cell>\n        </ng-container>\n\n        <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n        <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n    </mat-table>\n\n    <mat-spinner *ngIf=\"isLoading && data.baseData.displayLoadingSpinner\">\n    </mat-spinner>\n\n    <mat-paginator style=\"padding-top: 10px; padding-bottom: 10px;\" [length]=\"dataSource.filteredData.length\" [pageIndex]=\"0\" [pageSize]=\"10\" [pageSizeOptions]=\"[5, 10, 25, 50]\"></mat-paginator>\n</div>", styles: [".mdc-data-table__row:last-child .mdc-data-table__cell{border-bottom:1px solid rgba(0,0,0,.12)}button{width:100%}mat-spinner{margin:10px auto}.title{text-align:center}.actions-button,.create-button{height:56px;line-height:24px;font-size:16px}.mat-column-select{flex:0 0 48px;padding-left:0;padding-right:0;justify-content:center}.enabled:hover{cursor:pointer}@media (max-width: 767px){.actions-button,.create-button{margin-bottom:15px}}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.MatDialog }, { type: i0.EnvironmentInjector }, { type: i2$2.Router }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [NGX_INTERNAL_GLOBAL_DEFAULT_VALUES]