@zambon-dev/library 1.3.1 → 1.4.0

package/fesm2022/zambon-dev-library.mjs

@@ -1,6 +1,6 @@
 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, throwError, tap, map, takeUntil, filter, debounceTime, startWith, pairwise, Observable, forkJoin, switchMap, of, delay } from 'rxjs';
+import { Subject, ReplaySubject, take, throwError, tap, map, takeUntil, filter, debounceTime, startWith, pairwise, Observable, forkJoin, switchMap, of, delay, merge } from 'rxjs';
 import { Overlay, OverlayPositionBuilder } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
 import * as i1 from '@angular/common';
@@ -974,6 +974,8 @@ const SIDEBAR_CONFIGS = new InjectionToken('', {
 });
 class SidebarConfigs {
     errorText = 'Error';
+    /** Tooltip for items that open in a new browser tab. Rendered as-is, like {@link errorText}. */
+    externalLinkText = 'Opens in a new browser tab';
     loadingText = 'Loading';
     logoCollapsedPath;
     logoExpandedPath;
@@ -990,6 +992,14 @@ class SidebarMenu {
     id = 0;
     label = '';
     isSelected = false;
+    /**
+     * How {@link url} is opened. An absent value means {@link SidebarMenuOpenMode.Internal}.
+     *
+     * Left optional and without an initializer on purpose: the constructor is an `Object.assign`,
+     * which would overwrite a default with the `null` a nullable backend column serializes to.
+     * Read it through `toSidebarMenuOpenMode(menu.openMode)` instead of comparing it directly.
+     */
+    openMode;
     parent = null;
     region;
     url;
@@ -998,11 +1008,62 @@ class SidebarMenu {
     }
 }
 
+/**
+ * How a {@link SidebarMenu}'s `url` is opened when the item is clicked.
+ *
+ * Read the value off a menu through {@link toSidebarMenuOpenMode} rather than comparing the
+ * field directly: it crosses HTTP, so it can arrive as a string, as a number, as `null`, or not
+ * at all.
+ */
+var SidebarMenuOpenMode;
+(function (SidebarMenuOpenMode) {
+    /** `url` is an internal Angular route and opens an application tab. The default. */
+    SidebarMenuOpenMode["Internal"] = "internal";
+    /** `url` is an absolute http(s) address and opens in a new browser tab. */
+    SidebarMenuOpenMode["ExternalNewTab"] = "externalNewTab";
+    /** `url` is an absolute http(s) address and opens embedded in an application tab. */
+    SidebarMenuOpenMode["ExternalEmbedded"] = "externalEmbedded";
+})(SidebarMenuOpenMode || (SidebarMenuOpenMode = {}));
+/** Ordinals matching the mode column stored by the backend, for a numeric payload. */
+const ORDINAL_MODES = [
+    SidebarMenuOpenMode.Internal,
+    SidebarMenuOpenMode.ExternalNewTab,
+    SidebarMenuOpenMode.ExternalEmbedded,
+];
+/**
+ * Parses the wire value of `SidebarMenu.openMode`.
+ *
+ * Deliberately a parser rather than a `?? Internal` fallback, because the field is deserialized
+ * straight from each application's menu endpoint and its shape is not guaranteed:
+ *
+ * - a **number** is read as the backend's enum ordinal, which is what an ASP.NET Core enum
+ *   property serializes to unless that backend registers a string converter;
+ * - a **string** is matched case-insensitively, so `'externalNewTab'` and `'ExternalNewTab'`
+ *   both work;
+ * - anything else — an omitted field from a backend that predates this feature, `null`, or a
+ *   mode introduced by a newer one — degrades to {@link SidebarMenuOpenMode.Internal}.
+ *
+ * Degrading to `Internal` keeps an unrecognized mode behaving the way menus behaved before
+ * external destinations existed, instead of producing an item that does nothing when clicked.
+ */
+function toSidebarMenuOpenMode(value) {
+    if (typeof value === 'number') {
+        return ORDINAL_MODES[value] ?? SidebarMenuOpenMode.Internal;
+    }
+    if (typeof value === 'string') {
+        const normalized = value.toLowerCase();
+        return ORDINAL_MODES.find((mode) => mode.toLowerCase() === normalized)
+            ?? SidebarMenuOpenMode.Internal;
+    }
+    return SidebarMenuOpenMode.Internal;
+}
+
 class SidebarService {
     //#region ViewChilds, Inputs, Outputs
     childrenFailed = new EventEmitter();
     childrenLoading = new EventEmitter();
     childrenInitialized = new EventEmitter();
+    menuExternalUrlSelected = new EventEmitter();
     menuUrlSelected = new EventEmitter();
     selectionChanged = new EventEmitter();
     //#endregion
@@ -1049,6 +1110,19 @@ class SidebarService {
             this.loadChildren(menu);
         }
         const hasUrl = (menu.url?.length ?? 0) > 0;
+        const openMode = toSidebarMenuOpenMode(menu.openMode);
+        const isExternal = hasUrl && openMode !== SidebarMenuOpenMode.Internal;
+        // External destinations are announced on their own emitter, so a consumer that only knows
+        // menuUrlSelected never receives an absolute URL it would hand to the Angular router.
+        const urlSelected = isExternal ? this.menuExternalUrlSelected : this.menuUrlSelected;
+        // Opening a new browser tab is an action, not a destination: the user stays on the view
+        // already on screen, so the item must neither take the selection nor clear that view's.
+        // Parents still fall through, so a parent that carries a URL keeps expanding instead of
+        // becoming impossible to open.
+        if (isExternal && openMode === SidebarMenuOpenMode.ExternalNewTab && menu.childCount === 0) {
+            urlSelected.emit(menu);
+            return;
+        }
         // 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) {
@@ -1058,12 +1132,12 @@ class SidebarService {
             this.selectedMenu = menu;
             this.selectMenu(menu);
             if (hasUrl) {
-                this.menuUrlSelected.emit(menu);
+                urlSelected.emit(menu);
             }
         }
         else if (hasUrl) {
             // Menu with a URL is already selected — navigate again instead of toggling off.
-            this.menuUrlSelected.emit(menu);
+            urlSelected.emit(menu);
         }
         else {
             this.selectedMenu = null;
@@ -1240,7 +1314,7 @@ class FormInputComponent extends BaseComponent {
         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\">\r\n    <ng-container [ngSwitch]=\"type\">\r\n        \r\n        <textarea *ngSwitchCase=\"'textarea'\"\r\n        [attr.autofocus]=\"autofocus ? true : null\"\r\n        [attr.maxLength]=\"maxLength ?? null\"\r\n        [attr.rows]=\"rows\"\r\n        [class.invalid]=\"invalid\"\r\n        [formControlName]=\"controlName\"\r\n        (blur)=\"onBlur()\"\r\n        (focus)=\"onFocus()\"\r\n        (input)=\"onInput()\">\r\n        </textarea>\r\n\r\n        <ng-container *ngSwitchCase=\"'checkbox'\">\r\n            <input *ngIf=\"isFormControl; else fixedCheckbox\"\r\n            class=\"switch\"\r\n            type=\"checkbox\"\r\n            [attr.autofocus]=\"autofocus ? true : null\"\r\n            [class.invalid]=\"invalid\"\r\n            [formControlName]=\"controlName\"\r\n            (blur)=\"onBlur()\"\r\n            (focus)=\"onFocus()\"\r\n            (input)=\"onInput()\" />\r\n\r\n            <ng-template #fixedCheckbox>\r\n                <input\r\n                class=\"switch\"\r\n                type=\"checkbox\"\r\n                [(ngModel)]=\"fixedValue\"\r\n                [attr.readonly]=\"true\"\r\n                [class.invalid]=\"invalid\"\r\n                [class.readonly-as-disabled]=\"displayReadOnlyAsDisabled\"\r\n                [disabled]=\"isDisabled\"\r\n                [ngModelOptions]=\"{ standalone: true }\"\r\n                (blur)=\"onBlur()\"\r\n                (change)=\"onChange($event)\"\r\n                (focus)=\"onFocus()\"\r\n                (input)=\"onInput()\"\r\n                (ngModelChange)=\"onValueChanged($event)\" />\r\n            </ng-template>\r\n        </ng-container>\r\n\r\n\r\n        <ng-container *ngSwitchDefault>\r\n            <input *ngIf=\"isFormControl; else fixedTextBox\"\r\n            [attr.autofocus]=\"autofocus ? true : null\"\r\n            [attr.maxLength]=\"maxLength ?? null\"\r\n            [attr.min]=\"minAttributeValue\"\r\n            [attr.readonly]=\"readOnly ? true : null\"\r\n            [attr.step]=\"stepAttributeValue\"\r\n            [class.invalid]=\"invalid\"\r\n            [class.readonly-as-disabled]=\"displayReadOnlyAsDisabled\"\r\n            [formControlName]=\"controlName\"\r\n            [type]=\"type\"\r\n            (blur)=\"onBlur()\"\r\n            (focus)=\"onFocus()\"\r\n            (input)=\"onInput()\" />\r\n\r\n            <ng-template #fixedTextBox>\r\n                <input\r\n                type=\"text\"\r\n                [attr.maxLength]=\"maxLength ?? null\"\r\n                [attr.min]=\"minAttributeValue\"\r\n                [attr.readonly]=\"true\"\r\n                [attr.step]=\"stepAttributeValue\"\r\n                [class.invalid]=\"invalid\"\r\n                [class.readonly-as-disabled]=\"displayReadOnlyAsDisabled\"\r\n                [disabled]=\"isDisabled\"\r\n                [ngModel]=\"type === 'date' || type === 'datetime-local' ? (fixedValue | date: format) : ( type === 'number' ? (fixedValue | number) : fixedValue )\" \r\n                [ngModelOptions]=\"{ standalone: true }\"\r\n                (blur)=\"onBlur()\"\r\n                (focus)=\"onFocus()\"\r\n                (input)=\"onInput()\"\r\n                (ngModelChange)=\"onValueChanged($event)\" />\r\n            </ng-template>\r\n        </ng-container>\r\n\r\n    </ng-container>\r\n</ng-container>\r\n\r\n<ng-template #disabledControl>\r\n    <ng-container [ngSwitch]=\"type\">\r\n        <label *ngSwitchCase=\"'checkbox'\">\r\n            <i [ngClass]=\"fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value ? 'fa-solid fa-square-check' : 'fa-regular fa-square'\"></i>\r\n        </label>\r\n\r\n        <label *ngSwitchCase=\"'date'\">\r\n            {{ fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value | date: format }}\r\n        </label>\r\n\r\n        <label *ngSwitchCase=\"'datetime-local'\">\r\n            {{ fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value | date: format }}\r\n        </label>\r\n\r\n        <label *ngSwitchCase=\"'number'\">\r\n            {{ fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value | number: format }}\r\n        </label>\r\n\r\n        <label class=\"text\" *ngSwitchDefault>{{ fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value }}</label>\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #fixedTextbox let-fixedValue=\"fixedValue\">\r\n    \r\n</ng-template>\r\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 }] });
+    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", "attr.type": "null" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"formGroupDirective.form?.enabled || isFormEditMode;else disabledControl\">\n    <ng-container [ngSwitch]=\"type\">\n        \n        <textarea *ngSwitchCase=\"'textarea'\"\n        [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,
@@ -1252,8 +1326,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
                         NgSwitchCase,
                         ReactiveFormsModule,
                     ], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }], host: {
-                        '[class.full-height]': 'isFullHeight'
-                    }, template: "<ng-container *ngIf=\"formGroupDirective.form?.enabled || isFormEditMode;else disabledControl\">\r\n    <ng-container [ngSwitch]=\"type\">\r\n        \r\n        <textarea *ngSwitchCase=\"'textarea'\"\r\n        [attr.autofocus]=\"autofocus ? true : null\"\r\n        [attr.maxLength]=\"maxLength ?? null\"\r\n        [attr.rows]=\"rows\"\r\n        [class.invalid]=\"invalid\"\r\n        [formControlName]=\"controlName\"\r\n        (blur)=\"onBlur()\"\r\n        (focus)=\"onFocus()\"\r\n        (input)=\"onInput()\">\r\n        </textarea>\r\n\r\n        <ng-container *ngSwitchCase=\"'checkbox'\">\r\n            <input *ngIf=\"isFormControl; else fixedCheckbox\"\r\n            class=\"switch\"\r\n            type=\"checkbox\"\r\n            [attr.autofocus]=\"autofocus ? true : null\"\r\n            [class.invalid]=\"invalid\"\r\n            [formControlName]=\"controlName\"\r\n            (blur)=\"onBlur()\"\r\n            (focus)=\"onFocus()\"\r\n            (input)=\"onInput()\" />\r\n\r\n            <ng-template #fixedCheckbox>\r\n                <input\r\n                class=\"switch\"\r\n                type=\"checkbox\"\r\n                [(ngModel)]=\"fixedValue\"\r\n                [attr.readonly]=\"true\"\r\n                [class.invalid]=\"invalid\"\r\n                [class.readonly-as-disabled]=\"displayReadOnlyAsDisabled\"\r\n                [disabled]=\"isDisabled\"\r\n                [ngModelOptions]=\"{ standalone: true }\"\r\n                (blur)=\"onBlur()\"\r\n                (change)=\"onChange($event)\"\r\n                (focus)=\"onFocus()\"\r\n                (input)=\"onInput()\"\r\n                (ngModelChange)=\"onValueChanged($event)\" />\r\n            </ng-template>\r\n        </ng-container>\r\n\r\n\r\n        <ng-container *ngSwitchDefault>\r\n            <input *ngIf=\"isFormControl; else fixedTextBox\"\r\n            [attr.autofocus]=\"autofocus ? true : null\"\r\n            [attr.maxLength]=\"maxLength ?? null\"\r\n            [attr.min]=\"minAttributeValue\"\r\n            [attr.readonly]=\"readOnly ? true : null\"\r\n            [attr.step]=\"stepAttributeValue\"\r\n            [class.invalid]=\"invalid\"\r\n            [class.readonly-as-disabled]=\"displayReadOnlyAsDisabled\"\r\n            [formControlName]=\"controlName\"\r\n            [type]=\"type\"\r\n            (blur)=\"onBlur()\"\r\n            (focus)=\"onFocus()\"\r\n            (input)=\"onInput()\" />\r\n\r\n            <ng-template #fixedTextBox>\r\n                <input\r\n                type=\"text\"\r\n                [attr.maxLength]=\"maxLength ?? null\"\r\n                [attr.min]=\"minAttributeValue\"\r\n                [attr.readonly]=\"true\"\r\n                [attr.step]=\"stepAttributeValue\"\r\n                [class.invalid]=\"invalid\"\r\n                [class.readonly-as-disabled]=\"displayReadOnlyAsDisabled\"\r\n                [disabled]=\"isDisabled\"\r\n                [ngModel]=\"type === 'date' || type === 'datetime-local' ? (fixedValue | date: format) : ( type === 'number' ? (fixedValue | number) : fixedValue )\" \r\n                [ngModelOptions]=\"{ standalone: true }\"\r\n                (blur)=\"onBlur()\"\r\n                (focus)=\"onFocus()\"\r\n                (input)=\"onInput()\"\r\n                (ngModelChange)=\"onValueChanged($event)\" />\r\n            </ng-template>\r\n        </ng-container>\r\n\r\n    </ng-container>\r\n</ng-container>\r\n\r\n<ng-template #disabledControl>\r\n    <ng-container [ngSwitch]=\"type\">\r\n        <label *ngSwitchCase=\"'checkbox'\">\r\n            <i [ngClass]=\"fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value ? 'fa-solid fa-square-check' : 'fa-regular fa-square'\"></i>\r\n        </label>\r\n\r\n        <label *ngSwitchCase=\"'date'\">\r\n            {{ fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value | date: format }}\r\n        </label>\r\n\r\n        <label *ngSwitchCase=\"'datetime-local'\">\r\n            {{ fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value | date: format }}\r\n        </label>\r\n\r\n        <label *ngSwitchCase=\"'number'\">\r\n            {{ fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value | number: format }}\r\n        </label>\r\n\r\n        <label class=\"text\" *ngSwitchDefault>{{ fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value }}</label>\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #fixedTextbox let-fixedValue=\"fixedValue\">\r\n    \r\n</ng-template>\r\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"] }]
+                        '[class.full-height]': 'isFullHeight',
+                        // Clears a stray `type` attribute for the same reason as FormInputGroupComponent — see the
+                        // comment there. Applies when a consumer sets `type` on `lib-form-input` directly.
+                        '[attr.type]': 'null'
+                    }, template: "<ng-container *ngIf=\"formGroupDirective.form?.enabled || isFormEditMode;else disabledControl\">\n    <ng-container [ngSwitch]=\"type\">\n        \n        <textarea *ngSwitchCase=\"'textarea'\"\n        [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: [{
@@ -1374,7 +1451,7 @@ class FormInputGroupComponent extends BaseComponent {
         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\"\r\n[attr.for]=\"controlName\">\r\n    {{ label | translate }}:\r\n</label>\r\n\r\n<div class=\"field\"\r\n[class.col-span-2]=\"!showLabel\"\r\n[ngStyle]=\"{ 'align-content': alignContent }\" >\r\n    <div class=\"loading\" *ngIf=\"(loadingField || (formService.loading && formService.model === null)); else content\">\r\n        <div></div>\r\n    </div>\r\n\r\n    <ng-template #content>\r\n        <ng-container *ngTemplateOutlet=\"template ? template : defaultTemplate\">\r\n        </ng-container>\r\n        \r\n        <div class=\"validations\" [class.show]=\"formControl?.invalid\" *ngIf=\"formControl?.touched\">\r\n            <ng-container *ngFor=\"let error of formControl?.errors | keyvalue\">\r\n                <span *ngIf=\"hasValidation(error.key)\">{{ validations[error.key] | translate }}</span>\r\n                <ng-template #defaultValidationError>{{ error.key }}</ng-template>\r\n            </ng-container>\r\n        </div>\r\n        \r\n        <ng-template #defaultTemplate>\r\n            <lib-form-input #formInput\r\n            [autofocus]=\"autofocus\"\r\n            [controlName]=\"controlName\"\r\n            [fixedValue]=\"fixedValue\"\r\n            [format]=\"format\"\r\n            [isDisabled]=\"isDisabled\"\r\n            [isFullHeight]=\"isFullHeight\"\r\n            [min]=\"min\"\r\n            [maxLength]=\"maxLength\"\r\n            [readOnly]=\"readOnly\"\r\n            [rows]=\"rows\"\r\n            [step]=\"step\"\r\n            [type]=\"type\">\r\n            </lib-form-input>\r\n        </ng-template>\r\n        \r\n        <span class=\"text-sm italic\" *ngIf=\"hasNotes\">\r\n            *{{ notes | translate }}\r\n        </span>\r\n    </ng-template>\r\n\r\n</div>\r\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" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: FormInputGroupComponent, isStandalone: true, selector: "lib-form-input-group", inputs: { autofocus: "autofocus", alignContent: "alignContent", controlName: "controlName", fixedValue: "fixedValue", format: "format", label: "label", isDisabled: "isDisabled", isFullHeight: "isFullHeight", maxLength: "maxLength", min: "min", notes: "notes", readOnly: "readOnly", rows: "rows", showLabel: "showLabel", step: "step", template: "template", type: "type", validations: "validations" }, host: { properties: { "class.full-height": "isFullHeight", "attr.type": "null" } }, usesInheritance: true, ngImport: i0, template: "<label *ngIf=\"showLabel\"\n[attr.for]=\"controlName\">\n    {{ label | translate }}:\n</label>\n\n<div class=\"field\"\n[class.col-span-2]=\"!showLabel\"\n[ngStyle]=\"{ 'align-content': alignContent }\" >\n    <div class=\"loading\" *ngIf=\"(loadingField || (formService.loading && formService.model === null)); else content\">\n        <div></div>\n    </div>\n\n    <ng-template #content>\n        <ng-container *ngTemplateOutlet=\"template ? template : defaultTemplate\">\n        </ng-container>\n        \n        <div class=\"validations\" [class.show]=\"formControl?.invalid\" *ngIf=\"formControl?.touched\">\n            <ng-container *ngFor=\"let error of formControl?.errors | keyvalue\">\n                <span *ngIf=\"hasValidation(error.key)\">{{ validations[error.key] | translate }}</span>\n                <ng-template #defaultValidationError>{{ error.key }}</ng-template>\n            </ng-container>\n        </div>\n        \n        <ng-template #defaultTemplate>\n            <lib-form-input #formInput\n            [autofocus]=\"autofocus\"\n            [controlName]=\"controlName\"\n            [fixedValue]=\"fixedValue\"\n            [format]=\"format\"\n            [isDisabled]=\"isDisabled\"\n            [isFullHeight]=\"isFullHeight\"\n            [min]=\"min\"\n            [maxLength]=\"maxLength\"\n            [readOnly]=\"readOnly\"\n            [rows]=\"rows\"\n            [step]=\"step\"\n            [type]=\"type\">\n            </lib-form-input>\n        </ng-template>\n        \n        <span class=\"text-sm italic\" *ngIf=\"hasNotes\">\n            *{{ notes | translate }}\n        </span>\n    </ng-template>\n\n</div>\n", styles: [":host{grid-column:span 2 / span 2;display:grid;grid-template-columns:subgrid;gap:.75rem}:host.full-height{max-height:100%;overflow:auto}label{white-space:nowrap;padding-top:.25rem;padding-bottom:.25rem;text-align:right;font-size:.75rem;font-weight:700;text-transform:uppercase;line-height:1.5rem;letter-spacing:.025em;--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.field .validations{flex-basis:100%;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(220 38 38 / var(--tw-text-opacity, 1))}.field .validations.show{margin-top:.25rem}.field .validations span{display:block}.field .loading{max-width:24rem}@keyframes pulse{50%{opacity:.5}}.field .loading{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.field .loading *{height:.625rem;width:100%;border-radius:9999px;--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1))}@media (prefers-color-scheme: dark){.field .loading *{--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))}}\n"], dependencies: [{ kind: "component", type: FormInputComponent, selector: "lib-form-input", inputs: ["autofocus", "controlName", "disabledControlName", "displayReadOnlyAsDisabled", "fixedValue", "format", "invalid", "isDisabled", "isFullHeight", "maxLength", "min", "readOnly", "rows", "step", "type"], outputs: ["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,
@@ -1387,8 +1464,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
                         NgTemplateOutlet,
                         TranslatePipe,
                     ], host: {
-                        '[class.full-height]': 'isFullHeight'
-                    }, template: "<label *ngIf=\"showLabel\"\r\n[attr.for]=\"controlName\">\r\n    {{ label | translate }}:\r\n</label>\r\n\r\n<div class=\"field\"\r\n[class.col-span-2]=\"!showLabel\"\r\n[ngStyle]=\"{ 'align-content': alignContent }\" >\r\n    <div class=\"loading\" *ngIf=\"(loadingField || (formService.loading && formService.model === null)); else content\">\r\n        <div></div>\r\n    </div>\r\n\r\n    <ng-template #content>\r\n        <ng-container *ngTemplateOutlet=\"template ? template : defaultTemplate\">\r\n        </ng-container>\r\n        \r\n        <div class=\"validations\" [class.show]=\"formControl?.invalid\" *ngIf=\"formControl?.touched\">\r\n            <ng-container *ngFor=\"let error of formControl?.errors | keyvalue\">\r\n                <span *ngIf=\"hasValidation(error.key)\">{{ validations[error.key] | translate }}</span>\r\n                <ng-template #defaultValidationError>{{ error.key }}</ng-template>\r\n            </ng-container>\r\n        </div>\r\n        \r\n        <ng-template #defaultTemplate>\r\n            <lib-form-input #formInput\r\n            [autofocus]=\"autofocus\"\r\n            [controlName]=\"controlName\"\r\n            [fixedValue]=\"fixedValue\"\r\n            [format]=\"format\"\r\n            [isDisabled]=\"isDisabled\"\r\n            [isFullHeight]=\"isFullHeight\"\r\n            [min]=\"min\"\r\n            [maxLength]=\"maxLength\"\r\n            [readOnly]=\"readOnly\"\r\n            [rows]=\"rows\"\r\n            [step]=\"step\"\r\n            [type]=\"type\">\r\n            </lib-form-input>\r\n        </ng-template>\r\n        \r\n        <span class=\"text-sm italic\" *ngIf=\"hasNotes\">\r\n            *{{ notes | translate }}\r\n        </span>\r\n    </ng-template>\r\n\r\n</div>\r\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"] }]
+                        '[class.full-height]': 'isFullHeight',
+                        // Angular keeps static attributes in the DOM even when a directive consumes them as an
+                        // @Input(), so `type="checkbox"` would linger on this host element — where
+                        // @tailwindcss/forms' tag-agnostic `[type="checkbox"]` base rules style the host itself as
+                        // a checkbox (1px border, white fill, height:1rem). Clearing the attribute removes the
+                        // stray box for every type while leaving the `type` @Input() untouched.
+                        '[attr.type]': 'null'
+                    }, template: "<label *ngIf=\"showLabel\"\n[attr.for]=\"controlName\">\n    {{ label | translate }}:\n</label>\n\n<div class=\"field\"\n[class.col-span-2]=\"!showLabel\"\n[ngStyle]=\"{ 'align-content': alignContent }\" >\n    <div class=\"loading\" *ngIf=\"(loadingField || (formService.loading && formService.model === null)); else content\">\n        <div></div>\n    </div>\n\n    <ng-template #content>\n        <ng-container *ngTemplateOutlet=\"template ? template : defaultTemplate\">\n        </ng-container>\n        \n        <div class=\"validations\" [class.show]=\"formControl?.invalid\" *ngIf=\"formControl?.touched\">\n            <ng-container *ngFor=\"let error of formControl?.errors | keyvalue\">\n                <span *ngIf=\"hasValidation(error.key)\">{{ validations[error.key] | translate }}</span>\n                <ng-template #defaultValidationError>{{ error.key }}</ng-template>\n            </ng-container>\n        </div>\n        \n        <ng-template #defaultTemplate>\n            <lib-form-input #formInput\n            [autofocus]=\"autofocus\"\n            [controlName]=\"controlName\"\n            [fixedValue]=\"fixedValue\"\n            [format]=\"format\"\n            [isDisabled]=\"isDisabled\"\n            [isFullHeight]=\"isFullHeight\"\n            [min]=\"min\"\n            [maxLength]=\"maxLength\"\n            [readOnly]=\"readOnly\"\n            [rows]=\"rows\"\n            [step]=\"step\"\n            [type]=\"type\">\n            </lib-form-input>\n        </ng-template>\n        \n        <span class=\"text-sm italic\" *ngIf=\"hasNotes\">\n            *{{ notes | translate }}\n        </span>\n    </ng-template>\n\n</div>\n", styles: [":host{grid-column:span 2 / span 2;display:grid;grid-template-columns:subgrid;gap:.75rem}:host.full-height{max-height:100%;overflow:auto}label{white-space:nowrap;padding-top:.25rem;padding-bottom:.25rem;text-align:right;font-size:.75rem;font-weight:700;text-transform:uppercase;line-height:1.5rem;letter-spacing:.025em;--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.field .validations{flex-basis:100%;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(220 38 38 / var(--tw-text-opacity, 1))}.field .validations.show{margin-top:.25rem}.field .validations span{display:block}.field .loading{max-width:24rem}@keyframes pulse{50%{opacity:.5}}.field .loading{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.field .loading *{height:.625rem;width:100%;border-radius:9999px;--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1))}@media (prefers-color-scheme: dark){.field .loading *{--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { autofocus: [{
                 type: Input
             }], alignContent: [{
@@ -1975,7 +2058,7 @@ class CatalogSelectComponent extends BaseComponent {
         }
     }
     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\r\n[controlName]=\"controlName\"\r\n[label]=\"label\"\r\n[notes]=\"notes\"\r\n[template]=\"template\"\r\n[validations]=\"validations\">\r\n</lib-form-input-group>\r\n\r\n<ng-template #template>\r\n    <div class=\"catalog-container\"\r\n    [class.show]=\"isDropDownShown\">\r\n        <lib-form-input #input\r\n        [class.fixed-content]=\"readOnly && !shouldUseCriteria\"\r\n        [autofocus]=\"autofocus\"\r\n        [controlName]=\"displayControlName\"\r\n        [invalid]=\"isInvalid && isTouched\"\r\n        [readOnly]=\"readOnly\"\r\n        (blur)=\"onContainerBlur()\"\r\n        (click)=\"onContainerClick()\"\r\n        (focus)=\"onContainerFocus()\"\r\n        (keydown)=\"onKeyDown($event)\">\r\n        </lib-form-input>\r\n        <button *ngIf=\"showClearButton\"\r\n        class=\"clear-button\"\r\n        type=\"button\"\r\n        tabindex=\"-1\"\r\n        (click)=\"onClearClick($event)\">\r\n            <i class=\"fa-solid fa-xmark\"></i>\r\n        </button>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #dropdownTemplate>\r\n    <div class=\"dropdown-container\">\r\n        <ul class=\"dropdown\"\r\n        role=\"listbox\"\r\n        [attr.id]=\"listboxId\">\r\n            <li *ngIf=\"isLoading\"\r\n            (click)=\"onDropDownMessageClick()\">\r\n                {{ 'CatalogSelect-Loading' | translate }}\r\n            </li>\r\n\r\n            <li *ngIf=\"shouldUseCriteria && showMinimumCharactersMessage\"\r\n            title=\"{{ 'CatalogSelect-MinimumLengthSearch' | translate: { minimumLengthSearch: minimumLengthSearch } }}\"\r\n            (click)=\"onDropDownMessageClick()\">\r\n                {{ 'CatalogSelect-MinimumLengthSearch' | translate: { minimumLengthSearch: minimumLengthSearch } }}\r\n            </li>\r\n\r\n            <li *ngIf=\"showNoResultsMessage\"\r\n            title=\"{{ 'CatalogSelect-NoResultsFound' | translate }}\"\r\n            (click)=\"onDropDownMessageClick()\">\r\n                {{ 'CatalogSelect-NoResultsFound' | translate }}\r\n            </li>\r\n\r\n            <li *ngIf=\"showFailureMessage\"\r\n            class=\"error\"\r\n            title=\"{{ 'CatalogSelect-FailureMessage' | translate }}\"\r\n            (click)=\"onDropDownErrorClick()\">\r\n                {{ 'CatalogSelect-FailureMessage' | translate }}\r\n            </li>\r\n\r\n            <li class=\"dropdown-item\" *ngFor=\"let entry of displayedEntries; let i = index\"\r\n            role=\"option\"\r\n            [attr.id]=\"getOptionId(i)\"\r\n            [attr.aria-selected]=\"selectedValue === entry.value\"\r\n            [class.focused]=\"focusedIndex === i\"\r\n            [class.selected]=\"selectedValue === entry.value\"\r\n            (click)=\"onDropDownItemClick(entry)\">\r\n                {{ entry.display }}\r\n            </li>\r\n        </ul>\r\n    </div>\r\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" }] });
