ngx-material-entity 15.1.0 → 15.1.2

package/fesm2020/ngx-material-entity.mjs

@@ -45,89 +45,6 @@ import { MatSort } from '@angular/material/sort';
 import * as i9 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
 
-/**
- * Encapsulates all functionality of Reflect.
- */
-class ReflectUtilities {
-    /**
-     * Gets the metadata value for the provided metadata key on the target object or its prototype chain.
-     *
-     * @param metadataKey - A key used to store and retrieve metadata.
-     * @param target - The target object on which the metadata is defined.
-     * @param propertyKey - The property key for the target.
-     * @returns The metadata value for the metadata key if found; otherwise, undefined.
-     */
-    static getMetadata(metadataKey, target, propertyKey) {
-        return Reflect.getMetadata(metadataKey, target, propertyKey);
-    }
-    /**
-     * Returns the string and symbol keys of the own properties of an object. The own properties of an object
-     * are those that are defined directly on that object, and are not inherited from the object's prototype.
-     *
-     * @param target - Object that contains the own properties.
-     * @returns The keys of the given object.
-     */
-    static ownKeys(target) {
-        return Reflect.ownKeys(target);
-    }
-    /**
-     * Gets the property of target, equivalent to `target[propertyKey]`.
-     *
-     * @param target - Object that contains the property on itself or in its prototype chain.
-     * @param propertyKey - The property name.
-     * @returns The property of the target of the given key.
-     */
-    static get(target, propertyKey) {
-        return Reflect.get(target, propertyKey);
-    }
-    /**
-     * Sets the property of target, equivalent to `target[propertyKey] = value`.
-     *
-     * @param target - Object that contains the property on itself or in its prototype chain.
-     * @param propertyKey - The property name.
-     * @param value - The value to set the property to.
-     * @returns If setting the value was successful.
-     */
-    static set(target, propertyKey, value) {
-        return Reflect.set(target, propertyKey, value);
-    }
-    /**
-     * Equivalent to `propertyKey in target`.
-     *
-     * @param target - Object that contains the property on itself or in its prototype chain.
-     * @param propertyKey - Name of the property.
-     * @returns Whether or not the given target has the key.
-     */
-    static has(target, propertyKey) {
-        return Reflect.has(target, propertyKey);
-    }
-    /**
-     * Define a unique metadata entry on the target.
-     *
-     * @param metadataKey - A key used to store and retrieve metadata.
-     * @param metadataValue - A value that contains attached metadata.
-     * @param target - The target object on which to define metadata.
-     * @param propertyKey - The property key for the target.
-     */
-    static defineMetadata(metadataKey, metadataValue, target, propertyKey) {
-        Reflect.defineMetadata(metadataKey, metadataValue, target, propertyKey);
-    }
-}
-
-/**
- * The base decorator for setting metadata on properties.
- *
- * @param metadata - The metadata to define.
- * @param type - The type of metadata.
- * @returns The method that sets the metadata.
- */
-function baseProperty(metadata, type) {
-    return function (target, propertyKey) {
-        ReflectUtilities.defineMetadata('metadata', metadata, target, propertyKey);
-        ReflectUtilities.defineMetadata('type', type, target, propertyKey);
-    };
-}
-
 /**
  * The enum Values for all the different DecoratorTypes.
  */
@@ -160,132 +77,6 @@ var DecoratorTypes;
     DecoratorTypes["CUSTOM"] = "custom";
 })(DecoratorTypes || (DecoratorTypes = {}));
 
-/**
- * The internal Position. Sets default values and validates user input.
- */
-class PositionInternal {
-    constructor(data) {
-        this.validateInput(data);
-        this.row = data?.row ?? -1;
-        this.order = data?.order ?? -1;
-        this.tab = data?.tab ?? -1;
-        this.tabName = data?.tabName;
-    }
-    validateInput(data) {
-        if (data?.order != null) {
-            if (data.order < 1) {
-                throw new Error('order must be at least 1');
-            }
-            if (data.order > 12) {
-                throw new Error('order cannot be bigger than 12 (the minimum value for a bootstrap column)');
-            }
-        }
-        if (data?.row != null && data.row < 1) {
-            throw new Error('row must be at least 1');
-        }
-        if (data?.tab != null && data.tab < 2) {
-            throw new Error('tab must be at least 2');
-        }
-    }
-}
-/**
- * The internal PropertyDecoratorConfig. Sets default values.
- */
-class PropertyDecoratorConfigInternal {
-    constructor(data) {
-        this.display = data.display ?? true;
-        this.displayName = data.displayName;
-        this.required = data.required ?? true;
-        this.omitForCreate = data.omitForCreate ?? false;
-        this.omitForUpdate = data.omitForUpdate ?? false;
-        this.defaultWidths = data.defaultWidths ?? [6, 6, 12];
-        this.position = new PositionInternal(data.position);
-    }
-}
-
-/**
- * The internal DropdownStringDecoratorConfig. Sets default values.
- */
-class DropdownStringDecoratorConfigInternal extends PropertyDecoratorConfigInternal {
-    constructor(data) {
-        super(data);
-        this.displayStyle = data.displayStyle;
-        this.dropdownValues = data.dropdownValues;
-    }
-}
-/**
- * The internal DefaultStringDecoratorConfig. Sets default values.
- */
-class DefaultStringDecoratorConfigInternal extends PropertyDecoratorConfigInternal {
-    constructor(data) {
-        super(data);
-        this.displayStyle = data.displayStyle;
-        this.minLength = data.minLength;
-        this.maxLength = data.maxLength;
-        this.regex = data.regex;
-    }
-}
-/**
- * The internal TextboxStringDecoratorConfig. Sets default values.
- */
-class TextboxStringDecoratorConfigInternal extends PropertyDecoratorConfigInternal {
-    constructor(data) {
-        super(data);
-        this.displayStyle = data.displayStyle;
-        this.minLength = data.minLength;
-        this.maxLength = data.maxLength;
-    }
-}
-/**
- * The internal AutocompleteStringDecoratorConfig. Sets default values.
- */
-class AutocompleteStringDecoratorConfigInternal extends PropertyDecoratorConfigInternal {
-    constructor(data) {
-        super(data);
-        this.displayStyle = data.displayStyle;
-        this.autocompleteValues = data.autocompleteValues;
-        this.minLength = data.minLength;
-        this.maxLength = data.maxLength;
-        this.regex = data.regex;
-    }
-}
-/**
- * The internal PasswordStringDecoratorConfig. Sets default values.
- */
-class PasswordStringDecoratorConfigInternal extends PropertyDecoratorConfigInternal {
-    constructor(data) {
-        super(data);
-        this.displayStyle = data.displayStyle;
-        this.minLength = data.minLength;
-        this.maxLength = data.maxLength;
-        this.regex = data.regex;
-        this.needsConfirmation = data.needsConfirmation ?? true;
-        this.confirmationDisplayName = data.confirmationDisplayName ?? 'Confirm Password';
-        this.passwordsDontMatchErrorMessage = data.passwordsDontMatchErrorMessage ?? 'Passwords need to match!';
-    }
-}
-
-/**
- * Decorator for setting and getting string Property metadata.
- *
- * @param metadata - The metadata of the string property.
- * @returns The method that defines the metadata.
- */
-function string(metadata) {
-    switch (metadata.displayStyle) {
-        case 'dropdown':
-            return baseProperty(new DropdownStringDecoratorConfigInternal(metadata), DecoratorTypes.STRING_DROPDOWN);
-        case 'autocomplete':
-            return baseProperty(new AutocompleteStringDecoratorConfigInternal(metadata), DecoratorTypes.STRING_AUTOCOMPLETE);
-        case 'textbox':
-            return baseProperty(new TextboxStringDecoratorConfigInternal(metadata), DecoratorTypes.STRING_TEXTBOX);
-        case 'password':
-            return baseProperty(new PasswordStringDecoratorConfigInternal(metadata), DecoratorTypes.STRING_PASSWORD);
-        default:
-            return baseProperty(new DefaultStringDecoratorConfigInternal(metadata), DecoratorTypes.STRING);
-    }
-}
-
 /**
  * Encapsulates all functionality of lodash.
  */
@@ -360,6 +151,86 @@ class LodashUtilities {
     }
 }
 
