@messaia/cdk 22.0.1-rc.2 → 22.0.1-rc.21

package/fesm2022/messaia-cdk.mjs

@@ -14,7 +14,7 @@ import * as i1$3 from '@angular/platform-browser';
 import { Title } from '@angular/platform-browser';
 import * as i1$6 from '@angular/router';
 import { ActivatedRoute, Router, RouterModule } from '@angular/router';
-import { fromEvent, Subject, switchMap, timer, takeUntil as takeUntil$1, filter, map, tap, merge as merge$1, of, BehaviorSubject, firstValueFrom, throwError, distinctUntilChanged, debounceTime, Observable } from 'rxjs';
+import { fromEvent, Subject, switchMap, timer, takeUntil as takeUntil$1, filter, map, tap, merge as merge$1, of, BehaviorSubject, firstValueFrom, throwError, debounceTime, distinctUntilChanged, Observable } from 'rxjs';
 import * as i2 from '@angular/material/button';
 import { MatButtonModule, MatIconButton } from '@angular/material/button';
 import * as i4 from '@angular/material/icon';
@@ -31,7 +31,6 @@ import * as i5 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import * as i10 from '@angular/material/paginator';
 import { MatPaginatorModule, MatPaginator, MatPaginatorIntl } from '@angular/material/paginator';
-import { trigger, state, style, AUTO_STYLE, transition, animate } from '@angular/animations';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import * as i2$3 from '@angular/cdk/table';
 import { DataSource, CdkTableModule } from '@angular/cdk/table';
@@ -1383,6 +1382,17 @@ class BaseComponent {
             this.router.navigateByUrl(urlTree.toString());
         }
     }
+    /**
+     * Navigates to the previous page in browser history.
+     */
+    navigateBack() {
+        /* If history is unavailable or too short, fallback to configured return URL */
+        if (typeof window === 'undefined' || (window.history?.length ?? 0) <= 1) {
+            this.navigateToReturnUrl();
+            return;
+        }
+        this.location.back();
+    }
     /**
      * Expands the specified expansion panel path (supporting nested IDs) and collapses others.
      * @param panelPath - The dot-separated ID path (e.g., 'warehouse.orders.details').
@@ -1672,7 +1682,7 @@ class BaseComponent {
      * @param playSound A flag indicating whether to play a warning sound when the message type is Warning or Error. Defaults to false.
      * @returns An observable that emits when the action button is clicked.
      */