+    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,
@@ -1985,7 +2068,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
                         NgFor,
                         NgIf,
                         TranslatePipe,
-                    ], template: "<lib-form-input-group\r\n[controlName]=\"controlName\"\r\n[label]=\"label\"\r\n[notes]=\"notes\"\r\n[template]=\"template\"\r\n[validations]=\"validations\">\r\n</lib-form-input-group>\r\n\r\n<ng-template #template>\r\n    <div class=\"catalog-container\"\r\n    [class.show]=\"isDropDownShown\">\r\n        <lib-form-input #input\r\n        [class.fixed-content]=\"readOnly && !shouldUseCriteria\"\r\n        [autofocus]=\"autofocus\"\r\n        [controlName]=\"displayControlName\"\r\n        [invalid]=\"isInvalid && isTouched\"\r\n        [readOnly]=\"readOnly\"\r\n        (blur)=\"onContainerBlur()\"\r\n        (click)=\"onContainerClick()\"\r\n        (focus)=\"onContainerFocus()\"\r\n        (keydown)=\"onKeyDown($event)\">\r\n        </lib-form-input>\r\n        <button *ngIf=\"showClearButton\"\r\n        class=\"clear-button\"\r\n        type=\"button\"\r\n        tabindex=\"-1\"\r\n        (click)=\"onClearClick($event)\">\r\n            <i class=\"fa-solid fa-xmark\"></i>\r\n        </button>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #dropdownTemplate>\r\n    <div class=\"dropdown-container\">\r\n        <ul class=\"dropdown\"\r\n        role=\"listbox\"\r\n        [attr.id]=\"listboxId\">\r\n            <li *ngIf=\"isLoading\"\r\n            (click)=\"onDropDownMessageClick()\">\r\n                {{ 'CatalogSelect-Loading' | translate }}\r\n            </li>\r\n\r\n            <li *ngIf=\"shouldUseCriteria && showMinimumCharactersMessage\"\r\n            title=\"{{ 'CatalogSelect-MinimumLengthSearch' | translate: { minimumLengthSearch: minimumLengthSearch } }}\"\r\n            (click)=\"onDropDownMessageClick()\">\r\n                {{ 'CatalogSelect-MinimumLengthSearch' | translate: { minimumLengthSearch: minimumLengthSearch } }}\r\n            </li>\r\n\r\n            <li *ngIf=\"showNoResultsMessage\"\r\n            title=\"{{ 'CatalogSelect-NoResultsFound' | translate }}\"\r\n            (click)=\"onDropDownMessageClick()\">\r\n                {{ 'CatalogSelect-NoResultsFound' | translate }}\r\n            </li>\r\n\r\n            <li *ngIf=\"showFailureMessage\"\r\n            class=\"error\"\r\n            title=\"{{ 'CatalogSelect-FailureMessage' | translate }}\"\r\n            (click)=\"onDropDownErrorClick()\">\r\n                {{ 'CatalogSelect-FailureMessage' | translate }}\r\n            </li>\r\n\r\n            <li class=\"dropdown-item\" *ngFor=\"let entry of displayedEntries; let i = index\"\r\n            role=\"option\"\r\n            [attr.id]=\"getOptionId(i)\"\r\n            [attr.aria-selected]=\"selectedValue === entry.value\"\r\n            [class.focused]=\"focusedIndex === i\"\r\n            [class.selected]=\"selectedValue === entry.value\"\r\n            (click)=\"onDropDownItemClick(entry)\">\r\n                {{ entry.display }}\r\n            </li>\r\n        </ul>\r\n    </div>\r\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"] }]
+                    ], 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']]
@@ -2126,7 +2209,7 @@ class DataGridRowComponent extends BaseComponent {
         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\"\r\nclass=\"cell\"\r\n(click)=\"onToggleSelection()\"\r\n(onResize)=\"onResizeSelection($event)\">\r\n    <input class=\"form-input\"\r\n    type=\"checkbox\"\r\n    [attr.disabled]=\"disabled\"\r\n    [(ngModel)]=\"selected\" />\r\n</div> \r\n\r\n<div #cell\r\n*ngFor=\"let column of columns; index as i\"\r\nclass=\"cell\"\r\n[class.disabled]=\"disabled\"\r\n[ngClass]=\"column.customClass\">\r\n    <div *ngIf=\"isFirstRow\"\r\n    class=\"spacer\"\r\n    (onResize)=\"onResize(i, $event)\"></div>\r\n\r\n    <ng-container *ngTemplateOutlet=\"column.template ? column.template : simpleTemplate; context: { rowData: rowData, column: column }\">\r\n    </ng-container>\r\n</div>\r\n\r\n<ng-template #simpleTemplate let-rowData=\"rowData\" let-column=\"column\">\r\n    <span>{{ getValue(column.field) }}</span>\r\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 });
+    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 selection\"\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}.cell.selection{display:flex;align-items:center}.spacer{position:absolute;inset:0;z-index:-1;height:0px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: NgxResizeObserverModule }, { kind: "directive", type: i2.NgxResizeObserverDirective, selector: "[onResize]", inputs: ["resizeBoxModel"], outputs: ["onResize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: DataGridRowComponent, decorators: [{
             type: Component,
@@ -2140,7 +2223,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
                         NgFor,
                         NgTemplateOutlet,
                         NgxResizeObserverModule,
-                    ], template: "<div *ngIf=\"dataGridDataset.configs.multiSelect\"\r\nclass=\"cell\"\r\n(click)=\"onToggleSelection()\"\r\n(onResize)=\"onResizeSelection($event)\">\r\n    <input class=\"form-input\"\r\n    type=\"checkbox\"\r\n    [attr.disabled]=\"disabled\"\r\n    [(ngModel)]=\"selected\" />\r\n</div> \r\n\r\n<div #cell\r\n*ngFor=\"let column of columns; index as i\"\r\nclass=\"cell\"\r\n[class.disabled]=\"disabled\"\r\n[ngClass]=\"column.customClass\">\r\n    <div *ngIf=\"isFirstRow\"\r\n    class=\"spacer\"\r\n    (onResize)=\"onResize(i, $event)\"></div>\r\n\r\n    <ng-container *ngTemplateOutlet=\"column.template ? column.template : simpleTemplate; context: { rowData: rowData, column: column }\">\r\n    </ng-container>\r\n</div>\r\n\r\n<ng-template #simpleTemplate let-rowData=\"rowData\" let-column=\"column\">\r\n    <span>{{ getValue(column.field) }}</span>\r\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"] }]
+                    ], template: "<div *ngIf=\"dataGridDataset.configs.multiSelect\"\nclass=\"cell selection\"\n(click)=\"onToggleSelection()\"\n(onResize)=\"onResizeSelection($event)\">\n    <input class=\"form-input\"\n    type=\"checkbox\"\n    [attr.disabled]=\"disabled\"\n    [(ngModel)]=\"selected\" />\n</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}.cell.selection{display:flex;align-items:center}.spacer{position:absolute;inset:0;z-index:-1;height:0px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { disabled: [{
                 type: Input
             }], isFirstRow: [{
@@ -2335,7 +2418,7 @@ class DataGridComponent extends BaseComponent {
         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\"\r\n*ngIf=\"showButtons\">\r\n    <ng-content select=\"[buttons]\"></ng-content>\r\n</div>\r\n\r\n<div class=\"header\"\r\n[class.hide]=\"isHideColumns\"\r\n[style.padding-right.px]=\"headerRightMargin\">\r\n    <div class=\"header-row\">\r\n        <div *ngIf=\"isShowMultiSelect\"\r\n        class=\"header-cell selection\"\r\n        [ngStyle]=\"{\r\n            'width': selectionColWidth ? selectionColWidth : null\r\n        }\">\r\n            &nbsp;\r\n        </div>\r\n        \r\n        <div *ngFor=\"let column of columns\"\r\n        class=\"header-cell\"\r\n        [ngStyle]=\"{\r\n            'width.px': column.realSize ?? 0 > 0 ? column.realSize : null\r\n        }\">\r\n            <span>{{ column.headerName | translate }}</span>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div #body\r\nclass=\"body\"\r\n[style.min-height.px]=\"bodyMinHeight\">\r\n    <cdk-virtual-scroll-viewport\r\n    [itemSize]=\"configs.rowHeight\"\r\n    [style.grid-template-columns]=\"gridColumns\">\r\n        <lib-data-grid-row #row\r\n        *cdkVirtualFor=\"let row of dataGridDataset.loadedRows; index as i; trackBy: trackByFn\"\r\n        [disabled]=\"disabled\"\r\n        [isFirstRow]=\"isFirstVisibleRow(i)\"\r\n        [rowData]=\"row\"\r\n        [style.height.px]=\"configs.rowHeight\"\r\n        (selectionResized)=\"onSelectionResized($event)\">\r\n        </lib-data-grid-row>\r\n\r\n        <div *ngIf=\"loading\"\r\n        class=\"loading\"\r\n        [style.height.px]=\"configs.rowHeight\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\r\n                <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\r\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>\r\n            </svg>\r\n    \r\n            <span>\r\n                {{ dataGridDataset.configs.loadingDisplayText ?? '' | translate }} \r\n            </span>\r\n        </div>\r\n        \r\n        <div *ngIf=\"!loading && !hasBeenLoaded && lazyLoadRows\"\r\n        class=\"message\"\r\n        [style.height.px]=\"configs.rowHeight\">\r\n            <span>\r\n                {{ messageToDisplayWhenLazyLoad | translate }}\r\n            </span>\r\n        </div>\r\n\r\n        <ng-container *ngIf=\"!loading && hasBeenLoaded && (!hasLoadedRows || hasFailed)\">\r\n            <div *ngIf=\"!hasFailed && !hasLoadedRows && hasMessageToDisplayWhenEmpty && shouldDisplayMessageWhenEmpty\"\r\n            class=\"message\"\r\n            [style.height.px]=\"configs.rowHeight\">\r\n                <span>\r\n                    {{ messageToDisplayWhenEmpty | translate }}\r\n                </span>\r\n            </div>\r\n\r\n            <div *ngIf=\"hasFailed\"\r\n            class=\"message\"\r\n            [style.height.px]=\"configs.rowHeight\">\r\n                <span>\r\n                    <i class=\"fas fa-exclamation-triangle mr-2 text-yellow-600\"></i>{{ messageToDisplayWhenFailed | translate }}\r\n                </span>\r\n            </div>\r\n        </ng-container>\r\n    </cdk-virtual-scroll-viewport>\r\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" }] });