+/**
+ * Encapsulates all functionality of Reflect.
+ */
+class ReflectUtilities {
+    /**
+     * Gets the metadata value for the provided metadata key on the target object or its prototype chain.
+     *
+     * @param metadataKey - A key used to store and retrieve metadata.
+     * @param target - The target object on which the metadata is defined.
+     * @param propertyKey - The property key for the target.
+     * @returns The metadata value for the metadata key if found; otherwise, undefined.
+     */
+    static getMetadata(metadataKey, target, propertyKey) {
+        return Reflect.getMetadata(metadataKey, target, propertyKey);
+    }
+    /**
+     * Returns the string and symbol keys of the own properties of an object. The own properties of an object
+     * are those that are defined directly on that object, and are not inherited from the object's prototype.
+     *
+     * @param target - Object that contains the own properties.
+     * @returns The keys of the given object.
+     */
+    static ownKeys(target) {
+        return Reflect.ownKeys(target);
+    }
+    /**
+     * Gets the property of target, equivalent to `target[propertyKey]`.
+     *
+     * @param target - Object that contains the property on itself or in its prototype chain.
+     * @param propertyKey - The property name.
+     * @returns The property of the target of the given key.
+     */
+    static get(target, propertyKey) {
+        return Reflect.get(target, propertyKey);
+    }
+    /**
+     * Sets the property of target, equivalent to `target[propertyKey] = value`.
+     *
+     * @param target - Object that contains the property on itself or in its prototype chain.
+     * @param propertyKey - The property name.
+     * @param value - The value to set the property to.
+     * @returns If setting the value was successful.
+     */
+    static set(target, propertyKey, value) {
+        return Reflect.set(target, propertyKey, value);
+    }
+    /**
+     * Equivalent to `propertyKey in target`.
+     *
+     * @param target - Object that contains the property on itself or in its prototype chain.
+     * @param propertyKey - Name of the property.
+     * @returns Whether or not the given target has the key.
+     */
+    static has(target, propertyKey) {
+        return Reflect.has(target, propertyKey);
+    }
+    /**
+     * Checks if the targets key entry has a metadata value for the given metadata key.
+     *
+     * @returns Whether the metadata is null or not.
+     * @param metadataKey - The key of the metadata on the property.
+     * @param target - Object that contains the property on itself or in its prototype chain.
+     * @param propertyKey - The key of the target.
+     */
+    static hasMetadata(metadataKey, target, propertyKey) {
+        return this.getMetadata(metadataKey, target, propertyKey) != null;
+    }
+    /**
+     * Define a unique metadata entry on the target.
+     *
+     * @param metadataKey - A key used to store and retrieve metadata.
+     * @param metadataValue - A value that contains attached metadata.
+     * @param target - The target object on which to define metadata.
+     * @param propertyKey - The property key for the target.
+     */
+    static defineMetadata(metadataKey, metadataValue, target, propertyKey) {
+        Reflect.defineMetadata(metadataKey, metadataValue, target, propertyKey);
+    }
+}
+
 const DAY_IN_MS = 1000 * 60 * 60 * 24;
 /**
  * Contains Helper Functions for handling date properties.
@@ -1363,6 +1234,13 @@ class EntityUtilities {
     static resetChangesOnEntity(entity, entityPriorChanges) {
         for (const key in entityPriorChanges) {
             ReflectUtilities.set(entity, key, ReflectUtilities.get(entityPriorChanges, key));
+            if (ReflectUtilities.hasMetadata(this.METADATA_KEYS_TO_RESET_KEY, entity, key)) {
+                for (const k of ReflectUtilities.getMetadata(this.METADATA_KEYS_TO_RESET_KEY, entity, key)) {
+                    if (ReflectUtilities.hasMetadata(k, entity, key)) {
+                        ReflectUtilities.defineMetadata(k, undefined, entity, key);
+                    }
+                }
+            }
         }
     }
     static getEntityRows(entity, tab, hideOmitForCreate, hideOmitForEdit) {
@@ -1399,7 +1277,7 @@ class EntityUtilities {
         const numberOfTabs = EntityUtilities.getNumberOfTabs(keys, entity);
         if (EntityUtilities.getEntityRows(entity, -1, hideOmitForCreate, hideOmitForEdit).length) {
             const firstTab = {
-                tabName: 'Tab 1',
+                tabName: EntityUtilities.getFirstTabName(entity),
                 tab: -1,
                 rows: EntityUtilities.getEntityRows(entity, -1, hideOmitForCreate, hideOmitForEdit)
             };
@@ -1438,6 +1316,12 @@ class EntityUtilities {
             .find(m => m.position.tab === tab && m.position.tabName)?.position.tabName;
         return providedTabName ?? `Tab ${tab}`;
     }
+    static getFirstTabName(entity) {
+        const providedTabName = EntityUtilities.keysOf(entity)
+            .map(k => EntityUtilities.getPropertyMetadata(entity, k))
+            .find(m => m.position.tabName && m.position.tab === -1)?.position.tabName;
+        return providedTabName ?? 'Tab 1';
+    }
     /**
      * Gets the keys of the provided entity correctly typed.
      *
@@ -1459,11 +1343,190 @@ class EntityUtilities {
         return keys;
     }
 }
+/**
+ * The key for all keys of metadata that should be set to undefined when the entity gets reset.
+ */
+EntityUtilities.METADATA_KEYS_TO_RESET_KEY = 'metadataKeysToReset';
+/**
+ * The key for the metadata that saves the single preview image value on image properties.
+ */
+EntityUtilities.SINGLE_PREVIEW_IMAGE_KEY = 'singlePreviewImage';
+/**
+ * The key for the metadata that saves the multi preview images value on image properties.
+ */
+EntityUtilities.MULTI_PREVIEW_IMAGES_KEY = 'multiPreviewImages';
+/**
+ * The key for the metadata that saves the filenames value on file properties.
+ */
+EntityUtilities.FILENAMES_KEY = 'fileNames';
+/**
+ * The key for the metadata that saves the confirm password value on password properties.
+ */
+EntityUtilities.CONFIRM_PASSWORD_KEY = 'confirmPassword';
+/**
+ * The key for the metadata that saves the time value on date time properties.
+ */
+EntityUtilities.TIME_KEY = 'time';
+/**
+ * The key for the metadata that saves the date range value on date range properties.
+ */
+EntityUtilities.DATE_RANGE_KEY = 'dateRange';
+/**
+ * The key for the metadata that saves the date range start value on date range properties.
+ */
+EntityUtilities.DATE_RANGE_START_KEY = 'dateRangeStart';
+/**
+ * The key for the metadata that saves the date range end value on date range properties.
+ */
+EntityUtilities.DATE_RANGE_END_KEY = 'dateRangeEnd';
 // eslint-disable-next-line @typescript-eslint/member-ordering, jsdoc/require-jsdoc, @typescript-eslint/typedef
 EntityUtilities.construct = EntityUtilities.new;
 // eslint-disable-next-line @typescript-eslint/member-ordering, jsdoc/require-jsdoc, @typescript-eslint/typedef
 EntityUtilities.build = EntityUtilities.new;
 