-    showMessage(message, type = MessageType.Success, duration, actionLabel = $localize `:@@ok:OK`, playSound = false) {
+    showMessage(message, type = MessageType.Success, duration, actionLabel = $localize `:@@ok:Ok`, playSound = false) {
         /* Default snack bar class to 'primary' (for success messages) */
         let snackBarClass = 'primary';
         /* If duration is not provided, calculate it based on message length */
@@ -12406,6 +12416,26 @@ function mixinDisabled(base) {
     };
 }
 
+class MsaSelectionLabelComponent {
+    /**
+     * Label value used by the i18n select expression.
+     */
+    label;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MsaSelectionLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: MsaSelectionLabelComponent, isStandalone: true, selector: "msa-selection-label", inputs: { label: "label" }, ngImport: i0, template: '<span i18n="@@selection">{ label, select, option {option} other{ {{ label }} } }</span>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.Eager });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MsaSelectionLabelComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'msa-selection-label',
+                    template: '<span i18n="@@selection">{ label, select, option {option} other{ {{ label }} } }</span>',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.Eager
+                }]
+        }], propDecorators: { label: [{
+                type: Input
+            }] } });
+
 class MsaEnumDisplayComponent {
     /**
      * The numeric value of the enum to convert.
@@ -12528,11 +12558,13 @@ class MsaEnumDisplayComponent {
             </mat-icon>
         }
         @let text = resolvedText();    
-        <span class="enum-text" i18n="@@selection">{ text, select, type {type} other { {{text}}} }</span>`, isInline: true, styles: [".enum-icon{margin-right:.2rem;vertical-align:middle}.enum-text{vertical-align:middle}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+        <span class="enum-text">
+            <msa-selection-label [label]="text"></msa-selection-label>
+        </span>`, isInline: true, styles: [".enum-icon{margin-right:.2rem;vertical-align:middle}.enum-text{vertical-align:middle}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MsaSelectionLabelComponent, selector: "msa-selection-label", inputs: ["label"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MsaEnumDisplayComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'msa-enum-display', standalone: true, imports: [MatIcon, NgClass], template: `
+            args: [{ selector: 'msa-enum-display', standalone: true, imports: [MatIcon, NgClass, MsaSelectionLabelComponent], template: `
         @if (resolvedIcon(); as iconConfig) {
             <mat-icon
                 [svgIcon]="iconConfig.svgIcon"
@@ -12545,7 +12577,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
             </mat-icon>
         }
         @let text = resolvedText();    
-        <span class="enum-text" i18n="@@selection">{ text, select, type {type} other { {{text}}} }</span>`, changeDetection: ChangeDetectionStrategy.Eager, styles: [".enum-icon{margin-right:.2rem;vertical-align:middle}.enum-text{vertical-align:middle}\n"] }]
+        <span class="enum-text">
+            <msa-selection-label [label]="text"></msa-selection-label>
+        </span>`, changeDetection: ChangeDetectionStrategy.Eager, styles: [".enum-icon{margin-right:.2rem;vertical-align:middle}.enum-text{vertical-align:middle}\n"] }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], enumType: [{ type: i0.Input, args: [{ isSignal: true, alias: "enumType", required: false }] }], metadata: [{ type: i0.Input, args: [{ isSignal: true, alias: "metadata", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], entity: [{ type: i0.Input, args: [{ isSignal: true, alias: "entity", required: false }] }], context: [{ type: i0.Input, args: [{ isSignal: true, alias: "context", required: false }] }] } });
 
 const headerMetadataKey = 'customer:vdHeader';
@@ -13207,6 +13241,11 @@ class TableColumn {
      * @property
      */
     multiple = false;
+    /**
+     * The property of the entity that this column represents.
+     * @property
+     */
+    property;
     /**
      * The name of the column.
      * @property
@@ -13306,6 +13345,7 @@ 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.property = propertyKey;
     tableColumn.name ||= propertyKey;
     tableColumn.header ||= (target ? getDisplay(target, propertyKey) : null) || tableColumn.name;
     tableColumn.filter ||= tableColumn.name;
@@ -13397,14 +13437,14 @@ function Column(args) {
         /* Get old table columns */
         let previousTableColumns = Reflect.getMetadata(TABLE_COLUMNS_METADATA_KEY, target);
         /* Override the field with the args, if exists */
-        const previousTableColumn = previousTableColumns?.find(x => x.name == propertyKey);
+        const previousTableColumn = previousTableColumns?.find(x => x.property == 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);
+        previousTableColumns = previousTableColumns?.filter(x => x.property != tableColumn.property);
         /* Create a copy of the result */
         let tableColumns = previousTableColumns ? previousTableColumns.concat([tableColumn]) : [tableColumn];
         /* Set column index */
@@ -14868,8 +14908,15 @@ class GenericService {
      * @param observeResponse Whether to observe the full response (default: false)
      */
     get(id, params, headers, handleError = true, observeResponse = false) {
+        /* Normalize the 'projection' parameter in query parameters */
+        const parsedParams = this.normalizeProjectionParam(params);
+        /* Make the HTTP GET request */
         let request = this.http
-            .get(`${this.endpoint}/${id}`, { observe: (observeResponse ? 'response' : 'body'), params: Utils.toHttpParams(params), headers: this.toHttpHeaders(headers) });
+            .get(`${this.endpoint}/${id}`, {
+            observe: (observeResponse ? 'response' : 'body'),
+            params: parsedParams instanceof HttpParams ? parsedParams : Utils.toHttpParams(parsedParams),
+            headers: this.toHttpHeaders(headers)
+        });
         /* Handle error */
         if (handleError) {
             request = request.pipe(catchError(this.handleError('get')));
@@ -14893,6 +14940,7 @@ class GenericService {
      * @param handleError Whether to handle errors (default: true)
      */
     count(params, path, headers, handleError = true) {
+        /* Make the HTTP GET request to count entities */
         let request = this.http
             .get(`${this.endpoint}${path ? path : '/count'}`, { params: Utils.toHttpParams(params), headers: this.toHttpHeaders(headers) });
         /* Handle error */
@@ -14918,6 +14966,7 @@ class GenericService {
      * @returns Observable with the response data
      */
     getList(params, path, headers) {
+        /* Normalize the 'projection' parameter in query parameters */
         const parsedParams = this.normalizeProjectionParam(params);
         return this.http
             .get(`${this.endpoint}${path ? path : ''}`, {
@@ -14971,177 +15020,99 @@ class GenericService {
     getListAsObservable() {
         return this.list.asObservable();
     }
-    /**
-     * Creates a new entity
-     * @param entity The entity to create
-     * @param path Optional relative path to the action
-     * @param httpOptions Optional HTTP options (headers, etc.)
-     * @param handleError Whether to handle errors (default: true)
-     */
-    create(entity, path, httpOptions, handleError = true) {
+    create(entity, path, optionsOrHttpOptions, handleError = true, showMessage = false) {
+        const resolved = this.resolveMutationOptions(optionsOrHttpOptions, handleError, showMessage);
+        const options = this.withShowMessage(resolved.httpOptions, resolved.showMessage);
         let request = this.http
-            .post(`${this.endpoint}${path ? path : ''}`, entity, httpOptions);
+            .post(`${this.endpoint}${path ? path : ''}`, entity, options);
         /* Handle error */
-        if (handleError) {
+        if (resolved.handleError) {
             request = request.pipe(catchError(this.handleError('create')));
         }
         return request;
     }
-    /**
-     * Asynchronously creates a new entity
-     * @param entity The entity to create
-     * @param path Optional relative path to the action
-     * @param httpOptions Optional HTTP options (headers, etc.)
-     * @returns Promise resolving to the created entity
-     */
-    async createAsync(entity, path, httpOptions) {
-        return await firstValueFrom(this.create(entity, path, httpOptions));
+    async createAsync(entity, path, optionsOrHttpOptions, showMessage = false) {
+        const resolved = this.resolveMutationOptions(optionsOrHttpOptions, true, showMessage);
+        return await firstValueFrom(this.create(entity, path, resolved.httpOptions, resolved.handleError, resolved.showMessage));
     }
-    /**
-     * Updates an existing entity asynchronously
-     * @param id The ID of the entity to update
-     * @param entity The updated entity data
-     * @param path Optional relative path to the action
-     * @param httpOptions Optional HTTP options (headers, etc.)
-     * @param handleError Whether to handle errors (default: true)
-     */
-    update(id, entity, path, httpOptions, handleError = true) {
+    update(id, entity, path, optionsOrHttpOptions, handleError = true, showMessage = false) {
+        const resolved = this.resolveMutationOptions(optionsOrHttpOptions, handleError, showMessage);
+        const options = this.withShowMessage(resolved.httpOptions, resolved.showMessage);
         let request = this.http
-            .put(`${this.endpoint}${path ? path : ''}/${id}`, entity, httpOptions);
+            .put(`${this.endpoint}${path ? path : ''}/${id}`, entity, options);
         /* Handle error */
-        if (handleError) {
+        if (resolved.handleError) {
             request = request.pipe(catchError(this.handleError('update')));
         }
         return request;
     }
-    /**
-     * Asynchronously updates an existing entity
-     * @param id The ID of the entity to update
-     * @param entity The updated entity data
-     * @param path Optional relative path to the action
-     * @param httpOptions Optional HTTP options (headers, etc.)
-     * @returns Promise resolving to the updated entity
-     */
-    async updateAsync(id, entity, path, httpOptions) {
-        return await firstValueFrom(this.update(id, entity, path, httpOptions));
+    async updateAsync(id, entity, path, optionsOrHttpOptions, showMessage = false) {
+        const resolved = this.resolveMutationOptions(optionsOrHttpOptions, true, showMessage);
+        return await firstValueFrom(this.update(id, entity, path, resolved.httpOptions, resolved.handleError, resolved.showMessage));
     }
-    /**
-     * Applies a JSON Patch to an entity
-     * @param id The ID of the item to patch
-     * @param body The patch body
-     * @param path Optional relative path to the action
-     * @param httpOptions Optional HTTP options (headers, etc.)
-     * @param handleError Whether to handle errors (default: true)
-     */
-    patch(id, body, path, httpOptions, handleError = true) {
+    patch(id, body, path, optionsOrHttpOptions, handleError = true, showMessage = false) {
+        const resolved = this.resolveMutationOptions(optionsOrHttpOptions, handleError, showMessage);
+        const options = this.withShowMessage(resolved.httpOptions, resolved.showMessage) || {};
         /* Ensure correct content-type for patch */
-        const headers = new HttpHeaders({
-            'Content-Type': 'application/json-patch+json'
-        });
-        /* Merge headers */
-        const options = {
-            ...httpOptions,
-            headers: httpOptions?.headers
-                ? httpOptions.headers.append('Content-Type', 'application/json-patch+json')
-                : headers
-        };
+        const mergedHeaders = options?.headers instanceof HttpHeaders
+            ? options.headers
+            : this.toHttpHeaders(options?.headers);
+        options.headers = mergedHeaders.set('Content-Type', 'application/json-patch+json');
         /* Create request */
         let request = this.http.patch(`${this.endpoint}${path ? path : ''}/${id}`, body, options);
         /* Handle error */
-        if (handleError) {
+        if (resolved.handleError) {
             request = request.pipe(catchError(this.handleError('patch')));
         }
         return request;
     }
-    /**
-     * Asynchronously applies a JSON Patch to an entity
-     * @param id The ID of the item to patch
-     * @param body The patch body
-     * @param path Optional relative path to the action
-     * @param httpOptions Optional HTTP options (headers, etc.)
-     * @returns Promise resolving to the patched entity
-     */
-    async patchAsync(id, body, path, httpOptions) {
-        return await firstValueFrom(this.patch(id, body, path, httpOptions));
+    async patchAsync(id, body, path, optionsOrHttpOptions, showMessage = false) {
+        const resolved = this.resolveMutationOptions(optionsOrHttpOptions, true, showMessage);
+        return await firstValueFrom(this.patch(id, body, path, resolved.httpOptions, resolved.handleError, resolved.showMessage));
     }
-    /**
-     * Applies a JSON Patch to multiple entities
-     * @param ids The IDs of the items to patch
-     * @param body The patch body
-     * @param path Optional relative path to the action
-     * @param httpOptions Optional HTTP options (headers, etc.)
-     * @param handleError Whether to handle errors (default: true)
-     */
-    patchList(ids, body, path, httpOptions, handleError = true) {
+    patchList(ids, body, path, optionsOrHttpOptions, handleError = true, showMessage = false) {
+        const resolved = this.resolveMutationOptions(optionsOrHttpOptions, handleError, showMessage);
+        const options = this.withShowMessage(resolved.httpOptions, resolved.showMessage);
         let request = this.http
-            .patch(`${this.endpoint}${path ? path : ''}`, body, Object.assign(httpOptions || {}, { params: Utils.toHttpParams({ ids: ids }) }));
+            .patch(`${this.endpoint}${path ? path : ''}`, body, Object.assign(options || {}, { params: Utils.toHttpParams({ ids: ids }) }));
         /* Handle error */
-        if (handleError) {
+        if (resolved.handleError) {
             request = request.pipe(catchError(this.handleError('patch')));
         }
         return request;
     }
-    /**
-     * Asynchronously applies a JSON Patch to multiple entities
-     * @param ids The IDs of the items to patch
-     * @param body The patch body
-     * @param path Optional relative path to the action
-     * @param httpOptions Optional HTTP options (headers, etc.)
-     * @returns Promise resolving to the patched entities
-     */
-    async patchListAsync(ids, body, path, httpOptions) {
-        return await firstValueFrom(this.patchList(ids, body, path, httpOptions));
+    async patchListAsync(ids, body, path, optionsOrHttpOptions, showMessage = false) {
+        const resolved = this.resolveMutationOptions(optionsOrHttpOptions, true, showMessage);
+        return await firstValueFrom(this.patchList(ids, body, path, resolved.httpOptions, resolved.handleError, resolved.showMessage));
     }
-    /**
-     * Deletes an entity by ID
-     * @param id The ID of the item to delete
-     * @param path Optional relative path to the action
-     * @param httpOptions Optional HTTP options (headers, etc.)
-     * @param handleError Whether to handle errors (default: true)
-     */
-    delete(id, path, httpOptions, handleError = true) {
+    delete(id, path, optionsOrHttpOptions, handleError = true, showMessage = false) {
+        const resolved = this.resolveMutationOptions(optionsOrHttpOptions, handleError, showMessage);
+        const options = this.withShowMessage(resolved.httpOptions, resolved.showMessage);
         let request = this.http
-            .delete(`${this.endpoint}${path ? path : ''}/${id}`, httpOptions);
+            .delete(`${this.endpoint}${path ? path : ''}/${id}`, options);
         /* Handle error */
-        if (handleError) {
+        if (resolved.handleError) {
             request = request.pipe(catchError(this.handleError('delete')));
         }
         return request;
     }
-    /**
-     * Asynchronously deletes an entity by ID
-     * @param id The ID of the item to delete
-     * @param path Optional relative path to the action
-     * @param httpOptions Optional HTTP options (headers, etc.)
-     * @returns Promise resolving to the delete result
-     */
-    async deleteAsync(id, path, httpOptions) {
-        return await firstValueFrom(this.delete(id, path, httpOptions));
+    async deleteAsync(id, path, optionsOrHttpOptions, showMessage = false) {
+        const resolved = this.resolveMutationOptions(optionsOrHttpOptions, true, showMessage);
+        return await firstValueFrom(this.delete(id, path, resolved.httpOptions, resolved.handleError, resolved.showMessage));
     }
-    /**
-     * Deletes multiple entities by IDs
-     * @param ids The IDs of the items to delete
-     * @param path Optional relative path to the action
-     * @param httpOptions Optional HTTP options (headers, etc.)
-     * @param handleError Whether to handle errors (default: true)
-     */
-    deleteList(ids, path, httpOptions, handleError = true) {
-        let request = this.http.delete(`${this.endpoint}${path ? path : ''}`, Object.assign(httpOptions || {}, { params: Utils.toHttpParams({ ids: ids }) }));
+    deleteList(ids, path, optionsOrHttpOptions, handleError = true, showMessage = false) {
+        const resolved = this.resolveMutationOptions(optionsOrHttpOptions, handleError, showMessage);
+        const options = this.withShowMessage(resolved.httpOptions, resolved.showMessage);
+        let request = this.http.delete(`${this.endpoint}${path ? path : ''}`, Object.assign(options || {}, { params: Utils.toHttpParams({ ids: ids }) }));
         /* Handle error */
-        if (handleError) {
+        if (resolved.handleError) {
             request = request.pipe(catchError(this.handleError('deleteList')));
         }
         return request;
     }
-    /**
-     * Asynchronously deletes multiple entities by IDs
-     * @param ids The IDs of the items to delete
-     * @param path Optional relative path to the action
-     * @param httpOptions Optional HTTP options (headers, etc.)
-     * @returns Promise resolving to the delete result
-     */
-    async deleteListAsync(ids, path, httpOptions) {
-        return await firstValueFrom(this.deleteList(ids, path, httpOptions));
+    async deleteListAsync(ids, path, optionsOrHttpOptions, showMessage = false) {
+        const resolved = this.resolveMutationOptions(optionsOrHttpOptions, true, showMessage);
+        return await firstValueFrom(this.deleteList(ids, path, resolved.httpOptions, resolved.handleError, resolved.showMessage));
     }
     /**
      * Downloads a file from the server
@@ -15179,16 +15150,16 @@ class GenericService {
      * Duplicates a record by ID
      * @param id The ID of the record to duplicate
      */
-    duplicate(id) {
-        return this.create(null, `/duplicate/${id}`);
+    duplicate(id, showMessage = false) {
+        return this.create(null, `/duplicate/${id}`, undefined, true, showMessage);
     }
     /**
      * Asynchronously duplicates a record by ID
      * @param id The ID of the record to duplicate
      * @returns Promise resolving to the duplicated record
      */
-    async duplicateAsync(id) {
-        return await firstValueFrom(this.duplicate(id));
+    async duplicateAsync(id, showMessage = false) {
+        return await firstValueFrom(this.duplicate(id, showMessage));
     }
     /**
      * Uploads a file to the server
@@ -15256,6 +15227,52 @@ class GenericService {
             .filter(key => body[key] != null && body[key] != '')
             .reduce((p, key) => p.set(key, body[key]), new HttpHeaders());
     }
+    /**
+     * Adds the Show-Message header to request options when enabled
+     * @param httpOptions Existing HTTP options
+     * @param showMessage Whether to add the Show-Message header
+     * @returns HTTP options with optional Show-Message header
+     */
+    withShowMessage(httpOptions, showMessage = false) {
+        if (!showMessage) {
+            return httpOptions;
+        }
+        /* Create a copy of the httpOptions to avoid mutating the original object */
+        const options = { ...(httpOptions || {}) };
+        const headers = options.headers instanceof HttpHeaders
+            ? options.headers
+            : this.toHttpHeaders(options.headers);
+        /* Set the Show-Message header to 'Yes' */
+        options.headers = headers.set('Show-Message', 'Yes');
+        return options;
+    }
+    /**
+     * Normalizes legacy mutation arguments and options-object overload arguments
+     * @param optionsOrHttpOptions Legacy httpOptions or options object
+     * @param handleError Legacy handleError value
+     * @param showMessage Legacy showMessage value
+     * @returns Normalized mutation options
+     */
+    resolveMutationOptions(optionsOrHttpOptions, handleError = true, showMessage = false) {
+        if (optionsOrHttpOptions && typeof optionsOrHttpOptions === 'object') {
+            const options = optionsOrHttpOptions;
+            /* Interpret as options-object overload only when one of its dedicated keys exists */
+            if (Object.prototype.hasOwnProperty.call(options, 'httpOptions') ||
+                Object.prototype.hasOwnProperty.call(options, 'handleError') ||
+                Object.prototype.hasOwnProperty.call(options, 'showMessage')) {
+                return {
+                    httpOptions: options.httpOptions ?? {},
+                    handleError: options.handleError ?? true,
+                    showMessage: options.showMessage ?? false
+                };
+            }
+        }
+        return {
+            httpOptions: optionsOrHttpOptions ?? {},
+            handleError,
+            showMessage
+        };
+    }
     /**
      * Normalizes the 'projection' parameter in query parameters
      * @param params The query parameters (HttpParams or object)
@@ -16079,6 +16096,12 @@ class AbstractSelectFormField extends AbstractMatFormField {
      * @type {BehaviorSubject<any[]>}
      */
     _enumChange = new BehaviorSubject([]);
+    /**
+     * @property destroy$
+     * @description Subject used to dispose subscriptions when the component is destroyed.
+     * @type {Subject<void>}
+     */
+    destroy$ = new Subject();
     /**
      * @property _http
      * @description The HTTP client service used to fetch data from an API.
@@ -16106,7 +16129,7 @@ class AbstractSelectFormField extends AbstractMatFormField {
     /**
      * @property _endpoint
      * @description The API endpoint or a function returning the endpoint URL.
-     * @type {string | Function | undefined}
+        * @type {string | URL | Function | undefined}
      */
     _endpoint;
     /**
@@ -16133,6 +16156,12 @@ class AbstractSelectFormField extends AbstractMatFormField {
      * @type {Function | undefined}
      */
     _enumFilter;
+    /**
+     * @property _default
+     * @description A predicate that identifies default option(s) after options are loaded.
+     * @type {((x: any) => boolean) | undefined}
+     */
+    _default;
     /**
      * @property _compareWith
      * @description A function to compare option values with the selected values.
@@ -16279,7 +16308,7 @@ class AbstractSelectFormField extends AbstractMatFormField {
     /**
      * @property endpoint
      * @description The API endpoint or a function returning the endpoint URL.
-     * @type {string | Function | undefined}
+        * @type {string | URL | Function | undefined}
      */
     get endpoint() { return this._endpoint; }
     set endpoint(endpoint) { this._endpoint = endpoint; this.endpointChanged(); }
@@ -16291,13 +16320,13 @@ class AbstractSelectFormField extends AbstractMatFormField {
     get params() { return this._params; }
     set params(params) {
         if (params) {
-            // Remove empty parameters
+            /* Remove empty parameters before change comparison. */
             Object.keys(params).forEach((key) => {
                 if (params[key] == null || params[key] == '' || params[key] == 'undefined') {
                     delete params[key];
                 }
             });
-            // Update parameters if they have changed
+            /* Update parameters only when values changed to avoid duplicate endpoint reloads. */
             if (JSON.stringify(this._params) !== JSON.stringify(params)) {
                 this._params = params;
                 this.endpointChanged();
@@ -16325,6 +16354,16 @@ class AbstractSelectFormField extends AbstractMatFormField {
      */
     get enumFilter() { return this._enumFilter; }
     set enumFilter(enumFilter) { this._enumFilter = enumFilter; this.enumChanged(); }
+    /**
+     * @property default
+     * @description A predicate used to select default option(s) from loaded options.
+     * @type {((x: any) => boolean) | undefined}
+     */
+    get default() { return this._default; }
+    set default(defaultFn) {
+        this._default = defaultFn;
+        this.applyDefaultSelection();
+    }
     /**
      * @property disabled
      * @description Whether the control is disabled.
@@ -16404,29 +16443,37 @@ class AbstractSelectFormField extends AbstractMatFormField {
      */
     constructor(controlType) {
         super(controlType);
+        /* Resolve HttpClient only for endpoint-driven mode where options are fetched remotely. */
         if (!this.enum) {
             this._http = inject(HttpClient);
         }
     }
     /**
-     * Lifecycle hook that is called after a component's
-     * view has been fully initialized.
+     * @description Initializes option sources and runtime subscriptions.
+     * For enum-driven controls, metadata is recalculated on parent form changes
+     * so hide and disable callbacks always use the latest form state.
      */
     ngOnInit() {
-        this.filteredOptions = this.options;
+        /* Keep filtered options aligned with the initial options input. */
+        this.filteredOptions = Array.isArray(this.options) ? this.options : [];
+        this.applyDefaultSelection();
         if (this.enum) {
-            this.filterable = this.enumMetadata != null;
-            this.filteredOptions = this.options = this.enumMetadata ? EnumService.applyMetadata(this.enum, this.enumMetadata, this.context) : EnumService.toArray(this.enum, this.prefix);
-            /* Apply enum filters */
-            if (this._enumFilter && this.options) {
-                this.filteredOptions = this.options = this.options.filter(this._enumFilter);
-            }
-            if (Array.isArray(this.options)) {
-                this.handleItemSelected(this.value);
-            }
+            /* Build initial enum options before wiring reactive refresh subscriptions. */
+            this.rebuildEnumOptions();
+            /* Recalculate metadata-driven options whenever enum filters are updated at runtime. */
+            this._enumChange
+                .pipe(debounceTime(1), takeUntil$1(this.destroy$))
+                .subscribe(_ => this.rebuildEnumOptions());
+            /* Recalculate metadata-driven options whenever the parent form value changes. */
+            this.ngControl?.control?.root?.valueChanges
+                ?.pipe(debounceTime(1), takeUntil$1(this.destroy$))
+                .subscribe(_ => this.rebuildEnumOptions());
         }
         else if (!this.options) {
-            this._endpointChange.pipe(distinctUntilChanged()).pipe(debounceTime(1)).subscribe(_ => {
+            /* Lazy-load options from endpoint only when static options are not provided. */
+            this._endpointChange
+                .pipe(distinctUntilChanged(), debounceTime(1), takeUntil$1(this.destroy$))
+                .subscribe(_ => {
                 let headers = new HttpHeaders();
                 if (this.cache) {
                     headers.set('Client-Cache', 'Yes');
@@ -16443,17 +16490,24 @@ class AbstractSelectFormField extends AbstractMatFormField {
                 }
                 /* Get endpoint */
                 let endpoint = typeof this.endpoint === 'function' ? this.endpoint(this) : this.endpoint;
+                endpoint = endpoint instanceof URL ? endpoint.toString() : endpoint;
                 if (this._http && endpoint && this.loadData) {
+                    /* Resolve remote options and keep emitted item payloads in sync. */
                     this._http.get(endpoint, { params: params, headers: headers })
                         .pipe(map((x) => this.mapper ? this.mapper(x) : x))
                         .subscribe(x => {
-                        this.filteredOptions = this.options = x;
+                        this.filteredOptions = this.options = this.normalizeOptions(x);
+                        /* Auto-select option(s) marked as default when no value is set. */
+                        this.applyDefaultSelection();
+                        /* Select the first option by default if applicable */
                         if (this.selectFirst && !this.value && this.options?.length > 0) {
                             this.value = this.multiple ? [this.options[0]] : this.options[0][this.optionValueProperty];
                         }
+                        /* Handle item selection for the current value */
                         if (Array.isArray(this.options)) {
                             this.handleItemSelected(this.value);
                         }
+                        /* Write the current value to the form control */
                         super.writeValue(this.value);
                         this.changeDetectorRef.detectChanges();
                     });
@@ -16461,6 +16515,15 @@ class AbstractSelectFormField extends AbstractMatFormField {
             });
         }
     }
+    /**
+     * Disposes runtime subscriptions and delegates common form-field cleanup.
+     */
+    ngOnDestroy() {
+        /* Complete local lifecycle stream used by takeUntil subscriptions. */
+        this.destroy$.next();
+        this.destroy$.complete();
+        super.ngOnDestroy();
+    }
     /**
      * From ControlValueAccessor interface
      * @param value
@@ -16478,6 +16541,7 @@ class AbstractSelectFormField extends AbstractMatFormField {
      * Method executed when an option changes
      */
     handleChange($event) {
+        /* Emit the raw event first, then emit mapped option item(s). */
         this.onValueChange.emit($event);
         this.handleItemChange($event.value);
     }
@@ -16486,11 +16550,13 @@ class AbstractSelectFormField extends AbstractMatFormField {
      * @param value
      */
     handleItemSelected(value) {
+        const options = this.normalizeOptions(this.options);
+        /* Map selected primitive values back to option model objects. */
         if (this.multiple) {
-            this.onItemSelected.emit(this.options.filter((x) => (value || []).includes(x[this.optionValueProperty])));
+            this.onItemSelected.emit(options.filter((x) => (value || []).includes(x[this.optionValueProperty])));
         }
         else {
-            this.onItemSelected.emit(this.options.filter((x) => x[this.optionValueProperty] == value)[0]);
+            this.onItemSelected.emit(options.filter((x) => x[this.optionValueProperty] == value)[0]);
         }
     }
     /**
@@ -16498,11 +16564,13 @@ class AbstractSelectFormField extends AbstractMatFormField {
      * @param value
      */
     handleItemChange(value) {
+        const options = this.normalizeOptions(this.options);
+        /* Emit changed option model objects to keep consumers decoupled from raw ids. */
         if (this.multiple) {
-            this.onItemChange.emit(this.options.filter((x) => (value || []).includes(x[this.optionValueProperty])));
+            this.onItemChange.emit(options.filter((x) => (value || []).includes(x[this.optionValueProperty])));
         }
         else {
-            this.onItemChange.emit(this.options.filter((x) => x[this.optionValueProperty] == value)[0]);
+            this.onItemChange.emit(options.filter((x) => x[this.optionValueProperty] == value)[0]);
         }
     }
     /**
@@ -16510,12 +16578,14 @@ class AbstractSelectFormField extends AbstractMatFormField {
      * @param $event
      */
     handleFilter($event) {
+        const options = this.normalizeOptions(this.options);
+        /* Normalize search text and apply the configured option text projection. */
         let searchText = $event?.target?.value ?? '';
         if (this.searchField) {
-            this.filteredOptions = this.options.filter((x) => this.searchField(x)?.toLowerCase().search(searchText.toLowerCase()) > -1);
+            this.filteredOptions = options.filter((x) => this.searchField(x)?.toLowerCase().search(searchText.toLowerCase()) > -1);
         }
         else {
-            this.filteredOptions = this.options.filter((x) => x[this.optionTextProperty]?.toLowerCase().search(searchText.toLowerCase()) > -1);
+            this.filteredOptions = options.filter((x) => x[this.optionTextProperty]?.toLowerCase().search(searchText.toLowerCase()) > -1);
         }
     }
     /**
@@ -16524,26 +16594,104 @@ class AbstractSelectFormField extends AbstractMatFormField {
      * @returns An array of filtered options that match the given value.
      */
     filterValue(value) {
+        const options = this.normalizeOptions(this.options);
         /* Check if a comparison function is defined */
         if (this.compareWith) {
             /* Return options that match any of the provided values using the compareWith function */
-            return this.options?.filter((option) => (value || []).some(val => this.compareWith(option, val)));
+            return options.filter((option) => (value || []).some(val => this.compareWith(option, val)));
         }
         /* If no comparison function is defined, return options that are included in the provided values */
-        return this.options?.filter((option) => (value || []).includes(option[this.optionValueProperty]));
+        return options.filter((option) => (value || []).includes(option[this.optionValueProperty]));
+    }
+    /**
+     * @description Normalizes endpoint payloads to a safe array for template iteration.
+     * @param source Raw payload from endpoint or mapper.
+     * @returns {any[]} Iterable options array.
+     */
+    normalizeOptions(source) {
+        /* Handle different types of source payloads */
+        if (Array.isArray(source)) {
+            return source;
+        }
+        /* If the source is null or undefined, return an empty array immediately */
+        if (source && typeof source === 'object') {
+            /* Attempt to extract a collection from common array-containing properties */
+            const collection = [source.items, source.results, source.data, source.values, source.content, source.rows, source.printers]
+                .find((x) => Array.isArray(x));
+            /* If a collection was found, return it */
+            if (Array.isArray(collection)) {
+                return collection;
+            }
+            /* If the source object contains the option value or text properties, wrap it in an array and return it */
+            if (this.optionValueProperty in source || this.optionTextProperty in source) {
+                return [source];
+            }
+        }
+        return [];
+    }
+    /**
+     * @description Applies default option selection when a default predicate is configured.
+     * @returns {void}
+     */
+    applyDefaultSelection() {
+        /* Skip default selection if no default predicate is defined or a value is already set */
+        if (!this._default || this.value) {
+            return;
+        }
+        /* Normalize the available options before applying default selection */
+        const options = this.normalizeOptions(this.options);
+        if (!options.length) {
+            return;
+        }
+        /* Apply default selection for multiple selection scenario if applicable */
+        if (this.multiple) {
+            this.value = options
+                .filter((option) => this._default(option))
+                .map((option) => option[this.optionValueProperty]);
+        }
+        /* Handle single selection scenario */
+        else {
+            /* Apply default selection for single selection scenario if applicable */
+            const selected = options.filter((option) => this._default(option))[0];
+            if (selected) {
+                this.value = selected[this.optionValueProperty];
+            }
+        }
     }
     /**
      * Trigger endpoint changed
      */
     endpointChanged() {
+        /* Emit endpoint signature so subscribers can react to source/query changes. */
         this._endpointChange.next([this.endpoint, this._params, this.projection, this._loadData]);
     }
     /**
      * Trigger enum changed
      */
     enumChanged() {
+        /* Emit enum filter updates to rebuild enum options with latest constraints. */
         this._enumChange.next([this._enumFilter]);
     }
+    /**
+     * @description Builds enum options from metadata and then applies runtime enum filters.
+     * @returns {void}
+     */
+    rebuildEnumOptions() {
+        /* Enable client-side filtering UI when metadata is present. */
+        this.filterable = this.enumMetadata != null;
+        /* Rebuild enum options from metadata so dynamic hide and disable callbacks re-run. */
+        this.options = this.enumMetadata
+            ? EnumService.applyMetadata(this.enum, this.enumMetadata, this.context)
+            : EnumService.toArray(this.enum, this.prefix);
+        /* Apply optional enum-level filter after metadata transformation. */
+        if (this._enumFilter && this.options) {
+            this.options = this.options.filter(this._enumFilter);
+        }
+        /* Keep filtered list synchronized with rebuilt options. */
+        this.filteredOptions = this.options;
+        /* Apply default selection for enum-based option sources as well. */
+        this.applyDefaultSelection();
+    }
     /**
      * Log to console
      * @param message
@@ -16553,7 +16701,7 @@ class AbstractSelectFormField extends AbstractMatFormField {
         console.log(message, optionalParams);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: AbstractSelectFormField, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: AbstractSelectFormField, isStandalone: true, inputs: { enum: "enum", enumMetadata: "enumMetadata", textPrefix: "textPrefix", optionTextProperty: "optionTextProperty", optionValueProperty: "optionValueProperty", matIconKey: "matIconKey", svgIconKey: "svgIconKey", fontSet: "fontSet", prefix: "prefix", options: "options", filteredOptions: "filteredOptions", filterable: "filterable", cache: "cache", selectFirst: "selectFirst", sortBy: "sortBy", mapper: "mapper", optionIcon: "optionIcon", defaultOption: "defaultOption", multiple: "multiple", sorted: "sorted", endpoint: "endpoint", params: "params", projection: "projection", loadData: "loadData", enumFilter: "enumFilter", disabled: "disabled", context: "context", compareWith: "compareWith", searchField: "searchField" }, outputs: { onValueChange: "change", onItemChange: "itemChange", onSelected: "selected", onItemSelected: "itemSelected", onLaunch: "launch" }, usesInheritance: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: AbstractSelectFormField, isStandalone: true, inputs: { enum: "enum", enumMetadata: "enumMetadata", textPrefix: "textPrefix", optionTextProperty: "optionTextProperty", optionValueProperty: "optionValueProperty", matIconKey: "matIconKey", svgIconKey: "svgIconKey", fontSet: "fontSet", prefix: "prefix", options: "options", filteredOptions: "filteredOptions", filterable: "filterable", cache: "cache", selectFirst: "selectFirst", sortBy: "sortBy", mapper: "mapper", optionIcon: "optionIcon", defaultOption: "defaultOption", multiple: "multiple", sorted: "sorted", endpoint: "endpoint", params: "params", projection: "projection", loadData: "loadData", enumFilter: "enumFilter", default: "default", disabled: "disabled", context: "context", compareWith: "compareWith", searchField: "searchField" }, outputs: { onValueChange: "change", onItemChange: "itemChange", onSelected: "selected", onItemSelected: "itemSelected", onLaunch: "launch" }, usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: AbstractSelectFormField, decorators: [{
             type: Directive
@@ -16607,6 +16755,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                 type: Input
             }], enumFilter: [{
                 type: Input
+            }], default: [{
+                type: Input
             }], disabled: [{
                 type: Input
             }], context: [{
@@ -16795,7 +16945,7 @@ class VdSelectComponent extends AbstractSelectFormField {
                 provide: MAT_SELECT_CONFIG,
                 useValue: { overlayPanelClass: 'vd-select-filter-overlay' }
             }
-        ], queries: [{ propertyName: "optionTemplate", first: true, predicate: VdSelectOptionDirective, descendants: true }, { propertyName: "triggerTemplate", first: true, predicate: VdSelectTriggerDirective, descendants: true }], viewQueries: [{ propertyName: "selectEl", first: true, predicate: MatSelect, descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-select [placeholder]=\"placeholder\" i18n-placeholder [(ngModel)]=\"value\" #select=\"matSelect\" (selectionChange)=\"handleChange($event)\" [hidden]=\"readonly\" [multiple]=\"multiple\" [compareWith]=\"compareWith??defaultCompareWith\" [disabled]=\"disabled\" flex>\n    <!-- #region Filter input -->\n    <div class=\"mat-mdc-form-field mat-form-field-appearance-fill flex\">\n        <div class=\"mat-mdc-text-field-wrapper mdc-text-field mdc-text-field--filled mdc-text-field--no-label\">\n            <div class=\"mat-mdc-form-field-focus-overlay\"></div>\n            <div class=\"mat-mdc-form-field-flex\">\n                <div class=\"mat-mdc-form-field-infix\" layout=\"row\" flex>\n                    <input matInput #filterInput type=\"text\" placeholder=\"Filter...\" class=\"mat-mdc-input-element vd-select-filter mat-mdc-form-field-input-control mdc-text-field__input\" (keyup)=\"handleFilter($event)\" flex />\n                    @if (filterInput?.value) {\n                        <mat-icon (click)=\"filterInput!.value = ''; handleFilter($event);\" fontSet=\"material-symbols-outlined\">close</mat-icon>\n                    }\n                </div>\n            </div>\n            <div class=\"mdc-line-ripple\"></div>\n        </div>\n    </div>\n    <!-- #endregion -->\n    <!-- #region Selection template -->\n    <ng-template #selectionTemplate let-label=\"label\">\n        <span i18n=\"@@selection\">{ label, select, option {option} other { {{ label }} } }</span>\n    </ng-template>\n    <!-- #endregion -->\n    <!-- #region Option template -->\n    <ng-template #optionTextTemplate let-option=\"option\">\n        <span layout=\"column\" class=\"option-text\" [ngClass]=\"{'option-has-hint': $safeNavigationMigration(option.hint?.length) > 0}\">\n            <ng-template [ngTemplateOutlet]=\"selectionTemplate\" [ngTemplateOutletContext]=\"{ label: option[optionTextProperty] }\"></ng-template>\n            <span class=\"mat-caption text-secondary option-hint\" [matTooltip]=\"option.hint\">{{option.hint}}</span>\n        </span>\n    </ng-template>\n    <!-- #endregion -->\n    <!-- #region Option icon template -->\n    <ng-template #optionIconTemplate let-option=\"option\" let-isAvatar=\"isAvatar\">\n        <!-- #region Property icon -->\n        @if (matIconKey && !svgIconKey) {\n            <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n        }\n        @if (svgIconKey && !matIconKey) {\n            <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n        }\n        <!-- #endregion -->\n        <!-- #region Option icon -->\n        @if (option.icon?.matIcon) {\n            <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\">{{option.icon?.matIcon}}</mat-icon>\n        }\n        @if (option.icon?.svgIcon) {\n            <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [svgIcon]=\"$safeNavigationMigration(option.icon?.svgIcon)\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n        }\n        <!-- #endregion -->\n        <!-- #region Dynamic icon -->\n        @if (optionIcon; as optionIcon) {\n            <ng-template #optionIconTemplate [ngTemplateOutlet]=\"optionIconTemplate\" let-optionIcon=\"optionIcon\" [ngTemplateOutletContext]=\"{ optionIcon: optionIcon(option) }\">\n                @if (optionIcon.svgIcon) {\n                    <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\"></mat-icon>\n                }\n                @if (optionIcon.matIcon) {\n                    <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\">{{optionIcon.matIcon}}</mat-icon>\n                }\n            </ng-template>\n        }\n        <!-- #endregion -->\n    </ng-template>\n    <!-- #endregion -->\n    <!-- #region Option icon template -->\n    <ng-template #optionIconChipAvatarTemplate let-option=\"option\">\n        <!-- #region Property icon -->\n        <span class=\"option-icon\" matChipAvatar>\n            <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n        </span>\n        <!-- #endregion -->\n    </ng-template>\n    <!-- #endregion -->\n    <!-- #region Trigger for launch button -->\n    @if (onLaunch.observed) {\n        <mat-select-trigger [class]=\"triggerCssClass\">\n            <span layout=\"row\" layout-align=\"start center\">\n                @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n                    <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                    <ng-template [ngTemplateOutlet]=\"selectionTemplate\" [ngTemplateOutletContext]=\"{ label: option[optionTextProperty] }\"></ng-template>\n                    @if (!last) {\n                        <span>&nbsp;&nbsp;</span>\n                    }\n                }\n            </span>\n            <mat-icon class=\"vd-select-launch\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\n        </mat-select-trigger>\n    }\n    <!-- #endregion -->\n    <!-- #region Custom trigger template -->\n    @if (!onLaunch.observed && triggerTemplate && triggerTemplate.templateRef) {\n        <mat-select-trigger [class]=\"triggerCssClass\">\n            <ng-template [ngTemplateOutlet]=\"triggerTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: selectedOptions }\"></ng-template>\n        </mat-select-trigger>\n    }\n    <!-- #endregion -->\n    <!-- #region Option template as trigger -->\n    @if (!onLaunch.observed && !triggerTemplate?.templateRef && optionTemplate?.templateRef) {\n        <mat-select-trigger [class]=\"triggerCssClass\">\n            <span layout=\"row\" layout-align=\"start center\">\n                @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n                    @if (multiple) {\n                        <mat-chip>\n                            @if(optionIcon || matIconKey || svgIconKey || option.icon) {\n                                <span matChipAvatar>\n                                    <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                                </span>\n                            }\n                            <ng-template [ngTemplateOutlet]=\"optionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: option, text: option[optionTextProperty] }\"></ng-template>\n                        </mat-chip>\n                    }\n                    @else\n                    {\n                        <span layout=\"row\" layout-align=\"start center\">\n                            <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                            <ng-template [ngTemplateOutlet]=\"optionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: option, text: option[optionTextProperty] }\"></ng-template>\n                        </span>\n                    }\n                    @if (!last) {\n                        <span>&nbsp;&nbsp;</span>\n                    }\n                }\n            </span>\n        </mat-select-trigger>\n    }\n    <!-- #endregion -->\n    <!-- #region Trigger for icons -->\n    @if (!triggerTemplate?.templateRef && !optionTemplate?.templateRef) {\n        <mat-select-trigger>\n            <span layout=\"row\" layout-align=\"start center\" class=\"option-trigger\">\n                @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n                    @if (multiple) {\n                        <mat-chip>\n                            @if(optionIcon || matIconKey || svgIconKey || option.icon) {\n                                <span matChipAvatar>\n                                    <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                                </span>\n                            }\n                            <ng-template [ngTemplateOutlet]=\"optionTextTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                        </mat-chip>\n                    }\n                    @else {\n                        <ng-template [ngTemplateOutlet]=\"optionIconChipAvatarTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                        <ng-template [ngTemplateOutlet]=\"optionTextTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                    }\n                    @if (!last) {\n                        <span>&nbsp;&nbsp;</span>\n                    }\n                }\n            </span>\n        </mat-select-trigger>\n    }\n    <!-- #endregion -->\n    <!-- #region Default option -->\n    @if (!multiple && defaultOption) {\n        <mat-option class=\"tc-grey-500\" i18n=\"@@pleaseSelect\">--- Please Select ---</mat-option>\n    }\n    <!-- #endregion -->\n    <!-- #region Options -->\n    @for (option of filteredOptions; track option; let first = $first) {\n        <mat-option [value]=\"mapper ? option : option[optionValueProperty]\" [disabled]=\"$safeNavigationMigration(option?.disabled)\">\n            <!-- #region Property icon -->\n            @if (matIconKey && !svgIconKey) {\n                <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n            } @if (svgIconKey && !matIconKey) {\n                <mat-icon [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n            }\n            <!-- #endregion -->\n            <!-- #region Option icon -->\n            @if (option.icon?.matIcon) {\n                <mat-icon [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\">{{option.icon?.matIcon}}</mat-icon>\n            }\n            @if (option.icon?.svgIcon) {\n                <mat-icon [svgIcon]=\"$safeNavigationMigration(option.icon?.svgIcon)\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n            }\n            <!-- #endregion -->\n            <!-- #region Text -->\n            <span layout=\"column\" layout-align=\"start center\" class=\"option-text\" [ngClass]=\"{'option-has-hint':$safeNavigationMigration(option.hint?.length)>0}\">\n                @if (!optionTemplate?.templateRef) {\n                    <ng-template [ngTemplateOutlet]=\"selectionTemplate\" [ngTemplateOutletContext]=\"{ label: option[optionTextProperty] }\"></ng-template>\n                }\n                @if (optionTemplate && optionTemplate.templateRef) {\n                    <ng-template [ngTemplateOutlet]=\"optionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: option, text: option[optionTextProperty] }\"></ng-template>\n                }\n                <!-- #endregion -->\n                <span class=\"mat-caption text-secondary option-hint\" [matTooltip]=\"option.hint\">{{option.hint}}</span>\n            </span>\n        </mat-option>\n    }\n    <!-- #endregion -->\n</mat-select>\n<!-- #region Read only value -->\n@if (readonly) {\n    @if (currentValue) {\n        <div class=\"readonly-value\">\n            @if (!optionTemplate?.templateRef && !triggerTemplate?.templateRef) {\n                <span layout=\"row\" layout-align=\"start center\" class=\"readonly-content\">\n                    @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n                        <span layout=\"row\" layout-align=\"start center\">\n                            @if(!this.multiple) {\n                                @if(optionIcon || matIconKey || svgIconKey || option.icon) {\n                                    <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\n                                    <span>&nbsp;&nbsp;</span>\n                                }\n                                <span class=\"readonly-ellipsis-text\">\n                                    <ng-template [ngTemplateOutlet]=\"selectionTemplate\" [ngTemplateOutletContext]=\"{ label: currentValue[optionTextProperty] }\"></ng-template>\n                                </span>\n                            }\n                            @else if(currentValue[i]){\n                                <mat-chip>\n                                    @if(optionIcon || matIconKey || svgIconKey || option.icon) {\n                                        <span matChipAvatar>\n                                            <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: currentValue[i] }\"></ng-template>\n                                        </span>\n                                    }\n                                    <ng-template [ngTemplateOutlet]=\"selectionTemplate\" [ngTemplateOutletContext]=\"{ label: currentValue[i][optionTextProperty] }\"></ng-template>\n                                </mat-chip>\n                            }\n                        </span>\n                        @if (!last) {\n                            <span>&nbsp;&nbsp;</span>\n                        }\n                    }\n                </span>\n            }\n            @if (triggerTemplate && triggerTemplate.templateRef) {\n                <span layout=\"row\" layout-align=\"start center\" class=\"option-trigger readonly-content\">\n                    <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\n                    <span>&nbsp;&nbsp;</span>\n                    <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\n                    <span class=\"readonly-ellipsis-text\">\n                        <ng-template [ngTemplateOutlet]=\"triggerTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: currentValue }\"></ng-template>\n                    </span>\n                </span>\n            }\n            @if (optionTemplate && optionTemplate.templateRef && !triggerTemplate?.templateRef) {\n                <span layout=\"row\" layout-align=\"start center\" class=\"option-trigger readonly-content\">\n                    <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\n                    <span>&nbsp;&nbsp;</span>\n                    <span class=\"readonly-ellipsis-text\">\n                        <ng-template [ngTemplateOutlet]=\"optionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: currentValue, text: currentValue[optionTextProperty] }\"></ng-template>\n                    </span>\n                </span>\n            }\n        </div>\n        @if (onLaunch.observed) {\n            <mat-icon class=\"vd-select-launch-readonly\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\n        }\n    }\n    @if (!currentValue) {\n        <div>&nbsp;</div>\n    }\n}\n<!-- #endregion -->", styles: [":host{display:block;width:100%;min-width:0}.vd-select-launch{position:absolute;right:30px;top:-5px;font-size:18px;cursor:pointer}.readonly-value{padding-right:24px;opacity:.6;min-height:15px;display:flex;align-items:center;width:0;flex:1 1 auto;max-width:100%;min-width:0;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.readonly-value>*{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.readonly-value .readonly-content{display:flex;align-items:center;width:0;flex:1 1 auto;max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.readonly-value .readonly-ellipsis-text{display:block;flex:1 1 auto;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.readonly-value .readonly-content [layout=row],.readonly-value .readonly-content .option-text,.readonly-value .readonly-content .mat-mdc-chip,.readonly-value .readonly-content .mat-mdc-chip-action-label,.readonly-value .readonly-content .mat-mdc-standard-chip{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vd-select-launch-readonly{position:absolute;right:0;top:9px;font-size:18px;cursor:pointer}.vd-select-filter-wrap{background:inherit;position:sticky;top:-8px;box-sizing:border-box;z-index:100}.vd-select-filter-wrap .vd-select-filter-inner{z-index:100;display:flex;flex-direction:row;align-items:center;background:inherit}.vd-select-filter-wrap .vd-select-filter-inner .vd-select-filter{box-shadow:none;padding:16px 16px 16px 0;box-sizing:border-box;width:100%;border:none;background-color:inherit;color:inherit}.vd-select-filter-wrap .vd-select-filter-inner .vd-select-filter:focus-visible{border:none;outline:none}.vd-select-filter-wrap .mat-divider{display:block;width:100%;border-top-width:1px;border-top-style:solid;box-sizing:border-box}::ng-deep .mat-mdc-select-trigger{display:flex!important}::ng-deep .mat-mdc-select-trigger .mat-icon{display:flex;margin-right:8px}::ng-deep .mat-mdc-form-field-type-vd-select .mat-mdc-form-field-infix{display:flex;align-items:center;min-width:0;max-width:100%;width:100%}::ng-deep .mat-mdc-form-field-type-vd-select-multiple .mat-mdc-form-field-infix{padding-top:4px!important;padding-bottom:4px!important}::ng-deep .mat-mdc-form-field-type-vd-select-multiple .mat-mdc-form-field-infix .mat-mdc-select-trigger{height:100%}.mat-mdc-select mat-select-trigger .option-text,.mat-mdc-select .mat-mdc-option .option-text{display:contents!important}.mat-mdc-select mat-select-trigger .option-text.option-has-hint,.mat-mdc-select .mat-mdc-option .option-text.option-has-hint{line-height:.92em}.mat-mdc-select mat-select-trigger .option-text .option-hint,.mat-mdc-select .mat-mdc-option .option-text .option-hint{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}.mat-mdc-select:not(.mat-mdc-select-multiple) mat-select-trigger .option-text,.mat-mdc-select:not(.mat-mdc-select-multiple) .mat-mdc-option .option-text{width:calc(100% - 36px)}.mat-mdc-select:not(.mat-mdc-select-multiple) mat-select-trigger .mat-mdc-form-field-infix{padding-top:8px;padding-bottom:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i2$2.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i7.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: i7.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+        ], queries: [{ propertyName: "optionTemplate", first: true, predicate: VdSelectOptionDirective, descendants: true }, { propertyName: "triggerTemplate", first: true, predicate: VdSelectTriggerDirective, descendants: true }], viewQueries: [{ propertyName: "selectEl", first: true, predicate: MatSelect, descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-select [placeholder]=\"placeholder\" i18n-placeholder [(ngModel)]=\"value\" #select=\"matSelect\" (selectionChange)=\"handleChange($event)\" [hidden]=\"readonly\" [multiple]=\"multiple\" [compareWith]=\"compareWith??defaultCompareWith\" [disabled]=\"disabled\" flex>\n    <!-- #region Filter input -->\n    <div class=\"mat-mdc-form-field mat-form-field-appearance-fill flex\">\n        <div class=\"mat-mdc-text-field-wrapper mdc-text-field mdc-text-field--filled mdc-text-field--no-label\">\n            <div class=\"mat-mdc-form-field-focus-overlay\"></div>\n            <div class=\"mat-mdc-form-field-flex\">\n                <div class=\"mat-mdc-form-field-infix\" layout=\"row\" flex>\n                    <input matInput #filterInput type=\"text\" placeholder=\"Filter...\" class=\"mat-mdc-input-element vd-select-filter mat-mdc-form-field-input-control mdc-text-field__input\" (keyup)=\"handleFilter($event)\" flex />\n                    @if (filterInput?.value) {\n                        <mat-icon (click)=\"filterInput!.value = ''; handleFilter($event);\" fontSet=\"material-symbols-outlined\">close</mat-icon>\n                    }\n                </div>\n            </div>\n            <div class=\"mdc-line-ripple\"></div>\n        </div>\n    </div>\n    <!-- #endregion -->\n    <!-- #region Selection template -->\n    <ng-template #selectionTemplate let-label=\"label\">\n        <msa-selection-label [label]=\"label\"></msa-selection-label>\n    </ng-template>\n    <!-- #endregion -->\n    <!-- #region Option template -->\n    <ng-template #optionTextTemplate let-option=\"option\">\n        <span layout=\"column\" class=\"option-text\" [ngClass]=\"{'option-has-hint': $safeNavigationMigration(option.hint?.length) > 0}\">\n            <ng-template [ngTemplateOutlet]=\"selectionTemplate\" [ngTemplateOutletContext]=\"{ label: option[optionTextProperty] }\"></ng-template>\n            <span class=\"mat-caption text-secondary option-hint\" [matTooltip]=\"option.hint\">{{option.hint}}</span>\n        </span>\n    </ng-template>\n    <!-- #endregion -->\n    <!-- #region Option icon template -->\n    <ng-template #optionIconTemplate let-option=\"option\" let-isAvatar=\"isAvatar\">\n        <!-- #region Property icon -->\n        @if (matIconKey && !svgIconKey) {\n            <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n        }\n        @if (svgIconKey && !matIconKey) {\n            <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n        }\n        <!-- #endregion -->\n        <!-- #region Option icon -->\n        @if (option.icon?.matIcon) {\n            <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\">{{option.icon?.matIcon}}</mat-icon>\n        }\n        @if (option.icon?.svgIcon) {\n            <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [svgIcon]=\"$safeNavigationMigration(option.icon?.svgIcon)\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n        }\n        <!-- #endregion -->\n        <!-- #region Dynamic icon -->\n        @if (optionIcon; as optionIcon) {\n            <ng-template #optionIconTemplate [ngTemplateOutlet]=\"optionIconTemplate\" let-optionIcon=\"optionIcon\" [ngTemplateOutletContext]=\"{ optionIcon: optionIcon(option) }\">\n                @if (optionIcon.svgIcon) {\n                    <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\"></mat-icon>\n                }\n                @if (optionIcon.matIcon) {\n                    <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\">{{optionIcon.matIcon}}</mat-icon>\n                }\n            </ng-template>\n        }\n        <!-- #endregion -->\n    </ng-template>\n    <!-- #endregion -->\n    <!-- #region Option icon template -->\n    <ng-template #optionIconChipAvatarTemplate let-option=\"option\">\n        <!-- #region Property icon -->\n        <span class=\"option-icon\" matChipAvatar>\n            <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n        </span>\n        <!-- #endregion -->\n    </ng-template>\n    <!-- #endregion -->\n    <!-- #region Trigger for launch button -->\n    @if (onLaunch.observed) {\n        <mat-select-trigger [class]=\"triggerCssClass\">\n            <span layout=\"row\" layout-align=\"start center\">\n                @for (option of selectedOptions; track option?.[optionValueProperty] ?? i; let i = $index; let last = $last) {\n                    <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                    <ng-template [ngTemplateOutlet]=\"selectionTemplate\" [ngTemplateOutletContext]=\"{ label: option[optionTextProperty] }\"></ng-template>\n                    @if (!last) {\n                        <span>&nbsp;&nbsp;</span>\n                    }\n                }\n            </span>\n            <mat-icon class=\"vd-select-launch\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\n        </mat-select-trigger>\n    }\n    <!-- #endregion -->\n    <!-- #region Custom trigger template -->\n    @if (!onLaunch.observed && triggerTemplate && triggerTemplate.templateRef) {\n        <mat-select-trigger [class]=\"triggerCssClass\">\n            <ng-template [ngTemplateOutlet]=\"triggerTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: selectedOptions }\"></ng-template>\n        </mat-select-trigger>\n    }\n    <!-- #endregion -->\n    <!-- #region Option template as trigger -->\n    @if (!onLaunch.observed && !triggerTemplate?.templateRef && optionTemplate?.templateRef) {\n        <mat-select-trigger [class]=\"triggerCssClass\">\n            <span layout=\"row\" layout-align=\"start center\">\n                @for (option of selectedOptions; track option?.[optionValueProperty] ?? i; let i = $index; let last = $last) {\n                    @if (multiple) {\n                        <mat-chip>\n                            @if(optionIcon || matIconKey || svgIconKey || option.icon) {\n                                <span matChipAvatar>\n                                    <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                                </span>\n                            }\n                            <ng-template [ngTemplateOutlet]=\"optionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: option, text: option[optionTextProperty] }\"></ng-template>\n                        </mat-chip>\n                    }\n                    @else\n                    {\n                        <span layout=\"row\" layout-align=\"start center\">\n                            <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                            <ng-template [ngTemplateOutlet]=\"optionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: option, text: option[optionTextProperty] }\"></ng-template>\n                        </span>\n                    }\n                    @if (!last) {\n                        <span>&nbsp;&nbsp;</span>\n                    }\n                }\n            </span>\n        </mat-select-trigger>\n    }\n    <!-- #endregion -->\n    <!-- #region Trigger for icons -->\n    @if (!triggerTemplate?.templateRef && !optionTemplate?.templateRef) {\n        <mat-select-trigger>\n            <span layout=\"row\" layout-align=\"start center\" class=\"option-trigger\">\n                @for (option of selectedOptions; track option?.[optionValueProperty] ?? i; let i = $index; let last = $last) {\n                    @if (multiple) {\n                        <mat-chip>\n                            @if(optionIcon || matIconKey || svgIconKey || option.icon) {\n                                <span matChipAvatar>\n                                    <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                                </span>\n                            }\n                            <ng-template [ngTemplateOutlet]=\"optionTextTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                        </mat-chip>\n                    }\n                    @else {\n                        <ng-template [ngTemplateOutlet]=\"optionIconChipAvatarTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                        <ng-template [ngTemplateOutlet]=\"optionTextTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                    }\n                    @if (!last) {\n                        <span>&nbsp;&nbsp;</span>\n                    }\n                }\n            </span>\n        </mat-select-trigger>\n    }\n    <!-- #endregion -->\n    <!-- #region Default option -->\n    @if (!multiple && defaultOption) {\n        <mat-option class=\"tc-grey-500\" i18n=\"@@pleaseSelect\">--- Please Select ---</mat-option>\n    }\n    <!-- #endregion -->\n    <!-- #region Options -->\n    @for (option of filteredOptions; track option?.[optionValueProperty] ?? $index; let first = $first) {\n        <mat-option [value]=\"mapper ? option : option[optionValueProperty]\" [disabled]=\"$safeNavigationMigration(option?.disabled)\">\n            <!-- #region Property icon -->\n            @if (matIconKey && !svgIconKey) {\n                <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n            } @if (svgIconKey && !matIconKey) {\n                <mat-icon [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n            }\n            <!-- #endregion -->\n            <!-- #region Option icon -->\n            @if (option.icon?.matIcon) {\n                <mat-icon [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\">{{option.icon?.matIcon}}</mat-icon>\n            }\n            @if (option.icon?.svgIcon) {\n                <mat-icon [svgIcon]=\"$safeNavigationMigration(option.icon?.svgIcon)\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n            }\n            <!-- #endregion -->\n            <!-- #region Text -->\n            <span layout=\"column\" layout-align=\"start center\" class=\"option-text\" [ngClass]=\"{'option-has-hint':$safeNavigationMigration(option.hint?.length)>0}\">\n                @if (!optionTemplate?.templateRef) {\n                    <ng-template [ngTemplateOutlet]=\"selectionTemplate\" [ngTemplateOutletContext]=\"{ label: option[optionTextProperty] }\"></ng-template>\n                }\n                @if (optionTemplate && optionTemplate.templateRef) {\n                    <ng-template [ngTemplateOutlet]=\"optionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: option, text: option[optionTextProperty] }\"></ng-template>\n                }\n                <!-- #endregion -->\n                <span class=\"mat-caption text-secondary option-hint\" [matTooltip]=\"option.hint\">{{option.hint}}</span>\n            </span>\n        </mat-option>\n    }\n    <!-- #endregion -->\n</mat-select>\n<!-- #region Read only value -->\n@if (readonly) {\n    @if (currentValue) {\n        <div class=\"readonly-value\">\n            @if (!optionTemplate?.templateRef && !triggerTemplate?.templateRef) {\n                <span layout=\"row\" layout-align=\"start center\" class=\"readonly-content\">\n                    @for (option of selectedOptions; track option?.[optionValueProperty] ?? i; let i = $index; let last = $last) {\n                        <span layout=\"row\" layout-align=\"start center\">\n                            @if(!this.multiple) {\n                                @if(optionIcon || matIconKey || svgIconKey || option.icon) {\n                                    <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\n                                    <span>&nbsp;&nbsp;</span>\n                                }\n                                <span class=\"readonly-ellipsis-text\">\n                                    <ng-template [ngTemplateOutlet]=\"selectionTemplate\" [ngTemplateOutletContext]=\"{ label: currentValue[optionTextProperty] }\"></ng-template>\n                                </span>\n                            }\n                            @else if(currentValue[i]){\n                                <mat-chip>\n                                    @if(optionIcon || matIconKey || svgIconKey || option.icon) {\n                                        <span matChipAvatar>\n                                            <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: currentValue[i] }\"></ng-template>\n                                        </span>\n                                    }\n                                    <ng-template [ngTemplateOutlet]=\"selectionTemplate\" [ngTemplateOutletContext]=\"{ label: currentValue[i][optionTextProperty] }\"></ng-template>\n                                </mat-chip>\n                            }\n                        </span>\n                        @if (!last) {\n                            <span>&nbsp;&nbsp;</span>\n                        }\n                    }\n                </span>\n            }\n            @if (triggerTemplate && triggerTemplate.templateRef) {\n                <span layout=\"row\" layout-align=\"start center\" class=\"option-trigger readonly-content\">\n                    <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\n                    <span>&nbsp;&nbsp;</span>\n                    <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\n                    <span class=\"readonly-ellipsis-text\">\n                        <ng-template [ngTemplateOutlet]=\"triggerTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: currentValue }\"></ng-template>\n                    </span>\n                </span>\n            }\n            @if (optionTemplate && optionTemplate.templateRef && !triggerTemplate?.templateRef) {\n                <span layout=\"row\" layout-align=\"start center\" class=\"option-trigger readonly-content\">\n                    <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\n                    <span>&nbsp;&nbsp;</span>\n                    <span class=\"readonly-ellipsis-text\">\n                        <ng-template [ngTemplateOutlet]=\"optionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: currentValue, text: currentValue[optionTextProperty] }\"></ng-template>\n                    </span>\n                </span>\n            }\n        </div>\n        @if (onLaunch.observed) {\n            <mat-icon class=\"vd-select-launch-readonly\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\n        }\n    }\n    @if (!currentValue) {\n        <div>&nbsp;</div>\n    }\n}\n<!-- #endregion -->", styles: [":host{display:block;width:100%;min-width:0}.vd-select-launch{position:absolute;right:30px;top:-5px;font-size:18px;cursor:pointer}.readonly-value{padding-right:24px;opacity:.6;min-height:15px;display:flex;align-items:center;width:0;flex:1 1 auto;max-width:100%;min-width:0;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.readonly-value>*{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.readonly-value .readonly-content{display:flex;align-items:center;width:0;flex:1 1 auto;max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.readonly-value .readonly-ellipsis-text{display:block;flex:1 1 auto;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.readonly-value .readonly-content [layout=row],.readonly-value .readonly-content .option-text,.readonly-value .readonly-content .mat-mdc-chip,.readonly-value .readonly-content .mat-mdc-chip-action-label,.readonly-value .readonly-content .mat-mdc-standard-chip{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vd-select-launch-readonly{position:absolute;right:0;top:9px;font-size:18px;cursor:pointer}.vd-select-filter-wrap{background:inherit;position:sticky;top:-8px;box-sizing:border-box;z-index:100}.vd-select-filter-wrap .vd-select-filter-inner{z-index:100;display:flex;flex-direction:row;align-items:center;background:inherit}.vd-select-filter-wrap .vd-select-filter-inner .vd-select-filter{box-shadow:none;padding:16px 16px 16px 0;box-sizing:border-box;width:100%;border:none;background-color:inherit;color:inherit}.vd-select-filter-wrap .vd-select-filter-inner .vd-select-filter:focus-visible{border:none;outline:none}.vd-select-filter-wrap .mat-divider{display:block;width:100%;border-top-width:1px;border-top-style:solid;box-sizing:border-box}::ng-deep .mat-mdc-select-trigger{display:flex!important}::ng-deep .mat-mdc-select-trigger .mat-icon{display:flex;margin-right:8px}::ng-deep .mat-mdc-form-field-type-vd-select .mat-mdc-form-field-infix{display:flex;align-items:center;min-width:0;max-width:100%;width:100%}::ng-deep .mat-mdc-form-field-type-vd-select-multiple .mat-mdc-form-field-infix{padding-top:4px!important;padding-bottom:4px!important}::ng-deep .mat-mdc-form-field-type-vd-select-multiple .mat-mdc-form-field-infix .mat-mdc-select-trigger{height:100%}.mat-mdc-select mat-select-trigger .option-text,.mat-mdc-select .mat-mdc-option .option-text{display:contents!important}.mat-mdc-select mat-select-trigger .option-text.option-has-hint,.mat-mdc-select .mat-mdc-option .option-text.option-has-hint{line-height:.92em}.mat-mdc-select mat-select-trigger .option-text .option-hint,.mat-mdc-select .mat-mdc-option .option-text .option-hint{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}.mat-mdc-select:not(.mat-mdc-select-multiple) mat-select-trigger .option-text,.mat-mdc-select:not(.mat-mdc-select-multiple) .mat-mdc-option .option-text{width:calc(100% - 36px)}.mat-mdc-select:not(.mat-mdc-select-multiple) mat-select-trigger .mat-mdc-form-field-infix{padding-top:8px;padding-bottom:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i2$2.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i7.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: i7.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MsaSelectionLabelComponent, selector: "msa-selection-label", inputs: ["label"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: VdSelectComponent, decorators: [{
             type: Component,
@@ -16806,14 +16956,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         MatIconModule,
                         MatChipsModule,
                         MatTooltip,
-                        FormsModule
+                        FormsModule,
+                        MsaSelectionLabelComponent
                     ], changeDetection: ChangeDetectionStrategy.Eager, providers: [
                         { provide: MatFormFieldControl, useExisting: VdSelectComponent },
                         {
                             provide: MAT_SELECT_CONFIG,
                             useValue: { overlayPanelClass: 'vd-select-filter-overlay' }
                         }
-                    ], template: "<mat-select [placeholder]=\"placeholder\" i18n-placeholder [(ngModel)]=\"value\" #select=\"matSelect\" (selectionChange)=\"handleChange($event)\" [hidden]=\"readonly\" [multiple]=\"multiple\" [compareWith]=\"compareWith??defaultCompareWith\" [disabled]=\"disabled\" flex>\n    <!-- #region Filter input -->\n    <div class=\"mat-mdc-form-field mat-form-field-appearance-fill flex\">\n        <div class=\"mat-mdc-text-field-wrapper mdc-text-field mdc-text-field--filled mdc-text-field--no-label\">\n            <div class=\"mat-mdc-form-field-focus-overlay\"></div>\n            <div class=\"mat-mdc-form-field-flex\">\n                <div class=\"mat-mdc-form-field-infix\" layout=\"row\" flex>\n                    <input matInput #filterInput type=\"text\" placeholder=\"Filter...\" class=\"mat-mdc-input-element vd-select-filter mat-mdc-form-field-input-control mdc-text-field__input\" (keyup)=\"handleFilter($event)\" flex />\n                    @if (filterInput?.value) {\n                        <mat-icon (click)=\"filterInput!.value = ''; handleFilter($event);\" fontSet=\"material-symbols-outlined\">close</mat-icon>\n                    }\n                </div>\n            </div>\n            <div class=\"mdc-line-ripple\"></div>\n        </div>\n    </div>\n    <!-- #endregion -->\n    <!-- #region Selection template -->\n    <ng-template #selectionTemplate let-label=\"label\">\n        <span i18n=\"@@selection\">{ label, select, option {option} other { {{ label }} } }</span>\n    </ng-template>\n    <!-- #endregion -->\n    <!-- #region Option template -->\n    <ng-template #optionTextTemplate let-option=\"option\">\n        <span layout=\"column\" class=\"option-text\" [ngClass]=\"{'option-has-hint': $safeNavigationMigration(option.hint?.length) > 0}\">\n            <ng-template [ngTemplateOutlet]=\"selectionTemplate\" [ngTemplateOutletContext]=\"{ label: option[optionTextProperty] }\"></ng-template>\n            <span class=\"mat-caption text-secondary option-hint\" [matTooltip]=\"option.hint\">{{option.hint}}</span>\n        </span>\n    </ng-template>\n    <!-- #endregion -->\n    <!-- #region Option icon template -->\n    <ng-template #optionIconTemplate let-option=\"option\" let-isAvatar=\"isAvatar\">\n        <!-- #region Property icon -->\n        @if (matIconKey && !svgIconKey) {\n            <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n        }\n        @if (svgIconKey && !matIconKey) {\n            <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n        }\n        <!-- #endregion -->\n        <!-- #region Option icon -->\n        @if (option.icon?.matIcon) {\n            <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\">{{option.icon?.matIcon}}</mat-icon>\n        }\n        @if (option.icon?.svgIcon) {\n            <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [svgIcon]=\"$safeNavigationMigration(option.icon?.svgIcon)\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n        }\n        <!-- #endregion -->\n        <!-- #region Dynamic icon -->\n        @if (optionIcon; as optionIcon) {\n            <ng-template #optionIconTemplate [ngTemplateOutlet]=\"optionIconTemplate\" let-optionIcon=\"optionIcon\" [ngTemplateOutletContext]=\"{ optionIcon: optionIcon(option) }\">\n                @if (optionIcon.svgIcon) {\n                    <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\"></mat-icon>\n                }\n                @if (optionIcon.matIcon) {\n                    <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\">{{optionIcon.matIcon}}</mat-icon>\n                }\n            </ng-template>\n        }\n        <!-- #endregion -->\n    </ng-template>\n    <!-- #endregion -->\n    <!-- #region Option icon template -->\n    <ng-template #optionIconChipAvatarTemplate let-option=\"option\">\n        <!-- #region Property icon -->\n        <span class=\"option-icon\" matChipAvatar>\n            <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n        </span>\n        <!-- #endregion -->\n    </ng-template>\n    <!-- #endregion -->\n    <!-- #region Trigger for launch button -->\n    @if (onLaunch.observed) {\n        <mat-select-trigger [class]=\"triggerCssClass\">\n            <span layout=\"row\" layout-align=\"start center\">\n                @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n                    <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                    <ng-template [ngTemplateOutlet]=\"selectionTemplate\" [ngTemplateOutletContext]=\"{ label: option[optionTextProperty] }\"></ng-template>\n                    @if (!last) {\n                        <span>&nbsp;&nbsp;</span>\n                    }\n                }\n            </span>\n            <mat-icon class=\"vd-select-launch\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\n        </mat-select-trigger>\n    }\n    <!-- #endregion -->\n    <!-- #region Custom trigger template -->\n    @if (!onLaunch.observed && triggerTemplate && triggerTemplate.templateRef) {\n        <mat-select-trigger [class]=\"triggerCssClass\">\n            <ng-template [ngTemplateOutlet]=\"triggerTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: selectedOptions }\"></ng-template>\n        </mat-select-trigger>\n    }\n    <!-- #endregion -->\n    <!-- #region Option template as trigger -->\n    @if (!onLaunch.observed && !triggerTemplate?.templateRef && optionTemplate?.templateRef) {\n        <mat-select-trigger [class]=\"triggerCssClass\">\n            <span layout=\"row\" layout-align=\"start center\">\n                @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n                    @if (multiple) {\n                        <mat-chip>\n                            @if(optionIcon || matIconKey || svgIconKey || option.icon) {\n                                <span matChipAvatar>\n                                    <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                                </span>\n                            }\n                            <ng-template [ngTemplateOutlet]=\"optionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: option, text: option[optionTextProperty] }\"></ng-template>\n                        </mat-chip>\n                    }\n                    @else\n                    {\n                        <span layout=\"row\" layout-align=\"start center\">\n                            <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                            <ng-template [ngTemplateOutlet]=\"optionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: option, text: option[optionTextProperty] }\"></ng-template>\n                        </span>\n                    }\n                    @if (!last) {\n                        <span>&nbsp;&nbsp;</span>\n                    }\n                }\n            </span>\n        </mat-select-trigger>\n    }\n    <!-- #endregion -->\n    <!-- #region Trigger for icons -->\n    @if (!triggerTemplate?.templateRef && !optionTemplate?.templateRef) {\n        <mat-select-trigger>\n            <span layout=\"row\" layout-align=\"start center\" class=\"option-trigger\">\n                @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n                    @if (multiple) {\n                        <mat-chip>\n                            @if(optionIcon || matIconKey || svgIconKey || option.icon) {\n                                <span matChipAvatar>\n                                    <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                                </span>\n                            }\n                            <ng-template [ngTemplateOutlet]=\"optionTextTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                        </mat-chip>\n                    }\n                    @else {\n                        <ng-template [ngTemplateOutlet]=\"optionIconChipAvatarTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                        <ng-template [ngTemplateOutlet]=\"optionTextTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                    }\n                    @if (!last) {\n                        <span>&nbsp;&nbsp;</span>\n                    }\n                }\n            </span>\n        </mat-select-trigger>\n    }\n    <!-- #endregion -->\n    <!-- #region Default option -->\n    @if (!multiple && defaultOption) {\n        <mat-option class=\"tc-grey-500\" i18n=\"@@pleaseSelect\">--- Please Select ---</mat-option>\n    }\n    <!-- #endregion -->\n    <!-- #region Options -->\n    @for (option of filteredOptions; track option; let first = $first) {\n        <mat-option [value]=\"mapper ? option : option[optionValueProperty]\" [disabled]=\"$safeNavigationMigration(option?.disabled)\">\n            <!-- #region Property icon -->\n            @if (matIconKey && !svgIconKey) {\n                <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n            } @if (svgIconKey && !matIconKey) {\n                <mat-icon [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n            }\n            <!-- #endregion -->\n            <!-- #region Option icon -->\n            @if (option.icon?.matIcon) {\n                <mat-icon [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\">{{option.icon?.matIcon}}</mat-icon>\n            }\n            @if (option.icon?.svgIcon) {\n                <mat-icon [svgIcon]=\"$safeNavigationMigration(option.icon?.svgIcon)\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n            }\n            <!-- #endregion -->\n            <!-- #region Text -->\n            <span layout=\"column\" layout-align=\"start center\" class=\"option-text\" [ngClass]=\"{'option-has-hint':$safeNavigationMigration(option.hint?.length)>0}\">\n                @if (!optionTemplate?.templateRef) {\n                    <ng-template [ngTemplateOutlet]=\"selectionTemplate\" [ngTemplateOutletContext]=\"{ label: option[optionTextProperty] }\"></ng-template>\n                }\n                @if (optionTemplate && optionTemplate.templateRef) {\n                    <ng-template [ngTemplateOutlet]=\"optionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: option, text: option[optionTextProperty] }\"></ng-template>\n                }\n                <!-- #endregion -->\n                <span class=\"mat-caption text-secondary option-hint\" [matTooltip]=\"option.hint\">{{option.hint}}</span>\n            </span>\n        </mat-option>\n    }\n    <!-- #endregion -->\n</mat-select>\n<!-- #region Read only value -->\n@if (readonly) {\n    @if (currentValue) {\n        <div class=\"readonly-value\">\n            @if (!optionTemplate?.templateRef && !triggerTemplate?.templateRef) {\n                <span layout=\"row\" layout-align=\"start center\" class=\"readonly-content\">\n                    @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n                        <span layout=\"row\" layout-align=\"start center\">\n                            @if(!this.multiple) {\n                                @if(optionIcon || matIconKey || svgIconKey || option.icon) {\n                                    <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\n                                    <span>&nbsp;&nbsp;</span>\n                                }\n                                <span class=\"readonly-ellipsis-text\">\n                                    <ng-template [ngTemplateOutlet]=\"selectionTemplate\" [ngTemplateOutletContext]=\"{ label: currentValue[optionTextProperty] }\"></ng-template>\n                                </span>\n                            }\n                            @else if(currentValue[i]){\n                                <mat-chip>\n                                    @if(optionIcon || matIconKey || svgIconKey || option.icon) {\n                                        <span matChipAvatar>\n                                            <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: currentValue[i] }\"></ng-template>\n                                        </span>\n                                    }\n                                    <ng-template [ngTemplateOutlet]=\"selectionTemplate\" [ngTemplateOutletContext]=\"{ label: currentValue[i][optionTextProperty] }\"></ng-template>\n                                </mat-chip>\n                            }\n                        </span>\n                        @if (!last) {\n                            <span>&nbsp;&nbsp;</span>\n                        }\n                    }\n                </span>\n            }\n            @if (triggerTemplate && triggerTemplate.templateRef) {\n                <span layout=\"row\" layout-align=\"start center\" class=\"option-trigger readonly-content\">\n                    <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\n                    <span>&nbsp;&nbsp;</span>\n                    <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\n                    <span class=\"readonly-ellipsis-text\">\n                        <ng-template [ngTemplateOutlet]=\"triggerTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: currentValue }\"></ng-template>\n                    </span>\n                </span>\n            }\n            @if (optionTemplate && optionTemplate.templateRef && !triggerTemplate?.templateRef) {\n                <span layout=\"row\" layout-align=\"start center\" class=\"option-trigger readonly-content\">\n                    <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\n                    <span>&nbsp;&nbsp;</span>\n                    <span class=\"readonly-ellipsis-text\">\n                        <ng-template [ngTemplateOutlet]=\"optionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: currentValue, text: currentValue[optionTextProperty] }\"></ng-template>\n                    </span>\n                </span>\n            }\n        </div>\n        @if (onLaunch.observed) {\n            <mat-icon class=\"vd-select-launch-readonly\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\n        }\n    }\n    @if (!currentValue) {\n        <div>&nbsp;</div>\n    }\n}\n<!-- #endregion -->", styles: [":host{display:block;width:100%;min-width:0}.vd-select-launch{position:absolute;right:30px;top:-5px;font-size:18px;cursor:pointer}.readonly-value{padding-right:24px;opacity:.6;min-height:15px;display:flex;align-items:center;width:0;flex:1 1 auto;max-width:100%;min-width:0;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.readonly-value>*{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.readonly-value .readonly-content{display:flex;align-items:center;width:0;flex:1 1 auto;max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.readonly-value .readonly-ellipsis-text{display:block;flex:1 1 auto;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.readonly-value .readonly-content [layout=row],.readonly-value .readonly-content .option-text,.readonly-value .readonly-content .mat-mdc-chip,.readonly-value .readonly-content .mat-mdc-chip-action-label,.readonly-value .readonly-content .mat-mdc-standard-chip{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vd-select-launch-readonly{position:absolute;right:0;top:9px;font-size:18px;cursor:pointer}.vd-select-filter-wrap{background:inherit;position:sticky;top:-8px;box-sizing:border-box;z-index:100}.vd-select-filter-wrap .vd-select-filter-inner{z-index:100;display:flex;flex-direction:row;align-items:center;background:inherit}.vd-select-filter-wrap .vd-select-filter-inner .vd-select-filter{box-shadow:none;padding:16px 16px 16px 0;box-sizing:border-box;width:100%;border:none;background-color:inherit;color:inherit}.vd-select-filter-wrap .vd-select-filter-inner .vd-select-filter:focus-visible{border:none;outline:none}.vd-select-filter-wrap .mat-divider{display:block;width:100%;border-top-width:1px;border-top-style:solid;box-sizing:border-box}::ng-deep .mat-mdc-select-trigger{display:flex!important}::ng-deep .mat-mdc-select-trigger .mat-icon{display:flex;margin-right:8px}::ng-deep .mat-mdc-form-field-type-vd-select .mat-mdc-form-field-infix{display:flex;align-items:center;min-width:0;max-width:100%;width:100%}::ng-deep .mat-mdc-form-field-type-vd-select-multiple .mat-mdc-form-field-infix{padding-top:4px!important;padding-bottom:4px!important}::ng-deep .mat-mdc-form-field-type-vd-select-multiple .mat-mdc-form-field-infix .mat-mdc-select-trigger{height:100%}.mat-mdc-select mat-select-trigger .option-text,.mat-mdc-select .mat-mdc-option .option-text{display:contents!important}.mat-mdc-select mat-select-trigger .option-text.option-has-hint,.mat-mdc-select .mat-mdc-option .option-text.option-has-hint{line-height:.92em}.mat-mdc-select mat-select-trigger .option-text .option-hint,.mat-mdc-select .mat-mdc-option .option-text .option-hint{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}.mat-mdc-select:not(.mat-mdc-select-multiple) mat-select-trigger .option-text,.mat-mdc-select:not(.mat-mdc-select-multiple) .mat-mdc-option .option-text{width:calc(100% - 36px)}.mat-mdc-select:not(.mat-mdc-select-multiple) mat-select-trigger .mat-mdc-form-field-infix{padding-top:8px;padding-bottom:8px}\n"] }]
+                    ], template: "<mat-select [placeholder]=\"placeholder\" i18n-placeholder [(ngModel)]=\"value\" #select=\"matSelect\" (selectionChange)=\"handleChange($event)\" [hidden]=\"readonly\" [multiple]=\"multiple\" [compareWith]=\"compareWith??defaultCompareWith\" [disabled]=\"disabled\" flex>\n    <!-- #region Filter input -->\n    <div class=\"mat-mdc-form-field mat-form-field-appearance-fill flex\">\n        <div class=\"mat-mdc-text-field-wrapper mdc-text-field mdc-text-field--filled mdc-text-field--no-label\">\n            <div class=\"mat-mdc-form-field-focus-overlay\"></div>\n            <div class=\"mat-mdc-form-field-flex\">\n                <div class=\"mat-mdc-form-field-infix\" layout=\"row\" flex>\n                    <input matInput #filterInput type=\"text\" placeholder=\"Filter...\" class=\"mat-mdc-input-element vd-select-filter mat-mdc-form-field-input-control mdc-text-field__input\" (keyup)=\"handleFilter($event)\" flex />\n                    @if (filterInput?.value) {\n                        <mat-icon (click)=\"filterInput!.value = ''; handleFilter($event);\" fontSet=\"material-symbols-outlined\">close</mat-icon>\n                    }\n                </div>\n            </div>\n            <div class=\"mdc-line-ripple\"></div>\n        </div>\n    </div>\n    <!-- #endregion -->\n    <!-- #region Selection template -->\n    <ng-template #selectionTemplate let-label=\"label\">\n        <msa-selection-label [label]=\"label\"></msa-selection-label>\n    </ng-template>\n    <!-- #endregion -->\n    <!-- #region Option template -->\n    <ng-template #optionTextTemplate let-option=\"option\">\n        <span layout=\"column\" class=\"option-text\" [ngClass]=\"{'option-has-hint': $safeNavigationMigration(option.hint?.length) > 0}\">\n            <ng-template [ngTemplateOutlet]=\"selectionTemplate\" [ngTemplateOutletContext]=\"{ label: option[optionTextProperty] }\"></ng-template>\n            <span class=\"mat-caption text-secondary option-hint\" [matTooltip]=\"option.hint\">{{option.hint}}</span>\n        </span>\n    </ng-template>\n    <!-- #endregion -->\n    <!-- #region Option icon template -->\n    <ng-template #optionIconTemplate let-option=\"option\" let-isAvatar=\"isAvatar\">\n        <!-- #region Property icon -->\n        @if (matIconKey && !svgIconKey) {\n            <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n        }\n        @if (svgIconKey && !matIconKey) {\n            <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n        }\n        <!-- #endregion -->\n        <!-- #region Option icon -->\n        @if (option.icon?.matIcon) {\n            <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\">{{option.icon?.matIcon}}</mat-icon>\n        }\n        @if (option.icon?.svgIcon) {\n            <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [svgIcon]=\"$safeNavigationMigration(option.icon?.svgIcon)\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n        }\n        <!-- #endregion -->\n        <!-- #region Dynamic icon -->\n        @if (optionIcon; as optionIcon) {\n            <ng-template #optionIconTemplate [ngTemplateOutlet]=\"optionIconTemplate\" let-optionIcon=\"optionIcon\" [ngTemplateOutletContext]=\"{ optionIcon: optionIcon(option) }\">\n                @if (optionIcon.svgIcon) {\n                    <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\"></mat-icon>\n                }\n                @if (optionIcon.matIcon) {\n                    <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\">{{optionIcon.matIcon}}</mat-icon>\n                }\n            </ng-template>\n        }\n        <!-- #endregion -->\n    </ng-template>\n    <!-- #endregion -->\n    <!-- #region Option icon template -->\n    <ng-template #optionIconChipAvatarTemplate let-option=\"option\">\n        <!-- #region Property icon -->\n        <span class=\"option-icon\" matChipAvatar>\n            <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n        </span>\n        <!-- #endregion -->\n    </ng-template>\n    <!-- #endregion -->\n    <!-- #region Trigger for launch button -->\n    @if (onLaunch.observed) {\n        <mat-select-trigger [class]=\"triggerCssClass\">\n            <span layout=\"row\" layout-align=\"start center\">\n                @for (option of selectedOptions; track option?.[optionValueProperty] ?? i; let i = $index; let last = $last) {\n                    <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                    <ng-template [ngTemplateOutlet]=\"selectionTemplate\" [ngTemplateOutletContext]=\"{ label: option[optionTextProperty] }\"></ng-template>\n                    @if (!last) {\n                        <span>&nbsp;&nbsp;</span>\n                    }\n                }\n            </span>\n            <mat-icon class=\"vd-select-launch\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\n        </mat-select-trigger>\n    }\n    <!-- #endregion -->\n    <!-- #region Custom trigger template -->\n    @if (!onLaunch.observed && triggerTemplate && triggerTemplate.templateRef) {\n        <mat-select-trigger [class]=\"triggerCssClass\">\n            <ng-template [ngTemplateOutlet]=\"triggerTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: selectedOptions }\"></ng-template>\n        </mat-select-trigger>\n    }\n    <!-- #endregion -->\n    <!-- #region Option template as trigger -->\n    @if (!onLaunch.observed && !triggerTemplate?.templateRef && optionTemplate?.templateRef) {\n        <mat-select-trigger [class]=\"triggerCssClass\">\n            <span layout=\"row\" layout-align=\"start center\">\n                @for (option of selectedOptions; track option?.[optionValueProperty] ?? i; let i = $index; let last = $last) {\n                    @if (multiple) {\n                        <mat-chip>\n                            @if(optionIcon || matIconKey || svgIconKey || option.icon) {\n                                <span matChipAvatar>\n                                    <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                                </span>\n                            }\n                            <ng-template [ngTemplateOutlet]=\"optionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: option, text: option[optionTextProperty] }\"></ng-template>\n                        </mat-chip>\n                    }\n                    @else\n                    {\n                        <span layout=\"row\" layout-align=\"start center\">\n                            <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                            <ng-template [ngTemplateOutlet]=\"optionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: option, text: option[optionTextProperty] }\"></ng-template>\n                        </span>\n                    }\n                    @if (!last) {\n                        <span>&nbsp;&nbsp;</span>\n                    }\n                }\n            </span>\n        </mat-select-trigger>\n    }\n    <!-- #endregion -->\n    <!-- #region Trigger for icons -->\n    @if (!triggerTemplate?.templateRef && !optionTemplate?.templateRef) {\n        <mat-select-trigger>\n            <span layout=\"row\" layout-align=\"start center\" class=\"option-trigger\">\n                @for (option of selectedOptions; track option?.[optionValueProperty] ?? i; let i = $index; let last = $last) {\n                    @if (multiple) {\n                        <mat-chip>\n                            @if(optionIcon || matIconKey || svgIconKey || option.icon) {\n                                <span matChipAvatar>\n                                    <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                                </span>\n                            }\n                            <ng-template [ngTemplateOutlet]=\"optionTextTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                        </mat-chip>\n                    }\n                    @else {\n                        <ng-template [ngTemplateOutlet]=\"optionIconChipAvatarTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                        <ng-template [ngTemplateOutlet]=\"optionTextTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                    }\n                    @if (!last) {\n                        <span>&nbsp;&nbsp;</span>\n                    }\n                }\n            </span>\n        </mat-select-trigger>\n    }\n    <!-- #endregion -->\n    <!-- #region Default option -->\n    @if (!multiple && defaultOption) {\n        <mat-option class=\"tc-grey-500\" i18n=\"@@pleaseSelect\">--- Please Select ---</mat-option>\n    }\n    <!-- #endregion -->\n    <!-- #region Options -->\n    @for (option of filteredOptions; track option?.[optionValueProperty] ?? $index; let first = $first) {\n        <mat-option [value]=\"mapper ? option : option[optionValueProperty]\" [disabled]=\"$safeNavigationMigration(option?.disabled)\">\n            <!-- #region Property icon -->\n            @if (matIconKey && !svgIconKey) {\n                <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n            } @if (svgIconKey && !matIconKey) {\n                <mat-icon [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n            }\n            <!-- #endregion -->\n            <!-- #region Option icon -->\n            @if (option.icon?.matIcon) {\n                <mat-icon [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\">{{option.icon?.matIcon}}</mat-icon>\n            }\n            @if (option.icon?.svgIcon) {\n                <mat-icon [svgIcon]=\"$safeNavigationMigration(option.icon?.svgIcon)\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n            }\n            <!-- #endregion -->\n            <!-- #region Text -->\n            <span layout=\"column\" layout-align=\"start center\" class=\"option-text\" [ngClass]=\"{'option-has-hint':$safeNavigationMigration(option.hint?.length)>0}\">\n                @if (!optionTemplate?.templateRef) {\n                    <ng-template [ngTemplateOutlet]=\"selectionTemplate\" [ngTemplateOutletContext]=\"{ label: option[optionTextProperty] }\"></ng-template>\n                }\n                @if (optionTemplate && optionTemplate.templateRef) {\n                    <ng-template [ngTemplateOutlet]=\"optionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: option, text: option[optionTextProperty] }\"></ng-template>\n                }\n                <!-- #endregion -->\n                <span class=\"mat-caption text-secondary option-hint\" [matTooltip]=\"option.hint\">{{option.hint}}</span>\n            </span>\n        </mat-option>\n    }\n    <!-- #endregion -->\n</mat-select>\n<!-- #region Read only value -->\n@if (readonly) {\n    @if (currentValue) {\n        <div class=\"readonly-value\">\n            @if (!optionTemplate?.templateRef && !triggerTemplate?.templateRef) {\n                <span layout=\"row\" layout-align=\"start center\" class=\"readonly-content\">\n                    @for (option of selectedOptions; track option?.[optionValueProperty] ?? i; let i = $index; let last = $last) {\n                        <span layout=\"row\" layout-align=\"start center\">\n                            @if(!this.multiple) {\n                                @if(optionIcon || matIconKey || svgIconKey || option.icon) {\n                                    <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\n                                    <span>&nbsp;&nbsp;</span>\n                                }\n                                <span class=\"readonly-ellipsis-text\">\n                                    <ng-template [ngTemplateOutlet]=\"selectionTemplate\" [ngTemplateOutletContext]=\"{ label: currentValue[optionTextProperty] }\"></ng-template>\n                                </span>\n                            }\n                            @else if(currentValue[i]){\n                                <mat-chip>\n                                    @if(optionIcon || matIconKey || svgIconKey || option.icon) {\n                                        <span matChipAvatar>\n                                            <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: currentValue[i] }\"></ng-template>\n                                        </span>\n                                    }\n                                    <ng-template [ngTemplateOutlet]=\"selectionTemplate\" [ngTemplateOutletContext]=\"{ label: currentValue[i][optionTextProperty] }\"></ng-template>\n                                </mat-chip>\n                            }\n                        </span>\n                        @if (!last) {\n                            <span>&nbsp;&nbsp;</span>\n                        }\n                    }\n                </span>\n            }\n            @if (triggerTemplate && triggerTemplate.templateRef) {\n                <span layout=\"row\" layout-align=\"start center\" class=\"option-trigger readonly-content\">\n                    <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\n                    <span>&nbsp;&nbsp;</span>\n                    <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\n                    <span class=\"readonly-ellipsis-text\">\n                        <ng-template [ngTemplateOutlet]=\"triggerTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: currentValue }\"></ng-template>\n                    </span>\n                </span>\n            }\n            @if (optionTemplate && optionTemplate.templateRef && !triggerTemplate?.templateRef) {\n                <span layout=\"row\" layout-align=\"start center\" class=\"option-trigger readonly-content\">\n                    <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\n                    <span>&nbsp;&nbsp;</span>\n                    <span class=\"readonly-ellipsis-text\">\n                        <ng-template [ngTemplateOutlet]=\"optionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: currentValue, text: currentValue[optionTextProperty] }\"></ng-template>\n                    </span>\n                </span>\n            }\n        </div>\n        @if (onLaunch.observed) {\n            <mat-icon class=\"vd-select-launch-readonly\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\n        }\n    }\n    @if (!currentValue) {\n        <div>&nbsp;</div>\n    }\n}\n<!-- #endregion -->", styles: [":host{display:block;width:100%;min-width:0}.vd-select-launch{position:absolute;right:30px;top:-5px;font-size:18px;cursor:pointer}.readonly-value{padding-right:24px;opacity:.6;min-height:15px;display:flex;align-items:center;width:0;flex:1 1 auto;max-width:100%;min-width:0;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.readonly-value>*{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.readonly-value .readonly-content{display:flex;align-items:center;width:0;flex:1 1 auto;max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.readonly-value .readonly-ellipsis-text{display:block;flex:1 1 auto;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.readonly-value .readonly-content [layout=row],.readonly-value .readonly-content .option-text,.readonly-value .readonly-content .mat-mdc-chip,.readonly-value .readonly-content .mat-mdc-chip-action-label,.readonly-value .readonly-content .mat-mdc-standard-chip{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vd-select-launch-readonly{position:absolute;right:0;top:9px;font-size:18px;cursor:pointer}.vd-select-filter-wrap{background:inherit;position:sticky;top:-8px;box-sizing:border-box;z-index:100}.vd-select-filter-wrap .vd-select-filter-inner{z-index:100;display:flex;flex-direction:row;align-items:center;background:inherit}.vd-select-filter-wrap .vd-select-filter-inner .vd-select-filter{box-shadow:none;padding:16px 16px 16px 0;box-sizing:border-box;width:100%;border:none;background-color:inherit;color:inherit}.vd-select-filter-wrap .vd-select-filter-inner .vd-select-filter:focus-visible{border:none;outline:none}.vd-select-filter-wrap .mat-divider{display:block;width:100%;border-top-width:1px;border-top-style:solid;box-sizing:border-box}::ng-deep .mat-mdc-select-trigger{display:flex!important}::ng-deep .mat-mdc-select-trigger .mat-icon{display:flex;margin-right:8px}::ng-deep .mat-mdc-form-field-type-vd-select .mat-mdc-form-field-infix{display:flex;align-items:center;min-width:0;max-width:100%;width:100%}::ng-deep .mat-mdc-form-field-type-vd-select-multiple .mat-mdc-form-field-infix{padding-top:4px!important;padding-bottom:4px!important}::ng-deep .mat-mdc-form-field-type-vd-select-multiple .mat-mdc-form-field-infix .mat-mdc-select-trigger{height:100%}.mat-mdc-select mat-select-trigger .option-text,.mat-mdc-select .mat-mdc-option .option-text{display:contents!important}.mat-mdc-select mat-select-trigger .option-text.option-has-hint,.mat-mdc-select .mat-mdc-option .option-text.option-has-hint{line-height:.92em}.mat-mdc-select mat-select-trigger .option-text .option-hint,.mat-mdc-select .mat-mdc-option .option-text .option-hint{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}.mat-mdc-select:not(.mat-mdc-select-multiple) mat-select-trigger .option-text,.mat-mdc-select:not(.mat-mdc-select-multiple) .mat-mdc-option .option-text{width:calc(100% - 36px)}.mat-mdc-select:not(.mat-mdc-select-multiple) mat-select-trigger .mat-mdc-form-field-infix{padding-top:8px;padding-bottom:8px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { optionTemplate: [{
                 type: ContentChild,
                 args: [VdSelectOptionDirective]
@@ -16831,7 +16982,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
             }] } });
 
 /**
- * A generic datasource for data-table
+ * @class TableDataSource
+ * @description Provides a server-backed data source with filtering, sorting, pagination,
+ * reloading, and row selection for an Angular Material table.
+ * @template TEntity - The entity type displayed by the table.
+ * @template TService - The service type used to retrieve entities.
  */
 class TableDataSource extends DataSource {
     service;
@@ -16839,180 +16994,176 @@ class TableDataSource extends DataSource {
     sorter;
     /**
      * @property _filterChange
-     * @description Represents a value that changes over time.
-     * Observers can subscribe to this BehaviorSubject to receive filter changes.
+     * @description Stores and emits the current free-text filter.
      * @type {BehaviorSubject<string>}
      */
     _filterChange = new BehaviorSubject('');
     /**
      * @property _reloadChange
-     * @description Represents a value that triggers reload actions.
-     * It is used to notify when a reload should occur by emitting a new value.
+     * @description Emits a new token whenever the table data must be reloaded.
      * @type {BehaviorSubject<number>}
      */
     _reloadChange = new BehaviorSubject(0);
     /**
      * @property onDataLoaded
-     * @description Event emitted after the data is loaded.
-     * It is a BehaviorSubject that holds pagination data or a null value if no data is loaded.
+     * @description Emits the latest pagination response after data loads successfully.
+     * The initial value is `null` until the first response is received.
      * @type {BehaviorSubject<Pagination<TEntity> | any>}
      */
     onDataLoaded = new BehaviorSubject(null);
     /**
      * @property selectionModel
-     * @description Used to power selecting one or more options from a list.
+     * @description Tracks the entities selected across the table.
      * @type {SelectionModel<TEntity>}
      */
     selectionModel = new SelectionModel(true, []);
     /**
      * @property filter
-     * @description Gets the current filter applied to the data.
+     * @description Gets the current free-text filter.
      * @type {string}
      */
     get filter() { return this._filterChange.value; }
     /**
      * @property filter
-     * @description Sets the filter and resets the page index if the paginator exists.
-     * @param {string} filter - The filter value to be applied.
+     * @description Sets the free-text filter and returns pagination to the first page.
+     * @param {string} filter - The filter text to apply.
      */
     set filter(filter) {
-        /* If paginator exists, reset the page index */
+        /* Reset the paginator and cached page index before applying the filter. */
         if (this.paginator) {
             this.paginator.pageIndex = 0;
             this.pageIndex = 0;
         }
-        /* Trigger filter change */
+        /* Publish the updated filter to connected table views. */
         this._filterChange.next(filter);
     }
     /**
      * @property onSortChange
-     * @description Sort change event emitter used to notify changes in sorting.
+     * @description Relays changes emitted by the assigned sort controller.
      * @type {EventEmitter<Sort>}
      */
     onSortChange = new EventEmitter();
     /**
      * @property _sort
-     * @description Private instance of MatSort used to control the sorting of the table.
-     * @type {MatSort | null}
+     * @description Stores the sort controller currently assigned to the data source.
+     * @type {MatSort | undefined}
      */
     _sort = new MatSort();
     /**
      * @property sort
-     * @description Gets or sets the MatSort instance used to control the sorting of the table.
-     * Changes in sorting will trigger an update to the table’s rendered data.
+     * @description Gets or sets the sort controller whose changes reload the table data.
      * @type {MatSort | undefined}
      */
     get sort() { return this._sort; }
     set sort(sort) {
-        /* Set the sort and subscribe to sort changes */
+        /* Store the controller and relay its sort changes. */
         this._sort = sort;
         this._sort?.sortChange.subscribe(x => this.onSortChange.emit(x));
     }
     /**
      * @property reloadToken
-     * @description Gets the current reload token, used to trigger reload events.
+     * @description Gets the token emitted by the most recent reload request.
      * @type {number}
      */
     get reloadToken() { return this._reloadChange.value; }
     /**
      * @property isConnected
-     * @description Flag indicating whether the data source is connected.
+     * @description Indicates whether a collection viewer is connected to the data source.
      * @type {boolean}
      */
     isConnected = false;
     /**
      * @property includes
-     * @description The list of navigations to be included in the data query.
+     * @description Lists the related resources to include in each data request.
      * @type {Array<string>}
      */
     includes = [];
     /**
      * @property path
-     * @description The endpoint path for the data source.
+     * @description Specifies the optional service endpoint path used to retrieve data.
      * @type {string | undefined}
      */
     path;
     /**
      * @property projection
-     * @description Defines the fields to be included in the data query projection.
+     * @description Specifies the fields requested from the service, either as a comma-separated
+     * string or an array of field names.
      * @type {string | string[]}
      */
     projection = '';
     /**
      * @property items
-     * @description The list of items to be displayed in the data table.
+     * @description Contains the entities returned for the current page.
      * @type {TEntity[]}
      */
     items = [];
     /**
      * @property parameters
-     * @description The parameters for pagination and sorting.
+     * @description Contains additional parameters returned by the latest data request.
      * @type {any}
      */
     parameters;
     /**
      * @property facets
-     * @description The list of facets for filtering items.
+     * @description Contains the facets returned by the latest data request.
      * @type {Facet[] | undefined}
      */
     facets;
     /**
      * @property fieldFilters
-     * @description A set of field filters applied to the data.
+     * @description Contains mutable field filters applied to data requests.
      * @type {any}
      */
     fieldFilters = {};
     /**
      * @property fieldOperators
-     * @description A set of field operators used for filtering.
+     * @description Contains operators associated with field-based filtering.
      * @type {any}
      */
     fieldOperators = {};
     /**
      * @property staticFieldFilters
-     * @description A set of static field filters applied to the data.
+     * @description Contains persistent field filters applied to every data request.
      * @type {any}
      */
     staticFieldFilters = {};
     /**
      * @property pageIndex
-     * @description The current page index for pagination.
+     * @description Stores the zero-based index of the current page.
      * @type {number}
      */
     pageIndex = 0;
     /**
      * @property total
-     * @description The current total number of items being paged.
+     * @description Stores the total number of entities reported by the service.
      * @type {number}
      */
     total = 0;
     /**
      * @property pageSize
-     * @description The number of items displayed per page in the data-table.
-     * It controls how many records are shown on a single page.
+     * @description Stores the number of entities requested per page.
      * @type {number}
      */
     pageSize = 15;
     /**
      * @property pageCount
-     * @description The total number of pages based on pagination.
+     * @description Stores the total number of pages reported by the service.
      * @type {number}
      */
     pageCount = 0;
     /**
      * @property isLoading
-     * @description Flag to show the loading process when the data is being fetched.
+     * @description Indicates whether a data request is currently in progress.
      * @type {boolean}
      */
     isLoading = false;
     /**
      * @constructor
-     * @description Initializes a new instance of the class and sets up the service, paginator, and sorter.
-     * The paginator and sorter are optional parameters used for handling pagination and sorting logic
-     * for the data displayed in the table.
-     * @param {TService} service - The service used for fetching and managing data.
-     * @param {MatPaginator} [paginator] - The paginator instance used for pagination functionality.
-     * @param {MatSort} [sorter] - The MatSort instance used for sorting functionality.
+     * @description Creates a data source backed by the supplied service and optional Material
+     * pagination and sorting controllers.
+     * @param {TService} service - The service used to retrieve table data.
+     * @param {MatPaginator} [paginator] - The controller used for server-side pagination.
+     * @param {MatSort} [sorter] - The controller used for server-side sorting.
      */
     constructor(service, paginator, sorter) {
         super();
@@ -17022,32 +17173,33 @@ class TableDataSource extends DataSource {
         this.sort = sorter;
     }
     /**
-     * Connects a collection viewer (such as a data-table) to this data source.
-     * @param _ The component that exposes a view over the data provided by this
-     *     data source.
-     * @returns Observable that emits a new value when the data changes.
+     * @method connect
+     * @description Connects a collection viewer and reloads server data when sorting,
+     * pagination, filtering, or the reload token changes.
+     * @param {CollectionViewer} [_] - The viewer that consumes the emitted entities.
+     * @returns {Observable<TEntity[]>} An observable that emits the current page of entities.
      */
     connect(_) {
         this.isConnected = true;
-        /* A list of fields to observe  */
+        /* Collect every source that can trigger a data request. */
         const displayDataChanges = [
             this.onSortChange,
             this.paginator?.page,
             this._filterChange,
             this._reloadChange
         ];
-        /* If the user changes the sort order, reset back to the first page */
+        /* Return to the first page whenever the sort order changes. */
         if (this.paginator) {
             this.onSortChange.subscribe(() => { this.paginator.pageIndex = 0; });
         }
         return merge$1(...displayDataChanges)
             .pipe(skip(1), switchMap$1(() => {
-            /* Flip flag to show that loading has begun */
+            /* Mark the data source as loading before issuing the request. */
             this.isLoading = true;
-            /* Remove empty filters */
+            /* Remove empty values from mutable and persistent field filters. */
             Utils.cleanObject(this.fieldFilters);
             Utils.cleanObject(this.staticFieldFilters);
-            /* Build parameters for the data query */
+            /* Compose the service request from table state and field filters. */
             var params = Object.assign({
                 includes: this.includes,
                 projection: Array.isArray(this.projection) ? this.projection.join(',') : this.projection,
@@ -17057,12 +17209,12 @@ class TableDataSource extends DataSource {
                 sortBy: this.sort?.active,
                 sortOrder: this.sort?.direction
             }, this.fieldFilters ?? {}, this.staticFieldFilters ?? {});
-            /* Load data and return it */
+            /* Retrieve the current page from the configured service endpoint. */
             return this.service.getList(Utils.cleanObject(params), this.path ?? '', { 'CheckOut': 'Yes' });
         }), map$1((result) => {
-            /* Flip flag to show that loading has finished */
+            /* Clear the loading state after receiving a response. */
             this.isLoading = false;
-            /* Update pagination fields */
+            /* Synchronize rows, pagination metadata, facets, and response parameters. */
             this.pageIndex = Math.max(Math.min(result.page - 1, result.pageCount - 1), 0);
             this.total = result.total;
             this.pageSize = result.pageSize;
@@ -17070,28 +17222,29 @@ class TableDataSource extends DataSource {
             this.items = result.items;
             this.facets = result.facets;
             this.parameters = result.parameters;
-            /* Raise onload event */
+            /* Notify subscribers that the response has been applied. */
             this.onDataLoaded.next(result);
             return this.items;
         }), catchError(() => {
-            /* Flip flag to show that loading has finished */
+            /* Clear the loading state and emit an empty page after a request failure. */
             this.isLoading = false;
             return of([]);
         }));
     }
     /**
-     * Disconnects a collection viewer (such as a data-table) from this data source. Can be used
-     * to perform any clean-up or tear-down operations when a view is being destroyed.
-     *
-     * @param _ The component that exposes a view over the data provided by this
-     *     data source.
+     * @method disconnect
+     * @description Marks the data source as disconnected from its collection viewer.
+     * @param {CollectionViewer} _ - The viewer that no longer consumes this data source.
+     * @returns {void}
      */
     disconnect(_) {
         this.isConnected = false;
     }
     /**
-     * Reloads items
-     * @param clearSelection
+     * @method reload
+     * @description Requests fresh data and optionally clears the current row selection.
+     * @param {boolean} [clearSelection=true] - Whether to clear selected entities.
+     * @returns {void}
      */
     reload(clearSelection = true) {
         this._reloadChange.next(Math.random());
@@ -17100,21 +17253,31 @@ class TableDataSource extends DataSource {
         }
     }
     /**
-     * Clears field filters
+     * @method applyFilters
+     * @description Replaces the mutable field filters and requests fresh data.
+     * @param {any} [newFilters={}] - The field filters to apply.
+     * @returns {void}
      */
     applyFilters(newFilters = {}) {
         this.fieldFilters = newFilters || {};
         this.reload();
     }
     /**
-     * Clears field filters
+     * @method clearFilters
+     * @description Resets mutable field filters to the supplied object, or to an empty object
+     * when no replacement is supplied, and requests fresh data.
+     * @param {any} [newFilters={}] - Optional field filters retained after the reset.
+     * @returns {void}
      */
     clearFilters(newFilters = {}) {
         this.fieldFilters = newFilters || {};
         this.reload();
     }
     /**
-     * Checks, whether all items are selected
+     * @method isAllSelected
+     * @description Determines whether the selected entity count matches the total entity count.
+     * An empty selection is never considered complete.
+     * @returns {boolean} `true` when every reported entity is selected; otherwise, `false`.
      */
     isAllSelected() {
         if (this.selectionModel.isEmpty()) {
@@ -17123,9 +17286,13 @@ class TableDataSource extends DataSource {
         return this.selectionModel.selected.length === this.total;
     }
     /**
-     * Toggles selected items
-     * @param checkbox
-     * @param predicate
+     * @method toggleSelect
+     * @description Clears an existing selection or selects each unlocked entity on the current
+     * page that satisfies the optional predicate.
+     * @param {MatCheckboxChange} checkbox - The select-all checkbox change event.
+     * @param {(value: TEntity, index: number, array: TEntity[]) => unknown} [predicate] - Optional
+     * condition used to choose selectable entities.
+     * @returns {void}
      */
     toggleSelect(checkbox, predicate) {
         if (this.selectionModel.hasValue()) {
@@ -17142,11 +17309,23 @@ class TableDataSource extends DataSource {
         }
     }
     /**
-     * Get selected Items
+     * @property getSelected
+     * @description Maps selected entities to the values stored under the specified property key.
+     * @template TType - The expected property value type.
+     * @param {string} key - The entity property key to read.
+     * @returns {TType[]} The selected property values.
      */
     getSelected = (key) => this.selectionModel.selected.map(x => x[key]);
     /**
-     * Get selected Items
+     * @property getSelectedItems
+     * @description Gets all currently selected entities.
+     * @returns {TEntity[]} The selected entities.
+     */
+    getSelectedItems = () => this.selectionModel.selected;
+    /**
+     * @property getSelectedIds
+     * @description Gets the numeric identifiers of all selected entities.
+     * @returns {number[]} The selected entity identifiers.
      */
     getSelectedIds = () => this.getSelected('id');
 }
@@ -18222,7 +18401,7 @@ class FilterSelectComponent {
                 provide: MAT_SELECT_CONFIG,
                 useValue: { overlayPanelClass: 'vd-select-filter-overlay' }
             }
-        ], queries: [{ propertyName: "optionTemplate", first: true, predicate: VdFilterOptionDirective, descendants: true }], viewQueries: [{ propertyName: "selectEl", first: true, predicate: MatSelect, descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }], ngImport: i0, template: "<mat-form-field subscriptSizing=\"dynamic\" [ngClass]=\"{'filter-not-empty': value}\" dense-3 flex>\r\n\t@if (!value && value!=0 && !focused) {\r\n\t\t<span matPrefix (click)=\"$event.stopPropagation();select.open()\">\r\n\t\t\t<mat-icon fontSet=\"material-symbols-outlined\">manage_search</mat-icon>\r\n\t\t</span>\r\n\t}\r\n\t<mat-select type=\"input\" [(ngModel)]=\"value\" [multiple]=\"multiple\" flex #select>\r\n\t\t@if (filterable) {\r\n\t\t\t<mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\" dense-3 flex>\r\n\t\t\t\t<input matInput #filterInput type=\"text\" placeholder=\"Filter...\" class=\"vd-select-filter\" (click)=\"$event.stopPropagation();\" (keyup)=\"handleFilter($event)\" flex>\r\n\t\t\t\t@if (filterInput?.value) {\r\n\t\t\t\t\t<mat-icon (click)=\"$event.stopPropagation(); filterInput!.value = ''; handleFilter($event);\" fontSet=\"material-symbols-outlined\">close</mat-icon>\r\n\t\t\t\t}\r\n\t\t\t</mat-form-field>\r\n\t\t}\r\n\t\t@if (!multiple) {\r\n\t\t\t<mat-option class=\"tc-grey-500\" (click)=\"$event.stopPropagation();\"></mat-option>\r\n\t\t}\r\n\t\t@for (option of filteredOptions; track option; let first = $first) {\r\n\t\t\t<mat-option [value]=\"option[key]\" (click)=\"$event.stopPropagation();\">\r\n\t\t\t\t@if (!optionTemplate?.templateRef) {\r\n\t\t\t\t\t<span i18n=\"@@selection\">{option.name, select, option {option} other {{{option[text]}}}}</span>\r\n\t\t\t\t\t}\r\n\t\t\t\t\t@if (optionTemplate?.templateRef) {\r\n\t\t\t\t\t\t<ng-template [ngTemplateOutlet]=\"optionTemplate!.templateRef\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\r\n\t\t\t\t\t}\r\n\t\t\t</mat-option>\r\n\t\t\t}\r\n\t</mat-select>\r\n</mat-form-field>", styles: [".mat-mdc-form-field mat-icon{opacity:.7}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { 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: MatSelectModule }, { kind: "component", type: i2$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+        ], queries: [{ propertyName: "optionTemplate", first: true, predicate: VdFilterOptionDirective, descendants: true }], viewQueries: [{ propertyName: "selectEl", first: true, predicate: MatSelect, descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }], ngImport: i0, template: "<mat-form-field subscriptSizing=\"dynamic\" [ngClass]=\"{'filter-not-empty': value}\" dense-3 flex>\r\n    @if (!value && value!=0 && !focused) {\r\n        <span matPrefix (click)=\"$event.stopPropagation();select.open()\">\r\n            <mat-icon fontSet=\"material-symbols-outlined\">manage_search</mat-icon>\r\n        </span>\r\n    }\r\n    <mat-select type=\"input\" [(ngModel)]=\"value\" [multiple]=\"multiple\" flex #select>\r\n        @if (filterable) {\r\n            <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\" dense-3 flex>\r\n                <input matInput #filterInput type=\"text\" placeholder=\"Filter...\" class=\"vd-select-filter\" (click)=\"$event.stopPropagation();\" (keyup)=\"handleFilter($event)\" flex>\r\n                @if (filterInput?.value) {\r\n                    <mat-icon (click)=\"$event.stopPropagation(); filterInput!.value = ''; handleFilter($event);\" fontSet=\"material-symbols-outlined\">close</mat-icon>\r\n                }\r\n            </mat-form-field>\r\n        }\r\n        @if (!multiple) {\r\n            <mat-option class=\"tc-grey-500\" (click)=\"$event.stopPropagation();\"></mat-option>\r\n        }\r\n        @for (option of filteredOptions; track option; let first = $first) {\r\n            <mat-option [value]=\"option[key]\" (click)=\"$event.stopPropagation();\">\r\n                @if (!optionTemplate?.templateRef) {\r\n                    <msa-selection-label [label]=\"option[text]\"></msa-selection-label>\r\n                }\r\n                @if (optionTemplate?.templateRef) {\r\n                    <ng-template [ngTemplateOutlet]=\"optionTemplate!.templateRef\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\r\n                }\r\n            </mat-option>\r\n        }\r\n    </mat-select>\r\n</mat-form-field>", styles: [".mat-mdc-form-field mat-icon{opacity:.7}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { 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: MatSelectModule }, { kind: "component", type: i2$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MsaSelectionLabelComponent, selector: "msa-selection-label", inputs: ["label"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: FilterSelectComponent, decorators: [{
             type: Component,
@@ -18232,7 +18411,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         MatFormFieldModule,
                         MatInputModule,
                         MatSelectModule,
-                        MatIconModule
+                        MatIconModule,
+                        MsaSelectionLabelComponent
                     ], changeDetection: ChangeDetectionStrategy.Eager, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
@@ -18243,7 +18423,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                             provide: MAT_SELECT_CONFIG,
                             useValue: { overlayPanelClass: 'vd-select-filter-overlay' }
                         }
-                    ], template: "<mat-form-field subscriptSizing=\"dynamic\" [ngClass]=\"{'filter-not-empty': value}\" dense-3 flex>\r\n\t@if (!value && value!=0 && !focused) {\r\n\t\t<span matPrefix (click)=\"$event.stopPropagation();select.open()\">\r\n\t\t\t<mat-icon fontSet=\"material-symbols-outlined\">manage_search</mat-icon>\r\n\t\t</span>\r\n\t}\r\n\t<mat-select type=\"input\" [(ngModel)]=\"value\" [multiple]=\"multiple\" flex #select>\r\n\t\t@if (filterable) {\r\n\t\t\t<mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\" dense-3 flex>\r\n\t\t\t\t<input matInput #filterInput type=\"text\" placeholder=\"Filter...\" class=\"vd-select-filter\" (click)=\"$event.stopPropagation();\" (keyup)=\"handleFilter($event)\" flex>\r\n\t\t\t\t@if (filterInput?.value) {\r\n\t\t\t\t\t<mat-icon (click)=\"$event.stopPropagation(); filterInput!.value = ''; handleFilter($event);\" fontSet=\"material-symbols-outlined\">close</mat-icon>\r\n\t\t\t\t}\r\n\t\t\t</mat-form-field>\r\n\t\t}\r\n\t\t@if (!multiple) {\r\n\t\t\t<mat-option class=\"tc-grey-500\" (click)=\"$event.stopPropagation();\"></mat-option>\r\n\t\t}\r\n\t\t@for (option of filteredOptions; track option; let first = $first) {\r\n\t\t\t<mat-option [value]=\"option[key]\" (click)=\"$event.stopPropagation();\">\r\n\t\t\t\t@if (!optionTemplate?.templateRef) {\r\n\t\t\t\t\t<span i18n=\"@@selection\">{option.name, select, option {option} other {{{option[text]}}}}</span>\r\n\t\t\t\t\t}\r\n\t\t\t\t\t@if (optionTemplate?.templateRef) {\r\n\t\t\t\t\t\t<ng-template [ngTemplateOutlet]=\"optionTemplate!.templateRef\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\r\n\t\t\t\t\t}\r\n\t\t\t</mat-option>\r\n\t\t\t}\r\n\t</mat-select>\r\n</mat-form-field>", styles: [".mat-mdc-form-field mat-icon{opacity:.7}\n"] }]
+                    ], template: "<mat-form-field subscriptSizing=\"dynamic\" [ngClass]=\"{'filter-not-empty': value}\" dense-3 flex>\r\n    @if (!value && value!=0 && !focused) {\r\n        <span matPrefix (click)=\"$event.stopPropagation();select.open()\">\r\n            <mat-icon fontSet=\"material-symbols-outlined\">manage_search</mat-icon>\r\n        </span>\r\n    }\r\n    <mat-select type=\"input\" [(ngModel)]=\"value\" [multiple]=\"multiple\" flex #select>\r\n        @if (filterable) {\r\n            <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\" dense-3 flex>\r\n                <input matInput #filterInput type=\"text\" placeholder=\"Filter...\" class=\"vd-select-filter\" (click)=\"$event.stopPropagation();\" (keyup)=\"handleFilter($event)\" flex>\r\n                @if (filterInput?.value) {\r\n                    <mat-icon (click)=\"$event.stopPropagation(); filterInput!.value = ''; handleFilter($event);\" fontSet=\"material-symbols-outlined\">close</mat-icon>\r\n                }\r\n            </mat-form-field>\r\n        }\r\n        @if (!multiple) {\r\n            <mat-option class=\"tc-grey-500\" (click)=\"$event.stopPropagation();\"></mat-option>\r\n        }\r\n        @for (option of filteredOptions; track option; let first = $first) {\r\n            <mat-option [value]=\"option[key]\" (click)=\"$event.stopPropagation();\">\r\n                @if (!optionTemplate?.templateRef) {\r\n                    <msa-selection-label [label]=\"option[text]\"></msa-selection-label>\r\n                }\r\n                @if (optionTemplate?.templateRef) {\r\n                    <ng-template [ngTemplateOutlet]=\"optionTemplate!.templateRef\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\r\n                }\r\n            </mat-option>\r\n        }\r\n    </mat-select>\r\n</mat-form-field>", styles: [".mat-mdc-form-field mat-icon{opacity:.7}\n"] }]
         }], ctorParameters: () => [{ type: i1$5.MatTable }, { type: i2$3.CdkColumnDef }], propDecorators: { optionTemplate: [{
                 type: ContentChild,
                 args: [VdFilterOptionDirective]
@@ -18537,6 +18717,10 @@ class VdDynamicTableComponent {
      * Observable tracking the filterable columns displayed in the table.
      */
     displayedFilterColumns$;
+    /**
+     * Name of the last visible sticky-start column used as right boundary marker.
+     */
+    lastStickyStartColumnName;
     /**
      * Input property for row-specific action menu items.
      * Defines actions available in the context menu for each row.
@@ -18687,6 +18871,7 @@ class VdDynamicTableComponent {
             const selectedColumns = (this.columnSets?.length ?? 0) > 0
                 ? this.columns?.filter(c => this.columnSets?.some(set => c.columnSets?.includes(set)))
                 : this.columns;
+            this.updateLastStickyStartColumnName(selectedColumns);
             /* Build the displayed columns by filtering out the excluded columns and mapping to their names */
             this.displayedColumns$ = of(selectedColumns
                 /* Exclude columns that are in the excludedColumns list */
@@ -18793,12 +18978,34 @@ class VdDynamicTableComponent {
     }
     /**
      * A function to to compute the identity of items in an iterable.
-     * @param index
-     * @param item
+     * @param index The index of the column in the array
+     * @param item The column item itself
      */
     columnsTrackBy(index, item) {
         return item.name;
     }
+    /**
+     * Checks if the given column is the last sticky start column
+     * @param column The column to check
+     * @returns True if it is the last sticky start column, false otherwise
+     */
+    isLastStickyStartColumn(column) {
+        return !!column?.sticky && column?.name === this.lastStickyStartColumnName;
+    }
+    /**
+     * Updates the name of the last sticky start column based on the current visible columns.
+     * @param columns The array of table columns to evaluate.
+     */
+    updateLastStickyStartColumnName(columns) {
+        const visibleColumns = columns
+            ?.filter(x => !this.excludedColumns?.includes(x.name))
+            ?.filter(x => !x.hide || !x.hide(this.entityObject, this.parentControl, this.context))
+            ?.filter(x => !x.hidden);
+        const stickyStartColumns = visibleColumns?.filter(x => !!x.sticky && !x.stickyEnd);
+        this.lastStickyStartColumnName = stickyStartColumns?.length
+            ? stickyStartColumns[stickyStartColumns.length - 1].name
+            : undefined;
+    }
     /**
      * Handles row click event
      * @param index
@@ -19011,17 +19218,11 @@ 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<!-- #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: 
+    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\" [class.msa-sticky-start]=\"column.sticky\" [class.msa-sticky-start-last]=\"isLastStickyStartColumn(column)\" [class.msa-sticky-end]=\"column.stickyEnd\" [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)\" [class.msa-sticky-start]=\"column.sticky\" [class.msa-sticky-start-last]=\"isLastStickyStartColumn(column)\" [class.msa-sticky-end]=\"column.stickyEnd\" [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\" [class.msa-sticky-start]=\"column.sticky\" [class.msa-sticky-start-last]=\"isLastStickyStartColumn(column)\" [class.msa-sticky-end]=\"column.stickyEnd\">\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\" #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) <= 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-mdc-cell.cdk-table-sticky,.mat-table-container .mat-mdc-header-cell.cdk-table-sticky,.mat-table-container .mat-mdc-footer-cell.cdk-table-sticky,.mat-table-container .mat-mdc-cell.mat-mdc-table-sticky,.mat-table-container .mat-mdc-header-cell.mat-mdc-table-sticky,.mat-table-container .mat-mdc-footer-cell.mat-mdc-table-sticky{z-index:2}.mat-table-container.mat-table-sticky{overflow-x:scroll;scrollbar-gutter:stable}.mat-table-container.mat-table-sticky .mat-mdc-row>.mat-mdc-cell:not(.msa-sticky-end)+.mat-mdc-cell.msa-sticky-end,.mat-table-container.mat-table-sticky .mat-mdc-row>.mat-mdc-header-cell:not(.msa-sticky-end)+.mat-mdc-header-cell.msa-sticky-end,.mat-table-container.mat-table-sticky .mat-mdc-row>.mat-mdc-footer-cell:not(.msa-sticky-end)+.mat-mdc-footer-cell.msa-sticky-end,.mat-table-container.mat-table-sticky .mat-mdc-header-row>.mat-mdc-cell:not(.msa-sticky-end)+.mat-mdc-cell.msa-sticky-end,.mat-table-container.mat-table-sticky .mat-mdc-header-row>.mat-mdc-header-cell:not(.msa-sticky-end)+.mat-mdc-header-cell.msa-sticky-end,.mat-table-container.mat-table-sticky .mat-mdc-header-row>.mat-mdc-footer-cell:not(.msa-sticky-end)+.mat-mdc-footer-cell.msa-sticky-end,.mat-table-container.mat-table-sticky .mat-mdc-footer-row>.mat-mdc-cell:not(.msa-sticky-end)+.mat-mdc-cell.msa-sticky-end,.mat-table-container.mat-table-sticky .mat-mdc-footer-row>.mat-mdc-header-cell:not(.msa-sticky-end)+.mat-mdc-header-cell.msa-sticky-end,.mat-table-container.mat-table-sticky .mat-mdc-footer-row>.mat-mdc-footer-cell:not(.msa-sticky-end)+.mat-mdc-footer-cell.msa-sticky-end{box-shadow:inset 8px 0 8px -8px #0000003d}.mat-table-container.mat-table-sticky .mat-mdc-row>.mat-mdc-cell.msa-sticky-start.msa-sticky-start-last,.mat-table-container.mat-table-sticky .mat-mdc-row>.mat-mdc-header-cell.msa-sticky-start.msa-sticky-start-last,.mat-table-container.mat-table-sticky .mat-mdc-row>.mat-mdc-footer-cell.msa-sticky-start.msa-sticky-start-last,.mat-table-container.mat-table-sticky .mat-mdc-header-row>.mat-mdc-cell.msa-sticky-start.msa-sticky-start-last,.mat-table-container.mat-table-sticky .mat-mdc-header-row>.mat-mdc-header-cell.msa-sticky-start.msa-sticky-start-last,.mat-table-container.mat-table-sticky .mat-mdc-header-row>.mat-mdc-footer-cell.msa-sticky-start.msa-sticky-start-last,.mat-table-container.mat-table-sticky .mat-mdc-footer-row>.mat-mdc-cell.msa-sticky-start.msa-sticky-start-last,.mat-table-container.mat-table-sticky .mat-mdc-footer-row>.mat-mdc-header-cell.msa-sticky-start.msa-sticky-start-last,.mat-table-container.mat-table-sticky .mat-mdc-footer-row>.mat-mdc-footer-cell.msa-sticky-start.msa-sticky-start-last{box-shadow:inset -8px 0 8px -8px #0000003d}\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: 
                 //----------------------
-                MapPipe, name: "map" }, { kind: "pipe", type: FormGroupPipe, name: "formGroup" }, { kind: "pipe", type: FuncPipe, name: "func" }, { kind: "pipe", type: JoinPipe, name: "join" }, { kind: "pipe", type: PropertyPipe, name: "property" }], animations: [
-            trigger('detailExpand', [
-                state('collapsed', style({ height: '0px', minHeight: '0' })),
-                state('expanded', style({ height: AUTO_STYLE })),
-                transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
-            ]),
-        ], changeDetection: i0.ChangeDetectionStrategy.Eager });
+                MapPipe, name: "map" }, { kind: "pipe", type: FormGroupPipe, name: "formGroup" }, { kind: "pipe", type: FuncPipe, name: "func" }, { kind: "pipe", type: JoinPipe, name: "join" }, { kind: "pipe", type: PropertyPipe, name: "property" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: VdDynamicTableComponent, decorators: [{
             type: Component,
@@ -19059,13 +19260,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         VdDynamicMenuComponent,
                         VdSelectComponent,
                         MsaEnumDisplayComponent
-                    ], changeDetection: ChangeDetectionStrategy.Eager, animations: [
-                        trigger('detailExpand', [
-                            state('collapsed', style({ height: '0px', minHeight: '0' })),
-                            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<!-- #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"] }]
+                    ], changeDetection: ChangeDetectionStrategy.Eager, 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\" [class.msa-sticky-start]=\"column.sticky\" [class.msa-sticky-start-last]=\"isLastStickyStartColumn(column)\" [class.msa-sticky-end]=\"column.stickyEnd\" [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)\" [class.msa-sticky-start]=\"column.sticky\" [class.msa-sticky-start-last]=\"isLastStickyStartColumn(column)\" [class.msa-sticky-end]=\"column.stickyEnd\" [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\" [class.msa-sticky-start]=\"column.sticky\" [class.msa-sticky-start-last]=\"isLastStickyStartColumn(column)\" [class.msa-sticky-end]=\"column.stickyEnd\">\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\" #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) <= 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-mdc-cell.cdk-table-sticky,.mat-table-container .mat-mdc-header-cell.cdk-table-sticky,.mat-table-container .mat-mdc-footer-cell.cdk-table-sticky,.mat-table-container .mat-mdc-cell.mat-mdc-table-sticky,.mat-table-container .mat-mdc-header-cell.mat-mdc-table-sticky,.mat-table-container .mat-mdc-footer-cell.mat-mdc-table-sticky{z-index:2}.mat-table-container.mat-table-sticky{overflow-x:scroll;scrollbar-gutter:stable}.mat-table-container.mat-table-sticky .mat-mdc-row>.mat-mdc-cell:not(.msa-sticky-end)+.mat-mdc-cell.msa-sticky-end,.mat-table-container.mat-table-sticky .mat-mdc-row>.mat-mdc-header-cell:not(.msa-sticky-end)+.mat-mdc-header-cell.msa-sticky-end,.mat-table-container.mat-table-sticky .mat-mdc-row>.mat-mdc-footer-cell:not(.msa-sticky-end)+.mat-mdc-footer-cell.msa-sticky-end,.mat-table-container.mat-table-sticky .mat-mdc-header-row>.mat-mdc-cell:not(.msa-sticky-end)+.mat-mdc-cell.msa-sticky-end,.mat-table-container.mat-table-sticky .mat-mdc-header-row>.mat-mdc-header-cell:not(.msa-sticky-end)+.mat-mdc-header-cell.msa-sticky-end,.mat-table-container.mat-table-sticky .mat-mdc-header-row>.mat-mdc-footer-cell:not(.msa-sticky-end)+.mat-mdc-footer-cell.msa-sticky-end,.mat-table-container.mat-table-sticky .mat-mdc-footer-row>.mat-mdc-cell:not(.msa-sticky-end)+.mat-mdc-cell.msa-sticky-end,.mat-table-container.mat-table-sticky .mat-mdc-footer-row>.mat-mdc-header-cell:not(.msa-sticky-end)+.mat-mdc-header-cell.msa-sticky-end,.mat-table-container.mat-table-sticky .mat-mdc-footer-row>.mat-mdc-footer-cell:not(.msa-sticky-end)+.mat-mdc-footer-cell.msa-sticky-end{box-shadow:inset 8px 0 8px -8px #0000003d}.mat-table-container.mat-table-sticky .mat-mdc-row>.mat-mdc-cell.msa-sticky-start.msa-sticky-start-last,.mat-table-container.mat-table-sticky .mat-mdc-row>.mat-mdc-header-cell.msa-sticky-start.msa-sticky-start-last,.mat-table-container.mat-table-sticky .mat-mdc-row>.mat-mdc-footer-cell.msa-sticky-start.msa-sticky-start-last,.mat-table-container.mat-table-sticky .mat-mdc-header-row>.mat-mdc-cell.msa-sticky-start.msa-sticky-start-last,.mat-table-container.mat-table-sticky .mat-mdc-header-row>.mat-mdc-header-cell.msa-sticky-start.msa-sticky-start-last,.mat-table-container.mat-table-sticky .mat-mdc-header-row>.mat-mdc-footer-cell.msa-sticky-start.msa-sticky-start-last,.mat-table-container.mat-table-sticky .mat-mdc-footer-row>.mat-mdc-cell.msa-sticky-start.msa-sticky-start-last,.mat-table-container.mat-table-sticky .mat-mdc-footer-row>.mat-mdc-header-cell.msa-sticky-start.msa-sticky-start-last,.mat-table-container.mat-table-sticky .mat-mdc-footer-row>.mat-mdc-footer-cell.msa-sticky-start.msa-sticky-start-last{box-shadow:inset -8px 0 8px -8px #0000003d}\n"] }]
         }], ctorParameters: () => [{ type: DynamicBuilder }, { type: i0.ChangeDetectorRef }], propDecorators: { table: [{
                 type: ViewChild,
                 args: ['table']
@@ -19398,18 +19593,10 @@ class VdDynamicTableConfigDialogComponent extends BaseComponent {
         }
         /* Filter columns that are configurable from the provided dynamic table configuration */
         const activeColumnSets = genericList?.dynamicTable?.columnSets || [];
-        /* Filter the columns based on their configurability and active column sets */
+        /* Filter columns that are configurable from the provided dynamic table configuration */
         this.columns = genericList?.dynamicTable?.columns
             ?.filter((x) => x.configurable)
-            ?.filter((x) => {
-            const columnSets = x.columnSets || [];
-            /* If either side has no set constraints, keep the column visible in config */
-            if (!activeColumnSets.length || !columnSets.length) {
-                return true;
-            }
-            /* Otherwise require at least one matching set */
-            return columnSets.some(cs => activeColumnSets.includes(cs));
-        });
+            ?.filter((x) => !activeColumnSets?.length || x.columnSets?.some(cs => activeColumnSets.includes(cs)));
     }
     /**
      * Saves the current column configuration and closes the dialog.
@@ -20488,7 +20675,7 @@ class GenericListComponent extends BaseComponent {
      */
     get [Symbol.toStringTag]() { return 'GenericListComponent'; }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: GenericListComponent, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: GenericListComponent, isStandalone: true, inputs: { backButton: "backButton" }, host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }, { propertyName: "dynamicTable", first: true, predicate: VdDynamicTableComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: GenericListComponent, isStandalone: true, inputs: { columnSets: "columnSets", selectable: "selectable", addable: "addable", editable: "editable", deletable: "deletable", downloadable: "downloadable", duplicable: "duplicable", configurable: "configurable", exportable: "exportable", exportFileName: "exportFileName", sticky: "sticky", backButton: "backButton" }, host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }, { propertyName: "dynamicTable", first: true, predicate: VdDynamicTableComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: GenericListComponent, decorators: [{
             type: Directive
@@ -20498,9 +20685,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
             }], sort: [{
                 type: ViewChild,
                 args: [MatSort, { static: true }]
+            }], columnSets: [{
+                type: Input
             }], dynamicTable: [{
                 type: ViewChild,
                 args: [VdDynamicTableComponent, { static: true }]
+            }], selectable: [{
+                type: Input
+            }], addable: [{
+                type: Input
+            }], editable: [{
+                type: Input
+            }], deletable: [{
+                type: Input
+            }], downloadable: [{
+                type: Input
+            }], duplicable: [{
+                type: Input
+            }], configurable: [{
+                type: Input
+            }], exportable: [{
+                type: Input
+            }], exportFileName: [{
+                type: Input
+            }], sticky: [{
+                type: Input
             }], backButton: [{
                 type: Input
             }], handleKeyboardEvent: [{
@@ -24235,6 +24444,11 @@ class FormFieldDefinition {
      * Defaults to true.
      */
     defaultOption = true;
+    /**
+     * Predicate used to resolve the default option(s) from loaded options.
+     * Return true for the option(s) that should be preselected.
+     */
+    default;
     /**
      * Template function for rendering options in the selection.
      * @param x The current property value.
@@ -25464,7 +25678,7 @@ class MsaGenericFormMsaChipsFieldComponent extends MsaGenericFormFieldBaseCompon
                 <mat-hint>{{field.hint}}</mat-hint>
             } 
             @if (vdChip.emptyResult) {
-                <mat-hint class="tc-red-400" i18n="@@noResultsFound">No results were found.</mat-hint>
+                <mat-hint class="tc-red-400" i18n="@@noResultsFound">No results found</mat-hint>
             } 
             @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {
                 <mat-error>{{errorMessage}}</mat-error>
@@ -25523,7 +25737,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                 <mat-hint>{{field.hint}}</mat-hint>
             } 
             @if (vdChip.emptyResult) {
-                <mat-hint class="tc-red-400" i18n="@@noResultsFound">No results were found.</mat-hint>
+                <mat-hint class="tc-red-400" i18n="@@noResultsFound">No results found</mat-hint>
             } 
             @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {
                 <mat-error>{{errorMessage}}</mat-error>
@@ -25576,7 +25790,7 @@ class VdListComponent extends AbstractSelectFormField {
         this.selectEl?.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: VdListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: VdListComponent, isStandalone: true, selector: "vd-list", host: { classAttribute: "vd-list" }, providers: [{ provide: MatFormFieldControl, useExisting: VdListComponent }], queries: [{ propertyName: "optionTemplate", first: true, predicate: VdListOptionDirective, descendants: true }], viewQueries: [{ propertyName: "selectEl", first: true, predicate: MatSelectionList, descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-selection-list i18n-placeholder [(ngModel)]=\"value\" #select=\"matSelectionList\" (selectionChange)=\"handleChange($event)\" [multiple]=\"multiple\" [compareWith]=\"compareWith??defaultCompareWith\" [disabled]=\"disabled || readonly\" [hideSingleSelectionIndicator]=\"false\" flex>\r\n    <!-- #region Options -->\r\n    @for (option of filteredOptions; track option; let first = $first) {\r\n        <mat-list-option [value]=\"mapper ? option : option[optionValueProperty]\">\r\n            @if (!optionTemplate?.templateRef) {\r\n                <span i18n=\"@@selection\">{option[optionTextProperty], select, option {option} other{{{option[optionTextProperty]}}}}</span>\r\n                } @if (optionTemplate?.templateRef) {\r\n                    <ng-template [ngTemplateOutlet]=\"$safeNavigationMigration(optionTemplate.templateRef)!\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\r\n                }\r\n        </mat-list-option>\r\n        }\r\n        <!-- #endregion -->\r\n</mat-selection-list>", styles: ["::ng-deep .vd-list{overflow:auto;max-height:100%}::ng-deep .mat-mdc-form-field-type-vd-list .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important}::ng-deep .mat-mdc-form-field-type-vd-list .mdc-text-field{padding:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: VdListComponent, isStandalone: true, selector: "vd-list", host: { classAttribute: "vd-list" }, providers: [{ provide: MatFormFieldControl, useExisting: VdListComponent }], queries: [{ propertyName: "optionTemplate", first: true, predicate: VdListOptionDirective, descendants: true }], viewQueries: [{ propertyName: "selectEl", first: true, predicate: MatSelectionList, descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-selection-list i18n-placeholder [(ngModel)]=\"value\" #select=\"matSelectionList\" (selectionChange)=\"handleChange($event)\" [multiple]=\"multiple\" [compareWith]=\"compareWith??defaultCompareWith\" [disabled]=\"disabled || readonly\" [hideSingleSelectionIndicator]=\"false\" flex>\r\n    <!-- #region Options -->\r\n    @for (option of filteredOptions; track option; let first = $first) {\r\n        <mat-list-option [value]=\"mapper ? option : option[optionValueProperty]\">\r\n            @if (!optionTemplate?.templateRef) {\r\n                <msa-selection-label [label]=\"option[optionTextProperty]\"></msa-selection-label>\r\n            }\r\n            @if (optionTemplate?.templateRef) {\r\n                <ng-template [ngTemplateOutlet]=\"$safeNavigationMigration(optionTemplate.templateRef)!\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\r\n            }\r\n        </mat-list-option>\r\n    }\r\n    <!-- #endregion -->\r\n</mat-selection-list>", styles: ["::ng-deep .vd-list{overflow:auto;max-height:100%}::ng-deep .mat-mdc-form-field-type-vd-list .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important}::ng-deep .mat-mdc-form-field-type-vd-list .mdc-text-field{padding:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MsaSelectionLabelComponent, selector: "msa-selection-label", inputs: ["label"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: VdListComponent, decorators: [{
             type: Component,
@@ -25584,8 +25798,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         CommonModule,
                         MatSelectionList,
                         MatListOption,
-                        FormsModule
-                    ], template: "<mat-selection-list i18n-placeholder [(ngModel)]=\"value\" #select=\"matSelectionList\" (selectionChange)=\"handleChange($event)\" [multiple]=\"multiple\" [compareWith]=\"compareWith??defaultCompareWith\" [disabled]=\"disabled || readonly\" [hideSingleSelectionIndicator]=\"false\" flex>\r\n    <!-- #region Options -->\r\n    @for (option of filteredOptions; track option; let first = $first) {\r\n        <mat-list-option [value]=\"mapper ? option : option[optionValueProperty]\">\r\n            @if (!optionTemplate?.templateRef) {\r\n                <span i18n=\"@@selection\">{option[optionTextProperty], select, option {option} other{{{option[optionTextProperty]}}}}</span>\r\n                } @if (optionTemplate?.templateRef) {\r\n                    <ng-template [ngTemplateOutlet]=\"$safeNavigationMigration(optionTemplate.templateRef)!\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\r\n                }\r\n        </mat-list-option>\r\n        }\r\n        <!-- #endregion -->\r\n</mat-selection-list>", styles: ["::ng-deep .vd-list{overflow:auto;max-height:100%}::ng-deep .mat-mdc-form-field-type-vd-list .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important}::ng-deep .mat-mdc-form-field-type-vd-list .mdc-text-field{padding:0}\n"] }]
+                        FormsModule,
+                        MsaSelectionLabelComponent
+                    ], template: "<mat-selection-list i18n-placeholder [(ngModel)]=\"value\" #select=\"matSelectionList\" (selectionChange)=\"handleChange($event)\" [multiple]=\"multiple\" [compareWith]=\"compareWith??defaultCompareWith\" [disabled]=\"disabled || readonly\" [hideSingleSelectionIndicator]=\"false\" flex>\r\n    <!-- #region Options -->\r\n    @for (option of filteredOptions; track option; let first = $first) {\r\n        <mat-list-option [value]=\"mapper ? option : option[optionValueProperty]\">\r\n            @if (!optionTemplate?.templateRef) {\r\n                <msa-selection-label [label]=\"option[optionTextProperty]\"></msa-selection-label>\r\n            }\r\n            @if (optionTemplate?.templateRef) {\r\n                <ng-template [ngTemplateOutlet]=\"$safeNavigationMigration(optionTemplate.templateRef)!\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\r\n            }\r\n        </mat-list-option>\r\n    }\r\n    <!-- #endregion -->\r\n</mat-selection-list>", styles: ["::ng-deep .vd-list{overflow:auto;max-height:100%}::ng-deep .mat-mdc-form-field-type-vd-list .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important}::ng-deep .mat-mdc-form-field-type-vd-list .mdc-text-field{padding:0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { optionTemplate: [{
                 type: ContentChild,
                 args: [VdListOptionDirective]
@@ -25617,6 +25832,7 @@ class MsaGenericFormMsaListFieldComponent extends MsaGenericFormFieldBaseCompone
                      [loadData]="field.fetchCondition | func:formValue:formGroup:context"
                      [optionValueProperty]="field.optionValueProperty"
                      [optionTextProperty]="field.optionTextProperty"
+                     [default]="field.default"
                      [multiple]="field.multiple"
                      [readonly]="(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false"
                      (itemSelected)="field.itemSelect && field.itemSelect($event, formValue, formGroup, context);"
@@ -25655,6 +25871,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                      [loadData]="field.fetchCondition | func:formValue:formGroup:context"
                      [optionValueProperty]="field.optionValueProperty"
                      [optionTextProperty]="field.optionTextProperty"
+                     [default]="field.default"
                      [multiple]="field.multiple"
                      [readonly]="(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false"
                      (itemSelected)="field.itemSelect && field.itemSelect($event, formValue, formGroup, context);"
@@ -25731,6 +25948,7 @@ class MsaGenericFormMsaSelectFieldComponent extends MsaGenericFormFieldBaseCompo
                        [optionValueProperty]="field.optionValueProperty"
                        [optionTextProperty]="field.optionTextProperty"
                        [defaultOption]="field.defaultOption??true"
+                       [default]="field.default"
                        [matIconKey]="field.optionMatIconProperty"
                        [svgIconKey]="field.optionSvgIconProperty"
                        [fontSet]="field.optionIconFontSet"
@@ -25830,6 +26048,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                        [optionValueProperty]="field.optionValueProperty"
                        [optionTextProperty]="field.optionTextProperty"
                        [defaultOption]="field.defaultOption??true"
+                       [default]="field.default"
                        [matIconKey]="field.optionMatIconProperty"
                        [svgIconKey]="field.optionSvgIconProperty"
                        [fontSet]="field.optionIconFontSet"
@@ -28276,7 +28495,7 @@ class VdMenuComponent {
         // this.onMouseLeave.emit({ event: $event, item: item });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: VdMenuComponent, deps: [{ token: VdMediaService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: VdMenuComponent, isStandalone: true, selector: "vd-menu", inputs: { items: "items", activeExact: "activeExact", fontSet: "fontSet", avatar: "avatar", mobile: "mobile" }, outputs: { onClick: "click", onMouseEnter: "over", onMouseLeave: "out" }, ngImport: i0, template: "<mat-nav-list>\r\n    <!-- #region main-menu-accordion -->\r\n    <mat-accordion displayMode=\"flat\">\r\n        @for (item of items; track item; let last = $last) {\r\n            <!-- #region mobile-item-with-submenu -->\r\n            @if ((item?.items?.length ?? 0) > 0 && mobile) {\r\n                <mat-expansion-panel class=\"mat-elevation-z raw\"\r\n                                     (click)=\"$event.stopPropagation();\"\r\n                                     [disabled]=\"!mobile\"\r\n                                     [hideToggle]=\"!mobile || !item?.items?.length\"\r\n                                     [ngClass]=\"{'icon-only': !item.title, 'mobile': mobile}\"\r\n                                     (delayedHover)=\"(item.items?.length ?? 0) > 0 && itemMouseEnter(item.event ? item.event : $event, item)\"\r\n                                     (mouseleave)=\"(item.items?.length ?? 0) >0 && false&& itemMouseLeave(item.event ? item.event : $event, item)\"\r\n                                     [routerLinkActive]=\"['active']\"\r\n                                     [routerLinkActiveOptions]=\"{exact:false}\">\r\n                    <!-- #region mobile-parent-item-header -->\r\n                    <mat-expansion-panel-header [expandedHeight]=\"'48px'\">\r\n                        <mat-panel-title>\r\n                            <!-- #region parent-item-icon-and-title -->\r\n                            @if (!avatar) {\r\n                                <mat-icon [fontSet]=\"fontSet\"\r\n                                          [style.color]=\"item.iconColor\"\r\n                                          [matBadge]=\"item.badge ? item.badge() : null\"\r\n                                          [matBadgeHidden]=\"!item.badge || item.badge() === 0\"\r\n                                          aria-hidden=\"false\">\r\n                                    {{(item.icon | func:item) || 'radio_button_unchecked'}}\r\n                                </mat-icon>\r\n                            }\r\n                            @if (!avatar && item.title) {\r\n                                <span [style.color]=\"item.textColor\">{{item.title}}</span>\r\n                            }\r\n                            @if (avatar) {\r\n                                <mat-icon [fontSet]=\"fontSet\">{{(item.icon | func:item) || 'radio_button_unchecked'}}</mat-icon>\r\n                            }\r\n                            @if (avatar) {\r\n                                <h3>{{item.title}}</h3>\r\n                            }\r\n                            <!-- #endregion -->\r\n                        </mat-panel-title>\r\n                    </mat-expansion-panel-header>\r\n                    <!-- #endregion -->\r\n\r\n                    <!-- #region mobile-submenu-items -->\r\n                    <mat-nav-list>\r\n                        @for (subItem of item.items; track subItem; let subLast = $last) {\r\n                            <!-- #region visible-submenu-link -->\r\n                            @if (subItem.enabled) {\r\n                                <a mat-list-item\r\n                                   [style.backgroundColor]=\"subItem.backgroundColor\"\r\n                                   [routerLink]=\"subItem.path\"\r\n                                   target=\"_{{MenuItemTarget[item.target??0].toLowerCase()}}\"\r\n                                   [routerLinkActive]=\"['active']\" [ngClass]=\"{'icon-only': !subItem.title}\"\r\n                                   [routerLinkActiveOptions]=\"{exact:subItem.activeExact??false}\"\r\n                                   [fragment]=\"subItem.fragment\"\r\n                                   (click)=\"itemClicked($event, subItem)\">\r\n                                    <!-- #region submenu-icon-and-text -->\r\n                                    @if (!avatar) {\r\n                                        <mat-icon [fontSet]=\"fontSet\" [style.color]=\"subItem.iconColor\" aria-hidden=\"false\">\r\n                                            {{(subItem.icon | func:subItem) || 'radio_button_unchecked'}}\r\n                                        </mat-icon>\r\n                                    }\r\n\r\n                                    @if (!avatar && subItem.title) {\r\n                                        <span [style.color]=\"subItem.textColor\">{{subItem.title}}</span>\r\n                                    }\r\n\r\n                                    @if (avatar) {\r\n                                        <mat-icon [fontSet]=\"fontSet\">{{(subItem.icon | func:subItem) || 'radio_button_unchecked'}}</mat-icon>\r\n                                    }\r\n\r\n                                    @if (avatar) {\r\n                                        <h3>{{subItem.title}}</h3>\r\n                                    }\r\n\r\n                                    @if (avatar && subItem.description) {\r\n                                        <p>{{subItem.description}}</p>\r\n                                    }\r\n\r\n                                    @if (subItem.badge && subItem.badge() !== 0) {\r\n                                        <span matListItemMeta\r\n                                              [matBadge]=\"subItem.badge()\"\r\n                                              matBadgeOverlap=\"false\"\r\n                                              matBadgePosition=\"above before\"\r\n                                              class=\"menu-badge-align\">\r\n                                        </span>\r\n                                    }\r\n                                    <!-- #endregion -->\r\n                                </a>\r\n                            }\r\n                            <!-- #endregion -->\r\n\r\n                            <!-- #region submenu-divider-lines -->\r\n                            @if (subItem.divider && !avatar) {\r\n                                <mat-divider></mat-divider>\r\n                            }\r\n                            @if (!subItem.divider && avatar && !subLast) {\r\n                                <mat-divider [inset]=\"avatar\"></mat-divider>\r\n                            }\r\n                            <!-- #endregion -->\r\n                        }\r\n                    </mat-nav-list>\r\n                    <!-- #endregion -->\r\n                </mat-expansion-panel>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region regular-menu-item -->\r\n            } @else {\r\n                <!-- #region regular-item-link -->\r\n                @if (item.enabled) {\r\n                    <a mat-list-item [style.backgroundColor]=\"item.backgroundColor\" [routerLink]=\"item.path\" target=\"_{{MenuItemTarget[item.target??0].toLowerCase()}}\" [routerLinkActive]=\"['active']\" [ngClass]=\"{'icon-only': !item.title}\" [routerLinkActiveOptions]=\"{exact:item.activeExact??false}\" [fragment]=\"item.fragment\" (click)=\"itemClicked($event, item)\" (delayedHover)=\"(item.items?.length ?? 0) > 0 && itemMouseEnter(item.event ? item.event : $event, item)\" (mouseleave)=\"(item.items?.length ?? 0) >0 && false&& itemMouseLeave(item.event ? item.event : $event, item)\">\r\n                        @if (!avatar) {\r\n                            <mat-icon [fontSet]=\"fontSet\"\r\n                                      [style.color]=\"item.iconColor\"\r\n                                      aria-hidden=\"false\"\r\n                                      matListItemIcon>\r\n                                {{(item.icon | func:item) || 'radio_button_unchecked'}}\r\n                            </mat-icon>\r\n                        }\r\n\r\n                        @if (!avatar && item.title) {\r\n                            <span [style.color]=\"item.textColor\" matListItemTitle>{{item.title}}</span>\r\n                        }\r\n\r\n                        @if (avatar) {\r\n                            <mat-icon [fontSet]=\"fontSet\" matListAvatar>{{(item.icon | func:item) || 'radio_button_unchecked'}}</mat-icon>\r\n                        }\r\n\r\n                        @if (avatar) {\r\n                            <h3 matLine>{{item.title}}</h3>\r\n                        }\r\n\r\n                        @if (avatar && item.description) {\r\n                            <p matLine>{{item.description}}</p>\r\n                        }\r\n\r\n                        @if (item.badge && item.badge() !== 0) {\r\n                            <span matListItemMeta\r\n                                  [matBadge]=\"item.badge()\"\r\n                                  matBadgeOverlap=\"false\"\r\n                                  matBadgePosition=\"above before\"\r\n                                  class=\"menu-badge-align\">\r\n                            </span>\r\n                        }\r\n                    </a>\r\n                }\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region regular-item-divider-lines -->\r\n                @if (item.divider && !avatar) {\r\n                    <mat-divider></mat-divider>\r\n                }\r\n                @if (!item.divider && avatar && !last) {\r\n                    <mat-divider [inset]=\"avatar\"></mat-divider>\r\n                }\r\n                <!-- #endregion -->\r\n            }\r\n            <!-- #endregion -->\r\n        }\r\n    </mat-accordion>\r\n    <!-- #endregion -->\r\n</mat-nav-list>", styles: [":host ::ng-deep .mat-mdc-nav-list .mat-mdc-list-item.icon-only .mdc-list-item__content{display:none!important}:host ::ng-deep .mat-expansion-panel{background-color:transparent}:host ::ng-deep .mat-mdc-list-item:not(.active),:host ::ng-deep .mat-mdc-list-item:active,:host ::ng-deep .mat-mdc-list-item:focus,:host ::ng-deep .mat-expansion-panel:not(.active),:host ::ng-deep .mat-expansion-panel:active,:host ::ng-deep .mat-expansion-panel:focus{background-color:transparent!important}:host ::ng-deep .mat-mdc-list-item:not(.active):before,:host ::ng-deep .mat-mdc-list-item:active:before,:host ::ng-deep .mat-mdc-list-item:focus:before,:host ::ng-deep .mat-expansion-panel:not(.active):before,:host ::ng-deep .mat-expansion-panel:active:before,:host ::ng-deep .mat-expansion-panel:focus:before{background-color:transparent!important}:host ::ng-deep .mat-mdc-list-item,:host ::ng-deep .mat-expansion-panel{font-family:var(--mat-expansion-header-text-font, var(--mat-sys-title-medium-font));font-weight:var(--mat-expansion-header-text-weight, var(--mat-sys-title-medium-weight));line-height:var(--mat-expansion-header-text-line-height, var(--mat-sys-title-medium-line-height));letter-spacing:var(--mat-expansion-header-text-tracking, var(--mat-sys-title-medium-tracking))}:host ::ng-deep .mat-mdc-list-item mat-icon,:host ::ng-deep .mat-expansion-panel mat-icon{margin-right:18px;margin-bottom:3px}:host ::ng-deep .mat-mdc-list-item ::ng-deep .mat-expansion-panel-body,:host ::ng-deep .mat-expansion-panel ::ng-deep .mat-expansion-panel-body{padding-bottom:0!important}:host ::ng-deep .mat-mdc-list-item:not(.mobile)>.mat-expansion-panel-header,:host ::ng-deep .mat-expansion-panel:not(.mobile)>.mat-expansion-panel-header{padding:4px 8px}:host ::ng-deep .menu-badge-align{padding-top:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$6.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: i1$6.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i4$4.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i4$4.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i4$4.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "component", type: i6.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i4$4.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i4$4.MatListItemMeta, selector: "[matListItemMeta]" }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i6$1.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i6$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i6$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i6$1.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i8.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: VdDelayedHoverDirective, selector: "[delayedHover]", inputs: ["duration"], outputs: ["delayedHover"], exportAs: ["hesitation"] }, { kind: "pipe", type: FuncPipe, name: "func" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: VdMenuComponent, isStandalone: true, selector: "vd-menu", inputs: { items: "items", activeExact: "activeExact", fontSet: "fontSet", avatar: "avatar", mobile: "mobile" }, outputs: { onClick: "click", onMouseEnter: "over", onMouseLeave: "out" }, ngImport: i0, template: "<mat-nav-list>\r\n    <!-- #region main-menu-accordion -->\r\n    <mat-accordion displayMode=\"flat\">\r\n        @for (item of items; track item; let last = $last) {\r\n            <!-- #region mobile-item-with-submenu -->\r\n            @if ((item?.items?.length ?? 0) > 0 && mobile) {\r\n                <mat-expansion-panel class=\"mat-elevation-z raw\" (click)=\"$event.stopPropagation();\" [disabled]=\"!mobile\" [hideToggle]=\"!mobile || !item?.items?.length\" [ngClass]=\"{'icon-only': !item.title, 'mobile': mobile}\" (delayedHover)=\"(item.items?.length ?? 0) > 0 && itemMouseEnter(item.event ? item.event : $event, item)\" (mouseleave)=\"(item.items?.length ?? 0) >0 && false&& itemMouseLeave(item.event ? item.event : $event, item)\" [routerLinkActive]=\"['active']\" [routerLinkActiveOptions]=\"{exact:false}\" [attr.data-ordering]=\"item.ordering\">\r\n                    <!-- #region mobile-parent-item-header -->\r\n                    <mat-expansion-panel-header [expandedHeight]=\"'48px'\">\r\n                        <mat-panel-title>\r\n                            <!-- #region parent-item-icon-and-title -->\r\n                            @if (!avatar) {\r\n                                <mat-icon [fontSet]=\"fontSet\" [style.color]=\"item.iconColor\" [matBadge]=\"item.badge ? item.badge() : null\" [matBadgeHidden]=\"!item.badge || item.badge() === 0\" aria-hidden=\"false\">\r\n                                    {{(item.icon | func:item) || 'radio_button_unchecked'}}\r\n                                </mat-icon>\r\n                            }\r\n                            @if (!avatar && item.title) {\r\n                                <span [style.color]=\"item.textColor\">{{item.title}}</span>\r\n                            }\r\n                            @if (avatar) {\r\n                                <mat-icon [fontSet]=\"fontSet\">{{(item.icon | func:item) || 'radio_button_unchecked'}}</mat-icon>\r\n                            }\r\n                            @if (avatar) {\r\n                                <h3>{{item.title}}</h3>\r\n                            }\r\n                            <!-- #endregion -->\r\n                        </mat-panel-title>\r\n                    </mat-expansion-panel-header>\r\n                    <!-- #endregion -->\r\n                    <!-- #region mobile-submenu-items -->\r\n                    <mat-nav-list>\r\n                        @for (subItem of item.items; track subItem; let subLast = $last) {\r\n                            <!-- #region visible-submenu-link -->\r\n                            @if (subItem.enabled) {\r\n                                <a mat-list-item [style.backgroundColor]=\"subItem.backgroundColor\" [attr.data-ordering]=\"subItem.ordering\" [routerLink]=\"subItem.path\" target=\"_{{MenuItemTarget[item.target??0].toLowerCase()}}\" [routerLinkActive]=\"['active']\" [ngClass]=\"{'icon-only': !subItem.title}\" [routerLinkActiveOptions]=\"{exact:subItem.activeExact??false}\" [fragment]=\"subItem.fragment\" (click)=\"itemClicked($event, subItem)\">\r\n                                    <!-- #region submenu-icon-and-text -->\r\n                                    @if (!avatar) {\r\n                                        <mat-icon [fontSet]=\"fontSet\" [style.color]=\"subItem.iconColor\" aria-hidden=\"false\">\r\n                                            {{(subItem.icon | func:subItem) || 'radio_button_unchecked'}}\r\n                                        </mat-icon>\r\n                                    }\r\n                                    @if (!avatar && subItem.title) {\r\n                                        <span [style.color]=\"subItem.textColor\">{{subItem.title}}</span>\r\n                                    }\r\n                                    @if (avatar) {\r\n                                        <mat-icon [fontSet]=\"fontSet\">{{(subItem.icon | func:subItem) || 'radio_button_unchecked'}}</mat-icon>\r\n                                    }\r\n                                    @if (avatar) {\r\n                                        <h3>{{subItem.title}}</h3>\r\n                                    }\r\n                                    @if (avatar && subItem.description) {\r\n                                        <p>{{subItem.description}}</p>\r\n                                    }\r\n                                    @if (subItem.badge && subItem.badge() !== 0) {\r\n                                        <span matListItemMeta [matBadge]=\"subItem.badge()\" matBadgeOverlap=\"false\" matBadgePosition=\"above before\" class=\"menu-badge-align\">\r\n                                        </span>\r\n                                    }\r\n                                    <!-- #endregion -->\r\n                                </a>\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region submenu-divider-lines -->\r\n                            @if (subItem.divider && !avatar) {\r\n                                <mat-divider></mat-divider>\r\n                            }\r\n                            @if (!subItem.divider && avatar && !subLast) {\r\n                                <mat-divider [inset]=\"avatar\"></mat-divider>\r\n                            }\r\n                            <!-- #endregion -->\r\n                        }\r\n                    </mat-nav-list>\r\n                    <!-- #endregion -->\r\n                </mat-expansion-panel>\r\n                <!-- #endregion -->\r\n                <!-- #region regular-menu-item -->\r\n            } @else {\r\n                <!-- #region regular-item-link -->\r\n                @if (item.enabled) {\r\n                    <a mat-list-item [style.backgroundColor]=\"item.backgroundColor\" [attr.data-ordering]=\"item.ordering\" [routerLink]=\"item.path\" target=\"_{{MenuItemTarget[item.target??0].toLowerCase()}}\" [routerLinkActive]=\"['active']\" [ngClass]=\"{'icon-only': !item.title}\" [routerLinkActiveOptions]=\"{exact:item.activeExact??false}\" [fragment]=\"item.fragment\" (click)=\"itemClicked($event, item)\" (delayedHover)=\"(item.items?.length ?? 0) > 0 && itemMouseEnter(item.event ? item.event : $event, item)\" (mouseleave)=\"(item.items?.length ?? 0) >0 && false&& itemMouseLeave(item.event ? item.event : $event, item)\">\r\n                        @if (!avatar) {\r\n                            <mat-icon [fontSet]=\"fontSet\" [style.color]=\"item.iconColor\" aria-hidden=\"false\" matListItemIcon>\r\n                                {{(item.icon | func:item) || 'radio_button_unchecked'}}\r\n                            </mat-icon>\r\n                        }\r\n                        @if (!avatar && item.title) {\r\n                            <span [style.color]=\"item.textColor\" matListItemTitle>{{item.title}}</span>\r\n                        }\r\n                        @if (avatar) {\r\n                            <mat-icon [fontSet]=\"fontSet\" matListAvatar>{{(item.icon | func:item) || 'radio_button_unchecked'}}</mat-icon>\r\n                        }\r\n                        @if (avatar) {\r\n                            <h3 matLine>{{item.title}}</h3>\r\n                        }\r\n                        @if (avatar && item.description) {\r\n                            <p matLine>{{item.description}}</p>\r\n                        }\r\n                        @if (item.badge && item.badge() !== 0) {\r\n                            <span matListItemMeta [matBadge]=\"item.badge()\" matBadgeOverlap=\"false\" matBadgePosition=\"above before\" class=\"menu-badge-align\">\r\n                            </span>\r\n                        }\r\n                    </a>\r\n                }\r\n                <!-- #endregion -->\r\n                <!-- #region regular-item-divider-lines -->\r\n                @if (item.divider && !avatar) {\r\n                    <mat-divider></mat-divider>\r\n                }\r\n                @if (!item.divider && avatar && !last) {\r\n                    <mat-divider [inset]=\"avatar\"></mat-divider>\r\n                }\r\n                <!-- #endregion -->\r\n            }\r\n            <!-- #endregion -->\r\n        }\r\n    </mat-accordion>\r\n    <!-- #endregion -->\r\n</mat-nav-list>", styles: [":host ::ng-deep .mat-mdc-nav-list .mat-mdc-list-item.icon-only .mdc-list-item__content{display:none!important}:host ::ng-deep .mat-expansion-panel{background-color:transparent}:host ::ng-deep .mat-mdc-list-item:not(.active),:host ::ng-deep .mat-mdc-list-item:active,:host ::ng-deep .mat-mdc-list-item:focus,:host ::ng-deep .mat-expansion-panel:not(.active),:host ::ng-deep .mat-expansion-panel:active,:host ::ng-deep .mat-expansion-panel:focus{background-color:transparent!important}:host ::ng-deep .mat-mdc-list-item:not(.active):before,:host ::ng-deep .mat-mdc-list-item:active:before,:host ::ng-deep .mat-mdc-list-item:focus:before,:host ::ng-deep .mat-expansion-panel:not(.active):before,:host ::ng-deep .mat-expansion-panel:active:before,:host ::ng-deep .mat-expansion-panel:focus:before{background-color:transparent!important}:host ::ng-deep .mat-mdc-list-item,:host ::ng-deep .mat-expansion-panel{font-family:var(--mat-expansion-header-text-font, var(--mat-sys-title-medium-font));font-weight:var(--mat-expansion-header-text-weight, var(--mat-sys-title-medium-weight));line-height:var(--mat-expansion-header-text-line-height, var(--mat-sys-title-medium-line-height));letter-spacing:var(--mat-expansion-header-text-tracking, var(--mat-sys-title-medium-tracking))}:host ::ng-deep .mat-mdc-list-item mat-icon,:host ::ng-deep .mat-expansion-panel mat-icon{margin-right:18px;margin-bottom:3px}:host ::ng-deep .mat-mdc-list-item ::ng-deep .mat-expansion-panel-body,:host ::ng-deep .mat-expansion-panel ::ng-deep .mat-expansion-panel-body{padding-bottom:0!important}:host ::ng-deep .mat-mdc-list-item:not(.mobile)>.mat-expansion-panel-header,:host ::ng-deep .mat-expansion-panel:not(.mobile)>.mat-expansion-panel-header{padding:4px 8px}:host ::ng-deep .menu-badge-align{padding-top:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$6.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: i1$6.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i4$4.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i4$4.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i4$4.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "component", type: i6.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i4$4.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i4$4.MatListItemMeta, selector: "[matListItemMeta]" }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i6$1.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i6$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i6$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i6$1.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i8.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: VdDelayedHoverDirective, selector: "[delayedHover]", inputs: ["duration"], outputs: ["delayedHover"], exportAs: ["hesitation"] }, { kind: "pipe", type: FuncPipe, name: "func" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: VdMenuComponent, decorators: [{
             type: Component,
@@ -28290,7 +28509,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         MatBadgeModule,
                         VdDelayedHoverDirective,
                         FuncPipe
-                    ], template: "<mat-nav-list>\r\n    <!-- #region main-menu-accordion -->\r\n    <mat-accordion displayMode=\"flat\">\r\n        @for (item of items; track item; let last = $last) {\r\n            <!-- #region mobile-item-with-submenu -->\r\n            @if ((item?.items?.length ?? 0) > 0 && mobile) {\r\n                <mat-expansion-panel class=\"mat-elevation-z raw\"\r\n                                     (click)=\"$event.stopPropagation();\"\r\n                                     [disabled]=\"!mobile\"\r\n                                     [hideToggle]=\"!mobile || !item?.items?.length\"\r\n                                     [ngClass]=\"{'icon-only': !item.title, 'mobile': mobile}\"\r\n                                     (delayedHover)=\"(item.items?.length ?? 0) > 0 && itemMouseEnter(item.event ? item.event : $event, item)\"\r\n                                     (mouseleave)=\"(item.items?.length ?? 0) >0 && false&& itemMouseLeave(item.event ? item.event : $event, item)\"\r\n                                     [routerLinkActive]=\"['active']\"\r\n                                     [routerLinkActiveOptions]=\"{exact:false}\">\r\n                    <!-- #region mobile-parent-item-header -->\r\n                    <mat-expansion-panel-header [expandedHeight]=\"'48px'\">\r\n                        <mat-panel-title>\r\n                            <!-- #region parent-item-icon-and-title -->\r\n                            @if (!avatar) {\r\n                                <mat-icon [fontSet]=\"fontSet\"\r\n                                          [style.color]=\"item.iconColor\"\r\n                                          [matBadge]=\"item.badge ? item.badge() : null\"\r\n                                          [matBadgeHidden]=\"!item.badge || item.badge() === 0\"\r\n                                          aria-hidden=\"false\">\r\n                                    {{(item.icon | func:item) || 'radio_button_unchecked'}}\r\n                                </mat-icon>\r\n                            }\r\n                            @if (!avatar && item.title) {\r\n                                <span [style.color]=\"item.textColor\">{{item.title}}</span>\r\n                            }\r\n                            @if (avatar) {\r\n                                <mat-icon [fontSet]=\"fontSet\">{{(item.icon | func:item) || 'radio_button_unchecked'}}</mat-icon>\r\n                            }\r\n                            @if (avatar) {\r\n                                <h3>{{item.title}}</h3>\r\n                            }\r\n                            <!-- #endregion -->\r\n                        </mat-panel-title>\r\n                    </mat-expansion-panel-header>\r\n                    <!-- #endregion -->\r\n\r\n                    <!-- #region mobile-submenu-items -->\r\n                    <mat-nav-list>\r\n                        @for (subItem of item.items; track subItem; let subLast = $last) {\r\n                            <!-- #region visible-submenu-link -->\r\n                            @if (subItem.enabled) {\r\n                                <a mat-list-item\r\n                                   [style.backgroundColor]=\"subItem.backgroundColor\"\r\n                                   [routerLink]=\"subItem.path\"\r\n                                   target=\"_{{MenuItemTarget[item.target??0].toLowerCase()}}\"\r\n                                   [routerLinkActive]=\"['active']\" [ngClass]=\"{'icon-only': !subItem.title}\"\r\n                                   [routerLinkActiveOptions]=\"{exact:subItem.activeExact??false}\"\r\n                                   [fragment]=\"subItem.fragment\"\r\n                                   (click)=\"itemClicked($event, subItem)\">\r\n                                    <!-- #region submenu-icon-and-text -->\r\n                                    @if (!avatar) {\r\n                                        <mat-icon [fontSet]=\"fontSet\" [style.color]=\"subItem.iconColor\" aria-hidden=\"false\">\r\n                                            {{(subItem.icon | func:subItem) || 'radio_button_unchecked'}}\r\n                                        </mat-icon>\r\n                                    }\r\n\r\n                                    @if (!avatar && subItem.title) {\r\n                                        <span [style.color]=\"subItem.textColor\">{{subItem.title}}</span>\r\n                                    }\r\n\r\n                                    @if (avatar) {\r\n                                        <mat-icon [fontSet]=\"fontSet\">{{(subItem.icon | func:subItem) || 'radio_button_unchecked'}}</mat-icon>\r\n                                    }\r\n\r\n                                    @if (avatar) {\r\n                                        <h3>{{subItem.title}}</h3>\r\n                                    }\r\n\r\n                                    @if (avatar && subItem.description) {\r\n                                        <p>{{subItem.description}}</p>\r\n                                    }\r\n\r\n                                    @if (subItem.badge && subItem.badge() !== 0) {\r\n                                        <span matListItemMeta\r\n                                              [matBadge]=\"subItem.badge()\"\r\n                                              matBadgeOverlap=\"false\"\r\n                                              matBadgePosition=\"above before\"\r\n                                              class=\"menu-badge-align\">\r\n                                        </span>\r\n                                    }\r\n                                    <!-- #endregion -->\r\n                                </a>\r\n                            }\r\n                            <!-- #endregion -->\r\n\r\n                            <!-- #region submenu-divider-lines -->\r\n                            @if (subItem.divider && !avatar) {\r\n                                <mat-divider></mat-divider>\r\n                            }\r\n                            @if (!subItem.divider && avatar && !subLast) {\r\n                                <mat-divider [inset]=\"avatar\"></mat-divider>\r\n                            }\r\n                            <!-- #endregion -->\r\n                        }\r\n                    </mat-nav-list>\r\n                    <!-- #endregion -->\r\n                </mat-expansion-panel>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region regular-menu-item -->\r\n            } @else {\r\n                <!-- #region regular-item-link -->\r\n                @if (item.enabled) {\r\n                    <a mat-list-item [style.backgroundColor]=\"item.backgroundColor\" [routerLink]=\"item.path\" target=\"_{{MenuItemTarget[item.target??0].toLowerCase()}}\" [routerLinkActive]=\"['active']\" [ngClass]=\"{'icon-only': !item.title}\" [routerLinkActiveOptions]=\"{exact:item.activeExact??false}\" [fragment]=\"item.fragment\" (click)=\"itemClicked($event, item)\" (delayedHover)=\"(item.items?.length ?? 0) > 0 && itemMouseEnter(item.event ? item.event : $event, item)\" (mouseleave)=\"(item.items?.length ?? 0) >0 && false&& itemMouseLeave(item.event ? item.event : $event, item)\">\r\n                        @if (!avatar) {\r\n                            <mat-icon [fontSet]=\"fontSet\"\r\n                                      [style.color]=\"item.iconColor\"\r\n                                      aria-hidden=\"false\"\r\n                                      matListItemIcon>\r\n                                {{(item.icon | func:item) || 'radio_button_unchecked'}}\r\n                            </mat-icon>\r\n                        }\r\n\r\n                        @if (!avatar && item.title) {\r\n                            <span [style.color]=\"item.textColor\" matListItemTitle>{{item.title}}</span>\r\n                        }\r\n\r\n                        @if (avatar) {\r\n                            <mat-icon [fontSet]=\"fontSet\" matListAvatar>{{(item.icon | func:item) || 'radio_button_unchecked'}}</mat-icon>\r\n                        }\r\n\r\n                        @if (avatar) {\r\n                            <h3 matLine>{{item.title}}</h3>\r\n                        }\r\n\r\n                        @if (avatar && item.description) {\r\n                            <p matLine>{{item.description}}</p>\r\n                        }\r\n\r\n                        @if (item.badge && item.badge() !== 0) {\r\n                            <span matListItemMeta\r\n                                  [matBadge]=\"item.badge()\"\r\n                                  matBadgeOverlap=\"false\"\r\n                                  matBadgePosition=\"above before\"\r\n                                  class=\"menu-badge-align\">\r\n                            </span>\r\n                        }\r\n                    </a>\r\n                }\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region regular-item-divider-lines -->\r\n                @if (item.divider && !avatar) {\r\n                    <mat-divider></mat-divider>\r\n                }\r\n                @if (!item.divider && avatar && !last) {\r\n                    <mat-divider [inset]=\"avatar\"></mat-divider>\r\n                }\r\n                <!-- #endregion -->\r\n            }\r\n            <!-- #endregion -->\r\n        }\r\n    </mat-accordion>\r\n    <!-- #endregion -->\r\n</mat-nav-list>", styles: [":host ::ng-deep .mat-mdc-nav-list .mat-mdc-list-item.icon-only .mdc-list-item__content{display:none!important}:host ::ng-deep .mat-expansion-panel{background-color:transparent}:host ::ng-deep .mat-mdc-list-item:not(.active),:host ::ng-deep .mat-mdc-list-item:active,:host ::ng-deep .mat-mdc-list-item:focus,:host ::ng-deep .mat-expansion-panel:not(.active),:host ::ng-deep .mat-expansion-panel:active,:host ::ng-deep .mat-expansion-panel:focus{background-color:transparent!important}:host ::ng-deep .mat-mdc-list-item:not(.active):before,:host ::ng-deep .mat-mdc-list-item:active:before,:host ::ng-deep .mat-mdc-list-item:focus:before,:host ::ng-deep .mat-expansion-panel:not(.active):before,:host ::ng-deep .mat-expansion-panel:active:before,:host ::ng-deep .mat-expansion-panel:focus:before{background-color:transparent!important}:host ::ng-deep .mat-mdc-list-item,:host ::ng-deep .mat-expansion-panel{font-family:var(--mat-expansion-header-text-font, var(--mat-sys-title-medium-font));font-weight:var(--mat-expansion-header-text-weight, var(--mat-sys-title-medium-weight));line-height:var(--mat-expansion-header-text-line-height, var(--mat-sys-title-medium-line-height));letter-spacing:var(--mat-expansion-header-text-tracking, var(--mat-sys-title-medium-tracking))}:host ::ng-deep .mat-mdc-list-item mat-icon,:host ::ng-deep .mat-expansion-panel mat-icon{margin-right:18px;margin-bottom:3px}:host ::ng-deep .mat-mdc-list-item ::ng-deep .mat-expansion-panel-body,:host ::ng-deep .mat-expansion-panel ::ng-deep .mat-expansion-panel-body{padding-bottom:0!important}:host ::ng-deep .mat-mdc-list-item:not(.mobile)>.mat-expansion-panel-header,:host ::ng-deep .mat-expansion-panel:not(.mobile)>.mat-expansion-panel-header{padding:4px 8px}:host ::ng-deep .menu-badge-align{padding-top:8px}\n"] }]
+                    ], template: "<mat-nav-list>\r\n    <!-- #region main-menu-accordion -->\r\n    <mat-accordion displayMode=\"flat\">\r\n        @for (item of items; track item; let last = $last) {\r\n            <!-- #region mobile-item-with-submenu -->\r\n            @if ((item?.items?.length ?? 0) > 0 && mobile) {\r\n                <mat-expansion-panel class=\"mat-elevation-z raw\" (click)=\"$event.stopPropagation();\" [disabled]=\"!mobile\" [hideToggle]=\"!mobile || !item?.items?.length\" [ngClass]=\"{'icon-only': !item.title, 'mobile': mobile}\" (delayedHover)=\"(item.items?.length ?? 0) > 0 && itemMouseEnter(item.event ? item.event : $event, item)\" (mouseleave)=\"(item.items?.length ?? 0) >0 && false&& itemMouseLeave(item.event ? item.event : $event, item)\" [routerLinkActive]=\"['active']\" [routerLinkActiveOptions]=\"{exact:false}\" [attr.data-ordering]=\"item.ordering\">\r\n                    <!-- #region mobile-parent-item-header -->\r\n                    <mat-expansion-panel-header [expandedHeight]=\"'48px'\">\r\n                        <mat-panel-title>\r\n                            <!-- #region parent-item-icon-and-title -->\r\n                            @if (!avatar) {\r\n                                <mat-icon [fontSet]=\"fontSet\" [style.color]=\"item.iconColor\" [matBadge]=\"item.badge ? item.badge() : null\" [matBadgeHidden]=\"!item.badge || item.badge() === 0\" aria-hidden=\"false\">\r\n                                    {{(item.icon | func:item) || 'radio_button_unchecked'}}\r\n                                </mat-icon>\r\n                            }\r\n                            @if (!avatar && item.title) {\r\n                                <span [style.color]=\"item.textColor\">{{item.title}}</span>\r\n                            }\r\n                            @if (avatar) {\r\n                                <mat-icon [fontSet]=\"fontSet\">{{(item.icon | func:item) || 'radio_button_unchecked'}}</mat-icon>\r\n                            }\r\n                            @if (avatar) {\r\n                                <h3>{{item.title}}</h3>\r\n                            }\r\n                            <!-- #endregion -->\r\n                        </mat-panel-title>\r\n                    </mat-expansion-panel-header>\r\n                    <!-- #endregion -->\r\n                    <!-- #region mobile-submenu-items -->\r\n                    <mat-nav-list>\r\n                        @for (subItem of item.items; track subItem; let subLast = $last) {\r\n                            <!-- #region visible-submenu-link -->\r\n                            @if (subItem.enabled) {\r\n                                <a mat-list-item [style.backgroundColor]=\"subItem.backgroundColor\" [attr.data-ordering]=\"subItem.ordering\" [routerLink]=\"subItem.path\" target=\"_{{MenuItemTarget[item.target??0].toLowerCase()}}\" [routerLinkActive]=\"['active']\" [ngClass]=\"{'icon-only': !subItem.title}\" [routerLinkActiveOptions]=\"{exact:subItem.activeExact??false}\" [fragment]=\"subItem.fragment\" (click)=\"itemClicked($event, subItem)\">\r\n                                    <!-- #region submenu-icon-and-text -->\r\n                                    @if (!avatar) {\r\n                                        <mat-icon [fontSet]=\"fontSet\" [style.color]=\"subItem.iconColor\" aria-hidden=\"false\">\r\n                                            {{(subItem.icon | func:subItem) || 'radio_button_unchecked'}}\r\n                                        </mat-icon>\r\n                                    }\r\n                                    @if (!avatar && subItem.title) {\r\n                                        <span [style.color]=\"subItem.textColor\">{{subItem.title}}</span>\r\n                                    }\r\n                                    @if (avatar) {\r\n                                        <mat-icon [fontSet]=\"fontSet\">{{(subItem.icon | func:subItem) || 'radio_button_unchecked'}}</mat-icon>\r\n                                    }\r\n                                    @if (avatar) {\r\n                                        <h3>{{subItem.title}}</h3>\r\n                                    }\r\n                                    @if (avatar && subItem.description) {\r\n                                        <p>{{subItem.description}}</p>\r\n                                    }\r\n                                    @if (subItem.badge && subItem.badge() !== 0) {\r\n                                        <span matListItemMeta [matBadge]=\"subItem.badge()\" matBadgeOverlap=\"false\" matBadgePosition=\"above before\" class=\"menu-badge-align\">\r\n                                        </span>\r\n                                    }\r\n                                    <!-- #endregion -->\r\n                                </a>\r\n                            }\r\n                            <!-- #endregion -->\r\n                            <!-- #region submenu-divider-lines -->\r\n                            @if (subItem.divider && !avatar) {\r\n                                <mat-divider></mat-divider>\r\n                            }\r\n                            @if (!subItem.divider && avatar && !subLast) {\r\n                                <mat-divider [inset]=\"avatar\"></mat-divider>\r\n                            }\r\n                            <!-- #endregion -->\r\n                        }\r\n                    </mat-nav-list>\r\n                    <!-- #endregion -->\r\n                </mat-expansion-panel>\r\n                <!-- #endregion -->\r\n                <!-- #region regular-menu-item -->\r\n            } @else {\r\n                <!-- #region regular-item-link -->\r\n                @if (item.enabled) {\r\n                    <a mat-list-item [style.backgroundColor]=\"item.backgroundColor\" [attr.data-ordering]=\"item.ordering\" [routerLink]=\"item.path\" target=\"_{{MenuItemTarget[item.target??0].toLowerCase()}}\" [routerLinkActive]=\"['active']\" [ngClass]=\"{'icon-only': !item.title}\" [routerLinkActiveOptions]=\"{exact:item.activeExact??false}\" [fragment]=\"item.fragment\" (click)=\"itemClicked($event, item)\" (delayedHover)=\"(item.items?.length ?? 0) > 0 && itemMouseEnter(item.event ? item.event : $event, item)\" (mouseleave)=\"(item.items?.length ?? 0) >0 && false&& itemMouseLeave(item.event ? item.event : $event, item)\">\r\n                        @if (!avatar) {\r\n                            <mat-icon [fontSet]=\"fontSet\" [style.color]=\"item.iconColor\" aria-hidden=\"false\" matListItemIcon>\r\n                                {{(item.icon | func:item) || 'radio_button_unchecked'}}\r\n                            </mat-icon>\r\n                        }\r\n                        @if (!avatar && item.title) {\r\n                            <span [style.color]=\"item.textColor\" matListItemTitle>{{item.title}}</span>\r\n                        }\r\n                        @if (avatar) {\r\n                            <mat-icon [fontSet]=\"fontSet\" matListAvatar>{{(item.icon | func:item) || 'radio_button_unchecked'}}</mat-icon>\r\n                        }\r\n                        @if (avatar) {\r\n                            <h3 matLine>{{item.title}}</h3>\r\n                        }\r\n                        @if (avatar && item.description) {\r\n                            <p matLine>{{item.description}}</p>\r\n                        }\r\n                        @if (item.badge && item.badge() !== 0) {\r\n                            <span matListItemMeta [matBadge]=\"item.badge()\" matBadgeOverlap=\"false\" matBadgePosition=\"above before\" class=\"menu-badge-align\">\r\n                            </span>\r\n                        }\r\n                    </a>\r\n                }\r\n                <!-- #endregion -->\r\n                <!-- #region regular-item-divider-lines -->\r\n                @if (item.divider && !avatar) {\r\n                    <mat-divider></mat-divider>\r\n                }\r\n                @if (!item.divider && avatar && !last) {\r\n                    <mat-divider [inset]=\"avatar\"></mat-divider>\r\n                }\r\n                <!-- #endregion -->\r\n            }\r\n            <!-- #endregion -->\r\n        }\r\n    </mat-accordion>\r\n    <!-- #endregion -->\r\n</mat-nav-list>", styles: [":host ::ng-deep .mat-mdc-nav-list .mat-mdc-list-item.icon-only .mdc-list-item__content{display:none!important}:host ::ng-deep .mat-expansion-panel{background-color:transparent}:host ::ng-deep .mat-mdc-list-item:not(.active),:host ::ng-deep .mat-mdc-list-item:active,:host ::ng-deep .mat-mdc-list-item:focus,:host ::ng-deep .mat-expansion-panel:not(.active),:host ::ng-deep .mat-expansion-panel:active,:host ::ng-deep .mat-expansion-panel:focus{background-color:transparent!important}:host ::ng-deep .mat-mdc-list-item:not(.active):before,:host ::ng-deep .mat-mdc-list-item:active:before,:host ::ng-deep .mat-mdc-list-item:focus:before,:host ::ng-deep .mat-expansion-panel:not(.active):before,:host ::ng-deep .mat-expansion-panel:active:before,:host ::ng-deep .mat-expansion-panel:focus:before{background-color:transparent!important}:host ::ng-deep .mat-mdc-list-item,:host ::ng-deep .mat-expansion-panel{font-family:var(--mat-expansion-header-text-font, var(--mat-sys-title-medium-font));font-weight:var(--mat-expansion-header-text-weight, var(--mat-sys-title-medium-weight));line-height:var(--mat-expansion-header-text-line-height, var(--mat-sys-title-medium-line-height));letter-spacing:var(--mat-expansion-header-text-tracking, var(--mat-sys-title-medium-tracking))}:host ::ng-deep .mat-mdc-list-item mat-icon,:host ::ng-deep .mat-expansion-panel mat-icon{margin-right:18px;margin-bottom:3px}:host ::ng-deep .mat-mdc-list-item ::ng-deep .mat-expansion-panel-body,:host ::ng-deep .mat-expansion-panel ::ng-deep .mat-expansion-panel-body{padding-bottom:0!important}:host ::ng-deep .mat-mdc-list-item:not(.mobile)>.mat-expansion-panel-header,:host ::ng-deep .mat-expansion-panel:not(.mobile)>.mat-expansion-panel-header{padding:4px 8px}:host ::ng-deep .menu-badge-align{padding-top:8px}\n"] }]
         }], ctorParameters: () => [{ type: VdMediaService }], propDecorators: { items: [{
                 type: Input
             }], activeExact: [{
@@ -29243,78 +29462,87 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
             type: Injectable
         }] });
 
-class MenuItemService extends GenericService {
+class MenuService extends GenericService {
     /**
      * Constructor
      * @param _http
      */
     constructor() {
-        super('menuitem');
+        super('menu');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MenuItemService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MenuItemService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MenuService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MenuService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MenuItemService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MenuService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
 
-class MenuService extends GenericService {
+class MenuItemService extends GenericService {
     /**
      * Constructor
      * @param _http
      */
     constructor() {
-        super('menu');
+        super('menuitem');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MenuService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MenuService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MenuItemService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MenuItemService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MenuService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MenuItemService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
 
+/**
+ * Injection token for the MenuResolveOptions
+ */
+const MENU_RESOLVE_OPTIONS = new InjectionToken('MENU_RESOLVE_OPTIONS');
 /**
  * Menu resolve service
  */
 class MenuResolve {
     menuService;
+    options;
     /**
      * Constructor
-     * @param menuService
+     * @param menuService The menu service
+     * @param options The menu resolve options
      */
-    constructor(menuService) {
+    constructor(menuService, options) {
         this.menuService = menuService;
+        this.options = options;
     }
     /**
      * Resolves menu items
-     * @param route
+     * @param route The activated route snapshot
+     * @returns An observable of menu items
      */
     resolve(route) {
-        return this.menuService.getList(route.data || {}, undefined, { cache: 'yes' });
+        const options = this.options ?? route.data ?? {};
+        return this.menuService.getList(options, undefined, { cache: 'yes' });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MenuResolve, deps: [{ token: MenuService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MenuResolve, deps: [{ token: MenuService }, { token: MENU_RESOLVE_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MenuResolve, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MenuResolve, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: MenuService }] });
+        }], ctorParameters: () => [{ type: MenuService }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [MENU_RESOLVE_OPTIONS]
+                }] }] });
 /**
  * Submenu resolve service
  */
 class SubMenuResolve {
-    router;
-    route3;
-    constructor(router, route3) {
-        this.router = router;
-        this.route3 = route3;
-    }
     /**
-     * Resolves menu items
-     * @param route
-     * @param state
+     * Resolve method to get the submenu item based on the current route
+     * @param route The activated route snapshot
+     * @param state The router state snapshot
+     * @returns The submenu item or undefined if not found
      */
     resolve(route, state) {
         /* Get menu from route data */
@@ -29331,13 +29559,13 @@ class SubMenuResolve {
         }
         return undefined;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SubMenuResolve, deps: [{ token: i1$6.Router }, { token: i1$6.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SubMenuResolve, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SubMenuResolve, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SubMenuResolve, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i1$6.Router }, { type: i1$6.ActivatedRoute }] });
+        }] });
 
 class VdLayoutComponent {
     media;
@@ -31317,5 +31545,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_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 };
+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, MENU_RESOLVE_OPTIONS, MatFormFieldEditorDirective, MatFormFieldRadioDirective, MatFormFieldReadonlyDirective, MatInputRequiredDirective, MatSelectRequiredDirective, Menu, MenuClient, MenuDepartment, MenuFormIncludesResolve, MenuItem, MenuItemClient, MenuItemDepartment, MenuItemFormIncludesResolve, MenuItemService, MenuItemTarget, MenuListProjectionResolve, MenuResolve, MenuScope, MenuService, MenuSettings, MenuSettingsResolve, MessageType, ModifiableEntity, MonthNamePipe, MsaEditFormActionsComponent, MsaEnumDisplayComponent, MsaSelectRequiredDirective, MsaSelectionLabelComponent, 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