+    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,
@@ -2348,7 +2431,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
                         NgStyle,
                         ScrollingModule,
                         TranslatePipe,
-                    ], template: "<div class=\"buttons\"\r\n*ngIf=\"showButtons\">\r\n    <ng-content select=\"[buttons]\"></ng-content>\r\n</div>\r\n\r\n<div class=\"header\"\r\n[class.hide]=\"isHideColumns\"\r\n[style.padding-right.px]=\"headerRightMargin\">\r\n    <div class=\"header-row\">\r\n        <div *ngIf=\"isShowMultiSelect\"\r\n        class=\"header-cell selection\"\r\n        [ngStyle]=\"{\r\n            'width': selectionColWidth ? selectionColWidth : null\r\n        }\">\r\n            &nbsp;\r\n        </div>\r\n        \r\n        <div *ngFor=\"let column of columns\"\r\n        class=\"header-cell\"\r\n        [ngStyle]=\"{\r\n            'width.px': column.realSize ?? 0 > 0 ? column.realSize : null\r\n        }\">\r\n            <span>{{ column.headerName | translate }}</span>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div #body\r\nclass=\"body\"\r\n[style.min-height.px]=\"bodyMinHeight\">\r\n    <cdk-virtual-scroll-viewport\r\n    [itemSize]=\"configs.rowHeight\"\r\n    [style.grid-template-columns]=\"gridColumns\">\r\n        <lib-data-grid-row #row\r\n        *cdkVirtualFor=\"let row of dataGridDataset.loadedRows; index as i; trackBy: trackByFn\"\r\n        [disabled]=\"disabled\"\r\n        [isFirstRow]=\"isFirstVisibleRow(i)\"\r\n        [rowData]=\"row\"\r\n        [style.height.px]=\"configs.rowHeight\"\r\n        (selectionResized)=\"onSelectionResized($event)\">\r\n        </lib-data-grid-row>\r\n\r\n        <div *ngIf=\"loading\"\r\n        class=\"loading\"\r\n        [style.height.px]=\"configs.rowHeight\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\r\n                <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\r\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>\r\n            </svg>\r\n    \r\n            <span>\r\n                {{ dataGridDataset.configs.loadingDisplayText ?? '' | translate }} \r\n            </span>\r\n        </div>\r\n        \r\n        <div *ngIf=\"!loading && !hasBeenLoaded && lazyLoadRows\"\r\n        class=\"message\"\r\n        [style.height.px]=\"configs.rowHeight\">\r\n            <span>\r\n                {{ messageToDisplayWhenLazyLoad | translate }}\r\n            </span>\r\n        </div>\r\n\r\n        <ng-container *ngIf=\"!loading && hasBeenLoaded && (!hasLoadedRows || hasFailed)\">\r\n            <div *ngIf=\"!hasFailed && !hasLoadedRows && hasMessageToDisplayWhenEmpty && shouldDisplayMessageWhenEmpty\"\r\n            class=\"message\"\r\n            [style.height.px]=\"configs.rowHeight\">\r\n                <span>\r\n                    {{ messageToDisplayWhenEmpty | translate }}\r\n                </span>\r\n            </div>\r\n\r\n            <div *ngIf=\"hasFailed\"\r\n            class=\"message\"\r\n            [style.height.px]=\"configs.rowHeight\">\r\n                <span>\r\n                    <i class=\"fas fa-exclamation-triangle mr-2 text-yellow-600\"></i>{{ messageToDisplayWhenFailed | translate }}\r\n                </span>\r\n            </div>\r\n        </ng-container>\r\n    </cdk-virtual-scroll-viewport>\r\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"] }]
+                    ], 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']
@@ -2375,7 +2458,7 @@ class FormGroupComponent {
         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\"\r\nclass=\"title\" >\r\n    {{ label | translate }}\r\n</h3>\r\n\r\n<div class=\"content\"\r\n[class.has-title]=\"hasTitle\">\r\n    <ng-content></ng-content>\r\n</div>", styles: [":host-context.expand{display:flex;max-height:100%;flex-direction:column;overflow-y:hidden}:host-context.expand .content{max-height:100%;flex-grow:1;overflow-y:hidden}.title{font-size:1.125rem;line-height:1.75rem;font-weight:600}.content{display:grid;grid-auto-rows:auto;grid-template-columns:min-content minmax(0,1fr);gap:.25rem}.content.has-title{border-top-width:1px;border-color:#d1d5dbe6;padding:.75rem .5rem .5rem}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    static ɵ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,
@@ -2384,7 +2467,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
                         TranslatePipe,
                     ], host: {
                         '[class.expand]': 'shouldExpand'
-                    }, template: "<h3 *ngIf=\"hasTitle\"\r\nclass=\"title\" >\r\n    {{ label | translate }}\r\n</h3>\r\n\r\n<div class=\"content\"\r\n[class.has-title]=\"hasTitle\">\r\n    <ng-content></ng-content>\r\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"] }]
+                    }, 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: [{
@@ -2434,13 +2517,13 @@ class GroupAccordionComponent {
         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\">\r\n    <h6 (click)=\"onToggle()\"><i class=\"fas fa-chevron-down fa-sm\"></i>{{ this.label }}</h6>\r\n</div>\r\n\r\n<div #container class=\"content animate\"\r\n[ngStyle]=\"maxHeight >= 0 && {\r\n    'height.px': maxHeight,\r\n    'max-height.px': maxHeight\r\n} || null\">\r\n    <div #maxHeighContainer>\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>", styles: [":host-context{margin-bottom:1rem;display:flex;flex-direction:column}:host-context.collapsed i{--tw-rotate: -90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}:host-context.collapsed .content{max-height:0px!important;overflow:hidden!important}:host-context:not(.collapsed) .content{animation:show .15s}.title{-webkit-user-select:none;user-select:none}.title i{margin-right:.5rem;padding-top:.25rem;--tw-text-opacity: 1;color:rgb(100 116 139 / var(--tw-text-opacity, 1));transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.title h6{margin-bottom:0;display:inline;height:3rem;cursor:pointer;text-overflow:ellipsis;white-space:nowrap;padding-left:.25rem;padding-right:.5rem;font-size:1.125rem;text-transform:uppercase;line-height:3rem}.content{box-sizing:content-box;flex-grow:1;overflow-y:hidden;padding-left:.25rem;padding-right:.25rem}.content.animate{transition-property:max-height;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.content div{padding-bottom:.25rem}@media (min-width: 1024px){.content div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}}@media (min-width: 1280px){.content div{grid-template-columns:repeat(3,minmax(0,1fr))}}.content div{height:100%}@keyframes show{0%{overflow:hidden}99%{overflow:hidden}to{overflow:auto}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    static ɵ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\">\r\n    <h6 (click)=\"onToggle()\"><i class=\"fas fa-chevron-down fa-sm\"></i>{{ this.label }}</h6>\r\n</div>\r\n\r\n<div #container class=\"content animate\"\r\n[ngStyle]=\"maxHeight >= 0 && {\r\n    'height.px': maxHeight,\r\n    'max-height.px': maxHeight\r\n} || null\">\r\n    <div #maxHeighContainer>\r\n        <ng-content></ng-content>\r\n    </div>\r\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"] }]
+                    ], 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']
@@ -2535,7 +2618,7 @@ class GroupContainerComponent {
         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\">\r\n    <i *ngIf=\"!!title && !!icon\" class=\"fas fa-fw\" [ngClass]=\"icon\"></i>\r\n\r\n    <h4 *ngIf=\"!!title\">{{ title | translate }}</h4>\r\n\r\n    <svg *ngIf=\"!title\" [ngClass]=\"''\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\r\n        <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\r\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>\r\n    </svg>\r\n</div>\r\n\r\n<div class=\"content-container\">\r\n    <ng-content></ng-content>\r\n</div>", styles: [":host-context{position:relative;display:flex;flex-grow:1;flex-direction:column;overflow:hidden;border-radius:.5rem;border-width:1px;border-color:#d1d5dbe6;background-color:#fffc}.title{display:flex;height:2rem;align-items:center;text-overflow:ellipsis;border-bottom-width:1px;border-color:#d1d5dbe6;padding:.25rem .5rem}.title i{padding-right:.5rem;--tw-text-opacity: 1;color:rgb(100 116 139 / var(--tw-text-opacity, 1))}.title h4{font-weight:600}.title svg{height:1.25rem;width:1.25rem}@keyframes spin{to{transform:rotate(360deg)}}.title svg{animation:spin 1s linear infinite}.content-container{position:relative;display:flex;flex-grow:1;overflow:hidden}.content-container ::ng-deep>*{flex-grow:1;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    static ɵ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,
@@ -2543,7 +2626,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
                         NgClass,
                         NgIf,
                         TranslatePipe,
-                    ], template: "<div class=\"title\">\r\n    <i *ngIf=\"!!title && !!icon\" class=\"fas fa-fw\" [ngClass]=\"icon\"></i>\r\n\r\n    <h4 *ngIf=\"!!title\">{{ title | translate }}</h4>\r\n\r\n    <svg *ngIf=\"!title\" [ngClass]=\"''\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\r\n        <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\r\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>\r\n    </svg>\r\n</div>\r\n\r\n<div class=\"content-container\">\r\n    <ng-content></ng-content>\r\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"] }]
+                    ], 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]
@@ -2570,14 +2653,14 @@ class GroupScrollSpyComponent {
         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\">\r\n    <a *ngFor=\"let title of titles; let i = index\"\r\n        class=\"item\" [class.active]=\"i === activeSection\"\r\n        (click)=\"scrollTo(i)\"\r\n    >{{ title }}</a>\r\n</div>\r\n\r\n<div class=\"content\" libScrollSpy\r\n[class.no-scroll-spy]=\"titles.length === 0\"\r\n[spiedTags]=\"['lib-group-accordion']\"\r\n(activeSectionChange)=\"activeSectionChanged($event)\"\r\n>\r\n    <ng-content></ng-content>\r\n</div>", styles: [":host-context{position:relative;display:flex;height:100%;max-height:100%;min-height:100%;flex-grow:1;overflow:hidden}.content{display:flex;flex-grow:1;flex-direction:column;overflow:auto;scroll-behavior:smooth;padding:.75rem .75rem .25rem}@media (min-width: 768px){.content{padding-right:10.5rem}.content.no-scroll-spy{padding-right:.75rem}}.scroll-spy{position:absolute;top:.75rem;right:.75rem;display:none;width:9rem;-webkit-user-select:none;user-select:none;flex-direction:column}@media (min-width: 768px){.scroll-spy{display:flex}}.scroll-spy a{cursor:pointer;border-left-width:2px;--tw-border-opacity: 1;border-left-color:rgb(209 213 219 / var(--tw-border-opacity, 1));padding:.5rem 1rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.scroll-spy a.active{--tw-border-opacity: 1;border-left-color:rgb(0 107 182 / var(--tw-border-opacity, 1));--tw-text-opacity: 1;color:rgb(0 107 182 / var(--tw-text-opacity, 1))}.scroll-spy a:active{background-color:#006bb61a}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: ScrollSpyDirective, selector: "[libScrollSpy]", inputs: ["spiedTags"], outputs: ["activeSectionChange"] }] });
+    static ɵ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\">\r\n    <a *ngFor=\"let title of titles; let i = index\"\r\n        class=\"item\" [class.active]=\"i === activeSection\"\r\n        (click)=\"scrollTo(i)\"\r\n    >{{ title }}</a>\r\n</div>\r\n\r\n<div class=\"content\" libScrollSpy\r\n[class.no-scroll-spy]=\"titles.length === 0\"\r\n[spiedTags]=\"['lib-group-accordion']\"\r\n(activeSectionChange)=\"activeSectionChanged($event)\"\r\n>\r\n    <ng-content></ng-content>\r\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"] }]
+                    ], 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]
@@ -2672,7 +2755,7 @@ class ModalComponent extends BaseComponent {
         }
     }
     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>\r\n\r\n<div class=\"modal-container size-{{ size }} {{ position }}\">\r\n    <form class=\"modal-content\">\r\n        <div class=\"modal-header\" *ngIf=\"title\">\r\n            <p class=\"text-2xl font-bold\">{{ title }}</p>\r\n\r\n            <button type=\"button\" class=\"modal-close\" (click)=\"toggleModal()\">\r\n                <svg class=\"fill-current text-black\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\">\r\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>\r\n                </svg>\r\n            </button>\r\n        </div>\r\n\r\n        <div class=\"modal-body\">\r\n            <ng-content select=\"[body]\"></ng-content>\r\n        </div>\r\n\r\n        <div class=\"modal-footer\">\r\n            <button type=\"button\" class=\"btn gray-300\" [disabled]=\"modalProcessing\" (click)=\"onCloseClick()\">{{ closeButtonText }}</button>\r\n\r\n            <ng-content select=\"[footer]\"></ng-content>\r\n        </div>\r\n    </form>\r\n</div>", styles: ["body.modal-active{overflow-x:hidden;overflow-y:visible!important}:host{position:fixed;top:0;left:0;z-index:50;height:100%;width:100%}:host:not(.show){pointer-events:none;opacity:0;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-delay:.15s}:host:not(.show) .modal-overlay{opacity:0;transition-delay:.15s}:host:not(.show) .modal-container.top,:host:not(.show) .modal-container.center{--tw-translate-y: -3.5rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}:host:not(.show) .modal-container.bottom{--tw-translate-y: 3.5rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}:host:not(.show) .modal-container.left{--tw-translate-x: -3.5rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}:host:not(.show) .modal-container.right{--tw-translate-x: 3.5rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}:host:not(.show) .modal-container .modal-content{animation:hidden 0s ease-in-out forwards}.modal-overlay{position:fixed;inset:0;height:100vh;width:100vw;--tw-bg-opacity: 1;background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1));opacity:.5;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.modal-container{margin:auto;display:grid;height:100%;max-height:100vh;min-height:100%;grid-template-columns:repeat(1,minmax(0,1fr));padding:1.75rem;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}.modal-container.top{align-items:flex-start}.modal-container.bottom{align-items:flex-end}.modal-container.left{margin-right:0;align-items:center}.modal-container.right{margin-left:0;align-items:center}.modal-container.center{align-items:center}.modal-container.size-sm{max-width:24rem}.modal-container.size-md{max-width:28rem}.modal-container.size-lg{max-width:32rem}.modal-container.size-xl{max-width:36rem}.modal-container.size-2xl{max-width:42rem}.modal-container.size-3xl{max-width:48rem}.modal-container.size-4xl{max-width:56rem}.modal-container.size-5xl{max-width:64rem}.modal-container.size-6xl{max-width:72rem}.modal-container.size-7xl{max-width:80rem}.modal-container.size-full{max-width:100%}.modal-container.size-auto{width:100%}@media (min-width: 640px){.modal-container.size-auto{max-width:640px}}@media (min-width: 768px){.modal-container.size-auto{max-width:768px}}@media (min-width: 1024px){.modal-container.size-auto{max-width:1024px}}@media (min-width: 1280px){.modal-container.size-auto{max-width:1280px}}@media (min-width: 1536px){.modal-container.size-auto{max-width:1536px}}.modal-container .modal-content{position:relative;width:100%;border-radius:.375rem;border-width:1px;border-color:#0003;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));background-clip:padding-box;outline-width:0px;display:grid;max-height:100%;grid-template-rows:min-content 1fr min-content;overflow:hidden;--tw-shadow: 0 0 4px 0 rgba(0,0,0,.2), 0 3px 20px 0 rgba(0,0,0,.19);--tw-shadow-colored: 0 0 4px 0 var(--tw-shadow-color), 0 3px 20px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);animation:shown .3s ease-in-out forwards}.modal-container .modal-content .modal-header{border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1));padding:1rem}.modal-container .modal-content .modal-header .modal-close{position:absolute;top:0;right:0;margin:.5rem;cursor:pointer;padding:.5rem;opacity:.6}.modal-container .modal-content .modal-body{overflow:hidden;padding:1rem}.modal-container .modal-content .modal-footer{display:grid;grid-auto-columns:min-content;grid-auto-flow:column;justify-content:flex-end;gap:.25rem;white-space:nowrap;border-top-width:1px;--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1));padding:.75rem}.modal-container .modal-content .modal-footer>*,.modal-container .modal-content .modal-footer ::ng-deep div[footer]>*{display:grid;grid-auto-columns:min-content;grid-auto-flow:column;gap:.25rem}@keyframes hidden{0%{display:flex}to{display:none}}@keyframes shown{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    static ɵ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,
@@ -2681,7 +2764,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
                         '[class.show]': 'isShown',
                     }, imports: [
                         NgIf,
-                    ], template: "<div class=\"modal-overlay\"></div>\r\n\r\n<div class=\"modal-container size-{{ size }} {{ position }}\">\r\n    <form class=\"modal-content\">\r\n        <div class=\"modal-header\" *ngIf=\"title\">\r\n            <p class=\"text-2xl font-bold\">{{ title }}</p>\r\n\r\n            <button type=\"button\" class=\"modal-close\" (click)=\"toggleModal()\">\r\n                <svg class=\"fill-current text-black\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\">\r\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>\r\n                </svg>\r\n            </button>\r\n        </div>\r\n\r\n        <div class=\"modal-body\">\r\n            <ng-content select=\"[body]\"></ng-content>\r\n        </div>\r\n\r\n        <div class=\"modal-footer\">\r\n            <button type=\"button\" class=\"btn gray-300\" [disabled]=\"modalProcessing\" (click)=\"onCloseClick()\">{{ closeButtonText }}</button>\r\n\r\n            <ng-content select=\"[footer]\"></ng-content>\r\n        </div>\r\n    </form>\r\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"] }]
+                    ], 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: [{
@@ -2794,9 +2877,23 @@ class MultiEditorComponent extends ModalComponent {
         const fakeNewID = (Math.floor(Math.random() * (999999 - 100000)) + 100000) * -1;
         const newModel = this.multiEditorDataset.newData(fakeNewID);
         if (!!newModel) {
+            // Read before addNewRow: it stamps the grid's internal key onto the row, so afterwards even a
+            // `{}` model reports one own key and the check below would never skip.
+            const hasPrefilledValues = Object.keys(newModel).length > 0;
             this.multiEditorDataset.storeFakeIDGenerated(fakeNewID);
             this.dataGridDataset.addNewRow(newModel);
             const newKey = this.dataGridDataset.loadedKeys[this.dataGridDataset.loadedKeys.length - 1];
+            // Record whatever `newData` pre-filled. `selectRow` below reaches the form through
+            // reset() + patchValue(), which leaves it pristine, and the `valueChanges` handler is gated on
+            // `formGroup.dirty` — so a row the user never types into is never recorded. Without this, values
+            // returned by `newData` show up in the grid but are dropped from the save batch, and adding
+            // several rows while only editing the last silently discards the earlier ones.
+            //
+            // Skipped for a value-less model (`{}`, the blank-row convention) so implementations that
+            // pre-fill nothing keep sending nothing for a row that was added and never touched.
+            if (hasPrefilledValues) {
+                this.multiEditorDataset.updateValues(newKey, newModel);
+            }
             this.dataGridDataset.selectRow(newKey);
         }
     }
@@ -2856,7 +2953,7 @@ class MultiEditorComponent extends ModalComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MultiEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: MultiEditorComponent, isStandalone: true, selector: "lib-multi-editor", inputs: { addButtonLabel: "addButtonLabel", formGroup: "formGroup", removeButtonLabel: "removeButtonLabel", showAddButton: "showAddButton", showDeleteButton: "showDeleteButton" }, viewQueries: [{ propertyName: "modal", first: true, predicate: ModalComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-modal\r\n[closeButtonText]=\"closeButtonText | translate\"\r\n[dialog]=\"dialog\"\r\n[modalProcessing]=\"modalProcessing\"\r\n[position]=\"position\"\r\n[size]=\"size\"\r\n[title]=\"title\">\r\n    <div body class=\"body-content\">\r\n        <div class=\"data-grid\">\r\n            <lib-data-grid [disabled]=\"modalProcessing\" [lazyLoadRows]=\"true\"></lib-data-grid>\r\n        </div>\r\n\r\n        <div class=\"data\">\r\n            <div class=\"buttons\">\r\n                <a *ngIf=\"showAddButton\"\r\n                class=\"btn gray-500\"\r\n                [class.disabled]=\"modalProcessing || gridLoading || formLoading || formGroup.invalid\"\r\n                (click)=\"onNewClick()\">\r\n                    {{ addButtonLabel }}\r\n                </a>\r\n\r\n                <a *ngIf=\"showDeleteButton && hasSelectedKey\"\r\n                class=\"btn red-500\"\r\n                [class.disabled]=\"modalProcessing || gridLoading || formLoading\"\r\n                (click)=\"onDeleteClick()\">\r\n                    {{ removeButtonLabel }}\r\n                </a>\r\n            </div>\r\n\r\n            <lib-form-group>\r\n                <ng-content></ng-content>\r\n            </lib-form-group>\r\n        </div>\r\n    </div>\r\n\r\n    <div footer>\r\n        <button\r\n        class=\"btn blue-500\"\r\n        type=\"button\"\r\n        [class.disabled]=\"gridLoading || formLoading\"\r\n        [class.loading]=\"modalProcessing\"\r\n        (click)=\"onSaveClick()\">\r\n            {{ 'Button-Modal-MultiEditor-Confirm' | translate }}\r\n        </button>\r\n    </div>\r\n</lib-modal>", styles: [".body-content{display:grid;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;gap:1rem;overflow:clip;overflow-clip-margin:4px}.data-grid{display:grid;-webkit-user-select:none;user-select:none;overflow:hidden}.data{display:grid;-webkit-user-select:none;user-select:none;overflow:clip;overflow-clip-margin:4px;min-height:24rem;grid-template-rows:min-content minmax(0,1fr);gap:.5rem}.data .buttons{display:grid;grid-auto-columns:auto;grid-auto-flow:column;gap:.5rem;border-bottom-color:#d1d5dbe6}\n"], dependencies: [{ kind: "component", type: DataGridComponent, selector: "lib-data-grid", inputs: ["disabled", "lazyLoadRows", "showButtons"] }, { kind: "component", type: ModalComponent, selector: "lib-modal", inputs: ["closeButtonText", "dialog", "modalProcessing", "position", "size", "title"], outputs: ["closed"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormGroupComponent, selector: "lib-form-group", inputs: ["shouldExpand", "label"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    static ɵ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,
@@ -2866,7 +2963,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
                         NgIf,
                         FormGroupComponent,
                         TranslatePipe,
-                    ], template: "<lib-modal\r\n[closeButtonText]=\"closeButtonText | translate\"\r\n[dialog]=\"dialog\"\r\n[modalProcessing]=\"modalProcessing\"\r\n[position]=\"position\"\r\n[size]=\"size\"\r\n[title]=\"title\">\r\n    <div body class=\"body-content\">\r\n        <div class=\"data-grid\">\r\n            <lib-data-grid [disabled]=\"modalProcessing\" [lazyLoadRows]=\"true\"></lib-data-grid>\r\n        </div>\r\n\r\n        <div class=\"data\">\r\n            <div class=\"buttons\">\r\n                <a *ngIf=\"showAddButton\"\r\n                class=\"btn gray-500\"\r\n                [class.disabled]=\"modalProcessing || gridLoading || formLoading || formGroup.invalid\"\r\n                (click)=\"onNewClick()\">\r\n                    {{ addButtonLabel }}\r\n                </a>\r\n\r\n                <a *ngIf=\"showDeleteButton && hasSelectedKey\"\r\n                class=\"btn red-500\"\r\n                [class.disabled]=\"modalProcessing || gridLoading || formLoading\"\r\n                (click)=\"onDeleteClick()\">\r\n                    {{ removeButtonLabel }}\r\n                </a>\r\n            </div>\r\n\r\n            <lib-form-group>\r\n                <ng-content></ng-content>\r\n            </lib-form-group>\r\n        </div>\r\n    </div>\r\n\r\n    <div footer>\r\n        <button\r\n        class=\"btn blue-500\"\r\n        type=\"button\"\r\n        [class.disabled]=\"gridLoading || formLoading\"\r\n        [class.loading]=\"modalProcessing\"\r\n        (click)=\"onSaveClick()\">\r\n            {{ 'Button-Modal-MultiEditor-Confirm' | translate }}\r\n        </button>\r\n    </div>\r\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"] }]
+                    ], 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]
@@ -2925,7 +3022,7 @@ class MultiSelectResultGridComponent extends BaseComponent {
         }
     }
     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\r\nclass=\"body\"\r\n(scroll)=\"onScrolled($event)\">\r\n    <div\r\n    class=\"row\"\r\n    *ngFor=\"let row of resultDataset.displayedRows; let i = index\">\r\n        <div class=\"cell\">\r\n            <a\r\n            class=\"remove\"\r\n            [class.disabled]=\"isDisabled\"\r\n            (click)=\"onItemRemoved(i)\">\r\n                <i class=\"fas fa-times\"></i>\r\n            </a>\r\n        </div> \r\n\r\n        <div class=\"cell\">\r\n            <div>\r\n                <ng-container *ngTemplateOutlet=\"template; context: { rowData: row }\">\r\n                </ng-container>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div\r\n    class=\"loading\"\r\n    *ngIf=\"isLoading\">\r\n        <svg [ngClass]=\"''\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\r\n            <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\r\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>\r\n        </svg>\r\n\r\n        <span>\r\n            {{ resultDataset.configs.loadingDisplayText ?? '' | translate }} \r\n        </span>\r\n    </div>\r\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" }] });
