@messaia/cdk 22.0.0-rc.8 → 22.0.0

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) {
@@ -14516,6 +14977,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 +14999,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 +15353,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 +15375,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 +15894,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 +16024,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 +16045,7 @@ class AbstractMatFormField {
      * @type {boolean}
      */
     get required() {
-        return this._required;
+        return this._required || hasRequiredValidator(this.ngControl?.control);
     }
     /**
      * @property _readonly
@@ -15687,6 +16232,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 +17001,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 +17019,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]
@@ -19151,6 +19702,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 +19730,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 +20097,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 +20145,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 +22472,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 +22513,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 +22598,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 +22831,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 +23087,7 @@ class VdChipsComponent extends AbstractMatFormField {
     ngOnDestroy() {
         super.ngOnDestroy();
         this.dataSourceSubscription?.unsubscribe();
+        this.onDataLoadedSubscription?.unsubscribe();
     }
     /**
      * Log to console
@@ -22498,7 +23104,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 +23123,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 +23766,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 +24537,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 +24549,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 +24634,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 +24969,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 +24980,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 +25121,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 +25427,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 +25447,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 +25455,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         CommonModule,
                         ReactiveFormsModule,
                         MatFormFieldModule,
+                        MatIconModule,
                         FuncPipe,
                         VdChipsComponent,
                         VdChipDirective,
@@ -24841,8 +25486,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 +25553,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 +25562,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 +25655,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 +25778,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 +25792,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 +26192,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 +26262,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 +26273,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 +26494,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 +26505,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         MatInputModule,
                         MatIconModule,
                         MatIconButton,
+                        MatInputRequiredDirective,
                         AutofocusDirective,
                         FuncPipe,
                         OnlyNumberDirective,
@@ -25872,7 +26588,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 +26599,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         MatInputModule,
                         MatIconModule,
                         MatIconButton,
+                        MatInputRequiredDirective,
                         FuncPipe,
                         PrefixDirective,
                         RemoveWhitespaceDirective
@@ -26424,7 +27141,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 +27191,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 +27639,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 */
@@ -30140,7 +30854,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 +30863,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)]
@@ -30518,5 +31232,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, 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, tableColumnsMetadataKey, tableDefinitionMetadataKey, time, timeAsync, toBoolean, toDate, toDouble, toFloat, toInt, toString, trim, unique, updateOn, upperCase, url, urlAsync, whitelist };
 //# sourceMappingURL=messaia-cdk.mjs.map