@zambon-dev/library 2.0.0 → 3.0.0

package/fesm2022/zambon-dev-library.mjs

@@ -1,17 +1,17 @@
 import * as i0 from '@angular/core';
-import { Component, inject, Injectable, EventEmitter, InjectionToken, Input, Output, KeyValueDiffers, ViewContainerRef, TemplateRef, ElementRef, HostListener, ViewChild, ChangeDetectorRef, ChangeDetectionStrategy, NgZone, Directive, ContentChildren, Pipe, NgModule } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject, Injectable, EventEmitter, InjectionToken, Output, Input, KeyValueDiffers, ViewContainerRef, TemplateRef, ElementRef, ViewChild, HostListener, ChangeDetectorRef, NgZone, Directive, ContentChildren, Pipe, NgModule } from '@angular/core';
 import { Subject, ReplaySubject, take, throwError, tap, map, takeUntil, filter, debounceTime, startWith, pairwise, Observable, forkJoin, switchMap, of, fromEvent, delay, merge } from 'rxjs';
 import { Overlay, OverlayPositionBuilder } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
-import * as i1 from '@angular/common';
-import { formatDate, CommonModule, NgIf, NgSwitch, NgSwitchCase, KeyValuePipe, NgFor, NgStyle, NgTemplateOutlet, NgClass } from '@angular/common';
 import * as i1$1 from '@angular/forms';
-import { FormGroupDirective, FormGroupName, FormsModule, ReactiveFormsModule, ControlContainer, FormControl, FormArray, FormGroup } from '@angular/forms';
+import { FormGroupDirective, FormGroupName, ControlContainer, FormsModule, ReactiveFormsModule, FormControl, FormArray, FormGroup } from '@angular/forms';
 import { TranslatePipe, TranslateService } from '@ngx-translate/core';
 import { HttpClient } from '@angular/common/http';
 import { ActivatedRoute, Router, NavigationStart, NavigationEnd } from '@angular/router';
+import * as i1 from '@angular/common';
+import { formatDate, CommonModule, NgStyle, NgTemplateOutlet, KeyValuePipe, NgClass } from '@angular/common';
 import * as i1$2 from '@angular/cdk/scrolling';
-import { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
+import { ScrollingModule, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
 import * as i2 from 'ngx-resize-observer';
 import { NgxResizeObserverModule } from 'ngx-resize-observer';
 
@@ -30,12 +30,12 @@ class BaseComponent {
         this.destroy$.next(true);
         this.destroy$.complete();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: BaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: BaseComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: '', isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: BaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: BaseComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: BaseComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: BaseComponent, decorators: [{
             type: Component,
-            args: [{ template: '' }]
+            args: [{ changeDetection: ChangeDetectionStrategy.Eager, template: '' }]
         }] });
 
 class DateHelpers {
@@ -114,11 +114,8 @@ class RouterFormatter {
             parentRoute = this.getURL(route.parent);
         }
         let path = route.routeConfig?.path ?? '';
-        route.paramMap.keys
-            .forEach(k => {
-            path = path.replace(':' + k, k === 'view'
-                ? ''
-                : (route.paramMap.get(k) ?? ''));
+        route.paramMap.keys.forEach((k) => {
+            path = path.replace(':' + k, k === 'view' ? '' : (route.paramMap.get(k) ?? ''));
         });
         if (!route.parent || (parentRoute !== '' && parentRoute !== '/' && route.routeConfig?.path && path)) {
             parentRoute += '/';
@@ -143,13 +140,13 @@ class CatalogService {
     search(endpoint, maxResults, criteria, filters = null) {
         return this.http.post(`${endpoint}`, { maxResults, criteria, filters });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: CatalogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: CatalogService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: CatalogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: CatalogService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: CatalogService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: CatalogService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root'
+                    providedIn: 'root',
                 }]
         }] });
 
@@ -176,9 +173,7 @@ class DataProviderService {
     //#endregion
     //#region Constructor and Angular life cycle methods
     constructor() {
-        this.activatedRoute.paramMap
-            .pipe(take(1))
-            .subscribe((paramMap) => {
+        this.activatedRoute.paramMap.pipe(take(1)).subscribe((paramMap) => {
             const newID = Number(paramMap.get('id'));
             if (newID !== this.entityID) {
                 this._entityID = newID;
@@ -242,10 +237,10 @@ class DataProviderService {
         }
         this.modelCache.next(model);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: DataProviderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: DataProviderService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: DataProviderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: DataProviderService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: DataProviderService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: DataProviderService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -275,10 +270,10 @@ class BaseDataset {
         this.destroy$.next(true);
         this.destroy$.complete();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: BaseDataset, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: BaseDataset });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: BaseDataset, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: BaseDataset });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: BaseDataset, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: BaseDataset, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -303,10 +298,10 @@ class GridConfigsProvider {
             rowsToDisplay: 6,
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: GridConfigsProvider, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: GridConfigsProvider });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: GridConfigsProvider, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: GridConfigsProvider });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: GridConfigsProvider, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: GridConfigsProvider, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -373,6 +368,10 @@ class GridDataset extends BaseDataset {
     addNewRow(row) {
         this.updateLoadedRows([row]);
     }
+    /** The key of the currently focused row, or null. Read by DataGridRowComponent's host binding. */
+    get focusedRowKey() {
+        return this.focusedRow;
+    }
     clearFocusedRow() {
         this.focusedRow = null;
     }
@@ -385,8 +384,7 @@ class GridDataset extends BaseDataset {
     }
     getRowID(key) {
         const row = this.getRowData(key);
-        return this.compareProperty.split('.')
-            .reduce((row, property) => row[property], row);
+        return this.compareProperty.split('.').reduce((row, property) => row[property], row);
     }
     getRowInternalKey(row) {
         return row[KEY_FIELD];
@@ -395,11 +393,10 @@ class GridDataset extends BaseDataset {
         if (!this.hasLoadedRows) {
             return false;
         }
-        const loadedIDs = this.compareProperty.split('.')
+        const loadedIDs = this.compareProperty
+            .split('.')
             .reduce((loadedRows, property) => loadedRows.map((row) => row[property]), this._loadedRows ?? [])
-            .map((row) => typeof id === 'string' ? `${row}`
-            : typeof id === 'number' ? parseInt(`${row}`)
-                : row);
+            .map((row) => (typeof id === 'string' ? `${row}` : typeof id === 'number' ? parseInt(`${row}`) : row));
         return loadedIDs.indexOf(id) >= 0;
     }
     isKeyExists(key) {
@@ -436,7 +433,7 @@ class GridDataset extends BaseDataset {
             error: (_) => {
                 this.isLoading = false;
                 this.loadFinished.emit(false);
-            }
+            },
         });
     }
     refresh() {
@@ -498,17 +495,17 @@ class GridDataset extends BaseDataset {
         rows.forEach((row) => {
             row[KEY_FIELD] = GuidHelper.generateGUID();
         });
-        this._loadedRows = [...this._loadedRows ?? [], ...rows];
-        this._loadedKeys = [...this._loadedKeys ?? [], ...rows.map((row) => row[KEY_FIELD])];
+        this._loadedRows = [...(this._loadedRows ?? []), ...rows];
+        this._loadedKeys = [...(this._loadedKeys ?? []), ...rows.map((row) => row[KEY_FIELD])];
         this.recordBlock += rows.length;
         if (rows.length < this.configsProvider.configs.recordBlockSize) {
             this.loadedLastRow = true;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: GridDataset, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: GridDataset });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: GridDataset, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: GridDataset });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: GridDataset, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: GridDataset, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -553,7 +550,7 @@ class DataGridDataset extends GridDataset {
         this.selectedRowsChanged.emit(selectedKeys.reduce((keys, key) => {
             keys[key] = {
                 rowData: this.getRowData(key),
-                selected: false
+                selected: false,
             };
             return keys;
         }, {}));
@@ -570,15 +567,14 @@ class DataGridDataset extends GridDataset {
             [key]: {
                 rowData: this.getRowData(key),
                 selected: false,
-            }
+            },
         });
     }
     deselectRowID(id) {
         if (!this.hasLoadedRows) {
             return;
         }
-        const index = this.loadedKeys.map((key) => this.getRowID(key))
-            .indexOf(id);
+        const index = this.loadedKeys.map((key) => this.getRowID(key)).indexOf(id);
         const key = this.loadedKeys[index];
         this.deselectRow(key);
     }
@@ -586,7 +582,8 @@ class DataGridDataset extends GridDataset {
         if (!this.hasLoadedRows || !this.hasSelectedRows) {
             return [];
         }
-        return this.selectedRowKeys.map((key) => this.loadedKeys.indexOf(key))
+        return this.selectedRowKeys
+            .map((key) => this.loadedKeys.indexOf(key))
             .filter((index) => index >= 0)
             .map((index) => this.loadedRows[index]);
     }
@@ -604,7 +601,8 @@ class DataGridDataset extends GridDataset {
             return;
         }
         if (this.hasSelectedRows) {
-            keys.filter((key) => this.isKeySelected(key))
+            keys
+                .filter((key) => this.isKeySelected(key))
                 .forEach((key) => {
                 this.removeSelectedRow(key);
             });
@@ -628,7 +626,7 @@ class DataGridDataset extends GridDataset {
                 [key]: {
                     rowData: this.getRowData(key),
                     selected: true,
-                }
+                },
             });
         }
     }
@@ -686,10 +684,10 @@ class DataGridDataset extends GridDataset {
             this.selectedRowKeys.splice(index, 1);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: DataGridDataset, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: DataGridDataset });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: DataGridDataset, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: DataGridDataset });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: DataGridDataset, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: DataGridDataset, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -744,8 +742,7 @@ class MultiEditorDataset extends BaseDataset {
             entitiesToInsertOrUpdate: Object.entries(this.modifiedValues.changed).map(([_, v]) => v),
             entitiesToDelete: this.modifiedValues.removed,
         };
-        return this.saveData(batchUpdate)
-            .pipe(tap(() => this.savedChanges.emit()));
+        return this.saveData(batchUpdate).pipe(tap(() => this.savedChanges.emit()));
     }
     storeFakeIDGenerated(id) {
         if (this.fakeIDsGenerated.indexOf(id) >= 0) {
@@ -757,10 +754,10 @@ class MultiEditorDataset extends BaseDataset {
         this.modifiedValues.changed[key] = newRowData;
         this.dataGridDataset.updateRow(key, newRowData);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MultiEditorDataset, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MultiEditorDataset });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: MultiEditorDataset, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: MultiEditorDataset });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MultiEditorDataset, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: MultiEditorDataset, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -797,8 +794,7 @@ class MultiSelectResultDataset extends GridDataset {
             idsToAdd: this.idsToAdd,
             idsToRemove: this.idsToRemove,
         };
-        return this.saveData(changes)
-            .pipe(tap(() => {
+        return this.saveData(changes).pipe(tap(() => {
             this.savedChanges.emit();
             this.clearSelection();
             this.clearLoadedRows();
@@ -839,37 +835,34 @@ class MultiSelectResultDataset extends GridDataset {
         this.updateDisplayedRows();
     }
     isExistingID(id) {
-        return (this.loadedKeys ?? [])
-            .map((key) => this.getRowID(key))
-            .indexOf(id) >= 0;
+        return (this.loadedKeys ?? []).map((key) => this.getRowID(key)).indexOf(id) >= 0;
     }
     updateDisplayedRows() {
-        const loadedKeys = (this.loadedKeys ?? [])
-            .filter((key) => this.idsToRemove.indexOf(this.getRowID(key)) < 0);
+        const loadedKeys = (this.loadedKeys ?? []).filter((key) => this.idsToRemove.indexOf(this.getRowID(key)) < 0);
         this.displayedIDs = loadedKeys.map((key) => this.getRowID(key));
         this.displayedIDs.push(...this._idsToAdd);
         this.displayedRows = loadedKeys.map((key) => this.getRowData(key));
         this.displayedRows.push(...this.addedRowData);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MultiSelectResultDataset, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MultiSelectResultDataset });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: MultiSelectResultDataset, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: MultiSelectResultDataset });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MultiSelectResultDataset, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: MultiSelectResultDataset, decorators: [{
             type: Injectable
         }] });
 
 class FormGroupService {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: FormGroupService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: FormGroupService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormGroupService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormGroupService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: FormGroupService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormGroupService, decorators: [{
             type: Injectable
         }] });
 
 class FormService {
     //#region ViewChilds, Inputs, Outputs
     fieldRefreshed = new EventEmitter();
-    modelRefreshed = new EventEmitter;
+    modelRefreshed = new EventEmitter();
     //#endregion
     //#region Variables
     _loading = false;
@@ -925,7 +918,7 @@ class FormService {
     beginFieldLoading(fieldName) {
         this.fieldRefreshed.emit({
             fieldName,
-            loading: true
+            loading: true,
         });
     }
     cancelEdit() {
@@ -986,7 +979,9 @@ class FormService {
         if (errorResponse.status === 400 && errorResponse.error && errorResponse.error.errors) {
             const errors = errorResponse.error.errors;
             Object.keys(errors)
-                .map((x) => { return { key: x, field: x.substring(0, 1).toLocaleLowerCase() + x.substring(1, x.length) }; })
+                .map((x) => {
+                return { key: x, field: x.substring(0, 1).toLocaleLowerCase() + x.substring(1, x.length) };
+            })
                 .forEach((err) => {
                 setTimeout(() => {
                     const field = this.form.get(err.field);
@@ -996,10 +991,10 @@ class FormService {
             });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: FormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: FormService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: FormService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormService, decorators: [{
             type: Injectable
         }] });
 
@@ -1101,8 +1096,8 @@ function toSidebarMenuOpenMode(value) {
     }
     if (typeof value === 'string') {
         const normalized = value.toLowerCase();
-        return ORDINAL_MODES.find((mode) => mode.toLowerCase() === normalized)
-            ?? SidebarMenuOpenMode.Internal;
+        return (ORDINAL_MODES.find((mode) => mode.toLowerCase() === normalized) ??
+            SidebarMenuOpenMode.Internal);
     }
     return SidebarMenuOpenMode.Internal;
 }
@@ -1137,12 +1132,11 @@ class SidebarService {
     }
     loadChildren(parentMenu) {
         this.childrenLoading.emit(parentMenu);
-        this.loadChildrenFor(parentMenu)
-            .subscribe({
+        this.loadChildrenFor(parentMenu).subscribe({
             error: (exception) => {
                 this.childrenFailed.emit(parentMenu);
                 throw exception;
-            }
+            },
         });
     }
     /**
@@ -1151,15 +1145,13 @@ class SidebarService {
      * the fire-and-forget variant that also raises the loading and failure events.
      */
     loadChildrenFor(parentMenu) {
-        return this.loadMenus(parentMenu)
-            .pipe(take(1), map((menus) => menus.map((menu) => new SidebarMenu(menu))), tap((childrenMenus) => {
+        return this.loadMenus(parentMenu).pipe(take(1), map((menus) => menus.map((menu) => new SidebarMenu(menu))), tap((childrenMenus) => {
             parentMenu.children = childrenMenus;
-            childrenMenus.forEach((childMenu) => childMenu.parent = parentMenu);
+            childrenMenus.forEach((childMenu) => (childMenu.parent = parentMenu));
         }));
     }
     loadRoot() {
-        return this.loadMenus(null)
-            .pipe(take(1), map((menus) => menus.map((menu) => new SidebarMenu(menu))), tap((menus) => this.menus = menus));
+        return this.loadMenus(null).pipe(take(1), map((menus) => menus.map((menu) => new SidebarMenu(menu))), tap((menus) => (this.menus = menus)));
     }
     select(menu) {
         if (menu.childCount > 0 && (menu.children?.length ?? 0) === 0) {
@@ -1230,13 +1222,13 @@ class SidebarService {
             this.selectMenu(menu.parent);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: SidebarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: SidebarService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SidebarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SidebarService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: SidebarService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SidebarService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root'
+                    providedIn: 'root',
                 }]
         }] });
 
@@ -1275,15 +1267,10 @@ class FormInputComponent extends BaseComponent {
     //#endregion
     //#region Properties
     get formControl() {
-        return this.controlName
-            ? this.formGroup.get(this.controlName)
-            : null;
+        return this.controlName ? this.formGroup.get(this.controlName) : null;
     }
     get formControlName() {
-        return [
-            ...this.parentGroups,
-            this.controlName,
-        ].join('.');
+        return [...this.parentGroups, this.controlName].join('.');
     }
     get formGroup() {
         let formGroup = this.formGroupDirective.form;
@@ -1322,9 +1309,7 @@ class FormInputComponent extends BaseComponent {
         switch (this.type) {
             case 'number':
                 if (this.formControl) {
-                    this.formControl.valueChanges
-                        .pipe(takeUntil(this.destroy$))
-                        .subscribe((value) => {
+                    this.formControl.valueChanges.pipe(takeUntil(this.destroy$)).subscribe((value) => {
                         if (value !== null && value === '') {
                             this.formControl?.setValue(null);
                         }
@@ -1336,9 +1321,7 @@ class FormInputComponent extends BaseComponent {
                     this.format = 'yyyy-MM-dd';
                 }
                 if (this.formControl) {
-                    this.formControl.valueChanges
-                        .pipe(takeUntil(this.destroy$))
-                        .subscribe((value) => {
+                    this.formControl.valueChanges.pipe(takeUntil(this.destroy$)).subscribe((value) => {
                         if (value !== null) {
                             try {
                                 if (value !== formatDate(value, 'yyyy-MM-dd', 'en')) {
@@ -1372,24 +1355,17 @@ class FormInputComponent extends BaseComponent {
         this.fixedValue = newText;
         this.fixedValueChanged.emit(this.fixedValue);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: FormInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: FormInputComponent, isStandalone: true, selector: "lib-form-input", inputs: { autofocus: "autofocus", controlName: "controlName", disabledControlName: "disabledControlName", displayReadOnlyAsDisabled: "displayReadOnlyAsDisabled", fixedValue: "fixedValue", format: "format", invalid: "invalid", isDisabled: "isDisabled", isFullHeight: "isFullHeight", maxLength: "maxLength", min: "min", readOnly: "readOnly", rows: "rows", step: "step", type: "type" }, outputs: { blurred: "blurred", changed: "changed", fixedValueChanged: "fixedValueChanged", focused: "focused", inputChanged: "inputChanged" }, host: { properties: { "class.full-height": "isFullHeight", "attr.type": "null" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"formGroupDirective.form?.enabled || isFormEditMode;else disabledControl\">\n    <ng-container [ngSwitch]=\"type\">\n        \n        <textarea *ngSwitchCase=\"'textarea'\"\n       \n        [attr.maxLength]=\"maxLength ?? null\"\n        [attr.rows]=\"rows\"\n        [class.invalid]=\"invalid\"\n        [formControlName]=\"controlName\"\n        (blur)=\"onBlur()\"\n        (focus)=\"onFocus()\"\n        (input)=\"onInput()\">\n        </textarea>\n\n        <ng-container *ngSwitchCase=\"'checkbox'\">\n            <input *ngIf=\"isFormControl; else fixedCheckbox\"\n            class=\"switch\"\n            type=\"checkbox\"\n           \n            [class.invalid]=\"invalid\"\n            [formControlName]=\"controlName\"\n            (blur)=\"onBlur()\"\n            (focus)=\"onFocus()\"\n            (input)=\"onInput()\" />\n\n            <ng-template #fixedCheckbox>\n                <input\n                class=\"switch\"\n                type=\"checkbox\"\n                [(ngModel)]=\"fixedValue\"\n                [attr.readonly]=\"true\"\n                [class.invalid]=\"invalid\"\n                [class.readonly-as-disabled]=\"displayReadOnlyAsDisabled\"\n                [disabled]=\"isDisabled\"\n                [ngModelOptions]=\"{ standalone: true }\"\n                (blur)=\"onBlur()\"\n                (change)=\"onChange($event)\"\n                (focus)=\"onFocus()\"\n                (input)=\"onInput()\"\n                (ngModelChange)=\"onValueChanged($event)\" />\n            </ng-template>\n        </ng-container>\n\n\n        <ng-container *ngSwitchDefault>\n            <input *ngIf=\"isFormControl; else fixedTextBox\"\n           \n            [attr.maxLength]=\"maxLength ?? null\"\n            [attr.min]=\"minAttributeValue\"\n            [attr.readonly]=\"readOnly ? true : null\"\n            [attr.step]=\"stepAttributeValue\"\n            [class.invalid]=\"invalid\"\n            [class.readonly-as-disabled]=\"displayReadOnlyAsDisabled\"\n            [formControlName]=\"controlName\"\n            [type]=\"type\"\n            (blur)=\"onBlur()\"\n            (focus)=\"onFocus()\"\n            (input)=\"onInput()\" />\n\n            <ng-template #fixedTextBox>\n                <input\n                type=\"text\"\n                [attr.maxLength]=\"maxLength ?? null\"\n                [attr.min]=\"minAttributeValue\"\n                [attr.readonly]=\"true\"\n                [attr.step]=\"stepAttributeValue\"\n                [class.invalid]=\"invalid\"\n                [class.readonly-as-disabled]=\"displayReadOnlyAsDisabled\"\n                [disabled]=\"isDisabled\"\n                [ngModel]=\"type === 'date' || type === 'datetime-local' ? (fixedValue | date: format) : ( type === 'number' ? (fixedValue | number) : fixedValue )\" \n                [ngModelOptions]=\"{ standalone: true }\"\n                (blur)=\"onBlur()\"\n                (focus)=\"onFocus()\"\n                (input)=\"onInput()\"\n                (ngModelChange)=\"onValueChanged($event)\" />\n            </ng-template>\n        </ng-container>\n\n    </ng-container>\n</ng-container>\n\n<ng-template #disabledControl>\n    <ng-container [ngSwitch]=\"type\">\n        <span class=\"value\" *ngSwitchCase=\"'checkbox'\">\n            <i [ngClass]=\"fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value ? 'fa-solid fa-square-check' : 'fa-regular fa-square'\"></i>\n        </span>\n\n        <span class=\"value\" *ngSwitchCase=\"'date'\">\n            {{ fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value | date: format }}\n        </span>\n\n        <span class=\"value\" *ngSwitchCase=\"'datetime-local'\">\n            {{ fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value | date: format }}\n        </span>\n\n        <span class=\"value\" *ngSwitchCase=\"'number'\">\n            {{ fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value | number: format }}\n        </span>\n\n        <span class=\"value text\" *ngSwitchDefault>{{ fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value }}</span>\n    </ng-container>\n</ng-template>\n\n<ng-template #fixedTextbox let-fixedValue=\"fixedValue\">\n    \n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:block}:host.full-height{height:100%}:host.full-height textarea{height:100%}input,textarea{--tw-border-opacity: 1;border-color:rgb(156 163 175 / var(--tw-border-opacity, 1))}input:focus,textarea:focus{--tw-border-opacity: 1;border-color:rgb(156 163 175 / var(--tw-border-opacity, 1));--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-color: rgb(0 107 182 / .3) }input,textarea{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}input:invalid,textarea:invalid{--tw-border-opacity: 1;border-color:rgb(248 113 113 / var(--tw-border-opacity, 1))}input:disabled,input.readonly-as-disabled[readonly],textarea:disabled,textarea.readonly-as-disabled[readonly]{--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity, 1))}input.ng-invalid.ng-touched,input.invalid,textarea.ng-invalid.ng-touched,textarea.invalid{--tw-border-opacity: 1;border-color:rgb(220 38 38 / var(--tw-border-opacity, 1))}input[type=text],input[type=number],input[type=password],input[type=date],input[type=datetime-local],input[type=email],input[type=file],input[type=month],input[type=tel],input[type=time],input[type=url],input[type=week],textarea{display:block;width:100%;border-radius:.375rem;padding:.25rem .5rem;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}input[type=text].ng-invalid.ng-touched,input[type=text].invalid,input[type=number].ng-invalid.ng-touched,input[type=number].invalid,input[type=password].ng-invalid.ng-touched,input[type=password].invalid,input[type=date].ng-invalid.ng-touched,input[type=date].invalid,input[type=datetime-local].ng-invalid.ng-touched,input[type=datetime-local].invalid,input[type=email].ng-invalid.ng-touched,input[type=email].invalid,input[type=file].ng-invalid.ng-touched,input[type=file].invalid,input[type=month].ng-invalid.ng-touched,input[type=month].invalid,input[type=tel].ng-invalid.ng-touched,input[type=tel].invalid,input[type=time].ng-invalid.ng-touched,input[type=time].invalid,input[type=url].ng-invalid.ng-touched,input[type=url].invalid,input[type=week].ng-invalid.ng-touched,input[type=week].invalid,textarea.ng-invalid.ng-touched,textarea.invalid{margin-right:-2.25rem;padding-right:2.25rem;transition-property:none}input[type=text].ng-invalid.ng-touched:focus,input[type=text].invalid:focus,input[type=number].ng-invalid.ng-touched:focus,input[type=number].invalid:focus,input[type=password].ng-invalid.ng-touched:focus,input[type=password].invalid:focus,input[type=date].ng-invalid.ng-touched:focus,input[type=date].invalid:focus,input[type=datetime-local].ng-invalid.ng-touched:focus,input[type=datetime-local].invalid:focus,input[type=email].ng-invalid.ng-touched:focus,input[type=email].invalid:focus,input[type=file].ng-invalid.ng-touched:focus,input[type=file].invalid:focus,input[type=month].ng-invalid.ng-touched:focus,input[type=month].invalid:focus,input[type=tel].ng-invalid.ng-touched:focus,input[type=tel].invalid:focus,input[type=time].ng-invalid.ng-touched:focus,input[type=time].invalid:focus,input[type=url].ng-invalid.ng-touched:focus,input[type=url].invalid:focus,input[type=week].ng-invalid.ng-touched:focus,input[type=week].invalid:focus,textarea.ng-invalid.ng-touched:focus,textarea.invalid:focus{--tw-ring-color: rgb(248 113 113 / .3) }input[type=text].ng-invalid.ng-touched,input[type=text].invalid,input[type=number].ng-invalid.ng-touched,input[type=number].invalid,input[type=password].ng-invalid.ng-touched,input[type=password].invalid,input[type=date].ng-invalid.ng-touched,input[type=date].invalid,input[type=datetime-local].ng-invalid.ng-touched,input[type=datetime-local].invalid,input[type=email].ng-invalid.ng-touched,input[type=email].invalid,input[type=file].ng-invalid.ng-touched,input[type=file].invalid,input[type=month].ng-invalid.ng-touched,input[type=month].invalid,input[type=tel].ng-invalid.ng-touched,input[type=tel].invalid,input[type=time].ng-invalid.ng-touched,input[type=time].invalid,input[type=url].ng-invalid.ng-touched,input[type=url].invalid,input[type=week].ng-invalid.ng-touched,input[type=week].invalid,textarea.ng-invalid.ng-touched,textarea.invalid{background-size:1.125rem 1.125rem;background-position:right .5625rem center;background-repeat:no-repeat;background-image:url(\"data:image/svg+xml,%3csvg class='text-white' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e\")}input[type=checkbox]{position:relative;margin-top:.25rem;margin-bottom:.25rem;height:1.25rem;width:1.25rem;border-radius:.25rem;padding:.125rem;display:inline-flex;flex-direction:row;justify-content:flex-end;appearance:none;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}input[type=checkbox]:disabled{pointer-events:none;opacity:.5}input[type=checkbox]:not(.switch){border-width:2px;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}input[type=checkbox]:not(.switch):focus{--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}input[type=checkbox]:not(.switch):before{border-radius:.25rem;--tw-content: \"\";content:var(--tw-content);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:.25rem;font-family:\"Font Awesome 6 Free\";font-weight:900}input[type=checkbox]:checked{border-color:#006bb6cc;--tw-bg-opacity: 1;background-color:rgb(0 107 182 / var(--tw-bg-opacity, 1));background-image:none}input[type=checkbox]:checked:before{--tw-content: \"\\f00c\";content:var(--tw-content);--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}input[type=checkbox]:disabled~label{opacity:.5}input[type=checkbox]~label{margin-left:.5rem;-webkit-user-select:none;user-select:none}input[type=checkbox].switch{height:1.5rem;width:3rem;border-radius:2rem;appearance:none;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}input[type=checkbox].switch:before{aspect-ratio:1 / 1;height:100%;border-radius:9999px;--tw-content: \"\";content:var(--tw-content);background-color:#6b728099}input[type=checkbox].switch:after{flex-grow:1;--tw-content: \"\";content:var(--tw-content);transition:flex-grow .15s ease-in-out}input[type=checkbox].switch:focus:before{background-color:#3b82f699}input[type=checkbox].switch:checked{border-color:#006bb6cc;--tw-bg-opacity: 1;background-color:rgb(0 107 182 / var(--tw-bg-opacity, 1));background-image:none}input[type=checkbox].switch:checked:before{--tw-content: \"\";content:var(--tw-content);--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}input[type=checkbox].switch:checked:after{flex-grow:0}label,.value{display:block;overflow-wrap:break-word;padding-top:.25rem;padding-bottom:.25rem}label.text,.value.text{white-space:pre-wrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: FormInputComponent, isStandalone: true, selector: "lib-form-input", inputs: { autofocus: "autofocus", controlName: "controlName", disabledControlName: "disabledControlName", displayReadOnlyAsDisabled: "displayReadOnlyAsDisabled", fixedValue: "fixedValue", format: "format", invalid: "invalid", isDisabled: "isDisabled", isFullHeight: "isFullHeight", maxLength: "maxLength", min: "min", readOnly: "readOnly", rows: "rows", step: "step", type: "type" }, outputs: { blurred: "blurred", changed: "changed", fixedValueChanged: "fixedValueChanged", focused: "focused", inputChanged: "inputChanged" }, host: { properties: { "class.full-height": "isFullHeight", "attr.type": "null" } }, usesInheritance: true, ngImport: i0, template: "@if (formGroupDirective.form?.enabled || isFormEditMode) {\n  @switch (type) {\n    @case ('textarea') {\n      <textarea\n        [attr.maxLength]=\"maxLength ?? null\"\n        [attr.rows]=\"rows\"\n        [class.invalid]=\"invalid\"\n        [formControlName]=\"controlName\"\n        (blur)=\"onBlur()\"\n        (focus)=\"onFocus()\"\n        (input)=\"onInput()\"\n      ></textarea>\n    }\n    @case ('checkbox') {\n      @if (isFormControl) {\n        <input\n          class=\"switch\"\n          type=\"checkbox\"\n          [class.invalid]=\"invalid\"\n          [formControlName]=\"controlName\"\n          (blur)=\"onBlur()\"\n          (focus)=\"onFocus()\"\n          (input)=\"onInput()\"\n        />\n      } @else {\n        <input\n          class=\"switch\"\n          type=\"checkbox\"\n          [(ngModel)]=\"fixedValue\"\n          [attr.readonly]=\"true\"\n          [class.invalid]=\"invalid\"\n          [class.readonly-as-disabled]=\"displayReadOnlyAsDisabled\"\n          [disabled]=\"isDisabled\"\n          [ngModelOptions]=\"{ standalone: true }\"\n          (blur)=\"onBlur()\"\n          (change)=\"onChange($event)\"\n          (focus)=\"onFocus()\"\n          (input)=\"onInput()\"\n          (ngModelChange)=\"onValueChanged($event)\"\n        />\n      }\n    }\n    @default {\n      @if (isFormControl) {\n        <input\n          [attr.maxLength]=\"maxLength ?? null\"\n          [attr.min]=\"minAttributeValue\"\n          [attr.readonly]=\"readOnly ? true : null\"\n          [attr.step]=\"stepAttributeValue\"\n          [class.invalid]=\"invalid\"\n          [class.readonly-as-disabled]=\"displayReadOnlyAsDisabled\"\n          [formControlName]=\"controlName\"\n          [type]=\"type\"\n          (blur)=\"onBlur()\"\n          (focus)=\"onFocus()\"\n          (input)=\"onInput()\"\n        />\n      } @else {\n        <input\n          type=\"text\"\n          [attr.maxLength]=\"maxLength ?? null\"\n          [attr.min]=\"minAttributeValue\"\n          [attr.readonly]=\"true\"\n          [attr.step]=\"stepAttributeValue\"\n          [class.invalid]=\"invalid\"\n          [class.readonly-as-disabled]=\"displayReadOnlyAsDisabled\"\n          [disabled]=\"isDisabled\"\n          [ngModel]=\"\n            type === 'date' || type === 'datetime-local'\n              ? (fixedValue | date: format)\n              : type === 'number'\n                ? (fixedValue | number)\n                : fixedValue\n          \"\n          [ngModelOptions]=\"{ standalone: true }\"\n          (blur)=\"onBlur()\"\n          (focus)=\"onFocus()\"\n          (input)=\"onInput()\"\n          (ngModelChange)=\"onValueChanged($event)\"\n        />\n      }\n    }\n  }\n} @else {\n  @switch (type) {\n    @case ('checkbox') {\n      <span class=\"value\">\n        <i\n          [ngClass]=\"\n            (fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value)\n              ? 'fa-solid fa-square-check'\n              : 'fa-regular fa-square'\n          \"\n        ></i>\n      </span>\n    }\n    @case ('date') {\n      <span class=\"value\">\n        {{ fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value | date: format }}\n      </span>\n    }\n    @case ('datetime-local') {\n      <span class=\"value\">\n        {{ fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value | date: format }}\n      </span>\n    }\n    @case ('number') {\n      <span class=\"value\">\n        {{ fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value | number: format }}\n      </span>\n    }\n    @default {\n      <span class=\"value text\">{{\n        fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value\n      }}</span>\n    }\n  }\n}\n\n<ng-template #fixedTextbox let-fixedValue=\"fixedValue\"> </ng-template>\n", styles: [":host{display:block}:host.full-height{height:100%}:host.full-height textarea{height:100%}input,textarea{--tw-border-opacity: 1;border-color:rgb(156 163 175 / var(--tw-border-opacity, 1))}input:focus,textarea:focus{--tw-border-opacity: 1;border-color:rgb(156 163 175 / var(--tw-border-opacity, 1));--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-color: rgb(0 107 182 / .3) }input,textarea{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}input:invalid,textarea:invalid{--tw-border-opacity: 1;border-color:rgb(248 113 113 / var(--tw-border-opacity, 1))}input:disabled,input.readonly-as-disabled[readonly],textarea:disabled,textarea.readonly-as-disabled[readonly]{--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity, 1))}input.ng-invalid.ng-touched,input.invalid,textarea.ng-invalid.ng-touched,textarea.invalid{--tw-border-opacity: 1;border-color:rgb(220 38 38 / var(--tw-border-opacity, 1))}input[type=text],input[type=number],input[type=password],input[type=date],input[type=datetime-local],input[type=email],input[type=file],input[type=month],input[type=tel],input[type=time],input[type=url],input[type=week],textarea{display:block;width:100%;border-radius:.375rem;padding:.25rem .5rem;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}input[type=text].ng-invalid.ng-touched,input[type=text].invalid,input[type=number].ng-invalid.ng-touched,input[type=number].invalid,input[type=password].ng-invalid.ng-touched,input[type=password].invalid,input[type=date].ng-invalid.ng-touched,input[type=date].invalid,input[type=datetime-local].ng-invalid.ng-touched,input[type=datetime-local].invalid,input[type=email].ng-invalid.ng-touched,input[type=email].invalid,input[type=file].ng-invalid.ng-touched,input[type=file].invalid,input[type=month].ng-invalid.ng-touched,input[type=month].invalid,input[type=tel].ng-invalid.ng-touched,input[type=tel].invalid,input[type=time].ng-invalid.ng-touched,input[type=time].invalid,input[type=url].ng-invalid.ng-touched,input[type=url].invalid,input[type=week].ng-invalid.ng-touched,input[type=week].invalid,textarea.ng-invalid.ng-touched,textarea.invalid{margin-right:-2.25rem;padding-right:2.25rem;transition-property:none}input[type=text].ng-invalid.ng-touched:focus,input[type=text].invalid:focus,input[type=number].ng-invalid.ng-touched:focus,input[type=number].invalid:focus,input[type=password].ng-invalid.ng-touched:focus,input[type=password].invalid:focus,input[type=date].ng-invalid.ng-touched:focus,input[type=date].invalid:focus,input[type=datetime-local].ng-invalid.ng-touched:focus,input[type=datetime-local].invalid:focus,input[type=email].ng-invalid.ng-touched:focus,input[type=email].invalid:focus,input[type=file].ng-invalid.ng-touched:focus,input[type=file].invalid:focus,input[type=month].ng-invalid.ng-touched:focus,input[type=month].invalid:focus,input[type=tel].ng-invalid.ng-touched:focus,input[type=tel].invalid:focus,input[type=time].ng-invalid.ng-touched:focus,input[type=time].invalid:focus,input[type=url].ng-invalid.ng-touched:focus,input[type=url].invalid:focus,input[type=week].ng-invalid.ng-touched:focus,input[type=week].invalid:focus,textarea.ng-invalid.ng-touched:focus,textarea.invalid:focus{--tw-ring-color: rgb(248 113 113 / .3) }input[type=text].ng-invalid.ng-touched,input[type=text].invalid,input[type=number].ng-invalid.ng-touched,input[type=number].invalid,input[type=password].ng-invalid.ng-touched,input[type=password].invalid,input[type=date].ng-invalid.ng-touched,input[type=date].invalid,input[type=datetime-local].ng-invalid.ng-touched,input[type=datetime-local].invalid,input[type=email].ng-invalid.ng-touched,input[type=email].invalid,input[type=file].ng-invalid.ng-touched,input[type=file].invalid,input[type=month].ng-invalid.ng-touched,input[type=month].invalid,input[type=tel].ng-invalid.ng-touched,input[type=tel].invalid,input[type=time].ng-invalid.ng-touched,input[type=time].invalid,input[type=url].ng-invalid.ng-touched,input[type=url].invalid,input[type=week].ng-invalid.ng-touched,input[type=week].invalid,textarea.ng-invalid.ng-touched,textarea.invalid{background-size:1.125rem 1.125rem;background-position:right .5625rem center;background-repeat:no-repeat;background-image:url(\"data:image/svg+xml,%3csvg class='text-white' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e\")}input[type=checkbox]{position:relative;margin-top:.25rem;margin-bottom:.25rem;height:1.25rem;width:1.25rem;border-radius:.25rem;padding:.125rem;display:inline-flex;flex-direction:row;justify-content:flex-end;appearance:none;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}input[type=checkbox]:disabled{pointer-events:none;opacity:.5}input[type=checkbox]:not(.switch){border-width:2px;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}input[type=checkbox]:not(.switch):focus{--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}input[type=checkbox]:not(.switch):before{border-radius:.25rem;--tw-content: \"\";content:var(--tw-content);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:.25rem;font-family:\"Font Awesome 6 Free\";font-weight:900}input[type=checkbox]:checked{border-color:#006bb6cc;--tw-bg-opacity: 1;background-color:rgb(0 107 182 / var(--tw-bg-opacity, 1));background-image:none}input[type=checkbox]:checked:before{--tw-content: \"\\f00c\";content:var(--tw-content);--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}input[type=checkbox]:disabled~label{opacity:.5}input[type=checkbox]~label{margin-left:.5rem;-webkit-user-select:none;user-select:none}input[type=checkbox].switch{height:1.5rem;width:3rem;border-radius:2rem;appearance:none;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}input[type=checkbox].switch:before{aspect-ratio:1 / 1;height:100%;border-radius:9999px;--tw-content: \"\";content:var(--tw-content);background-color:#6b728099}input[type=checkbox].switch:after{flex-grow:1;--tw-content: \"\";content:var(--tw-content);transition:flex-grow .15s ease-in-out}input[type=checkbox].switch:focus:before{background-color:#3b82f699}input[type=checkbox].switch:checked{border-color:#006bb6cc;--tw-bg-opacity: 1;background-color:rgb(0 107 182 / var(--tw-bg-opacity, 1));background-image:none}input[type=checkbox].switch:checked:before{--tw-content: \"\";content:var(--tw-content);--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}input[type=checkbox].switch:checked:after{flex-grow:0}label,.value{display:block;overflow-wrap:break-word;padding-top:.25rem;padding-bottom:.25rem}label.text,.value.text{white-space:pre-wrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.CheckboxControlValueAccessor, selector: "input[type=checkbox]:not([ngNoCva])[formControlName],input[type=checkbox]:not([ngNoCva])[formControl],input[type=checkbox]:not([ngNoCva])[ngModel]" }, { 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: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1.DatePipe, name: "date" }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: FormInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-form-input', imports: [
-                        CommonModule,
-                        FormsModule,
-                        NgIf,
-                        NgSwitch,
-                        NgSwitchCase,
-                        ReactiveFormsModule,
-                    ], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }], host: {
+            args: [{ selector: 'lib-form-input', imports: [CommonModule, FormsModule, ReactiveFormsModule], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }], changeDetection: ChangeDetectionStrategy.Eager, host: {
                         '[class.full-height]': 'isFullHeight',
                         // Clears a stray `type` attribute for the same reason as FormInputGroupComponent — see the
                         // comment there. Applies when a consumer sets `type` on `lib-form-input` directly.
-                        '[attr.type]': 'null'
-                    }, template: "<ng-container *ngIf=\"formGroupDirective.form?.enabled || isFormEditMode;else disabledControl\">\n    <ng-container [ngSwitch]=\"type\">\n        \n        <textarea *ngSwitchCase=\"'textarea'\"\n       \n        [attr.maxLength]=\"maxLength ?? null\"\n        [attr.rows]=\"rows\"\n        [class.invalid]=\"invalid\"\n        [formControlName]=\"controlName\"\n        (blur)=\"onBlur()\"\n        (focus)=\"onFocus()\"\n        (input)=\"onInput()\">\n        </textarea>\n\n        <ng-container *ngSwitchCase=\"'checkbox'\">\n            <input *ngIf=\"isFormControl; else fixedCheckbox\"\n            class=\"switch\"\n            type=\"checkbox\"\n           \n            [class.invalid]=\"invalid\"\n            [formControlName]=\"controlName\"\n            (blur)=\"onBlur()\"\n            (focus)=\"onFocus()\"\n            (input)=\"onInput()\" />\n\n            <ng-template #fixedCheckbox>\n                <input\n                class=\"switch\"\n                type=\"checkbox\"\n                [(ngModel)]=\"fixedValue\"\n                [attr.readonly]=\"true\"\n                [class.invalid]=\"invalid\"\n                [class.readonly-as-disabled]=\"displayReadOnlyAsDisabled\"\n                [disabled]=\"isDisabled\"\n                [ngModelOptions]=\"{ standalone: true }\"\n                (blur)=\"onBlur()\"\n                (change)=\"onChange($event)\"\n                (focus)=\"onFocus()\"\n                (input)=\"onInput()\"\n                (ngModelChange)=\"onValueChanged($event)\" />\n            </ng-template>\n        </ng-container>\n\n\n        <ng-container *ngSwitchDefault>\n            <input *ngIf=\"isFormControl; else fixedTextBox\"\n           \n            [attr.maxLength]=\"maxLength ?? null\"\n            [attr.min]=\"minAttributeValue\"\n            [attr.readonly]=\"readOnly ? true : null\"\n            [attr.step]=\"stepAttributeValue\"\n            [class.invalid]=\"invalid\"\n            [class.readonly-as-disabled]=\"displayReadOnlyAsDisabled\"\n            [formControlName]=\"controlName\"\n            [type]=\"type\"\n            (blur)=\"onBlur()\"\n            (focus)=\"onFocus()\"\n            (input)=\"onInput()\" />\n\n            <ng-template #fixedTextBox>\n                <input\n                type=\"text\"\n                [attr.maxLength]=\"maxLength ?? null\"\n                [attr.min]=\"minAttributeValue\"\n                [attr.readonly]=\"true\"\n                [attr.step]=\"stepAttributeValue\"\n                [class.invalid]=\"invalid\"\n                [class.readonly-as-disabled]=\"displayReadOnlyAsDisabled\"\n                [disabled]=\"isDisabled\"\n                [ngModel]=\"type === 'date' || type === 'datetime-local' ? (fixedValue | date: format) : ( type === 'number' ? (fixedValue | number) : fixedValue )\" \n                [ngModelOptions]=\"{ standalone: true }\"\n                (blur)=\"onBlur()\"\n                (focus)=\"onFocus()\"\n                (input)=\"onInput()\"\n                (ngModelChange)=\"onValueChanged($event)\" />\n            </ng-template>\n        </ng-container>\n\n    </ng-container>\n</ng-container>\n\n<ng-template #disabledControl>\n    <ng-container [ngSwitch]=\"type\">\n        <span class=\"value\" *ngSwitchCase=\"'checkbox'\">\n            <i [ngClass]=\"fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value ? 'fa-solid fa-square-check' : 'fa-regular fa-square'\"></i>\n        </span>\n\n        <span class=\"value\" *ngSwitchCase=\"'date'\">\n            {{ fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value | date: format }}\n        </span>\n\n        <span class=\"value\" *ngSwitchCase=\"'datetime-local'\">\n            {{ fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value | date: format }}\n        </span>\n\n        <span class=\"value\" *ngSwitchCase=\"'number'\">\n            {{ fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value | number: format }}\n        </span>\n\n        <span class=\"value text\" *ngSwitchDefault>{{ fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value }}</span>\n    </ng-container>\n</ng-template>\n\n<ng-template #fixedTextbox let-fixedValue=\"fixedValue\">\n    \n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:block}:host.full-height{height:100%}:host.full-height textarea{height:100%}input,textarea{--tw-border-opacity: 1;border-color:rgb(156 163 175 / var(--tw-border-opacity, 1))}input:focus,textarea:focus{--tw-border-opacity: 1;border-color:rgb(156 163 175 / var(--tw-border-opacity, 1));--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-color: rgb(0 107 182 / .3) }input,textarea{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}input:invalid,textarea:invalid{--tw-border-opacity: 1;border-color:rgb(248 113 113 / var(--tw-border-opacity, 1))}input:disabled,input.readonly-as-disabled[readonly],textarea:disabled,textarea.readonly-as-disabled[readonly]{--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity, 1))}input.ng-invalid.ng-touched,input.invalid,textarea.ng-invalid.ng-touched,textarea.invalid{--tw-border-opacity: 1;border-color:rgb(220 38 38 / var(--tw-border-opacity, 1))}input[type=text],input[type=number],input[type=password],input[type=date],input[type=datetime-local],input[type=email],input[type=file],input[type=month],input[type=tel],input[type=time],input[type=url],input[type=week],textarea{display:block;width:100%;border-radius:.375rem;padding:.25rem .5rem;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}input[type=text].ng-invalid.ng-touched,input[type=text].invalid,input[type=number].ng-invalid.ng-touched,input[type=number].invalid,input[type=password].ng-invalid.ng-touched,input[type=password].invalid,input[type=date].ng-invalid.ng-touched,input[type=date].invalid,input[type=datetime-local].ng-invalid.ng-touched,input[type=datetime-local].invalid,input[type=email].ng-invalid.ng-touched,input[type=email].invalid,input[type=file].ng-invalid.ng-touched,input[type=file].invalid,input[type=month].ng-invalid.ng-touched,input[type=month].invalid,input[type=tel].ng-invalid.ng-touched,input[type=tel].invalid,input[type=time].ng-invalid.ng-touched,input[type=time].invalid,input[type=url].ng-invalid.ng-touched,input[type=url].invalid,input[type=week].ng-invalid.ng-touched,input[type=week].invalid,textarea.ng-invalid.ng-touched,textarea.invalid{margin-right:-2.25rem;padding-right:2.25rem;transition-property:none}input[type=text].ng-invalid.ng-touched:focus,input[type=text].invalid:focus,input[type=number].ng-invalid.ng-touched:focus,input[type=number].invalid:focus,input[type=password].ng-invalid.ng-touched:focus,input[type=password].invalid:focus,input[type=date].ng-invalid.ng-touched:focus,input[type=date].invalid:focus,input[type=datetime-local].ng-invalid.ng-touched:focus,input[type=datetime-local].invalid:focus,input[type=email].ng-invalid.ng-touched:focus,input[type=email].invalid:focus,input[type=file].ng-invalid.ng-touched:focus,input[type=file].invalid:focus,input[type=month].ng-invalid.ng-touched:focus,input[type=month].invalid:focus,input[type=tel].ng-invalid.ng-touched:focus,input[type=tel].invalid:focus,input[type=time].ng-invalid.ng-touched:focus,input[type=time].invalid:focus,input[type=url].ng-invalid.ng-touched:focus,input[type=url].invalid:focus,input[type=week].ng-invalid.ng-touched:focus,input[type=week].invalid:focus,textarea.ng-invalid.ng-touched:focus,textarea.invalid:focus{--tw-ring-color: rgb(248 113 113 / .3) }input[type=text].ng-invalid.ng-touched,input[type=text].invalid,input[type=number].ng-invalid.ng-touched,input[type=number].invalid,input[type=password].ng-invalid.ng-touched,input[type=password].invalid,input[type=date].ng-invalid.ng-touched,input[type=date].invalid,input[type=datetime-local].ng-invalid.ng-touched,input[type=datetime-local].invalid,input[type=email].ng-invalid.ng-touched,input[type=email].invalid,input[type=file].ng-invalid.ng-touched,input[type=file].invalid,input[type=month].ng-invalid.ng-touched,input[type=month].invalid,input[type=tel].ng-invalid.ng-touched,input[type=tel].invalid,input[type=time].ng-invalid.ng-touched,input[type=time].invalid,input[type=url].ng-invalid.ng-touched,input[type=url].invalid,input[type=week].ng-invalid.ng-touched,input[type=week].invalid,textarea.ng-invalid.ng-touched,textarea.invalid{background-size:1.125rem 1.125rem;background-position:right .5625rem center;background-repeat:no-repeat;background-image:url(\"data:image/svg+xml,%3csvg class='text-white' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e\")}input[type=checkbox]{position:relative;margin-top:.25rem;margin-bottom:.25rem;height:1.25rem;width:1.25rem;border-radius:.25rem;padding:.125rem;display:inline-flex;flex-direction:row;justify-content:flex-end;appearance:none;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}input[type=checkbox]:disabled{pointer-events:none;opacity:.5}input[type=checkbox]:not(.switch){border-width:2px;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}input[type=checkbox]:not(.switch):focus{--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}input[type=checkbox]:not(.switch):before{border-radius:.25rem;--tw-content: \"\";content:var(--tw-content);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:.25rem;font-family:\"Font Awesome 6 Free\";font-weight:900}input[type=checkbox]:checked{border-color:#006bb6cc;--tw-bg-opacity: 1;background-color:rgb(0 107 182 / var(--tw-bg-opacity, 1));background-image:none}input[type=checkbox]:checked:before{--tw-content: \"\\f00c\";content:var(--tw-content);--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}input[type=checkbox]:disabled~label{opacity:.5}input[type=checkbox]~label{margin-left:.5rem;-webkit-user-select:none;user-select:none}input[type=checkbox].switch{height:1.5rem;width:3rem;border-radius:2rem;appearance:none;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}input[type=checkbox].switch:before{aspect-ratio:1 / 1;height:100%;border-radius:9999px;--tw-content: \"\";content:var(--tw-content);background-color:#6b728099}input[type=checkbox].switch:after{flex-grow:1;--tw-content: \"\";content:var(--tw-content);transition:flex-grow .15s ease-in-out}input[type=checkbox].switch:focus:before{background-color:#3b82f699}input[type=checkbox].switch:checked{border-color:#006bb6cc;--tw-bg-opacity: 1;background-color:rgb(0 107 182 / var(--tw-bg-opacity, 1));background-image:none}input[type=checkbox].switch:checked:before{--tw-content: \"\";content:var(--tw-content);--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}input[type=checkbox].switch:checked:after{flex-grow:0}label,.value{display:block;overflow-wrap:break-word;padding-top:.25rem;padding-bottom:.25rem}label.text,.value.text{white-space:pre-wrap}\n"] }]
+                        '[attr.type]': 'null',
+                    }, template: "@if (formGroupDirective.form?.enabled || isFormEditMode) {\n  @switch (type) {\n    @case ('textarea') {\n      <textarea\n        [attr.maxLength]=\"maxLength ?? null\"\n        [attr.rows]=\"rows\"\n        [class.invalid]=\"invalid\"\n        [formControlName]=\"controlName\"\n        (blur)=\"onBlur()\"\n        (focus)=\"onFocus()\"\n        (input)=\"onInput()\"\n      ></textarea>\n    }\n    @case ('checkbox') {\n      @if (isFormControl) {\n        <input\n          class=\"switch\"\n          type=\"checkbox\"\n          [class.invalid]=\"invalid\"\n          [formControlName]=\"controlName\"\n          (blur)=\"onBlur()\"\n          (focus)=\"onFocus()\"\n          (input)=\"onInput()\"\n        />\n      } @else {\n        <input\n          class=\"switch\"\n          type=\"checkbox\"\n          [(ngModel)]=\"fixedValue\"\n          [attr.readonly]=\"true\"\n          [class.invalid]=\"invalid\"\n          [class.readonly-as-disabled]=\"displayReadOnlyAsDisabled\"\n          [disabled]=\"isDisabled\"\n          [ngModelOptions]=\"{ standalone: true }\"\n          (blur)=\"onBlur()\"\n          (change)=\"onChange($event)\"\n          (focus)=\"onFocus()\"\n          (input)=\"onInput()\"\n          (ngModelChange)=\"onValueChanged($event)\"\n        />\n      }\n    }\n    @default {\n      @if (isFormControl) {\n        <input\n          [attr.maxLength]=\"maxLength ?? null\"\n          [attr.min]=\"minAttributeValue\"\n          [attr.readonly]=\"readOnly ? true : null\"\n          [attr.step]=\"stepAttributeValue\"\n          [class.invalid]=\"invalid\"\n          [class.readonly-as-disabled]=\"displayReadOnlyAsDisabled\"\n          [formControlName]=\"controlName\"\n          [type]=\"type\"\n          (blur)=\"onBlur()\"\n          (focus)=\"onFocus()\"\n          (input)=\"onInput()\"\n        />\n      } @else {\n        <input\n          type=\"text\"\n          [attr.maxLength]=\"maxLength ?? null\"\n          [attr.min]=\"minAttributeValue\"\n          [attr.readonly]=\"true\"\n          [attr.step]=\"stepAttributeValue\"\n          [class.invalid]=\"invalid\"\n          [class.readonly-as-disabled]=\"displayReadOnlyAsDisabled\"\n          [disabled]=\"isDisabled\"\n          [ngModel]=\"\n            type === 'date' || type === 'datetime-local'\n              ? (fixedValue | date: format)\n              : type === 'number'\n                ? (fixedValue | number)\n                : fixedValue\n          \"\n          [ngModelOptions]=\"{ standalone: true }\"\n          (blur)=\"onBlur()\"\n          (focus)=\"onFocus()\"\n          (input)=\"onInput()\"\n          (ngModelChange)=\"onValueChanged($event)\"\n        />\n      }\n    }\n  }\n} @else {\n  @switch (type) {\n    @case ('checkbox') {\n      <span class=\"value\">\n        <i\n          [ngClass]=\"\n            (fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value)\n              ? 'fa-solid fa-square-check'\n              : 'fa-regular fa-square'\n          \"\n        ></i>\n      </span>\n    }\n    @case ('date') {\n      <span class=\"value\">\n        {{ fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value | date: format }}\n      </span>\n    }\n    @case ('datetime-local') {\n      <span class=\"value\">\n        {{ fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value | date: format }}\n      </span>\n    }\n    @case ('number') {\n      <span class=\"value\">\n        {{ fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value | number: format }}\n      </span>\n    }\n    @default {\n      <span class=\"value text\">{{\n        fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value\n      }}</span>\n    }\n  }\n}\n\n<ng-template #fixedTextbox let-fixedValue=\"fixedValue\"> </ng-template>\n", styles: [":host{display:block}:host.full-height{height:100%}:host.full-height textarea{height:100%}input,textarea{--tw-border-opacity: 1;border-color:rgb(156 163 175 / var(--tw-border-opacity, 1))}input:focus,textarea:focus{--tw-border-opacity: 1;border-color:rgb(156 163 175 / var(--tw-border-opacity, 1));--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-color: rgb(0 107 182 / .3) }input,textarea{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}input:invalid,textarea:invalid{--tw-border-opacity: 1;border-color:rgb(248 113 113 / var(--tw-border-opacity, 1))}input:disabled,input.readonly-as-disabled[readonly],textarea:disabled,textarea.readonly-as-disabled[readonly]{--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity, 1))}input.ng-invalid.ng-touched,input.invalid,textarea.ng-invalid.ng-touched,textarea.invalid{--tw-border-opacity: 1;border-color:rgb(220 38 38 / var(--tw-border-opacity, 1))}input[type=text],input[type=number],input[type=password],input[type=date],input[type=datetime-local],input[type=email],input[type=file],input[type=month],input[type=tel],input[type=time],input[type=url],input[type=week],textarea{display:block;width:100%;border-radius:.375rem;padding:.25rem .5rem;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}input[type=text].ng-invalid.ng-touched,input[type=text].invalid,input[type=number].ng-invalid.ng-touched,input[type=number].invalid,input[type=password].ng-invalid.ng-touched,input[type=password].invalid,input[type=date].ng-invalid.ng-touched,input[type=date].invalid,input[type=datetime-local].ng-invalid.ng-touched,input[type=datetime-local].invalid,input[type=email].ng-invalid.ng-touched,input[type=email].invalid,input[type=file].ng-invalid.ng-touched,input[type=file].invalid,input[type=month].ng-invalid.ng-touched,input[type=month].invalid,input[type=tel].ng-invalid.ng-touched,input[type=tel].invalid,input[type=time].ng-invalid.ng-touched,input[type=time].invalid,input[type=url].ng-invalid.ng-touched,input[type=url].invalid,input[type=week].ng-invalid.ng-touched,input[type=week].invalid,textarea.ng-invalid.ng-touched,textarea.invalid{margin-right:-2.25rem;padding-right:2.25rem;transition-property:none}input[type=text].ng-invalid.ng-touched:focus,input[type=text].invalid:focus,input[type=number].ng-invalid.ng-touched:focus,input[type=number].invalid:focus,input[type=password].ng-invalid.ng-touched:focus,input[type=password].invalid:focus,input[type=date].ng-invalid.ng-touched:focus,input[type=date].invalid:focus,input[type=datetime-local].ng-invalid.ng-touched:focus,input[type=datetime-local].invalid:focus,input[type=email].ng-invalid.ng-touched:focus,input[type=email].invalid:focus,input[type=file].ng-invalid.ng-touched:focus,input[type=file].invalid:focus,input[type=month].ng-invalid.ng-touched:focus,input[type=month].invalid:focus,input[type=tel].ng-invalid.ng-touched:focus,input[type=tel].invalid:focus,input[type=time].ng-invalid.ng-touched:focus,input[type=time].invalid:focus,input[type=url].ng-invalid.ng-touched:focus,input[type=url].invalid:focus,input[type=week].ng-invalid.ng-touched:focus,input[type=week].invalid:focus,textarea.ng-invalid.ng-touched:focus,textarea.invalid:focus{--tw-ring-color: rgb(248 113 113 / .3) }input[type=text].ng-invalid.ng-touched,input[type=text].invalid,input[type=number].ng-invalid.ng-touched,input[type=number].invalid,input[type=password].ng-invalid.ng-touched,input[type=password].invalid,input[type=date].ng-invalid.ng-touched,input[type=date].invalid,input[type=datetime-local].ng-invalid.ng-touched,input[type=datetime-local].invalid,input[type=email].ng-invalid.ng-touched,input[type=email].invalid,input[type=file].ng-invalid.ng-touched,input[type=file].invalid,input[type=month].ng-invalid.ng-touched,input[type=month].invalid,input[type=tel].ng-invalid.ng-touched,input[type=tel].invalid,input[type=time].ng-invalid.ng-touched,input[type=time].invalid,input[type=url].ng-invalid.ng-touched,input[type=url].invalid,input[type=week].ng-invalid.ng-touched,input[type=week].invalid,textarea.ng-invalid.ng-touched,textarea.invalid{background-size:1.125rem 1.125rem;background-position:right .5625rem center;background-repeat:no-repeat;background-image:url(\"data:image/svg+xml,%3csvg class='text-white' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e\")}input[type=checkbox]{position:relative;margin-top:.25rem;margin-bottom:.25rem;height:1.25rem;width:1.25rem;border-radius:.25rem;padding:.125rem;display:inline-flex;flex-direction:row;justify-content:flex-end;appearance:none;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}input[type=checkbox]:disabled{pointer-events:none;opacity:.5}input[type=checkbox]:not(.switch){border-width:2px;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}input[type=checkbox]:not(.switch):focus{--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}input[type=checkbox]:not(.switch):before{border-radius:.25rem;--tw-content: \"\";content:var(--tw-content);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:.25rem;font-family:\"Font Awesome 6 Free\";font-weight:900}input[type=checkbox]:checked{border-color:#006bb6cc;--tw-bg-opacity: 1;background-color:rgb(0 107 182 / var(--tw-bg-opacity, 1));background-image:none}input[type=checkbox]:checked:before{--tw-content: \"\\f00c\";content:var(--tw-content);--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}input[type=checkbox]:disabled~label{opacity:.5}input[type=checkbox]~label{margin-left:.5rem;-webkit-user-select:none;user-select:none}input[type=checkbox].switch{height:1.5rem;width:3rem;border-radius:2rem;appearance:none;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}input[type=checkbox].switch:before{aspect-ratio:1 / 1;height:100%;border-radius:9999px;--tw-content: \"\";content:var(--tw-content);background-color:#6b728099}input[type=checkbox].switch:after{flex-grow:1;--tw-content: \"\";content:var(--tw-content);transition:flex-grow .15s ease-in-out}input[type=checkbox].switch:focus:before{background-color:#3b82f699}input[type=checkbox].switch:checked{border-color:#006bb6cc;--tw-bg-opacity: 1;background-color:rgb(0 107 182 / var(--tw-bg-opacity, 1));background-image:none}input[type=checkbox].switch:checked:before{--tw-content: \"\";content:var(--tw-content);--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}input[type=checkbox].switch:checked:after{flex-grow:0}label,.value{display:block;overflow-wrap:break-word;padding-top:.25rem;padding-bottom:.25rem}label.text,.value.text{white-space:pre-wrap}\n"] }]
         }], ctorParameters: () => [], propDecorators: { autofocus: [{
                 type: Input
             }], controlName: [{
@@ -1463,9 +1439,7 @@ class FormInputGroupComponent extends BaseComponent {
     //#endregion
     //#region Properties
     get formControl() {
-        return this.controlName
-            ? this.formGroup.get(this.controlName)
-            : null;
+        return this.controlName ? this.formGroup.get(this.controlName) : null;
     }
     get formGroup() {
         let formGroup = this.formGroupDirective.form;
@@ -1486,14 +1460,10 @@ class FormInputGroupComponent extends BaseComponent {
         super();
     }
     ngOnInit() {
-        this.formControl?.statusChanges
-            .pipe(takeUntil(this.destroy$))
-            .subscribe(() => {
+        this.formControl?.statusChanges.pipe(takeUntil(this.destroy$)).subscribe(() => {
             this.loadingField = false;
         });
-        this.formControl?.valueChanges
-            .pipe(takeUntil(this.destroy$))
-            .subscribe(() => {
+        this.formControl?.valueChanges.pipe(takeUntil(this.destroy$)).subscribe(() => {
             this.loadingField = false;
         });
         this.formService.fieldRefreshed
@@ -1509,28 +1479,20 @@ class FormInputGroupComponent extends BaseComponent {
     hasValidation(errorKey) {
         return Object.keys(this.validations).indexOf(errorKey) >= 0;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: FormInputGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: FormInputGroupComponent, isStandalone: true, selector: "lib-form-input-group", inputs: { autofocus: "autofocus", alignContent: "alignContent", controlName: "controlName", fixedValue: "fixedValue", format: "format", label: "label", isDisabled: "isDisabled", isFullHeight: "isFullHeight", maxLength: "maxLength", min: "min", notes: "notes", readOnly: "readOnly", rows: "rows", showLabel: "showLabel", step: "step", template: "template", type: "type", validations: "validations" }, host: { properties: { "class.full-height": "isFullHeight", "attr.type": "null" } }, usesInheritance: true, ngImport: i0, template: "<label *ngIf=\"showLabel\"\n[attr.for]=\"controlName\">\n    {{ label | translate }}:\n</label>\n\n<div class=\"field\"\n[class.col-span-2]=\"!showLabel\"\n[ngStyle]=\"{ 'align-content': alignContent }\" >\n    <div class=\"loading\" *ngIf=\"(loadingField || (formService.loading && formService.model === null)); else content\">\n        <div></div>\n    </div>\n\n    <ng-template #content>\n        <ng-container *ngTemplateOutlet=\"template ? template : defaultTemplate\">\n        </ng-container>\n        \n        <div class=\"validations\" [class.show]=\"formControl?.invalid\" *ngIf=\"formControl?.touched\">\n            <ng-container *ngFor=\"let error of formControl?.errors | keyvalue\">\n                <span *ngIf=\"hasValidation(error.key)\">{{ validations[error.key] | translate }}</span>\n                <ng-template #defaultValidationError>{{ error.key }}</ng-template>\n            </ng-container>\n        </div>\n        \n        <ng-template #defaultTemplate>\n            <lib-form-input #formInput\n            [autofocus]=\"autofocus\"\n            [controlName]=\"controlName\"\n            [fixedValue]=\"fixedValue\"\n            [format]=\"format\"\n            [isDisabled]=\"isDisabled\"\n            [isFullHeight]=\"isFullHeight\"\n            [min]=\"min\"\n            [maxLength]=\"maxLength\"\n            [readOnly]=\"readOnly\"\n            [rows]=\"rows\"\n            [step]=\"step\"\n            [type]=\"type\">\n            </lib-form-input>\n        </ng-template>\n        \n        <span class=\"text-sm italic\" *ngIf=\"hasNotes\">\n            *{{ notes | translate }}\n        </span>\n    </ng-template>\n\n</div>\n", styles: [":host{grid-column:span 2 / span 2;display:grid;grid-template-columns:subgrid;gap:.75rem}:host.full-height{max-height:100%;overflow:auto}label{white-space:nowrap;padding-top:.25rem;padding-bottom:.25rem;text-align:right;font-size:.75rem;font-weight:700;text-transform:uppercase;line-height:1.5rem;letter-spacing:.025em;--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.field .validations{flex-basis:100%;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(220 38 38 / var(--tw-text-opacity, 1))}.field .validations.show{margin-top:.25rem}.field .validations span{display:block}.field .loading{max-width:24rem}@keyframes pulse{50%{opacity:.5}}.field .loading{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.field .loading *{height:.625rem;width:100%;border-radius:9999px;--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1))}@media (prefers-color-scheme: dark){.field .loading *{--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))}}\n"], dependencies: [{ kind: "component", type: FormInputComponent, selector: "lib-form-input", inputs: ["autofocus", "controlName", "disabledControlName", "displayReadOnlyAsDisabled", "fixedValue", "format", "invalid", "isDisabled", "isFullHeight", "maxLength", "min", "readOnly", "rows", "step", "type"], outputs: ["blurred", "changed", "fixedValueChanged", "focused", "inputChanged"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormInputGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: FormInputGroupComponent, isStandalone: true, selector: "lib-form-input-group", inputs: { autofocus: "autofocus", alignContent: "alignContent", controlName: "controlName", fixedValue: "fixedValue", format: "format", label: "label", isDisabled: "isDisabled", isFullHeight: "isFullHeight", maxLength: "maxLength", min: "min", notes: "notes", readOnly: "readOnly", rows: "rows", showLabel: "showLabel", step: "step", template: "template", type: "type", validations: "validations" }, host: { properties: { "class.full-height": "isFullHeight", "attr.type": "null" } }, usesInheritance: true, ngImport: i0, template: "@if (showLabel) {\n  <label [attr.for]=\"controlName\"> {{ label | translate }}: </label>\n}\n\n<div class=\"field\" [class.col-span-2]=\"!showLabel\" [ngStyle]=\"{ 'align-content': alignContent }\">\n  @if (loadingField || (formService.loading && formService.model === null)) {\n    <div class=\"loading\">\n      <div></div>\n    </div>\n  } @else {\n    <ng-container *ngTemplateOutlet=\"template ? template : defaultTemplate\"> </ng-container>\n    @if (formControl?.touched) {\n      <div class=\"validations\" [class.show]=\"formControl?.invalid\">\n        @for (error of $safeNavigationMigration(formControl?.errors) | keyvalue; track error) {\n          @if (hasValidation(error.key)) {\n            <span>{{ validations[error.key] | translate }}</span>\n          }\n          <ng-template #defaultValidationError>{{ error.key }}</ng-template>\n        }\n      </div>\n    }\n    <ng-template #defaultTemplate>\n      <lib-form-input\n        #formInput\n        [autofocus]=\"autofocus\"\n        [controlName]=\"controlName\"\n        [fixedValue]=\"fixedValue\"\n        [format]=\"format\"\n        [isDisabled]=\"isDisabled\"\n        [isFullHeight]=\"isFullHeight\"\n        [min]=\"min\"\n        [maxLength]=\"maxLength\"\n        [readOnly]=\"readOnly\"\n        [rows]=\"rows\"\n        [step]=\"step\"\n        [type]=\"type\"\n      >\n      </lib-form-input>\n    </ng-template>\n    @if (hasNotes) {\n      <span class=\"text-sm italic\"> *{{ notes | translate }} </span>\n    }\n  }\n</div>\n", styles: [":host{grid-column:span 2 / span 2;display:grid;grid-template-columns:subgrid;gap:.75rem}:host.full-height{max-height:100%;overflow:auto}label{white-space:nowrap;padding-top:.25rem;padding-bottom:.25rem;text-align:right;font-size:.75rem;font-weight:700;text-transform:uppercase;line-height:1.5rem;letter-spacing:.025em;--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.field .validations{flex-basis:100%;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(220 38 38 / var(--tw-text-opacity, 1))}.field .validations.show{margin-top:.25rem}.field .validations span{display:block}.field .loading{max-width:24rem}@keyframes pulse{50%{opacity:.5}}.field .loading{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.field .loading *{height:.625rem;width:100%;border-radius:9999px;--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1))}@media(prefers-color-scheme:dark){.field .loading *{--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))}}\n"], dependencies: [{ kind: "component", type: FormInputComponent, selector: "lib-form-input", inputs: ["autofocus", "controlName", "disabledControlName", "displayReadOnlyAsDisabled", "fixedValue", "format", "invalid", "isDisabled", "isFullHeight", "maxLength", "min", "readOnly", "rows", "step", "type"], outputs: ["blurred", "changed", "fixedValueChanged", "focused", "inputChanged"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: FormInputGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormInputGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-form-input-group', imports: [
-                        FormInputComponent,
-                        KeyValuePipe,
-                        NgFor,
-                        NgIf,
-                        NgStyle,
-                        NgTemplateOutlet,
-                        TranslatePipe,
-                    ], host: {
+            args: [{ selector: 'lib-form-input-group', imports: [FormInputComponent, KeyValuePipe, NgStyle, NgTemplateOutlet, TranslatePipe], changeDetection: ChangeDetectionStrategy.Eager, host: {
                         '[class.full-height]': 'isFullHeight',
                         // Angular keeps static attributes in the DOM even when a directive consumes them as an
                         // @Input(), so `type="checkbox"` would linger on this host element — where
                         // @tailwindcss/forms' tag-agnostic `[type="checkbox"]` base rules style the host itself as
                         // a checkbox (1px border, white fill, height:1rem). Clearing the attribute removes the
                         // stray box for every type while leaving the `type` @Input() untouched.
-                        '[attr.type]': 'null'
-                    }, template: "<label *ngIf=\"showLabel\"\n[attr.for]=\"controlName\">\n    {{ label | translate }}:\n</label>\n\n<div class=\"field\"\n[class.col-span-2]=\"!showLabel\"\n[ngStyle]=\"{ 'align-content': alignContent }\" >\n    <div class=\"loading\" *ngIf=\"(loadingField || (formService.loading && formService.model === null)); else content\">\n        <div></div>\n    </div>\n\n    <ng-template #content>\n        <ng-container *ngTemplateOutlet=\"template ? template : defaultTemplate\">\n        </ng-container>\n        \n        <div class=\"validations\" [class.show]=\"formControl?.invalid\" *ngIf=\"formControl?.touched\">\n            <ng-container *ngFor=\"let error of formControl?.errors | keyvalue\">\n                <span *ngIf=\"hasValidation(error.key)\">{{ validations[error.key] | translate }}</span>\n                <ng-template #defaultValidationError>{{ error.key }}</ng-template>\n            </ng-container>\n        </div>\n        \n        <ng-template #defaultTemplate>\n            <lib-form-input #formInput\n            [autofocus]=\"autofocus\"\n            [controlName]=\"controlName\"\n            [fixedValue]=\"fixedValue\"\n            [format]=\"format\"\n            [isDisabled]=\"isDisabled\"\n            [isFullHeight]=\"isFullHeight\"\n            [min]=\"min\"\n            [maxLength]=\"maxLength\"\n            [readOnly]=\"readOnly\"\n            [rows]=\"rows\"\n            [step]=\"step\"\n            [type]=\"type\">\n            </lib-form-input>\n        </ng-template>\n        \n        <span class=\"text-sm italic\" *ngIf=\"hasNotes\">\n            *{{ notes | translate }}\n        </span>\n    </ng-template>\n\n</div>\n", styles: [":host{grid-column:span 2 / span 2;display:grid;grid-template-columns:subgrid;gap:.75rem}:host.full-height{max-height:100%;overflow:auto}label{white-space:nowrap;padding-top:.25rem;padding-bottom:.25rem;text-align:right;font-size:.75rem;font-weight:700;text-transform:uppercase;line-height:1.5rem;letter-spacing:.025em;--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.field .validations{flex-basis:100%;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(220 38 38 / var(--tw-text-opacity, 1))}.field .validations.show{margin-top:.25rem}.field .validations span{display:block}.field .loading{max-width:24rem}@keyframes pulse{50%{opacity:.5}}.field .loading{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.field .loading *{height:.625rem;width:100%;border-radius:9999px;--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1))}@media (prefers-color-scheme: dark){.field .loading *{--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))}}\n"] }]
+                        '[attr.type]': 'null',
+                    }, template: "@if (showLabel) {\n  <label [attr.for]=\"controlName\"> {{ label | translate }}: </label>\n}\n\n<div class=\"field\" [class.col-span-2]=\"!showLabel\" [ngStyle]=\"{ 'align-content': alignContent }\">\n  @if (loadingField || (formService.loading && formService.model === null)) {\n    <div class=\"loading\">\n      <div></div>\n    </div>\n  } @else {\n    <ng-container *ngTemplateOutlet=\"template ? template : defaultTemplate\"> </ng-container>\n    @if (formControl?.touched) {\n      <div class=\"validations\" [class.show]=\"formControl?.invalid\">\n        @for (error of $safeNavigationMigration(formControl?.errors) | keyvalue; track error) {\n          @if (hasValidation(error.key)) {\n            <span>{{ validations[error.key] | translate }}</span>\n          }\n          <ng-template #defaultValidationError>{{ error.key }}</ng-template>\n        }\n      </div>\n    }\n    <ng-template #defaultTemplate>\n      <lib-form-input\n        #formInput\n        [autofocus]=\"autofocus\"\n        [controlName]=\"controlName\"\n        [fixedValue]=\"fixedValue\"\n        [format]=\"format\"\n        [isDisabled]=\"isDisabled\"\n        [isFullHeight]=\"isFullHeight\"\n        [min]=\"min\"\n        [maxLength]=\"maxLength\"\n        [readOnly]=\"readOnly\"\n        [rows]=\"rows\"\n        [step]=\"step\"\n        [type]=\"type\"\n      >\n      </lib-form-input>\n    </ng-template>\n    @if (hasNotes) {\n      <span class=\"text-sm italic\"> *{{ notes | translate }} </span>\n    }\n  }\n</div>\n", styles: [":host{grid-column:span 2 / span 2;display:grid;grid-template-columns:subgrid;gap:.75rem}:host.full-height{max-height:100%;overflow:auto}label{white-space:nowrap;padding-top:.25rem;padding-bottom:.25rem;text-align:right;font-size:.75rem;font-weight:700;text-transform:uppercase;line-height:1.5rem;letter-spacing:.025em;--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.field .validations{flex-basis:100%;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(220 38 38 / var(--tw-text-opacity, 1))}.field .validations.show{margin-top:.25rem}.field .validations span{display:block}.field .loading{max-width:24rem}@keyframes pulse{50%{opacity:.5}}.field .loading{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.field .loading *{height:.625rem;width:100%;border-radius:9999px;--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1))}@media(prefers-color-scheme:dark){.field .loading *{--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { autofocus: [{
                 type: Input
             }], alignContent: [{
@@ -1668,16 +1630,10 @@ class CatalogSelectComponent extends BaseComponent {
         return this.formGroup.form.get(this.formControlName);
     }
     get formControlName() {
-        return [
-            ...this.formGroupName?.path ?? [],
-            this.controlName
-        ].join('.');
+        return [...(this.formGroupName?.path ?? []), this.controlName].join('.');
     }
     get formDisplayControlName() {
-        return [
-            ...this.formGroupName?.path ?? [],
-            this.displayControlName
-        ].join('.');
+        return [...(this.formGroupName?.path ?? []), this.displayControlName].join('.');
     }
     get isInvalid() {
         return this.formControl.invalid;
@@ -1737,9 +1693,7 @@ class CatalogSelectComponent extends BaseComponent {
         this.filterDiffer = this.keyValueDiffers.find(this._filters).create();
         // Subscribe to changes in the form control to update the selected value and display control states.
         this.syncFormControlsEnabledDisabled();
-        this.formControl?.valueChanges
-            .pipe(takeUntil(this.destroy$))
-            .subscribe((value) => {
+        this.formControl?.valueChanges.pipe(takeUntil(this.destroy$)).subscribe((value) => {
             this.syncFormControlsEnabledDisabled();
             if (!this.shouldRefreshDisplay(value)) {
                 return;
@@ -1764,17 +1718,18 @@ class CatalogSelectComponent extends BaseComponent {
         this.isFocused = false;
     }
     onContainerClick() {
-        if ((!this.isDropDownShown || this.readOnly)
-            && (this.formGroup.form?.enabled ?? false)
-            && (this.formGroup.form?.get(this.formControlName)?.enabled ?? false)) {
+        if ((!this.isDropDownShown || this.readOnly) &&
+            (this.formGroup.form?.enabled ?? false) &&
+            (this.formGroup.form?.get(this.formControlName)?.enabled ?? false)) {
             this.openDropdownOverlay();
         }
     }
     onContainerFocus() {
         this.isFocused = true;
-        if (!this.isDropDownShown && !this.readOnly
-            && (this.formGroup.form?.enabled ?? false)
-            && (this.formGroup.form?.get(this.formControlName)?.enabled ?? false)) {
+        if (!this.isDropDownShown &&
+            !this.readOnly &&
+            (this.formGroup.form?.enabled ?? false) &&
+            (this.formGroup.form?.get(this.formControlName)?.enabled ?? false)) {
             this.openDropdownOverlay();
         }
     }
@@ -1898,9 +1853,8 @@ class CatalogSelectComponent extends BaseComponent {
             const display = entry[this.displayProperty];
             if (display instanceof Observable) {
                 this.entriesDataSource.push({ value: value, display: 'Loading...' });
-                observables.push(display
-                    .pipe(take(1), tap(v => {
-                    this.entriesDataSource.filter(x => x.value === value)[0].display = v;
+                observables.push(display.pipe(take(1), tap((v) => {
+                    this.entriesDataSource.filter((x) => x.value === value)[0].display = v;
                     if (this.selectedValue === value) {
                         this.displayControl.setValue(v);
                     }
@@ -1911,9 +1865,7 @@ class CatalogSelectComponent extends BaseComponent {
             }
         });
         // Subscribed only to run the requests; the emitted values are not needed here.
-        forkJoin(observables)
-            .pipe(take(1))
-            .subscribe();
+        forkJoin(observables).pipe(take(1)).subscribe();
     }
     initializeSearch() {
         this.searchSubject
@@ -1929,9 +1881,11 @@ class CatalogSelectComponent extends BaseComponent {
             if (this.showMinimumCharactersMessage) {
                 return of(null).pipe(take(1));
             }
-            return this.catalogService.search(this.searchEndpoint, this.maxEntries, criteria ?? '', this.filters)
+            return this.catalogService
+                .search(this.searchEndpoint, this.maxEntries, criteria ?? '', this.filters)
                 .pipe(take(1));
-        })).subscribe({
+        }))
+            .subscribe({
             next: (result) => {
                 this.isLoading = false;
                 this.displayedEntries = [];
@@ -1965,7 +1919,7 @@ class CatalogSelectComponent extends BaseComponent {
                 this.showFailureMessage = true;
                 // Set a new subscription to allow retrying the search later.
                 this.initializeSearch();
-            }
+            },
         });
         if (!this.isSubscriptionInitialized) {
             this.isSubscriptionInitialized = true;
@@ -1993,7 +1947,7 @@ class CatalogSelectComponent extends BaseComponent {
                 originY: 'top',
                 overlayX: 'start',
                 overlayY: 'bottom',
-            }
+            },
         ]);
         this.overlayRef = this.overlay.create({
             positionStrategy,
@@ -2006,9 +1960,10 @@ class CatalogSelectComponent extends BaseComponent {
         const portal = new TemplatePortal(this.dropdownTemplate, this.viewContainerRef);
         this.overlayRef.attach(portal);
         this.isDropDownShown = true;
-        this.focusedIndex = this.selectedValue != null
-            ? this.displayedEntries.findIndex((entry) => entry.value === this.selectedValue)
-            : -1;
+        this.focusedIndex =
+            this.selectedValue != null
+                ? this.displayedEntries.findIndex((entry) => entry.value === this.selectedValue)
+                : -1;
         this.updateInputAriaActiveDescendant();
         // Re-evaluate minimum characters message visibility when opening the dropdown,
         // in case it was incorrectly reset by a programmatic value change.
@@ -2073,9 +2028,9 @@ class CatalogSelectComponent extends BaseComponent {
         }
     }
     tryFilterFromDataset(results) {
-        if (this.dataGridDataset
-            && this.controlName === this.dataGridDataset?.keyProperty
-            && this.dataGridDataset.hasLoadedRows) {
+        if (this.dataGridDataset &&
+            this.controlName === this.dataGridDataset?.keyProperty &&
+            this.dataGridDataset.hasLoadedRows) {
             // If the control name is matching the ID property of the data grid dataset, filter out the loaded rows to remove duplicated IDs.
             const loadedIDs = this.dataGridDataset.loadedKeys.map((key) => this.dataGridDataset.getRowID(key));
             return results.filter((result) => loadedIDs.indexOf(result.value) < 0);
@@ -2094,9 +2049,7 @@ class CatalogSelectComponent extends BaseComponent {
     }
     updateMinimumCharactersMessageVisibility(criteria) {
         this.showMinimumCharactersMessage =
-            this.shouldUseCriteria
-                && this.minimumLengthSearch > 0
-                && (criteria?.length ?? 0) < this.minimumLengthSearch;
+            this.shouldUseCriteria && this.minimumLengthSearch > 0 && (criteria?.length ?? 0) < this.minimumLengthSearch;
     }
     getNativeInput() {
         return this.inputElement?.nativeElement?.querySelector('input') ?? null;
@@ -2136,18 +2089,12 @@ class CatalogSelectComponent extends BaseComponent {
             input.removeAttribute('aria-activedescendant');
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: CatalogSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: CatalogSelectComponent, isStandalone: true, selector: "lib-catalog-select", inputs: { autofocus: "autofocus", controlName: "controlName", displayControlName: "displayControlName", displayProperty: "displayProperty", entriesList: "entriesList", filters: "filters", label: "label", maxEntries: "maxEntries", minimumLengthSearch: "minimumLengthSearch", notes: "notes", readOnly: "readOnly", searchEndpoint: "searchEndpoint", validations: "validations", valueProperty: "valueProperty" }, host: { listeners: { "body:mousedown": "bodyMouseDown($event)", "body:mouseup": "bodyMouseUp($event)" } }, viewQueries: [{ propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, read: TemplateRef }, { propertyName: "inputElement", first: true, predicate: ["input"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<lib-form-input-group\n[controlName]=\"controlName\"\n[label]=\"label\"\n[notes]=\"notes\"\n[template]=\"template\"\n[validations]=\"validations\">\n</lib-form-input-group>\n\n<ng-template #template>\n    <div class=\"catalog-container\"\n    [class.show]=\"isDropDownShown\">\n        <lib-form-input #input\n        [class.fixed-content]=\"readOnly && !shouldUseCriteria\"\n        [autofocus]=\"autofocus\"\n        [controlName]=\"displayControlName\"\n        [invalid]=\"isInvalid && isTouched\"\n        [readOnly]=\"readOnly\"\n        (blurred)=\"onContainerBlur()\"\n        (click)=\"onContainerClick()\"\n        (focused)=\"onContainerFocus()\"\n        (keydown)=\"onKeyDown($event)\">\n        </lib-form-input>\n        <button *ngIf=\"showClearButton\"\n        class=\"clear-button\"\n        type=\"button\"\n        tabindex=\"-1\"\n        (click)=\"onClearClick($event)\">\n            <i class=\"fa-solid fa-xmark\"></i>\n        </button>\n    </div>\n</ng-template>\n\n<ng-template #dropdownTemplate>\n    <div class=\"dropdown-container\">\n        <ul class=\"dropdown\"\n        role=\"listbox\"\n        [attr.id]=\"listboxId\">\n            <!-- Status rows are not options: role=\"presentation\" keeps them out of the\n                 listbox's option set, and they carry no click handler. The dropdown already\n                 closes on Escape, on blur and on an outside click. -->\n            <li *ngIf=\"isLoading\"\n            role=\"presentation\"\n            aria-live=\"polite\">\n                {{ 'CatalogSelect-Loading' | translate }}\n            </li>\n\n            <li *ngIf=\"shouldUseCriteria && showMinimumCharactersMessage\"\n            role=\"presentation\"\n            aria-live=\"polite\"\n            title=\"{{ 'CatalogSelect-MinimumLengthSearch' | translate: { minimumLengthSearch: minimumLengthSearch } }}\">\n                {{ 'CatalogSelect-MinimumLengthSearch' | translate: { minimumLengthSearch: minimumLengthSearch } }}\n            </li>\n\n            <li *ngIf=\"showNoResultsMessage\"\n            role=\"presentation\"\n            aria-live=\"polite\"\n            title=\"{{ 'CatalogSelect-NoResultsFound' | translate }}\">\n                {{ 'CatalogSelect-NoResultsFound' | translate }}\n            </li>\n\n            <!-- Retrying is a real action, so it is a real button and reachable by keyboard. -->\n            <li *ngIf=\"showFailureMessage\"\n            class=\"error\"\n            role=\"presentation\">\n                <button class=\"retry\"\n                type=\"button\"\n                title=\"{{ 'CatalogSelect-FailureMessage' | translate }}\"\n                (click)=\"onDropDownErrorClick()\">\n                    {{ 'CatalogSelect-FailureMessage' | translate }}\n                </button>\n            </li>\n\n            <!-- eslint-disable @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus --\n                 Options in a combobox listbox are deliberately not focusable. Keyboard\n                 interaction lives on the input, which owns ArrowUp/ArrowDown/Enter/Escape and\n                 points at the active option through aria-activedescendant. Giving each option\n                 its own tabindex and key handlers would break that pattern. -->\n            <li class=\"dropdown-item\" *ngFor=\"let entry of displayedEntries; let i = index\"\n            role=\"option\"\n            [attr.id]=\"getOptionId(i)\"\n            [attr.aria-selected]=\"selectedValue === entry.value\"\n            [class.focused]=\"focusedIndex === i\"\n            [class.selected]=\"selectedValue === entry.value\"\n            (click)=\"onDropDownItemClick(entry)\">\n                {{ entry.display }}\n            </li>\n            <!-- eslint-enable @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n        </ul>\n    </div>\n</ng-template>", styles: [":host-context{grid-column:span 2 / span 2;display:grid;grid-template-columns:subgrid}.catalog-container{position:relative}.catalog-container .clear-button{position:absolute;right:1.75rem;top:50%;display:flex;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));align-items:center;justify-content:center;height:1.25rem;width:1.25rem;border-radius:9999px;--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.catalog-container .clear-button:hover{--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.catalog-container .clear-button{z-index:10;cursor:pointer;border-style:none;background-color:transparent;padding:0;font-size:.875rem;line-height:1.25rem;line-height:1}.catalog-container:has(.clear-button) lib-form-input ::ng-deep input{padding-right:3.5rem}div lib-form-input ::ng-deep input{cursor:pointer;text-overflow:ellipsis;background-size:1.125rem 1.125rem;background-position:right .5625rem center;background-repeat:no-repeat;padding-right:2.25rem;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='%239ca3af' d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3e%3c/svg%3e\")}.dropdown-container{width:100%;-webkit-user-select:none;user-select:none}.dropdown{overflow-y:auto;overscroll-behavior:none;border-radius:.375rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(156 163 175 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);max-height:13rem}.dropdown li{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:.25rem .5rem}.dropdown li:not(.dropdown-item){font-size:.875rem;line-height:1.25rem}.dropdown li .retry{width:100%;cursor:pointer;border-style:none;background-color:transparent;padding:0;text-align:left;text-decoration-line:underline;color:inherit;font:inherit}.dropdown li.dropdown-item{cursor:pointer}.dropdown li.dropdown-item:nth-child(2n){background-color:#f5f5f4b3}.dropdown li.dropdown-item.selected{background-color:#59a5db33;font-weight:700}.dropdown li.dropdown-item.focused{background-color:#59a5db4d;outline:2px solid transparent;outline-offset:2px}.dropdown li.dropdown-item:hover,.dropdown li.dropdown-item:nth-child(2n):hover,.dropdown li.dropdown-item.selected:hover,.dropdown li.dropdown-item.focused:hover{background-color:#59a5db80}lib-form-input-group{flex-basis:100%}\n"], dependencies: [{ kind: "component", type: FormInputComponent, selector: "lib-form-input", inputs: ["autofocus", "controlName", "disabledControlName", "displayReadOnlyAsDisabled", "fixedValue", "format", "invalid", "isDisabled", "isFullHeight", "maxLength", "min", "readOnly", "rows", "step", "type"], outputs: ["blurred", "changed", "fixedValueChanged", "focused", "inputChanged"] }, { kind: "component", type: FormInputGroupComponent, selector: "lib-form-input-group", inputs: ["autofocus", "alignContent", "controlName", "fixedValue", "format", "label", "isDisabled", "isFullHeight", "maxLength", "min", "notes", "readOnly", "rows", "showLabel", "step", "template", "type", "validations"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: CatalogSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: CatalogSelectComponent, isStandalone: true, selector: "lib-catalog-select", inputs: { autofocus: "autofocus", controlName: "controlName", displayControlName: "displayControlName", displayProperty: "displayProperty", entriesList: "entriesList", filters: "filters", label: "label", maxEntries: "maxEntries", minimumLengthSearch: "minimumLengthSearch", notes: "notes", readOnly: "readOnly", searchEndpoint: "searchEndpoint", validations: "validations", valueProperty: "valueProperty" }, host: { listeners: { "body:mousedown": "bodyMouseDown($event)", "body:mouseup": "bodyMouseUp($event)" } }, viewQueries: [{ propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, read: TemplateRef }, { propertyName: "inputElement", first: true, predicate: ["input"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<lib-form-input-group\n  [controlName]=\"controlName\"\n  [label]=\"label\"\n  [notes]=\"notes\"\n  [template]=\"template\"\n  [validations]=\"validations\"\n>\n</lib-form-input-group>\n\n<ng-template #template>\n  <div class=\"catalog-container\" [class.show]=\"isDropDownShown\">\n    <lib-form-input\n      #input\n      [class.fixed-content]=\"readOnly && !shouldUseCriteria\"\n      [autofocus]=\"autofocus\"\n      [controlName]=\"displayControlName\"\n      [invalid]=\"isInvalid && isTouched\"\n      [readOnly]=\"readOnly\"\n      (blurred)=\"onContainerBlur()\"\n      (click)=\"onContainerClick()\"\n      (focused)=\"onContainerFocus()\"\n      (keydown)=\"onKeyDown($event)\"\n    >\n    </lib-form-input>\n    @if (showClearButton) {\n      <button class=\"clear-button\" type=\"button\" tabindex=\"-1\" (click)=\"onClearClick($event)\">\n        <i class=\"fa-solid fa-xmark\"></i>\n      </button>\n    }\n  </div>\n</ng-template>\n\n<ng-template #dropdownTemplate>\n  <div class=\"dropdown-container\">\n    <ul class=\"dropdown\" role=\"listbox\" [attr.id]=\"listboxId\">\n      <!-- Status rows are not options: role=\"presentation\" keeps them out of the\n      listbox's option set, and they carry no click handler. The dropdown already\n      closes on Escape, on blur and on an outside click. -->\n      @if (isLoading) {\n        <li role=\"presentation\" aria-live=\"polite\">\n          {{ 'CatalogSelect-Loading' | translate }}\n        </li>\n      }\n      @if (shouldUseCriteria && showMinimumCharactersMessage) {\n        <li\n          role=\"presentation\"\n          aria-live=\"polite\"\n          title=\"{{ 'CatalogSelect-MinimumLengthSearch' | translate: { minimumLengthSearch: minimumLengthSearch } }}\"\n        >\n          {{ 'CatalogSelect-MinimumLengthSearch' | translate: { minimumLengthSearch: minimumLengthSearch } }}\n        </li>\n      }\n      @if (showNoResultsMessage) {\n        <li role=\"presentation\" aria-live=\"polite\" title=\"{{ 'CatalogSelect-NoResultsFound' | translate }}\">\n          {{ 'CatalogSelect-NoResultsFound' | translate }}\n        </li>\n      }\n\n      <!-- Retrying is a real action, so it is a real button and reachable by keyboard. -->\n      @if (showFailureMessage) {\n        <li class=\"error\" role=\"presentation\">\n          <button\n            class=\"retry\"\n            type=\"button\"\n            title=\"{{ 'CatalogSelect-FailureMessage' | translate }}\"\n            (click)=\"onDropDownErrorClick()\"\n          >\n            {{ 'CatalogSelect-FailureMessage' | translate }}\n          </button>\n        </li>\n      }\n\n      <!-- eslint-disable @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus --\n      Options in a combobox listbox are deliberately not focusable. Keyboard\n      interaction lives on the input, which owns ArrowUp/ArrowDown/Enter/Escape and\n      points at the active option through aria-activedescendant. Giving each option\n      its own tabindex and key handlers would break that pattern. -->\n      @for (entry of displayedEntries; track entry; let i = $index) {\n        <li\n          class=\"dropdown-item\"\n          role=\"option\"\n          [attr.id]=\"getOptionId(i)\"\n          [attr.aria-selected]=\"selectedValue === entry.value\"\n          [class.focused]=\"focusedIndex === i\"\n          [class.selected]=\"selectedValue === entry.value\"\n          (click)=\"onDropDownItemClick(entry)\"\n        >\n          {{ entry.display }}\n        </li>\n      }\n      <!-- eslint-enable @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n    </ul>\n  </div>\n</ng-template>\n", styles: [":host-context{grid-column:span 2 / span 2;display:grid;grid-template-columns:subgrid}.catalog-container{position:relative}.catalog-container .clear-button{position:absolute;right:1.75rem;top:50%;display:flex;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));align-items:center;justify-content:center;height:1.25rem;width:1.25rem;border-radius:9999px;--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.catalog-container .clear-button:hover{--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.catalog-container .clear-button{z-index:10;cursor:pointer;border-style:none;background-color:transparent;padding:0;font-size:.875rem;line-height:1.25rem;line-height:1}.catalog-container:has(.clear-button) lib-form-input ::ng-deep input{padding-right:3.5rem}div lib-form-input ::ng-deep input{cursor:pointer;text-overflow:ellipsis;background-size:1.125rem 1.125rem;background-position:right .5625rem center;background-repeat:no-repeat;padding-right:2.25rem;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='%239ca3af' d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3e%3c/svg%3e\")}.dropdown-container{width:100%;-webkit-user-select:none;user-select:none}.dropdown{overflow-y:auto;overscroll-behavior:none;border-radius:.375rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(156 163 175 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);max-height:13rem}.dropdown li{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:.25rem .5rem}.dropdown li:not(.dropdown-item){font-size:.875rem;line-height:1.25rem}.dropdown li .retry{width:100%;cursor:pointer;border-style:none;background-color:transparent;padding:0;text-align:left;text-decoration-line:underline;color:inherit;font:inherit}.dropdown li.dropdown-item{cursor:pointer}.dropdown li.dropdown-item:nth-child(2n){background-color:#f5f5f4b3}.dropdown li.dropdown-item.selected{background-color:#59a5db33;font-weight:700}.dropdown li.dropdown-item.focused{background-color:#59a5db4d;outline:2px solid transparent;outline-offset:2px}.dropdown li.dropdown-item:hover,.dropdown li.dropdown-item:nth-child(2n):hover,.dropdown li.dropdown-item.selected:hover,.dropdown li.dropdown-item.focused:hover{background-color:#59a5db80}lib-form-input-group{flex-basis:100%}\n"], dependencies: [{ kind: "component", type: FormInputComponent, selector: "lib-form-input", inputs: ["autofocus", "controlName", "disabledControlName", "displayReadOnlyAsDisabled", "fixedValue", "format", "invalid", "isDisabled", "isFullHeight", "maxLength", "min", "readOnly", "rows", "step", "type"], outputs: ["blurred", "changed", "fixedValueChanged", "focused", "inputChanged"] }, { kind: "component", type: FormInputGroupComponent, selector: "lib-form-input-group", inputs: ["autofocus", "alignContent", "controlName", "fixedValue", "format", "label", "isDisabled", "isFullHeight", "maxLength", "min", "notes", "readOnly", "rows", "showLabel", "step", "template", "type", "validations"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: CatalogSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: CatalogSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-catalog-select', imports: [
-                        FormInputComponent,
-                        FormInputGroupComponent,
-                        NgFor,
-                        NgIf,
-                        TranslatePipe,
-                    ], template: "<lib-form-input-group\n[controlName]=\"controlName\"\n[label]=\"label\"\n[notes]=\"notes\"\n[template]=\"template\"\n[validations]=\"validations\">\n</lib-form-input-group>\n\n<ng-template #template>\n    <div class=\"catalog-container\"\n    [class.show]=\"isDropDownShown\">\n        <lib-form-input #input\n        [class.fixed-content]=\"readOnly && !shouldUseCriteria\"\n        [autofocus]=\"autofocus\"\n        [controlName]=\"displayControlName\"\n        [invalid]=\"isInvalid && isTouched\"\n        [readOnly]=\"readOnly\"\n        (blurred)=\"onContainerBlur()\"\n        (click)=\"onContainerClick()\"\n        (focused)=\"onContainerFocus()\"\n        (keydown)=\"onKeyDown($event)\">\n        </lib-form-input>\n        <button *ngIf=\"showClearButton\"\n        class=\"clear-button\"\n        type=\"button\"\n        tabindex=\"-1\"\n        (click)=\"onClearClick($event)\">\n            <i class=\"fa-solid fa-xmark\"></i>\n        </button>\n    </div>\n</ng-template>\n\n<ng-template #dropdownTemplate>\n    <div class=\"dropdown-container\">\n        <ul class=\"dropdown\"\n        role=\"listbox\"\n        [attr.id]=\"listboxId\">\n            <!-- Status rows are not options: role=\"presentation\" keeps them out of the\n                 listbox's option set, and they carry no click handler. The dropdown already\n                 closes on Escape, on blur and on an outside click. -->\n            <li *ngIf=\"isLoading\"\n            role=\"presentation\"\n            aria-live=\"polite\">\n                {{ 'CatalogSelect-Loading' | translate }}\n            </li>\n\n            <li *ngIf=\"shouldUseCriteria && showMinimumCharactersMessage\"\n            role=\"presentation\"\n            aria-live=\"polite\"\n            title=\"{{ 'CatalogSelect-MinimumLengthSearch' | translate: { minimumLengthSearch: minimumLengthSearch } }}\">\n                {{ 'CatalogSelect-MinimumLengthSearch' | translate: { minimumLengthSearch: minimumLengthSearch } }}\n            </li>\n\n            <li *ngIf=\"showNoResultsMessage\"\n            role=\"presentation\"\n            aria-live=\"polite\"\n            title=\"{{ 'CatalogSelect-NoResultsFound' | translate }}\">\n                {{ 'CatalogSelect-NoResultsFound' | translate }}\n            </li>\n\n            <!-- Retrying is a real action, so it is a real button and reachable by keyboard. -->\n            <li *ngIf=\"showFailureMessage\"\n            class=\"error\"\n            role=\"presentation\">\n                <button class=\"retry\"\n                type=\"button\"\n                title=\"{{ 'CatalogSelect-FailureMessage' | translate }}\"\n                (click)=\"onDropDownErrorClick()\">\n                    {{ 'CatalogSelect-FailureMessage' | translate }}\n                </button>\n            </li>\n\n            <!-- eslint-disable @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus --\n                 Options in a combobox listbox are deliberately not focusable. Keyboard\n                 interaction lives on the input, which owns ArrowUp/ArrowDown/Enter/Escape and\n                 points at the active option through aria-activedescendant. Giving each option\n                 its own tabindex and key handlers would break that pattern. -->\n            <li class=\"dropdown-item\" *ngFor=\"let entry of displayedEntries; let i = index\"\n            role=\"option\"\n            [attr.id]=\"getOptionId(i)\"\n            [attr.aria-selected]=\"selectedValue === entry.value\"\n            [class.focused]=\"focusedIndex === i\"\n            [class.selected]=\"selectedValue === entry.value\"\n            (click)=\"onDropDownItemClick(entry)\">\n                {{ entry.display }}\n            </li>\n            <!-- eslint-enable @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n        </ul>\n    </div>\n</ng-template>", styles: [":host-context{grid-column:span 2 / span 2;display:grid;grid-template-columns:subgrid}.catalog-container{position:relative}.catalog-container .clear-button{position:absolute;right:1.75rem;top:50%;display:flex;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));align-items:center;justify-content:center;height:1.25rem;width:1.25rem;border-radius:9999px;--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.catalog-container .clear-button:hover{--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.catalog-container .clear-button{z-index:10;cursor:pointer;border-style:none;background-color:transparent;padding:0;font-size:.875rem;line-height:1.25rem;line-height:1}.catalog-container:has(.clear-button) lib-form-input ::ng-deep input{padding-right:3.5rem}div lib-form-input ::ng-deep input{cursor:pointer;text-overflow:ellipsis;background-size:1.125rem 1.125rem;background-position:right .5625rem center;background-repeat:no-repeat;padding-right:2.25rem;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='%239ca3af' d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3e%3c/svg%3e\")}.dropdown-container{width:100%;-webkit-user-select:none;user-select:none}.dropdown{overflow-y:auto;overscroll-behavior:none;border-radius:.375rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(156 163 175 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);max-height:13rem}.dropdown li{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:.25rem .5rem}.dropdown li:not(.dropdown-item){font-size:.875rem;line-height:1.25rem}.dropdown li .retry{width:100%;cursor:pointer;border-style:none;background-color:transparent;padding:0;text-align:left;text-decoration-line:underline;color:inherit;font:inherit}.dropdown li.dropdown-item{cursor:pointer}.dropdown li.dropdown-item:nth-child(2n){background-color:#f5f5f4b3}.dropdown li.dropdown-item.selected{background-color:#59a5db33;font-weight:700}.dropdown li.dropdown-item.focused{background-color:#59a5db4d;outline:2px solid transparent;outline-offset:2px}.dropdown li.dropdown-item:hover,.dropdown li.dropdown-item:nth-child(2n):hover,.dropdown li.dropdown-item.selected:hover,.dropdown li.dropdown-item.focused:hover{background-color:#59a5db80}lib-form-input-group{flex-basis:100%}\n"] }]
+            args: [{ selector: 'lib-catalog-select', changeDetection: ChangeDetectionStrategy.Eager, imports: [FormInputComponent, FormInputGroupComponent, TranslatePipe], template: "<lib-form-input-group\n  [controlName]=\"controlName\"\n  [label]=\"label\"\n  [notes]=\"notes\"\n  [template]=\"template\"\n  [validations]=\"validations\"\n>\n</lib-form-input-group>\n\n<ng-template #template>\n  <div class=\"catalog-container\" [class.show]=\"isDropDownShown\">\n    <lib-form-input\n      #input\n      [class.fixed-content]=\"readOnly && !shouldUseCriteria\"\n      [autofocus]=\"autofocus\"\n      [controlName]=\"displayControlName\"\n      [invalid]=\"isInvalid && isTouched\"\n      [readOnly]=\"readOnly\"\n      (blurred)=\"onContainerBlur()\"\n      (click)=\"onContainerClick()\"\n      (focused)=\"onContainerFocus()\"\n      (keydown)=\"onKeyDown($event)\"\n    >\n    </lib-form-input>\n    @if (showClearButton) {\n      <button class=\"clear-button\" type=\"button\" tabindex=\"-1\" (click)=\"onClearClick($event)\">\n        <i class=\"fa-solid fa-xmark\"></i>\n      </button>\n    }\n  </div>\n</ng-template>\n\n<ng-template #dropdownTemplate>\n  <div class=\"dropdown-container\">\n    <ul class=\"dropdown\" role=\"listbox\" [attr.id]=\"listboxId\">\n      <!-- Status rows are not options: role=\"presentation\" keeps them out of the\n      listbox's option set, and they carry no click handler. The dropdown already\n      closes on Escape, on blur and on an outside click. -->\n      @if (isLoading) {\n        <li role=\"presentation\" aria-live=\"polite\">\n          {{ 'CatalogSelect-Loading' | translate }}\n        </li>\n      }\n      @if (shouldUseCriteria && showMinimumCharactersMessage) {\n        <li\n          role=\"presentation\"\n          aria-live=\"polite\"\n          title=\"{{ 'CatalogSelect-MinimumLengthSearch' | translate: { minimumLengthSearch: minimumLengthSearch } }}\"\n        >\n          {{ 'CatalogSelect-MinimumLengthSearch' | translate: { minimumLengthSearch: minimumLengthSearch } }}\n        </li>\n      }\n      @if (showNoResultsMessage) {\n        <li role=\"presentation\" aria-live=\"polite\" title=\"{{ 'CatalogSelect-NoResultsFound' | translate }}\">\n          {{ 'CatalogSelect-NoResultsFound' | translate }}\n        </li>\n      }\n\n      <!-- Retrying is a real action, so it is a real button and reachable by keyboard. -->\n      @if (showFailureMessage) {\n        <li class=\"error\" role=\"presentation\">\n          <button\n            class=\"retry\"\n            type=\"button\"\n            title=\"{{ 'CatalogSelect-FailureMessage' | translate }}\"\n            (click)=\"onDropDownErrorClick()\"\n          >\n            {{ 'CatalogSelect-FailureMessage' | translate }}\n          </button>\n        </li>\n      }\n\n      <!-- eslint-disable @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus --\n      Options in a combobox listbox are deliberately not focusable. Keyboard\n      interaction lives on the input, which owns ArrowUp/ArrowDown/Enter/Escape and\n      points at the active option through aria-activedescendant. Giving each option\n      its own tabindex and key handlers would break that pattern. -->\n      @for (entry of displayedEntries; track entry; let i = $index) {\n        <li\n          class=\"dropdown-item\"\n          role=\"option\"\n          [attr.id]=\"getOptionId(i)\"\n          [attr.aria-selected]=\"selectedValue === entry.value\"\n          [class.focused]=\"focusedIndex === i\"\n          [class.selected]=\"selectedValue === entry.value\"\n          (click)=\"onDropDownItemClick(entry)\"\n        >\n          {{ entry.display }}\n        </li>\n      }\n      <!-- eslint-enable @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n    </ul>\n  </div>\n</ng-template>\n", styles: [":host-context{grid-column:span 2 / span 2;display:grid;grid-template-columns:subgrid}.catalog-container{position:relative}.catalog-container .clear-button{position:absolute;right:1.75rem;top:50%;display:flex;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));align-items:center;justify-content:center;height:1.25rem;width:1.25rem;border-radius:9999px;--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.catalog-container .clear-button:hover{--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.catalog-container .clear-button{z-index:10;cursor:pointer;border-style:none;background-color:transparent;padding:0;font-size:.875rem;line-height:1.25rem;line-height:1}.catalog-container:has(.clear-button) lib-form-input ::ng-deep input{padding-right:3.5rem}div lib-form-input ::ng-deep input{cursor:pointer;text-overflow:ellipsis;background-size:1.125rem 1.125rem;background-position:right .5625rem center;background-repeat:no-repeat;padding-right:2.25rem;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='%239ca3af' d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3e%3c/svg%3e\")}.dropdown-container{width:100%;-webkit-user-select:none;user-select:none}.dropdown{overflow-y:auto;overscroll-behavior:none;border-radius:.375rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(156 163 175 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);max-height:13rem}.dropdown li{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:.25rem .5rem}.dropdown li:not(.dropdown-item){font-size:.875rem;line-height:1.25rem}.dropdown li .retry{width:100%;cursor:pointer;border-style:none;background-color:transparent;padding:0;text-align:left;text-decoration-line:underline;color:inherit;font:inherit}.dropdown li.dropdown-item{cursor:pointer}.dropdown li.dropdown-item:nth-child(2n){background-color:#f5f5f4b3}.dropdown li.dropdown-item.selected{background-color:#59a5db33;font-weight:700}.dropdown li.dropdown-item.focused{background-color:#59a5db4d;outline:2px solid transparent;outline-offset:2px}.dropdown li.dropdown-item:hover,.dropdown li.dropdown-item:nth-child(2n):hover,.dropdown li.dropdown-item.selected:hover,.dropdown li.dropdown-item.focused:hover{background-color:#59a5db80}lib-form-input-group{flex-basis:100%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { bodyMouseDown: [{
                 type: HostListener,
                 args: ['body:mousedown', ['$event']]
@@ -2277,7 +2224,8 @@ class DataGridRowComponent extends BaseComponent {
         this.selectionResized.emit(width);
     }
     onToggleSelection() {
-        if (this.disabled || (this.dataGridDataset.configs.multiSelect && (this.dataGridDataset.configs.selectOnClick ?? true))) {
+        if (this.disabled ||
+            (this.dataGridDataset.configs.multiSelect && (this.dataGridDataset.configs.selectOnClick ?? true))) {
             return;
         }
         this.selected = !this.selected;
@@ -2298,22 +2246,15 @@ class DataGridRowComponent extends BaseComponent {
     refreshSelection() {
         this.selected = this.isRowDataSelected;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: DataGridRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: DataGridRowComponent, isStandalone: true, selector: "lib-data-grid-row", inputs: { disabled: "disabled", isFirstRow: "isFirstRow", rowData: "rowData" }, outputs: { selectionResized: "selectionResized" }, host: { listeners: { "click": "setFocus()" }, properties: { "class.focused": "dataGridDataset.focusedRow === rowData", "class.selected": "dataGridDataset.isKeySelected(rowKey)" } }, usesInheritance: true, ngImport: i0, template: "<!-- A <label> rather than a clickable <div>: clicking anywhere in the cell still\n     reaches the checkbox, natively. The click handler is a mouse-only convenience;\n     the keyboard path is the nested checkbox, which is focusable and toggles with\n     Space on its own. -->\n<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n<label *ngIf=\"dataGridDataset.configs.multiSelect\"\nclass=\"cell selection\"\n(click)=\"onToggleSelection()\"\n(onResize)=\"onResizeSelection($event)\">\n    <input class=\"form-input\"\n    type=\"checkbox\"\n    [attr.disabled]=\"disabled\"\n    [(ngModel)]=\"selected\" />\n</label>\n\n<div #cell\n*ngFor=\"let column of columns; index as i\"\nclass=\"cell\"\n[class.disabled]=\"disabled\"\n[ngClass]=\"column.customClass\">\n    <div *ngIf=\"isFirstRow\"\n    class=\"spacer\"\n    (onResize)=\"onResize(i, $event)\"></div>\n\n    <ng-container *ngTemplateOutlet=\"column.template ? column.template : simpleTemplate; context: { rowData: rowData, column: column }\">\n    </ng-container>\n</div>\n\n<ng-template #simpleTemplate let-rowData=\"rowData\" let-column=\"column\">\n    <span>{{ getValue(column.field) }}</span>\n</ng-template>", styles: [":host{grid-column:1 / -1;display:grid;grid-template-columns:subgrid}.cell{position:relative;align-content:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cell.disabled{pointer-events:none;cursor:default;overflow:hidden;text-overflow:ellipsis;opacity:.6}.cell input{vertical-align:super}.cell.selection{display:flex;align-items:center}.spacer{position:absolute;inset:0;z-index:-1;height:0px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: NgxResizeObserverModule }, { kind: "directive", type: i2.NgxResizeObserverDirective, selector: "[onResize]", inputs: ["resizeBoxModel"], outputs: ["onResize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: DataGridRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: DataGridRowComponent, isStandalone: true, selector: "lib-data-grid-row", inputs: { disabled: "disabled", isFirstRow: "isFirstRow", rowData: "rowData" }, outputs: { selectionResized: "selectionResized" }, host: { listeners: { "click": "setFocus()" }, properties: { "class.focused": "dataGridDataset.focusedRowKey === rowData", "class.selected": "dataGridDataset.isKeySelected(rowKey)" } }, usesInheritance: true, ngImport: i0, template: "<!-- A <label> rather than a clickable <div>: clicking anywhere in the cell still\nreaches the checkbox, natively. The click handler is a mouse-only convenience;\nthe keyboard path is the nested checkbox, which is focusable and toggles with\nSpace on its own. -->\n@if (dataGridDataset.configs.multiSelect) {\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n  <label class=\"cell selection\" (click)=\"onToggleSelection()\" (onResize)=\"onResizeSelection($event)\">\n    <input class=\"form-input\" type=\"checkbox\" [attr.disabled]=\"disabled\" [(ngModel)]=\"selected\" />\n  </label>\n}\n@for (column of columns; track column; let i = $index) {\n  <div #cell class=\"cell\" [class.disabled]=\"disabled\" [ngClass]=\"column.customClass\">\n    @if (isFirstRow) {\n      <div class=\"spacer\" (onResize)=\"onResize(i, $event)\"></div>\n    }\n    <ng-container\n      *ngTemplateOutlet=\"\n        column.template ? column.template : simpleTemplate;\n        context: { rowData: rowData, column: column }\n      \"\n    >\n    </ng-container>\n  </div>\n}\n\n<ng-template #simpleTemplate let-rowData=\"rowData\" let-column=\"column\">\n  <span>{{ getValue(column.field) }}</span>\n</ng-template>\n", styles: [":host{grid-column:1 / -1;display:grid;grid-template-columns:subgrid}.cell{position:relative;align-content:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cell.disabled{pointer-events:none;cursor:default;overflow:hidden;text-overflow:ellipsis;opacity:.6}.cell input{vertical-align:super}.cell.selection{display:flex;align-items:center}.spacer{position:absolute;inset:0;z-index:-1;height:0px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox]:not([ngNoCva])[formControlName],input[type=checkbox]:not([ngNoCva])[formControl],input[type=checkbox]:not([ngNoCva])[ngModel]" }, { 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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: NgxResizeObserverModule }, { kind: "directive", type: i2.NgxResizeObserverDirective, selector: "[onResize]", inputs: ["resizeBoxModel"], outputs: ["onResize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: DataGridRowComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: DataGridRowComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-data-grid-row', host: {
-                        '[class.focused]': 'dataGridDataset.focusedRow === rowData',
+                        '[class.focused]': 'dataGridDataset.focusedRowKey === rowData',
                         '[class.selected]': 'dataGridDataset.isKeySelected(rowKey)',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        FormsModule,
-                        NgClass,
-                        NgIf,
-                        NgFor,
-                        NgTemplateOutlet,
-                        NgxResizeObserverModule,
-                    ], template: "<!-- A <label> rather than a clickable <div>: clicking anywhere in the cell still\n     reaches the checkbox, natively. The click handler is a mouse-only convenience;\n     the keyboard path is the nested checkbox, which is focusable and toggles with\n     Space on its own. -->\n<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n<label *ngIf=\"dataGridDataset.configs.multiSelect\"\nclass=\"cell selection\"\n(click)=\"onToggleSelection()\"\n(onResize)=\"onResizeSelection($event)\">\n    <input class=\"form-input\"\n    type=\"checkbox\"\n    [attr.disabled]=\"disabled\"\n    [(ngModel)]=\"selected\" />\n</label>\n\n<div #cell\n*ngFor=\"let column of columns; index as i\"\nclass=\"cell\"\n[class.disabled]=\"disabled\"\n[ngClass]=\"column.customClass\">\n    <div *ngIf=\"isFirstRow\"\n    class=\"spacer\"\n    (onResize)=\"onResize(i, $event)\"></div>\n\n    <ng-container *ngTemplateOutlet=\"column.template ? column.template : simpleTemplate; context: { rowData: rowData, column: column }\">\n    </ng-container>\n</div>\n\n<ng-template #simpleTemplate let-rowData=\"rowData\" let-column=\"column\">\n    <span>{{ getValue(column.field) }}</span>\n</ng-template>", styles: [":host{grid-column:1 / -1;display:grid;grid-template-columns:subgrid}.cell{position:relative;align-content:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cell.disabled{pointer-events:none;cursor:default;overflow:hidden;text-overflow:ellipsis;opacity:.6}.cell input{vertical-align:super}.cell.selection{display:flex;align-items:center}.spacer{position:absolute;inset:0;z-index:-1;height:0px}\n"] }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, NgClass, NgTemplateOutlet, NgxResizeObserverModule], template: "<!-- A <label> rather than a clickable <div>: clicking anywhere in the cell still\nreaches the checkbox, natively. The click handler is a mouse-only convenience;\nthe keyboard path is the nested checkbox, which is focusable and toggles with\nSpace on its own. -->\n@if (dataGridDataset.configs.multiSelect) {\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n  <label class=\"cell selection\" (click)=\"onToggleSelection()\" (onResize)=\"onResizeSelection($event)\">\n    <input class=\"form-input\" type=\"checkbox\" [attr.disabled]=\"disabled\" [(ngModel)]=\"selected\" />\n  </label>\n}\n@for (column of columns; track column; let i = $index) {\n  <div #cell class=\"cell\" [class.disabled]=\"disabled\" [ngClass]=\"column.customClass\">\n    @if (isFirstRow) {\n      <div class=\"spacer\" (onResize)=\"onResize(i, $event)\"></div>\n    }\n    <ng-container\n      *ngTemplateOutlet=\"\n        column.template ? column.template : simpleTemplate;\n        context: { rowData: rowData, column: column }\n      \"\n    >\n    </ng-container>\n  </div>\n}\n\n<ng-template #simpleTemplate let-rowData=\"rowData\" let-column=\"column\">\n  <span>{{ getValue(column.field) }}</span>\n</ng-template>\n", styles: [":host{grid-column:1 / -1;display:grid;grid-template-columns:subgrid}.cell{position:relative;align-content:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cell.disabled{pointer-events:none;cursor:default;overflow:hidden;text-overflow:ellipsis;opacity:.6}.cell input{vertical-align:super}.cell.selection{display:flex;align-items:center}.spacer{position:absolute;inset:0;z-index:-1;height:0px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { disabled: [{
                 type: Input
             }], isFirstRow: [{
@@ -2399,7 +2340,7 @@ class DataGridComponent extends BaseComponent {
     get selectionColWidth() {
         return this.selectionColRealSize
             ? `${this.selectionColRealSize}px`
-            : this.configs.multiSelectSize ?? 'minmax(1.5rem,min-content)';
+            : (this.configs.multiSelectSize ?? 'minmax(1.5rem,min-content)');
     }
     get shouldDisplayMessageWhenEmpty() {
         return this.dataGridDataset?.configs?.showMessageOnEmpty ?? true;
@@ -2425,14 +2366,10 @@ class DataGridComponent extends BaseComponent {
                 this.isGridCurrentUrl = true;
             }
         });
-        this.dataGridDataset.loadStarted
-            .pipe(takeUntil(this.destroy$))
-            .subscribe(() => {
+        this.dataGridDataset.loadStarted.pipe(takeUntil(this.destroy$)).subscribe(() => {
             this.loading = true;
         });
-        this.dataGridDataset.loadFinished
-            .pipe(takeUntil(this.destroy$))
-            .subscribe((isSuccess) => {
+        this.dataGridDataset.loadFinished.pipe(takeUntil(this.destroy$)).subscribe((isSuccess) => {
             this.loading = false;
             this.hasFailed = !isSuccess;
             setTimeout(() => {
@@ -2477,18 +2414,14 @@ class DataGridComponent extends BaseComponent {
                 });
             });
         }
-        this.viewport?.renderedRangeStream
-            .pipe(takeUntil(this.destroy$))
-            .subscribe((listRange) => {
+        this.viewport?.renderedRangeStream.pipe(takeUntil(this.destroy$)).subscribe((listRange) => {
             const loadedRows = this.dataGridDataset.loadedRows?.length ?? 0;
             if (this.hasLoadedRows && !this.loading && listRange.end >= loadedRows && !this.dataGridDataset.loadedLastRow) {
                 this.loading = true;
                 this.dataGridDataset.loadRows();
             }
         });
-        this.bodyResized$
-            .pipe(debounceTime(150), takeUntil(this.destroy$))
-            .subscribe(() => {
+        this.bodyResized$.pipe(debounceTime(150), takeUntil(this.destroy$)).subscribe(() => {
             const viewportWidth = this.viewport?.measureViewportSize('horizontal') ?? 0;
             if (viewportWidth > 0) {
                 this.headerRightMargin = this.bodyElement.nativeElement.clientWidth - viewportWidth;
@@ -2538,21 +2471,14 @@ class DataGridComponent extends BaseComponent {
     trackByFn(index, item) {
         return item.key;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: DataGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: DataGridComponent, isStandalone: true, selector: "lib-data-grid", inputs: { disabled: "disabled", lazyLoadRows: "lazyLoadRows", showButtons: "showButtons" }, host: { properties: { "class.no-borders": "showButtons" } }, viewQueries: [{ propertyName: "bodyElement", first: true, predicate: ["body"], descendants: true }, { propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"buttons\"\n*ngIf=\"showButtons\">\n    <ng-content select=\"[buttons]\"></ng-content>\n</div>\n\n<div class=\"header\"\n[class.hide]=\"isHideColumns\"\n[style.padding-right.px]=\"headerRightMargin\">\n    <!-- Translated by however far the body is scrolled sideways. The rows scroll inside the CDK\n         viewport and the header sits outside it, so without this the headings simply stay put\n         while the cells move away from them. -->\n    <div class=\"header-row\"\n    [style.transform]=\"headerScrollLeft ? 'translateX(-' + headerScrollLeft + 'px)' : null\">\n        <div *ngIf=\"isShowMultiSelect\"\n        class=\"header-cell selection\"\n        [ngStyle]=\"{\n            'width': selectionColWidth ? selectionColWidth : null\n        }\">\n            &nbsp;\n        </div>\n        \n        <!-- A measured zero is a width, not the absence of one: it is a 1fr column that collapsed,\n             and its heading has to collapse too. The old test read `realSize ?? 0 > 0`, which binds\n             as `realSize ?? (0 > 0)` and so turned zero into no width at all.\n\n             Such a heading is removed rather than merely made zero wide, because a flex item still\n             takes a gap on each side while the body grid allows the collapsed track only one, and\n             that spare gap pushed every heading to its right out by 16px. -->\n        <div *ngFor=\"let column of columns\"\n        class=\"header-cell\"\n        [ngStyle]=\"{\n            'display': column.realSize === 0 ? 'none' : null,\n            'width.px': column.realSize ?? null\n        }\">\n            <span>{{ column.headerName | translate }}</span>\n        </div>\n    </div>\n</div>\n\n<div #body\nclass=\"body\"\n[style.min-height.px]=\"bodyMinHeight\">\n    <cdk-virtual-scroll-viewport\n    [itemSize]=\"configs.rowHeight\"\n    [style.grid-template-columns]=\"gridColumns\">\n        <lib-data-grid-row #row\n        *cdkVirtualFor=\"let row of dataGridDataset.loadedRows; index as i; trackBy: trackByFn\"\n        [disabled]=\"disabled\"\n        [isFirstRow]=\"isFirstVisibleRow(i)\"\n        [rowData]=\"row\"\n        [style.height.px]=\"configs.rowHeight\"\n        (selectionResized)=\"onSelectionResized($event)\">\n        </lib-data-grid-row>\n\n        <div *ngIf=\"loading\"\n        class=\"loading\"\n        [style.height.px]=\"configs.rowHeight\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n                <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n                <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n            </svg>\n    \n            <span>\n                {{ dataGridDataset.configs.loadingDisplayText ?? '' | translate }} \n            </span>\n        </div>\n        \n        <div *ngIf=\"!loading && !hasBeenLoaded && lazyLoadRows\"\n        class=\"message\"\n        [style.height.px]=\"configs.rowHeight\">\n            <span>\n                {{ messageToDisplayWhenLazyLoad | translate }}\n            </span>\n        </div>\n\n        <ng-container *ngIf=\"!loading && hasBeenLoaded && (!hasLoadedRows || hasFailed)\">\n            <div *ngIf=\"!hasFailed && !hasLoadedRows && hasMessageToDisplayWhenEmpty && shouldDisplayMessageWhenEmpty\"\n            class=\"message\"\n            [style.height.px]=\"configs.rowHeight\">\n                <span>\n                    {{ messageToDisplayWhenEmpty | translate }}\n                </span>\n            </div>\n\n            <div *ngIf=\"hasFailed\"\n            class=\"message\"\n            [style.height.px]=\"configs.rowHeight\">\n                <span>\n                    <i class=\"fas fa-exclamation-triangle mr-2 text-yellow-600\"></i>{{ messageToDisplayWhenFailed | translate }}\n                </span>\n            </div>\n        </ng-container>\n    </cdk-virtual-scroll-viewport>\n</div>", styles: [":host-context{display:flex;-webkit-user-select:none;user-select:none;flex-direction:column;overflow:hidden}:host-context:not(.no-borders){border-radius:.5rem;border-width:1px;border-color:#d1d5dbe6;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}:host-context.no-borders .header .header-row{padding-top:.375rem;padding-bottom:.375rem}:host-context.no-borders .body lib-data-grid-row{padding-top:.25rem;padding-bottom:.25rem}.header-row,lib-data-grid-row,.loading,.message{gap:1rem;padding-left:1rem;padding-right:1rem}.header{overflow:hidden;border-bottom-width:1px;border-color:#d1d5dbe6;background-color:#e5e7eb66;font-weight:700}.header.hide{display:none}.header .header-row{display:flex;flex-direction:row;padding-top:.75rem;padding-bottom:.75rem}.header .header-cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.header .header-cell:not(.selection){flex:none}.body{position:relative;flex-grow:1}.body cdk-virtual-scroll-viewport{position:absolute;inset:0}.body cdk-virtual-scroll-viewport ::ng-deep .cdk-virtual-scroll-content-wrapper{display:grid;grid-template-columns:inherit}.body lib-data-grid-row{margin-top:-1px;cursor:pointer;border-top-width:1px;border-bottom-width:1px;border-color:#cbd5e180;padding-top:.5rem;padding-bottom:.5rem}.body lib-data-grid-row:nth-child(2n){background-color:#f8fafcb3}.body lib-data-grid-row:hover{background-color:#bfdbfe33}.body lib-data-grid-row.focused{z-index:1;border-color:#94a3b899}.body lib-data-grid-row.selected{position:relative;z-index:10;--tw-border-opacity: 1;border-color:rgb(147 197 253 / var(--tw-border-opacity, 1));background-color:#bfdbfe4d}.body lib-data-grid-row.selected:hover{background-color:#bfdbfe66}.body .loading,.body .message{display:flex;align-items:center;gap:.5rem;white-space:nowrap;height:2.5rem;border-bottom-width:1px;border-color:#cbd5e180;grid-column:1 / -1}.body .loading span,.body .message span{overflow:hidden;text-overflow:ellipsis}.body .loading svg{height:1.5rem;min-height:1.5rem;width:1.5rem;min-width:1.5rem}@keyframes spin{to{transform:rotate(360deg)}}.body .loading svg{animation:spin 1s linear infinite;transition-property:opacity;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.buttons{display:flex;border-top-width:1px;border-bottom-width:1px;border-color:#d1d5dbe6;padding:.25rem}\n"], dependencies: [{ kind: "component", type: DataGridRowComponent, selector: "lib-data-grid-row", inputs: ["disabled", "isFirstRow", "rowData"], outputs: ["selectionResized"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1$2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1$2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1$2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: DataGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: DataGridComponent, isStandalone: true, selector: "lib-data-grid", inputs: { disabled: "disabled", lazyLoadRows: "lazyLoadRows", showButtons: "showButtons" }, host: { properties: { "class.no-borders": "showButtons" } }, viewQueries: [{ propertyName: "bodyElement", first: true, predicate: ["body"], descendants: true }, { propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (showButtons) {\n  <div class=\"buttons\">\n    <ng-content select=\"[buttons]\"></ng-content>\n  </div>\n}\n\n<div class=\"header\" [class.hide]=\"isHideColumns\" [style.padding-right.px]=\"headerRightMargin\">\n  <!-- Translated by however far the body is scrolled sideways. The rows scroll inside the CDK\n       viewport and the header sits outside it, so without this the headings simply stay put\n       while the cells move away from them. -->\n  <div class=\"header-row\" [style.transform]=\"headerScrollLeft ? 'translateX(-' + headerScrollLeft + 'px)' : null\">\n    @if (isShowMultiSelect) {\n      <div\n        class=\"header-cell selection\"\n        [ngStyle]=\"{\n          width: selectionColWidth ? selectionColWidth : null,\n        }\"\n      >\n        &nbsp;\n      </div>\n    }\n\n    <!-- A measured zero is a width, not the absence of one: it is a 1fr column that collapsed,\n         and its heading has to collapse too.\n\n         Such a heading is removed rather than merely made zero wide, because a flex item still\n         takes a gap on each side while the body grid allows the collapsed track only one, and\n         that spare gap pushed every heading to its right out by 16px. -->\n    @for (column of columns; track column) {\n      <div\n        class=\"header-cell\"\n        [ngStyle]=\"{\n          display: column.realSize === 0 ? 'none' : null,\n          'width.px': column.realSize ?? null,\n        }\"\n      >\n        <span>{{ column.headerName | translate }}</span>\n      </div>\n    }\n  </div>\n</div>\n\n<div #body class=\"body\" [style.min-height.px]=\"bodyMinHeight\">\n  <cdk-virtual-scroll-viewport [itemSize]=\"configs.rowHeight\" [style.grid-template-columns]=\"gridColumns\">\n    <lib-data-grid-row\n      #row\n      *cdkVirtualFor=\"let row of dataGridDataset.loadedRows; index as i; trackBy: trackByFn\"\n      [disabled]=\"disabled\"\n      [isFirstRow]=\"isFirstVisibleRow(i)\"\n      [rowData]=\"row\"\n      [style.height.px]=\"configs.rowHeight\"\n      (selectionResized)=\"onSelectionResized($event)\"\n    >\n    </lib-data-grid-row>\n\n    @if (loading) {\n      <div class=\"loading\" [style.height.px]=\"configs.rowHeight\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n          <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n          <path\n            class=\"opacity-75\"\n            fill=\"currentColor\"\n            d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n          ></path>\n        </svg>\n        <span>\n          {{ dataGridDataset.configs.loadingDisplayText ?? '' | translate }}\n        </span>\n      </div>\n    }\n    @if (!loading && !hasBeenLoaded && lazyLoadRows) {\n      <div class=\"message\" [style.height.px]=\"configs.rowHeight\">\n        <span>\n          {{ messageToDisplayWhenLazyLoad | translate }}\n        </span>\n      </div>\n    }\n    @if (!loading && hasBeenLoaded && (!hasLoadedRows || hasFailed)) {\n      @if (!hasFailed && !hasLoadedRows && hasMessageToDisplayWhenEmpty && shouldDisplayMessageWhenEmpty) {\n        <div class=\"message\" [style.height.px]=\"configs.rowHeight\">\n          <span>\n            {{ messageToDisplayWhenEmpty | translate }}\n          </span>\n        </div>\n      }\n      @if (hasFailed) {\n        <div class=\"message\" [style.height.px]=\"configs.rowHeight\">\n          <span>\n            <i class=\"fas fa-exclamation-triangle mr-2 text-yellow-600\"></i>{{ messageToDisplayWhenFailed | translate }}\n          </span>\n        </div>\n      }\n    }\n  </cdk-virtual-scroll-viewport>\n</div>\n", styles: [":host-context{display:flex;-webkit-user-select:none;user-select:none;flex-direction:column;overflow:hidden}:host-context:not(.no-borders){border-radius:.5rem;border-width:1px;border-color:#d1d5dbe6;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}:host-context.no-borders .header .header-row{padding-top:.375rem;padding-bottom:.375rem}:host-context.no-borders .body lib-data-grid-row{padding-top:.25rem;padding-bottom:.25rem}.header-row,lib-data-grid-row,.loading,.message{gap:1rem;padding-left:1rem;padding-right:1rem}.header{overflow:hidden;border-bottom-width:1px;border-color:#d1d5dbe6;background-color:#e5e7eb66;font-weight:700}.header.hide{display:none}.header .header-row{display:flex;flex-direction:row;padding-top:.75rem;padding-bottom:.75rem}.header .header-cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.header .header-cell:not(.selection){flex:none}.body{position:relative;flex-grow:1}.body cdk-virtual-scroll-viewport{position:absolute;inset:0}.body cdk-virtual-scroll-viewport ::ng-deep .cdk-virtual-scroll-content-wrapper{display:grid;grid-template-columns:inherit}.body lib-data-grid-row{margin-top:-1px;cursor:pointer;border-top-width:1px;border-bottom-width:1px;border-color:#cbd5e180;padding-top:.5rem;padding-bottom:.5rem}.body lib-data-grid-row:nth-child(2n){background-color:#f8fafcb3}.body lib-data-grid-row:hover{background-color:#bfdbfe33}.body lib-data-grid-row.focused{z-index:1;border-color:#94a3b899}.body lib-data-grid-row.selected{position:relative;z-index:10;--tw-border-opacity: 1;border-color:rgb(147 197 253 / var(--tw-border-opacity, 1));background-color:#bfdbfe4d}.body lib-data-grid-row.selected:hover{background-color:#bfdbfe66}.body .loading,.body .message{display:flex;align-items:center;gap:.5rem;white-space:nowrap;height:2.5rem;border-bottom-width:1px;border-color:#cbd5e180;grid-column:1 / -1}.body .loading span,.body .message span{overflow:hidden;text-overflow:ellipsis}.body .loading svg{height:1.5rem;min-height:1.5rem;width:1.5rem;min-width:1.5rem}@keyframes spin{to{transform:rotate(360deg)}}.body .loading svg{animation:spin 1s linear infinite;transition-property:opacity;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.buttons{display:flex;border-top-width:1px;border-bottom-width:1px;border-color:#d1d5dbe6;padding:.25rem}\n"], dependencies: [{ kind: "component", type: DataGridRowComponent, selector: "lib-data-grid-row", inputs: ["disabled", "isFirstRow", "rowData"], outputs: ["selectionResized"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1$2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1$2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1$2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: DataGridComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: DataGridComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-data-grid', host: {
                         '[class.no-borders]': 'showButtons',
-                    }, imports: [
-                        DataGridRowComponent,
-                        NgFor,
-                        NgIf,
-                        NgStyle,
-                        ScrollingModule,
-                        TranslatePipe,
-                    ], template: "<div class=\"buttons\"\n*ngIf=\"showButtons\">\n    <ng-content select=\"[buttons]\"></ng-content>\n</div>\n\n<div class=\"header\"\n[class.hide]=\"isHideColumns\"\n[style.padding-right.px]=\"headerRightMargin\">\n    <!-- Translated by however far the body is scrolled sideways. The rows scroll inside the CDK\n         viewport and the header sits outside it, so without this the headings simply stay put\n         while the cells move away from them. -->\n    <div class=\"header-row\"\n    [style.transform]=\"headerScrollLeft ? 'translateX(-' + headerScrollLeft + 'px)' : null\">\n        <div *ngIf=\"isShowMultiSelect\"\n        class=\"header-cell selection\"\n        [ngStyle]=\"{\n            'width': selectionColWidth ? selectionColWidth : null\n        }\">\n            &nbsp;\n        </div>\n        \n        <!-- A measured zero is a width, not the absence of one: it is a 1fr column that collapsed,\n             and its heading has to collapse too. The old test read `realSize ?? 0 > 0`, which binds\n             as `realSize ?? (0 > 0)` and so turned zero into no width at all.\n\n             Such a heading is removed rather than merely made zero wide, because a flex item still\n             takes a gap on each side while the body grid allows the collapsed track only one, and\n             that spare gap pushed every heading to its right out by 16px. -->\n        <div *ngFor=\"let column of columns\"\n        class=\"header-cell\"\n        [ngStyle]=\"{\n            'display': column.realSize === 0 ? 'none' : null,\n            'width.px': column.realSize ?? null\n        }\">\n            <span>{{ column.headerName | translate }}</span>\n        </div>\n    </div>\n</div>\n\n<div #body\nclass=\"body\"\n[style.min-height.px]=\"bodyMinHeight\">\n    <cdk-virtual-scroll-viewport\n    [itemSize]=\"configs.rowHeight\"\n    [style.grid-template-columns]=\"gridColumns\">\n        <lib-data-grid-row #row\n        *cdkVirtualFor=\"let row of dataGridDataset.loadedRows; index as i; trackBy: trackByFn\"\n        [disabled]=\"disabled\"\n        [isFirstRow]=\"isFirstVisibleRow(i)\"\n        [rowData]=\"row\"\n        [style.height.px]=\"configs.rowHeight\"\n        (selectionResized)=\"onSelectionResized($event)\">\n        </lib-data-grid-row>\n\n        <div *ngIf=\"loading\"\n        class=\"loading\"\n        [style.height.px]=\"configs.rowHeight\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n                <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n                <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n            </svg>\n    \n            <span>\n                {{ dataGridDataset.configs.loadingDisplayText ?? '' | translate }} \n            </span>\n        </div>\n        \n        <div *ngIf=\"!loading && !hasBeenLoaded && lazyLoadRows\"\n        class=\"message\"\n        [style.height.px]=\"configs.rowHeight\">\n            <span>\n                {{ messageToDisplayWhenLazyLoad | translate }}\n            </span>\n        </div>\n\n        <ng-container *ngIf=\"!loading && hasBeenLoaded && (!hasLoadedRows || hasFailed)\">\n            <div *ngIf=\"!hasFailed && !hasLoadedRows && hasMessageToDisplayWhenEmpty && shouldDisplayMessageWhenEmpty\"\n            class=\"message\"\n            [style.height.px]=\"configs.rowHeight\">\n                <span>\n                    {{ messageToDisplayWhenEmpty | translate }}\n                </span>\n            </div>\n\n            <div *ngIf=\"hasFailed\"\n            class=\"message\"\n            [style.height.px]=\"configs.rowHeight\">\n                <span>\n                    <i class=\"fas fa-exclamation-triangle mr-2 text-yellow-600\"></i>{{ messageToDisplayWhenFailed | translate }}\n                </span>\n            </div>\n        </ng-container>\n    </cdk-virtual-scroll-viewport>\n</div>", styles: [":host-context{display:flex;-webkit-user-select:none;user-select:none;flex-direction:column;overflow:hidden}:host-context:not(.no-borders){border-radius:.5rem;border-width:1px;border-color:#d1d5dbe6;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}:host-context.no-borders .header .header-row{padding-top:.375rem;padding-bottom:.375rem}:host-context.no-borders .body lib-data-grid-row{padding-top:.25rem;padding-bottom:.25rem}.header-row,lib-data-grid-row,.loading,.message{gap:1rem;padding-left:1rem;padding-right:1rem}.header{overflow:hidden;border-bottom-width:1px;border-color:#d1d5dbe6;background-color:#e5e7eb66;font-weight:700}.header.hide{display:none}.header .header-row{display:flex;flex-direction:row;padding-top:.75rem;padding-bottom:.75rem}.header .header-cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.header .header-cell:not(.selection){flex:none}.body{position:relative;flex-grow:1}.body cdk-virtual-scroll-viewport{position:absolute;inset:0}.body cdk-virtual-scroll-viewport ::ng-deep .cdk-virtual-scroll-content-wrapper{display:grid;grid-template-columns:inherit}.body lib-data-grid-row{margin-top:-1px;cursor:pointer;border-top-width:1px;border-bottom-width:1px;border-color:#cbd5e180;padding-top:.5rem;padding-bottom:.5rem}.body lib-data-grid-row:nth-child(2n){background-color:#f8fafcb3}.body lib-data-grid-row:hover{background-color:#bfdbfe33}.body lib-data-grid-row.focused{z-index:1;border-color:#94a3b899}.body lib-data-grid-row.selected{position:relative;z-index:10;--tw-border-opacity: 1;border-color:rgb(147 197 253 / var(--tw-border-opacity, 1));background-color:#bfdbfe4d}.body lib-data-grid-row.selected:hover{background-color:#bfdbfe66}.body .loading,.body .message{display:flex;align-items:center;gap:.5rem;white-space:nowrap;height:2.5rem;border-bottom-width:1px;border-color:#cbd5e180;grid-column:1 / -1}.body .loading span,.body .message span{overflow:hidden;text-overflow:ellipsis}.body .loading svg{height:1.5rem;min-height:1.5rem;width:1.5rem;min-width:1.5rem}@keyframes spin{to{transform:rotate(360deg)}}.body .loading svg{animation:spin 1s linear infinite;transition-property:opacity;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.buttons{display:flex;border-top-width:1px;border-bottom-width:1px;border-color:#d1d5dbe6;padding:.25rem}\n"] }]
+                    }, changeDetection: ChangeDetectionStrategy.Eager, imports: [DataGridRowComponent, NgStyle, ScrollingModule, TranslatePipe], template: "@if (showButtons) {\n  <div class=\"buttons\">\n    <ng-content select=\"[buttons]\"></ng-content>\n  </div>\n}\n\n<div class=\"header\" [class.hide]=\"isHideColumns\" [style.padding-right.px]=\"headerRightMargin\">\n  <!-- Translated by however far the body is scrolled sideways. The rows scroll inside the CDK\n       viewport and the header sits outside it, so without this the headings simply stay put\n       while the cells move away from them. -->\n  <div class=\"header-row\" [style.transform]=\"headerScrollLeft ? 'translateX(-' + headerScrollLeft + 'px)' : null\">\n    @if (isShowMultiSelect) {\n      <div\n        class=\"header-cell selection\"\n        [ngStyle]=\"{\n          width: selectionColWidth ? selectionColWidth : null,\n        }\"\n      >\n        &nbsp;\n      </div>\n    }\n\n    <!-- A measured zero is a width, not the absence of one: it is a 1fr column that collapsed,\n         and its heading has to collapse too.\n\n         Such a heading is removed rather than merely made zero wide, because a flex item still\n         takes a gap on each side while the body grid allows the collapsed track only one, and\n         that spare gap pushed every heading to its right out by 16px. -->\n    @for (column of columns; track column) {\n      <div\n        class=\"header-cell\"\n        [ngStyle]=\"{\n          display: column.realSize === 0 ? 'none' : null,\n          'width.px': column.realSize ?? null,\n        }\"\n      >\n        <span>{{ column.headerName | translate }}</span>\n      </div>\n    }\n  </div>\n</div>\n\n<div #body class=\"body\" [style.min-height.px]=\"bodyMinHeight\">\n  <cdk-virtual-scroll-viewport [itemSize]=\"configs.rowHeight\" [style.grid-template-columns]=\"gridColumns\">\n    <lib-data-grid-row\n      #row\n      *cdkVirtualFor=\"let row of dataGridDataset.loadedRows; index as i; trackBy: trackByFn\"\n      [disabled]=\"disabled\"\n      [isFirstRow]=\"isFirstVisibleRow(i)\"\n      [rowData]=\"row\"\n      [style.height.px]=\"configs.rowHeight\"\n      (selectionResized)=\"onSelectionResized($event)\"\n    >\n    </lib-data-grid-row>\n\n    @if (loading) {\n      <div class=\"loading\" [style.height.px]=\"configs.rowHeight\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n          <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n          <path\n            class=\"opacity-75\"\n            fill=\"currentColor\"\n            d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n          ></path>\n        </svg>\n        <span>\n          {{ dataGridDataset.configs.loadingDisplayText ?? '' | translate }}\n        </span>\n      </div>\n    }\n    @if (!loading && !hasBeenLoaded && lazyLoadRows) {\n      <div class=\"message\" [style.height.px]=\"configs.rowHeight\">\n        <span>\n          {{ messageToDisplayWhenLazyLoad | translate }}\n        </span>\n      </div>\n    }\n    @if (!loading && hasBeenLoaded && (!hasLoadedRows || hasFailed)) {\n      @if (!hasFailed && !hasLoadedRows && hasMessageToDisplayWhenEmpty && shouldDisplayMessageWhenEmpty) {\n        <div class=\"message\" [style.height.px]=\"configs.rowHeight\">\n          <span>\n            {{ messageToDisplayWhenEmpty | translate }}\n          </span>\n        </div>\n      }\n      @if (hasFailed) {\n        <div class=\"message\" [style.height.px]=\"configs.rowHeight\">\n          <span>\n            <i class=\"fas fa-exclamation-triangle mr-2 text-yellow-600\"></i>{{ messageToDisplayWhenFailed | translate }}\n          </span>\n        </div>\n      }\n    }\n  </cdk-virtual-scroll-viewport>\n</div>\n", styles: [":host-context{display:flex;-webkit-user-select:none;user-select:none;flex-direction:column;overflow:hidden}:host-context:not(.no-borders){border-radius:.5rem;border-width:1px;border-color:#d1d5dbe6;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}:host-context.no-borders .header .header-row{padding-top:.375rem;padding-bottom:.375rem}:host-context.no-borders .body lib-data-grid-row{padding-top:.25rem;padding-bottom:.25rem}.header-row,lib-data-grid-row,.loading,.message{gap:1rem;padding-left:1rem;padding-right:1rem}.header{overflow:hidden;border-bottom-width:1px;border-color:#d1d5dbe6;background-color:#e5e7eb66;font-weight:700}.header.hide{display:none}.header .header-row{display:flex;flex-direction:row;padding-top:.75rem;padding-bottom:.75rem}.header .header-cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.header .header-cell:not(.selection){flex:none}.body{position:relative;flex-grow:1}.body cdk-virtual-scroll-viewport{position:absolute;inset:0}.body cdk-virtual-scroll-viewport ::ng-deep .cdk-virtual-scroll-content-wrapper{display:grid;grid-template-columns:inherit}.body lib-data-grid-row{margin-top:-1px;cursor:pointer;border-top-width:1px;border-bottom-width:1px;border-color:#cbd5e180;padding-top:.5rem;padding-bottom:.5rem}.body lib-data-grid-row:nth-child(2n){background-color:#f8fafcb3}.body lib-data-grid-row:hover{background-color:#bfdbfe33}.body lib-data-grid-row.focused{z-index:1;border-color:#94a3b899}.body lib-data-grid-row.selected{position:relative;z-index:10;--tw-border-opacity: 1;border-color:rgb(147 197 253 / var(--tw-border-opacity, 1));background-color:#bfdbfe4d}.body lib-data-grid-row.selected:hover{background-color:#bfdbfe66}.body .loading,.body .message{display:flex;align-items:center;gap:.5rem;white-space:nowrap;height:2.5rem;border-bottom-width:1px;border-color:#cbd5e180;grid-column:1 / -1}.body .loading span,.body .message span{overflow:hidden;text-overflow:ellipsis}.body .loading svg{height:1.5rem;min-height:1.5rem;width:1.5rem;min-width:1.5rem}@keyframes spin{to{transform:rotate(360deg)}}.body .loading svg{animation:spin 1s linear infinite;transition-property:opacity;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.buttons{display:flex;border-top-width:1px;border-bottom-width:1px;border-color:#d1d5dbe6;padding:.25rem}\n"] }]
         }], ctorParameters: () => [], propDecorators: { bodyElement: [{
                 type: ViewChild,
                 args: ['body']
@@ -2578,17 +2504,14 @@ class FormGroupComponent {
     get hasTitle() {
         return !!this.label;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: FormGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: FormGroupComponent, isStandalone: true, selector: "lib-form-group", inputs: { shouldExpand: "shouldExpand", label: "label" }, host: { properties: { "class.expand": "shouldExpand" } }, ngImport: i0, template: "<h3 *ngIf=\"hasTitle\"\nclass=\"title\" >\n    {{ label | translate }}\n</h3>\n\n<div class=\"content\"\n[class.has-title]=\"hasTitle\">\n    <ng-content></ng-content>\n</div>", styles: [":host-context.expand{display:flex;max-height:100%;flex-direction:column;overflow-y:hidden}:host-context.expand .content{max-height:100%;flex-grow:1;overflow-y:hidden}.title{font-size:1.125rem;line-height:1.75rem;font-weight:600}.content{display:grid;grid-auto-rows:auto;grid-template-columns:min-content minmax(0,1fr);gap:.25rem}.content.has-title{border-top-width:1px;border-color:#d1d5dbe6;padding:.75rem .5rem .5rem}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: FormGroupComponent, isStandalone: true, selector: "lib-form-group", inputs: { shouldExpand: "shouldExpand", label: "label" }, host: { properties: { "class.expand": "shouldExpand" } }, ngImport: i0, template: "@if (hasTitle) {\n  <h3 class=\"title\">\n    {{ label | translate }}\n  </h3>\n}\n\n<div class=\"content\" [class.has-title]=\"hasTitle\">\n  <ng-content></ng-content>\n</div>\n", styles: [":host-context.expand{display:flex;max-height:100%;flex-direction:column;overflow-y:hidden}:host-context.expand .content{max-height:100%;flex-grow:1;overflow-y:hidden}.title{font-size:1.125rem;line-height:1.75rem;font-weight:600}.content{display:grid;grid-auto-rows:auto;grid-template-columns:min-content minmax(0,1fr);gap:.25rem}.content.has-title{border-top-width:1px;border-color:#d1d5dbe6;padding:.75rem .5rem .5rem}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: FormGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-form-group', imports: [
-                        NgIf,
-                        TranslatePipe,
-                    ], host: {
-                        '[class.expand]': 'shouldExpand'
-                    }, template: "<h3 *ngIf=\"hasTitle\"\nclass=\"title\" >\n    {{ label | translate }}\n</h3>\n\n<div class=\"content\"\n[class.has-title]=\"hasTitle\">\n    <ng-content></ng-content>\n</div>", styles: [":host-context.expand{display:flex;max-height:100%;flex-direction:column;overflow-y:hidden}:host-context.expand .content{max-height:100%;flex-grow:1;overflow-y:hidden}.title{font-size:1.125rem;line-height:1.75rem;font-weight:600}.content{display:grid;grid-auto-rows:auto;grid-template-columns:min-content minmax(0,1fr);gap:.25rem}.content.has-title{border-top-width:1px;border-color:#d1d5dbe6;padding:.75rem .5rem .5rem}\n"] }]
+            args: [{ selector: 'lib-form-group', imports: [TranslatePipe], host: {
+                        '[class.expand]': 'shouldExpand',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (hasTitle) {\n  <h3 class=\"title\">\n    {{ label | translate }}\n  </h3>\n}\n\n<div class=\"content\" [class.has-title]=\"hasTitle\">\n  <ng-content></ng-content>\n</div>\n", styles: [":host-context.expand{display:flex;max-height:100%;flex-direction:column;overflow-y:hidden}:host-context.expand .content{max-height:100%;flex-grow:1;overflow-y:hidden}.title{font-size:1.125rem;line-height:1.75rem;font-weight:600}.content{display:grid;grid-auto-rows:auto;grid-template-columns:min-content minmax(0,1fr);gap:.25rem}.content.has-title{border-top-width:1px;border-color:#d1d5dbe6;padding:.75rem .5rem .5rem}\n"] }]
         }], propDecorators: { shouldExpand: [{
                 type: Input
             }], label: [{
@@ -2637,14 +2560,12 @@ class GroupAccordionComponent {
     setMaxHeight() {
         this._maxHeight = this.containerElementRef?.nativeElement?.offsetHeight ?? 0;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: GroupAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: GroupAccordionComponent, isStandalone: true, selector: "lib-group-accordion", inputs: { label: "label" }, host: { properties: { "class.collapsed": "collapsed" } }, viewQueries: [{ propertyName: "containerElementRef", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "<div class=\"title\">\n    <h6 role=\"button\"\n    tabindex=\"0\"\n    [attr.aria-expanded]=\"!collapsed\"\n    (click)=\"onToggle()\"\n    (keydown.enter)=\"onToggle()\"\n    (keydown.space)=\"onToggle(); $event.preventDefault()\"><i class=\"fas fa-chevron-down fa-sm\"></i>{{ this.label }}</h6>\n</div>\n\n<div #container class=\"content animate\"\n[ngStyle]=\"maxHeight >= 0 && {\n    'height.px': maxHeight,\n    'max-height.px': maxHeight\n} || null\">\n    <div #maxHeighContainer>\n        <ng-content></ng-content>\n    </div>\n</div>", styles: [":host-context{margin-bottom:1rem;display:flex;flex-direction:column}:host-context.collapsed i{--tw-rotate: -90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}:host-context.collapsed .content{max-height:0px!important;overflow:hidden!important}:host-context:not(.collapsed) .content{animation:show .15s}.title{-webkit-user-select:none;user-select:none}.title i{margin-right:.5rem;padding-top:.25rem;--tw-text-opacity: 1;color:rgb(100 116 139 / var(--tw-text-opacity, 1));transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.title h6{margin-bottom:0;display:inline;height:3rem;cursor:pointer;text-overflow:ellipsis;white-space:nowrap;padding-left:.25rem;padding-right:.5rem;font-size:1.125rem;text-transform:uppercase;line-height:3rem}.content{box-sizing:content-box;flex-grow:1;overflow-y:hidden;padding-left:.25rem;padding-right:.25rem}.content.animate{transition-property:max-height;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.content div{padding-bottom:.25rem}@media (min-width: 1024px){.content div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}}@media (min-width: 1280px){.content div{grid-template-columns:repeat(3,minmax(0,1fr))}}.content div{height:100%}@keyframes show{0%{overflow:hidden}99%{overflow:hidden}to{overflow:auto}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: GroupAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: GroupAccordionComponent, isStandalone: true, selector: "lib-group-accordion", inputs: { label: "label" }, host: { properties: { "class.collapsed": "collapsed" } }, viewQueries: [{ propertyName: "containerElementRef", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "<div class=\"title\">\n  <h6\n    role=\"button\"\n    tabindex=\"0\"\n    [attr.aria-expanded]=\"!collapsed\"\n    (click)=\"onToggle()\"\n    (keydown.enter)=\"onToggle()\"\n    (keydown.space)=\"onToggle(); $event.preventDefault()\"\n  >\n    <i class=\"fas fa-chevron-down fa-sm\"></i>{{ this.label }}\n  </h6>\n</div>\n\n<div\n  #container\n  class=\"content animate\"\n  [ngStyle]=\"\n    (maxHeight >= 0 && {\n      'height.px': maxHeight,\n      'max-height.px': maxHeight,\n    }) ||\n    null\n  \"\n>\n  <div #maxHeighContainer>\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [":host-context{margin-bottom:1rem;display:flex;flex-direction:column}:host-context.collapsed i{--tw-rotate: -90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}:host-context.collapsed .content{max-height:0px!important;overflow:hidden!important}:host-context:not(.collapsed) .content{animation:show .15s}.title{-webkit-user-select:none;user-select:none}.title i{margin-right:.5rem;padding-top:.25rem;--tw-text-opacity: 1;color:rgb(100 116 139 / var(--tw-text-opacity, 1));transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.title h6{margin-bottom:0;display:inline;height:3rem;cursor:pointer;text-overflow:ellipsis;white-space:nowrap;padding-left:.25rem;padding-right:.5rem;font-size:1.125rem;text-transform:uppercase;line-height:3rem}.content{box-sizing:content-box;flex-grow:1;overflow-y:hidden;padding-left:.25rem;padding-right:.25rem}.content.animate{transition-property:max-height;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.content div{padding-bottom:.25rem}@media(min-width:1024px){.content div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}}@media(min-width:1280px){.content div{grid-template-columns:repeat(3,minmax(0,1fr))}}.content div{height:100%}@keyframes show{0%{overflow:hidden}99%{overflow:hidden}to{overflow:auto}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: GroupAccordionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: GroupAccordionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-group-accordion', host: { '[class.collapsed]': 'collapsed' }, imports: [
-                        NgStyle,
-                    ], template: "<div class=\"title\">\n    <h6 role=\"button\"\n    tabindex=\"0\"\n    [attr.aria-expanded]=\"!collapsed\"\n    (click)=\"onToggle()\"\n    (keydown.enter)=\"onToggle()\"\n    (keydown.space)=\"onToggle(); $event.preventDefault()\"><i class=\"fas fa-chevron-down fa-sm\"></i>{{ this.label }}</h6>\n</div>\n\n<div #container class=\"content animate\"\n[ngStyle]=\"maxHeight >= 0 && {\n    'height.px': maxHeight,\n    'max-height.px': maxHeight\n} || null\">\n    <div #maxHeighContainer>\n        <ng-content></ng-content>\n    </div>\n</div>", styles: [":host-context{margin-bottom:1rem;display:flex;flex-direction:column}:host-context.collapsed i{--tw-rotate: -90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}:host-context.collapsed .content{max-height:0px!important;overflow:hidden!important}:host-context:not(.collapsed) .content{animation:show .15s}.title{-webkit-user-select:none;user-select:none}.title i{margin-right:.5rem;padding-top:.25rem;--tw-text-opacity: 1;color:rgb(100 116 139 / var(--tw-text-opacity, 1));transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.title h6{margin-bottom:0;display:inline;height:3rem;cursor:pointer;text-overflow:ellipsis;white-space:nowrap;padding-left:.25rem;padding-right:.5rem;font-size:1.125rem;text-transform:uppercase;line-height:3rem}.content{box-sizing:content-box;flex-grow:1;overflow-y:hidden;padding-left:.25rem;padding-right:.25rem}.content.animate{transition-property:max-height;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.content div{padding-bottom:.25rem}@media (min-width: 1024px){.content div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}}@media (min-width: 1280px){.content div{grid-template-columns:repeat(3,minmax(0,1fr))}}.content div{height:100%}@keyframes show{0%{overflow:hidden}99%{overflow:hidden}to{overflow:auto}}\n"] }]
+            args: [{ selector: 'lib-group-accordion', host: { '[class.collapsed]': 'collapsed' }, changeDetection: ChangeDetectionStrategy.Eager, imports: [NgStyle], template: "<div class=\"title\">\n  <h6\n    role=\"button\"\n    tabindex=\"0\"\n    [attr.aria-expanded]=\"!collapsed\"\n    (click)=\"onToggle()\"\n    (keydown.enter)=\"onToggle()\"\n    (keydown.space)=\"onToggle(); $event.preventDefault()\"\n  >\n    <i class=\"fas fa-chevron-down fa-sm\"></i>{{ this.label }}\n  </h6>\n</div>\n\n<div\n  #container\n  class=\"content animate\"\n  [ngStyle]=\"\n    (maxHeight >= 0 && {\n      'height.px': maxHeight,\n      'max-height.px': maxHeight,\n    }) ||\n    null\n  \"\n>\n  <div #maxHeighContainer>\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [":host-context{margin-bottom:1rem;display:flex;flex-direction:column}:host-context.collapsed i{--tw-rotate: -90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}:host-context.collapsed .content{max-height:0px!important;overflow:hidden!important}:host-context:not(.collapsed) .content{animation:show .15s}.title{-webkit-user-select:none;user-select:none}.title i{margin-right:.5rem;padding-top:.25rem;--tw-text-opacity: 1;color:rgb(100 116 139 / var(--tw-text-opacity, 1));transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.title h6{margin-bottom:0;display:inline;height:3rem;cursor:pointer;text-overflow:ellipsis;white-space:nowrap;padding-left:.25rem;padding-right:.5rem;font-size:1.125rem;text-transform:uppercase;line-height:3rem}.content{box-sizing:content-box;flex-grow:1;overflow-y:hidden;padding-left:.25rem;padding-right:.25rem}.content.animate{transition-property:max-height;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.content div{padding-bottom:.25rem}@media(min-width:1024px){.content div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}}@media(min-width:1280px){.content div{grid-template-columns:repeat(3,minmax(0,1fr))}}.content div{height:100%}@keyframes show{0%{overflow:hidden}99%{overflow:hidden}to{overflow:auto}}\n"] }]
         }], propDecorators: { containerElementRef: [{
                 type: ViewChild,
                 args: ['container']
@@ -2675,12 +2596,12 @@ class ScrollSpyDirective {
         const scrollTop = event.target.scrollTop;
         const scrollHeight = event.target.scrollHeight;
         const maxScroll = Math.round(event.target.scrollHeight - event.target.getBoundingClientRect().height);
-        const currentScroll = Math.round(scrollTop * scrollHeight / maxScroll);
+        const currentScroll = Math.round((scrollTop * scrollHeight) / maxScroll);
         if (currentScroll >= scrollHeight) {
             this.select(this.sections.length - 1);
             return;
         }
-        const elements = this.sections.filter(el => (el.offsetTop) <= currentScroll);
+        const elements = this.sections.filter((el) => el.offsetTop <= currentScroll);
         this.select(elements.length > 0 ? elements.length - 1 : 0);
     }
     //#endregion
@@ -2697,8 +2618,8 @@ class ScrollSpyDirective {
     //#endregion
     //#region Private methods
     updateSections(children) {
-        children.forEach(el => {
-            if (this.spiedTags.some(spiedTag => spiedTag.toUpperCase() === el.tagName.toUpperCase())) {
+        children.forEach((el) => {
+            if (this.spiedTags.some((spiedTag) => spiedTag.toUpperCase() === el.tagName.toUpperCase())) {
                 this.sections.push(el);
             }
             else {
@@ -2706,13 +2627,13 @@ class ScrollSpyDirective {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: ScrollSpyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.6", type: ScrollSpyDirective, isStandalone: true, selector: "[libScrollSpy]", inputs: { spiedTags: "spiedTags" }, outputs: { activeSectionChange: "activeSectionChange" }, host: { listeners: { "scroll": "onScroll($event)" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: ScrollSpyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: ScrollSpyDirective, isStandalone: true, selector: "[libScrollSpy]", inputs: { spiedTags: "spiedTags" }, outputs: { activeSectionChange: "activeSectionChange" }, host: { listeners: { "scroll": "onScroll($event)" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: ScrollSpyDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: ScrollSpyDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[libScrollSpy]'
+                    selector: '[libScrollSpy]',
                 }]
         }], propDecorators: { spiedTags: [{
                 type: Input
@@ -2727,7 +2648,7 @@ class GroupContainerComponent {
     scrollSpy;
     sections;
     get titles() {
-        return this.sections?.map(x => x.label) ?? [];
+        return this.sections?.map((x) => x.label) ?? [];
     }
     activeSection = 0;
     title;
@@ -2738,16 +2659,12 @@ class GroupContainerComponent {
     scrollTo(section) {
         this.scrollSpy.scrollTo(section);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: GroupContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: GroupContainerComponent, isStandalone: true, selector: "lib-group-container", inputs: { title: "title", icon: "icon" }, queries: [{ propertyName: "sections", predicate: GroupAccordionComponent, descendants: true }], viewQueries: [{ propertyName: "scrollSpy", first: true, predicate: ScrollSpyDirective, descendants: true }], ngImport: i0, template: "<div class=\"title\">\n    <i *ngIf=\"!!title && !!icon\" class=\"fas fa-fw\" [ngClass]=\"icon\"></i>\n\n    <h4 *ngIf=\"!!title\">{{ title | translate }}</h4>\n\n    <svg *ngIf=\"!title\" [ngClass]=\"''\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n        <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n        <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n    </svg>\n</div>\n\n<div class=\"content-container\">\n    <ng-content></ng-content>\n</div>", styles: [":host-context{position:relative;display:flex;flex-grow:1;flex-direction:column;overflow:hidden;border-radius:.5rem;border-width:1px;border-color:#d1d5dbe6;background-color:#fffc}.title{display:flex;height:2rem;align-items:center;text-overflow:ellipsis;border-bottom-width:1px;border-color:#d1d5dbe6;padding:.25rem .5rem}.title i{padding-right:.5rem;--tw-text-opacity: 1;color:rgb(100 116 139 / var(--tw-text-opacity, 1))}.title h4{font-weight:600}.title svg{height:1.25rem;width:1.25rem}@keyframes spin{to{transform:rotate(360deg)}}.title svg{animation:spin 1s linear infinite}.content-container{position:relative;display:flex;flex-grow:1;overflow:hidden}.content-container ::ng-deep>*{flex-grow:1;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: GroupContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: GroupContainerComponent, isStandalone: true, selector: "lib-group-container", inputs: { title: "title", icon: "icon" }, queries: [{ propertyName: "sections", predicate: GroupAccordionComponent, descendants: true }], viewQueries: [{ propertyName: "scrollSpy", first: true, predicate: ScrollSpyDirective, descendants: true }], ngImport: i0, template: "<div class=\"title\">\n  @if (!!title && !!icon) {\n    <i class=\"fas fa-fw\" [ngClass]=\"icon\"></i>\n  }\n  @if (!!title) {\n    <h4>{{ title | translate }}</h4>\n  }\n  @if (!title) {\n    <svg [ngClass]=\"''\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n      <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n      <path\n        class=\"opacity-75\"\n        fill=\"currentColor\"\n        d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n      ></path>\n    </svg>\n  }\n</div>\n\n<div class=\"content-container\">\n  <ng-content></ng-content>\n</div>\n", styles: [":host-context{position:relative;display:flex;flex-grow:1;flex-direction:column;overflow:hidden;border-radius:.5rem;border-width:1px;border-color:#d1d5dbe6;background-color:#fffc}.title{display:flex;height:2rem;align-items:center;text-overflow:ellipsis;border-bottom-width:1px;border-color:#d1d5dbe6;padding:.25rem .5rem}.title i{padding-right:.5rem;--tw-text-opacity: 1;color:rgb(100 116 139 / var(--tw-text-opacity, 1))}.title h4{font-weight:600}.title svg{height:1.25rem;width:1.25rem}@keyframes spin{to{transform:rotate(360deg)}}.title svg{animation:spin 1s linear infinite}.content-container{position:relative;display:flex;flex-grow:1;overflow:hidden}.content-container ::ng-deep>*{flex-grow:1;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: GroupContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: GroupContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-group-container', imports: [
-                        NgClass,
-                        NgIf,
-                        TranslatePipe,
-                    ], template: "<div class=\"title\">\n    <i *ngIf=\"!!title && !!icon\" class=\"fas fa-fw\" [ngClass]=\"icon\"></i>\n\n    <h4 *ngIf=\"!!title\">{{ title | translate }}</h4>\n\n    <svg *ngIf=\"!title\" [ngClass]=\"''\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n        <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n        <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n    </svg>\n</div>\n\n<div class=\"content-container\">\n    <ng-content></ng-content>\n</div>", styles: [":host-context{position:relative;display:flex;flex-grow:1;flex-direction:column;overflow:hidden;border-radius:.5rem;border-width:1px;border-color:#d1d5dbe6;background-color:#fffc}.title{display:flex;height:2rem;align-items:center;text-overflow:ellipsis;border-bottom-width:1px;border-color:#d1d5dbe6;padding:.25rem .5rem}.title i{padding-right:.5rem;--tw-text-opacity: 1;color:rgb(100 116 139 / var(--tw-text-opacity, 1))}.title h4{font-weight:600}.title svg{height:1.25rem;width:1.25rem}@keyframes spin{to{transform:rotate(360deg)}}.title svg{animation:spin 1s linear infinite}.content-container{position:relative;display:flex;flex-grow:1;overflow:hidden}.content-container ::ng-deep>*{flex-grow:1;overflow:hidden}\n"] }]
+            args: [{ selector: 'lib-group-container', imports: [NgClass, TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"title\">\n  @if (!!title && !!icon) {\n    <i class=\"fas fa-fw\" [ngClass]=\"icon\"></i>\n  }\n  @if (!!title) {\n    <h4>{{ title | translate }}</h4>\n  }\n  @if (!title) {\n    <svg [ngClass]=\"''\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n      <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n      <path\n        class=\"opacity-75\"\n        fill=\"currentColor\"\n        d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n      ></path>\n    </svg>\n  }\n</div>\n\n<div class=\"content-container\">\n  <ng-content></ng-content>\n</div>\n", styles: [":host-context{position:relative;display:flex;flex-grow:1;flex-direction:column;overflow:hidden;border-radius:.5rem;border-width:1px;border-color:#d1d5dbe6;background-color:#fffc}.title{display:flex;height:2rem;align-items:center;text-overflow:ellipsis;border-bottom-width:1px;border-color:#d1d5dbe6;padding:.25rem .5rem}.title i{padding-right:.5rem;--tw-text-opacity: 1;color:rgb(100 116 139 / var(--tw-text-opacity, 1))}.title h4{font-weight:600}.title svg{height:1.25rem;width:1.25rem}@keyframes spin{to{transform:rotate(360deg)}}.title svg{animation:spin 1s linear infinite}.content-container{position:relative;display:flex;flex-grow:1;overflow:hidden}.content-container ::ng-deep>*{flex-grow:1;overflow:hidden}\n"] }]
         }], propDecorators: { scrollSpy: [{
                 type: ViewChild,
                 args: [ScrollSpyDirective]
@@ -2764,7 +2681,7 @@ class GroupScrollSpyComponent {
     scrollSpy;
     sections;
     get titles() {
-        return this.sections?.map(x => x.label) ?? [];
+        return this.sections?.map((x) => x.label) ?? [];
     }
     activeSection = 0;
     activeSectionChanged(index) {
@@ -2773,15 +2690,12 @@ class GroupScrollSpyComponent {
     scrollTo(section) {
         this.scrollSpy.scrollTo(section);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: GroupScrollSpyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: GroupScrollSpyComponent, isStandalone: true, selector: "lib-group-scroll-spy", queries: [{ propertyName: "sections", predicate: GroupAccordionComponent, descendants: true }], viewQueries: [{ propertyName: "scrollSpy", first: true, predicate: ScrollSpyDirective, descendants: true }], ngImport: i0, template: "<div class=\"scroll-spy\">\n    <a *ngFor=\"let title of titles; let i = index\"\n        class=\"item\" [class.active]=\"i === activeSection\"\n        role=\"button\"\n        tabindex=\"0\"\n        [attr.aria-current]=\"i === activeSection\"\n        (click)=\"scrollTo(i)\"\n        (keydown.enter)=\"scrollTo(i)\"\n        (keydown.space)=\"scrollTo(i); $event.preventDefault()\"\n    >{{ title }}</a>\n</div>\n\n<div class=\"content\" libScrollSpy\n[class.no-scroll-spy]=\"titles.length === 0\"\n[spiedTags]=\"['lib-group-accordion']\"\n(activeSectionChange)=\"activeSectionChanged($event)\"\n>\n    <ng-content></ng-content>\n</div>", styles: [":host-context{position:relative;display:flex;height:100%;max-height:100%;min-height:100%;flex-grow:1;overflow:hidden}.content{display:flex;flex-grow:1;flex-direction:column;overflow:auto;scroll-behavior:smooth;padding:.75rem .75rem .25rem}@media (min-width: 768px){.content{padding-right:10.5rem}.content.no-scroll-spy{padding-right:.75rem}}.scroll-spy{position:absolute;top:.75rem;right:.75rem;display:none;width:9rem;-webkit-user-select:none;user-select:none;flex-direction:column}@media (min-width: 768px){.scroll-spy{display:flex}}.scroll-spy a{cursor:pointer;border-left-width:2px;--tw-border-opacity: 1;border-left-color:rgb(209 213 219 / var(--tw-border-opacity, 1));padding:.5rem 1rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.scroll-spy a.active{--tw-border-opacity: 1;border-left-color:rgb(0 107 182 / var(--tw-border-opacity, 1));--tw-text-opacity: 1;color:rgb(0 107 182 / var(--tw-text-opacity, 1))}.scroll-spy a:active{background-color:#006bb61a}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: ScrollSpyDirective, selector: "[libScrollSpy]", inputs: ["spiedTags"], outputs: ["activeSectionChange"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: GroupScrollSpyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: GroupScrollSpyComponent, isStandalone: true, selector: "lib-group-scroll-spy", queries: [{ propertyName: "sections", predicate: GroupAccordionComponent, descendants: true }], viewQueries: [{ propertyName: "scrollSpy", first: true, predicate: ScrollSpyDirective, descendants: true }], ngImport: i0, template: "<div class=\"scroll-spy\">\n  @for (title of titles; track title; let i = $index) {\n    <a\n      class=\"item\"\n      [class.active]=\"i === activeSection\"\n      role=\"button\"\n      tabindex=\"0\"\n      [attr.aria-current]=\"i === activeSection\"\n      (click)=\"scrollTo(i)\"\n      (keydown.enter)=\"scrollTo(i)\"\n      (keydown.space)=\"scrollTo(i); $event.preventDefault()\"\n      >{{ title }}</a\n    >\n  }\n</div>\n\n<div\n  class=\"content\"\n  libScrollSpy\n  [class.no-scroll-spy]=\"titles.length === 0\"\n  [spiedTags]=\"['lib-group-accordion']\"\n  (activeSectionChange)=\"activeSectionChanged($event)\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [":host-context{position:relative;display:flex;height:100%;max-height:100%;min-height:100%;flex-grow:1;overflow:hidden}.content{display:flex;flex-grow:1;flex-direction:column;overflow:auto;scroll-behavior:smooth;padding:.75rem .75rem .25rem}@media(min-width:768px){.content{padding-right:10.5rem}.content.no-scroll-spy{padding-right:.75rem}}.scroll-spy{position:absolute;top:.75rem;right:.75rem;display:none;width:9rem;-webkit-user-select:none;user-select:none;flex-direction:column}@media(min-width:768px){.scroll-spy{display:flex}}.scroll-spy a{cursor:pointer;border-left-width:2px;--tw-border-opacity: 1;border-left-color:rgb(209 213 219 / var(--tw-border-opacity, 1));padding:.5rem 1rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.scroll-spy a.active{--tw-border-opacity: 1;border-left-color:rgb(0 107 182 / var(--tw-border-opacity, 1));--tw-text-opacity: 1;color:rgb(0 107 182 / var(--tw-text-opacity, 1))}.scroll-spy a:active{background-color:#006bb61a}\n"], dependencies: [{ kind: "directive", type: ScrollSpyDirective, selector: "[libScrollSpy]", inputs: ["spiedTags"], outputs: ["activeSectionChange"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: GroupScrollSpyComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: GroupScrollSpyComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-group-scroll-spy', imports: [
-                        NgFor,
-                        ScrollSpyDirective,
-                    ], template: "<div class=\"scroll-spy\">\n    <a *ngFor=\"let title of titles; let i = index\"\n        class=\"item\" [class.active]=\"i === activeSection\"\n        role=\"button\"\n        tabindex=\"0\"\n        [attr.aria-current]=\"i === activeSection\"\n        (click)=\"scrollTo(i)\"\n        (keydown.enter)=\"scrollTo(i)\"\n        (keydown.space)=\"scrollTo(i); $event.preventDefault()\"\n    >{{ title }}</a>\n</div>\n\n<div class=\"content\" libScrollSpy\n[class.no-scroll-spy]=\"titles.length === 0\"\n[spiedTags]=\"['lib-group-accordion']\"\n(activeSectionChange)=\"activeSectionChanged($event)\"\n>\n    <ng-content></ng-content>\n</div>", styles: [":host-context{position:relative;display:flex;height:100%;max-height:100%;min-height:100%;flex-grow:1;overflow:hidden}.content{display:flex;flex-grow:1;flex-direction:column;overflow:auto;scroll-behavior:smooth;padding:.75rem .75rem .25rem}@media (min-width: 768px){.content{padding-right:10.5rem}.content.no-scroll-spy{padding-right:.75rem}}.scroll-spy{position:absolute;top:.75rem;right:.75rem;display:none;width:9rem;-webkit-user-select:none;user-select:none;flex-direction:column}@media (min-width: 768px){.scroll-spy{display:flex}}.scroll-spy a{cursor:pointer;border-left-width:2px;--tw-border-opacity: 1;border-left-color:rgb(209 213 219 / var(--tw-border-opacity, 1));padding:.5rem 1rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.scroll-spy a.active{--tw-border-opacity: 1;border-left-color:rgb(0 107 182 / var(--tw-border-opacity, 1));--tw-text-opacity: 1;color:rgb(0 107 182 / var(--tw-text-opacity, 1))}.scroll-spy a:active{background-color:#006bb61a}\n"] }]
+            args: [{ selector: 'lib-group-scroll-spy', changeDetection: ChangeDetectionStrategy.Eager, imports: [ScrollSpyDirective], template: "<div class=\"scroll-spy\">\n  @for (title of titles; track title; let i = $index) {\n    <a\n      class=\"item\"\n      [class.active]=\"i === activeSection\"\n      role=\"button\"\n      tabindex=\"0\"\n      [attr.aria-current]=\"i === activeSection\"\n      (click)=\"scrollTo(i)\"\n      (keydown.enter)=\"scrollTo(i)\"\n      (keydown.space)=\"scrollTo(i); $event.preventDefault()\"\n      >{{ title }}</a\n    >\n  }\n</div>\n\n<div\n  class=\"content\"\n  libScrollSpy\n  [class.no-scroll-spy]=\"titles.length === 0\"\n  [spiedTags]=\"['lib-group-accordion']\"\n  (activeSectionChange)=\"activeSectionChanged($event)\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [":host-context{position:relative;display:flex;height:100%;max-height:100%;min-height:100%;flex-grow:1;overflow:hidden}.content{display:flex;flex-grow:1;flex-direction:column;overflow:auto;scroll-behavior:smooth;padding:.75rem .75rem .25rem}@media(min-width:768px){.content{padding-right:10.5rem}.content.no-scroll-spy{padding-right:.75rem}}.scroll-spy{position:absolute;top:.75rem;right:.75rem;display:none;width:9rem;-webkit-user-select:none;user-select:none;flex-direction:column}@media(min-width:768px){.scroll-spy{display:flex}}.scroll-spy a{cursor:pointer;border-left-width:2px;--tw-border-opacity: 1;border-left-color:rgb(209 213 219 / var(--tw-border-opacity, 1));padding:.5rem 1rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.scroll-spy a.active{--tw-border-opacity: 1;border-left-color:rgb(0 107 182 / var(--tw-border-opacity, 1));--tw-text-opacity: 1;color:rgb(0 107 182 / var(--tw-text-opacity, 1))}.scroll-spy a:active{background-color:#006bb61a}\n"] }]
         }], propDecorators: { scrollSpy: [{
                 type: ViewChild,
                 args: [ScrollSpyDirective]
@@ -2852,7 +2766,12 @@ class ModalComponent extends BaseComponent {
     bodyMouseDown(event) {
         if (this.dialog && this.isShown) {
             const target = event.target;
-            this.clickedOutside = (!this.modalProcessing && event.button === 0 && target.closest('lib-modal') && !target.closest('.modal-content')) ?? false;
+            this.clickedOutside =
+                (!this.modalProcessing &&
+                    event.button === 0 &&
+                    target.closest('lib-modal') &&
+                    !target.closest('.modal-content')) ??
+                    false;
         }
     }
     bodyMouseUp(event) {
@@ -2864,28 +2783,21 @@ class ModalComponent extends BaseComponent {
     }
     documentKeyDown(event) {
         event = event || window.event;
-        let isEscape = false;
-        if ('key' in event) {
-            isEscape = (event.key === 'Escape' || event.key === 'Esc');
-        }
-        else {
-            isEscape = (event.keyCode === 27);
-        }
+        // keyCode is the fallback for engines predating KeyboardEvent.key.
+        const isEscape = 'key' in event ? event.key === 'Escape' || event.key === 'Esc' : event.keyCode === 27;
         if (!this.modalProcessing && this.isShown && isEscape && document.body.classList.contains('modal-active')) {
             this.toggleModal();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: ModalComponent, isStandalone: true, selector: "lib-modal", inputs: { closeButtonText: "closeButtonText", dialog: "dialog", modalProcessing: "modalProcessing", position: "position", size: "size", title: "title" }, outputs: { closed: "closed" }, host: { attributes: { "title": "" }, listeners: { "body:mousedown": "bodyMouseDown($event)", "body:mouseup": "bodyMouseUp($event)", "document:keydown.escape": "documentKeyDown($event)" }, properties: { "class.show": "isShown" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"modal-overlay\"></div>\n\n<div class=\"modal-container size-{{ size }} {{ position }}\">\n    <form class=\"modal-content\">\n        <div class=\"modal-header\" *ngIf=\"title\">\n            <p class=\"text-2xl font-bold\">{{ title }}</p>\n\n            <button type=\"button\" class=\"modal-close\" (click)=\"toggleModal()\">\n                <svg class=\"fill-current text-black\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\">\n                    <path d=\"M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z\"></path>\n                </svg>\n            </button>\n        </div>\n\n        <div class=\"modal-body\">\n            <ng-content select=\"[body]\"></ng-content>\n        </div>\n\n        <div class=\"modal-footer\">\n            <button type=\"button\" class=\"btn gray-300\" [disabled]=\"modalProcessing\" (click)=\"onCloseClick()\">{{ closeButtonText }}</button>\n\n            <ng-content select=\"[footer]\"></ng-content>\n        </div>\n    </form>\n</div>", styles: ["body.modal-active{overflow-x:hidden;overflow-y:visible!important}:host{position:fixed;top:0;left:0;z-index:50;height:100%;width:100%}:host:not(.show){pointer-events:none;opacity:0;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-delay:.15s}:host:not(.show) .modal-overlay{opacity:0;transition-delay:.15s}:host:not(.show) .modal-container.top,:host:not(.show) .modal-container.center{--tw-translate-y: -3.5rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}:host:not(.show) .modal-container.bottom{--tw-translate-y: 3.5rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}:host:not(.show) .modal-container.left{--tw-translate-x: -3.5rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}:host:not(.show) .modal-container.right{--tw-translate-x: 3.5rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}:host:not(.show) .modal-container .modal-content{animation:hidden 0s ease-in-out forwards}.modal-overlay{position:fixed;inset:0;height:100vh;width:100vw;--tw-bg-opacity: 1;background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1));opacity:.5;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.modal-container{margin:auto;display:grid;height:100%;max-height:100vh;min-height:100%;grid-template-columns:repeat(1,minmax(0,1fr));padding:1.75rem;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}.modal-container.top{align-items:flex-start}.modal-container.bottom{align-items:flex-end}.modal-container.left{margin-right:0;align-items:center}.modal-container.right{margin-left:0;align-items:center}.modal-container.center{align-items:center}.modal-container.size-sm{max-width:24rem}.modal-container.size-md{max-width:28rem}.modal-container.size-lg{max-width:32rem}.modal-container.size-xl{max-width:36rem}.modal-container.size-2xl{max-width:42rem}.modal-container.size-3xl{max-width:48rem}.modal-container.size-4xl{max-width:56rem}.modal-container.size-5xl{max-width:64rem}.modal-container.size-6xl{max-width:72rem}.modal-container.size-7xl{max-width:80rem}.modal-container.size-full{max-width:100%}.modal-container.size-auto{width:100%}@media (min-width: 640px){.modal-container.size-auto{max-width:640px}}@media (min-width: 768px){.modal-container.size-auto{max-width:768px}}@media (min-width: 1024px){.modal-container.size-auto{max-width:1024px}}@media (min-width: 1280px){.modal-container.size-auto{max-width:1280px}}@media (min-width: 1536px){.modal-container.size-auto{max-width:1536px}}.modal-container .modal-content{position:relative;width:100%;border-radius:.375rem;border-width:1px;border-color:#0003;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));background-clip:padding-box;outline-width:0px;display:grid;max-height:100%;grid-template-rows:min-content 1fr min-content;overflow:hidden;--tw-shadow: 0 0 4px 0 rgba(0,0,0,.2), 0 3px 20px 0 rgba(0,0,0,.19);--tw-shadow-colored: 0 0 4px 0 var(--tw-shadow-color), 0 3px 20px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);animation:shown .3s ease-in-out forwards}.modal-container .modal-content .modal-header{border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1));padding:1rem}.modal-container .modal-content .modal-header .modal-close{position:absolute;top:0;right:0;margin:.5rem;cursor:pointer;padding:.5rem;opacity:.6}.modal-container .modal-content .modal-body{overflow:hidden;padding:1rem}.modal-container .modal-content .modal-footer{display:grid;grid-auto-columns:min-content;grid-auto-flow:column;justify-content:flex-end;gap:.25rem;white-space:nowrap;border-top-width:1px;--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1));padding:.75rem}.modal-container .modal-content .modal-footer>*,.modal-container .modal-content .modal-footer ::ng-deep div[footer]>*{display:grid;grid-auto-columns:min-content;grid-auto-flow:column;gap:.25rem}@keyframes hidden{0%{display:flex}to{display:none}}@keyframes shown{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: ModalComponent, isStandalone: true, selector: "lib-modal", inputs: { closeButtonText: "closeButtonText", dialog: "dialog", modalProcessing: "modalProcessing", position: "position", size: "size", title: "title" }, outputs: { closed: "closed" }, host: { attributes: { "title": "" }, listeners: { "body:mousedown": "bodyMouseDown($event)", "body:mouseup": "bodyMouseUp($event)", "document:keydown.escape": "documentKeyDown($event)" }, properties: { "class.show": "isShown" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"modal-overlay\"></div>\n\n<div class=\"modal-container size-{{ size }} {{ position }}\">\n  <form class=\"modal-content\">\n    @if (title) {\n      <div class=\"modal-header\">\n        <p class=\"text-2xl font-bold\">{{ title }}</p>\n        <button type=\"button\" class=\"modal-close\" (click)=\"toggleModal()\">\n          <svg\n            class=\"fill-current text-black\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"18\"\n            height=\"18\"\n            viewBox=\"0 0 18 18\"\n          >\n            <path\n              d=\"M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z\"\n            ></path>\n          </svg>\n        </button>\n      </div>\n    }\n\n    <div class=\"modal-body\">\n      <ng-content select=\"[body]\"></ng-content>\n    </div>\n\n    <div class=\"modal-footer\">\n      <button type=\"button\" class=\"btn gray-300\" [disabled]=\"modalProcessing\" (click)=\"onCloseClick()\">\n        {{ closeButtonText }}\n      </button>\n\n      <ng-content select=\"[footer]\"></ng-content>\n    </div>\n  </form>\n</div>\n", styles: ["body.modal-active{overflow-x:hidden;overflow-y:visible!important}:host{position:fixed;top:0;left:0;z-index:50;height:100%;width:100%}:host:not(.show){pointer-events:none;opacity:0;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-delay:.15s}:host:not(.show) .modal-overlay{opacity:0;transition-delay:.15s}:host:not(.show) .modal-container.top,:host:not(.show) .modal-container.center{--tw-translate-y: -3.5rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}:host:not(.show) .modal-container.bottom{--tw-translate-y: 3.5rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}:host:not(.show) .modal-container.left{--tw-translate-x: -3.5rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}:host:not(.show) .modal-container.right{--tw-translate-x: 3.5rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}:host:not(.show) .modal-container .modal-content{animation:hidden 0s ease-in-out forwards}.modal-overlay{position:fixed;inset:0;height:100vh;width:100vw;--tw-bg-opacity: 1;background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1));opacity:.5;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.modal-container{margin:auto;display:grid;height:100%;max-height:100vh;min-height:100%;grid-template-columns:repeat(1,minmax(0,1fr));padding:1.75rem;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}.modal-container.top{align-items:flex-start}.modal-container.bottom{align-items:flex-end}.modal-container.left{margin-right:0;align-items:center}.modal-container.right{margin-left:0;align-items:center}.modal-container.center{align-items:center}.modal-container.size-sm{max-width:24rem}.modal-container.size-md{max-width:28rem}.modal-container.size-lg{max-width:32rem}.modal-container.size-xl{max-width:36rem}.modal-container.size-2xl{max-width:42rem}.modal-container.size-3xl{max-width:48rem}.modal-container.size-4xl{max-width:56rem}.modal-container.size-5xl{max-width:64rem}.modal-container.size-6xl{max-width:72rem}.modal-container.size-7xl{max-width:80rem}.modal-container.size-full{max-width:100%}.modal-container.size-auto{width:100%}@media(min-width:640px){.modal-container.size-auto{max-width:640px}}@media(min-width:768px){.modal-container.size-auto{max-width:768px}}@media(min-width:1024px){.modal-container.size-auto{max-width:1024px}}@media(min-width:1280px){.modal-container.size-auto{max-width:1280px}}@media(min-width:1536px){.modal-container.size-auto{max-width:1536px}}.modal-container .modal-content{position:relative;width:100%;border-radius:.375rem;border-width:1px;border-color:#0003;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));background-clip:padding-box;outline-width:0px;display:grid;max-height:100%;grid-template-rows:min-content 1fr min-content;overflow:hidden;--tw-shadow: 0 0 4px 0 rgba(0,0,0,.2), 0 3px 20px 0 rgba(0,0,0,.19);--tw-shadow-colored: 0 0 4px 0 var(--tw-shadow-color), 0 3px 20px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);animation:shown .3s ease-in-out forwards}.modal-container .modal-content .modal-header{border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1));padding:1rem}.modal-container .modal-content .modal-header .modal-close{position:absolute;top:0;right:0;margin:.5rem;cursor:pointer;padding:.5rem;opacity:.6}.modal-container .modal-content .modal-body{overflow:hidden;padding:1rem}.modal-container .modal-content .modal-footer{display:grid;grid-auto-columns:min-content;grid-auto-flow:column;justify-content:flex-end;gap:.25rem;white-space:nowrap;border-top-width:1px;--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1));padding:.75rem}.modal-container .modal-content .modal-footer>*,.modal-container .modal-content .modal-footer ::ng-deep div[footer]>*{display:grid;grid-auto-columns:min-content;grid-auto-flow:column;gap:.25rem}@keyframes hidden{0%{display:flex}to{display:none}}@keyframes shown{0%{opacity:0}to{opacity:1}}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: ModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: ModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-modal', host: {
-                        'title': '', // This is to ensure that the title input does not conflict with the native HTML title attribute.
+                        title: '', // This is to ensure that the title input does not conflict with the native HTML title attribute.
                         '[class.show]': 'isShown',
-                    }, imports: [
-                        NgIf,
-                    ], template: "<div class=\"modal-overlay\"></div>\n\n<div class=\"modal-container size-{{ size }} {{ position }}\">\n    <form class=\"modal-content\">\n        <div class=\"modal-header\" *ngIf=\"title\">\n            <p class=\"text-2xl font-bold\">{{ title }}</p>\n\n            <button type=\"button\" class=\"modal-close\" (click)=\"toggleModal()\">\n                <svg class=\"fill-current text-black\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\">\n                    <path d=\"M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z\"></path>\n                </svg>\n            </button>\n        </div>\n\n        <div class=\"modal-body\">\n            <ng-content select=\"[body]\"></ng-content>\n        </div>\n\n        <div class=\"modal-footer\">\n            <button type=\"button\" class=\"btn gray-300\" [disabled]=\"modalProcessing\" (click)=\"onCloseClick()\">{{ closeButtonText }}</button>\n\n            <ng-content select=\"[footer]\"></ng-content>\n        </div>\n    </form>\n</div>", styles: ["body.modal-active{overflow-x:hidden;overflow-y:visible!important}:host{position:fixed;top:0;left:0;z-index:50;height:100%;width:100%}:host:not(.show){pointer-events:none;opacity:0;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-delay:.15s}:host:not(.show) .modal-overlay{opacity:0;transition-delay:.15s}:host:not(.show) .modal-container.top,:host:not(.show) .modal-container.center{--tw-translate-y: -3.5rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}:host:not(.show) .modal-container.bottom{--tw-translate-y: 3.5rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}:host:not(.show) .modal-container.left{--tw-translate-x: -3.5rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}:host:not(.show) .modal-container.right{--tw-translate-x: 3.5rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}:host:not(.show) .modal-container .modal-content{animation:hidden 0s ease-in-out forwards}.modal-overlay{position:fixed;inset:0;height:100vh;width:100vw;--tw-bg-opacity: 1;background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1));opacity:.5;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.modal-container{margin:auto;display:grid;height:100%;max-height:100vh;min-height:100%;grid-template-columns:repeat(1,minmax(0,1fr));padding:1.75rem;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}.modal-container.top{align-items:flex-start}.modal-container.bottom{align-items:flex-end}.modal-container.left{margin-right:0;align-items:center}.modal-container.right{margin-left:0;align-items:center}.modal-container.center{align-items:center}.modal-container.size-sm{max-width:24rem}.modal-container.size-md{max-width:28rem}.modal-container.size-lg{max-width:32rem}.modal-container.size-xl{max-width:36rem}.modal-container.size-2xl{max-width:42rem}.modal-container.size-3xl{max-width:48rem}.modal-container.size-4xl{max-width:56rem}.modal-container.size-5xl{max-width:64rem}.modal-container.size-6xl{max-width:72rem}.modal-container.size-7xl{max-width:80rem}.modal-container.size-full{max-width:100%}.modal-container.size-auto{width:100%}@media (min-width: 640px){.modal-container.size-auto{max-width:640px}}@media (min-width: 768px){.modal-container.size-auto{max-width:768px}}@media (min-width: 1024px){.modal-container.size-auto{max-width:1024px}}@media (min-width: 1280px){.modal-container.size-auto{max-width:1280px}}@media (min-width: 1536px){.modal-container.size-auto{max-width:1536px}}.modal-container .modal-content{position:relative;width:100%;border-radius:.375rem;border-width:1px;border-color:#0003;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));background-clip:padding-box;outline-width:0px;display:grid;max-height:100%;grid-template-rows:min-content 1fr min-content;overflow:hidden;--tw-shadow: 0 0 4px 0 rgba(0,0,0,.2), 0 3px 20px 0 rgba(0,0,0,.19);--tw-shadow-colored: 0 0 4px 0 var(--tw-shadow-color), 0 3px 20px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);animation:shown .3s ease-in-out forwards}.modal-container .modal-content .modal-header{border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1));padding:1rem}.modal-container .modal-content .modal-header .modal-close{position:absolute;top:0;right:0;margin:.5rem;cursor:pointer;padding:.5rem;opacity:.6}.modal-container .modal-content .modal-body{overflow:hidden;padding:1rem}.modal-container .modal-content .modal-footer{display:grid;grid-auto-columns:min-content;grid-auto-flow:column;justify-content:flex-end;gap:.25rem;white-space:nowrap;border-top-width:1px;--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1));padding:.75rem}.modal-container .modal-content .modal-footer>*,.modal-container .modal-content .modal-footer ::ng-deep div[footer]>*{display:grid;grid-auto-columns:min-content;grid-auto-flow:column;gap:.25rem}@keyframes hidden{0%{display:flex}to{display:none}}@keyframes shown{0%{opacity:0}to{opacity:1}}\n"] }]
+                    }, changeDetection: ChangeDetectionStrategy.Eager, imports: [], template: "<div class=\"modal-overlay\"></div>\n\n<div class=\"modal-container size-{{ size }} {{ position }}\">\n  <form class=\"modal-content\">\n    @if (title) {\n      <div class=\"modal-header\">\n        <p class=\"text-2xl font-bold\">{{ title }}</p>\n        <button type=\"button\" class=\"modal-close\" (click)=\"toggleModal()\">\n          <svg\n            class=\"fill-current text-black\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"18\"\n            height=\"18\"\n            viewBox=\"0 0 18 18\"\n          >\n            <path\n              d=\"M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z\"\n            ></path>\n          </svg>\n        </button>\n      </div>\n    }\n\n    <div class=\"modal-body\">\n      <ng-content select=\"[body]\"></ng-content>\n    </div>\n\n    <div class=\"modal-footer\">\n      <button type=\"button\" class=\"btn gray-300\" [disabled]=\"modalProcessing\" (click)=\"onCloseClick()\">\n        {{ closeButtonText }}\n      </button>\n\n      <ng-content select=\"[footer]\"></ng-content>\n    </div>\n  </form>\n</div>\n", styles: ["body.modal-active{overflow-x:hidden;overflow-y:visible!important}:host{position:fixed;top:0;left:0;z-index:50;height:100%;width:100%}:host:not(.show){pointer-events:none;opacity:0;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-delay:.15s}:host:not(.show) .modal-overlay{opacity:0;transition-delay:.15s}:host:not(.show) .modal-container.top,:host:not(.show) .modal-container.center{--tw-translate-y: -3.5rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}:host:not(.show) .modal-container.bottom{--tw-translate-y: 3.5rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}:host:not(.show) .modal-container.left{--tw-translate-x: -3.5rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}:host:not(.show) .modal-container.right{--tw-translate-x: 3.5rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}:host:not(.show) .modal-container .modal-content{animation:hidden 0s ease-in-out forwards}.modal-overlay{position:fixed;inset:0;height:100vh;width:100vw;--tw-bg-opacity: 1;background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1));opacity:.5;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.modal-container{margin:auto;display:grid;height:100%;max-height:100vh;min-height:100%;grid-template-columns:repeat(1,minmax(0,1fr));padding:1.75rem;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}.modal-container.top{align-items:flex-start}.modal-container.bottom{align-items:flex-end}.modal-container.left{margin-right:0;align-items:center}.modal-container.right{margin-left:0;align-items:center}.modal-container.center{align-items:center}.modal-container.size-sm{max-width:24rem}.modal-container.size-md{max-width:28rem}.modal-container.size-lg{max-width:32rem}.modal-container.size-xl{max-width:36rem}.modal-container.size-2xl{max-width:42rem}.modal-container.size-3xl{max-width:48rem}.modal-container.size-4xl{max-width:56rem}.modal-container.size-5xl{max-width:64rem}.modal-container.size-6xl{max-width:72rem}.modal-container.size-7xl{max-width:80rem}.modal-container.size-full{max-width:100%}.modal-container.size-auto{width:100%}@media(min-width:640px){.modal-container.size-auto{max-width:640px}}@media(min-width:768px){.modal-container.size-auto{max-width:768px}}@media(min-width:1024px){.modal-container.size-auto{max-width:1024px}}@media(min-width:1280px){.modal-container.size-auto{max-width:1280px}}@media(min-width:1536px){.modal-container.size-auto{max-width:1536px}}.modal-container .modal-content{position:relative;width:100%;border-radius:.375rem;border-width:1px;border-color:#0003;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));background-clip:padding-box;outline-width:0px;display:grid;max-height:100%;grid-template-rows:min-content 1fr min-content;overflow:hidden;--tw-shadow: 0 0 4px 0 rgba(0,0,0,.2), 0 3px 20px 0 rgba(0,0,0,.19);--tw-shadow-colored: 0 0 4px 0 var(--tw-shadow-color), 0 3px 20px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);animation:shown .3s ease-in-out forwards}.modal-container .modal-content .modal-header{border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1));padding:1rem}.modal-container .modal-content .modal-header .modal-close{position:absolute;top:0;right:0;margin:.5rem;cursor:pointer;padding:.5rem;opacity:.6}.modal-container .modal-content .modal-body{overflow:hidden;padding:1rem}.modal-container .modal-content .modal-footer{display:grid;grid-auto-columns:min-content;grid-auto-flow:column;justify-content:flex-end;gap:.25rem;white-space:nowrap;border-top-width:1px;--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1));padding:.75rem}.modal-container .modal-content .modal-footer>*,.modal-container .modal-content .modal-footer ::ng-deep div[footer]>*{display:grid;grid-auto-columns:min-content;grid-auto-flow:column;gap:.25rem}@keyframes hidden{0%{display:flex}to{display:none}}@keyframes shown{0%{opacity:0}to{opacity:1}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { closeButtonText: [{
                 type: Input
             }], dialog: [{
@@ -2941,17 +2853,13 @@ class MultiEditorComponent extends ModalComponent {
         super();
     }
     ngOnInit() {
-        this.dataGridDataset.loadFinished
-            .pipe(takeUntil(this.destroy$))
-            .subscribe(() => {
+        this.dataGridDataset.loadFinished.pipe(takeUntil(this.destroy$)).subscribe(() => {
             this.multiEditorDataset.clearChangedValues();
             this.gridLoading = false;
             this.selectedKey = undefined;
             this.selectedValue = undefined;
         });
-        this.dataGridDataset.selectedRowsChanged
-            .pipe(takeUntil(this.destroy$))
-            .subscribe(() => {
+        this.dataGridDataset.selectedRowsChanged.pipe(takeUntil(this.destroy$)).subscribe(() => {
             if (this.gridLoading || !this.dataGridDataset.hasLoadedRows || !this.dataGridDataset.hasSelectedRows) {
                 return;
             }
@@ -2959,7 +2867,10 @@ class MultiEditorComponent extends ModalComponent {
                 this.formGroup.enable();
             }
             const selectedRowKey = this.dataGridDataset.selectedRowKeys[0];
-            if (!!this.selectedKey && this.formGroup.enabled && !this.formGroup.valid && this.selectedKey !== selectedRowKey) {
+            if (!!this.selectedKey &&
+                this.formGroup.enabled &&
+                !this.formGroup.valid &&
+                this.selectedKey !== selectedRowKey) {
                 // If the form is invalid, need to stay in the same selected row.
                 this.dataGridDataset.selectRow(this.selectedKey);
                 this.formGroup.markAllAsTouched();
@@ -2972,9 +2883,7 @@ class MultiEditorComponent extends ModalComponent {
                 this.formGroup.patchValue(this.selectedValue);
             }
         });
-        this.formGroup.valueChanges
-            .pipe(takeUntil(this.destroy$))
-            .subscribe((_) => {
+        this.formGroup.valueChanges.pipe(takeUntil(this.destroy$)).subscribe((_) => {
             if (this.selectedKey && this.formGroup.dirty) {
                 this.multiEditorDataset.updateValues(this.selectedKey, this.formGroup.getRawValue());
             }
@@ -3025,7 +2934,8 @@ class MultiEditorComponent extends ModalComponent {
         if (!this.selectedKey || this.formGroup.valid) {
             this.modalProcessing = true;
             this.formGroup.disable();
-            this.multiEditorDataset.saveChanges()
+            this.multiEditorDataset
+                .saveChanges()
                 .pipe(take(1))
                 .subscribe({
                 next: (_) => {
@@ -3039,7 +2949,7 @@ class MultiEditorComponent extends ModalComponent {
                         this.dataGridDataset.selectRowID(e.error.entityKey);
                         this.formService.setValidationErrorsFromHttpResponse(e);
                     }
-                }
+                },
             });
         }
     }
@@ -3073,18 +2983,12 @@ class MultiEditorComponent extends ModalComponent {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MultiEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: MultiEditorComponent, isStandalone: true, selector: "lib-multi-editor", inputs: { addButtonLabel: "addButtonLabel", formGroup: "formGroup", removeButtonLabel: "removeButtonLabel", showAddButton: "showAddButton", showDeleteButton: "showDeleteButton" }, viewQueries: [{ propertyName: "modal", first: true, predicate: ModalComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-modal\n[closeButtonText]=\"closeButtonText | translate\"\n[dialog]=\"dialog\"\n[modalProcessing]=\"modalProcessing\"\n[position]=\"position\"\n[size]=\"size\"\n[title]=\"title\">\n    <div body class=\"body-content\">\n        <div class=\"data-grid\">\n            <lib-data-grid [disabled]=\"modalProcessing\" [lazyLoadRows]=\"true\"></lib-data-grid>\n        </div>\n\n        <div class=\"data\">\n            <div class=\"buttons\">\n                <button *ngIf=\"showAddButton\"\n                class=\"btn gray-500\"\n                type=\"button\"\n                [class.disabled]=\"modalProcessing || gridLoading || formLoading || formGroup.invalid\"\n                [disabled]=\"modalProcessing || gridLoading || formLoading || formGroup.invalid\"\n                (click)=\"onNewClick()\">\n                    {{ addButtonLabel }}\n                </button>\n\n                <button *ngIf=\"showDeleteButton && hasSelectedKey\"\n                class=\"btn red-500\"\n                type=\"button\"\n                [class.disabled]=\"modalProcessing || gridLoading || formLoading\"\n                [disabled]=\"modalProcessing || gridLoading || formLoading\"\n                (click)=\"onDeleteClick()\">\n                    {{ removeButtonLabel }}\n                </button>\n            </div>\n\n            <lib-form-group>\n                <ng-content></ng-content>\n            </lib-form-group>\n        </div>\n    </div>\n\n    <div footer>\n        <button\n        class=\"btn blue-500\"\n        type=\"button\"\n        [class.disabled]=\"gridLoading || formLoading\"\n        [class.loading]=\"modalProcessing\"\n        (click)=\"onSaveClick()\">\n            {{ 'Button-Modal-MultiEditor-Confirm' | translate }}\n        </button>\n    </div>\n</lib-modal>", styles: [".body-content{display:grid;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;gap:1rem;overflow:clip;overflow-clip-margin:4px}.data-grid{display:grid;-webkit-user-select:none;user-select:none;overflow:hidden}.data{display:grid;-webkit-user-select:none;user-select:none;overflow:clip;overflow-clip-margin:4px;min-height:24rem;grid-template-rows:min-content minmax(0,1fr);gap:.5rem}.data .buttons{display:grid;grid-auto-columns:auto;grid-auto-flow:column;gap:.5rem;border-bottom-color:#d1d5dbe6}\n"], dependencies: [{ kind: "component", type: DataGridComponent, selector: "lib-data-grid", inputs: ["disabled", "lazyLoadRows", "showButtons"] }, { kind: "component", type: ModalComponent, selector: "lib-modal", inputs: ["closeButtonText", "dialog", "modalProcessing", "position", "size", "title"], outputs: ["closed"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormGroupComponent, selector: "lib-form-group", inputs: ["shouldExpand", "label"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: MultiEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: MultiEditorComponent, isStandalone: true, selector: "lib-multi-editor", inputs: { addButtonLabel: "addButtonLabel", formGroup: "formGroup", removeButtonLabel: "removeButtonLabel", showAddButton: "showAddButton", showDeleteButton: "showDeleteButton" }, viewQueries: [{ propertyName: "modal", first: true, predicate: ModalComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-modal\n  [closeButtonText]=\"closeButtonText | translate\"\n  [dialog]=\"dialog\"\n  [modalProcessing]=\"modalProcessing\"\n  [position]=\"position\"\n  [size]=\"size\"\n  [title]=\"title\"\n>\n  <div body class=\"body-content\">\n    <div class=\"data-grid\">\n      <lib-data-grid [disabled]=\"modalProcessing\" [lazyLoadRows]=\"true\"></lib-data-grid>\n    </div>\n\n    <div class=\"data\">\n      <div class=\"buttons\">\n        @if (showAddButton) {\n          <button\n            class=\"btn gray-500\"\n            type=\"button\"\n            [class.disabled]=\"modalProcessing || gridLoading || formLoading || formGroup.invalid\"\n            [disabled]=\"modalProcessing || gridLoading || formLoading || formGroup.invalid\"\n            (click)=\"onNewClick()\"\n          >\n            {{ addButtonLabel }}\n          </button>\n        }\n        @if (showDeleteButton && hasSelectedKey) {\n          <button\n            class=\"btn red-500\"\n            type=\"button\"\n            [class.disabled]=\"modalProcessing || gridLoading || formLoading\"\n            [disabled]=\"modalProcessing || gridLoading || formLoading\"\n            (click)=\"onDeleteClick()\"\n          >\n            {{ removeButtonLabel }}\n          </button>\n        }\n      </div>\n\n      <lib-form-group>\n        <ng-content></ng-content>\n      </lib-form-group>\n    </div>\n  </div>\n\n  <div footer>\n    <button\n      class=\"btn blue-500\"\n      type=\"button\"\n      [class.disabled]=\"gridLoading || formLoading\"\n      [class.loading]=\"modalProcessing\"\n      (click)=\"onSaveClick()\"\n    >\n      {{ 'Button-Modal-MultiEditor-Confirm' | translate }}\n    </button>\n  </div>\n</lib-modal>\n", styles: [".body-content{display:grid;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;gap:1rem;overflow:clip;overflow-clip-margin:4px}.data-grid{display:grid;-webkit-user-select:none;user-select:none;overflow:hidden}.data{display:grid;-webkit-user-select:none;user-select:none;overflow:clip;overflow-clip-margin:4px;min-height:24rem;grid-template-rows:min-content minmax(0,1fr);gap:.5rem}.data .buttons{display:grid;grid-auto-columns:auto;grid-auto-flow:column;gap:.5rem;border-bottom-color:#d1d5dbe6}\n"], dependencies: [{ kind: "component", type: DataGridComponent, selector: "lib-data-grid", inputs: ["disabled", "lazyLoadRows", "showButtons"] }, { kind: "component", type: ModalComponent, selector: "lib-modal", inputs: ["closeButtonText", "dialog", "modalProcessing", "position", "size", "title"], outputs: ["closed"] }, { kind: "component", type: FormGroupComponent, selector: "lib-form-group", inputs: ["shouldExpand", "label"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MultiEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: MultiEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-multi-editor', imports: [
-                        DataGridComponent,
-                        ModalComponent,
-                        NgIf,
-                        FormGroupComponent,
-                        TranslatePipe,
-                    ], template: "<lib-modal\n[closeButtonText]=\"closeButtonText | translate\"\n[dialog]=\"dialog\"\n[modalProcessing]=\"modalProcessing\"\n[position]=\"position\"\n[size]=\"size\"\n[title]=\"title\">\n    <div body class=\"body-content\">\n        <div class=\"data-grid\">\n            <lib-data-grid [disabled]=\"modalProcessing\" [lazyLoadRows]=\"true\"></lib-data-grid>\n        </div>\n\n        <div class=\"data\">\n            <div class=\"buttons\">\n                <button *ngIf=\"showAddButton\"\n                class=\"btn gray-500\"\n                type=\"button\"\n                [class.disabled]=\"modalProcessing || gridLoading || formLoading || formGroup.invalid\"\n                [disabled]=\"modalProcessing || gridLoading || formLoading || formGroup.invalid\"\n                (click)=\"onNewClick()\">\n                    {{ addButtonLabel }}\n                </button>\n\n                <button *ngIf=\"showDeleteButton && hasSelectedKey\"\n                class=\"btn red-500\"\n                type=\"button\"\n                [class.disabled]=\"modalProcessing || gridLoading || formLoading\"\n                [disabled]=\"modalProcessing || gridLoading || formLoading\"\n                (click)=\"onDeleteClick()\">\n                    {{ removeButtonLabel }}\n                </button>\n            </div>\n\n            <lib-form-group>\n                <ng-content></ng-content>\n            </lib-form-group>\n        </div>\n    </div>\n\n    <div footer>\n        <button\n        class=\"btn blue-500\"\n        type=\"button\"\n        [class.disabled]=\"gridLoading || formLoading\"\n        [class.loading]=\"modalProcessing\"\n        (click)=\"onSaveClick()\">\n            {{ 'Button-Modal-MultiEditor-Confirm' | translate }}\n        </button>\n    </div>\n</lib-modal>", styles: [".body-content{display:grid;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;gap:1rem;overflow:clip;overflow-clip-margin:4px}.data-grid{display:grid;-webkit-user-select:none;user-select:none;overflow:hidden}.data{display:grid;-webkit-user-select:none;user-select:none;overflow:clip;overflow-clip-margin:4px;min-height:24rem;grid-template-rows:min-content minmax(0,1fr);gap:.5rem}.data .buttons{display:grid;grid-auto-columns:auto;grid-auto-flow:column;gap:.5rem;border-bottom-color:#d1d5dbe6}\n"] }]
+            args: [{ selector: 'lib-multi-editor', changeDetection: ChangeDetectionStrategy.Eager, imports: [DataGridComponent, ModalComponent, FormGroupComponent, TranslatePipe], template: "<lib-modal\n  [closeButtonText]=\"closeButtonText | translate\"\n  [dialog]=\"dialog\"\n  [modalProcessing]=\"modalProcessing\"\n  [position]=\"position\"\n  [size]=\"size\"\n  [title]=\"title\"\n>\n  <div body class=\"body-content\">\n    <div class=\"data-grid\">\n      <lib-data-grid [disabled]=\"modalProcessing\" [lazyLoadRows]=\"true\"></lib-data-grid>\n    </div>\n\n    <div class=\"data\">\n      <div class=\"buttons\">\n        @if (showAddButton) {\n          <button\n            class=\"btn gray-500\"\n            type=\"button\"\n            [class.disabled]=\"modalProcessing || gridLoading || formLoading || formGroup.invalid\"\n            [disabled]=\"modalProcessing || gridLoading || formLoading || formGroup.invalid\"\n            (click)=\"onNewClick()\"\n          >\n            {{ addButtonLabel }}\n          </button>\n        }\n        @if (showDeleteButton && hasSelectedKey) {\n          <button\n            class=\"btn red-500\"\n            type=\"button\"\n            [class.disabled]=\"modalProcessing || gridLoading || formLoading\"\n            [disabled]=\"modalProcessing || gridLoading || formLoading\"\n            (click)=\"onDeleteClick()\"\n          >\n            {{ removeButtonLabel }}\n          </button>\n        }\n      </div>\n\n      <lib-form-group>\n        <ng-content></ng-content>\n      </lib-form-group>\n    </div>\n  </div>\n\n  <div footer>\n    <button\n      class=\"btn blue-500\"\n      type=\"button\"\n      [class.disabled]=\"gridLoading || formLoading\"\n      [class.loading]=\"modalProcessing\"\n      (click)=\"onSaveClick()\"\n    >\n      {{ 'Button-Modal-MultiEditor-Confirm' | translate }}\n    </button>\n  </div>\n</lib-modal>\n", styles: [".body-content{display:grid;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;gap:1rem;overflow:clip;overflow-clip-margin:4px}.data-grid{display:grid;-webkit-user-select:none;user-select:none;overflow:hidden}.data{display:grid;-webkit-user-select:none;user-select:none;overflow:clip;overflow-clip-margin:4px;min-height:24rem;grid-template-rows:min-content minmax(0,1fr);gap:.5rem}.data .buttons{display:grid;grid-auto-columns:auto;grid-auto-flow:column;gap:.5rem;border-bottom-color:#d1d5dbe6}\n"] }]
         }], ctorParameters: () => [], propDecorators: { modal: [{
                 type: ViewChild,
                 args: [ModalComponent]
@@ -3117,14 +3021,10 @@ class MultiSelectResultGridComponent extends BaseComponent {
         super();
     }
     ngOnInit() {
-        this.resultDataset.loadStarted
-            .pipe(takeUntil(this.destroy$))
-            .subscribe(() => {
+        this.resultDataset.loadStarted.pipe(takeUntil(this.destroy$)).subscribe(() => {
             this.isLoading = true;
         });
-        this.resultDataset.loadFinished
-            .pipe(takeUntil(this.destroy$))
-            .subscribe(() => {
+        this.resultDataset.loadFinished.pipe(takeUntil(this.destroy$)).subscribe(() => {
             this.isLoading = false;
         });
     }
@@ -3142,19 +3042,14 @@ class MultiSelectResultGridComponent extends BaseComponent {
             this.resultDataset.loadRows();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MultiSelectResultGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: MultiSelectResultGridComponent, isStandalone: true, selector: "lib-multi-select-result-grid", inputs: { isDisabled: "isDisabled", template: "template" }, host: { classAttribute: "flex-grow" }, usesInheritance: true, ngImport: i0, template: "<div\nclass=\"body\"\n(scroll)=\"onScrolled($event)\">\n    <div\n    class=\"row\"\n    *ngFor=\"let row of resultDataset.displayedRows; let i = index\">\n        <div class=\"cell\">\n            <button\n            class=\"remove\"\n            type=\"button\"\n            [class.disabled]=\"isDisabled\"\n            [disabled]=\"isDisabled\"\n            (click)=\"onItemRemoved(i)\">\n                <i class=\"fas fa-times\"></i>\n            </button>\n        </div> \n\n        <div class=\"cell\">\n            <div>\n                <ng-container *ngTemplateOutlet=\"template; context: { rowData: row }\">\n                </ng-container>\n            </div>\n        </div>\n    </div>\n\n    <div\n    class=\"loading\"\n    *ngIf=\"isLoading\">\n        <svg [ngClass]=\"''\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n            <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n            <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n        </svg>\n\n        <span>\n            {{ resultDataset.configs.loadingDisplayText ?? '' | translate }} \n        </span>\n    </div>\n</div>", styles: [":host-context{display:grid;-webkit-user-select:none;user-select:none;grid-template-rows:auto 1fr;overflow:hidden}:host-context:not(.no-borders){border-radius:.5rem;border-width:1px;border-color:#d1d5dbe6;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.body{overflow:overlay}.body .row{border-bottom-width:1px;border-color:#cbd5e180;margin-top:0;cursor:pointer;display:grid;grid-auto-flow:column;grid-template-columns:min-content minmax(0,1fr);gap:1rem;padding:.5rem 1rem}.body .row:nth-child(2n){background-color:#f8fafcb3}.body .row:hover{background-color:#bfdbfe33}.body .row.focused{z-index:1;border-color:#94a3b899}.body .row.selected{position:relative;z-index:10;--tw-border-opacity: 1;border-color:rgb(147 197 253 / var(--tw-border-opacity, 1));background-color:#bfdbfe4d}.body .row.selected:hover{background-color:#bfdbfe66}.body .row .cell{white-space:nowrap;display:flex;align-items:center}.body .row .cell a{padding-left:.5rem;padding-right:.5rem;font-size:1.125rem;line-height:1.75rem}.body .row .cell a:not(.disabled){cursor:pointer}.body .row .cell a.disabled{--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.body .row .cell .remove{--tw-text-opacity: 1;color:rgb(239 68 68 / var(--tw-text-opacity, 1));cursor:pointer;border-style:none;background-color:transparent;padding:0}.body .row .cell.disabled{pointer-events:none;cursor:default;opacity:.6}.body .row .cell>*{overflow:hidden;text-overflow:ellipsis}.body .row .cell div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.body .loading{margin-bottom:.5rem;display:flex;height:2.5rem;align-items:center;border-bottom-width:1px;border-color:#cbd5e180;padding-left:1rem;padding-right:1rem}.body .loading svg{height:1.5rem;width:1.5rem}@keyframes spin{to{transform:rotate(360deg)}}.body .loading svg{animation:spin 1s linear infinite;transition-property:opacity;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.body .loading span{padding-left:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: MultiSelectResultGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: MultiSelectResultGridComponent, isStandalone: true, selector: "lib-multi-select-result-grid", inputs: { isDisabled: "isDisabled", template: "template" }, host: { classAttribute: "flex-grow" }, usesInheritance: true, ngImport: i0, template: "<div class=\"body\" (scroll)=\"onScrolled($event)\">\n  @for (row of resultDataset.displayedRows; track row; let i = $index) {\n    <div class=\"row\">\n      <div class=\"cell\">\n        <button\n          class=\"remove\"\n          type=\"button\"\n          [class.disabled]=\"isDisabled\"\n          [disabled]=\"isDisabled\"\n          (click)=\"onItemRemoved(i)\"\n        >\n          <i class=\"fas fa-times\"></i>\n        </button>\n      </div>\n      <div class=\"cell\">\n        <div>\n          <ng-container *ngTemplateOutlet=\"template; context: { rowData: row }\"> </ng-container>\n        </div>\n      </div>\n    </div>\n  }\n  @if (isLoading) {\n    <div class=\"loading\">\n      <svg [ngClass]=\"''\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n        <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n        <path\n          class=\"opacity-75\"\n          fill=\"currentColor\"\n          d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n        ></path>\n      </svg>\n      <span>\n        {{ resultDataset.configs.loadingDisplayText ?? '' | translate }}\n      </span>\n    </div>\n  }\n</div>\n", styles: [":host-context{display:grid;-webkit-user-select:none;user-select:none;grid-template-rows:auto 1fr;overflow:hidden}:host-context:not(.no-borders){border-radius:.5rem;border-width:1px;border-color:#d1d5dbe6;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.body{overflow:overlay}.body .row{border-bottom-width:1px;border-color:#cbd5e180;margin-top:0;cursor:pointer;display:grid;grid-auto-flow:column;grid-template-columns:min-content minmax(0,1fr);gap:1rem;padding:.5rem 1rem}.body .row:nth-child(2n){background-color:#f8fafcb3}.body .row:hover{background-color:#bfdbfe33}.body .row.focused{z-index:1;border-color:#94a3b899}.body .row.selected{position:relative;z-index:10;--tw-border-opacity: 1;border-color:rgb(147 197 253 / var(--tw-border-opacity, 1));background-color:#bfdbfe4d}.body .row.selected:hover{background-color:#bfdbfe66}.body .row .cell{white-space:nowrap;display:flex;align-items:center}.body .row .cell a{padding-left:.5rem;padding-right:.5rem;font-size:1.125rem;line-height:1.75rem}.body .row .cell a:not(.disabled){cursor:pointer}.body .row .cell a.disabled{--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.body .row .cell .remove{--tw-text-opacity: 1;color:rgb(239 68 68 / var(--tw-text-opacity, 1));cursor:pointer;border-style:none;background-color:transparent;padding:0}.body .row .cell.disabled{pointer-events:none;cursor:default;opacity:.6}.body .row .cell>*{overflow:hidden;text-overflow:ellipsis}.body .row .cell div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.body .loading{margin-bottom:.5rem;display:flex;height:2.5rem;align-items:center;border-bottom-width:1px;border-color:#cbd5e180;padding-left:1rem;padding-right:1rem}.body .loading svg{height:1.5rem;width:1.5rem}@keyframes spin{to{transform:rotate(360deg)}}.body .loading svg{animation:spin 1s linear infinite;transition-property:opacity;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.body .loading span{padding-left:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MultiSelectResultGridComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: MultiSelectResultGridComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-multi-select-result-grid', host: {
-                        'class': 'flex-grow'
-                    }, imports: [
-                        CommonModule,
-                        NgFor,
-                        NgIf,
-                        TranslatePipe,
-                    ], template: "<div\nclass=\"body\"\n(scroll)=\"onScrolled($event)\">\n    <div\n    class=\"row\"\n    *ngFor=\"let row of resultDataset.displayedRows; let i = index\">\n        <div class=\"cell\">\n            <button\n            class=\"remove\"\n            type=\"button\"\n            [class.disabled]=\"isDisabled\"\n            [disabled]=\"isDisabled\"\n            (click)=\"onItemRemoved(i)\">\n                <i class=\"fas fa-times\"></i>\n            </button>\n        </div> \n\n        <div class=\"cell\">\n            <div>\n                <ng-container *ngTemplateOutlet=\"template; context: { rowData: row }\">\n                </ng-container>\n            </div>\n        </div>\n    </div>\n\n    <div\n    class=\"loading\"\n    *ngIf=\"isLoading\">\n        <svg [ngClass]=\"''\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n            <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n            <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n        </svg>\n\n        <span>\n            {{ resultDataset.configs.loadingDisplayText ?? '' | translate }} \n        </span>\n    </div>\n</div>", styles: [":host-context{display:grid;-webkit-user-select:none;user-select:none;grid-template-rows:auto 1fr;overflow:hidden}:host-context:not(.no-borders){border-radius:.5rem;border-width:1px;border-color:#d1d5dbe6;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.body{overflow:overlay}.body .row{border-bottom-width:1px;border-color:#cbd5e180;margin-top:0;cursor:pointer;display:grid;grid-auto-flow:column;grid-template-columns:min-content minmax(0,1fr);gap:1rem;padding:.5rem 1rem}.body .row:nth-child(2n){background-color:#f8fafcb3}.body .row:hover{background-color:#bfdbfe33}.body .row.focused{z-index:1;border-color:#94a3b899}.body .row.selected{position:relative;z-index:10;--tw-border-opacity: 1;border-color:rgb(147 197 253 / var(--tw-border-opacity, 1));background-color:#bfdbfe4d}.body .row.selected:hover{background-color:#bfdbfe66}.body .row .cell{white-space:nowrap;display:flex;align-items:center}.body .row .cell a{padding-left:.5rem;padding-right:.5rem;font-size:1.125rem;line-height:1.75rem}.body .row .cell a:not(.disabled){cursor:pointer}.body .row .cell a.disabled{--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.body .row .cell .remove{--tw-text-opacity: 1;color:rgb(239 68 68 / var(--tw-text-opacity, 1));cursor:pointer;border-style:none;background-color:transparent;padding:0}.body .row .cell.disabled{pointer-events:none;cursor:default;opacity:.6}.body .row .cell>*{overflow:hidden;text-overflow:ellipsis}.body .row .cell div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.body .loading{margin-bottom:.5rem;display:flex;height:2.5rem;align-items:center;border-bottom-width:1px;border-color:#cbd5e180;padding-left:1rem;padding-right:1rem}.body .loading svg{height:1.5rem;width:1.5rem}@keyframes spin{to{transform:rotate(360deg)}}.body .loading svg{animation:spin 1s linear infinite;transition-property:opacity;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.body .loading span{padding-left:.5rem}\n"] }]
+                        class: 'flex-grow',
+                    }, changeDetection: ChangeDetectionStrategy.Eager, imports: [CommonModule, TranslatePipe], template: "<div class=\"body\" (scroll)=\"onScrolled($event)\">\n  @for (row of resultDataset.displayedRows; track row; let i = $index) {\n    <div class=\"row\">\n      <div class=\"cell\">\n        <button\n          class=\"remove\"\n          type=\"button\"\n          [class.disabled]=\"isDisabled\"\n          [disabled]=\"isDisabled\"\n          (click)=\"onItemRemoved(i)\"\n        >\n          <i class=\"fas fa-times\"></i>\n        </button>\n      </div>\n      <div class=\"cell\">\n        <div>\n          <ng-container *ngTemplateOutlet=\"template; context: { rowData: row }\"> </ng-container>\n        </div>\n      </div>\n    </div>\n  }\n  @if (isLoading) {\n    <div class=\"loading\">\n      <svg [ngClass]=\"''\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n        <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n        <path\n          class=\"opacity-75\"\n          fill=\"currentColor\"\n          d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n        ></path>\n      </svg>\n      <span>\n        {{ resultDataset.configs.loadingDisplayText ?? '' | translate }}\n      </span>\n    </div>\n  }\n</div>\n", styles: [":host-context{display:grid;-webkit-user-select:none;user-select:none;grid-template-rows:auto 1fr;overflow:hidden}:host-context:not(.no-borders){border-radius:.5rem;border-width:1px;border-color:#d1d5dbe6;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.body{overflow:overlay}.body .row{border-bottom-width:1px;border-color:#cbd5e180;margin-top:0;cursor:pointer;display:grid;grid-auto-flow:column;grid-template-columns:min-content minmax(0,1fr);gap:1rem;padding:.5rem 1rem}.body .row:nth-child(2n){background-color:#f8fafcb3}.body .row:hover{background-color:#bfdbfe33}.body .row.focused{z-index:1;border-color:#94a3b899}.body .row.selected{position:relative;z-index:10;--tw-border-opacity: 1;border-color:rgb(147 197 253 / var(--tw-border-opacity, 1));background-color:#bfdbfe4d}.body .row.selected:hover{background-color:#bfdbfe66}.body .row .cell{white-space:nowrap;display:flex;align-items:center}.body .row .cell a{padding-left:.5rem;padding-right:.5rem;font-size:1.125rem;line-height:1.75rem}.body .row .cell a:not(.disabled){cursor:pointer}.body .row .cell a.disabled{--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.body .row .cell .remove{--tw-text-opacity: 1;color:rgb(239 68 68 / var(--tw-text-opacity, 1));cursor:pointer;border-style:none;background-color:transparent;padding:0}.body .row .cell.disabled{pointer-events:none;cursor:default;opacity:.6}.body .row .cell>*{overflow:hidden;text-overflow:ellipsis}.body .row .cell div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.body .loading{margin-bottom:.5rem;display:flex;height:2.5rem;align-items:center;border-bottom-width:1px;border-color:#cbd5e180;padding-left:1rem;padding-right:1rem}.body .loading svg{height:1.5rem;width:1.5rem}@keyframes spin{to{transform:rotate(360deg)}}.body .loading svg{animation:spin 1s linear infinite;transition-property:opacity;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.body .loading span{padding-left:.5rem}\n"] }]
         }], ctorParameters: () => [], propDecorators: { isDisabled: [{
                 type: Input
             }], template: [{
@@ -3191,20 +3086,14 @@ class MultiSelectComponent extends ModalComponent {
         this.closeButtonText = 'Button-Modal-Cancel';
     }
     ngOnInit() {
-        this.dataGridDataset.loadStarted
-            .pipe(takeUntil(this.destroy$))
-            .subscribe(() => {
+        this.dataGridDataset.loadStarted.pipe(takeUntil(this.destroy$)).subscribe(() => {
             this.isSearchGridLoading = true;
         });
-        this.dataGridDataset.loadFinished
-            .pipe(takeUntil(this.destroy$))
-            .subscribe(() => {
+        this.dataGridDataset.loadFinished.pipe(takeUntil(this.destroy$)).subscribe(() => {
             this.isSearchGridLoading = false;
             this.updateSelectedItems();
         });
-        this.resultDataset.loadFinished
-            .pipe(takeUntil(this.destroy$))
-            .subscribe(() => {
+        this.resultDataset.loadFinished.pipe(takeUntil(this.destroy$)).subscribe(() => {
             this.isResultGridLoading = false;
             this.updateSelectedItems();
         });
@@ -3214,8 +3103,7 @@ class MultiSelectComponent extends ModalComponent {
             if (this.isSearchGridLoading || this.isResultGridLoading) {
                 return;
             }
-            Object.keys(selectionChanges)
-                .forEach((key) => {
+            Object.keys(selectionChanges).forEach((key) => {
                 const selection = selectionChanges[key];
                 const id = this.dataGridDataset.getRowID(key);
                 if (selection.selected) {
@@ -3231,7 +3119,8 @@ class MultiSelectComponent extends ModalComponent {
     //#region Event handlers
     onSave() {
         this.modalProcessing = true;
-        this.resultDataset.saveChanges()
+        this.resultDataset
+            .saveChanges()
             .pipe(take(1))
             .subscribe(() => {
             this.modalProcessing = false;
@@ -3282,22 +3171,15 @@ class MultiSelectComponent extends ModalComponent {
             .filter((id) => this.resultDataset.idsToRemove.indexOf(id) < 0);
         idsFromResult.push(...this.resultDataset.idsToAdd);
         // Get each corresponding key from the data grid.
-        const keysToSelect = (this.dataGridDataset.loadedKeys ?? [])
-            .filter((key) => idsFromResult.indexOf(this.dataGridDataset.getRowID(key)) >= 0);
+        const keysToSelect = (this.dataGridDataset.loadedKeys ?? []).filter((key) => idsFromResult.indexOf(this.dataGridDataset.getRowID(key)) >= 0);
         this.dataGridDataset.selectRows(keysToSelect);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: MultiSelectComponent, isStandalone: true, selector: "lib-multi-select", inputs: { itemTemplate: "itemTemplate" }, viewQueries: [{ propertyName: "modal", first: true, predicate: ModalComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-modal\n[closeButtonText]=\"closeButtonText | translate\"\n[dialog]=\"dialog\"\n[modalProcessing]=\"modalProcessing\"\n[position]=\"position\"\n[size]=\"size\"\n[title]=\"title\">\n    <div body class=\"body-content\">\n        <div class=\"search-grid\">\n            <div class=\"search\">\n                <input\n                class=\"form-input\"\n                placeholder=\"Search...\"\n                type=\"text\"\n                [(ngModel)]=\"searchCriteria\"\n                [disabled]=\"modalProcessing || isSearchGridLoading\"\n                (keydown.enter)=\"onSearch()\" />\n            </div>\n            \n            <lib-data-grid\n            [disabled]=\"modalProcessing || isSearchGridLoading || isResultGridLoading\"\n            [lazyLoadRows]=\"true\">\n            </lib-data-grid>\n        </div>\n\n        <lib-multi-select-result-grid\n        [isDisabled]=\"modalProcessing || isSearchGridLoading || isResultGridLoading\"\n        [template]=\"itemTemplate\">\n        </lib-multi-select-result-grid>\n    </div>\n\n    <div footer>\n        <button\n        class=\"btn blue-500\"\n        type=\"button\"\n        [class.loading]=\"modalProcessing\"\n        (click)=\"onSave()\">\n            {{ 'Button-Modal-MultiSelect-Confirm' | translate }}\n        </button>\n    </div>\n</lib-modal>", styles: [".body-content{display:grid;height:100%;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;gap:1rem;grid-template-rows:min-content minmax(0,1fr);grid-auto-flow:row!important;overflow:clip;overflow-clip-margin:4px}.search-grid{display:grid;grid-template-rows:subgrid}.search-grid,lib-multi-select-result-grid{grid-row:1 / -1}lib-multi-select-result-grid{min-height:24rem}\n"], dependencies: [{ kind: "component", type: DataGridComponent, selector: "lib-data-grid", inputs: ["disabled", "lazyLoadRows", "showButtons"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$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: ModalComponent, selector: "lib-modal", inputs: ["closeButtonText", "dialog", "modalProcessing", "position", "size", "title"], outputs: ["closed"] }, { kind: "component", type: MultiSelectResultGridComponent, selector: "lib-multi-select-result-grid", inputs: ["isDisabled", "template"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: MultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: MultiSelectComponent, isStandalone: true, selector: "lib-multi-select", inputs: { itemTemplate: "itemTemplate" }, viewQueries: [{ propertyName: "modal", first: true, predicate: ModalComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-modal\n  [closeButtonText]=\"closeButtonText | translate\"\n  [dialog]=\"dialog\"\n  [modalProcessing]=\"modalProcessing\"\n  [position]=\"position\"\n  [size]=\"size\"\n  [title]=\"title\"\n>\n  <div body class=\"body-content\">\n    <div class=\"search-grid\">\n      <div class=\"search\">\n        <input\n          class=\"form-input\"\n          placeholder=\"Search...\"\n          type=\"text\"\n          [(ngModel)]=\"searchCriteria\"\n          [disabled]=\"modalProcessing || isSearchGridLoading\"\n          (keydown.enter)=\"onSearch()\"\n        />\n      </div>\n\n      <lib-data-grid [disabled]=\"modalProcessing || isSearchGridLoading || isResultGridLoading\" [lazyLoadRows]=\"true\">\n      </lib-data-grid>\n    </div>\n\n    <lib-multi-select-result-grid\n      [isDisabled]=\"modalProcessing || isSearchGridLoading || isResultGridLoading\"\n      [template]=\"itemTemplate\"\n    >\n    </lib-multi-select-result-grid>\n  </div>\n\n  <div footer>\n    <button class=\"btn blue-500\" type=\"button\" [class.loading]=\"modalProcessing\" (click)=\"onSave()\">\n      {{ 'Button-Modal-MultiSelect-Confirm' | translate }}\n    </button>\n  </div>\n</lib-modal>\n", styles: [".body-content{display:grid;height:100%;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;gap:1rem;grid-template-rows:min-content minmax(0,1fr);grid-auto-flow:row!important;overflow:clip;overflow-clip-margin:4px}.search-grid{display:grid;grid-template-rows:subgrid}.search-grid,lib-multi-select-result-grid{grid-row:1 / -1}lib-multi-select-result-grid{min-height:24rem}\n"], dependencies: [{ kind: "component", type: DataGridComponent, selector: "lib-data-grid", inputs: ["disabled", "lazyLoadRows", "showButtons"] }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ModalComponent, selector: "lib-modal", inputs: ["closeButtonText", "dialog", "modalProcessing", "position", "size", "title"], outputs: ["closed"] }, { kind: "component", type: MultiSelectResultGridComponent, selector: "lib-multi-select-result-grid", inputs: ["isDisabled", "template"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MultiSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: MultiSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-multi-select', imports: [
-                        DataGridComponent,
-                        FormsModule,
-                        ModalComponent,
-                        MultiSelectResultGridComponent,
-                        TranslatePipe,
-                    ], template: "<lib-modal\n[closeButtonText]=\"closeButtonText | translate\"\n[dialog]=\"dialog\"\n[modalProcessing]=\"modalProcessing\"\n[position]=\"position\"\n[size]=\"size\"\n[title]=\"title\">\n    <div body class=\"body-content\">\n        <div class=\"search-grid\">\n            <div class=\"search\">\n                <input\n                class=\"form-input\"\n                placeholder=\"Search...\"\n                type=\"text\"\n                [(ngModel)]=\"searchCriteria\"\n                [disabled]=\"modalProcessing || isSearchGridLoading\"\n                (keydown.enter)=\"onSearch()\" />\n            </div>\n            \n            <lib-data-grid\n            [disabled]=\"modalProcessing || isSearchGridLoading || isResultGridLoading\"\n            [lazyLoadRows]=\"true\">\n            </lib-data-grid>\n        </div>\n\n        <lib-multi-select-result-grid\n        [isDisabled]=\"modalProcessing || isSearchGridLoading || isResultGridLoading\"\n        [template]=\"itemTemplate\">\n        </lib-multi-select-result-grid>\n    </div>\n\n    <div footer>\n        <button\n        class=\"btn blue-500\"\n        type=\"button\"\n        [class.loading]=\"modalProcessing\"\n        (click)=\"onSave()\">\n            {{ 'Button-Modal-MultiSelect-Confirm' | translate }}\n        </button>\n    </div>\n</lib-modal>", styles: [".body-content{display:grid;height:100%;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;gap:1rem;grid-template-rows:min-content minmax(0,1fr);grid-auto-flow:row!important;overflow:clip;overflow-clip-margin:4px}.search-grid{display:grid;grid-template-rows:subgrid}.search-grid,lib-multi-select-result-grid{grid-row:1 / -1}lib-multi-select-result-grid{min-height:24rem}\n"] }]
+            args: [{ selector: 'lib-multi-select', changeDetection: ChangeDetectionStrategy.Eager, imports: [DataGridComponent, FormsModule, ModalComponent, MultiSelectResultGridComponent, TranslatePipe], template: "<lib-modal\n  [closeButtonText]=\"closeButtonText | translate\"\n  [dialog]=\"dialog\"\n  [modalProcessing]=\"modalProcessing\"\n  [position]=\"position\"\n  [size]=\"size\"\n  [title]=\"title\"\n>\n  <div body class=\"body-content\">\n    <div class=\"search-grid\">\n      <div class=\"search\">\n        <input\n          class=\"form-input\"\n          placeholder=\"Search...\"\n          type=\"text\"\n          [(ngModel)]=\"searchCriteria\"\n          [disabled]=\"modalProcessing || isSearchGridLoading\"\n          (keydown.enter)=\"onSearch()\"\n        />\n      </div>\n\n      <lib-data-grid [disabled]=\"modalProcessing || isSearchGridLoading || isResultGridLoading\" [lazyLoadRows]=\"true\">\n      </lib-data-grid>\n    </div>\n\n    <lib-multi-select-result-grid\n      [isDisabled]=\"modalProcessing || isSearchGridLoading || isResultGridLoading\"\n      [template]=\"itemTemplate\"\n    >\n    </lib-multi-select-result-grid>\n  </div>\n\n  <div footer>\n    <button class=\"btn blue-500\" type=\"button\" [class.loading]=\"modalProcessing\" (click)=\"onSave()\">\n      {{ 'Button-Modal-MultiSelect-Confirm' | translate }}\n    </button>\n  </div>\n</lib-modal>\n", styles: [".body-content{display:grid;height:100%;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;gap:1rem;grid-template-rows:min-content minmax(0,1fr);grid-auto-flow:row!important;overflow:clip;overflow-clip-margin:4px}.search-grid{display:grid;grid-template-rows:subgrid}.search-grid,lib-multi-select-result-grid{grid-row:1 / -1}lib-multi-select-result-grid{min-height:24rem}\n"] }]
         }], ctorParameters: () => [], propDecorators: { modal: [{
                 type: ViewChild,
                 args: [ModalComponent]
@@ -3341,8 +3223,8 @@ class SidebarItemComponent extends BaseComponent {
         return this.menu.childCount > 0;
     }
     get opensInNewBrowserTab() {
-        return (this.menu.url?.length ?? 0) > 0
-            && toSidebarMenuOpenMode(this.menu.openMode) === SidebarMenuOpenMode.ExternalNewTab;
+        return ((this.menu.url?.length ?? 0) > 0 &&
+            toSidebarMenuOpenMode(this.menu.openMode) === SidebarMenuOpenMode.ExternalNewTab);
     }
     get hasIcon() {
         return !!this.menu.icon && this.menu.icon.length > 0;
@@ -3418,23 +3300,18 @@ class SidebarItemComponent extends BaseComponent {
     updateSubMenuHeight() {
         this._childHeight = this.getChildHeight(this.menu);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: SidebarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: SidebarItemComponent, isStandalone: true, selector: "lib-sidebar-item", inputs: { isLast: "isLast", level: "level", menu: "menu" }, host: { properties: { "class.active": "isActive", "class.expanded": "!isCollapsed", "class.first-level": "level === 0", "class.last-child": "isLast", "class.selected": "isSelected" } }, viewQueries: [{ propertyName: "menuContainer", first: true, predicate: ["menuContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<li>\n    <div #menuContainer\n    [class.external]=\"opensInNewBrowserTab\"\n    [class.failed]=\"hasFailed\"\n    [class.loading]=\"isLoading\"\n    [class.parent]=\"isParent\"\n    [class.selected]=\"isSelected\"\n    role=\"button\"\n    tabindex=\"0\"\n    [attr.aria-current]=\"isSelected\"\n    (click)=\"onSelectItem()\"\n    (keydown.enter)=\"onSelectItem()\"\n    (keydown.space)=\"onSelectItem(); $event.preventDefault()\">\n        <a [attr.title]=\"opensInNewBrowserTab ? externalLinkText : null\">\n            <i *ngIf=\"hasIcon && level === 0\" class=\"fa-solid fa-fw {{ menu.icon }}\"></i>\n            <span>{{ menu.label | translate }}</span>\n        </a>\n\n        <div class=\"loading\" *ngIf=\"isParent\">\n            <svg class=\"animate-spin text-white\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n                <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n                <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n            </svg>\n        </div>\n    </div>\n\n    <ul *ngIf=\"isParent\"\n    [class.open]=\"isSelected\"\n    [ngStyle]=\"{\n        'height.px': childHeight,\n        'max-height.px': childHeight\n    }\">\n        <lib-sidebar-item *ngFor=\"let child of menu.children; trackBy: trackByFn; let last = last\"\n        [menu]=\"child\"\n        [level]=\"level+1\"\n        [isLast]=\"last\">\n        </lib-sidebar-item>\n    </ul>\n</li>", styles: ["@charset \"UTF-8\";:host{position:relative;display:block}@media (max-width: 767px){:host:not(.active) li>ul{height:0px!important}}@media (min-width: 768px){:host:not(.expanded):not(.active) li>ul{height:0px!important}:host.expanded li>div{margin-inline:.5rem}:host.expanded li>div.external:after{opacity:1}:host.expanded li>div.external a{padding-right:2rem}:host.expanded li>div.parent:not(.loading):after{opacity:1}:host.expanded li>div.parent a{padding-right:2rem}:host.expanded li>div.parent.loading .loading{opacity:1!important}:host.expanded li>div a i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.expanded li>div a span{opacity:1}}:host.active li>div{margin-inline:.5rem}:host.active li>div.external:after{opacity:1}:host.active li>div.external a{padding-right:2rem}:host.active li>div.parent:not(.loading):after{opacity:1}:host.active li>div.parent a{padding-right:2rem}:host.active li>div.parent.loading .loading{opacity:1!important}:host.active li>div a i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.active li>div a span{opacity:1}:host.expanded li .selected:not(.loading).parent:after,:host.active li .selected:not(.loading).parent:after{--tw-rotate: -90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}li{position:relative;height:100%}li>div{position:relative;overflow:hidden;height:var(--sidebar-item-height);line-height:var(--sidebar-item-height);border-radius:var(--sidebar-item-radius);transition-property:margin,background-color;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration)}li>div:hover{background-color:var(--sidebar-item-hover-bg)}li>div.selected{background-color:var(--sidebar-item-selected-bg);color:var(--sidebar-item-selected-text)}li>div.external:after{position:absolute;top:0;right:.75rem;width:10px;font-size:.75rem;line-height:1rem;font-weight:800;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:0;--tw-content: \"\\f08e\";content:var(--tw-content);font-family:\"Font Awesome 6 Free\";transition-duration:var(--sidebar-animation-duration);will-change:opacity}li>div.parent:after{position:absolute;top:0;right:.75rem;width:10px;font-weight:800;transition-property:opacity,transform;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:0;font-family:\"Font Awesome 6 Free\";transition-duration:var(--sidebar-animation-duration);will-change:opacity,transform}li>div.parent:not(.failed):after{--tw-content: \"\\f104\";content:var(--tw-content)}li>div.parent.failed:after{right:1rem;--tw-content: \"\\f071\";content:var(--tw-content)}li>div a{display:block;height:100%;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:.75rem;padding-right:.75rem;text-align:left;width:var(--sidebar-expanded-width)}li>div a i{margin-right:.5rem;font-size:1.25rem;line-height:1.75rem;transition-property:font-size,line-height,margin-left;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);margin-left:var(--sidebar-icon-collapsed-margin);transition-duration:var(--sidebar-animation-duration);will-change:font-size,line-height,margin-left}li>div a span{text-overflow:ellipsis;opacity:0;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:opacity}li>div .loading{position:absolute;top:0;right:.55rem;height:100%;width:1rem;opacity:0;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:opacity}li>div .loading svg{height:100%;width:100%}li>ul{overflow:hidden;transition-property:height,max-height;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:height,max-height}li>ul a{padding-left:1.25rem}:host(:not(.first-level)) li>div>a{position:relative;padding-left:1.5rem}:host(:not(.first-level)) li>div>a:before{content:\"\";position:absolute;left:.6rem;top:0;bottom:0;width:0;border-left:1px solid var(--sidebar-tree-line)}:host(:not(.first-level)) li>div>a:after{content:\"\";position:absolute;left:.6rem;top:calc(50% - .55rem);width:.6rem;height:.55rem;border-left:1px solid var(--sidebar-tree-line);border-bottom:1px solid var(--sidebar-tree-line);border-bottom-left-radius:.4rem}:host(.last-child:not(.first-level)) li>div>a:before{bottom:calc(50% + .4rem)}\n"], dependencies: [{ kind: "component", type: SidebarItemComponent, selector: "lib-sidebar-item", inputs: ["isLast", "level", "menu"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SidebarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SidebarItemComponent, isStandalone: true, selector: "lib-sidebar-item", inputs: { isLast: "isLast", level: "level", menu: "menu" }, host: { properties: { "class.active": "isActive", "class.expanded": "!isCollapsed", "class.first-level": "level === 0", "class.last-child": "isLast", "class.selected": "isSelected" } }, viewQueries: [{ propertyName: "menuContainer", first: true, predicate: ["menuContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<li>\n  <div\n    #menuContainer\n    [class.external]=\"opensInNewBrowserTab\"\n    [class.failed]=\"hasFailed\"\n    [class.loading]=\"isLoading\"\n    [class.parent]=\"isParent\"\n    [class.selected]=\"isSelected\"\n    role=\"button\"\n    tabindex=\"0\"\n    [attr.aria-current]=\"isSelected\"\n    (click)=\"onSelectItem()\"\n    (keydown.enter)=\"onSelectItem()\"\n    (keydown.space)=\"onSelectItem(); $event.preventDefault()\"\n  >\n    <a [attr.title]=\"opensInNewBrowserTab ? externalLinkText : null\">\n      @if (hasIcon && level === 0) {\n        <i class=\"fa-solid fa-fw {{ menu.icon }}\"></i>\n      }\n      <span>{{ menu.label | translate }}</span>\n    </a>\n\n    @if (isParent) {\n      <div class=\"loading\">\n        <svg class=\"animate-spin text-white\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n          <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n          <path\n            class=\"opacity-75\"\n            fill=\"currentColor\"\n            d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n          ></path>\n        </svg>\n      </div>\n    }\n  </div>\n\n  @if (isParent) {\n    <ul\n      [class.open]=\"isSelected\"\n      [ngStyle]=\"{\n        'height.px': childHeight,\n        'max-height.px': childHeight,\n      }\"\n    >\n      @for (child of menu.children; track trackByFn($index, child); let last = $last) {\n        <lib-sidebar-item [menu]=\"child\" [level]=\"level + 1\" [isLast]=\"last\"> </lib-sidebar-item>\n      }\n    </ul>\n  }\n</li>\n", styles: [":host{position:relative;display:block}@media(max-width:767px){:host:not(.active) li>ul{height:0px!important}}@media(min-width:768px){:host:not(.expanded):not(.active) li>ul{height:0px!important}:host.expanded li>div{margin-inline:.5rem}:host.expanded li>div.external:after{opacity:1}:host.expanded li>div.external a{padding-right:2rem}:host.expanded li>div.parent:not(.loading):after{opacity:1}:host.expanded li>div.parent a{padding-right:2rem}:host.expanded li>div.parent.loading .loading{opacity:1!important}:host.expanded li>div a i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.expanded li>div a span{opacity:1}}:host.active li>div{margin-inline:.5rem}:host.active li>div.external:after{opacity:1}:host.active li>div.external a{padding-right:2rem}:host.active li>div.parent:not(.loading):after{opacity:1}:host.active li>div.parent a{padding-right:2rem}:host.active li>div.parent.loading .loading{opacity:1!important}:host.active li>div a i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.active li>div a span{opacity:1}:host.expanded li .selected:not(.loading).parent:after,:host.active li .selected:not(.loading).parent:after{--tw-rotate: -90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}li{position:relative;height:100%}li>div{position:relative;overflow:hidden;height:var(--sidebar-item-height);line-height:var(--sidebar-item-height);border-radius:var(--sidebar-item-radius);transition-property:margin,background-color;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration)}li>div:hover{background-color:var(--sidebar-item-hover-bg)}li>div.selected{background-color:var(--sidebar-item-selected-bg);color:var(--sidebar-item-selected-text)}li>div.external:after{position:absolute;top:0;right:.75rem;width:10px;font-size:.75rem;line-height:1rem;font-weight:800;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:0;--tw-content: \"\\f08e\";content:var(--tw-content);font-family:\"Font Awesome 6 Free\";transition-duration:var(--sidebar-animation-duration);will-change:opacity}li>div.parent:after{position:absolute;top:0;right:.75rem;width:10px;font-weight:800;transition-property:opacity,transform;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:0;font-family:\"Font Awesome 6 Free\";transition-duration:var(--sidebar-animation-duration);will-change:opacity,transform}li>div.parent:not(.failed):after{--tw-content: \"\\f104\";content:var(--tw-content)}li>div.parent.failed:after{right:1rem;--tw-content: \"\\f071\";content:var(--tw-content)}li>div a{display:block;height:100%;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:.75rem;padding-right:.75rem;text-align:left;width:var(--sidebar-expanded-width)}li>div a i{margin-right:.5rem;font-size:1.25rem;line-height:1.75rem;transition-property:font-size,line-height,margin-left;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);margin-left:var(--sidebar-icon-collapsed-margin);transition-duration:var(--sidebar-animation-duration);will-change:font-size,line-height,margin-left}li>div a span{text-overflow:ellipsis;opacity:0;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:opacity}li>div .loading{position:absolute;top:0;right:.55rem;height:100%;width:1rem;opacity:0;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:opacity}li>div .loading svg{height:100%;width:100%}li>ul{overflow:hidden;transition-property:height,max-height;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:height,max-height}li>ul a{padding-left:1.25rem}:host(:not(.first-level)) li>div>a{position:relative;padding-left:1.5rem}:host(:not(.first-level)) li>div>a:before{content:\"\";position:absolute;left:.6rem;top:0;bottom:0;width:0;border-left:1px solid var(--sidebar-tree-line)}:host(:not(.first-level)) li>div>a:after{content:\"\";position:absolute;left:.6rem;top:calc(50% - .55rem);width:.6rem;height:.55rem;border-left:1px solid var(--sidebar-tree-line);border-bottom:1px solid var(--sidebar-tree-line);border-bottom-left-radius:.4rem}:host(.last-child:not(.first-level)) li>div>a:before{bottom:calc(50% + .4rem)}\n"], dependencies: [{ kind: "component", type: SidebarItemComponent, selector: "lib-sidebar-item", inputs: ["isLast", "level", "menu"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: SidebarItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SidebarItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-sidebar-item', imports: [
-                        NgFor,
-                        NgIf,
-                        NgStyle,
-                        TranslatePipe,
-                    ], host: {
+            args: [{ selector: 'lib-sidebar-item', imports: [NgStyle, TranslatePipe], changeDetection: ChangeDetectionStrategy.Eager, host: {
                         '[class.active]': 'isActive',
                         '[class.expanded]': '!isCollapsed',
                         '[class.first-level]': 'level === 0',
                         '[class.last-child]': 'isLast',
                         '[class.selected]': 'isSelected',
-                    }, template: "<li>\n    <div #menuContainer\n    [class.external]=\"opensInNewBrowserTab\"\n    [class.failed]=\"hasFailed\"\n    [class.loading]=\"isLoading\"\n    [class.parent]=\"isParent\"\n    [class.selected]=\"isSelected\"\n    role=\"button\"\n    tabindex=\"0\"\n    [attr.aria-current]=\"isSelected\"\n    (click)=\"onSelectItem()\"\n    (keydown.enter)=\"onSelectItem()\"\n    (keydown.space)=\"onSelectItem(); $event.preventDefault()\">\n        <a [attr.title]=\"opensInNewBrowserTab ? externalLinkText : null\">\n            <i *ngIf=\"hasIcon && level === 0\" class=\"fa-solid fa-fw {{ menu.icon }}\"></i>\n            <span>{{ menu.label | translate }}</span>\n        </a>\n\n        <div class=\"loading\" *ngIf=\"isParent\">\n            <svg class=\"animate-spin text-white\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n                <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n                <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n            </svg>\n        </div>\n    </div>\n\n    <ul *ngIf=\"isParent\"\n    [class.open]=\"isSelected\"\n    [ngStyle]=\"{\n        'height.px': childHeight,\n        'max-height.px': childHeight\n    }\">\n        <lib-sidebar-item *ngFor=\"let child of menu.children; trackBy: trackByFn; let last = last\"\n        [menu]=\"child\"\n        [level]=\"level+1\"\n        [isLast]=\"last\">\n        </lib-sidebar-item>\n    </ul>\n</li>", styles: ["@charset \"UTF-8\";:host{position:relative;display:block}@media (max-width: 767px){:host:not(.active) li>ul{height:0px!important}}@media (min-width: 768px){:host:not(.expanded):not(.active) li>ul{height:0px!important}:host.expanded li>div{margin-inline:.5rem}:host.expanded li>div.external:after{opacity:1}:host.expanded li>div.external a{padding-right:2rem}:host.expanded li>div.parent:not(.loading):after{opacity:1}:host.expanded li>div.parent a{padding-right:2rem}:host.expanded li>div.parent.loading .loading{opacity:1!important}:host.expanded li>div a i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.expanded li>div a span{opacity:1}}:host.active li>div{margin-inline:.5rem}:host.active li>div.external:after{opacity:1}:host.active li>div.external a{padding-right:2rem}:host.active li>div.parent:not(.loading):after{opacity:1}:host.active li>div.parent a{padding-right:2rem}:host.active li>div.parent.loading .loading{opacity:1!important}:host.active li>div a i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.active li>div a span{opacity:1}:host.expanded li .selected:not(.loading).parent:after,:host.active li .selected:not(.loading).parent:after{--tw-rotate: -90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}li{position:relative;height:100%}li>div{position:relative;overflow:hidden;height:var(--sidebar-item-height);line-height:var(--sidebar-item-height);border-radius:var(--sidebar-item-radius);transition-property:margin,background-color;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration)}li>div:hover{background-color:var(--sidebar-item-hover-bg)}li>div.selected{background-color:var(--sidebar-item-selected-bg);color:var(--sidebar-item-selected-text)}li>div.external:after{position:absolute;top:0;right:.75rem;width:10px;font-size:.75rem;line-height:1rem;font-weight:800;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:0;--tw-content: \"\\f08e\";content:var(--tw-content);font-family:\"Font Awesome 6 Free\";transition-duration:var(--sidebar-animation-duration);will-change:opacity}li>div.parent:after{position:absolute;top:0;right:.75rem;width:10px;font-weight:800;transition-property:opacity,transform;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:0;font-family:\"Font Awesome 6 Free\";transition-duration:var(--sidebar-animation-duration);will-change:opacity,transform}li>div.parent:not(.failed):after{--tw-content: \"\\f104\";content:var(--tw-content)}li>div.parent.failed:after{right:1rem;--tw-content: \"\\f071\";content:var(--tw-content)}li>div a{display:block;height:100%;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:.75rem;padding-right:.75rem;text-align:left;width:var(--sidebar-expanded-width)}li>div a i{margin-right:.5rem;font-size:1.25rem;line-height:1.75rem;transition-property:font-size,line-height,margin-left;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);margin-left:var(--sidebar-icon-collapsed-margin);transition-duration:var(--sidebar-animation-duration);will-change:font-size,line-height,margin-left}li>div a span{text-overflow:ellipsis;opacity:0;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:opacity}li>div .loading{position:absolute;top:0;right:.55rem;height:100%;width:1rem;opacity:0;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:opacity}li>div .loading svg{height:100%;width:100%}li>ul{overflow:hidden;transition-property:height,max-height;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:height,max-height}li>ul a{padding-left:1.25rem}:host(:not(.first-level)) li>div>a{position:relative;padding-left:1.5rem}:host(:not(.first-level)) li>div>a:before{content:\"\";position:absolute;left:.6rem;top:0;bottom:0;width:0;border-left:1px solid var(--sidebar-tree-line)}:host(:not(.first-level)) li>div>a:after{content:\"\";position:absolute;left:.6rem;top:calc(50% - .55rem);width:.6rem;height:.55rem;border-left:1px solid var(--sidebar-tree-line);border-bottom:1px solid var(--sidebar-tree-line);border-bottom-left-radius:.4rem}:host(.last-child:not(.first-level)) li>div>a:before{bottom:calc(50% + .4rem)}\n"] }]
+                    }, template: "<li>\n  <div\n    #menuContainer\n    [class.external]=\"opensInNewBrowserTab\"\n    [class.failed]=\"hasFailed\"\n    [class.loading]=\"isLoading\"\n    [class.parent]=\"isParent\"\n    [class.selected]=\"isSelected\"\n    role=\"button\"\n    tabindex=\"0\"\n    [attr.aria-current]=\"isSelected\"\n    (click)=\"onSelectItem()\"\n    (keydown.enter)=\"onSelectItem()\"\n    (keydown.space)=\"onSelectItem(); $event.preventDefault()\"\n  >\n    <a [attr.title]=\"opensInNewBrowserTab ? externalLinkText : null\">\n      @if (hasIcon && level === 0) {\n        <i class=\"fa-solid fa-fw {{ menu.icon }}\"></i>\n      }\n      <span>{{ menu.label | translate }}</span>\n    </a>\n\n    @if (isParent) {\n      <div class=\"loading\">\n        <svg class=\"animate-spin text-white\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n          <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n          <path\n            class=\"opacity-75\"\n            fill=\"currentColor\"\n            d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n          ></path>\n        </svg>\n      </div>\n    }\n  </div>\n\n  @if (isParent) {\n    <ul\n      [class.open]=\"isSelected\"\n      [ngStyle]=\"{\n        'height.px': childHeight,\n        'max-height.px': childHeight,\n      }\"\n    >\n      @for (child of menu.children; track trackByFn($index, child); let last = $last) {\n        <lib-sidebar-item [menu]=\"child\" [level]=\"level + 1\" [isLast]=\"last\"> </lib-sidebar-item>\n      }\n    </ul>\n  }\n</li>\n", styles: [":host{position:relative;display:block}@media(max-width:767px){:host:not(.active) li>ul{height:0px!important}}@media(min-width:768px){:host:not(.expanded):not(.active) li>ul{height:0px!important}:host.expanded li>div{margin-inline:.5rem}:host.expanded li>div.external:after{opacity:1}:host.expanded li>div.external a{padding-right:2rem}:host.expanded li>div.parent:not(.loading):after{opacity:1}:host.expanded li>div.parent a{padding-right:2rem}:host.expanded li>div.parent.loading .loading{opacity:1!important}:host.expanded li>div a i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.expanded li>div a span{opacity:1}}:host.active li>div{margin-inline:.5rem}:host.active li>div.external:after{opacity:1}:host.active li>div.external a{padding-right:2rem}:host.active li>div.parent:not(.loading):after{opacity:1}:host.active li>div.parent a{padding-right:2rem}:host.active li>div.parent.loading .loading{opacity:1!important}:host.active li>div a i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.active li>div a span{opacity:1}:host.expanded li .selected:not(.loading).parent:after,:host.active li .selected:not(.loading).parent:after{--tw-rotate: -90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}li{position:relative;height:100%}li>div{position:relative;overflow:hidden;height:var(--sidebar-item-height);line-height:var(--sidebar-item-height);border-radius:var(--sidebar-item-radius);transition-property:margin,background-color;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration)}li>div:hover{background-color:var(--sidebar-item-hover-bg)}li>div.selected{background-color:var(--sidebar-item-selected-bg);color:var(--sidebar-item-selected-text)}li>div.external:after{position:absolute;top:0;right:.75rem;width:10px;font-size:.75rem;line-height:1rem;font-weight:800;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:0;--tw-content: \"\\f08e\";content:var(--tw-content);font-family:\"Font Awesome 6 Free\";transition-duration:var(--sidebar-animation-duration);will-change:opacity}li>div.parent:after{position:absolute;top:0;right:.75rem;width:10px;font-weight:800;transition-property:opacity,transform;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:0;font-family:\"Font Awesome 6 Free\";transition-duration:var(--sidebar-animation-duration);will-change:opacity,transform}li>div.parent:not(.failed):after{--tw-content: \"\\f104\";content:var(--tw-content)}li>div.parent.failed:after{right:1rem;--tw-content: \"\\f071\";content:var(--tw-content)}li>div a{display:block;height:100%;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:.75rem;padding-right:.75rem;text-align:left;width:var(--sidebar-expanded-width)}li>div a i{margin-right:.5rem;font-size:1.25rem;line-height:1.75rem;transition-property:font-size,line-height,margin-left;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);margin-left:var(--sidebar-icon-collapsed-margin);transition-duration:var(--sidebar-animation-duration);will-change:font-size,line-height,margin-left}li>div a span{text-overflow:ellipsis;opacity:0;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:opacity}li>div .loading{position:absolute;top:0;right:.55rem;height:100%;width:1rem;opacity:0;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:opacity}li>div .loading svg{height:100%;width:100%}li>ul{overflow:hidden;transition-property:height,max-height;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:height,max-height}li>ul a{padding-left:1.25rem}:host(:not(.first-level)) li>div>a{position:relative;padding-left:1.5rem}:host(:not(.first-level)) li>div>a:before{content:\"\";position:absolute;left:.6rem;top:0;bottom:0;width:0;border-left:1px solid var(--sidebar-tree-line)}:host(:not(.first-level)) li>div>a:after{content:\"\";position:absolute;left:.6rem;top:calc(50% - .55rem);width:.6rem;height:.55rem;border-left:1px solid var(--sidebar-tree-line);border-bottom:1px solid var(--sidebar-tree-line);border-bottom-left-radius:.4rem}:host(.last-child:not(.first-level)) li>div>a:before{bottom:calc(50% + .4rem)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { menuContainer: [{
                 type: ViewChild,
                 args: ['menuContainer']
@@ -3464,13 +3341,8 @@ class SidebarComponent extends BaseComponent {
     }
     onDocumentKeyDown(event) {
         event = event || window.event;
-        let isEscapeKey = false;
-        if ('key' in event) {
-            isEscapeKey = (event.key === 'Escape' || event.key === 'Esc');
-        }
-        else {
-            isEscapeKey = (event.keyCode === 27);
-        }
+        // keyCode is the fallback for engines predating KeyboardEvent.key.
+        const isEscapeKey = 'key' in event ? event.key === 'Escape' || event.key === 'Esc' : event.keyCode === 27;
         if (isEscapeKey) {
             this.deactivate();
         }
@@ -3511,14 +3383,15 @@ class SidebarComponent extends BaseComponent {
         merge(this.sidebarService.menuUrlSelected, this.sidebarService.menuExternalUrlSelected)
             .pipe(takeUntil(this.destroy$))
             .subscribe((_menu) => this.deactivate());
-        this.sidebarService.loadRoot()
+        this.sidebarService
+            .loadRoot()
             .pipe(take(1), switchMap((menus) => this.loadAreaChildren(menus)))
             .subscribe({
             next: (menus) => {
                 this.menus = menus;
                 this.regions = this.groupIntoRegions(menus);
             },
-            error: () => this.hasFailed = true
+            error: () => (this.hasFailed = true),
         });
     }
     //#endregion
@@ -3599,8 +3472,7 @@ class SidebarComponent extends BaseComponent {
         if (areas.length === 0) {
             return of(menus);
         }
-        return forkJoin(areas.map((area) => this.sidebarService.loadChildrenFor(area)))
-            .pipe(map(() => menus));
+        return forkJoin(areas.map((area) => this.sidebarService.loadChildrenFor(area))).pipe(map(() => menus));
     }
     deactivate() {
         if (this.sidebarService.isActive) {
@@ -3610,24 +3482,17 @@ class SidebarComponent extends BaseComponent {
     }
     updateShouldActivate() {
         this.sidebarService.shouldActivate =
-            (window.innerWidth <= 767 && !this.sidebarService.isCollapsed)
-                || this.sidebarService.isCollapsed;
+            (window.innerWidth <= 767 && !this.sidebarService.isCollapsed) || this.sidebarService.isCollapsed;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: SidebarComponent, isStandalone: true, selector: "lib-sidebar", host: { listeners: { "body:mousedown": "onBodyMouseDown($event)", "body:mouseup": "onBodyMouseUp($event)", "document:keydown.escape": "onDocumentKeyDown($event)", "window:resize": "onResize($event)" }, properties: { "class.active": "isActive", "class.expanded": "!isCollapsed" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"sidebar-toolbar\">\n    <button type=\"button\" class=\"sidebar-toggle\" (click)=\"collapse()\" aria-label=\"Toggle navigation\">\n        <i class=\"fa-solid fa-angle-left\" [class.is-collapsed]=\"isCollapsed\"></i>\n    </button>\n</div>\n\n<nav>\n    <ul *ngIf=\"!isLoading; else loading\">\n        <ng-container *ngFor=\"let region of regions; trackBy: trackByRegion\">\n            <li class=\"sidebar-region-header\" *ngIf=\"region.name\">\n                <span>{{ region.name | translate }}</span>\n            </li>\n\n            <lib-sidebar-item *ngFor=\"let menu of region.items; trackBy: trackByFn\"\n            [menu]=\"menu\">\n            </lib-sidebar-item>\n        </ng-container>\n\n        <div class=\"error\" *ngIf=\"hasFailed\">\n            <div>\n                <i class=\"fa-solid fa-fw fa-triangle-exclamation\"></i>\n                <span>{{ configErrorText }}</span>\n            </div>\n        </div>\n    </ul>\n</nav>\n\n<div class=\"sidebar-footer\"><ng-content></ng-content></div>\n\n<ng-template #loading>\n    <div class=\"loading\">\n        <div>\n            <svg class=\"animate-spin text-white\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n                <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n                <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n            </svg>\n            <span>{{ configLoadingText }}</span>\n        </div>\n    </div>\n</ng-template>", styles: [":host{position:relative;z-index:20;display:grid;height:100%;-webkit-user-select:none;user-select:none;background-color:var(--sidebar-bg);border-radius:var(--sidebar-radius, 1.25rem);backdrop-filter:blur(var(--sidebar-blur, 16px));-webkit-backdrop-filter:blur(var(--sidebar-blur, 16px));box-shadow:var(--sidebar-shadow, 0 10px 40px -12px rgba(0, 0, 0, .45));transition-property:margin-left,width;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);margin-left:calc(var(--sidebar-collapsed-width) * -1);transition-duration:var(--sidebar-animation-duration);width:var(--sidebar-collapsed-width);will-change:margin-left,width;grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:\"toolbar\" \"nav\" \"footer\"}@media (min-width: 768px){:host{margin-left:0}:host.expanded{width:var(--sidebar-expanded-width)}:host.expanded .loading i,:host.expanded .error i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.expanded .loading svg,:host.expanded .error svg{margin-top:-4px;margin-left:1px;height:1.25rem;width:1.25rem}:host.expanded .loading span,:host.expanded .error span{opacity:1}}:host.active{width:var(--sidebar-expanded-width)}:host.active .loading i,:host.active .error i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.active .loading svg,:host.active .error svg{margin-top:-4px;margin-left:1px;height:1.25rem;width:1.25rem}:host.active .loading span,:host.active .error span{opacity:1}:host.expanded,:host.active{margin-left:0}.sidebar-toolbar{display:flex;justify-content:flex-end;padding-top:.5rem;padding-bottom:.5rem;grid-area:toolbar}.sidebar-toolbar .sidebar-toggle{z-index:20;display:flex;height:1.75rem;width:1.75rem;flex-shrink:0;cursor:pointer;align-items:center;justify-content:center;border-radius:9999px;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(0 67 114 / var(--tw-text-opacity, 1));--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-color: rgb(0 0 0 / .05);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.sidebar-toolbar .sidebar-toggle:hover{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(0 47 80 / var(--tw-text-opacity, 1))}.sidebar-toolbar .sidebar-toggle{transform:translate(40%)}.sidebar-toolbar .sidebar-toggle i{font-size:.875rem;line-height:1.25rem;rotate:0deg;transition:rotate var(--sidebar-animation-duration) ease-in-out}.sidebar-toolbar .sidebar-toggle i.is-collapsed{rotate:-180deg}.sidebar-footer{overflow:hidden;white-space:nowrap;padding:.5rem 1rem;text-align:center;font-size:.75rem;line-height:1rem;color:var(--sidebar-text-muted);opacity:0;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);grid-area:footer}.sidebar-footer:empty{display:none}:host(.expanded) .sidebar-footer,:host(.active) .sidebar-footer{opacity:1}nav{overflow-y:auto;overflow-x:hidden;grid-area:nav;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent}nav::-webkit-scrollbar{height:0px;width:7px}nav::-webkit-scrollbar-track{background-color:transparent}nav::-webkit-scrollbar-thumb{background-color:#0003;border-radius:10px;transition:background .2s ease}nav::-webkit-scrollbar-thumb:hover{background-color:#0000008c}nav:hover::-webkit-scrollbar-thumb{background-color:#00000073}@media screen and (max-width: 480px){nav{scrollbar-width:thin}nav::-webkit-scrollbar{width:5px}}ul,.loading{position:relative;background-color:var(--sidebar-nav-bg)}ul lib-sidebar-item,.loading,.error{font-weight:500;color:var(--sidebar-text)}.sidebar-region-header{position:relative;display:flex;align-items:center;overflow:hidden;white-space:nowrap;padding-left:1rem;padding-right:1rem;height:2rem;color:var(--sidebar-text-muted);transition-property:height;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration)}.sidebar-region-header span{font-size:.75rem;line-height:1rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration)}.sidebar-region-header:after{content:\"\";position:absolute;left:50%;top:50%;opacity:0;width:1.75rem;height:1px;transform:translate(-50%,-50%);background:var(--sidebar-text-muted);transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration)}:host(:not(.expanded):not(.active)) .sidebar-region-header{height:1.25rem}:host(:not(.expanded):not(.active)) .sidebar-region-header span{opacity:0}:host(:not(.expanded):not(.active)) .sidebar-region-header:after{opacity:1}.loading,.error{overflow:hidden;height:var(--sidebar-item-height);line-height:var(--sidebar-item-height)}.loading>div,.error>div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:.75rem;padding-right:.75rem;text-align:left;width:var(--sidebar-expanded-width)}.loading i,.error i{margin-right:.5rem;font-size:1.25rem;line-height:1.75rem;transition-property:font-size,line-height,margin-left;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);margin-left:var(--sidebar-icon-collapsed-margin);transition-duration:var(--sidebar-animation-duration);will-change:font-size,line-height,margin-left}.loading svg,.error svg{margin-top:-4px;margin-left:.5rem;display:inline;height:1.5rem;width:1.5rem;transition-property:height,margin-left,width;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:height,margin-left,width}.loading svg+span,.error svg+span{margin-left:.6rem}.loading span,.error span{transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:0;transition-duration:var(--sidebar-animation-duration)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SidebarItemComponent, selector: "lib-sidebar-item", inputs: ["isLast", "level", "menu"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SidebarComponent, isStandalone: true, selector: "lib-sidebar", host: { listeners: { "body:mousedown": "onBodyMouseDown($event)", "body:mouseup": "onBodyMouseUp($event)", "document:keydown.escape": "onDocumentKeyDown($event)", "window:resize": "onResize($event)" }, properties: { "class.active": "isActive", "class.expanded": "!isCollapsed" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"sidebar-toolbar\">\n  <button type=\"button\" class=\"sidebar-toggle\" (click)=\"collapse()\" aria-label=\"Toggle navigation\">\n    <i class=\"fa-solid fa-angle-left\" [class.is-collapsed]=\"isCollapsed\"></i>\n  </button>\n</div>\n\n<nav>\n  @if (!isLoading) {\n    <ul>\n      @for (region of regions; track trackByRegion($index, region)) {\n        @if (region.name) {\n          <li class=\"sidebar-region-header\">\n            <span>{{ region.name | translate }}</span>\n          </li>\n        }\n        @for (menu of region.items; track trackByFn($index, menu)) {\n          <lib-sidebar-item [menu]=\"menu\"> </lib-sidebar-item>\n        }\n      }\n      @if (hasFailed) {\n        <div class=\"error\">\n          <div>\n            <i class=\"fa-solid fa-fw fa-triangle-exclamation\"></i>\n            <span>{{ configErrorText }}</span>\n          </div>\n        </div>\n      }\n    </ul>\n  } @else {\n    <div class=\"loading\">\n      <div>\n        <svg class=\"animate-spin text-white\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n          <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n          <path\n            class=\"opacity-75\"\n            fill=\"currentColor\"\n            d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n          ></path>\n        </svg>\n        <span>{{ configLoadingText }}</span>\n      </div>\n    </div>\n  }\n</nav>\n\n<div class=\"sidebar-footer\"><ng-content></ng-content></div>\n", styles: [":host{position:relative;z-index:20;display:grid;height:100%;-webkit-user-select:none;user-select:none;background-color:var(--sidebar-bg);border-radius:var(--sidebar-radius, 1.25rem);backdrop-filter:blur(var(--sidebar-blur, 16px));-webkit-backdrop-filter:blur(var(--sidebar-blur, 16px));box-shadow:var(--sidebar-shadow, 0 10px 40px -12px rgba(0, 0, 0, .45));transition-property:margin-left,width;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);margin-left:calc(var(--sidebar-collapsed-width) * -1);transition-duration:var(--sidebar-animation-duration);width:var(--sidebar-collapsed-width);will-change:margin-left,width;grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:\"toolbar\" \"nav\" \"footer\"}@media(min-width:768px){:host{margin-left:0}:host.expanded{width:var(--sidebar-expanded-width)}:host.expanded .loading i,:host.expanded .error i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.expanded .loading svg,:host.expanded .error svg{margin-top:-4px;margin-left:1px;height:1.25rem;width:1.25rem}:host.expanded .loading span,:host.expanded .error span{opacity:1}}:host.active{width:var(--sidebar-expanded-width)}:host.active .loading i,:host.active .error i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.active .loading svg,:host.active .error svg{margin-top:-4px;margin-left:1px;height:1.25rem;width:1.25rem}:host.active .loading span,:host.active .error span{opacity:1}:host.expanded,:host.active{margin-left:0}.sidebar-toolbar{display:flex;justify-content:flex-end;padding-top:.5rem;padding-bottom:.5rem;grid-area:toolbar}.sidebar-toolbar .sidebar-toggle{z-index:20;display:flex;height:1.75rem;width:1.75rem;flex-shrink:0;cursor:pointer;align-items:center;justify-content:center;border-radius:9999px;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(0 67 114 / var(--tw-text-opacity, 1));--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-color: rgb(0 0 0 / .05);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.sidebar-toolbar .sidebar-toggle:hover{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(0 47 80 / var(--tw-text-opacity, 1))}.sidebar-toolbar .sidebar-toggle{transform:translate(40%)}.sidebar-toolbar .sidebar-toggle i{font-size:.875rem;line-height:1.25rem;rotate:0deg;transition:rotate var(--sidebar-animation-duration) ease-in-out}.sidebar-toolbar .sidebar-toggle i.is-collapsed{rotate:-180deg}.sidebar-footer{overflow:hidden;white-space:nowrap;padding:.5rem 1rem;text-align:center;font-size:.75rem;line-height:1rem;color:var(--sidebar-text-muted);opacity:0;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);grid-area:footer}.sidebar-footer:empty{display:none}:host(.expanded) .sidebar-footer,:host(.active) .sidebar-footer{opacity:1}nav{overflow-y:auto;overflow-x:hidden;grid-area:nav;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent}nav::-webkit-scrollbar{height:0px;width:7px}nav::-webkit-scrollbar-track{background-color:transparent}nav::-webkit-scrollbar-thumb{background-color:#0003;border-radius:10px;transition:background .2s ease}nav::-webkit-scrollbar-thumb:hover{background-color:#0000008c}nav:hover::-webkit-scrollbar-thumb{background-color:#00000073}@media screen and (max-width:480px){nav{scrollbar-width:thin}nav::-webkit-scrollbar{width:5px}}ul,.loading{position:relative;background-color:var(--sidebar-nav-bg)}ul lib-sidebar-item,.loading,.error{font-weight:500;color:var(--sidebar-text)}.sidebar-region-header{position:relative;display:flex;align-items:center;overflow:hidden;white-space:nowrap;padding-left:1rem;padding-right:1rem;height:2rem;color:var(--sidebar-text-muted);transition-property:height;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration)}.sidebar-region-header span{font-size:.75rem;line-height:1rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration)}.sidebar-region-header:after{content:\"\";position:absolute;left:50%;top:50%;opacity:0;width:1.75rem;height:1px;transform:translate(-50%,-50%);background:var(--sidebar-text-muted);transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration)}:host(:not(.expanded):not(.active)) .sidebar-region-header{height:1.25rem}:host(:not(.expanded):not(.active)) .sidebar-region-header span{opacity:0}:host(:not(.expanded):not(.active)) .sidebar-region-header:after{opacity:1}.loading,.error{overflow:hidden;height:var(--sidebar-item-height);line-height:var(--sidebar-item-height)}.loading>div,.error>div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:.75rem;padding-right:.75rem;text-align:left;width:var(--sidebar-expanded-width)}.loading i,.error i{margin-right:.5rem;font-size:1.25rem;line-height:1.75rem;transition-property:font-size,line-height,margin-left;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);margin-left:var(--sidebar-icon-collapsed-margin);transition-duration:var(--sidebar-animation-duration);will-change:font-size,line-height,margin-left}.loading svg,.error svg{margin-top:-4px;margin-left:.5rem;display:inline;height:1.5rem;width:1.5rem;transition-property:height,margin-left,width;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:height,margin-left,width}.loading svg+span,.error svg+span{margin-left:.6rem}.loading span,.error span{transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:0;transition-duration:var(--sidebar-animation-duration)}\n"], dependencies: [{ kind: "component", type: SidebarItemComponent, selector: "lib-sidebar-item", inputs: ["isLast", "level", "menu"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: SidebarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SidebarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-sidebar', imports: [
-                        CommonModule,
-                        NgFor,
-                        NgIf,
-                        SidebarItemComponent,
-                        TranslatePipe,
-                    ], host: {
+            args: [{ selector: 'lib-sidebar', imports: [SidebarItemComponent, TranslatePipe], changeDetection: ChangeDetectionStrategy.Eager, host: {
                         '[class.active]': 'isActive',
                         '[class.expanded]': '!isCollapsed',
-                    }, template: "<div class=\"sidebar-toolbar\">\n    <button type=\"button\" class=\"sidebar-toggle\" (click)=\"collapse()\" aria-label=\"Toggle navigation\">\n        <i class=\"fa-solid fa-angle-left\" [class.is-collapsed]=\"isCollapsed\"></i>\n    </button>\n</div>\n\n<nav>\n    <ul *ngIf=\"!isLoading; else loading\">\n        <ng-container *ngFor=\"let region of regions; trackBy: trackByRegion\">\n            <li class=\"sidebar-region-header\" *ngIf=\"region.name\">\n                <span>{{ region.name | translate }}</span>\n            </li>\n\n            <lib-sidebar-item *ngFor=\"let menu of region.items; trackBy: trackByFn\"\n            [menu]=\"menu\">\n            </lib-sidebar-item>\n        </ng-container>\n\n        <div class=\"error\" *ngIf=\"hasFailed\">\n            <div>\n                <i class=\"fa-solid fa-fw fa-triangle-exclamation\"></i>\n                <span>{{ configErrorText }}</span>\n            </div>\n        </div>\n    </ul>\n</nav>\n\n<div class=\"sidebar-footer\"><ng-content></ng-content></div>\n\n<ng-template #loading>\n    <div class=\"loading\">\n        <div>\n            <svg class=\"animate-spin text-white\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n                <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n                <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n            </svg>\n            <span>{{ configLoadingText }}</span>\n        </div>\n    </div>\n</ng-template>", styles: [":host{position:relative;z-index:20;display:grid;height:100%;-webkit-user-select:none;user-select:none;background-color:var(--sidebar-bg);border-radius:var(--sidebar-radius, 1.25rem);backdrop-filter:blur(var(--sidebar-blur, 16px));-webkit-backdrop-filter:blur(var(--sidebar-blur, 16px));box-shadow:var(--sidebar-shadow, 0 10px 40px -12px rgba(0, 0, 0, .45));transition-property:margin-left,width;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);margin-left:calc(var(--sidebar-collapsed-width) * -1);transition-duration:var(--sidebar-animation-duration);width:var(--sidebar-collapsed-width);will-change:margin-left,width;grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:\"toolbar\" \"nav\" \"footer\"}@media (min-width: 768px){:host{margin-left:0}:host.expanded{width:var(--sidebar-expanded-width)}:host.expanded .loading i,:host.expanded .error i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.expanded .loading svg,:host.expanded .error svg{margin-top:-4px;margin-left:1px;height:1.25rem;width:1.25rem}:host.expanded .loading span,:host.expanded .error span{opacity:1}}:host.active{width:var(--sidebar-expanded-width)}:host.active .loading i,:host.active .error i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.active .loading svg,:host.active .error svg{margin-top:-4px;margin-left:1px;height:1.25rem;width:1.25rem}:host.active .loading span,:host.active .error span{opacity:1}:host.expanded,:host.active{margin-left:0}.sidebar-toolbar{display:flex;justify-content:flex-end;padding-top:.5rem;padding-bottom:.5rem;grid-area:toolbar}.sidebar-toolbar .sidebar-toggle{z-index:20;display:flex;height:1.75rem;width:1.75rem;flex-shrink:0;cursor:pointer;align-items:center;justify-content:center;border-radius:9999px;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(0 67 114 / var(--tw-text-opacity, 1));--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-color: rgb(0 0 0 / .05);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.sidebar-toolbar .sidebar-toggle:hover{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(0 47 80 / var(--tw-text-opacity, 1))}.sidebar-toolbar .sidebar-toggle{transform:translate(40%)}.sidebar-toolbar .sidebar-toggle i{font-size:.875rem;line-height:1.25rem;rotate:0deg;transition:rotate var(--sidebar-animation-duration) ease-in-out}.sidebar-toolbar .sidebar-toggle i.is-collapsed{rotate:-180deg}.sidebar-footer{overflow:hidden;white-space:nowrap;padding:.5rem 1rem;text-align:center;font-size:.75rem;line-height:1rem;color:var(--sidebar-text-muted);opacity:0;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);grid-area:footer}.sidebar-footer:empty{display:none}:host(.expanded) .sidebar-footer,:host(.active) .sidebar-footer{opacity:1}nav{overflow-y:auto;overflow-x:hidden;grid-area:nav;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent}nav::-webkit-scrollbar{height:0px;width:7px}nav::-webkit-scrollbar-track{background-color:transparent}nav::-webkit-scrollbar-thumb{background-color:#0003;border-radius:10px;transition:background .2s ease}nav::-webkit-scrollbar-thumb:hover{background-color:#0000008c}nav:hover::-webkit-scrollbar-thumb{background-color:#00000073}@media screen and (max-width: 480px){nav{scrollbar-width:thin}nav::-webkit-scrollbar{width:5px}}ul,.loading{position:relative;background-color:var(--sidebar-nav-bg)}ul lib-sidebar-item,.loading,.error{font-weight:500;color:var(--sidebar-text)}.sidebar-region-header{position:relative;display:flex;align-items:center;overflow:hidden;white-space:nowrap;padding-left:1rem;padding-right:1rem;height:2rem;color:var(--sidebar-text-muted);transition-property:height;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration)}.sidebar-region-header span{font-size:.75rem;line-height:1rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration)}.sidebar-region-header:after{content:\"\";position:absolute;left:50%;top:50%;opacity:0;width:1.75rem;height:1px;transform:translate(-50%,-50%);background:var(--sidebar-text-muted);transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration)}:host(:not(.expanded):not(.active)) .sidebar-region-header{height:1.25rem}:host(:not(.expanded):not(.active)) .sidebar-region-header span{opacity:0}:host(:not(.expanded):not(.active)) .sidebar-region-header:after{opacity:1}.loading,.error{overflow:hidden;height:var(--sidebar-item-height);line-height:var(--sidebar-item-height)}.loading>div,.error>div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:.75rem;padding-right:.75rem;text-align:left;width:var(--sidebar-expanded-width)}.loading i,.error i{margin-right:.5rem;font-size:1.25rem;line-height:1.75rem;transition-property:font-size,line-height,margin-left;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);margin-left:var(--sidebar-icon-collapsed-margin);transition-duration:var(--sidebar-animation-duration);will-change:font-size,line-height,margin-left}.loading svg,.error svg{margin-top:-4px;margin-left:.5rem;display:inline;height:1.5rem;width:1.5rem;transition-property:height,margin-left,width;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:height,margin-left,width}.loading svg+span,.error svg+span{margin-left:.6rem}.loading span,.error span{transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:0;transition-duration:var(--sidebar-animation-duration)}\n"] }]
+                    }, template: "<div class=\"sidebar-toolbar\">\n  <button type=\"button\" class=\"sidebar-toggle\" (click)=\"collapse()\" aria-label=\"Toggle navigation\">\n    <i class=\"fa-solid fa-angle-left\" [class.is-collapsed]=\"isCollapsed\"></i>\n  </button>\n</div>\n\n<nav>\n  @if (!isLoading) {\n    <ul>\n      @for (region of regions; track trackByRegion($index, region)) {\n        @if (region.name) {\n          <li class=\"sidebar-region-header\">\n            <span>{{ region.name | translate }}</span>\n          </li>\n        }\n        @for (menu of region.items; track trackByFn($index, menu)) {\n          <lib-sidebar-item [menu]=\"menu\"> </lib-sidebar-item>\n        }\n      }\n      @if (hasFailed) {\n        <div class=\"error\">\n          <div>\n            <i class=\"fa-solid fa-fw fa-triangle-exclamation\"></i>\n            <span>{{ configErrorText }}</span>\n          </div>\n        </div>\n      }\n    </ul>\n  } @else {\n    <div class=\"loading\">\n      <div>\n        <svg class=\"animate-spin text-white\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n          <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n          <path\n            class=\"opacity-75\"\n            fill=\"currentColor\"\n            d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n          ></path>\n        </svg>\n        <span>{{ configLoadingText }}</span>\n      </div>\n    </div>\n  }\n</nav>\n\n<div class=\"sidebar-footer\"><ng-content></ng-content></div>\n", styles: [":host{position:relative;z-index:20;display:grid;height:100%;-webkit-user-select:none;user-select:none;background-color:var(--sidebar-bg);border-radius:var(--sidebar-radius, 1.25rem);backdrop-filter:blur(var(--sidebar-blur, 16px));-webkit-backdrop-filter:blur(var(--sidebar-blur, 16px));box-shadow:var(--sidebar-shadow, 0 10px 40px -12px rgba(0, 0, 0, .45));transition-property:margin-left,width;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);margin-left:calc(var(--sidebar-collapsed-width) * -1);transition-duration:var(--sidebar-animation-duration);width:var(--sidebar-collapsed-width);will-change:margin-left,width;grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:\"toolbar\" \"nav\" \"footer\"}@media(min-width:768px){:host{margin-left:0}:host.expanded{width:var(--sidebar-expanded-width)}:host.expanded .loading i,:host.expanded .error i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.expanded .loading svg,:host.expanded .error svg{margin-top:-4px;margin-left:1px;height:1.25rem;width:1.25rem}:host.expanded .loading span,:host.expanded .error span{opacity:1}}:host.active{width:var(--sidebar-expanded-width)}:host.active .loading i,:host.active .error i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.active .loading svg,:host.active .error svg{margin-top:-4px;margin-left:1px;height:1.25rem;width:1.25rem}:host.active .loading span,:host.active .error span{opacity:1}:host.expanded,:host.active{margin-left:0}.sidebar-toolbar{display:flex;justify-content:flex-end;padding-top:.5rem;padding-bottom:.5rem;grid-area:toolbar}.sidebar-toolbar .sidebar-toggle{z-index:20;display:flex;height:1.75rem;width:1.75rem;flex-shrink:0;cursor:pointer;align-items:center;justify-content:center;border-radius:9999px;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(0 67 114 / var(--tw-text-opacity, 1));--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-color: rgb(0 0 0 / .05);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.sidebar-toolbar .sidebar-toggle:hover{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(0 47 80 / var(--tw-text-opacity, 1))}.sidebar-toolbar .sidebar-toggle{transform:translate(40%)}.sidebar-toolbar .sidebar-toggle i{font-size:.875rem;line-height:1.25rem;rotate:0deg;transition:rotate var(--sidebar-animation-duration) ease-in-out}.sidebar-toolbar .sidebar-toggle i.is-collapsed{rotate:-180deg}.sidebar-footer{overflow:hidden;white-space:nowrap;padding:.5rem 1rem;text-align:center;font-size:.75rem;line-height:1rem;color:var(--sidebar-text-muted);opacity:0;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);grid-area:footer}.sidebar-footer:empty{display:none}:host(.expanded) .sidebar-footer,:host(.active) .sidebar-footer{opacity:1}nav{overflow-y:auto;overflow-x:hidden;grid-area:nav;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent}nav::-webkit-scrollbar{height:0px;width:7px}nav::-webkit-scrollbar-track{background-color:transparent}nav::-webkit-scrollbar-thumb{background-color:#0003;border-radius:10px;transition:background .2s ease}nav::-webkit-scrollbar-thumb:hover{background-color:#0000008c}nav:hover::-webkit-scrollbar-thumb{background-color:#00000073}@media screen and (max-width:480px){nav{scrollbar-width:thin}nav::-webkit-scrollbar{width:5px}}ul,.loading{position:relative;background-color:var(--sidebar-nav-bg)}ul lib-sidebar-item,.loading,.error{font-weight:500;color:var(--sidebar-text)}.sidebar-region-header{position:relative;display:flex;align-items:center;overflow:hidden;white-space:nowrap;padding-left:1rem;padding-right:1rem;height:2rem;color:var(--sidebar-text-muted);transition-property:height;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration)}.sidebar-region-header span{font-size:.75rem;line-height:1rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration)}.sidebar-region-header:after{content:\"\";position:absolute;left:50%;top:50%;opacity:0;width:1.75rem;height:1px;transform:translate(-50%,-50%);background:var(--sidebar-text-muted);transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration)}:host(:not(.expanded):not(.active)) .sidebar-region-header{height:1.25rem}:host(:not(.expanded):not(.active)) .sidebar-region-header span{opacity:0}:host(:not(.expanded):not(.active)) .sidebar-region-header:after{opacity:1}.loading,.error{overflow:hidden;height:var(--sidebar-item-height);line-height:var(--sidebar-item-height)}.loading>div,.error>div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:.75rem;padding-right:.75rem;text-align:left;width:var(--sidebar-expanded-width)}.loading i,.error i{margin-right:.5rem;font-size:1.25rem;line-height:1.75rem;transition-property:font-size,line-height,margin-left;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);margin-left:var(--sidebar-icon-collapsed-margin);transition-duration:var(--sidebar-animation-duration);will-change:font-size,line-height,margin-left}.loading svg,.error svg{margin-top:-4px;margin-left:.5rem;display:inline;height:1.5rem;width:1.5rem;transition-property:height,margin-left,width;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:height,margin-left,width}.loading svg+span,.error svg+span{margin-left:.6rem}.loading span,.error span{transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:0;transition-duration:var(--sidebar-animation-duration)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { onBodyMouseDown: [{
                 type: HostListener,
                 args: ['body:mousedown', ['$event']]
@@ -3661,9 +3526,9 @@ class RibbonButtonComponent {
             const target = event.target;
             const button = target.closest('.button-container')?.parentElement;
             this.clickedOutside =
-                event.button === 0
-                    && !target.closest('.options-dropdown')
-                    && (!button || (!button?.classList.contains('dropdown') && !button?.classList.contains('open')));
+                event.button === 0 &&
+                    !target.closest('.options-dropdown') &&
+                    (!button || (!button?.classList.contains('dropdown') && !button?.classList.contains('open')));
         }
     }
     bodyMouseUp(event) {
@@ -3673,13 +3538,8 @@ class RibbonButtonComponent {
     }
     documentKeyDown(event) {
         event = event || window.event;
-        let isEscape = false;
-        if ('key' in event) {
-            isEscape = (event.key === 'Escape' || event.key === 'Esc');
-        }
-        else {
-            isEscape = (event.keyCode === 27);
-        }
+        // keyCode is the fallback for engines predating KeyboardEvent.key.
+        const isEscape = 'key' in event ? event.key === 'Escape' || event.key === 'Esc' : event.keyCode === 27;
         if (this.showDropdown && isEscape) {
             this.showDropdown = false;
         }
@@ -3704,7 +3564,9 @@ class RibbonButtonComponent {
         }
     }
     get isButtonDisabled() {
-        return this.disabled || this.loading || (this.options.length > 0 && !this.options.some((option) => this.isOptionVisible(option)));
+        return (this.disabled ||
+            this.loading ||
+            (this.options.length > 0 && !this.options.some((option) => this.isOptionVisible(option))));
     }
     //#endregion
     //#region Constructor and Angular life cycle methods
@@ -3747,22 +3609,21 @@ class RibbonButtonComponent {
         return option.isDisabled || ((option.allowedActions?.length ?? 0) > 0 && option.isAccessAllowed === undefined);
     }
     isOptionVisible(option) {
-        return (option.isVisible ?? true) && (option.allowedActions === undefined || option.allowedActions.length === 0 || option.isAccessAllowed === true || (option.isAccessAllowed == undefined && option.allowedActions?.length > 0));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: RibbonButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: RibbonButtonComponent, isStandalone: true, selector: "lib-ribbon-button", inputs: { color: "color", defaultOption: "defaultOption", disabled: "disabled", icon: "icon", iconSize: "iconSize", label: "label", loading: "loading", options: "options", tooltip: "tooltip" }, outputs: { action: "action" }, host: { listeners: { "body:mousedown": "bodyMouseDown($event)", "body:mouseup": "bodyMouseUp($event)", "document:keydown.escape": "documentKeyDown($event)" }, properties: { "class.dropdown": "options.length > 0", "class.show": "showDropdown" } }, ngImport: i0, template: "<div class=\"button-container\"\n[attr.title]=\"tooltip || null\">\n    <a class=\"button\"\n    role=\"button\"\n    [attr.tabindex]=\"isButtonDisabled ? -1 : 0\"\n    [attr.aria-disabled]=\"isButtonDisabled\"\n    [class.disabled]=\"isButtonDisabled\"\n    [class.success]=\"status === 'success'\"\n    [class.warning]=\"status === 'warning'\"\n    [class.failure]=\"status === 'failure'\"\n    [class.small]=\"iconSize === 'small'\"\n    (click)=\"onButtonClicked()\"\n    (keydown.enter)=\"onButtonClicked()\"\n    (keydown.space)=\"onButtonClicked(); $event.preventDefault()\"\n    >\n        <span class=\"icon\" [class.loading]=\"loading\">\n            <i class=\"fas fa-fw\" [ngClass]=\"[ buttonIcon, color ]\"></i>\n            \n            <svg [ngClass]=\"[ color ]\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n                <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n                <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n            </svg>\n        </span>\n    \n        <span class=\"label\" [class.text-white]=\"status !== null\">\n            {{ label | translate }}\n        </span>\n    </a>\n    \n    <a class=\"button-dropdown\" *ngIf=\"options.length > 0\"\n    role=\"button\"\n    [attr.tabindex]=\"isButtonDisabled ? -1 : 0\"\n    [attr.aria-disabled]=\"isButtonDisabled\"\n    aria-haspopup=\"menu\"\n    [attr.aria-expanded]=\"showDropdown\"\n    [class.disabled]=\"isButtonDisabled\"\n    [class.success]=\"status === 'success'\"\n    [class.warning]=\"status === 'warning'\"\n    [class.failure]=\"status === 'failure'\"\n    [class.small]=\"iconSize === 'small'\"\n    (click)=\"onShowHideDropdown()\"\n    (keydown.enter)=\"onShowHideDropdown()\"\n    (keydown.space)=\"onShowHideDropdown(); $event.preventDefault()\"\n    >\n        <i class=\"fas fa-chevron-down\" [ngClass]=\"[ color ]\"></i>\n    </a>\n</div>\n\n<ul class=\"options-dropdown\" *ngIf=\"options.length > 0\" role=\"menu\">\n    <li *ngFor=\"let option of options; let i = index\"\n    role=\"menuitem\"\n    [attr.tabindex]=\"isOptionDisabled(option) || !isOptionVisible(option) ? -1 : 0\"\n    [attr.aria-disabled]=\"isOptionDisabled(option)\"\n    [class.default-option]=\"i === defaultOption\"\n    [class.disabled]=\"isOptionDisabled(option)\"\n    [class.hidden]=\"!isOptionVisible(option)\"\n    (click)=\"onOptionClicked(option)\"\n    (keydown.enter)=\"onOptionClicked(option)\"\n    (keydown.space)=\"onOptionClicked(option); $event.preventDefault()\"\n    >\n        <i class=\"fas fa-fw\" *ngIf=\"!!option.icon\" [ngClass]=\"[ option.icon, color ]\"></i> {{ option.label | translate }}\n    </li>\n</ul>\n", styles: [":host-context.dropdown .button{border-top-right-radius:0;border-bottom-right-radius:0}.button-container{display:flex}.button{border-radius:.5rem;padding-left:.75rem;padding-right:.75rem}.button.success .icon i,.button.success .label,.button.warning .icon i,.button.warning .label,.button.failure .icon i,.button.failure .label{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.button.small{padding-left:.5rem;padding-right:.5rem}.button.small .icon i{height:1.75rem;font-size:1.5rem;line-height:2rem}@media (min-width: 768px){.button.small .icon i{font-size:1.25rem;line-height:1.75rem}}.button.small .icon svg{height:1.5rem}.button.small .label{font-size:.875rem;line-height:1.25rem}.button .icon{position:relative;display:flex;height:2rem;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-size:2.25rem;line-height:2.5rem}@media (min-width: 768px){.button .icon{font-size:1.875rem;line-height:2.25rem}}.button .icon i{transition-property:all;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.button .icon svg{position:absolute;height:2rem;width:2rem}@keyframes spin{to{transform:rotate(360deg)}}.button .icon svg{animation:spin 1s linear infinite;opacity:0;transition-property:opacity;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.button .icon.loading i{opacity:0}.button .icon.loading svg{opacity:1}.button .label{margin-top:.5rem;text-align:center;--tw-text-opacity: 1;color:rgb(31 41 55 / var(--tw-text-opacity, 1));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.button-dropdown{justify-content:center;border-top-right-radius:.5rem;border-bottom-right-radius:.5rem;padding-left:.25rem;padding-right:.25rem}.button-dropdown.success i,.button-dropdown.warning i,.button-dropdown.failure i{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.button-dropdown.small{font-size:.875rem;line-height:1.25rem}@media (min-width: 768px){.button-dropdown.small{font-size:1rem;line-height:1.5rem}}.button,.button-dropdown{display:flex;cursor:pointer;-webkit-user-select:none;user-select:none;flex-direction:column;padding-top:.5rem;padding-bottom:.5rem;transition-property:all;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.button:hover,.button-dropdown:hover{background-color:#d1d5dbcc}.button:focus,.button-dropdown:focus{background-color:#d1d5dbcc}.button:active,.button-dropdown:active{background-color:#9ca3af99}.button:disabled,.button.disabled,.button-dropdown:disabled,.button-dropdown.disabled{pointer-events:none;opacity:.6}.button.success,.button-dropdown.success{background-color:#16a34abf}.button.warning,.button-dropdown.warning{background-color:#ca8a04bf}.button.failure,.button-dropdown.failure{background-color:#dc2626bf}.button.small,.button-dropdown.small{padding-top:.25rem;padding-bottom:.25rem}ul{z-index:1;min-width:fit-content;-webkit-user-select:none;user-select:none}ul li{cursor:pointer;white-space:nowrap;padding:.5rem 1rem}ul li.default-option{display:none}ul li.disabled{pointer-events:none;opacity:.6}ul li:hover{--tw-bg-opacity: 1;background-color:rgb(230 244 255 / var(--tw-bg-opacity, 1))}ul li i{margin-right:.25rem}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+        return ((option.isVisible ?? true) &&
+            (option.allowedActions === undefined ||
+                option.allowedActions.length === 0 ||
+                option.isAccessAllowed === true ||
+                (option.isAccessAllowed == undefined && option.allowedActions?.length > 0)));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: RibbonButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: RibbonButtonComponent, isStandalone: true, selector: "lib-ribbon-button", inputs: { color: "color", defaultOption: "defaultOption", disabled: "disabled", icon: "icon", iconSize: "iconSize", label: "label", loading: "loading", options: "options", tooltip: "tooltip" }, outputs: { action: "action" }, host: { listeners: { "body:mousedown": "bodyMouseDown($event)", "body:mouseup": "bodyMouseUp($event)", "document:keydown.escape": "documentKeyDown($event)" }, properties: { "class.dropdown": "options.length > 0", "class.show": "showDropdown" } }, ngImport: i0, template: "<div class=\"button-container\" [attr.title]=\"tooltip || null\">\n  <a\n    class=\"button\"\n    role=\"button\"\n    [attr.tabindex]=\"isButtonDisabled ? -1 : 0\"\n    [attr.aria-disabled]=\"isButtonDisabled\"\n    [class.disabled]=\"isButtonDisabled\"\n    [class.success]=\"status === 'success'\"\n    [class.warning]=\"status === 'warning'\"\n    [class.failure]=\"status === 'failure'\"\n    [class.small]=\"iconSize === 'small'\"\n    (click)=\"onButtonClicked()\"\n    (keydown.enter)=\"onButtonClicked()\"\n    (keydown.space)=\"onButtonClicked(); $event.preventDefault()\"\n  >\n    <span class=\"icon\" [class.loading]=\"loading\">\n      <i class=\"fas fa-fw\" [ngClass]=\"[buttonIcon, color]\"></i>\n\n      <svg [ngClass]=\"[color]\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n        <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n        <path\n          class=\"opacity-75\"\n          fill=\"currentColor\"\n          d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n        ></path>\n      </svg>\n    </span>\n\n    <span class=\"label\" [class.text-white]=\"status !== null\">\n      {{ label | translate }}\n    </span>\n  </a>\n\n  @if (options.length > 0) {\n    <a\n      class=\"button-dropdown\"\n      role=\"button\"\n      [attr.tabindex]=\"isButtonDisabled ? -1 : 0\"\n      [attr.aria-disabled]=\"isButtonDisabled\"\n      aria-haspopup=\"menu\"\n      [attr.aria-expanded]=\"showDropdown\"\n      [class.disabled]=\"isButtonDisabled\"\n      [class.success]=\"status === 'success'\"\n      [class.warning]=\"status === 'warning'\"\n      [class.failure]=\"status === 'failure'\"\n      [class.small]=\"iconSize === 'small'\"\n      (click)=\"onShowHideDropdown()\"\n      (keydown.enter)=\"onShowHideDropdown()\"\n      (keydown.space)=\"onShowHideDropdown(); $event.preventDefault()\"\n    >\n      <i class=\"fas fa-chevron-down\" [ngClass]=\"[color]\"></i>\n    </a>\n  }\n</div>\n\n@if (options.length > 0) {\n  <ul class=\"options-dropdown\" role=\"menu\">\n    @for (option of options; track option; let i = $index) {\n      <li\n        role=\"menuitem\"\n        [attr.tabindex]=\"isOptionDisabled(option) || !isOptionVisible(option) ? -1 : 0\"\n        [attr.aria-disabled]=\"isOptionDisabled(option)\"\n        [class.default-option]=\"i === defaultOption\"\n        [class.disabled]=\"isOptionDisabled(option)\"\n        [class.hidden]=\"!isOptionVisible(option)\"\n        (click)=\"onOptionClicked(option)\"\n        (keydown.enter)=\"onOptionClicked(option)\"\n        (keydown.space)=\"onOptionClicked(option); $event.preventDefault()\"\n      >\n        @if (!!option.icon) {\n          <i class=\"fas fa-fw\" [ngClass]=\"[option.icon, color]\"></i>\n        }\n        {{ option.label | translate }}\n      </li>\n    }\n  </ul>\n}\n", styles: [":host-context.dropdown .button{border-top-right-radius:0;border-bottom-right-radius:0}.button-container{display:flex}.button{border-radius:.5rem;padding-left:.75rem;padding-right:.75rem}.button.success .icon i,.button.success .label,.button.warning .icon i,.button.warning .label,.button.failure .icon i,.button.failure .label{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.button.small{padding-left:.5rem;padding-right:.5rem}.button.small .icon i{height:1.75rem;font-size:1.5rem;line-height:2rem}@media(min-width:768px){.button.small .icon i{font-size:1.25rem;line-height:1.75rem}}.button.small .icon svg{height:1.5rem}.button.small .label{font-size:.875rem;line-height:1.25rem}.button .icon{position:relative;display:flex;height:2rem;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-size:2.25rem;line-height:2.5rem}@media(min-width:768px){.button .icon{font-size:1.875rem;line-height:2.25rem}}.button .icon i{transition-property:all;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.button .icon svg{position:absolute;height:2rem;width:2rem}@keyframes spin{to{transform:rotate(360deg)}}.button .icon svg{animation:spin 1s linear infinite;opacity:0;transition-property:opacity;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.button .icon.loading i{opacity:0}.button .icon.loading svg{opacity:1}.button .label{margin-top:.5rem;text-align:center;--tw-text-opacity: 1;color:rgb(31 41 55 / var(--tw-text-opacity, 1));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.button-dropdown{justify-content:center;border-top-right-radius:.5rem;border-bottom-right-radius:.5rem;padding-left:.25rem;padding-right:.25rem}.button-dropdown.success i,.button-dropdown.warning i,.button-dropdown.failure i{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.button-dropdown.small{font-size:.875rem;line-height:1.25rem}@media(min-width:768px){.button-dropdown.small{font-size:1rem;line-height:1.5rem}}.button,.button-dropdown{display:flex;cursor:pointer;-webkit-user-select:none;user-select:none;flex-direction:column;padding-top:.5rem;padding-bottom:.5rem;transition-property:all;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.button:hover,.button-dropdown:hover{background-color:#d1d5dbcc}.button:focus,.button-dropdown:focus{background-color:#d1d5dbcc}.button:active,.button-dropdown:active{background-color:#9ca3af99}.button:disabled,.button.disabled,.button-dropdown:disabled,.button-dropdown.disabled{pointer-events:none;opacity:.6}.button.success,.button-dropdown.success{background-color:#16a34abf}.button.warning,.button-dropdown.warning{background-color:#ca8a04bf}.button.failure,.button-dropdown.failure{background-color:#dc2626bf}.button.small,.button-dropdown.small{padding-top:.25rem;padding-bottom:.25rem}ul{z-index:1;min-width:fit-content;-webkit-user-select:none;user-select:none}ul li{cursor:pointer;white-space:nowrap;padding:.5rem 1rem}ul li.default-option{display:none}ul li.disabled{pointer-events:none;opacity:.6}ul li:hover{--tw-bg-opacity: 1;background-color:rgb(230 244 255 / var(--tw-bg-opacity, 1))}ul li i{margin-right:.25rem}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: RibbonButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: RibbonButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-ribbon-button', host: {
                         '[class.dropdown]': 'options.length > 0',
                         '[class.show]': 'showDropdown',
-                    }, imports: [
-                        NgClass,
-                        NgFor,
-                        NgIf,
-                        TranslatePipe,
-                    ], template: "<div class=\"button-container\"\n[attr.title]=\"tooltip || null\">\n    <a class=\"button\"\n    role=\"button\"\n    [attr.tabindex]=\"isButtonDisabled ? -1 : 0\"\n    [attr.aria-disabled]=\"isButtonDisabled\"\n    [class.disabled]=\"isButtonDisabled\"\n    [class.success]=\"status === 'success'\"\n    [class.warning]=\"status === 'warning'\"\n    [class.failure]=\"status === 'failure'\"\n    [class.small]=\"iconSize === 'small'\"\n    (click)=\"onButtonClicked()\"\n    (keydown.enter)=\"onButtonClicked()\"\n    (keydown.space)=\"onButtonClicked(); $event.preventDefault()\"\n    >\n        <span class=\"icon\" [class.loading]=\"loading\">\n            <i class=\"fas fa-fw\" [ngClass]=\"[ buttonIcon, color ]\"></i>\n            \n            <svg [ngClass]=\"[ color ]\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n                <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n                <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n            </svg>\n        </span>\n    \n        <span class=\"label\" [class.text-white]=\"status !== null\">\n            {{ label | translate }}\n        </span>\n    </a>\n    \n    <a class=\"button-dropdown\" *ngIf=\"options.length > 0\"\n    role=\"button\"\n    [attr.tabindex]=\"isButtonDisabled ? -1 : 0\"\n    [attr.aria-disabled]=\"isButtonDisabled\"\n    aria-haspopup=\"menu\"\n    [attr.aria-expanded]=\"showDropdown\"\n    [class.disabled]=\"isButtonDisabled\"\n    [class.success]=\"status === 'success'\"\n    [class.warning]=\"status === 'warning'\"\n    [class.failure]=\"status === 'failure'\"\n    [class.small]=\"iconSize === 'small'\"\n    (click)=\"onShowHideDropdown()\"\n    (keydown.enter)=\"onShowHideDropdown()\"\n    (keydown.space)=\"onShowHideDropdown(); $event.preventDefault()\"\n    >\n        <i class=\"fas fa-chevron-down\" [ngClass]=\"[ color ]\"></i>\n    </a>\n</div>\n\n<ul class=\"options-dropdown\" *ngIf=\"options.length > 0\" role=\"menu\">\n    <li *ngFor=\"let option of options; let i = index\"\n    role=\"menuitem\"\n    [attr.tabindex]=\"isOptionDisabled(option) || !isOptionVisible(option) ? -1 : 0\"\n    [attr.aria-disabled]=\"isOptionDisabled(option)\"\n    [class.default-option]=\"i === defaultOption\"\n    [class.disabled]=\"isOptionDisabled(option)\"\n    [class.hidden]=\"!isOptionVisible(option)\"\n    (click)=\"onOptionClicked(option)\"\n    (keydown.enter)=\"onOptionClicked(option)\"\n    (keydown.space)=\"onOptionClicked(option); $event.preventDefault()\"\n    >\n        <i class=\"fas fa-fw\" *ngIf=\"!!option.icon\" [ngClass]=\"[ option.icon, color ]\"></i> {{ option.label | translate }}\n    </li>\n</ul>\n", styles: [":host-context.dropdown .button{border-top-right-radius:0;border-bottom-right-radius:0}.button-container{display:flex}.button{border-radius:.5rem;padding-left:.75rem;padding-right:.75rem}.button.success .icon i,.button.success .label,.button.warning .icon i,.button.warning .label,.button.failure .icon i,.button.failure .label{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.button.small{padding-left:.5rem;padding-right:.5rem}.button.small .icon i{height:1.75rem;font-size:1.5rem;line-height:2rem}@media (min-width: 768px){.button.small .icon i{font-size:1.25rem;line-height:1.75rem}}.button.small .icon svg{height:1.5rem}.button.small .label{font-size:.875rem;line-height:1.25rem}.button .icon{position:relative;display:flex;height:2rem;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-size:2.25rem;line-height:2.5rem}@media (min-width: 768px){.button .icon{font-size:1.875rem;line-height:2.25rem}}.button .icon i{transition-property:all;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.button .icon svg{position:absolute;height:2rem;width:2rem}@keyframes spin{to{transform:rotate(360deg)}}.button .icon svg{animation:spin 1s linear infinite;opacity:0;transition-property:opacity;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.button .icon.loading i{opacity:0}.button .icon.loading svg{opacity:1}.button .label{margin-top:.5rem;text-align:center;--tw-text-opacity: 1;color:rgb(31 41 55 / var(--tw-text-opacity, 1));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.button-dropdown{justify-content:center;border-top-right-radius:.5rem;border-bottom-right-radius:.5rem;padding-left:.25rem;padding-right:.25rem}.button-dropdown.success i,.button-dropdown.warning i,.button-dropdown.failure i{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.button-dropdown.small{font-size:.875rem;line-height:1.25rem}@media (min-width: 768px){.button-dropdown.small{font-size:1rem;line-height:1.5rem}}.button,.button-dropdown{display:flex;cursor:pointer;-webkit-user-select:none;user-select:none;flex-direction:column;padding-top:.5rem;padding-bottom:.5rem;transition-property:all;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.button:hover,.button-dropdown:hover{background-color:#d1d5dbcc}.button:focus,.button-dropdown:focus{background-color:#d1d5dbcc}.button:active,.button-dropdown:active{background-color:#9ca3af99}.button:disabled,.button.disabled,.button-dropdown:disabled,.button-dropdown.disabled{pointer-events:none;opacity:.6}.button.success,.button-dropdown.success{background-color:#16a34abf}.button.warning,.button-dropdown.warning{background-color:#ca8a04bf}.button.failure,.button-dropdown.failure{background-color:#dc2626bf}.button.small,.button-dropdown.small{padding-top:.25rem;padding-bottom:.25rem}ul{z-index:1;min-width:fit-content;-webkit-user-select:none;user-select:none}ul li{cursor:pointer;white-space:nowrap;padding:.5rem 1rem}ul li.default-option{display:none}ul li.disabled{pointer-events:none;opacity:.6}ul li:hover{--tw-bg-opacity: 1;background-color:rgb(230 244 255 / var(--tw-bg-opacity, 1))}ul li i{margin-right:.25rem}\n"] }]
+                    }, changeDetection: ChangeDetectionStrategy.Eager, imports: [NgClass, TranslatePipe], template: "<div class=\"button-container\" [attr.title]=\"tooltip || null\">\n  <a\n    class=\"button\"\n    role=\"button\"\n    [attr.tabindex]=\"isButtonDisabled ? -1 : 0\"\n    [attr.aria-disabled]=\"isButtonDisabled\"\n    [class.disabled]=\"isButtonDisabled\"\n    [class.success]=\"status === 'success'\"\n    [class.warning]=\"status === 'warning'\"\n    [class.failure]=\"status === 'failure'\"\n    [class.small]=\"iconSize === 'small'\"\n    (click)=\"onButtonClicked()\"\n    (keydown.enter)=\"onButtonClicked()\"\n    (keydown.space)=\"onButtonClicked(); $event.preventDefault()\"\n  >\n    <span class=\"icon\" [class.loading]=\"loading\">\n      <i class=\"fas fa-fw\" [ngClass]=\"[buttonIcon, color]\"></i>\n\n      <svg [ngClass]=\"[color]\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n        <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n        <path\n          class=\"opacity-75\"\n          fill=\"currentColor\"\n          d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n        ></path>\n      </svg>\n    </span>\n\n    <span class=\"label\" [class.text-white]=\"status !== null\">\n      {{ label | translate }}\n    </span>\n  </a>\n\n  @if (options.length > 0) {\n    <a\n      class=\"button-dropdown\"\n      role=\"button\"\n      [attr.tabindex]=\"isButtonDisabled ? -1 : 0\"\n      [attr.aria-disabled]=\"isButtonDisabled\"\n      aria-haspopup=\"menu\"\n      [attr.aria-expanded]=\"showDropdown\"\n      [class.disabled]=\"isButtonDisabled\"\n      [class.success]=\"status === 'success'\"\n      [class.warning]=\"status === 'warning'\"\n      [class.failure]=\"status === 'failure'\"\n      [class.small]=\"iconSize === 'small'\"\n      (click)=\"onShowHideDropdown()\"\n      (keydown.enter)=\"onShowHideDropdown()\"\n      (keydown.space)=\"onShowHideDropdown(); $event.preventDefault()\"\n    >\n      <i class=\"fas fa-chevron-down\" [ngClass]=\"[color]\"></i>\n    </a>\n  }\n</div>\n\n@if (options.length > 0) {\n  <ul class=\"options-dropdown\" role=\"menu\">\n    @for (option of options; track option; let i = $index) {\n      <li\n        role=\"menuitem\"\n        [attr.tabindex]=\"isOptionDisabled(option) || !isOptionVisible(option) ? -1 : 0\"\n        [attr.aria-disabled]=\"isOptionDisabled(option)\"\n        [class.default-option]=\"i === defaultOption\"\n        [class.disabled]=\"isOptionDisabled(option)\"\n        [class.hidden]=\"!isOptionVisible(option)\"\n        (click)=\"onOptionClicked(option)\"\n        (keydown.enter)=\"onOptionClicked(option)\"\n        (keydown.space)=\"onOptionClicked(option); $event.preventDefault()\"\n      >\n        @if (!!option.icon) {\n          <i class=\"fas fa-fw\" [ngClass]=\"[option.icon, color]\"></i>\n        }\n        {{ option.label | translate }}\n      </li>\n    }\n  </ul>\n}\n", styles: [":host-context.dropdown .button{border-top-right-radius:0;border-bottom-right-radius:0}.button-container{display:flex}.button{border-radius:.5rem;padding-left:.75rem;padding-right:.75rem}.button.success .icon i,.button.success .label,.button.warning .icon i,.button.warning .label,.button.failure .icon i,.button.failure .label{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.button.small{padding-left:.5rem;padding-right:.5rem}.button.small .icon i{height:1.75rem;font-size:1.5rem;line-height:2rem}@media(min-width:768px){.button.small .icon i{font-size:1.25rem;line-height:1.75rem}}.button.small .icon svg{height:1.5rem}.button.small .label{font-size:.875rem;line-height:1.25rem}.button .icon{position:relative;display:flex;height:2rem;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-size:2.25rem;line-height:2.5rem}@media(min-width:768px){.button .icon{font-size:1.875rem;line-height:2.25rem}}.button .icon i{transition-property:all;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.button .icon svg{position:absolute;height:2rem;width:2rem}@keyframes spin{to{transform:rotate(360deg)}}.button .icon svg{animation:spin 1s linear infinite;opacity:0;transition-property:opacity;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.button .icon.loading i{opacity:0}.button .icon.loading svg{opacity:1}.button .label{margin-top:.5rem;text-align:center;--tw-text-opacity: 1;color:rgb(31 41 55 / var(--tw-text-opacity, 1));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.button-dropdown{justify-content:center;border-top-right-radius:.5rem;border-bottom-right-radius:.5rem;padding-left:.25rem;padding-right:.25rem}.button-dropdown.success i,.button-dropdown.warning i,.button-dropdown.failure i{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.button-dropdown.small{font-size:.875rem;line-height:1.25rem}@media(min-width:768px){.button-dropdown.small{font-size:1rem;line-height:1.5rem}}.button,.button-dropdown{display:flex;cursor:pointer;-webkit-user-select:none;user-select:none;flex-direction:column;padding-top:.5rem;padding-bottom:.5rem;transition-property:all;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.button:hover,.button-dropdown:hover{background-color:#d1d5dbcc}.button:focus,.button-dropdown:focus{background-color:#d1d5dbcc}.button:active,.button-dropdown:active{background-color:#9ca3af99}.button:disabled,.button.disabled,.button-dropdown:disabled,.button-dropdown.disabled{pointer-events:none;opacity:.6}.button.success,.button-dropdown.success{background-color:#16a34abf}.button.warning,.button-dropdown.warning{background-color:#ca8a04bf}.button.failure,.button-dropdown.failure{background-color:#dc2626bf}.button.small,.button-dropdown.small{padding-top:.25rem;padding-bottom:.25rem}ul{z-index:1;min-width:fit-content;-webkit-user-select:none;user-select:none}ul li{cursor:pointer;white-space:nowrap;padding:.5rem 1rem}ul li.default-option{display:none}ul li.disabled{pointer-events:none;opacity:.6}ul li:hover{--tw-bg-opacity: 1;background-color:rgb(230 244 255 / var(--tw-bg-opacity, 1))}ul li i{margin-right:.25rem}\n"] }]
         }], propDecorators: { color: [{
                 type: Input
             }], defaultOption: [{
@@ -3795,12 +3656,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
             }] } });
 
 class RibbonComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: RibbonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: RibbonComponent, isStandalone: true, selector: "lib-ribbon", ngImport: i0, template: "<div>\n    <ng-content></ng-content>\n</div>\n\n<ng-content select=\"[right]\"></ng-content>", styles: ["@charset \"UTF-8\";::ng-deep lib-ribbon:not(:has(lib-ribbon-group:not(.hidden))):not(:has(>div>*:not(lib-ribbon-group))){display:none}:host-context{position:relative;display:flex;flex-direction:row;border-radius:.5rem;border-width:1px;padding:.25rem;border-color:#d1d5dbe6;background-color:#e5e7ebcc;justify-content:space-between}:host-context div{display:inline-flex;gap:.5rem}:host-context ::ng-deep *[right]{display:flex}:host-context ::ng-deep *[right] lib-ribbon-group{margin-right:.5rem;margin-left:0}:host-context ::ng-deep *[right] lib-ribbon-group:first-child{margin-right:0;padding-right:0;padding-left:.5rem}:host-context ::ng-deep *[right] lib-ribbon-group:after{left:-.25rem}:host-context ::ng-deep *[right] lib-ribbon-group lib-ribbon-button .options-dropdown{right:0}\n"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: RibbonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: RibbonComponent, isStandalone: true, selector: "lib-ribbon", ngImport: i0, template: "<div>\n  <ng-content></ng-content>\n</div>\n\n<ng-content select=\"[right]\"></ng-content>\n", styles: ["@charset \"UTF-8\";::ng-deep lib-ribbon:not(:has(lib-ribbon-group:not(.hidden))):not(:has(>div>*:not(lib-ribbon-group))){display:none}:host-context{position:relative;display:flex;flex-direction:row;border-radius:.5rem;border-width:1px;padding:.25rem;border-color:#d1d5dbe6;background-color:#e5e7ebcc;justify-content:space-between}:host-context div{display:inline-flex;gap:.5rem}:host-context ::ng-deep *[right]{display:flex}:host-context ::ng-deep *[right] lib-ribbon-group{margin-right:.5rem;margin-left:0}:host-context ::ng-deep *[right] lib-ribbon-group:first-child{margin-right:0;padding-right:0;padding-left:.5rem}:host-context ::ng-deep *[right] lib-ribbon-group:after{left:-.25rem}:host-context ::ng-deep *[right] lib-ribbon-group lib-ribbon-button .options-dropdown{right:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: RibbonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: RibbonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-ribbon', template: "<div>\n    <ng-content></ng-content>\n</div>\n\n<ng-content select=\"[right]\"></ng-content>", styles: ["@charset \"UTF-8\";::ng-deep lib-ribbon:not(:has(lib-ribbon-group:not(.hidden))):not(:has(>div>*:not(lib-ribbon-group))){display:none}:host-context{position:relative;display:flex;flex-direction:row;border-radius:.5rem;border-width:1px;padding:.25rem;border-color:#d1d5dbe6;background-color:#e5e7ebcc;justify-content:space-between}:host-context div{display:inline-flex;gap:.5rem}:host-context ::ng-deep *[right]{display:flex}:host-context ::ng-deep *[right] lib-ribbon-group{margin-right:.5rem;margin-left:0}:host-context ::ng-deep *[right] lib-ribbon-group:first-child{margin-right:0;padding-right:0;padding-left:.5rem}:host-context ::ng-deep *[right] lib-ribbon-group:after{left:-.25rem}:host-context ::ng-deep *[right] lib-ribbon-group lib-ribbon-button .options-dropdown{right:0}\n"] }]
+            args: [{ selector: 'lib-ribbon', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div>\n  <ng-content></ng-content>\n</div>\n\n<ng-content select=\"[right]\"></ng-content>\n", styles: ["@charset \"UTF-8\";::ng-deep lib-ribbon:not(:has(lib-ribbon-group:not(.hidden))):not(:has(>div>*:not(lib-ribbon-group))){display:none}:host-context{position:relative;display:flex;flex-direction:row;border-radius:.5rem;border-width:1px;padding:.25rem;border-color:#d1d5dbe6;background-color:#e5e7ebcc;justify-content:space-between}:host-context div{display:inline-flex;gap:.5rem}:host-context ::ng-deep *[right]{display:flex}:host-context ::ng-deep *[right] lib-ribbon-group{margin-right:.5rem;margin-left:0}:host-context ::ng-deep *[right] lib-ribbon-group:first-child{margin-right:0;padding-right:0;padding-left:.5rem}:host-context ::ng-deep *[right] lib-ribbon-group:after{left:-.25rem}:host-context ::ng-deep *[right] lib-ribbon-group lib-ribbon-button .options-dropdown{right:0}\n"] }]
         }] });
 
 class RibbonGroupComponent {
@@ -3814,14 +3675,14 @@ class RibbonGroupComponent {
     //#endregion
     //#region Properties
     get hasChildren() {
-        return this.children?.some(x => x.visible) ?? false;
+        return this.children?.some((x) => x.visible) ?? false;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: RibbonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: RibbonGroupComponent, isStandalone: true, selector: "lib-ribbon-group", inputs: { label: "label" }, host: { properties: { "class.hidden": "!hasChildren" } }, queries: [{ propertyName: "children", predicate: RibbonGroupChild, descendants: true }], ngImport: i0, template: "<div class=\"content\">\n    <ng-content></ng-content>\n</div>\n\n<div class=\"label\">\n    <span>{{ label }}</span>\n</div>", styles: [":host-context{position:relative;padding-right:.5rem}:host-context:after{position:absolute;right:-.25rem;top:.25rem;bottom:.25rem;width:1px;--tw-content: \"\";content:var(--tw-content);background-color:#9ca3af99}:host-context .content{display:flex;flex-direction:row;flex-wrap:nowrap}:host-context .label{-webkit-user-select:none;user-select:none;padding-top:.05rem;text-align:center;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}\n"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: RibbonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: RibbonGroupComponent, isStandalone: true, selector: "lib-ribbon-group", inputs: { label: "label" }, host: { properties: { "class.hidden": "!hasChildren" } }, queries: [{ propertyName: "children", predicate: RibbonGroupChild, descendants: true }], ngImport: i0, template: "<div class=\"content\">\n  <ng-content></ng-content>\n</div>\n\n<div class=\"label\">\n  <span>{{ label }}</span>\n</div>\n", styles: [":host-context{position:relative;padding-right:.5rem}:host-context:after{position:absolute;right:-.25rem;top:.25rem;bottom:.25rem;width:1px;--tw-content: \"\";content:var(--tw-content);background-color:#9ca3af99}:host-context .content{display:flex;flex-direction:row;flex-wrap:nowrap}:host-context .label{-webkit-user-select:none;user-select:none;padding-top:.05rem;text-align:center;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: RibbonGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: RibbonGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-ribbon-group', host: { '[class.hidden]': '!hasChildren' }, template: "<div class=\"content\">\n    <ng-content></ng-content>\n</div>\n\n<div class=\"label\">\n    <span>{{ label }}</span>\n</div>", styles: [":host-context{position:relative;padding-right:.5rem}:host-context:after{position:absolute;right:-.25rem;top:.25rem;bottom:.25rem;width:1px;--tw-content: \"\";content:var(--tw-content);background-color:#9ca3af99}:host-context .content{display:flex;flex-direction:row;flex-wrap:nowrap}:host-context .label{-webkit-user-select:none;user-select:none;padding-top:.05rem;text-align:center;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}\n"] }]
+            args: [{ selector: 'lib-ribbon-group', changeDetection: ChangeDetectionStrategy.Eager, host: { '[class.hidden]': '!hasChildren' }, template: "<div class=\"content\">\n  <ng-content></ng-content>\n</div>\n\n<div class=\"label\">\n  <span>{{ label }}</span>\n</div>\n", styles: [":host-context{position:relative;padding-right:.5rem}:host-context:after{position:absolute;right:-.25rem;top:.25rem;bottom:.25rem;width:1px;--tw-content: \"\";content:var(--tw-content);background-color:#9ca3af99}:host-context .content{display:flex;flex-direction:row;flex-wrap:nowrap}:host-context .label{-webkit-user-select:none;user-select:none;padding-top:.05rem;text-align:center;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}\n"] }]
         }], propDecorators: { children: [{
                 type: ContentChildren,
                 args: [RibbonGroupChild, { descendants: true }]
@@ -3844,19 +3705,19 @@ class EnumTranslatePipe {
     //#region Public methods
     transform(enumType) {
         return Object.keys(enumType)
-            .filter(key => isNaN(Number(key)))
-            .map(key => ({
+            .filter((key) => isNaN(Number(key)))
+            .map((key) => ({
             value: enumType[key],
             display: this.translate.get(key),
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: EnumTranslatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.1.6", ngImport: i0, type: EnumTranslatePipe, isStandalone: true, name: "enumTranslate" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: EnumTranslatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: EnumTranslatePipe, isStandalone: true, name: "enumTranslate" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: EnumTranslatePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: EnumTranslatePipe, decorators: [{
             type: Pipe,
             args: [{
-                    name: 'enumTranslate'
+                    name: 'enumTranslate',
                 }]
         }] });
 
@@ -3880,13 +3741,13 @@ class ReplaceManyPipe {
         }
         return message;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: ReplaceManyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.1.6", ngImport: i0, type: ReplaceManyPipe, isStandalone: true, name: "replaceMany" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: ReplaceManyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: ReplaceManyPipe, isStandalone: true, name: "replaceMany" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: ReplaceManyPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: ReplaceManyPipe, decorators: [{
             type: Pipe,
             args: [{
-                    name: 'replaceMany'
+                    name: 'replaceMany',
                 }]
         }] });
 
@@ -3905,13 +3766,13 @@ class ReplacePipe {
     transform(message, searchValue, replaceValue) {
         return message.replace(searchValue, replaceValue ?? '');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: ReplacePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.1.6", ngImport: i0, type: ReplacePipe, isStandalone: true, name: "replace" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: ReplacePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: ReplacePipe, isStandalone: true, name: "replace" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: ReplacePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: ReplacePipe, decorators: [{
             type: Pipe,
             args: [{
-                    name: 'replace'
+                    name: 'replace',
                 }]
         }] });
 
@@ -3920,19 +3781,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
  * Import individual components directly in your component's `imports` array.
  */
 class LibraryModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: LibraryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.6", ngImport: i0, type: LibraryModule, imports: [CatalogSelectComponent, DataGridComponent, DataGridRowComponent, FormInputComponent, FormInputGroupComponent, FormGroupComponent, GroupAccordionComponent, GroupContainerComponent, GroupScrollSpyComponent, SidebarComponent, ModalComponent, MultiEditorComponent, MultiSelectComponent, MultiSelectResultGridComponent, RibbonComponent, RibbonButtonComponent, RibbonGroupComponent, ScrollSpyDirective, EnumTranslatePipe, ReplacePipe, ReplaceManyPipe], exports: [CatalogSelectComponent, DataGridComponent, DataGridRowComponent, FormInputComponent, FormInputGroupComponent, FormGroupComponent, GroupAccordionComponent, GroupContainerComponent, GroupScrollSpyComponent, SidebarComponent, ModalComponent, MultiEditorComponent, MultiSelectComponent, MultiSelectResultGridComponent, RibbonComponent, RibbonButtonComponent, RibbonGroupComponent, ScrollSpyDirective, EnumTranslatePipe, ReplacePipe, ReplaceManyPipe] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: LibraryModule, imports: [CatalogSelectComponent,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: LibraryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: LibraryModule, imports: [CatalogSelectComponent, DataGridComponent, DataGridRowComponent, FormInputComponent, FormInputGroupComponent, FormGroupComponent, GroupAccordionComponent, GroupContainerComponent, GroupScrollSpyComponent, SidebarComponent, ModalComponent, MultiEditorComponent, MultiSelectComponent, MultiSelectResultGridComponent, RibbonComponent, RibbonButtonComponent, RibbonGroupComponent, ScrollSpyDirective, EnumTranslatePipe, ReplacePipe, ReplaceManyPipe], exports: [CatalogSelectComponent, DataGridComponent, DataGridRowComponent, FormInputComponent, FormInputGroupComponent, FormGroupComponent, GroupAccordionComponent, GroupContainerComponent, GroupScrollSpyComponent, SidebarComponent, ModalComponent, MultiEditorComponent, MultiSelectComponent, MultiSelectResultGridComponent, RibbonComponent, RibbonButtonComponent, RibbonGroupComponent, ScrollSpyDirective, EnumTranslatePipe, ReplacePipe, ReplaceManyPipe] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: LibraryModule, imports: [CatalogSelectComponent,
             DataGridComponent,
             DataGridRowComponent,
             FormInputComponent,
             FormInputGroupComponent,
-            SidebarComponent,
             MultiEditorComponent,
             MultiSelectComponent,
             MultiSelectResultGridComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: LibraryModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: LibraryModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [],
@@ -3981,7 +3841,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
                         EnumTranslatePipe,
                         ReplacePipe,
                         ReplaceManyPipe,
-                    ]
+                    ],
                 }]
         }] });
 
@@ -3995,17 +3855,16 @@ class DataGridConfigsProvider extends GridConfigsProvider {
     //#region Constructor and Angular life cycle methods
     constructor() {
         super();
-        this._configs =
-            {
-                ...this._configs,
-                multiSelect: false,
-                multiSelectSize: 'minmax(1.5rem, min-content)',
-            };
+        this._configs = {
+            ...this._configs,
+            multiSelect: false,
+            multiSelectSize: 'minmax(1.5rem, min-content)',
+        };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: DataGridConfigsProvider, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: DataGridConfigsProvider });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: DataGridConfigsProvider, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: DataGridConfigsProvider });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: DataGridConfigsProvider, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: DataGridConfigsProvider, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -4015,7 +3874,7 @@ class DateValidators {
         return (control) => {
             const compareControl = control.parent?.get(controlName);
             if (!!control.value && !!compareControl?.value && new Date(control.value) <= new Date(compareControl?.value)) {
-                return { 'greaterThanControl': true };
+                return { greaterThanControl: true };
             }
             return null;
         };
@@ -4024,7 +3883,7 @@ class DateValidators {
         return (control) => {
             const compareControl = control.parent?.get(controlName);
             if (!!control.value && !!compareControl?.value && new Date(control.value) < new Date(compareControl?.value)) {
-                return { 'greaterThanOrEqualControl': true };
+                return { greaterThanOrEqualControl: true };
             }
             return null;
         };
@@ -4032,14 +3891,14 @@ class DateValidators {
     static greaterThanOrEqualToday(control) {
         const today = new Date();
         if (!!control.value && new Date(control.value) < today) {
-            return { 'greaterThanOrEqualToday': true };
+            return { greaterThanOrEqualToday: true };
         }
         return null;
     }
     static greaterThanToday(control) {
         const today = new Date();
         if (!!control.value && new Date(control.value) <= today) {
-            return { 'greaterThanToday': true };
+            return { greaterThanToday: true };
         }
         return null;
     }
@@ -4047,7 +3906,7 @@ class DateValidators {
         return (control) => {
             const compareControl = control.parent?.get(controlName);
             if (!!control.value && !!compareControl?.value && new Date(control.value) >= new Date(compareControl?.value)) {
-                return { 'lessThanControl': true };
+                return { lessThanControl: true };
             }
             return null;
         };
@@ -4056,7 +3915,7 @@ class DateValidators {
         return (control) => {
             const compareControl = control.parent?.get(controlName);
             if (!!control.value && !!compareControl?.value && new Date(control.value) > new Date(compareControl?.value)) {
-                return { 'lessThanOrEqualControl': true };
+                return { lessThanOrEqualControl: true };
             }
             return null;
         };
@@ -4064,21 +3923,21 @@ class DateValidators {
     static lessThanOrEqualToday(control) {
         const today = new Date();
         if (!!control.value && new Date(control.value) > today) {
-            return { 'lessThanOrEqualToday': true };
+            return { lessThanOrEqualToday: true };
         }
         return null;
     }
     static lessThanToday(control) {
         const today = new Date();
         if (!!control.value && new Date(control.value) >= today) {
-            return { 'lessThanToday': true };
+            return { lessThanToday: true };
         }
         return null;
     }
     static maxDate(maxDate) {
         return (control) => {
             if (!!control.value && new Date(control.value) > maxDate) {
-                return { 'maxDate': true };
+                return { maxDate: true };
             }
             return null;
         };
@@ -4086,7 +3945,7 @@ class DateValidators {
     static minDate(minDate) {
         return (control) => {
             if (!!control.value && new Date(control.value) < minDate) {
-                return { 'minDate': true };
+                return { minDate: true };
             }
             return null;
         };