@messaia/cdk 17.1.3 → 17.1.5-rc01

package/fesm2022/messaia-cdk.mjs

@@ -1300,7 +1300,8 @@ var TableColumnType;
     TableColumnType[TableColumnType["Date"] = 8] = "Date";
     TableColumnType[TableColumnType["Action"] = 9] = "Action";
     TableColumnType[TableColumnType["Menu"] = 10] = "Menu";
-    TableColumnType[TableColumnType["IconButton"] = 11] = "IconButton";
+    TableColumnType[TableColumnType["Icon"] = 11] = "Icon";
+    TableColumnType[TableColumnType["IconButton"] = 12] = "IconButton";
 })(TableColumnType || (TableColumnType = {}));
 
 class TableColumn {
@@ -1419,6 +1420,11 @@ class TableColumn {
      * @property
      */
     iconButton;
+    /**
+     * Icon configuration for the column.
+     * @property
+     */
+    icon;
     /**
      * The index of the column.
      * @property
@@ -1664,6 +1670,10 @@ function Column(args) {
         if (tableColumn.menu) {
             tableColumn.type ||= TableColumnType.Menu;
         }
+        /* Set type to 'Icon' if icon is specified */
+        else if (tableColumn.icon) {
+            tableColumn.type ||= TableColumnType.Icon;
+        }
         /* Set type to 'IconButton' if iconButton is specified */
         else if (tableColumn.iconButton) {
             tableColumn.type ||= TableColumnType.IconButton;
@@ -2754,6 +2764,43 @@ class AuditUser {
     letter;
 }
 
+/**
+ * Represents an icon configuration for a table column.
+ */
+class Icon {
+    /**
+     * Material icon name or function returning the icon dynamically.
+     */
+    matIcon;
+    /**
+     * SVG icon name or function returning the icon dynamically.
+     */
+    svgIcon;
+    /**
+     * Font icon name or function returning the icon dynamically.
+     */
+    fontIcon;
+    /**
+     * Font set name for font icon.
+     */
+    fontSet = 'material-symbols-outlined';
+    /**
+     * CSS class name or function returning the class dynamically.
+     */
+    cssClass;
+    /**
+     * Function to dynamically hide the icon.
+     */
+    hide;
+    /**
+     * Constructs a new instance of TableColumnIcon.
+     * @param init Optional configuration object to initialize properties.
+     */
+    constructor(init) {
+        Object.assign(this, init);
+    }
+}
+
 class KeyValue {
     /**
      * @property
@@ -8275,15 +8322,30 @@ class FormFieldDefinition {
      */
     optionTemplate;
     /**
-     * Text to display in options.
-     * @property
+     * The property name in the option object for the text to display.
+     * This is used to determine which property of the option object to show as the option's text.
      */
-    optionText = 'name';
+    optionTextProperty = 'name';
     /**
-     * Value of options.
-     * @property
+     * The property name in the option object for the value of the options.
+     * This is used to identify the unique value for each option.
+     */
+    optionValueProperty = 'id';
+    /**
+     * The property name in the option object for the Material icon.
+     * This can be used to display a Material icon in the options list.
      */
-    optionValue = 'id';
+    optionMatIconProperty;
+    /**
+     * The property name in the option object for the SVG icon.
+     * This can be used to display an SVG icon in the options list.
+     */
+    optionSvgIconProperty;
+    /**
+     * The font set to be used for the icons in the options.
+     * This specifies a custom font set for the icons displayed in the options list.
+     */
+    optionIconFontSet = 'material-symbols-outlined';
     /**
      * Parameters for data retrieval.
      * @property
@@ -11885,134 +11947,152 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
 class AbstractSelectFormField extends AbstractMatFormField {
     injector;
     /**
-     * Represents a value that changes over time.
+     * A BehaviorSubject that tracks changes to the endpoint data.
      */
     _endpointChange = new BehaviorSubject([]);
     /**
-     * Represents a value that changes over time.
+     * A BehaviorSubject that tracks changes to the enum data.
      */
     _enumChange = new BehaviorSubject([]);
     /**
-     * The http service from to get the data
+     * The HTTP client service used to fetch data from an API.
      */
     _http;
     /**
-     * Default select option
+     * Whether the default option should be selected by default.
      */
     _defaultOption = true;
     /**
-     * Multiple select option
+     * Whether multiple selection is enabled.
      */
     _multiple = false;
     /**
-     * Sorts options
+     * Whether the options should be sorted.
      */
     _sorted = true;
     /**
-     * _endpoint: string
+     * The API endpoint or a function returning the endpoint URL.
      */
     _endpoint;
     /**
-     * _params: any
+     * Parameters to be sent with the API request.
      */
     _params = {};
     /**
-     * _projection: any
+     * Projection fields to be included in the API request.
      */
     _projection;
     /**
-     * Load data
+     * Whether to load data automatically.
      */
     _loadData = true;
     /**
-     * _enumFilter: Function
+     * A filter function to apply to the enum data.
      */
     _enumFilter;
     /**
-     * A function to compare the option values with the selected values.
+     * A function to compare option values with the selected values.
      */
     _compareWith = (o1, o2) => o1 === o2;
     /**
-     * The name of the endpoint
+     * The enumeration data or endpoint for the options.
      */
     enum;
     /**
-     * textPrefix?: any
+     * Optional prefix text to display.
      */
     textPrefix = '';
     /**
-     * The key
+     * The property name in the option object for the text to display.
+     * This is used to determine which property of the option object to show as the option's text.
      */
-    key = 'id';
+    optionTextProperty = 'name';
     /**
-     * The text
+     * The property name in the option object for the value of the options.
+     * This is used to identify the unique value for each option.
      */
-    text = 'name';
+    optionValueProperty = 'id';
     /**
-     * The prefix
+     * The key for the Material icon to display.
+     */
+    matIconKey;
+    /**
+     * The key for the SVG icon to display.
+     */
+    svgIconKey;
+    /**
+     * Font set name for font icon.
+     */
+    fontSet = 'material-symbols-outlined';
+    /**
+     * Optional prefix to display before the options.
      */
     prefix = '';
     /**
-     * Option list
+     * The list of available options.
      */
     options;
     /**
-     * filtered option list
+     * The list of filtered options.
      */
     filteredOptions;
     /**
-     * filterable?
+     * Whether the options can be filtered.
      */
     filterable = true;
     /**
-     * cache?
+     * Whether to cache the options.
      */
     cache = true;
     /**
-     * selectFirst?
+     * Whether to select the first option by default.
      */
     selectFirst = false;
     /**
-     * sortBy?
+     * The field by which to sort the options.
      */
     sortBy;
     /**
-     * mapper: Function
+     * A function to map the options before displaying.
      */
     mapper;
     /**
-     * @property
+     * A function to return the icon for a given option.
+     */
+    optionIcon;
+    /**
+     * Whether the default option should be selected.
      */
     get defaultOption() { return this._defaultOption; }
     set defaultOption(defaultOption) { this._defaultOption = coerceBooleanProperty(defaultOption); this.stateChanges.next(); }
     /**
-     * @property
+     * Whether multiple selection is enabled.
      */
     get multiple() { return this._multiple; }
     set multiple(multi) { this._multiple = coerceBooleanProperty(multi); this.stateChanges.next(); }
     /**
-     * @property
+     * Whether the options should be sorted.
      */
     get sorted() { return this._sorted; }
     set sorted(sorted) { this._sorted = coerceBooleanProperty(sorted); this.stateChanges.next(); }
     /**
-     * @property
+     * The API endpoint or a function returning the endpoint URL.
      */
     get endpoint() { return this._endpoint; }
     set endpoint(endpoint) { this._endpoint = endpoint; this.endpointChanged(); }
     /**
-     * @property
+     * Parameters to be sent with the API request.
      */
     get params() { return this._params; }
     set params(params) {
         if (params) {
-            /* Remove empty params */
+            // Remove empty parameters
             Object.keys(params).forEach((key) => {
-                if ((params[key] == null || params[key] == '' || params[key] == 'undefined')) {
+                if (params[key] == null || params[key] == '' || params[key] == 'undefined') {
                     delete params[key];
                 }
             });
-            /* Check if the params has changed */
+            // Update parameters if they have changed
             if (JSON.stringify(this._params) !== JSON.stringify(params)) {
                 this._params = params;
                 this.endpointChanged();
@@ -12020,23 +12100,22 @@ class AbstractSelectFormField extends AbstractMatFormField {
         }
     }
     /**
-     * @property
+     * Projection fields to be included in the API request.
      */
     get projection() { return this._projection ?? ''; }
     set projection(projection) { this._projection = projection; this.endpointChanged(); }
     /**
-     * @property
+     * Whether to load data automatically.
      */
     get loadData() { return this._loadData; }
     set loadData(loadData) { this._loadData = coerceBooleanProperty(loadData); this.endpointChanged(); }
     /**
-     * @property
+     * A filter function to apply to the enum data.
      */
     get enumFilter() { return this._enumFilter; }
     set enumFilter(enumFilter) { this._enumFilter = enumFilter; this.enumChanged(); }
     /**
-     * Gets the control is disabled.
-     * @param disabled
+     * Whether the control is disabled.
      */
     get disabled() { return this._readonly || super.disabled; }
     set disabled(disabled) {
@@ -12047,16 +12126,16 @@ class AbstractSelectFormField extends AbstractMatFormField {
         }
     }
     /**
-     * Gets current value
+     * Gets the currently selected value(s).
      */
     get currentValue() {
         if (this.multiple) {
             if (this.compareWith) {
                 return this.options?.filter((x) => (this._value || []).some(y => this.compareWith(x, y)));
             }
-            return this.options?.filter((x) => (this._value || []).includes(x[this.key]));
+            return this.options?.filter((x) => (this._value || []).includes(x[this.optionValueProperty]));
         }
-        return this.options?.filter((x) => x[this.key] == this._value)[0];
+        return this.options?.filter((x) => x[this.optionValueProperty] == this._value)[0];
     }
     /**
      * A function to compare the option values with the selected values. The first argument
@@ -12139,7 +12218,7 @@ class AbstractSelectFormField extends AbstractMatFormField {
                 }
                 /* Add sorting */
                 if (!this.params.sortBy && (this.sortBy || this.sorted)) {
-                    params.sortBy = this.sortBy || this.text;
+                    params.sortBy = this.sortBy || this.optionTextProperty;
                 }
                 /* Get endpoint */
                 let endpoint = typeof this.endpoint === 'function' ? this.endpoint(this) : this.endpoint;
@@ -12149,7 +12228,7 @@ class AbstractSelectFormField extends AbstractMatFormField {
                         .subscribe(x => {
                         this.filteredOptions = this.options = x;
                         if (this.selectFirst && !this.value && this.options?.length > 0) {
-                            this.value = this.options[0][this.key];
+                            this.value = this.options[0][this.optionValueProperty];
                         }
                         if (Array.isArray(this.options)) {
                             this.handleItemSelected(this.value);
@@ -12187,10 +12266,10 @@ class AbstractSelectFormField extends AbstractMatFormField {
      */
     handleItemSelected(value) {
         if (this.multiple) {
-            this.onItemSelected.emit(this.options.filter((x) => (value || []).includes(x[this.key])));
+            this.onItemSelected.emit(this.options.filter((x) => (value || []).includes(x[this.optionValueProperty])));
         }
         else {
-            this.onItemSelected.emit(this.options.filter((x) => x[this.key] == value)[0]);
+            this.onItemSelected.emit(this.options.filter((x) => x[this.optionValueProperty] == value)[0]);
         }
     }
     /**
@@ -12199,10 +12278,10 @@ class AbstractSelectFormField extends AbstractMatFormField {
      */
     handleItemChange(value) {
         if (this.multiple) {
-            this.onItemChange.emit(this.options.filter((x) => (value || []).includes(x[this.key])));
+            this.onItemChange.emit(this.options.filter((x) => (value || []).includes(x[this.optionValueProperty])));
         }
         else {
-            this.onItemChange.emit(this.options.filter((x) => x[this.key] == value)[0]);
+            this.onItemChange.emit(this.options.filter((x) => x[this.optionValueProperty] == value)[0]);
         }
     }
     /**
@@ -12215,7 +12294,7 @@ class AbstractSelectFormField extends AbstractMatFormField {
             this.filteredOptions = this.options.filter((x) => this.searchField(x)?.toLowerCase().search(searchText.toLowerCase()) > -1);
         }
         else {
-            this.filteredOptions = this.options.filter((x) => x[this.text]?.toLowerCase().search(searchText.toLowerCase()) > -1);
+            this.filteredOptions = this.options.filter((x) => x[this.optionTextProperty]?.toLowerCase().search(searchText.toLowerCase()) > -1);
         }
     }
     /**
@@ -12230,8 +12309,16 @@ class AbstractSelectFormField extends AbstractMatFormField {
     enumChanged() {
         this._enumChange.next([this._enumFilter]);
     }
+    /**
+     * Log to console
+     * @param message
+     * @param optionalParams
+     */
+    log(message, ...optionalParams) {
+        console.log(message, optionalParams);
+    }
     /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: AbstractSelectFormField, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.5", type: AbstractSelectFormField, inputs: { enum: "enum", textPrefix: "textPrefix", key: "key", text: "text", prefix: "prefix", options: "options", filteredOptions: "filteredOptions", filterable: "filterable", cache: "cache", selectFirst: "selectFirst", sortBy: "sortBy", mapper: "mapper", defaultOption: "defaultOption", multiple: "multiple", sorted: "sorted", endpoint: "endpoint", params: "params", projection: "projection", loadData: "loadData", enumFilter: "enumFilter", disabled: "disabled", compareWith: "compareWith", searchField: "searchField" }, outputs: { onValueChange: "change", onItemChange: "itemChange", onSelected: "selected", onItemSelected: "itemSelected", onLaunch: "launch" }, usesInheritance: true, ngImport: i0 });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.5", type: AbstractSelectFormField, inputs: { enum: "enum", textPrefix: "textPrefix", optionTextProperty: "optionTextProperty", optionValueProperty: "optionValueProperty", matIconKey: "matIconKey", svgIconKey: "svgIconKey", fontSet: "fontSet", prefix: "prefix", options: "options", filteredOptions: "filteredOptions", filterable: "filterable", cache: "cache", selectFirst: "selectFirst", sortBy: "sortBy", mapper: "mapper", defaultOption: "defaultOption", multiple: "multiple", sorted: "sorted", endpoint: "endpoint", params: "params", projection: "projection", loadData: "loadData", enumFilter: "enumFilter", disabled: "disabled", compareWith: "compareWith", searchField: "searchField" }, outputs: { onValueChange: "change", onItemChange: "itemChange", onSelected: "selected", onItemSelected: "itemSelected", onLaunch: "launch" }, usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: AbstractSelectFormField, decorators: [{
             type: Directive
@@ -12247,9 +12334,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
                 type: Input
             }], textPrefix: [{
                 type: Input
-            }], key: [{
+            }], optionTextProperty: [{
                 type: Input
-            }], text: [{
+            }], optionValueProperty: [{
+                type: Input
+            }], matIconKey: [{
+                type: Input
+            }], svgIconKey: [{
+                type: Input
+            }], fontSet: [{
                 type: Input
             }], prefix: [{
                 type: Input
@@ -12349,31 +12442,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
 class VdSelectComponent extends AbstractSelectFormField {
     injector;
     /**
-     * Trigger css class
+     * CSS class applied to the trigger element.
      */
     _triggerCssClass;
     /**
-     * Trigger mode
+     * Mode of the trigger, default is 'chip'.
      */
     _triggerMode = 'chip';
     /**
-     * Option template
+     * Template for rendering options.
      */
     optionTemplate;
     /**
-     * Trigger template
+     * Template for rendering the trigger.
      */
     triggerTemplate;
     /**
-     * The select element.
+     * Reference to the MatSelect element.
      */
     selectEl;
     /**
-     * The select element.
+     * Reference to the filter input element.
      */
     filterInput;
     /**
-     * Trigger css class
+     * CSS class applied to the trigger element.
      */
     get triggerCssClass() { return this._triggerCssClass; }
     set triggerCssClass(triggerCssClass) {
@@ -12381,7 +12474,7 @@ class VdSelectComponent extends AbstractSelectFormField {
         this.stateChanges.next();
     }
     /**
-     * Trigger mode
+     * Mode of the trigger, default is 'chip'.
      */
     get triggerMode() { return this._triggerMode; }
     set triggerMode(triggerMode) {
@@ -12390,26 +12483,47 @@ class VdSelectComponent extends AbstractSelectFormField {
         this.stateChanges.next();
     }
     /**
-     * Whether the select has a value.
+     * Retrieves the currently selected options from the filtered options.
+     * If multiple options are selected, returns them as an array.
+     * If a single option is selected, returns it as an array with one element.
+     *
+     * @returns An array of selected items from the filtered options.
      */
-    get empty() { return this._readonly ? !this.currentValue : !this.selectEl?._selectionModel || this.selectEl?._selectionModel?.isEmpty(); }
+    get selectedOptions() {
+        const selected = this.selectEl?.selected;
+        const selectedValues = Array.isArray(selected) ? selected.map(option => option.value) : selected ? [selected.value] : [];
+        if (this.filteredOptions) {
+            return this.filteredOptions.filter((filteredOption) => selectedValues.includes(filteredOption[this.optionValueProperty]));
+        }
+        return [];
+    }
     /**
-     * Constructor
-     * @param ngControl
-     * @param parentForm
-     * @param parentFormGroup
-     * @param defaultErrorStateMatcher
-     * @param focusMonitor
-     * @param elementRef
+     * Checks if the select element is empty.
+     *
+     * @returns true if the select element is empty, false otherwise.
+     */
+    get empty() {
+        return this._readonly ? !this.currentValue : !this.selectEl?._selectionModel || this.selectEl?._selectionModel?.isEmpty();
+    }
+    /**
+     * Constructor to initialize the VdSelectComponent.
+     *
+     * @param injector Dependency injector
+     * @param ngControl Angular form control directive
+     * @param parentForm Parent form
+     * @param parentFormGroup Parent form group
+     * @param defaultErrorStateMatcher Default error state matcher
+     * @param focusMonitor Focus monitor for managing focus state
+     * @param elementRef Reference to the component element
+     * @param changeDetectorRef Change detector reference
      */
     constructor(injector, ngControl, parentForm, parentFormGroup, defaultErrorStateMatcher, focusMonitor, elementRef, changeDetectorRef) {
         super("vd-select", injector, ngControl, parentForm, parentFormGroup, defaultErrorStateMatcher, focusMonitor, elementRef, changeDetectorRef);
         this.injector = injector;
     }
     /**
-     * A callback method that is invoked immediately after
-     * Angular has completed initialization of a component's view.
-     * It is invoked only once when the view is instantiated.
+     * Lifecycle hook that is called after Angular has initialized the component's view.
+     * Sets up an event listener to focus the filter input when the select element is opened.
      */
     ngAfterViewInit() {
         this.selectEl?.openedChange?.subscribe(x => {
@@ -12419,8 +12533,9 @@ class VdSelectComponent extends AbstractSelectFormField {
         });
     }
     /**
-     * From ControlValueAccessor interface
-     * @param value
+     * Writes the value to the component. Part of the ControlValueAccessor interface.
+     *
+     * @param value The value to be written
      */
     writeValue(value) {
         super.writeValue(value);
@@ -12430,57 +12545,58 @@ class VdSelectComponent extends AbstractSelectFormField {
         this.changeDetectorRef.detectChanges();
     }
     /**
-     * Sets control focus
+     * Sets focus on the select element and opens the dropdown.
      */
     focus() {
         this.selectEl?.focus();
         this.selectEl?.open();
     }
     /**
-     * Handles launch button click
-     * @param value
+     * Handles the launch button click event.
+     * Emits the selected options through the onLaunch event emitter.
+     *
+     * @param value The value to be emitted
      */
     handleLaunchClicked(value) {
         if (this.multiple) {
-            this.onLaunch.emit(this.options.filter((x) => (value || []).includes(x[this.key])));
+            this.onLaunch.emit(this.options.filter((x) => (value || []).includes(x[this.optionValueProperty])));
         }
         else {
-            this.onLaunch.emit(this.options.filter((x) => x[this.key] == value)[0]);
+            this.onLaunch.emit(this.options.find((x) => x[this.optionValueProperty] == value));
         }
     }
     /**
-     * Handels filter event
-     * @param $event
+     * Handles the filter event to filter the options based on the input.
+     *
+     * @param $event The filter event
      */
     handleFilter($event) {
-        let searchText = $event?.target?.value ?? '';
-        if (this.searchField) {
-            this.filteredOptions = this.options.filter((x) => this.searchField(x)?.toLowerCase().search(searchText.toLowerCase()) > -1);
-        }
-        else {
-            console.log(this.options);
-            this.filteredOptions = this.options.filter((x) => x[this.text]?.toLowerCase().search(searchText.toLowerCase()) > -1);
-        }
+        const searchText = $event?.target?.value ?? '';
+        this.filteredOptions = this.options.filter((x) => {
+            const fieldValue = this.searchField ? this.searchField(x) : x[this.optionTextProperty];
+            return fieldValue?.toLowerCase().includes(searchText.toLowerCase());
+        });
     }
     /**
-     * Gets the values of the selected options for the trigger
-     * @param options
-     * @returns
+     * Gets the display values of the selected options for the trigger.
+     *
+     * @param options The selected options
+     * @returns The display values of the selected options
      */
     getTriggerValues(options) {
         if (Array.isArray(options)) {
-            return (options || [])?.map(x => x.value);
+            return options.map(x => x.viewValue);
         }
         else {
-            return options?.value;
+            return options?.viewValue;
         }
     }
     /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: VdSelectComponent, deps: [{ token: i0.Injector }, { token: i1.NgControl, optional: true, self: true }, { token: i1.NgForm, optional: true }, { token: i1.FormGroupDirective, optional: true }, { token: i2$1.ErrorStateMatcher }, { token: i3$3.FocusMonitor }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: VdSelectComponent, selector: "vd-select", inputs: { triggerCssClass: "triggerCssClass", triggerMode: "triggerMode" }, providers: [{ provide: MatFormFieldControl, useExisting: VdSelectComponent }], 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)\" *ngIf=\"!readonly\" [multiple]=\"multiple\" [compareWith]=\"compareWith\" [disabled]=\"disabled\" flex>\r\n    <!-- #region Filter input -->\r\n    <div *ngIf=\"filterable\" class=\"vd-select-filter-wrap\">\r\n        <div class=\"vd-select-filter-inner\">\r\n            <a mat-icon-button disabled *ngIf=\"!filterInput.value\">\r\n                <mat-icon fontSet=\"material-symbols-outlined\">search</mat-icon>\r\n            </a>\r\n            <a mat-icon-button *ngIf=\"filterInput.value\" (click)=\"filterInput.value = ''; handleFilter()\">\r\n                <mat-icon fontSet=\"material-symbols-outlined\">close</mat-icon>\r\n            </a>\r\n            <input #filterInput type=\"text\" placeholder=\"Filter...\" class=\"vd-select-filter mat-input-element\" (keyup)=\"handleFilter($event)\">\r\n        </div>\r\n        <div class=\"mat-divider\"></div>\r\n    </div>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Trigger for launch button -->\r\n    <mat-select-trigger *ngIf=\"(onLaunch?.observers?.length??0) > 0\" [class]=\"triggerCssClass\">\r\n        <span>{{getTriggerValues(select.selected)}}</span>\r\n        <mat-icon class=\"vd-select-launch\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\r\n    </mat-select-trigger>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Custom trigger template -->\r\n    <mat-select-trigger *ngIf=\"!onLaunch?.observers?.length && triggerTemplate?.templateRef\" [class]=\"triggerCssClass\">\r\n        <ng-template *ngIf=\"triggerTemplate?.templateRef\" [ngTemplateOutlet]=\"triggerTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: getTriggerValues(select.selected) }\"></ng-template>\r\n    </mat-select-trigger>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Option template as trigger -->\r\n    <mat-select-trigger *ngIf=\"!onLaunch?.observers?.length && !triggerTemplate?.templateRef && optionTemplate?.templateRef\" [class]=\"triggerCssClass\">\r\n        <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: getTriggerValues(select.selected) }\"></ng-template>\r\n    </mat-select-trigger>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Default option -->\r\n    <mat-option class=\"tc-grey-500\" *ngIf=\"!multiple && defaultOption\" i18n=\"@@pleaseSelect\">--- Please Select ---</mat-option>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Options -->\r\n    <ng-template let-option let-first=\"first\" ngFor [ngForOf]=\"filteredOptions\">\r\n        <mat-option [value]=\"mapper ? option : option[key]\">\r\n            <span *ngIf=\"!optionTemplate?.templateRef\" i18n=\"@@selection\">{option[text], select, option {option} other {{{option[text]}}}}</span>\r\n            <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\r\n        </mat-option>\r\n    </ng-template>\r\n    <!-- #endregion -->\r\n</mat-select>\r\n\r\n<!-- #region Read only value -->\r\n<div *ngIf=\"readonly\">\r\n    <div *ngIf=\"currentValue\">\r\n        <div class=\"readonly-value\">\r\n            <span *ngIf=\"!optionTemplate?.templateRef && !triggerTemplate?.templateRef\">\r\n                <span *ngIf=\"!multiple\" i18n=\"@@selection\">{currentValue[text], select, option {option} other {{{currentValue[text]}}}}</span>\r\n                <ng-container *ngIf=\"multiple\">\r\n                    <span *ngFor=\"let optionValue of currentValue; let last = last\">\r\n                        <span i18n=\"@@selection\">{optionValue[text], select, option {option} other {{{optionValue[text]}}}}</span>\r\n                        <span *ngIf=\"!last\">,&nbsp;</span>\r\n                    </span>\r\n                </ng-container>\r\n            </span>\r\n            <ng-template *ngIf=\"triggerTemplate?.templateRef\" [ngTemplateOutlet]=\"triggerTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: currentValue }\"></ng-template>\r\n            <ng-template *ngIf=\"optionTemplate?.templateRef && !triggerTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\r\n        </div>\r\n        <mat-icon *ngIf=\"(onLaunch?.observers?.length??0) > 0\" class=\"vd-select-launch-readonly\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\r\n    </div>\r\n    <div *ngIf=\"!currentValue\">&nbsp;</div>\r\n</div>\r\n<!-- #endregion -->", 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}::ng-deep .mat-mdc-chip{background-color:var(--mdc-chip-elevated-container-color, transparent);border-radius:var(--mdc-chip-container-shape-radius, 16px 16px 16px 16px);color:inherit;display:inline-block;line-height:20px;height:24px!important}::ng-deep .mat-mdc-chip:not(:last-child){margin:1px 4px 1px 0}::ng-deep .mat-mdc-chip>span{color:var(--mdc-chip-label-text-color, inherit);display:inline-block;padding:1px 16px;font-size:.94em}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5$3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i5$3.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatIconAnchor, selector: "a[mat-icon-button]", exportAs: ["matButton", "matAnchor"] }] });
+    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: VdSelectComponent, selector: "vd-select", inputs: { triggerCssClass: "triggerCssClass", triggerMode: "triggerMode" }, providers: [{ provide: MatFormFieldControl, useExisting: VdSelectComponent }], 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\" [disabled]=\"disabled\" flex>\r\n    <!-- #region Filter input -->\r\n    <div *ngIf=\"filterable\" class=\"vd-select-filter-wrap\">\r\n        <div class=\"vd-select-filter-inner\">\r\n            <a mat-icon-button disabled *ngIf=\"!filterInput.value\">\r\n                <mat-icon fontSet=\"material-symbols-outlined\">search</mat-icon>\r\n            </a>\r\n            <a mat-icon-button *ngIf=\"filterInput.value\" (click)=\"filterInput.value = ''; handleFilter()\">\r\n                <mat-icon fontSet=\"material-symbols-outlined\">close</mat-icon>\r\n            </a>\r\n            <input #filterInput type=\"text\" placeholder=\"Filter...\" class=\"vd-select-filter mat-input-element\" (keyup)=\"handleFilter($event)\">\r\n        </div>\r\n        <div class=\"mat-divider\"></div>\r\n    </div>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Trigger for launch button -->\r\n    <mat-select-trigger *ngIf=\"(onLaunch?.observers?.length??0) > 0\" [class]=\"triggerCssClass\">\r\n        <span layout=\"row\" layout-align=\"start center\">\r\n            <ng-container *ngFor=\"let option of selectedOptions; let i = index; let last = last\">\r\n                <span layout=\"row\" layout-align=\"start center\">\r\n                    <mat-icon *ngIf=\"matIconKey && !svgIconKey\" [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\r\n                    <mat-icon *ngIf=\"svgIconKey && !matIconKey\" [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\r\n                    <span>{{option[optionTextProperty]}}</span>\r\n                </span>\r\n                <span *ngIf=\"!last\">&nbsp;&nbsp;</span>\r\n            </ng-container>\r\n        </span>\r\n        <mat-icon class=\"vd-select-launch\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\r\n    </mat-select-trigger>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Custom trigger template -->\r\n    <mat-select-trigger *ngIf=\"!onLaunch?.observers?.length && triggerTemplate?.templateRef\" [class]=\"triggerCssClass\">\r\n        <ng-template *ngIf=\"triggerTemplate?.templateRef\" [ngTemplateOutlet]=\"triggerTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: getTriggerValues(select.selected) }\"></ng-template>\r\n    </mat-select-trigger>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Option template as trigger -->\r\n    <mat-select-trigger *ngIf=\"!onLaunch?.observers?.length && !triggerTemplate?.templateRef && optionTemplate?.templateRef\" [class]=\"triggerCssClass\">\r\n        <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: getTriggerValues(select.selected) }\"></ng-template>\r\n    </mat-select-trigger>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Trigger for icons -->\r\n    <mat-select-trigger *ngIf=\"matIconKey || svgIconKey\">\r\n        <span layout=\"row\" layout-align=\"start center\">\r\n            <ng-container *ngFor=\"let option of selectedOptions; let i = index; let last = last\">\r\n                <span layout=\"row\" layout-align=\"start center\">\r\n                    <mat-icon *ngIf=\"matIconKey && !svgIconKey\" [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\r\n                    <mat-icon *ngIf=\"svgIconKey && !matIconKey\" [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\r\n                    <span>{{option[optionTextProperty]}}</span>\r\n                </span>\r\n                <span *ngIf=\"!last\">&nbsp;&nbsp;</span>\r\n            </ng-container>\r\n        </span>\r\n    </mat-select-trigger>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Default option -->\r\n    <mat-option class=\"tc-grey-500\" *ngIf=\"!multiple && defaultOption\" i18n=\"@@pleaseSelect\">--- Please Select ---</mat-option>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Options -->\r\n    <ng-template let-option let-first=\"first\" ngFor [ngForOf]=\"filteredOptions\">\r\n        <mat-option [value]=\"mapper ? option : option[optionValueProperty]\">\r\n            <mat-icon *ngIf=\"matIconKey && !svgIconKey\" [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\r\n            <mat-icon *ngIf=\"svgIconKey && !matIconKey\" [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\r\n            <span *ngIf=\"!optionTemplate?.templateRef\" i18n=\"@@selection\">{option[optionTextProperty], select, option {option} other {{{option[optionTextProperty]}}}}</span>\r\n            <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\r\n        </mat-option>\r\n    </ng-template>\r\n    <!-- #endregion -->\r\n</mat-select>\r\n\r\n<!-- #region Read only value -->\r\n<div *ngIf=\"readonly\">\r\n    <div *ngIf=\"currentValue\">\r\n        <div class=\"readonly-value\">\r\n            <span *ngIf=\"!optionTemplate?.templateRef && !triggerTemplate?.templateRef\">\r\n                <span layout=\"row\" layout-align=\"start center\">\r\n                    <ng-container *ngFor=\"let option of selectedOptions; let i = index; let last = last\">\r\n                        <span layout=\"row\" layout-align=\"start center\">\r\n                            <mat-icon *ngIf=\"matIconKey && !svgIconKey\" [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{currentValue[matIconKey]}}</mat-icon>\r\n                            <mat-icon *ngIf=\"svgIconKey && !matIconKey\" [svgIcon]=\"currentValue[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\r\n                            <span>&nbsp;&nbsp;</span>\r\n                            <span i18n=\"@@selection\">{currentValue[optionTextProperty], select, option {option} other {{{currentValue[optionTextProperty]}}}}</span>\r\n                        </span>\r\n                        <span *ngIf=\"!last\">,&nbsp;</span>\r\n                    </ng-container>\r\n                </span>\r\n            </span>\r\n            <ng-template *ngIf=\"triggerTemplate?.templateRef\" [ngTemplateOutlet]=\"triggerTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: currentValue }\"></ng-template>\r\n            <ng-template *ngIf=\"optionTemplate?.templateRef && !triggerTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\r\n        </div>\r\n        <mat-icon *ngIf=\"(onLaunch?.observers?.length??0) > 0\" class=\"vd-select-launch-readonly\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\r\n    </div>\r\n    <div *ngIf=\"!currentValue\">&nbsp;</div>\r\n</div>\r\n<!-- #endregion -->", 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-chip{background-color:var(--mdc-chip-elevated-container-color, transparent);border-radius:var(--mdc-chip-container-shape-radius, 16px 16px 16px 16px);color:inherit;display:inline-block;line-height:20px;height:24px!important;padding:1px 16px}::ng-deep .mat-mdc-chip:not(:last-child){margin:1px 4px 1px 0}::ng-deep .mat-mdc-chip>span{color:var(--mdc-chip-label-text-color, inherit);display:inline-block;font-size:.94em;line-height:1.8em}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5$3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i5$3.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatIconAnchor, selector: "a[mat-icon-button]", exportAs: ["matButton", "matAnchor"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: VdSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vd-select', providers: [{ provide: MatFormFieldControl, useExisting: VdSelectComponent }], template: "<mat-select [placeholder]=\"placeholder\" i18n-placeholder [(ngModel)]=\"value\" #select=\"matSelect\" (selectionChange)=\"handleChange($event)\" *ngIf=\"!readonly\" [multiple]=\"multiple\" [compareWith]=\"compareWith\" [disabled]=\"disabled\" flex>\r\n    <!-- #region Filter input -->\r\n    <div *ngIf=\"filterable\" class=\"vd-select-filter-wrap\">\r\n        <div class=\"vd-select-filter-inner\">\r\n            <a mat-icon-button disabled *ngIf=\"!filterInput.value\">\r\n                <mat-icon fontSet=\"material-symbols-outlined\">search</mat-icon>\r\n            </a>\r\n            <a mat-icon-button *ngIf=\"filterInput.value\" (click)=\"filterInput.value = ''; handleFilter()\">\r\n                <mat-icon fontSet=\"material-symbols-outlined\">close</mat-icon>\r\n            </a>\r\n            <input #filterInput type=\"text\" placeholder=\"Filter...\" class=\"vd-select-filter mat-input-element\" (keyup)=\"handleFilter($event)\">\r\n        </div>\r\n        <div class=\"mat-divider\"></div>\r\n    </div>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Trigger for launch button -->\r\n    <mat-select-trigger *ngIf=\"(onLaunch?.observers?.length??0) > 0\" [class]=\"triggerCssClass\">\r\n        <span>{{getTriggerValues(select.selected)}}</span>\r\n        <mat-icon class=\"vd-select-launch\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\r\n    </mat-select-trigger>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Custom trigger template -->\r\n    <mat-select-trigger *ngIf=\"!onLaunch?.observers?.length && triggerTemplate?.templateRef\" [class]=\"triggerCssClass\">\r\n        <ng-template *ngIf=\"triggerTemplate?.templateRef\" [ngTemplateOutlet]=\"triggerTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: getTriggerValues(select.selected) }\"></ng-template>\r\n    </mat-select-trigger>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Option template as trigger -->\r\n    <mat-select-trigger *ngIf=\"!onLaunch?.observers?.length && !triggerTemplate?.templateRef && optionTemplate?.templateRef\" [class]=\"triggerCssClass\">\r\n        <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: getTriggerValues(select.selected) }\"></ng-template>\r\n    </mat-select-trigger>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Default option -->\r\n    <mat-option class=\"tc-grey-500\" *ngIf=\"!multiple && defaultOption\" i18n=\"@@pleaseSelect\">--- Please Select ---</mat-option>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Options -->\r\n    <ng-template let-option let-first=\"first\" ngFor [ngForOf]=\"filteredOptions\">\r\n        <mat-option [value]=\"mapper ? option : option[key]\">\r\n            <span *ngIf=\"!optionTemplate?.templateRef\" i18n=\"@@selection\">{option[text], select, option {option} other {{{option[text]}}}}</span>\r\n            <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\r\n        </mat-option>\r\n    </ng-template>\r\n    <!-- #endregion -->\r\n</mat-select>\r\n\r\n<!-- #region Read only value -->\r\n<div *ngIf=\"readonly\">\r\n    <div *ngIf=\"currentValue\">\r\n        <div class=\"readonly-value\">\r\n            <span *ngIf=\"!optionTemplate?.templateRef && !triggerTemplate?.templateRef\">\r\n                <span *ngIf=\"!multiple\" i18n=\"@@selection\">{currentValue[text], select, option {option} other {{{currentValue[text]}}}}</span>\r\n                <ng-container *ngIf=\"multiple\">\r\n                    <span *ngFor=\"let optionValue of currentValue; let last = last\">\r\n                        <span i18n=\"@@selection\">{optionValue[text], select, option {option} other {{{optionValue[text]}}}}</span>\r\n                        <span *ngIf=\"!last\">,&nbsp;</span>\r\n                    </span>\r\n                </ng-container>\r\n            </span>\r\n            <ng-template *ngIf=\"triggerTemplate?.templateRef\" [ngTemplateOutlet]=\"triggerTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: currentValue }\"></ng-template>\r\n            <ng-template *ngIf=\"optionTemplate?.templateRef && !triggerTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\r\n        </div>\r\n        <mat-icon *ngIf=\"(onLaunch?.observers?.length??0) > 0\" class=\"vd-select-launch-readonly\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\r\n    </div>\r\n    <div *ngIf=\"!currentValue\">&nbsp;</div>\r\n</div>\r\n<!-- #endregion -->", 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}::ng-deep .mat-mdc-chip{background-color:var(--mdc-chip-elevated-container-color, transparent);border-radius:var(--mdc-chip-container-shape-radius, 16px 16px 16px 16px);color:inherit;display:inline-block;line-height:20px;height:24px!important}::ng-deep .mat-mdc-chip:not(:last-child){margin:1px 4px 1px 0}::ng-deep .mat-mdc-chip>span{color:var(--mdc-chip-label-text-color, inherit);display:inline-block;padding:1px 16px;font-size:.94em}\n"] }]
+            args: [{ selector: 'vd-select', providers: [{ provide: MatFormFieldControl, useExisting: VdSelectComponent }], template: "<mat-select [placeholder]=\"placeholder\" i18n-placeholder [(ngModel)]=\"value\" #select=\"matSelect\" (selectionChange)=\"handleChange($event)\" [hidden]=\"readonly\" [multiple]=\"multiple\" [compareWith]=\"compareWith\" [disabled]=\"disabled\" flex>\r\n    <!-- #region Filter input -->\r\n    <div *ngIf=\"filterable\" class=\"vd-select-filter-wrap\">\r\n        <div class=\"vd-select-filter-inner\">\r\n            <a mat-icon-button disabled *ngIf=\"!filterInput.value\">\r\n                <mat-icon fontSet=\"material-symbols-outlined\">search</mat-icon>\r\n            </a>\r\n            <a mat-icon-button *ngIf=\"filterInput.value\" (click)=\"filterInput.value = ''; handleFilter()\">\r\n                <mat-icon fontSet=\"material-symbols-outlined\">close</mat-icon>\r\n            </a>\r\n            <input #filterInput type=\"text\" placeholder=\"Filter...\" class=\"vd-select-filter mat-input-element\" (keyup)=\"handleFilter($event)\">\r\n        </div>\r\n        <div class=\"mat-divider\"></div>\r\n    </div>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Trigger for launch button -->\r\n    <mat-select-trigger *ngIf=\"(onLaunch?.observers?.length??0) > 0\" [class]=\"triggerCssClass\">\r\n        <span layout=\"row\" layout-align=\"start center\">\r\n            <ng-container *ngFor=\"let option of selectedOptions; let i = index; let last = last\">\r\n                <span layout=\"row\" layout-align=\"start center\">\r\n                    <mat-icon *ngIf=\"matIconKey && !svgIconKey\" [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\r\n                    <mat-icon *ngIf=\"svgIconKey && !matIconKey\" [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\r\n                    <span>{{option[optionTextProperty]}}</span>\r\n                </span>\r\n                <span *ngIf=\"!last\">&nbsp;&nbsp;</span>\r\n            </ng-container>\r\n        </span>\r\n        <mat-icon class=\"vd-select-launch\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\r\n    </mat-select-trigger>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Custom trigger template -->\r\n    <mat-select-trigger *ngIf=\"!onLaunch?.observers?.length && triggerTemplate?.templateRef\" [class]=\"triggerCssClass\">\r\n        <ng-template *ngIf=\"triggerTemplate?.templateRef\" [ngTemplateOutlet]=\"triggerTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: getTriggerValues(select.selected) }\"></ng-template>\r\n    </mat-select-trigger>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Option template as trigger -->\r\n    <mat-select-trigger *ngIf=\"!onLaunch?.observers?.length && !triggerTemplate?.templateRef && optionTemplate?.templateRef\" [class]=\"triggerCssClass\">\r\n        <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: getTriggerValues(select.selected) }\"></ng-template>\r\n    </mat-select-trigger>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Trigger for icons -->\r\n    <mat-select-trigger *ngIf=\"matIconKey || svgIconKey\">\r\n        <span layout=\"row\" layout-align=\"start center\">\r\n            <ng-container *ngFor=\"let option of selectedOptions; let i = index; let last = last\">\r\n                <span layout=\"row\" layout-align=\"start center\">\r\n                    <mat-icon *ngIf=\"matIconKey && !svgIconKey\" [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\r\n                    <mat-icon *ngIf=\"svgIconKey && !matIconKey\" [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\r\n                    <span>{{option[optionTextProperty]}}</span>\r\n                </span>\r\n                <span *ngIf=\"!last\">&nbsp;&nbsp;</span>\r\n            </ng-container>\r\n        </span>\r\n    </mat-select-trigger>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Default option -->\r\n    <mat-option class=\"tc-grey-500\" *ngIf=\"!multiple && defaultOption\" i18n=\"@@pleaseSelect\">--- Please Select ---</mat-option>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Options -->\r\n    <ng-template let-option let-first=\"first\" ngFor [ngForOf]=\"filteredOptions\">\r\n        <mat-option [value]=\"mapper ? option : option[optionValueProperty]\">\r\n            <mat-icon *ngIf=\"matIconKey && !svgIconKey\" [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\r\n            <mat-icon *ngIf=\"svgIconKey && !matIconKey\" [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\r\n            <span *ngIf=\"!optionTemplate?.templateRef\" i18n=\"@@selection\">{option[optionTextProperty], select, option {option} other {{{option[optionTextProperty]}}}}</span>\r\n            <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\r\n        </mat-option>\r\n    </ng-template>\r\n    <!-- #endregion -->\r\n</mat-select>\r\n\r\n<!-- #region Read only value -->\r\n<div *ngIf=\"readonly\">\r\n    <div *ngIf=\"currentValue\">\r\n        <div class=\"readonly-value\">\r\n            <span *ngIf=\"!optionTemplate?.templateRef && !triggerTemplate?.templateRef\">\r\n                <span layout=\"row\" layout-align=\"start center\">\r\n                    <ng-container *ngFor=\"let option of selectedOptions; let i = index; let last = last\">\r\n                        <span layout=\"row\" layout-align=\"start center\">\r\n                            <mat-icon *ngIf=\"matIconKey && !svgIconKey\" [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{currentValue[matIconKey]}}</mat-icon>\r\n                            <mat-icon *ngIf=\"svgIconKey && !matIconKey\" [svgIcon]=\"currentValue[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\r\n                            <span>&nbsp;&nbsp;</span>\r\n                            <span i18n=\"@@selection\">{currentValue[optionTextProperty], select, option {option} other {{{currentValue[optionTextProperty]}}}}</span>\r\n                        </span>\r\n                        <span *ngIf=\"!last\">,&nbsp;</span>\r\n                    </ng-container>\r\n                </span>\r\n            </span>\r\n            <ng-template *ngIf=\"triggerTemplate?.templateRef\" [ngTemplateOutlet]=\"triggerTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: currentValue }\"></ng-template>\r\n            <ng-template *ngIf=\"optionTemplate?.templateRef && !triggerTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\r\n        </div>\r\n        <mat-icon *ngIf=\"(onLaunch?.observers?.length??0) > 0\" class=\"vd-select-launch-readonly\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\r\n    </div>\r\n    <div *ngIf=\"!currentValue\">&nbsp;</div>\r\n</div>\r\n<!-- #endregion -->", 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-chip{background-color:var(--mdc-chip-elevated-container-color, transparent);border-radius:var(--mdc-chip-container-shape-radius, 16px 16px 16px 16px);color:inherit;display:inline-block;line-height:20px;height:24px!important;padding:1px 16px}::ng-deep .mat-mdc-chip:not(:last-child){margin:1px 4px 1px 0}::ng-deep .mat-mdc-chip>span{color:var(--mdc-chip-label-text-color, inherit);display:inline-block;font-size:.94em;line-height:1.8em}\n"] }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i1.NgControl, decorators: [{
                     type: Optional
                 }, {
@@ -14175,7 +14291,7 @@ class VdDynamicTableComponent {
         this.changeDetector.detectChanges();
     }
     /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: VdDynamicTableComponent, deps: [{ token: i1.FormBuilder }, { token: DynamicBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: VdDynamicTableComponent, selector: "vd-dynamic-table", inputs: { dataSource: "dataSource", data: "data", formArray: "formArray", debugValue: "debugValue", classType: "classType", context: "context", dataSourceFilter: "dataSourceFilter", static: "static", filterable: "filterable", paginable: "paginable", selectable: "selectable", sortActive: "sortActive", sortDirection: "sortDirection", stickyHeader: "stickyHeader", stickyFilter: "stickyFilter", rowNgClass: "rowNgClass", detailsTemplate: "detailsTemplate", readonly: "readonly", selectAllFilter: "selectAllFilter", columns: "columns", rowMenuItems: "rowMenuItems", rowAction: "rowAction", excludedColumns: "excludedColumns", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions" }, outputs: { rowClick: "rowClick" }, queries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true }, { propertyName: "matSort", first: true, predicate: MatSort, descendants: true, static: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "detailsTemplateRef", predicate: ["detailsTemplate"], descendants: true, read: ViewContainerRef }, { propertyName: "rowContextMenuTriggers", predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<div class=\"loading-progress\" *ngIf=\"!static\">\r\n\t<mat-progress-bar mode=\"indeterminate\" *ngIf=\"dataSource?.isLoading\"></mat-progress-bar>\r\n</div>\r\n\r\n<!-- #region Data table -->\r\n<table mat-table #table [dataSource]=\"dataSource\" [dataSourceFilter]=\"dataSourceFilter\" [ngClass]=\"{'table-fixed': !detailsTemplate && !templateRef}\" [trackBy]=\"trackBy\" matSort matSortDisableClear [matSortActive]=\"sortActive||'id'\" [matSortDirection]=\"sortDirection\" multiTemplateDataRows>\r\n\t<ng-container *ngFor=\"let column of columns$ | async; trackBy:columnsTrackBy\">\r\n\t\t<!-- #region Column def -->\r\n\t\t<ng-container [cdkColumnDef]=\"column.name\" [sticky]=\"column.sticky\" [stickyEnd]=\"column.stickyEnd\">\r\n\t\t\t<th mat-header-cell *cdkHeaderCellDef [mat-sort-header]=\"column.sortBy || column.name\" [hidden]=\"column.hidden\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\" [disabled]=\"column.type == ColumnType.Checkbox || column.disabled\" [ngClass]=\"{'gt-xs': column.display == Grid.Xs, 'gt-sm': column.display == Grid.Sm, 'gt-md': column.display == Grid.Md, 'gt-lg': column.display == Grid.Lg, 'gt-xl': column.display == Grid.Xl, 'gt-xxl': column.display == Grid.Xxl, 'hidden': column.display == Grid.None}\" [arrowPosition]=\"column.arrowBefore?'before':'after'\">\r\n\t\t\t\t<mat-checkbox *ngIf=\"column.type == ColumnType.Checkbox\" (change)=\"$event ? dataSource.toggleSelect($event, selectAllFilter) : null\" [disabled]=\"!dataSource.paginator?.length\" [checked]=\"dataSource.selectionModel.hasValue() && dataSource.isAllSelected()\" [indeterminate]=\"dataSource.selectionModel.hasValue() && !dataSource.isAllSelected()\"></mat-checkbox>\r\n\t\t\t\t<span *ngIf=\"column.type != ColumnType.Checkbox\">{{column.header | func:context}}</span>\r\n\t\t\t</th>\r\n\r\n\t\t\t<td mat-cell *cdkCellDef=\"let row; let rowIndex = dataIndex\" [matTooltip]=\"column.tooltip?column.tooltip(row, undefined, context):null\" [matTooltipClass]=\"column.tooltipClass??''\" [hidden]=\"column.hidden\" [ngClass]=\"getRowClasses(column, row)\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\">\r\n\t\t\t\t<ng-template #rowVal [ngTemplateOutlet]=\"rowVal\" let-rowValue [ngTemplateOutletContext]=\"{$implicit: column?.content && column?.content(row, undefined, context)}\">\r\n\t\t\t\t\t<ng-container [ngSwitch]=\"column.type\">\r\n\t\t\t\t\t\t<!-- #region Checkbox column -->\r\n\t\t\t\t\t\t<mat-checkbox *ngSwitchCase=\"ColumnType.Checkbox\" (click)=\"$event.stopPropagation()\" (change)=\"$event ? dataSource.selectionModel.toggle(row) : null\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" [checked]=\"dataSource.selectionModel.isSelected(row)\"></mat-checkbox>\r\n\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t<!-- #region Enum column -->\r\n\t\t\t\t\t\t<span *ngSwitchCase=\"ColumnType.Enum\">\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"column.multiple; else elseTemplate\">\r\n\t\t\t\t\t\t\t\t<div *ngFor=\"let item of rowValue; let i = index; let last = last\">\r\n\t\t\t\t\t\t\t\t\t<small *ngIf=\"i<2\" i18n=\"@@selection\">{item | enum:column.enumType:column.enumPrefix, select, type {type} other {{{item | enum:column.enumType:column.enumPrefix}}}}</small><small *ngIf=\"i==1 && rowValue?.length > 2\">, ...</small>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t<ng-template #elseTemplate>\r\n\t\t\t\t\t\t\t\t<span *ngIf=\"rowValue >= 0\" i18n=\"@@selection\">{rowValue | enum:column.enumType:column.enumPrefix, select, type {type} other {{{rowValue | enum:column.enumType:column.enumPrefix}}}}</span>\r\n\t\t\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t<ng-template #recursiveContainer let-columnNameSegments=\"segments\" let-formGroup=\"formGroup\" let-parentFormGroup=\"parentFormGroup\">\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"formGroup\" [formGroup]=\"formGroup\">\r\n\t\t\t\t\t\t\t\t<!-- If the columnNameSegments array is empty, we're at the leaf node -->\r\n\t\t\t\t\t\t\t\t<ng-container *ngIf=\"!columnNameSegments.length; else notLastSegment\">\r\n\t\t\t\t\t\t\t\t\t<!-- #region Toggle column -->\r\n\t\t\t\t\t\t\t\t\t<ng-container *ngSwitchCase=\"ColumnType.Toggle\">\r\n\t\t\t\t\t\t\t\t\t\t<mat-slide-toggle [formControl]=\"formGroup\" (click)=\"$event.stopPropagation();\" (change)=\"column.change?column.change(parentFormGroup.value, parentFormGroup, context):handleModelChange(column, parentFormGroup.value, parentFormGroup)\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" color=\"primary\"></mat-slide-toggle>\r\n\t\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t\t\t\t<!-- #region Text Input column -->\r\n\t\t\t\t\t\t\t\t\t<mat-form-field *ngSwitchCase=\"ColumnType.TextInput\" appearance=\"outline\" layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\r\n\t\t\t\t\t\t\t\t\t\t<input matInput [formControl]=\"formGroup\" type=\"{{column.inputType}}\" autocomplete=\"none\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" [min]=\"column.inputMin?column.inputMin(parentFormGroup.value, parentFormGroup, context):null\" [max]=\"column.inputMax?column.inputMax(parentFormGroup.value, parentFormGroup, context):null\" (keydown.enter)=\"handleKeydownEnter($event)\">\r\n\t\t\t\t\t\t\t\t\t</mat-form-field>\r\n\t\t\t\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t\t\t\t<!-- #region VD-Select column -->\r\n\t\t\t\t\t\t\t\t\t<mat-form-field *ngSwitchCase=\"ColumnType.Select\" appearance=\"outline\" layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\r\n\t\t\t\t\t\t\t\t\t\t<vd-select [formControl]=\"formGroup\" [enum]=\"column.enumType\" [enumFilter]=\"column.enumFilter | func:parentFormGroup.value:context\" [prefix]=\"column.enumPrefix\" [options]=\"column.options\" [defaultOption]=\"column.defaultOption??true\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" (selectionChange)=\"column.change?column.change(parentFormGroup.value, parentFormGroup, context):patch(parentFormGroup.value, [column.name], rowValue, column.patchIncludes)\" (keydown.enter)=\"handleKeydownEnter($event)\"></vd-select>\r\n\t\t\t\t\t\t\t\t\t</mat-form-field>\r\n\t\t\t\t\t\t\t\t\t<!-- #endregion -->\r\n\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t\t<ng-template #notLastSegment>\r\n\t\t\t\t\t\t\t\t\t<!-- If not the last segment, create a nested form group -->\r\n\t\t\t\t\t\t\t\t\t<ng-container [formGroupName]=\"columnNameSegments[0]\">\r\n\t\t\t\t\t\t\t\t\t\t<!-- Recursive call to handle nested segments -->\r\n\t\t\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: columnNameSegments.slice(1), parentFormGroup:formGroup, formGroup: formGroup.get(columnNameSegments[0])}\"></ng-container>\r\n\t\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t</ng-template>\r\n\r\n\t\t\t\t\t\t<!-- #region Toggle column -->\r\n\t\t\t\t\t\t<ng-container *ngSwitchCase=\"ColumnType.Toggle\">\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"!formArray\">\r\n\t\t\t\t\t\t\t\t<mat-slide-toggle [(ngModel)]=\"row[column.name]\" (click)=\"$event.stopPropagation();\" (ngModelChange)=\"handleModelChange(column, row, undefined)\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" color=\"primary\"></mat-slide-toggle>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"formArray\" [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\r\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t<!-- #region Date column -->\r\n\t\t\t\t\t\t<span *ngSwitchCase=\"ColumnType.Date\">{{rowValue | date:column.shortDate?'dd.MM.yyyy':'dd.MM.yyyy HH:mm:ss'}}</span>\r\n\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t<!-- #region Text Input column -->\r\n\t\t\t\t\t\t<ng-container *ngSwitchCase=\"ColumnType.TextInput\">\r\n\t\t\t\t\t\t\t<mat-form-field *ngIf=\"!formArray\" appearance=\"outline\" layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\r\n\t\t\t\t\t\t\t\t<input matInput *ngIf=\"!formArray\" type=\"{{column.inputType}}\" autocomplete=\"none\" name=\"{{column.name}}{{rowIndex}}\" [(ngModel)]=\"row[column.name]\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" [min]=\"column.inputMin?column.inputMin(row, undefined, context):null\" [max]=\"column.inputMax?column.inputMax(row, undefined, context):null\" (ngModelChange)=\"column.change?column.change(row, undefined, context):patch(row, [column.name], rowValue, column.patchIncludes)\" [ngModelOptions]=\"{updateOn: 'blur'}\" (keydown.enter)=\"handleKeydownEnter($event)\">\r\n\t\t\t\t\t\t\t</mat-form-field>\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"formArray\" [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\r\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t<!-- #region VD-Select column -->\r\n\t\t\t\t\t\t<ng-container *ngSwitchCase=\"ColumnType.Select\">\r\n\t\t\t\t\t\t\t<mat-form-field *ngIf=\"!formArray\" appearance=\"outline\" layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\r\n\t\t\t\t\t\t\t\t<vd-select *ngIf=\"!formArray\" name=\"{{column.name}}{{rowIndex}}\" [enum]=\"column.enumType\" [enumFilter]=\"column?.enumFilter  | func:row:context\" [prefix]=\"column.enumPrefix\" [options]=\"column.options\" [defaultOption]=\"column.defaultOption??true\" [(ngModel)]=\"row[column.name]\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" (selectionChange)=\"column.change?column.change(row, undefined, context):patch(row, [column.name], rowValue, column.patchIncludes)\" (keydown.enter)=\"handleKeydownEnter($event)\"></vd-select>\r\n\t\t\t\t\t\t\t</mat-form-field>\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"formArray\" [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\r\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t<!-- #region Action -->\r\n\t\t\t\t\t\t<ng-container *ngSwitchCase=\"ColumnType.Action\">\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"column.menu\">\r\n\t\t\t\t\t\t\t\t<div id=\"menu-{{row.id}}\" style=\"visibility: hidden; position: fixed;\" #contextMenuTrigger=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu.matMenu!\" *ngIf=\"menu?.matMenu && !row.locked && hasVisibleRowMenuItems(row, column)\"></div>\r\n\t\t\t\t\t\t\t\t<vd-dynamic-menu [items]=\"[column.menu]\" [data]=\"row\" [context]=\"context\" #menu></vd-dynamic-menu>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t<!-- #region Menu -->\r\n\t\t\t\t\t\t<ng-container *ngIf=\"column.menu\">\r\n\t\t\t\t\t\t\t<vd-dynamic-menu *ngSwitchCase=\"ColumnType.Menu\" [items]=\"[column.menu]\" [data]=\"row\" [context]=\"context\"></vd-dynamic-menu>\r\n\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t<!-- #region icon button -->\r\n\t\t\t\t\t\t<a mat-icon-button *ngSwitchCase=\"ColumnType.IconButton\" (click)=\"$event.stopPropagation();column.iconButton?.event?column.iconButton?.event(row, context):null\">\r\n\t\t\t\t\t\t\t<mat-icon fontSet=\"{{column.iconButton?.iconFontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.iconButton?.iconClass??'', row)\">{{handleExpression(column.iconButton?.icon??'radio_button_checked', row) || 'radio_button_checked'}}</mat-icon>\r\n\t\t\t\t\t\t</a>\r\n\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t<!-- #region Other column types -->\r\n\t\t\t\t\t\t<span *ngSwitchDefault [innerHtml]=\"rowValue??''\"></span>\r\n\t\t\t\t\t\t<!-- #endregion -->\r\n\t\t\t\t\t</ng-container>\r\n\t\t\t\t</ng-template>\r\n\t\t\t</td>\r\n\t\t</ng-container>\r\n\t\t<!-- #endregion -->\r\n\t</ng-container>\r\n\r\n\t<!-- #region Filter row -->\r\n\t<ng-container *ngIf=\"dataSource && filterable\">\r\n\t\t<ng-container *ngFor=\"let column of columns$ | async\">\r\n\t\t\t<ng-container cdkColumnDef=\"filter.{{column.filter || column.name}}\">\r\n\t\t\t\t<th mat-header-cell *cdkHeaderCellDef [hidden]=\"column.hidden\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\" [ngClass]=\"{'gt-xs': column.display == Grid.Xs, 'gt-sm': column.display == Grid.Sm, 'gt-md': column.display == Grid.Md, 'gt-lg': column.display == Grid.Lg, 'gt-xl': column.display == Grid.Xl, 'gt-xxl': column.display == Grid.Xxl, 'hidden': column.display == Grid.None}\">\r\n\t\t\t\t\t<!-- #region Select filter -->\r\n\t\t\t\t\t<span *ngIf=\"(column.endpoint || column.enumType || column.options) else notSelectFilter\" filter-select [endpoint]=\"column.endpoint\" [enum]=\"column.enumType\" [enumFilter]=\"column.enumFilter | func:{}:context\" [prefix]=\"column.enumPrefix\" [options]=\"column.options\" [text]=\"column.filterOptionText || 'name'\"></span>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Text filter -->\r\n\t\t\t\t\t<ng-template #notSelectFilter>\r\n\t\t\t\t\t\t<span *ngIf=\"notSelectFilter && (column.type == ColumnType.Text || column.type == ColumnType.TextInput || column.type == ColumnType.Number) else notInputFilter\" filter-input [onlyNumber]=\"column.filterInputNumber??false\" [operator]=\"column.filterOperator\"></span>\r\n\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Date filter -->\r\n\t\t\t\t\t<ng-template #notInputFilter>\r\n\t\t\t\t\t\t<span *ngIf=\"column.type == ColumnType.Date else notDateFilter\" filter-date></span>\r\n\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Action filter (clear) -->\r\n\t\t\t\t\t<ng-template #notDateFilter>\r\n\t\t\t\t\t\t<span *ngIf=\"column.type == ColumnType.Action\" filter-clear></span>\r\n\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\t\t\t\t</th>\r\n\t\t\t</ng-container>\r\n\t\t</ng-container>\r\n\t</ng-container>\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Details column -->\r\n\t<ng-container cdkColumnDef=\"expandedDetail\">\r\n\t\t<td mat-cell *matCellDef=\"let row; let index = index\" [attr.colspan]=\"(displayedColumns$ | async)?.length\">\r\n\t\t\t<div class=\"row-detail\" [@detailExpand]=\"row == expandedRow ? 'expanded' : 'collapsed'\" #detailsTemplate>\r\n\t\t\t\t<ng-container *ngIf=\"templateRef && row === expandedRow\">\r\n\t\t\t\t\t<ng-container *ngTemplateOutlet=\"templateRef; context:{row: row, index: index, context: context}\"></ng-container>\r\n\t\t\t\t</ng-container>\r\n\t\t\t</div>\r\n\t\t</td>\r\n\t</ng-container>\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Filter header -->\r\n\t<ng-container *ngIf=\"filterable\">\r\n\t\t<tr mat-header-row *cdkHeaderRowDef=\"displayedFilterColumns$ | async\"></tr>\r\n\t</ng-container>\r\n\t<!-- #endregion -->\r\n\r\n\t<tr mat-header-row *cdkHeaderRowDef=\"displayedColumns$ | async; sticky: stickyFilter\"></tr>\r\n\t<tr mat-row *cdkRowDef=\"let row; columns: displayedColumns$ | async; let index = dataIndex\" [ngClass]=\"rowNgClass?rowNgClass(row, context):null\" [class.expanded-row]=\"expandedRow === row\" (click)=\"handleRowClick(index, row)\" (contextmenu)=\"handleRowRightClick($event, row)\"></tr>\r\n\r\n\t<!-- #region Detrails row -->\r\n\t<ng-container *ngIf=\"detailsTemplate || templateRef\">\r\n\t\t<tr mat-row *cdkRowDef=\"let row; columns: ['expandedDetail']\" class=\"detail-row\" [ngClass]=\"rowNgClass?rowNgClass(row, context):null\"></tr>\r\n\t</ng-container>\r\n\t<!-- #endregion -->\r\n</table>\r\n<!-- #endregion -->\r\n\r\n<!-- #region Row shown when there is no matching data.-->\r\n<div class=\"mat-cell pad table-empty txt-italic\" *ngIf=\"!dataSource?.filteredData?.length && !dataSource?.total\" i18n=\"@@noResultsFound\">No results were found.</div>\r\n<!-- #endregion -->\r\n\r\n<!-- #region Debug value -->\r\n<code *ngIf=\"debugValue\">\r\n\t<pre>{{formValue | json}}</pre>\r\n</code>\r\n<!-- #endregion -->\r\n\r\n<div class=\"table-footer\" layout=\"row\">\r\n\t<ng-content select=\"[table-footer]\"></ng-content>\r\n\t<span flex></span>\r\n\t<mat-paginator *ngIf=\"paginable\" [pageSize]=\"pageSize\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\"></mat-paginator>\r\n</div>", styles: ["::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-form-field .mat-form-field-wrapper{width:100%}@media (max-width: 389px){::ng-deep .mat-mdc-table [gt-xs],::ng-deep .mat-mdc-table .gt-xs{display:none}::ng-deep .mat-mdc-table [gt-sm],::ng-deep .mat-mdc-table .gt-sm{display:none}::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media (max-width: 599px){::ng-deep .mat-mdc-table [gt-sm],::ng-deep .mat-mdc-table .gt-sm{display:none}::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media (max-width: 959px){::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media (max-width: 1279px){::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media (max-width: 1919px){::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media (max-width: 1979px){::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: VdDynamicMenuComponent, selector: "vd-dynamic-menu", inputs: ["items", "data", "index", "context", "contextMenu"] }, { kind: "directive", type: DisableControlDirective, selector: "[disableControl]", inputs: ["disableControl"] }, { kind: "directive", type: OnlyNumberDirective, selector: "[onlyNumber]", inputs: ["onlyNumber"] }, { kind: "component", type: VdSelectComponent, selector: "vd-select", inputs: ["triggerCssClass", "triggerMode"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: i5$1.MatIconAnchor, selector: "a[mat-icon-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i1$4.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$4.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$4.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$4.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$4.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$4.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i13.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i13.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: i2$2.CdkRowDef, selector: "[cdkRowDef]", inputs: ["cdkRowDefColumns", "cdkRowDefWhen"] }, { kind: "directive", type: i2$2.CdkCellDef, selector: "[cdkCellDef]" }, { kind: "directive", type: i2$2.CdkHeaderCellDef, selector: "[cdkHeaderCellDef]" }, { kind: "directive", type: i2$2.CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["cdkColumnDef", "sticky", "stickyEnd"] }, { kind: "directive", type: i2$2.CdkHeaderRowDef, selector: "[cdkHeaderRowDef]", inputs: ["cdkHeaderRowDef", "cdkHeaderRowDefSticky"] }, { kind: "component", type: i15.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i16.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i18.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i19.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: i20$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FilterInputComponent, selector: "mat-header-cell[filter-input], [mat-header-cell][filter-input], [filter-input]", inputs: ["field", "operator", "onlyNumber", "debounce", "placeholder"] }, { kind: "component", type: FilterSelectComponent, selector: "mat-header-cell[filter-select], [mat-header-cell][filter-select], [filter-select]", inputs: ["endpoint", "params", "projection", "sortBy", "sorted", "enumFilter", "enum", "key", "text", "prefix", "multiple", "options", "filteredOptions", "filterable", "field", "placeholder", "cache"] }, { kind: "component", type: FilterClearComponent, selector: "mat-header-cell[filter-clear], [mat-header-cell][filter-clear], [filter-clear]" }, { kind: "component", type: FilterDateComponent, selector: "mat-header-cell[filter-date], [mat-header-cell][filter-date], [filter-date]", inputs: ["field", "debounce", "placeholder"] }, { kind: "directive", type: DataSourceFilterDirective, selector: "[dataSourceFilter]", inputs: ["dataSource", "dataSourceFilter"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.JsonPipe, name: "json" }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "pipe", type: EnumPipe, name: "enum" }, { kind: "pipe", type: FormGroupPipe, name: "formGroup" }, { kind: "pipe", type: FuncPipe, name: "func" }], animations: [
+    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: VdDynamicTableComponent, selector: "vd-dynamic-table", inputs: { dataSource: "dataSource", data: "data", formArray: "formArray", debugValue: "debugValue", classType: "classType", context: "context", dataSourceFilter: "dataSourceFilter", static: "static", filterable: "filterable", paginable: "paginable", selectable: "selectable", sortActive: "sortActive", sortDirection: "sortDirection", stickyHeader: "stickyHeader", stickyFilter: "stickyFilter", rowNgClass: "rowNgClass", detailsTemplate: "detailsTemplate", readonly: "readonly", selectAllFilter: "selectAllFilter", columns: "columns", rowMenuItems: "rowMenuItems", rowAction: "rowAction", excludedColumns: "excludedColumns", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions" }, outputs: { rowClick: "rowClick" }, queries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true }, { propertyName: "matSort", first: true, predicate: MatSort, descendants: true, static: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "detailsTemplateRef", predicate: ["detailsTemplate"], descendants: true, read: ViewContainerRef }, { propertyName: "rowContextMenuTriggers", predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<div class=\"loading-progress\" *ngIf=\"!static\">\r\n\t<mat-progress-bar mode=\"indeterminate\" *ngIf=\"dataSource?.isLoading\"></mat-progress-bar>\r\n</div>\r\n\r\n<!-- #region Data table -->\r\n<table mat-table #table [dataSource]=\"dataSource\" [dataSourceFilter]=\"dataSourceFilter\" [ngClass]=\"{'table-fixed': !detailsTemplate && !templateRef}\" [trackBy]=\"trackBy\" matSort matSortDisableClear [matSortActive]=\"sortActive||'id'\" [matSortDirection]=\"sortDirection\" multiTemplateDataRows>\r\n\t<ng-container *ngFor=\"let column of columns$ | async; trackBy:columnsTrackBy\">\r\n\t\t<!-- #region Column def -->\r\n\t\t<ng-container [cdkColumnDef]=\"column.name\" [sticky]=\"column.sticky\" [stickyEnd]=\"column.stickyEnd\">\r\n\t\t\t<th mat-header-cell *cdkHeaderCellDef [mat-sort-header]=\"column.sortBy || column.name\" [hidden]=\"column.hidden\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\" [disabled]=\"column.type == ColumnType.Checkbox || column.disabled\" [ngClass]=\"{'gt-xs': column.display == Grid.Xs, 'gt-sm': column.display == Grid.Sm, 'gt-md': column.display == Grid.Md, 'gt-lg': column.display == Grid.Lg, 'gt-xl': column.display == Grid.Xl, 'gt-xxl': column.display == Grid.Xxl, 'hidden': column.display == Grid.None}\" [arrowPosition]=\"column.arrowBefore?'before':'after'\">\r\n\t\t\t\t<mat-checkbox *ngIf=\"column.type == ColumnType.Checkbox\" (change)=\"$event ? dataSource.toggleSelect($event, selectAllFilter) : null\" [disabled]=\"!dataSource.paginator?.length\" [checked]=\"dataSource.selectionModel.hasValue() && dataSource.isAllSelected()\" [indeterminate]=\"dataSource.selectionModel.hasValue() && !dataSource.isAllSelected()\"></mat-checkbox>\r\n\t\t\t\t<span *ngIf=\"column.type != ColumnType.Checkbox\">{{column.header | func:context}}</span>\r\n\t\t\t</th>\r\n\r\n\t\t\t<td mat-cell *cdkCellDef=\"let row; let rowIndex = dataIndex\" [matTooltip]=\"column.tooltip?column.tooltip(row, undefined, context):null\" [matTooltipClass]=\"column.tooltipClass??''\" [hidden]=\"column.hidden\" [ngClass]=\"getRowClasses(column, row)\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\">\r\n\t\t\t\t<ng-template #rowVal [ngTemplateOutlet]=\"rowVal\" let-rowValue [ngTemplateOutletContext]=\"{$implicit: column?.content && column?.content(row, undefined, context)}\">\r\n\t\t\t\t\t<ng-container [ngSwitch]=\"column.type\">\r\n\t\t\t\t\t\t<!-- #region Checkbox column -->\r\n\t\t\t\t\t\t<mat-checkbox *ngSwitchCase=\"ColumnType.Checkbox\" (click)=\"$event.stopPropagation()\" (change)=\"$event ? dataSource.selectionModel.toggle(row) : null\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" [checked]=\"dataSource.selectionModel.isSelected(row)\"></mat-checkbox>\r\n\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t<!-- #region Enum column -->\r\n\t\t\t\t\t\t<span *ngSwitchCase=\"ColumnType.Enum\">\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"column.multiple; else elseTemplate\">\r\n\t\t\t\t\t\t\t\t<div *ngFor=\"let item of rowValue; let i = index; let last = last\">\r\n\t\t\t\t\t\t\t\t\t<small *ngIf=\"i<2\" i18n=\"@@selection\">{item | enum:column.enumType:column.enumPrefix, select, type {type} other {{{item | enum:column.enumType:column.enumPrefix}}}}</small><small *ngIf=\"i==1 && rowValue?.length > 2\">, ...</small>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t<ng-template #elseTemplate>\r\n\t\t\t\t\t\t\t\t<span *ngIf=\"rowValue >= 0\" i18n=\"@@selection\">{rowValue | enum:column.enumType:column.enumPrefix, select, type {type} other {{{rowValue | enum:column.enumType:column.enumPrefix}}}}</span>\r\n\t\t\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t<ng-template #recursiveContainer let-columnNameSegments=\"segments\" let-formGroup=\"formGroup\" let-parentFormGroup=\"parentFormGroup\">\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"formGroup\" [formGroup]=\"formGroup\">\r\n\t\t\t\t\t\t\t\t<!-- If the columnNameSegments array is empty, we're at the leaf node -->\r\n\t\t\t\t\t\t\t\t<ng-container *ngIf=\"!columnNameSegments.length; else notLastSegment\">\r\n\t\t\t\t\t\t\t\t\t<!-- #region Toggle column -->\r\n\t\t\t\t\t\t\t\t\t<ng-container *ngSwitchCase=\"ColumnType.Toggle\">\r\n\t\t\t\t\t\t\t\t\t\t<mat-slide-toggle [formControl]=\"formGroup\" (click)=\"$event.stopPropagation();\" (change)=\"column.change?column.change(parentFormGroup.value, parentFormGroup, context):handleModelChange(column, parentFormGroup.value, parentFormGroup)\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" color=\"primary\"></mat-slide-toggle>\r\n\t\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t\t\t\t<!-- #region Text Input column -->\r\n\t\t\t\t\t\t\t\t\t<mat-form-field *ngSwitchCase=\"ColumnType.TextInput\" appearance=\"outline\" layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\r\n\t\t\t\t\t\t\t\t\t\t<input matInput [formControl]=\"formGroup\" type=\"{{column.inputType}}\" autocomplete=\"none\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" [min]=\"column.inputMin?column.inputMin(parentFormGroup.value, parentFormGroup, context):null\" [max]=\"column.inputMax?column.inputMax(parentFormGroup.value, parentFormGroup, context):null\" (keydown.enter)=\"handleKeydownEnter($event)\">\r\n\t\t\t\t\t\t\t\t\t</mat-form-field>\r\n\t\t\t\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t\t\t\t<!-- #region VD-Select column -->\r\n\t\t\t\t\t\t\t\t\t<mat-form-field *ngSwitchCase=\"ColumnType.Select\" appearance=\"outline\" layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\r\n\t\t\t\t\t\t\t\t\t\t<vd-select [formControl]=\"formGroup\" [enum]=\"column.enumType\" [enumFilter]=\"column.enumFilter | func:parentFormGroup.value:context\" [prefix]=\"column.enumPrefix\" [options]=\"column.options\" [defaultOption]=\"column.defaultOption??true\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" (selectionChange)=\"column.change?column.change(parentFormGroup.value, parentFormGroup, context):patch(parentFormGroup.value, [column.name], rowValue, column.patchIncludes)\" (keydown.enter)=\"handleKeydownEnter($event)\"></vd-select>\r\n\t\t\t\t\t\t\t\t\t</mat-form-field>\r\n\t\t\t\t\t\t\t\t\t<!-- #endregion -->\r\n\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t\t<ng-template #notLastSegment>\r\n\t\t\t\t\t\t\t\t\t<!-- If not the last segment, create a nested form group -->\r\n\t\t\t\t\t\t\t\t\t<ng-container [formGroupName]=\"columnNameSegments[0]\">\r\n\t\t\t\t\t\t\t\t\t\t<!-- Recursive call to handle nested segments -->\r\n\t\t\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: columnNameSegments.slice(1), parentFormGroup:formGroup, formGroup: formGroup.get(columnNameSegments[0])}\"></ng-container>\r\n\t\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t</ng-template>\r\n\r\n\t\t\t\t\t\t<!-- #region Toggle column -->\r\n\t\t\t\t\t\t<ng-container *ngSwitchCase=\"ColumnType.Toggle\">\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"!formArray\">\r\n\t\t\t\t\t\t\t\t<mat-slide-toggle [(ngModel)]=\"row[column.name]\" (click)=\"$event.stopPropagation();\" (ngModelChange)=\"handleModelChange(column, row, undefined)\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" color=\"primary\"></mat-slide-toggle>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"formArray\" [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\r\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t<!-- #region Date column -->\r\n\t\t\t\t\t\t<span *ngSwitchCase=\"ColumnType.Date\">{{rowValue | date:column.shortDate?'dd.MM.yyyy':'dd.MM.yyyy HH:mm:ss'}}</span>\r\n\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t<!-- #region Text Input column -->\r\n\t\t\t\t\t\t<ng-container *ngSwitchCase=\"ColumnType.TextInput\">\r\n\t\t\t\t\t\t\t<mat-form-field *ngIf=\"!formArray\" appearance=\"outline\" layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\r\n\t\t\t\t\t\t\t\t<input matInput *ngIf=\"!formArray\" type=\"{{column.inputType}}\" autocomplete=\"none\" name=\"{{column.name}}{{rowIndex}}\" [(ngModel)]=\"row[column.name]\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" [min]=\"column.inputMin?column.inputMin(row, undefined, context):null\" [max]=\"column.inputMax?column.inputMax(row, undefined, context):null\" (ngModelChange)=\"column.change?column.change(row, undefined, context):patch(row, [column.name], rowValue, column.patchIncludes)\" [ngModelOptions]=\"{updateOn: 'blur'}\" (keydown.enter)=\"handleKeydownEnter($event)\">\r\n\t\t\t\t\t\t\t</mat-form-field>\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"formArray\" [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\r\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t<!-- #region VD-Select column -->\r\n\t\t\t\t\t\t<ng-container *ngSwitchCase=\"ColumnType.Select\">\r\n\t\t\t\t\t\t\t<mat-form-field *ngIf=\"!formArray\" appearance=\"outline\" layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\r\n\t\t\t\t\t\t\t\t<vd-select *ngIf=\"!formArray\" name=\"{{column.name}}{{rowIndex}}\" [enum]=\"column.enumType\" [enumFilter]=\"column?.enumFilter  | func:row:context\" [prefix]=\"column.enumPrefix\" [options]=\"column.options\" [defaultOption]=\"column.defaultOption??true\" [(ngModel)]=\"row[column.name]\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" (selectionChange)=\"column.change?column.change(row, undefined, context):patch(row, [column.name], rowValue, column.patchIncludes)\" (keydown.enter)=\"handleKeydownEnter($event)\"></vd-select>\r\n\t\t\t\t\t\t\t</mat-form-field>\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"formArray\" [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\r\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t<!-- #region Action -->\r\n\t\t\t\t\t\t<ng-container *ngSwitchCase=\"ColumnType.Action\">\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"column.menu\">\r\n\t\t\t\t\t\t\t\t<div id=\"menu-{{row.id}}\" style=\"visibility: hidden; position: fixed;\" #contextMenuTrigger=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu.matMenu!\" *ngIf=\"menu?.matMenu && !row.locked && hasVisibleRowMenuItems(row, column)\"></div>\r\n\t\t\t\t\t\t\t\t<vd-dynamic-menu [items]=\"[column.menu]\" [data]=\"row\" [context]=\"context\" #menu></vd-dynamic-menu>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t<!-- #region Menu -->\r\n\t\t\t\t\t\t<ng-container *ngIf=\"column.menu\">\r\n\t\t\t\t\t\t\t<vd-dynamic-menu *ngSwitchCase=\"ColumnType.Menu\" [items]=\"[column.menu]\" [data]=\"row\" [context]=\"context\"></vd-dynamic-menu>\r\n\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t<!-- #region icon -->\r\n\t\t\t\t\t\t<span *ngSwitchCase=\"ColumnType.Icon\" layout=\"row\" layout-align=\"start center\">\r\n\t\t\t\t\t\t\t<mat-icon *ngIf=\"column.icon?.matIcon\" fontSet=\"{{column.icon?.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon?.cssClass??'', row)\">{{handleExpression(column.icon?.matIcon!, row)}}</mat-icon>\r\n\t\t\t\t\t\t\t<mat-icon *ngIf=\"column.icon?.svgIcon\" fontSet=\"{{column.icon?.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon?.cssClass??'', row)\" [svgIcon]=\"handleExpression(column.icon?.svgIcon!, row)!\"></mat-icon>\r\n\t\t\t\t\t\t\t<mat-icon *ngIf=\"column.icon?.fontIcon\" fontSet=\"{{column.icon?.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon?.cssClass??'', row)\" [fontIcon]=\"handleExpression(column.icon?.fontIcon!, row)!\"></mat-icon>\r\n\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t<!-- #region icon button -->\r\n\t\t\t\t\t\t<a mat-icon-button *ngSwitchCase=\"ColumnType.IconButton\" (click)=\"$event.stopPropagation();column.iconButton?.event?column.iconButton?.event(row, context):null\">\r\n\t\t\t\t\t\t\t<mat-icon fontSet=\"{{column.iconButton?.iconFontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.iconButton?.iconClass??'', row)\">{{handleExpression(column.iconButton?.icon??'radio_button_checked', row) || 'radio_button_checked'}}</mat-icon>\r\n\t\t\t\t\t\t</a>\r\n\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t<!-- #region Other column types -->\r\n\t\t\t\t\t\t<span *ngSwitchDefault [innerHtml]=\"rowValue??''\"></span>\r\n\t\t\t\t\t\t<!-- #endregion -->\r\n\t\t\t\t\t</ng-container>\r\n\t\t\t\t</ng-template>\r\n\t\t\t</td>\r\n\t\t</ng-container>\r\n\t\t<!-- #endregion -->\r\n\t</ng-container>\r\n\r\n\t<!-- #region Filter row -->\r\n\t<ng-container *ngIf=\"dataSource && filterable\">\r\n\t\t<ng-container *ngFor=\"let column of columns$ | async\">\r\n\t\t\t<ng-container cdkColumnDef=\"filter.{{column.filter || column.name}}\">\r\n\t\t\t\t<th mat-header-cell *cdkHeaderCellDef [hidden]=\"column.hidden\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\" [ngClass]=\"{'gt-xs': column.display == Grid.Xs, 'gt-sm': column.display == Grid.Sm, 'gt-md': column.display == Grid.Md, 'gt-lg': column.display == Grid.Lg, 'gt-xl': column.display == Grid.Xl, 'gt-xxl': column.display == Grid.Xxl, 'hidden': column.display == Grid.None}\">\r\n\t\t\t\t\t<!-- #region Select filter -->\r\n\t\t\t\t\t<span *ngIf=\"(column.endpoint || column.enumType || column.options) else notSelectFilter\" filter-select [endpoint]=\"column.endpoint\" [enum]=\"column.enumType\" [enumFilter]=\"column.enumFilter | func:{}:context\" [prefix]=\"column.enumPrefix\" [options]=\"column.options\" [text]=\"column.filterOptionText || 'name'\"></span>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Text filter -->\r\n\t\t\t\t\t<ng-template #notSelectFilter>\r\n\t\t\t\t\t\t<span *ngIf=\"notSelectFilter && (column.type == ColumnType.Text || column.type == ColumnType.TextInput || column.type == ColumnType.Number) else notInputFilter\" filter-input [onlyNumber]=\"column.filterInputNumber??false\" [operator]=\"column.filterOperator\"></span>\r\n\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Date filter -->\r\n\t\t\t\t\t<ng-template #notInputFilter>\r\n\t\t\t\t\t\t<span *ngIf=\"column.type == ColumnType.Date else notDateFilter\" filter-date></span>\r\n\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Action filter (clear) -->\r\n\t\t\t\t\t<ng-template #notDateFilter>\r\n\t\t\t\t\t\t<span *ngIf=\"column.type == ColumnType.Action\" filter-clear></span>\r\n\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\t\t\t\t</th>\r\n\t\t\t</ng-container>\r\n\t\t</ng-container>\r\n\t</ng-container>\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Details column -->\r\n\t<ng-container cdkColumnDef=\"expandedDetail\">\r\n\t\t<td mat-cell *matCellDef=\"let row; let index = index\" [attr.colspan]=\"(displayedColumns$ | async)?.length\">\r\n\t\t\t<div class=\"row-detail\" [@detailExpand]=\"row == expandedRow ? 'expanded' : 'collapsed'\" #detailsTemplate>\r\n\t\t\t\t<ng-container *ngIf=\"templateRef && row === expandedRow\">\r\n\t\t\t\t\t<ng-container *ngTemplateOutlet=\"templateRef; context:{row: row, index: index, context: context}\"></ng-container>\r\n\t\t\t\t</ng-container>\r\n\t\t\t</div>\r\n\t\t</td>\r\n\t</ng-container>\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Filter header -->\r\n\t<ng-container *ngIf=\"filterable\">\r\n\t\t<tr mat-header-row *cdkHeaderRowDef=\"displayedFilterColumns$ | async\"></tr>\r\n\t</ng-container>\r\n\t<!-- #endregion -->\r\n\r\n\t<tr mat-header-row *cdkHeaderRowDef=\"displayedColumns$ | async; sticky: stickyFilter\"></tr>\r\n\t<tr mat-row *cdkRowDef=\"let row; columns: displayedColumns$ | async; let index = dataIndex\" [ngClass]=\"rowNgClass?rowNgClass(row, context):null\" [class.expanded-row]=\"expandedRow === row\" (click)=\"handleRowClick(index, row)\" (contextmenu)=\"handleRowRightClick($event, row)\"></tr>\r\n\r\n\t<!-- #region Detrails row -->\r\n\t<ng-container *ngIf=\"detailsTemplate || templateRef\">\r\n\t\t<tr mat-row *cdkRowDef=\"let row; columns: ['expandedDetail']\" class=\"detail-row\" [ngClass]=\"rowNgClass?rowNgClass(row, context):null\"></tr>\r\n\t</ng-container>\r\n\t<!-- #endregion -->\r\n</table>\r\n<!-- #endregion -->\r\n\r\n<!-- #region Row shown when there is no matching data.-->\r\n<div class=\"mat-cell pad table-empty txt-italic\" *ngIf=\"!dataSource?.filteredData?.length && !dataSource?.total\" i18n=\"@@noResultsFound\">No results were found.</div>\r\n<!-- #endregion -->\r\n\r\n<!-- #region Debug value -->\r\n<code *ngIf=\"debugValue\">\r\n\t<pre>{{formValue | json}}</pre>\r\n</code>\r\n<!-- #endregion -->\r\n\r\n<div class=\"table-footer\" layout=\"row\">\r\n\t<ng-content select=\"[table-footer]\"></ng-content>\r\n\t<span flex></span>\r\n\t<mat-paginator *ngIf=\"paginable\" [pageSize]=\"pageSize\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\"></mat-paginator>\r\n</div>", styles: ["::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-form-field .mat-form-field-wrapper{width:100%}@media (max-width: 389px){::ng-deep .mat-mdc-table [gt-xs],::ng-deep .mat-mdc-table .gt-xs{display:none}::ng-deep .mat-mdc-table [gt-sm],::ng-deep .mat-mdc-table .gt-sm{display:none}::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media (max-width: 599px){::ng-deep .mat-mdc-table [gt-sm],::ng-deep .mat-mdc-table .gt-sm{display:none}::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media (max-width: 959px){::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media (max-width: 1279px){::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media (max-width: 1919px){::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media (max-width: 1979px){::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: VdDynamicMenuComponent, selector: "vd-dynamic-menu", inputs: ["items", "data", "index", "context", "contextMenu"] }, { kind: "directive", type: DisableControlDirective, selector: "[disableControl]", inputs: ["disableControl"] }, { kind: "directive", type: OnlyNumberDirective, selector: "[onlyNumber]", inputs: ["onlyNumber"] }, { kind: "component", type: VdSelectComponent, selector: "vd-select", inputs: ["triggerCssClass", "triggerMode"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: i5$1.MatIconAnchor, selector: "a[mat-icon-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i1$4.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$4.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$4.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$4.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$4.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$4.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i13.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i13.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: i2$2.CdkRowDef, selector: "[cdkRowDef]", inputs: ["cdkRowDefColumns", "cdkRowDefWhen"] }, { kind: "directive", type: i2$2.CdkCellDef, selector: "[cdkCellDef]" }, { kind: "directive", type: i2$2.CdkHeaderCellDef, selector: "[cdkHeaderCellDef]" }, { kind: "directive", type: i2$2.CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["cdkColumnDef", "sticky", "stickyEnd"] }, { kind: "directive", type: i2$2.CdkHeaderRowDef, selector: "[cdkHeaderRowDef]", inputs: ["cdkHeaderRowDef", "cdkHeaderRowDefSticky"] }, { kind: "component", type: i15.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i16.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i18.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i19.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: i20$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FilterInputComponent, selector: "mat-header-cell[filter-input], [mat-header-cell][filter-input], [filter-input]", inputs: ["field", "operator", "onlyNumber", "debounce", "placeholder"] }, { kind: "component", type: FilterSelectComponent, selector: "mat-header-cell[filter-select], [mat-header-cell][filter-select], [filter-select]", inputs: ["endpoint", "params", "projection", "sortBy", "sorted", "enumFilter", "enum", "key", "text", "prefix", "multiple", "options", "filteredOptions", "filterable", "field", "placeholder", "cache"] }, { kind: "component", type: FilterClearComponent, selector: "mat-header-cell[filter-clear], [mat-header-cell][filter-clear], [filter-clear]" }, { kind: "component", type: FilterDateComponent, selector: "mat-header-cell[filter-date], [mat-header-cell][filter-date], [filter-date]", inputs: ["field", "debounce", "placeholder"] }, { kind: "directive", type: DataSourceFilterDirective, selector: "[dataSourceFilter]", inputs: ["dataSource", "dataSourceFilter"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.JsonPipe, name: "json" }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "pipe", type: EnumPipe, name: "enum" }, { kind: "pipe", type: FormGroupPipe, name: "formGroup" }, { kind: "pipe", type: FuncPipe, name: "func" }], animations: [
             trigger('detailExpand', [
                 state('collapsed', style({ height: '0px', minHeight: '0' })),
                 state('expanded', style({ height: AUTO_STYLE })),
@@ -14191,7 +14307,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
                             state('expanded', style({ height: AUTO_STYLE })),
                             transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
                         ]),
-                    ], template: "<div class=\"loading-progress\" *ngIf=\"!static\">\r\n\t<mat-progress-bar mode=\"indeterminate\" *ngIf=\"dataSource?.isLoading\"></mat-progress-bar>\r\n</div>\r\n\r\n<!-- #region Data table -->\r\n<table mat-table #table [dataSource]=\"dataSource\" [dataSourceFilter]=\"dataSourceFilter\" [ngClass]=\"{'table-fixed': !detailsTemplate && !templateRef}\" [trackBy]=\"trackBy\" matSort matSortDisableClear [matSortActive]=\"sortActive||'id'\" [matSortDirection]=\"sortDirection\" multiTemplateDataRows>\r\n\t<ng-container *ngFor=\"let column of columns$ | async; trackBy:columnsTrackBy\">\r\n\t\t<!-- #region Column def -->\r\n\t\t<ng-container [cdkColumnDef]=\"column.name\" [sticky]=\"column.sticky\" [stickyEnd]=\"column.stickyEnd\">\r\n\t\t\t<th mat-header-cell *cdkHeaderCellDef [mat-sort-header]=\"column.sortBy || column.name\" [hidden]=\"column.hidden\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\" [disabled]=\"column.type == ColumnType.Checkbox || column.disabled\" [ngClass]=\"{'gt-xs': column.display == Grid.Xs, 'gt-sm': column.display == Grid.Sm, 'gt-md': column.display == Grid.Md, 'gt-lg': column.display == Grid.Lg, 'gt-xl': column.display == Grid.Xl, 'gt-xxl': column.display == Grid.Xxl, 'hidden': column.display == Grid.None}\" [arrowPosition]=\"column.arrowBefore?'before':'after'\">\r\n\t\t\t\t<mat-checkbox *ngIf=\"column.type == ColumnType.Checkbox\" (change)=\"$event ? dataSource.toggleSelect($event, selectAllFilter) : null\" [disabled]=\"!dataSource.paginator?.length\" [checked]=\"dataSource.selectionModel.hasValue() && dataSource.isAllSelected()\" [indeterminate]=\"dataSource.selectionModel.hasValue() && !dataSource.isAllSelected()\"></mat-checkbox>\r\n\t\t\t\t<span *ngIf=\"column.type != ColumnType.Checkbox\">{{column.header | func:context}}</span>\r\n\t\t\t</th>\r\n\r\n\t\t\t<td mat-cell *cdkCellDef=\"let row; let rowIndex = dataIndex\" [matTooltip]=\"column.tooltip?column.tooltip(row, undefined, context):null\" [matTooltipClass]=\"column.tooltipClass??''\" [hidden]=\"column.hidden\" [ngClass]=\"getRowClasses(column, row)\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\">\r\n\t\t\t\t<ng-template #rowVal [ngTemplateOutlet]=\"rowVal\" let-rowValue [ngTemplateOutletContext]=\"{$implicit: column?.content && column?.content(row, undefined, context)}\">\r\n\t\t\t\t\t<ng-container [ngSwitch]=\"column.type\">\r\n\t\t\t\t\t\t<!-- #region Checkbox column -->\r\n\t\t\t\t\t\t<mat-checkbox *ngSwitchCase=\"ColumnType.Checkbox\" (click)=\"$event.stopPropagation()\" (change)=\"$event ? dataSource.selectionModel.toggle(row) : null\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" [checked]=\"dataSource.selectionModel.isSelected(row)\"></mat-checkbox>\r\n\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t<!-- #region Enum column -->\r\n\t\t\t\t\t\t<span *ngSwitchCase=\"ColumnType.Enum\">\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"column.multiple; else elseTemplate\">\r\n\t\t\t\t\t\t\t\t<div *ngFor=\"let item of rowValue; let i = index; let last = last\">\r\n\t\t\t\t\t\t\t\t\t<small *ngIf=\"i<2\" i18n=\"@@selection\">{item | enum:column.enumType:column.enumPrefix, select, type {type} other {{{item | enum:column.enumType:column.enumPrefix}}}}</small><small *ngIf=\"i==1 && rowValue?.length > 2\">, ...</small>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t<ng-template #elseTemplate>\r\n\t\t\t\t\t\t\t\t<span *ngIf=\"rowValue >= 0\" i18n=\"@@selection\">{rowValue | enum:column.enumType:column.enumPrefix, select, type {type} other {{{rowValue | enum:column.enumType:column.enumPrefix}}}}</span>\r\n\t\t\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t<ng-template #recursiveContainer let-columnNameSegments=\"segments\" let-formGroup=\"formGroup\" let-parentFormGroup=\"parentFormGroup\">\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"formGroup\" [formGroup]=\"formGroup\">\r\n\t\t\t\t\t\t\t\t<!-- If the columnNameSegments array is empty, we're at the leaf node -->\r\n\t\t\t\t\t\t\t\t<ng-container *ngIf=\"!columnNameSegments.length; else notLastSegment\">\r\n\t\t\t\t\t\t\t\t\t<!-- #region Toggle column -->\r\n\t\t\t\t\t\t\t\t\t<ng-container *ngSwitchCase=\"ColumnType.Toggle\">\r\n\t\t\t\t\t\t\t\t\t\t<mat-slide-toggle [formControl]=\"formGroup\" (click)=\"$event.stopPropagation();\" (change)=\"column.change?column.change(parentFormGroup.value, parentFormGroup, context):handleModelChange(column, parentFormGroup.value, parentFormGroup)\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" color=\"primary\"></mat-slide-toggle>\r\n\t\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t\t\t\t<!-- #region Text Input column -->\r\n\t\t\t\t\t\t\t\t\t<mat-form-field *ngSwitchCase=\"ColumnType.TextInput\" appearance=\"outline\" layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\r\n\t\t\t\t\t\t\t\t\t\t<input matInput [formControl]=\"formGroup\" type=\"{{column.inputType}}\" autocomplete=\"none\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" [min]=\"column.inputMin?column.inputMin(parentFormGroup.value, parentFormGroup, context):null\" [max]=\"column.inputMax?column.inputMax(parentFormGroup.value, parentFormGroup, context):null\" (keydown.enter)=\"handleKeydownEnter($event)\">\r\n\t\t\t\t\t\t\t\t\t</mat-form-field>\r\n\t\t\t\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t\t\t\t<!-- #region VD-Select column -->\r\n\t\t\t\t\t\t\t\t\t<mat-form-field *ngSwitchCase=\"ColumnType.Select\" appearance=\"outline\" layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\r\n\t\t\t\t\t\t\t\t\t\t<vd-select [formControl]=\"formGroup\" [enum]=\"column.enumType\" [enumFilter]=\"column.enumFilter | func:parentFormGroup.value:context\" [prefix]=\"column.enumPrefix\" [options]=\"column.options\" [defaultOption]=\"column.defaultOption??true\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" (selectionChange)=\"column.change?column.change(parentFormGroup.value, parentFormGroup, context):patch(parentFormGroup.value, [column.name], rowValue, column.patchIncludes)\" (keydown.enter)=\"handleKeydownEnter($event)\"></vd-select>\r\n\t\t\t\t\t\t\t\t\t</mat-form-field>\r\n\t\t\t\t\t\t\t\t\t<!-- #endregion -->\r\n\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t\t<ng-template #notLastSegment>\r\n\t\t\t\t\t\t\t\t\t<!-- If not the last segment, create a nested form group -->\r\n\t\t\t\t\t\t\t\t\t<ng-container [formGroupName]=\"columnNameSegments[0]\">\r\n\t\t\t\t\t\t\t\t\t\t<!-- Recursive call to handle nested segments -->\r\n\t\t\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: columnNameSegments.slice(1), parentFormGroup:formGroup, formGroup: formGroup.get(columnNameSegments[0])}\"></ng-container>\r\n\t\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t</ng-template>\r\n\r\n\t\t\t\t\t\t<!-- #region Toggle column -->\r\n\t\t\t\t\t\t<ng-container *ngSwitchCase=\"ColumnType.Toggle\">\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"!formArray\">\r\n\t\t\t\t\t\t\t\t<mat-slide-toggle [(ngModel)]=\"row[column.name]\" (click)=\"$event.stopPropagation();\" (ngModelChange)=\"handleModelChange(column, row, undefined)\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" color=\"primary\"></mat-slide-toggle>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"formArray\" [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\r\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t<!-- #region Date column -->\r\n\t\t\t\t\t\t<span *ngSwitchCase=\"ColumnType.Date\">{{rowValue | date:column.shortDate?'dd.MM.yyyy':'dd.MM.yyyy HH:mm:ss'}}</span>\r\n\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t<!-- #region Text Input column -->\r\n\t\t\t\t\t\t<ng-container *ngSwitchCase=\"ColumnType.TextInput\">\r\n\t\t\t\t\t\t\t<mat-form-field *ngIf=\"!formArray\" appearance=\"outline\" layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\r\n\t\t\t\t\t\t\t\t<input matInput *ngIf=\"!formArray\" type=\"{{column.inputType}}\" autocomplete=\"none\" name=\"{{column.name}}{{rowIndex}}\" [(ngModel)]=\"row[column.name]\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" [min]=\"column.inputMin?column.inputMin(row, undefined, context):null\" [max]=\"column.inputMax?column.inputMax(row, undefined, context):null\" (ngModelChange)=\"column.change?column.change(row, undefined, context):patch(row, [column.name], rowValue, column.patchIncludes)\" [ngModelOptions]=\"{updateOn: 'blur'}\" (keydown.enter)=\"handleKeydownEnter($event)\">\r\n\t\t\t\t\t\t\t</mat-form-field>\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"formArray\" [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\r\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t<!-- #region VD-Select column -->\r\n\t\t\t\t\t\t<ng-container *ngSwitchCase=\"ColumnType.Select\">\r\n\t\t\t\t\t\t\t<mat-form-field *ngIf=\"!formArray\" appearance=\"outline\" layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\r\n\t\t\t\t\t\t\t\t<vd-select *ngIf=\"!formArray\" name=\"{{column.name}}{{rowIndex}}\" [enum]=\"column.enumType\" [enumFilter]=\"column?.enumFilter  | func:row:context\" [prefix]=\"column.enumPrefix\" [options]=\"column.options\" [defaultOption]=\"column.defaultOption??true\" [(ngModel)]=\"row[column.name]\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" (selectionChange)=\"column.change?column.change(row, undefined, context):patch(row, [column.name], rowValue, column.patchIncludes)\" (keydown.enter)=\"handleKeydownEnter($event)\"></vd-select>\r\n\t\t\t\t\t\t\t</mat-form-field>\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"formArray\" [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\r\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t<!-- #region Action -->\r\n\t\t\t\t\t\t<ng-container *ngSwitchCase=\"ColumnType.Action\">\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"column.menu\">\r\n\t\t\t\t\t\t\t\t<div id=\"menu-{{row.id}}\" style=\"visibility: hidden; position: fixed;\" #contextMenuTrigger=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu.matMenu!\" *ngIf=\"menu?.matMenu && !row.locked && hasVisibleRowMenuItems(row, column)\"></div>\r\n\t\t\t\t\t\t\t\t<vd-dynamic-menu [items]=\"[column.menu]\" [data]=\"row\" [context]=\"context\" #menu></vd-dynamic-menu>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t<!-- #region Menu -->\r\n\t\t\t\t\t\t<ng-container *ngIf=\"column.menu\">\r\n\t\t\t\t\t\t\t<vd-dynamic-menu *ngSwitchCase=\"ColumnType.Menu\" [items]=\"[column.menu]\" [data]=\"row\" [context]=\"context\"></vd-dynamic-menu>\r\n\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t<!-- #region icon button -->\r\n\t\t\t\t\t\t<a mat-icon-button *ngSwitchCase=\"ColumnType.IconButton\" (click)=\"$event.stopPropagation();column.iconButton?.event?column.iconButton?.event(row, context):null\">\r\n\t\t\t\t\t\t\t<mat-icon fontSet=\"{{column.iconButton?.iconFontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.iconButton?.iconClass??'', row)\">{{handleExpression(column.iconButton?.icon??'radio_button_checked', row) || 'radio_button_checked'}}</mat-icon>\r\n\t\t\t\t\t\t</a>\r\n\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t<!-- #region Other column types -->\r\n\t\t\t\t\t\t<span *ngSwitchDefault [innerHtml]=\"rowValue??''\"></span>\r\n\t\t\t\t\t\t<!-- #endregion -->\r\n\t\t\t\t\t</ng-container>\r\n\t\t\t\t</ng-template>\r\n\t\t\t</td>\r\n\t\t</ng-container>\r\n\t\t<!-- #endregion -->\r\n\t</ng-container>\r\n\r\n\t<!-- #region Filter row -->\r\n\t<ng-container *ngIf=\"dataSource && filterable\">\r\n\t\t<ng-container *ngFor=\"let column of columns$ | async\">\r\n\t\t\t<ng-container cdkColumnDef=\"filter.{{column.filter || column.name}}\">\r\n\t\t\t\t<th mat-header-cell *cdkHeaderCellDef [hidden]=\"column.hidden\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\" [ngClass]=\"{'gt-xs': column.display == Grid.Xs, 'gt-sm': column.display == Grid.Sm, 'gt-md': column.display == Grid.Md, 'gt-lg': column.display == Grid.Lg, 'gt-xl': column.display == Grid.Xl, 'gt-xxl': column.display == Grid.Xxl, 'hidden': column.display == Grid.None}\">\r\n\t\t\t\t\t<!-- #region Select filter -->\r\n\t\t\t\t\t<span *ngIf=\"(column.endpoint || column.enumType || column.options) else notSelectFilter\" filter-select [endpoint]=\"column.endpoint\" [enum]=\"column.enumType\" [enumFilter]=\"column.enumFilter | func:{}:context\" [prefix]=\"column.enumPrefix\" [options]=\"column.options\" [text]=\"column.filterOptionText || 'name'\"></span>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Text filter -->\r\n\t\t\t\t\t<ng-template #notSelectFilter>\r\n\t\t\t\t\t\t<span *ngIf=\"notSelectFilter && (column.type == ColumnType.Text || column.type == ColumnType.TextInput || column.type == ColumnType.Number) else notInputFilter\" filter-input [onlyNumber]=\"column.filterInputNumber??false\" [operator]=\"column.filterOperator\"></span>\r\n\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Date filter -->\r\n\t\t\t\t\t<ng-template #notInputFilter>\r\n\t\t\t\t\t\t<span *ngIf=\"column.type == ColumnType.Date else notDateFilter\" filter-date></span>\r\n\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Action filter (clear) -->\r\n\t\t\t\t\t<ng-template #notDateFilter>\r\n\t\t\t\t\t\t<span *ngIf=\"column.type == ColumnType.Action\" filter-clear></span>\r\n\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\t\t\t\t</th>\r\n\t\t\t</ng-container>\r\n\t\t</ng-container>\r\n\t</ng-container>\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Details column -->\r\n\t<ng-container cdkColumnDef=\"expandedDetail\">\r\n\t\t<td mat-cell *matCellDef=\"let row; let index = index\" [attr.colspan]=\"(displayedColumns$ | async)?.length\">\r\n\t\t\t<div class=\"row-detail\" [@detailExpand]=\"row == expandedRow ? 'expanded' : 'collapsed'\" #detailsTemplate>\r\n\t\t\t\t<ng-container *ngIf=\"templateRef && row === expandedRow\">\r\n\t\t\t\t\t<ng-container *ngTemplateOutlet=\"templateRef; context:{row: row, index: index, context: context}\"></ng-container>\r\n\t\t\t\t</ng-container>\r\n\t\t\t</div>\r\n\t\t</td>\r\n\t</ng-container>\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Filter header -->\r\n\t<ng-container *ngIf=\"filterable\">\r\n\t\t<tr mat-header-row *cdkHeaderRowDef=\"displayedFilterColumns$ | async\"></tr>\r\n\t</ng-container>\r\n\t<!-- #endregion -->\r\n\r\n\t<tr mat-header-row *cdkHeaderRowDef=\"displayedColumns$ | async; sticky: stickyFilter\"></tr>\r\n\t<tr mat-row *cdkRowDef=\"let row; columns: displayedColumns$ | async; let index = dataIndex\" [ngClass]=\"rowNgClass?rowNgClass(row, context):null\" [class.expanded-row]=\"expandedRow === row\" (click)=\"handleRowClick(index, row)\" (contextmenu)=\"handleRowRightClick($event, row)\"></tr>\r\n\r\n\t<!-- #region Detrails row -->\r\n\t<ng-container *ngIf=\"detailsTemplate || templateRef\">\r\n\t\t<tr mat-row *cdkRowDef=\"let row; columns: ['expandedDetail']\" class=\"detail-row\" [ngClass]=\"rowNgClass?rowNgClass(row, context):null\"></tr>\r\n\t</ng-container>\r\n\t<!-- #endregion -->\r\n</table>\r\n<!-- #endregion -->\r\n\r\n<!-- #region Row shown when there is no matching data.-->\r\n<div class=\"mat-cell pad table-empty txt-italic\" *ngIf=\"!dataSource?.filteredData?.length && !dataSource?.total\" i18n=\"@@noResultsFound\">No results were found.</div>\r\n<!-- #endregion -->\r\n\r\n<!-- #region Debug value -->\r\n<code *ngIf=\"debugValue\">\r\n\t<pre>{{formValue | json}}</pre>\r\n</code>\r\n<!-- #endregion -->\r\n\r\n<div class=\"table-footer\" layout=\"row\">\r\n\t<ng-content select=\"[table-footer]\"></ng-content>\r\n\t<span flex></span>\r\n\t<mat-paginator *ngIf=\"paginable\" [pageSize]=\"pageSize\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\"></mat-paginator>\r\n</div>", styles: ["::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-form-field .mat-form-field-wrapper{width:100%}@media (max-width: 389px){::ng-deep .mat-mdc-table [gt-xs],::ng-deep .mat-mdc-table .gt-xs{display:none}::ng-deep .mat-mdc-table [gt-sm],::ng-deep .mat-mdc-table .gt-sm{display:none}::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media (max-width: 599px){::ng-deep .mat-mdc-table [gt-sm],::ng-deep .mat-mdc-table .gt-sm{display:none}::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media (max-width: 959px){::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media (max-width: 1279px){::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media (max-width: 1919px){::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media (max-width: 1979px){::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}\n"] }]
+                    ], template: "<div class=\"loading-progress\" *ngIf=\"!static\">\r\n\t<mat-progress-bar mode=\"indeterminate\" *ngIf=\"dataSource?.isLoading\"></mat-progress-bar>\r\n</div>\r\n\r\n<!-- #region Data table -->\r\n<table mat-table #table [dataSource]=\"dataSource\" [dataSourceFilter]=\"dataSourceFilter\" [ngClass]=\"{'table-fixed': !detailsTemplate && !templateRef}\" [trackBy]=\"trackBy\" matSort matSortDisableClear [matSortActive]=\"sortActive||'id'\" [matSortDirection]=\"sortDirection\" multiTemplateDataRows>\r\n\t<ng-container *ngFor=\"let column of columns$ | async; trackBy:columnsTrackBy\">\r\n\t\t<!-- #region Column def -->\r\n\t\t<ng-container [cdkColumnDef]=\"column.name\" [sticky]=\"column.sticky\" [stickyEnd]=\"column.stickyEnd\">\r\n\t\t\t<th mat-header-cell *cdkHeaderCellDef [mat-sort-header]=\"column.sortBy || column.name\" [hidden]=\"column.hidden\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\" [disabled]=\"column.type == ColumnType.Checkbox || column.disabled\" [ngClass]=\"{'gt-xs': column.display == Grid.Xs, 'gt-sm': column.display == Grid.Sm, 'gt-md': column.display == Grid.Md, 'gt-lg': column.display == Grid.Lg, 'gt-xl': column.display == Grid.Xl, 'gt-xxl': column.display == Grid.Xxl, 'hidden': column.display == Grid.None}\" [arrowPosition]=\"column.arrowBefore?'before':'after'\">\r\n\t\t\t\t<mat-checkbox *ngIf=\"column.type == ColumnType.Checkbox\" (change)=\"$event ? dataSource.toggleSelect($event, selectAllFilter) : null\" [disabled]=\"!dataSource.paginator?.length\" [checked]=\"dataSource.selectionModel.hasValue() && dataSource.isAllSelected()\" [indeterminate]=\"dataSource.selectionModel.hasValue() && !dataSource.isAllSelected()\"></mat-checkbox>\r\n\t\t\t\t<span *ngIf=\"column.type != ColumnType.Checkbox\">{{column.header | func:context}}</span>\r\n\t\t\t</th>\r\n\r\n\t\t\t<td mat-cell *cdkCellDef=\"let row; let rowIndex = dataIndex\" [matTooltip]=\"column.tooltip?column.tooltip(row, undefined, context):null\" [matTooltipClass]=\"column.tooltipClass??''\" [hidden]=\"column.hidden\" [ngClass]=\"getRowClasses(column, row)\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\">\r\n\t\t\t\t<ng-template #rowVal [ngTemplateOutlet]=\"rowVal\" let-rowValue [ngTemplateOutletContext]=\"{$implicit: column?.content && column?.content(row, undefined, context)}\">\r\n\t\t\t\t\t<ng-container [ngSwitch]=\"column.type\">\r\n\t\t\t\t\t\t<!-- #region Checkbox column -->\r\n\t\t\t\t\t\t<mat-checkbox *ngSwitchCase=\"ColumnType.Checkbox\" (click)=\"$event.stopPropagation()\" (change)=\"$event ? dataSource.selectionModel.toggle(row) : null\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" [checked]=\"dataSource.selectionModel.isSelected(row)\"></mat-checkbox>\r\n\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t<!-- #region Enum column -->\r\n\t\t\t\t\t\t<span *ngSwitchCase=\"ColumnType.Enum\">\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"column.multiple; else elseTemplate\">\r\n\t\t\t\t\t\t\t\t<div *ngFor=\"let item of rowValue; let i = index; let last = last\">\r\n\t\t\t\t\t\t\t\t\t<small *ngIf=\"i<2\" i18n=\"@@selection\">{item | enum:column.enumType:column.enumPrefix, select, type {type} other {{{item | enum:column.enumType:column.enumPrefix}}}}</small><small *ngIf=\"i==1 && rowValue?.length > 2\">, ...</small>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t<ng-template #elseTemplate>\r\n\t\t\t\t\t\t\t\t<span *ngIf=\"rowValue >= 0\" i18n=\"@@selection\">{rowValue | enum:column.enumType:column.enumPrefix, select, type {type} other {{{rowValue | enum:column.enumType:column.enumPrefix}}}}</span>\r\n\t\t\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t<ng-template #recursiveContainer let-columnNameSegments=\"segments\" let-formGroup=\"formGroup\" let-parentFormGroup=\"parentFormGroup\">\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"formGroup\" [formGroup]=\"formGroup\">\r\n\t\t\t\t\t\t\t\t<!-- If the columnNameSegments array is empty, we're at the leaf node -->\r\n\t\t\t\t\t\t\t\t<ng-container *ngIf=\"!columnNameSegments.length; else notLastSegment\">\r\n\t\t\t\t\t\t\t\t\t<!-- #region Toggle column -->\r\n\t\t\t\t\t\t\t\t\t<ng-container *ngSwitchCase=\"ColumnType.Toggle\">\r\n\t\t\t\t\t\t\t\t\t\t<mat-slide-toggle [formControl]=\"formGroup\" (click)=\"$event.stopPropagation();\" (change)=\"column.change?column.change(parentFormGroup.value, parentFormGroup, context):handleModelChange(column, parentFormGroup.value, parentFormGroup)\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" color=\"primary\"></mat-slide-toggle>\r\n\t\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t\t\t\t<!-- #region Text Input column -->\r\n\t\t\t\t\t\t\t\t\t<mat-form-field *ngSwitchCase=\"ColumnType.TextInput\" appearance=\"outline\" layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\r\n\t\t\t\t\t\t\t\t\t\t<input matInput [formControl]=\"formGroup\" type=\"{{column.inputType}}\" autocomplete=\"none\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" [min]=\"column.inputMin?column.inputMin(parentFormGroup.value, parentFormGroup, context):null\" [max]=\"column.inputMax?column.inputMax(parentFormGroup.value, parentFormGroup, context):null\" (keydown.enter)=\"handleKeydownEnter($event)\">\r\n\t\t\t\t\t\t\t\t\t</mat-form-field>\r\n\t\t\t\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t\t\t\t<!-- #region VD-Select column -->\r\n\t\t\t\t\t\t\t\t\t<mat-form-field *ngSwitchCase=\"ColumnType.Select\" appearance=\"outline\" layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\r\n\t\t\t\t\t\t\t\t\t\t<vd-select [formControl]=\"formGroup\" [enum]=\"column.enumType\" [enumFilter]=\"column.enumFilter | func:parentFormGroup.value:context\" [prefix]=\"column.enumPrefix\" [options]=\"column.options\" [defaultOption]=\"column.defaultOption??true\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" (selectionChange)=\"column.change?column.change(parentFormGroup.value, parentFormGroup, context):patch(parentFormGroup.value, [column.name], rowValue, column.patchIncludes)\" (keydown.enter)=\"handleKeydownEnter($event)\"></vd-select>\r\n\t\t\t\t\t\t\t\t\t</mat-form-field>\r\n\t\t\t\t\t\t\t\t\t<!-- #endregion -->\r\n\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t\t<ng-template #notLastSegment>\r\n\t\t\t\t\t\t\t\t\t<!-- If not the last segment, create a nested form group -->\r\n\t\t\t\t\t\t\t\t\t<ng-container [formGroupName]=\"columnNameSegments[0]\">\r\n\t\t\t\t\t\t\t\t\t\t<!-- Recursive call to handle nested segments -->\r\n\t\t\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: columnNameSegments.slice(1), parentFormGroup:formGroup, formGroup: formGroup.get(columnNameSegments[0])}\"></ng-container>\r\n\t\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t</ng-template>\r\n\r\n\t\t\t\t\t\t<!-- #region Toggle column -->\r\n\t\t\t\t\t\t<ng-container *ngSwitchCase=\"ColumnType.Toggle\">\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"!formArray\">\r\n\t\t\t\t\t\t\t\t<mat-slide-toggle [(ngModel)]=\"row[column.name]\" (click)=\"$event.stopPropagation();\" (ngModelChange)=\"handleModelChange(column, row, undefined)\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" color=\"primary\"></mat-slide-toggle>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"formArray\" [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\r\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t<!-- #region Date column -->\r\n\t\t\t\t\t\t<span *ngSwitchCase=\"ColumnType.Date\">{{rowValue | date:column.shortDate?'dd.MM.yyyy':'dd.MM.yyyy HH:mm:ss'}}</span>\r\n\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t<!-- #region Text Input column -->\r\n\t\t\t\t\t\t<ng-container *ngSwitchCase=\"ColumnType.TextInput\">\r\n\t\t\t\t\t\t\t<mat-form-field *ngIf=\"!formArray\" appearance=\"outline\" layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\r\n\t\t\t\t\t\t\t\t<input matInput *ngIf=\"!formArray\" type=\"{{column.inputType}}\" autocomplete=\"none\" name=\"{{column.name}}{{rowIndex}}\" [(ngModel)]=\"row[column.name]\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" [min]=\"column.inputMin?column.inputMin(row, undefined, context):null\" [max]=\"column.inputMax?column.inputMax(row, undefined, context):null\" (ngModelChange)=\"column.change?column.change(row, undefined, context):patch(row, [column.name], rowValue, column.patchIncludes)\" [ngModelOptions]=\"{updateOn: 'blur'}\" (keydown.enter)=\"handleKeydownEnter($event)\">\r\n\t\t\t\t\t\t\t</mat-form-field>\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"formArray\" [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\r\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t<!-- #region VD-Select column -->\r\n\t\t\t\t\t\t<ng-container *ngSwitchCase=\"ColumnType.Select\">\r\n\t\t\t\t\t\t\t<mat-form-field *ngIf=\"!formArray\" appearance=\"outline\" layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\r\n\t\t\t\t\t\t\t\t<vd-select *ngIf=\"!formArray\" name=\"{{column.name}}{{rowIndex}}\" [enum]=\"column.enumType\" [enumFilter]=\"column?.enumFilter  | func:row:context\" [prefix]=\"column.enumPrefix\" [options]=\"column.options\" [defaultOption]=\"column.defaultOption??true\" [(ngModel)]=\"row[column.name]\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" (selectionChange)=\"column.change?column.change(row, undefined, context):patch(row, [column.name], rowValue, column.patchIncludes)\" (keydown.enter)=\"handleKeydownEnter($event)\"></vd-select>\r\n\t\t\t\t\t\t\t</mat-form-field>\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"formArray\" [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\r\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t<!-- #region Action -->\r\n\t\t\t\t\t\t<ng-container *ngSwitchCase=\"ColumnType.Action\">\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"column.menu\">\r\n\t\t\t\t\t\t\t\t<div id=\"menu-{{row.id}}\" style=\"visibility: hidden; position: fixed;\" #contextMenuTrigger=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu.matMenu!\" *ngIf=\"menu?.matMenu && !row.locked && hasVisibleRowMenuItems(row, column)\"></div>\r\n\t\t\t\t\t\t\t\t<vd-dynamic-menu [items]=\"[column.menu]\" [data]=\"row\" [context]=\"context\" #menu></vd-dynamic-menu>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t<!-- #region Menu -->\r\n\t\t\t\t\t\t<ng-container *ngIf=\"column.menu\">\r\n\t\t\t\t\t\t\t<vd-dynamic-menu *ngSwitchCase=\"ColumnType.Menu\" [items]=\"[column.menu]\" [data]=\"row\" [context]=\"context\"></vd-dynamic-menu>\r\n\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t<!-- #region icon -->\r\n\t\t\t\t\t\t<span *ngSwitchCase=\"ColumnType.Icon\" layout=\"row\" layout-align=\"start center\">\r\n\t\t\t\t\t\t\t<mat-icon *ngIf=\"column.icon?.matIcon\" fontSet=\"{{column.icon?.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon?.cssClass??'', row)\">{{handleExpression(column.icon?.matIcon!, row)}}</mat-icon>\r\n\t\t\t\t\t\t\t<mat-icon *ngIf=\"column.icon?.svgIcon\" fontSet=\"{{column.icon?.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon?.cssClass??'', row)\" [svgIcon]=\"handleExpression(column.icon?.svgIcon!, row)!\"></mat-icon>\r\n\t\t\t\t\t\t\t<mat-icon *ngIf=\"column.icon?.fontIcon\" fontSet=\"{{column.icon?.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon?.cssClass??'', row)\" [fontIcon]=\"handleExpression(column.icon?.fontIcon!, row)!\"></mat-icon>\r\n\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t<!-- #region icon button -->\r\n\t\t\t\t\t\t<a mat-icon-button *ngSwitchCase=\"ColumnType.IconButton\" (click)=\"$event.stopPropagation();column.iconButton?.event?column.iconButton?.event(row, context):null\">\r\n\t\t\t\t\t\t\t<mat-icon fontSet=\"{{column.iconButton?.iconFontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.iconButton?.iconClass??'', row)\">{{handleExpression(column.iconButton?.icon??'radio_button_checked', row) || 'radio_button_checked'}}</mat-icon>\r\n\t\t\t\t\t\t</a>\r\n\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t<!-- #region Other column types -->\r\n\t\t\t\t\t\t<span *ngSwitchDefault [innerHtml]=\"rowValue??''\"></span>\r\n\t\t\t\t\t\t<!-- #endregion -->\r\n\t\t\t\t\t</ng-container>\r\n\t\t\t\t</ng-template>\r\n\t\t\t</td>\r\n\t\t</ng-container>\r\n\t\t<!-- #endregion -->\r\n\t</ng-container>\r\n\r\n\t<!-- #region Filter row -->\r\n\t<ng-container *ngIf=\"dataSource && filterable\">\r\n\t\t<ng-container *ngFor=\"let column of columns$ | async\">\r\n\t\t\t<ng-container cdkColumnDef=\"filter.{{column.filter || column.name}}\">\r\n\t\t\t\t<th mat-header-cell *cdkHeaderCellDef [hidden]=\"column.hidden\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\" [ngClass]=\"{'gt-xs': column.display == Grid.Xs, 'gt-sm': column.display == Grid.Sm, 'gt-md': column.display == Grid.Md, 'gt-lg': column.display == Grid.Lg, 'gt-xl': column.display == Grid.Xl, 'gt-xxl': column.display == Grid.Xxl, 'hidden': column.display == Grid.None}\">\r\n\t\t\t\t\t<!-- #region Select filter -->\r\n\t\t\t\t\t<span *ngIf=\"(column.endpoint || column.enumType || column.options) else notSelectFilter\" filter-select [endpoint]=\"column.endpoint\" [enum]=\"column.enumType\" [enumFilter]=\"column.enumFilter | func:{}:context\" [prefix]=\"column.enumPrefix\" [options]=\"column.options\" [text]=\"column.filterOptionText || 'name'\"></span>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Text filter -->\r\n\t\t\t\t\t<ng-template #notSelectFilter>\r\n\t\t\t\t\t\t<span *ngIf=\"notSelectFilter && (column.type == ColumnType.Text || column.type == ColumnType.TextInput || column.type == ColumnType.Number) else notInputFilter\" filter-input [onlyNumber]=\"column.filterInputNumber??false\" [operator]=\"column.filterOperator\"></span>\r\n\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Date filter -->\r\n\t\t\t\t\t<ng-template #notInputFilter>\r\n\t\t\t\t\t\t<span *ngIf=\"column.type == ColumnType.Date else notDateFilter\" filter-date></span>\r\n\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Action filter (clear) -->\r\n\t\t\t\t\t<ng-template #notDateFilter>\r\n\t\t\t\t\t\t<span *ngIf=\"column.type == ColumnType.Action\" filter-clear></span>\r\n\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\t\t\t\t</th>\r\n\t\t\t</ng-container>\r\n\t\t</ng-container>\r\n\t</ng-container>\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Details column -->\r\n\t<ng-container cdkColumnDef=\"expandedDetail\">\r\n\t\t<td mat-cell *matCellDef=\"let row; let index = index\" [attr.colspan]=\"(displayedColumns$ | async)?.length\">\r\n\t\t\t<div class=\"row-detail\" [@detailExpand]=\"row == expandedRow ? 'expanded' : 'collapsed'\" #detailsTemplate>\r\n\t\t\t\t<ng-container *ngIf=\"templateRef && row === expandedRow\">\r\n\t\t\t\t\t<ng-container *ngTemplateOutlet=\"templateRef; context:{row: row, index: index, context: context}\"></ng-container>\r\n\t\t\t\t</ng-container>\r\n\t\t\t</div>\r\n\t\t</td>\r\n\t</ng-container>\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Filter header -->\r\n\t<ng-container *ngIf=\"filterable\">\r\n\t\t<tr mat-header-row *cdkHeaderRowDef=\"displayedFilterColumns$ | async\"></tr>\r\n\t</ng-container>\r\n\t<!-- #endregion -->\r\n\r\n\t<tr mat-header-row *cdkHeaderRowDef=\"displayedColumns$ | async; sticky: stickyFilter\"></tr>\r\n\t<tr mat-row *cdkRowDef=\"let row; columns: displayedColumns$ | async; let index = dataIndex\" [ngClass]=\"rowNgClass?rowNgClass(row, context):null\" [class.expanded-row]=\"expandedRow === row\" (click)=\"handleRowClick(index, row)\" (contextmenu)=\"handleRowRightClick($event, row)\"></tr>\r\n\r\n\t<!-- #region Detrails row -->\r\n\t<ng-container *ngIf=\"detailsTemplate || templateRef\">\r\n\t\t<tr mat-row *cdkRowDef=\"let row; columns: ['expandedDetail']\" class=\"detail-row\" [ngClass]=\"rowNgClass?rowNgClass(row, context):null\"></tr>\r\n\t</ng-container>\r\n\t<!-- #endregion -->\r\n</table>\r\n<!-- #endregion -->\r\n\r\n<!-- #region Row shown when there is no matching data.-->\r\n<div class=\"mat-cell pad table-empty txt-italic\" *ngIf=\"!dataSource?.filteredData?.length && !dataSource?.total\" i18n=\"@@noResultsFound\">No results were found.</div>\r\n<!-- #endregion -->\r\n\r\n<!-- #region Debug value -->\r\n<code *ngIf=\"debugValue\">\r\n\t<pre>{{formValue | json}}</pre>\r\n</code>\r\n<!-- #endregion -->\r\n\r\n<div class=\"table-footer\" layout=\"row\">\r\n\t<ng-content select=\"[table-footer]\"></ng-content>\r\n\t<span flex></span>\r\n\t<mat-paginator *ngIf=\"paginable\" [pageSize]=\"pageSize\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\"></mat-paginator>\r\n</div>", styles: ["::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-form-field .mat-form-field-wrapper{width:100%}@media (max-width: 389px){::ng-deep .mat-mdc-table [gt-xs],::ng-deep .mat-mdc-table .gt-xs{display:none}::ng-deep .mat-mdc-table [gt-sm],::ng-deep .mat-mdc-table .gt-sm{display:none}::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media (max-width: 599px){::ng-deep .mat-mdc-table [gt-sm],::ng-deep .mat-mdc-table .gt-sm{display:none}::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media (max-width: 959px){::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media (max-width: 1279px){::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media (max-width: 1919px){::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media (max-width: 1979px){::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}\n"] }]
         }], ctorParameters: () => [{ type: i1.FormBuilder }, { type: DynamicBuilder }, { type: i0.ChangeDetectorRef }], propDecorators: { table: [{
                 type: ViewChild,
                 args: ['table']
@@ -21942,7 +22058,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\t<!-- #region Chips -->\r\n\t<mat-chip-row *ngFor=\"let chip of chips; let first = first; let index = index\" [removable]=\"!readonly\" (removed)=\"handleRemovedEvent()\" disableRipple>\r\n\t\t<span class=\"vd-chip-content\">\r\n\t\t\t<span *ngIf=\"!chipTemplate?.templateRef\">\r\n\t\t\t\t<span *ngIf=\"!autocompleteOptionTemplate?.templateRef\">{{ chip }}</span>\r\n\t\t\t\t<ng-template *ngIf=\"autocompleteOptionTemplate?.templateRef\" [ngTemplateOutlet]=\"autocompleteOptionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: chip }\"></ng-template>\r\n\t\t\t</span>\r\n\t\t\t<ng-template *ngIf=\"chipTemplate?.templateRef\" [ngTemplateOutlet]=\"chipTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ chip: chip }\"></ng-template>\r\n\t\t</span>\r\n\t\t<a matChipTrailingIcon *ngFor=\"let button of suffixButtons; let first = first\" [hidden]=\"button.hide && button.hide(chips[0], context)\" (click)=\"$event.stopPropagation(); button.event && button.event(chips[0], context)\">\r\n\t\t\t<mat-icon fontSet=\"material-symbols-outlined\">{{button.icon}}</mat-icon>\r\n\t\t</a>\r\n\t\t<a matChipTrailingIcon *ngIf=\"(onLaunch?.observers?.length??0) > 0\" (click)=\"$event.stopPropagation(); handleLaunchClicked()\">\r\n\t\t\t<mat-icon fontSet=\"material-symbols-outlined\">launch</mat-icon>\r\n\t\t</a>\r\n\t\t<a matChipTrailingIcon *ngIf=\"!readonly\" (click)=\"handleRemovedEvent()\">\r\n\t\t\t<mat-icon fontSet=\"material-symbols-outlined\">close</mat-icon>\r\n\t\t</a>\r\n\t</mat-chip-row>\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Search box -->\r\n\t<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\t<!-- #endregion -->\r\n\r\n\t<!-- #region Reset button -->\r\n\t<a trailingIcon *ngIf=\"(!value || empty) && !readonly && !disabled\" class=\"mat-mdc-select-arrow\" (click)=\"filterInput.value = ''\">\r\n\t\t<svg viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" focusable=\"false\" class=\"ng-tns-c184-21\">\r\n\t\t\t<path d=\"M7 10l5 5 5-5z\" class=\"ng-tns-c184-21\"></path>\r\n\t\t</svg>\r\n\t</a>\r\n\t<!-- #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\t<ng-template *ngIf=\"!classType && opened\" let-item let-first=\"first\" ngFor [ngForOf]=\"dataSource?.items\">\r\n\t\t<mat-option [value]=\"item\">\r\n\t\t\t<span *ngIf=\"!autocompleteOptionTemplate?.templateRef\">{{item}}</span>\r\n\t\t\t<ng-template *ngIf=\"autocompleteOptionTemplate?.templateRef\" [ngTemplateOutlet]=\"autocompleteOptionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: item }\"></ng-template>\r\n\t\t</mat-option>\r\n\t</ng-template>\r\n\t<ng-container *ngIf=\"classType && opened\">\r\n\t\t<mat-option hide=\"true\"></mat-option>\r\n\t\t<vd-dynamic-table [dataSource]=\"dataSource\" [classType]=\"classType\" (rowClick)=\"addChip($event, filterInput)\" matSort [sortActive]=\"sortActive||'id'\" [sortDirection]=\"sortDirection\"></vd-dynamic-table>\r\n\t</ng-container>\r\n\t<div class=\"vd-chips-paginator\">\r\n\t\t<mat-divider></mat-divider>\r\n\t\t<mat-paginator [length]=\"dataSource?.total\" [pageIndex]=\"dataSource?.pageIndex\" [pageSize]=\"dataSource?.pageSize\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\" hidePageSize=\"true\"></mat-paginator>\r\n\t</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:-12px}: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 .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-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}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: VdDynamicTableComponent, selector: "vd-dynamic-table", inputs: ["dataSource", "data", "formArray", "debugValue", "classType", "context", "dataSourceFilter", "static", "filterable", "paginable", "selectable", "sortActive", "sortDirection", "stickyHeader", "stickyFilter", "rowNgClass", "detailsTemplate", "readonly", "selectAllFilter", "columns", "rowMenuItems", "rowAction", "excludedColumns", "pageSize", "pageSizeOptions"], outputs: ["rowClick"] }, { kind: "component", type: i7$1.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i7$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "component", type: i7$1.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "directive", type: i7$1.MatChipTrailingIcon, selector: "mat-chip-trailing-icon, [matChipTrailingIcon]" }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i10.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: "directive", type: i10.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i10.MatAutocompleteOrigin, selector: "[matAutocompleteOrigin]", exportAs: ["matAutocompleteOrigin"] }, { kind: "component", type: i19.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i5.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }] });
+        ], 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\t<!-- #region Chips -->\r\n\t<mat-chip-row *ngFor=\"let chip of chips; let first = first; let index = index\" [removable]=\"!readonly\" (removed)=\"handleRemovedEvent()\" disableRipple>\r\n\t\t<span class=\"vd-chip-content\">\r\n\t\t\t<span *ngIf=\"!chipTemplate?.templateRef\">\r\n\t\t\t\t<span *ngIf=\"!autocompleteOptionTemplate?.templateRef\">{{ chip }}</span>\r\n\t\t\t\t<ng-template *ngIf=\"autocompleteOptionTemplate?.templateRef\" [ngTemplateOutlet]=\"autocompleteOptionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: chip }\"></ng-template>\r\n\t\t\t</span>\r\n\t\t\t<ng-template *ngIf=\"chipTemplate?.templateRef\" [ngTemplateOutlet]=\"chipTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ chip: chip }\"></ng-template>\r\n\t\t</span>\r\n\t\t<a matChipTrailingIcon *ngFor=\"let button of suffixButtons; let first = first\" [hidden]=\"button.hide && button.hide(chips[0], context)\" (click)=\"$event.stopPropagation(); button.event && button.event(chips[0], context)\">\r\n\t\t\t<mat-icon fontSet=\"material-symbols-outlined\">{{button.icon}}</mat-icon>\r\n\t\t</a>\r\n\t\t<a matChipTrailingIcon *ngIf=\"(onLaunch?.observers?.length??0) > 0\" (click)=\"$event.stopPropagation(); handleLaunchClicked()\">\r\n\t\t\t<mat-icon fontSet=\"material-symbols-outlined\">launch</mat-icon>\r\n\t\t</a>\r\n\t\t<a matChipTrailingIcon *ngIf=\"!readonly\" (click)=\"handleRemovedEvent()\">\r\n\t\t\t<mat-icon fontSet=\"material-symbols-outlined\">close</mat-icon>\r\n\t\t</a>\r\n\t</mat-chip-row>\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Search box -->\r\n\t<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\t<!-- #endregion -->\r\n\r\n\t<!-- #region Reset button -->\r\n\t<a trailingIcon *ngIf=\"(!value || empty) && !readonly && !disabled\" class=\"mat-mdc-select-arrow\" (click)=\"filterInput.value = ''\">\r\n\t\t<svg viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" focusable=\"false\" class=\"ng-tns-c184-21\">\r\n\t\t\t<path d=\"M7 10l5 5 5-5z\" class=\"ng-tns-c184-21\"></path>\r\n\t\t</svg>\r\n\t</a>\r\n\t<!-- #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\t<ng-template *ngIf=\"!classType && opened\" let-item let-first=\"first\" ngFor [ngForOf]=\"dataSource?.items\">\r\n\t\t<mat-option [value]=\"item\">\r\n\t\t\t<span *ngIf=\"!autocompleteOptionTemplate?.templateRef\">{{item}}</span>\r\n\t\t\t<ng-template *ngIf=\"autocompleteOptionTemplate?.templateRef\" [ngTemplateOutlet]=\"autocompleteOptionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: item }\"></ng-template>\r\n\t\t</mat-option>\r\n\t</ng-template>\r\n\t<ng-container *ngIf=\"classType && opened\">\r\n\t\t<mat-option hide=\"true\"></mat-option>\r\n\t\t<vd-dynamic-table [dataSource]=\"dataSource\" [classType]=\"classType\" (rowClick)=\"addChip($event, filterInput)\" matSort [sortActive]=\"sortActive||'id'\" [sortDirection]=\"sortDirection\"></vd-dynamic-table>\r\n\t</ng-container>\r\n\t<div class=\"vd-chips-paginator\">\r\n\t\t<mat-divider></mat-divider>\r\n\t\t<mat-paginator [length]=\"dataSource?.total\" [pageIndex]=\"dataSource?.pageIndex\" [pageSize]=\"dataSource?.pageSize\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\" hidePageSize=\"true\"></mat-paginator>\r\n\t</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 .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-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}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: VdDynamicTableComponent, selector: "vd-dynamic-table", inputs: ["dataSource", "data", "formArray", "debugValue", "classType", "context", "dataSourceFilter", "static", "filterable", "paginable", "selectable", "sortActive", "sortDirection", "stickyHeader", "stickyFilter", "rowNgClass", "detailsTemplate", "readonly", "selectAllFilter", "columns", "rowMenuItems", "rowAction", "excludedColumns", "pageSize", "pageSizeOptions"], outputs: ["rowClick"] }, { kind: "component", type: i7$1.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i7$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "component", type: i7$1.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "directive", type: i7$1.MatChipTrailingIcon, selector: "mat-chip-trailing-icon, [matChipTrailingIcon]" }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i10.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: "directive", type: i10.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i10.MatAutocompleteOrigin, selector: "[matAutocompleteOrigin]", exportAs: ["matAutocompleteOrigin"] }, { kind: "component", type: i19.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i5.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: VdChipsComponent, decorators: [{
             type: Component,
@@ -21952,7 +22068,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
                             provide: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS,
                             useValue: { overlayPanelClass: 'vd-chips-autocomplete' }
                         }
-                    ], template: "<mat-chip-grid #chipList [required]=\"required\" [disabled]=\"readonly\">\r\n\t<!-- #region Chips -->\r\n\t<mat-chip-row *ngFor=\"let chip of chips; let first = first; let index = index\" [removable]=\"!readonly\" (removed)=\"handleRemovedEvent()\" disableRipple>\r\n\t\t<span class=\"vd-chip-content\">\r\n\t\t\t<span *ngIf=\"!chipTemplate?.templateRef\">\r\n\t\t\t\t<span *ngIf=\"!autocompleteOptionTemplate?.templateRef\">{{ chip }}</span>\r\n\t\t\t\t<ng-template *ngIf=\"autocompleteOptionTemplate?.templateRef\" [ngTemplateOutlet]=\"autocompleteOptionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: chip }\"></ng-template>\r\n\t\t\t</span>\r\n\t\t\t<ng-template *ngIf=\"chipTemplate?.templateRef\" [ngTemplateOutlet]=\"chipTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ chip: chip }\"></ng-template>\r\n\t\t</span>\r\n\t\t<a matChipTrailingIcon *ngFor=\"let button of suffixButtons; let first = first\" [hidden]=\"button.hide && button.hide(chips[0], context)\" (click)=\"$event.stopPropagation(); button.event && button.event(chips[0], context)\">\r\n\t\t\t<mat-icon fontSet=\"material-symbols-outlined\">{{button.icon}}</mat-icon>\r\n\t\t</a>\r\n\t\t<a matChipTrailingIcon *ngIf=\"(onLaunch?.observers?.length??0) > 0\" (click)=\"$event.stopPropagation(); handleLaunchClicked()\">\r\n\t\t\t<mat-icon fontSet=\"material-symbols-outlined\">launch</mat-icon>\r\n\t\t</a>\r\n\t\t<a matChipTrailingIcon *ngIf=\"!readonly\" (click)=\"handleRemovedEvent()\">\r\n\t\t\t<mat-icon fontSet=\"material-symbols-outlined\">close</mat-icon>\r\n\t\t</a>\r\n\t</mat-chip-row>\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Search box -->\r\n\t<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\t<!-- #endregion -->\r\n\r\n\t<!-- #region Reset button -->\r\n\t<a trailingIcon *ngIf=\"(!value || empty) && !readonly && !disabled\" class=\"mat-mdc-select-arrow\" (click)=\"filterInput.value = ''\">\r\n\t\t<svg viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" focusable=\"false\" class=\"ng-tns-c184-21\">\r\n\t\t\t<path d=\"M7 10l5 5 5-5z\" class=\"ng-tns-c184-21\"></path>\r\n\t\t</svg>\r\n\t</a>\r\n\t<!-- #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\t<ng-template *ngIf=\"!classType && opened\" let-item let-first=\"first\" ngFor [ngForOf]=\"dataSource?.items\">\r\n\t\t<mat-option [value]=\"item\">\r\n\t\t\t<span *ngIf=\"!autocompleteOptionTemplate?.templateRef\">{{item}}</span>\r\n\t\t\t<ng-template *ngIf=\"autocompleteOptionTemplate?.templateRef\" [ngTemplateOutlet]=\"autocompleteOptionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: item }\"></ng-template>\r\n\t\t</mat-option>\r\n\t</ng-template>\r\n\t<ng-container *ngIf=\"classType && opened\">\r\n\t\t<mat-option hide=\"true\"></mat-option>\r\n\t\t<vd-dynamic-table [dataSource]=\"dataSource\" [classType]=\"classType\" (rowClick)=\"addChip($event, filterInput)\" matSort [sortActive]=\"sortActive||'id'\" [sortDirection]=\"sortDirection\"></vd-dynamic-table>\r\n\t</ng-container>\r\n\t<div class=\"vd-chips-paginator\">\r\n\t\t<mat-divider></mat-divider>\r\n\t\t<mat-paginator [length]=\"dataSource?.total\" [pageIndex]=\"dataSource?.pageIndex\" [pageSize]=\"dataSource?.pageSize\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\" hidePageSize=\"true\"></mat-paginator>\r\n\t</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:-12px}: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 .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-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}\n"] }]
+                    ], template: "<mat-chip-grid #chipList [required]=\"required\" [disabled]=\"readonly\">\r\n\t<!-- #region Chips -->\r\n\t<mat-chip-row *ngFor=\"let chip of chips; let first = first; let index = index\" [removable]=\"!readonly\" (removed)=\"handleRemovedEvent()\" disableRipple>\r\n\t\t<span class=\"vd-chip-content\">\r\n\t\t\t<span *ngIf=\"!chipTemplate?.templateRef\">\r\n\t\t\t\t<span *ngIf=\"!autocompleteOptionTemplate?.templateRef\">{{ chip }}</span>\r\n\t\t\t\t<ng-template *ngIf=\"autocompleteOptionTemplate?.templateRef\" [ngTemplateOutlet]=\"autocompleteOptionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: chip }\"></ng-template>\r\n\t\t\t</span>\r\n\t\t\t<ng-template *ngIf=\"chipTemplate?.templateRef\" [ngTemplateOutlet]=\"chipTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ chip: chip }\"></ng-template>\r\n\t\t</span>\r\n\t\t<a matChipTrailingIcon *ngFor=\"let button of suffixButtons; let first = first\" [hidden]=\"button.hide && button.hide(chips[0], context)\" (click)=\"$event.stopPropagation(); button.event && button.event(chips[0], context)\">\r\n\t\t\t<mat-icon fontSet=\"material-symbols-outlined\">{{button.icon}}</mat-icon>\r\n\t\t</a>\r\n\t\t<a matChipTrailingIcon *ngIf=\"(onLaunch?.observers?.length??0) > 0\" (click)=\"$event.stopPropagation(); handleLaunchClicked()\">\r\n\t\t\t<mat-icon fontSet=\"material-symbols-outlined\">launch</mat-icon>\r\n\t\t</a>\r\n\t\t<a matChipTrailingIcon *ngIf=\"!readonly\" (click)=\"handleRemovedEvent()\">\r\n\t\t\t<mat-icon fontSet=\"material-symbols-outlined\">close</mat-icon>\r\n\t\t</a>\r\n\t</mat-chip-row>\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Search box -->\r\n\t<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\t<!-- #endregion -->\r\n\r\n\t<!-- #region Reset button -->\r\n\t<a trailingIcon *ngIf=\"(!value || empty) && !readonly && !disabled\" class=\"mat-mdc-select-arrow\" (click)=\"filterInput.value = ''\">\r\n\t\t<svg viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" focusable=\"false\" class=\"ng-tns-c184-21\">\r\n\t\t\t<path d=\"M7 10l5 5 5-5z\" class=\"ng-tns-c184-21\"></path>\r\n\t\t</svg>\r\n\t</a>\r\n\t<!-- #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\t<ng-template *ngIf=\"!classType && opened\" let-item let-first=\"first\" ngFor [ngForOf]=\"dataSource?.items\">\r\n\t\t<mat-option [value]=\"item\">\r\n\t\t\t<span *ngIf=\"!autocompleteOptionTemplate?.templateRef\">{{item}}</span>\r\n\t\t\t<ng-template *ngIf=\"autocompleteOptionTemplate?.templateRef\" [ngTemplateOutlet]=\"autocompleteOptionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: item }\"></ng-template>\r\n\t\t</mat-option>\r\n\t</ng-template>\r\n\t<ng-container *ngIf=\"classType && opened\">\r\n\t\t<mat-option hide=\"true\"></mat-option>\r\n\t\t<vd-dynamic-table [dataSource]=\"dataSource\" [classType]=\"classType\" (rowClick)=\"addChip($event, filterInput)\" matSort [sortActive]=\"sortActive||'id'\" [sortDirection]=\"sortDirection\"></vd-dynamic-table>\r\n\t</ng-container>\r\n\t<div class=\"vd-chips-paginator\">\r\n\t\t<mat-divider></mat-divider>\r\n\t\t<mat-paginator [length]=\"dataSource?.total\" [pageIndex]=\"dataSource?.pageIndex\" [pageSize]=\"dataSource?.pageSize\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\" hidePageSize=\"true\"></mat-paginator>\r\n\t</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 .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-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}\n"] }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: VdMediaService }, { type: i0.ChangeDetectorRef }, { type: i1.NgControl, decorators: [{
                     type: Optional
                 }, {
@@ -22805,11 +22921,11 @@ class VdListComponent extends AbstractSelectFormField {
         this.selectEl?.focus();
     }
     /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: VdListComponent, deps: [{ token: i0.Injector }, { token: i1.NgControl, optional: true, self: true }, { token: i1.NgForm, optional: true }, { token: i1.FormGroupDirective, optional: true }, { token: i2$1.ErrorStateMatcher }, { token: i3$3.FocusMonitor }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: VdListComponent, 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\" [disabled]=\"disabled || readonly\" [hideSingleSelectionIndicator]=\"false\" flex>\r\n    <!-- #region Options -->\r\n    <ng-template let-option let-first=\"first\" ngFor [ngForOf]=\"filteredOptions\">\r\n        <mat-list-option [value]=\"mapper ? option : option[key]\">\r\n            <span *ngIf=\"!optionTemplate?.templateRef\" i18n=\"@@selection\">{option[text], select, option {option} other {{{option[text]}}}}</span>\r\n            <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\r\n        </mat-list-option>\r\n    </ng-template>\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: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i4.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }] });
+    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: VdListComponent, 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\" [disabled]=\"disabled || readonly\" [hideSingleSelectionIndicator]=\"false\" flex>\r\n    <!-- #region Options -->\r\n    <ng-template let-option let-first=\"first\" ngFor [ngForOf]=\"filteredOptions\">\r\n        <mat-list-option [value]=\"mapper ? option : option[optionValueProperty]\">\r\n            <span *ngIf=\"!optionTemplate?.templateRef\" i18n=\"@@selection\">{option[optionTextProperty], select, option {option} other {{{option[optionTextProperty]}}}}</span>\r\n            <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\r\n        </mat-list-option>\r\n    </ng-template>\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: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i4.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: VdListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vd-list', host: { 'class': 'vd-list' }, providers: [{ provide: MatFormFieldControl, useExisting: VdListComponent }], template: "<mat-selection-list i18n-placeholder [(ngModel)]=\"value\" #select=\"matSelectionList\" (selectionChange)=\"handleChange($event)\" [multiple]=\"multiple\" [compareWith]=\"compareWith\" [disabled]=\"disabled || readonly\" [hideSingleSelectionIndicator]=\"false\" flex>\r\n    <!-- #region Options -->\r\n    <ng-template let-option let-first=\"first\" ngFor [ngForOf]=\"filteredOptions\">\r\n        <mat-list-option [value]=\"mapper ? option : option[key]\">\r\n            <span *ngIf=\"!optionTemplate?.templateRef\" i18n=\"@@selection\">{option[text], select, option {option} other {{{option[text]}}}}</span>\r\n            <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\r\n        </mat-list-option>\r\n    </ng-template>\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"] }]
+            args: [{ selector: 'vd-list', host: { 'class': 'vd-list' }, providers: [{ provide: MatFormFieldControl, useExisting: VdListComponent }], template: "<mat-selection-list i18n-placeholder [(ngModel)]=\"value\" #select=\"matSelectionList\" (selectionChange)=\"handleChange($event)\" [multiple]=\"multiple\" [compareWith]=\"compareWith\" [disabled]=\"disabled || readonly\" [hideSingleSelectionIndicator]=\"false\" flex>\r\n    <!-- #region Options -->\r\n    <ng-template let-option let-first=\"first\" ngFor [ngForOf]=\"filteredOptions\">\r\n        <mat-list-option [value]=\"mapper ? option : option[optionValueProperty]\">\r\n            <span *ngIf=\"!optionTemplate?.templateRef\" i18n=\"@@selection\">{option[optionTextProperty], select, option {option} other {{{option[optionTextProperty]}}}}</span>\r\n            <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\r\n        </mat-list-option>\r\n    </ng-template>\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: () => [{ type: i0.Injector }, { type: i1.NgControl, decorators: [{
                     type: Optional
                 }, {
@@ -23272,11 +23388,11 @@ class VdGenericFormComponent {
         console.log(message, optionalParams);
     }
     /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: VdGenericFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: VdGenericFormComponent, 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" }, 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: "<div *ngIf=\"formGroup && fieldRows\" [formGroup]=\"formGroup\">\r\n    <!-- #region Fields -->\r\n    <ng-container *ngFor=\"let fields of fieldRows; let i = index\">\r\n        <div layout-gt-sm=\"row\" layout=\"column\">\r\n            <ng-container *ngFor=\"let field of fields\" [ngSwitch]=\"field.type\">\r\n                <ng-container *ngIf=\"!field.hidden && !(field.hide && field.hide(formValue, formGroup, context))\">\r\n                    <ng-container *ngIf=\"field.wrapped\">\r\n                        <!-- #region Text input -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Text\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <input [type]=\"field.inputType\" [minlength]=\"field.minLength||null\" [maxlength]=\"field.maxLength||null\" [min]=\"field.min\" [max]=\"field.max\" matInput [formControlName]=\"field.name!\" [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" [pattern]=\"(field.pattern??'')\" [onlyNumber]=\"(field.numbersOnly??false)\">\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any($any(formGroup.controls[field.name!]))['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Textarea -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.TextArea\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <textarea matInput [formControlName]=\"field.name!\" rows=\"field.rows||2\" [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"></textarea>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Enum -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Enum\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <vd-select [formControlName]=\"field.name!\" [enum]=\"field.enumType\" [enumFilter]=\"field.enumFilter | func:formValue:formGroup:context\" [key]=\"field.optionValue\" [text]=\"field.optionText\" [defaultOption]=\"field.defaultOption??true\" [multiple]=\"field.multiple\" [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" [triggerCssClass]=\"field.triggerCssClass\" [triggerMode]=\"field.triggerMode\" layout=\"row\" flex>\r\n                                <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerTemplate\">\r\n                                    <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                                <ng-template vd-select-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n                                    <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                            </vd-select>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region VdSelect -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.VdSelect\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <vd-select [formControlName]=\"field.name!\" [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\" [params]=\"field.params??{} | func:formValue:formGroup:context\" [projection]=\"field.projection\" [mapper]=\"field.mapper\" [compareWith]=\"field.compareWith\" [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\" [key]=\"field.optionValue\" [text]=\"field.optionText\" [defaultOption]=\"field.defaultOption??true\" [multiple]=\"field.multiple\" [selectFirst]=\"field.selectFirst\" [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" [triggerCssClass]=\"field.triggerCssClass\" [triggerMode]=\"field.triggerMode\" (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\" (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\" layout=\"row\" flex>\r\n                                <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerTemplate\">\r\n                                    <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                                <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerMapper && field.multiple && field.triggerMode == 'chip'\">\r\n                                    <span *ngFor=\"let item of trigger\" class=\"mat-mdc-chip mat-mdc-standard-chip mat-primary mat-mdc-chip-selected\">\r\n                                        <span [innerHTML]=\"field.triggerMapper(item, formValue, formGroup, context)\"></span>\r\n                                    </span>\r\n                                </ng-template>\r\n                                <ng-template vd-select-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n                                    <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                            </vd-select>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region VdList -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.VdList\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-list\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <vd-list [formControlName]=\"field.name!\" [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\" [params]=\"field.params ??{} | func:formValue:formGroup:context\" [projection]=\"field.projection\" [mapper]=\"field.mapper\" [compareWith]=\"field.compareWith\" [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\" [key]=\"field.optionValue\" [text]=\"field.optionText\" [multiple]=\"field.multiple\" [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\" (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\" [style.max-width]=\"field.maxWidth\" [style.max-height]=\"field.maxHeight\" flex>\r\n                                <ng-template vd-list-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n                                    <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                            </vd-list>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Chips -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Chips\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <mat-chip-grid #chipList [formControlName]=\"field.name!\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\r\n                                <mat-chip-row *ngFor=\"let chip of $any(formGroup.controls[field.name!])?.value\" (removed)=\"removeChip(field, chip)\" color=\"primary\" selectable=\"true\" selected>\r\n                                    <span>{{chip}}</span>\r\n                                    <button matChipRemove>\r\n                                        <mat-icon fontSet=\"material-symbols-outlined\">cancel</mat-icon>\r\n                                    </button>\r\n                                </mat-chip-row>\r\n                                <input [placeholder]=\"$any(field.label)\" #chipInput [matChipInputFor]=\"chipList\" [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\" [matAutocomplete]=\"chipAutocomplete\" (input)=\"filterAutocomplete(field, chipInput)\" (matChipInputTokenEnd)=\"addChip(field, $event)\" autocomplete=\"off\">\r\n                            </mat-chip-grid>\r\n                            <mat-autocomplete autoActiveFirstOption #chipAutocomplete=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\" (optionSelected)=\"autocompleteValueSelected(field, $event, chipInput)\">\r\n                                <mat-option *ngFor=\"let option of autocompleteFilteredOptions[field.name!]\" [value]=\"option.id\">\r\n                                    {{option.name}}\r\n                                </mat-option>\r\n                            </mat-autocomplete>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region VdChips -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.VdChips\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <vd-chips #vdChip [formControlName]=\"field.name!\" [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\" [params]=\"field.params || {} | func:formValue:formGroup:context\" [searchField]=\"field.searchField\" [classType]=\"field.classType\" [projection]=\"field.projection\" [key]=\"field.optionValue\" [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" [removable]=\"!field.clear\" [context]=\"context\" [suffixButtons]=\"field.suffixButtons\" [autocompleteCssClass]=\"field.autocompleteCssClass\" (initSelect)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\" (selected)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\" (cleared)=\"field.clear && field.clear(formValue, formGroup, context);\" [customValue]=\"field.customValue\" layout=\"row\" flex>\r\n                                <ng-template vd-chip let-chip=\"chip\" *ngIf=\"field.chipTemplate\">\r\n                                    <div [outerHTML]=\"field.chipTemplate(chip, formValue, formGroup, context)\"></div>\r\n                                </ng-template>\r\n                                <ng-template vd-autocomplete-option let-option=\"option\" *ngIf=\"field.autocompleteTemplate\">\r\n                                    <div [outerHTML]=\"field.autocompleteTemplate(option, formValue, formGroup, context)\"></div>\r\n                                </ng-template>\r\n                            </vd-chips>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-hint *ngIf=\"vdChip.emptyResult\" class=\"tc-red-400\" i18n=\"@@noResultsFound\">No results were found.</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Select -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Select\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <mat-select [formControlName]=\"field.name!\" [multiple]=\"field.multiple\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" flex>\r\n                                <mat-option *ngFor=\"let option of $any(field.options)\" [value]=\"option.id\">{{option.name}}</mat-option>\r\n                            </mat-select>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Autocomplete -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Autocomplete\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <input type=\"text\" matInput [formControlName]=\"field.name!\" [min]=\"field.min\" [max]=\"field.max\" [matAutocomplete]=\"auto\" #autocompleteInput (input)=\"filterAutocomplete(field, autocompleteInput)\" autocomplete=\"off\" [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\r\n                            <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\">\r\n                                <mat-option *ngFor=\"let option of autocompleteFilteredOptions[field.name!]\" [value]=\"option.id\">\r\n                                    {{option.name}}\r\n                                </mat-option>\r\n                            </mat-autocomplete>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Date -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Date\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <input matInput [formControlName]=\"field.name!\" [min]=\"field.min\" [max]=\"field.max\" autocomplete=\"off\" [matDatepicker]=\"datePicker\" [matDatepickerFilter]=\"field.dateFilter\" [readonly]=\"readonly || field.forceSelect || (field.readonly && field.readonly(formValue, formGroup, context))\">\r\n                            <mat-datepicker-toggle matSuffix [for]=\"datePicker\"></mat-datepicker-toggle>\r\n                            <mat-datepicker #datePicker [disabled]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" (monthSelected)=\"handleDatePickerFilterAsync(datePicker, field, $event )\" (opened)=\"handleDatePickerOpened(datePicker, field)\" [calendarHeaderComponent]=\"datePickerHeaderComponent\"></mat-datepicker>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Calendar -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Calendar\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-calendar\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <input input=\"hidden\" hidden matInput [formControlName]=\"field.name!\">\r\n                            <mat-calendar #calendar [selected]=\"formGroup.get(field.name!)?.value\" (selectedChange)=\"formGroup.get(field.name!)?.setValue($event);\" (monthSelected)=\"handleCalendarFilterAsync(calendar, field, $event )\" [headerComponent]=\"datePickerHeaderComponent\" style=\"width: 100%;\"></mat-calendar>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\" layout-margin>{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n                    </ng-container>\r\n\r\n                    <!-- #region Checkbox -->\r\n                    <div *ngSwitchCase=\"FormFieldType.Checkbox\" [attr.flex]=\"field.flex||0\" class=\"mat-checkbox-wrap\" [class]=\"field.cssClass\">\r\n                        <mat-checkbox [formControlName]=\"field.name!\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">{{field.label}}</mat-checkbox>\r\n                        <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\" layout-margin>{{errorMessage}}</mat-error>\r\n                    </div>\r\n                    <!-- #endregion -->\r\n\r\n                    <!-- #region Editor -->\r\n                    <ng-container *ngSwitchCase=\"FormFieldType.Editor\">\r\n                        <ng-template *ngIf=\"editorTemplate?.templateRef!\" [ngTemplateOutlet]=\"editorTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n                    </ng-container>\r\n                    <!-- #endregion -->\r\n\r\n                    <!-- #region Code -->\r\n                    <ng-container *ngSwitchCase=\"FormFieldType.Code\">\r\n                        <ng-template *ngIf=\"codeTemplate?.templateRef!\" [ngTemplateOutlet]=\"codeTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n                    </ng-container>\r\n                    <!-- #endregion -->\r\n\r\n                    <!-- #region File -->\r\n                    <ng-container *ngSwitchCase=\"FormFieldType.File\">\r\n                        <mat-form-field [attr.flex]=\"field.flex||0\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <div vd-file-input [formControlName]=\"field.name!\" (select)=\"field.change && field.change(field, $event, formGroup, context)\" [accept]=\"field.fileExtensions\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" flex></div>\r\n                        </mat-form-field>\r\n                    </ng-container>\r\n                    <!-- #endregion -->\r\n\r\n                    <!-- #region Custom -->\r\n                    <ng-container *ngSwitchCase=\"FormFieldType.Custom\">\r\n                        <ng-template *ngIf=\"customTemplate?.templateRef!\" [ngTemplateOutlet]=\"customTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n                    </ng-container>\r\n                    <!-- #endregion -->\r\n                </ng-container>\r\n            </ng-container>\r\n\r\n            <!-- #region Template for custom fields -->\r\n            <ng-container *ngFor=\"let customField of customFieldsTemplates\">\r\n                <ng-template *ngIf=\"customField?.templateRef && customField.row == fields[0]?.row && customField.inline\" [ngTemplateOutlet]=\"customField?.templateRef!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n        </div>\r\n\r\n        <!-- #region Template for custom fields -->\r\n        <ng-container *ngIf=\"customFields\" [ngTemplateOutlet]=\"customFields\" [ngTemplateOutletContext]=\"{formGroup: formGroup, row: fields[0].row}\"></ng-container>\r\n        <ng-container *ngFor=\"let customField of customFieldsTemplates\">\r\n            <ng-template *ngIf=\"customField?.templateRef && customField.row == ((fields[0]?.row??0)+1) && !customField.inline\" [ngTemplateOutlet]=\"customField?.templateRef!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\r\n        </ng-container>\r\n        <!-- #endregion -->\r\n    </ng-container>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Form bottom -->\r\n    <ng-container *ngIf=\"bottom\" [ngTemplateOutlet]=\"bottom\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-container>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Template for suffix buttons -->\r\n    <ng-template #suffixButtons let-field>\r\n        <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n            <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n            </button>\r\n        </ng-container>\r\n    </ng-template>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Debug value -->\r\n    <code *ngIf=\"debugValue\">\r\n        <pre>{{formValue | json}}</pre>\r\n    </code>\r\n    <!-- #endregion -->\r\n</div>", styles: [".mat-checkbox-wrap mat-error{transform:translate(36px,-20px);max-width:93%;font-size:var(--mdc-typography-caption-font-size, 12px)}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: DisableControlDirective, selector: "[disableControl]", inputs: ["disableControl"] }, { kind: "directive", type: OnlyNumberDirective, selector: "[onlyNumber]", inputs: ["onlyNumber"] }, { kind: "component", type: VdSelectComponent, selector: "vd-select", inputs: ["triggerCssClass", "triggerMode"] }, { kind: "directive", type: VdSelectOptionDirective, selector: "[vd-select-option]ng-template" }, { kind: "directive", type: VdSelectTriggerDirective, selector: "[vd-select-trigger]ng-template" }, { kind: "component", type: VdChipsComponent, selector: "vd-chips", inputs: ["classType", "chips", "endpoint", "params", "projection", "paginated", "customValue", "context", "key", "searchField", "searchFields", "removable", "debounce", "autocompleteCssClass", "suffixButtons"], outputs: ["initSelect", "selected", "cleared", "launch", "chipFocus"] }, { kind: "directive", type: VdAutocompleteOptionDirective, selector: "[vd-autocomplete-option]ng-template" }, { kind: "directive", type: VdChipDirective, selector: "[vd-chip]ng-template" }, { kind: "component", type: VdFileInputComponent, selector: "[vd-file-input]", inputs: ["accept", "placeholder", "required", "multiple", "disabled", "errorState"], outputs: ["select", "clear"] }, { kind: "component", type: VdListComponent, selector: "vd-list" }, { kind: "directive", type: VdListOptionDirective, selector: "[vd-list-option]ng-template" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5$3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i20.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: "component", type: i20.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i20.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i20.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i16.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i10.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: "directive", type: i10.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i7$1.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i7$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i7$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i7$1.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "directive", type: NativeElementInjectorDirective, selector: "[ngModel], [formControl], [formControlName]" }, { kind: "directive", type: MatFormFieldReadonlyDirective, selector: "mat-form-field" }, { kind: "directive", type: EmptyStringResetDirective, selector: "[ngModel],[formControlName],[formControl]" }, { kind: "pipe", type: i3.JsonPipe, name: "json" }, { kind: "pipe", type: FuncPipe, name: "func" }] });
+    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: VdGenericFormComponent, 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" }, 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: "<div *ngIf=\"formGroup && fieldRows\" [formGroup]=\"formGroup\">\r\n    <!-- #region Fields -->\r\n    <ng-container *ngFor=\"let fields of fieldRows; let i = index\">\r\n        <div layout-gt-sm=\"row\" layout=\"column\">\r\n            <ng-container *ngFor=\"let field of fields\" [ngSwitch]=\"field.type\">\r\n                <ng-container *ngIf=\"!field.hidden && !(field.hide && field.hide(formValue, formGroup, context))\">\r\n                    <ng-container *ngIf=\"field.wrapped\">\r\n                        <!-- #region Text input -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Text\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <input [type]=\"field.inputType\" [minlength]=\"field.minLength||null\" [maxlength]=\"field.maxLength||null\" [min]=\"field.min\" [max]=\"field.max\" matInput [formControlName]=\"field.name!\" [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" [pattern]=\"(field.pattern??'')\" [onlyNumber]=\"(field.numbersOnly??false)\">\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any($any(formGroup.controls[field.name!]))['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Textarea -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.TextArea\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <textarea matInput [formControlName]=\"field.name!\" rows=\"field.rows||2\" [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"></textarea>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Enum -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Enum\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <vd-select [formControlName]=\"field.name!\" [enum]=\"field.enumType\" [enumFilter]=\"field.enumFilter | func:formValue:formGroup:context\" [optionValueProperty]=\"field.optionValueProperty\" [optionTextProperty]=\"field.optionTextProperty\" [defaultOption]=\"field.defaultOption??true\" [multiple]=\"field.multiple\" [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" [triggerCssClass]=\"field.triggerCssClass\" [triggerMode]=\"field.triggerMode\" layout=\"row\" flex>\r\n                                <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerTemplate\">\r\n                                    <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                                <ng-template vd-select-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n                                    <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                            </vd-select>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region VdSelect -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.VdSelect\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <vd-select [formControlName]=\"field.name!\" [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\" [params]=\"field.params??{} | func:formValue:formGroup:context\" [projection]=\"field.projection\" [mapper]=\"field.mapper\" [compareWith]=\"field.compareWith\" [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\" [optionValueProperty]=\"field.optionValueProperty\" [optionTextProperty]=\"field.optionTextProperty\" [defaultOption]=\"field.defaultOption??true\" [matIconKey]=\"field.optionMatIconProperty\" [svgIconKey]=\"field.optionSvgIconProperty\" [fontSet]=\"field.optionIconFontSet\" [multiple]=\"field.multiple\" [selectFirst]=\"field.selectFirst\" [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" [triggerCssClass]=\"field.triggerCssClass\" [triggerMode]=\"field.triggerMode\" (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\" (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\" layout=\"row\" flex>\r\n                                <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerTemplate\">\r\n                                    <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                                <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerMapper && field.multiple && field.triggerMode == 'chip'\">\r\n                                    <span *ngFor=\"let item of trigger\" class=\"mat-mdc-chip mat-mdc-standard-chip mat-primary mat-mdc-chip-selected\">\r\n                                        <span [innerHTML]=\"field.triggerMapper(item, formValue, formGroup, context)\"></span>\r\n                                    </span>\r\n                                </ng-template>\r\n                                <ng-template vd-select-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n                                    <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                            </vd-select>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region VdList -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.VdList\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-list\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <vd-list [formControlName]=\"field.name!\" [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\" [params]=\"field.params ??{} | func:formValue:formGroup:context\" [projection]=\"field.projection\" [mapper]=\"field.mapper\" [compareWith]=\"field.compareWith\" [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\" [optionValueProperty]=\"field.optionValueProperty\" [optionTextProperty]=\"field.optionTextProperty\" [multiple]=\"field.multiple\" [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\" (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\" [style.max-width]=\"field.maxWidth\" [style.max-height]=\"field.maxHeight\" flex>\r\n                                <ng-template vd-list-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n                                    <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                            </vd-list>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Chips -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Chips\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <mat-chip-grid #chipList [formControlName]=\"field.name!\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\r\n                                <mat-chip-row *ngFor=\"let chip of $any(formGroup.controls[field.name!])?.value\" (removed)=\"removeChip(field, chip)\" color=\"primary\" selectable=\"true\" selected>\r\n                                    <span>{{chip}}</span>\r\n                                    <button matChipRemove>\r\n                                        <mat-icon fontSet=\"material-symbols-outlined\">cancel</mat-icon>\r\n                                    </button>\r\n                                </mat-chip-row>\r\n                                <input [placeholder]=\"$any(field.label)\" #chipInput [matChipInputFor]=\"chipList\" [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\" [matAutocomplete]=\"chipAutocomplete\" (input)=\"filterAutocomplete(field, chipInput)\" (matChipInputTokenEnd)=\"addChip(field, $event)\" autocomplete=\"off\">\r\n                            </mat-chip-grid>\r\n                            <mat-autocomplete autoActiveFirstOption #chipAutocomplete=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\" (optionSelected)=\"autocompleteValueSelected(field, $event, chipInput)\">\r\n                                <mat-option *ngFor=\"let option of autocompleteFilteredOptions[field.name!]\" [value]=\"option.id\">\r\n                                    {{option.name}}\r\n                                </mat-option>\r\n                            </mat-autocomplete>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region VdChips -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.VdChips\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <vd-chips #vdChip [formControlName]=\"field.name!\" [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\" [params]=\"field.params || {} | func:formValue:formGroup:context\" [searchField]=\"field.searchField\" [classType]=\"field.classType\" [projection]=\"field.projection\" [key]=\"field.optionValueProperty\" [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" [removable]=\"!field.clear\" [context]=\"context\" [suffixButtons]=\"field.suffixButtons\" [autocompleteCssClass]=\"field.autocompleteCssClass\" (initSelect)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\" (selected)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\" (cleared)=\"field.clear && field.clear(formValue, formGroup, context);\" [customValue]=\"field.customValue\" layout=\"row\" flex>\r\n                                <ng-template vd-chip let-chip=\"chip\" *ngIf=\"field.chipTemplate\">\r\n                                    <div [outerHTML]=\"field.chipTemplate(chip, formValue, formGroup, context)\"></div>\r\n                                </ng-template>\r\n                                <ng-template vd-autocomplete-option let-option=\"option\" *ngIf=\"field.autocompleteTemplate\">\r\n                                    <div [outerHTML]=\"field.autocompleteTemplate(option, formValue, formGroup, context)\"></div>\r\n                                </ng-template>\r\n                            </vd-chips>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-hint *ngIf=\"vdChip.emptyResult\" class=\"tc-red-400\" i18n=\"@@noResultsFound\">No results were found.</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Select -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Select\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <mat-select [formControlName]=\"field.name!\" [multiple]=\"field.multiple\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" flex>\r\n                                <mat-option *ngFor=\"let option of $any(field.options)\" [value]=\"option.id\">{{option.name}}</mat-option>\r\n                            </mat-select>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Autocomplete -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Autocomplete\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <input type=\"text\" matInput [formControlName]=\"field.name!\" [min]=\"field.min\" [max]=\"field.max\" [matAutocomplete]=\"auto\" #autocompleteInput (input)=\"filterAutocomplete(field, autocompleteInput)\" autocomplete=\"off\" [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\r\n                            <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\">\r\n                                <mat-option *ngFor=\"let option of autocompleteFilteredOptions[field.name!]\" [value]=\"option.id\">\r\n                                    {{option.name}}\r\n                                </mat-option>\r\n                            </mat-autocomplete>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Date -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Date\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <input matInput [formControlName]=\"field.name!\" [min]=\"field.min\" [max]=\"field.max\" autocomplete=\"off\" [matDatepicker]=\"datePicker\" [matDatepickerFilter]=\"field.dateFilter\" [readonly]=\"readonly || field.forceSelect || (field.readonly && field.readonly(formValue, formGroup, context))\">\r\n                            <mat-datepicker-toggle matSuffix [for]=\"datePicker\"></mat-datepicker-toggle>\r\n                            <mat-datepicker #datePicker [disabled]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" (monthSelected)=\"handleDatePickerFilterAsync(datePicker, field, $event )\" (opened)=\"handleDatePickerOpened(datePicker, field)\" [calendarHeaderComponent]=\"datePickerHeaderComponent\"></mat-datepicker>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Calendar -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Calendar\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-calendar\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <input input=\"hidden\" hidden matInput [formControlName]=\"field.name!\">\r\n                            <mat-calendar #calendar [selected]=\"formGroup.get(field.name!)?.value\" (selectedChange)=\"formGroup.get(field.name!)?.setValue($event);\" (monthSelected)=\"handleCalendarFilterAsync(calendar, field, $event )\" [headerComponent]=\"datePickerHeaderComponent\" style=\"width: 100%;\"></mat-calendar>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\" layout-margin>{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n                    </ng-container>\r\n\r\n                    <!-- #region Checkbox -->\r\n                    <div *ngSwitchCase=\"FormFieldType.Checkbox\" [attr.flex]=\"field.flex||0\" class=\"mat-checkbox-wrap\" [class]=\"field.cssClass\">\r\n                        <mat-checkbox [formControlName]=\"field.name!\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">{{field.label}}</mat-checkbox>\r\n                        <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\" layout-margin>{{errorMessage}}</mat-error>\r\n                    </div>\r\n                    <!-- #endregion -->\r\n\r\n                    <!-- #region Editor -->\r\n                    <ng-container *ngSwitchCase=\"FormFieldType.Editor\">\r\n                        <ng-template *ngIf=\"editorTemplate?.templateRef!\" [ngTemplateOutlet]=\"editorTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n                    </ng-container>\r\n                    <!-- #endregion -->\r\n\r\n                    <!-- #region Code -->\r\n                    <ng-container *ngSwitchCase=\"FormFieldType.Code\">\r\n                        <ng-template *ngIf=\"codeTemplate?.templateRef!\" [ngTemplateOutlet]=\"codeTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n                    </ng-container>\r\n                    <!-- #endregion -->\r\n\r\n                    <!-- #region File -->\r\n                    <ng-container *ngSwitchCase=\"FormFieldType.File\">\r\n                        <mat-form-field [attr.flex]=\"field.flex||0\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <div vd-file-input [formControlName]=\"field.name!\" (select)=\"field.change && field.change(field, $event, formGroup, context)\" [accept]=\"field.fileExtensions\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" flex></div>\r\n                        </mat-form-field>\r\n                    </ng-container>\r\n                    <!-- #endregion -->\r\n\r\n                    <!-- #region Custom -->\r\n                    <ng-container *ngSwitchCase=\"FormFieldType.Custom\">\r\n                        <ng-template *ngIf=\"customTemplate?.templateRef!\" [ngTemplateOutlet]=\"customTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n                    </ng-container>\r\n                    <!-- #endregion -->\r\n                </ng-container>\r\n            </ng-container>\r\n\r\n            <!-- #region Template for custom fields -->\r\n            <ng-container *ngFor=\"let customField of customFieldsTemplates\">\r\n                <ng-template *ngIf=\"customField?.templateRef && customField.row == fields[0]?.row && customField.inline\" [ngTemplateOutlet]=\"customField?.templateRef!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n        </div>\r\n\r\n        <!-- #region Template for custom fields -->\r\n        <ng-container *ngIf=\"customFields\" [ngTemplateOutlet]=\"customFields\" [ngTemplateOutletContext]=\"{formGroup: formGroup, row: fields[0].row}\"></ng-container>\r\n        <ng-container *ngFor=\"let customField of customFieldsTemplates\">\r\n            <ng-template *ngIf=\"customField?.templateRef && customField.row == ((fields[0]?.row??0)+1) && !customField.inline\" [ngTemplateOutlet]=\"customField?.templateRef!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\r\n        </ng-container>\r\n        <!-- #endregion -->\r\n    </ng-container>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Form bottom -->\r\n    <ng-container *ngIf=\"bottom\" [ngTemplateOutlet]=\"bottom\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-container>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Template for suffix buttons -->\r\n    <ng-template #suffixButtons let-field>\r\n        <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n            <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n            </button>\r\n        </ng-container>\r\n    </ng-template>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Debug value -->\r\n    <code *ngIf=\"debugValue\">\r\n        <pre>{{formValue | json}}</pre>\r\n    </code>\r\n    <!-- #endregion -->\r\n</div>", styles: [".mat-checkbox-wrap mat-error{transform:translate(36px,-20px);max-width:93%;font-size:var(--mdc-typography-caption-font-size, 12px)}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: DisableControlDirective, selector: "[disableControl]", inputs: ["disableControl"] }, { kind: "directive", type: OnlyNumberDirective, selector: "[onlyNumber]", inputs: ["onlyNumber"] }, { kind: "component", type: VdSelectComponent, selector: "vd-select", inputs: ["triggerCssClass", "triggerMode"] }, { kind: "directive", type: VdSelectOptionDirective, selector: "[vd-select-option]ng-template" }, { kind: "directive", type: VdSelectTriggerDirective, selector: "[vd-select-trigger]ng-template" }, { kind: "component", type: VdChipsComponent, selector: "vd-chips", inputs: ["classType", "chips", "endpoint", "params", "projection", "paginated", "customValue", "context", "key", "searchField", "searchFields", "removable", "debounce", "autocompleteCssClass", "suffixButtons"], outputs: ["initSelect", "selected", "cleared", "launch", "chipFocus"] }, { kind: "directive", type: VdAutocompleteOptionDirective, selector: "[vd-autocomplete-option]ng-template" }, { kind: "directive", type: VdChipDirective, selector: "[vd-chip]ng-template" }, { kind: "component", type: VdFileInputComponent, selector: "[vd-file-input]", inputs: ["accept", "placeholder", "required", "multiple", "disabled", "errorState"], outputs: ["select", "clear"] }, { kind: "component", type: VdListComponent, selector: "vd-list" }, { kind: "directive", type: VdListOptionDirective, selector: "[vd-list-option]ng-template" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5$3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i20.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: "component", type: i20.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i20.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i20.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i16.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i10.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: "directive", type: i10.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i7$1.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i7$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i7$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i7$1.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "directive", type: NativeElementInjectorDirective, selector: "[ngModel], [formControl], [formControlName]" }, { kind: "directive", type: MatFormFieldReadonlyDirective, selector: "mat-form-field" }, { kind: "directive", type: EmptyStringResetDirective, selector: "[ngModel],[formControlName],[formControl]" }, { kind: "pipe", type: i3.JsonPipe, name: "json" }, { kind: "pipe", type: FuncPipe, name: "func" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: VdGenericFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vd-generic-form', template: "<div *ngIf=\"formGroup && fieldRows\" [formGroup]=\"formGroup\">\r\n    <!-- #region Fields -->\r\n    <ng-container *ngFor=\"let fields of fieldRows; let i = index\">\r\n        <div layout-gt-sm=\"row\" layout=\"column\">\r\n            <ng-container *ngFor=\"let field of fields\" [ngSwitch]=\"field.type\">\r\n                <ng-container *ngIf=\"!field.hidden && !(field.hide && field.hide(formValue, formGroup, context))\">\r\n                    <ng-container *ngIf=\"field.wrapped\">\r\n                        <!-- #region Text input -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Text\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <input [type]=\"field.inputType\" [minlength]=\"field.minLength||null\" [maxlength]=\"field.maxLength||null\" [min]=\"field.min\" [max]=\"field.max\" matInput [formControlName]=\"field.name!\" [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" [pattern]=\"(field.pattern??'')\" [onlyNumber]=\"(field.numbersOnly??false)\">\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any($any(formGroup.controls[field.name!]))['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Textarea -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.TextArea\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <textarea matInput [formControlName]=\"field.name!\" rows=\"field.rows||2\" [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"></textarea>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Enum -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Enum\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <vd-select [formControlName]=\"field.name!\" [enum]=\"field.enumType\" [enumFilter]=\"field.enumFilter | func:formValue:formGroup:context\" [key]=\"field.optionValue\" [text]=\"field.optionText\" [defaultOption]=\"field.defaultOption??true\" [multiple]=\"field.multiple\" [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" [triggerCssClass]=\"field.triggerCssClass\" [triggerMode]=\"field.triggerMode\" layout=\"row\" flex>\r\n                                <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerTemplate\">\r\n                                    <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                                <ng-template vd-select-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n                                    <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                            </vd-select>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region VdSelect -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.VdSelect\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <vd-select [formControlName]=\"field.name!\" [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\" [params]=\"field.params??{} | func:formValue:formGroup:context\" [projection]=\"field.projection\" [mapper]=\"field.mapper\" [compareWith]=\"field.compareWith\" [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\" [key]=\"field.optionValue\" [text]=\"field.optionText\" [defaultOption]=\"field.defaultOption??true\" [multiple]=\"field.multiple\" [selectFirst]=\"field.selectFirst\" [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" [triggerCssClass]=\"field.triggerCssClass\" [triggerMode]=\"field.triggerMode\" (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\" (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\" layout=\"row\" flex>\r\n                                <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerTemplate\">\r\n                                    <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                                <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerMapper && field.multiple && field.triggerMode == 'chip'\">\r\n                                    <span *ngFor=\"let item of trigger\" class=\"mat-mdc-chip mat-mdc-standard-chip mat-primary mat-mdc-chip-selected\">\r\n                                        <span [innerHTML]=\"field.triggerMapper(item, formValue, formGroup, context)\"></span>\r\n                                    </span>\r\n                                </ng-template>\r\n                                <ng-template vd-select-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n                                    <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                            </vd-select>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region VdList -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.VdList\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-list\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <vd-list [formControlName]=\"field.name!\" [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\" [params]=\"field.params ??{} | func:formValue:formGroup:context\" [projection]=\"field.projection\" [mapper]=\"field.mapper\" [compareWith]=\"field.compareWith\" [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\" [key]=\"field.optionValue\" [text]=\"field.optionText\" [multiple]=\"field.multiple\" [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\" (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\" [style.max-width]=\"field.maxWidth\" [style.max-height]=\"field.maxHeight\" flex>\r\n                                <ng-template vd-list-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n                                    <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                            </vd-list>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Chips -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Chips\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <mat-chip-grid #chipList [formControlName]=\"field.name!\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\r\n                                <mat-chip-row *ngFor=\"let chip of $any(formGroup.controls[field.name!])?.value\" (removed)=\"removeChip(field, chip)\" color=\"primary\" selectable=\"true\" selected>\r\n                                    <span>{{chip}}</span>\r\n                                    <button matChipRemove>\r\n                                        <mat-icon fontSet=\"material-symbols-outlined\">cancel</mat-icon>\r\n                                    </button>\r\n                                </mat-chip-row>\r\n                                <input [placeholder]=\"$any(field.label)\" #chipInput [matChipInputFor]=\"chipList\" [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\" [matAutocomplete]=\"chipAutocomplete\" (input)=\"filterAutocomplete(field, chipInput)\" (matChipInputTokenEnd)=\"addChip(field, $event)\" autocomplete=\"off\">\r\n                            </mat-chip-grid>\r\n                            <mat-autocomplete autoActiveFirstOption #chipAutocomplete=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\" (optionSelected)=\"autocompleteValueSelected(field, $event, chipInput)\">\r\n                                <mat-option *ngFor=\"let option of autocompleteFilteredOptions[field.name!]\" [value]=\"option.id\">\r\n                                    {{option.name}}\r\n                                </mat-option>\r\n                            </mat-autocomplete>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region VdChips -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.VdChips\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <vd-chips #vdChip [formControlName]=\"field.name!\" [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\" [params]=\"field.params || {} | func:formValue:formGroup:context\" [searchField]=\"field.searchField\" [classType]=\"field.classType\" [projection]=\"field.projection\" [key]=\"field.optionValue\" [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" [removable]=\"!field.clear\" [context]=\"context\" [suffixButtons]=\"field.suffixButtons\" [autocompleteCssClass]=\"field.autocompleteCssClass\" (initSelect)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\" (selected)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\" (cleared)=\"field.clear && field.clear(formValue, formGroup, context);\" [customValue]=\"field.customValue\" layout=\"row\" flex>\r\n                                <ng-template vd-chip let-chip=\"chip\" *ngIf=\"field.chipTemplate\">\r\n                                    <div [outerHTML]=\"field.chipTemplate(chip, formValue, formGroup, context)\"></div>\r\n                                </ng-template>\r\n                                <ng-template vd-autocomplete-option let-option=\"option\" *ngIf=\"field.autocompleteTemplate\">\r\n                                    <div [outerHTML]=\"field.autocompleteTemplate(option, formValue, formGroup, context)\"></div>\r\n                                </ng-template>\r\n                            </vd-chips>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-hint *ngIf=\"vdChip.emptyResult\" class=\"tc-red-400\" i18n=\"@@noResultsFound\">No results were found.</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Select -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Select\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <mat-select [formControlName]=\"field.name!\" [multiple]=\"field.multiple\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" flex>\r\n                                <mat-option *ngFor=\"let option of $any(field.options)\" [value]=\"option.id\">{{option.name}}</mat-option>\r\n                            </mat-select>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Autocomplete -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Autocomplete\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <input type=\"text\" matInput [formControlName]=\"field.name!\" [min]=\"field.min\" [max]=\"field.max\" [matAutocomplete]=\"auto\" #autocompleteInput (input)=\"filterAutocomplete(field, autocompleteInput)\" autocomplete=\"off\" [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\r\n                            <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\">\r\n                                <mat-option *ngFor=\"let option of autocompleteFilteredOptions[field.name!]\" [value]=\"option.id\">\r\n                                    {{option.name}}\r\n                                </mat-option>\r\n                            </mat-autocomplete>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Date -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Date\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <input matInput [formControlName]=\"field.name!\" [min]=\"field.min\" [max]=\"field.max\" autocomplete=\"off\" [matDatepicker]=\"datePicker\" [matDatepickerFilter]=\"field.dateFilter\" [readonly]=\"readonly || field.forceSelect || (field.readonly && field.readonly(formValue, formGroup, context))\">\r\n                            <mat-datepicker-toggle matSuffix [for]=\"datePicker\"></mat-datepicker-toggle>\r\n                            <mat-datepicker #datePicker [disabled]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" (monthSelected)=\"handleDatePickerFilterAsync(datePicker, field, $event )\" (opened)=\"handleDatePickerOpened(datePicker, field)\" [calendarHeaderComponent]=\"datePickerHeaderComponent\"></mat-datepicker>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Calendar -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Calendar\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-calendar\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <input input=\"hidden\" hidden matInput [formControlName]=\"field.name!\">\r\n                            <mat-calendar #calendar [selected]=\"formGroup.get(field.name!)?.value\" (selectedChange)=\"formGroup.get(field.name!)?.setValue($event);\" (monthSelected)=\"handleCalendarFilterAsync(calendar, field, $event )\" [headerComponent]=\"datePickerHeaderComponent\" style=\"width: 100%;\"></mat-calendar>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\" layout-margin>{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n                    </ng-container>\r\n\r\n                    <!-- #region Checkbox -->\r\n                    <div *ngSwitchCase=\"FormFieldType.Checkbox\" [attr.flex]=\"field.flex||0\" class=\"mat-checkbox-wrap\" [class]=\"field.cssClass\">\r\n                        <mat-checkbox [formControlName]=\"field.name!\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">{{field.label}}</mat-checkbox>\r\n                        <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\" layout-margin>{{errorMessage}}</mat-error>\r\n                    </div>\r\n                    <!-- #endregion -->\r\n\r\n                    <!-- #region Editor -->\r\n                    <ng-container *ngSwitchCase=\"FormFieldType.Editor\">\r\n                        <ng-template *ngIf=\"editorTemplate?.templateRef!\" [ngTemplateOutlet]=\"editorTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n                    </ng-container>\r\n                    <!-- #endregion -->\r\n\r\n                    <!-- #region Code -->\r\n                    <ng-container *ngSwitchCase=\"FormFieldType.Code\">\r\n                        <ng-template *ngIf=\"codeTemplate?.templateRef!\" [ngTemplateOutlet]=\"codeTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n                    </ng-container>\r\n                    <!-- #endregion -->\r\n\r\n                    <!-- #region File -->\r\n                    <ng-container *ngSwitchCase=\"FormFieldType.File\">\r\n                        <mat-form-field [attr.flex]=\"field.flex||0\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <div vd-file-input [formControlName]=\"field.name!\" (select)=\"field.change && field.change(field, $event, formGroup, context)\" [accept]=\"field.fileExtensions\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" flex></div>\r\n                        </mat-form-field>\r\n                    </ng-container>\r\n                    <!-- #endregion -->\r\n\r\n                    <!-- #region Custom -->\r\n                    <ng-container *ngSwitchCase=\"FormFieldType.Custom\">\r\n                        <ng-template *ngIf=\"customTemplate?.templateRef!\" [ngTemplateOutlet]=\"customTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n                    </ng-container>\r\n                    <!-- #endregion -->\r\n                </ng-container>\r\n            </ng-container>\r\n\r\n            <!-- #region Template for custom fields -->\r\n            <ng-container *ngFor=\"let customField of customFieldsTemplates\">\r\n                <ng-template *ngIf=\"customField?.templateRef && customField.row == fields[0]?.row && customField.inline\" [ngTemplateOutlet]=\"customField?.templateRef!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n        </div>\r\n\r\n        <!-- #region Template for custom fields -->\r\n        <ng-container *ngIf=\"customFields\" [ngTemplateOutlet]=\"customFields\" [ngTemplateOutletContext]=\"{formGroup: formGroup, row: fields[0].row}\"></ng-container>\r\n        <ng-container *ngFor=\"let customField of customFieldsTemplates\">\r\n            <ng-template *ngIf=\"customField?.templateRef && customField.row == ((fields[0]?.row??0)+1) && !customField.inline\" [ngTemplateOutlet]=\"customField?.templateRef!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\r\n        </ng-container>\r\n        <!-- #endregion -->\r\n    </ng-container>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Form bottom -->\r\n    <ng-container *ngIf=\"bottom\" [ngTemplateOutlet]=\"bottom\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-container>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Template for suffix buttons -->\r\n    <ng-template #suffixButtons let-field>\r\n        <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n            <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n            </button>\r\n        </ng-container>\r\n    </ng-template>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Debug value -->\r\n    <code *ngIf=\"debugValue\">\r\n        <pre>{{formValue | json}}</pre>\r\n    </code>\r\n    <!-- #endregion -->\r\n</div>", styles: [".mat-checkbox-wrap mat-error{transform:translate(36px,-20px);max-width:93%;font-size:var(--mdc-typography-caption-font-size, 12px)}\n"] }]
+            args: [{ selector: 'vd-generic-form', template: "<div *ngIf=\"formGroup && fieldRows\" [formGroup]=\"formGroup\">\r\n    <!-- #region Fields -->\r\n    <ng-container *ngFor=\"let fields of fieldRows; let i = index\">\r\n        <div layout-gt-sm=\"row\" layout=\"column\">\r\n            <ng-container *ngFor=\"let field of fields\" [ngSwitch]=\"field.type\">\r\n                <ng-container *ngIf=\"!field.hidden && !(field.hide && field.hide(formValue, formGroup, context))\">\r\n                    <ng-container *ngIf=\"field.wrapped\">\r\n                        <!-- #region Text input -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Text\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <input [type]=\"field.inputType\" [minlength]=\"field.minLength||null\" [maxlength]=\"field.maxLength||null\" [min]=\"field.min\" [max]=\"field.max\" matInput [formControlName]=\"field.name!\" [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" [pattern]=\"(field.pattern??'')\" [onlyNumber]=\"(field.numbersOnly??false)\">\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any($any(formGroup.controls[field.name!]))['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Textarea -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.TextArea\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <textarea matInput [formControlName]=\"field.name!\" rows=\"field.rows||2\" [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"></textarea>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Enum -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Enum\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <vd-select [formControlName]=\"field.name!\" [enum]=\"field.enumType\" [enumFilter]=\"field.enumFilter | func:formValue:formGroup:context\" [optionValueProperty]=\"field.optionValueProperty\" [optionTextProperty]=\"field.optionTextProperty\" [defaultOption]=\"field.defaultOption??true\" [multiple]=\"field.multiple\" [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" [triggerCssClass]=\"field.triggerCssClass\" [triggerMode]=\"field.triggerMode\" layout=\"row\" flex>\r\n                                <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerTemplate\">\r\n                                    <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                                <ng-template vd-select-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n                                    <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                            </vd-select>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region VdSelect -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.VdSelect\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <vd-select [formControlName]=\"field.name!\" [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\" [params]=\"field.params??{} | func:formValue:formGroup:context\" [projection]=\"field.projection\" [mapper]=\"field.mapper\" [compareWith]=\"field.compareWith\" [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\" [optionValueProperty]=\"field.optionValueProperty\" [optionTextProperty]=\"field.optionTextProperty\" [defaultOption]=\"field.defaultOption??true\" [matIconKey]=\"field.optionMatIconProperty\" [svgIconKey]=\"field.optionSvgIconProperty\" [fontSet]=\"field.optionIconFontSet\" [multiple]=\"field.multiple\" [selectFirst]=\"field.selectFirst\" [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" [triggerCssClass]=\"field.triggerCssClass\" [triggerMode]=\"field.triggerMode\" (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\" (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\" layout=\"row\" flex>\r\n                                <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerTemplate\">\r\n                                    <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                                <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerMapper && field.multiple && field.triggerMode == 'chip'\">\r\n                                    <span *ngFor=\"let item of trigger\" class=\"mat-mdc-chip mat-mdc-standard-chip mat-primary mat-mdc-chip-selected\">\r\n                                        <span [innerHTML]=\"field.triggerMapper(item, formValue, formGroup, context)\"></span>\r\n                                    </span>\r\n                                </ng-template>\r\n                                <ng-template vd-select-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n                                    <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                            </vd-select>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region VdList -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.VdList\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-list\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <vd-list [formControlName]=\"field.name!\" [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\" [params]=\"field.params ??{} | func:formValue:formGroup:context\" [projection]=\"field.projection\" [mapper]=\"field.mapper\" [compareWith]=\"field.compareWith\" [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\" [optionValueProperty]=\"field.optionValueProperty\" [optionTextProperty]=\"field.optionTextProperty\" [multiple]=\"field.multiple\" [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\" (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\" [style.max-width]=\"field.maxWidth\" [style.max-height]=\"field.maxHeight\" flex>\r\n                                <ng-template vd-list-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n                                    <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                            </vd-list>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Chips -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Chips\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <mat-chip-grid #chipList [formControlName]=\"field.name!\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\r\n                                <mat-chip-row *ngFor=\"let chip of $any(formGroup.controls[field.name!])?.value\" (removed)=\"removeChip(field, chip)\" color=\"primary\" selectable=\"true\" selected>\r\n                                    <span>{{chip}}</span>\r\n                                    <button matChipRemove>\r\n                                        <mat-icon fontSet=\"material-symbols-outlined\">cancel</mat-icon>\r\n                                    </button>\r\n                                </mat-chip-row>\r\n                                <input [placeholder]=\"$any(field.label)\" #chipInput [matChipInputFor]=\"chipList\" [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\" [matAutocomplete]=\"chipAutocomplete\" (input)=\"filterAutocomplete(field, chipInput)\" (matChipInputTokenEnd)=\"addChip(field, $event)\" autocomplete=\"off\">\r\n                            </mat-chip-grid>\r\n                            <mat-autocomplete autoActiveFirstOption #chipAutocomplete=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\" (optionSelected)=\"autocompleteValueSelected(field, $event, chipInput)\">\r\n                                <mat-option *ngFor=\"let option of autocompleteFilteredOptions[field.name!]\" [value]=\"option.id\">\r\n                                    {{option.name}}\r\n                                </mat-option>\r\n                            </mat-autocomplete>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region VdChips -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.VdChips\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <vd-chips #vdChip [formControlName]=\"field.name!\" [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\" [params]=\"field.params || {} | func:formValue:formGroup:context\" [searchField]=\"field.searchField\" [classType]=\"field.classType\" [projection]=\"field.projection\" [key]=\"field.optionValueProperty\" [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" [removable]=\"!field.clear\" [context]=\"context\" [suffixButtons]=\"field.suffixButtons\" [autocompleteCssClass]=\"field.autocompleteCssClass\" (initSelect)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\" (selected)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\" (cleared)=\"field.clear && field.clear(formValue, formGroup, context);\" [customValue]=\"field.customValue\" layout=\"row\" flex>\r\n                                <ng-template vd-chip let-chip=\"chip\" *ngIf=\"field.chipTemplate\">\r\n                                    <div [outerHTML]=\"field.chipTemplate(chip, formValue, formGroup, context)\"></div>\r\n                                </ng-template>\r\n                                <ng-template vd-autocomplete-option let-option=\"option\" *ngIf=\"field.autocompleteTemplate\">\r\n                                    <div [outerHTML]=\"field.autocompleteTemplate(option, formValue, formGroup, context)\"></div>\r\n                                </ng-template>\r\n                            </vd-chips>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-hint *ngIf=\"vdChip.emptyResult\" class=\"tc-red-400\" i18n=\"@@noResultsFound\">No results were found.</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Select -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Select\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <mat-select [formControlName]=\"field.name!\" [multiple]=\"field.multiple\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" flex>\r\n                                <mat-option *ngFor=\"let option of $any(field.options)\" [value]=\"option.id\">{{option.name}}</mat-option>\r\n                            </mat-select>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Autocomplete -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Autocomplete\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <input type=\"text\" matInput [formControlName]=\"field.name!\" [min]=\"field.min\" [max]=\"field.max\" [matAutocomplete]=\"auto\" #autocompleteInput (input)=\"filterAutocomplete(field, autocompleteInput)\" autocomplete=\"off\" [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\r\n                            <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\">\r\n                                <mat-option *ngFor=\"let option of autocompleteFilteredOptions[field.name!]\" [value]=\"option.id\">\r\n                                    {{option.name}}\r\n                                </mat-option>\r\n                            </mat-autocomplete>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Date -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Date\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <input matInput [formControlName]=\"field.name!\" [min]=\"field.min\" [max]=\"field.max\" autocomplete=\"off\" [matDatepicker]=\"datePicker\" [matDatepickerFilter]=\"field.dateFilter\" [readonly]=\"readonly || field.forceSelect || (field.readonly && field.readonly(formValue, formGroup, context))\">\r\n                            <mat-datepicker-toggle matSuffix [for]=\"datePicker\"></mat-datepicker-toggle>\r\n                            <mat-datepicker #datePicker [disabled]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" (monthSelected)=\"handleDatePickerFilterAsync(datePicker, field, $event )\" (opened)=\"handleDatePickerOpened(datePicker, field)\" [calendarHeaderComponent]=\"datePickerHeaderComponent\"></mat-datepicker>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Calendar -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Calendar\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-calendar\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <input input=\"hidden\" hidden matInput [formControlName]=\"field.name!\">\r\n                            <mat-calendar #calendar [selected]=\"formGroup.get(field.name!)?.value\" (selectedChange)=\"formGroup.get(field.name!)?.setValue($event);\" (monthSelected)=\"handleCalendarFilterAsync(calendar, field, $event )\" [headerComponent]=\"datePickerHeaderComponent\" style=\"width: 100%;\"></mat-calendar>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\" layout-margin>{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n                    </ng-container>\r\n\r\n                    <!-- #region Checkbox -->\r\n                    <div *ngSwitchCase=\"FormFieldType.Checkbox\" [attr.flex]=\"field.flex||0\" class=\"mat-checkbox-wrap\" [class]=\"field.cssClass\">\r\n                        <mat-checkbox [formControlName]=\"field.name!\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">{{field.label}}</mat-checkbox>\r\n                        <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\" layout-margin>{{errorMessage}}</mat-error>\r\n                    </div>\r\n                    <!-- #endregion -->\r\n\r\n                    <!-- #region Editor -->\r\n                    <ng-container *ngSwitchCase=\"FormFieldType.Editor\">\r\n                        <ng-template *ngIf=\"editorTemplate?.templateRef!\" [ngTemplateOutlet]=\"editorTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n                    </ng-container>\r\n                    <!-- #endregion -->\r\n\r\n                    <!-- #region Code -->\r\n                    <ng-container *ngSwitchCase=\"FormFieldType.Code\">\r\n                        <ng-template *ngIf=\"codeTemplate?.templateRef!\" [ngTemplateOutlet]=\"codeTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n                    </ng-container>\r\n                    <!-- #endregion -->\r\n\r\n                    <!-- #region File -->\r\n                    <ng-container *ngSwitchCase=\"FormFieldType.File\">\r\n                        <mat-form-field [attr.flex]=\"field.flex||0\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <div vd-file-input [formControlName]=\"field.name!\" (select)=\"field.change && field.change(field, $event, formGroup, context)\" [accept]=\"field.fileExtensions\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" flex></div>\r\n                        </mat-form-field>\r\n                    </ng-container>\r\n                    <!-- #endregion -->\r\n\r\n                    <!-- #region Custom -->\r\n                    <ng-container *ngSwitchCase=\"FormFieldType.Custom\">\r\n                        <ng-template *ngIf=\"customTemplate?.templateRef!\" [ngTemplateOutlet]=\"customTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n                    </ng-container>\r\n                    <!-- #endregion -->\r\n                </ng-container>\r\n            </ng-container>\r\n\r\n            <!-- #region Template for custom fields -->\r\n            <ng-container *ngFor=\"let customField of customFieldsTemplates\">\r\n                <ng-template *ngIf=\"customField?.templateRef && customField.row == fields[0]?.row && customField.inline\" [ngTemplateOutlet]=\"customField?.templateRef!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n        </div>\r\n\r\n        <!-- #region Template for custom fields -->\r\n        <ng-container *ngIf=\"customFields\" [ngTemplateOutlet]=\"customFields\" [ngTemplateOutletContext]=\"{formGroup: formGroup, row: fields[0].row}\"></ng-container>\r\n        <ng-container *ngFor=\"let customField of customFieldsTemplates\">\r\n            <ng-template *ngIf=\"customField?.templateRef && customField.row == ((fields[0]?.row??0)+1) && !customField.inline\" [ngTemplateOutlet]=\"customField?.templateRef!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\r\n        </ng-container>\r\n        <!-- #endregion -->\r\n    </ng-container>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Form bottom -->\r\n    <ng-container *ngIf=\"bottom\" [ngTemplateOutlet]=\"bottom\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-container>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Template for suffix buttons -->\r\n    <ng-template #suffixButtons let-field>\r\n        <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n            <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n            </button>\r\n        </ng-container>\r\n    </ng-template>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Debug value -->\r\n    <code *ngIf=\"debugValue\">\r\n        <pre>{{formValue | json}}</pre>\r\n    </code>\r\n    <!-- #endregion -->\r\n</div>", styles: [".mat-checkbox-wrap mat-error{transform:translate(36px,-20px);max-width:93%;font-size:var(--mdc-typography-caption-font-size, 12px)}\n"] }]
         }], propDecorators: { formGroup: [{
                 type: Input
             }], classType: [{
@@ -24299,5 +24415,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AbstractMatFormField, ActionItem, Api, AppEvent, AppEventType, AppSetting, AppStorage, AsyncValidationDirective, AuditEntity, AuditUser, AuthHelper, AuthUser, BaseComponent, BaseDirective, BaseEntity, BaseInterceptor, BaseService, CachingInterceptor, Column, ColumnObject, Common, ContextHelper, DataSourceFilterDirective, DataSourcePipe, DatePickerHeaderComponent, DisableControlDirective, Display, DisplayNameNumberProjection, DisplayNameProjection, DynamicBuilder, DynamicComponentCompiler, EmptyStringResetDirective, EnumPipe, EnumService, EqualValidator, ErrorMessageBindingStrategy, EventQueueService, FileControlDirective, FileService, FileSizePipe, FilterClearComponent, FilterDateComponent, FilterInputComponent, FilterOperator, FilterPipe, FilterSelectComponent, FirstLetterPipe, Form, FormArrayPipe, FormBuilderConfiguration, FormControlPipe, FormDefinition, FormField, FormFieldDefinition, FormFieldGroup, FormFieldGroupDefinition, FormFieldType, FormGroupPipe, FuncPipe, GenericFormBaseComponent, GenericFormComponent, GenericListComponent, GenericReactiveFormComponent, GenericService, GlobalRoles, Grid, GroupFilterPipe, HtmlControlTemplateDirective, IAbstractControl, ImageFileControlDirective, IpVersion, KeyValue, KeysPipe, LoadingScreenInterceptor, LoadingScreenService, MatFormFieldEditorDirective, MatFormFieldReadonlyDirective, MaterialModule, Menu, MenuClient, MenuDepartment, MenuFormIncludesResolve, MenuItem, MenuItemClient, MenuItemDepartment, MenuItemFormIncludesResolve, MenuItemService, MenuListProjectionResolve, MenuResolve, MenuScope, MenuService, MenuSettings, MenuSettingsResolve, MessageType, MonthNamePipe, NameNumberProjection, NameProjection, NativeElementInjectorDirective, NestedPropertyNgModelDirective, NumericValueType, OnlyNumberDirective, OrderPipe, Pagination, PlaceholderPipe, PrintService, PropertyPipe, RUNTIME_COMPILER_PROVIDERS, ReactiveFormConfig, ReactiveTypedFormsModule, ResetFormType, RxFormArray, RxFormBuilder, RxFormControl, RxFormControlDirective, RxFormGroup, RxReactiveFormsModule, RxwebFormDirective, RxwebValidators, SafeHtmlPipe, Salutation, SaveAction, ServiceLocator, SplitPipe, SubMenuResolve, SuffixButton, Table, TableColumn, TableColumnConfig, TableColumnType, TableDataSource, TableDefinition, TableStaticDataSource, Templates, TimePipe, TitleCase, TitleProjection, TruncatePipe, TypedForm, TypedFormBuilder, UniqueValidatorDirective, UrlValidationType, Utils, ValidationAlphabetLocale, ValueAccessorBase, ValuesPipe, VdAlertDialogComponent, VdAutocompleteOptionDirective, VdBaseModule, VdChipDirective, VdChipsComponent, VdChipsModule, VdCodeDirective, VdCommonModule, VdConfirmDialogComponent, VdCustomDirective, VdDelayedHoverDirective, VdDialogActionsDirective, VdDialogComponent, VdDialogContentDirective, VdDialogService, VdDialogTitleDirective, VdDialogsModule, VdDynamicMenuComponent, VdDynamicTableComponent, VdDynamicTableConfigDialogComponent, VdEditorDirective, VdFileDirective, VdFileInputComponent, VdFileModule, VdFilterOptionDirective, VdFormsModule, VdGenericFormComponent, VdGenericFormCustomFieldDirective, VdHttpModule, VdLayoutCardOverComponent, VdLayoutCloseDirective, VdLayoutCompactComponent, VdLayoutComponent, VdLayoutFooterComponent, VdLayoutManageListCloseDirective, VdLayoutManageListComponent, VdLayoutManageListOpenDirective, VdLayoutManageListToggleDirective, VdLayoutModule, VdLayoutNavComponent, VdLayoutNavListCloseDirective, VdLayoutNavListComponent, VdLayoutNavListOpenDirective, VdLayoutNavListToggleDirective, VdLayoutOpenDirective, VdLayoutToggleDirective, VdListComponent, VdListModule, VdListOptionDirective, VdListToolbarComponent, VdMediaModule, VdMediaService, VdMediaToggleDirective, VdMenuComponent, VdMenuModule, VdNavigationDrawerComponent, VdNavigationDrawerMenuDirective, VdNavigationDrawerToolbarDirective, VdPromptDialogComponent, VdSearchModule, VdSelectComponent, VdSelectModule, VdSelectOptionDirective, VdSelectTriggerDirective, VdTableFieldDirective, VdTableModule, allOf, allOfAsync, alpha, alphaAsync, alphaNumeric, alphaNumericAsync, and, ascii, async, blacklist, choice, choiceAsync, compare, compose, contains, containsAsync, createCompiler, 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, formFieldGroupsMetadataKey, formFieldsMetadataKey, getEndpoint, getFormGroups, getTableDefinition, greaterThan, greaterThanAsync, greaterThanEqualTo, greaterThanEqualToAsync, grid, headerMetadataKey, hexColor, 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, mixinControlValueAccessor, mixinDisabled, model, noneOf, noneOfAsync, not, notEmpty, numeric, numericAsync, odd, oneOf, oneOfAsync, or, 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, ActionItem, Api, AppEvent, AppEventType, AppSetting, AppStorage, AsyncValidationDirective, AuditEntity, AuditUser, AuthHelper, AuthUser, BaseComponent, BaseDirective, BaseEntity, BaseInterceptor, BaseService, CachingInterceptor, Column, ColumnObject, Common, ContextHelper, DataSourceFilterDirective, DataSourcePipe, DatePickerHeaderComponent, DisableControlDirective, Display, DisplayNameNumberProjection, DisplayNameProjection, DynamicBuilder, DynamicComponentCompiler, EmptyStringResetDirective, EnumPipe, EnumService, EqualValidator, ErrorMessageBindingStrategy, EventQueueService, FileControlDirective, FileService, FileSizePipe, FilterClearComponent, FilterDateComponent, FilterInputComponent, FilterOperator, FilterPipe, FilterSelectComponent, FirstLetterPipe, Form, FormArrayPipe, FormBuilderConfiguration, FormControlPipe, FormDefinition, FormField, FormFieldDefinition, FormFieldGroup, FormFieldGroupDefinition, FormFieldType, FormGroupPipe, FuncPipe, GenericFormBaseComponent, GenericFormComponent, GenericListComponent, GenericReactiveFormComponent, GenericService, GlobalRoles, Grid, GroupFilterPipe, HtmlControlTemplateDirective, IAbstractControl, Icon, ImageFileControlDirective, IpVersion, KeyValue, KeysPipe, LoadingScreenInterceptor, LoadingScreenService, MatFormFieldEditorDirective, MatFormFieldReadonlyDirective, MaterialModule, Menu, MenuClient, MenuDepartment, MenuFormIncludesResolve, MenuItem, MenuItemClient, MenuItemDepartment, MenuItemFormIncludesResolve, MenuItemService, MenuListProjectionResolve, MenuResolve, MenuScope, MenuService, MenuSettings, MenuSettingsResolve, MessageType, MonthNamePipe, NameNumberProjection, NameProjection, NativeElementInjectorDirective, NestedPropertyNgModelDirective, NumericValueType, OnlyNumberDirective, OrderPipe, Pagination, PlaceholderPipe, PrintService, PropertyPipe, RUNTIME_COMPILER_PROVIDERS, ReactiveFormConfig, ReactiveTypedFormsModule, ResetFormType, RxFormArray, RxFormBuilder, RxFormControl, RxFormControlDirective, RxFormGroup, RxReactiveFormsModule, RxwebFormDirective, RxwebValidators, SafeHtmlPipe, Salutation, SaveAction, ServiceLocator, SplitPipe, SubMenuResolve, SuffixButton, Table, TableColumn, TableColumnConfig, TableColumnType, TableDataSource, TableDefinition, TableStaticDataSource, Templates, TimePipe, TitleCase, TitleProjection, TruncatePipe, TypedForm, TypedFormBuilder, UniqueValidatorDirective, UrlValidationType, Utils, ValidationAlphabetLocale, ValueAccessorBase, ValuesPipe, VdAlertDialogComponent, VdAutocompleteOptionDirective, VdBaseModule, VdChipDirective, VdChipsComponent, VdChipsModule, VdCodeDirective, VdCommonModule, VdConfirmDialogComponent, VdCustomDirective, VdDelayedHoverDirective, VdDialogActionsDirective, VdDialogComponent, VdDialogContentDirective, VdDialogService, VdDialogTitleDirective, VdDialogsModule, VdDynamicMenuComponent, VdDynamicTableComponent, VdDynamicTableConfigDialogComponent, VdEditorDirective, VdFileDirective, VdFileInputComponent, VdFileModule, VdFilterOptionDirective, VdFormsModule, VdGenericFormComponent, VdGenericFormCustomFieldDirective, VdHttpModule, VdLayoutCardOverComponent, VdLayoutCloseDirective, VdLayoutCompactComponent, VdLayoutComponent, VdLayoutFooterComponent, VdLayoutManageListCloseDirective, VdLayoutManageListComponent, VdLayoutManageListOpenDirective, VdLayoutManageListToggleDirective, VdLayoutModule, VdLayoutNavComponent, VdLayoutNavListCloseDirective, VdLayoutNavListComponent, VdLayoutNavListOpenDirective, VdLayoutNavListToggleDirective, VdLayoutOpenDirective, VdLayoutToggleDirective, VdListComponent, VdListModule, VdListOptionDirective, VdListToolbarComponent, VdMediaModule, VdMediaService, VdMediaToggleDirective, VdMenuComponent, VdMenuModule, VdNavigationDrawerComponent, VdNavigationDrawerMenuDirective, VdNavigationDrawerToolbarDirective, VdPromptDialogComponent, VdSearchModule, VdSelectComponent, VdSelectModule, VdSelectOptionDirective, VdSelectTriggerDirective, VdTableFieldDirective, VdTableModule, allOf, allOfAsync, alpha, alphaAsync, alphaNumeric, alphaNumericAsync, and, ascii, async, blacklist, choice, choiceAsync, compare, compose, contains, containsAsync, createCompiler, 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, formFieldGroupsMetadataKey, formFieldsMetadataKey, getEndpoint, getFormGroups, getTableDefinition, greaterThan, greaterThanAsync, greaterThanEqualTo, greaterThanEqualToAsync, grid, headerMetadataKey, hexColor, 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, mixinControlValueAccessor, mixinDisabled, model, noneOf, noneOfAsync, not, notEmpty, numeric, numericAsync, odd, oneOf, oneOfAsync, or, 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