+/**
+ * The base decorator for setting metadata on properties.
+ *
+ * @param metadata - The metadata to define.
+ * @param type - The type of metadata.
+ * @param metadataKeysToReset - Any metadata keys which values should be set to undefined on reset.
+ * @returns The method that sets the metadata.
+ */
+function baseProperty(metadata, type, metadataKeysToReset) {
+    return function (target, propertyKey) {
+        ReflectUtilities.defineMetadata('metadata', metadata, target, propertyKey);
+        ReflectUtilities.defineMetadata('type', type, target, propertyKey);
+        // eslint-disable-next-line max-len
+        ReflectUtilities.defineMetadata(EntityUtilities.METADATA_KEYS_TO_RESET_KEY, metadataKeysToReset, target, propertyKey);
+    };
+}
+
+/**
+ * The internal Position. Sets default values and validates user input.
+ */
+class PositionInternal {
+    constructor(data) {
+        this.validateInput(data);
+        this.row = data?.row ?? -1;
+        this.order = data?.order ?? -1;
+        this.tab = data?.tab ?? -1;
+        this.tabName = data?.tabName;
+    }
+    validateInput(data) {
+        if (data?.order != null) {
+            if (data.order < 1) {
+                throw new Error('order must be at least 1');
+            }
+            if (data.order > 12) {
+                throw new Error('order cannot be bigger than 12 (the minimum value for a bootstrap column)');
+            }
+        }
+        if (data?.row != null && data.row < 1) {
+            throw new Error('row must be at least 1');
+        }
+        if (data?.tab != null && data.tab != -1 && data.tab < 2) {
+            throw new Error('tab must be either -1 for the first tab or at least 2');
+        }
+    }
+}
+/**
+ * The internal PropertyDecoratorConfig. Sets default values.
+ */
+class PropertyDecoratorConfigInternal {
+    constructor(data) {
+        this.display = data.display ?? true;
+        this.displayName = data.displayName;
+        this.required = data.required ?? true;
+        this.omitForCreate = data.omitForCreate ?? false;
+        this.omitForUpdate = data.omitForUpdate ?? false;
+        this.defaultWidths = data.defaultWidths ?? [6, 6, 12];
+        this.position = new PositionInternal(data.position);
+    }
+}
+
+/**
+ * The internal DropdownStringDecoratorConfig. Sets default values.
+ */
+class DropdownStringDecoratorConfigInternal extends PropertyDecoratorConfigInternal {
+    constructor(data) {
+        super(data);
+        this.displayStyle = data.displayStyle;
+        this.dropdownValues = data.dropdownValues;
+    }
+}
+/**
+ * The internal DefaultStringDecoratorConfig. Sets default values.
+ */
+class DefaultStringDecoratorConfigInternal extends PropertyDecoratorConfigInternal {
+    constructor(data) {
+        super(data);
+        this.displayStyle = data.displayStyle;
+        this.minLength = data.minLength;
+        this.maxLength = data.maxLength;
+        this.regex = data.regex;
+    }
+}
+/**
+ * The internal TextboxStringDecoratorConfig. Sets default values.
+ */
+class TextboxStringDecoratorConfigInternal extends PropertyDecoratorConfigInternal {
+    constructor(data) {
+        super(data);
+        this.displayStyle = data.displayStyle;
+        this.minLength = data.minLength;
+        this.maxLength = data.maxLength;
+    }
+}
+/**
+ * The internal AutocompleteStringDecoratorConfig. Sets default values.
+ */
+class AutocompleteStringDecoratorConfigInternal extends PropertyDecoratorConfigInternal {
+    constructor(data) {
+        super(data);
+        this.displayStyle = data.displayStyle;
+        this.autocompleteValues = data.autocompleteValues;
+        this.minLength = data.minLength;
+        this.maxLength = data.maxLength;
+        this.regex = data.regex;
+    }
+}
+/**
+ * The internal PasswordStringDecoratorConfig. Sets default values.
+ */
+class PasswordStringDecoratorConfigInternal extends PropertyDecoratorConfigInternal {
+    constructor(data) {
+        super(data);
+        this.displayStyle = data.displayStyle;
+        this.minLength = data.minLength;
+        this.maxLength = data.maxLength;
+        this.regex = data.regex;
+        this.needsConfirmation = data.needsConfirmation ?? true;
+        this.confirmationDisplayName = data.confirmationDisplayName ?? 'Confirm Password';
+        this.passwordsDontMatchErrorMessage = data.passwordsDontMatchErrorMessage ?? 'Passwords need to match!';
+    }
+}
+
+/**
+ * Decorator for setting and getting string Property metadata.
+ *
+ * @param metadata - The metadata of the string property.
+ * @returns The method that defines the metadata.
+ */
+function string(metadata) {
+    switch (metadata.displayStyle) {
+        case 'dropdown':
+            return baseProperty(new DropdownStringDecoratorConfigInternal(metadata), DecoratorTypes.STRING_DROPDOWN);
+        case 'autocomplete':
+            return baseProperty(new AutocompleteStringDecoratorConfigInternal(metadata), DecoratorTypes.STRING_AUTOCOMPLETE);
+        case 'textbox':
+            return baseProperty(new TextboxStringDecoratorConfigInternal(metadata), DecoratorTypes.STRING_TEXTBOX);
+        case 'password':
+            return baseProperty(new PasswordStringDecoratorConfigInternal(metadata), DecoratorTypes.STRING_PASSWORD, [EntityUtilities.CONFIRM_PASSWORD_KEY]);
+        default:
+            return baseProperty(new DefaultStringDecoratorConfigInternal(metadata), DecoratorTypes.STRING);
+    }
+}
+
 /**
  * A base Entity class with a builtin id.
  */
@@ -2284,6 +2347,24 @@ class DateRangeInputComponent extends NgxMatEntityBaseInputComponent {
         super(...arguments);
         this.defaultDateFilter = DateUtilities.defaultDateFilter;
     }
+    get dateRange() {
+        return ReflectUtilities.getMetadata(EntityUtilities.DATE_RANGE_KEY, this.entity, this.key);
+    }
+    set dateRange(value) {
+        ReflectUtilities.defineMetadata(EntityUtilities.DATE_RANGE_KEY, value, this.entity, this.key);
+    }
+    get dateRangeStart() {
+        return ReflectUtilities.getMetadata(EntityUtilities.DATE_RANGE_START_KEY, this.entity, this.key);
+    }
+    set dateRangeStart(value) {
+        ReflectUtilities.defineMetadata(EntityUtilities.DATE_RANGE_START_KEY, value, this.entity, this.key);
+    }
+    get dateRangeEnd() {
+        return ReflectUtilities.getMetadata(EntityUtilities.DATE_RANGE_END_KEY, this.entity, this.key);
+    }
+    set dateRangeEnd(value) {
+        ReflectUtilities.defineMetadata(EntityUtilities.DATE_RANGE_END_KEY, value, this.entity, this.key);
+    }
     ngOnInit() {
         super.ngOnInit();
         this.dateRange = LodashUtilities.cloneDeep(this.propertyValue) ?? EMPTY_DATERANGE;
@@ -2321,6 +2402,12 @@ class DateTimeInputComponent extends NgxMatEntityBaseInputComponent {
         this.DateUtilities = DateUtilities;
         this.defaultDateFilter = () => true;
     }
+    get time() {
+        return ReflectUtilities.getMetadata(EntityUtilities.TIME_KEY, this.entity, this.key);
+    }
+    set time(value) {
+        ReflectUtilities.defineMetadata(EntityUtilities.TIME_KEY, value, this.entity, this.key);
+    }
     ngOnInit() {
         super.ngOnInit();
         this.time = DateUtilities.getTimeFromDate(this.propertyValue);
@@ -2434,6 +2521,12 @@ class FileInputComponent {
         this.FileUtilities = FileUtilities;
         this.fileDataChangeEvent = new EventEmitter();
     }
+    get filenames() {
+        return ReflectUtilities.getMetadata(EntityUtilities.FILENAMES_KEY, this.entity, this.key);
+    }
+    set filenames(value) {
+        ReflectUtilities.defineMetadata(EntityUtilities.FILENAMES_KEY, value, this.entity, this.key);
+    }
     async ngOnInit() {
         if (this.metadata.multiple) {
             this.initMultiFile();
@@ -2581,12 +2674,16 @@ class FileInputComponent {
     }
 }
 FileInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: FileInputComponent, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-FileInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: FileInputComponent, selector: "file-input", inputs: { propertyValue: "propertyValue", metadata: "metadata", getValidationErrorMessage: "getValidationErrorMessage", isReadOnly: "isReadOnly" }, outputs: { fileDataChangeEvent: "fileDataChangeEvent" }, ngImport: i0, template: "<input #fileInput\n    type=\"file\" hidden\n    [multiple]=\"metadata.multiple\"\n    [accept]=\"FileUtilities.getAcceptString(metadata.allowedMimeTypes)\"\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        [(ngModel)]=\"filenames\" name=\"file\" #model=\"ngModel\"\n        [required]=\"metadata.required\"\n    >\n        <mat-chip-row *ngFor=\"let name of filenames\" (removed)=\"removeFile(name)\">\n            {{name}}\n            <span class=\"mat-mdc-chip-remove mat-mdc-chip-trailing-icon ngx-mat-grey\" (click)=\"downloadFile(name)\">\n                <i class=\"fas fa-download\"></i>\n            </span>\n            <button *ngIf=\"!isReadOnly\" type=\"button\" matChipRemove>\n                <i class=\"{{metadata.deleteIcon}}\"></i>\n            </button>\n        </mat-chip-row>\n        <input [matChipInputFor]=\"chipGrid\" [readonly]=\"true\" hidden>\n    </mat-chip-grid>\n    <button *ngIf=\"downloadAllEnabled()\" type=\"button\" class=\"ngx-mat-grey\" mat-icon-button matSuffix (click)=\"downloadAll()\">\n        <i class=\"fas fa-file-zipper\"></i>\n    </button>\n    <button type=\"button\" class=\"ngx-mat-grey\" mat-icon-button matSuffix [disabled]=\"isReadOnly\" (click)=\"fileInput.click()\">\n        <i class=\"fas fa-upload\"></i>\n    </button>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>\n\n<div *ngIf=\"metadata.dragAndDrop && !isReadOnly\" class=\"drag-drop\" dragDrop (files)=\"setFile($event)\">\n    <button type=\"button\" mat-icon-button [disabled]=\"isReadOnly\" (click)=\"fileInput.click()\">\n        <i class=\"fas fa-file-arrow-up ngx-mat-grey\"></i>\n    </button>\n</div>", styles: ["mat-form-field{width:100%}.ngx-mat-grey{opacity:1;color:#0000008a}.drag-drop{display:flex;align-items:center;justify-content:center;height:200px;border:2px dashed rgba(0,0,0,.54);border-radius:15px;margin-top:5px;margin-bottom:5px}.drag-drop i{font-size:30px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5$3.MatChipGrid, selector: "mat-chip-grid", inputs: ["tabIndex", "disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i5$3.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i5$3.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i5$3.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "editable"], outputs: ["edited"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: DragDropDirective, selector: "[dragDrop]", outputs: ["files"] }] });
+FileInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: FileInputComponent, selector: "file-input", inputs: { propertyValue: "propertyValue", entity: "entity", key: "key", metadata: "metadata", getValidationErrorMessage: "getValidationErrorMessage", isReadOnly: "isReadOnly" }, outputs: { fileDataChangeEvent: "fileDataChangeEvent" }, ngImport: i0, template: "<input #fileInput\n    type=\"file\" hidden\n    [multiple]=\"metadata.multiple\"\n    [accept]=\"FileUtilities.getAcceptString(metadata.allowedMimeTypes)\"\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        [(ngModel)]=\"filenames\" name=\"file\" #model=\"ngModel\"\n        [required]=\"metadata.required\"\n    >\n        <mat-chip-row *ngFor=\"let name of filenames\" (removed)=\"removeFile(name)\">\n            {{name}}\n            <span class=\"mat-mdc-chip-remove mat-mdc-chip-trailing-icon ngx-mat-grey\" (click)=\"downloadFile(name)\">\n                <i class=\"fas fa-download\"></i>\n            </span>\n            <button *ngIf=\"!isReadOnly\" type=\"button\" matChipRemove>\n                <i class=\"{{metadata.deleteIcon}}\"></i>\n            </button>\n        </mat-chip-row>\n        <input [matChipInputFor]=\"chipGrid\" [readonly]=\"true\" hidden>\n    </mat-chip-grid>\n    <button *ngIf=\"downloadAllEnabled()\" type=\"button\" class=\"ngx-mat-grey\" mat-icon-button matSuffix (click)=\"downloadAll()\">\n        <i class=\"fas fa-file-zipper\"></i>\n    </button>\n    <button type=\"button\" class=\"ngx-mat-grey\" mat-icon-button matSuffix [disabled]=\"isReadOnly\" (click)=\"fileInput.click()\">\n        <i class=\"fas fa-upload\"></i>\n    </button>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>\n\n<div *ngIf=\"metadata.dragAndDrop && !isReadOnly\" class=\"drag-drop\" dragDrop (files)=\"setFile($event)\">\n    <button type=\"button\" mat-icon-button [disabled]=\"isReadOnly\" (click)=\"fileInput.click()\">\n        <i class=\"fas fa-file-arrow-up ngx-mat-grey\"></i>\n    </button>\n</div>", styles: ["mat-form-field{width:100%}.ngx-mat-grey{opacity:1;color:#0000008a}.drag-drop{display:flex;align-items:center;justify-content:center;height:200px;border:2px dashed rgba(0,0,0,.54);border-radius:15px;margin-top:5px;margin-bottom:5px}.drag-drop i{font-size:30px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5$3.MatChipGrid, selector: "mat-chip-grid", inputs: ["tabIndex", "disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i5$3.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i5$3.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i5$3.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "editable"], outputs: ["edited"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: DragDropDirective, selector: "[dragDrop]", outputs: ["files"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: FileInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'file-input', template: "<input #fileInput\n    type=\"file\" hidden\n    [multiple]=\"metadata.multiple\"\n    [accept]=\"FileUtilities.getAcceptString(metadata.allowedMimeTypes)\"\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        [(ngModel)]=\"filenames\" name=\"file\" #model=\"ngModel\"\n        [required]=\"metadata.required\"\n    >\n        <mat-chip-row *ngFor=\"let name of filenames\" (removed)=\"removeFile(name)\">\n            {{name}}\n            <span class=\"mat-mdc-chip-remove mat-mdc-chip-trailing-icon ngx-mat-grey\" (click)=\"downloadFile(name)\">\n                <i class=\"fas fa-download\"></i>\n            </span>\n            <button *ngIf=\"!isReadOnly\" type=\"button\" matChipRemove>\n                <i class=\"{{metadata.deleteIcon}}\"></i>\n            </button>\n        </mat-chip-row>\n        <input [matChipInputFor]=\"chipGrid\" [readonly]=\"true\" hidden>\n    </mat-chip-grid>\n    <button *ngIf=\"downloadAllEnabled()\" type=\"button\" class=\"ngx-mat-grey\" mat-icon-button matSuffix (click)=\"downloadAll()\">\n        <i class=\"fas fa-file-zipper\"></i>\n    </button>\n    <button type=\"button\" class=\"ngx-mat-grey\" mat-icon-button matSuffix [disabled]=\"isReadOnly\" (click)=\"fileInput.click()\">\n        <i class=\"fas fa-upload\"></i>\n    </button>\n    <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n</mat-form-field>\n\n<div *ngIf=\"metadata.dragAndDrop && !isReadOnly\" class=\"drag-drop\" dragDrop (files)=\"setFile($event)\">\n    <button type=\"button\" mat-icon-button [disabled]=\"isReadOnly\" (click)=\"fileInput.click()\">\n        <i class=\"fas fa-file-arrow-up ngx-mat-grey\"></i>\n    </button>\n</div>", styles: ["mat-form-field{width:100%}.ngx-mat-grey{opacity:1;color:#0000008a}.drag-drop{display:flex;align-items:center;justify-content:center;height:200px;border:2px dashed rgba(0,0,0,.54);border-radius:15px;margin-top:5px;margin-bottom:5px}.drag-drop i{font-size:30px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.MatDialog }]; }, propDecorators: { propertyValue: [{
                 type: Input
+            }], entity: [{
+                type: Input
+            }], key: [{
+                type: Input
             }], metadata: [{
                 type: Input
             }], getValidationErrorMessage: [{
@@ -2609,10 +2706,10 @@ class FileDefaultInputComponent extends NgxMatEntityBaseInputComponent {
     }
 }
 FileDefaultInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: FileDefaultInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-FileDefaultInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: FileDefaultInputComponent, 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        (fileDataChangeEvent)=\"refreshFileData($event)\"\n        [propertyValue]=\"propertyValue\"\n        [metadata]=\"metadata\"\n        [getValidationErrorMessage]=\"getValidationErrorMessage\"\n        [isReadOnly]=\"isReadOnly\"\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", "metadata", "getValidationErrorMessage", "isReadOnly"], outputs: ["fileDataChangeEvent"] }] });
+FileDefaultInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: FileDefaultInputComponent, 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        (fileDataChangeEvent)=\"refreshFileData($event)\"\n        [propertyValue]=\"propertyValue\"\n        [metadata]=\"metadata\"\n        [getValidationErrorMessage]=\"getValidationErrorMessage\"\n        [isReadOnly]=\"isReadOnly\"\n        [entity]=\"entity\"\n        [key]=\"key\"\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: "15.2.3", ngImport: i0, type: FileDefaultInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'file-default-input', template: "<div [class.file-input]=\"metadata.dragAndDrop\" [class.mat-elevation-z8]=\"metadata.dragAndDrop\">\n    <file-input\n        (fileDataChangeEvent)=\"refreshFileData($event)\"\n        [propertyValue]=\"propertyValue\"\n        [metadata]=\"metadata\"\n        [getValidationErrorMessage]=\"getValidationErrorMessage\"\n        [isReadOnly]=\"isReadOnly\"\n    >\n    </file-input>\n</div>", styles: [".file-input{margin-top:15px;margin-bottom:15px;padding:15px;border-radius:5px}\n"] }]
+            args: [{ selector: 'file-default-input', template: "<div [class.file-input]=\"metadata.dragAndDrop\" [class.mat-elevation-z8]=\"metadata.dragAndDrop\">\n    <file-input\n        (fileDataChangeEvent)=\"refreshFileData($event)\"\n        [propertyValue]=\"propertyValue\"\n        [metadata]=\"metadata\"\n        [getValidationErrorMessage]=\"getValidationErrorMessage\"\n        [isReadOnly]=\"isReadOnly\"\n        [entity]=\"entity\"\n        [key]=\"key\"\n    >\n    </file-input>\n</div>", styles: [".file-input{margin-top:15px;margin-bottom:15px;padding:15px;border-radius:5px}\n"] }]
         }] });
 
 // eslint-disable-next-line max-len
@@ -2626,6 +2723,18 @@ class FileImageInputComponent extends NgxMatEntityBaseInputComponent {
         this.imageIndex = 0;
         this.placeHolder = placeholder;
     }
