ngx-material-entity 18.1.0 → 18.2.0

package/fesm2022/ngx-material-entity.mjs

@@ -20,6 +20,8 @@ import * as i10 from '@angular/material/badge';
 import { MatBadgeModule } from '@angular/material/badge';
 import * as i5 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { faCircleMinus, faFileArrowUp, faUpload, faPlusCircle, faFileZipper, faDownload, faAngleLeft, faAngleRight, faSearch, faEye, faEyeSlash, faInfo, faChevronLeft, faWarning } from '@fortawesome/free-solid-svg-icons';
 import * as i5$1 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
 import { SelectionModel } from '@angular/cdk/collections';
@@ -61,6 +63,7 @@ import * as js2xml from 'js2xmlparser';
 // eslint-disable-next-line typescript/no-explicit-any
 function dropdownValuesToFunction(dropdownValues) {
     if (Array.isArray(dropdownValues)) {
+        // eslint-disable-next-line typescript/require-await
         return async () => dropdownValues;
     }
     // eslint-disable-next-line typescript/no-explicit-any
@@ -263,6 +266,7 @@ class AutocompleteStringDecoratorConfigInternal extends PropertyDecoratorConfigI
     // eslint-disable-next-line typescript/no-explicit-any
     autocompleteValuesToFunction(autocompleteValues) {
         if (Array.isArray(autocompleteValues)) {
+            // eslint-disable-next-line typescript/require-await
             return async () => autocompleteValues;
         }
         // eslint-disable-next-line typescript/no-explicit-any
@@ -686,12 +690,15 @@ class FileUtilities {
     }
     static transformToBytes(value, unit) {
         switch (unit) {
-            case 'B':
+            case 'B': {
                 return value;
-            case 'KB':
+            }
+            case 'KB': {
                 return value * 1000;
-            case 'GB':
+            }
+            case 'GB': {
                 return value * 1000000000;
+            }
         }
     }
 }
@@ -891,17 +898,20 @@ class EntityUtilities {
             const type = this.getPropertyType(entity, key);
             if (!await this.isEqual(entity[key], entityPriorChanges[key], metadata, type, http)) {
                 switch (type) {
-                    case DecoratorTypes.OBJECT:
+                    case DecoratorTypes.OBJECT: {
                         // eslint-disable-next-line typescript/no-explicit-any
                         res[key] = LodashUtilities.omit(entity[key], this.getOmitForCreate(entity[key]));
                         break;
-                    case DecoratorTypes.ARRAY:
+                    }
+                    case DecoratorTypes.ARRAY: {
                         res[key] = entity[key]
                             .map(value => LodashUtilities.omit(value, this.getOmitForCreate(value)));
                         break;
-                    default:
+                    }
+                    default: {
                         res[key] = entity[key];
                         break;
+                    }
                 }
             }
         }
@@ -980,14 +990,15 @@ class EntityUtilities {
             const type = this.getPropertyType(target, key);
             let value = entity ? ReflectUtilities.get(entity, key) : undefined;
             switch (type) {
-                case DecoratorTypes.OBJECT:
+                case DecoratorTypes.OBJECT: {
                     // eslint-disable-next-line typescript/no-explicit-any
                     const objectMetadata 
                     // eslint-disable-next-line typescript/no-explicit-any
                     = this.getPropertyMetadata(target, key, DecoratorTypes.OBJECT);
                     value = new objectMetadata.EntityClass(value);
                     break;
-                case DecoratorTypes.ARRAY:
+                }
+                case DecoratorTypes.ARRAY: {
                     const inputArray = value;
                     const resArray = [];
                     if (inputArray) {
@@ -1002,8 +1013,10 @@ class EntityUtilities {
                     }
                     value = resArray;
                     break;
-                default:
+                }
+                default: {
                     break;
+                }
             }
             ReflectUtilities.set(target, key, value);
         }
@@ -1072,28 +1085,37 @@ class EntityUtilities {
             return true;
         }
         switch (type) {
-            case DecoratorTypes.DATE_RANGE:
+            case DecoratorTypes.DATE_RANGE: {
                 return this.isEqualDateRange(value, valuePriorChanges, metadata.filter);
-            case DecoratorTypes.DATE:
+            }
+            case DecoratorTypes.DATE: {
                 return this.isEqualDate(value, valuePriorChanges);
-            case DecoratorTypes.DATE_TIME:
+            }
+            case DecoratorTypes.DATE_TIME: {
                 return this.isEqualDateTime(value, valuePriorChanges);
+            }
             case DecoratorTypes.ARRAY_DATE:
-            case DecoratorTypes.ARRAY_DATE_TIME:
+            case DecoratorTypes.ARRAY_DATE_TIME: {
                 return this.isEqualArrayDate(value, valuePriorChanges);
-            case DecoratorTypes.ARRAY_DATE_RANGE:
+            }
+            case DecoratorTypes.ARRAY_DATE_RANGE: {
                 return this.isEqualArrayDateRange(value, valuePriorChanges, metadata.filter);
+            }
             case DecoratorTypes.ARRAY_STRING_CHIPS:
-            case DecoratorTypes.ARRAY_STRING_AUTOCOMPLETE_CHIPS:
+            case DecoratorTypes.ARRAY_STRING_AUTOCOMPLETE_CHIPS: {
                 return this.isEqualArrayString(value, valuePriorChanges);
+            }
             case DecoratorTypes.FILE_IMAGE:
-            case DecoratorTypes.FILE_DEFAULT:
+            case DecoratorTypes.FILE_DEFAULT: {
                 return this.isEqualFile(value, valuePriorChanges, metadata.multiple, http);
-            case DecoratorTypes.CUSTOM:
+            }
+            case DecoratorTypes.CUSTOM: {
                 // eslint-disable-next-line typescript/no-explicit-any
                 return this.isEqualCustom(value, valuePriorChanges, metadata);
-            default:
+            }
+            default: {
                 return LodashUtilities.isEqual(value, valuePriorChanges);
+            }
         }
     }
     static differenceIsUndefinedAndEmptyString(value, valuePriorChanges) {
@@ -1247,10 +1269,10 @@ class EntityUtilities {
         return metadataA.position.order - metadataB.position.order;
     }
     /**
-     * Gets the bootstrap column classes for "lg", "md" and "sm".
-     * @param entity - Entity to get the bootstrap column values of the key.
-     * @param key - Key of the property to get bootstrap column values from.
-     * @returns Bootstrap column classes.
+     * Gets the responsive column classes for "lg", "md" and "sm".
+     * @param entity - Entity to get the responsive column classes for.
+     * @param key - Key of the property to get the responsive column classes from.
+     * @returns Responsive column classes for large, middle and small displays.
      * @throws When no metadata for the given key was found.
      */
     static getWidthClasses(entity, key) {
@@ -1258,7 +1280,7 @@ class EntityUtilities {
         if (!metadata) {
             throw new Error(`Could not get metadata for property "${key.toString()}"`);
         }
-        return `col-lg-${metadata.defaultWidths[0]} col-md-${metadata.defaultWidths[1]} col-sm-${metadata.defaultWidths[2]}`;
+        return `lg:col-span-${metadata.defaultWidths[0]} md:col-span-${metadata.defaultWidths[1]} col-span-${metadata.defaultWidths[2]}`;
     }
     /**
      * Resets all changes on an entity.
@@ -1421,16 +1443,21 @@ function baseProperty(metadata, type, metadataKeysToReset) {
  */
 function string(metadata) {
     switch (metadata.displayStyle) {
-        case 'dropdown':
+        case 'dropdown': {
             return baseProperty(new DropdownStringDecoratorConfigInternal(metadata), DecoratorTypes.STRING_DROPDOWN);
-        case 'autocomplete':
+        }
+        case 'autocomplete': {
             return baseProperty(new AutocompleteStringDecoratorConfigInternal(metadata), DecoratorTypes.STRING_AUTOCOMPLETE);
-        case 'textbox':
+        }
+        case 'textbox': {
             return baseProperty(new TextboxStringDecoratorConfigInternal(metadata), DecoratorTypes.STRING_TEXTBOX);
-        case 'password':
+        }
+        case 'password': {
             return baseProperty(new PasswordStringDecoratorConfigInternal(metadata), DecoratorTypes.STRING_PASSWORD, [EntityUtilities.CONFIRM_PASSWORD_KEY]);
-        default:
+        }
+        default: {
             return baseProperty(new DefaultStringDecoratorConfigInternal(metadata), DecoratorTypes.STRING);
+        }
     }
 }
 
@@ -1725,10 +1752,10 @@ class NgxMatEntityConfirmDialogComponent {
     cancel() {
         this.dialogRef.close(false);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NgxMatEntityConfirmDialogComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: NGX_COMPLETE_GLOBAL_DEFAULT_VALUES }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0", type: NgxMatEntityConfirmDialogComponent, isStandalone: true, selector: "ngx-mat-entity-confirm-dialog", ngImport: i0, template: "@if (data.title) {\n    <h2 mat-dialog-title>{{data.title}}</h2>\n}\n\n<mat-dialog-content>\n    @for (paragraph of data.text; track $index) {\n        <p>{{paragraph}}</p>\n    }\n    @if (data.requireConfirmation) {\n        <div class=\"checkbox-wrapper\">\n            <mat-checkbox name=\"confirm\" [(ngModel)]=\"confirm\">\n                {{data.confirmationText}}\n            </mat-checkbox>\n        </div>\n    }\n</mat-dialog-content>\n\n<mat-dialog-actions>\n    @if (data.type === 'delete') {\n        <button type=\"button\" mat-raised-button color=\"warn\" class=\"confirm-button\" [disabled]=\"data.requireConfirmation && !confirm\" (click)=\"confirmAction()\">\n            {{data.confirmButtonLabel}}\n        </button>\n    }\n    @if (data.type !== 'delete') {\n        <button type=\"button\" mat-raised-button class=\"confirm-button\" [disabled]=\"data.requireConfirmation && !confirm\" (click)=\"confirmAction()\">\n            {{data.confirmButtonLabel}}\n        </button>\n    }\n    @if (data.type !== 'info-only') {\n        <button type=\"button\" mat-raised-button class=\"cancel-button\" (click)=\"cancel()\">\n            {{data.cancelButtonLabel}}\n        </button>\n    }\n</mat-dialog-actions>", styles: [".checkbox-wrapper{min-height:50px;display:flex}.checkbox-wrapper>mat-checkbox{align-self:center}\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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { 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: 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: 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", "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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: NgxMatEntityConfirmDialogComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: NGX_COMPLETE_GLOBAL_DEFAULT_VALUES }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.7", type: NgxMatEntityConfirmDialogComponent, isStandalone: true, selector: "ngx-mat-entity-confirm-dialog", ngImport: i0, template: "@if (data.title) {\n    <h2 mat-dialog-title>{{data.title}}</h2>\n}\n\n<mat-dialog-content>\n    @for (paragraph of data.text; track $index) {\n        <p>{{paragraph}}</p>\n    }\n    @if (data.requireConfirmation) {\n        <div class=\"checkbox-wrapper\">\n            <mat-checkbox name=\"confirm\" [(ngModel)]=\"confirm\">\n                {{data.confirmationText}}\n            </mat-checkbox>\n        </div>\n    }\n</mat-dialog-content>\n\n<mat-dialog-actions>\n    @if (data.type === 'delete') {\n        <button type=\"button\" mat-raised-button color=\"warn\" class=\"confirm-button\" [disabled]=\"data.requireConfirmation && !confirm\" (click)=\"confirmAction()\">\n            {{data.confirmButtonLabel}}\n        </button>\n    }\n    @if (data.type !== 'delete') {\n        <button type=\"button\" mat-raised-button class=\"confirm-button\" [disabled]=\"data.requireConfirmation && !confirm\" (click)=\"confirmAction()\">\n            {{data.confirmButtonLabel}}\n        </button>\n    }\n    @if (data.type !== 'info-only') {\n        <button type=\"button\" mat-raised-button class=\"cancel-button\" (click)=\"cancel()\">\n            {{data.cancelButtonLabel}}\n        </button>\n    }\n</mat-dialog-actions>", styles: [".checkbox-wrapper{min-height:50px;display:flex}.checkbox-wrapper>mat-checkbox{align-self:center}\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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { 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: 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: 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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NgxMatEntityConfirmDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: NgxMatEntityConfirmDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-mat-entity-confirm-dialog', standalone: true, imports: [
                         CommonModule,
@@ -2218,44 +2245,53 @@ class ValidationUtilities {
             return undefined;
         }
         switch (type) {
-            case DecoratorTypes.BOOLEAN_DROPDOWN:
+            case DecoratorTypes.BOOLEAN_DROPDOWN: {
                 // Because only valid values can be selected, this is always true when it has a value
                 return undefined;
+            }
             case DecoratorTypes.BOOLEAN_CHECKBOX:
-            case DecoratorTypes.BOOLEAN_TOGGLE:
+            case DecoratorTypes.BOOLEAN_TOGGLE: {
                 const entityBoolean = entity[key];
                 const booleanMetadata = metadata;
                 return this.getBooleanValidationError(entity, entityBoolean, booleanMetadata);
-            case DecoratorTypes.STRING_DROPDOWN:
+            }
+            case DecoratorTypes.STRING_DROPDOWN: {
                 // Because only valid values can be selected, this is always true when it has a value
                 return undefined;
-            case DecoratorTypes.STRING:
+            }
+            case DecoratorTypes.STRING: {
                 const entityString = entity[key];
                 const stringMetadata = metadata;
                 return this.getStringValidationError(entityString, stringMetadata);
-            case DecoratorTypes.STRING_AUTOCOMPLETE:
+            }
+            case DecoratorTypes.STRING_AUTOCOMPLETE: {
                 const entityAutocompleteString = entity[key];
                 // eslint-disable-next-line stylistic/max-len
                 const stringAutocompleteMetadata = metadata;
                 return this.getAutocompleteStringValidationError(entity, entityAutocompleteString, stringAutocompleteMetadata);
-            case DecoratorTypes.STRING_TEXTBOX:
+            }
+            case DecoratorTypes.STRING_TEXTBOX: {
                 const entityTextbox = entity[key];
                 const textboxMetadata = metadata;
                 return this.getTextboxValidationError(entityTextbox, textboxMetadata);
-            case DecoratorTypes.STRING_PASSWORD:
+            }
+            case DecoratorTypes.STRING_PASSWORD: {
                 const entityPassword = entity[key];
                 const passwordMetadata = metadata;
                 const confirmPassword = ReflectUtilities.getMetadata(EntityUtilities.CONFIRM_PASSWORD_KEY, entity, key);
                 return this.getPasswordValidationError(entityPassword, passwordMetadata, confirmPassword);
-            case DecoratorTypes.NUMBER_DROPDOWN:
+            }
+            case DecoratorTypes.NUMBER_DROPDOWN: {
                 // Because only valid values can be selected, this is always true when it has a value
                 return undefined;
+            }
             case DecoratorTypes.NUMBER:
-            case DecoratorTypes.NUMBER_SLIDER:
+            case DecoratorTypes.NUMBER_SLIDER: {
                 const entityNumber = entity[key];
                 const numberMetadata = metadata;
                 return this.getNumberValidationError(entityNumber, numberMetadata);
-            case DecoratorTypes.OBJECT:
+            }
+            case DecoratorTypes.OBJECT: {
                 const entityObject = entity[key];
                 for (const parameterKey in entityObject) {
                     const value = entityObject[parameterKey];
@@ -2271,21 +2307,24 @@ class ValidationUtilities {
                     }
                 }
                 break;
-            case DecoratorTypes.OBJECT_DROPDOWN:
+            }
+            case DecoratorTypes.OBJECT_DROPDOWN: {
                 // Because only valid values can be selected, this is always true when it has a value
                 return undefined;
-            case DecoratorTypes.ARRAY_STRING_AUTOCOMPLETE_CHIPS:
+            }
+            case DecoratorTypes.ARRAY_STRING_AUTOCOMPLETE_CHIPS: {
                 const stringAutocompleteArray = entity[key];
                 // eslint-disable-next-line stylistic/max-len
                 const stringAutocompleteArrayMetadata = metadata;
                 // eslint-disable-next-line stylistic/max-len
                 return await this.getArrayStringAutocompleteChipsValidationError(entity, stringAutocompleteArrayMetadata, stringAutocompleteArray);
+            }
             case DecoratorTypes.ARRAY_STRING_CHIPS:
             case DecoratorTypes.ARRAY_DATE:
             case DecoratorTypes.ARRAY_DATE_TIME:
             case DecoratorTypes.ARRAY_DATE_RANGE:
             case DecoratorTypes.ARRAY:
-            case DecoratorTypes.REFERENCES_MANY:
+            case DecoratorTypes.REFERENCES_MANY: {
                 const entityArray = entity[key];
                 // eslint-disable-next-line stylistic/max-len
                 const arrayMetadata = metadata;
@@ -2296,28 +2335,34 @@ class ValidationUtilities {
                     };
                 }
                 break;
-            case DecoratorTypes.DATE:
+            }
+            case DecoratorTypes.DATE: {
                 const entityDate = new Date(entity[key]);
                 const dateMetadata = metadata;
                 return this.getDateValidationError(entityDate, dateMetadata);
-            case DecoratorTypes.DATE_RANGE:
+            }
+            case DecoratorTypes.DATE_RANGE: {
                 const entityDateRange = LodashUtilities.cloneDeep(entity[key]);
                 const dateRangeMetadata = metadata;
                 return this.getDateRangeValidationError(entity, entityDateRange, dateRangeMetadata);
-            case DecoratorTypes.DATE_TIME:
+            }
+            case DecoratorTypes.DATE_TIME: {
                 const entityDateTime = new Date(entity[key]);
                 const dateTimeMetadata = metadata;
                 const hasTime = ReflectUtilities.hasMetadata(EntityUtilities.TIME_KEY, entity, key);
                 return this.getDateTimeValidationError(entityDateTime, dateTimeMetadata, hasTime);
+            }
             case DecoratorTypes.FILE_DEFAULT:
-            case DecoratorTypes.FILE_IMAGE:
+            case DecoratorTypes.FILE_IMAGE: {
                 const entityFile = entity[key];
                 const entityFileMetadata = metadata;
                 return this.getFileDataValidationError(entityFile, entityFileMetadata);
+            }
             case DecoratorTypes.REFERENCES_ONE:
-            case DecoratorTypes.HAS_MANY:
+            case DecoratorTypes.HAS_MANY: {
                 break;
-            case DecoratorTypes.CUSTOM:
+            }
+            case DecoratorTypes.CUSTOM: {
                 // eslint-disable-next-line typescript/no-explicit-any, stylistic/max-len
                 const customMetadata = metadata;
                 if (!customMetadata.isValid(entity[key], omit)) {
@@ -2327,8 +2372,10 @@ class ValidationUtilities {
                     };
                 }
                 break;
-            default:
+            }
+            default: {
                 throw new Error(`Could not validate the input because the DecoratorType ${type} is not known`);
+            }
         }
         return undefined;
     }
@@ -2894,7 +2941,7 @@ class StringChipsArrayDecoratorConfigInternal extends PropertyDecoratorConfigInt
     regex;
     constructor(data, globalConfig) {
         super(data);
-        this.deleteIcon = data.deleteIcon ?? 'fas fa-circle-minus';
+        this.deleteIcon = data.deleteIcon ?? faCircleMinus;
         this.itemType = data.itemType;
         this.allowDuplicates = data.allowDuplicates ?? false;
         this.duplicatesErrorDialog = getDefaultDuplicateErrorDialogData(data, globalConfig);
@@ -2929,7 +2976,7 @@ class AutocompleteStringChipsArrayDecoratorConfigInternal extends PropertyDecora
     constructor(data, globalConfig) {
         super(data);
         this.autocompleteValues = this.autocompleteValuesToFunction(data.autocompleteValues);
-        this.deleteIcon = data.deleteIcon ?? 'fas fa-circle-minus';
+        this.deleteIcon = data.deleteIcon ?? faCircleMinus;
         this.itemType = data.itemType;
         this.allowDuplicates = data.allowDuplicates ?? false;
         this.duplicatesErrorDialog = getDefaultDuplicateErrorDialogData(data, globalConfig);
@@ -2942,6 +2989,7 @@ class AutocompleteStringChipsArrayDecoratorConfigInternal extends PropertyDecora
     // eslint-disable-next-line typescript/no-explicit-any
     autocompleteValuesToFunction(autocompleteValues) {
         if (Array.isArray(autocompleteValues)) {
+            // eslint-disable-next-line typescript/require-await
             return async () => autocompleteValues;
         }
         // eslint-disable-next-line typescript/no-explicit-any
@@ -3125,6 +3173,7 @@ let BaseTableActionInternal = class BaseTableActionInternal {
     }
     functionToAsync(originalFunction) {
         if (isAsyncFunction(originalFunction)) {
+            /* istanbul ignore next */
             return originalFunction;
         }
         /* istanbul ignore next */
@@ -3172,6 +3221,7 @@ let MultiSelectActionInternal = class MultiSelectActionInternal {
     }
     functionToAsync(originalFunction) {
         if (isAsyncFunction(originalFunction)) {
+            /* istanbul ignore next */
             return originalFunction;
         }
         /* istanbul ignore next */
@@ -3451,10 +3501,10 @@ class DynamicStyleClassDirective {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: DynamicStyleClassDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0", type: DynamicStyleClassDirective, isStandalone: true, selector: "[dynamicStyleClasses]", inputs: { dynamicStyleClasses: "dynamicStyleClasses", value: "value" }, usesOnChanges: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: DynamicStyleClassDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.7", type: DynamicStyleClassDirective, isStandalone: true, selector: "[dynamicStyleClasses]", inputs: { dynamicStyleClasses: "dynamicStyleClasses", value: "value" }, usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: DynamicStyleClassDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: DynamicStyleClassDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[dynamicStyleClasses]', standalone: true }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { dynamicStyleClasses: [{
@@ -3474,7 +3524,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImpor
  */
 function tableColumnValueToSortValue(value) {
     switch (typeof value) {
-        case 'string':
+        case 'string': {
             const stringDate = new Date(value);
             if (!Number.isNaN(stringDate.getTime())) {
                 return stringDate.getTime();
@@ -3484,13 +3534,17 @@ function tableColumnValueToSortValue(value) {
                 return number;
             }
             return value;
-        case 'number':
+        }
+        case 'number': {
             return value;
-        case 'object':
+        }
+        case 'object': {
             const date = new Date(value);
             return date.getTime();
-        default:
+        }
+        default: {
             throw new Error(`Unsupported type for table value: ${typeof value}`);
+        }
     }
 }
 
@@ -3568,10 +3622,10 @@ class DisplayColumnValueComponent {
         this.component.instance.entity = this.entity;
         this.component.location.nativeElement.setAttribute('style', 'width: 100%');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: DisplayColumnValueComponent, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0", type: DisplayColumnValueComponent, isStandalone: true, selector: "display-column-value", inputs: { entity: "entity", ComponentClass: "ComponentClass" }, ngImport: i0, template: "", styles: [""] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: DisplayColumnValueComponent, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: DisplayColumnValueComponent, isStandalone: true, selector: "display-column-value", inputs: { entity: "entity", ComponentClass: "ComponentClass" }, ngImport: i0, template: "", styles: [""] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: DisplayColumnValueComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: DisplayColumnValueComponent, decorators: [{
             type: Component,
             args: [{ selector: 'display-column-value', standalone: true, imports: [], template: "" }]
         }], ctorParameters: () => [{ type: i0.ViewContainerRef }], propDecorators: { entity: [{
@@ -3733,10 +3787,10 @@ class CustomTableComponent {
             return displayColumn.value(value);
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: CustomTableComponent, 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.0", type: CustomTableComponent, isStandalone: true, selector: "custom-table", inputs: { data: "data", searchString: "searchString", required: "required", isLoading: "isLoading", configuration: "configuration" }, outputs: { cellClicked: "cellClicked", selectionChanged: "selectionChanged" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }], ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<mat-table matSort [dataSource]=\"dataSource\" [class.table-with-error-slot]=\"shouldShowMissingError\">\n    <!-- select Column -->\n    <ng-container matColumnDef=\"select\">\n        <mat-header-cell *matHeaderCellDef>\n            <mat-checkbox [checked]=\"selection.hasValue() && SelectionUtilities.isAllSelected(selection, dataSource)\"\n                [indeterminate]=\"selection.hasValue() && !SelectionUtilities.isAllSelected(selection, dataSource)\"\n                (change)=\"masterToggle($event)\">\n            </mat-checkbox>\n        </mat-header-cell>\n        <mat-cell *matCellDef=\"let value\" [dynamicStyleClasses]=\"internalConfiguration.dynamicRowStyleClasses\" [value]=\"value\">\n            <mat-checkbox [checked]=\"selection.isSelected(value)\"\n                (click)=\"$event.stopPropagation()\"\n                (change)=\"toggle(value, $event)\">\n            </mat-checkbox>\n        </mat-cell>\n    </ng-container>\n\n    @for (dCol of internalConfiguration.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 && internalConfiguration.allowClick(value)\"\n                [dynamicStyleClasses]=\"internalConfiguration.dynamicRowStyleClasses\" [value]=\"value\"\n                (click)=\"clickCell(value, dCol)\"\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=\"displayedColumns\"></mat-header-row>\n    <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n</mat-table>\n\n@if (internalConfiguration.displayLoadingSpinner && isLoading) {\n    <mat-spinner>\n    </mat-spinner>\n}\n@else if (shouldShowMissingError && !dataSource.data.length) {\n    <div class=\"table-error\">{{internalConfiguration.emptyErrorMessage}}</div>\n}\n\n<mat-paginator [length]=\"dataSource.filteredData.length\" [pageIndex]=\"0\" [pageSize]=\"10\" [pageSizeOptions]=\"[5, 10, 25, 50]\"></mat-paginator>", styles: [".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}mat-spinner{margin:10px auto}.mat-column-select{flex:0 0 48px;padding-left:0;padding-right:0;justify-content:center}.enabled:hover{cursor:pointer}.table-with-error-slot{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:5px}.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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { 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: 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: 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: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: DisplayColumnValueComponent, selector: "display-column-value", inputs: ["entity", "ComponentClass"] }, { kind: "directive", type: DynamicStyleClassDirective, selector: "[dynamicStyleClasses]", inputs: ["dynamicStyleClasses", "value"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: CustomTableComponent, 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: CustomTableComponent, isStandalone: true, selector: "custom-table", inputs: { data: "data", searchString: "searchString", required: "required", isLoading: "isLoading", configuration: "configuration" }, outputs: { cellClicked: "cellClicked", selectionChanged: "selectionChanged" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }], ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<mat-table matSort [dataSource]=\"dataSource\" [class.table-with-error-slot]=\"shouldShowMissingError\">\n    <!-- select Column -->\n    <ng-container matColumnDef=\"select\">\n        <mat-header-cell *matHeaderCellDef>\n            <mat-checkbox [checked]=\"selection.hasValue() && SelectionUtilities.isAllSelected(selection, dataSource)\"\n                [indeterminate]=\"selection.hasValue() && !SelectionUtilities.isAllSelected(selection, dataSource)\"\n                (change)=\"masterToggle($event)\">\n            </mat-checkbox>\n        </mat-header-cell>\n        <mat-cell *matCellDef=\"let value\" [dynamicStyleClasses]=\"internalConfiguration.dynamicRowStyleClasses\" [value]=\"value\">\n            <mat-checkbox [checked]=\"selection.isSelected(value)\"\n                (click)=\"$event.stopPropagation()\"\n                (change)=\"toggle(value, $event)\">\n            </mat-checkbox>\n        </mat-cell>\n    </ng-container>\n\n    @for (dCol of internalConfiguration.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 && internalConfiguration.allowClick(value)\"\n                [dynamicStyleClasses]=\"internalConfiguration.dynamicRowStyleClasses\" [value]=\"value\"\n                (click)=\"clickCell(value, dCol)\"\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=\"displayedColumns\"></mat-header-row>\n    <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n</mat-table>\n\n@if (internalConfiguration.displayLoadingSpinner && isLoading) {\n    <mat-spinner>\n    </mat-spinner>\n}\n@else if (shouldShowMissingError && !dataSource.data.length) {\n    <div class=\"table-error\">{{internalConfiguration.emptyErrorMessage}}</div>\n}\n\n<mat-paginator [length]=\"dataSource.filteredData.length\" [pageIndex]=\"0\" [pageSize]=\"10\" [pageSizeOptions]=\"[5, 10, 25, 50]\"></mat-paginator>", styles: [".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}mat-spinner{margin:10px auto}.mat-column-select{flex:0 0 48px;padding-left:0;padding-right:0;justify-content:center}.enabled:hover{cursor:pointer}.table-with-error-slot{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:5px}.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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: 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: 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: 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: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: DisplayColumnValueComponent, selector: "display-column-value", inputs: ["entity", "ComponentClass"] }, { kind: "directive", type: DynamicStyleClassDirective, selector: "[dynamicStyleClasses]", inputs: ["dynamicStyleClasses", "value"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: CustomTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: CustomTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'custom-table', standalone: true, imports: [
                         CommonModule,
@@ -3861,10 +3915,10 @@ class NgxMatEntityBaseInputComponent {
     emitChange() {
         this.inputChangeEvent.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NgxMatEntityBaseInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0", type: NgxMatEntityBaseInputComponent, selector: "ngx-mat-entity-base-input", inputs: { entity: "entity", key: "key", getValidationErrorMessage: "getValidationErrorMessage", isReadOnly: "isReadOnly" }, outputs: { inputChangeEvent: "inputChangeEvent" }, ngImport: i0, template: '', isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: NgxMatEntityBaseInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: NgxMatEntityBaseInputComponent, selector: "ngx-mat-entity-base-input", inputs: { entity: "entity", key: "key", getValidationErrorMessage: "getValidationErrorMessage", isReadOnly: "isReadOnly" }, outputs: { inputChangeEvent: "inputChangeEvent" }, ngImport: i0, template: '', isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NgxMatEntityBaseInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: NgxMatEntityBaseInputComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngx-mat-entity-base-input',
@@ -3971,10 +4025,10 @@ class ArrayTableComponent extends NgxMatEntityBaseInputComponent {
         this.propertyValue = this.propertyValue.filter(v => !this.selected.includes(v));
         this.emitChange();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: ArrayTableComponent, deps: [{ token: i1.MatDialog }, { token: i2$1.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0", type: ArrayTableComponent, selector: "ngx-mat-entity-array-table", usesInheritance: true, ngImport: i0, template: '', isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: ArrayTableComponent, deps: [{ token: i1.MatDialog }, { token: i2$1.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: ArrayTableComponent, selector: "ngx-mat-entity-array-table", usesInheritance: true, ngImport: i0, template: '', isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: ArrayTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: ArrayTableComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngx-mat-entity-array-table',
@@ -3996,10 +4050,10 @@ class ArrayDateInputComponent extends ArrayTableComponent {
         ReflectUtilities.defineMetadata('metadata', this.metadata, this.entity, this.key);
         this.setTableConfig();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", 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.0", 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 appearance=\"outline\">\n            <mat-label>{{metadata.displayName}}</mat-label>\n            <input\n                #model=\"ngModel\"\n                matInput\n                [name]=\"name\"\n                [matDatepicker]=\"picker\"\n                [required]=\"metadata.required(entity)\"\n                [min]=\"metadata.min ? metadata.min(input) : undefined\"\n                [max]=\"metadata.max ? metadata.max(input) : undefined\"\n                [matDatepickerFilter]=\"metadata.filter ?? DateUtilities.defaultDateFilter\"\n                [(ngModel)]=\"input\"\n            >\n            <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n            <mat-datepicker #picker></mat-datepicker>\n            <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n        </mat-form-field>\n        \n        <div class=\"buttons\">\n            <button type=\"button\" mat-raised-button\n                [disabled]=\"model.errors\"\n                (click)=\"add()\">\n                {{metadata.addButtonLabel}}\n            </button>\n            <button type=\"button\" mat-raised-button\n                [disabled]=\"!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 ɵ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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: ArrayDateInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: ArrayDateInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'array-date-input', standalone: true, imports: [
                         CommonModule,
@@ -4009,7 +4063,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", 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 appearance=\"outline\">\n            <mat-label>{{metadata.displayName}}</mat-label>\n            <input\n                #model=\"ngModel\"\n                matInput\n                [name]=\"name\"\n                [matDatepicker]=\"picker\"\n                [required]=\"metadata.required(entity)\"\n                [min]=\"metadata.min ? metadata.min(input) : undefined\"\n                [max]=\"metadata.max ? metadata.max(input) : undefined\"\n                [matDatepickerFilter]=\"metadata.filter ?? DateUtilities.defaultDateFilter\"\n                [(ngModel)]=\"input\"\n            >\n            <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n            <mat-datepicker #picker></mat-datepicker>\n            <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n        </mat-form-field>\n        \n        <div class=\"buttons\">\n            <button type=\"button\" mat-raised-button\n                [disabled]=\"model.errors\"\n                (click)=\"add()\">\n                {{metadata.addButtonLabel}}\n            </button>\n            <button type=\"button\" mat-raised-button\n                [disabled]=\"!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}.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]
@@ -4058,10 +4112,10 @@ class ArrayDateRangeInputComponent extends ArrayTableComponent {
         this.dateRangeStart = undefined;
         this.dateRangeEnd = undefined;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", 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.0", 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 ɵ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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: ArrayDateRangeInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: ArrayDateRangeInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'array-date-range-input', standalone: true, imports: [
                         CommonModule,
@@ -4112,10 +4166,10 @@ class ArrayDateTimeInputComponent extends ArrayTableComponent {
             await this.add();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", 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.0", 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 ɵ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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: ArrayDateTimeInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: ArrayDateTimeInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'array-date-time-input', standalone: true, imports: [
                         CommonModule,
@@ -4148,10 +4202,10 @@ class IncludedInValidatorDirective {
         }
         return this.includedIn.includes(control.value) ? null : { includedIn: { value: control.value, validValues: this.includedIn } };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: IncludedInValidatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0", type: IncludedInValidatorDirective, isStandalone: true, selector: "[includedIn]", inputs: { includedIn: "includedIn" }, providers: [{ provide: NG_VALIDATORS, useExisting: IncludedInValidatorDirective, multi: true }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: IncludedInValidatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.7", type: IncludedInValidatorDirective, isStandalone: true, selector: "[includedIn]", inputs: { includedIn: "includedIn" }, providers: [{ provide: NG_VALIDATORS, useExisting: IncludedInValidatorDirective, multi: true }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: IncludedInValidatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: IncludedInValidatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[includedIn]',
@@ -4207,18 +4261,19 @@ class ArrayStringChipsInputComponent extends NgxMatEntityBaseInputComponent {
             model.control.setErrors(chipsModel.errors);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: ArrayStringChipsInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0", type: ArrayStringChipsInputComponent, isStandalone: true, selector: "array-string-chips-input", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-chip-grid #chipGrid\n        #model=\"ngModel\" [name]=\"name\" [required]=\"metadata.required(entity)\"\n        [disabled]=\"isReadOnly\"\n        [(ngModel)]=\"propertyValue\"\n        (ngModelChange)=\"setValidationErrors(model, chipsModel)\"\n    >\n        @for (value of propertyValue; track $index) {\n            <mat-chip-row (removed)=\"removeStringChipArrayValue(value)\">\n                {{value}}\n                <button type=\"button\" matChipRemove>\n                    <i [class]=\"metadata.deleteIcon\"></i>\n                </button>\n            </mat-chip-row>\n        }\n        <input #chipsModel=\"ngModel\"\n            matInput\n            [matChipInputFor]=\"chipGrid\"\n            [matChipInputAddOnBlur]=\"true\"\n            [name]=\"uuid2\"\n            [minlength]=\"metadata.minLength ?? null\"\n            [maxlength]=\"metadata.maxLength ?? null\"\n            [pattern]=\"metadata.regex ?? '[\\\\s\\\\S]*'\"\n            [(ngModel)]=\"chipsInput\"\n            (matChipInputTokenEnd)=\"addStringChipArrayValue($event, !!chipsModel.errors)\"\n        />\n    </mat-chip-grid>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ 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: "ngmodule", type: MatChipsModule }, { kind: "component", type: i2$4.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i2$4.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i2$4.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i2$4.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { 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.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: CommonModule }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: ArrayStringChipsInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.7", type: ArrayStringChipsInputComponent, isStandalone: true, selector: "array-string-chips-input", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-chip-grid #chipGrid\n        #model=\"ngModel\" [name]=\"name\" [required]=\"metadata.required(entity)\"\n        [disabled]=\"isReadOnly\"\n        [(ngModel)]=\"propertyValue\"\n        (ngModelChange)=\"setValidationErrors(model, chipsModel)\"\n    >\n        @for (value of propertyValue; track $index) {\n            <mat-chip-row (removed)=\"removeStringChipArrayValue(value)\">\n                {{value}}\n                <button type=\"button\" matChipRemove>\n                    <fa-icon [icon]=\"metadata.deleteIcon\"></fa-icon>\n                </button>\n            </mat-chip-row>\n        }\n        <input #chipsModel=\"ngModel\"\n            matInput\n            [matChipInputFor]=\"chipGrid\"\n            [matChipInputAddOnBlur]=\"true\"\n            [name]=\"uuid2\"\n            [minlength]=\"metadata.minLength ?? null\"\n            [maxlength]=\"metadata.maxLength ?? null\"\n            [pattern]=\"metadata.regex ?? '[\\\\s\\\\S]*'\"\n            [(ngModel)]=\"chipsInput\"\n            (matChipInputTokenEnd)=\"addStringChipArrayValue($event, !!chipsModel.errors)\"\n        />\n    </mat-chip-grid>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ 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: "ngmodule", type: MatChipsModule }, { kind: "component", type: i2$4.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i2$4.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i2$4.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i2$4.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { 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.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: CommonModule }, { 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.0", ngImport: i0, type: ArrayStringChipsInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: ArrayStringChipsInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'array-string-chips-input', standalone: true, imports: [
                         MatFormFieldModule,
                         MatChipsModule,
                         FormsModule,
                         MatInputModule,
-                        CommonModule
-                    ], template: "<!-- eslint-disable angular/no-call-expression -->\n<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-chip-grid #chipGrid\n        #model=\"ngModel\" [name]=\"name\" [required]=\"metadata.required(entity)\"\n        [disabled]=\"isReadOnly\"\n        [(ngModel)]=\"propertyValue\"\n        (ngModelChange)=\"setValidationErrors(model, chipsModel)\"\n    >\n        @for (value of propertyValue; track $index) {\n            <mat-chip-row (removed)=\"removeStringChipArrayValue(value)\">\n                {{value}}\n                <button type=\"button\" matChipRemove>\n                    <i [class]=\"metadata.deleteIcon\"></i>\n                </button>\n            </mat-chip-row>\n        }\n        <input #chipsModel=\"ngModel\"\n            matInput\n            [matChipInputFor]=\"chipGrid\"\n            [matChipInputAddOnBlur]=\"true\"\n            [name]=\"uuid2\"\n            [minlength]=\"metadata.minLength ?? null\"\n            [maxlength]=\"metadata.maxLength ?? null\"\n            [pattern]=\"metadata.regex ?? '[\\\\s\\\\S]*'\"\n            [(ngModel)]=\"chipsInput\"\n            (matChipInputTokenEnd)=\"addStringChipArrayValue($event, !!chipsModel.errors)\"\n        />\n    </mat-chip-grid>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"] }]
+                        CommonModule,
+                        FaIconComponent
+                    ], template: "<!-- eslint-disable angular/no-call-expression -->\n<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-chip-grid #chipGrid\n        #model=\"ngModel\" [name]=\"name\" [required]=\"metadata.required(entity)\"\n        [disabled]=\"isReadOnly\"\n        [(ngModel)]=\"propertyValue\"\n        (ngModelChange)=\"setValidationErrors(model, chipsModel)\"\n    >\n        @for (value of propertyValue; track $index) {\n            <mat-chip-row (removed)=\"removeStringChipArrayValue(value)\">\n                {{value}}\n                <button type=\"button\" matChipRemove>\n                    <fa-icon [icon]=\"metadata.deleteIcon\"></fa-icon>\n                </button>\n            </mat-chip-row>\n        }\n        <input #chipsModel=\"ngModel\"\n            matInput\n            [matChipInputFor]=\"chipGrid\"\n            [matChipInputAddOnBlur]=\"true\"\n            [name]=\"uuid2\"\n            [minlength]=\"metadata.minLength ?? null\"\n            [maxlength]=\"metadata.maxLength ?? null\"\n            [pattern]=\"metadata.regex ?? '[\\\\s\\\\S]*'\"\n            [(ngModel)]=\"chipsInput\"\n            (matChipInputTokenEnd)=\"addStringChipArrayValue($event, !!chipsModel.errors)\"\n        />\n    </mat-chip-grid>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"] }]
         }] });
 
 /* eslint-disable jsdoc/require-jsdoc */
@@ -4267,10 +4322,10 @@ class ArrayStringAutocompleteChipsComponent extends ArrayStringChipsInputCompone
         const filterValue = input.toLowerCase();
         this.filteredAutocompleteStrings = this.autocompleteStrings.filter(s => s.toLowerCase().includes(filterValue));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: ArrayStringAutocompleteChipsComponent, deps: [{ token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0", type: ArrayStringAutocompleteChipsComponent, isStandalone: true, selector: "array-string-autocomplete-chips", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n\n<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-chip-grid #chipGrid\n        #model=\"ngModel\" [name]=\"name\"\n        [required]=\"metadata.required(entity)\"\n        [disabled]=\"isReadOnly\"\n        [(ngModel)]=\"propertyValue\"\n        (ngModelChange)=\"setValidationErrors(model, chipsModel)\"\n    >\n        @for (value of propertyValue; track $index) {\n            <mat-chip-row (removed)=\"removeStringChipArrayValue(value)\">\n                {{value}}\n                <button type=\"button\" matChipRemove>\n                    <i [class]=\"metadata.deleteIcon\"></i>\n                </button>\n            </mat-chip-row>\n        }\n        <input #chipsModel=\"ngModel\"\n            #chipsElement\n            matInput\n            [matChipInputFor]=\"chipGrid\"\n            [matAutocomplete]=\"auto\"\n            [matChipInputAddOnBlur]=\"true\"\n            [name]=\"uuid2\"\n            [minlength]=\"metadata.minLength ?? null\"\n            [maxlength]=\"metadata.maxLength ?? null\"\n            [pattern]=\"metadata.regex ?? '[\\\\s\\\\S]*'\"\n            [includedIn]=\"autocompleteMetadata.restrictToOptions ? autocompleteStrings : undefined\"\n            [(ngModel)]=\"chipsInput\"\n            (keyup)=\"filterAutocompleteStrings(chipsInput)\"\n            (matChipInputTokenEnd)=\"addStringChipArrayValue($event, !!chipsModel.errors)\"\n        />\n    </mat-chip-grid>\n    <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event, chipsElement, model, chipsModel)\">\n        @for (value of filteredAutocompleteStrings; track $index) {\n            <mat-option [value]=\"value\">{{value}}</mat-option>\n        }\n    </mat-autocomplete>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ 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: "ngmodule", type: MatChipsModule }, { kind: "component", type: i2$4.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i2$4.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i2$4.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i2$4.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { 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.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i4$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: IncludedInValidatorDirective, selector: "[includedIn]", inputs: ["includedIn"] }, { 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: CommonModule }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: ArrayStringAutocompleteChipsComponent, deps: [{ token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.7", type: ArrayStringAutocompleteChipsComponent, isStandalone: true, selector: "array-string-autocomplete-chips", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n\n<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-chip-grid #chipGrid\n        #model=\"ngModel\" [name]=\"name\"\n        [required]=\"metadata.required(entity)\"\n        [disabled]=\"isReadOnly\"\n        [(ngModel)]=\"propertyValue\"\n        (ngModelChange)=\"setValidationErrors(model, chipsModel)\"\n    >\n        @for (value of propertyValue; track $index) {\n            <mat-chip-row (removed)=\"removeStringChipArrayValue(value)\">\n                {{value}}\n                <button type=\"button\" matChipRemove>\n                    <fa-icon [icon]=\"metadata.deleteIcon\"></fa-icon>\n                </button>\n            </mat-chip-row>\n        }\n        <input #chipsModel=\"ngModel\"\n            #chipsElement\n            matInput\n            [matChipInputFor]=\"chipGrid\"\n            [matAutocomplete]=\"auto\"\n            [matChipInputAddOnBlur]=\"true\"\n            [name]=\"uuid2\"\n            [minlength]=\"metadata.minLength ?? null\"\n            [maxlength]=\"metadata.maxLength ?? null\"\n            [pattern]=\"metadata.regex ?? '[\\\\s\\\\S]*'\"\n            [includedIn]=\"autocompleteMetadata.restrictToOptions ? autocompleteStrings : undefined\"\n            [(ngModel)]=\"chipsInput\"\n            (keyup)=\"filterAutocompleteStrings(chipsInput)\"\n            (matChipInputTokenEnd)=\"addStringChipArrayValue($event, !!chipsModel.errors)\"\n        />\n    </mat-chip-grid>\n    <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event, chipsElement, model, chipsModel)\">\n        @for (value of filteredAutocompleteStrings; track $index) {\n            <mat-option [value]=\"value\">{{value}}</mat-option>\n        }\n    </mat-autocomplete>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ 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: "ngmodule", type: MatChipsModule }, { kind: "component", type: i2$4.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i2$4.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i2$4.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i2$4.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { 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.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i4$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: IncludedInValidatorDirective, selector: "[includedIn]", inputs: ["includedIn"] }, { 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: CommonModule }, { 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.0", ngImport: i0, type: ArrayStringAutocompleteChipsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: ArrayStringAutocompleteChipsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'array-string-autocomplete-chips', standalone: true, imports: [
                         MatFormFieldModule,
@@ -4279,8 +4334,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImpor
                         MatAutocompleteModule,
                         IncludedInValidatorDirective,
                         MatInputModule,
-                        CommonModule
-                    ], template: "<!-- eslint-disable angular/no-call-expression -->\n\n<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-chip-grid #chipGrid\n        #model=\"ngModel\" [name]=\"name\"\n        [required]=\"metadata.required(entity)\"\n        [disabled]=\"isReadOnly\"\n        [(ngModel)]=\"propertyValue\"\n        (ngModelChange)=\"setValidationErrors(model, chipsModel)\"\n    >\n        @for (value of propertyValue; track $index) {\n            <mat-chip-row (removed)=\"removeStringChipArrayValue(value)\">\n                {{value}}\n                <button type=\"button\" matChipRemove>\n                    <i [class]=\"metadata.deleteIcon\"></i>\n                </button>\n            </mat-chip-row>\n        }\n        <input #chipsModel=\"ngModel\"\n            #chipsElement\n            matInput\n            [matChipInputFor]=\"chipGrid\"\n            [matAutocomplete]=\"auto\"\n            [matChipInputAddOnBlur]=\"true\"\n            [name]=\"uuid2\"\n            [minlength]=\"metadata.minLength ?? null\"\n            [maxlength]=\"metadata.maxLength ?? null\"\n            [pattern]=\"metadata.regex ?? '[\\\\s\\\\S]*'\"\n            [includedIn]=\"autocompleteMetadata.restrictToOptions ? autocompleteStrings : undefined\"\n            [(ngModel)]=\"chipsInput\"\n            (keyup)=\"filterAutocompleteStrings(chipsInput)\"\n            (matChipInputTokenEnd)=\"addStringChipArrayValue($event, !!chipsModel.errors)\"\n        />\n    </mat-chip-grid>\n    <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event, chipsElement, model, chipsModel)\">\n        @for (value of filteredAutocompleteStrings; track $index) {\n            <mat-option [value]=\"value\">{{value}}</mat-option>\n        }\n    </mat-autocomplete>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"] }]
+                        CommonModule,
+                        FaIconComponent
+                    ], template: "<!-- eslint-disable angular/no-call-expression -->\n\n<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-chip-grid #chipGrid\n        #model=\"ngModel\" [name]=\"name\"\n        [required]=\"metadata.required(entity)\"\n        [disabled]=\"isReadOnly\"\n        [(ngModel)]=\"propertyValue\"\n        (ngModelChange)=\"setValidationErrors(model, chipsModel)\"\n    >\n        @for (value of propertyValue; track $index) {\n            <mat-chip-row (removed)=\"removeStringChipArrayValue(value)\">\n                {{value}}\n                <button type=\"button\" matChipRemove>\n                    <fa-icon [icon]=\"metadata.deleteIcon\"></fa-icon>\n                </button>\n            </mat-chip-row>\n        }\n        <input #chipsModel=\"ngModel\"\n            #chipsElement\n            matInput\n            [matChipInputFor]=\"chipGrid\"\n            [matAutocomplete]=\"auto\"\n            [matChipInputAddOnBlur]=\"true\"\n            [name]=\"uuid2\"\n            [minlength]=\"metadata.minLength ?? null\"\n            [maxlength]=\"metadata.maxLength ?? null\"\n            [pattern]=\"metadata.regex ?? '[\\\\s\\\\S]*'\"\n            [includedIn]=\"autocompleteMetadata.restrictToOptions ? autocompleteStrings : undefined\"\n            [(ngModel)]=\"chipsInput\"\n            (keyup)=\"filterAutocompleteStrings(chipsInput)\"\n            (matChipInputTokenEnd)=\"addStringChipArrayValue($event, !!chipsModel.errors)\"\n        />\n    </mat-chip-grid>\n    <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event, chipsElement, model, chipsModel)\">\n        @for (value of filteredAutocompleteStrings; track $index) {\n            <mat-option [value]=\"value\">{{value}}</mat-option>\n        }\n    </mat-autocomplete>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"] }]
         }], ctorParameters: () => [{ type: i0.EnvironmentInjector }] });
 
 /* eslint-disable jsdoc/require-jsdoc */
@@ -4288,10 +4344,10 @@ class BooleanCheckboxInputComponent extends NgxMatEntityBaseInputComponent {
     updatePropertyValue() {
         this.propertyValue = this.propertyValue != undefined ? !this.propertyValue : true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: BooleanCheckboxInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0", type: BooleanCheckboxInputComponent, isStandalone: true, selector: "boolean-checkbox-input", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<mat-form-field floatLabel=\"always\">\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-checkbox\n        color=\"primary\"\n        [disabled]=\"isReadOnly\"\n        [class.disabled]=\"isReadOnly\"\n        [class.mat-checkbox-disabled]=\"false\"\n        [checked]=\"propertyValue\"\n        (click)=\"model.control.markAsTouched(); updatePropertyValue(); emitChange();\"\n    >\n    </mat-checkbox>\n    <!-- hidden input is needed so that the checkbox can be used inside a mat-form-field -->\n    <input #model=\"ngModel\" matInput\n        hidden\n        [name]=\"name\"\n        [pattern]=\"metadata.required(entity) ? 'true' : '[\\\\s\\\\S]*'\"\n        [required]=\"metadata.required(entity)\"\n        [disabled]=\"isReadOnly\"\n        [(ngModel)]=\"propertyValue\"\n    >\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-checkbox{margin-top:-10px;margin-bottom:-10px}mat-form-field{width:100%}\n"], dependencies: [{ 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: "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", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { 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.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: BooleanCheckboxInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: BooleanCheckboxInputComponent, isStandalone: true, selector: "boolean-checkbox-input", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<mat-form-field floatLabel=\"always\">\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-checkbox\n        color=\"primary\"\n        [disabled]=\"isReadOnly\"\n        [class.disabled]=\"isReadOnly\"\n        [class.mat-checkbox-disabled]=\"false\"\n        [checked]=\"propertyValue\"\n        (click)=\"model.control.markAsTouched(); updatePropertyValue(); emitChange();\"\n    >\n    </mat-checkbox>\n    <!-- hidden input is needed so that the checkbox can be used inside a mat-form-field -->\n    <input #model=\"ngModel\" matInput\n        hidden\n        [name]=\"name\"\n        [pattern]=\"metadata.required(entity) ? 'true' : '[\\\\s\\\\S]*'\"\n        [required]=\"metadata.required(entity)\"\n        [disabled]=\"isReadOnly\"\n        [(ngModel)]=\"propertyValue\"\n    >\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-checkbox{margin-top:-10px;margin-bottom:-10px}mat-form-field{width:100%}\n"], dependencies: [{ 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: "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: 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.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: BooleanCheckboxInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: BooleanCheckboxInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'boolean-checkbox-input', standalone: true, imports: [
                         MatFormFieldModule,
@@ -4355,10 +4411,10 @@ class BooleanDropdownInputComponent extends NgxMatEntityBaseInputComponent {
         super.ngOnInit();
         this.metadata = new DropdownBooleanDecoratorConfigInternal(this.metadata, this.globalConfig);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: BooleanDropdownInputComponent, deps: [{ token: NGX_COMPLETE_GLOBAL_DEFAULT_VALUES }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0", type: BooleanDropdownInputComponent, isStandalone: true, selector: "boolean-dropdown-input", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-select\n        #model=\"ngModel\"\n        [name]=\"name\"\n        [required]=\"metadata.required(entity)\"\n        [disabled]=\"isReadOnly\"\n        [(ngModel)]=\"propertyValue\"\n        (selectionChange)=\"emitChange()\"\n    >\n        <mat-option [value]=\"undefined\">-</mat-option>\n        <mat-option [value]=\"true\">{{metadata.dropdownTrue}}</mat-option>\n        <mat-option [value]=\"false\">{{metadata.dropdownFalse}}</mat-option>\n    </mat-select>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ 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: "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.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: MatInputModule }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: BooleanDropdownInputComponent, deps: [{ token: NGX_COMPLETE_GLOBAL_DEFAULT_VALUES }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: BooleanDropdownInputComponent, isStandalone: true, selector: "boolean-dropdown-input", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-select\n        #model=\"ngModel\"\n        [name]=\"name\"\n        [required]=\"metadata.required(entity)\"\n        [disabled]=\"isReadOnly\"\n        [(ngModel)]=\"propertyValue\"\n        (selectionChange)=\"emitChange()\"\n    >\n        <mat-option [value]=\"undefined\">-</mat-option>\n        <mat-option [value]=\"true\">{{metadata.dropdownTrue}}</mat-option>\n        <mat-option [value]=\"false\">{{metadata.dropdownFalse}}</mat-option>\n    </mat-select>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ 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: "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.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: MatInputModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: BooleanDropdownInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: BooleanDropdownInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'boolean-dropdown-input', standalone: true, imports: [
                         MatFormFieldModule,
@@ -4376,10 +4432,10 @@ class BooleanToggleInputComponent extends NgxMatEntityBaseInputComponent {
     updatePropertyValue() {
         this.propertyValue = this.propertyValue != undefined ? !this.propertyValue : true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: BooleanToggleInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0", type: BooleanToggleInputComponent, isStandalone: true, selector: "boolean-toggle-input", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<mat-form-field floatLabel=\"always\">\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-slide-toggle\n        color=\"primary\"\n        [disabled]=\"isReadOnly\"\n        [checked]=\"propertyValue\"\n        (click)=\"model.control.markAsTouched(); updatePropertyValue(); emitChange();\"\n    >\n    </mat-slide-toggle>\n    <!-- hidden input is needed so that the toggle can be used inside a mat-form-field -->\n    <input #model=\"ngModel\" matInput\n        hidden\n        [name]=\"name\"\n        [pattern]=\"metadata.required(entity) ? 'true' : '[\\\\s\\\\S]*'\"\n        [required]=\"metadata.required(entity)\"\n        [disabled]=\"isReadOnly\"\n        [(ngModel)]=\"propertyValue\"\n        (ngModelChange)=\"emitChange()\"\n    >\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ 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: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i2$5.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { 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.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: BooleanToggleInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: BooleanToggleInputComponent, isStandalone: true, selector: "boolean-toggle-input", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<mat-form-field floatLabel=\"always\">\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-slide-toggle\n        color=\"primary\"\n        [disabled]=\"isReadOnly\"\n        [checked]=\"propertyValue\"\n        (click)=\"model.control.markAsTouched(); updatePropertyValue(); emitChange();\"\n    >\n    </mat-slide-toggle>\n    <!-- hidden input is needed so that the toggle can be used inside a mat-form-field -->\n    <input #model=\"ngModel\" matInput\n        hidden\n        [name]=\"name\"\n        [pattern]=\"metadata.required(entity) ? 'true' : '[\\\\s\\\\S]*'\"\n        [required]=\"metadata.required(entity)\"\n        [disabled]=\"isReadOnly\"\n        [(ngModel)]=\"propertyValue\"\n        (ngModelChange)=\"emitChange()\"\n    >\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ 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: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i2$5.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { 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.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: BooleanToggleInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: BooleanToggleInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'boolean-toggle-input', standalone: true, imports: [
                         MatFormFieldModule,
@@ -4406,10 +4462,10 @@ class CustomInputComponent extends NgxMatEntityBaseInputComponent {
         this.component.instance.inputChangeEvent.subscribe(this.inputChangeEvent);
         this.component.instance.isReadOnly = this.isReadOnly;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: CustomInputComponent, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0", type: CustomInputComponent, isStandalone: true, selector: "custom-input", usesInheritance: true, ngImport: i0, template: "", styles: [""] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: CustomInputComponent, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: CustomInputComponent, isStandalone: true, selector: "custom-input", usesInheritance: true, ngImport: i0, template: "", styles: [""] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: CustomInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: CustomInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'custom-input', standalone: true, template: "" }]
         }], ctorParameters: () => [{ type: i0.ViewContainerRef }] });
@@ -4417,10 +4473,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImpor
 /* eslint-disable jsdoc/require-jsdoc */
 class DateInputComponent extends NgxMatEntityBaseInputComponent {
     DateUtilities = DateUtilities;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: DateInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0", type: DateInputComponent, isStandalone: true, selector: "date-input", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\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(propertyValue) : undefined\"\n        [max]=\"metadata.max ? metadata.max(propertyValue) : undefined\"\n        [matDatepickerFilter]=\"metadata.filter ?? DateUtilities.defaultDateFilter\"\n        [disabled]=\"isReadOnly\"\n        [(ngModel)]=\"propertyValue\"\n        (ngModelChange)=\"emitChange()\"\n    >\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n    <mat-datepicker #picker></mat-datepicker>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ 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.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: 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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: DateInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: DateInputComponent, isStandalone: true, selector: "date-input", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\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(propertyValue) : undefined\"\n        [max]=\"metadata.max ? metadata.max(propertyValue) : undefined\"\n        [matDatepickerFilter]=\"metadata.filter ?? DateUtilities.defaultDateFilter\"\n        [disabled]=\"isReadOnly\"\n        [(ngModel)]=\"propertyValue\"\n        (ngModelChange)=\"emitChange()\"\n    >\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n    <mat-datepicker #picker></mat-datepicker>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ 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.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: 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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: DateInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: DateInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'date-input', standalone: true, imports: [
                         MatFormFieldModule,
@@ -4573,10 +4629,10 @@ class DateRangeInputComponent extends NgxMatEntityBaseInputComponent {
         }
         this.emitChange();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: DateRangeInputComponent, deps: [{ token: NGX_COMPLETE_GLOBAL_DEFAULT_VALUES }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0", type: DateRangeInputComponent, isStandalone: true, selector: "date-range-input", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\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 ?? defaultDateFilter\" [disabled]=\"isReadOnly\">\n        <input #startModel=\"ngModel\"\n            matStartDate\n            [name]=\"name + 'start'\"\n            [required]=\"metadata.required(entity)\"\n            [min]=\"metadata.minStart ? metadata.minStart(dateRangeStart) : undefined\"\n            [max]=\"metadata.maxStart ? metadata.maxStart(dateRangeStart) : undefined\"\n            [placeholder]=\"metadata.placeholderStart\"\n            [(ngModel)]=\"dateRangeStart\"\n            (dateChange)=\"setDateRangeValues()\"\n        >\n        <input #endModel=\"ngModel\"\n            matEndDate\n            [name]=\"name + 'end'\"\n            [required]=\"metadata.required(entity)\"\n            [min]=\"metadata.minEnd ? metadata.minEnd(dateRangeEnd) : undefined\"\n            [max]=\"metadata.maxEnd ? metadata.maxEnd(dateRangeEnd) : undefined\"\n            [placeholder]=\"metadata.placeholderEnd\"\n            [(ngModel)]=\"dateRangeEnd\"\n            (dateChange)=\"setDateRangeValues()\"\n        >\n    </mat-date-range-input>\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n    <mat-date-range-picker #picker></mat-date-range-picker>\n\n    @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>", styles: ["mat-form-field{width:100%}\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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: DateRangeInputComponent, deps: [{ token: NGX_COMPLETE_GLOBAL_DEFAULT_VALUES }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.7", type: DateRangeInputComponent, isStandalone: true, selector: "date-range-input", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\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 ?? defaultDateFilter\" [disabled]=\"isReadOnly\">\n        <input #startModel=\"ngModel\"\n            matStartDate\n            [name]=\"name + 'start'\"\n            [required]=\"metadata.required(entity)\"\n            [min]=\"metadata.minStart ? metadata.minStart(dateRangeStart) : undefined\"\n            [max]=\"metadata.maxStart ? metadata.maxStart(dateRangeStart) : undefined\"\n            [placeholder]=\"metadata.placeholderStart\"\n            [(ngModel)]=\"dateRangeStart\"\n            (dateChange)=\"setDateRangeValues()\"\n        >\n        <input #endModel=\"ngModel\"\n            matEndDate\n            [name]=\"name + 'end'\"\n            [required]=\"metadata.required(entity)\"\n            [min]=\"metadata.minEnd ? metadata.minEnd(dateRangeEnd) : undefined\"\n            [max]=\"metadata.maxEnd ? metadata.maxEnd(dateRangeEnd) : undefined\"\n            [placeholder]=\"metadata.placeholderEnd\"\n            [(ngModel)]=\"dateRangeEnd\"\n            (dateChange)=\"setDateRangeValues()\"\n        >\n    </mat-date-range-input>\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n    <mat-date-range-picker #picker></mat-date-range-picker>\n\n    @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>", styles: ["mat-form-field{width:100%}\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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: DateRangeInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: DateRangeInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'date-range-input', standalone: true, imports: [
                         CommonModule,
@@ -4640,10 +4696,10 @@ class DateTimeInputComponent extends NgxMatEntityBaseInputComponent {
         }
         this.emitChange();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: DateTimeInputComponent, deps: [{ token: NGX_COMPLETE_GLOBAL_DEFAULT_VALUES }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0", type: DateTimeInputComponent, isStandalone: true, selector: "date-time-input", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<div class=\"date-time\">\n    <mat-form-field>\n        <mat-label>{{metadata.displayName}}</mat-label>\n        <input\n            #model=\"ngModel\"\n            matInput\n            [name]=\"name\"\n            [matDatepicker]=\"picker\"\n            [required]=\"metadata.required(entity)\"\n            [min]=\"metadata.minDate ? metadata.minDate(propertyValue) : undefined\"\n            [max]=\"metadata.maxDate ? metadata.maxDate(propertyValue) : undefined\"\n            [matDatepickerFilter]=\"metadata.filterDate ?? defaultDateFilter\"\n            [disabled]=\"isReadOnly\"\n            [(ngModel)]=\"propertyValue\"\n            (dateChange)=\"setTime()\"\n        >\n        <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n        <mat-datepicker #picker></mat-datepicker>\n        <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n    </mat-form-field>\n    <mat-form-field class=\"timepicker\">\n        <mat-label>{{metadata.timeDisplayName}}</mat-label>\n        <mat-select\n            #timeModel=\"ngModel\"\n            [name]=\"name + 'time'\"\n            [required]=\"metadata.required(entity)\"\n            [compareWith]=\"compareTimes\"\n            [disabled]=\"isReadOnly\"\n            [(ngModel)]=\"time\"\n            (selectionChange)=\"setTime()\"\n        >\n            @for (validTime of DateUtilities.getValidTimesForDropdown(metadata.times, propertyValue, metadata.minTime, metadata.maxTime, metadata.filterTime); track $index) {\n                <mat-option [value]=\"validTime.value\">{{validTime.displayName}}</mat-option>\n            }\n        </mat-select>\n        <mat-error>{{getValidationErrorMessage(timeModel)}}</mat-error>\n    </mat-form-field>\n</div>", styles: ["mat-form-field{width:100%}.date-time{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:10px}\n"], dependencies: [{ kind: "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: 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: 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: 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: CommonModule }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: DateTimeInputComponent, deps: [{ token: NGX_COMPLETE_GLOBAL_DEFAULT_VALUES }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.7", type: DateTimeInputComponent, isStandalone: true, selector: "date-time-input", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<div class=\"date-time\">\n    <mat-form-field>\n        <mat-label>{{metadata.displayName}}</mat-label>\n        <input\n            #model=\"ngModel\"\n            matInput\n            [name]=\"name\"\n            [matDatepicker]=\"picker\"\n            [required]=\"metadata.required(entity)\"\n            [min]=\"metadata.minDate ? metadata.minDate(propertyValue) : undefined\"\n            [max]=\"metadata.maxDate ? metadata.maxDate(propertyValue) : undefined\"\n            [matDatepickerFilter]=\"metadata.filterDate ?? defaultDateFilter\"\n            [disabled]=\"isReadOnly\"\n            [(ngModel)]=\"propertyValue\"\n            (dateChange)=\"setTime()\"\n        >\n        <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n        <mat-datepicker #picker></mat-datepicker>\n        <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n    </mat-form-field>\n    <mat-form-field class=\"timepicker\">\n        <mat-label>{{metadata.timeDisplayName}}</mat-label>\n        <mat-select\n            #timeModel=\"ngModel\"\n            [name]=\"name + 'time'\"\n            [required]=\"metadata.required(entity)\"\n            [compareWith]=\"compareTimes\"\n            [disabled]=\"isReadOnly\"\n            [(ngModel)]=\"time\"\n            (selectionChange)=\"setTime()\"\n        >\n            @for (validTime of DateUtilities.getValidTimesForDropdown(metadata.times, propertyValue, metadata.minTime, metadata.maxTime, metadata.filterTime); track $index) {\n                <mat-option [value]=\"validTime.value\">{{validTime.displayName}}</mat-option>\n            }\n        </mat-select>\n        <mat-error>{{getValidationErrorMessage(timeModel)}}</mat-error>\n    </mat-form-field>\n</div>", styles: ["mat-form-field{width:100%}.date-time{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:10px}\n"], dependencies: [{ kind: "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: 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: 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: 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: CommonModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: DateTimeInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: DateTimeInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'date-time-input', standalone: true, imports: [
                         MatInputModule,
@@ -4694,10 +4750,10 @@ class DragDropDirective {
             this.files.emit(Array.from(evt.dataTransfer.files));
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: DragDropDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0", type: DragDropDirective, isStandalone: true, selector: "[dragDrop]", outputs: { files: "files" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: DragDropDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.7", type: DragDropDirective, isStandalone: true, selector: "[dragDrop]", outputs: { files: "files" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: DragDropDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: DragDropDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dragDrop]',
@@ -4720,6 +4776,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImpor
 class FileInputComponent {
     dialog;
     http;
+    faFileArrowUp = faFileArrowUp;
+    faUpload = faUpload;
+    faPlusCircle = faPlusCircle;
+    faFileZipper = faFileZipper;
+    faDownload = faDownload;
     get filenames() {
         return ReflectUtilities.getMetadata(EntityUtilities.FILENAMES_KEY, this.entity, this.key);
     }
@@ -4759,11 +4820,11 @@ class FileInputComponent {
             this.filenames = [this.propertyValue.name];
         }
     }
-    async setFileFromInput(event) {
+    setFileFromInput(event) {
         const files = event.target.files ?? [];
-        await this.setFile(Array.from(files));
+        this.setFile(Array.from(files));
     }
-    async setFile(files) {
+    setFile(files) {
         // validation done inline
         if (files.find(f => !FileUtilities.isMimeTypeValid(f.type, this.metadata.allowedMimeTypes))) {
             this.dialog.open(NgxMatEntityConfirmDialogComponent, {
@@ -4796,7 +4857,12 @@ class FileInputComponent {
             this.resetFileInputs();
             return;
         }
-        await (this.metadata.multiple ? this.setMultiFile(Array.from(files)) : this.setSingleFile(files[0]));
+        if (this.metadata.multiple) {
+            this.setMultiFile(Array.from(files));
+        }
+        else {
+            this.setSingleFile(files[0]);
+        }
         this.fileDataChangeEvent.emit(this.propertyValue);
     }
     resetFileInputs() {
@@ -4804,7 +4870,7 @@ class FileInputComponent {
         this.propertyValue = undefined;
         this.fileDataChangeEvent.emit(this.propertyValue);
     }
-    async setMultiFile(files) {
+    setMultiFile(files) {
         this.propertyValue = this.propertyValue ?? [];
         for (const file of files) {
             const fileData = {
@@ -4817,7 +4883,7 @@ class FileInputComponent {
         }
         this.filenames = this.propertyValue.map(f => f.name);
     }
-    async setSingleFile(file) {
+    setSingleFile(file) {
         this.propertyValue = {
             file: file,
             name: file.name,
@@ -4875,10 +4941,10 @@ class FileInputComponent {
             await FileUtilities.downloadMultipleFiles(this.metadata.displayName, LodashUtilities.cloneDeep(this.propertyValue), this.http);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: FileInputComponent, deps: [{ token: i1.MatDialog }, { token: i2$1.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0", type: FileInputComponent, isStandalone: true, selector: "file-input", inputs: { propertyValue: "propertyValue", entity: "entity", key: "key", metadata: "metadata", getValidationErrorMessage: "getValidationErrorMessage", isReadOnly: "isReadOnly" }, outputs: { fileDataChangeEvent: "fileDataChangeEvent" }, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<input #fileInput\n    type=\"file\" hidden\n    [multiple]=\"metadata.multiple\"\n    [accept]=\"acceptString\"\n    (change)=\"setFileFromInput($event)\"\n>\n\n<mat-form-field floatLabel=\"always\">\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-chip-grid #chipGrid\n        #model=\"ngModel\" name=\"file\" [required]=\"metadata.required(entity)\"\n        [(ngModel)]=\"filenames\"\n    >\n        @for (name of filenames; track $index) {\n            <mat-chip-row (removed)=\"removeFile(name)\">\n                {{name}}\n                <span class=\"mat-mdc-chip-remove mat-mdc-chip-trailing-icon ngx-mat-grey\" (click)=\"downloadFile(name)\">\n                    <i class=\"fas fa-download\"></i>\n                </span>\n                @if (!isReadOnly) {\n                    <button type=\"button\" matChipRemove>\n                        <i [class]=\"metadata.deleteIcon\"></i>\n                    </button>\n                }\n            </mat-chip-row>\n        }\n        <input hidden [matChipInputFor]=\"chipGrid\" [readonly]=\"true\">\n    </mat-chip-grid>\n    @if (downloadAllEnabled()) {\n        <button type=\"button\" class=\"ngx-mat-grey\" mat-icon-button matSuffix (click)=\"downloadAll()\">\n            <i class=\"fas fa-file-zipper\"></i>\n        </button>\n    }\n    <button type=\"button\" class=\"ngx-mat-grey\" mat-icon-button matSuffix [disabled]=\"isReadOnly\" (click)=\"fileInput.click()\">\n        <i class=\"fas\" [class.fa-plus-circle]=\"metadata.multiple\" [class.fa-upload]=\"!metadata.multiple\"></i>\n    </button>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>\n\n@if (metadata.dragAndDrop && !isReadOnly) {\n    <div class=\"drag-drop\" dragDrop (files)=\"setFile($event)\">\n        <button type=\"button\" mat-icon-button [disabled]=\"isReadOnly\" (click)=\"fileInput.click()\">\n            <i class=\"fas fa-file-arrow-up ngx-mat-grey\"></i>\n        </button>\n    </div>\n}", styles: ["mat-form-field{width:100%}.ngx-mat-grey{opacity:1;color:#0000008a}.drag-drop{display:flex;align-items:center;justify-content:center;height:200px;border:2px dashed rgba(0,0,0,.54);border-radius:15px;margin-top:5px;margin-bottom:5px}.drag-drop i{font-size:30px}\n"], dependencies: [{ kind: "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: MatChipsModule }, { kind: "component", type: i2$4.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i2$4.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i2$4.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i2$4.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: FormsModule }, { 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: CommonModule }, { kind: "directive", type: DragDropDirective, selector: "[dragDrop]", outputs: ["files"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: FileInputComponent, deps: [{ token: i1.MatDialog }, { token: i2$1.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.7", type: FileInputComponent, isStandalone: true, selector: "file-input", inputs: { propertyValue: "propertyValue", entity: "entity", key: "key", metadata: "metadata", getValidationErrorMessage: "getValidationErrorMessage", isReadOnly: "isReadOnly" }, outputs: { fileDataChangeEvent: "fileDataChangeEvent" }, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<input #fileInput\n    type=\"file\" hidden\n    [multiple]=\"metadata.multiple\"\n    [accept]=\"acceptString\"\n    (change)=\"setFileFromInput($event)\"\n>\n\n<mat-form-field floatLabel=\"always\">\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-chip-grid #chipGrid\n        #model=\"ngModel\" name=\"file\" [required]=\"metadata.required(entity)\"\n        [(ngModel)]=\"filenames\"\n    >\n        @for (name of filenames; track $index) {\n            <mat-chip-row (removed)=\"removeFile(name)\">\n                {{name}}\n                <span class=\"mat-mdc-chip-remove mat-mdc-chip-trailing-icon ngx-mat-grey\" (click)=\"downloadFile(name)\">\n                    <fa-icon [icon]=\"faDownload\"></fa-icon>\n                </span>\n                @if (!isReadOnly) {\n                    <button type=\"button\" matChipRemove>\n                        <fa-icon [icon]=\"metadata.deleteIcon\"></fa-icon>\n                    </button>\n                }\n            </mat-chip-row>\n        }\n        <input hidden [matChipInputFor]=\"chipGrid\" [readonly]=\"true\">\n    </mat-chip-grid>\n    @if (downloadAllEnabled()) {\n        <button type=\"button\" class=\"ngx-mat-grey\" mat-icon-button matSuffix (click)=\"downloadAll()\">\n            <fa-icon [icon]=\"faFileZipper\"></fa-icon>\n        </button>\n    }\n    <button type=\"button\" class=\"ngx-mat-grey\" mat-icon-button matSuffix [disabled]=\"isReadOnly\" (click)=\"fileInput.click()\">\n        <fa-icon [icon]=\"metadata.multiple ? faPlusCircle : faUpload\"></fa-icon>\n    </button>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>\n\n@if (metadata.dragAndDrop && !isReadOnly) {\n    <div class=\"drag-drop\" dragDrop (files)=\"setFile($event)\">\n        <button type=\"button\" mat-icon-button [disabled]=\"isReadOnly\" (click)=\"fileInput.click()\">\n            <fa-icon class=\"ngx-mat-grey\" [icon]=\"faFileArrowUp\"></fa-icon>\n        </button>\n    </div>\n}", styles: ["mat-form-field{width:100%}.ngx-mat-grey{opacity:1;color:#0000008a}.drag-drop{display:flex;align-items:center;justify-content:center;height:200px;border:2px dashed rgba(0,0,0,.54);border-radius:15px;margin-top:5px;margin-bottom:5px}.drag-drop i{font-size:30px}\n"], dependencies: [{ kind: "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: MatChipsModule }, { kind: "component", type: i2$4.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i2$4.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i2$4.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i2$4.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: FormsModule }, { 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: CommonModule }, { kind: "directive", type: DragDropDirective, selector: "[dragDrop]", outputs: ["files"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { 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.0", ngImport: i0, type: FileInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: FileInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'file-input', standalone: true, imports: [
                         MatFormFieldModule,
@@ -4886,8 +4952,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImpor
                         FormsModule,
                         CommonModule,
                         DragDropDirective,
-                        MatButtonModule
-                    ], template: "<!-- eslint-disable angular/no-call-expression -->\n<input #fileInput\n    type=\"file\" hidden\n    [multiple]=\"metadata.multiple\"\n    [accept]=\"acceptString\"\n    (change)=\"setFileFromInput($event)\"\n>\n\n<mat-form-field floatLabel=\"always\">\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-chip-grid #chipGrid\n        #model=\"ngModel\" name=\"file\" [required]=\"metadata.required(entity)\"\n        [(ngModel)]=\"filenames\"\n    >\n        @for (name of filenames; track $index) {\n            <mat-chip-row (removed)=\"removeFile(name)\">\n                {{name}}\n                <span class=\"mat-mdc-chip-remove mat-mdc-chip-trailing-icon ngx-mat-grey\" (click)=\"downloadFile(name)\">\n                    <i class=\"fas fa-download\"></i>\n                </span>\n                @if (!isReadOnly) {\n                    <button type=\"button\" matChipRemove>\n                        <i [class]=\"metadata.deleteIcon\"></i>\n                    </button>\n                }\n            </mat-chip-row>\n        }\n        <input hidden [matChipInputFor]=\"chipGrid\" [readonly]=\"true\">\n    </mat-chip-grid>\n    @if (downloadAllEnabled()) {\n        <button type=\"button\" class=\"ngx-mat-grey\" mat-icon-button matSuffix (click)=\"downloadAll()\">\n            <i class=\"fas fa-file-zipper\"></i>\n        </button>\n    }\n    <button type=\"button\" class=\"ngx-mat-grey\" mat-icon-button matSuffix [disabled]=\"isReadOnly\" (click)=\"fileInput.click()\">\n        <i class=\"fas\" [class.fa-plus-circle]=\"metadata.multiple\" [class.fa-upload]=\"!metadata.multiple\"></i>\n    </button>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>\n\n@if (metadata.dragAndDrop && !isReadOnly) {\n    <div class=\"drag-drop\" dragDrop (files)=\"setFile($event)\">\n        <button type=\"button\" mat-icon-button [disabled]=\"isReadOnly\" (click)=\"fileInput.click()\">\n            <i class=\"fas fa-file-arrow-up ngx-mat-grey\"></i>\n        </button>\n    </div>\n}", styles: ["mat-form-field{width:100%}.ngx-mat-grey{opacity:1;color:#0000008a}.drag-drop{display:flex;align-items:center;justify-content:center;height:200px;border:2px dashed rgba(0,0,0,.54);border-radius:15px;margin-top:5px;margin-bottom:5px}.drag-drop i{font-size:30px}\n"] }]
+                        MatButtonModule,
+                        FaIconComponent
+                    ], template: "<!-- eslint-disable angular/no-call-expression -->\n<input #fileInput\n    type=\"file\" hidden\n    [multiple]=\"metadata.multiple\"\n    [accept]=\"acceptString\"\n    (change)=\"setFileFromInput($event)\"\n>\n\n<mat-form-field floatLabel=\"always\">\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-chip-grid #chipGrid\n        #model=\"ngModel\" name=\"file\" [required]=\"metadata.required(entity)\"\n        [(ngModel)]=\"filenames\"\n    >\n        @for (name of filenames; track $index) {\n            <mat-chip-row (removed)=\"removeFile(name)\">\n                {{name}}\n                <span class=\"mat-mdc-chip-remove mat-mdc-chip-trailing-icon ngx-mat-grey\" (click)=\"downloadFile(name)\">\n                    <fa-icon [icon]=\"faDownload\"></fa-icon>\n                </span>\n                @if (!isReadOnly) {\n                    <button type=\"button\" matChipRemove>\n                        <fa-icon [icon]=\"metadata.deleteIcon\"></fa-icon>\n                    </button>\n                }\n            </mat-chip-row>\n        }\n        <input hidden [matChipInputFor]=\"chipGrid\" [readonly]=\"true\">\n    </mat-chip-grid>\n    @if (downloadAllEnabled()) {\n        <button type=\"button\" class=\"ngx-mat-grey\" mat-icon-button matSuffix (click)=\"downloadAll()\">\n            <fa-icon [icon]=\"faFileZipper\"></fa-icon>\n        </button>\n    }\n    <button type=\"button\" class=\"ngx-mat-grey\" mat-icon-button matSuffix [disabled]=\"isReadOnly\" (click)=\"fileInput.click()\">\n        <fa-icon [icon]=\"metadata.multiple ? faPlusCircle : faUpload\"></fa-icon>\n    </button>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>\n\n@if (metadata.dragAndDrop && !isReadOnly) {\n    <div class=\"drag-drop\" dragDrop (files)=\"setFile($event)\">\n        <button type=\"button\" mat-icon-button [disabled]=\"isReadOnly\" (click)=\"fileInput.click()\">\n            <fa-icon class=\"ngx-mat-grey\" [icon]=\"faFileArrowUp\"></fa-icon>\n        </button>\n    </div>\n}", styles: ["mat-form-field{width:100%}.ngx-mat-grey{opacity:1;color:#0000008a}.drag-drop{display:flex;align-items:center;justify-content:center;height:200px;border:2px dashed rgba(0,0,0,.54);border-radius:15px;margin-top:5px;margin-bottom:5px}.drag-drop i{font-size:30px}\n"] }]
         }], ctorParameters: () => [{ type: i1.MatDialog }, { type: i2$1.HttpClient }], propDecorators: { propertyValue: [{
                 type: Input,
                 args: [{ required: true }]
@@ -4912,14 +4979,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImpor
 
 /* eslint-disable jsdoc/require-jsdoc */
 class FileDefaultInputComponent extends NgxMatEntityBaseInputComponent {
-    async refreshFileData(fileData) {
+    refreshFileData(fileData) {
         this.propertyValue = fileData;
         this.emitChange();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: FileDefaultInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0", type: FileDefaultInputComponent, isStandalone: true, selector: "file-default-input", usesInheritance: true, ngImport: i0, template: "<div [class.file-input]=\"metadata.dragAndDrop\" [class.mat-elevation-z8]=\"metadata.dragAndDrop\">\n    <file-input\n        [propertyValue]=\"propertyValue\"\n        [metadata]=\"metadata\"\n        [getValidationErrorMessage]=\"getValidationErrorMessage\"\n        [isReadOnly]=\"isReadOnly\"\n        [entity]=\"entity\"\n        [key]=\"key\"\n        (fileDataChangeEvent)=\"refreshFileData($event)\"\n    >\n    </file-input>\n</div>", styles: [".file-input{margin-top:15px;margin-bottom:15px;padding:15px;border-radius:5px}\n"], dependencies: [{ kind: "component", type: FileInputComponent, selector: "file-input", inputs: ["propertyValue", "entity", "key", "metadata", "getValidationErrorMessage", "isReadOnly"], outputs: ["fileDataChangeEvent"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: FileDefaultInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: FileDefaultInputComponent, isStandalone: true, selector: "file-default-input", usesInheritance: true, ngImport: i0, template: "<div [class.file-input]=\"metadata.dragAndDrop\" [class.mat-elevation-z8]=\"metadata.dragAndDrop\">\n    <file-input\n        [propertyValue]=\"propertyValue\"\n        [metadata]=\"metadata\"\n        [getValidationErrorMessage]=\"getValidationErrorMessage\"\n        [isReadOnly]=\"isReadOnly\"\n        [entity]=\"entity\"\n        [key]=\"key\"\n        (fileDataChangeEvent)=\"refreshFileData($event)\"\n    >\n    </file-input>\n</div>", styles: [".file-input{margin-top:15px;margin-bottom:15px;padding:15px;border-radius:5px}\n"], dependencies: [{ kind: "component", type: FileInputComponent, selector: "file-input", inputs: ["propertyValue", "entity", "key", "metadata", "getValidationErrorMessage", "isReadOnly"], outputs: ["fileDataChangeEvent"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: FileDefaultInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: FileDefaultInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'file-default-input', standalone: true, imports: [FileInputComponent], template: "<div [class.file-input]=\"metadata.dragAndDrop\" [class.mat-elevation-z8]=\"metadata.dragAndDrop\">\n    <file-input\n        [propertyValue]=\"propertyValue\"\n        [metadata]=\"metadata\"\n        [getValidationErrorMessage]=\"getValidationErrorMessage\"\n        [isReadOnly]=\"isReadOnly\"\n        [entity]=\"entity\"\n        [key]=\"key\"\n        (fileDataChangeEvent)=\"refreshFileData($event)\"\n    >\n    </file-input>\n</div>", styles: [".file-input{margin-top:15px;margin-bottom:15px;padding:15px;border-radius:5px}\n"] }]
         }] });
@@ -4930,6 +4997,8 @@ const PLACEHOLDER = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAAAAMgCAMAA
 /* eslint-disable jsdoc/require-jsdoc */
 class FileImageInputComponent extends NgxMatEntityBaseInputComponent {
     http;
+    faAngleLeft = faAngleLeft;
+    faAngleRight = faAngleRight;
     get multiPreviewImages() {
         return ReflectUtilities.getMetadata(EntityUtilities.MULTI_PREVIEW_IMAGES_KEY, this.entity, this.key);
     }
@@ -5008,17 +5077,18 @@ class FileImageInputComponent extends NgxMatEntityBaseInputComponent {
         await this.setMultiPreviewImages(index);
         this.imageIndex = index;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: FileImageInputComponent, deps: [{ token: i2$1.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0", type: FileImageInputComponent, isStandalone: true, selector: "file-image-input", usesInheritance: true, ngImport: i0, template: " \n<!-- eslint-disable angular/prefer-ngsrc -->\n<!-- eslint-disable angular/alt-text -->\n \n@if (!metadata.dragAndDrop && !metadata.preview) {\n    <file-input\n        [propertyValue]=\"propertyValue\"\n        [metadata]=\"metadata\"\n        [getValidationErrorMessage]=\"getValidationErrorMessage\"\n        [isReadOnly]=\"isReadOnly\"\n        [entity]=\"entity\"\n        [key]=\"key\"\n        (fileDataChangeEvent)=\"refreshFileData($event)\"\n    >\n    </file-input>\n}\n    \n@if (metadata.dragAndDrop || metadata.preview) {\n    <div class=\"file-input mat-elevation-z8\">\n        <file-input\n            [propertyValue]=\"propertyValue\"\n            [metadata]=\"metadata\"\n            [getValidationErrorMessage]=\"getValidationErrorMessage\"\n            [isReadOnly]=\"isReadOnly\"\n            [entity]=\"entity\"\n            [key]=\"key\"\n            (fileDataChangeEvent)=\"refreshFileData($event)\"\n        >\n        </file-input>\n\n        @if (metadata.preview) {\n            @if (metadata.multiple) {\n                <div class=\"image-preview\">\n                    @if (multiPreviewImages?.[imageIndex]) {\n                        <img class=\"mat-elevation-z2\" [src]=\"multiPreviewImages?.[imageIndex]\">\n                    }\n                    @else {\n                        <img class=\"mat-elevation-z2\" [src]=\"metadata.previewPlaceholderUrl ?? placeHolder\">\n                    }\n                </div>\n            \n                <div class=\"preview-nav\">\n                    <i class=\"fas fa-angle-left left-button\" [class.disabled]=\"imageIndex === 0\" (click)=\"prev()\"></i>\n                    @if (\n                        multiPreviewImages\n                        && multiPreviewImages[imageIndex-4]\n                        && imageIndex === (multiPreviewImages.length - 1)\n                    ) {\n                        <div class=\"dot\" (click)=\"setIndex(imageIndex-4)\">\n                            <div class=\"image-index\">{{imageIndex - 3}}</div>\n                        </div>\n                    }\n                    @if (\n                        multiPreviewImages\n                        && multiPreviewImages[imageIndex-3]\n                        && (\n                            imageIndex === (multiPreviewImages.length - 2)\n                            || imageIndex === (multiPreviewImages.length - 1)\n                        )\n                    ) {\n                        <div class=\"dot\" (click)=\"setIndex(imageIndex-3)\">\n                            <div class=\"image-index\">{{imageIndex - 2}}</div>\n                        </div>\n                    }\n                    @if (multiPreviewImages?.[imageIndex-2]) {\n                        <div class=\"dot\" (click)=\"setIndex(imageIndex-2)\">\n                            <div class=\"image-index\">{{imageIndex - 1}}</div>\n                        </div>\n                    }\n                    @if (multiPreviewImages?.[imageIndex-1]) {\n                        <div class=\"dot\" (click)=\"setIndex(imageIndex-1)\">\n                            <div class=\"image-index\">{{imageIndex}}</div>\n                        </div>\n                    }                    \n                    <div class=\"dot selected disabled\">\n                        <div class=\"image-index\">{{imageIndex + 1}}</div>\n                    </div>\n                    @if (multiPreviewImages?.[imageIndex+1]) {\n                        <div class=\"dot\" (click)=\"setIndex(imageIndex+1)\">\n                            <div class=\"image-index\">{{imageIndex + 2}}</div>\n                        </div>\n                    }\n                    @if (multiPreviewImages?.[imageIndex+2]) {\n                        <div class=\"dot\" (click)=\"setIndex(imageIndex+2)\">\n                            <div class=\"image-index\">{{imageIndex + 3}}</div>\n                        </div>\n                    }\n                    @if (multiPreviewImages?.[imageIndex+3] && imageIndex <= 1) {\n                        <div class=\"dot\" (click)=\"setIndex(imageIndex+3)\">\n                            <div class=\"image-index\">{{imageIndex + 4}}</div>\n                        </div>\n                    }\n                    @if (multiPreviewImages?.[imageIndex+4] && imageIndex === 0) {\n                        <div class=\"dot\" (click)=\"setIndex(imageIndex+4)\">\n                            <div class=\"image-index\">{{imageIndex + 5}}</div>\n                        </div>\n                    }\n                    <i class=\"fas fa-angle-right right-button\" [class.disabled]=\"!multiPreviewImages || !multiPreviewImages.length || imageIndex === (multiPreviewImages.length - 1)\" (click)=\"next()\"></i>\n                </div>\n            }\n            @else {\n                <div class=\"image-preview\">\n                    <img class=\"mat-elevation-z2\" [src]=\"singlePreviewImage ?? metadata.previewPlaceholderUrl ?? placeHolder\">\n                </div>\n            }\n        }\n    </div>\n}", styles: [".file-input{margin-top:15px;margin-bottom:15px;padding:15px;border-radius:5px}.image-preview{height:250px;display:flex;align-items:center;padding-top:15px;padding-bottom:15px}.image-preview img{max-width:100%;max-height:100%;margin-left:auto;margin-right:auto;border-radius:3px}.preview-nav{display:flex;align-items:center;justify-content:center;column-gap:5px}.preview-nav .left-button,.preview-nav .right-button{font-size:30px;color:#00000061}.preview-nav .left-button:hover,.preview-nav .right-button:hover{color:#0000008a;cursor:pointer;transition:all .3s ease}.preview-nav .left-button.disabled,.preview-nav .right-button.disabled{color:#00000042}.preview-nav .left-button.disabled:hover,.preview-nav .right-button.disabled:hover{color:#00000042;transition:none;cursor:default}.preview-nav .dot{display:flex;align-items:center;justify-content:center;height:30px;width:30px;min-width:30px;background-color:#00000061;border-radius:50%}.preview-nav .dot .image-index{color:#fff;font-size:24px;font-weight:600}.preview-nav .dot.selected{background-color:#0000008a}.preview-nav .dot:hover{background-color:#0000008a;cursor:pointer;transition:all .3s ease}.preview-nav .dot.disabled:hover{cursor:default}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: FileInputComponent, selector: "file-input", inputs: ["propertyValue", "entity", "key", "metadata", "getValidationErrorMessage", "isReadOnly"], outputs: ["fileDataChangeEvent"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: FileImageInputComponent, deps: [{ token: i2$1.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.7", type: FileImageInputComponent, isStandalone: true, selector: "file-image-input", usesInheritance: true, ngImport: i0, template: " \n<!-- eslint-disable angular/prefer-ngsrc -->\n<!-- eslint-disable angular/alt-text -->\n \n@if (!metadata.dragAndDrop && !metadata.preview) {\n    <file-input\n        [propertyValue]=\"propertyValue\"\n        [metadata]=\"metadata\"\n        [getValidationErrorMessage]=\"getValidationErrorMessage\"\n        [isReadOnly]=\"isReadOnly\"\n        [entity]=\"entity\"\n        [key]=\"key\"\n        (fileDataChangeEvent)=\"refreshFileData($event)\"\n    >\n    </file-input>\n}\n    \n@if (metadata.dragAndDrop || metadata.preview) {\n    <div class=\"file-input mat-elevation-z8\">\n        <file-input\n            [propertyValue]=\"propertyValue\"\n            [metadata]=\"metadata\"\n            [getValidationErrorMessage]=\"getValidationErrorMessage\"\n            [isReadOnly]=\"isReadOnly\"\n            [entity]=\"entity\"\n            [key]=\"key\"\n            (fileDataChangeEvent)=\"refreshFileData($event)\"\n        >\n        </file-input>\n\n        @if (metadata.preview) {\n            @if (metadata.multiple) {\n                <div class=\"image-preview\">\n                    @if (multiPreviewImages?.[imageIndex]) {\n                        <img class=\"mat-elevation-z2\" [src]=\"multiPreviewImages?.[imageIndex]\">\n                    }\n                    @else {\n                        <img class=\"mat-elevation-z2\" [src]=\"metadata.previewPlaceholderUrl ?? placeHolder\">\n                    }\n                </div>\n            \n                <div class=\"preview-nav\">\n                    <fa-icon class=\"left-button\" [icon]=\"faAngleLeft\" [class.disabled]=\"imageIndex === 0\" (click)=\"prev()\"></fa-icon>\n                    @if (\n                        multiPreviewImages\n                        && multiPreviewImages[imageIndex-4]\n                        && imageIndex === (multiPreviewImages.length - 1)\n                    ) {\n                        <div class=\"dot\" (click)=\"setIndex(imageIndex-4)\">\n                            <div class=\"image-index\">{{imageIndex - 3}}</div>\n                        </div>\n                    }\n                    @if (\n                        multiPreviewImages\n                        && multiPreviewImages[imageIndex-3]\n                        && (\n                            imageIndex === (multiPreviewImages.length - 2)\n                            || imageIndex === (multiPreviewImages.length - 1)\n                        )\n                    ) {\n                        <div class=\"dot\" (click)=\"setIndex(imageIndex-3)\">\n                            <div class=\"image-index\">{{imageIndex - 2}}</div>\n                        </div>\n                    }\n                    @if (multiPreviewImages?.[imageIndex-2]) {\n                        <div class=\"dot\" (click)=\"setIndex(imageIndex-2)\">\n                            <div class=\"image-index\">{{imageIndex - 1}}</div>\n                        </div>\n                    }\n                    @if (multiPreviewImages?.[imageIndex-1]) {\n                        <div class=\"dot\" (click)=\"setIndex(imageIndex-1)\">\n                            <div class=\"image-index\">{{imageIndex}}</div>\n                        </div>\n                    }                    \n                    <div class=\"dot selected disabled\">\n                        <div class=\"image-index\">{{imageIndex + 1}}</div>\n                    </div>\n                    @if (multiPreviewImages?.[imageIndex+1]) {\n                        <div class=\"dot\" (click)=\"setIndex(imageIndex+1)\">\n                            <div class=\"image-index\">{{imageIndex + 2}}</div>\n                        </div>\n                    }\n                    @if (multiPreviewImages?.[imageIndex+2]) {\n                        <div class=\"dot\" (click)=\"setIndex(imageIndex+2)\">\n                            <div class=\"image-index\">{{imageIndex + 3}}</div>\n                        </div>\n                    }\n                    @if (multiPreviewImages?.[imageIndex+3] && imageIndex <= 1) {\n                        <div class=\"dot\" (click)=\"setIndex(imageIndex+3)\">\n                            <div class=\"image-index\">{{imageIndex + 4}}</div>\n                        </div>\n                    }\n                    @if (multiPreviewImages?.[imageIndex+4] && imageIndex === 0) {\n                        <div class=\"dot\" (click)=\"setIndex(imageIndex+4)\">\n                            <div class=\"image-index\">{{imageIndex + 5}}</div>\n                        </div>\n                    }\n                    <fa-icon class=\"right-button\" [icon]=\"faAngleRight\" [class.disabled]=\"!multiPreviewImages || !multiPreviewImages.length || imageIndex === (multiPreviewImages.length - 1)\" (click)=\"next()\"></fa-icon>\n                </div>\n            }\n            @else {\n                <div class=\"image-preview\">\n                    <img class=\"mat-elevation-z2\" [src]=\"singlePreviewImage ?? metadata.previewPlaceholderUrl ?? placeHolder\">\n                </div>\n            }\n        }\n    </div>\n}", styles: [".file-input{margin-top:15px;margin-bottom:15px;padding:15px;border-radius:5px}.image-preview{height:250px;display:flex;align-items:center;padding-top:15px;padding-bottom:15px}.image-preview img{max-width:100%;max-height:100%;margin-left:auto;margin-right:auto;border-radius:3px}.preview-nav{display:flex;align-items:center;justify-content:center;column-gap:5px}.preview-nav .left-button,.preview-nav .right-button{font-size:30px;color:#00000061}.preview-nav .left-button:hover,.preview-nav .right-button:hover{color:#0000008a;cursor:pointer;transition:all .3s ease}.preview-nav .left-button.disabled,.preview-nav .right-button.disabled{color:#00000042}.preview-nav .left-button.disabled:hover,.preview-nav .right-button.disabled:hover{color:#00000042;transition:none;cursor:default}.preview-nav .dot{display:flex;align-items:center;justify-content:center;height:30px;width:30px;min-width:30px;background-color:#00000061;border-radius:50%}.preview-nav .dot .image-index{color:#fff;font-size:24px;font-weight:600}.preview-nav .dot.selected{background-color:#0000008a}.preview-nav .dot:hover{background-color:#0000008a;cursor:pointer;transition:all .3s ease}.preview-nav .dot.disabled:hover{cursor:default}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: FileInputComponent, selector: "file-input", inputs: ["propertyValue", "entity", "key", "metadata", "getValidationErrorMessage", "isReadOnly"], outputs: ["fileDataChangeEvent"] }, { 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.0", ngImport: i0, type: FileImageInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: FileImageInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'file-image-input', standalone: true, imports: [CommonModule, FileInputComponent], template: " \n<!-- eslint-disable angular/prefer-ngsrc -->\n<!-- eslint-disable angular/alt-text -->\n \n@if (!metadata.dragAndDrop && !metadata.preview) {\n    <file-input\n        [propertyValue]=\"propertyValue\"\n        [metadata]=\"metadata\"\n        [getValidationErrorMessage]=\"getValidationErrorMessage\"\n        [isReadOnly]=\"isReadOnly\"\n        [entity]=\"entity\"\n        [key]=\"key\"\n        (fileDataChangeEvent)=\"refreshFileData($event)\"\n    >\n    </file-input>\n}\n    \n@if (metadata.dragAndDrop || metadata.preview) {\n    <div class=\"file-input mat-elevation-z8\">\n        <file-input\n            [propertyValue]=\"propertyValue\"\n            [metadata]=\"metadata\"\n            [getValidationErrorMessage]=\"getValidationErrorMessage\"\n            [isReadOnly]=\"isReadOnly\"\n            [entity]=\"entity\"\n            [key]=\"key\"\n            (fileDataChangeEvent)=\"refreshFileData($event)\"\n        >\n        </file-input>\n\n        @if (metadata.preview) {\n            @if (metadata.multiple) {\n                <div class=\"image-preview\">\n                    @if (multiPreviewImages?.[imageIndex]) {\n                        <img class=\"mat-elevation-z2\" [src]=\"multiPreviewImages?.[imageIndex]\">\n                    }\n                    @else {\n                        <img class=\"mat-elevation-z2\" [src]=\"metadata.previewPlaceholderUrl ?? placeHolder\">\n                    }\n                </div>\n            \n                <div class=\"preview-nav\">\n                    <i class=\"fas fa-angle-left left-button\" [class.disabled]=\"imageIndex === 0\" (click)=\"prev()\"></i>\n                    @if (\n                        multiPreviewImages\n                        && multiPreviewImages[imageIndex-4]\n                        && imageIndex === (multiPreviewImages.length - 1)\n                    ) {\n                        <div class=\"dot\" (click)=\"setIndex(imageIndex-4)\">\n                            <div class=\"image-index\">{{imageIndex - 3}}</div>\n                        </div>\n                    }\n                    @if (\n                        multiPreviewImages\n                        && multiPreviewImages[imageIndex-3]\n                        && (\n                            imageIndex === (multiPreviewImages.length - 2)\n                            || imageIndex === (multiPreviewImages.length - 1)\n                        )\n                    ) {\n                        <div class=\"dot\" (click)=\"setIndex(imageIndex-3)\">\n                            <div class=\"image-index\">{{imageIndex - 2}}</div>\n                        </div>\n                    }\n                    @if (multiPreviewImages?.[imageIndex-2]) {\n                        <div class=\"dot\" (click)=\"setIndex(imageIndex-2)\">\n                            <div class=\"image-index\">{{imageIndex - 1}}</div>\n                        </div>\n                    }\n                    @if (multiPreviewImages?.[imageIndex-1]) {\n                        <div class=\"dot\" (click)=\"setIndex(imageIndex-1)\">\n                            <div class=\"image-index\">{{imageIndex}}</div>\n                        </div>\n                    }                    \n                    <div class=\"dot selected disabled\">\n                        <div class=\"image-index\">{{imageIndex + 1}}</div>\n                    </div>\n                    @if (multiPreviewImages?.[imageIndex+1]) {\n                        <div class=\"dot\" (click)=\"setIndex(imageIndex+1)\">\n                            <div class=\"image-index\">{{imageIndex + 2}}</div>\n                        </div>\n                    }\n                    @if (multiPreviewImages?.[imageIndex+2]) {\n                        <div class=\"dot\" (click)=\"setIndex(imageIndex+2)\">\n                            <div class=\"image-index\">{{imageIndex + 3}}</div>\n                        </div>\n                    }\n                    @if (multiPreviewImages?.[imageIndex+3] && imageIndex <= 1) {\n                        <div class=\"dot\" (click)=\"setIndex(imageIndex+3)\">\n                            <div class=\"image-index\">{{imageIndex + 4}}</div>\n                        </div>\n                    }\n                    @if (multiPreviewImages?.[imageIndex+4] && imageIndex === 0) {\n                        <div class=\"dot\" (click)=\"setIndex(imageIndex+4)\">\n                            <div class=\"image-index\">{{imageIndex + 5}}</div>\n                        </div>\n                    }\n                    <i class=\"fas fa-angle-right right-button\" [class.disabled]=\"!multiPreviewImages || !multiPreviewImages.length || imageIndex === (multiPreviewImages.length - 1)\" (click)=\"next()\"></i>\n                </div>\n            }\n            @else {\n                <div class=\"image-preview\">\n                    <img class=\"mat-elevation-z2\" [src]=\"singlePreviewImage ?? metadata.previewPlaceholderUrl ?? placeHolder\">\n                </div>\n            }\n        }\n    </div>\n}", styles: [".file-input{margin-top:15px;margin-bottom:15px;padding:15px;border-radius:5px}.image-preview{height:250px;display:flex;align-items:center;padding-top:15px;padding-bottom:15px}.image-preview img{max-width:100%;max-height:100%;margin-left:auto;margin-right:auto;border-radius:3px}.preview-nav{display:flex;align-items:center;justify-content:center;column-gap:5px}.preview-nav .left-button,.preview-nav .right-button{font-size:30px;color:#00000061}.preview-nav .left-button:hover,.preview-nav .right-button:hover{color:#0000008a;cursor:pointer;transition:all .3s ease}.preview-nav .left-button.disabled,.preview-nav .right-button.disabled{color:#00000042}.preview-nav .left-button.disabled:hover,.preview-nav .right-button.disabled:hover{color:#00000042;transition:none;cursor:default}.preview-nav .dot{display:flex;align-items:center;justify-content:center;height:30px;width:30px;min-width:30px;background-color:#00000061;border-radius:50%}.preview-nav .dot .image-index{color:#fff;font-size:24px;font-weight:600}.preview-nav .dot.selected{background-color:#0000008a}.preview-nav .dot:hover{background-color:#0000008a;cursor:pointer;transition:all .3s ease}.preview-nav .dot.disabled:hover{cursor:default}\n"] }]
+            args: [{ selector: 'file-image-input', standalone: true, imports: [CommonModule, FileInputComponent, FaIconComponent], template: " \n<!-- eslint-disable angular/prefer-ngsrc -->\n<!-- eslint-disable angular/alt-text -->\n \n@if (!metadata.dragAndDrop && !metadata.preview) {\n    <file-input\n        [propertyValue]=\"propertyValue\"\n        [metadata]=\"metadata\"\n        [getValidationErrorMessage]=\"getValidationErrorMessage\"\n        [isReadOnly]=\"isReadOnly\"\n        [entity]=\"entity\"\n        [key]=\"key\"\n        (fileDataChangeEvent)=\"refreshFileData($event)\"\n    >\n    </file-input>\n}\n    \n@if (metadata.dragAndDrop || metadata.preview) {\n    <div class=\"file-input mat-elevation-z8\">\n        <file-input\n            [propertyValue]=\"propertyValue\"\n            [metadata]=\"metadata\"\n            [getValidationErrorMessage]=\"getValidationErrorMessage\"\n            [isReadOnly]=\"isReadOnly\"\n            [entity]=\"entity\"\n            [key]=\"key\"\n            (fileDataChangeEvent)=\"refreshFileData($event)\"\n        >\n        </file-input>\n\n        @if (metadata.preview) {\n            @if (metadata.multiple) {\n                <div class=\"image-preview\">\n                    @if (multiPreviewImages?.[imageIndex]) {\n                        <img class=\"mat-elevation-z2\" [src]=\"multiPreviewImages?.[imageIndex]\">\n                    }\n                    @else {\n                        <img class=\"mat-elevation-z2\" [src]=\"metadata.previewPlaceholderUrl ?? placeHolder\">\n                    }\n                </div>\n            \n                <div class=\"preview-nav\">\n                    <fa-icon class=\"left-button\" [icon]=\"faAngleLeft\" [class.disabled]=\"imageIndex === 0\" (click)=\"prev()\"></fa-icon>\n                    @if (\n                        multiPreviewImages\n                        && multiPreviewImages[imageIndex-4]\n                        && imageIndex === (multiPreviewImages.length - 1)\n                    ) {\n                        <div class=\"dot\" (click)=\"setIndex(imageIndex-4)\">\n                            <div class=\"image-index\">{{imageIndex - 3}}</div>\n                        </div>\n                    }\n                    @if (\n                        multiPreviewImages\n                        && multiPreviewImages[imageIndex-3]\n                        && (\n                            imageIndex === (multiPreviewImages.length - 2)\n                            || imageIndex === (multiPreviewImages.length - 1)\n                        )\n                    ) {\n                        <div class=\"dot\" (click)=\"setIndex(imageIndex-3)\">\n                            <div class=\"image-index\">{{imageIndex - 2}}</div>\n                        </div>\n                    }\n                    @if (multiPreviewImages?.[imageIndex-2]) {\n                        <div class=\"dot\" (click)=\"setIndex(imageIndex-2)\">\n                            <div class=\"image-index\">{{imageIndex - 1}}</div>\n                        </div>\n                    }\n                    @if (multiPreviewImages?.[imageIndex-1]) {\n                        <div class=\"dot\" (click)=\"setIndex(imageIndex-1)\">\n                            <div class=\"image-index\">{{imageIndex}}</div>\n                        </div>\n                    }                    \n                    <div class=\"dot selected disabled\">\n                        <div class=\"image-index\">{{imageIndex + 1}}</div>\n                    </div>\n                    @if (multiPreviewImages?.[imageIndex+1]) {\n                        <div class=\"dot\" (click)=\"setIndex(imageIndex+1)\">\n                            <div class=\"image-index\">{{imageIndex + 2}}</div>\n                        </div>\n                    }\n                    @if (multiPreviewImages?.[imageIndex+2]) {\n                        <div class=\"dot\" (click)=\"setIndex(imageIndex+2)\">\n                            <div class=\"image-index\">{{imageIndex + 3}}</div>\n                        </div>\n                    }\n                    @if (multiPreviewImages?.[imageIndex+3] && imageIndex <= 1) {\n                        <div class=\"dot\" (click)=\"setIndex(imageIndex+3)\">\n                            <div class=\"image-index\">{{imageIndex + 4}}</div>\n                        </div>\n                    }\n                    @if (multiPreviewImages?.[imageIndex+4] && imageIndex === 0) {\n                        <div class=\"dot\" (click)=\"setIndex(imageIndex+4)\">\n                            <div class=\"image-index\">{{imageIndex + 5}}</div>\n                        </div>\n                    }\n                    <fa-icon class=\"right-button\" [icon]=\"faAngleRight\" [class.disabled]=\"!multiPreviewImages || !multiPreviewImages.length || imageIndex === (multiPreviewImages.length - 1)\" (click)=\"next()\"></fa-icon>\n                </div>\n            }\n            @else {\n                <div class=\"image-preview\">\n                    <img class=\"mat-elevation-z2\" [src]=\"singlePreviewImage ?? metadata.previewPlaceholderUrl ?? placeHolder\">\n                </div>\n            }\n        }\n    </div>\n}", styles: [".file-input{margin-top:15px;margin-bottom:15px;padding:15px;border-radius:5px}.image-preview{height:250px;display:flex;align-items:center;padding-top:15px;padding-bottom:15px}.image-preview img{max-width:100%;max-height:100%;margin-left:auto;margin-right:auto;border-radius:3px}.preview-nav{display:flex;align-items:center;justify-content:center;column-gap:5px}.preview-nav .left-button,.preview-nav .right-button{font-size:30px;color:#00000061}.preview-nav .left-button:hover,.preview-nav .right-button:hover{color:#0000008a;cursor:pointer;transition:all .3s ease}.preview-nav .left-button.disabled,.preview-nav .right-button.disabled{color:#00000042}.preview-nav .left-button.disabled:hover,.preview-nav .right-button.disabled:hover{color:#00000042;transition:none;cursor:default}.preview-nav .dot{display:flex;align-items:center;justify-content:center;height:30px;width:30px;min-width:30px;background-color:#00000061;border-radius:50%}.preview-nav .dot .image-index{color:#fff;font-size:24px;font-weight:600}.preview-nav .dot.selected{background-color:#0000008a}.preview-nav .dot:hover{background-color:#0000008a;cursor:pointer;transition:all .3s ease}.preview-nav .dot.disabled:hover{cursor:default}\n"] }]
         }], ctorParameters: () => [{ type: i2$1.HttpClient }] });
 
 /* eslint-disable jsdoc/require-jsdoc */
 class NumberDropdownInputComponent extends NgxMatEntityBaseInputComponent {
     injector;
+    faSearch = faSearch;
     dropdownValues = [];
     filteredDropdownValues = [];
     get currentDropdownValue() {
@@ -5049,26 +5119,27 @@ class NumberDropdownInputComponent extends NgxMatEntityBaseInputComponent {
             return option.displayName.toLowerCase().includes(filter) || `${option.value}`.toLowerCase().includes(filter);
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NumberDropdownInputComponent, deps: [{ token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0", type: NumberDropdownInputComponent, isStandalone: true, selector: "number-dropdown-input", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-select #model=\"ngModel\"\n        [name]=\"name\"\n        [required]=\"metadata.required(entity)\"\n        [disabled]=\"isReadOnly\"\n        [(ngModel)]=\"propertyValue\"\n        (selectionChange)=\"emitChange()\"\n        (opened)=\"selectSearchInput.focus()\"\n    >\n        <mat-form-field class=\"select-search-input\">\n            <!-- eslint-disable-next-line angular/no-any -->\n            <input #selectSearchInput matInput (keyup)=\"filterDropdownValues($any($event.target).value)\">\n            <i matSuffix class=\"fas fa-search\"></i>\n        </mat-form-field>\n        @if (!metadata.required(entity)) {\n            <mat-option>-</mat-option>\n        }\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(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}::ng-deep .mat-mdc-form-field-has-icon-suffix .mat-mdc-text-field-wrapper{padding-right:16px}::ng-deep .select-search-input{max-width:100%;margin-top:-8px;margin-bottom:8px}::ng-deep .select-search-input .mat-mdc-form-field-subscript-wrapper{display:none}\n"], dependencies: [{ kind: "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.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: 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: CommonModule }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: NumberDropdownInputComponent, deps: [{ token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.7", type: NumberDropdownInputComponent, isStandalone: true, selector: "number-dropdown-input", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-select #model=\"ngModel\"\n        [name]=\"name\"\n        [required]=\"metadata.required(entity)\"\n        [disabled]=\"isReadOnly\"\n        [(ngModel)]=\"propertyValue\"\n        (selectionChange)=\"emitChange()\"\n        (opened)=\"selectSearchInput.focus()\"\n    >\n        <mat-form-field class=\"select-search-input\">\n            <!-- eslint-disable-next-line angular/no-any -->\n            <input #selectSearchInput matInput (keyup)=\"filterDropdownValues($any($event.target).value)\">\n            <fa-icon matSuffix [icon]=\"faSearch\"></fa-icon>\n        </mat-form-field>\n        @if (!metadata.required(entity)) {\n            <mat-option>-</mat-option>\n        }\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(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}::ng-deep .mat-mdc-form-field-has-icon-suffix .mat-mdc-text-field-wrapper{padding-right:16px}::ng-deep .select-search-input{max-width:100%;margin-top:-8px;margin-bottom:8px}::ng-deep .select-search-input .mat-mdc-form-field-subscript-wrapper{display:none}\n"], dependencies: [{ kind: "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.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: 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: CommonModule }, { 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.0", ngImport: i0, type: NumberDropdownInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: NumberDropdownInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'number-dropdown-input', standalone: true, imports: [
                         MatFormFieldModule,
                         MatSelectModule,
                         FormsModule,
                         MatInputModule,
-                        CommonModule
-                    ], template: "<!-- eslint-disable angular/no-call-expression -->\n<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-select #model=\"ngModel\"\n        [name]=\"name\"\n        [required]=\"metadata.required(entity)\"\n        [disabled]=\"isReadOnly\"\n        [(ngModel)]=\"propertyValue\"\n        (selectionChange)=\"emitChange()\"\n        (opened)=\"selectSearchInput.focus()\"\n    >\n        <mat-form-field class=\"select-search-input\">\n            <!-- eslint-disable-next-line angular/no-any -->\n            <input #selectSearchInput matInput (keyup)=\"filterDropdownValues($any($event.target).value)\">\n            <i matSuffix class=\"fas fa-search\"></i>\n        </mat-form-field>\n        @if (!metadata.required(entity)) {\n            <mat-option>-</mat-option>\n        }\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(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}::ng-deep .mat-mdc-form-field-has-icon-suffix .mat-mdc-text-field-wrapper{padding-right:16px}::ng-deep .select-search-input{max-width:100%;margin-top:-8px;margin-bottom:8px}::ng-deep .select-search-input .mat-mdc-form-field-subscript-wrapper{display:none}\n"] }]
+                        CommonModule,
+                        FaIconComponent
+                    ], template: "<!-- eslint-disable angular/no-call-expression -->\n<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-select #model=\"ngModel\"\n        [name]=\"name\"\n        [required]=\"metadata.required(entity)\"\n        [disabled]=\"isReadOnly\"\n        [(ngModel)]=\"propertyValue\"\n        (selectionChange)=\"emitChange()\"\n        (opened)=\"selectSearchInput.focus()\"\n    >\n        <mat-form-field class=\"select-search-input\">\n            <!-- eslint-disable-next-line angular/no-any -->\n            <input #selectSearchInput matInput (keyup)=\"filterDropdownValues($any($event.target).value)\">\n            <fa-icon matSuffix [icon]=\"faSearch\"></fa-icon>\n        </mat-form-field>\n        @if (!metadata.required(entity)) {\n            <mat-option>-</mat-option>\n        }\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(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}::ng-deep .mat-mdc-form-field-has-icon-suffix .mat-mdc-text-field-wrapper{padding-right:16px}::ng-deep .select-search-input{max-width:100%;margin-top:-8px;margin-bottom:8px}::ng-deep .select-search-input .mat-mdc-form-field-subscript-wrapper{display:none}\n"] }]
         }], ctorParameters: () => [{ type: i0.EnvironmentInjector }] });
 
 /* eslint-disable jsdoc/require-jsdoc */
 class NumberInputComponent extends NgxMatEntityBaseInputComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NumberInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0", type: NumberInputComponent, isStandalone: true, selector: "number-input", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <input\n        #model=\"ngModel\"\n        matInput\n        type=\"number\"\n        number\n        [name]=\"name\"\n        [required]=\"metadata.required(entity)\"\n        [min]=\"metadata.min ?? null\"\n        [max]=\"metadata.max ?? null\"\n        [disabled]=\"isReadOnly\"\n        [(ngModel)]=\"propertyValue\"\n        (ngModelChange)=\"emitChange()\"\n    >\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{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: "ngmodule", type: MatFormFieldModule }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: NumberInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: NumberInputComponent, isStandalone: true, selector: "number-input", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <input\n        #model=\"ngModel\"\n        matInput\n        type=\"number\"\n        number\n        [name]=\"name\"\n        [required]=\"metadata.required(entity)\"\n        [min]=\"metadata.min ?? null\"\n        [max]=\"metadata.max ?? null\"\n        [disabled]=\"isReadOnly\"\n        [(ngModel)]=\"propertyValue\"\n        (ngModelChange)=\"emitChange()\"\n    >\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{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: "ngmodule", type: MatFormFieldModule }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NumberInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: NumberInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'number-input', standalone: true, imports: [
                         MatInputModule,
@@ -5082,16 +5153,16 @@ class NumberSliderInputComponent extends NgxMatEntityBaseInputComponent {
     updatePropertyValue(value) {
         this.propertyValue = value;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NumberSliderInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0", type: NumberSliderInputComponent, isStandalone: true, selector: "number-slider-input", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<mat-slider\n    id=\"slider\"\n    color=\"primary\"\n    [min]=\"metadata.min ?? null\"\n    [max]=\"metadata.max ?? null\"\n    [step]=\"metadata.step\"\n    [discrete]=\"true\"\n    [displayWith]=\"metadata.formatThumbLabelValue\"\n    [showTickMarks]=\"metadata.showTickMarks\"\n    [disabled]=\"isReadOnly\"\n    (click)=\"model.control.markAsTouched()\"\n>\n    <input matSliderThumb\n        [disabled]=\"isReadOnly\"\n        (valueChange)=\"updatePropertyValue($event)\"\n    >\n</mat-slider>\n\n<mat-form-field floatLabel=\"always\">\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <!-- hidden input is needed so that the slider can be used inside a mat-form-field -->\n    <input #model=\"ngModel\" matInput\n        style=\"opacity: 0%;\"\n        [name]=\"name\"\n        [required]=\"metadata.required(entity)\"\n        [min]=\"metadata.min ?? null\"\n        [max]=\"metadata.max ?? null\"\n        [disabled]=\"isReadOnly\"\n        [(ngModel)]=\"propertyValue\"\n        (ngModelChange)=\"emitChange()\"\n    >\n    \n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%;margin-top:-40px}mat-slider{width:calc(100% - 40px);margin-left:20px;margin-right:20px;margin-bottom:-40px;z-index:999}::ng-deep #slider .mdc-slider__value-indicator-container{top:23px;left:57px;display:flex;transform:rotate(90deg) scale(1);border-radius:50%;pointer-events:auto}::ng-deep #slider .mdc-slider__value-indicator{padding-right:5px;padding-left:5px;transition:transform .1s 0ms cubic-bezier(0,0,.2,1);transform:scale(1)}::ng-deep #slider .mdc-slider__value-indicator-text{transform:rotate(270deg)}\n"], dependencies: [{ kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i1$2.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i1$2.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { 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: "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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: NumberSliderInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: NumberSliderInputComponent, isStandalone: true, selector: "number-slider-input", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<mat-slider\n    id=\"slider\"\n    color=\"primary\"\n    [min]=\"metadata.min ?? null\"\n    [max]=\"metadata.max ?? null\"\n    [step]=\"metadata.step\"\n    [discrete]=\"true\"\n    [displayWith]=\"metadata.formatThumbLabelValue\"\n    [showTickMarks]=\"metadata.showTickMarks\"\n    [disabled]=\"isReadOnly\"\n    (click)=\"model.control.markAsTouched()\"\n>\n    <input matSliderThumb\n        [disabled]=\"isReadOnly\"\n        (valueChange)=\"updatePropertyValue($event)\"\n    >\n</mat-slider>\n\n<mat-form-field floatLabel=\"always\">\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <!-- hidden input is needed so that the slider can be used inside a mat-form-field -->\n    <input #model=\"ngModel\" matInput\n        style=\"opacity: 0%;\"\n        [name]=\"name\"\n        [required]=\"metadata.required(entity)\"\n        [min]=\"metadata.min ?? null\"\n        [max]=\"metadata.max ?? null\"\n        [disabled]=\"isReadOnly\"\n        [(ngModel)]=\"propertyValue\"\n        (ngModelChange)=\"emitChange()\"\n    >\n    \n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%;margin-top:-20px}mat-slider{width:calc(100% - 40px);margin-left:20px;margin-right:20px;margin-bottom:-40px;z-index:999}::ng-deep #slider .mdc-slider__value-indicator-container{top:23px;left:57px;display:flex;transform:rotate(90deg) scale(1);border-radius:50%;pointer-events:auto}::ng-deep #slider .mdc-slider__value-indicator{padding-right:5px;padding-left:5px;transition:transform .1s 0ms cubic-bezier(0,0,.2,1);transform:scale(1)}::ng-deep #slider .mdc-slider__value-indicator-text{transform:rotate(270deg)}\n"], dependencies: [{ kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i1$2.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i1$2.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { 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: "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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NumberSliderInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: NumberSliderInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'number-slider-input', standalone: true, imports: [
                         MatSliderModule,
                         MatInputModule,
                         FormsModule
-                    ], template: "<!-- eslint-disable angular/no-call-expression -->\n<mat-slider\n    id=\"slider\"\n    color=\"primary\"\n    [min]=\"metadata.min ?? null\"\n    [max]=\"metadata.max ?? null\"\n    [step]=\"metadata.step\"\n    [discrete]=\"true\"\n    [displayWith]=\"metadata.formatThumbLabelValue\"\n    [showTickMarks]=\"metadata.showTickMarks\"\n    [disabled]=\"isReadOnly\"\n    (click)=\"model.control.markAsTouched()\"\n>\n    <input matSliderThumb\n        [disabled]=\"isReadOnly\"\n        (valueChange)=\"updatePropertyValue($event)\"\n    >\n</mat-slider>\n\n<mat-form-field floatLabel=\"always\">\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <!-- hidden input is needed so that the slider can be used inside a mat-form-field -->\n    <input #model=\"ngModel\" matInput\n        style=\"opacity: 0%;\"\n        [name]=\"name\"\n        [required]=\"metadata.required(entity)\"\n        [min]=\"metadata.min ?? null\"\n        [max]=\"metadata.max ?? null\"\n        [disabled]=\"isReadOnly\"\n        [(ngModel)]=\"propertyValue\"\n        (ngModelChange)=\"emitChange()\"\n    >\n    \n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%;margin-top:-40px}mat-slider{width:calc(100% - 40px);margin-left:20px;margin-right:20px;margin-bottom:-40px;z-index:999}::ng-deep #slider .mdc-slider__value-indicator-container{top:23px;left:57px;display:flex;transform:rotate(90deg) scale(1);border-radius:50%;pointer-events:auto}::ng-deep #slider .mdc-slider__value-indicator{padding-right:5px;padding-left:5px;transition:transform .1s 0ms cubic-bezier(0,0,.2,1);transform:scale(1)}::ng-deep #slider .mdc-slider__value-indicator-text{transform:rotate(270deg)}\n"] }]
+                    ], template: "<!-- eslint-disable angular/no-call-expression -->\n<mat-slider\n    id=\"slider\"\n    color=\"primary\"\n    [min]=\"metadata.min ?? null\"\n    [max]=\"metadata.max ?? null\"\n    [step]=\"metadata.step\"\n    [discrete]=\"true\"\n    [displayWith]=\"metadata.formatThumbLabelValue\"\n    [showTickMarks]=\"metadata.showTickMarks\"\n    [disabled]=\"isReadOnly\"\n    (click)=\"model.control.markAsTouched()\"\n>\n    <input matSliderThumb\n        [disabled]=\"isReadOnly\"\n        (valueChange)=\"updatePropertyValue($event)\"\n    >\n</mat-slider>\n\n<mat-form-field floatLabel=\"always\">\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <!-- hidden input is needed so that the slider can be used inside a mat-form-field -->\n    <input #model=\"ngModel\" matInput\n        style=\"opacity: 0%;\"\n        [name]=\"name\"\n        [required]=\"metadata.required(entity)\"\n        [min]=\"metadata.min ?? null\"\n        [max]=\"metadata.max ?? null\"\n        [disabled]=\"isReadOnly\"\n        [(ngModel)]=\"propertyValue\"\n        (ngModelChange)=\"emitChange()\"\n    >\n    \n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%;margin-top:-20px}mat-slider{width:calc(100% - 40px);margin-left:20px;margin-right:20px;margin-bottom:-40px;z-index:999}::ng-deep #slider .mdc-slider__value-indicator-container{top:23px;left:57px;display:flex;transform:rotate(90deg) scale(1);border-radius:50%;pointer-events:auto}::ng-deep #slider .mdc-slider__value-indicator{padding-right:5px;padding-left:5px;transition:transform .1s 0ms cubic-bezier(0,0,.2,1);transform:scale(1)}::ng-deep #slider .mdc-slider__value-indicator-text{transform:rotate(270deg)}\n"] }]
         }] });
 
 /**
@@ -5150,6 +5221,7 @@ function defaultGetEntityForId(entityId, allReferencedEntities) {
 class ReferencesManyInputComponent extends NgxMatEntityBaseInputComponent {
     injector;
     globalConfig;
+    faSearch = faSearch;
     allReferencedEntities = [];
     allDropdownValues = [];
     dropdownValues = [];
@@ -5247,10 +5319,10 @@ class ReferencesManyInputComponent extends NgxMatEntityBaseInputComponent {
         this.input = '';
         this.emitChange();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", 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.0", 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                <i matSuffix class=\"fas fa-search\"></i>\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"] }] });
+    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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: ReferencesManyInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: ReferencesManyInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'references-many-input', standalone: true, imports: [
                         MatInputModule,
@@ -5259,8 +5331,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImpor
                         FormsModule,
                         CommonModule,
                         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\n    <mat-form-field>\n        <mat-label>{{metadata.dropdownLabel}}</mat-label>\n        <mat-select #inputModel=\"ngModel\" [name]=\"name + 'input'\" [disabled]=\"isReadOnly\" [(ngModel)]=\"input\" (opened)=\"selectSearchInput.focus()\">\n            <mat-form-field class=\"select-search-input\">\n                <!-- eslint-disable-next-line angular/no-any -->\n                <input #selectSearchInput matInput (keyup)=\"filterDropdownValues($any($event.target).value)\">\n                <i matSuffix class=\"fas fa-search\"></i>\n            </mat-form-field>\n            <mat-option>-</mat-option>\n            @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"] }]
+                        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"] }]
         }], ctorParameters: () => [{ type: i0.EnvironmentInjector }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [NGX_COMPLETE_GLOBAL_DEFAULT_VALUES]
@@ -5292,10 +5365,10 @@ class StringAutocompleteInputComponent extends NgxMatEntityBaseInputComponent {
             this.filteredAutocompleteStrings = LodashUtilities.cloneDeep(this.autocompleteStrings);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: StringAutocompleteInputComponent, deps: [{ token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0", type: StringAutocompleteInputComponent, isStandalone: true, selector: "string-autocomplete-input", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n@if (autocompleteStrings.length) {\n    <mat-form-field>\n        <mat-label>{{metadata.displayName}}</mat-label>\n        <input\n            #model=\"ngModel\"\n            matInput\n            [name]=\"name\"\n            [matAutocomplete]=\"auto\"\n            [required]=\"metadata.required(entity)\"\n            [minlength]=\"metadata.minLength ?? null\"\n            [maxlength]=\"metadata.maxLength ?? null\"\n            [pattern]=\"metadata.regex ?? '[\\\\s\\\\S]*'\"\n            [disabled]=\"isReadOnly\"\n            [includedIn]=\"metadata.restrictToOptions ? autocompleteStrings : undefined\"\n            [(ngModel)]=\"propertyValue\"\n            (keyup)=\"filterAutocompleteStrings(propertyValue)\"\n            (ngModelChange)=\"emitChange()\"\n        >\n        <mat-autocomplete #auto=\"matAutocomplete\">\n            @for (value of filteredAutocompleteStrings; track $index) {\n                <mat-option [value]=\"value\">{{value}}</mat-option>\n            }\n        </mat-autocomplete>\n        <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n    </mat-form-field>\n}", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ 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: "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: MatAutocompleteModule }, { kind: "component", type: i4$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { 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.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IncludedInValidatorDirective, selector: "[includedIn]", inputs: ["includedIn"] }, { kind: "ngmodule", type: CommonModule }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: StringAutocompleteInputComponent, deps: [{ token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.7", type: StringAutocompleteInputComponent, isStandalone: true, selector: "string-autocomplete-input", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n@if (autocompleteStrings.length) {\n    <mat-form-field>\n        <mat-label>{{metadata.displayName}}</mat-label>\n        <input\n            #model=\"ngModel\"\n            matInput\n            [name]=\"name\"\n            [matAutocomplete]=\"auto\"\n            [required]=\"metadata.required(entity)\"\n            [minlength]=\"metadata.minLength ?? null\"\n            [maxlength]=\"metadata.maxLength ?? null\"\n            [pattern]=\"metadata.regex ?? '[\\\\s\\\\S]*'\"\n            [disabled]=\"isReadOnly\"\n            [includedIn]=\"metadata.restrictToOptions ? autocompleteStrings : undefined\"\n            [(ngModel)]=\"propertyValue\"\n            (keyup)=\"filterAutocompleteStrings(propertyValue)\"\n            (ngModelChange)=\"emitChange()\"\n        >\n        <mat-autocomplete #auto=\"matAutocomplete\">\n            @for (value of filteredAutocompleteStrings; track $index) {\n                <mat-option [value]=\"value\">{{value}}</mat-option>\n            }\n        </mat-autocomplete>\n        <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n    </mat-form-field>\n}", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ 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: "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: MatAutocompleteModule }, { kind: "component", type: i4$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { 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.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IncludedInValidatorDirective, selector: "[includedIn]", inputs: ["includedIn"] }, { kind: "ngmodule", type: CommonModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: StringAutocompleteInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: StringAutocompleteInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'string-autocomplete-input', standalone: true, imports: [
                         MatFormFieldModule,
@@ -5310,6 +5383,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImpor
 /* eslint-disable jsdoc/require-jsdoc */
 class StringDropdownInputComponent extends NgxMatEntityBaseInputComponent {
     injector;
+    faSearch = faSearch;
     dropdownValues = [];
     filteredDropdownValues = [];
     get currentDropdownValue() {
@@ -5340,26 +5414,27 @@ class StringDropdownInputComponent extends NgxMatEntityBaseInputComponent {
             return option.displayName.toLowerCase().includes(filter) || option.value?.toLowerCase().includes(filter);
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: StringDropdownInputComponent, deps: [{ token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0", type: StringDropdownInputComponent, isStandalone: true, selector: "string-dropdown-input", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-select #model=\"ngModel\"\n        [name]=\"name\"\n        [required]=\"metadata.required(entity)\"\n        [disabled]=\"isReadOnly\"\n        [(ngModel)]=\"propertyValue\"\n        (selectionChange)=\"emitChange()\"\n        (opened)=\"selectSearchInput.focus()\"\n    >\n        <mat-form-field class=\"select-search-input\">\n            <!-- eslint-disable-next-line angular/no-any -->\n            <input #selectSearchInput matInput (keyup)=\"filterDropdownValues($any($event.target).value)\">\n            <i matSuffix class=\"fas fa-search\"></i>\n        </mat-form-field>\n        @if (!metadata.required(entity)) {\n            <mat-option>-</mat-option>\n        }\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(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}::ng-deep .mat-mdc-form-field-has-icon-suffix .mat-mdc-text-field-wrapper{padding-right:16px}::ng-deep .select-search-input{max-width:100%;margin-top:-8px;margin-bottom:8px}::ng-deep .select-search-input .mat-mdc-form-field-subscript-wrapper{display:none}\n"], dependencies: [{ kind: "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.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: CommonModule }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: StringDropdownInputComponent, deps: [{ token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.7", type: StringDropdownInputComponent, isStandalone: true, selector: "string-dropdown-input", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-select #model=\"ngModel\"\n        [name]=\"name\"\n        [required]=\"metadata.required(entity)\"\n        [disabled]=\"isReadOnly\"\n        [(ngModel)]=\"propertyValue\"\n        (selectionChange)=\"emitChange()\"\n        (opened)=\"selectSearchInput.focus()\"\n    >\n        <mat-form-field class=\"select-search-input\">\n            <!-- eslint-disable-next-line angular/no-any -->\n            <input #selectSearchInput matInput (keyup)=\"filterDropdownValues($any($event.target).value)\">\n            <fa-icon matSuffix [icon]=\"faSearch\"></fa-icon>\n        </mat-form-field>\n        @if (!metadata.required(entity)) {\n            <mat-option>-</mat-option>\n        }\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(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}::ng-deep .mat-mdc-form-field-has-icon-suffix .mat-mdc-text-field-wrapper{padding-right:16px}::ng-deep .select-search-input{max-width:100%;margin-top:-8px;margin-bottom:8px}::ng-deep .select-search-input .mat-mdc-form-field-subscript-wrapper{display:none}\n"], dependencies: [{ kind: "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.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: CommonModule }, { 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.0", ngImport: i0, type: StringDropdownInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: StringDropdownInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'string-dropdown-input', standalone: true, imports: [
                         MatInputModule,
                         MatFormFieldModule,
                         MatSelectModule,
                         FormsModule,
-                        CommonModule
-                    ], template: "<!-- eslint-disable angular/no-call-expression -->\n<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-select #model=\"ngModel\"\n        [name]=\"name\"\n        [required]=\"metadata.required(entity)\"\n        [disabled]=\"isReadOnly\"\n        [(ngModel)]=\"propertyValue\"\n        (selectionChange)=\"emitChange()\"\n        (opened)=\"selectSearchInput.focus()\"\n    >\n        <mat-form-field class=\"select-search-input\">\n            <!-- eslint-disable-next-line angular/no-any -->\n            <input #selectSearchInput matInput (keyup)=\"filterDropdownValues($any($event.target).value)\">\n            <i matSuffix class=\"fas fa-search\"></i>\n        </mat-form-field>\n        @if (!metadata.required(entity)) {\n            <mat-option>-</mat-option>\n        }\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(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}::ng-deep .mat-mdc-form-field-has-icon-suffix .mat-mdc-text-field-wrapper{padding-right:16px}::ng-deep .select-search-input{max-width:100%;margin-top:-8px;margin-bottom:8px}::ng-deep .select-search-input .mat-mdc-form-field-subscript-wrapper{display:none}\n"] }]
+                        CommonModule,
+                        FaIconComponent
+                    ], template: "<!-- eslint-disable angular/no-call-expression -->\n<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <mat-select #model=\"ngModel\"\n        [name]=\"name\"\n        [required]=\"metadata.required(entity)\"\n        [disabled]=\"isReadOnly\"\n        [(ngModel)]=\"propertyValue\"\n        (selectionChange)=\"emitChange()\"\n        (opened)=\"selectSearchInput.focus()\"\n    >\n        <mat-form-field class=\"select-search-input\">\n            <!-- eslint-disable-next-line angular/no-any -->\n            <input #selectSearchInput matInput (keyup)=\"filterDropdownValues($any($event.target).value)\">\n            <fa-icon matSuffix [icon]=\"faSearch\"></fa-icon>\n        </mat-form-field>\n        @if (!metadata.required(entity)) {\n            <mat-option>-</mat-option>\n        }\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(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}::ng-deep .mat-mdc-form-field-has-icon-suffix .mat-mdc-text-field-wrapper{padding-right:16px}::ng-deep .select-search-input{max-width:100%;margin-top:-8px;margin-bottom:8px}::ng-deep .select-search-input .mat-mdc-form-field-subscript-wrapper{display:none}\n"] }]
         }], ctorParameters: () => [{ type: i0.EnvironmentInjector }] });
 
 /* eslint-disable jsdoc/require-jsdoc */
 class StringInputComponent extends NgxMatEntityBaseInputComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: StringInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0", type: StringInputComponent, isStandalone: true, selector: "string-input", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <input\n        #model=\"ngModel\"\n        matInput\n        [name]=\"name\"\n        [required]=\"metadata.required(entity)\"\n        [pattern]=\"metadata.regex ?? '[\\\\s\\\\S]*'\"\n        [minlength]=\"metadata.minLength ?? null\"\n        [maxlength]=\"metadata.maxLength ?? null\"\n        [disabled]=\"isReadOnly\"\n        [(ngModel)]=\"propertyValue\"\n        (ngModelChange)=\"emitChange()\"\n    >\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ 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: "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.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: StringInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: StringInputComponent, isStandalone: true, selector: "string-input", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <input\n        #model=\"ngModel\"\n        matInput\n        [name]=\"name\"\n        [required]=\"metadata.required(entity)\"\n        [pattern]=\"metadata.regex ?? '[\\\\s\\\\S]*'\"\n        [minlength]=\"metadata.minLength ?? null\"\n        [maxlength]=\"metadata.maxLength ?? null\"\n        [disabled]=\"isReadOnly\"\n        [(ngModel)]=\"propertyValue\"\n        (ngModelChange)=\"emitChange()\"\n    >\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ 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: "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.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: StringInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: StringInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'string-input', standalone: true, imports: [
                         MatFormFieldModule,
@@ -5381,10 +5456,10 @@ class PasswordMatchValidatorDirective {
         // eslint-disable-next-line typescript/no-unsafe-assignment, unicorn/no-null
         return this.passwordMatch == control.value ? null : { passwordMatch: { value: control.value } };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: PasswordMatchValidatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0", type: PasswordMatchValidatorDirective, isStandalone: true, selector: "[passwordMatch]", inputs: { passwordMatch: "passwordMatch" }, providers: [{ provide: NG_VALIDATORS, useExisting: PasswordMatchValidatorDirective, multi: true }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: PasswordMatchValidatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.7", type: PasswordMatchValidatorDirective, isStandalone: true, selector: "[passwordMatch]", inputs: { passwordMatch: "passwordMatch" }, providers: [{ provide: NG_VALIDATORS, useExisting: PasswordMatchValidatorDirective, multi: true }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: PasswordMatchValidatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: PasswordMatchValidatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[passwordMatch]',
@@ -5403,6 +5478,8 @@ var PasswordStrength;
     PasswordStrength["STRONG"] = "strong";
 })(PasswordStrength || (PasswordStrength = {}));
 class StringPasswordInputComponent extends NgxMatEntityBaseInputComponent {
+    faEye = faEye;
+    faEyeSlash = faEyeSlash;
     hide = true;
     hideConfirm = true;
     confirmRequired = false;
@@ -5466,10 +5543,10 @@ class StringPasswordInputComponent extends NgxMatEntityBaseInputComponent {
             && /\d/g.test(this.propertyValue)
             && /[!"#$%&()*,.:<>?@^{|}]/.test(this.propertyValue);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: StringPasswordInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0", type: StringPasswordInputComponent, isStandalone: true, selector: "string-password-input", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<div class=\"password-row\">\n    <mat-form-field>\n        <mat-label>{{metadata.displayName}}</mat-label>\n        <input\n            #model=\"ngModel\"\n            matInput\n            [type]=\"hide ? 'password' : 'text'\"\n            [name]=\"name\"\n            [required]=\"metadata.required(entity)\"\n            [pattern]=\"metadata.regex ?? '[\\\\s\\\\S]*'\"\n            [minlength]=\"metadata.minLength ?? null\"\n            [maxlength]=\"metadata.maxLength ?? null\"\n            [disabled]=\"isReadOnly\"\n            [(ngModel)]=\"propertyValue\"\n            (ngModelChange)=\"passwordInput()\"\n        >\n        <button type=\"button\" mat-icon-button matSuffix (click)=\"hide = !hide\">\n            <div class=\"d-flex justify-content-center align-items-center\">\n                <i class=\"fas\" [class.fa-eye-slash]=\"hide\" [class.fa-eye]=\"!hide\"></i>\n            </div>\n        </button>\n        <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n        @if (passwordStrength) {\n            <div class=\"password-strength-indicator\"\n                [class.green]=\"passwordStrength === PasswordStrength.STRONG\"\n                [class.yellow]=\"passwordStrength === PasswordStrength.MEDIUM\"\n                [class.red]=\"passwordStrength === PasswordStrength.WEAK\"\n            >\n            </div>\n        }\n    </mat-form-field>\n    @if (metadata.needsConfirmation) {\n        <mat-form-field>\n            <mat-label>{{metadata.confirmationDisplayName}}</mat-label>\n            <input\n                #confirmModel=\"ngModel\"\n                matInput\n                [type]=\"hideConfirm ? 'password' : 'text'\"\n                [name]=\"name + 'confirmPassword'\"\n                [required]=\"confirmRequired\"\n                [disabled]=\"isReadOnly\"\n                [passwordMatch]=\"propertyValue\"\n                [(ngModel)]=\"confirmPassword\"\n                (ngModelChange)=\"passwordInput()\"\n            >\n            <button type=\"button\" mat-icon-button matSuffix (click)=\"hideConfirm = !hideConfirm\">\n                <div class=\"d-flex justify-content-center align-items-center\">\n                    <i class=\"fas\" [class.fa-eye-slash]=\"hideConfirm\" [class.fa-eye]=\"!hideConfirm\"></i>\n                </div>\n            </button>\n            <mat-error>{{getValidationErrorMessage(confirmModel)}}</mat-error>\n        </mat-form-field>\n    }\n</div>", styles: [".password-row{display:flex;justify-content:space-evenly;column-gap:24px}.password-row mat-form-field{flex:1 1 0}.password-strength-indicator{height:5px;width:100%}.green{background-color:green}.yellow{background-color:#b3b30f}.red{background-color:red}@media (max-width: 767px){.password-row{flex-wrap:wrap}.password-row mat-form-field{min-width:100%}}\n"], dependencies: [{ 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.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: PasswordMatchValidatorDirective, selector: "[passwordMatch]", inputs: ["passwordMatch"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: StringPasswordInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.7", type: StringPasswordInputComponent, isStandalone: true, selector: "string-password-input", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<div class=\"password-row\">\n    <mat-form-field>\n        <mat-label>{{metadata.displayName}}</mat-label>\n        <input\n            #model=\"ngModel\"\n            matInput\n            [type]=\"hide ? 'password' : 'text'\"\n            [name]=\"name\"\n            [required]=\"metadata.required(entity)\"\n            [pattern]=\"metadata.regex ?? '[\\\\s\\\\S]*'\"\n            [minlength]=\"metadata.minLength ?? null\"\n            [maxlength]=\"metadata.maxLength ?? null\"\n            [disabled]=\"isReadOnly\"\n            [(ngModel)]=\"propertyValue\"\n            (ngModelChange)=\"passwordInput()\"\n        >\n        <button type=\"button\" mat-icon-button matSuffix (click)=\"hide = !hide\">\n            <div style=\"display: flex; justify-content: center; align-items: center;\">\n                <fa-icon [icon]=\"hide ? faEyeSlash : faEye\"></fa-icon>\n            </div>\n        </button>\n        <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n        @if (passwordStrength) {\n            <div class=\"password-strength-indicator\"\n                [class.green]=\"passwordStrength === PasswordStrength.STRONG\"\n                [class.yellow]=\"passwordStrength === PasswordStrength.MEDIUM\"\n                [class.red]=\"passwordStrength === PasswordStrength.WEAK\"\n            >\n            </div>\n        }\n    </mat-form-field>\n    @if (metadata.needsConfirmation) {\n        <mat-form-field>\n            <mat-label>{{metadata.confirmationDisplayName}}</mat-label>\n            <input\n                #confirmModel=\"ngModel\"\n                matInput\n                [type]=\"hideConfirm ? 'password' : 'text'\"\n                [name]=\"name + 'confirmPassword'\"\n                [required]=\"confirmRequired\"\n                [disabled]=\"isReadOnly\"\n                [passwordMatch]=\"propertyValue\"\n                [(ngModel)]=\"confirmPassword\"\n                (ngModelChange)=\"passwordInput()\"\n            >\n            <button type=\"button\" mat-icon-button matSuffix (click)=\"hideConfirm = !hideConfirm\">\n                <div style=\"display: flex; justify-content: center; align-items: center;\">\n                    <fa-icon [icon]=\"hideConfirm ? faEyeSlash : faEye\"></fa-icon>\n                </div>\n            </button>\n            <mat-error>{{getValidationErrorMessage(confirmModel)}}</mat-error>\n        </mat-form-field>\n    }\n</div>", styles: [".password-row{display:flex;justify-content:space-evenly;column-gap:24px}.password-row mat-form-field{flex:1 1 0}.password-strength-indicator{height:5px;width:100%}.green{background-color:green}.yellow{background-color:#b3b30f}.red{background-color:red}@media (max-width: 767px){.password-row{flex-wrap:wrap}.password-row mat-form-field{min-width:100%}}\n"], dependencies: [{ 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.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: PasswordMatchValidatorDirective, selector: "[passwordMatch]", inputs: ["passwordMatch"] }, { 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.0", ngImport: i0, type: StringPasswordInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: StringPasswordInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'string-password-input', standalone: true, imports: [
                         MatFormFieldModule,
@@ -5477,16 +5554,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImpor
                         MatInputModule,
                         CommonModule,
                         MatButtonModule,
-                        PasswordMatchValidatorDirective
-                    ], template: "<!-- eslint-disable angular/no-call-expression -->\n<div class=\"password-row\">\n    <mat-form-field>\n        <mat-label>{{metadata.displayName}}</mat-label>\n        <input\n            #model=\"ngModel\"\n            matInput\n            [type]=\"hide ? 'password' : 'text'\"\n            [name]=\"name\"\n            [required]=\"metadata.required(entity)\"\n            [pattern]=\"metadata.regex ?? '[\\\\s\\\\S]*'\"\n            [minlength]=\"metadata.minLength ?? null\"\n            [maxlength]=\"metadata.maxLength ?? null\"\n            [disabled]=\"isReadOnly\"\n            [(ngModel)]=\"propertyValue\"\n            (ngModelChange)=\"passwordInput()\"\n        >\n        <button type=\"button\" mat-icon-button matSuffix (click)=\"hide = !hide\">\n            <div class=\"d-flex justify-content-center align-items-center\">\n                <i class=\"fas\" [class.fa-eye-slash]=\"hide\" [class.fa-eye]=\"!hide\"></i>\n            </div>\n        </button>\n        <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n        @if (passwordStrength) {\n            <div class=\"password-strength-indicator\"\n                [class.green]=\"passwordStrength === PasswordStrength.STRONG\"\n                [class.yellow]=\"passwordStrength === PasswordStrength.MEDIUM\"\n                [class.red]=\"passwordStrength === PasswordStrength.WEAK\"\n            >\n            </div>\n        }\n    </mat-form-field>\n    @if (metadata.needsConfirmation) {\n        <mat-form-field>\n            <mat-label>{{metadata.confirmationDisplayName}}</mat-label>\n            <input\n                #confirmModel=\"ngModel\"\n                matInput\n                [type]=\"hideConfirm ? 'password' : 'text'\"\n                [name]=\"name + 'confirmPassword'\"\n                [required]=\"confirmRequired\"\n                [disabled]=\"isReadOnly\"\n                [passwordMatch]=\"propertyValue\"\n                [(ngModel)]=\"confirmPassword\"\n                (ngModelChange)=\"passwordInput()\"\n            >\n            <button type=\"button\" mat-icon-button matSuffix (click)=\"hideConfirm = !hideConfirm\">\n                <div class=\"d-flex justify-content-center align-items-center\">\n                    <i class=\"fas\" [class.fa-eye-slash]=\"hideConfirm\" [class.fa-eye]=\"!hideConfirm\"></i>\n                </div>\n            </button>\n            <mat-error>{{getValidationErrorMessage(confirmModel)}}</mat-error>\n        </mat-form-field>\n    }\n</div>", styles: [".password-row{display:flex;justify-content:space-evenly;column-gap:24px}.password-row mat-form-field{flex:1 1 0}.password-strength-indicator{height:5px;width:100%}.green{background-color:green}.yellow{background-color:#b3b30f}.red{background-color:red}@media (max-width: 767px){.password-row{flex-wrap:wrap}.password-row mat-form-field{min-width:100%}}\n"] }]
+                        PasswordMatchValidatorDirective,
+                        FaIconComponent
+                    ], template: "<!-- eslint-disable angular/no-call-expression -->\n<div class=\"password-row\">\n    <mat-form-field>\n        <mat-label>{{metadata.displayName}}</mat-label>\n        <input\n            #model=\"ngModel\"\n            matInput\n            [type]=\"hide ? 'password' : 'text'\"\n            [name]=\"name\"\n            [required]=\"metadata.required(entity)\"\n            [pattern]=\"metadata.regex ?? '[\\\\s\\\\S]*'\"\n            [minlength]=\"metadata.minLength ?? null\"\n            [maxlength]=\"metadata.maxLength ?? null\"\n            [disabled]=\"isReadOnly\"\n            [(ngModel)]=\"propertyValue\"\n            (ngModelChange)=\"passwordInput()\"\n        >\n        <button type=\"button\" mat-icon-button matSuffix (click)=\"hide = !hide\">\n            <div style=\"display: flex; justify-content: center; align-items: center;\">\n                <fa-icon [icon]=\"hide ? faEyeSlash : faEye\"></fa-icon>\n            </div>\n        </button>\n        <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n        @if (passwordStrength) {\n            <div class=\"password-strength-indicator\"\n                [class.green]=\"passwordStrength === PasswordStrength.STRONG\"\n                [class.yellow]=\"passwordStrength === PasswordStrength.MEDIUM\"\n                [class.red]=\"passwordStrength === PasswordStrength.WEAK\"\n            >\n            </div>\n        }\n    </mat-form-field>\n    @if (metadata.needsConfirmation) {\n        <mat-form-field>\n            <mat-label>{{metadata.confirmationDisplayName}}</mat-label>\n            <input\n                #confirmModel=\"ngModel\"\n                matInput\n                [type]=\"hideConfirm ? 'password' : 'text'\"\n                [name]=\"name + 'confirmPassword'\"\n                [required]=\"confirmRequired\"\n                [disabled]=\"isReadOnly\"\n                [passwordMatch]=\"propertyValue\"\n                [(ngModel)]=\"confirmPassword\"\n                (ngModelChange)=\"passwordInput()\"\n            >\n            <button type=\"button\" mat-icon-button matSuffix (click)=\"hideConfirm = !hideConfirm\">\n                <div style=\"display: flex; justify-content: center; align-items: center;\">\n                    <fa-icon [icon]=\"hideConfirm ? faEyeSlash : faEye\"></fa-icon>\n                </div>\n            </button>\n            <mat-error>{{getValidationErrorMessage(confirmModel)}}</mat-error>\n        </mat-form-field>\n    }\n</div>", styles: [".password-row{display:flex;justify-content:space-evenly;column-gap:24px}.password-row mat-form-field{flex:1 1 0}.password-strength-indicator{height:5px;width:100%}.green{background-color:green}.yellow{background-color:#b3b30f}.red{background-color:red}@media (max-width: 767px){.password-row{flex-wrap:wrap}.password-row mat-form-field{min-width:100%}}\n"] }]
         }] });
 
 /* eslint-disable jsdoc/require-jsdoc */
 class StringTextboxInputComponent extends NgxMatEntityBaseInputComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: StringTextboxInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0", type: StringTextboxInputComponent, isStandalone: true, selector: "string-textbox-input", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <textarea\n        #model=\"ngModel\"\n        matInput\n        cdkTextareaAutosize\n        cdkAutosizeMinRows=\"10\"\n        [name]=\"name\"\n        [required]=\"metadata.required(entity)\"\n        [minlength]=\"metadata.minLength ?? null\"\n        [maxlength]=\"metadata.maxLength ?? null\"\n        [disabled]=\"isReadOnly\"\n        [(ngModel)]=\"propertyValue\"\n        (ngModelChange)=\"emitChange()\"\n    >\n    </textarea>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ 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: "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.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: "directive", type: i4$3.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: StringTextboxInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: StringTextboxInputComponent, isStandalone: true, selector: "string-textbox-input", usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<mat-form-field>\n    <mat-label>{{metadata.displayName}}</mat-label>\n    <textarea\n        #model=\"ngModel\"\n        matInput\n        cdkTextareaAutosize\n        cdkAutosizeMinRows=\"10\"\n        [name]=\"name\"\n        [required]=\"metadata.required(entity)\"\n        [minlength]=\"metadata.minLength ?? null\"\n        [maxlength]=\"metadata.maxLength ?? null\"\n        [disabled]=\"isReadOnly\"\n        [(ngModel)]=\"propertyValue\"\n        (ngModelChange)=\"emitChange()\"\n    >\n    </textarea>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ 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: "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.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: "directive", type: i4$3.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: StringTextboxInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: StringTextboxInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'string-textbox-input', standalone: true, imports: [
                         MatFormFieldModule,
@@ -5722,10 +5800,10 @@ class TooltipDirective {
     ngOnDestroy() {
         this.removeCloseListeners();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: TooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0", type: TooltipDirective, isStandalone: true, selector: "[tooltip]", inputs: { tooltip: "tooltip" }, host: { listeners: { "click": "onClick($event)", "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "window:resize": "onResize()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: TooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.7", type: TooltipDirective, isStandalone: true, selector: "[tooltip]", inputs: { tooltip: "tooltip" }, host: { listeners: { "click": "onClick($event)", "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "window:resize": "onResize()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: TooltipDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: TooltipDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tooltip]',
@@ -5752,16 +5830,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImpor
  * A component that displays an info-symbol and a tooltip when it is hovered/clicked.
  */
 class TooltipComponent {
+    // eslint-disable-next-line jsdoc/require-jsdoc
+    faInfo = faInfo;
     /**
      * What to display inside the tooltip.
      */
     tooltipContent;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0", type: TooltipComponent, isStandalone: true, selector: "ngx-mat-entity-tooltip", inputs: { tooltipContent: "tooltipContent" }, ngImport: i0, template: "<div class=\"info\" [tooltip]=\"tooltipContent\">\n    <i class=\"fas fa-info\"></i>\n</div>", styles: [".info{display:flex;align-items:center;justify-content:center;height:25px;min-height:25px;width:25px;min-width:25px;border:2px solid black;border-radius:50%}.info:hover{cursor:pointer;background-color:#e3e3e3}\n"], dependencies: [{ kind: "directive", type: TooltipDirective, selector: "[tooltip]", inputs: ["tooltip"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: TooltipComponent, isStandalone: true, selector: "ngx-mat-entity-tooltip", inputs: { tooltipContent: "tooltipContent" }, ngImport: i0, template: "<div class=\"info\" [tooltip]=\"tooltipContent\">\n    <fa-icon [icon]=\"faInfo\"></fa-icon>\n</div>", styles: [".info{display:flex;align-items:center;justify-content:center;height:25px;min-height:25px;width:25px;min-width:25px;border:2px solid black;border-radius:50%}.info:hover{cursor:pointer;background-color:#e3e3e3}\n"], dependencies: [{ kind: "directive", type: TooltipDirective, selector: "[tooltip]", inputs: ["tooltip"] }, { 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.0", ngImport: i0, type: TooltipComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: TooltipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-mat-entity-tooltip', standalone: true, imports: [TooltipDirective], template: "<div class=\"info\" [tooltip]=\"tooltipContent\">\n    <i class=\"fas fa-info\"></i>\n</div>", styles: [".info{display:flex;align-items:center;justify-content:center;height:25px;min-height:25px;width:25px;min-width:25px;border:2px solid black;border-radius:50%}.info:hover{cursor:pointer;background-color:#e3e3e3}\n"] }]
+            args: [{ selector: 'ngx-mat-entity-tooltip', standalone: true, imports: [TooltipDirective, FaIconComponent], template: "<div class=\"info\" [tooltip]=\"tooltipContent\">\n    <fa-icon [icon]=\"faInfo\"></fa-icon>\n</div>", styles: [".info{display:flex;align-items:center;justify-content:center;height:25px;min-height:25px;width:25px;min-width:25px;border:2px solid black;border-radius:50%}.info:hover{cursor:pointer;background-color:#e3e3e3}\n"] }]
         }], propDecorators: { tooltipContent: [{
                 type: Input,
                 args: [{ required: true }]
@@ -5782,6 +5862,8 @@ class NgxMatEntityInputComponent {
     defaultGetValidationErrorMessage;
     globalConfig;
     http;
+    // eslint-disable-next-line jsdoc/require-jsdoc
+    faSearch = faSearch;
     /**
      * The entity on which the property exists. Used in conjunction with the "propertyKey"
      * to determine the property for which the input should be generated.
@@ -6138,23 +6220,29 @@ class NgxMatEntityInputComponent {
         }
         this.metadata = foundMetadata;
         switch (this.type) {
-            case DecoratorTypes.OBJECT_DROPDOWN:
+            case DecoratorTypes.OBJECT_DROPDOWN: {
                 void this.initDropdownObjectInput();
                 break;
-            case DecoratorTypes.OBJECT:
+            }
+            case DecoratorTypes.OBJECT: {
                 this.initObjectInput();
                 break;
-            case DecoratorTypes.ARRAY:
+            }
+            case DecoratorTypes.ARRAY: {
                 this.initEntityArray();
                 break;
-            case DecoratorTypes.HAS_MANY:
+            }
+            case DecoratorTypes.HAS_MANY: {
                 this.initHasMany();
                 break;
-            case DecoratorTypes.REFERENCES_ONE:
+            }
+            case DecoratorTypes.REFERENCES_ONE: {
                 void this.initReferencesOne();
                 break;
-            default:
+            }
+            default: {
                 break;
+            }
         }
     }
     async initReferencesOne() {
@@ -6887,10 +6975,10 @@ class NgxMatEntityInputComponent {
         SelectionUtilities.remove(this.entityArrayTableContext.$implicit.selection, this.entity[this.propertyKey], this.entityArrayTableContext.$implicit.dataSource);
         this.emitChange();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", 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.0", 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 \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=\"object-dropdown\">\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                        <i matSuffix class=\"fas fa-search\"></i>\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>\n                <mat-label>{{metadata.displayName}}</mat-label>\n                <mat-select #inputModel=\"ngModel\"\n                    [name]=\"referencesOneName\"\n                    [disabled]=\"internalIsReadOnly\"\n                    [required]=\"metadata.required(entity)\"\n                    [(ngModel)]=\"entity[propertyKey]\"\n                    (selectionChange)=\"setReferencesOneObject()\"\n                    (opened)=\"selectSearchInput.focus()\"\n                >\n                    <mat-form-field class=\"select-search-input\">\n                        <!-- eslint-disable-next-line angular/no-any -->\n                        <input #selectSearchInput matInput (keyup)=\"filterReferencesOneValues($any($event.target).value)\">\n                        <i matSuffix class=\"fas fa-search\"></i>\n                    </mat-form-field>\n                    @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=\"row\">\n                    <mat-form-field class=\"col-lg-8 col-md-6 col-sm-12\">\n                        <mat-label>{{metadataHasMany.tableData.baseData.searchLabel}}</mat-label>\n                        <input matInput (keyup)=\"applyHasManyFilter($event)\">\n                    </mat-form-field>\n                    @if (metadataHasMany.tableData.baseData.tableActions.length) {\n                        <div\n                            [class.col-lg-2]=\"hasManyAllowCreate\"\n                            [class.col-lg-4]=\"!hasManyAllowCreate\"\n                            [class.col-md-3]=\"hasManyAllowCreate\"\n                            [class.col-md-6]=\"!hasManyAllowCreate\"\n                            [class.col-sm-6]=\"hasManyAllowCreate\"\n                            [class.col-sm-12]=\"!hasManyAllowCreate\"\n                        >\n                            <button type=\"button\" class=\"actions-button\" mat-raised-button [matMenuTriggerFor]=\"menu\">\n                                {{metadataHasMany.tableData.baseData.tableActionsLabel}}\n                            </button>\n                        </div>\n                    }\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.col-lg-2]=\"metadataHasMany.tableData.baseData.tableActions.length\"\n                            [class.col-lg-4]=\"!metadataHasMany.tableData.baseData.tableActions.length\"\n                            [class.col-md-3]=\"metadataHasMany.tableData.baseData.tableActions.length\"\n                            [class.col-md-6]=\"!metadataHasMany.tableData.baseData.tableActions.length\"\n                            [class.col-sm-6]=\"metadataHasMany.tableData.baseData.tableActions.length\"\n                            [class.col-sm-12]=\"!metadataHasMany.tableData.baseData.tableActions.length\"\n                        >\n                            <button type=\"button\" class=\"create-button\" mat-raised-button (click)=\"createHasManyEntity()\">\n                                {{metadataHasMany.tableData.baseData.createButtonLabel}}\n                            </button>\n                        </div>\n                    }\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=\"row\">\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=\"row\">\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>\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=\"d-flex align-items-center gap-3\" style=\"margin-top: 10px;\">\n                <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n                    [disabled]=\"!isArrayItemValid\"\n                    [matBadge]=\"arrayItemValidationErrors.length\"\n                    [matBadgeHidden]=\"!arrayItemValidationErrors.length\"\n                    (click)=\"addArrayItem()\"\n                >\n                    {{addArrayItemDialogData.createButtonLabel}}\n                </button>\n                @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>\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=\"d-flex align-items-center gap-3\" style=\"margin-top: 10px;\">\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                    (click)=\"saveArrayItem()\"\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>\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=\"d-flex align-items-center gap-3\" style=\"margin-top: 10px;\">\n                <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n                    [disabled]=\"!isHasManyEntityValid\"\n                    [matBadge]=\"hasManyValidationErrors.length\"\n                    [matBadgeHidden]=\"!hasManyValidationErrors.length\"\n                    (click)=\"dialogCreateHasMany()\"\n                >\n                    {{metadataHasMany.tableData.createData.createButtonLabel}}\n                </button>\n                @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>\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=\"d-flex align-items-center gap-3\" style=\"margin-top: 10px;\">\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                    (click)=\"dialogEditHasMany()\"\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}.actions-container{display:flex;gap:10px}.object-dropdown{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"], 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"], 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", "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"] }] });
+    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 \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=\"object-dropdown\">\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>\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>\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                    (click)=\"addArrayItem()\"\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>\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                    (click)=\"saveArrayItem()\"\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>\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                    (click)=\"dialogCreateHasMany()\"\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>\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                    (click)=\"dialogEditHasMany()\"\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}.object-dropdown{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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NgxMatEntityInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: NgxMatEntityInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-mat-entity-input', standalone: true, imports: [
                         DisplayColumnValueComponent,
@@ -6933,8 +7021,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImpor
                         ReferencesManyInputComponent,
                         CustomInputComponent,
                         DynamicStyleClassDirective,
-                        MatSortModule
-                    ], template: "<!-- eslint-disable angular/no-call-expression -->\n \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=\"object-dropdown\">\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                        <i matSuffix class=\"fas fa-search\"></i>\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>\n                <mat-label>{{metadata.displayName}}</mat-label>\n                <mat-select #inputModel=\"ngModel\"\n                    [name]=\"referencesOneName\"\n                    [disabled]=\"internalIsReadOnly\"\n                    [required]=\"metadata.required(entity)\"\n                    [(ngModel)]=\"entity[propertyKey]\"\n                    (selectionChange)=\"setReferencesOneObject()\"\n                    (opened)=\"selectSearchInput.focus()\"\n                >\n                    <mat-form-field class=\"select-search-input\">\n                        <!-- eslint-disable-next-line angular/no-any -->\n                        <input #selectSearchInput matInput (keyup)=\"filterReferencesOneValues($any($event.target).value)\">\n                        <i matSuffix class=\"fas fa-search\"></i>\n                    </mat-form-field>\n                    @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=\"row\">\n                    <mat-form-field class=\"col-lg-8 col-md-6 col-sm-12\">\n                        <mat-label>{{metadataHasMany.tableData.baseData.searchLabel}}</mat-label>\n                        <input matInput (keyup)=\"applyHasManyFilter($event)\">\n                    </mat-form-field>\n                    @if (metadataHasMany.tableData.baseData.tableActions.length) {\n                        <div\n                            [class.col-lg-2]=\"hasManyAllowCreate\"\n                            [class.col-lg-4]=\"!hasManyAllowCreate\"\n                            [class.col-md-3]=\"hasManyAllowCreate\"\n                            [class.col-md-6]=\"!hasManyAllowCreate\"\n                            [class.col-sm-6]=\"hasManyAllowCreate\"\n                            [class.col-sm-12]=\"!hasManyAllowCreate\"\n                        >\n                            <button type=\"button\" class=\"actions-button\" mat-raised-button [matMenuTriggerFor]=\"menu\">\n                                {{metadataHasMany.tableData.baseData.tableActionsLabel}}\n                            </button>\n                        </div>\n                    }\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.col-lg-2]=\"metadataHasMany.tableData.baseData.tableActions.length\"\n                            [class.col-lg-4]=\"!metadataHasMany.tableData.baseData.tableActions.length\"\n                            [class.col-md-3]=\"metadataHasMany.tableData.baseData.tableActions.length\"\n                            [class.col-md-6]=\"!metadataHasMany.tableData.baseData.tableActions.length\"\n                            [class.col-sm-6]=\"metadataHasMany.tableData.baseData.tableActions.length\"\n                            [class.col-sm-12]=\"!metadataHasMany.tableData.baseData.tableActions.length\"\n                        >\n                            <button type=\"button\" class=\"create-button\" mat-raised-button (click)=\"createHasManyEntity()\">\n                                {{metadataHasMany.tableData.baseData.createButtonLabel}}\n                            </button>\n                        </div>\n                    }\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=\"row\">\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=\"row\">\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>\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=\"d-flex align-items-center gap-3\" style=\"margin-top: 10px;\">\n                <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n                    [disabled]=\"!isArrayItemValid\"\n                    [matBadge]=\"arrayItemValidationErrors.length\"\n                    [matBadgeHidden]=\"!arrayItemValidationErrors.length\"\n                    (click)=\"addArrayItem()\"\n                >\n                    {{addArrayItemDialogData.createButtonLabel}}\n                </button>\n                @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>\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=\"d-flex align-items-center gap-3\" style=\"margin-top: 10px;\">\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                    (click)=\"saveArrayItem()\"\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>\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=\"d-flex align-items-center gap-3\" style=\"margin-top: 10px;\">\n                <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n                    [disabled]=\"!isHasManyEntityValid\"\n                    [matBadge]=\"hasManyValidationErrors.length\"\n                    [matBadgeHidden]=\"!hasManyValidationErrors.length\"\n                    (click)=\"dialogCreateHasMany()\"\n                >\n                    {{metadataHasMany.tableData.createData.createButtonLabel}}\n                </button>\n                @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>\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=\"d-flex align-items-center gap-3\" style=\"margin-top: 10px;\">\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                    (click)=\"dialogEditHasMany()\"\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}.actions-container{display:flex;gap:10px}.object-dropdown{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"] }]
+                        MatSortModule,
+                        FaIconComponent
+                    ], template: "<!-- eslint-disable angular/no-call-expression -->\n \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=\"object-dropdown\">\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>\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>\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                    (click)=\"addArrayItem()\"\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>\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                    (click)=\"saveArrayItem()\"\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>\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                    (click)=\"dialogCreateHasMany()\"\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>\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                    (click)=\"dialogEditHasMany()\"\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}.object-dropdown{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"] }]
         }], ctorParameters: () => [{ type: i1.MatDialog }, { type: i0.EnvironmentInjector }, { type: i2$6.Router }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [NGX_GET_VALIDATION_ERROR_MESSAGE]
@@ -7048,16 +7137,16 @@ class NgxMatEntityFormComponent {
         this.entityTabs = EntityUtilities.getEntityTabs(this.entity, this.injector, this.hideOmitForCreate, this.hideOmitForEdit, this.additionalOmitKeys);
         this.formChange.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NgxMatEntityFormComponent, deps: [{ token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0", 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=\"row\">\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=\"row\">\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"], 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"], 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 ɵ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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NgxMatEntityFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: NgxMatEntityFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-mat-entity-form', standalone: true, imports: [
                         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=\"row\">\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=\"row\">\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"] }]
+                    ], 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"] }]
         }], ctorParameters: () => [{ type: i0.EnvironmentInjector }], propDecorators: { entity: [{
                 type: Input,
                 args: [{ required: true }]
@@ -7105,6 +7194,10 @@ class NgxMatEntityCreatePageComponent {
     el;
     renderer;
     globalConfig;
+    // eslint-disable-next-line jsdoc/require-jsdoc
+    faChevronLeft = faChevronLeft;
+    // eslint-disable-next-line jsdoc/require-jsdoc
+    faWarning = faWarning;
     /**
      * Contains HelperMethods around handling Entities and their property-metadata.
      */
@@ -7281,10 +7374,10 @@ class NgxMatEntityCreatePageComponent {
             return metadata.isReadOnly(this.entity);
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NgxMatEntityCreatePageComponent, deps: [{ token: i1.MatDialog }, { token: i2$7.Location }, { token: i0.EnvironmentInjector }, { token: NGX_CREATE_DATA_ENTITY_SERVICE }, { token: NGX_CREATE_DATA_ENTITY }, { token: NGX_CREATE_DATA }, { token: i2$1.HttpClient }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: NGX_COMPLETE_GLOBAL_DEFAULT_VALUES }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0", type: NgxMatEntityCreatePageComponent, isStandalone: true, selector: "ngx-mat-entity-create-page", host: { listeners: { "window:beforeunload": "canDeactivate()", "window:scroll": "checkOffset()" } }, ngImport: i0, template: "@if (!isLoaded && data.displayLoadingSpinner) {\n    <div class=\"container\">\n        <br>\n        <mat-spinner></mat-spinner>\n        <br>\n    </div>\n}\n\n@if (isLoaded) {\n    <div class=\"container\">\n        <br>\n    \n        <!------------>\n        <!-- Header -->\n        <!------------>\n        <div class=\"header\">\n            <div class=\"cancel-container\">\n                <button type=\"button\" mat-raised-button class=\"back-button\" tabindex=\"-1\" [class.unsavedChanges]=\"hasUnsavedChanges\" (click)=\"navigateBack()\">\n                    <i class=\"fas fa-chevron-left\"></i>\n                    {{data.createData.cancelButtonLabel}}\n                    @if (hasUnsavedChanges) {\n                        <i class=\"fas fa-warning\"></i>\n                    }\n                </button>\n            </div>\n        </div>\n    \n        <h1>{{data.createData.title}}</h1>\n    \n        <!----------->\n        <!-- Input -->\n        <!----------->\n        <form>\n            <ngx-mat-entity-form [hideOmitForCreate]=\"true\" [entity]=\"entity\" (selectedTabChange)=\"checkOffset()\" (formChange)=\"checkEntity()\">\n            </ngx-mat-entity-form>\n    \n            <div class=\"bottom-row-container\">\n                <div class=\"bottom-row container\">\n                    <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n                        [disabled]=\"!isEntityValid || !isEntityDirty\"\n                        [matBadge]=\"validationErrors.length\"\n                        [matBadgeHidden]=\"!validationErrors.length\"\n                        (click)=\"create()\"\n                    >\n                        {{data.createData.createButtonLabel}}\n                    </button>\n                    @if (validationErrors.length) {\n                        <ngx-mat-entity-tooltip [tooltipContent]=\"tooltipContent\"></ngx-mat-entity-tooltip>\n                    }\n                </div>\n            </div>\n        </form>\n    \n        <br>\n    </div>\n}", styles: ["h1{text-align:center}mat-spinner{margin:10px auto}.fa-warning{color:orange}.bottom-row{display:flex;align-items:center;margin-top:10px;column-gap:10px}.fixed{position:fixed;bottom:0;left:0;right:0;width:100%;z-index:1000;padding:8px 20px;background-color:#fff}.header{display:flex;margin-bottom:5px;gap:10px;flex-wrap:wrap}.header button{min-width:150px}.header .cancel-container{display:flex;justify-content:flex-start;align-items:center;column-gap:10px;width:calc(50% - 10px)}.unsavedChanges{background-color:#ffe48d}@media (max-width: 800px){.header{margin-bottom:10px;gap:15px}.header button{min-width:0px;width:50%}.header .cancel-container{width:100%;gap:15px}}\n"], dependencies: [{ 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: "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: MatBadgeModule }, { kind: "directive", type: i10.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: TooltipComponent, selector: "ngx-mat-entity-tooltip", inputs: ["tooltipContent"] }, { kind: "component", type: NgxMatEntityFormComponent, selector: "ngx-mat-entity-form", inputs: ["entity", "isEntityReadOnly", "hideOmitForCreate", "hideOmitForEdit", "additionalOmitKeys"], outputs: ["formChange", "selectedTabChange"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: NgxMatEntityCreatePageComponent, deps: [{ token: i1.MatDialog }, { token: i2$7.Location }, { token: i0.EnvironmentInjector }, { token: NGX_CREATE_DATA_ENTITY_SERVICE }, { token: NGX_CREATE_DATA_ENTITY }, { token: NGX_CREATE_DATA }, { token: i2$1.HttpClient }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: NGX_COMPLETE_GLOBAL_DEFAULT_VALUES }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.7", type: NgxMatEntityCreatePageComponent, isStandalone: true, selector: "ngx-mat-entity-create-page", host: { listeners: { "window:beforeunload": "canDeactivate()", "window:scroll": "checkOffset()" } }, ngImport: i0, template: "@if (!isLoaded && data.displayLoadingSpinner) {\n    <div class=\"page-container\">\n        <br>\n        <mat-spinner></mat-spinner>\n        <br>\n    </div>\n}\n\n@if (isLoaded) {\n    <div class=\"page-container\">\n        <br>\n    \n        <!------------>\n        <!-- Header -->\n        <!------------>\n        <div class=\"header\">\n            <div class=\"cancel-container\">\n                <button type=\"button\" mat-raised-button class=\"back-button\" tabindex=\"-1\" [class.unsavedChanges]=\"hasUnsavedChanges\" (click)=\"navigateBack()\">\n                    <fa-icon [icon]=\"faChevronLeft\"></fa-icon>\n                    {{data.createData.cancelButtonLabel}}\n                    @if (hasUnsavedChanges) {\n                        <fa-icon style=\"color: orange;\" [icon]=\"faWarning\"></fa-icon>\n                    }\n                </button>\n            </div>\n        </div>\n    \n        <h1>{{data.createData.title}}</h1>\n    \n        <!----------->\n        <!-- Input -->\n        <!----------->\n        <form>\n            <ngx-mat-entity-form [hideOmitForCreate]=\"true\" [entity]=\"entity\" (selectedTabChange)=\"checkOffset()\" (formChange)=\"checkEntity()\">\n            </ngx-mat-entity-form>\n    \n            <div class=\"bottom-row-container\">\n                <div class=\"bottom-row container\">\n                    <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n                        [disabled]=\"!isEntityValid || !isEntityDirty\"\n                        [matBadge]=\"validationErrors.length\"\n                        [matBadgeHidden]=\"!validationErrors.length\"\n                        (click)=\"create()\"\n                    >\n                        {{data.createData.createButtonLabel}}\n                    </button>\n                    @if (validationErrors.length) {\n                        <ngx-mat-entity-tooltip [tooltipContent]=\"tooltipContent\"></ngx-mat-entity-tooltip>\n                    }\n                </div>\n            </div>\n        </form>\n    \n        <br>\n    </div>\n}", styles: ["h1{text-align:center}mat-spinner{margin:10px auto}.page-container{width:100%;margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px}@media (min-width: 640px){.page-container{max-width:640px}}@media (min-width: 768px){.page-container{max-width:768px}}@media (min-width: 1024px){.page-container{max-width:1024px}}@media (min-width: 1280px){.page-container{max-width:1280px}}@media (min-width: 1536px){.page-container{max-width:1536px}}.bottom-row{display:flex;align-items:center;margin-top:10px;column-gap:10px}.fixed{position:fixed;bottom:0;left:0;right:0;width:100%;z-index:1000;padding:8px 20px;background-color:#fff}.header{display:flex;margin-bottom:5px;gap:10px;flex-wrap:wrap}.header button{min-width:150px}.header .cancel-container{display:flex;justify-content:flex-start;align-items:center;column-gap:10px;width:calc(50% - 10px)}.unsavedChanges{background-color:#ffe48d}@media (max-width: 800px){.header{margin-bottom:10px;gap:15px}.header button{min-width:0px;width:50%}.header .cancel-container{width:100%;gap:15px}}\n"], dependencies: [{ 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: "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: MatBadgeModule }, { kind: "directive", type: i10.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: TooltipComponent, selector: "ngx-mat-entity-tooltip", inputs: ["tooltipContent"] }, { kind: "component", type: NgxMatEntityFormComponent, selector: "ngx-mat-entity-form", inputs: ["entity", "isEntityReadOnly", "hideOmitForCreate", "hideOmitForEdit", "additionalOmitKeys"], outputs: ["formChange", "selectedTabChange"] }, { 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.0", ngImport: i0, type: NgxMatEntityCreatePageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: NgxMatEntityCreatePageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-mat-entity-create-page', standalone: true, imports: [
                         CommonModule,
@@ -7292,8 +7385,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImpor
                         MatProgressSpinnerModule,
                         MatBadgeModule,
                         TooltipComponent,
-                        NgxMatEntityFormComponent
-                    ], template: "@if (!isLoaded && data.displayLoadingSpinner) {\n    <div class=\"container\">\n        <br>\n        <mat-spinner></mat-spinner>\n        <br>\n    </div>\n}\n\n@if (isLoaded) {\n    <div class=\"container\">\n        <br>\n    \n        <!------------>\n        <!-- Header -->\n        <!------------>\n        <div class=\"header\">\n            <div class=\"cancel-container\">\n                <button type=\"button\" mat-raised-button class=\"back-button\" tabindex=\"-1\" [class.unsavedChanges]=\"hasUnsavedChanges\" (click)=\"navigateBack()\">\n                    <i class=\"fas fa-chevron-left\"></i>\n                    {{data.createData.cancelButtonLabel}}\n                    @if (hasUnsavedChanges) {\n                        <i class=\"fas fa-warning\"></i>\n                    }\n                </button>\n            </div>\n        </div>\n    \n        <h1>{{data.createData.title}}</h1>\n    \n        <!----------->\n        <!-- Input -->\n        <!----------->\n        <form>\n            <ngx-mat-entity-form [hideOmitForCreate]=\"true\" [entity]=\"entity\" (selectedTabChange)=\"checkOffset()\" (formChange)=\"checkEntity()\">\n            </ngx-mat-entity-form>\n    \n            <div class=\"bottom-row-container\">\n                <div class=\"bottom-row container\">\n                    <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n                        [disabled]=\"!isEntityValid || !isEntityDirty\"\n                        [matBadge]=\"validationErrors.length\"\n                        [matBadgeHidden]=\"!validationErrors.length\"\n                        (click)=\"create()\"\n                    >\n                        {{data.createData.createButtonLabel}}\n                    </button>\n                    @if (validationErrors.length) {\n                        <ngx-mat-entity-tooltip [tooltipContent]=\"tooltipContent\"></ngx-mat-entity-tooltip>\n                    }\n                </div>\n            </div>\n        </form>\n    \n        <br>\n    </div>\n}", styles: ["h1{text-align:center}mat-spinner{margin:10px auto}.fa-warning{color:orange}.bottom-row{display:flex;align-items:center;margin-top:10px;column-gap:10px}.fixed{position:fixed;bottom:0;left:0;right:0;width:100%;z-index:1000;padding:8px 20px;background-color:#fff}.header{display:flex;margin-bottom:5px;gap:10px;flex-wrap:wrap}.header button{min-width:150px}.header .cancel-container{display:flex;justify-content:flex-start;align-items:center;column-gap:10px;width:calc(50% - 10px)}.unsavedChanges{background-color:#ffe48d}@media (max-width: 800px){.header{margin-bottom:10px;gap:15px}.header button{min-width:0px;width:50%}.header .cancel-container{width:100%;gap:15px}}\n"] }]
+                        NgxMatEntityFormComponent,
+                        FaIconComponent
+                    ], template: "@if (!isLoaded && data.displayLoadingSpinner) {\n    <div class=\"page-container\">\n        <br>\n        <mat-spinner></mat-spinner>\n        <br>\n    </div>\n}\n\n@if (isLoaded) {\n    <div class=\"page-container\">\n        <br>\n    \n        <!------------>\n        <!-- Header -->\n        <!------------>\n        <div class=\"header\">\n            <div class=\"cancel-container\">\n                <button type=\"button\" mat-raised-button class=\"back-button\" tabindex=\"-1\" [class.unsavedChanges]=\"hasUnsavedChanges\" (click)=\"navigateBack()\">\n                    <fa-icon [icon]=\"faChevronLeft\"></fa-icon>\n                    {{data.createData.cancelButtonLabel}}\n                    @if (hasUnsavedChanges) {\n                        <fa-icon style=\"color: orange;\" [icon]=\"faWarning\"></fa-icon>\n                    }\n                </button>\n            </div>\n        </div>\n    \n        <h1>{{data.createData.title}}</h1>\n    \n        <!----------->\n        <!-- Input -->\n        <!----------->\n        <form>\n            <ngx-mat-entity-form [hideOmitForCreate]=\"true\" [entity]=\"entity\" (selectedTabChange)=\"checkOffset()\" (formChange)=\"checkEntity()\">\n            </ngx-mat-entity-form>\n    \n            <div class=\"bottom-row-container\">\n                <div class=\"bottom-row container\">\n                    <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n                        [disabled]=\"!isEntityValid || !isEntityDirty\"\n                        [matBadge]=\"validationErrors.length\"\n                        [matBadgeHidden]=\"!validationErrors.length\"\n                        (click)=\"create()\"\n                    >\n                        {{data.createData.createButtonLabel}}\n                    </button>\n                    @if (validationErrors.length) {\n                        <ngx-mat-entity-tooltip [tooltipContent]=\"tooltipContent\"></ngx-mat-entity-tooltip>\n                    }\n                </div>\n            </div>\n        </form>\n    \n        <br>\n    </div>\n}", styles: ["h1{text-align:center}mat-spinner{margin:10px auto}.page-container{width:100%;margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px}@media (min-width: 640px){.page-container{max-width:640px}}@media (min-width: 768px){.page-container{max-width:768px}}@media (min-width: 1024px){.page-container{max-width:1024px}}@media (min-width: 1280px){.page-container{max-width:1280px}}@media (min-width: 1536px){.page-container{max-width:1536px}}.bottom-row{display:flex;align-items:center;margin-top:10px;column-gap:10px}.fixed{position:fixed;bottom:0;left:0;right:0;width:100%;z-index:1000;padding:8px 20px;background-color:#fff}.header{display:flex;margin-bottom:5px;gap:10px;flex-wrap:wrap}.header button{min-width:150px}.header .cancel-container{display:flex;justify-content:flex-start;align-items:center;column-gap:10px;width:calc(50% - 10px)}.unsavedChanges{background-color:#ffe48d}@media (max-width: 800px){.header{margin-bottom:10px;gap:15px}.header button{min-width:0px;width:50%}.header .cancel-container{width:100%;gap:15px}}\n"] }]
         }], ctorParameters: () => [{ type: i1.MatDialog }, { type: i2$7.Location }, { type: i0.EnvironmentInjector }, { type: EntityService, decorators: [{
                     type: Inject,
                     args: [NGX_CREATE_DATA_ENTITY_SERVICE]
@@ -7393,6 +7487,10 @@ class NgxMatEntityEditPageComponent {
     el;
     renderer;
     globalConfig;
+    // eslint-disable-next-line jsdoc/require-jsdoc
+    faChevronLeft = faChevronLeft;
+    // eslint-disable-next-line jsdoc/require-jsdoc
+    faWarning = faWarning;
     /**
      * Contains HelperMethods around handling Entities and their property-metadata.
      */
@@ -7648,10 +7746,10 @@ class NgxMatEntityEditPageComponent {
     editActionDisabled(action) {
         return runInInjectionContext(this.injector, () => !action.enabled(this.entityPriorChanges));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NgxMatEntityEditPageComponent, deps: [{ token: i1.MatDialog }, { token: i2$7.Location }, { token: i2$6.ActivatedRoute }, { token: i0.EnvironmentInjector }, { token: NGX_EDIT_DATA_ENTITY_SERVICE }, { token: NGX_EDIT_DATA_ENTITY }, { token: NGX_EDIT_DATA }, { token: i2$1.HttpClient }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: NGX_COMPLETE_GLOBAL_DEFAULT_VALUES }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0", type: NgxMatEntityEditPageComponent, isStandalone: true, selector: "ngx-mat-entity-edit-page", host: { listeners: { "window:scroll": "checkOffset()", "window:beforeunload": "canDeactivate()" } }, ngImport: i0, template: " \n<!-- eslint-disable angular/no-call-expression -->\n@if (!isLoaded && data.displayLoadingSpinner) {\n    <div class=\"container\">\n        <br>\n        <mat-spinner></mat-spinner>\n        <br>\n    </div>\n}\n\n@if (isLoaded) {\n    <div class=\"container\">\n        <br>\n    \n        <!------------>\n        <!-- Header -->\n        <!------------>\n        <div class=\"header\">\n            <div class=\"cancel-container\">\n                <button type=\"button\" mat-raised-button class=\"back-button\" tabindex=\"-1\" [class.unsavedChanges]=\"hasUnsavedChanges\" (click)=\"navigateBack()\">\n                    <i class=\"fas fa-chevron-left\"></i>\n                    {{data.editData.cancelButtonLabel}}\n                    @if (hasUnsavedChanges) {\n                        <i class=\"fas fa-warning\"></i>\n                    }\n                </button>\n            </div>\n            <div class=\"actions-container\">\n                @if (data.editData.actions.length) {\n                    <button type=\"button\" mat-raised-button [matMenuTriggerFor]=\"menu\">\n                        {{data.editData.actionsLabel}}\n                    </button>\n                }\n                <mat-menu #menu=\"matMenu\">\n                    @for (action of data.editData.actions; track $index) {\n                        <button type=\"button\" mat-menu-item [disabled]=\"editActionDisabled(action)\" (click)=\"runEditAction(action)\">\n                            {{action.displayName}}\n                        </button>\n                    }\n                </mat-menu>\n            \n                @if (allowDelete) {\n                    <button type=\"button\" mat-raised-button color=\"warn\" class=\"delete-button\" tabindex=\"-1\" (click)=\"delete()\">\n                        {{data.editData.deleteButtonLabel}}\n                    </button>\n                }\n            </div>\n        </div>\n    \n        <h1>{{data.editData.title(entityPriorChanges)}}</h1>\n    \n        <!----------->\n        <!-- Input -->\n        <!----------->\n        <form>\n            <ngx-mat-entity-form [hideOmitForEdit]=\"true\" [isEntityReadOnly]=\"isEntityReadOnly\" [entity]=\"entity\" (selectedTabChange)=\"checkOffset()\" (formChange)=\"checkEntity()\">\n            </ngx-mat-entity-form>\n    \n            <div class=\"bottom-row-container\">\n                <div class=\"bottom-row container\">\n                    <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n                        [class.badge-changes]=\"!validationErrors.length\"\n                        [disabled]=\"isEntityReadOnly || !isEntityValid || !isEntityDirty\"\n                        [matBadge]=\"validationErrors.length > 0 ? validationErrors.length : changes.length\"\n                        [matBadgeHidden]=\"!validationErrors.length && !changes.length\"\n                        (click)=\"edit()\"\n                    >\n                        {{data.editData.confirmButtonLabel}}\n                    </button>\n                    @if (validationErrors.length || changes.length) {\n                        <ngx-mat-entity-tooltip [tooltipContent]=\"tooltipContent\"></ngx-mat-entity-tooltip>\n                    }\n                </div>\n            </div>\n        </form>\n        <br>\n    </div>\n}", styles: ["::ng-deep .badge-changes .mat-badge-content{background-color:orange;color:#fff}h1{text-align:center}mat-spinner{margin:10px auto}.fa-warning{color:orange}.bottom-row{display:flex;align-items:center;column-gap:10px;margin-top:10px}.fixed{position:fixed;bottom:0;left:0;right:0;width:100%;z-index:1000;padding:8px 20px;background-color:#fff}.header{display:flex;margin-bottom:5px;gap:10px;flex-wrap:wrap}.header button{min-width:150px}.header .cancel-container{display:flex;justify-content:flex-start;align-items:center;column-gap:10px;width:calc(50% - 10px)}.header .actions-container{display:flex;justify-content:flex-end;gap:10px;width:calc(50% - 10px)}.unsavedChanges{background-color:#ffe48d}@media (max-width: 800px){.header{margin-bottom:10px;gap:15px}.header button{min-width:0px;width:50%}.header .cancel-container,.header .actions-container{width:100%;gap:15px}}\n"], dependencies: [{ kind: "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: "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: 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: MatBadgeModule }, { kind: "directive", type: i10.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: TooltipComponent, selector: "ngx-mat-entity-tooltip", inputs: ["tooltipContent"] }, { kind: "component", type: NgxMatEntityFormComponent, selector: "ngx-mat-entity-form", inputs: ["entity", "isEntityReadOnly", "hideOmitForCreate", "hideOmitForEdit", "additionalOmitKeys"], outputs: ["formChange", "selectedTabChange"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: NgxMatEntityEditPageComponent, deps: [{ token: i1.MatDialog }, { token: i2$7.Location }, { token: i2$6.ActivatedRoute }, { token: i0.EnvironmentInjector }, { token: NGX_EDIT_DATA_ENTITY_SERVICE }, { token: NGX_EDIT_DATA_ENTITY }, { token: NGX_EDIT_DATA }, { token: i2$1.HttpClient }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: NGX_COMPLETE_GLOBAL_DEFAULT_VALUES }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.7", type: NgxMatEntityEditPageComponent, isStandalone: true, selector: "ngx-mat-entity-edit-page", host: { listeners: { "window:scroll": "checkOffset()", "window:beforeunload": "canDeactivate()" } }, ngImport: i0, template: " \n<!-- eslint-disable angular/no-call-expression -->\n@if (!isLoaded && data.displayLoadingSpinner) {\n    <div class=\"page-container\">\n        <br>\n        <mat-spinner></mat-spinner>\n        <br>\n    </div>\n}\n\n@if (isLoaded) {\n    <div class=\"page-container\">\n        <br>\n    \n        <!------------>\n        <!-- Header -->\n        <!------------>\n        <div class=\"header\">\n            <div class=\"cancel-container\">\n                <button type=\"button\" mat-raised-button class=\"back-button\" tabindex=\"-1\" [class.unsavedChanges]=\"hasUnsavedChanges\" (click)=\"navigateBack()\">\n                    <fa-icon [icon]=\"faChevronLeft\"></fa-icon>\n                    {{data.editData.cancelButtonLabel}}\n                    @if (hasUnsavedChanges) {\n                        <fa-icon style=\"color: orange;\" [icon]=\"faWarning\"></fa-icon>\n                    }\n                </button>\n            </div>\n            <div class=\"actions-container\">\n                @if (data.editData.actions.length) {\n                    <button type=\"button\" mat-raised-button [matMenuTriggerFor]=\"menu\">\n                        {{data.editData.actionsLabel}}\n                    </button>\n                }\n                <mat-menu #menu=\"matMenu\">\n                    @for (action of data.editData.actions; track $index) {\n                        <button type=\"button\" mat-menu-item [disabled]=\"editActionDisabled(action)\" (click)=\"runEditAction(action)\">\n                            {{action.displayName}}\n                        </button>\n                    }\n                </mat-menu>\n            \n                @if (allowDelete) {\n                    <button type=\"button\" mat-raised-button color=\"warn\" class=\"delete-button\" tabindex=\"-1\" (click)=\"delete()\">\n                        {{data.editData.deleteButtonLabel}}\n                    </button>\n                }\n            </div>\n        </div>\n    \n        <h1>{{data.editData.title(entityPriorChanges)}}</h1>\n    \n        <!----------->\n        <!-- Input -->\n        <!----------->\n        <form>\n            <ngx-mat-entity-form [hideOmitForEdit]=\"true\" [isEntityReadOnly]=\"isEntityReadOnly\" [entity]=\"entity\" (selectedTabChange)=\"checkOffset()\" (formChange)=\"checkEntity()\">\n            </ngx-mat-entity-form>\n    \n            <div class=\"bottom-row-container\">\n                <div class=\"bottom-row container\">\n                    <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n                        [class.badge-changes]=\"!validationErrors.length\"\n                        [disabled]=\"isEntityReadOnly || !isEntityValid || !isEntityDirty\"\n                        [matBadge]=\"validationErrors.length > 0 ? validationErrors.length : changes.length\"\n                        [matBadgeHidden]=\"!validationErrors.length && !changes.length\"\n                        (click)=\"edit()\"\n                    >\n                        {{data.editData.confirmButtonLabel}}\n                    </button>\n                    @if (validationErrors.length || changes.length) {\n                        <ngx-mat-entity-tooltip [tooltipContent]=\"tooltipContent\"></ngx-mat-entity-tooltip>\n                    }\n                </div>\n            </div>\n        </form>\n        <br>\n    </div>\n}", styles: ["::ng-deep .badge-changes .mat-badge-content{background-color:orange;color:#fff}h1{text-align:center}mat-spinner{margin:10px auto}.page-container{width:100%;margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px}@media (min-width: 640px){.page-container{max-width:640px}}@media (min-width: 768px){.page-container{max-width:768px}}@media (min-width: 1024px){.page-container{max-width:1024px}}@media (min-width: 1280px){.page-container{max-width:1280px}}@media (min-width: 1536px){.page-container{max-width:1536px}}.bottom-row{display:flex;align-items:center;column-gap:10px;margin-top:10px}.fixed{position:fixed;bottom:0;left:0;right:0;width:100%;z-index:1000;padding:8px 20px;background-color:#fff}.header{display:flex;margin-bottom:5px;gap:10px;flex-wrap:wrap}.header button{min-width:150px}.header .cancel-container{display:flex;justify-content:flex-start;align-items:center;column-gap:10px;width:calc(50% - 10px)}.header .actions-container{display:flex;justify-content:flex-end;gap:10px;width:calc(50% - 10px)}.unsavedChanges{background-color:#ffe48d}@media (max-width: 800px){.header{margin-bottom:10px;gap:15px}.header button{min-width:0px;width:50%}.header .cancel-container,.header .actions-container{width:100%;gap:15px}}\n"], dependencies: [{ kind: "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: "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: 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: MatBadgeModule }, { kind: "directive", type: i10.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: TooltipComponent, selector: "ngx-mat-entity-tooltip", inputs: ["tooltipContent"] }, { kind: "component", type: NgxMatEntityFormComponent, selector: "ngx-mat-entity-form", inputs: ["entity", "isEntityReadOnly", "hideOmitForCreate", "hideOmitForEdit", "additionalOmitKeys"], outputs: ["formChange", "selectedTabChange"] }, { 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.0", ngImport: i0, type: NgxMatEntityEditPageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: NgxMatEntityEditPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-mat-entity-edit-page', standalone: true, imports: [
                         CommonModule,
@@ -7660,8 +7758,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImpor
                         MatMenuModule,
                         MatBadgeModule,
                         TooltipComponent,
-                        NgxMatEntityFormComponent
-                    ], template: " \n<!-- eslint-disable angular/no-call-expression -->\n@if (!isLoaded && data.displayLoadingSpinner) {\n    <div class=\"container\">\n        <br>\n        <mat-spinner></mat-spinner>\n        <br>\n    </div>\n}\n\n@if (isLoaded) {\n    <div class=\"container\">\n        <br>\n    \n        <!------------>\n        <!-- Header -->\n        <!------------>\n        <div class=\"header\">\n            <div class=\"cancel-container\">\n                <button type=\"button\" mat-raised-button class=\"back-button\" tabindex=\"-1\" [class.unsavedChanges]=\"hasUnsavedChanges\" (click)=\"navigateBack()\">\n                    <i class=\"fas fa-chevron-left\"></i>\n                    {{data.editData.cancelButtonLabel}}\n                    @if (hasUnsavedChanges) {\n                        <i class=\"fas fa-warning\"></i>\n                    }\n                </button>\n            </div>\n            <div class=\"actions-container\">\n                @if (data.editData.actions.length) {\n                    <button type=\"button\" mat-raised-button [matMenuTriggerFor]=\"menu\">\n                        {{data.editData.actionsLabel}}\n                    </button>\n                }\n                <mat-menu #menu=\"matMenu\">\n                    @for (action of data.editData.actions; track $index) {\n                        <button type=\"button\" mat-menu-item [disabled]=\"editActionDisabled(action)\" (click)=\"runEditAction(action)\">\n                            {{action.displayName}}\n                        </button>\n                    }\n                </mat-menu>\n            \n                @if (allowDelete) {\n                    <button type=\"button\" mat-raised-button color=\"warn\" class=\"delete-button\" tabindex=\"-1\" (click)=\"delete()\">\n                        {{data.editData.deleteButtonLabel}}\n                    </button>\n                }\n            </div>\n        </div>\n    \n        <h1>{{data.editData.title(entityPriorChanges)}}</h1>\n    \n        <!----------->\n        <!-- Input -->\n        <!----------->\n        <form>\n            <ngx-mat-entity-form [hideOmitForEdit]=\"true\" [isEntityReadOnly]=\"isEntityReadOnly\" [entity]=\"entity\" (selectedTabChange)=\"checkOffset()\" (formChange)=\"checkEntity()\">\n            </ngx-mat-entity-form>\n    \n            <div class=\"bottom-row-container\">\n                <div class=\"bottom-row container\">\n                    <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n                        [class.badge-changes]=\"!validationErrors.length\"\n                        [disabled]=\"isEntityReadOnly || !isEntityValid || !isEntityDirty\"\n                        [matBadge]=\"validationErrors.length > 0 ? validationErrors.length : changes.length\"\n                        [matBadgeHidden]=\"!validationErrors.length && !changes.length\"\n                        (click)=\"edit()\"\n                    >\n                        {{data.editData.confirmButtonLabel}}\n                    </button>\n                    @if (validationErrors.length || changes.length) {\n                        <ngx-mat-entity-tooltip [tooltipContent]=\"tooltipContent\"></ngx-mat-entity-tooltip>\n                    }\n                </div>\n            </div>\n        </form>\n        <br>\n    </div>\n}", styles: ["::ng-deep .badge-changes .mat-badge-content{background-color:orange;color:#fff}h1{text-align:center}mat-spinner{margin:10px auto}.fa-warning{color:orange}.bottom-row{display:flex;align-items:center;column-gap:10px;margin-top:10px}.fixed{position:fixed;bottom:0;left:0;right:0;width:100%;z-index:1000;padding:8px 20px;background-color:#fff}.header{display:flex;margin-bottom:5px;gap:10px;flex-wrap:wrap}.header button{min-width:150px}.header .cancel-container{display:flex;justify-content:flex-start;align-items:center;column-gap:10px;width:calc(50% - 10px)}.header .actions-container{display:flex;justify-content:flex-end;gap:10px;width:calc(50% - 10px)}.unsavedChanges{background-color:#ffe48d}@media (max-width: 800px){.header{margin-bottom:10px;gap:15px}.header button{min-width:0px;width:50%}.header .cancel-container,.header .actions-container{width:100%;gap:15px}}\n"] }]
+                        NgxMatEntityFormComponent,
+                        FaIconComponent
+                    ], template: " \n<!-- eslint-disable angular/no-call-expression -->\n@if (!isLoaded && data.displayLoadingSpinner) {\n    <div class=\"page-container\">\n        <br>\n        <mat-spinner></mat-spinner>\n        <br>\n    </div>\n}\n\n@if (isLoaded) {\n    <div class=\"page-container\">\n        <br>\n    \n        <!------------>\n        <!-- Header -->\n        <!------------>\n        <div class=\"header\">\n            <div class=\"cancel-container\">\n                <button type=\"button\" mat-raised-button class=\"back-button\" tabindex=\"-1\" [class.unsavedChanges]=\"hasUnsavedChanges\" (click)=\"navigateBack()\">\n                    <fa-icon [icon]=\"faChevronLeft\"></fa-icon>\n                    {{data.editData.cancelButtonLabel}}\n                    @if (hasUnsavedChanges) {\n                        <fa-icon style=\"color: orange;\" [icon]=\"faWarning\"></fa-icon>\n                    }\n                </button>\n            </div>\n            <div class=\"actions-container\">\n                @if (data.editData.actions.length) {\n                    <button type=\"button\" mat-raised-button [matMenuTriggerFor]=\"menu\">\n                        {{data.editData.actionsLabel}}\n                    </button>\n                }\n                <mat-menu #menu=\"matMenu\">\n                    @for (action of data.editData.actions; track $index) {\n                        <button type=\"button\" mat-menu-item [disabled]=\"editActionDisabled(action)\" (click)=\"runEditAction(action)\">\n                            {{action.displayName}}\n                        </button>\n                    }\n                </mat-menu>\n            \n                @if (allowDelete) {\n                    <button type=\"button\" mat-raised-button color=\"warn\" class=\"delete-button\" tabindex=\"-1\" (click)=\"delete()\">\n                        {{data.editData.deleteButtonLabel}}\n                    </button>\n                }\n            </div>\n        </div>\n    \n        <h1>{{data.editData.title(entityPriorChanges)}}</h1>\n    \n        <!----------->\n        <!-- Input -->\n        <!----------->\n        <form>\n            <ngx-mat-entity-form [hideOmitForEdit]=\"true\" [isEntityReadOnly]=\"isEntityReadOnly\" [entity]=\"entity\" (selectedTabChange)=\"checkOffset()\" (formChange)=\"checkEntity()\">\n            </ngx-mat-entity-form>\n    \n            <div class=\"bottom-row-container\">\n                <div class=\"bottom-row container\">\n                    <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n                        [class.badge-changes]=\"!validationErrors.length\"\n                        [disabled]=\"isEntityReadOnly || !isEntityValid || !isEntityDirty\"\n                        [matBadge]=\"validationErrors.length > 0 ? validationErrors.length : changes.length\"\n                        [matBadgeHidden]=\"!validationErrors.length && !changes.length\"\n                        (click)=\"edit()\"\n                    >\n                        {{data.editData.confirmButtonLabel}}\n                    </button>\n                    @if (validationErrors.length || changes.length) {\n                        <ngx-mat-entity-tooltip [tooltipContent]=\"tooltipContent\"></ngx-mat-entity-tooltip>\n                    }\n                </div>\n            </div>\n        </form>\n        <br>\n    </div>\n}", styles: ["::ng-deep .badge-changes .mat-badge-content{background-color:orange;color:#fff}h1{text-align:center}mat-spinner{margin:10px auto}.page-container{width:100%;margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px}@media (min-width: 640px){.page-container{max-width:640px}}@media (min-width: 768px){.page-container{max-width:768px}}@media (min-width: 1024px){.page-container{max-width:1024px}}@media (min-width: 1280px){.page-container{max-width:1280px}}@media (min-width: 1536px){.page-container{max-width:1536px}}.bottom-row{display:flex;align-items:center;column-gap:10px;margin-top:10px}.fixed{position:fixed;bottom:0;left:0;right:0;width:100%;z-index:1000;padding:8px 20px;background-color:#fff}.header{display:flex;margin-bottom:5px;gap:10px;flex-wrap:wrap}.header button{min-width:150px}.header .cancel-container{display:flex;justify-content:flex-start;align-items:center;column-gap:10px;width:calc(50% - 10px)}.header .actions-container{display:flex;justify-content:flex-end;gap:10px;width:calc(50% - 10px)}.unsavedChanges{background-color:#ffe48d}@media (max-width: 800px){.header{margin-bottom:10px;gap:15px}.header button{min-width:0px;width:50%}.header .cancel-container,.header .actions-container{width:100%;gap:15px}}\n"] }]
         }], ctorParameters: () => [{ type: i1.MatDialog }, { type: i2$7.Location }, { type: i2$6.ActivatedRoute }, { type: i0.EnvironmentInjector }, { type: EntityService, decorators: [{
                     type: Inject,
                     args: [NGX_EDIT_DATA_ENTITY_SERVICE]
@@ -7852,10 +7951,10 @@ class NgxMatEntityCreateDialogComponent {
         this.unsavedChanges.emit(false);
         this.dialogRef.close();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NgxMatEntityCreateDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.MatDialogRef }, { token: i0.EnvironmentInjector }, { 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.0", type: NgxMatEntityCreateDialogComponent, isStandalone: true, selector: "ngx-mat-entity-create-dialog", outputs: { unsavedChanges: "unsavedChanges" }, ngImport: i0, template: "<div class=\"mat-dialog-title\">\n    <div>{{data.createData.title}}</div>\n</div>\n\n<form>\n    <mat-dialog-content>\n        <ngx-mat-entity-form [hideOmitForCreate]=\"true\" [entity]=\"data.entity\" (formChange)=\"checkIsEntityValid()\">\n        </ngx-mat-entity-form>\n    </mat-dialog-content>\n    \n    <mat-dialog-actions>\n\n        <div class=\"d-flex align-items-center gap-3\" style=\"margin-top: 10px;\">\n            <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n                [disabled]=\"!isEntityValid\"\n                [matBadge]=\"validationErrors.length\"\n                [matBadgeHidden]=\"!validationErrors.length\"\n                (click)=\"create()\"\n            >\n                {{data.createData.createButtonLabel}}\n            </button>\n            @if (validationErrors.length) {\n                <ngx-mat-entity-tooltip [tooltipContent]=\"tooltipContent\"></ngx-mat-entity-tooltip>\n            }\n        </div>\n\n        <button type=\"button\" mat-raised-button class=\"cancel-button\" (click)=\"cancel()\">\n            {{data.createData.cancelButtonLabel}}\n        </button>\n    </mat-dialog-actions>\n</form>\n", styles: ["", "::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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: 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: MatBadgeModule }, { kind: "directive", type: i10.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: TooltipComponent, selector: "ngx-mat-entity-tooltip", inputs: ["tooltipContent"] }, { kind: "component", type: NgxMatEntityFormComponent, selector: "ngx-mat-entity-form", inputs: ["entity", "isEntityReadOnly", "hideOmitForCreate", "hideOmitForEdit", "additionalOmitKeys"], outputs: ["formChange", "selectedTabChange"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: NgxMatEntityCreateDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.MatDialogRef }, { token: i0.EnvironmentInjector }, { 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: NgxMatEntityCreateDialogComponent, isStandalone: true, selector: "ngx-mat-entity-create-dialog", outputs: { unsavedChanges: "unsavedChanges" }, ngImport: i0, template: "<div class=\"mat-dialog-title\">\n    <div>{{data.createData.title}}</div>\n</div>\n\n<form>\n    <mat-dialog-content>\n        <ngx-mat-entity-form [hideOmitForCreate]=\"true\" [entity]=\"data.entity\" (formChange)=\"checkIsEntityValid()\">\n        </ngx-mat-entity-form>\n    </mat-dialog-content>\n    \n    <mat-dialog-actions>\n\n        <div class=\"dialog-button-with-info-icon\">\n            <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n                [disabled]=\"!isEntityValid\"\n                [matBadge]=\"validationErrors.length\"\n                [matBadgeHidden]=\"!validationErrors.length\"\n                (click)=\"create()\"\n            >\n                {{data.createData.createButtonLabel}}\n            </button>\n            @if (validationErrors.length) {\n                <ngx-mat-entity-tooltip [tooltipContent]=\"tooltipContent\"></ngx-mat-entity-tooltip>\n            }\n        </div>\n\n        <button type=\"button\" mat-raised-button class=\"cancel-button\" (click)=\"cancel()\">\n            {{data.createData.cancelButtonLabel}}\n        </button>\n    </mat-dialog-actions>\n</form>\n", styles: [".dialog-button-with-info-icon{margin-top:10px;gap:12px;display:flex;align-items:center}\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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: 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: MatBadgeModule }, { kind: "directive", type: i10.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: TooltipComponent, selector: "ngx-mat-entity-tooltip", inputs: ["tooltipContent"] }, { kind: "component", type: NgxMatEntityFormComponent, selector: "ngx-mat-entity-form", inputs: ["entity", "isEntityReadOnly", "hideOmitForCreate", "hideOmitForEdit", "additionalOmitKeys"], outputs: ["formChange", "selectedTabChange"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NgxMatEntityCreateDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: NgxMatEntityCreateDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-mat-entity-create-dialog', standalone: true, imports: [
                         CommonModule,
@@ -7864,7 +7963,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImpor
                         MatBadgeModule,
                         TooltipComponent,
                         NgxMatEntityFormComponent
-                    ], template: "<div class=\"mat-dialog-title\">\n    <div>{{data.createData.title}}</div>\n</div>\n\n<form>\n    <mat-dialog-content>\n        <ngx-mat-entity-form [hideOmitForCreate]=\"true\" [entity]=\"data.entity\" (formChange)=\"checkIsEntityValid()\">\n        </ngx-mat-entity-form>\n    </mat-dialog-content>\n    \n    <mat-dialog-actions>\n\n        <div class=\"d-flex align-items-center gap-3\" style=\"margin-top: 10px;\">\n            <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n                [disabled]=\"!isEntityValid\"\n                [matBadge]=\"validationErrors.length\"\n                [matBadgeHidden]=\"!validationErrors.length\"\n                (click)=\"create()\"\n            >\n                {{data.createData.createButtonLabel}}\n            </button>\n            @if (validationErrors.length) {\n                <ngx-mat-entity-tooltip [tooltipContent]=\"tooltipContent\"></ngx-mat-entity-tooltip>\n            }\n        </div>\n\n        <button type=\"button\" mat-raised-button class=\"cancel-button\" (click)=\"cancel()\">\n            {{data.createData.cancelButtonLabel}}\n        </button>\n    </mat-dialog-actions>\n</form>\n", styles: ["::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"] }]
+                    ], template: "<div class=\"mat-dialog-title\">\n    <div>{{data.createData.title}}</div>\n</div>\n\n<form>\n    <mat-dialog-content>\n        <ngx-mat-entity-form [hideOmitForCreate]=\"true\" [entity]=\"data.entity\" (formChange)=\"checkIsEntityValid()\">\n        </ngx-mat-entity-form>\n    </mat-dialog-content>\n    \n    <mat-dialog-actions>\n\n        <div class=\"dialog-button-with-info-icon\">\n            <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n                [disabled]=\"!isEntityValid\"\n                [matBadge]=\"validationErrors.length\"\n                [matBadgeHidden]=\"!validationErrors.length\"\n                (click)=\"create()\"\n            >\n                {{data.createData.createButtonLabel}}\n            </button>\n            @if (validationErrors.length) {\n                <ngx-mat-entity-tooltip [tooltipContent]=\"tooltipContent\"></ngx-mat-entity-tooltip>\n            }\n        </div>\n\n        <button type=\"button\" mat-raised-button class=\"cancel-button\" (click)=\"cancel()\">\n            {{data.createData.cancelButtonLabel}}\n        </button>\n    </mat-dialog-actions>\n</form>\n", styles: [".dialog-button-with-info-icon{margin-top:10px;gap:12px;display:flex;align-items:center}\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"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -7980,10 +8079,10 @@ class NgxMatEntityBaseDisplayColumnValueComponent {
      * The entity for which the component gets displayed.
      */
     entity;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NgxMatEntityBaseDisplayColumnValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0", type: NgxMatEntityBaseDisplayColumnValueComponent, selector: "ngx-mat-entity-base-display-column-value", inputs: { entity: "entity" }, ngImport: i0, template: '', isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: NgxMatEntityBaseDisplayColumnValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: NgxMatEntityBaseDisplayColumnValueComponent, selector: "ngx-mat-entity-base-display-column-value", inputs: { entity: "entity" }, ngImport: i0, template: '', isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NgxMatEntityBaseDisplayColumnValueComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: NgxMatEntityBaseDisplayColumnValueComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngx-mat-entity-base-display-column-value',
@@ -8273,10 +8372,10 @@ class NgxMatEntityEditDialogComponent {
     editActionDisabled(action) {
         return runInInjectionContext(this.injector, () => !action.enabled(this.entityPriorChanges));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NgxMatEntityEditDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.MatDialogRef }, { token: i0.EnvironmentInjector }, { 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.0", type: NgxMatEntityEditDialogComponent, isStandalone: true, selector: "ngx-mat-entity-edit-dialog", outputs: { unsavedChanges: "unsavedChanges" }, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<div class=\"mat-dialog-title\">\n    <div>{{data.editData.title(entityPriorChanges)}}</div>\n\n    <div class=\"actions-container\">\n        @if (data.editData.actions.length) {\n            <button type=\"button\" mat-raised-button [matMenuTriggerFor]=\"menu\">\n                {{data.editData.actionsLabel}}\n            </button>\n        }\n        <mat-menu #menu=\"matMenu\">\n            @for (action of data.editData.actions; track $index) {\n                <button type=\"button\" mat-menu-item [disabled]=\"editActionDisabled(action)\" (click)=\"runEditAction(action)\">\n                    {{action.displayName}}\n                </button>\n            }\n        </mat-menu>\n    \n        @if (allowDelete) {\n            <button type=\"button\" mat-raised-button color=\"warn\" class=\"delete-button\" tabindex=\"-1\" (click)=\"delete()\">\n                {{data.editData.deleteButtonLabel}}\n            </button>\n        }\n    </div>\n</div>\n\n<form>\n    <mat-dialog-content>\n        <ngx-mat-entity-form [hideOmitForEdit]=\"true\" [isEntityReadOnly]=\"isEntityReadOnly\" [entity]=\"data.entity\" (formChange)=\"checkEntity()\">\n        </ngx-mat-entity-form>\n    </mat-dialog-content>\n    \n    <mat-dialog-actions>\n        <div class=\"d-flex align-items-center gap-3\" style=\"margin-top: 10px;\">\n            <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n                [class.badge-changes]=\"!validationErrors.length\"   \n                [disabled]=\"isEntityReadOnly || !isEntityValid || !isEntityDirty\"\n                [matBadge]=\"validationErrors.length > 0 ? validationErrors.length : changes.length\"\n                [matBadgeHidden]=\"!validationErrors.length && !changes.length\"\n                (click)=\"edit()\"\n            >\n                {{data.editData.confirmButtonLabel}}\n            </button>\n            @if (validationErrors.length || changes.length) {\n                <ngx-mat-entity-tooltip [tooltipContent]=\"tooltipContent\"></ngx-mat-entity-tooltip>\n            }\n        </div>\n\n\n        <button type=\"button\" mat-raised-button class=\"cancel-button\" (click)=\"cancel()\">\n            {{data.editData.cancelButtonLabel}}\n        </button>\n    </mat-dialog-actions>\n</form>\n", styles: ["::ng-deep .badge-changes .mat-badge-content{background-color:orange;color:#fff}.actions-container{display:flex;gap:10px}\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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: 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: MatBadgeModule }, { kind: "directive", type: i10.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: TooltipComponent, selector: "ngx-mat-entity-tooltip", inputs: ["tooltipContent"] }, { kind: "component", type: NgxMatEntityFormComponent, selector: "ngx-mat-entity-form", inputs: ["entity", "isEntityReadOnly", "hideOmitForCreate", "hideOmitForEdit", "additionalOmitKeys"], outputs: ["formChange", "selectedTabChange"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: NgxMatEntityEditDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.MatDialogRef }, { token: i0.EnvironmentInjector }, { 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: NgxMatEntityEditDialogComponent, isStandalone: true, selector: "ngx-mat-entity-edit-dialog", outputs: { unsavedChanges: "unsavedChanges" }, ngImport: i0, template: "<!-- eslint-disable angular/no-call-expression -->\n<div class=\"mat-dialog-title\">\n    <div>{{data.editData.title(entityPriorChanges)}}</div>\n\n    <div class=\"actions-container\">\n        @if (data.editData.actions.length) {\n            <button type=\"button\" mat-raised-button [matMenuTriggerFor]=\"menu\">\n                {{data.editData.actionsLabel}}\n            </button>\n        }\n        <mat-menu #menu=\"matMenu\">\n            @for (action of data.editData.actions; track $index) {\n                <button type=\"button\" mat-menu-item [disabled]=\"editActionDisabled(action)\" (click)=\"runEditAction(action)\">\n                    {{action.displayName}}\n                </button>\n            }\n        </mat-menu>\n    \n        @if (allowDelete) {\n            <button type=\"button\" mat-raised-button color=\"warn\" class=\"delete-button\" tabindex=\"-1\" (click)=\"delete()\">\n                {{data.editData.deleteButtonLabel}}\n            </button>\n        }\n    </div>\n</div>\n\n<form>\n    <mat-dialog-content>\n        <ngx-mat-entity-form [hideOmitForEdit]=\"true\" [isEntityReadOnly]=\"isEntityReadOnly\" [entity]=\"data.entity\" (formChange)=\"checkEntity()\">\n        </ngx-mat-entity-form>\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]=\"!validationErrors.length\"   \n                [disabled]=\"isEntityReadOnly || !isEntityValid || !isEntityDirty\"\n                [matBadge]=\"validationErrors.length > 0 ? validationErrors.length : changes.length\"\n                [matBadgeHidden]=\"!validationErrors.length && !changes.length\"\n                (click)=\"edit()\"\n            >\n                {{data.editData.confirmButtonLabel}}\n            </button>\n            @if (validationErrors.length || changes.length) {\n                <ngx-mat-entity-tooltip [tooltipContent]=\"tooltipContent\"></ngx-mat-entity-tooltip>\n            }\n        </div>\n\n\n        <button type=\"button\" mat-raised-button class=\"cancel-button\" (click)=\"cancel()\">\n            {{data.editData.cancelButtonLabel}}\n        </button>\n    </mat-dialog-actions>\n</form>\n", styles: ["::ng-deep .badge-changes .mat-badge-content{background-color:orange;color:#fff}.actions-container{display:flex;gap:10px}.dialog-button-with-info-icon{margin-top:10px;gap:12px;display:flex;align-items:center}\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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: 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: MatBadgeModule }, { kind: "directive", type: i10.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: TooltipComponent, selector: "ngx-mat-entity-tooltip", inputs: ["tooltipContent"] }, { kind: "component", type: NgxMatEntityFormComponent, selector: "ngx-mat-entity-form", inputs: ["entity", "isEntityReadOnly", "hideOmitForCreate", "hideOmitForEdit", "additionalOmitKeys"], outputs: ["formChange", "selectedTabChange"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NgxMatEntityEditDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: NgxMatEntityEditDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-mat-entity-edit-dialog', standalone: true, imports: [
                         CommonModule,
@@ -8287,7 +8386,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImpor
                         MatBadgeModule,
                         TooltipComponent,
                         NgxMatEntityFormComponent
-                    ], template: "<!-- eslint-disable angular/no-call-expression -->\n<div class=\"mat-dialog-title\">\n    <div>{{data.editData.title(entityPriorChanges)}}</div>\n\n    <div class=\"actions-container\">\n        @if (data.editData.actions.length) {\n            <button type=\"button\" mat-raised-button [matMenuTriggerFor]=\"menu\">\n                {{data.editData.actionsLabel}}\n            </button>\n        }\n        <mat-menu #menu=\"matMenu\">\n            @for (action of data.editData.actions; track $index) {\n                <button type=\"button\" mat-menu-item [disabled]=\"editActionDisabled(action)\" (click)=\"runEditAction(action)\">\n                    {{action.displayName}}\n                </button>\n            }\n        </mat-menu>\n    \n        @if (allowDelete) {\n            <button type=\"button\" mat-raised-button color=\"warn\" class=\"delete-button\" tabindex=\"-1\" (click)=\"delete()\">\n                {{data.editData.deleteButtonLabel}}\n            </button>\n        }\n    </div>\n</div>\n\n<form>\n    <mat-dialog-content>\n        <ngx-mat-entity-form [hideOmitForEdit]=\"true\" [isEntityReadOnly]=\"isEntityReadOnly\" [entity]=\"data.entity\" (formChange)=\"checkEntity()\">\n        </ngx-mat-entity-form>\n    </mat-dialog-content>\n    \n    <mat-dialog-actions>\n        <div class=\"d-flex align-items-center gap-3\" style=\"margin-top: 10px;\">\n            <button type=\"submit\" mat-raised-button matBadgeColor=\"warn\"\n                [class.badge-changes]=\"!validationErrors.length\"   \n                [disabled]=\"isEntityReadOnly || !isEntityValid || !isEntityDirty\"\n                [matBadge]=\"validationErrors.length > 0 ? validationErrors.length : changes.length\"\n                [matBadgeHidden]=\"!validationErrors.length && !changes.length\"\n                (click)=\"edit()\"\n            >\n                {{data.editData.confirmButtonLabel}}\n            </button>\n            @if (validationErrors.length || changes.length) {\n                <ngx-mat-entity-tooltip [tooltipContent]=\"tooltipContent\"></ngx-mat-entity-tooltip>\n            }\n        </div>\n\n\n        <button type=\"button\" mat-raised-button class=\"cancel-button\" (click)=\"cancel()\">\n            {{data.editData.cancelButtonLabel}}\n        </button>\n    </mat-dialog-actions>\n</form>\n", styles: ["::ng-deep .badge-changes .mat-badge-content{background-color:orange;color:#fff}.actions-container{display:flex;gap:10px}\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"] }]
+                    ], template: "<!-- eslint-disable angular/no-call-expression -->\n<div class=\"mat-dialog-title\">\n    <div>{{data.editData.title(entityPriorChanges)}}</div>\n\n    <div class=\"actions-container\">\n        @if (data.editData.actions.length) {\n            <button type=\"button\" mat-raised-button [matMenuTriggerFor]=\"menu\">\n                {{data.editData.actionsLabel}}\n            </button>\n        }\n        <mat-menu #menu=\"matMenu\">\n            @for (action of data.editData.actions; track $index) {\n                <button type=\"button\" mat-menu-item [disabled]=\"editActionDisabled(action)\" (click)=\"runEditAction(action)\">\n                    {{action.displayName}}\n                </button>\n            }\n        </mat-menu>\n    \n        @if (allowDelete) {\n            <button type=\"button\" mat-raised-button color=\"warn\" class=\"delete-button\" tabindex=\"-1\" (click)=\"delete()\">\n                {{data.editData.deleteButtonLabel}}\n            </button>\n        }\n    </div>\n</div>\n\n<form>\n    <mat-dialog-content>\n        <ngx-mat-entity-form [hideOmitForEdit]=\"true\" [isEntityReadOnly]=\"isEntityReadOnly\" [entity]=\"data.entity\" (formChange)=\"checkEntity()\">\n        </ngx-mat-entity-form>\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]=\"!validationErrors.length\"   \n                [disabled]=\"isEntityReadOnly || !isEntityValid || !isEntityDirty\"\n                [matBadge]=\"validationErrors.length > 0 ? validationErrors.length : changes.length\"\n                [matBadgeHidden]=\"!validationErrors.length && !changes.length\"\n                (click)=\"edit()\"\n            >\n                {{data.editData.confirmButtonLabel}}\n            </button>\n            @if (validationErrors.length || changes.length) {\n                <ngx-mat-entity-tooltip [tooltipContent]=\"tooltipContent\"></ngx-mat-entity-tooltip>\n            }\n        </div>\n\n\n        <button type=\"button\" mat-raised-button class=\"cancel-button\" (click)=\"cancel()\">\n            {{data.editData.cancelButtonLabel}}\n        </button>\n    </mat-dialog-actions>\n</form>\n", styles: ["::ng-deep .badge-changes .mat-badge-content{background-color:orange;color:#fff}.actions-container{display:flex;gap:10px}.dialog-button-with-info-icon{margin-top:10px;gap:12px;display:flex;align-items:center}\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"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -8565,10 +8664,10 @@ class NgxMatEntityTableComponent {
             return !action.enabled(this.selected);
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", 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.0", 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=\"row\">\n    <mat-form-field class=\"col-lg-8 col-md-6 col-sm-12\">\n        <mat-label>{{data.baseData.searchLabel}}</mat-label>\n        <input matInput [(ngModel)]=\"searchString\">\n    </mat-form-field>\n    @if (data.baseData.tableActions.length) {\n        <div\n            [class.col-lg-2]=\"allowCreate\"\n            [class.col-lg-4]=\"!allowCreate\"\n            [class.col-md-3]=\"allowCreate\"\n            [class.col-md-6]=\"!allowCreate\"\n            [class.col-sm-6]=\"allowCreate\"\n            [class.col-sm-12]=\"!allowCreate\"\n        >\n            <button type=\"button\" class=\"actions-button\" mat-raised-button [matMenuTriggerFor]=\"menu\">\n                {{data.baseData.tableActionsLabel}}\n            </button>\n        </div>\n    }\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.col-lg-2]=\"data.baseData.tableActions.length\"\n            [class.col-lg-4]=\"!data.baseData.tableActions.length\"\n            [class.col-md-3]=\"data.baseData.tableActions.length\"\n            [class.col-md-6]=\"!data.baseData.tableActions.length\"\n            [class.col-sm-6]=\"data.baseData.tableActions.length\"\n            [class.col-sm-12]=\"!data.baseData.tableActions.length\"\n        >\n            <button type=\"button\" class=\"create-button\" mat-raised-button (click)=\"createEntity()\">\n                {{data.baseData.createButtonLabel}}\n            </button>\n        </div>\n    }\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"], 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 ɵ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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NgxMatEntityTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: NgxMatEntityTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-mat-entity-table', standalone: true, imports: [
                         CommonModule,
@@ -8580,12 +8679,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImpor
                         MatMenuModule,
                         MatDialogModule,
                         MatProgressSpinnerModule,
-                        NgxMatEntityCreateDialogComponent,
-                        NgxMatEntityEditDialogComponent,
-                        DisplayColumnValueComponent,
-                        DynamicStyleClassDirective,
                         CustomTableComponent
-                    ], template: " \n<!-- eslint-disable angular/no-call-expression -->\n<h1 class=\"title\">{{data.baseData.title}}</h1>\n\n<div class=\"row\">\n    <mat-form-field class=\"col-lg-8 col-md-6 col-sm-12\">\n        <mat-label>{{data.baseData.searchLabel}}</mat-label>\n        <input matInput [(ngModel)]=\"searchString\">\n    </mat-form-field>\n    @if (data.baseData.tableActions.length) {\n        <div\n            [class.col-lg-2]=\"allowCreate\"\n            [class.col-lg-4]=\"!allowCreate\"\n            [class.col-md-3]=\"allowCreate\"\n            [class.col-md-6]=\"!allowCreate\"\n            [class.col-sm-6]=\"allowCreate\"\n            [class.col-sm-12]=\"!allowCreate\"\n        >\n            <button type=\"button\" class=\"actions-button\" mat-raised-button [matMenuTriggerFor]=\"menu\">\n                {{data.baseData.tableActionsLabel}}\n            </button>\n        </div>\n    }\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.col-lg-2]=\"data.baseData.tableActions.length\"\n            [class.col-lg-4]=\"!data.baseData.tableActions.length\"\n            [class.col-md-3]=\"data.baseData.tableActions.length\"\n            [class.col-md-6]=\"!data.baseData.tableActions.length\"\n            [class.col-sm-6]=\"data.baseData.tableActions.length\"\n            [class.col-sm-12]=\"!data.baseData.tableActions.length\"\n        >\n            <button type=\"button\" class=\"create-button\" mat-raised-button (click)=\"createEntity()\">\n                {{data.baseData.createButtonLabel}}\n            </button>\n        </div>\n    }\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"] }]
+                    ], 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"] }]
         }], ctorParameters: () => [{ type: i1.MatDialog }, { type: i0.EnvironmentInjector }, { type: i2$6.Router }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [NGX_COMPLETE_GLOBAL_DEFAULT_VALUES]
@@ -8628,7 +8723,7 @@ class PropertyDecoratorConfig {
     omitForUpdate;
     /**
      * Defines the width of the input property when used inside the default create or edit dialog.
-     * Has 3 bootstrap values for different breakpoints for simple responsive design.
+     * Has 3 values for different breakpoints for simple responsive design based on bootstrap (1-12).
      * The first value sets the columns for the screen size lg, the second for md and the third for sm.
      * @default [6, 6, 12]
      */
@@ -8713,21 +8808,28 @@ class ArrayTableDecoratorConfig extends ArrayDecoratorConfig {
  */
 function array(metadata) {
     switch (metadata.itemType) {
-        case DecoratorTypes.OBJECT:
+        case DecoratorTypes.OBJECT: {
             return baseProperty(new EntityArrayDecoratorConfigInternal(metadata, needsUpdateGlobalDefaults), DecoratorTypes.ARRAY);
-        case DecoratorTypes.DATE:
+        }
+        case DecoratorTypes.DATE: {
             return baseProperty(new DateArrayDecoratorConfigInternal(metadata, needsUpdateGlobalDefaults), DecoratorTypes.ARRAY_DATE);
-        case DecoratorTypes.DATE_TIME:
+        }
+        case DecoratorTypes.DATE_TIME: {
             return baseProperty(new DateTimeArrayDecoratorConfigInternal(metadata, needsUpdateGlobalDefaults), DecoratorTypes.ARRAY_DATE_TIME);
-        case DecoratorTypes.DATE_RANGE:
+        }
+        case DecoratorTypes.DATE_RANGE: {
             return baseProperty(new DateRangeArrayDecoratorConfigInternal(metadata, needsUpdateGlobalDefaults), DecoratorTypes.ARRAY_DATE_RANGE);
-        case DecoratorTypes.STRING:
+        }
+        case DecoratorTypes.STRING: {
             return baseProperty(new StringChipsArrayDecoratorConfigInternal(metadata, needsUpdateGlobalDefaults), DecoratorTypes.ARRAY_STRING_CHIPS);
-        case DecoratorTypes.STRING_AUTOCOMPLETE:
+        }
+        case DecoratorTypes.STRING_AUTOCOMPLETE: {
             return baseProperty(new AutocompleteStringChipsArrayDecoratorConfigInternal(metadata, needsUpdateGlobalDefaults), DecoratorTypes.ARRAY_STRING_AUTOCOMPLETE_CHIPS);
-        default:
+        }
+        default: {
             // eslint-disable-next-line typescript/no-explicit-any, typescript/no-unsafe-member-access
             throw new Error(`Unknown itemType ${metadata.itemType}`);
+        }
     }
 }
 
@@ -8839,8 +8941,8 @@ class FileDecoratorConfig extends PropertyDecoratorConfig {
      */
     type;
     /**
-     * The class for the <i> tag used to remove a file from the input.
-     * @default 'fas fa-circle-minus'
+     * The icon used to remove a file from the input.
+     * @default faCircleMinus
      */
     deleteIcon;
     /**
@@ -8917,7 +9019,7 @@ class DefaultFileDecoratorConfigInternal extends PropertyDecoratorConfigInternal
         this.type = data.type;
         this.preview = false;
         this.multiple = data.multiple;
-        this.deleteIcon = data.deleteIcon ?? 'fas fa-circle-minus';
+        this.deleteIcon = data.deleteIcon ?? faCircleMinus;
         this.allowedMimeTypes = data.allowedMimeTypes ?? ['*'];
         this.maxSize = data.maxSize ?? 10;
         this.maxSizeTotal = data.maxSizeTotal ?? 100;
@@ -8961,7 +9063,7 @@ class ImageFileDecoratorConfigInternal extends PropertyDecoratorConfigInternal {
         this.allowedMimeTypes = data.allowedMimeTypes ?? ['image/*'];
         this.multiple = data.multiple;
         this.preview = data.preview ?? true;
-        this.deleteIcon = data.deleteIcon ?? 'fas fa-circle-minus';
+        this.deleteIcon = data.deleteIcon ?? faCircleMinus;
         this.maxSize = data.maxSize ?? 10;
         this.maxSizeTotal = data.maxSizeTotal ?? 100;
         this.mimeTypeErrorDialog = data.mimeTypeErrorDialog ?? getDefaultMimeTypeErrorDialogData(data);
@@ -9033,13 +9135,16 @@ function getDefaultMaxSizeTotalErrorDialogData(data) {
  */
 function file(metadata) {
     switch (metadata.type) {
-        case 'other':
+        case 'other': {
             return baseProperty(new DefaultFileDecoratorConfigInternal(metadata), DecoratorTypes.FILE_DEFAULT, [EntityUtilities.FILENAMES_KEY]);
-        case 'image':
+        }
+        case 'image': {
             return baseProperty(new ImageFileDecoratorConfigInternal(metadata), DecoratorTypes.FILE_IMAGE, [EntityUtilities.FILENAMES_KEY, EntityUtilities.MULTI_PREVIEW_IMAGES_KEY, EntityUtilities.SINGLE_PREVIEW_IMAGE_KEY]);
-        default:
+        }
+        default: {
             // eslint-disable-next-line typescript/no-unsafe-member-access, typescript/no-explicit-any
             throw new Error(`Unknown metadata type ${metadata.type}`);
+        }
     }
 }
 
@@ -9135,12 +9240,15 @@ function defaultFormatThumbLabelValue(value) {
  */
 function number(metadata) {
     switch (metadata.displayStyle) {
-        case 'dropdown':
+        case 'dropdown': {
             return baseProperty(new DropdownNumberDecoratorConfigInternal(metadata), DecoratorTypes.NUMBER_DROPDOWN);
-        case 'slider':
+        }
+        case 'slider': {
             return baseProperty(new SliderNumberDecoratorConfigInternal(metadata), DecoratorTypes.NUMBER_SLIDER);
-        default:
+        }
+        default: {
             return baseProperty(new DefaultNumberDecoratorConfigInternal(metadata), DecoratorTypes.NUMBER);
+        }
     }
 }
 
@@ -9213,10 +9321,12 @@ class DropdownObjectDecoratorConfigInternal extends PropertyDecoratorConfigInter
 function object(metadata) {
     // eslint-disable-next-line sonar/no-small-switch
     switch (metadata.displayStyle) {
-        case 'dropdown':
+        case 'dropdown': {
             return baseProperty(new DropdownObjectDecoratorConfigInternal(metadata), DecoratorTypes.OBJECT_DROPDOWN);
-        default:
+        }
+        default: {
             return baseProperty(new DefaultObjectDecoratorConfigInternal(metadata), DecoratorTypes.OBJECT);
+        }
     }
 }
 
@@ -9291,10 +9401,10 @@ class NumberDirective {
         }
         e.preventDefault();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NumberDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0", type: NumberDirective, isStandalone: true, selector: "[number]", host: { listeners: { "keydown": "onKeyDown($event)" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: NumberDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.7", type: NumberDirective, isStandalone: true, selector: "[number]", host: { listeners: { "keydown": "onKeyDown($event)" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NumberDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: NumberDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[number]',