@messaia/cdk 22.0.0-rc.9 → 22.0.1-rc.1

package/fesm2022/messaia-cdk.mjs

@@ -20,7 +20,7 @@ import { MatButtonModule, MatIconButton } from '@angular/material/button';
 import * as i4 from '@angular/material/icon';
 import { MatIcon, MatIconModule } from '@angular/material/icon';
 import * as i1$1 from '@angular/forms';
-import { FormsModule, FormArray, FormGroup, FormControl, NG_ASYNC_VALIDATORS, NG_VALUE_ACCESSOR, NG_VALIDATORS, AbstractControl, FormBuilder, ReactiveFormsModule, FormControlName, FormControlDirective, NgControl, NgForm, FormGroupDirective, ControlContainer, Validators } from '@angular/forms';
+import { FormsModule, FormArray, FormGroup, FormControl, Validators, NG_ASYNC_VALIDATORS, NG_VALUE_ACCESSOR, NG_VALIDATORS, AbstractControl, FormBuilder, ReactiveFormsModule, FormControlName, FormControlDirective, NgControl, NgForm, FormGroupDirective, ControlContainer } from '@angular/forms';
 import * as i2$1 from '@angular/material/form-field';
 import { MatFormFieldModule, MatFormFieldControl } from '@angular/material/form-field';
 import * as i3 from '@angular/material/progress-bar';
@@ -67,6 +67,8 @@ import * as i4$2 from '@angular/material/autocomplete';
 import { MatAutocompleteModule, MatAutocomplete, MatAutocompleteTrigger, MAT_AUTOCOMPLETE_DEFAULT_OPTIONS } from '@angular/material/autocomplete';
 import * as i6 from '@angular/material/divider';
 import { MatDividerModule, MatDivider } from '@angular/material/divider';
+import * as i10$1 from '@angular/material/progress-spinner';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { ENTER, COMMA } from '@angular/cdk/keycodes';
 import * as i3$4 from '@angular/material/radio';
 import { MatRadioModule } from '@angular/material/radio';
@@ -3837,6 +3839,10 @@ class ApplicationUtil {
         return regex;
     }
     static configureControl(control, config, type) {
+        if (control && typeof control.setValidatorConfig === 'function') {
+            control.setValidatorConfig(type, config);
+            return;
+        }
         if (!control.validatorConfig) {
             let jObject = {};
             jObject[type] = config;
@@ -4437,9 +4443,9 @@ class RxFormControl extends FormControl {
     _baseObject;
     _sanitizers;
     /**
- * Current language used for error message localization.
- * @type {string | undefined}
- */
+     * Current language used for error message localization.
+     * @type {string | undefined}
+     */
     _language;
     /**
      * The key or name of the control.
@@ -4521,6 +4527,16 @@ class RxFormControl extends FormControl {
      * @type {{ [key: string]: string }}
      */
     backEndErrors = {};
+    /**
+     * Persisted validator metadata indexed by validator name.
+     * @type {{ [key: string]: any }}
+     */
+    _validatorConfigStore = {};
+    /**
+     * Runtime validator metadata consumed by existing template validation flow.
+     * @type {{ [key: string]: any } | undefined}
+     */
+    validatorConfig;
     /**
      * Indicates if updating the control element's class should be performed.
      * @type {boolean | Function | undefined}
@@ -4542,16 +4558,26 @@ class RxFormControl extends FormControl {
      * @type {string[]}
      */
     get errorMessages() {
+        /* If no message expression is configured, rely on standard error generation. */
         if (!this._messageExpression) {
-            if (this._errorMessages.length == 0 && this.errors)
+            /* Build messages on demand when errors exist and cache is empty. */
+            if (this._errorMessages.length == 0 && this.errors) {
                 this.setControlErrorMessages();
+            }
         }
-        else if (this._messageExpression && !this._isPassedExpression)
+        /* If expression mode is enabled but not passed, hide all messages. */
+        else if (this._messageExpression && !this._isPassedExpression) {
             return [];
-        if (!this.errors && this._errorMessages.length > 0)
+        }
+        /* If errors were cleared, reset message cache accordingly. */
+        if (!this.errors && this._errorMessages.length > 0) {
             this.setControlErrorMessages();
-        if (this._language != this.getLanguage())
+        }
+        /* If language changed, rebuild translated messages. */
+        if (this._language != this.getLanguage()) {
             this.setControlErrorMessages();
+        }
+        /* Return the computed error message list. */
         return this._errorMessages;
     }
     /**
@@ -4561,32 +4587,53 @@ class RxFormControl extends FormControl {
      * @type {string | undefined}
      */
     get errorMessage() {
+        /* If no message expression is configured, rely on standard error generation. */
         if (!this._messageExpression) {
+            /* Build single message lazily when errors exist and cache is empty. */
             if (this._errorMessage == undefined && this.errors) {
                 this.setControlErrorMessages();
             }
         }
+        /* If expression mode is enabled but not passed, hide message output. */
         else if (this._messageExpression && !this._isPassedExpression) {
             return undefined;
         }
+        /* If errors were cleared, reset single-message cache accordingly. */
         if (!this.errors && this._errorMessage) {
             this.setControlErrorMessages();
         }
+        /* If language changed, rebuild translated single message. */
         if (this._language != this.getLanguage()) {
             this.setControlErrorMessages();
         }
+        /* Return the computed single error message. */
         return this._errorMessage;
     }
     /**
      * Gets the associated entity object.
      * @type {any}
      */
-    get entityObject() { return this._entityObject; }
+    get entityObject() {
+        /* Return the entity object linked to this control instance. */
+        return this._entityObject;
+    }
     /**
      * Gets the base object for comparison or reset.
      * @type {any}
      */
-    get baseObject() { return this._baseObject; }
+    get baseObject() {
+        /* Return the base object used for dirty/modified comparisons. */
+        return this._baseObject;
+    }
+    /**
+     * @method isModified
+     * @description Gets whether the control value is modified compared to its base value.
+     * @returns {boolean} True when the control has been modified.
+     */
+    get isModified() {
+        /* Return whether the current control value differs from the stored base value. */
+        return this._isModified;
+    }
     /**
      * Constructor to initialize RxFormControl.
      * @param formState Initial state or value of the control.
@@ -4597,301 +4644,715 @@ class RxFormControl extends FormControl {
      * @param _sanitizers Array of data sanitizers to preprocess values.
      */
     constructor(formState, validatorOrOpts, _entityObject, _baseObject, controlName, _sanitizers) {
+        /* Delegate base control construction to Angular FormControl. */
         super(formState, validatorOrOpts);
         this._entityObject = _entityObject;
         this._baseObject = _baseObject;
         this._sanitizers = _sanitizers;
+        /* Patch errors property behavior for localization-aware recalculation. */
         this.defineErrorsProperty();
+        /* Capture initial/base value snapshot for modified-state comparisons. */
         this._baseValue = formState === undefined ? null : this.getFormState(formState);
+        /* Initialize modified-state flag. */
         this._isModified = false;
+        /* Store control key name. */
         this.keyName = controlName;
+        /* Cache synchronous validators for later probing and metadata checks. */
         this._validators = validatorOrOpts.validators;
+        /* Cache asynchronous validators for later inspection. */
         this._asyncValidators = validatorOrOpts.asyncValidators;
+        /* Resolve configured error-message binding strategy. */
         this._errorMessageBindingStrategy = ReactiveFormConfig.get("reactiveForm.errorMessageBindingStrategy");
+        /* Apply number-format bootstrap conversion when float sanitizer is configured. */
         if (this._sanitizers) {
+            /* Find float sanitizer configuration. */
             var floatSanitizer = this._sanitizers.filter(t => t.name == "toFloat")[0];
+            /* Convert decimal symbol in base value if locale uses commas. */
             if (floatSanitizer && this._baseValue && ReactiveFormConfig.number && ReactiveFormConfig.number["decimalSymbol"] == ",") {
+                /* Stringify base value for symbol replacement. */
                 let baseValue = String(this._baseValue);
+                /* Replace decimal point only when present. */
                 if (baseValue.indexOf('.') != -1) {
+                    /* Store converted base value using configured decimal symbol. */
                     this._baseValue = baseValue.replace(".", ReactiveFormConfig.number["decimalSymbol"]);
+                    /* Keep underlying FormControl value synchronized with converted base value. */
                     super.setValue(this._baseValue);
                 }
             }
         }
     }
+    /**
+     * Defines a getter and setter for the 'errors' property to handle dynamic error message updates.
+     * This allows the control to re-evaluate its errors when the language changes or when validation is triggered.
+     * @returns {void}
+     */
     defineErrorsProperty() {
+        /* Redefine errors access so language changes can force validator re-evaluation lazily. */
         Object.defineProperty(this, "errors", {
             configurable: true,
             get() {
+                /* Recompute errors when language changes and validator exists. */
                 if (this._language && this._language != this.getLanguage() && this.validator) {
                     this["errors"] = this.validator(this);
                 }
+                /* Return backing error store value. */
                 return this._errors;
             },
+            /* Persist assigned errors into backing store. */
             set(value) { this._errors = value; },
         });
     }
+    /**
+     * Gets the current language for error message localization.
+     * @param value Optional value to determine the language context.
+     * @returns {string | undefined} The current language code.
+     */
     getFormState(value) {
+        /* Clone arrays to avoid mutating the original form-state reference. */
+        /* Start from incoming value. */
         let baseValue = value;
+        /* Clone arrays to prevent shared reference mutation. */
         if (Array.isArray(value)) {
             baseValue = [];
+            /* Copy each array item into new base-value array. */
             value.forEach(t => baseValue.push(t));
         }
+        /* Return normalized base-state value. */
         return baseValue;
     }
-    get isModified() {
-        return this._isModified;
-    }
+    /**
+     * @method getValidators
+     * @description Returns a shallow copy of synchronous validators.
+     * @returns {ValidatorFn[]} Synchronous validator functions.
+     */
     getValidators() {
+        /* Return a normalized copy of synchronous validators. */
         return this.getValidatorSource(this._validators);
     }
+    /**
+     * @method getAsyncValidators
+     * @description Returns a shallow copy of asynchronous validators.
+     * @returns {AsyncValidatorFn[]} Asynchronous validator functions.
+     */
     getAsyncValidators() {
+        /* Return a normalized copy of asynchronous validators. */
         return this.getValidatorSource(this._asyncValidators);
     }
+    /**
+     * @method setValidatorConfig
+     * @description Persists validator configuration metadata by validator type.
+     * @param {string} type Validator name.
+     * @param {any} config Validator configuration object.
+     */
+    setValidatorConfig(type, config) {
+        /* Persist normalized validator configuration and keep compatibility with validatorConfig consumers. */
+        const normalizedConfig = config === '' || config === undefined || config === null ? true : config;
+        this._validatorConfigStore[type] = normalizedConfig;
+        this.validatorConfig = this._validatorConfigStore;
+    }
+    /**
+     * @method getValidatorConfig
+     * @description Returns persisted validator configuration by validator name.
+     * @param {string} type Validator name.
+     * @returns {any} Validator configuration value.
+     */
+    getValidatorConfig(type) {
+        /* Return persisted metadata for a specific validator type. */
+        return this._validatorConfigStore[type];
+    }
+    /**
+     * @method isRequiredActive
+     * @description Evaluates whether required validation is currently active, including dynamic conditional expressions.
+     * @returns {boolean} True when required is active for this control.
+     */
+    isRequiredActive() {
+        /* Check if the control has a native required validator. */
+        const nativeRequired = typeof this.hasValidator === 'function' ? this.hasValidator(Validators.required) : false;
+        /* Check if the control has a persisted required configuration. If not, probe the validators to determine if required is active. */
+        const requiredConfig = this.getValidatorConfig('required');
+        /* If no persisted configuration exists, probe the validators to determine if required is active. */
+        if (requiredConfig === undefined) {
+            /* Get the list of synchronous validators for this control. */
+            const validators = this.getValidators();
+            /* Check if any of the validators return a required error when evaluated with a probe control. */
+            const requiredByProbe = validators.some((validator) => {
+                try {
+                    /* Create a probe control to evaluate the validator without affecting the actual control state. */
+                    const probe = Object.create(this);
+                    /* Define a temporary value for the probe control to evaluate the validator. */
+                    Object.defineProperty(probe, 'value', {
+                        configurable: true,
+                        enumerable: true,
+                        value: null,
+                        writable: true
+                    });
+                    /* Evaluate the validator with the probe control and check if it returns a required error. */
+                    const result = validator(probe);
+                    /* Return true if the validator indicates that required validation is active. */
+                    return !!(result && result['required']);
+                }
+                catch {
+                    return false;
+                }
+            });
+            /* Return true if either the native required validator is present or if any of the validators indicate that required validation is active. */
+            return nativeRequired || requiredByProbe;
+        }
+        /* If a persisted required configuration exists, evaluate it to determine if required validation is active. */
+        if (typeof requiredConfig === 'boolean') {
+            return nativeRequired || requiredConfig;
+        }
+        /* If the persisted required configuration is an object, evaluate it using the FormProvider to determine if required validation is active. */
+        if (requiredConfig && typeof requiredConfig === 'object') {
+            return nativeRequired || !!FormProvider.processRule(this, requiredConfig);
+        }
+        /* Fallback to return true if either the native required validator is present or if the persisted required configuration is truthy. */
+        return nativeRequired || !!requiredConfig;
+    }
+    /**
+     * @method getValidatorSource
+     * @description Normalizes validator input to an array copy.
+     * @param {any[]} validators Validator value or array to normalize.
+     * @returns {any[]} Array of validators.
+     */
     getValidatorSource(validators) {
-        if (validators)
+        /* Normalize validators into an array to simplify downstream iteration. */
+        if (validators) {
             return Array.isArray(validators) ? [...validators] : [validators];
+        }
         return [];
     }
+    /**
+     * @method setValidators
+     * @description Sets synchronous validators and stores the source list.
+     * @param {ValidatorFn | ValidatorFn[] | null} newValidator Validator or validators to assign.
+     * @returns {void}
+     */
     setValidators(newValidator) {
+        /* Cache synchronous validators locally before delegating to Angular base implementation. */
         this._validators = newValidator;
         super.setValidators(newValidator);
     }
+    /**
+     * @method setAsyncValidators
+     * @description Sets asynchronous validators and stores the source list.
+     * @param {AsyncValidatorFn | AsyncValidatorFn[] | null} newValidator Async validator or validators to assign.
+     * @returns {void}
+     */
     setAsyncValidators(newValidator) {
+        /* Cache asynchronous validators locally before delegating to Angular base implementation. */
         this._asyncValidators = newValidator;
         super.setAsyncValidators(newValidator);
     }
+    /**
+     * @method setValue
+     * @description Sets control value, synchronizes entity/base objects, and runs expression hooks.
+     * @param {any} value New control value.
+     * @param {{ dirty?: boolean; updateChanged?: boolean; onlySelf?: boolean; emitEvent?: boolean; isThroughDynamic?: boolean; }} options Optional behavior flags.
+     * @returns {void}
+     */
     setValue(value, options) {
+        /* Synchronize value into entity/base structures, then run expression and patch hooks. */
+        /* Mark parent as currently changing to avoid recursive side effects. */
         this.parent.changing = true;
+        /* Sanitize incoming value before storing into bound entity object. */
         let parsedValue = this.getSanitizedValue(value);
-        if (options && options.dirty)
+        /* If requested, update the base object snapshot with raw value. */
+        if (options && options.dirty) {
             this._baseObject[this.keyName] = value;
+        }
+        /* Store sanitized value into bound entity model. */
         this._entityObject[this.keyName] = parsedValue;
+        /* Delegate actual control value update to base class implementation. */
         super.setValue(value, options);
+        /* Recompute and bind error messages after value change. */
         this.bindError();
+        /* Recompute and bind dynamic class output after value change. */
         this.bindClassName();
+        /* Execute conditional decorator expressions tied to this control. */
         this.executeExpressions();
+        /* Recompute modified state and invoke parent patch callback. */
         this.callPatch();
+        /* Notify root value-changed synchronization hook when enabled. */
         if (options && !options.updateChanged && this.root[VALUE_CHANGED_SYNC]) {
             this.root[VALUE_CHANGED_SYNC]();
         }
+        /* Clear parent changing marker after update pipeline completes. */
         this.parent.changing = false;
     }
+    /**
+     * @method getControlValue
+     * @description Returns the sanitized current control value.
+     * @returns {any} Sanitized control value.
+     */
     getControlValue() {
+        /* Return sanitized value representation for external consumers. */
         return this.getSanitizedValue(this.value);
     }
+    /**
+     * @method bindError
+     * @description Re-evaluates message expression and refreshes computed errors.
+     * @returns {void}
+     */
     bindError() {
-        if (this._messageExpression)
+        /* Evaluate error expression gates and refresh computed errors cache. */
+        if (this._messageExpression) {
             this._isPassedExpression = this.executeExpression(this._messageExpression, this);
+        }
+        /* Recompute error messages based on current errors and language context. */
         this.setControlErrorMessages();
-        var t = this;
-        t["errors"] = this.errors;
+        /* Update the language cache to reflect current language context. */
+        var self = this;
+        /* Update the errors property to trigger any dependent bindings or observers. */
+        self["errors"] = this.errors;
     }
+    /**
+     * @method bindClassName
+     * @description Evaluates and applies dynamic CSS class output for the control element.
+     * @returns {void}
+     */
     bindClassName() {
+        /* Evaluate and publish dynamic class-name output when a callback is configured. */
         if (this.updateOnElementClass && typeof this.updateOnElementClass === "function") {
             let className = this.executeExpression(this._classNameExpression, this);
             let updateElement = this.updateOnElementClass;
             updateElement(className);
         }
     }
+    /**
+     * @method setBackEndErrors
+     * @description Assigns backend validation errors to the control and updates visible messages.
+     * @param {{ [key: string]: string }} error Backend error map.
+     * @returns {void}
+     */
     setBackEndErrors(error) {
+        /* Merge backend errors into local storage and recompute visible messages. */
         Object.keys(error).forEach(key => this.backEndErrors[key] = error[key]);
+        /* Recompute visible error messages after backend error assignment. */
         this.setControlErrorMessages();
     }
+    /**
+     * @method clearBackEndErrors
+     * @description Clears all backend errors or selected backend error keys.
+     * @param {{ [key: string]: any } | undefined} errors Optional map of keys to remove.
+     * @returns {void}
+     */
     clearBackEndErrors(errors) {
-        if (!errors)
+        /* Remove all or selected backend errors, then refresh message state. */
+        if (!errors) {
             this.backEndErrors = {};
-        else
+        }
+        else {
             Object.keys(errors).forEach(t => delete this.backEndErrors[t]);
+        }
+        /* Recompute visible error messages after backend error clearance. */
         this.setControlErrorMessages();
     }
+    /**
+     * @method markAsTouched
+     * @description Marks control as touched and triggers dependent expression refreshes on state change.
+     * @param {{ onlySelf?: boolean } | undefined} opts Angular control options.
+     * @returns {void}
+     */
     markAsTouched(opts) {
+        /* Trigger dependent expression updates only when touched state actually changes. */
         let currentState = this.touched;
         super.markAsTouched(opts);
-        if (currentState != this.touched)
+        if (currentState != this.touched) {
             this.runControlPropChangeExpression([TOUCHED, UNTOUCHED]);
+        }
     }
+    /**
+     * @method markAsUntouched
+     * @description Marks control as untouched and triggers dependent expression refreshes on state change.
+     * @param {{ onlySelf?: boolean } | undefined} opts Angular control options.
+     * @returns {void}
+     */
     markAsUntouched(opts) {
+        /* Trigger dependent expression updates only when untouched state actually changes. */
         let currentState = this.untouched;
         super.markAsUntouched(opts);
-        if (currentState != this.untouched)
+        if (currentState != this.untouched) {
             this.runControlPropChangeExpression([UNTOUCHED, TOUCHED]);
+        }
     }
+    /**
+     * @method markAsDirty
+     * @description Marks control as dirty and triggers dependent expression refreshes on state change.
+     * @param {{ onlySelf?: boolean } | undefined} opts Angular control options.
+     * @returns {void}
+     */
     markAsDirty(opts) {
+        /* Keep custom dirty flag in sync and propagate expression updates when needed. */
         let currentState = this._dirty;
         super.markAsDirty(opts);
         this._dirty = true;
-        if (currentState != this._dirty)
+        if (currentState != this._dirty) {
             this.runControlPropChangeExpression([DIRTY]);
+        }
     }
+    /**
+     * @method markAsPristine
+     * @description Marks control as pristine and triggers dependent expression refreshes on state change.
+     * @param {{ onlySelf?: boolean } | undefined} opts Angular control options.
+     * @returns {void}
+     */
     markAsPristine(opts) {
+        /* Propagate expression updates only when pristine state actually changes. */
         let currentState = this.pristine;
         super.markAsPristine(opts);
-        if (currentState != this.pristine)
+        if (currentState != this.pristine) {
             this.runControlPropChangeExpression([PRISTINE]);
+        }
     }
+    /**
+     * @method markAsPending
+     * @description Marks control pending via base flow and triggers dependent expression refreshes on state change.
+     * @param {{ onlySelf?: boolean; emitEvent?: boolean } | undefined} opts Angular control options.
+     * @returns {void}
+     */
     markAsPending(opts) {
+        /* Propagate expression updates only when pending state actually changes. */
         let currentState = this.pending;
         super.markAsDirty(opts);
-        if (currentState != this.pending)
+        if (currentState != this.pending) {
             this.runControlPropChangeExpression([PENDING]);
+        }
     }
+    /**
+     * @method runControlPropChangeExpression
+     * @description Executes error/class expression updates for changed control state flags.
+     * @param {string[]} propNames State property names to evaluate.
+     * @returns {void}
+     */
     runControlPropChangeExpression(propNames) {
+        /* Re-run mapped error/class expressions for each changed control-state property. */
         propNames.forEach(name => {
-            if ((this._controlProp && this._messageExpression && this._controlProp[name]) || (!this._messageExpression && this.checkErrorMessageStrategy()))
+            /* Refresh errors when property is tracked by message-expression dependencies. */
+            if ((this._controlProp && this._messageExpression && this._controlProp[name]) || (!this._messageExpression && this.checkErrorMessageStrategy())) {
                 this.bindError();
-            if (this._classNameControlProp && this._classNameControlProp[name])
+            }
+            /* Refresh class names when property is tracked by class-expression dependencies. */
+            if (this._classNameControlProp && this._classNameControlProp[name]) {
                 this.bindClassName();
+            }
         });
     }
+    /**
+     * @method refresh
+     * @description Rebuilds decorator expressions and refreshes current error state.
+     * @returns {void}
+     */
     refresh() {
+        /* Rebind expressions and conditional controls, then refresh current error state. */
+        /* Reload expression metadata from model container. */
         this.getMessageExpression(this.parent, this.keyName);
+        /* Rebuild disabled-expression control references. */
         this.bindConditionalControls(DECORATORS["disabled"], "_refDisableControls");
+        /* Rebuild error-expression control references. */
         this.bindConditionalControls(DECORATORS["error"], "_refMessageControls");
+        /* Rebuild class-expression control references. */
         this.bindConditionalControls(DECORATORS["elementClass"], "_refClassNameControls");
+        /* Execute all expression pipelines with current state. */
         this.executeExpressions();
+        /* Rebind errors once references and expressions are refreshed. */
         this.bindError();
     }
+    /**
+     * @method reset
+     * @description Resets control value to provided value or stored base value and clears dirty flag.
+     * @param {any} value Optional value to reset to.
+     * @param {any} options Reset options passed to setValue.
+     * @returns {void}
+     */
     reset(value, options = {}) {
-        if (value !== undefined)
+        /* Reset to provided value or base snapshot and clear local dirty tracker. */
+        /* If a value is provided, reset using that value. */
+        if (value !== undefined) {
             this.setValue(value, options);
-        else
+        }
+        else {
+            /* Otherwise reset to stored base-value snapshot. */
             this.setValue(this.getFormState(this._baseValue), options);
+        }
+        /* Clear custom dirty state after reset. */
         this._dirty = false;
     }
+    /**
+     * @method commit
+     * @description Commits current value as base value and re-evaluates modification state.
+     * @returns {void}
+     */
     commit() {
+        /* Accept current value as new baseline and recompute modified state. */
         this._baseValue = this.value;
         this.callPatch();
     }
+    /**
+     * @method callPatch
+     * @description Updates modification flag and notifies parent patch hook when available.
+     * @returns {void}
+     */
     callPatch() {
+        /* Update modified flag and notify parent patch callback when available. */
+        /* Compare normalized base/current values to compute modified state. */
         this._isModified = this.getValue(this._baseValue) != this.getValue(this.value);
-        if (this.parent && this.parent[PATCH])
+        /* Notify parent patch callback when parent exposes it. */
+        if (this.parent && this.parent[PATCH]) {
             this.parent[PATCH](this.keyName);
+        }
     }
+    /**
+     * @method checkErrorMessageStrategy
+     * @description Evaluates whether error messages should be bound according to strategy and state.
+     * @returns {boolean} True when error binding is currently enabled.
+     */
     checkErrorMessageStrategy() {
+        /* Resolve whether error messages should bind under the configured strategy. */
+        /* Initialize with bind-enabled default. */
         let isBind = true;
+        /* Switch by configured error-binding strategy. */
         switch (this._errorMessageBindingStrategy) {
             case ErrorMessageBindingStrategy.OnSubmit:
+                /* Bind only after form submission. */
                 isBind = this.parent.submitted;
                 break;
             case ErrorMessageBindingStrategy.OnDirty:
+                /* Bind only when control is dirty. */
                 isBind = this._dirty;
                 break;
             case ErrorMessageBindingStrategy.OnTouched:
+                /* Bind only when control is touched. */
                 isBind = this.touched;
                 break;
             case ErrorMessageBindingStrategy.OnDirtyOrTouched:
+                /* Bind when control is dirty or touched. */
                 isBind = this._dirty || this.touched;
                 break;
             case ErrorMessageBindingStrategy.OnDirtyOrSubmit:
+                /* Bind when control is dirty or form is submitted. */
                 isBind = this._dirty || this.parent.submitted;
                 break;
             case ErrorMessageBindingStrategy.OnTouchedOrSubmit:
+                /* Bind when control is touched or form is submitted. */
                 isBind = this.touched || this.parent.submitted;
                 break;
             default:
+                /* Fallback strategy keeps binding enabled. */
                 isBind = true;
         }
+        /* Return final strategy decision. */
         return isBind;
     }
+    /**
+     * @method executeExpressions
+     * @description Executes conditional decorator expressions for disabled state, errors, and element classes.
+     * @returns {void}
+     */
     executeExpressions() {
+        /* Execute conditional expressions for disabled, error, and class-name behaviors. */
         this.processExpression("_refDisableControls", "disabled");
         this.processExpression("_refMessageControls", "bindError");
         this.processExpression("_refClassNameControls", "bindClassName");
     }
+    /**
+     * @method getMessageExpression
+     * @description Loads message/class expression metadata from the model container.
+     * @param {FormGroup} formGroup Parent form group.
+     * @param {string} keyName Control key name.
+     * @returns {void}
+     */
     getMessageExpression(formGroup, keyName) {
+        /* Load decorator metadata that drives conditional error and class bindings. */
+        /* Proceed only when form group contains model instance metadata. */
         if (formGroup[MODEL_INSTANCE]) {
+            /* Resolve metadata container for the model instance constructor. */
             let instanceContainer = defaultContainer.get(formGroup[MODEL_INSTANCE].constructor);
+            /* Apply metadata only when a container is found. */
             if (instanceContainer) {
+                /* Load conditional message expression for this control key. */
                 this._messageExpression = instanceContainer.nonValidationDecorators.error.conditionalExpressions[keyName];
+                /* Load control-property dependencies for message updates. */
                 this._controlProp = instanceContainer.nonValidationDecorators.error.controlProp[this.keyName];
+                /* Load conditional class-name expression for this control key. */
                 this._classNameExpression = instanceContainer.nonValidationDecorators.elementClass.conditionalExpressions[keyName];
+                /* Load control-property dependencies for class-name updates. */
                 this._classNameControlProp = instanceContainer.nonValidationDecorators.elementClass.controlProp[keyName];
-                if (this._classNameExpression)
+                /* Enable element-class update mode when class expression exists. */
+                if (this._classNameExpression) {
                     this.updateOnElementClass = true;
+                }
             }
         }
     }
+    /**
+     * @method getSanitizedValue
+     * @description Applies configured sanitizers to a value in declaration order.
+     * @param {any} value Raw value.
+     * @returns {any} Sanitized value.
+     */
     getSanitizedValue(value) {
+        /* Apply configured sanitizers in order to normalize outgoing values. */
+        /* Iterate all configured sanitizers if available. */
         if (this._sanitizers) {
             for (let sanitizer of this._sanitizers) {
+                /* Apply sanitizer transformation with its configuration. */
                 value = SANITIZERS[sanitizer.name](value, sanitizer.config);
             }
         }
+        /* Return sanitized value result. */
         return value;
     }
+    /**
+     * @method bindConditionalControls
+     * @description Builds and stores control references for conditional decorator expressions.
+     * @param {string} decoratorType Decorator type key.
+     * @param {string} refName Property name that stores computed references.
+     * @returns {void}
+     */
     bindConditionalControls(decoratorType, refName) {
+        /* Create provider for requested decorator type and entity context. */
         this._disableProvider = new DisableProvider(decoratorType, this._entityObject);
+        /* Load zero-argument expression control references. */
         this[refName] = this._disableProvider.zeroArgumentProcess(this, this.keyName);
+        /* Append one-argument expression control references. */
         this._disableProvider.oneArgumentProcess(this, `${this.keyName}${RXCODE}1`).forEach(t => this[refName].push(t));
     }
+    /**
+     * @method setControlErrorMessages
+     * @description Computes and stores control error messages from validation and backend sources.
+     * @returns {void}
+     */
     setControlErrorMessages() {
+        /* Build error messages when strategy allows binding or expression passes. */
         if ((!this._messageExpression && this.checkErrorMessageStrategy()) || this._isPassedExpression) {
+            /* Reset error-message collection before rebuild. */
             this._errorMessages = [];
+            /* Process validation errors when present. */
             if (this.errors) {
                 Object.keys(this.errors).forEach(t => {
+                    /* If parent exists, also sync into parent control-error registry. */
                     if (this.parent) {
                         this.parent[CONTROLS_ERROR][this.keyName] = this._errorMessage = this.getErrorMessage(this.errors, t);
+                        /* Fallback to shaped error object when direct message is missing. */
                         if (!this._errorMessage) {
                             let errorObject = ObjectMaker.toJson(t, undefined, this.errors[t] && this.errors[t][t] ? [this.errors[t][t]] : []);
                             this.parent[CONTROLS_ERROR][this.keyName] = this._errorMessage = this.getErrorMessage(errorObject, t);
                         }
                     }
                     else {
+                        /* Resolve message directly when parent context is not available. */
                         this._errorMessage = this.getErrorMessage(this.errors, t);
                     }
+                    /* Append resolved message to message list. */
                     this._errorMessages.push(this._errorMessage);
                 });
             }
             else {
+                /* Clear current message when no validation errors remain. */
                 this._errorMessage = undefined;
+                /* Remove parent control-error registry value when parent exists. */
                 if (this.parent) {
                     this.parent[CONTROLS_ERROR][this.keyName] = undefined;
                     delete this.parent[CONTROLS_ERROR][this.keyName];
                 }
             }
+            /* Merge backend error messages after validator-message build. */
             let backEndErrors = Object.keys(this.backEndErrors);
-            if (backEndErrors.length > 0)
+            if (backEndErrors.length > 0) {
                 backEndErrors.forEach(t => { this._errorMessages.push(this._errorMessage = this.backEndErrors[t]); });
+            }
         }
         else {
+            /* Expression/strategy says hide errors, so clear caches. */
             this._errorMessages = [];
             this._errorMessage = undefined;
         }
+        /* Store language snapshot used for current error-message cache. */
         this._language = this.getLanguage();
     }
+    /**
+     * @method getLanguage
+     * @description Gets active language from reactive form i18n config.
+     * @returns {string | undefined} Active language code.
+     */
     getLanguage() {
+        /* Return the current reactive-form language code when i18n is configured. */
         return (ReactiveFormConfig.i18n && ReactiveFormConfig.i18n.language) ? ReactiveFormConfig.i18n.language : undefined;
     }
+    /**
+     * @method getErrorMessage
+     * @description Reads a formatted error message for a validation key.
+     * @param {{ [key: string]: string }} errorObject Validation error object.
+     * @param {string} keyName Validation key.
+     * @returns {string | undefined} Resolved error message.
+     */
     getErrorMessage(errorObject, keyName) {
+        /* Return resolved message when payload is present for key. */
         if (errorObject[keyName] && errorObject[keyName][MESSAGE]) {
             return errorObject[keyName][MESSAGE];
         }
+        /* Return undefined when no message payload exists. */
         return;
     }
+    /**
+     * @method processExpression
+     * @description Applies a conditional operation to referenced controls.
+     * @param {string} propName Reference property name.
+     * @param {string} operationType Operation identifier.
+     * @returns {void}
+     */
     processExpression(propName, operationType) {
-        if (this[propName])
+        /* Proceed only when expression reference list exists. */
+        if (this[propName]) {
             for (var controlInfo of this[propName]) {
+                /* Resolve target control either from root scope or relative scope. */
                 let control = controlInfo.isRoot ? ApplicationUtil.getControl(controlInfo.controlPath, ApplicationUtil.getRootFormGroup(this)) : ApplicationUtil.getFormControl(controlInfo.controlPath, this);
+                /* Execute operation only when target control is resolved. */
                 if (control) {
                     if (operationType == "disabled") {
+                        /* Evaluate conditional expression to determine disabled state. */
                         let result = this.executeExpression(controlInfo.conditionalExpression, control);
-                        if (result)
+                        if (result) {
+                            /* Disable target control when expression evaluates truthy. */
                             control.disable();
-                        else
+                        }
+                        else {
+                            /* Enable target control when expression evaluates falsy. */
                             control.enable();
+                        }
                     }
-                    else if (operationType == "bindError")
+                    else if (operationType == "bindError") {
+                        /* Trigger error binding pipeline on target control. */
                         control.bindError();
-                    else if (operationType == "bindClassName")
+                    }
+                    else if (operationType == "bindClassName") {
+                        /* Trigger class-name binding pipeline on target control. */
                         control.bindClassName();
+                    }
                 }
             }
+        }
     }
+    /**
+     * @method executeExpression
+     * @description Executes a conditional expression using model instance context.
+     * @param {Function} expression Expression function.
+     * @param {AbstractControl} control Control used as expression argument.
+     * @returns {Boolean} Expression result.
+     */
     executeExpression(expression, control) {
+        /* Execute expression with model instance context and parent-model helpers. */
         return expression.call(control.parent[MODEL_INSTANCE], control, ApplicationUtil.getParentModelInstanceValue(this), control.parent[MODEL_INSTANCE]);
     }
+    /**
+     * @method getValue
+     * @description Normalizes nullable/empty values for comparison.
+     * @param {any} value Source value.
+     * @returns {any} Normalized comparable value.
+     */
     getValue(value) {
+        /* Normalize nullable and empty values for stable comparisons. */
         return value !== undefined && value !== null && value !== "" ? value : "";
     }
 }
@@ -11390,7 +11851,7 @@ function rangeAsyncValidatorExtension(config) {
 }
 
 function requiredValidatorExtension(config) {
-    return baseValidator(config, AnnotationTypes["required"], requiredValidator(config));
+    return baseValidator(config ?? true, AnnotationTypes["required"], requiredValidator(config));
 }
 
 function timeValidatorExtension(config) {
@@ -12392,15 +12853,16 @@ function getEndpoint(origin) {
     /* Retrieve and return the endpoint metadata associated with the given class */
     return Reflect.getMetadata(endpointMetadataKey, origin);
 }
+
 /**
- * Gets the display header metadata from a class.
- *
- * @param origin - The class from which to retrieve the header metadata.
- * @returns The display header as a string.
+ * Retrieves the display name for a given property of an instance using metadata.
+ * @template T - The type of the instance.
+ * @param {T} instance - The instance from which to retrieve the display name.
+ * @param {string | symbol} propertyKey - The property key for which to retrieve the display name.
+ * @returns {string | undefined} - The display name if found; otherwise, undefined.
  */
-function getDisplay(origin) {
-    /* Retrieve and return the display header metadata associated with the given class */
-    return Reflect.getMetadata(headerMetadataKey, origin);
+function getDisplay(instance, propertyKey) {
+    return Reflect.getMetadata(headerMetadataKey, instance, propertyKey);
 }
 
 /**
@@ -12517,6 +12979,9 @@ class AppEvent {
     }
 }
 
+const TABLE_DEFINITION_METADATA_KEY = Symbol('msa-ng-cdk:table-definition');
+const TABLE_COLUMNS_METADATA_KEY = Symbol('msa-ng-cdk:table-columns');
+
 var Grid;
 (function (Grid) {
     Grid[Grid["All"] = 0] = "All";
@@ -12529,9 +12994,6 @@ var Grid;
     Grid[Grid["None"] = 7] = "None";
 })(Grid || (Grid = {}));
 
-const tableDefinitionMetadataKey = 'custom:vdTableDefinition';
-const tableColumnsMetadataKey = 'custom:vdTableColumns';
-
 var TableColumnType;
 (function (TableColumnType) {
     TableColumnType[TableColumnType["None"] = 0] = "None";
@@ -12595,6 +13057,11 @@ class TableColumn {
      * @property
      */
     display;
+    /**
+     * Cached classes for responsive display visibility.
+     * @property
+     */
+    displayNgClass;
     /**
      * Endpoint for additional data retrieval.
      * @property
@@ -12826,360 +13293,145 @@ class TableColumn {
 }
 
 /**
- * Class representing the structure and behavior of a table definition.
- * It defines various configurations such as column settings, actions,
- * and callbacks for rows and data handling.
- *
+ * Manual creator function to define a column in a table programmatically.
+ * It sets various properties and behaviors for the column without using decorators.
  * @template T - The type of data represented in the table rows.
+ * @param {string} propertyKey - The property key to bind the column to.
+ * @param {Partial<TableColumn<T>>} [args] - Partial configuration for the table column.
+ * @param {string} [propertyType] - Optional explicit type (e.g., 'string', 'number', 'date', 'boolean', 'array') to drive defaults.
+ * @param {any} [target] - Optional target prototype object for custom display text extraction.
+ * @returns {TableColumn<T>} - The fully constructed and initialized TableColumn instance.
  */
-class TableDefinition {
-    /**
-     * @property endpoint
-     * @description API endpoint from which table data will be fetched.
-     * @type {string}
-     */
-    endpoint = '';
-    /**
-     * @property projection
-     * @description Optional projection for specifying which fields should be included
-     * in the fetched data. Can be a single string or an array of field names.
-     * @type {string | string[]}
-     */
-    projection;
+function buildColumn(propertyKey, args, propertyType, target) {
+    /* Create a new instance of TableColumn with the provided arguments */
+    let tableColumn = new TableColumn(args);
+    /* Set default values for the table column properties */
+    tableColumn.name ||= propertyKey;
+    tableColumn.header ||= (target ? getDisplay(target, propertyKey) : null) || tableColumn.name;
+    tableColumn.filter ||= tableColumn.name;
+    tableColumn.sortBy ||= tableColumn.name;
+    tableColumn.content ||= (row) => {
+        /* Get content using property name */
+        var content = Utils.getPropertyValue(row, tableColumn.name);
+        /* Truncate the text if content length is specified */
+        if ((tableColumn?.contentLength ?? 0) > 0) {
+            return Utils.truncateText(content, tableColumn.contentLength);
+        }
+        return content;
+    };
+    tableColumn.configurable = args?.configurable === undefined ? true : args.configurable;
+    tableColumn.display ||= Grid.All;
+    /* Set type to 'Menu' if menu is specified */
+    if (tableColumn.menu) {
+        tableColumn.type ||= TableColumnType.Menu;
+    }
+    /* Set type to 'Icon' if icon is specified */
+    else if (tableColumn.icon) {
+        tableColumn.type ||= TableColumnType.Icon;
+    }
+    /* Set type to 'IconButton' if iconButton is specified */
+    else if (tableColumn.iconButton) {
+        tableColumn.type ||= TableColumnType.IconButton;
+    }
+    /* Set type to enum, if enum type is specified */
+    else if (tableColumn.enumType) {
+        tableColumn.type ||= TableColumnType.Enum;
+        tableColumn.multiple = propertyType?.trim()?.toLowerCase() == 'array';
+    }
+    /* Otherwise, set type depending on property type */
+    else {
+        switch (propertyType?.toLowerCase()) {
+            case 'number':
+                tableColumn.inputType ||= 'number';
+                tableColumn.type ||= TableColumnType.Number;
+                tableColumn.filterOperator = tableColumn.filterOperator != undefined
+                    ? tableColumn.filterOperator
+                    : FilterOperator.Contains;
+                break;
+            case 'date':
+                tableColumn.inputType ||= 'date';
+                tableColumn.type ||= TableColumnType.Date;
+                tableColumn.maxWidth ||= 115;
+                tableColumn.arrowBefore = tableColumn.arrowBefore !== undefined ? tableColumn.arrowBefore : true;
+                break;
+            case 'boolean':
+                tableColumn.type ||= TableColumnType.Toggle;
+                tableColumn.options ||= [{ id: false, name: $localize `:@@no:No` }, { id: true, name: $localize `:@@yes:Yes` }];
+                tableColumn.maxWidth ||= 70;
+                if (tableColumn.type == TableColumnType.Text) {
+                    tableColumn.content = (row) => {
+                        /* Get content using property name */
+                        var content = Utils.getPropertyValue(row, tableColumn.name);
+                        if (content != null) {
+                            return content ? $localize `:@@yes:Yes` : $localize `:@@no:No`;
+                        }
+                        return null;
+                    };
+                }
+                break;
+            /* Default to text type for all other property types */
+            default:
+                tableColumn.type ||= TableColumnType.Text;
+                break;
+        }
+    }
+    /* Set width to minWidth if width is not specified */
+    return tableColumn;
+}
+
+/**
+ * Property decorator to define a column in a table.
+ * It sets various properties and behaviors for the column,
+ * including its name, type, display settings, and associated actions.
+ * @template T - The type of data represented in the table rows.
+ * @param {Partial<TableColumn<T>>} args - Partial configuration for the table column.
+ * @returns {Function} - A decorator function that modifies the target property.
+ */
+function Column(args) {
+    return function (target, propertyKey) {
+        /* Resolve the design:type metadata from the decorator target */
+        const designType = Reflect.getMetadata("design:type", target, propertyKey)?.name;
+        /* Get old table columns */
+        let previousTableColumns = Reflect.getMetadata(TABLE_COLUMNS_METADATA_KEY, target);
+        /* Override the field with the args, if exists */
+        const previousTableColumn = previousTableColumns?.find(x => x.name == propertyKey);
+        const tableColumnArgs = previousTableColumn
+            ? Object.assign({}, previousTableColumn, args)
+            : args;
+        /* Build the structural column using the factory method */
+        let tableColumn = buildColumn(propertyKey, tableColumnArgs, designType, target);
+        /* Override the field, if exists */
+        previousTableColumns = previousTableColumns?.filter(x => x.name != tableColumn.name);
+        /* Create a copy of the result */
+        let tableColumns = previousTableColumns ? previousTableColumns.concat([tableColumn]) : [tableColumn];
+        /* Set column index */
+        tableColumns.forEach((x, i) => x.index ??= i);
+        /* Sort the columns by index */
+        Utils.sortArray(tableColumns, 'index');
+        /* Override the result in the metadata */
+        Reflect.defineMetadata(TABLE_COLUMNS_METADATA_KEY, tableColumns, target);
+    };
+}
+
+/**
+ * Abstract class representing a base entity with common properties and functionality.
+ */
+class BaseEntity {
     /**
-     * @property includes
-     * @description Optional array of related data entities (includes) to be retrieved along
-     * with the main data set.
-     * @type {string[]}
+     * @property ID
+     * @description Represents the unique identifier of the entity.
+     * @type {number}
      */
-    includes;
+    id;
     /**
-     * @property showAction
-     * @description Flag to indicate if action columns (e.g., edit, delete buttons)
-     * should be displayed in the table. Defaults to `true`.
-     * @type {boolean}
+     * @property Version
+     * @description Represents the version number of the entity for concurrency control.
+     * @type {number}
      */
-    showAction = true;
+    version;
     /**
-     * @property selectable
-     * @description Flag to indicate if rows can be selected (e.g., with checkboxes).
-     * Defaults to `true`.
-     * @type {boolean}
-     */
-    selectable = true;
-    /**
-     * @property addable
-     * @description Flag to indicate if new items can be added to the table.
-     * Defaults to `true`.
-     * @type {boolean}
-     */
-    addable = true;
-    /**
-     * @property editable
-     * @description Flag to indicate if rows can be edited. Defaults to `true`.
-     * @type {boolean}
-     */
-    editable = true;
-    /**
-     * @property deletable
-     * @description Flag to indicate if rows can be deleted. Defaults to `true`.
-     * @type {boolean}
-     */
-    deletable = true;
-    /**
-     * @property downloadable
-     * @description Flag to indicate if table data can be downloaded (e.g., as CSV or Excel).
-     * @type {boolean}
-     */
-    downloadable;
-    /**
-     * @property duplicable
-     * @description Flag to indicate if rows can be duplicated.
-     * @type {boolean}
-     */
-    duplicable;
-    /**
-     * @property exportable
-     * @description Determines if the table is exportable.
-     * @type {boolean}
-     */
-    exportable = true;
-    /**
-     * @property exportFileName
-     * @description The name of the file to export.
-     * @type {string}
-     */
-    exportFileName;
-    /**
-     * @property sticky
-     * @description Flag to indicate whether the table headers or columns should stick
-     * to the viewport during scrolling. Defaults to `false`.
-     * @type {boolean}
-     */
-    sticky = false;
-    /**
-     * @property columns
-     * @description Array of table columns that define the structure and data types
-     * of each column in the table.
-     * @type {TableColumn<T>[]}
-     */
-    columns = [];
-    /**
-     * @property hideColumns
-     * @description Optional array of column keys that should be hidden from view.
-     * @type {string[]}
-     */
-    hideColumns;
-    /**
-     * @property rowNgClass
-     * @description Function to dynamically assign CSS classes to rows based on the row data
-     * and context. Can be used for conditional row styling.
-     * @type {(x?: T, ctx?: IGenericListComponent<T>) => any}
-     */
-    rowNgClass;
-    /**
-     * @property rowClick
-     * @description Callback function for handling row click events.
-     * Invoked when a row is clicked.
-     * @type {(x?: T, ctx?: IGenericListComponent<T>) => any}
-     */
-    rowClick;
-    /**
-     * @property onEdit
-     * @description Callback function for handling edit actions.
-     * Invoked when the edit button is clicked for a row.
-     * @type {(x?: T, ctx?: IGenericListComponent<T>) => any}
-     */
-    onEdit;
-    /**
-     * @property detailsTemplate
-     * @description Name of the template to use for displaying additional row details.
-     * @type {string}
-     */
-    detailsTemplate;
-    /**
-     * @property actions
-     * @description Array of action items (e.g., custom buttons) available for each row in the table.
-     * Actions can be context-sensitive based on the row data and table context.
-     * @type {ActionItem<T, IGenericListComponent<T>>[]}
-     */
-    actions = [];
-    /**
-     * @property columnSets
-     * @description Used to display specific columns in the table.
-     * This array defines sets of columns that can be shown
-     * based on the active configuration, allowing for dynamic table
-     * column customization.
-     * @type {string[]}
-     */
-    columnSets = [];
-    /**
-     * Constructor for initializing the table definition with optional values.
-     * Merges the provided initialization object with default properties.
-     *
-     * @param init - Optional partial table definition to initialize values.
-     */
-    constructor(init) {
-        Object.assign(this, init);
-    }
-}
-
-/**
- * Gets classes decoarated with @Table
- * @param origin
- * @returns
- */
-function getTableDefinition(origin) {
-    /* Save the table defintion in the metadata */
-    var tableDefinition = Reflect.getMetadata(tableDefinitionMetadataKey, origin) ?? new TableDefinition({});
-    if (tableDefinition) {
-        /* Set column in the table definition */
-        tableDefinition.columns = Reflect.getMetadata(tableColumnsMetadataKey, Reflect.construct(origin, []))
-            ?.filter((x) => !x.hidden && !tableDefinition.hideColumns?.some(y => y.trim() == x.name.trim()));
-        /* Sort the columns by index */
-        Utils.sortArray(tableDefinition.columns || [], 'index');
-        /* Set endpoint from the decorator @Api, if any */
-        var endpoint = Reflect.getMetadata(endpointMetadataKey, origin);
-        if (endpoint) {
-            tableDefinition.endpoint = endpoint;
-        }
-    }
-    return tableDefinition;
-}
-
-/**
- * Class decorator to create a mat-table
- * @param tableDefinition
- * @returns
- */
-function Table(tableDefinition) {
-    return function (target) {
-        if (tableDefinition?.columns) {
-            /* Add action menus from table definition, if any */
-            var actionColmun = tableDefinition.columns?.find(x => x.name == 'action');
-            if (!actionColmun) {
-                actionColmun = new TableColumn({
-                    index: 2000,
-                    name: 'action',
-                    columnSets: ['action', 'common'],
-                    type: TableColumnType.Action,
-                    disabled: true,
-                    rowMenuItems: actions,
-                    configurable: false,
-                    stickyEnd: true
-                });
-                /* Add the action column into the table columns */
-                tableDefinition.columns.push(actionColmun);
-            }
-            /* Get custom action, if any */
-            var actions = tableDefinition?.actions;
-            if (actions != null && actionColmun != null) {
-                actionColmun.rowMenuItems ??= [];
-                actions.forEach(y => actionColmun.rowMenuItems.push(y));
-            }
-        }
-        /* Save the table defintion in the metadata */
-        Reflect.defineMetadata(tableDefinitionMetadataKey, tableDefinition, target);
-    };
-}
-/**
- * Property decorator to create table columns
- * @param args
- * @returns
- */
-function Column(args) {
-    return function (target, propertyKey) {
-        let tableColumn = new TableColumn(args);
-        tableColumn.name ||= propertyKey;
-        tableColumn.header ||= Reflect.getMetadata(headerMetadataKey, target, propertyKey) || tableColumn.name;
-        tableColumn.filter ||= tableColumn.name;
-        tableColumn.sortBy ||= tableColumn.name;
-        tableColumn.content ||= (row) => {
-            /* Get content using property name */
-            var content = Utils.getPropertyValue(row, tableColumn.name);
-            /* Truncate the text if content length is specified */
-            if ((tableColumn?.contentLength ?? 0) > 0) {
-                return Utils.truncateText(content, tableColumn.contentLength);
-            }
-            return content;
-        };
-        tableColumn.configurable = args?.configurable === undefined ? true : args.configurable;
-        tableColumn.display ||= Grid.All;
-        /* Set type to 'Menu' if menu is specified */
-        if (tableColumn.menu) {
-            tableColumn.type ||= TableColumnType.Menu;
-        }
-        /* Set type to 'Icon' if icon is specified */
-        else if (tableColumn.icon) {
-            tableColumn.type ||= TableColumnType.Icon;
-        }
-        /* Set type to 'IconButton' if iconButton is specified */
-        else if (tableColumn.iconButton) {
-            tableColumn.type ||= TableColumnType.IconButton;
-        }
-        /* Set type to enum, if enum type is specified */
-        else if (tableColumn.enumType) {
-            tableColumn.type ||= TableColumnType.Enum;
-            tableColumn.multiple = Reflect.getMetadata("design:type", target, propertyKey)?.name?.trim()?.toLowerCase() == 'array';
-        }
-        /* Otherwiese, set type depending on property type */
-        else {
-            /* Get property type */
-            var propertyType = Reflect.getMetadata("design:type", target, propertyKey)?.name;
-            switch (propertyType?.toLowerCase()) {
-                case 'number':
-                    tableColumn.inputType ||= 'number';
-                    tableColumn.type ||= TableColumnType.Number;
-                    tableColumn.filterOperator = tableColumn.filterOperator != undefined ? tableColumn.filterOperator : FilterOperator.Contains;
-                    break;
-                case 'date':
-                    tableColumn.inputType ||= 'date';
-                    tableColumn.type ||= TableColumnType.Date;
-                    tableColumn.maxWidth ||= 115;
-                    tableColumn.arrowBefore = tableColumn.arrowBefore !== undefined ? tableColumn.arrowBefore : true;
-                    break;
-                case 'boolean':
-                    tableColumn.type ||= TableColumnType.Toggle;
-                    tableColumn.options ||= [{ id: false, name: $localize `:@@no:No` }, { id: true, name: $localize `:@@yes:Yes` }];
-                    tableColumn.maxWidth ||= 70;
-                    if (tableColumn.type == TableColumnType.Text) {
-                        tableColumn.content = (row) => {
-                            /* Get content using property name */
-                            var content = Utils.getPropertyValue(row, tableColumn.name);
-                            if (content != null) {
-                                return content ? $localize `:@@yes:Yes` : $localize `:@@no:No`;
-                            }
-                            return null;
-                        };
-                    }
-                    break;
-                default:
-                    tableColumn.type ||= TableColumnType.Text;
-                    break;
-            }
-        }
-        if (tableColumn.maxWidth) {
-            tableColumn.width ||= tableColumn.maxWidth;
-        }
-        /* Get old table columns */
-        let previousTableColumns = Reflect.getMetadata(tableColumnsMetadataKey, target);
-        /* Override the field, if exists */
-        previousTableColumns = previousTableColumns?.filter(x => x.name != tableColumn.name);
-        /* Create a copy of the result */
-        let tableColumns = previousTableColumns ? previousTableColumns.concat([tableColumn]) : [tableColumn];
-        /* Set column index */
-        tableColumns.forEach((x, i) => x.index ??= i);
-        /* Sort the columns by index */
-        Utils.sortArray(tableColumns, 'index');
-        /* Override the result in the metadata */
-        Reflect.defineMetadata(tableColumnsMetadataKey, tableColumns, target);
-    };
-}
-/**
- * Decorator function to define columns for a table object.
- * @param type The constructor function of the table object.
- * @returns A decorator function.
- */
-function ColumnObject(type) {
-    return function (target, propertyKey) {
-        /* Retrieve table definition */
-        var tableDef = getTableDefinition(type);
-        /* Retrieve columns from the table definition */
-        var columns = tableDef.columns;
-        /* Update column names with property key prefix */
-        columns?.forEach(x => x.name = `${propertyKey}.${x.name}`);
-        /* Get existing table columns from metadata */
-        let previousTableColumns = Reflect.getMetadata(tableColumnsMetadataKey, target);
-        /* Create a copy of the existing columns array and append new columns */
-        let tableColumns = previousTableColumns ? previousTableColumns.concat(columns ?? []) : [];
-        /* Set column index if not already set */
-        tableColumns.forEach((x, i) => x.index ??= i);
-        /* Sort the columns by index */
-        Utils.sortArray(tableColumns, 'index');
-        /* Override the table columns in the metadata */
-        Reflect.defineMetadata(tableColumnsMetadataKey, tableColumns, target);
-    };
-}
-
-/**
- * Abstract class representing a base entity with common properties and functionality.
- */
-class BaseEntity {
-    /**
-     * @property ID
-     * @description Represents the unique identifier of the entity.
-     * @type {number}
-     */
-    id;
-    /**
-     * @property Version
-     * @description Represents the version number of the entity for concurrency control.
-     * @type {number}
-     */
-    version;
-    /**
-     * Constructor to initialize properties of the base entity.
-     * @param init Partial object containing initial property values.
+     * Constructor to initialize properties of the base entity.
+     * @param init Partial object containing initial property values.
      */
     constructor(init) {
         Object.assign(this, init);
@@ -14516,6 +14768,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 const parseProjectionString = (projection) => {
     /* Handle array input: join and proceed to cleaning */
     let input = Array.isArray(projection) ? projection.join(',') : projection;
+    /* Normalize count-style pseudo field calls and preserve explicit aliases when provided */
+    input = input
+        .replace(/\b([a-zA-Z_][a-zA-Z0-9_]*)(?:\.|\$)(?:count|Count)\(\)\s*:\s*([a-zA-Z_][a-zA-Z0-9_]*)/g, '$1$count:$2')
+        .replace(/\b([a-zA-Z_][a-zA-Z0-9_]*)(?:\.|\$)(?:count|Count)\(\)(?!\s*:)/g, '$1$count:$1Count');
+    /* Normalize orderBy pseudo field calls into API projection field format */
+    input = input.replace(/\b([a-zA-Z_][a-zA-Z0-9_]*)(?:\.|\$)orderBy\(([^)]*)\)/g, '$1$orderBy($2)');
+    /* Normalize filter pseudo field calls into API projection field format */
+    input = input.replace(/\b([a-zA-Z_][a-zA-Z0-9_]*)(?:\.|\$)filter\(([^)]*)\)/g, '$1$filter($2)');
     /* If it's already a clean, flat, comma-separated string without braces, return it */
     if (!input.includes('{') && !input.includes('}')) {
         return input.replace(/\s+/g, '');
@@ -14530,10 +14790,54 @@ const parseProjectionString = (projection) => {
     cleaned = cleaned.replace(/,\s*\)/g, ')');
     /* Replace spaces between alphanumeric characters with commas and remove all remaining whitespace */
     return cleaned
+        .replace(/(\)\$[a-zA-Z_][a-zA-Z0-9_]*\([^)]*\))\s+([a-zA-Z0-9_])/g, '$1,$2')
         .replace(/([a-zA-Z0-9])\s+([a-zA-Z0-9])/g, '$1,$2')
         .replace(/\)([a-zA-Z_])/g, '),$1')
         .replace(/\s+/g, '');
 };
+/**
+ * @method parseProjectionArray
+ * @description Parses projection input (string, string array, or raw multi-line string) into a flattened projection array.
+ * @param {string | string[]} projection The raw selection input
+ * @returns {string[]} The formatted projection as an array of fields
+ */
+const parseProjectionArray = (projection) => {
+    /* First, parse the projection string to get a clean, comma-separated string */
+    const parsedProjection = parseProjectionString(projection);
+    /* If the parsed projection is empty, return an empty array */
+    if (!parsedProjection) {
+        return [];
+    }
+    const fields = [];
+    let currentField = '';
+    let parenthesesDepth = 0;
+    /* Split only by top-level commas to keep function arguments intact (e.g. orderBy(a,b)) */
+    for (const char of parsedProjection) {
+        if (char === '(') {
+            parenthesesDepth++;
+        }
+        /* Decrease depth on closing parentheses, but ensure it doesn't go below zero */
+        if (char === ')') {
+            parenthesesDepth = Math.max(0, parenthesesDepth - 1);
+        }
+        /* If we encounter a comma at the top level (not inside parentheses), we finalize the current field */
+        if (char === ',' && parenthesesDepth === 0) {
+            if (currentField) {
+                fields.push(currentField);
+                currentField = '';
+            }
+            continue;
+        }
+        /* Append the current character to the current field */
+        currentField += char;
+    }
+    /* Push the last field if it exists */
+    if (currentField) {
+        fields.push(currentField);
+    }
+    /* Trim whitespace from each field and filter out any empty strings */
+    return fields.map((field) => field.trim()).filter(Boolean);
+};
 
 class GenericService {
     endpoint;
@@ -14840,11 +15144,17 @@ class GenericService {
      * Downloads a file from the server
      * @param path Relative path to the download action
      * @param params Optional query parameters
+     * @param headers Optional HTTP headers
      * @param handleError Whether to handle errors (default: true)
      */
-    download(path, params, handleError = true) {
+    download(path, params, headers, handleError = true) {
         let request = this.http
-            .get(`${this.endpoint}/${path ? path : 'download'}`, { params: Utils.toHttpParams(params), responseType: 'arraybuffer', observe: 'response' })
+            .get(`${this.endpoint}/${path ? path : 'download'}`, {
+            params: Utils.toHttpParams(params),
+            responseType: 'arraybuffer',
+            observe: 'response',
+            headers: this.toHttpHeaders(headers)
+        })
             .pipe(map$1(x => { return { data: x.body, filename: this.getFileNameFromHeaders(x.headers) }; }));
         /* Handle error */
         if (handleError) {
@@ -14856,10 +15166,11 @@ class GenericService {
      * Asynchronously downloads a file from the server
      * @param path Relative path to the download action
      * @param params Optional query parameters
+     * @param headers Optional HTTP headers
      * @returns Promise resolving to the download result
      */
-    async downloadAsync(path, params) {
-        return await firstValueFrom(this.download(path, params));
+    async downloadAsync(path, params, headers) {
+        return await firstValueFrom(this.download(path, params, headers));
     }
     /**
      * Duplicates a record by ID
@@ -15374,6 +15685,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                 type: Input
             }] } });
 
+/**
+ * @function hasRequiredValidator
+ * @description Checks required state using runtime marker, native Angular validators and Rx validator metadata.
+ * @param {AbstractControl | null | undefined} control The control to evaluate.
+ * @returns {boolean} True when the control should be treated as required.
+ */
+const hasRequiredValidator = (control) => {
+    if (!control) {
+        return false;
+    }
+    /* Use the explicit required-state API when available on the control instance. */
+    const controlWithRequiredApi = control;
+    if (typeof controlWithRequiredApi.isRequiredActive === 'function') {
+        return controlWithRequiredApi.isRequiredActive();
+    }
+    /* Fallback for plain Angular controls that do not use RxFormControl. */
+    return typeof control.hasValidator === 'function' ? control.hasValidator(Validators.required) : false;
+};
+
 /**
  * Abstract class for custom form field controls.
  */
@@ -15485,6 +15815,12 @@ class AbstractMatFormField {
      * @type {boolean}
      */
     _required = false;
+    /**
+     * @property _resolvedRequired
+     * @description Caches the effective required state to detect runtime changes.
+     * @type {boolean}
+     */
+    _resolvedRequired = false;
     /**
      * @property required
      * @description Sets the required state.
@@ -15500,7 +15836,7 @@ class AbstractMatFormField {
      * @type {boolean}
      */
     get required() {
-        return this._required;
+        return this._required || hasRequiredValidator(this.ngControl?.control);
     }
     /**
      * @property _readonly
@@ -15687,6 +16023,12 @@ class AbstractMatFormField {
     ngDoCheck() {
         if (this.ngControl) {
             this.updateErrorState();
+            /* Check if the required state has changed and update accordingly */
+            const nextRequired = this.required;
+            if (this._resolvedRequired !== nextRequired) {
+                this._resolvedRequired = nextRequired;
+                this.stateChanges.next();
+            }
         }
     }
     /**
@@ -16450,7 +16792,7 @@ class VdSelectComponent extends AbstractSelectFormField {
                 provide: MAT_SELECT_CONFIG,
                 useValue: { overlayPanelClass: 'vd-select-filter-overlay' }
             }
-        ], queries: [{ propertyName: "optionTemplate", first: true, predicate: VdSelectOptionDirective, descendants: true }, { propertyName: "triggerTemplate", first: true, predicate: VdSelectTriggerDirective, descendants: true }], viewQueries: [{ propertyName: "selectEl", first: true, predicate: MatSelect, descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-select\n  [placeholder]=\"placeholder\"\n  i18n-placeholder\n  [(ngModel)]=\"value\"\n  #select=\"matSelect\"\n  (selectionChange)=\"handleChange($event)\"\n  [hidden]=\"readonly\"\n  [multiple]=\"multiple\"\n  [compareWith]=\"compareWith??defaultCompareWith\"\n  [disabled]=\"disabled\"\n  flex\n>\n  <!-- #region Filter input -->\n  <div class=\"mat-mdc-form-field mat-form-field-appearance-fill flex\">\n    <div\n      class=\"mat-mdc-text-field-wrapper mdc-text-field mdc-text-field--filled mdc-text-field--no-label\"\n    >\n      <div class=\"mat-mdc-form-field-focus-overlay\"></div>\n      <div class=\"mat-mdc-form-field-flex\">\n        <div class=\"mat-mdc-form-field-infix\" layout=\"row\" flex>\n          <input\n            matInput\n            #filterInput\n            type=\"text\"\n            placeholder=\"Filter...\"\n            class=\"mat-mdc-input-element vd-select-filter mat-mdc-form-field-input-control mdc-text-field__input\"\n            (keyup)=\"handleFilter($event)\"\n            flex\n          />\n          @if (filterInput?.value) {\n          <mat-icon\n            (click)=\"filterInput!.value = ''; handleFilter($event);\"\n            fontSet=\"material-symbols-outlined\"\n            >close</mat-icon\n          >\n          }\n        </div>\n      </div>\n      <div class=\"mdc-line-ripple\"></div>\n    </div>\n  </div>\n  <!-- #endregion -->\n\n  <!-- #region Selection template -->\n  <ng-template #selectionTemplate let-label=\"label\">\n    <span i18n=\"@@selection\"\n      >{ label, select, option {option} other { {{ label }} } }</span\n    >\n  </ng-template>\n  <!-- #endregion -->\n\n  <!-- #region Option template -->\n  <ng-template #optionTextTemplate let-option=\"option\">\n    <span\n      layout=\"column\"\n      class=\"option-text\"\n      [ngClass]=\"{'option-has-hint': $safeNavigationMigration(option.hint?.length) > 0}\"\n    >\n      <ng-template\n        [ngTemplateOutlet]=\"selectionTemplate\"\n        [ngTemplateOutletContext]=\"{ label: option[optionTextProperty] }\"\n      ></ng-template>\n      <span\n        class=\"mat-caption text-secondary option-hint\"\n        [matTooltip]=\"option.hint\"\n        >{{option.hint}}</span\n      >\n    </span>\n  </ng-template>\n  <!-- #endregion -->\n\n  <!-- #region Option icon template -->\n  <ng-template #optionIconTemplate let-option=\"option\" let-isAvatar=\"isAvatar\">\n    <!-- #region Property icon -->\n    @if (matIconKey && !svgIconKey) {\n    <mat-icon\n      [class.mat-mdc-chip-avatar]=\"isAvatar\"\n      [fontSet]=\"fontSet || 'material-symbols-outlined'\"\n      >{{option[matIconKey]}}</mat-icon\n    >\n    } @if (svgIconKey && !matIconKey) {\n    <mat-icon\n      [class.mat-mdc-chip-avatar]=\"isAvatar\"\n      [svgIcon]=\"option[svgIconKey]\"\n      [fontSet]=\"fontSet || 'material-symbols-outlined'\"\n    ></mat-icon>\n    }\n    <!-- #endregion -->\n\n    <!-- #region Option icon -->\n    @if (option.icon?.matIcon) {\n    <mat-icon\n      [class.mat-mdc-chip-avatar]=\"isAvatar\"\n      [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\"\n      [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"\n      >{{option.icon?.matIcon}}</mat-icon\n    >\n    } @if (option.icon?.svgIcon) {\n    <mat-icon\n      [class.mat-mdc-chip-avatar]=\"isAvatar\"\n      [svgIcon]=\"$safeNavigationMigration(option.icon?.svgIcon)\"\n      [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\"\n      [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"\n    ></mat-icon>\n    }\n    <!-- #endregion -->\n\n    <!-- #region Dynamic icon -->\n    @if (optionIcon; as optionIcon) {\n    <ng-template\n      #optionIconTemplate\n      [ngTemplateOutlet]=\"optionIconTemplate\"\n      let-optionIcon=\"optionIcon\"\n      [ngTemplateOutletContext]=\"{ optionIcon: optionIcon(option) }\"\n    >\n      @if (optionIcon.svgIcon) {\n      <mat-icon\n        [class.mat-mdc-chip-avatar]=\"isAvatar\"\n        [svgIcon]=\"optionIcon.svgIcon\"\n        [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\"\n      ></mat-icon>\n      } @if (optionIcon.matIcon) {\n      <mat-icon\n        [class.mat-mdc-chip-avatar]=\"isAvatar\"\n        [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\"\n        >{{optionIcon.matIcon}}</mat-icon\n      >\n      }\n    </ng-template>\n    }\n    <!-- #endregion -->\n  </ng-template>\n  <!-- #endregion -->\n\n  <!-- #region Option icon template -->\n  <ng-template #optionIconChipAvatarTemplate let-option=\"option\">\n    <!-- #region Property icon -->\n    <span class=\"option-icon\" matChipAvatar>\n      <ng-template\n        [ngTemplateOutlet]=\"optionIconTemplate\"\n        [ngTemplateOutletContext]=\"{ option: option }\"\n      ></ng-template>\n    </span>\n    <!-- #endregion -->\n  </ng-template>\n  <!-- #endregion -->\n\n  <!-- #region Trigger for launch button -->\n  @if (onLaunch.observed) {\n  <mat-select-trigger [class]=\"triggerCssClass\">\n    <span layout=\"row\" layout-align=\"start center\">\n      @for (option of selectedOptions; track option; let i = $index; let last =\n      $last) {\n      <ng-template\n        [ngTemplateOutlet]=\"optionIconTemplate\"\n        [ngTemplateOutletContext]=\"{ option: option }\"\n      ></ng-template>\n      <ng-template\n        [ngTemplateOutlet]=\"selectionTemplate\"\n        [ngTemplateOutletContext]=\"{ label: option[optionTextProperty] }\"\n      ></ng-template>\n\n      @if (!last) {\n      <span>&nbsp;&nbsp;</span>\n      } }\n    </span>\n    <mat-icon\n      class=\"vd-select-launch\"\n      (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\"\n      >launch</mat-icon\n    >\n  </mat-select-trigger>\n  }\n  <!-- #endregion -->\n\n  <!-- #region Custom trigger template -->\n  @if (!onLaunch.observed && triggerTemplate && triggerTemplate.templateRef) {\n  <mat-select-trigger [class]=\"triggerCssClass\">\n    <ng-template\n      [ngTemplateOutlet]=\"triggerTemplate.templateRef!\"\n      [ngTemplateOutletContext]=\"{ trigger: selectedOptions }\"\n    ></ng-template>\n  </mat-select-trigger>\n  }\n  <!-- #endregion -->\n\n  <!-- #region Option template as trigger -->\n  @if (!onLaunch.observed && !triggerTemplate?.templateRef &&\n  optionTemplate?.templateRef) {\n  <mat-select-trigger [class]=\"triggerCssClass\">\n    <span layout=\"row\" layout-align=\"start center\">\n      @for (option of selectedOptions; track option; let i = $index; let last =\n      $last) {\n      <span layout=\"row\" layout-align=\"start center\">\n        <ng-template\n          [ngTemplateOutlet]=\"optionIconTemplate\"\n          [ngTemplateOutletContext]=\"{ option: option }\"\n        ></ng-template>\n        @if (optionTemplate && optionTemplate.templateRef) {\n        <ng-template\n          [ngTemplateOutlet]=\"optionTemplate.templateRef!\"\n          [ngTemplateOutletContext]=\"{ option: option, text: option[optionTextProperty] }\"\n        ></ng-template>\n        }\n      </span>\n      @if (!last) {\n      <span>&nbsp;&nbsp;</span>\n      } }\n    </span>\n  </mat-select-trigger>\n  }\n  <!-- #endregion -->\n\n  <!-- #region Trigger for icons -->\n  @if (!triggerTemplate?.templateRef && !optionTemplate?.templateRef) {\n  <mat-select-trigger>\n    <span layout=\"row\" layout-align=\"start center\" class=\"option-trigger\">\n      @for (option of selectedOptions; track option; let i = $index; let last =\n      $last) { @if (multiple) {\n      <mat-chip>\n        @if(optionIcon || matIconKey || svgIconKey || option.icon) {\n        <span matChipAvatar>\n          <ng-template\n            [ngTemplateOutlet]=\"optionIconTemplate\"\n            [ngTemplateOutletContext]=\"{ option: option }\"\n          ></ng-template>\n        </span>\n        }\n        <ng-template\n          [ngTemplateOutlet]=\"optionTextTemplate\"\n          [ngTemplateOutletContext]=\"{ option: option }\"\n        ></ng-template>\n      </mat-chip>\n      } @else {\n      <ng-template\n        [ngTemplateOutlet]=\"optionIconChipAvatarTemplate\"\n        [ngTemplateOutletContext]=\"{ option: option }\"\n      ></ng-template>\n      <ng-template\n        [ngTemplateOutlet]=\"optionTextTemplate\"\n        [ngTemplateOutletContext]=\"{ option: option }\"\n      ></ng-template>\n      } @if (!last) {\n      <span>&nbsp;&nbsp;</span>\n      } }\n    </span>\n  </mat-select-trigger>\n  }\n  <!-- #endregion -->\n\n  <!-- #region Default option -->\n  @if (!multiple && defaultOption) {\n  <mat-option class=\"tc-grey-500\" i18n=\"@@pleaseSelect\"\n    >--- Please Select ---</mat-option\n  >\n  }\n  <!-- #endregion -->\n\n  <!-- #region Options -->\n  @for (option of filteredOptions; track option; let first = $first) {\n  <mat-option\n    [value]=\"mapper ? option : option[optionValueProperty]\"\n    [disabled]=\"$safeNavigationMigration(option?.disabled)\"\n  >\n    <!-- #region Property icon -->\n    @if (matIconKey && !svgIconKey) {\n    <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\"\n      >{{option[matIconKey]}}</mat-icon\n    >\n    } @if (svgIconKey && !matIconKey) {\n    <mat-icon\n      [svgIcon]=\"option[svgIconKey]\"\n      [fontSet]=\"fontSet || 'material-symbols-outlined'\"\n    ></mat-icon>\n    }\n    <!-- #endregion -->\n\n    <!-- #region Option icon -->\n    @if (option.icon?.matIcon) {\n    <mat-icon\n      [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\"\n      [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"\n      >{{option.icon?.matIcon}}</mat-icon\n    >\n    } @if (option.icon?.svgIcon) {\n    <mat-icon\n      [svgIcon]=\"$safeNavigationMigration(option.icon?.svgIcon)\"\n      [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\"\n      [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"\n    ></mat-icon>\n    }\n    <!-- #endregion -->\n\n    <!-- #region Text -->\n    <span\n      layout=\"column\"\n      layout-align=\"start center\"\n      class=\"option-text\"\n      [ngClass]=\"{'option-has-hint':$safeNavigationMigration(option.hint?.length)>0}\"\n    >\n      @if (!optionTemplate?.templateRef) {\n      <ng-template\n        [ngTemplateOutlet]=\"selectionTemplate\"\n        [ngTemplateOutletContext]=\"{ label: option[optionTextProperty] }\"\n      ></ng-template>\n      } @if (optionTemplate && optionTemplate.templateRef) {\n      <ng-template\n        [ngTemplateOutlet]=\"optionTemplate.templateRef!\"\n        [ngTemplateOutletContext]=\"{ option: option, text: option[optionTextProperty] }\"\n      ></ng-template>\n      }\n      <!-- #endregion -->\n      <span\n        class=\"mat-caption text-secondary option-hint\"\n        [matTooltip]=\"option.hint\"\n        >{{option.hint}}</span\n      >\n    </span>\n  </mat-option>\n  }\n  <!-- #endregion -->\n</mat-select>\n\n<!-- #region Read only value -->\n@if (readonly) {\n<div>\n  @if (currentValue) {\n  <div>\n    <div class=\"readonly-value\">\n      @if (!optionTemplate?.templateRef && !triggerTemplate?.templateRef) {\n      <span>\n        <span layout=\"row\" layout-align=\"start center\">\n          @for (option of selectedOptions; track option; let i = $index; let\n          last = $last) {\n          <span layout=\"row\" layout-align=\"start center\">\n            @if(!this.multiple) { @if(optionIcon || matIconKey || svgIconKey ||\n            option.icon) {\n            <ng-template\n              [ngTemplateOutlet]=\"optionIconTemplate\"\n              [ngTemplateOutletContext]=\"{ option: currentValue }\"\n            ></ng-template>\n            <span>&nbsp;&nbsp;</span>\n            }\n            <ng-template\n              [ngTemplateOutlet]=\"selectionTemplate\"\n              [ngTemplateOutletContext]=\"{ label: currentValue[optionTextProperty] }\"\n            ></ng-template>\n            } @else if(currentValue[i]){\n            <mat-chip>\n              @if(optionIcon || matIconKey || svgIconKey || option.icon) {\n              <span matChipAvatar>\n                <ng-template\n                  [ngTemplateOutlet]=\"optionIconTemplate\"\n                  [ngTemplateOutletContext]=\"{ option: currentValue[i] }\"\n                ></ng-template>\n              </span>\n              }\n              <ng-template\n                [ngTemplateOutlet]=\"selectionTemplate\"\n                [ngTemplateOutletContext]=\"{ label: currentValue[i][optionTextProperty] }\"\n              ></ng-template>\n            </mat-chip>\n            }\n          </span>\n          @if (!last) {\n          <span>&nbsp;&nbsp;</span>\n          } }\n        </span>\n      </span>\n      } @if (triggerTemplate && triggerTemplate.templateRef) {\n      <span layout=\"row\" layout-align=\"start center\" class=\"option-trigger\">\n        <ng-template\n          [ngTemplateOutlet]=\"optionIconTemplate\"\n          [ngTemplateOutletContext]=\"{ option: currentValue }\"\n        ></ng-template>\n        <span>&nbsp;&nbsp;</span>\n        <ng-template\n          [ngTemplateOutlet]=\"optionIconTemplate\"\n          [ngTemplateOutletContext]=\"{ option: currentValue }\"\n        ></ng-template>\n        <ng-template\n          [ngTemplateOutlet]=\"triggerTemplate.templateRef!\"\n          [ngTemplateOutletContext]=\"{ trigger: currentValue }\"\n        ></ng-template>\n      </span>\n      } @if (optionTemplate && optionTemplate.templateRef &&\n      !triggerTemplate?.templateRef) {\n      <span layout=\"row\" layout-align=\"start center\" class=\"option-trigger\">\n        <ng-template\n          [ngTemplateOutlet]=\"optionIconTemplate\"\n          [ngTemplateOutletContext]=\"{ option: currentValue }\"\n        ></ng-template>\n        <span>&nbsp;&nbsp;</span>\n        <ng-template\n          [ngTemplateOutlet]=\"optionTemplate.templateRef!\"\n          [ngTemplateOutletContext]=\"{ option: currentValue, text: currentValue[optionTextProperty] }\"\n        ></ng-template>\n      </span>\n      }\n    </div>\n    @if (onLaunch.observed) {\n    <mat-icon\n      class=\"vd-select-launch-readonly\"\n      (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\"\n      >launch</mat-icon\n    >\n    }\n  </div>\n  } @if (!currentValue) {\n  <div>&nbsp;</div>\n  }\n</div>\n}\n<!-- #endregion -->\n", styles: [".vd-select-launch{position:absolute;right:30px;top:-5px;font-size:18px;cursor:pointer}.readonly-value{padding-right:24px;opacity:.6;min-height:15px}.vd-select-launch-readonly{position:absolute;right:0;top:9px;font-size:18px;cursor:pointer}.vd-select-filter-wrap{background:inherit;position:sticky;top:-8px;box-sizing:border-box;z-index:100}.vd-select-filter-wrap .vd-select-filter-inner{z-index:100;display:flex;flex-direction:row;align-items:center;background:inherit}.vd-select-filter-wrap .vd-select-filter-inner .vd-select-filter{box-shadow:none;padding:16px 16px 16px 0;box-sizing:border-box;width:100%;border:none;background-color:inherit;color:inherit}.vd-select-filter-wrap .vd-select-filter-inner .vd-select-filter:focus-visible{border:none;outline:none}.vd-select-filter-wrap .mat-divider{display:block;width:100%;border-top-width:1px;border-top-style:solid;box-sizing:border-box}::ng-deep .mat-mdc-select-trigger{display:flex!important}::ng-deep .mat-mdc-select-trigger .mat-icon{display:flex;margin-right:8px}::ng-deep .mat-mdc-form-field-type-vd-select-multiple .mat-mdc-form-field-infix{padding-top:4px!important;padding-bottom:4px!important}::ng-deep .mat-mdc-form-field-type-vd-select-multiple .mat-mdc-form-field-infix .mat-mdc-select-trigger{height:100%}.mat-mdc-select mat-select-trigger .option-text,.mat-mdc-select .mat-mdc-option .option-text{display:contents!important}.mat-mdc-select mat-select-trigger .option-text.option-has-hint,.mat-mdc-select .mat-mdc-option .option-text.option-has-hint{line-height:.92em}.mat-mdc-select mat-select-trigger .option-text .option-hint,.mat-mdc-select .mat-mdc-option .option-text .option-hint{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}.mat-mdc-select:not(.mat-mdc-select-multiple) mat-select-trigger .option-text,.mat-mdc-select:not(.mat-mdc-select-multiple) .mat-mdc-option .option-text{width:calc(100% - 36px)}.mat-mdc-select:not(.mat-mdc-select-multiple) mat-select-trigger .mat-mdc-form-field-infix{padding-top:8px;padding-bottom:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2$2.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", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i2$2.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i7.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: i7.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+        ], queries: [{ propertyName: "optionTemplate", first: true, predicate: VdSelectOptionDirective, descendants: true }, { propertyName: "triggerTemplate", first: true, predicate: VdSelectTriggerDirective, descendants: true }], viewQueries: [{ propertyName: "selectEl", first: true, predicate: MatSelect, descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-select [placeholder]=\"placeholder\" i18n-placeholder [(ngModel)]=\"value\" #select=\"matSelect\" (selectionChange)=\"handleChange($event)\" [hidden]=\"readonly\" [multiple]=\"multiple\" [compareWith]=\"compareWith??defaultCompareWith\" [disabled]=\"disabled\" flex>\n    <!-- #region Filter input -->\n    <div class=\"mat-mdc-form-field mat-form-field-appearance-fill flex\">\n        <div class=\"mat-mdc-text-field-wrapper mdc-text-field mdc-text-field--filled mdc-text-field--no-label\">\n            <div class=\"mat-mdc-form-field-focus-overlay\"></div>\n            <div class=\"mat-mdc-form-field-flex\">\n                <div class=\"mat-mdc-form-field-infix\" layout=\"row\" flex>\n                    <input matInput #filterInput type=\"text\" placeholder=\"Filter...\" class=\"mat-mdc-input-element vd-select-filter mat-mdc-form-field-input-control mdc-text-field__input\" (keyup)=\"handleFilter($event)\" flex />\n                    @if (filterInput?.value) {\n                        <mat-icon (click)=\"filterInput!.value = ''; handleFilter($event);\" fontSet=\"material-symbols-outlined\">close</mat-icon>\n                    }\n                </div>\n            </div>\n            <div class=\"mdc-line-ripple\"></div>\n        </div>\n    </div>\n    <!-- #endregion -->\n    <!-- #region Selection template -->\n    <ng-template #selectionTemplate let-label=\"label\">\n        <span i18n=\"@@selection\">{ label, select, option {option} other { {{ label }} } }</span>\n    </ng-template>\n    <!-- #endregion -->\n    <!-- #region Option template -->\n    <ng-template #optionTextTemplate let-option=\"option\">\n        <span layout=\"column\" class=\"option-text\" [ngClass]=\"{'option-has-hint': $safeNavigationMigration(option.hint?.length) > 0}\">\n            <ng-template [ngTemplateOutlet]=\"selectionTemplate\" [ngTemplateOutletContext]=\"{ label: option[optionTextProperty] }\"></ng-template>\n            <span class=\"mat-caption text-secondary option-hint\" [matTooltip]=\"option.hint\">{{option.hint}}</span>\n        </span>\n    </ng-template>\n    <!-- #endregion -->\n    <!-- #region Option icon template -->\n    <ng-template #optionIconTemplate let-option=\"option\" let-isAvatar=\"isAvatar\">\n        <!-- #region Property icon -->\n        @if (matIconKey && !svgIconKey) {\n            <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n        }\n        @if (svgIconKey && !matIconKey) {\n            <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n        }\n        <!-- #endregion -->\n        <!-- #region Option icon -->\n        @if (option.icon?.matIcon) {\n            <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\">{{option.icon?.matIcon}}</mat-icon>\n        }\n        @if (option.icon?.svgIcon) {\n            <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [svgIcon]=\"$safeNavigationMigration(option.icon?.svgIcon)\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n        }\n        <!-- #endregion -->\n        <!-- #region Dynamic icon -->\n        @if (optionIcon; as optionIcon) {\n            <ng-template #optionIconTemplate [ngTemplateOutlet]=\"optionIconTemplate\" let-optionIcon=\"optionIcon\" [ngTemplateOutletContext]=\"{ optionIcon: optionIcon(option) }\">\n                @if (optionIcon.svgIcon) {\n                    <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\"></mat-icon>\n                }\n                @if (optionIcon.matIcon) {\n                    <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\">{{optionIcon.matIcon}}</mat-icon>\n                }\n            </ng-template>\n        }\n        <!-- #endregion -->\n    </ng-template>\n    <!-- #endregion -->\n    <!-- #region Option icon template -->\n    <ng-template #optionIconChipAvatarTemplate let-option=\"option\">\n        <!-- #region Property icon -->\n        <span class=\"option-icon\" matChipAvatar>\n            <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n        </span>\n        <!-- #endregion -->\n    </ng-template>\n    <!-- #endregion -->\n    <!-- #region Trigger for launch button -->\n    @if (onLaunch.observed) {\n        <mat-select-trigger [class]=\"triggerCssClass\">\n            <span layout=\"row\" layout-align=\"start center\">\n                @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n                    <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                    <ng-template [ngTemplateOutlet]=\"selectionTemplate\" [ngTemplateOutletContext]=\"{ label: option[optionTextProperty] }\"></ng-template>\n                    @if (!last) {\n                        <span>&nbsp;&nbsp;</span>\n                    }\n                }\n            </span>\n            <mat-icon class=\"vd-select-launch\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\n        </mat-select-trigger>\n    }\n    <!-- #endregion -->\n    <!-- #region Custom trigger template -->\n    @if (!onLaunch.observed && triggerTemplate && triggerTemplate.templateRef) {\n        <mat-select-trigger [class]=\"triggerCssClass\">\n            <ng-template [ngTemplateOutlet]=\"triggerTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: selectedOptions }\"></ng-template>\n        </mat-select-trigger>\n    }\n    <!-- #endregion -->\n    <!-- #region Option template as trigger -->\n    @if (!onLaunch.observed && !triggerTemplate?.templateRef && optionTemplate?.templateRef) {\n        <mat-select-trigger [class]=\"triggerCssClass\">\n            <span layout=\"row\" layout-align=\"start center\">\n                @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n                    @if (multiple) {\n                        <mat-chip>\n                            @if(optionIcon || matIconKey || svgIconKey || option.icon) {\n                                <span matChipAvatar>\n                                    <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                                </span>\n                            }\n                            <ng-template [ngTemplateOutlet]=\"optionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: option, text: option[optionTextProperty] }\"></ng-template>\n                        </mat-chip>\n                    }\n                    @else\n                    {\n                        <span layout=\"row\" layout-align=\"start center\">\n                            <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                            <ng-template [ngTemplateOutlet]=\"optionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: option, text: option[optionTextProperty] }\"></ng-template>\n                        </span>\n                    }\n                    @if (!last) {\n                        <span>&nbsp;&nbsp;</span>\n                    }\n                }\n            </span>\n        </mat-select-trigger>\n    }\n    <!-- #endregion -->\n    <!-- #region Trigger for icons -->\n    @if (!triggerTemplate?.templateRef && !optionTemplate?.templateRef) {\n        <mat-select-trigger>\n            <span layout=\"row\" layout-align=\"start center\" class=\"option-trigger\">\n                @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n                    @if (multiple) {\n                        <mat-chip>\n                            @if(optionIcon || matIconKey || svgIconKey || option.icon) {\n                                <span matChipAvatar>\n                                    <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                                </span>\n                            }\n                            <ng-template [ngTemplateOutlet]=\"optionTextTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                        </mat-chip>\n                    }\n                    @else {\n                        <ng-template [ngTemplateOutlet]=\"optionIconChipAvatarTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                        <ng-template [ngTemplateOutlet]=\"optionTextTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                    }\n                    @if (!last) {\n                        <span>&nbsp;&nbsp;</span>\n                    }\n                }\n            </span>\n        </mat-select-trigger>\n    }\n    <!-- #endregion -->\n    <!-- #region Default option -->\n    @if (!multiple && defaultOption) {\n        <mat-option class=\"tc-grey-500\" i18n=\"@@pleaseSelect\">--- Please Select ---</mat-option>\n    }\n    <!-- #endregion -->\n    <!-- #region Options -->\n    @for (option of filteredOptions; track option; let first = $first) {\n        <mat-option [value]=\"mapper ? option : option[optionValueProperty]\" [disabled]=\"$safeNavigationMigration(option?.disabled)\">\n            <!-- #region Property icon -->\n            @if (matIconKey && !svgIconKey) {\n                <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n            } @if (svgIconKey && !matIconKey) {\n                <mat-icon [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n            }\n            <!-- #endregion -->\n            <!-- #region Option icon -->\n            @if (option.icon?.matIcon) {\n                <mat-icon [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\">{{option.icon?.matIcon}}</mat-icon>\n            }\n            @if (option.icon?.svgIcon) {\n                <mat-icon [svgIcon]=\"$safeNavigationMigration(option.icon?.svgIcon)\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n            }\n            <!-- #endregion -->\n            <!-- #region Text -->\n            <span layout=\"column\" layout-align=\"start center\" class=\"option-text\" [ngClass]=\"{'option-has-hint':$safeNavigationMigration(option.hint?.length)>0}\">\n                @if (!optionTemplate?.templateRef) {\n                    <ng-template [ngTemplateOutlet]=\"selectionTemplate\" [ngTemplateOutletContext]=\"{ label: option[optionTextProperty] }\"></ng-template>\n                }\n                @if (optionTemplate && optionTemplate.templateRef) {\n                    <ng-template [ngTemplateOutlet]=\"optionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: option, text: option[optionTextProperty] }\"></ng-template>\n                }\n                <!-- #endregion -->\n                <span class=\"mat-caption text-secondary option-hint\" [matTooltip]=\"option.hint\">{{option.hint}}</span>\n            </span>\n        </mat-option>\n    }\n    <!-- #endregion -->\n</mat-select>\n<!-- #region Read only value -->\n@if (readonly) {\n    @if (currentValue) {\n        <div class=\"readonly-value\">\n            @if (!optionTemplate?.templateRef && !triggerTemplate?.templateRef) {\n                <span layout=\"row\" layout-align=\"start center\" class=\"readonly-content\">\n                    @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n                        <span layout=\"row\" layout-align=\"start center\">\n                            @if(!this.multiple) {\n                                @if(optionIcon || matIconKey || svgIconKey || option.icon) {\n                                    <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\n                                    <span>&nbsp;&nbsp;</span>\n                                }\n                                <span class=\"readonly-ellipsis-text\">\n                                    <ng-template [ngTemplateOutlet]=\"selectionTemplate\" [ngTemplateOutletContext]=\"{ label: currentValue[optionTextProperty] }\"></ng-template>\n                                </span>\n                            }\n                            @else if(currentValue[i]){\n                                <mat-chip>\n                                    @if(optionIcon || matIconKey || svgIconKey || option.icon) {\n                                        <span matChipAvatar>\n                                            <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: currentValue[i] }\"></ng-template>\n                                        </span>\n                                    }\n                                    <ng-template [ngTemplateOutlet]=\"selectionTemplate\" [ngTemplateOutletContext]=\"{ label: currentValue[i][optionTextProperty] }\"></ng-template>\n                                </mat-chip>\n                            }\n                        </span>\n                        @if (!last) {\n                            <span>&nbsp;&nbsp;</span>\n                        }\n                    }\n                </span>\n            }\n            @if (triggerTemplate && triggerTemplate.templateRef) {\n                <span layout=\"row\" layout-align=\"start center\" class=\"option-trigger readonly-content\">\n                    <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\n                    <span>&nbsp;&nbsp;</span>\n                    <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\n                    <span class=\"readonly-ellipsis-text\">\n                        <ng-template [ngTemplateOutlet]=\"triggerTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: currentValue }\"></ng-template>\n                    </span>\n                </span>\n            }\n            @if (optionTemplate && optionTemplate.templateRef && !triggerTemplate?.templateRef) {\n                <span layout=\"row\" layout-align=\"start center\" class=\"option-trigger readonly-content\">\n                    <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\n                    <span>&nbsp;&nbsp;</span>\n                    <span class=\"readonly-ellipsis-text\">\n                        <ng-template [ngTemplateOutlet]=\"optionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: currentValue, text: currentValue[optionTextProperty] }\"></ng-template>\n                    </span>\n                </span>\n            }\n        </div>\n        @if (onLaunch.observed) {\n            <mat-icon class=\"vd-select-launch-readonly\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\n        }\n    }\n    @if (!currentValue) {\n        <div>&nbsp;</div>\n    }\n}\n<!-- #endregion -->", styles: [":host{display:block;width:100%;min-width:0}.vd-select-launch{position:absolute;right:30px;top:-5px;font-size:18px;cursor:pointer}.readonly-value{padding-right:24px;opacity:.6;min-height:15px;display:flex;align-items:center;width:0;flex:1 1 auto;max-width:100%;min-width:0;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.readonly-value>*{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.readonly-value .readonly-content{display:flex;align-items:center;width:0;flex:1 1 auto;max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.readonly-value .readonly-ellipsis-text{display:block;flex:1 1 auto;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.readonly-value .readonly-content [layout=row],.readonly-value .readonly-content .option-text,.readonly-value .readonly-content .mat-mdc-chip,.readonly-value .readonly-content .mat-mdc-chip-action-label,.readonly-value .readonly-content .mat-mdc-standard-chip{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vd-select-launch-readonly{position:absolute;right:0;top:9px;font-size:18px;cursor:pointer}.vd-select-filter-wrap{background:inherit;position:sticky;top:-8px;box-sizing:border-box;z-index:100}.vd-select-filter-wrap .vd-select-filter-inner{z-index:100;display:flex;flex-direction:row;align-items:center;background:inherit}.vd-select-filter-wrap .vd-select-filter-inner .vd-select-filter{box-shadow:none;padding:16px 16px 16px 0;box-sizing:border-box;width:100%;border:none;background-color:inherit;color:inherit}.vd-select-filter-wrap .vd-select-filter-inner .vd-select-filter:focus-visible{border:none;outline:none}.vd-select-filter-wrap .mat-divider{display:block;width:100%;border-top-width:1px;border-top-style:solid;box-sizing:border-box}::ng-deep .mat-mdc-select-trigger{display:flex!important}::ng-deep .mat-mdc-select-trigger .mat-icon{display:flex;margin-right:8px}::ng-deep .mat-mdc-form-field-type-vd-select .mat-mdc-form-field-infix{display:flex;align-items:center;min-width:0;max-width:100%;width:100%}::ng-deep .mat-mdc-form-field-type-vd-select-multiple .mat-mdc-form-field-infix{padding-top:4px!important;padding-bottom:4px!important}::ng-deep .mat-mdc-form-field-type-vd-select-multiple .mat-mdc-form-field-infix .mat-mdc-select-trigger{height:100%}.mat-mdc-select mat-select-trigger .option-text,.mat-mdc-select .mat-mdc-option .option-text{display:contents!important}.mat-mdc-select mat-select-trigger .option-text.option-has-hint,.mat-mdc-select .mat-mdc-option .option-text.option-has-hint{line-height:.92em}.mat-mdc-select mat-select-trigger .option-text .option-hint,.mat-mdc-select .mat-mdc-option .option-text .option-hint{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}.mat-mdc-select:not(.mat-mdc-select-multiple) mat-select-trigger .option-text,.mat-mdc-select:not(.mat-mdc-select-multiple) .mat-mdc-option .option-text{width:calc(100% - 36px)}.mat-mdc-select:not(.mat-mdc-select-multiple) mat-select-trigger .mat-mdc-form-field-infix{padding-top:8px;padding-bottom:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2$2.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", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i2$2.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i7.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: i7.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: VdSelectComponent, decorators: [{
             type: Component,
@@ -16468,7 +16810,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                             provide: MAT_SELECT_CONFIG,
                             useValue: { overlayPanelClass: 'vd-select-filter-overlay' }
                         }
-                    ], template: "<mat-select\n  [placeholder]=\"placeholder\"\n  i18n-placeholder\n  [(ngModel)]=\"value\"\n  #select=\"matSelect\"\n  (selectionChange)=\"handleChange($event)\"\n  [hidden]=\"readonly\"\n  [multiple]=\"multiple\"\n  [compareWith]=\"compareWith??defaultCompareWith\"\n  [disabled]=\"disabled\"\n  flex\n>\n  <!-- #region Filter input -->\n  <div class=\"mat-mdc-form-field mat-form-field-appearance-fill flex\">\n    <div\n      class=\"mat-mdc-text-field-wrapper mdc-text-field mdc-text-field--filled mdc-text-field--no-label\"\n    >\n      <div class=\"mat-mdc-form-field-focus-overlay\"></div>\n      <div class=\"mat-mdc-form-field-flex\">\n        <div class=\"mat-mdc-form-field-infix\" layout=\"row\" flex>\n          <input\n            matInput\n            #filterInput\n            type=\"text\"\n            placeholder=\"Filter...\"\n            class=\"mat-mdc-input-element vd-select-filter mat-mdc-form-field-input-control mdc-text-field__input\"\n            (keyup)=\"handleFilter($event)\"\n            flex\n          />\n          @if (filterInput?.value) {\n          <mat-icon\n            (click)=\"filterInput!.value = ''; handleFilter($event);\"\n            fontSet=\"material-symbols-outlined\"\n            >close</mat-icon\n          >\n          }\n        </div>\n      </div>\n      <div class=\"mdc-line-ripple\"></div>\n    </div>\n  </div>\n  <!-- #endregion -->\n\n  <!-- #region Selection template -->\n  <ng-template #selectionTemplate let-label=\"label\">\n    <span i18n=\"@@selection\"\n      >{ label, select, option {option} other { {{ label }} } }</span\n    >\n  </ng-template>\n  <!-- #endregion -->\n\n  <!-- #region Option template -->\n  <ng-template #optionTextTemplate let-option=\"option\">\n    <span\n      layout=\"column\"\n      class=\"option-text\"\n      [ngClass]=\"{'option-has-hint': $safeNavigationMigration(option.hint?.length) > 0}\"\n    >\n      <ng-template\n        [ngTemplateOutlet]=\"selectionTemplate\"\n        [ngTemplateOutletContext]=\"{ label: option[optionTextProperty] }\"\n      ></ng-template>\n      <span\n        class=\"mat-caption text-secondary option-hint\"\n        [matTooltip]=\"option.hint\"\n        >{{option.hint}}</span\n      >\n    </span>\n  </ng-template>\n  <!-- #endregion -->\n\n  <!-- #region Option icon template -->\n  <ng-template #optionIconTemplate let-option=\"option\" let-isAvatar=\"isAvatar\">\n    <!-- #region Property icon -->\n    @if (matIconKey && !svgIconKey) {\n    <mat-icon\n      [class.mat-mdc-chip-avatar]=\"isAvatar\"\n      [fontSet]=\"fontSet || 'material-symbols-outlined'\"\n      >{{option[matIconKey]}}</mat-icon\n    >\n    } @if (svgIconKey && !matIconKey) {\n    <mat-icon\n      [class.mat-mdc-chip-avatar]=\"isAvatar\"\n      [svgIcon]=\"option[svgIconKey]\"\n      [fontSet]=\"fontSet || 'material-symbols-outlined'\"\n    ></mat-icon>\n    }\n    <!-- #endregion -->\n\n    <!-- #region Option icon -->\n    @if (option.icon?.matIcon) {\n    <mat-icon\n      [class.mat-mdc-chip-avatar]=\"isAvatar\"\n      [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\"\n      [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"\n      >{{option.icon?.matIcon}}</mat-icon\n    >\n    } @if (option.icon?.svgIcon) {\n    <mat-icon\n      [class.mat-mdc-chip-avatar]=\"isAvatar\"\n      [svgIcon]=\"$safeNavigationMigration(option.icon?.svgIcon)\"\n      [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\"\n      [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"\n    ></mat-icon>\n    }\n    <!-- #endregion -->\n\n    <!-- #region Dynamic icon -->\n    @if (optionIcon; as optionIcon) {\n    <ng-template\n      #optionIconTemplate\n      [ngTemplateOutlet]=\"optionIconTemplate\"\n      let-optionIcon=\"optionIcon\"\n      [ngTemplateOutletContext]=\"{ optionIcon: optionIcon(option) }\"\n    >\n      @if (optionIcon.svgIcon) {\n      <mat-icon\n        [class.mat-mdc-chip-avatar]=\"isAvatar\"\n        [svgIcon]=\"optionIcon.svgIcon\"\n        [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\"\n      ></mat-icon>\n      } @if (optionIcon.matIcon) {\n      <mat-icon\n        [class.mat-mdc-chip-avatar]=\"isAvatar\"\n        [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\"\n        >{{optionIcon.matIcon}}</mat-icon\n      >\n      }\n    </ng-template>\n    }\n    <!-- #endregion -->\n  </ng-template>\n  <!-- #endregion -->\n\n  <!-- #region Option icon template -->\n  <ng-template #optionIconChipAvatarTemplate let-option=\"option\">\n    <!-- #region Property icon -->\n    <span class=\"option-icon\" matChipAvatar>\n      <ng-template\n        [ngTemplateOutlet]=\"optionIconTemplate\"\n        [ngTemplateOutletContext]=\"{ option: option }\"\n      ></ng-template>\n    </span>\n    <!-- #endregion -->\n  </ng-template>\n  <!-- #endregion -->\n\n  <!-- #region Trigger for launch button -->\n  @if (onLaunch.observed) {\n  <mat-select-trigger [class]=\"triggerCssClass\">\n    <span layout=\"row\" layout-align=\"start center\">\n      @for (option of selectedOptions; track option; let i = $index; let last =\n      $last) {\n      <ng-template\n        [ngTemplateOutlet]=\"optionIconTemplate\"\n        [ngTemplateOutletContext]=\"{ option: option }\"\n      ></ng-template>\n      <ng-template\n        [ngTemplateOutlet]=\"selectionTemplate\"\n        [ngTemplateOutletContext]=\"{ label: option[optionTextProperty] }\"\n      ></ng-template>\n\n      @if (!last) {\n      <span>&nbsp;&nbsp;</span>\n      } }\n    </span>\n    <mat-icon\n      class=\"vd-select-launch\"\n      (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\"\n      >launch</mat-icon\n    >\n  </mat-select-trigger>\n  }\n  <!-- #endregion -->\n\n  <!-- #region Custom trigger template -->\n  @if (!onLaunch.observed && triggerTemplate && triggerTemplate.templateRef) {\n  <mat-select-trigger [class]=\"triggerCssClass\">\n    <ng-template\n      [ngTemplateOutlet]=\"triggerTemplate.templateRef!\"\n      [ngTemplateOutletContext]=\"{ trigger: selectedOptions }\"\n    ></ng-template>\n  </mat-select-trigger>\n  }\n  <!-- #endregion -->\n\n  <!-- #region Option template as trigger -->\n  @if (!onLaunch.observed && !triggerTemplate?.templateRef &&\n  optionTemplate?.templateRef) {\n  <mat-select-trigger [class]=\"triggerCssClass\">\n    <span layout=\"row\" layout-align=\"start center\">\n      @for (option of selectedOptions; track option; let i = $index; let last =\n      $last) {\n      <span layout=\"row\" layout-align=\"start center\">\n        <ng-template\n          [ngTemplateOutlet]=\"optionIconTemplate\"\n          [ngTemplateOutletContext]=\"{ option: option }\"\n        ></ng-template>\n        @if (optionTemplate && optionTemplate.templateRef) {\n        <ng-template\n          [ngTemplateOutlet]=\"optionTemplate.templateRef!\"\n          [ngTemplateOutletContext]=\"{ option: option, text: option[optionTextProperty] }\"\n        ></ng-template>\n        }\n      </span>\n      @if (!last) {\n      <span>&nbsp;&nbsp;</span>\n      } }\n    </span>\n  </mat-select-trigger>\n  }\n  <!-- #endregion -->\n\n  <!-- #region Trigger for icons -->\n  @if (!triggerTemplate?.templateRef && !optionTemplate?.templateRef) {\n  <mat-select-trigger>\n    <span layout=\"row\" layout-align=\"start center\" class=\"option-trigger\">\n      @for (option of selectedOptions; track option; let i = $index; let last =\n      $last) { @if (multiple) {\n      <mat-chip>\n        @if(optionIcon || matIconKey || svgIconKey || option.icon) {\n        <span matChipAvatar>\n          <ng-template\n            [ngTemplateOutlet]=\"optionIconTemplate\"\n            [ngTemplateOutletContext]=\"{ option: option }\"\n          ></ng-template>\n        </span>\n        }\n        <ng-template\n          [ngTemplateOutlet]=\"optionTextTemplate\"\n          [ngTemplateOutletContext]=\"{ option: option }\"\n        ></ng-template>\n      </mat-chip>\n      } @else {\n      <ng-template\n        [ngTemplateOutlet]=\"optionIconChipAvatarTemplate\"\n        [ngTemplateOutletContext]=\"{ option: option }\"\n      ></ng-template>\n      <ng-template\n        [ngTemplateOutlet]=\"optionTextTemplate\"\n        [ngTemplateOutletContext]=\"{ option: option }\"\n      ></ng-template>\n      } @if (!last) {\n      <span>&nbsp;&nbsp;</span>\n      } }\n    </span>\n  </mat-select-trigger>\n  }\n  <!-- #endregion -->\n\n  <!-- #region Default option -->\n  @if (!multiple && defaultOption) {\n  <mat-option class=\"tc-grey-500\" i18n=\"@@pleaseSelect\"\n    >--- Please Select ---</mat-option\n  >\n  }\n  <!-- #endregion -->\n\n  <!-- #region Options -->\n  @for (option of filteredOptions; track option; let first = $first) {\n  <mat-option\n    [value]=\"mapper ? option : option[optionValueProperty]\"\n    [disabled]=\"$safeNavigationMigration(option?.disabled)\"\n  >\n    <!-- #region Property icon -->\n    @if (matIconKey && !svgIconKey) {\n    <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\"\n      >{{option[matIconKey]}}</mat-icon\n    >\n    } @if (svgIconKey && !matIconKey) {\n    <mat-icon\n      [svgIcon]=\"option[svgIconKey]\"\n      [fontSet]=\"fontSet || 'material-symbols-outlined'\"\n    ></mat-icon>\n    }\n    <!-- #endregion -->\n\n    <!-- #region Option icon -->\n    @if (option.icon?.matIcon) {\n    <mat-icon\n      [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\"\n      [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"\n      >{{option.icon?.matIcon}}</mat-icon\n    >\n    } @if (option.icon?.svgIcon) {\n    <mat-icon\n      [svgIcon]=\"$safeNavigationMigration(option.icon?.svgIcon)\"\n      [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\"\n      [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"\n    ></mat-icon>\n    }\n    <!-- #endregion -->\n\n    <!-- #region Text -->\n    <span\n      layout=\"column\"\n      layout-align=\"start center\"\n      class=\"option-text\"\n      [ngClass]=\"{'option-has-hint':$safeNavigationMigration(option.hint?.length)>0}\"\n    >\n      @if (!optionTemplate?.templateRef) {\n      <ng-template\n        [ngTemplateOutlet]=\"selectionTemplate\"\n        [ngTemplateOutletContext]=\"{ label: option[optionTextProperty] }\"\n      ></ng-template>\n      } @if (optionTemplate && optionTemplate.templateRef) {\n      <ng-template\n        [ngTemplateOutlet]=\"optionTemplate.templateRef!\"\n        [ngTemplateOutletContext]=\"{ option: option, text: option[optionTextProperty] }\"\n      ></ng-template>\n      }\n      <!-- #endregion -->\n      <span\n        class=\"mat-caption text-secondary option-hint\"\n        [matTooltip]=\"option.hint\"\n        >{{option.hint}}</span\n      >\n    </span>\n  </mat-option>\n  }\n  <!-- #endregion -->\n</mat-select>\n\n<!-- #region Read only value -->\n@if (readonly) {\n<div>\n  @if (currentValue) {\n  <div>\n    <div class=\"readonly-value\">\n      @if (!optionTemplate?.templateRef && !triggerTemplate?.templateRef) {\n      <span>\n        <span layout=\"row\" layout-align=\"start center\">\n          @for (option of selectedOptions; track option; let i = $index; let\n          last = $last) {\n          <span layout=\"row\" layout-align=\"start center\">\n            @if(!this.multiple) { @if(optionIcon || matIconKey || svgIconKey ||\n            option.icon) {\n            <ng-template\n              [ngTemplateOutlet]=\"optionIconTemplate\"\n              [ngTemplateOutletContext]=\"{ option: currentValue }\"\n            ></ng-template>\n            <span>&nbsp;&nbsp;</span>\n            }\n            <ng-template\n              [ngTemplateOutlet]=\"selectionTemplate\"\n              [ngTemplateOutletContext]=\"{ label: currentValue[optionTextProperty] }\"\n            ></ng-template>\n            } @else if(currentValue[i]){\n            <mat-chip>\n              @if(optionIcon || matIconKey || svgIconKey || option.icon) {\n              <span matChipAvatar>\n                <ng-template\n                  [ngTemplateOutlet]=\"optionIconTemplate\"\n                  [ngTemplateOutletContext]=\"{ option: currentValue[i] }\"\n                ></ng-template>\n              </span>\n              }\n              <ng-template\n                [ngTemplateOutlet]=\"selectionTemplate\"\n                [ngTemplateOutletContext]=\"{ label: currentValue[i][optionTextProperty] }\"\n              ></ng-template>\n            </mat-chip>\n            }\n          </span>\n          @if (!last) {\n          <span>&nbsp;&nbsp;</span>\n          } }\n        </span>\n      </span>\n      } @if (triggerTemplate && triggerTemplate.templateRef) {\n      <span layout=\"row\" layout-align=\"start center\" class=\"option-trigger\">\n        <ng-template\n          [ngTemplateOutlet]=\"optionIconTemplate\"\n          [ngTemplateOutletContext]=\"{ option: currentValue }\"\n        ></ng-template>\n        <span>&nbsp;&nbsp;</span>\n        <ng-template\n          [ngTemplateOutlet]=\"optionIconTemplate\"\n          [ngTemplateOutletContext]=\"{ option: currentValue }\"\n        ></ng-template>\n        <ng-template\n          [ngTemplateOutlet]=\"triggerTemplate.templateRef!\"\n          [ngTemplateOutletContext]=\"{ trigger: currentValue }\"\n        ></ng-template>\n      </span>\n      } @if (optionTemplate && optionTemplate.templateRef &&\n      !triggerTemplate?.templateRef) {\n      <span layout=\"row\" layout-align=\"start center\" class=\"option-trigger\">\n        <ng-template\n          [ngTemplateOutlet]=\"optionIconTemplate\"\n          [ngTemplateOutletContext]=\"{ option: currentValue }\"\n        ></ng-template>\n        <span>&nbsp;&nbsp;</span>\n        <ng-template\n          [ngTemplateOutlet]=\"optionTemplate.templateRef!\"\n          [ngTemplateOutletContext]=\"{ option: currentValue, text: currentValue[optionTextProperty] }\"\n        ></ng-template>\n      </span>\n      }\n    </div>\n    @if (onLaunch.observed) {\n    <mat-icon\n      class=\"vd-select-launch-readonly\"\n      (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\"\n      >launch</mat-icon\n    >\n    }\n  </div>\n  } @if (!currentValue) {\n  <div>&nbsp;</div>\n  }\n</div>\n}\n<!-- #endregion -->\n", styles: [".vd-select-launch{position:absolute;right:30px;top:-5px;font-size:18px;cursor:pointer}.readonly-value{padding-right:24px;opacity:.6;min-height:15px}.vd-select-launch-readonly{position:absolute;right:0;top:9px;font-size:18px;cursor:pointer}.vd-select-filter-wrap{background:inherit;position:sticky;top:-8px;box-sizing:border-box;z-index:100}.vd-select-filter-wrap .vd-select-filter-inner{z-index:100;display:flex;flex-direction:row;align-items:center;background:inherit}.vd-select-filter-wrap .vd-select-filter-inner .vd-select-filter{box-shadow:none;padding:16px 16px 16px 0;box-sizing:border-box;width:100%;border:none;background-color:inherit;color:inherit}.vd-select-filter-wrap .vd-select-filter-inner .vd-select-filter:focus-visible{border:none;outline:none}.vd-select-filter-wrap .mat-divider{display:block;width:100%;border-top-width:1px;border-top-style:solid;box-sizing:border-box}::ng-deep .mat-mdc-select-trigger{display:flex!important}::ng-deep .mat-mdc-select-trigger .mat-icon{display:flex;margin-right:8px}::ng-deep .mat-mdc-form-field-type-vd-select-multiple .mat-mdc-form-field-infix{padding-top:4px!important;padding-bottom:4px!important}::ng-deep .mat-mdc-form-field-type-vd-select-multiple .mat-mdc-form-field-infix .mat-mdc-select-trigger{height:100%}.mat-mdc-select mat-select-trigger .option-text,.mat-mdc-select .mat-mdc-option .option-text{display:contents!important}.mat-mdc-select mat-select-trigger .option-text.option-has-hint,.mat-mdc-select .mat-mdc-option .option-text.option-has-hint{line-height:.92em}.mat-mdc-select mat-select-trigger .option-text .option-hint,.mat-mdc-select .mat-mdc-option .option-text .option-hint{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}.mat-mdc-select:not(.mat-mdc-select-multiple) mat-select-trigger .option-text,.mat-mdc-select:not(.mat-mdc-select-multiple) .mat-mdc-option .option-text{width:calc(100% - 36px)}.mat-mdc-select:not(.mat-mdc-select-multiple) mat-select-trigger .mat-mdc-form-field-infix{padding-top:8px;padding-bottom:8px}\n"] }]
+                    ], template: "<mat-select [placeholder]=\"placeholder\" i18n-placeholder [(ngModel)]=\"value\" #select=\"matSelect\" (selectionChange)=\"handleChange($event)\" [hidden]=\"readonly\" [multiple]=\"multiple\" [compareWith]=\"compareWith??defaultCompareWith\" [disabled]=\"disabled\" flex>\n    <!-- #region Filter input -->\n    <div class=\"mat-mdc-form-field mat-form-field-appearance-fill flex\">\n        <div class=\"mat-mdc-text-field-wrapper mdc-text-field mdc-text-field--filled mdc-text-field--no-label\">\n            <div class=\"mat-mdc-form-field-focus-overlay\"></div>\n            <div class=\"mat-mdc-form-field-flex\">\n                <div class=\"mat-mdc-form-field-infix\" layout=\"row\" flex>\n                    <input matInput #filterInput type=\"text\" placeholder=\"Filter...\" class=\"mat-mdc-input-element vd-select-filter mat-mdc-form-field-input-control mdc-text-field__input\" (keyup)=\"handleFilter($event)\" flex />\n                    @if (filterInput?.value) {\n                        <mat-icon (click)=\"filterInput!.value = ''; handleFilter($event);\" fontSet=\"material-symbols-outlined\">close</mat-icon>\n                    }\n                </div>\n            </div>\n            <div class=\"mdc-line-ripple\"></div>\n        </div>\n    </div>\n    <!-- #endregion -->\n    <!-- #region Selection template -->\n    <ng-template #selectionTemplate let-label=\"label\">\n        <span i18n=\"@@selection\">{ label, select, option {option} other { {{ label }} } }</span>\n    </ng-template>\n    <!-- #endregion -->\n    <!-- #region Option template -->\n    <ng-template #optionTextTemplate let-option=\"option\">\n        <span layout=\"column\" class=\"option-text\" [ngClass]=\"{'option-has-hint': $safeNavigationMigration(option.hint?.length) > 0}\">\n            <ng-template [ngTemplateOutlet]=\"selectionTemplate\" [ngTemplateOutletContext]=\"{ label: option[optionTextProperty] }\"></ng-template>\n            <span class=\"mat-caption text-secondary option-hint\" [matTooltip]=\"option.hint\">{{option.hint}}</span>\n        </span>\n    </ng-template>\n    <!-- #endregion -->\n    <!-- #region Option icon template -->\n    <ng-template #optionIconTemplate let-option=\"option\" let-isAvatar=\"isAvatar\">\n        <!-- #region Property icon -->\n        @if (matIconKey && !svgIconKey) {\n            <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n        }\n        @if (svgIconKey && !matIconKey) {\n            <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n        }\n        <!-- #endregion -->\n        <!-- #region Option icon -->\n        @if (option.icon?.matIcon) {\n            <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\">{{option.icon?.matIcon}}</mat-icon>\n        }\n        @if (option.icon?.svgIcon) {\n            <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [svgIcon]=\"$safeNavigationMigration(option.icon?.svgIcon)\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n        }\n        <!-- #endregion -->\n        <!-- #region Dynamic icon -->\n        @if (optionIcon; as optionIcon) {\n            <ng-template #optionIconTemplate [ngTemplateOutlet]=\"optionIconTemplate\" let-optionIcon=\"optionIcon\" [ngTemplateOutletContext]=\"{ optionIcon: optionIcon(option) }\">\n                @if (optionIcon.svgIcon) {\n                    <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\"></mat-icon>\n                }\n                @if (optionIcon.matIcon) {\n                    <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\">{{optionIcon.matIcon}}</mat-icon>\n                }\n            </ng-template>\n        }\n        <!-- #endregion -->\n    </ng-template>\n    <!-- #endregion -->\n    <!-- #region Option icon template -->\n    <ng-template #optionIconChipAvatarTemplate let-option=\"option\">\n        <!-- #region Property icon -->\n        <span class=\"option-icon\" matChipAvatar>\n            <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n        </span>\n        <!-- #endregion -->\n    </ng-template>\n    <!-- #endregion -->\n    <!-- #region Trigger for launch button -->\n    @if (onLaunch.observed) {\n        <mat-select-trigger [class]=\"triggerCssClass\">\n            <span layout=\"row\" layout-align=\"start center\">\n                @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n                    <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                    <ng-template [ngTemplateOutlet]=\"selectionTemplate\" [ngTemplateOutletContext]=\"{ label: option[optionTextProperty] }\"></ng-template>\n                    @if (!last) {\n                        <span>&nbsp;&nbsp;</span>\n                    }\n                }\n            </span>\n            <mat-icon class=\"vd-select-launch\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\n        </mat-select-trigger>\n    }\n    <!-- #endregion -->\n    <!-- #region Custom trigger template -->\n    @if (!onLaunch.observed && triggerTemplate && triggerTemplate.templateRef) {\n        <mat-select-trigger [class]=\"triggerCssClass\">\n            <ng-template [ngTemplateOutlet]=\"triggerTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: selectedOptions }\"></ng-template>\n        </mat-select-trigger>\n    }\n    <!-- #endregion -->\n    <!-- #region Option template as trigger -->\n    @if (!onLaunch.observed && !triggerTemplate?.templateRef && optionTemplate?.templateRef) {\n        <mat-select-trigger [class]=\"triggerCssClass\">\n            <span layout=\"row\" layout-align=\"start center\">\n                @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n                    @if (multiple) {\n                        <mat-chip>\n                            @if(optionIcon || matIconKey || svgIconKey || option.icon) {\n                                <span matChipAvatar>\n                                    <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                                </span>\n                            }\n                            <ng-template [ngTemplateOutlet]=\"optionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: option, text: option[optionTextProperty] }\"></ng-template>\n                        </mat-chip>\n                    }\n                    @else\n                    {\n                        <span layout=\"row\" layout-align=\"start center\">\n                            <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                            <ng-template [ngTemplateOutlet]=\"optionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: option, text: option[optionTextProperty] }\"></ng-template>\n                        </span>\n                    }\n                    @if (!last) {\n                        <span>&nbsp;&nbsp;</span>\n                    }\n                }\n            </span>\n        </mat-select-trigger>\n    }\n    <!-- #endregion -->\n    <!-- #region Trigger for icons -->\n    @if (!triggerTemplate?.templateRef && !optionTemplate?.templateRef) {\n        <mat-select-trigger>\n            <span layout=\"row\" layout-align=\"start center\" class=\"option-trigger\">\n                @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n                    @if (multiple) {\n                        <mat-chip>\n                            @if(optionIcon || matIconKey || svgIconKey || option.icon) {\n                                <span matChipAvatar>\n                                    <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                                </span>\n                            }\n                            <ng-template [ngTemplateOutlet]=\"optionTextTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                        </mat-chip>\n                    }\n                    @else {\n                        <ng-template [ngTemplateOutlet]=\"optionIconChipAvatarTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                        <ng-template [ngTemplateOutlet]=\"optionTextTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                    }\n                    @if (!last) {\n                        <span>&nbsp;&nbsp;</span>\n                    }\n                }\n            </span>\n        </mat-select-trigger>\n    }\n    <!-- #endregion -->\n    <!-- #region Default option -->\n    @if (!multiple && defaultOption) {\n        <mat-option class=\"tc-grey-500\" i18n=\"@@pleaseSelect\">--- Please Select ---</mat-option>\n    }\n    <!-- #endregion -->\n    <!-- #region Options -->\n    @for (option of filteredOptions; track option; let first = $first) {\n        <mat-option [value]=\"mapper ? option : option[optionValueProperty]\" [disabled]=\"$safeNavigationMigration(option?.disabled)\">\n            <!-- #region Property icon -->\n            @if (matIconKey && !svgIconKey) {\n                <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n            } @if (svgIconKey && !matIconKey) {\n                <mat-icon [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n            }\n            <!-- #endregion -->\n            <!-- #region Option icon -->\n            @if (option.icon?.matIcon) {\n                <mat-icon [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\">{{option.icon?.matIcon}}</mat-icon>\n            }\n            @if (option.icon?.svgIcon) {\n                <mat-icon [svgIcon]=\"$safeNavigationMigration(option.icon?.svgIcon)\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n            }\n            <!-- #endregion -->\n            <!-- #region Text -->\n            <span layout=\"column\" layout-align=\"start center\" class=\"option-text\" [ngClass]=\"{'option-has-hint':$safeNavigationMigration(option.hint?.length)>0}\">\n                @if (!optionTemplate?.templateRef) {\n                    <ng-template [ngTemplateOutlet]=\"selectionTemplate\" [ngTemplateOutletContext]=\"{ label: option[optionTextProperty] }\"></ng-template>\n                }\n                @if (optionTemplate && optionTemplate.templateRef) {\n                    <ng-template [ngTemplateOutlet]=\"optionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: option, text: option[optionTextProperty] }\"></ng-template>\n                }\n                <!-- #endregion -->\n                <span class=\"mat-caption text-secondary option-hint\" [matTooltip]=\"option.hint\">{{option.hint}}</span>\n            </span>\n        </mat-option>\n    }\n    <!-- #endregion -->\n</mat-select>\n<!-- #region Read only value -->\n@if (readonly) {\n    @if (currentValue) {\n        <div class=\"readonly-value\">\n            @if (!optionTemplate?.templateRef && !triggerTemplate?.templateRef) {\n                <span layout=\"row\" layout-align=\"start center\" class=\"readonly-content\">\n                    @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n                        <span layout=\"row\" layout-align=\"start center\">\n                            @if(!this.multiple) {\n                                @if(optionIcon || matIconKey || svgIconKey || option.icon) {\n                                    <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\n                                    <span>&nbsp;&nbsp;</span>\n                                }\n                                <span class=\"readonly-ellipsis-text\">\n                                    <ng-template [ngTemplateOutlet]=\"selectionTemplate\" [ngTemplateOutletContext]=\"{ label: currentValue[optionTextProperty] }\"></ng-template>\n                                </span>\n                            }\n                            @else if(currentValue[i]){\n                                <mat-chip>\n                                    @if(optionIcon || matIconKey || svgIconKey || option.icon) {\n                                        <span matChipAvatar>\n                                            <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: currentValue[i] }\"></ng-template>\n                                        </span>\n                                    }\n                                    <ng-template [ngTemplateOutlet]=\"selectionTemplate\" [ngTemplateOutletContext]=\"{ label: currentValue[i][optionTextProperty] }\"></ng-template>\n                                </mat-chip>\n                            }\n                        </span>\n                        @if (!last) {\n                            <span>&nbsp;&nbsp;</span>\n                        }\n                    }\n                </span>\n            }\n            @if (triggerTemplate && triggerTemplate.templateRef) {\n                <span layout=\"row\" layout-align=\"start center\" class=\"option-trigger readonly-content\">\n                    <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\n                    <span>&nbsp;&nbsp;</span>\n                    <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\n                    <span class=\"readonly-ellipsis-text\">\n                        <ng-template [ngTemplateOutlet]=\"triggerTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: currentValue }\"></ng-template>\n                    </span>\n                </span>\n            }\n            @if (optionTemplate && optionTemplate.templateRef && !triggerTemplate?.templateRef) {\n                <span layout=\"row\" layout-align=\"start center\" class=\"option-trigger readonly-content\">\n                    <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\n                    <span>&nbsp;&nbsp;</span>\n                    <span class=\"readonly-ellipsis-text\">\n                        <ng-template [ngTemplateOutlet]=\"optionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: currentValue, text: currentValue[optionTextProperty] }\"></ng-template>\n                    </span>\n                </span>\n            }\n        </div>\n        @if (onLaunch.observed) {\n            <mat-icon class=\"vd-select-launch-readonly\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\n        }\n    }\n    @if (!currentValue) {\n        <div>&nbsp;</div>\n    }\n}\n<!-- #endregion -->", styles: [":host{display:block;width:100%;min-width:0}.vd-select-launch{position:absolute;right:30px;top:-5px;font-size:18px;cursor:pointer}.readonly-value{padding-right:24px;opacity:.6;min-height:15px;display:flex;align-items:center;width:0;flex:1 1 auto;max-width:100%;min-width:0;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.readonly-value>*{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.readonly-value .readonly-content{display:flex;align-items:center;width:0;flex:1 1 auto;max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.readonly-value .readonly-ellipsis-text{display:block;flex:1 1 auto;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.readonly-value .readonly-content [layout=row],.readonly-value .readonly-content .option-text,.readonly-value .readonly-content .mat-mdc-chip,.readonly-value .readonly-content .mat-mdc-chip-action-label,.readonly-value .readonly-content .mat-mdc-standard-chip{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vd-select-launch-readonly{position:absolute;right:0;top:9px;font-size:18px;cursor:pointer}.vd-select-filter-wrap{background:inherit;position:sticky;top:-8px;box-sizing:border-box;z-index:100}.vd-select-filter-wrap .vd-select-filter-inner{z-index:100;display:flex;flex-direction:row;align-items:center;background:inherit}.vd-select-filter-wrap .vd-select-filter-inner .vd-select-filter{box-shadow:none;padding:16px 16px 16px 0;box-sizing:border-box;width:100%;border:none;background-color:inherit;color:inherit}.vd-select-filter-wrap .vd-select-filter-inner .vd-select-filter:focus-visible{border:none;outline:none}.vd-select-filter-wrap .mat-divider{display:block;width:100%;border-top-width:1px;border-top-style:solid;box-sizing:border-box}::ng-deep .mat-mdc-select-trigger{display:flex!important}::ng-deep .mat-mdc-select-trigger .mat-icon{display:flex;margin-right:8px}::ng-deep .mat-mdc-form-field-type-vd-select .mat-mdc-form-field-infix{display:flex;align-items:center;min-width:0;max-width:100%;width:100%}::ng-deep .mat-mdc-form-field-type-vd-select-multiple .mat-mdc-form-field-infix{padding-top:4px!important;padding-bottom:4px!important}::ng-deep .mat-mdc-form-field-type-vd-select-multiple .mat-mdc-form-field-infix .mat-mdc-select-trigger{height:100%}.mat-mdc-select mat-select-trigger .option-text,.mat-mdc-select .mat-mdc-option .option-text{display:contents!important}.mat-mdc-select mat-select-trigger .option-text.option-has-hint,.mat-mdc-select .mat-mdc-option .option-text.option-has-hint{line-height:.92em}.mat-mdc-select mat-select-trigger .option-text .option-hint,.mat-mdc-select .mat-mdc-option .option-text .option-hint{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}.mat-mdc-select:not(.mat-mdc-select-multiple) mat-select-trigger .option-text,.mat-mdc-select:not(.mat-mdc-select-multiple) .mat-mdc-option .option-text{width:calc(100% - 36px)}.mat-mdc-select:not(.mat-mdc-select-multiple) mat-select-trigger .mat-mdc-form-field-infix{padding-top:8px;padding-bottom:8px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { optionTemplate: [{
                 type: ContentChild,
                 args: [VdSelectOptionDirective]
@@ -16799,57 +17141,239 @@ class TableDataSource extends DataSource {
     /**
      * Get selected Items
      */
-    getSelected = (key) => this.selectionModel.selected.map(x => x[key]);
+    getSelected = (key) => this.selectionModel.selected.map(x => x[key]);
+    /**
+     * Get selected Items
+     */
+    getSelectedIds = () => this.getSelected('id');
+}
+
+class DataSourceFilterDirective {
+    /**
+     * DataSource instance
+     */
+    dataSource;
+    /**
+     * Represents a value that changes over time.
+     * Observers can subscribe to the subject to receive filter changes
+     */
+    _queryChange = new BehaviorSubject(null);
+    /**
+     * Sets query
+     */
+    set dataSourceFilter(query) { this._queryChange.next(query); }
+    /**
+     * Gets query
+     */
+    get dataSourceFilter() { return this._queryChange.value; }
+    /**
+     * Lifecycle hook that is called after data-bound properties of a directive are initialized.
+     */
+    ngOnInit() {
+        this._queryChange.subscribe(() => {
+            if (this.dataSource) {
+                /* Update the filters */
+                Object.assign(this.dataSource.staticFieldFilters || {}, this.dataSourceFilter != null ? this.dataSourceFilter : {});
+                /* Reload data */
+                this.dataSource.reload();
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DataSourceFilterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: DataSourceFilterDirective, isStandalone: true, selector: "[dataSourceFilter]", inputs: { dataSource: "dataSource", dataSourceFilter: "dataSourceFilter" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DataSourceFilterDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dataSourceFilter]'
+                }]
+        }], propDecorators: { dataSource: [{
+                type: Input
+            }], dataSourceFilter: [{
+                type: Input
+            }] } });
+
+/**
+ * Class representing the structure and behavior of a table definition.
+ * It defines various configurations such as column settings, actions,
+ * and callbacks for rows and data handling.
+ *
+ * @template T - The type of data represented in the table rows.
+ */
+class TableDefinition {
+    /**
+     * @property endpoint
+     * @description API endpoint from which table data will be fetched.
+     * @type {string}
+     */
+    endpoint = '';
+    /**
+     * @property projection
+     * @description Optional projection for specifying which fields should be included
+     * in the fetched data. Can be a single string or an array of field names.
+     * @type {string | string[]}
+     */
+    projection;
+    /**
+     * @property includes
+     * @description Optional array of related data entities (includes) to be retrieved along
+     * with the main data set.
+     * @type {string[]}
+     */
+    includes;
+    /**
+     * @property showAction
+     * @description Flag to indicate if action columns (e.g., edit, delete buttons)
+     * should be displayed in the table. Defaults to `true`.
+     * @type {boolean}
+     */
+    showAction = true;
+    /**
+     * @property selectable
+     * @description Flag to indicate if rows can be selected (e.g., with checkboxes).
+     * Defaults to `true`.
+     * @type {boolean}
+     */
+    selectable = true;
+    /**
+     * @property addable
+     * @description Flag to indicate if new items can be added to the table.
+     * Defaults to `true`.
+     * @type {boolean}
+     */
+    addable = true;
+    /**
+     * @property editable
+     * @description Flag to indicate if rows can be edited. Defaults to `true`.
+     * @type {boolean}
+     */
+    editable = true;
+    /**
+     * @property deletable
+     * @description Flag to indicate if rows can be deleted. Defaults to `true`.
+     * @type {boolean}
+     */
+    deletable = true;
+    /**
+     * @property downloadable
+     * @description Flag to indicate if table data can be downloaded (e.g., as CSV or Excel).
+     * @type {boolean}
+     */
+    downloadable;
+    /**
+     * @property duplicable
+     * @description Flag to indicate if rows can be duplicated.
+     * @type {boolean}
+     */
+    duplicable;
+    /**
+     * @property exportable
+     * @description Determines if the table is exportable.
+     * @type {boolean}
+     */
+    exportable = true;
+    /**
+     * @property exportFileName
+     * @description The name of the file to export.
+     * @type {string}
+     */
+    exportFileName;
+    /**
+     * @property sticky
+     * @description Flag to indicate whether the table headers or columns should stick
+     * to the viewport during scrolling. Defaults to `false`.
+     * @type {boolean}
+     */
+    sticky = false;
+    /**
+     * @property columns
+     * @description Array of table columns that define the structure and data types
+     * of each column in the table.
+     * @type {TableColumn<T>[]}
+     */
+    columns = [];
+    /**
+     * @property hideColumns
+     * @description Optional array of column keys that should be hidden from view.
+     * @type {string[]}
+     */
+    hideColumns;
+    /**
+     * @property rowNgClass
+     * @description Function to dynamically assign CSS classes to rows based on the row data
+     * and context. Can be used for conditional row styling.
+     * @type {(x?: T, ctx?: IGenericListComponent<T>) => any}
+     */
+    rowNgClass;
     /**
-     * Get selected Items
+     * @property rowClick
+     * @description Callback function for handling row click events.
+     * Invoked when a row is clicked.
+     * @type {(x?: T, ctx?: IGenericListComponent<T>) => any}
      */
-    getSelectedIds = () => this.getSelected('id');
-}
-
-class DataSourceFilterDirective {
+    rowClick;
     /**
-     * DataSource instance
+     * @property onEdit
+     * @description Callback function for handling edit actions.
+     * Invoked when the edit button is clicked for a row.
+     * @type {(x?: T, ctx?: IGenericListComponent<T>) => any}
      */
-    dataSource;
+    onEdit;
     /**
-     * Represents a value that changes over time.
-     * Observers can subscribe to the subject to receive filter changes
+     * @property detailsTemplate
+     * @description Name of the template to use for displaying additional row details.
+     * @type {string}
      */
-    _queryChange = new BehaviorSubject(null);
+    detailsTemplate;
     /**
-     * Sets query
+     * @property actions
+     * @description Array of action items (e.g., custom buttons) available for each row in the table.
+     * Actions can be context-sensitive based on the row data and table context.
+     * @type {ActionItem<T, IGenericListComponent<T>>[]}
      */
-    set dataSourceFilter(query) { this._queryChange.next(query); }
+    actions = [];
     /**
-     * Gets query
+     * @property columnSets
+     * @description Used to display specific columns in the table.
+     * This array defines sets of columns that can be shown
+     * based on the active configuration, allowing for dynamic table
+     * column customization.
+     * @type {string[]}
      */
-    get dataSourceFilter() { return this._queryChange.value; }
+    columnSets = [];
     /**
-     * Lifecycle hook that is called after data-bound properties of a directive are initialized.
+     * Constructor for initializing the table definition with optional values.
+     * Merges the provided initialization object with default properties.
+     *
+     * @param init - Optional partial table definition to initialize values.
      */
-    ngOnInit() {
-        this._queryChange.subscribe(() => {
-            if (this.dataSource) {
-                /* Update the filters */
-                Object.assign(this.dataSource.staticFieldFilters || {}, this.dataSourceFilter != null ? this.dataSourceFilter : {});
-                /* Reload data */
-                this.dataSource.reload();
-            }
-        });
+    constructor(init) {
+        Object.assign(this, init);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DataSourceFilterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: DataSourceFilterDirective, isStandalone: true, selector: "[dataSourceFilter]", inputs: { dataSource: "dataSource", dataSourceFilter: "dataSourceFilter" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DataSourceFilterDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[dataSourceFilter]'
-                }]
-        }], propDecorators: { dataSource: [{
-                type: Input
-            }], dataSourceFilter: [{
-                type: Input
-            }] } });
+
+/**
+ * Gets classes decoarated with @Table
+ * @param origin
+ * @returns
+ */
+function getTableDefinition(origin) {
+    /* Save the table defintion in the metadata */
+    var tableDefinition = Reflect.getMetadata(TABLE_DEFINITION_METADATA_KEY, origin) ?? new TableDefinition({});
+    if (tableDefinition) {
+        /* Set column in the table definition */
+        tableDefinition.columns = Reflect.getMetadata(TABLE_COLUMNS_METADATA_KEY, Reflect.construct(origin, []))
+            ?.filter((x) => !x.hidden && !tableDefinition.hideColumns?.some(y => y.trim() == x.name.trim()));
+        /* Sort the columns by index */
+        Utils.sortArray(tableDefinition.columns || [], 'index');
+        /* Set endpoint from the decorator @Api, if any */
+        var endpoint = Reflect.getMetadata(endpointMetadataKey, origin);
+        if (endpoint) {
+            tableDefinition.endpoint = endpoint;
+        }
+    }
+    return tableDefinition;
+}
 
 /**
  * A generic datasource class for working with data-tables in Angular Material.
@@ -18240,6 +18764,10 @@ class VdDynamicTableComponent {
     updateColumns() {
         /* Sort the columns by index */
         Utils.sortArray(this.columns || [], 'index');
+        /* Cache responsive display classes once per column */
+        this.columns?.forEach(column => {
+            column.displayNgClass = this.getDisplayClasses(column);
+        });
         /* Trigger changes */
         this.columnsSubject.next(this.columns);
     }
@@ -18395,20 +18923,47 @@ class VdDynamicTableComponent {
         keys.slice(0, -1).reduce((acc, key) => acc && acc[key], row)[keys[keys.length - 1]] = value;
     }
     /**
-     * Gets row classes
-     * @param column
-     * @param row
-     * @returns
+     * Retrieves the display setting for a given column, which can be either a static value or a function.
+     * If the display property is a function, it will be invoked with the current column sets and context.
+     * @param column - The TableColumn object for which to retrieve the display setting.
+     * @returns The display setting for the column, which can be a Grid value or undefined.
+     */
+    getColumnDisplay(column) {
+        /* If the display property is a function, invoke it with the current column sets and context */
+        if (typeof column.display === 'function') {
+            return column.display(this.columnSets || [], this.context);
+        }
+        return column.display;
+    }
+    /**
+     * Computes the CSS classes for a column based on its display setting.
+     * It maps the display value to corresponding CSS classes that control visibility and layout.
+     * @param column - The TableColumn object for which to compute the display classes.
+     * @returns An object containing CSS class names as keys and boolean values indicating whether the class should be applied.
+     */
+    getDisplayClasses(column) {
+        /* Retrieve the display setting for the column, which may be a static value or computed dynamically. */
+        const display = this.getColumnDisplay(column);
+        /* Return an object mapping display values to CSS classes, allowing for responsive visibility control. */
+        return {
+            'gt-xs': display == Grid.Xs,
+            'gt-sm': display == Grid.Sm,
+            'gt-md': display == Grid.Md,
+            'gt-lg': display == Grid.Lg,
+            'gt-xl': display == Grid.Xl,
+            'gt-xxl': display == Grid.Xxl,
+            'hidden': display == Grid.None,
+        };
+    }
+    /**
+     * Computes the CSS classes for a specific row based on the column's display settings and any additional classes defined.
+     * It combines the column's display classes, any custom classes defined in `cellNgClass`, and a 'text-right' class if `arrowBefore` is true.
+     * @param column - The TableColumn object for which to compute the row classes.
+     * @param row - The data object representing the current row.
+     * @returns An object containing CSS class names as keys and boolean values indicating whether the class should be applied.
      */
     getRowClasses(column, row) {
-        return Object.assign({
-            'gt-xs': column.display == Grid.Xs,
-            'gt-sm': column.display == Grid.Sm,
-            'gt-md': column.display == Grid.Md,
-            'gt-lg': column.display == Grid.Lg,
-            'gt-xl': column.display == Grid.Xl,
-            'gt-xxl': column.display == Grid.Xxl,
-            'hidden': column.display == Grid.None,
+        return Object.assign({}, column.displayNgClass || this.getDisplayClasses(column), {
             'text-right': column.arrowBefore
         }, column.cellNgClass ? column.cellNgClass(row, this.context) : {});
     }
@@ -18453,7 +19008,7 @@ class VdDynamicTableComponent {
         this.changeDetector.detectChanges();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: VdDynamicTableComponent, deps: [{ token: DynamicBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: VdDynamicTableComponent, isStandalone: true, selector: "vd-dynamic-table", inputs: { dataSource: "dataSource", data: "data", parentControl: "parentControl", entityObject: "entityObject", formArray: "formArray", debugValue: "debugValue", classType: "classType", context: "context", dataSourceFilter: "dataSourceFilter", static: "static", filterable: "filterable", sticky: "sticky", tableWidth: "tableWidth", useFilterOperator: "useFilterOperator", paginable: "paginable", selectable: "selectable", sortActive: "sortActive", sortDirection: "sortDirection", stickyHeader: "stickyHeader", stickyFilter: "stickyFilter", columnSets: "columnSets", rowNgClass: "rowNgClass", detailsTemplate: "detailsTemplate", readonly: "readonly", selectAllFilter: "selectAllFilter", paginatorRef: "paginatorRef", columns: "columns", rowMenuItems: "rowMenuItems", rowAction: "rowAction", excludedColumns: "excludedColumns", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions" }, outputs: { rowClick: "rowClick" }, queries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true }, { propertyName: "matSort", first: true, predicate: MatSort, descendants: true, static: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, static: true }, { propertyName: "detailsTemplateRef", predicate: ["detailsTemplate"], descendants: true, read: ViewContainerRef }, { propertyName: "rowContextMenuTriggers", predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "@if (!static) {\r\n    <div class=\"loading-progress\">\r\n        @if (dataSource?.isLoading) {\r\n            <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\r\n        }\r\n    </div>\r\n}\r\n\r\n<!-- #region Data table -->\r\n<div class=\"mat-table-container scrollbar-secondary\" [ngClass]=\"{'mat-table-sticky': sticky}\" #scrollContainer>\r\n    <table mat-table #table [dataSource]=\"dataSource\" [dataSourceFilter]=\"dataSourceFilter\" [ngClass]=\"{'table-fixed': !sticky && !detailsTemplate && !templateRef, 'table-stick': sticky}\" [trackBy]=\"trackBy\" matSort matSortDisableClear [matSortActive]=\"sortActive||'id'\" [matSortDirection]=\"sortDirection\" multiTemplateDataRows>\r\n        @for (column of columns$ | async; track columnsTrackBy($index, column)) {\r\n            <!-- #region Column def -->\r\n            <ng-container [cdkColumnDef]=\"column.name\" [sticky]=\"column.sticky\" [stickyEnd]=\"column.stickyEnd\">\r\n                <ng-template #header [ngTemplateOutlet]=\"header\" let-headerText=\"headerText\" [ngTemplateOutletContext]=\"{headerText: column.header | func:context}\">\r\n                    <th mat-header-cell *cdkHeaderCellDef [mat-sort-header]=\"column.sortBy || column.name\" [hidden]=\"column.hidden\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\" [disabled]=\"column.type == ColumnType.Checkbox || column.disabled\" [ngClass]=\"{'gt-xs': column.display == Grid.Xs, 'gt-sm': column.display == Grid.Sm, 'gt-md': column.display == Grid.Md, 'gt-lg': column.display == Grid.Lg, 'gt-xl': column.display == Grid.Xl, 'gt-xxl': column.display == Grid.Xxl, 'hidden': column.display == Grid.None}\" [arrowPosition]=\"column.arrowBefore?'before':'after'\">\r\n                        @if (column.type == ColumnType.Checkbox) {\r\n                            <mat-checkbox (change)=\"$event ? dataSource.toggleSelect($event, selectAllFilter) : null\" [disabled]=\"!dataSource.paginator?.length\" [checked]=\"dataSource.selectionModel.hasValue() && dataSource.isAllSelected()\" [indeterminate]=\"dataSource.selectionModel.hasValue() && !dataSource.isAllSelected()\"></mat-checkbox>\r\n                        } @if (column.type != ColumnType.Checkbox) {\r\n                            <span [matTooltip]=\"headerText\">{{headerText}}</span>\r\n                        }\r\n                    </th>\r\n                </ng-template>\r\n                <td mat-cell *cdkCellDef=\"let row; let rowIndex = dataIndex\" [matTooltip]=\"column.tooltip?column.tooltip(row, undefined, context):null\" [matTooltipClass]=\"column.tooltipClass??''\" [hidden]=\"column.hidden\" [ngClass]=\"getRowClasses(column, row)\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\">\r\n                    <ng-template #rowVal [ngTemplateOutlet]=\"rowVal\" let-rowValue [ngTemplateOutletContext]=\"{$implicit: column?.content && column?.content(row, undefined, context)}\">\r\n                        @switch (column.type) {\r\n                            <!-- #region Checkbox column -->\r\n                            @case (ColumnType.Checkbox) {\r\n                                <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? dataSource.selectionModel.toggle(row) : null\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" [checked]=\"dataSource.selectionModel.isSelected(row)\"></mat-checkbox>\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region Enum column -->\r\n                            @case (ColumnType.Enum) {\r\n                                <span>\r\n                                    @if (column.enumMetadata) {\r\n                                        @if (column.multiple) {\r\n                                            @for (item of rowValue; track item; let i = $index) {\r\n                                                @if (i < 2) {\r\n                                                    <ng-template let-displayValue=\"displayValue\" [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ displayValue: column.enumMetadata[item].display }\"></ng-template>\r\n                                                }\r\n                                                @if (i === 1 && rowValue?.length > 2) {\r\n                                                    <small [matTooltip]=\"(rowValue | slice:2 | map:column.enumMetadata | map:'display') | join:'\\n'\" matTooltipClass=\"mat-tooltip-multiline\">...</small>\r\n                                                }\r\n                                            }\r\n                                            <ng-template #template let-displayValue=\"displayValue\">\r\n                                                <mat-chip-row disableRipple=\"true\" selectable=\"false\" [matTooltip]=\"displayValue\">\r\n                                                    <span>{{ displayValue }}</span>\r\n                                                </mat-chip-row>\r\n                                            </ng-template>\r\n                                        } @else {\r\n                                            @if (rowValue >= 0) {\r\n                                                <span class=\"na\" [ngStyle]=\"{ color: ((column.enumMetadata[rowValue] || {}).textColor || 'inherit') }\" [innerHtml]=\"(column.enumMetadata[rowValue]||{}).display\"></span>\r\n                                            }\r\n                                        }\r\n                                    } @else {\r\n                                        @if (column.multiple) {\r\n                                            @for (item of rowValue; track item; let i = $index; let last = $last) {\r\n                                                <div>\r\n                                                    @if (i<2) {\r\n                                                        <small>\r\n                                                            <msa-enum-display [value]=\"item\" [enumType]=\"column.enumType\" [metadata]=\"column.enumMetadata\"></msa-enum-display>\r\n                                                        </small>\r\n                                                    } @if (i==1 && rowValue?.length > 2) {\r\n                                                        <small>, ...</small>\r\n                                                    }\r\n                                                </div>\r\n                                            }\r\n                                        } @else {\r\n                                            @if (rowValue >= 0) {\r\n                                                <msa-enum-display [value]=\"rowValue\" [enumType]=\"column.enumType\" [metadata]=\"column.enumMetadata\"></msa-enum-display>\r\n                                            }\r\n                                        }\r\n                                    }\r\n                                </span>\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region Toggle column -->\r\n                            @case (ColumnType.Toggle) {\r\n                                @if (!formArray) {\r\n                                    <mat-slide-toggle [ngModel]=\"row | property:column.name\" (ngModelChange)=\"setNestedProperty(row, column.name, $event);handleModelChange(column, row, undefined);\" (click)=\"$event.stopPropagation();\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" color=\"accent\"></mat-slide-toggle>\r\n                                } @if (formArray) {\r\n                                    <ng-container [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\r\n                                        <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\r\n                                    </ng-container>\r\n                                }\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region Date column -->\r\n                            @case (ColumnType.Date) {\r\n                                <span>{{rowValue | date:column.shortDate?'dd.MM.yyyy':'dd.MM.yyyy HH:mm:ss'}}</span>\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region Text Input column -->\r\n                            @case (ColumnType.TextInput) {\r\n                                @if (!formArray) {\r\n                                    <mat-form-field appearance=\"outline\" layout=\"column\" layout-align=\"center start\" subscriptSizing=\"dynamic\" dense-3 (click)=\"$event.stopPropagation();\">\r\n                                        @if (!formArray) {\r\n                                            <input matInput type=\"{{column.inputType}}\" autocomplete=\"none\" name=\"{{column.name}}{{rowIndex}}\" [ngModel]=\"row | property:column.name\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" [min]=\"column.inputMin?column.inputMin(row, undefined, context):null\" [max]=\"column.inputMax?column.inputMax(row, undefined, context):null\" (ngModelChange)=\"setNestedProperty(row, column.name, $event);(column.change?column.change(row, undefined, context):patch(row, [column.name], $event, column.patchIncludes));\" [ngModelOptions]=\"{updateOn: 'blur'}\" (keydown.enter)=\"handleKeydownEnter($event)\" />\r\n                                        }\r\n                                    </mat-form-field>\r\n                                } @if (formArray) {\r\n                                    <ng-container [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\r\n                                        <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\r\n                                    </ng-container>\r\n                                }\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region VD-Select column -->\r\n                            @case (ColumnType.Select) {\r\n                                @if (!formArray) {\r\n                                    <mat-form-field appearance=\"outline\" layout=\"column\" layout-align=\"center start\" subscriptSizing=\"dynamic\" dense-3 (click)=\"$event.stopPropagation();\">\r\n                                        @if (!formArray) {\r\n                                            <vd-select name=\"{{column.name}}{{rowIndex}}\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"$safeNavigationMigration(column?.enumFilter) | func:row:context\" [options]=\"column.options\" [defaultOption]=\"column.defaultOption??true\" [ngModel]=\"row | property:column.name\" (ngModelChange)=\"setNestedProperty(row, column.name, $event);\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" (change)=\"column.change?column.change(row, undefined, context):patch(row, [column.name], $event.value, column.patchIncludes)\" (keydown.enter)=\"handleKeydownEnter($event)\"></vd-select>\r\n                                        }\r\n                                    </mat-form-field>\r\n                                } @if (formArray) {\r\n                                    <ng-container [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\r\n                                        <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\r\n                                    </ng-container>\r\n                                }\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region Action -->\r\n                            @case (ColumnType.Action) {\r\n                                @if (column.menu) {\r\n                                    @if (menu?.matMenu && !row.locked && hasVisibleRowMenuItems(row, column)) {\r\n                                        <div id=\"menu-{{row.id}}\" style=\"visibility: hidden; position: fixed\" #contextMenuTrigger=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu.matMenu!\"></div>\r\n                                    }\r\n                                    <vd-dynamic-menu [items]=\"[column.menu]\" [data]=\"row\" [context]=\"context\" #menu></vd-dynamic-menu>\r\n                                }\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region Menu -->\r\n                            @case (ColumnType.Menu) {\r\n                                @if (column.menu) {\r\n                                    <vd-dynamic-menu [items]=\"[column.menu]\" [data]=\"row\" [context]=\"context\"></vd-dynamic-menu>\r\n                                }\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region icon -->\r\n                            @case (ColumnType.Icon) {\r\n                                <span layout=\"row\" layout-align=\"start center\">\r\n                                    @if(column && column.icon){\r\n                                        @if ( column.icon.matIcon) {\r\n                                            <mat-icon fontSet=\"{{column.icon.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon.cssClass??'', row)\">{{handleExpression($safeNavigationMigration(column.icon.matIcon)!, row)}}</mat-icon>\r\n                                        }\r\n                                        @if (column.icon.svgIcon) {\r\n                                            <mat-icon fontSet=\"{{column.icon.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon.cssClass??'', row)\" [svgIcon]=\"handleExpression($safeNavigationMigration(column.icon.svgIcon)!, row)!\"></mat-icon>\r\n                                        }\r\n                                        @if (column.icon.fontIcon) {\r\n                                            <mat-icon fontSet=\"{{column.icon.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon.cssClass??'', row)\" [fontIcon]=\"handleExpression($safeNavigationMigration(column.icon.fontIcon)!, row)!\"></mat-icon>\r\n                                        }\r\n                                    }\r\n                                </span>\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region icon button -->\r\n                            @case (ColumnType.IconButton) {\r\n                                <a mat-icon-button (click)=\"$event.stopPropagation();column.iconButton?.event?column.iconButton.event(row, context):null\">\r\n                                    <mat-icon fontSet=\"{{column.iconButton?.iconFontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.iconButton?.iconClass??'', row)\">{{handleExpression(column.iconButton?.icon??'radio_button_checked', row) || 'radio_button_checked'}}</mat-icon>\r\n                                </a>\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region Other column types -->\r\n                            @default {\r\n                                <span [innerHtml]=\"rowValue??''\"></span>\r\n                            }\r\n                            <!-- #endregion -->\r\n                        }\r\n                        <ng-template #recursiveContainer let-columnNameSegments=\"segments\" let-formGroup=\"formGroup\" let-parentFormGroup=\"parentFormGroup\">\r\n                            @if (formGroup) {\r\n                                <ng-container [formGroup]=\"formGroup\">\r\n                                    <!-- If the columnNameSegments array is empty, we're at the leaf node -->\r\n                                    @if (!columnNameSegments.length) {\r\n                                        @switch (column.type) {\r\n                                            <!-- #region Toggle column -->\r\n                                            @case (ColumnType.Toggle) {\r\n                                                <mat-slide-toggle [formControl]=\"formGroup\" (click)=\"$event.stopPropagation();\" (change)=\"column.change?column.change(parentFormGroup.value, parentFormGroup, context):handleModelChange(column, parentFormGroup.value, parentFormGroup)\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" color=\"accent\"></mat-slide-toggle>\r\n                                            }\r\n                                            <!-- #endregion -->\r\n                                            <!-- #region Text Input column -->\r\n                                            @case (ColumnType.TextInput) {\r\n                                                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" dense-3 layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\r\n                                                    <input matInput [formControl]=\"formGroup\" type=\"{{column.inputType}}\" autocomplete=\"none\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" [min]=\"column.inputMin?column.inputMin(parentFormGroup.value, parentFormGroup, context):null\" [max]=\"column.inputMax?column.inputMax(parentFormGroup.value, parentFormGroup, context):null\" (keydown.enter)=\"handleKeydownEnter($event)\" />\r\n                                                </mat-form-field>\r\n                                            }\r\n                                            <!-- #endregion -->\r\n                                            <!-- #region VD-Select column -->\r\n                                            @case (ColumnType.Select) {\r\n                                                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" dense-3 layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\r\n                                                    <vd-select [formControl]=\"formGroup\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"column.enumFilter | func:parentFormGroup.value:context\" [options]=\"column.options\" [defaultOption]=\"column.defaultOption??true\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" (selectionChange)=\"column.change?column.change(parentFormGroup.value, parentFormGroup, context):patch(parentFormGroup.value, [column.name], rowValue, column.patchIncludes)\" (keydown.enter)=\"handleKeydownEnter($event)\"></vd-select>\r\n                                                </mat-form-field>\r\n                                            }\r\n                                            <!-- #endregion -->\r\n                                        }\r\n                                    } @else {\r\n                                        <!-- If not the last segment, create a nested form group -->\r\n                                        <ng-container [formGroupName]=\"columnNameSegments[0]\">\r\n                                            <!-- Recursive call to handle nested segments -->\r\n                                            <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: columnNameSegments.slice(1), parentFormGroup:formGroup, formGroup: formGroup.get(columnNameSegments[0])}\"></ng-container>\r\n                                        </ng-container>\r\n                                    }\r\n                                </ng-container>\r\n                            }\r\n                        </ng-template>\r\n                    </ng-template>\r\n                </td>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n        }\r\n\r\n        <!-- #region Filter row -->\r\n        @if (dataSource && filterable) {\r\n            @for (column of columns$ | async; track column) {\r\n                <ng-container cdkColumnDef=\"filter.{{column.filter || column.name}}\" [sticky]=\"column.sticky\" [stickyEnd]=\"column.stickyEnd\">\r\n                    <th mat-header-cell *cdkHeaderCellDef [hidden]=\"column.hidden\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\" [ngClass]=\"{'gt-xs': column.display == Grid.Xs, 'gt-sm': column.display == Grid.Sm, 'gt-md': column.display == Grid.Md, 'gt-lg': column.display == Grid.Lg, 'gt-xl': column.display == Grid.Xl, 'gt-xxl': column.display == Grid.Xxl, 'hidden': column.display == Grid.None}\">\r\n                        <!-- #region Select filter -->\r\n                        @if(column.endpoint || column.enumType || column.options){\r\n                            <span filter-select [endpoint]=\"column.endpoint\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"column.enumFilter | func:{}:context\" [options]=\"column.options\" [text]=\"column.filterOptionText || 'name'\"></span>\r\n                        }\r\n                        <!-- #region Text filter -->\r\n                        @else if(column.type == ColumnType.Text || column.type == ColumnType.TextInput || column.type == ColumnType.Number) {\r\n                            <span filter-input [onlyNumber]=\"column.filterInputNumber??false\" [matTooltip]=\"column.filterTooltip ? column.filterTooltip(context):null\" [matTooltipClass]=\"column.filterTooltipClass??''\" [operator]=\"!useFilterOperator ? undefined : column.filterOperator\"></span>\r\n                        }\r\n                        <!-- #endregion -->\r\n                        <!-- #region Date filter -->\r\n                        @else if (column.type == ColumnType.Date) {\r\n                            <span filter-date></span>\r\n                        }\r\n                        <!-- #endregion -->\r\n                        <!-- #region Action filter (clear) -->\r\n                        @else if (column.type == ColumnType.Action) {\r\n                            <span filter-clear></span>\r\n                        }\r\n                        <!-- #endregion -->\r\n                    </th>\r\n                </ng-container>\r\n            }\r\n        }\r\n        <!-- #endregion -->\r\n\r\n        <!-- #region Details column -->\r\n        <ng-container cdkColumnDef=\"expandedDetail\">\r\n            <td mat-cell *matCellDef=\"let row; let index = index\" [attr.colspan]=\"(displayedColumns$ | async)?.length\">\r\n                <div class=\"row-detail\" [@detailExpand]=\"row == expandedRow ? 'expanded' : 'collapsed'\" #detailsTemplate>\r\n                    @if (templateRef && row === expandedRow) {\r\n                        <ng-container *ngTemplateOutlet=\"templateRef; context:{row: row, index: index, context: context}\"></ng-container>\r\n                    }\r\n                </div>\r\n            </td>\r\n        </ng-container>\r\n        <!-- #endregion -->\r\n\r\n        <!-- #region Filter header -->\r\n        @if (filterable) {\r\n            <tr mat-header-row *cdkHeaderRowDef=\"displayedFilterColumns$ | async\"></tr>\r\n        }\r\n        <!-- #endregion -->\r\n\r\n        <tr mat-header-row *cdkHeaderRowDef=\"displayedColumns$ | async; sticky: stickyFilter\"></tr>\r\n        <tr mat-row *cdkRowDef=\"let row; columns: displayedColumns$ | async; let index = dataIndex\" [ngClass]=\"rowNgClass?rowNgClass(row, context):null\" [class.expanded-row]=\"expandedRow === row\" (click)=\"handleRowClick(index, row)\" (contextmenu)=\"handleRowRightClick($event, row)\"></tr>\r\n\r\n        <!-- #region Detrails row -->\r\n        @if (detailsTemplate || templateRef) {\r\n            <tr mat-row *cdkRowDef=\"let row; columns: ['expandedDetail']\" class=\"detail-row\" [ngClass]=\"rowNgClass?rowNgClass(row, context):null\"></tr>\r\n        }\r\n        <!-- #endregion -->\r\n    </table>\r\n\r\n    <!-- #region Modern No Results Message -->\r\n    @if (dataSource?.filteredData?.length <= 0 && dataSource?.total <= 0) {\r\n        <div class=\"no-results-overlay\">\r\n            <mat-icon class=\"no-results-icon\">search_off</mat-icon>\r\n            <div class=\"no-results-text mat-body-1\">\r\n                <h3 i18n=\"@@noResultsFound\">No results found</h3>\r\n                <p i18n=\"@@tryAdjustFilters\">\r\n                    Try adjusting your filters or search criteria.\r\n                </p>\r\n            </div>\r\n        </div>\r\n    }\r\n    <!-- #endregion -->\r\n</div>\r\n<!-- #endregion -->\r\n\r\n<!-- #region Debug value -->\r\n@if (debugValue) {\r\n    <code>\r\n  <pre>{{formValue | json}}</pre>\r\n</code>\r\n}\r\n<!-- #endregion -->\r\n\r\n<div class=\"table-footer\" layout=\"row\">\r\n    <ng-content select=\"[table-footer]\"></ng-content>\r\n    <span flex></span>\r\n    @if (paginable) {\r\n        <mat-paginator [pageSize]=\"pageSize\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\"></mat-paginator>\r\n    }\r\n</div>", styles: ["::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-form-field .mat-form-field-wrapper{width:100%}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip{height:24px;margin-top:2px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip .mdc-evolution-chip__action--primary{padding-left:9px;padding-right:9px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip:last-child{margin-bottom:2px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip *{font-size:.8rem}@media(max-width:389px){::ng-deep .mat-mdc-table [gt-xs],::ng-deep .mat-mdc-table .gt-xs{display:none}::ng-deep .mat-mdc-table [gt-sm],::ng-deep .mat-mdc-table .gt-sm{display:none}::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:599px){::ng-deep .mat-mdc-table [gt-sm],::ng-deep .mat-mdc-table .gt-sm{display:none}::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:959px){::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:1279px){::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:1919px){::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:1979px){::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}.mat-table-container{width:100%;max-width:100%;overflow:auto}.mat-table-container .mat-mdc-header-cell,.mat-table-container .mat-mdc-footer-cell,.mat-table-container .mat-mdc-cell{min-width:80px;box-sizing:border-box}.mat-table-container .mat-mdc-header-row,.mat-table-container .mat-mdc-footer-row,.mat-table-container .mat-mdc-row{min-width:1920px}.mat-table-container.mat-table-sticky .mat-mdc-table-sticky-border-elem-right{box-shadow:-3px 0 5px #0000001a}.mat-table-container.mat-table-sticky .mat-mdc-table-sticky-border-elem-left{box-shadow:3px 0 5px #0000001a}\n"], dependencies: [{ kind: "ngmodule", type: CdkTableModule }, { kind: "directive", type: i2$3.CdkRowDef, selector: "[cdkRowDef]", inputs: ["cdkRowDefColumns", "cdkRowDefWhen"] }, { kind: "directive", type: i2$3.CdkCellDef, selector: "[cdkCellDef]" }, { kind: "directive", type: i2$3.CdkHeaderCellDef, selector: "[cdkHeaderCellDef]" }, { kind: "directive", type: i2$3.CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["cdkColumnDef", "sticky", "stickyEnd"] }, { kind: "directive", type: i2$3.CdkHeaderRowDef, selector: "[cdkHeaderRowDef]", inputs: ["cdkHeaderRowDef", "cdkHeaderRowDefSticky"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i7.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: 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: i10.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i12.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i12.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i16.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: "directive", type: 
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: VdDynamicTableComponent, isStandalone: true, selector: "vd-dynamic-table", inputs: { dataSource: "dataSource", data: "data", parentControl: "parentControl", entityObject: "entityObject", formArray: "formArray", debugValue: "debugValue", classType: "classType", context: "context", dataSourceFilter: "dataSourceFilter", static: "static", filterable: "filterable", sticky: "sticky", tableWidth: "tableWidth", useFilterOperator: "useFilterOperator", paginable: "paginable", selectable: "selectable", sortActive: "sortActive", sortDirection: "sortDirection", stickyHeader: "stickyHeader", stickyFilter: "stickyFilter", columnSets: "columnSets", rowNgClass: "rowNgClass", detailsTemplate: "detailsTemplate", readonly: "readonly", selectAllFilter: "selectAllFilter", paginatorRef: "paginatorRef", columns: "columns", rowMenuItems: "rowMenuItems", rowAction: "rowAction", excludedColumns: "excludedColumns", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions" }, outputs: { rowClick: "rowClick" }, queries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true }, { propertyName: "matSort", first: true, predicate: MatSort, descendants: true, static: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, static: true }, { propertyName: "detailsTemplateRef", predicate: ["detailsTemplate"], descendants: true, read: ViewContainerRef }, { propertyName: "rowContextMenuTriggers", predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "@if (!static) {\r\n    <div class=\"loading-progress\">\r\n        @if (dataSource?.isLoading) {\r\n            <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\r\n        }\r\n    </div>\r\n}\r\n<!-- #region Data table -->\r\n<div class=\"mat-table-container scrollbar-secondary\" [ngClass]=\"{'mat-table-sticky': sticky}\" #scrollContainer>\r\n    <table mat-table #table [dataSource]=\"dataSource\" [dataSourceFilter]=\"dataSourceFilter\" [ngClass]=\"{'table-fixed': !sticky && !detailsTemplate && !templateRef, 'table-stick': sticky}\" [trackBy]=\"trackBy\" matSort matSortDisableClear [matSortActive]=\"sortActive||'id'\" [matSortDirection]=\"sortDirection\" multiTemplateDataRows>\r\n        @for (column of columns$ | async; track columnsTrackBy($index, column)) {\r\n            <!-- #region Column def -->\r\n            <ng-container [cdkColumnDef]=\"column.name\" [sticky]=\"column.sticky\" [stickyEnd]=\"column.stickyEnd\">\r\n                <ng-template #header [ngTemplateOutlet]=\"header\" let-headerText=\"headerText\" [ngTemplateOutletContext]=\"{headerText: column.header | func:context}\">\r\n                    <th mat-header-cell *cdkHeaderCellDef [mat-sort-header]=\"column.sortBy || column.name\" [hidden]=\"column.hidden\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\" [disabled]=\"column.type == ColumnType.Checkbox || column.disabled\" [ngClass]=\"column.displayNgClass\" [arrowPosition]=\"column.arrowBefore?'before':'after'\">\r\n                        @if (column.type == ColumnType.Checkbox) {\r\n                            <mat-checkbox (change)=\"$event ? dataSource.toggleSelect($event, selectAllFilter) : null\" [disabled]=\"!dataSource.paginator?.length\" [checked]=\"dataSource.selectionModel.hasValue() && dataSource.isAllSelected()\" [indeterminate]=\"dataSource.selectionModel.hasValue() && !dataSource.isAllSelected()\"></mat-checkbox>\r\n                        } @if (column.type != ColumnType.Checkbox) {\r\n                            <span [matTooltip]=\"headerText\">{{headerText}}</span>\r\n                        }\r\n                    </th>\r\n                </ng-template>\r\n                <td mat-cell *cdkCellDef=\"let row; let rowIndex = dataIndex\" [matTooltip]=\"column.tooltip?column.tooltip(row, undefined, context):null\" [matTooltipClass]=\"column.tooltipClass??''\" [hidden]=\"column.hidden\" [ngClass]=\"getRowClasses(column, row)\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\">\r\n                    <ng-template #rowVal [ngTemplateOutlet]=\"rowVal\" let-rowValue [ngTemplateOutletContext]=\"{$implicit: column?.content && column?.content(row, undefined, context)}\">\r\n                        @switch (column.type) {\r\n                            <!-- #region Checkbox column -->\r\n                            @case (ColumnType.Checkbox) {\r\n                                <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? dataSource.selectionModel.toggle(row) : null\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" [checked]=\"dataSource.selectionModel.isSelected(row)\"></mat-checkbox>\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region Enum column -->\r\n                            @case (ColumnType.Enum) {\r\n                                <span>\r\n                                    @if (column.enumMetadata) {\r\n                                        @if (column.multiple) {\r\n                                            @for (item of rowValue; track item; let i = $index) {\r\n                                                @if (i < 2) {\r\n                                                    <ng-template let-displayValue=\"displayValue\" [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ displayValue: column.enumMetadata[item].display }\"></ng-template>\r\n                                                }\r\n                                                @if (i === 1 && rowValue?.length > 2) {\r\n                                                    <small [matTooltip]=\"(rowValue | slice:2 | map:column.enumMetadata | map:'display') | join:'\\n'\" matTooltipClass=\"mat-tooltip-multiline\">...</small>\r\n                                                }\r\n                                            }\r\n                                            <ng-template #template let-displayValue=\"displayValue\">\r\n                                                <mat-chip-row disableRipple=\"true\" selectable=\"false\" [matTooltip]=\"displayValue\">\r\n                                                    <span>{{ displayValue }}</span>\r\n                                                </mat-chip-row>\r\n                                            </ng-template>\r\n                                        } @else {\r\n                                            @if (rowValue >= 0) {\r\n                                                <span class=\"na\" [ngStyle]=\"{ color: ((column.enumMetadata[rowValue] || {}).textColor || 'inherit') }\" [innerHtml]=\"(column.enumMetadata[rowValue]||{}).display\"></span>\r\n                                            }\r\n                                        }\r\n                                    } @else {\r\n                                        @if (column.multiple) {\r\n                                            @for (item of rowValue; track item; let i = $index; let last = $last) {\r\n                                                <div>\r\n                                                    @if (i<2) {\r\n                                                        <small>\r\n                                                            <msa-enum-display [value]=\"item\" [enumType]=\"column.enumType\" [metadata]=\"column.enumMetadata\"></msa-enum-display>\r\n                                                        </small>\r\n                                                    } @if (i==1 && rowValue?.length > 2) {\r\n                                                        <small>, ...</small>\r\n                                                    }\r\n                                                </div>\r\n                                            }\r\n                                        } @else {\r\n                                            @if (rowValue >= 0) {\r\n                                                <msa-enum-display [value]=\"rowValue\" [enumType]=\"column.enumType\" [metadata]=\"column.enumMetadata\"></msa-enum-display>\r\n                                            }\r\n                                        }\r\n                                    }\r\n                                </span>\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region Toggle column -->\r\n                            @case (ColumnType.Toggle) {\r\n                                @if (!formArray) {\r\n                                    <mat-slide-toggle [ngModel]=\"row | property:column.name\" (ngModelChange)=\"setNestedProperty(row, column.name, $event);handleModelChange(column, row, undefined);\" (click)=\"$event.stopPropagation();\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" color=\"accent\"></mat-slide-toggle>\r\n                                } @if (formArray) {\r\n                                    <ng-container [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\r\n                                        <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\r\n                                    </ng-container>\r\n                                }\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region Date column -->\r\n                            @case (ColumnType.Date) {\r\n                                <span>{{rowValue | date:column.shortDate?'dd.MM.yyyy':'dd.MM.yyyy HH:mm:ss'}}</span>\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region Text Input column -->\r\n                            @case (ColumnType.TextInput) {\r\n                                @if (!formArray) {\r\n                                    <mat-form-field appearance=\"outline\" layout=\"column\" layout-align=\"center start\" subscriptSizing=\"dynamic\" dense-3 (click)=\"$event.stopPropagation();\">\r\n                                        @if (!formArray) {\r\n                                            <input matInput type=\"{{column.inputType}}\" autocomplete=\"none\" name=\"{{column.name}}{{rowIndex}}\" [ngModel]=\"row | property:column.name\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" [min]=\"column.inputMin?column.inputMin(row, undefined, context):null\" [max]=\"column.inputMax?column.inputMax(row, undefined, context):null\" (ngModelChange)=\"setNestedProperty(row, column.name, $event);(column.change?column.change(row, undefined, context):patch(row, [column.name], $event, column.patchIncludes));\" [ngModelOptions]=\"{updateOn: 'blur'}\" (keydown.enter)=\"handleKeydownEnter($event)\" />\r\n                                        }\r\n                                    </mat-form-field>\r\n                                } @if (formArray) {\r\n                                    <ng-container [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\r\n                                        <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\r\n                                    </ng-container>\r\n                                }\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region VD-Select column -->\r\n                            @case (ColumnType.Select) {\r\n                                @if (!formArray) {\r\n                                    <mat-form-field appearance=\"outline\" layout=\"column\" layout-align=\"center start\" subscriptSizing=\"dynamic\" dense-3 (click)=\"$event.stopPropagation();\">\r\n                                        @if (!formArray) {\r\n                                            <vd-select name=\"{{column.name}}{{rowIndex}}\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"$safeNavigationMigration(column?.enumFilter) | func:row:context\" [options]=\"column.options\" [defaultOption]=\"column.defaultOption??true\" [ngModel]=\"row | property:column.name\" (ngModelChange)=\"setNestedProperty(row, column.name, $event);\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" (change)=\"column.change?column.change(row, undefined, context):patch(row, [column.name], $event.value, column.patchIncludes)\" (keydown.enter)=\"handleKeydownEnter($event)\"></vd-select>\r\n                                        }\r\n                                    </mat-form-field>\r\n                                } @if (formArray) {\r\n                                    <ng-container [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\r\n                                        <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\r\n                                    </ng-container>\r\n                                }\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region Action -->\r\n                            @case (ColumnType.Action) {\r\n                                @if (column.menu) {\r\n                                    @if (menu?.matMenu && !row.locked && hasVisibleRowMenuItems(row, column)) {\r\n                                        <div id=\"menu-{{row.id}}\" style=\"visibility: hidden; position: fixed\" #contextMenuTrigger=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu.matMenu!\"></div>\r\n                                    }\r\n                                    <vd-dynamic-menu [items]=\"[column.menu]\" [data]=\"row\" [context]=\"context\" #menu></vd-dynamic-menu>\r\n                                }\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region Menu -->\r\n                            @case (ColumnType.Menu) {\r\n                                @if (column.menu) {\r\n                                    <vd-dynamic-menu [items]=\"[column.menu]\" [data]=\"row\" [context]=\"context\"></vd-dynamic-menu>\r\n                                }\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region icon -->\r\n                            @case (ColumnType.Icon) {\r\n                                <span layout=\"row\" layout-align=\"start center\">\r\n                                    @if(column && column.icon){\r\n                                        @if ( column.icon.matIcon) {\r\n                                            <mat-icon fontSet=\"{{column.icon.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon.cssClass??'', row)\">{{handleExpression($safeNavigationMigration(column.icon.matIcon)!, row)}}</mat-icon>\r\n                                        }\r\n                                        @if (column.icon.svgIcon) {\r\n                                            <mat-icon fontSet=\"{{column.icon.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon.cssClass??'', row)\" [svgIcon]=\"handleExpression($safeNavigationMigration(column.icon.svgIcon)!, row)!\"></mat-icon>\r\n                                        }\r\n                                        @if (column.icon.fontIcon) {\r\n                                            <mat-icon fontSet=\"{{column.icon.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon.cssClass??'', row)\" [fontIcon]=\"handleExpression($safeNavigationMigration(column.icon.fontIcon)!, row)!\"></mat-icon>\r\n                                        }\r\n                                    }\r\n                                </span>\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region icon button -->\r\n                            @case (ColumnType.IconButton) {\r\n                                <a mat-icon-button (click)=\"$event.stopPropagation();column.iconButton?.event?column.iconButton.event(row, context):null\">\r\n                                    <mat-icon fontSet=\"{{column.iconButton?.iconFontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.iconButton?.iconClass??'', row)\">{{handleExpression(column.iconButton?.icon??'radio_button_checked', row) || 'radio_button_checked'}}</mat-icon>\r\n                                </a>\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region Other column types -->\r\n                            @default {\r\n                                <span [innerHtml]=\"rowValue??''\"></span>\r\n                            }\r\n                            <!-- #endregion -->\r\n                        }\r\n                        <ng-template #recursiveContainer let-columnNameSegments=\"segments\" let-formGroup=\"formGroup\" let-parentFormGroup=\"parentFormGroup\">\r\n                            @if (formGroup) {\r\n                                <ng-container [formGroup]=\"formGroup\">\r\n                                    <!-- If the columnNameSegments array is empty, we're at the leaf node -->\r\n                                    @if (!columnNameSegments.length) {\r\n                                        @switch (column.type) {\r\n                                            <!-- #region Toggle column -->\r\n                                            @case (ColumnType.Toggle) {\r\n                                                <mat-slide-toggle [formControl]=\"formGroup\" (click)=\"$event.stopPropagation();\" (change)=\"column.change?column.change(parentFormGroup.value, parentFormGroup, context):handleModelChange(column, parentFormGroup.value, parentFormGroup)\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" color=\"accent\"></mat-slide-toggle>\r\n                                            }\r\n                                            <!-- #endregion -->\r\n                                            <!-- #region Text Input column -->\r\n                                            @case (ColumnType.TextInput) {\r\n                                                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" dense-3 layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\r\n                                                    <input matInput [formControl]=\"formGroup\" type=\"{{column.inputType}}\" autocomplete=\"none\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" [min]=\"column.inputMin?column.inputMin(parentFormGroup.value, parentFormGroup, context):null\" [max]=\"column.inputMax?column.inputMax(parentFormGroup.value, parentFormGroup, context):null\" (keydown.enter)=\"handleKeydownEnter($event)\" />\r\n                                                </mat-form-field>\r\n                                            }\r\n                                            <!-- #endregion -->\r\n                                            <!-- #region VD-Select column -->\r\n                                            @case (ColumnType.Select) {\r\n                                                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" dense-3 layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\r\n                                                    <vd-select [formControl]=\"formGroup\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"column.enumFilter | func:parentFormGroup.value:context\" [options]=\"column.options\" [defaultOption]=\"column.defaultOption??true\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" (selectionChange)=\"column.change?column.change(parentFormGroup.value, parentFormGroup, context):patch(parentFormGroup.value, [column.name], rowValue, column.patchIncludes)\" (keydown.enter)=\"handleKeydownEnter($event)\"></vd-select>\r\n                                                </mat-form-field>\r\n                                            }\r\n                                            <!-- #endregion -->\r\n                                        }\r\n                                    } @else {\r\n                                        <!-- If not the last segment, create a nested form group -->\r\n                                        <ng-container [formGroupName]=\"columnNameSegments[0]\">\r\n                                            <!-- Recursive call to handle nested segments -->\r\n                                            <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: columnNameSegments.slice(1), parentFormGroup:formGroup, formGroup: formGroup.get(columnNameSegments[0])}\"></ng-container>\r\n                                        </ng-container>\r\n                                    }\r\n                                </ng-container>\r\n                            }\r\n                        </ng-template>\r\n                    </ng-template>\r\n                </td>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n        }\r\n        <!-- #region Filter row -->\r\n        @if (dataSource && filterable) {\r\n            @for (column of columns$ | async; track column) {\r\n                <ng-container cdkColumnDef=\"filter.{{column.filter || column.name}}\" [sticky]=\"column.sticky\" [stickyEnd]=\"column.stickyEnd\">\r\n                    <th mat-header-cell *cdkHeaderCellDef [hidden]=\"column.hidden\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\" [ngClass]=\"column.displayNgClass\">\r\n                        <!-- #region Select filter -->\r\n                        @if(column.endpoint || column.enumType || column.options){\r\n                            <span filter-select [endpoint]=\"column.endpoint\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"column.enumFilter | func:{}:context\" [options]=\"column.options\" [text]=\"column.filterOptionText || 'name'\"></span>\r\n                        }\r\n                        <!-- #region Text filter -->\r\n                        @else if(column.type == ColumnType.Text || column.type == ColumnType.TextInput || column.type == ColumnType.Number) {\r\n                            <span filter-input [onlyNumber]=\"column.filterInputNumber??false\" [matTooltip]=\"column.filterTooltip ? column.filterTooltip(context):null\" [matTooltipClass]=\"column.filterTooltipClass??''\" [operator]=\"!useFilterOperator ? undefined : column.filterOperator\"></span>\r\n                        }\r\n                        <!-- #endregion -->\r\n                        <!-- #region Date filter -->\r\n                        @else if (column.type == ColumnType.Date) {\r\n                            <span filter-date></span>\r\n                        }\r\n                        <!-- #endregion -->\r\n                        <!-- #region Action filter (clear) -->\r\n                        @else if (column.type == ColumnType.Action) {\r\n                            <span filter-clear></span>\r\n                        }\r\n                        <!-- #endregion -->\r\n                    </th>\r\n                </ng-container>\r\n            }\r\n        }\r\n        <!-- #endregion -->\r\n        <!-- #region Details column -->\r\n        <ng-container cdkColumnDef=\"expandedDetail\">\r\n            <td mat-cell *matCellDef=\"let row; let index = index\" [attr.colspan]=\"(displayedColumns$ | async)?.length\">\r\n                <div class=\"row-detail\" [@detailExpand]=\"row == expandedRow ? 'expanded' : 'collapsed'\" #detailsTemplate>\r\n                    @if (templateRef && row === expandedRow) {\r\n                        <ng-container *ngTemplateOutlet=\"templateRef; context:{row: row, index: index, context: context}\"></ng-container>\r\n                    }\r\n                </div>\r\n            </td>\r\n        </ng-container>\r\n        <!-- #endregion -->\r\n        <!-- #region Filter header -->\r\n        @if (filterable) {\r\n            <tr mat-header-row *cdkHeaderRowDef=\"displayedFilterColumns$ | async\"></tr>\r\n        }\r\n        <!-- #endregion -->\r\n        <tr mat-header-row *cdkHeaderRowDef=\"displayedColumns$ | async; sticky: stickyFilter\"></tr>\r\n        <tr mat-row *cdkRowDef=\"let row; columns: displayedColumns$ | async; let index = dataIndex\" [ngClass]=\"rowNgClass?rowNgClass(row, context):null\" [class.expanded-row]=\"expandedRow === row\" (click)=\"handleRowClick(index, row)\" (contextmenu)=\"handleRowRightClick($event, row)\"></tr>\r\n        <!-- #region Detrails row -->\r\n        @if (detailsTemplate || templateRef) {\r\n            <tr mat-row *cdkRowDef=\"let row; columns: ['expandedDetail']\" class=\"detail-row\" [ngClass]=\"rowNgClass?rowNgClass(row, context):null\"></tr>\r\n        }\r\n        <!-- #endregion -->\r\n    </table>\r\n    <!-- #region Modern No Results Message -->\r\n    @if (dataSource?.filteredData?.length <= 0 && dataSource?.total <= 0) {\r\n        <div class=\"no-results-overlay\">\r\n            <mat-icon class=\"no-results-icon\">search_off</mat-icon>\r\n            <div class=\"no-results-text mat-body-1\">\r\n                <h3 i18n=\"@@noResultsFound\">No results found</h3>\r\n                <p i18n=\"@@tryAdjustFilters\"> Try adjusting your filters or search criteria. </p>\r\n            </div>\r\n        </div>\r\n    }\r\n    <!-- #endregion -->\r\n</div>\r\n<!-- #endregion -->\r\n<!-- #region Debug value -->\r\n@if (debugValue) {\r\n    <code>\r\n  <pre>{{formValue | json}}</pre>\r\n</code>\r\n}\r\n<!-- #endregion -->\r\n<div class=\"table-footer\" layout=\"row\">\r\n    <ng-content select=\"[table-footer]\"></ng-content>\r\n    <span flex></span>\r\n    @if (paginable) {\r\n        <mat-paginator [pageSize]=\"pageSize\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\"></mat-paginator>\r\n    }\r\n</div>", styles: ["::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-form-field .mat-form-field-wrapper{width:100%}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip{height:24px;margin-top:2px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip .mdc-evolution-chip__action--primary{padding-left:9px;padding-right:9px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip:last-child{margin-bottom:2px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip *{font-size:.8rem}@media(max-width:389px){::ng-deep .mat-mdc-table [gt-xs],::ng-deep .mat-mdc-table .gt-xs{display:none}::ng-deep .mat-mdc-table [gt-sm],::ng-deep .mat-mdc-table .gt-sm{display:none}::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:599px){::ng-deep .mat-mdc-table [gt-sm],::ng-deep .mat-mdc-table .gt-sm{display:none}::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:959px){::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:1279px){::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:1919px){::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:1979px){::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}.mat-table-container{width:100%;max-width:100%;overflow:auto}.mat-table-container .mat-mdc-header-cell,.mat-table-container .mat-mdc-footer-cell,.mat-table-container .mat-mdc-cell{min-width:80px;box-sizing:border-box}.mat-table-container .mat-mdc-header-row,.mat-table-container .mat-mdc-footer-row,.mat-table-container .mat-mdc-row{min-width:1920px}.mat-table-container.mat-table-sticky .mat-mdc-table-sticky-border-elem-right{box-shadow:-3px 0 5px #0000001a}.mat-table-container.mat-table-sticky .mat-mdc-table-sticky-border-elem-left{box-shadow:3px 0 5px #0000001a}\n"], dependencies: [{ kind: "ngmodule", type: CdkTableModule }, { kind: "directive", type: i2$3.CdkRowDef, selector: "[cdkRowDef]", inputs: ["cdkRowDefColumns", "cdkRowDefWhen"] }, { kind: "directive", type: i2$3.CdkCellDef, selector: "[cdkCellDef]" }, { kind: "directive", type: i2$3.CdkHeaderCellDef, selector: "[cdkHeaderCellDef]" }, { kind: "directive", type: i2$3.CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["cdkColumnDef", "sticky", "stickyEnd"] }, { kind: "directive", type: i2$3.CdkHeaderRowDef, selector: "[cdkHeaderRowDef]", inputs: ["cdkHeaderRowDef", "cdkHeaderRowDefSticky"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i7.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: 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: i10.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i12.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i12.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i16.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: "directive", type: 
                 //----------------------
                 DataSourceFilterDirective, selector: "[dataSourceFilter]", inputs: ["dataSource", "dataSourceFilter"] }, { kind: "directive", type: DisableControlDirective, selector: "[disableControl]", inputs: ["disableControl"] }, { kind: "component", type: FilterDateComponent, selector: "mat-header-cell[filter-date], [mat-header-cell][filter-date], [filter-date]", inputs: ["field", "debounce", "placeholder"] }, { kind: "component", type: FilterInputComponent, selector: "mat-header-cell[filter-input], [mat-header-cell][filter-input], [filter-input]", inputs: ["field", "operator", "onlyNumber", "debounce", "placeholder"] }, { kind: "component", type: FilterSelectComponent, selector: "mat-header-cell[filter-select], [mat-header-cell][filter-select], [filter-select]", inputs: ["endpoint", "params", "projection", "sortBy", "sorted", "enumFilter", "enum", "enumMetadata", "key", "text", "prefix", "multiple", "options", "filteredOptions", "filterable", "field", "placeholder", "cache"] }, { kind: "component", type: FilterClearComponent, selector: "mat-header-cell[filter-clear], [mat-header-cell][filter-clear], [filter-clear]" }, { kind: "component", type: VdDynamicMenuComponent, selector: "vd-dynamic-menu", inputs: ["items", "data", "index", "context", "contextMenu"] }, { kind: "component", type: VdSelectComponent, selector: "vd-select", inputs: ["triggerCssClass"] }, { kind: "component", type: MsaEnumDisplayComponent, selector: "msa-enum-display", inputs: ["value", "enumType", "metadata", "showIcon", "entity", "context"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.JsonPipe, name: "json" }, { kind: "pipe", type: i1$2.SlicePipe, name: "slice" }, { kind: "pipe", type: i1$2.DatePipe, name: "date" }, { kind: "pipe", type: 
                 //----------------------
@@ -18507,7 +19062,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                             state('expanded', style({ height: AUTO_STYLE })),
                             transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
                         ]),
-                    ], template: "@if (!static) {\r\n    <div class=\"loading-progress\">\r\n        @if (dataSource?.isLoading) {\r\n            <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\r\n        }\r\n    </div>\r\n}\r\n\r\n<!-- #region Data table -->\r\n<div class=\"mat-table-container scrollbar-secondary\" [ngClass]=\"{'mat-table-sticky': sticky}\" #scrollContainer>\r\n    <table mat-table #table [dataSource]=\"dataSource\" [dataSourceFilter]=\"dataSourceFilter\" [ngClass]=\"{'table-fixed': !sticky && !detailsTemplate && !templateRef, 'table-stick': sticky}\" [trackBy]=\"trackBy\" matSort matSortDisableClear [matSortActive]=\"sortActive||'id'\" [matSortDirection]=\"sortDirection\" multiTemplateDataRows>\r\n        @for (column of columns$ | async; track columnsTrackBy($index, column)) {\r\n            <!-- #region Column def -->\r\n            <ng-container [cdkColumnDef]=\"column.name\" [sticky]=\"column.sticky\" [stickyEnd]=\"column.stickyEnd\">\r\n                <ng-template #header [ngTemplateOutlet]=\"header\" let-headerText=\"headerText\" [ngTemplateOutletContext]=\"{headerText: column.header | func:context}\">\r\n                    <th mat-header-cell *cdkHeaderCellDef [mat-sort-header]=\"column.sortBy || column.name\" [hidden]=\"column.hidden\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\" [disabled]=\"column.type == ColumnType.Checkbox || column.disabled\" [ngClass]=\"{'gt-xs': column.display == Grid.Xs, 'gt-sm': column.display == Grid.Sm, 'gt-md': column.display == Grid.Md, 'gt-lg': column.display == Grid.Lg, 'gt-xl': column.display == Grid.Xl, 'gt-xxl': column.display == Grid.Xxl, 'hidden': column.display == Grid.None}\" [arrowPosition]=\"column.arrowBefore?'before':'after'\">\r\n                        @if (column.type == ColumnType.Checkbox) {\r\n                            <mat-checkbox (change)=\"$event ? dataSource.toggleSelect($event, selectAllFilter) : null\" [disabled]=\"!dataSource.paginator?.length\" [checked]=\"dataSource.selectionModel.hasValue() && dataSource.isAllSelected()\" [indeterminate]=\"dataSource.selectionModel.hasValue() && !dataSource.isAllSelected()\"></mat-checkbox>\r\n                        } @if (column.type != ColumnType.Checkbox) {\r\n                            <span [matTooltip]=\"headerText\">{{headerText}}</span>\r\n                        }\r\n                    </th>\r\n                </ng-template>\r\n                <td mat-cell *cdkCellDef=\"let row; let rowIndex = dataIndex\" [matTooltip]=\"column.tooltip?column.tooltip(row, undefined, context):null\" [matTooltipClass]=\"column.tooltipClass??''\" [hidden]=\"column.hidden\" [ngClass]=\"getRowClasses(column, row)\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\">\r\n                    <ng-template #rowVal [ngTemplateOutlet]=\"rowVal\" let-rowValue [ngTemplateOutletContext]=\"{$implicit: column?.content && column?.content(row, undefined, context)}\">\r\n                        @switch (column.type) {\r\n                            <!-- #region Checkbox column -->\r\n                            @case (ColumnType.Checkbox) {\r\n                                <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? dataSource.selectionModel.toggle(row) : null\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" [checked]=\"dataSource.selectionModel.isSelected(row)\"></mat-checkbox>\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region Enum column -->\r\n                            @case (ColumnType.Enum) {\r\n                                <span>\r\n                                    @if (column.enumMetadata) {\r\n                                        @if (column.multiple) {\r\n                                            @for (item of rowValue; track item; let i = $index) {\r\n                                                @if (i < 2) {\r\n                                                    <ng-template let-displayValue=\"displayValue\" [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ displayValue: column.enumMetadata[item].display }\"></ng-template>\r\n                                                }\r\n                                                @if (i === 1 && rowValue?.length > 2) {\r\n                                                    <small [matTooltip]=\"(rowValue | slice:2 | map:column.enumMetadata | map:'display') | join:'\\n'\" matTooltipClass=\"mat-tooltip-multiline\">...</small>\r\n                                                }\r\n                                            }\r\n                                            <ng-template #template let-displayValue=\"displayValue\">\r\n                                                <mat-chip-row disableRipple=\"true\" selectable=\"false\" [matTooltip]=\"displayValue\">\r\n                                                    <span>{{ displayValue }}</span>\r\n                                                </mat-chip-row>\r\n                                            </ng-template>\r\n                                        } @else {\r\n                                            @if (rowValue >= 0) {\r\n                                                <span class=\"na\" [ngStyle]=\"{ color: ((column.enumMetadata[rowValue] || {}).textColor || 'inherit') }\" [innerHtml]=\"(column.enumMetadata[rowValue]||{}).display\"></span>\r\n                                            }\r\n                                        }\r\n                                    } @else {\r\n                                        @if (column.multiple) {\r\n                                            @for (item of rowValue; track item; let i = $index; let last = $last) {\r\n                                                <div>\r\n                                                    @if (i<2) {\r\n                                                        <small>\r\n                                                            <msa-enum-display [value]=\"item\" [enumType]=\"column.enumType\" [metadata]=\"column.enumMetadata\"></msa-enum-display>\r\n                                                        </small>\r\n                                                    } @if (i==1 && rowValue?.length > 2) {\r\n                                                        <small>, ...</small>\r\n                                                    }\r\n                                                </div>\r\n                                            }\r\n                                        } @else {\r\n                                            @if (rowValue >= 0) {\r\n                                                <msa-enum-display [value]=\"rowValue\" [enumType]=\"column.enumType\" [metadata]=\"column.enumMetadata\"></msa-enum-display>\r\n                                            }\r\n                                        }\r\n                                    }\r\n                                </span>\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region Toggle column -->\r\n                            @case (ColumnType.Toggle) {\r\n                                @if (!formArray) {\r\n                                    <mat-slide-toggle [ngModel]=\"row | property:column.name\" (ngModelChange)=\"setNestedProperty(row, column.name, $event);handleModelChange(column, row, undefined);\" (click)=\"$event.stopPropagation();\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" color=\"accent\"></mat-slide-toggle>\r\n                                } @if (formArray) {\r\n                                    <ng-container [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\r\n                                        <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\r\n                                    </ng-container>\r\n                                }\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region Date column -->\r\n                            @case (ColumnType.Date) {\r\n                                <span>{{rowValue | date:column.shortDate?'dd.MM.yyyy':'dd.MM.yyyy HH:mm:ss'}}</span>\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region Text Input column -->\r\n                            @case (ColumnType.TextInput) {\r\n                                @if (!formArray) {\r\n                                    <mat-form-field appearance=\"outline\" layout=\"column\" layout-align=\"center start\" subscriptSizing=\"dynamic\" dense-3 (click)=\"$event.stopPropagation();\">\r\n                                        @if (!formArray) {\r\n                                            <input matInput type=\"{{column.inputType}}\" autocomplete=\"none\" name=\"{{column.name}}{{rowIndex}}\" [ngModel]=\"row | property:column.name\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" [min]=\"column.inputMin?column.inputMin(row, undefined, context):null\" [max]=\"column.inputMax?column.inputMax(row, undefined, context):null\" (ngModelChange)=\"setNestedProperty(row, column.name, $event);(column.change?column.change(row, undefined, context):patch(row, [column.name], $event, column.patchIncludes));\" [ngModelOptions]=\"{updateOn: 'blur'}\" (keydown.enter)=\"handleKeydownEnter($event)\" />\r\n                                        }\r\n                                    </mat-form-field>\r\n                                } @if (formArray) {\r\n                                    <ng-container [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\r\n                                        <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\r\n                                    </ng-container>\r\n                                }\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region VD-Select column -->\r\n                            @case (ColumnType.Select) {\r\n                                @if (!formArray) {\r\n                                    <mat-form-field appearance=\"outline\" layout=\"column\" layout-align=\"center start\" subscriptSizing=\"dynamic\" dense-3 (click)=\"$event.stopPropagation();\">\r\n                                        @if (!formArray) {\r\n                                            <vd-select name=\"{{column.name}}{{rowIndex}}\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"$safeNavigationMigration(column?.enumFilter) | func:row:context\" [options]=\"column.options\" [defaultOption]=\"column.defaultOption??true\" [ngModel]=\"row | property:column.name\" (ngModelChange)=\"setNestedProperty(row, column.name, $event);\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" (change)=\"column.change?column.change(row, undefined, context):patch(row, [column.name], $event.value, column.patchIncludes)\" (keydown.enter)=\"handleKeydownEnter($event)\"></vd-select>\r\n                                        }\r\n                                    </mat-form-field>\r\n                                } @if (formArray) {\r\n                                    <ng-container [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\r\n                                        <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\r\n                                    </ng-container>\r\n                                }\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region Action -->\r\n                            @case (ColumnType.Action) {\r\n                                @if (column.menu) {\r\n                                    @if (menu?.matMenu && !row.locked && hasVisibleRowMenuItems(row, column)) {\r\n                                        <div id=\"menu-{{row.id}}\" style=\"visibility: hidden; position: fixed\" #contextMenuTrigger=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu.matMenu!\"></div>\r\n                                    }\r\n                                    <vd-dynamic-menu [items]=\"[column.menu]\" [data]=\"row\" [context]=\"context\" #menu></vd-dynamic-menu>\r\n                                }\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region Menu -->\r\n                            @case (ColumnType.Menu) {\r\n                                @if (column.menu) {\r\n                                    <vd-dynamic-menu [items]=\"[column.menu]\" [data]=\"row\" [context]=\"context\"></vd-dynamic-menu>\r\n                                }\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region icon -->\r\n                            @case (ColumnType.Icon) {\r\n                                <span layout=\"row\" layout-align=\"start center\">\r\n                                    @if(column && column.icon){\r\n                                        @if ( column.icon.matIcon) {\r\n                                            <mat-icon fontSet=\"{{column.icon.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon.cssClass??'', row)\">{{handleExpression($safeNavigationMigration(column.icon.matIcon)!, row)}}</mat-icon>\r\n                                        }\r\n                                        @if (column.icon.svgIcon) {\r\n                                            <mat-icon fontSet=\"{{column.icon.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon.cssClass??'', row)\" [svgIcon]=\"handleExpression($safeNavigationMigration(column.icon.svgIcon)!, row)!\"></mat-icon>\r\n                                        }\r\n                                        @if (column.icon.fontIcon) {\r\n                                            <mat-icon fontSet=\"{{column.icon.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon.cssClass??'', row)\" [fontIcon]=\"handleExpression($safeNavigationMigration(column.icon.fontIcon)!, row)!\"></mat-icon>\r\n                                        }\r\n                                    }\r\n                                </span>\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region icon button -->\r\n                            @case (ColumnType.IconButton) {\r\n                                <a mat-icon-button (click)=\"$event.stopPropagation();column.iconButton?.event?column.iconButton.event(row, context):null\">\r\n                                    <mat-icon fontSet=\"{{column.iconButton?.iconFontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.iconButton?.iconClass??'', row)\">{{handleExpression(column.iconButton?.icon??'radio_button_checked', row) || 'radio_button_checked'}}</mat-icon>\r\n                                </a>\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region Other column types -->\r\n                            @default {\r\n                                <span [innerHtml]=\"rowValue??''\"></span>\r\n                            }\r\n                            <!-- #endregion -->\r\n                        }\r\n                        <ng-template #recursiveContainer let-columnNameSegments=\"segments\" let-formGroup=\"formGroup\" let-parentFormGroup=\"parentFormGroup\">\r\n                            @if (formGroup) {\r\n                                <ng-container [formGroup]=\"formGroup\">\r\n                                    <!-- If the columnNameSegments array is empty, we're at the leaf node -->\r\n                                    @if (!columnNameSegments.length) {\r\n                                        @switch (column.type) {\r\n                                            <!-- #region Toggle column -->\r\n                                            @case (ColumnType.Toggle) {\r\n                                                <mat-slide-toggle [formControl]=\"formGroup\" (click)=\"$event.stopPropagation();\" (change)=\"column.change?column.change(parentFormGroup.value, parentFormGroup, context):handleModelChange(column, parentFormGroup.value, parentFormGroup)\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" color=\"accent\"></mat-slide-toggle>\r\n                                            }\r\n                                            <!-- #endregion -->\r\n                                            <!-- #region Text Input column -->\r\n                                            @case (ColumnType.TextInput) {\r\n                                                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" dense-3 layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\r\n                                                    <input matInput [formControl]=\"formGroup\" type=\"{{column.inputType}}\" autocomplete=\"none\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" [min]=\"column.inputMin?column.inputMin(parentFormGroup.value, parentFormGroup, context):null\" [max]=\"column.inputMax?column.inputMax(parentFormGroup.value, parentFormGroup, context):null\" (keydown.enter)=\"handleKeydownEnter($event)\" />\r\n                                                </mat-form-field>\r\n                                            }\r\n                                            <!-- #endregion -->\r\n                                            <!-- #region VD-Select column -->\r\n                                            @case (ColumnType.Select) {\r\n                                                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" dense-3 layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\r\n                                                    <vd-select [formControl]=\"formGroup\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"column.enumFilter | func:parentFormGroup.value:context\" [options]=\"column.options\" [defaultOption]=\"column.defaultOption??true\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" (selectionChange)=\"column.change?column.change(parentFormGroup.value, parentFormGroup, context):patch(parentFormGroup.value, [column.name], rowValue, column.patchIncludes)\" (keydown.enter)=\"handleKeydownEnter($event)\"></vd-select>\r\n                                                </mat-form-field>\r\n                                            }\r\n                                            <!-- #endregion -->\r\n                                        }\r\n                                    } @else {\r\n                                        <!-- If not the last segment, create a nested form group -->\r\n                                        <ng-container [formGroupName]=\"columnNameSegments[0]\">\r\n                                            <!-- Recursive call to handle nested segments -->\r\n                                            <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: columnNameSegments.slice(1), parentFormGroup:formGroup, formGroup: formGroup.get(columnNameSegments[0])}\"></ng-container>\r\n                                        </ng-container>\r\n                                    }\r\n                                </ng-container>\r\n                            }\r\n                        </ng-template>\r\n                    </ng-template>\r\n                </td>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n        }\r\n\r\n        <!-- #region Filter row -->\r\n        @if (dataSource && filterable) {\r\n            @for (column of columns$ | async; track column) {\r\n                <ng-container cdkColumnDef=\"filter.{{column.filter || column.name}}\" [sticky]=\"column.sticky\" [stickyEnd]=\"column.stickyEnd\">\r\n                    <th mat-header-cell *cdkHeaderCellDef [hidden]=\"column.hidden\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\" [ngClass]=\"{'gt-xs': column.display == Grid.Xs, 'gt-sm': column.display == Grid.Sm, 'gt-md': column.display == Grid.Md, 'gt-lg': column.display == Grid.Lg, 'gt-xl': column.display == Grid.Xl, 'gt-xxl': column.display == Grid.Xxl, 'hidden': column.display == Grid.None}\">\r\n                        <!-- #region Select filter -->\r\n                        @if(column.endpoint || column.enumType || column.options){\r\n                            <span filter-select [endpoint]=\"column.endpoint\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"column.enumFilter | func:{}:context\" [options]=\"column.options\" [text]=\"column.filterOptionText || 'name'\"></span>\r\n                        }\r\n                        <!-- #region Text filter -->\r\n                        @else if(column.type == ColumnType.Text || column.type == ColumnType.TextInput || column.type == ColumnType.Number) {\r\n                            <span filter-input [onlyNumber]=\"column.filterInputNumber??false\" [matTooltip]=\"column.filterTooltip ? column.filterTooltip(context):null\" [matTooltipClass]=\"column.filterTooltipClass??''\" [operator]=\"!useFilterOperator ? undefined : column.filterOperator\"></span>\r\n                        }\r\n                        <!-- #endregion -->\r\n                        <!-- #region Date filter -->\r\n                        @else if (column.type == ColumnType.Date) {\r\n                            <span filter-date></span>\r\n                        }\r\n                        <!-- #endregion -->\r\n                        <!-- #region Action filter (clear) -->\r\n                        @else if (column.type == ColumnType.Action) {\r\n                            <span filter-clear></span>\r\n                        }\r\n                        <!-- #endregion -->\r\n                    </th>\r\n                </ng-container>\r\n            }\r\n        }\r\n        <!-- #endregion -->\r\n\r\n        <!-- #region Details column -->\r\n        <ng-container cdkColumnDef=\"expandedDetail\">\r\n            <td mat-cell *matCellDef=\"let row; let index = index\" [attr.colspan]=\"(displayedColumns$ | async)?.length\">\r\n                <div class=\"row-detail\" [@detailExpand]=\"row == expandedRow ? 'expanded' : 'collapsed'\" #detailsTemplate>\r\n                    @if (templateRef && row === expandedRow) {\r\n                        <ng-container *ngTemplateOutlet=\"templateRef; context:{row: row, index: index, context: context}\"></ng-container>\r\n                    }\r\n                </div>\r\n            </td>\r\n        </ng-container>\r\n        <!-- #endregion -->\r\n\r\n        <!-- #region Filter header -->\r\n        @if (filterable) {\r\n            <tr mat-header-row *cdkHeaderRowDef=\"displayedFilterColumns$ | async\"></tr>\r\n        }\r\n        <!-- #endregion -->\r\n\r\n        <tr mat-header-row *cdkHeaderRowDef=\"displayedColumns$ | async; sticky: stickyFilter\"></tr>\r\n        <tr mat-row *cdkRowDef=\"let row; columns: displayedColumns$ | async; let index = dataIndex\" [ngClass]=\"rowNgClass?rowNgClass(row, context):null\" [class.expanded-row]=\"expandedRow === row\" (click)=\"handleRowClick(index, row)\" (contextmenu)=\"handleRowRightClick($event, row)\"></tr>\r\n\r\n        <!-- #region Detrails row -->\r\n        @if (detailsTemplate || templateRef) {\r\n            <tr mat-row *cdkRowDef=\"let row; columns: ['expandedDetail']\" class=\"detail-row\" [ngClass]=\"rowNgClass?rowNgClass(row, context):null\"></tr>\r\n        }\r\n        <!-- #endregion -->\r\n    </table>\r\n\r\n    <!-- #region Modern No Results Message -->\r\n    @if (dataSource?.filteredData?.length <= 0 && dataSource?.total <= 0) {\r\n        <div class=\"no-results-overlay\">\r\n            <mat-icon class=\"no-results-icon\">search_off</mat-icon>\r\n            <div class=\"no-results-text mat-body-1\">\r\n                <h3 i18n=\"@@noResultsFound\">No results found</h3>\r\n                <p i18n=\"@@tryAdjustFilters\">\r\n                    Try adjusting your filters or search criteria.\r\n                </p>\r\n            </div>\r\n        </div>\r\n    }\r\n    <!-- #endregion -->\r\n</div>\r\n<!-- #endregion -->\r\n\r\n<!-- #region Debug value -->\r\n@if (debugValue) {\r\n    <code>\r\n  <pre>{{formValue | json}}</pre>\r\n</code>\r\n}\r\n<!-- #endregion -->\r\n\r\n<div class=\"table-footer\" layout=\"row\">\r\n    <ng-content select=\"[table-footer]\"></ng-content>\r\n    <span flex></span>\r\n    @if (paginable) {\r\n        <mat-paginator [pageSize]=\"pageSize\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\"></mat-paginator>\r\n    }\r\n</div>", styles: ["::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-form-field .mat-form-field-wrapper{width:100%}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip{height:24px;margin-top:2px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip .mdc-evolution-chip__action--primary{padding-left:9px;padding-right:9px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip:last-child{margin-bottom:2px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip *{font-size:.8rem}@media(max-width:389px){::ng-deep .mat-mdc-table [gt-xs],::ng-deep .mat-mdc-table .gt-xs{display:none}::ng-deep .mat-mdc-table [gt-sm],::ng-deep .mat-mdc-table .gt-sm{display:none}::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:599px){::ng-deep .mat-mdc-table [gt-sm],::ng-deep .mat-mdc-table .gt-sm{display:none}::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:959px){::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:1279px){::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:1919px){::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:1979px){::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}.mat-table-container{width:100%;max-width:100%;overflow:auto}.mat-table-container .mat-mdc-header-cell,.mat-table-container .mat-mdc-footer-cell,.mat-table-container .mat-mdc-cell{min-width:80px;box-sizing:border-box}.mat-table-container .mat-mdc-header-row,.mat-table-container .mat-mdc-footer-row,.mat-table-container .mat-mdc-row{min-width:1920px}.mat-table-container.mat-table-sticky .mat-mdc-table-sticky-border-elem-right{box-shadow:-3px 0 5px #0000001a}.mat-table-container.mat-table-sticky .mat-mdc-table-sticky-border-elem-left{box-shadow:3px 0 5px #0000001a}\n"] }]
+                    ], template: "@if (!static) {\r\n    <div class=\"loading-progress\">\r\n        @if (dataSource?.isLoading) {\r\n            <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\r\n        }\r\n    </div>\r\n}\r\n<!-- #region Data table -->\r\n<div class=\"mat-table-container scrollbar-secondary\" [ngClass]=\"{'mat-table-sticky': sticky}\" #scrollContainer>\r\n    <table mat-table #table [dataSource]=\"dataSource\" [dataSourceFilter]=\"dataSourceFilter\" [ngClass]=\"{'table-fixed': !sticky && !detailsTemplate && !templateRef, 'table-stick': sticky}\" [trackBy]=\"trackBy\" matSort matSortDisableClear [matSortActive]=\"sortActive||'id'\" [matSortDirection]=\"sortDirection\" multiTemplateDataRows>\r\n        @for (column of columns$ | async; track columnsTrackBy($index, column)) {\r\n            <!-- #region Column def -->\r\n            <ng-container [cdkColumnDef]=\"column.name\" [sticky]=\"column.sticky\" [stickyEnd]=\"column.stickyEnd\">\r\n                <ng-template #header [ngTemplateOutlet]=\"header\" let-headerText=\"headerText\" [ngTemplateOutletContext]=\"{headerText: column.header | func:context}\">\r\n                    <th mat-header-cell *cdkHeaderCellDef [mat-sort-header]=\"column.sortBy || column.name\" [hidden]=\"column.hidden\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\" [disabled]=\"column.type == ColumnType.Checkbox || column.disabled\" [ngClass]=\"column.displayNgClass\" [arrowPosition]=\"column.arrowBefore?'before':'after'\">\r\n                        @if (column.type == ColumnType.Checkbox) {\r\n                            <mat-checkbox (change)=\"$event ? dataSource.toggleSelect($event, selectAllFilter) : null\" [disabled]=\"!dataSource.paginator?.length\" [checked]=\"dataSource.selectionModel.hasValue() && dataSource.isAllSelected()\" [indeterminate]=\"dataSource.selectionModel.hasValue() && !dataSource.isAllSelected()\"></mat-checkbox>\r\n                        } @if (column.type != ColumnType.Checkbox) {\r\n                            <span [matTooltip]=\"headerText\">{{headerText}}</span>\r\n                        }\r\n                    </th>\r\n                </ng-template>\r\n                <td mat-cell *cdkCellDef=\"let row; let rowIndex = dataIndex\" [matTooltip]=\"column.tooltip?column.tooltip(row, undefined, context):null\" [matTooltipClass]=\"column.tooltipClass??''\" [hidden]=\"column.hidden\" [ngClass]=\"getRowClasses(column, row)\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\">\r\n                    <ng-template #rowVal [ngTemplateOutlet]=\"rowVal\" let-rowValue [ngTemplateOutletContext]=\"{$implicit: column?.content && column?.content(row, undefined, context)}\">\r\n                        @switch (column.type) {\r\n                            <!-- #region Checkbox column -->\r\n                            @case (ColumnType.Checkbox) {\r\n                                <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? dataSource.selectionModel.toggle(row) : null\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" [checked]=\"dataSource.selectionModel.isSelected(row)\"></mat-checkbox>\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region Enum column -->\r\n                            @case (ColumnType.Enum) {\r\n                                <span>\r\n                                    @if (column.enumMetadata) {\r\n                                        @if (column.multiple) {\r\n                                            @for (item of rowValue; track item; let i = $index) {\r\n                                                @if (i < 2) {\r\n                                                    <ng-template let-displayValue=\"displayValue\" [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ displayValue: column.enumMetadata[item].display }\"></ng-template>\r\n                                                }\r\n                                                @if (i === 1 && rowValue?.length > 2) {\r\n                                                    <small [matTooltip]=\"(rowValue | slice:2 | map:column.enumMetadata | map:'display') | join:'\\n'\" matTooltipClass=\"mat-tooltip-multiline\">...</small>\r\n                                                }\r\n                                            }\r\n                                            <ng-template #template let-displayValue=\"displayValue\">\r\n                                                <mat-chip-row disableRipple=\"true\" selectable=\"false\" [matTooltip]=\"displayValue\">\r\n                                                    <span>{{ displayValue }}</span>\r\n                                                </mat-chip-row>\r\n                                            </ng-template>\r\n                                        } @else {\r\n                                            @if (rowValue >= 0) {\r\n                                                <span class=\"na\" [ngStyle]=\"{ color: ((column.enumMetadata[rowValue] || {}).textColor || 'inherit') }\" [innerHtml]=\"(column.enumMetadata[rowValue]||{}).display\"></span>\r\n                                            }\r\n                                        }\r\n                                    } @else {\r\n                                        @if (column.multiple) {\r\n                                            @for (item of rowValue; track item; let i = $index; let last = $last) {\r\n                                                <div>\r\n                                                    @if (i<2) {\r\n                                                        <small>\r\n                                                            <msa-enum-display [value]=\"item\" [enumType]=\"column.enumType\" [metadata]=\"column.enumMetadata\"></msa-enum-display>\r\n                                                        </small>\r\n                                                    } @if (i==1 && rowValue?.length > 2) {\r\n                                                        <small>, ...</small>\r\n                                                    }\r\n                                                </div>\r\n                                            }\r\n                                        } @else {\r\n                                            @if (rowValue >= 0) {\r\n                                                <msa-enum-display [value]=\"rowValue\" [enumType]=\"column.enumType\" [metadata]=\"column.enumMetadata\"></msa-enum-display>\r\n                                            }\r\n                                        }\r\n                                    }\r\n                                </span>\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region Toggle column -->\r\n                            @case (ColumnType.Toggle) {\r\n                                @if (!formArray) {\r\n                                    <mat-slide-toggle [ngModel]=\"row | property:column.name\" (ngModelChange)=\"setNestedProperty(row, column.name, $event);handleModelChange(column, row, undefined);\" (click)=\"$event.stopPropagation();\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" color=\"accent\"></mat-slide-toggle>\r\n                                } @if (formArray) {\r\n                                    <ng-container [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\r\n                                        <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\r\n                                    </ng-container>\r\n                                }\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region Date column -->\r\n                            @case (ColumnType.Date) {\r\n                                <span>{{rowValue | date:column.shortDate?'dd.MM.yyyy':'dd.MM.yyyy HH:mm:ss'}}</span>\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region Text Input column -->\r\n                            @case (ColumnType.TextInput) {\r\n                                @if (!formArray) {\r\n                                    <mat-form-field appearance=\"outline\" layout=\"column\" layout-align=\"center start\" subscriptSizing=\"dynamic\" dense-3 (click)=\"$event.stopPropagation();\">\r\n                                        @if (!formArray) {\r\n                                            <input matInput type=\"{{column.inputType}}\" autocomplete=\"none\" name=\"{{column.name}}{{rowIndex}}\" [ngModel]=\"row | property:column.name\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" [min]=\"column.inputMin?column.inputMin(row, undefined, context):null\" [max]=\"column.inputMax?column.inputMax(row, undefined, context):null\" (ngModelChange)=\"setNestedProperty(row, column.name, $event);(column.change?column.change(row, undefined, context):patch(row, [column.name], $event, column.patchIncludes));\" [ngModelOptions]=\"{updateOn: 'blur'}\" (keydown.enter)=\"handleKeydownEnter($event)\" />\r\n                                        }\r\n                                    </mat-form-field>\r\n                                } @if (formArray) {\r\n                                    <ng-container [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\r\n                                        <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\r\n                                    </ng-container>\r\n                                }\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region VD-Select column -->\r\n                            @case (ColumnType.Select) {\r\n                                @if (!formArray) {\r\n                                    <mat-form-field appearance=\"outline\" layout=\"column\" layout-align=\"center start\" subscriptSizing=\"dynamic\" dense-3 (click)=\"$event.stopPropagation();\">\r\n                                        @if (!formArray) {\r\n                                            <vd-select name=\"{{column.name}}{{rowIndex}}\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"$safeNavigationMigration(column?.enumFilter) | func:row:context\" [options]=\"column.options\" [defaultOption]=\"column.defaultOption??true\" [ngModel]=\"row | property:column.name\" (ngModelChange)=\"setNestedProperty(row, column.name, $event);\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" (change)=\"column.change?column.change(row, undefined, context):patch(row, [column.name], $event.value, column.patchIncludes)\" (keydown.enter)=\"handleKeydownEnter($event)\"></vd-select>\r\n                                        }\r\n                                    </mat-form-field>\r\n                                } @if (formArray) {\r\n                                    <ng-container [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\r\n                                        <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\r\n                                    </ng-container>\r\n                                }\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region Action -->\r\n                            @case (ColumnType.Action) {\r\n                                @if (column.menu) {\r\n                                    @if (menu?.matMenu && !row.locked && hasVisibleRowMenuItems(row, column)) {\r\n                                        <div id=\"menu-{{row.id}}\" style=\"visibility: hidden; position: fixed\" #contextMenuTrigger=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu.matMenu!\"></div>\r\n                                    }\r\n                                    <vd-dynamic-menu [items]=\"[column.menu]\" [data]=\"row\" [context]=\"context\" #menu></vd-dynamic-menu>\r\n                                }\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region Menu -->\r\n                            @case (ColumnType.Menu) {\r\n                                @if (column.menu) {\r\n                                    <vd-dynamic-menu [items]=\"[column.menu]\" [data]=\"row\" [context]=\"context\"></vd-dynamic-menu>\r\n                                }\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region icon -->\r\n                            @case (ColumnType.Icon) {\r\n                                <span layout=\"row\" layout-align=\"start center\">\r\n                                    @if(column && column.icon){\r\n                                        @if ( column.icon.matIcon) {\r\n                                            <mat-icon fontSet=\"{{column.icon.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon.cssClass??'', row)\">{{handleExpression($safeNavigationMigration(column.icon.matIcon)!, row)}}</mat-icon>\r\n                                        }\r\n                                        @if (column.icon.svgIcon) {\r\n                                            <mat-icon fontSet=\"{{column.icon.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon.cssClass??'', row)\" [svgIcon]=\"handleExpression($safeNavigationMigration(column.icon.svgIcon)!, row)!\"></mat-icon>\r\n                                        }\r\n                                        @if (column.icon.fontIcon) {\r\n                                            <mat-icon fontSet=\"{{column.icon.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon.cssClass??'', row)\" [fontIcon]=\"handleExpression($safeNavigationMigration(column.icon.fontIcon)!, row)!\"></mat-icon>\r\n                                        }\r\n                                    }\r\n                                </span>\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region icon button -->\r\n                            @case (ColumnType.IconButton) {\r\n                                <a mat-icon-button (click)=\"$event.stopPropagation();column.iconButton?.event?column.iconButton.event(row, context):null\">\r\n                                    <mat-icon fontSet=\"{{column.iconButton?.iconFontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.iconButton?.iconClass??'', row)\">{{handleExpression(column.iconButton?.icon??'radio_button_checked', row) || 'radio_button_checked'}}</mat-icon>\r\n                                </a>\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region Other column types -->\r\n                            @default {\r\n                                <span [innerHtml]=\"rowValue??''\"></span>\r\n                            }\r\n                            <!-- #endregion -->\r\n                        }\r\n                        <ng-template #recursiveContainer let-columnNameSegments=\"segments\" let-formGroup=\"formGroup\" let-parentFormGroup=\"parentFormGroup\">\r\n                            @if (formGroup) {\r\n                                <ng-container [formGroup]=\"formGroup\">\r\n                                    <!-- If the columnNameSegments array is empty, we're at the leaf node -->\r\n                                    @if (!columnNameSegments.length) {\r\n                                        @switch (column.type) {\r\n                                            <!-- #region Toggle column -->\r\n                                            @case (ColumnType.Toggle) {\r\n                                                <mat-slide-toggle [formControl]=\"formGroup\" (click)=\"$event.stopPropagation();\" (change)=\"column.change?column.change(parentFormGroup.value, parentFormGroup, context):handleModelChange(column, parentFormGroup.value, parentFormGroup)\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" color=\"accent\"></mat-slide-toggle>\r\n                                            }\r\n                                            <!-- #endregion -->\r\n                                            <!-- #region Text Input column -->\r\n                                            @case (ColumnType.TextInput) {\r\n                                                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" dense-3 layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\r\n                                                    <input matInput [formControl]=\"formGroup\" type=\"{{column.inputType}}\" autocomplete=\"none\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" [min]=\"column.inputMin?column.inputMin(parentFormGroup.value, parentFormGroup, context):null\" [max]=\"column.inputMax?column.inputMax(parentFormGroup.value, parentFormGroup, context):null\" (keydown.enter)=\"handleKeydownEnter($event)\" />\r\n                                                </mat-form-field>\r\n                                            }\r\n                                            <!-- #endregion -->\r\n                                            <!-- #region VD-Select column -->\r\n                                            @case (ColumnType.Select) {\r\n                                                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" dense-3 layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\r\n                                                    <vd-select [formControl]=\"formGroup\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"column.enumFilter | func:parentFormGroup.value:context\" [options]=\"column.options\" [defaultOption]=\"column.defaultOption??true\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" (selectionChange)=\"column.change?column.change(parentFormGroup.value, parentFormGroup, context):patch(parentFormGroup.value, [column.name], rowValue, column.patchIncludes)\" (keydown.enter)=\"handleKeydownEnter($event)\"></vd-select>\r\n                                                </mat-form-field>\r\n                                            }\r\n                                            <!-- #endregion -->\r\n                                        }\r\n                                    } @else {\r\n                                        <!-- If not the last segment, create a nested form group -->\r\n                                        <ng-container [formGroupName]=\"columnNameSegments[0]\">\r\n                                            <!-- Recursive call to handle nested segments -->\r\n                                            <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: columnNameSegments.slice(1), parentFormGroup:formGroup, formGroup: formGroup.get(columnNameSegments[0])}\"></ng-container>\r\n                                        </ng-container>\r\n                                    }\r\n                                </ng-container>\r\n                            }\r\n                        </ng-template>\r\n                    </ng-template>\r\n                </td>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n        }\r\n        <!-- #region Filter row -->\r\n        @if (dataSource && filterable) {\r\n            @for (column of columns$ | async; track column) {\r\n                <ng-container cdkColumnDef=\"filter.{{column.filter || column.name}}\" [sticky]=\"column.sticky\" [stickyEnd]=\"column.stickyEnd\">\r\n                    <th mat-header-cell *cdkHeaderCellDef [hidden]=\"column.hidden\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\" [ngClass]=\"column.displayNgClass\">\r\n                        <!-- #region Select filter -->\r\n                        @if(column.endpoint || column.enumType || column.options){\r\n                            <span filter-select [endpoint]=\"column.endpoint\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"column.enumFilter | func:{}:context\" [options]=\"column.options\" [text]=\"column.filterOptionText || 'name'\"></span>\r\n                        }\r\n                        <!-- #region Text filter -->\r\n                        @else if(column.type == ColumnType.Text || column.type == ColumnType.TextInput || column.type == ColumnType.Number) {\r\n                            <span filter-input [onlyNumber]=\"column.filterInputNumber??false\" [matTooltip]=\"column.filterTooltip ? column.filterTooltip(context):null\" [matTooltipClass]=\"column.filterTooltipClass??''\" [operator]=\"!useFilterOperator ? undefined : column.filterOperator\"></span>\r\n                        }\r\n                        <!-- #endregion -->\r\n                        <!-- #region Date filter -->\r\n                        @else if (column.type == ColumnType.Date) {\r\n                            <span filter-date></span>\r\n                        }\r\n                        <!-- #endregion -->\r\n                        <!-- #region Action filter (clear) -->\r\n                        @else if (column.type == ColumnType.Action) {\r\n                            <span filter-clear></span>\r\n                        }\r\n                        <!-- #endregion -->\r\n                    </th>\r\n                </ng-container>\r\n            }\r\n        }\r\n        <!-- #endregion -->\r\n        <!-- #region Details column -->\r\n        <ng-container cdkColumnDef=\"expandedDetail\">\r\n            <td mat-cell *matCellDef=\"let row; let index = index\" [attr.colspan]=\"(displayedColumns$ | async)?.length\">\r\n                <div class=\"row-detail\" [@detailExpand]=\"row == expandedRow ? 'expanded' : 'collapsed'\" #detailsTemplate>\r\n                    @if (templateRef && row === expandedRow) {\r\n                        <ng-container *ngTemplateOutlet=\"templateRef; context:{row: row, index: index, context: context}\"></ng-container>\r\n                    }\r\n                </div>\r\n            </td>\r\n        </ng-container>\r\n        <!-- #endregion -->\r\n        <!-- #region Filter header -->\r\n        @if (filterable) {\r\n            <tr mat-header-row *cdkHeaderRowDef=\"displayedFilterColumns$ | async\"></tr>\r\n        }\r\n        <!-- #endregion -->\r\n        <tr mat-header-row *cdkHeaderRowDef=\"displayedColumns$ | async; sticky: stickyFilter\"></tr>\r\n        <tr mat-row *cdkRowDef=\"let row; columns: displayedColumns$ | async; let index = dataIndex\" [ngClass]=\"rowNgClass?rowNgClass(row, context):null\" [class.expanded-row]=\"expandedRow === row\" (click)=\"handleRowClick(index, row)\" (contextmenu)=\"handleRowRightClick($event, row)\"></tr>\r\n        <!-- #region Detrails row -->\r\n        @if (detailsTemplate || templateRef) {\r\n            <tr mat-row *cdkRowDef=\"let row; columns: ['expandedDetail']\" class=\"detail-row\" [ngClass]=\"rowNgClass?rowNgClass(row, context):null\"></tr>\r\n        }\r\n        <!-- #endregion -->\r\n    </table>\r\n    <!-- #region Modern No Results Message -->\r\n    @if (dataSource?.filteredData?.length <= 0 && dataSource?.total <= 0) {\r\n        <div class=\"no-results-overlay\">\r\n            <mat-icon class=\"no-results-icon\">search_off</mat-icon>\r\n            <div class=\"no-results-text mat-body-1\">\r\n                <h3 i18n=\"@@noResultsFound\">No results found</h3>\r\n                <p i18n=\"@@tryAdjustFilters\"> Try adjusting your filters or search criteria. </p>\r\n            </div>\r\n        </div>\r\n    }\r\n    <!-- #endregion -->\r\n</div>\r\n<!-- #endregion -->\r\n<!-- #region Debug value -->\r\n@if (debugValue) {\r\n    <code>\r\n  <pre>{{formValue | json}}</pre>\r\n</code>\r\n}\r\n<!-- #endregion -->\r\n<div class=\"table-footer\" layout=\"row\">\r\n    <ng-content select=\"[table-footer]\"></ng-content>\r\n    <span flex></span>\r\n    @if (paginable) {\r\n        <mat-paginator [pageSize]=\"pageSize\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\"></mat-paginator>\r\n    }\r\n</div>", styles: ["::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-form-field .mat-form-field-wrapper{width:100%}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip{height:24px;margin-top:2px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip .mdc-evolution-chip__action--primary{padding-left:9px;padding-right:9px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip:last-child{margin-bottom:2px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip *{font-size:.8rem}@media(max-width:389px){::ng-deep .mat-mdc-table [gt-xs],::ng-deep .mat-mdc-table .gt-xs{display:none}::ng-deep .mat-mdc-table [gt-sm],::ng-deep .mat-mdc-table .gt-sm{display:none}::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:599px){::ng-deep .mat-mdc-table [gt-sm],::ng-deep .mat-mdc-table .gt-sm{display:none}::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:959px){::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:1279px){::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:1919px){::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:1979px){::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}.mat-table-container{width:100%;max-width:100%;overflow:auto}.mat-table-container .mat-mdc-header-cell,.mat-table-container .mat-mdc-footer-cell,.mat-table-container .mat-mdc-cell{min-width:80px;box-sizing:border-box}.mat-table-container .mat-mdc-header-row,.mat-table-container .mat-mdc-footer-row,.mat-table-container .mat-mdc-row{min-width:1920px}.mat-table-container.mat-table-sticky .mat-mdc-table-sticky-border-elem-right{box-shadow:-3px 0 5px #0000001a}.mat-table-container.mat-table-sticky .mat-mdc-table-sticky-border-elem-left{box-shadow:3px 0 5px #0000001a}\n"] }]
         }], ctorParameters: () => [{ type: DynamicBuilder }, { type: i0.ChangeDetectorRef }], propDecorators: { table: [{
                 type: ViewChild,
                 args: ['table']
@@ -18664,7 +19219,7 @@ __decorate([
         defaultOption: false
     }),
     Display($localize `:@@display:Display`),
-    __metadata("design:type", Number)
+    __metadata("design:type", Object)
 ], TableColumnConfig.prototype, "display", void 0);
 __decorate([
     Column({
@@ -18835,7 +19390,9 @@ class VdDynamicTableConfigDialogComponent extends BaseComponent {
             this.configForm.controls["sticky"].valueChanges.subscribe(value => genericList.dynamicTable.sticky = value);
         }
         /* Filter columns that are configurable from the provided dynamic table configuration */
-        this.columns = genericList?.dynamicTable?.columns?.filter((x) => x.configurable);
+        this.columns = genericList?.dynamicTable?.columns
+            ?.filter((x) => x.configurable)
+            ?.filter((x) => x.columnSets?.some(cs => genericList?.dynamicTable?.columnSets?.includes(cs)));
     }
     /**
      * Saves the current column configuration and closes the dialog.
@@ -19151,6 +19708,15 @@ class GenericListComponent extends BaseComponent {
      * @type {string}
      */
     configsKey = '';
+    /**
+     * @property configsKeySuffix
+     * @description Optional suffix appended to the persisted table configuration key.
+     *              Subclasses can override this getter to isolate configurations.
+     * @type {string | undefined}
+     */
+    get configsKeySuffix() {
+        return undefined;
+    }
     /**
      * Constructor for the table component.
      * @param service The service used for managing table data.
@@ -19170,9 +19736,16 @@ class GenericListComponent extends BaseComponent {
     ngOnInit() {
         super.ngOnInit();
         /* Assemble the config key */
-        this.configsKey = [this.projectName, 'list-config.v2', window.btoa(this.currentBaseRoute ?? ''), this.menu?.title].join('.');
+        this.configsKey = [
+            this.projectName,
+            'list-config.v2',
+            window.btoa(this.currentBaseRoute ?? ''),
+            this.menu?.title,
+            this.configsKeySuffix
+        ].filter(x => x !== null && x !== undefined && x !== '').join('.');
         /* Load list configs */
         this.tableConfig = AppStorage.getObjectEncoded(this.configsKey, new TableConfig());
+        /* Set table width from config */
         this.sticky = this.tableConfig.sticky ?? false;
         /* Set back button from route params */
         this.backButton = this.route?.snapshot?.paramMap?.get('backButton') == 'true';
@@ -19530,17 +20103,18 @@ class GenericListComponent extends BaseComponent {
         });
     }
     /**
-     * Downloads a document
-     * @param entity
+     * Downloads a file for the specified entity and path.
+     * @param entity The entity to download
+     * @param path The path to download
      */
     download(entity, path = 'download') {
-        this.service.download(`${path}/${entity.id}`).subscribe(x => {
+        this.service.download(`${path}/${entity.id}`, {}, { 'Show-Message': 'Yes' }).subscribe(x => {
             saveAs(new Blob([x.data], {}), x.filename);
         });
     }
     /**
-     * Duplicates a record
-     * @param entity
+     * Duplicates an entity by calling the duplicate method of the service and then reloads the list.
+     * @param entity The entity to duplicate
      */
     duplicate(entity) {
         this.service.duplicate(entity.id).subscribe(_ => this.loadList());
@@ -19577,7 +20151,7 @@ class GenericListComponent extends BaseComponent {
                 endpoint: this.service.endpoint,
                 formData: {
                     fileName: this.exportFileName ?? this.subtitle,
-                    projection: this.projection,
+                    projection: parseProjectionArray(this.projection),
                     page: this.dataSource?.pageIndex + 1,
                     pageSize: this.paginator?.pageSize,
                     sortBy: this.sort?.active,
@@ -21904,7 +22478,7 @@ class VdChipsComponent extends AbstractMatFormField {
     get dynamicTable() { return this._dynamicTable; }
     set dynamicTable(dynamicTable) {
         this._dynamicTable = dynamicTable;
-        if (this._dynamicTable) {
+        if (this._dynamicTable && this.dataSource) {
             this.dataSource.sort = this._dynamicTable.matSort;
         }
     }
@@ -21945,6 +22519,10 @@ class VdChipsComponent extends AbstractMatFormField {
      * Subscription for the data source observable.
      */
     dataSourceSubscription;
+    /**
+     * Subscription for the data source loaded event.
+     */
+    onDataLoadedSubscription;
     /**
      * Form control for the autocomplete chip list.
      */
@@ -22026,10 +22604,7 @@ class VdChipsComponent extends AbstractMatFormField {
      * Indicates whether the component is disabled.
      */
     get disabled() {
-        if (this._readonly) {
-            return true;
-        }
-        return super.disabled;
+        return super.disabled || (this.readonly && !this._value);
     }
     /**
      * Indicates if pagination is enabled.
@@ -22262,19 +22837,55 @@ class VdChipsComponent extends AbstractMatFormField {
     connect() {
         /* Set the dropdown to open */
         this.opened = true;
-        /* Configure field filters for the data source */
-        this.dataSource.fieldFilters = this.getQueryParams();
-        /* Manually connect the data source for 'mat-option' triggers */
-        if (!this.classType && !this.dataSource?.isConnected) {
-            this.dataSourceSubscription?.unsubscribe();
-            this.dataSourceSubscription = this.dataSource?.connect().subscribe();
+        this.loading = true;
+        /* Wait a bit before preparing query params and loading data */
+        setTimeout(() => {
+            /* Configure field filters for the data source */
+            this.dataSource.fieldFilters = this.getQueryParams();
+            /* Force opening panel when data is actually loaded */
+            if (!this.onDataLoadedSubscription && this.dataSource) {
+                this.onDataLoadedSubscription = this.dataSource.onDataLoaded
+                    .pipe(skip(1))
+                    .subscribe(() => {
+                    this.loading = false;
+                    queueMicrotask(() => this.autocompleteTrigger?.openPanel());
+                    this.changeDetectorRef.detectChanges();
+                });
+            }
+            /* Manually connect the data source for 'mat-option' triggers */
+            if (!this.classType && !this.dataSource?.isConnected) {
+                this.dataSourceSubscription?.unsubscribe();
+                this.dataSourceSubscription = this.dataSource?.connect().subscribe(() => {
+                    this.loading = false;
+                    this.changeDetectorRef.detectChanges();
+                });
+            }
+            /* Reload the data source if it is already connected */
+            else if (this.dataSource?.isConnected) {
+                this.dataSource?.reload();
+            }
+            /* Trigger change detection */
+            this.changeDetectorRef.detectChanges();
+        }, 100);
+        /* Open panel after the current microtask to let binding updates settle */
+        queueMicrotask(() => this.autocompleteTrigger?.openPanel());
+    }
+    /**
+     * @description Reopens the autocomplete panel when the input is clicked while already focused.
+     * @returns {void}
+     */
+    reopenPanel() {
+        /* Prevent reopening when the control is not interactive */
+        if (this.readonly || this.disabled) {
+            return;
         }
-        /* Reload the data source if it is already connected */
-        else if (this.dataSource?.isConnected) {
-            this.dataSource?.reload();
+        /* Initialize and connect once when the panel has not been opened yet */
+        if (!this.opened || !this.dataSource?.isConnected) {
+            this.connect();
+            return;
         }
-        /* Trigger change detection */
-        this.changeDetectorRef.detectChanges();
+        /* Reopen panel on next microtask so click/focus processing can complete first */
+        queueMicrotask(() => this.autocompleteTrigger?.openPanel());
     }
     /**
      * Sets focus on the filter input element.
@@ -22482,6 +23093,7 @@ class VdChipsComponent extends AbstractMatFormField {
     ngOnDestroy() {
         super.ngOnDestroy();
         this.dataSourceSubscription?.unsubscribe();
+        this.onDataLoadedSubscription?.unsubscribe();
     }
     /**
      * Log to console
@@ -22498,7 +23110,7 @@ class VdChipsComponent extends AbstractMatFormField {
                 provide: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS,
                 useValue: { overlayPanelClass: 'vd-chips-autocomplete' }
             }
-        ], queries: [{ propertyName: "chipTemplate", first: true, predicate: VdChipDirective, descendants: true }, { propertyName: "autocompleteOptionTemplate", first: true, predicate: VdAutocompleteOptionDirective, descendants: true }], viewQueries: [{ propertyName: "dynamicTable", first: true, predicate: VdDynamicTableComponent, descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }, { propertyName: "autocomplete", first: true, predicate: MatAutocomplete, descendants: true }, { propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-chip-grid #chipList [required]=\"required\" [disabled]=\"readonly\">\r\n    <!-- #region Chips -->\r\n    @for (chip of chips; track chip; let first = $first; let index = $index) {\r\n        <mat-chip-row [removable]=\"!readonly\" (removed)=\"handleRemovedEvent()\" disableRipple>\r\n            <span class=\"vd-chip-content\">\r\n                @if (!chipTemplate?.templateRef) {\r\n                    <span>\r\n                        @if (!autocompleteOptionTemplate?.templateRef) {\r\n                            <span>{{ chip }}</span>\r\n                        }\r\n                        @if (autocompleteOptionTemplate && autocompleteOptionTemplate.templateRef) {\r\n                            <ng-template [ngTemplateOutlet]=\"autocompleteOptionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: chip }\"></ng-template>\r\n                        }\r\n                    </span>\r\n                }\r\n                @if (chipTemplate && chipTemplate.templateRef) {\r\n                    <ng-template [ngTemplateOutlet]=\"chipTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ chip: chip }\"></ng-template>\r\n                }\r\n            </span>\r\n            @for (button of suffixButtons; track button; let first = $first) {\r\n                <a matChipTrailingIcon [hidden]=\"button.hide && button.hide(chips[0], context)\" (click)=\"$event.stopPropagation(); button.event && button.event(chips[0], context)\">\r\n                    <mat-icon fontSet=\"material-symbols-outlined\">{{button.icon}}</mat-icon>\r\n                </a>\r\n            }\r\n            @if ((onLaunch.observers.length) > 0) {\r\n                <a matChipTrailingIcon (click)=\"$event.stopPropagation(); handleLaunchClicked()\">\r\n                    <mat-icon fontSet=\"material-symbols-outlined\">launch</mat-icon>\r\n                </a>\r\n            }\r\n            @if (!readonly) {\r\n                <a matChipTrailingIcon (click)=\"handleRemovedEvent()\">\r\n                    <mat-icon fontSet=\"material-symbols-outlined\">close</mat-icon>\r\n                </a>\r\n            }\r\n        </mat-chip-row>\r\n    }\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Search box -->\r\n    <input matInput [hidden]=\"value && !empty\" placeholder=\"{{placeholder}}\" (focus)=\"connect()\" [readonly]=\"readonly\" [matChipInputFor]=\"chipList\" [matAutocomplete]=\"auto\" [matAutocompleteConnectedTo]=\"origin\" [formControl]=\"autoCompleteChipList\" (blur)=\"customValue && addOnBlur($event)\" #filterInput />\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Reset button -->\r\n    @if ((!value || empty) && !readonly && !disabled) {\r\n        <a trailingIcon class=\"mat-mdc-select-arrow\" (click)=\"filterInput.value = ''\">\r\n            <svg viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" focusable=\"false\" class=\"ng-tns-c184-21\">\r\n                <path d=\"M7 10l5 5 5-5z\" class=\"ng-tns-c184-21\"></path>\r\n            </svg>\r\n        </a>\r\n    }\r\n    <!-- #endregion -->\r\n</mat-chip-grid>\r\n\r\n<!-- #region Autocomplete -->\r\n<mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"addChip($event.option.value, filterInput)\" class=\"{{autocompleteCssClass}}{{classType?' table-autocomplete':''}}\">\r\n    @if(opened){\r\n        @if(!classType)\r\n        {\r\n            @for (item of dataSource?.items; track item; let first = $first; let last = $last) {\r\n                <mat-option [value]=\"item\">\r\n                    @if (!autocompleteOptionTemplate?.templateRef) {\r\n                        <span>{{item}}</span>\r\n                    }\r\n                    @if (autocompleteOptionTemplate && autocompleteOptionTemplate.templateRef) {\r\n                        <ng-template [ngTemplateOutlet]=\"autocompleteOptionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: item }\"></ng-template>\r\n                    }\r\n                </mat-option>\r\n                @if(!last){\r\n                    <mat-divider></mat-divider>\r\n                }\r\n            }\r\n        }\r\n        @if (classType) {\r\n            <mat-option hide=\"true\"></mat-option>\r\n            <vd-dynamic-table [dataSource]=\"dataSource\" [classType]=\"classType\" [entityObject]=\"entityObject\" [parentControl]=\"parentControl\" [context]=\"context\" [stickyHeader]=\"true\" [sticky]=\"true\" (rowClick)=\"addChip($event, filterInput)\" matSort [sortActive]=\"sortActive\" [sortDirection]=\"sortDirection\"></vd-dynamic-table>\r\n        }\r\n    }\r\n    <div class=\"vd-chips-paginator\">\r\n        <mat-divider></mat-divider>\r\n        <mat-paginator [length]=\"dataSource?.total ?? 0\" [pageIndex]=\"dataSource?.pageIndex ?? 0\" [pageSize]=\"dataSource?.pageSize ?? 15\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\" hidePageSize=\"true\"></mat-paginator>\r\n    </div>\r\n</mat-autocomplete>\r\n<!-- #endregion -->\r\n\r\n<div matAutocompleteOrigin #origin=\"matAutocompleteOrigin\" class=\"autocomplete-origin\"></div>", styles: [":host ::ng-deep .mat-mdc-chip-set{width:100%}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips{margin-left:0!important;margin-right:0;align-items:center}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip{display:flex;flex-direction:row;width:100%;padding:0 5px;justify-content:center;background-color:transparent!important;margin-right:0!important;margin-left:0!important;padding:0!important;margin:0;height:initial}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip.mdc-evolution-chip--disabled{opacity:.6;pointer-events:all}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__action{justify-content:left}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__action--primary{padding-left:0}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__cell--trailing{margin-right:-10px;display:flex}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mat-mdc-chip-focus-overlay{background-color:transparent!important}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mat-icon{cursor:pointer;font-size:1.2em;opacity:.8}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip.mat-chip-disabled{opacity:.6}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-content{-ms-flex-positive:1!important;flex-grow:1!important;font-weight:initial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;flex-direction:column;justify-content:center}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-launch{font-size:18px;position:absolute;right:4px;top:0;cursor:pointer}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-launch.removable{right:34px}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip .mdc-evolution-chip__action--primary:before,:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip--disabled .mdc-evolution-chip__action--primary:before{border-color:transparent!important}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip .mdc-evolution-chip__text-label,:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip--disabled .mdc-evolution-chip__text-label{color:inherit!important}:host ::ng-deep .autocomplete-origin{position:absolute;width:calc(100% + 28px);bottom:0;height:2px;margin-left:-14px}mat-spinner{margin-top:-9px;margin-right:6px}.mat-mdc-form-field-infix{display:flex}::ng-deep .vd-chips-autocomplete .mat-mdc-autocomplete-panel{padding:0!important}::ng-deep .vd-chips-autocomplete .table-autocomplete{overflow:hidden}::ng-deep .vd-chips-autocomplete .table-autocomplete .mat-table-container{height:calc(100% - 56px)!important;max-height:100vh!important}::ng-deep .vd-chips-autocomplete .vd-chips-paginator{position:sticky;bottom:0}::ng-deep .vd-chips-autocomplete .vd-chips-paginator .mat-mdc-paginator .mat-mdc-paginator-container{padding:0}::ng-deep .vd-chips-autocomplete .vd-chips-paginator .mat-mdc-paginator .mat-mdc-paginator-container .mat-mdc-paginator-range-actions .mat-mdc-paginator-range-label{margin:0 16px 0 24px}::ng-deep .mat-mdc-table .mat-mdc-form-field .mdc-text-field--outlined .mat-mdc-notch-piece,::ng-deep .mat-mdc-table .mat-mdc-form-field .mdc-text-field--outlined .mdc-text-field--focused .mat-mdc-notch-piece{border-color:var(--mat-form-field-outlined-outline-color, var(--mat-sys-outline))!important;border-width:var(--mat-form-field-outlined-outline-width, 1px)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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: i2$2.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: i4$2.MatAutocompleteOrigin, selector: "[matAutocompleteOrigin]", exportAs: ["matAutocompleteOrigin"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i6.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i7.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i7.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "component", type: i7.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "directive", type: i7.MatChipTrailingIcon, selector: "mat-chip-trailing-icon, [matChipTrailingIcon]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: VdDynamicTableComponent, selector: "vd-dynamic-table", inputs: ["dataSource", "data", "parentControl", "entityObject", "formArray", "debugValue", "classType", "context", "dataSourceFilter", "static", "filterable", "sticky", "tableWidth", "useFilterOperator", "paginable", "selectable", "sortActive", "sortDirection", "stickyHeader", "stickyFilter", "columnSets", "rowNgClass", "detailsTemplate", "readonly", "selectAllFilter", "paginatorRef", "columns", "rowMenuItems", "rowAction", "excludedColumns", "pageSize", "pageSizeOptions"], outputs: ["rowClick"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+        ], queries: [{ propertyName: "chipTemplate", first: true, predicate: VdChipDirective, descendants: true }, { propertyName: "autocompleteOptionTemplate", first: true, predicate: VdAutocompleteOptionDirective, descendants: true }], viewQueries: [{ propertyName: "dynamicTable", first: true, predicate: VdDynamicTableComponent, descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }, { propertyName: "autocomplete", first: true, predicate: MatAutocomplete, descendants: true }, { propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-chip-grid #chipList [required]=\"required\" [disabled]=\"disabled\">\r\n    <!-- #region Chips -->\r\n    @for (chip of chips; track chip?.[key] ?? chip ?? $index; let first = $first; let index = $index) {\r\n        <mat-chip [removable]=\"!readonly\" (removed)=\"handleRemovedEvent()\">\r\n            @if(chip.icon) {\r\n                <span matChipAvatar>\r\n                    <mat-icon fontSet=\"material-symbols-outlined\" [style.color]=\"chip.iconColor\">{{chip.icon}}</mat-icon>\r\n                </span>\r\n            }\r\n            @if (!chipTemplate?.templateRef) {\r\n                @if (!autocompleteOptionTemplate?.templateRef) {\r\n                    <span>{{ chip }}</span>\r\n                }\r\n                @if (autocompleteOptionTemplate && autocompleteOptionTemplate.templateRef) {\r\n                    <ng-template [ngTemplateOutlet]=\"autocompleteOptionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: chip }\"></ng-template>\r\n                }\r\n            }\r\n            @if (chipTemplate && chipTemplate.templateRef) {\r\n                <ng-template [ngTemplateOutlet]=\"chipTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ chip: chip }\"></ng-template>\r\n            }\r\n            @for (button of suffixButtons; track button?.icon ?? $index; let first = $first) {\r\n                <a matChipTrailingIcon [hidden]=\"button.hide && button.hide(chips[0], context)\" (click)=\"$event.stopPropagation(); button.event && button.event(chips[0], context)\">\r\n                    <mat-icon fontSet=\"material-symbols-outlined\">{{button.icon}}</mat-icon>\r\n                </a>\r\n            }\r\n            @if (onLaunch.observed) {\r\n                <a matChipTrailingIcon (click)=\"$event.stopPropagation(); handleLaunchClicked()\">\r\n                    <mat-icon fontSet=\"material-symbols-outlined\">launch</mat-icon>\r\n                </a>\r\n            }\r\n            @if (!readonly) {\r\n                <a matChipTrailingIcon (click)=\"handleRemovedEvent()\">\r\n                    <mat-icon fontSet=\"material-symbols-outlined\">close</mat-icon>\r\n                </a>\r\n            }\r\n        </mat-chip>\r\n    }\r\n    <!-- #endregion -->\r\n    <!-- #region Search box -->\r\n    <input matInput [hidden]=\"value && !empty\" placeholder=\"{{placeholder}}\" (focus)=\"connect()\" (click)=\"reopenPanel()\" [readonly]=\"readonly\" [matChipInputFor]=\"chipList\" [matAutocomplete]=\"auto\" [matAutocompleteConnectedTo]=\"origin\" [formControl]=\"autoCompleteChipList\" (blur)=\"customValue && addOnBlur($event)\" #filterInput />\r\n    <!-- #endregion -->\r\n    <!-- #region Reset button -->\r\n    @if ((!value || empty) && !readonly && !disabled) {\r\n        <a trailingIcon class=\"mat-mdc-select-arrow\" (click)=\"filterInput.value = ''\">\r\n            <svg viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" focusable=\"false\" class=\"ng-tns-c184-21\">\r\n                <path d=\"M7 10l5 5 5-5z\" class=\"ng-tns-c184-21\"></path>\r\n            </svg>\r\n        </a>\r\n    }\r\n    <!-- #endregion -->\r\n</mat-chip-grid>\r\n<!-- #region Autocomplete -->\r\n<mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"addChip($event.option.value, filterInput)\" class=\"{{autocompleteCssClass}}{{classType?' table-autocomplete':''}}\">\r\n    @if(opened){\r\n        @if (loading) {\r\n            <mat-option disabled class=\"vd-chips-loading-option\">\r\n                <mat-spinner diameter=\"32\"></mat-spinner>\r\n            </mat-option>\r\n        }\r\n        @if (!loading && ((dataSource?.items?.length ?? 0) === 0)) {\r\n            <mat-option disabled class=\"vd-chips-loading-option\">\r\n                <span i18n=\"@@noResultsFound\">No results found</span>\r\n            </mat-option>\r\n        }\r\n        @if(!classType)\r\n        {\r\n            @for (item of dataSource?.items; track item?.[key] ?? item ?? $index; let first = $first; let last = $last) {\r\n                <mat-option [value]=\"item\">\r\n                    <div layout=\"row\" layout-align=\"start center\">\r\n                        @if(item.icon) {\r\n                            <span matChipAvatar>\r\n                                <mat-icon fontSet=\"material-symbols-outlined\" [style.color]=\"item.iconColor\">{{item.icon}}</mat-icon>\r\n                            </span>\r\n                        }\r\n                        @if (!autocompleteOptionTemplate?.templateRef) {\r\n                            <span>{{item}}</span>\r\n                        }\r\n                        @if (autocompleteOptionTemplate && autocompleteOptionTemplate.templateRef) {\r\n                            <ng-template [ngTemplateOutlet]=\"autocompleteOptionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: item }\"></ng-template>\r\n                        }\r\n                    </div>\r\n                </mat-option>\r\n                @if(!last){\r\n                    <mat-divider></mat-divider>\r\n                }\r\n            }\r\n        }\r\n        @if (classType) {\r\n            <mat-option hide=\"true\"></mat-option>\r\n            <vd-dynamic-table [dataSource]=\"dataSource\" [classType]=\"classType\" [entityObject]=\"entityObject\" [parentControl]=\"parentControl\" [context]=\"context\" [stickyHeader]=\"true\" [sticky]=\"true\" (rowClick)=\"addChip($event, filterInput)\" matSort [sortActive]=\"sortActive\" [sortDirection]=\"sortDirection\"></vd-dynamic-table>\r\n        }\r\n    }\r\n    <div class=\"vd-chips-paginator\">\r\n        <mat-divider></mat-divider>\r\n        <mat-paginator [length]=\"dataSource?.total ?? 0\" [pageIndex]=\"dataSource?.pageIndex ?? 0\" [pageSize]=\"dataSource?.pageSize ?? 15\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\" hidePageSize=\"true\"></mat-paginator>\r\n    </div>\r\n</mat-autocomplete>\r\n<!-- #endregion -->\r\n<div matAutocompleteOrigin #origin=\"matAutocompleteOrigin\" class=\"autocomplete-origin\"></div>", styles: [":host ::ng-deep .mat-mdc-standard-chip.mdc-evolution-chip--disabled .mdc-evolution-chip__text-label,:host ::ng-deep .mat-mdc-standard-chip.mdc-evolution-chip--selected.mdc-evolution-chip--disabled .mdc-evolution-chip__text-label{color:inherit!important}:host ::ng-deep .mat-mdc-chip{height:auto;min-height:32px}:host ::ng-deep .mat-mdc-chip-set{width:100%}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips{margin-left:0!important;margin-right:0;align-items:center}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip{display:flex;flex-direction:row;padding:0 10px;justify-content:center;margin:-4px}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip.mdc-evolution-chip--disabled{opacity:.8;pointer-events:all}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__action{justify-content:left}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__action--primary{padding-left:0}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__cell--trailing{margin-right:-10px;display:flex}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__icon--trailing{width:19px}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__icon--trailing:not(:last-child){padding-right:0}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mat-mdc-chip-focus-overlay{background-color:transparent!important}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mat-icon{cursor:pointer;font-size:1.2em;opacity:.8;padding-top:4px}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip.mat-chip-disabled{opacity:.6}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-content{-ms-flex-positive:1!important;flex-grow:1!important;font-weight:initial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;flex-direction:column;justify-content:center}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-launch{font-size:18px;position:absolute;right:4px;top:0;cursor:pointer}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-launch.removable{right:34px}:host ::ng-deep .autocomplete-origin{position:absolute;width:calc(100% + 28px);bottom:0;height:2px;margin-left:-14px}mat-spinner{margin-top:-9px;margin-right:6px}.mat-mdc-form-field-infix{display:flex}::ng-deep .vd-chips-autocomplete .mat-mdc-autocomplete-panel{padding:0!important}::ng-deep .vd-chips-autocomplete .vd-chips-loading-option{display:flex;justify-content:center;align-items:center;padding-left:0!important;padding-right:0!important}::ng-deep .vd-chips-autocomplete .vd-chips-loading-option .mdc-list-item__primary-text{display:flex;width:100%;justify-content:center;align-items:center}::ng-deep .vd-chips-autocomplete .vd-chips-loading-option mat-spinner{margin:0!important}::ng-deep .vd-chips-autocomplete .table-autocomplete{overflow:hidden}::ng-deep .vd-chips-autocomplete .table-autocomplete .mat-table-container{height:calc(100% - 56px)!important;max-height:100vh!important}::ng-deep .vd-chips-autocomplete .vd-chips-paginator{position:sticky;bottom:0}::ng-deep .vd-chips-autocomplete .vd-chips-paginator .mat-mdc-paginator .mat-mdc-paginator-container{padding:0}::ng-deep .vd-chips-autocomplete .vd-chips-paginator .mat-mdc-paginator .mat-mdc-paginator-container .mat-mdc-paginator-range-actions .mat-mdc-paginator-range-label{margin:0 16px 0 24px}::ng-deep .mat-mdc-table .mat-mdc-form-field .mdc-text-field--outlined .mat-mdc-notch-piece,::ng-deep .mat-mdc-table .mat-mdc-form-field .mdc-text-field--outlined .mdc-text-field--focused .mat-mdc-notch-piece{border-color:var(--mat-form-field-outlined-outline-color, var(--mat-sys-outline))!important;border-width:var(--mat-form-field-outlined-outline-width, 1px)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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: i2$2.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: i4$2.MatAutocompleteOrigin, selector: "[matAutocompleteOrigin]", exportAs: ["matAutocompleteOrigin"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i6.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i7.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: i7.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "component", type: i7.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i7.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i7.MatChipTrailingIcon, selector: "mat-chip-trailing-icon, [matChipTrailingIcon]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i10$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: VdDynamicTableComponent, selector: "vd-dynamic-table", inputs: ["dataSource", "data", "parentControl", "entityObject", "formArray", "debugValue", "classType", "context", "dataSourceFilter", "static", "filterable", "sticky", "tableWidth", "useFilterOperator", "paginable", "selectable", "sortActive", "sortDirection", "stickyHeader", "stickyFilter", "columnSets", "rowNgClass", "detailsTemplate", "readonly", "selectAllFilter", "paginatorRef", "columns", "rowMenuItems", "rowAction", "excludedColumns", "pageSize", "pageSizeOptions"], outputs: ["rowClick"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: VdChipsComponent, decorators: [{
             type: Component,
@@ -22517,8 +23129,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         MatChipsModule,
                         MatIconModule,
                         MatInputModule,
-                        VdDynamicTableComponent,
-                    ], template: "<mat-chip-grid #chipList [required]=\"required\" [disabled]=\"readonly\">\r\n    <!-- #region Chips -->\r\n    @for (chip of chips; track chip; let first = $first; let index = $index) {\r\n        <mat-chip-row [removable]=\"!readonly\" (removed)=\"handleRemovedEvent()\" disableRipple>\r\n            <span class=\"vd-chip-content\">\r\n                @if (!chipTemplate?.templateRef) {\r\n                    <span>\r\n                        @if (!autocompleteOptionTemplate?.templateRef) {\r\n                            <span>{{ chip }}</span>\r\n                        }\r\n                        @if (autocompleteOptionTemplate && autocompleteOptionTemplate.templateRef) {\r\n                            <ng-template [ngTemplateOutlet]=\"autocompleteOptionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: chip }\"></ng-template>\r\n                        }\r\n                    </span>\r\n                }\r\n                @if (chipTemplate && chipTemplate.templateRef) {\r\n                    <ng-template [ngTemplateOutlet]=\"chipTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ chip: chip }\"></ng-template>\r\n                }\r\n            </span>\r\n            @for (button of suffixButtons; track button; let first = $first) {\r\n                <a matChipTrailingIcon [hidden]=\"button.hide && button.hide(chips[0], context)\" (click)=\"$event.stopPropagation(); button.event && button.event(chips[0], context)\">\r\n                    <mat-icon fontSet=\"material-symbols-outlined\">{{button.icon}}</mat-icon>\r\n                </a>\r\n            }\r\n            @if ((onLaunch.observers.length) > 0) {\r\n                <a matChipTrailingIcon (click)=\"$event.stopPropagation(); handleLaunchClicked()\">\r\n                    <mat-icon fontSet=\"material-symbols-outlined\">launch</mat-icon>\r\n                </a>\r\n            }\r\n            @if (!readonly) {\r\n                <a matChipTrailingIcon (click)=\"handleRemovedEvent()\">\r\n                    <mat-icon fontSet=\"material-symbols-outlined\">close</mat-icon>\r\n                </a>\r\n            }\r\n        </mat-chip-row>\r\n    }\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Search box -->\r\n    <input matInput [hidden]=\"value && !empty\" placeholder=\"{{placeholder}}\" (focus)=\"connect()\" [readonly]=\"readonly\" [matChipInputFor]=\"chipList\" [matAutocomplete]=\"auto\" [matAutocompleteConnectedTo]=\"origin\" [formControl]=\"autoCompleteChipList\" (blur)=\"customValue && addOnBlur($event)\" #filterInput />\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Reset button -->\r\n    @if ((!value || empty) && !readonly && !disabled) {\r\n        <a trailingIcon class=\"mat-mdc-select-arrow\" (click)=\"filterInput.value = ''\">\r\n            <svg viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" focusable=\"false\" class=\"ng-tns-c184-21\">\r\n                <path d=\"M7 10l5 5 5-5z\" class=\"ng-tns-c184-21\"></path>\r\n            </svg>\r\n        </a>\r\n    }\r\n    <!-- #endregion -->\r\n</mat-chip-grid>\r\n\r\n<!-- #region Autocomplete -->\r\n<mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"addChip($event.option.value, filterInput)\" class=\"{{autocompleteCssClass}}{{classType?' table-autocomplete':''}}\">\r\n    @if(opened){\r\n        @if(!classType)\r\n        {\r\n            @for (item of dataSource?.items; track item; let first = $first; let last = $last) {\r\n                <mat-option [value]=\"item\">\r\n                    @if (!autocompleteOptionTemplate?.templateRef) {\r\n                        <span>{{item}}</span>\r\n                    }\r\n                    @if (autocompleteOptionTemplate && autocompleteOptionTemplate.templateRef) {\r\n                        <ng-template [ngTemplateOutlet]=\"autocompleteOptionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: item }\"></ng-template>\r\n                    }\r\n                </mat-option>\r\n                @if(!last){\r\n                    <mat-divider></mat-divider>\r\n                }\r\n            }\r\n        }\r\n        @if (classType) {\r\n            <mat-option hide=\"true\"></mat-option>\r\n            <vd-dynamic-table [dataSource]=\"dataSource\" [classType]=\"classType\" [entityObject]=\"entityObject\" [parentControl]=\"parentControl\" [context]=\"context\" [stickyHeader]=\"true\" [sticky]=\"true\" (rowClick)=\"addChip($event, filterInput)\" matSort [sortActive]=\"sortActive\" [sortDirection]=\"sortDirection\"></vd-dynamic-table>\r\n        }\r\n    }\r\n    <div class=\"vd-chips-paginator\">\r\n        <mat-divider></mat-divider>\r\n        <mat-paginator [length]=\"dataSource?.total ?? 0\" [pageIndex]=\"dataSource?.pageIndex ?? 0\" [pageSize]=\"dataSource?.pageSize ?? 15\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\" hidePageSize=\"true\"></mat-paginator>\r\n    </div>\r\n</mat-autocomplete>\r\n<!-- #endregion -->\r\n\r\n<div matAutocompleteOrigin #origin=\"matAutocompleteOrigin\" class=\"autocomplete-origin\"></div>", styles: [":host ::ng-deep .mat-mdc-chip-set{width:100%}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips{margin-left:0!important;margin-right:0;align-items:center}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip{display:flex;flex-direction:row;width:100%;padding:0 5px;justify-content:center;background-color:transparent!important;margin-right:0!important;margin-left:0!important;padding:0!important;margin:0;height:initial}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip.mdc-evolution-chip--disabled{opacity:.6;pointer-events:all}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__action{justify-content:left}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__action--primary{padding-left:0}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__cell--trailing{margin-right:-10px;display:flex}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mat-mdc-chip-focus-overlay{background-color:transparent!important}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mat-icon{cursor:pointer;font-size:1.2em;opacity:.8}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip.mat-chip-disabled{opacity:.6}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-content{-ms-flex-positive:1!important;flex-grow:1!important;font-weight:initial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;flex-direction:column;justify-content:center}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-launch{font-size:18px;position:absolute;right:4px;top:0;cursor:pointer}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-launch.removable{right:34px}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip .mdc-evolution-chip__action--primary:before,:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip--disabled .mdc-evolution-chip__action--primary:before{border-color:transparent!important}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip .mdc-evolution-chip__text-label,:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip--disabled .mdc-evolution-chip__text-label{color:inherit!important}:host ::ng-deep .autocomplete-origin{position:absolute;width:calc(100% + 28px);bottom:0;height:2px;margin-left:-14px}mat-spinner{margin-top:-9px;margin-right:6px}.mat-mdc-form-field-infix{display:flex}::ng-deep .vd-chips-autocomplete .mat-mdc-autocomplete-panel{padding:0!important}::ng-deep .vd-chips-autocomplete .table-autocomplete{overflow:hidden}::ng-deep .vd-chips-autocomplete .table-autocomplete .mat-table-container{height:calc(100% - 56px)!important;max-height:100vh!important}::ng-deep .vd-chips-autocomplete .vd-chips-paginator{position:sticky;bottom:0}::ng-deep .vd-chips-autocomplete .vd-chips-paginator .mat-mdc-paginator .mat-mdc-paginator-container{padding:0}::ng-deep .vd-chips-autocomplete .vd-chips-paginator .mat-mdc-paginator .mat-mdc-paginator-container .mat-mdc-paginator-range-actions .mat-mdc-paginator-range-label{margin:0 16px 0 24px}::ng-deep .mat-mdc-table .mat-mdc-form-field .mdc-text-field--outlined .mat-mdc-notch-piece,::ng-deep .mat-mdc-table .mat-mdc-form-field .mdc-text-field--outlined .mdc-text-field--focused .mat-mdc-notch-piece{border-color:var(--mat-form-field-outlined-outline-color, var(--mat-sys-outline))!important;border-width:var(--mat-form-field-outlined-outline-width, 1px)!important}\n"] }]
+                        MatProgressSpinnerModule,
+                        VdDynamicTableComponent
+                    ], template: "<mat-chip-grid #chipList [required]=\"required\" [disabled]=\"disabled\">\r\n    <!-- #region Chips -->\r\n    @for (chip of chips; track chip?.[key] ?? chip ?? $index; let first = $first; let index = $index) {\r\n        <mat-chip [removable]=\"!readonly\" (removed)=\"handleRemovedEvent()\">\r\n            @if(chip.icon) {\r\n                <span matChipAvatar>\r\n                    <mat-icon fontSet=\"material-symbols-outlined\" [style.color]=\"chip.iconColor\">{{chip.icon}}</mat-icon>\r\n                </span>\r\n            }\r\n            @if (!chipTemplate?.templateRef) {\r\n                @if (!autocompleteOptionTemplate?.templateRef) {\r\n                    <span>{{ chip }}</span>\r\n                }\r\n                @if (autocompleteOptionTemplate && autocompleteOptionTemplate.templateRef) {\r\n                    <ng-template [ngTemplateOutlet]=\"autocompleteOptionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: chip }\"></ng-template>\r\n                }\r\n            }\r\n            @if (chipTemplate && chipTemplate.templateRef) {\r\n                <ng-template [ngTemplateOutlet]=\"chipTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ chip: chip }\"></ng-template>\r\n            }\r\n            @for (button of suffixButtons; track button?.icon ?? $index; let first = $first) {\r\n                <a matChipTrailingIcon [hidden]=\"button.hide && button.hide(chips[0], context)\" (click)=\"$event.stopPropagation(); button.event && button.event(chips[0], context)\">\r\n                    <mat-icon fontSet=\"material-symbols-outlined\">{{button.icon}}</mat-icon>\r\n                </a>\r\n            }\r\n            @if (onLaunch.observed) {\r\n                <a matChipTrailingIcon (click)=\"$event.stopPropagation(); handleLaunchClicked()\">\r\n                    <mat-icon fontSet=\"material-symbols-outlined\">launch</mat-icon>\r\n                </a>\r\n            }\r\n            @if (!readonly) {\r\n                <a matChipTrailingIcon (click)=\"handleRemovedEvent()\">\r\n                    <mat-icon fontSet=\"material-symbols-outlined\">close</mat-icon>\r\n                </a>\r\n            }\r\n        </mat-chip>\r\n    }\r\n    <!-- #endregion -->\r\n    <!-- #region Search box -->\r\n    <input matInput [hidden]=\"value && !empty\" placeholder=\"{{placeholder}}\" (focus)=\"connect()\" (click)=\"reopenPanel()\" [readonly]=\"readonly\" [matChipInputFor]=\"chipList\" [matAutocomplete]=\"auto\" [matAutocompleteConnectedTo]=\"origin\" [formControl]=\"autoCompleteChipList\" (blur)=\"customValue && addOnBlur($event)\" #filterInput />\r\n    <!-- #endregion -->\r\n    <!-- #region Reset button -->\r\n    @if ((!value || empty) && !readonly && !disabled) {\r\n        <a trailingIcon class=\"mat-mdc-select-arrow\" (click)=\"filterInput.value = ''\">\r\n            <svg viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" focusable=\"false\" class=\"ng-tns-c184-21\">\r\n                <path d=\"M7 10l5 5 5-5z\" class=\"ng-tns-c184-21\"></path>\r\n            </svg>\r\n        </a>\r\n    }\r\n    <!-- #endregion -->\r\n</mat-chip-grid>\r\n<!-- #region Autocomplete -->\r\n<mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"addChip($event.option.value, filterInput)\" class=\"{{autocompleteCssClass}}{{classType?' table-autocomplete':''}}\">\r\n    @if(opened){\r\n        @if (loading) {\r\n            <mat-option disabled class=\"vd-chips-loading-option\">\r\n                <mat-spinner diameter=\"32\"></mat-spinner>\r\n            </mat-option>\r\n        }\r\n        @if (!loading && ((dataSource?.items?.length ?? 0) === 0)) {\r\n            <mat-option disabled class=\"vd-chips-loading-option\">\r\n                <span i18n=\"@@noResultsFound\">No results found</span>\r\n            </mat-option>\r\n        }\r\n        @if(!classType)\r\n        {\r\n            @for (item of dataSource?.items; track item?.[key] ?? item ?? $index; let first = $first; let last = $last) {\r\n                <mat-option [value]=\"item\">\r\n                    <div layout=\"row\" layout-align=\"start center\">\r\n                        @if(item.icon) {\r\n                            <span matChipAvatar>\r\n                                <mat-icon fontSet=\"material-symbols-outlined\" [style.color]=\"item.iconColor\">{{item.icon}}</mat-icon>\r\n                            </span>\r\n                        }\r\n                        @if (!autocompleteOptionTemplate?.templateRef) {\r\n                            <span>{{item}}</span>\r\n                        }\r\n                        @if (autocompleteOptionTemplate && autocompleteOptionTemplate.templateRef) {\r\n                            <ng-template [ngTemplateOutlet]=\"autocompleteOptionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: item }\"></ng-template>\r\n                        }\r\n                    </div>\r\n                </mat-option>\r\n                @if(!last){\r\n                    <mat-divider></mat-divider>\r\n                }\r\n            }\r\n        }\r\n        @if (classType) {\r\n            <mat-option hide=\"true\"></mat-option>\r\n            <vd-dynamic-table [dataSource]=\"dataSource\" [classType]=\"classType\" [entityObject]=\"entityObject\" [parentControl]=\"parentControl\" [context]=\"context\" [stickyHeader]=\"true\" [sticky]=\"true\" (rowClick)=\"addChip($event, filterInput)\" matSort [sortActive]=\"sortActive\" [sortDirection]=\"sortDirection\"></vd-dynamic-table>\r\n        }\r\n    }\r\n    <div class=\"vd-chips-paginator\">\r\n        <mat-divider></mat-divider>\r\n        <mat-paginator [length]=\"dataSource?.total ?? 0\" [pageIndex]=\"dataSource?.pageIndex ?? 0\" [pageSize]=\"dataSource?.pageSize ?? 15\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\" hidePageSize=\"true\"></mat-paginator>\r\n    </div>\r\n</mat-autocomplete>\r\n<!-- #endregion -->\r\n<div matAutocompleteOrigin #origin=\"matAutocompleteOrigin\" class=\"autocomplete-origin\"></div>", styles: [":host ::ng-deep .mat-mdc-standard-chip.mdc-evolution-chip--disabled .mdc-evolution-chip__text-label,:host ::ng-deep .mat-mdc-standard-chip.mdc-evolution-chip--selected.mdc-evolution-chip--disabled .mdc-evolution-chip__text-label{color:inherit!important}:host ::ng-deep .mat-mdc-chip{height:auto;min-height:32px}:host ::ng-deep .mat-mdc-chip-set{width:100%}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips{margin-left:0!important;margin-right:0;align-items:center}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip{display:flex;flex-direction:row;padding:0 10px;justify-content:center;margin:-4px}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip.mdc-evolution-chip--disabled{opacity:.8;pointer-events:all}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__action{justify-content:left}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__action--primary{padding-left:0}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__cell--trailing{margin-right:-10px;display:flex}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__icon--trailing{width:19px}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__icon--trailing:not(:last-child){padding-right:0}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mat-mdc-chip-focus-overlay{background-color:transparent!important}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mat-icon{cursor:pointer;font-size:1.2em;opacity:.8;padding-top:4px}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip.mat-chip-disabled{opacity:.6}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-content{-ms-flex-positive:1!important;flex-grow:1!important;font-weight:initial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;flex-direction:column;justify-content:center}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-launch{font-size:18px;position:absolute;right:4px;top:0;cursor:pointer}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-launch.removable{right:34px}:host ::ng-deep .autocomplete-origin{position:absolute;width:calc(100% + 28px);bottom:0;height:2px;margin-left:-14px}mat-spinner{margin-top:-9px;margin-right:6px}.mat-mdc-form-field-infix{display:flex}::ng-deep .vd-chips-autocomplete .mat-mdc-autocomplete-panel{padding:0!important}::ng-deep .vd-chips-autocomplete .vd-chips-loading-option{display:flex;justify-content:center;align-items:center;padding-left:0!important;padding-right:0!important}::ng-deep .vd-chips-autocomplete .vd-chips-loading-option .mdc-list-item__primary-text{display:flex;width:100%;justify-content:center;align-items:center}::ng-deep .vd-chips-autocomplete .vd-chips-loading-option mat-spinner{margin:0!important}::ng-deep .vd-chips-autocomplete .table-autocomplete{overflow:hidden}::ng-deep .vd-chips-autocomplete .table-autocomplete .mat-table-container{height:calc(100% - 56px)!important;max-height:100vh!important}::ng-deep .vd-chips-autocomplete .vd-chips-paginator{position:sticky;bottom:0}::ng-deep .vd-chips-autocomplete .vd-chips-paginator .mat-mdc-paginator .mat-mdc-paginator-container{padding:0}::ng-deep .vd-chips-autocomplete .vd-chips-paginator .mat-mdc-paginator .mat-mdc-paginator-container .mat-mdc-paginator-range-actions .mat-mdc-paginator-range-label{margin:0 16px 0 24px}::ng-deep .mat-mdc-table .mat-mdc-form-field .mdc-text-field--outlined .mat-mdc-notch-piece,::ng-deep .mat-mdc-table .mat-mdc-form-field .mdc-text-field--outlined .mdc-text-field--focused .mat-mdc-notch-piece{border-color:var(--mat-form-field-outlined-outline-color, var(--mat-sys-outline))!important;border-width:var(--mat-form-field-outlined-outline-width, 1px)!important}\n"] }]
         }], ctorParameters: () => [{ type: VdMediaService }], propDecorators: { dynamicTable: [{
                 type: ViewChild,
                 args: [VdDynamicTableComponent, { static: false }]
@@ -23159,6 +23772,41 @@ var FormFieldType;
     FormFieldType[FormFieldType["Custom"] = 100] = "Custom";
 })(FormFieldType || (FormFieldType = {}));
 
+/**
+ * @class MatInputRequiredDirective
+ * @description Synchronizes Angular Material input required marker with tracked control required state.
+ */
+class MatInputRequiredDirective {
+    input;
+    /**
+     * @constructor
+     * @param {MatInput} input Material input instance.
+     */
+    constructor(input) {
+        this.input = input;
+    }
+    /**
+     * @method ngDoCheck
+     * @description Updates Material input required flag when control required state changes.
+     */
+    ngDoCheck() {
+        const isRequired = hasRequiredValidator(this.input.ngControl?.control);
+        if (isRequired !== this.input.required) {
+            this.input.required = isRequired;
+            this.input.ngOnChanges();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MatInputRequiredDirective, deps: [{ token: i3$2.MatInput }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MatInputRequiredDirective, isStandalone: true, selector: "[matInput][formControl]:not([required]), [matInput][formControlName]:not([required])", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MatInputRequiredDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[matInput][formControl]:not([required]), [matInput][formControlName]:not([required])',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i3$2.MatInput }] });
+
 /**
  * Directive that optionally enforces a fixed, non-removable prefix
  * at the beginning of an input field.
@@ -23895,7 +24543,7 @@ class MsaGenericFormAutocompleteFieldComponent extends MsaGenericFormFieldBaseCo
                 <mat-error>{{errorMessage}}</mat-error>
             }
         </mat-form-field>
-    `, isInline: true, styles: ["mat-form-field{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { 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.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { 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: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], 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: i2$2.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: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: PrefixDirective, selector: "[prefix]", inputs: ["prefix"] }, { kind: "pipe", type: FuncPipe, name: "func" }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
+    `, isInline: true, styles: ["mat-form-field{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { 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.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { 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: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], 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: i2$2.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: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatInputRequiredDirective, selector: "[matInput][formControl]:not([required]), [matInput][formControlName]:not([required])" }, { kind: "directive", type: PrefixDirective, selector: "[prefix]", inputs: ["prefix"] }, { kind: "pipe", type: FuncPipe, name: "func" }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MsaGenericFormAutocompleteFieldComponent, decorators: [{
             type: Component,
@@ -23907,6 +24555,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         MatAutocompleteModule,
                         MatIconModule,
                         MatIconButton,
+                        MatInputRequiredDirective,
                         PrefixDirective,
                         FuncPipe
                     ], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }], template: `
@@ -23991,11 +24640,11 @@ class MsaGenericFormCalendarFieldComponent extends MsaGenericFormFieldBaseCompon
                 <mat-error layout-margin>{{errorMessage}}</mat-error>
             }
         </mat-form-field>
-    `, isInline: true, styles: ["mat-form-field{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { 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.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i4$1.MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
+    `, isInline: true, styles: ["mat-form-field{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { 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.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i4$1.MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }, { kind: "directive", type: MatInputRequiredDirective, selector: "[matInput][formControl]:not([required]), [matInput][formControlName]:not([required])" }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MsaGenericFormCalendarFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'msa-generic-form-calendar-field', standalone: true, imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatDatepickerModule], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }], template: `
+            args: [{ selector: 'msa-generic-form-calendar-field', standalone: true, imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatDatepickerModule, MatInputRequiredDirective], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }], template: `
         <mat-form-field [class]="field.cssClass" floatLabel="always" class="form-field-type-calendar">
             <mat-label>{{field.label}}</mat-label>
             <input input="hidden" hidden matInput [formControlName]="field.name!" />
@@ -24326,7 +24975,7 @@ class MsaGenericFormColorFieldComponent extends MsaGenericFormFieldBaseComponent
                 <mat-error>{{errorMessage}}</mat-error>
             }
         </mat-form-field>
-    `, isInline: true, styles: ["mat-form-field{width:100%;height:100%}.color-picker{width:1.6rem!important;height:1.6rem!important;padding:2px!important;margin:8px;display:inline-block;box-sizing:border-box;border-color:transparent!important;border-radius:100%;background:#fff;cursor:pointer;padding:3px;box-shadow:0 1px 1px #0003,0 1px 1px 1px #00000024,0 1px 1px 1px #0000001f;appearance:none;-webkit-appearance:none}.color-picker::-webkit-color-swatch-wrapper{padding:0}.color-picker::-webkit-color-swatch{border:1px solid rgba(0,0,0,.2);border-radius:999px}.color-picker::-moz-color-swatch{border:1px solid rgba(0,0,0,.2);border-radius:999px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { 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.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { 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: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: OnlyNumberDirective, selector: "[onlyNumber]", inputs: ["onlyNumber", "excludePrefix"] }, { kind: "pipe", type: FuncPipe, name: "func" }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
+    `, isInline: true, styles: ["mat-form-field{width:100%;height:100%}.color-picker{width:1.6rem!important;height:1.6rem!important;padding:2px!important;margin:8px;display:inline-block;box-sizing:border-box;border-color:transparent!important;border-radius:100%;background:#fff;cursor:pointer;padding:3px;box-shadow:0 1px 1px #0003,0 1px 1px 1px #00000024,0 1px 1px 1px #0000001f;appearance:none;-webkit-appearance:none}.color-picker::-webkit-color-swatch-wrapper{padding:0}.color-picker::-webkit-color-swatch{border:1px solid rgba(0,0,0,.2);border-radius:999px}.color-picker::-moz-color-swatch{border:1px solid rgba(0,0,0,.2);border-radius:999px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { 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.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { 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: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatInputRequiredDirective, selector: "[matInput][formControl]:not([required]), [matInput][formControlName]:not([required])" }, { kind: "directive", type: OnlyNumberDirective, selector: "[onlyNumber]", inputs: ["onlyNumber", "excludePrefix"] }, { kind: "pipe", type: FuncPipe, name: "func" }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MsaGenericFormColorFieldComponent, decorators: [{
             type: Component,
@@ -24337,6 +24986,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         MatInputModule,
                         MatIconModule,
                         MatIconButton,
+                        MatInputRequiredDirective,
                         FuncPipe,
                         OnlyNumberDirective
                     ], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }], template: `
@@ -24477,11 +25127,11 @@ class MsaGenericFormDateFieldComponent extends MsaGenericFormFieldBaseComponent
                 <mat-error>{{errorMessage}}</mat-error>
             }
         </mat-form-field>
-    `, isInline: true, styles: ["mat-form-field{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { 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.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { 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: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i4$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "pipe", type: i1$2.DatePipe, name: "date" }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
+    `, isInline: true, styles: ["mat-form-field{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { 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.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { 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: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i4$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: MatInputRequiredDirective, selector: "[matInput][formControl]:not([required]), [matInput][formControlName]:not([required])" }, { kind: "pipe", type: i1$2.DatePipe, name: "date" }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MsaGenericFormDateFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'msa-generic-form-date-field', standalone: true, imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatDatepickerModule], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }], template: `
+            args: [{ selector: 'msa-generic-form-date-field', standalone: true, imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatDatepickerModule, MatInputRequiredDirective], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }], template: `
         <mat-form-field [class]="field.cssClass">
             <mat-label>{{field.label}}</mat-label>
             <div flex layout="row" layout-align="start center" [class]="{'has-time': field.showTime}">
@@ -24783,8 +25433,8 @@ class MsaGenericFormMsaChipsFieldComponent extends MsaGenericFormFieldBaseCompon
                       layout="row"
                       flex>
                 @if (field.chipTemplate; as chip) {
-                    <ng-template vd-chip let-chip="chip">
-                        <div [outerHTML]="field.chipTemplate(chip, formValue, formGroup, context)"></div>
+                    <ng-template vd-chip let-chip="chip">                      
+                        <span [outerHTML]="field.chipTemplate(chip, formValue, formGroup, context)"></span>
                     </ng-template>
                 } 
                 @if (field.autocompleteTemplate; as option) {
@@ -24803,7 +25453,7 @@ class MsaGenericFormMsaChipsFieldComponent extends MsaGenericFormFieldBaseCompon
                 <mat-error>{{errorMessage}}</mat-error>
             }
         </mat-form-field>
-    `, isInline: true, styles: ["mat-form-field{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { 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.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: VdChipsComponent, selector: "vd-chips", inputs: ["classType", "chips", "endpoint", "params", "projection", "paginated", "customValue", "context", "key", "searchField", "searchFields", "filters", "removable", "selectFirst", "debounce", "autocompleteCssClass", "suffixButtons"], outputs: ["initSelect", "selected", "cleared", "launch", "chipFocus"] }, { kind: "directive", type: VdChipDirective, selector: "[vd-chip]ng-template" }, { kind: "directive", type: VdAutocompleteOptionDirective, selector: "[vd-autocomplete-option]ng-template" }, { kind: "pipe", type: FuncPipe, name: "func" }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
+    `, isInline: true, styles: ["mat-form-field{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { 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.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: VdChipsComponent, selector: "vd-chips", inputs: ["classType", "chips", "endpoint", "params", "projection", "paginated", "customValue", "context", "key", "searchField", "searchFields", "filters", "removable", "selectFirst", "debounce", "autocompleteCssClass", "suffixButtons"], outputs: ["initSelect", "selected", "cleared", "launch", "chipFocus"] }, { kind: "directive", type: VdChipDirective, selector: "[vd-chip]ng-template" }, { kind: "directive", type: VdAutocompleteOptionDirective, selector: "[vd-autocomplete-option]ng-template" }, { kind: "pipe", type: FuncPipe, name: "func" }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MsaGenericFormMsaChipsFieldComponent, decorators: [{
             type: Component,
@@ -24811,6 +25461,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         CommonModule,
                         ReactiveFormsModule,
                         MatFormFieldModule,
+                        MatIconModule,
                         FuncPipe,
                         VdChipsComponent,
                         VdChipDirective,
@@ -24841,8 +25492,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                       layout="row"
                       flex>
                 @if (field.chipTemplate; as chip) {
-                    <ng-template vd-chip let-chip="chip">
-                        <div [outerHTML]="field.chipTemplate(chip, formValue, formGroup, context)"></div>
+                    <ng-template vd-chip let-chip="chip">                      
+                        <span [outerHTML]="field.chipTemplate(chip, formValue, formGroup, context)"></span>
                     </ng-template>
                 } 
                 @if (field.autocompleteTemplate; as option) {
@@ -24908,7 +25559,7 @@ class VdListComponent extends AbstractSelectFormField {
         this.selectEl?.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: VdListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: VdListComponent, isStandalone: true, selector: "vd-list", host: { classAttribute: "vd-list" }, providers: [{ provide: MatFormFieldControl, useExisting: VdListComponent }], queries: [{ propertyName: "optionTemplate", first: true, predicate: VdListOptionDirective, descendants: true }], viewQueries: [{ propertyName: "selectEl", first: true, predicate: MatSelectionList, descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-selection-list i18n-placeholder [(ngModel)]=\"value\" #select=\"matSelectionList\" (selectionChange)=\"handleChange($event)\" [multiple]=\"multiple\" [compareWith]=\"compareWith??defaultCompareWith\" [disabled]=\"disabled || readonly\" [hideSingleSelectionIndicator]=\"false\" flex>\n    <!-- #region Options -->\n    @for (option of filteredOptions; track option; let first = $first) {\n        <mat-list-option [value]=\"mapper ? option : option[optionValueProperty]\">\n            @if (!optionTemplate?.templateRef) {\n                <span i18n=\"@@selection\">{option[optionTextProperty], select, option {option} other{{{option[optionTextProperty]}}}}</span>\n                } @if (optionTemplate?.templateRef) {\n                    <ng-template [ngTemplateOutlet]=\"$safeNavigationMigration(optionTemplate.templateRef)!\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                }\n        </mat-list-option>\n        }\n        <!-- #endregion -->\n</mat-selection-list>", styles: ["::ng-deep .vd-list{overflow:auto;max-height:100%}::ng-deep .mat-mdc-form-field-type-vd-list .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important}::ng-deep .mat-mdc-form-field-type-vd-list .mdc-text-field{padding:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: VdListComponent, isStandalone: true, selector: "vd-list", host: { classAttribute: "vd-list" }, providers: [{ provide: MatFormFieldControl, useExisting: VdListComponent }], queries: [{ propertyName: "optionTemplate", first: true, predicate: VdListOptionDirective, descendants: true }], viewQueries: [{ propertyName: "selectEl", first: true, predicate: MatSelectionList, descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-selection-list i18n-placeholder [(ngModel)]=\"value\" #select=\"matSelectionList\" (selectionChange)=\"handleChange($event)\" [multiple]=\"multiple\" [compareWith]=\"compareWith??defaultCompareWith\" [disabled]=\"disabled || readonly\" [hideSingleSelectionIndicator]=\"false\" flex>\r\n    <!-- #region Options -->\r\n    @for (option of filteredOptions; track option; let first = $first) {\r\n        <mat-list-option [value]=\"mapper ? option : option[optionValueProperty]\">\r\n            @if (!optionTemplate?.templateRef) {\r\n                <span i18n=\"@@selection\">{option[optionTextProperty], select, option {option} other{{{option[optionTextProperty]}}}}</span>\r\n                } @if (optionTemplate?.templateRef) {\r\n                    <ng-template [ngTemplateOutlet]=\"$safeNavigationMigration(optionTemplate.templateRef)!\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\r\n                }\r\n        </mat-list-option>\r\n        }\r\n        <!-- #endregion -->\r\n</mat-selection-list>", styles: ["::ng-deep .vd-list{overflow:auto;max-height:100%}::ng-deep .mat-mdc-form-field-type-vd-list .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important}::ng-deep .mat-mdc-form-field-type-vd-list .mdc-text-field{padding:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: VdListComponent, decorators: [{
             type: Component,
@@ -24917,7 +25568,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         MatSelectionList,
                         MatListOption,
                         FormsModule
-                    ], template: "<mat-selection-list i18n-placeholder [(ngModel)]=\"value\" #select=\"matSelectionList\" (selectionChange)=\"handleChange($event)\" [multiple]=\"multiple\" [compareWith]=\"compareWith??defaultCompareWith\" [disabled]=\"disabled || readonly\" [hideSingleSelectionIndicator]=\"false\" flex>\n    <!-- #region Options -->\n    @for (option of filteredOptions; track option; let first = $first) {\n        <mat-list-option [value]=\"mapper ? option : option[optionValueProperty]\">\n            @if (!optionTemplate?.templateRef) {\n                <span i18n=\"@@selection\">{option[optionTextProperty], select, option {option} other{{{option[optionTextProperty]}}}}</span>\n                } @if (optionTemplate?.templateRef) {\n                    <ng-template [ngTemplateOutlet]=\"$safeNavigationMigration(optionTemplate.templateRef)!\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                }\n        </mat-list-option>\n        }\n        <!-- #endregion -->\n</mat-selection-list>", styles: ["::ng-deep .vd-list{overflow:auto;max-height:100%}::ng-deep .mat-mdc-form-field-type-vd-list .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important}::ng-deep .mat-mdc-form-field-type-vd-list .mdc-text-field{padding:0}\n"] }]
+                    ], template: "<mat-selection-list i18n-placeholder [(ngModel)]=\"value\" #select=\"matSelectionList\" (selectionChange)=\"handleChange($event)\" [multiple]=\"multiple\" [compareWith]=\"compareWith??defaultCompareWith\" [disabled]=\"disabled || readonly\" [hideSingleSelectionIndicator]=\"false\" flex>\r\n    <!-- #region Options -->\r\n    @for (option of filteredOptions; track option; let first = $first) {\r\n        <mat-list-option [value]=\"mapper ? option : option[optionValueProperty]\">\r\n            @if (!optionTemplate?.templateRef) {\r\n                <span i18n=\"@@selection\">{option[optionTextProperty], select, option {option} other{{{option[optionTextProperty]}}}}</span>\r\n                } @if (optionTemplate?.templateRef) {\r\n                    <ng-template [ngTemplateOutlet]=\"$safeNavigationMigration(optionTemplate.templateRef)!\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\r\n                }\r\n        </mat-list-option>\r\n        }\r\n        <!-- #endregion -->\r\n</mat-selection-list>", styles: ["::ng-deep .vd-list{overflow:auto;max-height:100%}::ng-deep .mat-mdc-form-field-type-vd-list .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important}::ng-deep .mat-mdc-form-field-type-vd-list .mdc-text-field{padding:0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { optionTemplate: [{
                 type: ContentChild,
                 args: [VdListOptionDirective]
@@ -25010,6 +25661,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
     `, styles: ["mat-form-field{width:100%;height:100%}\n"] }]
         }] });
 
+/**
+ * @class MsaSelectRequiredDirective
+ * @description Synchronizes Angular Material select required marker with tracked control required state.
+ */
+class MsaSelectRequiredDirective {
+    input;
+    /**
+     * @constructor
+     * @param {VdSelectComponent} input Material select instance.
+     */
+    constructor(input) {
+        this.input = input;
+    }
+    /**
+     * @method ngDoCheck
+     * @description Updates Material select required flag when control required state changes.
+     */
+    ngDoCheck() {
+        const isRequired = hasRequiredValidator(this.input.ngControl?.control);
+        if (isRequired !== this.input.required) {
+            this.input.required = isRequired;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MsaSelectRequiredDirective, deps: [{ token: VdSelectComponent }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MsaSelectRequiredDirective, isStandalone: true, selector: "vd-select[formControl]:not([required]), vd-select[formControlName]:not([required])", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MsaSelectRequiredDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'vd-select[formControl]:not([required]), vd-select[formControlName]:not([required])',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: VdSelectComponent }] });
+
 /**
  * @class MsaGenericFormMsaSelectFieldComponent
  * @description Renders a MsaSelect case for `MsaGenericFormComponent`.
@@ -25099,7 +25784,7 @@ class MsaGenericFormMsaSelectFieldComponent extends MsaGenericFormFieldBaseCompo
                 <mat-error>{{errorMessage}}</mat-error>
             }
         </mat-form-field>
-    `, isInline: true, styles: ["mat-form-field{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { 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.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { 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: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i7.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i7.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: VdSelectComponent, selector: "vd-select", inputs: ["triggerCssClass"] }, { kind: "directive", type: VdSelectOptionDirective, selector: "[vd-select-option]ng-template" }, { kind: "directive", type: VdSelectTriggerDirective, selector: "[vd-select-trigger]ng-template" }, { kind: "pipe", type: FuncPipe, name: "func" }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
+    `, isInline: true, styles: ["mat-form-field{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { 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.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { 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: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i7.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i7.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: VdSelectComponent, selector: "vd-select", inputs: ["triggerCssClass"] }, { kind: "directive", type: VdSelectOptionDirective, selector: "[vd-select-option]ng-template" }, { kind: "directive", type: VdSelectTriggerDirective, selector: "[vd-select-trigger]ng-template" }, { kind: "directive", type: MsaSelectRequiredDirective, selector: "vd-select[formControl]:not([required]), vd-select[formControlName]:not([required])" }, { kind: "pipe", type: FuncPipe, name: "func" }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MsaGenericFormMsaSelectFieldComponent, decorators: [{
             type: Component,
@@ -25113,7 +25798,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         FuncPipe,
                         VdSelectComponent,
                         VdSelectOptionDirective,
-                        VdSelectTriggerDirective
+                        VdSelectTriggerDirective,
+                        MsaSelectRequiredDirective
                     ], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }], template: `
         <mat-form-field [class]="field.cssClass">
             <mat-label>{{field.label}}</mat-label>
@@ -25512,6 +26198,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
     `, styles: ["mat-form-field{width:100%;height:100%}\n"] }]
         }] });
 
+/**
+ * @class MatSelectRequiredDirective
+ * @description Synchronizes Angular Material select required marker with tracked control required state.
+ */
+class MatSelectRequiredDirective {
+    input;
+    /**
+     * @constructor
+     * @param {MatSelect} input Material select instance.
+     */
+    constructor(input) {
+        this.input = input;
+    }
+    /**
+     * @method ngDoCheck
+     * @description Updates Material select required flag when control required state changes.
+     */
+    ngDoCheck() {
+        const isRequired = hasRequiredValidator(this.input.ngControl?.control);
+        if (isRequired !== this.input.required) {
+            this.input.required = isRequired;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MatSelectRequiredDirective, deps: [{ token: i2$2.MatSelect }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MatSelectRequiredDirective, isStandalone: true, selector: "mat-select[formControl]:not([required]), mat-select[formControlName]:not([required])", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MatSelectRequiredDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'mat-select[formControl]:not([required]), mat-select[formControlName]:not([required])',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i2$2.MatSelect }] });
+
 /**
  * @class MsaGenericFormSelectFieldComponent
  * @description Renders a Select case for `MsaGenericFormComponent`.
@@ -25548,7 +26268,7 @@ class MsaGenericFormSelectFieldComponent extends MsaGenericFormFieldBaseComponen
                 <mat-error>{{errorMessage}}</mat-error>
             }
         </mat-form-field>
-    `, isInline: true, styles: ["mat-form-field{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { 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.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { 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: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2$2.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", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: DisableControlDirective, selector: "[disableControl]", inputs: ["disableControl"] }, { kind: "pipe", type: FuncPipe, name: "func" }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
+    `, isInline: true, styles: ["mat-form-field{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { 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.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { 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: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2$2.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", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatSelectRequiredDirective, selector: "mat-select[formControl]:not([required]), mat-select[formControlName]:not([required])" }, { kind: "directive", type: DisableControlDirective, selector: "[disableControl]", inputs: ["disableControl"] }, { kind: "pipe", type: FuncPipe, name: "func" }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MsaGenericFormSelectFieldComponent, decorators: [{
             type: Component,
@@ -25559,6 +26279,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         MatSelectModule,
                         MatIconModule,
                         MatIconButton,
+                        MatSelectRequiredDirective,
                         DisableControlDirective,
                         FuncPipe
                     ], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }], template: `
@@ -25779,7 +26500,7 @@ class MsaGenericFormTextFieldComponent extends MsaGenericFormFieldBaseComponent
                 <mat-error>{{errorMessage}}</mat-error>
             }
         </mat-form-field>
-    `, isInline: true, styles: ["mat-form-field{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { 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.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { 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: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: AutofocusDirective, selector: "[autoFocus]", inputs: ["focusDelay", "selectText", "autoFocus"] }, { kind: "directive", type: OnlyNumberDirective, selector: "[onlyNumber]", inputs: ["onlyNumber", "excludePrefix"] }, { kind: "directive", type: PrefixDirective, selector: "[prefix]", inputs: ["prefix"] }, { kind: "directive", type: ParseDecimalDirective, selector: "[parseDecimal]", inputs: ["parseDecimalEnabled"] }, { kind: "directive", type: RemoveWhitespaceDirective, selector: "[removeWhitespace]", inputs: ["removeWhitespace"] }, { kind: "pipe", type: FuncPipe, name: "func" }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
+    `, isInline: true, styles: ["mat-form-field{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { 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.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { 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: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatInputRequiredDirective, selector: "[matInput][formControl]:not([required]), [matInput][formControlName]:not([required])" }, { kind: "directive", type: AutofocusDirective, selector: "[autoFocus]", inputs: ["focusDelay", "selectText", "autoFocus"] }, { kind: "directive", type: OnlyNumberDirective, selector: "[onlyNumber]", inputs: ["onlyNumber", "excludePrefix"] }, { kind: "directive", type: PrefixDirective, selector: "[prefix]", inputs: ["prefix"] }, { kind: "directive", type: ParseDecimalDirective, selector: "[parseDecimal]", inputs: ["parseDecimalEnabled"] }, { kind: "directive", type: RemoveWhitespaceDirective, selector: "[removeWhitespace]", inputs: ["removeWhitespace"] }, { kind: "pipe", type: FuncPipe, name: "func" }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MsaGenericFormTextFieldComponent, decorators: [{
             type: Component,
@@ -25790,6 +26511,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         MatInputModule,
                         MatIconModule,
                         MatIconButton,
+                        MatInputRequiredDirective,
                         AutofocusDirective,
                         FuncPipe,
                         OnlyNumberDirective,
@@ -25872,7 +26594,7 @@ class MsaGenericFormTextareaFieldComponent extends MsaGenericFormFieldBaseCompon
                 <mat-error>{{errorMessage}}</mat-error>
             }
         </mat-form-field>
-    `, isInline: true, styles: ["mat-form-field{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { 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.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { 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: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: PrefixDirective, selector: "[prefix]", inputs: ["prefix"] }, { kind: "directive", type: RemoveWhitespaceDirective, selector: "[removeWhitespace]", inputs: ["removeWhitespace"] }, { kind: "pipe", type: FuncPipe, name: "func" }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
+    `, isInline: true, styles: ["mat-form-field{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { 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.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { 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: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatInputRequiredDirective, selector: "[matInput][formControl]:not([required]), [matInput][formControlName]:not([required])" }, { kind: "directive", type: PrefixDirective, selector: "[prefix]", inputs: ["prefix"] }, { kind: "directive", type: RemoveWhitespaceDirective, selector: "[removeWhitespace]", inputs: ["removeWhitespace"] }, { kind: "pipe", type: FuncPipe, name: "func" }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MsaGenericFormTextareaFieldComponent, decorators: [{
             type: Component,
@@ -25883,6 +26605,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         MatInputModule,
                         MatIconModule,
                         MatIconButton,
+                        MatInputRequiredDirective,
                         FuncPipe,
                         PrefixDirective,
                         RemoveWhitespaceDirective
@@ -26424,7 +27147,7 @@ class VdGenericFormComponent {
         console.log(message, optionalParams);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: VdGenericFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: VdGenericFormComponent, isStandalone: true, selector: "vd-generic-form", inputs: { formGroup: "formGroup", classType: "classType", formDefinition: "formDefinition", fieldGroups: "fieldGroups", groupName: "groupName", fieldSets: "fieldSets", context: "context", debugValue: "debugValue", readonly: "readonly", separatorKeysCodes: "separatorKeysCodes" }, outputs: { onInit: "init" }, queries: [{ propertyName: "editorTemplate", first: true, predicate: VdEditorDirective, descendants: true }, { propertyName: "codeTemplate", first: true, predicate: VdCodeDirective, descendants: true }, { propertyName: "fileTemplate", first: true, predicate: VdFileDirective, descendants: true }, { propertyName: "customTemplate", first: true, predicate: VdCustomDirective, descendants: true }, { propertyName: "bottom", first: true, predicate: ["bottom"], descendants: true }, { propertyName: "customFields", first: true, predicate: ["customFields"], descendants: true }, { propertyName: "customFieldsTemplates", predicate: VdGenericFormCustomFieldDirective }], ngImport: i0, template: "@if (formGroup && fieldRows) {\n    <div [formGroup]=\"formGroup!\">\n        <!-- #region Fields -->\n        @for (fields of fieldRows; track fields; let i = $index) {\n            <div layout-gt-sm=\"row\" layout=\"column\">\n                @for (field of fields; track field) {\n                    @if (!field.hidden && !(field.hide && field.hide(formValue, formGroup, context))) {\n                        @switch (field.type) {\n                            <!-- #region Text input -->\n                            @case (FormFieldType.Text) {\n                                <msa-generic-form-text-field [field]=\"field\"\n                                                             [formGroup]=\"formGroup\"\n                                                             [readonly]=\"readonly ?? false\"\n                                                             [context]=\"context\"\n                                                             [attr.flex]=\"field.flex||0\"\n                                                             layout-margin>\n                                </msa-generic-form-text-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Textarea -->\n                            @case (FormFieldType.TextArea) {\n                                <msa-generic-form-textarea-field [field]=\"field\"\n                                                                 [formGroup]=\"formGroup\" [readonly]=\"readonly ?? false\"\n                                                                 [context]=\"context\"\n                                                                 [attr.flex]=\"field.flex||0\"\n                                                                 layout-margin>\n                                </msa-generic-form-textarea-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Enum -->\n                            @case (FormFieldType.Enum) {\n                                <msa-generic-form-enum-field [field]=\"field\" [formGroup]=\"formGroup\"\n                                                             [readonly]=\"readonly ?? false\"\n                                                             [context]=\"context\"\n                                                             [attr.flex]=\"field.flex||0\"\n                                                             layout-margin>\n                                </msa-generic-form-enum-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region VdSelect -->\n                            @case (FormFieldType.VdSelect) {\n                                <msa-generic-form-msa-select-field [field]=\"field\"\n                                                                   [formGroup]=\"formGroup\"\n                                                                   [readonly]=\"readonly ?? false\"\n                                                                   [context]=\"context\"\n                                                                   [attr.flex]=\"field.flex||0\"\n                                                                   layout-margin>\n                                </msa-generic-form-msa-select-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region VdList -->\n                            @case (FormFieldType.VdList) {\n                                <msa-generic-form-msa-list-field [field]=\"field\"\n                                                                 [formGroup]=\"formGroup\"\n                                                                 [readonly]=\"readonly ?? false\"\n                                                                 [context]=\"context\"\n                                                                 [attr.flex]=\"field.flex||0\"\n                                                                 layout-margin>\n                                </msa-generic-form-msa-list-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Chips -->\n                            @case (FormFieldType.Chips) {\n                                <msa-generic-form-chips-field [field]=\"field\"\n                                                              [formGroup]=\"formGroup\"\n                                                              [readonly]=\"readonly ?? false\"\n                                                              [context]=\"context\"\n                                                              [separatorKeysCodes]=\"separatorKeysCodes\"\n                                                              [autocompleteFilteredOptions]=\"autocompleteFilteredOptions\"\n                                                              [filterAutocomplete]=\"filterAutocomplete.bind(this)\"\n                                                              [autocompleteValueSelected]=\"autocompleteValueSelected.bind(this)\"\n                                                              [addChip]=\"addChip.bind(this)\"\n                                                              [onPasteChips]=\"onPasteChips.bind(this)\"\n                                                              [removeChip]=\"removeChip.bind(this)\"\n                                                              [attr.flex]=\"field.flex||0\"\n                                                              layout-margin>\n                                </msa-generic-form-chips-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region VdChips -->\n                            @case (FormFieldType.VdChips) {\n                                <msa-generic-form-msa-chips-field [field]=\"field\"\n                                                                  [formGroup]=\"formGroup\"\n                                                                  [readonly]=\"readonly ?? false\"\n                                                                  [context]=\"context\"\n                                                                  [attr.flex]=\"field.flex||0\"\n                                                                  layout-margin>\n                                </msa-generic-form-msa-chips-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Select -->\n                            @case (FormFieldType.Select) {\n                                <msa-generic-form-select-field [field]=\"field\"\n                                                               [formGroup]=\"formGroup\"\n                                                               [readonly]=\"readonly ?? false\"\n                                                               [context]=\"context\"\n                                                               [attr.flex]=\"field.flex||0\"\n                                                               layout-margin>\n                                </msa-generic-form-select-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Autocomplete -->\n                            @case (FormFieldType.Autocomplete) {\n                                <msa-generic-form-autocomplete-field [field]=\"field\"\n                                                                     [formGroup]=\"formGroup\"\n                                                                     [readonly]=\"readonly ?? false\"\n                                                                     [context]=\"context\"\n                                                                     [autocompleteFilteredOptions]=\"autocompleteFilteredOptions\"\n                                                                     [filterAutocomplete]=\"filterAutocomplete.bind(this)\"\n                                                                     [attr.flex]=\"field.flex||0\"\n                                                                     layout-margin>\n                                </msa-generic-form-autocomplete-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Date -->\n                            @case (FormFieldType.Date) {\n                                <msa-generic-form-date-field [field]=\"field\"\n                                                             [formGroup]=\"formGroup\"\n                                                             [readonly]=\"readonly ?? false\"\n                                                             [context]=\"context\"\n                                                             [datePickerHeaderComponent]=\"datePickerHeaderComponent\"\n                                                             [handleDatePickerFilterAsync]=\"handleDatePickerFilterAsync.bind(this)\"\n                                                             [handleDatePickerOpened]=\"handleDatePickerOpened.bind(this)\"\n                                                             [attr.flex]=\"field.flex||0\"\n                                                             layout-margin>\n                                </msa-generic-form-date-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Calendar -->\n                            @case (FormFieldType.Calendar) {\n                                <msa-generic-form-calendar-field [field]=\"field\"\n                                                                 [formGroup]=\"formGroup\"\n                                                                 [readonly]=\"readonly ?? false\"\n                                                                 [context]=\"context\"\n                                                                 [datePickerHeaderComponent]=\"datePickerHeaderComponent\"\n                                                                 [handleCalendarFilterAsync]=\"handleCalendarFilterAsync.bind(this)\"\n                                                                 [attr.flex]=\"field.flex||0\"\n                                                                 layout-margin>\n                                </msa-generic-form-calendar-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Color input -->\n                            @case (FormFieldType.Color) {\n                                <msa-generic-form-color-field [field]=\"field\"\n                                                              [formGroup]=\"formGroup\"\n                                                              [readonly]=\"readonly ?? false\"\n                                                              [context]=\"context\"\n                                                              [attr.flex]=\"field.flex||0\"\n                                                              layout-margin>\n                                </msa-generic-form-color-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Checkbox -->\n                            @case (FormFieldType.Checkbox) {\n                                <msa-generic-form-checkbox-field [field]=\"field\"\n                                                                 [formGroup]=\"formGroup\"\n                                                                 [readonly]=\"readonly ?? false\"\n                                                                 [context]=\"context\"\n                                                                 [attr.flex]=\"field.flex||0\">\n                                </msa-generic-form-checkbox-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Radio -->\n                            @case(FormFieldType.Radio) {\n                                <msa-generic-form-radio-field [field]=\"field\"\n                                                              [formGroup]=\"formGroup\"\n                                                              [readonly]=\"readonly ?? false\"\n                                                              [context]=\"context\"\n                                                              [attr.flex]=\"field.flex||0\"\n                                                              layout-margin>\n                                </msa-generic-form-radio-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Editor -->\n                            @case (FormFieldType.Editor) {\n                                <msa-generic-form-editor-field [field]=\"field\"\n                                                               [formGroup]=\"formGroup\"\n                                                               [editorTemplate]=\"editorTemplate\"\n                                                               [attr.flex]=\"field.flex||0\"\n                                                               layout-margin>\n                                </msa-generic-form-editor-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Code -->\n                            @case (FormFieldType.Code) {\n                                <msa-generic-form-code-field [field]=\"field\"\n                                                             [formGroup]=\"formGroup\"\n                                                             [codeTemplate]=\"codeTemplate\"\n                                                             [attr.flex]=\"field.flex||0\"\n                                                             layout-margin>\n                                </msa-generic-form-code-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region File -->\n                            @case (FormFieldType.File) {\n                                <msa-generic-form-file-field [field]=\"field\"\n                                                             [formGroup]=\"formGroup\"\n                                                             [readonly]=\"readonly ?? false\"\n                                                             [context]=\"context\"\n                                                             [attr.flex]=\"field.flex||0\"\n                                                             layout-margin>\n                                </msa-generic-form-file-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Custom -->\n                            @case (FormFieldType.Custom) {\n                                <msa-generic-form-custom-field [field]=\"field\"\n                                                               [formGroup]=\"formGroup\"\n                                                               [customTemplate]=\"customTemplate\"\n                                                               [attr.flex]=\"field.flex||0\"\n                                                               layout-margin>\n                                </msa-generic-form-custom-field>\n                            }\n                            <!-- #endregion -->\n                        }\n                    }\n                }\n\n                <!-- #region Template for custom fields -->\n                @for (customField of customFieldsTemplates; track customField) {\n                    @if (customField?.templateRef && customField.row == fields[0]?.row && customField.inline) {\n                        <ng-template [ngTemplateOutlet]=\"$safeNavigationMigration(customField?.templateRef)!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\n                    }\n                }\n                <!-- #endregion -->\n            </div>\n            <!-- #region Template for custom fields -->\n            @if (customFields) {\n                <ng-container [ngTemplateOutlet]=\"customFields\" [ngTemplateOutletContext]=\"{formGroup: formGroup, row: fields[0].row}\"></ng-container>\n            } @for (customField of customFieldsTemplates; track customField) {\n                @if(customField?.templateRef && customField.row ==  ((($safeNavigationMigration(fields[0]?.row) | func:formValue:formGroup:context) ??0)+1) && !customField.inline) {\n                    <ng-template [ngTemplateOutlet]=\"$safeNavigationMigration(customField?.templateRef)!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\n                }\n            }\n            <!-- #endregion -->\n        }\n        <!-- #endregion -->\n\n        <!-- #region Form bottom -->\n        @if (bottom) {\n            <ng-container [ngTemplateOutlet]=\"bottom\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-container>\n        }\n        <!-- #endregion -->\n\n        <!-- #region Template for suffix buttons -->\n        <ng-template #suffixButtons let-field>\n            @for (suffixButton of field.suffixButtons; track suffixButton) {\n                <ng-container matSuffix>\n                    @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                        <button type=\"button\"\n                                mat-icon-button\n                                (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                            <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                        </button>\n                    }\n                </ng-container>\n            }\n        </ng-template>\n        <!-- #endregion -->\n        <!-- #region Debug value -->\n        @if (debugValue) {\n            <code>\n                <pre>{{formValue | json}}</pre>\n            </code>\n        }\n        <!-- #endregion -->\n    </div>\n}", styles: [".mat-checkbox-wrap mat-error{transform:translate(36px,-20px);max-width:93%;font-size:var(--mat-typography-caption-font-size, 12px)}::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-suffix .color-picker{width:40px;display:block}::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .has-time input:first-child{width:84px;max-width:inherit;min-width:84px}::ng-deep .mat-mdc-form-field-type-mat-chip-grid .mat-mdc-form-field-infix{padding-top:7px!important;padding-bottom:7px!important}::ng-deep .mat-mdc-form-field-type-mat-chip-grid .mat-mdc-chip{padding-top:0!important;padding-bottom:0!important;margin-top:2px!important;margin-bottom:2px!important;margin-left:4px!important}.radio-form-field{width:100%}.radio-form-field ::ng-deep .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important}.radio-form-field ::ng-deep .mat-mdc-floating-label{transform:translateY(-1.5em) scale(1)}.radio-form-field mat-radio-group{display:flex;flex-direction:row;gap:20px;padding-top:4px;margin-left:-12px}.radio-form-field .mat-mdc-form-field-infix{min-height:48px;display:flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: 
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: VdGenericFormComponent, isStandalone: true, selector: "vd-generic-form", inputs: { formGroup: "formGroup", classType: "classType", formDefinition: "formDefinition", fieldGroups: "fieldGroups", groupName: "groupName", fieldSets: "fieldSets", context: "context", debugValue: "debugValue", readonly: "readonly", separatorKeysCodes: "separatorKeysCodes" }, outputs: { onInit: "init" }, queries: [{ propertyName: "editorTemplate", first: true, predicate: VdEditorDirective, descendants: true }, { propertyName: "codeTemplate", first: true, predicate: VdCodeDirective, descendants: true }, { propertyName: "fileTemplate", first: true, predicate: VdFileDirective, descendants: true }, { propertyName: "customTemplate", first: true, predicate: VdCustomDirective, descendants: true }, { propertyName: "bottom", first: true, predicate: ["bottom"], descendants: true }, { propertyName: "customFields", first: true, predicate: ["customFields"], descendants: true }, { propertyName: "customFieldsTemplates", predicate: VdGenericFormCustomFieldDirective }], ngImport: i0, template: "@if (formGroup && fieldRows) {\n    <div [formGroup]=\"formGroup!\">\n        <!-- #region Fields -->\n        @for (fields of fieldRows; track fields; let i = $index) {\n            <div layout-gt-sm=\"row\" layout=\"column\">\n                @for (field of fields; track field) {\n                    @if (!field.hidden && !(field.hide && field.hide(formValue, formGroup, context))) {\n                        @switch (field.type) {\n                            <!-- #region Text input -->\n                            @case (FormFieldType.Text) {\n                                <msa-generic-form-text-field [field]=\"field\" [formGroup]=\"formGroup\" [readonly]=\"readonly ?? false\" [context]=\"context\" [attr.flex]=\"field.flex||0\" [attr.data-row]=\"field.row\" layout-margin>\n                                </msa-generic-form-text-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Textarea -->\n                            @case (FormFieldType.TextArea) {\n                                <msa-generic-form-textarea-field [field]=\"field\" [formGroup]=\"formGroup\" [readonly]=\"readonly ?? false\" [context]=\"context\" [attr.flex]=\"field.flex||0\" [attr.data-row]=\"field.row\" layout-margin>\n                                </msa-generic-form-textarea-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Enum -->\n                            @case (FormFieldType.Enum) {\n                                <msa-generic-form-enum-field [field]=\"field\" [formGroup]=\"formGroup\" [readonly]=\"readonly ?? false\" [context]=\"context\" [attr.flex]=\"field.flex||0\" [attr.data-row]=\"field.row\" layout-margin>\n                                </msa-generic-form-enum-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region VdSelect -->\n                            @case (FormFieldType.VdSelect) {\n                                <msa-generic-form-msa-select-field [field]=\"field\" [formGroup]=\"formGroup\" [readonly]=\"readonly ?? false\" [context]=\"context\" [attr.flex]=\"field.flex||0\" [attr.data-row]=\"field.row\" layout-margin>\n                                </msa-generic-form-msa-select-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region VdList -->\n                            @case (FormFieldType.VdList) {\n                                <msa-generic-form-msa-list-field [field]=\"field\" [formGroup]=\"formGroup\" [readonly]=\"readonly ?? false\" [context]=\"context\" [attr.flex]=\"field.flex||0\" [attr.data-row]=\"field.row\" layout-margin>\n                                </msa-generic-form-msa-list-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Chips -->\n                            @case (FormFieldType.Chips) {\n                                <msa-generic-form-chips-field [field]=\"field\" [formGroup]=\"formGroup\" [readonly]=\"readonly ?? false\" [context]=\"context\" [separatorKeysCodes]=\"separatorKeysCodes\" [autocompleteFilteredOptions]=\"autocompleteFilteredOptions\" [filterAutocomplete]=\"filterAutocomplete.bind(this)\" [autocompleteValueSelected]=\"autocompleteValueSelected.bind(this)\" [addChip]=\"addChip.bind(this)\" [onPasteChips]=\"onPasteChips.bind(this)\" [removeChip]=\"removeChip.bind(this)\" [attr.flex]=\"field.flex||0\" [attr.data-row]=\"field.row\" layout-margin>\n                                </msa-generic-form-chips-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region VdChips -->\n                            @case (FormFieldType.VdChips) {\n                                <msa-generic-form-msa-chips-field [field]=\"field\" [formGroup]=\"formGroup\" [readonly]=\"readonly ?? false\" [context]=\"context\" [attr.flex]=\"field.flex||0\" [attr.data-row]=\"field.row\" layout-margin>\n                                </msa-generic-form-msa-chips-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Select -->\n                            @case (FormFieldType.Select) {\n                                <msa-generic-form-select-field [field]=\"field\" [formGroup]=\"formGroup\" [readonly]=\"readonly ?? false\" [context]=\"context\" [attr.flex]=\"field.flex||0\" [attr.data-row]=\"field.row\" layout-margin>\n                                </msa-generic-form-select-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Autocomplete -->\n                            @case (FormFieldType.Autocomplete) {\n                                <msa-generic-form-autocomplete-field [field]=\"field\" [formGroup]=\"formGroup\" [readonly]=\"readonly ?? false\" [context]=\"context\" [autocompleteFilteredOptions]=\"autocompleteFilteredOptions\" [filterAutocomplete]=\"filterAutocomplete.bind(this)\" [attr.flex]=\"field.flex||0\" [attr.data-row]=\"field.row\" layout-margin>\n                                </msa-generic-form-autocomplete-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Date -->\n                            @case (FormFieldType.Date) {\n                                <msa-generic-form-date-field [field]=\"field\" [formGroup]=\"formGroup\" [readonly]=\"readonly ?? false\" [context]=\"context\" [datePickerHeaderComponent]=\"datePickerHeaderComponent\" [handleDatePickerFilterAsync]=\"handleDatePickerFilterAsync.bind(this)\" [handleDatePickerOpened]=\"handleDatePickerOpened.bind(this)\" [attr.flex]=\"field.flex||0\" [attr.data-row]=\"field.row\" layout-margin>\n                                </msa-generic-form-date-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Calendar -->\n                            @case (FormFieldType.Calendar) {\n                                <msa-generic-form-calendar-field [field]=\"field\" [formGroup]=\"formGroup\" [readonly]=\"readonly ?? false\" [context]=\"context\" [datePickerHeaderComponent]=\"datePickerHeaderComponent\" [handleCalendarFilterAsync]=\"handleCalendarFilterAsync.bind(this)\" [attr.flex]=\"field.flex||0\" [attr.data-row]=\"field.row\" layout-margin>\n                                </msa-generic-form-calendar-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Color input -->\n                            @case (FormFieldType.Color) {\n                                <msa-generic-form-color-field [field]=\"field\" [formGroup]=\"formGroup\" [readonly]=\"readonly ?? false\" [context]=\"context\" [attr.flex]=\"field.flex||0\" [attr.data-row]=\"field.row\" layout-margin>\n                                </msa-generic-form-color-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Checkbox -->\n                            @case (FormFieldType.Checkbox) {\n                                <msa-generic-form-checkbox-field [field]=\"field\" [formGroup]=\"formGroup\" [readonly]=\"readonly ?? false\" [context]=\"context\" [attr.flex]=\"field.flex||0\" [attr.data-row]=\"field.row\">\n                                </msa-generic-form-checkbox-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Radio -->\n                            @case(FormFieldType.Radio) {\n                                <msa-generic-form-radio-field [field]=\"field\" [formGroup]=\"formGroup\" [readonly]=\"readonly ?? false\" [context]=\"context\" [attr.flex]=\"field.flex||0\" [attr.data-row]=\"field.row\" layout-margin>\n                                </msa-generic-form-radio-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Editor -->\n                            @case (FormFieldType.Editor) {\n                                <msa-generic-form-editor-field [field]=\"field\" [formGroup]=\"formGroup\" [editorTemplate]=\"editorTemplate\" [attr.flex]=\"field.flex||0\" [attr.data-row]=\"field.row\" layout-margin>\n                                </msa-generic-form-editor-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Code -->\n                            @case (FormFieldType.Code) {\n                                <msa-generic-form-code-field [field]=\"field\" [formGroup]=\"formGroup\" [codeTemplate]=\"codeTemplate\" [attr.flex]=\"field.flex||0\" [attr.data-row]=\"field.row\" layout-margin>\n                                </msa-generic-form-code-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region File -->\n                            @case (FormFieldType.File) {\n                                <msa-generic-form-file-field [field]=\"field\" [formGroup]=\"formGroup\" [readonly]=\"readonly ?? false\" [context]=\"context\" [attr.flex]=\"field.flex||0\" [attr.data-row]=\"field.row\" layout-margin>\n                                </msa-generic-form-file-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Custom -->\n                            @case (FormFieldType.Custom) {\n                                <msa-generic-form-custom-field [field]=\"field\" [formGroup]=\"formGroup\" [customTemplate]=\"customTemplate\" [attr.flex]=\"field.flex||0\" [attr.data-row]=\"field.row\" layout-margin>\n                                </msa-generic-form-custom-field>\n                            }\n                            <!-- #endregion -->\n                        }\n                    }\n                }\n                <!-- #region Template for custom fields -->\n                @for (customField of customFieldsTemplates; track customField) {\n                    @if (customField?.templateRef && customField.row == fields[0]?.row && customField.inline) {\n                        <ng-template [ngTemplateOutlet]=\"$safeNavigationMigration(customField?.templateRef)!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\n                    }\n                }\n                <!-- #endregion -->\n            </div>\n            <!-- #region Template for custom fields -->\n            @if (customFields) {\n                <ng-container [ngTemplateOutlet]=\"customFields\" [ngTemplateOutletContext]=\"{formGroup: formGroup, row: fields[0].row}\"></ng-container>\n            } @for (customField of customFieldsTemplates; track customField) {\n                @if(customField?.templateRef && customField.row ==  ((($safeNavigationMigration(fields[0]?.row) | func:formValue:formGroup:context) ??0)+1) && !customField.inline) {\n                    <ng-template [ngTemplateOutlet]=\"$safeNavigationMigration(customField?.templateRef)!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\n                }\n            }\n            <!-- #endregion -->\n        }\n        <!-- #endregion -->\n        <!-- #region Form bottom -->\n        @if (bottom) {\n            <ng-container [ngTemplateOutlet]=\"bottom\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-container>\n        }\n        <!-- #endregion -->\n        <!-- #region Template for suffix buttons -->\n        <ng-template #suffixButtons let-field>\n            @for (suffixButton of field.suffixButtons; track suffixButton) {\n                <ng-container matSuffix>\n                    @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                        <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                            <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                        </button>\n                    }\n                </ng-container>\n            }\n        </ng-template>\n        <!-- #endregion -->\n        <!-- #region Debug value -->\n        @if (debugValue) {\n            <code>\n                <pre>{{formValue | json}}</pre>\n            </code>\n        }\n        <!-- #endregion -->\n    </div>\n}", styles: [".mat-checkbox-wrap mat-error{transform:translate(36px,-20px);max-width:93%;font-size:var(--mat-typography-caption-font-size, 12px)}::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-suffix .color-picker{width:40px;display:block}::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .has-time input:first-child{width:84px;max-width:inherit;min-width:84px}::ng-deep .mat-mdc-form-field-type-mat-chip-grid .mat-mdc-form-field-infix{padding-top:7px!important;padding-bottom:7px!important}::ng-deep .mat-mdc-form-field-type-mat-chip-grid .mat-mdc-chip{padding-top:0!important;padding-bottom:0!important;margin-top:2px!important;margin-bottom:2px!important;margin-left:4px!important}.radio-form-field{width:100%}.radio-form-field ::ng-deep .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important}.radio-form-field ::ng-deep .mat-mdc-floating-label{transform:translateY(-1.5em) scale(1)}.radio-form-field mat-radio-group{display:flex;flex-direction:row;gap:20px;padding-top:4px;margin-left:-12px}.radio-form-field .mat-mdc-form-field-infix{min-height:48px;display:flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: 
                 //--------------------
                 MatAutocompleteModule }, { kind: "ngmodule", type: MatChipsModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "ngmodule", type: MatRadioModule }, { kind: "ngmodule", type: 
                 //--------------------
@@ -26474,7 +27197,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         MsaGenericFormMsaSelectFieldComponent,
                         MsaGenericFormMsaChipsFieldComponent,
                         MsaGenericFormMsaListFieldComponent
-                    ], template: "@if (formGroup && fieldRows) {\n    <div [formGroup]=\"formGroup!\">\n        <!-- #region Fields -->\n        @for (fields of fieldRows; track fields; let i = $index) {\n            <div layout-gt-sm=\"row\" layout=\"column\">\n                @for (field of fields; track field) {\n                    @if (!field.hidden && !(field.hide && field.hide(formValue, formGroup, context))) {\n                        @switch (field.type) {\n                            <!-- #region Text input -->\n                            @case (FormFieldType.Text) {\n                                <msa-generic-form-text-field [field]=\"field\"\n                                                             [formGroup]=\"formGroup\"\n                                                             [readonly]=\"readonly ?? false\"\n                                                             [context]=\"context\"\n                                                             [attr.flex]=\"field.flex||0\"\n                                                             layout-margin>\n                                </msa-generic-form-text-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Textarea -->\n                            @case (FormFieldType.TextArea) {\n                                <msa-generic-form-textarea-field [field]=\"field\"\n                                                                 [formGroup]=\"formGroup\" [readonly]=\"readonly ?? false\"\n                                                                 [context]=\"context\"\n                                                                 [attr.flex]=\"field.flex||0\"\n                                                                 layout-margin>\n                                </msa-generic-form-textarea-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Enum -->\n                            @case (FormFieldType.Enum) {\n                                <msa-generic-form-enum-field [field]=\"field\" [formGroup]=\"formGroup\"\n                                                             [readonly]=\"readonly ?? false\"\n                                                             [context]=\"context\"\n                                                             [attr.flex]=\"field.flex||0\"\n                                                             layout-margin>\n                                </msa-generic-form-enum-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region VdSelect -->\n                            @case (FormFieldType.VdSelect) {\n                                <msa-generic-form-msa-select-field [field]=\"field\"\n                                                                   [formGroup]=\"formGroup\"\n                                                                   [readonly]=\"readonly ?? false\"\n                                                                   [context]=\"context\"\n                                                                   [attr.flex]=\"field.flex||0\"\n                                                                   layout-margin>\n                                </msa-generic-form-msa-select-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region VdList -->\n                            @case (FormFieldType.VdList) {\n                                <msa-generic-form-msa-list-field [field]=\"field\"\n                                                                 [formGroup]=\"formGroup\"\n                                                                 [readonly]=\"readonly ?? false\"\n                                                                 [context]=\"context\"\n                                                                 [attr.flex]=\"field.flex||0\"\n                                                                 layout-margin>\n                                </msa-generic-form-msa-list-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Chips -->\n                            @case (FormFieldType.Chips) {\n                                <msa-generic-form-chips-field [field]=\"field\"\n                                                              [formGroup]=\"formGroup\"\n                                                              [readonly]=\"readonly ?? false\"\n                                                              [context]=\"context\"\n                                                              [separatorKeysCodes]=\"separatorKeysCodes\"\n                                                              [autocompleteFilteredOptions]=\"autocompleteFilteredOptions\"\n                                                              [filterAutocomplete]=\"filterAutocomplete.bind(this)\"\n                                                              [autocompleteValueSelected]=\"autocompleteValueSelected.bind(this)\"\n                                                              [addChip]=\"addChip.bind(this)\"\n                                                              [onPasteChips]=\"onPasteChips.bind(this)\"\n                                                              [removeChip]=\"removeChip.bind(this)\"\n                                                              [attr.flex]=\"field.flex||0\"\n                                                              layout-margin>\n                                </msa-generic-form-chips-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region VdChips -->\n                            @case (FormFieldType.VdChips) {\n                                <msa-generic-form-msa-chips-field [field]=\"field\"\n                                                                  [formGroup]=\"formGroup\"\n                                                                  [readonly]=\"readonly ?? false\"\n                                                                  [context]=\"context\"\n                                                                  [attr.flex]=\"field.flex||0\"\n                                                                  layout-margin>\n                                </msa-generic-form-msa-chips-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Select -->\n                            @case (FormFieldType.Select) {\n                                <msa-generic-form-select-field [field]=\"field\"\n                                                               [formGroup]=\"formGroup\"\n                                                               [readonly]=\"readonly ?? false\"\n                                                               [context]=\"context\"\n                                                               [attr.flex]=\"field.flex||0\"\n                                                               layout-margin>\n                                </msa-generic-form-select-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Autocomplete -->\n                            @case (FormFieldType.Autocomplete) {\n                                <msa-generic-form-autocomplete-field [field]=\"field\"\n                                                                     [formGroup]=\"formGroup\"\n                                                                     [readonly]=\"readonly ?? false\"\n                                                                     [context]=\"context\"\n                                                                     [autocompleteFilteredOptions]=\"autocompleteFilteredOptions\"\n                                                                     [filterAutocomplete]=\"filterAutocomplete.bind(this)\"\n                                                                     [attr.flex]=\"field.flex||0\"\n                                                                     layout-margin>\n                                </msa-generic-form-autocomplete-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Date -->\n                            @case (FormFieldType.Date) {\n                                <msa-generic-form-date-field [field]=\"field\"\n                                                             [formGroup]=\"formGroup\"\n                                                             [readonly]=\"readonly ?? false\"\n                                                             [context]=\"context\"\n                                                             [datePickerHeaderComponent]=\"datePickerHeaderComponent\"\n                                                             [handleDatePickerFilterAsync]=\"handleDatePickerFilterAsync.bind(this)\"\n                                                             [handleDatePickerOpened]=\"handleDatePickerOpened.bind(this)\"\n                                                             [attr.flex]=\"field.flex||0\"\n                                                             layout-margin>\n                                </msa-generic-form-date-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Calendar -->\n                            @case (FormFieldType.Calendar) {\n                                <msa-generic-form-calendar-field [field]=\"field\"\n                                                                 [formGroup]=\"formGroup\"\n                                                                 [readonly]=\"readonly ?? false\"\n                                                                 [context]=\"context\"\n                                                                 [datePickerHeaderComponent]=\"datePickerHeaderComponent\"\n                                                                 [handleCalendarFilterAsync]=\"handleCalendarFilterAsync.bind(this)\"\n                                                                 [attr.flex]=\"field.flex||0\"\n                                                                 layout-margin>\n                                </msa-generic-form-calendar-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Color input -->\n                            @case (FormFieldType.Color) {\n                                <msa-generic-form-color-field [field]=\"field\"\n                                                              [formGroup]=\"formGroup\"\n                                                              [readonly]=\"readonly ?? false\"\n                                                              [context]=\"context\"\n                                                              [attr.flex]=\"field.flex||0\"\n                                                              layout-margin>\n                                </msa-generic-form-color-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Checkbox -->\n                            @case (FormFieldType.Checkbox) {\n                                <msa-generic-form-checkbox-field [field]=\"field\"\n                                                                 [formGroup]=\"formGroup\"\n                                                                 [readonly]=\"readonly ?? false\"\n                                                                 [context]=\"context\"\n                                                                 [attr.flex]=\"field.flex||0\">\n                                </msa-generic-form-checkbox-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Radio -->\n                            @case(FormFieldType.Radio) {\n                                <msa-generic-form-radio-field [field]=\"field\"\n                                                              [formGroup]=\"formGroup\"\n                                                              [readonly]=\"readonly ?? false\"\n                                                              [context]=\"context\"\n                                                              [attr.flex]=\"field.flex||0\"\n                                                              layout-margin>\n                                </msa-generic-form-radio-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Editor -->\n                            @case (FormFieldType.Editor) {\n                                <msa-generic-form-editor-field [field]=\"field\"\n                                                               [formGroup]=\"formGroup\"\n                                                               [editorTemplate]=\"editorTemplate\"\n                                                               [attr.flex]=\"field.flex||0\"\n                                                               layout-margin>\n                                </msa-generic-form-editor-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Code -->\n                            @case (FormFieldType.Code) {\n                                <msa-generic-form-code-field [field]=\"field\"\n                                                             [formGroup]=\"formGroup\"\n                                                             [codeTemplate]=\"codeTemplate\"\n                                                             [attr.flex]=\"field.flex||0\"\n                                                             layout-margin>\n                                </msa-generic-form-code-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region File -->\n                            @case (FormFieldType.File) {\n                                <msa-generic-form-file-field [field]=\"field\"\n                                                             [formGroup]=\"formGroup\"\n                                                             [readonly]=\"readonly ?? false\"\n                                                             [context]=\"context\"\n                                                             [attr.flex]=\"field.flex||0\"\n                                                             layout-margin>\n                                </msa-generic-form-file-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Custom -->\n                            @case (FormFieldType.Custom) {\n                                <msa-generic-form-custom-field [field]=\"field\"\n                                                               [formGroup]=\"formGroup\"\n                                                               [customTemplate]=\"customTemplate\"\n                                                               [attr.flex]=\"field.flex||0\"\n                                                               layout-margin>\n                                </msa-generic-form-custom-field>\n                            }\n                            <!-- #endregion -->\n                        }\n                    }\n                }\n\n                <!-- #region Template for custom fields -->\n                @for (customField of customFieldsTemplates; track customField) {\n                    @if (customField?.templateRef && customField.row == fields[0]?.row && customField.inline) {\n                        <ng-template [ngTemplateOutlet]=\"$safeNavigationMigration(customField?.templateRef)!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\n                    }\n                }\n                <!-- #endregion -->\n            </div>\n            <!-- #region Template for custom fields -->\n            @if (customFields) {\n                <ng-container [ngTemplateOutlet]=\"customFields\" [ngTemplateOutletContext]=\"{formGroup: formGroup, row: fields[0].row}\"></ng-container>\n            } @for (customField of customFieldsTemplates; track customField) {\n                @if(customField?.templateRef && customField.row ==  ((($safeNavigationMigration(fields[0]?.row) | func:formValue:formGroup:context) ??0)+1) && !customField.inline) {\n                    <ng-template [ngTemplateOutlet]=\"$safeNavigationMigration(customField?.templateRef)!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\n                }\n            }\n            <!-- #endregion -->\n        }\n        <!-- #endregion -->\n\n        <!-- #region Form bottom -->\n        @if (bottom) {\n            <ng-container [ngTemplateOutlet]=\"bottom\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-container>\n        }\n        <!-- #endregion -->\n\n        <!-- #region Template for suffix buttons -->\n        <ng-template #suffixButtons let-field>\n            @for (suffixButton of field.suffixButtons; track suffixButton) {\n                <ng-container matSuffix>\n                    @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                        <button type=\"button\"\n                                mat-icon-button\n                                (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                            <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                        </button>\n                    }\n                </ng-container>\n            }\n        </ng-template>\n        <!-- #endregion -->\n        <!-- #region Debug value -->\n        @if (debugValue) {\n            <code>\n                <pre>{{formValue | json}}</pre>\n            </code>\n        }\n        <!-- #endregion -->\n    </div>\n}", styles: [".mat-checkbox-wrap mat-error{transform:translate(36px,-20px);max-width:93%;font-size:var(--mat-typography-caption-font-size, 12px)}::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-suffix .color-picker{width:40px;display:block}::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .has-time input:first-child{width:84px;max-width:inherit;min-width:84px}::ng-deep .mat-mdc-form-field-type-mat-chip-grid .mat-mdc-form-field-infix{padding-top:7px!important;padding-bottom:7px!important}::ng-deep .mat-mdc-form-field-type-mat-chip-grid .mat-mdc-chip{padding-top:0!important;padding-bottom:0!important;margin-top:2px!important;margin-bottom:2px!important;margin-left:4px!important}.radio-form-field{width:100%}.radio-form-field ::ng-deep .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important}.radio-form-field ::ng-deep .mat-mdc-floating-label{transform:translateY(-1.5em) scale(1)}.radio-form-field mat-radio-group{display:flex;flex-direction:row;gap:20px;padding-top:4px;margin-left:-12px}.radio-form-field .mat-mdc-form-field-infix{min-height:48px;display:flex;align-items:center}\n"] }]
+                    ], template: "@if (formGroup && fieldRows) {\n    <div [formGroup]=\"formGroup!\">\n        <!-- #region Fields -->\n        @for (fields of fieldRows; track fields; let i = $index) {\n            <div layout-gt-sm=\"row\" layout=\"column\">\n                @for (field of fields; track field) {\n                    @if (!field.hidden && !(field.hide && field.hide(formValue, formGroup, context))) {\n                        @switch (field.type) {\n                            <!-- #region Text input -->\n                            @case (FormFieldType.Text) {\n                                <msa-generic-form-text-field [field]=\"field\" [formGroup]=\"formGroup\" [readonly]=\"readonly ?? false\" [context]=\"context\" [attr.flex]=\"field.flex||0\" [attr.data-row]=\"field.row\" layout-margin>\n                                </msa-generic-form-text-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Textarea -->\n                            @case (FormFieldType.TextArea) {\n                                <msa-generic-form-textarea-field [field]=\"field\" [formGroup]=\"formGroup\" [readonly]=\"readonly ?? false\" [context]=\"context\" [attr.flex]=\"field.flex||0\" [attr.data-row]=\"field.row\" layout-margin>\n                                </msa-generic-form-textarea-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Enum -->\n                            @case (FormFieldType.Enum) {\n                                <msa-generic-form-enum-field [field]=\"field\" [formGroup]=\"formGroup\" [readonly]=\"readonly ?? false\" [context]=\"context\" [attr.flex]=\"field.flex||0\" [attr.data-row]=\"field.row\" layout-margin>\n                                </msa-generic-form-enum-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region VdSelect -->\n                            @case (FormFieldType.VdSelect) {\n                                <msa-generic-form-msa-select-field [field]=\"field\" [formGroup]=\"formGroup\" [readonly]=\"readonly ?? false\" [context]=\"context\" [attr.flex]=\"field.flex||0\" [attr.data-row]=\"field.row\" layout-margin>\n                                </msa-generic-form-msa-select-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region VdList -->\n                            @case (FormFieldType.VdList) {\n                                <msa-generic-form-msa-list-field [field]=\"field\" [formGroup]=\"formGroup\" [readonly]=\"readonly ?? false\" [context]=\"context\" [attr.flex]=\"field.flex||0\" [attr.data-row]=\"field.row\" layout-margin>\n                                </msa-generic-form-msa-list-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Chips -->\n                            @case (FormFieldType.Chips) {\n                                <msa-generic-form-chips-field [field]=\"field\" [formGroup]=\"formGroup\" [readonly]=\"readonly ?? false\" [context]=\"context\" [separatorKeysCodes]=\"separatorKeysCodes\" [autocompleteFilteredOptions]=\"autocompleteFilteredOptions\" [filterAutocomplete]=\"filterAutocomplete.bind(this)\" [autocompleteValueSelected]=\"autocompleteValueSelected.bind(this)\" [addChip]=\"addChip.bind(this)\" [onPasteChips]=\"onPasteChips.bind(this)\" [removeChip]=\"removeChip.bind(this)\" [attr.flex]=\"field.flex||0\" [attr.data-row]=\"field.row\" layout-margin>\n                                </msa-generic-form-chips-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region VdChips -->\n                            @case (FormFieldType.VdChips) {\n                                <msa-generic-form-msa-chips-field [field]=\"field\" [formGroup]=\"formGroup\" [readonly]=\"readonly ?? false\" [context]=\"context\" [attr.flex]=\"field.flex||0\" [attr.data-row]=\"field.row\" layout-margin>\n                                </msa-generic-form-msa-chips-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Select -->\n                            @case (FormFieldType.Select) {\n                                <msa-generic-form-select-field [field]=\"field\" [formGroup]=\"formGroup\" [readonly]=\"readonly ?? false\" [context]=\"context\" [attr.flex]=\"field.flex||0\" [attr.data-row]=\"field.row\" layout-margin>\n                                </msa-generic-form-select-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Autocomplete -->\n                            @case (FormFieldType.Autocomplete) {\n                                <msa-generic-form-autocomplete-field [field]=\"field\" [formGroup]=\"formGroup\" [readonly]=\"readonly ?? false\" [context]=\"context\" [autocompleteFilteredOptions]=\"autocompleteFilteredOptions\" [filterAutocomplete]=\"filterAutocomplete.bind(this)\" [attr.flex]=\"field.flex||0\" [attr.data-row]=\"field.row\" layout-margin>\n                                </msa-generic-form-autocomplete-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Date -->\n                            @case (FormFieldType.Date) {\n                                <msa-generic-form-date-field [field]=\"field\" [formGroup]=\"formGroup\" [readonly]=\"readonly ?? false\" [context]=\"context\" [datePickerHeaderComponent]=\"datePickerHeaderComponent\" [handleDatePickerFilterAsync]=\"handleDatePickerFilterAsync.bind(this)\" [handleDatePickerOpened]=\"handleDatePickerOpened.bind(this)\" [attr.flex]=\"field.flex||0\" [attr.data-row]=\"field.row\" layout-margin>\n                                </msa-generic-form-date-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Calendar -->\n                            @case (FormFieldType.Calendar) {\n                                <msa-generic-form-calendar-field [field]=\"field\" [formGroup]=\"formGroup\" [readonly]=\"readonly ?? false\" [context]=\"context\" [datePickerHeaderComponent]=\"datePickerHeaderComponent\" [handleCalendarFilterAsync]=\"handleCalendarFilterAsync.bind(this)\" [attr.flex]=\"field.flex||0\" [attr.data-row]=\"field.row\" layout-margin>\n                                </msa-generic-form-calendar-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Color input -->\n                            @case (FormFieldType.Color) {\n                                <msa-generic-form-color-field [field]=\"field\" [formGroup]=\"formGroup\" [readonly]=\"readonly ?? false\" [context]=\"context\" [attr.flex]=\"field.flex||0\" [attr.data-row]=\"field.row\" layout-margin>\n                                </msa-generic-form-color-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Checkbox -->\n                            @case (FormFieldType.Checkbox) {\n                                <msa-generic-form-checkbox-field [field]=\"field\" [formGroup]=\"formGroup\" [readonly]=\"readonly ?? false\" [context]=\"context\" [attr.flex]=\"field.flex||0\" [attr.data-row]=\"field.row\">\n                                </msa-generic-form-checkbox-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Radio -->\n                            @case(FormFieldType.Radio) {\n                                <msa-generic-form-radio-field [field]=\"field\" [formGroup]=\"formGroup\" [readonly]=\"readonly ?? false\" [context]=\"context\" [attr.flex]=\"field.flex||0\" [attr.data-row]=\"field.row\" layout-margin>\n                                </msa-generic-form-radio-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Editor -->\n                            @case (FormFieldType.Editor) {\n                                <msa-generic-form-editor-field [field]=\"field\" [formGroup]=\"formGroup\" [editorTemplate]=\"editorTemplate\" [attr.flex]=\"field.flex||0\" [attr.data-row]=\"field.row\" layout-margin>\n                                </msa-generic-form-editor-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Code -->\n                            @case (FormFieldType.Code) {\n                                <msa-generic-form-code-field [field]=\"field\" [formGroup]=\"formGroup\" [codeTemplate]=\"codeTemplate\" [attr.flex]=\"field.flex||0\" [attr.data-row]=\"field.row\" layout-margin>\n                                </msa-generic-form-code-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region File -->\n                            @case (FormFieldType.File) {\n                                <msa-generic-form-file-field [field]=\"field\" [formGroup]=\"formGroup\" [readonly]=\"readonly ?? false\" [context]=\"context\" [attr.flex]=\"field.flex||0\" [attr.data-row]=\"field.row\" layout-margin>\n                                </msa-generic-form-file-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Custom -->\n                            @case (FormFieldType.Custom) {\n                                <msa-generic-form-custom-field [field]=\"field\" [formGroup]=\"formGroup\" [customTemplate]=\"customTemplate\" [attr.flex]=\"field.flex||0\" [attr.data-row]=\"field.row\" layout-margin>\n                                </msa-generic-form-custom-field>\n                            }\n                            <!-- #endregion -->\n                        }\n                    }\n                }\n                <!-- #region Template for custom fields -->\n                @for (customField of customFieldsTemplates; track customField) {\n                    @if (customField?.templateRef && customField.row == fields[0]?.row && customField.inline) {\n                        <ng-template [ngTemplateOutlet]=\"$safeNavigationMigration(customField?.templateRef)!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\n                    }\n                }\n                <!-- #endregion -->\n            </div>\n            <!-- #region Template for custom fields -->\n            @if (customFields) {\n                <ng-container [ngTemplateOutlet]=\"customFields\" [ngTemplateOutletContext]=\"{formGroup: formGroup, row: fields[0].row}\"></ng-container>\n            } @for (customField of customFieldsTemplates; track customField) {\n                @if(customField?.templateRef && customField.row ==  ((($safeNavigationMigration(fields[0]?.row) | func:formValue:formGroup:context) ??0)+1) && !customField.inline) {\n                    <ng-template [ngTemplateOutlet]=\"$safeNavigationMigration(customField?.templateRef)!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\n                }\n            }\n            <!-- #endregion -->\n        }\n        <!-- #endregion -->\n        <!-- #region Form bottom -->\n        @if (bottom) {\n            <ng-container [ngTemplateOutlet]=\"bottom\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-container>\n        }\n        <!-- #endregion -->\n        <!-- #region Template for suffix buttons -->\n        <ng-template #suffixButtons let-field>\n            @for (suffixButton of field.suffixButtons; track suffixButton) {\n                <ng-container matSuffix>\n                    @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                        <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                            <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                        </button>\n                    }\n                </ng-container>\n            }\n        </ng-template>\n        <!-- #endregion -->\n        <!-- #region Debug value -->\n        @if (debugValue) {\n            <code>\n                <pre>{{formValue | json}}</pre>\n            </code>\n        }\n        <!-- #endregion -->\n    </div>\n}", styles: [".mat-checkbox-wrap mat-error{transform:translate(36px,-20px);max-width:93%;font-size:var(--mat-typography-caption-font-size, 12px)}::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-suffix .color-picker{width:40px;display:block}::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .has-time input:first-child{width:84px;max-width:inherit;min-width:84px}::ng-deep .mat-mdc-form-field-type-mat-chip-grid .mat-mdc-form-field-infix{padding-top:7px!important;padding-bottom:7px!important}::ng-deep .mat-mdc-form-field-type-mat-chip-grid .mat-mdc-chip{padding-top:0!important;padding-bottom:0!important;margin-top:2px!important;margin-bottom:2px!important;margin-left:4px!important}.radio-form-field{width:100%}.radio-form-field ::ng-deep .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important}.radio-form-field ::ng-deep .mat-mdc-floating-label{transform:translateY(-1.5em) scale(1)}.radio-form-field mat-radio-group{display:flex;flex-direction:row;gap:20px;padding-top:4px;margin-left:-12px}.radio-form-field .mat-mdc-form-field-infix{min-height:48px;display:flex;align-items:center}\n"] }]
         }], propDecorators: { formGroup: [{
                 type: Input
             }], classType: [{
@@ -26922,9 +27645,6 @@ function FormField(args) {
     return function (target, propertyKey) {
         /* Get property name */
         var propertyName = args.name || propertyKey;
-        /* Get property type */
-        var propertyType = Reflect.getMetadata("design:type", target, propertyKey)?.name;
-        console.log('propertyType', Reflect.getMetadata("design:type", target, propertyKey));
         /* Get old form fields */
         let previousFormFields = Reflect.getMetadata(formFieldsMetadataKey, target);
         /* Override the field with the args, if exists */
@@ -27581,6 +28301,42 @@ var MenuScope;
     MenuScope[MenuScope["Admin"] = 1] = "Admin";
 })(MenuScope || (MenuScope = {}));
 
+/**
+ * Class decorator to define a table with its configuration.
+ * @param tableDefinition Optional partial table definition to customize the table's behavior and appearance.
+ * @returns A function that takes the target class and applies the table definition metadata.
+ */
+function Table(tableDefinition) {
+    return function (target) {
+        if (tableDefinition?.columns) {
+            /* Add action menus from table definition, if any */
+            var actionColmun = tableDefinition.columns?.find(x => x.name == 'action');
+            if (!actionColmun) {
+                actionColmun = new TableColumn({
+                    index: 2000,
+                    name: 'action',
+                    columnSets: ['action', 'common'],
+                    type: TableColumnType.Action,
+                    disabled: true,
+                    rowMenuItems: actions,
+                    configurable: false,
+                    stickyEnd: true
+                });
+                /* Add the action column into the table columns */
+                tableDefinition.columns.push(actionColmun);
+            }
+            /* Get custom action, if any */
+            var actions = tableDefinition?.actions;
+            if (actions != null && actionColmun != null) {
+                actionColmun.rowMenuItems ??= [];
+                actions.forEach(y => actionColmun.rowMenuItems.push(y));
+            }
+        }
+        /* Save the table defintion in the metadata */
+        Reflect.defineMetadata(TABLE_DEFINITION_METADATA_KEY, tableDefinition, target);
+    };
+}
+
 /**
  * @class
  */
@@ -30140,7 +30896,7 @@ class VdNavigationDrawerComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: VdNavigationDrawerComponent, deps: [{ token: forwardRef(() => VdLayoutComponent) }, { token: i1$6.Router, optional: true }, { token: i1$3.DomSanitizer }, { token: VdMediaService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: VdNavigationDrawerComponent, isStandalone: true, selector: "vd-navigation-drawer", inputs: { sidenavTitle: "sidenavTitle", icon: "icon", logo: "logo", avatar: "avatar", color: "color", navigationRoute: "navigationRoute", backgroundUrl: "backgroundUrl", sideGt: "sideGt", name: "name", email: "email" }, queries: [{ propertyName: "_drawerMenu", predicate: VdNavigationDrawerMenuDirective, descendants: true }, { propertyName: "_toolbar", predicate: VdNavigationDrawerToolbarDirective, descendants: true }], ngImport: i0, template: "<mat-toolbar [color]=\"color\" [style.background-image]=\"backgroundImage\" [class.vd-toolbar-background]=\"!!isBackgroundAvailable\" class=\"vd-nagivation-drawer-toolbar\" [ngClass]=\"{'drawer-mini': mini && !expanded}\" dense flex layout=\"column\">\r\n    <ng-content select=\"[vd-navigation-drawer-toolbar]\"></ng-content>\r\n    @if (!isCustomToolbar && !mini) {\r\n        @if (email && name) {\r\n            <div class=\"vd-navigation-drawer-name\">{{name}}</div>\r\n        }\r\n        @if (email || name) {\r\n            <div class=\"vd-navigation-drawer-menu-toggle\" href (click)=\"toggleMenu()\">\r\n                <span class=\"vd-navigation-drawer-label\">{{ email || name }}</span>\r\n                @if (isMenuAvailable) {\r\n                    <button mat-icon-button class=\"vd-navigation-drawer-menu-button\">\r\n                        @if (!menuToggled) {\r\n                            <mat-icon>arrow_drop_down</mat-icon>\r\n                        }\r\n                        @if (menuToggled) {\r\n                            <mat-icon>arrow_drop_up</mat-icon>\r\n                        }\r\n                    </button>\r\n                }\r\n            </div>\r\n        }\r\n    }\r\n    @if (mini && !expanded) {\r\n        <div layout=\"column\" layout-align=\"center center\" flex>\r\n            <button mat-icon-button (click)=\"toggleMenu()\">\r\n                <mat-icon fontSet=\"material-symbols-outlined\">format_list_bulleted</mat-icon>\r\n            </button>\r\n        </div>\r\n    }\r\n</mat-toolbar>\r\n\r\n<!-- Main Content: Expands when menu is NOT toggled -->\r\n<div class=\"vd-navigation-drawer-content scrollbar-primary vd-collapse-container\"\r\n     [class.is-expanded]=\"!menuToggled\"\r\n     [ngClass]=\"{'drawer-mini': mini}\">\r\n    <div class=\"vd-collapse-inner\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>\r\n\r\n<!-- Menu Content: Expands when menu IS toggled -->\r\n<div class=\"vd-navigation-drawer-menu-content vd-collapse-container\"\r\n     [class.is-expanded]=\"menuToggled\"\r\n     [ngClass]=\"{'drawer-mini': mini}\">\r\n    <div class=\"vd-collapse-inner\">\r\n        <ng-content select=\"[vd-navigation-drawer-menu]\"></ng-content>\r\n    </div>\r\n</div>", styles: [":host{width:100%}:host .vd-collapse-container{display:grid;grid-template-rows:0fr;transition:grid-template-rows .15s ease-in-out}:host .vd-collapse-container.is-expanded{grid-template-rows:1fr}:host .vd-collapse-inner{min-height:0;overflow:hidden}:host .vd-navigation-drawer-content.ng-animating,:host .vd-navigation-drawer-menu-content.ng-animating{overflow:hidden}:host .vd-navigation-drawer-content ::ng-deep .mat-mdc-nav-list,:host .vd-navigation-drawer-menu-content ::ng-deep .mat-mdc-nav-list{padding-top:0!important;padding-bottom:12px}:host .vd-navigation-drawer-content.drawer-mini ::ng-deep .mat-mdc-nav-list,:host .vd-navigation-drawer-menu-content.drawer-mini ::ng-deep .mat-mdc-nav-list{padding-bottom:0!important}:host mat-toolbar:not(.drawer-mini){padding:16px}:host mat-toolbar.drawer-mini{padding:0!important}:host mat-toolbar.vd-nagivation-drawer-toolbar{flex-direction:column;align-items:stretch}:host mat-toolbar.vd-toolbar-background{background-repeat:no-repeat;background-size:cover}:host mat-toolbar.vd-nagivation-drawer-toolbar:not(.drawer-mini){flex-direction:column;height:auto!important;display:block!important}:host mat-toolbar .vd-navigation-drawer-toolbar-content{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;align-content:center;max-width:100%;justify-content:flex-start}:host mat-toolbar .vd-navigation-drawer-toolbar-content .vd-nagivation-drawer-toolbar-avatar{border-radius:50%;height:60px;width:60px;margin:0 12px 12px 0}:host mat-toolbar .vd-navigation-drawer-toolbar-content .vd-navigation-drawer-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host mat-toolbar .vd-navigation-drawer-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host mat-toolbar .vd-navigation-drawer-menu-toggle{flex-direction:row;box-sizing:border-box;display:flex;cursor:pointer}:host mat-toolbar .vd-navigation-drawer-menu-toggle .vd-navigation-drawer-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host mat-toolbar .vd-navigation-drawer-menu-toggle .vd-navigation-drawer-menu-button{height:24px;line-height:24px;width:24px;padding:0!important}:host>div{overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i4$5.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: VdNavigationDrawerComponent, isStandalone: true, selector: "vd-navigation-drawer", inputs: { sidenavTitle: "sidenavTitle", icon: "icon", logo: "logo", avatar: "avatar", color: "color", navigationRoute: "navigationRoute", backgroundUrl: "backgroundUrl", sideGt: "sideGt", name: "name", email: "email" }, queries: [{ propertyName: "_drawerMenu", predicate: VdNavigationDrawerMenuDirective, descendants: true }, { propertyName: "_toolbar", predicate: VdNavigationDrawerToolbarDirective, descendants: true }], ngImport: i0, template: "<mat-toolbar [color]=\"color\" [style.background-image]=\"backgroundImage\" [class.vd-toolbar-background]=\"!!isBackgroundAvailable\" class=\"vd-nagivation-drawer-toolbar\" [ngClass]=\"{'drawer-mini': mini && !expanded}\" dense flex layout=\"column\">\r\n    <ng-content select=\"[vd-navigation-drawer-toolbar]\"></ng-content>\r\n    @if (!isCustomToolbar && !mini) {\r\n        @if (email && name) {\r\n            <div class=\"vd-navigation-drawer-name\">{{name}}</div>\r\n        }\r\n        @if (email || name) {\r\n            <div class=\"vd-navigation-drawer-menu-toggle\" href (click)=\"toggleMenu()\">\r\n                <span class=\"vd-navigation-drawer-label\">{{ email || name }}</span>\r\n                @if (isMenuAvailable) {\r\n                    <button mat-icon-button class=\"vd-navigation-drawer-menu-button\">\r\n                        @if (!menuToggled) {\r\n                            <mat-icon>arrow_drop_down</mat-icon>\r\n                        }\r\n                        @if (menuToggled) {\r\n                            <mat-icon>arrow_drop_up</mat-icon>\r\n                        }\r\n                    </button>\r\n                }\r\n            </div>\r\n        }\r\n    }\r\n    @if (mini && !expanded) {\r\n        <div layout=\"column\" layout-align=\"center center\" flex>\r\n            <button mat-icon-button (click)=\"toggleMenu()\">\r\n                <mat-icon fontSet=\"material-symbols-outlined\">format_list_bulleted</mat-icon>\r\n            </button>\r\n        </div>\r\n    }\r\n</mat-toolbar>\r\n<!-- Main Content: Expands when menu is NOT toggled -->\r\n<div class=\"vd-navigation-drawer-content scrollbar-primary vd-collapse-container\" [class.is-expanded]=\"!menuToggled\" [ngClass]=\"{'drawer-mini': mini}\">\r\n    <div class=\"vd-collapse-inner\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>\r\n<!-- Menu Content: Expands when menu IS toggled -->\r\n<div class=\"vd-navigation-drawer-menu-content vd-collapse-container\" [class.is-expanded]=\"menuToggled\" [ngClass]=\"{'drawer-mini': mini}\">\r\n    <div class=\"vd-collapse-inner\">\r\n        <ng-content select=\"[vd-navigation-drawer-menu]\"></ng-content>\r\n    </div>\r\n</div>", styles: [":host{width:100%}:host .vd-collapse-container{grid-template-rows:0fr;height:0%;transition:grid-template-rows .15s ease-in-out}:host .vd-collapse-container.is-expanded{grid-template-rows:1fr;height:calc(100% - 58px)}:host .vd-collapse-inner{min-height:0;overflow:hidden}:host .vd-navigation-drawer-content.ng-animating,:host .vd-navigation-drawer-menu-content.ng-animating{overflow:hidden}:host .vd-navigation-drawer-content ::ng-deep .mat-mdc-nav-list,:host .vd-navigation-drawer-menu-content ::ng-deep .mat-mdc-nav-list{padding-top:0!important;padding-bottom:12px}:host .vd-navigation-drawer-content.drawer-mini ::ng-deep .mat-mdc-nav-list,:host .vd-navigation-drawer-menu-content.drawer-mini ::ng-deep .mat-mdc-nav-list{padding-bottom:0!important}:host mat-toolbar:not(.drawer-mini){padding:16px}:host mat-toolbar.drawer-mini{padding:0!important}:host mat-toolbar.vd-nagivation-drawer-toolbar{flex-direction:column;align-items:stretch}:host mat-toolbar.vd-toolbar-background{background-repeat:no-repeat;background-size:cover}:host mat-toolbar.vd-nagivation-drawer-toolbar:not(.drawer-mini){flex-direction:column;height:auto!important;display:block!important}:host mat-toolbar .vd-navigation-drawer-toolbar-content{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;align-content:center;max-width:100%;justify-content:flex-start}:host mat-toolbar .vd-navigation-drawer-toolbar-content .vd-nagivation-drawer-toolbar-avatar{border-radius:50%;height:60px;width:60px;margin:0 12px 12px 0}:host mat-toolbar .vd-navigation-drawer-toolbar-content .vd-navigation-drawer-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host mat-toolbar .vd-navigation-drawer-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host mat-toolbar .vd-navigation-drawer-menu-toggle{flex-direction:row;box-sizing:border-box;display:flex;cursor:pointer}:host mat-toolbar .vd-navigation-drawer-menu-toggle .vd-navigation-drawer-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host mat-toolbar .vd-navigation-drawer-menu-toggle .vd-navigation-drawer-menu-button{height:24px;line-height:24px;width:24px;padding:0!important}:host>div{overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i4$5.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: VdNavigationDrawerComponent, decorators: [{
             type: Component,
@@ -30149,7 +30905,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         MatToolbarModule,
                         MatIcon,
                         MatIconButton
-                    ], template: "<mat-toolbar [color]=\"color\" [style.background-image]=\"backgroundImage\" [class.vd-toolbar-background]=\"!!isBackgroundAvailable\" class=\"vd-nagivation-drawer-toolbar\" [ngClass]=\"{'drawer-mini': mini && !expanded}\" dense flex layout=\"column\">\r\n    <ng-content select=\"[vd-navigation-drawer-toolbar]\"></ng-content>\r\n    @if (!isCustomToolbar && !mini) {\r\n        @if (email && name) {\r\n            <div class=\"vd-navigation-drawer-name\">{{name}}</div>\r\n        }\r\n        @if (email || name) {\r\n            <div class=\"vd-navigation-drawer-menu-toggle\" href (click)=\"toggleMenu()\">\r\n                <span class=\"vd-navigation-drawer-label\">{{ email || name }}</span>\r\n                @if (isMenuAvailable) {\r\n                    <button mat-icon-button class=\"vd-navigation-drawer-menu-button\">\r\n                        @if (!menuToggled) {\r\n                            <mat-icon>arrow_drop_down</mat-icon>\r\n                        }\r\n                        @if (menuToggled) {\r\n                            <mat-icon>arrow_drop_up</mat-icon>\r\n                        }\r\n                    </button>\r\n                }\r\n            </div>\r\n        }\r\n    }\r\n    @if (mini && !expanded) {\r\n        <div layout=\"column\" layout-align=\"center center\" flex>\r\n            <button mat-icon-button (click)=\"toggleMenu()\">\r\n                <mat-icon fontSet=\"material-symbols-outlined\">format_list_bulleted</mat-icon>\r\n            </button>\r\n        </div>\r\n    }\r\n</mat-toolbar>\r\n\r\n<!-- Main Content: Expands when menu is NOT toggled -->\r\n<div class=\"vd-navigation-drawer-content scrollbar-primary vd-collapse-container\"\r\n     [class.is-expanded]=\"!menuToggled\"\r\n     [ngClass]=\"{'drawer-mini': mini}\">\r\n    <div class=\"vd-collapse-inner\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>\r\n\r\n<!-- Menu Content: Expands when menu IS toggled -->\r\n<div class=\"vd-navigation-drawer-menu-content vd-collapse-container\"\r\n     [class.is-expanded]=\"menuToggled\"\r\n     [ngClass]=\"{'drawer-mini': mini}\">\r\n    <div class=\"vd-collapse-inner\">\r\n        <ng-content select=\"[vd-navigation-drawer-menu]\"></ng-content>\r\n    </div>\r\n</div>", styles: [":host{width:100%}:host .vd-collapse-container{display:grid;grid-template-rows:0fr;transition:grid-template-rows .15s ease-in-out}:host .vd-collapse-container.is-expanded{grid-template-rows:1fr}:host .vd-collapse-inner{min-height:0;overflow:hidden}:host .vd-navigation-drawer-content.ng-animating,:host .vd-navigation-drawer-menu-content.ng-animating{overflow:hidden}:host .vd-navigation-drawer-content ::ng-deep .mat-mdc-nav-list,:host .vd-navigation-drawer-menu-content ::ng-deep .mat-mdc-nav-list{padding-top:0!important;padding-bottom:12px}:host .vd-navigation-drawer-content.drawer-mini ::ng-deep .mat-mdc-nav-list,:host .vd-navigation-drawer-menu-content.drawer-mini ::ng-deep .mat-mdc-nav-list{padding-bottom:0!important}:host mat-toolbar:not(.drawer-mini){padding:16px}:host mat-toolbar.drawer-mini{padding:0!important}:host mat-toolbar.vd-nagivation-drawer-toolbar{flex-direction:column;align-items:stretch}:host mat-toolbar.vd-toolbar-background{background-repeat:no-repeat;background-size:cover}:host mat-toolbar.vd-nagivation-drawer-toolbar:not(.drawer-mini){flex-direction:column;height:auto!important;display:block!important}:host mat-toolbar .vd-navigation-drawer-toolbar-content{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;align-content:center;max-width:100%;justify-content:flex-start}:host mat-toolbar .vd-navigation-drawer-toolbar-content .vd-nagivation-drawer-toolbar-avatar{border-radius:50%;height:60px;width:60px;margin:0 12px 12px 0}:host mat-toolbar .vd-navigation-drawer-toolbar-content .vd-navigation-drawer-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host mat-toolbar .vd-navigation-drawer-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host mat-toolbar .vd-navigation-drawer-menu-toggle{flex-direction:row;box-sizing:border-box;display:flex;cursor:pointer}:host mat-toolbar .vd-navigation-drawer-menu-toggle .vd-navigation-drawer-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host mat-toolbar .vd-navigation-drawer-menu-toggle .vd-navigation-drawer-menu-button{height:24px;line-height:24px;width:24px;padding:0!important}:host>div{overflow:hidden}\n"] }]
+                    ], template: "<mat-toolbar [color]=\"color\" [style.background-image]=\"backgroundImage\" [class.vd-toolbar-background]=\"!!isBackgroundAvailable\" class=\"vd-nagivation-drawer-toolbar\" [ngClass]=\"{'drawer-mini': mini && !expanded}\" dense flex layout=\"column\">\r\n    <ng-content select=\"[vd-navigation-drawer-toolbar]\"></ng-content>\r\n    @if (!isCustomToolbar && !mini) {\r\n        @if (email && name) {\r\n            <div class=\"vd-navigation-drawer-name\">{{name}}</div>\r\n        }\r\n        @if (email || name) {\r\n            <div class=\"vd-navigation-drawer-menu-toggle\" href (click)=\"toggleMenu()\">\r\n                <span class=\"vd-navigation-drawer-label\">{{ email || name }}</span>\r\n                @if (isMenuAvailable) {\r\n                    <button mat-icon-button class=\"vd-navigation-drawer-menu-button\">\r\n                        @if (!menuToggled) {\r\n                            <mat-icon>arrow_drop_down</mat-icon>\r\n                        }\r\n                        @if (menuToggled) {\r\n                            <mat-icon>arrow_drop_up</mat-icon>\r\n                        }\r\n                    </button>\r\n                }\r\n            </div>\r\n        }\r\n    }\r\n    @if (mini && !expanded) {\r\n        <div layout=\"column\" layout-align=\"center center\" flex>\r\n            <button mat-icon-button (click)=\"toggleMenu()\">\r\n                <mat-icon fontSet=\"material-symbols-outlined\">format_list_bulleted</mat-icon>\r\n            </button>\r\n        </div>\r\n    }\r\n</mat-toolbar>\r\n<!-- Main Content: Expands when menu is NOT toggled -->\r\n<div class=\"vd-navigation-drawer-content scrollbar-primary vd-collapse-container\" [class.is-expanded]=\"!menuToggled\" [ngClass]=\"{'drawer-mini': mini}\">\r\n    <div class=\"vd-collapse-inner\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>\r\n<!-- Menu Content: Expands when menu IS toggled -->\r\n<div class=\"vd-navigation-drawer-menu-content vd-collapse-container\" [class.is-expanded]=\"menuToggled\" [ngClass]=\"{'drawer-mini': mini}\">\r\n    <div class=\"vd-collapse-inner\">\r\n        <ng-content select=\"[vd-navigation-drawer-menu]\"></ng-content>\r\n    </div>\r\n</div>", styles: [":host{width:100%}:host .vd-collapse-container{grid-template-rows:0fr;height:0%;transition:grid-template-rows .15s ease-in-out}:host .vd-collapse-container.is-expanded{grid-template-rows:1fr;height:calc(100% - 58px)}:host .vd-collapse-inner{min-height:0;overflow:hidden}:host .vd-navigation-drawer-content.ng-animating,:host .vd-navigation-drawer-menu-content.ng-animating{overflow:hidden}:host .vd-navigation-drawer-content ::ng-deep .mat-mdc-nav-list,:host .vd-navigation-drawer-menu-content ::ng-deep .mat-mdc-nav-list{padding-top:0!important;padding-bottom:12px}:host .vd-navigation-drawer-content.drawer-mini ::ng-deep .mat-mdc-nav-list,:host .vd-navigation-drawer-menu-content.drawer-mini ::ng-deep .mat-mdc-nav-list{padding-bottom:0!important}:host mat-toolbar:not(.drawer-mini){padding:16px}:host mat-toolbar.drawer-mini{padding:0!important}:host mat-toolbar.vd-nagivation-drawer-toolbar{flex-direction:column;align-items:stretch}:host mat-toolbar.vd-toolbar-background{background-repeat:no-repeat;background-size:cover}:host mat-toolbar.vd-nagivation-drawer-toolbar:not(.drawer-mini){flex-direction:column;height:auto!important;display:block!important}:host mat-toolbar .vd-navigation-drawer-toolbar-content{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;align-content:center;max-width:100%;justify-content:flex-start}:host mat-toolbar .vd-navigation-drawer-toolbar-content .vd-nagivation-drawer-toolbar-avatar{border-radius:50%;height:60px;width:60px;margin:0 12px 12px 0}:host mat-toolbar .vd-navigation-drawer-toolbar-content .vd-navigation-drawer-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host mat-toolbar .vd-navigation-drawer-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host mat-toolbar .vd-navigation-drawer-menu-toggle{flex-direction:row;box-sizing:border-box;display:flex;cursor:pointer}:host mat-toolbar .vd-navigation-drawer-menu-toggle .vd-navigation-drawer-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host mat-toolbar .vd-navigation-drawer-menu-toggle .vd-navigation-drawer-menu-button{height:24px;line-height:24px;width:24px;padding:0!important}:host>div{overflow:hidden}\n"] }]
         }], ctorParameters: () => [{ type: VdLayoutComponent, decorators: [{
                     type: Inject,
                     args: [forwardRef(() => VdLayoutComponent)]
@@ -30333,6 +31089,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                 args: ['mediaStyles']
             }] } });
 
+/**
+ * Decorator function to define columns for a table object.
+ * @param type The constructor function of the table object.
+ * @returns A decorator function.
+ */
+function ColumnObject(type) {
+    return function (target, propertyKey) {
+        /* Retrieve table definition */
+        var tableDef = getTableDefinition(type);
+        /* Retrieve columns from the table definition */
+        var columns = tableDef.columns;
+        /* Update column names with property key prefix */
+        columns?.forEach(x => x.name = `${propertyKey}.${x.name}`);
+        /* Get existing table columns from metadata */
+        let previousTableColumns = Reflect.getMetadata(TABLE_COLUMNS_METADATA_KEY, target);
+        /* Create a copy of the existing columns array and append new columns */
+        let tableColumns = previousTableColumns ? previousTableColumns.concat(columns ?? []) : [];
+        /* Set column index if not already set */
+        tableColumns.forEach((x, i) => x.index ??= i);
+        /* Sort the columns by index */
+        Utils.sortArray(tableColumns, 'index');
+        /* Override the table columns in the metadata */
+        Reflect.defineMetadata(TABLE_COLUMNS_METADATA_KEY, tableColumns, target);
+    };
+}
+
 /**
  * VdTableFieldDirective class
  */
@@ -30518,5 +31300,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AbstractMatFormField, AbstractSelectFormField, ActionItem, Api, ApiResponse, AppEvent, AppEventType, AppSetting, AppStorage, AsyncValidationDirective, AuditEntity, AuditUser, AuthHelper, AuthUser, AutofocusDirective, BaseComponent, BaseDirective, BaseEntity, BaseInterceptor, BaseService, BindPipe, CachingInterceptor, Column, ColumnObject, Common, CommonError, CommonHandlerContext, ConfirmExitGuard, ContextHelper, DIALOG_PROVIDER, DIALOG_PROVIDER_FACTORY, DataSourceFilterDirective, DataSourcePipe, DatePickerHeaderComponent, DisableControlDirective, Display, DisplayNameNumberProjection, DisplayNameProjection, DynamicBuilder, DynamicComponentCompiler, EXPORT_DIALOG_COMPONENT, EmptyStringResetDirective, EnumMetadata, EnumPipe, EnumService, EqualValidator, ErrorMessageBindingStrategy, EventQueueService, Facet, FacetValue, FieldFuncPipe, FileControlDirective, FileService, FileSizePipe, FilterClearComponent, FilterDateComponent, FilterGlue, FilterInputComponent, FilterOperator, FilterPipe, FilterSelectComponent, FirstLetterPipe, Form, FormArrayPipe, FormBuilderConfiguration, FormControlPipe, FormDefinition, FormField, FormFieldDefinition, FormFieldGroup, FormFieldGroupDefinition, FormFieldType, FormGroupPipe, FuncPipe, GenericEmbeddedListComponent, GenericFormBaseComponent, GenericFormComponent, GenericListComponent, GenericReactiveFormComponent, GenericService, GlobalRoles, Grid, GroupFilterPipe, HtmlControlTemplateDirective, IAbstractControl, Icon, ImageFileControlDirective, IpVersion, KeyValue, KeysPipe, LayoutToggle, LoadingScreenInterceptor, LoadingScreenService, MEDIA_PROVIDER, MEDIA_PROVIDER_FACTORY, MatFormFieldEditorDirective, MatFormFieldRadioDirective, MatFormFieldReadonlyDirective, Menu, MenuClient, MenuDepartment, MenuFormIncludesResolve, MenuItem, MenuItemClient, MenuItemDepartment, MenuItemFormIncludesResolve, MenuItemService, MenuItemTarget, MenuListProjectionResolve, MenuResolve, MenuScope, MenuSettings, MenuSettingsResolve, MessageType, ModifiableEntity, MonthNamePipe, MsaEditFormActionsComponent, MsaEnumDisplayComponent, NameNumberProjection, NameProjection, NativeElementInjectorDirective, NumericValueType, OnlyNumberDirective, OrderPipe, Pagination, PaginatorIntl, ParseDecimalDirective, Permission, PlaceholderPipe, PrefixDirective, PrintService, PropertyJoinPipe, ReactiveFormConfig, ReactiveTypedFormsModule, RemoveWhitespaceDirective, ResetFormType, RxFormArray, RxFormBuilder, RxFormControl, RxFormControlDirective, RxFormGroup, RxReactiveFormsModule, RxwebFormDirective, RxwebValidators, SafeHtmlPipe, Salutation, SaveAction, SplitPipe, SubMenuResolve, SuffixButton, Table, TableColumn, TableColumnConfig, TableColumnType, TableConfig, TableDataSource, TableDefinition, TableQueryConfig, TableStaticDataSource, TaskDialogData, Templates, TimePipe, TitleCase, TitleProjection, TruncatePipe, TypedForm, TypedFormBuilder, UniqueValidatorDirective, UrlValidationType, Utils, ValidationAlphabetLocale, ValueAccessorBase, ValuesPipe, VdAlertDialogComponent, VdChipsComponent, VdCodeDirective, VdConfirmDialogComponent, VdCustomDirective, VdDelayedHoverDirective, VdDialogActionsDirective, VdDialogComponent, VdDialogContentDirective, VdDialogHeaderActionsComponent, VdDialogHeaderComponent, VdDialogMaximizeDirective, VdDialogService, VdDialogTitleDirective, VdDynamicMenuComponent, VdDynamicTableComponent, VdDynamicTableConfigDialogComponent, VdEditorDirective, VdFileDirective, VdFileInputComponent, VdFileModule, VdFilterOptionDirective, VdGenericFormComponent, VdGenericFormCustomFieldDirective, VdLayoutCardOverComponent, VdLayoutCloseDirective, VdLayoutCompactComponent, VdLayoutComponent, VdLayoutFooterComponent, VdLayoutManageListCloseDirective, VdLayoutManageListComponent, VdLayoutManageListOpenDirective, VdLayoutManageListToggleDirective, VdLayoutNavComponent, VdLayoutNavListCloseDirective, VdLayoutNavListComponent, VdLayoutNavListOpenDirective, VdLayoutNavListToggleDirective, VdLayoutOpenDirective, VdLayoutToggleDirective, VdListOptionDirective, VdListToolbarComponent, VdMediaService, VdMediaToggleDirective, VdMenuComponent, VdNavigationDrawerComponent, VdNavigationDrawerMenuDirective, VdNavigationDrawerToolbarDirective, VdPromptDialogComponent, VdSelectComponent, VdSelectOptionDirective, VdSelectTriggerDirective, VdTableFieldDirective, VdTaskDialogComponent, allOf, allOfAsync, alpha, alphaAsync, alphaNumeric, alphaNumericAsync, and, ascii, async, blacklist, choice, choiceAsync, compare, compose, contains, containsAsync, creditCard, creditCardAsync, cusip, custom, customAsync, dataUri, date, dateAsync, different, digit, disable, elementClass, email, endpointMetadataKey, endsWith, endsWithAsync, error, escape, even, extension, extensionAsync, factor, factorAsync, file, fileAsync, fileSize, fileSizeAsync, formDefinitionMetadataKey, formFieldGroupsMetadataKey, formFieldsMetadataKey, getDisplay, getEndpoint, getFormDefinition, getFormGroups, getTableDefinition, graphql, greaterThan, greaterThanAsync, greaterThanEqualTo, greaterThanEqualToAsync, grid, headerMetadataKey, hexColor, iban, ibanAsync, image, imageAsync, json, latLong, latitude, leapYear, lessThan, lessThanAsync, lessThanEqualTo, lessThanEqualToAsync, longitude, lowerCase, ltrim, mac, mask, maxDate, maxDateAsync, maxLength, maxLengthAsync, maxNumber, maxNumberAsync, maxTime, maxTimeAsync, minDate, minDateAsync, minLength, minLengthAsync, minNumber, minNumberAsync, minTime, minTimeAsync, mixinDisableRipple, mixinDisabled, model, noneOf, noneOfAsync, not, notEmpty, numeric, numericAsync, odd, oneOf, oneOfAsync, or, parseProjectionString, password, passwordAsync, pattern, patternAsync, port, prefix, primeNumber, prop, propArray, propObject, range, rangeAsync, required, requiredTrue, rtrim, rule, sanitize, startsWith, startsWithAsync, stripLow, suffix, tableColumnsMetadataKey, tableDefinitionMetadataKey, time, timeAsync, toBoolean, toDate, toDouble, toFloat, toInt, toString, trim, unique, updateOn, upperCase, url, urlAsync, whitelist };
+export { AbstractMatFormField, AbstractSelectFormField, ActionItem, Api, ApiResponse, AppEvent, AppEventType, AppSetting, AppStorage, AsyncValidationDirective, AuditEntity, AuditUser, AuthHelper, AuthUser, AutofocusDirective, BaseComponent, BaseDirective, BaseEntity, BaseInterceptor, BaseService, BindPipe, CachingInterceptor, Column, ColumnObject, Common, CommonError, CommonHandlerContext, ConfirmExitGuard, ContextHelper, DIALOG_PROVIDER, DIALOG_PROVIDER_FACTORY, DataSourceFilterDirective, DataSourcePipe, DatePickerHeaderComponent, DisableControlDirective, Display, DisplayNameNumberProjection, DisplayNameProjection, DynamicBuilder, DynamicComponentCompiler, EXPORT_DIALOG_COMPONENT, EmptyStringResetDirective, EnumMetadata, EnumPipe, EnumService, EqualValidator, ErrorMessageBindingStrategy, EventQueueService, Facet, FacetValue, FieldFuncPipe, FileControlDirective, FileService, FileSizePipe, FilterClearComponent, FilterDateComponent, FilterGlue, FilterInputComponent, FilterOperator, FilterPipe, FilterSelectComponent, FirstLetterPipe, Form, FormArrayPipe, FormBuilderConfiguration, FormControlPipe, FormDefinition, FormField, FormFieldDefinition, FormFieldGroup, FormFieldGroupDefinition, FormFieldType, FormGroupPipe, FuncPipe, GenericEmbeddedListComponent, GenericFormBaseComponent, GenericFormComponent, GenericListComponent, GenericReactiveFormComponent, GenericService, GlobalRoles, Grid, GroupFilterPipe, HtmlControlTemplateDirective, IAbstractControl, Icon, ImageFileControlDirective, IpVersion, KeyValue, KeysPipe, LayoutToggle, LoadingScreenInterceptor, LoadingScreenService, MEDIA_PROVIDER, MEDIA_PROVIDER_FACTORY, MatFormFieldEditorDirective, MatFormFieldRadioDirective, MatFormFieldReadonlyDirective, MatInputRequiredDirective, MatSelectRequiredDirective, Menu, MenuClient, MenuDepartment, MenuFormIncludesResolve, MenuItem, MenuItemClient, MenuItemDepartment, MenuItemFormIncludesResolve, MenuItemService, MenuItemTarget, MenuListProjectionResolve, MenuResolve, MenuScope, MenuSettings, MenuSettingsResolve, MessageType, ModifiableEntity, MonthNamePipe, MsaEditFormActionsComponent, MsaEnumDisplayComponent, MsaSelectRequiredDirective, NameNumberProjection, NameProjection, NativeElementInjectorDirective, NumericValueType, OnlyNumberDirective, OrderPipe, Pagination, PaginatorIntl, ParseDecimalDirective, Permission, PlaceholderPipe, PrefixDirective, PrintService, PropertyJoinPipe, ReactiveFormConfig, ReactiveTypedFormsModule, RemoveWhitespaceDirective, ResetFormType, RxFormArray, RxFormBuilder, RxFormControl, RxFormControlDirective, RxFormGroup, RxReactiveFormsModule, RxwebFormDirective, RxwebValidators, SafeHtmlPipe, Salutation, SaveAction, SplitPipe, SubMenuResolve, SuffixButton, TABLE_COLUMNS_METADATA_KEY, TABLE_DEFINITION_METADATA_KEY, Table, TableColumn, TableColumnConfig, TableColumnType, TableConfig, TableDataSource, TableDefinition, TableQueryConfig, TableStaticDataSource, TaskDialogData, Templates, TimePipe, TitleCase, TitleProjection, TruncatePipe, TypedForm, TypedFormBuilder, UniqueValidatorDirective, UrlValidationType, Utils, ValidationAlphabetLocale, ValueAccessorBase, ValuesPipe, VdAlertDialogComponent, VdChipsComponent, VdCodeDirective, VdConfirmDialogComponent, VdCustomDirective, VdDelayedHoverDirective, VdDialogActionsDirective, VdDialogComponent, VdDialogContentDirective, VdDialogHeaderActionsComponent, VdDialogHeaderComponent, VdDialogMaximizeDirective, VdDialogService, VdDialogTitleDirective, VdDynamicMenuComponent, VdDynamicTableComponent, VdDynamicTableConfigDialogComponent, VdEditorDirective, VdFileDirective, VdFileInputComponent, VdFileModule, VdFilterOptionDirective, VdGenericFormComponent, VdGenericFormCustomFieldDirective, VdLayoutCardOverComponent, VdLayoutCloseDirective, VdLayoutCompactComponent, VdLayoutComponent, VdLayoutFooterComponent, VdLayoutManageListCloseDirective, VdLayoutManageListComponent, VdLayoutManageListOpenDirective, VdLayoutManageListToggleDirective, VdLayoutNavComponent, VdLayoutNavListCloseDirective, VdLayoutNavListComponent, VdLayoutNavListOpenDirective, VdLayoutNavListToggleDirective, VdLayoutOpenDirective, VdLayoutToggleDirective, VdListOptionDirective, VdListToolbarComponent, VdMediaService, VdMediaToggleDirective, VdMenuComponent, VdNavigationDrawerComponent, VdNavigationDrawerMenuDirective, VdNavigationDrawerToolbarDirective, VdPromptDialogComponent, VdSelectComponent, VdSelectOptionDirective, VdSelectTriggerDirective, VdTableFieldDirective, VdTaskDialogComponent, allOf, allOfAsync, alpha, alphaAsync, alphaNumeric, alphaNumericAsync, and, ascii, async, blacklist, choice, choiceAsync, compare, compose, contains, containsAsync, creditCard, creditCardAsync, cusip, custom, customAsync, dataUri, date, dateAsync, different, digit, disable, elementClass, email, endpointMetadataKey, endsWith, endsWithAsync, error, escape, even, extension, extensionAsync, factor, factorAsync, file, fileAsync, fileSize, fileSizeAsync, formDefinitionMetadataKey, formFieldGroupsMetadataKey, formFieldsMetadataKey, getDisplay, getEndpoint, getFormDefinition, getFormGroups, getTableDefinition, graphql, greaterThan, greaterThanAsync, greaterThanEqualTo, greaterThanEqualToAsync, grid, hasRequiredValidator, headerMetadataKey, hexColor, iban, ibanAsync, image, imageAsync, json, latLong, latitude, leapYear, lessThan, lessThanAsync, lessThanEqualTo, lessThanEqualToAsync, longitude, lowerCase, ltrim, mac, mask, maxDate, maxDateAsync, maxLength, maxLengthAsync, maxNumber, maxNumberAsync, maxTime, maxTimeAsync, minDate, minDateAsync, minLength, minLengthAsync, minNumber, minNumberAsync, minTime, minTimeAsync, mixinDisableRipple, mixinDisabled, model, noneOf, noneOfAsync, not, notEmpty, numeric, numericAsync, odd, oneOf, oneOfAsync, or, parseProjectionArray, parseProjectionString, password, passwordAsync, pattern, patternAsync, port, prefix, primeNumber, prop, propArray, propObject, range, rangeAsync, required, requiredTrue, rtrim, rule, sanitize, startsWith, startsWithAsync, stripLow, suffix, time, timeAsync, toBoolean, toDate, toDouble, toFloat, toInt, toString, trim, unique, updateOn, upperCase, url, urlAsync, whitelist };
 //# sourceMappingURL=messaia-cdk.mjs.map