@zambon-dev/library 1.0.0

package/fesm2022/zambon-dev-library.mjs

@@ -0,0 +1,3795 @@
+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 { Subject, ReplaySubject, take, tap, map, takeUntil, filter, debounceTime, startWith, pairwise, Observable, forkJoin, switchMap, of, delay } 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 { TranslatePipe, TranslateService } from '@ngx-translate/core';
+import { HttpClient } from '@angular/common/http';
+import { ActivatedRoute, Router, NavigationStart, NavigationEnd } from '@angular/router';
+import * as i1$2 from '@angular/cdk/scrolling';
+import { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
+import * as i2 from 'ngx-resize-observer';
+import { NgxResizeObserverModule } from 'ngx-resize-observer';
+
+class BaseComponent {
+    //#region ViewChilds, Inputs, Outputs
+    //#endregion
+    //#region Host listeners
+    //#endregion
+    //#region Variables
+    destroy$ = new Subject();
+    //#endregion
+    //#region Properties
+    //#endregion
+    //#region Constructor and Angular life cycle methods
+    ngOnDestroy() {
+        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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: BaseComponent, decorators: [{
+            type: Component,
+            args: [{ template: '' }]
+        }] });
+
+class CatalogService {
+    //#region ViewChilds, Inputs, Outputs
+    //#endregion
+    //#region Variables
+    http = inject(HttpClient);
+    //#endregion
+    //#region Properties
+    //#endregion
+    //#region Constructor and Angular life cycle methods
+    //#endregion
+    //#region Event handlers
+    //#endregion
+    //#region Public methods
+    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' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: CatalogService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class DataProviderService {
+    //#region ViewChilds, Inputs, Outputs
+    //#endregion
+    //#region Variables
+    activatedRoute = inject(ActivatedRoute);
+    destroy$ = new Subject();
+    shouldLazyLoad = false;
+    _entityID;
+    errorSubject = new Subject();
+    isLoading = false;
+    isModelLoaded = false;
+    modelCache = new ReplaySubject(1);
+    //#endregion
+    //#region Properties
+    get entityID() {
+        return this._entityID;
+    }
+    get hasEntityID() {
+        return !!this.entityID;
+    }
+    //#endregion
+    //#region Constructor and Angular life cycle methods
+    constructor() {
+        this.activatedRoute.paramMap
+            .pipe(take(1))
+            .subscribe((paramMap) => {
+            const newID = Number(paramMap.get('id'));
+            if (newID !== this.entityID) {
+                this._entityID = newID;
+                // Need to wait for the data-provider to be initialized.
+                queueMicrotask(() => {
+                    // When lazy loading, the model should be loaded by the consuming component.
+                    if (!this.shouldLazyLoad) {
+                        this.refreshModel();
+                    }
+                });
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.destroy$.next(true);
+        this.destroy$.complete();
+    }
+    //#endregion
+    //#region Event handlers
+    //#endregion
+    //#region Public methods
+    getError$() {
+        return this.errorSubject.asObservable();
+    }
+    getModel$() {
+        if (!this.isModelLoaded && !this.shouldLazyLoad) {
+            this.refreshModel();
+        }
+        return this.modelCache.asObservable();
+    }
+    refreshModel() {
+        if (this.isLoading) {
+            return;
+        }
+        this.isLoading = true;
+        this.loadModel(this.entityID)
+            .pipe(take(1))
+            .subscribe({
+            next: (model) => {
+                this.isLoading = false;
+                this.updateModel(model);
+            },
+            error: (error) => {
+                this.isLoading = false;
+                this.isModelLoaded = true;
+                this.modelCache.next(null);
+                this.errorSubject.next(error);
+            },
+        });
+    }
+    resetForNewEntity() {
+        this._entityID = undefined;
+        this.isModelLoaded = false;
+        this.modelCache.next(null);
+    }
+    updateModel(model) {
+        this.isModelLoaded = true;
+        // Update entity ID if changed.
+        if (model && model.id !== this.entityID) {
+            this._entityID = model.id;
+        }
+        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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: DataProviderService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+class BaseDataset {
+    //#region ViewChilds, Inputs, Outputs
+    //#endregion
+    //#region Variables
+    dataProvider;
+    destroy$ = new Subject();
+    // TODO: Remove.
+    _parentEntityId;
+    //#endregion
+    //#region Properties
+    // TODO: Remove.
+    get parentEntityId() {
+        return this._parentEntityId;
+    }
+    set parentEntityId(value) {
+        this._parentEntityId = value;
+    }
+    //#endregion
+    //#region Constructor and Angular life cycle methods
+    constructor() {
+        this.dataProvider = inject(DataProviderService, { optional: true });
+    }
+    ngOnDestroy() {
+        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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: BaseDataset, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+class DateHelpers {
+    //#region Public methods
+    static diffDays(initialDate, finalDate) {
+        const initialDateOnly = new Date(initialDate.getFullYear(), initialDate.getMonth(), initialDate.getDate());
+        const finalDateOnly = new Date(finalDate.getFullYear(), finalDate.getMonth(), finalDate.getDate());
+        const diff = initialDateOnly.getTime() - finalDateOnly.getTime();
+        return Math.floor(diff / (1000 * 60 * 60 * 24));
+    }
+}
+
+class GuidHelper {
+    static generateGUID() {
+        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+            const r = (Math.random() * 16) | 0;
+            const v = c === 'x' ? r : (r & 0x3) | 0x8;
+            return v.toString(16);
+        });
+    }
+}
+
+class RouterFormatter {
+    //#region ViewChilds, Inputs, Outputs
+    //#endregion
+    //#region Variables
+    //#endregion
+    //#region Properties
+    //#endregion
+    //#region Constructor and Angular life cycle methods
+    //#endregion
+    //#region Event handlers
+    //#endregion
+    //#region Public methods
+    static getURL(route) {
+        let parentRoute = '';
+        if (route.parent) {
+            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) ?? ''));
+        });
+        if (!route.parent || (parentRoute !== '' && parentRoute !== '/' && route.routeConfig?.path && path)) {
+            parentRoute += '/';
+        }
+        return parentRoute + path;
+    }
+}
+
+class GridConfigsProvider {
+    //#region ViewChilds, Inputs, Outputs
+    //#endregion
+    //#region Variables
+    _configs;
+    //#endregion
+    //#region Properties
+    get configs() {
+        return this._configs;
+    }
+    //#endregion
+    //#region Constructor and Angular life cycle methods
+    constructor() {
+        this._configs = {
+            loadingDisplayText: 'Loading...',
+            messageOnEmpty: 'No results',
+            recordBlockSize: 100,
+            rowHeight: 41.6,
+            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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: GridConfigsProvider, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+const KEY_FIELD = '_key';
+class GridDataset extends BaseDataset {
+    //#region ViewChilds, Inputs, Outputs
+    //#endregion
+    //#region Variables
+    configs;
+    filtersChanged = new EventEmitter();
+    isLoading = false;
+    loadedLastRow = false;
+    loadFinished = new EventEmitter();
+    loadStarted = new EventEmitter();
+    compareProperty = 'id';
+    configsProvider;
+    focusedRow = null;
+    recordBlock = 0;
+    _hasBeenLoaded = false;
+    _loadedKeys;
+    _loadedRows;
+    queryFilters;
+    //#endregion
+    //#region Properties
+    get filters() {
+        return this.queryFilters;
+    }
+    get hasBeenLoaded() {
+        return this._hasBeenLoaded;
+    }
+    get hasLoadedRows() {
+        return !!this._loadedRows && this._loadedRows.length > 0;
+    }
+    get keyProperty() {
+        return this.compareProperty;
+    }
+    get loadedKeys() {
+        return this._loadedKeys;
+    }
+    get loadedRows() {
+        return this._loadedRows;
+    }
+    get parentEntityId() {
+        return super.parentEntityId;
+    }
+    set parentEntityId(value) {
+        super.parentEntityId = value;
+        if (!!this.loadedRows) {
+            this.refresh();
+        }
+    }
+    //#endregion
+    //#region Constructor and Angular life cycle methods
+    constructor() {
+        super();
+        this.configsProvider = inject(GridConfigsProvider);
+        this.configs = JSON.parse(JSON.stringify(this.configsProvider.configs));
+    }
+    //#endregion
+    //#region Event handlers
+    //#endregion
+    //#region Public methods
+    addNewRow(row) {
+        this.updateLoadedRows([row]);
+    }
+    clearFocusedRow() {
+        this.focusedRow = null;
+    }
+    getRowData(key) {
+        if (this.hasLoadedRows) {
+            const index = this._loadedKeys.indexOf(key);
+            return this.loadedRows[index];
+        }
+        return null;
+    }
+    getRowID(key) {
+        const row = this.getRowData(key);
+        return this.compareProperty.split('.')
+            .reduce((row, property) => row[property], row);
+    }
+    getRowInternalKey(row) {
+        return row[KEY_FIELD];
+    }
+    hasRowWithID(id) {
+        if (!this.hasLoadedRows) {
+            return false;
+        }
+        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);
+        return loadedIDs.indexOf(id) >= 0;
+    }
+    isKeyExists(key) {
+        return this.hasLoadedRows && this._loadedKeys.some((x) => x === key);
+    }
+    loadRows() {
+        if (this.isLoading) {
+            return;
+        }
+        this.isLoading = true;
+        this.loadStarted.emit();
+        const parameters = {
+            endRow: this.configsProvider.configs.recordBlockSize,
+            filters: this.queryFilters,
+            startRow: this.recordBlock,
+        };
+        this.getData(parameters)
+            .pipe(take(1))
+            .subscribe({
+            next: (rows) => {
+                this.updateLoadedRows(rows ?? []);
+                this.isLoading = false;
+                this._hasBeenLoaded = true;
+                this.loadFinished.emit(true);
+            },
+            error: (_) => {
+                this.isLoading = false;
+                this.loadFinished.emit(false);
+            }
+        });
+    }
+    refresh() {
+        if (this.focusedRow) {
+            this.clearFocusedRow();
+        }
+        this.clearLoadedRows();
+        this.loadRows();
+    }
+    removeKeys(keys) {
+        if (!this.hasLoadedRows) {
+            return;
+        }
+        keys.forEach((key) => {
+            if (this.focusedRow === key) {
+                this.clearFocusedRow();
+            }
+            const indexToRemove = this._loadedKeys.indexOf(key);
+            if (indexToRemove >= 0) {
+                // Need to set again the array values to trigger the change detection.
+                this._loadedKeys = this._loadedKeys.filter((_, index) => index !== indexToRemove);
+                this._loadedRows = this._loadedRows.filter((_, index) => index !== indexToRemove);
+            }
+        });
+    }
+    setFilters(filters) {
+        this.queryFilters = filters;
+        this.filtersChanged.emit(filters);
+        this.refresh();
+    }
+    setFocusedRow(key) {
+        this.focusedRow = key;
+    }
+    updateRow(key, newRowData) {
+        if (!this.hasLoadedRows) {
+            return;
+        }
+        const index = this._loadedKeys.indexOf(key);
+        if (index >= 0) {
+            // Need to set the KEY_FIELD value into the new data, to make sure this information is not lost.
+            newRowData[KEY_FIELD] = key;
+            this._loadedRows[index] = newRowData;
+            // Need to update loaded rows to force displayed rows to refresh.
+            this.updateLoadedRows([]);
+        }
+    }
+    //#endregion
+    //#region Private methods
+    clearLoadedRows() {
+        this._hasBeenLoaded = false;
+        this._loadedRows = undefined;
+        this._loadedKeys = undefined;
+        this.recordBlock = 0;
+        this.loadedLastRow = false;
+    }
+    updateLoadedRows(rows) {
+        // Assign individual key to each row.
+        rows.forEach((row) => {
+            row[KEY_FIELD] = GuidHelper.generateGUID();
+        });
+        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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: GridDataset, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+class DataGridDataset extends GridDataset {
+    //#region ViewChilds, Inputs, Outputs
+    selectedRowsChanged = new EventEmitter();
+    //#endregion
+    //#region Variables
+    columns;
+    configs;
+    selectedRowKeys = [];
+    //#endregion
+    //#region Properties
+    get columnsSize() {
+        const sizes = [];
+        if (this.configs.multiSelect) {
+            sizes.push(this.configs.multiSelectSize ?? 'minmax(1.5rem,min-content)');
+        }
+        sizes.push(...this.columns.map((col) => col.size ?? 'minmax(0,1fr)'));
+        return sizes.join(' ');
+    }
+    get hasSelectedRows() {
+        return this.selectedRowKeys.length > 0;
+    }
+    //#endregion
+    //#region Constructor and Angular life cycle methods
+    constructor() {
+        super();
+        this.configs = JSON.parse(JSON.stringify(this.configsProvider.configs));
+    }
+    //#endregion
+    //#region Event handlers
+    //#endregion
+    //#region Public methods
+    clearSelection() {
+        if (!this.hasLoadedRows || !this.hasSelectedRows) {
+            return;
+        }
+        const selectedKeys = this.selectedRowKeys;
+        this.selectedRowKeys = [];
+        this.clearFocusedRow();
+        this.selectedRowsChanged.emit(selectedKeys.reduce((keys, key) => {
+            keys[key] = {
+                rowData: this.getRowData(key),
+                selected: false
+            };
+            return keys;
+        }, {}));
+    }
+    deselectRow(key) {
+        if (!this.hasLoadedRows || !this.isKeySelected(key)) {
+            return;
+        }
+        this.removeSelectedRow(key);
+        this.selectedRowsChanged.emit({
+            [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 key = this.loadedKeys[index];
+        this.deselectRow(key);
+    }
+    getSelectedRowsData() {
+        if (!this.hasLoadedRows || !this.hasSelectedRows) {
+            return [];
+        }
+        return this.selectedRowKeys.map((key) => this.loadedKeys.indexOf(key))
+            .filter((index) => index >= 0)
+            .map((index) => this.loadedRows[index]);
+    }
+    isKeySelected(key) {
+        return this.selectedRowKeys.indexOf(key) >= 0;
+    }
+    refresh() {
+        if (this.hasSelectedRows) {
+            this.clearSelection();
+        }
+        super.refresh();
+    }
+    removeKeys(keys) {
+        if (!this.hasLoadedRows) {
+            return;
+        }
+        if (this.hasSelectedRows) {
+            keys.filter((key) => this.isKeySelected(key))
+                .forEach((key) => {
+                this.removeSelectedRow(key);
+            });
+        }
+        super.removeKeys(keys);
+    }
+    selectRow(key) {
+        if (!this.hasLoadedRows) {
+            return;
+        }
+        if (!this.configs.multiSelect) {
+            if (this.isKeySelected(key)) {
+                return;
+            }
+            // Clear current selected row.
+            this.removeSelectedRow(this.selectedRowKeys[0]);
+        }
+        if (!this.isKeySelected(key)) {
+            this.selectedRowKeys.push(key);
+            this.selectedRowsChanged.emit({
+                [key]: {
+                    rowData: this.getRowData(key),
+                    selected: true,
+                }
+            });
+        }
+    }
+    selectRowID(id) {
+        if (!this.hasLoadedRows) {
+            return;
+        }
+        if (this.hasRowWithID(id)) {
+            const rowIndex = this.loadedRows.findIndex((row) => row[this.compareProperty] === id);
+            if (rowIndex < 0) {
+                return;
+            }
+            const key = this.loadedKeys[rowIndex];
+            if (!!key) {
+                this.selectRow(key);
+            }
+        }
+    }
+    selectRows(keys) {
+        if (!this.hasLoadedRows || !this.configs.multiSelect) {
+            return;
+        }
+        // Filter only the keys that are not selected yet.
+        const keysNotSelected = keys.filter((key) => !this.isKeySelected(key));
+        if (keysNotSelected.length > 0) {
+            this.selectedRowKeys.push(...keysNotSelected);
+            this.selectedRowsChanged.emit(keys.reduce((keys, key) => {
+                keys[key] = {
+                    rowData: this.getRowData(key),
+                    selected: true,
+                };
+                return keys;
+            }, {}));
+        }
+    }
+    setFocusedRow(key) {
+        super.setFocusedRow(key);
+        if (!this.configs.multiSelect) {
+            this.selectRow(key);
+        }
+        else if (this.configs.selectOnClick ?? true) {
+            if (this.isKeySelected(key)) {
+                this.deselectRow(key);
+            }
+            else {
+                this.selectRow(key);
+            }
+        }
+    }
+    //#endregion
+    //#region Private methods
+    removeSelectedRow(key) {
+        const index = this.selectedRowKeys.indexOf(key);
+        if (index >= 0) {
+            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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: DataGridDataset, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+class MultiEditorDataset extends BaseDataset {
+    //#region ViewChilds, Inputs, Outputs
+    savedChanges = new EventEmitter();
+    //#endregion
+    //#region Variables
+    dataGridDataset;
+    fakeIDsGenerated = [];
+    modifiedValues = {
+        changed: {},
+        removed: [],
+    };
+    //#endregion
+    //#region Properties
+    //#endregion
+    //#region Constructor and Angular life cycle methods
+    constructor() {
+        super();
+        this.dataGridDataset = inject(DataGridDataset);
+    }
+    //#endregion
+    //#region Event handlers
+    //#endregion
+    //#region Public methods
+    clearChangedValues() {
+        this.fakeIDsGenerated = [];
+        this.modifiedValues = {
+            changed: {},
+            removed: [],
+        };
+    }
+    removeValue(key) {
+        if (this.modifiedValues.changed[key]) {
+            delete this.modifiedValues.changed[key];
+        }
+        const id = this.dataGridDataset.getRowID(key);
+        this.dataGridDataset.removeKeys([key]);
+        if (!id) {
+            return;
+        }
+        if (this.fakeIDsGenerated.indexOf(id) < 0) {
+            this.modifiedValues.removed.push(id);
+        }
+        else {
+            this.fakeIDsGenerated.splice(this.fakeIDsGenerated.indexOf(id), 1);
+        }
+    }
+    saveChanges() {
+        const batchUpdate = {
+            entitiesToInsertOrUpdate: Object.entries(this.modifiedValues.changed).map(([_, v]) => v),
+            entitiesToDelete: this.modifiedValues.removed,
+        };
+        return this.saveData(batchUpdate)
+            .pipe(tap(() => this.savedChanges.emit()));
+    }
+    storeFakeIDGenerated(id) {
+        if (this.fakeIDsGenerated.indexOf(id) >= 0) {
+            return;
+        }
+        this.fakeIDsGenerated.push(id);
+    }
+    updateValues(key, newRowData) {
+        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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MultiEditorDataset, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+class MultiSelectResultDataset extends GridDataset {
+    //#region ViewChilds, Inputs, Outputs
+    savedChanges = new EventEmitter();
+    //#endregion
+    //#region Variables
+    displayedIDs = [];
+    displayedRows = [];
+    _idsToAdd = [];
+    _idsToRemove = [];
+    addedRowData = [];
+    //#endregion
+    //#region Properties
+    get idsToAdd() {
+        return this._idsToAdd;
+    }
+    get idsToRemove() {
+        return this._idsToRemove;
+    }
+    //#endregion
+    //#region Constructor and Angular life cycle methods
+    //#endregion
+    //#region Event handlers
+    //#endregion
+    //#region Public methods
+    refresh() {
+        this.clearSelection();
+        super.refresh();
+    }
+    saveChanges() {
+        const changes = {
+            idsToAdd: this.idsToAdd,
+            idsToRemove: this.idsToRemove,
+        };
+        return this.saveData(changes)
+            .pipe(tap(() => {
+            this.savedChanges.emit();
+            this.clearSelection();
+            this.clearLoadedRows();
+        }));
+    }
+    setIDToAdd(idToAdd, rowData) {
+        const index = this._idsToRemove.indexOf(idToAdd);
+        if (index >= 0) {
+            this._idsToRemove.splice(index, 1);
+        }
+        else if (!this.isExistingID(idToAdd)) {
+            this._idsToAdd.push(idToAdd);
+            this.addedRowData.push(rowData);
+        }
+        this.updateDisplayedRows();
+    }
+    setIDToRemove(idToRemove) {
+        const index = this._idsToAdd.indexOf(idToRemove);
+        if (index >= 0) {
+            this._idsToAdd.splice(index, 1);
+            this.addedRowData.splice(index, 1);
+        }
+        else if (this.isExistingID(idToRemove)) {
+            this._idsToRemove.push(idToRemove);
+        }
+        this.updateDisplayedRows();
+    }
+    updateLoadedRows(rows) {
+        super.updateLoadedRows(rows);
+        this.updateDisplayedRows();
+    }
+    //#endregion
+    //#region Private methods
+    clearSelection() {
+        this._idsToAdd = [];
+        this._idsToRemove = [];
+        this.addedRowData = [];
+        this.updateDisplayedRows();
+    }
+    isExistingID(id) {
+        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);
+        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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", 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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: FormGroupService, decorators: [{
+            type: Injectable
+        }] });
+
+class FormService {
+    //#region ViewChilds, Inputs, Outputs
+    fieldRefreshed = new EventEmitter();
+    modelRefreshed = new EventEmitter;
+    //#endregion
+    //#region Variables
+    _loading = false;
+    _model = null;
+    currentMode = 'view';
+    editCanceled$ = new Subject();
+    form;
+    initialValue;
+    //#endregion
+    //#region Properties
+    get editCanceled() {
+        return this.editCanceled$.asObservable();
+    }
+    get isEditMode() {
+        return this.currentMode === 'edit';
+    }
+    get isValid() {
+        return this.form?.valid ?? false;
+    }
+    get loading() {
+        return this._loading;
+    }
+    set loading(value) {
+        if (this._loading !== value) {
+            this._loading = value;
+            if (value) {
+                this.form?.disable();
+            }
+            else if (this.isEditMode) {
+                this.form?.enable();
+            }
+        }
+    }
+    get model() {
+        return this._model;
+    }
+    set model(value) {
+        if (this._model !== value) {
+            this._model = value;
+            this.modelRefreshed.emit(value);
+        }
+    }
+    //#endregion
+    //#region Constructor and Angular life cycle methods
+    //#endregion
+    //#region Event handlers
+    //#endregion
+    //#region Public methods
+    beginEdit() {
+        this.currentMode = 'edit';
+        this.form?.enable();
+    }
+    beginFieldLoading(fieldName) {
+        this.fieldRefreshed.emit({
+            fieldName,
+            loading: true
+        });
+    }
+    cancelEdit() {
+        this.currentMode = 'view';
+        this.form?.disable();
+        this.resetForm();
+        this.editCanceled$.next();
+    }
+    disableForm() {
+        this.form?.disable();
+    }
+    enableForm() {
+        if (this.isEditMode) {
+            this.form?.enable();
+        }
+    }
+    getModelFromForm() {
+        return this.form?.getRawValue();
+    }
+    initializeForm(form) {
+        this.form = form;
+        this.initialValue = form.getRawValue();
+        if (this.currentMode === 'view') {
+            this.form.disable();
+        }
+    }
+    markAllAsTouched() {
+        if (!this.form) {
+            return;
+        }
+        this.form.markAllAsTouched();
+    }
+    resetForm() {
+        if (!this.form) {
+            return;
+        }
+        this.form.reset();
+        if (!!this.model) {
+            this.form.patchValue(this.model);
+        }
+        else if (!!this.initialValue) {
+            this.form.patchValue(this.initialValue);
+        }
+        this.form.updateValueAndValidity();
+    }
+    setFieldValue(fieldName, value) {
+        this.fieldRefreshed.emit({
+            fieldName,
+            loading: false,
+            value,
+        });
+    }
+    setValidationErrorsFromHttpResponse(errorResponse) {
+        if (!errorResponse || !this.form) {
+            return;
+        }
+        // Error 400 = Validation issues
+        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) }; })
+                .forEach((err) => {
+                setTimeout(() => {
+                    const field = this.form.get(err.field);
+                    field?.setErrors({ [errors[err.key][0]]: true });
+                    field?.markAsTouched();
+                });
+            });
+        }
+    }
+    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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: FormService, decorators: [{
+            type: Injectable
+        }] });
+
+class RibbonGroupChild {
+}
+
+const SIDEBAR_CONFIGS = new InjectionToken('', {
+    providedIn: 'root',
+    factory: () => new SidebarConfigs(),
+});
+class SidebarConfigs {
+    errorText = 'Error';
+    loadingText = 'Loading';
+    logoCollapsedPath;
+    logoExpandedPath;
+    constructor(options = {}) {
+        Object.assign(this, options);
+    }
+}
+
+class SidebarMenu {
+    childCount = 0;
+    children = [];
+    height;
+    icon;
+    id = 0;
+    label = '';
+    isSelected = false;
+    parent = null;
+    url;
+    constructor(options = {}) {
+        Object.assign(this, options);
+    }
+}
+
+class SidebarService {
+    //#region ViewChilds, Inputs, Outputs
+    childrenFailed = new EventEmitter();
+    childrenLoading = new EventEmitter();
+    childrenInitialized = new EventEmitter();
+    menuUrlSelected = new EventEmitter();
+    selectionChanged = new EventEmitter();
+    //#endregion
+    //#region Variables
+    isActive = false;
+    isCollapsed = false;
+    shouldActivate = false;
+    menus = [];
+    selectedMenu = null;
+    //#endregion
+    //#region Properties
+    //#endregion
+    //#region Constructor and Angular life cycle methods
+    //#endregion
+    //#region Public methods
+    deselectAll() {
+        this.menus
+            .filter((menu) => menu.isSelected)
+            .forEach((menu) => {
+            this.deselectMenu(menu);
+        });
+    }
+    loadChildren(parentMenu) {
+        this.childrenLoading.emit(parentMenu);
+        this.loadMenus(parentMenu)
+            .pipe(take(1), map((menus) => menus.map((menu) => new SidebarMenu(menu))))
+            .subscribe({
+            next: (childrenMenus) => {
+                parentMenu.children = childrenMenus;
+                childrenMenus.forEach((childMenu) => childMenu.parent = parentMenu);
+            },
+            error: (exception) => {
+                this.childrenFailed.emit(parentMenu);
+                throw exception;
+            }
+        });
+    }
+    loadRoot() {
+        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) {
+            this.loadChildren(menu);
+        }
+        const hasUrl = (menu.url?.length ?? 0) > 0;
+        // In case we're deselecting the menu because a child was selected, we need to keep track of the original selection state.
+        const isSelected = menu.isSelected;
+        if (!!this.selectedMenu && this.selectedMenu !== menu) {
+            this.deselectAll();
+        }
+        if (!isSelected) {
+            this.selectedMenu = menu;
+            this.selectMenu(menu);
+            if (hasUrl) {
+                this.menuUrlSelected.emit(menu);
+            }
+        }
+        else if (hasUrl) {
+            // Menu with a URL is already selected — navigate again instead of toggling off.
+            this.menuUrlSelected.emit(menu);
+        }
+        else {
+            this.selectedMenu = null;
+            this.deselectMenu(menu);
+        }
+    }
+    //#endregion
+    //#region Private methods
+    deselectMenu(menu, shouldUpdateParents = true) {
+        if (!menu.isSelected) {
+            return;
+        }
+        menu.isSelected = false;
+        this.selectionChanged.emit(menu);
+        if ((menu.children?.length ?? 0) > 0) {
+            menu.children
+                .filter((child) => child.isSelected)
+                .forEach((child) => {
+                const shouldUpdateParents = false;
+                this.deselectMenu(child, shouldUpdateParents);
+            });
+        }
+        if (!!menu.parent && shouldUpdateParents) {
+            while (!!menu.parent) {
+                this.selectionChanged.emit(menu.parent);
+                menu = menu.parent;
+            }
+        }
+    }
+    selectMenu(menu) {
+        menu.isSelected = true;
+        this.selectionChanged.emit(menu);
+        if (!!menu.parent) {
+            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' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: SidebarService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class FormInputComponent extends BaseComponent {
+    //#region ViewChilds, Inputs, Outputs
+    autofocus = false;
+    controlName = '';
+    disabledControlName;
+    displayReadOnlyAsDisabled = true;
+    fixedValue;
+    format;
+    invalid = false;
+    isDisabled = true;
+    isFullHeight = false;
+    maxLength;
+    min;
+    readOnly = false;
+    rows;
+    step = 1;
+    type = 'text';
+    blur = new EventEmitter();
+    change = new EventEmitter();
+    fixedValueChanged = new EventEmitter();
+    input = new EventEmitter();
+    focus = new EventEmitter();
+    //#endregion
+    //#region Host listeners
+    //#endregion
+    //#region Variables
+    formGroupDirective = inject(FormGroupDirective);
+    formGroupName = inject(FormGroupName, { optional: true });
+    formService = inject(FormService);
+    //#endregion
+    //#region Properties
+    get formControl() {
+        return this.controlName
+            ? this.formGroup.get(this.controlName)
+            : null;
+    }
+    get formControlName() {
+        return [
+            ...this.parentGroups,
+            this.controlName,
+        ].join('.');
+    }
+    get formGroup() {
+        let formGroup = this.formGroupDirective.form;
+        for (let group of this.parentGroups) {
+            formGroup = formGroup.get(group);
+        }
+        return formGroup;
+    }
+    get isFormControl() {
+        return !!this.controlName && this.controlName.length > 0;
+    }
+    get isFormEditMode() {
+        return this.formService.isEditMode;
+    }
+    get parentGroups() {
+        return this.formGroupName?.path ?? [];
+    }
+    get stepAttributeValue() {
+        if (this.type === 'number') {
+            return this.step;
+        }
+        return null;
+    }
+    get minAttributeValue() {
+        if (this.type === 'number') {
+            return this.min ?? null;
+        }
+        return null;
+    }
+    //#endregion
+    //#region Constructor and Angular life cycle methods
+    constructor() {
+        super();
+    }
+    ngOnInit() {
+        switch (this.type) {
+            case 'number':
+                if (!!this.formControl) {
+                    this.formControl.valueChanges
+                        .pipe(takeUntil(this.destroy$))
+                        .subscribe((value) => {
+                        if (value !== null && value === '') {
+                            this.formControl?.setValue(null);
+                        }
+                    });
+                }
+                break;
+            case 'date':
+                if (this.format === undefined) {
+                    this.format = 'yyyy-MM-dd';
+                }
+                if (!!this.formControl) {
+                    this.formControl.valueChanges
+                        .pipe(takeUntil(this.destroy$))
+                        .subscribe((value) => {
+                        if (value !== null) {
+                            try {
+                                if (value !== formatDate(value, 'yyyy-MM-dd', 'en')) {
+                                    this.formControl?.setValue(formatDate(value, 'yyyy-MM-dd', 'en'), { emitEvent: false });
+                                }
+                            }
+                            catch {
+                                this.formControl?.setValue(null, { emitEvent: false });
+                            }
+                        }
+                    });
+                }
+                break;
+        }
+    }
+    //#endregion
+    //#region Event handlers
+    onBlur() {
+        this.blur.emit();
+    }
+    onChange(value) {
+        this.change.emit(value);
+    }
+    onFocus() {
+        this.focus.emit();
+    }
+    onInput() {
+        this.input.emit();
+    }
+    onValueChanged(newText) {
+        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: { blur: "blur", change: "change", fixedValueChanged: "fixedValueChanged", input: "input", focus: "focus" }, host: { properties: { "class.full-height": "isFullHeight" } }, 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        [attr.autofocus]=\"autofocus ? true : null\"\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            [attr.autofocus]=\"autofocus ? true : null\"\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            [attr.autofocus]=\"autofocus ? true : null\"\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        <label *ngSwitchCase=\"'checkbox'\">\n            <i [ngClass]=\"fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value ? 'fa-solid fa-square-check' : 'fa-regular fa-square'\"></i>\n        </label>\n\n        <label *ngSwitchCase=\"'date'\">\n            {{ fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value | date: format }}\n        </label>\n\n        <label *ngSwitchCase=\"'datetime-local'\">\n            {{ fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value | date: format }}\n        </label>\n\n        <label *ngSwitchCase=\"'number'\">\n            {{ fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value | number: format }}\n        </label>\n\n        <label class=\"text\" *ngSwitchDefault>{{ fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value }}</label>\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{display:block;overflow-wrap:break-word;padding-top:.25rem;padding-bottom:.25rem}label.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 }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", 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: {
+                        '[class.full-height]': 'isFullHeight'
+                    }, template: "<ng-container *ngIf=\"formGroupDirective.form?.enabled || isFormEditMode;else disabledControl\">\n    <ng-container [ngSwitch]=\"type\">\n        \n        <textarea *ngSwitchCase=\"'textarea'\"\n        [attr.autofocus]=\"autofocus ? true : null\"\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            [attr.autofocus]=\"autofocus ? true : null\"\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            [attr.autofocus]=\"autofocus ? true : null\"\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        <label *ngSwitchCase=\"'checkbox'\">\n            <i [ngClass]=\"fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value ? 'fa-solid fa-square-check' : 'fa-regular fa-square'\"></i>\n        </label>\n\n        <label *ngSwitchCase=\"'date'\">\n            {{ fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value | date: format }}\n        </label>\n\n        <label *ngSwitchCase=\"'datetime-local'\">\n            {{ fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value | date: format }}\n        </label>\n\n        <label *ngSwitchCase=\"'number'\">\n            {{ fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value | number: format }}\n        </label>\n\n        <label class=\"text\" *ngSwitchDefault>{{ fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value }}</label>\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{display:block;overflow-wrap:break-word;padding-top:.25rem;padding-bottom:.25rem}label.text{white-space:pre-wrap}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { autofocus: [{
+                type: Input
+            }], controlName: [{
+                type: Input
+            }], disabledControlName: [{
+                type: Input
+            }], displayReadOnlyAsDisabled: [{
+                type: Input
+            }], fixedValue: [{
+                type: Input
+            }], format: [{
+                type: Input
+            }], invalid: [{
+                type: Input
+            }], isDisabled: [{
+                type: Input
+            }], isFullHeight: [{
+                type: Input
+            }], maxLength: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], readOnly: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }], step: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], blur: [{
+                type: Output
+            }], change: [{
+                type: Output
+            }], fixedValueChanged: [{
+                type: Output
+            }], input: [{
+                type: Output
+            }], focus: [{
+                type: Output
+            }] } });
+
+class FormInputGroupComponent extends BaseComponent {
+    //#region ViewChilds, Inputs, Outputs
+    autofocus = false;
+    alignContent = 'center';
+    controlName;
+    fixedValue;
+    format;
+    label;
+    isDisabled = true;
+    isFullHeight = false;
+    maxLength;
+    min;
+    notes = '';
+    readOnly = false;
+    rows;
+    showLabel = true;
+    step = 1;
+    template;
+    type = 'text';
+    validations = {};
+    //#endregion
+    //#region Host listeners
+    //#endregion
+    //#region Variables
+    formGroupDirective = inject(FormGroupDirective);
+    formGroupName = inject(FormGroupName, { optional: true });
+    formService = inject(FormService);
+    loadingField = false;
+    //#endregion
+    //#region Properties
+    get formControl() {
+        return this.controlName
+            ? this.formGroup.get(this.controlName)
+            : null;
+    }
+    get formGroup() {
+        let formGroup = this.formGroupDirective.form;
+        for (let group of this.parentGroups) {
+            formGroup = formGroup.get(group);
+        }
+        return formGroup;
+    }
+    get hasNotes() {
+        return !!this.notes && this.notes.length > 0;
+    }
+    get parentGroups() {
+        return this.formGroupName?.path ?? [];
+    }
+    //#endregion
+    //#region Constructor and Angular life cycle methods
+    constructor() {
+        super();
+    }
+    ngOnInit() {
+        this.formControl?.statusChanges
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => {
+            this.loadingField = false;
+        });
+        this.formControl?.valueChanges
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => {
+            this.loadingField = false;
+        });
+        this.formService.fieldRefreshed
+            .pipe(takeUntil(this.destroy$), filter((field) => field.fieldName === this.controlName))
+            .subscribe((field) => {
+            this.loadingField = field.loading ?? false;
+        });
+    }
+    //#endregion
+    //#region Event handlers
+    //#endregion
+    //#region Public methods
+    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" } }, 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: ["blur", "change", "fixedValueChanged", "input", "focus"] }, { 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" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: FormInputGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-form-input-group', imports: [
+                        FormInputComponent,
+                        KeyValuePipe,
+                        NgFor,
+                        NgIf,
+                        NgStyle,
+                        NgTemplateOutlet,
+                        TranslatePipe,
+                    ], host: {
+                        '[class.full-height]': 'isFullHeight'
+                    }, 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"] }]
+        }], ctorParameters: () => [], propDecorators: { autofocus: [{
+                type: Input
+            }], alignContent: [{
+                type: Input
+            }], controlName: [{
+                type: Input
+            }], fixedValue: [{
+                type: Input
+            }], format: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], isDisabled: [{
+                type: Input
+            }], isFullHeight: [{
+                type: Input
+            }], maxLength: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], notes: [{
+                type: Input
+            }], readOnly: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }], showLabel: [{
+                type: Input
+            }], step: [{
+                type: Input
+            }], template: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], validations: [{
+                type: Input
+            }] } });
+
+class CatalogSelectComponent extends BaseComponent {
+    //#region HostListeners
+    bodyMouseDown(event) {
+        const target = event.target;
+        if (this.isDropDownShown && !target.closest('.catalog-container.show')) {
+            this.wasClickedOutside = (event.button === 0 && !target.closest('.dropdown-container')) ?? false;
+        }
+    }
+    bodyMouseUp(event) {
+        if (this.isDropDownShown && this.wasClickedOutside) {
+            this.closeDropdownOverlay();
+            this.wasClickedOutside = false;
+        }
+    }
+    //#endregion
+    //#region ViewChilds, Inputs, Outputs
+    dropdownTemplate;
+    inputElement;
+    autofocus = false;
+    controlName;
+    displayControlName;
+    displayProperty = 'display';
+    set entriesList(value) {
+        if (this._entriesList !== value) {
+            this._entriesList = value;
+            if (this.isSubscriptionInitialized) {
+                this.entriesDataSource = [];
+                this.initializeEntriesDataSource();
+                this.refreshSearch();
+            }
+        }
+    }
+    set filters(value) {
+        if (this._filters !== value) {
+            this._filters = value;
+            this.updateFilters();
+        }
+    }
+    label;
+    maxEntries = 100;
+    minimumLengthSearch = 3;
+    notes = '';
+    readOnly = false;
+    searchEndpoint;
+    validations = {};
+    valueProperty = 'value';
+    //#endregion
+    //#region Variables
+    displayedEntries = [];
+    focusedIndex = -1;
+    isDropDownShown = false;
+    isFocused = false;
+    isLoading = false;
+    selectedValue;
+    shouldUseCriteria = false;
+    showFailureMessage = false;
+    showMinimumCharactersMessage = false;
+    showNoResultsMessage = false;
+    static instanceCounter = 0;
+    _entriesList;
+    _filters = {};
+    catalogService = inject(CatalogService);
+    dataGridDataset = inject(DataGridDataset, { optional: true });
+    entriesDataSource = [];
+    filterDiffer;
+    formGroup = inject(FormGroupDirective);
+    formGroupName = inject(FormGroupName, { optional: true });
+    instanceId;
+    isDataInitialized = false;
+    isSubscriptionInitialized = false;
+    keyValueDiffers = inject(KeyValueDiffers);
+    lastCriteriaUsed = null;
+    overlay = inject(Overlay);
+    overlayRef;
+    positionBuilder = inject(OverlayPositionBuilder);
+    searchSubject = new Subject();
+    viewContainerRef = inject(ViewContainerRef);
+    wasClickedOutside = false;
+    //#endregion
+    //#region Properties
+    get entriesList() {
+        return this._entriesList;
+    }
+    get filters() {
+        return this._filters;
+    }
+    get activeDescendantId() {
+        if (this.focusedIndex >= 0 && this.focusedIndex < this.displayedEntries.length) {
+            return `catalog-select-${this.instanceId}-option-${this.focusedIndex}`;
+        }
+        return null;
+    }
+    get displayControl() {
+        return this.formGroup.form.get(this.formDisplayControlName);
+    }
+    get formControl() {
+        return this.formGroup.form.get(this.formControlName);
+    }
+    get formControlName() {
+        return [
+            ...this.formGroupName?.path ?? [],
+            this.controlName
+        ].join('.');
+    }
+    get formDisplayControlName() {
+        return [
+            ...this.formGroupName?.path ?? [],
+            this.displayControlName
+        ].join('.');
+    }
+    get isInvalid() {
+        return this.formControl.invalid;
+    }
+    get isTouched() {
+        return this.formControl.touched;
+    }
+    get listboxId() {
+        return `catalog-select-${this.instanceId}-listbox`;
+    }
+    get showClearButton() {
+        return this.selectedValue != null && !this.readOnly && (this.formControl?.enabled ?? false);
+    }
+    get hasSearchEndpoint() {
+        return !!this.searchEndpoint && this.searchEndpoint.length > 0;
+    }
+    //#endregion
+    //#region Constructor and Angular life cycle methods
+    constructor() {
+        super();
+        this.instanceId = CatalogSelectComponent.instanceCounter++;
+    }
+    ngAfterViewInit() {
+        this.setInputAriaAttributes();
+    }
+    ngOnDestroy() {
+        this.closeDropdownOverlay();
+        super.ngOnDestroy();
+    }
+    ngOnInit() {
+        // Check and add the display control, if it does not exist.
+        const wasFormDisabled = this.formGroup.form.disabled;
+        this.checkAndAddDisplayControl();
+        if (wasFormDisabled) {
+            this.formGroup.form.disable();
+        }
+        // Initialize the entries data source from the entries list, if provided.
+        this.initializeEntriesDataSource();
+        // Initialize the search functionality.
+        this.initializeSearch();
+        // Subscribe to changes in the display control to apply search criteria.
+        this.displayControl?.valueChanges
+            .pipe(takeUntil(this.destroy$), tap(() => {
+            if (!this.isFocused) {
+                return;
+            }
+            this.isLoading = true;
+            this.resetMessages();
+        }), debounceTime(500), startWith(null), pairwise())
+            .subscribe(([previous, current]) => {
+            if (!this.isFocused || previous === current) {
+                this.isLoading = false;
+                return;
+            }
+            this.applySearchCriteria(current);
+        });
+        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.syncFormControlsEnabledDisabled();
+            if (this.selectedValue === value) {
+                return;
+            }
+            this.selectedValue = value;
+            if (this.hasSearchEndpoint) {
+                if (!value) {
+                    this.displayControl?.reset(null, { emitEvent: false });
+                }
+            }
+            else {
+                const display = this.entriesDataSource.filter((entry) => entry.value === value)[0]?.display ?? '';
+                this.displayControl?.setValue(display, { emitEvent: false });
+            }
+        });
+        // Initial sync: if the form control already has a value (e.g., the model was loaded
+        // before this component initialized), sync the display control immediately.
+        this.syncDisplayFromCurrentValue();
+    }
+    //#endregion
+    //#region Event handlers
+    onContainerBlur() {
+        this.isFocused = false;
+    }
+    onContainerClick() {
+        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)) {
+            this.openDropdownOverlay();
+        }
+    }
+    onClearClick(event) {
+        event.stopPropagation();
+        if (this.formControl) {
+            this.formControl.setValue(null);
+            this.formControl.markAsDirty();
+            this.formControl.markAsTouched();
+        }
+        if (this.displayControl) {
+            this.displayControl.setValue('', { emitEvent: false });
+            this.displayControl.markAsDirty();
+            this.displayControl.markAsTouched();
+        }
+        this.selectedValue = null;
+    }
+    onKeyDown(event) {
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                if (!this.isDropDownShown) {
+                    this.openDropdownOverlay();
+                }
+                if (this.displayedEntries.length > 0) {
+                    this.focusedIndex = Math.min(this.focusedIndex + 1, this.displayedEntries.length - 1);
+                    this.scrollFocusedItemIntoView();
+                }
+                this.updateInputAriaActiveDescendant();
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                if (this.isDropDownShown && this.displayedEntries.length > 0) {
+                    this.focusedIndex = Math.max(this.focusedIndex - 1, 0);
+                    this.scrollFocusedItemIntoView();
+                }
+                this.updateInputAriaActiveDescendant();
+                break;
+            case 'Enter':
+                event.preventDefault();
+                if (this.isDropDownShown && this.focusedIndex >= 0 && this.focusedIndex < this.displayedEntries.length) {
+                    this.onDropDownItemClick(this.displayedEntries[this.focusedIndex]);
+                }
+                break;
+            case 'Escape':
+                if (this.isDropDownShown) {
+                    event.preventDefault();
+                    this.closeDropdownOverlay();
+                }
+                break;
+            case 'Tab':
+                if (this.isDropDownShown) {
+                    this.closeDropdownOverlay();
+                }
+                break;
+        }
+    }
+    onDropDownErrorClick() {
+        this.refreshSearch();
+    }
+    onDropDownItemClick(entry) {
+        if (this.displayControl) {
+            this.displayControl.markAsDirty();
+            this.displayControl.markAllAsTouched();
+            this.displayControl.setValue(entry.display, { emitEvent: false });
+        }
+        if (this.formControl) {
+            this.formControl.markAsDirty();
+            this.formControl.markAsTouched();
+            this.formControl.setValue(entry.value);
+        }
+        this.closeDropdownOverlay();
+    }
+    onDropDownMessageClick() {
+        this.closeDropdownOverlay();
+    }
+    //#endregion
+    //#region Public methods
+    getOptionId(index) {
+        return `catalog-select-${this.instanceId}-option-${index}`;
+    }
+    //#endregion
+    //#region Private methods
+    applySearchCriteria(criteria) {
+        this.isLoading = true;
+        this.resetMessages();
+        this.searchSubject.next(criteria);
+    }
+    checkAndAddDisplayControl() {
+        let parent = this.formGroup.form;
+        const controlNames = this.formDisplayControlName.split('.');
+        controlNames.forEach((name, index) => {
+            if (index < controlNames.length - 1) {
+                parent = parent.get(name);
+            }
+            else {
+                if (!parent.get(name)) {
+                    parent.addControl(name, new FormControl(''));
+                }
+            }
+        });
+    }
+    closeDropdownOverlay() {
+        this.isDropDownShown = false;
+        this.focusedIndex = -1;
+        this.updateInputAriaActiveDescendant();
+        if (this.overlayRef) {
+            this.overlayRef.detach();
+            this.overlayRef.dispose();
+            this.overlayRef = undefined;
+        }
+    }
+    initializeEntriesDataSource() {
+        if (this.hasSearchEndpoint || !this._entriesList || this._entriesList.length === 0) {
+            return;
+        }
+        const observables = [];
+        this._entriesList.forEach((entry) => {
+            const value = entry[this.valueProperty];
+            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;
+                    if (this.selectedValue === value) {
+                        this.displayControl.setValue(v);
+                    }
+                })));
+            }
+            else {
+                this.entriesDataSource.push({ value, display });
+            }
+        });
+        forkJoin(observables)
+            .pipe(take(1))
+            .subscribe(() => {
+        });
+    }
+    initializeSearch() {
+        this.searchSubject
+            .pipe(takeUntil(this.destroy$), switchMap((criteria) => {
+            this.lastCriteriaUsed = criteria;
+            if (!this.hasSearchEndpoint) {
+                if (this.entriesDataSource.length === 0) {
+                    return of(null).pipe(take(1));
+                }
+                return of(this.entriesDataSource.filter((entry) => entry.display.toLowerCase().indexOf(criteria?.toLowerCase() ?? '') > -1)).pipe(take(1));
+            }
+            this.updateMinimumCharactersMessageVisibility(criteria ?? '');
+            if (this.showMinimumCharactersMessage) {
+                return of(null).pipe(take(1));
+            }
+            return this.catalogService.search(this.searchEndpoint, this.maxEntries, criteria ?? '', this.filters)
+                .pipe(take(1));
+        })).subscribe({
+            next: (result) => {
+                this.isLoading = false;
+                this.displayedEntries = [];
+                if (Array.isArray(result) && result.length > 0) {
+                    this.displayedEntries = result;
+                }
+                else if (result?.entries && Array.isArray(result.entries)) {
+                    const catalogResult = result;
+                    if (!catalogResult) {
+                        return;
+                    }
+                    this.displayedEntries = catalogResult.entries;
+                    if (!this.isDataInitialized) {
+                        // The shouldUseCriteria is only set from the initialization.
+                        this.isDataInitialized = true;
+                        this.shouldUseCriteria = catalogResult.shouldUseCriteria ?? false;
+                        this.showMinimumCharactersMessage = this.displayedEntries.length === 0;
+                    }
+                }
+                // Try to filter out already loaded rows from the data grid dataset.
+                if (this.displayedEntries.length > 0 && this.dataGridDataset) {
+                    this.displayedEntries = this.tryFilterFromDataset(this.displayedEntries);
+                }
+                if (!this.showMinimumCharactersMessage && this.displayedEntries.length === 0) {
+                    this.showNoResultsMessage = true;
+                }
+            },
+            error: (_) => {
+                this.isLoading = false;
+                this.displayedEntries = [];
+                this.showFailureMessage = true;
+                // Set a new subscription to allow retrying the search later.
+                this.initializeSearch();
+            }
+        });
+        if (!this.isSubscriptionInitialized) {
+            this.isSubscriptionInitialized = true;
+            this.applySearchCriteria(null);
+        }
+    }
+    openDropdownOverlay() {
+        // Defensive cleanup of any stale overlay before creating a new one.
+        if (this.overlayRef) {
+            this.overlayRef.detach();
+            this.overlayRef.dispose();
+            this.overlayRef = undefined;
+        }
+        const positionStrategy = this.positionBuilder
+            .flexibleConnectedTo(this.inputElement)
+            .withPositions([
+            {
+                originX: 'start',
+                originY: 'bottom',
+                overlayX: 'start',
+                overlayY: 'top',
+            },
+            {
+                originX: 'start',
+                originY: 'top',
+                overlayX: 'start',
+                overlayY: 'bottom',
+            }
+        ]);
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            hasBackdrop: false,
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+        });
+        // Set overlay width to match input field
+        const inputRect = this.inputElement.nativeElement.getBoundingClientRect();
+        this.overlayRef.updateSize({ width: inputRect.width });
+        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.updateInputAriaActiveDescendant();
+        // Re-evaluate minimum characters message visibility when opening the dropdown,
+        // in case it was incorrectly reset by a programmatic value change.
+        if (this.shouldUseCriteria && !this.isLoading) {
+            this.updateMinimumCharactersMessageVisibility(this.displayControl?.value ?? '');
+        }
+        // Scroll the selected item into view after the overlay renders.
+        if (this.focusedIndex >= 0) {
+            requestAnimationFrame(() => this.scrollFocusedItemIntoView());
+        }
+    }
+    refreshSearch(reInitialize = false) {
+        if (reInitialize) {
+            this.isDataInitialized = false;
+        }
+        this.applySearchCriteria(this.lastCriteriaUsed);
+    }
+    resetMessages() {
+        this.showFailureMessage = false;
+        this.showNoResultsMessage = false;
+        this.showMinimumCharactersMessage = false;
+    }
+    syncDisplayFromCurrentValue() {
+        const currentValue = this.formControl?.value;
+        if (currentValue == null || this.selectedValue === currentValue) {
+            return;
+        }
+        this.selectedValue = currentValue;
+        if (!this.hasSearchEndpoint) {
+            const display = this.entriesDataSource.filter((entry) => entry.value === currentValue)[0]?.display ?? '';
+            this.displayControl?.setValue(display, { emitEvent: false });
+        }
+    }
+    syncFormControlsEnabledDisabled() {
+        if (this.formControl.enabled !== this.displayControl.enabled) {
+            if (this.formControl.disabled) {
+                this.displayControl.disable({ emitEvent: false });
+            }
+            else {
+                this.displayControl.enable({ emitEvent: false });
+            }
+        }
+    }
+    tryFilterFromDataset(results) {
+        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);
+        }
+        return results;
+    }
+    updateFilters() {
+        if (!this.filterDiffer || !this.filters) {
+            return;
+        }
+        const changes = this.filterDiffer.diff(this.filters);
+        if (changes) {
+            const reInitialize = true;
+            this.refreshSearch(reInitialize);
+        }
+    }
+    updateMinimumCharactersMessageVisibility(criteria) {
+        this.showMinimumCharactersMessage =
+            this.shouldUseCriteria
+                && this.minimumLengthSearch > 0
+                && (criteria?.length ?? 0) < this.minimumLengthSearch;
+    }
+    getNativeInput() {
+        return this.inputElement?.nativeElement?.querySelector('input') ?? null;
+    }
+    scrollFocusedItemIntoView() {
+        if (!this.overlayRef || this.focusedIndex < 0) {
+            return;
+        }
+        const optionId = this.getOptionId(this.focusedIndex);
+        const element = this.overlayRef.overlayElement.querySelector('#' + optionId);
+        if (element) {
+            element.scrollIntoView({ block: 'nearest' });
+        }
+    }
+    setInputAriaAttributes() {
+        const input = this.getNativeInput();
+        if (!input) {
+            return;
+        }
+        input.setAttribute('role', 'combobox');
+        input.setAttribute('aria-autocomplete', 'list');
+        input.setAttribute('aria-expanded', String(this.isDropDownShown));
+        input.setAttribute('aria-haspopup', 'listbox');
+        input.setAttribute('aria-owns', this.listboxId);
+    }
+    updateInputAriaActiveDescendant() {
+        const input = this.getNativeInput();
+        if (!input) {
+            return;
+        }
+        input.setAttribute('aria-expanded', String(this.isDropDownShown));
+        const descendantId = this.activeDescendantId;
+        if (descendantId) {
+            input.setAttribute('aria-activedescendant', descendantId);
+        }
+        else {
+            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        (blur)=\"onContainerBlur()\"\n        (click)=\"onContainerClick()\"\n        (focus)=\"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            <li *ngIf=\"isLoading\"\n            (click)=\"onDropDownMessageClick()\">\n                {{ 'CatalogSelect-Loading' | translate }}\n            </li>\n\n            <li *ngIf=\"shouldUseCriteria && showMinimumCharactersMessage\"\n            title=\"{{ 'CatalogSelect-MinimumLengthSearch' | translate: { minimumLengthSearch: minimumLengthSearch } }}\"\n            (click)=\"onDropDownMessageClick()\">\n                {{ 'CatalogSelect-MinimumLengthSearch' | translate: { minimumLengthSearch: minimumLengthSearch } }}\n            </li>\n\n            <li *ngIf=\"showNoResultsMessage\"\n            title=\"{{ 'CatalogSelect-NoResultsFound' | translate }}\"\n            (click)=\"onDropDownMessageClick()\">\n                {{ 'CatalogSelect-NoResultsFound' | translate }}\n            </li>\n\n            <li *ngIf=\"showFailureMessage\"\n            class=\"error\"\n            title=\"{{ 'CatalogSelect-FailureMessage' | translate }}\"\n            (click)=\"onDropDownErrorClick()\">\n                {{ 'CatalogSelect-FailureMessage' | translate }}\n            </li>\n\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        </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.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: ["blur", "change", "fixedValueChanged", "input", "focus"] }, { 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" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", 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        (blur)=\"onContainerBlur()\"\n        (click)=\"onContainerClick()\"\n        (focus)=\"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            <li *ngIf=\"isLoading\"\n            (click)=\"onDropDownMessageClick()\">\n                {{ 'CatalogSelect-Loading' | translate }}\n            </li>\n\n            <li *ngIf=\"shouldUseCriteria && showMinimumCharactersMessage\"\n            title=\"{{ 'CatalogSelect-MinimumLengthSearch' | translate: { minimumLengthSearch: minimumLengthSearch } }}\"\n            (click)=\"onDropDownMessageClick()\">\n                {{ 'CatalogSelect-MinimumLengthSearch' | translate: { minimumLengthSearch: minimumLengthSearch } }}\n            </li>\n\n            <li *ngIf=\"showNoResultsMessage\"\n            title=\"{{ 'CatalogSelect-NoResultsFound' | translate }}\"\n            (click)=\"onDropDownMessageClick()\">\n                {{ 'CatalogSelect-NoResultsFound' | translate }}\n            </li>\n\n            <li *ngIf=\"showFailureMessage\"\n            class=\"error\"\n            title=\"{{ 'CatalogSelect-FailureMessage' | translate }}\"\n            (click)=\"onDropDownErrorClick()\">\n                {{ 'CatalogSelect-FailureMessage' | translate }}\n            </li>\n\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        </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.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']]
+            }], bodyMouseUp: [{
+                type: HostListener,
+                args: ['body:mouseup', ['$event']]
+            }], dropdownTemplate: [{
+                type: ViewChild,
+                args: ['dropdownTemplate', { read: TemplateRef }]
+            }], inputElement: [{
+                type: ViewChild,
+                args: ['input', { read: ElementRef }]
+            }], autofocus: [{
+                type: Input
+            }], controlName: [{
+                type: Input
+            }], displayControlName: [{
+                type: Input
+            }], displayProperty: [{
+                type: Input
+            }], entriesList: [{
+                type: Input
+            }], filters: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], maxEntries: [{
+                type: Input
+            }], minimumLengthSearch: [{
+                type: Input
+            }], notes: [{
+                type: Input
+            }], readOnly: [{
+                type: Input
+            }], searchEndpoint: [{
+                type: Input
+            }], validations: [{
+                type: Input
+            }], valueProperty: [{
+                type: Input
+            }] } });
+
+class DataGridRowComponent extends BaseComponent {
+    //#region ViewChilds, Inputs, Outputs
+    disabled = false;
+    isFirstRow = false;
+    set rowData(value) {
+        this._rowData = value;
+        this.refreshSelection();
+    }
+    selectionResized = new EventEmitter();
+    //#endregion
+    //#region Host listeners
+    setFocus() {
+        if (!this.disabled) {
+            this.dataGridDataset.setFocusedRow(this.rowKey);
+            if (this.dataGridDataset.configs.multiSelect && (this.dataGridDataset.configs.selectOnClick ?? true)) {
+                this.selected = this.isRowDataSelected;
+            }
+        }
+    }
+    //#endregion
+    //#region Variables
+    changeDetectorRef = inject(ChangeDetectorRef);
+    dataGridDataset = inject(DataGridDataset);
+    selected = false;
+    _rowData;
+    isWidthSet = {};
+    //#endregion
+    //#region Properties
+    get rowData() {
+        return this._rowData;
+    }
+    get columns() {
+        return this.dataGridDataset.columns;
+    }
+    get isRowDataSelected() {
+        return this.dataGridDataset.isKeySelected(this.rowKey);
+    }
+    get rowKey() {
+        return this.dataGridDataset.getRowInternalKey(this.rowData);
+    }
+    //#endregion
+    //#region Constructor and Angular life cycle methods
+    constructor() {
+        super();
+    }
+    ngOnInit() {
+        this.selected = this.isRowDataSelected;
+        this.dataGridDataset.selectedRowsChanged
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((selectionChanges) => {
+            if (this.rowKey in selectionChanges) {
+                this.selected = selectionChanges[this.rowKey].selected;
+                this.changeDetectorRef.detectChanges();
+            }
+        });
+    }
+    //#endregion
+    //#region Event handlers
+    onResize(colIndex, event) {
+        if (this.isWidthSet[colIndex]) {
+            return;
+        }
+        const width = event.contentRect.width;
+        if (width <= 0) {
+            return;
+        }
+        if (this.columns[colIndex].realSize != width) {
+            this.columns[colIndex].realSize = width;
+            this.isWidthSet[colIndex] = true;
+        }
+    }
+    onResizeSelection(event) {
+        const width = event.contentRect.width;
+        this.selectionResized.emit(width);
+    }
+    onToggleSelection() {
+        if (this.disabled || (this.dataGridDataset.configs.multiSelect && (this.dataGridDataset.configs.selectOnClick ?? true))) {
+            return;
+        }
+        this.selected = !this.selected;
+        if (this.selected) {
+            this.dataGridDataset.selectRow(this.rowKey);
+        }
+        else {
+            this.dataGridDataset.deselectRow(this.rowKey);
+        }
+    }
+    //#endregion
+    //#region Public methods
+    getValue(field) {
+        return field.split('.').reduce((value, field) => value[field], this.rowData);
+    }
+    //#endregion
+    //#region Private methods
+    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: "<div *ngIf=\"dataGridDataset.configs.multiSelect\"\nclass=\"cell\"\n(click)=\"onToggleSelection()\"\n(onResize)=\"onResizeSelection($event)\">\n    <input class=\"form-input\"\n    type=\"checkbox\"\n    [attr.disabled]=\"disabled\"\n    [(ngModel)]=\"selected\" />\n</div> \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}.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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: DataGridRowComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-data-grid-row', host: {
+                        '[class.focused]': 'dataGridDataset.focusedRow === rowData',
+                        '[class.selected]': 'dataGridDataset.isKeySelected(rowKey)',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        FormsModule,
+                        NgClass,
+                        NgIf,
+                        NgFor,
+                        NgTemplateOutlet,
+                        NgxResizeObserverModule,
+                    ], template: "<div *ngIf=\"dataGridDataset.configs.multiSelect\"\nclass=\"cell\"\n(click)=\"onToggleSelection()\"\n(onResize)=\"onResizeSelection($event)\">\n    <input class=\"form-input\"\n    type=\"checkbox\"\n    [attr.disabled]=\"disabled\"\n    [(ngModel)]=\"selected\" />\n</div> \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}.spacer{position:absolute;inset:0;z-index:-1;height:0px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { disabled: [{
+                type: Input
+            }], isFirstRow: [{
+                type: Input
+            }], rowData: [{
+                type: Input
+            }], selectionResized: [{
+                type: Output
+            }], setFocus: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
+class DataGridComponent extends BaseComponent {
+    //#region ViewChilds, Inputs, Outputs
+    bodyElement;
+    viewport;
+    disabled = false;
+    lazyLoadRows = false;
+    showButtons = false;
+    //#endregion
+    //#region Variables
+    changeDetectorRef = inject(ChangeDetectorRef);
+    dataGridDataset = inject(DataGridDataset);
+    hasFailed = false;
+    headerRightMargin = 0;
+    loading = false;
+    bodyResized$ = new Subject();
+    bodyResizeObserver;
+    gridRoute = '';
+    isGridCurrentUrl = false;
+    lastPosition = 0;
+    ngZone = inject(NgZone);
+    router = inject(Router);
+    selectionColRealSize;
+    //#endregion
+    //#region Properties
+    get bodyMinHeight() {
+        let rowsToDisplay = this.configs.rowsToDisplay ?? 3;
+        let rowsCount = this.dataGridDataset.loadedRows?.length ?? 0;
+        if (rowsCount === 0) {
+            rowsCount = 1;
+        }
+        if (rowsCount < rowsToDisplay) {
+            rowsToDisplay = rowsCount;
+        }
+        return rowsToDisplay * this.configs.rowHeight;
+    }
+    get columns() {
+        return this.dataGridDataset.columns;
+    }
+    get configs() {
+        return this.dataGridDataset.configs;
+    }
+    get gridColumns() {
+        return this.dataGridDataset.columnsSize;
+    }
+    get hasBeenLoaded() {
+        return this.dataGridDataset.hasBeenLoaded;
+    }
+    get hasLoadedRows() {
+        return (this.dataGridDataset.loadedRows?.length ?? 0) > 0;
+    }
+    get hasMessageToDisplayWhenEmpty() {
+        return this.messageToDisplayWhenEmpty.length > 0;
+    }
+    get isHideColumns() {
+        return this.dataGridDataset.configs.hideColumnHeaders ?? false;
+    }
+    get isShowMultiSelect() {
+        return this.dataGridDataset.configs.multiSelect ?? false;
+    }
+    get messageToDisplayWhenEmpty() {
+        return this.dataGridDataset?.configs?.messageOnEmpty ?? '';
+    }
+    get messageToDisplayWhenLazyLoad() {
+        return this.dataGridDataset?.configs?.messageOnLazyLoad ?? '';
+    }
+    get messageToDisplayWhenFailed() {
+        return this.dataGridDataset?.configs?.messageOnFailed ?? '';
+    }
+    get selectionColWidth() {
+        return this.selectionColRealSize
+            ? `${this.selectionColRealSize}px`
+            : this.configs.multiSelectSize ?? 'minmax(1.5rem,min-content)';
+    }
+    get shouldDisplayMessageWhenEmpty() {
+        return this.dataGridDataset?.configs?.showMessageOnEmpty ?? true;
+    }
+    //#endregion
+    //#region Constructor and Angular life cycle methods
+    constructor() {
+        super();
+    }
+    ngOnInit() {
+        this.gridRoute = this.router.url;
+        this.isGridCurrentUrl = true;
+        this.router.events
+            .pipe(takeUntil(this.destroy$), filter((events) => events instanceof NavigationStart || events instanceof NavigationEnd))
+            .subscribe((event) => {
+            if (event instanceof NavigationStart && this.isGridCurrentUrl) {
+                this.lastPosition = this.viewport?.measureScrollOffset() ?? 0;
+                this.isGridCurrentUrl = false;
+            }
+            else if (event instanceof NavigationEnd && event.url === this.gridRoute) {
+                this.viewport?.scrollTo({ top: this.lastPosition });
+                this.viewport?.checkViewportSize();
+                this.isGridCurrentUrl = true;
+            }
+        });
+        this.dataGridDataset.loadStarted
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => {
+            this.loading = true;
+        });
+        this.dataGridDataset.loadFinished
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((isSuccess) => {
+            this.loading = false;
+            this.hasFailed = !isSuccess;
+            setTimeout(() => {
+                const viewportWidth = this.viewport?.measureViewportSize('horizontal') ?? 0;
+                if (viewportWidth > 0) {
+                    this.headerRightMargin = this.bodyElement.nativeElement.clientWidth - viewportWidth;
+                }
+            }, 100);
+            this.changeDetectorRef.detectChanges();
+            setTimeout(() => {
+                this.viewport?.checkViewportSize();
+            });
+        });
+        if (!this.lazyLoadRows) {
+            if (!this.dataGridDataset.loadedRows) {
+                this.loading = true;
+            }
+            this.dataGridDataset.loadRows();
+        }
+        else if (this.dataGridDataset.isLoading) {
+            this.loading = true;
+        }
+    }
+    ngAfterViewInit() {
+        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(() => {
+            const viewportWidth = this.viewport?.measureViewportSize('horizontal') ?? 0;
+            if (viewportWidth > 0) {
+                this.headerRightMargin = this.bodyElement.nativeElement.clientWidth - viewportWidth;
+            }
+            this.viewport?.checkViewportSize();
+            this.changeDetectorRef.detectChanges();
+        });
+        this.ngZone.runOutsideAngular(() => {
+            this.bodyResizeObserver = new ResizeObserver(() => {
+                this.bodyResized$.next();
+            });
+            this.bodyResizeObserver.observe(this.bodyElement.nativeElement);
+        });
+    }
+    ngOnDestroy() {
+        this.bodyResizeObserver?.disconnect();
+        super.ngOnDestroy();
+    }
+    //#endregion
+    //#region Event handlers
+    onSelectionResized(newSize) {
+        if (this.selectionColRealSize != newSize) {
+            this.selectionColRealSize = newSize;
+        }
+    }
+    //#endregion
+    //#region Public methods
+    isFirstVisibleRow(rowIndex) {
+        const renderedRange = this.viewport?.getRenderedRange();
+        if (renderedRange) {
+            return rowIndex === renderedRange.start;
+        }
+        return false;
+    }
+    //#endregion
+    //#region Private methods
+    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    <div class=\"header-row\">\n        <div *ngIf=\"isShowMultiSelect\"\n        class=\"header-cell selection\"\n        [ngStyle]=\"{\n            'width': selectionColWidth ? selectionColWidth : null\n        }\">\n            &nbsp;\n        </div>\n        \n        <div *ngFor=\"let column of columns\"\n        class=\"header-cell\"\n        [ngStyle]=\"{\n            'width.px': column.realSize ?? 0 > 0 ? 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{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-grow:1}.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" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", 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    <div class=\"header-row\">\n        <div *ngIf=\"isShowMultiSelect\"\n        class=\"header-cell selection\"\n        [ngStyle]=\"{\n            'width': selectionColWidth ? selectionColWidth : null\n        }\">\n            &nbsp;\n        </div>\n        \n        <div *ngFor=\"let column of columns\"\n        class=\"header-cell\"\n        [ngStyle]=\"{\n            'width.px': column.realSize ?? 0 > 0 ? 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{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-grow:1}.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']
+            }], viewport: [{
+                type: ViewChild,
+                args: [CdkVirtualScrollViewport]
+            }], disabled: [{
+                type: Input
+            }], lazyLoadRows: [{
+                type: Input
+            }], showButtons: [{
+                type: Input
+            }] } });
+
+class FormGroupComponent {
+    //#region ViewChilds, Inputs, Outputs
+    shouldExpand = false;
+    label;
+    //#endregion
+    //#region Variables
+    //#endregion
+    //#region Properties
+    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" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", 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"] }]
+        }], propDecorators: { shouldExpand: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }] } });
+
+class GroupAccordionComponent {
+    //#region ViewChilds, Inputs, Outputs
+    containerElementRef;
+    label;
+    //#endregion
+    //#region Variables
+    _maxHeight = -1;
+    collapsed = false;
+    //#endregion
+    //#region Properties
+    get maxHeight() {
+        return this._maxHeight;
+    }
+    //#endregion
+    //#region Constructor and Angular life cycle methods
+    //#endregion
+    //#region Event handlers
+    onToggle() {
+        // Before collapsing, we set the max height style for the closing effect.
+        if (!this.collapsed) {
+            this.setMaxHeight();
+        }
+        setTimeout(() => {
+            this.collapsed = !this.collapsed;
+            // After expanding, we wait the transition to end and remove the max height.
+            if (!this.collapsed) {
+                this.clearMaxHeight();
+            }
+        });
+    }
+    //#endregion
+    //#region Public methods
+    //#endregion
+    //#region Private methods
+    clearMaxHeight() {
+        setTimeout(() => {
+            this._maxHeight = -1;
+        }, 150);
+    }
+    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 (click)=\"onToggle()\"><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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: GroupAccordionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-group-accordion', host: { '[class.collapsed]': 'collapsed' }, imports: [
+                        NgStyle,
+                    ], template: "<div class=\"title\">\n    <h6 (click)=\"onToggle()\"><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"] }]
+        }], propDecorators: { containerElementRef: [{
+                type: ViewChild,
+                args: ['container']
+            }], label: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
+class ScrollSpyDirective {
+    //#region ViewChilds, Inputs, Outputs
+    spiedTags = [];
+    activeSectionChange = new EventEmitter();
+    //#endregion
+    //#region Variables
+    _el = inject(ElementRef);
+    activeSection = null;
+    sections = new Array();
+    //#endregion
+    //#region Properties
+    //#endregion
+    //#region Constructor and Angular life cycle methods
+    ngAfterViewInit() {
+        this.updateSections(Array.from(this._el.nativeElement.children));
+    }
+    //#endregion
+    //#region Event handlers
+    onScroll(event) {
+        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);
+        if (currentScroll >= scrollHeight) {
+            this.select(this.sections.length - 1);
+            return;
+        }
+        const elements = this.sections.filter(el => (el.offsetTop) <= currentScroll);
+        this.select(elements.length > 0 ? elements.length - 1 : 0);
+    }
+    //#endregion
+    //#region Public methods
+    scrollTo(section) {
+        this._el.nativeElement.scrollTop = this.sections[section].offsetTop;
+    }
+    select(section) {
+        if (section !== this.activeSection) {
+            this.activeSection = section;
+            this.activeSectionChange.emit(section);
+        }
+    }
+    //#endregion
+    //#region Private methods
+    updateSections(children) {
+        children.forEach(el => {
+            if (this.spiedTags.some(spiedTag => spiedTag.toUpperCase() === el.tagName.toUpperCase())) {
+                this.sections.push(el);
+            }
+            else {
+                this.updateSections(Array.from(el.children));
+            }
+        });
+    }
+    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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: ScrollSpyDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[libScrollSpy]'
+                }]
+        }], propDecorators: { spiedTags: [{
+                type: Input
+            }], activeSectionChange: [{
+                type: Output
+            }], onScroll: [{
+                type: HostListener,
+                args: ['scroll', ['$event']]
+            }] } });
+
+class GroupContainerComponent {
+    scrollSpy;
+    sections;
+    get titles() {
+        return this.sections?.map(x => x.label) ?? [];
+    }
+    activeSection = 0;
+    title;
+    icon;
+    activeSectionChanged(index) {
+        this.activeSection = index;
+    }
+    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" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", 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"] }]
+        }], propDecorators: { scrollSpy: [{
+                type: ViewChild,
+                args: [ScrollSpyDirective]
+            }], sections: [{
+                type: ContentChildren,
+                args: [GroupAccordionComponent, { descendants: true }]
+            }], title: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }] } });
+
+class GroupScrollSpyComponent {
+    scrollSpy;
+    sections;
+    get titles() {
+        return this.sections?.map(x => x.label) ?? [];
+    }
+    activeSection = 0;
+    activeSectionChanged(index) {
+        this.activeSection = index;
+    }
+    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        (click)=\"scrollTo(i)\"\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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", 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        (click)=\"scrollTo(i)\"\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"] }]
+        }], propDecorators: { scrollSpy: [{
+                type: ViewChild,
+                args: [ScrollSpyDirective]
+            }], sections: [{
+                type: ContentChildren,
+                args: [GroupAccordionComponent, { descendants: true }]
+            }] } });
+
+class ModalComponent extends BaseComponent {
+    //#region ViewChilds, Inputs, Outputs
+    closeButtonText = 'Close';
+    dialog = true;
+    modalProcessing = false;
+    position = 'center';
+    size = 'auto';
+    title;
+    closed = new EventEmitter();
+    //#endregion
+    //#region Variables
+    _show = false;
+    clickedOutside = false;
+    elementRef;
+    //#endregion
+    //#region Properties
+    get isShown() {
+        return this._show;
+    }
+    //#endregion
+    //#region Constructor and Angular life cycle methods
+    constructor() {
+        super();
+        this.elementRef = inject(ElementRef);
+    }
+    //#endregion
+    //#region Event handlers
+    onCloseClick() {
+        if (!this.modalProcessing && this.isShown) {
+            this.closeModal();
+        }
+    }
+    //#endregion
+    //#region Public methods
+    closeModal() {
+        if (this.isShown) {
+            this.toggleModal();
+        }
+    }
+    toggleModal() {
+        const wasShown = this._show;
+        const body = document.querySelector('body');
+        body?.classList.toggle('modal-active');
+        this._show = body?.classList.contains('modal-active') ?? false;
+        if (this.isShown) {
+            this.clickedOutside = false;
+            const autofocus = this.elementRef.nativeElement.querySelector('[autofocus]');
+            if (autofocus && !!autofocus.focus) {
+                autofocus.focus();
+            }
+        }
+        else if (wasShown) {
+            this.closed.emit();
+        }
+    }
+    //#endregion
+    //#region Private methods
+    //#endregion
+    //#region Host listeners
+    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;
+        }
+    }
+    bodyMouseUp(event) {
+        if (this.dialog && this.isShown) {
+            if (this.clickedOutside && !this.modalProcessing) {
+                this.toggleModal();
+            }
+        }
+    }
+    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);
+        }
+        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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", 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.
+                        '[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"] }]
+        }], ctorParameters: () => [], propDecorators: { closeButtonText: [{
+                type: Input
+            }], dialog: [{
+                type: Input
+            }], modalProcessing: [{
+                type: Input
+            }], position: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], closed: [{
+                type: Output
+            }], bodyMouseDown: [{
+                type: HostListener,
+                args: ['body:mousedown', ['$event']]
+            }], bodyMouseUp: [{
+                type: HostListener,
+                args: ['body:mouseup', ['$event']]
+            }], documentKeyDown: [{
+                type: HostListener,
+                args: ['document:keydown.escape', ['$event']]
+            }] } });
+
+class MultiEditorComponent extends ModalComponent {
+    //#region ViewChilds, Inputs, Outputs
+    modal;
+    addButtonLabel = 'Add row';
+    formGroup;
+    removeButtonLabel = 'Remove row';
+    showAddButton = true;
+    showDeleteButton = true;
+    //#endregion
+    //#region Variables
+    gridLoading = false;
+    dataGridDataset = inject(DataGridDataset);
+    formService = inject(FormService);
+    multiEditorDataset = inject(MultiEditorDataset);
+    selectedKey;
+    selectedValue;
+    //#endregion
+    //#region Properties
+    get formLoading() {
+        return this.formService.loading;
+    }
+    get hasSelectedKey() {
+        return !!this.selectedKey;
+    }
+    //#endregion
+    //#region Constructor and Angular life cycle methods
+    constructor() {
+        super();
+    }
+    ngOnInit() {
+        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(() => {
+            if (this.gridLoading || !this.dataGridDataset.hasLoadedRows || !this.dataGridDataset.hasSelectedRows) {
+                return;
+            }
+            if (this.formGroup.disabled) {
+                this.formGroup.enable();
+            }
+            const selectedRowKey = this.dataGridDataset.selectedRowKeys[0];
+            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();
+            }
+            else {
+                this.selectedKey = selectedRowKey;
+                this.selectedValue = this.dataGridDataset.getRowData(selectedRowKey);
+                this.formService.model = this.selectedValue;
+                this.formGroup.reset();
+                this.formGroup.patchValue(this.selectedValue);
+            }
+        });
+        this.formGroup.valueChanges
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((_) => {
+            if (this.selectedKey && this.formGroup.dirty) {
+                this.multiEditorDataset.updateValues(this.selectedKey, this.formGroup.getRawValue());
+            }
+        });
+        // Start with an empty form and, since there is no selected row, disable the form.
+        this.formGroup.disable({ emitEvent: false });
+    }
+    //#endregion
+    //#region Event handlers
+    onDeleteClick() {
+        if (!this.selectedKey) {
+            return;
+        }
+        this.multiEditorDataset.removeValue(this.selectedKey);
+        this.selectedKey = undefined;
+        this.formGroup.reset({ emitEvent: false });
+        this.clearAllFormArrays(this.formGroup);
+        this.formGroup.disable({ emitEvent: false });
+    }
+    onNewClick() {
+        const fakeNewID = (Math.floor(Math.random() * (999999 - 100000)) + 100000) * -1;
+        const newModel = this.multiEditorDataset.newData(fakeNewID);
+        if (!!newModel) {
+            this.multiEditorDataset.storeFakeIDGenerated(fakeNewID);
+            this.dataGridDataset.addNewRow(newModel);
+            const newKey = this.dataGridDataset.loadedKeys[this.dataGridDataset.loadedKeys.length - 1];
+            this.dataGridDataset.selectRow(newKey);
+        }
+    }
+    onSaveClick() {
+        if (this.selectedKey) {
+            this.formGroup.markAllAsTouched();
+        }
+        if (!this.selectedKey || this.formGroup.valid) {
+            this.modalProcessing = true;
+            this.formGroup.disable();
+            this.multiEditorDataset.saveChanges()
+                .pipe(take(1))
+                .subscribe({
+                next: (_) => {
+                    this.modalProcessing = false;
+                    this.toggleModal();
+                },
+                error: (e) => {
+                    this.modalProcessing = false;
+                    this.formGroup.enable();
+                    if (e.status === 400 && e.error.errors) {
+                        this.dataGridDataset.selectRowID(e.error.entityKey);
+                        this.formService.setValidationErrorsFromHttpResponse(e);
+                    }
+                }
+            });
+        }
+    }
+    //#endregion
+    //#region Public methods
+    closeModal() {
+        this.modal.closeModal();
+    }
+    toggleModal() {
+        this.modal.toggleModal();
+        if (this.modal.isShown) {
+            this.gridLoading = true;
+            this.dataGridDataset.refresh();
+            this.selectedKey = undefined;
+            this.formGroup.reset({ emitEvent: false });
+            this.clearAllFormArrays(this.formGroup);
+            this.formGroup.disable({ emitEvent: false });
+        }
+    }
+    //#endregion
+    //#region Private methods
+    clearAllFormArrays(form) {
+        Object.keys(form.controls).forEach((key) => {
+            const control = form.get(key);
+            if (control instanceof FormArray) {
+                control.clear({ emitEvent: false });
+            }
+            // Check for nested FormArrays.
+            if (control instanceof FormGroup) {
+                this.clearAllFormArrays(control);
+            }
+        });
+    }
+    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                <a *ngIf=\"showAddButton\"\n                class=\"btn gray-500\"\n                [class.disabled]=\"modalProcessing || gridLoading || formLoading || formGroup.invalid\"\n                (click)=\"onNewClick()\">\n                    {{ addButtonLabel }}\n                </a>\n\n                <a *ngIf=\"showDeleteButton && hasSelectedKey\"\n                class=\"btn red-500\"\n                [class.disabled]=\"modalProcessing || gridLoading || formLoading\"\n                (click)=\"onDeleteClick()\">\n                    {{ removeButtonLabel }}\n                </a>\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" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", 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                <a *ngIf=\"showAddButton\"\n                class=\"btn gray-500\"\n                [class.disabled]=\"modalProcessing || gridLoading || formLoading || formGroup.invalid\"\n                (click)=\"onNewClick()\">\n                    {{ addButtonLabel }}\n                </a>\n\n                <a *ngIf=\"showDeleteButton && hasSelectedKey\"\n                class=\"btn red-500\"\n                [class.disabled]=\"modalProcessing || gridLoading || formLoading\"\n                (click)=\"onDeleteClick()\">\n                    {{ removeButtonLabel }}\n                </a>\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"] }]
+        }], ctorParameters: () => [], propDecorators: { modal: [{
+                type: ViewChild,
+                args: [ModalComponent]
+            }], addButtonLabel: [{
+                type: Input
+            }], formGroup: [{
+                type: Input
+            }], removeButtonLabel: [{
+                type: Input
+            }], showAddButton: [{
+                type: Input
+            }], showDeleteButton: [{
+                type: Input
+            }] } });
+
+class MultiSelectResultGridComponent extends BaseComponent {
+    //#region ViewChilds, Inputs, Outputs
+    isDisabled = false;
+    template;
+    //#endregion
+    //#region Variables
+    dataGridDataset = inject(DataGridDataset);
+    isLoading = true;
+    resultDataset = inject(MultiSelectResultDataset);
+    //#endregion
+    //#region Properties
+    //#endregion
+    //#region Constructor and Angular life cycle methods
+    constructor() {
+        super();
+    }
+    ngOnInit() {
+        this.resultDataset.loadStarted
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => {
+            this.isLoading = true;
+        });
+        this.resultDataset.loadFinished
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => {
+            this.isLoading = false;
+        });
+    }
+    //#endregion
+    //#region Event handlers
+    onItemRemoved(rowIndex) {
+        const id = this.resultDataset.displayedIDs[rowIndex];
+        this.dataGridDataset.deselectRowID(id);
+    }
+    onScrolled(event) {
+        const currentScroll = event.target.scrollTop + event.target.clientHeight;
+        const scrollHeight = event.target.scrollHeight - event.target.clientHeight;
+        if (currentScroll > scrollHeight && !this.isLoading && !this.resultDataset.loadedLastRow) {
+            this.isLoading = true;
+            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            <a\n            class=\"remove\"\n            [class.disabled]=\"isDisabled\"\n            (click)=\"onItemRemoved(i)\">\n                <i class=\"fas fa-times\"></i>\n            </a>\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))}.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" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", 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            <a\n            class=\"remove\"\n            [class.disabled]=\"isDisabled\"\n            (click)=\"onItemRemoved(i)\">\n                <i class=\"fas fa-times\"></i>\n            </a>\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))}.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: [{
+                type: Input
+            }] } });
+
+class MultiSelectComponent extends ModalComponent {
+    //#region ViewChilds, Inputs, Outputs
+    modal;
+    itemTemplate;
+    //#endregion
+    //#region Variables
+    isResultGridLoading = false;
+    isSearchGridLoading = false;
+    resultDataset = inject(MultiSelectResultDataset);
+    searchCriteria = '';
+    _searchColumn = '';
+    dataGridDataset = inject(DataGridDataset);
+    //#endregion
+    //#region Properties
+    get searchColumn() {
+        if (this._searchColumn.length === 0) {
+            let columnName = this.dataGridDataset.columns.filter((col) => col.field !== '')[0]?.field ?? 'Search';
+            columnName = columnName.charAt(0).toUpperCase() + columnName.slice(1);
+            this._searchColumn = columnName;
+        }
+        return this._searchColumn;
+    }
+    //#endregion
+    //#region Constructor and Angular life cycle methods
+    constructor() {
+        super();
+        this.dataGridDataset.configs.multiSelect = true;
+        this.closeButtonText = 'Button-Modal-Cancel';
+    }
+    ngOnInit() {
+        this.dataGridDataset.loadStarted
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => {
+            this.isSearchGridLoading = true;
+        });
+        this.dataGridDataset.loadFinished
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => {
+            this.isSearchGridLoading = false;
+            this.updateSelectedItems();
+        });
+        this.resultDataset.loadFinished
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => {
+            this.isResultGridLoading = false;
+            this.updateSelectedItems();
+        });
+        this.dataGridDataset.selectedRowsChanged
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((selectionChanges) => {
+            if (this.isSearchGridLoading || this.isResultGridLoading) {
+                return;
+            }
+            Object.keys(selectionChanges)
+                .forEach((key) => {
+                const selection = selectionChanges[key];
+                const id = this.dataGridDataset.getRowID(key);
+                if (selection.selected) {
+                    this.resultDataset.setIDToAdd(id, selection.rowData);
+                }
+                else {
+                    this.resultDataset.setIDToRemove(id);
+                }
+            });
+        });
+    }
+    //#endregion
+    //#region Event handlers
+    onSave() {
+        this.modalProcessing = true;
+        this.resultDataset.saveChanges()
+            .pipe(take(1))
+            .subscribe(() => {
+            this.modalProcessing = false;
+            this.toggleModal();
+        });
+    }
+    onSearch() {
+        const filters = this.dataGridDataset.filters ?? {};
+        this.isSearchGridLoading = true;
+        if (this.searchCriteria.length > 0) {
+            filters[this.searchColumn] = this.searchCriteria;
+            this.dataGridDataset.setFilters(filters);
+        }
+        else if (Object.keys(filters).includes(this.searchColumn)) {
+            this.clearSearch();
+        }
+    }
+    //#endregion
+    //#region Public methods
+    closeModal() {
+        this.modal.closeModal();
+    }
+    toggleModal() {
+        this.modal.toggleModal();
+        if (this.modal.isShown) {
+            this.searchCriteria = '';
+            this.clearSearch();
+            this.isResultGridLoading = true;
+            this.resultDataset.refresh();
+        }
+    }
+    //#endregion
+    //#regiosn Private methods
+    clearSearch() {
+        const filters = this.dataGridDataset.filters ?? {};
+        if (Object.keys(filters).includes(this.searchColumn)) {
+            delete filters[this.searchColumn];
+        }
+        this.dataGridDataset.setFilters(filters);
+    }
+    updateSelectedItems() {
+        if (this.isSearchGridLoading || this.isResultGridLoading) {
+            return;
+        }
+        // Filter by the results that are not marked to be removed.
+        const idsFromResult = (this.resultDataset.loadedKeys ?? [])
+            .map((key) => this.resultDataset.getRowID(key))
+            .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);
+        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" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", 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"] }]
+        }], ctorParameters: () => [], propDecorators: { modal: [{
+                type: ViewChild,
+                args: [ModalComponent]
+            }], itemTemplate: [{
+                type: Input
+            }] } });
+
+class SidebarItemComponent extends BaseComponent {
+    //#region ViewChilds, Inputs, Outputs
+    menuContainer;
+    menu;
+    level = 0;
+    //#endregion
+    //#region Variables
+    hasFailed = false;
+    isLoading = false;
+    isSelected = false;
+    _childHeight = 0;
+    changeDetectorRef = inject(ChangeDetectorRef);
+    sidebarService = inject(SidebarService);
+    //#endregion
+    //#region Properties
+    get childHeight() {
+        return this._childHeight;
+    }
+    get areChildrenLoaded() {
+        return this.isParent && (this.menu.children?.length ?? 0) > 0;
+    }
+    get isActive() {
+        return this.sidebarService.isActive;
+    }
+    get isCollapsed() {
+        return this.sidebarService.isCollapsed;
+    }
+    get isParent() {
+        return this.menu.childCount > 0;
+    }
+    get hasIcon() {
+        return !!this.menu.icon && this.menu.icon.length > 0;
+    }
+    //#endregion
+    //#region Constructor and Angular life cycle methods
+    constructor() {
+        super();
+    }
+    ngAfterViewInit() {
+        if (!!this.menu && !!this.menu.parent) {
+            this.menu.height = this.menuContainer?.nativeElement?.offsetHeight ?? 0;
+            this.sidebarService.childrenInitialized.emit(this.menu.parent);
+        }
+    }
+    ngOnInit() {
+        if (this.isParent) {
+            this.sidebarService.childrenFailed
+                .pipe(takeUntil(this.destroy$), filter((menu) => menu.id === this.menu.id), delay(1000))
+                .subscribe((_menu) => {
+                this.hasFailed = true;
+                this.isLoading = false;
+                this.isSelected = false;
+                this.menu.isSelected = false;
+                this.changeDetectorRef.detectChanges();
+            });
+            this.sidebarService.childrenLoading
+                .pipe(takeUntil(this.destroy$), filter((menu) => menu.id === this.menu.id))
+                .subscribe((_menu) => {
+                this.hasFailed = false;
+                this.isLoading = true;
+            });
+            this.sidebarService.childrenInitialized
+                .pipe(takeUntil(this.destroy$), filter((menu) => menu.id === this.menu.id && this.menu.children.every((child) => (child.height ?? 0) > 0)))
+                .subscribe((_menu) => {
+                this.isLoading = false;
+                this.hasFailed = false;
+                this.updateSubMenuHeight();
+                if (!!this.menu.parent) {
+                    this.sidebarService.childrenInitialized.emit(this.menu.parent);
+                }
+                this.changeDetectorRef.detectChanges();
+            });
+        }
+        this.sidebarService.selectionChanged
+            .pipe(takeUntil(this.destroy$), filter((menu) => menu.id === this.menu.id))
+            .subscribe((menu) => {
+            this.isSelected = menu.isSelected;
+            this.updateSubMenuHeight();
+        });
+    }
+    //#endregion
+    //#region Event handlers
+    onSelectItem() {
+        if (this.sidebarService.shouldActivate) {
+            this.sidebarService.isActive = true;
+        }
+        this.sidebarService.select(this.menu);
+    }
+    //#endregion
+    //#region Public methods
+    //#endregion
+    //#region Private methods
+    trackByFn(_index, item) {
+        return item.id;
+    }
+    getChildHeight(menu) {
+        if (menu.isSelected) {
+            return menu.children.reduce((height, childMenu) => height + (childMenu.height ?? 0) + this.getChildHeight(childMenu), 0);
+        }
+        return 0;
+    }
+    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: { menu: "menu", level: "level" }, host: { properties: { "class.active": "isActive", "class.expanded": "!isCollapsed", "class.first-level": "level === 0", "class.selected": "isSelected" } }, viewQueries: [{ propertyName: "menuContainer", first: true, predicate: ["menuContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<li>\n    <div #menuContainer\n    [class.failed]=\"hasFailed\"\n    [class.loading]=\"isLoading\"\n    [class.parent]=\"isParent\"\n    [class.selected]=\"isSelected\"\n    (click)=\"onSelectItem()\">\n        <a>\n            <i *ngIf=\"hasIcon\" 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\"\n        [menu]=\"child\"\n        [level]=\"level+1\">\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.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.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))}:host.first-level:before{position:absolute;top:0;left:0;bottom:0;z-index:10;width:0px;--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1));--tw-content: \"\";content:var(--tw-content);transition-property:width;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:width}:host.first-level.selected:before{width:4px}li{position:relative;height:100%}li>div{position:relative;overflow:hidden;height:var(--sidebar-item-height);line-height:var(--sidebar-item-height)}li>div:hover{--tw-bg-opacity: 1;background-color:rgb(51 65 85 / var(--tw-bg-opacity, 1))}li>div.parent:after{position:absolute;top:0;right:.75rem;width:10px;font-weight:800;transition-property:opacity;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}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}\n"], dependencies: [{ kind: "component", type: SidebarItemComponent, selector: "lib-sidebar-item", inputs: ["menu", "level"] }, { 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" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: SidebarItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-sidebar-item', imports: [
+                        NgFor,
+                        NgIf,
+                        NgStyle,
+                        TranslatePipe,
+                    ], host: {
+                        '[class.active]': 'isActive',
+                        '[class.expanded]': '!isCollapsed',
+                        '[class.first-level]': 'level === 0',
+                        '[class.selected]': 'isSelected',
+                    }, template: "<li>\n    <div #menuContainer\n    [class.failed]=\"hasFailed\"\n    [class.loading]=\"isLoading\"\n    [class.parent]=\"isParent\"\n    [class.selected]=\"isSelected\"\n    (click)=\"onSelectItem()\">\n        <a>\n            <i *ngIf=\"hasIcon\" 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\"\n        [menu]=\"child\"\n        [level]=\"level+1\">\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.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.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))}:host.first-level:before{position:absolute;top:0;left:0;bottom:0;z-index:10;width:0px;--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1));--tw-content: \"\";content:var(--tw-content);transition-property:width;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:width}:host.first-level.selected:before{width:4px}li{position:relative;height:100%}li>div{position:relative;overflow:hidden;height:var(--sidebar-item-height);line-height:var(--sidebar-item-height)}li>div:hover{--tw-bg-opacity: 1;background-color:rgb(51 65 85 / var(--tw-bg-opacity, 1))}li>div.parent:after{position:absolute;top:0;right:.75rem;width:10px;font-weight:800;transition-property:opacity;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}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}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { menuContainer: [{
+                type: ViewChild,
+                args: ['menuContainer']
+            }], menu: [{
+                type: Input
+            }], level: [{
+                type: Input
+            }] } });
+
+class SidebarComponent extends BaseComponent {
+    //#region ViewChilds, Inputs, Outputs
+    //#endregion
+    //#region Host listeners
+    onBodyMouseDown(event) {
+        if (this.isActive && event.target) {
+            const target = event.target;
+            this.wasClickedOutside = (event.button === 0 && !target.closest('lib-sidebar')) ?? false;
+        }
+    }
+    onBodyMouseUp(_event) {
+        if (this.wasClickedOutside) {
+            this.wasClickedOutside = false;
+            this.deactivate();
+        }
+    }
+    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);
+        }
+        if (isEscapeKey) {
+            this.deactivate();
+        }
+    }
+    onResize(_event) {
+        this.updateShouldActivate();
+    }
+    //#endregion
+    //#region Variables
+    sidebarConfigs = inject(SIDEBAR_CONFIGS);
+    configErrorText = this.sidebarConfigs.errorText;
+    configLoadingText = this.sidebarConfigs.loadingText;
+    configLogoCollapsedPath = this.sidebarConfigs.logoCollapsedPath;
+    configLogoExpandedPath = this.sidebarConfigs.logoExpandedPath;
+    hasFailed = false;
+    menus = [];
+    profile;
+    sidebarService = inject(SidebarService);
+    wasClickedOutside = false;
+    //#endregion
+    //#region Properties
+    get hasProfileImage() {
+        return this.isProfileLoaded && (this.profile.image?.length ?? 0) > 0;
+    }
+    get isActive() {
+        return this.sidebarService.isActive;
+    }
+    get isCollapsed() {
+        return this.sidebarService.isCollapsed;
+    }
+    get isLoading() {
+        return this.menus.length === 0;
+    }
+    get isProfileLoaded() {
+        return !!this.profile;
+    }
+    //#endregion
+    //#region Constructor and Angular life cycle methods
+    constructor() {
+        super();
+    }
+    ngAfterViewInit() {
+        this.updateShouldActivate();
+    }
+    ngOnInit() {
+        this.sidebarService.menuUrlSelected
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((_menu) => this.deactivate());
+        this.sidebarService.loadRoot()
+            .pipe(take(1))
+            .subscribe({
+            next: (menus) => this.menus = menus,
+            error: () => this.hasFailed = true
+        });
+        this.profile = this.sidebarService.getUserProfile();
+    }
+    //#endregion
+    //#region Event handlers
+    //#endregion
+    //#region Public methods
+    collapse() {
+        this.sidebarService.isCollapsed = !this.sidebarService.isCollapsed;
+        this.sidebarService.isActive = false;
+        if (this.sidebarService.isCollapsed) {
+            this.sidebarService.deselectAll();
+        }
+        this.updateShouldActivate();
+    }
+    //#endregion
+    //#region Private methods
+    trackByFn(_index, item) {
+        return item.id;
+    }
+    deactivate() {
+        if (this.sidebarService.isActive) {
+            this.sidebarService.isActive = false;
+            this.sidebarService.deselectAll();
+        }
+    }
+    updateShouldActivate() {
+        this.sidebarService.shouldActivate =
+            (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=\"header\">\n    <div class=\"logo-container\">\n        <img class=\"collapsed\" [src]=\"configLogoCollapsedPath\" />\n        <img class=\"expanded\" [src]=\"configLogoExpandedPath\" />\n    </div>\n\n    <div class=\"profile-container\" *ngIf=\"isProfileLoaded\">\n        <div class=\"picture\" *ngIf=\"hasProfileImage\">\n            <img [src]=\"profile!.image\" />\n        </div>\n\n        <div class=\"profile\">\n            <h4>{{ profile!.name }}</h4>\n            <h5>{{ profile!.title }}</h5>\n        </div>\n    </div>\n</div>    \n\n<nav>\n    <ul *ngIf=\"!isLoading; else loading\">\n        <lib-sidebar-item *ngFor=\"let menu of menus; trackBy: trackByFn\"\n        [menu]=\"menu\">\n        </lib-sidebar-item>\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<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{display:grid;height:100%;-webkit-user-select:none;user-select:none;overflow-x:hidden;--tw-bg-opacity: 1;background-color:rgb(0 67 114 / var(--tw-bg-opacity, 1));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);grid-template-areas:\"header\" \"nav\"}@media (min-width: 768px){:host{margin-left:0}:host.expanded{width:var(--sidebar-expanded-width)}:host.expanded .header .logo-container img.collapsed{opacity:0}:host.expanded .header .logo-container img.expanded{opacity:1}:host.expanded .header .profile-container .profile{padding-left:.5rem;opacity:1;width:calc(var(--sidebar-expanded-width) - var(--sidebar-picture-size) - 24px)}: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 .header .logo-container img.collapsed{opacity:0}:host.active .header .logo-container img.expanded{opacity:1}:host.active .header .profile-container .profile{padding-left:.5rem;opacity:1;width:calc(var(--sidebar-expanded-width) - var(--sidebar-picture-size) - 24px)}: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}.header{padding-top:.5rem;padding-bottom:.75rem;grid-area:header}.header .logo-container{position:relative;width:100%;overflow:hidden;text-align:center;height:var(--sidebar-logo-height)}.header .logo-container img{margin:auto;max-height:100%;min-width:fit-content;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:opacity}.header .logo-container img.expanded{position:absolute;top:0;left:50%;--tw-translate-x: -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));opacity:0}.header .profile-container{margin-left:.75rem;margin-right:.75rem;margin-top:.5rem;display:flex;flex-wrap:nowrap;height:var(--sidebar-picture-size)}.header .profile-container .picture{flex-shrink:0;overflow:hidden;border-radius:9999px;min-width:var(--sidebar-picture-size);width:var(--sidebar-picture-size)}.header .profile-container .picture img{min-width:var(--sidebar-picture-size)}.header .profile-container .profile{width:0px;overflow:hidden;white-space:nowrap;padding-left:0;opacity:0;transition-timing-function:cubic-bezier(.4,0,.2,1);transition:opacity var(--sidebar-animation-duration) ease-in-out,padding-left var(--sidebar-animation-duration) ease-in-out,width var(--sidebar-animation-duration) ease-in-out;will-change:width,opacity,padding-left}.header .profile-container .profile h4,.header .profile-container .profile h5{overflow:hidden;text-overflow:ellipsis;height:calc(var(--sidebar-picture-size) / 2);animation:text-clip .2s forwards}.header .profile-container .profile h4{font-weight:500;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.header .profile-container .profile h5{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(209 213 219 / var(--tw-text-opacity, 1))}nav{overflow-y:auto;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:#002f50cc}ul lib-sidebar-item,.loading,.error{font-weight:500;--tw-text-opacity: 1;color:rgb(229 231 235 / var(--tw-text-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: ["menu", "level"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: SidebarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-sidebar', imports: [
+                        CommonModule,
+                        NgFor,
+                        NgIf,
+                        SidebarItemComponent,
+                    ], host: {
+                        '[class.active]': 'isActive',
+                        '[class.expanded]': '!isCollapsed',
+                    }, template: "<div class=\"header\">\n    <div class=\"logo-container\">\n        <img class=\"collapsed\" [src]=\"configLogoCollapsedPath\" />\n        <img class=\"expanded\" [src]=\"configLogoExpandedPath\" />\n    </div>\n\n    <div class=\"profile-container\" *ngIf=\"isProfileLoaded\">\n        <div class=\"picture\" *ngIf=\"hasProfileImage\">\n            <img [src]=\"profile!.image\" />\n        </div>\n\n        <div class=\"profile\">\n            <h4>{{ profile!.name }}</h4>\n            <h5>{{ profile!.title }}</h5>\n        </div>\n    </div>\n</div>    \n\n<nav>\n    <ul *ngIf=\"!isLoading; else loading\">\n        <lib-sidebar-item *ngFor=\"let menu of menus; trackBy: trackByFn\"\n        [menu]=\"menu\">\n        </lib-sidebar-item>\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<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{display:grid;height:100%;-webkit-user-select:none;user-select:none;overflow-x:hidden;--tw-bg-opacity: 1;background-color:rgb(0 67 114 / var(--tw-bg-opacity, 1));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);grid-template-areas:\"header\" \"nav\"}@media (min-width: 768px){:host{margin-left:0}:host.expanded{width:var(--sidebar-expanded-width)}:host.expanded .header .logo-container img.collapsed{opacity:0}:host.expanded .header .logo-container img.expanded{opacity:1}:host.expanded .header .profile-container .profile{padding-left:.5rem;opacity:1;width:calc(var(--sidebar-expanded-width) - var(--sidebar-picture-size) - 24px)}: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 .header .logo-container img.collapsed{opacity:0}:host.active .header .logo-container img.expanded{opacity:1}:host.active .header .profile-container .profile{padding-left:.5rem;opacity:1;width:calc(var(--sidebar-expanded-width) - var(--sidebar-picture-size) - 24px)}: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}.header{padding-top:.5rem;padding-bottom:.75rem;grid-area:header}.header .logo-container{position:relative;width:100%;overflow:hidden;text-align:center;height:var(--sidebar-logo-height)}.header .logo-container img{margin:auto;max-height:100%;min-width:fit-content;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:opacity}.header .logo-container img.expanded{position:absolute;top:0;left:50%;--tw-translate-x: -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));opacity:0}.header .profile-container{margin-left:.75rem;margin-right:.75rem;margin-top:.5rem;display:flex;flex-wrap:nowrap;height:var(--sidebar-picture-size)}.header .profile-container .picture{flex-shrink:0;overflow:hidden;border-radius:9999px;min-width:var(--sidebar-picture-size);width:var(--sidebar-picture-size)}.header .profile-container .picture img{min-width:var(--sidebar-picture-size)}.header .profile-container .profile{width:0px;overflow:hidden;white-space:nowrap;padding-left:0;opacity:0;transition-timing-function:cubic-bezier(.4,0,.2,1);transition:opacity var(--sidebar-animation-duration) ease-in-out,padding-left var(--sidebar-animation-duration) ease-in-out,width var(--sidebar-animation-duration) ease-in-out;will-change:width,opacity,padding-left}.header .profile-container .profile h4,.header .profile-container .profile h5{overflow:hidden;text-overflow:ellipsis;height:calc(var(--sidebar-picture-size) / 2);animation:text-clip .2s forwards}.header .profile-container .profile h4{font-weight:500;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.header .profile-container .profile h5{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(209 213 219 / var(--tw-text-opacity, 1))}nav{overflow-y:auto;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:#002f50cc}ul lib-sidebar-item,.loading,.error{font-weight:500;--tw-text-opacity: 1;color:rgb(229 231 235 / var(--tw-text-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']]
+            }], onBodyMouseUp: [{
+                type: HostListener,
+                args: ['body:mouseup', ['$event']]
+            }], onDocumentKeyDown: [{
+                type: HostListener,
+                args: ['document:keydown.escape', ['$event']]
+            }], onResize: [{
+                type: HostListener,
+                args: ['window:resize', ['$event']]
+            }] } });
+
+class RibbonButtonComponent {
+    //#region ViewChilds, Inputs, Outputs
+    color = 'text-primary-500';
+    defaultOption = -1;
+    disabled = false;
+    icon;
+    iconSize = 'large';
+    label = '';
+    loading = false;
+    options = [];
+    action = new EventEmitter();
+    //#endregion
+    //#region Host listeners
+    bodyMouseDown(event) {
+        if (this.showDropdown) {
+            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')));
+        }
+    }
+    bodyMouseUp(event) {
+        if (this.showDropdown && this.clickedOutside) {
+            this.showDropdown = false;
+        }
+    }
+    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);
+        }
+        if (this.showDropdown && isEscape) {
+            this.showDropdown = false;
+        }
+    }
+    //#endregion
+    //#region Variables
+    showDropdown = false;
+    status = null;
+    clickedOutside = false;
+    //#endregion
+    //#region Properties
+    get buttonIcon() {
+        switch (this.status) {
+            case 'success':
+                return 'fa-check';
+            case 'failure':
+                return 'fa-times';
+            case 'warning':
+                return 'fa-exclamation';
+            default:
+                return this.icon ?? '';
+        }
+    }
+    get isButtonDisabled() {
+        return this.disabled || this.loading || (this.options.length > 0 && !this.options.some((option) => this.isOptionVisible(option)));
+    }
+    //#endregion
+    //#region Constructor and Angular life cycle methods
+    //#endregion
+    //#region Event handlers
+    onButtonClicked() {
+        if (this.options.length > 0) {
+            if (this.defaultOption >= 0 && this.defaultOption < this.options.length) {
+                this.showDropdown = false;
+                this.action.emit(this.options[this.defaultOption].id);
+            }
+            else {
+                this.onShowHideDropdown();
+            }
+        }
+        else {
+            this.action.emit();
+        }
+    }
+    onOptionClicked(option) {
+        this.showDropdown = false;
+        this.action.emit(option.id);
+    }
+    onShowHideDropdown() {
+        this.showDropdown = !this.showDropdown;
+    }
+    //#endregion
+    //#region Public methods
+    finishLoading(status) {
+        this.loading = false;
+        this.status = status;
+        setTimeout(() => {
+            this.status = null;
+        }, 1000);
+    }
+    startLoading() {
+        this.loading = true;
+    }
+    isOptionDisabled(option) {
+        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" }, 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    <a class=\"button\"\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    >\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    [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    >\n        <i class=\"fas fa-chevron-down\" [ngClass]=\"[ color ]\"></i>\n    </a>\n</div>\n\n<ul class=\"options-dropdown\" *ngIf=\"options.length > 0\">\n    <li *ngFor=\"let option of options; let i = index\"\n    [class.default-option]=\"i === defaultOption\"\n    [class.disabled]=\"isOptionDisabled(option)\"\n    [class.hidden]=\"!isOptionVisible(option)\"\n    (click)=\"onOptionClicked(option)\"\n    >\n        <i class=\"fas fa-fw\" *ngIf=\"!!option.icon\" [ngClass]=\"[ option.icon, color ]\"></i> {{ option.label | translate }}\n    </li>\n</ul>", 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" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", 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    <a class=\"button\"\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    >\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    [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    >\n        <i class=\"fas fa-chevron-down\" [ngClass]=\"[ color ]\"></i>\n    </a>\n</div>\n\n<ul class=\"options-dropdown\" *ngIf=\"options.length > 0\">\n    <li *ngFor=\"let option of options; let i = index\"\n    [class.default-option]=\"i === defaultOption\"\n    [class.disabled]=\"isOptionDisabled(option)\"\n    [class.hidden]=\"!isOptionVisible(option)\"\n    (click)=\"onOptionClicked(option)\"\n    >\n        <i class=\"fas fa-fw\" *ngIf=\"!!option.icon\" [ngClass]=\"[ option.icon, color ]\"></i> {{ option.label | translate }}\n    </li>\n</ul>", 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: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], iconSize: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], action: [{
+                type: Output
+            }], bodyMouseDown: [{
+                type: HostListener,
+                args: ['body:mousedown', ['$event']]
+            }], bodyMouseUp: [{
+                type: HostListener,
+                args: ['body:mouseup', ['$event']]
+            }], documentKeyDown: [{
+                type: HostListener,
+                args: ['document:keydown.escape', ['$event']]
+            }] } });
+
+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: [":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"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", 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: [":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 {
+    //#region ViewChilds, Inputs, Outputs
+    children;
+    label = '';
+    //#endregion
+    //#region Host listeners
+    //#endregion
+    //#region Variables
+    //#endregion
+    //#region Properties
+    get hasChildren() {
+        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"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", 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"] }]
+        }], propDecorators: { children: [{
+                type: ContentChildren,
+                args: [RibbonGroupChild, { descendants: true }]
+            }], label: [{
+                type: Input
+            }] } });
+
+class EnumTranslatePipe {
+    //#region ViewChilds, Inputs, Outputs
+    //#endregion
+    //#region Variables
+    translate = inject(TranslateService);
+    //#endregion
+    //#region Properties
+    //#endregion
+    //#region Constructor and Angular life cycle methods
+    //#endregion
+    //#region Event handlers
+    //#endregion
+    //#region Public methods
+    transform(enumType) {
+        return Object.keys(enumType)
+            .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" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: EnumTranslatePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'enumTranslate'
+                }]
+        }] });
+
+class ReplaceManyPipe {
+    //#region ViewChilds, Inputs, Outputs
+    //#endregion
+    //#region Variables
+    //#endregion
+    //#region Properties
+    //#endregion
+    //#region Constructor and Angular life cycle methods
+    //#endregion
+    //#region Event handlers
+    //#endregion
+    //#region Public methods
+    transform(message, replaceArgs) {
+        if (replaceArgs) {
+            for (const [key, value] of Object.entries(replaceArgs)) {
+                message = message.replace(key, value ?? '');
+            }
+        }
+        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" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: ReplaceManyPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'replaceMany'
+                }]
+        }] });
+
+class ReplacePipe {
+    //#region ViewChilds, Inputs, Outputs
+    //#endregion
+    //#region Variables
+    //#endregion
+    //#region Properties
+    //#endregion
+    //#region Constructor and Angular life cycle methods
+    //#endregion
+    //#region Event handlers
+    //#endregion
+    //#region Public methods
+    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" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: ReplacePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'replace'
+                }]
+        }] });
+
+/**
+ * @deprecated Use standalone component imports instead of LibraryModule.
+ * 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,
+            DataGridComponent,
+            DataGridRowComponent,
+            FormInputComponent,
+            FormInputGroupComponent,
+            SidebarComponent,
+            MultiEditorComponent,
+            MultiSelectComponent,
+            MultiSelectResultGridComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: LibraryModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [],
+                    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,
+                    ]
+                }]
+        }] });
+
+class DataGridConfigsProvider extends GridConfigsProvider {
+    //#region ViewChilds, Inputs, Outputs
+    //#endregion
+    //#region Variables
+    //#endregion
+    //#region Properties
+    //#endregion
+    //#region Constructor and Angular life cycle methods
+    constructor() {
+        super();
+        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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: DataGridConfigsProvider, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+class DateValidators {
+    //#region Public methods
+    static greaterThanControl(controlName) {
+        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 null;
+        };
+    }
+    static greaterThanOrEqualControl(controlName) {
+        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 null;
+        };
+    }
+    static greaterThanOrEqualToday(control) {
+        let today = new Date();
+        if (!!control.value && new Date(control.value) < today) {
+            return { 'greaterThanOrEqualToday': true };
+        }
+        return null;
+    }
+    static greaterThanToday(control) {
+        let today = new Date();
+        if (!!control.value && new Date(control.value) <= today) {
+            return { 'greaterThanToday': true };
+        }
+        return null;
+    }
+    static lessThanControl(controlName) {
+        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 null;
+        };
+    }
+    static lessThanOrEqualControl(controlName) {
+        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 null;
+        };
+    }
+    static lessThanOrEqualToday(control) {
+        let today = new Date();
+        if (!!control.value && new Date(control.value) > today) {
+            return { 'lessThanOrEqualToday': true };
+        }
+        return null;
+    }
+    static lessThanToday(control) {
+        let today = new Date();
+        if (!!control.value && new Date(control.value) >= today) {
+            return { 'lessThanToday': true };
+        }
+        return null;
+    }
+    static maxDate(maxDate) {
+        return (control) => {
+            if (!!control.value && new Date(control.value) > maxDate) {
+                return { 'maxDate': true };
+            }
+            return null;
+        };
+    }
+    static minDate(minDate) {
+        return (control) => {
+            if (!!control.value && new Date(control.value) < minDate) {
+                return { 'minDate': true };
+            }
+            return null;
+        };
+    }
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BaseComponent, BaseDataset, CatalogSelectComponent, CatalogService, DataGridComponent, DataGridConfigsProvider, DataGridDataset, DataGridRowComponent, DataProviderService, DateHelpers, DateValidators, EnumTranslatePipe, FormGroupComponent, FormGroupService, FormInputComponent, FormInputGroupComponent, FormService, GridConfigsProvider, GridDataset, GroupAccordionComponent, GroupContainerComponent, GroupScrollSpyComponent, GuidHelper, LibraryModule, ModalComponent, MultiEditorComponent, MultiEditorDataset, MultiSelectComponent, MultiSelectResultDataset, MultiSelectResultGridComponent, ReplaceManyPipe, ReplacePipe, RibbonButtonComponent, RibbonComponent, RibbonGroupChild, RibbonGroupComponent, RouterFormatter, SIDEBAR_CONFIGS, ScrollSpyDirective, SidebarComponent, SidebarConfigs, SidebarMenu, SidebarService };
+//# sourceMappingURL=zambon-dev-library.mjs.map