+    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,
@@ -2936,7 +3033,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
                         NgFor,
                         NgIf,
                         TranslatePipe,
-                    ], template: "<div\r\nclass=\"body\"\r\n(scroll)=\"onScrolled($event)\">\r\n    <div\r\n    class=\"row\"\r\n    *ngFor=\"let row of resultDataset.displayedRows; let i = index\">\r\n        <div class=\"cell\">\r\n            <a\r\n            class=\"remove\"\r\n            [class.disabled]=\"isDisabled\"\r\n            (click)=\"onItemRemoved(i)\">\r\n                <i class=\"fas fa-times\"></i>\r\n            </a>\r\n        </div> \r\n\r\n        <div class=\"cell\">\r\n            <div>\r\n                <ng-container *ngTemplateOutlet=\"template; context: { rowData: row }\">\r\n                </ng-container>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div\r\n    class=\"loading\"\r\n    *ngIf=\"isLoading\">\r\n        <svg [ngClass]=\"''\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\r\n            <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\r\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>\r\n        </svg>\r\n\r\n        <span>\r\n            {{ resultDataset.configs.loadingDisplayText ?? '' | translate }} \r\n        </span>\r\n    </div>\r\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"] }]
+                    ], 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: [{
@@ -3069,7 +3166,7 @@ class MultiSelectComponent extends ModalComponent {
         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\r\n[closeButtonText]=\"closeButtonText | translate\"\r\n[dialog]=\"dialog\"\r\n[modalProcessing]=\"modalProcessing\"\r\n[position]=\"position\"\r\n[size]=\"size\"\r\n[title]=\"title\">\r\n    <div body class=\"body-content\">\r\n        <div class=\"search-grid\">\r\n            <div class=\"search\">\r\n                <input\r\n                class=\"form-input\"\r\n                placeholder=\"Search...\"\r\n                type=\"text\"\r\n                [(ngModel)]=\"searchCriteria\"\r\n                [disabled]=\"modalProcessing || isSearchGridLoading\"\r\n                (keydown.enter)=\"onSearch()\" />\r\n            </div>\r\n            \r\n            <lib-data-grid\r\n            [disabled]=\"modalProcessing || isSearchGridLoading || isResultGridLoading\"\r\n            [lazyLoadRows]=\"true\">\r\n            </lib-data-grid>\r\n        </div>\r\n\r\n        <lib-multi-select-result-grid\r\n        [isDisabled]=\"modalProcessing || isSearchGridLoading || isResultGridLoading\"\r\n        [template]=\"itemTemplate\">\r\n        </lib-multi-select-result-grid>\r\n    </div>\r\n\r\n    <div footer>\r\n        <button\r\n        class=\"btn blue-500\"\r\n        type=\"button\"\r\n        [class.loading]=\"modalProcessing\"\r\n        (click)=\"onSave()\">\r\n            {{ 'Button-Modal-MultiSelect-Confirm' | translate }}\r\n        </button>\r\n    </div>\r\n</lib-modal>", styles: [".body-content{display:grid;height:100%;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;gap:1rem;grid-template-rows:min-content minmax(0,1fr);grid-auto-flow:row!important;overflow:clip;overflow-clip-margin:4px}.search-grid{display:grid;grid-template-rows:subgrid}.search-grid,lib-multi-select-result-grid{grid-row:1 / -1}lib-multi-select-result-grid{min-height:24rem}\n"], dependencies: [{ kind: "component", type: DataGridComponent, selector: "lib-data-grid", inputs: ["disabled", "lazyLoadRows", "showButtons"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ModalComponent, selector: "lib-modal", inputs: ["closeButtonText", "dialog", "modalProcessing", "position", "size", "title"], outputs: ["closed"] }, { kind: "component", type: MultiSelectResultGridComponent, selector: "lib-multi-select-result-grid", inputs: ["isDisabled", "template"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    static ɵ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,
@@ -3079,7 +3176,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
                         ModalComponent,
                         MultiSelectResultGridComponent,
                         TranslatePipe,
-                    ], template: "<lib-modal\r\n[closeButtonText]=\"closeButtonText | translate\"\r\n[dialog]=\"dialog\"\r\n[modalProcessing]=\"modalProcessing\"\r\n[position]=\"position\"\r\n[size]=\"size\"\r\n[title]=\"title\">\r\n    <div body class=\"body-content\">\r\n        <div class=\"search-grid\">\r\n            <div class=\"search\">\r\n                <input\r\n                class=\"form-input\"\r\n                placeholder=\"Search...\"\r\n                type=\"text\"\r\n                [(ngModel)]=\"searchCriteria\"\r\n                [disabled]=\"modalProcessing || isSearchGridLoading\"\r\n                (keydown.enter)=\"onSearch()\" />\r\n            </div>\r\n            \r\n            <lib-data-grid\r\n            [disabled]=\"modalProcessing || isSearchGridLoading || isResultGridLoading\"\r\n            [lazyLoadRows]=\"true\">\r\n            </lib-data-grid>\r\n        </div>\r\n\r\n        <lib-multi-select-result-grid\r\n        [isDisabled]=\"modalProcessing || isSearchGridLoading || isResultGridLoading\"\r\n        [template]=\"itemTemplate\">\r\n        </lib-multi-select-result-grid>\r\n    </div>\r\n\r\n    <div footer>\r\n        <button\r\n        class=\"btn blue-500\"\r\n        type=\"button\"\r\n        [class.loading]=\"modalProcessing\"\r\n        (click)=\"onSave()\">\r\n            {{ 'Button-Modal-MultiSelect-Confirm' | translate }}\r\n        </button>\r\n    </div>\r\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"] }]
+                    ], 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]
@@ -3100,6 +3197,7 @@ class SidebarItemComponent extends BaseComponent {
     isSelected = false;
     _childHeight = 0;
     changeDetectorRef = inject(ChangeDetectorRef);
+    sidebarConfigs = inject(SIDEBAR_CONFIGS);
     sidebarService = inject(SidebarService);
     //#endregion
     //#region Properties
@@ -3109,6 +3207,9 @@ class SidebarItemComponent extends BaseComponent {
     get areChildrenLoaded() {
         return this.isParent && (this.menu.children?.length ?? 0) > 0;
     }
+    get externalLinkText() {
+        return this.sidebarConfigs.externalLinkText;
+    }
     get isActive() {
         return this.sidebarService.isActive;
     }
@@ -3118,6 +3219,10 @@ class SidebarItemComponent extends BaseComponent {
     get isParent() {
         return this.menu.childCount > 0;
     }
+    get opensInNewBrowserTab() {
+        return (this.menu.url?.length ?? 0) > 0
+            && toSidebarMenuOpenMode(this.menu.openMode) === SidebarMenuOpenMode.ExternalNewTab;
+    }
     get hasIcon() {
         return !!this.menu.icon && this.menu.icon.length > 0;
     }
@@ -3193,7 +3298,7 @@ class SidebarItemComponent extends BaseComponent {
         this._childHeight = this.getChildHeight(this.menu);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: SidebarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: SidebarItemComponent, isStandalone: true, selector: "lib-sidebar-item", inputs: { isLast: "isLast", level: "level", menu: "menu" }, host: { properties: { "class.active": "isActive", "class.expanded": "!isCollapsed", "class.first-level": "level === 0", "class.last-child": "isLast", "class.selected": "isSelected" } }, viewQueries: [{ propertyName: "menuContainer", first: true, predicate: ["menuContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<li>\r\n    <div #menuContainer\r\n    [class.failed]=\"hasFailed\"\r\n    [class.loading]=\"isLoading\"\r\n    [class.parent]=\"isParent\"\r\n    [class.selected]=\"isSelected\"\r\n    (click)=\"onSelectItem()\">\r\n        <a>\r\n            <i *ngIf=\"hasIcon && level === 0\" class=\"fa-solid fa-fw {{ menu.icon }}\"></i>\r\n            <span>{{ menu.label | translate }}</span>\r\n        </a>\r\n\r\n        <div class=\"loading\" *ngIf=\"isParent\">\r\n            <svg class=\"animate-spin text-white\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\r\n                <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\r\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>\r\n            </svg>\r\n        </div>\r\n    </div>\r\n\r\n    <ul *ngIf=\"isParent\"\r\n    [class.open]=\"isSelected\"\r\n    [ngStyle]=\"{\r\n        'height.px': childHeight,\r\n        'max-height.px': childHeight\r\n    }\">\r\n        <lib-sidebar-item *ngFor=\"let child of menu.children; trackBy: trackByFn; let last = last\"\r\n        [menu]=\"child\"\r\n        [level]=\"level+1\"\r\n        [isLast]=\"last\">\r\n        </lib-sidebar-item>\r\n    </ul>\r\n</li>", styles: ["@charset \"UTF-8\";:host{position:relative;display:block}@media (max-width: 767px){:host:not(.active) li>ul{height:0px!important}}@media (min-width: 768px){:host:not(.expanded):not(.active) li>ul{height:0px!important}:host.expanded li>div{margin-inline:.5rem}:host.expanded li>div.parent:not(.loading):after{opacity:1}:host.expanded li>div.parent a{padding-right:2rem}:host.expanded li>div.parent.loading .loading{opacity:1!important}:host.expanded li>div a i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.expanded li>div a span{opacity:1}}:host.active li>div{margin-inline:.5rem}:host.active li>div.parent:not(.loading):after{opacity:1}:host.active li>div.parent a{padding-right:2rem}:host.active li>div.parent.loading .loading{opacity:1!important}:host.active li>div a i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.active li>div a span{opacity:1}:host.expanded li .selected:not(.loading).parent:after,:host.active li .selected:not(.loading).parent:after{--tw-rotate: -90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}li{position:relative;height:100%}li>div{position:relative;overflow:hidden;height:var(--sidebar-item-height);line-height:var(--sidebar-item-height);border-radius:var(--sidebar-item-radius);transition-property:margin,background-color;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration)}li>div:hover{background-color:var(--sidebar-item-hover-bg)}li>div.selected{background-color:var(--sidebar-item-selected-bg);color:var(--sidebar-item-selected-text)}li>div.parent:after{position:absolute;top:0;right:.75rem;width:10px;font-weight:800;transition-property:opacity,transform;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:0;font-family:\"Font Awesome 6 Free\";transition-duration:var(--sidebar-animation-duration);will-change:opacity,transform}li>div.parent:not(.failed):after{--tw-content: \"\\f104\";content:var(--tw-content)}li>div.parent.failed:after{right:1rem;--tw-content: \"\\f071\";content:var(--tw-content)}li>div a{display:block;height:100%;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:.75rem;padding-right:.75rem;text-align:left;width:var(--sidebar-expanded-width)}li>div a i{margin-right:.5rem;font-size:1.25rem;line-height:1.75rem;transition-property:font-size,line-height,margin-left;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);margin-left:var(--sidebar-icon-collapsed-margin);transition-duration:var(--sidebar-animation-duration);will-change:font-size,line-height,margin-left}li>div a span{text-overflow:ellipsis;opacity:0;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:opacity}li>div .loading{position:absolute;top:0;right:.55rem;height:100%;width:1rem;opacity:0;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:opacity}li>div .loading svg{height:100%;width:100%}li>ul{overflow:hidden;transition-property:height,max-height;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:height,max-height}li>ul a{padding-left:1.25rem}:host(:not(.first-level)) li>div>a{position:relative;padding-left:1.5rem}:host(:not(.first-level)) li>div>a:before{content:\"\";position:absolute;left:.6rem;top:0;bottom:0;width:0;border-left:1px solid var(--sidebar-tree-line)}:host(:not(.first-level)) li>div>a:after{content:\"\";position:absolute;left:.6rem;top:calc(50% - .55rem);width:.6rem;height:.55rem;border-left:1px solid var(--sidebar-tree-line);border-bottom:1px solid var(--sidebar-tree-line);border-bottom-left-radius:.4rem}:host(.last-child:not(.first-level)) li>div>a:before{bottom:calc(50% + .4rem)}\n"], dependencies: [{ kind: "component", type: SidebarItemComponent, selector: "lib-sidebar-item", inputs: ["isLast", "level", "menu"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: SidebarItemComponent, isStandalone: true, selector: "lib-sidebar-item", inputs: { isLast: "isLast", level: "level", menu: "menu" }, host: { properties: { "class.active": "isActive", "class.expanded": "!isCollapsed", "class.first-level": "level === 0", "class.last-child": "isLast", "class.selected": "isSelected" } }, viewQueries: [{ propertyName: "menuContainer", first: true, predicate: ["menuContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<li>\n    <div #menuContainer\n    [class.external]=\"opensInNewBrowserTab\"\n    [class.failed]=\"hasFailed\"\n    [class.loading]=\"isLoading\"\n    [class.parent]=\"isParent\"\n    [class.selected]=\"isSelected\"\n    (click)=\"onSelectItem()\">\n        <a [attr.title]=\"opensInNewBrowserTab ? externalLinkText : null\">\n            <i *ngIf=\"hasIcon && level === 0\" class=\"fa-solid fa-fw {{ menu.icon }}\"></i>\n            <span>{{ menu.label | translate }}</span>\n        </a>\n\n        <div class=\"loading\" *ngIf=\"isParent\">\n            <svg class=\"animate-spin text-white\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n                <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n                <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n            </svg>\n        </div>\n    </div>\n\n    <ul *ngIf=\"isParent\"\n    [class.open]=\"isSelected\"\n    [ngStyle]=\"{\n        'height.px': childHeight,\n        'max-height.px': childHeight\n    }\">\n        <lib-sidebar-item *ngFor=\"let child of menu.children; trackBy: trackByFn; let last = last\"\n        [menu]=\"child\"\n        [level]=\"level+1\"\n        [isLast]=\"last\">\n        </lib-sidebar-item>\n    </ul>\n</li>", styles: ["@charset \"UTF-8\";:host{position:relative;display:block}@media (max-width: 767px){:host:not(.active) li>ul{height:0px!important}}@media (min-width: 768px){:host:not(.expanded):not(.active) li>ul{height:0px!important}:host.expanded li>div{margin-inline:.5rem}:host.expanded li>div.external:after{opacity:1}:host.expanded li>div.external a{padding-right:2rem}:host.expanded li>div.parent:not(.loading):after{opacity:1}:host.expanded li>div.parent a{padding-right:2rem}:host.expanded li>div.parent.loading .loading{opacity:1!important}:host.expanded li>div a i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.expanded li>div a span{opacity:1}}:host.active li>div{margin-inline:.5rem}:host.active li>div.external:after{opacity:1}:host.active li>div.external a{padding-right:2rem}:host.active li>div.parent:not(.loading):after{opacity:1}:host.active li>div.parent a{padding-right:2rem}:host.active li>div.parent.loading .loading{opacity:1!important}:host.active li>div a i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.active li>div a span{opacity:1}:host.expanded li .selected:not(.loading).parent:after,:host.active li .selected:not(.loading).parent:after{--tw-rotate: -90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}li{position:relative;height:100%}li>div{position:relative;overflow:hidden;height:var(--sidebar-item-height);line-height:var(--sidebar-item-height);border-radius:var(--sidebar-item-radius);transition-property:margin,background-color;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration)}li>div:hover{background-color:var(--sidebar-item-hover-bg)}li>div.selected{background-color:var(--sidebar-item-selected-bg);color:var(--sidebar-item-selected-text)}li>div.external:after{position:absolute;top:0;right:.75rem;width:10px;font-size:.75rem;line-height:1rem;font-weight:800;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:0;--tw-content: \"\\f08e\";content:var(--tw-content);font-family:\"Font Awesome 6 Free\";transition-duration:var(--sidebar-animation-duration);will-change:opacity}li>div.parent:after{position:absolute;top:0;right:.75rem;width:10px;font-weight:800;transition-property:opacity,transform;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:0;font-family:\"Font Awesome 6 Free\";transition-duration:var(--sidebar-animation-duration);will-change:opacity,transform}li>div.parent:not(.failed):after{--tw-content: \"\\f104\";content:var(--tw-content)}li>div.parent.failed:after{right:1rem;--tw-content: \"\\f071\";content:var(--tw-content)}li>div a{display:block;height:100%;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:.75rem;padding-right:.75rem;text-align:left;width:var(--sidebar-expanded-width)}li>div a i{margin-right:.5rem;font-size:1.25rem;line-height:1.75rem;transition-property:font-size,line-height,margin-left;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);margin-left:var(--sidebar-icon-collapsed-margin);transition-duration:var(--sidebar-animation-duration);will-change:font-size,line-height,margin-left}li>div a span{text-overflow:ellipsis;opacity:0;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:opacity}li>div .loading{position:absolute;top:0;right:.55rem;height:100%;width:1rem;opacity:0;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:opacity}li>div .loading svg{height:100%;width:100%}li>ul{overflow:hidden;transition-property:height,max-height;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:height,max-height}li>ul a{padding-left:1.25rem}:host(:not(.first-level)) li>div>a{position:relative;padding-left:1.5rem}:host(:not(.first-level)) li>div>a:before{content:\"\";position:absolute;left:.6rem;top:0;bottom:0;width:0;border-left:1px solid var(--sidebar-tree-line)}:host(:not(.first-level)) li>div>a:after{content:\"\";position:absolute;left:.6rem;top:calc(50% - .55rem);width:.6rem;height:.55rem;border-left:1px solid var(--sidebar-tree-line);border-bottom:1px solid var(--sidebar-tree-line);border-bottom-left-radius:.4rem}:host(.last-child:not(.first-level)) li>div>a:before{bottom:calc(50% + .4rem)}\n"], dependencies: [{ kind: "component", type: SidebarItemComponent, selector: "lib-sidebar-item", inputs: ["isLast", "level", "menu"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: SidebarItemComponent, decorators: [{
             type: Component,
@@ -3208,7 +3313,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
                         '[class.first-level]': 'level === 0',
                         '[class.last-child]': 'isLast',
                         '[class.selected]': 'isSelected',
-                    }, template: "<li>\r\n    <div #menuContainer\r\n    [class.failed]=\"hasFailed\"\r\n    [class.loading]=\"isLoading\"\r\n    [class.parent]=\"isParent\"\r\n    [class.selected]=\"isSelected\"\r\n    (click)=\"onSelectItem()\">\r\n        <a>\r\n            <i *ngIf=\"hasIcon && level === 0\" class=\"fa-solid fa-fw {{ menu.icon }}\"></i>\r\n            <span>{{ menu.label | translate }}</span>\r\n        </a>\r\n\r\n        <div class=\"loading\" *ngIf=\"isParent\">\r\n            <svg class=\"animate-spin text-white\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\r\n                <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\r\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>\r\n            </svg>\r\n        </div>\r\n    </div>\r\n\r\n    <ul *ngIf=\"isParent\"\r\n    [class.open]=\"isSelected\"\r\n    [ngStyle]=\"{\r\n        'height.px': childHeight,\r\n        'max-height.px': childHeight\r\n    }\">\r\n        <lib-sidebar-item *ngFor=\"let child of menu.children; trackBy: trackByFn; let last = last\"\r\n        [menu]=\"child\"\r\n        [level]=\"level+1\"\r\n        [isLast]=\"last\">\r\n        </lib-sidebar-item>\r\n    </ul>\r\n</li>", styles: ["@charset \"UTF-8\";:host{position:relative;display:block}@media (max-width: 767px){:host:not(.active) li>ul{height:0px!important}}@media (min-width: 768px){:host:not(.expanded):not(.active) li>ul{height:0px!important}:host.expanded li>div{margin-inline:.5rem}:host.expanded li>div.parent:not(.loading):after{opacity:1}:host.expanded li>div.parent a{padding-right:2rem}:host.expanded li>div.parent.loading .loading{opacity:1!important}:host.expanded li>div a i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.expanded li>div a span{opacity:1}}:host.active li>div{margin-inline:.5rem}:host.active li>div.parent:not(.loading):after{opacity:1}:host.active li>div.parent a{padding-right:2rem}:host.active li>div.parent.loading .loading{opacity:1!important}:host.active li>div a i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.active li>div a span{opacity:1}:host.expanded li .selected:not(.loading).parent:after,:host.active li .selected:not(.loading).parent:after{--tw-rotate: -90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}li{position:relative;height:100%}li>div{position:relative;overflow:hidden;height:var(--sidebar-item-height);line-height:var(--sidebar-item-height);border-radius:var(--sidebar-item-radius);transition-property:margin,background-color;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration)}li>div:hover{background-color:var(--sidebar-item-hover-bg)}li>div.selected{background-color:var(--sidebar-item-selected-bg);color:var(--sidebar-item-selected-text)}li>div.parent:after{position:absolute;top:0;right:.75rem;width:10px;font-weight:800;transition-property:opacity,transform;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:0;font-family:\"Font Awesome 6 Free\";transition-duration:var(--sidebar-animation-duration);will-change:opacity,transform}li>div.parent:not(.failed):after{--tw-content: \"\\f104\";content:var(--tw-content)}li>div.parent.failed:after{right:1rem;--tw-content: \"\\f071\";content:var(--tw-content)}li>div a{display:block;height:100%;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:.75rem;padding-right:.75rem;text-align:left;width:var(--sidebar-expanded-width)}li>div a i{margin-right:.5rem;font-size:1.25rem;line-height:1.75rem;transition-property:font-size,line-height,margin-left;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);margin-left:var(--sidebar-icon-collapsed-margin);transition-duration:var(--sidebar-animation-duration);will-change:font-size,line-height,margin-left}li>div a span{text-overflow:ellipsis;opacity:0;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:opacity}li>div .loading{position:absolute;top:0;right:.55rem;height:100%;width:1rem;opacity:0;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:opacity}li>div .loading svg{height:100%;width:100%}li>ul{overflow:hidden;transition-property:height,max-height;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:height,max-height}li>ul a{padding-left:1.25rem}:host(:not(.first-level)) li>div>a{position:relative;padding-left:1.5rem}:host(:not(.first-level)) li>div>a:before{content:\"\";position:absolute;left:.6rem;top:0;bottom:0;width:0;border-left:1px solid var(--sidebar-tree-line)}:host(:not(.first-level)) li>div>a:after{content:\"\";position:absolute;left:.6rem;top:calc(50% - .55rem);width:.6rem;height:.55rem;border-left:1px solid var(--sidebar-tree-line);border-bottom:1px solid var(--sidebar-tree-line);border-bottom-left-radius:.4rem}:host(.last-child:not(.first-level)) li>div>a:before{bottom:calc(50% + .4rem)}\n"] }]
+                    }, template: "<li>\n    <div #menuContainer\n    [class.external]=\"opensInNewBrowserTab\"\n    [class.failed]=\"hasFailed\"\n    [class.loading]=\"isLoading\"\n    [class.parent]=\"isParent\"\n    [class.selected]=\"isSelected\"\n    (click)=\"onSelectItem()\">\n        <a [attr.title]=\"opensInNewBrowserTab ? externalLinkText : null\">\n            <i *ngIf=\"hasIcon && level === 0\" class=\"fa-solid fa-fw {{ menu.icon }}\"></i>\n            <span>{{ menu.label | translate }}</span>\n        </a>\n\n        <div class=\"loading\" *ngIf=\"isParent\">\n            <svg class=\"animate-spin text-white\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n                <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n                <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n            </svg>\n        </div>\n    </div>\n\n    <ul *ngIf=\"isParent\"\n    [class.open]=\"isSelected\"\n    [ngStyle]=\"{\n        'height.px': childHeight,\n        'max-height.px': childHeight\n    }\">\n        <lib-sidebar-item *ngFor=\"let child of menu.children; trackBy: trackByFn; let last = last\"\n        [menu]=\"child\"\n        [level]=\"level+1\"\n        [isLast]=\"last\">\n        </lib-sidebar-item>\n    </ul>\n</li>", styles: ["@charset \"UTF-8\";:host{position:relative;display:block}@media (max-width: 767px){:host:not(.active) li>ul{height:0px!important}}@media (min-width: 768px){:host:not(.expanded):not(.active) li>ul{height:0px!important}:host.expanded li>div{margin-inline:.5rem}:host.expanded li>div.external:after{opacity:1}:host.expanded li>div.external a{padding-right:2rem}:host.expanded li>div.parent:not(.loading):after{opacity:1}:host.expanded li>div.parent a{padding-right:2rem}:host.expanded li>div.parent.loading .loading{opacity:1!important}:host.expanded li>div a i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.expanded li>div a span{opacity:1}}:host.active li>div{margin-inline:.5rem}:host.active li>div.external:after{opacity:1}:host.active li>div.external a{padding-right:2rem}:host.active li>div.parent:not(.loading):after{opacity:1}:host.active li>div.parent a{padding-right:2rem}:host.active li>div.parent.loading .loading{opacity:1!important}:host.active li>div a i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.active li>div a span{opacity:1}:host.expanded li .selected:not(.loading).parent:after,:host.active li .selected:not(.loading).parent:after{--tw-rotate: -90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}li{position:relative;height:100%}li>div{position:relative;overflow:hidden;height:var(--sidebar-item-height);line-height:var(--sidebar-item-height);border-radius:var(--sidebar-item-radius);transition-property:margin,background-color;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration)}li>div:hover{background-color:var(--sidebar-item-hover-bg)}li>div.selected{background-color:var(--sidebar-item-selected-bg);color:var(--sidebar-item-selected-text)}li>div.external:after{position:absolute;top:0;right:.75rem;width:10px;font-size:.75rem;line-height:1rem;font-weight:800;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:0;--tw-content: \"\\f08e\";content:var(--tw-content);font-family:\"Font Awesome 6 Free\";transition-duration:var(--sidebar-animation-duration);will-change:opacity}li>div.parent:after{position:absolute;top:0;right:.75rem;width:10px;font-weight:800;transition-property:opacity,transform;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:0;font-family:\"Font Awesome 6 Free\";transition-duration:var(--sidebar-animation-duration);will-change:opacity,transform}li>div.parent:not(.failed):after{--tw-content: \"\\f104\";content:var(--tw-content)}li>div.parent.failed:after{right:1rem;--tw-content: \"\\f071\";content:var(--tw-content)}li>div a{display:block;height:100%;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:.75rem;padding-right:.75rem;text-align:left;width:var(--sidebar-expanded-width)}li>div a i{margin-right:.5rem;font-size:1.25rem;line-height:1.75rem;transition-property:font-size,line-height,margin-left;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);margin-left:var(--sidebar-icon-collapsed-margin);transition-duration:var(--sidebar-animation-duration);will-change:font-size,line-height,margin-left}li>div a span{text-overflow:ellipsis;opacity:0;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:opacity}li>div .loading{position:absolute;top:0;right:.55rem;height:100%;width:1rem;opacity:0;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:opacity}li>div .loading svg{height:100%;width:100%}li>ul{overflow:hidden;transition-property:height,max-height;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:height,max-height}li>ul a{padding-left:1.25rem}:host(:not(.first-level)) li>div>a{position:relative;padding-left:1.5rem}:host(:not(.first-level)) li>div>a:before{content:\"\";position:absolute;left:.6rem;top:0;bottom:0;width:0;border-left:1px solid var(--sidebar-tree-line)}:host(:not(.first-level)) li>div>a:after{content:\"\";position:absolute;left:.6rem;top:calc(50% - .55rem);width:.6rem;height:.55rem;border-left:1px solid var(--sidebar-tree-line);border-bottom:1px solid var(--sidebar-tree-line);border-bottom-left-radius:.4rem}:host(.last-child:not(.first-level)) li>div>a:before{bottom:calc(50% + .4rem)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { menuContainer: [{
                 type: ViewChild,
                 args: ['menuContainer']
@@ -3282,7 +3387,7 @@ class SidebarComponent extends BaseComponent {
         this.updateShouldActivate();
     }
     ngOnInit() {
-        this.sidebarService.menuUrlSelected
+        merge(this.sidebarService.menuUrlSelected, this.sidebarService.menuExternalUrlSelected)
             .pipe(takeUntil(this.destroy$))
             .subscribe((_menu) => this.deactivate());
         this.sidebarService.loadRoot()
@@ -3343,7 +3448,7 @@ class SidebarComponent extends BaseComponent {
                 || this.sidebarService.isCollapsed;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: SidebarComponent, isStandalone: true, selector: "lib-sidebar", host: { listeners: { "body:mousedown": "onBodyMouseDown($event)", "body:mouseup": "onBodyMouseUp($event)", "document:keydown.escape": "onDocumentKeyDown($event)", "window:resize": "onResize($event)" }, properties: { "class.active": "isActive", "class.expanded": "!isCollapsed" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"sidebar-toolbar\">\r\n    <button type=\"button\" class=\"sidebar-toggle\" (click)=\"collapse()\" aria-label=\"Toggle navigation\">\r\n        <i class=\"fa-solid fa-angle-left\" [class.is-collapsed]=\"isCollapsed\"></i>\r\n    </button>\r\n</div>\r\n\r\n<nav>\r\n    <ul *ngIf=\"!isLoading; else loading\">\r\n        <ng-container *ngFor=\"let region of regions; trackBy: trackByRegion\">\r\n            <li class=\"sidebar-region-header\" *ngIf=\"region.name\">\r\n                <span>{{ region.name | translate }}</span>\r\n            </li>\r\n\r\n            <lib-sidebar-item *ngFor=\"let menu of region.items; trackBy: trackByFn\"\r\n            [menu]=\"menu\">\r\n            </lib-sidebar-item>\r\n        </ng-container>\r\n\r\n        <div class=\"error\" *ngIf=\"hasFailed\">\r\n            <div>\r\n                <i class=\"fa-solid fa-fw fa-triangle-exclamation\"></i>\r\n                <span>{{ configErrorText }}</span>\r\n            </div>\r\n        </div>\r\n    </ul>\r\n</nav>\r\n\r\n<div class=\"sidebar-footer\"><ng-content></ng-content></div>\r\n\r\n<ng-template #loading>\r\n    <div class=\"loading\">\r\n        <div>\r\n            <svg class=\"animate-spin text-white\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\r\n                <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\r\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>\r\n            </svg>\r\n            <span>{{ configLoadingText }}</span>\r\n        </div>\r\n    </div>\r\n</ng-template>", styles: [":host{position:relative;z-index:20;display:grid;height:100%;-webkit-user-select:none;user-select:none;background-color:var(--sidebar-bg);border-radius:var(--sidebar-radius, 1.25rem);backdrop-filter:blur(var(--sidebar-blur, 16px));-webkit-backdrop-filter:blur(var(--sidebar-blur, 16px));box-shadow:var(--sidebar-shadow, 0 10px 40px -12px rgba(0, 0, 0, .45));transition-property:margin-left,width;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);margin-left:calc(var(--sidebar-collapsed-width) * -1);transition-duration:var(--sidebar-animation-duration);width:var(--sidebar-collapsed-width);will-change:margin-left,width;grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:\"toolbar\" \"nav\" \"footer\"}@media (min-width: 768px){:host{margin-left:0}:host.expanded{width:var(--sidebar-expanded-width)}:host.expanded .loading i,:host.expanded .error i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.expanded .loading svg,:host.expanded .error svg{margin-top:-4px;margin-left:1px;height:1.25rem;width:1.25rem}:host.expanded .loading span,:host.expanded .error span{opacity:1}}:host.active{width:var(--sidebar-expanded-width)}:host.active .loading i,:host.active .error i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.active .loading svg,:host.active .error svg{margin-top:-4px;margin-left:1px;height:1.25rem;width:1.25rem}:host.active .loading span,:host.active .error span{opacity:1}:host.expanded,:host.active{margin-left:0}.sidebar-toolbar{display:flex;justify-content:flex-end;padding-top:.5rem;padding-bottom:.5rem;grid-area:toolbar}.sidebar-toolbar .sidebar-toggle{z-index:20;display:flex;height:1.75rem;width:1.75rem;flex-shrink:0;cursor:pointer;align-items:center;justify-content:center;border-radius:9999px;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(0 67 114 / var(--tw-text-opacity, 1));--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-color: rgb(0 0 0 / .05);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.sidebar-toolbar .sidebar-toggle:hover{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(0 47 80 / var(--tw-text-opacity, 1))}.sidebar-toolbar .sidebar-toggle{transform:translate(40%)}.sidebar-toolbar .sidebar-toggle i{font-size:.875rem;line-height:1.25rem;rotate:0deg;transition:rotate var(--sidebar-animation-duration) ease-in-out}.sidebar-toolbar .sidebar-toggle i.is-collapsed{rotate:-180deg}.sidebar-footer{overflow:hidden;white-space:nowrap;padding:.5rem 1rem;text-align:center;font-size:.75rem;line-height:1rem;color:var(--sidebar-text-muted);opacity:0;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);grid-area:footer}.sidebar-footer:empty{display:none}:host(.expanded) .sidebar-footer,:host(.active) .sidebar-footer{opacity:1}nav{overflow-y:auto;overflow-x:hidden;grid-area:nav;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent}nav::-webkit-scrollbar{height:0px;width:7px}nav::-webkit-scrollbar-track{background-color:transparent}nav::-webkit-scrollbar-thumb{background-color:#0003;border-radius:10px;transition:background .2s ease}nav::-webkit-scrollbar-thumb:hover{background-color:#0000008c}nav:hover::-webkit-scrollbar-thumb{background-color:#00000073}@media screen and (max-width: 480px){nav{scrollbar-width:thin}nav::-webkit-scrollbar{width:5px}}ul,.loading{position:relative;background-color:var(--sidebar-nav-bg)}ul lib-sidebar-item,.loading,.error{font-weight:500;color:var(--sidebar-text)}.sidebar-region-header{position:relative;display:flex;align-items:center;overflow:hidden;white-space:nowrap;padding-left:1rem;padding-right:1rem;height:2rem;color:var(--sidebar-text-muted);transition-property:height;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration)}.sidebar-region-header span{font-size:.75rem;line-height:1rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration)}.sidebar-region-header:after{content:\"\";position:absolute;left:50%;top:50%;opacity:0;width:1.75rem;height:1px;transform:translate(-50%,-50%);background:var(--sidebar-text-muted);transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration)}:host(:not(.expanded):not(.active)) .sidebar-region-header{height:1.25rem}:host(:not(.expanded):not(.active)) .sidebar-region-header span{opacity:0}:host(:not(.expanded):not(.active)) .sidebar-region-header:after{opacity:1}.loading,.error{overflow:hidden;height:var(--sidebar-item-height);line-height:var(--sidebar-item-height)}.loading>div,.error>div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:.75rem;padding-right:.75rem;text-align:left;width:var(--sidebar-expanded-width)}.loading i,.error i{margin-right:.5rem;font-size:1.25rem;line-height:1.75rem;transition-property:font-size,line-height,margin-left;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);margin-left:var(--sidebar-icon-collapsed-margin);transition-duration:var(--sidebar-animation-duration);will-change:font-size,line-height,margin-left}.loading svg,.error svg{margin-top:-4px;margin-left:.5rem;display:inline;height:1.5rem;width:1.5rem;transition-property:height,margin-left,width;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:height,margin-left,width}.loading svg+span,.error svg+span{margin-left:.6rem}.loading span,.error span{transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:0;transition-duration:var(--sidebar-animation-duration)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SidebarItemComponent, selector: "lib-sidebar-item", inputs: ["isLast", "level", "menu"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: SidebarComponent, isStandalone: true, selector: "lib-sidebar", host: { listeners: { "body:mousedown": "onBodyMouseDown($event)", "body:mouseup": "onBodyMouseUp($event)", "document:keydown.escape": "onDocumentKeyDown($event)", "window:resize": "onResize($event)" }, properties: { "class.active": "isActive", "class.expanded": "!isCollapsed" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"sidebar-toolbar\">\n    <button type=\"button\" class=\"sidebar-toggle\" (click)=\"collapse()\" aria-label=\"Toggle navigation\">\n        <i class=\"fa-solid fa-angle-left\" [class.is-collapsed]=\"isCollapsed\"></i>\n    </button>\n</div>\n\n<nav>\n    <ul *ngIf=\"!isLoading; else loading\">\n        <ng-container *ngFor=\"let region of regions; trackBy: trackByRegion\">\n            <li class=\"sidebar-region-header\" *ngIf=\"region.name\">\n                <span>{{ region.name | translate }}</span>\n            </li>\n\n            <lib-sidebar-item *ngFor=\"let menu of region.items; trackBy: trackByFn\"\n            [menu]=\"menu\">\n            </lib-sidebar-item>\n        </ng-container>\n\n        <div class=\"error\" *ngIf=\"hasFailed\">\n            <div>\n                <i class=\"fa-solid fa-fw fa-triangle-exclamation\"></i>\n                <span>{{ configErrorText }}</span>\n            </div>\n        </div>\n    </ul>\n</nav>\n\n<div class=\"sidebar-footer\"><ng-content></ng-content></div>\n\n<ng-template #loading>\n    <div class=\"loading\">\n        <div>\n            <svg class=\"animate-spin text-white\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n                <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n                <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n            </svg>\n            <span>{{ configLoadingText }}</span>\n        </div>\n    </div>\n</ng-template>", styles: [":host{position:relative;z-index:20;display:grid;height:100%;-webkit-user-select:none;user-select:none;background-color:var(--sidebar-bg);border-radius:var(--sidebar-radius, 1.25rem);backdrop-filter:blur(var(--sidebar-blur, 16px));-webkit-backdrop-filter:blur(var(--sidebar-blur, 16px));box-shadow:var(--sidebar-shadow, 0 10px 40px -12px rgba(0, 0, 0, .45));transition-property:margin-left,width;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);margin-left:calc(var(--sidebar-collapsed-width) * -1);transition-duration:var(--sidebar-animation-duration);width:var(--sidebar-collapsed-width);will-change:margin-left,width;grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:\"toolbar\" \"nav\" \"footer\"}@media (min-width: 768px){:host{margin-left:0}:host.expanded{width:var(--sidebar-expanded-width)}:host.expanded .loading i,:host.expanded .error i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.expanded .loading svg,:host.expanded .error svg{margin-top:-4px;margin-left:1px;height:1.25rem;width:1.25rem}:host.expanded .loading span,:host.expanded .error span{opacity:1}}:host.active{width:var(--sidebar-expanded-width)}:host.active .loading i,:host.active .error i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.active .loading svg,:host.active .error svg{margin-top:-4px;margin-left:1px;height:1.25rem;width:1.25rem}:host.active .loading span,:host.active .error span{opacity:1}:host.expanded,:host.active{margin-left:0}.sidebar-toolbar{display:flex;justify-content:flex-end;padding-top:.5rem;padding-bottom:.5rem;grid-area:toolbar}.sidebar-toolbar .sidebar-toggle{z-index:20;display:flex;height:1.75rem;width:1.75rem;flex-shrink:0;cursor:pointer;align-items:center;justify-content:center;border-radius:9999px;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(0 67 114 / var(--tw-text-opacity, 1));--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-color: rgb(0 0 0 / .05);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.sidebar-toolbar .sidebar-toggle:hover{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(0 47 80 / var(--tw-text-opacity, 1))}.sidebar-toolbar .sidebar-toggle{transform:translate(40%)}.sidebar-toolbar .sidebar-toggle i{font-size:.875rem;line-height:1.25rem;rotate:0deg;transition:rotate var(--sidebar-animation-duration) ease-in-out}.sidebar-toolbar .sidebar-toggle i.is-collapsed{rotate:-180deg}.sidebar-footer{overflow:hidden;white-space:nowrap;padding:.5rem 1rem;text-align:center;font-size:.75rem;line-height:1rem;color:var(--sidebar-text-muted);opacity:0;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);grid-area:footer}.sidebar-footer:empty{display:none}:host(.expanded) .sidebar-footer,:host(.active) .sidebar-footer{opacity:1}nav{overflow-y:auto;overflow-x:hidden;grid-area:nav;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent}nav::-webkit-scrollbar{height:0px;width:7px}nav::-webkit-scrollbar-track{background-color:transparent}nav::-webkit-scrollbar-thumb{background-color:#0003;border-radius:10px;transition:background .2s ease}nav::-webkit-scrollbar-thumb:hover{background-color:#0000008c}nav:hover::-webkit-scrollbar-thumb{background-color:#00000073}@media screen and (max-width: 480px){nav{scrollbar-width:thin}nav::-webkit-scrollbar{width:5px}}ul,.loading{position:relative;background-color:var(--sidebar-nav-bg)}ul lib-sidebar-item,.loading,.error{font-weight:500;color:var(--sidebar-text)}.sidebar-region-header{position:relative;display:flex;align-items:center;overflow:hidden;white-space:nowrap;padding-left:1rem;padding-right:1rem;height:2rem;color:var(--sidebar-text-muted);transition-property:height;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration)}.sidebar-region-header span{font-size:.75rem;line-height:1rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration)}.sidebar-region-header:after{content:\"\";position:absolute;left:50%;top:50%;opacity:0;width:1.75rem;height:1px;transform:translate(-50%,-50%);background:var(--sidebar-text-muted);transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration)}:host(:not(.expanded):not(.active)) .sidebar-region-header{height:1.25rem}:host(:not(.expanded):not(.active)) .sidebar-region-header span{opacity:0}:host(:not(.expanded):not(.active)) .sidebar-region-header:after{opacity:1}.loading,.error{overflow:hidden;height:var(--sidebar-item-height);line-height:var(--sidebar-item-height)}.loading>div,.error>div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:.75rem;padding-right:.75rem;text-align:left;width:var(--sidebar-expanded-width)}.loading i,.error i{margin-right:.5rem;font-size:1.25rem;line-height:1.75rem;transition-property:font-size,line-height,margin-left;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);margin-left:var(--sidebar-icon-collapsed-margin);transition-duration:var(--sidebar-animation-duration);will-change:font-size,line-height,margin-left}.loading svg,.error svg{margin-top:-4px;margin-left:.5rem;display:inline;height:1.5rem;width:1.5rem;transition-property:height,margin-left,width;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:height,margin-left,width}.loading svg+span,.error svg+span{margin-left:.6rem}.loading span,.error span{transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:0;transition-duration:var(--sidebar-animation-duration)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SidebarItemComponent, selector: "lib-sidebar-item", inputs: ["isLast", "level", "menu"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: SidebarComponent, decorators: [{
             type: Component,
@@ -3356,7 +3461,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
                     ], host: {
                         '[class.active]': 'isActive',
                         '[class.expanded]': '!isCollapsed',
-                    }, template: "<div class=\"sidebar-toolbar\">\r\n    <button type=\"button\" class=\"sidebar-toggle\" (click)=\"collapse()\" aria-label=\"Toggle navigation\">\r\n        <i class=\"fa-solid fa-angle-left\" [class.is-collapsed]=\"isCollapsed\"></i>\r\n    </button>\r\n</div>\r\n\r\n<nav>\r\n    <ul *ngIf=\"!isLoading; else loading\">\r\n        <ng-container *ngFor=\"let region of regions; trackBy: trackByRegion\">\r\n            <li class=\"sidebar-region-header\" *ngIf=\"region.name\">\r\n                <span>{{ region.name | translate }}</span>\r\n            </li>\r\n\r\n            <lib-sidebar-item *ngFor=\"let menu of region.items; trackBy: trackByFn\"\r\n            [menu]=\"menu\">\r\n            </lib-sidebar-item>\r\n        </ng-container>\r\n\r\n        <div class=\"error\" *ngIf=\"hasFailed\">\r\n            <div>\r\n                <i class=\"fa-solid fa-fw fa-triangle-exclamation\"></i>\r\n                <span>{{ configErrorText }}</span>\r\n            </div>\r\n        </div>\r\n    </ul>\r\n</nav>\r\n\r\n<div class=\"sidebar-footer\"><ng-content></ng-content></div>\r\n\r\n<ng-template #loading>\r\n    <div class=\"loading\">\r\n        <div>\r\n            <svg class=\"animate-spin text-white\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\r\n                <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\r\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>\r\n            </svg>\r\n            <span>{{ configLoadingText }}</span>\r\n        </div>\r\n    </div>\r\n</ng-template>", styles: [":host{position:relative;z-index:20;display:grid;height:100%;-webkit-user-select:none;user-select:none;background-color:var(--sidebar-bg);border-radius:var(--sidebar-radius, 1.25rem);backdrop-filter:blur(var(--sidebar-blur, 16px));-webkit-backdrop-filter:blur(var(--sidebar-blur, 16px));box-shadow:var(--sidebar-shadow, 0 10px 40px -12px rgba(0, 0, 0, .45));transition-property:margin-left,width;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);margin-left:calc(var(--sidebar-collapsed-width) * -1);transition-duration:var(--sidebar-animation-duration);width:var(--sidebar-collapsed-width);will-change:margin-left,width;grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:\"toolbar\" \"nav\" \"footer\"}@media (min-width: 768px){:host{margin-left:0}:host.expanded{width:var(--sidebar-expanded-width)}:host.expanded .loading i,:host.expanded .error i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.expanded .loading svg,:host.expanded .error svg{margin-top:-4px;margin-left:1px;height:1.25rem;width:1.25rem}:host.expanded .loading span,:host.expanded .error span{opacity:1}}:host.active{width:var(--sidebar-expanded-width)}:host.active .loading i,:host.active .error i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.active .loading svg,:host.active .error svg{margin-top:-4px;margin-left:1px;height:1.25rem;width:1.25rem}:host.active .loading span,:host.active .error span{opacity:1}:host.expanded,:host.active{margin-left:0}.sidebar-toolbar{display:flex;justify-content:flex-end;padding-top:.5rem;padding-bottom:.5rem;grid-area:toolbar}.sidebar-toolbar .sidebar-toggle{z-index:20;display:flex;height:1.75rem;width:1.75rem;flex-shrink:0;cursor:pointer;align-items:center;justify-content:center;border-radius:9999px;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(0 67 114 / var(--tw-text-opacity, 1));--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-color: rgb(0 0 0 / .05);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.sidebar-toolbar .sidebar-toggle:hover{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(0 47 80 / var(--tw-text-opacity, 1))}.sidebar-toolbar .sidebar-toggle{transform:translate(40%)}.sidebar-toolbar .sidebar-toggle i{font-size:.875rem;line-height:1.25rem;rotate:0deg;transition:rotate var(--sidebar-animation-duration) ease-in-out}.sidebar-toolbar .sidebar-toggle i.is-collapsed{rotate:-180deg}.sidebar-footer{overflow:hidden;white-space:nowrap;padding:.5rem 1rem;text-align:center;font-size:.75rem;line-height:1rem;color:var(--sidebar-text-muted);opacity:0;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);grid-area:footer}.sidebar-footer:empty{display:none}:host(.expanded) .sidebar-footer,:host(.active) .sidebar-footer{opacity:1}nav{overflow-y:auto;overflow-x:hidden;grid-area:nav;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent}nav::-webkit-scrollbar{height:0px;width:7px}nav::-webkit-scrollbar-track{background-color:transparent}nav::-webkit-scrollbar-thumb{background-color:#0003;border-radius:10px;transition:background .2s ease}nav::-webkit-scrollbar-thumb:hover{background-color:#0000008c}nav:hover::-webkit-scrollbar-thumb{background-color:#00000073}@media screen and (max-width: 480px){nav{scrollbar-width:thin}nav::-webkit-scrollbar{width:5px}}ul,.loading{position:relative;background-color:var(--sidebar-nav-bg)}ul lib-sidebar-item,.loading,.error{font-weight:500;color:var(--sidebar-text)}.sidebar-region-header{position:relative;display:flex;align-items:center;overflow:hidden;white-space:nowrap;padding-left:1rem;padding-right:1rem;height:2rem;color:var(--sidebar-text-muted);transition-property:height;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration)}.sidebar-region-header span{font-size:.75rem;line-height:1rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration)}.sidebar-region-header:after{content:\"\";position:absolute;left:50%;top:50%;opacity:0;width:1.75rem;height:1px;transform:translate(-50%,-50%);background:var(--sidebar-text-muted);transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration)}:host(:not(.expanded):not(.active)) .sidebar-region-header{height:1.25rem}:host(:not(.expanded):not(.active)) .sidebar-region-header span{opacity:0}:host(:not(.expanded):not(.active)) .sidebar-region-header:after{opacity:1}.loading,.error{overflow:hidden;height:var(--sidebar-item-height);line-height:var(--sidebar-item-height)}.loading>div,.error>div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:.75rem;padding-right:.75rem;text-align:left;width:var(--sidebar-expanded-width)}.loading i,.error i{margin-right:.5rem;font-size:1.25rem;line-height:1.75rem;transition-property:font-size,line-height,margin-left;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);margin-left:var(--sidebar-icon-collapsed-margin);transition-duration:var(--sidebar-animation-duration);will-change:font-size,line-height,margin-left}.loading svg,.error svg{margin-top:-4px;margin-left:.5rem;display:inline;height:1.5rem;width:1.5rem;transition-property:height,margin-left,width;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:height,margin-left,width}.loading svg+span,.error svg+span{margin-left:.6rem}.loading span,.error span{transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:0;transition-duration:var(--sidebar-animation-duration)}\n"] }]
+                    }, template: "<div class=\"sidebar-toolbar\">\n    <button type=\"button\" class=\"sidebar-toggle\" (click)=\"collapse()\" aria-label=\"Toggle navigation\">\n        <i class=\"fa-solid fa-angle-left\" [class.is-collapsed]=\"isCollapsed\"></i>\n    </button>\n</div>\n\n<nav>\n    <ul *ngIf=\"!isLoading; else loading\">\n        <ng-container *ngFor=\"let region of regions; trackBy: trackByRegion\">\n            <li class=\"sidebar-region-header\" *ngIf=\"region.name\">\n                <span>{{ region.name | translate }}</span>\n            </li>\n\n            <lib-sidebar-item *ngFor=\"let menu of region.items; trackBy: trackByFn\"\n            [menu]=\"menu\">\n            </lib-sidebar-item>\n        </ng-container>\n\n        <div class=\"error\" *ngIf=\"hasFailed\">\n            <div>\n                <i class=\"fa-solid fa-fw fa-triangle-exclamation\"></i>\n                <span>{{ configErrorText }}</span>\n            </div>\n        </div>\n    </ul>\n</nav>\n\n<div class=\"sidebar-footer\"><ng-content></ng-content></div>\n\n<ng-template #loading>\n    <div class=\"loading\">\n        <div>\n            <svg class=\"animate-spin text-white\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n                <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n                <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n            </svg>\n            <span>{{ configLoadingText }}</span>\n        </div>\n    </div>\n</ng-template>", styles: [":host{position:relative;z-index:20;display:grid;height:100%;-webkit-user-select:none;user-select:none;background-color:var(--sidebar-bg);border-radius:var(--sidebar-radius, 1.25rem);backdrop-filter:blur(var(--sidebar-blur, 16px));-webkit-backdrop-filter:blur(var(--sidebar-blur, 16px));box-shadow:var(--sidebar-shadow, 0 10px 40px -12px rgba(0, 0, 0, .45));transition-property:margin-left,width;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);margin-left:calc(var(--sidebar-collapsed-width) * -1);transition-duration:var(--sidebar-animation-duration);width:var(--sidebar-collapsed-width);will-change:margin-left,width;grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:\"toolbar\" \"nav\" \"footer\"}@media (min-width: 768px){:host{margin-left:0}:host.expanded{width:var(--sidebar-expanded-width)}:host.expanded .loading i,:host.expanded .error i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.expanded .loading svg,:host.expanded .error svg{margin-top:-4px;margin-left:1px;height:1.25rem;width:1.25rem}:host.expanded .loading span,:host.expanded .error span{opacity:1}}:host.active{width:var(--sidebar-expanded-width)}:host.active .loading i,:host.active .error i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.active .loading svg,:host.active .error svg{margin-top:-4px;margin-left:1px;height:1.25rem;width:1.25rem}:host.active .loading span,:host.active .error span{opacity:1}:host.expanded,:host.active{margin-left:0}.sidebar-toolbar{display:flex;justify-content:flex-end;padding-top:.5rem;padding-bottom:.5rem;grid-area:toolbar}.sidebar-toolbar .sidebar-toggle{z-index:20;display:flex;height:1.75rem;width:1.75rem;flex-shrink:0;cursor:pointer;align-items:center;justify-content:center;border-radius:9999px;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(0 67 114 / var(--tw-text-opacity, 1));--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-color: rgb(0 0 0 / .05);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.sidebar-toolbar .sidebar-toggle:hover{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(0 47 80 / var(--tw-text-opacity, 1))}.sidebar-toolbar .sidebar-toggle{transform:translate(40%)}.sidebar-toolbar .sidebar-toggle i{font-size:.875rem;line-height:1.25rem;rotate:0deg;transition:rotate var(--sidebar-animation-duration) ease-in-out}.sidebar-toolbar .sidebar-toggle i.is-collapsed{rotate:-180deg}.sidebar-footer{overflow:hidden;white-space:nowrap;padding:.5rem 1rem;text-align:center;font-size:.75rem;line-height:1rem;color:var(--sidebar-text-muted);opacity:0;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);grid-area:footer}.sidebar-footer:empty{display:none}:host(.expanded) .sidebar-footer,:host(.active) .sidebar-footer{opacity:1}nav{overflow-y:auto;overflow-x:hidden;grid-area:nav;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent}nav::-webkit-scrollbar{height:0px;width:7px}nav::-webkit-scrollbar-track{background-color:transparent}nav::-webkit-scrollbar-thumb{background-color:#0003;border-radius:10px;transition:background .2s ease}nav::-webkit-scrollbar-thumb:hover{background-color:#0000008c}nav:hover::-webkit-scrollbar-thumb{background-color:#00000073}@media screen and (max-width: 480px){nav{scrollbar-width:thin}nav::-webkit-scrollbar{width:5px}}ul,.loading{position:relative;background-color:var(--sidebar-nav-bg)}ul lib-sidebar-item,.loading,.error{font-weight:500;color:var(--sidebar-text)}.sidebar-region-header{position:relative;display:flex;align-items:center;overflow:hidden;white-space:nowrap;padding-left:1rem;padding-right:1rem;height:2rem;color:var(--sidebar-text-muted);transition-property:height;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration)}.sidebar-region-header span{font-size:.75rem;line-height:1rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration)}.sidebar-region-header:after{content:\"\";position:absolute;left:50%;top:50%;opacity:0;width:1.75rem;height:1px;transform:translate(-50%,-50%);background:var(--sidebar-text-muted);transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration)}:host(:not(.expanded):not(.active)) .sidebar-region-header{height:1.25rem}:host(:not(.expanded):not(.active)) .sidebar-region-header span{opacity:0}:host(:not(.expanded):not(.active)) .sidebar-region-header:after{opacity:1}.loading,.error{overflow:hidden;height:var(--sidebar-item-height);line-height:var(--sidebar-item-height)}.loading>div,.error>div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:.75rem;padding-right:.75rem;text-align:left;width:var(--sidebar-expanded-width)}.loading i,.error i{margin-right:.5rem;font-size:1.25rem;line-height:1.75rem;transition-property:font-size,line-height,margin-left;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);margin-left:var(--sidebar-icon-collapsed-margin);transition-duration:var(--sidebar-animation-duration);will-change:font-size,line-height,margin-left}.loading svg,.error svg{margin-top:-4px;margin-left:.5rem;display:inline;height:1.5rem;width:1.5rem;transition-property:height,margin-left,width;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:height,margin-left,width}.loading svg+span,.error svg+span{margin-left:.6rem}.loading span,.error span{transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:0;transition-duration:var(--sidebar-animation-duration)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { onBodyMouseDown: [{
                 type: HostListener,
                 args: ['body:mousedown', ['$event']]
@@ -3479,7 +3584,7 @@ class RibbonButtonComponent {
         return (option.isVisible ?? true) && (option.allowedActions === undefined || option.allowedActions.length === 0 || option.isAccessAllowed === true || (option.isAccessAllowed == undefined && option.allowedActions?.length > 0));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: RibbonButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: RibbonButtonComponent, isStandalone: true, selector: "lib-ribbon-button", inputs: { color: "color", defaultOption: "defaultOption", disabled: "disabled", icon: "icon", iconSize: "iconSize", label: "label", loading: "loading", options: "options", tooltip: "tooltip" }, outputs: { action: "action" }, host: { listeners: { "body:mousedown": "bodyMouseDown($event)", "body:mouseup": "bodyMouseUp($event)", "document:keydown.escape": "documentKeyDown($event)" }, properties: { "class.dropdown": "options.length > 0", "class.show": "showDropdown" } }, ngImport: i0, template: "<div class=\"button-container\"\r\n[attr.title]=\"tooltip || null\">\r\n    <a class=\"button\"\r\n    [class.disabled]=\"isButtonDisabled\"\r\n    [class.success]=\"status === 'success'\"\r\n    [class.warning]=\"status === 'warning'\"\r\n    [class.failure]=\"status === 'failure'\"\r\n    [class.small]=\"iconSize === 'small'\"\r\n    (click)=\"onButtonClicked()\"\r\n    >\r\n        <span class=\"icon\" [class.loading]=\"loading\">\r\n            <i class=\"fas fa-fw\" [ngClass]=\"[ buttonIcon, color ]\"></i>\r\n            \r\n            <svg [ngClass]=\"[ color ]\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\r\n                <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\r\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>\r\n            </svg>\r\n        </span>\r\n    \r\n        <span class=\"label\" [class.text-white]=\"status !== null\">\r\n            {{ label | translate }}\r\n        </span>\r\n    </a>\r\n    \r\n    <a class=\"button-dropdown\" *ngIf=\"options.length > 0\"\r\n    [class.disabled]=\"isButtonDisabled\"\r\n    [class.success]=\"status === 'success'\"\r\n    [class.warning]=\"status === 'warning'\"\r\n    [class.failure]=\"status === 'failure'\"\r\n    [class.small]=\"iconSize === 'small'\"\r\n    (click)=\"onShowHideDropdown()\"\r\n    >\r\n        <i class=\"fas fa-chevron-down\" [ngClass]=\"[ color ]\"></i>\r\n    </a>\r\n</div>\r\n\r\n<ul class=\"options-dropdown\" *ngIf=\"options.length > 0\">\r\n    <li *ngFor=\"let option of options; let i = index\"\r\n    [class.default-option]=\"i === defaultOption\"\r\n    [class.disabled]=\"isOptionDisabled(option)\"\r\n    [class.hidden]=\"!isOptionVisible(option)\"\r\n    (click)=\"onOptionClicked(option)\"\r\n    >\r\n        <i class=\"fas fa-fw\" *ngIf=\"!!option.icon\" [ngClass]=\"[ option.icon, color ]\"></i> {{ option.label | translate }}\r\n    </li>\r\n</ul>\r\n", styles: [":host-context.dropdown .button{border-top-right-radius:0;border-bottom-right-radius:0}.button-container{display:flex}.button{border-radius:.5rem;padding-left:.75rem;padding-right:.75rem}.button.success .icon i,.button.success .label,.button.warning .icon i,.button.warning .label,.button.failure .icon i,.button.failure .label{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.button.small{padding-left:.5rem;padding-right:.5rem}.button.small .icon i{height:1.75rem;font-size:1.5rem;line-height:2rem}@media (min-width: 768px){.button.small .icon i{font-size:1.25rem;line-height:1.75rem}}.button.small .icon svg{height:1.5rem}.button.small .label{font-size:.875rem;line-height:1.25rem}.button .icon{position:relative;display:flex;height:2rem;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-size:2.25rem;line-height:2.5rem}@media (min-width: 768px){.button .icon{font-size:1.875rem;line-height:2.25rem}}.button .icon i{transition-property:all;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.button .icon svg{position:absolute;height:2rem;width:2rem}@keyframes spin{to{transform:rotate(360deg)}}.button .icon svg{animation:spin 1s linear infinite;opacity:0;transition-property:opacity;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.button .icon.loading i{opacity:0}.button .icon.loading svg{opacity:1}.button .label{margin-top:.5rem;text-align:center;--tw-text-opacity: 1;color:rgb(31 41 55 / var(--tw-text-opacity, 1));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.button-dropdown{justify-content:center;border-top-right-radius:.5rem;border-bottom-right-radius:.5rem;padding-left:.25rem;padding-right:.25rem}.button-dropdown.success i,.button-dropdown.warning i,.button-dropdown.failure i{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.button-dropdown.small{font-size:.875rem;line-height:1.25rem}@media (min-width: 768px){.button-dropdown.small{font-size:1rem;line-height:1.5rem}}.button,.button-dropdown{display:flex;cursor:pointer;-webkit-user-select:none;user-select:none;flex-direction:column;padding-top:.5rem;padding-bottom:.5rem;transition-property:all;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.button:hover,.button-dropdown:hover{background-color:#d1d5dbcc}.button:focus,.button-dropdown:focus{background-color:#d1d5dbcc}.button:active,.button-dropdown:active{background-color:#9ca3af99}.button:disabled,.button.disabled,.button-dropdown:disabled,.button-dropdown.disabled{pointer-events:none;opacity:.6}.button.success,.button-dropdown.success{background-color:#16a34abf}.button.warning,.button-dropdown.warning{background-color:#ca8a04bf}.button.failure,.button-dropdown.failure{background-color:#dc2626bf}.button.small,.button-dropdown.small{padding-top:.25rem;padding-bottom:.25rem}ul{z-index:1;min-width:fit-content;-webkit-user-select:none;user-select:none}ul li{cursor:pointer;white-space:nowrap;padding:.5rem 1rem}ul li.default-option{display:none}ul li.disabled{pointer-events:none;opacity:.6}ul li:hover{--tw-bg-opacity: 1;background-color:rgb(230 244 255 / var(--tw-bg-opacity, 1))}ul li i{margin-right:.25rem}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: RibbonButtonComponent, isStandalone: true, selector: "lib-ribbon-button", inputs: { color: "color", defaultOption: "defaultOption", disabled: "disabled", icon: "icon", iconSize: "iconSize", label: "label", loading: "loading", options: "options", tooltip: "tooltip" }, outputs: { action: "action" }, host: { listeners: { "body:mousedown": "bodyMouseDown($event)", "body:mouseup": "bodyMouseUp($event)", "document:keydown.escape": "documentKeyDown($event)" }, properties: { "class.dropdown": "options.length > 0", "class.show": "showDropdown" } }, ngImport: i0, template: "<div class=\"button-container\"\n[attr.title]=\"tooltip || null\">\n    <a class=\"button\"\n    [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>\n", styles: [":host-context.dropdown .button{border-top-right-radius:0;border-bottom-right-radius:0}.button-container{display:flex}.button{border-radius:.5rem;padding-left:.75rem;padding-right:.75rem}.button.success .icon i,.button.success .label,.button.warning .icon i,.button.warning .label,.button.failure .icon i,.button.failure .label{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.button.small{padding-left:.5rem;padding-right:.5rem}.button.small .icon i{height:1.75rem;font-size:1.5rem;line-height:2rem}@media (min-width: 768px){.button.small .icon i{font-size:1.25rem;line-height:1.75rem}}.button.small .icon svg{height:1.5rem}.button.small .label{font-size:.875rem;line-height:1.25rem}.button .icon{position:relative;display:flex;height:2rem;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-size:2.25rem;line-height:2.5rem}@media (min-width: 768px){.button .icon{font-size:1.875rem;line-height:2.25rem}}.button .icon i{transition-property:all;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.button .icon svg{position:absolute;height:2rem;width:2rem}@keyframes spin{to{transform:rotate(360deg)}}.button .icon svg{animation:spin 1s linear infinite;opacity:0;transition-property:opacity;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.button .icon.loading i{opacity:0}.button .icon.loading svg{opacity:1}.button .label{margin-top:.5rem;text-align:center;--tw-text-opacity: 1;color:rgb(31 41 55 / var(--tw-text-opacity, 1));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.button-dropdown{justify-content:center;border-top-right-radius:.5rem;border-bottom-right-radius:.5rem;padding-left:.25rem;padding-right:.25rem}.button-dropdown.success i,.button-dropdown.warning i,.button-dropdown.failure i{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.button-dropdown.small{font-size:.875rem;line-height:1.25rem}@media (min-width: 768px){.button-dropdown.small{font-size:1rem;line-height:1.5rem}}.button,.button-dropdown{display:flex;cursor:pointer;-webkit-user-select:none;user-select:none;flex-direction:column;padding-top:.5rem;padding-bottom:.5rem;transition-property:all;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.button:hover,.button-dropdown:hover{background-color:#d1d5dbcc}.button:focus,.button-dropdown:focus{background-color:#d1d5dbcc}.button:active,.button-dropdown:active{background-color:#9ca3af99}.button:disabled,.button.disabled,.button-dropdown:disabled,.button-dropdown.disabled{pointer-events:none;opacity:.6}.button.success,.button-dropdown.success{background-color:#16a34abf}.button.warning,.button-dropdown.warning{background-color:#ca8a04bf}.button.failure,.button-dropdown.failure{background-color:#dc2626bf}.button.small,.button-dropdown.small{padding-top:.25rem;padding-bottom:.25rem}ul{z-index:1;min-width:fit-content;-webkit-user-select:none;user-select:none}ul li{cursor:pointer;white-space:nowrap;padding:.5rem 1rem}ul li.default-option{display:none}ul li.disabled{pointer-events:none;opacity:.6}ul li:hover{--tw-bg-opacity: 1;background-color:rgb(230 244 255 / var(--tw-bg-opacity, 1))}ul li i{margin-right:.25rem}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: RibbonButtonComponent, decorators: [{
             type: Component,
@@ -3491,7 +3596,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
                         NgFor,
                         NgIf,
                         TranslatePipe,
-                    ], template: "<div class=\"button-container\"\r\n[attr.title]=\"tooltip || null\">\r\n    <a class=\"button\"\r\n    [class.disabled]=\"isButtonDisabled\"\r\n    [class.success]=\"status === 'success'\"\r\n    [class.warning]=\"status === 'warning'\"\r\n    [class.failure]=\"status === 'failure'\"\r\n    [class.small]=\"iconSize === 'small'\"\r\n    (click)=\"onButtonClicked()\"\r\n    >\r\n        <span class=\"icon\" [class.loading]=\"loading\">\r\n            <i class=\"fas fa-fw\" [ngClass]=\"[ buttonIcon, color ]\"></i>\r\n            \r\n            <svg [ngClass]=\"[ color ]\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\r\n                <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\r\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>\r\n            </svg>\r\n        </span>\r\n    \r\n        <span class=\"label\" [class.text-white]=\"status !== null\">\r\n            {{ label | translate }}\r\n        </span>\r\n    </a>\r\n    \r\n    <a class=\"button-dropdown\" *ngIf=\"options.length > 0\"\r\n    [class.disabled]=\"isButtonDisabled\"\r\n    [class.success]=\"status === 'success'\"\r\n    [class.warning]=\"status === 'warning'\"\r\n    [class.failure]=\"status === 'failure'\"\r\n    [class.small]=\"iconSize === 'small'\"\r\n    (click)=\"onShowHideDropdown()\"\r\n    >\r\n        <i class=\"fas fa-chevron-down\" [ngClass]=\"[ color ]\"></i>\r\n    </a>\r\n</div>\r\n\r\n<ul class=\"options-dropdown\" *ngIf=\"options.length > 0\">\r\n    <li *ngFor=\"let option of options; let i = index\"\r\n    [class.default-option]=\"i === defaultOption\"\r\n    [class.disabled]=\"isOptionDisabled(option)\"\r\n    [class.hidden]=\"!isOptionVisible(option)\"\r\n    (click)=\"onOptionClicked(option)\"\r\n    >\r\n        <i class=\"fas fa-fw\" *ngIf=\"!!option.icon\" [ngClass]=\"[ option.icon, color ]\"></i> {{ option.label | translate }}\r\n    </li>\r\n</ul>\r\n", styles: [":host-context.dropdown .button{border-top-right-radius:0;border-bottom-right-radius:0}.button-container{display:flex}.button{border-radius:.5rem;padding-left:.75rem;padding-right:.75rem}.button.success .icon i,.button.success .label,.button.warning .icon i,.button.warning .label,.button.failure .icon i,.button.failure .label{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.button.small{padding-left:.5rem;padding-right:.5rem}.button.small .icon i{height:1.75rem;font-size:1.5rem;line-height:2rem}@media (min-width: 768px){.button.small .icon i{font-size:1.25rem;line-height:1.75rem}}.button.small .icon svg{height:1.5rem}.button.small .label{font-size:.875rem;line-height:1.25rem}.button .icon{position:relative;display:flex;height:2rem;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-size:2.25rem;line-height:2.5rem}@media (min-width: 768px){.button .icon{font-size:1.875rem;line-height:2.25rem}}.button .icon i{transition-property:all;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.button .icon svg{position:absolute;height:2rem;width:2rem}@keyframes spin{to{transform:rotate(360deg)}}.button .icon svg{animation:spin 1s linear infinite;opacity:0;transition-property:opacity;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.button .icon.loading i{opacity:0}.button .icon.loading svg{opacity:1}.button .label{margin-top:.5rem;text-align:center;--tw-text-opacity: 1;color:rgb(31 41 55 / var(--tw-text-opacity, 1));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.button-dropdown{justify-content:center;border-top-right-radius:.5rem;border-bottom-right-radius:.5rem;padding-left:.25rem;padding-right:.25rem}.button-dropdown.success i,.button-dropdown.warning i,.button-dropdown.failure i{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.button-dropdown.small{font-size:.875rem;line-height:1.25rem}@media (min-width: 768px){.button-dropdown.small{font-size:1rem;line-height:1.5rem}}.button,.button-dropdown{display:flex;cursor:pointer;-webkit-user-select:none;user-select:none;flex-direction:column;padding-top:.5rem;padding-bottom:.5rem;transition-property:all;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.button:hover,.button-dropdown:hover{background-color:#d1d5dbcc}.button:focus,.button-dropdown:focus{background-color:#d1d5dbcc}.button:active,.button-dropdown:active{background-color:#9ca3af99}.button:disabled,.button.disabled,.button-dropdown:disabled,.button-dropdown.disabled{pointer-events:none;opacity:.6}.button.success,.button-dropdown.success{background-color:#16a34abf}.button.warning,.button-dropdown.warning{background-color:#ca8a04bf}.button.failure,.button-dropdown.failure{background-color:#dc2626bf}.button.small,.button-dropdown.small{padding-top:.25rem;padding-bottom:.25rem}ul{z-index:1;min-width:fit-content;-webkit-user-select:none;user-select:none}ul li{cursor:pointer;white-space:nowrap;padding:.5rem 1rem}ul li.default-option{display:none}ul li.disabled{pointer-events:none;opacity:.6}ul li:hover{--tw-bg-opacity: 1;background-color:rgb(230 244 255 / var(--tw-bg-opacity, 1))}ul li i{margin-right:.25rem}\n"] }]
+                    ], template: "<div class=\"button-container\"\n[attr.title]=\"tooltip || null\">\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>\n", styles: [":host-context.dropdown .button{border-top-right-radius:0;border-bottom-right-radius:0}.button-container{display:flex}.button{border-radius:.5rem;padding-left:.75rem;padding-right:.75rem}.button.success .icon i,.button.success .label,.button.warning .icon i,.button.warning .label,.button.failure .icon i,.button.failure .label{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.button.small{padding-left:.5rem;padding-right:.5rem}.button.small .icon i{height:1.75rem;font-size:1.5rem;line-height:2rem}@media (min-width: 768px){.button.small .icon i{font-size:1.25rem;line-height:1.75rem}}.button.small .icon svg{height:1.5rem}.button.small .label{font-size:.875rem;line-height:1.25rem}.button .icon{position:relative;display:flex;height:2rem;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-size:2.25rem;line-height:2.5rem}@media (min-width: 768px){.button .icon{font-size:1.875rem;line-height:2.25rem}}.button .icon i{transition-property:all;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.button .icon svg{position:absolute;height:2rem;width:2rem}@keyframes spin{to{transform:rotate(360deg)}}.button .icon svg{animation:spin 1s linear infinite;opacity:0;transition-property:opacity;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.button .icon.loading i{opacity:0}.button .icon.loading svg{opacity:1}.button .label{margin-top:.5rem;text-align:center;--tw-text-opacity: 1;color:rgb(31 41 55 / var(--tw-text-opacity, 1));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.button-dropdown{justify-content:center;border-top-right-radius:.5rem;border-bottom-right-radius:.5rem;padding-left:.25rem;padding-right:.25rem}.button-dropdown.success i,.button-dropdown.warning i,.button-dropdown.failure i{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.button-dropdown.small{font-size:.875rem;line-height:1.25rem}@media (min-width: 768px){.button-dropdown.small{font-size:1rem;line-height:1.5rem}}.button,.button-dropdown{display:flex;cursor:pointer;-webkit-user-select:none;user-select:none;flex-direction:column;padding-top:.5rem;padding-bottom:.5rem;transition-property:all;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.button:hover,.button-dropdown:hover{background-color:#d1d5dbcc}.button:focus,.button-dropdown:focus{background-color:#d1d5dbcc}.button:active,.button-dropdown:active{background-color:#9ca3af99}.button:disabled,.button.disabled,.button-dropdown:disabled,.button-dropdown.disabled{pointer-events:none;opacity:.6}.button.success,.button-dropdown.success{background-color:#16a34abf}.button.warning,.button-dropdown.warning{background-color:#ca8a04bf}.button.failure,.button-dropdown.failure{background-color:#dc2626bf}.button.small,.button-dropdown.small{padding-top:.25rem;padding-bottom:.25rem}ul{z-index:1;min-width:fit-content;-webkit-user-select:none;user-select:none}ul li{cursor:pointer;white-space:nowrap;padding:.5rem 1rem}ul li.default-option{display:none}ul li.disabled{pointer-events:none;opacity:.6}ul li:hover{--tw-bg-opacity: 1;background-color:rgb(230 244 255 / var(--tw-bg-opacity, 1))}ul li i{margin-right:.25rem}\n"] }]
         }], propDecorators: { color: [{
                 type: Input
             }], defaultOption: [{
@@ -3525,11 +3630,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
 
 class RibbonComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: RibbonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: RibbonComponent, isStandalone: true, selector: "lib-ribbon", ngImport: i0, template: "<div>\r\n    <ng-content></ng-content>\r\n</div>\r\n\r\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"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: RibbonComponent, isStandalone: true, selector: "lib-ribbon", ngImport: i0, template: "<div>\n    <ng-content></ng-content>\n</div>\n\n<ng-content select=\"[right]\"></ng-content>", styles: ["@charset \"UTF-8\";::ng-deep lib-ribbon:not(:has(lib-ribbon-group:not(.hidden))):not(:has(>div>*:not(lib-ribbon-group))){display:none}:host-context{position:relative;display:flex;flex-direction:row;border-radius:.5rem;border-width:1px;padding:.25rem;border-color:#d1d5dbe6;background-color:#e5e7ebcc;justify-content:space-between}:host-context div{display:inline-flex;gap:.5rem}:host-context ::ng-deep *[right]{display:flex}:host-context ::ng-deep *[right] lib-ribbon-group{margin-right:.5rem;margin-left:0}:host-context ::ng-deep *[right] lib-ribbon-group:first-child{margin-right:0;padding-right:0;padding-left:.5rem}:host-context ::ng-deep *[right] lib-ribbon-group:after{left:-.25rem}:host-context ::ng-deep *[right] lib-ribbon-group lib-ribbon-button .options-dropdown{right:0}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: RibbonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-ribbon', template: "<div>\r\n    <ng-content></ng-content>\r\n</div>\r\n\r\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"] }]
+            args: [{ selector: 'lib-ribbon', template: "<div>\n    <ng-content></ng-content>\n</div>\n\n<ng-content select=\"[right]\"></ng-content>", styles: ["@charset \"UTF-8\";::ng-deep lib-ribbon:not(:has(lib-ribbon-group:not(.hidden))):not(:has(>div>*:not(lib-ribbon-group))){display:none}:host-context{position:relative;display:flex;flex-direction:row;border-radius:.5rem;border-width:1px;padding:.25rem;border-color:#d1d5dbe6;background-color:#e5e7ebcc;justify-content:space-between}:host-context div{display:inline-flex;gap:.5rem}:host-context ::ng-deep *[right]{display:flex}:host-context ::ng-deep *[right] lib-ribbon-group{margin-right:.5rem;margin-left:0}:host-context ::ng-deep *[right] lib-ribbon-group:first-child{margin-right:0;padding-right:0;padding-left:.5rem}:host-context ::ng-deep *[right] lib-ribbon-group:after{left:-.25rem}:host-context ::ng-deep *[right] lib-ribbon-group lib-ribbon-button .options-dropdown{right:0}\n"] }]
         }] });
 
 class RibbonGroupComponent {
@@ -3546,11 +3651,11 @@ class RibbonGroupComponent {
         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\">\r\n    <ng-content></ng-content>\r\n</div>\r\n\r\n<div class=\"label\">\r\n    <span>{{ label }}</span>\r\n</div>", styles: [":host-context{position:relative;padding-right:.5rem}:host-context:after{position:absolute;right:-.25rem;top:.25rem;bottom:.25rem;width:1px;--tw-content: \"\";content:var(--tw-content);background-color:#9ca3af99}:host-context .content{display:flex;flex-direction:row;flex-wrap:nowrap}:host-context .label{-webkit-user-select:none;user-select:none;padding-top:.05rem;text-align:center;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}\n"] });
+    static ɵ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\">\r\n    <ng-content></ng-content>\r\n</div>\r\n\r\n<div class=\"label\">\r\n    <span>{{ label }}</span>\r\n</div>", styles: [":host-context{position:relative;padding-right:.5rem}:host-context:after{position:absolute;right:-.25rem;top:.25rem;bottom:.25rem;width:1px;--tw-content: \"\";content:var(--tw-content);background-color:#9ca3af99}:host-context .content{display:flex;flex-direction:row;flex-wrap:nowrap}:host-context .label{-webkit-user-select:none;user-select:none;padding-top:.05rem;text-align:center;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}\n"] }]
+            args: [{ selector: 'lib-ribbon-group', 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 }]
@@ -3826,5 +3931,5 @@ class DateValidators {
  * 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 };
+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, SidebarMenuOpenMode, SidebarService, toSidebarMenuOpenMode };
 //# sourceMappingURL=zambon-dev-library.mjs.map