@messaia/cdk 22.0.0 → 22.0.1-rc.1

package/fesm2022/messaia-cdk.mjs

@@ -12853,15 +12853,16 @@ function getEndpoint(origin) {
     /* Retrieve and return the endpoint metadata associated with the given class */
     return Reflect.getMetadata(endpointMetadataKey, origin);
 }
+
 /**
- * Gets the display header metadata from a class.
- *
- * @param origin - The class from which to retrieve the header metadata.
- * @returns The display header as a string.
+ * Retrieves the display name for a given property of an instance using metadata.
+ * @template T - The type of the instance.
+ * @param {T} instance - The instance from which to retrieve the display name.
+ * @param {string | symbol} propertyKey - The property key for which to retrieve the display name.
+ * @returns {string | undefined} - The display name if found; otherwise, undefined.
  */
-function getDisplay(origin) {
-    /* Retrieve and return the display header metadata associated with the given class */
-    return Reflect.getMetadata(headerMetadataKey, origin);
+function getDisplay(instance, propertyKey) {
+    return Reflect.getMetadata(headerMetadataKey, instance, propertyKey);
 }
 
 /**
@@ -12978,6 +12979,9 @@ class AppEvent {
     }
 }
 
+const TABLE_DEFINITION_METADATA_KEY = Symbol('msa-ng-cdk:table-definition');
+const TABLE_COLUMNS_METADATA_KEY = Symbol('msa-ng-cdk:table-columns');
+
 var Grid;
 (function (Grid) {
     Grid[Grid["All"] = 0] = "All";
@@ -12990,9 +12994,6 @@ var Grid;
     Grid[Grid["None"] = 7] = "None";
 })(Grid || (Grid = {}));
 
-const tableDefinitionMetadataKey = 'custom:vdTableDefinition';
-const tableColumnsMetadataKey = 'custom:vdTableColumns';
-
 var TableColumnType;
 (function (TableColumnType) {
     TableColumnType[TableColumnType["None"] = 0] = "None";
@@ -13056,6 +13057,11 @@ class TableColumn {
      * @property
      */
     display;
+    /**
+     * Cached classes for responsive display visibility.
+     * @property
+     */
+    displayNgClass;
     /**
      * Endpoint for additional data retrieval.
      * @property
@@ -13287,338 +13293,123 @@ class TableColumn {
 }
 
 /**
- * Class representing the structure and behavior of a table definition.
- * It defines various configurations such as column settings, actions,
- * and callbacks for rows and data handling.
- *
+ * Manual creator function to define a column in a table programmatically.
+ * It sets various properties and behaviors for the column without using decorators.
  * @template T - The type of data represented in the table rows.
+ * @param {string} propertyKey - The property key to bind the column to.
+ * @param {Partial<TableColumn<T>>} [args] - Partial configuration for the table column.
+ * @param {string} [propertyType] - Optional explicit type (e.g., 'string', 'number', 'date', 'boolean', 'array') to drive defaults.
+ * @param {any} [target] - Optional target prototype object for custom display text extraction.
+ * @returns {TableColumn<T>} - The fully constructed and initialized TableColumn instance.
  */
-class TableDefinition {
-    /**
-     * @property endpoint
-     * @description API endpoint from which table data will be fetched.
-     * @type {string}
-     */
-    endpoint = '';
-    /**
-     * @property projection
-     * @description Optional projection for specifying which fields should be included
-     * in the fetched data. Can be a single string or an array of field names.
-     * @type {string | string[]}
-     */
-    projection;
-    /**
-     * @property includes
-     * @description Optional array of related data entities (includes) to be retrieved along
-     * with the main data set.
-     * @type {string[]}
-     */
-    includes;
-    /**
-     * @property showAction
-     * @description Flag to indicate if action columns (e.g., edit, delete buttons)
-     * should be displayed in the table. Defaults to `true`.
-     * @type {boolean}
-     */
-    showAction = true;
-    /**
-     * @property selectable
-     * @description Flag to indicate if rows can be selected (e.g., with checkboxes).
-     * Defaults to `true`.
-     * @type {boolean}
-     */
-    selectable = true;
-    /**
-     * @property addable
-     * @description Flag to indicate if new items can be added to the table.
-     * Defaults to `true`.
-     * @type {boolean}
-     */
-    addable = true;
-    /**
-     * @property editable
-     * @description Flag to indicate if rows can be edited. Defaults to `true`.
-     * @type {boolean}
-     */
-    editable = true;
-    /**
-     * @property deletable
-     * @description Flag to indicate if rows can be deleted. Defaults to `true`.
-     * @type {boolean}
-     */
-    deletable = true;
-    /**
-     * @property downloadable
-     * @description Flag to indicate if table data can be downloaded (e.g., as CSV or Excel).
-     * @type {boolean}
-     */
-    downloadable;
-    /**
-     * @property duplicable
-     * @description Flag to indicate if rows can be duplicated.
-     * @type {boolean}
-     */
-    duplicable;
-    /**
-     * @property exportable
-     * @description Determines if the table is exportable.
-     * @type {boolean}
-     */
-    exportable = true;
-    /**
-     * @property exportFileName
-     * @description The name of the file to export.
-     * @type {string}
-     */
-    exportFileName;
-    /**
-     * @property sticky
-     * @description Flag to indicate whether the table headers or columns should stick
-     * to the viewport during scrolling. Defaults to `false`.
-     * @type {boolean}
-     */
-    sticky = false;
-    /**
-     * @property columns
-     * @description Array of table columns that define the structure and data types
-     * of each column in the table.
-     * @type {TableColumn<T>[]}
-     */
-    columns = [];
-    /**
-     * @property hideColumns
-     * @description Optional array of column keys that should be hidden from view.
-     * @type {string[]}
-     */
-    hideColumns;
-    /**
-     * @property rowNgClass
-     * @description Function to dynamically assign CSS classes to rows based on the row data
-     * and context. Can be used for conditional row styling.
-     * @type {(x?: T, ctx?: IGenericListComponent<T>) => any}
-     */
-    rowNgClass;
-    /**
-     * @property rowClick
-     * @description Callback function for handling row click events.
-     * Invoked when a row is clicked.
-     * @type {(x?: T, ctx?: IGenericListComponent<T>) => any}
-     */
-    rowClick;
-    /**
-     * @property onEdit
-     * @description Callback function for handling edit actions.
-     * Invoked when the edit button is clicked for a row.
-     * @type {(x?: T, ctx?: IGenericListComponent<T>) => any}
-     */
-    onEdit;
-    /**
-     * @property detailsTemplate
-     * @description Name of the template to use for displaying additional row details.
-     * @type {string}
-     */
-    detailsTemplate;
-    /**
-     * @property actions
-     * @description Array of action items (e.g., custom buttons) available for each row in the table.
-     * Actions can be context-sensitive based on the row data and table context.
-     * @type {ActionItem<T, IGenericListComponent<T>>[]}
-     */
-    actions = [];
-    /**
-     * @property columnSets
-     * @description Used to display specific columns in the table.
-     * This array defines sets of columns that can be shown
-     * based on the active configuration, allowing for dynamic table
-     * column customization.
-     * @type {string[]}
-     */
-    columnSets = [];
-    /**
-     * Constructor for initializing the table definition with optional values.
-     * Merges the provided initialization object with default properties.
-     *
-     * @param init - Optional partial table definition to initialize values.
-     */
-    constructor(init) {
-        Object.assign(this, init);
-    }
-}
-
-/**
- * Gets classes decoarated with @Table
- * @param origin
- * @returns
- */
-function getTableDefinition(origin) {
-    /* Save the table defintion in the metadata */
-    var tableDefinition = Reflect.getMetadata(tableDefinitionMetadataKey, origin) ?? new TableDefinition({});
-    if (tableDefinition) {
-        /* Set column in the table definition */
-        tableDefinition.columns = Reflect.getMetadata(tableColumnsMetadataKey, Reflect.construct(origin, []))
-            ?.filter((x) => !x.hidden && !tableDefinition.hideColumns?.some(y => y.trim() == x.name.trim()));
-        /* Sort the columns by index */
-        Utils.sortArray(tableDefinition.columns || [], 'index');
-        /* Set endpoint from the decorator @Api, if any */
-        var endpoint = Reflect.getMetadata(endpointMetadataKey, origin);
-        if (endpoint) {
-            tableDefinition.endpoint = endpoint;
+function buildColumn(propertyKey, args, propertyType, target) {
+    /* Create a new instance of TableColumn with the provided arguments */
+    let tableColumn = new TableColumn(args);
+    /* Set default values for the table column properties */
+    tableColumn.name ||= propertyKey;
+    tableColumn.header ||= (target ? getDisplay(target, propertyKey) : null) || tableColumn.name;
+    tableColumn.filter ||= tableColumn.name;
+    tableColumn.sortBy ||= tableColumn.name;
+    tableColumn.content ||= (row) => {
+        /* Get content using property name */
+        var content = Utils.getPropertyValue(row, tableColumn.name);
+        /* Truncate the text if content length is specified */
+        if ((tableColumn?.contentLength ?? 0) > 0) {
+            return Utils.truncateText(content, tableColumn.contentLength);
+        }
+        return content;
+    };
+    tableColumn.configurable = args?.configurable === undefined ? true : args.configurable;
+    tableColumn.display ||= Grid.All;
+    /* Set type to 'Menu' if menu is specified */
+    if (tableColumn.menu) {
+        tableColumn.type ||= TableColumnType.Menu;
+    }
+    /* Set type to 'Icon' if icon is specified */
+    else if (tableColumn.icon) {
+        tableColumn.type ||= TableColumnType.Icon;
+    }
+    /* Set type to 'IconButton' if iconButton is specified */
+    else if (tableColumn.iconButton) {
+        tableColumn.type ||= TableColumnType.IconButton;
+    }
+    /* Set type to enum, if enum type is specified */
+    else if (tableColumn.enumType) {
+        tableColumn.type ||= TableColumnType.Enum;
+        tableColumn.multiple = propertyType?.trim()?.toLowerCase() == 'array';
+    }
+    /* Otherwise, set type depending on property type */
+    else {
+        switch (propertyType?.toLowerCase()) {
+            case 'number':
+                tableColumn.inputType ||= 'number';
+                tableColumn.type ||= TableColumnType.Number;
+                tableColumn.filterOperator = tableColumn.filterOperator != undefined
+                    ? tableColumn.filterOperator
+                    : FilterOperator.Contains;
+                break;
+            case 'date':
+                tableColumn.inputType ||= 'date';
+                tableColumn.type ||= TableColumnType.Date;
+                tableColumn.maxWidth ||= 115;
+                tableColumn.arrowBefore = tableColumn.arrowBefore !== undefined ? tableColumn.arrowBefore : true;
+                break;
+            case 'boolean':
+                tableColumn.type ||= TableColumnType.Toggle;
+                tableColumn.options ||= [{ id: false, name: $localize `:@@no:No` }, { id: true, name: $localize `:@@yes:Yes` }];
+                tableColumn.maxWidth ||= 70;
+                if (tableColumn.type == TableColumnType.Text) {
+                    tableColumn.content = (row) => {
+                        /* Get content using property name */
+                        var content = Utils.getPropertyValue(row, tableColumn.name);
+                        if (content != null) {
+                            return content ? $localize `:@@yes:Yes` : $localize `:@@no:No`;
+                        }
+                        return null;
+                    };
+                }
+                break;
+            /* Default to text type for all other property types */
+            default:
+                tableColumn.type ||= TableColumnType.Text;
+                break;
         }
     }
-    return tableDefinition;
+    /* Set width to minWidth if width is not specified */
+    return tableColumn;
 }
 
 /**
- * Class decorator to create a mat-table
- * @param tableDefinition
- * @returns
- */
-function Table(tableDefinition) {
-    return function (target) {
-        if (tableDefinition?.columns) {
-            /* Add action menus from table definition, if any */
-            var actionColmun = tableDefinition.columns?.find(x => x.name == 'action');
-            if (!actionColmun) {
-                actionColmun = new TableColumn({
-                    index: 2000,
-                    name: 'action',
-                    columnSets: ['action', 'common'],
-                    type: TableColumnType.Action,
-                    disabled: true,
-                    rowMenuItems: actions,
-                    configurable: false,
-                    stickyEnd: true
-                });
-                /* Add the action column into the table columns */
-                tableDefinition.columns.push(actionColmun);
-            }
-            /* Get custom action, if any */
-            var actions = tableDefinition?.actions;
-            if (actions != null && actionColmun != null) {
-                actionColmun.rowMenuItems ??= [];
-                actions.forEach(y => actionColmun.rowMenuItems.push(y));
-            }
-        }
-        /* Save the table defintion in the metadata */
-        Reflect.defineMetadata(tableDefinitionMetadataKey, tableDefinition, target);
-    };
-}
-/**
- * Property decorator to create table columns
- * @param args
- * @returns
+ * Property decorator to define a column in a table.
+ * It sets various properties and behaviors for the column,
+ * including its name, type, display settings, and associated actions.
+ * @template T - The type of data represented in the table rows.
+ * @param {Partial<TableColumn<T>>} args - Partial configuration for the table column.
+ * @returns {Function} - A decorator function that modifies the target property.
  */
 function Column(args) {
     return function (target, propertyKey) {
-        let tableColumn = new TableColumn(args);
-        tableColumn.name ||= propertyKey;
-        tableColumn.header ||= Reflect.getMetadata(headerMetadataKey, target, propertyKey) || tableColumn.name;
-        tableColumn.filter ||= tableColumn.name;
-        tableColumn.sortBy ||= tableColumn.name;
-        tableColumn.content ||= (row) => {
-            /* Get content using property name */
-            var content = Utils.getPropertyValue(row, tableColumn.name);
-            /* Truncate the text if content length is specified */
-            if ((tableColumn?.contentLength ?? 0) > 0) {
-                return Utils.truncateText(content, tableColumn.contentLength);
-            }
-            return content;
-        };
-        tableColumn.configurable = args?.configurable === undefined ? true : args.configurable;
-        tableColumn.display ||= Grid.All;
-        /* Set type to 'Menu' if menu is specified */
-        if (tableColumn.menu) {
-            tableColumn.type ||= TableColumnType.Menu;
-        }
-        /* Set type to 'Icon' if icon is specified */
-        else if (tableColumn.icon) {
-            tableColumn.type ||= TableColumnType.Icon;
-        }
-        /* Set type to 'IconButton' if iconButton is specified */
-        else if (tableColumn.iconButton) {
-            tableColumn.type ||= TableColumnType.IconButton;
-        }
-        /* Set type to enum, if enum type is specified */
-        else if (tableColumn.enumType) {
-            tableColumn.type ||= TableColumnType.Enum;
-            tableColumn.multiple = Reflect.getMetadata("design:type", target, propertyKey)?.name?.trim()?.toLowerCase() == 'array';
-        }
-        /* Otherwiese, set type depending on property type */
-        else {
-            /* Get property type */
-            var propertyType = Reflect.getMetadata("design:type", target, propertyKey)?.name;
-            switch (propertyType?.toLowerCase()) {
-                case 'number':
-                    tableColumn.inputType ||= 'number';
-                    tableColumn.type ||= TableColumnType.Number;
-                    tableColumn.filterOperator = tableColumn.filterOperator != undefined ? tableColumn.filterOperator : FilterOperator.Contains;
-                    break;
-                case 'date':
-                    tableColumn.inputType ||= 'date';
-                    tableColumn.type ||= TableColumnType.Date;
-                    tableColumn.maxWidth ||= 115;
-                    tableColumn.arrowBefore = tableColumn.arrowBefore !== undefined ? tableColumn.arrowBefore : true;
-                    break;
-                case 'boolean':
-                    tableColumn.type ||= TableColumnType.Toggle;
-                    tableColumn.options ||= [{ id: false, name: $localize `:@@no:No` }, { id: true, name: $localize `:@@yes:Yes` }];
-                    tableColumn.maxWidth ||= 70;
-                    if (tableColumn.type == TableColumnType.Text) {
-                        tableColumn.content = (row) => {
-                            /* Get content using property name */
-                            var content = Utils.getPropertyValue(row, tableColumn.name);
-                            if (content != null) {
-                                return content ? $localize `:@@yes:Yes` : $localize `:@@no:No`;
-                            }
-                            return null;
-                        };
-                    }
-                    break;
-                default:
-                    tableColumn.type ||= TableColumnType.Text;
-                    break;
-            }
-        }
-        if (tableColumn.maxWidth) {
-            tableColumn.width ||= tableColumn.maxWidth;
-        }
+        /* Resolve the design:type metadata from the decorator target */
+        const designType = Reflect.getMetadata("design:type", target, propertyKey)?.name;
         /* Get old table columns */
-        let previousTableColumns = Reflect.getMetadata(tableColumnsMetadataKey, target);
+        let previousTableColumns = Reflect.getMetadata(TABLE_COLUMNS_METADATA_KEY, target);
+        /* Override the field with the args, if exists */
+        const previousTableColumn = previousTableColumns?.find(x => x.name == propertyKey);
+        const tableColumnArgs = previousTableColumn
+            ? Object.assign({}, previousTableColumn, args)
+            : args;
+        /* Build the structural column using the factory method */
+        let tableColumn = buildColumn(propertyKey, tableColumnArgs, designType, target);
         /* Override the field, if exists */
         previousTableColumns = previousTableColumns?.filter(x => x.name != tableColumn.name);
-        /* Create a copy of the result */
-        let tableColumns = previousTableColumns ? previousTableColumns.concat([tableColumn]) : [tableColumn];
-        /* Set column index */
-        tableColumns.forEach((x, i) => x.index ??= i);
-        /* Sort the columns by index */
-        Utils.sortArray(tableColumns, 'index');
-        /* Override the result in the metadata */
-        Reflect.defineMetadata(tableColumnsMetadataKey, tableColumns, target);
-    };
-}
-/**
- * Decorator function to define columns for a table object.
- * @param type The constructor function of the table object.
- * @returns A decorator function.
- */
-function ColumnObject(type) {
-    return function (target, propertyKey) {
-        /* Retrieve table definition */
-        var tableDef = getTableDefinition(type);
-        /* Retrieve columns from the table definition */
-        var columns = tableDef.columns;
-        /* Update column names with property key prefix */
-        columns?.forEach(x => x.name = `${propertyKey}.${x.name}`);
-        /* Get existing table columns from metadata */
-        let previousTableColumns = Reflect.getMetadata(tableColumnsMetadataKey, target);
-        /* Create a copy of the existing columns array and append new columns */
-        let tableColumns = previousTableColumns ? previousTableColumns.concat(columns ?? []) : [];
-        /* Set column index if not already set */
+        /* Create a copy of the result */
+        let tableColumns = previousTableColumns ? previousTableColumns.concat([tableColumn]) : [tableColumn];
+        /* Set column index */
         tableColumns.forEach((x, i) => x.index ??= i);
         /* Sort the columns by index */
         Utils.sortArray(tableColumns, 'index');
-        /* Override the table columns in the metadata */
-        Reflect.defineMetadata(tableColumnsMetadataKey, tableColumns, target);
+        /* Override the result in the metadata */
+        Reflect.defineMetadata(TABLE_COLUMNS_METADATA_KEY, tableColumns, target);
     };
 }
 
@@ -17402,6 +17193,188 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                 type: Input
             }] } });
 