+    get multiPreviewImages() {
+        return ReflectUtilities.getMetadata(EntityUtilities.MULTI_PREVIEW_IMAGES_KEY, this.entity, this.key);
+    }
+    set multiPreviewImages(value) {
+        ReflectUtilities.defineMetadata(EntityUtilities.MULTI_PREVIEW_IMAGES_KEY, value, this.entity, this.key);
+    }
+    get singlePreviewImage() {
+        return ReflectUtilities.getMetadata(EntityUtilities.SINGLE_PREVIEW_IMAGE_KEY, this.entity, this.key);
+    }
+    set singlePreviewImage(value) {
+        ReflectUtilities.defineMetadata(EntityUtilities.SINGLE_PREVIEW_IMAGE_KEY, value, this.entity, this.key);
+    }
     async setSinglePreviewImage() {
         if (this.propertyValue) {
             this.propertyValue = await FileUtilities.getFileData(this.propertyValue);
@@ -2688,10 +2797,10 @@ class FileImageInputComponent extends NgxMatEntityBaseInputComponent {
     }
 }
 FileImageInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: FileImageInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-FileImageInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: FileImageInputComponent, selector: "file-image-input", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"!metadata.dragAndDrop && !metadata.preview\">\n    <file-input\n        (fileDataChangeEvent)=\"refreshFileData($event)\"\n        [propertyValue]=\"propertyValue\"\n        [metadata]=\"metadata\"\n        [getValidationErrorMessage]=\"getValidationErrorMessage\"\n        [isReadOnly]=\"isReadOnly\"\n    >\n    </file-input>\n</div>\n\n<div *ngIf=\"metadata.dragAndDrop || metadata.preview\" class=\"file-input mat-elevation-z8\">\n    <file-input\n        (fileDataChangeEvent)=\"refreshFileData($event)\"\n        [propertyValue]=\"propertyValue\"\n        [metadata]=\"metadata\"\n        [getValidationErrorMessage]=\"getValidationErrorMessage\"\n        [isReadOnly]=\"isReadOnly\"\n    >\n    </file-input>\n\n    <div class=\"image-preview\" *ngIf=\"metadata.preview && metadata.multiple\">\n        <i (click)=\"prev()\" [class.disabled]=\"imageIndex === 0\" class=\"prev-button fa-solid fa-angle-left\"></i>\n        <img *ngIf=\"multiPreviewImages?.[imageIndex]\" class=\"mat-elevation-z2\" [src]=\"multiPreviewImages?.[imageIndex]\">\n        <img *ngIf=\"!multiPreviewImages?.[imageIndex]\" class=\"mat-elevation-z2\" [src]=\"metadata.previewPlaceholderUrl ?? placeHolder\">\n        <i (click)=\"next()\"\n            [class.disabled]=\"!multiPreviewImages || !multiPreviewImages.length || imageIndex === (multiPreviewImages.length - 1)\"\n            class=\"next-button fa-solid fa-angle-right\"\n        >\n        </i>\n    </div>\n    <div class=\"preview-nav\" *ngIf=\"metadata.preview && metadata.multiple\">\n        <button type=\"button\" (click)=\"setIndex(imageIndex-4)\" mat-icon-button *ngIf=\"\n            this.multiPreviewImages\n            && multiPreviewImages[imageIndex-4]\n            && imageIndex === (this.multiPreviewImages.length - 1)\"\n        >\n            <span class=\"dot\"></span>\n            <span class=\"image-index\">{{imageIndex - 3}}</span>\n        </button>\n        <!-- eslint-disable-next-line @angular-eslint/template/conditional-complexity -->\n        <button type=\"button\" (click)=\"setIndex(imageIndex-3)\" mat-icon-button *ngIf=\"this.multiPreviewImages\n            && multiPreviewImages[imageIndex-3]\n            && (\n                imageIndex === (this.multiPreviewImages.length - 2)\n                || imageIndex === (this.multiPreviewImages.length - 1)\n            )\"\n        >\n            <span class=\"dot\"></span>\n            <span class=\"image-index\">{{imageIndex - 2}}</span>\n        </button>\n        <button type=\"button\" (click)=\"setIndex(imageIndex-2)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex-2]\">\n            <span class=\"dot\"></span>\n            <span class=\"image-index\">{{imageIndex - 1}}</span>\n        </button>\n        <button type=\"button\" (click)=\"setIndex(imageIndex-1)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex-1]\">\n            <i class=\"dot\"></i>\n            <span class=\"image-index\">{{imageIndex}}</span>\n        </button>\n        <button type=\"button\" mat-icon-button disabled>\n            <i class=\"dot selected\"></i>\n            <span class=\"image-index\">{{imageIndex + 1}}</span>\n        </button>\n        <button type=\"button\" (click)=\"setIndex(imageIndex+1)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex+1]\">\n            <span class=\"dot\"></span>\n            <span class=\"image-index\">{{imageIndex + 2}}</span>\n        </button>\n        <button type=\"button\" (click)=\"setIndex(imageIndex+2)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex+2]\">\n            <span class=\"dot\"></span>\n            <span class=\"image-index\">{{imageIndex + 3}}</span>\n        </button>\n        <button type=\"button\" (click)=\"setIndex(imageIndex+3)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex+3] && imageIndex <= 1\">\n            <span class=\"dot\"></span>\n            <span class=\"image-index\">{{imageIndex + 4}}</span>\n        </button>\n        <button type=\"button\" (click)=\"setIndex(imageIndex+4)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex+4] && imageIndex === 0\">\n            <span class=\"dot\"></span>\n            <span class=\"image-index\">{{imageIndex + 5}}</span>\n        </button>\n    </div>\n\n    <div class=\"image-preview\" *ngIf=\"metadata.preview && !metadata.multiple\">\n        <i class=\"prev-button disabled fa-solid fa-angle-left\"></i>\n        <img class=\"mat-elevation-z2\" [src]=\"singlePreviewImage ?? metadata.previewPlaceholderUrl ?? placeHolder\">\n        <i class=\"next-button disabled fa-solid fa-angle-right\"></i>\n    </div>\n    <div class=\"preview-nav\" *ngIf=\"metadata.preview && !metadata.multiple\">\n        <button type=\"button\" disabled mat-icon-button>\n            <span class=\"dot selected\"></span>\n            <span class=\"image-index\">1</span>\n        </button>\n    </div>\n</div>", styles: [".file-input{margin-top:15px;margin-bottom:15px;padding:15px;border-radius:5px}.image-preview{height:250px;display:flex;align-items:center;padding-top:15px;padding-bottom:15px}.image-preview .prev-button{font-size:100px;margin-left:5px;color:#0000008a}.image-preview .next-button{font-size:100px;margin-right:5px;color:#0000008a}.image-preview .prev-button:hover,.image-preview .next-button:hover{cursor:pointer;color:#000000b3;transition:all .5s ease}.image-preview .prev-button.disabled,.image-preview .next-button.disabled{color:#00000042}.image-preview .prev-button.disabled:hover,.image-preview .next-button.disabled:hover{color:#00000042;transition:none;cursor:default}.image-preview img{max-width:calc(100% - 100px);max-height:100%;margin-left:auto;margin-right:auto;border-radius:3px}.preview-nav{text-align:center}.preview-nav button{display:inline-block;width:18px;height:18px;margin-left:5px;margin-right:5px}.preview-nav button .dot{height:100%;width:100%;background-color:#00000061;border-radius:50%;display:block}.preview-nav button .dot.selected{background-color:#0000008a}.preview-nav button .image-index{position:absolute;height:100%;width:100%;display:block;top:-11.5px;color:#fff}.preview-nav button:hover .dot{background-color:#0000008a;transition:all .3s ease}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: FileInputComponent, selector: "file-input", inputs: ["propertyValue", "metadata", "getValidationErrorMessage", "isReadOnly"], outputs: ["fileDataChangeEvent"] }] });
+FileImageInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: FileImageInputComponent, selector: "file-image-input", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"!metadata.dragAndDrop && !metadata.preview\">\n    <file-input\n        (fileDataChangeEvent)=\"refreshFileData($event)\"\n        [propertyValue]=\"propertyValue\"\n        [metadata]=\"metadata\"\n        [getValidationErrorMessage]=\"getValidationErrorMessage\"\n        [isReadOnly]=\"isReadOnly\"\n        [entity]=\"entity\"\n        [key]=\"key\"\n    >\n    </file-input>\n</div>\n\n<div *ngIf=\"metadata.dragAndDrop || metadata.preview\" class=\"file-input mat-elevation-z8\">\n    <file-input\n        (fileDataChangeEvent)=\"refreshFileData($event)\"\n        [propertyValue]=\"propertyValue\"\n        [metadata]=\"metadata\"\n        [getValidationErrorMessage]=\"getValidationErrorMessage\"\n        [isReadOnly]=\"isReadOnly\"\n        [entity]=\"entity\"\n        [key]=\"key\"\n    >\n    </file-input>\n\n    <div class=\"image-preview\" *ngIf=\"metadata.preview && metadata.multiple\">\n        <i (click)=\"prev()\" [class.disabled]=\"imageIndex === 0\" class=\"prev-button fa-solid fa-angle-left\"></i>\n        <img *ngIf=\"multiPreviewImages?.[imageIndex]\" class=\"mat-elevation-z2\" [src]=\"multiPreviewImages?.[imageIndex]\">\n        <img *ngIf=\"!multiPreviewImages?.[imageIndex]\" class=\"mat-elevation-z2\" [src]=\"metadata.previewPlaceholderUrl ?? placeHolder\">\n        <i (click)=\"next()\"\n            [class.disabled]=\"!multiPreviewImages || !multiPreviewImages.length || imageIndex === (multiPreviewImages.length - 1)\"\n            class=\"next-button fa-solid fa-angle-right\"\n        >\n        </i>\n    </div>\n    <div class=\"preview-nav\" *ngIf=\"metadata.preview && metadata.multiple\">\n        <button type=\"button\" (click)=\"setIndex(imageIndex-4)\" mat-icon-button *ngIf=\"\n            this.multiPreviewImages\n            && multiPreviewImages[imageIndex-4]\n            && imageIndex === (this.multiPreviewImages.length - 1)\"\n        >\n            <span class=\"dot\"></span>\n            <span class=\"image-index\">{{imageIndex - 3}}</span>\n        </button>\n        <!-- eslint-disable-next-line @angular-eslint/template/conditional-complexity -->\n        <button type=\"button\" (click)=\"setIndex(imageIndex-3)\" mat-icon-button *ngIf=\"this.multiPreviewImages\n            && multiPreviewImages[imageIndex-3]\n            && (\n                imageIndex === (this.multiPreviewImages.length - 2)\n                || imageIndex === (this.multiPreviewImages.length - 1)\n            )\"\n        >\n            <span class=\"dot\"></span>\n            <span class=\"image-index\">{{imageIndex - 2}}</span>\n        </button>\n        <button type=\"button\" (click)=\"setIndex(imageIndex-2)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex-2]\">\n            <span class=\"dot\"></span>\n            <span class=\"image-index\">{{imageIndex - 1}}</span>\n        </button>\n        <button type=\"button\" (click)=\"setIndex(imageIndex-1)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex-1]\">\n            <i class=\"dot\"></i>\n            <span class=\"image-index\">{{imageIndex}}</span>\n        </button>\n        <button type=\"button\" mat-icon-button disabled>\n            <i class=\"dot selected\"></i>\n            <span class=\"image-index\">{{imageIndex + 1}}</span>\n        </button>\n        <button type=\"button\" (click)=\"setIndex(imageIndex+1)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex+1]\">\n            <span class=\"dot\"></span>\n            <span class=\"image-index\">{{imageIndex + 2}}</span>\n        </button>\n        <button type=\"button\" (click)=\"setIndex(imageIndex+2)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex+2]\">\n            <span class=\"dot\"></span>\n            <span class=\"image-index\">{{imageIndex + 3}}</span>\n        </button>\n        <button type=\"button\" (click)=\"setIndex(imageIndex+3)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex+3] && imageIndex <= 1\">\n            <span class=\"dot\"></span>\n            <span class=\"image-index\">{{imageIndex + 4}}</span>\n        </button>\n        <button type=\"button\" (click)=\"setIndex(imageIndex+4)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex+4] && imageIndex === 0\">\n            <span class=\"dot\"></span>\n            <span class=\"image-index\">{{imageIndex + 5}}</span>\n        </button>\n    </div>\n\n    <div class=\"image-preview\" *ngIf=\"metadata.preview && !metadata.multiple\">\n        <i class=\"prev-button disabled fa-solid fa-angle-left\"></i>\n        <img class=\"mat-elevation-z2\" [src]=\"singlePreviewImage ?? metadata.previewPlaceholderUrl ?? placeHolder\">\n        <i class=\"next-button disabled fa-solid fa-angle-right\"></i>\n    </div>\n    <div class=\"preview-nav\" *ngIf=\"metadata.preview && !metadata.multiple\">\n        <button type=\"button\" disabled mat-icon-button>\n            <span class=\"dot selected\"></span>\n            <span class=\"image-index\">1</span>\n        </button>\n    </div>\n</div>", styles: [".file-input{margin-top:15px;margin-bottom:15px;padding:15px;border-radius:5px}.image-preview{height:250px;display:flex;align-items:center;padding-top:15px;padding-bottom:15px}.image-preview .prev-button{font-size:100px;margin-left:5px;color:#0000008a}.image-preview .next-button{font-size:100px;margin-right:5px;color:#0000008a}.image-preview .prev-button:hover,.image-preview .next-button:hover{cursor:pointer;color:#000000b3;transition:all .5s ease}.image-preview .prev-button.disabled,.image-preview .next-button.disabled{color:#00000042}.image-preview .prev-button.disabled:hover,.image-preview .next-button.disabled:hover{color:#00000042;transition:none;cursor:default}.image-preview img{max-width:calc(100% - 100px);max-height:100%;margin-left:auto;margin-right:auto;border-radius:3px}.preview-nav{text-align:center}.preview-nav button{display:inline-block;width:18px;height:18px;margin-left:5px;margin-right:5px}.preview-nav button .dot{height:100%;width:100%;background-color:#00000061;border-radius:50%;display:block}.preview-nav button .dot.selected{background-color:#0000008a}.preview-nav button .image-index{position:absolute;height:100%;width:100%;display:block;top:-11.5px;color:#fff}.preview-nav button:hover .dot{background-color:#0000008a;transition:all .3s ease}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: FileInputComponent, selector: "file-input", inputs: ["propertyValue", "entity", "key", "metadata", "getValidationErrorMessage", "isReadOnly"], outputs: ["fileDataChangeEvent"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: FileImageInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'file-image-input', template: "<div *ngIf=\"!metadata.dragAndDrop && !metadata.preview\">\n    <file-input\n        (fileDataChangeEvent)=\"refreshFileData($event)\"\n        [propertyValue]=\"propertyValue\"\n        [metadata]=\"metadata\"\n        [getValidationErrorMessage]=\"getValidationErrorMessage\"\n        [isReadOnly]=\"isReadOnly\"\n    >\n    </file-input>\n</div>\n\n<div *ngIf=\"metadata.dragAndDrop || metadata.preview\" class=\"file-input mat-elevation-z8\">\n    <file-input\n        (fileDataChangeEvent)=\"refreshFileData($event)\"\n        [propertyValue]=\"propertyValue\"\n        [metadata]=\"metadata\"\n        [getValidationErrorMessage]=\"getValidationErrorMessage\"\n        [isReadOnly]=\"isReadOnly\"\n    >\n    </file-input>\n\n    <div class=\"image-preview\" *ngIf=\"metadata.preview && metadata.multiple\">\n        <i (click)=\"prev()\" [class.disabled]=\"imageIndex === 0\" class=\"prev-button fa-solid fa-angle-left\"></i>\n        <img *ngIf=\"multiPreviewImages?.[imageIndex]\" class=\"mat-elevation-z2\" [src]=\"multiPreviewImages?.[imageIndex]\">\n        <img *ngIf=\"!multiPreviewImages?.[imageIndex]\" class=\"mat-elevation-z2\" [src]=\"metadata.previewPlaceholderUrl ?? placeHolder\">\n        <i (click)=\"next()\"\n            [class.disabled]=\"!multiPreviewImages || !multiPreviewImages.length || imageIndex === (multiPreviewImages.length - 1)\"\n            class=\"next-button fa-solid fa-angle-right\"\n        >\n        </i>\n    </div>\n    <div class=\"preview-nav\" *ngIf=\"metadata.preview && metadata.multiple\">\n        <button type=\"button\" (click)=\"setIndex(imageIndex-4)\" mat-icon-button *ngIf=\"\n            this.multiPreviewImages\n            && multiPreviewImages[imageIndex-4]\n            && imageIndex === (this.multiPreviewImages.length - 1)\"\n        >\n            <span class=\"dot\"></span>\n            <span class=\"image-index\">{{imageIndex - 3}}</span>\n        </button>\n        <!-- eslint-disable-next-line @angular-eslint/template/conditional-complexity -->\n        <button type=\"button\" (click)=\"setIndex(imageIndex-3)\" mat-icon-button *ngIf=\"this.multiPreviewImages\n            && multiPreviewImages[imageIndex-3]\n            && (\n                imageIndex === (this.multiPreviewImages.length - 2)\n                || imageIndex === (this.multiPreviewImages.length - 1)\n            )\"\n        >\n            <span class=\"dot\"></span>\n            <span class=\"image-index\">{{imageIndex - 2}}</span>\n        </button>\n        <button type=\"button\" (click)=\"setIndex(imageIndex-2)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex-2]\">\n            <span class=\"dot\"></span>\n            <span class=\"image-index\">{{imageIndex - 1}}</span>\n        </button>\n        <button type=\"button\" (click)=\"setIndex(imageIndex-1)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex-1]\">\n            <i class=\"dot\"></i>\n            <span class=\"image-index\">{{imageIndex}}</span>\n        </button>\n        <button type=\"button\" mat-icon-button disabled>\n            <i class=\"dot selected\"></i>\n            <span class=\"image-index\">{{imageIndex + 1}}</span>\n        </button>\n        <button type=\"button\" (click)=\"setIndex(imageIndex+1)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex+1]\">\n            <span class=\"dot\"></span>\n            <span class=\"image-index\">{{imageIndex + 2}}</span>\n        </button>\n        <button type=\"button\" (click)=\"setIndex(imageIndex+2)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex+2]\">\n            <span class=\"dot\"></span>\n            <span class=\"image-index\">{{imageIndex + 3}}</span>\n        </button>\n        <button type=\"button\" (click)=\"setIndex(imageIndex+3)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex+3] && imageIndex <= 1\">\n            <span class=\"dot\"></span>\n            <span class=\"image-index\">{{imageIndex + 4}}</span>\n        </button>\n        <button type=\"button\" (click)=\"setIndex(imageIndex+4)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex+4] && imageIndex === 0\">\n            <span class=\"dot\"></span>\n            <span class=\"image-index\">{{imageIndex + 5}}</span>\n        </button>\n    </div>\n\n    <div class=\"image-preview\" *ngIf=\"metadata.preview && !metadata.multiple\">\n        <i class=\"prev-button disabled fa-solid fa-angle-left\"></i>\n        <img class=\"mat-elevation-z2\" [src]=\"singlePreviewImage ?? metadata.previewPlaceholderUrl ?? placeHolder\">\n        <i class=\"next-button disabled fa-solid fa-angle-right\"></i>\n    </div>\n    <div class=\"preview-nav\" *ngIf=\"metadata.preview && !metadata.multiple\">\n        <button type=\"button\" disabled mat-icon-button>\n            <span class=\"dot selected\"></span>\n            <span class=\"image-index\">1</span>\n        </button>\n    </div>\n</div>", styles: [".file-input{margin-top:15px;margin-bottom:15px;padding:15px;border-radius:5px}.image-preview{height:250px;display:flex;align-items:center;padding-top:15px;padding-bottom:15px}.image-preview .prev-button{font-size:100px;margin-left:5px;color:#0000008a}.image-preview .next-button{font-size:100px;margin-right:5px;color:#0000008a}.image-preview .prev-button:hover,.image-preview .next-button:hover{cursor:pointer;color:#000000b3;transition:all .5s ease}.image-preview .prev-button.disabled,.image-preview .next-button.disabled{color:#00000042}.image-preview .prev-button.disabled:hover,.image-preview .next-button.disabled:hover{color:#00000042;transition:none;cursor:default}.image-preview img{max-width:calc(100% - 100px);max-height:100%;margin-left:auto;margin-right:auto;border-radius:3px}.preview-nav{text-align:center}.preview-nav button{display:inline-block;width:18px;height:18px;margin-left:5px;margin-right:5px}.preview-nav button .dot{height:100%;width:100%;background-color:#00000061;border-radius:50%;display:block}.preview-nav button .dot.selected{background-color:#0000008a}.preview-nav button .image-index{position:absolute;height:100%;width:100%;display:block;top:-11.5px;color:#fff}.preview-nav button:hover .dot{background-color:#0000008a;transition:all .3s ease}\n"] }]
+            args: [{ selector: 'file-image-input', template: "<div *ngIf=\"!metadata.dragAndDrop && !metadata.preview\">\n    <file-input\n        (fileDataChangeEvent)=\"refreshFileData($event)\"\n        [propertyValue]=\"propertyValue\"\n        [metadata]=\"metadata\"\n        [getValidationErrorMessage]=\"getValidationErrorMessage\"\n        [isReadOnly]=\"isReadOnly\"\n        [entity]=\"entity\"\n        [key]=\"key\"\n    >\n    </file-input>\n</div>\n\n<div *ngIf=\"metadata.dragAndDrop || metadata.preview\" class=\"file-input mat-elevation-z8\">\n    <file-input\n        (fileDataChangeEvent)=\"refreshFileData($event)\"\n        [propertyValue]=\"propertyValue\"\n        [metadata]=\"metadata\"\n        [getValidationErrorMessage]=\"getValidationErrorMessage\"\n        [isReadOnly]=\"isReadOnly\"\n        [entity]=\"entity\"\n        [key]=\"key\"\n    >\n    </file-input>\n\n    <div class=\"image-preview\" *ngIf=\"metadata.preview && metadata.multiple\">\n        <i (click)=\"prev()\" [class.disabled]=\"imageIndex === 0\" class=\"prev-button fa-solid fa-angle-left\"></i>\n        <img *ngIf=\"multiPreviewImages?.[imageIndex]\" class=\"mat-elevation-z2\" [src]=\"multiPreviewImages?.[imageIndex]\">\n        <img *ngIf=\"!multiPreviewImages?.[imageIndex]\" class=\"mat-elevation-z2\" [src]=\"metadata.previewPlaceholderUrl ?? placeHolder\">\n        <i (click)=\"next()\"\n            [class.disabled]=\"!multiPreviewImages || !multiPreviewImages.length || imageIndex === (multiPreviewImages.length - 1)\"\n            class=\"next-button fa-solid fa-angle-right\"\n        >\n        </i>\n    </div>\n    <div class=\"preview-nav\" *ngIf=\"metadata.preview && metadata.multiple\">\n        <button type=\"button\" (click)=\"setIndex(imageIndex-4)\" mat-icon-button *ngIf=\"\n            this.multiPreviewImages\n            && multiPreviewImages[imageIndex-4]\n            && imageIndex === (this.multiPreviewImages.length - 1)\"\n        >\n            <span class=\"dot\"></span>\n            <span class=\"image-index\">{{imageIndex - 3}}</span>\n        </button>\n        <!-- eslint-disable-next-line @angular-eslint/template/conditional-complexity -->\n        <button type=\"button\" (click)=\"setIndex(imageIndex-3)\" mat-icon-button *ngIf=\"this.multiPreviewImages\n            && multiPreviewImages[imageIndex-3]\n            && (\n                imageIndex === (this.multiPreviewImages.length - 2)\n                || imageIndex === (this.multiPreviewImages.length - 1)\n            )\"\n        >\n            <span class=\"dot\"></span>\n            <span class=\"image-index\">{{imageIndex - 2}}</span>\n        </button>\n        <button type=\"button\" (click)=\"setIndex(imageIndex-2)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex-2]\">\n            <span class=\"dot\"></span>\n            <span class=\"image-index\">{{imageIndex - 1}}</span>\n        </button>\n        <button type=\"button\" (click)=\"setIndex(imageIndex-1)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex-1]\">\n            <i class=\"dot\"></i>\n            <span class=\"image-index\">{{imageIndex}}</span>\n        </button>\n        <button type=\"button\" mat-icon-button disabled>\n            <i class=\"dot selected\"></i>\n            <span class=\"image-index\">{{imageIndex + 1}}</span>\n        </button>\n        <button type=\"button\" (click)=\"setIndex(imageIndex+1)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex+1]\">\n            <span class=\"dot\"></span>\n            <span class=\"image-index\">{{imageIndex + 2}}</span>\n        </button>\n        <button type=\"button\" (click)=\"setIndex(imageIndex+2)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex+2]\">\n            <span class=\"dot\"></span>\n            <span class=\"image-index\">{{imageIndex + 3}}</span>\n        </button>\n        <button type=\"button\" (click)=\"setIndex(imageIndex+3)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex+3] && imageIndex <= 1\">\n            <span class=\"dot\"></span>\n            <span class=\"image-index\">{{imageIndex + 4}}</span>\n        </button>\n        <button type=\"button\" (click)=\"setIndex(imageIndex+4)\" mat-icon-button *ngIf=\"multiPreviewImages?.[imageIndex+4] && imageIndex === 0\">\n            <span class=\"dot\"></span>\n            <span class=\"image-index\">{{imageIndex + 5}}</span>\n        </button>\n    </div>\n\n    <div class=\"image-preview\" *ngIf=\"metadata.preview && !metadata.multiple\">\n        <i class=\"prev-button disabled fa-solid fa-angle-left\"></i>\n        <img class=\"mat-elevation-z2\" [src]=\"singlePreviewImage ?? metadata.previewPlaceholderUrl ?? placeHolder\">\n        <i class=\"next-button disabled fa-solid fa-angle-right\"></i>\n    </div>\n    <div class=\"preview-nav\" *ngIf=\"metadata.preview && !metadata.multiple\">\n        <button type=\"button\" disabled mat-icon-button>\n            <span class=\"dot selected\"></span>\n            <span class=\"image-index\">1</span>\n        </button>\n    </div>\n</div>", styles: [".file-input{margin-top:15px;margin-bottom:15px;padding:15px;border-radius:5px}.image-preview{height:250px;display:flex;align-items:center;padding-top:15px;padding-bottom:15px}.image-preview .prev-button{font-size:100px;margin-left:5px;color:#0000008a}.image-preview .next-button{font-size:100px;margin-right:5px;color:#0000008a}.image-preview .prev-button:hover,.image-preview .next-button:hover{cursor:pointer;color:#000000b3;transition:all .5s ease}.image-preview .prev-button.disabled,.image-preview .next-button.disabled{color:#00000042}.image-preview .prev-button.disabled:hover,.image-preview .next-button.disabled:hover{color:#00000042;transition:none;cursor:default}.image-preview img{max-width:calc(100% - 100px);max-height:100%;margin-left:auto;margin-right:auto;border-radius:3px}.preview-nav{text-align:center}.preview-nav button{display:inline-block;width:18px;height:18px;margin-left:5px;margin-right:5px}.preview-nav button .dot{height:100%;width:100%;background-color:#00000061;border-radius:50%;display:block}.preview-nav button .dot.selected{background-color:#0000008a}.preview-nav button .image-index{position:absolute;height:100%;width:100%;display:block;top:-11.5px;color:#fff}.preview-nav button:hover .dot{background-color:#0000008a;transition:all .3s ease}\n"] }]
         }] });
 
 const NGX_GET_VALIDATION_ERROR_MESSAGE = new InjectionToken('Provider for the default getValidationErrorMessage.', {
@@ -2859,15 +2968,19 @@ class StringPasswordInputComponent extends NgxMatEntityBaseInputComponent {
         this.hide = true;
         this.hideConfirm = true;
     }
+    get confirmPassword() {
+        return ReflectUtilities.getMetadata(EntityUtilities.CONFIRM_PASSWORD_KEY, this.entity, this.key);
+    }
+    set confirmPassword(value) {
+        ReflectUtilities.defineMetadata(EntityUtilities.CONFIRM_PASSWORD_KEY, value, this.entity, this.key);
+    }
     ngOnInit() {
         super.ngOnInit();
         this.confirmRequired = this.metadata.required;
         this.confirmPassword = LodashUtilities.cloneDeep(this.propertyValue);
-        ReflectUtilities.defineMetadata('confirmPassword', this.confirmPassword, this.entity, this.key);
     }
     passwordInput() {
         this.confirmRequired = Boolean(this.propertyValue);
-        ReflectUtilities.defineMetadata('confirmPassword', this.confirmPassword, this.entity, this.key);
         this.emitChange();
     }
 }
@@ -4260,10 +4373,10 @@ function date(metadata) {
         return baseProperty(new DefaultDateDecoratorConfigInternal(metadata), DecoratorTypes.DATE);
     }
     else if (metadata.displayStyle === 'datetime') {
-        return baseProperty(new DateTimeDateDecoratorConfigInternal(metadata), DecoratorTypes.DATE_TIME);
+        return baseProperty(new DateTimeDateDecoratorConfigInternal(metadata), DecoratorTypes.DATE_TIME, [EntityUtilities.TIME_KEY]);
     }
     else {
-        return baseProperty(new DateRangeDateDecoratorConfigInternal(metadata), DecoratorTypes.DATE_RANGE);
+        return baseProperty(new DateRangeDateDecoratorConfigInternal(metadata), DecoratorTypes.DATE_RANGE, [EntityUtilities.DATE_RANGE_END_KEY, EntityUtilities.DATE_RANGE_KEY, EntityUtilities.DATE_RANGE_START_KEY]);
     }
 }
 
