@zambon-dev/library 1.6.3 → 2.0.0

package/fesm2022/zambon-dev-library.mjs

@@ -355,7 +355,7 @@ class GridDataset extends BaseDataset {
     }
     set parentEntityId(value) {
         super.parentEntityId = value;
-        if (!!this.loadedRows) {
+        if (this.loadedRows) {
             this.refresh();
         }
     }
@@ -642,7 +642,7 @@ class DataGridDataset extends GridDataset {
                 return;
             }
             const key = this.loadedKeys[rowIndex];
-            if (!!key) {
+            if (key) {
                 this.selectRow(key);
             }
         }
@@ -963,10 +963,10 @@ class FormService {
             return;
         }
         this.form.reset();
-        if (!!this.model) {
+        if (this.model) {
             this.form.patchValue(this.model);
         }
-        else if (!!this.initialValue) {
+        else if (this.initialValue) {
             this.form.patchValue(this.initialValue);
         }
         this.form.updateValueAndValidity();
@@ -1217,7 +1217,7 @@ class SidebarService {
             });
         }
         if (!!menu.parent && shouldUpdateParents) {
-            while (!!menu.parent) {
+            while (menu.parent) {
                 this.selectionChanged.emit(menu.parent);
                 menu = menu.parent;
             }
@@ -1226,7 +1226,7 @@ class SidebarService {
     selectMenu(menu) {
         menu.isSelected = true;
         this.selectionChanged.emit(menu);
-        if (!!menu.parent) {
+        if (menu.parent) {
             this.selectMenu(menu.parent);
         }
     }
@@ -1257,11 +1257,14 @@ class FormInputComponent extends BaseComponent {
     rows;
     step = 1;
     type = 'text';
-    blur = new EventEmitter();
-    change = new EventEmitter();
+    // Deliberately NOT named blur/change/input/focus. <lib-form-input> is a real DOM
+    // element, so an output sharing a native event name fires the consumer's handler
+    // twice for the bubbling events and shadows the native one for the rest.
+    blurred = new EventEmitter();
+    changed = new EventEmitter();
     fixedValueChanged = new EventEmitter();
-    input = new EventEmitter();
-    focus = new EventEmitter();
+    focused = new EventEmitter();
+    inputChanged = new EventEmitter();
     //#endregion
     //#region Host listeners
     //#endregion
@@ -1284,7 +1287,7 @@ class FormInputComponent extends BaseComponent {
     }
     get formGroup() {
         let formGroup = this.formGroupDirective.form;
-        for (let group of this.parentGroups) {
+        for (const group of this.parentGroups) {
             formGroup = formGroup.get(group);
         }
         return formGroup;
@@ -1318,7 +1321,7 @@ class FormInputComponent extends BaseComponent {
     ngOnInit() {
         switch (this.type) {
             case 'number':
-                if (!!this.formControl) {
+                if (this.formControl) {
                     this.formControl.valueChanges
                         .pipe(takeUntil(this.destroy$))
                         .subscribe((value) => {
@@ -1332,7 +1335,7 @@ class FormInputComponent extends BaseComponent {
                 if (this.format === undefined) {
                     this.format = 'yyyy-MM-dd';
                 }
-                if (!!this.formControl) {
+                if (this.formControl) {
                     this.formControl.valueChanges
                         .pipe(takeUntil(this.destroy$))
                         .subscribe((value) => {
@@ -1354,23 +1357,23 @@ class FormInputComponent extends BaseComponent {
     //#endregion
     //#region Event handlers
     onBlur() {
-        this.blur.emit();
+        this.blurred.emit();
     }
     onChange(value) {
-        this.change.emit(value);
+        this.changed.emit(value);
     }
     onFocus() {
-        this.focus.emit();
+        this.focused.emit();
     }
     onInput() {
-        this.input.emit();
+        this.inputChanged.emit();
     }
     onValueChanged(newText) {
         this.fixedValue = newText;
         this.fixedValueChanged.emit(this.fixedValue);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: FormInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: FormInputComponent, isStandalone: true, selector: "lib-form-input", inputs: { autofocus: "autofocus", controlName: "controlName", disabledControlName: "disabledControlName", displayReadOnlyAsDisabled: "displayReadOnlyAsDisabled", fixedValue: "fixedValue", format: "format", invalid: "invalid", isDisabled: "isDisabled", isFullHeight: "isFullHeight", maxLength: "maxLength", min: "min", readOnly: "readOnly", rows: "rows", step: "step", type: "type" }, outputs: { blur: "blur", change: "change", fixedValueChanged: "fixedValueChanged", input: "input", focus: "focus" }, host: { properties: { "class.full-height": "isFullHeight", "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 }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: FormInputComponent, isStandalone: true, selector: "lib-form-input", inputs: { autofocus: "autofocus", controlName: "controlName", disabledControlName: "disabledControlName", displayReadOnlyAsDisabled: "displayReadOnlyAsDisabled", fixedValue: "fixedValue", format: "format", invalid: "invalid", isDisabled: "isDisabled", isFullHeight: "isFullHeight", maxLength: "maxLength", min: "min", readOnly: "readOnly", rows: "rows", step: "step", type: "type" }, outputs: { blurred: "blurred", changed: "changed", fixedValueChanged: "fixedValueChanged", focused: "focused", inputChanged: "inputChanged" }, host: { properties: { "class.full-height": "isFullHeight", "attr.type": "null" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"formGroupDirective.form?.enabled || isFormEditMode;else disabledControl\">\n    <ng-container [ngSwitch]=\"type\">\n        \n        <textarea *ngSwitchCase=\"'textarea'\"\n       \n        [attr.maxLength]=\"maxLength ?? null\"\n        [attr.rows]=\"rows\"\n        [class.invalid]=\"invalid\"\n        [formControlName]=\"controlName\"\n        (blur)=\"onBlur()\"\n        (focus)=\"onFocus()\"\n        (input)=\"onInput()\">\n        </textarea>\n\n        <ng-container *ngSwitchCase=\"'checkbox'\">\n            <input *ngIf=\"isFormControl; else fixedCheckbox\"\n            class=\"switch\"\n            type=\"checkbox\"\n           \n            [class.invalid]=\"invalid\"\n            [formControlName]=\"controlName\"\n            (blur)=\"onBlur()\"\n            (focus)=\"onFocus()\"\n            (input)=\"onInput()\" />\n\n            <ng-template #fixedCheckbox>\n                <input\n                class=\"switch\"\n                type=\"checkbox\"\n                [(ngModel)]=\"fixedValue\"\n                [attr.readonly]=\"true\"\n                [class.invalid]=\"invalid\"\n                [class.readonly-as-disabled]=\"displayReadOnlyAsDisabled\"\n                [disabled]=\"isDisabled\"\n                [ngModelOptions]=\"{ standalone: true }\"\n                (blur)=\"onBlur()\"\n                (change)=\"onChange($event)\"\n                (focus)=\"onFocus()\"\n                (input)=\"onInput()\"\n                (ngModelChange)=\"onValueChanged($event)\" />\n            </ng-template>\n        </ng-container>\n\n\n        <ng-container *ngSwitchDefault>\n            <input *ngIf=\"isFormControl; else fixedTextBox\"\n           \n            [attr.maxLength]=\"maxLength ?? null\"\n            [attr.min]=\"minAttributeValue\"\n            [attr.readonly]=\"readOnly ? true : null\"\n            [attr.step]=\"stepAttributeValue\"\n            [class.invalid]=\"invalid\"\n            [class.readonly-as-disabled]=\"displayReadOnlyAsDisabled\"\n            [formControlName]=\"controlName\"\n            [type]=\"type\"\n            (blur)=\"onBlur()\"\n            (focus)=\"onFocus()\"\n            (input)=\"onInput()\" />\n\n            <ng-template #fixedTextBox>\n                <input\n                type=\"text\"\n                [attr.maxLength]=\"maxLength ?? null\"\n                [attr.min]=\"minAttributeValue\"\n                [attr.readonly]=\"true\"\n                [attr.step]=\"stepAttributeValue\"\n                [class.invalid]=\"invalid\"\n                [class.readonly-as-disabled]=\"displayReadOnlyAsDisabled\"\n                [disabled]=\"isDisabled\"\n                [ngModel]=\"type === 'date' || type === 'datetime-local' ? (fixedValue | date: format) : ( type === 'number' ? (fixedValue | number) : fixedValue )\" \n                [ngModelOptions]=\"{ standalone: true }\"\n                (blur)=\"onBlur()\"\n                (focus)=\"onFocus()\"\n                (input)=\"onInput()\"\n                (ngModelChange)=\"onValueChanged($event)\" />\n            </ng-template>\n        </ng-container>\n\n    </ng-container>\n</ng-container>\n\n<ng-template #disabledControl>\n    <ng-container [ngSwitch]=\"type\">\n        <span class=\"value\" *ngSwitchCase=\"'checkbox'\">\n            <i [ngClass]=\"fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value ? 'fa-solid fa-square-check' : 'fa-regular fa-square'\"></i>\n        </span>\n\n        <span class=\"value\" *ngSwitchCase=\"'date'\">\n            {{ fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value | date: format }}\n        </span>\n\n        <span class=\"value\" *ngSwitchCase=\"'datetime-local'\">\n            {{ fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value | date: format }}\n        </span>\n\n        <span class=\"value\" *ngSwitchCase=\"'number'\">\n            {{ fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value | number: format }}\n        </span>\n\n        <span class=\"value text\" *ngSwitchDefault>{{ fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value }}</span>\n    </ng-container>\n</ng-template>\n\n<ng-template #fixedTextbox let-fixedValue=\"fixedValue\">\n    \n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:block}:host.full-height{height:100%}:host.full-height textarea{height:100%}input,textarea{--tw-border-opacity: 1;border-color:rgb(156 163 175 / var(--tw-border-opacity, 1))}input:focus,textarea:focus{--tw-border-opacity: 1;border-color:rgb(156 163 175 / var(--tw-border-opacity, 1));--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-color: rgb(0 107 182 / .3) }input,textarea{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}input:invalid,textarea:invalid{--tw-border-opacity: 1;border-color:rgb(248 113 113 / var(--tw-border-opacity, 1))}input:disabled,input.readonly-as-disabled[readonly],textarea:disabled,textarea.readonly-as-disabled[readonly]{--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity, 1))}input.ng-invalid.ng-touched,input.invalid,textarea.ng-invalid.ng-touched,textarea.invalid{--tw-border-opacity: 1;border-color:rgb(220 38 38 / var(--tw-border-opacity, 1))}input[type=text],input[type=number],input[type=password],input[type=date],input[type=datetime-local],input[type=email],input[type=file],input[type=month],input[type=tel],input[type=time],input[type=url],input[type=week],textarea{display:block;width:100%;border-radius:.375rem;padding:.25rem .5rem;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}input[type=text].ng-invalid.ng-touched,input[type=text].invalid,input[type=number].ng-invalid.ng-touched,input[type=number].invalid,input[type=password].ng-invalid.ng-touched,input[type=password].invalid,input[type=date].ng-invalid.ng-touched,input[type=date].invalid,input[type=datetime-local].ng-invalid.ng-touched,input[type=datetime-local].invalid,input[type=email].ng-invalid.ng-touched,input[type=email].invalid,input[type=file].ng-invalid.ng-touched,input[type=file].invalid,input[type=month].ng-invalid.ng-touched,input[type=month].invalid,input[type=tel].ng-invalid.ng-touched,input[type=tel].invalid,input[type=time].ng-invalid.ng-touched,input[type=time].invalid,input[type=url].ng-invalid.ng-touched,input[type=url].invalid,input[type=week].ng-invalid.ng-touched,input[type=week].invalid,textarea.ng-invalid.ng-touched,textarea.invalid{margin-right:-2.25rem;padding-right:2.25rem;transition-property:none}input[type=text].ng-invalid.ng-touched:focus,input[type=text].invalid:focus,input[type=number].ng-invalid.ng-touched:focus,input[type=number].invalid:focus,input[type=password].ng-invalid.ng-touched:focus,input[type=password].invalid:focus,input[type=date].ng-invalid.ng-touched:focus,input[type=date].invalid:focus,input[type=datetime-local].ng-invalid.ng-touched:focus,input[type=datetime-local].invalid:focus,input[type=email].ng-invalid.ng-touched:focus,input[type=email].invalid:focus,input[type=file].ng-invalid.ng-touched:focus,input[type=file].invalid:focus,input[type=month].ng-invalid.ng-touched:focus,input[type=month].invalid:focus,input[type=tel].ng-invalid.ng-touched:focus,input[type=tel].invalid:focus,input[type=time].ng-invalid.ng-touched:focus,input[type=time].invalid:focus,input[type=url].ng-invalid.ng-touched:focus,input[type=url].invalid:focus,input[type=week].ng-invalid.ng-touched:focus,input[type=week].invalid:focus,textarea.ng-invalid.ng-touched:focus,textarea.invalid:focus{--tw-ring-color: rgb(248 113 113 / .3) }input[type=text].ng-invalid.ng-touched,input[type=text].invalid,input[type=number].ng-invalid.ng-touched,input[type=number].invalid,input[type=password].ng-invalid.ng-touched,input[type=password].invalid,input[type=date].ng-invalid.ng-touched,input[type=date].invalid,input[type=datetime-local].ng-invalid.ng-touched,input[type=datetime-local].invalid,input[type=email].ng-invalid.ng-touched,input[type=email].invalid,input[type=file].ng-invalid.ng-touched,input[type=file].invalid,input[type=month].ng-invalid.ng-touched,input[type=month].invalid,input[type=tel].ng-invalid.ng-touched,input[type=tel].invalid,input[type=time].ng-invalid.ng-touched,input[type=time].invalid,input[type=url].ng-invalid.ng-touched,input[type=url].invalid,input[type=week].ng-invalid.ng-touched,input[type=week].invalid,textarea.ng-invalid.ng-touched,textarea.invalid{background-size:1.125rem 1.125rem;background-position:right .5625rem center;background-repeat:no-repeat;background-image:url(\"data:image/svg+xml,%3csvg class='text-white' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e\")}input[type=checkbox]{position:relative;margin-top:.25rem;margin-bottom:.25rem;height:1.25rem;width:1.25rem;border-radius:.25rem;padding:.125rem;display:inline-flex;flex-direction:row;justify-content:flex-end;appearance:none;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}input[type=checkbox]:disabled{pointer-events:none;opacity:.5}input[type=checkbox]:not(.switch){border-width:2px;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}input[type=checkbox]:not(.switch):focus{--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}input[type=checkbox]:not(.switch):before{border-radius:.25rem;--tw-content: \"\";content:var(--tw-content);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:.25rem;font-family:\"Font Awesome 6 Free\";font-weight:900}input[type=checkbox]:checked{border-color:#006bb6cc;--tw-bg-opacity: 1;background-color:rgb(0 107 182 / var(--tw-bg-opacity, 1));background-image:none}input[type=checkbox]:checked:before{--tw-content: \"\\f00c\";content:var(--tw-content);--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}input[type=checkbox]:disabled~label{opacity:.5}input[type=checkbox]~label{margin-left:.5rem;-webkit-user-select:none;user-select:none}input[type=checkbox].switch{height:1.5rem;width:3rem;border-radius:2rem;appearance:none;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}input[type=checkbox].switch:before{aspect-ratio:1 / 1;height:100%;border-radius:9999px;--tw-content: \"\";content:var(--tw-content);background-color:#6b728099}input[type=checkbox].switch:after{flex-grow:1;--tw-content: \"\";content:var(--tw-content);transition:flex-grow .15s ease-in-out}input[type=checkbox].switch:focus:before{background-color:#3b82f699}input[type=checkbox].switch:checked{border-color:#006bb6cc;--tw-bg-opacity: 1;background-color:rgb(0 107 182 / var(--tw-bg-opacity, 1));background-image:none}input[type=checkbox].switch:checked:before{--tw-content: \"\";content:var(--tw-content);--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}input[type=checkbox].switch:checked:after{flex-grow:0}label,.value{display:block;overflow-wrap:break-word;padding-top:.25rem;padding-bottom:.25rem}label.text,.value.text{white-space:pre-wrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: FormInputComponent, decorators: [{
             type: Component,
@@ -1386,7 +1389,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
                         // 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"] }]
+                    }, template: "<ng-container *ngIf=\"formGroupDirective.form?.enabled || isFormEditMode;else disabledControl\">\n    <ng-container [ngSwitch]=\"type\">\n        \n        <textarea *ngSwitchCase=\"'textarea'\"\n       \n        [attr.maxLength]=\"maxLength ?? null\"\n        [attr.rows]=\"rows\"\n        [class.invalid]=\"invalid\"\n        [formControlName]=\"controlName\"\n        (blur)=\"onBlur()\"\n        (focus)=\"onFocus()\"\n        (input)=\"onInput()\">\n        </textarea>\n\n        <ng-container *ngSwitchCase=\"'checkbox'\">\n            <input *ngIf=\"isFormControl; else fixedCheckbox\"\n            class=\"switch\"\n            type=\"checkbox\"\n           \n            [class.invalid]=\"invalid\"\n            [formControlName]=\"controlName\"\n            (blur)=\"onBlur()\"\n            (focus)=\"onFocus()\"\n            (input)=\"onInput()\" />\n\n            <ng-template #fixedCheckbox>\n                <input\n                class=\"switch\"\n                type=\"checkbox\"\n                [(ngModel)]=\"fixedValue\"\n                [attr.readonly]=\"true\"\n                [class.invalid]=\"invalid\"\n                [class.readonly-as-disabled]=\"displayReadOnlyAsDisabled\"\n                [disabled]=\"isDisabled\"\n                [ngModelOptions]=\"{ standalone: true }\"\n                (blur)=\"onBlur()\"\n                (change)=\"onChange($event)\"\n                (focus)=\"onFocus()\"\n                (input)=\"onInput()\"\n                (ngModelChange)=\"onValueChanged($event)\" />\n            </ng-template>\n        </ng-container>\n\n\n        <ng-container *ngSwitchDefault>\n            <input *ngIf=\"isFormControl; else fixedTextBox\"\n           \n            [attr.maxLength]=\"maxLength ?? null\"\n            [attr.min]=\"minAttributeValue\"\n            [attr.readonly]=\"readOnly ? true : null\"\n            [attr.step]=\"stepAttributeValue\"\n            [class.invalid]=\"invalid\"\n            [class.readonly-as-disabled]=\"displayReadOnlyAsDisabled\"\n            [formControlName]=\"controlName\"\n            [type]=\"type\"\n            (blur)=\"onBlur()\"\n            (focus)=\"onFocus()\"\n            (input)=\"onInput()\" />\n\n            <ng-template #fixedTextBox>\n                <input\n                type=\"text\"\n                [attr.maxLength]=\"maxLength ?? null\"\n                [attr.min]=\"minAttributeValue\"\n                [attr.readonly]=\"true\"\n                [attr.step]=\"stepAttributeValue\"\n                [class.invalid]=\"invalid\"\n                [class.readonly-as-disabled]=\"displayReadOnlyAsDisabled\"\n                [disabled]=\"isDisabled\"\n                [ngModel]=\"type === 'date' || type === 'datetime-local' ? (fixedValue | date: format) : ( type === 'number' ? (fixedValue | number) : fixedValue )\" \n                [ngModelOptions]=\"{ standalone: true }\"\n                (blur)=\"onBlur()\"\n                (focus)=\"onFocus()\"\n                (input)=\"onInput()\"\n                (ngModelChange)=\"onValueChanged($event)\" />\n            </ng-template>\n        </ng-container>\n\n    </ng-container>\n</ng-container>\n\n<ng-template #disabledControl>\n    <ng-container [ngSwitch]=\"type\">\n        <span class=\"value\" *ngSwitchCase=\"'checkbox'\">\n            <i [ngClass]=\"fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value ? 'fa-solid fa-square-check' : 'fa-regular fa-square'\"></i>\n        </span>\n\n        <span class=\"value\" *ngSwitchCase=\"'date'\">\n            {{ fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value | date: format }}\n        </span>\n\n        <span class=\"value\" *ngSwitchCase=\"'datetime-local'\">\n            {{ fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value | date: format }}\n        </span>\n\n        <span class=\"value\" *ngSwitchCase=\"'number'\">\n            {{ fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value | number: format }}\n        </span>\n\n        <span class=\"value text\" *ngSwitchDefault>{{ fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value }}</span>\n    </ng-container>\n</ng-template>\n\n<ng-template #fixedTextbox let-fixedValue=\"fixedValue\">\n    \n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:block}:host.full-height{height:100%}:host.full-height textarea{height:100%}input,textarea{--tw-border-opacity: 1;border-color:rgb(156 163 175 / var(--tw-border-opacity, 1))}input:focus,textarea:focus{--tw-border-opacity: 1;border-color:rgb(156 163 175 / var(--tw-border-opacity, 1));--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-color: rgb(0 107 182 / .3) }input,textarea{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}input:invalid,textarea:invalid{--tw-border-opacity: 1;border-color:rgb(248 113 113 / var(--tw-border-opacity, 1))}input:disabled,input.readonly-as-disabled[readonly],textarea:disabled,textarea.readonly-as-disabled[readonly]{--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity, 1))}input.ng-invalid.ng-touched,input.invalid,textarea.ng-invalid.ng-touched,textarea.invalid{--tw-border-opacity: 1;border-color:rgb(220 38 38 / var(--tw-border-opacity, 1))}input[type=text],input[type=number],input[type=password],input[type=date],input[type=datetime-local],input[type=email],input[type=file],input[type=month],input[type=tel],input[type=time],input[type=url],input[type=week],textarea{display:block;width:100%;border-radius:.375rem;padding:.25rem .5rem;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}input[type=text].ng-invalid.ng-touched,input[type=text].invalid,input[type=number].ng-invalid.ng-touched,input[type=number].invalid,input[type=password].ng-invalid.ng-touched,input[type=password].invalid,input[type=date].ng-invalid.ng-touched,input[type=date].invalid,input[type=datetime-local].ng-invalid.ng-touched,input[type=datetime-local].invalid,input[type=email].ng-invalid.ng-touched,input[type=email].invalid,input[type=file].ng-invalid.ng-touched,input[type=file].invalid,input[type=month].ng-invalid.ng-touched,input[type=month].invalid,input[type=tel].ng-invalid.ng-touched,input[type=tel].invalid,input[type=time].ng-invalid.ng-touched,input[type=time].invalid,input[type=url].ng-invalid.ng-touched,input[type=url].invalid,input[type=week].ng-invalid.ng-touched,input[type=week].invalid,textarea.ng-invalid.ng-touched,textarea.invalid{margin-right:-2.25rem;padding-right:2.25rem;transition-property:none}input[type=text].ng-invalid.ng-touched:focus,input[type=text].invalid:focus,input[type=number].ng-invalid.ng-touched:focus,input[type=number].invalid:focus,input[type=password].ng-invalid.ng-touched:focus,input[type=password].invalid:focus,input[type=date].ng-invalid.ng-touched:focus,input[type=date].invalid:focus,input[type=datetime-local].ng-invalid.ng-touched:focus,input[type=datetime-local].invalid:focus,input[type=email].ng-invalid.ng-touched:focus,input[type=email].invalid:focus,input[type=file].ng-invalid.ng-touched:focus,input[type=file].invalid:focus,input[type=month].ng-invalid.ng-touched:focus,input[type=month].invalid:focus,input[type=tel].ng-invalid.ng-touched:focus,input[type=tel].invalid:focus,input[type=time].ng-invalid.ng-touched:focus,input[type=time].invalid:focus,input[type=url].ng-invalid.ng-touched:focus,input[type=url].invalid:focus,input[type=week].ng-invalid.ng-touched:focus,input[type=week].invalid:focus,textarea.ng-invalid.ng-touched:focus,textarea.invalid:focus{--tw-ring-color: rgb(248 113 113 / .3) }input[type=text].ng-invalid.ng-touched,input[type=text].invalid,input[type=number].ng-invalid.ng-touched,input[type=number].invalid,input[type=password].ng-invalid.ng-touched,input[type=password].invalid,input[type=date].ng-invalid.ng-touched,input[type=date].invalid,input[type=datetime-local].ng-invalid.ng-touched,input[type=datetime-local].invalid,input[type=email].ng-invalid.ng-touched,input[type=email].invalid,input[type=file].ng-invalid.ng-touched,input[type=file].invalid,input[type=month].ng-invalid.ng-touched,input[type=month].invalid,input[type=tel].ng-invalid.ng-touched,input[type=tel].invalid,input[type=time].ng-invalid.ng-touched,input[type=time].invalid,input[type=url].ng-invalid.ng-touched,input[type=url].invalid,input[type=week].ng-invalid.ng-touched,input[type=week].invalid,textarea.ng-invalid.ng-touched,textarea.invalid{background-size:1.125rem 1.125rem;background-position:right .5625rem center;background-repeat:no-repeat;background-image:url(\"data:image/svg+xml,%3csvg class='text-white' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e\")}input[type=checkbox]{position:relative;margin-top:.25rem;margin-bottom:.25rem;height:1.25rem;width:1.25rem;border-radius:.25rem;padding:.125rem;display:inline-flex;flex-direction:row;justify-content:flex-end;appearance:none;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}input[type=checkbox]:disabled{pointer-events:none;opacity:.5}input[type=checkbox]:not(.switch){border-width:2px;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}input[type=checkbox]:not(.switch):focus{--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}input[type=checkbox]:not(.switch):before{border-radius:.25rem;--tw-content: \"\";content:var(--tw-content);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:.25rem;font-family:\"Font Awesome 6 Free\";font-weight:900}input[type=checkbox]:checked{border-color:#006bb6cc;--tw-bg-opacity: 1;background-color:rgb(0 107 182 / var(--tw-bg-opacity, 1));background-image:none}input[type=checkbox]:checked:before{--tw-content: \"\\f00c\";content:var(--tw-content);--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}input[type=checkbox]:disabled~label{opacity:.5}input[type=checkbox]~label{margin-left:.5rem;-webkit-user-select:none;user-select:none}input[type=checkbox].switch{height:1.5rem;width:3rem;border-radius:2rem;appearance:none;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}input[type=checkbox].switch:before{aspect-ratio:1 / 1;height:100%;border-radius:9999px;--tw-content: \"\";content:var(--tw-content);background-color:#6b728099}input[type=checkbox].switch:after{flex-grow:1;--tw-content: \"\";content:var(--tw-content);transition:flex-grow .15s ease-in-out}input[type=checkbox].switch:focus:before{background-color:#3b82f699}input[type=checkbox].switch:checked{border-color:#006bb6cc;--tw-bg-opacity: 1;background-color:rgb(0 107 182 / var(--tw-bg-opacity, 1));background-image:none}input[type=checkbox].switch:checked:before{--tw-content: \"\";content:var(--tw-content);--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}input[type=checkbox].switch:checked:after{flex-grow:0}label,.value{display:block;overflow-wrap:break-word;padding-top:.25rem;padding-bottom:.25rem}label.text,.value.text{white-space:pre-wrap}\n"] }]
         }], ctorParameters: () => [], propDecorators: { autofocus: [{
                 type: Input
             }], controlName: [{
@@ -1417,15 +1420,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
                 type: Input
             }], type: [{
                 type: Input
-            }], blur: [{
+            }], blurred: [{
                 type: Output
-            }], change: [{
+            }], changed: [{
                 type: Output
             }], fixedValueChanged: [{
                 type: Output
-            }], input: [{
+            }], focused: [{
                 type: Output
-            }], focus: [{
+            }], inputChanged: [{
                 type: Output
             }] } });
 
@@ -1466,7 +1469,7 @@ class FormInputGroupComponent extends BaseComponent {
     }
     get formGroup() {
         let formGroup = this.formGroupDirective.form;
-        for (let group of this.parentGroups) {
+        for (const group of this.parentGroups) {
             formGroup = formGroup.get(group);
         }
         return formGroup;
@@ -1507,7 +1510,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", "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" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: FormInputGroupComponent, isStandalone: true, selector: "lib-form-input-group", inputs: { autofocus: "autofocus", alignContent: "alignContent", controlName: "controlName", fixedValue: "fixedValue", format: "format", label: "label", isDisabled: "isDisabled", isFullHeight: "isFullHeight", maxLength: "maxLength", min: "min", notes: "notes", readOnly: "readOnly", rows: "rows", showLabel: "showLabel", step: "step", template: "template", type: "type", validations: "validations" }, host: { properties: { "class.full-height": "isFullHeight", "attr.type": "null" } }, usesInheritance: true, ngImport: i0, template: "<label *ngIf=\"showLabel\"\n[attr.for]=\"controlName\">\n    {{ label | translate }}:\n</label>\n\n<div class=\"field\"\n[class.col-span-2]=\"!showLabel\"\n[ngStyle]=\"{ 'align-content': alignContent }\" >\n    <div class=\"loading\" *ngIf=\"(loadingField || (formService.loading && formService.model === null)); else content\">\n        <div></div>\n    </div>\n\n    <ng-template #content>\n        <ng-container *ngTemplateOutlet=\"template ? template : defaultTemplate\">\n        </ng-container>\n        \n        <div class=\"validations\" [class.show]=\"formControl?.invalid\" *ngIf=\"formControl?.touched\">\n            <ng-container *ngFor=\"let error of formControl?.errors | keyvalue\">\n                <span *ngIf=\"hasValidation(error.key)\">{{ validations[error.key] | translate }}</span>\n                <ng-template #defaultValidationError>{{ error.key }}</ng-template>\n            </ng-container>\n        </div>\n        \n        <ng-template #defaultTemplate>\n            <lib-form-input #formInput\n            [autofocus]=\"autofocus\"\n            [controlName]=\"controlName\"\n            [fixedValue]=\"fixedValue\"\n            [format]=\"format\"\n            [isDisabled]=\"isDisabled\"\n            [isFullHeight]=\"isFullHeight\"\n            [min]=\"min\"\n            [maxLength]=\"maxLength\"\n            [readOnly]=\"readOnly\"\n            [rows]=\"rows\"\n            [step]=\"step\"\n            [type]=\"type\">\n            </lib-form-input>\n        </ng-template>\n        \n        <span class=\"text-sm italic\" *ngIf=\"hasNotes\">\n            *{{ notes | translate }}\n        </span>\n    </ng-template>\n\n</div>\n", styles: [":host{grid-column:span 2 / span 2;display:grid;grid-template-columns:subgrid;gap:.75rem}:host.full-height{max-height:100%;overflow:auto}label{white-space:nowrap;padding-top:.25rem;padding-bottom:.25rem;text-align:right;font-size:.75rem;font-weight:700;text-transform:uppercase;line-height:1.5rem;letter-spacing:.025em;--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.field .validations{flex-basis:100%;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(220 38 38 / var(--tw-text-opacity, 1))}.field .validations.show{margin-top:.25rem}.field .validations span{display:block}.field .loading{max-width:24rem}@keyframes pulse{50%{opacity:.5}}.field .loading{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.field .loading *{height:.625rem;width:100%;border-radius:9999px;--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1))}@media (prefers-color-scheme: dark){.field .loading *{--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))}}\n"], dependencies: [{ kind: "component", type: FormInputComponent, selector: "lib-form-input", inputs: ["autofocus", "controlName", "disabledControlName", "displayReadOnlyAsDisabled", "fixedValue", "format", "invalid", "isDisabled", "isFullHeight", "maxLength", "min", "readOnly", "rows", "step", "type"], outputs: ["blurred", "changed", "fixedValueChanged", "focused", "inputChanged"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: FormInputGroupComponent, decorators: [{
             type: Component,
@@ -1845,9 +1848,6 @@ class CatalogSelectComponent extends BaseComponent {
         }
         this.closeDropdownOverlay();
     }
-    onDropDownMessageClick() {
-        this.closeDropdownOverlay();
-    }
     //#endregion
     //#region Public methods
     getOptionId(index) {
@@ -1910,10 +1910,10 @@ class CatalogSelectComponent extends BaseComponent {
                 this.entriesDataSource.push({ value, display });
             }
         });
+        // Subscribed only to run the requests; the emitted values are not needed here.
         forkJoin(observables)
             .pipe(take(1))
-            .subscribe(() => {
-        });
+            .subscribe();
     }
     initializeSearch() {
         this.searchSubject
@@ -2137,7 +2137,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\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" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: CatalogSelectComponent, isStandalone: true, selector: "lib-catalog-select", inputs: { autofocus: "autofocus", controlName: "controlName", displayControlName: "displayControlName", displayProperty: "displayProperty", entriesList: "entriesList", filters: "filters", label: "label", maxEntries: "maxEntries", minimumLengthSearch: "minimumLengthSearch", notes: "notes", readOnly: "readOnly", searchEndpoint: "searchEndpoint", validations: "validations", valueProperty: "valueProperty" }, host: { listeners: { "body:mousedown": "bodyMouseDown($event)", "body:mouseup": "bodyMouseUp($event)" } }, viewQueries: [{ propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, read: TemplateRef }, { propertyName: "inputElement", first: true, predicate: ["input"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<lib-form-input-group\n[controlName]=\"controlName\"\n[label]=\"label\"\n[notes]=\"notes\"\n[template]=\"template\"\n[validations]=\"validations\">\n</lib-form-input-group>\n\n<ng-template #template>\n    <div class=\"catalog-container\"\n    [class.show]=\"isDropDownShown\">\n        <lib-form-input #input\n        [class.fixed-content]=\"readOnly && !shouldUseCriteria\"\n        [autofocus]=\"autofocus\"\n        [controlName]=\"displayControlName\"\n        [invalid]=\"isInvalid && isTouched\"\n        [readOnly]=\"readOnly\"\n        (blurred)=\"onContainerBlur()\"\n        (click)=\"onContainerClick()\"\n        (focused)=\"onContainerFocus()\"\n        (keydown)=\"onKeyDown($event)\">\n        </lib-form-input>\n        <button *ngIf=\"showClearButton\"\n        class=\"clear-button\"\n        type=\"button\"\n        tabindex=\"-1\"\n        (click)=\"onClearClick($event)\">\n            <i class=\"fa-solid fa-xmark\"></i>\n        </button>\n    </div>\n</ng-template>\n\n<ng-template #dropdownTemplate>\n    <div class=\"dropdown-container\">\n        <ul class=\"dropdown\"\n        role=\"listbox\"\n        [attr.id]=\"listboxId\">\n            <!-- Status rows are not options: role=\"presentation\" keeps them out of the\n                 listbox's option set, and they carry no click handler. The dropdown already\n                 closes on Escape, on blur and on an outside click. -->\n            <li *ngIf=\"isLoading\"\n            role=\"presentation\"\n            aria-live=\"polite\">\n                {{ 'CatalogSelect-Loading' | translate }}\n            </li>\n\n            <li *ngIf=\"shouldUseCriteria && showMinimumCharactersMessage\"\n            role=\"presentation\"\n            aria-live=\"polite\"\n            title=\"{{ 'CatalogSelect-MinimumLengthSearch' | translate: { minimumLengthSearch: minimumLengthSearch } }}\">\n                {{ 'CatalogSelect-MinimumLengthSearch' | translate: { minimumLengthSearch: minimumLengthSearch } }}\n            </li>\n\n            <li *ngIf=\"showNoResultsMessage\"\n            role=\"presentation\"\n            aria-live=\"polite\"\n            title=\"{{ 'CatalogSelect-NoResultsFound' | translate }}\">\n                {{ 'CatalogSelect-NoResultsFound' | translate }}\n            </li>\n\n            <!-- Retrying is a real action, so it is a real button and reachable by keyboard. -->\n            <li *ngIf=\"showFailureMessage\"\n            class=\"error\"\n            role=\"presentation\">\n                <button class=\"retry\"\n                type=\"button\"\n                title=\"{{ 'CatalogSelect-FailureMessage' | translate }}\"\n                (click)=\"onDropDownErrorClick()\">\n                    {{ 'CatalogSelect-FailureMessage' | translate }}\n                </button>\n            </li>\n\n            <!-- eslint-disable @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus --\n                 Options in a combobox listbox are deliberately not focusable. Keyboard\n                 interaction lives on the input, which owns ArrowUp/ArrowDown/Enter/Escape and\n                 points at the active option through aria-activedescendant. Giving each option\n                 its own tabindex and key handlers would break that pattern. -->\n            <li class=\"dropdown-item\" *ngFor=\"let entry of displayedEntries; let i = index\"\n            role=\"option\"\n            [attr.id]=\"getOptionId(i)\"\n            [attr.aria-selected]=\"selectedValue === entry.value\"\n            [class.focused]=\"focusedIndex === i\"\n            [class.selected]=\"selectedValue === entry.value\"\n            (click)=\"onDropDownItemClick(entry)\">\n                {{ entry.display }}\n            </li>\n            <!-- eslint-enable @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n        </ul>\n    </div>\n</ng-template>", styles: [":host-context{grid-column:span 2 / span 2;display:grid;grid-template-columns:subgrid}.catalog-container{position:relative}.catalog-container .clear-button{position:absolute;right:1.75rem;top:50%;display:flex;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));align-items:center;justify-content:center;height:1.25rem;width:1.25rem;border-radius:9999px;--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.catalog-container .clear-button:hover{--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.catalog-container .clear-button{z-index:10;cursor:pointer;border-style:none;background-color:transparent;padding:0;font-size:.875rem;line-height:1.25rem;line-height:1}.catalog-container:has(.clear-button) lib-form-input ::ng-deep input{padding-right:3.5rem}div lib-form-input ::ng-deep input{cursor:pointer;text-overflow:ellipsis;background-size:1.125rem 1.125rem;background-position:right .5625rem center;background-repeat:no-repeat;padding-right:2.25rem;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='%239ca3af' d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3e%3c/svg%3e\")}.dropdown-container{width:100%;-webkit-user-select:none;user-select:none}.dropdown{overflow-y:auto;overscroll-behavior:none;border-radius:.375rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(156 163 175 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);max-height:13rem}.dropdown li{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:.25rem .5rem}.dropdown li:not(.dropdown-item){font-size:.875rem;line-height:1.25rem}.dropdown li .retry{width:100%;cursor:pointer;border-style:none;background-color:transparent;padding:0;text-align:left;text-decoration-line:underline;color:inherit;font:inherit}.dropdown li.dropdown-item{cursor:pointer}.dropdown li.dropdown-item:nth-child(2n){background-color:#f5f5f4b3}.dropdown li.dropdown-item.selected{background-color:#59a5db33;font-weight:700}.dropdown li.dropdown-item.focused{background-color:#59a5db4d;outline:2px solid transparent;outline-offset:2px}.dropdown li.dropdown-item:hover,.dropdown li.dropdown-item:nth-child(2n):hover,.dropdown li.dropdown-item.selected:hover,.dropdown li.dropdown-item.focused:hover{background-color:#59a5db80}lib-form-input-group{flex-basis:100%}\n"], dependencies: [{ kind: "component", type: FormInputComponent, selector: "lib-form-input", inputs: ["autofocus", "controlName", "disabledControlName", "displayReadOnlyAsDisabled", "fixedValue", "format", "invalid", "isDisabled", "isFullHeight", "maxLength", "min", "readOnly", "rows", "step", "type"], outputs: ["blurred", "changed", "fixedValueChanged", "focused", "inputChanged"] }, { kind: "component", type: FormInputGroupComponent, selector: "lib-form-input-group", inputs: ["autofocus", "alignContent", "controlName", "fixedValue", "format", "label", "isDisabled", "isFullHeight", "maxLength", "min", "notes", "readOnly", "rows", "showLabel", "step", "template", "type", "validations"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: CatalogSelectComponent, decorators: [{
             type: Component,
@@ -2147,7 +2147,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
                         NgFor,
                         NgIf,
                         TranslatePipe,
-                    ], template: "<lib-form-input-group\n[controlName]=\"controlName\"\n[label]=\"label\"\n[notes]=\"notes\"\n[template]=\"template\"\n[validations]=\"validations\">\n</lib-form-input-group>\n\n<ng-template #template>\n    <div class=\"catalog-container\"\n    [class.show]=\"isDropDownShown\">\n        <lib-form-input #input\n        [class.fixed-content]=\"readOnly && !shouldUseCriteria\"\n        [autofocus]=\"autofocus\"\n        [controlName]=\"displayControlName\"\n        [invalid]=\"isInvalid && isTouched\"\n        [readOnly]=\"readOnly\"\n        (blur)=\"onContainerBlur()\"\n        (click)=\"onContainerClick()\"\n        (focus)=\"onContainerFocus()\"\n        (keydown)=\"onKeyDown($event)\">\n        </lib-form-input>\n        <button *ngIf=\"showClearButton\"\n        class=\"clear-button\"\n        type=\"button\"\n        tabindex=\"-1\"\n        (click)=\"onClearClick($event)\">\n            <i class=\"fa-solid fa-xmark\"></i>\n        </button>\n    </div>\n</ng-template>\n\n<ng-template #dropdownTemplate>\n    <div class=\"dropdown-container\">\n        <ul class=\"dropdown\"\n        role=\"listbox\"\n        [attr.id]=\"listboxId\">\n            <li *ngIf=\"isLoading\"\n            (click)=\"onDropDownMessageClick()\">\n                {{ 'CatalogSelect-Loading' | translate }}\n            </li>\n\n            <li *ngIf=\"shouldUseCriteria && showMinimumCharactersMessage\"\n            title=\"{{ 'CatalogSelect-MinimumLengthSearch' | translate: { minimumLengthSearch: minimumLengthSearch } }}\"\n            (click)=\"onDropDownMessageClick()\">\n                {{ 'CatalogSelect-MinimumLengthSearch' | translate: { minimumLengthSearch: minimumLengthSearch } }}\n            </li>\n\n            <li *ngIf=\"showNoResultsMessage\"\n            title=\"{{ 'CatalogSelect-NoResultsFound' | translate }}\"\n            (click)=\"onDropDownMessageClick()\">\n                {{ 'CatalogSelect-NoResultsFound' | translate }}\n            </li>\n\n            <li *ngIf=\"showFailureMessage\"\n            class=\"error\"\n            title=\"{{ 'CatalogSelect-FailureMessage' | translate }}\"\n            (click)=\"onDropDownErrorClick()\">\n                {{ 'CatalogSelect-FailureMessage' | translate }}\n            </li>\n\n            <li class=\"dropdown-item\" *ngFor=\"let entry of displayedEntries; let i = index\"\n            role=\"option\"\n            [attr.id]=\"getOptionId(i)\"\n            [attr.aria-selected]=\"selectedValue === entry.value\"\n            [class.focused]=\"focusedIndex === i\"\n            [class.selected]=\"selectedValue === entry.value\"\n            (click)=\"onDropDownItemClick(entry)\">\n                {{ entry.display }}\n            </li>\n        </ul>\n    </div>\n</ng-template>", styles: [":host-context{grid-column:span 2 / span 2;display:grid;grid-template-columns:subgrid}.catalog-container{position:relative}.catalog-container .clear-button{position:absolute;right:1.75rem;top:50%;display:flex;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));align-items:center;justify-content:center;height:1.25rem;width:1.25rem;border-radius:9999px;--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.catalog-container .clear-button:hover{--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.catalog-container .clear-button{z-index:10;cursor:pointer;border-style:none;background-color:transparent;padding:0;font-size:.875rem;line-height:1.25rem;line-height:1}.catalog-container:has(.clear-button) lib-form-input ::ng-deep input{padding-right:3.5rem}div lib-form-input ::ng-deep input{cursor:pointer;text-overflow:ellipsis;background-size:1.125rem 1.125rem;background-position:right .5625rem center;background-repeat:no-repeat;padding-right:2.25rem;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='%239ca3af' d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3e%3c/svg%3e\")}.dropdown-container{width:100%;-webkit-user-select:none;user-select:none}.dropdown{overflow-y:auto;overscroll-behavior:none;border-radius:.375rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(156 163 175 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);max-height:13rem}.dropdown li{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:.25rem .5rem}.dropdown li:not(.dropdown-item){font-size:.875rem;line-height:1.25rem}.dropdown li.dropdown-item{cursor:pointer}.dropdown li.dropdown-item:nth-child(2n){background-color:#f5f5f4b3}.dropdown li.dropdown-item.selected{background-color:#59a5db33;font-weight:700}.dropdown li.dropdown-item.focused{background-color:#59a5db4d;outline:2px solid transparent;outline-offset:2px}.dropdown li.dropdown-item:hover,.dropdown li.dropdown-item:nth-child(2n):hover,.dropdown li.dropdown-item.selected:hover,.dropdown li.dropdown-item.focused:hover{background-color:#59a5db80}lib-form-input-group{flex-basis:100%}\n"] }]
+                    ], template: "<lib-form-input-group\n[controlName]=\"controlName\"\n[label]=\"label\"\n[notes]=\"notes\"\n[template]=\"template\"\n[validations]=\"validations\">\n</lib-form-input-group>\n\n<ng-template #template>\n    <div class=\"catalog-container\"\n    [class.show]=\"isDropDownShown\">\n        <lib-form-input #input\n        [class.fixed-content]=\"readOnly && !shouldUseCriteria\"\n        [autofocus]=\"autofocus\"\n        [controlName]=\"displayControlName\"\n        [invalid]=\"isInvalid && isTouched\"\n        [readOnly]=\"readOnly\"\n        (blurred)=\"onContainerBlur()\"\n        (click)=\"onContainerClick()\"\n        (focused)=\"onContainerFocus()\"\n        (keydown)=\"onKeyDown($event)\">\n        </lib-form-input>\n        <button *ngIf=\"showClearButton\"\n        class=\"clear-button\"\n        type=\"button\"\n        tabindex=\"-1\"\n        (click)=\"onClearClick($event)\">\n            <i class=\"fa-solid fa-xmark\"></i>\n        </button>\n    </div>\n</ng-template>\n\n<ng-template #dropdownTemplate>\n    <div class=\"dropdown-container\">\n        <ul class=\"dropdown\"\n        role=\"listbox\"\n        [attr.id]=\"listboxId\">\n            <!-- Status rows are not options: role=\"presentation\" keeps them out of the\n                 listbox's option set, and they carry no click handler. The dropdown already\n                 closes on Escape, on blur and on an outside click. -->\n            <li *ngIf=\"isLoading\"\n            role=\"presentation\"\n            aria-live=\"polite\">\n                {{ 'CatalogSelect-Loading' | translate }}\n            </li>\n\n            <li *ngIf=\"shouldUseCriteria && showMinimumCharactersMessage\"\n            role=\"presentation\"\n            aria-live=\"polite\"\n            title=\"{{ 'CatalogSelect-MinimumLengthSearch' | translate: { minimumLengthSearch: minimumLengthSearch } }}\">\n                {{ 'CatalogSelect-MinimumLengthSearch' | translate: { minimumLengthSearch: minimumLengthSearch } }}\n            </li>\n\n            <li *ngIf=\"showNoResultsMessage\"\n            role=\"presentation\"\n            aria-live=\"polite\"\n            title=\"{{ 'CatalogSelect-NoResultsFound' | translate }}\">\n                {{ 'CatalogSelect-NoResultsFound' | translate }}\n            </li>\n\n            <!-- Retrying is a real action, so it is a real button and reachable by keyboard. -->\n            <li *ngIf=\"showFailureMessage\"\n            class=\"error\"\n            role=\"presentation\">\n                <button class=\"retry\"\n                type=\"button\"\n                title=\"{{ 'CatalogSelect-FailureMessage' | translate }}\"\n                (click)=\"onDropDownErrorClick()\">\n                    {{ 'CatalogSelect-FailureMessage' | translate }}\n                </button>\n            </li>\n\n            <!-- eslint-disable @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus --\n                 Options in a combobox listbox are deliberately not focusable. Keyboard\n                 interaction lives on the input, which owns ArrowUp/ArrowDown/Enter/Escape and\n                 points at the active option through aria-activedescendant. Giving each option\n                 its own tabindex and key handlers would break that pattern. -->\n            <li class=\"dropdown-item\" *ngFor=\"let entry of displayedEntries; let i = index\"\n            role=\"option\"\n            [attr.id]=\"getOptionId(i)\"\n            [attr.aria-selected]=\"selectedValue === entry.value\"\n            [class.focused]=\"focusedIndex === i\"\n            [class.selected]=\"selectedValue === entry.value\"\n            (click)=\"onDropDownItemClick(entry)\">\n                {{ entry.display }}\n            </li>\n            <!-- eslint-enable @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n        </ul>\n    </div>\n</ng-template>", styles: [":host-context{grid-column:span 2 / span 2;display:grid;grid-template-columns:subgrid}.catalog-container{position:relative}.catalog-container .clear-button{position:absolute;right:1.75rem;top:50%;display:flex;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));align-items:center;justify-content:center;height:1.25rem;width:1.25rem;border-radius:9999px;--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.catalog-container .clear-button:hover{--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.catalog-container .clear-button{z-index:10;cursor:pointer;border-style:none;background-color:transparent;padding:0;font-size:.875rem;line-height:1.25rem;line-height:1}.catalog-container:has(.clear-button) lib-form-input ::ng-deep input{padding-right:3.5rem}div lib-form-input ::ng-deep input{cursor:pointer;text-overflow:ellipsis;background-size:1.125rem 1.125rem;background-position:right .5625rem center;background-repeat:no-repeat;padding-right:2.25rem;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='%239ca3af' d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3e%3c/svg%3e\")}.dropdown-container{width:100%;-webkit-user-select:none;user-select:none}.dropdown{overflow-y:auto;overscroll-behavior:none;border-radius:.375rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(156 163 175 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);max-height:13rem}.dropdown li{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:.25rem .5rem}.dropdown li:not(.dropdown-item){font-size:.875rem;line-height:1.25rem}.dropdown li .retry{width:100%;cursor:pointer;border-style:none;background-color:transparent;padding:0;text-align:left;text-decoration-line:underline;color:inherit;font:inherit}.dropdown li.dropdown-item{cursor:pointer}.dropdown li.dropdown-item:nth-child(2n){background-color:#f5f5f4b3}.dropdown li.dropdown-item.selected{background-color:#59a5db33;font-weight:700}.dropdown li.dropdown-item.focused{background-color:#59a5db4d;outline:2px solid transparent;outline-offset:2px}.dropdown li.dropdown-item:hover,.dropdown li.dropdown-item:nth-child(2n):hover,.dropdown li.dropdown-item.selected:hover,.dropdown li.dropdown-item.focused:hover{background-color:#59a5db80}lib-form-input-group{flex-basis:100%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { bodyMouseDown: [{
                 type: HostListener,
                 args: ['body:mousedown', ['$event']]
@@ -2299,7 +2299,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\"\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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: DataGridRowComponent, isStandalone: true, selector: "lib-data-grid-row", inputs: { disabled: "disabled", isFirstRow: "isFirstRow", rowData: "rowData" }, outputs: { selectionResized: "selectionResized" }, host: { listeners: { "click": "setFocus()" }, properties: { "class.focused": "dataGridDataset.focusedRow === rowData", "class.selected": "dataGridDataset.isKeySelected(rowKey)" } }, usesInheritance: true, ngImport: i0, template: "<!-- A <label> rather than a clickable <div>: clicking anywhere in the cell still\n     reaches the checkbox, natively. The click handler is a mouse-only convenience;\n     the keyboard path is the nested checkbox, which is focusable and toggles with\n     Space on its own. -->\n<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n<label *ngIf=\"dataGridDataset.configs.multiSelect\"\nclass=\"cell selection\"\n(click)=\"onToggleSelection()\"\n(onResize)=\"onResizeSelection($event)\">\n    <input class=\"form-input\"\n    type=\"checkbox\"\n    [attr.disabled]=\"disabled\"\n    [(ngModel)]=\"selected\" />\n</label>\n\n<div #cell\n*ngFor=\"let column of columns; index as i\"\nclass=\"cell\"\n[class.disabled]=\"disabled\"\n[ngClass]=\"column.customClass\">\n    <div *ngIf=\"isFirstRow\"\n    class=\"spacer\"\n    (onResize)=\"onResize(i, $event)\"></div>\n\n    <ng-container *ngTemplateOutlet=\"column.template ? column.template : simpleTemplate; context: { rowData: rowData, column: column }\">\n    </ng-container>\n</div>\n\n<ng-template #simpleTemplate let-rowData=\"rowData\" let-column=\"column\">\n    <span>{{ getValue(column.field) }}</span>\n</ng-template>", styles: [":host{grid-column:1 / -1;display:grid;grid-template-columns:subgrid}.cell{position:relative;align-content:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cell.disabled{pointer-events:none;cursor:default;overflow:hidden;text-overflow:ellipsis;opacity:.6}.cell input{vertical-align:super}.cell.selection{display:flex;align-items:center}.spacer{position:absolute;inset:0;z-index:-1;height:0px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: NgxResizeObserverModule }, { kind: "directive", type: i2.NgxResizeObserverDirective, selector: "[onResize]", inputs: ["resizeBoxModel"], outputs: ["onResize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: DataGridRowComponent, decorators: [{
             type: Component,
@@ -2313,7 +2313,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
                         NgFor,
                         NgTemplateOutlet,
                         NgxResizeObserverModule,
-                    ], 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"] }]
+                    ], template: "<!-- A <label> rather than a clickable <div>: clicking anywhere in the cell still\n     reaches the checkbox, natively. The click handler is a mouse-only convenience;\n     the keyboard path is the nested checkbox, which is focusable and toggles with\n     Space on its own. -->\n<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n<label *ngIf=\"dataGridDataset.configs.multiSelect\"\nclass=\"cell selection\"\n(click)=\"onToggleSelection()\"\n(onResize)=\"onResizeSelection($event)\">\n    <input class=\"form-input\"\n    type=\"checkbox\"\n    [attr.disabled]=\"disabled\"\n    [(ngModel)]=\"selected\" />\n</label>\n\n<div #cell\n*ngFor=\"let column of columns; index as i\"\nclass=\"cell\"\n[class.disabled]=\"disabled\"\n[ngClass]=\"column.customClass\">\n    <div *ngIf=\"isFirstRow\"\n    class=\"spacer\"\n    (onResize)=\"onResize(i, $event)\"></div>\n\n    <ng-container *ngTemplateOutlet=\"column.template ? column.template : simpleTemplate; context: { rowData: rowData, column: column }\">\n    </ng-container>\n</div>\n\n<ng-template #simpleTemplate let-rowData=\"rowData\" let-column=\"column\">\n    <span>{{ getValue(column.field) }}</span>\n</ng-template>", styles: [":host{grid-column:1 / -1;display:grid;grid-template-columns:subgrid}.cell{position:relative;align-content:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cell.disabled{pointer-events:none;cursor:default;overflow:hidden;text-overflow:ellipsis;opacity:.6}.cell input{vertical-align:super}.cell.selection{display:flex;align-items:center}.spacer{position:absolute;inset:0;z-index:-1;height:0px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { disabled: [{
                 type: Input
             }], isFirstRow: [{
@@ -2638,13 +2638,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\">\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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: GroupAccordionComponent, isStandalone: true, selector: "lib-group-accordion", inputs: { label: "label" }, host: { properties: { "class.collapsed": "collapsed" } }, viewQueries: [{ propertyName: "containerElementRef", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "<div class=\"title\">\n    <h6 role=\"button\"\n    tabindex=\"0\"\n    [attr.aria-expanded]=\"!collapsed\"\n    (click)=\"onToggle()\"\n    (keydown.enter)=\"onToggle()\"\n    (keydown.space)=\"onToggle(); $event.preventDefault()\"><i class=\"fas fa-chevron-down fa-sm\"></i>{{ this.label }}</h6>\n</div>\n\n<div #container class=\"content animate\"\n[ngStyle]=\"maxHeight >= 0 && {\n    'height.px': maxHeight,\n    'max-height.px': maxHeight\n} || null\">\n    <div #maxHeighContainer>\n        <ng-content></ng-content>\n    </div>\n</div>", styles: [":host-context{margin-bottom:1rem;display:flex;flex-direction:column}:host-context.collapsed i{--tw-rotate: -90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}:host-context.collapsed .content{max-height:0px!important;overflow:hidden!important}:host-context:not(.collapsed) .content{animation:show .15s}.title{-webkit-user-select:none;user-select:none}.title i{margin-right:.5rem;padding-top:.25rem;--tw-text-opacity: 1;color:rgb(100 116 139 / var(--tw-text-opacity, 1));transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.title h6{margin-bottom:0;display:inline;height:3rem;cursor:pointer;text-overflow:ellipsis;white-space:nowrap;padding-left:.25rem;padding-right:.5rem;font-size:1.125rem;text-transform:uppercase;line-height:3rem}.content{box-sizing:content-box;flex-grow:1;overflow-y:hidden;padding-left:.25rem;padding-right:.25rem}.content.animate{transition-property:max-height;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.content div{padding-bottom:.25rem}@media (min-width: 1024px){.content div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}}@media (min-width: 1280px){.content div{grid-template-columns:repeat(3,minmax(0,1fr))}}.content div{height:100%}@keyframes show{0%{overflow:hidden}99%{overflow:hidden}to{overflow:auto}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: GroupAccordionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-group-accordion', host: { '[class.collapsed]': 'collapsed' }, imports: [
                         NgStyle,
-                    ], template: "<div class=\"title\">\n    <h6 (click)=\"onToggle()\"><i class=\"fas fa-chevron-down fa-sm\"></i>{{ this.label }}</h6>\n</div>\n\n<div #container class=\"content animate\"\n[ngStyle]=\"maxHeight >= 0 && {\n    'height.px': maxHeight,\n    'max-height.px': maxHeight\n} || null\">\n    <div #maxHeighContainer>\n        <ng-content></ng-content>\n    </div>\n</div>", styles: [":host-context{margin-bottom:1rem;display:flex;flex-direction:column}:host-context.collapsed i{--tw-rotate: -90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}:host-context.collapsed .content{max-height:0px!important;overflow:hidden!important}:host-context:not(.collapsed) .content{animation:show .15s}.title{-webkit-user-select:none;user-select:none}.title i{margin-right:.5rem;padding-top:.25rem;--tw-text-opacity: 1;color:rgb(100 116 139 / var(--tw-text-opacity, 1));transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.title h6{margin-bottom:0;display:inline;height:3rem;cursor:pointer;text-overflow:ellipsis;white-space:nowrap;padding-left:.25rem;padding-right:.5rem;font-size:1.125rem;text-transform:uppercase;line-height:3rem}.content{box-sizing:content-box;flex-grow:1;overflow-y:hidden;padding-left:.25rem;padding-right:.25rem}.content.animate{transition-property:max-height;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.content div{padding-bottom:.25rem}@media (min-width: 1024px){.content div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}}@media (min-width: 1280px){.content div{grid-template-columns:repeat(3,minmax(0,1fr))}}.content div{height:100%}@keyframes show{0%{overflow:hidden}99%{overflow:hidden}to{overflow:auto}}\n"] }]
+                    ], template: "<div class=\"title\">\n    <h6 role=\"button\"\n    tabindex=\"0\"\n    [attr.aria-expanded]=\"!collapsed\"\n    (click)=\"onToggle()\"\n    (keydown.enter)=\"onToggle()\"\n    (keydown.space)=\"onToggle(); $event.preventDefault()\"><i class=\"fas fa-chevron-down fa-sm\"></i>{{ this.label }}</h6>\n</div>\n\n<div #container class=\"content animate\"\n[ngStyle]=\"maxHeight >= 0 && {\n    'height.px': maxHeight,\n    'max-height.px': maxHeight\n} || null\">\n    <div #maxHeighContainer>\n        <ng-content></ng-content>\n    </div>\n</div>", styles: [":host-context{margin-bottom:1rem;display:flex;flex-direction:column}:host-context.collapsed i{--tw-rotate: -90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}:host-context.collapsed .content{max-height:0px!important;overflow:hidden!important}:host-context:not(.collapsed) .content{animation:show .15s}.title{-webkit-user-select:none;user-select:none}.title i{margin-right:.5rem;padding-top:.25rem;--tw-text-opacity: 1;color:rgb(100 116 139 / var(--tw-text-opacity, 1));transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.title h6{margin-bottom:0;display:inline;height:3rem;cursor:pointer;text-overflow:ellipsis;white-space:nowrap;padding-left:.25rem;padding-right:.5rem;font-size:1.125rem;text-transform:uppercase;line-height:3rem}.content{box-sizing:content-box;flex-grow:1;overflow-y:hidden;padding-left:.25rem;padding-right:.25rem}.content.animate{transition-property:max-height;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.content div{padding-bottom:.25rem}@media (min-width: 1024px){.content div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}}@media (min-width: 1280px){.content div{grid-template-columns:repeat(3,minmax(0,1fr))}}.content div{height:100%}@keyframes show{0%{overflow:hidden}99%{overflow:hidden}to{overflow:auto}}\n"] }]
         }], propDecorators: { containerElementRef: [{
                 type: ViewChild,
                 args: ['container']
@@ -2774,14 +2774,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\">\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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: GroupScrollSpyComponent, isStandalone: true, selector: "lib-group-scroll-spy", queries: [{ propertyName: "sections", predicate: GroupAccordionComponent, descendants: true }], viewQueries: [{ propertyName: "scrollSpy", first: true, predicate: ScrollSpyDirective, descendants: true }], ngImport: i0, template: "<div class=\"scroll-spy\">\n    <a *ngFor=\"let title of titles; let i = index\"\n        class=\"item\" [class.active]=\"i === activeSection\"\n        role=\"button\"\n        tabindex=\"0\"\n        [attr.aria-current]=\"i === activeSection\"\n        (click)=\"scrollTo(i)\"\n        (keydown.enter)=\"scrollTo(i)\"\n        (keydown.space)=\"scrollTo(i); $event.preventDefault()\"\n    >{{ title }}</a>\n</div>\n\n<div class=\"content\" libScrollSpy\n[class.no-scroll-spy]=\"titles.length === 0\"\n[spiedTags]=\"['lib-group-accordion']\"\n(activeSectionChange)=\"activeSectionChanged($event)\"\n>\n    <ng-content></ng-content>\n</div>", styles: [":host-context{position:relative;display:flex;height:100%;max-height:100%;min-height:100%;flex-grow:1;overflow:hidden}.content{display:flex;flex-grow:1;flex-direction:column;overflow:auto;scroll-behavior:smooth;padding:.75rem .75rem .25rem}@media (min-width: 768px){.content{padding-right:10.5rem}.content.no-scroll-spy{padding-right:.75rem}}.scroll-spy{position:absolute;top:.75rem;right:.75rem;display:none;width:9rem;-webkit-user-select:none;user-select:none;flex-direction:column}@media (min-width: 768px){.scroll-spy{display:flex}}.scroll-spy a{cursor:pointer;border-left-width:2px;--tw-border-opacity: 1;border-left-color:rgb(209 213 219 / var(--tw-border-opacity, 1));padding:.5rem 1rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.scroll-spy a.active{--tw-border-opacity: 1;border-left-color:rgb(0 107 182 / var(--tw-border-opacity, 1));--tw-text-opacity: 1;color:rgb(0 107 182 / var(--tw-text-opacity, 1))}.scroll-spy a:active{background-color:#006bb61a}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: ScrollSpyDirective, selector: "[libScrollSpy]", inputs: ["spiedTags"], outputs: ["activeSectionChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: GroupScrollSpyComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-group-scroll-spy', imports: [
                         NgFor,
                         ScrollSpyDirective,
-                    ], template: "<div class=\"scroll-spy\">\n    <a *ngFor=\"let title of titles; let i = index\"\n        class=\"item\" [class.active]=\"i === activeSection\"\n        (click)=\"scrollTo(i)\"\n    >{{ title }}</a>\n</div>\n\n<div class=\"content\" libScrollSpy\n[class.no-scroll-spy]=\"titles.length === 0\"\n[spiedTags]=\"['lib-group-accordion']\"\n(activeSectionChange)=\"activeSectionChanged($event)\"\n>\n    <ng-content></ng-content>\n</div>", styles: [":host-context{position:relative;display:flex;height:100%;max-height:100%;min-height:100%;flex-grow:1;overflow:hidden}.content{display:flex;flex-grow:1;flex-direction:column;overflow:auto;scroll-behavior:smooth;padding:.75rem .75rem .25rem}@media (min-width: 768px){.content{padding-right:10.5rem}.content.no-scroll-spy{padding-right:.75rem}}.scroll-spy{position:absolute;top:.75rem;right:.75rem;display:none;width:9rem;-webkit-user-select:none;user-select:none;flex-direction:column}@media (min-width: 768px){.scroll-spy{display:flex}}.scroll-spy a{cursor:pointer;border-left-width:2px;--tw-border-opacity: 1;border-left-color:rgb(209 213 219 / var(--tw-border-opacity, 1));padding:.5rem 1rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.scroll-spy a.active{--tw-border-opacity: 1;border-left-color:rgb(0 107 182 / var(--tw-border-opacity, 1));--tw-text-opacity: 1;color:rgb(0 107 182 / var(--tw-text-opacity, 1))}.scroll-spy a:active{background-color:#006bb61a}\n"] }]
+                    ], template: "<div class=\"scroll-spy\">\n    <a *ngFor=\"let title of titles; let i = index\"\n        class=\"item\" [class.active]=\"i === activeSection\"\n        role=\"button\"\n        tabindex=\"0\"\n        [attr.aria-current]=\"i === activeSection\"\n        (click)=\"scrollTo(i)\"\n        (keydown.enter)=\"scrollTo(i)\"\n        (keydown.space)=\"scrollTo(i); $event.preventDefault()\"\n    >{{ title }}</a>\n</div>\n\n<div class=\"content\" libScrollSpy\n[class.no-scroll-spy]=\"titles.length === 0\"\n[spiedTags]=\"['lib-group-accordion']\"\n(activeSectionChange)=\"activeSectionChanged($event)\"\n>\n    <ng-content></ng-content>\n</div>", styles: [":host-context{position:relative;display:flex;height:100%;max-height:100%;min-height:100%;flex-grow:1;overflow:hidden}.content{display:flex;flex-grow:1;flex-direction:column;overflow:auto;scroll-behavior:smooth;padding:.75rem .75rem .25rem}@media (min-width: 768px){.content{padding-right:10.5rem}.content.no-scroll-spy{padding-right:.75rem}}.scroll-spy{position:absolute;top:.75rem;right:.75rem;display:none;width:9rem;-webkit-user-select:none;user-select:none;flex-direction:column}@media (min-width: 768px){.scroll-spy{display:flex}}.scroll-spy a{cursor:pointer;border-left-width:2px;--tw-border-opacity: 1;border-left-color:rgb(209 213 219 / var(--tw-border-opacity, 1));padding:.5rem 1rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.scroll-spy a.active{--tw-border-opacity: 1;border-left-color:rgb(0 107 182 / var(--tw-border-opacity, 1));--tw-text-opacity: 1;color:rgb(0 107 182 / var(--tw-text-opacity, 1))}.scroll-spy a:active{background-color:#006bb61a}\n"] }]
         }], propDecorators: { scrollSpy: [{
                 type: ViewChild,
                 args: [ScrollSpyDirective]
@@ -2997,7 +2997,7 @@ class MultiEditorComponent extends ModalComponent {
     onNewClick() {
         const fakeNewID = (Math.floor(Math.random() * (999999 - 100000)) + 100000) * -1;
         const newModel = this.multiEditorDataset.newData(fakeNewID);
-        if (!!newModel) {
+        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;
@@ -3074,7 +3074,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\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" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: MultiEditorComponent, isStandalone: true, selector: "lib-multi-editor", inputs: { addButtonLabel: "addButtonLabel", formGroup: "formGroup", removeButtonLabel: "removeButtonLabel", showAddButton: "showAddButton", showDeleteButton: "showDeleteButton" }, viewQueries: [{ propertyName: "modal", first: true, predicate: ModalComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-modal\n[closeButtonText]=\"closeButtonText | translate\"\n[dialog]=\"dialog\"\n[modalProcessing]=\"modalProcessing\"\n[position]=\"position\"\n[size]=\"size\"\n[title]=\"title\">\n    <div body class=\"body-content\">\n        <div class=\"data-grid\">\n            <lib-data-grid [disabled]=\"modalProcessing\" [lazyLoadRows]=\"true\"></lib-data-grid>\n        </div>\n\n        <div class=\"data\">\n            <div class=\"buttons\">\n                <button *ngIf=\"showAddButton\"\n                class=\"btn gray-500\"\n                type=\"button\"\n                [class.disabled]=\"modalProcessing || gridLoading || formLoading || formGroup.invalid\"\n                [disabled]=\"modalProcessing || gridLoading || formLoading || formGroup.invalid\"\n                (click)=\"onNewClick()\">\n                    {{ addButtonLabel }}\n                </button>\n\n                <button *ngIf=\"showDeleteButton && hasSelectedKey\"\n                class=\"btn red-500\"\n                type=\"button\"\n                [class.disabled]=\"modalProcessing || gridLoading || formLoading\"\n                [disabled]=\"modalProcessing || gridLoading || formLoading\"\n                (click)=\"onDeleteClick()\">\n                    {{ removeButtonLabel }}\n                </button>\n            </div>\n\n            <lib-form-group>\n                <ng-content></ng-content>\n            </lib-form-group>\n        </div>\n    </div>\n\n    <div footer>\n        <button\n        class=\"btn blue-500\"\n        type=\"button\"\n        [class.disabled]=\"gridLoading || formLoading\"\n        [class.loading]=\"modalProcessing\"\n        (click)=\"onSaveClick()\">\n            {{ 'Button-Modal-MultiEditor-Confirm' | translate }}\n        </button>\n    </div>\n</lib-modal>", styles: [".body-content{display:grid;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;gap:1rem;overflow:clip;overflow-clip-margin:4px}.data-grid{display:grid;-webkit-user-select:none;user-select:none;overflow:hidden}.data{display:grid;-webkit-user-select:none;user-select:none;overflow:clip;overflow-clip-margin:4px;min-height:24rem;grid-template-rows:min-content minmax(0,1fr);gap:.5rem}.data .buttons{display:grid;grid-auto-columns:auto;grid-auto-flow:column;gap:.5rem;border-bottom-color:#d1d5dbe6}\n"], dependencies: [{ kind: "component", type: DataGridComponent, selector: "lib-data-grid", inputs: ["disabled", "lazyLoadRows", "showButtons"] }, { kind: "component", type: ModalComponent, selector: "lib-modal", inputs: ["closeButtonText", "dialog", "modalProcessing", "position", "size", "title"], outputs: ["closed"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormGroupComponent, selector: "lib-form-group", inputs: ["shouldExpand", "label"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MultiEditorComponent, decorators: [{
             type: Component,
@@ -3084,7 +3084,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
                         NgIf,
                         FormGroupComponent,
                         TranslatePipe,
-                    ], template: "<lib-modal\n[closeButtonText]=\"closeButtonText | translate\"\n[dialog]=\"dialog\"\n[modalProcessing]=\"modalProcessing\"\n[position]=\"position\"\n[size]=\"size\"\n[title]=\"title\">\n    <div body class=\"body-content\">\n        <div class=\"data-grid\">\n            <lib-data-grid [disabled]=\"modalProcessing\" [lazyLoadRows]=\"true\"></lib-data-grid>\n        </div>\n\n        <div class=\"data\">\n            <div class=\"buttons\">\n                <a *ngIf=\"showAddButton\"\n                class=\"btn gray-500\"\n                [class.disabled]=\"modalProcessing || gridLoading || formLoading || formGroup.invalid\"\n                (click)=\"onNewClick()\">\n                    {{ addButtonLabel }}\n                </a>\n\n                <a *ngIf=\"showDeleteButton && hasSelectedKey\"\n                class=\"btn red-500\"\n                [class.disabled]=\"modalProcessing || gridLoading || formLoading\"\n                (click)=\"onDeleteClick()\">\n                    {{ removeButtonLabel }}\n                </a>\n            </div>\n\n            <lib-form-group>\n                <ng-content></ng-content>\n            </lib-form-group>\n        </div>\n    </div>\n\n    <div footer>\n        <button\n        class=\"btn blue-500\"\n        type=\"button\"\n        [class.disabled]=\"gridLoading || formLoading\"\n        [class.loading]=\"modalProcessing\"\n        (click)=\"onSaveClick()\">\n            {{ 'Button-Modal-MultiEditor-Confirm' | translate }}\n        </button>\n    </div>\n</lib-modal>", styles: [".body-content{display:grid;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;gap:1rem;overflow:clip;overflow-clip-margin:4px}.data-grid{display:grid;-webkit-user-select:none;user-select:none;overflow:hidden}.data{display:grid;-webkit-user-select:none;user-select:none;overflow:clip;overflow-clip-margin:4px;min-height:24rem;grid-template-rows:min-content minmax(0,1fr);gap:.5rem}.data .buttons{display:grid;grid-auto-columns:auto;grid-auto-flow:column;gap:.5rem;border-bottom-color:#d1d5dbe6}\n"] }]
+                    ], template: "<lib-modal\n[closeButtonText]=\"closeButtonText | translate\"\n[dialog]=\"dialog\"\n[modalProcessing]=\"modalProcessing\"\n[position]=\"position\"\n[size]=\"size\"\n[title]=\"title\">\n    <div body class=\"body-content\">\n        <div class=\"data-grid\">\n            <lib-data-grid [disabled]=\"modalProcessing\" [lazyLoadRows]=\"true\"></lib-data-grid>\n        </div>\n\n        <div class=\"data\">\n            <div class=\"buttons\">\n                <button *ngIf=\"showAddButton\"\n                class=\"btn gray-500\"\n                type=\"button\"\n                [class.disabled]=\"modalProcessing || gridLoading || formLoading || formGroup.invalid\"\n                [disabled]=\"modalProcessing || gridLoading || formLoading || formGroup.invalid\"\n                (click)=\"onNewClick()\">\n                    {{ addButtonLabel }}\n                </button>\n\n                <button *ngIf=\"showDeleteButton && hasSelectedKey\"\n                class=\"btn red-500\"\n                type=\"button\"\n                [class.disabled]=\"modalProcessing || gridLoading || formLoading\"\n                [disabled]=\"modalProcessing || gridLoading || formLoading\"\n                (click)=\"onDeleteClick()\">\n                    {{ removeButtonLabel }}\n                </button>\n            </div>\n\n            <lib-form-group>\n                <ng-content></ng-content>\n            </lib-form-group>\n        </div>\n    </div>\n\n    <div footer>\n        <button\n        class=\"btn blue-500\"\n        type=\"button\"\n        [class.disabled]=\"gridLoading || formLoading\"\n        [class.loading]=\"modalProcessing\"\n        (click)=\"onSaveClick()\">\n            {{ 'Button-Modal-MultiEditor-Confirm' | translate }}\n        </button>\n    </div>\n</lib-modal>", styles: [".body-content{display:grid;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;gap:1rem;overflow:clip;overflow-clip-margin:4px}.data-grid{display:grid;-webkit-user-select:none;user-select:none;overflow:hidden}.data{display:grid;-webkit-user-select:none;user-select:none;overflow:clip;overflow-clip-margin:4px;min-height:24rem;grid-template-rows:min-content minmax(0,1fr);gap:.5rem}.data .buttons{display:grid;grid-auto-columns:auto;grid-auto-flow:column;gap:.5rem;border-bottom-color:#d1d5dbe6}\n"] }]
         }], ctorParameters: () => [], propDecorators: { modal: [{
                 type: ViewChild,
                 args: [ModalComponent]
@@ -3143,7 +3143,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\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" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: MultiSelectResultGridComponent, isStandalone: true, selector: "lib-multi-select-result-grid", inputs: { isDisabled: "isDisabled", template: "template" }, host: { classAttribute: "flex-grow" }, usesInheritance: true, ngImport: i0, template: "<div\nclass=\"body\"\n(scroll)=\"onScrolled($event)\">\n    <div\n    class=\"row\"\n    *ngFor=\"let row of resultDataset.displayedRows; let i = index\">\n        <div class=\"cell\">\n            <button\n            class=\"remove\"\n            type=\"button\"\n            [class.disabled]=\"isDisabled\"\n            [disabled]=\"isDisabled\"\n            (click)=\"onItemRemoved(i)\">\n                <i class=\"fas fa-times\"></i>\n            </button>\n        </div> \n\n        <div class=\"cell\">\n            <div>\n                <ng-container *ngTemplateOutlet=\"template; context: { rowData: row }\">\n                </ng-container>\n            </div>\n        </div>\n    </div>\n\n    <div\n    class=\"loading\"\n    *ngIf=\"isLoading\">\n        <svg [ngClass]=\"''\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n            <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n            <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n        </svg>\n\n        <span>\n            {{ resultDataset.configs.loadingDisplayText ?? '' | translate }} \n        </span>\n    </div>\n</div>", styles: [":host-context{display:grid;-webkit-user-select:none;user-select:none;grid-template-rows:auto 1fr;overflow:hidden}:host-context:not(.no-borders){border-radius:.5rem;border-width:1px;border-color:#d1d5dbe6;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.body{overflow:overlay}.body .row{border-bottom-width:1px;border-color:#cbd5e180;margin-top:0;cursor:pointer;display:grid;grid-auto-flow:column;grid-template-columns:min-content minmax(0,1fr);gap:1rem;padding:.5rem 1rem}.body .row:nth-child(2n){background-color:#f8fafcb3}.body .row:hover{background-color:#bfdbfe33}.body .row.focused{z-index:1;border-color:#94a3b899}.body .row.selected{position:relative;z-index:10;--tw-border-opacity: 1;border-color:rgb(147 197 253 / var(--tw-border-opacity, 1));background-color:#bfdbfe4d}.body .row.selected:hover{background-color:#bfdbfe66}.body .row .cell{white-space:nowrap;display:flex;align-items:center}.body .row .cell a{padding-left:.5rem;padding-right:.5rem;font-size:1.125rem;line-height:1.75rem}.body .row .cell a:not(.disabled){cursor:pointer}.body .row .cell a.disabled{--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.body .row .cell .remove{--tw-text-opacity: 1;color:rgb(239 68 68 / var(--tw-text-opacity, 1));cursor:pointer;border-style:none;background-color:transparent;padding:0}.body .row .cell.disabled{pointer-events:none;cursor:default;opacity:.6}.body .row .cell>*{overflow:hidden;text-overflow:ellipsis}.body .row .cell div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.body .loading{margin-bottom:.5rem;display:flex;height:2.5rem;align-items:center;border-bottom-width:1px;border-color:#cbd5e180;padding-left:1rem;padding-right:1rem}.body .loading svg{height:1.5rem;width:1.5rem}@keyframes spin{to{transform:rotate(360deg)}}.body .loading svg{animation:spin 1s linear infinite;transition-property:opacity;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.body .loading span{padding-left:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MultiSelectResultGridComponent, decorators: [{
             type: Component,
@@ -3154,7 +3154,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
                         NgFor,
                         NgIf,
                         TranslatePipe,
-                    ], template: "<div\nclass=\"body\"\n(scroll)=\"onScrolled($event)\">\n    <div\n    class=\"row\"\n    *ngFor=\"let row of resultDataset.displayedRows; let i = index\">\n        <div class=\"cell\">\n            <a\n            class=\"remove\"\n            [class.disabled]=\"isDisabled\"\n            (click)=\"onItemRemoved(i)\">\n                <i class=\"fas fa-times\"></i>\n            </a>\n        </div> \n\n        <div class=\"cell\">\n            <div>\n                <ng-container *ngTemplateOutlet=\"template; context: { rowData: row }\">\n                </ng-container>\n            </div>\n        </div>\n    </div>\n\n    <div\n    class=\"loading\"\n    *ngIf=\"isLoading\">\n        <svg [ngClass]=\"''\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n            <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n            <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n        </svg>\n\n        <span>\n            {{ resultDataset.configs.loadingDisplayText ?? '' | translate }} \n        </span>\n    </div>\n</div>", styles: [":host-context{display:grid;-webkit-user-select:none;user-select:none;grid-template-rows:auto 1fr;overflow:hidden}:host-context:not(.no-borders){border-radius:.5rem;border-width:1px;border-color:#d1d5dbe6;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.body{overflow:overlay}.body .row{border-bottom-width:1px;border-color:#cbd5e180;margin-top:0;cursor:pointer;display:grid;grid-auto-flow:column;grid-template-columns:min-content minmax(0,1fr);gap:1rem;padding:.5rem 1rem}.body .row:nth-child(2n){background-color:#f8fafcb3}.body .row:hover{background-color:#bfdbfe33}.body .row.focused{z-index:1;border-color:#94a3b899}.body .row.selected{position:relative;z-index:10;--tw-border-opacity: 1;border-color:rgb(147 197 253 / var(--tw-border-opacity, 1));background-color:#bfdbfe4d}.body .row.selected:hover{background-color:#bfdbfe66}.body .row .cell{white-space:nowrap;display:flex;align-items:center}.body .row .cell a{padding-left:.5rem;padding-right:.5rem;font-size:1.125rem;line-height:1.75rem}.body .row .cell a:not(.disabled){cursor:pointer}.body .row .cell a.disabled{--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.body .row .cell .remove{--tw-text-opacity: 1;color:rgb(239 68 68 / var(--tw-text-opacity, 1))}.body .row .cell.disabled{pointer-events:none;cursor:default;opacity:.6}.body .row .cell>*{overflow:hidden;text-overflow:ellipsis}.body .row .cell div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.body .loading{margin-bottom:.5rem;display:flex;height:2.5rem;align-items:center;border-bottom-width:1px;border-color:#cbd5e180;padding-left:1rem;padding-right:1rem}.body .loading svg{height:1.5rem;width:1.5rem}@keyframes spin{to{transform:rotate(360deg)}}.body .loading svg{animation:spin 1s linear infinite;transition-property:opacity;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.body .loading span{padding-left:.5rem}\n"] }]
+                    ], template: "<div\nclass=\"body\"\n(scroll)=\"onScrolled($event)\">\n    <div\n    class=\"row\"\n    *ngFor=\"let row of resultDataset.displayedRows; let i = index\">\n        <div class=\"cell\">\n            <button\n            class=\"remove\"\n            type=\"button\"\n            [class.disabled]=\"isDisabled\"\n            [disabled]=\"isDisabled\"\n            (click)=\"onItemRemoved(i)\">\n                <i class=\"fas fa-times\"></i>\n            </button>\n        </div> \n\n        <div class=\"cell\">\n            <div>\n                <ng-container *ngTemplateOutlet=\"template; context: { rowData: row }\">\n                </ng-container>\n            </div>\n        </div>\n    </div>\n\n    <div\n    class=\"loading\"\n    *ngIf=\"isLoading\">\n        <svg [ngClass]=\"''\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n            <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n            <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n        </svg>\n\n        <span>\n            {{ resultDataset.configs.loadingDisplayText ?? '' | translate }} \n        </span>\n    </div>\n</div>", styles: [":host-context{display:grid;-webkit-user-select:none;user-select:none;grid-template-rows:auto 1fr;overflow:hidden}:host-context:not(.no-borders){border-radius:.5rem;border-width:1px;border-color:#d1d5dbe6;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.body{overflow:overlay}.body .row{border-bottom-width:1px;border-color:#cbd5e180;margin-top:0;cursor:pointer;display:grid;grid-auto-flow:column;grid-template-columns:min-content minmax(0,1fr);gap:1rem;padding:.5rem 1rem}.body .row:nth-child(2n){background-color:#f8fafcb3}.body .row:hover{background-color:#bfdbfe33}.body .row.focused{z-index:1;border-color:#94a3b899}.body .row.selected{position:relative;z-index:10;--tw-border-opacity: 1;border-color:rgb(147 197 253 / var(--tw-border-opacity, 1));background-color:#bfdbfe4d}.body .row.selected:hover{background-color:#bfdbfe66}.body .row .cell{white-space:nowrap;display:flex;align-items:center}.body .row .cell a{padding-left:.5rem;padding-right:.5rem;font-size:1.125rem;line-height:1.75rem}.body .row .cell a:not(.disabled){cursor:pointer}.body .row .cell a.disabled{--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.body .row .cell .remove{--tw-text-opacity: 1;color:rgb(239 68 68 / var(--tw-text-opacity, 1));cursor:pointer;border-style:none;background-color:transparent;padding:0}.body .row .cell.disabled{pointer-events:none;cursor:default;opacity:.6}.body .row .cell>*{overflow:hidden;text-overflow:ellipsis}.body .row .cell div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.body .loading{margin-bottom:.5rem;display:flex;height:2.5rem;align-items:center;border-bottom-width:1px;border-color:#cbd5e180;padding-left:1rem;padding-right:1rem}.body .loading svg{height:1.5rem;width:1.5rem}@keyframes spin{to{transform:rotate(360deg)}}.body .loading svg{animation:spin 1s linear infinite;transition-property:opacity;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.body .loading span{padding-left:.5rem}\n"] }]
         }], ctorParameters: () => [], propDecorators: { isDisabled: [{
                 type: Input
             }], template: [{
@@ -3381,7 +3381,7 @@ class SidebarItemComponent extends BaseComponent {
                 this.isLoading = false;
                 this.hasFailed = false;
                 this.updateSubMenuHeight();
-                if (!!this.menu.parent) {
+                if (this.menu.parent) {
                     this.sidebarService.childrenInitialized.emit(this.menu.parent);
                 }
                 this.changeDetectorRef.detectChanges();
@@ -3419,7 +3419,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>\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" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: SidebarItemComponent, isStandalone: true, selector: "lib-sidebar-item", inputs: { isLast: "isLast", level: "level", menu: "menu" }, host: { properties: { "class.active": "isActive", "class.expanded": "!isCollapsed", "class.first-level": "level === 0", "class.last-child": "isLast", "class.selected": "isSelected" } }, viewQueries: [{ propertyName: "menuContainer", first: true, predicate: ["menuContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<li>\n    <div #menuContainer\n    [class.external]=\"opensInNewBrowserTab\"\n    [class.failed]=\"hasFailed\"\n    [class.loading]=\"isLoading\"\n    [class.parent]=\"isParent\"\n    [class.selected]=\"isSelected\"\n    role=\"button\"\n    tabindex=\"0\"\n    [attr.aria-current]=\"isSelected\"\n    (click)=\"onSelectItem()\"\n    (keydown.enter)=\"onSelectItem()\"\n    (keydown.space)=\"onSelectItem(); $event.preventDefault()\">\n        <a [attr.title]=\"opensInNewBrowserTab ? externalLinkText : null\">\n            <i *ngIf=\"hasIcon && level === 0\" class=\"fa-solid fa-fw {{ menu.icon }}\"></i>\n            <span>{{ menu.label | translate }}</span>\n        </a>\n\n        <div class=\"loading\" *ngIf=\"isParent\">\n            <svg class=\"animate-spin text-white\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n                <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n                <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n            </svg>\n        </div>\n    </div>\n\n    <ul *ngIf=\"isParent\"\n    [class.open]=\"isSelected\"\n    [ngStyle]=\"{\n        'height.px': childHeight,\n        'max-height.px': childHeight\n    }\">\n        <lib-sidebar-item *ngFor=\"let child of menu.children; trackBy: trackByFn; let last = last\"\n        [menu]=\"child\"\n        [level]=\"level+1\"\n        [isLast]=\"last\">\n        </lib-sidebar-item>\n    </ul>\n</li>", styles: ["@charset \"UTF-8\";:host{position:relative;display:block}@media (max-width: 767px){:host:not(.active) li>ul{height:0px!important}}@media (min-width: 768px){:host:not(.expanded):not(.active) li>ul{height:0px!important}:host.expanded li>div{margin-inline:.5rem}:host.expanded li>div.external:after{opacity:1}:host.expanded li>div.external a{padding-right:2rem}:host.expanded li>div.parent:not(.loading):after{opacity:1}:host.expanded li>div.parent a{padding-right:2rem}:host.expanded li>div.parent.loading .loading{opacity:1!important}:host.expanded li>div a i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.expanded li>div a span{opacity:1}}:host.active li>div{margin-inline:.5rem}:host.active li>div.external:after{opacity:1}:host.active li>div.external a{padding-right:2rem}:host.active li>div.parent:not(.loading):after{opacity:1}:host.active li>div.parent a{padding-right:2rem}:host.active li>div.parent.loading .loading{opacity:1!important}:host.active li>div a i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.active li>div a span{opacity:1}:host.expanded li .selected:not(.loading).parent:after,:host.active li .selected:not(.loading).parent:after{--tw-rotate: -90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}li{position:relative;height:100%}li>div{position:relative;overflow:hidden;height:var(--sidebar-item-height);line-height:var(--sidebar-item-height);border-radius:var(--sidebar-item-radius);transition-property:margin,background-color;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration)}li>div:hover{background-color:var(--sidebar-item-hover-bg)}li>div.selected{background-color:var(--sidebar-item-selected-bg);color:var(--sidebar-item-selected-text)}li>div.external:after{position:absolute;top:0;right:.75rem;width:10px;font-size:.75rem;line-height:1rem;font-weight:800;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:0;--tw-content: \"\\f08e\";content:var(--tw-content);font-family:\"Font Awesome 6 Free\";transition-duration:var(--sidebar-animation-duration);will-change:opacity}li>div.parent:after{position:absolute;top:0;right:.75rem;width:10px;font-weight:800;transition-property:opacity,transform;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:0;font-family:\"Font Awesome 6 Free\";transition-duration:var(--sidebar-animation-duration);will-change:opacity,transform}li>div.parent:not(.failed):after{--tw-content: \"\\f104\";content:var(--tw-content)}li>div.parent.failed:after{right:1rem;--tw-content: \"\\f071\";content:var(--tw-content)}li>div a{display:block;height:100%;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:.75rem;padding-right:.75rem;text-align:left;width:var(--sidebar-expanded-width)}li>div a i{margin-right:.5rem;font-size:1.25rem;line-height:1.75rem;transition-property:font-size,line-height,margin-left;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);margin-left:var(--sidebar-icon-collapsed-margin);transition-duration:var(--sidebar-animation-duration);will-change:font-size,line-height,margin-left}li>div a span{text-overflow:ellipsis;opacity:0;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:opacity}li>div .loading{position:absolute;top:0;right:.55rem;height:100%;width:1rem;opacity:0;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:opacity}li>div .loading svg{height:100%;width:100%}li>ul{overflow:hidden;transition-property:height,max-height;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:height,max-height}li>ul a{padding-left:1.25rem}:host(:not(.first-level)) li>div>a{position:relative;padding-left:1.5rem}:host(:not(.first-level)) li>div>a:before{content:\"\";position:absolute;left:.6rem;top:0;bottom:0;width:0;border-left:1px solid var(--sidebar-tree-line)}:host(:not(.first-level)) li>div>a:after{content:\"\";position:absolute;left:.6rem;top:calc(50% - .55rem);width:.6rem;height:.55rem;border-left:1px solid var(--sidebar-tree-line);border-bottom:1px solid var(--sidebar-tree-line);border-bottom-left-radius:.4rem}:host(.last-child:not(.first-level)) li>div>a:before{bottom:calc(50% + .4rem)}\n"], dependencies: [{ kind: "component", type: SidebarItemComponent, selector: "lib-sidebar-item", inputs: ["isLast", "level", "menu"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: SidebarItemComponent, decorators: [{
             type: Component,
@@ -3434,7 +3434,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>\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"] }]
+                    }, template: "<li>\n    <div #menuContainer\n    [class.external]=\"opensInNewBrowserTab\"\n    [class.failed]=\"hasFailed\"\n    [class.loading]=\"isLoading\"\n    [class.parent]=\"isParent\"\n    [class.selected]=\"isSelected\"\n    role=\"button\"\n    tabindex=\"0\"\n    [attr.aria-current]=\"isSelected\"\n    (click)=\"onSelectItem()\"\n    (keydown.enter)=\"onSelectItem()\"\n    (keydown.space)=\"onSelectItem(); $event.preventDefault()\">\n        <a [attr.title]=\"opensInNewBrowserTab ? externalLinkText : null\">\n            <i *ngIf=\"hasIcon && level === 0\" class=\"fa-solid fa-fw {{ menu.icon }}\"></i>\n            <span>{{ menu.label | translate }}</span>\n        </a>\n\n        <div class=\"loading\" *ngIf=\"isParent\">\n            <svg class=\"animate-spin text-white\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n                <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n                <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n            </svg>\n        </div>\n    </div>\n\n    <ul *ngIf=\"isParent\"\n    [class.open]=\"isSelected\"\n    [ngStyle]=\"{\n        'height.px': childHeight,\n        'max-height.px': childHeight\n    }\">\n        <lib-sidebar-item *ngFor=\"let child of menu.children; trackBy: trackByFn; let last = last\"\n        [menu]=\"child\"\n        [level]=\"level+1\"\n        [isLast]=\"last\">\n        </lib-sidebar-item>\n    </ul>\n</li>", styles: ["@charset \"UTF-8\";:host{position:relative;display:block}@media (max-width: 767px){:host:not(.active) li>ul{height:0px!important}}@media (min-width: 768px){:host:not(.expanded):not(.active) li>ul{height:0px!important}:host.expanded li>div{margin-inline:.5rem}:host.expanded li>div.external:after{opacity:1}:host.expanded li>div.external a{padding-right:2rem}:host.expanded li>div.parent:not(.loading):after{opacity:1}:host.expanded li>div.parent a{padding-right:2rem}:host.expanded li>div.parent.loading .loading{opacity:1!important}:host.expanded li>div a i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.expanded li>div a span{opacity:1}}:host.active li>div{margin-inline:.5rem}:host.active li>div.external:after{opacity:1}:host.active li>div.external a{padding-right:2rem}:host.active li>div.parent:not(.loading):after{opacity:1}:host.active li>div.parent a{padding-right:2rem}:host.active li>div.parent.loading .loading{opacity:1!important}:host.active li>div a i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.active li>div a span{opacity:1}:host.expanded li .selected:not(.loading).parent:after,:host.active li .selected:not(.loading).parent:after{--tw-rotate: -90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}li{position:relative;height:100%}li>div{position:relative;overflow:hidden;height:var(--sidebar-item-height);line-height:var(--sidebar-item-height);border-radius:var(--sidebar-item-radius);transition-property:margin,background-color;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration)}li>div:hover{background-color:var(--sidebar-item-hover-bg)}li>div.selected{background-color:var(--sidebar-item-selected-bg);color:var(--sidebar-item-selected-text)}li>div.external:after{position:absolute;top:0;right:.75rem;width:10px;font-size:.75rem;line-height:1rem;font-weight:800;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:0;--tw-content: \"\\f08e\";content:var(--tw-content);font-family:\"Font Awesome 6 Free\";transition-duration:var(--sidebar-animation-duration);will-change:opacity}li>div.parent:after{position:absolute;top:0;right:.75rem;width:10px;font-weight:800;transition-property:opacity,transform;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:0;font-family:\"Font Awesome 6 Free\";transition-duration:var(--sidebar-animation-duration);will-change:opacity,transform}li>div.parent:not(.failed):after{--tw-content: \"\\f104\";content:var(--tw-content)}li>div.parent.failed:after{right:1rem;--tw-content: \"\\f071\";content:var(--tw-content)}li>div a{display:block;height:100%;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:.75rem;padding-right:.75rem;text-align:left;width:var(--sidebar-expanded-width)}li>div a i{margin-right:.5rem;font-size:1.25rem;line-height:1.75rem;transition-property:font-size,line-height,margin-left;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);margin-left:var(--sidebar-icon-collapsed-margin);transition-duration:var(--sidebar-animation-duration);will-change:font-size,line-height,margin-left}li>div a span{text-overflow:ellipsis;opacity:0;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:opacity}li>div .loading{position:absolute;top:0;right:.55rem;height:100%;width:1rem;opacity:0;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:opacity}li>div .loading svg{height:100%;width:100%}li>ul{overflow:hidden;transition-property:height,max-height;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:height,max-height}li>ul a{padding-left:1.25rem}:host(:not(.first-level)) li>div>a{position:relative;padding-left:1.5rem}:host(:not(.first-level)) li>div>a:before{content:\"\";position:absolute;left:.6rem;top:0;bottom:0;width:0;border-left:1px solid var(--sidebar-tree-line)}:host(:not(.first-level)) li>div>a:after{content:\"\";position:absolute;left:.6rem;top:calc(50% - .55rem);width:.6rem;height:.55rem;border-left:1px solid var(--sidebar-tree-line);border-bottom:1px solid var(--sidebar-tree-line);border-bottom-left-radius:.4rem}:host(.last-child:not(.first-level)) li>div>a:before{bottom:calc(50% + .4rem)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { menuContainer: [{
                 type: ViewChild,
                 args: ['menuContainer']
@@ -3750,7 +3750,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\"\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" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: RibbonButtonComponent, isStandalone: true, selector: "lib-ribbon-button", inputs: { color: "color", defaultOption: "defaultOption", disabled: "disabled", icon: "icon", iconSize: "iconSize", label: "label", loading: "loading", options: "options", tooltip: "tooltip" }, outputs: { action: "action" }, host: { listeners: { "body:mousedown": "bodyMouseDown($event)", "body:mouseup": "bodyMouseUp($event)", "document:keydown.escape": "documentKeyDown($event)" }, properties: { "class.dropdown": "options.length > 0", "class.show": "showDropdown" } }, ngImport: i0, template: "<div class=\"button-container\"\n[attr.title]=\"tooltip || null\">\n    <a class=\"button\"\n    role=\"button\"\n    [attr.tabindex]=\"isButtonDisabled ? -1 : 0\"\n    [attr.aria-disabled]=\"isButtonDisabled\"\n    [class.disabled]=\"isButtonDisabled\"\n    [class.success]=\"status === 'success'\"\n    [class.warning]=\"status === 'warning'\"\n    [class.failure]=\"status === 'failure'\"\n    [class.small]=\"iconSize === 'small'\"\n    (click)=\"onButtonClicked()\"\n    (keydown.enter)=\"onButtonClicked()\"\n    (keydown.space)=\"onButtonClicked(); $event.preventDefault()\"\n    >\n        <span class=\"icon\" [class.loading]=\"loading\">\n            <i class=\"fas fa-fw\" [ngClass]=\"[ buttonIcon, color ]\"></i>\n            \n            <svg [ngClass]=\"[ color ]\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n                <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n                <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n            </svg>\n        </span>\n    \n        <span class=\"label\" [class.text-white]=\"status !== null\">\n            {{ label | translate }}\n        </span>\n    </a>\n    \n    <a class=\"button-dropdown\" *ngIf=\"options.length > 0\"\n    role=\"button\"\n    [attr.tabindex]=\"isButtonDisabled ? -1 : 0\"\n    [attr.aria-disabled]=\"isButtonDisabled\"\n    aria-haspopup=\"menu\"\n    [attr.aria-expanded]=\"showDropdown\"\n    [class.disabled]=\"isButtonDisabled\"\n    [class.success]=\"status === 'success'\"\n    [class.warning]=\"status === 'warning'\"\n    [class.failure]=\"status === 'failure'\"\n    [class.small]=\"iconSize === 'small'\"\n    (click)=\"onShowHideDropdown()\"\n    (keydown.enter)=\"onShowHideDropdown()\"\n    (keydown.space)=\"onShowHideDropdown(); $event.preventDefault()\"\n    >\n        <i class=\"fas fa-chevron-down\" [ngClass]=\"[ color ]\"></i>\n    </a>\n</div>\n\n<ul class=\"options-dropdown\" *ngIf=\"options.length > 0\" role=\"menu\">\n    <li *ngFor=\"let option of options; let i = index\"\n    role=\"menuitem\"\n    [attr.tabindex]=\"isOptionDisabled(option) || !isOptionVisible(option) ? -1 : 0\"\n    [attr.aria-disabled]=\"isOptionDisabled(option)\"\n    [class.default-option]=\"i === defaultOption\"\n    [class.disabled]=\"isOptionDisabled(option)\"\n    [class.hidden]=\"!isOptionVisible(option)\"\n    (click)=\"onOptionClicked(option)\"\n    (keydown.enter)=\"onOptionClicked(option)\"\n    (keydown.space)=\"onOptionClicked(option); $event.preventDefault()\"\n    >\n        <i class=\"fas fa-fw\" *ngIf=\"!!option.icon\" [ngClass]=\"[ option.icon, color ]\"></i> {{ option.label | translate }}\n    </li>\n</ul>\n", styles: [":host-context.dropdown .button{border-top-right-radius:0;border-bottom-right-radius:0}.button-container{display:flex}.button{border-radius:.5rem;padding-left:.75rem;padding-right:.75rem}.button.success .icon i,.button.success .label,.button.warning .icon i,.button.warning .label,.button.failure .icon i,.button.failure .label{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.button.small{padding-left:.5rem;padding-right:.5rem}.button.small .icon i{height:1.75rem;font-size:1.5rem;line-height:2rem}@media (min-width: 768px){.button.small .icon i{font-size:1.25rem;line-height:1.75rem}}.button.small .icon svg{height:1.5rem}.button.small .label{font-size:.875rem;line-height:1.25rem}.button .icon{position:relative;display:flex;height:2rem;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-size:2.25rem;line-height:2.5rem}@media (min-width: 768px){.button .icon{font-size:1.875rem;line-height:2.25rem}}.button .icon i{transition-property:all;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.button .icon svg{position:absolute;height:2rem;width:2rem}@keyframes spin{to{transform:rotate(360deg)}}.button .icon svg{animation:spin 1s linear infinite;opacity:0;transition-property:opacity;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.button .icon.loading i{opacity:0}.button .icon.loading svg{opacity:1}.button .label{margin-top:.5rem;text-align:center;--tw-text-opacity: 1;color:rgb(31 41 55 / var(--tw-text-opacity, 1));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.button-dropdown{justify-content:center;border-top-right-radius:.5rem;border-bottom-right-radius:.5rem;padding-left:.25rem;padding-right:.25rem}.button-dropdown.success i,.button-dropdown.warning i,.button-dropdown.failure i{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.button-dropdown.small{font-size:.875rem;line-height:1.25rem}@media (min-width: 768px){.button-dropdown.small{font-size:1rem;line-height:1.5rem}}.button,.button-dropdown{display:flex;cursor:pointer;-webkit-user-select:none;user-select:none;flex-direction:column;padding-top:.5rem;padding-bottom:.5rem;transition-property:all;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.button:hover,.button-dropdown:hover{background-color:#d1d5dbcc}.button:focus,.button-dropdown:focus{background-color:#d1d5dbcc}.button:active,.button-dropdown:active{background-color:#9ca3af99}.button:disabled,.button.disabled,.button-dropdown:disabled,.button-dropdown.disabled{pointer-events:none;opacity:.6}.button.success,.button-dropdown.success{background-color:#16a34abf}.button.warning,.button-dropdown.warning{background-color:#ca8a04bf}.button.failure,.button-dropdown.failure{background-color:#dc2626bf}.button.small,.button-dropdown.small{padding-top:.25rem;padding-bottom:.25rem}ul{z-index:1;min-width:fit-content;-webkit-user-select:none;user-select:none}ul li{cursor:pointer;white-space:nowrap;padding:.5rem 1rem}ul li.default-option{display:none}ul li.disabled{pointer-events:none;opacity:.6}ul li:hover{--tw-bg-opacity: 1;background-color:rgb(230 244 255 / var(--tw-bg-opacity, 1))}ul li i{margin-right:.25rem}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: RibbonButtonComponent, decorators: [{
             type: Component,
@@ -3762,7 +3762,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
                         NgFor,
                         NgIf,
                         TranslatePipe,
-                    ], 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"] }]
+                    ], template: "<div class=\"button-container\"\n[attr.title]=\"tooltip || null\">\n    <a class=\"button\"\n    role=\"button\"\n    [attr.tabindex]=\"isButtonDisabled ? -1 : 0\"\n    [attr.aria-disabled]=\"isButtonDisabled\"\n    [class.disabled]=\"isButtonDisabled\"\n    [class.success]=\"status === 'success'\"\n    [class.warning]=\"status === 'warning'\"\n    [class.failure]=\"status === 'failure'\"\n    [class.small]=\"iconSize === 'small'\"\n    (click)=\"onButtonClicked()\"\n    (keydown.enter)=\"onButtonClicked()\"\n    (keydown.space)=\"onButtonClicked(); $event.preventDefault()\"\n    >\n        <span class=\"icon\" [class.loading]=\"loading\">\n            <i class=\"fas fa-fw\" [ngClass]=\"[ buttonIcon, color ]\"></i>\n            \n            <svg [ngClass]=\"[ color ]\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n                <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n                <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n            </svg>\n        </span>\n    \n        <span class=\"label\" [class.text-white]=\"status !== null\">\n            {{ label | translate }}\n        </span>\n    </a>\n    \n    <a class=\"button-dropdown\" *ngIf=\"options.length > 0\"\n    role=\"button\"\n    [attr.tabindex]=\"isButtonDisabled ? -1 : 0\"\n    [attr.aria-disabled]=\"isButtonDisabled\"\n    aria-haspopup=\"menu\"\n    [attr.aria-expanded]=\"showDropdown\"\n    [class.disabled]=\"isButtonDisabled\"\n    [class.success]=\"status === 'success'\"\n    [class.warning]=\"status === 'warning'\"\n    [class.failure]=\"status === 'failure'\"\n    [class.small]=\"iconSize === 'small'\"\n    (click)=\"onShowHideDropdown()\"\n    (keydown.enter)=\"onShowHideDropdown()\"\n    (keydown.space)=\"onShowHideDropdown(); $event.preventDefault()\"\n    >\n        <i class=\"fas fa-chevron-down\" [ngClass]=\"[ color ]\"></i>\n    </a>\n</div>\n\n<ul class=\"options-dropdown\" *ngIf=\"options.length > 0\" role=\"menu\">\n    <li *ngFor=\"let option of options; let i = index\"\n    role=\"menuitem\"\n    [attr.tabindex]=\"isOptionDisabled(option) || !isOptionVisible(option) ? -1 : 0\"\n    [attr.aria-disabled]=\"isOptionDisabled(option)\"\n    [class.default-option]=\"i === defaultOption\"\n    [class.disabled]=\"isOptionDisabled(option)\"\n    [class.hidden]=\"!isOptionVisible(option)\"\n    (click)=\"onOptionClicked(option)\"\n    (keydown.enter)=\"onOptionClicked(option)\"\n    (keydown.space)=\"onOptionClicked(option); $event.preventDefault()\"\n    >\n        <i class=\"fas fa-fw\" *ngIf=\"!!option.icon\" [ngClass]=\"[ option.icon, color ]\"></i> {{ option.label | translate }}\n    </li>\n</ul>\n", styles: [":host-context.dropdown .button{border-top-right-radius:0;border-bottom-right-radius:0}.button-container{display:flex}.button{border-radius:.5rem;padding-left:.75rem;padding-right:.75rem}.button.success .icon i,.button.success .label,.button.warning .icon i,.button.warning .label,.button.failure .icon i,.button.failure .label{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.button.small{padding-left:.5rem;padding-right:.5rem}.button.small .icon i{height:1.75rem;font-size:1.5rem;line-height:2rem}@media (min-width: 768px){.button.small .icon i{font-size:1.25rem;line-height:1.75rem}}.button.small .icon svg{height:1.5rem}.button.small .label{font-size:.875rem;line-height:1.25rem}.button .icon{position:relative;display:flex;height:2rem;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-size:2.25rem;line-height:2.5rem}@media (min-width: 768px){.button .icon{font-size:1.875rem;line-height:2.25rem}}.button .icon i{transition-property:all;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.button .icon svg{position:absolute;height:2rem;width:2rem}@keyframes spin{to{transform:rotate(360deg)}}.button .icon svg{animation:spin 1s linear infinite;opacity:0;transition-property:opacity;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.button .icon.loading i{opacity:0}.button .icon.loading svg{opacity:1}.button .label{margin-top:.5rem;text-align:center;--tw-text-opacity: 1;color:rgb(31 41 55 / var(--tw-text-opacity, 1));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.button-dropdown{justify-content:center;border-top-right-radius:.5rem;border-bottom-right-radius:.5rem;padding-left:.25rem;padding-right:.25rem}.button-dropdown.success i,.button-dropdown.warning i,.button-dropdown.failure i{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.button-dropdown.small{font-size:.875rem;line-height:1.25rem}@media (min-width: 768px){.button-dropdown.small{font-size:1rem;line-height:1.5rem}}.button,.button-dropdown{display:flex;cursor:pointer;-webkit-user-select:none;user-select:none;flex-direction:column;padding-top:.5rem;padding-bottom:.5rem;transition-property:all;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.button:hover,.button-dropdown:hover{background-color:#d1d5dbcc}.button:focus,.button-dropdown:focus{background-color:#d1d5dbcc}.button:active,.button-dropdown:active{background-color:#9ca3af99}.button:disabled,.button.disabled,.button-dropdown:disabled,.button-dropdown.disabled{pointer-events:none;opacity:.6}.button.success,.button-dropdown.success{background-color:#16a34abf}.button.warning,.button-dropdown.warning{background-color:#ca8a04bf}.button.failure,.button-dropdown.failure{background-color:#dc2626bf}.button.small,.button-dropdown.small{padding-top:.25rem;padding-bottom:.25rem}ul{z-index:1;min-width:fit-content;-webkit-user-select:none;user-select:none}ul li{cursor:pointer;white-space:nowrap;padding:.5rem 1rem}ul li.default-option{display:none}ul li.disabled{pointer-events:none;opacity:.6}ul li:hover{--tw-bg-opacity: 1;background-color:rgb(230 244 255 / var(--tw-bg-opacity, 1))}ul li i{margin-right:.25rem}\n"] }]
         }], propDecorators: { color: [{
                 type: Input
             }], defaultOption: [{
@@ -4030,14 +4030,14 @@ class DateValidators {
         };
     }
     static greaterThanOrEqualToday(control) {
-        let today = new Date();
+        const today = new Date();
         if (!!control.value && new Date(control.value) < today) {
             return { 'greaterThanOrEqualToday': true };
         }
         return null;
     }
     static greaterThanToday(control) {
-        let today = new Date();
+        const today = new Date();
         if (!!control.value && new Date(control.value) <= today) {
             return { 'greaterThanToday': true };
         }
@@ -4062,14 +4062,14 @@ class DateValidators {
         };
     }
     static lessThanOrEqualToday(control) {
-        let today = new Date();
+        const today = new Date();
         if (!!control.value && new Date(control.value) > today) {
             return { 'lessThanOrEqualToday': true };
         }
         return null;
     }
     static lessThanToday(control) {
-        let today = new Date();
+        const today = new Date();
         if (!!control.value && new Date(control.value) >= today) {
             return { 'lessThanToday': true };
         }