ngx-material-entity 18.2.3 → 18.2.4

package/fesm2022/ngx-material-entity.mjs

@@ -4051,7 +4051,7 @@ class ArrayDateInputComponent extends ArrayTableComponent {
         this.setTableConfig();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: ArrayDateInputComponent, deps: [{ token: i1.MatDialog }, { token: i2$1.HttpClient }, { token: NGX_COMPLETE_GLOBAL_DEFAULT_VALUES }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.7", type: ArrayDateInputComponent, isStandalone: true, 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    @if (!isReadOnly) {\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.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]=\"!selected.length\"\n                (click)=\"remove()\">\n                {{metadata.removeButtonLabel}}\n            </button>\n        </div>\n    }\n\n    <custom-table\n        [configuration]=\"tableConfig\"\n        [data]=\"propertyValue\"\n        [required]=\"metadata.required(entity)\"\n        (selectionChanged)=\"selected = $any($event)\"\n    >\n    </custom-table>\n</div>", styles: ["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 15px 0;margin-bottom:15px;margin-top:15px}.array-headline{padding-bottom:10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i2$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$3.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: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: CustomTableComponent, selector: "custom-table", inputs: ["data", "searchString", "required", "isLoading", "configuration"], outputs: ["cellClicked", "selectionChanged"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.7", type: ArrayDateInputComponent, isStandalone: true, 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    @if (!isReadOnly) {\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.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]=\"!selected.length\"\n                (click)=\"remove()\">\n                {{metadata.removeButtonLabel}}\n            </button>\n        </div>\n    }\n\n    <custom-table\n        [configuration]=\"tableConfig\"\n        [data]=\"propertyValue\"\n        [required]=\"metadata.required(entity)\"\n        (selectionChanged)=\"selected = $any($event)\"\n    >\n    </custom-table>\n</div>", styles: ["mat-form-field{width:100%}.buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px;flex-wrap:wrap;gap:10px;column-gap:24px}.buttons button{flex-grow:1}.elevation-container{border-radius:5px;padding:15px 15px 0;margin-bottom:15px;margin-top:15px}.array-headline{padding-bottom:10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i2$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$3.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: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: CustomTableComponent, selector: "custom-table", inputs: ["data", "searchString", "required", "isLoading", "configuration"], outputs: ["cellClicked", "selectionChanged"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: ArrayDateInputComponent, decorators: [{
             type: Component,
@@ -4063,7 +4063,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImpor
                         MatInputModule,
                         MatButtonModule,
                         CustomTableComponent
-                    ], 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    @if (!isReadOnly) {\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.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]=\"!selected.length\"\n                (click)=\"remove()\">\n                {{metadata.removeButtonLabel}}\n            </button>\n        </div>\n    }\n\n    <custom-table\n        [configuration]=\"tableConfig\"\n        [data]=\"propertyValue\"\n        [required]=\"metadata.required(entity)\"\n        (selectionChanged)=\"selected = $any($event)\"\n    >\n    </custom-table>\n</div>", styles: ["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 15px 0;margin-bottom:15px;margin-top:15px}.array-headline{padding-bottom:10px}\n"] }]
+                    ], 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    @if (!isReadOnly) {\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.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]=\"!selected.length\"\n                (click)=\"remove()\">\n                {{metadata.removeButtonLabel}}\n            </button>\n        </div>\n    }\n\n    <custom-table\n        [configuration]=\"tableConfig\"\n        [data]=\"propertyValue\"\n        [required]=\"metadata.required(entity)\"\n        (selectionChanged)=\"selected = $any($event)\"\n    >\n    </custom-table>\n</div>", styles: ["mat-form-field{width:100%}.buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px;flex-wrap:wrap;gap:10px;column-gap:24px}.buttons button{flex-grow:1}.elevation-container{border-radius:5px;padding:15px 15px 0;margin-bottom:15px;margin-top:15px}.array-headline{padding-bottom:10px}\n"] }]
         }], ctorParameters: () => [{ type: i1.MatDialog }, { type: i2$1.HttpClient }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [NGX_COMPLETE_GLOBAL_DEFAULT_VALUES]
@@ -4113,7 +4113,7 @@ class ArrayDateRangeInputComponent extends ArrayTableComponent {
         this.dateRangeEnd = undefined;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: ArrayDateRangeInputComponent, deps: [{ token: i1.MatDialog }, { token: i2$1.HttpClient }, { token: NGX_COMPLETE_GLOBAL_DEFAULT_VALUES }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.7", type: ArrayDateRangeInputComponent, isStandalone: true, 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    @if (!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            @if (startModel.errors) {\n                <mat-error>{{getValidationErrorMessage(startModel)}}</mat-error>\n            }\n            @if (!startModel.errors && endModel.errors) {\n                <mat-error>{{getValidationErrorMessage(endModel)}}</mat-error>\n            }\n        </mat-form-field>\n        \n        <div class=\"buttons\">\n            <button type=\"button\" mat-raised-button\n                [disabled]=\"startModel.errors || endModel.errors\"\n                (click)=\"add()\">\n                {{metadata.addButtonLabel}}\n            </button>\n            <button type=\"button\" mat-raised-button\n                [disabled]=\"!selected.length\"\n                (click)=\"remove()\">\n                {{metadata.removeButtonLabel}}\n            </button>\n        </div>\n    }\n\n    <custom-table\n        [configuration]=\"tableConfig\"\n        [data]=\"propertyValue\"\n        [required]=\"metadata.required(entity)\"\n        (selectionChanged)=\"selected = $any($event)\"\n    >\n    </custom-table>\n</div>", styles: ["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 15px 0;margin-bottom:15px;margin-top:15px}.array-headline{padding-bottom:10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i2$2.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i2$2.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i2$2.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i2$2.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: CustomTableComponent, selector: "custom-table", inputs: ["data", "searchString", "required", "isLoading", "configuration"], outputs: ["cellClicked", "selectionChanged"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.7", type: ArrayDateRangeInputComponent, isStandalone: true, 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    @if (!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            @if (startModel.errors) {\n                <mat-error>{{getValidationErrorMessage(startModel)}}</mat-error>\n            }\n            @if (!startModel.errors && endModel.errors) {\n                <mat-error>{{getValidationErrorMessage(endModel)}}</mat-error>\n            }\n        </mat-form-field>\n        \n        <div class=\"buttons\">\n            <button type=\"button\" mat-raised-button\n                [disabled]=\"startModel.errors || endModel.errors\"\n                (click)=\"add()\">\n                {{metadata.addButtonLabel}}\n            </button>\n            <button type=\"button\" mat-raised-button\n                [disabled]=\"!selected.length\"\n                (click)=\"remove()\">\n                {{metadata.removeButtonLabel}}\n            </button>\n        </div>\n    }\n\n    <custom-table\n        [configuration]=\"tableConfig\"\n        [data]=\"propertyValue\"\n        [required]=\"metadata.required(entity)\"\n        (selectionChanged)=\"selected = $any($event)\"\n    >\n    </custom-table>\n</div>", styles: ["mat-form-field{width:100%}.buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px;flex-wrap:wrap;gap:10px;column-gap:24px}.buttons button{flex-grow:1}.elevation-container{border-radius:5px;padding:15px 15px 0;margin-bottom:15px;margin-top:15px}.array-headline{padding-bottom:10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i2$2.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i2$2.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i2$2.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i2$2.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: CustomTableComponent, selector: "custom-table", inputs: ["data", "searchString", "required", "isLoading", "configuration"], outputs: ["cellClicked", "selectionChanged"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: ArrayDateRangeInputComponent, decorators: [{
             type: Component,
@@ -4124,7 +4124,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImpor
                         FormsModule,
                         MatButtonModule,
                         CustomTableComponent
-                    ], 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    @if (!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            @if (startModel.errors) {\n                <mat-error>{{getValidationErrorMessage(startModel)}}</mat-error>\n            }\n            @if (!startModel.errors && endModel.errors) {\n                <mat-error>{{getValidationErrorMessage(endModel)}}</mat-error>\n            }\n        </mat-form-field>\n        \n        <div class=\"buttons\">\n            <button type=\"button\" mat-raised-button\n                [disabled]=\"startModel.errors || endModel.errors\"\n                (click)=\"add()\">\n                {{metadata.addButtonLabel}}\n            </button>\n            <button type=\"button\" mat-raised-button\n                [disabled]=\"!selected.length\"\n                (click)=\"remove()\">\n                {{metadata.removeButtonLabel}}\n            </button>\n        </div>\n    }\n\n    <custom-table\n        [configuration]=\"tableConfig\"\n        [data]=\"propertyValue\"\n        [required]=\"metadata.required(entity)\"\n        (selectionChanged)=\"selected = $any($event)\"\n    >\n    </custom-table>\n</div>", styles: ["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 15px 0;margin-bottom:15px;margin-top:15px}.array-headline{padding-bottom:10px}\n"] }]
+                    ], 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    @if (!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            @if (startModel.errors) {\n                <mat-error>{{getValidationErrorMessage(startModel)}}</mat-error>\n            }\n            @if (!startModel.errors && endModel.errors) {\n                <mat-error>{{getValidationErrorMessage(endModel)}}</mat-error>\n            }\n        </mat-form-field>\n        \n        <div class=\"buttons\">\n            <button type=\"button\" mat-raised-button\n                [disabled]=\"startModel.errors || endModel.errors\"\n                (click)=\"add()\">\n                {{metadata.addButtonLabel}}\n            </button>\n            <button type=\"button\" mat-raised-button\n                [disabled]=\"!selected.length\"\n                (click)=\"remove()\">\n                {{metadata.removeButtonLabel}}\n            </button>\n        </div>\n    }\n\n    <custom-table\n        [configuration]=\"tableConfig\"\n        [data]=\"propertyValue\"\n        [required]=\"metadata.required(entity)\"\n        (selectionChanged)=\"selected = $any($event)\"\n    >\n    </custom-table>\n</div>", styles: ["mat-form-field{width:100%}.buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px;flex-wrap:wrap;gap:10px;column-gap:24px}.buttons button{flex-grow:1}.elevation-container{border-radius:5px;padding:15px 15px 0;margin-bottom:15px;margin-top:15px}.array-headline{padding-bottom:10px}\n"] }]
         }], ctorParameters: () => [{ type: i1.MatDialog }, { type: i2$1.HttpClient }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [NGX_COMPLETE_GLOBAL_DEFAULT_VALUES]
@@ -4167,7 +4167,7 @@ class ArrayDateTimeInputComponent extends ArrayTableComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: ArrayDateTimeInputComponent, deps: [{ token: i1.MatDialog }, { token: i2$1.HttpClient }, { token: NGX_COMPLETE_GLOBAL_DEFAULT_VALUES }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.7", type: ArrayDateTimeInputComponent, isStandalone: true, 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    @if (!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                    @for (validTime of DateUtilities.getValidTimesForDropdown(metadata.times, input, metadata.minTime, metadata.maxTime, metadata.filterTime); track $index) {\n                        <mat-option [value]=\"validTime.value\">{{validTime.displayName}}</mat-option>\n                    }\n                    \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]=\"!selected.length\"\n                (click)=\"remove()\">\n                {{metadata.removeButtonLabel}}\n            </button>\n        </div>\n    }\n\n    <custom-table\n        [configuration]=\"tableConfig\"\n        [data]=\"propertyValue\"\n        [required]=\"metadata.required(entity)\"\n        (selectionChanged)=\"selected = $any($event)\"\n    >\n    </custom-table>\n</div>", styles: ["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 15px 0;margin-bottom:15px;margin-top:15px}.array-headline{padding-bottom:10px}.date-time{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i2$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2$3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$3.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: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: CustomTableComponent, selector: "custom-table", inputs: ["data", "searchString", "required", "isLoading", "configuration"], outputs: ["cellClicked", "selectionChanged"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.7", type: ArrayDateTimeInputComponent, isStandalone: true, 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    @if (!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                    @for (validTime of DateUtilities.getValidTimesForDropdown(metadata.times, input, metadata.minTime, metadata.maxTime, metadata.filterTime); track $index) {\n                        <mat-option [value]=\"validTime.value\">{{validTime.displayName}}</mat-option>\n                    }\n                    \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]=\"!selected.length\"\n                (click)=\"remove()\">\n                {{metadata.removeButtonLabel}}\n            </button>\n        </div>\n    }\n\n    <custom-table\n        [configuration]=\"tableConfig\"\n        [data]=\"propertyValue\"\n        [required]=\"metadata.required(entity)\"\n        (selectionChanged)=\"selected = $any($event)\"\n    >\n    </custom-table>\n</div>", styles: ["mat-form-field{width:100%}.buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px;flex-wrap:wrap;gap:10px;column-gap:24px}.buttons button{flex-grow:1}.elevation-container{border-radius:5px;padding:15px 15px 0;margin-bottom:15px;margin-top:15px}.array-headline{padding-bottom:10px}.date-time{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i2$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2$3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$3.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: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: CustomTableComponent, selector: "custom-table", inputs: ["data", "searchString", "required", "isLoading", "configuration"], outputs: ["cellClicked", "selectionChanged"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: ArrayDateTimeInputComponent, decorators: [{
             type: Component,
@@ -4180,7 +4180,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImpor
                         MatInputModule,
                         MatButtonModule,
                         CustomTableComponent
-                    ], 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    @if (!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                    @for (validTime of DateUtilities.getValidTimesForDropdown(metadata.times, input, metadata.minTime, metadata.maxTime, metadata.filterTime); track $index) {\n                        <mat-option [value]=\"validTime.value\">{{validTime.displayName}}</mat-option>\n                    }\n                    \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]=\"!selected.length\"\n                (click)=\"remove()\">\n                {{metadata.removeButtonLabel}}\n            </button>\n        </div>\n    }\n\n    <custom-table\n        [configuration]=\"tableConfig\"\n        [data]=\"propertyValue\"\n        [required]=\"metadata.required(entity)\"\n        (selectionChanged)=\"selected = $any($event)\"\n    >\n    </custom-table>\n</div>", styles: ["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 15px 0;margin-bottom:15px;margin-top:15px}.array-headline{padding-bottom:10px}.date-time{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:10px}\n"] }]
+                    ], 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    @if (!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                    @for (validTime of DateUtilities.getValidTimesForDropdown(metadata.times, input, metadata.minTime, metadata.maxTime, metadata.filterTime); track $index) {\n                        <mat-option [value]=\"validTime.value\">{{validTime.displayName}}</mat-option>\n                    }\n                    \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]=\"!selected.length\"\n                (click)=\"remove()\">\n                {{metadata.removeButtonLabel}}\n            </button>\n        </div>\n    }\n\n    <custom-table\n        [configuration]=\"tableConfig\"\n        [data]=\"propertyValue\"\n        [required]=\"metadata.required(entity)\"\n        (selectionChanged)=\"selected = $any($event)\"\n    >\n    </custom-table>\n</div>", styles: ["mat-form-field{width:100%}.buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px;flex-wrap:wrap;gap:10px;column-gap:24px}.buttons button{flex-grow:1}.elevation-container{border-radius:5px;padding:15px 15px 0;margin-bottom:15px;margin-top:15px}.array-headline{padding-bottom:10px}.date-time{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:10px}\n"] }]
         }], ctorParameters: () => [{ type: i1.MatDialog }, { type: i2$1.HttpClient }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [NGX_COMPLETE_GLOBAL_DEFAULT_VALUES]
@@ -5320,7 +5320,7 @@ class ReferencesManyInputComponent extends NgxMatEntityBaseInputComponent {
         this.emitChange();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: ReferencesManyInputComponent, deps: [{ token: i0.EnvironmentInjector }, { token: NGX_COMPLETE_GLOBAL_DEFAULT_VALUES }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.7", type: ReferencesManyInputComponent, isStandalone: true, 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                <fa-icon matSuffix [icon]=\"faSearch\"></fa-icon>\n            </mat-form-field>\n            <mat-option>-</mat-option>\n            @if (shouldDisplayCurrentValue) {\n                <mat-option [value]=\"currentDropdownValue?.value\">{{currentDropdownValue?.displayName}}</mat-option>\n            }\n            @for (value of filteredDropdownValues; track $index) {\n                <mat-option [value]=\"value.value\">{{value.displayName}}</mat-option>\n            }\n        </mat-select>\n        <mat-error>{{getValidationErrorMessage(inputModel)}}</mat-error>\n    </mat-form-field>\n\n    @if (metadata.addAll) {\n        <button type=\"button\" style=\"margin-left: 20px;\" mat-raised-button [disabled]=\"!dropdownValues.length || isReadOnly\" (click)=\"addAll()\">\n            {{metadata.addAllButtonLabel}}\n        </button>\n    }\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]=\"!selected.length\" (click)=\"remove()\">\n            {{metadata.removeButtonLabel}}\n        </button>\n    </div>\n\n    <custom-table\n        [configuration]=\"tableConfig\"\n        [data]=\"propertyValue\"\n        (selectionChanged)=\"selected = $any($event)\"\n    >\n    </custom-table>\n</div>", styles: [".array-headline{padding-bottom:10px}.elevation-container{border-radius:5px;padding:15px;margin-bottom:15px;margin-top:15px}.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%}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$3.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: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2$3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: CustomTableComponent, selector: "custom-table", inputs: ["data", "searchString", "required", "isLoading", "configuration"], outputs: ["cellClicked", "selectionChanged"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.7", type: ReferencesManyInputComponent, isStandalone: true, 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                <fa-icon matSuffix [icon]=\"faSearch\"></fa-icon>\n            </mat-form-field>\n            <mat-option>-</mat-option>\n            @if (shouldDisplayCurrentValue) {\n                <mat-option [value]=\"currentDropdownValue?.value\">{{currentDropdownValue?.displayName}}</mat-option>\n            }\n            @for (value of filteredDropdownValues; track $index) {\n                <mat-option [value]=\"value.value\">{{value.displayName}}</mat-option>\n            }\n        </mat-select>\n        <mat-error>{{getValidationErrorMessage(inputModel)}}</mat-error>\n    </mat-form-field>\n\n    @if (metadata.addAll) {\n        <button type=\"button\" style=\"margin-left: 20px;\" mat-raised-button [disabled]=\"!dropdownValues.length || isReadOnly\" (click)=\"addAll()\">\n            {{metadata.addAllButtonLabel}}\n        </button>\n    }\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]=\"!selected.length\" (click)=\"remove()\">\n            {{metadata.removeButtonLabel}}\n        </button>\n    </div>\n\n    <custom-table\n        [configuration]=\"tableConfig\"\n        [data]=\"propertyValue\"\n        (selectionChanged)=\"selected = $any($event)\"\n    >\n    </custom-table>\n</div>", styles: [".array-headline{padding-bottom:10px}.elevation-container{border-radius:5px;padding:15px;margin-bottom:15px;margin-top:15px}.buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px;flex-wrap:wrap;gap:10px;column-gap:24px}.buttons button{flex-grow:1}mat-form-field{max-width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$3.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: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2$3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: CustomTableComponent, selector: "custom-table", inputs: ["data", "searchString", "required", "isLoading", "configuration"], outputs: ["cellClicked", "selectionChanged"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: ReferencesManyInputComponent, decorators: [{
             type: Component,
@@ -5333,7 +5333,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImpor
                         MatButtonModule,
                         CustomTableComponent,
                         FaIconComponent
-                    ], 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                <fa-icon matSuffix [icon]=\"faSearch\"></fa-icon>\n            </mat-form-field>\n            <mat-option>-</mat-option>\n            @if (shouldDisplayCurrentValue) {\n                <mat-option [value]=\"currentDropdownValue?.value\">{{currentDropdownValue?.displayName}}</mat-option>\n            }\n            @for (value of filteredDropdownValues; track $index) {\n                <mat-option [value]=\"value.value\">{{value.displayName}}</mat-option>\n            }\n        </mat-select>\n        <mat-error>{{getValidationErrorMessage(inputModel)}}</mat-error>\n    </mat-form-field>\n\n    @if (metadata.addAll) {\n        <button type=\"button\" style=\"margin-left: 20px;\" mat-raised-button [disabled]=\"!dropdownValues.length || isReadOnly\" (click)=\"addAll()\">\n            {{metadata.addAllButtonLabel}}\n        </button>\n    }\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]=\"!selected.length\" (click)=\"remove()\">\n            {{metadata.removeButtonLabel}}\n        </button>\n    </div>\n\n    <custom-table\n        [configuration]=\"tableConfig\"\n        [data]=\"propertyValue\"\n        (selectionChanged)=\"selected = $any($event)\"\n    >\n    </custom-table>\n</div>", styles: [".array-headline{padding-bottom:10px}.elevation-container{border-radius:5px;padding:15px;margin-bottom:15px;margin-top:15px}.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%}\n"] }]
+                    ], 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                <fa-icon matSuffix [icon]=\"faSearch\"></fa-icon>\n            </mat-form-field>\n            <mat-option>-</mat-option>\n            @if (shouldDisplayCurrentValue) {\n                <mat-option [value]=\"currentDropdownValue?.value\">{{currentDropdownValue?.displayName}}</mat-option>\n            }\n            @for (value of filteredDropdownValues; track $index) {\n                <mat-option [value]=\"value.value\">{{value.displayName}}</mat-option>\n            }\n        </mat-select>\n        <mat-error>{{getValidationErrorMessage(inputModel)}}</mat-error>\n    </mat-form-field>\n\n    @if (metadata.addAll) {\n        <button type=\"button\" style=\"margin-left: 20px;\" mat-raised-button [disabled]=\"!dropdownValues.length || isReadOnly\" (click)=\"addAll()\">\n            {{metadata.addAllButtonLabel}}\n        </button>\n    }\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]=\"!selected.length\" (click)=\"remove()\">\n            {{metadata.removeButtonLabel}}\n        </button>\n    </div>\n\n    <custom-table\n        [configuration]=\"tableConfig\"\n        [data]=\"propertyValue\"\n        (selectionChanged)=\"selected = $any($event)\"\n    >\n    </custom-table>\n</div>", styles: [".array-headline{padding-bottom:10px}.elevation-container{border-radius:5px;padding:15px;margin-bottom:15px;margin-top:15px}.buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px;flex-wrap:wrap;gap:10px;column-gap:24px}.buttons button{flex-grow:1}mat-form-field{max-width:100%}\n"] }]
         }], ctorParameters: () => [{ type: i0.EnvironmentInjector }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [NGX_COMPLETE_GLOBAL_DEFAULT_VALUES]
@@ -6001,6 +6001,8 @@ class NgxMatEntityInputComponent {
      * The form context for adding an array item.
      */
     addArrayItemFormContext;
+    // eslint-disable-next-line jsdoc/require-jsdoc
+    addArrayItemFormContext2;
     /**
      * The form context for editing an array item.
      */
@@ -6379,6 +6381,7 @@ class NgxMatEntityInputComponent {
                 hideOmitForCreate: true
             }
         };
+        this.addArrayItemFormContext2 = LodashUtilities.cloneDeep(this.addArrayItemFormContext);
         this.addArrayItemDialogData = new CreateDataBuilder(this.globalConfig, this.metadataEntityArray.createDialogData)
             .withDefault('createButtonLabel', this.globalConfig.addLabel)
             .withDefault('title', this.globalConfig.addArrayItemTitle)
@@ -6891,6 +6894,7 @@ class NgxMatEntityInputComponent {
                     hideOmitForCreate: true
                 }
             };