+/**
+ * Class representing the structure and behavior of a table definition.
+ * It defines various configurations such as column settings, actions,
+ * and callbacks for rows and data handling.
+ *
+ * @template T - The type of data represented in the table rows.
+ */
+class TableDefinition {
+    /**
+     * @property endpoint
+     * @description API endpoint from which table data will be fetched.
+     * @type {string}
+     */
+    endpoint = '';
+    /**
+     * @property projection
+     * @description Optional projection for specifying which fields should be included
+     * in the fetched data. Can be a single string or an array of field names.
+     * @type {string | string[]}
+     */
+    projection;
+    /**
+     * @property includes
+     * @description Optional array of related data entities (includes) to be retrieved along
+     * with the main data set.
+     * @type {string[]}
+     */
+    includes;
+    /**
+     * @property showAction
+     * @description Flag to indicate if action columns (e.g., edit, delete buttons)
+     * should be displayed in the table. Defaults to `true`.
+     * @type {boolean}
+     */
+    showAction = true;
+    /**
+     * @property selectable
+     * @description Flag to indicate if rows can be selected (e.g., with checkboxes).
+     * Defaults to `true`.
+     * @type {boolean}
+     */
+    selectable = true;
+    /**
+     * @property addable
+     * @description Flag to indicate if new items can be added to the table.
+     * Defaults to `true`.
+     * @type {boolean}
+     */
+    addable = true;
+    /**
+     * @property editable
+     * @description Flag to indicate if rows can be edited. Defaults to `true`.
+     * @type {boolean}
+     */
+    editable = true;
+    /**
+     * @property deletable
+     * @description Flag to indicate if rows can be deleted. Defaults to `true`.
+     * @type {boolean}
+     */
+    deletable = true;
+    /**
+     * @property downloadable
+     * @description Flag to indicate if table data can be downloaded (e.g., as CSV or Excel).
+     * @type {boolean}
+     */
+    downloadable;
+    /**
+     * @property duplicable
+     * @description Flag to indicate if rows can be duplicated.
+     * @type {boolean}
+     */
+    duplicable;
+    /**
+     * @property exportable
+     * @description Determines if the table is exportable.
+     * @type {boolean}
+     */
+    exportable = true;
+    /**
+     * @property exportFileName
+     * @description The name of the file to export.
+     * @type {string}
+     */
+    exportFileName;
+    /**
+     * @property sticky
+     * @description Flag to indicate whether the table headers or columns should stick
+     * to the viewport during scrolling. Defaults to `false`.
+     * @type {boolean}
+     */
+    sticky = false;
+    /**
+     * @property columns
+     * @description Array of table columns that define the structure and data types
+     * of each column in the table.
+     * @type {TableColumn<T>[]}
+     */
+    columns = [];
+    /**
+     * @property hideColumns
+     * @description Optional array of column keys that should be hidden from view.
+     * @type {string[]}
+     */
+    hideColumns;
+    /**
+     * @property rowNgClass
+     * @description Function to dynamically assign CSS classes to rows based on the row data
+     * and context. Can be used for conditional row styling.
+     * @type {(x?: T, ctx?: IGenericListComponent<T>) => any}
+     */
+    rowNgClass;
+    /**
+     * @property rowClick
+     * @description Callback function for handling row click events.
+     * Invoked when a row is clicked.
+     * @type {(x?: T, ctx?: IGenericListComponent<T>) => any}
+     */
+    rowClick;
+    /**
+     * @property onEdit
+     * @description Callback function for handling edit actions.
+     * Invoked when the edit button is clicked for a row.
+     * @type {(x?: T, ctx?: IGenericListComponent<T>) => any}
+     */
+    onEdit;
+    /**
+     * @property detailsTemplate
+     * @description Name of the template to use for displaying additional row details.
+     * @type {string}
+     */
+    detailsTemplate;
+    /**
+     * @property actions
+     * @description Array of action items (e.g., custom buttons) available for each row in the table.
+     * Actions can be context-sensitive based on the row data and table context.
+     * @type {ActionItem<T, IGenericListComponent<T>>[]}
+     */
+    actions = [];
+    /**
+     * @property columnSets
+     * @description Used to display specific columns in the table.
+     * This array defines sets of columns that can be shown
+     * based on the active configuration, allowing for dynamic table
+     * column customization.
+     * @type {string[]}
+     */
+    columnSets = [];
+    /**
+     * Constructor for initializing the table definition with optional values.
+     * Merges the provided initialization object with default properties.
+     *
+     * @param init - Optional partial table definition to initialize values.
+     */
+    constructor(init) {
+        Object.assign(this, init);
+    }
+}
+
+/**
+ * Gets classes decoarated with @Table
+ * @param origin
+ * @returns
+ */
+function getTableDefinition(origin) {
+    /* Save the table defintion in the metadata */
+    var tableDefinition = Reflect.getMetadata(TABLE_DEFINITION_METADATA_KEY, origin) ?? new TableDefinition({});
+    if (tableDefinition) {
+        /* Set column in the table definition */
+        tableDefinition.columns = Reflect.getMetadata(TABLE_COLUMNS_METADATA_KEY, Reflect.construct(origin, []))
+            ?.filter((x) => !x.hidden && !tableDefinition.hideColumns?.some(y => y.trim() == x.name.trim()));
+        /* Sort the columns by index */
+        Utils.sortArray(tableDefinition.columns || [], 'index');
+        /* Set endpoint from the decorator @Api, if any */
+        var endpoint = Reflect.getMetadata(endpointMetadataKey, origin);
+        if (endpoint) {
+            tableDefinition.endpoint = endpoint;
+        }
+    }
+    return tableDefinition;
+}
+
 /**
  * A generic datasource class for working with data-tables in Angular Material.
  * This class extends MatTableDataSource to provide additional functionality like
@@ -18791,6 +18764,10 @@ class VdDynamicTableComponent {
     updateColumns() {
         /* Sort the columns by index */
         Utils.sortArray(this.columns || [], 'index');
+        /* Cache responsive display classes once per column */
+        this.columns?.forEach(column => {
+            column.displayNgClass = this.getDisplayClasses(column);
+        });
         /* Trigger changes */
         this.columnsSubject.next(this.columns);
     }