@@ -4519,9 +4632,9 @@ function getDefaultMaxSizeTotalErrorDialogData(data) {
 function file(metadata) {
     switch (metadata.type) {
         case 'other':
-            return baseProperty(new DefaultFileDecoratorConfigInternal(metadata), DecoratorTypes.FILE_DEFAULT);
+            return baseProperty(new DefaultFileDecoratorConfigInternal(metadata), DecoratorTypes.FILE_DEFAULT, [EntityUtilities.FILENAMES_KEY]);
         case 'image':
-            return baseProperty(new ImageFileDecoratorConfigInternal(metadata), DecoratorTypes.FILE_IMAGE);
+            return baseProperty(new ImageFileDecoratorConfigInternal(metadata), DecoratorTypes.FILE_IMAGE, [EntityUtilities.FILENAMES_KEY, EntityUtilities.MULTI_PREVIEW_IMAGES_KEY, EntityUtilities.SINGLE_PREVIEW_IMAGE_KEY]);
         default:
             // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-explicit-any
             throw new Error(`Unknown metadata type ${metadata.type}`);
@@ -4562,10 +4675,11 @@ class CustomDecoratorConfigInternal extends PropertyDecoratorConfigInternal {
  * Decorator for setting and getting custom property metadata.
  *
  * @param metadata - The metadata of the custom property.
+ * @param metadataKeysToReset - Any metadata keys which values should be set to undefined on reset.
  * @returns The method that defines the metadata.
  */
-function custom(metadata) {
-    return baseProperty(new CustomDecoratorConfigInternal(metadata), DecoratorTypes.CUSTOM);
+function custom(metadata, metadataKeysToReset) {
+    return baseProperty(new CustomDecoratorConfigInternal(metadata), DecoratorTypes.CUSTOM, metadataKeysToReset);
 }
 
 /**