+            this.addArrayItemFormContext2 = LodashUtilities.cloneDeep(this.addArrayItemFormContext);
             this.addArrayItemDialogRef = this.dialog.open(this.addArrayItemDialog, {
                 minWidth: '60%',
                 autoFocus: false,
@@ -6912,10 +6916,28 @@ class NgxMatEntityInputComponent {
         }
         this.entity[this.propertyKey].push(LodashUtilities.cloneDeep(this.arrayItem));
         this.entityArrayTableContext.$implicit.dataSource.data = this.entity[this.propertyKey];
-        EntityUtilities.resetChangesOnEntity(this.arrayItem, this.arrayItemPriorChanges);
+        this.addArrayItemFormContext = undefined;
+        this.arrayItem = new this.metadataEntityArray.EntityClass();
+        this.arrayItemPriorChanges = LodashUtilities.cloneDeep(this.arrayItem);
         EntityUtilities.setDefaultValues(this.arrayItem);
-        await this.checkIsArrayItemValid();
-        this.emitChange();
+        setTimeout(
+        // eslint-disable-next-line typescript/no-misused-promises
+        async () => {
+            this.addArrayItemFormContext = {
+                $implicit: {
+                    entity: this.arrayItem,
+                    tabs: EntityUtilities.getEntityTabs(this.arrayItem, this.injector, true),
+                    inputChangeEvent: () => {
+                        void this.checkIsArrayItemValid();
+                        // eslint-disable-next-line stylistic/max-len
+                        this.addArrayItemFormContext.$implicit.tabs = EntityUtilities.getEntityTabs(this.arrayItem, this.injector, true);
+                    },
+                    hideOmitForCreate: true
+                }
+            };
+            await this.checkIsArrayItemValid();
+            this.emitChange();
+        }, 1);
     }
     /**
      * Adds the array item defined in the dialog.
@@ -6994,7 +7016,7 @@ class NgxMatEntityInputComponent {
         this.emitChange();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: NgxMatEntityInputComponent, deps: [{ token: i1.MatDialog }, { token: i0.EnvironmentInjector }, { token: i2$6.Router }, { token: NGX_GET_VALIDATION_ERROR_MESSAGE }, { token: NGX_COMPLETE_GLOBAL_DEFAULT_VALUES }, { token: i2$1.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.7", type: NgxMatEntityInputComponent, isStandalone: true, 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: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "addArrayItemDialog", first: true, predicate: ["addArrayItemDialog"], descendants: true }, { propertyName: "editArrayItemDialog", first: true, predicate: ["editArrayItemDialog"], descendants: 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@if(!(hideOmitForCreate && metadata.omitForCreate) && !(hideOmitForEdit && metadata.omitForUpdate)) {\n    @switch (type) {\n        <!-------------------------------------------->\n        <!-----------------Strings-------------------->\n        <!-------------------------------------------->\n        @case (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        }\n        @case (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        }\n        @case (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        }\n        @case (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        }\n        @case (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        }\n        <!-------------------------------------------->\n        <!-----------------Booleans------------------->\n        <!-------------------------------------------->\n        @case (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        }\n        @case (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        }\n        @case (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        }\n        <!-------------------------------------------->\n        <!------------------Numbers------------------->\n        <!-------------------------------------------->\n        @case (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        }\n        @case (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        }\n        @case (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        }\n        <!-------------------------------------------->\n        <!-------------------Array-------------------->\n        <!-------------------------------------------->\n        @case (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        }\n        @case (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        }\n        @case (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        }\n        @case (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        }\n        @case (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        }\n        <!-------------------------------------------->\n        <!-------------------Dates-------------------->\n        <!-------------------------------------------->\n        @case (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        }\n        @case (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        }\n        @case (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        }\n        <!-------------------------------------------->\n        <!-------------------Files-------------------->\n        <!-------------------------------------------->\n        @case (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        }\n        @case (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        }\n        <!-------------------------------------------->\n        <!-------------- references many ------------->\n        <!-------------------------------------------->\n        @case (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        }\n        <!-------------------------------------------->\n        <!-------------------Custom------------------->\n        <!-------------------------------------------->\n        @case (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        }\n        <!-------------------------------------------->\n        <!-------------------Object------------------->\n        <!-------------------------------------------->\n        @case (DecoratorTypes.OBJECT) {\n            <b>{{metadataDefaultObject.displayName}}</b>\n            <!-- iterates over the object properties -->\n            <ng-container *ngTemplateOutlet=\"form; context: objectFormContext\"></ng-container>\n        }\n        <!-------------------------------------------->\n        <!---------------Object Dropdown-------------->\n        <!-------------------------------------------->\n        @case (DecoratorTypes.OBJECT_DROPDOWN) {\n            <mat-form-field class=\"w-full\">\n                <mat-label>{{metadata.displayName}}</mat-label>\n                <mat-select #model=\"ngModel\"\n                    [name]=\"objectDropdownName\"\n                    [required]=\"metadata.required(entity)\"\n                    [disabled]=\"internalIsReadOnly\"\n                    [compareWith]=\"compareObjectsBound\"\n                    [(ngModel)]=\"entity[propertyKey]\"\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)=\"filterObjectDropdownValues($any($event.target).value)\">\n                        <fa-icon matSuffix [icon]=\"faSearch\"></fa-icon>\n                    </mat-form-field>\n                    @if (!metadata.required(entity)) {\n                        <mat-option>-</mat-option>\n                    }\n                    @if (shouldDisplayCurrentObjectDropdownValue) {\n                        <mat-option [value]=\"currentObjectDropdownValue?.value\">{{currentObjectDropdownValue?.displayName}}</mat-option>\n                    }\n                    @for (value of filteredObjectDropdownValues; track $index) {\n                        <mat-option [value]=\"value.value\">{{value.displayName}}</mat-option>\n                    }\n                </mat-select>\n                <mat-error>{{internalGetValidationErrorMessage(model)}}</mat-error>\n            </mat-form-field>\n        }\n        <!-------------------------------------------->\n        <!-------------- references one -------------->\n        <!-------------------------------------------->\n        @case (DecoratorTypes.REFERENCES_ONE) {\n            <mat-form-field [class.w-full]=\"metadataReferencesOne.dropdownOnly\">\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                        <fa-icon matSuffix [icon]=\"faSearch\"></fa-icon>\n                    </mat-form-field>\n                    @if (!metadata.required(entity)) {\n                        <mat-option>-</mat-option>\n                    }\n                    @if (shouldDisplayCurrentReferencesOneDropdownValue) {\n                        <mat-option [value]=\"currentReferencesOneDropdownValue?.value\">{{currentReferencesOneDropdownValue?.displayName}}</mat-option>\n                    }\n                    @for (value of filteredReferencesOneDropdownValues; track $index) {\n                        <mat-option [value]=\"value.value\">{{value.displayName}}</mat-option>\n                    }\n                </mat-select>\n                <mat-error>{{internalGetValidationErrorMessage(inputModel)}}</mat-error>\n            </mat-form-field>\n            <!-- iterates over the references one properties -->\n            @if (referencesOneFormContext) {\n                <ng-container *ngTemplateOutlet=\"form; context: referencesOneFormContext\"></ng-container>\n            }\n        }\n        <!-------------------------------------------->\n        <!-------------------Array-------------------->\n        <!-------------------------------------------->\n        @case (DecoratorTypes.ARRAY) {\n            <div class=\"entityArray\">\n                <div class=\"mat-elevation-z8 elevation-container\">\n                    <div class=\"array-headline\">\n                        <b>{{metadataEntityArray.displayName}}</b>\n                    </div>\n                    @if (metadataEntityArray.createInline && !internalIsReadOnly && addArrayItemFormContext) {\n                        <ng-container *ngTemplateOutlet=\"form; context: addArrayItemFormContext\"></ng-container>\n                    }\n                    @if (!internalIsReadOnly && entityArrayTableContext) {\n                        <div 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]=\"!entityArrayTableContext.$implicit.selection.selected.length\"\n                                (click)=\"removeFromEntityArray()\">\n                                {{metadataEntityArray.removeButtonLabel}}\n                            </button>\n                        </div>\n                    }\n                    @if (entityArrayTableContext) {\n                        <ng-container *ngTemplateOutlet=\"table; context: entityArrayTableContext\"></ng-container>\n                    }\n                </div>\n            </div>\n        }\n        <!-------------------------------------------->\n        <!------------------ has many ---------------->\n        <!-------------------------------------------->\n        @case (DecoratorTypes.HAS_MANY) {\n            <div class=\"hasMany\">\n                <h2 class=\"title\">{{metadataHasMany.tableData.baseData.title}}</h2>\n                <div class=\"grid grid-cols-12\" style=\"column-gap: 24px;\">\n                    <mat-form-field class=\"lg:col-span-8 md:col-span-6 col-span-12\">\n                        <mat-label>{{metadataHasMany.tableData.baseData.searchLabel}}</mat-label>\n                        <input matInput (keyup)=\"applyHasManyFilter($event)\">\n                    </mat-form-field>\n                    @if (metadataHasMany.tableData.baseData.tableActions.length) {\n                        <div\n                            [class.lg:col-span-2]=\"hasManyAllowCreate\"\n                            [class.lg:col-span-4]=\"!hasManyAllowCreate\"\n                            [class.md:col-span-3]=\"hasManyAllowCreate\"\n                            [class.md:col-span-6]=\"!hasManyAllowCreate\"\n                            [class.col-span-6]=\"hasManyAllowCreate\"\n                            [class.col-span-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                    }\n                    <mat-menu #menu=\"matMenu\">\n                        @if (metadataHasMany.tableData.baseData.allowJsonImport) {\n                            <button type=\"button\" mat-menu-item [disabled]=\"hasManyTableActionDisabled(hasManyImportAction)\" (click)=\"runHasManyTableAction(hasManyImportAction)\">\n                                {{hasManyImportAction.displayName}}\n                            </button>\n                        }\n                        @for (action of metadataHasMany.tableData.baseData.tableActions; track $index) {\n                            <button type=\"button\" mat-menu-item [disabled]=\"hasManyTableActionDisabled(action)\" (click)=\"runHasManyTableAction(action)\">\n                                {{action.displayName}}\n                            </button>\n                        }\n                    </mat-menu>\n                    @if (hasManyAllowCreate) {\n                        <div\n                            [class.lg:col-span-2]=\"metadataHasMany.tableData.baseData.tableActions.length\"\n                            [class.lg:col-span-4]=\"!metadataHasMany.tableData.baseData.tableActions.length\"\n                            [class.md:col-span-3]=\"metadataHasMany.tableData.baseData.tableActions.length\"\n                            [class.md:col-span-6]=\"!metadataHasMany.tableData.baseData.tableActions.length\"\n                            [class.col-span-6]=\"metadataHasMany.tableData.baseData.tableActions.length\"\n                            [class.col-span-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                    }\n                </div>\n        \n                <div class=\"mat-elevation-z8 elevation-container\">\n                    @if (hasManyTableContext) {\n                        <ng-container *ngTemplateOutlet=\"table; context: hasManyTableContext\"></ng-container>\n                    }\n                </div>\n            </div>\n        }\n        \n        @default {\n            <div>ERROR: The type {{type}} is not known.</div>\n        }\n    }\n}\n\n\n<ng-template #table let-context>\n    <mat-table matSort [dataSource]=\"context.dataSource\" [class.table-with-error-slot]=\"context.shouldShowMissingError\">\n        <!-- select Column -->\n        <ng-container matColumnDef=\"select\">\n            <mat-header-cell *matHeaderCellDef>\n                <mat-checkbox [checked]=\"context.selection.hasValue() && SelectionUtilities.isAllSelected(context.selection, context.dataSource)\"\n                    [indeterminate]=\"context.selection.hasValue() && !SelectionUtilities.isAllSelected(context.selection, context.dataSource)\"\n                    (change)=\"$event ? SelectionUtilities.masterToggle(context.selection, context.dataSource) : null\">\n                </mat-checkbox>\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let value\" [dynamicStyleClasses]=\"context.dynamicRowStyleClasses\" [value]=\"value\">\n                <mat-checkbox [checked]=\"context.selection.isSelected(value)\"\n                    (click)=\"$event.stopPropagation()\"\n                    (change)=\"$event ? context.selection.toggle(value) : null\">\n                </mat-checkbox>\n            </mat-cell>\n        </ng-container>\n\n        @for (dCol of context.displayColumns; track $index) {\n            <ng-container [matColumnDef]=\"dCol.displayName\">\n                <mat-header-cell *matHeaderCellDef mat-sort-header>\n                    {{dCol.displayName}}\n                </mat-header-cell>\n                <mat-cell *matCellDef=\"let value\" [class.enabled]=\"!dCol.disableClick && context.allowClick(value)\"\n                    [dynamicStyleClasses]=\"context.dynamicRowStyleClasses\" [value]=\"value\"\n                    (click)=\"clickCell(value, dCol, context)\"\n                >\n                    @if (dCol.Component) {\n                        <display-column-value [entity]=\"value\" [ComponentClass]=\"dCol.Component\"></display-column-value>\n                    }\n                    @else {\n                        {{getDisplayColumnValue(value, dCol)}}\n                    }\n                </mat-cell>\n            </ng-container>\n        }\n\n        <mat-header-row *matHeaderRowDef=\"context.displayedColumns\"></mat-header-row>\n        <mat-row *matRowDef=\"let row; columns: context.displayedColumns\"></mat-row>\n    </mat-table>\n\n    @if (context.displayLoadingSpinner && context.isLoading) {\n        <mat-spinner>\n        </mat-spinner>\n    }\n    @else if (context.shouldShowMissingError && !context.dataSource.data.length) {\n        <div class=\"table-error\">{{context.emptyErrorMessage}}</div>\n    }\n\n    <mat-paginator [length]=\"context.dataSource.filteredData.length\" [pageIndex]=\"0\" [pageSize]=\"10\" [pageSizeOptions]=\"[5, 10, 25, 50]\"></mat-paginator>\n</ng-template>\n\n<!--------------------------------------------------------->\n<!---------------------------Form-------------------------->\n<!--------------------------------------------------------->\n<ng-template #form let-context>\n     <!-- eslint-disable angular/no-call-expression -->\n    @if (context.tabs.length > 1) {\n        <mat-tab-group preserveContent>\n            @for (tab of context.tabs; track $index) {\n                <mat-tab [label]=\"tab.tabName\">\n                    @for (row of tab.rows; track $index) {\n                        <div class=\"grid grid-cols-12\" style=\"column-gap: 24px;\">\n                            @for (key of row.keys; track key) {\n                                <ngx-mat-entity-input\n                                    [entity]=\"context.entity\"\n                                    [propertyKey]=\"key\"\n                                    [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                                    [validEmpty]=\"context.validEmpty?.()\"\n                                    [isReadOnly]=\"context.isReadOnly?.(context.entity, key)\"\n                                    [class]=\"EntityUtilities.getWidthClasses(context.entity, key)\"\n                                    [hideOmitForEdit]=\"context.hideOmitForEdit\"\n                                    [hideOmitForCreate]=\"context.hideOmitForCreate\"\n                                    (inputChangeEvent)=\"context.inputChangeEvent()\"\n                                >\n                                </ngx-mat-entity-input>\n                            }\n                        </div>\n                    }\n                </mat-tab>\n            }\n        </mat-tab-group>\n    }\n    @else {\n        @if (!context.tabs.length) {\n            <span class=\"no-entity-tabs\">\n                ERROR: No Inputs. Did you correctly assign all values in the model constructor?\n            </span>\n        }\n        @else {\n            @for (row of context.tabs[0].rows; track $index) {\n                <div class=\"grid grid-cols-12\" style=\"column-gap: 24px;\">\n                    @for (key of row.keys; track key) {\n                        <ngx-mat-entity-input\n                            [entity]=\"context.entity\"\n                            [propertyKey]=\"key\"\n                            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                            [validEmpty]=\"context.validEmpty?.()\"\n                            [isReadOnly]=\"context.isReadOnly?.(context.entity, key)\"\n                            [class]=\"EntityUtilities.getWidthClasses(context.entity, key)\"\n                            [hideOmitForEdit]=\"context.hideOmitForEdit\"\n                            [hideOmitForCreate]=\"context.hideOmitForCreate\"\n                            (inputChangeEvent)=\"context.inputChangeEvent()\"\n                        >\n                        </ngx-mat-entity-input>\n                    }\n                </div>\n            }\n        }\n    }\n</ng-template>\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 (ngSubmit)=\"addArrayItem()\">\n        <mat-dialog-content>\n            @if (addArrayItemFormContext) {\n                <ng-container *ngTemplateOutlet=\"form; context: addArrayItemFormContext\"></ng-container>\n            }\n        </mat-dialog-content>\n    \n        <mat-dialog-actions>\n            <div class=\"dialog-button-with-info-icon\">\n                <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n                    [disabled]=\"!isArrayItemValid\"\n                    [matBadge]=\"arrayItemValidationErrors.length\"\n                    [matBadgeHidden]=\"!arrayItemValidationErrors.length\"\n                >\n                    {{addArrayItemDialogData.createButtonLabel}}\n                </button>\n                @if (arrayItemValidationErrors.length) {\n                    <ngx-mat-entity-tooltip [tooltipContent]=\"arrayItemTooltipContent\"></ngx-mat-entity-tooltip>\n                }\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 (ngSubmit)=\"saveArrayItem()\">\n        <mat-dialog-content>\n            @if (editArrayItemFormContext) {\n                <ng-container *ngTemplateOutlet=\"form; context: editArrayItemFormContext\"></ng-container>\n            }\n        </mat-dialog-content>\n        \n        <mat-dialog-actions>\n            <div class=\"dialog-button-with-info-icon\">\n                <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n                    [class.badge-changes]=\"!arrayItemValidationErrors.length\"\n                    [disabled]=\"internalIsReadOnly || !isArrayItemValid || !isArrayItemDirty\"\n                    [matBadge]=\"arrayItemValidationErrors.length > 0 ? arrayItemValidationErrors.length : arrayItemChanges.length\"\n                    [matBadgeHidden]=\"!arrayItemValidationErrors.length && !arrayItemChanges.length\"\n                >\n                    {{editArrayItemDialogData.confirmButtonLabel}}\n                </button>\n                @if (arrayItemValidationErrors.length || arrayItemChanges.length) {\n                    <ngx-mat-entity-tooltip [tooltipContent]=\"arrayItemTooltipContent\"></ngx-mat-entity-tooltip>\n                }\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 (ngSubmit)=\"dialogCreateHasMany()\">\n        <mat-dialog-content>\n            @if (hasManyCreateFormContext) {\n                <ng-container *ngTemplateOutlet=\"form; context: hasManyCreateFormContext\"></ng-container>\n            }\n        </mat-dialog-content>\n        \n        <mat-dialog-actions>\n            <div class=\"dialog-button-with-info-icon\">\n                <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n                    [disabled]=\"!isHasManyEntityValid\"\n                    [matBadge]=\"hasManyValidationErrors.length\"\n                    [matBadgeHidden]=\"!hasManyValidationErrors.length\"\n                >\n                    {{metadataHasMany.tableData.createData.createButtonLabel}}\n                </button>\n                @if (hasManyValidationErrors.length) {\n                    <ngx-mat-entity-tooltip [tooltipContent]=\"hasManyTooltipContent\"></ngx-mat-entity-tooltip>\n                }\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            @if (metadataHasMany.tableData.editData.actions.length) {\n                <button type=\"button\" mat-raised-button [matMenuTriggerFor]=\"menu\">\n                    {{metadataHasMany.tableData.editData.actionsLabel}}\n                </button>\n            }\n            <mat-menu #menu=\"matMenu\">\n                @for (action of metadataHasMany.tableData.editData.actions; track $index) {\n                    <button type=\"button\" mat-menu-item [disabled]=\"hasManyEditActionDisabled(action)\" (click)=\"hasManyRunEditAction(action)\">\n                        {{action.displayName}}\n                    </button>\n                }\n            </mat-menu>\n        \n            @if (hasManyAllowDelete(hasManyEntity)) {\n                <button type=\"button\" mat-raised-button color=\"warn\" class=\"delete-button\" tabindex=\"-1\" (click)=\"deleteHasManyEntity()\">\n                    {{metadataHasMany.tableData.editData.deleteButtonLabel}}\n                </button>\n            }\n        </div>\n    </div>\n    \n    <form (ngSubmit)=\"dialogEditHasMany()\">\n        <mat-dialog-content>\n            @if (hasManyEditFormContext) {\n                <ng-container *ngTemplateOutlet=\"form; context: hasManyEditFormContext\"></ng-container>\n            }\n        </mat-dialog-content>\n        \n        <mat-dialog-actions>\n            <div class=\"dialog-button-with-info-icon\">\n                <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n                    [class.badge-changes]=\"!hasManyValidationErrors.length\"\n                    [disabled]=\"internalIsReadOnly || !isHasManyEntityValid || !isHasManyEntityDirty\"\n                    [matBadge]=\"hasManyValidationErrors.length > 0 ? hasManyValidationErrors.length : hasManyChanges.length\"\n                    [matBadgeHidden]=\"!hasManyValidationErrors.length && !hasManyChanges.length\"\n                >\n                    {{metadataHasMany.tableData.editData.confirmButtonLabel}}\n                </button>\n                @if (hasManyValidationErrors.length || hasManyChanges.length) {\n                    <ngx-mat-entity-tooltip [tooltipContent]=\"hasManyTooltipContent\"></ngx-mat-entity-tooltip>\n                }\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: ["::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-tab-body-wrapper{margin-left:-12px;margin-right:-12px}::ng-deep .mat-mdc-form-field-has-icon-suffix .mat-mdc-text-field-wrapper{padding-right:16px}::ng-deep .select-search-input{width:100%;margin-top:-8px;margin-bottom:8px}::ng-deep .select-search-input .mat-mdc-form-field-subscript-wrapper{display:none}::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:#000}::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}::ng-deep .badge-changes .mat-badge-content{background-color:orange;color:#fff}mat-spinner{margin:10px auto}.mdc-data-table__row:last-child .mdc-data-table__cell{border-bottom:1px solid rgba(0,0,0,.12)}mat-paginator{padding-top:10px;padding-bottom:10px}.dialog-button-with-info-icon{margin-top:10px;gap:12px;display:flex;align-items:center}.actions-container{display:flex;gap:10px}.w-full{width:100%}.table-with-error-slot{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}.enabled:hover{cursor:pointer}.table-error{display:flex;align-items:center;justify-content:center;margin-top:-6px;border:1px solid #E0E0E0;background-color:#f8d3d7;color:#721c24;height:fit-content;padding-left:4px;padding-right:4px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.entityArray .elevation-container{border-radius:5px;padding:15px 15px 0;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}.hasMany button{width:100%;height:56px;line-height:24px;font-size:16px}.hasMany .title{text-align:center}.hasMany .elevation-container{margin-bottom:15px}\n", "::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-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)}\n", ".grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.grid{display:grid}@media (min-width: 1024px){.lg\\:col-span-12{grid-column:span 12/span 12!important}.lg\\:col-span-11{grid-column:span 11/span 11!important}.lg\\:col-span-10{grid-column:span 10/span 10!important}.lg\\:col-span-9{grid-column:span 9/span 9!important}.lg\\:col-span-8{grid-column:span 8/span 8!important}.lg\\:col-span-7{grid-column:span 7/span 7!important}.lg\\:col-span-6{grid-column:span 6/span 6!important}.lg\\:col-span-5{grid-column:span 5/span 5!important}.lg\\:col-span-4{grid-column:span 4/span 4!important}.lg\\:col-span-3{grid-column:span 3/span 3!important}.lg\\:col-span-2{grid-column:span 2/span 2!important}.lg\\:col-span-1{grid-column:span 1/span 1!important}}@media (min-width: 768px) and (max-width: 1023px){.md\\:col-span-12{grid-column:span 12/span 12!important}.md\\:col-span-11{grid-column:span 11/span 11!important}.md\\:col-span-10{grid-column:span 10/span 10!important}.md\\:col-span-9{grid-column:span 9/span 9!important}.md\\:col-span-8{grid-column:span 8/span 8!important}.md\\:col-span-7{grid-column:span 7/span 7!important}.md\\:col-span-6{grid-column:span 6/span 6!important}.md\\:col-span-5{grid-column:span 5/span 5!important}.md\\:col-span-4{grid-column:span 4/span 4!important}.md\\:col-span-3{grid-column:span 3/span 3!important}.md\\:col-span-2{grid-column:span 2/span 2!important}.md\\:col-span-1{grid-column:span 1/span 1!important}}.col-span-12{grid-column:span 12/span 12}.col-span-11{grid-column:span 11/span 11}.col-span-10{grid-column:span 10/span 10}.col-span-9{grid-column:span 9/span 9}.col-span-8{grid-column:span 8/span 8}.col-span-7{grid-column:span 7/span 7}.col-span-6{grid-column:span 6/span 6}.col-span-5{grid-column:span 5/span 5}.col-span-4{grid-column:span 4/span 4}.col-span-3{grid-column:span 3/span 3}.col-span-2{grid-column:span 2/span 2}.col-span-1{grid-column:span 1/span 1}\n"], dependencies: [{ kind: "component", type: NgxMatEntityInputComponent, selector: "ngx-mat-entity-input", inputs: ["entity", "propertyKey", "getValidationErrorMessage", "hideOmitForCreate", "hideOmitForEdit", "validEmpty", "isReadOnly"], outputs: ["inputChangeEvent"] }, { kind: "component", type: DisplayColumnValueComponent, selector: "display-column-value", inputs: ["entity", "ComponentClass"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i5$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i5$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2$3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i10.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$3.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: "ngmodule", type: MatMenuModule }, { kind: "component", type: i7.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i3$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: TooltipComponent, selector: "ngx-mat-entity-tooltip", inputs: ["tooltipContent"] }, { kind: "component", type: StringInputComponent, selector: "string-input" }, { kind: "component", type: StringTextboxInputComponent, selector: "string-textbox-input" }, { kind: "component", type: StringAutocompleteInputComponent, selector: "string-autocomplete-input" }, { kind: "component", type: StringDropdownInputComponent, selector: "string-dropdown-input" }, { kind: "component", type: StringPasswordInputComponent, selector: "string-password-input" }, { kind: "component", type: BooleanCheckboxInputComponent, selector: "boolean-checkbox-input" }, { kind: "component", type: BooleanToggleInputComponent, selector: "boolean-toggle-input" }, { kind: "component", type: BooleanDropdownInputComponent, selector: "boolean-dropdown-input" }, { kind: "component", type: NumberInputComponent, selector: "number-input" }, { kind: "component", type: NumberDropdownInputComponent, selector: "number-dropdown-input" }, { kind: "component", type: NumberSliderInputComponent, selector: "number-slider-input" }, { kind: "component", type: 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: 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: ReferencesManyInputComponent, selector: "references-many-input" }, { kind: "component", type: CustomInputComponent, selector: "custom-input" }, { kind: "directive", type: DynamicStyleClassDirective, selector: "[dynamicStyleClasses]", inputs: ["dynamicStyleClasses", "value"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i4.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i4.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.7", type: NgxMatEntityInputComponent, isStandalone: true, 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: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "addArrayItemDialog", first: true, predicate: ["addArrayItemDialog"], descendants: true }, { propertyName: "editArrayItemDialog", first: true, predicate: ["editArrayItemDialog"], descendants: 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@if(!(hideOmitForCreate && metadata.omitForCreate) && !(hideOmitForEdit && metadata.omitForUpdate)) {\n    @switch (type) {\n        <!-------------------------------------------->\n        <!-----------------Strings-------------------->\n        <!-------------------------------------------->\n        @case (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        }\n        @case (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        }\n        @case (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        }\n        @case (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        }\n        @case (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        }\n        <!-------------------------------------------->\n        <!-----------------Booleans------------------->\n        <!-------------------------------------------->\n        @case (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        }\n        @case (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        }\n        @case (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        }\n        <!-------------------------------------------->\n        <!------------------Numbers------------------->\n        <!-------------------------------------------->\n        @case (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        }\n        @case (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        }\n        @case (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        }\n        <!-------------------------------------------->\n        <!-------------------Array-------------------->\n        <!-------------------------------------------->\n        @case (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        }\n        @case (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        }\n        @case (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        }\n        @case (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        }\n        @case (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        }\n        <!-------------------------------------------->\n        <!-------------------Dates-------------------->\n        <!-------------------------------------------->\n        @case (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        }\n        @case (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        }\n        @case (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        }\n        <!-------------------------------------------->\n        <!-------------------Files-------------------->\n        <!-------------------------------------------->\n        @case (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        }\n        @case (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        }\n        <!-------------------------------------------->\n        <!-------------- references many ------------->\n        <!-------------------------------------------->\n        @case (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        }\n        <!-------------------------------------------->\n        <!-------------------Custom------------------->\n        <!-------------------------------------------->\n        @case (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        }\n        <!-------------------------------------------->\n        <!-------------------Object------------------->\n        <!-------------------------------------------->\n        @case (DecoratorTypes.OBJECT) {\n            <b>{{metadataDefaultObject.displayName}}</b>\n            <!-- iterates over the object properties -->\n            <ng-container *ngTemplateOutlet=\"form; context: objectFormContext\"></ng-container>\n        }\n        <!-------------------------------------------->\n        <!---------------Object Dropdown-------------->\n        <!-------------------------------------------->\n        @case (DecoratorTypes.OBJECT_DROPDOWN) {\n            <mat-form-field class=\"w-full\">\n                <mat-label>{{metadata.displayName}}</mat-label>\n                <mat-select #model=\"ngModel\"\n                    [name]=\"objectDropdownName\"\n                    [required]=\"metadata.required(entity)\"\n                    [disabled]=\"internalIsReadOnly\"\n                    [compareWith]=\"compareObjectsBound\"\n                    [(ngModel)]=\"entity[propertyKey]\"\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)=\"filterObjectDropdownValues($any($event.target).value)\">\n                        <fa-icon matSuffix [icon]=\"faSearch\"></fa-icon>\n                    </mat-form-field>\n                    @if (!metadata.required(entity)) {\n                        <mat-option>-</mat-option>\n                    }\n                    @if (shouldDisplayCurrentObjectDropdownValue) {\n                        <mat-option [value]=\"currentObjectDropdownValue?.value\">{{currentObjectDropdownValue?.displayName}}</mat-option>\n                    }\n                    @for (value of filteredObjectDropdownValues; track $index) {\n                        <mat-option [value]=\"value.value\">{{value.displayName}}</mat-option>\n                    }\n                </mat-select>\n                <mat-error>{{internalGetValidationErrorMessage(model)}}</mat-error>\n            </mat-form-field>\n        }\n        <!-------------------------------------------->\n        <!-------------- references one -------------->\n        <!-------------------------------------------->\n        @case (DecoratorTypes.REFERENCES_ONE) {\n            <mat-form-field [class.w-full]=\"metadataReferencesOne.dropdownOnly\">\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                        <fa-icon matSuffix [icon]=\"faSearch\"></fa-icon>\n                    </mat-form-field>\n                    @if (!metadata.required(entity)) {\n                        <mat-option>-</mat-option>\n                    }\n                    @if (shouldDisplayCurrentReferencesOneDropdownValue) {\n                        <mat-option [value]=\"currentReferencesOneDropdownValue?.value\">{{currentReferencesOneDropdownValue?.displayName}}</mat-option>\n                    }\n                    @for (value of filteredReferencesOneDropdownValues; track $index) {\n                        <mat-option [value]=\"value.value\">{{value.displayName}}</mat-option>\n                    }\n                </mat-select>\n                <mat-error>{{internalGetValidationErrorMessage(inputModel)}}</mat-error>\n            </mat-form-field>\n            <!-- iterates over the references one properties -->\n            @if (referencesOneFormContext) {\n                <ng-container *ngTemplateOutlet=\"form; context: referencesOneFormContext\"></ng-container>\n            }\n        }\n        <!-------------------------------------------->\n        <!-------------------Array-------------------->\n        <!-------------------------------------------->\n        @case (DecoratorTypes.ARRAY) {\n            <div class=\"entityArray\">\n                <div class=\"mat-elevation-z8 elevation-container\">\n                    <div class=\"array-headline\">\n                        <b>{{metadataEntityArray.displayName}}</b>\n                    </div>\n                    @if (metadataEntityArray.createInline && !internalIsReadOnly) {\n                        @if (addArrayItemFormContext) {\n                            <ng-container *ngTemplateOutlet=\"form; context: addArrayItemFormContext\"></ng-container>\n                        }\n                        @else if (addArrayItemFormContext2) {\n                            <ng-container *ngTemplateOutlet=\"form; context: addArrayItemFormContext2\"></ng-container>\n                        }\n                    }\n                    @if (!internalIsReadOnly && entityArrayTableContext) {\n                        <div 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]=\"!entityArrayTableContext.$implicit.selection.selected.length\"\n                                (click)=\"removeFromEntityArray()\">\n                                {{metadataEntityArray.removeButtonLabel}}\n                            </button>\n                        </div>\n                    }\n                    @if (entityArrayTableContext) {\n                        <ng-container *ngTemplateOutlet=\"table; context: entityArrayTableContext\"></ng-container>\n                    }\n                </div>\n            </div>\n        }\n        <!-------------------------------------------->\n        <!------------------ has many ---------------->\n        <!-------------------------------------------->\n        @case (DecoratorTypes.HAS_MANY) {\n            <div class=\"hasMany\">\n                <h2 class=\"title\">{{metadataHasMany.tableData.baseData.title}}</h2>\n                <div class=\"grid grid-cols-12 gap-x-6\">\n                    <mat-form-field class=\"lg:col-span-8 md:col-span-6 col-span-12\">\n                        <mat-label>{{metadataHasMany.tableData.baseData.searchLabel}}</mat-label>\n                        <input matInput (keyup)=\"applyHasManyFilter($event)\">\n                    </mat-form-field>\n                    @if (metadataHasMany.tableData.baseData.tableActions.length) {\n                        <div\n                            [class.lg:col-span-2]=\"hasManyAllowCreate\"\n                            [class.lg:col-span-4]=\"!hasManyAllowCreate\"\n                            [class.md:col-span-3]=\"hasManyAllowCreate\"\n                            [class.md:col-span-6]=\"!hasManyAllowCreate\"\n                            [class.col-span-6]=\"hasManyAllowCreate\"\n                            [class.col-span-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                    }\n                    <mat-menu #menu=\"matMenu\">\n                        @if (metadataHasMany.tableData.baseData.allowJsonImport) {\n                            <button type=\"button\" mat-menu-item [disabled]=\"hasManyTableActionDisabled(hasManyImportAction)\" (click)=\"runHasManyTableAction(hasManyImportAction)\">\n                                {{hasManyImportAction.displayName}}\n                            </button>\n                        }\n                        @for (action of metadataHasMany.tableData.baseData.tableActions; track $index) {\n                            <button type=\"button\" mat-menu-item [disabled]=\"hasManyTableActionDisabled(action)\" (click)=\"runHasManyTableAction(action)\">\n                                {{action.displayName}}\n                            </button>\n                        }\n                    </mat-menu>\n                    @if (hasManyAllowCreate) {\n                        <div\n                            [class.lg:col-span-2]=\"metadataHasMany.tableData.baseData.tableActions.length\"\n                            [class.lg:col-span-4]=\"!metadataHasMany.tableData.baseData.tableActions.length\"\n                            [class.md:col-span-3]=\"metadataHasMany.tableData.baseData.tableActions.length\"\n                            [class.md:col-span-6]=\"!metadataHasMany.tableData.baseData.tableActions.length\"\n                            [class.col-span-6]=\"metadataHasMany.tableData.baseData.tableActions.length\"\n                            [class.col-span-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                    }\n                </div>\n        \n                <div class=\"mat-elevation-z8 elevation-container\">\n                    @if (hasManyTableContext) {\n                        <ng-container *ngTemplateOutlet=\"table; context: hasManyTableContext\"></ng-container>\n                    }\n                </div>\n            </div>\n        }\n        \n        @default {\n            <div>ERROR: The type {{type}} is not known.</div>\n        }\n    }\n}\n\n\n<ng-template #table let-context>\n    <mat-table matSort [dataSource]=\"context.dataSource\" [class.table-with-error-slot]=\"context.shouldShowMissingError\">\n        <!-- select Column -->\n        <ng-container matColumnDef=\"select\">\n            <mat-header-cell *matHeaderCellDef>\n                <mat-checkbox [checked]=\"context.selection.hasValue() && SelectionUtilities.isAllSelected(context.selection, context.dataSource)\"\n                    [indeterminate]=\"context.selection.hasValue() && !SelectionUtilities.isAllSelected(context.selection, context.dataSource)\"\n                    (change)=\"$event ? SelectionUtilities.masterToggle(context.selection, context.dataSource) : null\">\n                </mat-checkbox>\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let value\" [dynamicStyleClasses]=\"context.dynamicRowStyleClasses\" [value]=\"value\">\n                <mat-checkbox [checked]=\"context.selection.isSelected(value)\"\n                    (click)=\"$event.stopPropagation()\"\n                    (change)=\"$event ? context.selection.toggle(value) : null\">\n                </mat-checkbox>\n            </mat-cell>\n        </ng-container>\n\n        @for (dCol of context.displayColumns; track $index) {\n            <ng-container [matColumnDef]=\"dCol.displayName\">\n                <mat-header-cell *matHeaderCellDef mat-sort-header>\n                    {{dCol.displayName}}\n                </mat-header-cell>\n                <mat-cell *matCellDef=\"let value\" [class.enabled]=\"!dCol.disableClick && context.allowClick(value)\"\n                    [dynamicStyleClasses]=\"context.dynamicRowStyleClasses\" [value]=\"value\"\n                    (click)=\"clickCell(value, dCol, context)\"\n                >\n                    @if (dCol.Component) {\n                        <display-column-value [entity]=\"value\" [ComponentClass]=\"dCol.Component\"></display-column-value>\n                    }\n                    @else {\n                        {{getDisplayColumnValue(value, dCol)}}\n                    }\n                </mat-cell>\n            </ng-container>\n        }\n\n        <mat-header-row *matHeaderRowDef=\"context.displayedColumns\"></mat-header-row>\n        <mat-row *matRowDef=\"let row; columns: context.displayedColumns\"></mat-row>\n    </mat-table>\n\n    @if (context.displayLoadingSpinner && context.isLoading) {\n        <mat-spinner>\n        </mat-spinner>\n    }\n    @else if (context.shouldShowMissingError && !context.dataSource.data.length) {\n        <div class=\"table-error\">{{context.emptyErrorMessage}}</div>\n    }\n\n    <mat-paginator [length]=\"context.dataSource.filteredData.length\" [pageIndex]=\"0\" [pageSize]=\"10\" [pageSizeOptions]=\"[5, 10, 25, 50]\"></mat-paginator>\n</ng-template>\n\n<!--------------------------------------------------------->\n<!---------------------------Form-------------------------->\n<!--------------------------------------------------------->\n<ng-template #form let-context>\n    <!-- eslint-disable angular/no-call-expression -->\n    @if (context.tabs.length > 1) {\n        <mat-tab-group preserveContent>\n            @for (tab of context.tabs; track $index) {\n                <mat-tab [label]=\"tab.tabName\">\n                    @for (row of tab.rows; track $index) {\n                        <div class=\"grid grid-cols-12 gap-x-6\">\n                            @for (key of row.keys; track key) {\n                                <ngx-mat-entity-input\n                                    [entity]=\"context.entity\"\n                                    [propertyKey]=\"key\"\n                                    [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                                    [validEmpty]=\"context.validEmpty?.()\"\n                                    [isReadOnly]=\"context.isReadOnly?.(context.entity, key)\"\n                                    [class]=\"EntityUtilities.getWidthClasses(context.entity, key)\"\n                                    [hideOmitForEdit]=\"context.hideOmitForEdit\"\n                                    [hideOmitForCreate]=\"context.hideOmitForCreate\"\n                                    (inputChangeEvent)=\"context.inputChangeEvent()\"\n                                >\n                                </ngx-mat-entity-input>\n                            }\n                        </div>\n                    }\n                </mat-tab>\n            }\n        </mat-tab-group>\n    }\n    @else {\n        @if (!context.tabs.length) {\n            <span class=\"no-entity-tabs\">\n                ERROR: No Inputs. Did you correctly assign all values in the model constructor?\n            </span>\n        }\n        @else {\n            @for (row of context.tabs[0].rows; track $index) {\n                <div class=\"grid grid-cols-12 gap-x-6\">\n                    @for (key of row.keys; track key) {\n                        <ngx-mat-entity-input\n                            [entity]=\"context.entity\"\n                            [propertyKey]=\"key\"\n                            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                            [validEmpty]=\"context.validEmpty?.()\"\n                            [isReadOnly]=\"context.isReadOnly?.(context.entity, key)\"\n                            [class]=\"EntityUtilities.getWidthClasses(context.entity, key)\"\n                            [hideOmitForEdit]=\"context.hideOmitForEdit\"\n                            [hideOmitForCreate]=\"context.hideOmitForCreate\"\n                            (inputChangeEvent)=\"context.inputChangeEvent()\"\n                        >\n                        </ngx-mat-entity-input>\n                    }\n                </div>\n            }\n        }\n    }\n</ng-template>\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 (ngSubmit)=\"addArrayItem()\">\n        <mat-dialog-content>\n            @if (addArrayItemFormContext) {\n                <ng-container *ngTemplateOutlet=\"form; context: addArrayItemFormContext\"></ng-container>\n            }\n        </mat-dialog-content>\n    \n        <mat-dialog-actions>\n            <div class=\"dialog-button-with-info-icon\">\n                <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n                    [disabled]=\"!isArrayItemValid\"\n                    [matBadge]=\"arrayItemValidationErrors.length\"\n                    [matBadgeHidden]=\"!arrayItemValidationErrors.length\"\n                >\n                    {{addArrayItemDialogData.createButtonLabel}}\n                </button>\n                @if (arrayItemValidationErrors.length) {\n                    <ngx-mat-entity-tooltip [tooltipContent]=\"arrayItemTooltipContent\"></ngx-mat-entity-tooltip>\n                }\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 (ngSubmit)=\"saveArrayItem()\">\n        <mat-dialog-content>\n            @if (editArrayItemFormContext) {\n                <ng-container *ngTemplateOutlet=\"form; context: editArrayItemFormContext\"></ng-container>\n            }\n        </mat-dialog-content>\n        \n        <mat-dialog-actions>\n            <div class=\"dialog-button-with-info-icon\">\n                <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n                    [class.badge-changes]=\"!arrayItemValidationErrors.length\"\n                    [disabled]=\"internalIsReadOnly || !isArrayItemValid || !isArrayItemDirty\"\n                    [matBadge]=\"arrayItemValidationErrors.length > 0 ? arrayItemValidationErrors.length : arrayItemChanges.length\"\n                    [matBadgeHidden]=\"!arrayItemValidationErrors.length && !arrayItemChanges.length\"\n                >\n                    {{editArrayItemDialogData.confirmButtonLabel}}\n                </button>\n                @if (arrayItemValidationErrors.length || arrayItemChanges.length) {\n                    <ngx-mat-entity-tooltip [tooltipContent]=\"arrayItemTooltipContent\"></ngx-mat-entity-tooltip>\n                }\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 (ngSubmit)=\"dialogCreateHasMany()\">\n        <mat-dialog-content>\n            @if (hasManyCreateFormContext) {\n                <ng-container *ngTemplateOutlet=\"form; context: hasManyCreateFormContext\"></ng-container>\n            }\n        </mat-dialog-content>\n        \n        <mat-dialog-actions>\n            <div class=\"dialog-button-with-info-icon\">\n                <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n                    [disabled]=\"!isHasManyEntityValid\"\n                    [matBadge]=\"hasManyValidationErrors.length\"\n                    [matBadgeHidden]=\"!hasManyValidationErrors.length\"\n                >\n                    {{metadataHasMany.tableData.createData.createButtonLabel}}\n                </button>\n                @if (hasManyValidationErrors.length) {\n                    <ngx-mat-entity-tooltip [tooltipContent]=\"hasManyTooltipContent\"></ngx-mat-entity-tooltip>\n                }\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            @if (metadataHasMany.tableData.editData.actions.length) {\n                <button type=\"button\" mat-raised-button [matMenuTriggerFor]=\"menu\">\n                    {{metadataHasMany.tableData.editData.actionsLabel}}\n                </button>\n            }\n            <mat-menu #menu=\"matMenu\">\n                @for (action of metadataHasMany.tableData.editData.actions; track $index) {\n                    <button type=\"button\" mat-menu-item [disabled]=\"hasManyEditActionDisabled(action)\" (click)=\"hasManyRunEditAction(action)\">\n                        {{action.displayName}}\n                    </button>\n                }\n            </mat-menu>\n        \n            @if (hasManyAllowDelete(hasManyEntity)) {\n                <button type=\"button\" mat-raised-button color=\"warn\" class=\"delete-button\" tabindex=\"-1\" (click)=\"deleteHasManyEntity()\">\n                    {{metadataHasMany.tableData.editData.deleteButtonLabel}}\n                </button>\n            }\n        </div>\n    </div>\n    \n    <form (ngSubmit)=\"dialogEditHasMany()\">\n        <mat-dialog-content>\n            @if (hasManyEditFormContext) {\n                <ng-container *ngTemplateOutlet=\"form; context: hasManyEditFormContext\"></ng-container>\n            }\n        </mat-dialog-content>\n        \n        <mat-dialog-actions>\n            <div class=\"dialog-button-with-info-icon\">\n                <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n                    [class.badge-changes]=\"!hasManyValidationErrors.length\"\n                    [disabled]=\"internalIsReadOnly || !isHasManyEntityValid || !isHasManyEntityDirty\"\n                    [matBadge]=\"hasManyValidationErrors.length > 0 ? hasManyValidationErrors.length : hasManyChanges.length\"\n                    [matBadgeHidden]=\"!hasManyValidationErrors.length && !hasManyChanges.length\"\n                >\n                    {{metadataHasMany.tableData.editData.confirmButtonLabel}}\n                </button>\n                @if (hasManyValidationErrors.length || hasManyChanges.length) {\n                    <ngx-mat-entity-tooltip [tooltipContent]=\"hasManyTooltipContent\"></ngx-mat-entity-tooltip>\n                }\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: ["::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-tab-body-wrapper{margin-left:-12px;margin-right:-12px}::ng-deep .mat-mdc-form-field-has-icon-suffix .mat-mdc-text-field-wrapper{padding-right:16px}::ng-deep .select-search-input{width:100%;margin-top:-8px;margin-bottom:8px}::ng-deep .select-search-input .mat-mdc-form-field-subscript-wrapper{display:none}::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:#000}::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}::ng-deep .badge-changes .mat-badge-content{background-color:orange;color:#fff}mat-spinner{margin:10px auto}.mdc-data-table__row:last-child .mdc-data-table__cell{border-bottom:1px solid rgba(0,0,0,.12)}mat-paginator{padding-top:10px;padding-bottom:10px}.dialog-button-with-info-icon{margin-top:10px;gap:12px;display:flex;align-items:center}.actions-container{display:flex;gap:10px}.w-full{width:100%}.table-with-error-slot{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}.enabled:hover{cursor:pointer}.table-error{display:flex;align-items:center;justify-content:center;margin-top:-6px;border:1px solid #E0E0E0;background-color:#f8d3d7;color:#721c24;height:fit-content;padding-left:4px;padding-right:4px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.entityArray .elevation-container{border-radius:5px;padding:15px 15px 0;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;column-gap:24px}.entityArray .buttons button{flex:1}.hasMany button{width:100%;height:56px;line-height:24px;font-size:16px}.hasMany .title{text-align:center}.hasMany .elevation-container{margin-bottom:15px}\n", "::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-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)}\n", ".grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.gap-x-6{column-gap:24px}.grid{display:grid}@media (min-width: 1024px){.lg\\:col-span-12{grid-column:span 12/span 12!important}.lg\\:col-span-11{grid-column:span 11/span 11!important}.lg\\:col-span-10{grid-column:span 10/span 10!important}.lg\\:col-span-9{grid-column:span 9/span 9!important}.lg\\:col-span-8{grid-column:span 8/span 8!important}.lg\\:col-span-7{grid-column:span 7/span 7!important}.lg\\:col-span-6{grid-column:span 6/span 6!important}.lg\\:col-span-5{grid-column:span 5/span 5!important}.lg\\:col-span-4{grid-column:span 4/span 4!important}.lg\\:col-span-3{grid-column:span 3/span 3!important}.lg\\:col-span-2{grid-column:span 2/span 2!important}.lg\\:col-span-1{grid-column:span 1/span 1!important}}@media (min-width: 768px) and (max-width: 1023px){.md\\:col-span-12{grid-column:span 12/span 12!important}.md\\:col-span-11{grid-column:span 11/span 11!important}.md\\:col-span-10{grid-column:span 10/span 10!important}.md\\:col-span-9{grid-column:span 9/span 9!important}.md\\:col-span-8{grid-column:span 8/span 8!important}.md\\:col-span-7{grid-column:span 7/span 7!important}.md\\:col-span-6{grid-column:span 6/span 6!important}.md\\:col-span-5{grid-column:span 5/span 5!important}.md\\:col-span-4{grid-column:span 4/span 4!important}.md\\:col-span-3{grid-column:span 3/span 3!important}.md\\:col-span-2{grid-column:span 2/span 2!important}.md\\:col-span-1{grid-column:span 1/span 1!important}}.col-span-12{grid-column:span 12/span 12}.col-span-11{grid-column:span 11/span 11}.col-span-10{grid-column:span 10/span 10}.col-span-9{grid-column:span 9/span 9}.col-span-8{grid-column:span 8/span 8}.col-span-7{grid-column:span 7/span 7}.col-span-6{grid-column:span 6/span 6}.col-span-5{grid-column:span 5/span 5}.col-span-4{grid-column:span 4/span 4}.col-span-3{grid-column:span 3/span 3}.col-span-2{grid-column:span 2/span 2}.col-span-1{grid-column:span 1/span 1}\n"], dependencies: [{ kind: "component", type: NgxMatEntityInputComponent, selector: "ngx-mat-entity-input", inputs: ["entity", "propertyKey", "getValidationErrorMessage", "hideOmitForCreate", "hideOmitForEdit", "validEmpty", "isReadOnly"], outputs: ["inputChangeEvent"] }, { kind: "component", type: DisplayColumnValueComponent, selector: "display-column-value", inputs: ["entity", "ComponentClass"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i5$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i5$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2$3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i10.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$3.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: "ngmodule", type: MatMenuModule }, { kind: "component", type: i7.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i3$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: TooltipComponent, selector: "ngx-mat-entity-tooltip", inputs: ["tooltipContent"] }, { kind: "component", type: StringInputComponent, selector: "string-input" }, { kind: "component", type: StringTextboxInputComponent, selector: "string-textbox-input" }, { kind: "component", type: StringAutocompleteInputComponent, selector: "string-autocomplete-input" }, { kind: "component", type: StringDropdownInputComponent, selector: "string-dropdown-input" }, { kind: "component", type: StringPasswordInputComponent, selector: "string-password-input" }, { kind: "component", type: BooleanCheckboxInputComponent, selector: "boolean-checkbox-input" }, { kind: "component", type: BooleanToggleInputComponent, selector: "boolean-toggle-input" }, { kind: "component", type: BooleanDropdownInputComponent, selector: "boolean-dropdown-input" }, { kind: "component", type: NumberInputComponent, selector: "number-input" }, { kind: "component", type: NumberDropdownInputComponent, selector: "number-dropdown-input" }, { kind: "component", type: NumberSliderInputComponent, selector: "number-slider-input" }, { kind: "component", type: 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: 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: ReferencesManyInputComponent, selector: "references-many-input" }, { kind: "component", type: CustomInputComponent, selector: "custom-input" }, { kind: "directive", type: DynamicStyleClassDirective, selector: "[dynamicStyleClasses]", inputs: ["dynamicStyleClasses", "value"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i4.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i4.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: NgxMatEntityInputComponent, decorators: [{
             type: Component,
@@ -7041,7 +7063,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImpor
                         DynamicStyleClassDirective,
                         MatSortModule,
                         FaIconComponent
-                    ], template: "<!-- eslint-disable angular/no-call-expression -->\n@if(!(hideOmitForCreate && metadata.omitForCreate) && !(hideOmitForEdit && metadata.omitForUpdate)) {\n    @switch (type) {\n        <!-------------------------------------------->\n        <!-----------------Strings-------------------->\n        <!-------------------------------------------->\n        @case (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        }\n        @case (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        }\n        @case (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        }\n        @case (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        }\n        @case (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        }\n        <!-------------------------------------------->\n        <!-----------------Booleans------------------->\n        <!-------------------------------------------->\n        @case (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        }\n        @case (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        }\n        @case (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        }\n        <!-------------------------------------------->\n        <!------------------Numbers------------------->\n        <!-------------------------------------------->\n        @case (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        }\n        @case (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        }\n        @case (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        }\n        <!-------------------------------------------->\n        <!-------------------Array-------------------->\n        <!-------------------------------------------->\n        @case (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        }\n        @case (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        }\n        @case (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        }\n        @case (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        }\n        @case (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        }\n        <!-------------------------------------------->\n        <!-------------------Dates-------------------->\n        <!-------------------------------------------->\n        @case (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        }\n        @case (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        }\n        @case (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        }\n        <!-------------------------------------------->\n        <!-------------------Files-------------------->\n        <!-------------------------------------------->\n        @case (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        }\n        @case (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        }\n        <!-------------------------------------------->\n        <!-------------- references many ------------->\n        <!-------------------------------------------->\n        @case (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        }\n        <!-------------------------------------------->\n        <!-------------------Custom------------------->\n        <!-------------------------------------------->\n        @case (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        }\n        <!-------------------------------------------->\n        <!-------------------Object------------------->\n        <!-------------------------------------------->\n        @case (DecoratorTypes.OBJECT) {\n            <b>{{metadataDefaultObject.displayName}}</b>\n            <!-- iterates over the object properties -->\n            <ng-container *ngTemplateOutlet=\"form; context: objectFormContext\"></ng-container>\n        }\n        <!-------------------------------------------->\n        <!---------------Object Dropdown-------------->\n        <!-------------------------------------------->\n        @case (DecoratorTypes.OBJECT_DROPDOWN) {\n            <mat-form-field class=\"w-full\">\n                <mat-label>{{metadata.displayName}}</mat-label>\n                <mat-select #model=\"ngModel\"\n                    [name]=\"objectDropdownName\"\n                    [required]=\"metadata.required(entity)\"\n                    [disabled]=\"internalIsReadOnly\"\n                    [compareWith]=\"compareObjectsBound\"\n                    [(ngModel)]=\"entity[propertyKey]\"\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)=\"filterObjectDropdownValues($any($event.target).value)\">\n                        <fa-icon matSuffix [icon]=\"faSearch\"></fa-icon>\n                    </mat-form-field>\n                    @if (!metadata.required(entity)) {\n                        <mat-option>-</mat-option>\n                    }\n                    @if (shouldDisplayCurrentObjectDropdownValue) {\n                        <mat-option [value]=\"currentObjectDropdownValue?.value\">{{currentObjectDropdownValue?.displayName}}</mat-option>\n                    }\n                    @for (value of filteredObjectDropdownValues; track $index) {\n                        <mat-option [value]=\"value.value\">{{value.displayName}}</mat-option>\n                    }\n                </mat-select>\n                <mat-error>{{internalGetValidationErrorMessage(model)}}</mat-error>\n            </mat-form-field>\n        }\n        <!-------------------------------------------->\n        <!-------------- references one -------------->\n        <!-------------------------------------------->\n        @case (DecoratorTypes.REFERENCES_ONE) {\n            <mat-form-field [class.w-full]=\"metadataReferencesOne.dropdownOnly\">\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                        <fa-icon matSuffix [icon]=\"faSearch\"></fa-icon>\n                    </mat-form-field>\n                    @if (!metadata.required(entity)) {\n                        <mat-option>-</mat-option>\n                    }\n                    @if (shouldDisplayCurrentReferencesOneDropdownValue) {\n                        <mat-option [value]=\"currentReferencesOneDropdownValue?.value\">{{currentReferencesOneDropdownValue?.displayName}}</mat-option>\n                    }\n                    @for (value of filteredReferencesOneDropdownValues; track $index) {\n                        <mat-option [value]=\"value.value\">{{value.displayName}}</mat-option>\n                    }\n                </mat-select>\n                <mat-error>{{internalGetValidationErrorMessage(inputModel)}}</mat-error>\n            </mat-form-field>\n            <!-- iterates over the references one properties -->\n            @if (referencesOneFormContext) {\n                <ng-container *ngTemplateOutlet=\"form; context: referencesOneFormContext\"></ng-container>\n            }\n        }\n        <!-------------------------------------------->\n        <!-------------------Array-------------------->\n        <!-------------------------------------------->\n        @case (DecoratorTypes.ARRAY) {\n            <div class=\"entityArray\">\n                <div class=\"mat-elevation-z8 elevation-container\">\n                    <div class=\"array-headline\">\n                        <b>{{metadataEntityArray.displayName}}</b>\n                    </div>\n                    @if (metadataEntityArray.createInline && !internalIsReadOnly && addArrayItemFormContext) {\n                        <ng-container *ngTemplateOutlet=\"form; context: addArrayItemFormContext\"></ng-container>\n                    }\n                    @if (!internalIsReadOnly && entityArrayTableContext) {\n                        <div 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]=\"!entityArrayTableContext.$implicit.selection.selected.length\"\n                                (click)=\"removeFromEntityArray()\">\n                                {{metadataEntityArray.removeButtonLabel}}\n                            </button>\n                        </div>\n                    }\n                    @if (entityArrayTableContext) {\n                        <ng-container *ngTemplateOutlet=\"table; context: entityArrayTableContext\"></ng-container>\n                    }\n                </div>\n            </div>\n        }\n        <!-------------------------------------------->\n        <!------------------ has many ---------------->\n        <!-------------------------------------------->\n        @case (DecoratorTypes.HAS_MANY) {\n            <div class=\"hasMany\">\n                <h2 class=\"title\">{{metadataHasMany.tableData.baseData.title}}</h2>\n                <div class=\"grid grid-cols-12\" style=\"column-gap: 24px;\">\n                    <mat-form-field class=\"lg:col-span-8 md:col-span-6 col-span-12\">\n                        <mat-label>{{metadataHasMany.tableData.baseData.searchLabel}}</mat-label>\n                        <input matInput (keyup)=\"applyHasManyFilter($event)\">\n                    </mat-form-field>\n                    @if (metadataHasMany.tableData.baseData.tableActions.length) {\n                        <div\n                            [class.lg:col-span-2]=\"hasManyAllowCreate\"\n                            [class.lg:col-span-4]=\"!hasManyAllowCreate\"\n                            [class.md:col-span-3]=\"hasManyAllowCreate\"\n                            [class.md:col-span-6]=\"!hasManyAllowCreate\"\n                            [class.col-span-6]=\"hasManyAllowCreate\"\n                            [class.col-span-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                    }\n                    <mat-menu #menu=\"matMenu\">\n                        @if (metadataHasMany.tableData.baseData.allowJsonImport) {\n                            <button type=\"button\" mat-menu-item [disabled]=\"hasManyTableActionDisabled(hasManyImportAction)\" (click)=\"runHasManyTableAction(hasManyImportAction)\">\n                                {{hasManyImportAction.displayName}}\n                            </button>\n                        }\n                        @for (action of metadataHasMany.tableData.baseData.tableActions; track $index) {\n                            <button type=\"button\" mat-menu-item [disabled]=\"hasManyTableActionDisabled(action)\" (click)=\"runHasManyTableAction(action)\">\n                                {{action.displayName}}\n                            </button>\n                        }\n                    </mat-menu>\n                    @if (hasManyAllowCreate) {\n                        <div\n                            [class.lg:col-span-2]=\"metadataHasMany.tableData.baseData.tableActions.length\"\n                            [class.lg:col-span-4]=\"!metadataHasMany.tableData.baseData.tableActions.length\"\n                            [class.md:col-span-3]=\"metadataHasMany.tableData.baseData.tableActions.length\"\n                            [class.md:col-span-6]=\"!metadataHasMany.tableData.baseData.tableActions.length\"\n                            [class.col-span-6]=\"metadataHasMany.tableData.baseData.tableActions.length\"\n                            [class.col-span-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                    }\n                </div>\n        \n                <div class=\"mat-elevation-z8 elevation-container\">\n                    @if (hasManyTableContext) {\n                        <ng-container *ngTemplateOutlet=\"table; context: hasManyTableContext\"></ng-container>\n                    }\n                </div>\n            </div>\n        }\n        \n        @default {\n            <div>ERROR: The type {{type}} is not known.</div>\n        }\n    }\n}\n\n\n<ng-template #table let-context>\n    <mat-table matSort [dataSource]=\"context.dataSource\" [class.table-with-error-slot]=\"context.shouldShowMissingError\">\n        <!-- select Column -->\n        <ng-container matColumnDef=\"select\">\n            <mat-header-cell *matHeaderCellDef>\n                <mat-checkbox [checked]=\"context.selection.hasValue() && SelectionUtilities.isAllSelected(context.selection, context.dataSource)\"\n                    [indeterminate]=\"context.selection.hasValue() && !SelectionUtilities.isAllSelected(context.selection, context.dataSource)\"\n                    (change)=\"$event ? SelectionUtilities.masterToggle(context.selection, context.dataSource) : null\">\n                </mat-checkbox>\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let value\" [dynamicStyleClasses]=\"context.dynamicRowStyleClasses\" [value]=\"value\">\n                <mat-checkbox [checked]=\"context.selection.isSelected(value)\"\n                    (click)=\"$event.stopPropagation()\"\n                    (change)=\"$event ? context.selection.toggle(value) : null\">\n                </mat-checkbox>\n            </mat-cell>\n        </ng-container>\n\n        @for (dCol of context.displayColumns; track $index) {\n            <ng-container [matColumnDef]=\"dCol.displayName\">\n                <mat-header-cell *matHeaderCellDef mat-sort-header>\n                    {{dCol.displayName}}\n                </mat-header-cell>\n                <mat-cell *matCellDef=\"let value\" [class.enabled]=\"!dCol.disableClick && context.allowClick(value)\"\n                    [dynamicStyleClasses]=\"context.dynamicRowStyleClasses\" [value]=\"value\"\n                    (click)=\"clickCell(value, dCol, context)\"\n                >\n                    @if (dCol.Component) {\n                        <display-column-value [entity]=\"value\" [ComponentClass]=\"dCol.Component\"></display-column-value>\n                    }\n                    @else {\n                        {{getDisplayColumnValue(value, dCol)}}\n                    }\n                </mat-cell>\n            </ng-container>\n        }\n\n        <mat-header-row *matHeaderRowDef=\"context.displayedColumns\"></mat-header-row>\n        <mat-row *matRowDef=\"let row; columns: context.displayedColumns\"></mat-row>\n    </mat-table>\n\n    @if (context.displayLoadingSpinner && context.isLoading) {\n        <mat-spinner>\n        </mat-spinner>\n    }\n    @else if (context.shouldShowMissingError && !context.dataSource.data.length) {\n        <div class=\"table-error\">{{context.emptyErrorMessage}}</div>\n    }\n\n    <mat-paginator [length]=\"context.dataSource.filteredData.length\" [pageIndex]=\"0\" [pageSize]=\"10\" [pageSizeOptions]=\"[5, 10, 25, 50]\"></mat-paginator>\n</ng-template>\n\n<!--------------------------------------------------------->\n<!---------------------------Form-------------------------->\n<!--------------------------------------------------------->\n<ng-template #form let-context>\n     <!-- eslint-disable angular/no-call-expression -->\n    @if (context.tabs.length > 1) {\n        <mat-tab-group preserveContent>\n            @for (tab of context.tabs; track $index) {\n                <mat-tab [label]=\"tab.tabName\">\n                    @for (row of tab.rows; track $index) {\n                        <div class=\"grid grid-cols-12\" style=\"column-gap: 24px;\">\n                            @for (key of row.keys; track key) {\n                                <ngx-mat-entity-input\n                                    [entity]=\"context.entity\"\n                                    [propertyKey]=\"key\"\n                                    [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                                    [validEmpty]=\"context.validEmpty?.()\"\n                                    [isReadOnly]=\"context.isReadOnly?.(context.entity, key)\"\n                                    [class]=\"EntityUtilities.getWidthClasses(context.entity, key)\"\n                                    [hideOmitForEdit]=\"context.hideOmitForEdit\"\n                                    [hideOmitForCreate]=\"context.hideOmitForCreate\"\n                                    (inputChangeEvent)=\"context.inputChangeEvent()\"\n                                >\n                                </ngx-mat-entity-input>\n                            }\n                        </div>\n                    }\n                </mat-tab>\n            }\n        </mat-tab-group>\n    }\n    @else {\n        @if (!context.tabs.length) {\n            <span class=\"no-entity-tabs\">\n                ERROR: No Inputs. Did you correctly assign all values in the model constructor?\n            </span>\n        }\n        @else {\n            @for (row of context.tabs[0].rows; track $index) {\n                <div class=\"grid grid-cols-12\" style=\"column-gap: 24px;\">\n                    @for (key of row.keys; track key) {\n                        <ngx-mat-entity-input\n                            [entity]=\"context.entity\"\n                            [propertyKey]=\"key\"\n                            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                            [validEmpty]=\"context.validEmpty?.()\"\n                            [isReadOnly]=\"context.isReadOnly?.(context.entity, key)\"\n                            [class]=\"EntityUtilities.getWidthClasses(context.entity, key)\"\n                            [hideOmitForEdit]=\"context.hideOmitForEdit\"\n                            [hideOmitForCreate]=\"context.hideOmitForCreate\"\n                            (inputChangeEvent)=\"context.inputChangeEvent()\"\n                        >\n                        </ngx-mat-entity-input>\n                    }\n                </div>\n            }\n        }\n    }\n</ng-template>\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 (ngSubmit)=\"addArrayItem()\">\n        <mat-dialog-content>\n            @if (addArrayItemFormContext) {\n                <ng-container *ngTemplateOutlet=\"form; context: addArrayItemFormContext\"></ng-container>\n            }\n        </mat-dialog-content>\n    \n        <mat-dialog-actions>\n            <div class=\"dialog-button-with-info-icon\">\n                <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n                    [disabled]=\"!isArrayItemValid\"\n                    [matBadge]=\"arrayItemValidationErrors.length\"\n                    [matBadgeHidden]=\"!arrayItemValidationErrors.length\"\n                >\n                    {{addArrayItemDialogData.createButtonLabel}}\n                </button>\n                @if (arrayItemValidationErrors.length) {\n                    <ngx-mat-entity-tooltip [tooltipContent]=\"arrayItemTooltipContent\"></ngx-mat-entity-tooltip>\n                }\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 (ngSubmit)=\"saveArrayItem()\">\n        <mat-dialog-content>\n            @if (editArrayItemFormContext) {\n                <ng-container *ngTemplateOutlet=\"form; context: editArrayItemFormContext\"></ng-container>\n            }\n        </mat-dialog-content>\n        \n        <mat-dialog-actions>\n            <div class=\"dialog-button-with-info-icon\">\n                <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n                    [class.badge-changes]=\"!arrayItemValidationErrors.length\"\n                    [disabled]=\"internalIsReadOnly || !isArrayItemValid || !isArrayItemDirty\"\n                    [matBadge]=\"arrayItemValidationErrors.length > 0 ? arrayItemValidationErrors.length : arrayItemChanges.length\"\n                    [matBadgeHidden]=\"!arrayItemValidationErrors.length && !arrayItemChanges.length\"\n                >\n                    {{editArrayItemDialogData.confirmButtonLabel}}\n                </button>\n                @if (arrayItemValidationErrors.length || arrayItemChanges.length) {\n                    <ngx-mat-entity-tooltip [tooltipContent]=\"arrayItemTooltipContent\"></ngx-mat-entity-tooltip>\n                }\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 (ngSubmit)=\"dialogCreateHasMany()\">\n        <mat-dialog-content>\n            @if (hasManyCreateFormContext) {\n                <ng-container *ngTemplateOutlet=\"form; context: hasManyCreateFormContext\"></ng-container>\n            }\n        </mat-dialog-content>\n        \n        <mat-dialog-actions>\n            <div class=\"dialog-button-with-info-icon\">\n                <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n                    [disabled]=\"!isHasManyEntityValid\"\n                    [matBadge]=\"hasManyValidationErrors.length\"\n                    [matBadgeHidden]=\"!hasManyValidationErrors.length\"\n                >\n                    {{metadataHasMany.tableData.createData.createButtonLabel}}\n                </button>\n                @if (hasManyValidationErrors.length) {\n                    <ngx-mat-entity-tooltip [tooltipContent]=\"hasManyTooltipContent\"></ngx-mat-entity-tooltip>\n                }\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            @if (metadataHasMany.tableData.editData.actions.length) {\n                <button type=\"button\" mat-raised-button [matMenuTriggerFor]=\"menu\">\n                    {{metadataHasMany.tableData.editData.actionsLabel}}\n                </button>\n            }\n            <mat-menu #menu=\"matMenu\">\n                @for (action of metadataHasMany.tableData.editData.actions; track $index) {\n                    <button type=\"button\" mat-menu-item [disabled]=\"hasManyEditActionDisabled(action)\" (click)=\"hasManyRunEditAction(action)\">\n                        {{action.displayName}}\n                    </button>\n                }\n            </mat-menu>\n        \n            @if (hasManyAllowDelete(hasManyEntity)) {\n                <button type=\"button\" mat-raised-button color=\"warn\" class=\"delete-button\" tabindex=\"-1\" (click)=\"deleteHasManyEntity()\">\n                    {{metadataHasMany.tableData.editData.deleteButtonLabel}}\n                </button>\n            }\n        </div>\n    </div>\n    \n    <form (ngSubmit)=\"dialogEditHasMany()\">\n        <mat-dialog-content>\n            @if (hasManyEditFormContext) {\n                <ng-container *ngTemplateOutlet=\"form; context: hasManyEditFormContext\"></ng-container>\n            }\n        </mat-dialog-content>\n        \n        <mat-dialog-actions>\n            <div class=\"dialog-button-with-info-icon\">\n                <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n                    [class.badge-changes]=\"!hasManyValidationErrors.length\"\n                    [disabled]=\"internalIsReadOnly || !isHasManyEntityValid || !isHasManyEntityDirty\"\n                    [matBadge]=\"hasManyValidationErrors.length > 0 ? hasManyValidationErrors.length : hasManyChanges.length\"\n                    [matBadgeHidden]=\"!hasManyValidationErrors.length && !hasManyChanges.length\"\n                >\n                    {{metadataHasMany.tableData.editData.confirmButtonLabel}}\n                </button>\n                @if (hasManyValidationErrors.length || hasManyChanges.length) {\n                    <ngx-mat-entity-tooltip [tooltipContent]=\"hasManyTooltipContent\"></ngx-mat-entity-tooltip>\n                }\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: ["::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-tab-body-wrapper{margin-left:-12px;margin-right:-12px}::ng-deep .mat-mdc-form-field-has-icon-suffix .mat-mdc-text-field-wrapper{padding-right:16px}::ng-deep .select-search-input{width:100%;margin-top:-8px;margin-bottom:8px}::ng-deep .select-search-input .mat-mdc-form-field-subscript-wrapper{display:none}::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:#000}::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}::ng-deep .badge-changes .mat-badge-content{background-color:orange;color:#fff}mat-spinner{margin:10px auto}.mdc-data-table__row:last-child .mdc-data-table__cell{border-bottom:1px solid rgba(0,0,0,.12)}mat-paginator{padding-top:10px;padding-bottom:10px}.dialog-button-with-info-icon{margin-top:10px;gap:12px;display:flex;align-items:center}.actions-container{display:flex;gap:10px}.w-full{width:100%}.table-with-error-slot{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}.enabled:hover{cursor:pointer}.table-error{display:flex;align-items:center;justify-content:center;margin-top:-6px;border:1px solid #E0E0E0;background-color:#f8d3d7;color:#721c24;height:fit-content;padding-left:4px;padding-right:4px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.entityArray .elevation-container{border-radius:5px;padding:15px 15px 0;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}.hasMany button{width:100%;height:56px;line-height:24px;font-size:16px}.hasMany .title{text-align:center}.hasMany .elevation-container{margin-bottom:15px}\n", "::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-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)}\n", ".grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.grid{display:grid}@media (min-width: 1024px){.lg\\:col-span-12{grid-column:span 12/span 12!important}.lg\\:col-span-11{grid-column:span 11/span 11!important}.lg\\:col-span-10{grid-column:span 10/span 10!important}.lg\\:col-span-9{grid-column:span 9/span 9!important}.lg\\:col-span-8{grid-column:span 8/span 8!important}.lg\\:col-span-7{grid-column:span 7/span 7!important}.lg\\:col-span-6{grid-column:span 6/span 6!important}.lg\\:col-span-5{grid-column:span 5/span 5!important}.lg\\:col-span-4{grid-column:span 4/span 4!important}.lg\\:col-span-3{grid-column:span 3/span 3!important}.lg\\:col-span-2{grid-column:span 2/span 2!important}.lg\\:col-span-1{grid-column:span 1/span 1!important}}@media (min-width: 768px) and (max-width: 1023px){.md\\:col-span-12{grid-column:span 12/span 12!important}.md\\:col-span-11{grid-column:span 11/span 11!important}.md\\:col-span-10{grid-column:span 10/span 10!important}.md\\:col-span-9{grid-column:span 9/span 9!important}.md\\:col-span-8{grid-column:span 8/span 8!important}.md\\:col-span-7{grid-column:span 7/span 7!important}.md\\:col-span-6{grid-column:span 6/span 6!important}.md\\:col-span-5{grid-column:span 5/span 5!important}.md\\:col-span-4{grid-column:span 4/span 4!important}.md\\:col-span-3{grid-column:span 3/span 3!important}.md\\:col-span-2{grid-column:span 2/span 2!important}.md\\:col-span-1{grid-column:span 1/span 1!important}}.col-span-12{grid-column:span 12/span 12}.col-span-11{grid-column:span 11/span 11}.col-span-10{grid-column:span 10/span 10}.col-span-9{grid-column:span 9/span 9}.col-span-8{grid-column:span 8/span 8}.col-span-7{grid-column:span 7/span 7}.col-span-6{grid-column:span 6/span 6}.col-span-5{grid-column:span 5/span 5}.col-span-4{grid-column:span 4/span 4}.col-span-3{grid-column:span 3/span 3}.col-span-2{grid-column:span 2/span 2}.col-span-1{grid-column:span 1/span 1}\n"] }]
+                    ], template: "<!-- eslint-disable angular/no-call-expression -->\n@if(!(hideOmitForCreate && metadata.omitForCreate) && !(hideOmitForEdit && metadata.omitForUpdate)) {\n    @switch (type) {\n        <!-------------------------------------------->\n        <!-----------------Strings-------------------->\n        <!-------------------------------------------->\n        @case (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        }\n        @case (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        }\n        @case (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        }\n        @case (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        }\n        @case (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        }\n        <!-------------------------------------------->\n        <!-----------------Booleans------------------->\n        <!-------------------------------------------->\n        @case (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        }\n        @case (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        }\n        @case (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        }\n        <!-------------------------------------------->\n        <!------------------Numbers------------------->\n        <!-------------------------------------------->\n        @case (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        }\n        @case (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        }\n        @case (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        }\n        <!-------------------------------------------->\n        <!-------------------Array-------------------->\n        <!-------------------------------------------->\n        @case (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        }\n        @case (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        }\n        @case (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        }\n        @case (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        }\n        @case (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        }\n        <!-------------------------------------------->\n        <!-------------------Dates-------------------->\n        <!-------------------------------------------->\n        @case (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        }\n        @case (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        }\n        @case (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        }\n        <!-------------------------------------------->\n        <!-------------------Files-------------------->\n        <!-------------------------------------------->\n        @case (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        }\n        @case (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        }\n        <!-------------------------------------------->\n        <!-------------- references many ------------->\n        <!-------------------------------------------->\n        @case (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        }\n        <!-------------------------------------------->\n        <!-------------------Custom------------------->\n        <!-------------------------------------------->\n        @case (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        }\n        <!-------------------------------------------->\n        <!-------------------Object------------------->\n        <!-------------------------------------------->\n        @case (DecoratorTypes.OBJECT) {\n            <b>{{metadataDefaultObject.displayName}}</b>\n            <!-- iterates over the object properties -->\n            <ng-container *ngTemplateOutlet=\"form; context: objectFormContext\"></ng-container>\n        }\n        <!-------------------------------------------->\n        <!---------------Object Dropdown-------------->\n        <!-------------------------------------------->\n        @case (DecoratorTypes.OBJECT_DROPDOWN) {\n            <mat-form-field class=\"w-full\">\n                <mat-label>{{metadata.displayName}}</mat-label>\n                <mat-select #model=\"ngModel\"\n                    [name]=\"objectDropdownName\"\n                    [required]=\"metadata.required(entity)\"\n                    [disabled]=\"internalIsReadOnly\"\n                    [compareWith]=\"compareObjectsBound\"\n                    [(ngModel)]=\"entity[propertyKey]\"\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)=\"filterObjectDropdownValues($any($event.target).value)\">\n                        <fa-icon matSuffix [icon]=\"faSearch\"></fa-icon>\n                    </mat-form-field>\n                    @if (!metadata.required(entity)) {\n                        <mat-option>-</mat-option>\n                    }\n                    @if (shouldDisplayCurrentObjectDropdownValue) {\n                        <mat-option [value]=\"currentObjectDropdownValue?.value\">{{currentObjectDropdownValue?.displayName}}</mat-option>\n                    }\n                    @for (value of filteredObjectDropdownValues; track $index) {\n                        <mat-option [value]=\"value.value\">{{value.displayName}}</mat-option>\n                    }\n                </mat-select>\n                <mat-error>{{internalGetValidationErrorMessage(model)}}</mat-error>\n            </mat-form-field>\n        }\n        <!-------------------------------------------->\n        <!-------------- references one -------------->\n        <!-------------------------------------------->\n        @case (DecoratorTypes.REFERENCES_ONE) {\n            <mat-form-field [class.w-full]=\"metadataReferencesOne.dropdownOnly\">\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                        <fa-icon matSuffix [icon]=\"faSearch\"></fa-icon>\n                    </mat-form-field>\n                    @if (!metadata.required(entity)) {\n                        <mat-option>-</mat-option>\n                    }\n                    @if (shouldDisplayCurrentReferencesOneDropdownValue) {\n                        <mat-option [value]=\"currentReferencesOneDropdownValue?.value\">{{currentReferencesOneDropdownValue?.displayName}}</mat-option>\n                    }\n                    @for (value of filteredReferencesOneDropdownValues; track $index) {\n                        <mat-option [value]=\"value.value\">{{value.displayName}}</mat-option>\n                    }\n                </mat-select>\n                <mat-error>{{internalGetValidationErrorMessage(inputModel)}}</mat-error>\n            </mat-form-field>\n            <!-- iterates over the references one properties -->\n            @if (referencesOneFormContext) {\n                <ng-container *ngTemplateOutlet=\"form; context: referencesOneFormContext\"></ng-container>\n            }\n        }\n        <!-------------------------------------------->\n        <!-------------------Array-------------------->\n        <!-------------------------------------------->\n        @case (DecoratorTypes.ARRAY) {\n            <div class=\"entityArray\">\n                <div class=\"mat-elevation-z8 elevation-container\">\n                    <div class=\"array-headline\">\n                        <b>{{metadataEntityArray.displayName}}</b>\n                    </div>\n                    @if (metadataEntityArray.createInline && !internalIsReadOnly) {\n                        @if (addArrayItemFormContext) {\n                            <ng-container *ngTemplateOutlet=\"form; context: addArrayItemFormContext\"></ng-container>\n                        }\n                        @else if (addArrayItemFormContext2) {\n                            <ng-container *ngTemplateOutlet=\"form; context: addArrayItemFormContext2\"></ng-container>\n                        }\n                    }\n                    @if (!internalIsReadOnly && entityArrayTableContext) {\n                        <div 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]=\"!entityArrayTableContext.$implicit.selection.selected.length\"\n                                (click)=\"removeFromEntityArray()\">\n                                {{metadataEntityArray.removeButtonLabel}}\n                            </button>\n                        </div>\n                    }\n                    @if (entityArrayTableContext) {\n                        <ng-container *ngTemplateOutlet=\"table; context: entityArrayTableContext\"></ng-container>\n                    }\n                </div>\n            </div>\n        }\n        <!-------------------------------------------->\n        <!------------------ has many ---------------->\n        <!-------------------------------------------->\n        @case (DecoratorTypes.HAS_MANY) {\n            <div class=\"hasMany\">\n                <h2 class=\"title\">{{metadataHasMany.tableData.baseData.title}}</h2>\n                <div class=\"grid grid-cols-12 gap-x-6\">\n                    <mat-form-field class=\"lg:col-span-8 md:col-span-6 col-span-12\">\n                        <mat-label>{{metadataHasMany.tableData.baseData.searchLabel}}</mat-label>\n                        <input matInput (keyup)=\"applyHasManyFilter($event)\">\n                    </mat-form-field>\n                    @if (metadataHasMany.tableData.baseData.tableActions.length) {\n                        <div\n                            [class.lg:col-span-2]=\"hasManyAllowCreate\"\n                            [class.lg:col-span-4]=\"!hasManyAllowCreate\"\n                            [class.md:col-span-3]=\"hasManyAllowCreate\"\n                            [class.md:col-span-6]=\"!hasManyAllowCreate\"\n                            [class.col-span-6]=\"hasManyAllowCreate\"\n                            [class.col-span-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                    }\n                    <mat-menu #menu=\"matMenu\">\n                        @if (metadataHasMany.tableData.baseData.allowJsonImport) {\n                            <button type=\"button\" mat-menu-item [disabled]=\"hasManyTableActionDisabled(hasManyImportAction)\" (click)=\"runHasManyTableAction(hasManyImportAction)\">\n                                {{hasManyImportAction.displayName}}\n                            </button>\n                        }\n                        @for (action of metadataHasMany.tableData.baseData.tableActions; track $index) {\n                            <button type=\"button\" mat-menu-item [disabled]=\"hasManyTableActionDisabled(action)\" (click)=\"runHasManyTableAction(action)\">\n                                {{action.displayName}}\n                            </button>\n                        }\n                    </mat-menu>\n                    @if (hasManyAllowCreate) {\n                        <div\n                            [class.lg:col-span-2]=\"metadataHasMany.tableData.baseData.tableActions.length\"\n                            [class.lg:col-span-4]=\"!metadataHasMany.tableData.baseData.tableActions.length\"\n                            [class.md:col-span-3]=\"metadataHasMany.tableData.baseData.tableActions.length\"\n                            [class.md:col-span-6]=\"!metadataHasMany.tableData.baseData.tableActions.length\"\n                            [class.col-span-6]=\"metadataHasMany.tableData.baseData.tableActions.length\"\n                            [class.col-span-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                    }\n                </div>\n        \n                <div class=\"mat-elevation-z8 elevation-container\">\n                    @if (hasManyTableContext) {\n                        <ng-container *ngTemplateOutlet=\"table; context: hasManyTableContext\"></ng-container>\n                    }\n                </div>\n            </div>\n        }\n        \n        @default {\n            <div>ERROR: The type {{type}} is not known.</div>\n        }\n    }\n}\n\n\n<ng-template #table let-context>\n    <mat-table matSort [dataSource]=\"context.dataSource\" [class.table-with-error-slot]=\"context.shouldShowMissingError\">\n        <!-- select Column -->\n        <ng-container matColumnDef=\"select\">\n            <mat-header-cell *matHeaderCellDef>\n                <mat-checkbox [checked]=\"context.selection.hasValue() && SelectionUtilities.isAllSelected(context.selection, context.dataSource)\"\n                    [indeterminate]=\"context.selection.hasValue() && !SelectionUtilities.isAllSelected(context.selection, context.dataSource)\"\n                    (change)=\"$event ? SelectionUtilities.masterToggle(context.selection, context.dataSource) : null\">\n                </mat-checkbox>\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let value\" [dynamicStyleClasses]=\"context.dynamicRowStyleClasses\" [value]=\"value\">\n                <mat-checkbox [checked]=\"context.selection.isSelected(value)\"\n                    (click)=\"$event.stopPropagation()\"\n                    (change)=\"$event ? context.selection.toggle(value) : null\">\n                </mat-checkbox>\n            </mat-cell>\n        </ng-container>\n\n        @for (dCol of context.displayColumns; track $index) {\n            <ng-container [matColumnDef]=\"dCol.displayName\">\n                <mat-header-cell *matHeaderCellDef mat-sort-header>\n                    {{dCol.displayName}}\n                </mat-header-cell>\n                <mat-cell *matCellDef=\"let value\" [class.enabled]=\"!dCol.disableClick && context.allowClick(value)\"\n                    [dynamicStyleClasses]=\"context.dynamicRowStyleClasses\" [value]=\"value\"\n                    (click)=\"clickCell(value, dCol, context)\"\n                >\n                    @if (dCol.Component) {\n                        <display-column-value [entity]=\"value\" [ComponentClass]=\"dCol.Component\"></display-column-value>\n                    }\n                    @else {\n                        {{getDisplayColumnValue(value, dCol)}}\n                    }\n                </mat-cell>\n            </ng-container>\n        }\n\n        <mat-header-row *matHeaderRowDef=\"context.displayedColumns\"></mat-header-row>\n        <mat-row *matRowDef=\"let row; columns: context.displayedColumns\"></mat-row>\n    </mat-table>\n\n    @if (context.displayLoadingSpinner && context.isLoading) {\n        <mat-spinner>\n        </mat-spinner>\n    }\n    @else if (context.shouldShowMissingError && !context.dataSource.data.length) {\n        <div class=\"table-error\">{{context.emptyErrorMessage}}</div>\n    }\n\n    <mat-paginator [length]=\"context.dataSource.filteredData.length\" [pageIndex]=\"0\" [pageSize]=\"10\" [pageSizeOptions]=\"[5, 10, 25, 50]\"></mat-paginator>\n</ng-template>\n\n<!--------------------------------------------------------->\n<!---------------------------Form-------------------------->\n<!--------------------------------------------------------->\n<ng-template #form let-context>\n    <!-- eslint-disable angular/no-call-expression -->\n    @if (context.tabs.length > 1) {\n        <mat-tab-group preserveContent>\n            @for (tab of context.tabs; track $index) {\n                <mat-tab [label]=\"tab.tabName\">\n                    @for (row of tab.rows; track $index) {\n                        <div class=\"grid grid-cols-12 gap-x-6\">\n                            @for (key of row.keys; track key) {\n                                <ngx-mat-entity-input\n                                    [entity]=\"context.entity\"\n                                    [propertyKey]=\"key\"\n                                    [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                                    [validEmpty]=\"context.validEmpty?.()\"\n                                    [isReadOnly]=\"context.isReadOnly?.(context.entity, key)\"\n                                    [class]=\"EntityUtilities.getWidthClasses(context.entity, key)\"\n                                    [hideOmitForEdit]=\"context.hideOmitForEdit\"\n                                    [hideOmitForCreate]=\"context.hideOmitForCreate\"\n                                    (inputChangeEvent)=\"context.inputChangeEvent()\"\n                                >\n                                </ngx-mat-entity-input>\n                            }\n                        </div>\n                    }\n                </mat-tab>\n            }\n        </mat-tab-group>\n    }\n    @else {\n        @if (!context.tabs.length) {\n            <span class=\"no-entity-tabs\">\n                ERROR: No Inputs. Did you correctly assign all values in the model constructor?\n            </span>\n        }\n        @else {\n            @for (row of context.tabs[0].rows; track $index) {\n                <div class=\"grid grid-cols-12 gap-x-6\">\n                    @for (key of row.keys; track key) {\n                        <ngx-mat-entity-input\n                            [entity]=\"context.entity\"\n                            [propertyKey]=\"key\"\n                            [getValidationErrorMessage]=\"internalGetValidationErrorMessage\"\n                            [validEmpty]=\"context.validEmpty?.()\"\n                            [isReadOnly]=\"context.isReadOnly?.(context.entity, key)\"\n                            [class]=\"EntityUtilities.getWidthClasses(context.entity, key)\"\n                            [hideOmitForEdit]=\"context.hideOmitForEdit\"\n                            [hideOmitForCreate]=\"context.hideOmitForCreate\"\n                            (inputChangeEvent)=\"context.inputChangeEvent()\"\n                        >\n                        </ngx-mat-entity-input>\n                    }\n                </div>\n            }\n        }\n    }\n</ng-template>\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 (ngSubmit)=\"addArrayItem()\">\n        <mat-dialog-content>\n            @if (addArrayItemFormContext) {\n                <ng-container *ngTemplateOutlet=\"form; context: addArrayItemFormContext\"></ng-container>\n            }\n        </mat-dialog-content>\n    \n        <mat-dialog-actions>\n            <div class=\"dialog-button-with-info-icon\">\n                <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n                    [disabled]=\"!isArrayItemValid\"\n                    [matBadge]=\"arrayItemValidationErrors.length\"\n                    [matBadgeHidden]=\"!arrayItemValidationErrors.length\"\n                >\n                    {{addArrayItemDialogData.createButtonLabel}}\n                </button>\n                @if (arrayItemValidationErrors.length) {\n                    <ngx-mat-entity-tooltip [tooltipContent]=\"arrayItemTooltipContent\"></ngx-mat-entity-tooltip>\n                }\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 (ngSubmit)=\"saveArrayItem()\">\n        <mat-dialog-content>\n            @if (editArrayItemFormContext) {\n                <ng-container *ngTemplateOutlet=\"form; context: editArrayItemFormContext\"></ng-container>\n            }\n        </mat-dialog-content>\n        \n        <mat-dialog-actions>\n            <div class=\"dialog-button-with-info-icon\">\n                <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n                    [class.badge-changes]=\"!arrayItemValidationErrors.length\"\n                    [disabled]=\"internalIsReadOnly || !isArrayItemValid || !isArrayItemDirty\"\n                    [matBadge]=\"arrayItemValidationErrors.length > 0 ? arrayItemValidationErrors.length : arrayItemChanges.length\"\n                    [matBadgeHidden]=\"!arrayItemValidationErrors.length && !arrayItemChanges.length\"\n                >\n                    {{editArrayItemDialogData.confirmButtonLabel}}\n                </button>\n                @if (arrayItemValidationErrors.length || arrayItemChanges.length) {\n                    <ngx-mat-entity-tooltip [tooltipContent]=\"arrayItemTooltipContent\"></ngx-mat-entity-tooltip>\n                }\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 (ngSubmit)=\"dialogCreateHasMany()\">\n        <mat-dialog-content>\n            @if (hasManyCreateFormContext) {\n                <ng-container *ngTemplateOutlet=\"form; context: hasManyCreateFormContext\"></ng-container>\n            }\n        </mat-dialog-content>\n        \n        <mat-dialog-actions>\n            <div class=\"dialog-button-with-info-icon\">\n                <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n                    [disabled]=\"!isHasManyEntityValid\"\n                    [matBadge]=\"hasManyValidationErrors.length\"\n                    [matBadgeHidden]=\"!hasManyValidationErrors.length\"\n                >\n                    {{metadataHasMany.tableData.createData.createButtonLabel}}\n                </button>\n                @if (hasManyValidationErrors.length) {\n                    <ngx-mat-entity-tooltip [tooltipContent]=\"hasManyTooltipContent\"></ngx-mat-entity-tooltip>\n                }\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            @if (metadataHasMany.tableData.editData.actions.length) {\n                <button type=\"button\" mat-raised-button [matMenuTriggerFor]=\"menu\">\n                    {{metadataHasMany.tableData.editData.actionsLabel}}\n                </button>\n            }\n            <mat-menu #menu=\"matMenu\">\n                @for (action of metadataHasMany.tableData.editData.actions; track $index) {\n                    <button type=\"button\" mat-menu-item [disabled]=\"hasManyEditActionDisabled(action)\" (click)=\"hasManyRunEditAction(action)\">\n                        {{action.displayName}}\n                    </button>\n                }\n            </mat-menu>\n        \n            @if (hasManyAllowDelete(hasManyEntity)) {\n                <button type=\"button\" mat-raised-button color=\"warn\" class=\"delete-button\" tabindex=\"-1\" (click)=\"deleteHasManyEntity()\">\n                    {{metadataHasMany.tableData.editData.deleteButtonLabel}}\n                </button>\n            }\n        </div>\n    </div>\n    \n    <form (ngSubmit)=\"dialogEditHasMany()\">\n        <mat-dialog-content>\n            @if (hasManyEditFormContext) {\n                <ng-container *ngTemplateOutlet=\"form; context: hasManyEditFormContext\"></ng-container>\n            }\n        </mat-dialog-content>\n        \n        <mat-dialog-actions>\n            <div class=\"dialog-button-with-info-icon\">\n                <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n                    [class.badge-changes]=\"!hasManyValidationErrors.length\"\n                    [disabled]=\"internalIsReadOnly || !isHasManyEntityValid || !isHasManyEntityDirty\"\n                    [matBadge]=\"hasManyValidationErrors.length > 0 ? hasManyValidationErrors.length : hasManyChanges.length\"\n                    [matBadgeHidden]=\"!hasManyValidationErrors.length && !hasManyChanges.length\"\n                >\n                    {{metadataHasMany.tableData.editData.confirmButtonLabel}}\n                </button>\n                @if (hasManyValidationErrors.length || hasManyChanges.length) {\n                    <ngx-mat-entity-tooltip [tooltipContent]=\"hasManyTooltipContent\"></ngx-mat-entity-tooltip>\n                }\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: ["::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-tab-body-wrapper{margin-left:-12px;margin-right:-12px}::ng-deep .mat-mdc-form-field-has-icon-suffix .mat-mdc-text-field-wrapper{padding-right:16px}::ng-deep .select-search-input{width:100%;margin-top:-8px;margin-bottom:8px}::ng-deep .select-search-input .mat-mdc-form-field-subscript-wrapper{display:none}::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:#000}::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}::ng-deep .badge-changes .mat-badge-content{background-color:orange;color:#fff}mat-spinner{margin:10px auto}.mdc-data-table__row:last-child .mdc-data-table__cell{border-bottom:1px solid rgba(0,0,0,.12)}mat-paginator{padding-top:10px;padding-bottom:10px}.dialog-button-with-info-icon{margin-top:10px;gap:12px;display:flex;align-items:center}.actions-container{display:flex;gap:10px}.w-full{width:100%}.table-with-error-slot{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}.enabled:hover{cursor:pointer}.table-error{display:flex;align-items:center;justify-content:center;margin-top:-6px;border:1px solid #E0E0E0;background-color:#f8d3d7;color:#721c24;height:fit-content;padding-left:4px;padding-right:4px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.entityArray .elevation-container{border-radius:5px;padding:15px 15px 0;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;column-gap:24px}.entityArray .buttons button{flex:1}.hasMany button{width:100%;height:56px;line-height:24px;font-size:16px}.hasMany .title{text-align:center}.hasMany .elevation-container{margin-bottom:15px}\n", "::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-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)}\n", ".grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.gap-x-6{column-gap:24px}.grid{display:grid}@media (min-width: 1024px){.lg\\:col-span-12{grid-column:span 12/span 12!important}.lg\\:col-span-11{grid-column:span 11/span 11!important}.lg\\:col-span-10{grid-column:span 10/span 10!important}.lg\\:col-span-9{grid-column:span 9/span 9!important}.lg\\:col-span-8{grid-column:span 8/span 8!important}.lg\\:col-span-7{grid-column:span 7/span 7!important}.lg\\:col-span-6{grid-column:span 6/span 6!important}.lg\\:col-span-5{grid-column:span 5/span 5!important}.lg\\:col-span-4{grid-column:span 4/span 4!important}.lg\\:col-span-3{grid-column:span 3/span 3!important}.lg\\:col-span-2{grid-column:span 2/span 2!important}.lg\\:col-span-1{grid-column:span 1/span 1!important}}@media (min-width: 768px) and (max-width: 1023px){.md\\:col-span-12{grid-column:span 12/span 12!important}.md\\:col-span-11{grid-column:span 11/span 11!important}.md\\:col-span-10{grid-column:span 10/span 10!important}.md\\:col-span-9{grid-column:span 9/span 9!important}.md\\:col-span-8{grid-column:span 8/span 8!important}.md\\:col-span-7{grid-column:span 7/span 7!important}.md\\:col-span-6{grid-column:span 6/span 6!important}.md\\:col-span-5{grid-column:span 5/span 5!important}.md\\:col-span-4{grid-column:span 4/span 4!important}.md\\:col-span-3{grid-column:span 3/span 3!important}.md\\:col-span-2{grid-column:span 2/span 2!important}.md\\:col-span-1{grid-column:span 1/span 1!important}}.col-span-12{grid-column:span 12/span 12}.col-span-11{grid-column:span 11/span 11}.col-span-10{grid-column:span 10/span 10}.col-span-9{grid-column:span 9/span 9}.col-span-8{grid-column:span 8/span 8}.col-span-7{grid-column:span 7/span 7}.col-span-6{grid-column:span 6/span 6}.col-span-5{grid-column:span 5/span 5}.col-span-4{grid-column:span 4/span 4}.col-span-3{grid-column:span 3/span 3}.col-span-2{grid-column:span 2/span 2}.col-span-1{grid-column:span 1/span 1}\n"] }]
         }], ctorParameters: () => [{ type: i1.MatDialog }, { type: i0.EnvironmentInjector }, { type: i2$6.Router }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [NGX_GET_VALIDATION_ERROR_MESSAGE]
@@ -7156,7 +7178,7 @@ class NgxMatEntityFormComponent {
         this.formChange.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: NgxMatEntityFormComponent, deps: [{ token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.7", type: NgxMatEntityFormComponent, isStandalone: true, selector: "ngx-mat-entity-form", inputs: { entity: "entity", isEntityReadOnly: "isEntityReadOnly", hideOmitForCreate: "hideOmitForCreate", hideOmitForEdit: "hideOmitForEdit", additionalOmitKeys: "additionalOmitKeys" }, outputs: { formChange: "formChange", selectedTabChange: "selectedTabChange" }, ngImport: i0, template: " <!-- eslint-disable angular/no-call-expression -->\n@if (entityTabs.length > 1) {\n    <mat-tab-group preserveContent (selectedTabChange)=\"selectedTabChange.emit()\">\n        @for (tab of entityTabs; track $index) {\n            <mat-tab [label]=\"tab.tabName\">\n                @for (row of tab.rows; track $index) {\n                    <div class=\"grid grid-cols-12\" style=\"column-gap: 24px;\">\n                        @for (key of row.keys; track key) {\n                            <ngx-mat-entity-input\n                                [entity]=\"entity\"\n                                [propertyKey]=\"key\"\n                                [hideOmitForEdit]=\"hideOmitForEdit\"\n                                [hideOmitForCreate]=\"hideOmitForCreate\"\n                                [class]=\"EntityUtilities.getWidthClasses(entity, key)\"\n                                [isReadOnly]=\"isReadOnly(key)\"\n                                (inputChangeEvent)=\"inputChange()\"\n                            >\n                            </ngx-mat-entity-input>\n                        }\n                    </div>\n                }\n            </mat-tab>\n        }\n    </mat-tab-group>\n}\n@else {\n    @if (!entityTabs.length) {\n        <span class=\"no-entity-tabs\">\n            ERROR: No Inputs. Did you correctly assign all values in the model constructor?\n        </span>\n    }\n    @else {\n        @for (row of entityTabs[0].rows; track $index) {\n            <div class=\"grid grid-cols-12\" style=\"column-gap: 24px;\">\n                @for (key of row.keys; track key) {\n                    <ngx-mat-entity-input\n                        [entity]=\"entity\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForEdit]=\"hideOmitForEdit\"\n                        [hideOmitForCreate]=\"hideOmitForCreate\"\n                        [class]=\"EntityUtilities.getWidthClasses(entity, key)\"\n                        [isReadOnly]=\"isReadOnly(key)\"\n                        (inputChangeEvent)=\"inputChange()\"\n                    >\n                    </ngx-mat-entity-input>\n                }\n            </div>\n        }\n    }\n}", styles: [".no-entity-tabs{padding:10px;background-color:red;color:#f5f5f5}\n", ".grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.grid{display:grid}@media (min-width: 1024px){.lg\\:col-span-12{grid-column:span 12/span 12!important}.lg\\:col-span-11{grid-column:span 11/span 11!important}.lg\\:col-span-10{grid-column:span 10/span 10!important}.lg\\:col-span-9{grid-column:span 9/span 9!important}.lg\\:col-span-8{grid-column:span 8/span 8!important}.lg\\:col-span-7{grid-column:span 7/span 7!important}.lg\\:col-span-6{grid-column:span 6/span 6!important}.lg\\:col-span-5{grid-column:span 5/span 5!important}.lg\\:col-span-4{grid-column:span 4/span 4!important}.lg\\:col-span-3{grid-column:span 3/span 3!important}.lg\\:col-span-2{grid-column:span 2/span 2!important}.lg\\:col-span-1{grid-column:span 1/span 1!important}}@media (min-width: 768px) and (max-width: 1023px){.md\\:col-span-12{grid-column:span 12/span 12!important}.md\\:col-span-11{grid-column:span 11/span 11!important}.md\\:col-span-10{grid-column:span 10/span 10!important}.md\\:col-span-9{grid-column:span 9/span 9!important}.md\\:col-span-8{grid-column:span 8/span 8!important}.md\\:col-span-7{grid-column:span 7/span 7!important}.md\\:col-span-6{grid-column:span 6/span 6!important}.md\\:col-span-5{grid-column:span 5/span 5!important}.md\\:col-span-4{grid-column:span 4/span 4!important}.md\\:col-span-3{grid-column:span 3/span 3!important}.md\\:col-span-2{grid-column:span 2/span 2!important}.md\\:col-span-1{grid-column:span 1/span 1!important}}.col-span-12{grid-column:span 12/span 12}.col-span-11{grid-column:span 11/span 11}.col-span-10{grid-column:span 10/span 10}.col-span-9{grid-column:span 9/span 9}.col-span-8{grid-column:span 8/span 8}.col-span-7{grid-column:span 7/span 7}.col-span-6{grid-column:span 6/span 6}.col-span-5{grid-column:span 5/span 5}.col-span-4{grid-column:span 4/span 4}.col-span-3{grid-column:span 3/span 3}.col-span-2{grid-column:span 2/span 2}.col-span-1{grid-column:span 1/span 1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i5$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i5$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: NgxMatEntityInputComponent, selector: "ngx-mat-entity-input", inputs: ["entity", "propertyKey", "getValidationErrorMessage", "hideOmitForCreate", "hideOmitForEdit", "validEmpty", "isReadOnly"], outputs: ["inputChangeEvent"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.7", type: NgxMatEntityFormComponent, isStandalone: true, selector: "ngx-mat-entity-form", inputs: { entity: "entity", isEntityReadOnly: "isEntityReadOnly", hideOmitForCreate: "hideOmitForCreate", hideOmitForEdit: "hideOmitForEdit", additionalOmitKeys: "additionalOmitKeys" }, outputs: { formChange: "formChange", selectedTabChange: "selectedTabChange" }, ngImport: i0, template: " <!-- eslint-disable angular/no-call-expression -->\n@if (entityTabs.length > 1) {\n    <mat-tab-group preserveContent (selectedTabChange)=\"selectedTabChange.emit()\">\n        @for (tab of entityTabs; track $index) {\n            <mat-tab [label]=\"tab.tabName\">\n                @for (row of tab.rows; track $index) {\n                    <div class=\"grid grid-cols-12 gap-x-6\">\n                        @for (key of row.keys; track key) {\n                            <ngx-mat-entity-input\n                                [entity]=\"entity\"\n                                [propertyKey]=\"key\"\n                                [hideOmitForEdit]=\"hideOmitForEdit\"\n                                [hideOmitForCreate]=\"hideOmitForCreate\"\n                                [class]=\"EntityUtilities.getWidthClasses(entity, key)\"\n                                [isReadOnly]=\"isReadOnly(key)\"\n                                (inputChangeEvent)=\"inputChange()\"\n                            >\n                            </ngx-mat-entity-input>\n                        }\n                    </div>\n                }\n            </mat-tab>\n        }\n    </mat-tab-group>\n}\n@else {\n    @if (!entityTabs.length) {\n        <span class=\"no-entity-tabs\">\n            ERROR: No Inputs. Did you correctly assign all values in the model constructor?\n        </span>\n    }\n    @else {\n        @for (row of entityTabs[0].rows; track $index) {\n            <div class=\"grid grid-cols-12 gap-x-6\">\n                @for (key of row.keys; track key) {\n                    <ngx-mat-entity-input\n                        [entity]=\"entity\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForEdit]=\"hideOmitForEdit\"\n                        [hideOmitForCreate]=\"hideOmitForCreate\"\n                        [class]=\"EntityUtilities.getWidthClasses(entity, key)\"\n                        [isReadOnly]=\"isReadOnly(key)\"\n                        (inputChangeEvent)=\"inputChange()\"\n                    >\n                    </ngx-mat-entity-input>\n                }\n            </div>\n        }\n    }\n}", styles: [".no-entity-tabs{padding:10px;background-color:red;color:#f5f5f5}\n", ".grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.gap-x-6{column-gap:24px}.grid{display:grid}@media (min-width: 1024px){.lg\\:col-span-12{grid-column:span 12/span 12!important}.lg\\:col-span-11{grid-column:span 11/span 11!important}.lg\\:col-span-10{grid-column:span 10/span 10!important}.lg\\:col-span-9{grid-column:span 9/span 9!important}.lg\\:col-span-8{grid-column:span 8/span 8!important}.lg\\:col-span-7{grid-column:span 7/span 7!important}.lg\\:col-span-6{grid-column:span 6/span 6!important}.lg\\:col-span-5{grid-column:span 5/span 5!important}.lg\\:col-span-4{grid-column:span 4/span 4!important}.lg\\:col-span-3{grid-column:span 3/span 3!important}.lg\\:col-span-2{grid-column:span 2/span 2!important}.lg\\:col-span-1{grid-column:span 1/span 1!important}}@media (min-width: 768px) and (max-width: 1023px){.md\\:col-span-12{grid-column:span 12/span 12!important}.md\\:col-span-11{grid-column:span 11/span 11!important}.md\\:col-span-10{grid-column:span 10/span 10!important}.md\\:col-span-9{grid-column:span 9/span 9!important}.md\\:col-span-8{grid-column:span 8/span 8!important}.md\\:col-span-7{grid-column:span 7/span 7!important}.md\\:col-span-6{grid-column:span 6/span 6!important}.md\\:col-span-5{grid-column:span 5/span 5!important}.md\\:col-span-4{grid-column:span 4/span 4!important}.md\\:col-span-3{grid-column:span 3/span 3!important}.md\\:col-span-2{grid-column:span 2/span 2!important}.md\\:col-span-1{grid-column:span 1/span 1!important}}.col-span-12{grid-column:span 12/span 12}.col-span-11{grid-column:span 11/span 11}.col-span-10{grid-column:span 10/span 10}.col-span-9{grid-column:span 9/span 9}.col-span-8{grid-column:span 8/span 8}.col-span-7{grid-column:span 7/span 7}.col-span-6{grid-column:span 6/span 6}.col-span-5{grid-column:span 5/span 5}.col-span-4{grid-column:span 4/span 4}.col-span-3{grid-column:span 3/span 3}.col-span-2{grid-column:span 2/span 2}.col-span-1{grid-column:span 1/span 1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i5$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i5$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: NgxMatEntityInputComponent, selector: "ngx-mat-entity-input", inputs: ["entity", "propertyKey", "getValidationErrorMessage", "hideOmitForCreate", "hideOmitForEdit", "validEmpty", "isReadOnly"], outputs: ["inputChangeEvent"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: NgxMatEntityFormComponent, decorators: [{
             type: Component,
@@ -7164,7 +7186,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImpor
                         CommonModule,
                         MatTabsModule,
                         NgxMatEntityInputComponent
-                    ], template: " <!-- eslint-disable angular/no-call-expression -->\n@if (entityTabs.length > 1) {\n    <mat-tab-group preserveContent (selectedTabChange)=\"selectedTabChange.emit()\">\n        @for (tab of entityTabs; track $index) {\n            <mat-tab [label]=\"tab.tabName\">\n                @for (row of tab.rows; track $index) {\n                    <div class=\"grid grid-cols-12\" style=\"column-gap: 24px;\">\n                        @for (key of row.keys; track key) {\n                            <ngx-mat-entity-input\n                                [entity]=\"entity\"\n                                [propertyKey]=\"key\"\n                                [hideOmitForEdit]=\"hideOmitForEdit\"\n                                [hideOmitForCreate]=\"hideOmitForCreate\"\n                                [class]=\"EntityUtilities.getWidthClasses(entity, key)\"\n                                [isReadOnly]=\"isReadOnly(key)\"\n                                (inputChangeEvent)=\"inputChange()\"\n                            >\n                            </ngx-mat-entity-input>\n                        }\n                    </div>\n                }\n            </mat-tab>\n        }\n    </mat-tab-group>\n}\n@else {\n    @if (!entityTabs.length) {\n        <span class=\"no-entity-tabs\">\n            ERROR: No Inputs. Did you correctly assign all values in the model constructor?\n        </span>\n    }\n    @else {\n        @for (row of entityTabs[0].rows; track $index) {\n            <div class=\"grid grid-cols-12\" style=\"column-gap: 24px;\">\n                @for (key of row.keys; track key) {\n                    <ngx-mat-entity-input\n                        [entity]=\"entity\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForEdit]=\"hideOmitForEdit\"\n                        [hideOmitForCreate]=\"hideOmitForCreate\"\n                        [class]=\"EntityUtilities.getWidthClasses(entity, key)\"\n                        [isReadOnly]=\"isReadOnly(key)\"\n                        (inputChangeEvent)=\"inputChange()\"\n                    >\n                    </ngx-mat-entity-input>\n                }\n            </div>\n        }\n    }\n}", styles: [".no-entity-tabs{padding:10px;background-color:red;color:#f5f5f5}\n", ".grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.grid{display:grid}@media (min-width: 1024px){.lg\\:col-span-12{grid-column:span 12/span 12!important}.lg\\:col-span-11{grid-column:span 11/span 11!important}.lg\\:col-span-10{grid-column:span 10/span 10!important}.lg\\:col-span-9{grid-column:span 9/span 9!important}.lg\\:col-span-8{grid-column:span 8/span 8!important}.lg\\:col-span-7{grid-column:span 7/span 7!important}.lg\\:col-span-6{grid-column:span 6/span 6!important}.lg\\:col-span-5{grid-column:span 5/span 5!important}.lg\\:col-span-4{grid-column:span 4/span 4!important}.lg\\:col-span-3{grid-column:span 3/span 3!important}.lg\\:col-span-2{grid-column:span 2/span 2!important}.lg\\:col-span-1{grid-column:span 1/span 1!important}}@media (min-width: 768px) and (max-width: 1023px){.md\\:col-span-12{grid-column:span 12/span 12!important}.md\\:col-span-11{grid-column:span 11/span 11!important}.md\\:col-span-10{grid-column:span 10/span 10!important}.md\\:col-span-9{grid-column:span 9/span 9!important}.md\\:col-span-8{grid-column:span 8/span 8!important}.md\\:col-span-7{grid-column:span 7/span 7!important}.md\\:col-span-6{grid-column:span 6/span 6!important}.md\\:col-span-5{grid-column:span 5/span 5!important}.md\\:col-span-4{grid-column:span 4/span 4!important}.md\\:col-span-3{grid-column:span 3/span 3!important}.md\\:col-span-2{grid-column:span 2/span 2!important}.md\\:col-span-1{grid-column:span 1/span 1!important}}.col-span-12{grid-column:span 12/span 12}.col-span-11{grid-column:span 11/span 11}.col-span-10{grid-column:span 10/span 10}.col-span-9{grid-column:span 9/span 9}.col-span-8{grid-column:span 8/span 8}.col-span-7{grid-column:span 7/span 7}.col-span-6{grid-column:span 6/span 6}.col-span-5{grid-column:span 5/span 5}.col-span-4{grid-column:span 4/span 4}.col-span-3{grid-column:span 3/span 3}.col-span-2{grid-column:span 2/span 2}.col-span-1{grid-column:span 1/span 1}\n"] }]
+                    ], template: " <!-- eslint-disable angular/no-call-expression -->\n@if (entityTabs.length > 1) {\n    <mat-tab-group preserveContent (selectedTabChange)=\"selectedTabChange.emit()\">\n        @for (tab of entityTabs; track $index) {\n            <mat-tab [label]=\"tab.tabName\">\n                @for (row of tab.rows; track $index) {\n                    <div class=\"grid grid-cols-12 gap-x-6\">\n                        @for (key of row.keys; track key) {\n                            <ngx-mat-entity-input\n                                [entity]=\"entity\"\n                                [propertyKey]=\"key\"\n                                [hideOmitForEdit]=\"hideOmitForEdit\"\n                                [hideOmitForCreate]=\"hideOmitForCreate\"\n                                [class]=\"EntityUtilities.getWidthClasses(entity, key)\"\n                                [isReadOnly]=\"isReadOnly(key)\"\n                                (inputChangeEvent)=\"inputChange()\"\n                            >\n                            </ngx-mat-entity-input>\n                        }\n                    </div>\n                }\n            </mat-tab>\n        }\n    </mat-tab-group>\n}\n@else {\n    @if (!entityTabs.length) {\n        <span class=\"no-entity-tabs\">\n            ERROR: No Inputs. Did you correctly assign all values in the model constructor?\n        </span>\n    }\n    @else {\n        @for (row of entityTabs[0].rows; track $index) {\n            <div class=\"grid grid-cols-12 gap-x-6\">\n                @for (key of row.keys; track key) {\n                    <ngx-mat-entity-input\n                        [entity]=\"entity\"\n                        [propertyKey]=\"key\"\n                        [hideOmitForEdit]=\"hideOmitForEdit\"\n                        [hideOmitForCreate]=\"hideOmitForCreate\"\n                        [class]=\"EntityUtilities.getWidthClasses(entity, key)\"\n                        [isReadOnly]=\"isReadOnly(key)\"\n                        (inputChangeEvent)=\"inputChange()\"\n                    >\n                    </ngx-mat-entity-input>\n                }\n            </div>\n        }\n    }\n}", styles: [".no-entity-tabs{padding:10px;background-color:red;color:#f5f5f5}\n", ".grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.gap-x-6{column-gap:24px}.grid{display:grid}@media (min-width: 1024px){.lg\\:col-span-12{grid-column:span 12/span 12!important}.lg\\:col-span-11{grid-column:span 11/span 11!important}.lg\\:col-span-10{grid-column:span 10/span 10!important}.lg\\:col-span-9{grid-column:span 9/span 9!important}.lg\\:col-span-8{grid-column:span 8/span 8!important}.lg\\:col-span-7{grid-column:span 7/span 7!important}.lg\\:col-span-6{grid-column:span 6/span 6!important}.lg\\:col-span-5{grid-column:span 5/span 5!important}.lg\\:col-span-4{grid-column:span 4/span 4!important}.lg\\:col-span-3{grid-column:span 3/span 3!important}.lg\\:col-span-2{grid-column:span 2/span 2!important}.lg\\:col-span-1{grid-column:span 1/span 1!important}}@media (min-width: 768px) and (max-width: 1023px){.md\\:col-span-12{grid-column:span 12/span 12!important}.md\\:col-span-11{grid-column:span 11/span 11!important}.md\\:col-span-10{grid-column:span 10/span 10!important}.md\\:col-span-9{grid-column:span 9/span 9!important}.md\\:col-span-8{grid-column:span 8/span 8!important}.md\\:col-span-7{grid-column:span 7/span 7!important}.md\\:col-span-6{grid-column:span 6/span 6!important}.md\\:col-span-5{grid-column:span 5/span 5!important}.md\\:col-span-4{grid-column:span 4/span 4!important}.md\\:col-span-3{grid-column:span 3/span 3!important}.md\\:col-span-2{grid-column:span 2/span 2!important}.md\\:col-span-1{grid-column:span 1/span 1!important}}.col-span-12{grid-column:span 12/span 12}.col-span-11{grid-column:span 11/span 11}.col-span-10{grid-column:span 10/span 10}.col-span-9{grid-column:span 9/span 9}.col-span-8{grid-column:span 8/span 8}.col-span-7{grid-column:span 7/span 7}.col-span-6{grid-column:span 6/span 6}.col-span-5{grid-column:span 5/span 5}.col-span-4{grid-column:span 4/span 4}.col-span-3{grid-column:span 3/span 3}.col-span-2{grid-column:span 2/span 2}.col-span-1{grid-column:span 1/span 1}\n"] }]
         }], ctorParameters: () => [{ type: i0.EnvironmentInjector }], propDecorators: { entity: [{
                 type: Input,
                 args: [{ required: true }]
@@ -8686,7 +8708,7 @@ class NgxMatEntityTableComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: NgxMatEntityTableComponent, deps: [{ token: i1.MatDialog }, { token: i0.EnvironmentInjector }, { token: i2$6.Router }, { token: NGX_COMPLETE_GLOBAL_DEFAULT_VALUES }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.7", type: NgxMatEntityTableComponent, isStandalone: true, selector: "ngx-mat-entity-table", inputs: { tableData: "tableData" }, outputs: { unsavedDialogChanges: "unsavedDialogChanges" }, ngImport: i0, template: " \n<!-- eslint-disable angular/no-call-expression -->\n<h1 class=\"title\">{{data.baseData.title}}</h1>\n\n<div class=\"grid grid-cols-12\" style=\"column-gap: 24px;\">\n    <mat-form-field class=\"lg:col-span-8 md:col-span-6 col-span-12\">\n        <mat-label>{{data.baseData.searchLabel}}</mat-label>\n        <input matInput [(ngModel)]=\"searchString\">\n    </mat-form-field>\n    @if (data.baseData.tableActions.length) {\n        <div\n            [class.lg:col-span-2]=\"allowCreate\"\n            [class.lg:col-span-4]=\"!allowCreate\"\n            [class.md:col-span-3]=\"allowCreate\"\n            [class.md:col-span-6]=\"!allowCreate\"\n            [class.col-span-6]=\"allowCreate\"\n            [class.col-span-12]=\"!allowCreate\"\n        >\n            <button type=\"button\" class=\"actions-button\" mat-raised-button [matMenuTriggerFor]=\"menu\">\n                {{data.baseData.tableActionsLabel}}\n            </button>\n        </div>\n    }\n    <mat-menu #menu=\"matMenu\">\n        @if (data.baseData.allowJsonImport) {\n            <button type=\"button\" mat-menu-item [disabled]=\"tableActionDisabled(importAction)\" (click)=\"runTableAction(importAction)\">\n                {{importAction.displayName}}\n            </button>\n        }\n        @for (action of data.baseData.tableActions; track $index) {\n            <button type=\"button\" mat-menu-item [disabled]=\"tableActionDisabled(action)\" (click)=\"runTableAction(action)\">\n                {{action.displayName}}\n            </button>\n        }\n    </mat-menu>\n\n    @if (allowCreate) {\n        <div\n            [class.lg:col-span-2]=\"data.baseData.tableActions.length\"\n            [class.lg:col-span-4]=\"!data.baseData.tableActions.length\"\n            [class.md:col-span-3]=\"data.baseData.tableActions.length\"\n            [class.md:col-span-6]=\"!data.baseData.tableActions.length\"\n            [class.col-span-6]=\"data.baseData.tableActions.length\"\n            [class.col-span-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    }\n</div>\n\n<div class=\"mat-elevation-z8\">\n    <custom-table\n        [configuration]=\"tableConfig\"\n        [data]=\"entities\"\n        [isLoading]=\"isLoading\"\n        [searchString]=\"searchString\"\n        (cellClicked)=\"editEntity($event.value)\"\n        (selectionChanged)=\"selected = $event\"\n    >\n    </custom-table>\n</div>", styles: ["button{width:100%}.title{text-align:center}.actions-button,.create-button{height:56px;line-height:24px;font-size:16px}@media (max-width: 767px){.actions-button,.create-button{margin-bottom:15px}}\n", ".grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.grid{display:grid}@media (min-width: 1024px){.lg\\:col-span-12{grid-column:span 12/span 12!important}.lg\\:col-span-11{grid-column:span 11/span 11!important}.lg\\:col-span-10{grid-column:span 10/span 10!important}.lg\\:col-span-9{grid-column:span 9/span 9!important}.lg\\:col-span-8{grid-column:span 8/span 8!important}.lg\\:col-span-7{grid-column:span 7/span 7!important}.lg\\:col-span-6{grid-column:span 6/span 6!important}.lg\\:col-span-5{grid-column:span 5/span 5!important}.lg\\:col-span-4{grid-column:span 4/span 4!important}.lg\\:col-span-3{grid-column:span 3/span 3!important}.lg\\:col-span-2{grid-column:span 2/span 2!important}.lg\\:col-span-1{grid-column:span 1/span 1!important}}@media (min-width: 768px) and (max-width: 1023px){.md\\:col-span-12{grid-column:span 12/span 12!important}.md\\:col-span-11{grid-column:span 11/span 11!important}.md\\:col-span-10{grid-column:span 10/span 10!important}.md\\:col-span-9{grid-column:span 9/span 9!important}.md\\:col-span-8{grid-column:span 8/span 8!important}.md\\:col-span-7{grid-column:span 7/span 7!important}.md\\:col-span-6{grid-column:span 6/span 6!important}.md\\:col-span-5{grid-column:span 5/span 5!important}.md\\:col-span-4{grid-column:span 4/span 4!important}.md\\:col-span-3{grid-column:span 3/span 3!important}.md\\:col-span-2{grid-column:span 2/span 2!important}.md\\:col-span-1{grid-column:span 1/span 1!important}}.col-span-12{grid-column:span 12/span 12}.col-span-11{grid-column:span 11/span 11}.col-span-10{grid-column:span 10/span 10}.col-span-9{grid-column:span 9/span 9}.col-span-8{grid-column:span 8/span 8}.col-span-7{grid-column:span 7/span 7}.col-span-6{grid-column:span 6/span 6}.col-span-5{grid-column:span 5/span 5}.col-span-4{grid-column:span 4/span 4}.col-span-3{grid-column:span 3/span 3}.col-span-2{grid-column:span 2/span 2}.col-span-1{grid-column:span 1/span 1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$3.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: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatSortModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i7.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: CustomTableComponent, selector: "custom-table", inputs: ["data", "searchString", "required", "isLoading", "configuration"], outputs: ["cellClicked", "selectionChanged"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.7", type: NgxMatEntityTableComponent, isStandalone: true, selector: "ngx-mat-entity-table", inputs: { tableData: "tableData" }, outputs: { unsavedDialogChanges: "unsavedDialogChanges" }, ngImport: i0, template: " \n<!-- eslint-disable angular/no-call-expression -->\n<h1 class=\"title\">{{data.baseData.title}}</h1>\n\n<div class=\"grid grid-cols-12 gap-x-6\">\n    <mat-form-field class=\"lg:col-span-8 md:col-span-6 col-span-12\">\n        <mat-label>{{data.baseData.searchLabel}}</mat-label>\n        <input matInput [(ngModel)]=\"searchString\">\n    </mat-form-field>\n    @if (data.baseData.tableActions.length) {\n        <div\n            [class.lg:col-span-2]=\"allowCreate\"\n            [class.lg:col-span-4]=\"!allowCreate\"\n            [class.md:col-span-3]=\"allowCreate\"\n            [class.md:col-span-6]=\"!allowCreate\"\n            [class.col-span-6]=\"allowCreate\"\n            [class.col-span-12]=\"!allowCreate\"\n        >\n            <button type=\"button\" class=\"actions-button\" mat-raised-button [matMenuTriggerFor]=\"menu\">\n                {{data.baseData.tableActionsLabel}}\n            </button>\n        </div>\n    }\n    <mat-menu #menu=\"matMenu\">\n        @if (data.baseData.allowJsonImport) {\n            <button type=\"button\" mat-menu-item [disabled]=\"tableActionDisabled(importAction)\" (click)=\"runTableAction(importAction)\">\n                {{importAction.displayName}}\n            </button>\n        }\n        @for (action of data.baseData.tableActions; track $index) {\n            <button type=\"button\" mat-menu-item [disabled]=\"tableActionDisabled(action)\" (click)=\"runTableAction(action)\">\n                {{action.displayName}}\n            </button>\n        }\n    </mat-menu>\n\n    @if (allowCreate) {\n        <div\n            [class.lg:col-span-2]=\"data.baseData.tableActions.length\"\n            [class.lg:col-span-4]=\"!data.baseData.tableActions.length\"\n            [class.md:col-span-3]=\"data.baseData.tableActions.length\"\n            [class.md:col-span-6]=\"!data.baseData.tableActions.length\"\n            [class.col-span-6]=\"data.baseData.tableActions.length\"\n            [class.col-span-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    }\n</div>\n\n<div class=\"mat-elevation-z8\">\n    <custom-table\n        [configuration]=\"tableConfig\"\n        [data]=\"entities\"\n        [isLoading]=\"isLoading\"\n        [searchString]=\"searchString\"\n        (cellClicked)=\"editEntity($event.value)\"\n        (selectionChanged)=\"selected = $event\"\n    >\n    </custom-table>\n</div>", styles: ["button{width:100%}.title{text-align:center}.actions-button,.create-button{height:56px;line-height:24px;font-size:16px}@media (max-width: 767px){.actions-button,.create-button{margin-bottom:15px}}\n", ".grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.gap-x-6{column-gap:24px}.grid{display:grid}@media (min-width: 1024px){.lg\\:col-span-12{grid-column:span 12/span 12!important}.lg\\:col-span-11{grid-column:span 11/span 11!important}.lg\\:col-span-10{grid-column:span 10/span 10!important}.lg\\:col-span-9{grid-column:span 9/span 9!important}.lg\\:col-span-8{grid-column:span 8/span 8!important}.lg\\:col-span-7{grid-column:span 7/span 7!important}.lg\\:col-span-6{grid-column:span 6/span 6!important}.lg\\:col-span-5{grid-column:span 5/span 5!important}.lg\\:col-span-4{grid-column:span 4/span 4!important}.lg\\:col-span-3{grid-column:span 3/span 3!important}.lg\\:col-span-2{grid-column:span 2/span 2!important}.lg\\:col-span-1{grid-column:span 1/span 1!important}}@media (min-width: 768px) and (max-width: 1023px){.md\\:col-span-12{grid-column:span 12/span 12!important}.md\\:col-span-11{grid-column:span 11/span 11!important}.md\\:col-span-10{grid-column:span 10/span 10!important}.md\\:col-span-9{grid-column:span 9/span 9!important}.md\\:col-span-8{grid-column:span 8/span 8!important}.md\\:col-span-7{grid-column:span 7/span 7!important}.md\\:col-span-6{grid-column:span 6/span 6!important}.md\\:col-span-5{grid-column:span 5/span 5!important}.md\\:col-span-4{grid-column:span 4/span 4!important}.md\\:col-span-3{grid-column:span 3/span 3!important}.md\\:col-span-2{grid-column:span 2/span 2!important}.md\\:col-span-1{grid-column:span 1/span 1!important}}.col-span-12{grid-column:span 12/span 12}.col-span-11{grid-column:span 11/span 11}.col-span-10{grid-column:span 10/span 10}.col-span-9{grid-column:span 9/span 9}.col-span-8{grid-column:span 8/span 8}.col-span-7{grid-column:span 7/span 7}.col-span-6{grid-column:span 6/span 6}.col-span-5{grid-column:span 5/span 5}.col-span-4{grid-column:span 4/span 4}.col-span-3{grid-column:span 3/span 3}.col-span-2{grid-column:span 2/span 2}.col-span-1{grid-column:span 1/span 1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$3.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: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatSortModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i7.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: CustomTableComponent, selector: "custom-table", inputs: ["data", "searchString", "required", "isLoading", "configuration"], outputs: ["cellClicked", "selectionChanged"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: NgxMatEntityTableComponent, decorators: [{
             type: Component,
@@ -8701,7 +8723,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImpor
                         MatDialogModule,
                         MatProgressSpinnerModule,
                         CustomTableComponent
-                    ], template: " \n<!-- eslint-disable angular/no-call-expression -->\n<h1 class=\"title\">{{data.baseData.title}}</h1>\n\n<div class=\"grid grid-cols-12\" style=\"column-gap: 24px;\">\n    <mat-form-field class=\"lg:col-span-8 md:col-span-6 col-span-12\">\n        <mat-label>{{data.baseData.searchLabel}}</mat-label>\n        <input matInput [(ngModel)]=\"searchString\">\n    </mat-form-field>\n    @if (data.baseData.tableActions.length) {\n        <div\n            [class.lg:col-span-2]=\"allowCreate\"\n            [class.lg:col-span-4]=\"!allowCreate\"\n            [class.md:col-span-3]=\"allowCreate\"\n            [class.md:col-span-6]=\"!allowCreate\"\n            [class.col-span-6]=\"allowCreate\"\n            [class.col-span-12]=\"!allowCreate\"\n        >\n            <button type=\"button\" class=\"actions-button\" mat-raised-button [matMenuTriggerFor]=\"menu\">\n                {{data.baseData.tableActionsLabel}}\n            </button>\n        </div>\n    }\n    <mat-menu #menu=\"matMenu\">\n        @if (data.baseData.allowJsonImport) {\n            <button type=\"button\" mat-menu-item [disabled]=\"tableActionDisabled(importAction)\" (click)=\"runTableAction(importAction)\">\n                {{importAction.displayName}}\n            </button>\n        }\n        @for (action of data.baseData.tableActions; track $index) {\n            <button type=\"button\" mat-menu-item [disabled]=\"tableActionDisabled(action)\" (click)=\"runTableAction(action)\">\n                {{action.displayName}}\n            </button>\n        }\n    </mat-menu>\n\n    @if (allowCreate) {\n        <div\n            [class.lg:col-span-2]=\"data.baseData.tableActions.length\"\n            [class.lg:col-span-4]=\"!data.baseData.tableActions.length\"\n            [class.md:col-span-3]=\"data.baseData.tableActions.length\"\n            [class.md:col-span-6]=\"!data.baseData.tableActions.length\"\n            [class.col-span-6]=\"data.baseData.tableActions.length\"\n            [class.col-span-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    }\n</div>\n\n<div class=\"mat-elevation-z8\">\n    <custom-table\n        [configuration]=\"tableConfig\"\n        [data]=\"entities\"\n        [isLoading]=\"isLoading\"\n        [searchString]=\"searchString\"\n        (cellClicked)=\"editEntity($event.value)\"\n        (selectionChanged)=\"selected = $event\"\n    >\n    </custom-table>\n</div>", styles: ["button{width:100%}.title{text-align:center}.actions-button,.create-button{height:56px;line-height:24px;font-size:16px}@media (max-width: 767px){.actions-button,.create-button{margin-bottom:15px}}\n", ".grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.grid{display:grid}@media (min-width: 1024px){.lg\\:col-span-12{grid-column:span 12/span 12!important}.lg\\:col-span-11{grid-column:span 11/span 11!important}.lg\\:col-span-10{grid-column:span 10/span 10!important}.lg\\:col-span-9{grid-column:span 9/span 9!important}.lg\\:col-span-8{grid-column:span 8/span 8!important}.lg\\:col-span-7{grid-column:span 7/span 7!important}.lg\\:col-span-6{grid-column:span 6/span 6!important}.lg\\:col-span-5{grid-column:span 5/span 5!important}.lg\\:col-span-4{grid-column:span 4/span 4!important}.lg\\:col-span-3{grid-column:span 3/span 3!important}.lg\\:col-span-2{grid-column:span 2/span 2!important}.lg\\:col-span-1{grid-column:span 1/span 1!important}}@media (min-width: 768px) and (max-width: 1023px){.md\\:col-span-12{grid-column:span 12/span 12!important}.md\\:col-span-11{grid-column:span 11/span 11!important}.md\\:col-span-10{grid-column:span 10/span 10!important}.md\\:col-span-9{grid-column:span 9/span 9!important}.md\\:col-span-8{grid-column:span 8/span 8!important}.md\\:col-span-7{grid-column:span 7/span 7!important}.md\\:col-span-6{grid-column:span 6/span 6!important}.md\\:col-span-5{grid-column:span 5/span 5!important}.md\\:col-span-4{grid-column:span 4/span 4!important}.md\\:col-span-3{grid-column:span 3/span 3!important}.md\\:col-span-2{grid-column:span 2/span 2!important}.md\\:col-span-1{grid-column:span 1/span 1!important}}.col-span-12{grid-column:span 12/span 12}.col-span-11{grid-column:span 11/span 11}.col-span-10{grid-column:span 10/span 10}.col-span-9{grid-column:span 9/span 9}.col-span-8{grid-column:span 8/span 8}.col-span-7{grid-column:span 7/span 7}.col-span-6{grid-column:span 6/span 6}.col-span-5{grid-column:span 5/span 5}.col-span-4{grid-column:span 4/span 4}.col-span-3{grid-column:span 3/span 3}.col-span-2{grid-column:span 2/span 2}.col-span-1{grid-column:span 1/span 1}\n"] }]
+                    ], template: " \n<!-- eslint-disable angular/no-call-expression -->\n<h1 class=\"title\">{{data.baseData.title}}</h1>\n\n<div class=\"grid grid-cols-12 gap-x-6\">\n    <mat-form-field class=\"lg:col-span-8 md:col-span-6 col-span-12\">\n        <mat-label>{{data.baseData.searchLabel}}</mat-label>\n        <input matInput [(ngModel)]=\"searchString\">\n    </mat-form-field>\n    @if (data.baseData.tableActions.length) {\n        <div\n            [class.lg:col-span-2]=\"allowCreate\"\n            [class.lg:col-span-4]=\"!allowCreate\"\n            [class.md:col-span-3]=\"allowCreate\"\n            [class.md:col-span-6]=\"!allowCreate\"\n            [class.col-span-6]=\"allowCreate\"\n            [class.col-span-12]=\"!allowCreate\"\n        >\n            <button type=\"button\" class=\"actions-button\" mat-raised-button [matMenuTriggerFor]=\"menu\">\n                {{data.baseData.tableActionsLabel}}\n            </button>\n        </div>\n    }\n    <mat-menu #menu=\"matMenu\">\n        @if (data.baseData.allowJsonImport) {\n            <button type=\"button\" mat-menu-item [disabled]=\"tableActionDisabled(importAction)\" (click)=\"runTableAction(importAction)\">\n                {{importAction.displayName}}\n            </button>\n        }\n        @for (action of data.baseData.tableActions; track $index) {\n            <button type=\"button\" mat-menu-item [disabled]=\"tableActionDisabled(action)\" (click)=\"runTableAction(action)\">\n                {{action.displayName}}\n            </button>\n        }\n    </mat-menu>\n\n    @if (allowCreate) {\n        <div\n            [class.lg:col-span-2]=\"data.baseData.tableActions.length\"\n            [class.lg:col-span-4]=\"!data.baseData.tableActions.length\"\n            [class.md:col-span-3]=\"data.baseData.tableActions.length\"\n            [class.md:col-span-6]=\"!data.baseData.tableActions.length\"\n            [class.col-span-6]=\"data.baseData.tableActions.length\"\n            [class.col-span-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    }\n</div>\n\n<div class=\"mat-elevation-z8\">\n    <custom-table\n        [configuration]=\"tableConfig\"\n        [data]=\"entities\"\n        [isLoading]=\"isLoading\"\n        [searchString]=\"searchString\"\n        (cellClicked)=\"editEntity($event.value)\"\n        (selectionChanged)=\"selected = $event\"\n    >\n    </custom-table>\n</div>", styles: ["button{width:100%}.title{text-align:center}.actions-button,.create-button{height:56px;line-height:24px;font-size:16px}@media (max-width: 767px){.actions-button,.create-button{margin-bottom:15px}}\n", ".grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.gap-x-6{column-gap:24px}.grid{display:grid}@media (min-width: 1024px){.lg\\:col-span-12{grid-column:span 12/span 12!important}.lg\\:col-span-11{grid-column:span 11/span 11!important}.lg\\:col-span-10{grid-column:span 10/span 10!important}.lg\\:col-span-9{grid-column:span 9/span 9!important}.lg\\:col-span-8{grid-column:span 8/span 8!important}.lg\\:col-span-7{grid-column:span 7/span 7!important}.lg\\:col-span-6{grid-column:span 6/span 6!important}.lg\\:col-span-5{grid-column:span 5/span 5!important}.lg\\:col-span-4{grid-column:span 4/span 4!important}.lg\\:col-span-3{grid-column:span 3/span 3!important}.lg\\:col-span-2{grid-column:span 2/span 2!important}.lg\\:col-span-1{grid-column:span 1/span 1!important}}@media (min-width: 768px) and (max-width: 1023px){.md\\:col-span-12{grid-column:span 12/span 12!important}.md\\:col-span-11{grid-column:span 11/span 11!important}.md\\:col-span-10{grid-column:span 10/span 10!important}.md\\:col-span-9{grid-column:span 9/span 9!important}.md\\:col-span-8{grid-column:span 8/span 8!important}.md\\:col-span-7{grid-column:span 7/span 7!important}.md\\:col-span-6{grid-column:span 6/span 6!important}.md\\:col-span-5{grid-column:span 5/span 5!important}.md\\:col-span-4{grid-column:span 4/span 4!important}.md\\:col-span-3{grid-column:span 3/span 3!important}.md\\:col-span-2{grid-column:span 2/span 2!important}.md\\:col-span-1{grid-column:span 1/span 1!important}}.col-span-12{grid-column:span 12/span 12}.col-span-11{grid-column:span 11/span 11}.col-span-10{grid-column:span 10/span 10}.col-span-9{grid-column:span 9/span 9}.col-span-8{grid-column:span 8/span 8}.col-span-7{grid-column:span 7/span 7}.col-span-6{grid-column:span 6/span 6}.col-span-5{grid-column:span 5/span 5}.col-span-4{grid-column:span 4/span 4}.col-span-3{grid-column:span 3/span 3}.col-span-2{grid-column:span 2/span 2}.col-span-1{grid-column:span 1/span 1}\n"] }]
         }], ctorParameters: () => [{ type: i1.MatDialog }, { type: i0.EnvironmentInjector }, { type: i2$6.Router }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [NGX_COMPLETE_GLOBAL_DEFAULT_VALUES]