@@ -18946,20 +18923,47 @@ class VdDynamicTableComponent {
         keys.slice(0, -1).reduce((acc, key) => acc && acc[key], row)[keys[keys.length - 1]] = value;
     }
     /**
-     * Gets row classes
-     * @param column
-     * @param row
-     * @returns
+     * Retrieves the display setting for a given column, which can be either a static value or a function.
+     * If the display property is a function, it will be invoked with the current column sets and context.
+     * @param column - The TableColumn object for which to retrieve the display setting.
+     * @returns The display setting for the column, which can be a Grid value or undefined.
+     */
+    getColumnDisplay(column) {
+        /* If the display property is a function, invoke it with the current column sets and context */
+        if (typeof column.display === 'function') {
+            return column.display(this.columnSets || [], this.context);
+        }
+        return column.display;
+    }
+    /**
+     * Computes the CSS classes for a column based on its display setting.
+     * It maps the display value to corresponding CSS classes that control visibility and layout.
+     * @param column - The TableColumn object for which to compute the display classes.
+     * @returns An object containing CSS class names as keys and boolean values indicating whether the class should be applied.
+     */
+    getDisplayClasses(column) {
+        /* Retrieve the display setting for the column, which may be a static value or computed dynamically. */
+        const display = this.getColumnDisplay(column);
+        /* Return an object mapping display values to CSS classes, allowing for responsive visibility control. */
+        return {
+            'gt-xs': display == Grid.Xs,
+            'gt-sm': display == Grid.Sm,
+            'gt-md': display == Grid.Md,
+            'gt-lg': display == Grid.Lg,
+            'gt-xl': display == Grid.Xl,
+            'gt-xxl': display == Grid.Xxl,
+            'hidden': display == Grid.None,
+        };
+    }
+    /**
+     * Computes the CSS classes for a specific row based on the column's display settings and any additional classes defined.
+     * It combines the column's display classes, any custom classes defined in `cellNgClass`, and a 'text-right' class if `arrowBefore` is true.
+     * @param column - The TableColumn object for which to compute the row classes.
+     * @param row - The data object representing the current row.
+     * @returns An object containing CSS class names as keys and boolean values indicating whether the class should be applied.
      */
     getRowClasses(column, row) {
-        return Object.assign({
-            'gt-xs': column.display == Grid.Xs,
-            'gt-sm': column.display == Grid.Sm,
-            'gt-md': column.display == Grid.Md,
-            'gt-lg': column.display == Grid.Lg,
-            'gt-xl': column.display == Grid.Xl,
-            'gt-xxl': column.display == Grid.Xxl,
-            'hidden': column.display == Grid.None,
+        return Object.assign({}, column.displayNgClass || this.getDisplayClasses(column), {
             'text-right': column.arrowBefore
         }, column.cellNgClass ? column.cellNgClass(row, this.context) : {});
     }
@@ -19004,7 +19008,7 @@ class VdDynamicTableComponent {
         this.changeDetector.detectChanges();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: VdDynamicTableComponent, deps: [{ token: DynamicBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: VdDynamicTableComponent, isStandalone: true, selector: "vd-dynamic-table", inputs: { dataSource: "dataSource", data: "data", parentControl: "parentControl", entityObject: "entityObject", formArray: "formArray", debugValue: "debugValue", classType: "classType", context: "context", dataSourceFilter: "dataSourceFilter", static: "static", filterable: "filterable", sticky: "sticky", tableWidth: "tableWidth", useFilterOperator: "useFilterOperator", paginable: "paginable", selectable: "selectable", sortActive: "sortActive", sortDirection: "sortDirection", stickyHeader: "stickyHeader", stickyFilter: "stickyFilter", columnSets: "columnSets", rowNgClass: "rowNgClass", detailsTemplate: "detailsTemplate", readonly: "readonly", selectAllFilter: "selectAllFilter", paginatorRef: "paginatorRef", columns: "columns", rowMenuItems: "rowMenuItems", rowAction: "rowAction", excludedColumns: "excludedColumns", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions" }, outputs: { rowClick: "rowClick" }, queries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true }, { propertyName: "matSort", first: true, predicate: MatSort, descendants: true, static: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, static: true }, { propertyName: "detailsTemplateRef", predicate: ["detailsTemplate"], descendants: true, read: ViewContainerRef }, { propertyName: "rowContextMenuTriggers", predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "@if (!static) {\r\n    <div class=\"loading-progress\">\r\n        @if (dataSource?.isLoading) {\r\n            <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\r\n        }\r\n    </div>\r\n}\r\n\r\n<!-- #region Data table -->\r\n<div class=\"mat-table-container scrollbar-secondary\" [ngClass]=\"{'mat-table-sticky': sticky}\" #scrollContainer>\r\n    <table mat-table #table [dataSource]=\"dataSource\" [dataSourceFilter]=\"dataSourceFilter\" [ngClass]=\"{'table-fixed': !sticky && !detailsTemplate && !templateRef, 'table-stick': sticky}\" [trackBy]=\"trackBy\" matSort matSortDisableClear [matSortActive]=\"sortActive||'id'\" [matSortDirection]=\"sortDirection\" multiTemplateDataRows>\r\n        @for (column of columns$ | async; track columnsTrackBy($index, column)) {\r\n            <!-- #region Column def -->\r\n            <ng-container [cdkColumnDef]=\"column.name\" [sticky]=\"column.sticky\" [stickyEnd]=\"column.stickyEnd\">\r\n                <ng-template #header [ngTemplateOutlet]=\"header\" let-headerText=\"headerText\" [ngTemplateOutletContext]=\"{headerText: column.header | func:context}\">\r\n                    <th mat-header-cell *cdkHeaderCellDef [mat-sort-header]=\"column.sortBy || column.name\" [hidden]=\"column.hidden\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\" [disabled]=\"column.type == ColumnType.Checkbox || column.disabled\" [ngClass]=\"{'gt-xs': column.display == Grid.Xs, 'gt-sm': column.display == Grid.Sm, 'gt-md': column.display == Grid.Md, 'gt-lg': column.display == Grid.Lg, 'gt-xl': column.display == Grid.Xl, 'gt-xxl': column.display == Grid.Xxl, 'hidden': column.display == Grid.None}\" [arrowPosition]=\"column.arrowBefore?'before':'after'\">\r\n                        @if (column.type == ColumnType.Checkbox) {\r\n                            <mat-checkbox (change)=\"$event ? dataSource.toggleSelect($event, selectAllFilter) : null\" [disabled]=\"!dataSource.paginator?.length\" [checked]=\"dataSource.selectionModel.hasValue() && dataSource.isAllSelected()\" [indeterminate]=\"dataSource.selectionModel.hasValue() && !dataSource.isAllSelected()\"></mat-checkbox>\r\n                        } @if (column.type != ColumnType.Checkbox) {\r\n                            <span [matTooltip]=\"headerText\">{{headerText}}</span>\r\n                        }\r\n                    </th>\r\n                </ng-template>\r\n                <td mat-cell *cdkCellDef=\"let row; let rowIndex = dataIndex\" [matTooltip]=\"column.tooltip?column.tooltip(row, undefined, context):null\" [matTooltipClass]=\"column.tooltipClass??''\" [hidden]=\"column.hidden\" [ngClass]=\"getRowClasses(column, row)\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\">\r\n                    <ng-template #rowVal [ngTemplateOutlet]=\"rowVal\" let-rowValue [ngTemplateOutletContext]=\"{$implicit: column?.content && column?.content(row, undefined, context)}\">\r\n                        @switch (column.type) {\r\n                            <!-- #region Checkbox column -->\r\n                            @case (ColumnType.Checkbox) {\r\n                                <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? dataSource.selectionModel.toggle(row) : null\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" [checked]=\"dataSource.selectionModel.isSelected(row)\"></mat-checkbox>\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region Enum column -->\r\n                            @case (ColumnType.Enum) {\r\n                                <span>\r\n                                    @if (column.enumMetadata) {\r\n                                        @if (column.multiple) {\r\n                                            @for (item of rowValue; track item; let i = $index) {\r\n                                                @if (i < 2) {\r\n                                                    <ng-template let-displayValue=\"displayValue\" [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ displayValue: column.enumMetadata[item].display }\"></ng-template>\r\n                                                }\r\n                                                @if (i === 1 && rowValue?.length > 2) {\r\n                                                    <small [matTooltip]=\"(rowValue | slice:2 | map:column.enumMetadata | map:'display') | join:'\\n'\" matTooltipClass=\"mat-tooltip-multiline\">...</small>\r\n                                                }\r\n                                            }\r\n                                            <ng-template #template let-displayValue=\"displayValue\">\r\n                                                <mat-chip-row disableRipple=\"true\" selectable=\"false\" [matTooltip]=\"displayValue\">\r\n                                                    <span>{{ displayValue }}</span>\r\n                                                </mat-chip-row>\r\n                                            </ng-template>\r\n                                        } @else {\r\n                                            @if (rowValue >= 0) {\r\n                                                <span class=\"na\" [ngStyle]=\"{ color: ((column.enumMetadata[rowValue] || {}).textColor || 'inherit') }\" [innerHtml]=\"(column.enumMetadata[rowValue]||{}).display\"></span>\r\n                                            }\r\n                                        }\r\n                                    } @else {\r\n                                        @if (column.multiple) {\r\n                                            @for (item of rowValue; track item; let i = $index; let last = $last) {\r\n                                                <div>\r\n                                                    @if (i<2) {\r\n                                                        <small>\r\n                                                            <msa-enum-display [value]=\"item\" [enumType]=\"column.enumType\" [metadata]=\"column.enumMetadata\"></msa-enum-display>\r\n                                                        </small>\r\n                                                    } @if (i==1 && rowValue?.length > 2) {\r\n                                                        <small>, ...</small>\r\n                                                    }\r\n                                                </div>\r\n                                            }\r\n                                        } @else {\r\n                                            @if (rowValue >= 0) {\r\n                                                <msa-enum-display [value]=\"rowValue\" [enumType]=\"column.enumType\" [metadata]=\"column.enumMetadata\"></msa-enum-display>\r\n                                            }\r\n                                        }\r\n                                    }\r\n                                </span>\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region Toggle column -->\r\n                            @case (ColumnType.Toggle) {\r\n                                @if (!formArray) {\r\n                                    <mat-slide-toggle [ngModel]=\"row | property:column.name\" (ngModelChange)=\"setNestedProperty(row, column.name, $event);handleModelChange(column, row, undefined);\" (click)=\"$event.stopPropagation();\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" color=\"accent\"></mat-slide-toggle>\r\n                                } @if (formArray) {\r\n                                    <ng-container [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\r\n                                        <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\r\n                                    </ng-container>\r\n                                }\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region Date column -->\r\n                            @case (ColumnType.Date) {\r\n                                <span>{{rowValue | date:column.shortDate?'dd.MM.yyyy':'dd.MM.yyyy HH:mm:ss'}}</span>\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region Text Input column -->\r\n                            @case (ColumnType.TextInput) {\r\n                                @if (!formArray) {\r\n                                    <mat-form-field appearance=\"outline\" layout=\"column\" layout-align=\"center start\" subscriptSizing=\"dynamic\" dense-3 (click)=\"$event.stopPropagation();\">\r\n                                        @if (!formArray) {\r\n                                            <input matInput type=\"{{column.inputType}}\" autocomplete=\"none\" name=\"{{column.name}}{{rowIndex}}\" [ngModel]=\"row | property:column.name\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" [min]=\"column.inputMin?column.inputMin(row, undefined, context):null\" [max]=\"column.inputMax?column.inputMax(row, undefined, context):null\" (ngModelChange)=\"setNestedProperty(row, column.name, $event);(column.change?column.change(row, undefined, context):patch(row, [column.name], $event, column.patchIncludes));\" [ngModelOptions]=\"{updateOn: 'blur'}\" (keydown.enter)=\"handleKeydownEnter($event)\" />\r\n                                        }\r\n                                    </mat-form-field>\r\n                                } @if (formArray) {\r\n                                    <ng-container [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\r\n                                        <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\r\n                                    </ng-container>\r\n                                }\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region VD-Select column -->\r\n                            @case (ColumnType.Select) {\r\n                                @if (!formArray) {\r\n                                    <mat-form-field appearance=\"outline\" layout=\"column\" layout-align=\"center start\" subscriptSizing=\"dynamic\" dense-3 (click)=\"$event.stopPropagation();\">\r\n                                        @if (!formArray) {\r\n                                            <vd-select name=\"{{column.name}}{{rowIndex}}\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"$safeNavigationMigration(column?.enumFilter) | func:row:context\" [options]=\"column.options\" [defaultOption]=\"column.defaultOption??true\" [ngModel]=\"row | property:column.name\" (ngModelChange)=\"setNestedProperty(row, column.name, $event);\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" (change)=\"column.change?column.change(row, undefined, context):patch(row, [column.name], $event.value, column.patchIncludes)\" (keydown.enter)=\"handleKeydownEnter($event)\"></vd-select>\r\n                                        }\r\n                                    </mat-form-field>\r\n                                } @if (formArray) {\r\n                                    <ng-container [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\r\n                                        <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\r\n                                    </ng-container>\r\n                                }\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region Action -->\r\n                            @case (ColumnType.Action) {\r\n                                @if (column.menu) {\r\n                                    @if (menu?.matMenu && !row.locked && hasVisibleRowMenuItems(row, column)) {\r\n                                        <div id=\"menu-{{row.id}}\" style=\"visibility: hidden; position: fixed\" #contextMenuTrigger=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu.matMenu!\"></div>\r\n                                    }\r\n                                    <vd-dynamic-menu [items]=\"[column.menu]\" [data]=\"row\" [context]=\"context\" #menu></vd-dynamic-menu>\r\n                                }\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region Menu -->\r\n                            @case (ColumnType.Menu) {\r\n                                @if (column.menu) {\r\n                                    <vd-dynamic-menu [items]=\"[column.menu]\" [data]=\"row\" [context]=\"context\"></vd-dynamic-menu>\r\n                                }\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region icon -->\r\n                            @case (ColumnType.Icon) {\r\n                                <span layout=\"row\" layout-align=\"start center\">\r\n                                    @if(column && column.icon){\r\n                                        @if ( column.icon.matIcon) {\r\n                                            <mat-icon fontSet=\"{{column.icon.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon.cssClass??'', row)\">{{handleExpression($safeNavigationMigration(column.icon.matIcon)!, row)}}</mat-icon>\r\n                                        }\r\n                                        @if (column.icon.svgIcon) {\r\n                                            <mat-icon fontSet=\"{{column.icon.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon.cssClass??'', row)\" [svgIcon]=\"handleExpression($safeNavigationMigration(column.icon.svgIcon)!, row)!\"></mat-icon>\r\n                                        }\r\n                                        @if (column.icon.fontIcon) {\r\n                                            <mat-icon fontSet=\"{{column.icon.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon.cssClass??'', row)\" [fontIcon]=\"handleExpression($safeNavigationMigration(column.icon.fontIcon)!, row)!\"></mat-icon>\r\n                                        }\r\n                                    }\r\n                                </span>\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region icon button -->\r\n                            @case (ColumnType.IconButton) {\r\n                                <a mat-icon-button (click)=\"$event.stopPropagation();column.iconButton?.event?column.iconButton.event(row, context):null\">\r\n                                    <mat-icon fontSet=\"{{column.iconButton?.iconFontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.iconButton?.iconClass??'', row)\">{{handleExpression(column.iconButton?.icon??'radio_button_checked', row) || 'radio_button_checked'}}</mat-icon>\r\n                                </a>\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region Other column types -->\r\n                            @default {\r\n                                <span [innerHtml]=\"rowValue??''\"></span>\r\n                            }\r\n                            <!-- #endregion -->\r\n                        }\r\n                        <ng-template #recursiveContainer let-columnNameSegments=\"segments\" let-formGroup=\"formGroup\" let-parentFormGroup=\"parentFormGroup\">\r\n                            @if (formGroup) {\r\n                                <ng-container [formGroup]=\"formGroup\">\r\n                                    <!-- If the columnNameSegments array is empty, we're at the leaf node -->\r\n                                    @if (!columnNameSegments.length) {\r\n                                        @switch (column.type) {\r\n                                            <!-- #region Toggle column -->\r\n                                            @case (ColumnType.Toggle) {\r\n                                                <mat-slide-toggle [formControl]=\"formGroup\" (click)=\"$event.stopPropagation();\" (change)=\"column.change?column.change(parentFormGroup.value, parentFormGroup, context):handleModelChange(column, parentFormGroup.value, parentFormGroup)\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" color=\"accent\"></mat-slide-toggle>\r\n                                            }\r\n                                            <!-- #endregion -->\r\n                                            <!-- #region Text Input column -->\r\n                                            @case (ColumnType.TextInput) {\r\n                                                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" dense-3 layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\r\n                                                    <input matInput [formControl]=\"formGroup\" type=\"{{column.inputType}}\" autocomplete=\"none\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" [min]=\"column.inputMin?column.inputMin(parentFormGroup.value, parentFormGroup, context):null\" [max]=\"column.inputMax?column.inputMax(parentFormGroup.value, parentFormGroup, context):null\" (keydown.enter)=\"handleKeydownEnter($event)\" />\r\n                                                </mat-form-field>\r\n                                            }\r\n                                            <!-- #endregion -->\r\n                                            <!-- #region VD-Select column -->\r\n                                            @case (ColumnType.Select) {\r\n                                                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" dense-3 layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\r\n                                                    <vd-select [formControl]=\"formGroup\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"column.enumFilter | func:parentFormGroup.value:context\" [options]=\"column.options\" [defaultOption]=\"column.defaultOption??true\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" (selectionChange)=\"column.change?column.change(parentFormGroup.value, parentFormGroup, context):patch(parentFormGroup.value, [column.name], rowValue, column.patchIncludes)\" (keydown.enter)=\"handleKeydownEnter($event)\"></vd-select>\r\n                                                </mat-form-field>\r\n                                            }\r\n                                            <!-- #endregion -->\r\n                                        }\r\n                                    } @else {\r\n                                        <!-- If not the last segment, create a nested form group -->\r\n                                        <ng-container [formGroupName]=\"columnNameSegments[0]\">\r\n                                            <!-- Recursive call to handle nested segments -->\r\n                                            <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: columnNameSegments.slice(1), parentFormGroup:formGroup, formGroup: formGroup.get(columnNameSegments[0])}\"></ng-container>\r\n                                        </ng-container>\r\n                                    }\r\n                                </ng-container>\r\n                            }\r\n                        </ng-template>\r\n                    </ng-template>\r\n                </td>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n        }\r\n\r\n        <!-- #region Filter row -->\r\n        @if (dataSource && filterable) {\r\n            @for (column of columns$ | async; track column) {\r\n                <ng-container cdkColumnDef=\"filter.{{column.filter || column.name}}\" [sticky]=\"column.sticky\" [stickyEnd]=\"column.stickyEnd\">\r\n                    <th mat-header-cell *cdkHeaderCellDef [hidden]=\"column.hidden\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\" [ngClass]=\"{'gt-xs': column.display == Grid.Xs, 'gt-sm': column.display == Grid.Sm, 'gt-md': column.display == Grid.Md, 'gt-lg': column.display == Grid.Lg, 'gt-xl': column.display == Grid.Xl, 'gt-xxl': column.display == Grid.Xxl, 'hidden': column.display == Grid.None}\">\r\n                        <!-- #region Select filter -->\r\n                        @if(column.endpoint || column.enumType || column.options){\r\n                            <span filter-select [endpoint]=\"column.endpoint\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"column.enumFilter | func:{}:context\" [options]=\"column.options\" [text]=\"column.filterOptionText || 'name'\"></span>\r\n                        }\r\n                        <!-- #region Text filter -->\r\n                        @else if(column.type == ColumnType.Text || column.type == ColumnType.TextInput || column.type == ColumnType.Number) {\r\n                            <span filter-input [onlyNumber]=\"column.filterInputNumber??false\" [matTooltip]=\"column.filterTooltip ? column.filterTooltip(context):null\" [matTooltipClass]=\"column.filterTooltipClass??''\" [operator]=\"!useFilterOperator ? undefined : column.filterOperator\"></span>\r\n                        }\r\n                        <!-- #endregion -->\r\n                        <!-- #region Date filter -->\r\n                        @else if (column.type == ColumnType.Date) {\r\n                            <span filter-date></span>\r\n                        }\r\n                        <!-- #endregion -->\r\n                        <!-- #region Action filter (clear) -->\r\n                        @else if (column.type == ColumnType.Action) {\r\n                            <span filter-clear></span>\r\n                        }\r\n                        <!-- #endregion -->\r\n                    </th>\r\n                </ng-container>\r\n            }\r\n        }\r\n        <!-- #endregion -->\r\n\r\n        <!-- #region Details column -->\r\n        <ng-container cdkColumnDef=\"expandedDetail\">\r\n            <td mat-cell *matCellDef=\"let row; let index = index\" [attr.colspan]=\"(displayedColumns$ | async)?.length\">\r\n                <div class=\"row-detail\" [@detailExpand]=\"row == expandedRow ? 'expanded' : 'collapsed'\" #detailsTemplate>\r\n                    @if (templateRef && row === expandedRow) {\r\n                        <ng-container *ngTemplateOutlet=\"templateRef; context:{row: row, index: index, context: context}\"></ng-container>\r\n                    }\r\n                </div>\r\n            </td>\r\n        </ng-container>\r\n        <!-- #endregion -->\r\n\r\n        <!-- #region Filter header -->\r\n        @if (filterable) {\r\n            <tr mat-header-row *cdkHeaderRowDef=\"displayedFilterColumns$ | async\"></tr>\r\n        }\r\n        <!-- #endregion -->\r\n\r\n        <tr mat-header-row *cdkHeaderRowDef=\"displayedColumns$ | async; sticky: stickyFilter\"></tr>\r\n        <tr mat-row *cdkRowDef=\"let row; columns: displayedColumns$ | async; let index = dataIndex\" [ngClass]=\"rowNgClass?rowNgClass(row, context):null\" [class.expanded-row]=\"expandedRow === row\" (click)=\"handleRowClick(index, row)\" (contextmenu)=\"handleRowRightClick($event, row)\"></tr>\r\n\r\n        <!-- #region Detrails row -->\r\n        @if (detailsTemplate || templateRef) {\r\n            <tr mat-row *cdkRowDef=\"let row; columns: ['expandedDetail']\" class=\"detail-row\" [ngClass]=\"rowNgClass?rowNgClass(row, context):null\"></tr>\r\n        }\r\n        <!-- #endregion -->\r\n    </table>\r\n\r\n    <!-- #region Modern No Results Message -->\r\n    @if (dataSource?.filteredData?.length <= 0 && dataSource?.total <= 0) {\r\n        <div class=\"no-results-overlay\">\r\n            <mat-icon class=\"no-results-icon\">search_off</mat-icon>\r\n            <div class=\"no-results-text mat-body-1\">\r\n                <h3 i18n=\"@@noResultsFound\">No results found</h3>\r\n                <p i18n=\"@@tryAdjustFilters\">\r\n                    Try adjusting your filters or search criteria.\r\n                </p>\r\n            </div>\r\n        </div>\r\n    }\r\n    <!-- #endregion -->\r\n</div>\r\n<!-- #endregion -->\r\n\r\n<!-- #region Debug value -->\r\n@if (debugValue) {\r\n    <code>\r\n  <pre>{{formValue | json}}</pre>\r\n</code>\r\n}\r\n<!-- #endregion -->\r\n\r\n<div class=\"table-footer\" layout=\"row\">\r\n    <ng-content select=\"[table-footer]\"></ng-content>\r\n    <span flex></span>\r\n    @if (paginable) {\r\n        <mat-paginator [pageSize]=\"pageSize\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\"></mat-paginator>\r\n    }\r\n</div>", styles: ["::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-form-field .mat-form-field-wrapper{width:100%}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip{height:24px;margin-top:2px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip .mdc-evolution-chip__action--primary{padding-left:9px;padding-right:9px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip:last-child{margin-bottom:2px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip *{font-size:.8rem}@media(max-width:389px){::ng-deep .mat-mdc-table [gt-xs],::ng-deep .mat-mdc-table .gt-xs{display:none}::ng-deep .mat-mdc-table [gt-sm],::ng-deep .mat-mdc-table .gt-sm{display:none}::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:599px){::ng-deep .mat-mdc-table [gt-sm],::ng-deep .mat-mdc-table .gt-sm{display:none}::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:959px){::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:1279px){::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:1919px){::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:1979px){::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}.mat-table-container{width:100%;max-width:100%;overflow:auto}.mat-table-container .mat-mdc-header-cell,.mat-table-container .mat-mdc-footer-cell,.mat-table-container .mat-mdc-cell{min-width:80px;box-sizing:border-box}.mat-table-container .mat-mdc-header-row,.mat-table-container .mat-mdc-footer-row,.mat-table-container .mat-mdc-row{min-width:1920px}.mat-table-container.mat-table-sticky .mat-mdc-table-sticky-border-elem-right{box-shadow:-3px 0 5px #0000001a}.mat-table-container.mat-table-sticky .mat-mdc-table-sticky-border-elem-left{box-shadow:3px 0 5px #0000001a}\n"], dependencies: [{ kind: "ngmodule", type: CdkTableModule }, { kind: "directive", type: i2$3.CdkRowDef, selector: "[cdkRowDef]", inputs: ["cdkRowDefColumns", "cdkRowDefWhen"] }, { kind: "directive", type: i2$3.CdkCellDef, selector: "[cdkCellDef]" }, { kind: "directive", type: i2$3.CdkHeaderCellDef, selector: "[cdkHeaderCellDef]" }, { kind: "directive", type: i2$3.CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["cdkColumnDef", "sticky", "stickyEnd"] }, { kind: "directive", type: i2$3.CdkHeaderRowDef, selector: "[cdkHeaderRowDef]", inputs: ["cdkHeaderRowDef", "cdkHeaderRowDefSticky"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i7.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i10.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i12.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i12.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i16.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: 
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: VdDynamicTableComponent, isStandalone: true, selector: "vd-dynamic-table", inputs: { dataSource: "dataSource", data: "data", parentControl: "parentControl", entityObject: "entityObject", formArray: "formArray", debugValue: "debugValue", classType: "classType", context: "context", dataSourceFilter: "dataSourceFilter", static: "static", filterable: "filterable", sticky: "sticky", tableWidth: "tableWidth", useFilterOperator: "useFilterOperator", paginable: "paginable", selectable: "selectable", sortActive: "sortActive", sortDirection: "sortDirection", stickyHeader: "stickyHeader", stickyFilter: "stickyFilter", columnSets: "columnSets", rowNgClass: "rowNgClass", detailsTemplate: "detailsTemplate", readonly: "readonly", selectAllFilter: "selectAllFilter", paginatorRef: "paginatorRef", columns: "columns", rowMenuItems: "rowMenuItems", rowAction: "rowAction", excludedColumns: "excludedColumns", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions" }, outputs: { rowClick: "rowClick" }, queries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true }, { propertyName: "matSort", first: true, predicate: MatSort, descendants: true, static: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, static: true }, { propertyName: "detailsTemplateRef", predicate: ["detailsTemplate"], descendants: true, read: ViewContainerRef }, { propertyName: "rowContextMenuTriggers", predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "@if (!static) {\r\n    <div class=\"loading-progress\">\r\n        @if (dataSource?.isLoading) {\r\n            <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\r\n        }\r\n    </div>\r\n}\r\n<!-- #region Data table -->\r\n<div class=\"mat-table-container scrollbar-secondary\" [ngClass]=\"{'mat-table-sticky': sticky}\" #scrollContainer>\r\n    <table mat-table #table [dataSource]=\"dataSource\" [dataSourceFilter]=\"dataSourceFilter\" [ngClass]=\"{'table-fixed': !sticky && !detailsTemplate && !templateRef, 'table-stick': sticky}\" [trackBy]=\"trackBy\" matSort matSortDisableClear [matSortActive]=\"sortActive||'id'\" [matSortDirection]=\"sortDirection\" multiTemplateDataRows>\r\n        @for (column of columns$ | async; track columnsTrackBy($index, column)) {\r\n            <!-- #region Column def -->\r\n            <ng-container [cdkColumnDef]=\"column.name\" [sticky]=\"column.sticky\" [stickyEnd]=\"column.stickyEnd\">\r\n                <ng-template #header [ngTemplateOutlet]=\"header\" let-headerText=\"headerText\" [ngTemplateOutletContext]=\"{headerText: column.header | func:context}\">\r\n                    <th mat-header-cell *cdkHeaderCellDef [mat-sort-header]=\"column.sortBy || column.name\" [hidden]=\"column.hidden\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\" [disabled]=\"column.type == ColumnType.Checkbox || column.disabled\" [ngClass]=\"column.displayNgClass\" [arrowPosition]=\"column.arrowBefore?'before':'after'\">\r\n                        @if (column.type == ColumnType.Checkbox) {\r\n                            <mat-checkbox (change)=\"$event ? dataSource.toggleSelect($event, selectAllFilter) : null\" [disabled]=\"!dataSource.paginator?.length\" [checked]=\"dataSource.selectionModel.hasValue() && dataSource.isAllSelected()\" [indeterminate]=\"dataSource.selectionModel.hasValue() && !dataSource.isAllSelected()\"></mat-checkbox>\r\n                        } @if (column.type != ColumnType.Checkbox) {\r\n                            <span [matTooltip]=\"headerText\">{{headerText}}</span>\r\n                        }\r\n                    </th>\r\n                </ng-template>\r\n                <td mat-cell *cdkCellDef=\"let row; let rowIndex = dataIndex\" [matTooltip]=\"column.tooltip?column.tooltip(row, undefined, context):null\" [matTooltipClass]=\"column.tooltipClass??''\" [hidden]=\"column.hidden\" [ngClass]=\"getRowClasses(column, row)\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\">\r\n                    <ng-template #rowVal [ngTemplateOutlet]=\"rowVal\" let-rowValue [ngTemplateOutletContext]=\"{$implicit: column?.content && column?.content(row, undefined, context)}\">\r\n                        @switch (column.type) {\r\n                            <!-- #region Checkbox column -->\r\n                            @case (ColumnType.Checkbox) {\r\n                                <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? dataSource.selectionModel.toggle(row) : null\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" [checked]=\"dataSource.selectionModel.isSelected(row)\"></mat-checkbox>\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region Enum column -->\r\n                            @case (ColumnType.Enum) {\r\n                                <span>\r\n                                    @if (column.enumMetadata) {\r\n                                        @if (column.multiple) {\r\n                                            @for (item of rowValue; track item; let i = $index) {\r\n                                                @if (i < 2) {\r\n                                                    <ng-template let-displayValue=\"displayValue\" [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ displayValue: column.enumMetadata[item].display }\"></ng-template>\r\n                                                }\r\n                                                @if (i === 1 && rowValue?.length > 2) {\r\n                                                    <small [matTooltip]=\"(rowValue | slice:2 | map:column.enumMetadata | map:'display') | join:'\\n'\" matTooltipClass=\"mat-tooltip-multiline\">...</small>\r\n                                                }\r\n                                            }\r\n                                            <ng-template #template let-displayValue=\"displayValue\">\r\n                                                <mat-chip-row disableRipple=\"true\" selectable=\"false\" [matTooltip]=\"displayValue\">\r\n                                                    <span>{{ displayValue }}</span>\r\n                                                </mat-chip-row>\r\n                                            </ng-template>\r\n                                        } @else {\r\n                                            @if (rowValue >= 0) {\r\n                                                <span class=\"na\" [ngStyle]=\"{ color: ((column.enumMetadata[rowValue] || {}).textColor || 'inherit') }\" [innerHtml]=\"(column.enumMetadata[rowValue]||{}).display\"></span>\r\n                                            }\r\n                                        }\r\n                                    } @else {\r\n                                        @if (column.multiple) {\r\n                                            @for (item of rowValue; track item; let i = $index; let last = $last) {\r\n                                                <div>\r\n                                                    @if (i<2) {\r\n                                                        <small>\r\n                                                            <msa-enum-display [value]=\"item\" [enumType]=\"column.enumType\" [metadata]=\"column.enumMetadata\"></msa-enum-display>\r\n                                                        </small>\r\n                                                    } @if (i==1 && rowValue?.length > 2) {\r\n                                                        <small>, ...</small>\r\n                                                    }\r\n                                                </div>\r\n                                            }\r\n                                        } @else {\r\n                                            @if (rowValue >= 0) {\r\n                                                <msa-enum-display [value]=\"rowValue\" [enumType]=\"column.enumType\" [metadata]=\"column.enumMetadata\"></msa-enum-display>\r\n                                            }\r\n                                        }\r\n                                    }\r\n                                </span>\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region Toggle column -->\r\n                            @case (ColumnType.Toggle) {\r\n                                @if (!formArray) {\r\n                                    <mat-slide-toggle [ngModel]=\"row | property:column.name\" (ngModelChange)=\"setNestedProperty(row, column.name, $event);handleModelChange(column, row, undefined);\" (click)=\"$event.stopPropagation();\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" color=\"accent\"></mat-slide-toggle>\r\n                                } @if (formArray) {\r\n                                    <ng-container [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\r\n                                        <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\r\n                                    </ng-container>\r\n                                }\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region Date column -->\r\n                            @case (ColumnType.Date) {\r\n                                <span>{{rowValue | date:column.shortDate?'dd.MM.yyyy':'dd.MM.yyyy HH:mm:ss'}}</span>\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region Text Input column -->\r\n                            @case (ColumnType.TextInput) {\r\n                                @if (!formArray) {\r\n                                    <mat-form-field appearance=\"outline\" layout=\"column\" layout-align=\"center start\" subscriptSizing=\"dynamic\" dense-3 (click)=\"$event.stopPropagation();\">\r\n                                        @if (!formArray) {\r\n                                            <input matInput type=\"{{column.inputType}}\" autocomplete=\"none\" name=\"{{column.name}}{{rowIndex}}\" [ngModel]=\"row | property:column.name\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" [min]=\"column.inputMin?column.inputMin(row, undefined, context):null\" [max]=\"column.inputMax?column.inputMax(row, undefined, context):null\" (ngModelChange)=\"setNestedProperty(row, column.name, $event);(column.change?column.change(row, undefined, context):patch(row, [column.name], $event, column.patchIncludes));\" [ngModelOptions]=\"{updateOn: 'blur'}\" (keydown.enter)=\"handleKeydownEnter($event)\" />\r\n                                        }\r\n                                    </mat-form-field>\r\n                                } @if (formArray) {\r\n                                    <ng-container [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\r\n                                        <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\r\n                                    </ng-container>\r\n                                }\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region VD-Select column -->\r\n                            @case (ColumnType.Select) {\r\n                                @if (!formArray) {\r\n                                    <mat-form-field appearance=\"outline\" layout=\"column\" layout-align=\"center start\" subscriptSizing=\"dynamic\" dense-3 (click)=\"$event.stopPropagation();\">\r\n                                        @if (!formArray) {\r\n                                            <vd-select name=\"{{column.name}}{{rowIndex}}\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"$safeNavigationMigration(column?.enumFilter) | func:row:context\" [options]=\"column.options\" [defaultOption]=\"column.defaultOption??true\" [ngModel]=\"row | property:column.name\" (ngModelChange)=\"setNestedProperty(row, column.name, $event);\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" (change)=\"column.change?column.change(row, undefined, context):patch(row, [column.name], $event.value, column.patchIncludes)\" (keydown.enter)=\"handleKeydownEnter($event)\"></vd-select>\r\n                                        }\r\n                                    </mat-form-field>\r\n                                } @if (formArray) {\r\n                                    <ng-container [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\r\n                                        <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\r\n                                    </ng-container>\r\n                                }\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region Action -->\r\n                            @case (ColumnType.Action) {\r\n                                @if (column.menu) {\r\n                                    @if (menu?.matMenu && !row.locked && hasVisibleRowMenuItems(row, column)) {\r\n                                        <div id=\"menu-{{row.id}}\" style=\"visibility: hidden; position: fixed\" #contextMenuTrigger=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu.matMenu!\"></div>\r\n                                    }\r\n                                    <vd-dynamic-menu [items]=\"[column.menu]\" [data]=\"row\" [context]=\"context\" #menu></vd-dynamic-menu>\r\n                                }\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region Menu -->\r\n                            @case (ColumnType.Menu) {\r\n                                @if (column.menu) {\r\n                                    <vd-dynamic-menu [items]=\"[column.menu]\" [data]=\"row\" [context]=\"context\"></vd-dynamic-menu>\r\n                                }\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region icon -->\r\n                            @case (ColumnType.Icon) {\r\n                                <span layout=\"row\" layout-align=\"start center\">\r\n                                    @if(column && column.icon){\r\n                                        @if ( column.icon.matIcon) {\r\n                                            <mat-icon fontSet=\"{{column.icon.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon.cssClass??'', row)\">{{handleExpression($safeNavigationMigration(column.icon.matIcon)!, row)}}</mat-icon>\r\n                                        }\r\n                                        @if (column.icon.svgIcon) {\r\n                                            <mat-icon fontSet=\"{{column.icon.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon.cssClass??'', row)\" [svgIcon]=\"handleExpression($safeNavigationMigration(column.icon.svgIcon)!, row)!\"></mat-icon>\r\n                                        }\r\n                                        @if (column.icon.fontIcon) {\r\n                                            <mat-icon fontSet=\"{{column.icon.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon.cssClass??'', row)\" [fontIcon]=\"handleExpression($safeNavigationMigration(column.icon.fontIcon)!, row)!\"></mat-icon>\r\n                                        }\r\n                                    }\r\n                                </span>\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region icon button -->\r\n                            @case (ColumnType.IconButton) {\r\n                                <a mat-icon-button (click)=\"$event.stopPropagation();column.iconButton?.event?column.iconButton.event(row, context):null\">\r\n                                    <mat-icon fontSet=\"{{column.iconButton?.iconFontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.iconButton?.iconClass??'', row)\">{{handleExpression(column.iconButton?.icon??'radio_button_checked', row) || 'radio_button_checked'}}</mat-icon>\r\n                                </a>\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region Other column types -->\r\n                            @default {\r\n                                <span [innerHtml]=\"rowValue??''\"></span>\r\n                            }\r\n                            <!-- #endregion -->\r\n                        }\r\n                        <ng-template #recursiveContainer let-columnNameSegments=\"segments\" let-formGroup=\"formGroup\" let-parentFormGroup=\"parentFormGroup\">\r\n                            @if (formGroup) {\r\n                                <ng-container [formGroup]=\"formGroup\">\r\n                                    <!-- If the columnNameSegments array is empty, we're at the leaf node -->\r\n                                    @if (!columnNameSegments.length) {\r\n                                        @switch (column.type) {\r\n                                            <!-- #region Toggle column -->\r\n                                            @case (ColumnType.Toggle) {\r\n                                                <mat-slide-toggle [formControl]=\"formGroup\" (click)=\"$event.stopPropagation();\" (change)=\"column.change?column.change(parentFormGroup.value, parentFormGroup, context):handleModelChange(column, parentFormGroup.value, parentFormGroup)\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" color=\"accent\"></mat-slide-toggle>\r\n                                            }\r\n                                            <!-- #endregion -->\r\n                                            <!-- #region Text Input column -->\r\n                                            @case (ColumnType.TextInput) {\r\n                                                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" dense-3 layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\r\n                                                    <input matInput [formControl]=\"formGroup\" type=\"{{column.inputType}}\" autocomplete=\"none\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" [min]=\"column.inputMin?column.inputMin(parentFormGroup.value, parentFormGroup, context):null\" [max]=\"column.inputMax?column.inputMax(parentFormGroup.value, parentFormGroup, context):null\" (keydown.enter)=\"handleKeydownEnter($event)\" />\r\n                                                </mat-form-field>\r\n                                            }\r\n                                            <!-- #endregion -->\r\n                                            <!-- #region VD-Select column -->\r\n                                            @case (ColumnType.Select) {\r\n                                                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" dense-3 layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\r\n                                                    <vd-select [formControl]=\"formGroup\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"column.enumFilter | func:parentFormGroup.value:context\" [options]=\"column.options\" [defaultOption]=\"column.defaultOption??true\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" (selectionChange)=\"column.change?column.change(parentFormGroup.value, parentFormGroup, context):patch(parentFormGroup.value, [column.name], rowValue, column.patchIncludes)\" (keydown.enter)=\"handleKeydownEnter($event)\"></vd-select>\r\n                                                </mat-form-field>\r\n                                            }\r\n                                            <!-- #endregion -->\r\n                                        }\r\n                                    } @else {\r\n                                        <!-- If not the last segment, create a nested form group -->\r\n                                        <ng-container [formGroupName]=\"columnNameSegments[0]\">\r\n                                            <!-- Recursive call to handle nested segments -->\r\n                                            <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: columnNameSegments.slice(1), parentFormGroup:formGroup, formGroup: formGroup.get(columnNameSegments[0])}\"></ng-container>\r\n                                        </ng-container>\r\n                                    }\r\n                                </ng-container>\r\n                            }\r\n                        </ng-template>\r\n                    </ng-template>\r\n                </td>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n        }\r\n        <!-- #region Filter row -->\r\n        @if (dataSource && filterable) {\r\n            @for (column of columns$ | async; track column) {\r\n                <ng-container cdkColumnDef=\"filter.{{column.filter || column.name}}\" [sticky]=\"column.sticky\" [stickyEnd]=\"column.stickyEnd\">\r\n                    <th mat-header-cell *cdkHeaderCellDef [hidden]=\"column.hidden\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\" [ngClass]=\"column.displayNgClass\">\r\n                        <!-- #region Select filter -->\r\n                        @if(column.endpoint || column.enumType || column.options){\r\n                            <span filter-select [endpoint]=\"column.endpoint\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"column.enumFilter | func:{}:context\" [options]=\"column.options\" [text]=\"column.filterOptionText || 'name'\"></span>\r\n                        }\r\n                        <!-- #region Text filter -->\r\n                        @else if(column.type == ColumnType.Text || column.type == ColumnType.TextInput || column.type == ColumnType.Number) {\r\n                            <span filter-input [onlyNumber]=\"column.filterInputNumber??false\" [matTooltip]=\"column.filterTooltip ? column.filterTooltip(context):null\" [matTooltipClass]=\"column.filterTooltipClass??''\" [operator]=\"!useFilterOperator ? undefined : column.filterOperator\"></span>\r\n                        }\r\n                        <!-- #endregion -->\r\n                        <!-- #region Date filter -->\r\n                        @else if (column.type == ColumnType.Date) {\r\n                            <span filter-date></span>\r\n                        }\r\n                        <!-- #endregion -->\r\n                        <!-- #region Action filter (clear) -->\r\n                        @else if (column.type == ColumnType.Action) {\r\n                            <span filter-clear></span>\r\n                        }\r\n                        <!-- #endregion -->\r\n                    </th>\r\n                </ng-container>\r\n            }\r\n        }\r\n        <!-- #endregion -->\r\n        <!-- #region Details column -->\r\n        <ng-container cdkColumnDef=\"expandedDetail\">\r\n            <td mat-cell *matCellDef=\"let row; let index = index\" [attr.colspan]=\"(displayedColumns$ | async)?.length\">\r\n                <div class=\"row-detail\" [@detailExpand]=\"row == expandedRow ? 'expanded' : 'collapsed'\" #detailsTemplate>\r\n                    @if (templateRef && row === expandedRow) {\r\n                        <ng-container *ngTemplateOutlet=\"templateRef; context:{row: row, index: index, context: context}\"></ng-container>\r\n                    }\r\n                </div>\r\n            </td>\r\n        </ng-container>\r\n        <!-- #endregion -->\r\n        <!-- #region Filter header -->\r\n        @if (filterable) {\r\n            <tr mat-header-row *cdkHeaderRowDef=\"displayedFilterColumns$ | async\"></tr>\r\n        }\r\n        <!-- #endregion -->\r\n        <tr mat-header-row *cdkHeaderRowDef=\"displayedColumns$ | async; sticky: stickyFilter\"></tr>\r\n        <tr mat-row *cdkRowDef=\"let row; columns: displayedColumns$ | async; let index = dataIndex\" [ngClass]=\"rowNgClass?rowNgClass(row, context):null\" [class.expanded-row]=\"expandedRow === row\" (click)=\"handleRowClick(index, row)\" (contextmenu)=\"handleRowRightClick($event, row)\"></tr>\r\n        <!-- #region Detrails row -->\r\n        @if (detailsTemplate || templateRef) {\r\n            <tr mat-row *cdkRowDef=\"let row; columns: ['expandedDetail']\" class=\"detail-row\" [ngClass]=\"rowNgClass?rowNgClass(row, context):null\"></tr>\r\n        }\r\n        <!-- #endregion -->\r\n    </table>\r\n    <!-- #region Modern No Results Message -->\r\n    @if (dataSource?.filteredData?.length <= 0 && dataSource?.total <= 0) {\r\n        <div class=\"no-results-overlay\">\r\n            <mat-icon class=\"no-results-icon\">search_off</mat-icon>\r\n            <div class=\"no-results-text mat-body-1\">\r\n                <h3 i18n=\"@@noResultsFound\">No results found</h3>\r\n                <p i18n=\"@@tryAdjustFilters\"> Try adjusting your filters or search criteria. </p>\r\n            </div>\r\n        </div>\r\n    }\r\n    <!-- #endregion -->\r\n</div>\r\n<!-- #endregion -->\r\n<!-- #region Debug value -->\r\n@if (debugValue) {\r\n    <code>\r\n  <pre>{{formValue | json}}</pre>\r\n</code>\r\n}\r\n<!-- #endregion -->\r\n<div class=\"table-footer\" layout=\"row\">\r\n    <ng-content select=\"[table-footer]\"></ng-content>\r\n    <span flex></span>\r\n    @if (paginable) {\r\n        <mat-paginator [pageSize]=\"pageSize\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\"></mat-paginator>\r\n    }\r\n</div>", styles: ["::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-form-field .mat-form-field-wrapper{width:100%}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip{height:24px;margin-top:2px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip .mdc-evolution-chip__action--primary{padding-left:9px;padding-right:9px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip:last-child{margin-bottom:2px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip *{font-size:.8rem}@media(max-width:389px){::ng-deep .mat-mdc-table [gt-xs],::ng-deep .mat-mdc-table .gt-xs{display:none}::ng-deep .mat-mdc-table [gt-sm],::ng-deep .mat-mdc-table .gt-sm{display:none}::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:599px){::ng-deep .mat-mdc-table [gt-sm],::ng-deep .mat-mdc-table .gt-sm{display:none}::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:959px){::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:1279px){::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:1919px){::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:1979px){::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}.mat-table-container{width:100%;max-width:100%;overflow:auto}.mat-table-container .mat-mdc-header-cell,.mat-table-container .mat-mdc-footer-cell,.mat-table-container .mat-mdc-cell{min-width:80px;box-sizing:border-box}.mat-table-container .mat-mdc-header-row,.mat-table-container .mat-mdc-footer-row,.mat-table-container .mat-mdc-row{min-width:1920px}.mat-table-container.mat-table-sticky .mat-mdc-table-sticky-border-elem-right{box-shadow:-3px 0 5px #0000001a}.mat-table-container.mat-table-sticky .mat-mdc-table-sticky-border-elem-left{box-shadow:3px 0 5px #0000001a}\n"], dependencies: [{ kind: "ngmodule", type: CdkTableModule }, { kind: "directive", type: i2$3.CdkRowDef, selector: "[cdkRowDef]", inputs: ["cdkRowDefColumns", "cdkRowDefWhen"] }, { kind: "directive", type: i2$3.CdkCellDef, selector: "[cdkCellDef]" }, { kind: "directive", type: i2$3.CdkHeaderCellDef, selector: "[cdkHeaderCellDef]" }, { kind: "directive", type: i2$3.CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["cdkColumnDef", "sticky", "stickyEnd"] }, { kind: "directive", type: i2$3.CdkHeaderRowDef, selector: "[cdkHeaderRowDef]", inputs: ["cdkHeaderRowDef", "cdkHeaderRowDefSticky"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i7.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i10.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i12.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i12.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i16.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: 
                 //----------------------
                 DataSourceFilterDirective, selector: "[dataSourceFilter]", inputs: ["dataSource", "dataSourceFilter"] }, { kind: "directive", type: DisableControlDirective, selector: "[disableControl]", inputs: ["disableControl"] }, { kind: "component", type: FilterDateComponent, selector: "mat-header-cell[filter-date], [mat-header-cell][filter-date], [filter-date]", inputs: ["field", "debounce", "placeholder"] }, { kind: "component", type: FilterInputComponent, selector: "mat-header-cell[filter-input], [mat-header-cell][filter-input], [filter-input]", inputs: ["field", "operator", "onlyNumber", "debounce", "placeholder"] }, { kind: "component", type: FilterSelectComponent, selector: "mat-header-cell[filter-select], [mat-header-cell][filter-select], [filter-select]", inputs: ["endpoint", "params", "projection", "sortBy", "sorted", "enumFilter", "enum", "enumMetadata", "key", "text", "prefix", "multiple", "options", "filteredOptions", "filterable", "field", "placeholder", "cache"] }, { kind: "component", type: FilterClearComponent, selector: "mat-header-cell[filter-clear], [mat-header-cell][filter-clear], [filter-clear]" }, { kind: "component", type: VdDynamicMenuComponent, selector: "vd-dynamic-menu", inputs: ["items", "data", "index", "context", "contextMenu"] }, { kind: "component", type: VdSelectComponent, selector: "vd-select", inputs: ["triggerCssClass"] }, { kind: "component", type: MsaEnumDisplayComponent, selector: "msa-enum-display", inputs: ["value", "enumType", "metadata", "showIcon", "entity", "context"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.JsonPipe, name: "json" }, { kind: "pipe", type: i1$2.SlicePipe, name: "slice" }, { kind: "pipe", type: i1$2.DatePipe, name: "date" }, { kind: "pipe", type: 
                 //----------------------
@@ -19058,7 +19062,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                             state('expanded', style({ height: AUTO_STYLE })),
                             transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
                         ]),
-                    ], template: "@if (!static) {\r\n    <div class=\"loading-progress\">\r\n        @if (dataSource?.isLoading) {\r\n            <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\r\n        }\r\n    </div>\r\n}\r\n\r\n<!-- #region Data table -->\r\n<div class=\"mat-table-container scrollbar-secondary\" [ngClass]=\"{'mat-table-sticky': sticky}\" #scrollContainer>\r\n    <table mat-table #table [dataSource]=\"dataSource\" [dataSourceFilter]=\"dataSourceFilter\" [ngClass]=\"{'table-fixed': !sticky && !detailsTemplate && !templateRef, 'table-stick': sticky}\" [trackBy]=\"trackBy\" matSort matSortDisableClear [matSortActive]=\"sortActive||'id'\" [matSortDirection]=\"sortDirection\" multiTemplateDataRows>\r\n        @for (column of columns$ | async; track columnsTrackBy($index, column)) {\r\n            <!-- #region Column def -->\r\n            <ng-container [cdkColumnDef]=\"column.name\" [sticky]=\"column.sticky\" [stickyEnd]=\"column.stickyEnd\">\r\n                <ng-template #header [ngTemplateOutlet]=\"header\" let-headerText=\"headerText\" [ngTemplateOutletContext]=\"{headerText: column.header | func:context}\">\r\n                    <th mat-header-cell *cdkHeaderCellDef [mat-sort-header]=\"column.sortBy || column.name\" [hidden]=\"column.hidden\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\" [disabled]=\"column.type == ColumnType.Checkbox || column.disabled\" [ngClass]=\"{'gt-xs': column.display == Grid.Xs, 'gt-sm': column.display == Grid.Sm, 'gt-md': column.display == Grid.Md, 'gt-lg': column.display == Grid.Lg, 'gt-xl': column.display == Grid.Xl, 'gt-xxl': column.display == Grid.Xxl, 'hidden': column.display == Grid.None}\" [arrowPosition]=\"column.arrowBefore?'before':'after'\">\r\n                        @if (column.type == ColumnType.Checkbox) {\r\n                            <mat-checkbox (change)=\"$event ? dataSource.toggleSelect($event, selectAllFilter) : null\" [disabled]=\"!dataSource.paginator?.length\" [checked]=\"dataSource.selectionModel.hasValue() && dataSource.isAllSelected()\" [indeterminate]=\"dataSource.selectionModel.hasValue() && !dataSource.isAllSelected()\"></mat-checkbox>\r\n                        } @if (column.type != ColumnType.Checkbox) {\r\n                            <span [matTooltip]=\"headerText\">{{headerText}}</span>\r\n                        }\r\n                    </th>\r\n                </ng-template>\r\n                <td mat-cell *cdkCellDef=\"let row; let rowIndex = dataIndex\" [matTooltip]=\"column.tooltip?column.tooltip(row, undefined, context):null\" [matTooltipClass]=\"column.tooltipClass??''\" [hidden]=\"column.hidden\" [ngClass]=\"getRowClasses(column, row)\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\">\r\n                    <ng-template #rowVal [ngTemplateOutlet]=\"rowVal\" let-rowValue [ngTemplateOutletContext]=\"{$implicit: column?.content && column?.content(row, undefined, context)}\">\r\n                        @switch (column.type) {\r\n                            <!-- #region Checkbox column -->\r\n                            @case (ColumnType.Checkbox) {\r\n                                <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? dataSource.selectionModel.toggle(row) : null\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" [checked]=\"dataSource.selectionModel.isSelected(row)\"></mat-checkbox>\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region Enum column -->\r\n                            @case (ColumnType.Enum) {\r\n                                <span>\r\n                                    @if (column.enumMetadata) {\r\n                                        @if (column.multiple) {\r\n                                            @for (item of rowValue; track item; let i = $index) {\r\n                                                @if (i < 2) {\r\n                                                    <ng-template let-displayValue=\"displayValue\" [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ displayValue: column.enumMetadata[item].display }\"></ng-template>\r\n                                                }\r\n                                                @if (i === 1 && rowValue?.length > 2) {\r\n                                                    <small [matTooltip]=\"(rowValue | slice:2 | map:column.enumMetadata | map:'display') | join:'\\n'\" matTooltipClass=\"mat-tooltip-multiline\">...</small>\r\n                                                }\r\n                                            }\r\n                                            <ng-template #template let-displayValue=\"displayValue\">\r\n                                                <mat-chip-row disableRipple=\"true\" selectable=\"false\" [matTooltip]=\"displayValue\">\r\n                                                    <span>{{ displayValue }}</span>\r\n                                                </mat-chip-row>\r\n                                            </ng-template>\r\n                                        } @else {\r\n                                            @if (rowValue >= 0) {\r\n                                                <span class=\"na\" [ngStyle]=\"{ color: ((column.enumMetadata[rowValue] || {}).textColor || 'inherit') }\" [innerHtml]=\"(column.enumMetadata[rowValue]||{}).display\"></span>\r\n                                            }\r\n                                        }\r\n                                    } @else {\r\n                                        @if (column.multiple) {\r\n                                            @for (item of rowValue; track item; let i = $index; let last = $last) {\r\n                                                <div>\r\n                                                    @if (i<2) {\r\n                                                        <small>\r\n                                                            <msa-enum-display [value]=\"item\" [enumType]=\"column.enumType\" [metadata]=\"column.enumMetadata\"></msa-enum-display>\r\n                                                        </small>\r\n                                                    } @if (i==1 && rowValue?.length > 2) {\r\n                                                        <small>, ...</small>\r\n                                                    }\r\n                                                </div>\r\n                                            }\r\n                                        } @else {\r\n                                            @if (rowValue >= 0) {\r\n                                                <msa-enum-display [value]=\"rowValue\" [enumType]=\"column.enumType\" [metadata]=\"column.enumMetadata\"></msa-enum-display>\r\n                                            }\r\n                                        }\r\n                                    }\r\n                                </span>\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region Toggle column -->\r\n                            @case (ColumnType.Toggle) {\r\n                                @if (!formArray) {\r\n                                    <mat-slide-toggle [ngModel]=\"row | property:column.name\" (ngModelChange)=\"setNestedProperty(row, column.name, $event);handleModelChange(column, row, undefined);\" (click)=\"$event.stopPropagation();\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" color=\"accent\"></mat-slide-toggle>\r\n                                } @if (formArray) {\r\n                                    <ng-container [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\r\n                                        <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\r\n                                    </ng-container>\r\n                                }\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region Date column -->\r\n                            @case (ColumnType.Date) {\r\n                                <span>{{rowValue | date:column.shortDate?'dd.MM.yyyy':'dd.MM.yyyy HH:mm:ss'}}</span>\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region Text Input column -->\r\n                            @case (ColumnType.TextInput) {\r\n                                @if (!formArray) {\r\n                                    <mat-form-field appearance=\"outline\" layout=\"column\" layout-align=\"center start\" subscriptSizing=\"dynamic\" dense-3 (click)=\"$event.stopPropagation();\">\r\n                                        @if (!formArray) {\r\n                                            <input matInput type=\"{{column.inputType}}\" autocomplete=\"none\" name=\"{{column.name}}{{rowIndex}}\" [ngModel]=\"row | property:column.name\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" [min]=\"column.inputMin?column.inputMin(row, undefined, context):null\" [max]=\"column.inputMax?column.inputMax(row, undefined, context):null\" (ngModelChange)=\"setNestedProperty(row, column.name, $event);(column.change?column.change(row, undefined, context):patch(row, [column.name], $event, column.patchIncludes));\" [ngModelOptions]=\"{updateOn: 'blur'}\" (keydown.enter)=\"handleKeydownEnter($event)\" />\r\n                                        }\r\n                                    </mat-form-field>\r\n                                } @if (formArray) {\r\n                                    <ng-container [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\r\n                                        <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\r\n                                    </ng-container>\r\n                                }\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region VD-Select column -->\r\n                            @case (ColumnType.Select) {\r\n                                @if (!formArray) {\r\n                                    <mat-form-field appearance=\"outline\" layout=\"column\" layout-align=\"center start\" subscriptSizing=\"dynamic\" dense-3 (click)=\"$event.stopPropagation();\">\r\n                                        @if (!formArray) {\r\n                                            <vd-select name=\"{{column.name}}{{rowIndex}}\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"$safeNavigationMigration(column?.enumFilter) | func:row:context\" [options]=\"column.options\" [defaultOption]=\"column.defaultOption??true\" [ngModel]=\"row | property:column.name\" (ngModelChange)=\"setNestedProperty(row, column.name, $event);\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" (change)=\"column.change?column.change(row, undefined, context):patch(row, [column.name], $event.value, column.patchIncludes)\" (keydown.enter)=\"handleKeydownEnter($event)\"></vd-select>\r\n                                        }\r\n                                    </mat-form-field>\r\n                                } @if (formArray) {\r\n                                    <ng-container [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\r\n                                        <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\r\n                                    </ng-container>\r\n                                }\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region Action -->\r\n                            @case (ColumnType.Action) {\r\n                                @if (column.menu) {\r\n                                    @if (menu?.matMenu && !row.locked && hasVisibleRowMenuItems(row, column)) {\r\n                                        <div id=\"menu-{{row.id}}\" style=\"visibility: hidden; position: fixed\" #contextMenuTrigger=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu.matMenu!\"></div>\r\n                                    }\r\n                                    <vd-dynamic-menu [items]=\"[column.menu]\" [data]=\"row\" [context]=\"context\" #menu></vd-dynamic-menu>\r\n                                }\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region Menu -->\r\n                            @case (ColumnType.Menu) {\r\n                                @if (column.menu) {\r\n                                    <vd-dynamic-menu [items]=\"[column.menu]\" [data]=\"row\" [context]=\"context\"></vd-dynamic-menu>\r\n                                }\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region icon -->\r\n                            @case (ColumnType.Icon) {\r\n                                <span layout=\"row\" layout-align=\"start center\">\r\n                                    @if(column && column.icon){\r\n                                        @if ( column.icon.matIcon) {\r\n                                            <mat-icon fontSet=\"{{column.icon.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon.cssClass??'', row)\">{{handleExpression($safeNavigationMigration(column.icon.matIcon)!, row)}}</mat-icon>\r\n                                        }\r\n                                        @if (column.icon.svgIcon) {\r\n                                            <mat-icon fontSet=\"{{column.icon.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon.cssClass??'', row)\" [svgIcon]=\"handleExpression($safeNavigationMigration(column.icon.svgIcon)!, row)!\"></mat-icon>\r\n                                        }\r\n                                        @if (column.icon.fontIcon) {\r\n                                            <mat-icon fontSet=\"{{column.icon.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon.cssClass??'', row)\" [fontIcon]=\"handleExpression($safeNavigationMigration(column.icon.fontIcon)!, row)!\"></mat-icon>\r\n                                        }\r\n                                    }\r\n                                </span>\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region icon button -->\r\n                            @case (ColumnType.IconButton) {\r\n                                <a mat-icon-button (click)=\"$event.stopPropagation();column.iconButton?.event?column.iconButton.event(row, context):null\">\r\n                                    <mat-icon fontSet=\"{{column.iconButton?.iconFontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.iconButton?.iconClass??'', row)\">{{handleExpression(column.iconButton?.icon??'radio_button_checked', row) || 'radio_button_checked'}}</mat-icon>\r\n                                </a>\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region Other column types -->\r\n                            @default {\r\n                                <span [innerHtml]=\"rowValue??''\"></span>\r\n                            }\r\n                            <!-- #endregion -->\r\n                        }\r\n                        <ng-template #recursiveContainer let-columnNameSegments=\"segments\" let-formGroup=\"formGroup\" let-parentFormGroup=\"parentFormGroup\">\r\n                            @if (formGroup) {\r\n                                <ng-container [formGroup]=\"formGroup\">\r\n                                    <!-- If the columnNameSegments array is empty, we're at the leaf node -->\r\n                                    @if (!columnNameSegments.length) {\r\n                                        @switch (column.type) {\r\n                                            <!-- #region Toggle column -->\r\n                                            @case (ColumnType.Toggle) {\r\n                                                <mat-slide-toggle [formControl]=\"formGroup\" (click)=\"$event.stopPropagation();\" (change)=\"column.change?column.change(parentFormGroup.value, parentFormGroup, context):handleModelChange(column, parentFormGroup.value, parentFormGroup)\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" color=\"accent\"></mat-slide-toggle>\r\n                                            }\r\n                                            <!-- #endregion -->\r\n                                            <!-- #region Text Input column -->\r\n                                            @case (ColumnType.TextInput) {\r\n                                                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" dense-3 layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\r\n                                                    <input matInput [formControl]=\"formGroup\" type=\"{{column.inputType}}\" autocomplete=\"none\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" [min]=\"column.inputMin?column.inputMin(parentFormGroup.value, parentFormGroup, context):null\" [max]=\"column.inputMax?column.inputMax(parentFormGroup.value, parentFormGroup, context):null\" (keydown.enter)=\"handleKeydownEnter($event)\" />\r\n                                                </mat-form-field>\r\n                                            }\r\n                                            <!-- #endregion -->\r\n                                            <!-- #region VD-Select column -->\r\n                                            @case (ColumnType.Select) {\r\n                                                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" dense-3 layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\r\n                                                    <vd-select [formControl]=\"formGroup\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"column.enumFilter | func:parentFormGroup.value:context\" [options]=\"column.options\" [defaultOption]=\"column.defaultOption??true\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" (selectionChange)=\"column.change?column.change(parentFormGroup.value, parentFormGroup, context):patch(parentFormGroup.value, [column.name], rowValue, column.patchIncludes)\" (keydown.enter)=\"handleKeydownEnter($event)\"></vd-select>\r\n                                                </mat-form-field>\r\n                                            }\r\n                                            <!-- #endregion -->\r\n                                        }\r\n                                    } @else {\r\n                                        <!-- If not the last segment, create a nested form group -->\r\n                                        <ng-container [formGroupName]=\"columnNameSegments[0]\">\r\n                                            <!-- Recursive call to handle nested segments -->\r\n                                            <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: columnNameSegments.slice(1), parentFormGroup:formGroup, formGroup: formGroup.get(columnNameSegments[0])}\"></ng-container>\r\n                                        </ng-container>\r\n                                    }\r\n                                </ng-container>\r\n                            }\r\n                        </ng-template>\r\n                    </ng-template>\r\n                </td>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n        }\r\n\r\n        <!-- #region Filter row -->\r\n        @if (dataSource && filterable) {\r\n            @for (column of columns$ | async; track column) {\r\n                <ng-container cdkColumnDef=\"filter.{{column.filter || column.name}}\" [sticky]=\"column.sticky\" [stickyEnd]=\"column.stickyEnd\">\r\n                    <th mat-header-cell *cdkHeaderCellDef [hidden]=\"column.hidden\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\" [ngClass]=\"{'gt-xs': column.display == Grid.Xs, 'gt-sm': column.display == Grid.Sm, 'gt-md': column.display == Grid.Md, 'gt-lg': column.display == Grid.Lg, 'gt-xl': column.display == Grid.Xl, 'gt-xxl': column.display == Grid.Xxl, 'hidden': column.display == Grid.None}\">\r\n                        <!-- #region Select filter -->\r\n                        @if(column.endpoint || column.enumType || column.options){\r\n                            <span filter-select [endpoint]=\"column.endpoint\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"column.enumFilter | func:{}:context\" [options]=\"column.options\" [text]=\"column.filterOptionText || 'name'\"></span>\r\n                        }\r\n                        <!-- #region Text filter -->\r\n                        @else if(column.type == ColumnType.Text || column.type == ColumnType.TextInput || column.type == ColumnType.Number) {\r\n                            <span filter-input [onlyNumber]=\"column.filterInputNumber??false\" [matTooltip]=\"column.filterTooltip ? column.filterTooltip(context):null\" [matTooltipClass]=\"column.filterTooltipClass??''\" [operator]=\"!useFilterOperator ? undefined : column.filterOperator\"></span>\r\n                        }\r\n                        <!-- #endregion -->\r\n                        <!-- #region Date filter -->\r\n                        @else if (column.type == ColumnType.Date) {\r\n                            <span filter-date></span>\r\n                        }\r\n                        <!-- #endregion -->\r\n                        <!-- #region Action filter (clear) -->\r\n                        @else if (column.type == ColumnType.Action) {\r\n                            <span filter-clear></span>\r\n                        }\r\n                        <!-- #endregion -->\r\n                    </th>\r\n                </ng-container>\r\n            }\r\n        }\r\n        <!-- #endregion -->\r\n\r\n        <!-- #region Details column -->\r\n        <ng-container cdkColumnDef=\"expandedDetail\">\r\n            <td mat-cell *matCellDef=\"let row; let index = index\" [attr.colspan]=\"(displayedColumns$ | async)?.length\">\r\n                <div class=\"row-detail\" [@detailExpand]=\"row == expandedRow ? 'expanded' : 'collapsed'\" #detailsTemplate>\r\n                    @if (templateRef && row === expandedRow) {\r\n                        <ng-container *ngTemplateOutlet=\"templateRef; context:{row: row, index: index, context: context}\"></ng-container>\r\n                    }\r\n                </div>\r\n            </td>\r\n        </ng-container>\r\n        <!-- #endregion -->\r\n\r\n        <!-- #region Filter header -->\r\n        @if (filterable) {\r\n            <tr mat-header-row *cdkHeaderRowDef=\"displayedFilterColumns$ | async\"></tr>\r\n        }\r\n        <!-- #endregion -->\r\n\r\n        <tr mat-header-row *cdkHeaderRowDef=\"displayedColumns$ | async; sticky: stickyFilter\"></tr>\r\n        <tr mat-row *cdkRowDef=\"let row; columns: displayedColumns$ | async; let index = dataIndex\" [ngClass]=\"rowNgClass?rowNgClass(row, context):null\" [class.expanded-row]=\"expandedRow === row\" (click)=\"handleRowClick(index, row)\" (contextmenu)=\"handleRowRightClick($event, row)\"></tr>\r\n\r\n        <!-- #region Detrails row -->\r\n        @if (detailsTemplate || templateRef) {\r\n            <tr mat-row *cdkRowDef=\"let row; columns: ['expandedDetail']\" class=\"detail-row\" [ngClass]=\"rowNgClass?rowNgClass(row, context):null\"></tr>\r\n        }\r\n        <!-- #endregion -->\r\n    </table>\r\n\r\n    <!-- #region Modern No Results Message -->\r\n    @if (dataSource?.filteredData?.length <= 0 && dataSource?.total <= 0) {\r\n        <div class=\"no-results-overlay\">\r\n            <mat-icon class=\"no-results-icon\">search_off</mat-icon>\r\n            <div class=\"no-results-text mat-body-1\">\r\n                <h3 i18n=\"@@noResultsFound\">No results found</h3>\r\n                <p i18n=\"@@tryAdjustFilters\">\r\n                    Try adjusting your filters or search criteria.\r\n                </p>\r\n            </div>\r\n        </div>\r\n    }\r\n    <!-- #endregion -->\r\n</div>\r\n<!-- #endregion -->\r\n\r\n<!-- #region Debug value -->\r\n@if (debugValue) {\r\n    <code>\r\n  <pre>{{formValue | json}}</pre>\r\n</code>\r\n}\r\n<!-- #endregion -->\r\n\r\n<div class=\"table-footer\" layout=\"row\">\r\n    <ng-content select=\"[table-footer]\"></ng-content>\r\n    <span flex></span>\r\n    @if (paginable) {\r\n        <mat-paginator [pageSize]=\"pageSize\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\"></mat-paginator>\r\n    }\r\n</div>", styles: ["::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-form-field .mat-form-field-wrapper{width:100%}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip{height:24px;margin-top:2px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip .mdc-evolution-chip__action--primary{padding-left:9px;padding-right:9px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip:last-child{margin-bottom:2px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip *{font-size:.8rem}@media(max-width:389px){::ng-deep .mat-mdc-table [gt-xs],::ng-deep .mat-mdc-table .gt-xs{display:none}::ng-deep .mat-mdc-table [gt-sm],::ng-deep .mat-mdc-table .gt-sm{display:none}::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:599px){::ng-deep .mat-mdc-table [gt-sm],::ng-deep .mat-mdc-table .gt-sm{display:none}::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:959px){::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:1279px){::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:1919px){::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:1979px){::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}.mat-table-container{width:100%;max-width:100%;overflow:auto}.mat-table-container .mat-mdc-header-cell,.mat-table-container .mat-mdc-footer-cell,.mat-table-container .mat-mdc-cell{min-width:80px;box-sizing:border-box}.mat-table-container .mat-mdc-header-row,.mat-table-container .mat-mdc-footer-row,.mat-table-container .mat-mdc-row{min-width:1920px}.mat-table-container.mat-table-sticky .mat-mdc-table-sticky-border-elem-right{box-shadow:-3px 0 5px #0000001a}.mat-table-container.mat-table-sticky .mat-mdc-table-sticky-border-elem-left{box-shadow:3px 0 5px #0000001a}\n"] }]
+                    ], template: "@if (!static) {\r\n    <div class=\"loading-progress\">\r\n        @if (dataSource?.isLoading) {\r\n            <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\r\n        }\r\n    </div>\r\n}\r\n<!-- #region Data table -->\r\n<div class=\"mat-table-container scrollbar-secondary\" [ngClass]=\"{'mat-table-sticky': sticky}\" #scrollContainer>\r\n    <table mat-table #table [dataSource]=\"dataSource\" [dataSourceFilter]=\"dataSourceFilter\" [ngClass]=\"{'table-fixed': !sticky && !detailsTemplate && !templateRef, 'table-stick': sticky}\" [trackBy]=\"trackBy\" matSort matSortDisableClear [matSortActive]=\"sortActive||'id'\" [matSortDirection]=\"sortDirection\" multiTemplateDataRows>\r\n        @for (column of columns$ | async; track columnsTrackBy($index, column)) {\r\n            <!-- #region Column def -->\r\n            <ng-container [cdkColumnDef]=\"column.name\" [sticky]=\"column.sticky\" [stickyEnd]=\"column.stickyEnd\">\r\n                <ng-template #header [ngTemplateOutlet]=\"header\" let-headerText=\"headerText\" [ngTemplateOutletContext]=\"{headerText: column.header | func:context}\">\r\n                    <th mat-header-cell *cdkHeaderCellDef [mat-sort-header]=\"column.sortBy || column.name\" [hidden]=\"column.hidden\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\" [disabled]=\"column.type == ColumnType.Checkbox || column.disabled\" [ngClass]=\"column.displayNgClass\" [arrowPosition]=\"column.arrowBefore?'before':'after'\">\r\n                        @if (column.type == ColumnType.Checkbox) {\r\n                            <mat-checkbox (change)=\"$event ? dataSource.toggleSelect($event, selectAllFilter) : null\" [disabled]=\"!dataSource.paginator?.length\" [checked]=\"dataSource.selectionModel.hasValue() && dataSource.isAllSelected()\" [indeterminate]=\"dataSource.selectionModel.hasValue() && !dataSource.isAllSelected()\"></mat-checkbox>\r\n                        } @if (column.type != ColumnType.Checkbox) {\r\n                            <span [matTooltip]=\"headerText\">{{headerText}}</span>\r\n                        }\r\n                    </th>\r\n                </ng-template>\r\n                <td mat-cell *cdkCellDef=\"let row; let rowIndex = dataIndex\" [matTooltip]=\"column.tooltip?column.tooltip(row, undefined, context):null\" [matTooltipClass]=\"column.tooltipClass??''\" [hidden]=\"column.hidden\" [ngClass]=\"getRowClasses(column, row)\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\">\r\n                    <ng-template #rowVal [ngTemplateOutlet]=\"rowVal\" let-rowValue [ngTemplateOutletContext]=\"{$implicit: column?.content && column?.content(row, undefined, context)}\">\r\n                        @switch (column.type) {\r\n                            <!-- #region Checkbox column -->\r\n                            @case (ColumnType.Checkbox) {\r\n                                <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? dataSource.selectionModel.toggle(row) : null\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" [checked]=\"dataSource.selectionModel.isSelected(row)\"></mat-checkbox>\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region Enum column -->\r\n                            @case (ColumnType.Enum) {\r\n                                <span>\r\n                                    @if (column.enumMetadata) {\r\n                                        @if (column.multiple) {\r\n                                            @for (item of rowValue; track item; let i = $index) {\r\n                                                @if (i < 2) {\r\n                                                    <ng-template let-displayValue=\"displayValue\" [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ displayValue: column.enumMetadata[item].display }\"></ng-template>\r\n                                                }\r\n                                                @if (i === 1 && rowValue?.length > 2) {\r\n                                                    <small [matTooltip]=\"(rowValue | slice:2 | map:column.enumMetadata | map:'display') | join:'\\n'\" matTooltipClass=\"mat-tooltip-multiline\">...</small>\r\n                                                }\r\n                                            }\r\n                                            <ng-template #template let-displayValue=\"displayValue\">\r\n                                                <mat-chip-row disableRipple=\"true\" selectable=\"false\" [matTooltip]=\"displayValue\">\r\n                                                    <span>{{ displayValue }}</span>\r\n                                                </mat-chip-row>\r\n                                            </ng-template>\r\n                                        } @else {\r\n                                            @if (rowValue >= 0) {\r\n                                                <span class=\"na\" [ngStyle]=\"{ color: ((column.enumMetadata[rowValue] || {}).textColor || 'inherit') }\" [innerHtml]=\"(column.enumMetadata[rowValue]||{}).display\"></span>\r\n                                            }\r\n                                        }\r\n                                    } @else {\r\n                                        @if (column.multiple) {\r\n                                            @for (item of rowValue; track item; let i = $index; let last = $last) {\r\n                                                <div>\r\n                                                    @if (i<2) {\r\n                                                        <small>\r\n                                                            <msa-enum-display [value]=\"item\" [enumType]=\"column.enumType\" [metadata]=\"column.enumMetadata\"></msa-enum-display>\r\n                                                        </small>\r\n                                                    } @if (i==1 && rowValue?.length > 2) {\r\n                                                        <small>, ...</small>\r\n                                                    }\r\n                                                </div>\r\n                                            }\r\n                                        } @else {\r\n                                            @if (rowValue >= 0) {\r\n                                                <msa-enum-display [value]=\"rowValue\" [enumType]=\"column.enumType\" [metadata]=\"column.enumMetadata\"></msa-enum-display>\r\n                                            }\r\n                                        }\r\n                                    }\r\n                                </span>\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region Toggle column -->\r\n                            @case (ColumnType.Toggle) {\r\n                                @if (!formArray) {\r\n                                    <mat-slide-toggle [ngModel]=\"row | property:column.name\" (ngModelChange)=\"setNestedProperty(row, column.name, $event);handleModelChange(column, row, undefined);\" (click)=\"$event.stopPropagation();\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" color=\"accent\"></mat-slide-toggle>\r\n                                } @if (formArray) {\r\n                                    <ng-container [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\r\n                                        <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\r\n                                    </ng-container>\r\n                                }\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region Date column -->\r\n                            @case (ColumnType.Date) {\r\n                                <span>{{rowValue | date:column.shortDate?'dd.MM.yyyy':'dd.MM.yyyy HH:mm:ss'}}</span>\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region Text Input column -->\r\n                            @case (ColumnType.TextInput) {\r\n                                @if (!formArray) {\r\n                                    <mat-form-field appearance=\"outline\" layout=\"column\" layout-align=\"center start\" subscriptSizing=\"dynamic\" dense-3 (click)=\"$event.stopPropagation();\">\r\n                                        @if (!formArray) {\r\n                                            <input matInput type=\"{{column.inputType}}\" autocomplete=\"none\" name=\"{{column.name}}{{rowIndex}}\" [ngModel]=\"row | property:column.name\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" [min]=\"column.inputMin?column.inputMin(row, undefined, context):null\" [max]=\"column.inputMax?column.inputMax(row, undefined, context):null\" (ngModelChange)=\"setNestedProperty(row, column.name, $event);(column.change?column.change(row, undefined, context):patch(row, [column.name], $event, column.patchIncludes));\" [ngModelOptions]=\"{updateOn: 'blur'}\" (keydown.enter)=\"handleKeydownEnter($event)\" />\r\n                                        }\r\n                                    </mat-form-field>\r\n                                } @if (formArray) {\r\n                                    <ng-container [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\r\n                                        <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\r\n                                    </ng-container>\r\n                                }\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region VD-Select column -->\r\n                            @case (ColumnType.Select) {\r\n                                @if (!formArray) {\r\n                                    <mat-form-field appearance=\"outline\" layout=\"column\" layout-align=\"center start\" subscriptSizing=\"dynamic\" dense-3 (click)=\"$event.stopPropagation();\">\r\n                                        @if (!formArray) {\r\n                                            <vd-select name=\"{{column.name}}{{rowIndex}}\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"$safeNavigationMigration(column?.enumFilter) | func:row:context\" [options]=\"column.options\" [defaultOption]=\"column.defaultOption??true\" [ngModel]=\"row | property:column.name\" (ngModelChange)=\"setNestedProperty(row, column.name, $event);\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" (change)=\"column.change?column.change(row, undefined, context):patch(row, [column.name], $event.value, column.patchIncludes)\" (keydown.enter)=\"handleKeydownEnter($event)\"></vd-select>\r\n                                        }\r\n                                    </mat-form-field>\r\n                                } @if (formArray) {\r\n                                    <ng-container [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\r\n                                        <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\r\n                                    </ng-container>\r\n                                }\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region Action -->\r\n                            @case (ColumnType.Action) {\r\n                                @if (column.menu) {\r\n                                    @if (menu?.matMenu && !row.locked && hasVisibleRowMenuItems(row, column)) {\r\n                                        <div id=\"menu-{{row.id}}\" style=\"visibility: hidden; position: fixed\" #contextMenuTrigger=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu.matMenu!\"></div>\r\n                                    }\r\n                                    <vd-dynamic-menu [items]=\"[column.menu]\" [data]=\"row\" [context]=\"context\" #menu></vd-dynamic-menu>\r\n                                }\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region Menu -->\r\n                            @case (ColumnType.Menu) {\r\n                                @if (column.menu) {\r\n                                    <vd-dynamic-menu [items]=\"[column.menu]\" [data]=\"row\" [context]=\"context\"></vd-dynamic-menu>\r\n                                }\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region icon -->\r\n                            @case (ColumnType.Icon) {\r\n                                <span layout=\"row\" layout-align=\"start center\">\r\n                                    @if(column && column.icon){\r\n                                        @if ( column.icon.matIcon) {\r\n                                            <mat-icon fontSet=\"{{column.icon.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon.cssClass??'', row)\">{{handleExpression($safeNavigationMigration(column.icon.matIcon)!, row)}}</mat-icon>\r\n                                        }\r\n                                        @if (column.icon.svgIcon) {\r\n                                            <mat-icon fontSet=\"{{column.icon.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon.cssClass??'', row)\" [svgIcon]=\"handleExpression($safeNavigationMigration(column.icon.svgIcon)!, row)!\"></mat-icon>\r\n                                        }\r\n                                        @if (column.icon.fontIcon) {\r\n                                            <mat-icon fontSet=\"{{column.icon.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon.cssClass??'', row)\" [fontIcon]=\"handleExpression($safeNavigationMigration(column.icon.fontIcon)!, row)!\"></mat-icon>\r\n                                        }\r\n                                    }\r\n                                </span>\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region icon button -->\r\n                            @case (ColumnType.IconButton) {\r\n                                <a mat-icon-button (click)=\"$event.stopPropagation();column.iconButton?.event?column.iconButton.event(row, context):null\">\r\n                                    <mat-icon fontSet=\"{{column.iconButton?.iconFontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.iconButton?.iconClass??'', row)\">{{handleExpression(column.iconButton?.icon??'radio_button_checked', row) || 'radio_button_checked'}}</mat-icon>\r\n                                </a>\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region Other column types -->\r\n                            @default {\r\n                                <span [innerHtml]=\"rowValue??''\"></span>\r\n                            }\r\n                            <!-- #endregion -->\r\n                        }\r\n                        <ng-template #recursiveContainer let-columnNameSegments=\"segments\" let-formGroup=\"formGroup\" let-parentFormGroup=\"parentFormGroup\">\r\n                            @if (formGroup) {\r\n                                <ng-container [formGroup]=\"formGroup\">\r\n                                    <!-- If the columnNameSegments array is empty, we're at the leaf node -->\r\n                                    @if (!columnNameSegments.length) {\r\n                                        @switch (column.type) {\r\n                                            <!-- #region Toggle column -->\r\n                                            @case (ColumnType.Toggle) {\r\n                                                <mat-slide-toggle [formControl]=\"formGroup\" (click)=\"$event.stopPropagation();\" (change)=\"column.change?column.change(parentFormGroup.value, parentFormGroup, context):handleModelChange(column, parentFormGroup.value, parentFormGroup)\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" color=\"accent\"></mat-slide-toggle>\r\n                                            }\r\n                                            <!-- #endregion -->\r\n                                            <!-- #region Text Input column -->\r\n                                            @case (ColumnType.TextInput) {\r\n                                                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" dense-3 layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\r\n                                                    <input matInput [formControl]=\"formGroup\" type=\"{{column.inputType}}\" autocomplete=\"none\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" [min]=\"column.inputMin?column.inputMin(parentFormGroup.value, parentFormGroup, context):null\" [max]=\"column.inputMax?column.inputMax(parentFormGroup.value, parentFormGroup, context):null\" (keydown.enter)=\"handleKeydownEnter($event)\" />\r\n                                                </mat-form-field>\r\n                                            }\r\n                                            <!-- #endregion -->\r\n                                            <!-- #region VD-Select column -->\r\n                                            @case (ColumnType.Select) {\r\n                                                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" dense-3 layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\r\n                                                    <vd-select [formControl]=\"formGroup\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"column.enumFilter | func:parentFormGroup.value:context\" [options]=\"column.options\" [defaultOption]=\"column.defaultOption??true\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" (selectionChange)=\"column.change?column.change(parentFormGroup.value, parentFormGroup, context):patch(parentFormGroup.value, [column.name], rowValue, column.patchIncludes)\" (keydown.enter)=\"handleKeydownEnter($event)\"></vd-select>\r\n                                                </mat-form-field>\r\n                                            }\r\n                                            <!-- #endregion -->\r\n                                        }\r\n                                    } @else {\r\n                                        <!-- If not the last segment, create a nested form group -->\r\n                                        <ng-container [formGroupName]=\"columnNameSegments[0]\">\r\n                                            <!-- Recursive call to handle nested segments -->\r\n                                            <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: columnNameSegments.slice(1), parentFormGroup:formGroup, formGroup: formGroup.get(columnNameSegments[0])}\"></ng-container>\r\n                                        </ng-container>\r\n                                    }\r\n                                </ng-container>\r\n                            }\r\n                        </ng-template>\r\n                    </ng-template>\r\n                </td>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n        }\r\n        <!-- #region Filter row -->\r\n        @if (dataSource && filterable) {\r\n            @for (column of columns$ | async; track column) {\r\n                <ng-container cdkColumnDef=\"filter.{{column.filter || column.name}}\" [sticky]=\"column.sticky\" [stickyEnd]=\"column.stickyEnd\">\r\n                    <th mat-header-cell *cdkHeaderCellDef [hidden]=\"column.hidden\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\" [ngClass]=\"column.displayNgClass\">\r\n                        <!-- #region Select filter -->\r\n                        @if(column.endpoint || column.enumType || column.options){\r\n                            <span filter-select [endpoint]=\"column.endpoint\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"column.enumFilter | func:{}:context\" [options]=\"column.options\" [text]=\"column.filterOptionText || 'name'\"></span>\r\n                        }\r\n                        <!-- #region Text filter -->\r\n                        @else if(column.type == ColumnType.Text || column.type == ColumnType.TextInput || column.type == ColumnType.Number) {\r\n                            <span filter-input [onlyNumber]=\"column.filterInputNumber??false\" [matTooltip]=\"column.filterTooltip ? column.filterTooltip(context):null\" [matTooltipClass]=\"column.filterTooltipClass??''\" [operator]=\"!useFilterOperator ? undefined : column.filterOperator\"></span>\r\n                        }\r\n                        <!-- #endregion -->\r\n                        <!-- #region Date filter -->\r\n                        @else if (column.type == ColumnType.Date) {\r\n                            <span filter-date></span>\r\n                        }\r\n                        <!-- #endregion -->\r\n                        <!-- #region Action filter (clear) -->\r\n                        @else if (column.type == ColumnType.Action) {\r\n                            <span filter-clear></span>\r\n                        }\r\n                        <!-- #endregion -->\r\n                    </th>\r\n                </ng-container>\r\n            }\r\n        }\r\n        <!-- #endregion -->\r\n        <!-- #region Details column -->\r\n        <ng-container cdkColumnDef=\"expandedDetail\">\r\n            <td mat-cell *matCellDef=\"let row; let index = index\" [attr.colspan]=\"(displayedColumns$ | async)?.length\">\r\n                <div class=\"row-detail\" [@detailExpand]=\"row == expandedRow ? 'expanded' : 'collapsed'\" #detailsTemplate>\r\n                    @if (templateRef && row === expandedRow) {\r\n                        <ng-container *ngTemplateOutlet=\"templateRef; context:{row: row, index: index, context: context}\"></ng-container>\r\n                    }\r\n                </div>\r\n            </td>\r\n        </ng-container>\r\n        <!-- #endregion -->\r\n        <!-- #region Filter header -->\r\n        @if (filterable) {\r\n            <tr mat-header-row *cdkHeaderRowDef=\"displayedFilterColumns$ | async\"></tr>\r\n        }\r\n        <!-- #endregion -->\r\n        <tr mat-header-row *cdkHeaderRowDef=\"displayedColumns$ | async; sticky: stickyFilter\"></tr>\r\n        <tr mat-row *cdkRowDef=\"let row; columns: displayedColumns$ | async; let index = dataIndex\" [ngClass]=\"rowNgClass?rowNgClass(row, context):null\" [class.expanded-row]=\"expandedRow === row\" (click)=\"handleRowClick(index, row)\" (contextmenu)=\"handleRowRightClick($event, row)\"></tr>\r\n        <!-- #region Detrails row -->\r\n        @if (detailsTemplate || templateRef) {\r\n            <tr mat-row *cdkRowDef=\"let row; columns: ['expandedDetail']\" class=\"detail-row\" [ngClass]=\"rowNgClass?rowNgClass(row, context):null\"></tr>\r\n        }\r\n        <!-- #endregion -->\r\n    </table>\r\n    <!-- #region Modern No Results Message -->\r\n    @if (dataSource?.filteredData?.length <= 0 && dataSource?.total <= 0) {\r\n        <div class=\"no-results-overlay\">\r\n            <mat-icon class=\"no-results-icon\">search_off</mat-icon>\r\n            <div class=\"no-results-text mat-body-1\">\r\n                <h3 i18n=\"@@noResultsFound\">No results found</h3>\r\n                <p i18n=\"@@tryAdjustFilters\"> Try adjusting your filters or search criteria. </p>\r\n            </div>\r\n        </div>\r\n    }\r\n    <!-- #endregion -->\r\n</div>\r\n<!-- #endregion -->\r\n<!-- #region Debug value -->\r\n@if (debugValue) {\r\n    <code>\r\n  <pre>{{formValue | json}}</pre>\r\n</code>\r\n}\r\n<!-- #endregion -->\r\n<div class=\"table-footer\" layout=\"row\">\r\n    <ng-content select=\"[table-footer]\"></ng-content>\r\n    <span flex></span>\r\n    @if (paginable) {\r\n        <mat-paginator [pageSize]=\"pageSize\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\"></mat-paginator>\r\n    }\r\n</div>", styles: ["::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-form-field .mat-form-field-wrapper{width:100%}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip{height:24px;margin-top:2px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip .mdc-evolution-chip__action--primary{padding-left:9px;padding-right:9px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip:last-child{margin-bottom:2px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip *{font-size:.8rem}@media(max-width:389px){::ng-deep .mat-mdc-table [gt-xs],::ng-deep .mat-mdc-table .gt-xs{display:none}::ng-deep .mat-mdc-table [gt-sm],::ng-deep .mat-mdc-table .gt-sm{display:none}::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:599px){::ng-deep .mat-mdc-table [gt-sm],::ng-deep .mat-mdc-table .gt-sm{display:none}::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:959px){::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:1279px){::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:1919px){::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:1979px){::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}.mat-table-container{width:100%;max-width:100%;overflow:auto}.mat-table-container .mat-mdc-header-cell,.mat-table-container .mat-mdc-footer-cell,.mat-table-container .mat-mdc-cell{min-width:80px;box-sizing:border-box}.mat-table-container .mat-mdc-header-row,.mat-table-container .mat-mdc-footer-row,.mat-table-container .mat-mdc-row{min-width:1920px}.mat-table-container.mat-table-sticky .mat-mdc-table-sticky-border-elem-right{box-shadow:-3px 0 5px #0000001a}.mat-table-container.mat-table-sticky .mat-mdc-table-sticky-border-elem-left{box-shadow:3px 0 5px #0000001a}\n"] }]
         }], ctorParameters: () => [{ type: DynamicBuilder }, { type: i0.ChangeDetectorRef }], propDecorators: { table: [{
                 type: ViewChild,
                 args: ['table']
@@ -19215,7 +19219,7 @@ __decorate([
         defaultOption: false
     }),
     Display($localize `:@@display:Display`),
-    __metadata("design:type", Number)
+    __metadata("design:type", Object)
 ], TableColumnConfig.prototype, "display", void 0);
 __decorate([
     Column({
@@ -19386,7 +19390,9 @@ class VdDynamicTableConfigDialogComponent extends BaseComponent {
             this.configForm.controls["sticky"].valueChanges.subscribe(value => genericList.dynamicTable.sticky = value);
         }
         /* Filter columns that are configurable from the provided dynamic table configuration */
-        this.columns = genericList?.dynamicTable?.columns?.filter((x) => x.configurable);
+        this.columns = genericList?.dynamicTable?.columns
+            ?.filter((x) => x.configurable)
+            ?.filter((x) => x.columnSets?.some(cs => genericList?.dynamicTable?.columnSets?.includes(cs)));
     }
     /**
      * Saves the current column configuration and closes the dialog.
@@ -28295,6 +28301,42 @@ var MenuScope;
     MenuScope[MenuScope["Admin"] = 1] = "Admin";
 })(MenuScope || (MenuScope = {}));
 
+/**
+ * Class decorator to define a table with its configuration.
+ * @param tableDefinition Optional partial table definition to customize the table's behavior and appearance.
+ * @returns A function that takes the target class and applies the table definition metadata.
+ */
+function Table(tableDefinition) {
+    return function (target) {
+        if (tableDefinition?.columns) {
+            /* Add action menus from table definition, if any */
+            var actionColmun = tableDefinition.columns?.find(x => x.name == 'action');
+            if (!actionColmun) {
+                actionColmun = new TableColumn({
+                    index: 2000,
+                    name: 'action',
+                    columnSets: ['action', 'common'],
+                    type: TableColumnType.Action,
+                    disabled: true,
+                    rowMenuItems: actions,
+                    configurable: false,
+                    stickyEnd: true
+                });
+                /* Add the action column into the table columns */
+                tableDefinition.columns.push(actionColmun);
+            }
+            /* Get custom action, if any */
+            var actions = tableDefinition?.actions;
+            if (actions != null && actionColmun != null) {
+                actionColmun.rowMenuItems ??= [];
+                actions.forEach(y => actionColmun.rowMenuItems.push(y));
+            }
+        }
+        /* Save the table defintion in the metadata */
+        Reflect.defineMetadata(TABLE_DEFINITION_METADATA_KEY, tableDefinition, target);
+    };
+}
+
 /**
  * @class
  */
@@ -31047,6 +31089,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                 args: ['mediaStyles']
             }] } });
 
+/**
+ * Decorator function to define columns for a table object.
+ * @param type The constructor function of the table object.
+ * @returns A decorator function.
+ */
+function ColumnObject(type) {
+    return function (target, propertyKey) {
+        /* Retrieve table definition */
+        var tableDef = getTableDefinition(type);
+        /* Retrieve columns from the table definition */
+        var columns = tableDef.columns;
+        /* Update column names with property key prefix */
+        columns?.forEach(x => x.name = `${propertyKey}.${x.name}`);
+        /* Get existing table columns from metadata */
+        let previousTableColumns = Reflect.getMetadata(TABLE_COLUMNS_METADATA_KEY, target);
+        /* Create a copy of the existing columns array and append new columns */
+        let tableColumns = previousTableColumns ? previousTableColumns.concat(columns ?? []) : [];
+        /* Set column index if not already set */
+        tableColumns.forEach((x, i) => x.index ??= i);
+        /* Sort the columns by index */
+        Utils.sortArray(tableColumns, 'index');
+        /* Override the table columns in the metadata */
+        Reflect.defineMetadata(TABLE_COLUMNS_METADATA_KEY, tableColumns, target);
+    };
+}
+
 /**
  * VdTableFieldDirective class
  */
@@ -31232,5 +31300,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AbstractMatFormField, AbstractSelectFormField, ActionItem, Api, ApiResponse, AppEvent, AppEventType, AppSetting, AppStorage, AsyncValidationDirective, AuditEntity, AuditUser, AuthHelper, AuthUser, AutofocusDirective, BaseComponent, BaseDirective, BaseEntity, BaseInterceptor, BaseService, BindPipe, CachingInterceptor, Column, ColumnObject, Common, CommonError, CommonHandlerContext, ConfirmExitGuard, ContextHelper, DIALOG_PROVIDER, DIALOG_PROVIDER_FACTORY, DataSourceFilterDirective, DataSourcePipe, DatePickerHeaderComponent, DisableControlDirective, Display, DisplayNameNumberProjection, DisplayNameProjection, DynamicBuilder, DynamicComponentCompiler, EXPORT_DIALOG_COMPONENT, EmptyStringResetDirective, EnumMetadata, EnumPipe, EnumService, EqualValidator, ErrorMessageBindingStrategy, EventQueueService, Facet, FacetValue, FieldFuncPipe, FileControlDirective, FileService, FileSizePipe, FilterClearComponent, FilterDateComponent, FilterGlue, FilterInputComponent, FilterOperator, FilterPipe, FilterSelectComponent, FirstLetterPipe, Form, FormArrayPipe, FormBuilderConfiguration, FormControlPipe, FormDefinition, FormField, FormFieldDefinition, FormFieldGroup, FormFieldGroupDefinition, FormFieldType, FormGroupPipe, FuncPipe, GenericEmbeddedListComponent, GenericFormBaseComponent, GenericFormComponent, GenericListComponent, GenericReactiveFormComponent, GenericService, GlobalRoles, Grid, GroupFilterPipe, HtmlControlTemplateDirective, IAbstractControl, Icon, ImageFileControlDirective, IpVersion, KeyValue, KeysPipe, LayoutToggle, LoadingScreenInterceptor, LoadingScreenService, MEDIA_PROVIDER, MEDIA_PROVIDER_FACTORY, MatFormFieldEditorDirective, MatFormFieldRadioDirective, MatFormFieldReadonlyDirective, MatInputRequiredDirective, MatSelectRequiredDirective, Menu, MenuClient, MenuDepartment, MenuFormIncludesResolve, MenuItem, MenuItemClient, MenuItemDepartment, MenuItemFormIncludesResolve, MenuItemService, MenuItemTarget, MenuListProjectionResolve, MenuResolve, MenuScope, MenuSettings, MenuSettingsResolve, MessageType, ModifiableEntity, MonthNamePipe, MsaEditFormActionsComponent, MsaEnumDisplayComponent, MsaSelectRequiredDirective, NameNumberProjection, NameProjection, NativeElementInjectorDirective, NumericValueType, OnlyNumberDirective, OrderPipe, Pagination, PaginatorIntl, ParseDecimalDirective, Permission, PlaceholderPipe, PrefixDirective, PrintService, PropertyJoinPipe, ReactiveFormConfig, ReactiveTypedFormsModule, RemoveWhitespaceDirective, ResetFormType, RxFormArray, RxFormBuilder, RxFormControl, RxFormControlDirective, RxFormGroup, RxReactiveFormsModule, RxwebFormDirective, RxwebValidators, SafeHtmlPipe, Salutation, SaveAction, SplitPipe, SubMenuResolve, SuffixButton, Table, TableColumn, TableColumnConfig, TableColumnType, TableConfig, TableDataSource, TableDefinition, TableQueryConfig, TableStaticDataSource, TaskDialogData, Templates, TimePipe, TitleCase, TitleProjection, TruncatePipe, TypedForm, TypedFormBuilder, UniqueValidatorDirective, UrlValidationType, Utils, ValidationAlphabetLocale, ValueAccessorBase, ValuesPipe, VdAlertDialogComponent, VdChipsComponent, VdCodeDirective, VdConfirmDialogComponent, VdCustomDirective, VdDelayedHoverDirective, VdDialogActionsDirective, VdDialogComponent, VdDialogContentDirective, VdDialogHeaderActionsComponent, VdDialogHeaderComponent, VdDialogMaximizeDirective, VdDialogService, VdDialogTitleDirective, VdDynamicMenuComponent, VdDynamicTableComponent, VdDynamicTableConfigDialogComponent, VdEditorDirective, VdFileDirective, VdFileInputComponent, VdFileModule, VdFilterOptionDirective, VdGenericFormComponent, VdGenericFormCustomFieldDirective, VdLayoutCardOverComponent, VdLayoutCloseDirective, VdLayoutCompactComponent, VdLayoutComponent, VdLayoutFooterComponent, VdLayoutManageListCloseDirective, VdLayoutManageListComponent, VdLayoutManageListOpenDirective, VdLayoutManageListToggleDirective, VdLayoutNavComponent, VdLayoutNavListCloseDirective, VdLayoutNavListComponent, VdLayoutNavListOpenDirective, VdLayoutNavListToggleDirective, VdLayoutOpenDirective, VdLayoutToggleDirective, VdListOptionDirective, VdListToolbarComponent, VdMediaService, VdMediaToggleDirective, VdMenuComponent, VdNavigationDrawerComponent, VdNavigationDrawerMenuDirective, VdNavigationDrawerToolbarDirective, VdPromptDialogComponent, VdSelectComponent, VdSelectOptionDirective, VdSelectTriggerDirective, VdTableFieldDirective, VdTaskDialogComponent, allOf, allOfAsync, alpha, alphaAsync, alphaNumeric, alphaNumericAsync, and, ascii, async, blacklist, choice, choiceAsync, compare, compose, contains, containsAsync, creditCard, creditCardAsync, cusip, custom, customAsync, dataUri, date, dateAsync, different, digit, disable, elementClass, email, endpointMetadataKey, endsWith, endsWithAsync, error, escape, even, extension, extensionAsync, factor, factorAsync, file, fileAsync, fileSize, fileSizeAsync, formDefinitionMetadataKey, formFieldGroupsMetadataKey, formFieldsMetadataKey, getDisplay, getEndpoint, getFormDefinition, getFormGroups, getTableDefinition, graphql, greaterThan, greaterThanAsync, greaterThanEqualTo, greaterThanEqualToAsync, grid, hasRequiredValidator, headerMetadataKey, hexColor, iban, ibanAsync, image, imageAsync, json, latLong, latitude, leapYear, lessThan, lessThanAsync, lessThanEqualTo, lessThanEqualToAsync, longitude, lowerCase, ltrim, mac, mask, maxDate, maxDateAsync, maxLength, maxLengthAsync, maxNumber, maxNumberAsync, maxTime, maxTimeAsync, minDate, minDateAsync, minLength, minLengthAsync, minNumber, minNumberAsync, minTime, minTimeAsync, mixinDisableRipple, mixinDisabled, model, noneOf, noneOfAsync, not, notEmpty, numeric, numericAsync, odd, oneOf, oneOfAsync, or, parseProjectionArray, parseProjectionString, password, passwordAsync, pattern, patternAsync, port, prefix, primeNumber, prop, propArray, propObject, range, rangeAsync, required, requiredTrue, rtrim, rule, sanitize, startsWith, startsWithAsync, stripLow, suffix, tableColumnsMetadataKey, tableDefinitionMetadataKey, time, timeAsync, toBoolean, toDate, toDouble, toFloat, toInt, toString, trim, unique, updateOn, upperCase, url, urlAsync, whitelist };
+export { AbstractMatFormField, AbstractSelectFormField, ActionItem, Api, ApiResponse, AppEvent, AppEventType, AppSetting, AppStorage, AsyncValidationDirective, AuditEntity, AuditUser, AuthHelper, AuthUser, AutofocusDirective, BaseComponent, BaseDirective, BaseEntity, BaseInterceptor, BaseService, BindPipe, CachingInterceptor, Column, ColumnObject, Common, CommonError, CommonHandlerContext, ConfirmExitGuard, ContextHelper, DIALOG_PROVIDER, DIALOG_PROVIDER_FACTORY, DataSourceFilterDirective, DataSourcePipe, DatePickerHeaderComponent, DisableControlDirective, Display, DisplayNameNumberProjection, DisplayNameProjection, DynamicBuilder, DynamicComponentCompiler, EXPORT_DIALOG_COMPONENT, EmptyStringResetDirective, EnumMetadata, EnumPipe, EnumService, EqualValidator, ErrorMessageBindingStrategy, EventQueueService, Facet, FacetValue, FieldFuncPipe, FileControlDirective, FileService, FileSizePipe, FilterClearComponent, FilterDateComponent, FilterGlue, FilterInputComponent, FilterOperator, FilterPipe, FilterSelectComponent, FirstLetterPipe, Form, FormArrayPipe, FormBuilderConfiguration, FormControlPipe, FormDefinition, FormField, FormFieldDefinition, FormFieldGroup, FormFieldGroupDefinition, FormFieldType, FormGroupPipe, FuncPipe, GenericEmbeddedListComponent, GenericFormBaseComponent, GenericFormComponent, GenericListComponent, GenericReactiveFormComponent, GenericService, GlobalRoles, Grid, GroupFilterPipe, HtmlControlTemplateDirective, IAbstractControl, Icon, ImageFileControlDirective, IpVersion, KeyValue, KeysPipe, LayoutToggle, LoadingScreenInterceptor, LoadingScreenService, MEDIA_PROVIDER, MEDIA_PROVIDER_FACTORY, MatFormFieldEditorDirective, MatFormFieldRadioDirective, MatFormFieldReadonlyDirective, MatInputRequiredDirective, MatSelectRequiredDirective, Menu, MenuClient, MenuDepartment, MenuFormIncludesResolve, MenuItem, MenuItemClient, MenuItemDepartment, MenuItemFormIncludesResolve, MenuItemService, MenuItemTarget, MenuListProjectionResolve, MenuResolve, MenuScope, MenuSettings, MenuSettingsResolve, MessageType, ModifiableEntity, MonthNamePipe, MsaEditFormActionsComponent, MsaEnumDisplayComponent, MsaSelectRequiredDirective, NameNumberProjection, NameProjection, NativeElementInjectorDirective, NumericValueType, OnlyNumberDirective, OrderPipe, Pagination, PaginatorIntl, ParseDecimalDirective, Permission, PlaceholderPipe, PrefixDirective, PrintService, PropertyJoinPipe, ReactiveFormConfig, ReactiveTypedFormsModule, RemoveWhitespaceDirective, ResetFormType, RxFormArray, RxFormBuilder, RxFormControl, RxFormControlDirective, RxFormGroup, RxReactiveFormsModule, RxwebFormDirective, RxwebValidators, SafeHtmlPipe, Salutation, SaveAction, SplitPipe, SubMenuResolve, SuffixButton, TABLE_COLUMNS_METADATA_KEY, TABLE_DEFINITION_METADATA_KEY, Table, TableColumn, TableColumnConfig, TableColumnType, TableConfig, TableDataSource, TableDefinition, TableQueryConfig, TableStaticDataSource, TaskDialogData, Templates, TimePipe, TitleCase, TitleProjection, TruncatePipe, TypedForm, TypedFormBuilder, UniqueValidatorDirective, UrlValidationType, Utils, ValidationAlphabetLocale, ValueAccessorBase, ValuesPipe, VdAlertDialogComponent, VdChipsComponent, VdCodeDirective, VdConfirmDialogComponent, VdCustomDirective, VdDelayedHoverDirective, VdDialogActionsDirective, VdDialogComponent, VdDialogContentDirective, VdDialogHeaderActionsComponent, VdDialogHeaderComponent, VdDialogMaximizeDirective, VdDialogService, VdDialogTitleDirective, VdDynamicMenuComponent, VdDynamicTableComponent, VdDynamicTableConfigDialogComponent, VdEditorDirective, VdFileDirective, VdFileInputComponent, VdFileModule, VdFilterOptionDirective, VdGenericFormComponent, VdGenericFormCustomFieldDirective, VdLayoutCardOverComponent, VdLayoutCloseDirective, VdLayoutCompactComponent, VdLayoutComponent, VdLayoutFooterComponent, VdLayoutManageListCloseDirective, VdLayoutManageListComponent, VdLayoutManageListOpenDirective, VdLayoutManageListToggleDirective, VdLayoutNavComponent, VdLayoutNavListCloseDirective, VdLayoutNavListComponent, VdLayoutNavListOpenDirective, VdLayoutNavListToggleDirective, VdLayoutOpenDirective, VdLayoutToggleDirective, VdListOptionDirective, VdListToolbarComponent, VdMediaService, VdMediaToggleDirective, VdMenuComponent, VdNavigationDrawerComponent, VdNavigationDrawerMenuDirective, VdNavigationDrawerToolbarDirective, VdPromptDialogComponent, VdSelectComponent, VdSelectOptionDirective, VdSelectTriggerDirective, VdTableFieldDirective, VdTaskDialogComponent, allOf, allOfAsync, alpha, alphaAsync, alphaNumeric, alphaNumericAsync, and, ascii, async, blacklist, choice, choiceAsync, compare, compose, contains, containsAsync, creditCard, creditCardAsync, cusip, custom, customAsync, dataUri, date, dateAsync, different, digit, disable, elementClass, email, endpointMetadataKey, endsWith, endsWithAsync, error, escape, even, extension, extensionAsync, factor, factorAsync, file, fileAsync, fileSize, fileSizeAsync, formDefinitionMetadataKey, formFieldGroupsMetadataKey, formFieldsMetadataKey, getDisplay, getEndpoint, getFormDefinition, getFormGroups, getTableDefinition, graphql, greaterThan, greaterThanAsync, greaterThanEqualTo, greaterThanEqualToAsync, grid, hasRequiredValidator, headerMetadataKey, hexColor, iban, ibanAsync, image, imageAsync, json, latLong, latitude, leapYear, lessThan, lessThanAsync, lessThanEqualTo, lessThanEqualToAsync, longitude, lowerCase, ltrim, mac, mask, maxDate, maxDateAsync, maxLength, maxLengthAsync, maxNumber, maxNumberAsync, maxTime, maxTimeAsync, minDate, minDateAsync, minLength, minLengthAsync, minNumber, minNumberAsync, minTime, minTimeAsync, mixinDisableRipple, mixinDisabled, model, noneOf, noneOfAsync, not, notEmpty, numeric, numericAsync, odd, oneOf, oneOfAsync, or, parseProjectionArray, parseProjectionString, password, passwordAsync, pattern, patternAsync, port, prefix, primeNumber, prop, propArray, propObject, range, rangeAsync, required, requiredTrue, rtrim, rule, sanitize, startsWith, startsWithAsync, stripLow, suffix, time, timeAsync, toBoolean, toDate, toDouble, toFloat, toInt, toString, trim, unique, updateOn, upperCase, url, urlAsync, whitelist };
 //# sourceMappingURL=messaia-cdk.mjs.map